/* =========================================================================
   1. DESIGN TOKENS
   Palette derivata dal logo TALEA: blu istituzionale + le tre foglioline.
   ========================================================================= */
:root{
  /* --- Colore primario: fiducia, istituzionalità --- */
  --blu:          #3F589B;
  --blu-scuro:    #2C3D6E;
  --blu-chiaro:   #6E85C4;
  --blu-velo:     rgba(63, 88, 155, .10);

  /* --- Accenti dalle foglioline del logo --- */
  --corallo:      #FF5B5F;   /* decorativo: foglia, glow, dettagli */
  --corallo-cta:  #CE4045;   /* azione: contrasto AA su testo bianco */
  --corallo-cta-h:#B5353A;
  --menta:        #31D8B3;   /* progressi, conferme, verifiche */
  --menta-scuro:  #0E9C7F;   /* menta leggibile su fondo chiaro */
  --giallo:       #F6BD2D;   /* badge, evidenze */
  --ambra:        #B45C12;   /* allerta: leggibile su fondo chiaro */

  /* --- Neutri --- */
  --bianco:       #FFFFFF;
  --off-white:    #F8F9FA;
  --inchiostro:   #1B2440;
  --testo:        #4C5875;
  --tenue:        #7C879F;
  --linea:        rgba(63, 88, 155, .14);

  /* --- Glassmorphism (usato da tutte le card) --- */
  --glass-bg:     rgba(255, 255, 255, .60);
  --glass-bg-alt: rgba(255, 255, 255, .78);
  --glass-bordo:  rgba(255, 255, 255, .75);
  --glass-blur:   blur(14px) saturate(150%);
  --glass-ombra:  0 12px 34px rgba(63, 88, 155, .12);
  --glass-ombra-h:0 22px 50px rgba(63, 88, 155, .20);

  /* --- Raggi, spazi, transizioni --- */
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 34px;
  --r-pill: 999px;
  --sezione: 104px;
  --t-veloce: .18s ease;
  --t-molla: .35s cubic-bezier(.22,.9,.3,1);

  /* --- Tipografia --- */
  --font-titoli: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --font-testo:  'Inter', system-ui, -apple-system, sans-serif;
}

/* =========================================================================
   2. RESET E BASE
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-testo);
  font-size:17px;
  line-height:1.65;
  color:var(--testo);
  background:var(--off-white);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:var(--font-titoli);
  color:var(--blu);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:800;
}
h1{ font-size:clamp(2.2rem, 5vw, 3.5rem); font-weight:900; }
h2{ font-size:clamp(1.8rem, 3.6vw, 2.6rem); }
h3{ font-size:1.22rem; }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

/* Il nome del marchio dentro i testi correnti porta la tipografia dei titoli */
.marchio{
  font-family:var(--font-titoli);
  font-weight:800;
}

/* Focus visibile su tutta la pagina (accessibilità da tastiera) */
:focus-visible{
  outline:3px solid var(--blu);
  outline-offset:3px;
  border-radius:6px;
}

/* =========================================================================
   3. SFONDO ATMOSFERICO
   Macchie sfumate nei colori delle foglioline: servono a far "staccare"
   l'effetto glass delle card. Fisse, non interattive.
   ========================================================================= */
.sfondo{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--off-white) 42%, #F1F4FA 100%);
}
.macchia{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  /* Ogni macchia percorre un'orbita circolare: raggio in percentuale del
     proprio diametro, così il movimento resta proporzionato ovunque.
     Velocità costante (linear) perché un'orbita che rallenta agli estremi
     si legge come un'oscillazione, non come una fluttuazione. */
  --raggio: 34%;
  animation:fluttua 34s linear infinite;
  will-change:transform;
}
/* La corallo è ancorata con un calc di vh e vw: solo così la distanza dalla
   gialla in alto resta sufficiente anche sui monitor molto larghi e bassi,
   dove i vh valgono pochi vw. */
.macchia--giallo-alto { width:42vw; height:42vw; top:-10vw; left:-12vw; background:rgba(246,189,45,.38); }
.macchia--blu         { width:52vw; height:52vw; top:26vh;  right:-16vw; background:rgba(110,133,196,.42); }
.macchia--corallo     { width:36vw; height:36vw; top:calc(32vh + 22vw); left:-10vw; background:rgba(255,91,95,.32); }
.macchia--giallo      { width:34vw; height:34vw; top:118vh; right:2vw;  background:rgba(246,189,45,.30); }

/* Blu e gialla in basso vagano libere: durate, versi e partenze diversi. */
.macchia--blu   { --raggio:30%; animation-duration:41s; animation-delay:-24s; animation-direction:reverse; }
.macchia--giallo{ --raggio:40%; animation-duration:37s; animation-delay:-9s;  animation-direction:reverse; }

