/* ============================================================================
   brand.css: il sistema visivo di pro-landing
   ----------------------------------------------------------------------------
   Si carica DOPO scrollcraft.css e ne riusa i token (--sc-*).

     PALETTE   l'unico posto della pagina in cui compaiono colori letterali.
     LAYOUT    contenitore, spazi, allineamento, raggi. Uguali per tutto il sito.
     COMPONENTI titoli, card, pop-up, media, bottoni. Leggono solo var(--...).
     PAGE      in fondo: stili specifici della pagina, sempre e solo con token.

   Il lint (scripts/lint.mjs) segnala ogni colore letterale fuori da PALETTE.
   ========================================================================== */

/* ---------------------------------------------------------------- PALETTE -- */
:root {
  /* Cluster Nexodus, tema chiaro (Brand Style Guide v2.0 §5 e §7.1).
     Il teal #00CEC9 non regge il contrasto su bianco: l'accento è il teal scuro #009688. */
  --sc-canvas:     #ffffff;   /* sfondo pagina                                   */
  --sc-surface:    #f1f5f9;   /* card, pop-up, superfici rialzate                */
  --sc-ink:        #0e0828;   /* testo principale, seconda riga di .t-split      */
  --sc-ink-soft:   #475569;   /* testo secondario                                */
  --sc-accent:     #009688;   /* UN accento: CTA, prima riga di .t-split, X      */
  --sc-accent-ink: #ffffff;   /* testo sopra l'accento: bianco, bold deciso (richiesta cliente) */
  --lp-grad-2:     #8b5cf6;   /* solo dentro i gradienti dei titoli              */
  --lp-grad-3:     #1769dc;   /* solo dentro i gradienti dei titoli              */
  --lp-title-2:    #64748b;   /* fine del gradiente .t-fade                      */
  --sc-shadow-color: 220 20% 40%;
  --lp-card-shadow:       0 1px 3px hsl(220 20% 40% / .05), 0 8px 24px hsl(220 20% 40% / .06);
  --lp-card-shadow-hover: 0 6px 20px hsl(220 20% 40% / .08), 0 20px 50px hsl(220 20% 40% / .10);

  --sc-font-display: "Inter Tight", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --sc-font-text:    "Inter", "SF Pro Text", -apple-system, system-ui, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  color-scheme: light;
}
/* Versione chiara (stile Apple): sostituisci i valori sopra con questi.
   canvas #fbfbfd · surface #ffffff · ink #1d1d1f · ink-soft #6e6e73
   accent #0071e3 · accent-ink #ffffff · grad-2 #7b61ff · grad-3 #ff4f7b
   title-2 #86868b · shadow-color 220 20% 40% · color-scheme: light
   e SOSTITUISCI le due righe --lp-card-shadow del blocco sopra con queste:
   --lp-card-shadow: 0 1px 3px hsl(220 20% 40% / .05), 0 8px 24px hsl(220 20% 40% / .06);
   --lp-card-shadow-hover: 0 6px 20px hsl(220 20% 40% / .08), 0 20px 50px hsl(220 20% 40% / .10);

   Contrasti minimi (li misura lint.mjs): ink/canvas 7:1 · ink-soft/canvas 4.5:1
   · ink e ink-soft su surface 4.5:1 · accent-ink/accent 4.5:1
   · accent, grad-2, grad-3, title-2 su canvas 3:1.                          */

/* ----------------------------------------------------------------- LAYOUT -- */
:root {
  --lp-maxw:    72rem;                          /* un solo contenitore          */
  --lp-gutter:  clamp(1.25rem, 5vw, 3rem);      /* margine laterale              */
  --lp-section: clamp(7rem, 14vw, 13rem);       /* aria tra sezioni (x.ai)       */
  --lp-stack:   clamp(2.5rem, 5vw, 4.5rem);     /* titolo → immagine             */
  --lp-gap:     clamp(1rem, 2vw, 1.25rem);      /* tra card                      */
  --lp-align:   center;                         /* center | start, per tutta la pagina */
  --lp-radius:    24px;
  --lp-radius-sm: 14px;
  --lp-nav-h:   3.5rem;

  /* Derivato da --lp-align: auto = centrato, 0 = a sinistra. */
  --lp-inline-start: auto;
}
:root[data-lp-align="start"] { --lp-align: start; --lp-inline-start: 0; }

/* ------------------------------------------------------------------ MOTO -- */
/* Rapporto aureo φ = 1,618. Durate: potenze di φ (146 · 236 · 382 · 618 · 1000 · 1618 ms).
   Ritardi a cascata e distanze: numeri di Fibonacci (13 · 21 · 34 · 55 · 89 · 144).
   Curve: punti di controllo presi dalle potenze di 1/φ (0,146 · 0,236 · 0,382 · 0,618).
   Sovrascrive i token di scrollcraft.css, così ogni transizione del sito ha lo stesso ritmo. */
