/* ============================================================
   HOME — Header/HERO
   Figma: nodo 230:1189 (dentro la pagina HOME 230:885)
   Tutti i valori sono ripresi dal Figma senza arrotondamenti.
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xl);
  padding-top: 96px;
  padding-bottom: 64px;
  overflow: hidden;              /* contiene gli aloni sfocati */
}

/* Gradient+Blur — Figma 230:1190 (ciano, in alto a destra) */
.hero__glow--cyan {
  position: absolute;
  top: -180px;
  right: -160px;
  width: 620px;
  height: 620px;
  border-radius: 310px;
  filter: blur(40px);
  opacity: 0.7;
  background: radial-gradient(circle 438.41px at 50% 50%,
              rgba(53, 209, 223, 0.55) 0%, rgba(53, 209, 223, 0) 64%);
  pointer-events: none;
}

/* Gradient+Blur — Figma 230:1191 (lime, in basso a sinistra) */
.hero__glow--lime {
  position: absolute;
  bottom: -220px;
  left: -180px;
  width: 520px;
  height: 520px;
  border-radius: 260px;
  filter: blur(40px);
  opacity: 0.7;
  background: radial-gradient(circle 367.7px at 50% 50%,
              rgba(194, 232, 80, 0.5) 0%, rgba(194, 232, 80, 0) 64%);
  pointer-events: none;
}

/* ------------------------------------------------------------
   Piano immagine della hero.
   "Hero Immagine" (230:1237) e la pillola "Servizio attivo"
   (230:1230) nel Figma NON stanno dentro la hero: sono livelli
   fratelli posizionati sopra di essa. Questo piano riproduce
   quelle coordinate, ancorate al container da 1240px.
   ------------------------------------------------------------ */
.hero__canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w-container);
  height: 100%;
  margin-left: calc(var(--w-container) / -2);
  pointer-events: none;
}

/* Hero Immagine — Figma 230:1237 (x=324 y=148, 1468 × 826;
   la hero parte a y=74, quindi qui top = 74) */
.hero__image {
  position: absolute;
  top: 74px;
  left: -16px;                   /* 324 − 340 (bordo del container) */
  width: 1468px;
  height: 826px;
  max-width: none;
}

/* Container — Figma 230:1192 */
.hero__container {
  position: relative;
  z-index: 1;                    /* il testo resta sopra il piano immagine */
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--sp-xl);
  width: 100%;
  max-width: var(--w-container);
  min-height: 610.47px;
  margin-inline: auto;
  padding-inline: 32px;
}

/* Colonna testo — Figma 230:1193 */
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15.1px;
  align-self: center;
}

/* Badge "NUOVO" — Figma 230:1194 */
.hero__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-9);
  padding: var(--sp-7) var(--sp-s) var(--sp-7) 8px;
  background: var(--c-white);
  border: var(--sw-1) solid var(--c-porcelain);
  border-radius: var(--r-pill);
}
.hero__badge::before {          /* Overlay+Shadow — Figma 230:1195 */
  content: "";
  position: absolute;
  top: -1px; right: -1px; bottom: -1px; left: -1px;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 22px -14px rgba(11, 16, 18, 0.4);
  pointer-events: none;
}
.hero__badge-chip {
  padding: var(--sp-xxs) var(--sp-11);
  border-radius: var(--r-pill);
  background: linear-gradient(124.96637785498011deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-10);
  line-height: 16px;
  letter-spacing: 1px;
  color: var(--c-bunker);
  white-space: nowrap;
}
.hero__badge-text {
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-13);
  line-height: var(--lh-20-8);
  color: var(--c-shuttle-gray);
  white-space: nowrap;
}

/* Heading 1 — Figma 230:1199 / 230:1200 */
.hero__title {
  padding-top: 8.34px;
  font-family: var(--f-1);
  font-weight: var(--fw-900);
  font-size: var(--fs-78);
  line-height: var(--lh-76-44);
  letter-spacing: var(--ls--1-72);
  /* In Figma il riempimento a gradiente di un testo è ancorato al riquadro
     dell'INTERO nodo di testo, non alla singola parola: per questo la parola
     colorata mostra solo la porzione di scala che le compete. */
  background: linear-gradient(121.5893507791894deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title-solid { color: var(--c-bunker); }

/* Paragrafo — Figma 230:1201 / 230:1202 */
.hero__lead {
  max-width: 527.398px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-19);
  line-height: var(--lh-30-4);
  color: var(--c-shuttle-gray);
}

/* Bottoni — Figma 230:1203 */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 var(--sp-14);
  padding-top: 16.91px;
}

/* Button primario — Figma 230:1204 */