/* Gialla in alto e corallo sono invece agganciate: stessa durata, stesso
   verso, stessa partenza e raggio identico in vw (42vw × 36% = 36vw × 42%).
   Percorrendo orbite uguali in fase, si spostano istante per istante dello
   stesso vettore: la distanza fra i due centri non cambia mai e non possono
   raggiungersi. La corallo usa i keyframe in controfase così, quando una
   si dilata, l'altra si restringe: nemmeno le pulsazioni si sommano. */
.macchia--giallo-alto{ --raggio:36%; animation-duration:34s; animation-delay:-12s; }
.macchia--corallo    { --raggio:42%; animation-duration:34s; animation-delay:-12s;
                       animation-name:fluttua-controfase; }

/* La rotazione esterna disegna l'orbita, quella interna di segno opposto
   annulla il rollio della macchia su sé stessa. */
@keyframes fluttua{
  0%  { transform:rotate(0deg)   translateX(var(--raggio)) rotate(0deg)    scale(1);    opacity:.5; }
  25% { transform:rotate(90deg)  translateX(var(--raggio)) rotate(-90deg)  scale(1.32); opacity:.7; }
  50% { transform:rotate(180deg) translateX(var(--raggio)) rotate(-180deg) scale(1);    opacity:.5; }
  75% { transform:rotate(270deg) translateX(var(--raggio)) rotate(-270deg) scale(.72);  opacity:.32; }
  100%{ transform:rotate(360deg) translateX(var(--raggio)) rotate(-360deg) scale(1);    opacity:.5; }
}
@keyframes fluttua-controfase{
  0%  { transform:rotate(0deg)   translateX(var(--raggio)) rotate(0deg)    scale(1);    opacity:.5; }
  25% { transform:rotate(90deg)  translateX(var(--raggio)) rotate(-90deg)  scale(.72);  opacity:.34; }
  50% { transform:rotate(180deg) translateX(var(--raggio)) rotate(-180deg) scale(1);    opacity:.5; }
  75% { transform:rotate(270deg) translateX(var(--raggio)) rotate(-270deg) scale(1.32); opacity:.68; }
  100%{ transform:rotate(360deg) translateX(var(--raggio)) rotate(-360deg) scale(1);    opacity:.5; }
}

/* =========================================================================
   4. UTILITY DI LAYOUT
   ========================================================================= */
.container{ width:min(1180px, 92%); margin-inline:auto; }

/* La CTA duplicata dentro il menu compare solo su mobile */
.solo-mobile{ display:none; }

/* Skip link: invisibile finché non riceve il focus da tastiera */
.salta{
  position:fixed; top:12px; left:12px; z-index:1200;
  transform:translateY(-160%);
  transition:transform var(--t-molla);
}
.salta:focus{ transform:translateY(0); }

.sezione{ padding-block:var(--sezione); position:relative; }
.sezione--stretta{ padding-block:74px; }

.intestazione{ max-width:720px; margin:0 auto 58px; text-align:center; }
.intestazione p{ font-size:1.06rem; color:var(--testo); }

/* Occhiello: piccolo label maiuscolo spaziato, ricorrente in tutta la pagina */
.occhiello{
  display:inline-block;
  font-family:var(--font-testo);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--menta-scuro);
  margin-bottom:14px;
}
.occhiello--blu{ color:var(--blu-chiaro); }

/* --- La card in vetro: elemento ricorrente del design system --- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-bordo);
  border-radius:var(--r-l);
  box-shadow:var(--glass-ombra);
  transition:transform var(--t-molla), box-shadow var(--t-molla), border-color var(--t-molla);
}
.glass--hover:hover{
  transform:translateY(-6px);
  box-shadow:var(--glass-ombra-h);
  border-color:rgba(255,255,255,.95);
}

/* --- Bottoni --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-titoli);
  font-weight:800;
  font-size:1rem;
  padding:14px 28px;
  border-radius:var(--r-pill);
  border:2px solid transparent;
  transition:transform var(--t-veloce), box-shadow var(--t-veloce), background var(--t-veloce), color var(--t-veloce);
  text-align:center;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primario{
  background:var(--corallo-cta);
  color:var(--bianco);
  box-shadow:0 8px 22px rgba(206,64,69,.32);
}
.btn--primario:hover{ background:var(--corallo-cta-h); box-shadow:0 14px 30px rgba(206,64,69,.40); }

.btn--fantasma{
  background:rgba(255,255,255,.7);
  color:var(--blu);
  border-color:var(--blu);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.btn--fantasma:hover{ background:var(--blu); color:var(--bianco); }

.btn--menta{
  background:var(--menta-scuro);
  color:var(--bianco);
  box-shadow:0 8px 20px rgba(14,156,127,.28);
}
.btn--menta:hover{ background:#0B8168; }

.btn--piccolo{ padding:10px 20px; font-size:.92rem; }
.btn--blocco{ width:100%; }

/* =========================================================================
   5. HEADER E NAVIGAZIONE
   Header in vetro chiaro: il logo TALEA è blu su fondo trasparente,
   quindi una barra blu piena lo renderebbe illeggibile.
   ========================================================================= */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(63,88,155,.08);
  transition:box-shadow var(--t-molla), background var(--t-molla);
}
.header.is-scrolled{
  background:rgba(255,255,255,.86);
  box-shadow:0 6px 26px rgba(63,88,155,.10);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:74px;
}
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo img{ height:38px; width:auto; }

