/* ZETA Evolution · pagina di vendita
   Colori e font dal brand Accademia ZETA (accademiazeta.com):
   fondo #131313, accento blu #467FF7, blu profondo #06429E, chiari #F3F5F8 / #C8D5DC.
   Titoli Montserrat, testo Poppins. */

:root {
  --bg: #131313;
  --bg-deep: #0b0b0c;
  --bg-raised: #1b1b1d;
  --text: #f3f5f8;
  --muted: #c8d5dc;
  --dim: #8a949b;
  --line: rgba(200, 213, 220, 0.14);
  --accent: #467ff7;
  --accent-deep: #06429e;
  --accent-glow: rgba(70, 127, 247, 0.35);
  --todo: #ffd166;
  --live: #ff3b3b;        /* revisioni di gruppo live */
  --gold: #e2b13c;        /* casella mentorship nella timeline, uguale in entrambi i temi */
  --tl-start: #f2f4f7;    /* timeline: pallino della week 0 (in Cyber lo ridefinisce temi.css) */
  --mentor: #e2b13c;      /* voci riservate alla mentorship */

  /* Scala dei testi: misurata su ZETA God (desktop 1280 px / mobile 390 px) e resa fluida.
     Regola: ogni testo della pagina usa uno di questi passi, mai un valore a mano. */
  --fs-h2: clamp(1.75rem, 0.74rem + 4.16vw, 4.06rem);    /* titoli di sezione: 65 / 28 px */
  --fs-h3: clamp(1.75rem, 1.2rem + 2.25vw, 3rem);        /* sottotitoli: 48 / 28 px */
  --fs-btn: clamp(1.75rem, 1.53rem + 0.9vw, 2.25rem);    /* pulsanti: 36 / 28 px */
  --fs-lead: clamp(1.125rem, 0.96rem + 0.674vw, 1.5rem); /* frasi in evidenza, avvisi: 24 / 18 px */
  --fs-body: clamp(1.125rem, 1.016rem + 0.449vw, 1.375rem); /* testo corrente: 22 / 18 px */
  --fs-label: clamp(0.875rem, 0.66rem + 0.9vw, 1.375rem); /* etichette dei numeri: 22 / 14 px */
  --fs-small: clamp(0.875rem, 0.78rem + 0.25vw, 1rem);    /* note, didascalie, piè di pagina: 16 / 14 px */

  --display: "Montserrat", system-ui, sans-serif;
  --body: "Poppins", system-ui, sans-serif;

  --gutter: clamp(16px, 5vw, 64px);
  --max: 1240px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, canvas { display: block; max-width: 100%; }

a { color: inherit; }

strong { font-weight: 600; color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Etichetta spaziata: firma tipografica del sito Accademia ZETA (Poppins 300, tracking largo) */
.eyebrow {
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.2rem;
}

.section-title {
  font-size: var(--fs-h2);
  margin-block: clamp(28px, 5vh, 56px) clamp(40px, 7vh, 80px);
}

/* Blocchi nascosti dalla scaletta */
[data-nascosto] { display: none !important; }

/* Testi svuotati dalla scaletta: niente spazi vuoti nella pagina */
[data-copy]:empty { display: none; }

/* Segnaposti da compilare: visibili apposta in fase di revisione */
mark.todo {
  background: rgba(255, 209, 102, 0.12);
  color: var(--todo);
  border: 1px dashed rgba(255, 209, 102, 0.6);
  border-radius: 4px;
  padding: 0.05em 0.4em;
  font-size: 0.85em;
  font-weight: 400;
}

.asset-label {
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  border: 1px dashed var(--line);
  padding: 0.6em 1em;
  border-radius: 4px;
}

/* ---------- Bottoni ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-btn);
  text-decoration: none;
  color: #fff;
  background: var(--accent);
  padding: 0.7em 1.6em;
  line-height: 1.15;
  text-align: center;
  border-radius: 1.6em;
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow), 0 10px 40px -10px var(--accent-glow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgba(70, 127, 247, 0.15), 0 16px 50px -10px var(--accent-glow);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(243, 245, 248, 0.35);
  box-shadow: none;
}

.btn-ghost:hover {
  border-color: var(--text);
  box-shadow: none;
}

.btn:focus-visible, .week:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- 1. Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(6, 66, 158, 0.45), transparent 70%),
    var(--bg-deep);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(19, 19, 19, 0.45) 14%, rgba(19, 19, 19, 0) 38%),
    linear-gradient(to right, rgba(11, 11, 12, 0.7), transparent 60%);
}

.hero-placeholder {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  transform: translateY(-50%);
  max-width: 280px;
}

.brand {
  position: relative;
  z-index: 2;
  padding-top: 28px;
}

.brand img { width: 142px; height: auto; }

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(48px, 10vh, 110px);
}

/* Hero e scene animate sullo stesso bordo: a sinistra dello schermo (--gutter), non nella colonna centrale */
.hero .wrap { max-width: none; margin-inline: 0; }

.hero-kicker {
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.hero-title {
  font-size: clamp(3.4rem, 12vw, 11rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin-bottom: 1.6rem;
}

.hero-title span { display: block; }

/* Pieno e non a contorno: il contorno su Montserrat mostra le sovrapposizioni interne dei glifi */
.hero-title .evo {
  font-style: italic;
  padding-right: 0.08em;
  background: linear-gradient(95deg, var(--accent) 10%, #9dbcff 55%, var(--accent) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tema Classico: sul titolo passa lo stesso bagliore inclinato delle parole in evidenza delle scene */
:root:not([data-tema="cyber"]) .hero-title .evo {
  width: fit-content;
  /* il riquadro sale un po': la sfumatura non si disegna fuori dal riquadro, e il puntino della i sporge sopra la riga */
  padding-top: 0.2em;
  margin-top: -0.2em;
  background:
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%) 100% 0 / 300% 100% repeat-y,
    linear-gradient(95deg, var(--accent) 0%, #9dbcff 100%) 0 0 / 100% 100% repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  animation: em-sheen 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-tema="cyber"]) .hero-title .evo { animation: none; }
}

.hero-sub {
  max-width: 44rem;
  font-size: var(--fs-lead);
  color: var(--muted);
  margin: 0 0 2.2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
}

.hero-facts {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--muted);
}

.hero-facts span { color: var(--accent); margin-inline: 0.4em; }

/* Sequenza di ingresso dell'hero, l'unica animazione al caricamento */
.load {
  opacity: 0;
  transform: translateY(24px);
  animation: rise 1s var(--ease) forwards;
}
.load:nth-child(2) { animation-delay: 0.15s; }
.load:nth-child(3) { animation-delay: 0.35s; }
.load:nth-child(4) { animation-delay: 0.5s; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Comparsa al passaggio ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- 2. Manifesto ---------- */

.manifesto {
  padding-block: clamp(80px, 14vh, 160px);
}

.statement {
  font-size: clamp(2.4rem, 7vw, 6.2rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 14ch;
  margin: 0 0 clamp(40px, 7vh, 80px);
}

.statement em {
  font-style: italic;
  color: var(--accent);
}

.prose {
  max-width: 40rem;
  margin-left: clamp(0px, 18vw, 280px);
}

.manifesto .prose { margin-bottom: clamp(64px, 12vh, 140px); }

.prose p { margin: 0 0 1.4em; }

.pivot {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(4rem, 16vw, 14rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin: 0 0 clamp(48px, 9vh, 110px);
  background: linear-gradient(100deg, var(--text) 30%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Frase a effetto di più righe: più respiro tra le righe e tra le lettere, così si legge */
.pivot.pivot-sm {
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 26em;
  margin: 0.4em 0 0.5em;
}

blockquote {
  margin: 2em 0;
  padding-left: 1.2em;
  border-left: 3px solid var(--accent);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.2;
  color: #fff;
}

/* ---------- 3. Turntable ---------- */

.turntable {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--bg-deep);
}

.tt-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: size;
  background: radial-gradient(circle at 50% 55%, rgba(6, 66, 158, 0.55), transparent 62%);
}

.tt-watermark {
  position: absolute;
  inset: auto 0 6% 0;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: min(19cqw, 30cqh);
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(200, 213, 220, 0.05);
  white-space: nowrap;
  pointer-events: none;
}

.tt-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

.tt-placeholder {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
}

.tt-copy {
  padding-block: 20vh;
}

.tt-step {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 30rem;
}

.tt-step h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1.4rem;
}

.tt-step p { margin: 0 0 1em; color: var(--muted); }

.tt-step .big {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.35;
  color: var(--text);
}

/* ---------- 3b. Calendario ---------- */

.program { padding-block: clamp(80px, 14vh, 160px); }

/* Timeline: una linea con un punto per settimana, la scheda si apre sotto */
.timeline { position: relative; margin-top: 1.6rem; }

.weeks {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.weeks::-webkit-scrollbar { display: none; }

.week {
  --r: 6px;
  position: relative;
  flex: 1 1 0;
  min-width: 3.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.2rem 1rem;
  background: none;
  color: var(--muted);
  border: 0;
  font: inherit;
  cursor: pointer;
}

.week { --c: var(--tl-week, var(--accent)); }
.week[data-week="0"] { --c: var(--tl-start, var(--accent)); }
.week.mentor { --r: 5px; }
.week.live { --c: var(--live); --r: 8px; }

.week .num,
.week .t,
.week .when,
.week .d,
.week .chev { display: none; }

.tl-w {
  order: 1;
  height: 1.5rem;
  line-height: 1.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--dim);
  transition: color 0.25s;
}

.tl-date {
  order: 3;
  font-size: var(--fs-small);
  color: var(--dim);
  white-space: nowrap;
  transition: color 0.25s;
}

/* Il punto sulla linea */
.week::after {
  content: "";
  order: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r));
  transition: border-color 0.25s, box-shadow 0.25s;
}

/* La linea che unisce i punti */
.week::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(0.9rem + 1.5rem + 0.5rem + 11px - 1px);
  height: 2px;
  background: var(--line);
}

.week:first-child::before { left: 50%; }
.week:last-child::before { right: 50%; }

.week:hover .tl-w,
.week:hover .tl-date,
.week[aria-selected="true"] .tl-w { color: var(--text); }

.week[aria-selected="true"] .tl-w { color: var(--c); }

.week:hover::after,
.week[aria-selected="true"]::after {
  border-color: var(--c);
  box-shadow: 0 0 14px var(--c);
}

/* Revisioni di gruppo: il pallino rosso emana un leggero impulso */
.week.live::after { animation: tl-pulse 2.6s ease-out infinite; }
.week.live[data-week="8"]::after { animation-delay: -0.9s; }
.week.live[data-week="12"]::after { animation-delay: -1.8s; }

@keyframes tl-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent), 0 0 10px color-mix(in srgb, var(--live) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 13px transparent, 0 0 10px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .week.live::after { animation: none; }
}

/* Settimane con un bonus: il pallino gira come una medaglia (uno alla volta: prima W1, una pausa, poi W3; ciclo di 8 s), la stella brilla e scintilla */
.week.has-bonus::after,
.week.has-bonus .tl-spark::before,
.week.has-bonus .tl-spark::after { animation-duration: 8s; animation-iteration-count: infinite; }
.week.has-bonus::after { animation-name: tl-medal; animation-timing-function: ease-in-out; }
.week.has-bonus[data-week="3"]::after,
.week.has-bonus[data-week="3"] .tl-spark::before,
.week.has-bonus[data-week="3"] .tl-spark::after { animation-delay: -4s; }

@keyframes tl-medal {
  0% { transform: perspective(90px) rotateY(0deg); background-image: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r)); background-size: 100% 100%; background-position: 0 0; clip-path: none; }
  2.5% { transform: perspective(90px) rotateY(90deg); background-image: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r)); background-size: 100% 100%; background-position: 0 0; clip-path: none; }
  2.51% { transform: perspective(90px) rotateY(-90deg); background-image: linear-gradient(110deg, var(--gold) 38%, #fff6c8 50%, var(--gold) 62%); background-size: 300% 100%; background-position: 0% 0; clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  5%, 8% { transform: perspective(90px) rotateY(0deg); background-image: linear-gradient(110deg, var(--gold) 38%, #fff6c8 50%, var(--gold) 62%); background-size: 300% 100%; background-position: 0% 0; clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  17%, 30% { transform: perspective(90px) rotateY(0deg); background-image: linear-gradient(110deg, var(--gold) 38%, #fff6c8 50%, var(--gold) 62%); background-size: 300% 100%; background-position: 100% 0; clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  32.5% { transform: perspective(90px) rotateY(90deg); background-image: linear-gradient(110deg, var(--gold) 38%, #fff6c8 50%, var(--gold) 62%); background-size: 300% 100%; background-position: 100% 0; clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  32.51% { transform: perspective(90px) rotateY(-90deg); background-image: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r)); background-size: 100% 100%; background-position: 0 0; clip-path: none; }
  35%, 100% { transform: perspective(90px) rotateY(0deg); background-image: radial-gradient(circle, var(--c) calc(var(--r) - 0.5px), transparent var(--r)); background-size: 100% 100%; background-position: 0 0; clip-path: none; }
}

/* Scintille intorno alla stella */
.tl-spark {
  position: absolute;
  top: calc(0.9rem + 1.5rem + 0.5rem);
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  pointer-events: none;
}

.tl-spark::before,
.tl-spark::after {
  content: "";
  position: absolute;
  background: #fff6c8;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--gold));
}

.tl-spark::before { top: -7px; right: -6px; width: 11px; height: 11px; animation-name: tl-twinkle-a; }
.tl-spark::after { bottom: -5px; left: -7px; width: 8px; height: 8px; animation-name: tl-twinkle-b; }

@keyframes tl-twinkle-a {
  0%, 8% { opacity: 0; transform: scale(0) rotate(0deg); }
  11% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  15% { opacity: 0; transform: scale(0.2) rotate(90deg); }
  21% { opacity: 1; transform: scale(0.9) rotate(135deg); }
  26%, 100% { opacity: 0; transform: scale(0) rotate(180deg); }
}

@keyframes tl-twinkle-b {
  0%, 12% { opacity: 0; transform: scale(0) rotate(0deg); }
  15% { opacity: 1; transform: scale(1.2) rotate(-45deg); }
  19% { opacity: 0; transform: scale(0.2) rotate(-90deg); }
  25% { opacity: 1; transform: scale(0.9) rotate(-135deg); }
  30%, 100% { opacity: 0; transform: scale(0) rotate(-180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .week.has-bonus::after { animation: none; background: var(--gold); clip-path: polygon(50.0% 7.0%, 61.2% 37.6%, 93.7% 38.8%, 68.1% 58.9%, 77.0% 90.2%, 50.0% 72.0%, 23.0% 90.2%, 31.9% 58.9%, 6.3% 38.8%, 38.8% 37.6%); }
  .tl-spark { display: none; }
}

.tl-arrow { display: none; }

/* Frecce in fondo alla scheda: settimana precedente e successiva */
.week-detail.no-side { grid-template-columns: auto minmax(0, 1fr); }

.wd-nav {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  display: flex;
  justify-content: space-between;
  margin-top: 1.2rem;
}

.wd-arrow {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.wd-arrow:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow, var(--accent)); }
.wd-arrow:disabled { opacity: 0.3; cursor: default; }

.wd-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}

.wd-prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.wd-next::before { transform: translate(-70%, -50%) rotate(-135deg); }

.week-detail {
  display: grid;
  gap: 0.4rem 2rem;
  align-items: start;
  align-content: start;
  margin-block: 1.6rem clamp(40px, 7vh, 80px);
  padding: 2rem;
  min-height: 13rem;
  grid-template-columns: auto minmax(0, 1fr) minmax(15rem, 22rem);
  grid-template-rows: auto auto auto 1fr;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat calc(var(--ptr, 50%) - 1.75rem) 0 / 3.5rem 3px,
    var(--bg-raised);
}

.wd-num {
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.9;
  color: var(--accent);
}

.wd-when {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.wd-title { grid-column: 2; grid-row: 2; margin-bottom: 0; font-size: var(--fs-h3); }

.wd-desc { grid-column: 2; grid-row: 3; margin: calc(2lh - 0.7em - 0.4rem) 0 0; /* titolo → testo uguale allo stacco tra paragrafi (una riga vuota): 2 righe meno l'altezza delle maiuscole, meno il row-gap della griglia */ color: var(--muted); }

/* Pannello a destra: chi partecipa a cosa (uno o due riquadri) */
.wd-side {
  grid-column: 3;
  grid-row: 2 / span 3; /* arriva alla riga 1fr: se il pannello è più alto del testo, lo spazio in più va in fondo e non tra titolo e testo */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.ws-block {
  --sc: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.3rem 1rem;
  padding: 1.1rem 1.2rem 1.1rem 1.3rem;
  border-left: 3px solid var(--sc);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sc) 38%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--sc) 20%, var(--bg-raised)), var(--bg-raised) 80%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.ws-block[data-kind="mentor"] { --sc: var(--gold); }
.ws-block[data-kind="live"] { --sc: var(--live); }
.ws-block[data-kind="start"] { --sc: var(--tl-start, var(--accent)); }
.ws-block[data-kind="all"] { --sc: var(--tl-week, var(--accent)); }

.ws-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--sc);
  background: color-mix(in srgb, var(--sc) 16%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--sc) 55%, transparent);
}

