/* ============================================================
   SportView — Ogni partita. Un evento.
   Design system · v01 · 2026-08-04
   ============================================================ */

/* ---------- 1. Token ---------- */
:root{
  /* palette */
  --night:#111827;          /* Night Field  */
  --blue:#1457D9;           /* Field Blue   */
  --blue-scuro:#0F44AC;
  --lime:#C7F000;           /* Signal Lime  */
  --white:#F7F8FA;          /* Stadium White*/
  --gray:#667085;           /* Interface Gray */
  --border:#DCE1E8;         /* Border Gray  */
  --red:#E53935;            /* Live Red     */
  --night-80:rgba(17,24,39,.80);
  --night-60:rgba(17,24,39,.60);
  --chiaro-70:rgba(247,248,250,.70);
  --chiaro-45:rgba(247,248,250,.45);
  --linea-scura:rgba(247,248,250,.16);

  /* tipografia */
  --font-titoli:"Instrument Sans","Inter",Arial,sans-serif;   /* titoli */
  --font:"Inter","Instrument Sans",Arial,sans-serif;          /* corpo del testo */
  --mono:"DM Mono","Roboto Mono",monospace;                   /* numeri e label */

  /* griglia */
  --max:1440px;
  --lato:96px;
  --gutter:24px;
  --sez:168px;         /* padding verticale sezioni principali, +20% */
  --sez-min:115px;     /* padding sezioni secondarie, +20% */
  --misura:72ch;

  /* motion */
  --t:200ms cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  font-size:17px;line-height:1.65;font-weight:400;letter-spacing:-.01em;
  color:var(--night);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.scuro :focus-visible{outline-color:var(--lime)}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--lato)}
.sezione{padding-block:var(--sez)}
.sezione--stretta{padding-block:var(--sez-min)}
.scuro{background:var(--night);color:var(--white)}
.scuro .gray,.scuro p{color:var(--chiaro-70)}
.nero{background:#0A0F18;color:var(--white)}
.misura{max-width:var(--misura)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--font-titoli);font-weight:700;letter-spacing:-.03em;line-height:.95;text-wrap:balance}

.h-hero{
  font-family:var(--font-titoli);
  /* 40 px a 360, 48 px a 768, 84 px a 1440 e oltre */
  font-size:clamp(40px,calc(6.8px + 5.36vw),84px);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.03em;
  text-wrap:balance;
}
h2,.h2{font-size:clamp(36px,3.89vw,56px);line-height:.95;letter-spacing:-.03em;font-weight:700}
h3,.h3{font-size:clamp(26px,2.36vw,34px);line-height:1.05}
h4,.h4{font-size:20px;line-height:1.25;letter-spacing:-.02em}

.intro{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--gray);max-width:660px}
.scuro .intro{color:var(--chiaro-70)}
p{max-width:68ch}
.intro,.faq .risposta,li{max-width:68ch}
.gray{color:var(--gray)}

.label{
  font-family:var(--mono);font-size:15px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:22px;
}
.scuro .label,.nero .label{color:var(--lime)}
.label--gray{color:var(--gray)}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Spazio fra H2 e testo introduttivo: +10 px.
   Serve !important perché il margine è dichiarato inline nell'HTML,
   che per istruzione del committente non va modificato. */
h2 + .intro{margin-top:34px !important}

/* Scala del corpo: 17 px mobile · 18 px tablet · 20 px desktop, mai inferiore. */
@media (min-width:768px){ body{font-size:18px} }
@media (min-width:1024px){ body{font-size:20px} }