:root {
  --lp-ease-phi:    cubic-bezier(0.146, 1, 0.382, 1);     /* uscita: parte decisa, si posa piano */
  --lp-ease-phi-io: cubic-bezier(0.618, 0, 0.382, 1);     /* entrata e uscita simmetriche       */
  --lp-d-1: 146ms;  --lp-d-2: 236ms;  --lp-d-3: 382ms;
  --lp-d-4: 618ms;  --lp-d-5: 1000ms; --lp-d-6: 1618ms;
  --sc-ease-out: var(--lp-ease-phi);
  --sc-ease-in-out: var(--lp-ease-phi-io);
  --sc-d-fast: var(--lp-d-1); --sc-d-base: var(--lp-d-2); --sc-d-slow: var(--lp-d-3);
}

/* Ingresso dei blocchi (data-sc-in): sale di 21px e passa da sfocato a nitido,
   come una messa a fuoco. Opacità e fuoco in 1000ms, posizione in 1618ms: si posa dopo. */
[data-sc-in], [data-sc-stagger] > * {
  transform: translate3d(0, 21px, 0);
  filter: blur(6px);
  transition: opacity var(--lp-d-5) var(--lp-ease-phi),
              filter var(--lp-d-5) var(--lp-ease-phi),
              transform var(--lp-d-6) var(--lp-ease-phi);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { filter: none; }
@media (prefers-reduced-motion: reduce) {
  [data-sc-in], [data-sc-stagger] > * { filter: none; transform: none; transition-duration: var(--lp-d-2); }
}

/* -------------------------------------------------------------- COMPONENTI -- */

/* contenitore e sezione */
.lp-wrap {
  width: 100%;
  max-width: var(--lp-maxw);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}
.lp-section { padding-block: var(--lp-section); position: relative; }
.lp-section + .lp-section { padding-top: 0; }        /* lo spazio non si somma */
.lp-section--surface { background: var(--sc-surface); padding-top: var(--lp-section); }
.lp-section--surface + .lp-section { padding-top: var(--lp-section); }

/* blocco intestazione: eyebrow + titolo + frase */
.lp-head {
  text-align: var(--lp-align);
  max-width: 46rem;
  margin-inline: var(--lp-inline-start) auto;
  margin-bottom: var(--lp-stack);
}
.lp-head > * + * { margin-top: 1rem; }

.lp-eyebrow {
  display: inline-block;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent);
}
.lp-display, .lp-title, .lp-card h3 {
  font-family: var(--sc-font-display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.lp-display {
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.lp-title {
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.lp-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--sc-ink-soft);
  max-width: 42ch;
  margin-inline: var(--lp-inline-start) auto;
  text-wrap: pretty;
}

/* --- titoli --------------------------------------------------------------
   background-clip:text ritaglia lo sfondo sulla forma delle lettere.
   padding-bottom evita che le discendenti (g, p, y) vengano tagliate.
   Le regole valgono anche per gli span creati da data-sc-kinetic
   (.sc-split__i) e da landing.js (.lp-w): con un gradiente VERTICALE ogni
   riga o parola riceve lo stesso gradiente, quindi il risultato non cambia. */
:is(.t-fade, .t-spectrum, .t-shift),
:is(.t-fade, .t-spectrum) :is(.sc-split__i, .lp-w) {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.08em;
}

/* 1. Sfumato verticale (Nexodus): pieno in alto, sfuma verso il basso. */
.t-fade,
.t-fade :is(.sc-split__i, .lp-w) {
  background-image: linear-gradient(180deg, var(--sc-ink) 45%, var(--lp-title-2) 100%);
}

/* 2. Multicolore verticale: per il titolo più importante, 1–2 volte a pagina. */
.t-spectrum,
.t-spectrum :is(.sc-split__i, .lp-w) {
  background-image: linear-gradient(180deg, var(--sc-accent) 0%, var(--lp-grad-2) 55%, var(--lp-grad-3) 100%);
}

/* 3. Da un colore all'altro, orizzontale: una parola o un numero chiave.
   Non combinarlo con data-sc-kinetic: spezzato, ogni pezzo rifarebbe il gradiente. */
.t-shift { background-image: linear-gradient(90deg, var(--sc-accent), var(--lp-grad-2)); }

/* 4. Titolo diviso: prima riga in accento, seconda in ink (Apple). */
.t-split > span { display: block; }
.t-split > span:first-child { color: var(--sc-accent); }
.t-split > span:last-child  { color: var(--sc-ink); }
.t-split--inline > span { display: inline; }   /* stessa riga, due colori */

/* --- media: l'immagine che rappresenta il testo -------------------------- */
.lp-media {
  position: relative;
  border-radius: var(--lp-radius);
  overflow: hidden;
  background: var(--sc-surface);
  isolation: isolate;
}
.lp-media > :is(img, video, picture, svg) { width: 100%; height: 100%; object-fit: cover; }
/* Le illustrazioni non si ritagliano: si vedono intere. */
.lp-media > img[src$=".svg"], .lp-zoom__frame > img[src$=".svg"] { object-fit: contain; }
/* Velatura nella palette: rende coerenti foto di provenienza diversa. */
.lp-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--sc-accent) 10%, transparent),
    color-mix(in oklab, var(--sc-canvas) 35%, transparent));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.lp-media--plain::after,
.lp-media:has(> img[src$=".svg"])::after { content: none; }  /* illustrazioni già nella palette */
.lp-media--wide   { aspect-ratio: 16 / 9; }
.lp-media--tall   { aspect-ratio: 4 / 5; }
.lp-media--square { aspect-ratio: 1; }