.ws-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--sc);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ws-block[data-kind="start"] .ws-icon svg,
.ws-block[data-kind="all"] .ws-icon svg,
.ws-block.is-bonus .ws-icon svg { fill: var(--sc); stroke: none; }

.ws-eyebrow {
  align-self: end;
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc);
}

.ws-text { align-self: start; font-size: var(--fs-body); line-height: 1.35; color: var(--text); }

.ws-block[data-kind="live"] .ws-icon { animation: ws-pulse 2.2s ease-in-out infinite; }

@keyframes ws-pulse {
  50% { box-shadow: 0 0 34px color-mix(in srgb, var(--sc) 85%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-block[data-kind="live"] .ws-icon { animation: none; }
}

/* ---------- 4. Chi sono ---------- */

.author {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-block: clamp(80px, 14vh, 160px);
}

.author .prose { margin-left: 0; }

.author-photo {
  position: sticky;
  top: 10vh;
  margin: 0;
}

.author-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border: 1px solid var(--line); }

.photo-placeholder {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(70, 127, 247, 0.25), transparent 60%),
    var(--bg-raised);
  border: 1px solid var(--line);
}

/* ---------- 5. Prezzi ---------- */

.pricing { padding-block: clamp(80px, 14vh, 160px); }

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  background: var(--bg);
}

.plan h3 {
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--muted);
}

.price {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 1rem 0 0.4rem;
}

.price-note { margin: 0 0 1.6rem; font-size: var(--fs-small); }

.plan-includes { margin: 0 0 0.6rem; font-weight: 600; color: #fff; }

.plan ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

.plan li {
  position: relative;
  padding: 0.85em 0 0.85em 1.9em;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.85em + (1lh - 1.15em) / 2);
  width: 1.15em;
  height: 1.15em;
  background: var(--accent);
  /* cerchio pieno con il + ritagliato (trasparente) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zM11 6.5h2V11h4.5v2H13v4.5h-2V13H6.5v-2H11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zM11 6.5h2V11h4.5v2H13v4.5h-2V13H6.5v-2H11z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan .installments { margin-bottom: 1.6rem; }

.price .iva { font-size: var(--fs-small); font-weight: 400; color: var(--muted); letter-spacing: 0; }

.plan-small { font-size: var(--fs-small); color: var(--dim); margin: 0 0 1.6rem; }

.plan .btn { margin-top: auto; }

.plan-featured {
  --oro: #e2b13c;
  --oro-chiaro: #f6dc8e;
  --oro-scuro: #a97b17;
  border-color: var(--oro);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(226, 177, 60, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(226, 177, 60, 0.07), transparent 45%),
    var(--bg-raised);
  box-shadow: 0 30px 80px -40px rgba(226, 177, 60, 0.55), inset 0 1px 0 rgba(246, 220, 142, 0.35);
}

.plan-featured h3 {
  background: linear-gradient(100deg, var(--oro-scuro), var(--oro-chiaro) 45%, var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--oro);
}

.plan-featured li::before { background: var(--oro); }
.plan-featured .btn {
  background: linear-gradient(100deg, var(--oro-scuro), var(--oro) 40%, var(--oro-chiaro) 75%, var(--oro));
  border-color: var(--oro);
  color: #1a1204;
}

/* Bagliore che attraversa il bottone della mentorship */
.plan-featured .btn { position: relative; overflow: hidden; isolation: isolate; }
.plan-featured .btn::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-20deg);
  animation: btn-glint 3.6s ease-in-out infinite;
}
@keyframes btn-glint {
  0%, 35% { transform: translateX(-160%) skewX(-20deg); }
  75%, 100% { transform: translateX(380%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) { .plan-featured .btn::after { animation: none; opacity: 0; } }

.pay-note {
  margin-top: 1.6rem;
  font-size: var(--fs-small);
  color: var(--dim);
  text-align: center;
}

/* Invito a scrivere, sotto la nota dei pagamenti: più in evidenza, l'indirizzo in colore del tema (nel Cyberpunk glitcha) */
.pay-help {
  margin: 1.1rem 0 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.pay-help em { font-style: normal; color: var(--accent); }
.pay-help em a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* ---------- 6. FAQ ---------- */

.faq { padding-block: clamp(60px, 10vh, 120px); max-width: 920px; }

details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }

summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 3rem 1.4rem 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-lead);
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease);
}

details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

details p { margin: 0 0 1.2rem; color: var(--muted); max-width: 46rem; }

/* ---------- 7. Chiusura ---------- */

.closing {
  padding-block: clamp(90px, 16vh, 180px);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(6, 66, 158, 0.5), transparent 70%),
    var(--bg-deep);
}

/* Quattro colonne della stessa larghezza (quella della più larga): numeri equidistanti e centrati sulle etichette */
.countdown {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  gap: clamp(6px, 2.4vw, 30px);
  margin-bottom: 3.5rem;
}

.countdown div { display: flex; flex-direction: column; align-items: center; min-width: 0; }

.countdown span {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.8rem, 10.5vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  padding-right: 0.04em; /* compensa l'interlettera negativa dopo l'ultima cifra */
  font-variant-numeric: tabular-nums;
}

.countdown small {
  margin-top: 0.5rem;
  padding-left: 0.4em; /* compensa l'interlettera dopo l'ultima lettera, così l'etichetta è centrata */
  font-size: var(--fs-small);
  font-size: calc(var(--fs-small) * 1.2); /* elemento grafico: segue la scala dei numeri */
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Mobile: le etichette con tanta interlettera sono più larghe della colonna e si sovrappongono */
@media (max-width: 600px) {
  .countdown small {
    font-size: calc(var(--fs-small) * 0.9);
    letter-spacing: 0.12em;
    padding-left: 0.12em;
  }
}

.cd-closed { font-family: var(--display); font-weight: 800; font-size: 1.6rem; }

.closing-copy { margin: 0 auto 3rem; text-align: center; font-size: var(--fs-lead); }

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ---------- Scene animate allo scroll (render del personaggio tra le sezioni) ---------- */

.scene {
  position: relative;
  /* una fetta di scroll per ogni schermata di testo (--n nell'HTML), più la schermata d'ingresso */
  height: calc(100svh + var(--n, 3) * 55svh);
  background: #000;
}

.scene-short { height: 200svh; }

.scene-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Bordi sfumati: la scena entra ed esce dal nero delle sezioni vicine */
.scene-stage::before,
.scene-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22vh;
  z-index: 2;
  pointer-events: none;
}
.scene-stage::before { top: 0; background: linear-gradient(to bottom, var(--bg), transparent); }
.scene-stage::after { bottom: 0; background: linear-gradient(to top, var(--bg), transparent); }

/* Segnaposto finché non ci sono i frame: una "inquadratura" che simula il movimento di camera */
.scene-ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 55% at 50% 45%, rgba(70, 127, 247, 0.35), transparent 70%),
    radial-gradient(circle at 50% 120%, rgba(6, 66, 158, 0.6), transparent 60%),
    #050608;
  transform-origin: 50% 32%;
  will-change: transform;
}

.scene-ph-figure {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(30vh, 40vw);
  height: 90%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 34% 13% at 50% 12%, rgba(243, 245, 248, 0.75) 60%, transparent 62%),
    radial-gradient(ellipse 50% 45% at 50% 60%, rgba(200, 213, 220, 0.4) 60%, transparent 62%);
  filter: blur(1px);
}

.scene-ph[hidden] { display: none; }