/* Button secondario — Figma 230:1209 */

/* Riga di garanzia — Figma 230:1210 */
.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  padding-top: 32.9px;
}
.hero__avatars {
  display: flex;
  margin-left: -9px;            /* il primo cerchio sborda di 9px (Figma 230:1213) */
}
.hero__avatars span {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  border: var(--sw-2) solid var(--c-aqua-haze);
  background: linear-gradient(124.99999947659859deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
  flex-shrink: 0;
}
.hero__avatars span + span { margin-left: -9px; }
.hero__trust-text {
  max-width: 213.23px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-13);
  line-height: var(--lh-20-8);
  color: #8a969d;
}
.hero__trust-text strong {
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  color: var(--c-bunker);
}

/* Pillole di stato — Figma 230:1226 e 230:1230 */
.hero__pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-7);
  padding: 7.5px 13px 8.5px;
  background: var(--c-bunker-85);
  border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55);
  font-family: var(--f-1);
  font-weight: var(--fw-600);
  font-size: var(--fs-10);
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
}
.hero__pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--c-conifer);
  flex-shrink: 0;
}
/* Coordinate ricavate dal Figma sulla tela da 1920, riportate
   rispetto al bordo sinistro del container (x = 340).
   QR rilevato       230:1226 → x 1032.99  y 208.99
   Servizio attivo   230:1230 → x 1459.97  y 602.03  */
.hero__pill--qr      { left: 693px;  top: 209px; }
.hero__pill--service { left: 1120px; top: 602px; }

/* Nota: l'invito allo scroll del Figma (230:1234, "Scorri per
   scoprire" + linea sfumata) è stato rimosso su richiesta. */

/* ============================================================
   ADATTAMENTO RESPONSIVE (non presente nel Figma)
   ============================================================ */
@media (max-width: 1240px) {
  .hero__title { font-size: 64px; line-height: 1.02; }
}

@media (max-width: 1280px) {
  /* L'immagine resta ancorata al bordo destro del container e
     rimpicciolisce, invece di uscire dallo schermo */
  .hero__canvas { width: 100%; left: 0; margin-left: 0; }
  .hero__image {
    left: auto;
    right: -6%;
    width: 96%;
    height: auto;
  }
  .hero__pill--qr      { left: auto; right: 46%; top: 190px; }
  .hero__pill--service { left: auto; right: 2%;  top: 60%; }
}

@media (max-width: 1024px) {
  .hero__container {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 48px;
  }
  .hero__copy { align-items: center; text-align: center; }
  .hero__lead, .hero__title { text-align: center; }
  .hero__actions { justify-content: center; }
  .hero__trust { justify-content: center; }
  .hero__avatars { margin-left: 0; }
  .hero__spacer { display: none; }

  /* Sotto il tablet l'immagine passa da sfondo a blocco sotto il testo */
  .hero__canvas { position: static; width: auto; height: auto; }
  .hero__image {
    position: relative;
    top: auto; right: auto; left: auto;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  .hero__pill { display: none; }
}

@media (max-width: 720px) {
  .hero { padding-top: 56px; padding-bottom: 48px; }
  .hero__title { font-size: 44px; letter-spacing: -0.9px; }
  .hero__lead { font-size: var(--fs-16); line-height: var(--lh-27-2); }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px 0; width: 100%; }
  .btn-primary { justify-content: center; }
  .btn-ghost { justify-content: center; }
  .hero__trust { flex-direction: column; text-align: center; }
  .hero__trust-text { max-width: none; }
}

/* ============================================================
   HOME — Section "COS'É OMNYQR"
   Figma: nodo 230:887
   ============================================================ */
.sec-cose {
  background: var(--c-bunker);
  padding: 96px var(--sp-s);
}
.sec-cose__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xl);
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 32px;
}
.sec-cose__copy {
  flex: 1 0 0;
  min-width: 0;
  padding-top: 6.9px;
}

/* Occhiello — Figma 230:890 */

/* Heading 2 — Figma 230:894 */
.sec-cose__title {
  font-family: var(--f-1);
  font-weight: var(--fw-800);
  font-size: var(--fs-44);
  line-height: var(--lh-46-2);
  letter-spacing: var(--ls--0-88);
  color: var(--c-white);
}

/* Figma 230:896 */
.sec-cose__lead {
  padding-top: 23.895px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-18);
  line-height: var(--lh-28-8);
  color: var(--c-green-spring);
}

