/* ==========================================================================
   Student Village — UBox Tour 2026
   Landing promozionale Tour + Passaporto · UniversityBox
   Sorgente design: Figma "Passaporto" · node 37:4769
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN
   I nomi seguono le variabili Figma. Tre varianti di arancio invece di una:
   #FF7A00 non raggiunge il rapporto di contrasto AA sul testo piccolo e sul
   display, quindi il testo usa toni piu' scuri della stessa famiglia mentre
   le campiture (pallini, bordi, filetti) restano sul brand puro.
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --brand-dark:     #2D3748;
  --orange:         #FF7A00; /* campiture, bordi, filetti */
  --orange-display: #E86A00; /* testo grande (>=24px) */
  --orange-text:    #A84300; /* testo piccolo (<=18px) */
  --orange-solid:   #CC4400; /* campiture che portano testo bianco: 4.83:1 */
  --orange-tint:    #FFEDD5;

  /* le 4 aree */
  --save:       #FFC700;
  --save-dark:  #966200;
  --save-tint:  #FBEDB7;
  --save-wash:  #FEF8EC;

  --earn:       #02873E;
  --earn-dark:  #1B7833;
  --earn-tint:  #C8EBE3;
  --earn-wash:  #EDF8F0;

  --work:       #0160EE;
  --work-dark:  #0A58CA;
  --work-tint:  #CED8F1;
  --work-wash:  #EBF3FF;

  --fun:        #8A4DFF;
  --fun-dark:   #6321D5;
  --fun-tint:   #E0D4F4;
  --fun-wash:   #F3EDFD;

  /* neutri (tinti verso il blu del brand) */
  --ink:        #0F172A;
  --body:       #475569;
  /* #64748B (valore Figma) passa su bianco con 4.76 ma scende a 4.45 sul
     fondo --bg: fallisce ovunque il testo secondario stia su fondo chiaro
     e non su bianco. Questo tono passa su entrambi (4.91 / 5.26). */
  --muted:      #5F6D86;
  --stroke:     #CCD4DE;
  --dividers:   #E4EAF2;
  --hairline:   #F1F5F9;
  --bg:         #F6F7FB;
  --surface:    #FFFFFF;
  --on-dark:    #DFE6EF;

  /* tipografia */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt:  "Plus Jakarta Sans", "Poppins", system-ui, sans-serif;

  /* Scala tipografica a 7 passi.
     La parte alta era già decisa (1.33–1.50 fra i passi); la parte bassa aveva
     sei corpi entro 6px (11, 12, 13, 14, 16, 17, 20) che non producevano
     gerarchia ma solo rumore: tre titoli di card a tre corpi diversi e lo
     stesso testo secondario a 14px con cinque interlinee. Qui i passi sono
     pochi e distinti; dove due ruoli restano vicini (18 titolo / 16 corpo)
     a separarli è il peso, non la taglia. */
  --t-3xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);          /* 32→48  titolo sezione finale */
  --t-2xl: clamp(1.75rem, 1.16rem + 1.85vw, 2.25rem);  /* 28→36  titolo di sezione */
  --t-xl:  clamp(1.375rem, 1.2rem + 0.55vw, 1.5rem);   /* 22→24  città, area */
  --t-lg:  1.125rem;   /* 18  titoli di card */
  --t-md:  1rem;       /* 16  corpo principale, CTA grande */
  --t-sm:  0.875rem;   /* 14  corpo secondario, link, bottoni */
  --t-xs:  0.75rem;    /* 12  etichette, meta, note */

  /* interlinea per ruolo, non per elemento */
  --lh-display: 0.955;
  --lh-title:   1.3;
  --lh-body:    1.6;
  --lh-label:   1.4;

  /* Scala di spaziatura, base 4px. Prima i valori venivano dai px del Figma
     (25, 29, 33, 13, 5, 7, 11...) e non appartenevano a nessun sistema. */
  --space-2xs: 0.25rem;  /*  4 */
  --space-xs:  0.5rem;   /*  8 */
  --space-sm:  0.75rem;  /* 12 */
  --space-md:  1rem;     /* 16 */
  --space-lg:  1.5rem;   /* 24 */
  --space-xl:  2rem;     /* 32 */

  /* Ritmo verticale. Fluido: 64px fisso era stretto su un monitor grande e
     lungo da scorrere sul telefono. Il distacco fra sezioni resta circa 3,5×
     quello fra testata e contenuto, così i blocchi si leggono come gruppi. */
  --sec-y:   clamp(3rem, 1.8rem + 3.6vw, 5.5rem);   /* 48→88 */
  --sec-gap: clamp(2rem, 1.4rem + 1.8vw, 3rem);     /* 32→48 */

  /* ritmo */
  --shell:      1280px;
  --gutter:     clamp(1.25rem, 0.55rem + 2.2vw, 2rem);
  --radius-card: 24px;
  --radius-pill: 100px;

  /* elevazione */
  --lift-card:  0 10px 30px -5px rgb(15 23 42 / 0.06);
  --lift-hover: 0 18px 40px -8px rgb(15 23 42 / 0.13);
  --lift-flat:  0 8px 15px rgb(15 23 42 / 0.05);

  /* motion — ease-out esponenziale, nessun rimbalzo */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--work);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--brand-dark);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. PRIMITIVE
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* la nav è sticky: ogni bersaglio di ancoraggio si ferma sotto di essa */
:target,
.tappe,
.signup { scroll-margin-top: 5rem; }
@media (max-width: 1023px) {
  :target,
  .tappe,
  .signup { scroll-margin-top: 8rem; }
}