.scene-caption {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: 18vh;
  margin: 0;
  max-width: 28ch;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.8rem, 4.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.scene-caption.scene-title {
  max-width: 22ch;
  font-size: clamp(2.4rem, 7vw, 6rem);
}

/* Tema Classico: testo un po' meno pesante; parole chiave con la sfumatura del titolo della hero (blu, azzurro, blu) e il bagliore inclinato della fascia del video che scorre (il Cyberpunk ridefinisce tutto in temi.css) */
.scene-caption { font-weight: 800; }

.scene-caption em {
  font-style: italic;
  font-weight: 900;
  padding: 0.2em 0.08em 0.1em 0;
  color: transparent;
  text-shadow: none; /* l'ombra della didascalia, con il testo trasparente, si vedrebbe dentro le lettere e le sporcherebbe */
  background:
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%) 100% 0 / 300% 100% repeat-y,
    linear-gradient(95deg, var(--accent) 0%, #9dbcff 100%) 0 0 / 100% 100% repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
}

.scene-caption.is-visible em { animation: em-sheen 3.2s ease-in-out infinite; }

@keyframes em-sheen {
  0%, 30% { background-position: 100% 0, 0 0; }
  70%, 100% { background-position: 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-caption.is-visible em { animation: none; }
}

.scene-label {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  background: rgba(0, 0, 0, 0.6);
}

/* ---------- Fascia countdown (ripetuta nella pagina) ----------
   Blu del brand a tutta larghezza: si distingue dalle scene (nere) e dalle sezioni (grigio scuro). */

.cd-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 8vh, 84px);
  background:
    radial-gradient(ellipse 60% 120% at 85% 50%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(115deg, var(--accent-deep) 0%, var(--accent) 55%, #6f9bff 100%);
  color: #fff;
}

/* Riga di luce che scorre piano, come un riflesso: l'unico movimento della fascia */
.cd-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: cd-sheen 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cd-sheen {
  0%, 30% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}

.cd-band-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
}

.cd-band-title {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-lead);
  color: #fff;
}

.cd-band .countdown {
  justify-content: flex-start;
  gap: clamp(10px, 3vw, 32px);
  margin: 0;
}

.cd-band .countdown span {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  color: #fff;
  text-shadow: 0 6px 30px rgba(6, 30, 80, 0.35);
}

.cd-band .countdown small { color: rgba(255, 255, 255, 0.8); }

.cd-band .cd-closed { margin: 0; font-size: 1.4rem; color: #fff; }

.btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--accent-deep);
  box-shadow: 0 14px 40px -12px rgba(6, 30, 80, 0.6);
}

.btn-light:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25), 0 18px 50px -12px rgba(6, 30, 80, 0.7); }

@media (max-width: 700px) {
  .cd-band-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cd-band .countdown { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-band::after { animation: none; display: none; }
}

/* ---------- Pulsanti d'acquisto ripetuti ---------- */

.cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 7vh, 72px);
}

.cta-row.cta-left { justify-content: flex-start; }

/* Pulsante con una riga sotto che invita a continuare a leggere */
.cta-row.cta-col { flex-direction: column; align-items: center; gap: var(--sp-4); }
.cta-hint { margin: 0; font-size: calc(var(--fs-small) * 1.2); font-style: italic; color: var(--dim); text-align: center; text-decoration: none; transition: color 0.3s ease; }
a.cta-hint:hover, a.cta-hint:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Per chi è ---------- */

.audience { padding-block: clamp(80px, 14vh, 160px); }

.sub-title {
  font-size: var(--fs-h3);
  margin: clamp(56px, 9vh, 96px) 0 1.6rem;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 52rem;
}

.checklist li {
  position: relative;
  padding: 1.1rem 0 1.1rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
}

/* Spunta disegnata in CSS */
.checklist li::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 1.5rem;
  width: 0.45rem;
  height: 0.8rem;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
}

.checklist-no li::before {
  background: transparent;
  border: 2px solid var(--live);
  box-shadow: none;
}

/* X disegnata in CSS: due tratti incrociati, valida anche se la voce non inizia con un grassetto */
.checklist-no li::after {
  left: 0.3rem;
  top: 1.55rem;
  width: 1rem;
  height: 1rem;
  border: 0;
  transform: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--live) calc(50% - 1px), var(--live) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--live) calc(50% - 1px), var(--live) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ---------- Testimonianze ---------- */

.proof { padding-block: clamp(80px, 14vh, 160px); }

.lead {
  max-width: 44rem;
  color: var(--muted);
  margin: -1rem 0 2.5rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.art { margin: 0; }

.art-ph {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(70, 127, 247, 0.18), transparent 65%),
    var(--bg-raised);
  border: 1px solid var(--line);
}

.art figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--dim);
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.quote {
  margin: 0;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
}

.quote p { margin: 0 0 1rem; }

.quote cite {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-small);
}

.quote cite span { font-family: var(--body); font-weight: 300; color: var(--dim); }

/* ---------- Rate ---------- */

.installments { margin: 0 0 0.3rem; color: var(--muted); }

.rate-link {
  align-self: center;
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  color: var(--muted);
  text-underline-offset: 4px;
}

.rate-link:hover { color: var(--text); }

/* Finestra di scelta del pagamento a rate */

.rate-dialog {
  width: min(92vw, 520px);
  padding: var(--sp-2) var(--sp-2) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raised);
  color: var(--text);
  text-align: center;
}

.rate-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }

.rate-dialog h3 { margin: 0 0 var(--sp-1); font-family: var(--display); font-size: var(--fs-lead); }
.rate-sub { margin: 0 0 var(--sp-2); color: var(--muted); font-size: var(--fs-small); }
.rate-actions { display: flex; flex-direction: column; gap: 14px; }
.rate-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  height: 64px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--body);
  font-weight: 500;
  font-size: 1rem;
  transition: transform 0.2s var(--ease), filter 0.2s;
}

.rate-brand:hover { transform: translateY(-2px); filter: brightness(1.05); }
.rate-brand img { height: 30px; width: auto; display: block; }
.rate-paypal { background: #ffc439; }
.rate-paypal img { height: 34px; }
.rate-klarna { background: #ffa8cd; color: #0b051d; }
.rate-klarna img { height: 28px; }
.rate-note { margin: var(--sp-1) 0 0; color: var(--dim); font-size: var(--fs-small); }

.rate-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.rate-close:hover { color: var(--text); }

/* ---------- Garanzia ---------- */

.guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(60px, 10vh, 120px);
}

.seal {
  display: grid;
  place-items: center;
  align-content: center;
  width: clamp(150px, 18vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 10px rgba(70, 127, 247, 0.08), 0 0 60px var(--accent-glow);
  background: radial-gradient(circle, rgba(70, 127, 247, 0.18), transparent 70%);
}

.seal span {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.4rem, 6vw, 5rem);
  line-height: 0.9;
}

.seal small {
  font-size: var(--fs-small);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
}

.guarantee h2 {
  font-size: var(--fs-h3);
  margin-bottom: 1.4rem;
}

.guarantee-copy p { margin: 0 0 1em; color: var(--muted); max-width: 44rem; }

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-block: 40px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--dim);
}

.footer img { width: 120px; height: auto; opacity: 0.8; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .prose { margin-left: 0; }

  /* Turntable: il personaggio resta fisso dietro, il testo scorre sopra */
  .turntable { display: block; }
  .tt-stage { height: 100svh; }
  .tt-copy {
    position: relative;
    z-index: 2;
    margin-top: -100svh;
    padding-block: 60svh 20svh;
  }
  .tt-step {
    min-height: 70svh;
    justify-content: flex-end;
  }
  .tt-step > * {
    background: rgba(11, 11, 12, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 0.6em 0.8em;
    margin-bottom: 0.4em;
  }
  .tt-step .eyebrow { background: none; backdrop-filter: none; padding-left: 0; }

  /* Timeline: si scorre con il dito o con le frecce, la scheda della settimana sta sotto */
  .weeks {
    scroll-snap-type: x proximity;
    padding-inline: calc(50% - 2.75rem);
  }
  .week { flex: none; min-width: 5.5rem; scroll-snap-align: center; }
  .tl-arrow {
    display: block;
    position: absolute;
    z-index: 2;
    top: calc(0.9rem + 1.5rem + 0.5rem + 11px);
    width: 40px;
    height: 40px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg-raised);
    cursor: pointer;
  }
  .tl-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
  }
  .tl-prev { left: 0; }
  .tl-prev::before { transform: translate(-30%, -50%) rotate(45deg); }
  .tl-next { right: 0; }
  .tl-next::before { transform: translate(-70%, -50%) rotate(-135deg); }
  .tl-arrow:disabled { opacity: 0.3; cursor: default; }
  .week-detail { grid-template-columns: 1fr; grid-template-rows: none; padding: 1.4rem 1.2rem; min-height: 0; }
  .wd-nav { grid-row: auto; }
  .wd-side { grid-column: 1; grid-row: auto; margin-top: 1rem; }
  .wd-num, .wd-when, .wd-title, .wd-desc { grid-column: 1; grid-row: auto; }
  .wd-num { font-size: 2.4rem; }

  .author { grid-template-columns: 1fr; }
  .author-photo { position: static; max-width: 420px; }

  .plans { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }

  .guarantee { grid-template-columns: 1fr; justify-items: start; }

  .scene { height: calc(100svh + var(--n, 3) * 50svh); }
  .scene-caption { bottom: 14vh; }

  .hero-placeholder { top: 96px; transform: none; right: 16px; max-width: 200px; }
}

@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }
  .closing-actions .btn { width: 100%; }
  .eyebrow, .hero-kicker, .plan h3 { letter-spacing: 0.35em; }
}

/* ---------- Movimento ridotto ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .load, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .btn { transition: none; }
}

/* ---------- Video di presentazione (dentro la prima fascia countdown) ---------- */

.cd-band-video > .wrap { position: relative; z-index: 1; }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 30px 80px -30px rgba(6, 30, 80, 0.85);
}

.video-frame .video-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cd-band-video .video-note { margin: 1.2rem 0 clamp(32px, 6vh, 56px); text-align: center; }

/* Prima fascia: tutto in colonna e centrato, come nella pagina di ZETA God */
.cd-band-video { text-align: center; }
.cd-band-video .eyebrow { color: rgba(255, 255, 255, 0.85); }
.cd-band-video .section-title { margin-bottom: 1.2rem; }

