/* ============================================================================
 * landing.css — Look della landing (index.html).
 *
 * Impianto: headline con la seconda parte in corsivo, blocco autore, striscia
 * di numeri, galleria delle testimonianze. Fondo bianco e un unico accento,
 * l'arancio del brand (#F77E02). Le sezioni basse sono allineate a sinistra.
 *
 * L'unica eccezione al bianco è la fascia arancione in cima — logo, headline e
 * quiz — che va da un bordo all'altro dello schermo: vedi `.lp-arancio`.
 *
 * Il quiz dentro l'iframe ha il suo foglio di stile (style.css): qui c'è solo
 * quello che sta INTORNO.
 *
 * ⬇︎ PERSONALIZZA: le variabili qui sotto.
 * ========================================================================== */

:root {
  /* UN solo accento: l'arancio del brand. Bottoni, corsivo dell'headline,
     occhielli, pallino della pill — tutto parte da qui. */
  --arancio: #F77E02;
  --arancio-scuro: #D46A00;   /* hover */

  --fondo: #FFFFFF;           /* fondale pagina: bianco pieno */
  --fondo-alt: #FAFBFC;       /* fasce alternate, appena percettibili */

  --nero: #111112;
  --carbone: #2A3135;
  --pietra: #7A858C;
  --linea: #E4E7EC;
  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Il bottone in fondo riporta in cima con una scorrimento morbido invece che
   con un salto secco: si capisce che si sta tornando su, e non che la pagina
   è cambiata. Chi ha chiesto meno animazioni al sistema torna al salto. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--fondo);
  color: var(--carbone);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- contenitori ----
 * Larghezze diverse per zona, come nel riferimento: l'headline respira,
 * il quiz sta stretto per non disperdere l'attenzione, le griglie si allargano.
 */
.lp-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.lp-wrap-hero { max-width: 900px; }
.lp-wrap-form { max-width: 820px; }
.lp-wrap-mid  { max-width: 1000px; }

/* Le sezioni basse sono allineate a sinistra come il riferimento; questa classe
   centra i blocchi che devono stare al centro (logo, hero, CTA finale). */
.lp-center { text-align: center; }

/* ---- occhiello (kicker) ----
 * Maiuscoletto spaziato grigio: apre ogni sezione, come nel riferimento.
 */
.lp-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--pietra);
}

/* ---- header ---- */

.lp-header {
  padding: 18px 0 0;
  background: transparent;
}

.lp-brand { display: inline-block; text-decoration: none; }

/* il logo non deve rubare la scena all'headline: resta basso */
.lp-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
  /* Il file è nero con gli occhiali arancioni: sopra la fascia arancione la
     scritta si legge poco e gli occhiali spariscono dentro il fondo. Il filtro
     lo rende bianco pieno tenendo la trasparenza, senza toccare il file.
     Se un domani hai il logo già in bianco, togli questa riga. */
  filter: brightness(0) invert(1);
}

/* ---- hero: pill + headline + occhiello ---- */

.lp-hero {
  padding: 42px 0 20px;
}

