/* Reset minimo */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html, body {

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;   /* niente scroll laterale */

}



body {

  background: #000;

  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  color: #fff;

  padding-top: 80px;     /* altezza approssimativa della topbar */

}





/* TOP BAR */

.topbar {

  position: fixed;      /* la barra resta in alto anche scrollando */

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;        /* sopra slider e tutto il resto */

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 3px 40px;

  background: #000;

  border-bottom: 1px solid #111;

}





/* --- BLOCCO SINISTRO --- */



.topbar-left {

  display: flex;

  align-items: center;

  gap: 12px;

}



/* Logo simbolo */

.logo-mark {

  display: flex;

  align-items: center;

  justify-content: center;

}



.logo-mark img {

  height: 90px;      /* puoi aumentare o diminuire */

  width: auto;

}



.logo-v {

  font-weight: 600;

  letter-spacing: 0.12em;

  font-size: 18px;

}



/* Chevron sopra e sotto la V */

.logo-chevron {

  position: absolute;

  left: 50%;

  width: 18px;

  height: 18px;

  border-left: 1px solid #fff;

  border-top: 1px solid #fff;

  transform: translateX(-50%) rotate(45deg);

}



.chevron-up {

  top: -2px;

}



.chevron-down {

  bottom: -2px;

  transform: translateX(-50%) rotate(225deg);

}



/* --- TESTO CENTRALE --- */



.topbar-center {

  flex: 1;

  text-align: center;

  padding: 0 40px;

}



.tagline {

  font-size: 11px;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  white-space: nowrap;

}



/* --- BLOCCO DESTRO --- */



.topbar-right {

  display: flex;

  align-items: center;

  gap: 16px;

}



/* Cerchi social */

.social-icons {

  display: flex;

  gap: 10px;

}



.social-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: transparent;      /* niente sfondo */

  border: 1px solid #fff;       /* cerchio bianco sottile */

  text-decoration: none;

}



.social-btn img {

  width: 70%;

  height: 70%;

  object-fit: contain;

}



.lang-arrow {

  font-size: 10px;

}



/* ---- MENU A TENDINA LINGUE ---- */



.lang-switcher {

  position: relative;

  border: none;

}



.lang-btn {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 18px;

  background: transparent;

  border: 1px solid #555;

  color: #fff;

  cursor: pointer;

  text-transform: uppercase;

  font-size: 12px;

  letter-spacing: 0.15em;

}



.lang-btn .lang-arrow {

  transition: transform 0.2s;

}



.lang-menu {

  list-style: none;

  position: absolute;

  top: 100%;

  left: 0;

  width: 100%;

  margin: 0;

  padding: 0;

  background: #000;

  border: 1px solid #555;

  display: none;             /* nascosto di default */

  z-index: 3000;

}



.lang-menu li {

  padding: 10px 18px;

  font-size: 12px;

  cursor: pointer;

  text-transform: uppercase;

}



.lang-menu li:hover {

  background: #111;

}



/* quando il menu è aperto */

.lang-switcher.open .lang-menu {

  display: block;

}



.lang-switcher.open .lang-arrow {

  transform: rotate(180deg);

}



/* --- RESPONSIVE --- */

@media (max-width: 900px) {

  .topbar {

    flex-wrap: wrap;

    gap: 10px;

    padding: 12px 16px;

  }



  .topbar-center {

    order: 3;

    width: 100%;

    padding: 0;

    margin-top: 6px;

  }

}



/* =========================

   HERO SLIDER (VIDEO)

   ========================= */



.hero-slider {

  position: relative;

  width: 100%;

  height: 60vh;

  max-height: 800px;

  min-height: 480px;

  overflow: hidden;

}



/* Ogni slide occupa tutto lo schermo */

.hero-slide {

  position: absolute;

  inset: 0; /* top/right/bottom/left: 0 */

  opacity: 0;

  visibility: hidden;

  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;

}



/* Video full-screen */

.hero-slide video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  margin: 0 auto;

  display: block;

  border-radius: 20px;

}



/* Slide visibile */

.hero-slide.active {

  opacity: 1;

  visibility: visible;

}



/* Overlay scuro sopra il video */

.hero-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.35);

}



/* Testo al centro */

.hero-content {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 0 40px;

  z-index: 1;

}



.hero-content h1 {

  font-weight: 400;

  font-size: clamp(26px, 3vw, 42px);

  letter-spacing: 0.18em;

  text-transform: none;

  max-width: 80%;

  margin: 0 auto;

  text-align: center;

}



/* Frecce */

