/* =============================================================
   SETA LABS — LANDING
   Consuma il design system: tokens.css (palette e scala),
   kit.css (componenti), hud.css (strumentazione e lente).
   Qui vivono l'impaginato della pagina e i suoi strumenti:
   - apertura: testo a sinistra, assieme orbitale a destra
   - accensione: i cerchi che si riempiono VOLANO e diventano
     l'assieme della hero; il testo si accende con uno sweep
   - aggancio: scorrendo, l'assieme si incastona nel quadrante
     di rotta del menu di bordo
   - menu di bordo: rail sul bordo destro (desktop) o barra in
     basso (mobile), unico strumento di navigazione
   - tavole: ogni sezione è un pannello montato con targa
   ============================================================= */

/* --- base ----------------------------------------------------- */
html { scroll-padding-top: 84px; }
body { overflow-x: clip; }
.lp { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* --- campo stellare: canvas fisso dietro tutto ---------------- */
.stelle-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 1; transition: opacity 0.3s linear; }
[data-theme='giorno'] .stelle-canvas { display: none; }

/* =============================================================
   BARRA IN ALTO — solo marchio e tasto: la navigazione è nel
   menu di bordo
   ============================================================= */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background var(--d-medio) var(--e-standard), border-color var(--d-medio) var(--e-standard);
}
.lp-nav[data-staccata='true'] {
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hud-tenue);
}
.lp-nav__barra {
  max-width: var(--max); margin: 0 auto; padding: 12px var(--gutter); min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.lp-nav__marchio img { width: 132px; }
.lp-nav__marchio .lp-nav__simbolo { display: none; width: 42px; }
@media (max-width: 360px) { .lp-nav__marchio .lp-nav__lockup { display: none; } .lp-nav__marchio .lp-nav__simbolo { display: block; } }
@media (min-width: 720px) { .lp-nav__marchio img { width: 152px; } }
@media (max-width: 599px) { .lp-nav__azioni .lp-nav__cta { display: none; } .lp-nav__barra { gap: var(--s-3); } }
.lp-nav__azioni { display: flex; align-items: center; gap: var(--s-3); }
.lp-nav__lettura {
  display: none; align-items: baseline; gap: 7px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lp-nav__lettura b { color: var(--vivo); font-weight: var(--w-mid); }
@media (min-width: 1000px) { .lp-nav__lettura { display: inline-flex; } }

/* =============================================================
   MENU DI BORDO
   Rail sul bordo destro (≥1000px): canali con spia a tre stati,
   righello e quadrante di rotta. Barra in basso sotto i 1000px.
   ============================================================= */
.plancia {
  position: fixed; right: 12px; top: 50%; z-index: 44;
  display: none; flex-direction: column; align-items: flex-end; gap: 6px;
  transform: translateY(-50%);
  opacity: 0;
}
@media (min-width: 1000px) and (min-height: 620px) {
  .plancia { display: flex; }
  .lp-nav .dial, .lp-nav .lp-nav__menu.hamburger { display: none; }
}
.is-ready .plancia { animation: plancia-in 0.9s var(--e-entrata) 1.3s forwards; }
@keyframes plancia-in { from { opacity: 0; transform: translate(14px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.plancia__testa {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-bottom: 6px;
  font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.plancia__testa b { color: var(--ornato); font-weight: var(--w-mid); }
.plancia__canali, .plancia-sheet__canali { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.canale {
  position: relative; display: grid; grid-template-columns: 1fr 7px 16px; align-items: center; gap: 8px;
  height: 26px; padding-right: 4px; color: color-mix(in oklab, var(--muted) 80%, transparent);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  transition: color var(--d-rapido) var(--e-standard);
}
.canale span {
  justify-self: end; white-space: nowrap; opacity: 0; transform: translateX(6px);
  padding: 3px 8px; border: 1px solid var(--hud-tenue);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  transition: opacity var(--d-rapido) var(--e-standard), transform var(--d-medio) var(--e-entrata);
}
.canale:hover span, .canale:focus-visible span { opacity: 1; transform: none; }
.canale b { font-weight: var(--w-mid); color: var(--hud); text-align: right; }
.canale i {
  width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--hud); background: transparent;
  transition: background var(--d-rapido) var(--e-standard), box-shadow var(--d-rapido) var(--e-standard);
}
.canale:hover { color: var(--fg); }
.canale[data-stato='montata'] i { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 6px color-mix(in oklab, var(--ok) 70%, transparent); }
.canale[data-stato='montata'] b { color: color-mix(in oklab, var(--ok) 70%, var(--muted)); }
.canale[data-stato='attiva'] { color: var(--vivo); }
.canale[data-stato='attiva'] b { color: var(--vivo); }
.canale[data-stato='attiva'] span { color: var(--vivo); border-color: color-mix(in oklab, var(--vivo) 45%, transparent); }
.canale[data-stato='attiva'] i { background: var(--vivo); border-color: var(--vivo); box-shadow: 0 0 9px var(--vivo); animation: respiro 2.2s var(--e-standard) infinite; }
.plancia__righello {
  width: 16px; height: 44px; margin: 2px 4px 2px 0; justify-self: end; align-self: end;
  color: var(--hud-tenue);
  background-image: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 6px);
  background-position: right 0; background-repeat: repeat-y; background-size: 8px 100%;
}
.plancia__nota { font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* quadrante di rotta: qui si aggancia l'assieme */
.dial { position: relative; width: 58px; height: 58px; display: grid; place-items: center; flex: none; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__tacche { stroke: var(--hud); stroke-width: 1; opacity: 0.55; }
.dial__anello { fill: none; stroke: var(--hud-tenue); stroke-width: 1; }
.dial__arco { fill: none; stroke: var(--vivo); stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--vivo)); }
.dial__sonda { fill: var(--vivo); filter: drop-shadow(0 0 6px var(--vivo)); }
.dial__simbolo circle { fill: none; stroke-width: 1.2; opacity: 0; transition: opacity 0.35s var(--e-standard); }
.dial__simbolo circle:first-child { stroke: var(--seta-blu); }
.dial__simbolo circle:last-child { stroke: var(--seta-seta); }
.dial[data-agganciato='true'] .dial__simbolo circle { opacity: 0.9; }
.dial__perc {
  position: relative; font-size: 9.5px; font-weight: var(--w-say); color: var(--fg); letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; transition: opacity 0.35s var(--e-standard);
}
.dial[data-agganciato='true'] .dial__perc { opacity: 0; }

/* quadrante e tasto Menu nella barra in alto (schermi stretti o bassi) */
.lp-nav .dial { width: 40px; height: 40px; }
.lp-nav__menu.hamburger { display: grid; margin-right: -10px; }
.lp-nav__menu[aria-expanded='true'] { color: var(--vivo); }

/* pannello canali: scende dalla barra in alto */
.plancia-sheet {
  position: fixed; left: 0; right: 0; top: 64px; z-index: 59; max-height: calc(100svh - 64px); overflow: auto;
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hud); border-top: 1px solid var(--hud-tenue);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: transform var(--d-ampio) var(--e-entrata), opacity var(--d-medio) var(--e-standard), visibility var(--d-medio);
  padding: var(--s-4) var(--gutter) var(--s-5);
}
.plancia-sheet[data-aperto='true'] { transform: none; opacity: 1; visibility: visible; }
.plancia-sheet__inner { max-width: var(--max); margin: 0 auto; }
.plancia-sheet__testa { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding-bottom: var(--s-3); border-bottom: 1px solid var(--hud-tenue); }
.plancia-sheet__testa b { color: var(--ornato); font-weight: var(--w-mid); }
.plancia-sheet .canale {
  grid-template-columns: 7px 22px 1fr auto; height: 50px; padding: 0 4px; border-bottom: 1px solid var(--hud-tenue);
  font-size: 11px; color: var(--fg);
}
.plancia-sheet .canale span { justify-self: start; opacity: 1; transform: none; border: 0; padding: 0; background: none; }
.plancia-sheet .canale u { text-decoration: none; font-size: 8px; letter-spacing: 0.16em; color: var(--hud); }
.plancia-sheet .canale[data-stato='montata'] u { color: var(--ok); }
.plancia-sheet .canale[data-stato='attiva'] u { color: var(--vivo); }
.plancia-sheet__pie { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-top: var(--s-4); }
.plancia-sheet__pie small { font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 599px) { .plancia-sheet__pie .btn { width: 100%; } }

/* =============================================================
   APERTURA
   ============================================================= */
.lp-hero { position: relative; z-index: 1; padding: calc(64px + 3svh) 0 var(--s-7); }
.lp-hero__grid { display: grid; gap: var(--s-4); align-items: center; }
.lp-hero__inner { position: relative; z-index: 2; clip-path: inset(0 100% 0 0); }
.is-ready .lp-hero__inner { animation: sweep 1.15s var(--e-standard) 0.15s forwards; }
@keyframes sweep { to { clip-path: inset(0 0 0 0); } }
.lp-hero__scan {
  position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; z-index: 3; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 18px 2px color-mix(in oklab, var(--accent) 70%, transparent);
  opacity: 0; transform: translateX(-2px);
}
.is-ready .lp-hero__scan { animation: scan 1.15s var(--e-standard) 0.15s both; }
@keyframes scan { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.lp-hero .display {
  text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 0.9rem + 3vw, 3.5rem); line-height: 0.98;
  margin: var(--s-4) 0 var(--s-5);
}
.lp-hero .lead { max-width: 52ch; }
@media (max-width: 420px) { .lp-hero .lead { font-size: 0.95rem; } .lp-hero .display { margin-bottom: var(--s-4); } }
.lp-hero__azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 599px) { .lp-hero__azioni { margin-top: var(--s-5); } .lp-hero__azioni .btn { width: 100%; } }
.lp-hero__letture {
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  margin-top: clamp(28px, 5vw, 56px); padding-top: var(--s-5); border-top: 1px solid var(--hud-tenue);
}

/* l'assieme: sopra il titolo sullo stretto, di lato sul largo */
.lp-orbita {
  position: relative; order: -1; width: min(52vw, 26svh, 300px); aspect-ratio: 1; margin: 0 auto var(--s-3);
  pointer-events: none;
}
.lp-orbita > svg { width: 100%; height: 100%; overflow: visible; transform-origin: center; }
@media (min-width: 900px) {
  .lp-hero { min-height: 100svh; display: grid; align-content: center; padding: 96px 0 var(--s-8); }
  .lp-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-8); }
  .lp-orbita { order: 0; width: min(100%, 44vw, 72vh, 700px); margin: 0 0 0 auto; }
}
/* schermi larghi ma bassi: la hero si compatta per tenere le CTA sopra la piega */
@media (min-width: 900px) and (max-height: 760px) {
  .lp-hero { padding-top: 80px; }
  .lp-hero .display { font-size: clamp(1.6rem, 0.5rem + 2.5vw, 2.7rem); margin: 12px 0 16px; }
  .lp-hero .lead { font-size: 1rem; }
  .lp-hero__letture { display: none; }
  .lp-orbita { width: min(100%, 40vw, 64vh, 620px); }
}
@media (min-width: 900px) and (max-height: 620px) {
  .lp-hero { padding-top: 72px; }
  .lp-hero .display { font-size: clamp(1.5rem, 0.4rem + 2.1vw, 2.3rem); margin: 10px 0 12px; }
  .lp-hero .lead { font-size: 0.95rem; max-width: 60ch; }
  .lp-hero__azioni { margin-top: var(--s-4); }
  .lp-hero__azioni .btn--lg { min-height: 48px; }
}
@media (max-width: 599px) {
  .lp-hero__azioni .btn--lg { min-height: 50px; font-size: 0.85rem; letter-spacing: 0.12em; padding: 0 16px; white-space: normal; text-align: center; }
}
/* livello dell'assieme: sopra tutto, segue il segnaposto e in volo passa sopra le tavole e la barra */
.orb-layer { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 61; pointer-events: none; opacity: 0; transition: opacity 0.25s linear; }
.is-ready .orb-layer { opacity: 1; }
.orb-layer[data-nascosto='true'] { opacity: 0; }
.orb-layer svg { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; transform-origin: center; will-change: transform; }
@media (min-width: 900px) and (max-height: 700px) { .lp-hero__letture { display: none; } }
/* sullo stretto le letture della hero non si mostrano */
@media (max-width: 899px) { .lp-hero__letture { display: none; } }
/* la quarta lettura entra in riga solo da 1200px: sotto andrebbe a capo da sola */
@media (max-width: 1199px) { .lettura--largo { display: none; } }

/* geometria misurata dal simbolo: r uguali, centri a 0,639·r */
.orb-dettagli { transition: opacity 0.2s linear; }
.orb-lente { color: var(--accent); opacity: 0; }
.orb-cerchio { fill: none; stroke-width: 1.3; stroke-dasharray: 943 0; transform-box: fill-box; transform-origin: center; transition: stroke-dasharray 1.4s var(--e-standard); }
.orb-cerchio--blu { stroke: var(--seta-blu); }
.orb-cerchio--seta { stroke: var(--seta-seta); opacity: 0.75; }
.orb-anello { fill: none; stroke: var(--ornato); stroke-opacity: 0.32; stroke-width: 1; opacity: 0; }
.orb-corona { stroke: var(--ornato); stroke-opacity: 0.55; stroke-width: 1; fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.orb-mirino { stroke: var(--ornato); stroke-opacity: 0.75; fill: none; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.orb-sat { opacity: 0; transition: opacity 1.2s; transform-box: view-box; }
.orb-sat--blu { transform-origin: 262px 310px; color: var(--seta-blu); }
.orb-sat--seta { transform-origin: 358px 310px; color: var(--seta-seta); }
.orb-sat circle:first-child { fill: currentColor; }
.orb-sat circle:last-child { fill: none; stroke: currentColor; opacity: 0.4; }

/* --- atterraggio: i dettagli si montano attorno ai cerchi ---- */
.is-ready .orb-corona { animation: orb-corona-in 1.6s var(--e-entrata) 0.2s forwards; }
.is-ready .orb-anello { animation: orb-sale 1s var(--e-entrata) 0.45s forwards; }
.is-ready .orb-mirino { animation: orb-mirino-in 0.8s var(--e-entrata) 0.9s forwards; }
.is-ready .orb-lente { animation: orb-lente-in 1s var(--e-standard) 1.1s forwards; }
.boot-in { opacity: 0; transform: translateY(-8px); }
.is-ready .boot-in { animation: sale-boot 0.8s var(--e-entrata) forwards; animation-delay: calc(0.9s + var(--i, 0) * 0.1s); }
@keyframes orb-sale { to { opacity: 1; } }
@keyframes orb-corona-in { from { opacity: 0; transform: rotate(-24deg) scale(0.92); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes orb-mirino-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes orb-lente-in { to { opacity: 0.55; } }
@keyframes sale-boot { to { opacity: 1; transform: none; } }

/* --- regime di crociera --------------------------------------- */
.is-live .orb-cerchio { stroke-dasharray: 900 43; }
.is-live .orb-cerchio--blu { animation: orb-gira 90s linear infinite; }
.is-live .orb-cerchio--seta { animation: orb-gira-rev 120s linear infinite; }
.is-live .orb-corona { animation: orb-gira 240s linear infinite; opacity: 1; }
.is-live .orb-anello, .is-live .orb-mirino { opacity: 1; animation: none; }
.is-live .orb-lente { opacity: 0.55; animation: none; }
.is-live .orb-sat { opacity: 1; }
.is-live .orb-sat--blu { animation: orb-gira 46s linear infinite; }
.is-live .orb-sat--seta { animation: orb-gira-rev 61s linear infinite; }
@keyframes orb-gira { to { transform: rotate(360deg); } }
@keyframes orb-gira-rev { to { transform: rotate(-360deg); } }

/* =============================================================
   ACCENSIONE — i due cerchi si riempiono, poi volano in plancia
   L'avanzamento è reale: percentuale di immagini e font caricati.
   ============================================================= */
.avvio--cerchi { place-content: center; gap: var(--s-5); background: transparent; transition: none; }
.avvio__velo {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 40%, #10161f 0%, var(--bg) 62%);
  transition: opacity 0.7s var(--e-standard);
}
.avvio[data-spento='true'] .avvio__velo { opacity: 0; }
.avvio__testi { display: grid; gap: var(--s-5); justify-items: center; transition: opacity 0.3s var(--e-uscita); }
.avvio--cerchi .avvio__lista { --avvio-righe: 7; } /* 6 verifiche + riga finale */
.avvio[data-spento='true'] .avvio__testi { opacity: 0; }
.avvio-orb { width: min(70vw, 300px); height: auto; margin: 0 auto; overflow: visible; transform-origin: center; will-change: transform; }
.avvio-orb { width: min(70vw, 300px, 32svh); } /* sugli schermi bassi i cerchi si riducono e restano lontani dal bordo alto */
.avvio[data-vola='true'] .avvio-orb { transition: transform 0.95s cubic-bezier(0.7, 0, 0.2, 1); }
.avvio-orb__base circle { fill: none; stroke: var(--hud-tenue); stroke-width: 1.3; }
.avvio-orb__corona { stroke: var(--ornato); stroke-opacity: 0.4; stroke-width: 1; fill: none; }
.avvio-orb__arco {
  fill: none; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 942.48;
  stroke-dashoffset: calc(942.48 - 942.48 * var(--carico, 0));
  transform-box: fill-box; transform-origin: center;
  transition: stroke-dashoffset 260ms linear;
}
.avvio-orb__arco--sx { stroke: var(--seta-blu); transform: rotate(-90deg); filter: drop-shadow(0 0 6px color-mix(in oklab, var(--seta-blu) 60%, transparent)); }
.avvio-orb__arco--dx { stroke: var(--seta-seta); transform: rotate(-90deg) scaleX(-1); filter: drop-shadow(0 0 6px color-mix(in oklab, var(--seta-seta) 40%, transparent)); }
.avvio-orb__lente { fill: var(--seta-blu); opacity: 0; transition: opacity 420ms var(--e-entrata); }
.avvio[data-pieno='true'] .avvio-orb__lente { animation: pulsa-lente 900ms var(--e-standard) forwards; }
@keyframes pulsa-lente {
  0% { opacity: 0; }
  40% { opacity: 1; filter: drop-shadow(0 0 26px var(--seta-blu)); }
  100% { opacity: 0.35; filter: none; }
}
.avvio[data-vola='true'] .avvio-orb__lente { opacity: 0; transition: opacity 0.5s; animation: none; }
.avvio[data-vola='true'] .avvio-orb__corona { opacity: 0; transition: opacity 0.4s; }
.avvio-quota {
  text-align: center; font-family: var(--font-display); font-variation-settings: 'wdth' 118;
  font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  font-size: 2rem; line-height: 1; color: var(--fg);
}
.avvio-quota span { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); margin-left: 4px; letter-spacing: 0.2em; }

/* =============================================================
   TAVOLE — ogni sezione è un pannello montato con targa
   ============================================================= */
.tavola {
  --pad: clamp(16px, 3vw, 40px);
  position: relative; z-index: 1;
  width: min(100% - var(--gutter) * 2, var(--max)); margin: 0 auto var(--s-5);
  border: 1px solid var(--hud);
  background: color-mix(in oklab, var(--surface) 40%, transparent);
  scroll-margin-top: 80px;
}
.tavola::before, .tavola::after {
  content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid var(--ornato); opacity: 0;
  transition: opacity 0.6s var(--e-standard) 0.3s;
}
.tavola::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.tavola::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.tavola[data-vista='true']::before, .tavola[data-vista='true']::after { opacity: 0.8; }
.tavola__targa {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px var(--pad); min-height: 38px;
  background: color-mix(in oklab, var(--surface-2) 55%, transparent);
  border-bottom: 1px solid var(--hud);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tavola__targa b { color: var(--ornato); font-weight: var(--w-mid); }
.tavola__sep { flex: 1; height: 1px; background: var(--hud-tenue); min-width: 16px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--e-standard); }
.tavola[data-vista='true'] .tavola__sep { transform: scaleX(1); }
.tavola__stato {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border: 1px solid var(--hud-tenue); letter-spacing: 0.18em; color: var(--muted);
}
.tavola__stato i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: 0.5; }
.tavola__stato[data-stato='attiva'] { color: var(--vivo); border-color: color-mix(in oklab, var(--vivo) 45%, transparent); }
.tavola__stato[data-stato='attiva'] i { background: var(--vivo); opacity: 1; box-shadow: 0 0 7px var(--vivo); }
.tavola__stato[data-stato='montata'] i { background: var(--ok); opacity: 1; box-shadow: 0 0 7px var(--ok); }
@media (max-width: 560px) { .tavola__stato { display: none; } .tavola__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.tavola__corpo { padding: clamp(28px, 4vw, 48px) var(--pad) clamp(36px, 5vw, 64px); }
.tavola__corpo::before {                      /* righello di colonna A…L */
  content: ''; display: block; height: 6px; margin: 0 0 clamp(24px, 3vw, 40px); color: var(--hud-tenue);
  background-image:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px calc(100% / 12)),
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px calc(100% / 48));
  background-size: 100% 6px, 100% 3px; background-repeat: repeat-x;
}

.lp-testa { display: grid; gap: var(--s-4); margin-bottom: clamp(28px, 4vw, 48px); max-width: 68ch; }
.lp-testa h2 { text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.6rem, 3.6vw, 2.75rem); }
.lp-testa .lead { font-size: var(--t-lead); }

/* =============================================================
   CHI SIAMO — le due A dentro le lenti
   ============================================================= */
.lp-persone { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .lp-persone { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.lp-persona { display: grid; gap: var(--s-4); grid-template-columns: 96px 1fr; align-items: start; }
@media (min-width: 560px) { .lp-persona { grid-template-columns: 124px 1fr; gap: var(--s-5); } }
.lp-persona .lente-slot { max-width: 124px; }
.lp-persona .lente-slot__vuoto { padding: 0; }
.lp-iniziale { display: block; width: 62%; }
.lp-iniziale svg { width: 100%; height: auto; overflow: visible; }
.lp-iniziale__spenta path { fill: var(--hud); }
.lp-iniziale__accesa path { fill: var(--fg); }
.lp-iniziale__accesa .lp-iniziale__trattino { fill: var(--seta-bronzo); }
.lp-iniziale[data-lato='dx'] .lp-iniziale__accesa .lp-iniziale__trattino { fill: var(--seta-blu); }
.lp-iniziale__tenda { transform-box: fill-box; transform: scaleX(0); transition: transform 900ms var(--e-entrata); }
.lp-iniziale[data-lato='sx'] .lp-iniziale__tenda { transform-origin: left center; }
.lp-iniziale[data-lato='dx'] .lp-iniziale__tenda { transform-origin: right center; }
[data-vista='true'] .lp-iniziale__tenda { transform: scaleX(1); transition-delay: 320ms; }
[data-vista='true'] .lente-slot__filo { animation: accendi-filo 1100ms var(--e-standard) 200ms both; }
@keyframes accendi-filo { 0% { color: var(--hud-tenue); } 60% { color: var(--accent); } 100% { color: var(--hud); } }
.lp-persona__nome { font-size: 1.25rem; }
.lp-persona__ruolo { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ornato); margin-top: 4px; }
.lp-persona__bio { font-size: var(--t-small); color: var(--muted); margin-top: var(--s-3); }
.lp-persona__nota { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud); margin-top: var(--s-3); }

.lp-dicotomia {
  display: flex; align-items: center; gap: var(--s-4); margin-top: clamp(28px, 4vw, 44px);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
}
.lp-dicotomia span:first-child { color: var(--seta-bronzo); }
.lp-dicotomia span:last-child { color: var(--seta-blu); }
.lp-dicotomia i { flex: 1; height: 1px; background: linear-gradient(to right, var(--seta-bronzo), var(--hud-tenue), var(--seta-blu)); }
.lp-chiusa-sezione {
  margin-top: var(--s-6); padding: var(--s-6);
  border: 1px solid var(--hud); background: color-mix(in oklab, var(--surface-2) 40%, transparent);
  position: relative;
}
.lp-chiusa-sezione p { max-width: 74ch; }

/* =============================================================
   SERVIZI
   ============================================================= */
.lp-servizi { display: grid; gap: 1px; background: var(--hud-tenue); border: 1px solid var(--hud-tenue); }
@media (min-width: 700px) { .lp-servizi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .lp-servizi { grid-template-columns: repeat(3, 1fr); } }
.lp-servizio {
  background: color-mix(in oklab, var(--bg) 78%, var(--surface));
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); position: relative;
}
/* le quattro righe (icona, titolo, testo, elenco) condividono le tracce con le card della stessa fila:
   titoli ed elenchi partono alla stessa altezza */
