@font-face{
  font-family:'Neue Haas Grotesk Display Pro';
  src:url('assets/fonts/NeueHaasDisplayRoman.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Neue Haas Grotesk Display Pro';
  src:url('assets/fonts/NeueHaasDisplayMediu.woff') format('woff');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('assets/fonts/JetBrainsMonoMedium.woff') format('woff');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   BOOONSAI · Analisi AI — styles.css
   Token colore in :root, stili in classi. Desktop-first.
   ============================================================ */

:root{
  --teal:#004B50;
  --teal-dark:#00373B;
  --teal-mid:#006169;
  --green:#00D68D;
  --green-hover:#1FE39E;
  --green-pic:#06DB8F;
  --green-dark:#00A86E;
  --lime:#D6F26B;
  --lime-hover:#E2F98C;
  --purple:#D9B3FC;
  --purple-dark:#B084E8;
  --purple-light:#E8D2FE;
  --ink:#0F1E1E;
  --grey:#4A5A5A;
  --grey-2:#7F8C8B;
  --grey-3:#3C4A4A;
  --grey-ph:#8A9997;
  --border:#E7E9E8;
  --surface:#F6F8F7;
  --white:#FFFFFF;

  --cta-green:#01DC94;
  --cta-green-hover:#2BE6A6;
  --cta-purple:#DEBAFF;
  --cta-purple-hover:#E9D0FF;
  --cta-ink:#030712;

  --maxw:1280px;
  --pad-x:56px;
  --font-sans:'Neue Haas Grotesk Display Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal)}
a:hover{color:var(--green-dark)}
img{max-width:100%}
[hidden]{display:none !important}

/* ---------- Tipografia condivisa ---------- */
.mono{font-family:var(--font-mono)}
.body{font-size:16px;line-height:1.65;color:var(--grey);margin:0}
.body--16{font-size:16px;line-height:1.55}
.body--17{font-size:17px;line-height:1.65}
.body strong,.perche__copy strong,.problema .body strong,.ricevi__lead strong,.cosae .body strong,.serve__lead strong{color:var(--teal);font-weight:500}
strong{font-weight:500}
.accent-green{color:var(--green)}

.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;margin:0 0 16px}
.eyebrow--grey{color:var(--grey)}
.eyebrow--green{color:var(--green-dark)}
.eyebrow--teal{color:var(--teal)}
.eyebrow--purple{color:var(--purple-dark)}

/* ---------- Bottoni ---------- */
.btn{
  font-family:var(--font-mono);
  font-size:14px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;
  border:none;border-radius:999px;cursor:pointer;
  padding:6px 16px;
  transition:all 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.btn:active{transform:translateY(1px)}
.btn--green{background:var(--cta-green);color:var(--cta-ink)}
.btn--green:hover{background:var(--cta-green-hover)}
.btn--purple{background:var(--cta-purple);color:var(--cta-ink)}
.btn--purple:hover{background:var(--cta-purple-hover)}
.btn--teal{background:var(--teal);color:var(--white)}
.btn--teal:hover{background:var(--teal-dark)}
.btn[disabled]{opacity:0.7;cursor:default}
.btn[disabled]:active{transform:none}

/* ---------- Layout helper ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:120px var(--pad-x) 110px}

/* ============================================================
   HERO + HEADER
   ============================================================ */
.hero{
  position:relative;background:var(--teal);min-height:79svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:56px;overflow:hidden;
}
.site-header{position:absolute;top:0;left:0;right:0;z-index:3}
.site-header__inner{max-width:var(--maxw);margin:0 auto;padding:30px var(--pad-x);text-align:left}
.site-header__logo{display:inline-block}
.logo--white{height:24px;width:auto;display:block;filter:brightness(0) invert(1)}

.hero__eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--lime);margin:0 0 min(28px,3vh)}
.hero__title{font-size:clamp(38px,7vh,72px);font-weight:500;letter-spacing:-0.025em;line-height:1.04;color:var(--white);margin:0 auto;max-width:19ch;text-wrap:pretty}
.hero__sub{font-size:clamp(18px,2.8vh,24px);font-weight:500;line-height:1.4;color:var(--white);margin:min(22px,2.6vh) auto 0;max-width:58ch;text-wrap:pretty}
.hero__lead{font-size:clamp(15px,2.2vh,19px);line-height:1.6;color:rgba(255,255,255,0.72);margin:min(30px,3.2vh) auto 0;max-width:58ch;text-wrap:pretty}
.hero__cta{display:flex;justify-content:center;margin:min(38px,4vh) 0 0}

/* ============================================================
   STRISCIA LOGHI
   ============================================================ */
.logos{background:var(--teal);border-top:1px solid rgba(255,255,255,0.08);padding:40px 0}
/* Le sfumature ai bordi sono due pseudo-elementi sopra la fascia, non un mask-image:
   su iOS un layer animato largo migliaia di px dentro un contenitore mascherato viene
   ricomposto a ogni frame e a tratti resta vuoto o si ferma. */
.logos__mask{position:relative;overflow:hidden;width:100%}
.logos__mask::before,.logos__mask::after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:1;pointer-events:none}
.logos__mask::before{left:0;background:linear-gradient(90deg,var(--teal),rgba(0,75,80,0))}
.logos__mask::after{right:0;background:linear-gradient(270deg,var(--teal),rgba(0,75,80,0))}
/* Nessun padding orizzontale e distanza come margin-right di ogni logo: così la metà
   esatta del nastro coincide con l'inizio della seconda copia e il loop non salta. */
