/* ═══════════════════════════════════════════════════════════════════════
   BOOK A VIBE — LATO PERSONALE
   Temperatura chiara e indigo: scoperta, leggerezza, mappa.
   L'altra faccia (business.css) è scura e lime. Stesso marchio,
   due climi: capisci in che mondo sei prima ancora di leggere.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:            var(--paper);
  --bg-2:          var(--paper-2);
  --surface:       var(--paper);
  --surface-2:     var(--paper-2);

  --tx:            #12121C;
  --tx-dim:        rgba(18,18,28,.64);   /* 5,2:1 su bianco */
  --tx-faint:      rgba(18,18,28,.42);

  --rule:          rgba(18,18,28,.10);
  --rule-strong:   rgba(18,18,28,.20);

  --accent:        var(--indigo);        /* 7,0:1 su bianco */
  --accent-on:     #FFFFFF;
  --accent-tint:   rgba(76,63,212,.09);

  --cta:           var(--indigo);
  --cta-on:        #FFFFFF;
  --cta-hover:     #3F33BE;

  --nav-bg:        rgba(255,255,255,.80);
  --menu-bg:       rgba(255,255,255,.97);
  --switch-bg:     rgba(18,18,28,.04);
  --switch-on:     var(--indigo);
  --switch-on-tx:  #FFFFFF;

  --store-bg:      #12121C;
  --store-bg-h:    #26263A;
  --store-tx:      #FFFFFF;
  --store-bd:      transparent;
}

/* Nav sopra una sezione scura: scambia il set di token invece di
   ridipingere ogni figlio a mano. Un blocco, non venti eccezioni. */
.nav--inv {
  --nav-bg:       rgba(10,10,14,.80);
  /* Anche il pannello del menu mobile: è figlio della nav, quindi eredita
     `--tx` invertito. Senza invertire pure il fondo restava bianco con le
     voci bianche sopra — menu invisibile su telefono. */
  --menu-bg:      rgba(10,10,14,.97);
  --tx:           #F4F4F7;
  --tx-dim:       rgba(244,244,247,.66);
  --rule:         rgba(255,255,255,.13);
  --rule-strong:  rgba(255,255,255,.24);
  --accent:       var(--lime);
  --cta:          var(--lime);
  --cta-on:       #12210A;
  --cta-hover:    var(--lime-dark);
  --switch-bg:    rgba(255,255,255,.07);
  --switch-on:    var(--lime);
  --switch-on-tx: #12210A;
  --focus:        var(--lime);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO
   Due colonne: la promessa a sinistra, il prodotto a destra.
   Niente sticky, niente sequenza bloccata: si scorre e basta.
   ═══════════════════════════════════════════════════════════════════════ */
/* Con il filmato la hero diventa notturna, ma **indigo**, non nera:
   è così che resta il lato "personale" anche da spenta. Lo stesso
   fondo lo usa il sipario, così quando sfuma non c'è alcun salto. */
:root {
  --ink-indigo: #100C33;
  --hero-bg:
    radial-gradient(ellipse 70% 50% at 78% 8%, rgba(76,63,212,.55) 0%, transparent 62%),
    radial-gradient(ellipse 60% 45% at 8% 95%, rgba(168,230,61,.14) 0%, transparent 60%),
    var(--ink-indigo);

  /* Due strati: uno direzionale che scurisce il lato del testo (qui il
     testo è a sinistra, non centrato come sul business), uno verticale
     che stacca la nav in alto e chiude verso la sezione dopo.
     Le opacità si moltiplicano: a destra .26 e .06 fanno .30 in tutto —
     abbastanza da tenere insieme la pagina, poco da soffocare il filmato. */
  /* Velatura del sipario: abbastanza da far risaltare il marchio, non
     tanto da nascondere il filmato che c'è già dietro. */
  --curtain-wash:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(16,12,51,.52) 0%, rgba(16,12,51,.80) 70%),
    rgba(16,12,51,.30);

  --hero-scrim:
    linear-gradient(100deg, rgba(16,12,51,.90) 0%, rgba(16,12,51,.68) 34%, rgba(16,12,51,.34) 66%, rgba(16,12,51,.26) 100%),
    linear-gradient(180deg, rgba(8,6,26,.62) 0%, rgba(8,6,26,.06) 24%, rgba(8,6,26,.06) 58%, rgba(16,12,51,.86) 100%);

  /* La locandina del reel fa anche da fondale sfocato ai lati del filmato
     quando su schermo largo lo si mostra intero: vedi .filmzone__stage. */
  --film-poster: url('../immagini/video/hero-consumer.jpg');
  --film-ratio: 464 / 600;      /* misure vere del reel */

  /* La tinta del fondale duotono. Una sola famiglia di colore — indigo —
     che varia solo di saturazione: con il blend `color` la luminosità
     arriva comunque dalla foto, quindi far variare anche la chiarezza
     qui non servirebbe a niente. Un'unica tinta è il punto: il fondo
     deve stare zitto dietro al filmato. */
  --film-duotone: linear-gradient(150deg, #6C5CE7 0%, #4C3FD4 58%, #3F3A93 100%);

  /* Filmato centrato, come sul business. */
  --film-align: auto;
}

/* Nessun fondo qui: sotto la hero c'è il filmato appiccicato della
   .filmzone, e un fondo opaco lo coprirebbe. Il ripiego se il video non
   arriva sta su `.filmzone__stage`, che usa lo stesso --hero-bg. */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(7rem, 13vw, 9.5rem) 0 var(--band-y);
}