@supports (grid-template-rows: subgrid) {
  .lp-servizio { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: var(--s-3); align-content: start; }
  .lp-servizio .card__lista { align-self: start; }
}
.lp-servizio__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.lp-servizio__num { font-size: 9px; letter-spacing: 0.2em; color: var(--hud); font-variant-numeric: tabular-nums; }
.lp-servizio h3 { font-size: 1.125rem; letter-spacing: -0.005em; }
.lp-servizio p { font-size: var(--t-small); color: var(--muted); }
.lp-servizio p.lp-persona__nota { font-size: 9px; color: var(--hud); }
.lp-servizio .card__lista { padding-top: var(--s-3); border-top: 1px solid var(--hud-tenue); }
@supports not (grid-template-rows: subgrid) { .lp-servizio .card__lista { margin-top: auto; } }
.lp-servizio[data-evidenzia='true'] {
  background: color-mix(in oklab, var(--vivo) 12%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--vivo);
  animation: aggancio 1.5s var(--e-standard);
}
@keyframes aggancio {
  0%, 22% { box-shadow: inset 0 0 0 1px var(--vivo), 0 0 26px -8px var(--vivo); }
  100% { box-shadow: inset 0 0 0 1px transparent; }
}
.lp-servizio { scroll-margin-top: 88px; }

