/* Home — racconto «la sera dell'attività», identità «Segnale» (docs/DIREZIONE-CREATIVA.md).
   Si anima solo transform e opacity. Il testo HTML non passa mai sopra Tasca. */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.home .testata { position: fixed; left: 0; right: 0; top: 0; }

/* ——— Intro: solo alla prima visita, ≤ 1,5 s, tutta in CSS ——— */
.velo { display: none; }
html.con-intro .velo {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100;
  background: var(--notte); cursor: pointer;
  animation: velo-via 0.6s var(--lenta) 0.85s forwards;
}
html.con-intro .velo.fatto { animation: velo-via 0.3s ease forwards; }
.velo-led { width: 12px; height: 12px; animation: velo-accende 0.9s var(--lenta) both; }
@keyframes velo-accende { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.6); } }
@keyframes velo-via { to { opacity: 0; visibility: hidden; } }

/* ——— Testata sopra la notte ——— */
.testata.sulla-notte {
  --inchiostro: #eef0ea; --tenue: #9aa19c; --linea: rgb(255 255 255 / 0.1); --carta: #07090b;
  background: rgb(7 9 11 / 0.72); color: var(--inchiostro);
}

/* ——— Il racconto: palco fisso, didascalie che scorrono ——— */
.racconto { position: relative; }
.palco-guida { position: absolute; inset: 0; z-index: 0; }
.palco {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--notte);
  perspective: 1400px; perspective-origin: 60% 45%;
}
.palco > * { position: absolute; }
/* Fondo fotografico (Higgsfield): H2 (9:16) sotto i 900 px, H1 (16:9) da 900 px.
   Molto scuro, sotto la griglia. Ogni schermo scarica solo la sua. */