/* --- bottoni --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease),
              background-color 180ms var(--ease), color 180ms var(--ease);
}
.btn--dark { background: var(--brand-dark); color: #fff; }
.btn--dark:hover { background: #232D3D; box-shadow: var(--lift-hover); transform: translateY(-2px); }
.btn--dark:active { transform: translateY(0); }
/* arancione = registrazione. Scuro = navigazione e azioni per singola città:
   quattro bottoni arancioni nella griglia tappe avrebbero fatto perdere
   l'unica azione che conta davvero in apertura. */
.btn--brand { background: var(--orange-solid); color: #fff; }
.btn--brand:hover {
  background: #B33B00;
  box-shadow: 0 14px 28px -10px rgb(204 68 0 / 0.5);
  transform: translateY(-2px);
}
.btn--brand:active { transform: translateY(0); }
.btn--lg { padding: 0.9375rem 2.25rem; font-size: var(--t-md); }
.btn--block { width: 100%; }

/* --- icone come maschere: ricolorabili con currentColor --- */
.ico {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.ico--clock { --ico: url(../assets/icons/clock.svg); }
.ico--ext   { --ico: url(../assets/icons/arrow-up-right.svg); }

/* nota su dati non ancora confermati */
.provvisorio {
  color: var(--muted);
  font-size: var(--t-xs);
  font-style: italic;
  line-height: var(--lh-label);
}

/* --- pill di navigazione --- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--brand-dark);
  border-radius: var(--radius-pill);
  color: var(--brand-dark);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
              transform 220ms var(--ease);
}
.pill:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }

/* --- eyebrow (badge testuale) --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: var(--lh-label);
  text-transform: uppercase;
}
.eyebrow img { flex: none; }
.eyebrow--orange { background: var(--orange-tint); color: var(--orange-text); }
.eyebrow--slate  { background: var(--dividers);   color: var(--body); }
.eyebrow--gold   {
  background: rgb(150 98 0 / 0.3);
  border: 1px solid rgb(255 199 0 / 0.45);
  color: var(--save);
  padding: 0.3125rem 0.8125rem;
}

/* --- titoli di sezione --- */
.h2 {
  color: var(--ink);
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.11;
  text-wrap: balance;
}
.h2--xl {
  font-size: var(--t-3xl);
  letter-spacing: -0.025em;
  line-height: 1;
}
.lede {
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--t-md);
  line-height: var(--lh-body);
}

/* --- banner "non c'è la tua città" ---
   Compare due volte, identico: sotto la griglia delle tappe e nella sezione
   finale. Fondo bianco e bordo arancio chiaro, così funziona sia sul bianco
   della sezione tappe sia sul fondo scuro di quella finale.
   Le icone sono maschere CSS sui file reali del set (pin e sparkle): il
   mascheramento le rende bianche senza dover riesportare l'asset. */
.altrove {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface);
  border: 1px solid rgb(255 122 0 / 0.28);
  border-radius: 20px;
}
.altrove__main {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1 1 22rem;
  min-width: 0;
}
.altrove__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: var(--orange-solid);
}
.altrove__tile::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background: #fff;
  -webkit-mask: url(../assets/icons/pin.svg) center / contain no-repeat;
          mask: url(../assets/icons/pin.svg) center / contain no-repeat;
}
.altrove__title {
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: var(--lh-title);
}
.altrove__text {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.altrove__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--orange-solid);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.25;
  transition: background-color 180ms var(--ease), transform 220ms var(--ease),
              box-shadow 220ms var(--ease);
}
.altrove__cta:hover {
  background: #B33B00;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgb(204 68 0 / 0.55);
}
.altrove__cta:active { transform: translateY(0); }
.altrove__cta-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url(../assets/icons/sparkle.svg) center / contain no-repeat;
          mask: url(../assets/icons/sparkle.svg) center / contain no-repeat;
}