.logos__track{display:flex;align-items:center;width:max-content;padding:4px 0;animation:bmq 36s linear infinite;will-change:transform}
.logos__track img{flex:none;width:auto;display:block;margin-right:60px;filter:brightness(0) invert(1);opacity:0.6}
@keyframes bmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   02 · IL PROBLEMA
   ============================================================ */
.problema__title{font-size:48px;font-weight:500;letter-spacing:-0.02em;line-height:1.06;color:var(--teal);margin:0;max-width:22ch;text-wrap:balance}
.hl{background:linear-gradient(120deg,var(--purple) 0%,var(--lime) 100%);padding:0 10px;border-radius:10px}
.problema__list{margin:64px 0 0}
.problema__row{display:grid;grid-template-columns:180px 1fr 1.2fr;gap:40px;align-items:start;padding:40px 0;border-top:1px solid var(--border)}
.problema__row--last{padding:40px 0 0}
.bignum{font-size:96px;font-weight:500;letter-spacing:-0.03em;line-height:0.9;margin:0}
.bignum--purple{color:var(--purple)}
.bignum--green{color:var(--green)}
.bignum--lime{color:var(--lime)}
.problema__h{font-size:24px;font-weight:500;letter-spacing:-0.012em;line-height:1.2;color:var(--teal);margin:0;text-wrap:pretty}

/* ============================================================
   03 · COSA È
   ============================================================ */
.cosae{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:110px 0}
.cosae__grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);display:grid;grid-template-columns:0.9fr 1.1fr;gap:80px;align-items:start}
.cosae__title{font-size:48px;font-weight:500;letter-spacing:-0.02em;line-height:1.08;color:var(--teal);margin:0;max-width:16ch;text-wrap:pretty}
.cosae .body--17{color:var(--grey);margin:24px 0 0}
.cosae__misura-label{margin:0 0 22px}
.rail{position:relative}
.rail__items{display:flex;flex-direction:column;gap:26px}
.rail__item{position:relative;display:flex;gap:22px;align-items:flex-start}
/* Linea agganciata agli item, non al contenitore: da ogni disco al bordo superiore
   dell'item successivo; il disco seguente, opaco, copre il tratto fino al suo centro.
   L'ultimo item non ne ha, così la linea finisce sull'ultimo disco. */
.rail__item:not(:last-child)::before{content:"";position:absolute;left:27px;top:28px;bottom:-26px;width:2px;background:rgba(0,214,141,0.35)}
.rail__disc{position:relative;flex:none;width:56px;height:56px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center}
.rail__body{padding-top:4px}
.rail__h{font-size:18px;font-weight:500;letter-spacing:-0.01em;color:var(--teal);margin:0 0 5px}

/* ============================================================
   04 · COSA RICEVI (carosello)
   ============================================================ */
.ricevi{text-align:center}
.ricevi__title{font-size:48px;font-weight:500;letter-spacing:-0.02em;line-height:1.08;color:var(--teal);margin:0 auto;max-width:26ch;text-wrap:pretty}
.ricevi__lead{color:var(--grey);margin:22px auto 0;max-width:66ch;text-wrap:pretty}