.scena-foto {
  inset: 0;
  background: image-set(url("/assets/img/sera-9x16.avif") type("image/avif"), url("/assets/img/sera-9x16.webp") type("image/webp")) 50% 100% / cover no-repeat;
  opacity: 0.34;
  transform-origin: 50% 80%;
}
.scena-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(7 9 11 / 0.6) 0%, rgb(7 9 11 / 0.25) 45%, rgb(7 9 11 / 0.2) 75%, rgb(7 9 11 / 0.75) 100%);
}
@media (min-width: 900px) {
  .scena-foto {
    background: image-set(url("/assets/img/sera-16x9.avif") type("image/avif"), url("/assets/img/sera-16x9.webp") type("image/webp")) 70% 50% / cover no-repeat;
    opacity: 0.34;
    transform-origin: 65% 55%;
  }
  .scena-foto::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgb(7 9 11 / 0.92) 0%, rgb(7 9 11 / 0.55) 38%, rgb(7 9 11 / 0.15) 70%, rgb(7 9 11 / 0.35) 100%),
      linear-gradient(180deg, rgb(7 9 11 / 0.5) 0%, transparent 25%, transparent 70%, rgb(7 9 11 / 0.7) 100%);
  }
}
.scena-griglia {
  inset: 0;
  background:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px) 0 0 / 64px 100%;
  -webkit-mask: radial-gradient(75% 65% at 60% 55%, #000 20%, transparent 80%);
  mask: radial-gradient(75% 65% at 60% 55%, #000 20%, transparent 80%);
}
.scena-freddo { inset: 0; background: radial-gradient(60% 55% at 60% 60%, rgb(110 140 170 / 0.22), transparent 70%), linear-gradient(180deg, rgb(40 60 80 / 0.25), rgb(10 16 24 / 0.3)); }
.scena-luce { inset: 0; background: radial-gradient(34% 34% at 64% 64%, rgb(200 245 60 / 0.2), transparent 70%); }
.js .scena-freddo, .js .scena-luce { opacity: 0; }

/* Tasca: il robot-telefono. Il telefono è generico, disegnato da noi; braccia, gambe e viso sono in SVG.
   Le gambe sono alte il 14% del telefono: lo spazio sotto è riservato a loro. */
.telefono {
  --alto: clamp(210px, calc((100svh - var(--spazio, 300px) - 2.5svh) / 1.15), 480px);
  left: 0; right: 0; bottom: calc(2.5svh + var(--alto) * 0.13); margin-inline: auto;
  height: var(--alto); width: calc(var(--alto) * 9 / 18.5); max-width: 76vw;
  padding: calc(var(--alto) * 0.018);
  border-radius: calc(var(--alto) * 0.085);
  background: linear-gradient(145deg, #2b3034 0%, #0c0e10 45%, #1b1f22 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 50px 90px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(0 0 0 / 0.6);
  transform-style: preserve-3d;
  will-change: transform;
}
@media (min-width: 900px) {
  .telefono { --alto: min(68svh, 600px); left: auto; right: 14%; bottom: calc(5svh + var(--alto) * 0.13); margin: 0; }
}
.telefono-schermo {
  position: relative; height: 100%; overflow: hidden;
  border-radius: calc(var(--alto) * 0.07);
  background: linear-gradient(180deg, #11161a 0%, #0b0e11 100%);
  color: #eef0ea; font-size: max(9.5px, calc(var(--alto) / 44)); line-height: 1.35;
  padding: 2.6em 0.9em 1em;
  transform: translateZ(1px);
  will-change: transform;
}
.tasca-arti {
  position: absolute; left: -50%; width: 200%; max-width: none; top: -19.46%; height: 145.9%;
  overflow: visible; pointer-events: none; transform: translateZ(-2px);
  fill: none; stroke-linecap: round;
}
.tasca-arti .osso { stroke: #69747f; stroke-width: 10; }
.tasca-arti .gamba path { stroke: #69747f; stroke-width: 9; }
.tasca-arti ellipse, .tasca-arti .mano, .tasca-arti .spalla { fill: #8a96a1; stroke: #b9c3cc; stroke-width: 1; }
.tasca-arti .gomito { fill: #11161a; stroke: var(--luce); stroke-width: 2; filter: drop-shadow(0 0 3px rgb(200 245 60 / 0.9)); }
.tasca-viso {
  position: absolute; left: 22%; width: 56%; max-width: none; top: 30%; z-index: 1; overflow: visible; pointer-events: none;
  fill: none; stroke: var(--luce); stroke-width: 5.5; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgb(200 245 60 / 0.8));
}
.tasca-viso rect { fill: var(--luce); stroke: none; }
.js .tasca-viso { opacity: 0; }
.js .tasca-viso .occhi, .js .tasca-viso .bocca { opacity: 0; }
.avatar-viso { width: 78%; fill: none; stroke: var(--luce); stroke-width: 9; stroke-linecap: round; overflow: visible; }
.telefono-spento { position: absolute; inset: 0; z-index: 6; border-radius: inherit; background: linear-gradient(155deg, rgb(255 255 255 / 0.08), transparent 40%), #050607; pointer-events: none; }
.js .tasca-arti {
  position: absolute; left: -50%; width: 200%; max-width: none; top: -19.46%; height: 145.9%;
  overflow: visible; pointer-events: none; transform: translateZ(-2px);
  fill: none; stroke-linecap: round;
}
.tasca-arti .osso { stroke: #69747f; stroke-width: 10; }
.tasca-arti .gamba path { stroke: #69747f; stroke-width: 9; }
.tasca-arti ellipse, .tasca-arti .mano, .tasca-arti .spalla { fill: #8a96a1; stroke: #b9c3cc; stroke-width: 1; }
.tasca-arti .gomito { fill: #11161a; stroke: var(--luce); stroke-width: 2; filter: drop-shadow(0 0 3px rgb(200 245 60 / 0.9)); }
.tasca-viso {
  position: absolute; left: 22%; width: 56%; max-width: none; top: 30%; z-index: 1; overflow: visible; pointer-events: none;
  fill: none; stroke: var(--luce); stroke-width: 5.5; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgb(200 245 60 / 0.8));
}
.tasca-viso rect { fill: var(--luce); stroke: none; }
.js .tasca-viso { opacity: 0; }
.js .tasca-viso .occhi, .js .tasca-viso .bocca { opacity: 0; }
.avatar-viso { width: 78%; fill: none; stroke: var(--luce); stroke-width: 9; stroke-linecap: round; overflow: visible; }
.telefono-spento { opacity: 1; }
:not(.js) > body .tasca-arti {
  position: absolute; left: -50%; width: 200%; max-width: none; top: -19.46%; height: 145.9%;
  overflow: visible; pointer-events: none; transform: translateZ(-2px);
  fill: none; stroke-linecap: round;
}
.tasca-arti .osso { stroke: #69747f; stroke-width: 10; }
.tasca-arti .gamba path { stroke: #69747f; stroke-width: 9; }
.tasca-arti ellipse, .tasca-arti .mano, .tasca-arti .spalla { fill: #8a96a1; stroke: #b9c3cc; stroke-width: 1; }
.tasca-arti .gomito { fill: #11161a; stroke: var(--luce); stroke-width: 2; filter: drop-shadow(0 0 3px rgb(200 245 60 / 0.9)); }
.tasca-viso {
  position: absolute; left: 22%; width: 56%; max-width: none; top: 30%; z-index: 1; overflow: visible; pointer-events: none;
  fill: none; stroke: var(--luce); stroke-width: 5.5; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgb(200 245 60 / 0.8));
}
.tasca-viso rect { fill: var(--luce); stroke: none; }
.js .tasca-viso { opacity: 0; }
.js .tasca-viso .occhi, .js .tasca-viso .bocca { opacity: 0; }
.avatar-viso { width: 78%; fill: none; stroke: var(--luce); stroke-width: 9; stroke-linecap: round; overflow: visible; }
.telefono-spento { opacity: 0; }
.telefono-foro { position: absolute; top: 0.8em; left: 50%; width: 0.9em; height: 0.9em; margin-left: -0.45em; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06); z-index: 5; }
.telefono-stato { position: absolute; top: 0.7em; left: 1.4em; right: 1.4em; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-weight: 600; font-size: 0.95em; }
.telefono-ora { position: relative; display: inline-block; width: 3.4em; height: 1.35em; }
.telefono-ora span { position: absolute; left: 0; }
.js .telefono-ora span + span { opacity: 0; }
.telefono-tacche { width: 2em; height: 0.85em; border-radius: 0.25em; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }

.notifiche { position: absolute; z-index: 2; left: 0.9em; right: 0.9em; top: 3.2em; display: grid; gap: 0.6em; margin: 0; padding: 0; list-style: none; }
.notifica { position: relative; display: grid; grid-template-columns: 2em 1fr; gap: 0.7em; align-items: start; padding: 0.8em 0.9em; border-radius: 1.2em; background: #1d2328; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.notifica > div { min-width: 0; }
.notifica strong { display: block; padding-right: 3.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notifica p { color: rgb(238 240 234 / 0.82); }
.notifica time { position: absolute; right: 0.9em; top: 0.8em; font-family: var(--mono); font-size: 0.85em; color: rgb(238 240 234 / 0.5); }
.letto { position: absolute; right: 0.9em; bottom: 0.7em; font-family: var(--mono); font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(238 240 234 / 0.45); }
.js .notifica, .js .letto { opacity: 0; }
.notifica-icona, .link-icona {
  width: 2em; height: 2em; border-radius: 0.6em;
  background: rgb(255 255 255 / 0.14) center / 60% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
}

.dialogo { position: absolute; left: 0; right: 0; top: 2.6em; bottom: 2.4em; padding: 0 0.8em; display: flex; flex-direction: column; overflow: hidden; }
.js .dialogo { opacity: 0; }
.dialogo-testa { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.7em; padding: 0.6em 0.2em 0.8em; background: #11161a; border-bottom: 1px solid rgb(255 255 255 / 0.08); font-weight: 600; }
.dialogo-testa small { display: block; font-weight: 400; font-size: 0.85em; color: rgb(238 240 234 / 0.55); }
.dialogo-avatar { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #1b2126; }
.dialogo-avatar .led { width: 0.8em; height: 0.8em; }
.dialogo-righe { display: flex; flex-direction: column; gap: 0.5em; margin: 0.8em 0 0; padding: 0; list-style: none; }
.riga { max-width: 86%; padding: 0.6em 0.85em 0.5em; border-radius: 1.2em; }
.riga time { display: block; margin-top: 0.2em; text-align: right; font-family: var(--mono); font-size: 0.78em; opacity: 0.6; }
.riga.cliente { align-self: flex-start; background: rgb(255 255 255 / 0.1); border-bottom-left-radius: 0.35em; }
.riga.sara { align-self: flex-end; background: var(--luce); color: var(--su-luce); border-bottom-right-radius: 0.35em; }
.riga.link { display: grid; grid-template-columns: 2em 1fr; gap: 0.6em; align-items: center; font-weight: 700; transform-origin: 80% 50%; }
.riga.link time { grid-column: 1 / -1; }
.riga.link .link-icona { background-color: rgb(11 13 5 / 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0d05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.js .riga { opacity: 0; }
.puntini { display: none; align-self: flex-end; gap: 0.3em; padding: 0.75em 0.9em; border-radius: 1.2em; background: rgb(200 245 60 / 0.18); }
.puntini i { width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--luce); animation: puntino 1.1s infinite ease-in-out; }
.puntini i:nth-child(2) { animation-delay: 0.15s; }
.puntini i:nth-child(3) { animation-delay: 0.3s; }
@keyframes puntino { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
.esempio-etichetta { position: absolute; left: 50%; bottom: 0.8em; z-index: 3; transform: translateX(-50%); padding: 0.2em 0.8em; border-radius: 999px; background: rgb(200 245 60 / 0.14); color: #dff59a; font-family: var(--mono); font-size: 0.78em; letter-spacing: 0.1em; text-transform: uppercase; }

/* Didascalie: si vedono solo quando sono ferme in alto */
.didascalia { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-start; padding-block: 92px 0; }
@media (min-width: 900px) { .didascalia { align-items: center; padding-block: 0; } }
.didascalia-testo { max-width: 32rem; position: sticky; top: 92px; }
/* Sul telefono il contenitore occupa tutta la didascalia: senza, lo sticky non ha spazio e il testo scorre sotto la barra mentre è ancora acceso. */
@media (max-width: 899px) {
  .didascalia:not(.apertura) > .contenitore { align-self: stretch; }
  /* L'ultima è più lunga: resta ferma mentre il palco è ancora fermo, e si spegne prima che il palco scorra via. */
  .racconto .didascalia:last-child { min-height: 150vh; min-height: 150svh; }
}
@media (min-width: 900px) { .didascalia-testo { top: 30vh; max-width: 34rem; } }
.js .didascalia-testo { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--lenta), transform 0.9s var(--lenta); }
.js .didascalia-testo.in-scena { opacity: 1; transform: none; }
.didascalia h2 { font-size: clamp(1.9rem, 1.1rem + 3.8vw, 4.4rem); }
.didascalia p { margin-top: 14px; font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.35rem); color: var(--tenue); }
.ora-grande { margin: 0 0 6px !important; font-family: var(--mono) !important; font-size: 0.8125rem !important; letter-spacing: 0.14em; color: var(--luce) !important; }
.nota-esempio { font-size: 0.875rem !important; }
@media (max-width: 899px) { .didascalia .nota-esempio { display: none; } }

/* Apertura */
.didascalia.apertura { align-items: flex-start; padding-top: clamp(96px, 14svh, 150px); }
@media (min-width: 900px) { .didascalia.apertura { align-items: center; padding-top: 68px; } }
.apertura .contenitore > * { max-width: 44rem; }
.apertura h1 { font-size: clamp(2.7rem, 1.2rem + 6.8vw, 6.6rem); }
.apertura .sottotitolo { margin-top: 24px; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem); color: var(--tenue); }
.per-chi { margin-top: 26px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--tenue); }

/* ——— Le obiezioni ——— */
.obiezione-lista { display: grid; gap: 1px; margin: 64px 0 0; padding: 0; list-style: none; counter-reset: ob; background: var(--linea); border-radius: 28px; overflow: hidden; }
@media (min-width: 900px) { .obiezione-lista { grid-template-columns: 1fr 1fr; } .obiezione:first-child { grid-column: 1 / -1; } }
.obiezione { counter-increment: ob; padding: clamp(28px, 4vw, 48px); background: var(--carta); }
.obiezione::before { content: counter(ob, decimal-leading-zero); display: block; margin-bottom: 18px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--luce); }
.obiezione h3 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); letter-spacing: -0.035em; }
.obiezione p { margin-top: 14px; color: var(--tenue); max-width: 40rem; }
.obiezione:first-child h3 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); }

/* ——— Chi comanda ——— */
.comando-griglia { display: grid; gap: 48px; align-items: center; }
/* Tasca in piccolo (scene 7 e 8): stesse forme del Tasca del racconto */
.comando-griglia { position: relative; }
.tasca-mini { width: 96px; max-width: none; overflow: visible; fill: none; stroke-linecap: round; }
.tasca-mini .osso { stroke: #69747f; stroke-width: 7; }
.tasca-mini .gamba path { stroke: #69747f; stroke-width: 6.5; }
.tasca-mini ellipse, .tasca-mini .mano { fill: #8a96a1; stroke: #b9c3cc; stroke-width: 0.8; }
.tasca-mini .gomito { fill: #11161a; stroke: var(--luce); stroke-width: 1.5; }
.tasca-mini .corpo { fill: #1f252b; stroke: #56616b; stroke-width: 1.2; }
.tasca-mini .schermo { fill: #0a0d0f; }
.tasca-mini .mini-viso { stroke: var(--luce); stroke-width: 3.2; filter: drop-shadow(0 0 2.5px rgb(200 245 60 / 0.8)); }
.tasca-mini .mini-viso rect { fill: var(--luce); stroke: none; }
.tasca-mini .felici { opacity: 0; }
.comando-scena { position: relative; justify-self: center; width: 100%; max-width: 440px; margin-top: 44px; }
.comando-scena .telegram { position: relative; z-index: 1; }
.mini-comando { position: absolute; right: 22px; top: -66px; z-index: 0; width: 84px; }
@media (min-width: 960px) { .mini-comando { top: -88px; } }
.invito-azione { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mini-invito { width: 84px; margin-right: 18px; }
@media (min-width: 960px) { .comando-griglia { grid-template-columns: 1fr 1fr; gap: 80px; } }
.intro-testo { margin-top: 22px; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--tenue); }
.comandi { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.comandi li { display: flex; align-items: center; gap: 14px; }
.comandi code { flex: none; min-width: 4.6em; padding: 6px 12px; border-radius: 10px; background: var(--luce); color: var(--su-luce); font: 600 1rem/1.3 var(--mono); text-align: center; }
.comandi-altri { margin-top: 18px; color: var(--tenue); font-size: 0.9375rem; }
.comandi-altri code { padding: 2px 8px; border-radius: 8px; background: rgb(255 255 255 / 0.08); font: 500 0.875rem var(--mono); color: var(--inchiostro); white-space: nowrap; }
.telegram { margin: 0; max-width: 440px; width: 100%; justify-self: center; border-radius: 28px; overflow: hidden; background: var(--superficie); box-shadow: 0 0 0 1px var(--linea), 0 40px 80px -30px rgb(0 0 0 / 0.8); }
.telegram-testa { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.telegram-testa strong { display: block; font-size: 0.9375rem; }
.telegram-testa small { display: block; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--tenue); }
.telegram-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--superficie-2); }
.telegram-corpo { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 20px; background: radial-gradient(80% 60% at 20% 0%, rgb(200 245 60 / 0.06), transparent 70%); }
.avviso-bot { max-width: 90%; padding: 12px 14px; border-radius: 16px; border-bottom-left-radius: 5px; background: var(--superficie-2); font-size: 0.875rem; }
.avviso-bot p + p { margin-top: 6px; }
.avviso-tipo { font-weight: 700; }
.avviso-domanda { color: var(--tenue); }
.risposta-titolare { align-self: flex-end; padding: 8px 18px; border-radius: 16px; border-bottom-right-radius: 5px; background: var(--luce); color: var(--su-luce); font: 600 0.9375rem var(--mono); }
.telegram figcaption { padding: 14px 16px 16px; border-top: 1px solid var(--linea); font-size: 0.8125rem; color: var(--tenue); }
.regole { display: grid; gap: 16px; margin-top: 64px; }
@media (min-width: 860px) { .regole { grid-template-columns: 1.2fr 0.8fr; } .regole .onesta { grid-column: 1 / -1; } }
.regola { padding: clamp(24px, 4vw, 36px); border-radius: var(--raggio); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.regola h3 { margin-bottom: 14px; }
.regola ul { margin: 0; padding-left: 1.1em; color: var(--tenue); }
.regola li + li { margin-top: 6px; }
.regola p { color: var(--tenue); }
.onesta { padding: 18px 22px; border-radius: 18px; background: var(--avviso); box-shadow: inset 0 0 0 1px rgb(200 245 60 / 0.25); font-size: 0.9375rem; }
.onesta strong { color: var(--luce); }
.notte .sezione:last-child { padding-bottom: calc(var(--sezione) * 1.1); }
.notte:not(.invito-scatola):not(.piede) { border-radius: 0 0 clamp(28px, 6vw, 64px) clamp(28px, 6vw, 64px); position: relative; z-index: 1; }

/* ——— Cosa fa / non fa ——— */
/* I tre ruoli: setter, segretaria, e il titolare che comanda */
.ruoli { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 860px) { .ruoli { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.ruolo { position: relative; padding: clamp(26px, 4vw, 38px); border-radius: var(--raggio); background: var(--superficie); box-shadow: 0 0 0 1px var(--linea); }
.ruolo-num { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--tenue); }
.ruolo h3 { margin-top: 14px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -0.03em; }
.ruolo-dove { margin-top: 6px; font-size: 0.9375rem; color: var(--tenue); }
.ruolo ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ruolo li { position: relative; padding-left: 20px; line-height: 1.5; }
.ruolo li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accento-forte); }
.ruolo-tu { background: var(--notte); color: #eef0ea; box-shadow: 0 0 0 1px #1f262c; }
.ruolo-tu .ruolo-num, .ruolo-tu .ruolo-dove { color: #9aa39c; }
.ruolo-tu li::before { background: var(--luce); box-shadow: 0 0 10px var(--luce); }
/* La sigla, scritta una volta: le iniziali accese */
.sigla b { color: var(--luce); font-weight: inherit; }
.due { display: grid; gap: 20px; margin-top: 64px; }
@media (min-width: 860px) { .due { grid-template-columns: 1fr 1fr; gap: 24px; } }
.scheda { padding: clamp(28px, 4vw, 44px); border-radius: var(--raggio); background: var(--superficie); box-shadow: 0 0 0 1px var(--linea); }
.scheda h3 { margin-bottom: 24px; }

/* ——— Il piano in tre tappe ——— */
.tappe { position: relative; display: grid; gap: 16px; margin: 64px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .tappe { grid-template-columns: repeat(3, 1fr); } }
.tappa { position: relative; padding: clamp(28px, 4vw, 40px); border-radius: var(--raggio); background: var(--superficie); box-shadow: 0 0 0 1px var(--linea); overflow: hidden; }
.tappa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--luce); transform: scaleX(var(--pieno, 1)); transform-origin: left; transition: transform 0.9s var(--lenta); }
.js:not([data-livello="fermo"]) .tappa { --pieno: 0; }
.js .tappa.accesa { --pieno: 1; }
.tappa-num { display: block; margin-bottom: 36px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--tenue); }
.tappa h3 { margin-bottom: 10px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.tappa p { color: var(--tenue); }

/* ——— Invito alla demo ——— */
.invito { padding-bottom: var(--sezione); }
.invito-scatola { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 32px; align-items: end; padding: clamp(32px, 6vw, 80px); border-radius: 36px; }
@media (min-width: 900px) { .invito-scatola { grid-template-columns: 1.5fr 1fr; } .invito-scatola > div:last-child { justify-self: end; } }
.invito-luce { position: absolute; right: -10%; bottom: -40%; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(200 245 60 / 0.28), transparent); animation: respiro 8s ease-in-out infinite alternate; }
@keyframes respiro { to { transform: scale(1.12) translate(-4%, -3%); opacity: 0.8; } }
.invito-scatola p { margin-top: 18px; color: var(--tenue); font-size: 1.0625rem; max-width: 38rem; }
.invito-scatola .dettagli { font-family: var(--mono); font-size: 0.8125rem; }

/* ——— Chi c'è dietro ——— */
.dietro { display: grid; gap: 24px; margin-top: 64px; }
@media (min-width: 900px) { .dietro { grid-template-columns: 0.9fr 1.1fr; } }
.persona { padding: clamp(24px, 4vw, 36px); border-radius: var(--raggio); background: var(--superficie); box-shadow: 0 0 0 1px var(--linea); }
.foto-cornice { display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 24px; overflow: hidden; border-radius: 16px; background: var(--superficie-2); box-shadow: inset 0 0 0 1.5px var(--linea); }
.foto-cornice img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .persona .foto-cornice { aspect-ratio: 4 / 3.4; } }
.persona h3 { margin-bottom: 10px; }
.persona p { color: var(--tenue); }
.persona p + p { margin-top: 10px; }
.principi { margin: 0; padding: 0; list-style: none; }
.principi li { padding: 24px 0; border-top: 1px solid var(--linea); }
.principi li:last-child { border-bottom: 1px solid var(--linea); }
.principi strong { display: block; margin-bottom: 6px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.025em; }
.principi p { color: var(--tenue); }

/* ——— Piè di pagina scuro ——— */
.piede.notte { margin-top: -1px; }

/* ——— Comparse ——— */
.js .appare { opacity: 0; transform: translateY(24px); }
[data-livello="fermo"] .appare { opacity: 1 !important; transform: none !important; }

/* ——— Cursore (solo mouse, livello pieno) ——— */
.cursore {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgb(200 245 60 / 0.9);
  mix-blend-mode: difference;
  transition: width 0.35s var(--lenta), height 0.35s var(--lenta), margin 0.35s var(--lenta), opacity 0.3s;
}
.cursore.sopra { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.cursore.via { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .velo { display: none !important; }
  .invito-luce { animation: none; }
}