/* La CTA va a capo intorno ai 710px. Quando finisce su una riga propria la
   stiro a tutta larghezza: lasciata a 240px allineata a sinistra sembrava un
   bottone orfano. */
@media (max-width: 767px) {
  .altrove__main { flex-basis: 100%; }
  .altrove__cta  { width: 100%; }
}
@media (max-width: 599px) {
  .altrove { padding: 1rem; gap: 1rem; border-radius: 16px; }
  .altrove__title { font-size: 1rem; }
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}
.section-head--center {
  align-items: center;
  text-align: center;
}
.section-head--center .lede { max-width: 42rem; }

/* --------------------------------------------------------------------------
   4. NAV
   Desktop: logo | pill citta' | CTA.
   Sotto 1024px le pill scendono su una riga propria a scorrimento
   orizzontale: quattro voci non giustificano un drawer, e restano
   raggiungibili con un solo tap.
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* fondo pieno, non translucido: le illustrazioni del hero passandoci sotto
     lasciavano una macchia di colore dietro le pill */
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--dividers);
  box-shadow: 0 4px 20px -12px rgb(15 23 42 / 0.35);
}
.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem 1rem;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.5rem var(--gutter);
}
.nav__logo img { width: 3rem; height: 3rem; }

.nav__cities { min-width: 0; }
.nav__cities-list {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}
.nav__cta { flex: none; padding-inline: 1rem; }

/* Sotto i 1024px le pill città scendevano su una riga propria scorrevole:
   su tablet e mobile sono una seconda riga di navigazione ridondante con le
   card tappa poco sotto. Le nascondiamo del tutto: la nav resta sempre a una
   riga logo/CTA, e le città restano raggiungibili scorrendo alla sezione
   Tappe. */
@media (max-width: 1023px) {
  .nav__inner {
    /* 1fr, non "auto": una colonna auto senza fr si espande a consumare
       tutto lo spazio libero della griglia, stirando la CTA ben oltre il
       suo testo. 1fr assegna lo spazio alla colonna, non al bottone, che
       resta della sua dimensione naturale grazie a justify-self: end. */
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo cta";
  }
  .nav__logo { grid-area: logo; }
  .nav__cta  { grid-area: cta; justify-self: end; }
  .nav__cities { display: none; }
}

@media (max-width: 380px) {
  .nav__logo img { width: 2.5rem; height: 2.5rem; }
  .nav__cta { font-size: 0.75rem; padding-inline: 0.875rem; }
}

