/* Stile delle sezioni della landing. Scritto prima per schermo stretto, poi allargato.
   Impianto chiaro: il nero è un accento (gli esempi, la chiusura), non il fondo della pagina. */

/* ---------- hero: il marchio si rimpicciolisce, il sottotitolo diventa titolo ----------
   --p va da 0 (in cima) a 1 (animazione conclusa). Lo scrive main.js.
   Senza JavaScript --p resta 1: si vede subito lo stato finale, tutto leggibile. */
.hero{--p:1;position:relative;background:var(--carta);}
.js .hero{height:155vh;}
.js.fermi .hero{height:auto;}
.js.fermi .hero-scena{position:relative;height:auto;min-height:76vh;padding:var(--s-9) var(--bordo-pagina);}
.js.fermi .hero-giu{display:none;}
/* la luce sta dentro la scena incollata, dietro il marchio: si accende in cima e si dissolve scorrendo */
.hero-luce{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:72%;max-width:460px;height:34%;
  border-radius:50%;background:var(--gradiente);filter:blur(84px);opacity:.16;pointer-events:none;}
.js .hero-luce{opacity:calc(.26 - .24 * var(--p));}
.js.fermi .hero-luce{opacity:.16;}
.hero-scena{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-5);text-align:center;padding:var(--s-9) var(--bordo-pagina);min-height:76vh;}
/* svh, non vh: su iOS la barra del browser copre il fondo di 100vh e la freccia ci finisce sotto */
.js .hero-scena{position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding-top:0;padding-bottom:0;}

.hero-marchio{
  --largo:clamp(210px,46vw,360px);
  --stretto:clamp(112px,15vw,150px);
  width:calc(var(--largo) - (var(--largo) - var(--stretto)) * var(--p));
  height:auto;}

.hero h1{
  --piccolo:clamp(1.1rem,4.2vw,1.45rem);
  --grande:clamp(2rem,6.2vw,3.5rem);
  font-size:calc(var(--piccolo) + (var(--grande) - var(--piccolo)) * var(--p));
  letter-spacing:calc(-.01em - .028em * var(--p));
  max-width:calc(540px + 320px * var(--p));margin:0;}
/* sotto i 375px «Feedo le conosce già.» andrebbe a capo: il titolo scala con lo schermo */
@media (max-width:374px){.hero h1{--grande:8.3vw;}}

.hero-lead{margin:0;max-width:56ch;font-size:var(--f-4);line-height:1.6;color:var(--ink-2);
  opacity:calc(var(--p) * var(--p));
  transform:translateY(calc(22px * (1 - var(--p))));}

.hero-giu{position:absolute;left:50%;bottom:calc(6vh + 96px);transform:translateX(-50%);
  color:var(--ink-3);opacity:calc(1 - var(--p));pointer-events:none;}
.hero-giu svg{width:24px;height:24px;}
.js .hero-giu{animation:respiro 2.4s ease-in-out infinite;}
@keyframes respiro{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,7px);}}

/* ---------- impianto comune delle sezioni ---------- */
.sezione{padding:var(--s-9) 0;background:var(--carta);}
.sezione .colonna{text-align:center;}
.sezione .occhiello{display:block;}
.sezione-tit{margin:var(--s-4) auto 0;font-size:var(--f-7);}