/* =============================================================
   QUANDO CHIAMARCI — checklist su due colonne
   ============================================================= */
.lp-situazioni { display: grid; border-top: 1px solid var(--hud-tenue); }
@media (min-width: 900px) { .lp-situazioni { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
.lp-situazione {
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--hud-tenue);
  text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer; color: var(--fg); font-size: var(--t-body); line-height: 1.45;
  transition: background var(--d-rapido) var(--e-standard), padding-left var(--d-rapido) var(--e-standard);
}
.lp-situazione:hover, .lp-situazione:focus-visible { background: color-mix(in oklab, var(--vivo) 8%, transparent); padding-left: var(--s-5); }
.lp-situazione__spia {
  width: 8px; height: 11.1px; background: transparent; border: 1px solid var(--hud);
  clip-path: url(#lente-maschera); justify-self: center;
  transition: background var(--d-rapido) var(--e-standard), box-shadow var(--d-rapido) var(--e-standard);
}
.lp-situazione:hover .lp-situazione__spia { background: var(--vivo); border-color: var(--vivo); box-shadow: 0 0 9px var(--vivo); }
.lp-situazione__vai { font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hud); white-space: nowrap; }
.lp-situazione:hover .lp-situazione__vai { color: var(--vivo); }
@media (max-width: 480px) { .lp-situazione { grid-template-columns: 22px 1fr; } .lp-situazione__vai { grid-column: 2; } }
.lp-azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* =============================================================
   METODO — la rotta si accende in sequenza
   ============================================================= */
.lp-metodo { position: relative; display: grid; gap: 0; }
@media (min-width: 900px) { .lp-metodo { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding-top: 1px; } }
.lp-metodo::before {
  content: ''; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, var(--accent), var(--ornato)); opacity: 0.5;
  transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--e-standard) 0.2s;
}
@media (min-width: 900px) {
  .lp-metodo::before { left: 0; right: 0; top: 0; bottom: auto; height: 1px; width: auto; background: linear-gradient(to right, var(--accent), var(--ornato)); transform: scaleX(0); transform-origin: left; }
}
.tavola[data-vista='true'] .lp-metodo::before { transform: scale(1); }
.lp-fase { position: relative; padding: var(--s-6) 0 var(--s-6) 60px; border-top: 1px solid var(--hud-tenue); }
@media (min-width: 900px) { .lp-fase { padding: var(--s-6) var(--s-4) 0 0; border-top: 0; } }
.lp-fase__marcatore {
  position: absolute; left: 0; top: var(--s-6); width: 38px; height: 52.9px;
  display: grid; place-items: center; color: var(--fg);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  clip-path: url(#lente-maschera);
  font-family: var(--font-display); font-variation-settings: 'wdth' 118; font-weight: 600;
  font-size: 14px; font-variant-numeric: tabular-nums;
  transition: background var(--d-ampio) var(--e-standard), color var(--d-ampio) var(--e-standard), box-shadow var(--d-ampio) var(--e-standard);
}
@media (min-width: 900px) { .lp-fase__marcatore { top: -26px; left: 0; } }
.tavola[data-vista='true'] .lp-fase__marcatore { background: var(--accent); color: var(--accent-fg); box-shadow: 0 0 22px -6px var(--accent); }
.tavola[data-vista='true'] .lp-fase:nth-child(1) .lp-fase__marcatore { transition-delay: 0.3s; }
.tavola[data-vista='true'] .lp-fase:nth-child(2) .lp-fase__marcatore { transition-delay: 0.65s; }
.tavola[data-vista='true'] .lp-fase:nth-child(3) .lp-fase__marcatore { transition-delay: 1s; }
.tavola[data-vista='true'] .lp-fase:nth-child(4) .lp-fase__marcatore { transition-delay: 1.35s; }
.lp-fase h3 { font-size: 1.0625rem; margin-bottom: var(--s-3); }
@media (min-width: 900px) { .lp-fase h3 { margin-top: var(--s-5); } }
.lp-fase p { font-size: var(--t-small); color: var(--muted); }

/* =============================================================
   PERCHÉ NOI
   ============================================================= */
.lp-punti { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .lp-punti { grid-template-columns: repeat(2, 1fr); } }
.lp-punto { position: relative; padding: var(--s-5); border: 1px solid var(--hud-tenue); background: color-mix(in oklab, var(--surface) 30%, transparent); }
.lp-punto::before, .lp-punto::after { content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid var(--ornato); opacity: 0.7; }
.lp-punto::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.lp-punto::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.lp-punto h3 { font-size: 1.0625rem; margin-bottom: var(--s-3); text-wrap: balance; }
.lp-punto p { font-size: var(--t-small); color: var(--muted); }

/* =============================================================
   CONTATTI
   ============================================================= */
.lp-contatti { display: grid; gap: clamp(28px, 5vw, 56px); }
@media (min-width: 900px) { .lp-contatti { grid-template-columns: 0.85fr 1.15fr; } }
.lp-recapiti { display: grid; gap: var(--s-4); align-content: start; }
.lp-recapito { display: grid; gap: 4px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--hud-tenue); }
.lp-recapito span { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ornato); }
.lp-recapito b { font-size: var(--t-body); font-weight: var(--w-mid); letter-spacing: 0.02em; }
.lp-recapito b[data-vuoto='true'] { color: var(--hud); font-size: var(--t-small); letter-spacing: 0.14em; text-transform: uppercase; }
.lp-form { padding: var(--s-6); border: 1px solid var(--hud); background: color-mix(in oklab, var(--surface) 42%, transparent); }
@media (max-width: 480px) { .lp-form { padding: var(--s-5) var(--s-4); } }
.lp-form__testa {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--hud-tenue);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ornato);
}
.lp-form__testa::after { content: ''; flex: 1; height: 7px; background-image: repeating-linear-gradient(to right, var(--hud-tenue) 0 1px, transparent 1px 6px); }
.lp-form__legenda { font-size: var(--t-caption); color: var(--muted); margin: 0 0 var(--s-5); letter-spacing: 0.04em; }
.lp-form__coppia { display: grid; gap: 0 var(--s-4); }
@media (min-width: 560px) { .lp-form__coppia { grid-template-columns: repeat(2, 1fr); } }
.campo__eti abbr { color: var(--seta-bronzo); text-decoration: none; border: 0; margin-left: 2px; letter-spacing: 0; }
.lp-form[data-inviato='true'] .lp-form__corpo { display: none; }
.lp-form__fatto { display: none; }
.lp-form[data-inviato='true'] .lp-form__fatto { display: grid; gap: var(--s-4); justify-items: start; }
.lp-form__icona { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--hud); color: var(--ok); }
.lp-form__icona svg { width: 22px; height: 22px; }

