/* ==========================================================================
   LeoComms — one-page site, versione "Ricamo" (palette Y2K)
   Stessa struttura a imbastitura (bordi tratteggiati, cuciture, toppe
   trascinabili) riletta con una palette Y2K: verde acido/lime al posto del
   verde scuro, fucsia vibrante al posto dell'arancio, più azzurro polvere
   e argento metallico come accenti nuovi. Cursore custom: freccia pixelata
   in stile vecchio puntatore Windows.

   Palette fissa:
   --nero     #000000  (base/sfondo)
   --bianco   #FFFFFF  (testo principale)
   --lime     #C2FA2E  (ex verde scuro: sezioni, badge, tag)
   --fucsia   #FF2E9C  (ex arancio: accento, CTA, cuciture)
   --azzurro  #AFC9EC  (nuovo: accenti, tag secondari)
   --argento  #C7CDD6  (nuovo: bordi/cuciture metalliche)
   Font: Futuro Y2K (display, locale) + Montserrat (testo)
   Approccio mobile-first, breakpoint: 768px (tablet), 1080px (desktop)
   ========================================================================== */

@font-face {
  font-family: 'Futuro Y2K';
  src: url('../assets/fonts/Futuro Y2K.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --nero: #000000;
  --bianco: #FFFFFF;
  --lime: #C2FA2E;
  --fucsia: #FF2E9C;
  --azzurro: #AFC9EC;
  --argento: #C7CDD6;

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Futuro Y2K', 'Arial Black', sans-serif;

  --container: 1280px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --section-gap: clamp(5rem, 12vw, 10rem);

  /* Typography fluida */
  --fs-h2: clamp(2.2rem, 5.5vw, 4.5rem);
  --fs-lexicon: clamp(1.7rem, 5.5vw, 4rem);
  --fs-body: clamp(0.95rem, 1.3vw, 1.1rem);

  /* Texture di tela: due diagonali leggerissime, per il fondo scuro generico */
  --weave:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px);

  /* Texture materica (fotografia di tessuto), usata come "grana" sulle
     superfici fucsia/lime tramite background-blend-mode */
  --fabric-tex: url('../assets/texture-materica.jpg');

  /* Dimensione base delle toppe trascinabili: regolabile dal pannello
     impostazioni (js/main.js la riscrive su :root) */
  --patch-size: 340px;
}

/* ---------- Reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* compensa la nav sugli anchor link */
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font);
  background-color: var(--nero);
  background-image: var(--weave);
  color: var(--bianco);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* Testo presente per screen reader/SEO ma non mostrato a video
   (usato per l'headline della hero, "scritta" nel tessuto ricamato) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus states accessibili */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- Utility ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section-gap); }

/* Lime materico: fotografia di tessuto sovrapposta in overlay al colore
   pieno, per una superficie che "respira" invece di un piatto lime */
.section--green {
  background-color: var(--lime);
  background-image: var(--fabric-tex);
  background-size: 340px;
  background-blend-mode: overlay;
}

/* Titolino-toppa: chip pieno fucsia, invece del vecchio testo arancio su
   trasparente — più visibile e leggibile identicamente su sfondi chiari e
   scuri, con una leggera rotazione "cucita a mano" come i fumetti/toppe del
   resto del sito (niente più bordo tratteggiato interno, tolto su richiesta). */
.section__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nero);
  background-color: var(--fucsia);
  padding: 0.6em 1.35em;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: rotate(-1.6deg);
}

/* Titoli display in Futuro Y2K: font tecno/blocky, già leggibile in minuscolo/misto */
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.05;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.br-desktop { display: none; }
@media (min-width: 768px) { .br-desktop { display: inline; } }

/* Elementi animati: visibili di default (no-JS friendly);
   lo stato iniziale lo imposta GSAP via JS. */
.reveal { will-change: transform, opacity; }

/* ---------- Divisori di sezione ----------
   Bordi tra sezioni non più netti/dritti ma ritagliati in forme diverse
   (zigzag da forbici dentellate, smerlo, strappo, onda morbida), uno per
   transizione, tutti diversi tra loro. Non sono più una toppa di colore
   piatto sopra lo sfondo: ogni divisore è ritagliato (clip-path) nello
   stesso sfondo reale (colore + sfumatura + texture) della sezione in cui
   "entra", quindi la cucitura seghettata stacca lo sfondo invece di
   aggiungere una striscia di tinta estranea che non si intona con nessuna
   delle due sezioni. */
.section-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 3;
  pointer-events: none;
  display: block;
}

/* Entra nell'approccio: stesso viola + velatura + tessuto della sezione.
   La sfumatura è "alta" quanto una sezione vera (background-size verticale
   molto maggiore dei ~44px del divisore, ancorata in cima): così il
   divisore mostra solo la fetta iniziale della sfumatura, quasi piatta,
   come farebbe la sezione reale in quel punto — non l'intero passaggio
   rosa→lime compresso in 44px, che risultava molto più "acceso" e quindi
   riconoscibile come toppa a sé. drop-shadow ripete il riempimento appena
   fuori dal contorno ritagliato per coprire la sfumatura verde/lime che il
   filtro anti-aliasing del clip-path lascia trasparire sullo sfondo sotto. */
