/* =========================================================
   Zelino Insight · landing Marketers World 2026
   Struttura e stile. Il movimento sta in motion.js:
   togliendo quel file la pagina resta completa e leggibile.
   Regole: niente pallini, niente evidenziatori, niente blocchi
   scuri, nessuna immagine chiusa in un rettangolo.
   ========================================================= */

:root{
  --canvas:#F6F5F3;
  --ink:#1B1727;
  --mute:#6E6879;
  --grigio:#8A8493;   /* il grigio delle domande */
  --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
   e si ferma a 1440px. I rapporti fra i livelli non cambiano mai. */
: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);
}

*{box-sizing:border-box}
/* 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}

/* 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}}

/* tipografia -------------------------------------------------------- */
.xl{font-size:var(--t-xl);line-height:.9}
.xl2{font-size:var(--t-prod);line-height:.94}
/* il nome del prodotto e' la risposta alla domanda: stessa forza di un titolo */
.prod{margin:clamp(10px,1.3vw,18px) 0 0;font-weight:800;letter-spacing:-.04em;line-height:.95}
.lg{font-size:var(--t-lg)}
.lede{font-size:var(--t-lede);line-height:1.4;max-width:30ch;color:var(--ink);font-weight:500}
.body{font-size:clamp(17px,1.15vw,19px);line-height:1.6;color:#2B2738;max-width:56ch}
.note{font-size:16px;color:var(--mute);font-weight:500}
.meccanismo{margin-top:clamp(16px,1.8vw,24px);max-width:48ch}
.meccanismo strong{font-weight:800}
/* Il blocco del test al Village non e' in pagina: la frase e' stata tolta
   il 23 settembre. Lo stile resta pronto per quando tornera' con il
   pulsante di prenotazione e le date. */
.village{margin-top:clamp(18px,2vw,26px);max-width:40ch}
.village p{font-size:clamp(16px,1.25vw,18px);line-height:1.5;font-weight:500;color:var(--ink)}
.village b{font-weight:800}
/* il pulsante del test: chiaro, cosi' il nero resta a "Richiedi una demo" */
.village .btn{margin-top:clamp(16px,1.6vw,22px)}
.btn.chiaro{background:rgba(27,23,39,.07);color:var(--ink);box-shadow:none}
.btn.chiaro:hover{background:rgba(27,23,39,.13);color:var(--ink);box-shadow:none}
.village-date{margin-top:12px;font-size:15px;font-weight:600;color:var(--mute);letter-spacing:-.005em}
.note a{text-decoration:underline;text-underline-offset:4px}
/* La domanda: stesso carattere della risposta, ma sottile.
   E' la differenza che c'e' fra "Insight clamorosi" e la riga sotto. */
.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)}
.risp{
  font-size:var(--t-risp);font-weight:600;letter-spacing:-.015em;line-height:1.45;
  max-width:44ch;margin-top:clamp(14px,1.5vw,20px)
}
.risp .wd{color:rgba(27,23,39,.22);transition:color .12s linear}
.risp .wd.on{color:var(--ink)}

/* 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 b{font-weight:800}
/* la riga che sta sotto al nome: stessa misura, ma non urla */
.say-sotto{margin-top:clamp(2px,.3vw,6px);font-weight:700;color:var(--grigio)}
.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);
}
/* al passaggio il pieno si svuota: diventa chiaro con l'ombra, senza contorni */
.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.wide{width:100%}
.btn-sm{padding:12px 22px;font-size:15px}
.acts{margin-top:clamp(30px,3.4vw,44px)}

/* nav ---------------------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;background:transparent}
/* una riga sottile sotto la barra: senza, sembra che il menu galleggi
   e manchi la cornice */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(27,23,39,.13)}
/* La barra sta sempre ai bordi dello schermo, a qualsiasi larghezza e zoom:
   il logo a sinistra, i pulsanti a destra. Il resto della pagina resta
   centrato nella sua larghezza massima. */
.nav .nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:104px;
  width:100%;max-width:none;padding:0 clamp(20px,3.5vw,56px)}