.nav__lista{ display:flex; align-items:center; gap:30px; }
.nav__link{
  font-size:.96rem; font-weight:500; color:var(--inchiostro);
  position:relative; padding:6px 0;
  transition:color var(--t-veloce);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px; background:var(--menta);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-molla);
}
.nav__link:hover{ color:var(--blu); }
.nav__link:hover::after{ transform:scaleX(1); }

.header__cta{ flex-shrink:0; }

/* Hamburger (mobile) */
.hamburger{
  display:none;
  width:46px; height:46px;
  background:transparent; border:1px solid var(--linea);
  border-radius:var(--r-s);
  padding:0; place-items:center;
}
.hamburger span{
  display:block; width:20px; height:2px; border-radius:2px;
  background:var(--blu); margin:4px auto;
  transition:transform var(--t-molla), opacity var(--t-veloce);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* =========================================================================
   6. HERO
   ========================================================================= */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding-top:104px; padding-bottom:48px;
  position:relative;
}
.hero__griglia{
  min-width:0; /* la hero è flex: senza questo l'item non scende sotto il min-content */
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px; align-items:center;
}
/* Il titolo scala anche sull'altezza: su schermi bassi resta dentro la viewport */
.hero h1{
  font-size:clamp(2.2rem, min(4.9vw, 7.1vh), 4.05rem);
  line-height:1.08;
  margin-bottom:clamp(14px, 2.6vh, 34px);
}
.hero .occhiello{ margin-bottom:clamp(10px, 1.8vh, 26px); }
.hero h1 .evidenza{
  background:linear-gradient(180deg, transparent 62%, rgba(49,216,179,.42) 62%);
  padding-inline:2px;
}
.hero__sub{
  font-size:clamp(1rem, 1.15vw, 1.18rem);
  max-width:52ch; color:var(--testo);
  margin-bottom:clamp(22px, 4vh, 46px);
}
.hero__azioni{ display:flex; flex-wrap:wrap; gap:14px; }

/* Micro-prove sotto le CTA */
.hero__prove{ display:flex; flex-wrap:wrap; gap:12px; }
.pillola{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:600; color:var(--blu-scuro);
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--glass-bordo);
  border-radius:var(--r-pill);
  padding:8px 16px;
}
.pillola svg{ width:16px; height:16px; flex-shrink:0; }

.hero__visual{ position:relative; }
.hero__visual svg{ width:100%; height:auto; overflow:visible; }

/* =========================================================================
   7. IL PROBLEMA — split view
   ========================================================================= */
.problema__split{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:26px;
}
.card-problema{ padding:36px 34px; }
.card-problema__icona{
  width:52px; height:52px; border-radius:16px;
  display:grid; place-items:center; margin-bottom:20px;
}
.card-problema__icona svg{ width:26px; height:26px; }
.card-problema--imprese .card-problema__icona{ background:rgba(63,88,155,.12); color:var(--blu); }
.card-problema--ets .card-problema__icona{ background:rgba(255,91,95,.14); color:var(--corallo-cta); }
.card-problema h3{ margin-bottom:18px; }

.lista-punti li{
  position:relative; padding-left:30px; margin-bottom:13px; font-size:.98rem;
}
.lista-punti li:last-child{ margin-bottom:0; }
.lista-punti li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:9px; height:9px; border-radius:50%;
  background:var(--menta);
}
.card-problema--imprese .lista-punti li::before{ background:var(--blu-chiaro); }
.card-problema--ets .lista-punti li::before{ background:var(--corallo); }

/* Richiamo di allerta: fondo ambra appena accennato, senza bordo */
.citazione{
  max-width:820px; margin:54px auto 0; text-align:center;
  font-family:var(--font-titoli); font-weight:700;
  font-size:clamp(1.1rem, 2.1vw, 1.45rem);
  line-height:1.5; color:var(--blu-scuro);
  padding:34px 38px;
  border-radius:var(--r-l);
  background:rgba(224, 123, 26, .10);
}
.citazione__icona{
  width:56px; height:56px; margin:0 auto 18px;
  border-radius:50%; display:grid; place-items:center;
  background:rgba(224, 123, 26, .17); color:var(--ambra);
}
.citazione__icona svg{ width:28px; height:28px; }