/* --car-shift è lo scarto per slide usato dal transform in main.js:
   2*padding − gap. Cambiando padding o gap nei breakpoint resta coerente. */
.car{--car-pad:50px;--car-gap:24px;--car-shift:calc(var(--car-pad)*2 - var(--car-gap));position:relative;margin:60px auto 0}
.car__viewport{overflow-x:clip;overflow-y:visible;width:100%}
.car__track{display:flex;align-items:flex-start;gap:var(--car-gap);padding:2px var(--car-pad);transition:transform 380ms cubic-bezier(0.22,0.7,0.2,1);will-change:transform}
.car__slide{flex:0 0 100%;box-sizing:border-box;aspect-ratio:16/9;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--white)}
.car__slide:not(.car__slide--end) img{display:block;width:100%;height:100%;object-fit:contain}
.car__slide--end{border:none;background:var(--teal);display:flex;flex-direction:column;justify-content:space-between;padding:44px 56px;text-align:left}
.car__end-top{display:flex;align-items:center;justify-content:space-between}
.car__end-logo{height:26px}
.car__end-tag{font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin:0}
.car__end-mid{max-width:62ch;margin:0 auto;text-align:center}
.car__end-eyebrow{font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--lime);margin:0 0 20px}
.car__end-title{font-size:48px;font-weight:500;letter-spacing:-0.022em;line-height:1.06;color:var(--white);margin:0;text-wrap:pretty}
.car__end-lead{font-size:17px;line-height:1.6;color:rgba(255,255,255,0.72);margin:20px auto 0;max-width:52ch;text-wrap:pretty}
.car__end-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin:34px 0 0}
.car__end-sub{font-size:12px;letter-spacing:0.04em;color:rgba(255,255,255,0.5);margin:0}
.car__arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:none;background:var(--teal);color:var(--lime);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,75,80,0.35);transition:background 200ms ease,opacity 200ms ease}
.car__arrow:hover{background:var(--teal-mid)}
.car__arrow--prev{left:-22px}
.car__arrow--next{right:-22px}
.car__arrow.is-disabled{opacity:0.35}
.car__footer{display:flex;align-items:center;justify-content:center;gap:16px;margin:26px 0 0}
.car__dots{display:flex;align-items:center;gap:9px}
.car__dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;cursor:pointer;background:#D0D6D5;transition:background 200ms ease}
.car__dot.is-active{background:var(--teal)}
.car__label{font-size:12px;font-weight:500;letter-spacing:0.08em;color:var(--grey-2);margin:0}


/* ============================================================
   05 · COSA SERVE A TE
   ============================================================ */
.serve{background:radial-gradient(120% 100% at 20% 20%, var(--purple-light) 0%, var(--purple) 35%, var(--lime) 100%);padding:116px 0 104px}
.serve__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.serve__head{text-align:center}
.serve__title{font-size:58px;font-weight:500;letter-spacing:-0.022em;line-height:1.02;color:var(--teal);margin:0 auto;max-width:18ch;text-wrap:balance}
.serve__lead{font-size:18px;line-height:1.6;color:var(--teal);opacity:0.78;margin:22px auto 0;max-width:56ch;text-wrap:pretty}
.serve__lead strong{opacity:1}
.steps{position:relative;margin:64px auto 0;max-width:1180px}
.steps__line{position:absolute;top:43px;left:12%;right:12%;height:2px;background:var(--teal);opacity:0.35}
.steps__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{display:flex;flex-direction:column;align-items:center;text-align:center}
.step__num{flex:none;width:52px;height:52px;border-radius:50%;background:var(--teal);color:var(--lime);font-family:var(--font-mono);font-size:18px;font-weight:500;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(214,242,107,0.55)}
/* teal come la CTA della sezione: il verde scuro sul gradiente stava sotto 2.5:1 */
.step__time{font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal);margin:20px 0 0}
.step__h{font-size:20px;font-weight:500;letter-spacing:-0.01em;color:var(--teal);margin:8px 0 8px}
.step__d{font-size:14.5px;line-height:1.55;color:var(--grey-3);margin:0;max-width:26ch}
.serve__cta{text-align:center;margin:60px 0 0}

/* ============================================================
   06 · PERCHÉ NOI
   ============================================================ */