/* Zelo x Marketers World: la "x" e il nome dell'evento in blu, alti quanto il logo */
.brand-x{display:flex;align-items:center;gap:12px;white-space:nowrap}
.brand-x .x{font-size:30px;font-weight:500;color:var(--blu);line-height:1}
.brand-x .mw{
  font-size:38px;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--blu)
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-x .mw{background-color:currentColor;background-image:url("grana.png");background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.brand img{height:30px;width:auto;display:block}
.nav-right{display:flex;align-items:center;gap:10px}
/* Chi siamo e Contattaci sono pulsanti anche loro, ma bianchi:
   il nero resta a "Richiedi una demo", che e' quello che conta. */
.lnk{
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  padding:11px 18px;border-radius:999px;border:0;
  background:rgba(27,23,39,.055);
  transition:background .3s var(--ease),transform .2s var(--ease)
}
/* nessun contorno: e' un velo sulla carta che si scurisce appena */
.lnk:hover{background:rgba(27,23,39,.11)}
.lnk:active{transform:translateY(1px)}
@media (max-width:900px){.nav-in{height:76px}.brand img{height:22px}.nav-right{gap:8px}.brand-x .mw{font-size:27px}.brand-x .x{font-size:22px}}
@media (max-width:640px){.brand-x .x,.brand-x .mw{display:none}}
/* sul telefono restano tutti e due i tasti che ha chiesto Marta:
   Contattaci porta giu', Richiedi una demo apre il modulo */
/* Sotto i 460px in barra restano i due tasti che ha chiesto Marta:
   "Chi siamo" tornerebbe attaccato al logo. Da 460px in su ci sono tutti. */
@media (max-width:459px){ .lnk[href="#chi-siamo"]{display:none} }
@media (max-width:560px){
  .nav-right{gap:8px}
  .lnk{font-size:14px;padding:9px 13px}
  .btn-sm{font-size:14px;padding:10px 15px}
  .brand img{height:20px}
}
/* i pulsanti della barra non vanno mai a capo */
.lnk,.btn-sm{white-space:nowrap}

/* hero ---------------------------------------------------------------- */
/* 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,
   ognuna ruotata a modo suo. 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-img{align-self:start}
.hero .lede{margin-top:clamp(26px,3vw,40px)}
.hero-img{position:relative}
/* La folla e la lente: tre immagini della stessa misura impilate. Il primo
   strato sta nel flusso e da' l'altezza, gli altri due gli stanno 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}
/* Le formule: i simboli della statistica al posto delle stelline.
   Colore della palette con la grana dei grafici ritagliata sul testo.
   Un po' opache, cosi' non disturbano. Il movimento e' in motion.js. */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr}
  .folla{width:min(100%,520px);margin:0 auto}
}

/* sezioni: un flusso, non blocchi che si alternano -------------------- */
.sec{padding:clamp(80px,11vw,170px) 0;position:relative}
.sec.tight{padding-block:clamp(56px,7vw,100px)}

