/* ═══════════════════════════════════════════════════════════════════════
   BOOK A VIBE — FONDAMENTA CONDIVISE
   Un solo foglio per le due facce del prodotto.
   Qui c'è tutto ciò che non cambia fra il lato personale e il lato
   business: reset, scala tipografica, bottoni, nav, sezioni, footer.
   Il *colore* invece non vive qui: ogni pagina definisce i propri token
   semantici (--bg, --tx, --accent...) e questo foglio li consuma e basta.
   Così la stessa nav diventa chiara su una pagina e scura sull'altra
   senza una riga di CSS duplicata.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Token di marca: identici ovunque, sono il brand ────────────────── */
:root {
  --indigo:      #4C3FD4;
  --indigo-lift: #6F62EE;   /* la variante che regge su fondo scuro */
  --lime:        #A8E63D;
  --lime-dark:   #93CF28;
  --ink:         #0A0A0E;
  --ink-2:       #13131B;
  --ink-3:       #1D1D28;
  --paper:       #FFFFFF;
  --paper-2:     #F6F5F1;   /* la stessa crema del gestionale */

  /* ritmo verticale — passo di 4px come da Material */
  --s1: .5rem;  --s2: .75rem; --s3: 1rem;   --s4: 1.5rem;
  --s5: 2rem;   --s6: 3rem;   --s7: 4rem;   --s8: 6rem;

  --band-y: clamp(4.5rem, 9vw, 7.5rem);   /* aria fra una sezione e l'altra */
  /* Aria fra due sezioni dello *stesso* blocco: poco più della metà.
     Se resta uguale a --band-y il blocco si sfalda — due sezioni lontane
     come se il fondo cambiasse, ma senza il cambio di fondo a dirlo. */
  --band-y-tight: calc(var(--band-y) * .55);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --maxw:   1180px;
  --maxw-narrow: 760px;

  /* scala tipografica */
  --fs-display: clamp(2.7rem, 6vw, 4.6rem);
  --fs-h2:      clamp(1.9rem, 3.8vw, 3rem);
  --fs-h3:      1.1rem;
  --fs-lede:    clamp(1.02rem, 1.35vw, 1.18rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-micro:   .75rem;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .22s;

  /* z-index: una scala sola, dichiarata una volta */
  --z-nav: 100;  --z-menu: 99;  --z-skip: 200;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;   /* la nav fissa non deve coprire l'ancora */
}

body {
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  background: var(--bg);
  color: var(--tx);
  /* `clip` e non `hidden`: hidden farebbe del body un contenitore di
     scorrimento, e un contenitore di scorrimento rompe `position: sticky`
     nei discendenti — cioè il filmato appiccicato dietro alla hero. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

/* Lo stile d'autore batte quello del browser: senza questa riga un
   elemento con [hidden] resterebbe visibile ovunque gli si sia dato
   un display esplicito (flex, grid…). */
[hidden] { display: none !important; }

/* Icone: un solo sprite in cima al body, richiamato con <use>.
   Tratto e colore stanno qui, così i simboli restano solo geometria. */
.ico {
  width: var(--ico, 20px); height: var(--ico, 20px);
  flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ico--sm { --ico: 16px; stroke-width: 2.2; }
.ico--lg { --ico: 24px; }
.ico--xl { --ico: 28px; stroke-width: 1.5; }
.ico--fill { fill: currentColor; stroke: none; }
#sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--accent-on); }

/* ── Accessibilità di base ──────────────────────────────────────────── */
.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;
}

.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: var(--z-skip);
  background: var(--accent); color: var(--accent-on);
  padding: .8rem 1.4rem; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600; font-size: var(--fs-small);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 3px; border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFIA
   La gerarchia la fanno dimensione, peso e aria. Non il colore:
   un solo colore di testo pieno e uno smorzato, mai un terzo.
   ═══════════════════════════════════════════════════════════════════════ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s3);
}
.eyebrow::before {
  content: ''; width: 18px; height: 1px;
  background: currentColor; opacity: .55;
}