.section-divider--approccio {
  clip-path: polygon(0.000% 100.000%, 0.000% 37.857%, 3.847% 42.679%, 7.694% 58.750%, 11.542% 38.571%, 15.382% 40.357%, 19.229% 43.929%, 23.076% 26.071%, 26.924% 40.536%, 30.771% 45.714%, 34.618% 52.857%, 38.458% 22.143%, 42.306% 31.429%, 46.153% 21.964%, 50.000% 53.571%, 53.847% 48.571%, 57.694% 19.821%, 61.542% 61.250%, 65.382% 60.536%, 69.229% 46.786%, 73.076% 45.000%, 76.924% 25.000%, 80.771% 18.571%, 84.618% 41.250%, 88.458% 20.536%, 92.306% 26.429%, 96.153% 28.571%, 100.000% 19.286%, 100.000% 100.000%);
  background-color: #241243;
  background-image:
    /* sfuma le punte del seghettato verso il nero della hero, invece di un
       taglio netto nero→viola: la cucitura si "scioglie" nello sfondo
       invece di leggersi come un contorno vettoriale rigido */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 65%),
    linear-gradient(135deg, rgba(255, 46, 156, 0.22) 0%, rgba(175, 201, 236, 0.12) 45%, rgba(194, 250, 46, 0.16) 100%),
    var(--weave);
  /* var(--weave) è a sua volta due layer (due repeating-linear-gradient
     incrociati): il totale è 4 layer, non 3 — le liste sotto vanno
     allineate 1:1, altrimenti CSS ricicla dall'inizio e disallinea proprio
     i due strati del tessuto (uno perderebbe repeat e dimensione). */
  background-size: 100% 100%, 160% 900px, auto, auto;
  background-position: top, top, top, top;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  filter: drop-shadow(0 0 1.5px #241243);
}

/* Entra nei servizi: stesso denim della sezione */
.section-divider--servizi {
  clip-path: polygon(0.000% 100.000%, 0.000% 54.833%, 3.569% 55.833%, 7.146% 53.333%, 10.715% 18.667%, 14.285% 40.500%, 17.854% 33.167%, 21.431% 37.833%, 25.000% 20.667%, 28.569% 23.333%, 32.146% 34.167%, 35.715% 24.500%, 39.285% 34.500%, 42.854% 16.000%, 46.431% 18.667%, 50.000% 45.500%, 53.569% 33.167%, 57.146% 37.000%, 60.715% 46.500%, 64.285% 30.500%, 67.854% 17.500%, 71.431% 48.667%, 75.000% 40.333%, 78.569% 43.333%, 82.146% 41.667%, 85.715% 56.667%, 89.285% 30.667%, 92.854% 47.667%, 96.431% 30.833%, 100.000% 39.667%, 100.000% 100.000%);
  background-color: #1c2430;
  background-image: url('../assets/sfondo-jeans.webp');
  background-size: cover;
  background-position: center;
  filter: drop-shadow(0 0 1.5px #1c2430);
}

/* Entra nella partnership: stesso lime + grana di tessuto */
.section-divider--partnership {
  clip-path: polygon(0.000% 100.000%, 0.000% 51.250%, 4.549% 24.250%, 9.090% 48.500%, 13.639% 58.750%, 18.181% 58.500%, 22.729% 43.750%, 27.271% 49.000%, 31.819% 37.000%, 36.361% 44.250%, 40.910% 25.000%, 45.451% 51.500%, 50.000% 47.750%, 54.549% 33.000%, 59.090% 37.500%, 63.639% 53.750%, 68.181% 40.500%, 72.729% 64.250%, 77.271% 64.750%, 81.819% 58.500%, 86.361% 24.250%, 90.910% 23.500%, 95.451% 33.250%, 100.000% 36.500%, 100.000% 100.000%);
  background-color: var(--lime);
  background-image: var(--fabric-tex);
  background-size: 340px;
  background-blend-mode: overlay;
  filter: drop-shadow(0 0 1.5px var(--lime));
}

/* ---------- Forme fluttuanti ----------
   Decorazioni Y2K (Forme 1-5) sparse per il sito: bobbing verticale +
   rotazione lenta indipendente, usando le proprietà transform individuali
   (translate/rotate) così le due animazioni non si sovrascrivono a vicenda.
   Ogni istanza imposta posizione/dimensione/velocità via custom property
   inline, stesso pattern delle toppe (--x/--y) e dei puntini diversity. */
.floaty {
  position: absolute;
  z-index: 1;
  width: var(--fw, 90px);
  opacity: var(--fo, 0.85);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
  animation: floatyBob var(--fdur, 7s) ease-in-out infinite, floatySpin var(--fspin, 26s) linear infinite;
  animation-delay: var(--fdelay, 0s);
}

@keyframes floatyBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--ffloat, -18px); }
}