/* =========================================================================
   8. COME FUNZIONA — quattro passaggi
   ========================================================================= */
.passi{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:22px; position:relative;
}
.passo{ padding:32px 28px 30px; position:relative; }
.passo__numero{
  font-family:var(--font-titoli); font-weight:900; font-size:1.05rem;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--bianco); background:var(--blu);
  margin-bottom:18px;
  box-shadow:0 6px 16px rgba(63,88,155,.28);
}
.passo:nth-child(2) .passo__numero{ background:var(--menta-scuro); box-shadow:0 6px 16px rgba(14,156,127,.28); }
.passo:nth-child(3) .passo__numero{ background:var(--giallo); color:var(--inchiostro); box-shadow:0 6px 16px rgba(246,189,45,.34); }
.passo:nth-child(4) .passo__numero{ background:var(--corallo-cta); box-shadow:0 6px 16px rgba(206,64,69,.28); }
.passo h3{ font-size:1.1rem; margin-bottom:8px; }
.passo p{ font-size:.95rem; }

.nota-soluzione{
  margin-top:36px; text-align:center; font-size:.95rem; color:var(--tenue);
}

/* =========================================================================
   9. LA SOLUZIONE — la catena del valore (elemento firma)
   ========================================================================= */
.catena{
  --freccia: 22px;
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  align-items:stretch; gap:10px;
  width:100%; margin-bottom:30px;
}
.anello{
  display:flex; align-items:stretch; gap:10px;
}
/* Spazio speculare alla freccia mancante: mantiene i nodi tutti della stessa larghezza */
.anello:last-child::after{
  content:""; width:var(--freccia); flex-shrink:0;
}
.anello__nodo{
  flex:1; min-width:0; min-height:92px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-bordo);
  border-radius:var(--r-m);
  padding:16px 14px;
  text-align:center;
  font-family:var(--font-titoli); font-weight:800; font-size:.92rem;
  color:var(--blu);
  box-shadow:var(--glass-ombra);
  transition:transform var(--t-molla), box-shadow var(--t-molla);
}
.anello__nodo:hover{ transform:translateY(-5px) scale(1.03); box-shadow:var(--glass-ombra-h); }
.anello__nodo--talea{
  background:var(--blu); color:var(--bianco); border-color:var(--blu-chiaro);
  box-shadow:0 12px 28px rgba(63,88,155,.34);
}
.anello__logo{ width:min(100%, 108px); height:auto; display:block; }
.anello__nodo--finale{
  background:linear-gradient(135deg, var(--menta) 0%, var(--menta-scuro) 100%);
  color:#FFFFFF; border-color:rgba(255,255,255,.6);
  box-shadow:0 12px 28px rgba(14,156,127,.30);
}
.anello__freccia{ color:var(--blu-chiaro); flex-shrink:0; align-self:center; }
.anello__freccia svg{ width:var(--freccia); height:var(--freccia); }

.catena__didascalia{
  text-align:center; max-width:640px; margin-inline:auto;
  font-size:1rem; color:var(--testo);
}

/* =========================================================================
   10. BENEFICI
   ========================================================================= */
.griglia-benefici{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px;
  align-items:stretch;
}
.colonna-benefici{
  padding:38px 34px; display:flex; flex-direction:column;
}
.colonna-benefici h3{ margin:16px 0 0; font-size:1.5rem; }

.tag-destinatario{
  align-self:flex-start;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 14px; border-radius:var(--r-pill);
}
.tag-destinatario--imprese{ background:rgba(63,88,155,.13); color:var(--blu); }
.tag-destinatario--ets{ background:rgba(49,216,179,.20); color:#07584A; }

.lista-benefici{
  list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-direction:column; gap:22px;
}
.beneficio{ display:flex; align-items:flex-start; gap:16px; }
.beneficio__icona{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(63,88,155,.10); color:var(--blu); flex-shrink:0;
}
.beneficio__icona svg{ width:23px; height:23px; }
.colonna-benefici--ets .beneficio__icona{ background:rgba(49,216,179,.20); color:var(--menta-scuro); }
.beneficio__testo strong{
  display:block; font-family:var(--font-titoli); font-weight:800;
  color:var(--blu); margin-bottom:4px;
}
.beneficio__testo span{ display:block; font-size:.97rem; color:var(--testo); }

.frase-chiave{
  margin:0; margin-top:auto; padding-top:30px;
  font-family:var(--font-titoli); font-weight:700; font-size:1.05rem;
  color:var(--blu-scuro);
}

/* =========================================================================
   11. MARKETPLACE DEI PROGETTI
   ========================================================================= */
.griglia-progetti{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(288px,1fr)); gap:24px;
}
.progetto{ overflow:hidden; display:flex; flex-direction:column; }
.progetto__media{
  height:158px; position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(63,88,155,.16), rgba(49,216,179,.22));
  color:var(--blu); font-size:.82rem; letter-spacing:.06em;
}
.progetto__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.progetto--ambiente .progetto__media{ background:linear-gradient(135deg, rgba(49,216,179,.26), rgba(246,189,45,.22)); }
.progetto--formazione .progetto__media{ background:linear-gradient(135deg, rgba(246,189,45,.26), rgba(255,91,95,.20)); }

