/* ═══════════════════════════════════════════════════════════════════
   PARALLAX & TOUR DEL GESTIONALE

   Tutto cio' che questa versione aggiunge al sito sta qui e in
   parallax.js. Il resto della pagina e' identico all'originale:
   togliendo i due file e la sezione #tour si torna al sito di prima.

   Regole seguite ovunque:
   - si animano solo transform e opacity: sono le sole proprieta' che
     il browser muove senza ricalcolare l'impaginazione, quindi lo
     scorrimento resta fluido anche su telefoni economici;
   - senza JavaScript la pagina resta completa e leggibile: tutte le
     regole "di scena" dipendono dalla classe .px-on, che mette lo
     script solo quando parte davvero;
   - con "riduci movimento" attivo nel sistema (.px-static) niente
     spostamenti, solo dissolvenze.
═══════════════════════════════════════════════════════════════════ */

/* ── Barra di avanzamento della lettura ─────────────────────────── */
.px-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ── Menu con una voce in piu' (Tour) ────────────────────
   Fra 961 e 1180px la fila non starebbe accanto ai due pulsanti:
   invece di mandarla a capo si stringono le spaziature. */
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-in { gap: 12px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 8px; font-size: 0.86rem; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 10px 14px; font-size: 0.84rem; }
}

/* ── Hero: luci sullo sfondo che scorrono a velocita' diverse ───── */
#hero { overflow: clip; }
#hero > .wrap { position: relative; z-index: 1; }
.px-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.px-orbs span {
  position: absolute; border-radius: 50%; filter: blur(70px);
  will-change: transform;
}
.px-orbs span:nth-child(1) { width: 520px; height: 520px; left: -140px; top: 60px;  background: rgba(37,99,235,0.28); }
.px-orbs span:nth-child(2) { width: 420px; height: 420px; right: -120px; top: 180px; background: rgba(245,158,11,0.14); }
.px-orbs span:nth-child(3) { width: 360px; height: 360px; left: 38%;  top: 620px; background: rgba(139,92,246,0.14); }

/* ── Schermata dell'hero: parte inclinata e si raddrizza ───────────
   Lo stesso gesto delle pagine prodotto di Apple: il pannello arriva
   "sdraiato" e si mette dritto davanti a chi legge mentre si scorre. */
.px-on [data-px-tilt] {
  --p: 0;
  transform:
    perspective(1700px)
    translateY(calc((1 - var(--p)) * 40px))
    rotateX(calc((1 - var(--p)) * 22deg))
    scale(calc(0.9 + var(--p) * 0.1));
  transform-origin: 50% 0;
  will-change: transform;
}

[data-px-speed] { will-change: translate; }

/* ── Luci di sfondo delle sezioni ───────────────────────────────── */
.px-has-glow { overflow: clip; }
.px-has-glow > .wrap { position: relative; z-index: 1; }
.px-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; border-radius: 50%; filter: blur(90px);
}
.px-glow.g0 { left: -180px; top: 12%;  background: rgba(37,99,235,0.16); }
.px-glow.g1 { right: -180px; top: 30%; background: rgba(245,158,11,0.09); }
.px-glow.g2 { left: 30%;  top: 45%;    background: rgba(139,92,246,0.10); }

/* ── Riquadri delle funzionalita': una luce segue il puntatore ───── */
.px-on #funzionalita .card { position: relative; overflow: hidden; }
.px-on #funzionalita .card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(245,158,11,0.13), transparent 70%);
  opacity: 0; transition: opacity .25s ease;
}
.px-on #funzionalita .card:hover::after { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════
   INVITO AL TOUR (homepage)
═══════════════════════════════════════════════════════════════════ */
.tour-teaser { padding: 96px 0 8px; }
.teaser-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 36px;
  min-height: 400px; padding: 52px 0 52px 54px;
  border: 1px solid rgba(245,158,11,0.32); border-radius: 24px;
  background:
    radial-gradient(ellipse 620px 340px at 85% 20%, rgba(37,99,235,0.22), transparent 70%),
    radial-gradient(ellipse 420px 260px at 10% 110%, rgba(245,158,11,0.13), transparent 70%),
    linear-gradient(135deg, var(--bg-alt), var(--bg-deep));
}
.teaser-copy { position: relative; z-index: 4; }
.teaser-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 14px; }
.teaser-copy p { color: var(--ink-50); max-width: 40ch; margin-bottom: 26px; }

