/* Figma Design System Variables */
:root {
    /* Color System */
    --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%);

    /* Colors from Figma */
    --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 - Spacing */
    --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 - Borders & Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Design System - Shadows */
    --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);

    /* Component Sizes */
    --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);

    /* Custom Typography Tokens */
    --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






    /* Button Tokens */
    --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;

    /* Card Tokens */
    --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);

    /* Input Tokens */
    --input-bg: #FBFDFF;
    --input-border: 2px solid #E0F4FF;
    --input-focus-border: 2px solid #00A5CF;
    --input-placeholder: #8BC5D1;

}
/* Mobile Typography Tokens (≤768px) */
@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 */
  }
}

/* Import Google Fonts - Inter as fallback for Satoshi */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* DISABILITA RFS GLOBALMENTE in modo selettivo */
*: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;
}

/* Sovrascrivi classi RFS specifiche non critiche */
.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;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: var(--light-bg);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    font-size: var(--text-base);
    font-weight: 400;
    letter-spacing: 0;
}

.impiegando-home {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* REGOLE SPECIFICHE PER HOMEPAGE CON PRIORITÀ MASSIMA */
.impiegando-home {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.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 */
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;
}

/* Assicura che le icone Font Awesome mantengano il loro font */
.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;
}

/* Navigation Styles - Standardizzato per tutte le pagine */
.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;
}

/* Assicura consistenza per tutte le varianti navbar */
nav.navbar,
.navbar {
    top: 56px ;
    height: 10px ;
}

.navbar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 100%;
    max-width: 1600px;
}

/* Logo standardizzato per tutte le pagine */
.navbar-brand .logo {
    height: 56px;
    width: auto;
    max-width: 300px;
}

/* Override specifico per pagine che usano classi diverse */
.navbar .logo,
.navbar-brand img {
    height: 56px !important;
    width: auto !important;
    max-width: 300px !important;
}
.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 */
}


.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;
}

.btn-avatar img {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: block;
}

.btn-avatar:hover,
.btn-avatar:focus {
    box-shadow: 0 0 0 10px #7ADFFF;
    transform: scale(1.01);
}

/* Fixed Side Buttons */
.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;
}

.fixed-buttons.show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.fixed-button-left {
    position: absolute;
    left: 32px;
    top: 10%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
}

.fixed-buttons-right {
    position: absolute;
    right: 32px;
    top: 10%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.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);
}

.btn-demo:hover {
    background: var(--btn-primary-hover);
    box-shadow: 0 0 0 7px #7ADFFF;
    transform: translateY(-1px);
}

.btn-demo:focus {
    box-shadow: 0 0 0 10px #7ADFFF;
    transform: scale(1.01);
}

.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;
}

.btn-login {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid #CCF3FF;
}

.btn-cart {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-cart:hover,
.btn-login:hover {
    background: #CCF3FF;
    color: #00A5CF;
    transform: translateY(-2px);
}

.btn-login:hover {
    background: #CCF3FF;
    transform: translateY(-2px);
}

.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;
}

.btn-user-menu.logged-in:hover {
    background: #CCF3FF;
    color: #00A5CF;
    transform: translateY(-1px);
}

.btn-user-menu.logged-in i {
    display: none !important;
}

.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%);
}

/* User Menu Dropdown */
.user-menu-container {
    position: relative;
    display: inline-block;
}

.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;
}

.user-dropdown.show,
.user-dropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.user-dropdown:hover {
    background: #CCF3FF;
    color: #00A5CF;
    transform: translateY(1px);
}

.user-dropdown img {
    width: 14px;
    height: 14px;
}


/* Mobile user menu container */
.mobile-user-menu-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Mobile user dropdown styles */
.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;
}

.mobile-user-dropdown.show {
    opacity: 1;
    visibility: visible;
}

/* Cart notification badge */
.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;
}

.btn-cart {
    position: relative;
}

.btn-cart.has-items .cart-notification-badge {
    display: block;
}

/* Cart Modal Styles */
.cart-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;
}

.cart-modal-box {
    width: 634px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 32px rgba(0,0,0,0.08);
    padding: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-height: 90vh;
    overflow-y: auto;
}

.cart-modal-close {
    position: absolute;
    top: 32px;
    right: 32px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #003146;
}

