/* ==========================================================================
   iostarto — foglio di stile del sito pubblico
   --------------------------------------------------------------------------
   Scritto a mano dal Figma «Iostarto condiviso» (solo mobile, 402 px).
   Le misure mobili sono quelle del file; il desktop è ricavato da noi.
   Colori, caratteri e raggio arrivano da theme.css (pannello → Aspetto).

   Indice
     1. Base            6. Moduli
     2. Tipografia      7. Blocchi (in ordine di pagina)
     3. Impaginazione   8. Animazioni del Figma
     4. Pulsanti        9. Comparsa allo scorrimento
     5. Testata, menu, piè di pagina
   ========================================================================== */

/* -------------------------------------------------------------- 1. Base -- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:root {
  /* Non modificabili dal pannello: servono alla geometria del design. */
  --blu-intenso: #0900ff;
  --grigio-linea: #bbd7ff;
  --arcobaleno: linear-gradient(90deg, var(--viola) 0%, var(--blu) 26%, var(--rosa) 52%, var(--arancio) 77%, var(--giallo) 100%);
  --sfumatura-pulsante: linear-gradient(90deg, var(--viola) 0%, var(--blu-chiaro) 100%);
  /* Pulsante «Contattaci» del menu (Rectangle 13 del Figma): viola pieno fino al 15%, poi verso il blu. */
  --sfumatura-contatti: linear-gradient(100deg, var(--viola) 14.5%, var(--blu) 100%);
  --gutter: 20px;
  --larghezza: 1200px;
  --ombra-scheda: 0 14px 34px rgba(21, 26, 37, .08);
  /*
   * Grana delle sezioni viola: l'effetto «Noise» del Figma è monocromatico,
   * nero al 25%, grani di 1,5 px, densità piena. grana.png lo riproduce a 2x
   * (ogni grano ha un'opacità casuale fra 0 e 25%); --grana dal pannello la
   * regola, 0.25 = come nel file.
   */
  --rumore: url("../img/grana.png");
}

body.io {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--testo-scuro);
  background: var(--notte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings: "GRAD" 0, "ROND" 0;
  /* clip non crea un contenitore di scorrimento; hidden è il ripiego per Safari < 16. */
  overflow-x: hidden;
  overflow-x: clip;
}

/*
 * Niente scorrimento orizzontale su mobile. Il ritaglio sul body non basta:
 * sui telefoni il browser allarga comunque la pagina a ciò che sporge. Lo si
 * applica quindi al contenuto e al piè di pagina: le decorazioni che escono
 * di proposito dai bordi (bande, schermata di Startando, orbite) vengono
 * tagliate in larghezza, ma restano libere di scendere sulla sezione dopo.
 * clip, non hidden: hidden creerebbe un contenitore di scorrimento e
 * bloccherebbe la testata fissa e i pannelli sticky.
 */
main#contenuto, .piede { overflow-x: clip; }
@supports not (overflow: clip) { main#contenuto, .piede { overflow-x: hidden; } }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; background: #fff; color: var(--notte); font-weight: 700;
}
.skip-link:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 3px; }

.io-nascosto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- 2. Tipografia -- */

/*
 * Titoli: Funnel Display. Il Figma non ha uno stile unico: i titoli della home
 * sono 35/32 Regular, quelli delle pagine interne 30 px Regular o Light, con
 * interlinea da 28 a 36. La base qui è 30/32 Regular; .titolo--grande e le
 * regole dei singoli blocchi riportano ognuno ai valori del file.
 * Le parole chiave sono Bold o ExtraBold: nel pannello, «Grassetto».
 */
.titolo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.0667; /* 32/30 */
  letter-spacing: 0;
}
.titolo strong, .titolo b { font-weight: 700; }
.titolo--grande { font-size: 35px; line-height: .914; /* 32/35 */ }
/* Titoli in Light nel Figma (pagine interne). */
.titolo--leggero { font-weight: 300; }
.titolo--centro { text-align: center; }