.h1 {
  font-size: var(--fs-display); font-weight: 700;
  line-height: 1.02; letter-spacing: -.035em;
}
.h2 {
  font-size: var(--fs-h2); font-weight: 700;
  line-height: 1.08; letter-spacing: -.03em;
}
.h3 {
  font-size: var(--fs-h3); font-weight: 600;
  line-height: 1.3; letter-spacing: -.015em;
}
.lede {
  font-size: var(--fs-lede); font-weight: 300;
  line-height: 1.62; color: var(--tx-dim);
  max-width: 56ch;   /* misura leggibile: non si va oltre */
}
.small { font-size: var(--fs-small); color: var(--tx-dim); line-height: 1.55; }
.accent-word { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
   BOTTONI
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px;               /* target touch generoso */
  padding: .85rem 1.75rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform .12s var(--ease);
}
.btn:active { transform: scale(.975); }

.btn--cta { background: var(--cta); color: var(--cta-on); }
.btn--cta:hover { background: var(--cta-hover); }

.btn--ghost { background: transparent; color: var(--tx); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--tx); }

/* pulsanti store: il marchio a sinistra, due righe di testo a destra */
.btn--store {
  gap: .7rem; padding: .7rem 1.4rem .7rem 1.15rem;
  background: var(--store-bg); color: var(--store-tx);
  border-color: var(--store-bd); border-radius: var(--r-md);
  text-align: left; line-height: 1.15;
}
.btn--store:hover { background: var(--store-bg-h); }
/* struttura: [marchio] [sopratitolo / nome store] — due righe, una griglia */
.btn--store > span { display: grid; gap: 1px; }
.btn--store > span > span {
  font-size: .67rem; opacity: .72;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
}
.btn--store b { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }

/* store non ancora pubblicato: stesso guscio, ma spento. Nel markup non è
   un <a> — non ha una destinazione, quindi non deve nemmeno reagire al
   passaggio del mouse né schiacciarsi al clic. */
.btn--soon { opacity: .5; cursor: default; }
.btn--soon:hover { background: var(--store-bg); }
.btn--soon:active { transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* link testuale con freccia che scivola */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--accent); font-weight: 600; font-size: var(--fs-small);
  text-decoration: none;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════════════
   NAV
   Stessa struttura sulle due pagine. Il colore arriva dai token, così
   la nav è chiara sul lato personale e scura su quello business senza
   una sola regola duplicata.
   ═══════════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: .7rem var(--gutter);
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
/* staccata dalla cima: un filo d'ombra la separa dal contenuto */
.nav.is-scrolled { box-shadow: 0 8px 28px -18px rgba(0,0,0,.55); }

.nav__logo {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em;
  text-decoration: none; color: var(--tx); flex-shrink: 0;
}
.nav__logo img { width: 30px; height: 30px; border-radius: 8px; }
.nav__logo em {
  font-style: normal; font-weight: 500;
  color: var(--accent);
  padding-left: .5rem; margin-left: .1rem;
  border-left: 1px solid var(--rule-strong);
}

.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a {
  color: var(--tx-dim); text-decoration: none;
  font-size: .9rem; font-weight: 400;
  transition: color var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--tx); }

.nav__end { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }

/* Lo scambio fra le due facce: un segmented control, non un link perso
   in mezzo agli altri. È l'elemento che spiega che i prodotti sono due. */
.switch {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-pill);
  background: var(--switch-bg); border: 1px solid var(--rule);
}
.switch a {
  padding: .42rem .85rem; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; color: var(--tx-dim); white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.switch a:hover { color: var(--tx); }
.switch a[aria-current="page"] {
  background: var(--switch-on); color: var(--switch-on-tx);
}

.nav__cta {
  min-height: 40px; padding: .5rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--cta); color: var(--cta-on);
  font-size: .85rem; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center;
  transition: background-color var(--dur) var(--ease);
}
.nav__cta:hover { background: var(--cta-hover); }

