.site-header {
  position: sticky;
  top: 0;
  z-index: 2000;
  /* background: rgba(255, 255, 255, .80); */
  /* backdrop-filter: blur(10px); */
  /* border-bottom: 1px solid var(--line2); */
}

/* =========================================================
   Header trasparente all'inizio, “glass” solo dopo scroll
   ========================================================= */

.site-header {
  /* stato iniziale (top page): trasparente */
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* quando scrolli aggiungiamo la "glass card" */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--line2);
  box-shadow: 0 10px 30px rgba(11, 18, 32, .08);
  backdrop-filter: blur(10px);
}
.site-header {
  background: transparent !important;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(10px);
}
/* =========================================================
   MOBILE NAV — FULL WIDTH (viewport), attaccato all’header + animazione
   Incolla in FONDO al CSS
   ========================================================= */

@media (max-width: 900px){

  /* assicurati che l'header stia sopra a tutto */
  .site-header{ z-index: 9998; }

  /* bottone sempre cliccabile sopra al dropdown */
  .nav__toggle{
    position: relative;
    z-index: 10000;
    pointer-events: auto;
  }

  /* MENU: full width viewport, attaccato all’header */
  .nav__links{
    position: fixed !important;                 /* <-- chiave: fuori dal container */
    top: var(--header-h, 90px) !important;      /* sotto header */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;

    /* look: piatto sopra, “pulito” */
    background: rgba(255,255,255,.98) !important;
    border: 0 !important;
    border-top: 1px solid rgba(11,18,32,.08) !important;
    border-radius: 0 0 18px 18px !important;   /* sopra ZERO, sotto morbido */
    box-shadow: 0 26px 70px rgba(11,18,32,.14) !important; /* solo effetto sotto */

    backdrop-filter: blur(12px);

    /* layout */
    display: flex !important;                   /* NO display:none: serve per animare */
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;

    padding: 12px 18px 16px !important;
    z-index: 9999 !important;

    /* stato CHIUSO (animabile) */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    max-height: 0;
    overflow: hidden;

    transition:
      opacity .18s ease,
      transform .18s ease,
      max-height .24s ease,
      visibility 0s linear .24s;
    will-change: transform, opacity, max-height;
  }

  /* stato APERTO */
  .nav__links.is-open{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    max-height: calc(100vh - var(--header-h, 90px));

    transition:
      opacity .18s ease,
      transform .18s ease,
      max-height .28s ease,
      visibility 0s linear 0s;
  }

  /* Link: full-width, tappabili, coerenti */
  .nav__links a{
    display: flex !important;
    align-items: center !important;
    width: 100% !important;

    padding: 14px 16px !important;
    border-radius: 14px !important;

    color: rgba(11,18,32,.90) !important;
    background: transparent !important;
    border: 1px solid rgba(11,18,32,.06) !important;

    font-weight: 800 !important;
    text-decoration: none !important;
  }

  .nav__links a:hover{
    background: rgba(52,146,214,.10) !important;
    border-color: rgba(52,146,214,.18) !important;
  }

  .nav__links a[aria-current="page"]{
    background: rgba(52,146,214,.14) !important;
    border-color: rgba(52,146,214,.22) !important;
    color: rgba(11,18,32,.95) !important;
  }

  /* CTA dentro menu: NON gigante */
  .nav__links .btn.btn-ghost.btn--small{
    width: 100% !important;
    justify-content: center !important;

    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 14px !important;

    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
    color: #fff !important;
    border: 1px solid rgba(52,146,214,.26) !important;
    box-shadow: 0 12px 28px rgba(28,92,158,.18) !important;
  }

  .nav__links .btn.btn-ghost.btn--small .material-symbols-outlined{
    font-size: 18px !important;
    color: #fff !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  @media (max-width: 900px){
    .nav__links{
      transition: none !important;
      transform: none !important;
    }
  }
}
/* =========================================================
   FIX CONTRASTO: header "glass" quando il menu è aperto
   + menu con stessa superficie (niente stacco netto)
   Incolla in FONDO al CSS
   ========================================================= */

/* Stato "menu aperto" (mobile): header deve diventare glass */
.site-header.is-menu-open{
  background: rgba(255, 255, 255, .82) !important;
  border-bottom: 1px solid var(--line2) !important;
  box-shadow: 0 10px 30px rgba(11, 18, 32, .08) !important;
  backdrop-filter: blur(10px) !important;
}

/* Mobile dropdown: stessa "surface" dell'header (meno contrasto) */
@media (max-width: 900px){
  .nav__links{
    background: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(12px) !important;

    /* rimuovi lo "stacco" del bordo sopra e riduci ombra */
    border-top: 0 !important;
    box-shadow: 0 18px 48px rgba(11,18,32,.12) !important;

    /* opzionale: ancora più seamless */
    transform: translateY(0) !important;
  }
}
/* =========================================================
   MENU MOBILE — BLOCCO UNICO (header + dropdown)
   - niente border-bottom su header quando menu aperto
   - dropdown opaco quando aperto (no trasparenza)
   Incolla in FONDO al CSS
   ========================================================= */

/* Quando il menu è aperto: header glass ma SENZA separatore */
.site-header.is-menu-open{
  background: rgba(255, 255, 255, .92) !important;
  border-bottom-color: transparent !important;  /* <-- via la riga */
  box-shadow: 0 10px 30px rgba(11,18,32,.08) !important;
  backdrop-filter: blur(10px) !important;
}

@media (max-width: 900px){

  /* Dropdown: opaco, attaccato, senza "taglio" sopra */
  .nav__links{
    background: #fff !important;               /* <-- NO trasparenza */
    backdrop-filter: none !important;          /* opzionale: togli blur sul menu */
    border-top: 0 !important;                  /* <-- niente stacco */
    box-shadow: 0 18px 48px rgba(11,18,32,.12) !important;

    /* opzionale: se vuoi ancora più “blocco unico” */
    border-radius: 0 0 18px 18px !important;
  }

  /* Se vuoi anche i link con un filo più contrasto (opzionale) */
  .nav__links a{
    background: #fff !important;
  }
}
.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
}

@media (max-width: 900px) {
  .nav__toggle {
    display: inline-flex
  }

  .nav__links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    padding: 14px;
    margin: 0 auto;
    width: min(var(--container), calc(100% - 2*var(--s3)));
    border-radius: var(--radius);
    background: rgba(15, 26, 46, .98);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: flex-start;
  }

  .nav__links.is-open {
    display: flex
  }
}
@media (max-width: 900px){
  .nav { position: relative; }

  /* il bottone deve stare sopra a qualsiasi overlay */
  .nav__toggle{
    position: relative;
    z-index: 20000;
    pointer-events: auto;
  }

  /* menu sopra tutto */
  .nav__links{
    z-index: 19999;
  }
}