.hero-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  border: none;

  background: transparent;

  color: #fff;

  font-size: 32px;

  cursor: pointer;

  padding: 10px 16px;

  z-index: 2;

}



.hero-prev { left: 40px; }

.hero-next { right: 40px; }



.hero-arrow:hover { opacity: 0.7; }



/* Pallini */

.hero-dots {

  position: absolute;

  bottom: 35px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 10px;

  z-index: 2;

}



.hero-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  border: 1px solid #fff;

  background: transparent;

  cursor: pointer;

}



.hero-dot.active { background: #fff; }



/* Mobile */

@media (max-width: 768px) {

  .hero-prev { left: 16px; }

  .hero-next { right: 16px; }



  .hero-content { padding: 0 16px; }



  .hero-content h1 {

    font-size: 20px;

    letter-spacing: 0.12em;

  }

}



/* Freccia scroll down */

.scroll-down {

  position: absolute;

  bottom: 80px;

  left: 50%;

  width: 18px;

  height: 18px;

  border-left: 2px solid rgba(255, 255, 255, 0.7);

  border-bottom: 2px solid rgba(255, 255, 255, 0.7);

  transform: translateX(-50%) rotate(-45deg);

  opacity: 0.8;

  cursor: pointer;

  animation: scroll-bounce 1.6s infinite;

  z-index: 10;

}



/* Effetto “rimbalzo” leggero */

@keyframes scroll-bounce {

  0%, 100% {

    transform: translateX(-50%) translateY(0) rotate(-45deg);

  }

  50% {

    transform: translateX(-50%) translateY(8px) rotate(-45deg);

  }

}



/* =====================================

   SEZIONE INFO

   ===================================== */



.info-section {

  padding: 80px 8% 3px;

  background: #000;

  color: #fff;

}



/* Griglia a 3 colonne */

.info-grid {

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 40px;

}



/* Card singola */

.info-card {

  border-radius: 32px;

  border: 1px solid #333;

  padding: 32px 28px;

  text-align: center;

  background: radial-gradient(circle at top, #181818 0%, #000 60%);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



/* Effetto hover leggero */

.info-card:hover {

  transform: translateY(-8px);

  border-color: #666;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);

}



/* Titolo card */

.info-card h3 {

  font-size: 18px;

  font-weight: 400;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  margin-bottom: 20px;

}



/* Lista punti */

.info-list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.info-list li {

  font-size: 14px;

  font-weight: 300;

  line-height: 1.5;

  margin-bottom: 8px;

}



/* Responsive */

@media (max-width: 900px) {

  .info-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 600px) {

  .info-grid {

    grid-template-columns: 1fr;

  }



  .info-card { padding: 28px 22px; }



  .info-card h3 { font-size: 16px; }



  .info-list li { font-size: 13px; }

}



/* ==========================

   Sezione video di presentazione

============================== */



.video-section {

  padding: 20px 0 60px;

  background: #000;

  display: flex;

  justify-content: center;

}



.video-wrapper {

  position: relative;

  max-width: 1200px;

  width: 90%;

  margin: 0 auto;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);

  aspect-ratio: 16 / 9;

}



.video-wrapper video {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

  border-radius: 24px;

}



/* --- Bottone audio ON/OFF --- */

.video-sound-toggle {

  position: absolute;

  right: 20px;

  bottom: 20px;

  padding: 10px 12px;

  border: none;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.6);

  color: #fff;

  font-size: 20px;

  cursor: pointer;

  backdrop-filter: blur(4px);

  transition: background 0.2s ease;

}



.video-sound-toggle:hover {

  background: rgba(0, 0, 0, 0.85);

}



.video-wrapper .video-embed {

  width: 100%;

  height: 100%;

  display: block;

  border: 0;

}



/* ====== SEZIONE LAVORI / PORTFOLIO ====== */



.works-section {

  background: #000;

  padding: 10px 0 100px;

  color: #fff;

}



.works-header {

  max-width: 1200px;

  margin: 0 auto 40px;

  padding: 0 32px;

}



.works-header h2 {

  font-size: 28px;

  font-weight: 400;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  text-align: left;

}



/* Contenitore slider (frecce + riga immagini) */

.works-slider {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 32px;

  position: relative;

  display: flex;

  align-items: center;

  gap: 16px;

}



/* Frecce */

.works-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  border: 1px solid rgba(255, 255, 255, 0.4);

  background: rgba(0, 0, 0, 0.7);

  color: #fff;

  width: 44px;

  height: 44px;

  border-radius: 999px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;

  z-index: 10;

}



.works-prev { left: 0; }

.works-next { right: 0; }



.works-arrow:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: #fff;

  transform: translateY(-50%) scale(1.03);

}