.lp-headline {
  margin: 0;
  font-size: clamp(32px, 6vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.4px;
  color: #fff;
}

/* la seconda parte dell'headline resta in corsivo, ma sopra l'arancio va
   bianca come il resto: l'accento arancione ci sparirebbe dentro */
.lp-accent {
  color: #fff;
  font-style: italic;
}

/* ── LA FASCIA ARANCIONE ────────────────────────────────────────────────
 * Copre logo, headline e quiz, da un bordo all'altro dello schermo.
 *
 * La sfumatura è disegnata UNA VOLTA SOLA, qui: né i blocchi dentro né il quiz
 * dentro l'iframe ne hanno una loro (`html.cu-incorniciato body` in style.css li
 * rende trasparenti). Due sfumature uguali ma sfasate fra loro si notano
 * subito — si vedrebbe la riga dove finisce l'una e comincia l'altra.
 */
.lp-arancio {
  position: relative;
  overflow: hidden;              /* ritaglia la luce che attraversa la fascia */
  color: #fff;

  background: linear-gradient(125deg, #F77E02 0%, #FF9526 28%, #DC6E00 55%, #FF9E36 78%, #F77E02 100%);
  background-size: 300% 300%;
  animation: lpFlusso 16s ease-in-out infinite;
}

/* la sfumatura che si sposta lentamente dentro la fascia */
@keyframes lpFlusso {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── IL MOVIMENTO DELLO SFONDO ──────────────────────────────────────────
 * Due aloni morbidi che vagano lentamente sopra la sfumatura, uno che
 * schiarisce e uno che approfondisce.
 *
 * Perché due e non uno: hanno durate diverse e non divisibili fra loro
 * (34s e 47s), quindi il disegno che formano insieme non si ripete mai
 * uguale. È quello che lo fa sembrare luce vera invece di un'animazione —
 * una fascia sola che passa e ripassa si riconosce dopo due giri e stanca.
 *
 * Sono sfumature radiali senza bordo: non hanno una forma riconoscibile,
 * quindi non si legge "un oggetto che si muove" ma il colore che respira.
 */

.lp-arancio::before,
.lp-arancio::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}

/* l'alone chiaro: alza la luce, come un riflettore lontano */
.lp-arancio::before {
  width: 75vw;
  height: 75vw;
  max-width: 1000px;
  max-height: 1000px;
  top: -30%;
  left: -12%;
  background: radial-gradient(circle,
    rgba(255, 206, 138, .40) 0%,
    rgba(255, 170, 84, .16) 38%,
    transparent 68%);
  mix-blend-mode: screen;
  animation: lpAloneChiaro 34s ease-in-out infinite;
}

/* l'alone scuro: scava l'angolo opposto e dà profondità */
.lp-arancio::after {
  width: 65vw;
  height: 65vw;
  max-width: 850px;
  max-height: 850px;
  bottom: -28%;
  right: -10%;
  background: radial-gradient(circle,
    rgba(140, 56, 0, .38) 0%,
    rgba(140, 56, 0, .14) 40%,
    transparent 70%);
  mix-blend-mode: multiply;
  animation: lpAloneScuro 47s ease-in-out infinite;
}

@keyframes lpAloneChiaro {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  30%  { transform: translate3d(16vw, 9vh, 0) scale(1.16); }
  62%  { transform: translate3d(4vw, -7vh, 0) scale(.94); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes lpAloneScuro {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  38%  { transform: translate3d(-14vw, -8vh, 0) scale(1.12); }
  70%  { transform: translate3d(-5vw, 6vh, 0) scale(.96); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-arancio::before, .lp-arancio::after { animation: none; }
}

/* i blocchi stanno sopra la luce, altrimenti ci passa davanti */
.lp-arancio > * { position: relative; z-index: 1; }

/* Il quiz: qui c'è solo lo spazio, il colore lo mette la fascia sopra.
   Montserrat resta confinato a questa parte — l'headline tiene il suo font. */
.lp-form-section {
  padding: 0 0 40px;
  font-family: 'Montserrat', var(--font);
}

.lp-quiz-shell { overflow: hidden; }

#quiz-frame {
  display: block;
  width: 100%;
  height: 760px;             /* altezza di partenza: poi la regola il quiz */
  border: 0;
  transition: height .18s ease;
}

/* i due testi di chiusura, sotto le risposte */
.lp-card-foot {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .3);
}

/* Chiusura della fascia, non intestazione: sopra c'è la domanda del quiz ed è
   quella che deve pesare di più. */
.lp-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: #fff;
}

.lp-card-sub {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}

/* ---- fasce di sezione ---- */

.lp-band {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--fondo-alt);
}

/* ⚠️ Solo padding verticale, mai la scorciatoia `padding: 60px 0`.
   Queste classi stanno sullo STESSO elemento di `.lp-wrap`, e vengono dopo nel
   foglio: la scorciatoia azzererebbe i 24px laterali di `.lp-wrap` e da telefono
   il testo finirebbe incollato al bordo dello schermo. */
.lp-section { padding-top: 60px; padding-bottom: 60px; }
.lp-section-sm { padding-top: 40px; padding-bottom: 40px; }

.lp-section-title {
  margin: 8px 0 0;
  font-size: clamp(22px, 3.4vw, 31px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.6px;
  color: var(--nero);
}

/* ---- blocco autore ---- */

/* Da telefono il blocco è in colonna e va tutto al centro: la foto tonda sopra
   e il testo sotto, allineati fra loro. Da 760px in su torna affiancato e il
   testo riprende l'allineamento a sinistra della sezione. */
.lp-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}

@media (min-width: 760px) {
  .lp-author {
    flex-direction: row;
    text-align: left;
    gap: 40px;
  }
}

/* Foto tonda.
 * Il file è scontornato (PNG con lo sfondo trasparente): l'arancione dietro a
 * Martina è questa sfumatura, la stessa identica della fascia del quiz — stessi
 * colori, stesso movimento. È il motivo per cui la foto è un PNG e non un JPG.
 *
 * Il ritaglio è tenuto dal CSS, non dal file: la foto è verticale e il viso sta
 * nel terzo alto, per cui in un ritaglio quadrato `50% 22%` è il valore che lo
 * mette al centro del cerchio senza lasciare un buco vuoto sopra la testa.
 * Provati anche 16 / 28 / 34%: se cambi la foto, rifai la prova. */
.lp-author-photo {
  width: 168px;
  height: 168px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 4px solid #fff;
  box-shadow: 0 10px 30px rgba(17, 17, 18, .14);

  background: linear-gradient(125deg, #F77E02 0%, #FF9526 28%, #DC6E00 55%, #FF9E36 78%, #F77E02 100%);
  background-size: 300% 300%;
  animation: lpFlusso 16s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lp-author-photo { animation: none; }
}

@media (min-width: 760px) {
  .lp-author-photo { width: 192px; height: 192px; }
}

.lp-author-name {
  margin: 8px 0 0;
  font-size: clamp(23px, 3.2vw, 30px);
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--nero);
}

.lp-author-bio {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--carbone);
}

