:root{
  --neon:#FE5800;
  --black:#000000;
  --grey:#939393;
  --svgColor:#939393;
  --cursorColor:#939393;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--black);
  font-family: 'nba', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}

::selection{ background: var(--neon); color: var(--black); }
::-moz-selection{ background: var(--neon); color: var(--black); }

@font-face {
  font-family: 'nba_lt';
  src: url('type/nba_lt.woff2') format('woff2'),
       url('type/nba_lt.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'nba';
  src: url('type/nba.woff2') format('woff2'),
       url('type/nba.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'nba_md';
  src: url('type/nba_md.woff2') format('woff2'),
       url('type/nba_md.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'nba_bd';
  src: url('type/nba_bd.woff2') format('woff2'),
       url('type/nba_bd.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'nba_bk';
  src: url('type/nba_bk.woff2') format('woff2'),
       url('type/nba_bk.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.section{
  width:100vw;
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.top{background:var(--neon);color:var(--black);}

.bottom{
  background:var(--grey);
  color:var(--neon);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(48px,6vh,96px) clamp(20px,4vw,64px);
  z-index:5;
  position: relative;
}

.video-bg{
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; background: #000; pointer-events: none;
}
.video-bg__media{
  position: absolute; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
@media (prefers-reduced-motion: reduce){
  .video-bg__media{ animation: none; }
  .video-bg__media::-webkit-media-controls{ display: none !important; }
}

.hero-copy{position:relative;z-index:3;text-align:center;padding:6vh 4vw 20vh;}

.svg-wrap{
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; justify-content:center; align-items:flex-start;
  pointer-events:auto; cursor:none !important; z-index:2;
}
@media (orientation: portrait), (max-width: 780px){ .svg-wrap{align-items:flex-end;} }
.hero-svg{ display:block; max-width:none; will-change:transform,filter; color: var(--svgColor); }
@media (min-aspect-ratio:16/9){ .hero-svg{height:100%;width:auto;} }
@media (max-aspect-ratio:16/9){ .hero-svg{width:100%;height:auto;} }

.btn-grid{
  display:flex; width:100%; max-width:1800px; justify-content:space-between;
  --gap: clamp(240px, 24vw, 600px);
  --pad: clamp(24px, 4vw, 40px);
  gap: var(--gap);
  padding: clamp(24px,4vw,40px);
  position: relative; align-items: center; z-index: 1;
}

.big-btn{
  width: 15%;
  aspect-ratio: 1/1;
  min-width: 400px;
  max-width: 800px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  font-weight:300; font-size:30px;
  border: 2.2px solid var(--neon);
  background: var(--black);
  color: var(--neon);
  -webkit-text-stroke: 0 transparent;
  text-stroke: 0 transparent;
  transition:
    background-color 0.45s ease-in-out,
    color 0.45s ease-in-out,
    border-color 0.45s ease-in-out;
  position: relative; z-index: 1;
	text-transform: uppercase;
}

.big-btn{   font-family: 'nba_md'; text-align:center; flex-direction:column; text-transform: uppercase;}
.big-btn p{ margin:0; text-align:center; }

/* Pecha Kucha (right) — diagonal dashed background and grey label around text */
.pecha-btn {
  pointer-events: none;
  background: var(--grey);
  background-size: 11px 11px;
  color: var(--black);
  border: 2.2px solid var(--neon);
}
.pecha-btn p{
  display: inline-block;
  line-height: 1;
}

/* Default hover for generic big buttons */
.big-btn:hover,
.big-btn:focus{
  background: var(--neon);
  color: var(--black);
  border-color: var(--neon);
}

/* Action (left) — inverted base/hover compared to default */
.action-btn{
  background: var(--grey);
  color: var(--black);
  border-color: var(--neon);
}
.action-btn:hover,
.action-btn:focus{
  background: var(--neon);
  color: var(--black);
  border-color: var(--neon);
}

@media (orientation: portrait), (max-width: 780px) {

.btn-grid::before{
  content:"";
  position:absolute;
  top:50%;

  left: calc(var(--pad) + ( (100% - (2 * var(--pad)) - var(--gap)) / 4 ));
  right: calc(var(--pad) + ( (100% - (2 * var(--pad)) - var(--gap)) / 4 ));
  height:1px;
  background: var(--black);
  transform: translateY(-50%);
  pointer-events:none;
  z-index: 0;
}

  .btn-grid::after {
    content: "";
    position: absolute;
    top: clamp(24px, 4vw, 40px);
    bottom: clamp(24px, 4vw, 40px);
    left: 50%;
    width: 1px;
    background: var(--black);
    transform: translateX(-50%);
    pointer-events: none;

    z-index: 0;
  }
}
@media (orientation:landscape){
  .big-btn{width:50%;max-width:calc(50% - 2.5vw);min-width:250px;}

  .big-btn{ text-align:center; flex-direction:column; }
  .big-btn p{ margin:0; text-align:center; }

}

.btn-grid::before{
  content:"";
  position:absolute;
  top:50%;
  left: calc(var(--pad) + ( (100% - (2 * var(--pad)) - var(--gap)) / 4 ));
  right: calc(var(--pad) + ( (100% - (2 * var(--pad)) - var(--gap)) / 4 ));
  height:1px;
  background: var(--black);
  transform: translateY(-50%);
  pointer-events:none;
  z-index: 0;
}

/* Call (center) — black background, grey text, no hover */
.call-btn{
  font-family: 'nba_lt';
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:300;
  font-size:28px;
  width: clamp(90px, 11vw, 140px);
  aspect-ratio: 1/1;
  border-radius:50%;
  background: var(--grey);
  color: var(--neon);
  border: 2.2px solid var(--neon);
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index:2;
  pointer-events:none;
  text-transform: uppercase;
}

.buttons-header-graphic{
  width: 100%; padding: 10px 10px 0 10px; box-sizing: border-box;
  position: absolute; top: 0; left: 0; right: 0; pointer-events: none; z-index: 0;
}
.buttons-footer-graphic {
  width: 100%;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}
.buttons-graphic{ display:block; width:100%; height:auto; max-width:none; }

footer{
  width:100%; min-height:100vh; background: var(--grey);
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
  overflow:hidden; position: relative;
}
footer .footer-content{
  position: static;
  z-index: auto;
  width: 100%;
}

footer .video-bg{ z-index: 0; }

footer h1{
  margin-top:20px; margin-left:33px; margin-right:33px; padding:0;
  text-transform:uppercase; text-align:justify; line-height:1;
  width:100vw; box-sizing:border-box;
}
footer h1 a.footer-link{
  display:inline-block; width:100%; color:var(--neon); text-decoration:none;
  font-size: clamp(28px, 8.5vw, 140px); letter-spacing:-0.01em;
  white-space:normal; text-wrap:balance; word-break:normal; hyphens:none;
  text-align:justify; text-align-last:justify;
  padding-left:10px; padding-right:10px; box-sizing:border-box;
  transition: color 0.45s ease-in-out;
}
footer h1 a.footer-link::after{ content:""; display:inline-block; width:100%; }
footer h1 a.footer-link:hover{ color: var(--black); }

body{cursor:none;}
.cursor{
  position:fixed;top:0;left:0;translate:-50% -50%;
  width:10px;height:10px;border-radius:50%;
  background:var(--cursorColor);
  pointer-events:none;z-index:9999;
  transition:width .12s ease,height .12s ease, background-color .12s ease, opacity .12s ease;
  opacity:1;
}
.cursor.is-link{ width:25px; height:25px; }
a, button, .big-btn, [role="button"]{ cursor: none !important; }

@media (hover:none),(pointer:coarse){
  body{cursor:auto;}
  a, button, .big-btn, [role="button"]{ cursor:auto !important; }
  .cursor{display:none;}
}

html,body{scroll-behavior:auto !important;}

@media (orientation: portrait), (max-width: 780px) {
  .btn-grid {
    flex-direction: column;
    align-items: center;
    --gap: clamp(240px, 24vw, 600px);
  --pad: clamp(24px, 4vw, 40px);
  gap: var(--gap);
    padding: clamp(32px, 5vw, 48px);
  }
  .big-btn {
    width: min(70%, 480px);
    min-width: 220px;
    max-width: 480px;
  }

.big-btn{ text-align:center; flex-direction:column;}
.big-btn p{ margin:0; text-align:center; }

}

body.mouse-moving .cursor { width: 25px; height: 25px; }
.cursor {
  transition:
    width 0.35s ease-in-out,
    height 0.35s ease-in-out,
    transform 0.35s ease-in-out;
}

.footer-header-graphic{
  width: 100%;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  z-index: 1;
}

.footer-graphic{ display:block; width:100%; height:auto; max-width:none; }
.footer-graphic-link{ display:block; }

.footer-graphic {
  transition: filter 0.5s ease-in-out;
  filter: none;
}

.footer-graphic-link:hover .footer-graphic {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

.site-message{ font-family: 'nba_lt', sans-serif; font-size: clamp(14px, 4.8vw, 32px); font-weight:500; }

.site-message::after{ font-family: 'nba_lt', line-height: 1; content:""; display:inline-block; width:100%; }

@media (orientation: portrait), (max-width: 780px){
  .site-message--hero{
    display:block;
    position:absolute; top:0; left:0; right:0;
    padding: 10px 10px;
    color: var(--black);
  }
  .site-message--footer{ display:none; }
  .site-message{ font-size: clamp(14px, 4.8vw, 32px); font-weight:300; }
}

@media (orientation:landscape){
  .site-message--hero{ display:none; }
  .site-message--footer{
    display:block;
    position:absolute;
    left:0; right:0; top:0;
    bottom:auto;
    padding: 10px 10px 0 10px;
    color: var(--neon);
  }
  .site-message{ font-size: clamp(18px, 3.2vw, 60px); }
}

@media (orientation: portrait) and (min-width: 1024px){
  .site-message--hero{
    padding: 10px 10px 10px 10px;
  }
}

.site-message {
    text-align: justify;
    text-align-last: left;
    -ms-text-align-last: left;
    text-justify: inter-word;
  }

  .site-message::after {
    content: none !important;
  }

  @media (orientation: portrait), (max-width: 780px) {
    .big-btn { font-size: 26px; }
    .call-btn { font-size: 26px; }
  }

.site-message { font-weight: 300; }

@media (orientation: portrait), (max-width: 780px){
  .site-message--hero { font-weight: 600; }
}

@media (orientation: landscape) and (max-width: 3000px) {
  .site-message--footer {
    font-size: clamp(16px, 2.2vw, 48px);
    line-height: 1;
  }
}

.btn-grid::before,
.btn-grid::after {
  content: none !important;
  display: none !important;
}

.btn-grid { position: relative; }
.btn-connector{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.btn-connector__line{
  stroke: var(--neon);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

	@media (orientation: portrait), (max-width: 780px) {
  .btn-grid {

    --gap: clamp(160px, 3vw, 24px);
    gap: var(--gap);
  }
}

.st0{fill:#bebebe;}


.lang-toggle{
  position: fixed;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: var(--black);
  color: var(--neon);
  border: 0;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'nba_md', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1;
  z-index: 10; /* above hero SVG */
}
.lang-toggle:hover,
.lang-toggle:focus{
  color: var(--grey);
}
@media (orientation: portrait), (max-width: 780px){
  /* On mobile, anchor it inside the buttons section, right-aligned and vertically centered */
  .lang-toggle{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}



/* Footer IT button */
.footer-it-btn {
  position: absolute;
  left: 10px;
  /* 50px sopra il margine superiore della grafica footer */
  bottom: calc(var(--footer-graphic-height, 0px) + 50px);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  color: var(--neon);
  border: 2.2px solid var(--neon);
  font-family: 'nba_lt', sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
  z-index: 2;
  pointer-events: auto;
  box-sizing: border-box;
  transition:
    background-color 0.45s ease-in-out,
    color 0.45s ease-in-out,
    border-color 0.45s ease-in-out;
}
.footer-it-btn:hover,
.footer-it-btn:focus {
  background: var(--neon);
  color: var(--black);
  border-color: var(--neon);
}
.footer-it-btn:hover,
.footer-it-btn:focus{
  background: var(--neon);
  color: var(--black);
  border-color: var(--neon);
	  transition:
    background-color 0.45s ease-in-out,
    color 0.45s ease-in-out,
    border-color 0.45s ease-in-out;
}
@media (orientation: portrait), (max-width: 780px) {
  .footer-it-btn {
    width: 60px;
    height: 60px;
    bottom: calc(60px + 50px); /* 50px sopra la grafica anche su mobile */
  }
}

footer {
  --footer-graphic-height: 0px;
}

.footer-header-graphic img.footer-graphic {
  /* serve solo come riferimento visuale per calcolare la distanza */
  display: block;
}

footer.loaded .footer-header-graphic img.footer-graphic {
  /* non visivamente cambia nulla, ma questo evento permette JS di aggiornare la variabile */
}




/* Smaller, orange label for (COMING SOON) under Pecha Kucha */
.pecha-btn .soon{
  font-size: 0.85em;  /* slightly smaller than PECHA KUCHA */
  color: var(--neon); /* orange */
  display: inline-block;
  line-height: 1;
	font-family: 'nba_lt';
}


  .call-btn{ font-size: clamp(34px, 2.8vw, 64px); }
}


/* === Responsive sizing update (Oct 2025) === */

/* (COMING SOON) much smaller and orange across breakpoints */
.pecha-btn .soon{
  font-size: 0.6em;   /* decisamente più piccolo del label principale */
  color: var(--neon); /* arancione */
  display: inline-block;
  line-height: 1;
}

/* Scale only PECHA KUCHA on larger screens; keep CALL unchanged */

}

/* Slight headroom for ultra-wide */
@media (min-width: 1600px) and (orientation: landscape){
  .pecha-btn.big-btn{ font-size: clamp(30px, 2.2vw, 52px); }
}


/* Align PECHA KUCHA label centrally and push (COMING SOON) slightly below */
.pecha-btn p{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height: 1;
  margin: 0;
}
.pecha-btn .soon{
  display:block;
  margin-top: 0.35em; /* poco più sotto rispetto al titolo */
}


/* Desktop sizing for ACTION: slightly smaller than PECHA KUCHA */
@media (orientation: landscape) and (min-width: 1024px){
  .action-btn{ font-size: clamp(24px, 2.0vw, 44px); }
}


/* Lock CALL label size across breakpoints */
.call-btn{ font-size: 28px; }





/* PECHA KUCHA responsive; CALL fisso a 30px */
@media (orientation: landscape) and (min-width: 1024px){
  .pecha-btn.big-btn { font-size: clamp(28px, 2.4vw, 48px); }
  .call-btn { font-size: 30px; }
}


/* Center PECHA KUCHA label; place (COMING SOON) below without affecting centering */
.pecha-btn{ position: relative; }
.pecha-btn p{ display:block; line-height:1; margin:0; text-align:center; }
.pecha-btn .label{ display:block; }
.pecha-btn .soon{
  position: absolute;
  top: 58%;        /* slightly below the vertical center */
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 0.6em;
  color: var(--neon);
  white-space: nowrap;   /* avoid line break */
  margin-top: 0;
  line-height: 1;
}


/* Desktop: ACTION and PECHA KUCHA same size; CALL fixed */
@media (orientation: landscape) and (min-width: 1024px){
  .action-btn,
  .pecha-btn.big-btn { font-size: clamp(28px, 2.4vw, 48px); }
  .call-btn { font-size: 30px; }
}

/* Always keep CALL at 30px (also covers portrait) */
.call-btn{ font-size: 30px; }


/* COMING SOON leggermente più grande in portrait */
@media (orientation: portrait), (max-width: 780px) {
  .pecha-btn .soon {
    font-size: 0.8em;   /* più grande rispetto al desktop */
    top: 60%;           /* leggera correzione verticale */
  }
}