/* 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))}

.stk-cec img{max-width:340px}
.stk-team{margin-top:clamp(48px,6vw,84px)}
.stk-team img{max-width:1000px;margin-inline:auto}

.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 sull'anello, 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 ---------------------------------------------- */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,44px);margin-top:clamp(40px,5vw,70px)}
.n{display:flex;flex-direction:column;gap:12px}
.n b{font-size:var(--t-num);font-weight:800;letter-spacing:-.045em;line-height:.95}
.n b .slot,.n b .num{display:inline-block;line-height:1;vertical-align:top}
.n b{white-space:nowrap}
.n b{line-height:1}
.n:nth-child(1) b{color:var(--blu)}
/* I numeri prendono la stessa grana dei grafici: 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,.fresh 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
  }
}
.n:nth-child(3) b{color:var(--blu)}
.n > span strong{font-weight:700;color:var(--ink)}
.n > span{font-size:16px;line-height:1.4;color:var(--mute);max-width:22ch;font-weight:500}
/* la riga che dice che i dati sono vivi: pesa quanto una risposta */
.fresh{
  margin:clamp(38px,4.4vw,58px) 0 0;max-width:none;white-space:nowrap;
  font-size:clamp(21px,2vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.2;
  color:var(--ink)
}
.fresh b{font-weight:700;color:var(--blu)}
@media (max-width:900px){.nums{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.nums{grid-template-columns:1fr}}

/* osservatori verticali: un elenco che si apre, non dei riquadri ------- */
.vert{margin-top:clamp(30px,4vw,50px);max-width:900px}
.vert details{border-bottom:1px solid var(--line)}
.vert details:first-child{border-top:1px solid var(--line)}
.vert summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-size:var(--t-voce);font-weight:700;letter-spacing:-.03em;line-height:1.15;
  padding:clamp(16px,1.8vw,24px) 18px;margin-inline:-18px;border-radius:6px;
  transition:background .3s var(--ease),color .25s var(--ease),padding-left .45s var(--ease)
}
.vert summary::-webkit-details-marker{display:none}
/* qui la barra non si colora: si colora la scritta, come prima */
.vert summary:hover{color:var(--blu);padding-left:30px}
.vert summary:hover .plus::before,.vert summary:hover .plus::after{background:var(--blu)}
.vert details[open] .plus{transform:rotate(45deg)}
.vert .a{padding:0 0 26px;overflow:hidden}
.vert .a p{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--ink);max-width:56ch;font-weight:500;letter-spacing:-.01em}

/* Zelino Insight -------------------------------------------------------- */

/* la riga sotto la foto di gruppo */
.stk-team figcaption{
  margin-top:clamp(16px,1.8vw,24px);text-align:center;
  font-size:clamp(19px,1.9vw,26px);font-weight:700;letter-spacing:-.03em;color:var(--ink)
}

/* il video ---------------------------------------------------------------- */
/* Lo spazio del video. Quando arriva l'mp4 questo blocco diventa un <video>
   con le stesse misure: la sezione non si muove di un pixel. */
.player{
  position:relative;margin:clamp(40px,5vw,64px) auto 0;max-width:940px;aspect-ratio:16/9;
  border-radius:20px;color:var(--ink);
  background:linear-gradient(158deg,rgba(240,238,234,.55),rgba(231,228,222,.55)),
             url("demo-poster.webp") center/cover no-repeat, #EFEDE9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 14px 16px 0 rgba(27,23,39,.06);
}
.play{width:clamp(62px,7vw,86px);aspect-ratio:1;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.play::before{content:"";width:0;height:0;margin-left:5px;border-left:20px solid var(--canvas);border-top:13px solid transparent;border-bottom:13px solid transparent}
.player-lab{font-size:clamp(17px,1.6vw,21px);font-weight:600;color:var(--mute)}

/* chi siamo ---------------------------------------------------------------- */
.cec{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(26px,4vw,64px);align-items:start;margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.cec-txt h3{font-size:clamp(28px,3.4vw,46px)}
.cec-txt .role{margin-top:10px;font-size:17px;font-weight:600;color:var(--blu)}
.cec-txt .body{margin-top:18px}
.cec-txt .body+.body{margin-top:14px}
.credits{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px}
.credits li{font-size:16px;font-weight:600;color:var(--blu)}
@media (max-width:860px){.cec{grid-template-columns:1fr}.stk-cec img{max-width:260px}}

/* clienti ------------------------------------------------------------------ */
.marquee{overflow:hidden;margin-top:clamp(26px,3vw,40px);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;align-items:center;width:max-content;animation:mq 46s linear infinite}
/* i loghi in bianco e nero, tutti alla stessa altezza */
.logo-i{display:block;height:clamp(26px,2.4vw,38px);width:auto;margin:0 clamp(28px,3.4vw,54px);
  filter:grayscale(1) contrast(1.05);opacity:.82}
.logo-i.tondo{height:clamp(40px,3.4vw,56px)}
/* i due che ancora non ho (Plenitude, ITAS) sono scritti col tono dei loghi */
.logo-t{opacity:.82}
.logo-t{font-size:clamp(30px,3.8vw,56px);font-weight:700;letter-spacing:-.04em;padding:0 clamp(24px,3vw,48px);white-space:nowrap;color:var(--ink);opacity:.22;transition:opacity .3s}
.logo-t:hover{opacity:1}
@keyframes mq{to{transform:translateX(-50%)}}
body.paused .track{animation-play-state:paused}

/* faq ---------------------------------------------------------------------- */
.faq{max-width:none;margin-top:clamp(30px,4vw,52px)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:clamp(20px,2.1vw,28px) 18px;margin-inline:-18px;border-radius:8px;font-size:var(--t-voce);font-weight:400;line-height:1.2;
  transition:background .3s var(--ease),color .25s var(--ease),padding-left .45s var(--ease)
}
/* passandoci sopra la riga si sposta e si colora, come gli osservatori verticali */
.faq summary:hover{background:var(--ink);color:var(--canvas);padding-left:34px}
.faq summary:hover .plus::before,.faq summary:hover .plus::after{background:var(--canvas)}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative;width:30px;height:30px;flex:none;transition:transform .4s var(--ease)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--ink);translate:-50% -50%}
.plus::after{rotate:90deg}
.faq details[open] .plus{transform:rotate(45deg)}
.faq .a{padding:0 0 26px;overflow:hidden}
.faq .a p{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--ink);max-width:58ch;font-weight:500;letter-spacing:-.01em}
.faq .a p+p{margin-top:12px}