.cd-band-warn { max-width: 72rem; margin: 0 auto 1.8rem; color: #fff; font-size: var(--fs-lead); line-height: 1.5; }

.cd-band-video .video-frame { margin-bottom: clamp(32px, 6vh, 56px); }

.cd-band-video .cd-band-inner { flex-direction: column; justify-content: center; align-items: center; gap: 2rem; }
.cd-band-video .cd-band-time { display: grid; justify-items: center; }
.cd-band-video .countdown { justify-content: center; }

.cd-band-cta { display: grid; justify-items: center; gap: 0.9rem; max-width: 64rem; }
.cd-band-cta p { margin: 0; color: #fff; line-height: 1.5; }
.cd-band-alert { font-size: var(--fs-lead); }
.cd-band-more { font-size: var(--fs-lead); font-weight: 600; }
.cd-band-cta .btn { margin-top: 0.8rem; }

@media (max-width: 700px) {
  .cd-band-cta { justify-items: stretch; max-width: none; }
}


/* ---------- Sezioni di testo sotto le scene animate ---------- */

.copy { padding-block: clamp(64px, 11vh, 130px); }
.prose.prose-flat { margin-left: 0; max-width: 46rem; }

/* Fascia segnaposto delle revisioni mentorship, sotto il calendario */
.mentor-strip {
  margin: 1.6rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--mentor);
  border-radius: 0.6rem;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* Countdown dentro la sezione prezzi */
.cd-inline {
  margin: clamp(32px, 5vh, 56px) 0;
  padding: clamp(28px, 5vh, 48px) clamp(20px, 4vw, 48px);
  border-radius: 1rem;
}

.cd-inline .cd-band-time { position: relative; z-index: 1; text-align: center; }
.cd-inline .cd-band-title { margin-bottom: clamp(18px, 3vh, 30px); }
.cd-inline .countdown { justify-content: center; margin-inline: auto; }

/* ---------- Elenco dei bonus ---------- */

.bonus-list {
  list-style: none;
  margin: 0 0 clamp(24px, 4vh, 48px);
  padding: 0;
  max-width: 52rem;
}

.bonus-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}

.bonus-list li:last-child { border-bottom: 1px solid var(--line); }

.bonus-name { font-weight: 600; color: var(--text); }

.bonus-tag {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.bonus-mentor .bonus-tag { color: var(--mentor); }

/* Hero: le tre frasi si danno il cambio nello stesso spazio (la più lunga fissa l'altezza) */
.hero-rotator { display: grid; }
.hero-line { grid-area: 1 / 1; opacity: 0; }
.hero-line.is-on { opacity: 1; }

/* Cursore che scrive: barra che lampeggia in fondo al testo */
.tp-ch { position: relative; opacity: 0; }
.tp-ch.on { opacity: 1; }

/* Cursore: barra in assoluto accanto a ogni lettera, accesa solo sull'ultima visibile.
   Il pseudo-elemento esiste sempre e cambia solo l'opacità: nessun ricalcolo del layout */
.tp-ch::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0.1em;
  width: 0.09em;
  height: 1em;
  margin-left: 0.06em;
  background: var(--accent);
  opacity: 0;
}
.tp-cur::after { opacity: 1; animation: cursor-blink 0.64s steps(1) infinite; }
.tp-cur-pre::after { left: 0; margin-left: 0; }
.tp-ch.tp-cur-pre { opacity: 1; color: transparent; }

@keyframes cursor-blink { 50% { opacity: 0; } }

/* Elenchi nella fascia centrale, come i paragrafi */
/* Colonna di testo larga come quella di ZETA God (1140 px a 1280 px di schermo, 350 px su mobile) */
.copy .prose,
.prose.prose-flat {
  max-width: none;
  margin-left: 0;
}

.copy .checklist,
.copy .bonus-list {
  max-width: none;
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotator { display: block; }
  .hero-line { opacity: 1; transform: none; margin-bottom: 0.6em; }
}


/* =====================================================================
   Pagine delle lezioni gratuite (PLC) — unito qui da plc.css il 2026-10-10
   Stessa grafica della pagina di vendita. Selettori tutti con prefisso .plc- o body.plc.
   Resta prima di temi.css, come quando erano due file.
   ===================================================================== */

/* Pagine delle lezioni gratuite (PLC). Stessa grafica della pagina di vendita: usa style.css
   (colori, font, scala dei testi --fs-*, pulsanti, riquadro del video, fascia colorata) e i temi. */

body.plc {
  background:
    radial-gradient(ellipse 70% 50% at 85% 0%, var(--accent-glow), transparent 70%),
    var(--bg);
}

/* Video di sfondo (prova): fisso dietro i contenuti, con velo scuro per la leggibilità. */
.plc-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.plc-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }
.plc-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 60%, color-mix(in srgb, var(--bg) 78%, transparent) 100%);
}
@media (prefers-reduced-motion: reduce) { .plc-bg video { display: none; } }

/* Glitch alla fine del video (come nella hero): keyframes e strisce sono quelli della hero, la classe la mette plc.js. */
.plc-bg { --g: 0.5; }
[data-tema="cyber"] .plc-bg { --g: 1; }
.plc-bg.is-glitch video { animation: hero-glitch 0.4s steps(1, end) both; }
.plc-bg.is-glitch .hero-glitch-bande { animation: hero-glitch-bande 0.4s steps(1, end) both; }
@media (prefers-reduced-motion: reduce) { .plc-bg.is-glitch .hero-glitch-bande { animation: none; } }

.plc-top { padding-top: 28px; }
.plc-top .brand { display: inline-block; padding-top: 0; }

/* ---------- Apertura ---------- */

.plc-hero { padding-block: clamp(40px, 8vh, 96px) clamp(24px, 5vh, 56px); }

.plc-title {
  font-size: clamp(3rem, 10vw, 7rem);
  margin-bottom: 1.4rem;
}

.plc-badge {
  display: inline-block;
  text-decoration: none;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
  margin: 0 0 clamp(2rem, 4vh, 3rem);
  padding: 0.45em 1.1em;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(70, 127, 247, 0.12);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}

/* All'hover diventa rosso (--live), come i pulsanti rossi */
/* Link "Guarda il video" in fondo al testo: scritta nel colore del tema, con il play in un cerchio; riporta al video */
.plc-watch-wrap { margin: clamp(2.4rem, 5vh, 3.6rem) 0; }
.plc-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  color: var(--accent);
  transition: color 0.3s var(--ease);
}
.plc-watch-icon { flex: none; width: 1.7em; height: 1.7em; }
body.plc a.plc-watch:hover { color: var(--live); }
a.plc-watch:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Il badge sta sempre su una riga: sul telefono si stringono interlettera, margini e (sotto i 360 px) la scritta */
.plc-badge { white-space: nowrap; }
@media (max-width: 480px) {
  .plc-badge { padding-inline: 0.8em; letter-spacing: 0.06em; }
}
@media (max-width: 360px) {
  .plc-badge { font-size: calc(var(--fs-small) * 0.88); letter-spacing: 0.04em; }
}

body.plc a.plc-badge:hover { background: var(--live); border-color: var(--live); color: #fff; }
a.plc-badge:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.plc-lead {
  margin: 0 0 1rem;
  font-size: var(--fs-lead);
  color: var(--muted);
}

.plc-lead strong { color: var(--text); }

/* ---------- Barra delle lezioni ---------- */

.plc-steps ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.plc-step {
  display: grid;
  gap: 0.2rem;
  height: 100%;
  padding: 1rem 1.2rem;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  align-content: start;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

/* Lezioni già uscite (non la corrente): sfumatura leggera, per far capire che sono attive */
.plc-step:is(a):not(.is-current) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--bg)), color-mix(in srgb, var(--accent) 8%, var(--bg)) 65%, var(--bg));
}

/* Hover: la stessa sfumatura, più intensa (colore del tema) */
body.plc a.plc-step:hover {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 64%, var(--bg)), color-mix(in srgb, var(--accent) 28%, var(--bg)) 65%, var(--bg));
}

.plc-step.is-current {
  background: linear-gradient(160deg, rgba(70, 127, 247, 0.44), rgba(6, 66, 158, 0.22) 60%, var(--bg));
}

.plc-step-n {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.plc-step-t { font-weight: 600; }
.plc-step.is-locked { opacity: 0.5; cursor: default; }

/* Non ancora uscite: all'hover una sfumatura leggera e spenta, senza link */
body.plc .plc-step.is-locked:hover {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--bg)), color-mix(in srgb, var(--accent) 4%, var(--bg)) 65%, var(--bg));
}

/* Webinar: parte già rosso, è una cosa a parte */
body.plc .plc-step.is-webinar {
  background: linear-gradient(160deg, color-mix(in srgb, var(--live) 36%, var(--bg)), color-mix(in srgb, var(--live) 12%, var(--bg)) 70%, var(--bg));
  box-shadow: inset 3px 0 0 var(--live);
  color: #fff;
}
body.plc .plc-step.is-webinar .plc-step-n,
body.plc .plc-step.is-webinar .plc-step-go { color: #fff; }
body.plc .plc-step.is-webinar:hover {
  background: linear-gradient(160deg, color-mix(in srgb, var(--live) 58%, var(--bg)), color-mix(in srgb, var(--live) 22%, var(--bg)) 70%, var(--bg));
}

.plc-step-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
  transition: color 0.3s var(--ease);
}

.plc-arrow { flex: none; transition: transform 0.3s var(--ease); }
a.plc-step:hover .plc-arrow,
.plc-step.is-webinar:hover .plc-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  a.plc-step:hover .plc-arrow,
  .plc-step.is-webinar:hover .plc-arrow { transform: none; }
}

.plc-step-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-small);
}

.plc-lock { flex: none; }

/* ---------- Lezione ---------- */

.plc-lesson { padding-block: clamp(56px, 10vh, 110px) clamp(40px, 7vh, 80px); }

.plc-anchor { scroll-margin-top: 1.5rem; }

/* Aria sopra e sotto il video della lezione */
.plc-lesson .video-frame { margin-block: clamp(32px, 5vh, 56px) clamp(48px, 8vh, 80px); scroll-margin-top: 1.5rem; }

.plc-sub {
  margin: 0 0 1.6rem;
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--text);
}

.plc-text {
  margin: 0 0 1rem;
  font-size: var(--fs-body);
  color: var(--muted);
}

.plc-text.is-strong {
  margin: 2rem 0 2.4rem;
  padding: 1.4rem 1.6rem;
  border-left: 4px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-glow), transparent 85%);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.plc-list {
  counter-reset: voce;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body);
  color: var(--text);
}

.plc-list li {
  counter-increment: voce;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.2rem 1.4rem 1.4rem;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(70, 127, 247, 0.2), rgba(6, 66, 158, 0.08) 60%, var(--bg));
}

.plc-list li::before {
  content: counter(voce, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--accent);
}

.plc-bridge {
  margin: 2rem 0 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--accent);
  font-size: var(--fs-lead);
  color: var(--muted);
}

.plc-bridge p { margin: 0 0 1rem; }
.plc-bridge p:last-child { margin-bottom: 0; }

/* ---------- Passaggio al corso (PLC#3) ---------- */

.plc-next { padding-block: 0 clamp(40px, 7vh, 80px); }

.plc-next-title {
  margin: 0 0 1.2rem;
  font-size: var(--fs-h3);
  line-height: 1.1;
}

.plc-next-text {
  margin: 0 0 1rem;
  font-size: var(--fs-body);
  color: var(--muted);
}

.plc-next .btn { margin-top: 1rem; }


/* ---------- Iscrizione (fascia colorata) ---------- */

.plc-form { text-align: center; }
.plc-form .wrap { position: relative; z-index: 1; }

.plc-form-title {
  max-width: 40rem;
  margin: 0 auto 1rem;
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: #fff;
}

.plc-form-text {
  max-width: 40rem;
  margin: 0 auto 2rem;
  font-size: var(--fs-lead);
  color: #fff;
}

.plc-form-text p { margin: 0 0 1rem; }
.plc-form-text p:last-child { margin-bottom: 0; }

.plc-signup {
  display: grid;
  gap: 1rem;
  max-width: 34rem;
  margin-inline: auto;
  text-align: left;
}

.plc-field { display: grid; gap: 0.35rem; }

.plc-field label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.plc-field input {
  width: 100%;
  padding: 0.8em 1em;
  border: 2px solid transparent;
  border-radius: 0.6rem;
  background: #fff;
  color: #131313;
  font: inherit;
  font-size: 1.125rem;
}

.plc-field input:focus-visible { outline: 3px solid var(--bg); outline-offset: 2px; }

.plc-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--fs-small);
  color: #fff;
  line-height: 1.45;
}

.plc-consent input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: var(--accent-deep); }
.plc-consent a { color: inherit; text-decoration: underline; }

.plc-signup .btn { justify-self: center; margin-top: 0.4rem; }