/* Sul filmato l'indigo sparisce: nella hero l'accento passa al lime —
   che è anche il colore delle scritte impresse nel reel. */
.hero--film {
  --accent:      var(--lime);
  --accent-on:   #12210A;
  --accent-tint: rgba(255,255,255,.12);
  --cta:         var(--lime);
  --cta-on:      #12210A;
  --cta-hover:   var(--lime-dark);
}
.hero--film .hero__badge {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  color: #F7F7FA;
}
.hero--film .hero__badge svg { color: var(--lime); }
/* il sottotitolo in bianco pieno, non nel grigio-chiaro di `--tx-dim` */
.hero--film .hero__sub { color: #FFFFFF; }
.hero--film .hero__stats { border-top-color: rgba(255,255,255,.20); }
/* le etichette galleggianti restano chiare: su notturno funzionano */
.hero--film .hero__tag { background: rgba(255,255,255,.94); color: #14103A; border-color: transparent; }
.hero--film .hero__tag svg { color: var(--indigo); }

/* reticolo appena percettibile: dà profondità senza essere un motivo */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(18,18,28,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,18,28,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000, transparent 78%);
}

.hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0,1.05fr) auto;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.hero__copy { max-width: 34rem; }

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .85rem .38rem .45rem;
  border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  margin-bottom: var(--s4);
}
.hero__badge i {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-left: .35rem;
}

.hero__title { margin-bottom: var(--s4); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .hero-word { display: block; }
.hero__title .hero-word:last-child { color: var(--accent); }

.hero__sub { margin-bottom: var(--s5); max-width: 30rem; }

.hero__stats {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

/* ── colonna destra: il telefono, appoggiato su un alone ─────────────── */
.hero__stage { position: relative; display: grid; place-items: center; }
.hero__stage::before {
  content: ''; position: absolute; z-index: 0;
  width: 122%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,63,212,.18) 0%, transparent 62%);
  filter: blur(18px);
}
/* niente scocca: lo screenshot sta da solo, retto dall'ombra che segue
   la sua forma. L'immagine è 2:3, quindi l'altezza la decide lei. */
.hero__shot {
  position: relative; z-index: 1;
  width: clamp(260px, 36vw, 415px); height: auto;
  border-radius: var(--r-lg);
  filter: drop-shadow(0 30px 55px rgba(10,10,25,.28));
}

/* etichetta che galleggia accanto allo schermo: dice cosa si sta guardando */
.hero__tag {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 28px -12px rgba(18,18,40,.3);
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.hero__tag svg { color: var(--accent); }
.hero__tag--a { top: 16%; left: -12%; }
.hero__tag--b { bottom: 20%; right: -14%; }

/* ═══════════════════════════════════════════════════════════════════════
   COSA PUOI PRENOTARE — orologio a lato + griglia bento
   Le tessere non sono tutte uguali: le due categorie di punta occupano
   il doppio. La gerarchia si vede prima di leggere le etichette.
   ═══════════════════════════════════════════════════════════════════════ */

/* L'orologio a sinistra, intestazione e griglia a destra. Le aree servono
   perché nel markup l'ordine è quello del telefono (titolo → orologio →
   griglia): qui la figura viene ripescata e messa a sinistra a cavallo
   delle due righe.
   `align-items: start` è quello che rende possibile lo `sticky`: il blocco
   di contenimento di un elemento di griglia resta l'area assegnata — alta
   quanto tutta la colonna destra — mentre `start` fa restringere la figura
   alla sua altezza. La differenza fra le due è la corsa su cui scorre. */
.cosa {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 262px) minmax(0, 1fr);
  grid-template-areas: "media head"
                       "media grid";
  align-items: start;
}
.cosa > .band__head { grid-area: head; margin-bottom: 0; }
.cosa > .bento      { grid-area: grid; }
/* 5rem è lo stesso stacco di `scroll-padding-top`: l'altezza della nav fissa. */
.cosa__media {
  grid-area: media;
  position: sticky; top: 5rem;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s4); text-align: center;
}
/* PNG ritagliato sul soggetto: l'ombra la mette il CSS sulla sagoma,
   non un rettangolo che si vedrebbe sul fondo chiaro. */