/* =============================================================
   PIÈ DI PAGINA
   ============================================================= */
.lp-pie { border-top: 1px solid var(--hud); padding: clamp(48px, 7vw, 80px) 0 0; position: relative; z-index: 1; }
.lp-pie__griglia { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .lp-pie__griglia { grid-template-columns: 1.6fr 1fr 1fr; } }
.lp-pie__col { display: grid; gap: 10px; align-content: start; }
.lp-pie__col span { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ornato); }
.lp-pie__col a { font-size: var(--t-small); color: var(--muted); }
.lp-pie__col a:hover { color: var(--fg); }
.lp-pie__marchio img { width: 150px; margin-bottom: var(--s-3); }
.lp-pie__legale { font-size: var(--t-caption); color: var(--hud); letter-spacing: 0.06em; max-width: 46ch; }

/* =============================================================
   RIVELAZIONI — una regola sola
   ============================================================= */
.rivela { opacity: 0; transform: translateY(18px); }
.rivela[data-vista='true'] {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--e-entrata), transform 620ms var(--e-entrata);
  transition-delay: var(--ritardo, 0ms);
}
.avanzamento { top: 0; }

/* =============================================================
   404 — stessa plancia, assieme già in crociera
   ============================================================= */
.lp-404 { min-height: 100svh; display: grid; align-content: center; padding: 96px 0 var(--s-8); position: relative; z-index: 1; }
.lp-404 .display { text-transform: uppercase; font-size: clamp(4rem, 14vw, 9rem); letter-spacing: -0.03em; line-height: 0.9; }
.lp-404 .display b { font-weight: 600; color: var(--accent); }
.lp-404 h1 { margin-top: var(--s-4); font-size: clamp(1.5rem, 3vw, 2.2rem); text-transform: uppercase; }
.lp-404 .lead { margin-top: var(--s-4); }
.lp-404 .lp-orbita { z-index: 1; }