/* Il menu davvero al centro della barra.
   Da solo `justify-content: space-between` non lo fa: distribuisce lo
   spazio *avanzato* fra i tre blocchi, quindi il centro cade a metà di
   quello che resta, non a metà della barra. E qui i due lati sono molto
   diversi — il logo sta in ~140px, switch più CTA in ~295 — perciò il
   menu finisce spostato a sinistra di circa metà della differenza.
   Con tre colonne di cui le due esterne uguali (`1fr` per parte) la
   colonna di mezzo è centrata per costruzione, qualunque cosa ci sia
   ai lati. `minmax(0, 1fr)` evita che un lato lungo sfondi la griglia.
   Solo da 769px: sotto, il menu è un pannello `fixed` fuori dal flusso
   e la barra resta il flex di prima, con il suo gioco di `order`. */
@media (min-width: 769px) {
  .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .nav__logo { justify-self: start; }
  .nav__end  { justify-self: end; }
}

.nav__toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  color: var(--tx); border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO CON FILMATO
   Il video sta sotto tutto, una velatura in mezzo, il testo sopra.
   Sopra un filmato il testo scuro non si legge mai: la hero passa quindi
   al set di token chiari, e ogni pagina decide solo la *tinta* della
   velatura — indigo di qua, quasi-nero di là. Le due temperature restano.
   ═══════════════════════════════════════════════════════════════════════ */
.hero--film {
  --tx:          #F7F7FA;
  --tx-dim:      rgba(247,247,250,.76);   /* 9:1 sulla velatura */
  --tx-faint:    rgba(247,247,250,.50);
  --rule:        rgba(255,255,255,.16);
  --rule-strong: rgba(255,255,255,.32);
  --focus:       var(--lime);
  color: var(--tx);
  background: transparent;      /* sotto c'è il filmato, non un fondo */
}
/* il reticolo decorativo non serve più: sotto c'è un filmato */
.hero--film::before { display: none; }
.hero--film > .wrap { position: relative; z-index: 1; }

/* ── La zona del filmato ──────────────────────────────────────────────
   Contiene la corsa del sipario **e** la hero. Il video sta appiccicato
   in cima per tutta la zona e se ne va quando la zona finisce: così parte
   subito, non si interrompe mai fra il marchio grande e la hero, e non
   deborda sulle sezioni sotto.
   `margin-bottom` negativo pari all'altezza: resta appiccicato senza
   occupare spazio nel flusso, altrimenti spingerebbe giù tutto di uno
   schermo. */
.filmzone { position: relative; }

.filmzone__stage {
  position: sticky; top: 0; z-index: 0;
  height: 100svh; margin-bottom: -100svh;
  overflow: hidden;
  background: var(--hero-bg);   /* se il video non arriva, il testo resta leggibile */
}
.filmzone > .curtain-spacer,
.filmzone > .hero { position: relative; z-index: 1; }

.filmzone__v {
  position: relative;           /* sopra il fondale sfocato qui sotto */
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* La sorgente è un reel verticale a bassa risoluzione: ingrandita per
     coprire una hero orizzontale mostra la compressione. Un filo di
     sfocatura la nasconde e, dietro al testo, è comunque ciò che serve.
     Con gli originali a 1080×1920 questa riga si può togliere. */
  filter: blur(1.5px) saturate(105%);
  transform: scale(1.04);       /* copre il bordo morbido della sfocatura */
}