.progetto__ambito{
  position:absolute; top:14px; left:14px; z-index:1;
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:6px 13px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.9); color:var(--blu);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.progetto__corpo{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.progetto h3{ font-size:1.12rem; margin-bottom:6px; }
.progetto__luogo{
  font-size:.82rem; font-weight:600; color:var(--tenue);
  display:flex; align-items:center; gap:6px; margin-bottom:12px;
}
.progetto__luogo svg{ width:14px; height:14px; }
.progetto__descrizione{ font-size:.94rem; margin-bottom:20px; flex:1; }

.progetto__metrica{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.87rem; font-weight:600; color:var(--blu-scuro); margin-bottom:8px;
}
.progetto__metrica b{ font-family:var(--font-titoli); color:var(--menta-scuro); font-size:1rem; }

.barra{
  height:9px; border-radius:var(--r-pill);
  background:rgba(63,88,155,.12); overflow:hidden; margin-bottom:20px;
}
.barra__fill{
  display:block; height:100%; width:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--menta) 0%, var(--menta-scuro) 100%);
  transition:width 1.3s cubic-bezier(.2,.8,.2,1);
}
.progetto--formazione .barra__fill{ background:linear-gradient(90deg, var(--giallo) 0%, #E09A00 100%); }

.marketplace__coda{
  display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:46px;
}
.marketplace__nota{ font-size:.85rem; color:var(--tenue); text-align:center; }

/* =========================================================================
   12. FORM — manifestazione di interesse imprese
   ========================================================================= */
.form-interesse{ padding:clamp(28px, 4vw, 46px); max-width:960px; margin-inline:auto; }

.form-passo{ margin-bottom:34px; }
.form-passo:last-of-type{ margin-bottom:26px; }
.form-passo__titolo{
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.form-passo__numero{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:rgba(49,216,179,.24); color:#07584A;
  font-family:var(--font-titoli); font-weight:800; font-size:.85rem;
}
.form-passo__titolo h3{ margin:0; font-size:1.08rem; }

.campi{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(215px,1fr)); gap:18px;
}
.campo{ display:flex; flex-direction:column; gap:7px; }
.campo--largo{ grid-column:1/-1; }
.campo label{
  font-size:.86rem; font-weight:600; color:var(--blu-scuro);
}
.campo .obbligatorio{ color:var(--corallo-cta); }
.campo input,
.campo select,
.campo textarea{
  font-family:var(--font-testo); font-size:.95rem; color:var(--inchiostro);
  padding:12px 15px;
  border:1px solid var(--linea);
  border-radius:var(--r-s);
  background:rgba(255,255,255,.82);
  transition:border-color var(--t-veloce), box-shadow var(--t-veloce);
  width:100%;
}
.campo textarea{ resize:vertical; min-height:92px; }
.campo select{
  appearance:none; -webkit-appearance:none;
  padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F589B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:14px;
}
.campo input::placeholder,
.campo textarea::placeholder{ color:#A6AFC2; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none; border-color:var(--blu);
  box-shadow:0 0 0 4px rgba(63,88,155,.13);
}

/* Selettore modalità di contributo */
.scelte{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; margin-bottom:24px; }
.scelta{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:20px 16px;
  border:2px solid var(--linea);
  border-radius:var(--r-m);
  background:rgba(255,255,255,.6);
  font-family:var(--font-titoli); font-weight:800; font-size:.95rem; color:var(--blu);
  transition:border-color var(--t-veloce), background var(--t-veloce), transform var(--t-veloce);
}
.scelta svg{ width:24px; height:24px; }
.scelta:hover{ transform:translateY(-2px); border-color:var(--blu-chiaro); }
.scelta[aria-pressed="true"]{
  border-color:var(--menta-scuro);
  background:rgba(49,216,179,.14);
  color:#07584A;
}

/* Chip riutilizzabili: importi e competenze */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding:9px 17px;
  border-radius:var(--r-pill);
  border:1px solid var(--linea);
  background:rgba(255,255,255,.7);
  font-size:.88rem; font-weight:600; color:var(--blu-scuro);
  transition:all var(--t-veloce);
}
.chip:hover{ border-color:var(--blu-chiaro); }
.chip[aria-pressed="true"]{
  background:var(--blu); border-color:var(--blu); color:var(--bianco);
}
.chip--competenza[aria-pressed="true"]{
  background:var(--menta-scuro); border-color:var(--menta-scuro);
}

/* Chip per aggiungere una competenza fuori elenco */
.chip--aggiungi{
  border:1px dashed rgba(63,88,155,.45);
  background:transparent; color:var(--blu);
}
.chip--aggiungi:hover{
  border-color:var(--menta-scuro); color:var(--menta-scuro);
  background:rgba(49,216,179,.10);
}
.chip--nuova{
  border:1px dashed var(--menta-scuro);
  background:rgba(255,255,255,.92);
  font-family:var(--font-testo); color:var(--inchiostro);
  min-width:186px;
}
.chip--nuova:focus{ outline:none; box-shadow:0 0 0 4px rgba(49,216,179,.22); }

.gruppo{ margin-bottom:22px; }
.gruppo:last-child{ margin-bottom:0; }
.gruppo[hidden]{ display:none; }
.gruppo__etichetta{
  display:block; font-size:.86rem; font-weight:600; color:var(--blu-scuro); margin-bottom:10px;
}

/* Stepper volontari */
.stepper{ display:flex; align-items:center; gap:14px; }
.stepper__btn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--linea); background:rgba(255,255,255,.8);
  color:var(--blu); font-size:1.2rem; font-weight:700; line-height:1;
  display:grid; place-items:center;
  transition:all var(--t-veloce);
}
.stepper__btn:hover{ background:var(--blu); color:var(--bianco); border-color:var(--blu); }
.stepper__valore{
  font-family:var(--font-titoli); font-weight:800; font-size:1.15rem;
  color:var(--blu); min-width:34px; text-align:center;
}