.teaser-visual { position: relative; display: block; align-self: stretch; min-height: 300px; margin: -52px 0; cursor: pointer; }
.tv-shot, .tv-phone {
  position: absolute; display: block; overflow: hidden;
  background: #0b1222; border: 6px solid #0b1222;
  box-shadow: 0 34px 70px -22px rgba(0,0,0,0.85);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.tv-shot { aspect-ratio: 16 / 9; border-radius: 14px; }
.tv-phone { aspect-ratio: 523 / 993; border-radius: 24px; border-width: 5px; }
.tv-shot img, .tv-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; border-radius: 8px; }
.tv-phone img { border-radius: 18px; }
.tv-back  { width: 64%; right: -12%; top: 6%;  transform: rotate(6deg);  opacity: 0.7; z-index: 1; }
.tv-main  { width: 82%; left: 4%;   top: 22%; transform: rotate(-3deg); z-index: 2; }
.tv-phone { width: 21%; left: -2%;  top: 44%; transform: rotate(-8deg); z-index: 3; }
.teaser-card:hover .tv-main  { transform: rotate(-1deg) scale(1.03); }
.teaser-card:hover .tv-back  { transform: rotate(8deg) translateX(10px); }
.teaser-card:hover .tv-phone { transform: rotate(-4deg) translateY(-8px); }

