.hero { padding-top: calc(var(--header-height, 80px) + 100px); }
.stage { padding-top: calc(var(--header-height, 80px) + 40px); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
}

.site-header-bar {
  position: relative;
  z-index: 101;
  width: 100%;
  padding: 20px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: 0 4px 20px rgba(29, 29, 27, .08);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-open .site-header-bar {
  background: var(--color-primary);
  box-shadow: none;
}

.site-header-logo {
  position: relative;
  display: block;
  width: 160px;
  transition: width .3s ease;
}
.site-header.is-scrolled .site-header-logo { width: 120px; }
.site-header-logo img { display: block; width: 100%; height: auto; }
.site-header-logo .logo-default { transition: opacity .2s ease; }
.site-header-logo .logo-inverted {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.site-header.is-open .site-header-logo .logo-default { opacity: 0; }
.site-header.is-open .site-header-logo .logo-inverted { opacity: 1; }

.site-menu-edition {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 9px 20px 9px 16px;
  background: var(--color-primary);
  box-shadow: var(--shadow-badge);
  transition: background-color .2s ease, color .2s ease;
}
.site-header.is-open .site-menu-edition {
  background: var(--color-white);
  color: var(--color-primary);
}
.site-menu-edition .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(168,200,42,.7);
  animation: pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
/* Track con testo duplicato per il loop infinito, sia su desktop che su
   mobile (le regole mobile-specifiche in responsive.css sovrascrivono solo
   il layout del badge, non il meccanismo del loop).
   Il pallino pulse sta dentro ogni copia (item), così scorre insieme al
   testo invece di restare fermo a sinistra.
   .site-menu-edition-viewport è la vera maschera (overflow:hidden), separata
   dal padding del badge: se overflow stesse sull'elemento col padding, il
   testo animato riempirebbe comunque lo spazio del padding prima di essere
   tagliato (il clip di overflow:hidden avviene al bordo ESTERNO del
   padding-box, non a quello interno) — il padding da solo non protegge
   dai bordi un contenuto in overflow. */
.site-menu-edition-viewport { overflow: hidden; min-width: 0; max-width: min(280px, 32vw); }
.site-menu-edition-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: edition-ticker 16s linear infinite;
}
.site-menu-edition-item { display: inline-flex; align-items: center; gap: 10px; padding-right: 48px; white-space: nowrap; }
.site-menu-edition-item + .site-menu-edition-item { display: inline-flex; }
@keyframes edition-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu-edition-track { animation: none; }
  .site-menu-edition-item + .site-menu-edition-item { display: none; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  transition: color .2s ease;
}
.site-header.is-open .menu-toggle { color: var(--color-white); }

.menu-toggle-icon { position: relative; width: 30px; height: 21px; flex-shrink: 0; }
.menu-toggle-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.menu-toggle-icon span:nth-child(1) { top: 0; }
.menu-toggle-icon span:nth-child(2) { top: 9px; }
.menu-toggle-icon span:nth-child(3) { top: 18px; }

.site-header.is-open .menu-toggle-icon span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.site-header.is-open .menu-toggle-icon span:nth-child(2) { opacity: 0; }
.site-header.is-open .menu-toggle-icon span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

.site-menu {
  position: fixed;
  inset: 0;
  max-height: 100vh;
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--color-primary);
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  overflow-y: auto;
  transition: opacity .4s ease, transform .4s ease;
}
.site-header.is-open .site-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-menu-content {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: calc(var(--header-height, 80px) + 40px) clamp(20px, 4vw, 48px) 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.site-menu-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 60px;
  align-items: start;
}

.site-menu-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.site-menu-nav li {
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.site-menu-nav li:last-child { border-bottom: none; }
.site-header.is-open .site-menu-nav li { opacity: 1; transform: translateY(0); }
.site-header.is-open .site-menu-nav li:nth-child(1) { transition-delay: .1s; }
.site-header.is-open .site-menu-nav li:nth-child(2) { transition-delay: .2s; }
.site-header.is-open .site-menu-nav li:nth-child(3) { transition-delay: .3s; }
.site-header.is-open .site-menu-nav li:nth-child(4) { transition-delay: .4s; }
.site-header.is-open .site-menu-nav li:nth-child(5) { transition-delay: .5s; }
.site-header.is-open .site-menu-nav li:nth-child(6) { transition-delay: .6s; }
.site-menu-nav a {
  display: block;
  width: 100%;
  padding: 16px 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.04em;
  /* Rimpicciolito rispetto all'originale (era clamp(26px,3.4vw,40px)) per
     fare spazio alla sesta voce di menu ("Area stampa") senza sovraffollare
     l'overlay. */
  font-size: clamp(22px, 2.9vw, 34px);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-hover-out), transform var(--transition-hover-out);
}
.site-menu-nav a:hover,
.site-menu-nav a:focus-visible {
  color: var(--color-accent);
  transform: translateX(10px);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.site-menu-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 16px;
  font-family: var(--font-body);
}
.site-menu-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--transition-hover-out);
}
.site-menu-contacts a:hover { color: var(--color-accent); transition: color var(--transition-fast); }
.site-menu-contacts svg { width: 18px; height: 18px; flex-shrink: 0; }

.site-menu-social { display: flex; gap: 16px; align-items: center; margin-top: 4px; }
.site-menu-social a { color: var(--color-white); transition: color var(--transition-hover-out), transform var(--transition-hover-out); }
.site-menu-social a:hover { color: var(--color-accent); transform: scale(1.15); transition: color var(--transition-fast), transform var(--transition-fast); }
.site-menu-social svg { width: 20px; height: 20px; }

.site-menu-legal { display: flex; gap: 10px; margin-top: 8px; }
.site-menu-legal .footer-btn,
.site-menu-legal .footer-btn:hover { color: #151515; }

@media (min-width: 901px) {
  .site-menu-contacts {
    align-self: center;
    align-items: flex-end;
    text-align: right;
  }
  .site-menu-contacts a { justify-content: flex-end; }
  .site-menu-social { justify-content: flex-end; }
  .site-menu-legal { justify-content: flex-end; }
}

.site-menu-logos {
  width: 100%;
  padding: 0 clamp(20px, 4vw, 48px) 40px;
}
.site-menu-logos-card {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--color-white);
  border: var(--border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 36px;
}
.site-menu-logos-card img { display: block; height: clamp(30px, 4.6vw, 56px); width: auto; }

@media (prefers-reduced-motion: reduce) {
  .site-menu { transition: none; }
  .site-menu-nav li { transition: none; }
  .menu-toggle-icon span { transition: none; }
}