.cosa__media img {
  width: 100%; max-width: 248px; height: auto;
  filter: drop-shadow(0 24px 38px rgba(18,18,40,.24));
}
.cosa__media figcaption {
  font-size: .85rem; line-height: 1.55;
  color: var(--tx-dim); max-width: 27ch;
}

/* Tre colonne e non quattro: la griglia ha ceduto spazio all'orologio.
   Con 10 tessere e due larghe il doppio i conti tornano — 12 caselle,
   quattro righe piene, nessun buco in fondo. */
.bento {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(148px, auto);
}
.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  gap: .3rem; padding: var(--s4);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--surface-2);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tile:hover { border-color: var(--rule-strong); }
/* alcune tessere sono link: non devono sembrare testo sottolineato */
a.tile { text-decoration: none; color: inherit; }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }

/* L'icona sta nel flusso e spinge il testo in basso con margin-bottom:auto.
   Posizionandola in absolute finiva sotto al titolo nelle tessere basse. */
.tile__icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent);
  margin-bottom: auto;
}
.tile h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; }
.tile p  { font-size: .85rem; color: var(--tx-dim); line-height: 1.5; }

/* la tessera di punta prende il colore pieno */
.tile--hero {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
}
.tile--hero p { color: rgba(255,255,255,.78); }
.tile--hero .tile__icon { background: rgba(255,255,255,.16); color: #fff; }
.tile--hero:hover { background: #3F33BE; }

/* ═══════════════════════════════════════════════════════════════════════
   FASCIA CON SCHERMATA
   ═══════════════════════════════════════════════════════════════════════ */
.strip {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
}
.strip--flip .strip__media { order: -1; }
.strip__media { position: relative; display: grid; place-items: center; }
/* Su fondo scuro un telefono nero sparisce: l'alone lo stacca dal fondo. */
.strip__media::before {
  content: ''; position: absolute;
  width: 116%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,63,212,.26) 0%, transparent 62%);
  filter: blur(22px);
}
.strip__media .phone { position: relative; z-index: 1; --phone-w: clamp(230px, 24vw, 286px); }
.strip__copy .lede { margin-top: var(--s3); }
.strip__copy .ticks { margin-top: var(--s5); }

/* ═══════════════════════════════════════════════════════════════════════
   FIDUCIA
   ═══════════════════════════════════════════════════════════════════════ */
.trust { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.trust__item {
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--rule);
}
.trust__item svg { color: var(--accent); margin-bottom: var(--s3); }
.trust__item h3 { font-size: .98rem; font-weight: 600; margin-bottom: .3rem; }
.trust__item p  { font-size: .88rem; color: var(--tx-dim); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════════════
   CHIUSURA
   ═══════════════════════════════════════════════════════════════════════ */
.closer { text-align: center; }
.closer .h2 { margin-bottom: var(--s3); }
.closer .lede { margin-inline: auto; margin-bottom: var(--s5); }
.closer .btn-row { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero__copy { max-width: 40rem; }
  .hero__sub { margin-inline: auto; }
  .hero__badge, .hero .btn-row, .hero__stats { justify-content: center; }
  .hero__title .line { padding-bottom: .06em; }
  /* L'orologio smette di essere una colonna: sotto i 1024px la griglia non
     ha più larghezza da cedere. Sciolte le aree, i tre blocchi tornano
     nell'ordine del markup — titolo, orologio, griglia — che è già quello
     giusto in verticale. Via anche lo `sticky`: in colonna singola l'unico
     effetto sarebbe trascinarsi la figura dietro per tutta la sezione. */
  .cosa {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .cosa > .band__head, .cosa > .bento, .cosa__media { grid-area: auto; }
  .cosa__media { position: static; }
  .cosa__media img { max-width: 200px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--tall { grid-row: span 1; }
  .strip { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .strip--flip .strip__media { order: 0; }
  .strip__copy .lede { margin-inline: auto; }
  .strip__copy .ticks { text-align: left; max-width: 30rem; margin-inline: auto; }
}

@media (max-width: 620px) {
  .hero__tag--a { top: 6%; left: -4%; }
  .hero__tag--b { bottom: 12%; right: -4%; }
  .bento { grid-template-columns: 1fr; }
  .tile--wide { grid-column: span 1; }
}