/* ── Schermo largo: il fotogramma intero ──────────────────────────────
   I reel sono verticali e piccoli (464×600 il consumer, 464×832 il
   business). Su un 1920×1080 il `cover` qui sopra li ingrandisce 4 volte
   e ne mostra poco più di un terzo: il resto esce sopra e sotto.
   Da qui in giù li mostriamo interi. I lati che restano scoperti li
   riempie un fondale ricavato dalla locandina dello stesso reel — così
   il fondo respira con le luci della scena invece di essere una lastra
   ferma. In più l'ingrandimento del video crolla da 4× a 1,5×, quindi
   il filmato è anche più nitido e la sfocatura di ripiego quasi sparisce.
   La soglia è sul rapporto, non sulla larghezza: il problema nasce
   quando lo schermo è più largo che alto, non quando è grande. */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  /* Duotono. Della locandina teniamo solo il chiaroscuro, il colore lo
     mettiamo noi: `background-blend-mode: color` prende tinta e
     saturazione dallo strato sopra (il gradiente del brand) e la sola
     luminosità da quello sotto (la foto). Il risultato è che spiaggia,
     magliette arancioni e palme verdi spariscono come tinte ma restano
     come luci e ombre — un fondo vivo che però non esce dalla palette.
     Niente `grayscale` nel filtro: sarebbe ridondante, il blend il colore
     della foto lo ha già buttato via, e applicato dopo la fusione
     scolorirebbe anche la tinta del brand. */
  .filmzone__stage::before {
    content: ''; position: absolute; inset: 0;
    background:
      var(--film-duotone),                          /* la tinta */
      var(--film-poster) center / cover no-repeat;   /* il chiaroscuro */
    background-blend-mode: color;
    filter: blur(64px) contrast(1.15);
    transform: scale(1.2);      /* la sfocatura scolora i bordi: li mandiamo fuori */
  }
  /* Il video non riempie più la scena: gli diamo la misura del fotogramma
     (altezza piena, larghezza dedotta dal rapporto). Serve a poter sfumare
     i bordi: `object-fit: contain` lascerebbe l'elemento largo quanto lo
     schermo, con il fotogramma al centro e le bande ai lati dentro
     l'elemento stesso — e una maschera cadrebbe sul vuoto invece che sul
     bordo dell'immagine. Con la scatola cucita addosso, invece, il taglio
     netto contro il fondale diventa una dissolvenza. */
  /* Da che parte sta il fotogramma. Non è vezzo di composizione: dove
     passa il filmato il testo non si legge. Misurato sul lato personale,
     il paragrafo della hero stava a 2,4:1 contro i 4,5:1 richiesti, e
     per recuperarlo con la velatura sarebbe servito coprire il video
     all'81% proprio sotto la colonna di testo — cioè nasconderlo.
     Meglio spostarlo: il testo resta sul fondale duotono, che è scuro e
     uniforme, e il filmato si vede tutto dall'altra parte.
     Ogni pagina decide con `--film-align`, perché dipende da dove sta il
     testo: a sinistra sul personale, centrato sul business. */
  .filmzone__v {
    display: block;
    margin-block: 0; margin-inline: var(--film-align, auto);
    width: auto; height: 100%;
    aspect-ratio: var(--film-ratio);
    filter: blur(.5px) saturate(105%);
    /* Un reel molto verticale, mostrato tutto in altezza, resta una
       striscia stretta in mezzo al fondale. `--film-zoom` lo ingrandisce
       di quel tanto che serve a guadagnare larghezza: quel che esce
       sopra e sotto lo taglia l'`overflow` della scena, e la maschera
       laterale scala insieme all'elemento. Default 1 = fotogramma
       intero; lo alza solo chi ne ha bisogno. */
    transform: scale(var(--film-zoom, 1));
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 17%, #000 83%, transparent 100%);
            mask-image: linear-gradient(90deg,
      transparent 0, #000 17%, #000 83%, transparent 100%);
  }
}
.filmzone__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--hero-scrim);
}

/* Sul filmato i pulsanti store scuri sparirebbero: diventano bianchi
   pieni, che è anche la variante che spinge di più. */