/* Elenco puntato — Figma 230:897 */
.sec-cose__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
  padding-top: 33.19px;
}
.sec-cose__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-14);
}
.sec-cose__bullet {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 9px;
  flex-shrink: 0;
}
.sec-cose__bullet--lime { background: var(--c-conifer); }
.sec-cose__bullet--cyan { background: var(--c-scooter); }
/* Nel Figma (230:914) il terzo pallino è #0B1012, lo stesso nero del
   fondo, quindi invisibile: correzione richiesta. Usato il verde della
   scala del marchio (color/green/74), che sta fra il ciano e il lime
   degli altri due e completa la sequenza del gradiente. */
.sec-cose__bullet--green { background: var(--c-green-74); }

.sec-cose__item p {
  width: 516px;
  max-width: 100%;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-15);
  line-height: var(--fs-24);
  color: var(--c-green-spring);
}
.sec-cose__item strong {
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-25-6);
  color: var(--c-white);
}

/* Colonna immagini — Figma 230:919 (rapporto 556/695) */
.sec-cose__visual {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 556 / 695;
}

/* Background+Shadow — Figma 230:920 */
.sec-cose__photo {
  position: absolute;
  top: 0; right: 18%; bottom: 24%; left: 8%;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 34px 64px -32px rgba(31, 180, 194, 0.6);
}
.sec-cose__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Background+Border — Figma 230:922 */
.sec-cose__screen {
  position: absolute;
  top: 55.01%;
  right: 0;
  bottom: 2.99%;
  left: 50%;
  border: var(--sw-6) solid var(--c-white);
  border-radius: 34px;
  background-image: url("../img/cose-app-screen.webp");
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: 0 0;
  /* 274.654889 × 594.229971 sul riquadro 278 × 291.90 del Figma */
  background-size: 98.797% 203.573%;
}

/* Background+Border "5 servizi" — Figma 230:923 */
.sec-cose__badge {
  position: absolute;
  left: 0;
  top: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.59px;
  padding: 15px 19px;
  background: var(--c-white);
  border: var(--sw-1) solid var(--c-porcelain);
  border-radius: 26px;
}
.sec-cose__badge::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px; bottom: -1px; left: -1px;
  border-radius: 26px;
  box-shadow: 0 24px 50px -26px rgba(11, 16, 18, 0.4);
  pointer-events: none;
}
.sec-cose__badge-num {
  font-family: var(--f-1);
  font-weight: var(--fw-900);
  font-size: var(--fs-30);
  line-height: var(--fs-30);
  background: linear-gradient(99.74210845005872deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec-cose__badge-text {
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-12);
  line-height: var(--lh-19-2);
  color: var(--c-shuttle-gray);
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .sec-cose { padding: 72px var(--sp-s); }
  .sec-cose__inner { flex-direction: column; gap: 48px; }
  .sec-cose__copy { width: 100%; }
  .sec-cose__visual { width: 100%; max-width: 556px; }
  .sec-cose__item p { width: auto; }
}

@media (max-width: 720px) {
  .sec-cose__title { font-size: 32px; line-height: 1.08; letter-spacing: -0.6px; }
  .sec-cose__lead { font-size: var(--fs-16); line-height: var(--lh-27-2); }
  .sec-cose__inner { padding-inline: 0; }
}

/* ============================================================
   HOME — Section "GRADIENTE HOME 1"
   Figma: nodo 230:927
   ============================================================ */
.sec-gradiente {
  padding: 96px var(--sp-s);
  background: linear-gradient(125.0000006419479deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
}
.sec-gradiente__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-xl);
  width: 100%;
  max-width: var(--w-container);
  min-height: 385.36px;
  margin-inline: auto;
  padding-inline: 32px;
}
.sec-gradiente__copy {
  align-self: center;
  padding-top: 6.9px;
}

/* Occhiello scuro su gradiente — Figma 230:930 */

/* Heading 2 — Figma 230:934 */
.sec-gradiente__title {
  font-family: var(--f-1);
  font-weight: var(--fw-900);
  font-size: var(--fs-52);
  line-height: var(--fs-52);
  letter-spacing: var(--ls--1-14);
  color: var(--c-bunker);
}

/* Figma 230:936 */
.sec-gradiente__lead {
  max-width: 503.426px;
  padding-top: 23.19px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-19);
  line-height: var(--lh-30-4);
  color: var(--c-firefly);
}

/* Numeri — Figma 230:937 */
.sec-gradiente__stats {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xl);
  padding-top: 48.3px;
}
.sec-gradiente__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-xxs);
}
.sec-gradiente__stat--mid {           /* Figma 230:943 */
  gap: 3.4px;
  width: 131.22px;
  min-width: 131.22px;
  padding-inline: 15px;
}
.sec-gradiente__stat--mid .sec-gradiente__stat-label { width: 111px; }
.sec-gradiente__stat-num {
  font-family: var(--f-1);
  font-weight: var(--fw-900);
  font-size: var(--fs-46);
  line-height: var(--fs-46);
  color: var(--c-bunker);
  white-space: nowrap;
}
.sec-gradiente__stat-num--inf {       /* Figma 230:950 usa Inter Bold */
  font-family: var(--f-2);
  font-weight: var(--fw-700);
}
.sec-gradiente__stat-label {
  max-width: 131.219px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-13);
  line-height: var(--lh-20-8);
  color: var(--c-firefly);
}