/* =============================================================
   DESIGN SYSTEM — demo dell'assieme e della plancia in tavola
   ============================================================= */
.ds-orbita { display: grid; place-items: center; padding: var(--s-5); border: 1px solid var(--hud-tenue); background: color-mix(in oklab, var(--bg) 55%, var(--surface)); }
.ds-orbita .lp-orbita { width: min(100%, 380px); order: 0; margin: 0; z-index: 1; }
.ds-plancia { position: relative; display: grid; place-items: center; min-height: 320px; border: 1px solid var(--hud-tenue); background: color-mix(in oklab, var(--bg) 55%, var(--surface)); }
.ds-plancia .plancia { position: absolute; display: flex; opacity: 1; animation: none; right: 24px; }
.sez .lp-iniziale { width: 72px; }

/* =============================================================
   MOVIMENTO RIDOTTO — tutto fermo e già visibile
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .rivela, .boot-in, .plancia { opacity: 1; transform: none; animation: none; }
  .plancia { transform: translateY(-50%); }
  .lp-hero__inner { clip-path: none; animation: none; }
  .lp-hero__scan { display: none; }
  .lp-orbita svg { opacity: 1; }
  .lp-iniziale__tenda { transform: scaleX(1); }
  .orb-cerchio { stroke-dasharray: 900 43; }
  .orb-anello, .orb-corona, .orb-mirino, .orb-sat { opacity: 1; }
  .orb-lente { opacity: 0.55; }
  .tavola__sep { transform: none; }
  .lp-metodo::before { transform: none; }
  .tavola::before, .tavola::after { opacity: 0.8; }
  .lente-slot__filo { animation: none !important; }
}

/* =============================================================
   CAMBIO LINGUA — the other language opens already settled
   `is-switch` and `is-fermo` are set in <head> (Base.astro) when the
   visitor arrives through the language switcher; landing.js removes
   `is-fermo` two frames after the settled page is on screen.
   ============================================================= */
html.is-switch .avvio { display: none !important; }
html.is-switch:not(.is-ready) body { visibility: hidden; }  /* until landing.js has placed everything */
html.is-fermo *, html.is-fermo *::before, html.is-fermo *::after { transition: none !important; }
html.is-switch .plancia { opacity: 1; animation: none; }
html.is-switch .lp-hero__inner { clip-path: none; animation: none; }
html.is-switch .lp-hero__scan { display: none; }
html.is-switch .boot-in { opacity: 1; transform: none; animation: none; }
html.is-switch [data-subito] .lente-slot__filo, html.is-switch .lente-slot__filo[data-subito] { animation: none; }