@media (max-width: 860px) {
  .tour-teaser { padding-top: 68px; }
  .teaser-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 36px 26px 0; min-height: 0; }
  .teaser-copy .btn { width: 100%; }
  /* overflow: hidden = le immagini scorrono dentro questa finestra e
     non possono mai salire sopra il testo o il pulsante. */
  .teaser-visual { min-height: 0; height: 250px; margin: 0 -26px; overflow: hidden; }
  .tv-main  { width: 78%; left: 12%; top: 16%; }
  .tv-back  { width: 60%; right: -14%; top: 2%; }
  .tv-phone { width: 24%; left: 2%; top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-shot, .tv-phone { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   TOUR DEL GESTIONALE
═══════════════════════════════════════════════════════════════════ */
#tour {
  padding: 0;
  background:
    radial-gradient(ellipse 1000px 600px at 50% 0%, rgba(37,99,235,0.14), transparent 70%),
    var(--bg-deep);
}

/* ── Dispositivi ─────────────────────────────────────────────────── */
.laptop { position: relative; width: 100%; }
.laptop-screen {
  /* 16:9 = le proporzioni degli screenshot del gestionale */
  position: relative; aspect-ratio: 16 / 9;
  background: #0b1222; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px 18px 4px 4px; padding: 1.3%;
  box-shadow: 0 50px 110px -40px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.laptop-screen::before {           /* fotocamera */
  content: ''; position: absolute; top: 0.45%; left: 50%; width: 6px; height: 6px;
  margin-left: -3px; border-radius: 50%; background: #1f2a44;
}
.laptop-view {
  position: relative; width: 100%; height: 100%;
  border-radius: 6px; overflow: hidden; background: #f4f6fa;
}
.laptop-base {
  position: relative; height: 16px; width: 114%; margin-left: -7%;
  background: linear-gradient(180deg, #d5dbe6 0%, #a7b0c0 55%, #6f788a 100%);
  border-radius: 2px 2px 18px 18px;
  box-shadow: 0 24px 40px -18px rgba(0,0,0,0.8);
}
.laptop-base::before {             /* incavo per aprire lo schermo */
  content: ''; position: absolute; top: 0; left: 50%; width: 16%; height: 6px;
  transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #8b94a6;
}

.phone {
  position: relative; aspect-ratio: 523 / 993;
  background: #0b1222; border-radius: 46px; padding: 11px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 50px 110px -40px rgba(0,0,0,0.9);
}
.phone::before {                   /* isola in alto */
  content: ''; position: absolute; top: 20px; left: 50%; z-index: 2;
  width: 30%; height: 24px; transform: translateX(-50%);
  border-radius: 20px; background: #0b1222;
}
.phone-view {
  position: relative; width: 100%; height: 100%;
  border-radius: 36px; overflow: hidden; background: #f4f6fa;
}

.laptop-view img, .phone-view img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
}
/* La schermata vera ha proporzioni piu' larghe delle finte: la si
   mostra intera, senza tagliare i numeri, su fondo bianco come nel
   gestionale. */
.laptop-view img.fit { object-fit: contain; background: #fff; }


/* ── 1. Apertura: il titolo cede il posto al portatile ───────────── */
.tour-intro { position: relative; }
.tour-intro-pin {
  min-height: 100vh; padding: 120px 24px 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.tour-intro-copy { max-width: 760px; }
.tour-intro-copy .eyebrow::before { display: none; }
.tour-intro-copy h1, .tour-intro-copy h2 { font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 20px; }
.tour-intro-copy p { color: var(--ink-50); font-size: clamp(1rem, 1.6vw, 1.18rem); }
.tour-intro-device { width: min(1040px, 92vw); margin-top: 56px; }
.tour-hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-35);
}
.tour-hint svg { width: 16px; height: 16px; }

/* Scena attiva: la sezione si allunga e il contenuto resta fermo
   mentre si scorre, cosi' il gesto dello scroll diventa l'animazione. */
.px-on .tour-intro { height: 260vh; }
.px-on .tour-intro-pin {
  position: sticky; top: 0; height: 100vh; min-height: 0; padding: 0 24px;
  overflow: hidden;
}
.px-on .tour-intro { --p: 0; }
.px-on .tour-intro-copy {
  position: absolute; top: 50%; left: 50%; width: min(760px, calc(100% - 48px));
  transform: translate(-50%, calc(-50% - var(--p) * 180px)) scale(calc(1 - var(--p) * 0.12));
  opacity: calc(1 - var(--p) * 2.6);
}
.px-on .tour-intro-device {
  position: absolute; top: 50%; left: 50%; margin: 0;
  /* Da piccolo e inclinato, affacciato dal fondo dello schermo,
     a grande e frontale al centro. */
  transform:
    translate(-50%, calc(-50% + 24px + (1 - min(1, var(--p) * 1.45)) * 58vh))
    perspective(1800px)
    rotateX(calc((1 - min(1, var(--p) * 1.45)) * 28deg))
    scale(calc(0.55 + min(1, var(--p) * 1.45) * 0.45));
  /* Alla fine della scena deve stare tutto sotto la barra fissa e
     lasciare spazio alla didascalia: l'altezza comanda la larghezza. */
  width: min(1000px, 88vw, calc((100vh - 230px) * 1.5));
  will-change: transform;
}
.px-on .tour-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  opacity: calc(1 - var(--p) * 5); margin: 0;
}
.px-on .tour-hint svg { animation: px-bob 1.8s ease-in-out infinite; }
@keyframes px-bob { 50% { transform: translateY(4px); } }

/* Sul finire della scena una didascalia si accende sotto il portatile */
.tour-intro-tag {
  margin-top: 22px; font-size: 0.88rem; color: var(--ink-50);
}
.px-on .tour-intro-tag {
  position: absolute; left: 50%; bottom: 5vh; margin: 0;
  transform: translate(-50%, calc((1 - var(--q, 0)) * 16px));
  opacity: var(--q, 0); white-space: nowrap;
}


/* ── 2. Capitoli: testo che scorre, schermo fermo che cambia ─────── */
.tour-steps {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px; padding-top: 40px;
}
.tour-texts { grid-column: 1; grid-row: 1; }
.tour-stage {
  grid-column: 2; grid-row: 1; align-self: start;
  /* Resta fermo solo se lo script puo' cambiare la schermata: senza,
     mostrerebbe l'agenda accanto a tutti e otto i capitoli. */
  position: relative; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding-top: 64px;                      /* spazio della barra fissa */
}

.px-js .tour-stage { position: sticky; }

.stage-devices { position: relative; }
.stage-devices .laptop { transition: opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.stage-devices .phone {
  position: absolute; left: 50%; top: 50%; height: 108%; width: auto;
  transform: translate(-50%, -46%) scale(0.9); opacity: 0;
  transition: opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.tour-stage[data-device="phone"] .laptop { opacity: 0.12; transform: scale(0.92) translateY(2%); }
.tour-stage[data-device="phone"] .phone  { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Le schermate sono impilate: quella attiva arriva dal basso, le
   precedenti se ne vanno verso l'alto. */
.shot {
  position: absolute; inset: 0; opacity: 0;
  transform: translateY(7%) scale(1.03);
  transition: opacity .55s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.shot.is-past   { transform: translateY(-5%) scale(0.98); }
.shot.is-active { opacity: 1; transform: none; }
/* Dentro la schermata attiva l'immagine scorre appena, come se la
   telecamera la seguisse: e' la parallasse "interna". */
.shot img {
  transform: translateY(calc((0.5 - var(--sp, 0.5)) * 1.6%)) scale(1.025);
  transition: transform .2s linear;
}
.shot:first-child { opacity: 1; transform: none; }     /* senza JS: la prima */
.px-js .shot:first-child:not(.is-active) { opacity: 0; }
.px-js .shot:first-child:not(.is-active):not(.is-past) { transform: translateY(7%) scale(1.03); }
.px-js .shot:first-child.is-past { transform: translateY(-5%) scale(0.98); }

/* ── Modalita' scura: la stessa schermata viene "ridipinta" ────────
   La versione scura sta sopra la chiara e si scopre da sinistra a
   destra mentre si scorre il capitolo 02; una linea di luce segna il
   punto di passaggio. --wipe (0-1) lo calcola parallax.js. */
.laptop-view .wipe-dark {
  position: absolute; inset: 0;
  clip-path: inset(0 calc((1 - var(--wipe, 0)) * 100%) 0 0);
}
.wipe-line {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2;
  left: calc(var(--wipe, 0) * 100%); margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--gold-hi) 20%, var(--gold-hi) 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(251,191,36,0.55);
  opacity: var(--wl, 0); transition: opacity .3s ease;
}

/* ── Estratto conto che entra sopra il portatile (capitolo 05) ──── */
.stage-pop {
  position: absolute; z-index: 3; right: -5%; bottom: 14%; width: 64%;
  border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.85), 0 0 0 6px rgba(11,18,34,0.9);
  opacity: 0; transform: translateY(40px) scale(0.94);
  transition: opacity .5s ease, transform .8s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.stage-pop img { display: block; width: 100%; height: auto; }
.tour-stage[data-pop] .stage-pop {
  opacity: 1; transform: none;
  translate: 0 calc((0.5 - var(--sp, 0.5)) * 36px);
}

/* ── Documenti: foglio di servizio e voucher come fogli veri ────── */
.docs { position: absolute; inset: 0; pointer-events: none; }
.doc {
  position: absolute; display: block; height: auto; background: #fff; border-radius: 4px;
  box-shadow: 0 30px 70px -18px rgba(0,0,0,0.85);
  opacity: 0; transition: opacity .55s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.doc-foglio  { width: 76%; left: -2%; top: 6%;  transform: rotate(-3deg) translateY(50px); }
.doc-voucher { width: 38%; right: -2%; top: -6%; transform: rotate(5deg) translateY(90px); z-index: 2; }
.tour-stage[data-device="docs"] .laptop { opacity: 0.1; transform: scale(0.92) translateY(2%); }
.tour-stage[data-device="docs"] .doc { opacity: 1; }
/* Due profondita' diverse: i due fogli scorrono a velocita' diverse */
.tour-stage[data-device="docs"] .doc-foglio  { transform: rotate(-3deg); translate: 0 calc((0.5 - var(--sp, 0.5)) * 30px); }
.tour-stage[data-device="docs"] .doc-voucher { transform: rotate(5deg);  translate: 0 calc((0.5 - var(--sp, 0.5)) * -60px); transition-delay: .08s; }

.stage-meta { display: flex; align-items: center; gap: 16px; }
.stage-count { font-family: var(--fd); font-weight: 700; font-size: 0.95rem; color: var(--gold); font-variant-numeric: tabular-nums; min-width: 58px; }
.stage-count span { color: var(--ink-35); }
.stage-bars { flex: 1; display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; }
.stage-bars i { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.stage-bars i::after {
  content: ''; display: block; height: 100%; background: var(--gold);
  transform-origin: 0 50%; transform: scaleX(var(--f, 0));
}

.tour-step {
  min-height: 82vh; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0;
}
.step-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
}
.step-kicker b {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(245,158,11,0.45); font-family: var(--fd); font-size: 0.78rem; letter-spacing: 0;
}
.tour-step h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 16px; }
.tour-step p { color: var(--ink-50); font-size: 1.02rem; line-height: 1.75; max-width: 440px; }
.step-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.step-tags li {
  font-size: 0.8rem; font-weight: 600; color: var(--ink-70);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px;
}


/* Con lo script attivo il capitolo corrente e' pieno, gli altri si
   fanno da parte: l'occhio sa sempre dove guardare. */
.px-js .tour-step > * { transition: opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.px-js .tour-step:not(.is-active) > * { opacity: 0.22; transform: translateX(-10px); }
.px-js .tour-step.is-active > :nth-child(2) { transition-delay: .05s; }
.px-js .tour-step.is-active > :nth-child(3) { transition-delay: .1s; }
.px-js .tour-step.is-active > :nth-child(4) { transition-delay: .15s; }


/* ── 3. Chiusura del tour ────────────────────────────────────────── */
.tour-end { padding: 40px 24px 110px; }
.tour-end-card {
  max-width: 860px; margin: 0 auto; text-align: center; position: relative; overflow: hidden;
  border: 1px solid rgba(245,158,11,0.38); border-radius: 22px; padding: 54px 36px;
  background:
    radial-gradient(ellipse 560px 280px at 50% -20%, rgba(245,158,11,0.18), transparent 70%),
    linear-gradient(180deg, var(--bg-alt), var(--bg));
}
.tour-end-card h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 14px; }
.tour-end-card p { color: var(--ink-50); max-width: 52ch; margin: 0 auto 28px; }
.tour-end-card .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* ═══════════════════════════════════════════════════════════════════
   TELEFONI E TABLET
   Stessa storia, montata in verticale: lo schermo resta fermo in alto
   e i capitoli scorrono sotto, come nelle pagine Apple da telefono.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .tour-steps { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .tour-stage {
    grid-column: 1; grid-row: 1; z-index: 2;
    top: 58px; height: auto; padding: 14px 0 14px; gap: 12px;
    background: var(--bg-deep);
  }
  /* Sfumatura sotto lo schermo fermo: il testo che risale ci sparisce
     dentro invece di tagliarsi di netto contro il bordo. */
  .tour-stage::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 40px;
    background: linear-gradient(180deg, var(--bg-deep), rgba(10,20,41,0));
    pointer-events: none;
  }
  .tour-texts { grid-column: 1; grid-row: 2; }
  /* 86%: la base del portatile e' piu' larga dello schermo e deve
     restare dentro i margini, non toccare i bordi del telefono. */
  .stage-devices { width: min(86%, calc(40vh * 1.6)); margin: 0 auto; }
  .stage-meta { width: min(100%, calc(40vh * 1.6)); margin: 0 auto; }
  .tour-step { min-height: 64vh; padding: 28px 0; justify-content: flex-start; }
  .tour-step p { max-width: none; }
  /* su telefono lo spazio sopra e' poco: i fogli restano dentro lo schermo */
  .doc-voucher { top: 2%; width: 34%; right: 0; }
  .doc-foglio  { top: 12%; }
  .px-js .tour-step:not(.is-active) > * { transform: none; }
  .laptop-base { height: 10px; }
  .phone { border-radius: 30px; padding: 7px; }
  .phone::before { top: 12px; height: 14px; }
  .phone-view { border-radius: 24px; }
  .tour-intro-device { margin-top: 36px; }
  .px-on .tour-intro { height: 190vh; }
}

@media (max-width: 640px) {
  .px-orbs span { filter: blur(50px); }
  .px-orbs span:nth-child(1) { width: 320px; height: 320px; }
  .px-orbs span:nth-child(2) { width: 260px; height: 260px; }
  .px-orbs span:nth-child(3) { display: none; }
  .tour-end-card { padding: 38px 22px; }
  .tour-end-card .row .btn { width: 100%; }
  .px-on .tour-intro-tag { white-space: normal; width: calc(100% - 48px); }
}


/* ═══════════════════════════════════════════════════════════════════
   RIDUCI MOVIMENTO
   Nessuno spostamento: le scene si leggono come pagine normali e i
   capitoli cambiano con una semplice dissolvenza.
═══════════════════════════════════════════════════════════════════ */
.px-static [data-px-tilt], .px-static .px-orbs span { transform: none !important; }
.px-static [data-px-speed] { translate: none !important; }
.px-static .shot, .px-static .shot.is-past, .px-static .shot img { transform: none; }
.px-static .stage-devices .laptop, .px-static .stage-devices .phone { transition: opacity .3s ease; }
.px-static .doc, .px-static .stage-pop { translate: none !important; }
.px-static .tour-step:not(.is-active) > * { opacity: 0.35; transform: none; }