/* contatti ------------------------------------------------------------------ */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:start}
#contatti .note{margin-top:clamp(24px,3vw,36px)}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}}

.form{display:grid;gap:16px;position:relative}
.form label{display:grid;gap:8px;font-size:15px;font-weight:600}
.form label span{font-weight:400;color:var(--mute)}
.form input,.form textarea{
  font-family:inherit;font-size:17px;padding:16px 0;border:0;border-bottom:2px solid var(--line-2);
  background:transparent;color:var(--ink);width:100%;font-weight:500;border-radius:0
}
.form input::placeholder,.form textarea::placeholder{color:#A39DAE;font-weight:400}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--ink)}
.form textarea{resize:vertical;min-height:70px}
.form .btn{margin-top:14px}
.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}
.form-note{font-size:14.5px;color:var(--mute);text-align:center;font-weight:500}
.form .ok{display:none;gap:8px}
.form.sent .ok{display:grid}
.form.sent>*:not(.ok){display:none}
.form .ok b{font-size:24px;font-weight:800;letter-spacing:-.03em}
.form .ok p{font-size:17px;line-height:1.55;color:#2B2738}
.form .ok a{text-decoration:underline;text-underline-offset:3px}

/* footer --------------------------------------------------------------------- */
footer{padding:clamp(50px,6vw,80px) 0 44px;border-top:1px solid var(--line)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15px;line-height:1.5;color:var(--mute)}
.foot-logo{height:38px;width:auto}
.foot-r{text-align:right}
.foot-r a{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
@media (max-width:700px){.foot-in{flex-direction:column;align-items:flex-start}.foot-r{text-align:left}}

/* movimento ridotto: tutto fermo, tutto già leggibile ------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-a]{opacity:1!important;transform:none!important;filter:none!important}
  .say .wd,.risp .wd{color:var(--ink)!important}
}

/* Sul telefono restano solo gli aggiustamenti che la scala non copre. */
@media (max-width:560px){
  .fresh{font-size:19px;white-space:normal}
  .stk-team figcaption{font-size:18px}
}

/* Il cursore delle cose cliccabili sta in fondo apposta:
   deve avere l'ultima parola su .btn, .faq summary e compagnia. */
a,button,summary,label,input,textarea,.btn,.player,.faq summary,.vert summary,.form button{
  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%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%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 CAROSELLO DEGLI INSIGHT -----------------------------------------
   Ogni card e' una schermata di Claude: il marchio, la domanda nella
   bolla grigia, la riga che dice cosa sta facendo (interpella Zelino)
   e la risposta. Le card scorrono di lato mentre la pagina resta ferma:
   una alla volta al centro, le vicine che sbucano ai bordi.
   Sul telefono e senza JS si trascinano a mano con l'aggancio. */
.giostra{
  --carta:min(86vw,1120px);   /* larghezza di una card: uguale per tutte,
                                 altrimenti l'aggancio al centro non torna */
  --barra:0px;                /* larghezza della barra di scorrimento */
  margin-top:clamp(56px,14vw,210px)
}
/* niente titolo sopra il carosello: restano solo le due frecce, a destra */
.giostra-testa{display:flex;align-items:center;justify-content:flex-end;gap:20px;
  margin-bottom:clamp(14px,1.4vw,20px)}
.giostra-frecce{display:flex;gap:8px}
.frec{
  width:46px;height:46px;border-radius:999px;border:0;background:rgba(27,23,39,.055);
  color:var(--ink);font-size:18px;line-height:1;cursor:pointer;
  transition:background .3s var(--ease),opacity .3s var(--ease),transform .2s var(--ease)
}
.frec:hover{background:rgba(27,23,39,.11)}
.frec:active{transform:translateY(1px)}
.frec[disabled]{opacity:.28;pointer-events:none}

.giostra-pista{width:100%;overflow:hidden}
/* i fianchi tengono la card al centro esatto dello schermo */
.giostra-fila{display:flex;align-items:stretch;gap:clamp(18px,1.8vw,28px);width:max-content;
  padding:4px calc((100vw - var(--barra) - var(--carta)) / 2) 16px}

/* la schermata ------------------------------------------------------ */
/* la card e' il titolo del settore piu' la finestra di Claude sotto */
.card{
  flex:0 0 var(--carta);
  display:flex;flex-direction:column;
  transition:opacity .55s var(--ease)
}
.card-tit{
  font-size:clamp(23px,2.36vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.1;
  color:var(--ink);margin:0 0 clamp(11px,1.1vw,16px) 2px
}
.schermo{
  flex:1;background:#FCFBF9;border:1px solid rgba(27,23,39,.10);border-radius:20px;
  box-shadow:0 18px 40px -28px rgba(27,23,39,.30);
  display:flex;flex-direction:column;overflow:hidden
}
/* quella al centro e' accesa, le vicine restano indietro: l'occhio sa
   subito dove guardare e le card che stanno ancora arrivando non
   sembrano vuote, sembrano in attesa */
.giostra.viva .card{opacity:.32}
.giostra.viva .card.qui{opacity:1}
/* la barra della finestra, come in cima a una chat */
.card-barra{display:flex;align-items:center;gap:12px;
  padding:13px clamp(18px,1.8vw,26px);border-bottom:1px solid rgba(27,23,39,.08)}
.card-chi{display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.marchio{display:inline-flex;width:16px;height:16px;color:#D97757}
.marchio svg{width:100%;height:100%;display:block}
.marchio.sm{width:13px;height:13px}

.card-corpo{display:flex;flex-direction:column;flex:1;
  padding:clamp(16px,1.6vw,24px) clamp(18px,1.8vw,26px) clamp(16px,1.6vw,22px)}

/* la domanda: il messaggio di chi scrive, nella bolla grigia */
.card-dom{
  align-self:flex-end;max-width:min(100%,66ch);
  background:#EEECE7;border-radius:14px;padding:12px 17px;
  font-size:clamp(15px,1.1vw,16.5px);font-weight:500;line-height:1.45;
  letter-spacing:-.012em;color:var(--ink)
}
/* la riga che dice cosa sta facendo: e' Claude che chiama Zelino */
.card-passo{margin-top:clamp(16px,1.6vw,22px)}
/* Il passo di Claude, come nella sua schermata: prima la riga che dice
   cosa sta facendo, poi sotto, piu' piccola e grigia, la riga di servizio
   col marchio. La risposta viene dopo, staccata. */
.card-azione{display:block;font-size:clamp(14.5px,1.06vw,15.5px);font-weight:600;
  line-height:1.5;letter-spacing:-.012em;color:var(--ink)}
.card-azione b{font-weight:700;color:var(--blu)}
.card-azione .chev{margin-left:7px;color:var(--mute);font-weight:500}
.card-meta{display:flex;align-items:center;gap:8px;margin-top:4px;
  font-size:12.5px;font-weight:500;color:var(--mute);letter-spacing:-.005em}
.card-meta .marchio{flex:0 0 auto}
.pnt3{display:inline-flex;gap:4px;align-items:center}
.pnt3 i{width:4.5px;height:4.5px;border-radius:999px;background:var(--blu);display:block;opacity:.85}

/* la risposta: testo di Claude, su due colonne per restare leggibile */
.card-ris{margin-top:clamp(20px,2vw,28px);padding-top:clamp(18px,1.8vw,24px);
  border-top:1px solid rgba(27,23,39,.09);
  columns:2;column-gap:clamp(26px,2.6vw,46px)}
.card-ris p{font-size:clamp(14.5px,1.02vw,15.5px);line-height:1.5;color:#221E2E;
  letter-spacing:-.003em;margin-bottom:9px}
.card-ris strong{font-weight:700;color:var(--ink)}
/* Le due card lunghe (newsletter, LinkedIn): la risposta ha dei titoletti e
   degli elenchi, ed e' molto piu' lunga. Tre colonne invece di due, cosi' la
   card resta larga e bassa come le altre. */
.card-lunga .card-ris{columns:4;column-gap:clamp(18px,1.8vw,30px)}
/* nelle card lunghe le voci possono spezzarsi fra una colonna e l'altra:
   tenerle intere lascerebbe colonne mezze vuote e la card diventa altissima */
.card-lunga .card-elenco,.card-lunga .card-punti{break-inside:auto}
/* l'elenco puo' passare da una colonna all'altra, ma un punto elenco
   resta sempre tutto nella stessa colonna: mai una frase tagliata a meta' */
.card-lunga .card-elenco li,.card-lunga .card-punti li{break-inside:avoid;margin-bottom:6px}
/* la domanda, che qui e' lunga, sta su misura piu' piccola */
.card-lunga .card-dom{font-size:clamp(14px,1.02vw,15.2px);padding:11px 15px}
.card-lunga .card-barra{padding-block:10px}
.card-lunga .card-corpo{padding-block:17px 16px}
.card-lunga .card-passo{margin-top:12px}
.card-lunga .card-ris{margin-top:15px;padding-top:14px}
.card-lunga .card-ris p,.card-lunga .card-elenco li,.card-lunga .card-punti li{
  font-size:clamp(12.5px,.89vw,13.4px);line-height:1.42}
.card-lunga .card-elenco,.card-lunga .card-punti{padding-left:1em}
/* i titoletti dentro la risposta: non restano mai soli in fondo a una colonna */
.ris-tit{font-weight:800;color:var(--ink);break-after:avoid;margin-top:2px}
.ris-sot{font-weight:700;color:var(--ink);break-after:avoid;margin-top:2px}
.card-lunga .ris-tit{font-size:clamp(13.5px,.95vw,14.4px)}
.card-lunga .ris-sot{font-size:clamp(12.5px,.89vw,13.4px)}
.card-punti{margin:0;padding-left:1.1em;list-style:disc}
.card-punti li{font-size:clamp(14.5px,1.02vw,15.5px);line-height:1.48;color:#221E2E;margin-bottom:7px;break-inside:avoid}
.card-punti li::marker{color:var(--blu)}
.card-punti strong{font-weight:800;color:var(--ink)}
.card-elenco{margin:0;padding-left:1.15em;list-style:decimal;break-inside:avoid}
.card-elenco li{font-size:clamp(14.5px,1.02vw,15.5px);line-height:1.48;color:#221E2E;margin-bottom:7px}
.card-elenco li::marker{font-weight:700;color:var(--blu)}
.card-elenco strong{font-weight:700;color:var(--ink)}

/* Finestre basse: la schermata si stringe, cosi' ci sta tutta. */
@media (min-width:1250px) and (max-height:880px){
  .card-corpo{padding-block:16px}
  .card-ris p,.card-elenco li{font-size:14px;line-height:1.46;margin-bottom:7px}
  .card-ris{margin-top:16px;padding-top:16px}
  .card-dom{font-size:15px;padding:11px 15px}
  .card-tit{font-size:24px;margin-bottom:10px}
  /* le due card lunghe hanno selettori piu' forti: qui vanno strette apposta */
  .card-lunga .card-ris p,.card-lunga .card-elenco li,.card-lunga .card-punti li{font-size:12.4px;line-height:1.4}
  .card-lunga .ris-tit{font-size:13px}
  .card-lunga .ris-sot{font-size:12.4px}
  .card-lunga .card-dom{font-size:14px;padding:9px 14px}
  .card-lunga .card-corpo{padding-block:14px 13px}
  .giostra-testa{margin-bottom:14px}
  .topblur,.topblur i{height:148px}
}
@media (min-width:1250px) and (max-height:780px){
  .card-barra{padding-block:10px}
  .card-corpo{padding-block:13px}
  .card-ris p,.card-elenco li{font-size:13.2px;line-height:1.4;margin-bottom:6px}
  .card-ris{margin-top:13px;padding-top:12px}
  .card-dom{font-size:14.2px;padding:9px 14px}
  .card-passo{margin-top:12px}
  .card-azione{font-size:13.5px}
  .card-tit{font-size:21px;margin-bottom:8px}
  .card-lunga .card-ris p,.card-lunga .card-elenco li,.card-lunga .card-punti li{font-size:11.6px;line-height:1.36}
  .card-lunga .ris-tit{font-size:12.2px}
  .card-lunga .ris-sot{font-size:11.6px}
  .card-lunga .card-dom{font-size:13px;padding:8px 12px}
  .card-lunga .card-barra{padding-block:8px}
  .card-lunga .card-corpo{padding-block:12px 11px}
  .card-lunga .card-passo{margin-top:9px}
  .card-lunga .card-ris{margin-top:11px;padding-top:10px}
  .giostra-testa{margin-bottom:10px}
  .giostra-fila{padding-bottom:10px}
  .topblur,.topblur i{height:132px}
}
/* Finestra troppo bassa o troppo stretta perche' una card ci stia intera:
   la pagina non si ferma, la fila si scorre da sola (con le frecce o col
   dito) e il sito prosegue. Le card restano quelle del computer. */
@media (max-width:1249px),(max-height:699px){
  .giostra-pista{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .giostra-pista::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:center}
}
/* Schermo stretto: le due card lunghe scendono di colonne. Con quattro
   colonne il testo diventa illeggibile e la card non riesce nemmeno a
   stringersi, perche' le colonne le fanno da larghezza minima. */
@media (max-width:1249px){
  .card-lunga .card-ris{columns:3}
}
@media (max-width:899px){
  .giostra{--carta:min(88vw,560px)}
  /* qui le card non sono piu' tutte alte uguali: ognuna e' alta quanto il
     suo testo, se no le due lunghe stiravano anche le altre cinque */
  .giostra-fila{align-items:flex-start}
  .giostra-frecce{display:none}
  .giostra-pista{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .giostra-pista::-webkit-scrollbar{display:none}
  .giostra-fila{padding-inline:calc((100vw - var(--carta)) / 2)}
  .card{scroll-snap-align:center}
  .card-ris{columns:1}
  .card-dom{max-width:100%}
  /* le card lunghe hanno selettori piu' forti: qui vanno riportate a una
     colonna sola e al corpo normale, come tutte le altre */
  .card-lunga .card-ris{columns:1}
  .card-lunga .card-ris p,.card-lunga .card-elenco li,.card-lunga .card-punti li{
    font-size:14.6px;line-height:1.5}
  .card-lunga .ris-tit{font-size:15.6px}
  .card-lunga .ris-sot{font-size:14.6px}
  .card-lunga .card-dom{font-size:15px;padding:11px 15px}
  .card-lunga .card-corpo{padding-block:17px 16px}
}