/* --------------------------------------------------------------------------
   5. HERO
   Le sei illustrazioni sono una composizione, non decorazione intercambiabile.
   Regola strutturale: ogni illustrazione sta in una zona della griglia e
   sborda SOLO verso l'esterno della pagina (margine negativo sul lato esterno,
   o ancoraggio al bordo esterno). Conseguenze garantite a ogni larghezza:
     · il wordmark occupa la colonna centrale, dove nessuna zona può entrare;
     · i quattro blob colorati stanno in quattro zone distinte, mai la stessa;
     · valigia e porcellino sono props e possono stare sul proprio blob.
   Le illustrazioni sono in flusso dentro la zona: la griglia dimensiona le
   righe sul contenuto, quindi non esiste nemmeno sovrapposizione verticale.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 45rem) minmax(8rem, 1fr);
  grid-template-rows: 11rem minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "left fun  earn"
    "left copy earn"
    "left copy base";
  gap: 1.5rem 0;
  min-height: 45rem;
  padding: 2rem 0 4rem;
}

/* Le zone hanno altezza definita dalla griglia. Ogni illustrazione è
   dimensionata in ALTEZZA come percentuale della propria zona: non può quindi
   uscirne in verticale. In orizzontale è ancorata al bordo esterno, quindi
   cresce solo verso fuori pagina. */
.hz {
  position: relative;
  min-width: 0;
  pointer-events: none;
}
.hz--work { grid-area: left; }
.hz--case { grid-area: left; }
.hz--fun  { grid-area: fun; }
.hz--earn { grid-area: earn; }
.hz--base { grid-area: base; }

.blob {
  position: absolute;
  width: auto;
  max-width: 100%;   /* impedisce a un'illustrazione di uscire dalla sua colonna */
  will-change: transform;
}

/* I rapporti qui sotto sono quelli dei viewBox RITAGLIATI sull'inchiostro
   (vedi README): negli export Figma work.svg aveva il 20% di vuoto a destra e
   save.svg l'11%, che con l'ancoraggio al bordo spingeva il disegno fuori
   colonna lasciando la fascia laterale quasi vuota. */

/* Blob che sbordano fuori pagina: ancorati al bordo interno e liberi di
   crescere verso l'esterno, quindi con max-width disattivata. */
.blob--work { right: 0; bottom: 10%; height:  72%; aspect-ratio: 903 / 339; max-width: none; }
.blob--save { left:  0; bottom:   0; height: 150%; aspect-ratio: 750 / 234; max-width: none; }

/* Illustrazioni a filo di un margine della pagina: interamente visibili,
   tenute dentro la colonna da max-width 100%.
   height: auto è obbligatorio — l'attributo height="…" dell'<img> è un
   presentational hint che altrimenti batte aspect-ratio e le schiaccia. */
.blob--suitcase { left:  0; top: 0;    width: min(100%, 22rem);   height: auto; aspect-ratio: 349 / 234; }
.blob--earn     { right: 0; top: 0;    width: min(100%, 24.2rem); height: auto; aspect-ratio: 387 / 279; }
.blob--money    { right: 0; bottom: 0; width: min(100%, 20rem);   height: auto; aspect-ratio: 365 / 312; }

/* il viola è l'unico dentro la colonna del testo: sta sopra di esso */
.blob--fun { left: 50%; translate: -50% 0; bottom: 0; height: 96%; aspect-ratio: 402 / 149; }

.hero__copy {
  grid-area: copy;
  position: relative;
  z-index: 10;
  align-self: start;   /* il wordmark resta appena sotto il blob viola */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
  min-width: 0;
  text-align: center;
  container-type: inline-size;
}

/* --- wordmark ---
   Riga 1 Poppins Black arancio, riga 2 Poppins Regular con tracking 0.4375em:
   alla misura di progetto le due righe hanno la stessa larghezza ottica.
   Il tracking lascia uno spazio in coda all'ultima lettera, quindi il
   padding-left riporta la riga al centro esatto. */
/* La riga piu' larga e' la seconda: 9.51em di testo + 0.44em di tracking in
   coda + 0.44em di compensazione = 9.95em. Dimensionare sul contenitore
   (non su vw) e' l'unico modo perche' non tocchi mai i bordi, gutter incluso. */
.wordmark {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.95rem, 0.35rem + 4.6vw, 4.523rem); /* fallback senza container query */
  font-size: min(9.9cqw, 4.523rem);
  line-height: 0.955;
  text-transform: uppercase;
  white-space: nowrap;
}
/* "Partecipa allo": occhiello sopra il wordmark. Resta piccolo e scuro perché
   l'arancione deve restare l'unico accento, sulla frase che identifica
   l'evento. Il padding compensa lo spazio che il tracking lascia in coda. */
