/* =========================================================
   ZELO · sito istituzionale
   Stessa grafica della landing Zelino Insight: stesso carattere,
   stessi tre colori, stessa grana, stessa fascia sfocata in alto.
   Il movimento sta in motion.js: togliendo quel file la pagina
   resta intera e leggibile.
   Regole: niente pallini, niente evidenziatori, niente blocchi
   scuri alternati, nessuna immagine chiusa in un rettangolo,
   nessun colore piatto.
   ========================================================= */

:root{
  --canvas:#F6F5F3;
  --ink:#1B1727;
  --mute:#6E6879;
  --grigio:#8A8493;
  --line:rgba(27,23,39,.14);
  --line-2:rgba(27,23,39,.26);
  --giallo:#F6D81F;
  --viola:#B48BE8;
  --blu:#4B57FF;
  --font:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}

/* Una scala sola per tutta la pagina: ogni misura cresce con lo schermo
   allo stesso passo, cosi' le proporzioni restano quelle a ogni zoom. */
:root{
  --t-xl:clamp(46px,8.194vw,118px);
  --t-prod:clamp(34px,5.139vw,74px);
  --t-lg:clamp(26px,3.194vw,46px);
  --t-say:clamp(25px,3.472vw,50px);
  --t-num:clamp(32px,4.028vw,58px);
  --t-voce:clamp(21px,2.222vw,32px);
  --t-dom:clamp(24px,2.708vw,39px);
  --t-lede:clamp(17px,1.458vw,21px);
  --t-risp:clamp(16.5px,1.319vw,19px);
}

/* --- CURSORE E BASE (ripresi dalla landing) --- */
/* Il cursore e' una lente d'ingrandimento: sopra le cose su cui si clicca
   il vetro si accende di giallo. */
html{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F6F5F3%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M19.2%2019.2%20L28%2028%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%231B1727%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M19.2%2019.2%20L28%2028%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 13 13, auto}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--font);font-size:18px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.04em;line-height:.95;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blu);outline-offset:3px}
::selection{background:var(--giallo);color:var(--ink)}
.skip{position:absolute;left:8px;top:-48px;background:var(--ink);color:var(--canvas);padding:10px 14px;border-radius:8px;z-index:300}
.skip:focus{top:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grana: nessun colore piatto, mai ---------------------------------- */
.grain{
  position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.09;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}

/* barra in alto: trasparente, con sfocatura progressiva a strati ----- */
.topblur{position:fixed;top:0;left:0;right:0;height:168px;z-index:90;pointer-events:none}
/* La sfocatura e' a strati come sul sito di riferimento. Sotto c'e' un
   velo del colore della carta, ma leggero e corto: serve solo perche' i
   pulsanti neri che passano sotto non diventino una macchia scura dietro
   al logo. Il velo di prima era quasi opaco e impastava tutto in grigio,
   ed era anche sotto alle sfocature, dove non serviva a niente: va sopra. */
.topblur::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(246,245,243,.97) 0%,rgba(246,245,243,.88) 24%,rgba(246,245,243,.62) 46%,rgba(246,245,243,.32) 68%,rgba(246,245,243,.10) 86%,rgba(246,245,243,0) 100%)}
/* Ogni strato e' acceso da una certa altezza in su, non a fasce: salendo
   se ne accendono sempre di piu' e le sfocature si sommano, quindi la
   sfumatura cresce senza che si veda dove comincia o dove finisce. */