/* ---------- 2 · il problema e la soluzione: quattro attivita a scorrimento ---------- */
.confronto{background:var(--carta-2);}
/* la pista: una scheda grande alla volta, i pallini sotto dicono quante sono */
.pista{display:flex;gap:var(--s-4);margin-top:var(--s-7);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding:var(--s-2) var(--bordo-pagina) var(--s-5);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pista::-webkit-scrollbar{display:none;}
.scheda{flex:0 0 100%;max-width:100%;scroll-snap-align:center;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:var(--s-6) var(--s-5);box-shadow:var(--ombra-alta);text-align:center;}
.scheda-tit{font-size:var(--f-5);font-weight:var(--peso-titolo);letter-spacing:-.02em;margin-bottom:var(--s-5);}

/* i pallini: li scrive main.js, così senza JS non resta nessun segno morto */
.pallini{display:flex;justify-content:center;gap:var(--s-2);}
.pallini:empty{display:none;}
.pallino{width:9px;height:9px;padding:0;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(11,11,17,.18);transition:background .25s ease,transform .25s ease;}
.pallino[aria-current="true"]{background:var(--gradiente);transform:scale(1.25);}
.scheda-coppia{display:grid;gap:var(--s-5);}
.mezzo-figura{margin:0 0 var(--s-3);border-radius:var(--r-sm);overflow:hidden;background:var(--carta-2);}
.mezzo-figura img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:saturate(.45);}
.mezzo--dopo .mezzo-figura img{filter:none;}
.mezzo-eti{font-size:var(--f-1);font-weight:var(--peso-titolo);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s-2);}
.mezzo--dopo .mezzo-eti{background:var(--gradiente);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mezzo .secondario{font-size:var(--f-3);max-width:34ch;margin-inline:auto;}

/* ---------- 3 · esempi concreti (blocco scuro) ---------- */
.esempi{background:var(--nero);}
.esempio{margin:var(--s-8) 0 0;background:var(--nero-2);border:1px solid var(--linea-scura);
  border-radius:var(--r-md);padding:var(--s-5);}
.esempio-eti{font-size:var(--f-1);font-weight:var(--peso-forte);letter-spacing:.14em;
  text-transform:uppercase;color:var(--chiaro-3);margin-bottom:var(--s-4);}
/* le foto del carosello scorrono, come nel post vero */
.slide{display:flex;gap:var(--s-3);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-bottom:var(--s-3);-webkit-overflow-scrolling:touch;}
.slide li{flex:0 0 62%;max-width:280px;scroll-snap-align:start;}
.slide img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--linea-scura);}
.esempio-cap{margin-top:var(--s-4);font-size:var(--f-3);line-height:1.6;color:var(--chiaro-2);max-width:60ch;margin-inline:auto;}
.esempi-coppia{display:grid;gap:var(--s-4);}

/* card verticali: storia e reel muto */
.verticale{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--nero-3);
  max-width:280px;margin:0 auto;}
.verticale img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;}
.verticale::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,12,.5) 0%,rgba(8,8,12,0) 32%,rgba(8,8,12,0) 55%,rgba(8,8,12,.72) 100%);}
.verticale-barre{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:2;}
.verticale-barre span{flex:1;height:2.5px;border-radius:var(--r-pill);background:rgba(255,255,255,.32);}
.verticale-barre .piena{background:#fff;}
.verticale-testo{position:absolute;z-index:2;left:var(--s-4);right:var(--s-4);top:38%;
  color:#fff;font-size:var(--f-4);font-weight:var(--peso-titolo);letter-spacing:-.02em;line-height:1.2;
  text-shadow:0 2px 14px rgba(0,0,0,.5);}
.verticale-testo em{font-style:normal;font-weight:var(--peso-testo);font-size:var(--f-3);
  display:block;margin-top:var(--s-2);opacity:.9;}
.verticale-sub{position:absolute;z-index:2;left:var(--s-3);right:var(--s-3);bottom:var(--s-4);
  color:#fff;font-size:var(--f-2);font-weight:var(--peso-forte);line-height:1.35;text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.65);}
.verticale-play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.35);color:#fff;}
.verticale-play svg{width:24px;height:24px;margin-left:3px;}
.verticale-muto{position:absolute;z-index:2;top:10px;right:10px;display:grid;place-items:center;
  width:28px;height:28px;border-radius:var(--r-pill);background:rgba(8,8,12,.55);color:#fff;}
.verticale-muto svg{width:15px;height:15px;}

/* ---------- 4 · come fa a scrivere come te ---------- */
.conosce-griglia{display:grid;gap:var(--s-6);margin-top:var(--s-8);}
.conosce-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);
  background:var(--gradiente-morbido);color:var(--b3);margin:0 auto var(--s-4);}