.wordmark__kicker {
  margin-bottom: 0.8em;
  color: var(--brand-dark);
  /* 0.3em del wordmark, ma non sotto i 13px: su schermi stretti il wordmark
     scende a ~28px e un occhiello proporzionale diventerebbe illeggibile */
  font-size: max(0.8125rem, 0.3em);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  padding-left: 0.14em;
}
.wordmark__top {
  color: var(--orange-display);
  font-weight: 900;
  letter-spacing: 0;
}
.wordmark__bottom {
  color: var(--brand-dark);
  font-weight: 400;
  letter-spacing: 0.4375em;
  padding-left: 0.4375em;
}

/* --- sotto 1024px le colonne laterali diventerebbero troppo strette: la
       composizione si impila in tre fasce. Viola e verde sopra (due colonne),
       il testo in mezzo su tutta la larghezza, blu e giallo sotto (due
       colonne). Stessa regola: ogni blob sborda solo verso l'esterno. --- */
/* 1151px e non 1023: sotto quella soglia le colonne laterali del hero
   scendono sotto i ~215px e le illustrazioni a filo margine diventano più
   piccole di quanto le renda il layout impilato. */
@media (max-width: 1151px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    /* Ogni fascia ha altezza esplicita e le illustrazioni sono misurate in
       percentuale della fascia: restano confinate lì dentro. Il viola prende
       una riga propria perché è l'unico blob che non ha un margine di pagina
       assegnato, e affiancarlo al verde li avrebbe fatti competere. */
    grid-template-rows:
      clamp(7rem, 28vw, 10rem)      /* valigia a sinistra, verde a destra */
      clamp(4.5rem, 19vw, 7rem)     /* viola */
      auto                           /* wordmark e CTA */
      clamp(9rem, 36vw, 14rem);     /* blu a sinistra, giallo e porcellino a destra */
    grid-template-areas:
      "case earn"
      "fun  fun"
      "copy copy"
      "left base";
    align-content: start;
    /* il column-gap tiene separati blu e giallo, che altrimenti si
       toccherebbero esattamente sull'asse centrale della pagina */
    gap: 1.25rem 1.25rem;
    min-height: 0;
    padding: 1.5rem 0 4rem;
  }

  .hz--case { grid-area: case; }
  .hz--work { grid-area: left; }

  /* La riga del testo è subito sotto la fascia alta e subito sopra quella
     bassa, quindi qui nulla può sfondare in verticale. Le illustrazioni a
     filo margine vanno contenute su ENTRAMBI gli assi: max-width e max-height
     insieme le rimpiccioliscono in proporzione, mentre un'altezza fissa più
     un max-width che taglia le schiaccerebbe. */
  .blob--suitcase,
  .blob--earn,
  .blob--fun,
  .blob--money {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 96%;
  }
  .blob--suitcase { top: 0;    }
  .blob--earn     { top: 0;    }
  .blob--fun      { bottom: 0; }
  .blob--money    { bottom: 0; max-height: 100%; }

  /* questi due sbordano fuori pagina (max-width: none), niente da vincolare */
  .blob--work { bottom: 0; height: 88%; }
  .blob--save { bottom: 0; height: 78%; }

  .hero__copy { gap: 1.75rem; padding: 0.5rem var(--gutter); }
}

@media (max-width: 479px) {
  .hero { padding-bottom: 3.5rem; }
}

/* --- i tre passi sotto la CTA ---
   Stanno dentro la colonna del testo, quindi non toccano le illustrazioni. */
.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-sm);
  color: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
}
.steps__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.steps__item + .steps__item::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1px;
  margin-right: 0.25rem;
  background: var(--stroke);
}
.steps__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--brand-dark);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}
/* in riga i tre passi si spezzerebbero male: sotto i 640px diventano un elenco */
@media (max-width: 639px) {
  .steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    text-align: left;
  }
  .steps__item + .steps__item::before { display: none; }
}

