/* ==========================================================================
   SKILLSPROUT LIVE — foglio di stile della demo (skillsprout-live.html)
   ==========================================================================
   Il file e diviso in due parti.

   PARTE 1 — COPIA DEL DESIGN SYSTEM
   Tutto quello che sta nella parte 1 e copiato cosi com'e dalla pagina
   design-system-skillsprout.html (che ha il suo CSS dentro la pagina stessa
   e quindi non si puo collegare). Non modificare queste regole qui: se un
   componente deve cambiare, si cambia prima nel design system e poi si
   ricopia. L'unica differenza sono i font: nel design system sono scritti
   dentro la pagina come testo (base64), qui sono gli stessi identici file
   salvati nella cartella fonts/, cosi il browser li scarica una volta sola.

   PARTE 2 — LA PAGINA
   Impaginazione delle sezioni, colori che il design system non ha, e i
   pochi adattamenti ai componenti (per esempio la misura piu grande del
   bottone nella hero). Ogni adattamento e scritto e spiegato li.
   ========================================================================== */


/* ##########################################################################
   PARTE 1 — COPIA DEL DESIGN SYSTEM
   ########################################################################## */

/* ---------- Font (stessi file del design system) ---------- */
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../fonts/skillsprout-live-poppins-700.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('../fonts/skillsprout-live-poppins-600.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('../fonts/skillsprout-live-poppins-500.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../fonts/skillsprout-live-poppins-400.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url('../fonts/skillsprout-live-opensans-400.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url('../fonts/skillsprout-live-opensans-600.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-display: swap; src: url('../fonts/skillsprout-live-opensans-700.woff2') format('woff2'); }

/* ---------- [DS righe 17-40] Colori (token) ---------- */
:root{
  /* Primary green scale */
  --p-100:#E3F9E1;
  --p-300:#8EEB84;
  --p-500:#3FD436;
  --p-600:#6EE365;
  --p-700:#1F8C1B;
  --p-900:#042A1B;

  /* Secondary / muted / ink */
  --s-300:#748981;
  --s-500:#61739C;
  --ink:#13181E;

  /* Neutrals */
  --white:#FFFFFF;
  --bg:#F2F2F2;
  --border:#C9C9C9;
  --divider:#E7E7E7;

  --gold:#FFB020;

  --page-bg:#F8FBF7;
}

/* ---------- [DS righe 42-49] Base della pagina ---------- */
*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family:'Open Sans', sans-serif;
  background:var(--page-bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- [DS righe 59-59] Titoli ---------- */
h1,h2,h3{ font-family:'Poppins', sans-serif; }

/* ---------- [DS righe 224-242] Bottoni: primario e secondario ---------- */
.pbtn{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:13.5px;
  padding:13px 0;
  border-radius:999px;
  text-align:center;
  width:100%;
  border:none;
}
.pbtn.primary-default{ background:var(--p-500); color:#fff; }
.pbtn.primary-hover{ background:var(--p-600); color:#0c3a12; }
.pbtn.primary-pressed{ background:var(--p-700); color:#fff; }
.pbtn.primary-disabled{ background:var(--border); color:#8a918c; }

.pbtn.secondary-default{ background:transparent; color:var(--p-700); border:1.5px solid var(--p-500); }
.pbtn.secondary-hover{ background:transparent; color:var(--p-600); border:1.5px solid var(--p-600); }
.pbtn.secondary-pressed{ background:transparent; color:var(--p-700); border:1.5px solid var(--p-700); }
.pbtn.secondary-disabled{ background:transparent; color:var(--border); border:1.5px solid var(--border); }

/* ---------- [DS righe 244-256] Bottone arrow ---------- */
.arrowbtn{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto;
}
/* La freccia e l'SVG vero del progetto. Dentro ha fill="currentColor",
   quindi prende da sola il colore che .a-default / .a-hover / ... danno
   al bottone: un file solo per tutti e quattro gli stati. */
.arrowbtn .ss-freccia{ width:16px; height:16px; display:block; }
.arrowbtn.a-default{ border:1.5px solid var(--p-500); color:var(--p-700); }
.arrowbtn.a-hover{ border:1.5px solid var(--p-600); color:var(--p-600); }
.arrowbtn.a-pressed{ border:1.5px solid var(--p-700); color:var(--p-700); }
.arrowbtn.a-disabled{ border:1.5px solid var(--border); color:var(--border); }

/* ---------- [DS righe 258-373] Bottone hero Start learning + Enroll now ---------- */
/* ---------- BOTTONE HERO "START LEARNING" (hide & seek) ----------
   E un bottone solo, fatto di tre pezzi affiancati: freccia sinistra,
   pillola col testo, freccia destra.
   Da fermo si vede solo la pillola con la freccia a destra: quella di
   sinistra e rimpicciolita (scale .5) e tirata indietro con un margine
   negativo, quindi finisce sotto la pillola, che ha lo sfondo pieno e sta
   sopra (z-index:1) e la copre.
   Al passaggio del mouse le due frecce si scambiano di posto: la sinistra
   esce e torna a grandezza piena, la destra scivola sotto la pillola e si
   rimpicciolisce.
   I numeri delle due animazioni sono legati fra loro: il margine negativo
   (-46px) e esattamente la larghezza della freccia (46px). Cosi il pezzo
   nascosto non occupa piu nessuno spazio e la pillola non si sposta. Se
   cambi la misura della freccia, ricalcola anche il -46px.
   Non c'e spazio fra pillola e cerchio: si toccano, come nella reference. */
.hsbtn{
  display:inline-flex;
  align-items:center;
  gap:0;
  width:fit-content;
  padding:0;
  border:none;
  background:none;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.hsbtn > *{
  transition:margin .3s ease-out, transform .3s ease-out, background .3s ease-out, color .3s ease-out;
}
.hsbtn .hs-text{
  position:relative;
  z-index:1;               /* sta sopra alle frecce che le scivolano sotto */
  display:flex;
  align-items:center;
  height:46px;
  padding:0 30px;
  border-radius:999px;
  font-size:13.5px;
  line-height:1;
  white-space:nowrap;      /* la scritta non va mai a capo dentro alla pillola */
  background:var(--p-500);
  color:#fff;
}
.hsbtn .hs-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--p-500);
  color:#fff;
}
.hsbtn .hs-icon .ss-freccia{ width:15px; height:15px; display:block; }

/* posizione di partenza: sinistra nascosta, destra fuori */
.hsbtn .hs-icon.left{ transform:scale(.5); margin-right:-46px; }
.hsbtn .hs-icon.right{ transform:scale(1); margin-left:0; }

/* posizione a mouse sopra e a mouse premuto (st-hover / st-pressed servono
   alle copie ferme della tabella degli stati qui sotto) */
.hsbtn:hover .hs-icon.left,
.hsbtn.st-hover .hs-icon.left,
.hsbtn.st-pressed .hs-icon.left{ transform:scale(1); margin-right:0; }
.hsbtn:hover .hs-icon.right,
.hsbtn.st-hover .hs-icon.right,
.hsbtn.st-pressed .hs-icon.right{ transform:scale(.5); margin-left:-46px; }

/* colori dei quattro stati: gli stessi del bottone primario */
.hsbtn:hover > *,
.hsbtn.st-hover > *{ background:var(--p-600); color:#0c3a12; }
.hsbtn:active > *,
.hsbtn.st-pressed > *{ background:var(--p-700); color:#fff; }
.hsbtn:disabled > *,
.hsbtn.st-disabled > *{ background:var(--border); color:#8a918c; }
.hsbtn:disabled,
.hsbtn.st-disabled{ cursor:not-allowed; pointer-events:none; }

/* ---------- BOTTONE "ENROLL NOW" DELLE CARD CORSO ----------
   Vive dentro le card scure: da fermo e solo un contorno chiaro, al
   passaggio del mouse si riempie di verde. */
.enrollbtn{
  /* flex e non block: cosi la scritta resta al centro anche quando il
     bottone e una copia ferma (uno <span>) e non un <button> vero */
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:0;
  height:44px;
  border-radius:999px;
  border:1.5px solid var(--white);
  background:transparent;
  color:var(--white);
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:13.5px;
  line-height:1;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s ease-out, border-color .25s ease-out, color .25s ease-out;
}
.enrollbtn:hover,
.enrollbtn.st-hover{ background:var(--p-500); border-color:var(--p-500); color:var(--p-900); }
.enrollbtn:active,
.enrollbtn.st-pressed{ background:var(--p-700); border-color:var(--p-700); color:#fff; }
.enrollbtn:disabled,
.enrollbtn.st-disabled{ background:transparent; border-color:#3f5a4b; color:#5d6f66; cursor:not-allowed; pointer-events:none; }

/* Le copie ferme dentro alla tabella degli stati non devono reagire al
   mouse: sono figure, non bottoni da provare. */
.is-static{ pointer-events:none; }

/* ---------- [DS righe 421-443] Tag, stelle, statistica, campo email ---------- */
.tag{
  display:inline-block;
  background:var(--p-100);
  color:var(--p-700);
  font-size:11.5px;
  font-weight:600;
  font-family:'Open Sans',sans-serif;
  padding:6px 14px;
  border-radius:999px;
}
/* Le stelline non sono piu il carattere ★ ma il file del progetto. */
.stars{ display:flex; align-items:center; gap:3px; }
.stars img{ width:15px; height:15px; display:block; }
.stat-num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:30px; color:var(--p-700); }
.stat-lbl{ font-size:11.5px; color:#7a827c; margin-top:2px; }
.field{
  border:1.5px solid var(--border);
  border-radius:999px;
  padding:11px 16px;
  font-size:12.5px;
  color:#8a918c;
  font-family:'Open Sans',sans-serif;
}

/* ---------- [DS righe 457-514] Card corso e card recensione ---------- */
.course-card{
  background:var(--p-900);
  border-radius:20px;
  padding:16px;
}
.course-card .thumb{
  background:#fff;
  border-radius:12px;
  height:96px;
  margin-bottom:14px;
}
.course-card h4{
  font-family:'Poppins',sans-serif;
  color:#fff;
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
}
.course-card .sub{
  color:#9fb3a8;
  font-size:11.5px;
  margin-bottom:16px;
}
/* Il bottone della card corso e ora l'Enroll now a contorno (vedi sezione
   bottoni): qui serve solo a staccarlo dal testo che ha sopra. */
.course-card .enrollbtn{ margin-top:2px; }

.review-card{
  background:var(--p-100);
  border-radius:24px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
/* Misure ricavate dal png a 2x della card vera: rispetto alla larghezza
   della card, il margine interno e circa il 6%, le virgolette alte circa il
   6% e il testo circa il 3%. Qui la card e piu piccola, quindi i valori sono
   riscalati mantenendo le stesse proporzioni. */
.review-card .quote{
  width:26px;
  height:auto;
  display:block;
  margin:0 0 14px 4px;   /* i 4px a sinistra sono l'allineamento ottico del mockup */
}
.review-card .rtext{
  font-size:12.5px;
  color:var(--s-300);
  line-height:1.5;
}
.review-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.review-card .rname{ font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:#55655D; }
.review-card .rrole{ font-size:11.5px; font-style:italic; color:var(--s-300); }

/* ---------- [DS righe 552-558] Stati di footer e navigazione, logo ---------- */
.footer-default{ color:#7a9b87; }
.footer-hover{ color:#fff; font-weight:700; }
.brand-logo{ height:26px; width:auto; display:block; }
.footer-pressed{ color:#3f5a4b; }
.nav-default{ color:#8fa89a; font-weight:600; }
.nav-hover{ color:#fff; font-weight:700; }
.nav-selected{ color:var(--p-500); font-weight:700; }


/* ##########################################################################
   PARTE 2 — LA PAGINA
   ########################################################################## */

/* ---------- Misure: da Figma (1440) fino a 1920 ----------
   Il mockup e disegnato largo 1440px, ma la pagina deve stare bene fino a
   1920. Invece di riscrivere ogni misura, usiamo un'unita, --u, che vale
   "un pixel di Figma" riportato alla larghezza dello schermo:
     a 1440 vale 1px, a 1920 vale 1,333px, a 1024 vale 0,71px.
   Oltre i 1920 smette di crescere: il contenuto resta centrato e largo al
   massimo 1920. Cosi "100px di Figma" si scrive calc(100 * var(--u)) e
   tutta la pagina mantiene le proporzioni del mockup.
   Sotto i 768px (telefoni) questo sistema si spegne: le sezioni diventano
   colonne e le misure tornano in px normali (vedi in fondo al file). */
:root{
  --u: min(calc(100vw / 1440), calc(1920px / 1440));
  --ssl-max: calc(1440 * var(--u));   /* larghezza massima del contenuto */
  --ssl-side: calc(100 * var(--u));   /* margine laterale del mockup */

  /* IL VERDE PRINCIPALE. Il design system dice #3FD436, il mockup usa
     #27AC1F (lo stesso verde del germoglio nel logo). Per questa pagina
     vale il verde del mockup: cambiando il token qui, tutti i componenti
     copiati sopra (bottoni, link selezionati...) lo prendono da soli.
     Nella pagina del design system il valore resta #3FD436. */
  --p-500:#27AC1F;

  /* Colori che compaiono nel mockup ma non nel design system.
     Tenuti qui, con un nome, invece che sparsi nel codice. */
  --ssl-caption:#97B2A8;   /* testi secondari su fondo scuro (hero, numeri, footer) */
  --ssl-muted:#61736C;     /* testi secondari su fondo chiaro. Nel design system
                              c'e --s-500 #61739C (grigio-blu): sembra un refuso */
  --ssl-card:#183B2D;      /* fondo delle card corso (il design system usa --p-900) */
  --ssl-mint:#F1FFF9;      /* fondo di Missions e della galleria */
  --ssl-why-text:#B4E2B1;  /* descrizioni dentro ai cerchi di Missions */
  --ssl-review-yellow:#FFFCDB; /* card recensione gialla */
  --ssl-review-cyan:#D9FFFF;   /* card recensione azzurra */
}

/* Il menu e i link interni portano alle sezioni: lo scorrimento e morbido
   e la sezione si ferma sotto alla navbar, non dietro. */
html{ scroll-behavior:smooth; }
.ssl main > section{ scroll-margin-top:calc(88 * var(--u)); }
@media (max-width:767.98px){ .ssl main > section{ scroll-margin-top:64px; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* Nessuna riga deve mai sbordare di lato. "clip" invece di "hidden" non
   rompe la barra di navigazione fissa in alto. */
body.ssl{ overflow-x:clip; }

/* Il design system non disegna il "focus" (il contorno che compare quando
   si naviga con la tastiera). Senza, chi usa la tastiera non vede dove si
   trova: qui un contorno verde chiaro, uguale per tutti gli elementi. */
.ssl a:focus-visible,
.ssl button:focus-visible,
.ssl input:focus-visible{
  outline:2px solid var(--p-300);
  outline-offset:3px;
}

/* Link "salta al contenuto": invisibile finche non si preme Tab. */
.ssl-skip{
  position:fixed;
  left:16px;
  top:-80px;
  z-index:100;
  padding:10px 18px;
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
}
.ssl-skip:focus{ top:16px; }


/* ==========================================================================
   COMPONENTI DEL DESIGN SYSTEM: gli adattamenti per la pagina vera
   ==========================================================================
   Nel design system i bottoni sono "figure" ferme: uno stato per riga.
   Qui devono reagire al mouse e alla tastiera, quindi agli stati di base
   aggiungiamo :hover / :active con GLI STESSI VALORI delle righe Hovering
   e Pressed del design system. Nessun colore nuovo. */

/* ---------- Bottone primario (.pbtn primary-default) ---------- */
.ssl .pbtn{
  display:inline-block;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .25s ease-out, color .25s ease-out;
}
.ssl .pbtn.primary-default:hover,
.ssl .pbtn.primary-default:focus-visible{ background:var(--p-600); color:#0c3a12; }  /* = primary-hover */
.ssl .pbtn.primary-default:active{ background:var(--p-700); color:#fff; }           /* = primary-pressed */

/* ---------- Bottone hero (.hsbtn) in piu misure ----------
   Nel design system il bottone e alto 46px, e il numero 46 compare in tre
   punti: altezza, larghezza del cerchio e margine negativo che nasconde la
   freccia. Qui quei tre punti leggono una variabile, --hs, cosi lo stesso
   bottone puo essere grande nella hero (80px di Figma) e normale altrove,
   senza che i conti si scollino: il margine e sempre "meno la larghezza".
   Se --hs non e impostata, restano i 46px del design system.
   Aggiungiamo anche la tastiera: con Tab il bottone fa la stessa
   animazione del passaggio del mouse. */
.ssl .hsbtn{ --hs-size:var(--hs, 46px); }
.ssl .hsbtn .hs-text{
  height:var(--hs-size);
  min-width:var(--hs-pill, 0px);      /* larghezza minima della pillola */
  justify-content:center;
  padding:0 var(--hs-pad, 30px);
  font-size:var(--hs-font, 13.5px);
}
.ssl .hsbtn .hs-icon{ width:var(--hs-size); height:var(--hs-size); }
.ssl .hsbtn .hs-icon .ss-freccia{
  width:calc(var(--hs-size) * .33);   /* 15 su 46, come nel design system */
  height:calc(var(--hs-size) * .33);
}
.ssl .hsbtn .hs-icon.left{ margin-right:calc(-1 * var(--hs-size)); }
.ssl .hsbtn:hover .hs-icon.left,
.ssl .hsbtn:focus-visible .hs-icon.left{ transform:scale(1); margin-right:0; }
.ssl .hsbtn:hover .hs-icon.right,
.ssl .hsbtn:focus-visible .hs-icon.right{ transform:scale(.5); margin-left:calc(-1 * var(--hs-size)); }
.ssl .hsbtn:focus-visible > *{ background:var(--p-600); color:#0c3a12; }
.ssl .hsbtn:active > *{ background:var(--p-700); color:#fff; }
/* il contorno della tastiera attorno a tutta la pillola, non a un pezzo */
.ssl .hsbtn:focus-visible{ outline-offset:4px; border-radius:999px; }


/* ==========================================================================
   NAVBAR
   ==========================================================================
   Etichette e disposizione dal mockup, stati (colori e pesi) dal design
   system: Default / Hovering / Selected.
   E fissa in alto: sopra alla hero e trasparente, appena si scorre prende
   lo sfondo verde scuro e si abbassa un poco (la classe "is-scrolled" la
   aggiunge skillsprout-live.js). */
.ssl-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  transition:background-color .3s ease-out, box-shadow .3s ease-out;
}
.ssl-nav.is-scrolled,
.ssl-nav.is-open{
  background:var(--p-900);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.ssl-nav__inner{
  /* tre colonne: logo | link al centro esatto della pagina | bottone */
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:100%;
  max-width:var(--ssl-max);
  height:calc(118 * var(--u));
  margin:0 auto;
  padding:0 var(--ssl-side);
  transition:height .3s ease-out;
}
.ssl-nav.is-scrolled .ssl-nav__inner{ height:calc(88 * var(--u)); }

.ssl-nav__brand{ justify-self:start; display:block; }
/* .brand-logo e la classe del design system (26px di altezza, pensata per
   la navbar in miniatura). Qui la portiamo alla misura del mockup. */
.ssl-nav .brand-logo{ height:max(34px, calc(58 * var(--u))); }

/* Su schermi grandi il contenitore dei link e del bottone "sparisce" e i
   suoi due figli si mettono nelle colonne 2 e 3 della griglia. Sul
   telefono lo stesso contenitore diventa il menu a tendina. */
.ssl-nav__menu{ display:contents; }

.ssl-nav__links{
  display:flex;
  gap:calc(20 * var(--u));
  list-style:none;
}
.ssl-nav__links a{
  /* colonna: sotto al testo c'e una sua copia invisibile in grassetto
     (::after) che tiene il posto. Cosi quando al passaggio del mouse il
     testo diventa grassetto, la parola non si allarga e i link vicini non
     si spostano. */
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  min-width:calc(108 * var(--u));
  font-size:max(15px, calc(18 * var(--u)));
  line-height:1.25;
  letter-spacing:-.02em;
  text-decoration:none;
  transition:color .2s ease-out;
}
.ssl-nav__links a::after{
  content:attr(data-label);
  font-weight:700;
  height:0;
  overflow:hidden;
  visibility:hidden;
}
/* Hovering: stessi valori di .nav-hover del design system. Vale solo per i
   link in stato Default: quello Selected resta verde. */
.ssl-nav__links a.nav-default:hover{ color:#fff; font-weight:700; }

.ssl-nav__cta{ justify-self:end; }
/* Il bottone Start learning e il primario del design system; qui ha la
   misura del mockup invece di quella della tavola. */
.ssl-nav__cta .pbtn{
  width:auto;
  padding:calc(12 * var(--u)) calc(28 * var(--u));
  font-size:max(13.5px, calc(18 * var(--u)));
  line-height:1.2;
  white-space:nowrap;
}

/* Bottone del menu: esiste solo sul telefono */
.ssl-nav__toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-right:-10px;   /* allinea l'icona al margine, non il riquadro cliccabile */
  border:none;
  background:none;
  cursor:pointer;
}
.ssl-nav__toggle img{ width:28px; height:28px; display:block; }


/* ==========================================================================
   HERO
   ==========================================================================
   Un riquadro alto come nel mockup, con dentro titolo, tre frasi e bottone
   messi nelle stesse posizioni di Figma (misurate in --u, quindi crescono
   insieme allo schermo). La composizione "sfalsata" del mockup si puo
   ottenere solo cosi; sotto i 768px diventa una colonna normale. */
.ssl-hero{
  position:relative;
  overflow:hidden;
  background:var(--p-900);
  color:var(--bg);
}
/* foto di sfondo al 20%, sopra al verde scuro: come in Figma */
.ssl-hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.2;
}
.ssl-hero__inner{
  position:relative;
  width:100%;
  max-width:var(--ssl-max);
  height:calc(1178 * var(--u));
  margin:0 auto;
}

.ssl-hero__title{
  font-weight:700;
  font-size:calc(130 * var(--u));
  line-height:calc(160 * var(--u));
  letter-spacing:-.02em;
  color:var(--bg);
}
.ssl-hero__title em{ font-style:normal; color:var(--p-500); }
.ssl-hero__line{ position:absolute; display:block; }
.ssl-hero__line--1{ left:calc(100 * var(--u)); top:calc(210 * var(--u)); width:calc(840 * var(--u)); }
.ssl-hero__line--2{ left:calc(505 * var(--u)); top:calc(499 * var(--u)); width:calc(772 * var(--u)); }

/* Le tre frasi. In Figma la posizione e misurata dall'alto delle maiuscole,
   nel browser dall'alto della riga: da qui i 10px in meno su ogni "top". */
.ssl-hero__caption{
  position:absolute;
  font-weight:600;
  font-size:calc(32 * var(--u));
  line-height:calc(40 * var(--u));
  letter-spacing:-.02em;
  color:var(--ssl-caption);
}
.ssl-hero__caption--1{ left:calc(940 * var(--u));  top:calc(329 * var(--u)); width:calc(400 * var(--u)); }
.ssl-hero__caption--2{ left:calc(100 * var(--u));  top:calc(618 * var(--u)); width:calc(357 * var(--u)); }
.ssl-hero__caption--3{ left:calc(1110 * var(--u)); top:calc(879 * var(--u)); width:calc(258 * var(--u)); }

/* Il bottone Start learning del design system, alla misura della hero:
   pillola 400 x 80 e cerchio da 80 (misure di Figma). */
.ssl-hero__cta{
  position:absolute;
  left:calc(520 * var(--u));
  top:calc(912 * var(--u));
  --hs:calc(80 * var(--u));
  --hs-pill:calc(400 * var(--u));
  --hs-font:max(14px, calc(24 * var(--u)));
}


/* ==========================================================================
   TELEFONO (sotto i 768px)
   ========================================================================== */
@media (max-width:767.98px){

  /* --- navbar: logo e bottone del menu; link e Start learning nel menu --- */
  .ssl-nav__inner,
  .ssl-nav.is-scrolled .ssl-nav__inner{
    grid-template-columns:1fr auto;
    height:64px;
    padding:0 16px;
  }
  .ssl-nav .brand-logo{ height:30px; }
  .ssl-nav__toggle{ display:flex; }

  .ssl-nav__menu{
    display:none;
    position:absolute;
    top:64px; left:0; right:0;
    flex-direction:column;
    gap:24px;
    padding:12px 16px 28px;
    background:var(--p-900);
    border-top:1px solid rgba(255,255,255,.06);
  }
  .ssl-nav.is-open .ssl-nav__menu{ display:flex; }
  .ssl-nav__links{ flex-direction:column; gap:0; }
  .ssl-nav__links a{
    align-items:flex-start;
    min-width:0;
    padding:12px 0;          /* righe comode da toccare col dito */
    font-size:18px;
  }
  .ssl-nav__cta{ justify-self:stretch; }
  .ssl-nav__cta .pbtn{ width:100%; padding:14px 0; font-size:16px; }

  /* --- hero: una colonna --- */
  .ssl-hero__inner{
    display:flex;
    flex-direction:column;
    height:auto;
    padding:128px 16px 64px;
  }
  .ssl-hero__line,
  .ssl-hero__caption,
  .ssl-hero__cta{ position:static; width:auto; }
  /* le due meta del titolo una sotto l'altra, come nel mockup mobile */
  .ssl-hero__line{ display:block; }
  .ssl-hero__title{
    font-size:clamp(44px, 14vw, 72px);
    line-height:1.1;
  }
  /* sul telefono resta una sola frase, come nel mockup mobile */
  .ssl-hero__caption--1,
  .ssl-hero__caption--2{ display:none; }
  .ssl-hero__caption--3{
    align-self:flex-end;
    max-width:190px;
    margin-top:20px;
    font-size:16px;
    line-height:1.35;
  }
  .ssl-hero__cta{
    margin-top:36px;
    --hs:56px;
    --hs-pill:0px;
    --hs-font:16px;
  }
  /* il bottone prende tutta la larghezza: la pillola si allunga, il
     cerchio resta tondo */
  .ssl-hero__cta .hsbtn{ width:100%; }
  .ssl-hero__cta .hs-text{ flex:1; }
}

/* Chi ha chiesto al sistema meno animazioni non vede scorrere la navbar. */
@media (prefers-reduced-motion:reduce){
  .ssl-nav, .ssl-nav__inner{ transition:none; }
}


/* ==========================================================================
   ELEMENTI COMUNI ALLE SEZIONI
   ========================================================================== */

/* Titoli di sezione (Poppins Bold 64 nel mockup). Le parole in verde sono
   scritte fra <em>: il verde e il token --p-500. */
.ssl-h2{
  font-weight:700;
  font-size:calc(64 * var(--u));
  line-height:calc(70 * var(--u));
  letter-spacing:-.02em;
  color:var(--ink);
}
.ssl-h2 em{ font-style:normal; color:var(--p-500); }

/* Testo introduttivo delle sezioni chiare */
.ssl-lead{
  font-weight:600;
  font-size:max(15px, calc(20 * var(--u)));
  line-height:1.5;
  letter-spacing:-.02em;
  color:var(--ssl-muted);
}

/* Testo solo per i lettori di schermo (es. l'etichetta del campo email:
   nel mockup non si vede, ma chi non vede deve sapere cosa scrivere). */
.ssl-visually-hidden{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* Decorazioni a scarabocchio: posizione e misura in px di Figma, scritte
   su ogni immagine (--x, --y, --s). Stanno dietro ai contenuti e non si
   cliccano. Sul telefono spariscono. */
.ssl-deco{
  position:absolute;
  left:calc(var(--x) * var(--u));
  top:calc(var(--y) * var(--u));
  width:calc(var(--s) * var(--u));
  height:auto;
  pointer-events:none;
}

/* ---------- Arrow button del design system, cliccabile ----------
   Nel design system e un disegno fermo con la freccia in diagonale.
   Qui diventa un bottone vero: la stessa freccia girata verso destra o
   sinistra, e gli stati Hovering / Pressed / Disabled con gli stessi
   valori delle classi a-hover / a-pressed / a-disabled. */
.ssl .arrowbtn{
  width:var(--ab, 44px);
  height:var(--ab, 44px);
  margin:0;
  padding:0;
  background:none;
  cursor:pointer;
  transition:border-color .2s ease-out, color .2s ease-out;
}
.ssl .arrowbtn .ss-freccia{ width:32%; height:32%; }
.ssl .ssl-arrow--next .ss-freccia{ transform:rotate(45deg); }
.ssl .ssl-arrow--prev .ss-freccia{ transform:rotate(-135deg); }
.ssl .arrowbtn.a-default:hover{ border-color:var(--p-600); color:var(--p-600); }   /* = a-hover */
.ssl .arrowbtn.a-default:active{ border-color:var(--p-700); color:var(--p-700); }  /* = a-pressed */
.ssl .arrowbtn.a-default:disabled{ border-color:var(--border); color:var(--border); cursor:default; } /* = a-disabled */

/* ---------- Pallini dei carousel (nuovo: non c'e nel design system) ----------
   Ogni pallino e un bottone da 20px (comodo da toccare) con dentro un
   puntino da 8px disegnato da ::after. Quello attivo e verde e piu grande. */
.ssl-dots{
  display:flex;
  justify-content:center;
  gap:2px;
}
.ssl-dots button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
}
.ssl-dots button::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--s-300);
  opacity:.6;
  transition:background-color .2s, opacity .2s, transform .2s;
}
.ssl-dots button[aria-current="true"]::after{
  background:var(--p-500);
  opacity:1;
  transform:scale(1.35);
}

/* Le strisce che si scorrono di lato non mostrano la barra di scorrimento:
   si usano col dito, col trackpad o con le frecce. */
.ssl-scroll{ scrollbar-width:none; }
.ssl-scroll::-webkit-scrollbar{ display:none; }


/* ==========================================================================
   COURSES
   ========================================================================== */
.ssl-courses{ background:var(--white); }
.ssl-courses__inner{
  max-width:var(--ssl-max);
  margin:0 auto;
  padding:calc(96 * var(--u)) var(--ssl-side) calc(94 * var(--u));
}
.ssl-courses__head{
  display:grid;
  grid-template-columns:calc(560 * var(--u)) 1fr;
  column-gap:calc(70 * var(--u));
}
.ssl-courses__eyebrow{
  margin-bottom:calc(19 * var(--u));
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:calc(32 * var(--u));
  line-height:calc(30 * var(--u));
  letter-spacing:-.02em;
  color:var(--ssl-muted);
}
.ssl-courses__side{ padding-top:calc(8 * var(--u)); }
/* View All Courses: lo stesso bottone della hero, alla misura del mockup
   (pillola 210 x 50) */
.ssl-courses__more{
  margin-top:calc(40 * var(--u));
  --hs:calc(50 * var(--u));
  --hs-pill:calc(210 * var(--u));
  --hs-font:max(13.5px, calc(16 * var(--u)));
}

.ssl-courses__list{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, calc(373 * var(--u)));
  justify-content:space-between;
  margin-top:calc(75 * var(--u));
  list-style:none;
}
.ssl-courses .ssl-dots{ display:none; }   /* i pallini servono solo sul telefono */

/* Card corso del design system alla misura del mockup (373 x 445).
   --c e "un px della card": uguale a --u sugli schermi grandi, fisso sul
   telefono, cosi la card si rimpicciolisce tutta insieme.
   Il fondo e #183B2D come nel mockup e nello screenshot (il design system
   usa --p-900). */
.ssl .course-card{
  --c:var(--u);
  height:100%;
  padding:calc(30 * var(--c)) calc(19 * var(--c));
  border-radius:calc(20 * var(--c));
  background:var(--ssl-card);
}
.ssl .course-card .thumb{
  height:calc(222 * var(--c));
  margin-bottom:calc(30 * var(--c));
  border-radius:calc(20 * var(--c));
  overflow:hidden;
}
.ssl .course-card .thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.ssl .course-card h4{
  margin-bottom:calc(15 * var(--c));
  font-size:max(16px, calc(24 * var(--c)));
  line-height:1.1;
  letter-spacing:-.02em;
}
.ssl .course-card .sub{
  margin-bottom:calc(30 * var(--c));
  font-weight:600;
  font-size:max(11px, calc(14 * var(--c)));
  line-height:1.15;
  color:var(--s-300);
}
.ssl .course-card .enrollbtn{
  height:max(36px, calc(50 * var(--c)));
  margin-top:0;
  font-size:max(13px, calc(16 * var(--c)));
}


/* ==========================================================================
   NUMERI
   ========================================================================== */
.ssl-numbers{
  position:relative;
  overflow:hidden;
  background:var(--p-900);
}
.ssl-numbers__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.1;              /* come in Figma: foto al 10% sul verde scuro */
}
.ssl-numbers__inner{
  position:relative;
  max-width:var(--ssl-max);
  margin:0 auto;
}
.ssl-numbers__list{
  position:relative;
  display:flex;
  justify-content:space-between;
  padding:calc(86 * var(--u)) var(--ssl-side) calc(79 * var(--u));
  list-style:none;
}
.ssl-numbers__list li{
  /* colonna centrata: se la scritta sotto e piu larga, sborda uguale a
     destra e a sinistra e resta centrata sul numero */
  display:flex;
  flex-direction:column;
  align-items:center;
  width:calc(242 * var(--u));
  text-align:center;
}
/* .stat-num e .stat-lbl sono del design system (verdi su chiaro): qui
   chiari su scuro e alla misura del mockup */
.ssl-numbers .stat-num{
  font-size:calc(64 * var(--u));
  line-height:calc(30 * var(--u));
  letter-spacing:-.02em;
  color:var(--bg);
}
.ssl-numbers .stat-lbl{
  margin-top:calc(16 * var(--u));
  font-weight:600;
  font-size:max(13px, calc(20 * var(--u)));
  line-height:1.5;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:var(--ssl-caption);
}
@media (max-width:1100px){
  /* qui le quattro colonne sono strette: le scritte vanno a capo */
  .ssl-numbers .stat-lbl{ white-space:normal; }
}


/* ==========================================================================
   MISSIONS
   ========================================================================== */
.ssl-why{
  position:relative;
  overflow:hidden;
  background:var(--ssl-mint) url('../images/skillsprout-live-motivo-punti.svg') repeat;
  background-size:calc(500 * var(--u)) calc(442 * var(--u));
  background-position:calc(-30 * var(--u)) calc(-29 * var(--u));
}
.ssl-why__inner{ position:relative; max-width:var(--ssl-max); margin:0 auto; }
.ssl-why__list{ list-style:none; }

/* Il cerchio: verde pieno con ombra, contenuti in colonna al centro */
.ssl-why__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-radius:50%;
  background:var(--p-500);
  color:var(--bg);
  box-shadow:0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(4, 42, 27, .16);
}
.ssl-why__icon{ display:block; }
.ssl-why__item h3{ font-weight:600; letter-spacing:-.02em; line-height:1.5; }
.ssl-why__item p{ font-weight:600; line-height:1.4; color:var(--ssl-why-text); }
.ssl-why__item--plain p{ color:var(--bg); }   /* cerchio con la sola frase */

.ssl-why__photo{
  /* un solo png: foto tonda + pallini colorati + croci, gia composti.
     Posizione e misura sono quelle del gruppo "iamge_1" in Figma. */
  position:absolute;
  left:calc(72 * var(--u));
  top:calc(623 * var(--u));
  width:calc(440 * var(--u));
  height:calc(272 * var(--u));
  object-fit:contain;
}

/* Dai 1024px in su: la composizione sparsa del mockup. Ogni cerchio
   ha scritto sopra dove sta e quanto e grande (--x, --y, --d...).
   Sotto i 1024 i cerchi piu piccoli diventerebbero troppo stretti per il
   loro testo, quindi li mettiamo in griglia (vedi piu sotto). */
@media (min-width:1024px){
  .ssl-why__inner{ height:calc(1046 * var(--u)); }
  .ssl-why__head{
    position:absolute;
    left:calc(780 * var(--u));
    top:calc(111 * var(--u));
    width:calc(560 * var(--u));
  }
  .ssl-why__head .ssl-lead{ margin-top:calc(32 * var(--u)); }
  .ssl-why__item{
    position:absolute;
    left:calc(var(--x) * var(--u));
    top:calc(var(--y) * var(--u));
    width:calc(var(--d) * var(--u));
    height:calc(var(--d) * var(--u));
    padding-top:calc(var(--pt) * var(--u));
  }
  .ssl-why__icon{
    width:calc(var(--i) * var(--u));
    height:calc(var(--i) * var(--u));
  }
  .ssl-why__item h3{
    max-width:calc(var(--tw, 999) * var(--u));
    margin-top:calc(var(--tm, 0) * var(--u));
    font-size:max(11px, calc(var(--t, 14) * var(--u)));
  }
  .ssl-why__item p{
    width:calc(var(--w, 210) * var(--u));
    margin-top:calc(var(--dm, 0) * var(--u));
    font-size:max(10px, calc(14 * var(--u)));
  }
}


/* ==========================================================================
   MENTORS
   ========================================================================== */
.ssl-mentors{
  position:relative;
  overflow:hidden;
  background:var(--p-900);
}
.ssl-mentors__inner{
  position:relative;
  max-width:var(--ssl-max);
  margin:0 auto;
  padding:calc(70 * var(--u)) 0 calc(100 * var(--u));
}
.ssl-mentors__head{ position:relative; padding:0 var(--ssl-side); }
.ssl-mentors .ssl-h2{ line-height:calc(80 * var(--u)); color:#fff; }
.ssl-mentors__sub{
  max-width:calc(857 * var(--u));
  margin-top:calc(12 * var(--u));
  font-weight:600;
  font-size:max(15px, calc(24 * var(--u)));
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--ssl-caption);
}
.ssl-mentors__arrows{
  position:absolute;
  right:var(--ssl-side);
  top:calc(159 * var(--u));
  display:flex;
  gap:calc(20 * var(--u));
  --ab:max(40px, calc(50 * var(--u)));
}

/* La striscia che scorre di lato. Parte allineata al margine del mockup;
   ogni card si "aggancia" a sinistra quando si smette di scorrere. */
.ssl-mentors__track{
  /* 40px di spazio in alto: la testa di John esce dalla card (in Figma la
     sua foto parte 37px sopra), e una striscia che scorre di lato taglia
     tutto quello che esce. Il margine sopra si riduce della stessa misura,
     cosi le card restano dove sono nel mockup. */
  --head:max(30px, calc(40 * var(--u)));
  position:relative;
  display:flex;
  gap:calc(26 * var(--u));
  margin-top:calc(28 * var(--u) - var(--head));
  padding:var(--head) var(--ssl-side) 0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 var(--ssl-side);
  list-style:none;
}

/* La card mentore (nuova): arco colorato, foto scontornata che esce
   dall'arco con la testa, velo scuro in basso per leggere il nome. */
.ssl-mentor{
  /* non scende mai sotto i 280px di larghezza: piu piccola, nome e
     bottone View profile non ci starebbero */
  --c:max(var(--u), .72px);
  position:relative;
  flex:0 0 auto;
  width:calc(389 * var(--c));
  height:calc(515 * var(--c));
  scroll-snap-align:start;
}
.ssl-mentor__arch,
.ssl-mentor__shade{
  position:absolute;
  left:0; right:0; bottom:0;
  border-radius:calc(195 * var(--c)) calc(195 * var(--c)) calc(40 * var(--c)) calc(40 * var(--c));
}
.ssl-mentor__arch{ top:27.55%; background:linear-gradient(180deg, var(--from), var(--to)); }
.ssl-mentor__photo{
  /* Ogni foto ha il suo riquadro, come in Figma (le foto sono ritagliate
     in modo diverso): posizione e misura sono scritte sull'immagine, in %
     della card (--pl, --pt, --pw, --ph). */
  position:absolute;
  left:var(--pl, 2.5%);
  top:var(--pt, 6.23%);
  width:var(--pw, 93.86%);
  height:var(--ph, 93.77%);
  max-width:none;
  object-fit:contain;
  object-position:bottom;
}
.ssl-mentor__shade{ top:38.87%; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6)); }
.ssl-mentor__info{
  position:absolute;
  left:5%;
  bottom:calc(18 * var(--c));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(8 * var(--c));
  max-width:calc(56% - 8px);   /* si ferma prima del bottone View profile */
}
.ssl-mentor__name{
  font-family:'Open Sans', sans-serif;
  font-weight:600;
  font-size:max(16px, calc(24 * var(--c)));
  line-height:1.2;
  letter-spacing:-.02em;
  color:#fff;
}
/* il badge "specialita" del design system, alla misura della card */
.ssl-mentor .tag{
  padding:calc(5 * var(--c)) calc(12 * var(--c));
  font-size:max(11.5px, calc(12 * var(--c)));   /* mai sotto gli 11,5px del design system */
}
/* View profile: e il bottone Enroll now del design system (contorno
   bianco che si riempie di verde), piccolo come nel mockup */
.ssl-mentor .enrollbtn{
  position:absolute;
  right:5.12%;
  top:86.44%;
  width:calc(131 * var(--c));
  height:max(28px, calc(35 * var(--c)));
  border-width:1px;
  font-size:max(11px, calc(12 * var(--c)));
}

/* Barra di avanzamento: la parte verde e larga quanto la parte visibile
   della striscia e si sposta mentre si scorre (la muove lo script). */
.ssl-progress{
  position:relative;
  height:max(6px, calc(8 * var(--u)));
  margin:calc(100 * var(--u)) var(--ssl-side) 0;
}
.ssl-progress::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:2px;
  margin-top:-1px;
  background:var(--s-300);
}
.ssl-progress__bar{
  position:absolute;
  top:0; left:0;
  width:50%;
  height:100%;
  border-radius:20px;
  background:var(--p-500);
}


/* ==========================================================================
   GALLERIA
   ========================================================================== */
.ssl-gallery{ overflow:hidden; background:var(--ssl-mint); }
.ssl-gallery__inner{
  max-width:var(--ssl-max);
  margin:0 auto;
  padding:calc(54 * var(--u)) 0;
}
/* Griglia 2 x 8 da quadrati di 200px di Figma. Parte 134px fuori dal
   bordo sinistro, come nel mockup; ogni foto dice dove sta (grid-area). */
.ssl-gallery__track{
  /* la striscia: la griglia di foto e (quando scorre) la sua copia, una
     dopo l'altra. Parte 134px fuori dal bordo sinistro, come nel mockup. */
  --gap:calc(15.5 * var(--u));
  display:flex;
  gap:var(--gap);
  width:max-content;
  margin-left:calc(-134 * var(--u));
}
.ssl-gallery__grid{
  display:grid;
  grid-template-columns:repeat(8, calc(200 * var(--u)));
  grid-template-rows:repeat(2, calc(200 * var(--u)));
  gap:var(--gap);
  list-style:none;
}
.ssl-gallery__grid li{ overflow:hidden; border-radius:calc(20 * var(--u)); }
.ssl-gallery__grid img{ display:block; width:100%; height:100%; object-fit:cover; }


/* ==========================================================================
   REVIEWS
   ========================================================================== */
.ssl-reviews{
  position:relative;
  overflow:hidden;         /* le card laterali non devono far sbordare la pagina */
  background:var(--white);
}
/* la fascia scura in basso, con gli angoli in alto arrotondati: e l'inizio
   della parte scura che continua nell'iscrizione e nel footer */
.ssl-reviews::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:calc(313 * var(--u));
  border-radius:calc(40 * var(--u)) calc(40 * var(--u)) 0 0;
  background:var(--p-900);
}
.ssl-reviews__inner{
  position:relative;
  z-index:1;
  max-width:var(--ssl-max);
  height:calc(850 * var(--u));
  margin:0 auto;
}
/* le virgolette grandi: lo stesso file delle card, ingrandito */
.ssl-reviews__quote{
  position:absolute;
  left:calc(201 * var(--u));
  top:calc(124 * var(--u));
  width:calc(163 * var(--u));
  height:auto;
  opacity:.5;
}
.ssl-reviews .ssl-h2{
  position:absolute;
  left:calc(440 * var(--u));
  top:calc(100 * var(--u));
  width:calc(560 * var(--u));
  text-align:center;
}

/* Il palco delle card: tutte una sopra l'altra al centro; lo script da a
   ognuna il suo posto (is-active al centro, is-prev a sinistra, is-next a
   destra) e il CSS le sposta con un'animazione. */
.ssl-reviews__stage{
  position:absolute;
  left:0; right:0;
  top:calc(303 * var(--u));
  height:calc(336 * var(--u));
  list-style:none;
  touch-action:pan-y;      /* il dito scorre la pagina in verticale, noi leggiamo solo lo scorrimento laterale */
}
.ssl-review{
  --c:var(--u);
  position:absolute;
  left:50%;
  top:0;
  width:calc(640 * var(--c));
  height:calc(336 * var(--c));
  margin-left:calc(-320 * var(--c));
  z-index:var(--rz, 1);
  opacity:var(--ro, 0);
  transform:translateX(var(--rx, 0px)) scale(var(--rs, .6));
  transition:transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s ease-out;
}
.ssl-review.is-active{ --rx:0px; --rs:1; --ro:1; --rz:3; }
.ssl-review.is-prev{ --rx:calc(-280 * var(--u)); --rs:.75; --ro:1; --rz:2; cursor:pointer; }
.ssl-review.is-next{ --rx:calc(280 * var(--u)); --rs:.75; --ro:1; --rz:2; cursor:pointer; }

/* Card recensione del design system alla misura del mockup (640 x 336) */
.ssl-review .review-card{
  height:100%;
  padding:calc(40 * var(--c)) calc(40 * var(--c)) calc(44 * var(--c));
  border-radius:calc(24 * var(--c));
  box-shadow:0 calc(12 * var(--c)) calc(32 * var(--c)) rgba(4, 42, 27, .12);
}
.ssl-review .review-card .quote{ width:calc(51 * var(--c)); margin:0 0 calc(22 * var(--c)) calc(4 * var(--c)); }
.ssl-review .review-card .rtext{ font-size:max(12px, calc(18 * var(--c))); line-height:1.6; }
.ssl-review .review-card .rname{ font-size:max(12px, calc(18 * var(--c))); }
.ssl-review .review-card .rrole{ font-size:max(11px, calc(15 * var(--c))); }
.ssl-review .stars{ gap:calc(4 * var(--c)); }
.ssl-review .stars img{ width:max(12px, calc(22 * var(--c))); height:max(12px, calc(22 * var(--c))); }
/* i due colori delle card laterali (dallo screenshot) */
.ssl-review--yellow .review-card{ background:var(--ssl-review-yellow); }
.ssl-review--cyan .review-card{ background:var(--ssl-review-cyan); }

.ssl-reviews__arrow{
  position:absolute;
  top:calc(445 * var(--u));
  z-index:4;
  --ab:max(40px, calc(50 * var(--u)));
}
.ssl-reviews .ssl-arrow--prev{ left:calc(100 * var(--u)); }   /* 50px dalla card, come la freccia destra */
.ssl-reviews .ssl-arrow--next{ left:calc(1290 * var(--u)); }
.ssl-reviews .ssl-dots{
  position:absolute;
  left:0; right:0;
  top:calc(672 * var(--u));
}


/* ==========================================================================
   ISCRIZIONE
   ========================================================================== */
.ssl-signup{
  position:relative;
  overflow:hidden;
  background:var(--p-900);
}
.ssl-signup__inner{
  position:relative;
  max-width:var(--ssl-max);
  height:calc(783 * var(--u));
  margin:0 auto;
}
.ssl-signup__photo{
  /* un solo png: cornice, ragazza scontornata, pallini e croci. Posizione
     e misura del gruppo "iamge" di Figma (le croci toccano quasi il bordo
     alto della sezione). La foto sta dentro un contenitore: serve
     all'animazione di comparsa (il contenitore fa da finestra, la foto
     dentro si rimpicciolisce). */
  position:absolute;
  left:calc(-2 * var(--u));
  top:calc(-7 * var(--u));
  width:calc(736 * var(--u));
  height:calc(637 * var(--u));
}
.ssl-signup__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.ssl-signup__body{
  position:absolute;
  left:calc(674 * var(--u));
  top:calc(100 * var(--u));
  width:calc(666 * var(--u));
}
.ssl-signup .ssl-h2{ line-height:calc(80 * var(--u)); color:#fff; }
.ssl-signup__text{
  margin-top:calc(22 * var(--u));
  font-weight:600;
  font-size:max(15px, calc(20 * var(--u)));
  line-height:1.4;
  letter-spacing:-.02em;
  color:var(--ssl-caption);
}
.ssl-signup__form{ margin-top:calc(59 * var(--u)); }

/* Il campo email e il .field del design system. Il design system lo
   disegna grigio su chiaro e a pillola; qui e su fondo scuro, con il
   bordo verde dello screenshot e gli angoli da 8px (la misura "input"
   della scala dei raggi del design system). */
.ssl .ssl-signup .field{
  display:block;
  width:100%;
  height:max(48px, calc(80 * var(--u)));
  padding:0 calc(20 * var(--u));
  border:1.5px solid var(--p-500);
  border-radius:8px;
  background:transparent;
  color:var(--bg);
  font-size:max(15px, calc(20 * var(--u)));
}
.ssl .ssl-signup .field::placeholder{ color:var(--ssl-caption); opacity:1; }
.ssl .ssl-signup .field[aria-invalid="true"]{ border-color:#FFB4A8; }
.ssl-signup .pbtn{
  width:100%;
  height:max(48px, calc(80 * var(--u)));
  margin-top:calc(30 * var(--u));
  padding:0;
  font-size:max(15px, calc(20 * var(--u)));
}
/* messaggio sotto al bottone: verde chiaro se va bene, rosa se l'email
   non e valida */
.ssl-signup__msg{
  min-height:1.5em;
  margin-top:calc(16 * var(--u));
  font-weight:600;
  font-size:max(14px, calc(18 * var(--u)));
  line-height:1.4;
  color:var(--p-300);
}
.ssl-signup__msg.is-error{ color:#FFB4A8; }


/* ==========================================================================
   FOOTER
   ========================================================================== */
.ssl-footer{
  position:relative;
  overflow:hidden;
  background:var(--p-900);
  color:var(--ssl-caption);
}
.ssl-footer__inner{
  position:relative;
  display:grid;
  grid-template-columns:calc(505 * var(--u)) calc(264 * var(--u)) calc(264 * var(--u)) 1fr;
  align-items:start;
  max-width:var(--ssl-max);
  min-height:calc(638 * var(--u));
  margin:0 auto;
  padding:calc(82 * var(--u)) var(--ssl-side) calc(50 * var(--u));
}
.ssl-footer__inner > :not(.ssl-deco){ position:relative; }   /* sopra alle decorazioni */
.ssl-footer .brand-logo{ height:max(34px, calc(58 * var(--u))); }
.ssl-footer__contact{
  margin-top:calc(22 * var(--u));
  font-style:normal;
  font-size:max(14px, calc(18 * var(--u)));
  line-height:1.3;
}
.ssl-footer__contact p + p{ margin-top:calc(18 * var(--u)); }

.ssl-footer__links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(25 * var(--u));
  margin-top:calc(14 * var(--u));
  list-style:none;
}
/* Stati Default / Hovering / Pressed del design system. Come nella navbar,
   una copia invisibile in grassetto tiene il posto del testo. */
.ssl-footer__links a{
  display:inline-flex;
  flex-direction:column;
  font-size:max(14px, calc(18 * var(--u)));
  line-height:1.2;
  text-decoration:none;
  transition:color .2s ease-out;
}
.ssl-footer__links a::after{
  content:attr(data-label);
  height:0;
  overflow:hidden;
  visibility:hidden;
  font-weight:700;
}
.ssl-footer__links a.footer-default:hover{ color:#fff; font-weight:700; }   /* = footer-hover */
.ssl-footer__links a.footer-default:active{ color:#3f5a4b; }               /* = footer-pressed */

.ssl-footer__social{
  justify-self:end;
  display:flex;
  gap:calc(21 * var(--u));
  margin-top:calc(10 * var(--u));
  list-style:none;
}
.ssl-footer__social a{
  display:block;
  width:max(28px, calc(36 * var(--u)));
  height:max(28px, calc(36 * var(--u)));
}
.ssl-footer__social img{
  display:block;
  width:100%;
  height:100%;
  transition:filter .2s ease-out;
}
/* Hovering: bianco, come i link del footer (.footer-hover). Le icone sono
   png grigio-verdi: il filtro prima le rende nere (brightness 0) e poi le
   inverte, cioe bianche. */
.ssl-footer__social a:hover img,
.ssl-footer__social a:focus-visible img{ filter:brightness(0) invert(1); }

.ssl-footer__bottom{
  grid-column:1 / -1;
  margin-top:calc(175 * var(--u));
  text-align:center;
  font-size:max(13px, calc(16 * var(--u)));
  line-height:1.4;
}
.ssl-footer__demo{ margin-top:calc(12 * var(--u)); }
.ssl-footer__demo a{ color:var(--bg); text-underline-offset:3px; }
.ssl-footer__demo a:hover{ color:#fff; }


/* ==========================================================================
   TELEFONO (sotto i 768px): le sezioni dopo la hero
   Colonne una sotto l'altra, testi centrati, carousel che si scorrono col
   dito. Le misure tornano in px normali.
   ========================================================================== */
@media (max-width:767.98px){

  .ssl-deco{ display:none; }
  .ssl-h2{ font-size:36px; line-height:1.15; }
  .ssl-lead{ font-size:15px; }

  /* --- courses --- */
  .ssl-courses__inner{ padding:56px 0 48px; }
  .ssl-courses__head{ grid-template-columns:1fr; padding:0 16px; text-align:center; }
  .ssl-courses__eyebrow{ margin-bottom:8px; font-size:18px; line-height:1.3; }
  .ssl-courses__side{ padding-top:16px; }
  .ssl-courses__more{ margin-top:24px; --hs:46px; --hs-pill:0px; --hs-font:14px; }
  .ssl-courses__list{
    display:flex;
    gap:16px;
    margin-top:20px;
    padding:12px calc(50% - 150px) 20px;   /* sopra e sotto: posto per la card che si alza */    /* la prima e l'ultima card possono stare al centro */
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }
  .ssl-courses__list > li{ flex:0 0 300px; scroll-snap-align:center; }
  .ssl .course-card{ --c:.8px; }
  .ssl-courses .ssl-dots{ display:flex; margin-top:0; }

  /* --- numeri: due per riga --- */
  .ssl-numbers__list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px 16px;
    padding:48px 16px;
  }
  .ssl-numbers__list li{ width:auto; }
  .ssl-numbers .stat-num{ font-size:40px; line-height:1.1; }
  .ssl-numbers .stat-lbl{ margin-top:6px; font-size:13px; white-space:normal; }

  /* --- mentors: una card alla volta, al centro --- */
  .ssl-mentors__inner{ padding:56px 0 48px; }
  .ssl-mentors__head{ padding:0 16px; text-align:center; }
  .ssl-mentors .ssl-h2{ line-height:1.15; }
  .ssl-mentors__sub{ margin:12px auto 0; font-size:15px; }
  .ssl-mentors__sub br{ display:none; }
  .ssl-mentors__arrows{ display:none; }   /* sul telefono si scorre col dito */
  .ssl-mentors__track{
    --head:31px;
    gap:16px;
    margin-top:calc(32px - var(--head));
    padding:var(--head) calc(50% - 150px) 0;
    scroll-padding:0;
  }
  .ssl-mentor{ --c:.771px; scroll-snap-align:center; }   /* 389 x 0,771 = 300px */
  .ssl-progress{ margin:32px 16px 0; }

  /* --- galleria: si scorre di lato --- */
  .ssl-gallery__inner{ padding:24px 0; overflow-x:auto; }
  .ssl-gallery__track{ --gap:9px; margin-left:0; padding:0 16px; }
  .ssl-gallery__grid{
    grid-template-columns:repeat(8, 120px);
    grid-template-rows:repeat(2, 120px);
  }
  .ssl-gallery__grid li{ border-radius:12px; }

  /* --- reviews --- */
  .ssl-reviews::after{ height:200px; border-radius:28px 28px 0 0; }
  .ssl-reviews__inner{ height:auto; padding:56px 0 32px; }
  .ssl-reviews__quote{ left:16px; top:36px; width:72px; }
  .ssl-reviews .ssl-h2{ position:relative; left:auto; top:auto; width:auto; padding:0 16px; }
  .ssl-reviews__stage{ position:relative; top:auto; height:230px; margin-top:32px; }
  .ssl-review{ width:290px; height:230px; margin-left:-145px; }
  .ssl-review.is-prev{ --rx:-250px; --rs:.85; }
  .ssl-review.is-next{ --rx:250px; --rs:.85; }
  .ssl-review .review-card{ padding:20px; border-radius:20px; }
  .ssl-review .review-card .quote{ width:30px; margin-bottom:10px; }
  .ssl-review .review-card .rtext{ font-size:13px; line-height:1.5; }
  .ssl-review .review-card .rname{ font-size:13px; }
  .ssl-review .review-card .rrole{ font-size:11px; }
  .ssl-review .stars img{ width:14px; height:14px; }
  .ssl-reviews__arrow{ display:none; }    /* sul telefono si trascina col dito */
  .ssl-reviews .ssl-dots{ position:static; margin-top:20px; }

  /* --- iscrizione: foto sopra, testo e modulo sotto --- */
  .ssl-signup__inner{ height:auto; padding:48px 16px 64px; }
  .ssl-signup__photo{
    position:static;
    display:block;
    width:min(100%, 380px);
    height:auto;
    margin:0 auto 24px;
  }
  .ssl-signup__photo img{ height:auto; }
  .ssl-signup__body{ position:static; width:auto; text-align:center; }
  .ssl-signup .ssl-h2{ line-height:1.15; }
  .ssl-signup__text{ margin-top:12px; }
  .ssl-signup__form{ margin-top:28px; }
  .ssl-signup .pbtn{ margin-top:14px; }
  .ssl-signup__msg{ margin-top:12px; }

  /* --- footer: tutto centrato, i due elenchi di link affiancati --- */
  .ssl-footer__inner{
    grid-template-columns:1fr 1fr;
    row-gap:28px;
    min-height:0;
    padding:48px 16px 32px;
    text-align:center;
  }
  .ssl-footer__brand{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; }
  .ssl-footer__contact{ margin-top:16px; }
  .ssl-footer__contact p + p{ margin-top:6px; }
  .ssl-footer__links{ align-items:center; gap:14px; margin-top:0; }
  .ssl-footer__social{ grid-column:1 / -1; justify-self:center; gap:18px; margin-top:0; }
  .ssl-footer__bottom{ margin-top:0; }
  .ssl-footer__demo{ margin-top:8px; }
}

/* ==========================================================================
   MISSIONS sotto i 1024px: griglia di cerchi, il primo piu grande da solo
   ========================================================================== */
@media (max-width:1023.98px){
  .ssl-why{ background-size:250px 221px; }
  .ssl-why__inner{ padding:56px 16px 64px; }
  .ssl-why__head{ max-width:560px; margin:0 auto 32px; text-align:center; }
  .ssl-why__head .ssl-lead{ margin-top:12px; }
  .ssl-why__list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 170px));
    justify-content:center;
    gap:16px;
    justify-items:center;
  }
  .ssl-why__item{
    justify-content:center;
    width:100%;
    aspect-ratio:1;
    padding:12px;
    box-shadow:0 8px 20px rgba(4, 42, 27, .16);
  }
  .ssl-why__item:first-child{ grid-column:1 / -1; max-width:230px; }
  .ssl-why__icon{ width:44px; height:44px; }
  .ssl-why__item:first-child .ssl-why__icon{ width:60px; height:60px; }
  .ssl-why__item h3{ margin-top:8px; font-size:14px; line-height:1.3; }
  .ssl-why__item p{ max-width:130px; margin-top:4px; font-size:11px; line-height:1.35; }
  .ssl-why__photo,
  .ssl-why .ssl-deco{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .ssl-review{ transition:none; }
}


/* ==========================================================================
   MICROANIMAZIONI
   Tutte si spengono per chi ha chiesto al sistema meno movimento (in fondo).
   ========================================================================== */

/* ---------- 1. Titolo della hero: il seme che germoglia ----------
   Ogni parola compare dietro una maschera sfumata che scorre in una
   direzione: dal basso verso l'alto (--up), da destra verso sinistra
   (--left) o da sinistra verso destra (--right). Il bordo della maschera
   e morbido (una sfumatura, non un taglio netto), per questo la parola
   "affiora" invece di essere scoperta a scatti.
   La maschera e tre volte piu grande della parola: un terzo pieno, un
   terzo sfumato, un terzo vuoto. Spostandola si passa da "vuoto" a "pieno".
   --i e il turno. Ogni parola dura 0,8s e la successiva parte a 0,6s,
   quando la precedente sta finendo: il movimento non si ferma mai fra una
   parola e l'altra, ed e questo che lo rende fluido.
   Ordine: potential. -> your -> sprout -> skills, -> Grow -> your.
   Il padding allarga un poco la parola (e il margine negativo lo
   compensa, cosi niente si sposta): la maschera copre anche le code di
   lettere come la "p" o la "y". */
.ssl-w{
  display:inline-block;
  padding:.12em .06em;
  margin:-.12em -.06em;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  animation-duration:.8s;
  animation-timing-function:cubic-bezier(.45, .05, .35, 1);
  animation-fill-mode:both;
  animation-delay:calc(.3s + var(--i) * .6s);
}
.ssl-w--up{
  -webkit-mask-image:linear-gradient(to top, #000 40%, transparent 60%);
          mask-image:linear-gradient(to top, #000 40%, transparent 60%);
  -webkit-mask-size:100% 300%;
          mask-size:100% 300%;
  -webkit-mask-position:0 100%;
          mask-position:0 100%;
  animation-name:ssl-grow-up;
}
.ssl-w--left{
  -webkit-mask-image:linear-gradient(to left, #000 40%, transparent 60%);
          mask-image:linear-gradient(to left, #000 40%, transparent 60%);
  -webkit-mask-size:300% 100%;
          mask-size:300% 100%;
  -webkit-mask-position:100% 0;
          mask-position:100% 0;
  animation-name:ssl-grow-left;
}
.ssl-w--right{
  -webkit-mask-image:linear-gradient(to right, #000 40%, transparent 60%);
          mask-image:linear-gradient(to right, #000 40%, transparent 60%);
  -webkit-mask-size:300% 100%;
          mask-size:300% 100%;
  -webkit-mask-position:0 0;
          mask-position:0 0;
  animation-name:ssl-grow-right;
}
@keyframes ssl-grow-up{
  from{ -webkit-mask-position:0 0; mask-position:0 0; }
  to{ -webkit-mask-position:0 100%; mask-position:0 100%; }
}
@keyframes ssl-grow-left{
  from{ -webkit-mask-position:0 0; mask-position:0 0; }
  to{ -webkit-mask-position:100% 0; mask-position:100% 0; }
}
@keyframes ssl-grow-right{
  from{ -webkit-mask-position:100% 0; mask-position:100% 0; }
  to{ -webkit-mask-position:0 0; mask-position:0 0; }
}

/* Le tre frasi della hero compaiono in dissolvenza quando il titolo e
   finito (l'ultima parola parte a 0,3 + 5 x 0,6s e dura 0,8s), una dopo
   l'altra: in alto a destra, a sinistra, in basso. */
.ssl-hero__caption{
  animation:ssl-fade-in .6s ease-out both;
  animation-delay:calc(.3s + 5 * .6s + .8s + var(--i) * .5s);
}
@keyframes ssl-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ---------- 2. Card corso: si alza quando il mouse e su Enroll now ----------
   :has() vuol dire "la card che contiene un bottone Enroll now col mouse
   sopra". Vale anche per chi arriva al bottone con la tastiera. */
.ssl .course-card{ transition:transform .3s ease-out, box-shadow .3s ease-out; }
.ssl .course-card:has(.enrollbtn:hover),
.ssl .course-card:has(.enrollbtn:focus-visible){
  transform:translateY(calc(-8 * var(--c)));
  box-shadow:0 calc(18 * var(--c)) calc(36 * var(--c)) rgba(4, 42, 27, .28);
}

/* ---------- 3. Numeri: il conteggio da 0 lo fa lo script ----------
   Cifre tutte larghe uguali, cosi mentre contano non ballano. */
.ssl-numbers .stat-num{ font-variant-numeric:tabular-nums; }

/* ---------- 4. Missions: i cerchi arrivano uno alla volta ----------
   Lo script aggiunge "js-reveal" (cerchi nascosti e rimpiccioliti) e, quando
   la sezione entra nello schermo, "is-revealed". Allora ogni cerchio torna
   alla sua misura con un piccolo rimbalzo (la curva cubic-bezier supera
   la misura finale e ci ritorna). --o e il turno: da sinistra a destra,
   la foto per ultima. */
.ssl-why.js-reveal .ssl-why__item,
.ssl-why.js-reveal .ssl-why__photo{
  opacity:0;
  transform:scale(.4);
}
.ssl-why.is-revealed .ssl-why__item,
.ssl-why.is-revealed .ssl-why__photo{
  opacity:1;
  transform:none;
  transition:opacity .35s ease-out, transform .75s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay:calc(var(--o, 0) * .22s);
}
/* Allo scorrimento i cerchi fluttuano un poco, ognuno col suo ritmo: lo
   script calcola lo spostamento e lo scrive nella proprieta "translate".
   E una proprieta separata da "transform", quindi non disturba la
   comparsa col rimbalzo ne il saltello al passaggio del mouse. */
.ssl-why__item{ will-change:translate; }

/* al passaggio del mouse il cerchio fa un piccolo saltello */
.ssl-why__item:hover{ animation:ssl-hop .6s ease-out; }
@keyframes ssl-hop{
  0%  { transform:scale(1); }
  30% { transform:scale(1.08); }
  55% { transform:scale(.96); }
  80% { transform:scale(1.02); }
  100%{ transform:scale(1); }
}

/* ---------- 5. Galleria che scorre piano verso destra ----------
   Lo script mette dopo la griglia una sua copia e aggiunge "is-moving".
   La striscia parte spostata a sinistra di una griglia intera e arriva a
   zero: in quel momento la copia e esattamente dove era l'originale,
   l'animazione ricomincia e il salto non si vede. Col mouse sopra si ferma. */
.ssl-gallery.is-moving .ssl-gallery__inner{ overflow:hidden; }
.ssl-gallery.is-moving .ssl-gallery__track{
  --period:calc(8 * 200 * var(--u) + 8 * var(--gap));   /* una griglia + uno spazio */
  animation:ssl-gallery-slide 70s linear infinite;
}
.ssl-gallery.is-moving:hover .ssl-gallery__track{ animation-play-state:paused; }
@keyframes ssl-gallery-slide{
  from{ transform:translateX(calc(-1 * var(--period))); }
  to{ transform:translateX(0); }
}
@media (max-width:767.98px){
  .ssl-gallery.is-moving .ssl-gallery__track{
    --period:calc(8 * 120px + 8 * var(--gap));
    animation-duration:45s;
  }
}

/* ---------- 6. Foto dell'iscrizione: comparsa da sinistra a destra ----------
   Come l'effetto "reveal" di HappyAddons (Image Appearing Animation):
   il contenitore e una finestra che si apre da sinistra verso destra
   (clip-path) in 1,2 secondi, lenta all'inizio e alla fine; nello stesso
   tempo la foto dentro passa dal 120% alla sua misura. Lo script aggiunge
   "js-reveal" (finestra chiusa) e, quando il bordo alto della foto arriva
   a meta schermo, "is-revealed". Una volta sola. */
.ssl-signup__photo.js-reveal{ clip-path:inset(0 100% 0 0); }
.ssl-signup__photo.js-reveal img{ transform:scale(1.2); }
.ssl-signup__photo.is-revealed{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.2s cubic-bezier(.76, 0, .24, 1);      /* = power4.inOut */
}
.ssl-signup__photo.is-revealed img{
  transform:none;
  transition:transform 1.2s cubic-bezier(.5, 1, .89, 1);       /* = power2.out */
}

/* ---------- Meno movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .ssl-w,
  .ssl-hero__caption{ animation:none; }
  .ssl .course-card{ transition:none; }
  .ssl-why__item:hover{ animation:none; }
}