@keyframes floatySpin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

/* ---------- Bottoni ---------- */
/* Ogni bottone è una piccola "toppa" cucita sul tessuto: pillola piena.
   Colore pieno, senza grana di tessuto né bordo tratteggiato interno
   (entrambi tolti su richiesta da tutti i CTA). */
.btn {
  position: relative;
  display: inline-block;
  padding: 1.05em 2.3em;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.btn--primary {
  background-color: var(--fucsia);
  color: var(--nero);
}

.btn--primary:hover {
  background-color: var(--bianco);
  transform: translateY(-2px);
}

.btn--big { font-size: 1.05rem; padding: 1.15em 2.5em; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
}

/* Su mobile la barra si scurisce allo scroll; su desktop il menu
   e' una pillola flottante sempre con sfondo, quindi non serve.
   Lo sfondo/blur vive in un ::before invece che direttamente su .nav:
   un backdrop-filter sull'elemento stesso creerebbe un nuovo
   "containing block" per i discendenti position:fixed, intrappolando
   il menu mobile a schermo intero (.nav__menu, anch'esso fixed) dentro
   l'altezza della sola barra di navigazione invece di coprire tutta
   la pagina. */
@media (max-width: 767px) {
  .nav {
    position: fixed; /* ridondante ma esplicito: .nav__menu dipende dal fatto che qui non ci sia altro containing block */
  }

  .nav.is-scrolled::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.1rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav__logo img {
  width: clamp(120px, 14vw, 160px);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}

/* Hamburger (solo mobile) */
.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  z-index: 110;
}

.nav__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--bianco);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

.nav__menu {
  position: fixed;
  inset: 0 0 0 0;
  background: rgba(0, 0, 0, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.nav__menu.is-open { opacity: 1; visibility: visible; }

.nav__menu li { flex-shrink: 0; }

.nav__menu a {
  position: relative;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* Sottolineatura che si apre da sinistra al passaggio del mouse (non sulla
   pillola CTA, che ha già il suo hover pieno) */
.nav__menu a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.2em;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.nav__menu a:not(.nav__cta):hover::after { transform: scaleX(1); }

.nav__menu a:hover { color: var(--fucsia); }

/* Pillola "Consulenza gratuita": pieno fucsia piatto, senza cuciture
   tratteggiate né grana di tessuto (entrambe tolte su richiesta) */
.nav__cta {
  color: var(--nero);
  background-color: var(--fucsia);
  padding: 0.65em 1.6em;
  border-radius: 999px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav__menu a.nav__cta:hover { background-color: var(--bianco); background-image: none; color: var(--nero); }

@media (min-width: 768px) {
  .nav__toggle { display: none; }

  /* Menu flottante centrato: una pillola di tessuto (niente più bordo
     tratteggiato interno, tolto su richiesta) */
  .nav__menu {
    position: fixed;
    inset: auto;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: 1.9rem;
    padding: 0.8rem 1.8rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    opacity: 1;
    visibility: visible;
  }

  .nav__menu a { font-size: 0.8rem; }

  .nav__cta { padding: 0.55em 1.3em; }
}

/* Fascia intermedia (tablet landscape / laptop stretto): la pillola si
   restringe per non sovrapporsi al logo, ancora largo a queste dimensioni */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav__menu { gap: 0.75rem; padding: 0.55rem 1rem; }
  .nav__menu a { font-size: 0.6rem; }
  .nav__cta { padding: 0.5em 0.85em; }
}

/* ==========================================================================
   1. HERO — texture velcro a tutto schermo + headline a nastro curvo
   ========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  text-align: center;
  /* fondo di riserva: visibile nelle fasce di "contain" sugli schermi molto
     stretti, intonato al velcro blu-notte così non stacca */
  background-color: #1e2733;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1e2733;
}

/* Immagine di riserva: sempre presente, resta visibile finché (e se) il
   terminale WebGL non la ricopre — se JS/WebGL non sono disponibili resta
   lei lo sfondo, la pagina è comunque completa */
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Terminale FaultyTerminal (WebGL/ogl): il canvas viene creato via JS e
   appeso qui dentro, a piena dimensione */
.hero__terminal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__terminal canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Scurimento agli estremi: il nastro curvo (al centro) resta ben leggibile,
   nav sopra e CTA sotto restano leggibili sulla texture */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.08) 24%,
    rgba(0, 0, 0, 0.08) 68%,
    rgba(0, 0, 0, 0.65) 100%);
}

/* La CTA resta nella fascia bassa della sezione, ma abbastanza in alto da
   non toccare mai l'indicatore di scroll; il resto, dove scorre il
   nastro curvo, rimane completamente libero */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--pad) clamp(8.5rem, 20vh, 12rem);
}