/* Area che scorre orizzontalmente */

.works-track {

  flex: 1;

  overflow-x: scroll;

  overflow-y: hidden;

  scrollbar-width: none;

}



.works-track::-webkit-scrollbar { display: none; }



/* UNA sola riga di card */

.works-slide {

  display: flex;

  flex-wrap: nowrap;

  gap: 16px;

  padding: 0 60px; /* spazio interno per non coprire le card con le frecce */

}



/* ==========================

   WORK ITEM + OVERLAY (BASE)

============================== */



.work-item {

  position: relative;

  flex: 0 0 auto;

  border-radius: 22px;

  overflow: hidden;

}



/* DESKTOP: card basata su altezza (come prima) */

@media (min-width: 601px) {

  .work-item {

    height: 260px;

    width: auto;

  }



  .work-item img {

    height: 260px;

    width: auto;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;

  }



  .work-item:hover img {

    transform: scale(1.06);

  }

}



/* MOBILE: card proporzionata (NO STRISCE) */

@media (max-width: 600px) {

  .work-item {

    width: 78vw;            /* card più piccola e adatta al mobile */

    max-width: 360px;

    aspect-ratio: 4 / 3;    /* proporzione corretta */

    height: auto;           /* IMPORTANTISSIMO: niente altezze forzate */

  }



  .work-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

  }

}



/* overlay sopra l’immagine (bello, uniforme) */

.work-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.72);

  color: #fff;



  opacity: 0;

  transform: translateY(10px);

  transition: opacity .25s ease, transform .25s ease;



  pointer-events: none;



  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 22px;

  text-align: left;

  line-height: 1.5;

}



/* titolo overlay */

.work-overlay h3 {

  font-size: 16px;

  font-weight: 400;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  margin-bottom: 8px;

}



/* testo overlay */

.work-overlay p {

  font-size: 12px;

}



.work-overlay .work-desc {

  margin-top: 6px;

}



/* DESKTOP hover */

@media (hover: hover) and (pointer: fine) {

  .work-item:hover .work-overlay {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

  }

}



/* MOBILE tap: l’overlay viene mostrato via JS aggiungendo .is-active */

@media (hover: none) and (pointer: coarse) {

  .work-item.is-active .work-overlay {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

  }



  /* testo più leggibile su mobile */

  .work-overlay h3 { font-size: 18px; }

  .work-overlay p  { font-size: 13px; }

}



/* Responsive solo per il titolo/ padding */

@media (max-width: 640px) {

  .works-slider { padding: 0 16px; }



  .works-header h2 {

    font-size: 22px;

    text-align: center;

  }



  .works-slide {

    padding: 0 44px; /* un po’ meno padding interno su mobile */

  }

}



/* ==========================

   SEZIONE CLIENTI / COLLABORAZIONI

============================== */



.clients-section {

  background: #000;

  padding: 60px 8% 80px;

  color: #fff;

  border-top: 1px solid #222;

  box-shadow: 0 -1px 0 rgba(255,255,255,.04);

}



.clients-inner {

  max-width: 1200px;

  margin: 0 auto;

  text-align: center;

}



.clients-section h2 {

  font-size: 26px;

  font-weight: 400;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  margin-bottom: 16px;

}



.clients-subtitle {

  font-size: 14px;

  font-weight: 300;

  color: #aaa;

  max-width: 520px;

  margin: 0 auto 32px;

  line-height: 1.6;

}



.clients-slider {

  position: relative;

  max-width: 1400px;

  margin: 0 auto;

  display: flex;

  align-items: center;

}



.clients-logos {

  display: flex;

  flex-wrap: nowrap;

  gap: 32px;

  align-items: center;

  justify-content: flex-start;

  overflow-x: auto;

  padding: 8px 80px;

  scrollbar-width: none;

}



.clients-logos::-webkit-scrollbar { display: none; }



.client-logo {

  flex: 0 0 auto;

  padding: 10px 14px;

  border-radius: 16px;

  background: radial-gradient(circle at top, #181818 0%, #000 60%);

  border: 1px solid #222;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.client-logo img {

  max-height: 35px;

  width: auto;

  height: auto;

  object-fit: contain;

  filter: grayscale(100%);

  opacity: 0.85;

  transition: filter 0.25s ease, opacity 0.25s ease;

}



.client-logo:hover {

  transform: translateY(-4px);

  border-color: #555;

  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.8);

}



.client-logo:hover img {

  filter: grayscale(0%);

  opacity: 1;

}