.plc-note, .plc-msg { margin: 0; text-align: center; font-size: var(--fs-small); color: #fff; }
.plc-msg { padding: 0.8em 1em; border-radius: 0.6rem; background: rgba(0, 0, 0, 0.35); }
.plc-msg.is-error { background: rgba(255, 59, 59, 0.35); }
/* Countdown delle iscrizioni (solo a carrelli aperti): card sotto la barra delle lezioni, con i colori di .cd-band della pagina di vendita */
.plc-open { margin-top: clamp(32px, 6vh, 64px); }
.plc-open-card { border-radius: 20px; padding: clamp(24px, 4vh, 40px) clamp(20px, 4vw, 48px); }
.plc-open .cd-band-inner { flex-direction: column; justify-content: center; gap: 1.6rem; text-align: center; }
.plc-open .cd-band-title { margin-bottom: 1.6rem; }
.plc-open .countdown { justify-content: center; margin-inline: auto; gap: clamp(8px, 2.5vw, 22px); }
.plc-open .countdown small { letter-spacing: 0.16em; padding-left: 0.16em; }
.plc-open .countdown span { font-size: clamp(2rem, 5.5vw, 3.6rem); }
.plc-open .cd-band-cta { justify-items: center; }
.plc-open + .plc-lesson { padding-top: clamp(32px, 5vh, 56px); }
.plc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.plc-form.is-iscritto .plc-form-text { display: none; }
.plc-success { max-width: 36rem; margin: 1.5rem auto 0; text-align: center; font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; color: #fff; }

/* ---------- Temi ---------- */

[data-tema] .plc-title.hero-title { font-size: clamp(3rem, 10vw, 7rem); }


[data-tema="cyber"] .plc-badge { border-radius: 0; background: var(--accent); color: #000; border-color: var(--accent); }
[data-tema="cyber"] .plc-list li {
  border: 0;
  background: linear-gradient(160deg, rgba(252, 238, 10, 0.14), rgba(252, 238, 10, 0.03) 60%, var(--bg));
  box-shadow: inset 3px 0 0 var(--accent);
  clip-path: var(--taglio);
}
[data-tema="cyber"] .plc-text.is-strong { background: linear-gradient(90deg, rgba(252, 238, 10, 0.18), transparent 85%); }
[data-tema="cyber"] .plc-step.is-current { background: linear-gradient(160deg, rgba(252, 238, 10, 0.38), rgba(252, 238, 10, 0.09) 60%, var(--bg)); }
[data-tema="cyber"] .plc-form-title,
[data-tema="cyber"] .plc-form-text,
[data-tema="cyber"] .plc-field label,
[data-tema="cyber"] .plc-consent,
[data-tema="cyber"] .plc-note,
[data-tema="cyber"] .plc-success { color: #000; }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .plc-list { grid-template-columns: minmax(0, 1fr); }
  .plc-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .plc-signup .btn { justify-self: stretch; }
}


/* =====================================================================
   Menu con le sezioni (costruito da main.js): trasparente, sempre sopra la pagina.
   Il logo sta dove sta quello della hero; le voci compaiono dopo la sezione video e countdown.
   ===================================================================== */

.sitenav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  pointer-events: none;
}

.sitenav > * { pointer-events: auto; }

.sitenav-in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px var(--gutter) 0;
}

.sitenav-logo { flex: none; display: block; line-height: 0; pointer-events: auto; }
.sitenav-logo img { width: 142px; height: auto; transition: filter 0.3s; }

/* Il logo della hero resta nel suo posto ma non si vede: c'è già quello del menu */
body.has-sitenav .hero > .brand { visibility: hidden; }

.sitenav-right {
  display: flex;
  align-items: center;
  height: 30px; /* come il logo: le voci stanno sulla sua stessa riga */
  justify-content: flex-end;
  gap: clamp(14px, 2vw, 32px);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.sitenav.is-links .sitenav-right { opacity: 1; transform: none; pointer-events: auto; }

.sitenav-list {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.8vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitenav-list a,
.sitenav-cta {
  display: block;
  padding: 0.3em 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--body);
  font-size: var(--fs-small);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(243, 245, 248, 0.8);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.sitenav-list a:hover,
.sitenav-cta:hover { color: #fff; }
.sitenav-list a[aria-current],
.sitenav-cta[aria-current] { color: #fff; border-bottom-color: var(--accent); }

/* "Acquista": stessa riga sottile, solo nel colore del tema */
.sitenav-cta { color: var(--accent); font-weight: 500; }
.sitenav-cta:hover { color: var(--accent); border-bottom-color: var(--accent); }

.sitenav-burger {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  margin-block: -5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.sitenav-burger span {
  display: block;
  width: 22px;
  height: 1px;
  margin: 6px auto;
  background: #fff;
  transition: transform 0.25s var(--ease), opacity 0.25s;
}

.sitenav.is-open .sitenav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sitenav.is-open .sitenav-burger span:nth-child(2) { opacity: 0; }
.sitenav.is-open .sitenav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Le sezioni di testo non finiscono sotto il menu quando ci si arriva da un link */
.copy[id], .program[id], .proof[id], .pricing[id], .faq[id] { scroll-margin-top: 64px; }

@media (max-width: 1240px) {
  .sitenav-burger { display: block; }
  .sitenav-right { gap: 8px; }
  .sitenav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding: 10px var(--gutter) 18px;
    background: rgba(11, 11, 12, 0.94);
  }
  .sitenav.is-open .sitenav-list { display: flex; }
  .sitenav-list a { padding: 0.7em 0; font-size: var(--fs-body); }
}

@media (prefers-reduced-motion: reduce) {
  .sitenav-right { transition: none; }
}

/* Freccia a V in basso al centro delle scene animate: porta alla sezione dopo */
.scene-skip {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(14px, 3.5vh, 36px);
  display: grid;
  place-items: center;
  width: 56px;
  height: 44px;
  margin-left: -28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
  animation: skip-bounce 2.2s ease-in-out infinite;
}

.scene-skip:hover { color: #fff; animation-play-state: paused; transform: translateY(4px); }
.scene-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes skip-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-skip { animation: none; }
}

/* Gradiente scuro sotto il menu: tiene leggibili logo e voci quando passano sopra il testo.
   Si vede solo dopo la fascia video e countdown (là il logo sta su colori propri). */
.sitenav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 11, 12, 0.97), rgba(11, 11, 12, 0.85) 45%, rgba(11, 11, 12, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.sitenav.is-links:not(.is-over-band)::before { opacity: 1; }

/* =====================================================================
   Stile "titolo glitch" (riusabile): classe .titolo-glitch su un titolo qualsiasi (h2, h3, p…).
   Cyberpunk: giallo, corsivo, maiuscolo, sdoppiamento rosso/ciano di 3 px. Classico: corsivo con sfumatura del tema.
   Opzionale: .titolo-glitch.glitch-anim aggiunge lo scatto periodico del titolo della hero (solo Cyberpunk).
   La dimensione la dà il titolo stesso (h2 = --fs-h2): lo stile non la cambia.
   ===================================================================== */

.titolo-glitch {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--text) 30%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =====================================================================
   PROVA: sezione "Argomenti" in due versioni (solo in prova-argomenti.html).
   A = pipeline a stazioni (linea che si accende). B = pila di card con il personaggio.
   ===================================================================== */

.arg-prova { padding-block: 40px 0; }

.arg-title { margin: 0 0 var(--gap-titolo); font-size: var(--fs-h3); line-height: 1.05; }
.arg-strong { margin: 0 0 1rem; font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; color: var(--text); }
.arg-text p { margin: 0 0 0.8rem; font-size: var(--fs-body); color: var(--muted); }
.arg-text strong { color: var(--text); }
.arg-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.arg-chips li {
  padding: 0.25em 0.9em;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: calc(var(--fs-small) * 0.8);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

/* --- A: pipeline a stazioni --- */

.arg-line {
  --lato: clamp(56px, 8vw, 110px);
  --p: 0;
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--lato);
  list-style: none;
}

.arg-line::before,
.arg-line::after {
  content: "";
  position: absolute;
  left: calc(var(--lato) / 2 - 1px);
  top: 0;
  width: 2px;
}
.arg-line::before { bottom: 0; background: var(--line); }
.arg-line::after { height: calc(var(--p) * 100%); background: var(--accent); box-shadow: 0 0 16px var(--accent-glow); }

.arg-card {
  position: relative;
  margin: 0 0 clamp(28px, 5vh, 56px);
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--bg-raised);
}

.arg-card .arg-n {
  position: absolute;
  left: calc(var(--lato) / -2);
  top: clamp(20px, 3vw, 36px);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  transform: translateX(-50%);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--text);
}

/* --- B: pila di card --- */

.arg-stack { padding-bottom: 6vh; }

.arg-sticky {
  position: sticky;
  top: calc(84px + var(--i) * 16px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  min-height: min(68vh, 560px);
  margin-bottom: 12vh;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: var(--bg-raised);
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 0.9);
}

.arg-sticky-text { padding: clamp(22px, 3.4vw, 48px); align-self: center; }

.arg-sticky .arg-n {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--accent);
}
.arg-sticky .arg-n small { font-size: 0.4em; font-weight: 600; letter-spacing: 0.08em; color: var(--dim); }

.arg-sticky-vis {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(70, 127, 247, 0.35), transparent 70%),
    radial-gradient(circle at 50% 120%, rgba(6, 66, 158, 0.6), transparent 60%),
    #050608;
}

/* Segnaposto: la sagoma del personaggio, con un trattamento diverso per ogni stadio */
.arg-fig { position: absolute; inset: 0; display: grid; place-items: end center; }
.arg-fig-body {
  width: min(52%, 30vh);
  height: 88%;
  background:
    radial-gradient(ellipse 34% 13% at 50% 12%, rgba(243, 245, 248, 0.85) 60%, transparent 62%),
    radial-gradient(ellipse 50% 45% at 50% 60%, rgba(200, 213, 220, 0.5) 60%, transparent 62%);
}
[data-stadio="1"] .arg-fig-body { filter: blur(5px) brightness(0.6); }
[data-stadio="2"] .arg-fig-body { filter: grayscale(1) contrast(1.2); }
[data-stadio="3"] .arg-fig-body { filter: grayscale(1) brightness(1.3); outline: 1px dashed rgba(255, 255, 255, 0.35); }
[data-stadio="4"] .arg-fig-body { filter: sepia(1) hue-rotate(-20deg) saturate(2); }
[data-stadio="5"] .arg-fig-body { filter: sepia(1) hue-rotate(10deg) saturate(3); }
[data-stadio="6"] .arg-fig-body { filter: saturate(1.4) drop-shadow(0 0 14px var(--accent)); }
[data-stadio="7"] .arg-fig-body { filter: brightness(1.25) drop-shadow(0 0 28px var(--accent)); }

.arg-stadio {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.3em 0.9em;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.5);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) {
  .arg-sticky { position: static; grid-template-columns: minmax(0, 1fr); min-height: 0; margin-bottom: 24px; }
  .arg-sticky-vis { order: -1; aspect-ratio: 16 / 10; }
}

/* PROVA B: card più compatte, così stanno nell'altezza dello schermo */
.arg-sticky { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); top: calc(84px + var(--i) * 12px); }
.arg-sticky-text { padding: clamp(20px, 2.6vw, 34px) clamp(22px, 3.2vw, 44px); }
.arg-sticky .arg-title { font-size: calc(var(--fs-h3) * 0.72); }
.arg-sticky .arg-n { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 0.3rem; }
.arg-sticky .arg-strong { margin-bottom: 0.7rem; }
.arg-sticky .arg-text p { margin-bottom: 0.55rem; }
.arg-sticky .arg-chips { margin-top: 0.8rem; }

/* PROVA B: tutte le card della pila hanno la stessa altezza (la imposta main.js sulla più alta), senza etichetta sull'immagine */
@media (min-width: 901px) {
  .arg-sticky { height: var(--h, auto); }
}
.arg-stadio { display: none; }

/* PROVA B: numero e titolo sempre in alto, etichette sempre in basso (le card hanno tutte la stessa altezza) */
.arg-sticky-text { align-self: stretch; display: flex; flex-direction: column; }
.arg-sticky .arg-chips { margin-top: auto; padding-top: 1rem; }
.arg-sticky .arg-sticky-text .arg-chips { margin-top: auto; }
.arg-sticky { top: calc(84px + var(--i) * 8px); }


/* PROVA B su mobile: una colonna, immagine sopra il testo (va dopo le regole compatte di sopra, che altrimenti la annullano) */
@media (max-width: 900px) {
  .arg-sticky { position: static; height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); margin-bottom: 24px; }
  .arg-sticky-vis { order: -1; aspect-ratio: 16 / 10; }
  .arg-sticky .arg-sticky-text .arg-chips { margin-top: 1rem; }
}

/* PROVA Argomenti con i testi compatti: un solo paragrafo per argomento, a corpo "frase in evidenza" */
.arg-lead { margin: 0 0 0.4rem; font-size: var(--fs-lead); line-height: 1.45; color: var(--text); }
.arg-sticky { min-height: min(62vh, 520px); }
@media (max-height: 700px) {
  .arg-sticky { position: static; height: auto; min-height: 0; margin-bottom: 24px; }
}

/* Immagini delle card: mai deformate. La sagoma segnaposto tiene le sue proporzioni e, se il riquadro è basso (mobile),
   viene tagliata in basso; le immagini vere riempiono il riquadro con object-fit: cover, tagliando i bordi. */