.perche{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.perche__inner{max-width:var(--maxw);margin:0 auto;padding:110px var(--pad-x) 104px}
.perche__grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:88px;align-items:start}
.perche__title{font-size:40px;font-weight:500;letter-spacing:-0.025em;line-height:1.1;color:var(--teal);margin:0;text-wrap:pretty}
.perche__copy{display:flex;flex-direction:column;gap:16px;margin:32px 0 0}
.perche__copy .body{text-wrap:pretty}
.perche__cta{margin:32px 0 0}
.perche__cards{display:flex;flex-direction:column;gap:16px}
.pcard{background:var(--white);border:1px solid var(--border);box-shadow:0 1px 2px rgba(15,30,30,0.05);border-radius:24px;padding:32px 36px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.pcard__num{font-family:var(--font-sans);font-size:34px;font-weight:500;letter-spacing:-0.03em;line-height:1;margin:0}
.pcard__num--green{color:var(--green)}
.pcard__num--lime{color:var(--lime)}
.pcard__num--purple{color:var(--purple)}
.pcard__body{display:flex;flex-direction:column;gap:10px}
.pcard__h{font-size:20px;font-weight:500;letter-spacing:-0.01em;line-height:1.25;color:var(--teal);margin:0;text-wrap:pretty}
.pcard__d{font-size:15px;line-height:1.6;color:var(--grey);margin:0;text-wrap:pretty}

/* ============================================================
   06b · AI ACT / GOVERNANCE
   ============================================================ */
.gov{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.gov__inner{max-width:var(--maxw);margin:0 auto;padding:110px var(--pad-x) 104px}
.gov__title{font-size:40px;font-weight:500;letter-spacing:-0.025em;line-height:1.1;color:var(--teal);margin:0;max-width:22ch;text-wrap:pretty}
/* Card bianca con bordo, come le .perchi__card: su fondo --surface una card --surface sparirebbe. */
.gov__card{background:var(--white);border:1px solid var(--border);box-shadow:0 1px 2px rgba(15,30,30,0.05);border-radius:24px;padding:32px 36px;margin:32px 0 0;display:flex;flex-direction:column;gap:16px;max-width:900px}
.gov__card .body{text-wrap:pretty}
.gov__cta{display:inline-block;margin:26px 0 0;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--teal);text-decoration:none;border-bottom:1.5px solid var(--green)}
.gov__cta:hover{color:var(--green-dark);border-bottom-color:var(--green-dark)}

/* ============================================================
   07 · PER CHI È / NON È
   ============================================================ */
.perchi{background:var(--white);padding:110px 0}
.perchi__inner{max-width:1080px;margin:0 auto;padding:0 var(--pad-x)}
.perchi__title{text-align:center;font-size:44px;font-weight:500;letter-spacing:-0.02em;line-height:1.08;color:var(--teal);margin:0 auto;max-width:24ch}
.perchi__lead{text-align:center;font-size:17px;line-height:1.6;color:var(--grey);margin:16px auto 0;max-width:52ch}
.perchi__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:52px 0 0;align-items:stretch}
.perchi__card{background:var(--white);border:1px solid var(--border);border-radius:24px;padding:34px 38px;box-shadow:0 1px 2px rgba(15,30,30,0.05)}
.perchi__item{display:flex;gap:12px;font-size:15px;line-height:1.55;color:var(--ink);margin:0;padding:14px 0;border-top:1px solid var(--border)}
.perchi__mark{flex:none;font-weight:500}
.perchi__mark--yes{color:var(--green-dark)}
.perchi__mark--no{color:var(--purple-dark)}

/* ============================================================
   08 · FORM
   ============================================================ */
.formsec{background:var(--teal);padding:110px var(--pad-x) 104px}
.formsec__eyebrow{text-align:center;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);margin:0 0 16px}
.formsec__title{text-align:center;font-size:44px;font-weight:500;letter-spacing:-0.02em;color:var(--white);margin:0}
.formsec__lead{text-align:center;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,0.72);margin:18px auto 0;max-width:58ch;text-wrap:pretty}
.formsec__lead strong{color:var(--white);font-weight:500}

.form{max-width:580px;margin:44px auto 0;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:28px;padding:40px 42px;backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(0,0,0,0.25)}
.form__fields{display:flex;flex-direction:column;gap:18px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field__label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.72);display:block;margin:0 0 7px}
.field__label--lime{color:var(--lime)}
.req{color:var(--lime)}

