/* ==========================================================================
   Pagina di benvenuto (js/landing.js)
   Solo sul sito, prima dell'accesso. Stessi materiali del resto (css/glass.css):
   sfondo liquido (.lq), vetro per la barra, la finestra dell'app e le schede che
   le galleggiano intorno; schede traslucide (senza sfocatura) per le funzioni;
   molle per i movimenti. Le animazioni infinite girano solo sugli elementi sullo
   schermo (.live, messo da landing.js) e si fermano con «riduci movimento».
   ========================================================================== */
/* place-items: normal — la scheda di accesso centra i figli con place-items; i Chrome recenti
   lo applicano anche ai blocchi, che diventavano larghi 1180 px anche sul telefono */
.auth-gate.lp { display: block; place-items: normal; justify-items: normal; min-height: 100vh; min-height: 100dvh; padding: 0; color: var(--ink); overflow-x: clip; }
html.lp-locked, html.lp-locked body { overflow: hidden; }
.lp button { -webkit-tap-highlight-color: transparent; }
/* :where — toglie solo i margini del browser: con :is pesava più delle regole sotto
   (.lp .lp-title, .lp-card-t h3, .lp-note…) e il titolo restava attaccato al testo */
.lp :where(.lp-main, .lp-foot, .lp-nav) :where(h1, h2, h3, p) { margin: 0; }
.lp .lp-ic {
  width: 42px; height: 42px; flex: none;
  border-radius: 13px; display: grid; place-items: center; color: var(--ink);
  background: linear-gradient(150deg, rgba(var(--ink-rgb), 0.14), rgba(var(--ink-rgb), 0.03) 70%);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-spec);
}
.lp .lp-ic svg { width: 21px; height: 21px; }
.lp-mark {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--solid); color: var(--on-solid);
}
.lp-mark svg { width: 18px; height: 18px; }
/* titoli: un filo di metallo, come la home */
.lp :is(.lp-title, .lp-head h2, .lp-final h2, .lp-stats b, .lp-win-hi) {
  font-family: var(--font-display); font-weight: 700;
  background: var(--title); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@keyframes lpUp { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lpDrop { from { opacity: 0; transform: translateY(-16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes lpSheen { from { background-position: 130% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
@keyframes lpWin { from { opacity: 0; translate: 0 56px; scale: 0.92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes lpChip { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: 1; } }
@keyframes lpBob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes lpPing { 0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(48, 209, 88, 0); } }
@keyframes lpBar { from { transform: scaleX(0.28); } to { transform: scaleX(0.8); } }
@keyframes lpRing { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
@keyframes lpDraw { 0% { stroke-dashoffset: 1; opacity: 1; } 11% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 0; opacity: 1; } 90%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lpMarquee { to { transform: translateX(calc(-50% - 5px)); } }
@keyframes lpBx { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes lpBy {
  0% { transform: translateY(100%); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
  100% { transform: translateY(100%); }
}
@keyframes lpFlip { 0%, 40% { transform: rotateY(0deg); } 52%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes lpPop { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes lpDot { 0%, 80%, 100% { opacity: 0.3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes lpPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---------- barra in alto: una pillola di vetro che si stringe scorrendo ---------- */
.lp-nav {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0;
  padding: calc(12px + var(--sat, 0px)) 16px 0;
  pointer-events: none;
}
/* l'entrata sta sulla pillola stessa: un'animazione sul genitore impedirebbe al vetro di sfocare la pagina sotto */
.lp-nav-in {
  animation: lpDrop 0.9s var(--spring-soft) 0.1s both;
  pointer-events: auto;
  max-width: 1180px; height: 60px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 0 9px 0 8px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--glass-spec) -140%, transparent 60%), color-mix(in srgb, var(--glass) 55%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), var(--sh-1);
  transition: background 0.35s, box-shadow 0.35s, max-width 0.7s var(--spring-soft);
}
.lp-nav.scrolled .lp-nav-in {
  max-width: 1060px;
  background: linear-gradient(180deg, var(--glass-spec) -140%, transparent 60%), var(--glass);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), var(--sh-2);
}
.lp-brand {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 12px 0 6px; border: 0; border-radius: 16px;
  background: transparent; cursor: pointer;
  font-size: 17px; font-weight: 650; letter-spacing: -0.02em;
  transition: background 0.2s;
}
.lp-brand:hover { background: rgba(var(--ink-rgb), 0.06); }
.lp-links { display: flex; gap: 2px; }
.lp-links button, .lp-links a, .lp-foot nav button {
  height: 38px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  font-size: 14.5px; font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.lp-links a { display: inline-flex; align-items: center; text-decoration: none; }
.lp-links button:hover, .lp-links a:hover, .lp-foot nav button:hover { background: rgba(var(--ink-rgb), 0.07); color: var(--ink); }
.lp-nav-end { justify-self: end; display: flex; align-items: center; gap: 6px; }
.lp-pill {
  position: relative;
  height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 13px; border: 0; border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.07); color: var(--ink-2);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge);
  font-size: 14px; cursor: pointer;
  transition: transform 0.35s var(--spring), background 0.2s, color 0.2s;
}
.lp-pill:hover { background: rgba(var(--ink-rgb), 0.11); color: var(--ink); }
.lp-pill:active { transform: scale(0.92); }
.lp-pill svg { width: 17px; height: 17px; flex: none; }
.lp-theme { width: 38px; padding: 0; overflow: hidden; }
.lp-theme svg { position: absolute; transition: transform 0.55s var(--spring), opacity 0.25s; }
.lp-theme svg:first-child { opacity: 0; transform: rotate(-90deg) scale(0.4); }
.lp-theme svg:last-child { opacity: 1; transform: none; }
.lp-theme.is-dark svg:first-child { opacity: 1; transform: none; }
.lp-theme.is-dark svg:last-child { opacity: 0; transform: rotate(90deg) scale(0.4); }
.lp-nav-cta { height: 38px; padding: 0 18px; font-weight: 600; }

/* ---------- apertura ---------- */
.lp-hero {
  max-width: 1180px; margin: 0 auto;
  min-height: min(100svh, 940px);
  padding: calc(118px + var(--sat, 0px)) 24px 56px;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.lp-in { animation: lpUp 0.9s var(--spring-soft) calc(var(--d, 0) * 90ms + 150ms) both; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 15px 0 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 550; color: var(--ink-2);
  background: rgba(var(--ink-rgb), 0.06); box-shadow: inset 0 0 0 0.5px var(--glass-edge);
}
.lp-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #30d158; animation: lpPing 2.4s ease-out 1.2s infinite; }
.lp .lp-title {
  margin: 22px 0 22px;
  font-size: clamp(44px, 5.1vw, 72px); line-height: 1.02; letter-spacing: -0.048em;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.6) 50%, transparent 60%) 130% 0 / 250% 100% no-repeat, var(--title);
  -webkit-background-clip: text; background-clip: text;
  animation: lpUp 0.9s var(--spring-soft) 0.24s both, lpSheen 2.2s var(--ease) 1.1s both;
}
.lp-lead { max-width: 31em; font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.lp .lp-cta { position: relative; overflow: hidden; height: 52px; padding: 0 22px 0 26px; gap: 10px; font-size: 16px; font-weight: 600; }
.lp-cta svg { width: 18px; height: 18px; transition: transform 0.45s var(--spring); }
@media (hover: hover) { .lp-cta:hover svg { transform: translateX(4px); } }
.lp .lp-ghost {
  height: 52px; padding: 0 22px; gap: 9px; font-size: 16px;
  border: 0; background: rgba(var(--ink-rgb), 0.07); box-shadow: inset 0 0 0 0.5px var(--glass-edge);
}
.lp .lp-ghost:hover { background: rgba(var(--ink-rgb), 0.11); }
.lp-ghost svg { width: 18px; height: 18px; }
.lp-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }
.lp-note svg { width: 15px; height: 15px; flex: none; }

/* la finestra dell'app in miniatura: misure in cqw, così resta uguale a ogni larghezza */
.lp-stage { position: relative; aspect-ratio: 1.12 / 1; perspective: 1600px; --px: 0; --py: 0; }
.lp-win {
  position: absolute; inset: 7% 3% 9% 6%;
  container-type: inline-size;
  display: grid; grid-template-columns: 31% minmax(0, 1fr);
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, var(--glass-spec) -60%, transparent 30%), color-mix(in srgb, var(--glass-2) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(22px); backdrop-filter: saturate(1.6) blur(22px);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-spec), var(--sh-3);
  transform: rotateY(calc(var(--px) * 7deg - 7deg)) rotateX(calc(var(--py) * -6deg + 4deg));
  animation: lpWin 1.3s var(--spring-soft) 0.35s both;
}
.lp-win-side {
  min-width: 0; padding: 5cqw 3.2cqw; display: flex; flex-direction: column; gap: 1.6cqw;
  background: rgba(var(--ink-rgb), 0.03); box-shadow: inset -0.5px 0 0 var(--card-edge);
  font-size: 2.3cqw;
}
.lp-win-brand { display: flex; align-items: center; gap: 1.6cqw; margin-bottom: 0.8cqw; font-size: 2.8cqw; font-weight: 650; }
.lp-win-brand span { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; display: grid; place-items: center; background: var(--solid); color: var(--on-solid); }
.lp-win-brand svg { width: 62%; height: 62%; }
.lp-win-search { height: 5cqw; border-radius: 1.6cqw; background: rgba(var(--ink-rgb), 0.07); }
.lp-win-nav { display: grid; gap: 0.4cqw; }
.lp-win-nav span {
  display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.8cqw;
  color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-win-nav span.on { background: rgba(var(--ink-rgb), 0.1); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 0.5px var(--glass-edge); }
.lp-win-nav svg { width: 3cqw; height: 3cqw; flex: none; }
.lp-win-side small { margin-top: 1.4cqw; padding-left: 1.6cqw; font-size: 1.8cqw; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.lp-win-subj i { width: 1.7cqw; height: 1.7cqw; margin: 0 0.6cqw; border-radius: 50%; flex: none; background: var(--c); }
.lp-win-main { min-width: 0; padding: 3.4cqw 4cqw; display: flex; flex-direction: column; gap: 3cqw; }
.lp-win-top {
  display: flex; align-items: center; gap: 1.4cqw; height: 6.4cqw; padding: 0 1.2cqw 0 2.4cqw;
  border-radius: 2.4cqw; background: rgba(var(--ink-rgb), 0.05); box-shadow: inset 0 0 0 0.5px var(--card-edge);
  font-size: 2.3cqw; font-weight: 600;
}
.lp-win-top span { margin-right: auto; }
.lp-win-top i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: rgba(var(--ink-rgb), 0.08); }
.lp-win-top b { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; display: grid; place-items: center; font-size: 1.6cqw; background: var(--solid); color: var(--on-solid); }
.lp .lp-win-hi { font-size: 5.4cqw; line-height: 1.02; letter-spacing: -0.04em; }
.lp-win-now {
  display: grid; grid-template-columns: 1.3fr 1fr;
  border-radius: 3cqw;
  background: linear-gradient(180deg, var(--sheen), transparent 50%), var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--sh-1);
}
.lp-win-now > div { min-width: 0; padding: 2.4cqw 2.8cqw; display: grid; gap: 0.7cqw; }
.lp-win-now > div + div { box-shadow: inset 0.5px 0 0 var(--card-edge); }
.lp-win-now small { font-size: 1.7cqw; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.lp-win-now b { display: flex; align-items: center; gap: 1.2cqw; font-size: 3cqw; font-weight: 650; white-space: nowrap; }
.lp-win-now b i { width: 1.8cqw; height: 1.8cqw; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0.7cqw color-mix(in srgb, var(--c) 22%, transparent); }
.lp-win-now em { font-style: normal; font-size: 1.9cqw; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-bar { display: block; height: 0.9cqw; border-radius: 1cqw; overflow: hidden; background: rgba(var(--ink-rgb), 0.08); }
.lp-bar i {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), var(--c));
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent);
  transform-origin: 0 50%;
  animation: lpBar 9s ease-in-out infinite alternate paused;
}
.live .lp-bar i { animation-play-state: running; }
.lp-win-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.lp-win-cards span {
  min-width: 0; display: flex; align-items: center; gap: 1.6cqw; padding: 2.2cqw; border-radius: 2.6cqw;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 24%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c) 32%, transparent), inset 0.5cqw 0 0 var(--c);
  font-size: 2.4cqw; font-weight: 600; white-space: nowrap;
}
.lp-win-cards i { width: 5cqw; height: 5cqw; flex: none; border-radius: 1.6cqw; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); }
.lp-win-cards svg { width: 60%; height: 60%; }

/* schede di vetro che galleggiano intorno alla finestra e la seguono di più (profondità --z) */
.lp-chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 20px;
  font-size: 13.5px;
  background: linear-gradient(180deg, var(--glass-spec) -50%, transparent 40%), var(--glass-2);
  -webkit-backdrop-filter: saturate(1.7) blur(18px); backdrop-filter: saturate(1.7) blur(18px);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-spec), var(--sh-2);
  translate: calc(var(--px) * var(--z, 14px)) calc(var(--py) * var(--z, 14px));
  animation: lpChip 0.9s var(--spring) var(--in, 0.9s) both, lpBob 6s ease-in-out calc(var(--in, 0.9s) + 0.9s) infinite alternate;
}
.lp-stage:not(.live) .lp-chip { animation-play-state: running, paused; }
.lp-chip-timer { left: -1%; top: 40%; --z: 26px; --in: 0.95s; }
.lp-chip-timer svg { width: 38px; height: 38px; flex: none; transform: rotate(-90deg); }
.lp-chip-timer circle { fill: none; stroke: rgba(var(--ink-rgb), 0.12); stroke-width: 4; }
.lp-chip-timer circle.on { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 100; animation: lpRing 14s linear infinite paused; }
.live .lp-chip-timer circle.on { animation-play-state: running; }
.lp-chip-timer span { display: grid; line-height: 1.2; }
.lp-chip-timer b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lp-chip-timer small { font-size: 12px; color: var(--ink-3); }
.lp-chip-ask { right: -3%; bottom: 3%; width: min(46%, 300px); flex-direction: column; align-items: stretch; gap: 8px; --z: 34px; --in: 1.15s; animation-duration: 0.9s, 7s; }
.lp-chip-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.lp-chip-h svg { width: 14px; height: 14px; color: var(--ai-text); }
.lp-q { align-self: flex-end; padding: 7px 12px; border-radius: 14px 14px 5px 14px; background: var(--ai-fill); color: #fff; font-weight: 550; }
.lp-a { padding: 8px 12px; border-radius: 14px 14px 14px 5px; background: rgba(var(--ink-rgb), 0.07); line-height: 1.4; }
.lp-chip-ink { left: 3%; bottom: 0; width: min(33%, 210px); padding: 6px 10px; --z: 18px; --in: 1.35s; animation-duration: 0.9s, 8s; }
.lp-ink-mini { width: 100%; height: auto; }

/* scrittura a mano: un tratto alla volta, poi si dissolve e ricomincia */
:is(.lp-ink, .lp-ink-mini) path {
  fill: none; stroke: var(--ink); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: lpDraw 7s var(--ease) calc(var(--k) * 0.32s) infinite paused;
}
:is(.lp-ink, .lp-ink-mini) .lp-hl { stroke: rgba(255, 214, 10, 0.42); stroke-width: 14; }
.live :is(.lp-ink, .lp-ink-mini) path { animation-play-state: running; }

/* ---------- materie che scorrono ---------- */
.lp-marquee {
  max-width: 1180px; margin: 0 auto; padding: 8px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.lp-mq { display: flex; gap: 10px; width: max-content; animation: lpMarquee 46s linear infinite paused; }
.lp-marquee.live .lp-mq { animation-play-state: running; }
.lp-mq span {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px 0 12px; border-radius: 999px;
  font-size: 14.5px; font-weight: 550; white-space: nowrap;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 7%, transparent));
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c) 30%, transparent);
}
.lp-mq svg { width: 18px; height: 18px; color: var(--c); }