/* Consenso privacy */
.consenso{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.85rem; color:var(--tenue); line-height:1.55;
  margin-bottom:24px;
}
.consenso input{ margin-top:3px; width:17px; height:17px; accent-color:var(--menta-scuro); flex-shrink:0; }
.consenso a{ color:var(--blu); text-decoration:underline; }

.form-nota{ text-align:center; font-size:.83rem; color:var(--tenue); margin-top:14px; }

/* Riga di azioni finali del modulo: bozza + invio */
.form-azioni{ display:flex; flex-wrap:wrap; gap:14px; }
.form-azioni .btn{ flex:1 1 210px; }

/* Messaggio di conferma dopo l'invio */
.successo{
  display:none;
  text-align:center; padding:46px 30px;
}
.successo.is-visibile{ display:block; }
.successo__icona{
  width:74px; height:74px; margin:0 auto 22px;
  border-radius:50%; display:grid; place-items:center;
  background:rgba(49,216,179,.22); color:var(--menta-scuro);
  animation:spunta .55s cubic-bezier(.2,1.4,.4,1) both;
}
.successo__icona svg{ width:36px; height:36px; }
.successo h3{ font-size:1.5rem; margin-bottom:10px; }
.successo p{ max-width:44ch; margin-inline:auto; }
@keyframes spunta{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* Colonna laterale: progetto scelto + "cosa succede dopo" */
.form-affianco{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:26px; align-items:start;
}
.colonna-laterale{ display:grid; gap:26px; align-content:start; }

/* Riepilogo del progetto arrivato dal marketplace */
.progetto-scelto{ overflow:hidden; }
.progetto-scelto__media{
  position:relative; height:152px; overflow:hidden;
  background:linear-gradient(135deg, rgba(63,88,155,.16), rgba(49,216,179,.22));
}
.progetto-scelto__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.progetto-scelto__corpo{ padding:22px 26px 26px; }
.progetto-scelto__occhiello{
  display:block; margin-bottom:8px;
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--menta-scuro);
}
.progetto-scelto h2{ font-size:1.08rem; line-height:1.35; margin-bottom:8px; }
.progetto-scelto__descrizione{ font-size:.92rem; margin:0; }

.dopo-invio{ padding:30px 28px; }
.dopo-invio h3{ font-size:1.02rem; margin-bottom:16px; }
.dopo-invio ol{ counter-reset:step; padding:0; margin:0; list-style:none; }
.dopo-invio li{
  position:relative; padding-left:38px; margin-bottom:16px; font-size:.92rem;
}
.dopo-invio li:last-child{ margin-bottom:0; }
.dopo-invio li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0;
  width:25px; height:25px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--blu); color:var(--bianco);
  font-family:var(--font-titoli); font-weight:800; font-size:.76rem;
}