.hero--film {
  --store-bg:   #FFFFFF;
  --store-bg-h: #E8E8EE;
  --store-tx:   #14103A;
  --store-bd:   transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIPARIO
   Il marchio a tutto schermo che, scorrendo, rimpicciolisce fino a
   diventare il logo nella barra. Vive dietro la nav e sopra la hero.
   Esiste solo se `.js-curtain` è sul documento: la mette la regia da
   1025px in su, e la toglie se GSAP non parte — un pannello fisso e
   opaco rimasto lì sarebbe uno schermo bianco senza via d'uscita.
   ═══════════════════════════════════════════════════════════════════════ */
.curtain, .curtain-spacer { display: none; }

.js-curtain .curtain {
  display: block;
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;          /* lo scroll e i click passano sotto */
}
/* lo spazio da percorrere: uno schermo, non uno di più */
.js-curtain .curtain-spacer { display: block; height: 100vh; }

/* Non più un pannello opaco: una velatura. Il filmato si vede già da
   qui, dietro al marchio, e scorrendo si schiarisce fino a sparire.
   `opacity` smorza la velatura senza toccarne la forma: il gradiente
   resta più fitto ai bordi che al centro, ed è quella vignettatura a
   staccare il marchio. Da sola la velatura copre il centro al ~66% e i
   bordi all'~86%; a .42 diventano ~28% e ~36%, cioè l'apertura è già
   quasi il fotogramma di fine corsa. È il numero da ritoccare se si
   vuole più o meno velo — la regia parte da qui e scende a zero. */
.curtain__bg {
  position: absolute; inset: 0;
  background: var(--curtain-wash);
  opacity: .42;
}

.curtain__mark {
  position: absolute; inset: 0; margin: auto;
  width: min(34vh, 300px); height: auto;
  border-radius: 22%;            /* stessa proporzione del logo in nav */
  will-change: transform;
}

.curtain__hint {
  position: absolute; left: 50%; bottom: 8vh;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  /* Colore fisso, non `--tx-dim`: il sipario sta fuori da `.hero--film`,
     quindi eredita i token della pagina — e sul lato personale quelli
     sono scuri, cioè testo scuro su filmato scuro. Qui la scena è
     notturna su entrambe le pagine, e va detto esplicitamente.
     L'ombra la tiene staccata su qualsiasi fotogramma passi sotto. */
  color: rgba(247,247,250,.78);
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
}
.curtain__hint svg { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* Il logo in barra sta nascosto finché il marchio grande non atterra:
   due copie identiche in volo l'una verso l'altra sarebbero un errore.
   È un cambio di classe, non uno stile inline della regia — così la
   rete di sicurezza lo può davvero annullare. */
.js-curtain .nav__logo img { opacity: 0; }
.js-curtain.is-landed .nav__logo img { opacity: 1; transition: opacity .2s var(--ease); }

/* ═══════════════════════════════════════════════════════════════════════
   IMPAGINATO
   ═══════════════════════════════════════════════════════════════════════ */
.wrap   { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--maxw-narrow); margin-inline: auto; }

/* Il fondo va dichiarato, non lasciato trasparente. Sotto le sezioni non
   c'è il bianco del body: c'è la `.filmzone__stage`, alta 100svh con
   `margin-bottom: -100svh`. Se la hero è più corta di uno schermo quel
   pannello sborda sotto la sua zona e finisce dietro alla sezione che
   segue — che, se trasparente, se lo lascia vedere: testo scuro su
   indigo. Con un fondo opaco il problema non si pone più a prescindere
   da quanto è alta la hero. L'unica che resta trasparente è `.hero`,
   che il filmato lo deve mostrare. */
.band { padding-block: var(--band-y); position: relative; background: var(--bg); }
.band--alt { background: var(--bg-2); }
.band--edge { border-top: 1px solid var(--rule); }

/* Sezione che *continua* il blocco precedente: stesso fondo, quindi al
   posto del cambio di colore c'è un filo di riga — e il vuoto si stringe
   da entrambi i lati. Lo spazio è la cosa che dice "questo va con quello":
   lasciarlo largo come a un cambio di fondo raccontava il contrario.
   `:has()` per il lato di sopra, così la regola vive tutta qui invece di
   dover marcare a mano anche la sezione precedente. Dove non è supportato
   si stringe solo il lato di sotto: meno bello, non rotto. */
.band--cont { border-top: 1px solid var(--rule); padding-top: var(--band-y-tight); }
.band:has(+ .band--cont) { padding-bottom: var(--band-y-tight); }

/* Isola di colore opposto: serve a spezzare il ritmo una volta ogni
   tanto. Ridefinisce i token invece di sovrascrivere ogni componente. */
.band--ink {
  background: var(--ink); color: #F4F4F7;
  --tx: #F4F4F7;
  --tx-dim: rgba(244,244,247,.66);
  --rule: rgba(255,255,255,.13);
  --rule-strong: rgba(255,255,255,.24);
  --surface: var(--ink-2);
  --accent: var(--lime);
  --accent-on: #12210A;
  --focus: var(--lime);
}

.band__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: 46ch; }
.band__head--center { text-align: center; margin-inline: auto; }
.band__head--center .eyebrow { justify-content: center; }
.band__head--center .lede { margin-inline: auto; }
.band__head .lede { margin-top: var(--s3); }