/* Su mobile il bottone risultava grande (va spesso su due righe) e basso,
   quasi a ridosso dello scroll: qui più piccolo e più in alto */
@media (max-width: 767px) {
  .hero__content { padding-bottom: clamp(10.5rem, 26vh, 14rem); }

  .hero .btn { font-size: 0.78rem; padding: 1.15em 1.7em; }
}

/* Il CTA dopo i servizi (.btn semplice) e quello finale "Scrivici"
   (.btn--big) su mobile avevano altezze diverse: qui uniformati, il
   secondo prende le stesse misure del --big */
@media (max-width: 767px) {
  .section-cta .btn { font-size: 1.05rem; padding: 1.15em 2.5em; }
}

/* ---------- Nastro di testo curvo (sostituisce il video/headline ricamata) ---------- */
.hero__loop {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--pad);
  pointer-events: none;
}

/* Su mobile le due bande, perfettamente orizzontali, occupavano solo una
   fascia stretta a metà schermo. Ruotando l'intero blocco (le due bande
   insieme, non l'una indipendente dall'altra: restano allineate tra loro)
   il nastro attraversa lo schermo in diagonale, coprendo più superficie
   verso gli angoli invece di restare confinato al centro. */
@media (max-width: 767px) {
  .hero__loop { transform: rotate(-7deg); }
}

/* Il font-size mobile (175px) ravvicina troppo le due bande: la distanza
   tra i due path SVG resta fissa (sono le stesse coordinate del desktop),
   ma un testo così grande finisce per sovrapporsi. Le allontaniamo qui via
   transform sui due "jacket", senza toccare i path. */
@media (max-width: 767px) {
  #heroCurvedLoop { transform: translateY(-32px); }
  #heroCurvedLoop2 { transform: translateY(32px); }
}

.curved-loop-jacket {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  /* Lo scroll verticale resta sempre del browser: il nastro si trascina solo
     in orizzontale, quindi un dito che scorre sulla hero non viene mai
     "rubato" dal trascinamento. */
  touch-action: pan-y;
}

.curved-loop-svg {
  width: 100%;
  aspect-ratio: 100 / 26;
  overflow: visible;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  fill: var(--bianco);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  /* Valore fisso, non clamp()/vw: il testo vive dentro l'SVG (viewBox
     1440x220) che si ridimensiona già da solo con width:100%, quindi un
     font-size in vw viene "scalato due volte" (una dal vw, una dal
     ridimensionamento dell'SVG stesso) — su mobile il container è molto
     più stretto di 1440px, quindi il doppio effetto rimpiccioliva il
     nastro fino a renderlo illeggibile. Un valore fisso nelle unità
     dell'SVG segue automaticamente, in modo lineare e corretto, la
     larghezza reale del contenitore. */
  font-size: 92px;
}

/* Secondo nastro, fucsia: stesso font/dimensione, si intreccia al primo */
.curved-loop-svg--pink { fill: var(--fucsia); }

/* Su mobile il valore fisso sopra resta comunque proporzionalmente più
   piccolo (segue linearmente la larghezza, molto più stretta): qui lo
   spingiamo più su del rapporto lineare per farlo leggere meglio anche
   sugli schermi piccoli — lasciavano ancora troppo vuoto sopra/sotto,
   quindi ulteriormente ingrandito. */
@media (max-width: 767px) {
  .curved-loop-svg { font-size: 175px; }
}

/* Le due forme decorative della hero: su mobile la sezione è molto più
   alta che larga (100svh su schermo stretto) e le due bande di testo
   curvo occupano solo la fascia centrale, lasciando molto vuoto sopra e
   sotto. Qui le forme diventano più grandi e si spostano per presidiare
   quello spazio (una in alto, una appena sotto le bande) invece di
   restare relegate agli angoli come su desktop. !important perché la
   posizione/dimensione base è impostata inline (style="--fw;top;left…"),
   più specifica di una regola di classe. */
@media (max-width: 767px) {
  .hero__floaty--a {
    --fw: 190px !important;
    top: 11% !important;
    left: 8% !important;
    right: auto !important;
    bottom: auto !important;
  }
  .hero__floaty--b {
    --fw: 115px !important;
    top: 55% !important;
    right: 10% !important;
    left: auto !important;
    bottom: auto !important;
  }
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

@media (max-width: 767px) {
  .hero__scroll { bottom: 2.75rem; }
}

/* Linea a punto-avanti tratteggiata, come un filo che pende */
.hero__scroll-line {
  width: 1px;
  height: 44px;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0 4px, transparent 4px 8px);
  overflow: hidden;
  position: relative;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fucsia);
  transform: translateY(-100%);
  animation: scrollHint 2.2s ease-in-out infinite;
}

@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