/* Evidenziazioni dei titoli (editor del pannello). */
.t-viola { color: var(--viola); font-weight: 700; }
.t-blu { color: var(--blu); font-weight: 700; }
.t-sottolineato {
  font-weight: 700;
  background-image: var(--arcobaleno);
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: 0 100%;
  padding-bottom: 4px;
}
.sfondo-scuro .t-viola, .sfondo-notte .t-viola, .sfondo-stellato .t-viola { color: #a78bff; }
/* Dentro le schede bianche il viola torna quello del marchio. */
.sogni-modulo__scheda .t-viola, .info__scheda .t-viola, .profili-tab__scheda .t-viola, .prodotto .t-viola { color: var(--viola); }

.testo { font-size: 16px; line-height: 23px; }
.testo strong { font-weight: 700; }
.testo p + p { margin-top: 23px; }
.testo--centro { text-align: center; }

/* ---------------------------------------------------- 3. Impaginazione -- */

.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenitore--stretto { max-width: calc(760px + 2 * var(--gutter)); }

.sez { position: relative; padding-block: 72px; isolation: isolate; }
/* Le ancore (#come-funziona, #profilo) non finiscono sotto la testata fissa. */
[id] { scroll-margin-top: 96px; }

.sfondo-chiaro   { background: var(--chiaro); color: var(--testo-scuro); }
.sfondo-bianco   { background: #fff; color: var(--testo-scuro); }
.sfondo-scuro    { background: var(--notte); color: var(--testo-chiaro); }
.sfondo-grafite  { background: var(--notte-2); color: var(--testo-chiaro); }
/* Le sfumature del Figma («Rectangle 56/68»): dal 46,8% nelle testate, dal 15% nella chiusura. */
.sfondo-notte    { background: linear-gradient(180deg, var(--notte) 46.8%, var(--indaco) 100%); color: var(--testo-chiaro); }
.capitolo.sfondo-notte { background: linear-gradient(180deg, var(--notte) 15%, var(--indaco) 100%); }
.sfondo-stellato {
  /*
   * Il cielo del Figma è un'unica foto larga 1054 px, allineata a sinistra.
   * Quando due sezioni stellate si susseguono (testata e modulo della lista
   * dei sogni) site.js imposta --stelle-y sulla seconda: riprende la foto da
   * dove la prima l'ha lasciata e non si vede la cucitura.
   */
  background: var(--notte) url("../img/cielo-1200.webp") 0 var(--stelle-y, 0px) / max(100%, 1054px) auto no-repeat;
  /* Sui telefoni retina la foto è larga 1054 px su 2-3 pixel per punto: serve quella da 2400. */
  background-image: -webkit-image-set(url("../img/cielo-1200.webp") 1x, url("../img/cielo-2400.webp") 2x);
  background-image: image-set(url("../img/cielo-1200.webp") 1x, url("../img/cielo-2400.webp") 2x);
  color: var(--testo-chiaro);
}

/* Niente grana sugli sfondi e, fra una sezione scura e una chiara, stacco
   netto invece della sfumatura (feedback del grafico, 29/09/2026). */

.scheda {
  background: #fff;
  border-radius: var(--raggio);
  color: var(--testo-scuro);
}

/* -------------------------------------------------------- 4. Pulsanti -- */

/*
 * Il pulsante del marchio. Nel Figma è un'unica forma («Union»): una
 * pillola e un cerchio tangenti, riempiti da una sola sfumatura viola→blu.
 * Qui la sfumatura è sullo sfondo dell'intero pulsante e una maschera ne
 * ritaglia la sagoma: la pillola fino al centro del suo semicerchio destro,
 * quel semicerchio, e il cerchio del play. Così la forma si adatta alla
 * lunghezza del testo senza immagini.
 */
.btn-start {
  --h: 53px;
  --r: calc(var(--h) / 2);
  display: inline-flex;
  align-items: center;
  height: var(--h);
  border-radius: var(--r);
  background: var(--sfumatura-pulsante);
  color: #fff;
  text-decoration: none;
  -webkit-mask:
    radial-gradient(circle var(--r) at calc(100% - var(--r)) 50%, #000 calc(100% - .5px), transparent 100%),
    radial-gradient(circle var(--r) at calc(100% - var(--h) - var(--r)) 50%, #000 calc(100% - .5px), transparent 100%),
    linear-gradient(#000 0 0) 0 0 / calc(100% - var(--h) - var(--r)) 100% no-repeat;
          mask:
    radial-gradient(circle var(--r) at calc(100% - var(--r)) 50%, #000 calc(100% - .5px), transparent 100%),
    radial-gradient(circle var(--r) at calc(100% - var(--h) - var(--r)) 50%, #000 calc(100% - .5px), transparent 100%),
    linear-gradient(#000 0 0) 0 0 / calc(100% - var(--h) - var(--r)) 100% no-repeat;
  transition: filter .25s ease, transform .25s ease;
}
.btn-start__testo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  line-height: 1;
  padding: 0 28px 0 32px;
  white-space: nowrap;
}
.btn-start__play {
  display: grid; place-items: center;
  width: var(--h); height: var(--h); flex: none;
}
.btn-start__play svg { width: 18px; height: 21px; margin-left: 3px; transition: transform .25s ease; }
/* Sui telefoni più stretti (320 px) il testo lungo non deve allargare la pagina. */
@media (max-width: 359px) { .btn-start__testo { font-size: 17px; padding: 0 18px 0 22px; } }
.btn-start:hover { filter: brightness(1.12) saturate(1.05); }
.btn-start:hover .btn-start__play svg { transform: translateX(2px) scale(1.08); }
.btn-start:active { transform: scale(.98); }
/* La maschera taglierebbe il contorno del fuoco: si segnala sottolineando il testo. */
.btn-start:focus-visible { outline: none; filter: brightness(1.15); }
.btn-start:focus-visible .btn-start__testo { text-decoration: underline; text-underline-offset: 4px; }

.azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.azioni--centro { justify-content: center; }

/* Pillola nera delle schede prodotto, e bianca su fondo scuro. */
.btn-pillola {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 233px; min-height: 46px; padding: 10px 30px; border-radius: 60px;
  font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 22px;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.btn-pillola--nera { background: #000; color: #fff; }
.btn-pillola--nera:hover { background: var(--viola); }
.btn-pillola--bianca { background: #fff; color: var(--notte); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.btn-pillola--bianca:hover { background: var(--chiaro); }
.btn-pillola:active { transform: scale(.98); }
/* Parole in grassetto nel testo dei pulsanti (dal pannello): quando ci sono,
   il resto del testo passa al peso regolare, così la differenza si vede
   (feedback del grafico del 05/10). Senza grassetti il pulsante resta com'è. */
.btn-start__testo:has(strong), .btn-invio__testo > span:has(strong), .btn-pillola > span:has(strong),
.competenze__link > span:has(strong), .storia__leggi:has(strong) { font-weight: 400; }
.btn-start__testo strong, .btn-invio__testo strong, .btn-pillola strong, .competenze__link strong, .storia__leggi strong { font-weight: 700; }
.btn-start__testo .t-viola, .btn-start__testo .t-blu, .btn-pillola .t-viola, .btn-pillola .t-blu { color: inherit; }

/* Pulsante d'invio dei moduli: pillola blu e cerchio con l'icona, tangenti. */
.btn-invio {
  --h: 46px;
  display: inline-flex; align-items: center; gap: 0;
  height: var(--h); padding: 0; border: 0; background: none; color: #fff;
}
.btn-invio__testo {
  display: grid; place-items: center; height: 100%; min-width: 200px; padding: 0 28px;
  border-radius: 999px; background: var(--blu);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.btn-invio__icona {
  display: grid; place-items: center; width: var(--h); height: var(--h); margin-left: -1px;
  border-radius: 50%; background: var(--blu);
}
.btn-invio:hover .btn-invio__testo, .btn-invio:hover .btn-invio__icona { background: var(--blu-chiaro); }
.btn-invio[disabled] { opacity: .6; cursor: progress; }

/* ------------------------------------- 5. Testata, menu, piè di pagina -- */

.testata {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  color: #fff;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.testata.is-scrolled {
  background: rgba(21, 26, 37, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(238, 245, 255, .08);
}
.testata__barra { display: flex; align-items: center; justify-content: space-between; height: 84px; padding-inline: 31px 36px; }
.testata__logo { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.testata__logo-img { width: 98px; height: auto; }
.testata__logo-testo { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.testata__nav { display: none; }
.testata__apri { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; border: 0; background: none; color: #fff; }

.menu-mobile { position: fixed; inset: 0; z-index: 60; }
.menu-mobile__velo { position: absolute; inset: 0; background: rgba(8, 10, 16, .55); animation: velo-in .3s ease both; }
.menu-mobile__pannello {
  position: relative; margin: 0; min-height: 515px; padding: 33px 36px 36px 31px;
  background: rgba(15, 19, 27, .8); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  animation: pannello-in .45s cubic-bezier(.42, 0, .58, 1) both;
}
/* Su Firefox vecchi senza sfocatura dello sfondo il pannello resta leggibile. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .menu-mobile__pannello { background: #0f131b; } }
.menu-mobile__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 71px; }
.menu-mobile__chiudi { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -14px; border: 0; background: none; color: #fff; }
.menu-mobile__voci { display: grid; gap: 16px; padding-left: 15px; }
.menu-mobile__voci a {
  display: inline-block; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 28px; text-decoration: none;
  transition: color .2s ease, translate .2s ease;
}
.menu-mobile__voci a:hover, .menu-mobile__voci a[aria-current="page"] { color: #a78bff; translate: 4px 0; }
.menu-mobile__cta {
  display: inline-flex; align-items: center; justify-content: center; margin: 41px 0 0 5px;
  min-width: 164px; min-height: 53px; padding: 0 32px; border-radius: 54px;
  background: var(--sfumatura-contatti); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 19.4px;
  transition: filter .2s ease;
}
.menu-mobile__cta:hover { filter: brightness(1.12); }
body.nav-open { overflow: hidden; }
@keyframes velo-in { from { opacity: 0; } }
@keyframes pannello-in { from { transform: translateY(-100%); } }
/* Uscita: stessa curva e stessa durata dell'entrata, al contrario. */
.menu-mobile.is-in-chiusura .menu-mobile__velo { animation: velo-out .35s ease both; }
.menu-mobile.is-in-chiusura .menu-mobile__pannello { animation: pannello-out .4s cubic-bezier(.42, 0, .58, 1) both; }
@keyframes velo-out { to { opacity: 0; } }
@keyframes pannello-out { to { transform: translateY(-100%); } }

/* Piè di pagina */
.piede { position: relative; margin-top: -20px; color: #fff; background: linear-gradient(180deg, transparent 20px, var(--piede) 20px); }
.piede__foto { position: relative; overflow: hidden; border-radius: 20px 20px 0 0; }
.piede__foto img { width: 100%; aspect-ratio: 402 / 274; object-fit: cover; }
.piede__corpo { padding-top: 62px; padding-bottom: 52px; }
.piede__marchio { display: flex; justify-content: center; }
.piede__marchio a { color: #fff; text-decoration: none; }
.piede__logo { width: 240px; height: auto; }
.piede__logo-testo { font-family: var(--font-display); font-weight: 800; font-size: 56px; letter-spacing: -.03em; }
.piede__menu { display: grid; grid-template-columns: 176px 1fr; gap: 0; margin: 48px 0 0; padding-left: 58px; }
.piede__menu ul { display: grid; gap: 4px; }
.piede__menu a { text-decoration: none; font-size: 16px; line-height: 22px; opacity: .92; }
.piede__menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.piede__titolo { font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 22px; margin-bottom: 14px; }
.piede__newsletter {
  margin: 47px auto 0; max-width: 332px; padding: 38px 43px 36px;
  border-radius: 20px; background: #282a2b;
}
.piede__nl-testo { margin-top: 19px; font-size: 16px; line-height: 22px; margin-bottom: 24px; }
.piede__legale {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px;
  margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(238, 245, 255, .1);
  font-size: 13px; line-height: 18px; opacity: .6; text-align: center;
}

/* ---------------------------------------------------------- 6. Moduli -- */

.io-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.io-campo {
  width: 100%; min-height: 43px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: 4px;
  background: #fff; color: var(--testo-scuro);
  font-size: 15px; line-height: 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.io-campo--chiaro { background: var(--chiaro); }
.io-campo::placeholder { color: var(--testo-scuro); opacity: 1; }
.io-campo:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(0, 91, 232, .2); }
textarea.io-campo { min-height: 120px; resize: vertical; }

.io-griglia-campi { display: grid; gap: 16px; }
/* Nome ed email affiancati da 560 px in su; testo lungo, scelte e consenso a tutta riga. */
@media (min-width: 560px) { .io-griglia-campi { grid-template-columns: 1fr 1fr; } .io-cella-piena { grid-column: 1 / -1; } }
.io-etichetta { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.io-obbl { color: var(--viola); }
.io-aiuto { margin-top: 6px; font-size: 13px; opacity: .75; }

/* Risposte a scelta: le pillole bordate della lista dei sogni. */
.io-scelte { display: grid; gap: 13px; }
.io-scelta { position: relative; display: block; cursor: pointer; }
.io-scelta span {
  display: block; padding: 10px 18px; min-height: 41px;
  border: 1px solid #aeceff; border-radius: 10px;
  background: #f3f6fa; color: #000; font-size: 16px; line-height: 20px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.io-scelta:hover span { border-color: var(--blu); }
.io-scelta input:checked + span { background: var(--blu); border-color: var(--blu); color: #fff; }
.io-scelta input:focus-visible + span { outline: 2px solid var(--blu-chiaro); outline-offset: 2px; }
.io-scelta:active span { transform: scale(.99); }

.io-consenso { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 13px; line-height: 18px; text-align: left; }
.io-consenso input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--blu); }
.io-consenso__testo { flex: 1; min-width: 0; }
.io-consenso a { text-decoration: underline; text-underline-offset: 2px; }
.io-consenso p { margin: 0; }
.io-consenso--scuro { color: rgba(255, 255, 255, .85); }

.modulo__campi { display: grid; gap: 16px; }
.modulo--newsletter .modulo__campi { gap: 0; }
.modulo--newsletter .btn-invio { margin-top: 17px; }
.modulo__esito { padding: 14px 16px; border-radius: 10px; background: rgba(0, 212, 124, .14); color: inherit; font-weight: 700; }
.modulo__errori { margin-bottom: 14px; padding: 12px 16px; border-radius: 10px; background: rgba(255, 89, 15, .12); color: inherit; font-size: 14px; text-align: left; }
.modulo__errori li + li { margin-top: 4px; }

/* ------------------------------------------------ 7. Blocchi — home -- */

/* Testata con i sogni animati ------------------------------------------- */

.sogni {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 84px 0 0;
  background:
    url("../img/linee-sfocate.svg") 0 0 / max(402px, 100%) auto no-repeat,
    linear-gradient(180deg, var(--notte) 46.8%, var(--indaco) 100%);
  color: #fff;
}
.sogni__griglia { display: grid; justify-items: center; }

/*
 * La scena usa lo stesso sistema di coordinate del Figma: 402 unità di
 * larghezza. Con container-type e le unità cqw ogni posizione e ogni corpo
 * del testo scala insieme alla scena, qualunque sia lo schermo.
 */
.sogni__contenitore { width: min(100%, 560px); container-type: inline-size; }
.sogni__scena {
  /* Senza container query (browser più vecchi) la scena si misura sullo schermo. */
  --u: calc(min(100vw - 2 * var(--gutter), 560px) / 402);
  position: relative;
  width: 100%;
  aspect-ratio: 402 / 470;
  margin-top: -22px;
}
.sogni__scena > * { position: absolute; }
@supports (width: 1cqw) { .sogni__scena { --u: calc(100cqw / 402); } }
/* Sfere, cerchio e bolle: un solo SVG grande quanto la scena (vedi il template). */
.sogni__disegno { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.sogni__vetro rect { filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .12)); }
/* Le due sfere girano insieme attorno al centro del loro gruppo nel Figma. */
.sogni__sfere { transform-box: view-box; transform-origin: 212.5px 239.06px; }
.sogni__sfera--a { fill: var(--viola); }
.sogni__sfera--b { fill: var(--verde); }

.sogni__frase {
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  font-size: calc(19 * var(--u));
  line-height: calc(18 * var(--u));
}
.sogni__frase strong { font-weight: 600; }
/* Due frasi in Funnel Display, due in Google Sans Flex, come nel file. */
.sogni__frase--display { font-family: var(--font-display); font-weight: 300; font-size: calc(20 * var(--u)); line-height: calc(19 * var(--u)); }
.sogni__frase--sans { font-family: var(--font-sans); font-weight: 300; }
.sogni__frase--1 { left: calc(262 * var(--u)); top: calc(59.56 * var(--u)); width: calc(144 * var(--u)); }
.sogni__frase--2 { left: calc(281.06 * var(--u)); top: calc(264.4 * var(--u)); width: calc(139.84 * var(--u)); line-height: calc(18 * var(--u)); }
.sogni__frase--3 { left: calc(88.43 * var(--u)); top: calc(146.56 * var(--u)); width: calc(122.85 * var(--u)); }
.sogni__frase--4 { left: calc(101 * var(--u)); top: calc(333 * var(--u)); width: calc(142 * var(--u)); }

.sogni__testo { position: relative; z-index: 2; display: grid; justify-items: center; gap: 15px; padding: 0 var(--gutter) 64px; text-align: center; }
.sogni__titolo { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: .9333; }
.sogni__titolo strong { font-weight: 800; }
/* Testo facoltativo sotto il titolo: solo su computer. */
.sogni__sottotitolo { display: none; }
@media (min-width: 1024px) {
  /* Largo esattamente quanto il titolo: il blocco prende la larghezza di
     «starta i tuoi sogni» e il testo la riempie senza allargarla. */
  .sogni__testo:has(.sogni__sottotitolo) { width: fit-content; max-width: 100%; }
  .sogni__sottotitolo { display: block; width: 0; min-width: 100%; font-size: 16px; line-height: 23px; font-weight: 300; }
  .sogni__sottotitolo strong { font-weight: 700; }
  .sogni__sottotitolo p + p { margin-top: 23px; }
}

/* Schede colorate impilate ----------------------------------------------- */

.profili { padding: 0 0 110px; }
/* Continua la sfumatura della testata: parte dal viola scuro in cui quella finisce. */
/*
 * Le tre linee a V (blu, azzurra, azzurro chiaro) del gruppo «Group 110»: un
 * solo disegno che parte dall'alto della testata. Nel Figma ha una sfocatura
 * progressiva: 23 px in alto, zero da y = 770 in giù. Per questo la testata
 * usa la versione sfocata e questa sezione quella nitida. Qui lo si riprende dallo
 * stesso punto del frame (785 px più su), così le V cadono dietro le schede
 * come nel file. Su schermi larghi il disegno si allarga in proporzione.
 */
.sez.profili { background: linear-gradient(180deg, var(--indaco) 0%, var(--notte) 100%); }
/* Le linee stanno su un livello loro che si dissolve verso il fondo: finiscono
   sfumando, come nel Figma, invece di interrompersi di netto. */
.sez.profili::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/linee-nitide.svg") 0 calc(max(402px, 100vw) * -785 / 402) / max(402px, 100%) auto no-repeat;
  -webkit-mask: linear-gradient(180deg, #000 45%, transparent 88%);
          mask: linear-gradient(180deg, #000 45%, transparent 88%);
}
.profili__titolo { margin-bottom: 62px; line-height: .9333; }
.profili__titolo strong { font-weight: 800; }
.profili__schede { display: grid; gap: 30px; }
.profili__scheda {
  padding: 36px 32px 34px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 24px 50px rgba(9, 0, 60, .35);
}
.profili__scheda--viola { background: var(--viola); }
.profili__scheda--indaco { background: var(--blu-intenso); }
.profili__scheda--blu { background: #0066ff; }
.profili__domanda { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 25px; margin-bottom: 20px; }
.profili__risposta { font-size: 16px; line-height: 21px; }
.profili__risposta strong { font-weight: 700; }

/* Vantaggi con icona ------------------------------------------------------ */

.vantaggi { padding-top: 64px; padding-bottom: 72px; }
.vantaggi__titolo { margin-bottom: 52px; }
.vantaggi__voci { display: grid; gap: 30px; }
/*
 * Ogni vantaggio, come nel Figma, è fatto di tre strati: sotto una macchia
 * #0900FF molto sfocata («Rectangle 70», blur 40), sopra una scheda di vetro
 * bianca al 20% («Glass»), e sopra ancora il glifo lilla con l'alone bianco.
 * L'effetto di icona luminosa nasce dalla macchia vista attraverso il vetro.
 */
.vantaggi__voce {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 23px;
  min-height: 120px; padding: 26px 20px 26px 26px;
  font-size: 16px; line-height: 23px;
}
.vantaggi__voce::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 15px;
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(2px) saturate(1.1);
          backdrop-filter: blur(2px) saturate(1.1);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .9), inset -1px -1px 1px rgba(255, 255, 255, .5), 0 12px 30px rgba(0, 91, 232, .05);
}
.vantaggi__voce strong { color: var(--viola); font-weight: 700; }
/*
 * Il quadrato #0900FF ha nel Figma una sfocatura progressiva: zero nella metà
 * alta, fino a 40 px scendendo. Due strati: il quadrato netto che si dissolve
 * verso il basso e una sua copia molto sfocata che compare solo in basso.
 */
.vantaggi__alone {
  position: absolute; left: 26px; top: 50%; z-index: -2;
  width: 60px; height: 60px; margin-top: -30px;
}
.vantaggi__alone::before, .vantaggi__alone::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; background: var(--blu-intenso);
}
/* Riquadro netto, senza l'alone sfocato sotto (feedback del grafico). */
.vantaggi__alone::after { display: none; }
.vantaggi__icona { display: grid; place-items: center; width: 60px; height: 60px; }
/* L'SVG è 56 × 56: il glifo da 28 px più il suo alone bianco, in linea per restare nitido. */
.vantaggi__icona svg { width: 56px; height: 56px; max-width: none; overflow: visible; }
.vantaggi__azioni { margin-top: 50px; }

/* Storie (carosello) --------------------------------------------------------- */

/* Dal pulsante al titolo dell'ecosistema il Figma ha 264 px: 206 qui (con la sfumatura) e 58 nella sezione dopo. */
.storie { padding-top: 75px; padding-bottom: 206px; overflow: hidden; }
.storie__intro { text-align: center; }
.storie__intro .titolo strong { font-weight: 800; }
.storie__sottotitolo { margin-top: 18px; font-size: 20px; line-height: 22px; }
.storie__sottotitolo strong { font-weight: 700; }
.storie__binario {
  /* 3 px fra le card: con quella accanto al 91,5% lo spazio visibile torna ai 16 px del Figma. */
  display: flex; gap: 3px; align-items: center;
  /* A destra lo spazio per centrare anche l'ultima scheda. */
  margin-top: 50px; padding: 0 max(var(--gutter), calc(50vw - 153.5px)) 30px calc(var(--gutter) + 11px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.storie__binario::-webkit-scrollbar { display: none; }
.storia {
  /* La prima scheda si aggancia a sinistra come nel Figma, le altre al centro
     dello schermo (feedback del grafico). */
  position: relative; flex: 0 0 307px; scroll-snap-align: center;
  /* site.js imposta --zoom mentre si scorre: 1 per la card in primo piano,
     0,915 per quelle accanto, come la card che si intravede nel Figma. */
  scale: var(--zoom, 1); transform-origin: 50% 50%; will-change: scale;
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  background: var(--chiaro); color: var(--testo-scuro);
  /* Niente ombra: sul cielo stellato si vedeva come una macchia sfocata. */
}
.storia:first-child { scroll-snap-align: start; scroll-margin-left: calc(var(--gutter) + 11px); }
.storia__stella {
  position: absolute; right: 25px; top: 26px; width: 23px; height: 23px; overflow: visible;
  filter: drop-shadow(0 0 19px #005be8) drop-shadow(0 3px 5px rgba(27, 116, 255, .8));
}
.storia__parte { padding: 44px 28px 34px 28px; }
.storia__parte + .storia__parte { border-top: 2px dashed rgba(0, 91, 232, .35); }
.storia__titolo { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 16px; color: var(--blu); margin-bottom: 30px; }
.storia__elenco { display: grid; gap: 14px; font-size: 16px; line-height: 16px; }
.storia__elenco li { position: relative; padding-left: 30px; }
.storia__elenco strong { font-weight: 700; }
.storia__elenco--sogno li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px;
  border: 1.5px solid var(--blu); border-radius: 50%;
}
.storia__elenco--risultato li::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 18px; height: 14px;
  background: var(--verde);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M2 7.5l4.5 4.5L16 2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M2 7.5l4.5 4.5L16 2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.storia__voce { margin-top: auto; padding: 23px 24px 24px 29px; border-radius: 0 0 10px 10px; background: var(--blu); color: #fff; }
.storia__citazione { font-size: 16px; line-height: 21px; }
/* Recensioni lunghe: nella card cinque righe con i puntini, poi «Leggi tutto».
   Senza JavaScript il testo resta intero. */
.js .storia__citazione-testo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.storia__leggi {
  margin-top: 10px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 20px; text-decoration: underline; text-underline-offset: 3px;
}
.storia__leggi:hover { text-decoration-thickness: 2px; }
.storia__leggi[hidden] { display: none; }
/* La recensione completa sta nella card solo per la finestra: con JavaScript
   resta nascosta; senza, si legge sotto la frase breve. */
.js .storia__completa { display: none; }
.storia__completa { margin-top: 14px; }

/* Finestra con la recensione intera: foglio che sale dal basso sul
   telefono (come l'elenco delle competenze), finestra centrata sul computer. */
.recensione-pannello { display: none; }
.js .recensione-pannello.is-aperto { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; overscroll-behavior: contain; }
.recensione-pannello__velo { position: fixed; inset: 0; background: rgba(8, 10, 16, .6); animation: velo-in .3s ease both; }
.recensione-pannello__scheda {
  position: relative; width: min(100%, 560px); max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 44px 29px calc(34px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0;
  background: var(--blu); color: #fff; animation: sali-dal-basso .55s cubic-bezier(.22, 1, .36, 1) both;
}
.recensione-pannello.is-chiusura .recensione-pannello__scheda { animation: scendi-in-basso .35s cubic-bezier(.64, 0, .78, 0) both; }
.recensione-pannello.is-chiusura .recensione-pannello__velo { animation: velo-out .35s ease both; }
.recensione-pannello__chiudi {
  position: absolute; right: 14px; top: 14px; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--blu); cursor: pointer;
}
.recensione-pannello .storia__citazione { padding-right: 20px; font-size: 17px; line-height: 25px; }
.recensione-pannello .storia__citazione-testo { display: block; overflow: visible; }
.recensione-pannello .storia__par { display: block; }
.recensione-pannello .storia__par + .storia__par { margin-top: 14px; }
.recensione-pannello .storia__persona { margin-top: 30px; }
@media (min-width: 1024px) {
  .js .recensione-pannello.is-aperto { align-items: center; padding: 40px; }
  .recensione-pannello__scheda { width: min(100%, 620px); padding: 52px 48px 44px; border-radius: 20px; animation: recensione-in .35s cubic-bezier(.22, 1, .36, 1) both; }
  .recensione-pannello.is-chiusura .recensione-pannello__scheda { animation: recensione-out .25s ease both; }
}
@keyframes recensione-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes recensione-out { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .recensione-pannello__scheda, .recensione-pannello__velo { animation: none !important; }
}
.storia__persona { display: flex; align-items: center; gap: 18px; margin-top: 28px; font-size: 14px; line-height: 16px; }
.storia__persona img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
/* Al posto della foto, se manca: le iniziali in un cerchio chiaro sul blu della card. */
.storia__iniziali {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .16); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .02em;
}
.storia__persona strong { font-weight: 700; }
.storie__punti { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 18px; margin-top: 10px; }
.storie__punti[hidden], .storie__punto[hidden] { display: none; }
/* Frecce del carosello: solo da 1024 px (site.js le mostra se c'è da scorrere). */
.storie__freccia { display: none; }
@media (min-width: 1024px) {
  .storie__freccia {
    position: absolute; z-index: 2; top: calc(50% - 15px); translate: 0 -50%;
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border: 1.5px solid #fff; border-radius: 50%; background: rgba(21, 26, 37, .35); color: #fff; cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .storie__freccia--prima { left: -72px; }
  .storie__freccia--dopo { right: -72px; }
  .storie__freccia:hover:not(:disabled) { background: var(--blu); border-color: var(--blu); }
  .storie__freccia:disabled { opacity: .3; cursor: default; }
  .storie__freccia[hidden] { display: none; }
}
.storie__punto { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1.5px solid #fff; background: transparent; transition: background-color .2s ease, width .2s ease, height .2s ease; }
.storie__punto[aria-current="true"] { width: 18px; height: 18px; border-color: var(--blu); background: var(--blu); }
.storie__chiusura { margin-top: 70px; text-align: center; }
.storie__chiusura .titolo { line-height: .9333; }
.storie__chiusura .azioni { margin-top: 28px; }

/* Ecosistema (schede prodotto) -------------------------------------------- */

.ecosistema { padding-top: 58px; padding-bottom: 60px; }
.ecosistema .contenitore { --gutter: 15px; }
.ecosistema__titolo { margin-bottom: 60px; }
.ecosistema__schede { display: grid; gap: 30px; }
.prodotto {
  position: relative; display: grid; justify-items: center; align-content: start;
  padding: 53px 20px 55px; overflow: hidden;
  border-radius: 20px 20px 10px 10px; background: #fff; text-align: center;
  box-shadow: var(--ombra-scheda);
}
.prodotto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; }
.prodotto--viola::after { background: var(--viola); }
.prodotto--nero::after { background: #000; }
.prodotto--arcobaleno::after { background: linear-gradient(90deg, var(--giallo), var(--arancio), var(--rosa), var(--blu), var(--viola)); }
.prodotto__logo { display: grid; place-items: center; margin-bottom: 25px; }
.prodotto__logo img { max-height: 58px; width: auto; }
.prodotto__testo { font-size: 20px; line-height: 22px; max-width: 332px; margin-bottom: 27px; color: #000; }
.prodotto__testo strong { font-weight: 700; }

/* Chiusura «Il prossimo capitolo» ------------------------------------------- */

.capitolo { padding: 96px 0 100px; }
.capitolo__corpo { padding-inline: 28px; max-width: 640px; }
.capitolo__sopra { font-size: 12px; line-height: 16px; color: var(--grigio-linea); margin-bottom: 12px; }
.capitolo__sopra strong { font-weight: 700; color: #fff; }
.capitolo__titolo { font-family: var(--font-display); font-weight: 400; font-size: 35px; line-height: .914; }
.capitolo__titolo strong { font-weight: 700; }
.capitolo__titolo .t-sottolineato { padding-bottom: 6px; }
.capitolo__testo { margin-top: 38px; font-size: 16px; line-height: 24px; max-width: 300px; }
.capitolo__corpo .azioni { margin-top: 55px; }
.capitolo__foto { display: none; }
.conta { font-variant-numeric: tabular-nums; }

/* -------------------------------------- 7. Blocchi — pagine interne -- */

/* Testata di testo con le orbite ---------------------------------------- */

.orbite-testata { padding-top: 150px; padding-bottom: 30px; overflow: hidden; }
.orbite-testata__corpo { padding-inline: 17px; max-width: 520px; }
.orbite-testata__titolo { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: .9333; }
.orbite-testata__titolo strong { font-weight: 600; }
.orbite-testata__titolo + .orbite-testata__titolo { margin-top: 26px; }
.orbite-testata__testo { margin-top: 44px; font-size: 16px; line-height: 28px; }
.orbite-testata__testo p + p { margin-top: 28px; }
.orbite-testata__testo strong { font-weight: 700; }
.orbite-testata { min-height: 932px; }
.orbite-testata .contenitore { position: relative; z-index: 1; }
/* Il livello delle orbite usa i pixel del Figma, a partire dall'angolo della sezione. */
.orbite { position: absolute; left: 0; top: 40px; width: 402px; height: 100%; pointer-events: none; }
.orbite__anello { position: absolute; border: 1px solid transparent; border-radius: 50%; transform-origin: 50% 50%; }
.orbite__anello--icone { border: 0; }
.orbite__stella, .orbite__icona { position: absolute; translate: -50% -50%; }
.orbite__stella svg { display: block; }
.orbite__icona {
  display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%;
  background: var(--fondo);
  box-shadow: 0 0 24px 4px rgba(255, 255, 255, .15);
  box-shadow: 0 0 24px 4px color-mix(in srgb, var(--fondo) 55%, transparent);
}
.orbite__icona svg { width: 30px; height: 30px; }
/* Il disegno della bilancia ha molto margine intorno: a 30 px sembrava più
   piccolo delle altre icone. A 46 px il segno ha la stessa grandezza. */
.orbite__icona svg.orbite__bilancia { width: 46px; height: 46px; }
.orbite__glifo { stroke-width: 2; }

/* Passi numerati ------------------------------------------------------------ */

/*
 * «Come lavoriamo» (Group 245 del Figma). Il fondo riprende il viola dove la
 * testata finisce e scurisce scendendo: così le due sezioni sono un solo
 * fondo continuo, come nel file.
 */
.passi { padding-top: 22px; padding-bottom: 60px; }
.sez.passi.sfondo-notte { background: linear-gradient(180deg, var(--indaco) 0%, var(--notte) 53.2%); }
.passi__titolo { margin-bottom: 45px; }
.passi__elenco { position: relative; display: flex; flex-direction: column; max-width: 340px; margin-inline: auto; }
.passo {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center;
  min-height: 168px; padding: 32px 26px 28px; text-align: center;
  border-radius: 10px; background: var(--chiaro); color: var(--testo-scuro);
}
/*
 * Le linee della timeline: tratti di 4 px fra una scheda e l'altra, alternati
 * a sinistra e a destra come nel Figma. Entrano per 7 px sotto le schede
 * vicine, così il tratto sembra uscire da una e infilarsi nell'altra.
 */
.passi__linea { display: block; width: 4px; height: 42px; margin: -7px 0; background: var(--chiaro); transform-origin: 50% 0; }
.passi__linea--sinistra { margin-left: 69px; }
.passi__linea--destra { margin-left: auto; margin-right: 66px; }
/* Il numero: cerchio di vetro viola al 50% a cavallo del bordo alto. */
.passo__numero {
  position: absolute; left: 50%; top: -15px; margin-left: -17.5px;
  display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%;
  background: rgba(80, 0, 255, .5); color: #fff;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .45), inset -1px -1px 1px rgba(255, 255, 255, .15);
  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 19px;
}
/* Timeline di Startando PRO: schede da 144 px, numeri in vetro nero al 50%. */
.passi--grigio { padding-top: 51px; padding-bottom: 83px; }
.passi--grigio .passo { min-height: 144px; }
.passi--grigio .passi__elenco { gap: 0; }
.passi--grigio .passi__linea { height: 46px; }
.passi--grigio .passo__numero { background: rgba(0, 0, 0, .5); }
.passo__titolo { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 21px; color: var(--viola); margin-bottom: 8px; text-wrap: balance; }
.passi--grigio .passo__titolo { color: var(--testo-scuro); }
.passo__testo { max-width: 288px; margin-inline: auto; font-size: 16px; line-height: 22px; }
.passo__testo strong { font-weight: 700; }
.passi__azioni { margin-top: 50px; }

/*
 * Costruzione della timeline. Quando la sezione entra nello schermo
 * (.is-entrato, da site.js) le parti compaiono in sequenza: scheda 1, la
 * linea che cresce verso la 2, la scheda 2, e così via; per ultimo il
 * pulsante. --i è la posizione: ogni passo occupa 0,4 s (tutta la timeline
 * circa 1,8 s), così anche scorrendo veloce la sezione non resta vuota; la
 * linea parte 0,22 s prima della sua scheda.
 */
.js [data-timeline] .passo,
.js [data-timeline] .passi__azioni { opacity: .15; transform: translateY(14px); }
.js [data-timeline] .passo__numero { scale: 0; }
.js [data-timeline] .passi__linea { transform: scaleY(0); }
.js [data-timeline].is-entrato .passo,
.js [data-timeline].is-entrato .passi__azioni {
  animation: passo-compare .4s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--i) * .4s + .1s);
}
.js [data-timeline].is-entrato .passo__numero {
  animation: numero-compare .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
  animation-delay: calc(var(--i) * .4s + .2s);
}
.js [data-timeline].is-entrato .passi__linea {
  animation: linea-cresce .22s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--i) * .4s - .12s);
}
@keyframes passo-compare { to { opacity: 1; transform: none; } }
@keyframes numero-compare { to { scale: 1; } }
@keyframes linea-cresce { to { transform: none; } }

/* Competenze (scheda blu) ------------------------------------------------ */

.competenze { padding-top: 116px; padding-bottom: 97px; }
.competenze__scheda {
  position: relative; overflow: hidden;
  max-width: 340px; margin-inline: auto; padding: 58px 0 40px;
  border-radius: 10px; color: #fff; text-align: center;
  background: linear-gradient(180deg, #287cff 0%, #005be8 100%);
}
.competenze__titolo { padding-inline: 21px; font-size: 30px; line-height: 1.1; }
.competenze__testo { margin-top: 24px; padding-inline: 21px; font-size: 16px; line-height: 23px; }
.competenze__nastri { display: grid; gap: 14px; margin-top: 55px; }
.competenze__nastro { display: flex; width: max-content; gap: 10px; }
.competenze__pillola {
  flex: none; display: grid; place-items: center; height: 53px; padding: 0 30px;
  border: 2px solid #fff; border-radius: 70px; background: rgba(255, 255, 255, .2);
  font-size: 16px; line-height: 23px; white-space: nowrap;
}
.competenze__link {
  display: inline-flex; align-items: center; gap: 17px; margin-top: 76px;
  border: 0; background: none; color: var(--chiaro);
  font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 33px;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.competenze__link svg { flex: none; transition: transform .25s ease; }
.competenze__link:hover svg { transform: rotate(90deg); }
/*
 * Le pillole scorrono lente in orizzontale (aggiunta nostra: nel Figma sono
 * ferme ma tagliate ai bordi). Il nastro è duplicato da site.js per un
 * giro continuo; la seconda riga va in senso opposto.
 */
.competenze__nastro.is-duplicato { animation: nastro 38s linear infinite; }
.competenze__nastro.is-duplicato:nth-child(2) { animation-direction: reverse; animation-duration: 44s; }
.competenze__scheda:hover .competenze__nastro { animation-play-state: paused; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* Pannello con l'elenco delle competenze (frame «Frame 3»). */
/* Senza JavaScript l'elenco resta nella pagina, sotto la scheda; con JavaScript è una finestra. */
.elenco-pannello { display: grid; place-items: start center; padding: 40px var(--gutter) 0; }
.elenco-pannello__velo, .elenco-pannello__chiudi { display: none; }
.js .elenco-pannello:not(.is-aperto) { display: none; }
.js .elenco-pannello { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; padding: 0; overscroll-behavior: contain; }
.js .elenco-pannello__velo { display: block; position: fixed; inset: 0; background: rgba(8, 10, 16, .6); animation: velo-in .3s ease both; }
.elenco-pannello__scheda {
  position: relative; width: min(100%, 520px); padding: 40px 30px 34px;
  border-radius: 12px; background: #fff; color: var(--testo-scuro);
}
/* Pannello ancorato al fondo dello schermo, come un foglio che sale dal
   basso (feedback del grafico): angoli arrotondati solo in alto, scorre
   dentro di sé se l'elenco è più lungo dello spazio. Movimento morbido, senza rimbalzo. */
.js .elenco-pannello__scheda {
  width: min(100%, 560px); max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 20px 20px 0 0; padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  animation: sali-dal-basso .55s cubic-bezier(.22, 1, .36, 1) both;
}
.js .elenco-pannello.is-chiusura .elenco-pannello__scheda { animation: scendi-in-basso .35s cubic-bezier(.64, 0, .78, 0) both; }
/* Su desktop la finestra torna al centro della pagina, come all'inizio:
   lo scorrimento dal basso resta solo sul telefono (feedback del 05/10). */
@media (min-width: 1024px) {
  .js .elenco-pannello { align-items: center; padding: 40px; }
  .js .elenco-pannello__scheda { border-radius: 20px; padding-bottom: 34px; animation: recensione-in .35s cubic-bezier(.22, 1, .36, 1) both; }
  .js .elenco-pannello.is-chiusura .elenco-pannello__scheda { animation: recensione-out .25s ease both; }
}
.js .elenco-pannello.is-chiusura .elenco-pannello__velo { animation: velo-out .35s ease both; }
.js .elenco-pannello__chiudi {
  position: absolute; right: 14px; top: 14px; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--notte); color: #fff;
}
.elenco-pannello__titolo { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 22px; margin-bottom: 18px; padding-right: 30px; }
.elenco-pannello__titolo strong { color: var(--viola); }
.elenco-pannello__voci { columns: 2; column-gap: 20px; font-size: 14px; line-height: 20px; }
.elenco-pannello__voci li { break-inside: avoid; padding: 3px 0 3px 12px; position: relative; }
.elenco-pannello__voci li::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--viola); }
/* Entra dal basso in 0,5 s ed esce verso il basso: dall'alto finiva sotto
   la testata fissa. */
@keyframes sali-dal-basso { from { transform: translateY(100%); } }
@keyframes scendi-in-basso { to { transform: translateY(100%); } }

/* Elenco con lo scudo ------------------------------------------------------ */

.garanzie { padding-top: 100px; padding-bottom: 121px; }
.garanzie .titolo { font-weight: 300; line-height: .9333; }
.garanzie__intro { max-width: 305px; margin: 34px auto 0; text-align: center; font-size: 16px; line-height: 19px; }
.garanzie__intro strong { font-weight: 700; }
.garanzie__voci { margin-top: 74px; max-width: 310px; margin-inline: auto; }
/* Righe di 170 px nel Figma: 70 di contenuto e 50 sopra e sotto il divisorio. */
.garanzia { display: grid; grid-template-columns: 51px 1fr; gap: 42px; align-items: start; padding: 50px 0; }
.garanzia:first-child { padding-top: 0; }
.garanzia:last-child { padding-bottom: 0; }
.garanzia + .garanzia { border-top: 1.5px solid var(--blu); }
/* L'SVG è 69 × 79 con ombra e riflesso: lo scudo vero (51 × 70) parte 8 px a destra e 3 in basso. */
.garanzia__scudo { width: 69px; height: 79px; max-width: none; margin: -3px 0 -6px -8px; }
.garanzia__testo { padding-top: 5px; font-size: 16px; line-height: 19px; font-weight: 300; }
.garanzia__testo strong { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 21px; }

/* Testata con le citazioni ------------------------------------------------- */

.citazioni-testata { padding-top: 160px; padding-bottom: 0; text-align: center; }
.citazioni-testata__titolo { font-size: 30px; line-height: 1.2; font-weight: 300; }
.citazioni-testata__titolo strong { font-weight: 600; }
/* Fumetti: 313 × 69, avatar di 45 px, testo 14/16 (Group 203–205 del Figma). */
.fumetti { position: relative; height: 82px; max-width: 313px; margin: 75px auto 100px; }
.fumetto {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: 45px 1fr; gap: 17px; align-items: center;
  min-height: 69px; padding: 12px 20px 12px 14px; border-radius: 10px; background: #fff; color: var(--testo-scuro);
  font-size: 14px; line-height: 16px; text-align: center;
  opacity: 0;
}
.fumetto::after {
  content: ""; position: absolute; right: 21px; bottom: -12px;
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 13px solid #fff;
}
.fumetto img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
.fumetto--senza-foto { grid-template-columns: 1fr; }
.citazioni-testata__testo { max-width: 295px; margin: 0 auto; font-size: 16px; line-height: 23px; font-weight: 300; }
.citazioni-testata__frase { max-width: 312px; margin: 46px auto 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 23px; }

/* Modulo della lista dei sogni --------------------------------------------- */

.sogni-modulo { padding-top: 117px; padding-bottom: 217px; }
.sogni-modulo__scheda {
  max-width: 345px; margin-inline: auto; padding: 36px 29px 29px;
  border-radius: 10px; background: #fff; color: var(--testo-scuro); text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.sogni-modulo__titolo { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.0667; }
.sogni-modulo__titolo strong { font-weight: 700; }
.sogni-modulo__intro { max-width: 172px; margin: 11px auto 0; font-size: 16px; line-height: 21px; color: #000; }
.sogni-modulo__passo { margin: 33px 0 0; padding: 0; border: 0; min-width: 0; text-align: left; }
.sogni-modulo__domanda { display: block; width: 100%; margin-bottom: 26px; padding: 0; text-align: center; font-weight: 700; font-size: 16px; line-height: 21px; color: #000; }
.sogni-modulo__contatore { font-size: 16px; line-height: 21px; color: #797979; font-variant-numeric: tabular-nums; }
.sogni-modulo__navigazione { display: flex; align-items: center; justify-content: space-between; margin-top: 23px; }
/* Le frecce: cerchi viola di 43 px («Group 215» del Figma). */
.sogni-modulo__freccia { display: grid; place-items: center; width: 43px; height: 43px; border: 0; border-radius: 50%; background: var(--viola); color: #fff; transition: opacity .2s ease; }
.sogni-modulo__freccia:disabled { opacity: 0; pointer-events: none; }
/* Senza JavaScript tutte le domande restano visibili, una sotto l'altra. */
.sogni-modulo__navigazione { display: none; }
.js .sogni-modulo__navigazione { display: flex; }
.js .sogni-modulo__passo:not(.is-attivo) { display: none; }
.sogni-modulo__passo.is-attivo { animation: passo-in .35s ease both; }
@keyframes passo-in { from { opacity: 0; transform: translateX(18px); } }
/* Lista dei sogni collegata a Startando: passaggi con più campi. I campi
   sono quelli del Figma (fondo azzurro tenue, 43 px), uno sotto l'altro. */
.sogni-modulo__passo .io-campo { display: block; background: var(--chiaro); }
.sogni-modulo__passo .io-campo ~ .io-nascosto + .io-campo,
.sogni-modulo__gruppo + .io-nascosto + .io-campo,
.sogni-modulo__passo .io-campo + .sogni-modulo__gruppo { margin-top: 10px; }
.sogni-modulo__passo .io-campo:invalid:not(:placeholder-shown) { border-color: #e2554f; }
.sogni-modulo__gruppo[hidden] { display: none; }
.sogni-modulo__nota { margin: 8px 4px 14px; font-size: 13px; line-height: 18px; color: #5b6070; }
.sogni-modulo__etichetta { margin: 22px 0 10px; font-size: 14px; line-height: 18px; font-weight: 700; color: #000; }
.sogni-modulo__etichetta span { font-weight: 400; color: #5b6070; }
/* Le venti regioni: pillole piccole su due colonne. */
.sogni-modulo__regioni { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sogni-modulo__regioni .io-scelta span { min-height: 0; padding: 7px 10px; font-size: 13px; line-height: 16px; }
.sogni-modulo__email .btn-invio { margin-top: 18px; }
.sogni-modulo__grazie { margin-top: 26px; font-size: 16px; line-height: 23px; }

/* Titolo e testo centrati ---------------------------------------------------- */

.testo-centro { padding-top: 80px; padding-bottom: 115px; text-align: center; }
.testo-centro__corpo { max-width: 312px; margin: 47px auto 0; font-size: 16px; line-height: 23px; font-weight: 300; }
.testo-centro__corpo p + p { margin-top: 23px; }
.testo-centro__corpo strong { font-weight: 700; }

/* Testo libero (pagine legali) ------------------------------------------------ */

.testo-libero { padding-top: 140px; padding-bottom: 90px; }
.testo-libero__titolo { margin-bottom: 36px; }
.prosa { font-size: 16px; line-height: 26px; }
.prosa > * + * { margin-top: 16px; }
.prosa h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 28px; margin-top: 40px; }
.prosa h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 24px; margin-top: 30px; }
.prosa ul { list-style: disc; padding-left: 22px; }
.prosa ol { list-style: decimal; padding-left: 22px; }
.prosa li + li { margin-top: 6px; }
.prosa a { color: var(--blu); text-underline-offset: 3px; }
.prosa table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: 14px; }
.prosa th, .prosa td { padding: 8px 10px; border: 1px solid var(--grigio-linea); text-align: left; }

/* Testata di prodotto -------------------------------------------------------- */

.prodotto-testata { padding-top: 166px; padding-bottom: 0; text-align: center; overflow: hidden; }
/* Nelle testate con l'anello (Startando PRO, La starteria) il fondo è scuro pieno, senza sfumatura né grana. */
.prodotto-testata--anello.sfondo-notte { background: var(--notte); padding-top: 142px; }
.prodotto-testata--anello.sfondo-notte::before { display: none; }
.prodotto-testata--anello .prodotto-testata__logo img { height: 45px; }
.prodotto-testata--anello .prodotto-testata__titolo { margin-top: 75px; }
.prodotto-testata--anello .prodotto-testata__testo { margin-top: 51px; }
.prodotto-testata--anello .azioni { margin-top: 60px; }
/* Nella testata di Startando la sfumatura del Figma è capovolta: viola in alto, scuro da metà in giù. */
.prodotto-testata--gestionale.sfondo-notte { background: linear-gradient(0deg, var(--notte) 46.8%, var(--indaco) 100%); }
.prodotto-testata__titolo { margin-top: 60px; }
.prodotto-testata__logo { display: flex; justify-content: center; }
.prodotto-testata__logo img { height: 36px; width: auto; }
.prodotto-testata__titolo { margin-top: 56px; font-size: 30px; line-height: 1.1333; font-weight: 300; }
.prodotto-testata__testo { max-width: 340px; margin: 44px auto 0; font-size: 16px; line-height: 23px; }
.prodotto-testata__testo strong { font-weight: 700; }
.prodotto-testata .azioni { margin-top: 64px; justify-content: center; }

/*
 * Composizione del gestionale (Startando): sistema di 402 unità a partire dal
 * punto y = 640 del frame, come la testata della home. La schermata esce a
 * destra oltre il bordo, come nel Figma.
 */
.gestionale { container-type: inline-size; width: min(100%, 560px); margin: 60px auto 0; }
.gestionale__scena { --u: calc(min(100vw, 560px) / 402); position: relative; aspect-ratio: 402 / 470; }
@supports (width: 1cqw) { .gestionale__scena { --u: calc(100cqw / 402); } }
.gestionale__scena > * { position: absolute; }
.gestionale__schermata {
  left: calc(116 * var(--u)); top: calc(41 * var(--u)); width: calc(675 * var(--u)); max-width: none; height: auto; z-index: 1;
  border: .5px solid #a4a4a4; border-radius: calc(10 * var(--u)); box-shadow: 0 1px 14px rgba(13, 45, 96, .2);
}
/* Nel file i triangoli stanno dietro la schermata; le etichette davanti. */
.gestionale__triangoli { left: 0; top: calc(127 * var(--u)); width: calc(283 * var(--u)); z-index: 0; }
.gestionale__etichetta { z-index: 2; }
.gestionale__triangoli svg { width: 100%; height: auto; overflow: visible; }
.gestionale__etichetta {
  display: grid; place-items: center; height: calc(36.3 * var(--u)); border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; font-size: calc(16.87 * var(--u)); line-height: 1; white-space: nowrap;
}
.gestionale__etichetta--1 { left: calc(37 * var(--u)); top: calc(142 * var(--u)); width: calc(139.2 * var(--u)); }
.gestionale__etichetta--2 { left: calc(191 * var(--u)); top: calc(261 * var(--u)); width: calc(164.9 * var(--u)); }
.gestionale__etichetta--3 { left: calc(69 * var(--u)); top: calc(409 * var(--u)); width: calc(127.3 * var(--u)); }
.etichetta--giallo { background: var(--giallo); color: #6c5410; }
.etichetta--rosa { background: #ffa2d4; color: #6c3f57; }
.etichetta--verde { background: var(--verde); color: #005230; }
/* La sezione che segue continua lo stesso fondo: la schermata non deve tagliarsi. */
.prodotto-testata--gestionale { padding-bottom: 0; }
.prodotto-testata__anello { display: flex; justify-content: center; margin-top: 60px; }
.prodotto-testata__anello img { width: 162px; filter: drop-shadow(0 0 40px rgba(0, 91, 232, .6)); }

/*
 * Illustrazione della fase «Avvio»: scheda di 336 × 230 unità.
 */
.percorso { container-type: inline-size; position: relative; width: 100%; max-width: 480px; margin-top: 40px; }
.percorso::before { content: ""; display: block; aspect-ratio: 336 / 230.18; }
.percorso > * { position: absolute; }
.percorso { --u: calc(min(100vw - 2 * var(--gutter) - 26px, 480px) / 336); }
@supports (width: 1cqw) { .percorso { --u: calc(100cqw / 336); } }
.percorso__linee { inset: 0; width: 100%; height: 100%; border-radius: calc(17 * var(--u)); }
.percorso__etichetta {
  display: grid; place-items: center; width: calc(73.9 * var(--u)); height: calc(19.3 * var(--u)); border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; font-size: calc(8.96 * var(--u)); line-height: 1; white-space: nowrap;
}
.percorso__etichetta--utenti { left: calc(24.7 * var(--u)); top: calc(42.4 * var(--u)); background: var(--verde); color: #357274; }
.percorso__etichetta--fornitori { left: calc(228.3 * var(--u)); top: calc(39.6 * var(--u)); background: #5595f9; color: #002a6b; }
.percorso__etichetta--clienti { left: calc(19.8 * var(--u)); top: calc(155.4 * var(--u)); background: var(--giallo); color: #6c5410; }
.percorso__etichetta--permessi { left: calc(230.2 * var(--u)); top: calc(166.6 * var(--u)); background: #ffa2d4; color: #6c3f57; }
.percorso__play { left: calc(148.9 * var(--u)); top: calc(98.7 * var(--u)); width: calc(35 * var(--u)); height: calc(32.4 * var(--u)); }
/* Il puntatore: la punta è l'angolo in alto a sinistra dell'SVG, e si muove con translate. */
.percorso__cursore { left: 0; top: 0; z-index: 2; width: calc(15 * var(--u)); height: calc(14 * var(--u)); transform-origin: 0 0; }
.percorso__cursore svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.percorso__etichetta { transform-origin: 50% 50%; }

/* Testo e immagine ------------------------------------------------------------- */

.testo-immagine { padding-top: 120px; padding-bottom: 60px; }
/*
 * Dopo la sezione con la foto (Startando) il Figma non ha uno stacco netto:
 * il chiaro arriva sfumato (sfocatura progressiva sul bordo del rettangolo).
 * Negli altri passaggi scuro/chiaro il bordo è netto.
 */
.testo-immagine:not(.testo-immagine--centrata).sfondo-scuro + .sez.sfondo-chiaro { padding-top: 120px; }
.testo-immagine__corpo { padding-inline: 16px; }
.testo-immagine__titolo { font-size: 30px; line-height: 1.1; }
.testo-immagine__testo { margin-top: 46px; font-size: 16px; line-height: 23px; }
.testo-immagine__testo p + p { margin-top: 23px; }
.testo-immagine__testo strong { font-weight: 700; }
.testo-immagine__foto { margin-top: 52px; border-radius: 17px; overflow: hidden; }
.testo-immagine__foto img { width: 100%; aspect-ratio: 331 / 257; object-fit: cover; }

/* Variante centrata (starteria: «Un incontro può diventare una collaborazione»). */
.testo-immagine--centrata { text-align: center; }
.elenco-scheda + .testo-immagine--centrata { padding-top: 0; }
.testo-immagine--centrata .testo-immagine__corpo { max-width: 320px; margin-inline: auto; padding: 0; }
.testo-immagine--centrata .testo-immagine__titolo { font-size: 30px; line-height: 1.1333; font-weight: 300; }
.testo-immagine--centrata .testo-immagine__testo { max-width: 292px; margin: 50px auto 0; font-weight: 300; }
.testo-immagine--centrata .testo-immagine__foto { max-width: 286px; margin: 60px auto 0; }
.testo-immagine--centrata .testo-immagine__foto img { aspect-ratio: 286 / 256; }

/* Titolo e scheda con elenco (starteria: «Cosa troverai») ------------------- */

.elenco-scheda { padding-top: 40px; padding-bottom: 86px; overflow: visible; z-index: 2; isolation: auto; }
.elenco-scheda .titolo { margin-bottom: 60px; font-weight: 300; line-height: 1.1333; }
.elenco-scheda__scheda { position: relative; z-index: 1; max-width: 336px; margin: 0 auto; }
.elenco-scheda__banda { position: absolute; z-index: 0; max-width: none; pointer-events: none; }
.elenco-scheda__banda--1 { left: -77px; top: 225px; width: 539px; }
.elenco-scheda__banda--2 { left: -86px; top: 392px; width: 552px; }
.elenco-scheda + .sez { z-index: 1; }

/* Fase numerata ---------------------------------------------------------------- */

.fase { position: relative; padding-top: 80px; padding-bottom: 86px; }
.fase__intestazione { margin-bottom: 48px; font-weight: 300; line-height: 1.1333; }
.fase__corpo { padding-inline: 13px; }
.fase__etichetta { display: flex; align-items: center; gap: 13px; font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 21px; color: var(--blu); margin-bottom: 37px; }
.sfondo-scuro .fase__etichetta, .sfondo-notte .fase__etichetta { color: #a1c6ff; }
.fase__numero {
  display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%;
  background: var(--blu); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 12.8px;
}
.fase__titolo { max-width: 280px; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 23px; }
.fase__testo { margin-top: 37px; font-size: 16px; line-height: 21px; font-weight: 300; }
.fase__testo p + p { margin-top: 21px; }
.fase__testo strong { font-weight: 700; }
.fase__contenuto { padding-inline: 13px; }
.fase__scheda { margin-top: 37px; padding: 22px 0 25px 22px; border-radius: 10px; background: #fff; color: var(--testo-scuro); }
.fase__scheda-titolo { padding-right: 22px; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 25px; color: var(--blu); margin-bottom: 22px; }
.fase__elenco li { position: relative; padding: 11px 22px 11px 17px; font-size: 16px; line-height: 23px; font-weight: 300; color: #000; }
.fase__elenco li + li { border-top: 1px solid #c2dbff; }
.fase__elenco li::before {
  content: ""; position: absolute; left: 1px; top: 18px;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--blu);
}
.fase__gruppo-titolo { display: flex; align-items: center; justify-content: flex-start; gap: 17px; margin: 58px 0 19px; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 25px; }
.fase__scheda + .fase__gruppo-titolo { margin-top: 46px; }
.fase__gruppo-titolo + .fase__scheda { padding: 18px 0 18px 27px; }
.fase__gruppo-titolo::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--verde); }
.fase__gruppo-titolo--2::before { background: var(--giallo); }
.fase__gruppo-titolo + .fase__scheda { margin-top: 0; }
/*
 * Fase con voci su foto (Gestione): la foto parte poco sotto la prima voce,
 * sfuma nel fondo scuro verso l'alto e arriva fino in fondo alla sezione,
 * sotto il pulsante. La linea tratteggiata attraversa le voci dal testo al pulsante.
 */
.fase--voci .fase__contenuto { position: relative; isolation: isolate; margin-top: 27px; padding-top: 46px; }
.fase__voci-foto { position: absolute; z-index: -2; left: calc(-1 * var(--gutter) - 13px); right: calc(-1 * var(--gutter) - 13px); top: 79px; bottom: -86px; overflow: hidden; }
.fase__voci-foto img { width: 100%; height: 100%; object-fit: cover; }
.fase__voci-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--notte) 0%, rgba(21, 26, 37, 0) 52%); }
.fase--voci .fase__contenuto::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; bottom: 53px; border-left: 2px dashed var(--blu); }
.fase__voci { display: grid; gap: 30px; }
.fase__voce {
  display: grid; grid-template-columns: 18px 1fr; gap: 32px; align-items: center;
  min-height: 51px; padding: 0 20px 0 29px;
  border: .9px solid var(--blu); border-radius: 9px; background: #ebf3ff; color: var(--blu);
  font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 25px; text-align: left;
}
.fase__voce img { width: 18px; height: 18px; }
.fase--voci .azioni { margin-top: 45px; }
.fase__indicatori { display: grid; gap: 15px; margin-top: 40px; }
.indicatore { display: grid; grid-template-columns: 1fr auto; align-items: start; min-height: 119px; padding: 23px 15px 20px 19px; border-radius: 8px; background: #fff; }
.indicatore__testo { display: block; max-width: 150px; font-size: 16px; line-height: 20.3px; color: #123f85; }
.indicatore__valore { display: block; margin-top: 11px; font-family: var(--font-display); font-weight: 800; font-size: 26.3px; line-height: 1; color: var(--blu); }
.indicatore__icona { display: block; width: 49px; height: 49px; margin-top: -9px; }
.indicatore__icona img { width: 49px; height: 49px; }
/* I triangoli colorati a cavallo fra una fase e la successiva («Group 143»). */
/* La sezione sta sopra la successiva, altrimenti questa coprirebbe la metà bassa dei triangoli. */
.fase--triangoli { z-index: 1; }
/* Il triangolo blu è intero nel file: sul telefono esce di 11 px oltre il bordo, come nel Figma. */
.fase__triangoli { position: absolute; z-index: 3; right: -11px; bottom: -105px; width: 180px; pointer-events: none; }
/* Sul telefono i triangoli sul bordo con Governance non ci vanno (feedback del 05/10). */
@media (max-width: 1023.98px) { .fase__triangoli { display: none; } }
.fase__figura { margin-top: 37px; border-radius: 10px; overflow: hidden; }
.fase .azioni { margin-top: 46px; justify-content: center; }

/* Scheda promozionale scura ------------------------------------------------------ */

.promo { padding-top: 65px; padding-bottom: 81px; }
/* Scheda di Startando PRO: #1E222C che scurisce verso il fondo, con gli anelli e i triangoli del Figma ritagliati dal bordo. */
.promo__scheda {
  position: relative; overflow: hidden; isolation: isolate; max-width: 352px; margin-inline: auto;
  padding: 55px 29px 71px; border-radius: 20px; text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%), #1e222c;
}
.promo__decoro { position: absolute; z-index: -1; width: 227px; max-width: none; pointer-events: none; filter: drop-shadow(0 0 34px rgba(0, 91, 232, .9)); }
.promo__decoro--1 { right: -89px; top: -188px; }
.promo__decoro--2 { left: -89px; bottom: -172px; }
/* Posizioni calcolate sui tracciati (non sui riquadri ruotati del Figma) e
   ancorate al fondo della scheda: le linee arrivano fino ai bordi e restano al
   loro posto anche se il testo si allunga. */
.promo__tri { position: absolute; z-index: -1; max-width: none; pointer-events: none; }
.promo__tri--1 { left: 0; bottom: -63px; width: 174px; }
.promo__tri--2 { right: 0; bottom: 72px; width: 79px; }
.promo__tri--3 { left: 238px; bottom: 0; width: 108px; }
.promo__logo { position: relative; display: flex; justify-content: center; }
.promo__logo img { height: 45px; width: auto; }
.promo__titolo { position: relative; margin-top: 44px; font-size: 25px; line-height: 1.12; font-weight: 300; }
.promo__testo { position: relative; margin-top: 30px; font-size: 16px; line-height: 21px; font-weight: 300; }
.promo__testo p + p { margin-top: 21px; }
.promo__testo strong { font-weight: 700; }
.promo .azioni { position: relative; margin-top: 51px; justify-content: center; }
.promo .btn-pillola--bianca { min-width: 243px; color: var(--testo-scuro); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }

/* Scegli il tuo profilo -------------------------------------------------------------- */

.profili-tab { padding-top: 73px; padding-bottom: 61px; text-align: center; }
.profili-tab__immagine { display: flex; justify-content: center; margin-bottom: 56px; }
.profili-tab__immagine img { width: 162px; filter: drop-shadow(0 0 34px rgba(0, 91, 232, .9)) drop-shadow(0 0 7px rgba(0, 91, 232, .5)); }
.profili-tab__scelte { display: grid; gap: 15px; max-width: 347px; margin: 40px auto 31px; }
.profili-tab__scelta {
  min-height: 59px; padding: 10px 20px; border-radius: 70px;
  border: 1px solid #fff; background: rgba(255, 255, 255, .1); color: #fff;
  font-family: var(--font-display); font-weight: 400; font-size: 19.4px; line-height: 24px;
  transition: background-color .25s ease, border-color .25s ease;
}
.profili-tab__scelta[aria-selected="true"] { background: var(--blu); border-color: var(--blu); font-weight: 700; }
.profili-tab__scelta:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, .18); }
.profili-tab__scheda { max-width: 347px; margin-inline: auto; padding: 27px 27px 46px; border-radius: 10px; background: #fff; color: #000; text-align: left; }
.profili-tab__scheda + .profili-tab__scheda { margin-top: 20px; }
.js .profili-tab__scheda + .profili-tab__scheda { margin-top: 0; }
.profili-tab__scheda.is-entrata { animation: passo-in .35s ease both; }
.profili-tab__titolo { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.0667; }
.profili-tab__titolo strong { font-weight: 700; }
.profili-tab__testo { margin-top: 30px; font-size: 16px; line-height: 21px; }
.profili-tab__testo strong { font-weight: 700; }
.profili-tab__punti { margin-top: 29px; display: grid; gap: 19px; font-size: 13px; line-height: 18px; }
.profili-tab__punti li { position: relative; padding-left: 30px; }
.profili-tab__punti li { padding-left: 31px; }
.profili-tab__punti li::before { content: ""; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--notte); }

/* Griglia di voci con icona ------------------------------------------------------------ */

.voci-icona { padding-top: 61px; padding-bottom: 78px; text-align: center; }
.voci-icona__testo { max-width: 306px; margin: 30px auto 0; font-size: 16px; line-height: 21px; }
.voci-icona__griglia { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 17px; margin-top: 28px; }
.voce-icona {
  display: grid; grid-template-columns: 38px auto; gap: 10px; align-items: center;
  width: calc(50% - 9px); max-width: 166px; padding: 11px 12px;
  border-radius: 6px; background: #fff; color: var(--blu); text-align: left;
  font-size: 17px; line-height: 21px;
}
.voce-icona__icona { display: block; width: 35px; height: 35px; }
.voce-icona__icona img { width: 35px; height: 35px; }

/* Modulo «Avvisami» ------------------------------------------------------------------ */

.avviso { padding-top: 85px; padding-bottom: 65px; overflow: visible; }
/* Fascia #1E222C con i contorni dei triangoli (Startando PRO). */
.avviso.sfondo-grafite { background: url("../img/avviso-triangoli.svg") 50% 0 / 402px auto no-repeat, var(--notte-2); }
.avviso__corpo { position: relative; max-width: 287px; margin-inline: auto; }
/* L'anello scavalca il bordo alto della fascia, a destra del centro. */
.avviso__immagine { position: absolute; z-index: 2; left: calc(50% + 32px); top: -49px; width: 138px; filter: drop-shadow(0 0 34px rgba(0, 91, 232, .9)); pointer-events: none; }
.avviso__titolo { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 22px; }
.avviso__testo { margin-top: 10px; font-size: 15px; line-height: 22px; }
.avviso .modulo { margin-top: 22px; }
.avviso .io-campo { background: var(--chiaro); }
.avviso.sfondo-chiaro .io-campo, .avviso.sfondo-bianco .io-campo { background: #fff; }
.avviso .btn-invio { margin-top: 26px; }
.avviso .io-campo { min-height: 43px; border-radius: 5px; }

/* Barra arcobaleno «work in progress». */
.avviso__barra { height: 29px; margin: 30px auto 36px; max-width: 296px; border-radius: 10px; background: #fff; overflow: hidden; }
.avviso__barra span { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--viola), var(--blu) 30%, var(--rosa) 55%, var(--arancio) 78%, var(--giallo)); }
/* Quando la sezione entra in vista i colori scorrono lungo la barra (il
   riempimento resta fermo) e tornano dove sono ora: il gradiente è steso su
   una larghezza doppia, la seconda metà è la prima rovesciata, e lo sfondo va
   da un capo all'altro e ritorna. */
.js .is-entrato .avviso__barra span {
  background: linear-gradient(90deg, var(--viola), var(--blu) 15%, var(--rosa) 27.5%, var(--arancio) 39%, var(--giallo) 50%,
                                     var(--arancio) 61%, var(--rosa) 72.5%, var(--blu) 85%, var(--viola)) 0 0 / 200% 100%;
  animation: barra-colori 2.2s cubic-bezier(.45, 0, .55, 1) .6s 2 alternate both;
}
@keyframes barra-colori { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .js .is-entrato .avviso__barra span { animation: none; } }
.avviso--centro .avviso__corpo { max-width: 330px; text-align: center; }
.avviso--centro .avviso__barra { max-width: 296px; }
.avviso--centro .avviso__titolo { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1.1333; }
.avviso--centro .avviso__titolo strong { font-weight: 700; }
.avviso--centro .avviso__testo { max-width: 290px; margin-inline: auto; }
.avviso--centro .modulo { text-align: left; }

/* Finestra «Chiedi informazioni» --------------------------------------------------------- */

.info { padding-top: 80px; padding-bottom: 80px; }
.info__scheda { position: relative; max-width: 560px; margin-inline: auto; padding: 40px 28px 34px; border-radius: 12px; background: #fff; color: var(--testo-scuro); }
.info__titolo { font-family: var(--font-display); font-weight: 300; font-size: 28px; line-height: 31px; padding-right: 30px; }
.info__titolo strong { font-weight: 700; }
.info__intro { margin: 14px 0 26px; font-size: 16px; line-height: 22px; }
.info .io-campo { background: var(--chiaro); }
.info .btn-invio { margin-top: 24px; }
/* Con JavaScript diventa una finestra sopra la pagina, chiusa finché un pulsante non la apre. */
.js .info[data-finestra] { position: fixed; inset: 0; z-index: 70; display: grid; place-items: start center; padding: 60px 16px 20px; overflow-y: auto; background: rgba(8, 10, 16, .6); }
.js .info[data-finestra]:not(.is-aperta) { display: none; }
.js .info[data-finestra] .contenitore { padding: 0; }
.js [data-finestra] .info__scheda { width: 100%; animation: scendi .45s cubic-bezier(.42, 0, .58, 1) both; }
.info__chiudi { position: absolute; right: 14px; top: 14px; display: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--notte); color: #fff; }
.js [data-finestra] .info__chiudi { display: grid; }
@keyframes scendi { from { opacity: 0; transform: translateY(-30px); } }

/* ---------------------------------------------- 8. Animazioni del Figma -- */

/*
 * Valori letti con get_motion_context dal file Figma: durate, percentuali dei
 * keyframe e curve sono quelli del design, non approssimazioni. La curva
 * cubic-bezier(.5, 0, .5, 1) è l'«ease in-out» di Figma.
 * Le sezioni con animazioni in loop portano data-vivo: fuori dallo schermo
 * site.js toglie .is-vivo e le animazioni si fermano.
 */

/* Home — ciclo di 10,85 s, avanti e indietro. */
.sogni__sfere { animation: sogni-giro 10.85s linear infinite alternate; }
.sogni__sfera--a { animation: sogni-sfera-a 10.85s linear infinite alternate; }
.sogni__sfera--b { animation: sogni-sfera-b 10.85s linear infinite alternate; }
.sogni__frase--3 { animation: sogni-frase-3 10.85s linear infinite alternate, sogni-frase-3-fuoco 10.85s linear infinite alternate; }
.sogni__frase--4 { animation: sogni-frase-4 10.85s linear infinite alternate; }
.sogni__frase--1 { animation: sogni-frase-1 10.85s linear infinite alternate; }
.sogni__frase--2 { animation: sogni-frase-2 10.85s linear infinite alternate; }

@keyframes sogni-giro {
  0%     { animation-timing-function: cubic-bezier(.5, 0, .5, 1); transform: rotate(0rad); }
  99.98%, 100% { transform: rotate(6.478rad); }
}
@keyframes sogni-sfera-a {
  0%     { animation-timing-function: cubic-bezier(.5, 0, .5, 1); fill: var(--viola); }
  99.98%, 100% { fill: var(--rosa); }
}
@keyframes sogni-sfera-b {
  0%     { animation-timing-function: cubic-bezier(.5, 0, .5, 1); fill: var(--verde); }
  99.98%, 100% { fill: var(--giallo); }
}
/* «sogno di creare la mia impresa»: compare dalla sfocatura. */
@keyframes sogni-frase-3 {
  0%      { animation-timing-function: cubic-bezier(.5, 0, .5, 1); color: rgba(255, 255, 255, 0); }
  16.81%  { animation-timing-function: step-end; color: #fff; }
  31.513% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); color: #fff; }
  58.995%, 100% { color: rgba(255, 255, 255, 0); }
}
@keyframes sogni-frase-3-fuoco {
  0%      { animation-timing-function: cubic-bezier(.5, 0, .5, 1); filter: blur(10px); }
  18.216%, 100% { filter: blur(0); }
}
/* «il mio business ha smesso di crescere» */
@keyframes sogni-frase-4 {
  0%      { animation-timing-function: step-end; color: rgba(255, 255, 255, 0); }
  48.593% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); color: rgba(255, 255, 255, 0); }
  67.357% { animation-timing-function: step-end; color: #fff; }
  81.876% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); color: #fff; }
  97.143%, 100% { color: rgba(255, 255, 255, 0); }
}
/* «voglio espandere la mia attività» */
@keyframes sogni-frase-1 {
  0%      { animation-timing-function: step-end; color: rgba(255, 255, 255, 0); }
  18.216% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); color: rgba(255, 255, 255, 0); }
  35.236% { animation-timing-function: step-end; color: #fff; }
  47.414% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); color: #fff; }
  62.511%, 100% { color: rgba(255, 255, 255, 0); }
}
/* «ho un'idea ma non so se può funzionare» */
@keyframes sogni-frase-2 {
  0%      { animation-timing-function: step-end; color: rgba(255, 255, 255, 0); }
  38.245% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); color: rgba(255, 255, 255, 0); }
  53.709% { animation-timing-function: step-end; color: #fff; }
  67.357% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); color: #fff; }
  87.918%, 100% { color: rgba(255, 255, 255, 0); }
}

/* Stella delle storie: ruota sullo stesso ciclo della testata. */
.storia__stella { animation: stella-giro 10.85s linear infinite alternate; }
@keyframes stella-giro {
  0%     { animation-timing-function: cubic-bezier(.5, 0, .5, 1); transform: rotate(0rad); }
  99.29%, 100% { transform: rotate(5.246rad); }
}

/*
 * Come funziona — orbite in senso antiorario, con i tempi del Figma: ciclo di
 * 20 s con accelerazione e frenata (il grafico le vuole così; per un periodo
 * erano state rese costanti e lente).
 */
.orbite__anello--a, .orbite__anello--c { animation: orbita-doppia 20s cubic-bezier(.5, 0, .5, 1) infinite; }
.orbite__anello--b { animation: orbita 20s cubic-bezier(.5, 0, .5, 1) infinite; }
.orbite__anello--d { animation: orbita 20s ease-in-out infinite; }
/* Le icone hanno la loro curva nel file: la tabella di valori diventa linear(). */
.orbite__anello--icone, .orbite__anello--icone > .orbite__icona {
  animation-duration: 20s; animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.45, 0, .55, 1);
  animation-timing-function: linear(0, .0008 2.5%, .0035 5%, .008 7.5%, .0145 10%, .0232 12.5%, .0342 15%, .0477 17.5%, .0639 20%, .0829 22.5%, .1049 25%, .1301 27.5%, .1585 30%, .1903 32.5%, .2256 35%, .2642 37.5%, .306 40%, .3506 42.5%, .3975 45%, .4462 47.5%, .4958 50%, .5455 52.5%, .5944 55%, .6417 57.5%, .6868 60%, .729 62.5%, .7682 65%, .804 67.5%, .8364 70%, .8654 72.5%, .8911 75%, .9136 77.5%, .9331 80%, .9497 82.5%, .9637 85%, .9751 87.5%, .9842 90%, .9911 92.5%, .9959 95%, .9988 97.5%, 1);
}
.orbite__anello--icone { animation-name: orbita; }
/* Le icone restano dritte: girano al contrario del loro anello, con la stessa curva. */
.orbite__anello--icone > .orbite__icona { animation-name: orbita-contro; }
@keyframes orbita { to { transform: rotate(-360deg); } }
@keyframes orbita-doppia { to { transform: rotate(-720deg); } }
@keyframes orbita-contro { to { rotate: 360deg; } }

/* Lista dei sogni — tre fumetti in successione, ciclo di 7,84 s. */
.fumetto:nth-child(1) { animation: fumetto-1 7.839s linear infinite; }
.fumetto:nth-child(2) { animation: fumetto-2 7.839s linear infinite; }
.fumetto:nth-child(3) { animation: fumetto-3 7.839s linear infinite; }
@keyframes fumetto-1 {
  0%      { animation-timing-function: ease-out; opacity: 0; transform: translateY(50px); }
  20.464% { opacity: 1; transform: none; }
  27.004% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); opacity: 1; }
  36.534%, 100% { opacity: 0; transform: none; }
}
@keyframes fumetto-2 {
  0%, 29.55% { animation-timing-function: ease-out; opacity: 0; transform: translateY(50px); }
  57.548% { opacity: 1; transform: none; }
  61.546% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); opacity: 1; }
  71.63%, 100% { opacity: 0; transform: none; }
}
@keyframes fumetto-3 {
  0%, 63.396% { animation-timing-function: ease-out; opacity: 0; transform: translateY(50px); }
  91.395%, 100% { opacity: 1; transform: none; }
}

/* Startando — ciclo di 9,04 s avanti e indietro (valori del frame «iPhone 16 & 17 Pro - 8»). */
.triangoli__ruota { transform-box: fill-box; transform-origin: 50% 50%; animation: triangolo-giro 9.043s ease-out infinite alternate; }
@keyframes triangolo-giro { to { transform: rotate(180deg); } }

/* I tre contorni pulsano uno dopo l'altro; ognuno ha il suo punto d'origine. */
.percorso__contorno { transform-box: fill-box; animation: 9.043s linear infinite alternate; }
.percorso__contorno--interno { transform-origin: 0% 50%; animation-name: contorno-interno; }
.percorso__contorno--medio { transform-origin: 37.983% 47.467%; translate: -2.703px -.212px; animation-name: contorno-medio; }
.percorso__contorno--esterno { transform-origin: 37.726% 46.924%; animation-name: contorno-esterno; }
@keyframes contorno-interno {
  0%, 13.741% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); scale: 1; translate: 0 0; }
  26.933%, 38.146% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); scale: 1.08; translate: -3.021px .87px; }
  56.9%, 100% { scale: 1; translate: 0 0; }
}
@keyframes contorno-medio {
  0%, 18.466% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); scale: 1; translate: -2.703px -.212px; }
  31.658%, 42.871% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); scale: 1.08; translate: -5.723px .658px; }
  61.625%, 100% { scale: 1; translate: -2.703px -.212px; }
}
@keyframes contorno-esterno {
  0%, 26.933% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); scale: 1; translate: 0 0; }
  40.126%, 51.338% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); scale: 1.08; translate: -3.021px .87px; }
  70.093%, 100% { scale: 1; translate: 0 0; }
}
/*
 * Il puntatore «clicca» le quattro etichette in giro: Fornitori, Utenti,
 * Permessi, Clienti (l'ordine del Figma). A ogni arrivo si ferma, preme
 * (si rimpicciolisce un attimo) e l'etichetta sotto risponde. Nel Figma
 * arrivava sul bordo delle etichette ruotando: qui la punta va al loro centro.
 * Coordinate della punta, in unità della scheda (336 × 230).
 */
.percorso__cursore { animation: cursore-giro-etichette 10s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes cursore-giro-etichette {
  0%, 10%   { translate: calc(271 * var(--u)) calc(51 * var(--u)); scale: 1; }
  4%        { translate: calc(271 * var(--u)) calc(51 * var(--u)); scale: .82; }
  25%, 35%  { translate: calc(67 * var(--u)) calc(54 * var(--u)); scale: 1; }
  29%       { translate: calc(67 * var(--u)) calc(54 * var(--u)); scale: .82; }
  50%, 60%  { translate: calc(273 * var(--u)) calc(178 * var(--u)); scale: 1; }
  54%       { translate: calc(273 * var(--u)) calc(178 * var(--u)); scale: .82; }
  75%, 85%  { translate: calc(62 * var(--u)) calc(167 * var(--u)); scale: 1; }
  79%       { translate: calc(62 * var(--u)) calc(167 * var(--u)); scale: .82; }
  100%      { translate: calc(271 * var(--u)) calc(51 * var(--u)); scale: 1; }
}
.percorso__etichetta { animation: etichetta-clic 10s ease-out infinite; }
.percorso__etichetta--fornitori { animation-delay: .1s; }
.percorso__etichetta--utenti { animation-delay: 2.6s; }
.percorso__etichetta--permessi { animation-delay: 5.1s; }
.percorso__etichetta--clienti { animation-delay: 7.6s; }
@keyframes etichetta-clic {
  0%   { scale: 1; filter: none; }
  3%   { scale: .9; filter: brightness(1.12); }
  8%   { scale: 1; filter: none; }
  100% { scale: 1; filter: none; }
}

/* Fuori dalla vista le animazioni in loop si fermano. */
.js [data-vivo]:not(.is-vivo), .js [data-vivo]:not(.is-vivo) * { animation-play-state: paused !important; }

/* ------------------------------------------ 9. Comparsa allo scorrimento -- */

/*
 * Aggiunta concordata con il cliente: il Figma non la prevede. Un'entrata
 * leggera e uguale ovunque — dissolvenza e 24 px di salita — sugli elementi
 * marcati data-entra. Senza JavaScript (niente classe .js) tutto è visibile.
 */
.js [data-entra] {
  opacity: 0; transform: translateY(32px);
  /* Più lente e più distanziate fra un elemento e l'altro (feedback del grafico):
     i ritardi scritti nei blocchi (0,08 s a elemento) diventano 0,24 s. */
  transition: opacity 1.2s cubic-bezier(.2, .7, .2, 1), transform 1.2s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--ritardo, 0s) * 3);
}
.js [data-entra].is-entrato { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .js [data-entra] { opacity: 1; transform: none; }
  /* La timeline compare già costruita, senza attese. */
  .js [data-timeline] :is(.passo, .passi__azioni, .passo__numero, .passi__linea) { animation: none !important; opacity: 1; transform: none; scale: 1; }
  /* Le frasi della testata restano tutte leggibili, ferme. */
  .sogni__frase { color: #fff !important; filter: none !important; }
  .fumetti { height: auto; }
  .fumetto { position: relative; opacity: 1 !important; transform: none !important; margin-bottom: 20px; }
  .competenze__nastro { flex-wrap: wrap; width: auto; justify-content: center; padding-inline: 20px; transform: none !important; }
}

/* Pagina Contatti ---------------------------------------------------------- */
/* Tavola 48:2 del Figma: fondo notte pieno, testata centrata, pannello chiaro
   a 14 px dai bordi con il modulo e il riquadro dei social. */

/* Il filo da 0,5 px del Figma: a densità normale un mezzo pixel pieno diventa
   un pixel intero e troppo scuro, un pixel al 50% gli somiglia su ogni schermo. */
.contatti { --bordo-contatti: rgba(0, 91, 232, .5); padding-top: 157px; padding-bottom: 23px; background: var(--notte); color: #fff; }
.contatti__testata { text-align: center; }
.contatti__titolo { max-width: 307px; margin-inline: auto; font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 34px; }
.contatti__titolo strong { font-weight: 700; }
.contatti__testo { max-width: 296px; margin: 50px auto 0; font-family: var(--font-display); font-weight: 300; font-size: 16px; line-height: 23px; }
.contatti__testo strong { font-weight: 700; }
.contatti__testo p + p { margin-top: 23px; }

.contatti__pannello { max-width: 720px; margin: 74px 14px 0; padding: 54px 24px 42px; border-radius: 15px; background: var(--chiaro); color: #000; }
.contatti__modulo-titolo { padding-inline: 14px; margin-bottom: 27px; font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 34px; color: var(--notte); }
.contatti__modulo-titolo strong { font-weight: 700; color: var(--viola); }

/* Etichette alte 34 px con il testo allineato a quello dei campi (21 px). */
:is(.contatti, .info) .io-griglia-campi { grid-template-columns: 132fr 185fr; column-gap: 9px; row-gap: 9px; }
:is(.contatti, .info) .io-cella-piena { grid-column: 1 / -1; }
:is(.contatti, .info) .io-cella { min-width: 0; }
:is(.contatti, .info) .io-etichetta { margin: 0; padding-left: 21px; font-weight: 300; font-size: 13px; line-height: 34px; color: #000; }
:is(.contatti, .info) .io-opzionale { color: rgba(0, 0, 0, .45); }
:is(.contatti, .info) .io-campo {
  min-height: 45px; padding: 0 21px; border: 1px solid var(--bordo-contatti); border-radius: 10px;
  background: #fff; color: #000; font-weight: 300; font-size: 16px; line-height: 20px;
}
.contatti textarea.io-campo { height: 97px; min-height: 97px; padding: 12px 21px; line-height: 22px; }
:is(.contatti, .info) .io-campo::placeholder { color: #000; opacity: .85; }

/* «Sto scrivendo per:»: etichetta in grassetto e schede con il pallino. */
:is(.contatti, .info) .io-tipo-scelta_singola { margin-top: 8px; }
:is(.contatti, .info) .io-tipo-scelta_singola > .io-etichetta { margin-bottom: 11px; font-weight: 700; }
:is(.contatti, .info) .io-tipo-scelta_singola > .io-etichetta::after { content: ":"; }
:is(.contatti, .info) .io-scelte { gap: 9px; }
:is(.contatti, .info) .io-scelta span {
  position: relative; display: flex; align-items: center; min-height: 45px; padding: 6px 16px 6px 49px;
  border: 1px solid var(--bordo-contatti); border-radius: 10px; background: #fff; color: #000;
  font-weight: 300; font-size: 16px; line-height: 20px;
}
:is(.contatti, .info) .io-scelta span::before {
  content: ""; position: absolute; left: 19px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 1px solid var(--blu); border-radius: 50%; box-sizing: border-box;
}
:is(.contatti, .info) .io-scelta span::after {
  content: ""; position: absolute; left: 22px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: var(--blu); transform: scale(0); transition: transform .2s ease;
}
:is(.contatti, .info) .io-scelta input:checked + span { background: #fff; border-color: var(--bordo-contatti); color: #000; }
:is(.contatti, .info) .io-scelta input:checked + span::after { transform: scale(1); }
:is(.contatti, .info) .io-scelta:hover span { border-color: var(--blu); }
:is(.contatti, .info) .io-tipo-testo_lungo { margin-top: 12px; }
:is(.contatti, .info) .io-tipo-testo_lungo > .io-etichetta { margin-bottom: 12px; }

/* Caselle: quadrati bianchi 20 px, angoli 4, bordo blu sottile. */
:is(.contatti, .info) .io-tipo-consenso { margin-top: 12px; }
:is(.contatti, .info) .io-tipo-consenso + .io-tipo-consenso { margin-top: 7px; }
:is(.contatti, .info) .io-consenso { align-items: center; gap: 15px; margin: 0 0 0 -1px; font-weight: 300; font-size: 13px; line-height: 18px; color: #000; }
:is(.contatti, .info) .io-consenso input {
  appearance: none; -webkit-appearance: none; display: grid; place-content: center;
  width: 20px; height: 20px; margin: 0; border: 1px solid var(--bordo-contatti); border-radius: 4px; background: #fff; cursor: pointer;
}
:is(.contatti, .info) .io-consenso input::before {
  content: ""; width: 10px; height: 5px; border-left: 2px solid var(--blu); border-bottom: 2px solid var(--blu);
  transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .15s ease;
}
:is(.contatti, .info) .io-consenso input:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
:is(.contatti, .info) .io-consenso input:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 2px; }
:is(.contatti, .info) .io-consenso a { color: var(--blu); text-decoration: none; }
:is(.contatti, .info) .io-consenso a:hover { text-decoration: underline; }
:is(.contatti, .info) .io-consenso strong { font-weight: 700; }
:is(.contatti, .info) .io-consenso__testo { max-width: 257px; }

.contatti__invio, .info .btn-invio { display: flex; width: 100%; margin-top: 26px; }
.contatti__invio .btn-invio__testo, .info .btn-invio__testo { flex: 1; min-width: 0; font-size: 15px; }

/* La finestra «Chiedi informazioni» ha lo stesso modulo della pagina Contatti:
   pannello chiaro, campi bianchi con il filo blu, titolo come quello del modulo. */
.info__scheda { --bordo-contatti: rgba(0, 91, 232, .5); background: var(--chiaro); color: #000; }
.info .info__titolo { font-size: 30px; line-height: 34px; color: var(--notte); }
.info .info__titolo strong { color: var(--viola); }

.contatti__social { margin: 63px -1px 0; padding: 30px 20px 38px; border-radius: 14px; background: #fff; color: #1e222c; text-align: center; }
.contatti__social-titolo { max-width: 307px; margin-inline: auto; font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 34px; }
.contatti__social-titolo strong { font-weight: 700; }
.contatti__reti { display: flex; justify-content: center; gap: 26px; margin: 27px 0 0; padding: 0; list-style: none; }
.contatti__reti a { display: grid; place-items: center; width: 54px; height: 54px; color: var(--blu); transition: color .2s ease, transform .2s ease; }
.contatti__reti a:hover { color: var(--viola); transform: translateY(-2px); }

@media (min-width: 768px) {
  .contatti { padding-top: 190px; }
  .contatti__titolo { max-width: 620px; font-size: 46px; line-height: 50px; }
  .contatti__testo { max-width: 540px; font-size: 18px; line-height: 27px; }
  .contatti__pannello { margin: 90px auto 0; padding: 64px 56px 56px; }
  .contatti__modulo-titolo { padding-inline: 21px; font-size: 40px; line-height: 44px; }
  .contatti .io-griglia-campi { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .contatti__invio { width: auto; }
  .contatti__invio .btn-invio__testo { flex: none; min-width: 280px; }
  .contatti__social { margin-inline: 0; }
}

/* ============================================================ Desktop ==== */

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}
/* Sui computer i margini laterali crescono con lo schermo: 60 px a 1024,
   circa 100 a 1280, 120 da 1366 in su (da 1440 px non cambia nulla). Sotto,
   il contenuto non arriva più quasi a toccare i bordi. */
@media (min-width: 1024px) {
  :root { --gutter: clamp(40px, 16vw - 104px, 120px); }
}
@media (min-width: 768px) {
  .sez { padding-block: 96px; }
  .titolo { font-size: 40px; }
  .titolo--grande { font-size: 46px; }

  .profili__schede { grid-template-columns: repeat(2, 1fr); }
  /* Su due colonne la scheda dispari in fondo va al centro, non da sola a sinistra. */
  :is(.profili__schede, .vantaggi__voci, .ecosistema__schede) > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 15px); }
  .vantaggi__voci { grid-template-columns: repeat(2, 1fr); }
  .ecosistema__schede { grid-template-columns: repeat(2, 1fr); }
  .storie__binario { padding-inline: max(var(--gutter), calc((100vw - var(--larghezza)) / 2)); }
  .storia:first-child { scroll-margin-left: max(var(--gutter), calc((100vw - var(--larghezza)) / 2)); }
  .storia { flex-basis: 340px; }
  .garanzie__voci { max-width: 640px; }
  .voce-icona { width: auto; }
  .fase__indicatori { grid-template-columns: repeat(3, 1fr); }
  .capitolo__titolo { font-size: 48px; }
  .capitolo__testo { max-width: 460px; font-size: 18px; line-height: 27px; }
}

@media (min-width: 1024px) {
  .testata__barra { height: 96px; padding-inline: var(--gutter); }
  .testata__logo-img { width: 118px; }
  .testata__apri { display: none; }
  .testata__nav { display: flex; align-items: center; gap: 30px; }
  .testata__voce { position: relative; font-size: 15px; font-weight: 500; text-decoration: none; opacity: .88; transition: opacity .2s ease; }
  .testata__voce::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--arcobaleno); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
  .testata__voce:hover, .testata__voce[aria-current="page"] { opacity: 1; }
  .testata__voce:hover::after, .testata__voce[aria-current="page"]::after { transform: scaleX(1); }
  .testata__cta { display: inline-flex; align-items: center; min-height: 42px; padding: 0 24px; border-radius: 999px; background: var(--sfumatura-contatti); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; text-decoration: none; transition: filter .2s ease; }
  .testata__cta:hover { filter: brightness(1.12); }
  .menu-mobile { display: none !important; }

  .sez { padding-block: 120px; }
  .titolo { font-size: 48px; }
  .titolo--grande { font-size: 56px; }

  /* Testata della home: la scena a sinistra, titolo e pulsante a destra. */
  .sogni { padding-top: 110px; }
  /*
   * Le linee a V attraversano testata e sezione successiva come un solo
   * disegno: stessa scala (1,1 volte il Figma) e stessa x in entrambe, e la
   * sezione sotto lo riprende 870 px più giù, cioè dove la testata finisce.
   * Per questo qui l'altezza è fissa: 110 + 760 = 870 px.
   */
  .sogni { height: 870px; background-size: 442px auto, auto; background-position: calc(50% - 220px) 0, 0 0; }
  .sogni__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; height: 760px; }
  .sogni__contenitore { width: min(100%, 620px); justify-self: end; }
  .sogni__scena { margin-top: 0; }
  .sogni__testo { justify-items: start; text-align: left; padding: 0 0 40px; }
  .sogni__titolo { font-size: 52px; white-space: nowrap; }
  .sogni__testo { gap: 32px; }

  .sez.profili { padding-bottom: 260px; }
  .sez.profili::before { background-size: 442px auto; background-position: calc(50% - 220px) -870px; }
  .profili__titolo { margin-bottom: 96px; }
  .profili__schede { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  :is(.profili__schede, .vantaggi__voci, .ecosistema__schede) > :last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
  .profili__scheda { padding: 44px 36px; }
  /* Schede dritte e alla stessa altezza, non sfalsate (feedback del grafico). */

  .vantaggi__titolo { margin-bottom: 80px; }
  .vantaggi__voci { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .vantaggi__azioni { margin-top: 72px; }
  .vantaggi__voce { grid-template-columns: 1fr; align-items: start; gap: 26px; padding: 36px 32px; }
  .vantaggi__alone { left: 32px; top: 36px; margin-top: 0; }

  /* Su desktop sempre tre storie affiancate, qualunque sia il loro numero:
     le altre si raggiungono scorrendo (frecce, pallini, trackpad). Niente zoom. */
  .storie { padding-top: 120px; padding-bottom: 240px; }
  .storie__carosello { position: relative; width: min(calc(3 * 340px + 2 * 32px), 100% - 2 * var(--gutter) - 2 * 64px); margin: 80px auto 0; }
  .storie__binario { gap: 32px; align-items: stretch; margin-top: 0; padding: 0 0 30px; scroll-snap-type: x mandatory; }
  .storia { flex: 0 0 calc((100% - 2 * 32px) / 3); min-width: 0; max-width: none; scale: 1 !important; scroll-snap-align: start; }
  .storia:first-child { margin-left: 0; scroll-margin-left: 0; }
  .storia:last-child { margin-right: 0; }
  .storie__chiusura { margin-top: 96px; }
  .storie__chiusura .azioni { margin-top: 36px; }
  .storie__sottotitolo { font-size: 20px; line-height: 26px; }

  .ecosistema { padding-top: 120px; }
  .ecosistema__titolo { margin-bottom: 80px; }
  .ecosistema__schede { grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: stretch; }
  /* Stessa altezza e stessi allineamenti nelle tre schede: il logo in una
     fascia di altezza fissa, il testo al centro, il pulsante sempre in fondo. */
  .ecosistema__schede .prodotto { grid-template-rows: 70px 1fr auto; align-content: stretch; }
  .ecosistema__schede .prodotto__logo { align-self: center; margin-bottom: 20px; }
  .ecosistema__schede .prodotto__testo { align-self: start; }
  .ecosistema__schede .prodotto > :last-child { align-self: end; }

  .capitolo { padding: 140px 0; }
  /* Centrata: su schermo largo una colonna a sinistra lasciava metà sezione vuota. */
  .capitolo__corpo { padding-inline: 0; max-width: 820px; margin-inline: auto; text-align: center; }
  .capitolo__titolo .t-sottolineato { padding-bottom: 8px; background-size: 100% 5px; }
  .capitolo__testo { max-width: 560px; margin-inline: auto; margin-top: 48px; }
  .capitolo__corpo .azioni { justify-content: center; margin-top: 56px; }
  .capitolo__titolo { font-size: 64px; }

  .piede__corpo { display: grid; grid-template-columns: 1fr auto 380px; align-items: start; gap: 60px; padding-top: 80px; }
  .piede__marchio { justify-content: flex-start; }
  .piede__menu { margin: 0; max-width: none; padding: 0; gap: 60px; }
  .piede__newsletter { margin: 0; max-width: none; }
  .piede__legale { grid-column: 1 / -1; margin-top: 20px; justify-content: space-between; }
  /* A tutta larghezza come su mobile: rientrata lasciava due strisce viola ai lati. */
  .piede__foto img { aspect-ratio: 1440 / 480; max-height: 560px; object-position: 50% 22%; }

  .orbite-testata { padding-top: 180px; }
  .orbite-testata__titolo { font-size: 44px; }
  .orbite-testata { min-height: 820px; }
  .orbite-testata__corpo { max-width: 560px; }

  /* Su desktop la timeline è orizzontale: le linee crescono da sinistra a destra. */
  .passi__elenco { flex-direction: row; align-items: stretch; max-width: none; }
  .passo { flex: 1 1 0; }
  .passi__linea, .passi__linea--sinistra, .passi__linea--destra { flex: none; align-self: center; width: 40px; height: 4px; margin: 0 -7px; transform-origin: 0 50%; }
  /* Anche nello stile grigio (Startando PRO) il tratto fra le schede è una linea, come in Come funziona. */
  .passi--grigio .passi__linea { height: 4px; }
  .js [data-timeline] .passi__linea { transform: scaleX(0); }

  .competenze__scheda { max-width: 900px; margin-inline: auto; padding-block: 80px; }
  .competenze__testo { max-width: 600px; margin-inline: auto; }

  .garanzie__voci { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: none; }
  .garanzia, .garanzia:first-child { padding: 0; grid-template-columns: 1fr; justify-items: center; gap: 24px; text-align: center; }
  .garanzia__scudo { margin: -3px -9px -6px -9px; }
  .garanzia + .garanzia { border-top: 0; }

  /* Testata su due colonne: titolo e testi a sinistra, fumetti a destra e più grandi. */
  .citazioni-testata { padding-top: 190px; text-align: left; }
  .citazioni-testata .contenitore {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: center;
    grid-template-areas: "titolo fumetti" "testo fumetti" "frase fumetti";
  }
  .citazioni-testata__titolo { grid-area: titolo; font-size: 48px; }
  .fumetti { grid-area: fumetti; justify-self: center; width: 313px; margin: 0; transform: scale(1.35); }
  .citazioni-testata__testo { grid-area: testo; max-width: 460px; margin: 36px 0 0; font-size: 18px; line-height: 27px; }
  .citazioni-testata__frase { grid-area: frase; max-width: 460px; margin: 32px 0 0; font-size: 22px; line-height: 27px; }
  .sogni-modulo { padding-top: 110px; padding-bottom: 160px; }
  .sogni-modulo__scheda { max-width: 480px; padding: 48px 44px 32px; }
  .testo-centro__corpo { max-width: 600px; margin-top: 48px; font-size: 18px; line-height: 27px; }

  .prodotto-testata { padding-top: 180px; }
  .prodotto-testata__titolo { font-size: 52px; }
  .prodotto-testata__testo { max-width: 560px; font-size: 18px; line-height: 27px; }
  /* Testata di Startando: testo a sinistra, schermata a destra che esce dal bordo. */
  .prodotto-testata--gestionale {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; column-gap: 40px;
    padding-inline: max(var(--gutter), calc((100% - var(--larghezza)) / 2)); padding-bottom: 60px;
  }
  .prodotto-testata--gestionale .contenitore { padding: 0; text-align: left; }
  .prodotto-testata--gestionale .prodotto-testata__logo { justify-content: flex-start; }
  .prodotto-testata--gestionale .prodotto-testata__testo { margin-inline: 0; }
  .prodotto-testata--gestionale .azioni { justify-content: flex-start; }
  .gestionale { width: 100%; max-width: 620px; margin: 0; }

  .testo-immagine .contenitore { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .testo-immagine__foto { margin-top: 0; }
  .testo-immagine--centrata .contenitore { display: block; }
  /* Le bande attraversano tutta la larghezza: si allungano (stessa altezza del Figma), non si ingrandiscono. */
  .elenco-scheda__banda--1 { left: -19%; width: 134%; height: 196px; }
  .elenco-scheda__banda--2 { left: -21%; width: 137%; height: 304px; }
  .elenco-scheda__scheda { max-width: 480px; }
  .testo-immagine--centrata .testo-immagine__testo { max-width: 460px; font-size: 18px; line-height: 27px; }
  .testo-immagine--centrata .testo-immagine__foto { max-width: 420px; }
  .testo-immagine--centrata .testo-immagine__foto { margin-top: 60px; }
  .testo-immagine__titolo { font-size: 44px; }

  .fase .contenitore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 80px; }
  .fase__intestazione { grid-column: 1 / -1; }
  .fase__contenuto { align-self: start; }
  /* Il testo della fase resta fermo mentre a destra scorre il contenuto. */
  .fase__corpo { position: sticky; top: 140px; align-self: start; }
  .fase__corpo .fase__titolo { max-width: 420px; font-size: 26px; line-height: 1.2; }
  .fase__testo { font-size: 18px; line-height: 27px; }
  .fase--voci .fase__contenuto { margin-top: 0; }
  .fase__voci-foto { left: -48px; right: -48px; top: 0; bottom: -48px; border-radius: 20px; }
  .fase__indicatori { grid-template-columns: 1fr; }

  .promo__scheda { max-width: 900px; padding: 80px 60px; }
  .promo__titolo { font-size: 36px; }
  .promo__testo { max-width: 560px; margin-inline: auto; }

  .profili-tab__scelte { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
  .profili-tab__scheda { max-width: 720px; padding: 48px 56px; }

  .voci-icona__griglia { max-width: 900px; margin-inline: auto; }
  .avviso__corpo { max-width: 520px; }
}

@media (min-width: 1440px) {
  .sogni__titolo { font-size: 72px; }
}

/* Chiusura desktop con la foto a destra (tavola 65:4 del Figma): fondo notte
   pieno, gruppo largo 1301 px, testo 393 px, foto 761 × 371 con angoli 15. */
@media (min-width: 1024px) {
  .capitolo.capitolo--con-foto { padding: 156px 0; }
  .capitolo--con-foto .capitolo__griglia { display: grid; grid-template-columns: 393fr 761fr; column-gap: 147px; align-items: center; max-width: calc(1301px + 2 * var(--gutter)); }
  .capitolo--con-foto .capitolo__corpo { max-width: none; margin: 0; text-align: left; }
  .capitolo--con-foto .capitolo__sopra { font-size: 20px; line-height: 26px; color: #bbd7ff; margin-bottom: 16px; }
  .capitolo--con-foto .capitolo__sopra strong { color: #bbd7ff; }
  /* 32 px: a 35 nella colonna dei computer più piccoli andava su tre righe. */
  .capitolo--con-foto .capitolo__titolo { font-size: 32px; line-height: 34px; color: #eef5ff; }
  .capitolo--con-foto .capitolo__titolo br { display: none; }
  .capitolo--con-foto .capitolo__titolo .t-sottolineato { padding-bottom: 6px; }
  .capitolo--con-foto .capitolo__testo { max-width: 393px; margin: 30px 0 0; font-size: 17px; line-height: 26px; color: #eef5ff; }
  .capitolo--con-foto .capitolo__corpo .azioni { justify-content: flex-start; margin-top: 47px; }
  .capitolo__foto { display: block; overflow: hidden; border-radius: 15px; }
  .capitolo__foto img { display: block; width: 100%; aspect-ratio: 761 / 371; object-fit: cover; }
  .piede__foto--solo-mobile { display: none; }
}

/* Sugli schermi larghi il cielo stellato usa la foto in alta risoluzione
   (2400 px): quella da 1200 allargata a tutto schermo si vedeva sgranata. */
@media (min-width: 1024px) {
  .sfondo-stellato { background-image: url("../img/cielo-2400.webp"); }
  /* Sui desktop retina la foto intera (2674 px, la massima disponibile). */
  .sfondo-stellato { background-image: -webkit-image-set(url("../img/cielo-2400.webp") 1x, url("../img/cielo-2674.webp") 2x); background-image: image-set(url("../img/cielo-2400.webp") 1x, url("../img/cielo-2674.webp") 2x); }
}

/*
 * Testata di Come funziona su desktop (tavola 65:27, larga 1728): testo a
 * 176 px dal bordo, sistema di anelli del mobile ingrandito 1,459 volte con il
 * centro 48 px dentro il bordo destro e 244 px sopra la sezione. Tutto è in
 * proporzione alla larghezza dello schermo (--fx è un pixel del Figma): su
 * uno schermo più stretto la composizione resta quella del file, in scala,
 * invece di avere anelli enormi sopra un testo schiacciato a sinistra.
 * I testi hanno un minimo di leggibilità; la larghezza delle righe li segue.
 */
@media (min-width: 1024px) {
  .orbite-testata { --fx: min(1px, 100vw / 1728); display: flex; align-items: center; min-height: calc(877 * var(--fx)); padding: 136px 0 40px; }
  /* Le icone svaniscono prima di passare sotto il menu. */
  .orbite-testata::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 170px; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--notte) 55px, transparent);
  }
  .orbite-testata .contenitore { width: 100%; max-width: none; margin: 0; padding: 0 0 0 calc(176 * var(--fx)); }
  .orbite {
    left: calc(100% - 48 * var(--fx) - 40.4px); top: calc(-244 * var(--fx) - 167.4px); width: 402px; height: 932px; overflow: visible;
    transform-origin: 40.4px 167.4px; scale: .8646;
  }
  .orbite-testata__corpo { max-width: max(335px, calc(493 * var(--fx))); padding-inline: 0; }
  .orbite-testata__titolo { font-size: max(30px, calc(45 * var(--fx))); line-height: max(27px, calc(36.8 * var(--fx))); }
  .orbite-testata__titolo strong { font-weight: 600; }
  .orbite-testata__titolo + .orbite-testata__titolo { margin-top: max(27px, calc(36.8 * var(--fx))); }
  .orbite-testata__testo {
    max-width: max(360px, calc(447 * var(--fx))); margin-top: max(36px, calc(53 * var(--fx)));
    font-size: max(16px, calc(20 * var(--fx))); line-height: max(28px, calc(36.8 * var(--fx)));
  }
  .orbite-testata__testo p + p { margin-top: max(28px, calc(36.8 * var(--fx))); }
}
/* La scala degli anelli è un numero: si aggiorna a gradini (1,459 × larghezza / 1728). */
@media (min-width: 1152px) { .orbite { scale: .9727; } }
@media (min-width: 1280px) { .orbite { scale: 1.0807; } }
@media (min-width: 1366px) { .orbite { scale: 1.1534; } }
@media (min-width: 1440px) { .orbite { scale: 1.2158; } }
@media (min-width: 1536px) { .orbite { scale: 1.2969; } }
@media (min-width: 1600px) { .orbite { scale: 1.3509; } }
@media (min-width: 1680px) { .orbite { scale: 1.4185; } }
@media (min-width: 1728px) { .orbite { scale: 1.459; } }

/*
 * Blocchi affiancati su desktop (Come funziona, tavola 65:196): fondo notte,
 * gruppo largo 1469 px, a sinistra la scheda blu delle competenze (559 px),
 * a destra quella chiara del percorso (833 px), 77 px fra le due.
 * Da 1280 px: sotto, le due schede non ci stanno affiancate e restano una
 * sotto l'altra come su tablet.
 */
/* Regole comuni ai gruppi affiancati (Lista dei sogni, La starteria) da 1024 px;
   quello di Come funziona si affianca solo da 1280 px. */
@media (min-width: 1024px) {
  /* :where() tiene queste regole deboli come prima: quelle di ogni gruppo le correggono. */
  .affiancate:where(:not(.affiancate--io_competenze)) > .sez { min-width: 0; padding: 0; background: none; }
  .affiancate:where(:not(.affiancate--io_competenze)) > .sez > .contenitore { height: 100%; max-width: none; padding: 0; }
}
@media (min-width: 1280px) {
  .affiancate--io_competenze {
    display: grid; grid-template-columns: 559fr 833fr; grid-auto-rows: minmax(calc(566 / 1728 * 100vw), auto); column-gap: 77px; align-items: stretch;
    padding: 153px max(var(--gutter), calc((100% - 1469px) / 2)) 156px; background: var(--notte);
  }
  .affiancate > .sez { min-width: 0; padding: 0; background: none; }
  .affiancate > .sez > .contenitore { height: 100%; max-width: none; padding: 0; }

  .affiancate .competenze__scheda {
    display: flex; flex-direction: column; align-items: center; height: 100%; max-width: none; margin: 0;
    padding: 54px 0 44px;
  }
  .affiancate .competenze__titolo { max-width: 358px; padding: 0; font-size: 35px; line-height: 33px; }
  /* 430 px nel Figma; nel browser il carattere è appena più stretto: 420 dà gli stessi a capo. */
  .affiancate .competenze__testo { max-width: 420px; margin-top: 36px; padding: 0; }
  .affiancate .competenze__nastri { width: 100%; margin-top: 80px; }
  .affiancate .competenze__link { margin-top: auto; padding-top: 40px; }

  /* La scheda del percorso ha le misure del Figma (larga 833) in proporzione
     alla sua larghezza: --k è un pixel del Figma. A 1728 px coincide col
     file; più stretta, la composizione resta la stessa in scala. */
  .affiancate > .garanzie { position: relative; overflow: hidden; container-type: inline-size; padding: 0; border-radius: 15px; background: var(--chiaro); }
  .affiancate .garanzie .contenitore {
    --k: calc(100cqw / 833);
    display: grid; grid-template-columns: 280fr 276fr 277fr; grid-template-rows: auto 1fr; padding-top: calc(75 * var(--k));
  }
  .affiancate .garanzie .titolo {
    grid-column: 1 / 3; grid-row: 1; justify-self: start; width: calc(89 * var(--k) + 242 * var(--k)); max-width: none; padding-left: calc(89 * var(--k));
    text-align: left; font-size: max(26px, calc(35 * var(--k))); line-height: max(21px, calc(28 * var(--k)));
  }
  .affiancate .garanzie__intro {
    grid-column: 2 / 4; grid-row: 1; justify-self: start; max-width: none; width: calc(129 * var(--k) + 305 * var(--k));
    margin: calc(13 * var(--k)) 0 0; padding-left: calc(129 * var(--k)); text-align: left;
    font-size: max(14px, calc(16 * var(--k))); line-height: max(17px, calc(19 * var(--k)));
  }
  .affiancate .garanzie__voci { grid-column: 1 / -1; display: grid; grid-template-columns: 280fr 276fr 277fr; gap: 0; max-width: none; margin: calc(120 * var(--k)) 0 0; }
  .affiancate .garanzia, .affiancate .garanzia:first-child {
    position: relative; grid-template-columns: 1fr; justify-items: start; align-content: start; gap: calc(16 * var(--k));
    padding: 0 calc(31 * var(--k)) calc(60 * var(--k)) calc(31 * var(--k)); text-align: left;
  }
  .affiancate .garanzia:first-child { padding-left: calc(73 * var(--k)); }
  /* Nel Figma la terza voce è larga 174 px: va a capo come nel file. */
  .affiancate .garanzia:nth-child(3) { padding-right: calc(72 * var(--k)); }
  .affiancate .garanzia__testo { padding-top: 0; font-size: max(14px, calc(16 * var(--k))); line-height: max(18px, calc(21 * var(--k))); }
  .affiancate .garanzia__testo strong { font-size: max(16px, calc(20 * var(--k))); line-height: max(18px, calc(21 * var(--k))); }
  /* Le linee fra le colonne sfumano verso l'alto e arrivano fino al fondo della scheda. */
  .affiancate .garanzia + .garanzia::before {
    content: ""; position: absolute; left: 0; top: -30px; bottom: 0; width: 1.5px;
    background: linear-gradient(180deg, transparent, var(--blu) 70%);
  }
  .affiancate .garanzia__scudo { width: calc(69 * var(--k)); height: calc(79 * var(--k)); margin: calc(-3 * var(--k)) 0 calc(-6 * var(--k)) calc(-9 * var(--k)); }
}

/*
 * Lista dei sogni su desktop (feedback del grafico): testata, modulo e
 * «E una volta creata la lista?» in un'unica griglia sul cielo stellato.
 * In alto il testo della testata a sinistra e il modulo a destra; sotto le
 * citazioni a sinistra e il testo a destra, allineato a sinistra.
 */
@media (min-width: 1024px) {
  .affiancate--io_hero_citazioni {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px;
    grid-template-areas: "titolo modulo" "testo modulo" "frase modulo" "fumetti dopo";
    grid-template-rows: auto auto 1fr auto;
    padding: 190px max(var(--gutter), calc((100% - var(--larghezza)) / 2)) 150px;
    background: var(--notte) url("../img/cielo-2400.webp") 50% 0 / cover no-repeat; color: var(--testo-chiaro);
    background-image: -webkit-image-set(url("../img/cielo-2400.webp") 1x, url("../img/cielo-2674.webp") 2x);
    background-image: image-set(url("../img/cielo-2400.webp") 1x, url("../img/cielo-2674.webp") 2x);
  }
  .affiancate--io_hero_citazioni > .citazioni-testata,
  .affiancate--io_hero_citazioni > .citazioni-testata > .contenitore { display: contents; }
  .affiancate--io_hero_citazioni > .sogni-modulo { grid-area: modulo; align-self: center; padding: 0; background: none; }
  .affiancate--io_hero_citazioni > .sogni-modulo > .contenitore { padding: 0; }
  .affiancate--io_hero_citazioni .sogni-modulo__scheda { margin: 0 0 0 auto; }
  .affiancate--io_hero_citazioni .fumetti { justify-self: start; align-self: center; margin: 120px 0 0 60px; transform-origin: 0 50%; }
  .affiancate--io_hero_citazioni > .testo-centro { grid-area: dopo; align-self: center; padding: 120px 0 0; background: none; color: var(--testo-chiaro); text-align: left; }
  .affiancate--io_hero_citazioni > .testo-centro > .contenitore { padding: 0; }
  .affiancate--io_hero_citazioni .testo-centro .titolo { text-align: left; }
  .affiancate--io_hero_citazioni .testo-centro__corpo { max-width: 520px; margin-left: 0; }
  /* Sul cielo stellato il viola scuro non si legge: quello chiaro dei fondi scuri. */
  .affiancate--io_hero_citazioni .testo-centro .t-viola { color: #a78bff; }
}

/*
 * Startando PRO su desktop (tavole 65:1182 e 66:1289 del Figma).
 * Testata su due colonne: logo, titolo su una riga, testo e pulsante a
 * sinistra, anello grande a destra; dietro, le linee sfocate della tavola, che
 * svaniscono prima del bordo basso invece di interrompersi contro la sezione
 * successiva.
 */
/* L'immagine della testata «anello» e «foto» è solo per il computer: sul
   telefono l'anello e la foto stanno nella sezione successiva. */
.prodotto-testata--anello .prodotto-testata__anello { display: none; }

@media (min-width: 1024px) {
  .prodotto-testata--anello.sfondo-notte {
    display: grid; grid-template-columns: minmax(0, 452px) minmax(0, 1fr); align-items: center; column-gap: 40px;
    min-height: 790px; padding: 168px max(var(--gutter), calc((100% - var(--larghezza)) / 2)) 72px;
    text-align: left; background: var(--notte);
  }
  /* Nel Figma la sfocatura delle linee è progressiva: forte in alto, nulla in
     basso. Due strati: le linee sfocate che svaniscono scendendo e le stesse
     linee nitide che compaiono al loro posto. */
  .prodotto-testata--anello:not(.prodotto-testata--foto).sfondo-notte::before,
  .prodotto-testata--anello:not(.prodotto-testata--foto).sfondo-notte::after {
    content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("../img/linee-pro.svg") 50% 0 / max(1728px, 100%) auto no-repeat;
    -webkit-mask: linear-gradient(180deg, #000 80%, transparent 100%); mask: linear-gradient(180deg, #000 80%, transparent 100%);
  }
  .prodotto-testata--anello:not(.prodotto-testata--foto).sfondo-notte::after {
    background-image: url("../img/linee-pro-nitide.svg");
    -webkit-mask: linear-gradient(115deg, transparent 50%, #000 78%), linear-gradient(180deg, transparent 12%, #000 45%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(115deg, transparent 50%, #000 78%), linear-gradient(180deg, transparent 12%, #000 45%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
  .prodotto-testata--anello .contenitore { max-width: none; margin: 0; padding: 0; }
  .prodotto-testata--anello .prodotto-testata__logo { justify-content: flex-start; }
  .prodotto-testata--anello .prodotto-testata__logo img { height: 80px; }
  .prodotto-testata--anello .prodotto-testata__titolo { margin-top: 45px; font-size: 35px; line-height: 34px; }
  .prodotto-testata--anello .prodotto-testata__titolo br { display: none; }
  .prodotto-testata--anello .prodotto-testata__testo { max-width: 330px; margin: 45px 0 0; font-size: 16px; line-height: 23px; }
  .prodotto-testata--anello .azioni { margin-top: 34px; justify-content: flex-start; }
  .prodotto-testata--anello .prodotto-testata__anello { display: flex; justify-self: end; margin: 0 40px 0 0; }
  /* L'anello ora è nella testata: quello sopra «Scegli il tuo profilo» si toglie. */
  .prodotto-testata:has(.prodotto-testata__anello) + .profili-tab .profili-tab__immagine { display: none; }
  .prodotto-testata--anello .prodotto-testata__anello img { width: 422px; filter: drop-shadow(0 0 60px rgba(0, 91, 232, .55)); }

  /* «Quello che costruisci diventa visibile»: titolo e testo affiancati,
     cinque riquadri 215 × 83 su due righe (tre e due) centrate. */
  .voci-icona { padding-top: 232px; padding-bottom: 168px; }
  .voci-icona .contenitore { display: grid; grid-template-columns: 343px 276px; column-gap: 79px; justify-content: center; text-align: left; }
  .voci-icona .titolo--centro { margin: 0; text-align: left; font-size: 35px; line-height: 32px; }
  .voci-icona__testo { max-width: none; margin: 0; color: #1e222c; }
  .voci-icona__griglia { grid-column: 1 / -1; justify-self: center; max-width: 687px; gap: 29px 21px; margin-top: 64px; }
  .voce-icona { width: 215px; max-width: none; min-height: 83px; padding: 8px 14px; grid-template-columns: 46px auto; gap: 14px; border-radius: 11px; color: #123f85; font-size: 22px; line-height: 28px; }
  .voce-icona__icona, .voce-icona__icona img { width: 46px; height: 46px; }

  /* Fascia «Avvisami»: angoli alti arrotondati che si appoggiano sulla
     sezione chiara sopra; titolo a sinistra, modulo al centro, anello a destra. */
  .sfondo-chiaro + .avviso.sfondo-grafite, .sfondo-bianco + .avviso.sfondo-grafite { margin-top: -20px; border-radius: 20px 20px 0 0; }
  .avviso.sfondo-grafite:not(.avviso--centro) {
    padding: 112px 0 124px;
    background: url("../img/avviso-triangoli-desktop.svg") 50% 0 / max(1728px, 100%) auto no-repeat, var(--notte-2);
  }
  .avviso:not(.avviso--centro) .contenitore { position: relative; }
  .avviso:not(.avviso--centro) .avviso__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 383px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; max-width: none; margin: 0; }
  .avviso:not(.avviso--centro) .avviso__titolo { grid-column: 1; max-width: 300px; font-size: 35px; line-height: 43px; color: var(--chiaro); }
  .avviso:not(.avviso--centro) .avviso__testo { grid-column: 1; max-width: 279px; margin-top: 4px; font-size: 16px; line-height: 22px; color: var(--chiaro); }
  .avviso:not(.avviso--centro) .modulo { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .avviso:not(.avviso--centro) .btn-invio { display: flex; width: 100%; }
  .avviso:not(.avviso--centro) .btn-invio__testo { flex: 1; font-size: 15px; }
  .avviso:not(.avviso--centro) .avviso__immagine { left: auto; right: var(--gutter); top: 50%; width: 184px; transform: translateY(-50%); filter: drop-shadow(0 0 40px rgba(0, 91, 232, .9)); }
}

/*
 * La starteria su desktop (tavola 66:1593 del Figma).
 * Testata: logo, titolo e testo a sinistra; a destra la foto dell'insegna
 * (547 × 432, angoli 10) con due bande colorate, una dietro e una davanti, che
 * escono dal bordo destro. Sotto, su una riga: «Cosa troverai» allineato a
 * destra con la sua banda che arriva dal bordo sinistro, la scheda al centro
 * (441 px), il testo «Un incontro può diventare una collaborazione» a destra.
 */
@media (min-width: 1024px) {
  .prodotto-testata--foto.sfondo-notte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 547px); column-gap: 80px; align-items: start; min-height: 0;
    padding: 229px max(var(--gutter), calc((100% - 1300px) / 2)) 140px max(var(--gutter), calc((100% - var(--larghezza)) / 2));
  }
  .prodotto-testata--foto .contenitore { padding-top: 70px; }
  .prodotto-testata--foto .prodotto-testata__logo img { height: 122px; }
  .prodotto-testata--foto .prodotto-testata__titolo { max-width: 440px; margin-top: 47px; }
  .prodotto-testata--foto .prodotto-testata__testo { max-width: 388px; margin-top: 47px; }
  .prodotto-testata--foto .prodotto-testata__anello { position: relative; z-index: 0; display: block; justify-self: stretch; margin: 0; }
  .prodotto-testata--foto .prodotto-testata__anello img { display: block; width: 100%; aspect-ratio: 547 / 432; object-fit: cover; border-radius: 10px; filter: none; }
  .prodotto-testata--foto .prodotto-testata__anello::before,
  .prodotto-testata--foto .prodotto-testata__anello::after { content: ""; position: absolute; pointer-events: none; background: no-repeat 0 0 / 100% 100%; }
  .prodotto-testata--foto .prodotto-testata__anello::before {
    z-index: -1; left: -24.5%; top: 7.18%; width: 202.9%; aspect-ratio: 1110 / 304; background-image: url("../img/banda-starteria-1.svg");
  }
  .prodotto-testata--foto .prodotto-testata__anello::after {
    left: 79.52%; top: 72.45%; width: 80.8%; aspect-ratio: 442 / 160; background-image: url("../img/banda-starteria-2.svg");
  }

  .affiancate--io_elenco_scheda {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) 441px minmax(0, 1fr); column-gap: 75px; align-items: center;
    padding: 180px max(var(--gutter), calc((100% - 1370px) / 2)) 200px; background: var(--notte);
  }
  .affiancate--io_elenco_scheda > .elenco-scheda,
  .affiancate--io_elenco_scheda > .elenco-scheda > .contenitore { display: contents; }
  .affiancate--io_elenco_scheda .elenco-scheda__banda,
  .affiancate--io_elenco_scheda .testo-immagine__foto { display: none; }
  .affiancate--io_elenco_scheda .elenco-scheda .titolo {
    position: relative; grid-column: 1; justify-self: end; margin: -45px 0 0; text-align: right; font-size: 35px; line-height: 34px;
  }
  .affiancate--io_elenco_scheda .elenco-scheda .titolo::after {
    content: ""; position: absolute; z-index: -1; right: -5px; top: 61px; width: 696px; height: 182px; pointer-events: none;
    background: url("../img/banda-starteria-3.svg") no-repeat 0 0 / 100% 100%;
  }
  .affiancate--io_elenco_scheda .elenco-scheda__scheda { grid-column: 2; width: 100%; max-width: none; margin: 0; }
  .affiancate--io_elenco_scheda > .testo-immagine { grid-column: 3; text-align: left; }
  .affiancate--io_elenco_scheda .testo-immagine__corpo { max-width: 365px; margin: 0; }
  .affiancate--io_elenco_scheda .testo-immagine__titolo { font-size: 35px; line-height: 34px; }
  .affiancate--io_elenco_scheda .testo-immagine__testo { max-width: 365px; margin: 34px 0 0; font-size: 16px; line-height: 23px; }
}

/*
 * Startando su desktop «come la landing startando.it» (opzione dei blocchi
 * Fase e Testata di prodotto; sul telefono non cambia nulla). Misure lette
 * dalla landing a 1440 px: colonna del testo 550/449/389 px, schede chiare con
 * angoli 16-22 px, 64 px fra testo e contenuto. I fondi delle sezioni restano
 * quelli di iostarto.
 */
@media (min-width: 1024px) {
  /* Testata: più in alto, schermata più piccola. */
  .prodotto-testata--gestionale.prodotto-testata--landing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 130px; padding-bottom: 40px; }
  .prodotto-testata--landing .gestionale { max-width: 480px; justify-self: center; }

  /* Tutte le fasi: niente colonna ferma, titolo più grande. */
  .fase--landing { padding-top: 96px; padding-bottom: 96px; }
  .fase--landing .fase__corpo { position: static; padding: 0; }
  .fase--landing .fase__corpo .fase__titolo { max-width: none; font-size: 36px; line-height: 40px; }
  .fase--landing .fase__etichetta { margin-bottom: 22px; }
  .fase--landing .fase__testo { margin-top: 22px; font-size: 17px; line-height: 26px; }
  .fase--landing .fase__contenuto { padding: 0; }
  .fase--landing .fase__intestazione { margin-bottom: 64px; }

  /* 1 · Avvio: testo e scheda a sinistra, illustrazione a destra. */
  .fase--landing.fase--elenco .contenitore { grid-template-columns: minmax(0, 550fr) minmax(0, 578fr); column-gap: 64px; align-items: center; }
  .fase--landing.fase--elenco .fase__contenuto { display: contents; }
  /* Righe esplicite: 1 e 2, oppure 2 e 3 se sopra c'è il titolo «Come funziona». */
  .fase--landing.fase--elenco .fase__corpo { grid-column: 1; grid-row: 1; }
  .fase--landing.fase--elenco .fase__scheda { grid-column: 1; grid-row: 2; margin-top: 32px; padding: 26px 0 16px 30px; border-radius: 16px; }
  .fase--landing.fase--elenco :is(.percorso, .fase__figura) { grid-column: 2; grid-row: 1 / span 2; max-width: 578px; margin: 0; justify-self: end; }
  .fase--landing.fase--elenco:has(.fase__intestazione) .fase__corpo { grid-row: 2; }
  .fase--landing.fase--elenco:has(.fase__intestazione) .fase__scheda { grid-row: 3; }
  .fase--landing.fase--elenco:has(.fase__intestazione) :is(.percorso, .fase__figura) { grid-row: 2 / span 2; }
  .fase--landing.fase--elenco .fase__intestazione { grid-row: 1; }

  /* 2 · Gestione: un unico riquadro chiaro, foto con le voci a sinistra, testo e pulsante a destra. */
  .fase--landing.fase--voci .contenitore {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "foto corpo" "foto azioni";
    column-gap: 56px; width: calc(100% - 2 * var(--gutter)); max-width: var(--larghezza); padding: 0;
    border-radius: 22px; overflow: hidden; background: var(--chiaro); color: var(--testo-scuro);
  }
  .fase--landing.fase--voci .fase__contenuto { display: contents; }
  .fase--landing.fase--voci .fase__contenuto::before { display: none; }
  .fase--landing.fase--voci .fase__corpo { grid-area: corpo; padding: 49px 46px 0 0; }
  .fase--landing.fase--voci .fase__etichetta { color: var(--blu); }
  .fase--landing.fase--voci .fase__voci-foto { position: relative; grid-area: foto; inset: auto; z-index: 0; min-height: 553px; border-radius: 0; }
  .fase--landing.fase--voci .fase__voci-foto::after { background: linear-gradient(90deg, rgba(238, 245, 255, 0) 55%, var(--chiaro) 100%); }
  .fase--landing.fase--voci .fase__voci { grid-area: foto; z-index: 1; align-self: center; width: min(330px, 80%); margin-left: 44px; gap: 16px; }
  .fase--landing.fase--voci .fase__voce { min-height: 60px; gap: 16px; padding: 0 20px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(18, 63, 133, .12); font-size: 17px; }
  .fase--landing.fase--voci .azioni { grid-area: azioni; align-self: start; justify-content: flex-start; margin: 34px 0 49px; }

  /* 3 · Controllo: testo a sinistra, quattro indicatori in fila a destra. */
  .fase--landing .fase__triangoli { right: max(var(--gutter), calc((100% - var(--larghezza)) / 2 - 90px)); }
  .fase--landing.fase--indicatori .contenitore { grid-template-columns: minmax(0, 449fr) minmax(0, 703fr); column-gap: 48px; align-items: center; }
  .fase--landing .fase__indicatori { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; }
  .fase--landing .indicatore { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 200px; padding: 20px; border-radius: 16px; }
  .fase--landing .indicatore__icona { grid-row: 1; justify-self: end; width: 44px; height: 44px; margin: 0; }
  .fase--landing .indicatore__icona img { width: 44px; height: 44px; }
  .fase--landing .indicatore p { grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; margin-top: 8px; }
  .fase--landing .indicatore__testo { max-width: none; font-size: 17px; line-height: 21px; }
  .fase--landing .indicatore__valore { margin: 0; font-size: 33px; }

  /* 4 · Governance: testo e pulsante a sinistra, riquadro chiaro con i due elenchi a destra. */
  .fase--landing.fase--gruppi .contenitore { position: relative; grid-template-columns: minmax(0, 389fr) minmax(0, 747fr); column-gap: 56px; align-items: start; }
  .fase--landing.fase--gruppi .fase__corpo { padding-bottom: 92px; }
  /* Nella colonna stretta l'a capo del titolo lascerebbe «per» da solo: si va a capo dove capita. */
  .fase--landing.fase--gruppi .fase__titolo br { display: none; }
  .js .fase--landing.fase--gruppi .fase__contenuto[data-entra] { transform: none; }
  .fase--landing.fase--gruppi .fase__contenuto {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; grid-auto-flow: column; gap: 15px 21px;
    padding: 28px; border-radius: 22px; background: var(--chiaro); color: var(--testo-scuro);
  }
  .fase--landing .fase__gruppo-titolo, .fase--landing .fase__scheda + .fase__gruppo-titolo { justify-content: flex-start; gap: 10px; margin: 0; font-size: 19px; line-height: 22px; }
  .fase--landing .fase__gruppo-titolo::before { width: 10px; height: 10px; }
  .fase--landing .fase__gruppo-titolo + .fase__scheda { margin: 0; padding: 6px 0 6px 20px; border-radius: 16px; }
  .fase--landing.fase--gruppi .fase__elenco li { padding: 14px 20px 14px 17px; font-size: 15px; line-height: 23px; }
  .fase--landing.fase--gruppi .azioni { position: absolute; left: var(--gutter); bottom: 0; margin: 0; justify-content: flex-start; }
}
@media (min-width: 1280px) {
  .fase--landing .fase__indicatori { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Fra 1024 e 1279 px le colonne sono strette: titoli più piccoli e a capo dove capita. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .fase--landing .fase__corpo .fase__titolo { font-size: 30px; line-height: 34px; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .fase--landing .fase__titolo br { display: none; }
}

/* Scheda Startando PRO su desktop: la scheda è larga 900 px, anelli e
   triangoli si ingrandiscono e si vedono di più, sempre ritagliati dal bordo
   della scheda e mai interrotti a metà. */
@media (min-width: 1024px) {
  /* Stessa composizione del telefono ingrandita 1,3 volte: degli anelli si vedono solo gli archi. */
  .promo__decoro { width: 295px; }
  .promo__decoro--1 { right: -116px; top: -244px; }
  .promo__decoro--2 { left: -116px; bottom: -224px; }
  .promo__tri--1 { width: 226px; bottom: -82px; }
  .promo__tri--2 { width: 103px; bottom: 94px; }
  .promo__tri--3 { left: auto; right: 30%; width: 146px; }
}

/*
 * Linee a V della home da tablet in su. Il disegno del telefono è largo 402 px
 * e le V entrano dal suo bordo destro: allargato a centro pagina, quel bordo
 * tagliava le linee a mezz'aria. Qui si usa il disegno intero (-1200…900 del
 * Figma), stessa scala 1,1 e stesso punto di origine di prima. Come nel Figma
 * le linee non stanno nella testata: solo nella sezione «In quale
 * imprenditore ti riconosci?», dove compaiono sfumando dall'alto e svaniscono
 * verso il fondo, senza mai un taglio netto.
 */
@media (min-width: 768px) {
  .sogni { background: linear-gradient(180deg, var(--notte) 46.8%, var(--indaco) 100%); }
  .sez.profili::before {
    background-image: url("../img/linee-nitide-larghe.svg"); background-size: 2310px auto; background-position: calc(50% - 606px) -870px;
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 320px, #000 45%, transparent 88%);
            mask: linear-gradient(180deg, transparent 0, #000 320px, #000 45%, transparent 88%);
  }
}

/* Computer piccoli (1024–1279 px): dove il Figma non c'è, le composizioni
   desktop si stringono senza che gli elementi si sovrappongano. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .affiancate--io_hero_citazioni .fumetti { margin-left: 0; transform: scale(1.1); }

  .prodotto-testata--foto.sfondo-notte { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 110px; }
  .affiancate--io_elenco_scheda { grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr); column-gap: 40px; }
  .affiancate--io_elenco_scheda .elenco-scheda .titolo,
  .affiancate--io_elenco_scheda .testo-immagine__titolo { font-size: 28px; line-height: 30px; }

  .avviso:not(.avviso--centro) .avviso__corpo { grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr); }
  .avviso:not(.avviso--centro) .avviso__titolo { font-size: 28px; line-height: 34px; }
}

/*
 * Dimensioni di titoli e testi scelte nel pannello per un singolo blocco
 * («Aspetto della sezione»). BlockRenderer mette sul primo elemento del
 * blocco gli attributi data-tit-d / data-tit-m / data-txt-d / data-txt-m e le
 * variabili con i pixel. Titoli: h1, h2 e .titolo. Testi: paragrafi, voci
 * d'elenco e citazioni. Restano fuori pulsanti e illustrazioni animate, dove
 * le misure sono parte del disegno. L'interlinea segue la nuova dimensione.
 */
@media (max-width: 1023.98px) {
  [data-tit-m] :is(h1, h2, .titolo):not(:is(.btn-start, .btn-pillola, .btn-invio, .sogni__scena, .fumetti, .gestionale, .percorso, .orbite) *) {
    font-size: var(--tit-m) !important; line-height: 1.1 !important;
  }
  [data-txt-m] :is(p, li, blockquote):not(:is(.btn-start, .btn-pillola, .btn-invio, .sogni__scena, .fumetti, .gestionale, .percorso, .orbite, .io-scelta, .io-consenso) *):not(.titolo) {
    font-size: var(--txt-m) !important; line-height: 1.45 !important;
  }
}
@media (min-width: 1024px) {
  [data-tit-d] :is(h1, h2, .titolo):not(:is(.btn-start, .btn-pillola, .btn-invio, .sogni__scena, .fumetti, .gestionale, .percorso, .orbite) *) {
    font-size: var(--tit-d) !important; line-height: 1.1 !important;
  }
  [data-txt-d] :is(p, li, blockquote):not(:is(.btn-start, .btn-pillola, .btn-invio, .sogni__scena, .fumetti, .gestionale, .percorso, .orbite, .io-scelta, .io-consenso) *):not(.titolo) {
    font-size: var(--txt-d) !important; line-height: 1.45 !important;
  }
}

/*
 * Aspetto della sezione scelto nel pannello, per un singolo blocco
 * (BlockRenderer mette attributi e variabili sul primo elemento):
 *   data-solo="computer|telefono"  la sezione si vede solo lì;
 *   data-spt-* / data-spb-*        spazio sopra e sotto (d = computer, m = telefono);
 *   data-sfondo-scelto             colore di sfondo al posto di quello della grafica.
 */
@media (max-width: 1023.98px) {
  [data-solo="computer"] { display: none !important; }
  [data-spt-m] { padding-top: var(--spt-m) !important; }
  [data-spb-m] { padding-bottom: var(--spb-m) !important; }
}
@media (min-width: 1024px) {
  [data-solo="telefono"] { display: none !important; }
  [data-spt-d] { padding-top: var(--spt-d) !important; }
  [data-spb-d] { padding-bottom: var(--spb-d) !important; }
}
[data-sfondo-scelto] { background: var(--sfondo-scelto) !important; }