: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(1280px, 92%);
      --gap: clamp(16px, 2vw, 28px);
      --pad: clamp(18px, 2.4vw, 28px);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{ margin:0; font-family:Inter, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; color:var(--text); background:#fff; -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, 5.5vw, 68px) 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}
    .eyebrow{font-size:.78rem;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);
      /* background:linear-gradient(180deg, rgba(9,20,48.22), rgba(9,20,48,.10)); */
      /* background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10)); */
      /* border:2px solid rgba(9,20,48,.5);              /* bordo bianco */
      box-shadow:none;                       /* tolta ombra nav ["#7DE3FF", "#2BB9FF", "#B8F5FF"]*/
    }
    .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;
    }

    .brand-badge{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#00a6e0,#5fd3ff);box-shadow:0 2px 6px rgba(0,0,0,.25)}
    .nav ul{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
    .nav a{font-weight:600;font-size:1rem;opacity:.95;transition:color .15s, text-shadow .15s}
    .nav 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}
    @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}
      /* fix: il toggle controlla il fratello <ul> direttamente, non ".nav ul" */
      #nav-toggle:checked ~ ul{display:flex;flex-direction:column}
      .menu-btn{display:block}
    }

    /* NAV stato dopo aver superato l'hero:
       full width, altezza fissa, stesso gradiente del particles.js,
       senza sfumatura verso il contenuto sottostante. */
    .nav-wrap.nav-wrap--scrolled{
      top:0;
      left:0;
      transform:none;
      width:100%;
      background: linear-gradient(180deg, #090e2a 0%, #0a0d2a 35%, #0a0b24 100%);
    }
    /* Mantieni logo e voci di men?? nella stessa posizione orizzontale
       della prima navbar anche quando ?? fissa */
    .nav-wrap.nav-wrap--scrolled .nav{
      width:min(1520px, 96%);
      margin-inline:auto;
    }

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

    /* HERO */
    .hero-slim{
      position:relative; padding: clamp(110px, 20vw, 160px) 0 clamp(38px, 5vw, 56px);
      color:#fff; overflow:hidden;
      background:
        radial-gradient(80% 120% at 120% -20%, rgba(95,211,255,.22), transparent 55%),
        linear-gradient(90deg, #0a1330 0%, #0b1d3b 40%, #0a2a48 70%, #0a1330 100%),
        linear-gradient(180deg, #0a0f2d, #0b1d3b);
      border-bottom-left-radius: 50px; /* border-bottom-right-radius: 28px; */
    }
    .hero-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--gap)}
    .hero-title h1{font-size: clamp(1.6rem, 2.2vw + 1.2rem, 3rem); line-height:1.08}
    .badge-chip{display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(135deg,rgba(0,166,224,.35),rgba(95,211,255,.35)); border:1px solid rgba(255,255,255,.32); color:#fff; padding:.4rem .7rem; border-radius:999px; font-weight:700; font-size:.86rem;}
    .breadcrumb{margin-top:.75rem; color:#cfefff; font-size:.92rem; opacity:.9}
    .breadcrumb a{color:#cfefff; text-decoration:underline; text-underline-offset:3px}
    .btn-contrast{ background:#fff; color:#0b1d3b; border:2px solid #fff; border-radius:999px; font-weight:900; padding:.8rem 1.15rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 3px 10px rgba(0,0,0,.15);}
    .btn-contrast:hover{filter:brightness(.98); text-decoration:none}

        /* INTRO + BENEFITS */
    .intro{ margin-top: clamp(18px, 4vw, 28px); display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--gap); align-items: start;}
    .intro .lead{font-size: clamp(1.05rem, .65vw + 1rem, 1.25rem); color:#122038}
    .intro-visual{border-radius: var(--radius-xxl); overflow:hidden; box-shadow: var(--shadow-soft); min-height: 260px; align-self: start;}
    .intro-visual img{width:100%;height:auto;}
    @media (max-width: 980px){ .intro{grid-template-columns:1fr;} }
    .benefits{margin-top: clamp(14px, 2.5vw, 22px); display:grid; grid-template-columns: 1fr; gap: 12px;}
    .benefit{ display:grid; grid-template-columns: 46px 1fr; gap:12px; align-items:center; background: #f7fbff; border:1px solid #e6f4ff; border-radius:14px; padding:12px 14px;}
    .benefit .num{ width:46px;height:46px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,#00a6e0,#5fd3ff); color:#07223e; font-weight:900}
    .intro-cta{display:grid; place-items:center; margin-top: 16px;}
    .btn-brand{ background:linear-gradient(135deg,#00a6e0,#5fd3ff); color:#0b1d3b; border:0; border-radius:999px; font-weight:900; padding:.9rem 1.3rem; display:inline-flex; align-items:center; gap:.45rem; box-shadow:0 8px 20px rgba(0,166,224,.25);}
    .btn-brand:hover{filter:brightness(.98); text-decoration:none}

    /* CARDS */
    .cards{display:grid; grid-template-columns: 1fr; gap: var(--gap);}
    @media (min-width: 860px){ .cards{ grid-template-columns: repeat(3, 1fr); } }
    .card-soft{border-radius: var(--radius-xxl); overflow:hidden; box-shadow: var(--shadow-soft); background:#fff; display:grid; grid-template-rows: 56% 44%;}
    .card-soft .media{overflow:hidden}
    .card-soft .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
    .card-soft .copy{padding: var(--pad)}
    .card-soft h3{font-size: clamp(1.05rem, .6vw + 1rem, 1.35rem)}
    .card-soft .btn{font-weight:800; border-radius:999px}

    /* MERCATI */
    .markets-grid{display:grid; grid-template-columns:1fr; gap: var(--gap)}
    @media (min-width: 760px){ .markets-grid{ grid-template-columns: repeat(2,1fr); } }
    @media (min-width: 1100px){ .markets-grid{ grid-template-columns: repeat(4,1fr); } }
    .market{border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft); transition:transform .18s, box-shadow .18s;}
    .market:hover{ transform: translateY(-4px); box-shadow:var(--shadow-hover) }
    .market .thumb{height:160px; background:#000}
    .market .thumb img{width:100%;height:100%;object-fit:cover}
    .market .meta{padding:12px 14px; font-weight:700}

    /* FORM (rivisto) */
    .cta-form{position:relative; color:#0b1d3b; border-radius: 28px; overflow:hidden;
      background:
        radial-gradient(100% 160% at 120% -20%, rgba(95,211,255,.45), transparent 60%),
        linear-gradient(180deg,#f0fbff,#e8f6ff 40%, #e8eefc 100%);
      box-shadow: var(--shadow-soft);
    }
    .cta-form .header{padding: clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) 0;}
    .cta-form h2{ margin-bottom: .25rem }

    .form-grid{ display:grid; grid-template-columns: 1fr; gap: 14px; padding: clamp(22px,2.4vw,30px);}
    @media (min-width: 920px){
      .form-grid{ grid-template-columns: repeat(12,1fr); column-gap:18px; row-gap:14px; }
      .col-6{ grid-column: span 6 }
      .col-12{ grid-column: span 12 }
    }
    .form-label{font-weight:700; color:#132649; margin-bottom:6px}
    .form-control, .form-select, textarea{
      border:2px solid #dbe7ff; border-radius:12px; padding:1rem 1rem; /* pi?? alti di base */
      background:#fff; width:100%; display:block; box-sizing:border-box; min-height:54px; font-size:16px; /* 16px per evitare zoom iOS */
    }
    textarea{ min-height: 160px; }
    .form-control:focus, .form-select:focus, textarea:focus{
      border-color:#7cd9ff; box-shadow:0 0 0 .25rem rgba(19,169,224,.12); outline:0;
    }
    .consensi{font-size:.95rem; color:#1d3357}
    .consensi a{color:#0a4ea3; text-decoration:underline; text-underline-offset:3px}
    .form-actions{display:grid; place-items:center; margin-top:6px}
    .btn-brand-solid{ background:linear-gradient(135deg,#00a6e0,#0d9ad4); color:#fff; border:0; border-radius:999px; font-weight:900; padding:1rem 1.4rem; box-shadow:0 10px 22px rgba(0,166,224,.28);}
    .btn-brand-solid:hover{filter:brightness(.98)}

    /* >>> MOBILE: input ancora pi?? comodi e spaziosi */
    @media (max-width: 600px){
      .form-grid{ padding: clamp(18px,4vw,24px); row-gap:16px; }
      .form-label{ font-size:1rem; }
      .form-control, .form-select{ padding:1.1rem 1rem; min-height:58px; font-size:16px; }
      textarea{ padding:1.05rem 1rem; min-height: 180px; }
    }

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


@media (max-width: 600px){
  .form-grid .col-6,
  .form-grid .col-12{ width:100%; max-width:100%; flex:0 0 100%; }
}


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