/* ---------- numeri ---------- */
.lp-stats { max-width: 980px; margin: 40px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lp-stats > div {
  padding: 22px 16px; text-align: center; border-radius: 22px;
  background: linear-gradient(180deg, var(--sheen), transparent 50%), var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--sh-1);
}
.lp .lp-stats b { display: block; font-size: clamp(32px, 4vw, 46px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.lp-stats span { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-3); }

/* ---------- sezioni ---------- */
.lp-sec { max-width: 1180px; margin: 0 auto; padding: 124px 24px 0; scroll-margin-top: 84px; }
.lp-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.lp-kicker {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(var(--ink-rgb), 0.06); box-shadow: inset 0 0 0 0.5px var(--glass-edge);
}
.lp .lp-head h2 { margin: 16px 0 14px; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.03; letter-spacing: -0.045em; text-wrap: balance; }
.lp-head p { font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.lp-center { display: flex; justify-content: center; margin-top: 28px; }

/* comparsa allo scorrimento (proprietà translate e scale: transform resta libero per il passaggio) */
.lp-rv {
  --rv: opacity 0.8s ease calc(var(--d, 0) * 70ms), translate 1s var(--spring-soft) calc(var(--d, 0) * 70ms), scale 1s var(--spring-soft) calc(var(--d, 0) * 70ms);
  transition: var(--rv);
}
.lp-rv:not(.in) { opacity: 0; translate: 0 32px; scale: 0.97; }

/* schede: traslucide come il resto, con la luce che segue il puntatore */
:is(.lp-card, .lp-mini, .lp-dev, .lp-tile) {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--sheen), transparent 40%), var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--sh-1);
  transition: var(--rv), transform 0.5s var(--spring), box-shadow 0.3s;
}
:is(.lp-card, .lp-mini, .lp-dev, .lp-tile, .lp-final)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(255, 255, 255, 0.09), transparent 55%);
  opacity: 0; transition: opacity 0.4s;
}
:root[data-theme="light"] :is(.lp-card, .lp-mini, .lp-dev, .lp-tile, .lp-final)::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(255, 255, 255, 0.85), transparent 55%); }
@media (hover: hover) and (pointer: fine) {
  :is(.lp-card, .lp-mini, .lp-dev, .lp-tile, .lp-final):hover::before { opacity: 1; }
  :is(.lp-card, .lp-mini, .lp-dev, .lp-tile):hover { transform: translateY(-4px); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--sh-2); }
}

