/* ═══════════════════════════════════════════════════════════════════════
   BOOK A VIBE BUSINESS — LATO GESTIONALE
   Temperatura scura e lime: strumento, densità, controllo.
   Stesso marchio del lato personale, clima opposto.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:            var(--ink);
  --bg-2:          var(--ink-2);
  --surface:       #15151E;
  --surface-2:     var(--ink-3);

  --tx:            #F4F4F7;
  --tx-dim:        rgba(244,244,247,.66);   /* 7,4:1 su --ink */
  --tx-faint:      rgba(244,244,247,.40);

  --rule:          rgba(255,255,255,.11);
  --rule-strong:   rgba(255,255,255,.22);

  --accent:        var(--lime);             /* 13,1:1 su --ink */
  --accent-on:     #12210A;
  --accent-tint:   rgba(168,230,61,.13);

  --cta:           var(--lime);
  --cta-on:        #12210A;
  --cta-hover:     var(--lime-dark);

  --nav-bg:        rgba(10,10,14,.78);
  --menu-bg:       rgba(10,10,14,.98);
  --switch-bg:     rgba(255,255,255,.06);
  --switch-on:     var(--lime);
  --switch-on-tx:  #12210A;

  --store-bg:      rgba(255,255,255,.06);
  --store-bg-h:    rgba(255,255,255,.12);
  --store-tx:      #F4F4F7;
  --store-bd:      rgba(255,255,255,.16);

  /* le schermate del gestionale sono color crema: su fondo scuro
     vanno incorniciate, o sembrano un buco di luce nella pagina */
  --shot-bd:  rgba(255,255,255,.14);
  --shot-bar: rgba(255,255,255,.05);
}

/* Isola chiara: l'inverso di .band--ink. Serve per far respirare le
   sezioni dense e per ospitare gli screenshot chiari senza stridere. */