/* intestazione a due colonne: titolo a sinistra, spiegazione a destra */
.band__head--split {
  max-width: none; display: grid; gap: var(--s4) var(--s7);
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  align-items: end;
}
.band__head--split .lede { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   TELEFONO DISEGNATO IN CSS
   Gli screenshot ora sono ritagli piatti dello schermo, senza sfondo.
   La scocca la disegna il CSS: si intona a qualsiasi fondo e l'ombra
   segue davvero l'oggetto invece di essere un rettangolo grigio.
   ═══════════════════════════════════════════════════════════════════════ */
.phone {
  position: relative; flex-shrink: 0;
  width: var(--phone-w, 290px);
  aspect-ratio: 1080 / 2340;
  padding: 2.1%;
  border-radius: 13%/6%;
  background: linear-gradient(150deg, #4A4A55 0%, #16161C 26%, #0C0C10 62%, #3A3A45 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 2px 3px rgba(255,255,255,.16) inset,
    0 40px 70px -20px rgba(10,10,20,.5),
    0 12px 24px -12px rgba(10,10,20,.35);
}
.phone__screen {
  width: 100%; height: 100%;
  border-radius: 11%/5%;
  overflow: hidden; background: #000;
  position: relative;
}
.phone__screen img,
.phone__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* riflesso diagonale: appena accennato, altrimenti sporca lo screenshot */
.phone__screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(114deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 34%);
}

/* ═══════════════════════════════════════════════════════════════════════
   SCHERMATA (gestionale / desktop)
   ═══════════════════════════════════════════════════════════════════════ */
.shot {
  border-radius: var(--r-md);
  overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--shot-bd, var(--rule));
  box-shadow: 0 30px 60px -24px rgba(10,10,25,.35);
}
.shot__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .85rem;
  background: var(--shot-bar, rgba(0,0,0,.04));
  border-bottom: 1px solid var(--shot-bd, var(--rule));
}
.shot__bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; opacity: .22;
}
.shot__bar span {
  margin-left: .5rem; font-size: .7rem; letter-spacing: .04em;
  color: var(--tx-dim); font-variant-numeric: tabular-nums;
}
.shot img { width: 100%; height: auto; }

/* La schermata si vede sempre intera, a ogni larghezza: su telefono
   diventa piccola, ma è preferibile a un ritaglio che taglia le card. */

/* ═══════════════════════════════════════════════════════════════════════
   GRIGLIA DI SCHEDE
   ═══════════════════════════════════════════════════════════════════════ */
.cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s4);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--rule-strong); }
.card h3 { margin-bottom: .4rem; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; }
.card p  { font-size: .93rem; color: var(--tx-dim); line-height: 1.6; }