/* Monogramma — Figma 230:953 / 230:954 */
.sec-gradiente__visual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  height: 323.97px;
}
.sec-gradiente__visual img {
  width: 340px;
  height: 323.969px;
  filter: drop-shadow(0 30px 25px rgba(11, 40, 42, 0.4));
}

/* Cerchio tratteggiato — Figma 230:956 */
.sec-gradiente__circle {
  position: absolute;
  top: -13.67%;
  right: 2.66%;
  bottom: -20.5%;
  left: 55.65%;
  border: var(--sw-2) dashed var(--c-bunker-18);
  border-radius: 317.72px;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .sec-gradiente { padding: 72px var(--sp-s); }
  .sec-gradiente__inner { grid-template-columns: 1fr; min-height: 0; gap: 48px; }
  .sec-gradiente__circle { display: none; }
  .sec-gradiente__visual { height: auto; }
  .sec-gradiente__visual img { width: 100%; max-width: 340px; height: auto; }
}

@media (max-width: 720px) {
  .sec-gradiente__inner { padding-inline: 0; }
  .sec-gradiente__title { font-size: 34px; line-height: 1.06; letter-spacing: -0.7px; }
  .sec-gradiente__lead { font-size: var(--fs-16); line-height: var(--lh-27-2); }
  .sec-gradiente__stats { flex-wrap: wrap; gap: 28px; }
  .sec-gradiente__stat--mid { padding-inline: 0; width: auto; min-width: 0; }
}

/* ============================================================
   HOME — Section "FUNZIONI"
   Figma: nodo 230:957 — mosaico di tessere 1176 × 604
   ============================================================ */
.sec-funzioni {
  position: relative;
  padding: 96px var(--sp-s);
  overflow: hidden;
}
/* Gradient+Blur — Figma 230:958 / 230:959 */
.sec-funzioni__glow--cyan {
  position: absolute;
  top: 30.01%;
  bottom: 18.98%;
  right: -240px;
  width: 560px;
  border-radius: 280px;
  filter: blur(40px);
  background: radial-gradient(circle 395.98px at 50% 50%,
              rgba(53, 209, 223, 0.3) 0%, rgba(53, 209, 223, 0) 64%);
  pointer-events: none;
}
.sec-funzioni__glow--lime {
  position: absolute;
  top: 60.01%;
  bottom: -3.74%;
  left: -220px;
  width: 480px;
  border-radius: 240px;
  filter: blur(40px);
  background: radial-gradient(circle 339.41px at 50% 50%,
              rgba(194, 232, 80, 0.26) 0%, rgba(194, 232, 80, 0) 64%);
  pointer-events: none;
}

.sec-funzioni__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 47.99px;
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 32px;
}
.sec-funzioni__intro {
  display: flex;
  flex-direction: column;
  gap: 14.9px;
  max-width: 605.63px;
  padding-top: 6.9px;
}
/* Heading 2 — Figma 230:966 */
.sec-funzioni__title {
  padding-top: 0.79px;
  font-family: var(--f-1);
  font-weight: var(--fw-800);
  font-size: var(--fs-50);
  line-height: var(--fs-52);
  letter-spacing: var(--ls--1-1);
  color: var(--c-bunker);
}
.sec-funzioni__lead {
  max-width: 647.262px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-19);
  line-height: var(--lh-30-4);
  color: var(--c-shuttle-gray);
}





/* riquadro 26×26 che contiene i tracciati dell'icona */


/* colori per tessera */


/* ============================================================
   ADATTAMENTO RESPONSIVE (non presente nel Figma)
   Sotto la larghezza del mosaico le tessere tornano in flusso.
   ============================================================ */

@media (max-width: 720px) {
  .sec-funzioni { padding: 72px var(--sp-s); }
  .sec-funzioni__inner { padding-inline: 0; }
  .sec-funzioni__title { font-size: 34px; line-height: 1.06; letter-spacing: -0.7px; }
  .sec-funzioni__lead { font-size: var(--fs-16); line-height: var(--lh-27-2); }
}

/* Posizioni esatte dei tracciati dentro il riquadro 26×26
   (ricavate dagli inset del Figma) */