.cart-modal-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 24px;
    margin-top: 0;
    text-align: left;
    color: #003146;
    font-family: 'Satoshi', sans-serif;
}

.cart-summary-section {
    background: #EBFDFF;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
}

.cart-summary-row:last-child {
    margin-bottom: 0;
    padding-top: 12px;
    border-top: 1px solid #B6F0FF;
    font-weight: 600;
    font-size: 18px;
}

.cart-summary-label {
    color: #125978;
}

.cart-summary-value {
    color: #00A5CF;
    font-weight: 500;
}

.cart-options-list {
    margin: 16px 0;
}

.cart-option-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #125978;
}

.cart-option-check {
    color: #1acb8b;
    margin-right: 8px;
    font-size: 16px;
}

.cart-modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.cart-modal-btn {
    flex: 1;
    height: 48px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Satoshi', sans-serif;
    transition: all 0.2s;
}

.cart-modal-btn-primary {
    background: #00A5CF;
    color: #fff;
    border: none;
}

.cart-modal-btn-primary:hover {
    background: #008db1;
}

.cart-modal-btn-secondary {
    background: transparent;
    color: #00A5CF;
    border: 2px solid #00A5CF;
}

.cart-modal-btn-secondary:hover {
    background: #EBFDFF;
}

.cart-modal-btn-remove {
    background: transparent;
    color: #F9423A;
    border: 2px solid #F9423A;
}

.cart-modal-btn-remove:hover {
    background: #F9423A;
    color: white;
}

@media (max-width: 700px) {
    .cart-modal-box {
        width: 95vw;
        padding: 24px;
    }

    .cart-modal-buttons {
        flex-direction: column;
    }

}

/* Nuovo Demo Modal - Stile dall'immagine allegata */
.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;
}

.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;
}

.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;
}

.new-demo-modal-close:hover {
    color: #333;
}

.new-demo-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    text-align: left;
}

.new-demo-modal-subtitle {
    margin: 0 0 24px 0;
    text-align: left;
}

.new-demo-modal-link {
    color: #00A5CF;
    text-decoration: none;
    font-size: 16px;
}

.new-demo-modal-link:hover {
    text-decoration: underline;
}

.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;
}

.new-demo-modal-video-container video {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.new-demo-modal-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-demo-modal-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 24px 0;
    text-align: left;
}

.new-demo-modal-credentials {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.new-demo-credential-row {
    background: #EBFDFF;
    border-radius: 8px;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.new-demo-credential-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.new-demo-credential-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.new-demo-credential-value {
    font-size: 16px;
    font-weight: 600;
    color: #00A5CF;
    user-select: all;
}

.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;
}

.new-demo-copy-btn:hover {
    background: #E6F3FF;
}

.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;
}

.new-demo-continue-btn:hover {
    background: #008db1;
}

@media (max-width: 500px) {
    .new-demo-modal-box {
        width: 95vw;
        padding: 24px;
    }

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

/* Hero Section */
.hero-section {
    width: 100%;
    height: 130vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 700px;
    padding-top: calc(var(--space-3xl) * 2.5);
}

/* Hero Background Gradient */
.hero-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 684px;
    background: var(--hero-gradient);
    z-index: -2;
}

/* Orbital logos container */
.orbit-logos-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Visible orbit path */
.orbit-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Orbital logo positioning */
.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;
}

.logo-circle {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white; /* o trasparente se l'immagine ha sfondo */
}

.logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Hero Content - Centered within orbit */
.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;
}

/* Contenitore dei cerchi */
.social-proof {
  display: flex;
  justify-content: center;
  align-items: center;
}

.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 #EDFBFF;
  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-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;
}

.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;
}

.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;
}

/* =============== Italy Map Section =============== */
.italy-map-section {
    padding: var(--section-padding-y) 0;
    background: var(--light-bg);
    position: relative;
    overflow: hidden;
}

.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 */
}

.map-content {
    flex: 0 0 400px; /* Fixed width instead of flex: 1 */
    max-width: 400px;
    padding: var(--space-sm);
}

.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;
}

.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;
}

.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;
}

.italy-map {
    flex: 0 0 600px; /* Reduced from 800px to 700px */
    position: relative;
    max-width: 700px;
}