.card__icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent);
  margin-bottom: var(--s3);
}

/* ═══════════════════════════════════════════════════════════════════════
   COME FUNZIONA — tre passi
   Niente pin, niente sticky: i passi si accendono entrando nello schermo.
   Più robusto e meno invadente di una sequenza bloccata.
   ═══════════════════════════════════════════════════════════════════════ */
.steps { display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); counter-reset: step; }

.step { position: relative; padding-top: var(--s4); border-top: 2px solid var(--rule); }
.step::before {
  content: ''; position: absolute; top: -2px; left: 0;
  width: 0; height: 2px; background: var(--accent);
  transition: width .7s var(--ease);
}
.step.is-on::before { width: 100%; }

.step__n {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  color: var(--accent); font-variant-numeric: tabular-nums;
  display: block; margin-bottom: .7rem;
}
.step h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; margin-bottom: .55rem; }
.step p  { font-size: .95rem; color: var(--tx-dim); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════
   ELENCHI CON SPUNTA
   ═══════════════════════════════════════════════════════════════════════ */
.ticks { list-style: none; display: grid; gap: .8rem; }
.ticks li {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .96rem; line-height: 1.5; color: var(--tx-dim);
}
.ticks svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); }
.ticks b { color: var(--tx); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   NASTRO DEI SETTORI
   ═══════════════════════════════════════════════════════════════════════ */
.marquee {
  overflow: hidden; padding: .35rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.marquee + .marquee { margin-top: .8rem; }
.marquee__inner { display: flex; gap: .8rem; width: max-content; animation: marq 52s linear infinite; }
.marquee--rev .marquee__inner { animation-direction: reverse; }
.marquee:hover .marquee__inner { animation-play-state: paused; }
@keyframes marq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.chip {
  display: flex; align-items: center; gap: .55rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-pill); padding: .65rem 1.25rem;
  font-size: .9rem; font-weight: 500; white-space: nowrap; color: var(--tx);
}
.chip svg { color: var(--accent); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   MANIFESTO — visione e missione
   ═══════════════════════════════════════════════════════════════════════ */
.manifesto__claim {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 300; line-height: 1.32; letter-spacing: -.025em;
  max-width: 20ch;
}
.manifesto__claim b { font-weight: 600; color: var(--accent); }

.manifesto__grid {
  display: grid; gap: var(--s6) var(--s7);
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: start;
}
.pillars { display: grid; gap: var(--s5); }
.pillar { padding-left: var(--s4); border-left: 2px solid var(--accent); }
.pillar h3 { margin-bottom: .4rem; }
.pillar p { font-size: .95rem; color: var(--tx-dim); line-height: 1.62; }

/* ═══════════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════════ */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); padding: 1.35rem 0;
  background: none; border: none; cursor: pointer; text-align: left;
  font-size: 1.05rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.4;
  color: var(--tx);
  transition: color var(--dur) var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__q svg { flex-shrink: 0; margin-top: 3px; color: var(--tx-dim); transition: transform .3s var(--ease); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); color: var(--accent); }