.clients-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  border: 1px solid rgba(255, 255, 255, 0.4);

  background: rgba(0, 0, 0, 0.7);

  color: #fff;

  width: 44px;

  height: 44px;

  border-radius: 999px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;

  z-index: 10;

}



.clients-arrow:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: #fff;

  transform: translateY(-50%) scale(1.03);

}



.clients-prev { left: 0; }

.clients-next { right: 0; }



/* responsive */

@media (max-width: 600px) {

  .clients-section { padding: 50px 6% 60px; }

  .clients-section h2 { font-size: 22px; }

  .clients-subtitle { font-size: 13px; }

  .clients-logos { padding: 8px 40px; gap: 24px; }

}



/* ==========================

   SEZIONE CONTATTI

============================== */



.contact-section {

  background: #000;

  padding: 80px 8% 100px;

  color: #fff;

  border-top: 1px solid #222;

  box-shadow: 0 -1px 0 rgba(255,255,255,.04);

}



.contact-inner {

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

  gap: 48px;

  align-items: flex-start;

}



.contact-text h2 {

  font-size: 28px;

  font-weight: 400;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  margin-bottom: 18px;

}



.contact-text p {

  font-size: 14px;

  font-weight: 300;

  line-height: 1.6;

  max-width: 420px;

  margin-bottom: 24px;

}



.contact-info p {

  font-size: 13px;

  margin-bottom: 10px;

  line-height: 1.4;

}