.topblur i{position:absolute;left:0;right:0;top:0;height:168px;display:block}
.topblur i:nth-child(1){backdrop-filter:blur(0.9px);-webkit-backdrop-filter:blur(0.9px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0.0%,#000 15.0%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 0.0%,#000 15.0%)}
.topblur i:nth-child(2){backdrop-filter:blur(1.28px);-webkit-backdrop-filter:blur(1.28px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 11.1%,#000 26.1%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 11.1%,#000 26.1%)}
.topblur i:nth-child(3){backdrop-filter:blur(1.81px);-webkit-backdrop-filter:blur(1.81px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 22.2%,#000 37.2%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 22.2%,#000 37.2%)}
.topblur i:nth-child(4){backdrop-filter:blur(2.58px);-webkit-backdrop-filter:blur(2.58px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 33.3%,#000 48.3%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 33.3%,#000 48.3%)}
.topblur i:nth-child(5){backdrop-filter:blur(3.66px);-webkit-backdrop-filter:blur(3.66px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 44.4%,#000 59.4%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 44.4%,#000 59.4%)}
.topblur i:nth-child(6){backdrop-filter:blur(5.2px);-webkit-backdrop-filter:blur(5.2px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 55.6%,#000 70.6%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 55.6%,#000 70.6%)}
.topblur i:nth-child(7){backdrop-filter:blur(7.38px);-webkit-backdrop-filter:blur(7.38px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 66.7%,#000 81.7%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 66.7%,#000 81.7%)}
.topblur i:nth-child(8){backdrop-filter:blur(10.48px);-webkit-backdrop-filter:blur(10.48px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 77.8%,#000 92.8%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 77.8%,#000 92.8%)}
.topblur i:nth-child(9){backdrop-filter:blur(14.88px);-webkit-backdrop-filter:blur(14.88px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 88.9%,#000 100.0%);
  mask-image:linear-gradient(to top,rgba(0,0,0,0) 88.9%,#000 100.0%)}
@media (max-width:820px){.topblur,.topblur i{height:124px}}

/* nav ---------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:clamp(14px,1.7vw,22px) 0}
/* una riga sottile sotto la barra: senza, sembra che il menu galleggi */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .4s var(--ease)}
.nav.giu::after{opacity:1}
/* La barra sta sempre ai bordi dello schermo, a qualsiasi larghezza:
   la Z a sinistra, tutto il resto a destra. */
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;width:calc(100% - 2*var(--gutter));max-width:none}
.brand{display:inline-flex;align-items:center}
.brand img{height:clamp(26px,2.6vw,38px);width:auto}
.nav-right{display:flex;align-items:center;gap:clamp(6px,.8vw,12px);flex-wrap:nowrap}
/* i link della barra sono pulsanti chiari: nessun contorno, un velo
   sulla carta che si scurisce appena al passaggio */
.lnk{
  display:inline-flex;align-items:center;padding:12px 20px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  background:rgba(27,23,39,.06);
  transition:background .3s var(--ease);
}
.lnk:hover{background:rgba(27,23,39,.12)}

/* tipografia -------------------------------------------------------- */
.lg{font-size:var(--t-lg)}
.occhio{font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--mute)}
/* La domanda: stesso carattere della risposta, ma sottile. */
.dom{
  font-weight:400;letter-spacing:-.03em;line-height:1.1;
  font-size:var(--t-dom);max-width:34ch;color:var(--grigio);
}
.dom-s{font-weight:400;letter-spacing:-.03em;color:var(--grigio)}

/* la frase che si accende scorrendo --------------------------------- */
.say{
  font-size:var(--t-say);font-weight:700;letter-spacing:-.032em;line-height:1.12;
  max-width:22ch;margin-top:clamp(14px,1.6vw,22px);text-wrap:balance;
}
.say-lg{max-width:26ch}
/* le frasi che presentano i prodotti sono lunghe: a 22ch diventavano
   una colonna di sette righe */
.prod-testa .say{max-width:24ch}
.say b{font-weight:800}
.say .wd{color:rgba(27,23,39,.2);transition:color .12s linear}
.say .wd.on{color:var(--ink)}
.say b .wd.on{color:var(--blu)}

/* bottone: uno solo, ripetuto --------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:17px 32px;border-radius:999px;border:0;
  background:var(--ink);color:var(--canvas);
  font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 1px 2px rgba(27,23,39,.14);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .2s var(--ease);
  text-align:center;
}
/* al passaggio il pieno si svuota: chiaro con l'ombra, mai giallo */
.btn:hover{background:var(--canvas);color:var(--ink);box-shadow:0 6px 22px rgba(27,23,39,.16)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(27,23,39,.14)}
.btn-sm{padding:12px 22px;font-size:15px}
.btn-full{width:100%}

/* hero: la lente sulle persone (lo stesso della landing) ------------- */
/* la lente cresce scorrendo: qui le si dice di non far comparire
   una barra di scorrimento laterale quando esce dal bordo destro */
.hero{overflow-x:clip;position:relative;padding:clamp(132px,12vw,176px) 0 clamp(40px,4.5vw,72px)}
/* Le persone lontane fra il titolo e la folla: sotto a tutto, piccole.
   Sul telefono non c'e' spazio: via. */
.omini{position:absolute;inset:0;pointer-events:none;z-index:0}
.om{position:absolute;display:block;width:auto;height:calc(clamp(48px,5.2vw,82px) * var(--h,1));
  opacity:.92;transform:translate(-50%,-50%) rotate(var(--g,0deg))}
@media (max-width:980px){.omini{display:none}}

.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,30px);align-items:center}
.hero-txt{position:relative;z-index:3}
.xl{font-size:var(--t-xl);line-height:.9}
.hero-img{align-self:start;position:relative}
/* La folla e la lente: due immagini della stessa misura impilate. Il primo
   strato sta nel flusso e da' l'altezza, l'altro gli sta sopra.
   Il blocco e' piu' largo della sua colonna e sborda un po' a destra. */
.folla{position:relative;z-index:2;width:min(136%,880px);max-width:none;margin:0 0 0 -14%}
.folla .strato{display:block;width:100%;height:auto}
.folla .strato + .strato{position:absolute;inset:0}
.folla #lente{will-change:transform}
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr}
  .folla{width:min(100%,520px);margin:0 auto}
}

/* =================================================================
   IL FILM DELLA HOME (solo computer). .film e' alta ~420vh; dentro,
   .stage resta appiccicata per tutta l'altezza e il video cambia
   fotogramma con lo scorrimento (film.js). Il video e' un WebM con il
   canale alfa: porta solo le persone e la lente, col retino; la carta
   e' quella della pagina. E' piu' grande dello schermo, cosi' i suoi
   bordi non si vedono mai; posizione e misura le calcola film.js
   perche' la folla cominci subito a destra del titolo.
   ================================================================= */
.film{position:relative;height:420vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas)}
.film-in{padding-top:clamp(132px,12vw,176px);position:relative;z-index:3}
/* gli strati del film: locandina e video, stessa misura e posizione (da film.js).
   Il perno della crescita e' il centro del vetro dentro al fotogramma. */
.film-strati{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;
  transform-origin:56.25% 35.8%;will-change:transform}
.film-strati > #poster,.film-strati > #hero{position:absolute;inset:0;width:100%;height:100%;display:block}
#poster{background-size:100% 100%;background-repeat:no-repeat;transition:opacity .5s var(--ease)}
/* a video pronto la locandina si spegne: se restasse, dove il video e'
   trasparente si vedrebbe la sua sagoma ferma sotto a quella che cammina */
.stage.video-ready #poster{opacity:0}
#hero{object-fit:fill;opacity:0;transition:opacity .6s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}
/* il titolo: sta nella griglia come nell'hero fermo, nessun alone, nessun velo.
   film.js lo accende all'apertura e lo fa uscire prima che la folla cresca. */
.band{opacity:1}
.band .w{display:inline-block;will-change:transform,opacity}
.b1 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
/* l'anello di caricamento, in basso al centro */
.ring{position:absolute;left:50%;bottom:28px;width:36px;height:36px;transform:translateX(-50%);color:var(--ink);opacity:.7;transition:opacity .5s var(--ease);z-index:4}
.ring circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .2s linear}
/* sui computer l'hero fermo non c'e': c'e' il film */
.statico{display:none}
/* I CINQUE CANCELLI: identici, carattere per carattere, a quelli di film.js.
   Chi passa da qui vede l'hero fermo, e non scarica il video. */
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse),(orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .film{display:none}
  .statico{display:block}
}

/* sezioni: un flusso, non blocchi che si alternano ------------------- */
.sec{padding:clamp(72px,11vw,168px) 0;position:relative}
#perche{padding-top:clamp(56px,8vw,120px)}

/* COME · immagini e grafico animato, identici alla landing ----------- */
/* immagini: sempre ritagliate, mai dentro un rettangolo */
.stk{margin:0}
.stk img{width:100%;height:auto;filter:drop-shadow(0 22px 34px rgba(27,23,39,.16))}
.come-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(22px,2.4vw,34px)}
/* la frase resta attaccata al suo occhiello, non si centra sulla fotografia */
.come-row>.say{align-self:start;margin-top:0}
.come-row.rev>.say{order:2}
.come-row.rev>.stk{order:1}
.stk-a img{max-width:480px;margin-inline:auto}
/* i grafici disegnati: stessa aria degli sticker, nessun rettangolo attorno */
.grafici{margin:0;width:100%;max-width:560px;justify-self:center}
.grafici svg{width:100%;height:auto;overflow:visible}
.grafici .fetta{fill:none;stroke-width:56}
.grafici .t-min{font-family:var(--font);font-size:21px;font-weight:600;fill:var(--mute);text-anchor:middle}
.grafici .t-num{font-family:var(--font);font-size:58px;font-weight:800;letter-spacing:-.045em;fill:var(--ink);text-anchor:middle}
.grafici .t-lab{font-family:var(--font);font-size:21px;font-weight:600;fill:var(--mute);text-anchor:middle}
/* la freccina: un pallino dentro l'anello (la nota vale per tutta la
   torta), una linea spezzata, la spiegazione fuori */
.grafici .nota-p{fill:var(--ink)}
.grafici .nota-l{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.grafici .nota-t{font-family:var(--font);font-size:22px;font-weight:700;letter-spacing:-.025em;fill:var(--ink)}
@media (max-width:900px){.come-row{grid-template-columns:1fr}.come-row.rev>.say{order:0}.come-row.rev>.stk{order:0}}

/* OSSERVATORIO: i numeri -------------------------------------------- */
.numeri{margin-top:clamp(34px,4vw,58px);display:grid;gap:clamp(26px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.n{display:flex;flex-direction:column;gap:12px}
.n b{font-size:var(--t-num);font-weight:800;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.n b .num{display:inline-block;line-height:1;vertical-align:top}
.n:nth-child(1) b,.n:nth-child(3) b{color:var(--blu)}
/* I numeri prendono la stessa grana del resto: la tinta e' quella del
   testo, la piastrella e' la stessa. Se il browser non sa ritagliare lo
   sfondo sul testo, resta il colore pieno. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .n b,.say b .wd.on{
    background-color:currentColor;
    background-image:url("grana.png");
    background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent
  }
}
/* l'etichetta sotto al numero: solo i figli diretti, se no la regola
   colpiva anche lo <span> del numero e me lo rimpiccioliva */
.n > span{font-size:16px;line-height:1.4;color:var(--mute);max-width:22ch;font-weight:500}
.n > span strong{font-weight:700;color:var(--ink)}

/* OSSERVATORI VERTICALI: un elenco che si apre, non dei riquadri ----- */
.vert{margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--line)}
.vert details{border-bottom:1px solid var(--line)}
.vert summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(16px,1.7vw,24px) 0;transition:padding-left .45s var(--ease);
}
.vert summary::-webkit-details-marker{display:none}
.voce{font-size:var(--t-voce);font-weight:700;letter-spacing:-.035em;transition:color .35s var(--ease)}
/* qui la riga non si colora tutta: si colora la scritta */
.vert summary:hover .voce,.vert details[open] .voce{color:var(--blu)}
.vert summary:hover{padding-left:clamp(8px,1vw,16px)}
.plus{position:relative;width:16px;height:16px;flex:0 0 16px}
.plus::before,.plus::after{content:"";position:absolute;background:var(--ink);transition:transform .4s var(--ease),background .35s var(--ease)}
.plus::before{left:0;right:0;top:7px;height:2px}
.plus::after{top:0;bottom:0;left:7px;width:2px}
details[open] .plus::after{transform:scaleY(0)}
.vert summary:hover .plus::before,.vert summary:hover .plus::after,
.vert details[open] .plus::before{background:var(--blu)}
.vert .a{overflow:hidden}
.vert .a p{
  padding:0 0 clamp(18px,2vw,26px);max-width:62ch;
  font-size:var(--t-risp);line-height:1.5;color:#2B2738;font-weight:500;
}

/* LE AREE DI INTERVENTO: titolo grande, descrizione piccola, voci a etichetta */
.aree{margin-top:clamp(30px,3.6vw,52px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}
.area-tit{font-size:var(--t-prod);font-weight:800;letter-spacing:-.045em;line-height:.94}
.area-occhio{margin-top:clamp(14px,1.5vw,20px);font-size:15px;font-weight:600;color:var(--blu)}
.area-testo{margin-top:8px;font-size:var(--t-lede);line-height:1.45;font-weight:500;color:#2B2738;max-width:36ch}
.area-voci{margin-top:clamp(16px,1.8vw,24px);display:flex;flex-wrap:wrap;gap:8px 10px}
.area-voci li{padding:8px 16px;border-radius:999px;background:rgba(27,23,39,.06);font-size:15px;font-weight:600;letter-spacing:-.01em}
@media (max-width:760px){.aree{grid-template-columns:1fr}}

/* I PRODOTTI: due righe che si cliccano, come l'elenco degli osservatori */
.prod-lista{margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--line)}
.prod-riga{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) auto;
  gap:clamp(16px,3vw,56px);align-items:center;
  padding:clamp(26px,3vw,44px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease);
}
.prod-riga:hover{padding-left:clamp(8px,1vw,16px)}
.prod-riga-nome{font-size:var(--t-prod);font-weight:800;letter-spacing:-.045em;line-height:.94;transition:color .35s var(--ease)}
.prod-riga:hover .prod-riga-nome{color:var(--blu)}
.prod-riga-testo{font-size:var(--t-lede);line-height:1.4;font-weight:500;color:#2B2738;max-width:34ch}
.prod-riga-va{font-size:clamp(28px,2.6vw,40px);font-weight:700;color:var(--ink);transition:transform .45s var(--ease),color .35s var(--ease)}
.prod-riga:hover .prod-riga-va{transform:translateX(10px);color:var(--blu)}
@media (max-width:760px){
  .prod-riga{grid-template-columns:1fr auto;grid-template-areas:"nome va" "testo testo";gap:12px 16px}
  .prod-riga-nome{grid-area:nome}.prod-riga-testo{grid-area:testo}.prod-riga-va{grid-area:va}
}

/* (stili delle pagine prodotto: li usa zelino-team.html) */
.prodotto{margin-top:clamp(48px,6vw,96px)}
.prodotto + .prodotto{margin-top:clamp(64px,8vw,132px)}
/* niente vincolo qui: i "ch" si contano sul corpo del testo normale
   (18px) e strozzavano la frase grande, che era gia' larga la meta'.
   La misura giusta la da' la frase stessa, qui sotto. */
.prod-testa{max-width:none}
.prod-nome{
  margin-top:clamp(8px,1vw,14px);
  font-size:var(--t-prod);font-weight:800;letter-spacing:-.045em;line-height:.94;
}
/* la riga che dice dove vive il prodotto */
.prod-marchio{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(16px,1.8vw,24px);
  font-size:15px;font-weight:600;color:var(--mute)}
.marchio{display:inline-flex;width:17px;height:17px;color:#D77655}
.marchio svg{width:100%;height:100%}

/* i KPI: tre voci, nessun riquadro, solo una riga di colore che le tiene */
.kpi{margin-top:clamp(28px,3.2vw,44px)}
.kpi-tit{font-size:15px;font-weight:600;color:var(--mute)}
.kpi-lista{margin-top:clamp(12px,1.4vw,18px);display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kpi-lista li{padding:clamp(14px,1.5vw,20px) 0;border-top:2px solid var(--ink)}
.kpi-lista li:nth-child(1){border-color:var(--giallo)}
.kpi-lista li:nth-child(2){border-color:var(--viola)}
.kpi-lista li:nth-child(3){border-color:var(--blu)}
.kpi-lista span{font-size:clamp(18px,1.6vw,23px);font-weight:700;letter-spacing:-.028em}

/* le domande dei prodotti: stessa fisarmonica degli osservatori ------ */
.faq{margin-top:clamp(30px,3.6vw,50px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(15px,1.5vw,21px) 0;transition:padding-left .45s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.dom-s{font-size:clamp(18px,1.55vw,22px);line-height:1.25}
.faq summary:hover{padding-left:clamp(8px,1vw,16px)}
.faq summary:hover .dom-s,.faq details[open] .dom-s{color:var(--blu)}
.faq summary:hover .plus::before,.faq summary:hover .plus::after,
.faq details[open] .plus::before{background:var(--blu)}
.faq .a{overflow:hidden}
.faq .a p,.faq .a ul{padding:0 0 clamp(16px,1.8vw,24px);max-width:58ch;
  font-size:var(--t-risp);line-height:1.5;color:#2B2738;font-weight:500}
.faq .a p + p{padding-top:0;margin-top:-.4em}
.faq .a strong{font-weight:800;color:var(--ink)}
.usecase{display:flex;flex-wrap:wrap;gap:8px 10px;max-width:none}
.usecase li{padding:8px 16px;border-radius:999px;background:rgba(27,23,39,.06);
  font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

/* la riga sotto la frase dei contatti */
.contatti-nota{margin-top:clamp(16px,1.8vw,24px);font-size:var(--t-lede);line-height:1.45;font-weight:500;color:var(--mute);max-width:36ch}

/* CHI SIAMO ---------------------------------------------------------- */

/* CLIENTI: un nastro che scorre -------------------------------------- */
.sec-clienti{padding-bottom:clamp(56px,8vw,120px)}
.clienti-tit{font-size:clamp(20px,1.9vw,27px);font-weight:700;letter-spacing:-.03em}
.nastro{margin-top:clamp(22px,2.6vw,36px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.nastro-pista{display:flex;align-items:center;gap:clamp(44px,6vw,92px);width:max-content;
  animation:scorri 42s linear infinite}
body.paused .nastro-pista{animation-play-state:paused}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-i{height:clamp(26px,2.4vw,34px);width:auto;filter:grayscale(1) contrast(1.05);opacity:.72}
.logo-i.tondo{height:clamp(34px,3.1vw,45px)}
.logo-t{font-size:clamp(19px,1.8vw,26px);font-weight:700;letter-spacing:-.03em;color:var(--ink);opacity:.55}

/* CONTATTI ----------------------------------------------------------- */
.form-grid{display:grid;gap:clamp(34px,4.4vw,72px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.campo{display:block;margin-bottom:clamp(18px,2vw,26px)}
.etichetta{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px}
.facolt{display:block;font-size:14px;color:var(--mute);margin:-4px 0 8px}
.campo input,.campo textarea{
  width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:10px 2px;font-family:inherit;font-size:17px;color:var(--ink);
  transition:border-color .3s var(--ease);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--grigio)}
.campo input:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--blu)}
.campo textarea{resize:vertical;min-height:64px}
.form .btn-full{margin-top:clamp(10px,1.4vw,18px)}
.esito{margin-top:14px;font-size:15px;font-weight:600;color:var(--blu);opacity:0;transition:opacity .4s var(--ease)}
.form.sent .esito{opacity:1}
/* inviato: resta solo la conferma */
.form.sent>*:not(.esito){display:none}

/* MODULO · invio dal server (POST /api/demo), come su zelino.ai.
   Queste regole viaggiano INSIEME al blocco del modulo in page.js /
   insight.js: una volta sono andate perse e il campo trappola e' finito
   a schermo (2850b7c). Se si tocca il JS del modulo, si tocca anche qui. */
.form .btn[disabled]{opacity:.55;pointer-events:none}
/* campo trappola: fuori dallo schermo, non `display:none` — i bot che
   compilano tutto ignorano i campi nascosti in quel modo, uno spostato
   fuori vista lo riempiono comunque. */
.trappola{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
/* invio non riuscito: il modulo resta compilato e sopra al bottone compare
   il motivo; page.js mette sul form `ko-rete` (il server non ha risposto)
   o `ko-tetto` (429, tetto per IP). */
.form{position:relative}
.form .ko{display:none;gap:6px;margin-top:14px;padding:14px 16px;border-radius:12px;
  background:rgba(214,58,58,.07);border:1px solid rgba(214,58,58,.28)}
.form.ko-rete .ko,.form.ko-tetto .ko{display:grid}
.form .ko b{font-size:16px;font-weight:800}
.form .ko p{font-size:15px;line-height:1.5;color:#2B2738;display:none}
.form.ko-rete .ko .rete{display:block}
.form.ko-tetto .ko .tetto{display:block}

/* l'hero fermo (telefono) ripete il titolo del film come paragrafo:
   l'<h1> della pagina e' uno solo. Stesso aspetto dei titoli. */
.titolo{font-weight:800;letter-spacing:-.04em;text-wrap:balance}
/* la nota sotto i numeri dell'Osservatorio: i numeri con il loro contesto */
.oss-nota{margin-top:clamp(22px,2.6vw,36px);max-width:62ch;font-size:17px;line-height:1.55;color:var(--mute)}

/* PIEDE -------------------------------------------------------------- */
.pie{padding:clamp(28px,3vw,44px) 0 clamp(34px,4vw,56px);border-top:1px solid var(--line)}
.pie-in{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex-wrap:wrap}
.pie-logo img{height:22px;width:auto;opacity:.7}
.pie-nota{font-size:15px;color:var(--mute)}
.pie-nota:last-child{margin-left:auto}

/* movimento ridotto: tutto fermo, tutto gia' leggibile --------------- */
@media (prefers-reduced-motion:reduce){
  .nastro-pista{animation:none}
  *{scroll-behavior:auto}
}

/* schermi stretti ---------------------------------------------------- */
@media (max-width:980px){
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .lnk.sparisci{display:none}
  .tempo{grid-template-columns:1fr;gap:6px}
  .tempo-n{padding-top:0}
  .pie-nota:last-child{margin-left:0}
}
@media (max-width:460px){
  .lnk{display:none}
  .nav-right .btn-sm{padding:11px 18px}
}

/* il cursore-lente sulle cose cliccabili sta in fondo apposta:
   deve vincere su tutto il resto */
a,button,summary,.lnk,.btn{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%228%22%20fill%3D%22%23F6D81F%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F6F5F3%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M19.2%2019.2%20L28%2028%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%231B1727%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M19.2%2019.2%20L28%2028%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 13 13, pointer}


/* =========================================================
   IL MENU (i tre trattini) · la struttura del sito
   Il tasto sta nella barra, accanto a "Contattaci", e apre un foglio
   di carta che scende da sotto la barra: le tre pagine e le loro
   sezioni. Niente scuro, niente sfumature: carta, grana, una riga.
   ========================================================= */
.menu-btn{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border:0;border-radius:999px;
  background:rgba(27,23,39,.06);color:var(--ink);font:inherit;
  transition:background .3s var(--ease);
}
.js .menu-btn{display:inline-flex}
.menu-btn:hover{background:rgba(27,23,39,.12)}
/* i tre trattini diventano una croce quando il menu e' aperto */
.tratti{position:relative;display:block;width:18px;height:12px}
.tratti i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .42s var(--ease),opacity .18s linear}
.tratti i:nth-child(1){top:0}
.tratti i:nth-child(2){top:5px}
.tratti i:nth-child(3){top:10px}
.menu-btn[aria-expanded="true"] .tratti i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .tratti i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .tratti i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* il pannello: sotto alla barra (che resta cliccabile) e sotto alla grana */
.menu{
  position:fixed;inset:0;z-index:92;overflow:auto;overscroll-behavior:contain;
  background:rgba(27,23,39,0);visibility:hidden;
  transition:background .5s var(--ease),visibility 0s linear .55s;
}
.menu.on{visibility:visible;background:rgba(27,23,39,.16);transition:background .5s var(--ease)}
/* il foglio scende: si scopre dall'alto, senza deformare le scritte */
.menu-foglio{
  display:block;background:var(--canvas);border-bottom:1px solid var(--line);
  /* l'altezza della barra la misura il JS (--barra): le pagine non hanno
     tutte la stessa barra, e cosi' il primo nome non ci finisce mai sotto */
  padding:calc(var(--barra,96px) + clamp(18px,2.4vw,36px)) 0 clamp(34px,4vw,58px);
  clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease);
}
.menu.on .menu-foglio{clip-path:inset(0 0 0 0)}
/* incolonnato come la barra: la prima colonna sotto la Z */
.menu-in{
  width:calc(100% - 2*var(--gutter));margin-inline:auto;
  display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:clamp(20px,3vw,52px);align-items:start;
}
.menu-col{opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms + 130ms)}
.menu.on .menu-col{opacity:1;transform:none}
.menu-pag{font-size:var(--t-voce);font-weight:800;letter-spacing:-.03em;line-height:1;
  margin-bottom:clamp(12px,1.4vw,20px)}
/* la pagina in cui si e' gia' e' nera piena; le altre due piu' chiare,
   e si scuriscono passandoci sopra: nessuna riga colorata sotto al nome */
.menu-pag a{display:inline-block;color:var(--grigio);transition:color .25s var(--ease)}
.menu-pag a[aria-current="page"],.menu-pag a:hover{color:var(--ink)}
.menu-voci a{display:block;padding:7px 0;font-size:var(--t-risp);color:var(--mute);
  transition:color .25s var(--ease),transform .25s var(--ease)}
.menu-voci a:hover{color:var(--ink);transform:translateX(5px)}
@media (max-width:820px){
  /* Zelo sopra, larga quanto tutte e due; i due prodotti affiancati sotto:
     cosi' la struttura sta in uno schermo e non si deve scorrere. */
  .menu-in{grid-template-columns:1fr 1fr;gap:clamp(16px,3.4vw,26px) clamp(14px,3vw,24px)}
  .menu-col:first-child{grid-column:1 / -1}
  .menu-foglio{padding-block:calc(var(--barra,80px) + 18px) clamp(24px,4vw,38px)}
  .menu-pag{margin-bottom:9px}
  .menu-voci a{padding:5px 0;font-size:16px}
}
/* arrivando da un'altra pagina, il titolo non finisce sotto la barra */
section[id],.giostra[id],.kpi[id],.faq[id]{scroll-margin-top:clamp(86px,9vw,118px)}
@media (prefers-reduced-motion: reduce){
  .menu,.menu-foglio,.menu-col,.tratti i,.menu-voci a{transition:none}
}