/* ============================================================
   HOME — Section "CONTESTO - OMNYQR IN AZIONE"
   Figma: nodo 230:990
   ============================================================ */
.sec-contesto {
  position: relative;
  padding: 96px var(--sp-s);
  background: var(--c-scooter);
  overflow: hidden;
}
/* Gradient+Blur — Figma 230:991 */
.sec-contesto__glow {
  position: absolute;
  top: -140px;
  left: 60.67%;
  right: 6%;
  height: 520px;
  border-radius: 290px;
  filter: blur(40px);
  background: radial-gradient(ellipse 412.31px 412.31px at 50% 50%,
              rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
.sec-contesto__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-xl);
  width: 100%;
  max-width: var(--w-container);
  min-height: 570.98px;
  margin-inline: auto;
  padding-inline: 32px;
}
.sec-contesto__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14.6px;
  align-self: center;
  padding-top: 6.9px;
}
/* Occhiello verde scuro — Figma 230:994 */

/* Heading 2 — Figma 230:998 */
.sec-contesto__title {
  padding-bottom: 0.745px;
  font-family: var(--f-1);
  font-weight: var(--fw-800);
  font-size: var(--fs-46);
  line-height: var(--lh-47-84);
  letter-spacing: var(--ls--0-92);
  color: var(--c-bunker);
}
.sec-contesto__lead {
  max-width: 454.22px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-18);
  line-height: var(--lh-28-8);
  color: var(--c-elephant);
}
/* Numeri — Figma 230:1001 */
.sec-contesto__stats {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xl);
  padding-top: 17.39px;
}
.sec-contesto__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-xxs);
}
.sec-contesto__stat-num {
  font-family: var(--f-1);
  font-weight: var(--fw-900);
  font-size: var(--fs-38);
  line-height: var(--fs-38);
  color: var(--c-bunker);
  white-space: nowrap;
}
.sec-contesto__stat-label {
  max-width: 147.621px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-13);
  line-height: var(--lh-20-8);
  color: var(--c-elephant);
  white-space: nowrap;
}
/* Link — Figma 230:1012 / 230:1013 */
.sec-contesto__cta { padding-top: 33.4px; }

/* ---------- Colonna immagini — Figma 230:1018 ---------- */
.sec-contesto__visual {
  position: relative;
  align-self: center;
  aspect-ratio: 594.78 / 570.98;
}
/* Background+Shadow — Figma 230:1019 */
.ctx-main {
  position: absolute;
  top: 0; right: 16%; bottom: 14%; left: 0;
  border-radius: 46px;
  overflow: hidden;
  box-shadow: 0 44px 74px -34px rgba(0, 0, 0, 0.65);
  background: linear-gradient(135.0000017534467deg, var(--c-azure-15) 0%, #16282a 100%);
}
.ctx-main img {
  position: absolute;
  left: -7.47%;
  top: -41.75%;
  width: 107.6%;
  height: 163.18%;
  max-width: none;
}
/* pillole — Figma 230:1029 e 230:1033 */
.ctx-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-7);
  height: 32px;
  padding: 7.5px 13px 8.5px;
  background: var(--c-bunker-85);
  border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55);
  font-family: var(--f-1);
  font-weight: var(--fw-600);
  font-size: var(--fs-10);
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
}
.ctx-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--c-conifer);
  flex-shrink: 0;
}
.ctx-pill--scan { left: 48.79px;  top: 167.22px; }
.ctx-pill--serv { left: 343.79px; top: 55.2px; }   /* bottom 403.84 su altezza 491.04 */

/* Background+Border — Figma 230:1037 */
.ctx-inset {
  position: absolute;
  top: 46%; right: 0; bottom: 0; left: 60%;
  border: var(--sw-7) solid var(--c-bunker);
  border-radius: 34px;
  overflow: hidden;
}
.ctx-inset img {
  position: absolute;
  left: -14.27%;
  top: -0.81%;
  width: 129.6%;
  height: 100%;
  max-width: none;
}

@media (max-width: 1100px) {
  .sec-contesto__inner { grid-template-columns: 1fr; min-height: 0; gap: 48px; }
  .sec-contesto__visual { width: 100%; max-width: 594.78px; margin-inline: auto; }
  /* le pillole hanno coordinate assolute: sotto la misura di progetto
     verrebbero fuori posto */
  .ctx-pill { display: none; }
}

@media (max-width: 720px) {
  .sec-contesto { padding: 72px var(--sp-s); }
  .sec-contesto__inner { padding-inline: 0; }
  .sec-contesto__title { font-size: 32px; line-height: 1.08; letter-spacing: -0.6px; }
  .sec-contesto__lead { font-size: var(--fs-16); line-height: var(--lh-27-2); }
  .sec-contesto__stats { gap: 32px; }
}

