@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/archivo-700-latin.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:800;font-style:normal;font-display:swap;src:url('fonts/archivo-800-latin.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/manrope-400-latin.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/manrope-600-latin.woff2') format('woff2')}

:root{
  --nero:#0b0b0c; --nero-2:#141416; --linea:#232327;
  --bianco:#fafafa; --grigio:#9a9aa2; --grigio-2:#6e6e77;
  --arancio:#fe5000; --arancio-2:#ff6a24;
  --r:16px; --wrap:1160px; --pad:clamp(1.15rem,4vw,2rem);
  --ease:cubic-bezier(.16,1,.3,1); --t:.25s var(--ease);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--nero);color:var(--bianco);
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--arancio);color:#fff}
:focus-visible{outline:2px solid var(--arancio);outline-offset:4px;border-radius:4px}
.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}

/* testata */
.testa{padding-block:clamp(1.4rem,3vw,2rem);border-bottom:1px solid var(--linea)}
.testa-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.testa img{height:30px;width:auto;filter:brightness(0) invert(1)}
.testa a{text-decoration:none;font-size:.9rem;font-weight:600;color:var(--grigio);transition:color var(--t);padding:.6rem 0;display:inline-block}
.testa a:hover{color:var(--bianco)}

/* apertura */
.apri{padding-block:clamp(4rem,10vw,8rem) clamp(3rem,6vw,5rem)}
.occhiello{
  display:inline-flex;align-items:center;gap:.55rem;font-family:'Archivo',sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--arancio);
  margin-bottom:1.4rem;
}
.occhiello::before{content:"";width:26px;height:2px;background:var(--arancio)}
.apri h1{font-size:clamp(2.6rem,7vw,5.2rem);max-width:16ch}
.apri h1 em{font-style:normal;color:var(--arancio)}
.apri p{margin-top:1.6rem;max-width:52ch;font-size:clamp(1.05rem,1rem + .4vw,1.22rem);color:var(--grigio);line-height:1.6}

/* elenco demo */
.demo{padding-bottom:clamp(4rem,9vw,7rem)}
.demo-testa{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--linea);margin-bottom:2.5rem}
.demo-testa h2{font-size:1.1rem;letter-spacing:-.01em}
.demo-testa span{font-size:.82rem;color:var(--grigio-2);font-variant-numeric:tabular-nums}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:2rem}

.scheda{
  display:flex;flex-direction:column;background:var(--nero-2);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;text-decoration:none;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.scheda:hover{border-color:var(--arancio);transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.scheda:active{transform:translateY(-1px)}
.scheda-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:#08131c;border-bottom:1px solid var(--linea)}
.scheda-fig img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--ease)}
.scheda:hover .scheda-fig img{transform:scale(1.03)}
.scheda-corpo{padding:1.5rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.scheda h3{font-size:1.3rem}
.scheda p{font-size:.95rem;color:var(--grigio);line-height:1.55;flex:1}
.etichette{display:flex;flex-wrap:wrap;gap:.4rem}
.etichette span{font-size:.74rem;font-weight:600;color:var(--grigio);border:1px solid var(--linea);border-radius:99px;padding:.24rem .7rem}
.vai{display:inline-flex;align-items:center;gap:.5rem;font-family:'Archivo',sans-serif;font-weight:700;font-size:.94rem;color:var(--arancio)}
.vai svg{width:1.05em;height:1.05em;fill:currentColor;transition:transform var(--t)}
.scheda:hover .vai svg{transform:translateX(4px)}

/* segnaposto per le prossime demo */
.futura{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  min-height:280px;border:1px dashed var(--linea);border-radius:var(--r);
  color:var(--grigio-2);font-size:.92rem;text-align:center;padding:2rem;
}
.futura b{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.05rem;color:var(--grigio);letter-spacing:-.01em}

/* chiusura */
.piede{border-top:1px solid var(--linea);padding-block:2.2rem;font-size:.85rem;color:var(--grigio-2)}
.piede-in{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between}
.piede a{color:var(--grigio);text-decoration:none;transition:color var(--t);padding:.4rem 0;display:inline-block}
.piede a:hover{color:var(--arancio)}

@media (max-width:560px){
  .griglia{grid-template-columns:1fr}
  .demo-testa{flex-direction:column;align-items:flex-start;gap:.3rem}
}