.input{width:100%;height:48px;border:1px solid rgba(255,255,255,0.18);border-radius:10px;padding:0 14px;font-family:var(--font-sans);font-size:15px;color:var(--ink);background:var(--white);outline:none;box-sizing:border-box}
.input::placeholder{color:rgba(15,30,30,0.4);opacity:1}
.input:focus{border:1.5px solid var(--green)}
.input[aria-invalid="true"]{border:1.5px solid var(--purple)}

.select{padding:0 42px 0 14px;appearance:none;-webkit-appearance:none;cursor:pointer;color:var(--ink)}
.select.is-placeholder{color:var(--grey-ph)}
.select-wrap{position:relative}
.select-chevron{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none}

.persone-box{background:rgba(214,242,107,0.12);border:1px solid rgba(214,242,107,0.4);border-radius:14px;padding:16px 18px}
.persone-box__hint{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,0.55);margin:8px 0 0}

.field-error{display:flex;gap:8px;align-items:center;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--purple);margin:8px 0 0}
.field-error--tight{margin:-4px 0 0}
.field-error__mark{flex:none;width:14px;height:14px;border-radius:50%;border:1.2px solid var(--purple);display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1}

.consents{display:flex;flex-direction:column;gap:12px;margin:2px 0 0}
.consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.consent__box{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--green);cursor:pointer}
.consent__text{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.78)}
.consent__text a{color:var(--lime);text-decoration:underline}
.consent__opt{color:rgba(255,255,255,0.5)}

.form-summary{display:flex;gap:12px;align-items:flex-start;background:rgba(217,179,252,0.12);border:1px solid rgba(217,179,252,0.45);border-radius:14px;padding:14px 16px}
.form-summary__mark{flex:none;width:18px;height:18px;border-radius:50%;background:var(--purple);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;line-height:1;margin:1px 0 0}
.form-summary span:last-child{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.85)}

.form__submit{width:100%}
.form__reassure{text-align:center;font-size:13px;line-height:1.55;color:rgba(255,255,255,0.55);margin:16px 0 0}

/* honeypot: fuori schermo, non focalizzabile visivamente */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Thank-you ---------- */
.ty{max-width:580px;margin:0 auto;text-align:center}
.ty__stage{position:relative;width:320px;height:150px;margin:0 auto}
.ty__shadows{position:absolute;left:0;top:130px;width:320px;height:14px}
.ty__shadow{position:absolute;width:90px;height:12px;border-radius:50%;background:rgba(0,0,0,0.35);filter:blur(5px);transform-origin:50% 50%}
.ty__shadow--1{left:14px;animation:kSh 1.2s ease-in-out both, kFadeOut 0.45s ease-out 1.55s both}
.ty__shadow--2{left:122px;animation:kSh 1.2s ease-in-out 0.1s both, kFadeOut 0.45s ease-out 1.65s both}
.ty__shadow--3{left:216px;animation:kSh 1.2s ease-in-out 0.2s both, kFadeOut 0.45s ease-out 1.75s both}
.ty__pic{position:absolute;left:0;top:12px;width:320px;height:118px;display:block;animation:kAppear 0.01s linear 1.45s both}
.ty__balls{position:absolute;left:0;top:12px;width:320px;height:118px}
.ty__ball{position:absolute;top:0;width:118px;height:118px;border-radius:50%;box-sizing:border-box;border:59px solid var(--green-pic);transform-origin:50% 100%}
.ty__ball--1{left:0;animation:kBall 1.2s ease-in-out both, kHollow 0.5s cubic-bezier(0.65,0,0.35,1) 1.5s both, kFadeOut 0.18s ease-out 1.84s both}
.ty__ball--2{left:108px;animation:kBall 1.2s ease-in-out 0.1s both, kHollow 0.5s cubic-bezier(0.65,0,0.35,1) 1.58s both, kFadeOut 0.18s ease-out 1.92s both}
.ty__ball--3{left:202px;animation:kBall 1.2s ease-in-out 0.2s both, kHollow 0.5s cubic-bezier(0.65,0,0.35,1) 1.66s both, kFadeOut 0.18s ease-out 2s both}
.ty__title{font-size:44px;font-weight:500;letter-spacing:-0.02em;color:var(--white);margin:34px 0 0;outline:none;animation:tyIn 0.5s cubic-bezier(0.22,1,0.36,1) 2.35s both}
.ty__text{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,0.75);margin:20px auto 0;max-width:52ch;text-wrap:pretty;animation:tyIn 0.5s cubic-bezier(0.22,1,0.36,1) 2.45s both}