/* --- feature: testo + immagine affiancati --------------------------------
   Regola fissa: testo a sinistra, immagine a destra. --flip inverte, e si usa
   solo a sezioni alterne. Sotto 860px: sempre testo sopra, immagine sotto. */
.lp-feature {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.lp-feature .lp-head { text-align: start; margin: 0; }
.lp-feature .lp-lead { margin-inline: 0; }
.lp-feature--flip { grid-template-columns: 7fr 5fr; }
.lp-feature--flip > .lp-media { order: -1; }
@media (max-width: 860px) {
  .lp-feature, .lp-feature--flip { grid-template-columns: 1fr; }
  .lp-feature--flip > .lp-media { order: 0; }
}

/* --- zoom in sezione fissata (Apple) -------------------------------------
   <section data-sc-act="pin" data-sc-span="1.6" class="lp-zoom" data-lp-bleed>
   Il motore pubblica --sc-p (0..1): l'immagine passa da riquadro a pieno schermo. */
.lp-zoom .sc-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding-top: var(--lp-nav-h);
}
/* Il titolo sta in una fascia larga quanto il frame e segue --lp-align. */
.lp-zoom__head { width: calc(100% - 2 * var(--lp-gutter)); max-width: var(--lp-maxw); text-align: var(--lp-align); }
.lp-zoom__title { max-width: 16ch; margin-inline: var(--lp-inline-start) auto; }
.lp-zoom__frame {
  /* 16:9 alto al massimo 60svh: l'immagine (1600×900) riempie il frame senza bande né angoli vivi */
  width: min(100% - 2 * var(--lp-gutter), var(--lp-maxw), 106svh);
  aspect-ratio: 16 / 9;
  border-radius: var(--lp-radius);
  background: var(--sc-surface);
  overflow: hidden;
  transform: scale(calc(0.86 + var(--sc-p, 0) * 0.14));
  transform-origin: center top;
}
.lp-zoom__frame > :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
/* Telefono: il frame si stringe, quindi lo facciamo più alto invece di lasciare vuoto sotto. */
@media (max-width: 700px) { .lp-zoom__frame { aspect-ratio: 4 / 5; width: calc(100% - 2 * var(--lp-gutter)); } }
@media (prefers-reduced-motion: reduce) { .lp-zoom__frame { transform: none; } }