.conosce-ico svg{width:24px;height:24px;}
.conosce-blocco h3{font-size:var(--f-5);margin-bottom:var(--s-3);}
.conosce-blocco .secondario{max-width:38ch;margin-inline:auto;}

/* ---------- 5 · come funziona ---------- */
.flusso{background:var(--carta-2);}
.flusso-griglia{position:relative;display:grid;gap:var(--s-7);margin-top:var(--s-8);}
/* la linea del marchio che lega i tre passi: verticale da stretto */
.passo{position:relative;text-align:center;}
.passo-nodo{display:block;width:22px;height:22px;border-radius:var(--r-pill);
  background:var(--gradiente);margin:0 auto var(--s-4);box-shadow:0 0 0 5px var(--carta-2);}
.passo .secondario{max-width:36ch;margin-inline:auto;}
.passo-num{display:block;font-size:var(--f-1);font-weight:var(--peso-forte);letter-spacing:.17em;color:var(--ink-3);}
.passo h3{font-size:var(--f-5);margin:var(--s-3) 0 var(--s-2);}

/* ---------- 8 · lo stato del servizio (blocco scuro di chiusura) ---------- */
.stato{position:relative;overflow:hidden;background:var(--nero);}
.stato-luce{position:absolute;bottom:-52%;right:-20%;width:74%;height:96%;border-radius:50%;
  background:var(--gradiente);filter:blur(120px);opacity:.26;pointer-events:none;}
.stato-corpo{position:relative;}
.stato-testo{margin-top:var(--s-5);font-size:var(--f-4);max-width:58ch;margin-inline:auto;}
.stato-chiusa{margin-top:var(--s-6);font-size:var(--f-6);font-weight:var(--peso-titolo);
  letter-spacing:-.03em;line-height:1.15;max-width:24ch;margin-inline:auto;}

/* ---------- piede ---------- */
.pie{padding:var(--s-7) 0;background:var(--nero);border-top:1px solid var(--linea-scura);}
.pie-riga{display:grid;gap:var(--s-4);justify-items:center;text-align:center;}
.pie-marchio{width:104px;}
.pie-testo{color:var(--chiaro-3);font-size:var(--f-2);}
.pie-anno{display:block;margin-top:var(--s-1);color:var(--chiaro-3);opacity:.7;}
.pie-anno:empty{display:none;}

/* ---------- comparsa allo scroll ---------- */
/* Senza JavaScript la classe «js» non c'è: tutto resta visibile. */
.js [data-reveal]{opacity:0;transform:translateY(16px);}
.js [data-reveal].visibile{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);}

@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;}
  .js [data-reveal].visibile{transition:none;}
}

/* ---------- tablet ---------- */
@media(min-width:720px){
  .sezione{padding:var(--s-10) 0;}

  .scheda{padding:var(--s-7) var(--s-7) var(--s-6);}
  .scheda-coppia{grid-template-columns:1fr 1fr;gap:var(--s-6);}
  .slide li{flex-basis:32%;}
  .esempi-coppia{grid-template-columns:1fr 1fr;gap:var(--s-5);}
  .conosce-griglia{grid-template-columns:repeat(3,1fr);gap:var(--s-6);}

  /* da qui in poi la linea del marchio diventa orizzontale, sopra i tre passi */
  .flusso-griglia{grid-template-columns:repeat(3,1fr);gap:var(--s-6);}
  /* la linea del marchio unisce i tre nodi, centrati sopra ogni passo */
  .flusso-griglia::before{content:"";position:absolute;left:16.666%;right:16.666%;top:10px;height:2px;
    background:var(--gradiente);opacity:.9;border-radius:var(--r-pill);}

  .pie-anno{display:inline;margin-top:0;margin-left:var(--s-2);}
}

/* ---------- desktop ---------- */
@media(min-width:1080px){
  .sezione{padding:var(--s-11) 0;}
  .esempio{padding:var(--s-6);}
}