.band--paper {
  background: var(--paper-2); color: #12121C;
  --tx: #12121C;
  --tx-dim: rgba(18,18,28,.64);
  --rule: rgba(18,18,28,.10);
  --rule-strong: rgba(18,18,28,.20);
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --accent: var(--indigo);
  --accent-on: #FFFFFF;
  --accent-tint: rgba(76,63,212,.09);
  --focus: var(--indigo);
  --shot-bd: rgba(18,18,28,.12);
  --shot-bar: rgba(18,18,28,.04);
}
.band--paper .btn--cta { background: var(--indigo); color: #fff; }
.band--paper .btn--cta:hover { background: #3F33BE; }

/* Nav sopra una sezione chiara: stesso meccanismo, verso opposto. */
.nav--inv {
  --nav-bg:       rgba(255,255,255,.84);
  /* Come sul lato consumer: il pannello del menu mobile eredita `--tx`
     invertito, quindi va invertito anche il suo fondo. Senza, sopra le
     sezioni chiare erano voci scure su pannello scuro. */
  --menu-bg:      rgba(255,255,255,.98);
  --tx:           #12121C;
  --tx-dim:       rgba(18,18,28,.64);
  --rule:         rgba(18,18,28,.10);
  --rule-strong:  rgba(18,18,28,.20);
  --accent:       var(--indigo);
  --cta:          var(--indigo);
  --cta-on:       #FFFFFF;
  --cta-hover:    #3F33BE;
  --switch-bg:    rgba(18,18,28,.05);
  --switch-on:    var(--indigo);
  --switch-on-tx: #FFFFFF;
  --focus:        var(--indigo);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════ */
/* Stesso sfondo per hero e sipario: quando il secondo sfuma, sotto non
   cambia niente di colore. Qui la notte è vera notte, non indigo:
   è la differenza di temperatura con il lato personale. */
:root {
  --hero-bg:
    radial-gradient(ellipse 55% 45% at 82% 6%, rgba(168,230,61,.14) 0%, transparent 62%),
    radial-gradient(ellipse 55% 50% at 8% 96%, rgba(76,63,212,.24) 0%, transparent 66%),
    var(--ink);

  --curtain-wash:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(6,6,9,.50) 0%, rgba(6,6,9,.82) 70%),
    rgba(6,6,9,.32);

  /* Due strati che si moltiplicano: prima erano .34 e .44 al centro, cioè
     quasi due terzi di nero proprio dove passa il filmato — la scena non
     si vedeva più. Alleggeriti: resta scuro dove serve (sotto la nav in
     alto, sull'attacco della sezione dopo in basso, ai lati) e si apre in
     mezzo. La leggibilità del testo la recupera il sottotitolo in bianco
     pieno, qui sotto. */
  --hero-scrim:
    linear-gradient(180deg, rgba(6,6,9,.72) 0%, rgba(6,6,9,.20) 30%, rgba(6,6,9,.90) 100%),
    linear-gradient(96deg, rgba(6,6,9,.54) 0%, rgba(6,6,9,.18) 50%, rgba(6,6,9,.52) 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-business.jpg');
  --film-ratio: 464 / 832;      /* misure vere del reel */

  /* Questo reel è 9:16 contro il 3:4 scarso del lato personale: mostrato
     tutto in altezza resterebbe largo un terzo del suo, una feritoia in
     mezzo allo schermo. Lo ingrandiamo di un terzo — larghezza in linea
     con l'altra pagina — e quel che esce sopra e sotto è tetto e
     pavimento: il soggetto resta tutto dentro. */
  --film-zoom: 1.34;

  /* Qui la tinta è quasi neutra di proposito: poca saturazione col blend
     `color` vuol dire fondale quasi in bianco e nero, appena freddo —
     che è la temperatura di questa pagina. Il lime resta agli accenti,
     sul fondo diventerebbe malaticcio. */
  --film-duotone: linear-gradient(150deg, #4A4766 0%, #34324B 60%, #2A2E3A 100%);
}

/* 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);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 80%);
}

.hero__grid { position: relative; text-align: center; display: grid; justify-items: center; }
.hero__copy { max-width: 46rem; }
.hero__sub { margin: 0 auto var(--s5); }
/* sul filmato il grigio-chiaro di `--tx-dim` non regge: bianco pieno,
   come sul lato personale */
.hero--film .hero__sub { color: #FFFFFF; }
.hero .btn-row { justify-content: center; }

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .95rem; border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent);
  border: 1px solid rgba(168,230,61,.25);
  font-size: .78rem; font-weight: 600; margin-bottom: var(--s4);
}

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

.hero__note { margin-top: var(--s4); font-size: .82rem; color: var(--tx-faint); }

/* La schermata sotto l'hero, inclinata appena: si capisce che è un
   oggetto e non un rettangolo incollato sul fondo. */
.hero__shot {
  width: 100%;                      /* la griglia centra i figli: qui serve tutta la larghezza */
  margin-top: clamp(3rem, 6vw, 4.5rem);
  perspective: 1800px;
}
.hero__shot .shot {
  transform-origin: 50% 0%;         /* l'inclinazione la dà la regia, non il CSS */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 60px 120px -40px rgba(0,0,0,.9),
    0 0 140px -50px rgba(168,230,61,.28);
}

/* ═══════════════════════════════════════════════════════════════════════
   APP WHITE-LABEL
   ═══════════════════════════════════════════════════════════════════════ */
.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; }
/* Con un telefono la colonna `auto` va bene: ha una larghezza sua.
   Con una schermata larga no — lì le due colonne vanno divise a metà,
   altrimenti il testo si prende tutto e lo screenshot resta un francobollo. */
.strip--shot {
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}
/* Il testo sta sotto: senza il freno andrebbe a righe da tutta la pagina,
   illeggibili. */
.strip--shot .strip__copy { max-width: 68ch; }
/* Da desktop il blocco sotto la schermata si apre in due: a sinistra
   il discorso (occhiello, titolo, paragrafo), a destra l'elenco con le
   spunte. Così l'immagine resta a tutta larghezza e la sezione finisce
   più in alto, invece di allungarsi in una colonna di testo sola. */
@media (min-width: 1025px) {
  .strip--shot .strip__copy {
    max-width: none;
    display: grid; align-items: start;
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .strip--shot .strip__copy > .eyebrow,
  .strip--shot .strip__copy > .h2,
  .strip--shot .strip__copy > .lede { grid-column: 1; }
  .strip--shot .strip__copy .ticks {
    grid-column: 2; grid-row: 1 / span 3;
    align-self: center; margin-top: 0;
  }
}
.strip__media { position: relative; display: grid; place-items: center; }
/* l'alone sta bene dietro un telefono; dietro una schermata larga no */
.strip__media--glow::before {
  content: ''; position: absolute;
  width: 118%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,63,212,.24) 0%, transparent 62%);
  filter: blur(20px);
}
.strip__media .phone { position: relative; z-index: 1; --phone-w: clamp(228px, 24vw, 282px); }
.strip__media .shot { position: relative; z-index: 1; width: 100%; }
.strip__copy .lede { margin-top: var(--s3); }
.strip__copy .ticks { margin-top: var(--s5); }

/* ═══════════════════════════════════════════════════════════════════════
   PREZZI
   ═══════════════════════════════════════════════════════════════════════ */
.pricing { display: grid; gap: var(--s3); grid-template-columns: repeat(3, 1fr); max-width: 1020px; margin-inline: auto; }

.plan {
  display: flex; flex-direction: column;
  padding: var(--s5) var(--s4);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface);
}
.plan--top {
  position: relative;
  background: linear-gradient(180deg, rgba(168,230,61,.10) 0%, var(--surface) 42%);
  border-color: rgba(168,230,61,.42);
}
.plan__flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--lime); color: #12210A;
  padding: .22rem .85rem; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
}
.plan__tier { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-dim); }
.plan--top .plan__tier { color: var(--accent); }