/* ---------- 5. Bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding-inline:26px;border-radius:8px;
  font-family:var(--font-titoli);
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  border:1.5px solid transparent;cursor:pointer;
  transition:background 220ms cubic-bezier(.4,0,.2,1),border-color 220ms cubic-bezier(.4,0,.2,1),color 220ms cubic-bezier(.4,0,.2,1);
  text-align:center;
}
.btn--primario{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--primario:hover{background:var(--blue-scuro);border-color:var(--blue-scuro)}
.btn--chiaro{background:transparent;color:var(--white);border-color:rgba(247,248,250,.38)}
.btn--chiaro:hover{border-color:var(--white);background:rgba(247,248,250,.09)}
.btn--scuro{background:transparent;color:var(--night);border-color:var(--border)}
.btn--scuro:hover{border-color:var(--night);background:rgba(17,24,39,.05)}
.btn--pieno{background:var(--night);color:var(--white);border-color:var(--night)}
.btn--pieno:hover{background:#1C2637;border-color:#1C2637}
.btn--largo{width:100%}
.btn-gruppo{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 6. Header ---------- */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;height:72px;
  display:flex;align-items:center;
  transition:background var(--t),border-color var(--t),backdrop-filter var(--t);
  border-bottom:1px solid transparent;
}
.site-header.pieno{
  background:rgba(17,24,39,.92);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--linea-scura);
}
.site-header .wrap{display:flex;align-items:center;gap:24px;width:100%}
.marchio{
  display:inline-flex;align-items:center;flex:0 0 auto;
  background:var(--white);border-radius:8px;padding:8px 13px;
}
.marchio img{height:21px;width:auto}
.nav{display:flex;gap:26px;margin-inline:auto;font-size:15px;font-weight:500}
.nav a{color:var(--chiaro-70);transition:color var(--t)}
.nav a:hover,.nav a:focus-visible{color:var(--white)}
.header-cta{display:flex;gap:10px;flex:0 0 auto}
.header-cta .btn{height:42px;padding-inline:18px;font-size:15px}
.burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto;margin-inline-start:auto;
}
.burger span{display:block;width:22px;height:2px;background:var(--white);position:relative;
  transition:transform var(--t),background var(--t)}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--white);
  transition:transform var(--t),top var(--t)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.menu-mobile{
  position:fixed;inset:72px 0 0;z-index:99;background:var(--night);
  padding:32px 24px 40px;display:none;flex-direction:column;gap:4px;overflow-y:auto;
}
.menu-mobile.aperto{display:flex}
.menu-mobile a{
  font-family:var(--font-titoli);
  font-size:24px;font-weight:600;letter-spacing:-.02em;padding:16px 0;
  border-bottom:1px solid var(--linea-scura);color:var(--white);
}
.menu-mobile .btn{margin-top:24px;height:52px}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:flex-end;
  padding-block:140px 72px;background:var(--night);color:var(--white);overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(17,24,39,.96) 0%,rgba(17,24,39,.72) 34%,rgba(17,24,39,.28) 68%,rgba(17,24,39,.55) 100%),
    linear-gradient(to right,rgba(17,24,39,.82) 0%,rgba(17,24,39,.35) 55%,rgba(17,24,39,.1) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .label{color:#7FB2FF}
.hero__sotto{
  font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.5;
  color:var(--chiaro-70);max-width:650px;margin-block:36px 34px;
}
.hero .btn-gruppo{margin-bottom:12px}
.hero__nota{font-size:16px;color:var(--chiaro-45);margin-bottom:52px}
.hero__dati{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);
  padding-top:30px;border-top:1px solid var(--linea-scura);
}
.hero__dati dt{
  font-family:var(--mono);font-size:26px;font-weight:500;
  letter-spacing:-.02em;margin-bottom:6px;
}
.hero__dati dd{font-size:16px;color:var(--chiaro-70);line-height:1.35}
.pallino-live{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--red);margin-inline-end:8px;vertical-align:middle;
  animation:pulsa 2s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 8. Trasformazione ---------- */
.passi{
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gutter);margin-top:64px;
}
.passo-t{position:relative;padding-top:28px;border-top:2px solid var(--border)}
.passo-t.is-on{border-top-color:var(--blue)}
.passo-t__icona{margin-bottom:16px;color:var(--blue)}
.passo-t__n{font-family:var(--mono);font-size:13px;color:var(--gray);
  letter-spacing:.14em;margin-bottom:10px;display:block}
.passo-t h3{font-size:26px;letter-spacing:-.02em;margin-bottom:8px}
.passo-t p{color:var(--gray);line-height:1.5}