.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;
}

.italy-svg {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

/* =============== Marker Pins =============== */
.city-marker {
  cursor: pointer;
  /* iOS: tap “secco”, niente doppio-tap zoom o selezioni */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}


.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: all;
}
.city-marker svg * { pointer-events: none !important; }

.city-marker svg path {
  fill: #00A5CF;
  opacity: 0.9;
  transition: fill 0.18s, opacity 0.9s;
  pointer-events: inherit;
}

.city-marker svg circle {
  pointer-events: inherit;
}

.city-marker svg * {
  pointer-events: inherit;
}

.city-marker:hover svg {
  transform: scale(1.6);
  filter: drop-shadow(0 6px 20px rgb(0, 129, 209,0.16));
}

.city-marker:hover svg path {
  fill: #00A5CF !important;
  opacity: 100% !important;
}
/* Rende cliccabile l'intero riquadro del pin (anche l'area "vuota") */
.city-marker,
.city-marker svg {
  pointer-events: all;
}

.city-marker svg {
  pointer-events: bounding-box;   /* cattura click/hover su tutta l’area del pin */
}

/* evita che elementi interni sovrascrivano */
.city-marker svg * {
  pointer-events: none !important;
}

/* =============== Info Cards =============== */
.city-info-cards {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.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);
}
.city-info-card.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}
.city-marker, .city-marker svg {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ====== ITALY MAP — MOBILE (≤768px) E DISPOSITIVI TOUCH ====== */
@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 {
        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);
  }
}

/* ====== RESTO (come da tuo blocco) ====== */
.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;
}

.city-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E8F7FF;
}

.city-card-header h3 {
  font-family: 'Satoshi', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.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;
}

.close-card:hover { background: #f5f5f5; color: #666; }

.city-stats { display: flex; flex-direction: column; gap: 12px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; }
.stat-label { font-family: 'Satoshi', sans-serif; font-size: 14px; font-weight: 400; color: var(--text-secondary); }
.stat-value { font-family: 'Satoshi', sans-serif; font-size: 16px; font-weight: 600; }
.stat-value.primary { color: var(--primary-color); }
.stat-value.secondary { color: var(--secondary-color); }

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




@media (max-width: 1200px) {
    .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;
}

.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: 175px;
  max-width: 1080px;
  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; }
}

/* Hard reset su mobile/tablet: nessuna trasformazione */
@media (max-width: 1024px) {
  .expect-steps .expect-card { transform: none !important; }
}


.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: 50%; bottom: -40px; width:82px; height: 82px; transform: translateX(-50%);}
.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: 99vw; 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:-18px;
    left:22px;
    width: clamp(220px, 68vw, 290px); /* 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:0;   top:18px; }
  .expect-badge:nth-child(2){ right:0;  top:18px; }
  .expect-badge:nth-child(3){ left:50%; bottom:-28px; transform:translateX(-50%); }
  .expect-badge:nth-child(4){ right:-36px; bottom:-44px; }

  .expect-cand-container { width: 130px; height: 130px; }
  .cand1 { width: 56px; height: 56px; top:0; left:50%; transform:translate(-50%,0); }
  .cand2 { width: 36px; height: 36px; top:68px; left:0; }
  .cand3 { width: 52px; height: 52px; top:46px; right:0; }
  .cand4 { width: 24px; height: 24px; bottom:0; left:50%; 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;}
}

/* Alia magia */

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

.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;
  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; }
    }

/* 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;
    width: 94vw;
    min-width: 0;
    max-width: 100vw;
    font-size: var(--body-text-size);
    border-radius: 20px;
    padding: 9px 11px;
    margin: 0 auto;
  }
}
/* Centra il container per tablet (992–1200) */
@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);  }
}


/* 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 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;
  background: #eefdff;
  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;
}

.alia-price {
        background: linear-gradient(91deg, #00A5CF 1.46%, #6E46AE 48.22%, #F9423A 98.73%);
  font-size: 46px;              /* ✅ ridotto da 54px a 46px */
     -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  font-weight: 700;
  background-size: 200% 100% !important;
  animation: gradientFlow 3s ease-in-out infinite !important;
}