.plan__was { display: flex; align-items: center; gap: .5rem; margin: var(--s3) 0 .3rem; }
.plan__strike { font-size: .95rem; color: var(--tx-faint); text-decoration: line-through; }
.plan__off {
  background: var(--accent-tint); color: var(--accent);
  padding: .12rem .5rem; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 700;
}
.plan__price { display: flex; align-items: baseline; gap: .3rem; }
.plan__num { font-size: 2.7rem; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan__per { font-size: .85rem; color: var(--tx-dim); }
.plan__desc { font-size: .87rem; color: var(--tx-dim); margin: .6rem 0 var(--s4); line-height: 1.55; min-height: 2.7em; }

.plan__list { list-style: none; flex: 1; margin-bottom: var(--s4); }
.plan__list li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .9rem; line-height: 1.45; padding: .45rem 0;
  border-bottom: 1px solid var(--rule); color: var(--tx-dim);
}
.plan__list li:last-child { border-bottom: none; }
.plan__list svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); }

.plan__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: var(--r-pill);
  font-size: .93rem; font-weight: 600; text-decoration: none;
  background: transparent; color: var(--tx);
  border: 1px solid var(--rule-strong);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.plan__btn:hover { border-color: var(--tx); background: rgba(255,255,255,.05); }
.plan--top .plan__btn { background: var(--lime); color: #12210A; border-color: var(--lime); }
.plan--top .plan__btn:hover { background: var(--lime-dark); border-color: var(--lime-dark); }

.pricing__note { text-align: center; margin-top: var(--s5); font-size: .85rem; color: var(--tx-dim); }

/* ═══════════════════════════════════════════════════════════════════════
   DATE PER LE DEMO
   Niente modulo da compilare: si sceglie un orario e si passa oltre.
   Ogni fascia è un link vero, quindi funziona anche senza JavaScript
   una volta che gli slot arrivano dalla piattaforma.
   ═══════════════════════════════════════════════════════════════════════ */
.demo { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; }

.demo__panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: clamp(1.25rem, 2.6vw, 2rem);
}
.demo__panel h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: .3rem; }
.demo__lead { font-size: .88rem; color: var(--tx-dim); line-height: 1.55; margin-bottom: var(--s5); }