/* --------------------------------------------------------------------------
   6. TAPPE
   -------------------------------------------------------------------------- */
.tappe {
  position: relative;
  z-index: 20;
  margin-top: -3.5rem;
  padding: var(--sec-y) 0;
  background: var(--surface);
  border-radius: 50px 50px 0 0;
}
.tappe .shell {
  display: flex;
  flex-direction: column;
  gap: var(--sec-gap);
}
.tappe__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.stop {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  box-shadow: var(--lift-card);
  scroll-margin-top: 8.5rem;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease),
              border-color 320ms var(--ease);
}
.stop:hover {
  transform: translateY(-6px);
  border-color: var(--dot);
  box-shadow: var(--lift-hover);
}
.stop__dot {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-md);
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.12), 0 2px 4px -2px rgb(15 23 42 / 0.1);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}
.stop__eyebrow {
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: var(--lh-label);
  text-transform: uppercase;
}
.stop__city {
  margin-bottom: var(--space-sm);
  color: var(--ink);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.2;
}
.stop__date,
.stop__venue {
  display: flex;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--t-xs);
  line-height: var(--lh-label);
}
.stop__date {
  align-items: center;
  color: var(--orange-text);
  font-size: var(--t-sm);
  font-weight: 700;
}
.stop__time {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  color: var(--body);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: var(--lh-label);
}
.stop__venue {
  align-items: flex-start;
  margin: var(--space-xs) 0 0;
  color: var(--muted);
}
.stop__addr { display: block; margin-top: var(--space-2xs); }
.stop__map {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  align-self: flex-start;
  margin: var(--space-sm) 0 var(--space-lg);
  color: var(--orange-text);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: var(--lh-label);
  text-decoration: underline;
  text-decoration-color: rgb(168 67 0 / 0.32);
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms var(--ease);
}
.stop__map:hover { text-decoration-color: currentColor; }
.stop__date img,
.stop__venue img { flex: none; margin-top: 0.125rem; }
/* la CTA resta ancorata in basso anche quando i nomi dei campus vanno a capo */
.stop .btn { margin-top: auto; }

@media (max-width: 1023px) {
  .tappe { border-radius: 40px 40px 0 0; }
  .tappe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .tappe { margin-top: -2.5rem; border-radius: 32px 32px 0 0; }
  .tappe__grid { grid-template-columns: 1fr; gap: 1rem; }
  .stop { scroll-margin-top: 10.5rem; }
  .stop__map { margin-bottom: 1.125rem; }
}

/* --------------------------------------------------------------------------
   7. PARTNER — marquee
   Il frame Figma si chiama "slider" e il claim parla di oltre 50 aziende:
   uno scorrimento continuo dice la verita' meglio di otto chip statiche e
   risolve l'overflow senza tagli.
   -------------------------------------------------------------------------- */
.partners {
  padding: clamp(2.25rem, 1.6rem + 2vw, 3.25rem) 0;
  background: var(--brand-dark);
  overflow: hidden;
}
.partners__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.partners__title {
  color: #fff;
  font-family: var(--font-alt);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: var(--lh-label);
  text-transform: uppercase;
}
.partners__count {
  color: var(--orange);
  font-family: var(--font-alt);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: var(--lh-label);
}