.arg-fig { place-items: start center; padding-top: 6%; }
.arg-fig-body { width: min(52%, 30vh); height: auto; aspect-ratio: 1 / 1.9; }
@media (max-width: 900px) {
  .arg-fig-body { width: 34%; }
}
.arg-sticky-vis > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* Etichette degli strumenti AI: in rosso */
.arg-chips li.is-ai { border-color: #ff3b3b; color: #ff8a8a; }

/* Etichette: testo centrato in verticale a prescindere dal font. text-box taglia lo spazio sopra le maiuscole e sotto la linea di base,
   così il padding sopra e sotto è davvero uguale (con il solo line-height le maiuscole risultano più alte o più basse di pochi pixel). */
@supports (text-box: trim-both cap alphabetic) {
  .arg-chips li { text-box: trim-both cap alphabetic; padding-block: 0.75em; line-height: 1.2; }
}

/* Numero della card: lo scrive il CSS (contatore), così non è un testo da modificare nella Scaletta */
.arg-stack { counter-reset: arg; }
.arg-stack .arg-sticky { counter-increment: arg; }
.arg-stack .arg-n:empty::before { content: counter(arg, decimal-leading-zero); }

/* Hero in verticale (telefoni, tablet in piedi): nel video il personaggio sta a circa 2/3 della larghezza,
   quindi si sposta il ritaglio per tenerlo al centro della schermata. */
@media (max-aspect-ratio: 1/1) {
  .hero-video { object-position: 72% 50%; }
}

/* Hero in orizzontale: zoom leggero sul video, con il punto fisso in alto, a due terzi della larghezza
   (dove sta il personaggio, che così resta sui 2/3 della composizione; all'inizio è piccolo). Si regola solo --hero-zoom. */
@media (min-aspect-ratio: 1/1) and (min-width: 701px) {
  .hero-video { --hero-zoom: 1; transform: scale(var(--hero-zoom)); transform-origin: 66.7% 0; }
}

/* Glitch alla fine del video della hero, prima che riparta (la classe la mette main.js).
   --g regola l'intensità: nel tema Cyberpunk è piena, nel Classico dimezzata. */
.hero { --g: 0.5; }
[data-tema="cyber"] .hero { --g: 1; }

.hero.is-glitch .hero-video { animation: hero-glitch 0.4s steps(1, end) both; }

.hero-glitch-bande {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    linear-gradient(to bottom, transparent 8%, rgba(255, 0, 60, 0.55) 8% 11%, transparent 11% 38%, rgba(0, 240, 255, 0.5) 38% 40%, transparent 40% 63%, rgba(255, 0, 60, 0.45) 63% 67%, transparent 67% 86%, rgba(0, 240, 255, 0.5) 86% 88%, transparent 88%);
}
.hero.is-glitch .hero-glitch-bande { animation: hero-glitch-bande 0.4s steps(1, end) both; }

@keyframes hero-glitch {
  0%   { transform: translate(0) scale(var(--hero-zoom, 1)); filter: none; }
  10%  { transform: translate(calc(-16px * var(--g)), 0) scale(var(--hero-zoom, 1)) skewX(calc(-2deg * var(--g))); filter: hue-rotate(40deg) saturate(1.7) brightness(1.3); }
  22%  { transform: translate(calc(14px * var(--g)), calc(-3px * var(--g))) scale(var(--hero-zoom, 1)); filter: contrast(1.5) brightness(0.8); }
  34%  { transform: translate(0) scale(var(--hero-zoom, 1)); filter: none; }
  46%  { transform: translate(calc(-8px * var(--g)), calc(2px * var(--g))) scale(var(--hero-zoom, 1)); filter: hue-rotate(-60deg) saturate(2.2); }
  58%  { transform: translate(calc(20px * var(--g)), 0) scale(var(--hero-zoom, 1)) skewX(calc(2deg * var(--g))); filter: brightness(1.7) contrast(1.3); }
  72%  { transform: translate(calc(-10px * var(--g)), calc(-2px * var(--g))) scale(var(--hero-zoom, 1)); filter: hue-rotate(90deg) contrast(1.4); }
  86%  { transform: translate(calc(6px * var(--g)), 0) scale(var(--hero-zoom, 1)); filter: saturate(0.4) brightness(1.2); }
  100% { transform: translate(0) scale(var(--hero-zoom, 1)); filter: none; }
}

@keyframes hero-glitch-bande {
  0%, 34%, 100% { opacity: 0; transform: translateX(0); }
  10% { opacity: calc(0.9 * var(--g)); transform: translateX(-24px); }
  22% { opacity: calc(0.7 * var(--g)); transform: translateX(30px); }
  46% { opacity: calc(0.9 * var(--g)); transform: translateY(40px); }
  58% { opacity: calc(0.8 * var(--g)); transform: translateX(-18px); }
  72% { opacity: calc(0.6 * var(--g)); transform: translateY(-30px); }
  86% { opacity: calc(0.4 * var(--g)); transform: translateX(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-glitch .hero-video, .hero.is-glitch .hero-glitch-bande { animation: none; }
}

/* Didascalie delle scene su telefono: più grandi e più in alto, per non finire sul fondo dello schermo */
@media (max-width: 700px) {
  .scene-caption { bottom: 26vh; font-size: clamp(2.1rem, 9vw, 2.6rem); max-width: 100%; right: var(--gutter); }
  .scene-caption.scene-title { font-size: clamp(2.8rem, 12vw, 3.6rem); }
}

/* ---------- Bonus a carosello (dal 2026-10-11) ----------
   Le card scorrono in orizzontale mentre si scrolla: ferme e dritte al centro, girate e più scure ai lati.
   Lo script è in main.js (blocco "Bonus a carosello"); le regole del tema Cyberpunk sono in temi.css. */
.bonus-car { position: relative; }
.bn { position: relative; height: 380vh; } /* 100vh + scroll totale: lo imposta lo script dai due valori HOLD_VH e MOVE_VH */
.bn-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; gap: clamp(8px, 2vh, 20px);
  padding-block: clamp(64px, 9vh, 88px) clamp(20px, 4vh, 40px);
}
.bn-intro { padding: clamp(48px, 8vh, 96px) var(--gutter) 0; max-width: var(--max); margin-inline: auto; width: 100%; }
.bn-intro .eyebrow { margin: 0; }
.bn-intro .section-title { margin: 0.1em 0 clamp(24px, 4vh, 48px); }

.bn-viewport { perspective: 1200px; position: relative; align-self: stretch; min-height: 0; }
.bn-track { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--gap); will-change: transform; transform-style: preserve-3d; }

.bn-card {
  --w: min(92vw, 900px);
  --band: clamp(110px, 20vh, 190px);
  --gap: 0px;
  flex: 0 0 var(--w);
  max-height: 100%;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: clamp(18px, 2.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-raised);
  color: var(--text);
  will-change: transform, opacity;
  transition: border-color .25s, box-shadow .25s;
}

/* Colori: per tutti i percorsi = tinta base; solo mentorship = oro. In Cyberpunk: azzurro e oro premium */
.bn-card { --c: var(--accent); --c2: var(--accent-deep); }
.bn-card.is-mentor { --c: var(--mentor); --c2: #3b1a6e; }
.bn-card.is-on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 24px 70px -24px var(--c); }

.bn-top { display: flex; align-items: center; }
.bn-tag { font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.bn-vis {
  flex: none; height: var(--band); text-align: center; padding: 0 14px; gap: 14px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: var(--fs-lead); letter-spacing: -0.02em; color: #fff;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 55%), linear-gradient(135deg, var(--c2), var(--c));
}
/* Logo dei programmi: tessere quadrate, segnaposto da sostituire con i loghi definitivi */
.bn-logo { position: relative; height: min(calc(100% - 64px), 200px); aspect-ratio: 1; flex: none; border-radius: 22%; background: rgba(255,255,255,.94); box-shadow: 0 6px 24px -8px rgba(0,0,0,.5); }
.bn-logo img { position: absolute; inset: 16%; width: 68%; height: 68%; object-fit: contain; }
/* ComfyUI: icona su tessera scura (il giallo non si legge sul bianco) e logo con scritta su tessera larga */
.bn-logo.is-dark { background: #0b0c0f; }
.bn-logo.is-wide { aspect-ratio: 2.4; border-radius: 18px; } /* raggio in px: con le percentuali su un rettangolo gli angoli si deformano */
.bn-logo.is-wide img { inset: 22% 11%; width: 78%; height: 56%; }
.bn-comfy .bn-logo { height: min(calc(100% - 44px), 112px); }
.bn-title { margin: 0; font-family: var(--display); font-weight: 800; font-size: var(--fs-lead); line-height: 1.1; }
.bn-lead { margin: 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.45; }
.bn-list { list-style: none; margin: clamp(10px, 2vh, 20px) 0 0; padding: 0; display: grid; gap: 10px; }
.bn-list li { position: relative; padding-left: 32px; font-size: var(--fs-body); line-height: 1.35; color: var(--text); }
.bn-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--c); }

.bn-dots { display: flex; justify-content: center; align-items: center; gap: 10px; }
.bn-dot {
  width: 12px; height: 12px; padding: 0; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--line); transition: width .3s, background .3s;
}
.bn-dot:hover { background: var(--muted); }
.bn-dot.is-on { width: 34px; background: var(--accent); }
.bn-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* Desktop: la card occupa circa l'82% dell'altezza dello schermo; sugli schermi alti cresce soprattutto la fascia dei loghi */
@media (min-width: 701px) {
  .bn-stage { padding-block: clamp(64px, 8vh, 80px) clamp(28px, 3.6vh, 40px);   /* sotto il menu fisso */ }
  .bn-card {
    --w: min(94vw, 1120px); --band: clamp(130px, 25vh, 230px);
    --extra: max(0px, 100vh - 810px);                       /* quanto lo schermo supera i 810 px */
    min-height: 82vh; max-height: 100%;
    gap: calc(clamp(12px, 2.2vh, 22px) + var(--extra) * 0.025);
    padding: calc(clamp(24px, 3.4vh, 38px) + var(--extra) * 0.04) clamp(28px, 3vw, 44px) calc(clamp(32px, 5vh, 52px) + var(--extra) * 0.04);
  }
  .bn-vis { flex: 1 1 var(--band); height: auto; min-height: 120px; max-height: 34vh; margin-bottom: clamp(6px, 1.6vh, 16px); }  /* la fascia cresce con lo schermo */
  .bn-list { gap: calc(clamp(12px, 2vh, 20px) + var(--extra) * 0.01); margin-top: calc(clamp(18px, 3.4vh, 34px) + var(--extra) * 0.03); }
}
@media (max-width: 700px) {
  .bn-stage { padding-block: 44px 72px; }     /* spazio per il selettore dei temi */
  .bn-card { --band: 80px; gap: 6px; padding: 14px 14px 24px; }
  .bn-vis { margin-bottom: 10px; }       /* tra i loghi e il titolo */
  .bn-top { margin-bottom: 6px; }         /* tra il tag e la fascia dei loghi */
  .bn-tag { padding-block: 0.08em; line-height: 1.15; }   /* tag a metà altezza: il colore basta a distinguerli */
  .bn-vis { font-size: var(--fs-small); }
  .bn-logo { height: calc(100% - 24px); }
  .bn-list { gap: 8px; margin-top: 16px; }   /* tra il sottotitolo e le spunte */
  .bn-list li { line-height: 1.3; padding-left: 28px; }
  .bn-lead { font-size: var(--fs-small); }
  .bn-title { font-size: var(--fs-body); }
}
@media (prefers-reduced-motion: reduce) { .bn-card { transition: none; } }

/* Schede prezzi più larghe della colonna centrale (+20%), solo con due colonne */
@media (min-width: 901px) {
  .plans {
    --pw: min(calc((var(--max) - 2 * var(--gutter)) * 1.2), calc(100vw - 2 * var(--gutter) - 16px));
    width: var(--pw);
    margin-inline: calc(50% - var(--pw) / 2);
  }
}

/* Agenti AI: finestra di terminale con le icone dei programmi.
   Sta dentro la fascia grafica della scheda, qualunque altezza abbia (container query sulle due dimensioni): se la fascia è bassa
   restano barra e icone, se è alta compare anche la riga di comando con il cursore che lampeggia. */