/* ---------- 9. Funzioni (blocchi grandi) ---------- */
.blocco{
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  padding-block:72px;border-top:1px solid var(--linea-scura);
}
.blocco:first-of-type{border-top:0;padding-top:56px}
.blocco--invertito .blocco__testo{order:2}
.blocco__testo h3{font-size:clamp(28px,2.92vw,42px);margin-bottom:16px;letter-spacing:-.035em}
.blocco__testo p{font-size:18px;max-width:46ch}
.blocco__tag{
  font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime);margin-top:24px;display:inline-block;
}
.blocco__media{border-radius:14px;overflow:hidden;background:#0A0F18;aspect-ratio:16/10}
.blocco__media img{width:100%;height:100%;object-fit:cover}

/* ---------- 10. Caso reale ---------- */
.caso__foto{
  border-radius:16px;overflow:hidden;aspect-ratio:16/9;margin-top:56px;background:var(--night);
}
.caso__foto img{width:100%;height:100%;object-fit:cover}
.caso__partner{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:40px;
}
.partner{
  border:1px solid var(--border);border-radius:14px;padding:32px;background:#fff;
  display:flex;flex-direction:column;
}
.partner__logo{
  height:44px;display:flex;align-items:center;margin-bottom:22px;
}
.partner__logo img{max-height:44px;width:auto}
.partner__logo .segna{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gray);
  border:1px dashed var(--border);border-radius:6px;padding:8px 12px;
}
.partner h3{font-size:28px;margin-bottom:6px}
.partner .label{margin-bottom:14px}
.partner p{color:var(--gray);flex:1}


/* ---------- 10b. Loghi partner e progetto sul campo ---------- */
.partner__logo img{max-height:44px;width:auto;object-fit:contain}
/* Il marchio One Soccer ASD ha il fondo blu come parte dell'artwork:
   si arrotondano solo gli angoli del riquadro, senza toccare il segno. */
.partner__logo img[src*="one-soccer"]{border-radius:8px}

.progetto{margin-top:80px;padding-top:56px;border-top:1px solid var(--border)}
.progetto h3{font-size:clamp(26px,2.36vw,34px);margin-top:6px}
.progetto__foto{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.progetto__foto figure{margin:0}
.progetto__foto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  border:1px solid var(--border);background:var(--night);
}
.progetto__foto figcaption{font-size:16px;color:var(--gray);margin-top:10px;line-height:1.4}
.progetto__loghi{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  margin-top:44px;padding-top:28px;border-top:1px solid var(--border);
}
.progetto__loghi img{height:40px;width:auto;object-fit:contain}
.progetto__loghi img[src*="one-soccer"]{border-radius:7px}