.marquee {
  display: flex;
  gap: 1.25rem;
  width: 100%;
  padding-block: 0.5rem;
  mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.marquee__track {
  display: flex;
  flex: none;
  gap: 1.25rem;
  padding-right: 1.25rem;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

.chip {
  flex: none;
  padding: 0.8125rem 1.5625rem;
  background: var(--surface);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 1px rgb(15 23 42 / 0.06);
  color: var(--chip, var(--ink));
  font-family: var(--font-alt);
  font-size: var(--t-sm);
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .marquee { mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); }
}

/* Nessuna animazione: il nastro diventa una lista scorribile a mano. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    mask-image: none;
  }
  .marquee__track { animation: none; }
  .marquee__track[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   8. AREE
   -------------------------------------------------------------------------- */
.aree {
  padding: var(--sec-y) 0;
  background: var(--bg);
  border-block: 1px solid var(--hairline);
}
.aree .shell {
  display: flex;
  flex-direction: column;
  gap: var(--sec-gap);
  align-items: center;
}
.aree__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.area {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--lift-flat);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.area:hover { transform: translateY(-4px); box-shadow: var(--lift-hover); }

.area__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}
.area__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  background: var(--tint);
}
.area__eyebrow {
  color: var(--accent-dark);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: var(--lh-label);
  text-transform: uppercase;
}
.area__title {
  color: var(--ink);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.area__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.8125rem;
  background: var(--wash);
  border: 1px solid var(--accent-fade);
  border-radius: var(--radius-pill);
  color: var(--accent-dark);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: var(--lh-label);
  white-space: nowrap;
}
.area__stat img { flex: none; }
.area__body {
  color: var(--body);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

.area--save { --tint: var(--save-tint); --accent-dark: var(--save-dark); --wash: var(--save-wash); --accent-fade: rgb(245 166 35 / 0.28); }
.area--earn { --tint: var(--earn-tint); --accent-dark: var(--earn-dark); --wash: var(--earn-wash); --accent-fade: rgb(40 167 69 / 0.24); }
.area--work { --tint: var(--work-tint); --accent-dark: var(--work-dark); --wash: var(--work-wash); --accent-fade: rgb(13 110 253 / 0.22); }
.area--fun  { --tint: var(--fun-tint);  --accent-dark: var(--fun-dark);  --wash: var(--fun-wash);  --accent-fade: rgb(122 57 237 / 0.22); }

@media (max-width: 1023px) {
  .aree__grid { grid-template-columns: 1fr; }
  /* la statistica scende sotto il titolo invece di comprimerlo */
  .area__head {
    grid-template-columns: auto 1fr;
    row-gap: var(--space-sm);
  }
  .area__stat { grid-column: 1 / -1; justify-self: start; white-space: normal; }
}
@media (max-width: 479px) {
  .area__icon { width: 2.75rem; height: 2.75rem; }
  .area__icon img { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   8b. BRAND & EXPERIENCE
   La fascia loghi dice chi c'è; qui si dice cosa fa ciascuno e dove.
   La card è l'affordance giusta: sei record con la stessa struttura di dati.
   L'unica differenza fra le card è il colore del logo, non decorazioni.
   -------------------------------------------------------------------------- */
.brands {
  padding: var(--sec-y) 0;
  background: var(--surface);
}
.brands .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sec-gap);
}
.brands__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  box-shadow: var(--lift-card);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.brand:hover { transform: translateY(-4px); box-shadow: var(--lift-hover); }

.brand__logo {
  align-self: flex-start;   /* la pillola non deve stirarsi su tutta la card */
  padding: 0.4375rem 0.9375rem;
  background: var(--bg);
  border: 1px solid var(--dividers);
  border-radius: var(--radius-pill);
  color: var(--chip);
  font-family: var(--font-alt);
  font-size: var(--t-sm);
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}
.brand__text {
  flex: 1;
  color: var(--body);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.brand__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
}
.brand__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
}
.brand__link:hover { color: var(--ink); text-decoration-color: currentColor; }
.brand__link--primary { color: var(--orange-text); font-weight: 700; }
.brand__link--primary:hover { color: var(--orange-text); text-decoration-color: currentColor; }