.hero__scroll-label {
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ==========================================================================
   2. APPROCCIO
   ========================================================================== */
.approccio__intro {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.1;
  max-width: 16em;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.approccio__body {
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.7;
  max-width: 44em;
  opacity: 0.88;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* La sezione approccio chiude piu' compatta verso i servizi */
.approccio.section { padding-bottom: clamp(4.5rem, 9vw, 7rem); }

/* Sfondo più chiaro del nero pieno del body: la sezione risultava troppo
   cupa, questo verde-antracite tenue la schiarisce mantenendo il tono scuro */
/* Viola profondo (lo stesso dello sfondo hero, per continuità) velato di
   fucsia/azzurro/lime: sostituisce il vecchio verde-antracite piatto */
.approccio {
  position: relative;
  overflow: hidden;
  background-color: #241243;
  background-image:
    linear-gradient(135deg, rgba(255, 46, 156, 0.22) 0%, rgba(175, 201, 236, 0.12) 45%, rgba(194, 250, 46, 0.16) 100%),
    var(--weave);
}

.approccio > .container { position: relative; z-index: 2; }

/* Il fondo sfuma verso il nero appena prima del bordo seghettato: il denim
   dei servizi, rivelato dal ritaglio, non spunta più di colpo a piena
   luce/dettaglio — l'occhio ci arriva già "in ombra" */
.approccio::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

.lexicon {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 4vw, 2.8rem);
}

.lexicon__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.6em;
  font-size: var(--fs-lexicon);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* La parola "vecchia" viene barrata on-scroll da un punto-avanti tratteggiato
   (come se un filo la scucisse): la linea è ::after, GSAP anima la variabile
   --strike (0 → 1) che ne controlla la scaleX. Default 1: senza JS la
   barratura è comunque visibile. */
.lexicon__old {
  --strike: 1;
  position: relative;
  color: rgba(255, 255, 255, 0.38);
}

.lexicon__old::after {
  content: '';
  position: absolute;
  left: -2%;
  top: 52%;
  width: 104%;
  height: 0.09em;
  background-image: repeating-linear-gradient(90deg, var(--fucsia) 0 10px, transparent 10px 18px);
  transform: scaleX(var(--strike));
  transform-origin: left center;
}

.lexicon__arrow {
  color: var(--fucsia);
  font-size: 0.6em;
  font-weight: 400;
}

.lexicon__new { color: var(--bianco); }

/* Su mobile la parola nuova capitava a volte in fondo alla riga tagliata
   invece che andare a capo: qui la mandiamo sempre a capo (riga propria),
   invece di lasciarlo al wrap "naturale" del flex */
@media (max-width: 767px) {
  .lexicon__new { flex-basis: 100%; }
}

/* ==========================================================================
   3. SERVIZI — toppe ricamate trascinabili su un pannello di tessuto
   ========================================================================== */
/* Stesso trattamento materico della sezione partnership (fotografia di
   fotografia di denim invece della texture di tessuto generica) */
.servizi {
  position: relative;
  background-color: #1c2430;
  background-image: url('../assets/sfondo-jeans.webp');
  background-size: cover;
  background-position: center;
}

.servizi > .container { position: relative; z-index: 2; }

/* Titolo e fumetto affiancati: titolo a sinistra, fumetto a destra (va a
   capo sotto il titolo sugli schermi stretti) */
.servizi__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

.servizi__title { margin-bottom: 0; }

/* ---------- Fumetto "Attacca e stacca" ---------- */
.comic-bubble {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  align-self: flex-end;
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1;
  padding: 0.75em 1.5em;
  border-radius: 26px;
  /* niente border-bottom: è lì che si agganciava la codina, creando una
     lineetta netta all'incontro tra corpo del fumetto e triangolo */
  border: 2px solid var(--nero);
  border-bottom: 0;
  /* alterna le due inclinazioni di netto, a scatto — non una transizione
     morbida da una all'altra */
  animation: bubbleWobble 2.6s linear infinite;
}

@keyframes bubbleWobble {
  0%, 49.9% { transform: rotate(-5deg); }
  50%, 100% { transform: rotate(1.5deg); }
}

/* coda del fumetto: due triangoli sovrapposti (nero + bianco) per
   simulare un bordo sulla punta, stessa tecnica dei balloon a fumetti.
   Senza border-bottom sul corpo, l'attacco resta pulito. */
.comic-bubble::before,
.comic-bubble::after {
  content: '';
  position: absolute;
  left: 28px;
  border: 11px solid transparent;
  border-bottom: 0;
}

.comic-bubble::before {
  bottom: -11px;
  border-top-color: var(--nero);
}

.comic-bubble::after {
  bottom: -8px;
  left: 30px;
  border-width: 9px;
  border-top-color: var(--bianco);
}

/* ---------- Pannello "velcro" ----------
   Un riquadro con la foto della superficie in velcro dove le toppe
   possono essere prese e riattaccate ovunque col mouse (o col dito su
   touch), come se si stessero strappando e riattaccando per davvero. Il
   trascinamento e l'effetto attacca/stacca sono gestiti in js/main.js;
   qui solo l'aspetto e i vincoli di base. La dimensione delle toppe è una
   custom property (--patch-size) regolabile dal pannello impostazioni. */
/* Niente sfondo proprio: si vede il jeans della sezione, l'area di gioco
   è delimitata da un bordo tratteggiato color argento (più marcato del
   filo bianco quasi invisibile di prima, per far leggere subito i confini
   dove si possono trascinare le toppe) */
.patches {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  height: clamp(560px, 68vw, 780px);
  border-radius: 22px;
  outline: 2px dashed var(--argento);
  outline-offset: -14px;
}

.patch {
  position: absolute;
  left: var(--x, 10%);
  top: var(--y, 10%);
  /* --patch-scale: moltiplicatore per singola toppa (es. "Sviluppo web",
     visivamente più piccola perché lo shape stretto lascia più margine
     trasparente ai lati) */
  width: min(calc(var(--patch-size, 340px) * var(--patch-scale, 1)), 46vw);
  transform: rotate(var(--r, 0deg));
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
  transition: filter 0.25s ease, transform 0.25s ease;
  /* profondità per la rotazione 3D del tilt (applicata via JS sul canvas figlio) */
  perspective: 460px;
}

/* Su schermi stretti il tetto di 46vw resta comunque troppo largo: 3
   toppe affiancate (posizionate in percentuale, pensate per un pannello
   ampio) finiscono per accavallarsi parecchio. Un tetto più basso le
   rimpicciolisce quel tanto che basta perché la disposizione di partenza
   resti leggibile (restano comunque trascinabili e ridimensionabili
   spostandole). */
@media (max-width: 560px) {
  /* 30vw le rendeva minuscole e poco leggibili: ingrandite a 42vw */
  .patch { width: min(calc(var(--patch-size, 340px) * var(--patch-scale, 1)), 42vw); }

  /* Sotto i 560px l'altezza minima di 560px (pensata per un pannello largo)
     non si riduceva mai: le due "righe" di toppe (--y intorno a 4-10% e a
     50-54%) finivano lontanissime tra loro, con un vuoto enorme in mezzo.
     Qui l'altezza segue davvero la larghezza dello schermo (un po' più
     alta del 100vw base per lasciare spazio alle toppe più grandi sopra). */
  .patches { height: clamp(420px, 120vw, 560px); }

  /* Sviluppo web è la toppa più stretta/allungata: al tetto comune di 42vw
     risultava un po' troppo ingombrante rispetto alle altre, qui un tetto
     leggermente più basso solo per lei */
  [data-patch="sviluppo"] { width: min(calc(var(--patch-size, 340px) * var(--patch-scale, 1)), 36vw) !important; }
}

.patch img,
.patch canvas {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.patch:not(.has-gl):hover { filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55)); }

/* Quando l'effetto WebGL è attivo, l'ombra dinamica (statica → sollevata)
   è disegnata direttamente sul canvas via JS: il wrapper .patch non deve
   applicarne una propria, altrimenti si sommerebbero */
.patch.has-gl { filter: none; }

.patch.is-dragging {
  z-index: 20;
  transition: none;
}

/* ==========================================================================
   4. THE FEED — reel dei clienti dentro un vecchio telefono
   ========================================================================== */
.feed {
  position: relative;
  overflow: hidden;
  background-color: #1a1220;
}

.feed__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 10, 28, 0.78) 0%, rgba(18, 10, 28, 0.5) 45%, rgba(18, 10, 28, 0.82) 100%);
}