/* ============================================================
   HOME — Section "COME FUNZIONA"
   Figma: nodo 230:1040
   Geometria presa dalla struttura del file; colori campionati
   dal render della pagina e corpi tipografici ricavati per
   misura (il piano Figma non consente altre letture dirette).
   ============================================================ */
.sec-come {
  position: relative;
  padding: 96px var(--sp-s);
  background: var(--c-conifer);
  overflow: hidden;
}
/* Gradient+Blur — Figma 230:1041 (x=768 y=0, 520 × 420) */
.sec-come__glow {
  position: absolute;
  top: 0;
  left: 40%;
  width: 520px;
  height: 420px;
  border-radius: 210px;
  filter: blur(40px);
  background: radial-gradient(ellipse at 50% 50%,
              rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
.sec-come__inner {
  position: relative;
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 32px;
}
.sec-come__intro { max-width: 605.63px; padding-top: 6.9px; }
/* Heading 2 — Figma 230:1048 (blocco 605.63 × 104 = 2 righe da 52) */
.sec-come__title {
  padding-top: 15.69px;
  font-family: var(--f-1);
  font-weight: var(--fw-800);
  font-size: var(--fs-50);
  line-height: var(--fs-52);
  letter-spacing: var(--ls--1-1);
  color: var(--c-bunker);
}

/* Tre tessere — Figma 230:1049 (1176 × 252, passo 398 = 380 + 18) */
.come-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
/* Background+Border — Figma 230:1050 / 230:1057 / 230:1064 */
.come-step {
  min-height: 252px;
  padding: 35px;
  background: var(--c-white);
  border: var(--sw-1) solid var(--c-porcelain);
  border-radius: 34px;
}
.come-step__num {
  display: block;
  font-family: var(--f-1);
  font-weight: var(--fw-900);
  font-size: var(--fs-54);
  line-height: var(--fs-54);
  background: linear-gradient(125deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.come-step__title {
  margin-top: 10px;
  padding-top: var(--sp-xxs);
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: 20px;              /* altezza nodo 32 = 20 x 1.6 */
  line-height: var(--lh-32);
  color: var(--c-bunker);
}
.come-step__text {
  margin-top: 10px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-15);
  line-height: var(--fs-24);
  color: var(--c-shuttle-gray);
}

@media (max-width: 1024px) {
  .sec-come { padding: 72px var(--sp-s); }
  .come-steps { grid-template-columns: 1fr; gap: 16px; }
  .come-step { min-height: 0; }
}
@media (max-width: 720px) {
  .sec-come__inner { padding-inline: 0; }
  .sec-come__title { font-size: 34px; line-height: 1.06; letter-spacing: -0.7px; }
  .come-step { padding: 28px; }
}

/* ============================================================
   HOME — Section "L'APP"
   Figma: nodo 230:1071
   ============================================================ */
.sec-app {
  position: relative;
  padding: 96px var(--sp-s);
  background: var(--c-bunker);
  overflow: hidden;
}
.sec-app__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  width: 100%;
  max-width: 1176px;
  margin-inline: auto;
  padding: var(--sp-xl);
}
/* Gradient — Figma 230:1073 (x=-140 y=195.82, 560 × 560) */
.sec-app__glow {
  position: absolute;
  left: -140px;
  top: 195.82px;
  width: 560px;
  height: 560px;
  border-radius: 280px;
  filter: blur(40px);
  background: radial-gradient(circle at 50% 50%,
              rgba(53, 209, 223, 0.30) 0%, rgba(53, 209, 223, 0) 64%);
  pointer-events: none;
}
.sec-app__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15.2px;
  flex: 1 1 0;
  min-width: 0;
  padding-top: 6.91px;
}
/* Occhiello lime su fondo scuro — Figma 230:1076 */

/* Heading 2 — Figma 230:1080 (nodo alto 46 = riga singola) */
.sec-app__title {
  font-family: var(--f-1);
  font-weight: var(--fw-800);
  font-size: var(--fs-44);
  line-height: var(--lh-46-2);
  letter-spacing: var(--ls--0-88);
  color: var(--c-white);
}
/* Figma 230:1082 (nodo 492 × 82 = 3 righe da 27.2) */
.sec-app__lead {
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: 17px;
  line-height: var(--lh-27-2);
  color: var(--c-tower-gray);
}

/* Colonna delle due tessere — Figma 230:1083 */
.sec-app__cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  flex: 1 1 0;
  min-width: 0;
}
/* Overlay+Border — Figma 230:1084 / 230:1091 */
.app-card {
  min-height: 196.91px;
  padding: 26px 25px 25px;
  background: var(--c-white-4);
  border: var(--sw-1) solid var(--c-azure-16);
  border-radius: 16px;
}
/* Overlay — Figma 230:1085 / 230:1092 */
.app-card__badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-family: var(--f-3);
  font-weight: var(--fw-600);
  font-size: var(--fs-11);
  line-height: var(--lh-17-6);
  letter-spacing: var(--ls-1-54);
  text-transform: uppercase;
  white-space: nowrap;
}
.app-card__badge--lime { background: var(--c-conifer-16); color: var(--c-conifer); }
.app-card__badge--cyan { background: var(--c-scooter-16); color: var(--c-scooter); }