.alia-euro.gradient-text {
  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;
  font-size: 40px;              /* ✅ ridotto da 48px a 40px */
  font-weight: 700;
  background-size: 200% 100% !important;
  animation: gradientFlow 3s ease-in-out infinite !important;
}

.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;
  background: #eefdff;
  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;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.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%;
    background: var(--light-bg);
    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("static/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;
    }
}

/* FAQ Section - Unified CSS */
.faq-section {
    padding: 32px 0;
    background: var(--light-bg);
    margin-bottom: 0;
}

.section-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 32px;
}

.faq-layout {
    display: flex;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

.faq-title {
    flex: 0 0 0;
}

.faq-title h2 {
    font-size: 40px;
    font-weight: 450;
    color: #063046;
    text-align: left;
    letter-spacing: -1.92px;
    min-width: 380px;
    line-height: 1;
    margin: 0;
}

.faq-questions {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.faq-item {
    width: 100%;
    text-align: left;
}

.faq-item:not(:first-child) {
    margin-top: 24px;
}

/* FAQ Question Container */
.faq-question {
    border-radius: 100px;
    box-shadow: 0px 4px 24px 0px rgba(162, 240, 255, 0.40);
    background-color: #FFF;
    padding: 24px 32px;
    color: #063046;
    font-weight: 550;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
}

.faq-item.collapsed .faq-question {
    display: inline-flex;
    width: auto;
    border-radius: 24px;
    padding: 16px 32px;
}

.faq-item.collapsed .faq-question:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 32px 0px rgba(162, 240, 255, 0.50);
}

/* FAQ Question Header */
.faq-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 550;
    font-size: 18px;
    color: #063046;
    text-align: left;
    gap: 16px;
}

/* FAQ Icon */
.faq-icon {
    width: 24px;
    height: 24px;
    display: auto-flow;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-item.expanded .faq-icon {
    transform: rotate(180deg);
}

/* Expanded FAQ Items */
.faq-item.expanded .faq-question {
    display: flex !important;
    width: 100% !important;
    border-radius: 8px !important;
    padding: 32px !important;
    flex-direction: column !important;
}

/* FAQ Answer */
.faq-answer {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    display: none;
    text-align: left;
}

.faq-item.expanded .faq-answer {
    display: block;
    opacity: 1;
}

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

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

    .faq-title {
        width: 100%;
    }

    .faq-title h2 {
        font-size: 32px;
        letter-spacing: -1.44px;
    }

    .faq-questions {
        width: 100%;
        font-size: 16px;
    }

    .faq-item.collapsed .faq-question {
        padding: 16px 20px;
    }

    .faq-item.expanded .faq-question {
        padding: 24px 20px;
    }

    .faq-question-header {
        gap: 20px;
    }
}