/* =========================================================================
   13. FIDUCIA E CHI SIAMO
   ========================================================================= */
.griglia-fiducia{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px;
  margin-bottom:64px;
}
.fiducia{ padding:30px 26px; text-align:center; }
.fiducia__icona{
  width:54px; height:54px; margin:0 auto 16px;
  border-radius:16px; display:grid; place-items:center;
  background:rgba(63,88,155,.10); color:var(--blu);
}
.fiducia__icona svg{ width:26px; height:26px; }
.fiducia h3{ font-size:1.06rem; margin-bottom:8px; }
.fiducia p{ font-size:.93rem; }

.griglia-team{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px;
}
.persona{ padding:32px 26px; text-align:center; }
.persona__avatar{
  width:70px; height:70px; margin:0 auto 16px;
  border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-titoli); font-weight:900; font-size:1.35rem;
  color:var(--bianco);
  box-shadow:0 8px 20px rgba(63,88,155,.24);
}
.persona:nth-child(1) .persona__avatar{ background:linear-gradient(135deg, var(--blu) 0%, var(--blu-chiaro) 100%); }
.persona:nth-child(2) .persona__avatar{ background:linear-gradient(135deg, var(--menta-scuro) 0%, var(--menta) 100%); }
.persona:nth-child(3) .persona__avatar{ background:linear-gradient(135deg, var(--corallo-cta) 0%, var(--corallo) 100%); }
.persona h3{ font-size:1.1rem; margin-bottom:4px; }
.persona__ruolo{
  font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--menta-scuro); margin-bottom:12px;
}
.persona p{ font-size:.92rem; }

.spinoff{
  max-width:760px; margin:0 auto 48px; text-align:center;
  font-size:1.04rem;
}

/* =========================================================================
   14. FOOTER
   ========================================================================= */
.footer{
  background:var(--blu);
  color:rgba(255,255,255,.86);
  padding-top:70px;
  position:relative;
}
.footer__griglia{
  display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3, minmax(0,1fr));
  gap:40px; padding-bottom:52px;
}
.footer h4{
  color:var(--bianco); font-size:.82rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px;
}
.footer__marchio p{ font-size:.94rem; max-width:38ch; }
.footer__logo{
  display:block; height:42px; width:auto; margin-bottom:12px;
}
.footer__claim{
  font-family:var(--font-titoli); font-weight:700; font-size:.95rem;
  color:var(--menta); margin-bottom:14px;
}
.footer__lista li{ margin-bottom:11px; }
.footer__lista a{
  font-size:.94rem; color:rgba(255,255,255,.86);
  transition:color var(--t-veloce), padding-left var(--t-veloce);
}
.footer__lista a:hover{ color:var(--menta); padding-left:5px; }
.footer__basso{
  border-top:1px solid rgba(255,255,255,.18);
  padding-block:24px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:.85rem; color:rgba(255,255,255,.72);
}
.footer :focus-visible{ outline-color:var(--menta); }

/* =========================================================================
   15. PAGINE MODULO (manifestazione di interesse, proposta di progetto)
   Pagine a sé stanti, raggiungibili solo dai pulsanti dedicati.
   ========================================================================= */
.pagina-modulo{ padding-top:132px; padding-bottom:var(--sezione); }
.pagina-modulo h1{ font-size:clamp(1.9rem, 3.8vw, 2.7rem); }
.form-interesse--stretto{ max-width:760px; }

/* Link di rientro alla landing */
.torna{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.9rem; font-weight:600; color:var(--blu);
  margin-bottom:26px;
  transition:gap var(--t-veloce);
}
.torna:hover{ gap:13px; }
.torna svg{ width:17px; height:17px; }

/* Area caricamento immagini (solo dimostrativa) */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:156px;
  border:2px dashed rgba(63,88,155,.28);
  border-radius:var(--r-m);
  background:rgba(49,216,179,.07);
  padding:26px 20px; text-align:center;
  color:var(--tenue); font-size:.9rem;
  cursor:pointer;
  transition:border-color var(--t-veloce), background var(--t-veloce);
}
.dropzone:hover{ border-color:var(--menta-scuro); background:rgba(49,216,179,.13); }
.dropzone svg{ width:30px; height:30px; margin-bottom:6px; color:var(--blu-chiaro); flex-shrink:0; }
.dropzone small{ font-size:.8rem; color:#A6AFC2; }

/* =========================================================================
   16. RIVELAZIONE AL SCROLL
   ========================================================================= */
/* Uso un'animazione (non una transizione) così il transform di hover
   delle card in vetro resta libero una volta terminato l'ingresso. */
.rivela{ opacity:0; }
.rivela.is-visibile{
  opacity:1;
  animation:entra .7s cubic-bezier(.22,.9,.3,1) backwards;
}
@keyframes entra{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:none; }
}

