:root {
      /* Color Palette - Tema Light Premium Ottimizzato */
      --primary-color: #1e40af; /* Blu royal professionale e sofisticato */
      --primary-rgb: 30, 64, 175;
      --primary-light: #3b82f6; /* Variante più chiara del primary */
      --primary-dark: #1e3a8a; /* Variante più scura del primary */
      --secondary-color: #475569; /* Grigio slate equilibrato per testo secondario */
      --accent-color: #0891b2; /* Teal moderno e professionale */
      --accent-rgb: 8, 145, 178;
      --accent-light: #06b6d4; /* Variante più chiara dell'accent */
      --accent-alt-color: #db2777; /* Rosa elegante per elementi di accento */
      --danger-color: #dc2626; /* Rosso per errori e avvisi */
      --success-color: #16a34a; /* Verde naturale per successo */
      --warning-color: #d97706; /* Arancione per avvertimenti */
      --info-color: #0284c7; /* Blu informativo */
      --dark-color: #0f172a; /* Nero-blu per testo principale */
      --body-color: #334155; /* Grigio scuro ottimale per leggibilità */
      --muted-color: #64748b; /* Grigio medio per testo secondario */
      --light-gray: #f8fafc; /* Grigio chiarissimo per sfondi */
      --ultra-light-gray: #fcfcfd; /* Bianco sporco per contrasto sottile */
      --bg-color: #ffffff; /* Bianco puro per sfondi principali */
      --section-bg: var(--light-gray); /* Sfondo sezioni */
      --card-bg: #ffffff; /* Sfondo card */
      --surface-color: #f1f5f9; /* Colore superficie intermedio */
      --border-color: #cbd5e1; /* Bordo standard */
      --border-light-color: #e2e8f0; /* Bordo chiaro per divisori sottili */
      --border-dark-color: #94a3b8; /* Bordo scuro per elementi in evidenza */

      /* Typography */
      --heading-font: 'Montserrat', sans-serif; /* Font più moderno e professionale per titoli */
      --body-font: 'Inter', sans-serif; /* Font più moderno e leggibile per il testo */
      --code-font: 'JetBrains Mono', monospace; /* Font per elementi di coding */
      --accent-font: 'Raleway', sans-serif; /* Font alternativo per elementi di accento */
      --secondary-heading: 'Source Sans 3', sans-serif; /* Font secondario per sottotitoli */

      /* Sizing & Spacing */
      --navbar-height: 70px;
      --transition-speed: 0.3s;
      --transition-fast: 0.15s;
      --transition-slow: 0.5s;
      --transition-cubic: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
      --transition-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); /* Bounce easing per effetti speciali */
      --border-radius: 0.375rem;
      --border-radius-lg: 0.75rem;
      --border-radius-xl: 1rem;
      --border-radius-pill: 50rem;

       /* Gradients - Eleganti e sofisticati */
      --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
      --gradient-primary-soft: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(var(--primary-rgb), 0.05) 100%);
      --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%);
      --gradient-accent-soft: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, rgba(var(--accent-rgb), 0.05) 100%);
      --gradient-light: linear-gradient(180deg, var(--bg-color) 0%, var(--ultra-light-gray) 100%);
      --gradient-surface: linear-gradient(145deg, var(--bg-color) 0%, var(--surface-color) 100%);
      --gradient-vibrant: linear-gradient(135deg, var(--accent-alt-color) 0%, #f472b6 100%);
      --gradient-subtle: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.4) 100%);
      
      /* Shadows - Sistema di ombre coerente e moderno */
      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
      --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
      --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
      --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
      --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
      --shadow-colored: 0 10px 15px rgba(var(--primary-rgb), 0.1), 0 4px 6px rgba(var(--primary-rgb), 0.05);
      --shadow-accent: 0 10px 15px rgba(var(--accent-rgb), 0.1), 0 4px 6px rgba(var(--accent-rgb), 0.05);
    }

    /* Base & Typography - Ottimizzati per leggibilità */
    html {
      scroll-padding-top: calc(var(--navbar-height) + 20px); /* Extra space */
      scroll-behavior: smooth;
      font-size: 100%; /* Garantisce che 1rem = 16px su tutti i browser */
    }

    body {
      font-family: var(--body-font);
      color: var(--body-color);
      background-color: var(--bg-color);
      font-size: 1rem; /* Base font size ottimizzato per leggibilità */
      font-weight: 400;
      line-height: 1.75; /* Interlinea ottimizzata per leggibilità */
      letter-spacing: -0.01em; /* Spaziatura caratteri sottile per eleganza */
      padding-top: var(--navbar-height);
      opacity: 0;
      transition: opacity 0.8s var(--transition-cubic);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
      font-display: swap;
      font-feature-settings: 'kern' 1, 'liga' 1; /* Abilita kerning e legature */
    }

    body.loaded { opacity: 1; }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--heading-font);
      font-weight: 600;
      color: var(--dark-color);
      margin-top: 0;
      margin-bottom: 1rem;
      line-height: 1.3;
      max-width: 60ch; /* Limita la lunghezza delle righe per migliorare la leggibilità */
    }
    h1 { 
      font-size: clamp(2.75rem, 6vw, 4.5rem); 
      font-weight: 800; 
      font-family: var(--heading-font); 
      letter-spacing: -0.02em; /* Spaziatura ottimizzata per eleganza */
      line-height: 1.1; /* Interlinea più stretta per impatto visivo */
      margin-bottom: 1.75rem; /* Spazio generoso sotto i titoli principali */
      color: var(--dark-color);
      text-wrap: balance; /* Migliora la distribuzione del testo */
    }
    h2 { 
      font-size: clamp(2.25rem, 5vw, 3.5rem); 
      font-weight: 700; 
      font-family: var(--heading-font);
      letter-spacing: -0.015em;
      line-height: 1.15;
      margin-bottom: 1.5rem;
      color: var(--dark-color);
      text-wrap: balance;
    }
    h3 { 
      font-size: clamp(1.75rem, 4vw, 2.5rem); 
      font-weight: 600; 
      font-family: var(--heading-font);
      letter-spacing: -0.01em;
      line-height: 1.25;
      margin-bottom: 1.25rem;
      color: var(--dark-color);
    }
    h4 { 
      font-size: clamp(1.4rem, 3vw, 1.875rem); 
      font-weight: 600; 
      font-family: var(--secondary-heading);
      line-height: 1.3;
      margin-bottom: 1rem;
      color: var(--body-color);
    }
    h5 { 
      font-size: clamp(1.15rem, 2.5vw, 1.375rem); 
      font-weight: 600; 
      font-family: var(--secondary-heading);
      line-height: 1.4;
      margin-bottom: 0.75rem;
      color: var(--body-color);
    }

    p { 
      margin-bottom: 1.5rem; 
      color: var(--body-color); 
      font-family: var(--body-font);
      font-size: 1.0625rem; /* Leggermente più grande per migliore leggibilità */
      line-height: 1.75; /* Interlinea ottimizzata */
      max-width: 70ch; /* Lunghezza ottimale per la lettura */
      letter-spacing: -0.005em; /* Spaziatura sottile per eleganza */
      text-wrap: pretty; /* Migliora la distribuzione del testo */
    }
    .lead { 
      font-size: clamp(1.125rem, 2.5vw, 1.375rem); 
      font-weight: 450; /* Peso intermedio per eleganza */
      color: var(--muted-color); 
      font-family: var(--accent-font);
      line-height: 1.65;
      margin-bottom: 2rem;
      max-width: 65ch;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }
    strong, b { 
      font-weight: 600; 
      color: var(--dark-color);
      letter-spacing: -0.01em; /* Leggera riduzione della spaziatura per testo in grassetto */
    }

    a {
      color: var(--primary-color);
      text-decoration: none;
      transition: all var(--transition-speed) ease;
    }
    a:hover {
      color: darken(var(--primary-color), 15%);
      text-decoration: underline;
    }
    a:focus {
      outline: 2px solid rgba(var(--primary-rgb), 0.4);
      outline-offset: 2px;
      text-decoration: none;
    }
    ::selection { background-color: rgba(var(--primary-rgb), 0.2); color: var(--dark-color); }

    /* Ottimizzazioni tipografiche per dispositivi mobili */
    @media (max-width: 768px) {
      html {
        font-size: 95%; /* Riduce leggermente la dimensione base del font su mobile */
      }
      h1 { 
        letter-spacing: -0.3px; /* Riduce la spaziatura su schermi piccoli */
      }
      p, .lead {
        line-height: 1.6; /* Riduce leggermente l'interlinea su mobile */
      }
      .lead {
        font-size: clamp(1rem, 2vw, 1.15rem); /* Dimensione più appropriata su mobile */
      }
    }

    /* Classi di utilità per la tipografia - Migliorate e ampliate */
    .text-balance {
      text-wrap: balance; /* Migliora la distribuzione del testo su più righe (browser moderni) */
    }
    .text-pretty {
      text-wrap: pretty; /* Migliora la sillabazione e la distribuzione del testo (browser moderni) */
    }
    /* Impedisce il troncamento delle parole nei paragrafi - Migliorato */
    p, .lead, .value-text p, .blockquote, .note, .text-caption, .text-small, .text-large {
      overflow-wrap: break-word;
      word-wrap: break-word;
      hyphens: none; /* Disabilita la sillabazione automatica */
      word-break: normal; /* Usa normal invece di keep-all per evitare overflow su mobile */
      white-space: normal; /* Assicura che il testo vada a capo normalmente */
      max-width: 100%; /* Assicura che il testo non superi il contenitore */
      text-overflow: ellipsis; /* Aggiunge puntini di sospensione se necessario */
    }
    .font-heading {
      font-family: var(--heading-font);
    }
    .font-body {
      font-family: var(--body-font);
    }
    .font-accent {
      font-family: var(--accent-font);
    }
    .font-code {
      font-family: var(--code-font);
    }
    
    /* Nuove classi per evidenziare testo */
    .text-highlight {
      background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--primary-rgb), 0.2) 100%);
      padding: 0.2em 0.4em;
      border-radius: 0.2em;
      font-weight: 500;
      color: var(--dark-color);
    }
    .text-gradient {
      background-image: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 600;
    }
    .text-accent-gradient {
      background-image: var(--gradient-accent);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 600;
    }
    .text-vibrant-gradient {
      background-image: var(--gradient-vibrant);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 600;
    }
    
    /* Classi per enfasi e stili di testo */
    .text-emphasis {
      font-style: italic;
      font-weight: 500;
      color: var(--primary-color);
      letter-spacing: 0.3px;
    }
    .text-caption {
      font-size: 0.9rem;
      color: var(--secondary-color);
      font-style: italic;
      line-height: 1.5;
      margin-top: -0.8rem;
      margin-bottom: 1.5rem;
      max-width: 85ch;
    }
    .text-small {
      font-size: 0.85rem;
      line-height: 1.6;
    }
    .text-large {
      font-size: 1.2rem;
      line-height: 1.7;
      font-weight: 500;
    }
    .text-uppercase {
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
    }
    
    /* Blocchi di testo formattati */
    .blockquote {
      position: relative;
      font-family: var(--accent-font);
      font-size: 1.15rem;
      font-style: italic;
      line-height: 1.8;
      color: var(--secondary-color);
      padding: 1.5rem 2rem 1.5rem 3.5rem;
      margin: 2rem 0;
      border-left: 4px solid var(--primary-color);
      background-color: rgba(var(--primary-rgb), 0.05);
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }
    .blockquote::before {
      content: '\201C'; /* Unicode per virgolette aperte */
      font-family: Georgia, serif;
      position: absolute;
      top: 0.5rem;
      left: 1rem;
      font-size: 4rem;
      color: rgba(var(--primary-rgb), 0.3);
      line-height: 1;
    }
    .blockquote-footer {
      display: block;
      font-size: 0.9rem;
      font-style: normal;
      margin-top: 1rem;
      color: var(--secondary-color);
      font-weight: 500;
    }
    .blockquote-footer::before {
      content: '— ';
    }
    
    /* Note e avvisi */
    .note {
      padding: 1.2rem 1.5rem;
      border-radius: var(--border-radius);
      margin: 1.5rem 0;
      position: relative;
      border-left: 4px solid;
      font-size: 0.95rem;
    }
    .note-title {
      font-weight: 600;
      margin-bottom: 0.5rem;
      font-size: 1.05rem;
    }
    .note-info {
      background-color: rgba(var(--primary-rgb), 0.08);
      border-color: var(--primary-color);
    }
    .note-info .note-title {
      color: var(--primary-color);
    }
    .note-warning {
      background-color: rgba(234, 179, 8, 0.08);
      border-color: #eab308; /* Giallo */
    }
    .note-warning .note-title {
      color: #854d0e; /* Giallo scuro */
    }
    .note-success {
      background-color: rgba(var(--success-color), 0.08);
      border-color: var(--success-color);
    }
    .note-success .note-title {
      color: var(--success-color);
    }
    .note-danger {
      background-color: rgba(var(--danger-color), 0.08);
      border-color: var(--danger-color);
    }
    .note-danger .note-title {
      color: var(--danger-color);
    }
    
    /* Blocchi di codice */
    .code-block {
      font-family: var(--code-font);
      background-color: var(--dark-color);
      color: #f8fafc;
      padding: 1.2rem 1.5rem;
      border-radius: var(--border-radius);
      margin: 1.5rem 0;
      overflow-x: auto;
      font-size: 0.9rem;
      line-height: 1.6;
      position: relative;
    }
    .code-block::before {
      content: attr(data-language);
      position: absolute;
      top: 0;
      right: 1rem;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 0.2rem 0.6rem;
      font-size: 0.75rem;
      border-radius: 0 0 var(--border-radius) var(--border-radius);
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
    }
    .inline-code {
      font-family: var(--code-font);
      background-color: rgba(var(--primary-rgb), 0.08);
      color: var(--primary-color);
      padding: 0.15em 0.4em;
      border-radius: 0.2em;
      font-size: 0.9em;
      white-space: nowrap;
    }
    
    /* Struttura dei paragrafi e leggibilità */
    .text-justified {
      text-align: justify;
      hyphens: auto;
    }
    
    /* Miglioramento coerenza visiva sezione Valori Chiave */
    .value-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1.5rem;
      padding: 1.5rem;
      border-radius: var(--border-radius);
      transition: all 0.3s ease;
      background-color: rgba(var(--primary-rgb), 0.03);
      border-left: 4px solid var(--primary-color);
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }
    
    .value-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
      background-color: rgba(var(--primary-rgb), 0.05);
    }
    
    .value-item .value-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      background-color: rgba(var(--primary-rgb), 0.1);
      color: var(--primary-color);
      border-radius: 50%;
      margin-right: 1rem;
      flex-shrink: 0;
      font-size: 1.5rem;
      transition: all 0.3s ease;
    }
    
    .value-item:hover .value-icon {
      transform: scale(1.1);
      background-color: var(--primary-color);
      color: white;
    }
    
    /* Stili per lo slider del budget */
    .budget-slider-container {
      padding: 0.5rem 0.25rem;
      margin-bottom: 0.5rem;
    }
    
    .budget-slider {
      height: 8px;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(to right, var(--primary-color) 0%, var(--accent-color) 100%);
      border-radius: var(--border-radius-pill);
      box-shadow: var(--shadow-inset);
      outline: none;
      opacity: 0.9;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .budget-slider:hover {
      opacity: 1;
      transform: scaleY(1.2);
    }
    
    .budget-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: white;
      border: 2px solid var(--primary-color);
      cursor: pointer;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
    }
    
    .budget-slider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: white;
      border: 2px solid var(--primary-color);
      cursor: pointer;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
    }
    
    .budget-slider::-webkit-slider-thumb:hover,
    .budget-slider::-moz-range-thumb:hover {
      background-color: var(--primary-color);
      transform: scale(1.1);
    }
    
    .budget-slider-labels {
      font-size: 0.8rem;
      color: var(--secondary-color);
      margin-top: 0.25rem;
    }
    
    .value-item::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 30%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.02));
      pointer-events: none;
    }
    
    .value-item:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-sm);
      background-color: rgba(var(--primary-rgb), 0.05);
    }
    
    .value-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      min-width: 60px;
      margin-right: 1.2rem;
      background-image: var(--gradient-primary);
      color: white;
      border-radius: 50%;
      font-size: 1.6rem;
      box-shadow: var(--shadow);
      position: relative;
      z-index: 2;
      transition: all 0.3s ease;
    }
    
    .value-item:hover .value-icon {
      transform: scale(1.1);
    }
    
    .value-text h5 {
      margin-bottom: 0.6rem;
      font-weight: 600;
      color: var(--primary-color);
      font-size: 1.15rem;
      letter-spacing: -0.2px;
    }
    
    .value-text p {
      margin-bottom: 0;
      font-size: 0.95rem;
      line-height: 1.6;
    }
    .text-indent {
      text-indent: 2em;
    }
    .text-dropcap::first-letter {
      float: left;
      font-family: var(--heading-font);
      font-size: 3.5em;
      line-height: 0.8;
      padding-right: 0.1em;
      padding-top: 0.1em;
      margin-bottom: -0.1em;
      color: var(--primary-color);
      font-weight: 700;
    }
    .paragraph-spacing {
      margin-bottom: 2rem;
    }
    .paragraph-narrow {
      max-width: 65ch;
    }
    .paragraph-wide {
      max-width: 85ch;
    }
    
    /* Liste stilizzate */
    .styled-list {
      list-style: none;
      padding-left: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .styled-list li {
      position: relative;
      padding-left: 1.5rem;
      margin-bottom: 0.8rem;
      line-height: 1.6;
    }
    .styled-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.5em;
      width: 0.5rem;
      height: 0.5rem;
      background-image: var(--gradient-primary);
      border-radius: 50%;
    }
    .styled-list.check-list li::before {
      content: '✓';
      background-image: none;
      background-color: transparent;
      color: var(--success-color);
      font-weight: bold;
      font-size: 1rem;
      top: 0;
      width: auto;
      height: auto;
    }
    .styled-list.arrow-list li::before {
      content: '→';
      background-image: none;
      background-color: transparent;
      color: var(--primary-color);
      font-weight: bold;
      font-size: 1rem;
      top: 0;
      width: auto;
      height: auto;
    }
    
    /* Divisori di testo */
    .text-divider {
      display: flex;
      align-items: center;
      margin: 2rem 0;
      font-family: var(--heading-font);
      color: var(--secondary-color);
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 600;
    }
    .text-divider::before,
    .text-divider::after {
      content: '';
      flex-grow: 1;
      height: 1px;
      background-color: var(--border-light-color);
    }
    .text-divider::before {
      margin-right: 1rem;
    }
    .text-divider::after {
      margin-left: 1rem;
    }
    
    /* Effetti tipografici avanzati */
    .text-shadow-sm {
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }
    .text-shadow-lg {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }
    .text-outline {
      text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1), 1px -1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.1);
    }
    .text-glow {
      text-shadow: 0 0 5px rgba(var(--primary-rgb), 0.5), 0 0 10px rgba(var(--primary-rgb), 0.3);
    }
    .text-blur {
      color: transparent;
      text-shadow: 0 0 5px rgba(var(--dark-color), 0.8);
      transition: text-shadow 0.3s ease;
    }
    .text-blur:hover {
      text-shadow: none;
      color: var(--dark-color);
    }
    
    /* Classi per spaziatura e layout */
    .text-spacing-wide {
      letter-spacing: 2px;
    }
    .text-spacing-normal {
      letter-spacing: normal;
    }
    .text-spacing-tight {
      letter-spacing: -0.5px;
    }
    .line-height-tight {
      line-height: 1.3;
    }
    .line-height-normal {
      line-height: 1.6;
    }
    .line-height-loose {
      line-height: 2;
    }
    .margin-top-0 {
      margin-top: 0;
    }
    .margin-bottom-0 {
      margin-bottom: 0;
    }
    .margin-y-sm {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .margin-y-md {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    .margin-y-lg {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }
    
    /* Classi per colori di testo */
    .text-primary {
      color: var(--primary-color);
    }
    .text-secondary {
      color: var(--secondary-color);
    }
    .text-accent {
      color: var(--accent-color);
    }
    .text-dark {
      color: var(--dark-color);
    }
    .text-success {
      color: var(--success-color);
    }
    .text-danger {
      color: var(--danger-color);
    }
    .text-muted {
      color: var(--secondary-color);
      opacity: 0.8;
    }

    /* Buttons - Design System Premium */
    .btn {
      font-family: var(--accent-font);
      font-weight: 500;
      padding: 0.875rem 2rem;
      border-radius: var(--border-radius);
      transition: all 0.3s var(--transition-cubic), transform 0.2s ease-out, box-shadow 0.3s ease;
      box-shadow: var(--shadow-sm);
      border: 1px solid transparent;
      letter-spacing: 0.025em;
      font-size: 0.9375rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      cursor: pointer;
      line-height: 1.5;
      text-align: center;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      min-height: 2.75rem;
      backdrop-filter: blur(10px);
    }
    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
      z-index: -1;
      transform: translateX(-100%);
      transition: transform var(--transition-speed) var(--transition-cubic);
    }
    .btn:hover::before {
      transform: translateX(100%);
    }
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      filter: brightness(1.05);
    }
    .btn:active {
      transform: translateY(0);
      box-shadow: var(--shadow-sm);
    }
    .btn:focus {
      outline: none;
      box-shadow: var(--shadow-md), 0 0 0 3px rgba(var(--primary-color), 0.1);
    }
    .btn-primary {
      background: var(--gradient-primary);
      border: 1px solid var(--primary-color);
      color: white;
      font-weight: 600;
      transition: all 0.3s var(--transition-cubic), transform 0.2s ease-out;
    }
    .btn-primary:hover {
      background: var(--gradient-primary-soft);
      border-color: var(--primary-light);
      color: white;
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4), var(--shadow-lg);
      filter: brightness(1.1);
      transition: all 0.3s var(--transition-cubic);
    }
    .btn-primary:focus {
      box-shadow: var(--shadow-md), 0 0 0 3px rgba(var(--primary-color), 0.2);
    }
    .btn-accent {
      background: var(--gradient-accent);
      border: 1px solid var(--accent-color);
      color: var(--dark-color);
      font-weight: 600;
    }
    .btn-accent:hover {
      background: var(--gradient-accent-soft);
      border-color: var(--accent-light);
      color: var(--dark-color);
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }
    .btn-accent:focus {
      box-shadow: var(--shadow-md), 0 0 0 3px rgba(var(--accent-color), 0.2);
    }
    .btn-outline-primary {
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
      background: var(--surface-color);
      font-weight: 500;
      backdrop-filter: blur(10px);
    }
    .btn-outline-primary:hover {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }
    .btn-outline-primary:focus {
      box-shadow: var(--shadow-md), 0 0 0 3px rgba(var(--primary-color), 0.1);
    }
    .btn-outline-secondary {
      color: var(--text-color);
      border: 1px solid var(--border-color);
      background: var(--surface-color);
      font-weight: 500;
      backdrop-filter: blur(10px);
    }
    .btn-outline-secondary:hover {
      background: var(--gradient-light);
      border-color: var(--primary-color);
      color: var(--primary-color);
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.2), var(--shadow-md);
      backdrop-filter: blur(15px);
      transition: all 0.3s var(--transition-cubic);
    }
    .btn-outline-secondary:focus {
      box-shadow: var(--shadow-sm), 0 0 0 3px rgba(var(--text-color), 0.1);
    }
    .btn-sm { padding: 0.7rem 1.5rem; font-size: 0.85rem; letter-spacing: 0.3px; }
    .btn i { line-height: 0; font-size: 1.1em; }

    /* Navbar - Migliorata con effetti più moderni */
    #header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      transform: translateY(0);
      opacity: 1;
    }
    
    #header.sticky {
      position: fixed;
      animation: slideDown 0.5s;
    }
    
    #header.hidden {
      transform: translateY(-100%);
      opacity: 0;
    }
    
    @keyframes slideDown {
      from { transform: translateY(-100%); }
      to { transform: translateY(0); }
    }
    
    .navbar {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.92) 100%);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
      height: var(--navbar-height);
      transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
      padding: 0.5rem 0;
      border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
      position: relative;
    }
    .navbar-brand {
        font-family: 'Cinzel', serif; /* Font più elegante e distintivo per il brand */
        font-weight: 700;
        font-size: 1.8rem;
        color: var(--dark-color) !important;
        letter-spacing: 0.3px; /* Spaziatura aumentata per migliorare la leggibilità */
        position: relative;
        display: inline-flex;
        align-items: center;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1), 0 0 8px rgba(var(--primary-rgb), 0.15); /* Ombra più sofisticata */
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .navbar-brand:hover {
        transform: scale(1.03) translateY(-1px);
        text-decoration: none;
        text-shadow: 2px 2px 6px rgba(0,0,0,0.12), 0 0 12px rgba(var(--primary-rgb), 0.25);
    }
    .navbar-brand::before {
        content: '</';
        font-size: 0.7em;
        color: var(--accent-color);
        position: absolute;
        left: -1.2em;
        opacity: 0.9;
        font-weight: 600;
    }
    .navbar-brand::after {
        content: '>';
        font-size: 0.7em;
        color: var(--accent-color);
        position: absolute;
        right: -0.8em;
        opacity: 0.9;
        font-weight: 600;
    }
    .navbar .nav-link {
      font-family: var(--accent-font);
      font-weight: 600;
      color: var(--body-color) !important;
      padding: 0.6rem 1.2rem !important;
      position: relative;
      transition: color var(--transition-speed) ease;
      text-transform: uppercase;
      font-size: 0.85rem;
      letter-spacing: 1px;
      white-space: nowrap; /* Previene il text wrapping */
    }
    .navbar .nav-link::before {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 10%; /* Start slightly inwards */
      width: 80%; /* Cover 80% */
      height: 3px;
      background-image: var(--gradient-accent);
      transform: scaleX(0);
      transform-origin: center; /* Animate from center */
      transition: transform var(--transition-speed) var(--transition-cubic);
      border-radius: 2px;
    }
    .navbar .nav-link:hover::before,
    .navbar .nav-link.active::before { transform: scaleX(1); }
    .navbar .nav-link:hover,
    .navbar .nav-link.active { color: var(--primary-color) !important; }
    
    /* Hamburger Menu Animation */
    .navbar-toggler { 
      border: none; 
      font-size: 1.9rem; 
      color: var(--dark-color); 
      padding: 0.25rem 0.5rem; 
      position: relative;
      width: 50px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    .navbar-toggler:focus { box-shadow: none; }
    .navbar-toggler .hamburger-icon {
      position: relative;
      width: 24px;
      height: 2px;
      background-color: var(--dark-color);
      border-radius: 3px;
      transition: all 0.3s ease;
    }
    .navbar-toggler .hamburger-icon::before,
    .navbar-toggler .hamburger-icon::after {
      content: '';
      position: absolute;
      width: 24px;
      height: 2px;
      background-color: var(--dark-color);
      border-radius: 3px;
      transition: all 0.3s ease;
    }
    .navbar-toggler .hamburger-icon::before {
      transform: translateY(-8px);
    }
    .navbar-toggler .hamburger-icon::after {
      transform: translateY(8px);
    }
    .navbar-toggler[aria-expanded="true"] .hamburger-icon {
      background-color: transparent;
    }
    .navbar-toggler[aria-expanded="true"] .hamburger-icon::before {
      transform: rotate(45deg);
    }
    .navbar-toggler[aria-expanded="true"] .hamburger-icon::after {
      transform: rotate(-45deg);
    }
    .navbar-shrink {
        height: calc(var(--navbar-height) - 10px);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    }
    @media (max-width: 991.98px) {
        /* Ridimensiona il navbar brand su mobile per evitare il wrapping */
        .navbar-brand {
            font-size: 1.4rem !important;
            letter-spacing: 0.1px;
        }
        
        /* Profile Image Mobile Styling - Same format as original */
        .img-profile-mobile {
            max-width: clamp(180px, 35vw, 280px);
            border-radius: 35% 65% 60% 40% / 40% 50% 50% 60%; /* Same blob shape */
            border: none;
            box-shadow: 0 20px 50px -12px rgba(var(--primary-rgb), 0.3);
            aspect-ratio: 1 / 1;
            object-fit: cover;
            object-position: center;
            transition: border-radius 0.5s ease-in-out;
        }
        
        .img-profile-mobile:hover {
            border-radius: 50%; /* Circle on hover */
        }
        
        @media (prefers-reduced-motion: reduce) {
             .img-profile-mobile {
                 border-radius: 50%;
             }
             .img-profile-mobile:hover {
                 border-radius: 50%;
             }
         }
         
         /* Hide h1 on small devices but keep in DOM for SEO */
          @media (max-width: 991.98px) {
              .intro-name {
                  display: none !important;
              }
              
              /* Hide original profile image on small screens */
              .img-profile {
                  display: none !important;
              }
          }
        
        .navbar-brand::before {
            left: -1em;
            font-size: 0.65em;
        }
        
        .navbar-brand::after {
            right: -0.7em;
            font-size: 0.65em;
        }
        
        .navbar-nav {
            background-color: var(--bg-color);
            margin-top: 15px; padding: 1rem;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-lg); /* Stronger shadow on mobile menu */
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        
        /* Menu verticale su mobile per migliore usabilità */
        .navbar-nav .nav-item {
            width: 100%;
            margin: 4px 0;
            text-align: center;
        }
        
        .navbar-nav .nav-link {
            display: block;
            padding: 0.8rem 1rem !important;
            border-radius: var(--border-radius);
            transition: all 0.3s ease;
        }
        
        .navbar-nav .nav-link:hover {
            background-color: rgba(var(--primary-rgb), 0.1);
        }
        .navbar .nav-link { 
            padding: 0.8rem 1rem !important; 
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        .navbar-collapse.show .nav-link,
        .navbar-collapse.collapsing .nav-link {
            opacity: 1;
            transform: translateY(0);
        }
        /* Animazione a scaletta per i link */
        .navbar-collapse.show .nav-item:nth-child(1) .nav-link,
        .navbar-collapse.collapsing .nav-item:nth-child(1) .nav-link { transition-delay: 0.05s; }
        .navbar-collapse.show .nav-item:nth-child(2) .nav-link,
        .navbar-collapse.collapsing .nav-item:nth-child(2) .nav-link { transition-delay: 0.1s; }
        .navbar-collapse.show .nav-item:nth-child(3) .nav-link,
        .navbar-collapse.collapsing .nav-item:nth-child(3) .nav-link { transition-delay: 0.15s; }
        .navbar-collapse.show .nav-item:nth-child(4) .nav-link,
        .navbar-collapse.collapsing .nav-item:nth-child(4) .nav-link { transition-delay: 0.2s; }
        .navbar-collapse.show .nav-item:nth-child(5) .nav-link,
        .navbar-collapse.collapsing .nav-item:nth-child(5) .nav-link { transition-delay: 0.25s; }
        .navbar-collapse.show .nav-item:nth-child(6) .nav-link,
        .navbar-collapse.collapsing .nav-item:nth-child(6) .nav-link { transition-delay: 0.3s; }
        .navbar .nav-link::before { display: none; }
        .navbar .nav-link.active { background-color: var(--ultra-light-gray); border-radius: var(--border-radius); }
    }
    
    /* Media query per schermi medi - prevenzione text wrapping */
    @media (max-width: 1199.98px) and (min-width: 992px) {
        .navbar .nav-link {
            padding: 0.6rem 0.8rem !important;
            font-size: 0.8rem;
            letter-spacing: 0.8px;
        }
    }
    
    /* Ottimizzazione per schermi molto piccoli */
    @media (max-width: 575.98px) {
        .navbar-brand {
            font-size: 1.2rem !important;
            letter-spacing: 0px;
        }
        
        .navbar-brand::before {
            left: -0.9em;
            font-size: 0.6em;
        }
        
        .navbar-brand::after {
            right: -0.6em;
            font-size: 0.6em;
        }
        
        .navbar-toggler {
            width: 45px;
            height: 35px;
        }
        
        .navbar-toggler .hamburger-icon {
            width: 20px;
        }
        
        .navbar-toggler .hamburger-icon::before,
        .navbar-toggler .hamburger-icon::after {
            width: 20px;
        }
    }

    /* Sections & Titles */
    section { padding: clamp(80px, 13vh, 140px) 0; }
    section:nth-of-type(odd) { background-image: var(--gradient-light); }
    section:nth-of-type(even) { background-color: var(--section-bg); }
    .section-title {
      text-align: center;
      margin-bottom: clamp(50px, 10vh, 80px);
      position: relative;
      padding-bottom: 25px;
    }
    .section-title h2 {
      color: var(--dark-color);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 15px;
      position: relative;
      display: inline-block;
      font-family: var(--heading-font);
      font-weight: 700;
    }
    .section-title h2::before { /* Sparkle/Dot effect */
        content: '\2728'; /* Unicode sparkle or use ::before/::after dots */
        font-size: 0.7em;
        color: var(--accent-color);
        position: absolute;
        left: -1.5em;
        top: 0.1em;
        opacity: 0.7;
    }
     .section-title h2::after { /* Line decoration */
        content: '';
        position: absolute;
        display: block;
        width: 80px;
        height: 4px;
        background: var(--gradient-primary);
        bottom: -12px;
        left: calc(50% - 40px);
        border-radius: 2px;
    }
    .section-title p.lead {
      color: var(--secondary-color);
      max-width: 700px;
      margin: 20px auto 0 auto;
      font-size: 1.15rem;
      font-family: var(--accent-font);
      letter-spacing: 0.2px;
    }

    /* Card Style - Premium Design System */
    .card {
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-lg);
      background: var(--surface-color);
      box-shadow: var(--shadow-sm);
      transition: all var(--transition-speed) var(--transition-cubic);
      height: 100%;
      overflow: hidden;
      backdrop-filter: blur(10px);
      position: relative;
    }
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gradient-primary);
      opacity: 0;
      transition: opacity var(--transition-speed) var(--transition-cubic);
    }
    .card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
      border-color: var(--primary-light);
    }
    .card:hover::before {
      opacity: 1;
    }
    .card-body {
      padding: clamp(1.5rem, 5vw, 2.5rem);
      position: relative;
      z-index: 1;
    }
    .card-title {
      color: var(--primary-color);
      font-weight: 600;
      margin-bottom: 1rem;
      font-size: 1.25rem;
      line-height: 1.3;
    }

    /* Intro Section - Refined */
    #intro {
      min-height: 75vh; /* Ridotto da 95vh per meno padding */
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background-color: var(--ultra-light-gray); /* Very light base */
      margin-bottom: 60px; /* Aggiunto margine verso il basso */
       /* Subtle diagonal lines background */
       background-image: linear-gradient(45deg, #f9f9f9 25%, transparent 25%, transparent 75%, #f9f9f9 75%, #f9f9f9),
                         linear-gradient(-45deg, #f9f9f9 25%, transparent 25%, transparent 75%, #f9f9f9 75%, #f9f9f9);
       background-size: 60px 60px;
    }
     #intro .container { 
       position: relative; 
       z-index: 2;
       max-width: 95%; /* Occupa più spazio laterale */
       padding-left: 1rem; /* Ridotto padding laterale */
       padding-right: 1rem; /* Ridotto padding laterale */
     }
     
     /* Miglioramenti specifici per i bottoni intro */
     #intro .btn {
       font-size: 1rem;
       padding: 1rem 2.5rem;
       border-radius: 50px;
       font-weight: 600;
       letter-spacing: 0.5px;
       position: relative;
       overflow: hidden;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
     
     #intro .btn-primary {
       background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
       border: none;
       box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3);
     }
     
     #intro .btn-primary:hover {
       background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
       transform: translateY(-4px) scale(1.05);
       box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.5);
     }
     
     #intro .btn-outline-secondary {
       background: rgba(255, 255, 255, 0.1);
       border: 2px solid rgba(var(--primary-rgb), 0.3);
       color: var(--primary-color);
       backdrop-filter: blur(20px);
     }
     
     #intro .btn-outline-secondary:hover {
       background: rgba(var(--primary-rgb), 0.1);
       border-color: var(--primary-color);
       color: var(--primary-color);
       transform: translateY(-4px) scale(1.05);
       box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.3);
     }
     
     #intro .btn i {
       font-size: 1.1em;
       margin-right: 0.5rem;
       transition: transform 0.3s ease;
     }
     
     #intro .btn:hover i {
       transform: scale(1.2) rotate(5deg);
     }
     
     /* Riduzione margini globali per tutti i container */
     .container {
       max-width: 95% !important; /* Occupa più spazio della pagina */
       padding-left: 1rem !important;
       padding-right: 1rem !important;
     }
     
     @media (min-width: 1200px) {
       .container {
         max-width: 96% !important; /* Ancora più spazio su schermi grandi */
         padding-left: 1.5rem !important;
         padding-right: 1.5rem !important;
       }
     }
     #intro h1 {
        color: var(--dark-color); /* Solid color for better readability */
        text-align: center; /* Centrato su mobile */
     }
     @media (min-width: 992px) {
        #intro h1 {
          text-align: left; /* Allineato a sinistra su desktop */
        }
     }
     #intro .typing-container {
        font-size: clamp(1.4rem, 3.2vw, 2rem);
        font-weight: 500;
        color: var(--primary-color);
        min-height: 70px; /* Ensure space */
        display: flex;
        align-items: center;
        justify-content: center;
     }
     #intro #typing-text {
        color: var(--primary-color);
        font-weight: 600;
        display: inline-block; /* Assicura che il testo sia visibile */
        min-height: 1.5em; /* Assicura che l'elemento abbia un'altezza minima */
        min-width: 1ch; /* Assicura che l'elemento abbia una larghezza minima */
        visibility: visible !important; /* Forza la visibilità */
        position: relative; /* Necessario per il posizionamento corretto del cursore */
     }
      @media (min-width: 992px) {
        #intro .typing-container { justify-content: flex-start; }
        #intro h1.text-center { text-align: left !important; }
      }
     #intro .typing-cursor {
        display: inline-block;
        width: 4px; height: 1.3em;
        background-color: var(--primary-color);
        margin-left: 2px;
        animation: blink 0.8s infinite;
        vertical-align: middle;
        border-radius: 2px;
        position: relative;
        top: 1px;
     }
     @keyframes blink { 50% { opacity: 0; } }
     #intro .img-profile {
      max-width: clamp(240px, 48vw, 380px);
      border-radius: 35% 65% 60% 40% / 40% 50% 50% 60%; /* Blob shape */
      border: none; /* Remove solid border */
      box-shadow: 0 25px 60px -15px rgba(var(--primary-rgb), 0.3);
      aspect-ratio: 1 / 1;
      object-fit: cover;
      object-position: center;
      transition: border-radius 0.5s ease-in-out; /* Animate shape */
     }
      #intro .img-profile:hover {
         border-radius: 50%; /* Circle on hover */
      }
     #intro .social-icons a {
        font-size: 1.9rem; color: var(--secondary-color);
        margin: 0 12px; transition: all 0.3s var(--transition-cubic);
        display: inline-block;
     }
     #intro .social-icons a:hover { color: var(--primary-color); transform: translateY(-6px) rotate(5deg); text-decoration: none; }
     @media (prefers-reduced-motion: reduce) {
        #intro .typing-cursor { animation: none; opacity: 1; }
        #intro .img-profile { animation: none; border-radius: 50%; }
        #intro .img-profile:hover { border-radius: 50%; }
        #intro .social-icons a:hover { transform: none; }
     }

    /* About Me Section - Revamped */
    #about { background-image: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%); }
    #about .about-content p:first-of-type { font-size: 1.1rem; font-weight: 400; }
    .value-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 2rem;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
        padding: 2rem 1.8rem;
        border-radius: 20px;
        border: 1px solid rgba(var(--primary-rgb), 0.08);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .value-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }
    
    .value-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
        background: linear-gradient(135deg, #ffffff 0%, rgba(var(--primary-rgb), 0.02) 100%);
        border-color: rgba(var(--primary-rgb), 0.15);
    }
    
    .value-item:hover::before {
        transform: scaleX(1);
    }
    
    .value-icon {
        flex-shrink: 0;
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 1.8rem;
        box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.25);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }
    
    .value-icon::after {
        content: '';
        position: absolute;
        inset: -2px;
        background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        border-radius: 20px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    
    .value-item:hover .value-icon {
        transform: scale(1.05) rotate(5deg);
        box-shadow: 0 16px 40px rgba(var(--primary-rgb), 0.35);
    }
    
    .value-item:hover .value-icon::after {
        opacity: 1;
    }
    
    .value-icon i {
        color: white;
        font-size: 2.2rem;
        text-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: all 0.4s ease;
        z-index: 1;
    }
    
    .value-item:hover .value-icon i {
        transform: scale(1.1);
        filter: drop-shadow(0 4px 12px rgba(255,255,255,0.3));
    }
    
    .value-text h5 {
        margin-bottom: 0.8rem;
        font-weight: 700;
        color: var(--dark-color);
        font-size: 1.25rem;
        transition: color 0.3s ease;
    }
    
    .value-item:hover .value-text h5 {
        color: var(--primary-color);
    }
    
    .value-text p {
        margin-bottom: 0;
        color: var(--secondary-color);
        font-size: 1rem;
        line-height: 1.6;
        transition: color 0.3s ease;
    }
    
    .value-item:hover .value-text p {
        color: var(--text-color);
    }
    
    /* Tech Badges for Tools & Methodologies - Migliorati e Ottimizzati */
    .tech-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem; /* Ridotto padding per renderle più compatte */
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.15) 100%);
        border: 1px solid rgba(var(--primary-rgb), 0.3); /* Bordo più visibile */
        border-radius: var(--border-radius-pill);
        color: var(--dark-color);
        font-weight: 600;
        font-size: 0.85rem; /* Ridotto leggermente il font size */
        transition: all 0.3s ease;
        box-shadow: var(--shadow-sm);
        margin-bottom: 0.4rem; /* Ridotto margine inferiore */
        margin-right: 0.4rem; /* Ridotto margine destro */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        /* Miglioramento leggibilità */
        background-color: rgba(255, 255, 255, 0.95); /* Aumentato ulteriormente opacità per massima leggibilità */
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.9); /* Migliorato text-shadow per leggibilità */
        letter-spacing: 0.2px; /* Migliorata spaziatura lettere */
    }
    .tech-badge i {
        color: var(--primary-color);
        font-size: 1.1rem;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }
    .tech-badge:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow);
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0.25) 100%);
        border-color: rgba(var(--primary-rgb), 0.4);
    }

    /* Services Section - Consistent Icons with Modern Effects */
    #services .icon-box .icon {
      background-image: var(--gradient-primary); /* Use primary gradient */
      position: relative;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
      box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.15);
    }
    #services .icon-box .icon::after {
      content: '';
      position: absolute;
      width: 150%;
      height: 150%;
      background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
      top: -50%;
      left: -50%;
      opacity: 0;
      transition: all 0.6s ease;
      transform: scale(0.5);
    }
    #services .icon-box .icon i {
        color: #fff; /* White icon on primary */
        font-size: 30px;
        transition: all 0.5s ease;
        position: relative;
        z-index: 2;
    }
     #services .icon-box:hover .icon {
        background-image: var(--gradient-accent); /* Swap to accent on hover */
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 15px 35px rgba(var(--accent-rgb), 0.3);
     }
     #services .icon-box:hover .icon::after {
        opacity: 0.6;
        transform: scale(1) rotate(35deg);
        animation: iconShine 2s infinite ease-in-out;
     }
     #services .icon-box:hover .icon i {
        color: var(--dark-color);
        transform: scale(1.15);
     }
     @keyframes iconShine {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
     }
     #services .icon-box h4 { color: var(--dark-color); } /* Titles darker */

    /* Curriculum Section - Ottimizzazione spazi */
    #curriculum {
      padding: 3rem 0; /* Ridotto padding verticale */
    }
    
    #curriculum .container {
      max-width: 96%; /* Maggiore utilizzo dello spazio laterale */
      padding: 0 1rem;
    }
    
    #curriculum .section-title {
      margin-bottom: 2.5rem; /* Ridotto margine inferiore */
    }
    
    #curriculum .progress-bar { 
      background-image: var(--gradient-accent); 
      height: 10px; /* Leggermente più alto per migliore visibilità */
      border-radius: 5px;
      transition: width 1.2s ease-in-out;
    }
    #curriculum .progress {
      height: 10px;
      background-color: rgba(var(--accent-rgb), 0.1);
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 1.5rem; /* Ridotto spazio tra progress bar */
    }
    #curriculum .progress-title {
      margin-bottom: 0.4rem; /* Ridotto margine */
      font-weight: 500;
      font-size: 0.95rem; /* Leggermente più piccolo per risparmiare spazio */
    }
    
    /* Curriculum Tab Buttons - Ottimizzazione spazi */
    #curriculumTab {
      gap: 10px; /* Ridotto gap tra tab */
      margin-bottom: 2rem; /* Ridotto margine inferiore */
    }
    #curriculumTab .nav-link {
      background-color: transparent;
      color: var(--secondary-color);
      border: 2px solid var(--border-color);
      border-radius: var(--border-radius-pill);
      padding: 0.7rem 1.5rem; /* Ridotto padding per compattezza */
      font-weight: 600;
      font-size: 0.9rem; /* Leggermente più piccolo */
      display: flex;
      align-items: center;
      gap: 6px; /* Ridotto gap tra icona e testo */
      transition: all 0.3s ease;
    }
    #curriculumTab .nav-link i {
      font-size: 1.2rem;
    }
    #curriculumTab .nav-link.active {
      background-image: var(--gradient-primary);
      color: white;
      border-color: transparent;
      box-shadow: var(--shadow);
      transform: translateY(-3px);
    }
    #curriculumTab .nav-link:hover:not(.active) {
      border-color: var(--primary-color);
      color: var(--primary-color);
      transform: translateY(-3px);
    }
    
    /* Experience Carousel - Ensure smooth interaction */
    #experienceCarousel {
       /* Prevent text selection during swipe */
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       touch-action: pan-y; /* Allow vertical scroll while swiping */
       position: relative;
       max-width: 98%; /* Maggiore utilizzo dello spazio */
       margin: 0 auto;
       padding: 0.5rem 0; /* Ridotto padding verticale */
    }
    
    /* Ottimizzazione spazi per le colonne del curriculum */
    #curriculum .row.gy-5 {
      --bs-gutter-y: 2rem; /* Ridotto spazio verticale tra colonne */
    }
    
    #curriculum .col-lg-6 {
      padding: 0 1rem; /* Ridotto padding laterale delle colonne */
    }
    
    #curriculum .mb-4 {
      margin-bottom: 1.2rem !important; /* Ridotto margine tra elementi */
    }
    
    /* Miglioramento controlli carousel */
    #experienceCarousel .carousel-control-prev,
    #experienceCarousel .carousel-control-next {
      width: 50px;
      height: 50px;
      background-color: var(--primary-color);
      border-radius: 50%;
      opacity: 0.8;
      top: 50%;
      transform: translateY(-50%);
      margin: 0 15px;
    }
    
    #experienceCarousel .carousel-control-prev {
      left: -10px;
    }
    
    #experienceCarousel .carousel-control-next {
      right: -10px;
    }
    
    #experienceCarousel .carousel-control-prev:hover,
    #experienceCarousel .carousel-control-next:hover {
      opacity: 1;
      background-color: var(--accent-color);
    }
    
    #experienceCarousel .carousel-control-prev-icon,
    #experienceCarousel .carousel-control-next-icon {
      width: 24px;
      height: 24px;
    }
    
    @media (max-width: 768px) {
      #experienceCarousel .carousel-control-prev,
      #experienceCarousel .carousel-control-next {
        width: 40px;
        height: 40px;
        margin: 0 5px;
      }
      
      #experienceCarousel .carousel-control-prev {
        left: 0;
      }
      
      #experienceCarousel .carousel-control-next {
        right: 0;
      }
      
      #experienceCarousel {
        max-width: 100%;
        padding: 0.5rem 0;
      }
      
      .experience-card {
        padding: 1.5rem;
        min-height: 420px; /* Aumentata per schermi più piccoli */
      }
    }
    
    /* Stile specifico per i bottoni nel carousel di esperienza */
    #experienceCarousel .btn-outline-secondary {
        background: rgba(255, 255, 255, 0.95); /* Sfondo più opaco per maggiore contrasto */
        border-width: 2px; /* Bordo più spesso */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.9rem; /* Aumentato ulteriormente lo spazio tra icona e testo */
        margin-top: 0.5rem; /* Spazio sopra il bottone */
        padding: 1rem 2.5rem; /* Padding ulteriormente aumentato per bottoni più grandi */
        font-size: 1.1rem; /* Dimensione testo ulteriormente aumentata */
        white-space: normal; /* Permette al testo di andare a capo se necessario */
        min-width: 220px; /* Larghezza minima aumentata */
        text-align: center; /* Assicura che il testo sia centrato */
        line-height: 1.4; /* Migliorato interlinea per leggibilità */
        max-width: 100%; /* Assicura che il bottone non superi la larghezza del contenitore */
        height: auto; /* Permette al bottone di adattarsi all'altezza del contenuto */
    }
    
    #experienceCarousel .btn-outline-secondary i {
        font-size: 1.2rem; /* Dimensione icona ulteriormente aumentata */
        flex-shrink: 0; /* Impedisce all'icona di rimpicciolirsi */
    }
    
    .experience-card {
        background: #fff; /* Solid white for contrast */
        box-shadow: var(--shadow);
        border: 1px solid var(--border-light-color);
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        min-height: 380px; /* Altezza minima per uniformare le card */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .experience-card p i { 
    color: var(--primary-color);
    margin-right: 8px;
} /* Match card title color */

.experience-card p {
    margin-bottom: 0.75rem; /* Riduce lo spazio tra i paragrafi */
    line-height: 1.5;
}

.experience-card h5 {
    margin-bottom: 1rem; /* Aumenta lo spazio dopo il titolo */
    font-weight: 600;
}
    
    /* Custom Scrollbar - Cross-browser compatible */
    /* Webkit (Chrome, Safari, newer versions of Opera) */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-track {
      background: var(--ultra-light-gray);
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-image: var(--gradient-primary);
      border-radius: 10px;
      border: 2px solid var(--ultra-light-gray);
    }
    ::-webkit-scrollbar-thumb:hover {
      background-image: var(--gradient-accent);
    }
    
    /* Firefox */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--primary-color) var(--ultra-light-gray);
    }

    /* Clients Section - Icons */
    #clients { background-color: var(--bg-color); }
    #clients .client-item {
        padding: 20px;
        display: flex;
        flex-direction: column; /* Stack icon and text */
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 150px; /* Fixed height container */
        transition: transform 0.2s ease-out;
    }
     #clients .client-item:hover {
        transform: scale(1.05);
     }
    #clients .client-icon i {
      font-size: clamp(3rem, 8vw, 4rem); /* Responsive icon size */
      color: var(--secondary-color);
      opacity: 0.7;
      transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease;
      margin-bottom: 0.5rem; /* Space between icon and text */
    }
     #clients .client-item:hover .client-icon i {
        color: var(--primary-color);
        opacity: 1;
     }
     #clients .client-name {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--secondary-color);
        margin-top: auto; /* Push name to bottom */
     }

    /* Contact Section - Improved Contrast */
    #contacts .contact-info-box {
      /* Use solid color with high contrast text */
      background-color: var(--dark-color); /* Dark background */
      color: rgba(255,255,255,0.8); /* Light text */
      padding: clamp(2rem, 6vw, 3rem);
      border-radius: var(--border-radius-xl);
      box-shadow: var(--shadow-lg);
      height: 100%;
      border: none;
    }
    #contacts .contact-info-box h4 { color: #fff; }
    #contacts .contact-info i { color: var(--accent-color); } /* Accent color for icons */
    #contacts .contact-info p { color: rgba(255,255,255,0.8); }
    #contacts .contact-info p strong { color: #fff; }
    #contacts .contact-info p a { color: var(--accent-color); font-weight: 500; } /* Accent link */
    #contacts .contact-info p a:hover { color: #fff; opacity: 0.9; }
    #contacts .contact-info .btn-outline-secondary {
        color: #fff; border-color: rgba(255,255,255,0.5);
    }
    #contacts .contact-info .btn-outline-secondary:hover {
        background-color: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.8);
        color: #fff;
    }
    #contacts .contact-form-box {
        background-color: var(--card-bg);
        padding: clamp(2rem, 6vw, 3rem);
        border-radius: var(--border-radius-xl);
        box-shadow: var(--shadow);
        height: 100%;
        border: 1px solid var(--border-light-color);
    }
    
    /* Miglioramenti per la sezione Acquisizione Clienti */
    #contacts .form-label {
        margin-bottom: 0.5rem;
        font-weight: 500;
    }
    
    #contacts .input-group {
        margin-bottom: 0.75rem;
    }
    
    #contacts .input-group-text {
        background: var(--surface-color);
        border: 1px solid var(--border-color);
        color: var(--primary-color);
        transition: all var(--transition-speed) var(--transition-cubic);
        font-weight: 500;
    }
    
    #contacts .input-group:focus-within .input-group-text {
        background: var(--primary-light);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
    
    #contacts .form-control, 
    #contacts .form-select {
        border: 1px solid var(--border-color);
        background: var(--surface-color);
        color: var(--text-color);
        border-radius: var(--border-radius);
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
        transition: all var(--transition-speed) var(--transition-cubic);
        backdrop-filter: blur(10px);
    }
    
    #contacts .form-control:focus,
    #contacts .form-select:focus {
        outline: none;
        border-color: var(--primary-color);
        background: white;
        box-shadow: var(--shadow-sm), 0 0 0 3px rgba(var(--primary-color), 0.1);
        transform: translateY(-1px);
    }
    #contacts .form-control::placeholder {
        color: var(--muted-color);
        opacity: 0.8;
    }
    
    /* Miglioramenti responsive */
    @media (max-width: 767.98px) {
        #contacts .col-md-6 {
            margin-bottom: 0.5rem;
        }
        
        #contacts .mt-3 {
            margin-top: 0.75rem !important;
        }
        
        #contacts .mt-4 {
            margin-top: 1.25rem !important;
        }
    }
    
    /* Ottimizzazione per schermi superiori al mobile - Espansione card per ridurre spazio laterale */
    @media (min-width: 992px) {
        #contacts .col-lg-7 {
            flex: 0 0 auto;
            width: 75%; /* Espanso da 58.33% (7/12) a 75% (9/12) */
        }
    }
    
    @media (min-width: 1200px) {
        #contacts .col-lg-7 {
            width: 80%; /* Ulteriore espansione su schermi XL */
        }
    }
    
    @media (min-width: 1400px) {
        #contacts .col-lg-7 {
            width: 70%; /* Bilanciamento ottimale su schermi XXL */
            max-width: 900px; /* Limite massimo per mantenere leggibilità */
        }
    }
     #contacts .contact-form-box button[type="submit"] {
        background-image: var(--gradient-primary);
        border: none; color: #fff;
     }
     #contacts .contact-form-box button[type="submit"]:hover { filter: brightness(1.1); color: #fff; }

    /* Form Switch - Toggle stilizzato moderno e intuitivo - Ottimizzato per spaziatura e leggibilità */
    .form-switch-container {
      display: flex;
      justify-content: center;
      margin: 1.5rem 0 2.5rem; /* Aumentato il margine per dare più spazio sopra e sotto */
      width: 100%;
    }
    
    .form-switch-wrapper {
      position: relative;
      display: inline-block;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      width: 100%;
      max-width: 450px; /* Aumentato ulteriormente per garantire spazio sufficiente al testo */
      box-shadow: var(--shadow-sm);
      border-radius: var(--border-radius-pill);
    }
    
    .form-switch-wrapper:hover {
      transform: translateY(-3px); /* Aumentato leggermente l'effetto hover */
      box-shadow: var(--shadow);
    }
    
    .form-switch-checkbox {
      height: 0;
      width: 0;
      visibility: hidden;
      position: absolute;
    }
    
    .form-switch-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      width: 100%;
      height: 68px; /* Aumentato per migliorare la leggibilità e dare più spazio */
      background: var(--ultra-light-gray);
      border-radius: var(--border-radius-pill);
      position: relative;
      transition: all 0.4s var(--transition-cubic);
      padding: 0;
      border: 2px solid var(--border-light-color);
      box-shadow: var(--shadow-inset);
      overflow: hidden;
    }
    
    .form-switch-label:hover {
      border-color: rgba(var(--primary-rgb), 0.4); /* Aumentato contrasto */
      box-shadow: var(--shadow-inset);
    }
    
    .form-switch-label .form-switch-inner {
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: 1.05rem;
      font-weight: 600;
      z-index: 2;
      font-family: var(--heading-font);
      letter-spacing: 0.2px;
      padding: 0;
      position: relative;
      height: 100%;
    }
    
    /* Miglioramento per le icone nello switch */
    .switch-option i {
      margin-right: 6px; /* Ridotto spazio tra icona e testo per più compattezza */
      font-size: 1.1rem; /* Ridotto leggermente per bilanciare con il testo */
      position: relative;
      top: -1px; /* Allineamento verticale fine con il testo */
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    .form-switch-label .form-switch-inner::before {
      content: attr(data-personal);
      position: absolute;
      left: 15px;
      width: 50%;
      text-align: center;
      color: var(--dark-color);
      transition: all 0.4s var(--transition-cubic);
      opacity: 1;
      transform: translateY(0);
      white-space: normal; /* Permette il wrapping del testo */
      overflow: hidden;
      padding: 0 15px; /* Aumentato padding orizzontale */
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    
    .form-switch-label .form-switch-inner::after {
      content: attr(data-business);
      position: absolute;
      right: 15px;
      width: 50%;
      text-align: center;
      color: var(--secondary-color);
      transition: all 0.4s var(--transition-cubic);
      opacity: 0.7;
      white-space: normal; /* Permette il wrapping del testo */
      overflow: hidden;
      padding: 0 15px; /* Aumentato padding orizzontale */
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    
    /* Stile per testi sempre visibili nello switch */
    .switch-option.always-visible {
      opacity: 1 !important;
      transform: translateY(0) !important;
      font-weight: 600;
      z-index: 5;
      text-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
      padding: 0 12px; /* Aumentato padding per più spazio dai bordi */
      display: flex;
      align-items: center;
      justify-content: center; /* Centra orizzontalmente il contenuto */
      white-space: nowrap; /* Evita che il testo vada a capo */
      position: absolute;
      top: 0;
      height: 100%;
      width: 50%;
      font-size: 0.95rem; /* Ridotto leggermente per più spazio */
    }
    
    .switch-option.switch-option-left {
      left: 0;
    }
    
    .switch-option.switch-option-right {
      right: 0;
    }
    
    .form-switch-checkbox:checked + .form-switch-label .form-switch-inner::before {
      color: var(--secondary-color);
      opacity: 0.7;
    }
    
    .form-switch-checkbox:checked + .form-switch-label .form-switch-inner::after {
      color: var(--dark-color);
      opacity: 1;
      transform: translateY(0);
    }
    
    .form-switch-switch {
      position: absolute;
      top: 4px;
      left: 4px;
      width: 48%; /* Ridotto leggermente per più spazio al testo */
      max-width: 215px; /* Ridotto per dare più spazio al testo */
      height: 60px; /* Aumentato per migliorare la leggibilità */
      border-radius: var(--border-radius-pill);
      transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      background-image: var(--gradient-primary);
      box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4); /* Ombra più pronunciata */
      z-index: 1;
      /* Effetto brillante */
      overflow: hidden;
    }
    
    .form-switch-switch::after {
      content: '';
      position: absolute;
      top: 0;
      left: -50%;
      width: 200%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); /* Aumentato contrasto */
      transition: 0.6s;
      transform: skewX(-15deg);
    }
    
    .form-switch-label:hover .form-switch-switch::after {
      left: 150%;
    }
    
    .form-switch-checkbox:checked + .form-switch-label .form-switch-switch {
      left: calc(100% - 48% - 4px); /* Aggiornato per la nuova larghezza */
      background-image: var(--gradient-primary);
    }
    
    .form-switch-label:active .form-switch-switch {
      width: 44%; /* Ridotto leggermente quando attivo */
      transform: scale(0.97);
    }
    
    /* Responsive per schermi piccoli */
    @media (max-width: 576px) {
      .form-switch-wrapper {
        max-width: 380px; /* Aumentato per dare più spazio */
        width: 100%;
      }
      
      .form-switch-label {
        height: 74px; /* Aumentato ulteriormente per dare più spazio al testo */
      }
      
      .form-switch-switch {
        height: 66px; /* Aumentato per adattarsi al contenitore */
      }
      
      /* Riduzione dimensione testo su mobile */
      .form-switch-label .form-switch-inner {
        font-size: 0.95rem;
      }
      
      /* Miglioramento spaziatura icone su mobile */
      .switch-option i {
        margin-right: 6px;
        font-size: 1.1rem;
      }
      
      .switch-option.always-visible {
        padding: 0 5px; /* Ridotto padding su mobile */
      }
      
      .form-switch-label .form-switch-inner::before,
      .form-switch-label .form-switch-inner::after {
        padding: 0 10px; /* Aumentato padding */
        line-height: 1.3; /* Aumentato per migliorare la spaziatura delle righe */
        hyphens: auto; /* Abilita la sillabazione automatica */
        word-wrap: break-word; /* Permette alle parole lunghe di andare a capo */
      }
    }
    
    /* Aggiunto supporto per schermi molto piccoli */
    @media (max-width: 360px) {
      .form-switch-wrapper {
        max-width: 300px; /* Aumentato per dare più spazio */
      }
      
      .form-switch-label {
        height: 80px; /* Aumentato ulteriormente per dare più spazio al testo su schermi piccoli */
      }
      
      .form-switch-switch {
        height: 72px; /* Aumentato per adattarsi al contenitore */
      }
      
      .form-switch-label .form-switch-inner::before,
      .form-switch-label .form-switch-inner::after {
        font-size: 0.85rem; /* Leggermente aumentato per migliorare la leggibilità */
        padding: 0 8px; /* Ridotto padding per adattarsi meglio */
      }
      
      .switch-option.always-visible {
        font-size: 0.9rem; /* Dimensione del testo ottimizzata */
        padding: 0 4px; /* Ridotto padding per adattarsi meglio */
      }
      
      .switch-option i {
        margin-right: 4px; /* Ridotto spazio tra icona e testo */
        font-size: 1rem; /* Dimensione icona ottimizzata */
      }
    }
    
    /* Footer - Migliorato esteticamente */
    footer { 
      background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%); /* Gradiente elegante */
      padding: 4rem 0 1.5rem; /* Aumentato padding superiore */
      position: relative;
      overflow: hidden;
      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15); /* Ombra più pronunciata */
      border-top: 4px solid var(--primary-color); /* Bordo superiore */
      color: rgba(255, 255, 255, 0.85); /* Testo leggermente più visibile */
    }
    
    /* Stile per il timer di lettura */
    .reading-timer-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: rgba(var(--primary-rgb), 0.1);
      z-index: 1000;
    }
    
    .reading-timer-bar {
      height: 100%;
      width: 0;
      background-image: var(--gradient-primary);
      /* Transizione rimossa - gestita da JavaScript per fluidità ottimale */
    }
    
    /* Stili per la sezione Skills */
    #skills-assessment {
      background-color: var(--ultra-light-gray);
    }
    
    .skill-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      margin: 0.5rem;
      background-color: white;
      border-radius: var(--border-radius-pill);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: all var(--transition-speed) ease;
      border: 1px solid var(--border-light-color);
    }
    
    .skill-chip:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
      border-color: var(--primary-color);
    }
    
    .skill-chip.active {
      background-image: var(--gradient-light);
      border-color: var(--primary-color);
    }
    
    .skill-chip i {
      margin-right: 0.5rem;
      color: var(--primary-color);
    }
    
    /* Tooltip per il rating delle skill */
    .skill-rating-tooltip {
      position: absolute;
      display: none;
      background-color: white;
      border-radius: var(--border-radius-lg);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      padding: 1.2rem;
      min-width: 220px;
      z-index: 1000;
      border: 2px solid var(--primary-color);
      text-align: center;
      animation: fadeIn 0.3s ease;
      pointer-events: auto;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      opacity: 0;
      transform: translateY(10px) scale(0.95);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      --arrow-position: bottom; /* Default: freccia in basso */
    }
    
    /* Effetto di pulsazione quando il tooltip è attivo */
    .skill-rating-tooltip[style*="opacity: 1"] {
      animation: pulse 1.5s infinite alternate;
      animation-delay: 0.5s;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    /* Variabile per la posizione della freccia del tooltip */
    .skill-rating-tooltip {
      --arrow-position: bottom; /* Default: freccia in basso */
    }
    
    /* Indicatore a forma di freccia per il tooltip */
    .skill-rating-tooltip::after {
      content: '';
      position: absolute;
      left: 50%;
      margin-left: -10px;
      border-width: 10px;
      border-style: solid;
      pointer-events: none;
    }
    
    /* Freccia in basso (tooltip sopra la chip) */
    .skill-rating-tooltip[style*="--arrow-position: bottom"]::after,
    .skill-rating-tooltip:not([style*="--arrow-position"])::after {
      bottom: -20px;
      border-color: var(--primary-color) transparent transparent transparent;
      border-width: 10px 10px 0;
    }
    
    /* Freccia in alto (tooltip sotto la chip) */
    .skill-rating-tooltip[style*="--arrow-position: top"]::after {
      top: -20px;
      border-color: transparent transparent var(--primary-color) transparent;
      border-width: 0 10px 10px;
    }
    
    .skill-rating-tooltip .skill-name {
      font-weight: 700;
      font-size: 1.2rem;
      margin-bottom: 0.7rem;
      color: var(--primary-color);
      position: relative;
      display: inline-block;
      padding-bottom: 5px;
    }
    
    .skill-rating-tooltip .skill-name::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 3px;
      background: var(--gradient-accent);
      border-radius: 2px;
    }
    
    .skill-rating-tooltip .skill-stars {
      margin-bottom: 0.5rem;
      font-size: 1.2rem;
      color: #FFD700; /* Colore oro per le stelle */
      letter-spacing: 2px; /* Spazio tra le stelle */
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    .skill-rating-tooltip .skill-stars i {
      filter: drop-shadow(0 0 1px rgba(0,0,0,0.3));
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      margin: 0 2px;
    }
    
    .skill-rating-tooltip .skill-stars i:hover {
      transform: scale(1.3) rotate(5deg);
      color: #FFC107;
      animation: pulse 0.6s infinite alternate;
    }
    
    .skill-rating-tooltip .skill-stars i.bi-star {
      color: #d1d1d1;
    }
    
    .skill-rating-tooltip .skill-level {
      font-weight: 500;
      margin-top: 0.8rem;
      color: var(--body-color);
      transition: all 0.3s ease;
    }
    
    .skill-rating-tooltip .skill-level-text {
      font-weight: 600;
      color: var(--primary-color);
      transition: all 0.3s ease;
    }
    
    .skill-rating-tooltip .skill-stars i.bi-star:hover {
      color: #FFC107;
      opacity: 0.7;
    }
    
    .skill-rating-tooltip .skill-level {
      font-size: 0.95rem;
      color: var(--secondary-color);
      margin-top: 0.5rem;
      padding: 5px 10px;
      background-color: var(--ultra-light-gray);
      border-radius: var(--border-radius-pill);
      display: inline-block;
    }
    
    .skill-rating-tooltip .skill-level-text {
      font-weight: 700;
      color: var(--dark-color);
      position: relative;
      transition: all 0.3s ease;
    }
    
    .skill-rating-tooltip:hover .skill-level-text {
      color: var(--primary-color);
    }
    
    .skill-rating-container {
      max-width: 500px;
      margin: 2rem auto;
      padding: 1.5rem;
      background-color: white;
      border-radius: var(--border-radius-lg);
      box-shadow: var(--shadow);
    }
    
    .skill-table {
      width: 100%;
      border-collapse: collapse;
    }
    
    .skill-table th, .skill-table td {
      padding: 0.75rem;
      text-align: left;
      border-bottom: 1px solid var(--border-light-color);
    }
    
    .skill-table th {
      font-weight: 600;
      color: var(--dark-color);
    }
    
    .skill-rating {
      display: flex;
      align-items: center;
    }
    
    .skill-rating-value {
      width: 2rem;
      text-align: center;
      font-weight: 600;
      color: var(--primary-color);
    }
    
    .skill-rating-bar {
      flex-grow: 1;
      height: 8px;
      background-color: var(--light-gray);
      border-radius: var(--border-radius-pill);
      overflow: hidden;
      margin: 0 0.5rem;
    }
    
    .skill-rating-progress {
      height: 100%;
      background-image: var(--gradient-primary);
      border-radius: var(--border-radius-pill);
    }
    footer::before { 
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--gradient-accent); /* Cambiato gradiente per contrasto */
      opacity: 0.9;
    }
    footer::after {
      content: '';
      position: absolute;
      top: 4px;
      left: 0;
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.15); /* Aumentato contrasto */
    }
    footer h5 {
      color: #fff;
      font-weight: 600;
      margin-bottom: 1.5rem;
      position: relative;
      display: inline-block;
      padding-bottom: 0.8rem;
      letter-spacing: 0.5px; /* Migliorata spaziatura lettere */
    }
    
    footer h5::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 3px;
      background: var(--gradient-accent);
      border-radius: 2px;
    }
    .footer-links li { 
      margin-bottom: 0.8rem; 
    }
    .footer-link {
      color: rgba(255, 255, 255, 0.75);
      transition: all 0.3s ease;
      font-weight: 400;
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 2px 0;
    }
    .footer-link:hover {
      color: var(--accent-color);
      text-decoration: none;
      transform: translateX(5px);
    }
    .footer-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 1px;
      background-color: var(--accent-color);
      transition: width 0.3s ease;
    }
    .footer-link:hover::after {
      width: 100%;
    }
    .social-links {
      display: flex;
      gap: 1rem;
    }
    .social-links a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    .social-links a:hover {
      background: var(--accent-color);
      color: var(--dark-color);
      transform: translateY(-3px);
    }
    .footer-bottom {
      text-align: center;
      padding-top: 2rem;
      margin-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.9rem;
    }

    /* Back to Top Button - Ridisegnato e migliorato */
    #backToTopBtn {
      background-image: var(--gradient-primary);
      color: #fff;
      box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.4);
      position: fixed;
      bottom: 25px;
      right: 25px;
      width: 60px; /* Aumentato dimensione per renderlo più tondo */
      height: 60px; /* Aumentato dimensione per renderlo più tondo */
      border-radius: 50%; /* Già tondo, mantenuto */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem; /* Dimensione icona aumentata */
      z-index: 99;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border: 2px solid rgba(255, 255, 255, 0.5); /* Bordo più visibile */
      backdrop-filter: blur(4px); /* Effetto blur */
      -webkit-backdrop-filter: blur(4px);
      padding: 0; /* Assicura che non sia schiacciato */
      min-width: 60px; /* Garantisce larghezza minima */
      min-height: 60px; /* Garantisce altezza minima */
    }
    #backToTopBtn.show {
      opacity: 0.95;
      visibility: visible;
      transform: translateY(0);
    }
    #backToTopBtn.hide-auto {
      opacity: 0 !important;
      visibility: hidden !important;
      transform: translateY(20px) !important;
      transition: all 0.5s ease-out;
    }
    #backToTopBtn:hover:not(.hide-auto) {
      box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.5);
      transform: translateY(-5px) scale(1.05);
      opacity: 1;
      border-color: rgba(255, 255, 255, 0.5); /* Bordo più visibile in hover */
    }
    
    #backToTopBtn:active:not(.hide-auto) {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
    }
    /* Animazione pulsante */
    @keyframes pulse-up {
      0% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
      100% { transform: translateY(0); }
    }
    #backToTopBtn.animate {
      animation: pulse-up 1.5s ease-in-out infinite;
    }

    /* AOS Performance Optimizations - Prevent Layout Shift */
    [data-aos] {
        will-change: transform, opacity; /* Ottimizza rendering GPU */
        transform: translateZ(0); /* Forza accelerazione hardware */
        backface-visibility: hidden; /* Previene flickering */
        perspective: 1000px; /* Migliora rendering 3D */
    }
    
    /* Preload states to prevent layout shift */
    [data-aos="fade-up"]:not(.aos-animate) {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    
    [data-aos="fade-in"]:not(.aos-animate) {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
    
    [data-aos="fade-right"]:not(.aos-animate) {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }
    
    [data-aos="zoom-in"]:not(.aos-animate) {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.95);
    }
    
    /* Smooth scroll performance */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    }
    
    /* Performance optimizations for animated elements */
    [data-aos] {
        will-change: transform, opacity;
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    [data-aos].aos-animate {
        will-change: auto;
    }
    
    /* Optimize frequently animated elements */
    .navbar,
    .progress-bar,
    #backToTopBtn,
    .reading-timer-bar {
        will-change: transform;
        transform: translateZ(0); /* Force hardware acceleration */
    }
    
    /* Remove will-change after animations complete */
     .navbar:not(.animating),
     .progress-bar:not(.animating),
     #backToTopBtn:not(.show),
     .reading-timer-bar:not(.updating) {
         will-change: auto;
     }
     
     /* Mobile-specific touch optimizations */
     @media (max-width: 991.98px) {
         /* Optimize touch interactions */
         * {
             touch-action: manipulation; /* Disable double-tap zoom */
             -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
         }
         
         /* Improve scrolling performance on mobile */
         body {
             -webkit-overflow-scrolling: touch;
             overscroll-behavior: contain;
         }
         
         /* Optimize interactive elements for touch */
         button, .btn, .nav-link, .carousel-control-prev, .carousel-control-next {
             touch-action: manipulation;
             -webkit-tap-highlight-color: rgba(var(--primary-rgb), 0.1);
             min-height: 44px; /* iOS recommended touch target size */
             min-width: 44px;
         }
         
         /* Reduce animations on mobile for better performance */
         [data-aos] {
             animation-duration: 0.2s !important;
             transition-duration: 0.2s !important;
         }
         
         /* Optimize carousel for mobile */
         .carousel-inner {
             contain: layout style paint;
         }
         
         /* Improve mobile scrolling */
          .container, .container-fluid {
              contain: layout;
          }
          
          /* CSS Containment per sezioni principali */
          #hero, #about, #skills, #resume, #portfolio, #contact {
              contain: layout style;
          }
          
          /* Ottimizzazioni specifiche per mobile */
          .navbar-collapse {
              contain: layout;
              transform: translateZ(0); /* Force hardware acceleration */
          }
          
          /* Riduce il reflow durante lo scroll */
          .fixed-top {
              contain: layout style;
          }
          
          /* Ottimizza le card del portfolio */
          .portfolio-item {
              contain: layout style paint;
              transform: translateZ(0);
          }
          
          /* Migliora performance delle immagini */
          img {
              content-visibility: auto;
              contain-intrinsic-size: 300px 200px;
          }
      }
    
    /* Reduce motion for accessibility */
     @media (prefers-reduced-motion: reduce) {
         [data-aos] {
             animation-duration: 0.01ms !important;
             animation-iteration-count: 1 !important;
             transition-duration: 0.01ms !important;
         }
         
         html {
             scroll-behavior: auto;
         }
     }
     
     /* Language Switch Styles */
     .language-switch {
         position: relative;
         display: inline-block;
     }
     
     .language-switch-input {
         opacity: 0;
         width: 0;
         height: 0;
         position: absolute;
     }
     
     .language-switch-label {
         display: flex;
         align-items: center;
         background: var(--card-bg);
         border: 2px solid var(--primary-color);
         border-radius: var(--border-radius-pill);
         padding: 0.25rem;
         cursor: pointer;
         transition: all var(--transition-speed) ease;
         position: relative;
         width: 70px;
         height: 32px;
         box-shadow: var(--shadow-sm);
     }
     
     .language-switch-text {
         font-size: 0.75rem;
         font-weight: 600;
         color: var(--secondary-color);
         transition: color var(--transition-speed) ease;
         z-index: 2;
         position: absolute;
         width: 50%;
         text-align: center;
         line-height: 1;
     }
     
     .language-switch-text[data-lang="it"] {
         left: 0;
     }
     
     .language-switch-text[data-lang="en"] {
         right: 0;
     }
     
     .language-switch-slider {
         position: absolute;
         top: 2px;
         left: 2px;
         width: calc(50% - 2px);
         height: calc(100% - 4px);
         background: var(--primary-color);
         border-radius: var(--border-radius-pill);
         transition: transform var(--transition-speed) var(--transition-cubic);
         z-index: 1;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
     
     .language-switch-input:checked + .language-switch-label .language-switch-slider {
         transform: translateX(100%);
     }
     
     .language-switch-input:checked + .language-switch-label .language-switch-text[data-lang="en"] {
         color: white;
     }
     
     .language-switch-input:not(:checked) + .language-switch-label .language-switch-text[data-lang="it"] {
         color: white;
     }
     
     .language-switch-label:hover {
         box-shadow: var(--shadow);
         transform: translateY(-1px);
     }
     
     .language-switch-input:focus + .language-switch-label {
          outline: 2px solid var(--accent-color);
          outline-offset: 2px;
      }
      
      /* Intro Name Styling */
        .intro-name {
            font-family: 'Cinzel', serif !important;
            font-weight: 700 !important;
            line-height: 1.1 !important;
            letter-spacing: -0.02em;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            white-space: nowrap; /* Mantiene tutto su una linea quando possibile */
        }
       
       .intro-name span {
           display: inline;
           transition: all var(--transition-speed) ease;
       }
       
       .intro-name br {
           display: none; /* Nasconde il line break di default */
       }
       
       .intro-name:hover span {
           text-shadow: 0 4px 8px rgba(0,0,0,0.15);
       }
       
       /* Responsive: mostra line break solo quando necessario */
       @media (max-width: 768px) {
           .intro-name {
               font-size: 2.5rem !important;
               line-height: 1.2 !important;
               white-space: normal; /* Permette il wrap */
           }
           
           .intro-name br {
               display: block; /* Mostra il line break su schermi piccoli */
           }
       }
       
       @media (max-width: 576px) {
           .intro-name {
               font-size: 2rem !important;
           }
       }
       
       /* Breakpoint specifico per nomi lunghi */
        @media (max-width: 992px) and (min-width: 769px) {
            .intro-name {
                white-space: normal;
            }
            
            .intro-name br {
                display: block;
            }
        }
        


    /* Scrollbar Styling (Optional, Webkit only) */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--light-gray); }
    ::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 10px; border: 2px solid var(--light-gray); }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); }