.lp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; }
.lp-a, .lp-e { grid-column: span 2; }
.lp-b { grid-row: span 2; }
.lp-card { display: flex; flex-direction: column; gap: 20px; min-height: 300px; padding: 26px; border-radius: 30px; }
.lp-card-t h3 { margin: 16px 0 6px; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.lp-card-t p { max-width: 36em; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.lp-a { flex-direction: row; align-items: stretch; }
.lp-a .lp-card-t { flex: 0 0 34%; }
.lp-a .lp-vis { flex: 1 1 0%; min-width: 0; }
.lp-vis {
  position: relative; flex: 1 0 auto; min-height: 170px; overflow: hidden;
  border-radius: 20px;
  background: rgba(var(--ink-rgb), 0.035); box-shadow: inset 0 0 0 0.5px var(--card-edge);
}

/* lezioni: il ripasso e un lancio (x uniforme, y con una parabola vera: due curve quadratiche) */
.lp-recap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lp-rows { display: grid; align-content: center; gap: 4px; padding: 14px; }
.lp-rows div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; }
.lp-rows div:nth-child(odd) { background: rgba(var(--ink-rgb), 0.045); }
.lp-rows span { font-size: 12px; font-weight: 550; color: var(--ink-3); }
.lp-rows b { font-family: "KaTeX_Main", "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 19px; letter-spacing: 0; white-space: nowrap; }
.lp-rows sub { font-size: 0.65em; }
.lp-proj { position: relative; margin: 34px 30px 26px 10px; }
.lp-proj svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-proj path { fill: none; vector-effect: non-scaling-stroke; }
.lp-proj-g { stroke: rgba(var(--ink-rgb), 0.22); stroke-width: 1.5; }
.lp-proj-p { stroke: color-mix(in srgb, #0090ff 55%, transparent); stroke-width: 1.5; }
.lp-bx, .lp-by { position: absolute; inset: 0; }
.lp-bx { animation: lpBx 2.6s linear infinite paused; }
.lp-by { animation: lpBy 2.6s infinite paused; }
.live :is(.lp-bx, .lp-by) { animation-play-state: running; }
.lp-ball {
  position: absolute; right: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #7cc4ff 40%, #0090ff);
  box-shadow: 0 0 16px rgba(0, 144, 255, 0.6);
}

/* scrittura a mano: un foglio a righe */
.lp-paper {
  display: grid; place-items: center; padding: 18px;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(var(--ink-rgb), 0.07) 31px 32px), rgba(var(--ink-rgb), 0.03);
}
:root[data-theme="light"] .lp-paper { background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(29, 27, 24, 0.07) 31px 32px), #fff; }
.lp-ink { width: 100%; max-width: 340px; height: auto; }

/* flashcard che si gira */
.lp-flip { display: grid; place-items: center; padding: 18px; perspective: 900px; }
.lp-flip::before, .lp-flip-in { grid-area: 1 / 1; width: min(100%, 300px); aspect-ratio: 1.55; }
.lp-flip::before {
  content: ""; border-radius: 18px;
  background: rgba(var(--ink-rgb), 0.06); box-shadow: inset 0 0 0 0.5px var(--card-edge);
  transform: rotate(-5deg) translateY(8px) scale(0.96);
}
.lp-flip-in { position: relative; transform-style: preserve-3d; animation: lpFlip 6s var(--spring-soft) infinite paused; }
.live .lp-flip-in { animation-play-state: running; }
.lp-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 18px 20px; border-radius: 18px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 26%, var(--raised)), color-mix(in srgb, var(--c) 8%, var(--raised)));
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c) 35%, transparent), var(--sh-2);
}
.lp-back { transform: rotateY(180deg); }
.lp-face small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.lp-face small i, .lp-timer-t small i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.lp-face b { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
.lp-face p { font-size: 14px; line-height: 1.45; }

/* timer */
.lp-timer { display: grid; place-items: center; padding: 18px; }
.lp-timer svg { grid-area: 1 / 1; width: min(170px, 80%); aspect-ratio: 1; transform: rotate(-90deg); overflow: visible; }
.lp-timer circle { fill: none; stroke: rgba(var(--ink-rgb), 0.1); stroke-width: 7; }
.lp-timer circle.on { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.lp-timer-t { grid-area: 1 / 1; display: grid; justify-items: center; gap: 4px; }
.lp-timer-t b { font-family: var(--font-display); font-size: 36px; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lp-timer-t small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }

/* chat con l'assistente: le righe compaiono a turno (classi s1…s4 da landing.js) */
.lp-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 210px; padding: 20px; transition: opacity 0.45s; }
.lp-chat.out { opacity: 0; }
.lp-msg { display: none; max-width: 78%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.4; }
.lp-me { align-self: flex-end; background: var(--ai-fill); color: #fff; border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.lp-bot { align-self: flex-start; background: linear-gradient(180deg, var(--sheen), transparent 60%), var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge); border-bottom-left-radius: 6px; transform-origin: 0 100%; }
.lp-typing { align-self: flex-start; gap: 4px; padding: 13px 14px; background: rgba(var(--ink-rgb), 0.07); border-bottom-left-radius: 6px; }
.lp-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ai); animation: lpDot 1.1s infinite; }
.lp-typing i:nth-child(2) { animation-delay: 0.15s; }
.lp-typing i:nth-child(3) { animation-delay: 0.3s; }
.lp-sugg { display: none; flex-wrap: wrap; gap: 8px; }
.lp-sugg b {
  padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 550;
  background: rgba(var(--ink-rgb), 0.06); box-shadow: inset 0 0 0 0.5px var(--glass-edge);
  animation: lpPop 0.5s var(--spring) both;
}
.lp-sugg b:nth-child(2) { animation-delay: 0.12s; }
.lp-chat.s1 .lp-me { display: block; animation: lpPop 0.5s var(--spring) both; }
.lp-chat.s2:not(.s3) .lp-typing { display: inline-flex; animation: lpPop 0.4s var(--spring) both; }
.lp-chat.s3 .lp-bot { display: block; animation: lpPop 0.5s var(--spring) both; }
.lp-chat.s4 .lp-sugg { display: flex; }