.bn-term { container-type: size; padding: 10px; text-align: left; align-items: center; justify-content: center; }
.term-win { width: fit-content; max-width: 100%; height: auto; max-height: 100%; display: flex; flex-direction: column; --cmd: 0px; --th: min(calc(67cqh - 42px - var(--cmd)), 128px); border-radius: 10px; overflow: hidden; background: #0a0c10; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .7); font-family: Consolas, "SFMono-Regular", "Liberation Mono", Menlo, monospace; font-weight: 400; letter-spacing: 0; }
.term-bar { flex: none; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: #161a22; }
.term-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; }
.term-body { min-height: 0; display: flex; flex-direction: column; gap: clamp(10px, 8cqh, 28px); padding: clamp(8px, 11cqh, 44px) clamp(14px, 6cqw, 56px) clamp(12px, 14cqh, 56px); }
.term-cmd { display: none; flex: none; margin: calc(8px - clamp(8px, 11cqh, 44px)) 0 0 calc(14px - clamp(14px, 6cqw, 56px)); font-size: clamp(10px, calc((100cqw - 20px - 24px) / 40), 16px); line-height: 1.2; color: #cfd8ea; white-space: nowrap; overflow: hidden; }
.term-cmd b { color: #7fb0ff; font-weight: 400; }
.term-cur { display: inline-block; width: .55em; height: 1em; margin-left: .35em; vertical-align: text-bottom; background: #cfd8ea; animation: term-blink 1.1s steps(1) infinite; }
@keyframes term-blink { 50% { opacity: 0; } }
.term-row { min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2.4cqw, 20px); }
.term-tile { flex: none; height: max(var(--th), 28px); max-height: 100%; aspect-ratio: 1; position: relative; border-radius: 22%; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6); }
.term-tile img { position: absolute; inset: 16%; width: 68%; height: 68%; object-fit: contain; }
.term-link { flex: none; width: clamp(18px, 4cqw, 30px); height: clamp(18px, 4cqw, 30px); }
.term-link svg { width: 100%; height: 100%; fill: none; stroke: #cfd8ea; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(160, 200, 255, .55)); }
@container (min-height: 150px) { .term-cmd { display: block; } .term-win { --cmd: 34px; } }
@media (max-width: 700px) { .bn-term { height: 104px; } }
@media (prefers-reduced-motion: reduce) { .term-cur { animation: none; } }

/* Prova: la scheda base resta un po' più piccola, in secondo piano rispetto alla mentorship (solo desktop) */
@media (min-width: 901px) {
  .plan:not(.plan-featured) { transform: scale(0.93); }
}

/* Al passaggio del mouse il bordo delle schede prezzo si illumina (inset: in Cyberpunk le schede hanno l'angolo tagliato con clip-path) */
.plan { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.plan:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 28px -6px color-mix(in srgb, var(--accent) 45%, transparent); }
.plan-featured:hover { border-color: var(--oro); box-shadow: 0 30px 80px -40px rgba(226, 177, 60, 0.55), inset 0 0 0 1px var(--oro), inset 0 0 28px -6px color-mix(in srgb, var(--oro) 50%, transparent); }

/* Neon dietro alla scheda: elemento a parte, perché in Cyberpunk la scheda è ritagliata dal clip-path e un'ombra esterna non si vedrebbe */
.plan { position: relative; z-index: 1; }
.plan-glow { display: none; }
@media (min-width: 901px) {
  .plan-glow {
    display: block;
    grid-row: 1;
    grid-column: 1;
    z-index: 0;
    pointer-events: none;
    background: var(--glow, var(--accent));
    filter: blur(22px);
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: scale(0.93);
  }
  .plan-glow-featured { grid-column: 2; --glow: #e2b13c; }
  .plan:hover + .plan-glow { opacity: 0.6; }
  .plan:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .plan-featured { grid-column: 2; grid-row: 1; }
  .plan-glow-featured { transform: none; }
}

/* Più aria sopra e sotto le schede prezzo (spazio per il neon) */
.plans { padding-block: clamp(24px, 4vw, 56px); }

/* Badge garanzia: sigillo a stella con anelli e scritta ad arco */
.seal { border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 0 22px var(--accent-glow)); }
.seal-svg { width: 100%; height: 100%; overflow: visible; font-family: var(--display); }
.seal-edge { fill: var(--accent); }
.seal-ring { fill: none; stroke: var(--bg); stroke-width: 2; }
.seal-ring.thin { stroke-width: 1.2; }
.seal-arc { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; fill: var(--bg); }
.seal-star { fill: var(--bg); }
.seal-num { font-size: 58px; font-weight: 900; fill: var(--bg); }
.seal-days { font-size: 13px; font-weight: 800; letter-spacing: 0.35em; fill: var(--bg); }

/* Garanzia come tagliando: bordo tratteggiato, linea di strappo e due tacche */
.guarantee { grid-template-columns: 1fr; display: block; }
.coupon {
  --stub: clamp(230px, 27vw, 310px);
  position: relative;
  display: grid;
  grid-template-columns: var(--stub) 1fr;
  align-items: stretch;
  border: 2px dashed var(--accent);
  border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%), var(--bg);
}
.coupon-stub { position: relative; display: grid; place-items: center; padding: clamp(24px, 3vw, 40px); border-right: 2px dashed var(--accent); }
.coupon-stub::before, .coupon-stub::after {
  content: "";
  position: absolute;
  right: -15px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px dashed var(--accent);
  background: var(--bg);
}
.coupon-stub::before { top: -17px; clip-path: inset(50% 0 0 0); }
.coupon-stub::after { bottom: -17px; clip-path: inset(0 0 50% 0); }
.coupon::after { content: "\2702\FE0E"; position: absolute; left: calc(var(--stub) - 12px); top: 14%; padding: 4px 0; background: var(--bg); color: var(--accent); font: 20px/1 "Segoe UI Symbol", sans-serif; transform: rotate(90deg); }
.coupon .guarantee-copy { padding: clamp(28px, 4vw, 56px); align-self: center; }
@media (max-width: 900px) {
  .coupon { grid-template-columns: 1fr; }
  .coupon-stub { border-right: 0; border-bottom: 2px dashed var(--accent); }
  .coupon-stub::before, .coupon-stub::after { top: auto; bottom: -15px; }
  .coupon-stub::before { left: -17px; right: auto; clip-path: inset(0 0 0 50%); }
  .coupon-stub::after { right: -17px; clip-path: inset(0 50% 0 0); }
  .coupon::after { display: none; }
}

/* Meno spazio tra schede prezzo, tagliando della garanzia e domande frequenti */
.pricing { padding-bottom: clamp(32px, 6vh, 72px); }
.guarantee { padding-block: clamp(28px, 5vh, 64px); }
.faq { padding-top: clamp(44px, 8vh, 88px); }

/* Scheda girevole "Per chi è" / "Non è per te": le due facce stanno nella stessa cella, quindi la scheda ha l'altezza della più alta */
.flipcard { perspective: 1800px; max-width: 56rem; margin: 2rem auto; }
.flip-inner { display: grid; transform-style: preserve-3d; transition: transform 0.85s var(--ease); }
.flipcard.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-front { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 50px -24px var(--accent-glow); }
.flip-back { transform: rotateY(180deg); border-color: color-mix(in srgb, var(--live) 55%, var(--line)); box-shadow: 0 0 50px -24px var(--live); }
.flip-head { margin: 0 0 var(--gap-titolo); /* sommato al padding della prima voce della lista */ text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.3vw, 1.7rem); line-height: 1.2; color: var(--text); }
.flip-face .checklist { max-width: none; }
.flip-face .checklist:not(.checklist-no) li::before { background: var(--ok); box-shadow: 0 0 18px color-mix(in srgb, var(--ok) 45%, transparent); }
.flip-face .checklist li:first-child { border-top: 0; }
.flip-btn {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8rem 1.2rem;
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--accent);
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.flip-btn.is-back { color: var(--live); }
.flip-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.flip-btn i { width: 0.55em; height: 0.55em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.flip-btn.is-back i { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }

/* Bottoni della scheda girevole: faccina arrabbiata verso il "no", sorridente verso il "sì" */
.flip-btn.is-no { color: var(--live); border-color: var(--live); }
.flip-btn.is-yes { color: var(--accent); border-color: var(--accent); }
.flip-face-ico { width: 1.5em; height: 1.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flip-face-ico .f { fill: currentColor; stroke: none; }

/* Interruttore verde/rosso della scheda girevole */
.flipcard { --ok: #2ecc71; }
.flip-intro { margin: 2rem auto 0; max-width: 56rem; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.2; color: var(--text); }
.flip-switch-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.4rem; }
.fs-ico { width: 2.4rem; height: 2.4rem; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0.45; transition: opacity 0.3s ease, transform 0.3s ease; }
.fs-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fs-ico svg .f { fill: currentColor; stroke: none; }
.fs-yes { color: var(--ok); }
.fs-no { color: var(--live); }
.flipcard:not(.is-flipped) .fs-yes, .flipcard.is-flipped .fs-no { opacity: 1; transform: scale(1.12); }
.flip-switch { position: relative; width: 5.4rem; height: 2.7rem; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--ok); box-shadow: 0 0 22px -4px var(--ok), inset 0 0 0 2px rgba(255, 255, 255, 0.18); transition: background 0.35s ease, box-shadow 0.35s ease; }
.flip-switch .knob { position: absolute; top: 0.3rem; left: 0.3rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); transition: transform 0.35s var(--ease); }
.flipcard.is-flipped .flip-switch { background: var(--live); box-shadow: 0 0 22px -4px var(--live), inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.flipcard.is-flipped .flip-switch .knob { transform: translateX(2.7rem); }
.flip-switch:focus-visible, .fs-ico:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .flip-switch, .flip-switch .knob, .fs-ico { transition: none; } }

/* Colore unico per il testo corrente (non grassetto): cambia solo questo valore per passare al bianco (--text) o al grigio chiaro (--muted) */
:root { --corpo: var(--muted); }
.prose p, .arg-lead, .bn-list li { color: var(--corpo); }
.checklist li, .plan li, .lead, .bn-lead, .wd-desc, .installments, .guarantee-copy p, details p, .hero-sub { color: var(--corpo); }

/* Frase "Scopri subito…" e interruttore: più aria sopra e sotto, stessa distanza tra frase, interruttore e scheda */
.flip-intro { margin: clamp(56px, 9vh, 96px) auto 2.2rem; }
.flip-intro em { font-style: normal; color: var(--accent); display: inline-block; }
.flipcard { margin: 0 auto clamp(48px, 8vh, 80px); }
.flip-switch-row { margin-bottom: 2.2rem; }

/* Pila delle competenze: più spazio tra numero e titolo, e tra titolo e testo */
.arg-sticky .arg-n { margin-bottom: 0.9rem; }
.arg-sticky .arg-title { margin-bottom: var(--gap-titolo); }

/* Pila delle competenze: più larga della colonna di testo (come le schede prezzo), più alta e con più spazio all'immagine */
@media (min-width: 901px) {
  .arg-stack {
    --larg: calc((100% + min(100vw - 2 * var(--gutter), 1480px)) / 2);
    width: var(--larg);
    margin-inline: calc(50% - var(--larg) / 2);
  }
  .arg-sticky { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: min(82vh, 720px); }
  .arg-sticky-text { padding: clamp(28px, 3.4vw, 56px); }
}
.arg-sticky .arg-lead + .arg-lead { margin-top: 0.9rem; }

/* Titolo della pila delle competenze: stacco dal testo sopra e più spazio prima delle schede */

.arg-heading em { font-style: normal; color: var(--accent); display: inline-block; }

/* "Cos'è ZETA Evolution": frase d'apertura in grande e le quattro fasi come percorso */
.cose-sub { margin: 0 0 1.6rem; max-width: none; font-size: var(--fs-lead); line-height: 1.45; color: var(--corpo); }
.cose-lead, .frase-chiave { margin: 0 0 2rem; max-width: none; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.9vw, 2.3rem); line-height: 1.28; color: var(--text); }
.cose-lead em, .frase-chiave em { font-style: normal; color: var(--accent); display: inline-block; }
/* Le quattro fasi: la striscia con i quattro nodi si ferma al centro dello schermo e scorrendo (o cliccando) avanza di fase */
.cose-tl { --k: 0; position: relative; }
/* Lo spazio di scorrimento sta dentro il contenitore (non come padding): solo così la striscia resta ferma finché dura */
.cose-tl::after { content: ""; display: block; height: 110vh; height: 110svh; }
.cose-pin { position: sticky; top: calc(50vh - 130px); display: flex; flex-direction: column; gap: clamp(28px, 5vh, 52px); }
.cose-nodes { position: relative; display: flex; justify-content: space-between; align-self: center; width: min(100%, 560px); list-style: none; margin: 0; padding: 0; counter-reset: cose; }
.cose-nodes::before, .cose-nodes::after { content: ""; position: absolute; top: calc(1.6rem - 1px); left: 1.6rem; height: 2px; }
.cose-nodes::before { right: 1.6rem; background: var(--line); }
.cose-nodes::after { width: calc((100% - 3.2rem) * var(--k)); background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); transition: width 0.5s var(--ease); }
.cose-node { position: relative; z-index: 1; width: 3.2rem; height: 3.2rem; counter-increment: cose; cursor: pointer; outline-offset: 6px; }
.cose-n { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--dim); transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; }
.cose-n::before { content: counter(cose, decimal-leading-zero); }
.cose-node.done .cose-n { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.cose-node.on .cose-n { border-color: var(--accent); background: var(--accent); color: var(--bg-deep); box-shadow: 0 0 22px var(--accent-glow); transform: scale(1.12); }
.cose-node:hover .cose-n { border-color: var(--accent); }
.cose-panels { display: grid; align-self: center; width: min(100%, 560px); }
.cose-panels.reveal { transition-delay: 0.15s; }
.cose-panel { grid-area: 1 / 1; padding-left: clamp(16px, 2.4vw, 32px); border-left: 3px solid var(--accent); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.45s ease, transform 0.45s var(--ease); }
.cose-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.cose-t { margin: 0 0 var(--gap-titolo); font-size: calc(var(--fs-h3) * 0.7); line-height: 1.2; overflow-wrap: anywhere; }
.cose-panel p { margin: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--corpo); }
@media (max-width: 900px) {
  .cose-panel p { font-size: var(--fs-body); }
}
@media (prefers-reduced-motion: reduce) {
  .cose-tl::after { display: none; }
  .cose-pin { position: static; }
  .cose-n, .cose-nodes::after, .cose-panel { transition: none; }
}