.faq__a { overflow: hidden; height: 0; transition: height .34s var(--ease); }
.faq__a > div { padding-bottom: 1.35rem; font-size: .96rem; line-height: 1.65; color: var(--tx-dim); max-width: 62ch; }
.faq__a a { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
   NUMERI
   ═══════════════════════════════════════════════════════════════════════ */
.stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); }
.stat__n {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat__l {
  font-size: var(--fs-micro); color: var(--tx-dim);
  text-transform: uppercase; letter-spacing: .1em; margin-top: .3rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   PONTE FRA LE DUE PAGINE
   In fondo a ogni pagina si offre l'altra faccia, invece di lasciare
   il visitatore sbagliato in un vicolo cieco.
   ═══════════════════════════════════════════════════════════════════════ */
.bridge {
  display: grid; gap: var(--s4) var(--s6);
  grid-template-columns: minmax(0,1fr) auto; align-items: center;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  background: var(--surface);
}
.bridge h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.025em; }
.bridge p  { margin-top: .6rem; color: var(--tx-dim); font-size: .98rem; max-width: 52ch; }
.closer + .bridge { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--ink); color: #F4F4F7;
  --tx: #F4F4F7; --tx-dim: rgba(244,244,247,.6);
  --rule: rgba(255,255,255,.12); --accent: var(--lime);
  padding: var(--s8) 0 var(--s5);
}
.footer__top {
  display: grid; gap: var(--s6) var(--s7);
  grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr));
  padding-bottom: var(--s6); border-bottom: 1px solid var(--rule);
}
.footer__brand { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: 1.02rem; }
.footer__brand img { width: 28px; height: 28px; border-radius: 8px; }
.footer__blurb { margin-top: var(--s3); font-size: .9rem; color: var(--tx-dim); line-height: 1.6; max-width: 34ch; }
.footer h4 {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx); margin-bottom: var(--s3);
}
.footer ul { list-style: none; display: grid; gap: .65rem; }
.footer ul a { font-size: .9rem; color: var(--tx-dim); text-decoration: none; transition: color var(--dur) var(--ease); }
.footer ul a:hover { color: var(--tx); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  align-items: center; justify-content: space-between;
  padding-top: var(--s5); font-size: .8rem; color: var(--tx-dim);
}

/* ═══════════════════════════════════════════════════════════════════════
   STATI INIZIALI DELLA REGIA
   Applicati solo se la classe è sul documento: se GSAP non parte, la
   classe sparisce e il contenuto resta visibile. Mai contenuto nascosto
   da CSS che nessuno riaccende.
   ═══════════════════════════════════════════════════════════════════════ */
.js-anim .reveal { opacity: 0; }
.js-anim .hero-in { opacity: 0; }
.js-anim .hero-word { transform: translateY(105%); }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .band__head--split { grid-template-columns: 1fr; align-items: start; }
  .manifesto__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: var(--s5); }
  .bridge { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav { padding: .55rem var(--gutter); }
  /* nel DOM il pulsante viene subito dopo il logo (è lì che serve al
     lettore di schermo, accanto a ciò che comanda); a schermo invece
     va in fondo, dove la mano lo cerca. */
  .nav__toggle { display: flex; order: 3; }
  .nav__end { order: 2; }
  .nav__links {
    position: fixed; inset: 56px 0 auto 0; z-index: var(--z-menu);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--menu-bg); backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--rule);
    padding: .25rem var(--gutter) 1.25rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform var(--dur) var(--ease), opacity .18s var(--ease);
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a {
    padding: .95rem 0; border-bottom: 1px solid var(--rule);
    font-size: 1rem; color: var(--tx);
  }
  .nav__cta { display: none; }          /* la CTA vive già nell'hero */
  .footer__top { grid-template-columns: 1fr; gap: var(--s5); }
  .footer__blurb { max-width: none; }
}

@media (max-width: 420px) {
  .switch a { padding: .42rem .7rem; font-size: .74rem; }
  .nav__logo span { display: none; }    /* resta il marchio, sparisce il nome */
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION RIDOTTO
   Non è un dettaglio: chi soffre di vertigini o emicrania vestibolare
   deve poter leggere la pagina ferma.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .marquee__inner { animation: none; transform: none; }
  /* niente sipario: la hero deve essere lì, subito */
  .curtain, .curtain-spacer,
  .js-curtain .curtain, .js-curtain .curtain-spacer { display: none !important; }
  .js-curtain .nav__logo img { opacity: 1 !important; }
  .reveal, .js-anim .reveal,
  .hero-in, .js-anim .hero-in { opacity: 1 !important; transform: none !important; }
  .js-anim .hero-word { transform: none !important; }
  .step::before { width: 100%; }
}