/* --- card (Nexodus + Apple) ---------------------------------------------- */
.lp-cards {
  display: grid;
  gap: var(--lp-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lp-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 2 o 4 card: la griglia si adatta da sola, nessuna card resta sola su una riga. */
.lp-cards:has(> .lp-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-cards:has(> .lp-card:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .lp-cards, .lp-cards--4, .lp-cards:has(> .lp-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Stessi selettori delle regole :has() sopra: a parità di peso vince questa, che viene dopo. */
@media (max-width: 560px) {
  .lp-cards, .lp-cards--2, .lp-cards--4,
  .lp-cards:has(> .lp-card:nth-child(2):last-child),
  .lp-cards:has(> .lp-card:nth-child(4):last-child) { grid-template-columns: 1fr; }
}

.lp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 26rem;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: var(--lp-radius);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  box-shadow: var(--lp-card-shadow);
  overflow: hidden;
  text-align: start;
  transition: transform var(--lp-d-4) var(--lp-ease-phi), border-color var(--lp-d-4), box-shadow var(--lp-d-4);
}
.lp-card h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; letter-spacing: -0.025em; }
.lp-card p  { margin: 0.5rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.lp-card .lp-media { margin: auto -1.5rem -1.5rem; border-radius: 0; aspect-ratio: 4 / 3; }
@media (hover: hover) and (min-width: 900px) {
  .lp-card:hover { transform: translateY(-4px); border-color: var(--sc-hairline-strong); box-shadow: var(--lp-card-shadow-hover); }
}
/* Tutta la card è cliccabile tramite il bottone, senza annidare link:
   il bottone resta statico e il suo ::before copre la card (che è relative).
   Il cerchio "+" visibile è uno span interno, libero di ruotare. */
.lp-card__open { position: static; border: 0; padding: 0; background: none; cursor: pointer; }
.lp-card__open::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lp-card__plus {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sc-ink);
  color: var(--sc-canvas);
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.lp-card__plus svg { width: 1rem; height: 1rem; }
.lp-card:hover .lp-card__plus { transform: rotate(90deg); }
.lp-card__open:focus-visible { outline: none; }
.lp-card:has(.lp-card__open:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
/* Con data-sc-tilt il motore governa transform: niente sollevamento all'hover. */
.lp-card[data-sc-tilt]:hover { transform: none; }

/* --- pop-up quasi a schermo intero, con margini (Apple) --------------------------------------
   <dialog class="lp-modal">: Esc e focus trap li gestisce il browser. */
.lp-modal {
  /* Non del tutto a schermo intero: margini su tutti i lati, il sito resta intravisto sotto. */
  --lp-modal-gap: clamp(1.25rem, 6vw, 5rem);
  width: calc(100vw - 2 * var(--lp-modal-gap)); max-width: none;
  height: calc(100dvh - 2 * var(--lp-modal-gap)); max-height: none;
  margin: auto; padding: 0;
  border: 1px solid var(--sc-hairline);
  border-radius: var(--lp-radius);
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  color: var(--sc-ink);
  overscroll-behavior: contain;
  box-shadow: var(--sc-edge), var(--sc-e3);
}
.lp-modal::backdrop { background: color-mix(in oklab, var(--sc-canvas) 35%, transparent); backdrop-filter: blur(6px); }
.lp-modal[open] { animation: lp-modal-in var(--lp-d-4) var(--lp-ease-phi); }
.lp-modal.is-closing { animation: lp-modal-out var(--lp-d-3) var(--lp-ease-phi-io) forwards; }
@keyframes lp-modal-in  { from { opacity: 0; transform: translateY(21px) scale(0.982); filter: blur(4px); } }
@keyframes lp-modal-out { to   { opacity: 0; transform: translateY(13px) scale(0.991); } }
.lp-modal__body {
  max-width: 60rem;
  margin: 0 auto;
  padding: 3.5rem var(--lp-gutter) 6rem;
}
.lp-modal__body > * + * { margin-top: 1.25rem; }
.lp-modal__body .lp-media { margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.lp-modal__body .lp-media { background: var(--sc-canvas); }
.lp-modal__body .lp-media:not([class*="lp-media--"]) > img { width: 100%; height: clamp(14rem, 34vh, 22rem); object-fit: contain; display: block; }
.lp-modal__body { text-align: var(--lp-align); }
.lp-modal__body p { color: var(--sc-ink-soft); max-width: 60ch; margin-inline: var(--lp-inline-start) auto; }
.lp-modal__body h4 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.02em;
  color: var(--sc-ink); margin: 2.25rem 0 0;
}
.lp-modal__body h4 + p { margin-top: 0.5rem; }
.lp-modal__body ul { list-style: none; padding: 0; margin: 1.25rem auto 0; max-width: 60ch; display: grid; gap: 0.6rem; text-align: start; }
.lp-modal__body li { color: var(--sc-ink-soft); padding-inline-start: 1.25rem; position: relative; }
.lp-modal__body li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }
.lp-modal__close {
  position: sticky; top: 1rem;
  float: right; margin: 1rem 1rem 0 0;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%; border: 0;
  background: var(--sc-surface);
  color: var(--sc-ink);
  box-shadow: var(--sc-edge), var(--sc-e2);
  cursor: pointer; z-index: 2;
}
.lp-modal__close svg { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .lp-modal[open], .lp-modal.is-closing { animation-duration: 1ms; }
}

/* --- bottoni ------------------------------------------------------------- */
.lp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: var(--lp-align); margin-top: 2rem; }
.lp-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.875rem; padding: 0 1.4rem;
  border-radius: var(--sc-r-pill);
  font-weight: 600; font-size: var(--sc-t-sm);
  text-decoration: none;
  transition: transform var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base);
}
.lp-btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); }
.lp-btn--ghost   { color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.lp-btn:hover { transform: translateY(-1px); }
.lp-link { color: var(--sc-accent); text-decoration: none; font-weight: 500; }
.lp-link:hover { text-decoration: underline; }

/* --- nav ----------------------------------------------------------------- */
.lp-nav {
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome);
  height: var(--lp-nav-h);
  background: color-mix(in oklab, var(--sc-canvas) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--sc-d-slow);
}
.lp-nav.is-scrolled { border-bottom-color: var(--sc-hairline); }
.lp-nav .lp-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.lp-nav__brand { font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.lp-nav__links { display: flex; gap: 1.75rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.lp-nav__links a { text-decoration: none; }
.lp-nav__links a:hover { color: var(--sc-ink); }
@media (max-width: 760px) { .lp-nav__links { display: none; } }

/* --- hero ---------------------------------------------------------------- */
.lp-hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--lp-nav-h) + 4rem) var(--lp-section);
  text-align: var(--lp-align);
}
.lp-hero .lp-display { max-width: 14ch; margin-inline: var(--lp-inline-start) auto; }
.lp-hero .lp-lead { margin-top: 1.5rem; }
.lp-hero .lp-media { margin-top: var(--lp-stack); }
/* Ingresso del titolo parola per parola (landing.js aggiunge .lp-w). */
/* Ogni parola si alza dalla base come una carta che ruota verso chi legge (3D),
   e va a fuoco. Cadenza: 89ms tra le parole, 1618ms per posarsi. */
.lp-w {
  display: inline-block; opacity: 0;
  transform-origin: 50% 100%;
  transform: perspective(600px) translate3d(0, 0.382em, 0) rotateX(-34deg);
  filter: blur(0.09em);
  animation: lp-word var(--lp-d-6) var(--lp-ease-phi) forwards;
  animation-delay: calc(var(--i, 0) * 89ms + 236ms);
}
@keyframes lp-word {
  61.8% { opacity: 1; filter: none; }
  to    { opacity: 1; filter: none; transform: perspective(600px) translate3d(0, 0, 0) rotateX(0deg); }
}
@media (prefers-reduced-motion: reduce) { .lp-w { animation: none; opacity: 1; transform: none; filter: none; } }

/* --- prezzi -------------------------------------------------------------
   Uno o più piani. Il piano consigliato ha .is-featured (bordo accento). */