.feed__layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  flex-wrap: wrap;
  padding-block: clamp(1rem, 3vw, 2rem) 0;
}

.feed__intro {
  flex: 1 1 320px;
  max-width: 30em;
}

.feed__title {
  margin-bottom: 0;
  color: var(--bianco);
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 46, 156, 0.85),
    0 0 44px rgba(255, 46, 156, 0.5);
}

.feed__stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  flex: 0 1 auto;
}

/* ---------- Il telefono: cornice sopra, video incastrato esattamente nel
   buco trasparente dello schermo (coordinate misurate sul PNG sorgente) ---------- */
.feed__phone {
  position: relative;
  width: clamp(340px, 32vw, 540px);
  flex-shrink: 0;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.55));
}

.feed__phone-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

.feed__screen {
  position: absolute;
  left: 13.51%;
  top: 14.52%;
  width: 73.94%;
  height: 70.47%;
  overflow: hidden;
  background: var(--nero);
  border-radius: 2.5%;
  z-index: 1;
}

.feed__screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Controlli: freccette su/giù per navigare, volume al centro ---------- */
.feed__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.feed__nav-btn {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--bianco);
  font-size: 1.3rem;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.feed__nav-btn:hover {
  background: var(--fucsia);
  color: var(--nero);
  transform: scale(1.08);
}