/* Filamenti animati dell'illustrazione hero */
@keyframes scorri{ to{ stroke-dashoffset:-64; } }
.filo{ animation:scorri 2.4s linear infinite; }
.filo:nth-of-type(2){ animation-duration:2.9s; }
.filo:nth-of-type(3){ animation-duration:3.4s; }

/* Foglioline della hero: deriva lenta con l'angolo che oscilla attorno
   alla posa di partenza, così il moto sembra portato dall'aria.
   La rotazione avviene sul centro della foglia (fill-box), non sull'origine
   del disegno, altrimenti l'oscillazione diventerebbe un'orbita larga. */
.foglia{
  --rot:0deg; --scala:1;
  transform-box:fill-box; transform-origin:center;
  transform:rotate(var(--rot)) scale(var(--scala));
  animation:fluttua-foglia 11s ease-in-out infinite;
}
.foglia--gialla { --rot:28deg;  --scala:.85; animation-duration:11s;   animation-delay:-2s; }
.foglia--corallo{ --rot:-40deg; --scala:.75; animation-duration:13.5s; animation-delay:-6s; }
.foglia--menta  { --rot:-12deg; --scala:.6;  animation-duration:9.5s;  animation-delay:-4s; }

@keyframes fluttua-foglia{
  0%,100%{ transform:translate(0,0)        rotate(var(--rot))               scale(var(--scala)); }
  25%    { transform:translate(8px,-15px)  rotate(calc(var(--rot) + 15deg)) scale(calc(var(--scala) * 1.08)); }
  50%    { transform:translate(-4px,-24px) rotate(calc(var(--rot) - 11deg)) scale(var(--scala)); }
  75%    { transform:translate(-9px,-10px) rotate(calc(var(--rot) + 7deg))  scale(calc(var(--scala) * .93)); }
}

/* =========================================================================
   17. RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px){
  :root{ --sezione:80px; }
  .hero__griglia{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .hero{ padding-top:128px; text-align:center; }
  .hero__sub{ margin-inline:auto; }
  .hero__azioni, .hero__prove{ justify-content:center; }
  .hero__visual{ max-width:520px; margin-inline:auto; }
  .form-affianco{ grid-template-columns:1fr; }
  .griglia-benefici{ grid-template-columns:1fr; }
  .footer__griglia{ grid-template-columns:1fr 1fr; gap:34px; }
  .catena{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:22px; }
  .anello:nth-child(3) .anello__freccia{ display:none; }
  .anello:nth-child(3)::after{ content:""; width:var(--freccia); flex-shrink:0; }
}

@media (max-width: 860px){
  /* Navigazione mobile: pannello a scomparsa gestito in Vanilla JS */
  .hamburger{ display:grid; order:3; }
  .header__cta{ display:none; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--linea);
    box-shadow:0 20px 40px rgba(63,88,155,.14);
    max-height:0; overflow:hidden;
    transition:max-height var(--t-molla);
  }
  .nav.is-aperto{ max-height:440px; }
  .nav__lista{
    flex-direction:column; align-items:stretch; gap:0;
    padding:14px 6% 26px;
  }
  .nav__link{
    padding:15px 0; font-size:1.02rem; font-weight:600;
    border-bottom:1px solid var(--linea);
  }
  .nav__link::after{ display:none; }
  .solo-mobile{ display:block; }
  .nav__lista .btn{ margin-top:20px; }
}

@media (max-width: 640px){
  :root{ --sezione:66px; }
  body{ font-size:16px; }
  .catena{ grid-template-columns:1fr; gap:6px; }
  .anello{ flex-direction:column; gap:6px; }
  .anello__nodo{ width:100%; min-height:64px; }
  .anello:nth-child(3) .anello__freccia{ display:block; }
  .catena .anello::after{ content:none; }
  .anello__freccia{ transform:rotate(90deg); }
  .citazione{ padding:26px 22px; }
  .card-problema{ padding:28px 24px; }
  .colonna-benefici{ padding:30px 24px; }
  .footer__griglia{ grid-template-columns:1fr; }
  .footer__basso{ justify-content:center; text-align:center; }
}

/* =========================================================================
   18. MOVIMENTO RIDOTTO / STAMPA
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .rivela,
  .rivela.is-visibile{ opacity:1; transform:none; animation:none; }
  .filo{ animation:none; }
  .foglia{ animation:none; }
  .macchia{ animation:none; transform:none; }
}