.demo__list { display: grid; gap: .6rem; }

.demo__day {
  display: grid; grid-template-columns: 74px 1fr;
  gap: var(--s3); align-items: center;
  padding: .8rem; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--rule);
}

/* la data come un foglietto da calendario: si legge di sbieco */
.demo__date {
  display: grid; justify-items: center; gap: 0;
  padding: .45rem .2rem; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--rule);
}
.demo__dow, .demo__mon {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-dim);
}
.demo__num {
  font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--tx);
}

.demo__times { display: flex; flex-wrap: wrap; gap: .5rem; }
.demo__slot {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 82px; padding: .5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong); background: transparent;
  color: var(--tx); text-decoration: none;
  font-size: .93rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform .12s var(--ease);
}
.demo__slot:hover { background: var(--lime); border-color: var(--lime); color: #12210A; }
.demo__slot:active { transform: scale(.96); }

.demo__empty { font-size: .95rem; color: var(--tx-dim); line-height: 1.6; margin-bottom: var(--s4); }

/* avviso di lavorazione: sparisce da solo quando gli slot sono veri */
.demo__note {
  display: flex; gap: .55rem; align-items: flex-start;
  margin-top: var(--s4); padding: .75rem .9rem;
  border-radius: var(--r-sm);
  background: rgba(168,230,61,.08); border: 1px dashed rgba(168,230,61,.4);
  font-size: .8rem; line-height: 1.5; color: var(--tx-dim);
}
.demo__note svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

.demo__meta {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.demo__meta div { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--tx-dim); }
.demo__meta svg { color: var(--accent); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   CREDO — due colonne della stessa statura
   Claim e pilastri stanno insieme a sinistra, le cinque schede a destra:
   così le due colonne hanno all'incirca la stessa altezza e si centrano
   l'una sull'altra invece di lasciare un buco sotto il claim.
   Le schede non sono quelle delle Funzionalità: qui sono righe corte,
   quindi l'icona sta a fianco del titolo e la scheda si stringe.
   ═══════════════════════════════════════════════════════════════════════ */
#chi-siamo .manifesto__grid { align-items: center; gap: var(--s5) var(--s6); }

.manifesto__intro .manifesto__claim { max-width: 22ch; margin-bottom: var(--s5); }

.cards--credo { gap: .7rem; grid-template-columns: 1fr; }

.cards--credo .card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s3); row-gap: .15rem;
  align-items: center;
  padding: var(--s3) var(--s4);
}
/* l'icona copre entrambe le righe, così resta centrata sul blocco */
.cards--credo .card__icon {
  grid-row: span 2;
  width: 36px; height: 36px; border-radius: 10px;
  margin-bottom: 0;
}
.cards--credo .card h3 {
  grid-column: 2; align-self: end;
  margin-bottom: 0; font-size: 1rem;
}
.cards--credo .card p {
  grid-column: 2; align-self: start;
  font-size: .86rem; line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pricing { grid-template-columns: 1fr; max-width: 460px; }
  .plan__desc { min-height: 0; }
  .demo { grid-template-columns: 1fr; }
  .strip, .strip--shot { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  /* la schermata del gestionale resta sopra anche qui: è già impaginata
     sopra il testo, non va rimessa in coda come il telefono */
  .strip--flip:not(.strip--shot) .strip__media { order: 0; }
  .strip__copy .lede { margin-inline: auto; }
  .strip__copy .ticks { text-align: left; max-width: 30rem; margin-inline: auto; }
  .hero__shot .shot { transform: none; }
}

@media (max-width: 480px) {
  .demo__day { grid-template-columns: 60px 1fr; }
  .demo__num { font-size: 1.35rem; }
  .demo__slot { min-width: 72px; padding: .5rem .8rem; }
}