/* orario e calendario */
.lp-week { display: grid; align-content: center; gap: 14px; padding: 18px; }
.lp-now {
  display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 24%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c) 32%, transparent), inset 3px 0 0 var(--c);
}
.lp-now small { font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.lp-now b { font-size: 18px; font-weight: 650; }
.lp-now .lp-bar { height: 6px; border-radius: 4px; }
.lp-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lp-days span { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 2px 15px; border-radius: 14px; background: rgba(var(--ink-rgb), 0.04); }
.lp-days small { font-size: 11.5px; color: var(--ink-3); text-transform: capitalize; }
.lp-days b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.lp-days i { position: absolute; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.lp-days .ev { background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c) 40%, transparent); }
.live .lp-days .ev i { animation: lpPulse 2s ease-out infinite; }

/* le altre funzioni */
.lp-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.lp-mini { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 24px; }
.lp .lp-mini .lp-ic { width: 38px; height: 38px; border-radius: 12px; }
.lp-mini h3 { margin-bottom: 4px; font-size: 16px; font-weight: 650; }
.lp-mini p { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
/* Codice: il compilatore si prova senza accesso (/compiler) */
.lp-mini-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.lp-mini-go svg { width: 14px; height: 14px; transition: transform 0.45s var(--spring); }
.lp-mini-go:hover svg { transform: translateX(3px); }

/* ---------- dispositivi ---------- */
.lp-devs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lp-dev { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 24px 18px; border-radius: 24px; text-align: center; }
.lp .lp-dev .lp-ic { width: 54px; height: 54px; margin-bottom: 10px; border-radius: 17px; }
.lp .lp-dev .lp-ic svg { width: 26px; height: 26px; }
.lp-dev h3 { font-size: 16.5px; font-weight: 650; }
.lp-dev p { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

/* ---------- privacy ---------- */
.lp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-tile { padding: 26px; border-radius: 26px; }
.lp-tile .lp-ic { margin-bottom: 18px; }
.lp-tile h3 { margin-bottom: 6px; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.lp-tile p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.lp-link {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; font-size: 15px; font-weight: 550;
  transition: background 0.2s;
}
.lp-link:hover { background: rgba(var(--ink-rgb), 0.07); }
.lp-link svg { width: 16px; height: 16px; transition: transform 0.45s var(--spring); }
.lp-link:hover svg { transform: translateX(3px); }

/* ---------- ultimo invito ---------- */
.lp-final {
  position: relative; isolation: isolate; overflow: hidden;
  width: calc(100% - 48px); max-width: 1132px; margin: 124px auto 0;
  padding: 72px 24px 60px;
  display: grid; justify-items: center; gap: 14px; text-align: center;
  border-radius: 38px;
  background: linear-gradient(180deg, var(--glass-spec) -60%, transparent 40%), var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-spec), var(--sh-3);
}
.lp-final::after {
  content: ""; position: absolute; z-index: -2; left: 10%; right: 10%; top: -60%; height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(191, 90, 242, 0.2), transparent 70%);
  pointer-events: none;
}
.lp-final-mark {
  width: 64px; height: 64px; margin-bottom: 6px; border-radius: 21px;
  display: grid; place-items: center; color: var(--ink);
  background: linear-gradient(150deg, rgba(var(--ink-rgb), 0.16), rgba(var(--ink-rgb), 0.03) 70%), var(--card);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 0 var(--glass-spec), var(--sh-1);
}
.lp-final-mark svg { width: 30px; height: 30px; }
.lp .lp-final h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.lp-final p { max-width: 30em; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.lp-final .lp-cta { margin-top: 12px; }
.lp-final small { margin-top: 4px; font-size: 13px; color: var(--ink-3); }

/* ---------- piede ---------- */
.lp-foot {
  max-width: 1180px; margin: 0 auto;
  padding: 56px 24px calc(32px + var(--sab, 0px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 13.5px; color: var(--ink-3);
}
.lp-foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.lp-foot .lp-mark { width: 26px; height: 26px; }
.lp-foot .lp-mark svg { width: 15px; height: 15px; }
.lp-foot nav { display: flex; flex-wrap: wrap; gap: 4px; }
.lp-foot nav button { height: 34px; padding: 0 12px; font-size: 13.5px; color: var(--ink-3); }

/* ---------- la scheda di accesso sopra la pagina ---------- */
.lp-login {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: calc(20px + var(--sat, 0px)) 16px calc(20px + var(--sab, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
.lp-login[hidden] { display: none; }
.lp-login-veil {
  position: fixed; inset: 0;
  background: var(--veil);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  opacity: 0; transition: opacity 0.4s ease;
}
.lp-login.in .lp-login-veil { opacity: 1; }
.lp-login.out .lp-login-veil { opacity: 0; transition-duration: 0.25s; }
.lp-login-box { position: relative; width: min(420px, 100%); }
.lp-login .auth-card {
  width: 100%; padding: 36px 28px 26px;
  background: linear-gradient(180deg, var(--glass-spec) -40%, transparent 28%), color-mix(in srgb, var(--glass-2) 82%, transparent);
  opacity: 0; transform: translateY(28px) scale(0.92);
  transition: opacity 0.3s ease, transform 0.7s var(--spring-soft);
}
.lp-login.in .auth-card { opacity: 1; transform: none; }
.lp-login.out .auth-card { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 0.2s ease, transform 0.25s ease-in; }

/* testi legali aperti dalla pagina */
.nb-modal.lp-legal { width: min(720px, 100%); }
.lp-legal h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.02em; }
.lp-legal .lg-text { max-height: min(62vh, 640px); overflow-y: auto; padding-right: 6px; font-size: 14.5px; }

/* ---------- larghezze ---------- */
@media (max-width: 1080px) {
  .lp-devs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 40px; padding-top: calc(112px + var(--sat, 0px)); text-align: center; }
  .lp-copy { display: grid; justify-items: center; }
  .lp-actions { justify-content: center; }
  .lp-note { display: block; max-width: 30em; text-align: center; }
  .lp-note svg { display: inline-block; margin-right: 6px; vertical-align: -2px; }
  .lp-stage { width: min(660px, 100%); margin: 0 auto; }
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lp-nav { padding-left: 12px; padding-right: 12px; }
  .lp-nav-in { grid-template-columns: 1fr auto; height: 56px; }
  .lp-links { display: none; }
  .lp-lang { width: 38px; padding: 0; }
  .lp-lang span { display: none; }
  .lp-sec { padding-top: 92px; }
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-tiles { grid-template-columns: minmax(0, 1fr); }
  .lp-devs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-dev:last-child { grid-column: span 2; }
  .lp-final { margin-top: 92px; width: calc(100% - 32px); padding: 56px 20px 48px; border-radius: 32px; }
}
@media (max-width: 640px) {
  .lp-hero, .lp-sec, .lp-foot { padding-left: 16px; padding-right: 16px; }
  .lp-stats { padding: 0 16px; }
  .lp-bento { grid-template-columns: minmax(0, 1fr); }
  .lp-a, .lp-b, .lp-e { grid-column: auto; grid-row: auto; }
  .lp-a { flex-direction: column; }
  .lp-a .lp-card-t { flex: none; }
  .lp-a .lp-vis { flex: 1 0 auto; }
  .lp-recap { grid-template-columns: minmax(0, 1fr); }
  .lp-proj { height: 120px; margin: 6px 34px 26px; }
  .lp-minis { grid-template-columns: minmax(0, 1fr); }
  .lp-card { min-height: 0; padding: 22px; border-radius: 26px; }
  .lp-actions { width: 100%; }
  .lp-actions .btn { flex: 1 1 auto; }
  .lp-chip { padding: 10px 12px; font-size: 12px; gap: 9px; border-radius: 17px; }
  .lp-chip-ask { width: 54%; right: -2%; bottom: 0; }
  .lp-chip-timer b { font-size: 15px; }
  .lp-chip-timer svg { width: 30px; height: 30px; }
  .lp-chip-timer { left: 0; top: 4%; }
  .lp-chip-ink { display: none; }
  .lp-head { margin-bottom: 36px; }
  .lp-foot nav { margin-left: -12px; }
}
@media (max-width: 520px) {
  .lp-win { grid-template-columns: minmax(0, 1fr); inset: 9% 2% 12% 2%; }
  .lp-win-side { display: none; }
  .lp-nav-cta { padding: 0 14px; }
}

/* ---------- meno movimento, meno trasparenza ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-in, .lp .lp-title, .lp-nav-in, .lp-win, .lp-chip, .lp-mq, .lp-bx, .lp-by, .lp-flip-in, .lp-typing i, .lp-eyebrow i,
  .lp-days i, .lp-bar i, :is(.lp-ink, .lp-ink-mini) path, .lp-chip-timer circle.on, .lp-chat *, .lp-sugg b { animation: none !important; }
  :is(.lp-ink, .lp-ink-mini) path { stroke-dashoffset: 0; }
  .lp-bx { transform: translateX(-50%); }
  .lp-bar i { transform: scaleX(0.55); }
  .lp-rv, :is(.lp-card, .lp-mini, .lp-dev, .lp-tile) { transition: none !important; }
  .lp-rv:not(.in) { opacity: 1; translate: none; scale: none; }
  .lp-login .auth-card, .lp-login-veil { transition-duration: 0.01s !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .lp-nav-in, .lp-win, .lp-chip, .lp-final, .lp-login-veil {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .lp-nav-in, .lp-win, .lp-chip, .lp-final { background: var(--raised) !important; }
}