/* Heading 4 — Figma 230:1088 / 230:1095 */
.app-card__title {
  margin-top: 6.9px;
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: 20px;
  line-height: var(--lh-32);
  color: var(--c-white);
}
/* Figma 230:1090 / 230:1097 (nodo 442 × 68 = 3 righe da 22.4) */
.app-card__text {
  margin-top: 6.9px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-14);
  line-height: var(--lh-22-4);
  color: var(--c-grey-62);
}

@media (max-width: 1100px) {
  .sec-app__inner { flex-direction: column; align-items: stretch; padding: 40px 0; gap: 40px; }
  .sec-app__copy, .sec-app__cards { flex: 0 0 auto; }
  .sec-app__glow { display: none; }
}
@media (max-width: 720px) {
  .sec-app { padding: 72px var(--sp-s); }
  .sec-app__title { font-size: 32px; line-height: 1.08; letter-spacing: -0.6px; }
  .sec-app__lead { font-size: var(--fs-16); line-height: var(--lh-25-6); }
  .app-card { min-height: 0; padding: 22px; }
}

/* ============================================================
   HOME — Section "PER CHI È PENSATO"
   Figma: nodo 230:1098 (contenitore da 1240, senza fondo proprio)
   ============================================================ */
.sec-perchi {
  padding: 96px var(--sp-s);
}
.sec-perchi__inner {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 32px;
}
.sec-perchi__intro { max-width: 605.63px; padding-top: 6.91px; }
/* Heading 2 — Figma 230:1104 (605.63 × 104 = 2 righe da 52) */
.sec-perchi__title {
  padding-top: 14.9px;
  font-family: var(--f-1);
  font-weight: var(--fw-800);
  font-size: var(--fs-50);
  line-height: var(--fs-52);
  letter-spacing: var(--ls--1-1);
  color: var(--c-bunker);
}
/* Figma 230:1106 (605.63 × 92 = 3 righe da 30.4) */
.sec-perchi__lead {
  padding-top: 15.7px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-19);
  line-height: var(--lh-30-4);
  color: var(--c-shuttle-gray);
}

/* Quattro tessere — Figma 230:1107 (282 × 254.39, passo 298) */
.perchi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.perchi-card {
  background: var(--c-white);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 24px 50px -26px rgba(11, 16, 18, 0.4);
}
.perchi-card__photo {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
}
.perchi-card__body { padding: 25px; }
.perchi-card__title {
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-25-6);
  color: var(--c-bunker);
}
.perchi-card__text {
  margin-top: 5.4px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-14);
  line-height: var(--lh-22-4);
  color: var(--c-shuttle-gray);
}

/* Fascia finale — Figma 230:1112 (1176 × 225.59) */
.perchi-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xl);
  min-height: 225.59px;
  margin-top: 24px;
  padding: 40px 42px;
  border-radius: 34px;
  background: linear-gradient(125deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
}
.perchi-banner__copy { max-width: 605.63px; }
/* Heading 4 — Figma 230:1115 (2 righe da 44.8) */
.perchi-banner__title {
  max-width: 493px;
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-28);
  line-height: var(--lh-44-8);
  color: var(--c-bunker);
}
/* Figma 230:1117 (600 × 48 = 2 righe da 24) */
.perchi-banner__text {
  max-width: 600px;
  margin-top: 8px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-15);
  line-height: var(--fs-24);
  color: var(--c-bunker);
}
/* Button — Figma 230:1118 (173 × 60) */
.perchi-banner .btn-dark { width: 173px; flex-shrink: 0; }

@media (max-width: 1100px) {
  .perchi-cards { grid-template-columns: repeat(2, 1fr); }
  .perchi-banner { flex-direction: column; align-items: flex-start; min-height: 0; gap: 28px; }
}
@media (max-width: 720px) {
  .sec-perchi { padding: 72px var(--sp-s); }
  .sec-perchi__inner { padding-inline: 0; }
  .sec-perchi__title { font-size: 34px; line-height: 1.06; letter-spacing: -0.7px; }
  .sec-perchi__lead { font-size: var(--fs-16); line-height: var(--lh-27-2); }
  .perchi-cards { grid-template-columns: 1fr; }
  .perchi-banner { padding: 28px; border-radius: 26px; }
  .perchi-banner__title { font-size: 24px; line-height: 1.25; }
}