@keyframes tyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes kBall{0%{transform:translateY(-300px) scale(1,1)}30%{transform:translateY(0) scale(1,1)}37%{transform:translateY(0) scale(1.14,0.84)}45%{transform:translateY(0) scale(0.97,1.03)}58%{transform:translateY(-58px) scale(1,1)}70%{transform:translateY(0) scale(1.09,0.9)}77%{transform:translateY(0) scale(0.99,1.01)}86%{transform:translateY(-17px) scale(1,1)}94%{transform:translateY(0) scale(1.04,0.96)}100%{transform:translateY(0) scale(1,1)}}
@keyframes kSh{0%{opacity:0;transform:scaleX(0.35)}30%{opacity:0.5;transform:scaleX(1)}44%{opacity:0.42;transform:scaleX(0.95)}58%{opacity:0.16;transform:scaleX(0.62)}70%{opacity:0.46;transform:scaleX(1)}86%{opacity:0.26;transform:scaleX(0.82)}100%{opacity:0.38;transform:scaleX(1)}}
@keyframes kHollow{from{border-width:59px}to{border-width:0px}}
@keyframes kAppear{from{opacity:0}to{opacity:1}}
@keyframes kFadeOut{to{opacity:0}}

/* ============================================================
   09 · FAQ
   ============================================================ */
.faq__eyebrow{text-align:center;margin:0 0 16px}
.faq__title{text-align:center;font-size:36px;font-weight:500;letter-spacing:-0.015em;color:var(--teal);margin:0}
.faq__list{max-width:760px;margin:32px auto 0;border-top:1px solid var(--border)}
.faq__item{border-bottom:1px solid var(--border)}
.faq__q{width:100%;background:none;border:none;padding:20px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;text-align:left}
.faq__qt{font-family:var(--font-sans);font-size:17px;font-weight:500;letter-spacing:-0.005em;color:var(--teal)}
.faq__icon{flex:none;font-family:var(--font-mono);font-size:20px;color:var(--green-dark);width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.faq__panel{display:none;padding:0 44px 22px 4px}
.faq__panel p{font-size:15px;line-height:1.65;color:var(--grey);margin:0}
.faq__item.is-open .faq__panel{display:block}

/* ============================================================
   10 · CTA DI CHIUSURA
   ============================================================ */
.closing{background:var(--lime);padding:104px var(--pad-x);text-align:center}
.closing__title{font-size:54px;font-weight:500;letter-spacing:-0.022em;line-height:1.05;color:var(--teal);margin:0 auto;max-width:20ch}
.closing__lead{font-size:18px;line-height:1.55;color:var(--teal);opacity:0.8;margin:20px auto 0;max-width:44ch}
.closing__cta{display:flex;justify-content:center;margin:34px 0 0}

/* ============================================================
   11 · FOOTER
   ============================================================ */
.footer{background:var(--white);border-top:1px solid var(--border)}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:48px var(--pad-x)}
.footer__top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.footer__logo-link{display:inline-block}
.footer__logo{height:24px;width:auto;display:block}
.footer__slug{font-size:14px;line-height:1.55;color:var(--grey);margin:16px 0 0;max-width:40ch;text-wrap:pretty}
.footer__anagrafica{font-family:var(--font-mono);font-size:13px;line-height:1.9;letter-spacing:0.02em;text-transform:uppercase;color:var(--grey);margin:0;text-align:right}
.footer__pec{text-transform:none}
.footer__pec a{color:var(--grey);text-decoration:underline}
.footer__bottom{border-top:1px solid var(--border);margin:32px 0 0;padding:20px 0 0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer__copy{font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:var(--grey-2);margin:0}
.footer__links{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;color:var(--grey-2)}
.footer__links a{color:var(--grey-2)}
.footer__sep{opacity:0.4}

/* ============================================================
   Riduci il movimento se richiesto dall'utente
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .logos__track{animation:none}
  .ty__ball,.ty__shadow,.ty__pic,.ty__title,.ty__text{animation-duration:0.01ms !important;animation-delay:0ms !important}
  .ty__ball{border-width:0}
}

/* ============================================================
   Overlay immagine del carosello (mobile): schermo pieno,
   zoom e scorrimento nativi del browser. Creato da main.js.
   ============================================================ */
.car-overlay{position:fixed;inset:0;z-index:50;background:rgba(4,12,12,0.94)}
.car-overlay__scroll{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;display:grid;place-items:center;padding:60px 0 84px}
.car-overlay__img{display:block;width:100%;height:auto;background:var(--white)}
.car-overlay__close{position:fixed;top:10px;right:10px;z-index:51;width:44px;height:44px;border-radius:50%;border:none;background:var(--teal);color:var(--white);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.4)}
/* manipulation: niente zoom da doppio tocco sui controlli; pinch e doppio tocco
   restano nativi su immagine e contenitore, che non si toccano. */