/* ---------- 11. Due prospettive ---------- */
.prospettive{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:56px}
.prospettiva{
  background:#0A0F18;border:1px solid var(--linea-scura);border-radius:14px;overflow:hidden;
}
.prospettiva__media{aspect-ratio:16/9;overflow:hidden;background:#0A0F18}
.prospettiva__media img{width:100%;height:100%;object-fit:cover;transition:transform 300ms ease}
.prospettiva__testo{padding:30px 32px 34px}
.prospettiva h3{font-size:29px;margin-bottom:10px}
.prospettiva p{font-size:clamp(1rem,1vw,1.125rem)}
.prospettiva .label{margin-bottom:12px}
.frase-tv{
  font-family:var(--font-titoli);
  font-size:clamp(24px,3vw,38px);font-weight:600;letter-spacing:-.035em;
  margin-top:56px;text-align:center;color:var(--white);
}

/* ---------- 12. Moduli torneo ---------- */
.moduli{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:56px;
  background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;
}
.modulo{background:#fff;padding:32px 26px}
.modulo .label{margin-bottom:14px}
.modulo h3{font-size:25px;letter-spacing:-.02em;margin-bottom:8px}
.modulo p{color:var(--gray);line-height:1.5}
.schermata{
  margin-top:40px;border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:var(--night);
}
.schermata img{width:100%;height:auto}

/* ---------- 13. Replay ---------- */
.replay{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center;margin-top:56px}
.replay__media{border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.microcopy{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.chip{
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--border);border-radius:999px;padding:9px 16px;color:var(--night);
}
.chip--on{background:var(--night);color:var(--white);border-color:var(--night)}
.lista-linee{margin-top:28px}
.lista-linee li{
  padding:15px 0;border-top:1px solid var(--border);font-size:16px;
  display:flex;gap:14px;align-items:baseline;
}
.lista-linee li::before{
  content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--blue);
  transform:translateY(-3px);
}
.scuro .lista-linee li{border-top-color:var(--linea-scura)}
.scuro .lista-linee li::before{background:var(--lime)}

/* ---------- 14. Valore ---------- */
.valori{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;
  background:var(--linea-scura);border:1px solid var(--linea-scura);border-radius:14px;overflow:hidden;
}
.valore{background:var(--night);padding:34px 30px}
.valore__n{font-family:var(--mono);font-size:13px;color:var(--lime);
  letter-spacing:.14em;margin-bottom:14px;display:block}
.valore h3{font-size:26px;letter-spacing:-.02em;margin-bottom:9px}
.valore p{line-height:1.55}

/* ---------- 15. Sistema completo ---------- */
.sistema{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;margin-top:56px}
.sistema__foto{border-radius:14px;overflow:hidden;border:1px solid var(--border);position:sticky;top:104px}
.componenti{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.componenti li{
  padding:13px 0;border-top:1px solid var(--border);font-size:16px;
  display:flex;gap:12px;align-items:baseline;
}
.componenti li::before{content:"";flex:0 0 5px;height:5px;background:var(--blue);
  border-radius:50%;transform:translateY(-3px)}

/* ---------- 16. Configuratore ---------- */
.config{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;margin-top:56px;align-items:start}
.config__passi{display:grid;gap:16px}
.passo{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:32px;
  opacity:.42;pointer-events:none;transition:opacity 250ms ease,border-color 250ms ease;
}
.passo.attivo{opacity:1;pointer-events:auto;border-color:var(--night)}
.passo__testa{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.passo__n{
  flex:0 0 30px;height:30px;border-radius:50%;background:var(--night);color:var(--white);
  font-family:var(--mono);font-size:13px;display:flex;align-items:center;justify-content:center;
}
.passo__testa h3{font-size:23px;letter-spacing:-.02em;margin-bottom:6px}
.passo__aiuto{color:var(--gray);line-height:1.45}
.scelte{display:flex;gap:10px;flex-wrap:wrap}
.scelta{flex:1 1 auto;position:relative;display:block;cursor:pointer}
.scelta input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.scelta span{
  display:block;text-align:center;padding:14px 18px;border-radius:8px;
  border:1.5px solid var(--border);font-size:15px;font-weight:600;transition:all var(--t);
}
.scelta:hover span{border-color:var(--gray)}
.scelta input:checked+span{background:var(--night);border-color:var(--night);color:var(--white)}
.scelta input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}

.riepilogo{
  background:var(--night);color:var(--white);border-radius:14px;padding:32px 28px;
  position:sticky;top:104px;
}
.riepilogo .label{color:var(--lime);margin-bottom:18px}
.riep li{
  padding:14px 0 14px 26px;border-bottom:1px solid var(--linea-scura);position:relative;
  transition:opacity var(--t);
}
.riep li:last-child{border-bottom:0}
.riep b{display:block;font-size:15px;font-weight:600}
.riep em{font-style:normal;font-size:15px;color:var(--chiaro-70)}
.riep li::before{
  position:absolute;left:0;top:14px;font-family:var(--mono);font-size:15px;line-height:1.5;
}
.riep li.on::before{content:"+";color:var(--lime)}
.riep li.off::before{content:"−";color:#5A6472}
.riep li.off{opacity:.45}
.riep li.off b{text-decoration:line-through}
.riep li.forse::before{content:"?";color:var(--chiaro-70)}
.riep li.attesa::before{content:"·";color:#5A6472}
.riep li.attesa b,.riep li.attesa em{color:#7A8494}
.riep__nota{
  font-size:15px;color:var(--chiaro-45);margin-top:22px;padding-top:18px;
  border-top:1px solid var(--linea-scura);line-height:1.5;
}


/* ---------- 16b. Configuratore: legend, stati, segnaposto ---------- */
/* legend è il primo figlio del fieldset per validità HTML; lo stile lo riporta
   nella posizione visiva corretta accanto al numero del passo. */
.passo{position:relative}
.passo__domanda{
  font-family:var(--font-titoli);
  font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.2;
  padding:0;margin:0 0 6px 46px;display:block;float:none;width:calc(100% - 46px);
}
.passo__testa{display:block;position:relative;padding-left:46px;margin-bottom:22px}
.passo__n{position:absolute;left:0;top:-30px}
.passo__aiuto{margin:0}

.btn__attesa{display:none}
.btn.in-attesa{pointer-events:none;opacity:.75}
.btn.in-attesa .btn__testo{display:none}
.btn.in-attesa .btn__attesa{display:inline}

.msg{font-size:16px;line-height:1.45;margin-top:14px;padding:12px 14px;border-radius:8px}
.nota-invio{font-size:16px;color:var(--gray);margin-top:14px;text-align:center}
.footer__firma{margin-top:18px;font-size:16px}
.footer__firma strong{color:var(--white);font-weight:600}
.msg--errore{background:rgba(229,57,53,.1);border:1px solid rgba(229,57,53,.4);color:#9B1C19}

/* segnaposto tecnico: visibile, non pubblicabile */
.segnaposto{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--lime);background:rgba(199,240,0,.10);
  border:1px dashed rgba(199,240,0,.55);border-radius:4px;padding:2px 7px;
}
.testo .segnaposto{color:#6B7A00;background:rgba(199,240,0,.16);border-color:rgba(107,122,0,.45)}
.partner__logo .segna{text-align:center;line-height:1.35}

.link-testo{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font:inherit;text-align:left;
}
.link-testo:hover{color:var(--white);text-decoration:underline}

/* ---------- 17. Campi form ---------- */
.riga{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{margin-bottom:16px}
.campo label{
  display:block;font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:7px;
}
.campo input,.campo textarea{
  width:100%;padding:13px 15px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--white);font-size:16px;transition:border-color var(--t);
}
.campo input:focus{outline:none;border-color:var(--blue)}
/* l'errore compare solo dopo che l'utente ha interagito, non a campo vuoto */
.campo input:user-invalid{border-color:var(--red)}
.consenso{
  display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--gray);
  margin:8px 0 22px;line-height:1.45;cursor:pointer;
}
.consenso input{margin-top:3px;flex:0 0 auto;width:18px;height:18px;accent-color:var(--blue)}
.consenso a{text-decoration:underline}

/* ---------- 18. Installazione ---------- */
.fasi{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-top:56px;
  background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;
}
.fase{background:#fff;padding:28px 22px}
.fase__n{font-family:var(--mono);font-size:13px;color:var(--blue);
  letter-spacing:.14em;margin-bottom:12px;display:block}
.fase h3{font-size:22px;letter-spacing:-.015em;margin-bottom:7px}
.fase p{color:var(--gray);line-height:1.45}
.impresa{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center;margin-top:72px}
.impresa__foto{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.impresa__foto img{width:100%;height:100%;object-fit:cover;border-radius:12px;aspect-ratio:4/3}
.impresa__foto img:first-child{grid-column:1/-1;aspect-ratio:16/9}

/* ---------- 19. Manifesto ---------- */
.manifesto{padding-block:180px;text-align:left}
.manifesto .wrap{max-width:920px}
.manifesto__riga{
  font-family:var(--font-titoli);
  font-size:clamp(28px,4.2vw,54px);font-weight:600;letter-spacing:-.035em;
  line-height:1.18;opacity:.16;transition:opacity 500ms ease;color:var(--white);
}
.manifesto__riga.vista{opacity:1}
.manifesto__chiusura{
  font-family:var(--font-titoli);
  margin-top:96px;font-size:clamp(46px,8vw,104px);font-weight:600;
  letter-spacing:-.045em;line-height:.95;color:var(--white);
}
.manifesto__coda{margin-top:32px;font-size:19px;color:var(--chiaro-70);max-width:52ch}

/* ---------- 20. FAQ ---------- */
.faq{margin-top:48px;max-width:900px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  padding:24px 0;cursor:pointer;font-size:19px;font-weight:600;letter-spacing:-.02em;
  list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 14px;height:14px;
  background:currentColor;transition:transform var(--t);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .risposta{padding-bottom:26px;font-size:16px;color:var(--gray);max-width:74ch}
.faq .risposta p+p{margin-top:12px}

/* ---------- 21. CTA finale ---------- */
.cta-finale{position:relative;padding-block:150px;background:var(--night);color:var(--white);overflow:hidden}
.cta-finale__media{position:absolute;inset:0;z-index:0;opacity:.22}
.cta-finale__media img{width:100%;height:100%;object-fit:cover}
.cta-finale .wrap{position:relative;z-index:1}
.cta-finale h2{max-width:16ch}
.cta-finale .intro{margin-block:22px 34px}
.cta-finale__note{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chiaro-45)}

/* ---------- 22. Footer ---------- */
.site-footer{background:#0A0F18;color:var(--chiaro-70);padding-block:72px 40px;font-size:17px}
.site-footer .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:56px}
.site-footer .marchio{margin-bottom:20px}
.footer__claim{
  font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime);margin-bottom:16px;
}
.site-footer .footer__titolo{font-size:16px;font-weight:600;color:var(--white);margin-bottom:16px;letter-spacing:0;line-height:1.3}
.site-footer li{margin-bottom:10px}
.site-footer a:hover{color:var(--white);text-decoration:underline}
.footer__coda{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--linea-scura);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:15px;color:var(--chiaro-45);
}

/* ---------- 23. Cookie banner ---------- */
.cookie{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:200;
  background:var(--night);color:var(--white);border-top:1px solid var(--linea-scura);
  padding:22px 0;transform:translateY(110%);transition:transform 260ms ease;
}
.cookie.visibile{transform:translateY(0)}
.cookie .wrap{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.cookie p{font-size:16px;color:var(--chiaro-70);flex:1 1 380px;max-width:70ch}
.cookie a{text-decoration:underline}
.cookie__azioni{display:flex;gap:10px;flex-wrap:wrap}
.cookie__azioni .btn{height:44px;font-size:16px;padding-inline:18px}

/* ---------- 24. Pagine di testo ---------- */
.testo{padding-block:140px 96px;max-width:820px}
.testo h1{font-size:clamp(34px,5vw,56px);margin-bottom:12px}
.testo h2{font-size:26px;margin-block:40px 12px}
.testo h3{font-size:19px;margin-block:26px 8px}
.testo p,.testo li{font-size:16px;color:var(--gray);margin-bottom:12px;max-width:none}
.testo ul{list-style:disc;padding-left:22px;margin-bottom:16px}
.testo li{margin-bottom:8px}
.testo .aggiornato{font-family:var(--mono);font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-bottom:40px}
.testo table{width:100%;border-collapse:collapse;margin-block:16px 28px;font-size:15px}
.testo th,.testo td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);
  vertical-align:top}
.testo th{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--night)}
.testo td{color:var(--gray)}

/* ---------- 25. Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 420ms ease,transform 420ms ease}
.reveal.vista{opacity:1;transform:none}

/* ============================================================
   26. Responsive
   ============================================================ */
@media (max-width:1200px){
  :root{--lato:56px;--sez:112px;--sez-min:80px}
  .blocco,.replay,.sistema,.impresa{gap:48px}
  .fasi{grid-template-columns:repeat(3,1fr)}
  .valori{grid-template-columns:repeat(2,1fr)}
  .moduli{grid-template-columns:repeat(2,1fr)}
  .passi{grid-template-columns:repeat(3,1fr);row-gap:36px}
}

@media (max-width:1024px){
  :root{--lato:40px;--gutter:20px}
  .nav{display:none}
  .header-cta{display:none}
  .burger{display:flex}
  .config{grid-template-columns:1fr}
  .riepilogo{position:static}
  .sistema__foto{position:static}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  /* Testo di lettura mai sotto i 16 px su mobile.
     Restano alle dimensioni del design system solo label, chip e microtesti
     in DM Mono, per i quali il prompt fissa esplicitamente 11-12 px. */
  .passo-t p,.card p,.funz p,.valore p,.modulo p,.fase p,.partner p,
  .componenti li,.lista-linee li,.faq .risposta,.site-footer,.site-footer li,
  .passo__aiuto,.riep b,.riep em,.prospettiva p,.blocco__testo p,
  .cookie p,.hero__nota{font-size:17px;line-height:1.55}
  .riep em,.riep__nota{font-size:17px;line-height:1.5}
  .hero__dati dd,.consenso,.cookie__azioni .btn,.footer__coda,
  .cta-finale__note,.site-footer p,.msg{font-size:17px;line-height:1.5}
  .riep__nota,.hero__nota{font-size:17px}
  .scelta span,.config__passi p,.site-footer div>p,.site-footer strong,
  .site-footer .footer__titolo,.nota-invio,.footer__firma{font-size:17px}
  /* Tabelle trasformate in card: su mobile una tabella a tre colonne non entra. */
  .testo table,.testo thead,.testo tbody,.testo tr,.testo th,.testo td{display:block;width:100%}
  .testo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .testo tr{
    border:1px solid var(--border);border-radius:10px;
    padding:6px 16px;margin-bottom:14px;background:#fff;
  }
  .testo td{border-bottom:1px solid var(--border);padding:12px 0;font-size:17px}
  .testo tr td:last-child{border-bottom:0}
  .testo td::before{
    content:attr(data-colonna);display:block;
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--night);margin-bottom:4px;
  }

  :root{--sez:80px;--sez-min:64px;--lato:24px}
  .hero{min-height:88vh;padding-block:120px 56px}
  .hero__dati{grid-template-columns:1fr 1fr;gap:24px}
  .blocco{grid-template-columns:1fr;gap:28px;padding-block:48px}
  .blocco--invertito .blocco__testo{order:0}
  .prospettive,.caso__partner,.replay,.sistema,.impresa,.componenti,.riga{grid-template-columns:1fr}
  .progetto__foto{grid-template-columns:1fr;gap:24px}
  .progetto{margin-top:56px;padding-top:40px}
  .progetto__foto figcaption{font-size:16px}
  .replay,.sistema,.impresa{gap:32px}
  .passi{grid-template-columns:1fr;row-gap:0}
  .passo-t{border-top:1px solid var(--border);padding-block:22px}
  .valori,.moduli{grid-template-columns:1fr}
  .fasi{grid-template-columns:1fr 1fr}
  .impresa__foto img:first-child{grid-column:1/-1}
  .manifesto{padding-block:104px}
  .manifesto__chiusura{margin-top:64px}
  /* gli elementi di griglia hanno min-width:auto e possono sfondare */
  .config>*,.config__passi>*,.riga>*,.valori>*,.moduli>*{min-width:0}
  .scelte{flex-direction:column}
  .scelta span{white-space:normal}
  .site-footer .wrap{grid-template-columns:1fr;gap:36px}
  .cta-finale{padding-block:96px}
  .testo{padding-block:112px 72px}
}

@media (max-width:520px){
  :root{--lato:20px}
  .btn{height:52px;width:100%}
  .btn-gruppo{flex-direction:column;align-items:stretch}
  .header-cta{display:none}
  .passo{padding:24px 20px}
  .passo__domanda{margin-left:42px;width:calc(100% - 42px)}
  .passo__testa{padding-left:42px}
  .riepilogo{padding:26px 22px}
  .partner{padding:26px 22px}
  .valore,.modulo,.fase{padding:26px 22px}
  .footer__coda{flex-direction:column;gap:12px}
  .cookie__azioni{width:100%}
  .cookie__azioni .btn{flex:1 1 auto;width:auto}
}

/* ---------- 27. Motion ridotto ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal,.manifesto__riga{opacity:1;transform:none}
}

/* ---------- 28. Stampa ---------- */
@media print{
  .site-header,.cookie,.burger,.menu-mobile{display:none !important}
  .passo{opacity:1 !important}
  body{background:#fff}
}

/* ============================================================
   POLISH v1.0 — verde d'accento, micro animazioni, manifesto
   ============================================================ */

/* ---------- Verde: accent, hover, stati attivi, bullet, timeline ----------
   Signal Lime su fondo scuro ha 13,4:1 di contrasto. Su fondo chiaro ne ha 1,6:1,
   quindi sul chiaro è usato solo come elemento decorativo mai portatore di testo. */

/* bullet e timeline */
.lista-linee li::before{background:var(--lime)}
.componenti li::before{background:var(--lime)}
.riep li.on::before{color:var(--lime)}

/* timeline dei cinque passi: la linea si accende al passaggio */
.passo-t{border-top-color:var(--border);transition:border-top-color 420ms ease}
.passo-t.is-on{border-top-color:var(--lime)}
.passo-t__n{color:var(--night);font-weight:500}
.passo-t.is-on .passo-t__n{color:var(--night)}

/* stati attivi del configuratore */
.scelta input:checked+span{
  background:var(--night);border-color:var(--night);color:var(--white);
  box-shadow:inset 3px 0 0 var(--lime);
}
.passo.attivo .passo__n{background:var(--night);color:var(--lime)}

/* hover su fondo scuro */
.scuro a:not(.btn):hover,.nero a:not(.btn):hover{color:var(--lime)}
.nav a:hover,.nav a:focus-visible{color:var(--lime)}
.menu-mobile a:hover{color:var(--lime)}
.site-footer a:hover{color:var(--lime);text-decoration-color:var(--lime)}
.btn--chiaro:hover{border-color:var(--lime);color:var(--lime);background:rgba(199,240,0,.06)}

/* indicatore LIVE: il punto resta Live Red, l'alone è verde */
.pallino-live{box-shadow:0 0 0 4px rgba(199,240,0,.22)}

/* icone e numerazioni su fondo scuro */
.valore__n,.blocco__tag{color:var(--lime)}
.chip--on{background:var(--night);color:var(--lime);border-color:var(--night)}

/* ---------- Micro animazioni ---------- */
.blocco__media img,.prospettiva__media img,.caso__foto img,
.progetto__foto img,.schermata img,.replay__media img,.sistema__foto img{
  transition:transform 420ms cubic-bezier(.4,0,.2,1);
}
.blocco__media:hover img,.prospettiva:hover .prospettiva__media img,
.caso__foto:hover img,.progetto__foto figure:hover img,
.schermata:hover img,.replay__media:hover img,.sistema__foto:hover img{
  transform:scale(1.02);
}
.card,.valore,.modulo,.fase,.partner,.prospettiva,.passo-t{
  transition:transform 300ms cubic-bezier(.4,0,.2,1),border-color 300ms ease;
}
.card:hover,.valore:hover,.modulo:hover,.fase:hover,.partner:hover,.prospettiva:hover{
  transform:translateY(-8px);
}
.reveal{transition:opacity 700ms cubic-bezier(.22,1,.36,1),transform 700ms cubic-bezier(.22,1,.36,1)}

/* ---------- Manifesto: nero pieno, righe a tutto schermo, molto lento ---------- */
.manifesto{background:#000;padding-block:26vh}
.manifesto .wrap{max-width:1180px}
.manifesto__riga{
  font-size:clamp(34px,5.2vw,72px);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:700;
  margin-bottom:min(14vh,140px);
  opacity:.08;
  transform:translateY(14px);
  transition:opacity 1400ms cubic-bezier(.22,1,.36,1),transform 1400ms cubic-bezier(.22,1,.36,1);
}
.manifesto__riga.vista{opacity:1;transform:none}
.manifesto__chiusura{
  margin-top:22vh;
  font-size:clamp(40px,5.8vw,80px);
  line-height:.95;letter-spacing:-.035em;font-weight:700;
}
.manifesto__coda{margin-top:44px;font-size:20px;color:var(--chiaro-70);max-width:52ch}

/* ---------- Frasi TV: esperienza, mai claim ---------- */
.frase-tv-min{
  font-family:var(--font-titoli);
  font-size:clamp(24px,2.6vw,34px);
  font-weight:700;letter-spacing:-.03em;line-height:1.1;
  margin-top:56px;padding-top:36px;
  border-top:1px solid var(--linea-scura);
  color:var(--white);max-width:22ch;
}
.frase-tv-min::before{
  content:"";display:block;width:44px;height:3px;background:var(--lime);
  margin-bottom:22px;border-radius:2px;
}

/* ---------- WOW section ---------- */
.wow{background:#000;color:#fff;padding-block:30vh;overflow:hidden}
.wow .wrap{max-width:1180px}
.wow__riga{
  font-family:var(--font-titoli);
  font-size:clamp(34px,5.2vw,72px);
  line-height:1.02;letter-spacing:-.035em;font-weight:700;
  margin-bottom:min(16vh,160px);
  opacity:0;transform:translateY(20px);
  transition:opacity 1600ms cubic-bezier(.22,1,.36,1),transform 1600ms cubic-bezier(.22,1,.36,1);
  max-width:18ch;
}
.wow__riga.vista{opacity:1;transform:none}
.wow__riga--tenue{color:#6E7580}
.wow__riga--lime{color:var(--lime)}
.wow__chiusura{
  font-family:var(--font-titoli);
  font-size:clamp(40px,5.8vw,80px);
  line-height:.95;letter-spacing:-.035em;font-weight:700;
  margin-top:24vh;opacity:0;transform:translateY(20px);
  transition:opacity 1800ms cubic-bezier(.22,1,.36,1),transform 1800ms cubic-bezier(.22,1,.36,1);
}
.wow__chiusura.vista{opacity:1;transform:none}

@media (max-width:820px){
  .manifesto{padding-block:16vh}
  .manifesto__riga{margin-bottom:min(10vh,80px)}
  .manifesto__chiusura{margin-top:14vh}
  .wow{padding-block:18vh}
  .wow__riga{margin-bottom:min(11vh,90px);max-width:none}
  .wow__chiusura{margin-top:16vh}
  .frase-tv-min{margin-top:40px;padding-top:28px}
}

@media (prefers-reduced-motion:reduce){
  .manifesto__riga,.wow__riga,.wow__chiusura{opacity:1;transform:none}
  .card:hover,.valore:hover,.modulo:hover,.fase:hover,.partner:hover,.prospettiva:hover{transform:none}
  .blocco__media:hover img,.prospettiva:hover .prospettiva__media img,
  .caso__foto:hover img,.progetto__foto figure:hover img,
  .schermata:hover img,.replay__media:hover img,.sistema__foto:hover img{transform:none}
}

/* ---------- Aree toccabili: minimo 44 px ---------- */
.link-testo{padding-block:11px;display:inline-block;min-height:44px}
.cookie__azioni .btn{height:44px}
@media (max-width:520px){ .cookie__azioni .btn{height:52px} }