/* ============================================================
   HOME — Section "FAQ"
   Figma: nodo 230:1123
   ============================================================ */
.sec-faq { padding: 96px var(--sp-s); }
.sec-faq__inner {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 32px;
}
.sec-faq__intro { max-width: 605.63px; padding-top: 6.91px; }
/* Heading 2 — Figma 230:1129 (605.63 × 52 = riga singola) */
.sec-faq__title {
  padding-top: 15.69px;
  font-family: var(--f-1);
  font-weight: var(--fw-800);
  font-size: var(--fs-50);
  line-height: var(--fs-52);
  letter-spacing: var(--ls--1-1);
  color: var(--c-bunker);
}

/* ============================================================
   HOME — Section "CTA FINALE"
   Figma: nodo 230:1155
   ============================================================ */
.sec-cta {
  position: relative;
  padding: 128px var(--sp-s);
  overflow: hidden;
  text-align: center;
}
/* Gradient+Blur — Figma 230:1156 e 230:1157 */
.sec-cta__glow--cyan {
  position: absolute;
  left: 257px; top: 17px;
  width: 760px; height: 460px;
  border-radius: 230px;
  filter: blur(40px);
  background: radial-gradient(ellipse at 50% 50%,
              rgba(53, 209, 223, 0.28) 0%, rgba(53, 209, 223, 0) 64%);
  pointer-events: none;
}
.sec-cta__glow--lime {
  position: absolute;
  left: 1020px; top: 288px;
  width: 560px; height: 380px;
  border-radius: 190px;
  filter: blur(40px);
  background: radial-gradient(ellipse at 50% 50%,
              rgba(194, 232, 80, 0.26) 0%, rgba(194, 232, 80, 0) 64%);
  pointer-events: none;
}
.sec-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 32px;
}
.sec-cta .eyebrow { padding-top: 6.91px; }
/* Heading 2 — Figma 230:1163 (390 × 130 = 2 righe da 64.68) */
.sec-cta__title {
  max-width: 390px;
  margin-top: 18.5px;
  font-family: var(--f-1);
  font-weight: var(--fw-800);
  font-size: var(--fs-50);
  line-height: var(--lh-64-68);
  letter-spacing: var(--ls--1-1);
  /* gradiente ancorato all'intero blocco di testo, come nel Figma */
  background: linear-gradient(125deg,
              var(--c-java) 0%, var(--c-scooter) 30%,
              var(--c-green-74) 62%, var(--c-conifer) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec-cta__title span { color: var(--c-bunker); }
/* Figma 230:1165 (458 × 61 = 2 righe da 30.4) */
.sec-cta__lead {
  max-width: 458px;
  margin-top: 23.5px;
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-19);
  line-height: var(--lh-30-4);
  color: var(--c-shuttle-gray);
}
/* Button — Figma 230:1167 (263.01 × 62) */

/* Link agli store — Figma 230:1172 */
.store-links {
  display: flex;
  justify-content: center;
  gap: var(--sp-14);
  margin-top: 33.5px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56.64px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--c-bunker);
  color: var(--c-white);
  transition: transform .18s ease;
}
.store-badge:hover { transform: translateY(-1px); }
.store-badge__icon { flex-shrink: 0; }
.store-badge__label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.store-badge__small {
  font-family: var(--f-2);
  font-weight: var(--fw-400);
  font-size: var(--fs-11);
  line-height: var(--lh-17-6);
}
.store-badge__name {
  font-family: var(--f-1);
  font-weight: var(--fw-700);
  font-size: var(--fs-16);
  line-height: var(--lh-25-6);
}

@media (max-width: 1024px) {
  .sec-cta__glow--cyan, .sec-cta__glow--lime { display: none; }
  .sec-cta { padding: 96px var(--sp-s); }
}
@media (max-width: 720px) {
  .sec-faq { padding: 72px var(--sp-s); }
  .sec-faq__inner, .sec-cta__inner { padding-inline: 0; }
  .sec-faq__title { font-size: 34px; line-height: 1.06; letter-spacing: -0.7px; }
  .sec-cta__title { font-size: 36px; line-height: 1.15; letter-spacing: -0.7px; }
  .sec-cta__lead { font-size: var(--fs-16); line-height: var(--lh-25-6); }
  .store-links { flex-direction: column; align-items: center; }
}