.contact-form-wrapper {

  background: radial-gradient(circle at top, #181818 0%, #000 60%);

  border-radius: 24px;

  border: 1px solid #333;

  padding: 28px 24px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

}



.contact-form label { display: block; margin-bottom: 16px; }



.contact-form span {

  display: block;

  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  margin-bottom: 6px;

}



.contact-form input,

.contact-form textarea {

  width: 100%;

  border-radius: 12px;

  border: 1px solid #444;

  background: #050505;

  color: #fff;

  padding: 10px 12px;

  font-family: inherit;

  font-size: 13px;

  outline: none;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.contact-form input:focus,

.contact-form textarea:focus {

  border-color: #888;

  box-shadow: 0 0 0 1px #888;

}



.contact-submit {

  margin-top: 8px;

  border: none;

  border-radius: 999px;

  padding: 10px 22px;

  background: #fff;

  color: #000;

  font-size: 12px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  cursor: pointer;

  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;

}



.contact-submit:hover {

  background: #e5e5e5;

  transform: translateY(-1px);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);

}



@media (max-width: 900px) {

  .contact-inner {

    grid-template-columns: 1fr;

    gap: 32px;

  }

  .contact-text h2 { text-align: left; }

}



@media (max-width: 600px) {

  .contact-section { padding: 60px 6% 80px; }

  .contact-form-wrapper { padding: 22px 18px; }

}



/* ==========================

   SEZIONE EVENTI

============================== */



.events-section {

  background: #000;

  padding: 60px 8% 80px;

  color: #fff;

  border-top: 1px solid #222;

  box-shadow: 0 -1px 0 rgba(255,255,255,.04);

}



.events-inner {

  max-width: 1200px;

  margin: 0 auto;

  text-align: center;

}



.events-section h2 {

  font-size: 26px;

  font-weight: 400;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  margin-bottom: 16px;

}



.events-subtitle {

  font-size: 14px;

  font-weight: 300;

  color: #aaa;

  max-width: 520px;

  margin: 0 auto 32px;

  line-height: 1.6;

}



.events-slider {

  display: flex;

  justify-content: center;

  align-items: center;

  max-width: 1200px;

  margin: 0 auto;

}



.events-logos {

  display: flex;

  flex-wrap: nowrap;

  gap: 40px;

  align-items: center;

  justify-content: center;

  overflow-x: visible;

  padding: 16px 0;

}



.event-logo {

  flex: 0 0 auto;

  padding: 18px 20px;

  border-radius: 16px;

  background: radial-gradient(circle at top, #181818 0%, #000 60%);

  border: 1px solid #222;

  box-shadow: 0 8px 24px rgba(0,0,0,0.6);

  transition: transform 0.25s ease, border-color 0.25s ease;

}



.event-logo img {

  max-height: 50px;

  width: auto;

  object-fit: contain;

  filter: grayscale(100%);

  opacity: 0.85;

  transition: filter .25s ease, opacity .25s ease;

}



.event-logo:hover {

  transform: translateY(-4px);

  border-color: #555;

}



.event-logo:hover img {

  filter: grayscale(0%);

  opacity: 1;

}



.events-arrow { display: none; }



/* ==========================

   SEZIONE CONTATTI & SOCIAL

============================== */



.social-section {

  background: #000;

  padding: 70px 8% 80px;

  color: #fff;

  border-top: 1px solid #222;

  box-shadow: 0 -1px 0 rgba(255,255,255,.04);

}



.social-inner {

  max-width: 1200px;

  margin: 0 auto;

}



.social-section h2 {

  font-size: 26px;

  font-weight: 400;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  text-align: center;

  margin-bottom: 16px;

}



.social-subtitle {

  font-size: 14px;

  font-weight: 300;

  color: #aaa;

  max-width: 520px;

  margin: 0 auto 32px;

  line-height: 1.6;

  text-align: center;

}



.social-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 36px;

}



.social-column h3 {

  font-size: 14px;

  font-weight: 400;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  margin-bottom: 18px;

  color: #bbbbbb;

}



.social-line {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 14px;

  text-decoration: none;

  color: #fff;

}



.social-icon {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 1px solid #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  background: transparent;

  overflow: hidden;

}



.social-icon img {

  width: 60%;

  height: 60%;

  object-fit: contain;

}



.social-label {

  font-size: 14px;

  font-weight: 300;

  letter-spacing: 0.04em;

}



.social-line:hover .social-label { text-decoration: underline; }

.social-line:hover .social-icon { background: rgba(255, 255, 255, 0.06); }



@media (max-width: 900px) {

  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}



@media (max-width: 640px) {

  .social-grid { grid-template-columns: 1fr; }

  .social-column h3 { text-align: left; }

}



/* FOOTER */

.site-footer {

  width: 100%;

  text-align: center;

  padding: 12px 10px;

  font-size: 0.9rem;

  color: #ccc;

  background: #000;

  letter-spacing: 0.5px;

  white-space: nowrap;

  margin-top: 60px;

}



.footer-line {

  width: 90%;

  max-width: 1200px;

  height: 1px;

  background: linear-gradient(to right, #111, #333, #111);

  margin: 0 auto 18px;

  opacity: 0.6;

}



.footer-copy {

  margin-top: 10px;

  font-size: 11px;

  color: #666;

  letter-spacing: 0.1em;

}



.site-footer span { padding: 0 8px; }



@media (max-width: 800px) {

  .site-footer {

    white-space: normal;

    line-height: 1.6;

    padding: 16px 6%;

  }

}



/* ==========================

   TWEAK GENERALI MOBILE / TABLET

============================== */



/* Tablet */

@media (max-width: 900px) {

  body { padding-top: 70px; }

  .logo-mark img { height: 70px; }

  .hero-slider { height: 55vh; min-height: 360px; }

  .clients-logos { padding: 8px 40px; gap: 24px; }

  .events-logos { gap: 24px; }

}



/* Mobile */

@media (max-width: 600px) {

  .hero-slider { height: 60vh; min-height: 320px; }



  .hero-arrow {

    font-size: 24px;

    padding: 6px 10px;

  }



  .hero-content h1 {

    font-size: 18px;

    letter-spacing: 0.12em;

    max-width: 90%;

  }



  .clients-section,

  .contact-section,

  .social-section,

  .events-section {

    padding-left: 6%;

    padding-right: 6%;

  }

}



/* ==========================

   FIX MOBILE TOPBAR + HERO

============================== */

@media (max-width: 600px) {



  body { padding-top: 70px; }



  .topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: nowrap !important;

    padding: 8px 12px;

  }



  .topbar-left,

  .topbar-right { flex: 0 0 auto; }



  .topbar-center {

    flex: 1 1 auto;

    width: auto;

    padding: 0 8px;

    margin-top: 0;

    text-align: center;

  }



  .tagline {

    white-space: nowrap;

    font-size: 8px;

    letter-spacing: 0.14em;

    max-width: 100%;

    overflow: hidden;

  }



  .logo-mark img { height: 60px; }



  /* assicuriamoci che le slide restino sovrapposte */

  .hero-slide { position: absolute !important; }



  .hero-slider {

    height: 60vh;

    min-height: 360px;

  }



  .hero-slide video {

    border-radius: 0;

    width: 100%;

    height: 100%;

  }



  .hero-prev { left: 12px; }

  .hero-next { right: 12px; }



  .scroll-down { bottom: 50px; }



  .site-footer {

    white-space: normal;

    line-height: 1.5;

    padding: 16px 6%;

  }

}



/* Divider se vuoi usarlo */

.section-divider {

  width: 100%;

  height: 1px;

  background: linear-gradient(

    to right,

    rgba(255,255,255,0.03) 0%,

    rgba(255,255,255,0.12) 50%,

    rgba(255,255,255,0.03) 100%

  );

  margin: 60px 0;

}