.lp-prices { display: grid; gap: var(--lp-gap); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); max-width: 56rem; margin-inline: var(--lp-inline-start) auto; }
.lp-price {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2rem 1.75rem;
  border-radius: var(--lp-radius);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  box-shadow: var(--lp-card-shadow);
  text-align: start;
}
.lp-price.is-featured { border-color: var(--sc-accent); }
.lp-price p { margin: 0; }
.lp-price__name { font-weight: 600; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.lp-price__amount { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: -0.04em; line-height: 1; }
.lp-price__amount small { font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); letter-spacing: 0; }
.lp-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.lp-price li::before { content: "✓"; color: var(--sc-accent); margin-right: 0.5rem; }
.lp-price .lp-btn { margin-top: auto; align-self: start; }

/* --- elenco (orari, contatti, dati pratici) -------------------------------
   <dl class="lp-list"><div><dt>Lunedì–venerdì</dt><dd>9:00–19:00</dd></div>…</dl> */
.lp-list { margin: 0; max-width: 32rem; margin-inline: var(--lp-inline-start) auto; border-top: 1px solid var(--sc-hairline); }
.lp-feature .lp-list { margin-inline: 0; }
.lp-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--sc-hairline); }
.lp-list dt { color: var(--sc-ink-soft); }
.lp-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- FAQ: domande visibili, risposte nascoste (non contano nel limite di parole) --
   <div class="lp-faq"><details><summary>Domanda?</summary><p>Risposta.</p></details>…</div> */
.lp-faq { max-width: 46rem; margin-inline: var(--lp-inline-start) auto; text-align: start; border-top: 1px solid var(--sc-hairline); }
.lp-faq details { border-bottom: 1px solid var(--sc-hairline); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: -0.015em; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--sc-accent); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { margin: 0 0 1.25rem; color: var(--sc-ink-soft); max-width: 60ch; }