.lp-author-bio b { color: var(--nero); }

/* ---- striscia di numeri ---- */

/* due sole caselle: restano affiancate anche da telefono, sono corte */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.lp-stat {
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  padding: 16px 18px;
}

.lp-stat-num {
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--nero);
}

.lp-stat-num .lp-accent { font-style: normal; }   /* nei numeri niente corsivo */

.lp-stat-label {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--pietra);
}

/* ---- griglia video (le testimonianze) ---- */

/* 6 testimonianze: 3 per riga da desktop */
.lp-videos {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.lp-video {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  background: #16181C;
}

/* copertina cliccabile: finché non si preme, il video non viene scaricato */
.lp-video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  background-color: #16181C;
  background-image: linear-gradient(140deg, #33373D 0%, #16181C 100%);
  background-size: cover;
  background-position: center;
  transition: transform .35s ease;
}

/* col poster caricato serve un velo scuro, altrimenti il play si perde */
.lp-video-cover.has-poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
}

.lp-video-cover:hover { transform: scale(1.05); }

.lp-play {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  flex: none;
}

/* il triangolino del play */
.lp-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--nero);
}

.lp-video-name {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* il <video> vero, iniettato al click */
.lp-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* i video sono di formati diversi: mai tagliarli */
  background: #000;
}

/* ---- CTA ---- */

.lp-cta-row { margin-top: 34px; }

.lp-cta {
  display: inline-block;
  padding: 16px 36px;
  border-radius: 999px;
  background: var(--arancio);
  color: #fff;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(247, 126, 2, .32);
  transition: background .18s ease, transform .18s ease;
}

.lp-cta:hover { background: var(--arancio-scuro); transform: translateY(-2px); }
.lp-cta:active { transform: translateY(0); }

/* ---- footer ---- */

.lp-footer {
  padding: 34px 0 44px;
  border-top: 1px solid var(--linea);
  background: #fff;
  line-height: 1.6;
  text-align: center;
}

/* i tre paragrafi centrati: `margin auto` serve al disclaimer, che ha una
   larghezza massima sua e altrimenti resterebbe schiacciato a sinistra */
.lp-footer p { margin: 0 auto; }

.lp-footer-claim {
  font-size: 15px;
  font-weight: 700;
  color: var(--nero);
  margin-bottom: 12px !important;
}

.lp-footer-legal { font-size: 13.5px; margin-bottom: 18px !important; }
.lp-footer-legal a { color: var(--carbone); text-decoration: none; }
.lp-footer-legal a:hover { color: var(--arancio); text-decoration: underline; }

/* la nota su Facebook è un obbligo, non un messaggio: sta in secondo piano */
.lp-footer-disclaimer {
  font-size: 12px;
  color: var(--pietra);
  max-width: 820px;
}

/* ---- mobile ---- */

/* tablet: 3 colonne diventano troppo strette, si passa a 2 */
@media (max-width: 860px) {
  .lp-videos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .lp-wrap { padding: 0 18px; }
  .lp-hero { padding: 30px 0 22px; }
  .lp-headline { letter-spacing: -1px; }
  #quiz-frame { height: 820px; }
  .lp-form-section { padding-top: 0; padding-bottom: 32px; }
  /* verticale soltanto: vedi la nota su `.lp-section` più in alto */
  .lp-section { padding-top: 44px; padding-bottom: 44px; }
  .lp-videos { grid-template-columns: 1fr; }
  .lp-cta { display: block; text-align: center; padding: 16px 20px; font-size: 16px; }
  .lp-play { width: 54px; height: 54px; }
  .lp-logo { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-cta, .lp-video-cover, #quiz-frame { transition: none; }
  .lp-cta:hover, .lp-video-cover:hover { transform: none; }
}