.car-overlay__bar{position:fixed;left:0;right:0;bottom:12px;z-index:51;display:flex;align-items:center;justify-content:center;gap:18px;touch-action:manipulation}
.car-overlay__bar .car-overlay__arrow{touch-action:manipulation}
.car-overlay__count{min-width:76px;text-align:center;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:0.08em;color:var(--white);margin:0}
.car-overlay__arrow{width:44px;height:44px;border-radius:50%;border:none;background:var(--teal);color:var(--lime);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.car-overlay__arrow.is-disabled{opacity:0.35}
.car-overlay__hint{position:fixed;left:0;right:0;bottom:66px;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin:0;pointer-events:none}

/* ============================================================
   Responsive — desktop-first, fino a 375px
   ============================================================ */
@media (max-width:1200px){
  :root{--pad-x:40px}
  .perche__grid{gap:56px}
  /* La slide finale abbandona il 16/9: il contenuto non si comprime come
     un'immagine, quindi detta lui l'altezza; stretch la pareggia alle altre
     quando è più basso. Chiude la voce aperta nel registro. */
  .car__slide--end{aspect-ratio:auto;align-self:stretch;padding:36px 40px}
  .car__end-title{font-size:36px}
}

@media (max-width:1024px){
  :root{--pad-x:32px}
  .section{padding:88px var(--pad-x) 72px}
  .problema__row{grid-template-columns:110px 1fr;gap:16px 28px}
  .problema__row .body{grid-column:2}
  .bignum{font-size:64px}
  .problema__title,.cosae__title,.ricevi__title{font-size:40px}
  .cosae{padding:88px 0}
  .cosae__grid{grid-template-columns:1fr;gap:48px}
  .perche__inner{padding:88px var(--pad-x) 72px}
  .gov__inner{padding:88px var(--pad-x) 72px}
  .perche__grid{grid-template-columns:1fr;gap:44px}
  .steps__line{display:none}
  .steps__grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .serve{padding:88px 0 72px}
  .serve__title{font-size:44px}
  .perchi{padding:88px 0}
  .formsec{padding:88px var(--pad-x) 72px}
  .closing__title{font-size:44px}
  .car__arrow{width:44px;height:44px}
  .car__arrow--prev{left:8px}
  .car__arrow--next{right:8px}
}

@media (max-width:820px){
  :root{--pad-x:20px}
  .section{padding:64px var(--pad-x) 52px}
  .site-header__inner{padding:20px var(--pad-x)}
  /* niente altezza minima su mobile: la sezione è alta quanto il contenuto. Sopra, 96px =
     header assoluto (~64) + 32 di aria; sotto, 56 come il passo delle altre sezioni. */
  .hero{min-height:auto;padding:96px 20px 56px}
  .hero__title{font-size:clamp(30px,9.5vw,44px)}
  .hero__sub{font-size:17px}
  .hero__lead{font-size:16px}
  .logos{padding:28px 0}
  .logos__track img{margin-right:40px}
  .problema__list{margin:40px 0 0}
  .problema__row{padding:28px 0}
  .problema__h{font-size:20px}
  .bignum{font-size:48px}
  /* scala unica degli H2 di sezione sotto gli 820px: 31, poi 27 sotto i 480 */
  .problema__title,.cosae__title,.ricevi__title,.serve__title,.perche__title,.gov__title,.perchi__title,.formsec__title,.faq__title,.closing__title{font-size:31px}
  .gov__inner{padding:64px var(--pad-x) 52px}
  .gov__card{padding:24px 22px;border-radius:18px}
  .ty__title{font-size:32px}
  .steps{margin:44px auto 0}
  .steps__grid{grid-template-columns:1fr;gap:34px}
  .step__d{max-width:36ch}
  .serve__cta{margin:44px 0 0}
  .perchi__grid{grid-template-columns:1fr;gap:16px;margin:36px 0 0}
  .perchi__card{padding:24px 22px}
  .pcard{padding:24px 22px;gap:18px}
  .pcard__num{font-size:28px}
  .field-grid{grid-template-columns:1fr;gap:18px}
  .form{padding:28px 20px;border-radius:22px;margin:32px auto 0}
  /* 16px: sotto questa soglia Safari iOS zooma la pagina al focus del campo */
  .input{font-size:16px}
  /* target tattile dei CTA: almeno 44px di altezza; testo più compatto per stare in una riga */
  .btn{padding:13px 20px;min-height:44px;font-size:13px;letter-spacing:0.04em}
  /* la freccia delle CTA resta solo su desktop: su mobile costa caratteri e righe */
  .btn__arrow{display:none}
  .car{--car-pad:20px;--car-gap:14px;margin:40px auto 0}
  /* altezza impostata da main.js sulla slide attiva; il resto della riga si nasconde */
  .car__viewport{overflow-y:hidden;transition:height 300ms cubic-bezier(0.22,0.7,0.2,1)}
  .car__slide{border-radius:10px}
  .car__slide:not(.car__slide--end) img{cursor:zoom-in}
  /* Slide finale impilata: logo, "Fine anteprima", eyebrow, titolo, lead, CTA — tutto a
     sinistra, nessun space-between che possa far salire il blocco centrale sulla testata. */
  .car__slide--end{padding:24px 20px 26px;justify-content:flex-start;gap:0}
  .car__end-top{flex-direction:column;align-items:flex-start;gap:12px}
  .car__end-mid{margin:22px 0 0;max-width:none;text-align:left}
  .car__end-eyebrow{margin:0 0 10px}
  .car__end-title{font-size:24px}
  .car__end-lead{font-size:14.5px;margin:12px 0 0;max-width:none}
  .car__end-cta{align-items:flex-start;margin:22px 0 0;gap:10px}
  /* Frecce sotto la slide, sulla riga del contatore: freccia · contatore · freccia,
     stessa grammatica della barra dell'overlay. I 12 dots non entrano nella riga
     e da 8px non sono un target tattile: su mobile li sostituisce il contatore. */
  /* Il footer (contatore) nel markup è il fratello di .car, non un figlio: le frecce
     lasciano un vano centrale di 112px (76 del contatore + 2×18 di gap) e il footer,
     alto 44px come le frecce, vi si sovrappone risalendo di 44px. */
  .car{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:112px;row-gap:26px}
  .car__viewport{flex:0 0 100%}
  .car__arrow{position:static;transform:none;width:44px;height:44px;font-size:18px;touch-action:manipulation}
  .car__footer{margin:-44px 0 0;height:44px;display:flex;align-items:center;justify-content:center;gap:0}
  .car__dots{display:none}
  .car__label{min-width:76px;text-align:center;font-size:13px;color:var(--ink)}
  .faq__panel{padding:0 8px 20px 4px}
  .closing{padding:72px var(--pad-x)}
  .formsec{padding:72px var(--pad-x) 60px}
  .footer__inner{padding:36px var(--pad-x)}
  .footer__top{grid-template-columns:1fr;gap:28px}
  .footer__anagrafica{text-align:left}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

@media (max-width:480px){
  :root{--pad-x:16px}
  .hero__title{font-size:28px}
  .problema__row{grid-template-columns:84px 1fr;gap:12px 18px}
  .bignum{font-size:32px}
  .problema__title,.cosae__title,.ricevi__title,.serve__title,.perche__title,.gov__title,.perchi__title,.formsec__title,.faq__title,.closing__title{font-size:27px}
  .car{--car-pad:14px;--car-gap:10px}
  .car__end-title{font-size:21px}
  .pcard__num{font-size:24px}
  .rail__item{gap:14px}
  .rail__disc{width:48px;height:48px}
  .rail__item:not(:last-child)::before{left:23px;top:24px}
}