/* --- numeri -------------------------------------------------------------- */
.lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--lp-gap); text-align: var(--lp-align); }
.lp-stat__n { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -0.04em; line-height: 1; }
.lp-stat__l { display: block; margin-top: 0.5rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* --- footer -------------------------------------------------------------- */
.lp-footer { padding-block: 3rem; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
.lp-footer .lp-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.lp-footer a { text-decoration: none; }

/* --- illustrazioni SVG inline nella palette ------------------------------
   <svg class="lp-art" role="img" aria-label="..."> con classi sulle forme. */
.lp-art { display: block; width: 100%; height: auto; color: var(--sc-accent); }
.lp-f-accent { fill: var(--sc-accent); }   .lp-s-accent { stroke: var(--sc-accent); fill: none; }
.lp-f-ink    { fill: var(--sc-ink); }      .lp-s-ink    { stroke: var(--sc-ink); fill: none; }
.lp-f-soft   { fill: var(--sc-ink-soft); } .lp-s-soft   { stroke: var(--sc-ink-soft); fill: none; }
.lp-f-grad2  { fill: var(--lp-grad-2); }   .lp-s-grad2  { stroke: var(--lp-grad-2); fill: none; }
.lp-f-grad3  { fill: var(--lp-grad-3); }   .lp-s-grad3  { stroke: var(--lp-grad-3); fill: none; }
.lp-f-surface{ fill: var(--sc-surface); }  .lp-f-canvas { fill: var(--sc-canvas); }
.lp-art :is([class*="lp-s-"]) { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* utilità */
.lp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.lp-locked { overflow: hidden; }

/* ------------------------------------------------------------------- PAGE --
   Stili specifici di questa pagina. Solo var(--...), niente colori letterali. */

/* --- logo Nexodus: font NexusPrimeUI, gradiente teal ---------------------- */
@font-face {
  font-family: "NexusPrimeUI";
  src: url("assets/fonts/NexusPrimeUI-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
.lp-brandword {
  font-family: "NexusPrimeUI", var(--sc-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.9;
  white-space: nowrap;
  background-image: linear-gradient(135deg, var(--sc-accent) 0%, color-mix(in oklab, var(--sc-accent) 55%, var(--sc-canvas)) 45%, var(--sc-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.6px color-mix(in oklab, var(--sc-accent) 55%, transparent);
}
.lp-nav__brand.lp-brandword { font-size: 1.5rem; }

/* Titolo grande: segnaposto nel flusso della hero + copia fissa che viaggia verso la nav.
   Senza JS o con movimento ridotto resta solo il segnaposto, visibile. */
.lp-mega-slot { display: block; font-size: clamp(3.25rem, 14vw, 12.5rem); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.lp-mega {
  display: none;
  position: fixed; left: 0; top: 0;
  z-index: calc(var(--sc-z-chrome) + 1);
  font-size: clamp(3.25rem, 14vw, 12.5rem);
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 18px color-mix(in oklab, var(--sc-accent) 28%, transparent));
}
html.lp-mega-on .lp-mega { display: block; }
html.lp-mega-on .lp-mega-slot { visibility: hidden; }
html.lp-mega-on .lp-nav { opacity: 0; }
html.lp-mega-on .lp-nav__brand { opacity: 0; }

/* --- sfondo con le X (nexusprime-x-bg): tre livelli, stesso colore primario --- */
.lp-xbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--sc-accent); }
.lp-xbg svg { width: 100%; height: 100%; display: block; }
.x-l1 { color: var(--sc-accent); opacity: 0.26; }
.x-l2 { color: color-mix(in oklab, var(--sc-accent) 70%, var(--sc-ink)); opacity: 0.2; }
.x-l3 { color: color-mix(in oklab, var(--sc-accent) 55%, var(--sc-canvas)); opacity: 0.36; }
/* Hero: le X svaniscono verso il basso e la pagina resta bianca. */
.lp-hero { overflow: hidden; }
.lp-hero > .lp-wrap { position: relative; z-index: 1; }
.lp-xbg svg {
  /* Le X vivono solo ai lati: la colonna del testo resta libera, il contrasto non cambia. */
  --lp-xmask: linear-gradient(90deg, var(--sc-ink) 0%, var(--sc-ink) 16%, transparent 26%, transparent 74%, var(--sc-ink) 84%, var(--sc-ink) 100%);
}
.lp-xbg--hero svg {
  -webkit-mask-image: var(--lp-xmask), linear-gradient(180deg, var(--sc-ink) 0%, var(--sc-ink) 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: var(--lp-xmask), linear-gradient(180deg, var(--sc-ink) 0%, var(--sc-ink) 55%, transparent 100%);
  mask-composite: intersect;
}
/* Chiusura: stesso sfondo, le X compaiono dall'alto e il teal sfuma verso il fondo. */
.lp-end {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,
    var(--sc-canvas) 0%,
    color-mix(in oklab, var(--sc-accent) 14%, var(--sc-canvas)) 55%,
    color-mix(in oklab, var(--sc-accent) 38%, var(--sc-canvas)) 100%);
}
.lp-end > :not(.lp-xbg) { position: relative; z-index: 1; }
.lp-xbg--end svg {
  -webkit-mask-image: var(--lp-xmask), linear-gradient(180deg, transparent 0%, var(--sc-ink) 40%);
  -webkit-mask-composite: source-in;
  mask-image: var(--lp-xmask), linear-gradient(180deg, transparent 0%, var(--sc-ink) 40%);
  mask-composite: intersect;
}
@media (max-width: 700px) {
  .lp-xbg svg { --lp-xmask: linear-gradient(90deg, var(--sc-ink) 0%, var(--sc-ink) 6%, transparent 14%, transparent 86%, var(--sc-ink) 94%, var(--sc-ink) 100%); }
}
.lp-end .lp-footer { border-top-color: color-mix(in oklab, var(--sc-accent) 25%, transparent); }

/* --- fascia delle parole chiave ------------------------------------------- */
.lp-ribbon {
  list-style: none; margin: var(--lp-stack) 0 0; padding: 1rem 0;
  display: flex; flex-wrap: wrap; justify-content: var(--lp-align); gap: 0.5rem 1.75rem;
  border-block: 1px solid var(--sc-hairline);
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
}
.lp-ribbon li { display: inline-flex; align-items: center; gap: 0.5rem; }
.lp-ribbon li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }

/* --- card senza immagine: le quattro tappe del percorso ---------------------- */
.lp-steps { margin-top: var(--lp-stack); }
.lp-card--step { min-height: 0; padding-top: 1.5rem; border-top: 3px solid var(--sc-accent); }
.lp-card--step h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.lp-media + .lp-steps { margin-top: var(--lp-gap); }

.lp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* nav più opaca su sfondo chiaro: resta leggibile sopra le foto scure */
.lp-nav { background: color-mix(in oklab, var(--sc-canvas) 90%, transparent); }

/* ===== 3 pagine: aggiunte (solo token) ===================================== */

/* CTA: testo bianco, bold deciso. Corpo >= 18.7px bold = "testo grande" (contrasto 3:1 richiesto). */
.lp-btn--primary { font-weight: 800; font-size: 1.2rem; letter-spacing: 0.005em; min-height: 3.25rem; }
.lp-nav .lp-btn--primary { font-size: 1.2rem; min-height: 2.75rem; }
::selection { color: var(--sc-ink); }

/* indicatore del percorso a 3 pagine */
.lp-route { margin: 0 0 1.25rem; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.lp-route b { color: var(--sc-accent); font-weight: 500; }
.lp-nav__links a[aria-current] { color: var(--sc-accent); font-weight: 600; }
.lp-hero--page { min-height: 0; }
.lp-hero--page .lp-display { max-width: 18ch; }

/* video: spazio pronto, si attiva con data-video-src */
.lp-video { margin: 0; text-align: start; }
.lp-video .lp-media { box-shadow: var(--lp-card-shadow); border: 1px solid var(--sc-hairline); }
.lp-video__play {
  position: absolute; inset: 0; z-index: 2; margin: auto; width: 5rem; height: 5rem;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--sc-accent); color: var(--sc-accent-ink); cursor: pointer;
  box-shadow: var(--lp-card-shadow-hover);
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.lp-video__play svg { width: 1.75rem; height: 1.75rem; margin-left: 0.2rem; }
.lp-video__play:hover { transform: scale(1.06); }
.lp-video__play:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 4px; }
.lp-video__badge {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  padding: 0.35rem 0.75rem; border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink);
}
.lp-video figcaption { display: grid; gap: 0.25rem; margin-top: 1rem; }
.lp-video figcaption strong { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); letter-spacing: -0.02em; }
.lp-video figcaption span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.lp-video.is-playing .lp-media > :is(video, iframe) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: var(--sc-ink); }
.lp-hero__video { margin-top: var(--lp-stack); max-width: 52rem; margin-inline: var(--lp-inline-start) auto; }
/* Video finali grandi: il primo a tutta larghezza, gli altri due affiancati sotto (≈ 2× la vecchia anteprima). */
.lp-videos { display: grid; gap: calc(var(--lp-gap) * 2) var(--lp-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-videos > .lp-video:first-child { grid-column: 1 / -1; }
.lp-videos > .lp-video:first-child .lp-media { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .lp-videos { grid-template-columns: 1fr; } .lp-videos > .lp-video:first-child .lp-media { aspect-ratio: 16 / 9; } }
.lp-videos .lp-video__play { width: 5rem; height: 5rem; }
.lp-videos .lp-video figcaption strong { font-size: var(--sc-t-xl, 1.35rem); }

/* card dei compensi: numero grande */
.lp-bignum { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.8rem); letter-spacing: -0.04em; line-height: 1; margin-bottom: 1rem; padding-bottom: 0.08em; }
.lp-card--step { padding-bottom: 4rem; }
.lp-note { margin: var(--lp-stack) auto 0; max-width: 46rem; text-align: var(--lp-align); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.lp-nextpage { margin-top: 1.5rem; }
.lp-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.lp-checks li { padding-inline-start: 1.5rem; position: relative; color: var(--sc-ink-soft); }
.lp-checks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 0.6rem; height: 0.35rem; border-left: 2px solid var(--sc-accent); border-bottom: 2px solid var(--sc-accent); transform: rotate(-45deg); }
.lp-hero--page .lp-steps { margin-top: var(--lp-gap); }
.lp-btn { white-space: nowrap; }
.lp-bignum--word { font-size: clamp(1.7rem, 2.6vw, 2.3rem); padding-block: 0.55rem 0.5rem; }
@media (max-width: 560px) {
  .lp-nav .lp-btn--primary { font-size: 1.17rem; padding-inline: 1rem; }
  .lp-nav .lp-wrap { gap: 0.75rem; }
  .lp-nav__brand.lp-brandword { font-size: 1.25rem; }
}

/* --- X che scendono in tre piani di profondità ------------------------------------
   Piano lontano (x-l1) lento e corto, vicino (x-l3) più rapido e lungo: durate e distanze
   di Fibonacci, rapporto φ tra un piano e l'altro. Compaiono nel primo 23,6% del tragitto
   e svaniscono nell'ultimo 23,6% (1/φ³). Le fasi seguono la sequenza aurea frac(i·φ):
   le X non si muovono mai all'unisono e non si ammassano. */
@keyframes lp-x-drift {
  0%    { opacity: 0; transform: translate(0, calc(var(--x-dist) * -0.382)) rotate(calc(var(--x-rot) * -1)); }
  23.6% { opacity: 1; }
  76.4% { opacity: 1; }
  100%  { opacity: 0; transform: translate(0, calc(var(--x-dist) * 0.618)) rotate(var(--x-rot)); }
}
.x-l1 { --x-d: 55s; --x-dist: 89px;  --x-rot: 8deg; }
.x-l2 { --x-d: 34s; --x-dist: 144px; --x-rot: 13deg; }
.x-l3 { --x-d: 21s; --x-dist: 233px; --x-rot: 21deg; }
.lp-xbg .x-layer > use {
  transform-box: fill-box; transform-origin: center;
  animation: lp-x-drift var(--x-d) linear infinite;
  animation-delay: calc(var(--x-d) * var(--x-ph, 0) * -1);
}
.lp-xbg .x-layer:nth-child(8n+1) { --x-ph: 0.618; }
.lp-xbg .x-layer:nth-child(8n+2) { --x-ph: 0.236; }
.lp-xbg .x-layer:nth-child(8n+3) { --x-ph: 0.854; }
.lp-xbg .x-layer:nth-child(8n+4) { --x-ph: 0.472; }
.lp-xbg .x-layer:nth-child(8n+5) { --x-ph: 0.090; }
.lp-xbg .x-layer:nth-child(8n+6) { --x-ph: 0.708; }
.lp-xbg .x-layer:nth-child(8n+7) { --x-ph: 0.326; }
.lp-xbg .x-layer:nth-child(8n+8) { --x-ph: 0.944; }
@media (prefers-reduced-motion: reduce) { .lp-xbg .x-layer > use { animation: none; } }

/* --- triangoli prospettici (tri.js): stessa mascherina laterale delle X ------------ */
.lp-tri { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-xbg--hero .lp-tri {
  -webkit-mask-image: var(--lp-xmask), linear-gradient(180deg, var(--sc-ink) 0%, var(--sc-ink) 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: var(--lp-xmask), linear-gradient(180deg, var(--sc-ink) 0%, var(--sc-ink) 55%, transparent 100%);
  mask-composite: intersect;
}
.lp-xbg--end .lp-tri {
  -webkit-mask-image: var(--lp-xmask), linear-gradient(180deg, transparent 0%, var(--sc-ink) 40%);
  -webkit-mask-composite: source-in;
  mask-image: var(--lp-xmask), linear-gradient(180deg, transparent 0%, var(--sc-ink) 40%);
  mask-composite: intersect;
}
.lp-xbg { --lp-xmask: linear-gradient(90deg, var(--sc-ink) 0%, var(--sc-ink) 16%, transparent 26%, transparent 74%, var(--sc-ink) 84%, var(--sc-ink) 100%); }
@media (max-width: 700px) { .lp-xbg { --lp-xmask: linear-gradient(90deg, var(--sc-ink) 0%, var(--sc-ink) 6%, transparent 14%, transparent 86%, var(--sc-ink) 94%, var(--sc-ink) 100%); } }

/* eyebrow con il logo Nexus Prime al posto del testo */
.lp-eyebrow--logo { display: inline-flex; align-items: center; gap: 0.75rem; }
.lp-eyebrow--logo img { height: 1.5rem; width: auto; display: block; }

/* triangoli: tela fissa dietro il contenuto (tri.js); la chiusura diventa trasparente per lasciarli vedere */
.lp-tri-bg {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block;
  /* Le costellazioni restano piene ai lati e quasi spariscono dietro il testo.
     Fermate auree: pieno fino al 14,6%, velato dal 23,6% al 76,4%, pieno dall'85,4%. */
  --lp-trimask: linear-gradient(90deg,
    var(--sc-ink) 0%, var(--sc-ink) 14.6%,
    color-mix(in oklab, var(--sc-ink) 14.6%, transparent) 23.6%,
    color-mix(in oklab, var(--sc-ink) 14.6%, transparent) 76.4%,
    var(--sc-ink) 85.4%, var(--sc-ink) 100%);
  -webkit-mask-image: var(--lp-trimask);
  mask-image: var(--lp-trimask);
}
@media (max-width: 700px) {
  .lp-tri-bg {
    --lp-trimask: linear-gradient(90deg,
      var(--sc-ink) 0%, var(--sc-ink) 9%,
      color-mix(in oklab, var(--sc-ink) 23.6%, transparent) 23.6%,
      color-mix(in oklab, var(--sc-ink) 23.6%, transparent) 76.4%,
      var(--sc-ink) 91%, var(--sc-ink) 100%);
  }
}
.lp-end {
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--sc-accent) 14%, transparent) 55%,
    color-mix(in oklab, var(--sc-accent) 38%, transparent) 100%);
}

/* ---------------------------------------------------- Nexus Prime: marchio e apertura -- */
/* Marchio fisso in alto a destra: dice che la landing fa parte della piattaforma Nexus Prime. */
.lp-prime {
  position: fixed; top: 0.5rem; right: 0.75rem; z-index: calc(var(--sc-z-chrome) + 2);
  width: 3.25rem; display: block; border-radius: 12px; transition: transform var(--lp-d-3) var(--lp-ease-phi);
}
.lp-prime:hover { transform: scale(1.08); }
.lp-prime:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.lp-prime img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--sc-hairline);
  box-shadow: var(--lp-card-shadow);
}
.lp-prime::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
}
html.lp-intro-landed .lp-prime::after { animation: lp-prime-ring var(--lp-d-4) var(--lp-ease-phi) 1; }
@keyframes lp-prime-ring {
  from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sc-accent) 55%, transparent); }
  to   { box-shadow: 0 0 0 21px transparent; }
}
/* sotto i 1200px la nav lascia posto al marchio; sul telefono non c'è spazio: resta solo l'apertura */
@media (max-width: 1199px) { .lp-nav .lp-wrap { padding-inline-end: 4.5rem; } }
@media (max-width: 560px) {
  .lp-nav .lp-wrap { padding-inline-end: var(--lp-gutter); }
  .lp-prime { opacity: 0; pointer-events: none; }
}