@media (max-width: 1023px) {
  .brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .brands__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8c. PROGRAMMA DELLA GIORNATA
   -------------------------------------------------------------------------- */
.programma {
  padding: var(--sec-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.programma .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sec-gap);
}
.agenda {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  max-width: 44rem;
}
/* binario verticale fra la colonna degli orari e quella delle attività.
   --stroke e non --dividers: quest'ultimo sul fondo chiaro fa 1.06:1 e la
   linea semplicemente non si vedeva. */
.agenda::before {
  content: "";
  position: absolute;
  left: 4.75rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--stroke);
}
.agenda__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  gap: 0 2.25rem;
  align-items: start;
}
.agenda__item::before {
  content: "";
  position: absolute;
  left: calc(4.75rem + 1px);
  top: 0.45rem;
  translate: -50% 0;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--orange-solid);
  box-shadow: 0 0 0 3px var(--bg);
}
.agenda__time {
  color: var(--orange-text);
  font-size: var(--t-sm);
  font-weight: 800;
  line-height: var(--lh-label);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.agenda__title {
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: var(--lh-title);
}
.agenda__text {
  margin-top: var(--space-2xs);
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

@media (max-width: 599px) {
  .agenda { gap: 1.375rem; }
  .agenda::before { left: 3.25rem; }
  .agenda__item { grid-template-columns: 2.75rem 1fr; gap: 0 1.5rem; }
  .agenda__item::before { left: calc(3.25rem + 1px); }
}

/* --------------------------------------------------------------------------
   9. PASS / REGISTRAZIONE
   -------------------------------------------------------------------------- */
.signup {
  padding: var(--sec-y) 0;
  background: var(--brand-dark);
}
/* il banner "altra città" sta fuori dalla griglia a due colonne, così prende
   tutta la larghezza come nella sezione tappe */
.signup .shell {
  display: flex;
  flex-direction: column;
  gap: var(--sec-gap);
}
.signup__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25.625rem;
  align-items: center;
  gap: 3rem 5.875rem;
}
.signup__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.signup__pitch .h2 { color: #fff; }
.signup__lede {
  color: var(--on-dark);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  max-width: 46ch;
}
.perks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.perks li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--on-dark);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}
.perks img { flex: none; }

.pass-card {
  padding: var(--space-xl);
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.45);
}
.pass-card__head {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--hairline);
}
.pass-card__title {
  color: var(--ink);
  font-family: var(--font-alt);
  font-size: var(--t-lg);
  font-weight: 800;
  line-height: var(--lh-title);
  text-wrap: balance;
}
.pass-card__sub {
  margin-top: var(--space-2xs);
  color: var(--muted);
  font-family: var(--font-alt);
  font-size: var(--t-xs);
  line-height: var(--lh-label);
}
.pass-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.tappa-tile {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.tappa-tile img { width: 100%; height: auto; }
.tappa-tile:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 28px -10px rgb(15 23 42 / 0.4);
}
.tappa-tile:active { transform: translateY(-1px) scale(1.01); }

@media (max-width: 1023px) {
  .signup__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--sec-gap);
  }
  .signup__pitch { align-items: center; text-align: center; max-width: 40rem; }
  .signup__lede { max-width: 46ch; }
  .perks { align-items: flex-start; }
  .pass-card { width: 100%; max-width: 27rem; }
}
@media (max-width: 479px) {
  .pass-card { padding: var(--space-lg); }
  .pass-card__grid { gap: 0.875rem; }
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem var(--gutter);
  background: var(--brand-dark);
  border-top: 6px solid var(--orange);
  text-align: center;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem 1.25rem;
}
.footer__links a {
  color: var(--orange);
  font-size: var(--t-sm);
  line-height: 1.6;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms var(--ease);
}
.footer__links a:hover { text-decoration-color: currentColor; }
.footer__fine {
  max-width: 70rem;
  color: #fff;
  font-size: var(--t-xs);
  line-height: 1.75;
  text-wrap: pretty;
}
@media (max-width: 599px) {
  .footer__fine { font-size: 0.75rem; line-height: 1.7; }
}

/* --------------------------------------------------------------------------
   11. MOTION
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Solo i due props respirano. I quattro blob colorati restano fermi: qualsiasi
   spostamento, anche di pochi pixel, potrebbe farli toccare. */
@media (min-width: 768px) {
  .blob--suitcase { animation: drift 13s ease-in-out -7s infinite; }
  .blob--money    { animation: drift 17s ease-in-out -2s infinite; }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -12px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   12. STAMPA
   -------------------------------------------------------------------------- */
@media print {
  .nav, .hero__scene, .marquee { display: none; }
  .partners, .signup, .footer { background: #fff; }
  .partners__title, .footer__fine, .signup__pitch .h2, .signup__lede, .perks li { color: #000; }
  .tappe { margin-top: 0; border-radius: 0; }
  .stop, .area { box-shadow: none; break-inside: avoid; }
}