/* ════════════════════════════════════════════
   NAV — sorgente unica per tutte le pagine.
   Modificare SOLO qui: index, download, docs, blog, terms e gli articoli
   caricano tutti questo file. Le variabili hanno un fallback perché non
   ogni pagina definisce l'intero :root della home.
   ════════════════════════════════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 24px}
/* Nessun bordo: lo sfondo è un pannello a sua volta mascherato verso il basso,
   così blur e scurimento sfumano invece di finire su una linea. Una hairline a
   tutta larghezza taglia la pagina in due. */
.nav::before{content:'';position:absolute;left:0;right:0;top:0;bottom:-44px;z-index:-1;
  opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,9,15,.92) 0%,rgba(9,9,15,.74) 52%,rgba(9,9,15,0) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);
  transition:opacity .4s ease}
.nav.scrolled::before{opacity:1}
/* Sulle pagine interne non c'è una hero da attraversare: lo sfondo c'è subito. */
.nav.nav--solid::before{opacity:1}

.nav-inner{max-width:var(--max-w,1200px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0;transition:height .35s cubic-bezier(.16,1,.3,1)}
.nav.scrolled .nav-inner{height:56px}
.nav-left{display:flex;align-items:center;gap:34px;min-width:0}
.nav-brand{display:flex;align-items:center;gap:7px;text-decoration:none;transition:gap .4s cubic-bezier(.16,1,.3,1)}
.nav-brand img{height:26px;width:auto;display:block;transition:height .35s cubic-bezier(.16,1,.3,1)}
/* il wordmark come lo imposta il software: uppercase, medium, .08em di spaziatura.
   Alzato solo il contrasto — 40% va bene per la chrome, non per il logo di un sito. */
.nav-brand .wm{font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(234,236,241,.74);transition:font-size .35s cubic-bezier(.16,1,.3,1),color .2s}
.nav-brand:hover .wm{color:rgba(234,236,241,.95)}
.nav.scrolled .nav-brand .wm{font-size:11.5px}
.nav.scrolled .nav-brand img{height:23px}

.nav-links{display:flex;align-items:center;gap:22px;transition:gap .4s cubic-bezier(.16,1,.3,1)}
/* una hairline fra ciò che sta in questa pagina e ciò che sta in un'altra */
.nav-sep{width:1px;height:15px;background:rgba(255,255,255,.1);flex-shrink:0}
/* le pagine stanno un gradino dietro alle sezioni di questa pagina */
.nav-links a.nav-page{color:rgba(139,152,171,.62)}
.nav-links a.nav-page:hover{color:var(--text-muted,#8b98ab)}
.nav.scrolled .nav-links{gap:17px}
.nav-links a{position:relative;font-size:.88rem;font-weight:500;color:var(--text-muted,#8b98ab);
  text-decoration:none;padding:5px 0;transition:color .2s,font-size .35s cubic-bezier(.16,1,.3,1)}
/* una riga che cresce sotto la sezione in cui ti trovi davvero */
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--purple-bright,#a855f7);transform:scaleX(0);transform-origin:left center;
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .32s ease;opacity:.55}
.nav-links a:hover::after{transform:scaleX(.34)}
.nav-links a.on{color:var(--text,#eaecf1)}
.nav-links a[href^="/"]::after{display:none}
.nav-links a.on::after{transform:scaleX(1);opacity:1}
/* la pagina in cui sei: nessuna riga, solo il colore pieno */
.nav-links a.nav-page.current{color:var(--text,#eaecf1)}
.nav.scrolled .nav-links a{font-size:.82rem}
.nav-links a:hover{color:var(--text,#eaecf1)}

.nav-right{display:flex;align-items:center;gap:12px;transition:gap .4s cubic-bezier(.16,1,.3,1)}
.nav.scrolled .nav-right{gap:8px}
.nav.scrolled .nav-right .btn{padding:8px 17px;font-size:.82rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
  font-weight:600;font-size:.88rem;border-radius:4px;border:none;cursor:pointer;text-decoration:none;
  padding:10px 22px;transition:all .25s cubic-bezier(.16,1,.3,1)}
.btn-ghost{background:transparent;color:var(--text-2,#c3cbd8);border:1px solid var(--border-2,rgba(255,255,255,.1))}
.btn-ghost:hover{background:var(--surface,#12121c);border-color:var(--border-2,rgba(255,255,255,.1));color:var(--text,#eaecf1)}
.btn-primary{background:var(--purple,#7c3aed);color:#fff}
.btn-primary:hover{background:#6d28d9;box-shadow:0 4px 24px rgba(124,58,237,.35);transform:translateY(-1px)}
.mobile-menu{display:none;background:none;border:none;color:var(--text,#eaecf1);padding:8px;cursor:pointer}
.mobile-menu svg{width:24px;height:24px}

/* ═══ MOBILE DRAWER ═══ */
.mobile-drawer{position:fixed;top:0;right:0;width:280px;height:100vh;background:var(--bg-2,#0f0f18);border-left:1px solid var(--border,rgba(255,255,255,.06));z-index:200;padding:80px 28px 28px;display:flex;flex-direction:column;gap:8px;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer a{display:block;font-size:1rem;font-weight:500;color:var(--text-2,#c3cbd8);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.06));transition:color .2s}
.mobile-drawer a:hover{color:var(--text,#eaecf1)}
.mobile-drawer .drawer-buttons{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.mobile-drawer .drawer-buttons .btn{width:100%;justify-content:center}
.drawer-brand{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.drawer-brand .wm{font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(234,236,241,.74)}
.drawer-brand img{height:26px;width:auto;display:block}
.drawer-rule{height:1px;background:var(--border,rgba(255,255,255,.06));margin:10px 0}
.drawer-close{position:absolute;top:20px;right:20px;background:none;border:none;color:var(--text,#eaecf1);padding:8px;cursor:pointer}
.drawer-close svg{width:24px;height:24px}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s ease}
.drawer-overlay.open{opacity:1;pointer-events:auto}

@media(max-width:1140px){
  .nav-links .nav-sep,.nav-links a.nav-page{display:none}
}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-right{display:none}
  .mobile-menu{display:block}
}