/* Apertura: lo stato html.lp-intro nasce nell'<head>; il velo copre la pagina prima che parta lo script. */
html.lp-intro::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) + 9); background: var(--sc-canvas); }
html.lp-intro.lp-intro-go::after { display: none; }
html.lp-intro:not(.lp-intro-landed) .lp-prime { opacity: 0; pointer-events: none; }
html.lp-intro:not(.lp-intro-reveal) { overflow: hidden; }
/* la pagina aspetta che il velo si alzi: parole, blocchi e card entrano insieme */
html.lp-intro:not(.lp-intro-reveal) .lp-w { animation-play-state: paused; }
html.lp-intro:not(.lp-intro-reveal) [data-sc-in].sc-in,
html.lp-intro:not(.lp-intro-reveal) [data-sc-stagger] > .sc-in { opacity: 0; transform: translate3d(0, 21px, 0); filter: blur(6px); }

.lp-intro-veil { position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) + 10); display: grid; place-items: center; cursor: pointer; }
.lp-intro-veil__bg { position: absolute; inset: 0; background: var(--sc-canvas); }
.lp-intro-card {
  position: relative; margin: 0; width: min(78vw, 34rem); aspect-ratio: 1016 / 853;
  border-radius: 28px; overflow: hidden; will-change: transform, opacity;
  box-shadow: 0 30px 90px color-mix(in oklab, var(--sc-ink) 28%, transparent);
}
.lp-intro-card img { display: block; width: 100%; height: 100%; object-fit: cover; }