/* ===== CART MULTI-ITEM STYLES ===== */
/* Lista articoli nel carrello */
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

/* Singola riga articolo nel carrello */
.cart-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8edf2;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.cart-item-row:hover {
    border-left: 4px solid #063046;
    border-color: #063046;
    box-shadow: 0 2px 12px rgba(6, 48, 70, 0.12);
}
/* [CHECKOUT] Hover card Smart — verde scuro */
.summary-smart .cart-item-row:hover {
    border-left: 4px solid #2a6f44;
    border-color: #2a6f44;
    box-shadow: 0 2px 12px rgba(42, 111, 68, 0.15);
}
/* [CHECKOUT] Hover card Pro — oro/oliva */
.summary-pro .cart-item-row:hover {
    border-left: 4px solid #a3991c;
    border-color: #a3991c;
    box-shadow: 0 2px 12px rgba(163, 153, 28, 0.15);
}
/* [CHECKOUT] Hover card Business — teal/petrolio */
.summary-business .cart-item-row:hover {
    border-left: 4px solid #00586f;
    border-color: #00586f;
    box-shadow: 0 2px 12px rgba(0, 88, 111, 0.15);
}

/* Parte sinistra riga: icona + info */
.cart-item-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Icona circolare colorata per tier */
.cart-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* [CHECKOUT/CART] Icona tier Smart — verde scuro come bottone Jobbir */
.cart-tier-smart {
    background: linear-gradient(135deg, #d9f0e3 0%, #b3dfc4 100%);
    color: #2a6f44;
}

/* [CHECKOUT/CART] Icona tier Pro — oro/oliva come bottone Jobbir */
.cart-tier-pro {
    background: linear-gradient(135deg, #f5f0d0 0%, #e6dfa0 100%);
    color: #a3991c;
}

/* [CHECKOUT/CART] Icona tier Business — teal/petrolio come bottone Jobbir */
.cart-tier-business {
    background: linear-gradient(135deg, #d0eef5 0%, #a0dce8 100%);
    color: #00586f;
}

/* Info articolo: nome servizio + dettagli */
.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cart-item-service {
    font-weight: 700;
    color: #063046;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.cart-item-detail {
    font-size: 13px;
    color: #6b7c8a;
}

/* Tag Indeed incluso */
.cart-indeed-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: linear-gradient(135deg, #e0f7e9 0%, #c8f0d8 100%);
    color: #1a7a3a;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    width: fit-content;
}

.cart-indeed-tag i {
    font-size: 10px;
}

/* Parte destra riga: prezzo + rimuovi */
.cart-item-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Prezzo singolo articolo */
.cart-item-price {
    font-weight: 700;
    color: #063046;
    font-size: 17px;
    white-space: nowrap;
}

/* Bottone rimuovi singolo articolo */
.cart-item-remove {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #b0bec5;
    cursor: pointer;
    transition: all 0.2s;
}

.cart-item-remove:hover {
    background: #fef2f2;
    color: #F9423A;
}

/* Messaggio carrello vuoto */
.cart-empty-message {
    text-align: center;
    color: #9ab;
    padding: 40px 0;
    font-size: 15px;
    line-height: 2;
}

.cart-empty-message i {
    font-size: 40px;
    color: #d0dde5;
    margin-bottom: 8px;
}

/* Barra totale ordine */
.cart-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #063046 0%, #125978 100%);
    border-radius: 12px;
    margin-bottom: 20px;
}

.cart-total-label {
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    font-weight: 500;
}

.cart-total-amount {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* [CHECKOUT] Box riepilogo ordine — bordo laterale dinamico in base al pacchetto */
.checkout-summary-box {
    background: linear-gradient(135deg, #ffffff 0%, #f4fbff 100%);
    border-radius: 16px;
    border-left: 4px solid #063046;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(6, 48, 70, 0.08);
}

/* [CHECKOUT] Riepilogo — bordo verde scuro per Smart */
.checkout-summary-box.summary-smart {
    border-left-color: #2a6f44;
    background: linear-gradient(135deg, #ffffff 0%, #edf7f1 100%);
}
/* [CHECKOUT] Barra totale Smart — verde scuro */
.checkout-summary-box.summary-smart .cart-total-bar {
    background: linear-gradient(135deg, #2a6f44 0%, #3a8f5a 100%);
}

/* [CHECKOUT] Riepilogo — bordo oro per Pro */
.checkout-summary-box.summary-pro {
    border-left-color: #a3991c;
    background: linear-gradient(135deg, #ffffff 0%, #f9f7ec 100%);
}
/* [CHECKOUT] Barra totale Pro — oro/oliva */
.checkout-summary-box.summary-pro .cart-total-bar {
    background: linear-gradient(135deg, #8a8010 0%, #a3991c 100%);
}

/* [CHECKOUT] Riepilogo — bordo teal per Business */
.checkout-summary-box.summary-business {
    border-left-color: #00586f;
    background: linear-gradient(135deg, #ffffff 0%, #edf6f9 100%);
}
/* [CHECKOUT] Barra totale Business — teal/petrolio */
.checkout-summary-box.summary-business .cart-total-bar {
    background: linear-gradient(135deg, #004558 0%, #00586f 100%);
}

/* Checkout multi-item blocks (legacy) */
.checkout-item-block {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e8ef;
}
.checkout-item-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ===== VARIABILI DEL DESIGN SYSTEM (FIGMA) ===== */
/* [SEZIONE] Definizione di tutte le variabili CSS globali del progetto, estratte dal Design System di Figma.
   Include colori, gradienti, spaziature, raggi di bordo, ombre, dimensioni dei componenti,
   tipografia personalizzata, token per bottoni, card e campi di input. */
:root {
    /* Sistema di colori — palette principale del brand Impiegando/Alia */
    --Impiegando---800: #125978;
    --Impiegando---950: #063046;
    --Alia---Gradient-01: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
    --impiegando-500-main: #00A5CF;
    --Impiegando---Gradient-02: linear-gradient(180deg, #A2F0FF 0%, #EBFDFF 100%);
    --hero-gradient: linear-gradient(180deg, #CEF8FF 0%, #EDFBFF 100%);
    --footer-gradient: linear-gradient(180deg, #CEF8FF 0%, #EDFBFF 100%);

    /* Colori derivati da Figma — colori semantici per uso nei componenti */
    --primary-color: #00A5CF;
    --secondary-color: #6E46AE;
    --accent-color: #F9423A;
    --dark-blue: #125978;
    --darker-blue: #063046;
    --light-bg: #EDFBFF;
    --white: #ffffff;
    --text-primary: #063046;
    --text-secondary: #125978;

    /* Design System — Scala delle spaziature (da 4px a 256px) */
    --space-xs: 4px;    /* 0.25rem */
    --space-sm: 8px;    /* 0.5rem */
    --space-md: 16px;   /* 1rem */
    --space-lg: 24px;   /* 1.5rem */
    --space-xl: 32px;   /* 2rem */
    --space-2xl: 48px;  /* 3rem */
    --space-3xl: 64px;  /* 4rem */
    --space-4xl: 96px;  /* 6rem */
    --space-5xl: 128px; /* 8rem */
    --space-6xl: 192px; /* 12rem */
    --space-7xl: 256px; /* 16rem */

    /* Design System — Raggi di bordo per arrotondamento angoli */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Design System — Ombre (box-shadow) per elevazione dei componenti */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 165, 207, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 165, 207, 0.15);
    --shadow-xl: 0 12px 48px rgba(0, 165, 207, 0.25);

    /* Dimensioni dei componenti principali (contenitore, sezione, card, modale) */
    --container-max-width: 1200px;
    --container-padding: var(--space-xl);
    --section-padding-y: var(--space-5xl);
    --card-padding: var(--space-2xl);
    --modal-max-width: 600px;
    --modal-padding: var(--space-2xl);

    /* Token tipografici personalizzati — titoli di sezione, hero, corpo e bottoni */
    --section-title-size: 40px;
    --section-title-weight: 430;
    --section-title-spacing: -0.04em;

    --hero-title-size: 60px;
    --hero-title-weight: 450;
    --hero-title-spacing: -0.04em;

    --body-text-size: 18px;
    --body-text-weight: 400;
    --body-text-spacing: 0;

    --btn-text-size: 16px;
    --btn-text-weight: 450;
    --btn-text-spacing: 0.03em;

    /* Token per i bottoni — colori, altezze e padding */
    --btn-primary-bg: #00A5CF;
    --btn-primary-hover: #0090B5;
    --btn-secondary-bg: #E6F9FF;
    --btn-secondary-hover: #CCF3FF;
    --btn-height-sm: 44px;
    --btn-height-md: 54px;
    --btn-padding-sm: 8px 20px;
    --btn-padding-md: 14px 28px;

    /* Token per le card — sfondo, bordo e ombre */
    --card-bg: #ffffff;
    --card-border: 1px solid rgba(162, 240, 255, 0.3);
    --card-shadow-sm: 0 8px 44px 0 rgba(0, 162, 224, 0.11);
    --card-shadow-hover: 0 12px 60px 0 rgba(0, 162, 224, 0.17);

    /* Token per i campi di input — sfondo, bordi e placeholder */
    --input-bg: #FBFDFF;
    --input-border: 2px solid #E0F4FF;
    --input-focus-border: 2px solid #00A5CF;
    --input-placeholder: #8BC5D1;

}

/* ===== TOKEN TIPOGRAFICI MOBILE ===== */
/* [SEZIONE] Sovrascrittura delle variabili tipografiche per schermi ≤768px.
   Riduce le dimensioni dei font per titoli hero, sezioni, testo corpo e bottoni su dispositivi mobili. */
@media (max-width: 768px) {
  :root {
    --hero-title-size: 42px;
    --section-title-size: 38px;
    --body-text-size: 16px;
    --btn-text-size: 16px; /* usiamo il token dei bottoni già presente nel file */
  }
}

/* ===== IMPORTAZIONE FONT E DISABILITAZIONE RFS ===== */
/* Importazione del font Google Inter come fallback per il font principale Satoshi */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Disabilita il sistema RFS (Responsive Font Sizing) globalmente in modo selettivo,
   escludendo i titoli hero e di sezione che necessitano del ridimensionamento responsive */
*:not(.hero-title):not(.section-title):not(h1):not(h2):not(h3) {
    --rfs-base-font-size: unset !important;
    --rfs-unit: px !important;
    --rfs-fluid: none !important;
}

/* Sovrascrive le classi RFS specifiche non critiche — forza il font-size ereditato */
.rfs-fluid:not(.hero-title):not(.section-title) {
    font-size: inherit !important;
}

[data-rfs]:not(.hero-title):not(.section-title) {
    font-size: inherit !important;
}

[class*="rfs"]:not(.hero-title):not(.section-title) {
    font-size: inherit !important;
}

/* ===== STILI DI BASE GLOBALI ===== */
/* Reset globale — rimuove margini, padding e imposta box-sizing border-box su tutti gli elementi */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Stili base del body — font principale Satoshi, sfondo gradiente uniforme su tutte le pagine,
   colore testo primario, altezza di riga 1.5 e nasconde l'overflow orizzontale */
body {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: #EDFBFF !important;
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    font-size: var(--text-base);
    font-weight: 400;
    letter-spacing: 0;
}

/* ===== CONTENITORE HOMEPAGE ===== */
/* Contenitore principale della homepage — occupa tutta la larghezza e altezza minima dello schermo */
.impiegando-home {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* Regole specifiche per la homepage con priorità massima — forza il font Satoshi sulla homepage */
.impiegando-home {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Forza il font Satoshi su TUTTI gli elementi figli della homepage,
   inclusi titoli, paragrafi, span, div, link, bottoni, input, textarea, label e liste */
.impiegando-home *,
.impiegando-home h1,
.impiegando-home h2,
.impiegando-home h3,
.impiegando-home h4,
.impiegando-home h5,
.impiegando-home h6,
.impiegando-home p,
.impiegando-home span,
.impiegando-home div,
.impiegando-home a,
.impiegando-home button,
.impiegando-home input,
.impiegando-home textarea,
.impiegando-home label,
.impiegando-home li {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Regole globali per tutti gli elementi — garantisce che il font Satoshi sia applicato
   a tutti i titoli, testi, controlli form e componenti speciali come hero e social proof */
h1, h2, h3, h4, h5, h6,
p, span, div, a, button,
input, textarea, select, label, li,
.hero-title, .hero-subtitle,
.client-text {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Eccezione per le icone Font Awesome — mantiene il font proprietario
   per tutte le varianti (solid, regular, brand, light, thin, duotone, sharp) */
.fa, .fas, .far, .fab, .fal, .fat, .fad, .fass, [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
}

/* ===== BARRA DI NAVIGAZIONE (NAVBAR) ===== */
/* [SEZIONE] Stili della barra di navigazione principale, standardizzata per tutte le pagine.
   Posizionamento assoluto in cima, sfondo trasparente, centrata orizzontalmente. */
.navbar {
    position: absolute;
    top: var(--space-3xl);
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-3xl);
    height: 60px;
}

/* Sovrascrittura per consistenza su tutte le varianti della navbar (elemento <nav> e classe .navbar) */
nav.navbar,
.navbar {
    top: 56px ;
    height: 10px ;
}

/* Contenitore interno della navbar — layout flex centrato con larghezza massima 1600px */
.navbar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 100%;
    max-width: 1600px;
}

/* Logo del brand nella navbar — dimensione standardizzata per tutte le pagine */
.navbar-brand .logo {
    height: 140px;
    width: auto;
    max-width: 300px;
}

/* Override specifico del logo per pagine che usano classi CSS diverse — forza dimensioni con !important */
.navbar .logo,
.navbar-brand img {
    height: 100px !important;
    width: auto !important;
    max-width: 300px !important;
}
/* Contenitore dei pulsanti posizionati a destra nella navbar — include bottone demo e avatar */
.fixed-buttons-right {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: 16px;  /* SPAZIO fra btn-demo e btn-avatar */
}

/* ===== PULSANTE AVATAR UTENTE ===== */
/* Bottone avatar nella navbar — mostra l'immagine profilo con bordo luminoso azzurro */
.btn-avatar {
    width: 54px;
    height: 54px;
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 0 0 4px #B6F0FF;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 54px;
    max-height: 54px;
}

/* Immagine all'interno del pulsante avatar — dimensioni fisse con bordi arrotondati */
.btn-avatar img {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: block;
}

/* Effetti hover e focus sul pulsante avatar — ombra più intensa e leggero ingrandimento */
.btn-avatar:hover,
.btn-avatar:focus {
    box-shadow: 0 0 0 10px #7ADFFF;
    transform: scale(1.01);
}

/* ===== PULSANTI LATERALI FISSI (SCROLL) ===== */
/* [SEZIONE] Pulsanti fissi che appaiono durante lo scroll della pagina.
   Inizialmente nascosti, diventano visibili tramite la classe .show via JavaScript. */
.fixed-buttons {
    position: fixed;
    top: 95%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Stato visibile dei pulsanti fissi — attivato quando l'utente scorre la pagina */
.fixed-buttons.show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Pulsante fisso a sinistra — posizionato assolutamente nel contenitore dei pulsanti fissi */
.fixed-button-left {
    position: absolute;
    left: 32px;
    top: 10%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
}

/* Pulsanti fissi a destra (nel contenitore scroll) — bottoni demo e avatar durante lo scroll */
.fixed-buttons-right {
    position: absolute;
    right: 32px;
    top: 10%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

/* ===== PULSANTE DEMO ===== */
/* Bottone principale "Richiedi Demo" — sfondo azzurro, bordo luminoso, dimensione fissa 260px */
.btn-demo {
    background: #00A5CF;
    color: var(--white);
    border: none;
    padding: 0;
    border-radius: var(--radius-xl);
    font-weight: var(--btn-text-weight);
    font-size: var(--btn-text-size);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 4px #B6F0FF;
    width: 260px;
    height: var(--btn-height-md);
    font-family: 'Satoshi', sans-serif;
    letter-spacing: var(--btn-text-spacing);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 1;
    min-height: var(--btn-height-md);
    max-height: var(--btn-height-md);
}

/* Stato hover del pulsante demo — sfondo più scuro, ombra più ampia, leggero spostamento verso l'alto */
.btn-demo:hover {
    background: var(--btn-primary-hover);
    box-shadow: 0 0 0 7px #7ADFFF;
    transform: translateY(-1px);
}

/* Stato focus del pulsante demo — ombra ancora più ampia per accessibilità */
.btn-demo:focus {
    box-shadow: 0 0 0 10px #7ADFFF;
    transform: scale(1.01);
}

/* ===== PULSANTI CARRELLO E LOGIN ===== */
/* Stile base condiviso per i pulsanti carrello e login — sfondo secondario chiaro, icona azzurra */
.btn-cart,
.btn-login {
    background: var(--btn-secondary-bg);
    border: none;
    color: var(--btn-primary-bg);
    width: var(--btn-height-sm);
    height: var(--btn-height-sm);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: var(--text-base);
    box-shadow: none;
}

/* Pulsante login — bordi arrotondati solo a sinistra con separatore destro (parte del gruppo) */
.btn-login {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid #CCF3FF;
}

/* Pulsante carrello — bordi arrotondati solo a destra (parte del gruppo) */
.btn-cart {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Stato hover per carrello e login — sfondo più intenso e spostamento verso l'alto */
.btn-cart:hover,
.btn-login:hover {
    background: #CCF3FF;
    color: #00A5CF;
    transform: translateY(-2px);
}

/* Stato hover specifico del pulsante login */
.btn-login:hover {
    background: #CCF3FF;
    transform: translateY(-2px);
}

/* ===== MENU UTENTE (STATO AUTENTICATO) ===== */
/* Pulsante menu utente nello stato autenticato — mostra icona SVG personalizzata */
.btn-user-menu.logged-in {
    background: #E6F9FF;
    border: none;
    color: #00A5CF;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    box-shadow: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid #CCF3FF;
    position: relative;
}

/* Stato hover del pulsante menu utente autenticato */
.btn-user-menu.logged-in:hover {
    background: #CCF3FF;
    color: #00A5CF;
    transform: translateY(-1px);
}

/* Nasconde l'icona Font Awesome originale nel pulsante utente autenticato */
.btn-user-menu.logged-in i {
    display: none !important;
}

/* Pseudo-elemento con icona SVG personalizzata "logged" — centrata nel pulsante */
.btn-user-menu.logged-in::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('/static/img/logged.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ===== DROPDOWN MENU UTENTE (DESKTOP) ===== */
/* Contenitore relativo per il posizionamento del dropdown utente */
.user-menu-container {
    position: relative;
    display: inline-block;
}

/* Dropdown menu utente — posizionato sopra il pulsante, nascosto di default con animazione */
.user-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #E6F9FF;
    border: none;
    color: #00A5CF;
    width: 88px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 165, 207, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    z-index: 10000;
    gap: 6px;
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
}

/* Stato visibile del dropdown utente — attivato tramite classe .show via JavaScript */
.user-dropdown.show,
.user-dropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Stato hover del dropdown utente — sfondo più chiaro */
.user-dropdown:hover {
    background: #CCF3FF;
    color: #00A5CF;
    transform: translateY(1px);
}

/* Icona/immagine all'interno del dropdown utente */
.user-dropdown img {
    width: 14px;
    height: 14px;
}

/* ===== MENU UTENTE MOBILE ===== */
/* Contenitore del menu utente mobile — posizionamento relativo per il dropdown */
.mobile-user-menu-container {
    position: relative;
    display: flex;
    align-items: center;
}
/* Dropdown utente mobile — appare sopra il pulsante con sfondo semi-trasparente e bordi arrotondati */
.mobile-user-dropdown {
    position: absolute;
    bottom: calc(100% + 20px);
    left: 145%;
    transform: translateX(-50%);
    background: rgba(0, 165, 207, 0.16);
    padding: 16px 16px 16px 16px;
    box-shadow: 0 8px 32px rgba(162, 240, 255, 0.4);
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10001;
    cursor: pointer;
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 16px;
    min-width: 120px;
}

/* Stato visibile del dropdown utente mobile */
.mobile-user-dropdown.show {
    opacity: 1;
    visibility: visible;
}

/* ===== BADGE NOTIFICA CARRELLO ===== */
/* Pallino rosso di notifica sul pulsante carrello — indica articoli nel carrello */
.cart-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: #F9423A;
    border-radius: 50%;
    border: 2px solid white;
    display: none;
    z-index: 10;
}

/* Pulsante carrello — posizione relativa necessaria per il badge di notifica assoluto */
.btn-cart {
    position: relative;
}

/* Mostra il badge di notifica quando il carrello ha articoli */
.btn-cart.has-items .cart-notification-badge {
    display: block;
}

/* ===== MODALE CARRELLO ===== */
/* [SEZIONE] Finestra modale del carrello acquisti — overlay a schermo intero con riepilogo ordine e pulsanti azione */

/* ===== CART MODAL ===== */
/* Overlay sfondo modale carrello */
.cart-modal-overlay {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(6, 48, 70, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    font-family: 'Satoshi', sans-serif;
}

/* Box modale carrello */
.cart-modal-box {
    width: 520px;
    background: #f8fafb;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-height: 85vh;
    overflow-y: auto;
}

/* Header modale con icona e titolo */
.cart-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.cart-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icona shopping bag nel titolo */
.cart-modal-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #00A5CF 0%, #6E46AE 100%);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Titolo modale carrello */
.cart-modal-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    color: #063046;
    font-family: 'Satoshi', sans-serif;
    letter-spacing: -0.02em;
}

/* Bottone chiusura modale */
.cart-modal-close {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    color: #6b7c8a;
    transition: all 0.2s;
}

.cart-modal-close:hover {
    background: #e8edf2;
    color: #063046;
}

/* Contenitore pulsanti modale carrello */
.cart-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Pulsante principale checkout */
.cart-modal-btn {
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Satoshi', sans-serif;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cart-modal-btn-primary {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #00A5CF 0%, #008db1 100%);
    color: #fff;
    border: none;
    font-size: 17px;
    box-shadow: 0 4px 16px rgba(0, 165, 207, 0.3);
}

.cart-modal-btn-primary:hover {
    background: linear-gradient(135deg, #008db1 0%, #007a9a 100%);
    box-shadow: 0 6px 20px rgba(0, 165, 207, 0.4);
    transform: translateY(-1px);
}

/* Azioni secondarie: continua acquisti e svuota */
.cart-modal-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Link testuali sotto il bottone principale */
.cart-modal-link {
    background: none;
    border: none;
    color: #6b7c8a;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Satoshi', sans-serif;
    padding: 8px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.cart-modal-link:hover {
    color: #00A5CF;
}

/* Link svuota carrello in rosso */
.cart-modal-link-danger:hover {
    color: #F9423A;
}

/* Responsive modale carrello ≤600px */
@media (max-width: 600px) {
    .cart-modal-box {
        width: 95vw;
        padding: 20px;
        border-radius: 16px;
    }
    .cart-modal-title {
        font-size: 19px;
    }
    .cart-item-price {
        font-size: 15px;
    }
    .cart-total-amount {
        font-size: 19px;
    }
    .cart-modal-secondary-actions {
        flex-direction: column;
        gap: 4px;
    }
}

/* ===== MODALE DEMO ===== */
/* [SEZIONE] Finestra modale per la demo del prodotto — overlay scuro, video dimostrativo,
   credenziali di accesso copiabili e pulsante per proseguire. */

/* Overlay della modale demo — sfondo scuro semi-trasparente */
.new-demo-modal-overlay {
    position: fixed;
    z-index: 10001;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Satoshi', sans-serif;
}

/* Contenitore principale della modale demo — box bianco compatto con scroll verticale */
.new-demo-modal-box {
    width: 420px;
    max-width: 95vw;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    padding: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Pulsante di chiusura della modale demo — icona X in alto a destra */
.new-demo-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

/* Stato hover del pulsante chiusura modale demo — colore più scuro */
.new-demo-modal-close:hover {
    color: #333;
}

/* Titolo della modale demo — testo grande e grassetto */
.new-demo-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    text-align: left;
}

/* Sottotitolo della modale demo — testo descrittivo sotto il titolo */
.new-demo-modal-subtitle {
    margin: 0 0 24px 0;
    text-align: left;
}

/* Link nella modale demo — colore azzurro primario senza decorazione */
.new-demo-modal-link {
    color: #00A5CF;
    text-decoration: none;
    font-size: 16px;
}

/* Stato hover del link modale demo — aggiunge sottolineatura */
.new-demo-modal-link:hover {
    text-decoration: underline;
}

/* Contenitore del video nella modale demo — sfondo azzurro chiaro con bordo e overflow nascosto */
.new-demo-modal-video-container {
    width: 100%;
    min-height: 200px;
    max-height: 300px;
    background: #F0F8FF;
    border: 2px solid #B6F0FF;
    border-radius: 12px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Video all'interno del contenitore — larghezza piena con bordi arrotondati e object-fit contain */
.new-demo-modal-video-container video {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 12px;
    object-fit: contain;
}

/* Placeholder del video — centrato quando il video non è disponibile */
.new-demo-modal-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Descrizione testuale nella modale demo — testo piccolo grigio */
.new-demo-modal-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Sezione credenziali nella modale demo — layout verticale con spaziatura */
.new-demo-modal-credentials {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

/* Singola riga credenziale — sfondo azzurro chiaro con etichetta e valore */
.new-demo-credential-row {
    background: #EBFDFF;
    border-radius: 8px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Etichetta della credenziale (es. "Email", "Password") */
.new-demo-credential-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

/* Campo della credenziale — layout flex con valore e pulsante copia affiancati */
.new-demo-credential-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Valore della credenziale — testo azzurro selezionabile per la copia */
.new-demo-credential-value {
    font-size: 16px;
    font-weight: 600;
    color: #00A5CF;
    user-select: all;
}

/* Pulsante per copiare la credenziale — icona circolare bianca */
.new-demo-copy-btn {
    background: white;
    border: none;
    border-radius: 50%;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Stato hover del pulsante copia — sfondo azzurro chiaro */
.new-demo-copy-btn:hover {
    background: #E6F3FF;
}

/* Pulsante "Continua" nella modale demo — bottone primario azzurro */
.new-demo-continue-btn {
    background: #00A5CF;
    color: white;
    border: none;
    border-radius: 8px;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Stato hover del pulsante continua — sfondo più scuro */
.new-demo-continue-btn:hover {
    background: #008db1;
}

/* Adattamento responsive modale demo per schermi ≤500px — larghezza piena e titolo più piccolo */
@media (max-width: 500px) {
    .new-demo-modal-box {
        width: 95vw;
        padding: 24px;
    }

    .new-demo-modal-title {
        font-size: 20px;
    }
}

/* ===== SEZIONE HERO PRINCIPALE ===== */
/* [SEZIONE] Area hero della homepage — occupa il 130% dell'altezza viewport,
   contiene titolo, sottotitolo, CTA e animazione orbite con loghi partner. */

/* Contenitore della sezione hero — layout centrato a schermo intero */
.hero-section {
    width: 100%;
    height: 130vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 700px;
}

/* Sfondo della sezione hero — trasparente, ereditato dal body */
.hero-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 684px;
    background: transparent;
    z-index: -2;
}

/* ===== LOGHI ORBITALI ===== */
/* Contenitore dei loghi orbitali — copre tutta la sezione hero, non interattivo */
.orbit-logos-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Percorso dell'orbita visibile — tracciato ellittico per i loghi */
.orbit-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Singolo logo orbitale — posizionamento assoluto animato via JavaScript,
   con transizione fluida e ottimizzazione will-change per le performance */
.orbit-logo {
    position: absolute;
    transform-origin: center center;
    transition: transform 0.3s ease;
    pointer-events: none;
    will-change: transform, left, top;
    opacity: 0;
    z-index: 1000;
}

/* Cerchio contenitore del logo — forma circolare con sfondo bianco, dimensioni fisse e contenuto centrato */
.logo-circle {
  width: 145.6px;
  height: 145.6px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

/* Immagine del logo all'interno del cerchio — adattata con object-fit contain */
.logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* ===== CONTENUTO HERO ===== */
/* Contenitore del contenuto hero — centrato assolutamente dentro la sezione hero */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  z-index: 10;
  text-align: center;
  padding: 0 0;
}

/* ===== SOCIAL PROOF (AVATAR CLIENTI) ===== */
/* Contenitore della social proof — layout flex centrato con avatar sovrapposti */
.social-proof {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contenitore degli avatar dei clienti — senza gap per consentire la sovrapposizione */
.client-avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  /* niente gap o padding esterno qui */
}

/* Stile base di ciascun avatar — cerchio con bordo azzurro e immagine di sfondo.
   Utilizza margin-left negativo per sovrapposizione. background-clip: content-box crea il "foro" trasparente. */
.avatar {
  position: relative;
  width: 64px;
  height: 64px;
  margin-left: -20px;        /* sovrappone di 22px il cerchio precedente */
  border-radius: 100%;
  border: 4px solid #defaff;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* il trucco per avere il “foro” trasparente nel bordo */
  background-clip: content-box;
  -webkit-background-clip: content-box;
}

/* Il primo avatar non ha margin negativo — inizia senza sovrapposizione */
.avatar:first-child {
  margin-left: 0;
}

/* Immagini e z-index per ciascun avatar — z-index decrescente per sovrapposizione corretta */
/* Avatar 3 — primo avatar visibile (z-index più alto), immagine cliente 1 */
.avatar-3 {
  width: 42px;
  height: 42px;
  z-index: 3;
  background-image: url("/static/img/cliente1.svg");
}
/* Avatar 2 — secondo avatar, immagine cliente 2 */
.avatar-2 {
  width: 42px;
  height: 42px;
  z-index: 2;
  background-image: url("/static/img/cliente2.svg");
}
/* Avatar 1 — terzo avatar (z-index più basso), immagine cliente 3 */
.avatar-1 {
    width: 42px;
      height: 42px;
  z-index: 1;
  background-image: url("/static/img/cliente3.svg");
}

/* Testo accanto agli avatar — descrizione del numero di aziende che usano il servizio */
.client-text {
    color: var(--text-secondary);
    font-size: 16px;
    margin-left: 16px;
    font-weight: 550;
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0;
}

/* ===== TITOLO HERO ===== */
/* Titolo hero con selettori ad alta specificità per sovrascrivere Bootstrap e RFS */
.hero-title,
html .hero-title,
body .hero-title,
.hero-title[data-rfs],
[class="hero-title"] {
    font-size: var(--hero-title-size) !important;
    font-weight: var(--hero-title-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--hero-title-spacing) !important;
    color: var(--text-primary) !important;
    max-width: 872px !important;
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    margin: 0 !important;
    /* Disabilita RFS completamente */
    --rfs-base-font-size: var(--hero-title-size) !important;
    --rfs-unit: px !important;
    --rfs-fluid: none !important;
}

/* Testo evidenziato nel titolo hero — gradiente animato dal celeste al viola al rosso */
.hero-title .highlight {
    background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
    font-weight: 550;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
}

/* Sottotitolo della sezione hero — testo descrittivo sotto il titolo principale */
.hero-subtitle {
    font-size: var(--body-text-size);
    font-weight: var(--body-text-weight);
    line-height: 1.4;
    letter-spacing: var(--body-text-spacing);
    color: var(--text-secondary);
    max-width: 700px;
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
}

/* ===== SEZIONE MAPPA ITALIA ===== */
/* [SEZIONE] Mappa interattiva dell'Italia — mostra le città coperte dal servizio
   con marker cliccabili e card informative con statistiche. */

/* Contenitore esterno della sezione mappa — padding verticale */
.italy-map-section {
    padding: var(--section-padding-y) 0;
    position: relative;
    overflow: hidden;
}

/* Contenitore interno della mappa — layout flex orizzontale con testo a sinistra e mappa a destra */
.map-container {
    max-width: 1600px; /* Increased to accommodate the full layout */
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    gap: var(--space-5xl);
    min-height: 500px;
    justify-content: flex-start; /* Align to left to balance distances */
    padding-left: 80px; /* Increased left padding to shift more left */
}

/* Area del contenuto testuale della mappa — larghezza fissa 400px a sinistra */
.map-content {
    flex: 0 0 400px; /* Fixed width instead of flex: 1 */
    max-width: 400px;
    padding: var(--space-sm);
}

/* Titolo della sezione mappa — stile coerente con i titoli di sezione del design system */
.map-title {
    font-family: 'Satoshi', sans-serif;
    font-size: var(--section-title-size);
    font-weight: var(--section-title-weight);
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: var(--space-sm);
    letter-spacing: var(--section-title-spacing);
    margin: 0 0 var(--space-md) 0;
}

/* Sottotitolo della sezione mappa — testo descrittivo con stile corpo */
.map-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-size: var(--body-text-size);
    font-weight: var(--body-text-weight);
    color: var(--text-secondary);
    line-height: 1.5;
    letter-spacing: var(--body-text-spacing);
    max-width: 1440px;
    margin: 0;
}

/* Legenda della mappa — testo piccolo sotto il sottotitolo con informazioni aggiuntive */
.map-legend {
    font-family: 'Satoshi', sans-serif;
    padding: 16px 0 0 0;
    font-size: 14px;
    font-weight: var(--body-text-weight);
    color: var(--text-secondary);
    line-height: 1.5;
    letter-spacing: var(--body-text-spacing);
    max-width: 350px;
    margin: 0;
}

/* Contenitore della mappa Italia SVG — larghezza fissa con posizionamento relativo per i marker */
.italy-map {
    flex: 0 0 600px; /* Reduced from 800px to 700px */
    position: relative;
    max-width: 700px;
}

/* Contenitore dell'SVG della mappa — aspetto proporzionale, sfondo bianco, overflow visibile */
.map-svg-container {
    position: relative;
    width: min(100%, 900px);
    aspect-ratio: 957 / 587;
    background: white;
    border-radius: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    margin: 0 auto;
}

/* Immagine SVG della mappa Italia — occupa tutto lo spazio disponibile */
.italy-svg {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

/* ===== MARKER DELLE CITTÀ (PIN SULLA MAPPA) ===== */
/* [SEZIONE] Pin interattivi sulla mappa SVG. Ogni marker è cliccabile e mostra una card informativa.
   Ottimizzato per touch su iOS con touch-action: manipulation. */

/* Marker della città — elemento cliccabile con ottimizzazione touch per iOS */
.city-marker {
  cursor: pointer;
  /* iOS: tap “secco”, niente doppio-tap zoom o selezioni */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
    pointer-events: auto;
}

/* SVG del marker — animazione di trasformazione con punto di origine in basso (punta del pin) */
.city-marker svg {
  display: block;
  transform-origin: 50% 100%; /* centro in basso (punta pin) */
  transition: transform 0.22s cubic-bezier(.6,-0.28,.74,.05), filter 0.18s;
  pointer-events: none;
}

}

/* SVG del marker — disabilita eventi pointer sull'SVG per delegarli al contenitore */
.city-marker svg {
  pointer-events: none;
}

/* Effetto hover sul marker — aggiunge ombra luminosa azzurra */
.city-marker:hover svg {
  filter: drop-shadow(0 6px 20px rgb(0, 129, 209,0.16));
}

/* Effetto hover sul path del marker — cambia colore in azzurro primario */
.city-marker:hover svg path {
  fill: #00A5CF !important;
  opacity: 100% !important;
}

/* Assicura che i marker e i loro SVG siano interattivi (cliccabili) */
.city-marker,
.city-marker svg {
  pointer-events: all;
}

/* Area di hit estesa del marker — garantisce la cliccabilità anche su aree piccole */
.city-marker .marker-hit {
  pointer-events: all;
}

/* ===== CARD INFORMATIVE DELLE CITTÀ ===== */
/* [SEZIONE] Card popup che appaiono al click su un marker. Mostrano statistiche della città.
   Posizionate assolutamente sopra il marker con effetto glassmorphism (blur). */

/* Contenitore overlay per tutte le card — copre l'intera mappa, non interattivo */
.city-info-cards {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Singola card informativa città — sfondo semi-trasparente con blur, nascosta con animazione di comparsa */
.city-info-card {
    position: absolute;
    background:rgba(255, 255, 255, 0.16); ;
    border-radius: 12px;
    padding: 20px;
    width: clamp(180px, 42vw, 260px);
    box-shadow: 0 8px 8px rgb(43, 179, 238, 0.15);
    min-width: 220px;
    max-width: 225px;
    width: 225px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
/* Stato attivo della card città — visibile con animazione di comparsa completata */
.city-info-card.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Rimuove l'evidenziazione tap su marker e SVG per esperienza touch più pulita */
.city-marker, .city-marker svg {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ===== MAPPA ITALIA — ADATTAMENTO MOBILE (≤768px) E DISPOSITIVI TOUCH ===== */
/* [SEZIONE] Media query per dispositivi mobili e touch — inverte l'ordine del layout
   (mappa sopra, testo sotto), centra il contenuto, adatta le card e disabilita hover. */
@media (max-width: 768px),
       (pointer: coarse),
       (hover: none),
       screen and (max-device-width: 414px) {
    /* Italy Map Mobile - aumenta padding top per ospitare la card */
    .italy-map-section {
        padding-top: calc(var(--section-padding-y) + 150px); /* Spazio extra aumentato per la card */
    }

    .map-container {
        padding: 0 var(--space-sm);
        gap: var(--space-xl);
        min-height: auto;
    }
           .map-title, .map-subtitle, .map-legend {
             margin-left: var(--space-sm);   /* 8px dal bordo */
             margin-right: var(--space-sm);
             width: calc(100% - 16px);      /* Forza larghezza per evitare margini auto extra */
             box-sizing: border-box;
           }

    .map-title {
        font-size: var(--section-title-size);

    }

    .map-subtitle {
        font-size: var(--text-base);
        letter-spacing: var(--body-text-spacing);
    }
           .map-legend {
               font-size: 12px;
               font-weight: 400;
               padding: 16px 0 0 0;
               }

    .map-italy-container {
        position: relative;
        overflow: visible;
    }

    .city-info-card {
        position: absolute;
        min-width: 280px;
        max-width: 90vw;
        background: white;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 165, 207, 0.15);
        padding: 16px;
        z-index: 10000;
        pointer-events: auto;
    }

    /* MOBILE/TOUCH ONLY: Disabilita TUTTE le animazioni hover sui marker */
    .city-marker:hover svg,
    .city-marker:active svg,
    .city-marker:focus svg {
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .marker {
        cursor: pointer;
        z-index: 1;
    }

    /* MOBILE/TOUCH ONLY: Rimuovi animazioni hover sui marker */
    .marker:hover,
    .marker:active,
    .marker:focus {
        transform: none !important;
        transition: none !important;
    }

  .map-container {
    gap: 80px;
    flex-direction: column;
    text-align: center;
    max-width: 100%;
    padding: 0 var(--space-sm); /* 8px sui lati in mobile */
;
  }

  /* mappa sopra, testo sotto */
  .italy-map { order: 1; }
  .map-content { order: 2; }

  /* centra davvero anche la descrizione */
  .map-title,
  .map-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: var(--body-text-spacing);
  }

  /* --- OVERLAY RIPRISTINATO PER POSIZIONAMENTO ASSOLUTO --- */
  .city-info-cards {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* --- CARD CON STILE DESKTOP COMPLETO E POSIZIONAMENTO MOBILE MIGLIORATO --- */
  .city-info-card {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 20px;
    width: clamp(220px, 90vw, 280px);
    max-width: 280px;
    box-shadow: 0 8px 8px rgba(43, 179, 238, 0.15);
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* POSIZIONAMENTO MOBILE FORZATO */
    top: -150px !important; /* Posizionamento più alto e forzato */
    left: 50% !important;
    right: auto;
    margin: 0 !important;
    transform: translateX(-50%) scale(0.95) !important;
    /* Mantieni tutti gli stili desktop */
    min-width: 220px;
    border: none;
  }

  /* freccia disattivata su mobile */
  .city-info-card::before { display: none; }

  /* stato visibile con stile desktop completo */
  .city-info-card.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* POSIZIONAMENTO ATTIVO FORZATO */
    transform: translateX(-50%) scale(1) !important;
    top: -150px !important; /* Stessa posizione alta quando attiva */
    left: 50% !important;
    /* Assicura che mantenga tutti gli stili desktop quando attiva */
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 8px 8px rgba(43, 179, 238, 0.15);
  }
}

/* ===== ELEMENTI INTERNI DELLE CARD CITTÀ ===== */
/* Freccia triangolare sotto la card — punta verso il basso verso il marker corrispondente */
.city-info-card::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid white;
  filter: drop-shadow(0 4px 8px rgb(198, 240, 251, 0.1));
  z-index: 1;
}

/* Intestazione della card città — nome città e pulsante chiusura, separata da bordo inferiore */
.city-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E8F7FF;
}

/* Titolo H3 nell'intestazione della card — nome della città */
.city-card-header h3 {
  font-family: 'Satoshi', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Pulsante di chiusura della card — icona X circolare con effetto hover */
.close-card {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* Stato hover del pulsante chiusura card — sfondo grigio chiaro */
.close-card:hover { background: #f5f5f5; color: #666; }

/* Contenitore delle statistiche della città — layout verticale con righe separate */
.city-stats { display: flex; flex-direction: column; gap: 12px; }
/* Singola riga di statistica — etichetta a sinistra, valore a destra */
.stat-row { display: flex; justify-content: space-between; align-items: center; }
/* Etichetta della statistica — testo piccolo grigio/blu */
.stat-label { font-family: 'Satoshi', sans-serif; font-size: 14px; font-weight: 400; color: var(--text-secondary); }
/* Valore della statistica — testo più grande e grassetto */
.stat-value { font-family: 'Satoshi', sans-serif; font-size: 16px; font-weight: 600; }
/* Valore statistica primario — colore azzurro (es. candidati) */
.stat-value.primary { color: var(--primary-color); }
/* Valore statistica secondario — colore viola (es. annunci) */
.stat-value.secondary { color: var(--secondary-color); }

.italy-map-section { position: relative; }   /* necessario per l’assoluto della card */

/* ===== MAPPA ITALIA — ADATTAMENTO TABLET (≤1200px) ===== */
/* Layout a colonna per schermi medio-piccoli — mappa e testo impilati verticalmente */
@media (max-width: 1200px) {
    /* Contenitore mappa tablet — layout a colonna centrato */
    .map-container {
        gap: 80px;
        flex-direction: column;
        text-align: center;
        max-width: 100%;
        padding-left: var(--container-padding);
        align-items: center;
        justify-content: center;
        padding-right: var(--container-padding);
        align-items: center;
        justify-content: center;
    }
    .map-content {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .italy-map {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .italy-svg {
        max-width: 600px;
        max-height: 600px;
    }

    .map-subtitle {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        letter-spacing: var(--body-text-spacing);

    }
    .map-legend {
        margin-left: auto;
        margin-right: auto;
        text-align: center;

    }
}

/* Sezione Cosa aspettarsi */
.expect-section {
  width: 100%;
  padding: 0 0 60px 0;
  background: transparent;
    /* Vars per le animazioni delle icone (ereditarie sulle card) */
      --arrow-end-bottom: 15px; /* +5px rispetto al default 10px */
}

.expect-title {
  text-align: center;
  font-family: 'Satoshi', sans-serif;
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  color: #163A4D;
  margin-bottom: 36px;
  letter-spacing: var(--section-title-spacing);
}

.expect-steps {
  display: flex;
  justify-content: center;
  gap: 105px;
  max-width: 1480px;
  margin: 0 auto;
  align-items: flex-start;
}
/* ==== Expect cards desktop-only animation base ==== */
@media (min-width: 1025px) {
  /* Stato iniziale: distanziate e più grandi */
  .expect-steps .expect-card {
    will-change: transform;
    transform: translateX(var(--x, 0px)) scale(var(--s, 1.15));
    transform-origin: top center;
  }
  /* Offset orizzontali iniziali (sinistra/centro/destra) */
  .expect-steps .expect-step:nth-child(1) .expect-card { --x: -140px; }
  .expect-steps .expect-step:nth-child(2) .expect-card { --x: 0px; }
  .expect-steps .expect-step:nth-child(3) .expect-card { --x: 140px; }
}

.expect-step {
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
  min-width: 0;
  max-width: 320px;
}

.expect-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 16px 4px #A2F0FF44;
  width: 100%;
  min-width: 320px;
  max-width: 320px;
  min-height: 360px;
  max-height: 370px;
  padding: 32px 30px 30px 35px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  overflow: visible;
}
.expect-step:first-child img {
  width: 340px;   /* oppure max-width */
  height: auto;   /* mantiene le proporzioni */
}

.expect-card {
  /* lock the ratio and same height for all cards always */
  aspect-ratio: 0.77/1;
  height: 370px;
}

.expect-text {
  font-family: 'Satoshi', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.03;
  margin-bottom: 24px;
  min-height: 60px;
  letter-spacing: -0.5px;
}

.expect-gradient {
  background: linear-gradient(90deg, #2cb8e8 35%, #7d45be 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  /* per compatibilità safari */
  display: inline-block;
  background-size: 200% 100%;
  animation: gradientFlow 3s ease-in-out infinite;
}

.expect-imgs-row {
  position: relative;
  width: 182px;
  height: 120px;
  margin: 12px auto 0 auto;
  display: block;
}

.expect-badge {
  position: absolute;
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 100%;
  box-shadow: 0 0 8px 2px #2CB8E822;
  background: #fff;
}

.expect-badge:nth-child(1) { left:0; top:22px;}
.expect-badge:nth-child(2) { right:0; top:22px;}
.expect-badge:nth-child(3) { left: 20%; bottom: -40px; width:82px; height: 82px; --tx: -50%; transform: translate(var(--tx), 0); }
.expect-badge:nth-child(4) { right: -48px; bottom: -60px; width: 72px; height: 72px;}.expect-cand-container {
  width: 156px;
  height: 160px;
  position: relative;
  margin: 22px auto 0 auto;
}

.expect-cand {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 8px 2px #6C4AB622;
  background: #fff;
}

.cand1 { top: 0; left: 50%; transform: translate(-50%,0); width: 64px; height: 64px;}
.cand2 { top: 63px; left: 0; width: 38px; height: 38px;}
.cand3 { top: 41px; right: 0; width: 63px; height: 63px;}
.cand4 { bottom: 0; left: 50%; transform: translate(-50%,0); width: 29px; height: 29px;}

/* Responsive */
@media (max-width: 1100px) {
  .expect-steps { max-width: 70vw; gap: 18px;}
  .expect-card { max-width: 260px; height: 320px; min-width: 190px;}
  .expect-img.expect-img-1 { max-width: 180px;}
  .expect-imgs-row { width: 130px; height: 90px;}
  .expect-badge { width: 40px; height: 40px;}
  .expect-badge:nth-child(4) { width: 32px; height: 32px;}
  .expect-cand-container { width: 86px; height: 90px;}
  .cand1 { width: 34px; height: 34px;}
  .cand2 { width: 22px; height: 22px;}
  .cand3 { width: 32px; height: 32px;}
  .cand4 { width: 15px; height: 15px;}
  .expect-text { font-size: 15px; min-height: 28px;}
  .expect-title { font-size: var(--section-title-size);}
}

@media (max-width: 650px) {
  .expect-section { padding: 0 0 22px 0;}
  .expect-steps { flex-direction: column; align-items: center;}
  .expect-step { max-width: 92vw; }
  .expect-card { max-width: 95vw; min-width: 0; height: 160px;}

  /* Card 1 img mobile */
  .expect-img.expect-img-1,
  .expect-cards .expect-step:first-child img,
  .expect-step:first-child img {
    position:absolute;
    bottom:-38px;
    left:62px;
    width: clamp(220px, 68vw, 330px); /* solo mobile */
    height:auto;
  }

  .expect-imgs-row { width: 140px; height: 100px; margin-top: 8px; }
  .expect-badge { width: 56px; height: 56px; border-radius: 50%; aspect-ratio:1/1; }
  .expect-badge:nth-child(4) { width: 48px; height: 48px; }
  .expect-badge:nth-child(1){ left:-40px;   top:18px; width:98px; height:98px}
  .expect-badge:nth-child(2){ right:0;  top:18px; }
  .expect-badge:nth-child(3){ left:50%; bottom:-108px; transform:translateX(-50%); }
  .expect-badge:nth-child(4){ right:-36px; bottom:-44px; }

  .expect-cand-container { width: 130px; height: 130px; }
  .cand1 { width: 96px; height: 96px; top:-17; left:50%; transform:translate(-50%,0); }
  .cand2 { width: 56px; height: 56px; top:188px; left:30px; }
  .cand3 { width: 72px; height: 72px; top:86px; right:-78px; }
  .cand4 { width: 42px; height: 42px; bottom:-15px; left:-30px; transform:translate(-50%,0); }
  .expect-cand { aspect-ratio:1/1; }

  .expect-text { font-size: 28px; line-height: 1.08; min-height: auto; }
  .expect-title { font-size: 13px;}
}

/* ==== EXPECT – Fase 2 (desktop) ===================================================== */
@media (min-width: 1025px) {
  /* --- Keyframes --- */
  @keyframes tiltLeft {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-4.5deg); }
  }
  @keyframes floatY {
    0%   { transform: translate(var(--tx, 0), 0); }
    50%  { transform: translate(var(--tx, 0), -8px); }
    100% { transform: translate(var(--tx, 0), 0); }
  }
  @keyframes spinPulse {
    0%   { transform: rotate(0deg)   scale(1);    }
    50%  { transform: rotate(180deg) scale(1.06); }
    100% { transform: rotate(360deg) scale(1);    }
  }
    @keyframes revolve {
        0% {
          transform: rotate(calc(0deg + var(--phase, 0deg)))
                     translate(var(--r, 64px))
                     rotate(calc(0deg - var(--phase, 0deg)))
                     translate(-50%, -50%);
        }
        100% {
          transform: rotate(calc(360deg + var(--phase, 0deg)))
                     translate(var(--r, 64px))
                     rotate(calc(-360deg - var(--phase, 0deg)))
                     translate(-50%, -50%);
        }
      }

  /* [Card 1] child ruota leggermente verso sinistra
     Target: immagine card 1 (usa le tue classi già presenti) */
  .expect-stage2 .expect-step:nth-child(1) .expect-img.expect-img-1,
  .expect-stage2 .expect-step:nth-child(1) img.expect-img-1 {
    will-change: transform;
    transform-origin: 18% 88%;
    animation: tiltLeft 2.6s ease-in-out infinite alternate;
  }

  /* [Card 2] childs “floating”
     Target: badge + immagini riga (stagger leggero) */
  .expect-stage2 .expect-step:nth-child(2) .expect-badge {
    will-change: transform;
    animation: floatY 3.2s ease-in-out infinite;
  }
  .expect-stage2 .expect-step:nth-child(2) .expect-badge:nth-child(1) { animation-delay: .0s; }
  .expect-stage2 .expect-step:nth-child(2) .expect-badge:nth-child(2) { animation-delay: .15s; }
  .expect-stage2 .expect-step:nth-child(2) .expect-badge:nth-child(3) { animation-delay: .30s; }
  .expect-stage2 .expect-step:nth-child(2) .expect-badge:nth-child(4) { animation-delay: .45s; }

      /* In fase 2 neutralizziamo le posizioni “statiche” dei cand */
      .expect-stage2 .expect-step:nth-child(3) .cand1,
      .expect-stage2 .expect-step:nth-child(3) .cand2,
      .expect-stage2 .expect-step:nth-child(3) .cand3,
      .expect-stage2 .expect-step:nth-child(3) .cand4 {
        /* Le nuove top/left 50% sono già nella regola generale di .expect-cand in fase 2 */
      }

  .expect-stage2 .expect-step:nth-child(2) .expect-imgs-row img,
  .expect-stage2 .expect-step:nth-child(2) .expect-imgs-row .expect-img {
    will-change: transform;
    animation: floatY 3.6s ease-in-out infinite;
    animation-delay: .2s;
  }

  /* [Card 3] childs ruotano in senso orario + pulsazione di scala
     Target: i 4 “cand” dentro il container */
      .expect-stage2 .expect-step:nth-child(3) .expect-cand {
        will-change: transform;
        position: absolute;
        /* Ancoriamo i child al CENTRO del contenitore per farli orbitare */
        top: 50%; left: 50%;
        right: auto; bottom: auto;
        transform-origin: center center;
        /* Niente self-rotation di base: l’animazione la impostiamo per singolo child */
      }

      /* Raggio dell’orbita (--r) + fase iniziale (--phase) + durata */
      .expect-stage2 .expect-step:nth-child(3) .cand1 { --r: 64px; --phase:   0deg;  animation: revolve 28.0s linear infinite; }
      .expect-stage2 .expect-step:nth-child(3) .cand2 { --r: 64px; --phase:  90deg;  animation: revolve 28.0s linear infinite; }
      .expect-stage2 .expect-step:nth-child(3) .cand3 { --r: 64px; --phase: 180deg;  animation: revolve 28.0s linear infinite; }
      .expect-stage2 .expect-step:nth-child(3) .cand4 { --r: 64px; --phase: 270deg;  animation: revolve 28.0s linear infinite; }

}

/* Alia magia */

.magic-section {
  width: 100vw;
  min-height: 100vh;
  padding: var(--space-7xl) 0 var(--space-4xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 🔧 Vars regolabili per posizionare le icone */
  --zoom-right: -6px;      /* distanza lente dal bordo destro del box 3 */
  --zoom-bottom: -12px;     /* distanza lente dal bordo inferiore del box 3 */

  --arrow-start-dx: 0px;   /* micro-offset freccia da centro box 4 (x,y) */
  --arrow-start-dy: 0px;
  --arrow-end-dx: 0px;     /* micro-offset freccia verso centro box 5 (x,y) */
    --arrow-end-dy: -20px;
    /* ✅ nuova var: distanza dal bordo inferiore del box 5 */
    --arrow-end-bottom: -22px;

    --arrow-park-right: 12px;/* parcheggio freccia in alto-destro del box 5 */
    --arrow-park-top: 0px;
    }

.magic-title {
  font-family: 'Satoshi', sans-serif;
  font-size: var(--section-title-size);
  color: #143547;
  font-weight: var(--section-title-weight);
  text-align: center;
  margin-top: 52px;
  margin-bottom: 52px;
  letter-spacing: var(--section-title-spacing);
}

.magic-gradient {
  background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73% );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gradientFlow 3s ease-in-out infinite;
}

.magic-boxes-abs {
  position: relative;
  width: 1400px;
  height: 460px;
  margin-bottom: 76px;
}

.magic-box {
  position: absolute;
  background: #fff;
  border-radius: 999px;
  overflow: visible;
  border: 1px solid rgba(16,183,255,0.12);
  box-shadow: 0 14px 48px rgba(16,183,255,0.15),
    0 2px 6px rgba(16,183,255,0.10);
  font-family: 'Satoshi', sans-serif;
  font-size: var(--body-text-size);
  color: #224053;
  padding: 14px 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  max-width: max-content;
  word-break: break-word;
  box-sizing: border-box;
  transition: box-shadow 0.22s;
    white-space: nowrap}

.magic-check {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Box Positions & Sizes (desktop) */
@media (min-width: 1251px) {

.box1{ left: 50px; top: 55px;  transform: rotate(-3deg);    width: 760px; }
.box2{ left: 150px; top: 188px;  transform: rotate(2.2deg);  width: 680px; }
.box3{ left: 800px;  top: 100px;  transform: rotate(-11.5deg);width: 630px; }
.box4{ left: 620px; top: 268px;  transform: rotate(-4.2deg); width: 980px; }
.box5{ left: 390px; top: 398px;  transform: rotate(1.1deg);  width: 920px; }
    }

/* === Alia Magia: layout “desktop-like” per 900–1250px (anti-sovrapposizione) === */
@media (min-width: 900px) and (max-width: 1250px) {

  .magic-boxes-abs{
    width: min(1100px, 92vw);
    height: 560px;
    margin: 0 auto 76px;
    position: relative;
  }

  .magic-box{
    position: absolute;
    left: 50% !important;
    transform: translateX(calc(-50% + var(--dx, 0px))) rotate(var(--rot, 0deg)) !important;
    white-space: nowrap;
    max-width: 92vw;
  }

  .box1 { --dx: -120px; --rot: -3deg;   top:  20px; width: clamp(520px, 70vw, 760px); }
  .box2 { --dx:   40px; --rot:  2.2deg; top: 130px; width: clamp(500px, 66vw, 680px); }
  .box3 { --dx:  -60px; --rot: 5deg;   top: 210px; width: clamp(480px, 62vw, 640px); }
  .box4 { --dx:   80px; --rot: -4deg;   top: 310px; width: clamp(540px, 74vw, 900px); }
  .box5 { --dx:  -60px; --rot:  1deg;   top: 410px; width: clamp(520px, 72vw, 820px); }
}

/* Gradient text – compatibilità desktop */
.gradient-text,
.expect-gradient,
.magic-gradient {
  background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;               /* <— fondamentale per Firefox/desktop */
  animation: gradientFlow 3s ease-in-out infinite;
  will-change: background-position;
}

/* (Hai già @keyframes gradientFlow nel file) */

/* Responsive (mobile/tablet) */
@media (max-width: 1250px) {
  .magic-boxes-abs {
    width: 98vw;
    min-width: 0;
    max-width: 100vw;
    height: 700px;
  }
  .magic-box {
    min-width: 220px;
    max-width: 96vw;
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .magic-title {
    font-size: 32px;
    margin-top: 36px;
    margin-bottom: 36px;
  }
  .magic-boxes-abs {
    width: 100vw;
    min-width: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    position: static;
  }
  .magic-box {
    position: static !important;
    display: block;
    align-items: initial;
    gap: 0;
    width: 94vw;
    min-width: 0;
    max-width: 100vw;
    font-size: var(--body-text-size);
    border-radius: 20px;
    padding: 9px 11px;
    margin: 0 auto;
  }
}

@media (min-width: 900px) and (max-width: 1250px) {
  .magic-section .magic-boxes-abs {
    width: min(1100px, 92vw);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0;
  }
}
/* Magic layout specifico per ≤768px: più spazio e stesse rotazioni dello shot */
@media (max-width: 768px) {
  .magic-boxes-abs {
    gap: 36px;                /* aumenta distanza verticale tra i pill */
  }
  .magic-box {
    margin: 6px 0;            /* fallback se il gap incontra limiti */
    transform-origin: left center;
  }
  /* Rotazioni come nello shot */
  .box1 { transform: rotate(-3deg); }
  .box2 { transform: rotate(2deg);  }
  .box3 { transform: rotate(-6deg); }
  .box4 { transform: rotate(-4deg); }
  .box5 { transform: rotate(1deg);  }
}

/* scala di default per animazioni JS senza toccare la rotazione */
.magic-box { scale: 1; }

/* Bottone custom */
.magic-btn {
  font-family: 'Satoshi', sans-serif;
  font-size: var(--btn-text-size);
  font-weight: var(--btn-text-weight);
  background: #00A5CF;
  color: #fff;
  border: none;
  outline: none;
  border-radius: 12px;
  padding: 15px 28px;
  box-shadow: 0 6px 28px 0 rgba(16, 183, 255, 0.18);
  cursor: pointer;
  margin-top: 56px;
  transition: box-shadow 0.18s, background 0.18s;
  letter-spacing: var(--btn-text-spacing);
}
.magic-btn:hover {
    background: #0090B5;
    transform: translateY(-1px)
}

/* Predisposizione per animazioni */
.alia-feature-box[data-anim-trigger="cursor"] {}
.alia-feature-box[data-anim-trigger="hand"] {}
.alia-feature-box[data-anim-trigger="plus"] {}
.alia-feature-box[data-anim-trigger="arrow"] {}
.alia-feature-box[data-anim-trigger="default"] {}

/* === Alia Magia – Sequenza icone e keyframes (non altera la rotazione delle card) === */

/* Contenitore icone generiche */
.magic-box .magic-icon {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  opacity: 0;
    z-index: 16;
  /* nessun transform sulla card! */
}

@media (min-width: 1025px) {
  .magic-box .magic-icon { width: 30px; height: 30px; }
}

/* Evidenziazione “finta” dell'ultima parola */
/* Evidenziazione “reale” animabile */
.fake-selection{
  display: inline;                 /* così background-size copre solo la parola */
  background-image: linear-gradient(transparent 0%, rgba(0,165,207,0.35) 20%);
  background-repeat: no-repeat;
  background-position: left bottom;      /* parte da sinistra */
  background-size: 0% 100%;              /* parte da zero */
  border-radius: 0px;
  padding: 0 2px;
}

/* Durante la “spazzolata” del cursore */
.fake-selection.selecting{
  animation: selectionGrow 520ms ease forwards;
}

/* Stato finale (permanente) dopo l’animazione */
.fake-selection.selected{
  background-size: 100% 100%;
}

@keyframes selectionGrow{
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}

/* 1) Card 1 – cursore testo: piccola “selezione” verso sinistra */
.anim-text-select {
  animation: magia-text-select 900ms ease forwards;
}

@keyframes magia-text-select {
  0%   { opacity: 1; transform: translateX(0); }
  35%  { opacity: 1; transform: translateX(-10px); } /* “seleziona” ultima parola */
  100% { opacity: 1; transform: translateX(-10px); }
}

/* 2) Card 2 – manina: micro movimento verso basso-sx, lento */
.anim-hand-float {
  opacity: 1 !important;
  animation: magia-hand-float 2200ms ease-in-out infinite;
}

@keyframes magia-hand-float {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-8px, 10px); }
  100% { transform: translate(0,0); }
}

/* 3) Card 3 – lente: resta statica (solo visibile) */

/* 4-5) Freccia da box4 a box5 + “click” */
.anim-arrow-click {
  animation: magia-arrow-click 580ms ease-out 40ms 1 both;
  position: relative;
}

.anim-arrow-click::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 999px;
  transform: translate(-50%,-50%);
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(0,165,207,0.35);
  animation: magia-click-ripple 520ms ease-out 20ms 1 both;
}

@keyframes magia-arrow-click {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes magia-click-ripple {
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(0,165,207,0.0); }
  25%  { opacity: 1; box-shadow: 0 0 0 6px rgba(0,165,207,0.20); }
  100% { opacity: 0; box-shadow: 0 0 0 14px rgba(0,165,207,0.0); }
}

/* Posizionamenti di base delle icone dentro ogni card
   (sicuri: non sovrascrivono l’orientamento/rotazione delle card) */
.magic-box.box1 .icon-text-cursor { right: 18px; bottom: 16px; }
.magic-box.box2 .icon-hand        { right: 16px; top: 14px;   }
.magic-box.box3 .icon-zoom        { left: 16px;  top: 14px;   }
.magic-box.box4 .icon-arrow       { right: 12px; top: 12px;   }

/* Wrapper usato dal JS per animare la freccia con coordinate sezione */
.icon-arrow-wrap { pointer-events: none; position: absolute; inset: 0; z-index: 50; }
.icon-arrow-wrap .magic-icon {
    display: block;
    width: 28px;
  height: 28px;
}

/* Alia Pricing Section */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@1,900,700,500,301,701,300,501,401,901,400&display=swap');

.alia-solution-section {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Satoshi', Arial, sans-serif;
  padding: 275px 0 40px 0;
  gap: 64px;
}

.alia-solution-left {
  margin-top: 256px;
  margin-right: 100px;
  min-width: 174px;
  max-width: 380px;
}

.alia-solution-title {
  font-size: var(--section-title-size);
  justify-content: center;
  color: #0b3549;
  font-weight: var(--section-title-weight);
  margin-bottom: 32px;
  letter-spacing: -1.5px;
}

.alia-solution-desc {
  color: #143547;
  font-size: 18px;
  font-weight: 200;
  line-height: 1.3;
}

.alia-section {
  min-width: 500px;
  max-width: 480px;            /* ✅ aggiornato per corrispondere al panel */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.alia-panel {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 8px #bbf6ff34, 0 10px 40px 0 #31e1ff13;
  width: 100%;
  max-width: 520px;
  padding: 16px 20px 14px 20px;  /* ✅ ridotto ulteriormente il padding */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 420px;           /* ✅ ridotto da 480px a 420px */
  margin: 0;
}

.pop-badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -25px;
  background: linear-gradient(90deg,#00A5CF 0%,#6E46AE 48%,#F9423A 100%);
  color: #fff;
  padding: 9px 30px 6px 30px; /* 👈 padding più compatto */
  font-size: 18px;
  border-radius: 36px;
  font-weight: 500;
  letter-spacing: -1.1px;
  box-shadow: 0 5px 18px 0 #15d6ff18;
  z-index: 4;
}

.alia-title {
  font-size: 26px;              /* ✅ ridotto da 30px a 26px */
  font-weight: 400;
  color: #003347;
  margin-top: 20px;             /* ✅ ridotto da 26px a 20px */
  margin-bottom: 4px;           /* ✅ ridotto da 6px a 4px */
  text-align: center;
  width: 100%;
}

.alia-price-row {
  font-size: 46px;              /* ✅ ridotto da 54px a 46px */
  font-weight: 700;
  margin-bottom: 8px;           /* ✅ ridotto da 11px a 8px */
  line-height: 1.05;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* [PREZZI] Prezzo - solo dimensioni e peso (gradiente definito per-pacchetto a fine file) */
.alia-price {
  font-size: 46px;
  font-weight: 700;
}

/* [PREZZI] Euro - solo dimensioni e peso (gradiente definito per-pacchetto a fine file) */
.alia-euro.gradient-text {
  font-size: 40px;
  font-weight: 700;
}

.alia-desc {
  color: #224053;
  font-size: var(--body-text-size);
  margin-bottom: 24px;          /* ✅ ridotto da 32px a 24px */
  font-weight: 400;
  line-height: 1.4;
  width: 100%;
}

.alia-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;           /* ✅ ridotto da 32px a 24px */
  width: 100%;
}

.alia-list li {
  font-size: var(--body-text-size);
  display: center;
  align-items: center;
  gap: 12px;                     /* ✅ ridotto da 8px a 6px */
  color: #003347;
  margin-bottom: 24px;          /* ✅ ridotto da 13px a 10px */
}

.check {
  width: 20px;
  height: 20px;
  margin-right: 24px;
  flex-shrink: 0;
}

.cross {
  color: #fd4760;
  font-size: 25px;
  margin-right: 24px;
}

.info-icon {
  display: inline-block;
  width: 23px;
  height: 23px;
  background: #eefdff;
  border: 2px solid #b1dff9;
  color: #5ec3fc;
  font-size: 14px;
  border-radius: 100%;
  text-align: center;
  line-height: 18px;
  font-weight: 700;
  margin-left: 8px;
  cursor: pointer;
  user-select: none;
}
/* Mostra la card quando si passa su icona o wrapper */
.info-wrap:hover .info-card,
.info-icon:focus + .info-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

/* wrapper che ancora la card all'icona */
.info-wrap {
  position: relative;
  display: inline-block;
}
/* Card tooltip per info-icon */
.info-card {
  position: absolute;
  /* Posizionamento: a DESTRA dell’icona e centrata verticalmente rispetto ad essa */
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%) scale(0.98);

  /* Look */
  background: rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 8px 8px rgb(43 179 238 / 15%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-align: left;
  z-index: 1000;

  /* Più LARGA e meno LUNGA */
  width: min(360px, 48vw);
  min-width: 280px;
  max-width: 420px;
  max-height: 220px;      /* meno “alta” */
  overflow-y: auto;       /* scroll se serve */

  /* Stato iniziale nascosto */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.alia-list li.has-tooltip { position: relative; } /* ancoraggio per .info-card */

.has-tooltip:hover .info-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}
.info-card-title {
  font-size: var(--body-text-size);
  font-weight: bold;
  margin-bottom: 8px;
}

.info-card-body {
  font-size: var(--body-text-size);
  font-weight: normal;
  line-height: 1.4;
}

/* Mostra la card su hover/focus dell'icona o hover della label */

/* 🔁 NOVITÀ: wrapper label + contatore - INLINE */
.alia-counter-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 16px;
   /* ✅ ridotto da 20px a 16px */
}

.alia-counter-label {
  font-size: var(--body-text-size);
  color: #003347;
  font-weight: 400;
  margin: 0;
  flex: 1;                      /* ✅ prende spazio disponibile */
}

.alia-counter {
  display: flex;
  align-items: center;
  gap: 10px;                    /* ✅ ridotto da 12px a 10px */
  margin: 0;
  flex-shrink: 0;               /* ✅ non si comprime */
}

.alia-btn {
  background: transparent;       /* niente riempimento */
  color: #01394D;                /* colore del + (scegli il tuo brand color) */
  border: 1.55px solid #01394D;     /* bordo sottile */
  border-radius: 50%;            /* mantiene la forma circolare */
  font-size: 18px;               /* dimensione del + */
  width: 22px;                   /* diametro bottone */
  height: 22px;
  font-weight: 400;              /* il + deve sembrare più leggero */
  display: flex;                 /* per centrare bene il + */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

/* Effetto hover */
.alia-btn:hover {
    transform: scale(1.2);
}

.alia-btn:active {
  background: #b5f2ff;
}

.alia-quantity {
  min-width: 38px; /* ✅ ridotto da 32px a 28px */
  min-height: 38px; /* ✅ ridotto da 32px a 28px */
  text-align: center;
  font-size: var(--body-text-size);
  font-weight: 400;
  color: #21a1b2;
  background: #eafdff;
  border-radius: 50%;
  padding: 4px 10px;            /* ✅ ridotto padding */
  margin: 0 2px;                /* ✅ ridotto da 4px a 2px */
  display: inline-block;
}

/* Bottoni finali - RIDOTTI */
.alia-buy-btn {
  width: 100%;
  margin-top: 6px;              /* ✅ ridotto da 8px a 6px */
  font-size: var(--btn-text-size);
  font-weight: var(--btn-text-weight);
  background: #00A5CF;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 0 10px 0;       /* ✅ ridotto padding */
  box-shadow: 0 6px 28px 0 rgba(16, 183, 255, 0.15);
  cursor: pointer;
  transition: background 0.17s, box-shadow 0.18s;
  letter-spacing: 0.3px;
}

.alia-buy-btn:hover {
  background: #0090B5;
  transform: translateY(-1px);
}

.alia-outline-btn {
  width: 100%;
  margin-top: 12px;             /* ✅ ridotto da 18px a 12px */
  font-size: var(--btn-text-size);
  font-weight: var(--btn-text-weight);
  background: transparent;
  border: 2.3px solid #11cef8;
  border-radius: 12px;
  color: #13b7e6;
  padding: 12px 0 8px 0;        /* ✅ ridotto padding */
  cursor: pointer;
  transition: border 0.18s, background 0.18s;
  letter-spacing: 0.3px;
}

.alia-outline-btn:hover {
  background: #eafdff;
  border-color: #02bafc;
}

.alia-checkbox-list {
  width: 100%;
  margin-bottom: 12px;
}

.checkbox-wrap {
  display: flex;
  align-items: center;
  font-size: var(--body-text-size);
  color: #003347;
  cursor: pointer;
  gap: 9px;
  font-weight: 400;
  margin-bottom: 8px;
}

.checkbox-wrap input[type="checkbox"] {
  accent-color: #13dbff;
  width: 23px;
  height: 23px;
  margin-right: 7px;
}

.custom-checkmark {
  display: none;
}

@media (max-width: 1100px) {
  .alia-solution-section {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: 45px;
  }

  .alia-solution-left {
    margin-top: 0;
    min-width: 0;
    max-width: 100vw;
  }

  .alia-section {
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .alia-solution-title {
    font-size: 32px;
  }

  .alia-solution-desc {
    font-size: 18px;
  }

  .alia-panel {
    width: 98vw;
    padding: 8vw 4vw 6vw 4vw;
    min-height: 0;
  }

  .alia-section {
    align-items: center;
  }
}

/* SEZIONE I NOSTRI CLIENTI */
.clienti-section {
  width: 100vw;
  padding: 128px 0 128px 0;
}
.clienti-title {
  font-family: 'Satoshi', sans-serif;
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  margin-left: 46px;
  margin-bottom: 32px;
  margin-top: 0;
  color: #003347;
  letter-spacing: var(--section-title-spacing);
}
.grad {
  background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  background-size: 200% 100% !important;
  animation: gradientFlow 3s ease-in-out infinite !important;
}
.clienti-carousel {
  display: flex;
  gap: 38px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 42px 24px 42px;
  overscroll-behavior-x: contain;
  cursor: grab;
  cursor: -webkit-grab;
  user-select: none;
}

.clienti-carousel.grabbing {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.clienti-carousel::-webkit-scrollbar {
  display: none;
}
.clienti-card {
  min-width: 750px;
  max-width: 400px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  height: auto;
  box-shadow: 0 0 0 8px #bbf6ff34, 0 10px 40px 0 #31e1ff13;
  padding: 29px 28px 22px 28px;
  flex-shrink: 0;
  transition: box-shadow 0.26s, transform 0.18s;
  border: 1.2px solid #b6eaff40;
  position: relative;
  cursor: pointer;
}

.clienti-card:hover {
  box-shadow: 0 8px 32px rgba(16, 183, 255, 0.17);
  transform: translateY(-9px) scale(1.025);
}
.clienti-intest {
  font-size: 19px;
  color: #224053;
  font-weight: 600;
  margin-bottom: 7px;
}
.clienti-title-row {
  font-size: 27px;
  color: #003347;
  font-weight: 500;
  margin-bottom: 13px;
}
.clienti-desc {
  color: #224053;
  font-size: 16.5px;
  margin-bottom: 14px;
}
.clienti-numbers {
  display: flex;
  gap: 26px;
  margin-bottom: 13px;
  font-size: 20px;
  color: #00afd7;
  font-weight: 600;
}
.clienti-numbers span {
  font-size: 22px;
  color: #01bbf6;
  font-weight: 400;
}

.clienti-card.red .clienti-numbers span,
.clienti-card.red .clienti-numbers { color: #fd4760; }
.clienti-card.violet .clienti-numbers span,
.clienti-card.violet .clienti-numbers { color: #b677ff; }
.clienti-quote {
  height: 110px;
  display: flex;
  align-items: center;
  border-radius: 14px;
  padding: 16px 20px 12px 20px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: #003347;
  opacity: 0.93;
}
.clienti-quote.blue { background: #c4f4ff; }
.clienti-quote.red { background: #f9c2c7; color: #b12d45; }
.clienti-quote.violet { background: #e3dbfc; color: #6e53b5; }

/* Responsive */
@media (max-width: 900px) {
  .clienti-title { font-size: 20px; margin-left: 10vw; }
  .clienti-card { min-width: 290px; width: 82vw; padding: 17px 13px 14px 13px; }
  .clienti-carousel { gap: 18px; padding-left: 6vw; padding-right: 6vw; }
}

/* Enterprise Box Section */
.enterprise-box-section {
    width: 100%;
    padding: 128px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.enterprise-box-container {
    max-width: var(--container-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.enterprise-box {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 165, 207, 0.36); /* 16% Opacità per #00A5CF */
    z-index: 1; /* Sotto il testo, sopra l'immagine */
}

.enterprise-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0, 165, 207, 0.25);
}

.enterprise-box-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 165, 207, 0.1) 0%, rgba(0, 165, 207, 0.1) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--card-padding);
    z-index: 2;
}

.enterprise-box-title {
    font-family: 'Satoshi', sans-serif;
    font-size: var(--section-title-size);
    font-weight: var(--section-title-weight);
    color: #EBFDFF;
    line-height: 1.1;
    margin: 0;
    max-width: 75%;
    letter-spacing: var(--section-title-spacing);
}

.enterprise-box-arrow {
    position: absolute;
    top: 80%;
    right: 48px;
    transform: translateY(-50%);
    width: 64px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.enterprise-box-arrow:hover {
    transform: translateY(-50%) translateX(8px) scale(1.1);
}

.enterprise-box-arrow:hover svg {
    filter: drop-shadow(0 4px 8px rgb(235, 253, 255, 0.3));
}

.enterprise-box-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: url("../img/enterprise.jpg")

}

.enterprise-box-image img {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;

}

/* Responsive Design for Enterprise Box */
@media (max-width: 1200px) {

    .enterprise-box-arrow {
        right: 32px;
    }
}

@media (max-width: 768px) {
    .enterprise-box-section {
        padding: 80px 0;
    }

    .enterprise-box-container {
        padding: 0 24px;
    }

    .enterprise-box {
        height: 280px;
    }

    .enterprise-box-content {
        padding: 32px 24px;
    }

    .enterprise-box-title {
        font-size: 32px;
        max-width: 75%;
    }

    .enterprise-box-arrow {
        right: 24px;
        width: 64px;
        height: 48px;
    }

    .enterprise-box-arrow svg {
        width: 64px;
        height: 48px;
    }
}

@media (max-width: 480px) {
    .enterprise-box {
        height: 200px;
    }

    .enterprise-box-content {
        padding: 24px 20px;
    }

    .enterprise-box-title {
        font-size: 24px;
        max-width: 50%;
    }

    .enterprise-box-arrow {
        right: 20px;
        width: 50px;
        height: 40px;
    }

    .enterprise-box-arrow svg {
        width: 50px;
        height: 40px;
    }
}

/* ============================================================
   SEZIONE FAQ — Design unificato per tutte le pagine
   Card bianche a larghezza piena, bordi arrotondati, freccia a destra.
   Identico su: homepage, jobbir, enterprise, tuolavoro, chi-siamo.
   ============================================================ */

/* [FAQ] Sezione: sfondo chiaro, padding verticale */
.faq-section {
    padding: 80px 0;
    margin-bottom: 0;
}

/* [FAQ] Contenitore generico con max-width */
.section-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 32px;
}

/* [FAQ] Layout centrato a colonna singola */
.faq-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
    gap: 0;
}

/* [FAQ] Titolo centrato — nessuna animazione */
.faq-title {
    width: 100%;
    text-align: center;
    margin-bottom: 48px;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* [FAQ] Stile testo titolo: 42px, peso 800, colore scuro */
.faq-title h2 {
    font-size: 42px;
    font-weight: 800;
    color: #063046;
    text-align: center;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 0;
}

/* [FAQ] Contenitore lista domande */
.faq-questions {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

/* [FAQ] Singola card: bianca, larghezza piena, bordi arrotondati */
.faq-item {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
}

/* [FAQ] Hover sulla card chiusa */
.faq-item.collapsed:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* [FAQ] Blocco domanda: padding, cursore */
.faq-question {
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

/* [FAQ] Header: testo a sinistra, freccia a destra */
.faq-question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

/* [FAQ] Testo domanda */
.faq-question-header span {
    font-weight: 600;
    font-size: 16px;
    color: #063046;
    line-height: 1.4;
    flex: 1;
}

/* [FAQ] Icona freccia: pallino scuro con chevron bianco */
.faq-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-icon svg {
    width: 28px;
    height: 28px;
}

/* [FAQ] Freccia ruotata quando aperto */
.faq-item.expanded .faq-icon {
    transform: rotate(180deg);
}

/* [FAQ] Card aperta: ombra più marcata */
.faq-item.expanded {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

/* [FAQ] Risposta: nascosta di default, animata via JS */
.faq-answer {
    font-size: 15px;
    line-height: 1.7;
    color: #3d5a6e;
    padding: 0 24px;
    display: none;
    opacity: 0;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* [FAQ] Risposta aperta: padding in basso */
.faq-item.expanded .faq-answer {
    padding-bottom: 20px;
}

/* [FAQ] Responsive mobile */
@media (max-width: 768px) {
    .faq-section {
        padding: 48px 0;
    }

    .faq-layout {
        flex-direction: column;
        gap: 0;
    }

    .faq-title {
        margin-bottom: 32px;
    }

    .faq-title h2 {
        font-size: 28px;
    }

    .faq-question {
        padding: 16px 18px;
    }

    .faq-question-header span {
        font-size: 15px;
    }

    .faq-icon,
    .faq-icon svg {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .faq-answer {
        padding: 0 18px;
        font-size: 14px;
    }

    .faq-item.expanded .faq-answer {
        padding-bottom: 16px;
    }
}

/* Sezione footer — posizionamento, sfondo trasparente (usa lo sfondo del body) */
.footer-section {
    position: relative;
    background: transparent;
    margin-top: 0 !important;
    padding: 0px 32px 32px 32px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 48px 40px 32px 40px;
    font-family: 'Satoshi', sans-serif;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 40px;
}

.footer-brand {
    flex: 1;
    max-width: 300px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.footer-logo span {
    color: #125978;
    font-size: 16px;
    font-weight: 600;
}

/* Footer description text */
.footer-description {
    color: #125978;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Footer copyright under description */
.footer-copyright {
    color: #125978;
    font-size: 13px;
    font-weight: 400;
    opacity: 0.6;
    margin-top: 16px;
}

.footer-social-title {
    color: #125978;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 12px;
}

.footer-social-items {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
}

.footer-social-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-social-item:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

.footer-social-item span {
    color: #125978;
    font-size: 14px;
    font-weight: 400;
}

.footer-social-item svg {
    fill: #00A5CF;
}

.footer-social-item svg path {
    fill: #00A5CF;
}

.footer-social-item svg rect {
    stroke: #00A5CF;
}

.footer-social-item svg line {
    stroke: #00A5CF;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 120px;
}

.footer-column h4 {
    color: #125978;
    padding: 10px 0 0 40px;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    margin-bottom: 24px;
}

.footer-column ul {
    list-style: none;
    padding: 0 0 0 40px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-column ul li a {
    color: #125978;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-column ul li a:hover {
    color: #00A5CF;
}

/* Footer bottom bar */
.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(18, 89, 120, 0.1);
}

.footer-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Footer bottom row text */
.footer-stats-title {
    color: #125978;
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    opacity: 0.7;
}

.footer-stats-number {
    color: #125978;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.footer-stats-number span {
    color: #125978;
}

/* Footer legal text */
.footer-legal {
    color: #125978;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    width: 100%;
    line-height: 1.6;
    opacity: 0.7;
}

/* Responsive adjustments for footer */
@media (max-width: 1024px) {
    .footer-content {
        gap: 40px;
    }

    .footer-brand {
        max-width: 250px;
    }
}

@media (max-width: 768px) {
    .footer-section {
        padding: 0 16px 24px 16px;
    }

    .footer-container {
        padding: 32px 24px 24px 24px;
    }

    .footer-content {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-social-items {
        flex-direction: row;
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        text-align: left;
    }

    .footer-legal {
        text-align: center;
        max-width: 100%;
    }

    .footer-stats-title {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .footer-container {
        padding: 24px 16px 20px 16px;
        border-radius: 20px;
    }

    .footer-content {
        gap: 24px;
    }

    .footer-description {
        font-size: 14px;
    }

    .footer-social-title {
        font-size: 14px;
    }

    .footer-social-item span {
        font-size: 12px;
    }

    .footer-column h4 {
        font-size: 14px;
    }

    .footer-column ul li a {
        font-size: 12px;
    }

    .footer-stats-title {
        font-size: 12px;
    }

    .footer-stats-number {
        font-size: 20px;
    }

    .footer-legal {
        font-size: 10px;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-content {
        top: calc(50% - 140px);
    }

    .hero-title {
        font-size: 64px;
    }

    .steps-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .packages-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Chi Siamo hero section styling per consistenza */
/* min-height rimosso per evitare spazio vuoto eccessivo */
.hero-section-chi-siamo {
    min-height: auto;
}

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
    /* Design System Override for Mobile */
    :root {
        --container-padding: var(--space-md);
        --section-padding-y: var(--space-4xl);
        --modal-padding: var(--space-lg);
    }

    /* Navigation Mobile */
    nav.navbar {
        top: 16px;
    }

    .navbar-brand .logo {
        height: 40px;
    }

    /* Italy Map Mobile */
    .map-container {
        padding: 0 var(--space-md);
        gap: var(--space-xl);
        min-height: auto;
    }

    .map-title {
        font-size: var(--text-3xl);
    }

    .map-subtitle {
        font-size: var(--text-base);
        letter-spacing: var(--body-text-spacing);
    }

    /* Enterprise Box Mobile */
    .enterprise-box {
        height: 200px;
    }

    .enterprise-box-content {
        padding: var(--space-lg);
    }

    .enterprise-box-title {
        font-size: 24px;
        max-width: 85%;
    }

    /* Modal Mobile */
    .demo-modal {
        width: 95vw;
        max-height: 85vh;
        padding: var(--space-lg);
        margin: var(--space-md);
    }

    .demo-modal-title {
        font-size: var(--text-lg);
    }

    .demo-modal-subtitle {
        font-size: var(--text-sm);
    }

    /* Button Mobile */
    .fixed-buttons-right {
        right: var(--space-md);
        gap: var(--space-sm);
    }

    .btn-demo {
        min-width: 160px;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }
}

/* Small Mobile Styles (max-width: 480px) */
@media (max-width: 480px) {
    /* Further reduce for very small screens */
    .hero-title {
        font-size: var(--text-3xl);
    }

    .logo-circle {
        transform: scale(0.8);
    }

    .map-title {
        font-size: var(--text-2xl);
    }

    .enterprise-box {
        height: 180px;
    }

    .enterprise-box-title {
        font-size: var(--text-xl);
    }

    .demo-modal {
        padding: var(--space-md);
    }

    /* Fixed buttons adjustments for very small screens */
    .fixed-buttons {
        bottom: 16px;
        gap: 8px;
        max-width: calc(100vw - 24px);
    }

    .fixed-button-left {
        padding: 6px;
        height: 56px;
    }

    .fixed-buttons-right {
        height: 56px;
    }

    .btn-login,
    .btn-cart,
    .btn-user-menu.logged-in {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .btn-demo {
        height: 44px;
        min-width: 140px;
        font-size: 13px;
        margin: 0 6px;
    }

    .btn-avatar {
        width: 56px;
        height: 56px;
    }

    .btn-avatar img {
        width: 56px;
        height: 56px;
    }
}
/* Slide-in animation (usata dalla classe .slide-in) */
.slide-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.19, 1, 0.88, 1),
              transform 1s cubic-bezier(0.19, 1, 0.88, 1);
  transition-delay: var(--slide-delay, 0ms);
  will-change: opacity, transform;
}

/* Stato visibile per l'animazione slide-in */
.slide-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==== Zoom-in animation (da 0% a 100% opacità+scala) ==== */
.zoom-in {
  opacity: 0;
  transform: scale(0);
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1), transform 2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Mobile optimizations - riduce durata animazioni per performance migliori */
@media (max-width: 768px) {
  .slide-in {
    transition: opacity 0.4s cubic-bezier(0.19, 1, 0.88, 1),
                transform 0.4s cubic-bezier(0.19, 1, 0.88, 1);
    transition-delay: var(--slide-delay, 0ms);
  }

  .zoom-in {
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .word-slide {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  }
}

/* ==== Slide-in per singole parole ==== */
.slide-words {
  white-space: pre-wrap; /* preserva spazi multipli e newline */
}

/* Ogni parola: inline-block per poter animare senza rompere il flusso */
.word-slide {
  display: inline-block;
  vertical-align: baseline;
  opacity: 0;
  transform: translateY(20px); /* cambia in scale(0) se vuoi zoom-in */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform;
}

/* Stato visibile */
.word-slide.visible {
  opacity: 1;
  transform: translateY(0);   /* cambia in scale(1) se usi zoom-in */
}
/* assicurati che la tua classe gradient-text contenga queste regole */
.gradient-text {
  background: linear-gradient(90deg, #00A5CF, #6E46AE); /* esempio */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* fondamentale su WebKit */
}

.hero-ellipse foreignObject {
    animation: logoFloat 1.2s ease-in-out infinite;
}

.hero-ellipse foreignObject:nth-child(odd) {
    animation-delay: 1s;
}

.hero-ellipse foreignObject:nth-child(even) {
    animation-delay: 0.5s;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Global Typography Consistency Classes */
.section-title,
h1.section-title,
h2.section-title,
h3.section-title {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: var(--section-title-size) !important;
    font-weight: var(--section-title-weight) !important;
    letter-spacing: var(--section-title-spacing) !important;
}

.hero-title,
h1.hero-title {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: var(--hero-title-size) !important;
    font-weight: var(--hero-title-weight) !important;
    letter-spacing: var(--hero-title-spacing) !important;
}

.body-text,
.card-text,
.button-text {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: var(--body-text-size) !important;
    font-weight: var(--body-text-weight) !important;
    letter-spacing: var(--body-text-spacing) !important;
}
/* Modale login — nascosta di default, visibile tramite JavaScript */
.login-modal-overlay {
  position: fixed; z-index: 9999;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(235,253,255,0.7);
  display: none; align-items: center; justify-content: center;
  transition: opacity 0.2s;
  font-family: 'Satoshi', sans-serif;
}
.login-modal-box {
  width: 380px; height: 592px; background: #fff;
  border-radius: 16px; box-shadow: 0 6px 32px rgba(0,0,0,0.08);
  padding: 40px 32px 32px 32px; position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start;
}
.login-modal-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; font-size: 24px;
  cursor: pointer; color: #003146; transition: color 0.2s;
}
.login-modal-close:hover { color: #00A5CF; }
.login-modal-title {
  font-size: 28px; font-weight: 700;
  margin: 20px 0 40px 0; width: 100%; text-align: center; color: #003146;
  font-family: 'Satoshi', sans-serif;
}
.login-modal-form {
  width: 100%; display: flex; flex-direction: column; flex: 1;
  justify-content: flex-start;
}
.login-modal-input-group {
  width: 100%; margin-bottom: 24px;
}
.login-modal-label {
  display: block; font-size: 14px; font-weight: 500; color: #003146;
  margin-bottom: 8px; font-family: 'Satoshi', sans-serif;
}
.login-modal-input {
  width: 100%; height: 52px;
  border-radius: var(--radius-md); border: var(--input-border);
  background: var(--input-bg); padding: 0 var(--space-md);
  font-size: var(--text-base); font-family: 'Satoshi', sans-serif;
  color: var(--text-primary); transition: border-color 0.2s, background-color 0.2s;
}
.login-modal-input:focus {
  border: var(--input-focus-border); background: var(--white); outline: none;
}
.login-modal-input::placeholder {
  color: var(--input-placeholder); opacity: 1; font-family: 'Satoshi', sans-serif;
}
.login-modal-forgot {
  font-size: 14px; color: #00A5CF;
  margin: -8px 0 32px 0; text-align: right; cursor: pointer;
  transition: color 0.2s; font-family: 'Satoshi', sans-serif;
  text-decoration: none; display: block;
}
.login-modal-forgot:hover { color: #008db1; text-decoration: underline; }
.login-modal-btn {
  width: 100%; height: 52px;
  background: #00A5CF; color: #fff;
  border: none; border-radius: 12px;
  font-size: 17px; font-weight: 600;
  margin: 0 0 32px 0; cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  transition: background 0.2s, transform 0.2s;
}
.login-modal-btn:hover { background: #008db1; transform: translateY(-1px); }
.login-modal-register {
  width: 100%; font-size: 14px; color: #666; text-align: center;
  margin: auto 0 24px 0; font-family: 'Satoshi', sans-serif;
}
.login-modal-register-link {
  color: #00A5CF; text-decoration: none; transition: text-decoration 0.2s;
  font-weight: 500;
}
.login-modal-register-link:hover { text-decoration: underline; }

.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

@media (max-width: 700px) {
  .login-modal-box { width: 95vw; height: auto; padding: 32px 24px 24px 24px; }
  .login-modal-title { font-size: 24px; margin: 16px 0 32px 0; }
  .login-modal-input-group { margin-bottom: 20px; }
}
#demo-modal-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  background: rgba(0, 26, 38, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'Satoshi', sans-serif;
}

/* Modal box */
.demo-modal {
  width: var(--modal-max-width);
  max-width: 95vw;
  max-height: 90vh;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--modal-padding);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  overflow-y: auto;
}

/* X close */
.demo-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #003A75;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  transition: color .2s;
}
.demo-modal-close:hover { color: #00A5CF; }

.demo-modal-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #003A75;
  margin: 0 0 var(--space-md) 0;
  text-align: left;
}

.demo-modal-subtitle {
  font-size: var(--text-base);
  color: #125978;
  margin: 0 0 var(--space-lg) 0;
  font-weight: 400;
}

.demo-modal-video {
  border: 3px solid #B6F0FF;
  border-radius: 12px;
  margin-bottom: 18px;
  background: #EBFDFF;
  overflow: hidden;
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  /* fallback per browser senza aspect-ratio: */
  /* padding-top: 56.25%; */ /* 9/16 = 0.5625 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-modal-video-placeholder {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(0.5px);
}

/* Descrizione */
.demo-modal-desc {
  color: #003A75;
  font-size: 0.97rem;
  margin-bottom: 18px;
  margin-top: 0;
  text-align: left;
  line-height: 1.44;
}

/* Box credenziali */
.demo-modal-creds {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Inputrow */
.demo-modal-inputrow {
  background: #EBFDFF;
  border-radius: 8px;
  padding: 8px 12px 3px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.demo-modal-label {
  font-size: 0.86rem;
  color: #666;
  margin-bottom: 2px;
  font-weight: 400;
}
.demo-modal-valuebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-modal-value {
  font-size: 1.01rem;
  font-weight: 500;
  color: #00A5CF;
  letter-spacing: 0.01em;
  user-select: all;
  line-height: 1.8;
}
.demo-modal-copy {
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  margin-left: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s;
}
.demo-modal-copy:hover {
  background: #B6F0FF;
}

/* Bottone continua */
.demo-modal-continue {
  margin-top: 14px;
  background: #00A5CF;
  color: #fff;
  border: none;
  border-radius: 12px;
  width: 100%;
  height: 44px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,165,207,0.10);
  transition: background .18s, box-shadow .18s;
}

/* Avatar Modal Styles */
.avatar-modal-overlay {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(18, 89, 120, 0.20);
        z-index: 20000;
        display: flex; align-items: center; justify-content: center;
        transition: background 0.2s;
    }
    .avatar-modal-box {
        background: #fff;
        border-radius: 24px;
        max-width: 460px;
        min-width: 320px;
        min-height: 260px;
        box-shadow: 0 8px 48px 0 #63bae94d;
        padding: 36px 24px 28px 24px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }
    .avatar-modal-close {
        position: absolute;
        top: 18px; right: 18px;
        background: none;
        border: none;
        font-size: 32px;
        color: #063046;
        cursor: pointer;
        line-height: 1;
        transition: color 0.18s;
    }
    .avatar-modal-close:hover {
        color: #00A5CF;
    }
/* HERO – responsive puliti (non alterano l’orbita) */
@media (max-width: 1200px) {
  .hero-content { top: 50%; transform: translate(-50%, -50%); }
  .hero-title { font-size: 64px; } /* già presente: ok manterlo una sola volta */
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 560px;
    height: auto;
    padding-top: 100px;
    padding-bottom: 60px;
    overflow: hidden;
  }
  .hero-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    max-width: 100%;
    gap: var(--space-md);
    text-align: center;
    padding: 0 20px;
  }
  .hero-title {
    font-size: var(--hero-title-size); /* dai tuoi token mobile */
    line-height: 1.25;
    margin: 0 auto var(--space-sm);
  }
  .hero-subtitle { line-height: 1.15; }
    .hero-subtitle {
        line-height: 1.2;
        margin: 0 0;

      }
  /* nessuna regola su .orbit-logos-container / .orbit-path / .logo-circle */
}

@media (max-width: 480px) {
  .hero-section { min-height: 560px; }
  .hero-content { max-width: 90%; }
}

/* Nasconde pianeti, anelli e globo su mobile */
@media (max-width: 768px) {
  #planets,
  #rings,
  .sun3d {
    display: none;
  }
  .idx-boards-section {
    margin-top: 0;
    padding-top: 40px;
    padding-bottom: 10px;
  }
  .idx-boards-label {
    display: none;
  }

  /* Boards pill — più piccole e mask ridotto su mobile */
  .idx-boards-track-wrapper {
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  }

  .idx-board-item {
    padding: 8px 16px;
    gap: 8px;
  }

  .idx-board-item span {
    font-size: 12px;
  }

  .idx-boards-track {
    gap: 16px;
  }

  .idx-boards-disclaimer {
    font-size: 10px;
    padding: 0 16px 30px;
  }
}
/* === Mobile overflow fix (no horizontal scroll) === */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

    /* Lascia uscire l’orbita in mobile, ma evita lo scroll orizzontale */
    .hero-section,
    .orbit-logos-container,
    .orbit-path {
      overflow: visible;
    }

  /* Evita container > 100vw quando sommi padding */
  .impiegando-home [class*="container"] {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Immagini “docili” */
  img, video {
    max-width: 100%;
    height: auto;
  }
}
/* ===============================
   MOBILE OVERRIDES (≤768px)
   =============================== */
@media (max-width: 768px) {
  /* ---------- 1) TITOLI CON TOKEN SYSTEM ---------- */
  /* Assicuriamo che i titoli mobile prendano i token */
  .section-title,
  .magic-title,
  .map-title,
  .expect-title,
  .alia-solution-title,
  .clienti-title {
    font-size: var(--section-title-size);
    font-weight: var(--section-title-weight);
    letter-spacing: var(--section-title-spacing);
    line-height: 1.12;
  }

  /* ---------- 2) “ALIA MAGIA” COME FIGMA ---------- */
  .magic-section {
    padding: var(--space-5xl) 0 var(--space-3xl) 0;
  }
  /* container assoluto → layout a colonna */
  .magic-boxes-abs {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 24px;              /* padding laterale 24px */
    display: flex;
    flex-direction: column;
    gap: 42px;                    /* gap come da Figma */
    margin-bottom: 40px;
    align-items: center;
  }
  /* card stile “pill”, testo su 2 righe max, icona a sx centrata verticalmente */
  .magic-box {
    position: relative;           /* non più absolute */
    border-radius: 100px;
    padding: 16px 16px 16px 56px; /* 24px laterali + spazio per l’icona a sx */
    min-width: auto;
    max-width: 100%;
    white-space: normal;          /* consenti a capo */
    line-height: 1.28;
    transform-origin: center;
  }
  /* leggera inclinazione alternata per dinamica */
    .magic-box:nth-child(odd)  { transform: rotate(-3.9deg); }
    .magic-box:nth-child(even) { transform: rotate(2.9deg);  }

    .magic-box:nth-child(1) { width: 99%; }
    .magic-box:nth-child(2) { width: 95%; }
    .magic-box:nth-child(3) { width: 75%; }
    .magic-box:nth-child(4) { width: 90%; }
    .magic-box:nth-child(5) { width: 95%; }

  /* icona check centrata verticalmente sul lato sinistro */
  .magic-check {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    margin: 0;
  }
    /* ===== Alia Price – MOBILE ONLY (fix width, centering, spacing, no horiz scroll) ===== */
    @media (max-width: 768px) {

      /* Sezione: padding laterale + spazio extra per la fixed bar */
      .alia-solution-section {
        padding: 32px 16px calc(140px + env(safe-area-inset-bottom));
      }

      /* Header testi centrati */
      .alia-solution-header,
      .alia-solution-title,
      .alia-solution-desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
      }

      /* Titolo e sottotitolo con token mobile */
      .alia-solution-title {
        font-size: 20px; /* 32px */
        line-height: 1.15;
        max-width: 20ch;
        padding-bottom: 24px;                 /* titolo → sottotitolo */
      }
        .alia-price {
            font-size: var(--section-title-size)}
        .alia-euro gradient-text {
        font-size: var(--section-title-size)}
      .alia-solution-desc {
        font-size: var(--body-text-size);     /* 16px */
        line-height: 1.45;
        max-width: 34ch;
        margin: 0 auto;
      }

      /* Distanza sottotitolo → calcolatore: 96px */
      .alia-solution-header {
        margin-bottom: 96px;
      }

      /* Wrapper calcolatore centrato */
      .alia-solution-right,
      .alia-panels {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }

      /* Card calcolatore: sempre dentro al viewport */
      #aliaSmartPanel,
      #aliaCustomPanel,
      .alia-panel {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        max-width: 344px;                     /* <— restringe: niente overflow a dx */
        margin: 0 auto;
        padding: 16px 16px 20px;
        border-radius: 16px;
        transform: none !important;           /* niente inclinazioni su mobile */
        overflow: visible;                    /* il badge può “uscire” in alto */
      }

      /* Badge “Più popolare” centrato orizzontalmente sopra la card */
      .pop-badge {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
      }
        .alia-list li {
          gap: 16px;          /* era 12/24 in varie parti */
          margin-bottom: 12px;
        }

      /* Liste e contenuti interni: prevenzione overflow */
      #aliaSmartPanel *,
      #aliaCustomPanel * {
        max-width: 100%;
      }
      #aliaSmartPanel ul,
      #aliaCustomPanel ul {
        padding-left: 0;
        margin-left: 0;
      }
      #aliaSmartPanel li,
      #aliaCustomPanel li {
        display: flex;
        align-items: center;
        gap: 12px;
        line-height: 1.35;
      }
      .info-icon { flex: 0 0 auto; }

      /* Righe quantità/prezzo responsive */
      #aliaSmartPanel .row,
      #aliaCustomPanel .row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }
      .alia-quantity-wrap,
      .alia-price-wrap {
        min-width: 44%;
        flex: 1 1 44%;
      }

      /* Bottoni full width */
      #aliaSmartPanel .alia-buy-btn,
      #aliaCustomPanel .alia-buy-btn,
      #aliaCustomPanel .alia-back-btn {
        width: 100%;
      }

      /* Hard stop allo scroll orizzontale su tutta la pagina */
      html, body, .impiegando-home {
        width: 100%;
        overflow-x: hidden;
      }
    }

  /* ---------- 4) “I NOSTRI CLIENTI” – SCROLL FLUIDO ---------- */
  .clienti-carousel {
    padding: 0 16px 20px 16px;    /* niente bordo vuoto che “tira” a dx */
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* inerzia iOS */
    overscroll-behavior-x: contain;
  }
  .clienti-card {
    flex: 0 0 auto;           /* non andare a capo */
    scroll-snap-align: start; /* snap “pulito” alla card */
    /* opzionale: larghezze consigliate in mobile */
    width: 86vw;              /* card grande ma gestibile */
    max-width: 420px;
  }
    .clienti-title-row, .clienti-title-row * {
      font-size: 22px;     /* prima ~27px */
    }
    .clienti-numbers span {
      font-size: 20px;     /* prima 20px */
    }
  .clienti-title {
    margin-left: 0;
    text-align: center;
  }
    /* Enterprise box: quadrato e titolo grande su 768px */
    .enterprise-box {
      height: auto;           /* override del 280px */
      aspect-ratio: 16/9;    /* lo rende quadrato */
    max-width: 380px;
    max-height: 280px;

    }
    .enterprise-box-container  { max-width:420px; max-height:380px; }
    .enterprise-box-title {
      font-size: 24px;
      max-width: 100%;

        }
        .enterprise-box-arrow svg {
          width: 84px; height: 68px;
    }
.enterprise-box-title br { display:none ; }
}
/* ===== FIX Allineamento & Overflow – Alia Price (mobile/tablet) ===== */

/* Da tablet in giù metti in colonna e centra tutto con misure “elastiche” */
@media (max-width: 1100px) {
  .alia-solution-section {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;                 /* più compatto */
    padding: 64px 0 40px 0;    /* rimuove eccesso top */
    overflow-x: hidden;        /* blocca qualunque bleed */
  }

  .alia-solution-left {
    margin: 0;
    padding: 0 24px;           /* padding laterale coerente col resto */
    min-width: 0;
    max-width: 520px;
    text-align: center;        /* titolo e descrizione centrati */
  }

  .alia-solution-title {
    text-align: center;
    margin-bottom: 24px;       /* token: 24px sotto il titolo */
  }

  .alia-solution-desc {
    text-align: center;
    margin-bottom: 96px;       /* distanza titolo/descrizione → badge = 96px */
  }

  .alia-section {
    width: 100%;
    max-width: 420px;
    min-width: 0 !important;   /* ⛔️ sovrascrive il min-width:500px */
    margin: 0 auto;
    align-items: center;
  }

  .alia-panel {
    width: 100%;               /* evita 98vw */
    max-width: 420px;
    padding: 16px;             /* in px, non in vw */
    box-sizing: border-box;
    min-height: 0;             /* lascia che cresca solo col contenuto */
    margin: 0 auto;            /* centrato orizzontalmente */
  }

  .pop-badge {
    left: 50%;
    transform: translateX(-50%);
    top: -25px;                /* resta ben staccato dal pannello */
  }
}

/* Mobile “stretto” – rifiniture */
@media (max-width: 600px) {
  .alia-solution-title { font-size: var(--section-title-size); }
  .alia-solution-desc  { font-size: var(--body-text-size); }
  .alia-panel { max-width: 390px; }   /* iPhone 13 Pro width “utile” */
}
/* ===== Clienti Carousel – mobile-friendly scroll ===== */
#clientiCarousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* inerzia iOS */
  scrollbar-width: none; /* Firefox */
}
#clientiCarousel::-webkit-scrollbar { display: none; } /* WebKit */

.clienti-card {
  flex: 0 0 auto;           /* non andare a capo */
  scroll-snap-align: start; /* snap “pulito” alla card */
  /* opzionale: larghezze consigliate in mobile */
  width: 72vw;              /* mobile; desktop può essere già gestito altrove */
  max-width: 320px;
}
/* =================== CLIENTI – CARD & QUOTE =================== */

/* Contenitore orizzontale: lasciamo scroll-x ma NON tagliamo in alto/basso
   e aggiungiamo un piccolo padding per ospitare lo zoom */
#clientiCarousel{
  overflow-x: auto;
  padding-block: 24px;          /* spazio di sicurezza sopra/sotto */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Card uniforme: altezza fissa e layout a colonna */
.clienti-card{
  position: relative;
  flex: 0 0 auto;
  width: 82vw;               /* mobile; desktop può essere già gestito altrove */
  max-width: 320px;
  height: var(--clienti-card-h, 240px);  /* altezza uniforme */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  scroll-snap-align: start;
  transition: transform .28s ease, box-shadow .28s ease;
  will-change: transform;
}

/* Colpo d’occhio su hover (o focus/active su touch) senza tagli */
.clienti-card:hover,
.clienti-card:focus-within{
  transform: scale(1.03);
  z-index: 3;                   /* sopra le sorelle durante lo zoom */
}

/* Box colorato con la citazione: TUTTE le card stessa altezza */
.clienti-quote,
.clienti__quote,
.clienti .quote{
  /* usa una sola classe tra queste se ne hai una certa;
     qui le aggreghiamo per sicurezza */
  background: var(--quote-bg, #E6F7FF);
  border-radius: 12px;
  padding: 14px 16px;           /* spazio interno comodo */
  line-height: 1.35;
  color: #0e92e4;
  font-weight: 450;

  /* blocco flessibile che si espande per riempire
     e garantire la stessa altezza su tutte le card */
  flex: 1 1 auto;
  min-height: var(--clienti-quote-min-h, 110px); /* NON lasciare uscire il testo */
  display: flex;
  align-items: center;          /* testo centrato verticalmente */
  overflow: visible;            /* nessun taglio del testo/ombre */
  word-break: break-word;
}

/* eventuale riga con logo/nome/ruolo separata dalla quote */
.clienti-meta{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ——— Responsive ——— */
@media (min-width: 769px){
  .clienti-card{
    width: 300px;               /* o il tuo valore desktop */
    height: 260px;              /* tutte uguali anche su desktop */
  }
  .clienti-quote,
  .clienti__quote,
  .clienti .quote{
    min-height: 130px;          /* un filo più alta su desktop */
  }
}

@media (max-width: 768px){
  :root{
    --clienti-card-h: 240px;    /* altezza uniforme mobile */
    --clienti-quote-min-h: 122px;
  }
}
/* CITY INFO CARD MOBILE FIX */
@media (max-width: 768px) {
    /* Marker: assicurati che il SVG e tutti gli elementi interni
       possano essere cliccati, sovrascrivendo i `pointer-events: none` */
    .city-marker,
    .city-marker svg,
    .city-marker svg *,
    .city-marker svg path,
    .city-marker svg circle {
        pointer-events: auto !important;
    }

    /* La card: per essere selezionabile, deve essere sopra tutto
       e deve avere un’area cliccabile valida */
    .city-info-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto; /* Altezza adattabile al contenuto */
        max-width: 100%; /* Si espande per riempire */
        transform: none; /* Rimuovi transform */
        visibility: visible; /* Sempre visibile per consentire il click */
        opacity: 1;
        pointer-events: auto; /* Consenti click sulla card */
        z-index: 10001; /* Assicura sia sopra altri elementi mobili */
        background: white; /* Sfondo bianco solido */
        border-radius: 12px; /* Bordi arrotondati */
        box-shadow: 0 8px 32px rgba(0, 165, 207, 0.15); /* Ombra standard */
        padding: 16px; /* Padding interno */
        margin: 0; /* Rimuovi margini */
        backdrop-filter: none; /* Nessun blur su mobile */
        -webkit-backdrop-filter: none;
    }

    /* Nascondi la freccia della card su mobile */
    .city-info-card::before {
        display: none;
    }

    /* Contenitore della mappa: necessario per il posizionamento assoluto
       della card, ma non deve tagliare nulla */
    .map-italy-container {
        position: relative; /* Fondamentale per .city-info-card (absolute) */
        overflow: visible; /* Permette alla card di espandersi */
    }

    /* Marker SVG: assicura che il punto cliccabile sia ben definito */

    /* Rimuovi gli zoom/scale su hover dei marker per evitare comportamenti strani su touch */
    .city-marker:hover svg {
        transform: none;
        filter: none;
    }

    /* Assicura che gli elementi con `pointer-events: none` (come gli SVG)
       non blocchino il click sui loro contenitori */
    .city-marker {
        pointer-events: auto; /* Permetti click sul contenitore */
    }
}

/* Video fallback for deployment issues */
video {
    background-color: #f0f0f0;
}

    /* Nascondi i controlli nativi solo per i video che usano controlli custom via JS */
    #aliaVideo::-webkit-media-controls,
    #teamVideo::-webkit-media-controls {
    display: none !important;
}

/* Mobile Styles - INCLUDE TUTTI I DISPOSITIVI TOUCH E IPHONE */
@media (max-width: 768px),
       (pointer: coarse),
       (hover: none),
       screen and (max-device-width: 414px),
       screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 414px) {
    /* Design System Override for Mobile */
    :root {
        --container-padding: var(--space-sm);
        --section-padding-y: var(--space-2xl);
        --modal-padding: var(--space-lg);
    }

    /* Italy Map Mobile */
    .map-container {
        padding: 0 var(--space-sm);
        gap: var(--space-xl);
        min-height: auto;

    }

    .map-title {
        font-size: var(--section-title-size);
        font-weight: var(--section-title-weight);
        width: 100%;
        max-width:1440px;

    }
           .map-title br { display: none}

    .map-subtitle {
        font-size: var(--text-base);
        width: 100%;
        letter-spacing: var(--body-text-spacing);
    }
           .map-subtitle br { display: none}

    .map-italy-container {
        position: relative;
        overflow: visible;
    }

    .city-info-card {
        position: absolute;
        min-width: 280px;
        max-width: 90vw;
        background: white;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 165, 207, 0.15);
        padding: 16px;
        z-index: 10000;
        pointer-events: auto;
    }

    /* NESSUNA ANIMAZIONE SUI MARKER PER DISPOSITIVI TOUCH */
    .marker {
        cursor: pointer;
        z-index: 1;
        transition: none !important;
    }

    .marker:hover,
    .marker:active,
    .marker:focus {
        transform: none !important;
        transition: none !important;
    }

    /* Garantisce che i marker siano sempre cliccabili */
    .marker {
        position: relative;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
        touch-action: manipulation;
    }

    /* Evita il flickering durante il resize */
    .map-italy-container * {
        pointer-events: auto;
    }
}
.fixed-bar { display: none; }
.mobile-menu-overlay { display: none !important; }

/* ===== Mobile Bottom Navigation Bar - Amazon Style ===== */
@media (max-width: 768px) {
  .mobile-menu-overlay { display: none !important; }
  .mobile-menu-overlay.show { display: block !important; }
}

@media (max-width: 768px) {
  .fixed-buttons { display: none !important; }

  .fixed-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: #063046;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  }

  .fixed-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgba(255,255,255,0.9);
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    flex: 1;
    max-width: 80px;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .fixed-bar__item:hover,
  .fixed-bar__item:focus,
  .fixed-bar__item.active {
    color: #00A5CF;
    background: rgba(0,165,207,0.1);
  }

  .fixed-bar__icon {
    font-size: 20px;
    margin-bottom: 3px;
  }

  .fixed-bar__label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }

  /* Menu overlay per Altro */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

  .mobile-menu-overlay.show {
    display: block;
  }

  .mobile-menu-panel {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
    z-index: 1001;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .mobile-menu-overlay.show .mobile-menu-panel {
    transform: translateY(0);
  }

  .mobile-menu-panel a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    color: #063046;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-radius: 12px;
    transition: background 0.2s;
  }

  .mobile-menu-panel a:hover {
    background: #f0f8ff;
  }

  .mobile-menu-panel a i {
    width: 24px;
    text-align: center;
    color: #00A5CF;
    font-size: 18px;
  }

  .mobile-menu-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f5f5f5;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu-title {
    font-size: 18px;
    font-weight: 700;
    color: #063046;
    margin-bottom: 16px;
    padding-left: 16px;
  }
}

    /* ====== FIX Alia Magia (992–1200) + centratura testi mappa ===== */
    /* ====== ALIA MAGIA – layout “desktop-centrato” per 900–1250px ====== */
    @media (min-width: 900px) and (max-width: 1250px) {

      /* Container centrato e abbastanza alto da contenere i 5 pill */
      .magic-section .magic-boxes-abs {
        width: min(1100px, 92vw);
        margin: 0 auto 76px auto;
        height: 560px;             /* evita tagli/sovrapposizioni verticali */
        position: relative;        /* mantiene gli assoluti interni */
        left: 0;
      }

      /* Tutte le pill centrano orizzontalmente e applicano un micro offset */
      .magic-section .magic-box {
        left: 50% !important;
        transform: translateX(calc(-50% + var(--dx, 0px))) rotate(var(--rot, 0deg)) !important;
        max-width: 92vw;
        white-space: nowrap;
      }

      /* Offsets per ognuna (coerenti al desktop) */
      .magic-section .box1 { --dx: -120px; --rot: -3deg;   top:  20px;  width: clamp(520px, 70vw, 760px); }
      .magic-section .box2 { --dx:   40px; --rot:  2.2deg; top: 130px;  width: clamp(500px, 66vw, 680px); }
      .magic-section .box3 { --dx:  -40px; --rot: -8deg;   top: 210px;  width: clamp(480px, 62vw, 640px); }
      .magic-section .box4 { --dx:   80px; --rot: -4deg;   top: 310px;  width: clamp(540px, 74vw, 900px); }
      .magic-section .box5 { --dx:  -60px; --rot:  1deg;   top: 410px;  width: clamp(520px, 72vw, 820px); }
    }
    /* ===== Centra map-subtitle e map-legend SOLO 769–1200px ===== */
    @media (min-width: 769px) and (max-width: 1200px) {

      /* allinea il wrapper al centro e neutralizza eventuali bias */
      .italy-map-section .map-container {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding-left: var(--container-padding) !important;
        padding-right: var(--container-padding) !important;
      }

      /* i figli testuali diventano blocchi centrati */
      .italy-map-section .map-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
      }

      .italy-map-section .map-content .map-subtitle,
      .italy-map-section .map-content .map-legend {
        display: block !important;          /* margin auto efficace */
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        max-width: 560px;                    /* righe armoniche */
      }
    }
    /* ==== MOBILE: card sotto "Portali inclusi", centrata orizzontalmente ==== */
    @media (max-width: 768px) {
      /* l’ancora diventa il <li>, così la card si centra sulla voce intera */
      .has-tooltip {
        position: relative !important;
        overflow: visible !important; /* evita tagli */
      }

      /* in mobile non ancoriamo più la card all'icona ma al <li> */
      .has-tooltip .info-wrap {
        position: static !important;
        display: inline !important;
      }

      /* posiziona la card sotto la riga della voce, centrata rispetto al <li> */
      .has-tooltip .info-card {
        top: calc(100% + 8px) !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.98) !important;
        margin-left: 0 !important;

        width: min(92vw, 420px) !important;  /* larga ma entro viewport */
        max-height: 260px !important;        /* meno “lunga” */
        overflow-y: auto !important;         /* scroll se serve */
      }

      /* mantieni l'allineamento anche quando si mostra */
      .has-tooltip .info-wrap:hover > .info-card,
      .has-tooltip .info-icon:focus + .info-card,
      .has-tooltip .info-icon[aria-expanded="true"] + .info-card {
        transform: translateX(-50%) scale(1) !important;
      }

      /* se i parent hanno overflow nascosto, sbloccalo in mobile */
      .alia-list,
      .enterprise-card-list {
        overflow: visible !important;
      }
    }
    @media (max-width: 768px) {
      .orbit-logo[data-logo="Jooble"] .logo-circle {
        background: #fff;
      }
    }
    @media (max-width: 768px) {
      .orbit-logos-container {
        transform: scale(1.0, 1.02);   /* <— NUMERI DA CAMBIARE: X=1.08 , Y=1.22 */
        transform-origin: center;
      }
    }

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Fix gradientFlow animation - ensure all gradient elements have correct properties */
.gradient-text,
.hero-title .highlight,
.alia-hero-quasi,
.alia-mode-title,
.magic-gradient,
.expect-gradient,
.grad {
    background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
}

/* [RIMOSSO] Duplicato .alia-price/.alia-euro - gradienti ora definiti per-pacchetto a fine file */
/* Iubenda button positioning - angolo in alto a sinistra */
.iubenda-cs-btn.iubenda-cs-preferences-link {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 10000 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 165, 207, 0.3) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #00A5CF !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0, 165, 207, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
}
    /* === MOBILE (≤768px) — Expect Section: sticky stacking identico a alia-modes === */
    @media (max-width: 768px) {
      /* contenitore: serve "respiro" in fondo per completare lo stack */
      .expect-section .expect-steps {
        display: block; /* colonna singola */
        padding-bottom: var(--stack-extra, 0px);
      }

      /* ogni card diventa sticky con top configurabile (default 28px) */
      .expect-section .expect-card {
        position: sticky;
        top: var(--stack-top, 28px);
        z-index: auto;
        margin: 0 auto;
        transform: none !important; /* evita conflitti con animazioni desktop */
      }

      /* gap dinamico: il JS attiva --apply-overlap e ne “sfuma” il contributo con --overlap-factor */
      .expect-section .expect-step + .expect-step .expect-card {
        margin-top: calc(
          var(--stack-gap, 48px)
          - (var(--stack-overlap, 0px) * var(--apply-overlap, 0) * var(--overlap-factor, 0))
        );
      }

      /* la prima card non ha margine superiore extra */
      .expect-section .expect-step:first-of-type .expect-card {
        margin-top: 0 !important;
      }
    }

/* DESKTOP: lascia tutto com’è (le tue animazioni attuali) */
@media (min-width: 769px) {
  .stack-section[data-stack] .stack-card {
    position: static;      /* niente sticky su desktop */
    transform: none !important;
  }
}
    /* EXPECT – stacking mobile helper */
    @media (max-width: 768px) {
      .expect-section .expect-steps { will-change: min-height; }
      .expect-section .expect-card {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
      }
    }

  /* ========== CITIES STATS GRID (replaces map) ========== */
.cities-section-header {
  text-align: center;
  padding: 60px 20px 40px;
  max-width: 700px;
  margin: 0 auto;
}

.cities-section-header .map-title {
  font-size: 36px;
  font-weight: 700;
  color: #063046;
  margin-bottom: 16px;
  font-family: 'Satoshi', sans-serif;
}

.cities-section-header .map-subtitle {
  font-size: 18px;
  color: #666;
  margin-bottom: 12px;
}

.cities-section-header .map-legend {
  font-size: 14px;
  color: #999;
}

.cities-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.cities-stats-grid .city-stat-card,
.city-stat-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #e0e0e0 !important;
  display: block !important;
}

.city-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 165, 207, 0.18);
}

.city-stat-card h3 {
  color: #063046;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px 0;
  font-family: 'Satoshi', sans-serif;
}

.city-stat-card .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.city-stat-card .stat-item:last-child {
  border-bottom: none;
}

.city-stat-card .stat-item .label {
  color: #666;
  font-size: 15px;
}

.city-stat-card .stat-item .value {
  color: #00A5CF;
  font-weight: 600;
  font-size: 17px;
}

@media (max-width: 900px) {
  .cities-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cities-stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .city-stat-card {
    padding: 20px;
  }

  .city-stat-card h3 {
    font-size: 20px;
  }

  .cities-section-header .map-title {
    font-size: 28px;
  }

  .cities-section-header {
    padding: 40px 20px 30px;
  }
}

/* ========== ALIA PACKAGES GRID ========== */
/* [PREZZI] Griglia card prezzi: massima larghezza, gap generoso */
.alia-packages-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 36px;
    flex-wrap: wrap;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 40px;
}

/* [PREZZI] Card singola: cicciotta, larga, ombra elegante, hover lift */
.alia-packages-grid .alia-panel {
    flex: 1;
    min-width: 360px;
    max-width: 450px;
    padding: 40px 44px 36px 44px;
    min-height: 0;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0, 80, 120, 0.08), 0 1px 4px rgba(0, 80, 120, 0.04);
    border: 1.5px solid rgba(0, 165, 207, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* [PREZZI] Hover: card si alza leggermente con ombra più marcata */
.alia-packages-grid .alia-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 36px rgba(0, 80, 120, 0.14), 0 2px 8px rgba(0, 80, 120, 0.06);
}

/* [PREZZI] Lista features: cresce e spinge il bottone in basso */
.alia-packages-grid .alia-panel .alia-list {
    flex: 1;
}

/* [PREZZI] Contatore e bottone: sempre in fondo, staccati dalla lista */
.alia-packages-grid .alia-panel .alia-counter-wrapper {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 165, 207, 0.1);
    gap: 8px;
}

/* [PREZZI] Titolo card grande e bold */
.alia-packages-grid .alia-panel .alia-title {
    font-size: 30px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 8px;
}

/* [PREZZI] Prezzo grande */
.alia-packages-grid .alia-panel .alia-price-row {
    font-size: 56px;
    margin-bottom: 12px;
}

/* [PREZZI] Descrizione card centrata con altezza minima per allineamento */
.alia-packages-grid .alia-panel .alia-desc {
    font-size: 16px;
    margin-bottom: 32px;
    min-height: 44px;
    text-align: center;
}

/* [PREZZI] Lista voci con spazio generoso e allineamento testo a capo */
.alia-packages-grid .alia-panel .alia-list li {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* [PREZZI] Icona check non si restringe nelle liste */
.alia-packages-grid .alia-panel .alia-list li .check {
    flex-shrink: 0;
    margin-top: 2px;
}

/* [PREZZI] Bottone compralo ora grande e rotondo */
.alia-packages-grid .alia-panel .alia-buy-btn {
    padding: 18px 28px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 16px;
}
/* [PREZZI] Stili per-pacchetto spostati a fine file per priorità nella cascata CSS */

@media (max-width: 992px) {
    .alia-packages-grid {
        flex-direction: column;
        align-items: center;
    }

    .alia-packages-grid .alia-panel {
        max-width: 400px;
        width: 100%;
    }
}

/* ========== NAVBAR STILE AMAZON ========== */
/* Barra di navigazione principale — posizionamento fisso in alto con sfondo sfumato bianco e sfocatura */
.navbar-amazon {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Riga superiore della navbar — layout flex con spaziatura tra logo, slogan e icone */
.navbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 40px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 24px;
    position: relative;
}

/* Logo nella navbar — altezza fissa 48px */
.navbar-amazon .navbar-brand .logo {
    height: 140px;
    width: auto;
}

/* Slogan della navbar — posizionato al centro assoluto orizzontalmente */
.navbar-slogan {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 0 20px;
}

/* Testo dello slogan — sfumatura di colore con effetto testo trasparente */
.slogan-text {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(90deg, #063046 0%, #00A5CF 50%, #125978 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Contenitore icone nella navbar — layout flex orizzontale con gap 16px */
.navbar-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Stile dei link/icone nella navbar (carrello, login, ecc.) — colonne flex con testo scuro */
.nav-icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #063046;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    position: relative;
}

/* Icone Font Awesome dentro i link della navbar — dimensione e margine inferiore */
.nav-icon-link > .fas {
    font-size: 20px;
    margin-bottom: 3px;
}

/* Badge del carrello nella navbar — posizionato in alto a destra con sfondo rosso */
.nav-icon-link .cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #F9423A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Menu avatar utente nella navbar — layout verticale con cursore pointer */
.user-avatar-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
}

/* Cerchio avatar utente nella navbar — gradiente azzurro con iniziali bianche */
.nav-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00A5CF 0%, #0089B3 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

/* Nome utente sotto l'avatar nella navbar — testo piccolo blu scuro */
.nav-avatar-name {
    font-size: 11px;
    font-weight: 500;
    color: #063046;
    margin-top: 2px;
}

/* Link di logout sotto l'avatar — testo azzurro piccolo senza sottolineatura */
.nav-avatar-logout {
    font-size: 10px;
    color: #00A5CF;
    text-decoration: none;
}

/* Riga inferiore della navbar — sfondo blu scuro con padding orizzontale */
.navbar-bottom {
    background: #063046;
    padding: 0 40px;
}

/* Contenitore interno della riga inferiore — layout flex centrato con larghezza massima */
.navbar-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
}

/* Spaziatore flessibile nella riga inferiore della navbar */
.navbar-bottom-spacer {
    flex: 1;
}

/* Contenitore del pulsante dashboard nella riga inferiore — dimensione automatica */
.navbar-bottom-dashboard-wrap {
    flex: 0 0 auto;
}

/* Pulsante dashboard nella navbar — sfondo gradiente azzurro con bordi arrotondati */
.nav-dashboard {
    display: block;
    padding: 10px 24px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #00A5CF 0%, #0089B3 100%);
    border-radius: 8px;
    margin: 6px 0;
}

/* Lista categorie nella navbar — layout flex orizzontale con gap 32px */
.navbar-categories {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 32px;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
}

/* Link delle categorie nella navbar — testo bianco con padding verticale */
.navbar-categories a {
    display: block;
    padding: 12px 0;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* Elemento dropdown nella navbar — posizionamento relativo per il menu a discesa */
.nav-dropdown {
    position: relative;
}

/* Link trigger del dropdown — layout flex con icona freccia */
.nav-dropdown > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* Icona freccia nel dropdown — dimensione ridotta */
.nav-dropdown > a .fa-chevron-down {
    font-size: 10px;
}

/* Menu a discesa del dropdown — nascosto di default, posizionato sotto il trigger */
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 220px;
    padding: 8px 0;
    z-index: 1000;
}

/* Link dentro il menu dropdown — layout flex con icona e testo */
.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #063046;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

/* Immagini/loghi dentro il menu dropdown — dimensione fissa 24px */
.nav-dropdown-menu img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Effetto hover sui link delle categorie */
.navbar-categories a:hover {
    opacity: 0.8;
}

.navbar-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.navbar-toggle span {
    width: 25px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s;
}

@media (max-width: 768px) {
    /* [MOBILE] Logo centrato nella navbar */
    .navbar-top {
        justify-content: center;
    }

    .navbar-slogan {
        display: none;
    }

    .navbar-icons {
        display: none;
    }

    .navbar-toggle {
        display: flex;
    }

    .navbar-bottom {
        display: none;
    }

    .navbar-categories {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #063046 0%, #125978 100%);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        display: none;
    }

    .navbar-categories.active {
        display: flex;
    }

    .navbar-categories li a {
        font-size: 24px;
        padding: 15px 30px;
    }
}
/* Reset Password Styles */
/* [RESET PASSWORD] Stili specifici per la pagina reset password */
body.page-reset-password {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.reset-password-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.reset-password-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 8px 48px rgba(0, 165, 207, 0.15);
    padding: 48px 40px;
    text-align: center;
}

.logo-section {
    margin-bottom: 32px;
}

.logo-section .logo {
    height: 90px;
    width: auto;
}

.title {
    font-size: 28px;
    font-weight: 600;
    color: #063046;
    margin-bottom: 16px;
    font-family: 'Satoshi', sans-serif;
}

.subtitle {
    font-size: 16px;
    color: #125978;
    line-height: 1.5;
    margin-bottom: 32px;
}

/* User Info Section */
.user-info {
    background: #F0F8FF;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    text-align: center;
}

.welcome-text {
    font-size: 18px;
    color: #063046;
    margin-bottom: 12px;
}

.customer-badge, .new-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.customer-badge {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #8B4513;
}

.new-user-badge {
    background: linear-gradient(135deg, #00A5CF, #0090B5);
    color: white;
}

.badge-icon {
    font-size: 16px;
}

/* Success Section */
.success-section {
    text-align: center;
}

.success-icon {
    width: 64px;
    height: 64px;
    background: #10B981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
    margin: 0 auto 24px;
}

/* Error Section */
.error-section {
    text-align: center;
}

.error-icon {
    width: 64px;
    height: 64px;
    background: #DC2626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
    margin: 0 auto 24px;
}

.error-message {
    color: #DC2626;
    margin-bottom: 24px;
    padding: 12px;
    background: #FEF2F2;
    border-radius: 8px;
    border: 1px solid #FECACA;
}

/* Form Styles */
.reset-form {
    text-align: left;
}

.input-group {
    margin-bottom: 24px;
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #063046;
    margin-bottom: 8px;
}

.input-group input {
    width: 100%;
    height: 52px;
    border: 2px solid #E0F4FF;
    border-radius: 12px;
    background: #FBFDFF;
    padding: 0 16px;
    font-size: 16px;
    font-family: 'Satoshi', sans-serif;
    color: #063046;
    transition: border-color 0.2s, background-color 0.2s;
}

.input-group input:focus {
    border-color: #00A5CF;
    background: white;
    outline: none;
}

.input-group input::placeholder {
    color: #8BC5D1;
}

/* Password Match Indicator */
.password-match {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.password-match.valid {
    color: #10B981;
}

.password-match.invalid {
    color: #DC2626;
}

/* Buttons */
.submit-btn {
    width: 100%;
    height: 52px;
    background: #00A5CF;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Satoshi', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    margin-bottom: 24px;
}

.submit-btn:hover {
    background: #008db1;
    transform: translateY(-1px);
}

.submit-btn:disabled {
    background: #B6F0FF;
    cursor: not-allowed;
    transform: none;
}

.back-home-btn, .retry-btn {
    display: inline-block;
    background: #00A5CF;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.back-home-btn:hover, .retry-btn:hover {
    background: #008db1;
}

.retry-btn {
    background: #F59E0B;
}

.retry-btn:hover {
    background: #D97706;
}

.links {
    text-align: center;
}

.back-link {
    color: #00A5CF;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link:hover {
    color: #008db1;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
    .reset-password-card {
        padding: 32px 24px;
    }

    .title {
        font-size: 24px;
    }

    .subtitle {
        font-size: 15px;
    }

    .user-info {
        padding: 16px;
    }

    .welcome-text {
        font-size: 16px;
    }
}

/* [REGISTRAZIONE] Stili specifici per la pagina registrazione */
body.page-registrazione {
  font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  color: #224053;
}

.registration-main {
  max-width: 690px;
  margin: 38px auto 38px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 38px #13b0f82c, 0 0 0 8px #bbf6ff34;
  padding: 38px 36px 48px 36px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.registration-title {
  color: #003347;
  margin: 0 0 20px 0;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}

h2 {
  color: #003347;
  margin: 0 0 14px 0;
  font-size: 30px;
  font-weight: 700;
}

.invoice-box, .user-box {
  background: #eafdff;
  border-radius: 16px;
  padding: 22px 24px 18px 24px;
  margin-bottom: 10px;
}

label {
  font-weight: 500;
  font-size: 17px;
  display: block;
  margin: 14px 0 6px 0;
  color: #224053;
}

input[type="text"], input[type="email"], input[type="date"], input[type="tel"], input[type="password"] {
  border: 2px solid #c8f2ff;
  border-radius: 9px;
  background: #fff;
  font-size: 17px;
  padding: 9px 12px;
  width: 100%;
  margin-bottom: 4px;
  font-family: inherit;
  transition: border 0.17s;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="tel"]:focus, input[type="password"]:focus {
  border: 2px solid #01bbf6;
  outline: none;
}

/* [CHECKOUT] Requisiti password — integrati nella card senza stacco */
.password-requirements {
  margin: 8px 0 12px 0;
  padding: 10px 0 0 0;
  background: transparent;
  border-radius: 0;
  border: none;
}

.requirement {
  font-size: 14px;
  margin-bottom: 4px;
  transition: color 0.3s;
}

.requirement.valid {
  color: #5abc3e;
}

.requirement.valid::before {
  content: "✓";
  margin-right: 4px;
}

.requirement:not(.valid) {
  color: #ef4444;
}

.requirement:not(.valid)::before {
  content: "✗";
  margin-right: 4px;
}

.password-match {
  font-size: 14px;
  margin-top: 4px;
  padding: 4px 0;
}

.password-match.valid {
  color: #5abc3e;
}

.password-match.invalid {
  color: #ef4444;
}

.checkbox-wrap {
  display: flex;
  align-items: center;
  font-size: 17px;
  margin-bottom: 10px;
  user-select: none;
  cursor: pointer;
  gap: 10px;
}

.checkbox-wrap input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #01bbf6;
  margin-right: 8px;
}

.checkbox-wrap a {
  color: #01bbf6;
  text-decoration: underline;
}

.checkmark {
  display: inline-block;
}

.registration-btn {
  width: 100%;
  margin-top: 14px;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(90deg, #02bafc 70%, #28e0d8 100%);
  color: #fff;
  border: none;
  border-radius: 13px;
  padding: 18px 0 13px 0;
  box-shadow: 0 4px 18px 0 #22e4ff1b;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: opacity 0.14s, background 0.18s, box-shadow 0.18s;
  opacity: 0.6;
  pointer-events: none;
}

.registration-btn.active {
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 8px 38px 0 #01bbf622;
}

/* [CHECKOUT] Nota codice/PEC — integrata nella card senza stacco */
.codice-pec-note {
  color: #063046;
  font-size: 14px;
  font-style: italic;
  margin-top: 8px;
  padding: 8px 0 0 0;
  background: transparent;
  border-radius: 0;
  border-left: none;
}

@media (max-width: 900px) {
  .registration-main {
    max-width: 99vw;
    padding: 19px 2vw 34px 2vw;
  }
}
/* === Gradient Text – Cross-browser Patch (2025) === */

/* Base comune: fallback static se le @supports non scattano */
.gradient-text,
.expect-gradient,
.magic-gradient {
  display: inline-block;                 /* assicura background animabile */
  background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: transparent;                    /* Firefox/desktop */
  -webkit-text-fill-color: transparent;  /* Safari / iOS */
  -webkit-background-clip: text;
          background-clip: text;
  animation: gradientFlow 3s ease-in-out infinite;
  will-change: background-position;
}

/* Preferisce ridurre il moto → niente animazione, ma mantiene il gradiente */
@media (prefers-reduced-motion: reduce) {
  .gradient-text,
  .expect-gradient,
  .magic-gradient {
    animation: none;
    background-position: 50% 50%;
  }
}

/* Safari/iOS e Chrome: assicurati del clipping WebKit */
@supports (-webkit-background-clip: text) {
  .gradient-text,
  .expect-gradient,
  .magic-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Firefox (abilita anche lo standard non prefissato) */
@supports (background-clip: text) {
  .gradient-text,
  .expect-gradient,
  .magic-gradient {
    background-clip: text;
    color: transparent;
  }
}

/* Se non hai già la keyframe nel tuo CSS globale, lasciala qui.
   Se esiste già, questa la sovrascrive senza effetti collaterali. */
@keyframes gradientFlow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Stacking SOLO mobile — non tocca il desktop */
@media (max-width: 768px) {
  /* Colonna e niente gap: requisito per lo stack */
  .expect-section .expect-steps {
    display: block !important;
    gap: 0 !important;
    padding-bottom: var(--stack-extra, 35vh);
  }

  .expect-section .expect-card {
    transition: none !important;
    transform: none !important;   /* evita stacking context inattesi */
    will-change: margin-top;
  }

  /* --- Fase attiva: titolo + card1 pinnati --- */
  .expect-section.stack-active .expect-title {
    position: sticky;
    top: 0;
    z-index: 60;
    /* opzionale: una base bianca per evitare “trasparenze” sullo scroll
    background: linear-gradient(180deg, #fff, rgba(255,255,255,.92));
    */
  }
  .expect-section.stack-active .expect-step:first-child .expect-card {
    position: sticky;
    top: var(--stack-top, 88px);  /* calc. JS: sotto il titolo */
    z-index: 10 !important;       /* base, le altre sopra */
  }

  /* Fine stack: sblocchiamo */
  .expect-section.stack-done .expect-title {
    position: relative;
    top: auto;
  }
  .expect-section.stack-done .expect-step:first-child .expect-card {
    position: relative;
    top: 0;
  }

  /* Ordine strati: 2 e 3 DEVONO stare sopra la 1 */
  .expect-section .expect-step:nth-child(1) .expect-card { z-index: 10 !important; }
  .expect-section .expect-step:nth-child(2) .expect-card { z-index: 20 !important; }
  .expect-section .expect-step:nth-child(3) .expect-card { z-index: 30 !important; }

  /* [JOBBIR MOBILE] Disabilita animazione stacking card — layout colonna semplice */
  .impiegando-home .expect-section .expect-steps {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding-bottom: 0 !important;
  }

  .impiegando-home .expect-section .expect-card {
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
    will-change: auto !important;
  }

  .impiegando-home .expect-section.stack-active .expect-title,
  .impiegando-home .expect-section.stack-active .expect-step:first-child .expect-card {
    position: relative !important;
    top: auto !important;
  }

  .impiegando-home .expect-section .expect-step {
    max-width: 92vw !important;
  }
}

/* Forgot Password Styles */
/* [FORGOT PASSWORD] Stili specifici per la pagina forgot password */
body.page-forgot-password {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.forgot-password-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.forgot-password-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 8px 48px rgba(0, 165, 207, 0.15);
    padding: 48px 40px;
    text-align: center;
}

.logo-section {
    margin-bottom: 32px;
}

.logo-section .logo {
    height: 90px;
    width: auto;
}

.title {
    font-size: 28px;
    font-weight: 600;
    color: #063046;
    margin-bottom: 16px;
    font-family: 'Satoshi', sans-serif;
}

.subtitle {
    font-size: 16px;
    color: #125978;
    line-height: 1.5;
    margin-bottom: 32px;
}

.error-message {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #DC2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.success-message {
    text-align: center;
}

.success-icon {
    width: 64px;
    height: 64px;
    background: #10B981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
    margin: 0 auto 24px;
}

.success-message h2 {
    font-size: 24px;
    color: #063046;
    margin-bottom: 16px;
    font-family: 'Satoshi', sans-serif;
}

.success-message p {
    color: #125978;
    line-height: 1.5;
    margin-bottom: 32px;
}

.forgot-form {
    text-align: left;
}

.input-group {
    margin-bottom: 24px;
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #063046;
    margin-bottom: 8px;
}

.input-group input {
    width: 100%;
    height: 52px;
    border: 2px solid #E0F4FF;
    border-radius: 12px;
    background: #FBFDFF;
    padding: 0 16px;
    font-size: 16px;
    font-family: 'Satoshi', sans-serif;
    color: #063046;
    transition: border-color 0.2s, background-color 0.2s;
}

.input-group input:focus {
    border-color: #00A5CF;
    background: white;
    outline: none;
}

.input-group input::placeholder {
    color: #8BC5D1;
}

.submit-btn {
    width: 100%;
    height: 52px;
    background: #00A5CF;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Satoshi', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    margin-bottom: 24px;
}

.submit-btn:hover {
    background: #008db1;
    transform: translateY(-1px);
}

.back-home-btn {
    display: inline-block;
    background: #00A5CF;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.back-home-btn:hover {
    background: #008db1;
}

.links {
    text-align: center;
}

.back-link {
    color: #00A5CF;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link:hover {
    color: #008db1;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
    .forgot-password-card {
        padding: 32px 24px;
    }

    .title {
        font-size: 24px;
    }

    .subtitle {
        font-size: 15px;
    }
}

/* Import Satoshi Font PRIORITARIO per questa pagina */
/* NOTA: style.css viene caricato globalmente da base.html, non serve importarlo qui */

/* Chi Siamo Page Specific Styles */
.chi-siamo-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Esclude solo le icone Font Awesome */
.chi-siamo-page .fa,
.chi-siamo-page .fas,
.chi-siamo-page .far,
.chi-siamo-page .fab,
.chi-siamo-page [class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
}

/* Forza Satoshi su tutti gli elementi della pagina Chi Siamo */
.chi-siamo-page * {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Gradient Backgrounds — sfondo trasparente, ereditato dal body */
.gradient-bg-top {
    width: 100%;
    height: 684px;
    position: absolute;
    top: 0;
    left: 0;
}

.gradient-bg-bottom {
    width: 100%;
    height: 684px;
    position: absolute;
    bottom: 280px;
    left: 0;
    z-index: -1;
}

/* Social Proof Styles */
.social-proof {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
}

.client-avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  /* niente gap o padding esterno qui */
}

/* Stile base di ciascun avatar */
.avatar {
  position: relative;
  width: 64px;
  height: 64px;
  margin-left: -20px;        /* sovrappone di 22px il cerchio precedente */
  border-radius: 100%;
  border: 4px solid #EBFDFF;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* il trucco per avere il "foro" trasparente nel bordo */
  background-clip: content-box;
  -webkit-background-clip: content-box;
}

/* Il primo avatar non ha margin negativo */
.avatar:first-child {
  margin-left: 0;
}

/* Immagini e z-index per ciascun avatar */
.avatar-3 {
  width: 42px;
  height: 42px;
  z-index: 3;
  background-image: url("/static/img/cliente1.svg");
}
.avatar-2 {
  width: 42px;
  height: 42px;
  z-index: 2;
  background-image: url("/static/img/cliente2.svg");
}
.avatar-1 {
    width: 42px;
      height: 42px;
  z-index: 1;
  background-image: url("/static/img/cliente3.svg");
}

.client-text {
    color: var(--text-secondary);
    font-size: 16px;
    margin-left: 16px;
    font-weight: 550;
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0;
}

/* Hero Section Chi Siamo — padding-top gestito dalla regola uniforme [TUTTE] Hero (60px !important)
   Qui si definiscono solo padding laterale e inferiore.
   min-height: auto per evitare troppo spazio vuoto prima della timeline */
.hero-section-chi-siamo {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    z-index: 2;
}

/* [CHI-SIAMO] Riduce distanza tra hero e timeline (da 120px a 60px) */
.chi-siamo-page .hero-section-chi-siamo {
    margin-bottom: 60px !important;
}

.hero-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

/* Video Container */
.video-container {
    width: min(32vw, 220px);
      aspect-ratio: 9 / 16;
      height: auto;
      background: #E0E0E0;
      border-radius: 16px;
      margin: var(--space-3xl) auto 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 165, 207, 0.15);
}

.team-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 16px;
    transform: scale(1.01);
    filter: brightness(1.1) contrast(1.05) saturate(1.1);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    border-radius: 16px;
}

.video-container:hover .video-overlay {
    opacity: 1;
}

.video-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.video-play-button {
    width: 80px;
    height: 80px;
    background: rgba(0, 165, 207, 0.9);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 165, 207, 0.4);
    border: none;
    cursor: pointer;
}

.video-play-button:hover {
    transform: scale(1.1);
    background: rgba(0, 165, 207, 1);
}

.video-audio-button {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
}

.video-audio-button:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 1);
}

.play-icon {
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 6px;
}

.audio-icon {
    width: 24px;
    height: 24px;
    fill: #333;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Hero Title - chi-siamo */
.chi-siamo-page .hero-title,
.chi-siamo-page h1.hero-title {
  font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: var(--hero-title-size) !important;
  font-weight: var(--hero-title-weight) !important;
  color: #063046 ;
  line-height: 1.2 ;
  /* centratura del blocco */
  margin: 0 auto 64px ;
  letter-spacing: var(--hero-title-spacing) ;
  text-align: center;
  max-width: 85%;
}

.hero-subtitle {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--body-text-size);
    font-weight: 400;
    color: #125978;
    max-width: 900px;
    margin: 24px auto 16px !important;
    line-height: 1.5;
}

/* Team Section */
/* [CHI-SIAMO] Sezione team Serena - sfondo trasparente */
.team-section {
    width: 100%;
    padding: 80px 0;
    background: transparent;
    display: flex;
    justify-content: center;
}

/* [CHI-SIAMO] Container card con sfondo chiaro */
.chi-siamo-page .team-container,
.team-container {
    width: 90% !important;
    max-width: 1400px !important;
    background: linear-gradient(180deg, #A2F0FF 0%, #EDFBFF 100%) !important;
    box-shadow: 0 8px 44px 0 rgba(0, 162, 224, 0.2) !important;
    border-radius: 16px !important;
    padding: 60px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 40px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    height: auto !important;
}

/* [CHI-SIAMO] Foto Serena - flexbox, larghezza fissa a sinistra */
.chi-siamo-page .team-photo,
.team-photo {
    flex: 0 0 250px !important;
    width: 250px !important;
    max-width: 250px !important;
    display: flex !important;
    align-items: flex-end !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 1 !important;
}

.chi-siamo-page .team-photo img,
.team-photo img {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 250px !important;
    object-fit: contain !important;
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

/* [CHI-SIAMO] Contenuto testo - occupa il resto dello spazio */
.chi-siamo-page .team-content,
.team-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-left: 20px !important;
    width: auto !important;
    margin-left: 0 !important;
    position: relative !important;
}

/* [CHI-SIAMO] Nascondi Serena sotto 1025px */
@media (max-width: 1024px) {
    .chi-siamo-page .team-photo,
    .team-photo {
        display: none !important;
    }
    .chi-siamo-page .team-content,
    .team-content {
        padding-left: 0 !important;
    }
}

/* [CHI-SIAMO] Colori testo team su sfondo scuro */
.team-title {
    font-family: 'Satoshi', sans-serif;
    font-size: var(--section-title-size) !important;
    font-weight: var(--section-title-weight) !important;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.2;
    letter-spacing: var(--section-title-spacing) !important;
}

.team-description {
    font-family: 'Satoshi', sans-serif;
    font-size: var(--body-text-size);
    font-weight: 400;
    color: #d0e8f0;
    line-height: 1.6;
    margin-bottom: 20px;
}

.team-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-size: var(--body-text-size);
    font-weight: 400;
    color: #d0e8f0;
    line-height: 1.6;
    margin-bottom: 16px;
}

.team-list {
    margin-bottom: 28px;
}

.team-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.team-list-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.team-list-text {
    font-family: 'Satoshi', sans-serif;
    font-size: var(--body-text-size);
    font-weight: 400;
    color: #d0e8f0;
    line-height: 1.6;
    margin: 0;
}

.team-button {
    background: #00A5CF;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    width: fit-content;
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 450;
    cursor: pointer;
    transition: all 0.3s ease;
}

.team-button:hover {
    background: #0090B5;
    transform: translateY(-2px);
}

/* ATS Comparison Section */
.ats-comparison-section {
  width: 100%;
  padding: 128px 0;
  display: flex;
  justify-content: center;
}

.ats-comparison-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 60px; /* desktop: padding laterale */
}

.ats-comparison-title {
  font-family: 'Satoshi', sans-serif;
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  color: #063046;
  text-align: center;
  margin-bottom: 56px;
  line-height: 1;
  letter-spacing: var(--section-title-spacing);
}

.ats-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 120px;
  max-width: none;
  margin: 0 auto;
}

.ats-comparison-card {
  background: #fff;
  border-radius: 100px;
  /* spazio per l'icona a sinistra: 24 (padding) + 25 (icona) + ~11 (gap) */
  padding: 24px 24px 24px 60px;
  position: relative;            /* riferimento per l’icona assoluta */
  display: flex;
  align-items: flex-start;
  gap: 65px;
  border: 1px solid #E1F6FB;
  box-shadow: 0 12px 40px rgba(0,165,207,.18), 0 2px 6px rgba(6,48,70,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
  overflow: hidden;
}
.card-rotate-left {
    transform: rotate(-3deg);
}

.card-rotate-right {
    transform: rotate(3deg);
}

.ats-comparison-card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 8px 32px rgba(162, 240, 256, 0.5);
}

.ats-comparison-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);   /* centrata verticalmente sempre */
  width: 25px;
  height: 25px;
  margin: 0;                     /* niente margin-top “rigido” */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ats-comparison-content h3 {
  font-family: 'Satoshi', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #063046;
  margin-bottom: 8px;
  line-height: 1.2;
}

.ats-comparison-content p {
  font-family: 'Satoshi', sans-serif;
  font-size: var(--body-text-size);
  font-weight: 400;
  color: #125978;
  line-height: 1.4;
  margin: 0;
}

/* Contact Form Section - New Design */
.contact-form-section {
    width: 100%;
    padding: 128px 0;
}

.contact-form-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

.contact-form-title {
    font-family: 'Satoshi', sans-serif;
    font-size: var(--section-title-size) !important;
    font-weight: var(--section-title-weight) !important;
    color: #063046;
    margin-bottom: 24px;
    line-height: 1.2;
    letter-spacing: var(--section-title-spacing) !important;
}

.contact-form {
    max-width: 600px;
    margin: 64px auto 0;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.contact-form-field {
    position: relative;
}

.contact-form-field input,
.contact-form-field-full textarea {
    width: 100%;
    padding: 8px 0;
    border: none;
    border-bottom: 2px solid #125978;
    background: transparent;
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    color: #063046;
    outline: none;
    transition: border-color 0.3s ease;
}

.contact-form-field input::placeholder,
.contact-form-field-full textarea::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.contact-form-field input:focus,
.contact-form-field-full textarea:focus {
    border-bottom-color: #00A5CF;
}

.contact-form-field-full {
    grid-column: 1 / -1;
    margin-bottom: 46px;
}

.contact-form-field-full textarea {
    width: 100%;
    min-height: 30px;
    resize: vertical;
    border-bottom: 2px solid #125978;
    margin-top: 12px;
    background: transparent;
}

.contact-form-submit {
    width: 100%;
    background: #00A5CF;
    color: white;
    border: none;
    padding: 16px 48px;
    border-radius: 8px;
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 450;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-form-submit:hover {
    background: #0090B5;
    transform: translateY(-2px);
}

/* FAQ Section Styles - Using unified design system from style.css */

/* Responsive Design */
@media (max-width: 1400px) {
    .team-title {
        font-size: 32px !important;
    }
}

@media (max-width: 1200px) {
    .team-container {
        padding: 40px !important;
    }

    .team-title {
        font-size: 32px !important;
    }

    .team-description, .team-subtitle {
        font-size: var(--body-text-size);
    }

    .team-list-text {
        font-size: 15px !important;
    }

    .ats-comparison-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    /* FAQ responsive styles now handled by unified CSS */
}

@media (max-width: 1024px) {
    .team-title {
        font-size: 28px ;
        text-align: left ;
    }

    .team-list {
        text-align: left ;
        max-width: 600px ;
        margin: 0 auto 28px auto;
    }
}

@media (max-width: 768px) {
    /* Hero Section Mobile — padding-top gestito dalla regola uniforme [TUTTE] Hero (60px !important)
       Qui si definiscono solo padding laterale e inferiore */
    .hero-section-chi-siamo {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px;
        min-height: auto;
    }

    .hero-content-wrapper {
        padding: 0 0;
        max-width: 100%;
    }

    /* Video Container Mobile */
    .video-container {
      width: min(52vw, 740px);
      aspect-ratio: 9 / 16;
      height: auto;
      margin: 32px auto 56px;
    }

    .team-video {
        transform: scale(1.1);
    }

    /* Social Proof Mobile */
    .social-proof {
        margin: 24px 0 8px 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .client-avatars {
        margin-bottom: 12px;
    }

    .client-text {
        margin-left: 0;
        font-size: 12px ;
        max-width: 480px;
        line-height: 1.4;
    }

    /* Hero Title Mobile */
    .chi-siamo-page .hero-section-chi-siamo .hero-title br {
        display: none;
      }
    .chi-siamo-page .hero-title,
    .chi-siamo-page h1.hero-title {
      font-size: var(--hero-title-size) ;
      line-height: 1.15 !;
      /* centra il blocco, non solo il testo */
      margin: 0 auto 16px ;
      max-width: 90% !;
      letter-spacing: var(--hero-title-spacing) ;
      text-align: center;
    }

    /* Hero Subtitle Mobile */
    .chi-siamo-hero-subtitle,
    .chi-siamo-page .hero-subtitle {
        font-size: var(--body-text-size);
        line-height: 1.5 ;
        margin: 16px 0 32px 0;
        max-width: 85%;
    }

    /* Team Section Mobile */
    .team-section {
        padding: 0 0 ;
    }

    .team-title {
        font-size: var(--section-title-size);
        margin-bottom: 24px;
        text-align: left;
    }

    .team-description, .team-subtitle {
        font-size: var(--body-text-size);
    }

    .team-list {
        text-align: left ;
        max-width: 100% ;
        margin: 20px auto 24px auto ;
    }

    .team-list-text {
        font-size: 14px;
    }

    .team-button {
        padding: 12px 24px ;
        font-size: 16px ;
        width: 125px ;
        max-width: 280px ;
        margin: 0 0 0;
    }

    /* ATS Comparison Mobile */
        /* ATS Comparison — Mobile (≤768px) */
        @media (max-width: 768px) {
          /* 8px dal bordo schermo */
          .chi-siamo-page .ats-comparison-section {
            padding: 0 8px;
          }
          /* il container non aggiunge ulteriore padding */
          .chi-siamo-page .ats-comparison-container {
            max-width: none;
            padding: 0;
            margin: 0;
          }
          /* una colonna, spaziatura regolare */
          .chi-siamo-page .ats-comparison-grid {
            grid-template-columns: 1fr;
            gap: 90px;
            max-width: 100%;
          }
          /* card morbide e consistenti su mobile */
          .chi-siamo-page .ats-comparison-card {
            padding: 16px 20px 16px 56px; /* 20 (padding L) + 24 (icona) + ~12 (gap) */
          }
          /* icona centrata anche su mobile e riallineata al nuovo padding */
          .chi-siamo-page .ats-comparison-icon {
            left: 20px;
            width: 24px;
            height: 24px;
          }

            .chi-siamo-page .ats-comparison-container .ats-comparison-title {

            font-size: var(--section-title-size);
            font-weight: var(--section-title-weight);
            display: block ;
            box-sizing: border-box;
            width: 100%;
            padding-left: 54px;
            padding-right: 54px;
            margin: 192px auto 70px;
            line-height: 1.15;
          }
          .chi-siamo-page .ats-comparison-content h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 6px;
            line-height: 1.25;
          }
          .chi-siamo-page .ats-comparison-content p {
            font-size: 14px;
            line-height: 1.45;
          }
            }

    /* Contact Form Mobile */
    .contact-form-section {
        padding: 60px 0;
    }

    .contact-form-container {
        padding: 0 16px;
    }

    .contact-form-title {
        font-size: var(--section-title-size);
        line-height: 1.15;
        margin: 192px auto 24px;
    }

    .contact-form {
        margin: 40px auto 0;
        max-width: 100%;
    }

    .contact-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .contact-form-field-full {
        margin-bottom: 32px;
    }

    .contact-form-submit {
        padding: 14px 32px;
        font-size: 16px;
    }

    .contact-form-field-full textarea {
      min-height: 80px;
      line-height: 1.25;
    }
}

    /* --- ICONA SEMPRE CENTRATA VERTICALMENTE NELLE CARD --- */
    .chi-siamo-page .ats-comparison-card {
      position: relative;
      /* padding generale della card (desktop) */
      padding: 24px;
      /* riserva spazio per l'icona: left padding + icona (25px) + gap (12px) */
      padding-left: 60px; /* 24 + 25 + 11 ~ 60; aggiusta se vuoi più/meno spazio */
    }

    .chi-siamo-page .ats-comparison-icon {
      position: absolute;
      left: 24px;           /* allineata al padding sinistro della card (desktop) */
      top: 50%;
      transform: translateY(-50%);
      width: 25px;
      height: 25px;
      margin: 0 !important; /* annulla qualsiasi margin precedente */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Mobile: padding diverso? allinea di conseguenza */
    @media (max-width: 768px) {

        .chi-siamo-page .ats-comparison-container {
            padding: 0 8px;       /* padding laterale della sezione */
          }
        .chi-siamo-page .ats-comparison-card {
        padding: 16px 20px 16px 56px;
        padding-left: 56px; /* 20 (padding L) + 25 (icona) + 11 (gap) */
        border-radius:32px;
      }
      .chi-siamo-page .ats-comparison-icon {
        left: 20px;         /* uguale al padding sinistro mobile */
        width: 24px;
        height: 24px;
      }
    }

/* [CHECKOUT] Stili specifici per la pagina checkout */
body.page-checkout {
  font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  color: #224053;
}

.checkout-main {
  max-width: 690px;
  margin: 38px auto 38px auto;
  background: #f8fafb;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.checkout-logo {
  text-align: center;
  margin-bottom: 10px;
}

/* [CHECKOUT] Logo immagine altezza */
.checkout-logo-img {
  height: 90px;
}

/* [CHECKOUT] Righe riepilogo nascoste di default (booster/indeed) */
.summary-hidden {
  display: none;
}

/* [CHECKOUT] Disclaimer password ALIA */
.checkout-disclaimer {
  margin-top: 10px;
  font-size: 14px;
}

h2 {
  color: #003347;
  margin: 0 0 14px 0;
  font-size: 30px;
  font-weight: 700;
}

/* [CHECKOUT] Box form — card con gradiente e bordo laterale colorato */
.summary-box, .invoice-box, .user-box, .pay-box {
  background: linear-gradient(135deg, #ffffff 0%, #f4fbff 100%);
  border-radius: 16px;
  border: none;
  padding: 24px 28px 20px 28px;
  margin-bottom: 0;
  box-shadow: 0 4px 20px rgba(6, 48, 70, 0.08);
}
/* [CHECKOUT] Bordo laterale unificato blu scuro per fatturazione */
body.page-checkout .invoice-box {
  border-left: 4px solid #063046;
  background: linear-gradient(135deg, #ffffff 0%, #f0f8fc 100%);
}
/* [CHECKOUT] Bordo laterale unificato blu scuro per dati registrazione */
body.page-checkout .user-box {
  border-left: 4px solid #063046;
  background: linear-gradient(135deg, #ffffff 0%, #f0f8fc 100%);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11px;
  font-size: 19px;
}

.summary-row.total {
  font-size: 25px;
  font-weight: 700;
  color: #01bbf6;
  margin-top: 18px;
  margin-bottom: 0;
}

label {
  font-weight: 500;
  font-size: 17px;
  display: block;
  margin: 14px 0 6px 0;
  color: #224053;
}
/* [CHECKOUT] Label campi — stile coerente con il carrello */
body.page-checkout label {
  font-weight: 600;
  font-size: 14px;
  color: #063046;
  margin: 12px 0 5px 0;
}
/* [CHECKOUT] Input campi — bordi coerenti con il carrello */
body.page-checkout input[type="text"],
body.page-checkout input[type="email"],
body.page-checkout input[type="date"],
body.page-checkout input[type="tel"],
body.page-checkout input[type="password"] {
  border: 1px solid #dde5ec;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
  margin-bottom: 4px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.page-checkout input[type="text"]:focus,
body.page-checkout input[type="email"]:focus,
body.page-checkout input[type="date"]:focus,
body.page-checkout input[type="tel"]:focus,
body.page-checkout input[type="password"]:focus {
  border: 1px solid #00A5CF;
  box-shadow: 0 0 0 3px rgba(0, 165, 207, 0.08);
  outline: none;
}

/* [CHECKOUT] Focus input — colore unificato Impiegando per tutte le sezioni */

/* [CHECKOUT] Link termini — colore Impiegando */
body.page-checkout .checkout-terms a {
  color: #00A5CF;
  text-decoration: underline;
}
body.page-checkout .checkout-terms a:hover {
  color: #008ab0;
}

/* [CHECKOUT] Checkbox termini — colore Impiegando */
body.page-checkout .checkout-terms .checkbox-wrap {
  cursor: pointer;
  align-items: center;
}
/* [CHECKOUT] Clausole specifica — checkbox centrata, testo su due righe */
body.page-checkout .checkout-terms .checkbox-clausole {
  align-items: center;
}
body.page-checkout .checkout-terms .clausole-text {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
/* [CHECKOUT] Clausole — prima riga */
body.page-checkout .checkout-terms .clausole-line1 {
  display: block;
}
/* [CHECKOUT] Clausole — seconda riga rientrata sotto la A di Approvo (salta l'asterisco) */
body.page-checkout .checkout-terms .clausole-line2 {
  display: block;
  padding-left: 0.6em;
}
body.page-checkout .checkout-terms .checkbox-wrap:hover {
  color: #063046;
}
body.page-checkout .checkout-terms input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #c0d0dc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
body.page-checkout .checkout-terms input[type="checkbox"]:checked {
  background: #00A5CF;
  border-color: #00A5CF;
}
body.page-checkout .checkout-terms input[type="checkbox"]:checked::after {
  content: '✓';
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input[type="text"], input[type="email"], input[type="date"], input[type="tel"] {
  border: 2px solid #c8f2ff;
  border-radius: 9px;
  background: #fff;
  font-size: 17px;
  padding: 9px 12px;
  width: 100%;
  margin-bottom: 4px;
  font-family: inherit;
  transition: border 0.17s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="tel"]:focus {
  border: 2px solid #01bbf6;
  outline: none;
}

input[readonly] {
  background-color: #f8fdff;
  border: 2px solid #e0f7ff;
  color: #666;
  cursor: not-allowed;
}

input[readonly]:focus {
  border: 2px solid #e0f7ff;
  outline: none;
}

/* [CHECKOUT] Bottone modifica — stile coerente con il carrello */
body.page-checkout .btn-outline {
  background: transparent;
  border: 1px solid #e8edf2;
  color: #063046;
  padding: 8px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  margin: 8px 0 0 0;
  cursor: pointer;
  transition: all 0.2s;
}
body.page-checkout .btn-outline:hover {
  border-color: #00A5CF;
  color: #00A5CF;
  background: rgba(0, 165, 207, 0.04);
}
.btn-outline {
  background: transparent;
  border: 2px solid #01bbf6;
  color: #01bbf6;
  padding: 8px 22px;
  border-radius: 9px;
  font-weight: 500;
  font-size: 17px;
  margin: 8px 0 0 0;
  cursor: pointer;
  transition: background 0.17s, color 0.17s;
}
.btn-outline:hover {
  background: #eafdff;
}

.pay-flex {
  display: flex;
  gap: 20px;
}
.pay-flex > div {
  flex: 1;
}

.disclaimer {
  color: #224053;
  font-size: 16px;
  background: #eafdff;
  padding: 14px 18px;
  border-radius: 8px;
  margin-top: 10px;
}

/* [CHECKOUT] Nota codice/PEC — integrata nella card senza stacco */
.codice-pec-note {
  color: #063046;
  font-size: 14px;
  font-style: italic;
  margin-top: 8px;
  padding: 8px 0 0 0;
  background: transparent;
  border-radius: 0;
  border-left: none;
}

.checkbox-wrap {
  display: flex;
  align-items: center;
  font-size: 17px;
  margin-bottom: 10px;
  user-select: none;
  cursor: pointer;
  gap: 10px;
}
.checkbox-wrap input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #01bbf6;
  margin-right: 8px;
}
.checkbox-wrap a {
  color: #01bbf6;
  text-decoration: underline;
}
.checkmark {
  display: inline-block;
}

/* [CHECKOUT] Titoli sezione — stile coerente con il carrello */
body.page-checkout h2 {
  color: #063046;
  margin: 0 0 16px 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* [CHECKOUT] Sezione termini — bordo laterale blu scuro */
body.page-checkout .checkout-terms {
  background: linear-gradient(135deg, #ffffff 0%, #f0f8fc 100%);
  border-radius: 16px;
  border: none;
  border-left: 4px solid #063046;
  padding: 22px 28px;
  box-shadow: 0 4px 20px rgba(6, 48, 70, 0.08);
}

/* [CHECKOUT] Disclaimer — bordo laterale unificato blu scuro */
body.page-checkout .disclaimer {
  background: linear-gradient(135deg, #ffffff 0%, #f0f8fc 100%);
  border-radius: 16px;
  border: none;
  border-left: 4px solid #063046;
  box-shadow: 0 4px 20px rgba(6, 48, 70, 0.08);
}

/* [CHECKOUT] Bottone paga — bordo laterale rosso accent */
.checkout-pay-btn {
  width: 100%;
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #063046 0%, #125978 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 16px 0;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: opacity 0.2s, box-shadow 0.2s;
  opacity: 0.5;
  pointer-events: none;
}
.checkout-pay-btn.active {
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 6px 24px rgba(6, 48, 70, 0.18);
}

/* [CHECKOUT] Requisiti password — integrati nella card senza stacco */
.password-requirements {
  margin: 8px 0 12px 0;
  padding: 10px 0 0 0;
  background: transparent;
  border-radius: 0;
  border: none;
}

.requirement {
  font-size: 14px;
  margin-bottom: 4px;
  transition: color 0.3s;
}

.requirement.valid {
  color: #5abc3e;
}

.requirement.valid::before {
  content: "✓";
  margin-right: 4px;
}

.requirement:not(.valid) {
  color: #ef4444;
}

.requirement:not(.valid)::before {
  content: "✗";
  margin-right: 4px;
}

.password-match {
  font-size: 14px;
  margin-top: 4px;
  padding: 4px 0;
}

.password-match.valid {
  color: #5abc3e;
}

.password-match.invalid {
  color: #ef4444;
}

.invoice-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.btn-save {
  background: #5abc3e !important;
  border-color: #5abc3e !important;
  color: white !important;
}

.btn-save:hover {
  background: #16a34a !important;
}
/* Logged in user checkout adjustments */
body.logged-in .checkout-main {
  gap: 30px;
}

@media (max-width: 900px) {
  .checkout-main {
    max-width: 99vw;
    padding: 19px 2vw 34px 2vw;
  }
}
/* Alia Page Specific Styles - uses design tokens from main style.css */
/* [SPAZIATURA GLOBALE] Distanza uniforme tra tutte le sezioni: 120px desktop, 80px mobile */
section,
.alia-section-spacing {
  margin-bottom: 120px;
}
section:last-child,
.alia-section-spacing:last-child {
  margin-bottom: 0;
}
/* [SPAZIATURA MOBILE] Riduce distanza tra sezioni a 80px sotto 768px */
@media (max-width: 768px) {
  section,
  .alia-section-spacing {
    margin-bottom: 80px;
  }
}

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Alia Hero — padding ridotto in basso, bottone a cavallo sotto */
.alia-hero {
  padding: calc(var(--space-3xl) * 2.5) 0 0 0;
  text-align: center;
}

.alia-hero-logo {
  width: 22%;
  margin: 0 auto 38px auto;
  display: block;
}

.alia-hero-video {
  width: 192px;
  height: 341px;
  background: #E0E0E0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 165, 207, 0.15);
}

.alia-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 16px;
  transform: scale(1.01);
  filter: brightness(1.1) contrast(1.05) saturate(1.1);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
  border-radius: 16px;
}

.alia-hero-video:hover .video-overlay {
  opacity: 1;
}

.video-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.video-play-button {
  width: 30px;
  height: 30px;
  background: rgba(0, 165, 207, 0.9);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 165, 207, 0.4);
  border: none;
  cursor: pointer;
}

.video-play-button:hover {
  transform: scale(1.1);
  background: rgba(0, 165, 207, 1);
}

.video-stop-button {
  width: 30px;
  height: 30px;
  background: rgba(249, 66, 58, 0.9);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(249, 66, 58, 0.4);
  border: none;
  cursor: pointer;
}

.video-stop-button:hover {
  transform: scale(1.1);
  background: rgba(249, 66, 58, 1);
}

.video-audio-button {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
}

.video-audio-button:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 1);
}

.play-icon {
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 6px;
}

.stop-icon {
  width: 24px;
  height: 24px;
  fill: white;
}

.audio-icon {
  width: 24px;
  height: 24px;
  fill: #333;
}

.alia-hero-video-placeholder {
  position: relative;
  width: 440px;
  max-width: 90vw;
  aspect-ratio: 16/9;
  border: 4px solid #B6F0FF;
  border-radius: 14px;
  overflow: hidden;
  background: #EBFDFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alia-hero-video-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(0.98);
  display: block;
}
.alia-hero-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.alia-hero-title {
  font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 24px auto 16px !important;
  font-size: var(--hero-title-size);
  font-weight: 400;
  line-height: 1.13;
  color: var(--text-primary);
  letter-spacing: var(--section-title-spacing);
}
.alia-hero-title .alia-hero-quasi {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: gradientFlow 3s ease-in-out infinite;
}

/* Alia Modes */
.alia-modes {
  padding: 64px 0 0 0;
  min-height: 920px;
  position: relative;
}
.alia-modes-head {
  text-align: left;
  max-width: 420px;
  padding-left: 28px;
  margin-bottom: 32px;
}

.alia-mode-text-title {
  font-size: var(--section-title-size);
  font-weight: 450;
  margin: 0 0 var(--space-sm) 0;
  line-height: 1.08;
  color: var(--text-primary);
  letter-spacing: var(--section-title-spacing);
  font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.alia-mode-text-desc {
  font-size: var(--body-text-size);
    color: #073262;
    margin: 0;
    line-height: 1.38;
  }

.alia-modes-cards {
  position: relative;
  min-height: 420px;
}

/* Card modalità */
.alia-mode-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow-sm);
  width: 250px;
  min-height: 350px;
  padding: var(--space-xl) var(--space-lg) var(--space-lg) var(--space-lg);
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  transition: transform 0.3s ease-out, box-shadow 0.2s;
  will-change: transform;
}

.alia-mode-card:hover {
  box-shadow: 0 12px 60px 0 rgba(0, 162, 224, 0.17);
}

.alia-mode-title {
  font-size: 28px;
  font-weight: 450;
  margin-bottom: 12px;
  background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gradientFlow 3s ease-in-out infinite;
}

.alia-mode-desc {
  font-size: var(--body-text-size);
  color: #073262;
  margin-bottom: 18px;
  font-weight: 400;
}

.alia-mode-btn {
  margin-top: auto;
  width: 201px;
  height:60px;
  background: #00A5CF;
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 450;
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: none;
}

.alia-mode-btn:hover {
  background: #0095BC;
  color: #fff;
  border-color: #0095BC;
}

.alia-mode-pill {
  position: absolute;
  top: -17px;
  right: 60px;
  background: linear-gradient(90deg, #00A5CF 0%, #6E46AE 48%, #F9423A 100%);
  color: #EBFDFF;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 20px;
  border-radius: 100px;
  box-shadow: 0 2px 8px 0 rgba(16,180,224,0.08);
}

/* Posizionamento a triangolo/scalino */
.alia-modes-cards {
  position: relative;
  min-height: 520px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.mode-smart {
  position: absolute;
  left: 52%;
  top: 150px;
  z-index: 3;
}

.mode-custom {
  position: absolute;
  left: 18%;
  top: 490px;
  z-index: 2;
}

.mode-enterprise {
  position: absolute;
  left: 77%;
  top: 640px;
  z-index: 1;
}

/* Alia HEADLINE */
.alia-section-headline {
  padding: 70px 0 0 0;
  text-align: center;
}
.alia-headline {
  font-family: 'Satoshi', Arial, sans-serif;
  font-size: var(--hero-title-size);
  font-weight: 400;
  color: #17394a;
  margin: 0 auto;
  line-height: 1.08;
  max-width: 2400px;
  letter-spacing: -0.8px;
}
.gradient-text {
  background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  display: inline-block;
  background-size: 200% 100%;
}

/* Alia come funziona */
.alia-funziona-puzzle {
  padding: 170px 0 0 0;
}

.alia-funziona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px 140px 140px 140px;
  gap: var(--space-lg);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Elemento di testo (primo box in alto a sinistra) - senza sfondo */
.funziona-text-box {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--space-lg) 0;
}

.funziona-text-box h2 {
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 18px 0;
  color: #073262;
  letter-spacing: -0.8px;
  line-height: 1.1;
}

.funziona-text-box p {
  font-size: 16px;
  color: #073262;
  margin: 0;
  line-height: 1.4;
}

/* Box con icone e sfondo */
.funziona-item {
  background: #EBFDFF;
  border-radius: var(--space-md);
  box-shadow: 0 8px 44px 0 rgba(0, 162, 224, 0.11);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--box-padding, var(--space-md) var(--space-sm));
  margin: var(--box-margin, 0);
  font-size: 1rem;
  color: #063046;
  font-weight: 450;
  text-align: center;
  transition: all 0.3s ease;
  height: var(--box-height, 140px);
  width: var(--box-width, 100%);
  cursor: default;
}

.funziona-item:hover {
  box-shadow: 0 12px 60px 0 rgba(0, 162, 224, 0.25);
  transform: translateY(-4px);
  background: #DFF7FF;
}

.funziona-item img {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
}

/* Posizionamento specifico nella griglia */
.funziona-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.funziona-item:nth-child(3) { grid-column: 3; grid-row: 1; }
.funziona-item:nth-child(4) { grid-column: 1; grid-row: 2; }
.funziona-item:nth-child(5) { grid-column: 2; grid-row: 2; }
.funziona-item:nth-child(6) { grid-column: 3; grid-row: 2; }
.funziona-item:nth-child(7) { grid-column: 1; grid-row: 3; }
.funziona-item:nth-child(8) { grid-column: 2; grid-row: 4; }
.funziona-item:nth-child(9) { grid-column: 3; grid-row: 4; }

/* Rotation-box */
/* [ENTERPRISE] Sezione citazione — ritardo animazione zoom per aspettare le icone sopra */
/* [PARALLASSE] Sezione citazione — sfondo fisso blu, pezzo puzzle entra da sx */
.rotation-box-section {
  padding: 120px 0 120px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 0;
}

/* [PUZZLE] Contenitore — posiziona buco e pezzo sovrapposti, include protuberanze */
.puzzle-container {
  position: relative;
  width: 700px;
  max-width: 80%;
  aspect-ratio: 880 / 360;
}

/* [PUZZLE] Buco chiaro — sagoma puzzle visibile sullo sfondo gradiente */
.puzzle-hole-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* [PUZZLE] Pezzo wrapper — contiene SVG pezzo e testo, entra da sx */
.puzzle-piece-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* [PUZZLE] SVG del pezzo — riempie il wrapper */
.puzzle-piece-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* [PUZZLE] Testo citazione sopra il pezzo */
.puzzle-quote {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-family: 'Satoshi', Arial, sans-serif;
  font-size: 26px;
  font-weight: 450;
  text-align: center;
  margin: 0;
  padding: 60px 80px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

/* [PUZZLE] Animazione — pezzo entra da sinistra con leggero ritardo */
.puzzle-piece-wrapper.rotation-box-reveal {
  opacity: 0;
  transform: translateX(-120%);
  transition: opacity 0.3s ease-out 0.6s,
              transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}

.puzzle-piece-wrapper.rotation-box-reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.rotation-box {
  position: relative;
  background: rgba(0, 165, 207, 0.2); /* #00A5CF, 8% opacity */
  border-left :6px solid #00a5cf;
  border-radius: 12px;
  padding: 48px 42px;
  min-width: 700px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 6px 36px 0 rgba(0,165,207,0.07);
  transform: rotate(-3.89deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.rotation-quote {
  color: #00A5CF;
  font-family: 'Satoshi', Arial, sans-serif;
  font-size: 32px;
  font-weight: 450;
  text-align: center;
  margin: 0;
  line-height: 1.13;
  letter-spacing: -0.6px;
}

/* Alia Carousel */
/* [ENTERPRISE] Sezione carosello — sfondo leggermente più scuro per contrasto con le immagini */
.alia-carousel-section {
  padding: 68px 0 0 0;
  display: flex;
  justify-content: center;
}

.alia-carousel {
  width: 96vw;
  max-width: 1260px;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 5%, black 15%, black 85%, rgba(0,0,0,0.3) 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 5%, black 15%, black 85%, rgba(0,0,0,0.3) 95%, transparent 100%);
  margin: 0 auto;
}

.carousel-track {
  display: flex;
  gap: 34px;
  transition: none;
  will-change: transform;
}

.carousel-img {
  width: 480px;
  height: 320px;
  background: #f7faff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
  image-rendering: auto;
  opacity: 1 !important;
  transform: none !important;
}

.carousel-img:hover {
  box-shadow: 0 8px 40px rgba(0, 165, 207, 0.18);
  transform: scale(1.02) !important;
}

/* Modal style */
.carousel-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(18,32,48,0.72);
  justify-content: center;
  align-items: center;
}

.carousel-modal.active {
  display: flex;
}

.carousel-modal-img {
  max-width: 84vw;
  max-height: 84vh;
  border-radius: 18px;
  box-shadow: 0 6px 48px 0 rgba(0, 165, 207, 0.29);
  background: #fff;
}

.carousel-modal-close {
  position: absolute;
  top: 30px; right: 48px;
  color: #2bd3e9;
  background-color: transparent;
  border-radius: 50%;
  border: none;
  width: 55px;
  height: 55px;
  font-size: 48px;
  font-weight: 300;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s;
}

.carousel-modal-close:hover {
  color: #00A5CF;
}
/* Nav buttons nel modal */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  font-size: 44px;
  font-weight: 300;
  color: #fff;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  z-index: 3;
  transition: background .2s, transform .08s;
}
.carousel-nav:hover { background: rgba(0,0,0,0.45); transform: translateY(-50%) scale(1.06); }
.carousel-nav:active { transform: translateY(-50%) scale(0.96); }
.carousel-nav.prev { left: 26px; }
.carousel-nav.next { right: 26px; }

/* Cursori: clic sull’overlay per chiudere; sull'immagine niente zoom-out */
#carouselModal { cursor: zoom-out; }
#carouselModalImg { cursor: default; }

/* Mobile */
@media (max-width:768px){
  .carousel-nav { width: 44px; height: 44px; font-size: 34px; line-height: 44px; }
  .carousel-nav.prev { left: 12px; }
  .carousel-nav.next { right: 12px; }
}

/* ALIA AVATAR */
.avatar-section {
  padding: 6px 70px 0 10px;
  width: 100%;
}
.avatar-section-container {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 62px;
  padding: 0 32px;
}
.avatar-section-img-col {
  flex: 0 0 auto;
  min-width: 200px;
  display: flex;
  align-items: flex-start;
}
.avatar-section-img-wrapper {
  position: relative;
  width: fit-content;
}
.avatar-section-main-png {
  width: 280px ;
  max-width: 320px ;
  align-content:center;
}
.avatar-section-avatar {
  position: absolute;
  bottom: 22px;
  right: 22px;
  width: 75px;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.09));
}
.avatar-section-text-col {
  flex: 1 1 1;
  min-width: 340px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.avatar-section-text {
  font-family: 'Satoshi', Arial, sans-serif;
  font-size: 32px;
  align-content:center;
  color: #17394a;
  font-weight: 400;
  line-height: 1.19;
  letter-spacing: -0.7px;
}

/* ALIA CTA FINAL */
.alia-cta-section {
  padding: 86px 0 0 0;
  text-align: center;
}

.alia-cta-title {
  font-family: 'Satoshi', Arial, sans-serif;
  font-size: 40px;
  color: #093651;
  font-weight: 450;
  margin: 0 0 36px 0;
  letter-spacing: -1.2px;
}

.alia-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.alia-cta-btn {
  font-family: 'Satoshi', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 450;
  padding: 12px 28px;
  border-radius: 9px;
  border: 2px solid #00A5CF;
  text-decoration: none;
  transition: all .16s;
  display: inline-block;
  cursor: pointer;
}

.alia-cta-primary {
  background: #00A5CF;
  color: #fff;
  border: 2px solid #00A5CF;
}
.alia-cta-primary:hover {
  background: #0095BC;
  color: #fff;
}

.alia-cta-outline {
  background: transparent;
  color: #00A5CF;
  border: 2px solid #00A5CF;
}
.alia-cta-outline:hover {
  background: #DFF7FF;
  color: #0095BC;
}

.footer-info {
  display: flex;
  padding: 48px 40px;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 32px;
  background: linear-gradient(180deg, #A2F0FF 0%, #EBFDFF 100%);
  box-shadow: 0px 4px 24px 0px rgba(162, 240, 255, 0.40);
  margin: 0 auto;
  max-width: 1000px;
  min-height: 280px;
}

/* =========================================
   TABLET (≤1024px)
   ========================================= */
@media (max-width: 1024px) {
  .container { padding: 0 16px; }

  /* HERO — padding-top gestito dalla regola uniforme [TUTTE] Hero */
  .alia-hero { padding: 0; }

  /* MODES: passa da layout assoluto a flusso normale */
  .alia-modes { padding: 48px 0 0; min-height: auto; }
  .alia-modes-cards { position: static; min-height: 0; }
  .alia-mode-card {
    position: static;
    width: 100%;
    min-height: auto;
    margin: 0 0 16px;
    border-radius: 24px;
  }
  .mode-smart, .mode-custom, .mode-enterprise { position: static; left: auto; top: auto; }

  /* HEADLINE */
  .alia-section-headline { padding: 56px 0 0; }

  /* PUZZLE (“Come funziona Alia”) — base tablet: 2 colonne */
  .alia-funziona-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 140px;            /* altezza della cella */
    gap: var(--space-md);
    max-width: 100%;
    padding: 0 var(--space-sm);
    grid-auto-flow: dense;
  }

  .funziona-text-box {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-md) 0;
  }
  .funziona-text-box h2 { font-size: var(--section-title-size); }

  /* Card base in griglia (tablet) */
  .alia-funziona-grid .funziona-item {
    grid-column: auto; grid-row: auto;
    width: 100%;
    height: 100%;                    /* ⬅️ aderisce alla cella */
    margin: 0;
    padding: 16px 18px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;          /* icona sopra, testo sotto */
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }
  .alia-funziona-grid .funziona-item img { width: 44px; height: 44px; margin: 0 0 10px 0; }
  .alia-funziona-grid .funziona-item span { font-size: var(--body-text-size); line-height: 1.4; }

  /* ⚠️ niente nth-child qui: gli span sono gestiti solo nei blocchi specifici */
  /* AVATAR */
  .avatar-section-container { flex-direction: column; gap: 28px; padding: 0 16px; }

  /* CAROUSEL */
  .carousel-img { width: 75vw; min-width: 280px; height: auto; aspect-ratio: 3 / 2; }

  /* FOOTER layout */
  .footer-grid { flex-direction: column; gap: 32px; align-items: flex-start; }
}

/* =========================
   MOBILE (≤768px)
   ========================= */
@media (max-width: 768px) {
  .container { padding: 0 8px; }

  /* HERO — padding-top gestito dalla regola uniforme [TUTTE] Hero */
  .alia-hero { padding: 0; text-align:center; }
  .alia-hero-title {
    max-width: 20ch;
    padding: 56px 0 0;
    line-height: 1.15;
    margin: 20px auto 12px;
    text-wrap: balance;
    letter-spacing: var(--hero-title-spacing);
  }

  /* ===== COME FUNZIONA ALIA (mobile): 2 colonne + nessuna sovrapposizione ===== */
  .alia-funziona-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 140px;
    gap: 16px;
    padding: 0 8px;
    grid-auto-flow: dense;
  }

  .funziona-text-box { align-items: center; text-align: center; padding: 12px 0; }
  .funziona-text-box h2 { margin: 0 auto 18px; font-size: var(--section-title-size); line-height:1.2; }
  .funziona-text-box p  { font-size: var(--body-text-size);  line-height:1.45; }

  .alia-funziona-grid .funziona-item {
    grid-column: auto; grid-row: auto;
    height: 100%;                     /* ⬅️ occupa la cella, non più 140px fissi */
    margin: 0;
    padding: 14px 16px;
    border-radius: 16px;
    display: flex;                    /* icona sopra, testo sotto */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    background: rgba(255,255,255,0.16);
    box-shadow: 0 8px 24px rgba(0,162,224,0.12);
  }
  .alia-funziona-grid .funziona-item img { width: 36px; height: 36px; margin: 0 0 8px 0; }
  .alia-funziona-grid .funziona-item span{ font-size: var(--body-text-size); line-height: 1.45; color: #063046; }

  /* Override degli span (solo mobile):
     – primo box “normale”
     – sesto box verticale su 2 righe */
  /* MOBILE: 1° tile su due colonne, alto una riga */
  .alia-funziona-grid > .funziona-item:nth-child(2){
    grid-column: 1 / -1;   /* prende entrambe le colonne */
    grid-row: span 1;      /* resta alto una riga */
    height: 100%;
    min-height: unset;
  }
  /* MOBILE: 6° tile verticale su 2 righe */
  .alia-funziona-grid > .funziona-item:nth-child(7){
    grid-row: span 2 !important;   /* forza lo span anche se qualche regola lo resetta */
  }

  /* MODES */
  .alia-modes { padding: 32px 0 0; }
  .alia-modes-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
  .alia-mode-text { padding: 0 2px 8px; }
  .alia-mode-text-title { font-size: var(--section-title-size); line-height: 1.2; }
  .alia-mode-text-desc  { font-size: var(--body-text-size);  line-height: 1.2; padding: 24px 0 40px; }
  .alia-mode-text-desc br { display: none; }
  .alia-mode-card {
    position: relative;
    z-index: 1;
    width: 346px;
    height: 405px;
    padding: 24px;
    border-radius: 8px;
    margin: auto;
    box-shadow: 0 10px 28px rgba(0,165,207,.12), 0 1px 4px rgba(6,48,70,.06);
    left: auto; top: auto;
  }
  /* MOBILE stacking animation (solo ≤768px) — versione sticky “a step”  ✅ FIX */
  .alia-modes-cards {
    /* layout a singola colonna per far “impilare” le card */
    display: block;
    /* spazio extra: lo JS imposta --stack-extra per far completare lo stacking */
    padding-bottom: var(--stack-extra, 0px);
  }

  .alia-mode-card {
    position: sticky;
    top: var(--stack-top, 28px);        /* punto in cui la card “si ferma” */
    z-index: auto;                      /* l’ordine lo setta lo JS */
    margin: 0 auto;                     /* centra la card */
    transform: none !important;         /* evita conflitti con parallax desktop */
  }

  /* Gap controllato per-card: lo JS attiva l’overlap in due stadi */
  .alia-mode-card + .alia-mode-card {
    /* overlap applicato solo se --apply-overlap = 1 (per-card) */
    margin-top: calc(
      var(--stack-gap, 48px)
      - (var(--stack-overlap, 0px) * var(--apply-overlap, 0) * var(--overlap-factor, 0))
    );
  }

  /* La prima card non ha mai margine superiore aggiuntivo */
  .alia-mode-card:first-of-type { margin-top: 0 !important; }

  /* la pill rimane centrata sulla card in cima allo stack */
  .mode-smart .alia-mode-pill,
  .alia-modes-grid .alia-mode-card:first-of-type .alia-mode-pill {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    right: auto;
  }

  /* QUOTE ruotata */
  /* [MOBILE] Rotation-box e puzzle — mantiene effetto anche su mobile */
  .rotation-box-section { padding: 60px 16px; }
  .rotation-box { min-width: 0; max-width: 92vw; padding: 28px 20px; }
  .puzzle-container { width: 92vw; max-width: 92vw; }
  .puzzle-quote { font-size: 16px; padding: 40px 30px; }

  /* CAROUSEL */
  .alia-carousel-section { padding: 24px 0 0; }
  .alia-carousel { width: 95%; overflow: hidden; }
  .carousel-track { gap: 16px; padding: 0 16px; }
  .carousel-img { width: calc(100vw - 32px); aspect-ratio: 3 / 2; height: auto; border-radius: 12px; min-width: 300px; }

  /* AVATAR */
  .avatar-section { padding: 24px 0 0; }
  .avatar-section-container { flex-direction: column; gap: 32px; padding: 0 16px; }
  .avatar-section-img-wrapper { width: 100%; }
  .avatar-section-main-png { width: 70%; margin-left:20%; }
  .avatar-section-text-col { padding: 0 0; width:50%; }
  .avatar-section-text { font-size: 24px ; line-height: 1.15; align-items:left; }
  .avatar-section-text br { display:none ; }
  /* CTA */
  .alia-cta-section { padding: 36px 0 0; }
  .alia-cta-title   { font-size: var(--section-title-size); margin-bottom: 16px; text-align:center; }
  .alia-cta-buttons { flex-direction: column; gap: 16px; }
}

/* ===== ALIA (769–1023): badge "Più popolare" centrato sulla mode-smart ===== */
@media (min-width: 769px) and (max-width: 1023px) {
  .alia-mode-card { position: relative !important; overflow: visible !important; margin-top: 32px; }
  .alia-mode-text-title, .alia-mode-text-desc { width: 100%; text-align: center; }
  .mode-smart .alia-mode-pill { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); right: auto; z-index: 5; }
}

/* ===== ALIA (769–1023): griglia “funziona” a 2 colonne ===== */
@media (min-width:769px) and (max-width:1023px){
  .alia-funziona-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:160px;
    gap:20px;
    padding:0 var(--space-sm);
    grid-auto-flow:dense;
  }

  .funziona-text-box{ grid-column:1 / -1; text-align:center; padding:var(--space-lg) 0; }

  .alia-funziona-grid .funziona-item{
    grid-column:auto; grid-row:auto;
    height:100%;
    margin:0; padding:20px 22px; border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    box-sizing:border-box;
  }
  .alia-funziona-grid .funziona-item img{ width:44px; height:44px; margin:0 0 10px 0; }
  .alia-funziona-grid .funziona-item span{ font-size:calc(var(--body-text-size)*1.06); line-height:1.45; }

  /* Span specifici per tablet */
  /* TABLET: 1° tile su due colonne ma alto come gli altri (1 riga) */
  .alia-funziona-grid > .funziona-item:nth-child(2){
    grid-column: 1 / -1;
    grid-row: span 1;
    height: 100%;
    min-height: unset;   /* rimuove l’altezza extra */
  }
  .alia-funziona-grid > .funziona-item:nth-child(7){
    grid-row: span 2 !important;
  }
}

/* ========== ORBITA CON CARD PRODOTTI ========== */
.alia-orbit-section {
  padding: var(--space-4xl) 0;
  overflow: hidden;
}

.alia-orbit-container {
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: 540px;
  margin: 0 auto;
}

.alia-orbit-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.alia-orbit-logo {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.alia-orbit-logo img {
  width: 85%;
  height: 85%;
  object-fit: contain;
}

.alia-orbit-cards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 20px;
  z-index: 10;
}

.alia-product-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px;
  width: 180px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.alia-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,165,207,0.2);
}

.alia-product-card.featured {
  border: 2px solid #00A5CF;
}

.alia-product-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #00A5CF, #6E46AE);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.alia-product-name {
  font-size: 18px;
  font-weight: 700;
  color: #063046;
  margin-bottom: 8px;
  margin-top: 8px;
}

.alia-product-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 12px;
}

.alia-product-price {
  font-size: 16px;
  font-weight: 700;
  color: #00A5CF;
}

@media (max-width: 900px) {
  .alia-orbit-container {
    height: auto;
    min-height: 500px;
    padding: 60px 20px;
  }

  .alia-orbit-path {
    display: none;
  }

  .alia-orbit-logo {
    display: none;
  }

  .alia-orbit-cards {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    align-items: center;
  }

  .alia-product-card {
    width: 280px;
  }
}

/* =====================================================================
   NEWSTYLE.CSS - FILE CSS PER TUTTE LE PERSONALIZZAZIONI
   =====================================================================

   REGOLA IMPORTANTE:
   - Questo file contiene TUTTE le modifiche CSS personalizzate
   - NON modificare MAI style.css (file originale da preservare)
   - Questo file viene caricato DOPO style.css per fare override

   STRUTTURA DEL FILE:
   1. Font e importazioni
   2. Menu navigazione (tutte le pagine)
   3. Pagina /prezzi
   4. Pagina /contatti
   5. Pagina /chi-siamo
   6. Pagina /jobbir
   7. Distanza uniforme dall'header (60px per tutte le pagine)
   8. Pagina /tuolavoro
   9. Pagina /enterprise
   10. Pagina index (homepage istituzionale)

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

/* =====================================================================
   1. FONT - Importazione Satoshi per tutto il sito
   ===================================================================== */

/* =====================================================================
   2. MENU NAVIGAZIONE - Dropdown "Soluzioni" (TUTTE LE PAGINE)
   =====================================================================
   Il menu dropdown nella navbar che mostra Alia, Jobbir e TuoLavoro
   ===================================================================== */

/* [NAVBAR] Altezza fissa per coerenza tra loggato e sloggato */
.navbar-top {
    min-height: 100px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.navbar-icons {
    min-height: 70px !important;
    align-items: center !important;
}

/* [NAVBAR] Allinea "Contatti" con "Accedi" */
.navbar-categories {
    padding-right: 10px !important;
}

/* [NAVBAR] Mostra il menu dropdown al passaggio del mouse */
.nav-dropdown:hover .nav-dropdown-menu {
    display: block !important;
}

/* [NAVBAR] Effetto hover sui link del menu dropdown */
.nav-dropdown-menu li a:hover {
    background: #f5f9fc !important;
}

/* [NAVBAR] Rimuove i pallini dalle voci del menu dropdown */
.nav-dropdown-menu li {
    list-style: none;
}

/* =====================================================================
   3. PAGINA /PREZZI - Pacchetti Alia (Smart, Pro, Business)
   =====================================================================
   URL: impiegando.com/prezzi
   Contenuto: tre card con i pacchetti e i prezzi
   ===================================================================== */

/* [PREZZI] Font Satoshi per tutta la pagina */
.prezzi-page,
.prezzi-page * {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* [PREZZI] Sezione principale con le card - layout verticale centrato
   - padding-top/margin-top: 0 = la distanza dalla navbar è gestita SOLO dal wrapper .prezzi-page (regola globale)
   - flex-direction: column = card impilate verticalmente
   - align-items: center = card centrate */
.prezzi-page .alia-solution-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: auto !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* [PREZZI] Header con titolo "La soluzione per te" - centrato */
.prezzi-page .prezzi-header {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* [PREZZI] Titolo principale "La soluzione per te" - centrato */
.prezzi-page .alia-solution-title {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* [PREZZI] Descrizione sotto il titolo - centrata */
.prezzi-page .alia-solution-desc {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* [TUOLAVORO] Sezione "Più di un semplice portale" - fix visibilità mobile
   L'animazione is-inview non scatta su mobile, quindi forziamo la visibilità */
@media (max-width: 768px) {
    .tuolavoro-page .enterprise-section-pack .enterprise-pack-card {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* [PREZZI] Tooltip "Portali inclusi" - si apre verso l'ALTO invece che verso il basso
   Originale style.css: top:50%, left:calc(100%+10px) = apre a destra/sotto
   Override: bottom:calc(100%+8px) = apre sopra la voce, centrato orizzontalmente */
.prezzi-page .has-tooltip .info-card {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.98) !important;
}

/* [PREZZI] Tooltip visibile al hover (desktop) - mantiene posizione verso l'alto */
.prezzi-page .has-tooltip:hover .info-card,
.prezzi-page .has-tooltip .info-wrap:hover .info-card {
    transform: translateX(-50%) scale(1) !important;
}

/* [PREZZI] Tooltip mobile: overlay esterno al body (evita problemi con transform dei genitori)
   Il div #prezzi-tooltip-mobile viene creato da JS e appeso al <body> */
#prezzi-tooltip-mobile {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(85vw, 340px);
    min-width: 260px;
    max-width: 340px;
    z-index: 10000;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    font-family: 'Satoshi', sans-serif;
}
#prezzi-tooltip-mobile.active {
    display: block;
}
#prezzi-tooltip-mobile .info-card-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #063046;
}
#prezzi-tooltip-mobile .info-card-body {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    color: #333;
}

/* [PREZZI] Sfondo scuro dietro il tooltip mobile */
#prezzi-tooltip-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    z-index: 9999;
}
#prezzi-tooltip-overlay.active {
    display: block;
}

/* =====================================================================
   4. PAGINA /CONTATTI - Form contatti unificato
   =====================================================================
   URL: impiegando.com/contatti
   Contenuto: form con nome, email, telefono, azienda, settore, messaggio
   ===================================================================== */

/* [CONTATTI] Font Satoshi per tutta la pagina */
.contatti-page,
.contatti-page * {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* [CONTATTI] Layout pagina - altezza minima */
.contatti-page {
    min-height: 80vh;
}

/* [CONTATTI] Sezione form - centrata, larghezza come nel design originale (~60% schermo)
   Padding laterale 32px e inferiore 80px per respiro */
.contatti-page .enterprise-contact {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 32px 80px;
}

/* [CONTATTI] Titolo "Contattaci" - stile uniforme con le altre pagine */
.contatti-page .enterprise-contact-title {
    font-size: var(--section-title-size, 36px);
    font-weight: var(--section-title-weight, 700);
    color: #063046;
    margin-bottom: 48px;
    text-align: center;
    letter-spacing: var(--section-title-spacing, -0.02em);
}

/* [CONTATTI] Contenitore interno del form */
.contatti-page .form-enterprise {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* [CONTATTI] Riga del form - due campi affiancati con gap ampio come l'originale */
.contatti-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 36px;
}

/* [CONTATTI] Gruppo singolo campo */
.contatti-page .form-group {
    position: relative;
}

/* [CONTATTI] Campo a larghezza piena (textarea) */
.contatti-page .form-group.form-fullwidth {
    grid-column: 1 / -1;
}

/* [CONTATTI] Stile input e select - linea inferiore, sfondo trasparente */
.contatti-page .form-group input,
.contatti-page .form-group select {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #125978;
    background: transparent;
    font-size: 16px;
    color: #063046;
    outline: none;
    transition: border-color 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* [CONTATTI] Select con freccia personalizzata */
.contatti-page .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23125978' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 24px;
    cursor: pointer;
}

/* [CONTATTI] Stile textarea - linea inferiore, altezza come l'originale */
.contatti-page .form-group textarea {
    width: 100%;
    min-height: 60px;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #125978;
    background: transparent;
    font-size: 16px;
    color: #063046;
    outline: none;
    resize: vertical;
    transition: border-color 0.3s ease;
}

/* [CONTATTI] Placeholder — colore grigio chiaro */
.contatti-page .form-group input::placeholder,
.contatti-page .form-group textarea::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

/* [CONTATTI] Select opzione disabilitata (placeholder) */
.contatti-page .form-group select option[disabled] {
    color: #9CA3AF;
}

/* [CONTATTI] Focus — linea inferiore azzurra */
.contatti-page .form-group input:focus,
.contatti-page .form-group select:focus,
.contatti-page .form-group textarea:focus {
    border-bottom-color: #00A5CF;
}

/* [CONTATTI] Bottone invio - azzurro pieno, bordi arrotondati, larghezza ~80% centrato */
.contatti-page .enterprise-contact-btn {
    display: block;
    width: 80%;
    max-width: 520px;
    margin: 32px auto 0;
    background: #00A5CF;
    color: white;
    border: none;
    padding: 18px 48px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* [CONTATTI] Bottone invio hover — sfondo più scuro, leggero sollevamento */
.contatti-page .enterprise-contact-btn:hover {
    background: #0090B5;
    transform: translateY(-2px);
}

/* [CONTATTI MOBILE] Form a colonna singola su schermi piccoli */
@media (max-width: 768px) {
    .contatti-page .enterprise-contact {
        padding: 0 24px 60px;
    }

    .contatti-page .enterprise-contact-title {
        font-size: 28px;
        text-align: center;
        margin-bottom: 32px;
    }

    .contatti-page .form-enterprise {
        max-width: 100%;
    }

    .contatti-page .form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    .contatti-page .form-group {
        margin-bottom: 24px;
    }

    .contatti-page .form-group input,
    .contatti-page .form-group select {
        font-size: 16px;
        padding: 12px 0;
    }

    .contatti-page .form-group textarea {
        font-size: 16px;
        padding: 12px 0;
        min-height: 90px;
    }

    .contatti-page .enterprise-contact-btn {
        width: 100%;
        max-width: 320px;
        margin: 12px auto 0;
        display: block;
        font-size: 16px;
        padding: 16px 32px;
    }
}

/* =====================================================================
   5. PAGINA /CHI-SIAMO - Chi siamo con video team
   =====================================================================
   URL: impiegando.com/chi-siamo
   Contenuto: video del team, storia aziendale, form contatto
   ===================================================================== */

/* [CHI-SIAMO] Sfondo gestito dalla regola globale body */

/* [CHI-SIAMO] Gradient rimossi - sfondo gestito dalla regola globale body */

/* [CHI-SIAMO] Padding azzerato su tutte le sezioni TRANNE la hero
   La spaziatura tra blocchi è gestita SOLO dal margin-bottom globale (120px / 80px)
   La hero usa la regola uniforme [TUTTE] per la distanza dalla navbar */
.chi-siamo-page section:not(.hero-section-chi-siamo) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* [CHI-SIAMO] Intro row: card con testo a sinistra, immagine Serena a destra */
.chi-siamo-intro-row {
    display: flex;
    align-items: center;
    gap: 50px;
    width: 90%;
    max-width: 1200px;
    margin: 40px auto 0;
    background: linear-gradient(135deg, #f4fbff 0%, #e4f4fb 50%, #dceef8 100%);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 8px 40px rgba(6, 48, 70, 0.12), 0 2px 12px rgba(0, 165, 207, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* [CHI-SIAMO] Animazione hover sulla card intro */
.chi-siamo-intro-row:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 56px rgba(6, 48, 70, 0.18), 0 4px 20px rgba(0, 165, 207, 0.12);
}

/* [CHI-SIAMO] Colonna testo intro */
.chi-siamo-intro-text {
    flex: 1;
    min-width: 0;
}

/* [CHI-SIAMO] Titolo dentro la card: allineamento a sinistra */
.chi-siamo-intro-text .hero-title {
    text-align: left !important;
}

/* [CHI-SIAMO] Sottotitolo dentro la card: allineamento a sinistra */
.chi-siamo-intro-text .hero-subtitle {
    text-align: left !important;
    max-width: 100% !important;
}

/* [CHI-SIAMO] Colonna immagine intro */
.chi-siamo-intro-image {
    flex: 0 0 auto;
    width: 300px;
}

/* [CHI-SIAMO] Immagine Serena arrotondata */
.chi-siamo-intro-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

/* [CHI-SIAMO] Responsive: sotto 768px colonna singola, immagine sopra */
@media (max-width: 768px) {
    .chi-siamo-intro-row {
        flex-direction: column-reverse;
        gap: 24px;
        margin-top: 24px;
        padding: 30px 24px;
    }

    .chi-siamo-intro-image {
        width: 200px;
    }
}

/* [CHI-SIAMO] Globo e team scuri: nessuno stacco tra le due sezioni */
.chi-siamo-page .inst-globe-section {
    margin-bottom: 0 !important;
}

/* [CHI-SIAMO] Team section: nessuno sfondo scuro */
.chi-siamo-page .team-section {
    margin-bottom: 0 !important;
    padding-bottom: 80px !important;
    background: transparent !important;
}

/* [CHI-SIAMO] ATS comparison: z-index basso per non coprire team section */
.chi-siamo-page .ats-comparison-section {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
}

/* [CHI-SIAMO] FAQ (ultima sezione): margin-bottom 0 prima del footer */
.chi-siamo-page .faq-section {
    margin-bottom: 0 !important;
}


/* [CHI-SIAMO] Forza stili navbar identici alle altre pagine
   chi-siamo.css importa style.css che ha stili navbar diversi (sfondo scuro, padding diverso)
   Questi override assicurano che la navbar sia identica alle altre pagine */
body.page-chi-siamo .navbar-amazon {
    max-width: 100% !important;
    width: 100% !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 100%) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
}

body.page-chi-siamo .navbar-top {
    padding: 12px 40px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    gap: 24px !important;
}

/* =====================================================================
   LOGO HEADER PER PAGINE PRODOTTO (Alia, Jobbir, TuoLavoro)
   =====================================================================
   Come la index che parte con il logo Impiegando, ogni pagina prodotto
   inizia con il proprio logo centrato
   ===================================================================== */

/* [TUTTE] Contenitore logo - centrato in alto con distanza uniforme */
.page-logo-header {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 40px;
    padding-top: 20px;
    width: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* [TUTTE] Logo prodotto - dimensione uniforme */
.page-hero-logo {
    height: 120px;
    width: auto;
    max-width: 400px;
    object-fit: contain;
}

/* [TUTTE] Distanza uniforme dalla navbar (60px) su tutte le pagine e sezioni hero.
   Sfondo chiaro #EDFBFF uniforme. Specificità alta per vincere sui reset per-pagina */
.alia-hero,
.impiegando-home .hero-section,
.chi-siamo-page .hero-section-chi-siamo,
.impiegando-institutional .inst-hero-new,
.tuolavoro-page .enterprise-hero,
.prezzi-page,
.contatti-page {
    padding-top: 60px !important;
    margin-top: 0 !important;
}

/* [MOBILE] Logo più piccolo su schermi piccoli */
@media (max-width: 768px) {
    .page-hero-logo {
        height: 80px;
        max-width: 280px;
    }
}

/* =====================================================================
   6. PAGINA /JOBBIR - Job board per pubblicare annunci
   =====================================================================
   URL: impiegando.com/jobbir
   Contenuto: hero con orbita loghi, sezione città, cosa aspettarsi,
              non è magia, FAQ
   Tutte le sezioni usano lo stesso sistema di spaziatura: 120px desktop,
   80px mobile (margin-bottom). Il padding interno viene resettato per
   evitare che si sommi allo spazio tra sezioni.
   Font uniformi: tutti i titoli di sezione usano 40px weight 430 Satoshi
   (come le altre pagine del sito).
   ===================================================================== */

/* --- 6.1 HERO SECTION --- */

/* [JOBBIR] Sfondo ereditato dal body */
.impiegando-home .hero-gradient-bg {
    background: transparent !important;
}

/* [JOBBIR] Hero section - nessun padding-top aggiuntivo dall'header
   Originale style.css: padding-top calcolato dal --space-* → rimosso */
.impiegando-home .hero-section {
    padding-top: 0px !important;
}

/* [JOBBIR] Contenuto hero (testo + social proof) alzato dentro l'orbita
   Originale style.css: top:50% che lo centra troppo in basso → portato a 42%
   per posizionarlo sopra il centro dell'ellisse */
.impiegando-home .hero-content {
    top: 42% !important;
}

/* [JOBBIR] Animazione dedicata per il contenuto hero.
   NON usa il sistema slide-in perché quello ha due motori (CSS + JS)
   che si sovrappongono causando doppio movimento (su poi giù).
   Questa è un'animazione CSS pura: un unico passaggio dal basso verso l'alto. */
@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* [JOBBIR] Wrapper interno hero - layout centrato.
   Prende tutta la larghezza del contenitore e centra il contenuto. */
.impiegando-home .hero-inner {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* [JOBBIR] Social proof "+235 clienti" - appare per primo (delay 0.1s)
   animation-fill-mode: both → applica opacity:0 PRIMA del delay (stato iniziale)
   e mantiene opacity:1 DOPO l'animazione (stato finale).
   Non serve una regola opacity:0 separata (che con !important bloccherebbe l'animazione). */
.impiegando-home .social-proof.hero-animated {
    animation: heroFadeIn 0.9s ease-out 0.1s both !important;
}

/* [JOBBIR] Titolo hero "Pubblica il tuo annuncio" - appare per secondo (delay 0.28s)
   Stagger di 180ms rispetto al social proof, come il comportamento originale */
.impiegando-home .hero-title.hero-animated {
    animation: heroFadeIn 0.9s ease-out 0.28s both !important;
}

/* [JOBBIR] Logo Jobbir sopra l'orbita - posizione assoluta centrata.
   Il logo è posizionato in cima alla hero, sopra l'ellisse.
   Sfondo trasparente per rimuovere il riquadro bianco di style.css.
   Usa animazione heroFadeIn come il contenuto hero (non slide-in che causa doppio movimento). */
.impiegando-home .page-logo-header {
    animation: heroFadeIn 0.9s ease-out forwards !important;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 100;
    background: transparent !important;
    background-color: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* [JOBBIR] Logo Jobbir nell'orbita - effetto pianeta 3D con luce e ombra */
.jobbir-orbit-logo {
    width: 170px !important;
    height: 170px !important;
    background: radial-gradient(
        circle at 35% 35%,
        #ffffff 0%,
        #e8f9ff 30%,
        #b0e8f9 55%,
        #5cc8e0 75%,
        #00A5CF 100%
    ) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow:
        inset -8px -8px 20px rgba(0, 80, 120, 0.35),
        inset 5px 5px 15px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(0, 165, 207, 0.5),
        0 0 40px rgba(0, 165, 207, 0.25),
        0 8px 25px rgba(0, 0, 0, 0.15) !important;
    z-index: 10 !important;
    animation: jobbirPlanetGlow 3s ease-in-out infinite !important;
}

/* [JOBBIR] Animazione pianeta 3D - bagliore pulsante e leggera rotazione */
@keyframes jobbirPlanetGlow {
    0%, 100% {
        box-shadow:
            inset -8px -8px 20px rgba(0, 80, 120, 0.35),
            inset 5px 5px 15px rgba(255, 255, 255, 0.6),
            0 0 20px rgba(0, 165, 207, 0.5),
            0 0 40px rgba(0, 165, 207, 0.25),
            0 8px 25px rgba(0, 0, 0, 0.15);
        transform: scale(1);
    }
    50% {
        box-shadow:
            inset -10px -10px 25px rgba(0, 80, 120, 0.4),
            inset 6px 6px 18px rgba(255, 255, 255, 0.7),
            0 0 30px rgba(0, 165, 207, 0.7),
            0 0 55px rgba(93, 217, 240, 0.4),
            0 0 80px rgba(0, 165, 207, 0.2),
            0 10px 30px rgba(0, 0, 0, 0.18);
        transform: scale(1.06);
    }
}

.jobbir-orbit-logo img {
    width: 80% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* [JOBBIR] Logo inline nel titolo hero - grande con effetto stella luminosa */
.hero-title-logo {
    height: 2.8em !important;
    width: auto !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
    display: inline !important;
    animation: jobbirStarShine 3s ease-in-out infinite !important;
}

/* [JOBBIR] Animazione stella luminosa - bagliore che si accende e spegne */
@keyframes jobbirStarShine {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(0, 165, 207, 0.3));
        transform: scale(1);
    }
    25% {
        filter:
            drop-shadow(0 0 15px rgba(0, 165, 207, 0.8))
            drop-shadow(0 0 30px rgba(93, 217, 240, 0.5))
            drop-shadow(0 0 50px rgba(0, 165, 207, 0.3));
        transform: scale(1.05);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(0, 165, 207, 0.4));
        transform: scale(1);
    }
    75% {
        filter:
            drop-shadow(0 0 20px rgba(110, 70, 174, 0.7))
            drop-shadow(0 0 40px rgba(0, 165, 207, 0.5))
            drop-shadow(0 0 60px rgba(93, 217, 240, 0.3));
        transform: scale(1.07);
    }
}

/* [JOBBIR MOBILE] Logo nel titolo ridotto su schermi piccoli */
@media (max-width: 768px) {
    .hero-title-logo {
        height: 55px !important;
    }
}

/* --- 6.2 SPAZIATURA UNIFORME TRA SEZIONI --- */

/* [JOBBIR] SPAZIATURA UNIFORME: padding verticale azzerato su tutte le sezioni
   La spaziatura tra blocchi è gestita SOLO dal margin-bottom globale (120px / 80px)
   margin-top: 0 per annullare valori negativi di style.css */
.impiegando-home section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* [JOBBIR] Hero: altezza ridotta per non sprecare spazio */
.impiegando-home .hero-section {
    height: 100vh !important;
}

/* [JOBBIR MOBILE] Hero compatta — riduce altezza e riposiziona contenuto */
@media (max-width: 768px) {
    .impiegando-home .hero-section {
        height: auto !important;
        min-height: 520px !important;
        padding-top: 100px !important;
        padding-bottom: 60px !important;
        flex-direction: column !important;
    }

    /* [JOBBIR MOBILE] Sfondo gradiente — copre tutta la hero su mobile */
    .impiegando-home .hero-gradient-bg {
        height: 100% !important;
    }

    /* [JOBBIR MOBILE] Orbita nascosta — tracciato e loghi nascosti, spreca spazio */
    .impiegando-home .orbit-path,
    .impiegando-home .orbit-logo {
        display: none !important;
    }

    /* [JOBBIR MOBILE] Contenitore orbita — flusso normale per contenere il bottone */
    .impiegando-home .orbit-logos-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* [JOBBIR MOBILE] Hero contenuto — centrato senza posizionamento assoluto */
    .impiegando-home .hero-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* [JOBBIR MOBILE] Titolo hero più leggibile */
    .impiegando-home .hero-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    /* [JOBBIR MOBILE] Logo Jobbir nel titolo — più grande e visibile */
    .impiegando-home .hero-title-logo {
        height: 80px !important;
        margin-left: 6px !important;
    }

    /* [JOBBIR MOBILE] Pulsante "Scopri i prezzi" — posizionato sotto il titolo */
    .impiegando-home .orbit-center-btn {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        display: inline-block !important;
        margin: 12px auto 0 !important;
    }

    /* [JOBBIR MOBILE] Pulsante hover — niente spostamento su touch */
    .impiegando-home .orbit-center-btn:hover,
    .impiegando-home .orbit-center-btn:active {
        transform: none !important;
    }

    /* [JOBBIR MOBILE] Contenitore hero inner — centro con flex */
    .impiegando-home .hero-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* [JOBBIR] Magic section: altezza minima rimossa per eliminare spazio vuoto sotto i contenuti */
.impiegando-home .magic-section {
    min-height: auto !important;
}

/* [INDEX] Eccezione CTA: ripristina padding interno (sfondo gradient visibile) */
.impiegando-home .inst-cta-section {
    padding: 60px 40px !important;
}

/* [INDEX] Ultima sezione (CTA): margin-bottom 0 prima del footer */
.impiegando-home section:last-child {
    margin-bottom: 0 !important;
}

/* --- 6.4 SEZIONE CITTÀ - HEADER E GRIGLIA --- */

/* [JOBBIR] Header sezione città - centrato con margine inferiore interno
   Originale style.css (riga 4913): padding 60px 20px 40px con max-width 700px
   Corretto: centrato con max-width 1100px e margine interno 40px sotto il titolo */
.impiegando-home .cities-section-header {
    text-align: center !important;
    max-width: 1100px !important;
    margin: 0 auto 40px auto !important;
    padding: 0 20px !important;
}

/* [JOBBIR] Titolo sezione città - uniformato a 40px/430
   Originale style.css (riga 4921): 36px font-weight 700 → era diverso
   dagli altri titoli (expect 40px/430, magic 40px/430, faq 40px/450).
   Ora uniformato: 40px, weight 430, come tutte le sezioni del sito */
.impiegando-home .cities-section-header .map-title {
    font-size: 40px !important;
    font-weight: 430 !important;
    color: #063046 !important;
    text-align: center !important;
    letter-spacing: -0.5px !important;
}

/* [JOBBIR] Sottotitolo sezione città - stile corpo testo uniforme */
.impiegando-home .cities-section-header .map-subtitle {
    font-size: 18px !important;
    color: #666 !important;
    text-align: center !important;
    margin-bottom: 12px !important;
}

/* [JOBBIR] Legenda dati sezione città - testo piccolo centrato */
.impiegando-home .cities-section-header .map-legend {
    font-size: 14px !important;
    color: #999 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* [JOBBIR] Griglia città - layout e padding interno
   Rimosso padding-bottom 60px dagli stili inline che si sommava
   al margin-bottom 120px della sezione → ora padding-bottom 0 */
.impiegando-home .cities-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* --- 6.5 TITOLI SEZIONI - FONT UNIFORMI --- */

/* [JOBBIR] Titolo "Cosa aspettarsi" - uniformato a 40px/430
   Originale style.css (riga 1544): già 40px/430 → confermato */
.impiegando-home .expect-title {
    font-size: 40px !important;
    font-weight: 430 !important;
    color: #063046 !important;
}

/* [JOBBIR] Titolo "Non è magia, è Impiegando" - uniformato a 40px/430
   Originale style.css (riga 1846): già 40px/430 → confermato.
   Resettato margin-top/bottom (52px in style.css) per usare solo margin-bottom
   come spazio interno prima dei box */
.impiegando-home .magic-title {
    font-size: 40px !important;
    font-weight: 430 !important;
    color: #143547 !important;
    margin-top: 0 !important;
    margin-bottom: 52px !important;
}

/* [JOBBIR] Titolo FAQ — ora identico alla homepage, nessun override necessario */

/* --- 6.6 RESPONSIVE MOBILE (max-width: 768px) --- */

@media (max-width: 768px) {
    .impiegando-home section:last-child {
        margin-bottom: 0 !important;
    }

    /* [JOBBIR MOBILE] "Cosa aspettarsi": resetta padding mobile di style.css (22px) */
    .impiegando-home .expect-section {
        padding-bottom: 0 !important;
    }

    /* [JOBBIR MOBILE] "Non è magia": resetta padding mobile di style.css */
    .impiegando-home .magic-section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* [JOBBIR MOBILE] Titoli sezione ridotti a 32px su mobile
       Uniformato: tutti i titoli hanno la stessa dimensione su mobile */
    .impiegando-home .cities-section-header .map-title,
    .impiegando-home .expect-title,
    .impiegando-home .magic-title {
        font-size: 32px !important;
    }

    /* [JOBBIR MOBILE] Griglia città: 2 colonne su tablet, 1 su telefono */
    .impiegando-home .cities-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* [JOBBIR MOBILE] Header città ridotto */
    .impiegando-home .cities-section-header {
        margin-bottom: 24px !important;
    }
}

/* [JOBBIR MOBILE PICCOLO] Griglia città a colonna singola sotto 576px
   Card con padding ridotto e titolo città più piccolo */
@media (max-width: 576px) {
    .impiegando-home .cities-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 16px !important;
    }

    /* [JOBBIR MOBILE PICCOLO] Card città: padding ridotto da 28px a 20px */
    .impiegando-home .city-stat-card {
        padding: 20px !important;
    }

    /* [JOBBIR MOBILE PICCOLO] Nome città nelle card: da 22px a 18px */
    .impiegando-home .city-stat-card h3 {
        font-size: 18px !important;
    }
}

/* [JOBBIR] Pulsante nell'orbita che linka a /prezzi
   Posizionato nella parte bassa dell'ellisse, sotto il titolo hero,
   per non sovrapporsi al testo (prima era top:50% e copriva il titolo) */
.orbit-center-btn {
    position: absolute !important;
    bottom: 38% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    background: linear-gradient(135deg, #00A5CF 0%, #6E46AE 100%) !important;
    color: #ffffff !important;
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    padding: 16px 40px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 165, 207, 0.35) !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* [JOBBIR] Pulsante orbita hover - colori leggermente più scuri e scala 1.05
   Il transform mantiene translateX(-50%) per non spostare il centraggio */
.orbit-center-btn:hover {
    background: linear-gradient(135deg, #0090b5 0%, #5a3a96 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 40px rgba(0, 165, 207, 0.5) !important;
    transform: translateX(-50%) scale(1.05) !important;
    text-decoration: none !important;
}

/* [JOBBIR MOBILE] Pulsante orbita: posizione e dimensione adattate per schermi piccoli */
@media (max-width: 768px) {
    .orbit-center-btn {
        font-size: 15px !important;
        padding: 12px 28px !important;
        bottom: 22% !important;
    }
}

/* =====================================================================
   7. PAGINA /TUOLAVORO - Portale del lavoro
   =====================================================================
   URL: impiegando.com/tuolavoro
   Contenuto: portale per aziende e candidati
   ===================================================================== */

/* [TUOLAVORO] Spaziatura sezioni uniforme: margin-bottom 120px (desktop) / 80px (mobile).
   Specificità alta per vincere sulla regola enterprise (.enterprise-section-pack.alia-section-spacing)
   che aggiunge padding 80px e azzera margin-bottom. Su TuoLavoro usiamo SOLO margin-bottom */
.tuolavoro-page section {
    margin-bottom: 120px !important;
}

.tuolavoro-page section.enterprise-section-pack.alia-section-spacing,
.tuolavoro-page section.enterprise-features.alia-section-spacing,
.tuolavoro-page section.faq-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 120px !important;
}

.tuolavoro-page section:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .tuolavoro-page section {
        margin-bottom: 80px !important;
    }

    .tuolavoro-page section.enterprise-section-pack.alia-section-spacing,
    .tuolavoro-page section.enterprise-features.alia-section-spacing,
    .tuolavoro-page section.faq-section {
        margin-bottom: 80px !important;
    }

    .tuolavoro-page section:last-child {
        margin-bottom: 0 !important;
    }
}

/* =====================================================================
   TUOLAVORO - STILI COMPLETI HERO, CARD, FEATURES
   Layout a 2 colonne (testo + card), griglia features, pulsante CTA
   ===================================================================== */

/* [TUOLAVORO] Hero: sfondo chiaro, padding laterale.
   padding-top 20px come Enterprise. padding-bottom 0 perché il margin-bottom
   globale (120px) gestisce già la distanza dalla sezione successiva */
.tuolavoro-page .enterprise-hero {
    padding-top: 20px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 0 !important;
    position: relative;
}

/* [TUOLAVORO] Contenitore hero: 2 colonne affiancate */
.tuolavoro-page .enterprise-hero-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

/* [TUOLAVORO] Colonna sinistra: testo */
.tuolavoro-page .enterprise-hero-left {
    flex: 1.2;
    min-width: 0;
}

/* [TUOLAVORO] Colonna destra: card */
.tuolavoro-page .enterprise-hero-right {
    flex: 0.8;
    min-width: 0;
}

/* [TUOLAVORO] Titolo hero: grande, scuro, bold */
.tuolavoro-page .enterprise-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #063046;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* [TUOLAVORO] Parola evidenziata nel titolo con gradiente */
.tuolavoro-page .enterprise-gradient {
    background: linear-gradient(135deg, #00A5CF, #6E46AE);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* [TUOLAVORO] Descrizione sotto il titolo */
.tuolavoro-page .enterprise-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #3a5a6e;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* [TUOLAVORO] Pulsante CTA "Scopri come funziona" */
.tuolavoro-page .enterprise-btn-contact {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, #00A5CF, #6E46AE);
    color: #ffffff !important;
    font-family: 'Satoshi', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 165, 207, 0.3);
}

.tuolavoro-page .enterprise-btn-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 165, 207, 0.45);
}

/* [TUOLAVORO] Card hero: sfondo bianco, bordi arrotondati, ombra */
.tuolavoro-page .enterprise-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 36px 32px;
    box-shadow: 0 8px 40px rgba(6, 48, 70, 0.08);
}

/* [TUOLAVORO] Titolo card (nome prodotto) */
.tuolavoro-page .enterprise-card-price {
    margin-bottom: 16px;
}

.tuolavoro-page .enterprise-card-price-gradient {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00A5CF, #6E46AE);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* [TUOLAVORO] Descrizione card */
.tuolavoro-page .enterprise-card-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: #3a5a6e;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* [TUOLAVORO] Lista funzionalità nella card */
.tuolavoro-page .enterprise-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tuolavoro-page .enterprise-card-list li {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.92rem;
    color: #063046;
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    line-height: 1.5;
}

/* [TUOLAVORO] Icona check prima di ogni voce lista */
.tuolavoro-page .enterprise-card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #00A5CF;
    font-weight: 700;
}

/* [TUOLAVORO] Tooltip info nella card */
.tuolavoro-page .info-wrap {
    position: relative;
    display: inline-block;
    margin-left: 6px;
}

.tuolavoro-page .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #00A5CF;
    color: #00A5CF;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.tuolavoro-page .info-card {
    display: none;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #063046;
    color: #ffffff;
    border-radius: 12px;
    padding: 16px 20px;
    width: 260px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.tuolavoro-page .info-wrap:hover .info-card {
    display: block;
}

.tuolavoro-page .info-card-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.tuolavoro-page .info-card-body {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.85;
}

/* =====================================================================
   FEATURE BOX GLOBALI — Bottoni card con hover identici su tutte le pagine
   Utilizzato su: /tuolavoro (enterprise-features-grid, 5 colonne)
                  /enterprise (alia-unified-grid, 6 colonne)
   ===================================================================== */

/* [GLOBALE] Singolo bottone feature: card bianca con bordo sottile, hover evidenziato */
.feature-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 24px 16px;
    background: #ffffff;
    border-radius: 16px;
    border: 1.5px solid transparent;
    box-shadow: 0 2px 12px rgba(6, 48, 70, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    cursor: default;
    min-height: 130px;
    gap: 12px;
}

/* [GLOBALE] Hover: bordo azzurro, ombra più forte, leggero sollevamento */
.feature-box:hover {
    transform: translateY(-4px);
    border-color: #00A5CF;
    box-shadow: 0 8px 28px rgba(0, 165, 207, 0.18);
    background: #f0fbff;
}

/* [GLOBALE] Icona feature: dimensione uniforme, colore azzurro via filtro CSS */
.feature-box .feature-icon {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    margin: 0 auto;
    filter: brightness(0) saturate(100%) invert(52%) sepia(85%) saturate(1500%) hue-rotate(162deg) brightness(96%) contrast(101%);
    transition: transform 0.25s ease;
}

/* [GLOBALE] Icona ingrandita al hover del bottone */
.feature-box:hover .feature-icon {
    transform: scale(1.1);
}

/* [GLOBALE] Etichetta feature: testo scuro, compatto */
.feature-box .feature-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #063046;
    line-height: 1.3;
}

/* [GLOBALE] Nasconde pseudo-elemento ::before (usato da vecchi stili mask) */
.feature-box::before {
    display: none !important;
}

/* =====================================================================
   GRIGLIA FEATURES — TUOLAVORO (5 colonne desktop)
   ===================================================================== */

/* [TUOLAVORO] Sezione features: centratura */
.tuolavoro-page .enterprise-features {
    padding: 0 40px !important;
}

/* [TUOLAVORO] Griglia: 5 colonne, gap uniforme */
.enterprise-features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 0 20px;
}

/* =====================================================================
   GRIGLIA FEATURES — ENTERPRISE (6 colonne desktop)
   ===================================================================== */

/* [ENTERPRISE] Griglia: 6 colonne, gap compatto */
.alia-unified-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 14px !important;
    max-width: 1120px !important;
    margin: 32px auto 0 !important;
}

/* =====================================================================
   RESPONSIVE — Griglie features (tablet e mobile)
   ===================================================================== */

/* [TABLET ≤1024px] Enterprise: 4 colonne */
@media (max-width: 1024px) {
    .alia-unified-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* [MOBILE ≤768px] Tutte le griglie: layout compatto */
@media (max-width: 768px) {
    /* Hero tuolavoro: padding laterale ridotto, colonne impilate.
       Il padding-top è gestito dalla regola globale hero (uniforme) */
    .tuolavoro-page .enterprise-hero {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 30px !important;
    }

    .tuolavoro-page .enterprise-hero-container {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        text-align: center;
    }

    .tuolavoro-page .enterprise-hero-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tuolavoro-page .enterprise-title {
        font-size: 2rem;
        text-align: center;
    }

    .tuolavoro-page .enterprise-subtitle {
        text-align: center;
    }

    .tuolavoro-page .enterprise-features {
        padding: 0 20px !important;
    }

    /* TuoLavoro: 2 colonne su mobile */
    .enterprise-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Enterprise: 3 colonne su mobile */
    .alia-unified-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    /* Feature box: più compatto su mobile */
    .feature-box {
        padding: 18px 12px;
        min-height: 110px;
        gap: 10px;
    }

    .feature-box .feature-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .feature-box .feature-label {
        font-size: 0.8rem;
    }
}

/* [MOBILE PICCOLO ≤480px] Enterprise: 2 colonne */
@media (max-width: 480px) {
    .alia-unified-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =====================================================================
   8. PAGINA /ENTERPRISE - Alia ATS per aziende strutturate
   =====================================================================
   URL: impiegando.com/enterprise
   Contenuto: video Alia, funzionalità ATS, form richiesta demo
   ===================================================================== */

/* [ENTERPRISE] Hero section con video Alia - distanza ridotta dall'header */
.alia-page .alia-hero {
    padding-top: 20px !important;
}

/* [ENTERPRISE] Logo Alia più piccolo e centrato */
.alia-page .page-hero-logo {
    height: 80px !important;
}

.alia-page .page-logo-header {
    text-align: center !important;
}

/* [ENTERPRISE] Contenitore pulsante "Prova la demo" — a cavallo tra hero e sezione scura
   Margine negativo sopra e sotto per sovrapporsi a entrambe le sezioni */
.alia-hero-demo-wrap {
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: -30px !important;
    margin-bottom: -30px !important;
}

/* [ENTERPRISE] Pulsante "Prova la demo" — gradiente come "quasi" (blu-viola-rosso)
   Più grande per impatto visivo, ombra colorata */
.alia-hero-demo-btn {
    display: inline-block !important;
    padding: 18px 56px !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: 50px !important;
    background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%) !important;
    background-size: 200% 100% !important;
    animation: gradientFlow 3s ease-in-out infinite !important;
    color: #ffffff !important;
    font-family: 'Satoshi', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 24px rgba(110, 70, 174, 0.4) !important;
    letter-spacing: 0.5px !important;
    font-size: 19px !important;
}

/* [ENTERPRISE] Hover pulsante demo: ombra più forte + leggero spostamento verso l'alto */
.alia-hero-demo-btn:hover {
    box-shadow: 0 8px 32px rgba(110, 70, 174, 0.55) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* [CHI-SIAMO] Rimuovi sottolineatura dal bottone Contattaci */
.team-button {
    text-decoration: none !important;
}

/* =====================================================================
   ENTERPRISE PAGE - Riduzione spazi tra sezioni
   =====================================================================
   Problema: margin-bottom 256px (alia.css) + margin-top 256px (enterprise.css)
   creano spazi enormi tra i blocchi. Qui si riducono a valori ragionevoli.
   ===================================================================== */

/* [ENTERPRISE] Ultima sezione senza margine inferiore (prima del footer) */
.alia-page section:last-child {
    margin-bottom: 0 !important;
}

/* [ENTERPRISE] BLOCCO UNITO 1: Modes + Headline + Come Funziona
   Le 3 card "3 motivi", il titolo "piattaforma intelligente" e "Come funziona Alia"
   sono un unico flusso narrativo → margini e padding a ZERO tra di loro */
/* [ENTERPRISE] Sezione modes: padding azzerato (spaziatura dal margin-bottom globale) */

/* ============================================================
   [ENTERPRISE] SEZIONE "4 MOTIVI" - GRIGLIA 2x2 CARD
   Originale: 3 card in diagonale con position absolute (alia.css)
   Nuovo: 4 card in griglia 2x2, stesse dimensioni, stile moderno
   ============================================================ */

/* ============================================================
   [ENTERPRISE] CARD "4 MOTIVI" - Design innovativo con glassmorphism
   4 card tutte uguali, griglia 2x2 desktop, 1 colonna mobile
   Ogni card ha: icona circolare, numero, pill, titolo, descrizione, linea accent
   Card 4 ha sfondo scuro (dark mode)
   ============================================================ */

/* [ENTERPRISE] Sezione unificata "1 software" + card — gradiente orizzontale coerente */
.alia-modes-unified {
    background: linear-gradient(90deg, #063046 0%, #0a5a7a 50%, #1a95b5 100%) !important;
    color: #ffffff !important;
    padding-top: 60px !important;
}

/* Contenitore titolo e sottotitolo — nessuno sfondo, testo diretto su gradiente */
.alia-modes-title-box {
    display: inline-block !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
    box-shadow: none !important;
}

/* Titolo — sfumatura avorio/giallina calda per massima leggibilità */
.alia-modes-unified .alia-modes-heading {
    background: linear-gradient(135deg, #FFF5D6, #FFE8A3, #FFEEBB, #FFF0C8) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #FFF5D6 !important;
}

/* Numeri "1" e "4" nel titolo — azzurro chiaro come le card */
.alia-page .alia-modes-unified .alia-modes-title-box .alia-modes-number {
    -webkit-text-fill-color: #5DD9F0 !important;
    color: #5DD9F0 !important;
    background: none !important;
}

/* Sottotitolo — bianco tenue per non competere con il titolo sfumato */
.alia-modes-unified .alia-modes-subheading {
    color: rgba(255, 255, 255, 0.75) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
    background: none !important;
}

/* [ENTERPRISE] Intestazione sopra le card: titolo + sottotitolo centrati */
.alia-page .alia-modes-header {
    text-align: center !important;
    margin-bottom: 48px !important;
}

.alia-page .alia-modes-header.slide-in {
    transition-delay: 0ms;
}


/* [ENTERPRISE] Titolo principale "1 software, 4 motivi"
   Font Satoshi light (peso 400) con sfumatura che riprende i 4 colori delle card:
   azzurro (#00A5CF) → viola (#6E46AE) → corallo (#F9423A) → blu chiaro (#5BA8C8) */
.alia-page .alia-modes-heading {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    background: linear-gradient(90deg, #5DD9F0 0%, #A78BFA 35%, #FF7B72 70%, #5DD9F0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #5DD9F0 !important;
}

/* [ENTERPRISE] Numeri "1" e "4" nel titolo: più grandi e bold
   Azzurro chiaro luminoso, richiama il colore della prima card */
.alia-page .alia-modes-number {
    font-weight: 700 !important;
    font-size: 44px !important;
    -webkit-text-fill-color: #5DD9F0 !important;
    color: #5DD9F0 !important;
    background: none !important;
}

/* [ENTERPRISE] Sottotitolo descrittivo - Satoshi regular */
.alia-page .alia-modes-subheading {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #5a7d8e !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    line-height: 1.5 !important;
}

/* [ENTERPRISE] Griglia 2x2 per le 4 card
   Sovrascrive il layout position-relative di alia.css */
.alia-page .alia-modes-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    position: static !important;
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
}

/* [ENTERPRISE] Card esterna: reset completo delle posizioni absolute/sticky originali
   Tutte le card hanno ESATTAMENTE le stesse dimensioni (min-height fissa) */
.alia-page .alia-modes-grid .alia-mode-card {
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 280px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* [ENTERPRISE] Animazione shimmer: luce che scorre da sinistra a destra sulla card
   Usa ::after con gradient bianco trasparente che si muove orizzontalmente */
@keyframes alia-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* [ENTERPRISE] Animazione ingresso card: sale dal basso con fade-in
   Ogni card ha un delay diverso per effetto sfalsato (staggered) */
@keyframes alia-card-enter {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* [ENTERPRISE] Animazione pulsazione icona: scala leggera al hover */
@keyframes alia-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* [ENTERPRISE] Animazione icona che arriva rotolando da sinistra
   Parte fuori schermo a sinistra, ruota 720° (2 giri) e atterra nella posizione finale */
@keyframes alia-icon-roll-in {
    0% {
        opacity: 0;
        transform: translateX(-120px) rotate(-720deg) scale(0.5);
    }
    60% {
        opacity: 1;
        transform: translateX(10px) rotate(20deg) scale(1.05);
    }
    80% {
        transform: translateX(-5px) rotate(-10deg) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg) scale(1);
    }
}

/* [ENTERPRISE] Card interna: contenitore visibile con sfondo gradient sfumato
   Ogni card ha il suo colore unico con sfumatura leggera.
   Logica colori: azzurro → viola → corallo → blu notte (progressione cromatica) */
.alia-mode-card-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: 100% !important;
    padding: 32px 28px !important;
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(6, 48, 70, 0.10), 0 2px 8px rgba(6, 48, 70, 0.06) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* [ENTERPRISE] Shimmer: luce che scorre sulla card al hover
   Pseudo-elemento ::after con gradient bianco diagonale */
.alia-mode-card-inner::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 70%
    ) !important;
    transform: translateX(-100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* [ENTERPRISE] Al hover, attiva lo shimmer (luce che scorre una volta) */
.alia-mode-card-inner:hover::after {
    animation: alia-shimmer 0.8s ease-in-out !important;
}

/* [ENTERPRISE] Ingresso sfalsato via slide-in: le card appaiono DOPO il titolo (0.6s delay)
   Card 1 → 1.0s, Card 2 → 1.2s, Card 3 → 1.4s, Card 4 → 1.6s
   Usano il sistema slide-in (IntersectionObserver) per sincronizzarsi col titolo */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(1) {
    animation: none !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(2) {
    animation: none !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(3) {
    animation: none !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(4) {
    animation: none !important;
}


/* [ENTERPRISE] Icona pulsa leggermente al hover della card */
.alia-mode-card-inner:hover .alia-mode-icon-wrap {
    animation: alia-icon-pulse 0.6s ease !important;
}

/* [ENTERPRISE] Linea accent si allarga al hover della card (da 40px a 60px) */
.alia-mode-card-inner:hover .alia-mode-accent-line {
    width: 60px !important;
    transition: width 0.3s ease !important;
}

/* [ENTERPRISE] Card 1 - Azzurro: sfumatura dal celeste chiaro al turchese
   Colore brand primario, trasmette fiducia e velocità */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(1) .alia-mode-card-inner {
    background: linear-gradient(145deg, #e8f8fc 0%, #c4eef8 40%, #a8e4f3 100%) !important;
}

/* [ENTERPRISE] Card 2 - Viola: sfumatura dal lilla chiaro al lavanda
   Colore tecnologia/AI, trasmette innovazione */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(2) .alia-mode-card-inner {
    background: linear-gradient(145deg, #f0eaf8 0%, #ddd0f0 40%, #ccbce8 100%) !important;
}

/* [ENTERPRISE] Card 3 - Corallo/pesca: sfumatura dal rosa chiaro al salmone
   Colore caldo, trasmette supporto umano e vicinanza */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(3) .alia-mode-card-inner {
    background: linear-gradient(145deg, #fef0ee 0%, #fcd9d5 40%, #f9c5bf 100%) !important;
}

/* [ENTERPRISE] Card 4 - Blu notte: sfumatura scura profonda
   Colore professionale, trasmette solidità e completezza */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(4) .alia-mode-card-inner {
    background: linear-gradient(145deg, #063046 0%, #0a3d5c 40%, #125978 100%) !important;
}

/* [ENTERPRISE] Hover: sollevamento fluido e ombra colorata per ogni card */
.alia-mode-card-inner:hover {
    transform: translateY(-6px) !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(1) .alia-mode-card-inner:hover {
    box-shadow: 0 16px 48px rgba(0, 165, 207, 0.20), 0 4px 12px rgba(0, 165, 207, 0.10) !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(2) .alia-mode-card-inner:hover {
    box-shadow: 0 16px 48px rgba(110, 70, 174, 0.20), 0 4px 12px rgba(110, 70, 174, 0.10) !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(3) .alia-mode-card-inner:hover {
    box-shadow: 0 16px 48px rgba(249, 66, 58, 0.15), 0 4px 12px rgba(249, 66, 58, 0.08) !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(4) .alia-mode-card-inner:hover {
    box-shadow: 0 16px 48px rgba(6, 48, 70, 0.25), 0 4px 12px rgba(6, 48, 70, 0.15) !important;
}

/* [ENTERPRISE] Cerchio icona: sfondo bianco semitrasparente per contrasto sul gradient
   border-radius: 50% per far "rotolare" l'icona come una pallina */
.alia-mode-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

/* [ENTERPRISE] Icone card — animazione disattivata, entrano tutte via slide-in con la card */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(1) .alia-mode-icon-wrap {
    animation: none !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(2) .alia-mode-icon-wrap {
    animation: none !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(3) .alia-mode-icon-wrap {
    animation: none !important;
}
.alia-page .alia-modes-grid .alia-mode-card:nth-child(4) .alia-mode-icon-wrap {
    animation: none !important;
}

/* [ENTERPRISE] Icona card 4 scura: sfondo bianco più visibile */
.alia-accent-dark { background: rgba(255, 255, 255, 0.15) !important; }

/* [ENTERPRISE] Numero grande semitrasparente (01, 02, 03, 04)
   Decorativo, posizionato in alto a destra, colore adattato per card */
.alia-mode-number {
    position: absolute !important;
    top: 20px !important;
    right: 24px !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* [ENTERPRISE] Numero card 1 azzurra: turchese scuro semitrasparente */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(1) .alia-mode-number {
    color: rgba(0, 165, 207, 0.15) !important;
}
/* [ENTERPRISE] Numero card 2 viola: viola semitrasparente */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(2) .alia-mode-number {
    color: rgba(110, 70, 174, 0.12) !important;
}
/* [ENTERPRISE] Numero card 3 corallo: rosso semitrasparente */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(3) .alia-mode-number {
    color: rgba(249, 66, 58, 0.10) !important;
}
/* [ENTERPRISE] Numero card 4 scura: bianco semitrasparente */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(4) .alia-mode-number {
    color: rgba(255, 255, 255, 0.08) !important;
}

/* [ENTERPRISE] Pill/etichetta: chip moderno, colore coordinato con la card */
.alia-page .alia-modes-grid .alia-mode-pill {
    position: static !important;
    display: inline-block !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
}

/* [ENTERPRISE] Pill card 1: sfondo bianco, testo azzurro */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(1) .alia-mode-pill {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #0089ab !important;
}
/* [ENTERPRISE] Pill card 2: sfondo bianco, testo viola */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(2) .alia-mode-pill {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #5a3a90 !important;
}
/* [ENTERPRISE] Pill card 3: sfondo bianco, testo corallo */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(3) .alia-mode-pill {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #d63830 !important;
}
/* [ENTERPRISE] Pill card 4: sfondo bianco trasparente, testo chiaro */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(4) .alia-mode-pill {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* [ENTERPRISE] Titolo card: Satoshi medium, sovrascrive gradient animato di alia.css */
.alia-page .alia-modes-grid .alia-mode-title {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #063046 !important;
    color: #063046 !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    animation: none !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

/* [ENTERPRISE] Titolo card 4 scura: testo bianco */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(4) .alia-mode-title {
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}

/* [ENTERPRISE] Descrizione card: Satoshi regular, testo grigio-blu */
.alia-page .alia-modes-grid .alia-mode-desc {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #3d5a6a !important;
    flex-grow: 1 !important;
}

/* [ENTERPRISE] Descrizione card 4 scura: testo bianco semitrasparente */
.alia-page .alia-modes-grid .alia-mode-card:nth-child(4) .alia-mode-desc {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* [ENTERPRISE] Linea accent in basso: barra colorata coordinata col gradient
   Transizione per allargamento al hover (da 40px a 60px) */
.alia-mode-accent-line {
    width: 40px !important;
    height: 3px !important;
    border-radius: 2px !important;
    margin-top: 20px !important;
    flex-shrink: 0 !important;
    transition: width 0.3s ease !important;
}

/* [ENTERPRISE] Colori linea accent: ogni card ha il suo colore */
.alia-line-blue { background: #00A5CF !important; }
.alia-line-purple { background: #6E46AE !important; }
.alia-line-red { background: #F9423A !important; }

/* [ENTERPRISE] Sezione modes: nessuna altezza minima (era 520px per sticky)
   NOTA: margin-bottom gestito dalla regola .alia-page section.alia-modes (più specifica) */
.alia-page .alia-modes {
    min-height: auto !important;
}

/* [ENTERPRISE MOBILE ≤768px] Card in colonna singola */
@media (max-width: 768px) {
    .alia-page .alia-modes-heading {
        font-size: 28px !important;
    }

    .alia-page .alia-modes-header {
        margin-bottom: 32px !important;
    }

    .alia-page .alia-modes-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        display: grid !important;
        max-width: 100% !important;
    }

    .alia-page .alia-modes-grid .alia-mode-card {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .alia-mode-card-inner {
        padding: 24px 20px !important;
    }

    .alia-mode-number {
        font-size: 36px !important;
    }

    .alia-page .alia-modes-grid .alia-mode-card + .alia-mode-card {
        margin-top: 0 !important;
    }
}

/* [ENTERPRISE] "Come funziona Alia" - spazio sopra uniformato a 250px
   (prima era margin-top: 0 che ANNULLAVA lo spazio tra le card e questa sezione) */
.alia-page section.alia-funziona-puzzle {
    padding-top: 60px !important;
}

/* ============================================================
   [ENTERPRISE] GRIGLIA UNIFICATA — layout colonne (stili box globali sopra)
   ============================================================ */

/* NOTA: stili .feature-box, .feature-icon, .feature-label e responsive griglia
   sono ora definiti nella sezione FEATURE BOX GLOBALI (sopra) per uniformità */

/* ============================================================
   [ENTERPRISE] SEZIONI CON SFONDO ALTERNATO — separazioni dritte
   Le sezioni alternano tra chiaro (#EDFBFF) e scuro (#063046)
   con bordi netti e padding uniforme (80px sopra e sotto)
   ============================================================ */

/* [SEZIONI] Sfondo chiaro ereditato dal body */

/* [SEZIONI] Le sezioni dopo la rotation-box devono coprirla scrollando (effetto parallasse) */
.alia-page .alia-carousel-section,
.alia-page .avatar-section,
.enterprise-section-pack,
.faq-section,
.enterprise-cta-contact {
    position: relative;
    z-index: 1;
}

/* [SEZIONI] Padding verticale uniforme per TUTTE le sezioni enterprise */
.alia-page .alia-modes,
.alia-page .alia-funziona-puzzle,
.alia-page .alia-carousel-section,
.alia-page .avatar-section,
.enterprise-section-pack.alia-section-spacing,
.faq-section.alia-section-spacing,
.enterprise-cta-contact.alia-section-spacing {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    margin-bottom: 0 !important;
}

/* [ENTERPRISE] Titolo features: testo centrato */
.enterprise-features-head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.enterprise-features-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #063046;
    line-height: 1.35;
}

/* ============================================================
   [ENTERPRISE] SEZIONE "PIÙ DI UN SEMPLICE PACCHETTO"
   Card centrata con immagine e testo, design professionale.
   L'immagine entra con animazione slide-in da sinistra.
   ============================================================ */

/* [PACK] Card contenitore: sfondo bianco, centrata, bordi arrotondati, ombra morbida */
.enterprise-pack-card {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 56px;
    justify-content: center;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(6, 48, 70, 0.08);
}

/* [PACK] Sezione pacchetto: centratura del contenuto */
.enterprise-section-pack {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* [PACK] Colonna testo: allineata a sinistra per leggibilità */
.enterprise-pack-content {
    flex: 1;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* [PACK] Titolo sezione: grande, scuro, bold */
.enterprise-pack-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #063046;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* [PACK] Paragrafo descrittivo: testo leggibile con interlinea ampia */
.enterprise-pack-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: #3a5a6e;
    line-height: 1.7;
    max-width: 440px;
}

/* [PACK] Contenitore immagine: occupa metà spazio */
.enterprise-pack-img-wrap {
    flex: 1;
    min-width: 0;
}

/* [PACK] Immagine: bordi arrotondati, ombra, occupa tutto il contenitore */
.enterprise-pack-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(6, 48, 70, 0.1);
    object-fit: cover;
}

/* [PACK] Mobile: colonne impilate verticalmente */
@media (max-width: 768px) {
    .enterprise-pack-card {
        flex-direction: column;
        gap: 30px;
        padding: 32px 24px;
    }

    .enterprise-pack-title {
        font-size: 1.75rem;
    }

    .enterprise-pack-desc {
        font-size: 1rem;
        max-width: 100%;
    }
}

/* [ENTERPRISE] CTA contatti (ultima sezione): margin-bottom a 0 prima del footer */
.enterprise-cta-contact.alia-section-spacing {
    margin-bottom: 0 !important;
}

/* ============================================================
   [ENTERPRISE] SEZIONE CTA CONTATTI - Blocco finale prima del footer
   Sfondo gradient con i colori brand, testo centrato, due bottoni
   ============================================================ */

/* [ENTERPRISE] Container sezione CTA contatti: full screen (100% larghezza)
   Nessun border-radius né max-width per coerenza con le altre sezioni */
.enterprise-cta-contact {
    background: linear-gradient(135deg, #063046 0%, #125978 50%, #00A5CF 100%) !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* [ENTERPRISE] Box interno CTA con padding generoso */
.enterprise-cta-contact-inner {
    padding: 80px 60px;
    text-align: center;
}

/* [ENTERPRISE] Contenuto CTA centrato */
.enterprise-cta-contact-content {
    max-width: 700px;
    margin: 0 auto;
}

/* [ENTERPRISE] Titolo CTA: bianco, grande, Satoshi */
.enterprise-cta-contact-title {
    font-family: 'Satoshi', Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
}

/* [ENTERPRISE] Descrizione CTA: bianca semi-trasparente */
.enterprise-cta-contact-desc {
    font-family: 'Satoshi', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 40px !important;
    line-height: 1.6 !important;
}

/* [ENTERPRISE] Contenitore bottoni CTA: affiancati con gap */
.enterprise-cta-contact-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* [ENTERPRISE] Stile base bottoni CTA */
.enterprise-cta-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: 50px;
    font-family: 'Satoshi', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* [ENTERPRISE] Bottone primario: bianco su sfondo scuro → icona + "Contattaci" */
.enterprise-cta-primary {
    background: #ffffff;
    color: #063046;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.enterprise-cta-primary:hover {
    background: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    color: #063046;
    text-decoration: none;
}

/* [ENTERPRISE] Bottone secondario: bordo bianco trasparente → icona + "Chiamaci" */
.enterprise-cta-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.enterprise-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
    text-decoration: none;
}

/* [ENTERPRISE MOBILE] CTA contatti: padding ridotto, testo più piccolo */
@media (max-width: 768px) {
    .enterprise-cta-contact-inner {
        padding: 48px 24px;
    }

    .enterprise-cta-contact-title {
        font-size: 26px !important;
    }

    .enterprise-cta-contact-desc {
        font-size: 16px !important;
        margin-bottom: 32px !important;
    }
}

/* [ENTERPRISE MOBILE] Padding azzerato su tutte le sezioni
   La spaziatura mobile (80px) è gestita dalla regola globale */
@media (max-width: 768px) {
    .alia-page section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .alia-page section.rotation-box-section {
        padding: 60px 16px !important;
    }

    .enterprise-cta-contact.alia-section-spacing {
        margin-bottom: 0 !important;
    }
}

/* =====================================================================
   9. PAGINA INDEX - Homepage istituzionale Impiegando
   =====================================================================
   URL: impiegando.com/
   Contenuto: hero con logo Impiegando, card Alia e Jobbir
   ===================================================================== */

/* [INDEX] Padding azzerato su sezioni normali (hero esclusa, gestita da regola uniforme)
   Sezioni con sfondo colorato (globe, cta, dark) mantengono il padding interno */
.impiegando-institutional .inst-section,
.impiegando-institutional .inst-section-light,
.impiegando-institutional .inst-section-gradient {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* [INDEX] CTA "Pronto a trovare il candidato ideale?": padding interno preservato */
.impiegando-institutional .inst-cta-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* [INDEX MOBILE] Sezione dark e CTA: padding interno ridotto */
@media (max-width: 768px) {
    .impiegando-institutional .inst-section-dark {
        padding: 40px 20px !important;
    }

    .impiegando-institutional .inst-cta-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}

/* [INDEX] Font Satoshi per la homepage istituzionale
   Esclude le icone Font Awesome dal cambio font */
.impiegando-institutional,
.impiegando-institutional *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]) {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ===== Hero Section ===== */
.inst-hero {
    padding: 80px 40px 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inst-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0,165,207,0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 8s ease-in-out infinite;
}

.inst-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(110,70,174,0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 10s ease-in-out infinite reverse;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.inst-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.inst-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #063046;
    color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(6,48,70,0.3);
}

.inst-brand-badge i {
    color: #00A5CF;
}

.inst-hero h1 {
    font-size: 56px;
    font-weight: 800;
    color: #063046;
    line-height: 1.15;
    margin-bottom: 24px;
}

.inst-hero h1 span {
    background: linear-gradient(90deg, #00A5CF 0%, #6E46AE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.inst-hero p {
    font-size: 20px;
    color: #125978;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 40px;
}

.inst-cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.inst-btn-primary {
    background: linear-gradient(135deg, #00A5CF 0%, #0089B3 100%);
    color: #fff;
    padding: 16px 36px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(0,165,207,0.3);
}

.inst-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0,165,207,0.4);
    color: #fff;
}

.inst-btn-secondary {
    background: #fff;
    color: #063046;
    padding: 16px 36px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid #063046;
    transition: all 0.2s;
}

.inst-btn-secondary:hover {
    background: #063046;
    color: #fff;
}

/* [INDEX] Bottoni CTA: larghezza minima per allineamento */
.inst-cta-section .inst-btn-primary,
.inst-cta-section .inst-btn-secondary {
    min-width: 180px;
}

/* [INDEX] Bottone secondario nella CTA: sfondo trasparente con bordo bianco */
.inst-cta-section .inst-btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.inst-cta-section .inst-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Trust Badges in Hero */
.inst-trust-badges {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.inst-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #125978;
    font-size: 14px;
    font-weight: 500;
}

.inst-trust-badge i {
    color: #00A5CF;
    font-size: 18px;
}

/* ===== General Section Styles ===== */

/* [INDEX] Sezione standard: centrata con max-width, sfondo #EDFBFF
   margin-left/right: auto per centrare SENZA azzerare il margin-bottom globale (120px)
   padding laterale mantenuto per evitare contenuto a filo su schermi stretti */
.inst-section {
    padding: 0 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* [INDEX] Sezione sfondo scuro: padding interno per respiro estetico dentro il blocco colorato
   Il margin-bottom 120px (globale) crea il gap uniforme FUORI dal blocco */
.inst-section-dark {
    background: #063046;
    color: #fff;
    max-width: 100%;
    padding: 60px 40px;
}

/* [INDEX] Sezione sfondo azzurro chiaro: padding azzerato (sfondo uguale al body)
   Spaziatura tra sezioni gestita solo dal margin-bottom globale (120px) */
.inst-section-light {
    max-width: 100%;
    padding: 0 40px;
}

/* [INDEX] Sezione con sfondo gradient: padding azzerato
   Spaziatura gestita dal margin-bottom globale */
.inst-section-gradient {
    max-width: 100%;
    padding: 0 40px;
}

.inst-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.inst-section-title {
    font-size: 42px;
    font-weight: 800;
    color: #063046;
    text-align: center;
    margin-bottom: 16px;
}

.inst-section-dark .inst-section-title {
    color: #fff;
}

.inst-section-subtitle {
    font-size: 18px;
    color: #125978;
    text-align: center;
    margin-bottom: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.inst-section-dark .inst-section-subtitle {
    color: rgba(255,255,255,0.8);
}

/* ===== Timeline Section ===== */
.inst-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.inst-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #00A5CF 0%, #6E46AE 100%);
    border-radius: 2px;
}

/* Timeline card */
.inst-timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    position: relative;
}

.inst-timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
}

/* Effetto hover sulle card timeline: si alza, ombra più forte, bordo colorato */
.inst-timeline-content {
    width: 45%;
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
}

.inst-timeline-content:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 165, 207, 0.2);
    border-color: #00A5CF;
}

.inst-timeline-item:nth-child(odd) .inst-timeline-content {
    text-align: right;
}

.inst-timeline-year {
    font-size: 28px;
    font-weight: 900;
    color: #00A5CF;
    margin-bottom: 8px;
}

.inst-timeline-title {
    font-size: 18px;
    font-weight: 700;
    color: #063046;
    margin-bottom: 8px;
}

.inst-timeline-desc {
    font-size: 14px;
    color: #125978;
    line-height: 1.6;
}

.inst-timeline-buttons {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* Bottone "Scopri chi siamo" nella timeline */
.inst-timeline-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #063046;
    border: 2px solid #063046;
}

.inst-timeline-btn:hover {
    background: #125978;
    border-color: #125978;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 48, 70, 0.3);
}

.inst-timeline-btn img {
    height: 45px;
    object-fit: contain;
    margin-bottom: 8px;
}

.inst-timeline-btn.jobbir-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #4caf50;
}

.inst-timeline-btn.jobbir-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
    background: rgba(255, 255, 255, 1);
}

.inst-timeline-btn.tuolavoro-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #00A5CF;
}

.inst-timeline-btn.tuolavoro-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 165, 207, 0.3);
    background: rgba(255, 255, 255, 1);
}

.inst-timeline-avatar {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.inst-timeline-avatar .avatar-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.inst-timeline-avatar .avatar-icon i {
    color: white !important;
    font-size: 40px !important;
}

.inst-timeline-avatar .avatar-robot-img {
    height: 120px;
    object-fit: contain;
}

/* Testo bottone timeline - bianco per bottone generico (Scopri chi siamo) */
.inst-timeline-btn span {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
}

/* Testo scuro per bottoni Jobbir e TuoLavoro (sfondo bianco) */
.inst-timeline-btn.jobbir-btn span,
.inst-timeline-btn.tuolavoro-btn span {
    color: #125978;
}

/* Bottoni Jobbir/TuoLavoro: layout con logo e testo */
.inst-timeline-btn.jobbir-btn,
.inst-timeline-btn.tuolavoro-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px;
    border-radius: 12px;
    min-width: 200px;
}

/* [TUOLAVORO] Griglia metriche — 3 colonne desktop, 1 colonna mobile */
.tuolavoro-metrics {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* [TUOLAVORO] Card grafico — sfondo bianco con bordi arrotondati */
.tuolavoro-chart {
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
}

/* [TUOLAVORO] Header del grafico — titolo e sottotitolo affiancati */
.tuolavoro-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* [TUOLAVORO] Titolo del grafico */
.tuolavoro-chart-title {
  font-size: 14px;
}

/* [TUOLAVORO] Sottotitolo del grafico */
.tuolavoro-chart-subtitle {
  font-size: 12px;
  opacity: 0.75;
}

/* [TUOLAVORO] Area grafico visitatori — contenitore con bordo arrotondato */
.tuolavoro-chart-area {
  border-radius: 12px;
  overflow: hidden;
}

/* [TUOLAVORO] Totale sotto il grafico */
.tuolavoro-chart-total {
  margin-top: 10px;
  font-size: 13px;
}

/* [TUOLAVORO] Card KPI — sfondo bianco, contenuto centrato verticalmente */
.tuolavoro-kpi {
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* [TUOLAVORO] Etichetta KPI */
.tuolavoro-kpi-label {
  font-size: 12px;
  opacity: 0.7;
}

/* [TUOLAVORO] Valore KPI grande */
.tuolavoro-kpi-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 6px;
}

/* [TUOLAVORO] Valore KPI più piccolo (variante) */
.tuolavoro-kpi-value--small {
  font-size: 18px;
  line-height: 1.2;
}

/* [TUOLAVORO] Nota sotto il valore KPI */
.tuolavoro-kpi-note {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 8px;
}

/* [TUOLAVORO] Card metriche — larghezza max e centrata */
.tuolavoro-pack-card {
  max-width: 1100px;
  margin: 0 auto;
}

/* [TUOLAVORO] Descrizione metriche — margine inferiore */
.tuolavoro-pack-desc {
  margin-bottom: 18px;
}

/* [TUOLAVORO] Nota finale sotto la griglia metriche */
.tuolavoro-metrics-note {
  margin-top: 14px;
  font-size: 12px;
  opacity: 0.75;
}

/* [TUOLAVORO] Griglia metriche — colonna singola in mobile */
@media (max-width: 768px) {
  .tuolavoro-metrics {
    grid-template-columns: 1fr;
  }
}

.inst-timeline-dot {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid #00A5CF;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* ===== How It Works Section ===== */
.inst-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
}

.inst-steps-grid::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 15%;
    right: 15%;
    height: 3px;
    background: linear-gradient(90deg, #00A5CF 0%, #6E46AE 50%, #F9423A 100%);
    z-index: 0;
}

.inst-step-card {
    text-align: center;
    position: relative;
    z-index: 1;
}

.inst-step-number {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #00A5CF 0%, #0089B3 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 30px rgba(0,165,207,0.3);
}

.inst-step-card:nth-child(2) .inst-step-number {
    background: linear-gradient(135deg, #6E46AE 0%, #5a3a91 100%);
    box-shadow: 0 8px 30px rgba(110,70,174,0.3);
}

.inst-step-card:nth-child(3) .inst-step-number {
    background: linear-gradient(135deg, #F9423A 0%, #d63830 100%);
    box-shadow: 0 8px 30px rgba(249,66,58,0.3);
}

.inst-step-number i {
    font-size: 48px;
    color: #fff;
}

.inst-step-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #063046;
    margin-bottom: 12px;
}

.inst-step-card p {
    font-size: 15px;
    color: #125978;
    line-height: 1.6;
    max-width: 280px;
    margin: 0 auto;
}

/* ===== Stats Section with Animation ===== */
/* Griglia per le card statistiche - 3 colonne uguali centrate */
.inst-stats-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    text-align: center;
}

/* Card statistiche - tutte la stessa larghezza fissa */
.inst-stat-card {
    background: #fff;
    padding: 40px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s;
    min-height: 160px;
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.inst-stat-card:hover {
    transform: translateY(-5px);
}

.inst-stat-number {
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(135deg, #00A5CF 0%, #063046 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    text-shadow: 0 4px 8px rgba(0,165,207,0.2);
    transform: perspective(500px) rotateX(0deg);
    transition: transform 0.3s ease, text-shadow 0.3s ease;
    min-height: 50px;
}

.inst-stat-card:hover .inst-stat-number {
    transform: perspective(500px) rotateX(-5deg) scale(1.05);
    text-shadow: 0 8px 16px rgba(0,165,207,0.3);
}

.inst-stat-number.counting {
    animation: countPulse 0.1s ease-in-out;
}

@keyframes countPulse {
    0% { transform: perspective(500px) rotateX(-10deg) scale(1.02); }
    50% { transform: perspective(500px) rotateX(5deg) scale(0.98); }
    100% { transform: perspective(500px) rotateX(0deg) scale(1); }
}

@keyframes flipIn {
    0% {
        transform: perspective(500px) rotateX(-90deg) scale(0.8);
        opacity: 0;
    }
    60% {
        transform: perspective(500px) rotateX(15deg) scale(1.05);
    }
    100% {
        transform: perspective(500px) rotateX(0deg) scale(1);
        opacity: 1;
    }
}

.inst-stat-number.animate-in {
    animation: flipIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ===== Navbar Ticker/Marquee ===== */
.navbar-ticker {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 32px;
    margin: 0 30px;
}

.navbar-ticker-track {
    display: flex;
    animation: tickerScroll 20s linear infinite;
    white-space: nowrap;
}

.navbar-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 40px;
    font-size: 14px;
    font-weight: 600;
    color: #063046;
}

.navbar-ticker-item i {
    color: #00A5CF;
}

.navbar-ticker-item span {
    background: linear-gradient(90deg, #063046 0%, #00A5CF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.navbar-ticker:hover .navbar-ticker-track {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .navbar-ticker {
        margin: 0 10px;
        height: 24px;
    }

    .navbar-ticker-item {
        padding: 0 20px;
        font-size: 11px;
    }

    .navbar-ticker-item i {
        font-size: 10px;
    }
}

.inst-stat-label {
    font-size: 16px;
    color: #125978;
    font-weight: 600;
}

/* ===== Values Section ===== */
.inst-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.inst-value-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s, background 0.3s;
}

.inst-value-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.1);
}

.inst-value-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #00A5CF 0%, #0089B3 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: #fff;
}

.inst-value-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.inst-value-card p {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

/* ===== Differentiators Section ===== */
.inst-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.inst-diff-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-left: 4px solid #00A5CF;
    transition: transform 0.3s;
}

.inst-diff-card:hover {
    transform: translateX(5px);
}

.inst-diff-card:nth-child(2) { border-left-color: #6E46AE; }
.inst-diff-card:nth-child(3) { border-left-color: #F9423A; }
.inst-diff-card:nth-child(4) { border-left-color: #063046; }

.inst-diff-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #00A5CF 0%, #0089B3 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.inst-diff-card:nth-child(2) .inst-diff-icon { background: linear-gradient(135deg, #6E46AE 0%, #5a3a91 100%); }
.inst-diff-card:nth-child(3) .inst-diff-icon { background: linear-gradient(135deg, #F9423A 0%, #d63830 100%); }
.inst-diff-card:nth-child(4) .inst-diff-icon { background: linear-gradient(135deg, #063046 0%, #125978 100%); }

.inst-diff-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: #063046;
    margin-bottom: 8px;
}

.inst-diff-content p {
    font-size: 14px;
    color: #125978;
    line-height: 1.6;
}

.inst-diff-content .inst-diff-intro {
    font-weight: 600;
    color: #063046;
    margin-bottom: 8px;
}

/* ===== Solutions Section ===== */
.inst-solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.inst-solution-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.inst-solution-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.inst-solution-header {
    background: linear-gradient(135deg, #00A5CF 0%, #063046 100%);
    padding: 35px 30px;
    color: #fff;
    text-align: center;
}

.inst-solution-header h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
}

.inst-solution-header p {
    font-size: 14px;
    opacity: 0.9;
}

.inst-solution-body {
    padding: 30px;
}

.inst-solution-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.inst-solution-body li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #063046;
}

.inst-solution-body li:last-child {
    border-bottom: none;
}

.inst-solution-body li i {
    color: #00A5CF;
    font-size: 14px;
}

.inst-solution-link {
    display: block;
    text-align: center;
    color: #00A5CF;
    font-weight: 700;
    text-decoration: none;
    padding: 14px;
    border: 2px solid #00A5CF;
    border-radius: 10px;
    transition: all 0.2s;
}

.inst-solution-link:hover {
    background: #00A5CF;
    color: #fff;
}

/* ===== Testimonials Section ===== */
.inst-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Effetto pulsante hover sulle card testimonianze */
.inst-testimonial-card {
    background: #fff;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.inst-testimonial-card:hover {
    transform: scale(0.97);
    box-shadow: 0 2px 15px rgba(0,0,0,0.12);
}

.inst-testimonial-card:active {
    transform: scale(0.95);
    box-shadow: 0 1px 8px rgba(0,0,0,0.15);
}

.inst-testimonial-card::before {
    content: '"';
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 80px;
    color: #00A5CF;
    opacity: 0.15;
    font-family: Georgia, serif;
    line-height: 1;
}

.inst-testimonial-text {
    font-size: 16px;
    color: #125978;
    line-height: 1.7;
    margin-bottom: 24px;
    font-style: italic;
}

.inst-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
}

.inst-testimonial-avatar {
    width: 55px;
    height: 55px;
    min-width: 55px;
    min-height: 55px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #00A5CF 0%, #063046 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.inst-testimonial-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: #063046;
    margin-bottom: 4px;
}

.inst-testimonial-info p {
    font-size: 13px;
    color: #125978;
}

.inst-testimonial-stars {
    color: #FFB800;
    margin-bottom: 16px;
}

/* ===== 3D Globe Section ===== */
/* [CHI-SIAMO] Sezione globo con padding aumentato per dare spazio */
.inst-globe-section {
    padding: 100px 0 120px;
    background: linear-gradient(180deg, #063046 0%, #0a4a6e 50%, #125978 100%);
    position: relative;
    overflow: hidden;
}

.inst-globe-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

.inst-globe-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.inst-globe-content {
    color: #fff;
}

.inst-globe-content h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #fff 0%, #A2F0FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.inst-globe-content p {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    margin-bottom: 30px;
}

.inst-globe-locations {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inst-globe-country {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    min-height: 80px;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.inst-globe-country:hover {
    background: rgba(255,255,255,0.12);
    transform: translateX(8px);
    border-color: #00A5CF;
}

.inst-globe-country-flag {
    font-size: 28px;
    line-height: 1;
}

.inst-globe-country-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.inst-globe-country-info span {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
}

.inst-globe-visual {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#globe-container {
    width: 100%;
    height: 100%;
    cursor: grab;
}

#globe-container:active {
    cursor: grabbing;
}

.globe-stats {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    background: rgba(0,0,0,0.5);
    padding: 10px 18px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.globe-controls {
    display: none;
}

.globe-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 165, 207, 0.9);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.globe-control-btn:hover {
    background: #00A5CF;
    transform: scale(1.1);
}

.globe-control-btn:active {
    transform: scale(0.95);
}

.globe-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 100;
    white-space: nowrap;
    border: 1px solid #00A5CF;
}

.globe-tooltip.visible {
    opacity: 1;
}

/* [GLOBE] Suggerimento "Trascina per ruotare" — posizionato sopra il badge stats
   con margine sufficiente per evitare sovrapposizione */
.globe-hint {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 165, 207, 0.2);
    color: #A2F0FF;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: pulse 2s infinite;
    z-index: 10;
    white-space: nowrap;
    transition: opacity 0.5s ease;
}

.globe-stat {
    text-align: center;
    color: #fff;
}

.globe-stat-number {
    font-size: 24px;
    font-weight: 800;
    color: #00A5CF;
}

.globe-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* [INDEX] Globe stats responsive mobile */
@media (max-width: 576px) {
    .globe-stats {
        gap: 15px;
        padding: 10px 16px;
        bottom: 10px;
    }

    .globe-stat-number {
        font-size: 18px;
    }

    .globe-stat-label {
        font-size: 10px;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 992px) {
    .inst-globe-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .inst-globe-content h2 {
        font-size: 32px;
    }

    .inst-globe-visual {
        height: 400px;
    }

    .inst-globe-country {
        justify-content: flex-start;
        text-align: left;
    }
}

/* ===== Map Section ===== */
.inst-map-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.inst-map-content h2 {
    font-size: 38px;
    font-weight: 800;
    color: #063046;
    margin-bottom: 20px;
}

.inst-map-content p {
    font-size: 17px;
    color: #125978;
    line-height: 1.7;
    margin-bottom: 30px;
}

.inst-map-cities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.inst-map-city {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #063046;
    font-weight: 500;
}

.inst-map-city i {
    color: #00A5CF;
}

.inst-map-visual {
    position: relative;
    text-align: center;
}

.inst-map-visual img {
    max-width: 100%;
    height: auto;
}

.inst-map-visual svg {
    max-width: 100%;
    height: auto;
}

/* ===== Clients Section ===== */
.inst-clients-section {
    padding: 80px 40px;
}

.inst-clients-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.inst-clients-title {
    font-size: 28px;
    font-weight: 700;
    color: #063046;
    margin-bottom: 50px;
}

.inst-clients-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;
}

.inst-clients-logos img {
    height: 45px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s;
}

.inst-clients-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ===== Team Section ===== */
.inst-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.inst-team-card {
    text-align: center;
}

.inst-team-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00A5CF 0%, #063046 100%);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #fff;
    box-shadow: 0 8px 30px rgba(0,165,207,0.3);
}

.inst-team-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #063046;
    margin-bottom: 6px;
}

.inst-team-role {
    font-size: 14px;
    color: #00A5CF;
    font-weight: 600;
    margin-bottom: 10px;
}

.inst-team-bio {
    font-size: 14px;
    color: #125978;
    line-height: 1.6;
}

/* [CASE STUDY] Sezione con sfondo bianco, bordo colorato al hover */
.inst-case-study-section {
    background: #ffffff !important;
    border-radius: 24px;
    max-width: 1100px;
    margin: 40px auto !important;
    padding: 0 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* [CASE STUDY] Hover: rilievo con bordo blu e ombra colorata */
.inst-case-study-section:hover {
    transform: translateY(-4px);
    border-color: #00A5CF;
    box-shadow: 0 12px 40px rgba(0, 165, 207, 0.15);
}

/* ===== Case Study Section ===== */
.inst-case-study {
    background: transparent;
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: center;
    color: #063046;
}

.inst-case-study-label {
    display: inline-block;
    background: rgba(0,165,207,0.15);
    color: #00A5CF;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.inst-case-study h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #063046;
}

.inst-case-study p {
    font-size: 16px;
    color: #125978;
    line-height: 1.7;
    margin-bottom: 24px;
}

.inst-case-study-stats {
    display: flex;
    gap: 40px;
}

.inst-case-study-stat {
    text-align: center;
}

.inst-case-study-stat-number {
    font-size: 42px;
    font-weight: 900;
    color: #00A5CF;
}

.inst-case-study-stat-label {
    font-size: 13px;
    color: #5a6c7d;
}

.inst-case-study-logo {
    background: rgba(0,165,207,0.1);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

.inst-case-study-logo i {
    font-size: 80px;
    color: rgba(0,165,207,0.3);
}

/* [CASE STUDY] Contenitore immagine — centrato verticalmente nella griglia */
.inst-case-study-image {
    border-radius: 16px;
    overflow: hidden;
    min-width: 300px;
    max-width: 400px;
    height: 280px;
    align-self: center;
    justify-self: end;
}

/* [CASE STUDY] Immagine — riempie il contenitore mantenendo le proporzioni */
.inst-case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* [INDEX] Le vecchie classi inst-faq-* sono state rimosse.
   Ora la homepage usa le stesse classi faq-section/faq-layout di tutte le altre pagine. */

/* ===== CTA Section ===== */
.inst-cta-section {
    background: linear-gradient(135deg, #063046 0%, #125978 100%);
    padding: 60px 40px 40px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.inst-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0,165,207,0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* [CTA] Titolo — colore bianco forzato (sovrascrive il globale h2 #003347),
   line-height esplicita per evitare sovrapposizione con il sottotitolo */
.inst-cta-section h2 {
    font-size: 40px;
    font-weight: 800;
    color: #fff !important;
    line-height: 1.25;
    margin: 0 0 24px 0;
    position: relative;
    z-index: 1;
}

/* [CTA] Sottotitolo — colore bianco semi-trasparente, spaziatura generosa sotto */
.inst-cta-section p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.5;
    margin: 0 0 40px 0;
    position: relative;
    z-index: 1;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .inst-timeline::before { left: 30px; }
    .inst-timeline-item { flex-direction: column !important; }
    .inst-timeline-content { width: 100%; margin-left: 60px; text-align: left !important; }
    .inst-timeline-dot { left: 30px; }

    .inst-map-section { grid-template-columns: 1fr; }
    .inst-case-study { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
    .inst-stats-grid,
    .inst-values-grid,
    .inst-solutions-grid,
    .inst-testimonials-grid,
    .inst-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inst-steps-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .inst-steps-grid::before {
        display: none;
    }

    .inst-diff-grid {
        grid-template-columns: 1fr;
    }

    .inst-hero h1 {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .inst-hero {
        padding: 60px 20px 80px;
        min-height: auto;
    }

    .inst-hero h1 {
        font-size: 32px;
    }

    .inst-hero p {
        font-size: 17px;
    }

    .inst-stats-grid,
    .inst-values-grid,
    .inst-solutions-grid,
    .inst-testimonials-grid,
    .inst-team-grid {
        grid-template-columns: 1fr;
    }

    /* [MOBILE] Stats grid: card in colonna una sotto l'altra */
    .inst-stats-grid {
        flex-direction: column;
        align-items: center;
    }

    .inst-stat-card {
        width: 100%;
        max-width: 100%;
    }

    .inst-section,
    .inst-section-light,
    .inst-section-gradient {
        padding: 0 20px;
    }

    .inst-section-title {
        font-size: 28px;
    }

    /* [CTA MOBILE] Titolo ridotto e padding laterale ridotto per schermi piccoli */
    .inst-cta-section {
        padding: 32px 20px !important;
    }

    .inst-cta-section h2 {
        font-size: 28px;
        margin: 0 0 16px 0;
    }

    .inst-cta-section p {
        font-size: 16px;
        margin: 0 0 28px 0;
    }

    .inst-cta-group {
        flex-direction: column;
    }

    .inst-btn-primary,
    .inst-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .inst-trust-badges {
        flex-direction: column;
        gap: 12px;
    }

    .inst-case-study {
        padding: 40px 24px;
        text-align: center;
    }

    .inst-case-study h3 {
        font-size: 24px;
    }

    .inst-case-study-label {
        margin: 0 auto 16px;
    }

    /* [CASE STUDY MOBILE] Immagine a larghezza piena e altezza auto */
    .inst-case-study-image {
        min-width: unset;
        max-width: 100%;
        height: 220px;
        justify-self: center;
    }

    .inst-case-study-stats {
        flex-direction: column;
        gap: 20px;
    }
}

/* ===================================
   HERO NEW SECTION STYLES
   =================================== */

/* [INDEX] Hero — padding-top gestito dalla regola uniforme [TUTTE] Hero */
.inst-hero-new {
    padding: 0 40px 0;
}

.inst-hero-new-inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.inst-hero-badge-row {
    margin-bottom: 30px;
}

.inst-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #063046 0%, #0a4a6e 100%);
    color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

.inst-hero-badge i {
    color: #00A5CF;
}

.inst-hero-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}

.inst-hero-logo {
    height: 60px;
}

.inst-hero-registered {
    font-size: 28px;
    font-weight: 800;
    margin-top: -30px;
    background: linear-gradient(135deg, #00A5CF 0%, #125978 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.inst-hero-tagline {
    font-size: 38px;
    font-weight: 800;
    color: #063046;
    margin-bottom: 16px;
}

.inst-hero-description {
    font-size: 18px;
    color: #5a7d8a;
    line-height: 1.7;
    margin-bottom: 50px;
}

.inst-hero-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 50px;
    align-items: stretch;
}

.inst-hero-card {
    background: #fff;
    border: 2px solid #e8f4f8;
    border-radius: 16px;
    padding: 28px;
    text-align: left;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inst-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #00A5CF;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.inst-hero-card-jobbir::before {
    background: #6E46AE;
}

.inst-hero-card:hover {
    border-color: #00A5CF;
    box-shadow: 0 12px 40px rgba(0, 165, 207, 0.15);
    transform: translateY(-4px);
}

.inst-hero-card:hover::before {
    opacity: 1;
}

.inst-hero-card-jobbir:hover {
    border-color: #6E46AE;
    box-shadow: 0 12px 40px rgba(110, 70, 174, 0.15);
}

.inst-hero-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    height: 70px;
}

.inst-hero-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.inst-hero-card-icon.jobbir {
    background: transparent;
    width: 80px;
    height: 80px;
}

.inst-hero-card-icon i {
    color: #fff;
    font-size: 20px;
}

.inst-hero-card-title {
    flex: 1;
    align-self: flex-start;
    padding-top: 5px;
}

.inst-hero-card-title h3 {
    font-size: 20px;
    font-weight: 700;
    color: #063046;
    margin: 0 0 2px 0;
}

.inst-hero-card-title span {
    font-size: 13px;
    color: #7a9ba8;
}

.inst-hero-card-arrow {
    color: #c0d4dc;
    font-size: 18px;
    transition: all 0.3s ease;
}

.inst-hero-card:hover .inst-hero-card-arrow {
    color: #00A5CF;
    transform: translateX(4px);
}

.inst-hero-card-jobbir:hover .inst-hero-card-arrow {
    color: #6E46AE;
}

.inst-hero-card > p {
    font-size: 14px;
    color: #5a7d8a;
    line-height: 1.5;
    margin-bottom: 16px;
}

.inst-hero-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.inst-hero-card-features span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #063046;
    background: #f4f9fb;
    padding: 6px 12px;
    border-radius: 20px;
}

.inst-hero-card-features span i {
    color: #00A5CF;
    font-size: 11px;
}

.inst-hero-card-jobbir .inst-hero-card-features span i {
    color: #6E46AE;
}

.inst-hero-trust {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.inst-hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7a9ba8;
    font-size: 14px;
}

.inst-hero-trust-item i {
    color: #00A5CF;
}

/* Clients carousel - fullwidth section */
/* [INDEX] Carousel clienti: padding azzerato (sfondo uguale al body)
   Spaziatura gestita dal margin-bottom globale */
.inst-clients-fullwidth {
    padding: 0;
    text-align: center;
    width: 100%;
}

.inst-clients-fullwidth .inst-clients-title {
    font-size: 42px;
    font-weight: 800;
    color: #063046;
    margin-bottom: 50px;
}

/* [INDEX] Contenitore carosello: overflow nascosto e touch-action per mobile */
.inst-clients-carousel {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
    position: relative;
}

.inst-clients-carousel::before,
.inst-clients-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.inst-clients-carousel::before {
    left: 0;
    background: linear-gradient(to right, #EDFBFF, transparent);
}

.inst-clients-carousel::after {
    right: 0;
    background: linear-gradient(to left, #EDFBFF, transparent);
}

/* [INDEX] Track loghi: scorrimento orizzontale infinito con CSS animation */
.inst-clients-track {
    display: flex;
    gap: 40px;
    animation: scrollLogos 25s linear infinite;
    width: max-content;
    touch-action: pan-y;
    will-change: transform;
}

@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Logo cliente istituzionale — layout flex centrato con altezza fissa */
.inst-client-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
}

.inst-client-placeholder {
    width: 120px;
    height: 60px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a9ba8;
    font-size: 12px;
    border: 1px solid #e0e0e0;
}

/* [INDEX] Loghi clienti: bianco/nero con hover a colori (solo desktop) */
.inst-client-logo img {
    width: auto;
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* [DESKTOP] Hover: logo diventa a colori */
.inst-client-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Logo con sfondo scuro per loghi bianchi (es. Roma Duepuntozero) */
.inst-client-logo-dark {
    background: #1a1a2e;
    border-radius: 8px;
    padding: 8px 12px;
}

.inst-client-logo-dark img {
    filter: none !important;
    opacity: 1 !important;
}

/* [TABLET] Carosello clienti: griglia 3x3 loghi in trasparenza */
@media (max-width: 1024px) {
    .inst-clients-fullwidth .inst-clients-title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .inst-clients-fullwidth {
        padding: 0 20px;
    }

    .inst-client-duplicate {
        display: none !important;
    }

    .inst-clients-track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px 20px;
        animation: none;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .inst-clients-carousel {
        overflow: visible;
    }

    .inst-clients-carousel::before,
    .inst-clients-carousel::after {
        display: none;
    }

    .inst-client-logo {
        background: transparent;
        border-radius: 0;
        height: auto;
        padding: 0;
        box-shadow: none;
        border: none;
    }

    .inst-client-logo-dark {
        background: #1a1a2e;
        border-radius: 12px;
        padding: 12px;
    }

    .inst-client-hide-mobile {
        display: none !important;
    }

    .inst-client-logo img {
        height: auto !important;
        max-height: 50px !important;
        min-height: unset !important;
        max-width: 100%;
        object-fit: contain;
        filter: none;
        opacity: 1;
    }

    .inst-client-logo-dark img {
        filter: none;
        opacity: 1;
    }
}

/* [MOBILE] Carosello clienti: griglia 3x3 full width */
@media (max-width: 600px) {
    .inst-clients-fullwidth .inst-clients-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .inst-clients-fullwidth {
        padding: 0 16px;
    }

    .inst-clients-track {
        gap: 20px 16px;
    }

    .inst-client-logo img {
        max-height: 40px !important;
    }
}

@media (max-width: 768px) {
    /* padding-top gestito dalla regola uniforme [TUTTE] Hero */
    .inst-hero-new {
        padding: 0 20px 0;
    }

    .inst-hero-logo {
        height: 45px;
    }

    .inst-hero-tagline {
        font-size: 26px;
    }

    .inst-hero-description {
        font-size: 16px;
    }

    .inst-hero-description br {
        display: none;
    }

    .inst-hero-cards {
        grid-template-columns: 1fr;
    }

    .inst-hero-trust {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
}

/* ===== Card Logo Styles ===== */
.card-logo-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-logo-contain-left {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
}

/* ===== Solution Header Variants ===== */
.solution-header-purple {
    background: linear-gradient(135deg, #6E46AE 0%, #063046 100%);
}

.solution-header-cyan {
    background: linear-gradient(135deg, #00A5CF 0%, #125978 100%);
}

.solution-header-red {
    background: linear-gradient(135deg, #F9423A 0%, #063046 100%);
}

/* ===== Team Photo Styles ===== */
.team-photo-francesco {
    background: url('/static/img/francesco-deriggi.png') no-repeat;
    background-size: cover;
    background-position: center;
}

.team-photo-alessia {
    background-image: url('/static/img/alessia-lollini.png');
    background-size: 210%;
    background-position: center 20%;
}

.team-photo-matia {
    background-image: url('/static/img/matia-catozzi.jpg');
    background-size: 220%;
    background-position: 40% 40%;
}

/* ===== CTA Button Variants ===== */
.inst-btn-secondary-white {
    border-color: #fff;
    color: #fff;
}

.inst-btn-secondary-white:hover {
    background: #fff;
    color: #063046;
}

/* =====================================================================
   MOBILE: Menu pannello e pagina Prezzi
   ===================================================================== */

/* [MOBILE] Menu pannello - scroll se troppi link */
@media (max-width: 768px) {
    .mobile-menu-panel {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
}

/* [MOBILE] Pagina Prezzi - card impilate verticalmente
   Su schermi ≤992px le 3 card (Smart, Pro, Business) passano da riga a colonna.
   Gap aumentato da 20px a 40px per dare più respiro tra le card */
@media (max-width: 992px) {
    .alia-packages-grid {
        flex-direction: column !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 56px !important;
        padding: 10px 16px !important;
    }

    /* Ogni card occupa tutta la larghezza disponibile su mobile */
    .alia-packages-grid .alia-panel {
        max-width: 100% !important;
        width: 100% !important;
        min-width: unset !important;
    }

    /* [PREZZI MOBILE] padding-top: 0 = la distanza dalla navbar è gestita dal wrapper .prezzi-page */
    .prezzi-page .alia-solution-section {
        padding-top: 0 !important;
    }

    .prezzi-page .prezzi-header {
        padding: 0 16px !important;
    }

    .prezzi-page .alia-solution-title {
        font-size: 24px !important;
    }

    .prezzi-page .alia-solution-desc {
        font-size: 14px !important;
        padding: 0 10px !important;
    }
}

/* =====================================================================
   MOBILE: Ottimizzazioni scroll fluido
   ===================================================================== */

@media (max-width: 768px) {
    html {
        scroll-behavior: auto !important;
    }

    html, body {
        -webkit-overflow-scrolling: touch !important;
        overflow-x: hidden !important;
    }

    .navbar-amazon {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255,255,255,0.98) !important;
    }

    .zoom-in,
    .slide-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .impiegando-home *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]),
    .chi-siamo-page *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
        font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    }

    .orbit-container {
        animation: none !important;
    }

    .orbit-container img {
        animation: none !important;
        transition: none !important;
    }

    .inst-globe-visual {
        display: none !important;
    }

    .inst-globe-container {
        flex-direction: column !important;
    }

    .inst-globe-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =====================================================================
   STILI ESTRATTI DAGLI INLINE — Barra fissa mobile, modali, footer
   ===================================================================== */

/* Icona utente verde nello stato autenticato (pulsanti fissi laterali) */
.btn-login.logged-in .fa-user {
    color: green;
}

/* Pulsante carrello nella barra fissa mobile — posizione relativa per il badge */
.fixed-bar__item.btn-cart.cart-icon {
    position: relative;
}

/* Badge carrello nella barra mobile — posizionato in alto a destra, sfondo rosso */
.mobile-cart-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    background: #F9423A;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cerchio avatar nella barra fissa mobile — gradiente azzurro con iniziali bianche */
.fixed-bar__avatar-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00A5CF 0%, #0089B3 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}

/* Lista opzioni e singola opzione del carrello — nascoste di default */
.cart-options-list,
.cart-option-item {
    display: none;
}

/* Immagine logo nel footer */
.footer-logo img {
    height: 90px;
}

/* ===== STILI INLINE SPOSTATI DA PREZZI.HTML ===== */

/* Vecchia sezione pacchetti — nascosta di default, il JavaScript la mostra quando necessario */
.alia-section {
    display: none;
}

/* Pannello personalizzato Alia Custom — nascosto di default, visibile tramite JavaScript */
.alia-custom {
    display: none;
}

/* Elementi lista personalizzati (booster, indeed, full) — nascosti di default, attivati via JavaScript */
.custom-booster,
.custom-indeed,
.custom-full {
    display: none;
}

/* Badge "Consigliato" per il pacchetto Alia Pro — gradiente viola-azzurro */
.pop-badge-recommended {
    background: linear-gradient(90deg, #6E46AE 0%, #00A5CF 100%);
}

/* Badge "Premium" per il pacchetto Alia Business — gradiente rosso-viola */
.pop-badge-premium {
    background: linear-gradient(90deg, #F9423A 0%, #6E46AE 100%);
}

/* ============================================================
   [ENTERPRISE] DIVISORI A ONDA — Forme grandi blu scuro (#063046)
   Ispirato al design competitor: onde bold che separano le sezioni
   creando un effetto visivo professionale e dinamico
   ============================================================ */

/* Contenitore divisore onda — larghezza piena, senza spazi */
.alia-wave-divider {
    width: 100%;
    line-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
}

/* SVG onda — altezza grande per effetto bold come competitor */
.alia-wave-divider svg {
    display: block;
    width: 100%;
    height: 120px;
}

/* Onda verso il basso — sfondo chiaro sopra, scuro sotto
   Il background del div deve corrispondere alla sezione sopra */
.alia-wave-down {
    margin-bottom: -1px;
    background-color: #EDFBFF;
}

/* Onda verso l'alto — sfondo scuro sopra, chiaro sotto
   Il background del div deve corrispondere alla sezione scura sopra */
.alia-wave-up {
    margin-top: -1px;
    background-color: #EDFBFF;
}

/* ============================================================
   [ENTERPRISE] DIVISORE ANGOLATO — taglio diagonale morbido
   Stile ispirato al competitor: curva dolce, non un'onda
   ============================================================ */

/* Contenitore divisore angolato — larghezza piena, senza spazi */
.alia-angle-divider {
    width: 100%;
    line-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
}

/* SVG angolato — altezza generosa per effetto diagonale visibile */
.alia-angle-divider svg {
    display: block;
    width: 100%;
    height: 150px;
}

/* Angolo verso il basso — sfondo chiaro (hero) sopra, scuro sotto */
.alia-angle-down {
    margin-bottom: -1px;
    background: linear-gradient(180deg, #EDFBFF 0%, #d4f2fb 100%);
}

/* Angolo verso l'alto — sfondo scuro sopra, chiaro sotto */
.alia-angle-up {
    margin-top: -1px;
    background: linear-gradient(180deg, #0a3d55 0%, #EDFBFF 100%);
}

/* [ENTERPRISE] Sezioni che precedono/seguono le onde — azzera margini per evitare gap visibili */
.alia-page .alia-modes,
.alia-page .alia-funziona-puzzle,
.alia-page .rotation-box-section,
.alia-page .alia-carousel-section,
.alia-page .avatar-section,
.alia-page .enterprise-section-pack,
.alia-page .faq-section,
.alia-page .enterprise-cta-contact {
    margin-bottom: 0 !important;
}

/* ============================================================
   [ENTERPRISE] SEZIONI CON SFONDO SCURO — Blu notte (#063046)
   Le sezioni alternate scure creano contrasto con quelle chiare,
   i testi diventano bianchi per leggibilità.
   Gradiente orizzontale da blu notte a turchese, come design Figma.
   Padding generoso per respiro del contenuto.
   ============================================================ */
.alia-page .alia-section-dark {
    background: linear-gradient(90deg, #063046 0%, #0a5a7a 50%, #1a95b5 100%) !important;
    color: #ffffff !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* [ENTERPRISE] FAQ — ora usa le stesse classi faq-section di tutte le altre pagine */


/* [PACK] Disabilita qualsiasi animazione sulla sezione "Più di un semplice pacchetto" */
.enterprise-section-pack,
.enterprise-section-pack *,
.enterprise-pack-card,
.enterprise-pack-content,
.enterprise-pack-img-wrap,
.enterprise-pack-img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}


/* Tutti i testi nelle sezioni scure diventano bianchi */
.alia-page .alia-section-dark h1,
.alia-page .alia-section-dark h2,
.alia-page .alia-section-dark h3,
.alia-page .alia-section-dark h4,
.alia-page .alia-section-dark h5,
.alia-page .alia-section-dark h6,
.alia-page .alia-section-dark p,
.alia-page .alia-section-dark span,
.alia-page .alia-section-dark div,
.alia-page .alia-section-dark li,
.alia-page .alia-section-dark label {
    color: #ffffff !important;
}

/* Titolo heading gradient su sfondo scuro — sostituisce blu notte con bianco per visibilità
   NON applicato alla sezione unificata che ha colori scuri propri */
.alia-page .alia-section-dark .alia-modes-heading:not(.alia-modes-unified .alia-modes-heading) {
    background: linear-gradient(135deg, #00A5CF, #6E46AE, #F9423A, #ffffff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Card nelle sezioni scure — sfondo semi-trasparente bianco */
.alia-page .alia-section-dark .alia-mode-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Hover sulle card scure — più luminose */
.alia-page .alia-section-dark .alia-mode-card:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Rotation box su sfondo scuro — testo bianco, bordo chiaro */
.alia-page .alia-section-dark .rotation-box {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.alia-page .alia-section-dark .rotation-quote {
    color: #ffffff !important;
}

/* Avatar section su sfondo scuro — testo chiaro */
.alia-page .alia-section-dark .avatar-section-text {
    color: #ffffff !important;
}


/* CTA contact su sfondo scuro — testo bianco */
.alia-section-dark .enterprise-cta-contact-title {
    color: #ffffff !important;
}

.alia-section-dark .enterprise-cta-contact-desc {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Bottone CTA primario su sfondo scuro — mantiene visibilità */
.alia-section-dark .enterprise-cta-primary {
    background: linear-gradient(135deg, #00A5CF, #0088B0) !important;
    color: #ffffff !important;
    border: none !important;
}

.alia-section-dark .enterprise-cta-primary:hover {
    background: linear-gradient(135deg, #0088B0, #006D8F) !important;
}

/* ============================================================
   [ENTERPRISE] RESPONSIVE ONDE — Altezza ridotta su mobile
   ============================================================ */

@media (max-width: 768px) {
    /* Onde più piccole su mobile per non occupare troppo spazio */
    .alia-wave-divider svg {
        height: 60px;
    }

    /* Divisore angolato più basso su mobile */
    .alia-angle-divider svg {
        height: 80px;
    }
}

/* ============================================================
   PAGINE LEGALI - Stile moderno tipo Jobbir
   Usato da: contratto.html, privacy-policy.html,
             privacy-candidati.html, nomina-responsabile.html
   ============================================================ */

/* Scroll fluido per i link dell'indice */
html {
    scroll-behavior: smooth;
}

/* Container principale delle pagine legali */
/* [CONTRATTO] Stili specifici per la pagina contratto */
body.page-contratto {
}

.legal-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 60px 24px 100px;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1a1a2e;
    line-height: 1.8;
    font-size: 15px;
}

/* Link "Torna indietro" in cima alla pagina */
.legal-page .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 40px;
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s;
}

/* Hover del link "Torna indietro" */
.legal-page .back-link:hover {
    color: #4f46e5;
}

/* Titolo principale della pagina legale */
.legal-page h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a2e;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* Sottotitolo della pagina legale */
.legal-page .legal-subtitle {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 40px;
    font-weight: 400;
}

/* Box dell'indice dei contenuti (Table of Contents) */
.legal-page .toc {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 48px;
}

/* Titolo "Indice" nel box TOC */
.legal-page .toc-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* Lista ordinata dentro il TOC */
.legal-page .toc ol {
    margin: 0;
    padding-left: 20px;
    columns: 1;
}

/* Singola voce del TOC */
.legal-page .toc li {
    font-size: 14px;
    margin-bottom: 8px;
    color: #374151;
}

/* Link cliccabili nel TOC */
.legal-page .toc a {
    color: #4f46e5;
    text-decoration: none;
    transition: color 0.2s;
}

/* Hover dei link nel TOC */
.legal-page .toc a:hover {
    color: #6366f1;
    text-decoration: underline;
}

/* Titoli delle sezioni (h2) con bordo inferiore */
.legal-page h2 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 48px;
    margin-bottom: 16px;
    color: #1a1a2e;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* Sotto-titoli delle sezioni (h3) */
.legal-page h3 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 28px;
    margin-bottom: 10px;
    color: #374151;
}

/* Paragrafi nelle pagine legali */
.legal-page p {
    font-size: 15px;
    margin-bottom: 16px;
    color: #374151;
}

/* Liste (puntate e numerate) nelle pagine legali */
.legal-page ul,
.legal-page ol {
    margin: 8px 0 20px 24px;
}

/* Singoli elementi delle liste */
.legal-page ul li,
.legal-page ol li {
    font-size: 15px;
    margin-bottom: 8px;
    color: #374151;
}

/* Lista puntata con pallini */
.legal-page ul {
    list-style-type: disc;
}

/* Testo in grassetto nelle pagine legali */
.legal-page strong {
    color: #1a1a2e;
}

/* Box contatti (email, indirizzo) evidenziato */
.legal-page .contact-box {
    background: #f0f4ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0 24px;
    font-size: 14px;
}

/* ===== JOBBIR LANDING PAGE (Google Ads) ===== */

/* [JOBBIR] Container principale */
.jb-landing {
    color: var(--darker-blue);
}


/* [JOBBIR] Container con larghezza massima */
.jb-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* [JOBBIR] Sezione generica con padding verticale */
.jb-section {
    padding: 0;
}

/* [JOBBIR] Hero section */
.jb-hero {
    padding: 48px 0;
    text-align: center;
}

/* [JOBBIR] Wrapper logo centrato nella hero */
.jb-logo-wrapper {
    text-align: center;
    margin-bottom: 24px;
}

/* [JOBBIR] Logo Jobbir con animazione bagliore */
.jb-hero-logo {
    height: 120px;
    width: auto;
    max-width: 400px;
    object-fit: contain;
    animation: jbStarShine 3s ease-in-out infinite;
}

/* [JOBBIR] Keyframes animazione bagliore logo */
@keyframes jbStarShine {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(0, 165, 207, 0.3));
        transform: scale(1);
    }
    25% {
        filter:
            drop-shadow(0 0 15px rgba(0, 165, 207, 0.8))
            drop-shadow(0 0 30px rgba(93, 217, 240, 0.5))
            drop-shadow(0 0 50px rgba(0, 165, 207, 0.3));
        transform: scale(1.05);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(0, 165, 207, 0.4));
        transform: scale(1);
    }
    75% {
        filter:
            drop-shadow(0 0 20px rgba(110, 70, 174, 0.7))
            drop-shadow(0 0 40px rgba(0, 165, 207, 0.5))
            drop-shadow(0 0 60px rgba(93, 217, 240, 0.3));
        transform: scale(1.07);
    }
}

/* [JOBBIR] Logo ridotto su mobile */
@media (max-width: 768px) {
    .jb-hero-logo {
        height: 80px;
    }
}

/* [JOBBIR] Titolo hero grande e impattante */
.jb-hero-title {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 auto 20px;
    max-width: 800px;
    color: var(--darker-blue);
}

/* [JOBBIR] Sottotitolo hero */
.jb-hero-sub {
    font-size: 19px;
    line-height: 1.6;
    color: var(--dark-blue);
    max-width: 600px;
    margin: 0 auto 32px;
}

/* [JOBBIR] Gruppo CTA centrato nella hero */
.jb-hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-bottom: 20px;
}

/* [JOBBIR] Bottone primario */
.jb-btn-primary {
    height: 56px;
    padding: 0 32px;
    border-radius: 14px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    min-width: 220px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: filter 0.2s, transform 0.2s;
}
.jb-btn-primary:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* [JOBBIR] Bottone secondario ghost */
.jb-btn-ghost {
    height: 56px;
    padding: 0 32px;
    border-radius: 14px;
    background: #fff;
    color: var(--darker-blue);
    font-weight: 700;
    font-size: 16px;
    border: 1px solid rgba(162, 240, 255, 0.5);
    cursor: pointer;
    display: inline-flex;
    min-width: 220px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}
.jb-btn-ghost:hover {
    box-shadow: 0 8px 32px rgba(0, 162, 224, 0.15);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--darker-blue);
}

/* [JOBBIR] Badge con numeri/statistiche sotto hero */
.jb-trust-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.jb-trust-item {
    text-align: center;
}
.jb-trust-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    display: block;
}
.jb-trust-label {
    font-size: 14px;
    color: var(--dark-blue);
    margin-top: 4px;
}

/* [JOBBIR] Titolo di sezione centrato */
.jb-section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
    color: var(--darker-blue);
}

/* [JOBBIR] Sottotitolo di sezione centrato */
.jb-section-sub {
    text-align: center;
    font-size: 17px;
    color: var(--dark-blue);
    max-width: 600px;
    margin: 0 auto 48px;
    line-height: 1.6;
}

/* [JOBBIR] Griglia 3 colonne per benefit/steps */
.jb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* [JOBBIR] Card beneficio/step */
.jb-card {
    background: #fff;
    border: 1px solid rgba(162, 240, 255, 0.35);
    border-radius: 20px;
    box-shadow: 0 8px 36px rgba(0, 162, 224, 0.09);
    padding: 32px 28px;
    transition: box-shadow 0.25s, transform 0.25s;
}
.jb-card:hover {
    box-shadow: 0 14px 52px rgba(0, 162, 224, 0.16);
    transform: translateY(-3px);
}

/* [JOBBIR] Icona rotonda nella card */
.jb-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(0, 165, 207, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 24px;
    color: var(--primary-color);
}

/* [JOBBIR] Titolo card */
.jb-card h3 {
    font-size: 20px;
    font-weight: 750;
    margin: 0 0 10px;
    color: var(--darker-blue);
}

/* [JOBBIR] Testo card */
.jb-card p {
    margin: 0;
    color: var(--dark-blue);
    line-height: 1.55;
    font-size: 15px;
}

/* [JOBBIR] Numero step circolare */
.jb-step-num {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 16px;
}

/* [JOBBIR] Sezione come funziona */
.jb-how-section {
    background: transparent;
    padding: 0;
}
/* [JOBBIR] Perché scegliere Jobbir - sfondo verde Smart (#2a6f44) */
.jb-perche-section {
    background: #2a6f44 !important;
    border-radius: 32px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 40px;
    color: #ffffff;
}
/* [JOBBIR] Perché - testo bianco su sfondo verde */
.jb-perche-section .jb-section-title,
.jb-perche-section .jb-section-sub {
    color: #ffffff;
}

/* [JOBBIR] Come funziona - sfondo oro Pro (#a3991c) */
.jb-come-funziona-section {
    background: #a3991c !important;
    border-radius: 32px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 40px;
    color: #ffffff;
}
/* [JOBBIR] Come funziona - testo bianco su sfondo oro */
.jb-come-funziona-section .jb-section-title,
.jb-come-funziona-section .jb-section-sub {
    color: #ffffff;
}

/* [JOBBIR] Griglia prezzi 3 colonne */
.jb-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

/* [JOBBIR] Card prezzo */
.jb-plan {
    position: relative;
    background: #fff;
    border: 1px solid rgba(162, 240, 255, 0.35);
    border-radius: 20px;
    box-shadow: 0 8px 36px rgba(0, 162, 224, 0.09);
    padding: 32px 28px;
    transition: box-shadow 0.25s, transform 0.25s;
}
.jb-plan:hover {
    box-shadow: 0 14px 52px rgba(0, 162, 224, 0.16);
    transform: translateY(-3px);
}

/* [JOBBIR] Card prezzo evidenziata (più venduto) */
.jb-plan--featured {
    border-color: var(--primary-color);
    box-shadow: 0 8px 36px rgba(0, 162, 224, 0.18);
}

/* [JOBBIR] Badge "Più venduto" */
.jb-plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
    white-space: nowrap;
}

/* [JOBBIR] Nome piano */
.jb-plan-name {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--darker-blue);
}

/* [JOBBIR] Descrizione breve piano */
.jb-plan-desc {
    color: var(--dark-blue);
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* [JOBBIR] Prezzo grande */
.jb-plan-price {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 12px 0 20px;
}
.jb-plan-price .jb-price-num {
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--darker-blue);
}
.jb-plan-price .jb-price-eur {
    font-size: 22px;
    font-weight: 900;
    color: var(--accent-color);
    margin-bottom: 6px;
}
.jb-plan-price .jb-price-per {
    font-size: 14px;
    color: var(--dark-blue);
    margin-bottom: 8px;
}

/* [JOBBIR] Lista features del piano */
.jb-plan-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 12px;
}
.jb-plan-li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.45;
    color: var(--darker-blue);
}

/* [JOBBIR] Icona check nella lista prezzi */
.jb-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(0, 165, 207, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    margin-top: 1px;
    color: var(--primary-color);
    font-weight: 900;
    font-size: 12px;
}

/* [JOBBIR] Tooltip portali inclusi */
.jb-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
/* [JOBBIR] Bottone "i" per tooltip */
.jb-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 165, 207, 0.4);
    color: var(--primary-color);
    font-weight: 900;
    font-size: 11px;
    margin-left: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
/* [JOBBIR] Contenuto tooltip portali - posizionato rispetto alla card */
.jb-tooltip-content {
    position: absolute;
    right: -10px;
    top: 28px;
    left: auto;
    width: min(300px, 80vw);
    background: #fff;
    border: 1px solid rgba(162, 240, 255, 0.5);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 12px 48px rgba(0, 162, 224, 0.18);
    color: var(--dark-blue);
    font-size: 13px;
    line-height: 1.7;
    display: none;
    z-index: 100;
    word-wrap: break-word;
}
/* [JOBBIR] Tooltip visibile al hover (desktop) */
.jb-tooltip-wrap:hover .jb-tooltip-content {
    display: block;
}
/* [JOBBIR] Tooltip visibile al click (mobile) - classe aggiunta via JS */
.jb-tooltip-wrap.jb-tooltip-active .jb-tooltip-content {
    display: block;
}
/* [JOBBIR] Tooltip mobile - posizionamento centrato */
@media (max-width: 767px) {
    .jb-tooltip-content {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: 85vw;
        max-width: 340px;
        z-index: 1000;
        padding: 20px;
        font-size: 14px;
        line-height: 1.8;
        border-radius: 16px;
        box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
    }
}
/* [JOBBIR] Overlay scuro dietro tooltip mobile */
.jb-tooltip-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 999;
}

/* [JOBBIR] Nota sotto il piano */
.jb-plan-note {
    margin-top: 12px;
    color: var(--dark-blue);
    font-size: 12px;
    line-height: 1.45;
}

/* [JOBBIR] Contatore annunci nei piani */
.jb-counter-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 165, 207, 0.1);
    gap: 8px;
}

/* [JOBBIR] Label contatore */
.jb-counter-label {
    font-size: 14px;
    color: #003347;
    font-weight: 400;
    flex: 1;
}

/* [JOBBIR] Gruppo bottoni contatore */
.jb-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* [JOBBIR] Bottoni +/- contatore */
.jb-counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #063046;
    background: transparent;
    color: #063046;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

/* [JOBBIR] Hover bottoni contatore */
.jb-counter-btn:hover {
    background: #063046;
    color: #fff;
}

/* [JOBBIR] Quantità contatore */
.jb-counter-qty {
    font-size: 18px;
    font-weight: 700;
    color: #063046;
    min-width: 24px;
    text-align: center;
}

/* [JOBBIR] CTA bottone nel piano */
.jb-plan-cta {
    margin-top: 20px;
}
.jb-plan-cta .jb-btn-primary {
    width: 100%;
}

/* [JOBBIR] Griglia portali 3 colonne */
.jb-portals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

/* [JOBBIR] Card portale singola */
.jb-portal-card {
    background: #fff;
    border: 1px solid rgba(162, 240, 255, 0.35);
    border-radius: 20px;
    box-shadow: 0 8px 36px rgba(0, 162, 224, 0.09);
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s;
}
.jb-portal-card:hover {
    box-shadow: 0 14px 52px rgba(0, 162, 224, 0.16);
    transform: translateY(-3px);
}

/* [JOBBIR] Card portale evidenziata (Pro) */
.jb-portal-card--featured {
    border-color: var(--primary-color);
    box-shadow: 0 8px 36px rgba(0, 162, 224, 0.18);
}

/* [JOBBIR] Header card portale con gradiente */
.jb-portal-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* [JOBBIR] Smart verde - nome piano */
.jb-plan--smart .jb-plan-name {
    color: #2a6f44;
}
/* [JOBBIR] Smart verde - prezzo con effetto gradiente verde animato */
.jb-plan--smart .jb-price-num {
    background: linear-gradient(91deg, #1a5c32 1.46%, #2a6f44 48.22%, #3a9a5c 98.73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
}
/* [JOBBIR] Smart verde - simbolo euro con gradiente verde */
.jb-plan--smart .jb-price-eur {
    background: linear-gradient(91deg, #1a5c32 1.46%, #2a6f44 48.22%, #3a9a5c 98.73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
}
/* [JOBBIR] Smart verde - check marks */
.jb-plan--smart .jb-check {
    color: #2a6f44;
}
/* [JOBBIR] Smart verde - bottone acquista */
.jb-plan--smart .jb-btn-primary {
    background: #2a6f44;
}
/* [JOBBIR] Smart verde - bottone hover */
.jb-plan--smart .jb-btn-primary:hover {
    background: #235a38;
}
/* [JOBBIR] Smart verde - info button */
.jb-plan--smart .jb-info-btn {
    border-color: rgba(42, 111, 68, 0.4);
    color: #2a6f44;
}
/* [JOBBIR] Header Smart - sfondo verde chiaro */
.jb-portal-smart {
    background: linear-gradient(135deg, #e0f5e8 0%, #f0faf4 100%);
}
/* [JOBBIR] Smart verde - nome piano nella card portali */
.jb-portal-smart .jb-portal-plan-name {
    color: #2a6f44;
}
/* [JOBBIR] Smart verde - conteggio portali nella card */
.jb-portal-smart .jb-portal-count {
    color: #2a6f44;
}

/* [JOBBIR] PRO oro - nome piano */
.jb-plan--pro .jb-plan-name {
    color: #a3991c;
}
/* [JOBBIR] PRO oro - prezzo con gradiente oro animato */
.jb-plan--pro .jb-price-num {
    background: linear-gradient(91deg, #8a8010 1.46%, #a3991c 48.22%, #c4b830 98.73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
}
/* [JOBBIR] PRO oro - simbolo euro con gradiente oro */
.jb-plan--pro .jb-price-eur {
    background: linear-gradient(91deg, #8a8010 1.46%, #a3991c 48.22%, #c4b830 98.73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
}
/* [JOBBIR] PRO oro - check marks */
.jb-plan--pro .jb-check {
    color: #a3991c;
}
/* [JOBBIR] PRO oro - bottone acquista */
.jb-plan--pro .jb-btn-primary {
    background: #a3991c;
}
/* [JOBBIR] PRO oro - bottone hover */
.jb-plan--pro .jb-btn-primary:hover {
    background: #8a8010;
}
/* [JOBBIR] PRO oro - info button */
.jb-plan--pro .jb-info-btn {
    border-color: rgba(163, 153, 28, 0.4);
    color: #a3991c;
}
/* [JOBBIR] PRO oro - badge "Più venduto" */
.jb-plan--pro .jb-plan-badge {
    background: linear-gradient(90deg, #8a8010, #a3991c, #c4b830);
}
/* [JOBBIR] PRO oro - bordo card featured */
.jb-plan--pro.jb-plan--featured {
    border-color: #a3991c;
    box-shadow: 0 8px 36px rgba(163, 153, 28, 0.18);
}

/* [JOBBIR] BUSINESS teal - nome piano */
.jb-plan--business .jb-plan-name {
    color: #00586f;
}
/* [JOBBIR] BUSINESS teal - prezzo con gradiente teal animato */
.jb-plan--business .jb-price-num {
    background: linear-gradient(91deg, #004558 1.46%, #00586f 48.22%, #007a8a 98.73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
}
/* [JOBBIR] BUSINESS teal - simbolo euro con gradiente teal */
.jb-plan--business .jb-price-eur {
    background: linear-gradient(91deg, #004558 1.46%, #00586f 48.22%, #007a8a 98.73%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: gradientFlow 3s ease-in-out infinite;
}
/* [JOBBIR] BUSINESS teal - check marks */
.jb-plan--business .jb-check {
    color: #00586f;
}
/* [JOBBIR] BUSINESS teal - bottone acquista */
.jb-plan--business .jb-btn-primary {
    background: #00586f;
}
/* [JOBBIR] BUSINESS teal - bottone hover */
.jb-plan--business .jb-btn-primary:hover {
    background: #004558;
}
/* [JOBBIR] BUSINESS teal - info button */
.jb-plan--business .jb-info-btn {
    border-color: rgba(0, 88, 111, 0.4);
    color: #00586f;
}

/* [JOBBIR] Header Pro - sfondo oro chiaro */
.jb-portal-pro {
    background: linear-gradient(135deg, #f5f0d0 0%, #faf8e8 100%);
}
/* [JOBBIR] PRO oro - nome piano nella card portali */
.jb-portal-pro .jb-portal-plan-name {
    color: #a3991c;
}
/* [JOBBIR] PRO oro - conteggio portali nella card */
.jb-portal-pro .jb-portal-count {
    color: #a3991c;
}

/* [JOBBIR] Header Business - sfondo teal chiaro */
.jb-portal-business {
    background: linear-gradient(135deg, #d0eff5 0%, #e8f8fb 100%);
}
/* [JOBBIR] BUSINESS teal - nome piano nella card portali */
.jb-portal-business .jb-portal-plan-name {
    color: #00586f;
}
/* [JOBBIR] BUSINESS teal - conteggio portali nella card */
.jb-portal-business .jb-portal-count {
    color: #00586f;
}

/* [JOBBIR] Card portali - sfondo sfumato per pacchetto (intenso) */
.jb-portal-card--smart {
    background: linear-gradient(180deg, #c8e8d0 0%, #e5f5eb 100%);
    border-color: rgba(42, 111, 68, 0.3);
}
.jb-portal-card--smart:hover {
    box-shadow: 0 14px 52px rgba(42, 111, 68, 0.2);
}
.jb-portal-card--pro {
    background: linear-gradient(180deg, #ebe5b8 0%, #f5f1d8 100%);
    border-color: rgba(163, 153, 28, 0.35);
}
.jb-portal-card--pro:hover {
    box-shadow: 0 14px 52px rgba(163, 153, 28, 0.2);
}
.jb-portal-card--pro.jb-portal-card--featured {
    border-color: rgba(163, 153, 28, 0.45);
    box-shadow: 0 8px 36px rgba(163, 153, 28, 0.2);
}
.jb-portal-card--business {
    background: linear-gradient(180deg, #c0e4ed 0%, #dff2f7 100%);
    border-color: rgba(0, 88, 111, 0.3);
}
.jb-portal-card--business:hover {
    box-shadow: 0 14px 52px rgba(0, 88, 111, 0.2);
}

/* [JOBBIR] Nome piano nell'header portali */
.jb-portal-plan-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--darker-blue);
}

/* [JOBBIR] Contatore portali nell'header */
.jb-portal-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(0, 165, 207, 0.1);
    padding: 4px 14px;
    border-radius: 999px;
}

/* [JOBBIR] Lista portali */
.jb-portal-list {
    list-style: none;
    margin: 0;
    padding: 20px 24px;
    display: grid;
    gap: 0;
}
.jb-portal-list li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(162, 240, 255, 0.3);
    font-size: 14px;
    color: var(--darker-blue);
    display: flex;
    align-items: center;
    gap: 8px;
}
.jb-portal-list li:last-child {
    border-bottom: none;
}
/* [JOBBIR] Pallino colorato prima di ogni portale */
.jb-portal-list li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    display: inline-block;
    flex-shrink: 0;
}

/* [JOBBIR] Pallino verde per Smart */
.jb-portal-card--smart .jb-portal-list li::before {
    background: #2a6f44;
}
/* [JOBBIR] Pallino oro per Pro */
.jb-portal-card--pro .jb-portal-list li::before {
    background: #a3991c;
}
/* [JOBBIR] Pallino teal per Business */
.jb-portal-card--business .jb-portal-list li::before {
    background: #00586f;
}
/* [JOBBIR] Logo portale nella lista - più grande */
.jb-portal-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}
/* [JOBBIR] Nasconde pallino quando c'è il logo */
.jb-portal-list li:has(.jb-portal-logo)::before {
    display: none;
}
/* [JOBBIR] Sezione portali - sfondo elegante con gradiente e angoli morbidi */
.jb-portals-section {
    background: linear-gradient(160deg, #063046 0%, #125978 40%, #0a4a6e 70%, #063046 100%) !important;
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 40px;
}
.jb-portals-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 20% 20%, rgba(162, 240, 255, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(110, 70, 174, 0.06) 0%, transparent 50%);
    pointer-events: none;
}
.jb-portals-section .jb-section-title {
    color: #fff;
}
.jb-portals-section .jb-section-sub {
    color: rgba(255, 255, 255, 0.7);
}
/* [JOBBIR] Nota portale su sfondo scuro */
.jb-portals-section .jb-portal-note {
    color: rgba(255, 255, 255, 0.5);
}
/* [JOBBIR] CTA bottoni posizionati tra hero e prima sezione */
.jb-ctas-mid {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 30px 60px;
    margin: 20px auto 120px;
    background: linear-gradient(135deg, #063046 0%, #125978 100%);
    border: none;
    border-radius: 60px;
    max-width: fit-content;
    backdrop-filter: blur(10px);
}

/* [JOBBIR] Portale evidenziato (Indeed nel Business) */
.jb-portal-highlight {
    font-weight: 700;
    color: var(--primary-color);
}

/* [JOBBIR] Nota sotto lista portali */
.jb-portal-note {
    padding: 0 24px 16px;
    font-size: 12px;
    color: var(--dark-blue);
    margin: 0;
    line-height: 1.45;
}

/* [JOBBIR] Responsive portali - mobile */
@media (max-width: 900px) {
    .jb-portals-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* [JOBBIR] Sezione CTA finale */
.jb-final-cta {
    background: linear-gradient(135deg, var(--darker-blue) 0%, var(--dark-blue) 100%);
    padding: 60px 0;
    text-align: center;
}
.jb-final-cta h2 {
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
.jb-final-cta p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    margin: 0 auto 32px;
    max-width: 500px;
    line-height: 1.6;
}
.jb-final-cta .jb-btn-primary {
    font-size: 18px;
    height: 60px;
    padding: 0 40px;
}

/* [JOBBIR] Responsive - tablet e mobile */
@media (max-width: 900px) {
    .jb-hero-title {
        font-size: 34px;
    }
    .jb-hero-sub {
        font-size: 16px;
    }
    .jb-grid-3,
    .jb-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    .jb-section-title {
        font-size: 28px;
    }
    .jb-trust-bar {
        gap: 24px;
    }
    .jb-trust-num {
        font-size: 26px;
    }
    .jb-plan-badge {
        top: -12px;
    }
    .jb-portals-section,
    .jb-come-funziona-section,
    .jb-perche-section {
        border-radius: 24px;
        padding: 40px 20px;
        margin-left: 12px;
        margin-right: 12px;
    }
    .jb-final-cta h2 {
        font-size: 28px;
    }
}

/* ============================================================
   [PREZZI] GRADIENTI PER-PACCHETTO - Fine file per massima priorità
   Smart = #2a6f44 (verde)
   Pro = #a3991c (oro)
   Business = #00586f (teal)
   ============================================================ */

/* [PREZZI] SMART - gradiente verde animato su prezzo e euro */
.alia-smart .alia-price,
.alia-smart .alia-euro.gradient-text {
    background: linear-gradient(91deg, #1a5c32 1.46%, #2a6f44 48.22%, #3a9a5c 98.73%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% 100% !important;
    animation: gradientFlow 3s ease-in-out infinite !important;
}
/* [PREZZI] SMART - titolo pacchetto */
.alia-smart .alia-title {
    color: #2a6f44 !important;
}
/* [PREZZI] SMART - bottone acquista */
.alia-smart .alia-buy-btn {
    background: #2a6f44 !important;
}
/* [PREZZI] SMART - bottone hover */
.alia-smart .alia-buy-btn:hover {
    background: #235a38 !important;
}
/* [PREZZI] SMART - info icon */
.alia-smart .info-icon {
    border-color: rgba(42, 111, 68, 0.4) !important;
    color: #2a6f44 !important;
}

/* [PREZZI] PRO - gradiente oro animato su prezzo e euro */
.alia-pro .alia-price,
.alia-pro .alia-euro.gradient-text {
    background: linear-gradient(91deg, #8a8010 1.46%, #a3991c 48.22%, #c4b830 98.73%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% 100% !important;
    animation: gradientFlow 3s ease-in-out infinite !important;
}
/* [PREZZI] PRO - titolo pacchetto */
.alia-pro .alia-title {
    color: #a3991c !important;
}
/* [PREZZI] PRO - bottone acquista */
.alia-pro .alia-buy-btn {
    background: #a3991c !important;
}
/* [PREZZI] PRO - bottone hover */
.alia-pro .alia-buy-btn:hover {
    background: #8a8010 !important;
}
/* [PREZZI] PRO - info icon */
.alia-pro .info-icon {
    border-color: rgba(163, 153, 28, 0.4) !important;
    color: #a3991c !important;
}
/* [PREZZI] PRO - badge "Più venduto" gradiente oro */
.alia-pro .pop-badge {
    background: linear-gradient(90deg, #8a8010, #a3991c, #c4b830) !important;
}

/* [PREZZI] BUSINESS - gradiente teal animato su prezzo e euro */
.alia-business .alia-price,
.alia-business .alia-euro.gradient-text {
    background: linear-gradient(91deg, #004558 1.46%, #00586f 48.22%, #007a8a 98.73%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% 100% !important;
    animation: gradientFlow 3s ease-in-out infinite !important;
}
/* [PREZZI] BUSINESS - titolo pacchetto */
.alia-business .alia-title {
    color: #00586f !important;
}
/* [PREZZI] BUSINESS - bottone acquista */
.alia-business .alia-buy-btn {
    background: #00586f !important;
}
/* [PREZZI] BUSINESS - bottone hover */
.alia-business .alia-buy-btn:hover {
    background: #004558 !important;
}
/* [PREZZI] BUSINESS - info icon */
.alia-business .info-icon {
    border-color: rgba(0, 88, 111, 0.4) !important;
    color: #00586f !important;
}
/* =========================================================
   PORTALI (LIVE) — stili base badge (usati anche in jobbir.html)
   ========================================================= */
.jb-portal-list--status { margin: 0; padding: 0; list-style: none; }
.jb-portal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.jb-portal-row:last-child { border-bottom: 0; }

.jb-portal-name { font-weight: 500; line-height: 1.2; }
.jb-portal-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); white-space: nowrap; }
/* [PORTALI] Badge LIVE con pallino animato pulsante */
.jb-portal-live {
    background: rgba(34,197,94,.15);
    border-color: rgba(34,197,94,.3);
    color: #166534;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.jb-portal-live::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5abc3e;
    animation: portalLivePulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes portalLivePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}
.jb-portal-offline { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25); color: #991b1b; }
.jb-portal-info { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.20); color: #1e40af; }

.jb-portals-legal-note { margin-top: 14px; font-size: 13px; opacity: .85; }

/* =========================================================
   PAGINA /PORTALI — Hero
   ========================================================= */
/* [PORTALI] Hero — sfondo pagina default */
.portali-hero {
    text-align: center;
    padding: 60px 24px 20px;
    background: transparent;
}
/* [PORTALI] Icona hero — cerchio scuro */
.portali-hero-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #063046, #0d5575);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 26px;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(6, 48, 70, 0.2);
}
/* [PORTALI] Titolo hero — testo sfumato professionale */
.portali-hero-title {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #063046, #00A5CF, #6E46AE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 auto 18px;
    padding: 0 20px 6px;
    letter-spacing: -0.025em;
    line-height: 1.3;
}
/* [PORTALI] Sottotitolo descrittivo */
.portali-hero-sub {
    font-size: 16px;
    font-weight: 500;
    color: #125978;
    line-height: 1.5;
    margin: 0 auto 10px;
    max-width: 700px;
}
/* [PORTALI] Nota informativa secondaria */
.portali-hero-note {
    font-size: 13.5px;
    font-weight: 400;
    color: #5a7d8f;
    line-height: 1.5;
    margin: 0 auto 28px;
    max-width: 700px;
}
/* [PORTALI] Legenda stati — separatori verticali */
.portali-legend {
    display: inline-flex;
    gap: 0;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-bottom: 4px;
}
/* [PORTALI] Singolo item legenda con separatore verticale */
.portali-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #3a6a7e;
    font-weight: 500;
    padding: 0 20px;
    border-right: 1px solid rgba(6, 48, 70, 0.12);
}
/* [PORTALI] Ultimo item legenda senza bordo destro */
.portali-legend-item:last-child {
    border-right: none;
}
/* [PORTALI] Logo Jobbir nella legenda — più grande + effetto bagliore come pagina jobbir */
.portali-legend-logo {
    height: 64px;
    vertical-align: middle;
    margin-left: 4px;
    margin-bottom: -8px;
    animation: jbStarShine 3s ease-in-out infinite;
}

/* [JOBBIR/PREZZI] Link "vedi elenco" accanto ai portali inclusi */
.jb-portali-link {
    color: #00A5CF;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s;
}
.jb-portali-link:hover {
    color: #063046;
    text-decoration: underline;
}

/* =========================================================
   PAGINA /PORTALI — Sezione Cards
   ========================================================= */
/* [PORTALI] Sezione cards sfondo chiaro — ridotto spazio sopra */
.portali-cards-section {
    padding: 0 20px 60px;
    margin-top: -55px;
}
/* [PORTALI] Griglia 3 colonne */
.portali-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}
/* [PORTALI] Card singola */
.portali-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* [PORTALI] Card hover */
.portali-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}
/* [PORTALI] Header card con colore pacchetto */
.portali-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    color: #fff;
}
/* [PORTALI] Header Smart verde */
.portali-card-header--smart {
    background: linear-gradient(135deg, #2a6f44, #358755);
}
/* [PORTALI] Header Pro oro */
.portali-card-header--pro {
    background: linear-gradient(135deg, #a3991c, #bab22a);
}
/* [PORTALI] Header Business teal */
.portali-card-header--business {
    background: linear-gradient(135deg, #00586f, #007a8a);
}
/* [PORTALI] Icona rotonda nell'header */
.portali-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
/* [PORTALI] Titolo pacchetto nell'header */
.portali-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
/* [PORTALI] Conteggio portali nell'header */
.portali-card-count {
    font-size: 13px;
    opacity: 0.85;
}
/* [PORTALI] Prezzo nell'header allineato a destra */
.portali-card-price {
    margin-left: auto;
    font-size: 24px;
    font-weight: 800;
    opacity: 0.9;
}
/* [PORTALI] Lista portali nella card */
.portali-list {
    list-style: none;
    margin: 0;
    padding: 8px 24px;
}
/* [PORTALI] Singolo portale nella lista */
.portali-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* [PORTALI] Ultimo item senza bordo */
.portali-list-item:last-child {
    border-bottom: none;
}
/* [PORTALI] Nome portale */
.portali-list-name {
    font-weight: 500;
    font-size: 15px;
    color: #1a1a1a;
}
/* [PORTALI] Portale Indeed evidenziato */
.portali-list-item--highlight .portali-list-name {
    font-weight: 700;
    color: #00586f;
}
/* [PORTALI] Asterisco Indeed */
.portali-indeed-note {
    color: #00586f;
    font-weight: 700;
}
/* [PORTALI] Nota a piè card */
.portali-card-footnote {
    padding: 0 24px 16px;
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}
/* [PORTALI] Disclaimer finale con icona */
.portali-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 32px;
    padding: 20px 24px;
    background: #c9e8f2;
    border-radius: 14px;
    border: 1px solid #97cfdf;
}
/* [PORTALI] Icona disclaimer */
.portali-disclaimer i {
    color: #125978;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}
/* [PORTALI] Testo disclaimer */
.portali-disclaimer p {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

/* [PORTALI] Responsive tablet e mobile */
@media (max-width: 900px) {
    .portali-hero {
        padding: 36px 16px 20px;
    }
    .portali-hero-title {
        font-size: 26px;
        line-height: 1.2;
    }
    .portali-hero-sub {
        font-size: 14px;
    }
    .portali-hero-note {
        font-size: 12px;
        margin-bottom: 18px;
    }
    .portali-hero-icon {
        width: 52px;
        height: 52px;
        font-size: 20px;
        margin-bottom: 16px;
    }
    .portali-legend-item {
        border-right: none;
        padding: 4px 0;
    }
    .portali-legend {
        flex-direction: column;
        align-items: center;
    }
    .portali-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    .portali-legend {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
    }
}

/* [CARRELLO] Nasconde icona carrello ovunque — acquisto diretto al checkout */
.btn-cart,
.cart-icon,
.fixed-bar__item.btn-cart.cart-icon {
    display: none !important;
}

/* [CARRELLO] Nasconde modale carrello — non più necessario */
.cart-modal-overlay {
    display: none !important;
}

/* [SUB-RESPONSABILI] Wrapper tabella con scroll orizzontale su mobile */
.sub-responsabili-table-wrap {
    overflow-x: auto;
    margin: 32px 0;
    border-radius: 10px;
    border: 1px solid #e0e7ed;
}

/* [SUB-RESPONSABILI] Tabella elenco sub-responsabili */
.sub-responsabili-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 600px;
}

/* [SUB-RESPONSABILI] Intestazione tabella */
.sub-responsabili-table thead th {
    background: #063046;
    color: #fff;
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* [SUB-RESPONSABILI] Celle corpo tabella */
.sub-responsabili-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #e8eef2;
    vertical-align: top;
    color: #1a1a2e;
}

/* [SUB-RESPONSABILI] Righe alternate */
.sub-responsabili-table tbody tr:nth-child(even) {
    background: #f7fbfd;
}

/* [SUB-RESPONSABILI] Hover riga */
.sub-responsabili-table tbody tr:hover {
    background: #edf6fa;
}

/* [SUB-RESPONSABILI] Nota ultimo aggiornamento */
.legal-page .legal-note {
    margin-top: 32px;
    padding: 12px 16px;
    background: #f0f7fa;
    border-left: 3px solid #00A5CF;
    border-radius: 4px;
    font-size: 14px;
}

/* [SUB-RESPONSABILI] Footer azienda */
.legal-page .legal-footer-note {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #e0e7ed;
    font-size: 13px;
    color: #6b7c8a;
}

/* ============================== */
/* US HOMEPAGE — HERO SECTION     */
/* ============================== */

/* Hero container — sfondo spazio blu a tutto schermo */
.idx-hero {
    background: radial-gradient(ellipse at 60% 50%, #ceeef8 0%, #b0e4f4 35%, #89d4ec 70%, #56bee0 100%);
    padding: 100px 0 160px;
    position: relative;
    overflow: hidden;
}

/* Stelle sparse su tutta la Hero — bianche luminose */
.idx-hero::before,
.idx-hero::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Stelle layer 1 */
.idx-hero::before {
    top: 12%;
    left: 8%;
    box-shadow:
        0 0 4px 2px rgba(255, 255, 255, 0.9),
        120px 30px 3px 1px rgba(255, 255, 255, 0.7),
        300px 80px 4px 1px rgba(255, 255, 255, 0.8),
        500px -20px 3px 1px rgba(255, 255, 255, 0.6),
        700px 60px 4px 2px rgba(255, 255, 255, 0.85),
        850px 120px 3px 1px rgba(255, 255, 255, 0.7),
        200px 200px 3px 1px rgba(255, 255, 255, 0.65),
        450px 250px 4px 1px rgba(255, 255, 255, 0.8),
        650px 180px 3px 1px rgba(255, 255, 255, 0.7),
        100px 300px 3px 1px rgba(255, 255, 255, 0.6),
        350px 350px 4px 2px rgba(255, 255, 255, 0.8),
        550px 320px 3px 1px rgba(255, 255, 255, 0.7),
        750px 280px 3px 1px rgba(255, 255, 255, 0.65),
        900px 350px 4px 1px rgba(255, 255, 255, 0.75),
        50px 150px 3px 1px rgba(255, 255, 255, 0.6),
        1000px 200px 3px 1px rgba(255, 255, 255, 0.7);
}

/* Stelle layer 2 */
.idx-hero::after {
    top: 30%;
    right: 15%;
    box-shadow:
        0 0 5px 2px rgba(255, 255, 255, 0.85),
        -200px -50px 4px 1px rgba(255, 255, 255, 0.7),
        -400px 30px 3px 1px rgba(255, 255, 255, 0.65),
        -600px -80px 5px 2px rgba(255, 255, 255, 0.8),
        -100px 120px 4px 1px rgba(255, 255, 255, 0.7),
        -350px 180px 3px 1px rgba(255, 255, 255, 0.6),
        -550px 100px 4px 2px rgba(255, 255, 255, 0.75),
        -750px 150px 3px 1px rgba(255, 255, 255, 0.65),
        -50px -100px 4px 1px rgba(255, 255, 255, 0.7),
        -800px -30px 3px 1px rgba(255, 255, 255, 0.6);
}

/* Hero wave — transizione nuvola verso sezione successiva */
.idx-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    z-index: 5;
    line-height: 0;
}

.idx-hero-wave svg {
    display: block;
    width: 100%;
    height: 80px;
}

/* Hero inner layout — testo a sinistra, visual assoluto a destra */
.idx-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
}

/* Hero badge pill — sfondo scuro blu */
.idx-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #063046;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}

/* Icona nel badge pill */
.idx-hero-badge i {
    color: #6dd8f7;
}

/* Hero main title */
.idx-hero-title {
    font-size: clamp(34px, 5.5vw, 62px);
    font-weight: 900;
    color: #063046;
    line-height: 1.05;
    margin-bottom: 24px;
}

/* Hero title gradient text */
.idx-hero-highlight {
    background: linear-gradient(90deg, #00A5CF, #063046);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero text block — limita larghezza per lasciare spazio al visual */
.idx-hero-text {
    max-width: 620px;
    position: relative;
    z-index: 2;
}

/* Hero subtitle */
.idx-hero-sub {
    font-size: 19px;
    color: #125978;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Hero trust badges row */
.idx-hero-trust {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

/* Hero trust badge items — sfondo scuro blu */
.idx-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: #063046;
    padding: 6px 16px;
    border-radius: 50px;
}

/* Hero trust badge icons */
.idx-hero-trust i {
    color: #6dd8f7;
    font-size: 14px;
}

/* Hero right visual — container per globo + orbite + pianeti */
.idx-hero-visual {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 700px;
    height: 700px;
}

/* Globo centrale (sole) — posizionato al centro, sopra i pianeti dietro */
.sun3d {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    z-index: 20;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 100, 150, 0.18), 0 0 40px rgba(0, 165, 207, 0.12);
}

/* Bordo sfumato azzurro per fondere il globo con lo sfondo */
.sun3d::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 60%, rgba(86, 190, 224, 0.25) 85%, rgba(86, 190, 224, 0.4) 100%);
    pointer-events: none;
    z-index: -1;
}

/* Ombreggiatura 3D leggera sul globo */
.sun3d::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 65% 75%, rgba(0, 80, 120, 0.1) 0%, transparent 45%);
    pointer-events: none;
    z-index: 1;
}

/* Globe canvas */
#globeCanvas {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    box-shadow: inset 0 0 30px rgba(0, 130, 180, 0.08);
}

/* Anelli orbite — sovrapposti al centro */
#rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

/* Singolo anello orbita — bianco luminoso su sfondo chiaro */
#rings .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(255, 255, 255, 0.1);
}

/* Anelli back — piu trasparenti per profondita */
#rings .ring.back {
    opacity: 0.5;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Anelli front — piu luminosi */
#rings .ring.front {
    opacity: 0.9;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.35), inset 0 0 8px rgba(255, 255, 255, 0.12);
}

/* Pianeti — posizionati dal centro del visual, no stacking context */
#planets {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Singolo pianeta (legacy) */
.planet3d {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
}

/* Feature planet — sfera con lettera */
.feat-planet {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    cursor: pointer;
    pointer-events: auto;
}

/* Cerchio colorato con lettera — effetto sfera 3D leggero */
.feat-planet-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.45) 0%, var(--planet-bg) 45%, rgba(0, 0, 0, 0.15) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 14px var(--planet-glow), 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover — zoom sulla sfera */
.feat-planet:hover .feat-planet-circle {
    transform: scale(1.35);
    box-shadow: 0 0 25px var(--planet-glow), 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Tooltip con testo completo */
.feat-planet-tooltip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #063046;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Tooltip visibile al hover */
.feat-planet:hover .feat-planet-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(4px);
}

/* Hero responsive — tablet */
@media (max-width: 991px) {
    .idx-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .idx-hero-visual {
        order: -1;
    }

    .idx-hero-sub {
        margin: 0 auto 40px;
    }

    .idx-hero-trust {
        justify-content: center;
    }

    .idx-hero-badge {
        margin: 0 auto 20px;
    }
}

/* Hero responsive — mobile */
@media (max-width: 768px) {
    .idx-hero {
        padding: 60px 0;
    }

    #globeCanvas {
        width: 280px;
        height: 280px;
    }
}

/* ============================== */
/* TRUST & SECURITY SECTION       */
/* ============================== */

/* Container sezione trust */
.idx-trust-section {
    background: #fff;
    padding: 40px 0 20px;
}

/* Inner layout centrato */
.idx-trust-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Riga badges trust */
.idx-trust-badges {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Singolo badge trust — sfondo scuro */
.idx-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #063046;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    letter-spacing: 1px;
}

/* Icona nel badge trust */
.idx-trust-badge i {
    color: #6dd8f7;
    font-size: 14px;
}

/* Icone pagamento */
.idx-payment-icons {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Singola icona pagamento */
.idx-payment-icons i {
    font-size: 30px;
    color: #063046;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.idx-payment-icons i:hover {
    opacity: 0.8;
}

/* Trust responsive — mobile */
@media (max-width: 600px) {
    .idx-trust-badges {
        gap: 12px;
    }

    .idx-trust-badge {
        font-size: 11px;
        padding: 6px 14px;
    }
}

/* ============================== */
/* JOB BOARDS CAROUSEL SECTION    */
/* ============================== */

/* Container sezione carousel */
.idx-boards-section {
    background: #063046;
    padding: 40px 0 0;
    overflow: hidden;
    margin-top: -130px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* Label sopra il carousel */
.idx-boards-label {
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 24px;
    opacity: 0.9;
}

/* Wrapper per mascherare i bordi */
.idx-boards-track-wrapper {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Track scorrevole */
.idx-boards-track {
    display: flex;
    gap: 24px;
    animation: idx-boards-scroll 35s linear infinite;
    width: max-content;
}

/* Animazione scroll continuo */
@keyframes idx-boards-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Singolo item board — stile pill su sfondo scuro */
.idx-board-item {
    background: rgba(0, 165, 207, 0.3);
    padding: 10px 22px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 1);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

.idx-board-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Pallino indicatore colorato — colore diverso per ogni item */
.idx-board-item::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00A5CF;
    flex-shrink: 0;
}

.idx-board-item:nth-child(10n+1)::before { background: #0077B5; }
.idx-board-item:nth-child(10n+2)::before { background: #2164f3; }
.idx-board-item:nth-child(10n+3)::before { background: #279b37; }
.idx-board-item:nth-child(10n+4)::before { background: #ff4612; }
.idx-board-item:nth-child(10n+5)::before { background: #e02820; }
.idx-board-item:nth-child(10n+6)::before { background: #6e45bc; }
.idx-board-item:nth-child(10n+7)::before { background: #f60; }
.idx-board-item:nth-child(10n+8)::before { background: #ffcc00; }
.idx-board-item:nth-child(10n+9)::before { background: #4285f4; }
.idx-board-item:nth-child(10n+10)::before { background: #00a98f; }

/* Nome portale — testo bianco su sfondo scuro */
.idx-board-item span {
    font-weight: 700;
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 0.3px;
}

/* Disclaimer sotto carousel */
.idx-boards-disclaimer {
    text-align: center;
    font-size: 11px;
    color: #FFFFFF;
    opacity: 0.9;
    max-width: 700px;
    margin: 20px auto 0;
    padding: 0 20px 40px;
    line-height: 1.5;
}

/* Boards carousel — mobile: lista statica centrata senza scorrimento */
@media (max-width: 768px) {
    .idx-boards-track-wrapper {
        mask-image: none;
        -webkit-mask-image: none;
        overflow: visible;
    }

    .idx-boards-track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 10px 12px;
        box-sizing: border-box;
        max-width: 100vw;
    }

    .idx-board-item {
        padding: 6px 12px;
        gap: 6px;
    }

    .idx-board-item span {
        font-size: 11px;
    }

    .idx-boards-disclaimer {
        font-size: 10px;
        padding: 0 16px 30px;
    }

    /* Nasconde le pill duplicate (11° in poi) usate solo per lo scroll desktop */
    .idx-board-item:nth-child(n+11) {
        display: none;
    }

    .idx-boards-section {
        overflow: visible;
    }
}

/* ============================== */
/* SHARED SECTION STYLES          */
/* ============================== */

/* Inner container condiviso */
.idx-section-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Titolo sezione condiviso */
.idx-section-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: #063046;
    text-align: center;
    margin-bottom: 12px;
}

/* Sottotitolo sezione condiviso */
.idx-section-sub {
    font-size: 18px;
    color: #125978;
    text-align: center;
    margin-bottom: 56px;
    line-height: 1.6;
}

/* Divider colorato tra sezioni */
.idx-divider {
    height: 6px;
    margin: 0;
}

.idx-divider-green {
    background: linear-gradient(90deg, #2a6f44, #3dab68);
}

.idx-divider-ocher {
    background: linear-gradient(90deg, #8a8010, #a3991c);
}

.idx-divider-teal {
    background: linear-gradient(90deg, #004558, #00586f);
}

/* CTA primario condiviso */
.idx-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #063046 0%, #00A5CF 100%);
    color: #fff;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 24px rgba(0, 165, 207, 0.3);
}

.idx-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 165, 207, 0.45);
}

/* ============================== */
/* UNIFIED CARDS SECTION          */
/* ============================== */

/* Sezione card unificata — padding extra top sulla prima per coprire azzurrino body */
.idx-cards-section {
    padding: 100px 0;
    text-align: center;
    margin-top: -150px;
}

/* Prima sezione card: margine negativo per coprire gap azzurrino dopo carousel */
.idx-boards-section + .idx-cards-section {
    margin-top: -60px;
    padding-top: 120px;
   }

.idx-cards-bg-green { background: #EDFBFF; }
.idx-cards-bg-gold { background: linear-gradient(180deg, #c8e6c9 0%, #f0e6a0 100%); }
.idx-cards-bg-teal { background: linear-gradient(180deg, #f0e6a0 0%, #b2dfdb 100%); }

.idx-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.idx-unified-card {
    border-radius: 32px;
    padding: 44px 32px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transform: none;
}

.idx-card-green { background: linear-gradient(145deg, #1a5c32, #3dab68); }
.idx-card-gold { background: linear-gradient(145deg, #6b6810, #a3991c); }
.idx-card-teal { background: linear-gradient(145deg, #003547, #00586f); }

.idx-unified-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.15);
}

.idx-unified-card h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 14px;
}

.idx-unified-card p {
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.6;
    margin: 0;
}

.idx-cards-cta {
    text-align: center;
    margin-top: 40px;
}

/* Explore Jobbir standalone CTA between How it Works and Results */
.idx-explore-cta {
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 10;
    top: -120px;
}

@media (max-width: 992px) {
    .idx-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .idx-cards-grid { grid-template-columns: 1fr; }
}

/* ============================== */
/* STATS SECTION                  */
/* ============================== */

/* Container stats — sfondo scuro */
.idx-stats-section {
    background: #063046;
    padding: 80px 0;
}

/* Griglia 4 colonne */
.idx-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1280px;
    margin: 0 auto;
    gap: 40px;
    text-align: center;
    padding: 0 40px;
}

/* Card singola stat */
.idx-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Riga numero + suffisso sulla stessa linea */
.idx-stat-num-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

/* Numero grande */
.idx-stat-num {
    font-size: 56px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

/* Suffisso colorato — inline col numero */
.idx-stat-suffix {
    font-size: 28px;
    font-weight: 800;
    color: #00A5CF;
    margin-left: 4px;
}

/* Label sotto il numero */
.idx-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 10px;
    font-weight: 700;
}

/* Barretta colorata sotto la label */
.idx-stat-bar {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    margin-top: 12px;
}

/* Pillars responsive — tablet */
@media (max-width: 991px) {
    .idx-pillars-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .idx-section-inner {
        padding: 0 20px;
    }
}

/* Stats responsive — tablet */
@media (max-width: 768px) {
    .idx-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ============================== */
/* WORKFLOW SECTION               */
/* ============================== */

/* Container workflow */
.idx-workflow-section {
    background: #fff;
    padding: 100px 0;
}

/* Griglia 3 card + 2 frecce */
.idx-workflow-grid {
    display: flex;
    align-items: stretch;
    gap: 20px;
    justify-content: center;
}

/* Card workflow */
.idx-workflow-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 32px;
    flex: 1;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    opacity: 1;
    transform: none;
}


/* Badge numero step */
.idx-workflow-badge {
    position: absolute;
    top: -14px;
    left: 32px;
    width: 32px;
    height: 32px;
    background: #063046;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}

/* Icona step */
.idx-workflow-icon {
    font-size: 36px;
    color: #00A5CF;
}

/* Titolo step */
.idx-workflow-card h4 {
    font-size: 22px;
    font-weight: 800;
    color: #063046;
    margin: 0;
}

/* Descrizione step */
.idx-workflow-card p {
    font-size: 15px;
    color: #125978;
    line-height: 1.6;
    margin: 0;
}

/* Freccia tra le card */
.idx-workflow-arrow {
    display: flex;
    align-items: center;
    color: #00A5CF;
    font-size: 24px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Workflow responsive */
@media (max-width: 991px) {
    .idx-workflow-grid {
        flex-direction: column;
        align-items: center;
    }

    .idx-workflow-card {
        max-width: 100%;
    }

    .idx-workflow-arrow {
        transform: rotate(90deg);
    }
}

/* ============================== */
/* CTA BIG CARD SECTION           */
/* ============================== */

/* Container CTA */
.idx-cta-card-section {
    background: #EDFBFF;
    padding: 100px 0;
    margin-top: -150px;
}

/* Big card — gradient scuro */
.idx-cta-bigcard {
    background: linear-gradient(135deg, #063046 0%, #0a4a6e 50%, #00A5CF 100%);
    border-radius: 32px;
    padding: 64px;
    display: flex;
    align-items: center;
    gap: 60px;
    box-shadow: 0 20px 60px rgba(6, 48, 70, 0.25);
}

/* Lato sinistro — testo */
.idx-cta-bigcard-left {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Badge "Ready to post?" */
.idx-cta-bigcard-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    align-self: flex-start;
}

.idx-cta-bigcard-badge i {
    color: #6dd8f7;
}

/* Titolo CTA */
.idx-cta-bigcard h2 {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

/* Descrizione CTA */
.idx-cta-bigcard-left > p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
}

/* Feature list */
.idx-cta-bigcard-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.idx-cta-bigcard-features span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.idx-cta-bigcard-features i {
    color: #5abc3e;
    font-size: 12px;
}

/* Lato destro — bottoni */
.idx-cta-bigcard-right {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Bottone CTA principale */
.idx-cta-bigcard-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #063046;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

.idx-cta-bigcard-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
    color: #063046;
}

/* Link pricing */
.idx-cta-bigcard-link {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.idx-cta-bigcard-link:hover {
    color: #ffffff;
}

.idx-cta-bigcard-link i {
    font-size: 11px;
    margin-left: 4px;
}

/* CTA card responsive */
@media (max-width: 768px) {
    .idx-cta-bigcard {
        flex-direction: column;
        padding: 40px 28px;
        gap: 32px;
        text-align: center;
    }

    .idx-cta-bigcard-badge {
        align-self: center;
    }

    .idx-cta-bigcard-features {
        justify-content: center;
    }
}

/* ============================================
   USA MAP — HIRING COMMAND CENTER
   ============================================ */
.idx-map-section {
    padding: 100px 0;
    background: #EDFBFF;
    color: #063046;
    margin-top: -150px;
}

.idx-map-section .idx-section-title,
.idx-map-section .idx-section-sub {
    color: #063046;
}

.idx-map-section .idx-section-sub {
    opacity: 0.7;
}

.idx-map-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 80px;
    align-items: center;
}

.idx-map-visual {
    background: #fff;
    padding: 24px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    border-top: 3px solid #3dab68;
    border-right: 3px solid #a3991c;
    border-bottom: 3px solid #00586f;
    border-left: 3px solid #00A5CF;
    box-shadow: 0 30px 80px rgba(6, 48, 70, 0.3);
}

.idx-map-wrapper {
    width: 100%;
    position: relative;
}

.idx-map-svg {
    width: 100%;
    height: auto;
    display: block;
}

.idx-map-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.idx-map-dots .city-group text {
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

.idx-map-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.idx-map-info-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(6, 48, 70, 0.1);
    box-shadow: 0 2px 12px rgba(6, 48, 70, 0.06);
}

.idx-map-card-green {
    border-left: 4px solid #3dab68;
}
.idx-map-card-green .idx-map-info-icon {
    background: linear-gradient(135deg, #1a5c32, #3dab68);
}

.idx-map-card-gold {
    border-left: 4px solid #a3991c;
}
.idx-map-card-gold .idx-map-info-icon {
    background: linear-gradient(135deg, #6b6810, #a3991c);
}

.idx-map-card-teal {
    border-left: 4px solid #00586f;
}
.idx-map-card-teal .idx-map-info-icon {
    background: linear-gradient(135deg, #003547, #00586f);
}

.idx-map-card-blue {
    border-left: 4px solid #00A5CF;
}
.idx-map-card-blue .idx-map-info-icon {
    background: linear-gradient(135deg, #00A5CF, #125978);
}

.idx-map-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #00A5CF, #125978);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.idx-map-info-card h4 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px;
    color: #063046;
}

.idx-map-info-card p {
    font-size: 14px;
    color: rgba(6, 48, 70, 0.6);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   SAVINGS CALCULATOR
   ============================================ */
.us-calculator-section {
    padding: 100px 0;
    background: #EDFBFF;
    margin-top: -150px;
}

.calculator-card {
    background: linear-gradient(145deg, #003547, #00586f);
    border-radius: 32px;
    padding: 64px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: none;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    color: #fff;
}

.calculator-inputs h2 {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 32px;
}

.calc-desc {
    color: #fff;
    opacity: 0.9;
    margin-bottom: 30px;
}

.input-group {
    margin-bottom: 32px;
}

.us-calculator-section .input-group label {
    display: block;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.us-calculator-section .range-value {
    float: right;
    color: #A2F0FF;
    font-weight: 800;
}

.range-slider {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #00A5CF;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 165, 207, 0.3);
}

.calculator-result {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 60px 48px;
    border-radius: 24px;
    text-align: center;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.result-label {
    font-size: 15px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
    font-weight: 700;
    display: block;
}

.result-amount {
    font-size: 64px;
    font-weight: 900;
    color: #A2F0FF;
    display: block;
}

.calc-breakdown {
    margin-top: 14px;
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.6;
}

.result-note {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    opacity: 0.5;
    line-height: 1.4;
}

.calc-cta {
    margin-top: 30px;
    background: #A2F0FF;
    color: #063046;
}

.calc-cta:hover {
    background: #fff;
    color: #063046;
}

/* ============================================
   COMPARISON: JOBBIR VS THE OLD WAY
   ============================================ */
.idx-comparison-section {
    padding: 100px 0;
    background: #EDFBFF;
    margin-top: -150px;
}

.idx-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 56px;
}

.idx-comp-card {
    border-radius: 32px;
    padding: 60px;
    border: none;
    color: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.idx-comp-card.new-way {
    background: linear-gradient(145deg, #1a5c32, #3dab68);
}

.idx-comp-card.old-way {
    background: linear-gradient(145deg, #6b6810, #a3991c);
}


.idx-comp-card h4 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
}

.idx-comp-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.idx-comp-item {
    display: flex;
    gap: 16px;
    font-size: 17px;
    line-height: 1.5;
    color: #fff;
}

.idx-comp-item.bad i {
    color: #ffcccc;
    flex-shrink: 0;
    margin-top: 3px;
}

.idx-comp-item.good i {
    color: #c8ffc8;
    flex-shrink: 0;
    margin-top: 3px;
}

/* ============================================
   FEATURES — WHY COMPANIES CHOOSE JOBBIR
   ============================================ */
.idx-features-section {
    padding: 100px 0;
    background: #EDFBFF;
    margin-top: -150px;
}

.idx-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.idx-feature-card {
    color: #fff;
    padding: 48px 32px;
    border-radius: 32px;
    text-align: center;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Features — colori alternati come Pillars */
.idx-feature-card:nth-child(1) { background: linear-gradient(145deg, #1a5c32, #3dab68); }
.idx-feature-card:nth-child(2) { background: linear-gradient(145deg, #6b6810, #a3991c); }
.idx-feature-card:nth-child(3) { background: linear-gradient(145deg, #003547, #00586f); }
.idx-feature-card:nth-child(4) { background: linear-gradient(145deg, #063046, #125978); }
.idx-feature-card:nth-child(5) { background: linear-gradient(145deg, #1a5c32, #3dab68); }
.idx-feature-card:nth-child(6) { background: linear-gradient(145deg, #6b6810, #a3991c); }


.idx-feature-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    margin: 0 auto 28px;
    background: rgba(255, 255, 255, 0.15);
}

.idx-feature-card h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 16px;
}

.idx-feature-card p {
    font-size: 16px;
    color: #fff;
    opacity: 0.9;
    line-height: 1.6;
}


/* ============================================
   TESTIMONIALS
   ============================================ */
.idx-testimonials-section {
    padding: 100px 0;
    background: #fff;
}

.idx-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.idx-testimonial-card {
    background: #063046;
    color: #fff;
    padding: 56px 40px;
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.idx-testimonial-stars {
    color: #ffc107;
    font-size: 18px;
    display: flex;
    gap: 4px;
}

.idx-testimonial-text {
    font-size: 19px;
    line-height: 1.7;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}

.idx-testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.idx-testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
}

.idx-testimonial-author h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.idx-testimonial-author span {
    font-size: 14px;
    opacity: 0.5;
}

/* ============================================
   AI ASSISTANT SECTION
   ============================================ */
.idx-ai-section {
    padding: 100px 0;
    background: #EDFBFF;
    overflow: hidden;
    margin-top: -150px;
}

.idx-ai-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.idx-ai-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.idx-ai-showcase {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.idx-ai-core {
    position: relative;
    z-index: 10;
}

.idx-ai-avatar-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    z-index: 10;
    filter: drop-shadow(0 20px 40px rgba(0, 165, 207, 0.3));
}

.idx-ai-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(0, 165, 207, 0.1);
}

.idx-ai-ring-outer {
    width: 420px;
    height: 420px;
    animation: idx-ai-rot 20s linear infinite;
}

.idx-ai-ring-inner {
    width: 320px;
    height: 320px;
    animation: idx-ai-rot-rev 15s linear infinite;
}

@keyframes idx-ai-rot {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

@keyframes idx-ai-rot-rev {
    from { transform: rotate(0); }
    to { transform: rotate(-360deg); }
}

.idx-ai-chat {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
    margin-top: -60px;
    z-index: 20;
}

.idx-ai-bubble {
    padding: 20px 28px;
    border-radius: 24px;
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    max-width: 90%;
}

.idx-ai-bubble-bot {
    background: #fff;
    color: #063046;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.idx-ai-bubble-user {
    background: #00A5CF;
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.idx-ai-sender {
    display: block;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.7;
}

.idx-ai-features-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 40px 0;
}

.idx-ai-feat {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.idx-ai-feat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    flex-shrink: 0;
}

.idx-ai-feat strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #063046;
    margin-bottom: 4px;
}

.idx-ai-feat span {
    font-size: 15px;
    color: #125978;
    line-height: 1.5;
}

.idx-ai-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #063046;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    margin: 0 auto 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Badge pill centrato in tutte le sezioni */
.idx-section-inner > .idx-ai-badge-pill {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   FAQ — US VERSION
   ============================================ */
.idx-faq-us-section {
    padding: 100px 0;
    background: #EDFBFF;
    margin-top: -150px;
}

.idx-faq-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    align-items: start;
}

.idx-faq-title-col h2 {
    font-size: 42px;
    font-weight: 900;
    color: #063046;
    line-height: 1.2;
    margin-bottom: 20px;
}

.idx-faq-title-col p {
    font-size: 16px;
    color: #125978;
    line-height: 1.6;
}

.idx-faq-title-col a {
    color: #00A5CF;
    font-weight: 700;
}

.idx-faq-questions-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.idx-faq-us-item {
    background: #fff;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(0, 165, 207, 0.08);
}

.idx-faq-us-item.expanded {
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 165, 207, 0.1);
}

.idx-faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    gap: 8px;
}

.idx-faq-header span {
    font-size: 17px;
    font-weight: 700;
    color: #063046;
}

.idx-faq-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.idx-faq-us-item.expanded .idx-faq-icon {
    transform: rotate(180deg);
}

.idx-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 28px;
}

.idx-faq-us-item.expanded .idx-faq-answer {
    max-height: 300px;
    padding: 0 28px 24px;
}

.idx-faq-answer span {
    font-size: 16px;
    color: #125978;
    line-height: 1.7;
}

/* ============================================
   FINAL CTA
   ============================================ */
/* Final CTA — sfondo più scuro per contrasto */
.idx-final-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #021a28 0%, #063046 50%, #0a4a6e 100%);
    text-align: center;
    color: #fff;
    margin-top: -150px;
}

/* Titolo CTA — bianco pieno con ombra per contrasto */
.idx-final-cta h2 {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 24px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Sottotitolo CTA — più visibile */
.idx-final-cta p {
    font-size: 20px;
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.idx-final-cta-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.idx-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #fff;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.idx-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

/* ============================================
   RESPONSIVE — NEW US SECTIONS
   ============================================ */
@media (max-width: 991px) {
    .idx-map-container,
    .calculator-card,
    .idx-ai-layout,
    .idx-comparison-grid,
    .idx-faq-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .idx-ai-visual {
        order: -1;
    }

    .idx-ai-chat {
        margin: 0 auto 40px;
    }

    .idx-features-grid,
    .idx-testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }

    .idx-faq-title-col h2 {
        font-size: 32px;
    }

    .idx-ai-content .idx-section-title {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .idx-features-grid,
    .idx-testimonials-grid {
        grid-template-columns: 1fr;
    }

    .calculator-card {
        padding: 32px;
    }

    .result-amount {
        font-size: 42px;
    }

    .idx-final-cta h2 {
        font-size: 32px;
    }

    .idx-comp-card {
        padding: 36px;
    }

    .idx-ai-showcase {
        height: 300px;
    }

    .idx-ai-ring-outer {
        width: 280px;
        height: 280px;
    }

    .idx-ai-ring-inner {
        width: 220px;
        height: 220px;
    }

    /* Centratura uniforme mobile — titoli, sottotitoli, badge, bottoni */
    .idx-section-title,
    .idx-section-sub {
        text-align: center;
    }

    .idx-ai-badge-pill {
        margin-left: auto;
        margin-right: auto;
    }

    .idx-cards-cta,
    .idx-explore-cta {
        text-align: center;
        display: flex;
        justify-content: center;
    }

    /* Feature cards — icone e testo centrati */
    .idx-feature-card {
        text-align: center;
        align-items: center;
    }

    .idx-feature-icon {
        margin: 0 auto 16px;
    }

    /* AI features list — centrata */
    .idx-ai-feat-item {
        text-align: center;
        flex-direction: column;
        align-items: center;
    }

    .idx-ai-feat-icon {
        margin: 0 auto 12px;
    }

    /* Comparison cards — testo centrato */
    .idx-comp-card h4 {
        text-align: center;
        justify-content: center;
    }

    .idx-comp-list {
        text-align: left;
    }

    /* Mappa info cards — centrate */
    .idx-map-info-card {
        text-align: center;
    }

    /* CTA buttons — centrati */
    .idx-cta-primary,
    .idx-cta-secondary {
        display: inline-flex;
        justify-content: center;
    }

    /* Trusted section — centrata */
    .idx-trusted-grid {
        text-align: center;
        justify-items: center;
    }

    /* FAQ — titolo centrato, domande allineate a sinistra */
    .idx-faq-title-col {
        text-align: center;
    }

    .idx-faq-header span {
        text-align: left;
    }

    .idx-faq-answer span {
        text-align: left;
    }

    .idx-faq-questions-col {
        text-align: left;
    }

    /* Mobile features list */
    .idx-mobile-features {
        align-items: center;
    }

    .idx-mobile-feat-item {
        text-align: center;
    }

    /* AI section — avatar ridotto e sopra il testo su mobile */
    .idx-ai-showcase {
        height: 220px;
        max-width: 300px;
        margin: 0 auto 20px;
    }

    .idx-ai-avatar-img {
        max-width: 200px;
    }

    .idx-ai-ring-outer {
        width: 220px;
        height: 220px;
    }

    .idx-ai-ring-inner {
        width: 170px;
        height: 170px;
    }

    .idx-ai-chat {
        max-width: 100%;
    }

    .idx-ai-content {
        text-align: center;
    }

    /* Calculator — titolo e descrizione centrati */
    .calc-title {
        text-align: center;
    }

    .calc-desc {
        text-align: center;
    }

    /* Hire from Anywhere — perk centrate su mobile */
    .idx-mobile-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .idx-mobile-perks {
        align-items: center;
    }

    .idx-mobile-perk {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        width: 100%;
    }

    .idx-mobile-perk-icon {
        margin: 0 auto;
    }

    .idx-mobile-perk > div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================
   RESULTS METRICS STRIP
   ============================================ */
.idx-results-section {
    padding: 100px 0;
    background: #063046;
    margin-top: -150px;
}

/* Griglia risultati — 4 colonne allineate */
.idx-results-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: start;
    justify-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

/* Singolo risultato — altezza uniforme */
.idx-result-item {
    text-align: center;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Numero grande — azzurro chiaro */
.idx-result-number {
    font-size: 56px;
    font-weight: 900;
    color: #A2F0FF;
    line-height: 1;
    margin-bottom: 14px;
    min-height: 60px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Unità colorata verde */
.idx-result-unit {
    font-size: 36px;
    color: #5abc3e;
}

/* Label bianca bold */
.idx-result-label {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

/* Descrizione grigia */
.idx-result-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    max-width: 200px;
}

/* Divisore verticale tra colonne */
.idx-result-divider {
    width: 1px;
    height: 100px;
    background: rgba(255, 255, 255, 0.12);
    align-self: center;
}

/* ============================================
   DASHBOARD PREVIEW
   ============================================ */
.idx-dashboard-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #f0f9ff 0%, #EDFBFF 100%);
    margin-top: -150px;
}

.idx-dashboard-header {
    text-align: center;
    margin-bottom: 56px;
}

.idx-dashboard-showcase {
    max-width: 960px;
    margin: 0 auto;
}

.idx-dashboard-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.idx-dash-tab {
    padding: 14px 28px;
    border-radius: 50px;
    border: 2px solid rgba(0, 165, 207, 0.15);
    background: #fff;
    color: #063046;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.idx-dash-tab:hover {
    border-color: #00A5CF;
}

.idx-dash-tab.active {
    background: #063046;
    color: #fff;
    border-color: #063046;
}

.idx-dashboard-screen {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(6, 48, 70, 0.3);
    border: 3px solid rgba(0, 165, 207, 0.6);
}

.idx-dashboard-browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.idx-browser-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.idx-browser-dot.red { background: #ff5f57; }
.idx-browser-dot.yellow { background: #ffbd2e; }
.idx-browser-dot.green { background: #28c840; }

.idx-browser-url {
    margin-left: 16px;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 600;
    background: #fff;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.idx-dashboard-img-wrap {
    position: relative;
    min-height: 400px;
}

.idx-dash-logo-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 60px;
    background: #ffffff;
    z-index: 5;
}

.idx-dashboard-img {
    width: 100%;
    height: auto;
    display: none;
}

.idx-dashboard-img.active {
    display: block;
    animation: dashFadeIn 0.4s ease;
}

@keyframes dashFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.idx-dashboard-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 48px;
    flex-wrap: wrap;
}

.idx-dash-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #125978;
}

.idx-dash-feat i {
    color: #00A5CF;
    font-size: 18px;
}

/* Results metrics responsive */
@media (max-width: 991px) {
    .idx-results-grid {
        grid-template-columns: 1fr auto 1fr;
        gap: 20px 0;
    }

    .idx-result-item {
        padding: 16px;
    }

    .idx-result-divider:nth-of-type(2) {
        display: none;
    }

    .idx-result-divider {
        display: none;
    }
}

@media (max-width: 768px) {
    .idx-results-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .idx-result-divider {
        display: none;
    }

    .idx-result-item {
        flex: 0 0 100%;
        padding: 20px;
        text-align: center;
    }

    .idx-result-number {
        font-size: 48px;
    }

    .idx-dashboard-features {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .idx-dashboard-img-wrap {
        min-height: 200px;
    }
}


/* ============================================
   HIRE FROM ANYWHERE — MOBILE PREVIEW
   ============================================ */
.idx-mobile-section {
    padding: 100px 0;
    background: #063046;
    color: #fff;
    overflow: hidden;
    margin-top: -150px;
}

.idx-mobile-section .idx-section-title,
.idx-mobile-section .idx-section-sub {
    color: #fff;
    text-align: center;
}

.idx-mobile-section .idx-section-sub {
    opacity: 0.7;
    max-width: 700px;
    margin: 0 auto 50px;
}

/* Badge pill con contrasto su sfondo scuro (Mobile Ready) */
.idx-mobile-section .idx-ai-badge-pill {
    margin: 0 auto 16px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.idx-mobile-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.idx-mobile-content .idx-section-title {
    color: #fff;
}

.idx-mobile-content p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 36px;
}

.idx-mobile-perks {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.idx-mobile-perk {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.idx-mobile-perk-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0, 165, 207, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A2F0FF;
    font-size: 20px;
    flex-shrink: 0;
}

.idx-mobile-perk strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.idx-mobile-perk span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.idx-mobile-visual {
    display: flex;
    justify-content: center;
}

.idx-phone-mockup {
    width: 280px;
    background: #1a1a2e;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    position: relative;
}

.idx-phone-notch {
    width: 120px;
    height: 28px;
    background: #1a1a2e;
    border-radius: 0 0 18px 18px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.idx-phone-screen {
    border-radius: 28px;
    overflow: hidden;
    margin-top: -14px;
    background: #fff;
}

.idx-phone-img {
    width: 100%;
    height: auto;
    display: block;
}

.idx-phone-home-bar {
    width: 100px;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin: 10px auto 4px;
}

/* ============================================
   TRUSTED ACROSS INDUSTRIES
   ============================================ */
/* Sezione industrie — sfondo blu scuro */
.idx-trusted-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #063046, #125978);
    text-align: center;
    margin-top: -150px;
}

/* Testi chiari su sfondo scuro */
.idx-trusted-section .idx-section-title {
    color: #fff;
}

.idx-trusted-section .idx-section-sub {
    color: rgba(255, 255, 255, 0.7);
}

/* Badge pill con contrasto */
.idx-trusted-section .idx-ai-badge-pill {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.idx-trusted-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 48px;
}

/* Card industria — sfondo trasparente */
.idx-trusted-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 120px;
    padding: 28px 16px;
    background: transparent;
    border-radius: 20px;
    border: none;
}


/* Icona industria — colori diversi per settore */
.idx-trusted-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: #063046;
}

/* Colori vivaci per icone su sfondo scuro */
.idx-trusted-item:nth-child(1) .idx-trusted-icon { background: #2196F3; }
.idx-trusted-item:nth-child(2) .idx-trusted-icon { background: #e74c5e; }
.idx-trusted-item:nth-child(3) .idx-trusted-icon { background: #43a047; }
.idx-trusted-item:nth-child(4) .idx-trusted-icon { background: #f5a623; }
.idx-trusted-item:nth-child(5) .idx-trusted-icon { background: #ff7043; }
.idx-trusted-item:nth-child(6) .idx-trusted-icon { background: #00ACC1; }
.idx-trusted-item:nth-child(7) .idx-trusted-icon { background: #8e44ad; }
.idx-trusted-item:nth-child(8) .idx-trusted-icon { background: #5abc3e; }

/* Testo industria bianco su sfondo scuro */
.idx-trusted-item span {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   RESPONSIVE — NEW SECTIONS (Flow, Mobile, Trusted)
   ============================================ */
@media (max-width: 991px) {
    .idx-mobile-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .idx-mobile-visual {
        order: -1;
        margin-bottom: 20px;
    }

    .idx-mobile-content .idx-section-title {
        text-align: center;
    }

    .idx-mobile-perks {
        align-items: center;
    }

    .idx-mobile-perk {
        text-align: center;
        max-width: 380px;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .idx-phone-mockup {
        width: 220px;
    }

    .idx-trusted-grid {
        gap: 16px;
    }

    .idx-trusted-item {
        width: 100px;
        padding: 20px 12px;
    }
}

/* Icon gradient color variants — feature & AI sections */
.icon-green { background: linear-gradient(135deg, #2a6f44, #3dab68); }
.icon-yellow { background: linear-gradient(135deg, #a3991c, #d4c823); }
.icon-blue { background: linear-gradient(135deg, #00586f, #0089b3); }
.icon-dark { background: linear-gradient(135deg, #063046, #125978); }

/* Cost Efficiency title */
.calc-title { margin-bottom: 10px; text-align: left; }
@media (max-width: 768px) {
    .calc-title { text-align: center; }
}