.feed__volume-btn {
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--bianco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.feed__volume-btn:hover { border-color: var(--fucsia); color: var(--fucsia); }

.feed__volume-icon { width: 20px; height: 20px; fill: currentColor; }

.feed__volume-icon--on { display: none; }
.feed__volume-btn[aria-pressed="true"] .feed__volume-icon--off { display: none; }
.feed__volume-btn[aria-pressed="true"] .feed__volume-icon--on { display: block; }

@media (max-width: 640px) {
  .feed__controls { flex-direction: row; }
}

/* ==========================================================================
   5. CHI SIAMO
   ========================================================================== */
/* Grigio scuro invece del nero pieno del body: meno cupo */
.chi-siamo {
  position: relative;
  overflow: hidden;
  background-color: #1a1a1a;
}

.chi-siamo__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.chi-siamo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 8, 0.72) 0%, rgba(10, 8, 8, 0.55) 50%, rgba(10, 8, 8, 0.8) 100%);
}

.chi-siamo__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 60rem;
}

.chi-siamo .section__title { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.chi-siamo__desc {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.7;
  max-width: 34em;
  margin-inline: auto;
  opacity: 0.9;
}

/* ---------- Striscia "diversità" ----------
   Piccoli nodi (come nodi francesi di filo), stessa forma ma tonalità
   diverse: la varietà dentro un'identità condivisa, come le persone del
   team. Ognuno fluttua su e giù per conto proprio (durata, ritardo e
   ampiezza diversi per ciascuno, per un movimento che sembri casuale e
   non sincronizzato). Decorativa: aria-hidden nel markup. */
.diversity {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  display: flex;
  justify-content: center;
}

.diversity__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Gap minimo: i nodi restano fitti come perle su un filo, senza vuoti */
.diversity__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.4rem, 1.2vw, 0.7rem);
}

.diversity__punto {
  width: clamp(24px, 3.2vw, 36px);
  flex-shrink: 0;
  animation: puntoFloat 3s ease-in-out infinite;
}

@keyframes puntoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--float, -6px)); }
}

.diversity__punto--a { animation-duration: 2.3s; animation-delay: -0.2s; --float: -7px; }
.diversity__punto--b { animation-duration: 3.1s; animation-delay: -1.4s; --float: -5px; }
.diversity__punto--c { animation-duration: 2.7s; animation-delay: -0.6s; --float: -9px; }
.diversity__punto--d { animation-duration: 3.4s; animation-delay: -2.1s; --float: -6px; }
.diversity__punto--e { animation-duration: 2.5s; animation-delay: -1.0s; --float: -8px; }
.diversity__punto--f { animation-duration: 3.0s; animation-delay: -0.3s; --float: -5px; }
.diversity__punto--g { animation-duration: 2.9s; animation-delay: -1.8s; --float: -7px; }
.diversity__punto--h { animation-duration: 3.3s; animation-delay: -0.9s; --float: -6px; }

.diversity__punto--a circle { fill: var(--fucsia); }
.diversity__punto--b circle { fill: var(--lime); }
.diversity__punto--c circle { fill: none; stroke: var(--argento); stroke-width: 2; opacity: 0.8; }
.diversity__punto--d circle { fill: var(--azzurro); opacity: 0.9; }
.diversity__punto--e circle { fill: var(--fucsia); opacity: 0.7; }
.diversity__punto--f circle { fill: none; stroke: var(--fucsia); stroke-width: 2; }
.diversity__punto--g circle { fill: var(--lime); opacity: 0.85; }
.diversity__punto--h circle { fill: none; stroke: var(--azzurro); stroke-width: 1.6; opacity: 0.55; }

/* ---------- CTA di sezione (dopo servizi) ---------- */
.section-cta {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

/* ==========================================================================
   6. PARTNERSHIP
   ========================================================================== */
/* Sezione più compatta: padding ridotto rispetto al default */
/* Sfondo ora lime pieno (molto chiaro): il testo passa a nero per il
   contrasto, il bianco usato altrove sopra il vecchio verde scuro qui
   sparirebbe */
.partnership.section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem);
  color: var(--nero);
}

.partnership.section > .container { position: relative; z-index: 2; text-align: center; }

/* .section__label è inline-flex (si stringe al contenuto): per centrarla
   serve renderla un blocco con margini automatici, non basta text-align —
   ma un display:flex block-level si allargherebbe a tutto il container,
   quindi width:fit-content per restare stretta al contenuto */
.partnership .section__label { display: flex; width: fit-content; margin-inline: auto; }

/* Stesso principio della sfumatura in fondo all'approccio: il lime scivola
   verso il nero appena prima del bordo seghettato, il nero pieno dei
   contatti non appare più di netto */
.partnership.section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
  pointer-events: none;
}

.partnership__logos {
  margin-top: clamp(1.2rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 2rem);
}