/* Footer */
.footer-section {
    position: relative;
    background: var(--light-bg);
    margin-top: 128px;
    padding: 0px 32px 32px 32px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(180deg, #A2F0FF 0%, #EBFDFF 100%);
    border-radius: 32px;
    box-shadow: 0px 4px 24px 0px rgba(162, 240, 255, 0.40);
    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 {
    color: #125978;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 32px;
}

.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 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(18, 89, 120, 0.1);
}

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

.footer-stats-title {
    color: #125978;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

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

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

.footer-legal {
    color: #125978;
    font-size: 12px;
    font-weight: 400;
    text-align: right;
    max-width: 300px;
}

/* 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: left;
        max-width: 100%;
    }
}

@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 */
.hero-section-chi-siamo {
    min-height: 80vh;
}

/* 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);
    }

    .orbit-logos-container {
        transform: scale(0.5);
    }

    .orbit-path ellipse {
        rx: 320;
        ry: 160;
    }

    .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*/
.login-modal-overlay {
  position: fixed; z-index: 9999;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(235,253,255,0.7);
  display: flex; 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 mantenerlo una sola volta */
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 620px;           /* niente scale: l’orbita resta libera di adattarsi */
    height: 110vh;
    padding-top: calc(var(--space-3xl) * 2);
    overflow: visible; /* consenti all’orbita di debordare in alto/basso */

  }
  .hero-content {
    max-width: 100%;
    gap: var(--space-md);
    text-align: center;
  }
  .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%; }
}
/* === 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;              /* card più grande e leggibile */
  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;
  overflow-y: visible;          /* <-- evita il taglio dello zoom sui bordi */
  padding-block: 12px;          /* 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: 72vw;               /* 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: #0C2E43;
  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 */
    .city-marker svg {
        pointer-events: bounding-box; /* Rendi cliccabile l'area del box del SVG */
    }

    /* 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;
}

video::-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 {
        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; }
/* ===== Fixed Bar Mobile (≤768px) ===== */
@media (max-width: 768px) {
  /* Nascondi la vecchia barra mobile */
  .fixed-buttons { display: none !important; }

  .fixed-bar {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 1000;
    display: flex; 
    gap: 16px; 
    align-items: center;
  }

  /* Ensure mobile user container has proper positioning context */
  .fixed-bar .mobile-user-menu-container {
    position: relative;
    z-index: 1001;
  }

  .fixed-bar__group {
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 8px;
    background: rgba(0, 165, 207, 0.26) ;
    border-radius: 16px; padding: 6px;
    min-width: 0;
  }

  .fixed-bar__cluster {
    display: flex; align-items: center; overflow: visible;
    border-radius: 12px; background: transparent;
  }

  /* Icone ridimensionate per stare sempre nel viewport */
  .btn-login, .btn-cart {
    width: 40px; 
    height: 40px;
    background: rgba(0, 165, 207, 0.00) ;
    font-size: 16px; box-shadow: none !important;
  }

  .fixed-bar__group .btn-demo {
    flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px;
    width: auto; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
    line-height: 1;
    font-size: var(--btn-text-size);
  }

  .fixed-bar__avatar {
    flex: 0 0 auto;
    background: rgba(0, 165, 207, 0.26); border-radius: 16px; padding: 6px;

    display: flex; align-items: center; justify-content: center;
  }

  .fixed-bar__avatar .btn-avatar,
  .fixed-bar__avatar .btn-avatar img {
    width: 44px; height: 44px; border-radius: 12px; box-shadow: none !important;

  }
    @supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
      .fixed-bar__group,
      .fixed-bar__avatar {
        /* tinta brand con opacità 16% */
        background: rgba(0, 165, 207, 0.16);
        /* blur vero e proprio */
        -webkit-backdrop-filter: blur(12px) saturate(120%);
        backdrop-filter: blur(12px) saturate(120%);
        /* bordo “vetroso” sottile */
        border: 1px solid rgba(0, 165, 207, 0.28);
        background-clip: padding-box;
      }
    }
    .fixed-bar__group .btn-demo,
    .fixed-bar__group .btn-demo:hover,
    .fixed-bar__group .btn-demo:focus {
      box-shadow: none !important;
        }

.fixed-bar__avatar .btn-avatar img {
    transform: translateZ(0);
}

/* Micro-tweak opzionali per device piccolissimi */
@media (max-width: 380px) {
  .fixed-bar .btn-demo { font-size: 13px; height: 42px; padding: 0 12px; }
  .fixed-bar .btn-login, .fixed-bar .btn-cart { width: 38px; height: 38px; }
  .fixed-bar .btn-avatar, .fixed-bar .btn-avatar img { width: 42px; height: 42px; }
}

    /* ====== FIX Alia Magia (992–1200) + centratura testi mappa ===== */
    @media (min-width: 992px) and (max-width: 1200px) {

      /* 1) ALIA MAGIA — container centrato e altezza adatta a 5 box */
      .magic-section .magic-boxes-abs {
        width: min(1040px, 94vw);
        margin: 0 auto 76px auto;
        height: 560px;                  /* evita tagli inferiori */
        position: relative;             /* mantiene assoluti interni */
      }

      /* 2) ALIA MAGIA — preset “centrato” per tutte le box */
      .magic-section .magic-box {
        left: 50% !important;           /* centra di base */
        transform: translateX(calc(-50% + var(--dx, 0px))) rotate(var(--rot, 0deg)) !important;
        max-width: 92vw;
        white-space: nowrap;
      }

      /* 3) ALIA MAGIA — posizioni come nello screen (leggeri offset L/R) */
      .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;
}

/* Specific fixes for pricing elements */
.alia-price {
    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-euro.gradient-text {
    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;
}