:root{
      --navy-950:#070d1d; --navy-900:#0b1d3b;
      --brand-azure:#00a6e0; --sky-400:#5fd3ff;
      --gray-bg:#f5f7fb; --white:#fff; --text:#0f172a; --muted:#334155;
      --radius-xxl:24px; --radius-lg:18px;
      --shadow-soft:0 20px 40px rgba(20,34,70,.16), 0 8px 16px rgba(20,34,70,.10);
      --shadow-hover:0 28px 52px rgba(20,34,70,.20), 0 10px 22px rgba(20,34,70,.12);
      --container-w: min(1520px, 92%);
      --gap: clamp(20px, 2.2vw, 32px);
      --pad: clamp(20px, 2.6vw, 36px);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
    }

    body{
      margin:0; font-family:Inter, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
      color:var(--text); background:#e8eefc;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;height:auto;display:block}
    .container{width:var(--container-w); margin-inline:auto}
    .band--white{background:#fff}
    .band--gray{background:var(--gray-bg)}
    .band--pad{padding: clamp(28px, 6vw, 72px) 0}
    h1,h2,h3{margin:0 0 .55rem}
    h1{font-weight:800; letter-spacing:-.01em}
    h2{font-weight:800;font-size:clamp(1.35rem,1.1vw+1rem,2rem); letter-spacing:-.01em}
    h3{font-weight:800; letter-spacing:-.015em}
    p{margin:0 0 1rem;color:var(--muted);font-weight:400}

    .tagline-new{ padding: clamp(28px, 5vw, 48px) 0 0; }
    .tagline-new p{ text-align:center; font-weight:600; color:#0f172a; font-size: clamp(1rem, .5vw + 1rem, 1.15rem); margin: 0 auto; max-width: 1500px; }
    .tagline-new .promo-text-2:first-of-type{ text-align:left; margin-left:0; }
    .tagline-new .promo-text-2{
      --promo-fs-min: 2.60rem;
      --promo-fs-fluid: calc(1rem + 0.9vw);
      --promo-fs-max: 2.60rem;
      --promo-ls: -0.05em;
      --promo-fw: 600;
      --promo-lh: 1.35;
      font-size: clamp(var(--promo-fs-min), var(--promo-fs-fluid), var(--promo-fs-max));
      letter-spacing: var(--promo-ls);
      font-weight: var(--promo-fw);
      line-height: var(--promo-lh);
    }

    .eyebrow{font-size:1.0rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.95}

    /* ---------- NAV sospeso ---------- */
    .nav-wrap{
      position:fixed; top:18px; left:50%; transform:translateX(-50%);
      width:min(1520px, 96%); z-index:100;
    }
    .nav-wrap::after{content:""; display:none}

    .nav{
      position:relative;
      z-index:1;
      height:80px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
      padding:0 18px; color:#ffffff; border-radius:16px;
      backdrop-filter: blur(14px);
      box-shadow:none;
    }
    .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.01em}

    /* LOGO NAVBAR con effetto comparsa ritardato */
    .brand-logo{
      height:55px;
      width:auto;
      opacity:0;
      animation: logoFade .6s ease-out .5s forwards;
    }

    .nav-right{display:flex; align-items:center; gap:14px}

    .nav ul{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}

    /* IMPORTANT: limita gli stili hover SOLO al menu principale, non al pannello app */
    .nav > ul a{font-weight:600;font-size:1rem;opacity:.95;transition:color .15s, text-shadow .15s}
    .nav > ul a:hover{opacity:1;color:#fff;text-shadow:0 0 14px rgba(255,255,255,.75)}

    #nav-toggle{display:none}
    .menu-btn{display:none;color:#fff;border:1px solid rgba(255,255,255,.55);padding:.5rem .7rem;border-radius:10px;cursor:pointer;font-weight:600}

    /* === APP LAUNCHER (menu icone stile screen) === */
    .appmenu{position:relative}
    .appmenu-btn{
      width:44px;height:44px;border-radius:12px;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.55);
      background:rgba(255,255,255,.10);
      backdrop-filter: blur(10px);
      color:#fff;
      cursor:pointer;
      transition: transform .15s, background .15s, border-color .15s;
    }
    .appmenu-btn:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.75);
    }
    .appmenu-btn svg{width:20px;height:20px}

    .appmenu-panel{
      position:absolute;
      right:0;
      top:calc(100% + 12px);
      width:360px;
      max-width:calc(100vw - 24px);
      background:rgba(255,255,255,.96);
      color:#0f172a;
      border-radius:18px;
      box-shadow:var(--shadow-soft);
      padding:14px 14px 12px;
      display:none;
      z-index:220;
    }
    .appmenu-panel.is-open{display:block}
    .appmenu-head{
      display:flex; align-items:center; justify-content:space-between;
      padding:6px 6px 12px;
    }
    .appmenu-title{font-weight:900; letter-spacing:-.01em; font-size:1.05rem}
    .appmenu-close{
      width:34px;height:34px;border-radius:10px;
      border:1px solid rgba(15,23,42,.18);
      background:rgba(15,23,42,.04);
      cursor:pointer;
      display:grid; place-items:center;
      font-weight:900;
      color:#0f172a;
    }
    .appmenu-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      padding:0 6px 10px;
    }
    .appmenu-item{
      display:flex; flex-direction:column; align-items:center; gap:8px;
      padding:10px 8px;
      border-radius:14px;
      transition: background .15s, transform .15s, color .15s;
      color:#0f172a;
    }
    /* hover leggibile (niente bianco su bianco) */
    .appmenu-item:hover{
      background:rgba(15,23,42,.08);
      transform:translateY(-1px);
      color:#0b1d3b;
    }
    .appmenu-icon{
      width:46px;height:46px;border-radius:14px;
      display:grid; place-items:center;
      color:#fff;
      box-shadow:0 10px 18px rgba(15,23,42,.14);
    }
    .appmenu-item span{
      font-size:.84rem;
      font-weight:700;
      line-height:1.1;
      text-align:center;
      color:inherit;
    }
    .appmenu-icon svg{width:22px;height:22px}

    .appmenu-icon--1{background:linear-gradient(135deg,#00a6e0,#5fd3ff)}
    .appmenu-icon--2{background:linear-gradient(135deg,#1e93d1,#0d4aa0)}
    .appmenu-icon--3{background:linear-gradient(135deg,#d53e5e,#991b31)}
    .appmenu-icon--4{background:linear-gradient(135deg,#20bcd4,#0c6f8c)}
    .appmenu-icon--5{background:linear-gradient(135deg,#6b64cf,#2d3a87)}
    .appmenu-icon--6{background:linear-gradient(135deg,#ffda6b,#ff8a3d); color:#0b1d3b}

    .appmenu-footer{
      border-top:1px solid rgba(15,23,42,.10);
      padding:10px 6px 2px;
      display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
      font-weight:700;
      font-size:.9rem;
      color:#0b1d3b;
    }
    .appmenu-footer a{
      opacity:.95;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(15,23,42,.06);
      color:#0b1d3b;
      transition: background .15s, color .15s, opacity .15s;
    }
    .appmenu-footer a:hover{
      opacity:1;
      background:rgba(15,23,42,.10);
      color:#0b1d3b;
    }

    @media (max-width: 880px){
      .nav{height:auto; padding:10px}
      .nav ul{
        display:none;
        position:absolute;
        left:2%; right:2%; top:64px;
        background:rgba(13,25,54,.86);
        backdrop-filter:blur(10px);
        border-radius:12px;
        padding:14px;
      }
      #nav-toggle:checked ~ ul{display:flex;flex-direction:column}
      .menu-btn{display:block}
    }

    /* NAV stato dopo aver superato l'hero */
    .nav-wrap.nav-wrap--scrolled{
      top:0;
      left:0;
      transform:none;
      width:100%;
      background: linear-gradient(180deg, #090e2a 0%, #0a0d2a 35%, #0a0b24 100%);
    }
    .nav-wrap.nav-wrap--scrolled .nav{
      width:min(1520px, 96%);
      margin-inline:auto;
    }

    /* ---------- HERO (Particles.js) ---------- */
    .hero{
      position:relative;
      min-height:100svh; color:#fff; display:grid; align-items:end; overflow:hidden;
      background:
        radial-gradient(60% 120% at 120% -10%, rgba(88,160,255,.08), transparent 60%),
        linear-gradient(180deg, #080c21, #0a0f2d 60%, #0a0b26);
    }
    #particles-js{
      position:absolute; inset:0; width:100%; height:100%;
      z-index:0; pointer-events:none;
      background:
        radial-gradient(90% 140% at 70% -20%, rgba(60,190,255,.18) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #090e2a 0%, #0a0d2a 35%, #0a0b24 100%);
    }
    #particles-js > canvas{
      filter:
        drop-shadow(0 0 6px rgba(80,205,255,.55))
        drop-shadow(0 0 18px rgba(60,190,255,.28));
      mix-blend-mode: screen;
    }

    .hero-inner{padding: clamp(18px, 3vw, 36px) 0; position:relative; z-index:1}

    /* Mobile first (default) */
    .hero-logo img{
      width: 200px;
      height: auto;
      filter: drop-shadow(0 10px 28px rgba(96,203,255,.25));
    }
    @media (min-width: 768px) { .hero-logo img{ width: 200px; } }
    @media (min-width: 1200px) { .hero-logo img{ width: 340px; } }

    .typing-wrap{width:100%; display:grid; place-items:center; margin-bottom: 10vh}
    .typed{
      display:flex; align-items:center; justify-content:center; gap:.35rem;
      font-weight:800; letter-spacing:-.01em;
      font-size: clamp(2.3rem, 6.2vw, 5rem); line-height:1.05; text-align:center;
      text-shadow:0 0 18px rgba(96,203,255,.28);
      min-height:2.2em;
    }
    .typed .cursor{width:3px;height:1em;background:#fff;animation:blink 1s step-end infinite}
    @keyframes blink{50%{opacity:0}}
    .subtitle{ text-align:center; font-size: clamp(1.05rem, 1.1vw + .9rem, 1.5rem); opacity:1; max-width:900px; margin: 10px auto 0; font-weight:500; color:#fff; }
    .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1.1rem}

    /* ---------- Helpers ---------- */
    .soft-card{border-radius:var(--radius-xxl); box-shadow:var(--shadow-soft); overflow:hidden; position:relative; background-clip:padding-box; transition:.18s}
    .soft-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover) }
    .soft-card .btn{font-weight:800; letter-spacing:.02em}
    .btn-outline-light{
      --bs-btn-color:#fff; --bs-btn-border-color:#fff;
      --bs-btn-hover-bg:#fff; --bs-btn-hover-border-color:#fff; --bs-btn-hover-color:#0b1d3b;
      --bs-btn-padding-x:1.25rem; --bs-btn-padding-y:.7rem; --bs-btn-border-width:2px;
      border-radius:999px; font-weight:800;
    }
    .btn-hero{
      --bs-btn-bg:#fff; --bs-btn-border-color:#fff; --bs-btn-color:#0b1d3b;
      --bs-btn-hover-bg:#000; --bs-btn-hover-border-color:#fff;
      border-radius:999px; font-weight:900;
      padding: 20px;
    }

    /* ---------- TAGLINE tra header e card ---------- */
    .tagline{ padding: clamp(28px, 5vw, 48px) 0 0; }
    .tagline p{ text-align:center; font-weight:600; color:#0f172a; font-size: clamp(1rem, .5vw + 1rem, 1.15rem); margin: 0 auto; max-width: 1000px; }
    .tagline .promo-text{
      --promo-fs-min: 2.60rem;
      --promo-fs-fluid: calc(1rem + 0.9vw);
      --promo-fs-max: 2.60rem;
      --promo-ls: -0.05em;
      --promo-fw: 600;
      --promo-lh: 1.35;
      font-size: clamp(var(--promo-fs-min), var(--promo-fs-fluid), var(--promo-fs-max));
      letter-spacing: var(--promo-ls);
      font-weight: var(--promo-fw);
      line-height: var(--promo-lh);
    }

    /* === Accent utilities === */
    .u-accent{ --accent: var(--brand-azure); color: var(--accent); font-weight: 800; }
    .u-accent--blue  { --accent: var(--brand-azure); }
    .u-accent--sky   { --accent: var(--sky-400); }
    .u-accent--indigo{ --accent: #2d3a87; }
    .u-accent--teal  { --accent: #00b1a4; }
    .u-accent--pink  { --accent: #d53e5e; }
    .u-accent--orange{ --accent: #ff8a3d; }
    .u-accent--soft  { filter:saturate(.95) brightness(1.05); font-weight:700; }

    /* ---------- HERO (Particles.js) ---------- */
    .hero{
      position:relative;
      min-height:100svh; color:#fff; display:grid; align-items:end; overflow:hidden;
      /* base molto scura per richiamare l'immagine */
      background:
        radial-gradient(60% 120% at 120% -10%, rgba(88,160,255,.08), transparent 60%),
        linear-gradient(180deg, #080c21, #0a0f2d 60%, #0a0b26);
    }
    /* canvas full-bleed dietro i contenuti */
    #particles-js{
      position:absolute; inset:0; width:100%; height:100%;
      z-index:0; pointer-events:none;
      /* sfondo navy-violaceo come l'immagine */
      background:
        radial-gradient(90% 140% at 70% -20%, rgba(60,190,255,.18) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #090e2a 0%, #0a0d2a 35%, #0a0b24 100%);
    }
    /* glow morbido delle particelle/linee per l'effetto ???neon??? */
    #particles-js > canvas{
      filter:
        drop-shadow(0 0 6px rgba(80,205,255,.55))
        drop-shadow(0 0 18px rgba(60,190,255,.28));
      mix-blend-mode: screen;
    }

    .hero-inner{padding: clamp(18px, 3vw, 36px) 0; position:relative; z-index:1}

   /* Mobile first (default) */
.hero-logo img{
  width: 200px;   /* dimensione per smartphone */
  height: auto;
  filter: drop-shadow(0 10px 28px rgba(96,203,255,.25));
}

/* Tablet / Desktop */
@media (min-width: 768px) {
  .hero-logo img{
    width: 200px;  /* dimensione per schermi pi?? grandi */
  }
}

/* Desktop grande (opzionale) */
@media (min-width: 1200px) {
  .hero-logo img{
    width: 340px;
  }
}

    .typing-wrap{width:100%; display:grid; place-items:center; margin-bottom: 10vh}
    .typed{
      display:flex; align-items:center; justify-content:center; gap:.35rem;
      font-weight:800; letter-spacing:-.01em;
      font-size: clamp(2.3rem, 6.2vw, 5rem); line-height:1.05; text-align:center;
      text-shadow:0 0 18px rgba(96,203,255,.28);
      min-height:2.2em; /* altezza fissa per evitare "abbassamento" durante il typing */
    }
    .typed .cursor{width:3px;height:1em;background:#fff;animation:blink 1s step-end infinite}
    @keyframes blink{50%{opacity:0}}
    .subtitle{ text-align:center; font-size: clamp(1.05rem, 1.1vw + .9rem, 1.5rem); opacity:1; max-width:900px; margin: 10px auto 0; font-weight:500; color:#fff; }
    .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1.1rem}

    /* ---------- Helpers ---------- */
    .soft-card{border-radius:var(--radius-xxl); box-shadow:var(--shadow-soft); overflow:hidden; position:relative; background-clip:padding-box; transition:.18s}
    .soft-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover) }
    .soft-card .btn{font-weight:800; letter-spacing:.02em}
    .btn-outline-light{
      --bs-btn-color:#fff; --bs-btn-border-color:#fff;
      --bs-btn-hover-bg:#fff; --bs-btn-hover-border-color:#fff; --bs-btn-hover-color:#0b1d3b;
      --bs-btn-padding-x:1.25rem; --bs-btn-padding-y:.7rem; --bs-btn-border-width:2px;
      border-radius:999px; font-weight:800;
    }

    /* CTA Header bianca e ben visibile (sovrascrivo variabili di .btn-primary) */
    .btn-hero{ --bs-btn-bg:#fff; --bs-btn-border-color:#fff; --bs-btn-color:#0b1d3b; --bs-btn-hover-bg:#000; --bs-btn-hover-border-color:#fff; border-radius:999px; font-weight:900;
        padding: 20px;
    }

    /* ---------- TAGLINE tra header e card ---------- */
    .tagline{ padding: clamp(28px, 5vw, 48px) 0 0; }
    .tagline p{ text-align:center; font-weight:600; color:#0f172a; font-size: clamp(1rem, .5vw + 1rem, 1.15rem); margin: 0 auto; max-width: 1000px; }
    /* Controllo tipografico della tagline */
    .tagline .promo-text{
      --promo-fs-min: 2.60rem;
      --promo-fs-fluid: calc(1rem + 0.9vw);
      --promo-fs-max: 2.60rem;
      --promo-ls: -0.05em;
      --promo-fw: 600;
      --promo-lh: 1.35;
      font-size: clamp(var(--promo-fs-min), var(--promo-fs-fluid), var(--promo-fs-max));
      letter-spacing: var(--promo-ls);
      font-weight: var(--promo-fw);
      line-height: var(--promo-lh);
    }

    /* === Accent utilities per parole colorate riusabili === */
    .u-accent{
      /* colore di default = brand */
      --accent: var(--brand-azure);
      color: var(--accent);
      font-weight: 800; /* opzionale, aiuta il contrasto su grande display */
    }
    .u-accent--blue  { --accent: var(--brand-azure); } /* blu brand */
    .u-accent--sky   { --accent: var(--sky-400); }     /* azzurro chiaro */
    .u-accent--indigo{ --accent: #2d3a87; }            /* indaco */
    .u-accent--teal  { --accent: #00b1a4; }            /* teal */
    .u-accent--pink  { --accent: #d53e5e; }            /* magenta/rosa brand */
    .u-accent--orange{ --accent: #ff8a3d; }            /* arancio accessibile */
    /* Variante soft (se vuoi pi?? discreto) */
    .u-accent--soft  { filter:saturate(.95) brightness(1.05); font-weight:700; }

    /* ===========================================================
       SOLUZIONI ??? DESKTOP: SEMPRE 2 COLONNE x 3 RIGHE (NO SCROLL)
       + CARD LEGGERMENTE PI?? BASSE
       =========================================================== */

    /* evita che la navbar fixed copra l'ancora */
    #soluzioni{ scroll-margin-top: var(--nav-safe); }

    /* la sezione occupa esattamente la viewport (meno navbar fixed) */
    #soluzioni.band--pad{
      padding: clamp(8px, 1.6vh, 16px) 0;          /* ??? ridotto: meno spazio sopra/sotto */
      height: calc(100svh - var(--nav-safe));
      display:flex;
      align-items:stretch;
    }
    #soluzioni.band--pad > .container{
      flex:1;
      display:flex;
      min-height:0;
    }

    /* GRIGLIA FISSA 2x3 */
    .feature-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: clamp(10px, 1.2vw, 18px);               /* ??? ridotto: card pi?? basse */
      justify-content:center;

      height:100%;
      min-height:0;
    }

    .feature-card{
      color:#fff;
      display:grid;
      grid-template-columns: 1fr 0.50fr;           /* layout invariato: testo sx, immagine dx */
      height:100%;
      min-height:0;
      aspect-ratio:auto;                           /* fondamentale per ridurre l???altezza */
      background:linear-gradient(135deg,#1e93d1,#0d4aa0);
    }
    .feature-card:nth-child(2){background:linear-gradient(135deg,#8ca2c9,#627da6)}
    .feature-card:nth-child(3){background:linear-gradient(135deg,#d53e5e,#991b31)}
    .feature-card:nth-child(4){background:linear-gradient(135deg,#1b77bd,#0b3a77)}
    .feature-card:nth-child(5){background:linear-gradient(135deg,#20bcd4,#0c6f8c)}
    .feature-card:nth-child(6){background:linear-gradient(135deg,#6b64cf,#2d3a87)}

    /* Ribbon FAST&GO */
    .feature-card--fastgo{ position:relative; }
    .feature-card--fastgo::before{
      content:"FAST&GO";
      position:absolute;
      top:10px;
      right:-56px;
      padding:4px 0;
      width:160px;
      background:linear-gradient(135deg,#ffda6b,#ff8a3d);
      color:#0b1d3b;
      text-align:center;
      text-transform:uppercase;
      font-weight:800;
      letter-spacing:.12em;
      font-size:.62rem;
      box-shadow:0 10px 18px rgba(15,23,42,.4);
      transform:rotate(45deg);
      pointer-events:none;
    }

    .feature-copy{
      padding: clamp(12px, 1.0vw, 18px);          /* ??? ridotto: meno altezza interna */
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:0;
      overflow:hidden;
    }
    .feature-copy .eyebrow{
      font-size: clamp(.70rem, .30vw + .62rem, .92rem);
      letter-spacing:.10em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      margin-bottom:.18rem;
      opacity:.98;
    }
    .feature-copy h3{
      font-weight:800;
      font-size: clamp(.98rem, .55vw + .76rem, 1.55rem); /* ??? leggermente pi?? piccolo */
      line-height:1.10;                                  /* ??? pi?? compatto */
      margin:.22rem 0 .48rem;                            /* ??? margini ridotti */
      color:#fff;

      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .feature-copy .btn.btn-lg{
      padding: .46rem 1.00rem;                      /* ??? bottone pi?? basso */
      font-size: .88rem;
      border-width:2px;
    }

    .feature-media{padding:0; min-height:0}
    .feature-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
    }

    /* Viewport bassi: ulteriore compattazione (desktop piccoli) */
    @media (max-height: 760px){
      #soluzioni.band--pad{ padding: 8px 0; }
      .feature-grid{ gap: 10px; }
      .feature-copy{ padding: 12px; }
      .feature-copy h3{ font-size: .94rem; margin:.18rem 0 .40rem; }
      .feature-copy .btn.btn-lg{ font-size:.84rem; padding:.42rem .92rem; }
    }

    /* ===========================================================
       MOBILE: CARD UNA SOTTO L???ALTRA (1 COLONNA)
       =========================================================== */
    @media (max-width: 820px){
      /* su mobile la sezione NON deve essere vincolata alla viewport */
      #soluzioni.band--pad{
        height:auto;
        padding: clamp(20px, 4.5vw, 32px) 0;
      }
      #soluzioni.band--pad > .container{ display:block; }

      .feature-grid{
        grid-template-columns: 1fr;     /* 1 colonna */
        grid-template-rows: none;       /* righe automatiche */
        gap: clamp(14px, 4vw, 18px);
        height:auto;
      }

      /* card pi?? leggibile: immagine sopra, testo sotto */
      .feature-card{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
      }
      .feature-media img{
        height: clamp(170px, 52vw, 260px);
      }

      .feature-copy{
        padding: clamp(14px, 4.2vw, 18px);
      }
      .feature-copy h3{
        font-size: clamp(1.05rem, 1.1vw + .9rem, 1.35rem);
      }
      .feature-copy .btn.btn-lg{
        font-size: .92rem;
        padding: .52rem 1.05rem;
      }

      /* ribbon: leggermente pi?? contenuto su schermi stretti */
      .feature-card--fastgo::before{
        right:-62px;
        width:150px;
        font-size:.60rem;
      }
    }

    /* ===========================================================
       SEZIONE 2: 3??3 ??? 467??545
       =========================================================== */
    .soft-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      justify-content:center;
    }
    @media (min-width: 900px){
      .soft-grid{ grid-template-columns: repeat(2, minmax(320px, 1fr)); }
    }
    @media (min-width: 1500px){
      .soft-grid{ grid-template-columns: repeat(3, 467px); }
    }

    .soft-tile{
      color:#fff;
      display:grid;
      grid-template-rows: 48% 52%;
      aspect-ratio: 467 / 545;
      background:linear-gradient(135deg,#0fa0d0,#1e7cc0);
      border-radius:var(--radius-xxl);
    }
    .soft-tile:nth-child(2){background:linear-gradient(135deg,#00b1a4,#19a4c9)}
    .soft-tile:nth-child(3){background:linear-gradient(135deg,#5696ff,#2aa7df)}
    .soft-tile:nth-child(4){background:linear-gradient(135deg,#8f8ff1,#215dbe)}
    .soft-tile:nth-child(5){background:linear-gradient(135deg,#00b6de,#3bc2a1)}
    .soft-tile:nth-child(6){background:linear-gradient(135deg,#21b2f0,#147fd3)}
    /* .soft-tile:nth-child(7){background:linear-gradient(135deg,#ff9966,#ff5e62)}
    .soft-tile:nth-child(8){background:linear-gradient(135deg,#7bdcb5,#00a676)}
    .soft-tile:nth-child(9){background:linear-gradient(135deg,#a88beb,#6f59e8)} */

    .soft-media{padding:0}
    .soft-media img{width:100%; height:100%; object-fit:cover}
    .soft-copy{padding: var(--pad); display:flex; flex-direction:column; justify-content:center}
    .soft-copy h3{font-size: clamp(1.1rem,1.1vw + 1rem,1.6rem); color:#fff; margin:.4rem 0 .6rem}
    .soft-copy p{color:#ecf6ff; max-width:42ch; margin-bottom:1rem}

    /* ---------- FORMAZIONE & SELEZIONE + ESG ---------- */
    .experience-title{text-align:center;font-weight:800;font-size:clamp(1.3rem,1.4vw+1rem,2rem);margin-bottom:18px}
    .experience{display:grid;grid-template-columns:repeat(12,1fr);gap: var(--gap)}
    .experience--two .exp{grid-column:span 6}
    .exp{
      grid-column:span 4; min-height:320px; color:#fff; display:grid; align-content:space-between;
      background:linear-gradient(135deg,#0088cc,#03b0c8);
      position:relative; overflow:hidden; text-align:left; padding: var(--pad);
      border-radius:var(--radius-xxl); box-shadow:var(--shadow-soft);
      padding-right: 0; padding-bottom: 0; /* QUESTO */
    }
    .exp:nth-child(2){background:linear-gradient(135deg,#ff855e,#ef5b6f)}
    .exp:nth-child(3){background:linear-gradient(135deg,#00b9b5,#0894cd)}

    /* Il wrapper testuale resta sopra l'immagine decorativa nelle card "Lavora con noi" */
    .exp > div{
      position:relative;
      z-index:1;
    }

    /* Per rendere l'immagine alta quanto la card .exp in futuro puoi, ad esempio:
       - rimuovere position:absolute da .exp img
       - usare display:grid con due colonne (testo | immagine) sulla card
       - dare all'immagine width:100%; height:100%; object-fit:cover
    */
    .exp img{
      position:absolute; right:16px; bottom:12px; width:45%; border-radius:10px; filter:saturate(1.05); right:0; bottom:0;
      z-index:0;
    }

    .exp .btn-outline-light{--bs-btn-padding-x:1.2rem}
    @media (max-width: 980px){ .exp{grid-column:span 6} }
    @media (max-width: 640px){ .exp{grid-column:span 12} }
    @media (max-width: 640px){ .experience--two .exp{grid-column:span 12} }

    .esg{
      margin-top: clamp(18px, 3vw, 28px);
      border-radius:var(--radius-xxl); color:#fff; padding: var(--pad);
      background:linear-gradient(90deg,#ff7a52,#f1a654,#ffa55e);
      box-shadow:var(--shadow-soft);
      display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:center;
    }
    .esg img{width:100%; height:100%; object-fit:cover; border-radius:14px}
    @media (max-width: 980px){ .esg{grid-template-columns:1fr} }

    /* Titolo sezione carriera / lavora con noi */
    .career-title{
      font-size: clamp(1.3rem,1.2vw+1rem,1.8rem);
      font-weight:800;
      color:#d4af37; /* oro */
      margin: 0 0 1.2rem;
      text-align:left;
    }

    /* ---------- FOOTER ---------- */
    footer{margin-top: clamp(32px, 6vw, 64px); color:#fff; background:linear-gradient(180deg,#0d1a31,#0a1222)}
    .f-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding: clamp(24px, 3vw, 40px) 0}
    .f-col{grid-column:span 4}
    .f-col a{display:block;opacity:.9;margin:.35rem 0;font-weight:500}
    .f-brand{grid-column:span 12;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:6px;font-size:.92rem;opacity:.95}
    @media (max-width: 980px){ .f-col{grid-column:span 6} }
    @media (max-width: 600px){ .f-col{grid-column:span 12} }

    /* ====== Nav: contrasto dinamico (solo aggiunte) ====== */
    .nav.nav--on-light{
      color:#0b1d3b;
      border-color: rgba(11,29,59,.35);
      background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.60));
    }
    .nav.nav--on-light a{ color:#0b1d3b; opacity:.95 }
    .nav.nav--on-light a:hover{ color:#0b1d3b; text-shadow:0 0 14px rgba(11,29,59,.18) }
    .nav.nav--on-light .menu-btn{
      color:#0b1d3b; border-color: rgba(11,29,59,.45);
    }

    .nav.nav--on-dark{
      color:#fff;
      border-color: #ffffff;
      background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
    }
    .nav.nav--on-dark a{ color:#fff }
    .nav.nav--on-dark .menu-btn{
      color:#fff; border-color: rgba(255,255,255,.55);
    }

    @media (max-width: 880px){
      .nav--on-light #nav-toggle:checked ~ ul a{ color:#fff }
    }

    /* Animazione comparsa logo navbar */
    @keyframes logoFade{
      from{
        opacity:0;
        transform:translateY(4px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    /* ===========================================================
       FOOTER: CERTIFICAZIONI (aggiunta richiesta)
       - 2 slot logo gi?? pronti (inserirai tu le immagini)
       =========================================================== */
    .f-certifications{
      grid-column: span 12;
      padding-top: 6px;
      margin-top: 4px;
      border-top: 1px solid rgba(255,255,255,.12);
      padding-top: 18px;
    }
    .f-certifications h4{
      margin: 0 0 12px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: .95rem;
      opacity: .98;
    }
    .cert-logos{
      display:flex;
      align-items:center;
      gap: 14px;
      flex-wrap:wrap;
    }
    .cert-logo-slot{
      width: 140px;
      height: 64px;
      border-radius: 12px;
      /* border: 2px dashed rgba(255,255,255,.35); */
      background: rgba(255,255,255,.06);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 800;
      font-size: .8rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255,255,255,.78);
      user-select: none;
    }
    @media (max-width: 600px){
      .cert-logo-slot{ width: 100%; max-width: 320px; }
    }
/* Footer landing layout */
.footer-landing .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.footer-landing .f-col{grid-column:auto;}
.footer-landing .f-col:last-of-type{justify-self:end;text-align:right;}
@media (max-width: 600px){
  .footer-landing .f-grid{grid-template-columns:1fr;}
  .footer-landing .f-col{justify-self:start;text-align:left;}
}

@media (max-width: 640px) {
  .footer-landing {
    overflow-x: visible;
  }
  .footer-landing .f-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .footer-landing .f-col {
    text-align: left;
    width: 100%;
  }
  .footer-landing .f-certifications,
  .footer-landing .f-brand {
    width: 100%;
    min-width: 0;
  }
  .footer-landing .f-brand {
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
  .f-certifications h4,
  .footer-certifications h4 {
    text-align: center;
    width: 100%;
  }
  .f-certifications .cert-logos,
  .footer-certifications {
    flex-direction: column;
    align-items: center;
  }
  .f-certifications .cert-logo-slot,
  .footer-certifications .cert-logo-slot {
    width: 200px;
    max-width: 100%;
    justify-content: center;
  }
  .f-certifications .cert-project,
  .footer-certifications .cert-project {
    margin-left: 0 !important;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .f-certifications .cert-project > div:last-child,
  .footer-certifications .cert-project > div:last-child {
    width: 100% !important;
    max-width: 220px;
    height: auto !important;
    padding: 6px;
  }
  .f-certifications .cert-project img,
  .footer-certifications .cert-project img {
    max-width: 100%;
    height: auto !important;
  }
}

.cookie-fab{ position:fixed; bottom:max(16px,env(safe-area-inset-bottom)); left:max(16px,env(safe-area-inset-left)); right:auto; z-index:9999; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:999px; border:1px solid rgba(15,23,42,.08); background:#fff; box-shadow:0 8px 24px rgba(2,6,23,.12); color:#0f172a; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease }
.cookie-fab:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(2,6,23,.16) }
.cookie-fab:active{ transform:translateY(0) }
.cookie-fab:focus-visible{ outline:2px solid #93c5fd; outline-offset:3px }
.cookie-fab .hint{ position:absolute; left:66px; bottom:50%; transform:translateY(50%); background:#0b1f36; color:#fff; padding:6px 10px; border-radius:10px; font-size:.8rem; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:opacity .2s ease }
.cookie-fab:hover .hint{ opacity:.95 }
@media (max-width:640px){ .cookie-fab{ width:52px; height:52px; bottom:12px; left:12px } .cookie-fab .hint{ display:none } }