/* Ogni partner è una vera foto di toppa ricamata (già fornita così): niente
   più card colorata attorno, solo l'immagine con un'ombra e una leggera
   rotazione, come lasciata sulla tela — coerente con le toppe di "Servizi". */
.partner {
  position: relative;
  flex: 1 1 240px;
  max-width: 300px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1rem;
}

.partner--photo img {
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4));
}

/* Ogni toppa alterna a scatto tra due inclinazioni leggermente diverse
   (non una transizione morbida) — durate diverse per non essere
   sincronizzate tra loro */
.partner--photo:nth-of-type(1) { animation: partnerWobbleA 2.8s linear infinite; }
.partner--photo:nth-of-type(2) { animation: partnerWobbleB 3.2s linear infinite; }

@keyframes partnerWobbleA {
  0%, 49.9% { transform: rotate(-4.5deg); }
  50%, 100% { transform: rotate(1deg); }
}

@keyframes partnerWobbleB {
  0%, 49.9% { transform: rotate(1deg); }
  50%, 100% { transform: rotate(4.5deg); }
}

/* Toppa vuota, ancora da ricamare: solo il bordo tratteggiato circolare,
   nessun tessuto — un invito esplicito a "riempirla" diventando partner */
.partner--cta {
  width: 170px;
  height: 170px;
  max-width: 170px;
  flex: 0 0 auto;
  /* testo e freccia più vicini: il gap ereditato da .partner (0.9rem) è
     pensato per logo+didascalia, qui serve molto meno spazio */
  gap: 0.15rem;
  background: transparent;
  border: 1.5px dashed rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  transform: rotate(-2deg);
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.partner--cta:hover,
.partner--cta:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  border-color: var(--fucsia);
  background-color: rgba(0, 0, 0, 0.06);
}

.partner__cta-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.15;
  text-align: center;
}

.partner__cta-arrow {
  display: inline-block;
  color: var(--fucsia);
  font-size: 2.6rem;
  line-height: 1;
}

.partner img {
  max-width: 100%;
  max-height: 105px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner__role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ==========================================================================
   7. CONTATTI — fotografia di tessuto verde a piena sezione
   ========================================================================== */
.contatti {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(7rem, 18vw, 14rem);
}

.contatti__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contatti__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.68) 100%);
}

.contatti__content { position: relative; z-index: 2; }

.contatti__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.05;
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.contatti__sub {
  opacity: 0.9;
  max-width: 34em;
  margin: 0 auto 2.6rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--nero);
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  padding-block: 3rem;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}

.footer__logo { width: 150px; height: auto; }

.footer__info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer__legal {
  font-size: 0.72rem;
  opacity: 0.45;
  letter-spacing: 0.03em;
}

.footer__copy {
  font-size: 0.75rem;
  opacity: 0.55;
  letter-spacing: 0.05em;
}

.footer__copy a {
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.85;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.footer__copy a:hover { color: var(--fucsia); opacity: 1; }

@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   CURSORE CUSTOM — freccia bianca pixelata, che diventa una manina bianca
   sugli elementi cliccabili. Due cursori statici applicati via CSS, niente
   più inseguimento JS del mouse.
   ========================================================================== */
html {
  cursor: url('../assets/cursor-white.png') 2 2, auto;
}

a, button, input, select, textarea, [role="button"],
.patch, .patch.is-dragging,
.nav__toggle, .cookie-banner__btn, .footer__cookie-manage {
  cursor: url('../assets/cursor-white-click.png') 11 2, pointer;
}

/* ==========================================================================
   BANNER COOKIE
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  padding: 1.1rem var(--pad) calc(1.1rem + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 10, 0.97);
  border-top: 1.5px dashed rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.cookie-banner[hidden] {
  display: block; /* resta nel DOM per l'animazione di uscita */
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
}

.cookie-banner__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
}

.cookie-banner__text {
  flex: 1 1 420px;
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0;
}

.cookie-banner__text a { text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__text a:hover { color: var(--fucsia); }

.cookie-banner__actions {
  display: flex;
  gap: 0.7rem;
  flex-shrink: 0;
}

.cookie-banner__btn {
  padding: 0.65em 1.4em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.cookie-banner__btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: var(--bianco);
}

.cookie-banner__btn--ghost:hover { border-color: var(--bianco); }

.cookie-banner__btn--primary {
  background: var(--fucsia);
  border: 1.5px solid var(--fucsia);
  color: var(--nero);
}

.cookie-banner__btn--primary:hover { background: var(--bianco); border-color: var(--bianco); }

/* Link "Gestisci cookie" nel footer: stessa resa di un link ma è un
   <button>, per poter riaprire il banner senza ricaricare la pagina */
.footer__cookie-manage {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  opacity: 0.85;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.footer__cookie-manage:hover { color: var(--fucsia); opacity: 1; }

@media (max-width: 640px) {
  .cookie-banner__inner { justify-content: center; text-align: center; }
  .cookie-banner__actions { width: 100%; justify-content: center; }
}