/* A capo: solo i titoli sono bilanciati; i testi (frasi, paragrafi, liste) vanno a capo normalmente, a fine riga */
.section-title, .flip-head, .arg-title, .cose-t, .wd-title, .bn-title, .scene-caption { text-wrap: balance; }

/* "Il traguardo del percorso…": frase sobria con filetto laterale, al posto dello stile a effetto del titolo */
.traguardo { max-width: none; padding-left: 1.4rem; border-left: 3px solid var(--accent); font-family: var(--display); font-weight: 600; font-style: normal; text-transform: none; font-size: calc(var(--fs-lead) * 1.15); line-height: 1.4; letter-spacing: 0; color: var(--corpo); text-wrap: wrap; }
.traguardo strong { color: var(--text); font-weight: 800; }

/* Meno vuoto tra l'ultima card della pila e la frase del traguardo */
.arg-stack { padding-bottom: 0; }
.arg-stack .arg-sticky:last-child { margin-bottom: 0; }





/* ---------- Distanze: valori fissi (2026-10-17) ----------
   Cinque valori, uguali su ogni schermo; solo sotto i 700 px (telefono) ne usiamo una variante più stretta.
   --par-gap = distanza tra paragrafi; --blk-gap = distanza tra blocchi di tipo diverso (titolo, schede, percorso, bottone). */
:root {
  --sp-1: 12px;   /* stretto: dentro un componente */
  --sp-2: 40px;   /* paragrafi */
  --sp-3: 60px;   /* medio: titolo sopra, sotto la barra di prova, schede prezzo */
  --sp-4: 80px;   /* blocchi: titolo → contenuto, bande, tagliando */
  --sp-5: 100px;  /* sezioni: sopra e sotto */
  --gap-titolo: 1.75rem; /* titolo di scheda → primo paragrafo, misurato tra la linea di base del titolo e la cima delle maiuscole del testo: uguale in tutte le schede */
  --par-gap: var(--sp-2);
  --blk-gap: var(--sp-4);
}
@media (max-width: 700px) {
  :root { --sp-1: 8px; --sp-2: 28px; --sp-3: 44px; --sp-4: 56px; --sp-5: 72px; }
}

/* Sezioni */
.manifesto, .program, .author, .pricing, .audience, .proof, .copy, .closing, .faq { padding-block: var(--sp-5); }
.pricing { padding-bottom: var(--sp-4); }
.cd-band, .guarantee { padding-block: var(--sp-4); }
.plans { padding-block: var(--sp-3); }

/* Sezioni di testo (.copy): la distanza tra i blocchi la dà il contenitore con gap, non i margini dei singoli elementi */
.copy { display: flex; flex-direction: column; gap: var(--par-gap); }
.copy > * { margin-block: 0; }
.copy > .section-title { margin-top: calc(var(--blk-gap) - var(--par-gap)); margin-bottom: calc(var(--blk-gap) - var(--par-gap)); }
.copy > .flip-intro, .copy > .traguardo, .copy > .cta-row { margin-top: calc(var(--blk-gap) - var(--par-gap)); }
.copy > .flipcard { margin-bottom: calc(var(--blk-gap) - var(--par-gap)); }
.copy > .cose-tl { margin-block: calc(var(--sp-5) - var(--par-gap)); }
.prose, .guarantee-copy { display: flex; flex-direction: column; gap: var(--par-gap); }
.prose > *, .guarantee-copy > *, .prose p, .guarantee-copy p { margin-block: 0; }
.prose > .section-title { margin-bottom: calc(var(--blk-gap) - var(--par-gap)); }
.prose > .eyebrow + .section-title { margin-top: calc(var(--par-gap) * -1 + clamp(28px, 5vh, 56px)); } /* stesso stacco sopratitolo → titolo delle altre sezioni (testimonianze, prezzi, FAQ) */
.flip-switch-row { margin-bottom: var(--par-gap); }
.flip-intro { margin-inline: auto; }

/* Timeline delle settimane: stacco di un blocco (80 px) dal testo che la precede */
.program .prose { margin-bottom: 0; }
.program .timeline { margin-top: var(--blk-gap); }

/* Titolo → primo paragrafo: taglio lo spazio di interlinea sopra e sotto, così la distanza è quella scritta in --gap-titolo e non cambia con il corpo del testo */
.cose-t, .arg-title, .wd-title { text-box: trim-end cap alphabetic; }
.cose-t + p, .arg-title + .arg-lead, .wd-title + .wd-desc { text-box: trim-start cap alphabetic; }

/* ---------- Mentorship: tre card che girano (problema → come lo affrontiamo insieme) ---------- */
.mentor-cards-wrap { display: flex; flex-direction: column; gap: 1.2rem; }
.mc-hint { margin: 0; text-align: center; font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.mc-hint-touch { display: none; }
@media (hover: none) { .mc-hint-mouse { display: none; } .mc-hint-touch { display: inline; } }

.mentor-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
.mcard { position: relative; perspective: 1400px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.mc-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform 0.8s var(--ease); }
.mcard.is-flipped .mc-inner { transform: rotateY(180deg); }
@media (hover: hover) { .mcard:not(.is-flipped):hover .mc-inner { transform: rotateY(-9deg) translateY(-4px); } }
.mc-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-titolo);
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mc-front { background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--live) 22%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--live) 7%, transparent), transparent 45%), var(--bg-raised); border-color: color-mix(in srgb, var(--live) 45%, var(--line)); box-shadow: 0 0 40px -26px var(--live); }
.mc-back { transform: rotateY(180deg); background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(226, 177, 60, 0.22), transparent 70%), linear-gradient(180deg, rgba(226, 177, 60, 0.07), transparent 45%), var(--bg-raised); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 28px -6px color-mix(in srgb, var(--gold) 50%, transparent); }
/* Bagliore dorato dietro la card girata, lo stesso della scheda prezzo della mentorship (blocco a parte: nel Cyberpunk la faccia è ritagliata e un'ombra esterna non si vedrebbe) */
.mcard::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #e2b13c; filter: blur(22px); opacity: 0; transform: scale(0.97); transition: opacity 0.4s ease 0.3s; }
.mcard.is-flipped::before { opacity: 0.6; }
.mc-inner { position: relative; z-index: 1; }
.mc-ico { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mc-x { stroke: var(--live); }
.mc-v { stroke: color-mix(in srgb, var(--gold) 35%, var(--dim)); transition: stroke 0.5s ease 0.45s, filter 0.5s ease 0.45s; }
.mcard.is-flipped .mc-v { stroke: var(--gold); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 70%, transparent)); }
.mc-q { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-lead); line-height: 1.25; color: var(--text); text-wrap: balance; }
.mc-t { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--corpo); }
.mc-t strong { color: var(--text); }
.mcard:focus-visible .mc-face { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) { .mentor-cards { grid-template-columns: minmax(0, 1fr); } }

/* Animazioni ridotte: niente rotazione, le due facce si scambiano con una dissolvenza */
@media (prefers-reduced-motion: reduce) {
  .mc-inner, .mcard.is-flipped .mc-inner, .mcard:not(.is-flipped):hover .mc-inner { transform: none; transition: none; }
  .mc-back { transform: none; opacity: 0; visibility: hidden; }
  .mcard.is-flipped .mc-front { opacity: 0; visibility: hidden; }
  .mcard.is-flipped .mc-back { opacity: 1; visibility: visible; }
}

.prose > .cose-lead, .prose > .frase-chiave { margin: 0; }
/* .prose p colora i paragrafi con il grigio del corpo: la frase-chiave resta nel colore pieno del testo */
.prose p.frase-chiave, .prose p.cose-lead { color: var(--text); }

/* Blocco delle card della mentorship: più respiro sopra e sotto (distanza tra blocchi diversi, come per la scheda "Per chi è") */
.copy > .mentor-cards-wrap { margin-block: calc(var(--blk-gap) - var(--par-gap)); }

/* .prose p colora i paragrafi di grigio: il sopratitolo "Chi sono?" (dentro .prose) deve restare nel colore d'accento come gli altri */
.prose p.eyebrow { color: var(--accent); }

/* Scene animate: niente più omino segnaposto che lampeggia mentre i frame si caricano.
   Il segnaposto compare solo se i frame non esistono (.is-fallback). Nel frattempo il canvas mostra un fotogramma minuscolo
   (assets/scene/<nome>/anteprima.jpg, 64 px, meno di 1 KB) ingrandito e sfocato dal browser; appena il frame vero è pronto lo copre. */
.scene:not(.is-fallback) .scene-ph { display: none; }
.scene-canvas { background-color: var(--bg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.scene[data-scene="braccio"] .scene-canvas { background-image: url("assets/scene/braccio/anteprima.jpg"); }
.scene[data-scene="giacca"] .scene-canvas { background-image: url("assets/scene/giacca/anteprima.jpg"); }
.scene[data-scene="maglietta"] .scene-canvas { background-image: url("assets/scene/maglietta/anteprima.jpg"); }
.scene[data-scene="primopiano"] .scene-canvas { background-image: url("assets/scene/primopiano/anteprima.jpg"); }
.scene[data-scene="turntable"] .scene-canvas { background-image: url("assets/scene/turntable/anteprima.jpg"); }
.scene[data-scene="zoomout"] .scene-canvas { background-image: url("assets/scene/zoomout/anteprima.jpg"); }

/* Tappa 01: turnaround (stivali compresi). L'immagine riempie il riquadro fino al bordo, senza cornice: ha quasi le stesse proporzioni del riquadro
   su desktop (si taglia al massimo un po' di schiena ai lati); su telefono il riquadro è quasi quadrato, così non si perdono né testa né stivali. */
.arg-sticky-vis[data-stadio="1"] > img { object-fit: cover; object-position: 30% 60%; }
@media (max-width: 900px) {
  .arg-sticky-vis[data-stadio="1"] { aspect-ratio: 1 / 1; }
}

/* Tappa 04 (Grooming): primo piano di profilo, la testa sta un po' a destra del centro */
.arg-sticky-vis[data-stadio="4"] > img { object-position: 55% 50%; }

/* Tappa 03 (Retopology e UV Mapping): schermata di Blender, si tiene a destra la giacca intera e a sinistra un pezzo delle UV */
.arg-sticky-vis[data-stadio="3"] > img { object-position: 100% 50%; }

/* Tappa 05 (Texturing): giacca da dietro su fondo nero, in un quadrato con margine ai lati; su telefono il riquadro è quadrato */
.arg-sticky-vis[data-stadio="5"] > img { object-position: 50% 50%; }
@media (max-width: 900px) {
  .arg-sticky-vis[data-stadio="5"] { aspect-ratio: 1 / 1; }
}

/* Tappa 07 (Rendering): occhi più in alto nel riquadro (su desktop si mostra la parte bassa della foto, su telefono una fascia che parte sopra gli occhi) */
.arg-sticky-vis[data-stadio="7"] > img { object-position: 50% 100%; }
@media (max-width: 900px) {
  .arg-sticky-vis[data-stadio="7"] > img { object-position: 50% 34%; }
}

/* Tappa 06 (Rigging): schermata di Unreal con lo scheletro sulla giacca; su telefono il riquadro è quadrato per non tagliare troppo */
.arg-sticky-vis[data-stadio="6"] > img { object-position: 50% 50%; }
@media (max-width: 900px) {
  .arg-sticky-vis[data-stadio="6"] { aspect-ratio: 1 / 1; }
}

/* ---------- Testimonianze: solo il video (2026-10-18) ---------- */
.proof .video-frame { max-width: 1100px; margin: clamp(24px, 4vh, 40px) auto clamp(40px, 7vh, 72px); }
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }