/* Landing page pubblica di Duskhearth (duskhearth.app).
   Riusa gli stessi token del tema "Atrium" dell'app (colori, font, motivo degli
   angoli ornati) invece di inventare una palette a parte: e' la stessa identita'
   visiva che i giocatori vedono dentro l'app, non un microsito scollegato.
   Font auto-ospitati (stesso principio gia' adottato nell'app, vedi
   frontend/src/global.scss): nessuna richiesta a fonts.googleapis.com.

   Il movimento e' tutto qui dentro o in site.js: niente librerie, niente build,
   nessuna richiesta esterna a runtime (vincolo di docs/ops/DEPLOY_VPS.md sezione 15,
   la pagina e' servita da Caddy direttamente dalla repo). Si animano solo
   transform e opacity, e ogni animazione si spegne sotto prefers-reduced-motion
   in fondo al file. */

:root {
  --bg-base: #0D1110;
  --bg-elevated: #161C1B;
  --bg-surface: #1F2725;
  --text-primary: #E6EAE7;
  --text-secondary: #9DA8A4;
  --text-muted: #879490;
  --border: #2C3835;
  --accent: #6FB6A8;
  --accent-deep: #4E9789;
  --accent-bright: #8FCCC0;
  --accent-contrast: #0D1110;
  --secondary: #C08A52;
  --ember: #CF6252;
  --magic: #A396D4;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-narrative: 'Lora', Georgia, 'Times New Roman', serif;
  --font-display: 'Cinzel', 'Times New Roman', serif;

  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 72px;

  --radius: 6px;
  --glow-soft: 0 0 16px rgba(184, 137, 62, 0.35);
  --shadow-elevated: 0 16px 40px rgba(0, 0, 0, 0.5);

  /* Curva unica per tutto il movimento della pagina: un'uscita morbida che
     "arriva" invece di frenare di colpo. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/Lora-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Cinzel-SemiBold.woff2') format('woff2');
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Vignetta radiale molto tenue, coerente col --atrium-glow-primary-soft
   dell'app: da' profondita' al fondo scuro senza diventare un "blob" AI. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vw 60vw at 82% -10%, rgba(184, 137, 62, 0.10), transparent 60%),
    radial-gradient(50vw 50vw at 0% 100%, rgba(91, 168, 173, 0.06), transparent 60%);
  pointer-events: none;
}

a {
  color: var(--accent);
}

a:hover,
a:focus-visible {
  color: var(--accent-bright);
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--space-lg);
}

/* Solo per le tecnologie assistive: il testo della narrazione arriva qui tutto
   insieme mentre a schermo si scrive una lettera alla volta. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--accent-deep);
  color: var(--accent-contrast);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: var(--space-md);
  color: var(--accent-contrast);
}

/* ==========================================================================
   Motivo "angolo ornato": stesso identico dettaglio usato in tutte le card
   dell'app reale (frontend/src/app/features/home/home.page.scss ecc.) -
   un piccolo aggancio visivo che rende le sezioni riconoscibilmente
   Duskhearth invece di generiche card rettangolari.
   ========================================================================== */
.ornate {
  position: relative;
}

.ornate::before,
.ornate::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--accent-deep);
  pointer-events: none;
}

.ornate::before {
  top: -1px;
  right: -1px;
  border-left: none;
  border-bottom: none;
}

.ornate::after {
  bottom: -1px;
  left: -1px;
  border-right: none;
  border-top: none;
}

/* ==========================================================================
   Rivelazioni allo scroll
   Lo stato di partenza vive sotto .js (aggiunta in <head> prima del primo
   paint): senza JavaScript la classe non c'e' e la pagina resta interamente
   visibile invece di restare bianca. L'osservazione la fa un
   IntersectionObserver, mai un listener sull'evento scroll.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.js .reveal[data-delay="1"] { transition-delay: 0.09s; }
.js .reveal[data-delay="2"] { transition-delay: 0.18s; }

/* ==========================================================================
   Nav
   ========================================================================== */
#top-sentinel {
  position: absolute;
  top: 0;
  height: 1px;
  width: 1px;
  pointer-events: none;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: 14px;
  background: rgba(16, 12, 9, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Stato "hai lasciato la cima": la barra si stacca dal fondo pagina e prende
   un bordo. Cambio di stato reale, non decorazione. */
.nav.is-stuck {
  background: rgba(16, 12, 9, 0.92);
  border-bottom-color: var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

.nav-brand img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-size: 0.92rem;
}

.nav-links a:not(.btn) {
  color: var(--text-secondary);
  text-decoration: none;
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn):focus-visible {
  color: var(--accent);
}

.nav-links .legal-links {
  display: flex;
  gap: var(--space-md);
}

/* Cambio lingua: resta visibile anche su telefono, dove i link legali
   spariscono — e' l'unico modo per arrivare all'altra versione. */
.nav-links .lang-link {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.1rem;
}

@media (max-width: 640px) {
  .nav-links .legal-links {
    display: none;
  }
}

/* Schermi strettissimi (320-380px): logo, EN e "Scrivici" non ci stavano e
   la barra faceva scorrere la pagina di lato. Margini e spazi piu' stretti. */
@media (max-width: 380px) {
  .container {
    padding-inline: var(--space-md);
  }

  .nav-inner,
  .nav-links {
    gap: 12px;
  }

  .nav-brand {
    gap: 8px;
    font-size: 1rem;
  }

  .nav .btn {
    padding: 10px 14px;
  }
}

/* ==========================================================================
   Bottoni
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn-lg {
  padding: 15px 30px;
  font-size: 1rem;
}

.btn-primary {
  background: var(--accent-deep);
  color: var(--accent-contrast);
  box-shadow: var(--glow-soft);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent-bright);
  color: var(--accent-contrast);
  box-shadow: 0 0 22px rgba(212, 176, 127, 0.55);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--accent-deep);
  color: var(--accent);
}

/* ==========================================================================
   Sezioni generiche
   ========================================================================== */
section {
  padding-block: var(--space-xxl);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-xl);
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
  text-wrap: balance;
}

.section-head p {
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}

/* ==========================================================================
   Hero con video di sfondo
   Video d'atmosfera a tutta larghezza (la valle dell'illustrazione dell'app,
   senza testo) con un velo scuro sopra e il testo centrato. Il video
   continua sotto la nav semitrasparente: per questo l'hero risale di
   un'altezza nav (--nav-h) e la recupera nel padding.
   Il video di presentazione vero e proprio (con testi e audio) non sta qui
   sotto il titolo: si apre a richiesta dal pulsante "Guarda il video".
   ========================================================================== */
:root {
  --nav-h: 78px;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 100svh, 1000px);
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + var(--space-xxl)) 0 var(--space-xxl);
  overflow: hidden;
  background: var(--bg-base);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-bg-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo: piu' scuro al centro (dove sta il testo) e in fondo, dove l'hero
   sfuma nel colore della pagina invece di finire con un taglio netto. */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(13, 17, 16, 0.55), rgba(13, 17, 16, 0.2) 70%, transparent),
    linear-gradient(rgba(13, 17, 16, 0.35), rgba(13, 17, 16, 0.1) 30%, rgba(13, 17, 16, 0.25) 70%, var(--bg-base));
}

.hero-copy {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.hero-kicker {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.2rem);
  line-height: 1.1;
  margin: 0 0 var(--space-lg);
  color: var(--text-primary);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.hero .lede {
  font-family: var(--font-narrative);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  color: var(--text-primary);
  opacity: 0.88;
  max-width: 48ch;
  margin: 0 auto var(--space-xl);
  text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* Il pulsante secondario sta su un video: fondo vetro invece che trasparente,
   cosi' resta leggibile qualunque fotogramma passi dietro. */
.hero .btn-ghost {
  background: rgba(13, 17, 16, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Telefono: il video verticale ha il drago in alto e la valle in basso.
   Qui lo sfondo parte SOTTO la nav (che su telefono e' una fascia scura e
   coprirebbe la testa del drago) ed e' allineato in alto: il ritaglio di
   object-fit cade sul fondo del video, che e' terreno buio. Il testo e' piu'
   compatto e sta in basso, cosi' lascia la testa del drago scoperta anche
   su Safari, dove 100svh e' basso perche' conta le barre del browser. */
@media (max-width: 640px) {
  .hero {
    align-items: end;
    min-height: clamp(560px, 100svh, 900px);
    padding-bottom: var(--space-lg);
  }

  .hero-bg {
    top: var(--nav-h);
  }

  .hero-bg-video {
    object-position: 50% 0;
  }

  .hero-bg::after {
    background: linear-gradient(transparent 30%, rgba(13, 17, 16, 0.68) 46%, rgba(13, 17, 16, 0.88) 72%, var(--bg-base));
  }

  .hero-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    margin-bottom: var(--space-sm);
  }

  .hero h1 {
    font-size: 2rem;
    margin-bottom: var(--space-md);
  }

  .hero .lede {
    font-size: 1rem;
    margin-bottom: var(--space-lg);
  }

  /* Due pulsanti affiancati invece che impilati: meno altezza, piu' drago. */
  .hero-actions {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .hero-actions .btn {
    padding: 13px 16px;
    font-size: 0.95rem;
  }

  .hero-actions .btn span[aria-hidden] {
    display: none;
  }

  /* La pausa sta in alto a destra, sotto la nav, lontana dai pulsanti. */
  .hero-pause {
    top: calc(var(--nav-h) + var(--space-md));
    bottom: auto;
    right: var(--space-md);
  }
}

/* Telefoni piccoli (320-380px): titolo un po' piu' piccolo e pulsanti che
   possono andare a capo se non entrano affiancati. */
@media (max-width: 380px) {
  .hero h1 {
    font-size: 1.75rem;
  }

  .hero .lede {
    font-size: 0.97rem;
  }

  .hero-actions {
    flex-wrap: wrap;
  }
}

/* --- Pulsanti tondi (pausa sfondo, chiusura finestra) -------------------- */
.film-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(13, 17, 16, 0.6);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.film-btn:hover,
.film-btn:focus-visible {
  border-color: var(--accent-deep);
  color: var(--accent-bright);
}

.film-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.film-btn svg {
  width: 18px;
  height: 18px;
}

/* Due icone per bottone; lo stato lo decide aria-pressed. */
.film-btn .when-on { display: none; }
.film-btn[aria-pressed="true"] .when-on { display: block; }
.film-btn[aria-pressed="true"] .when-off { display: none; }

.hero-pause {
  position: absolute;
  right: var(--space-lg);
  bottom: var(--space-lg);
}

/* Senza JavaScript lo sfondo e' la locandina ferma: niente da mettere in
   pausa. */
html:not(.js) .hero-pause {
  display: none;
}

/* --- Finestra del video di presentazione --------------------------------- */
.film-dialog {
  width: min(92vw, 1200px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.film-dialog::backdrop {
  background: rgba(5, 7, 7, 0.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.film-dialog.is-tall {
  width: min(92vw, calc(84svh * 9 / 16));
}

.film-frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--shadow-elevated), 0 0 70px rgba(111, 182, 168, 0.12);
}

.film-dialog.is-tall .film-frame {
  aspect-ratio: 9 / 16;
}

.film-video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.film-close {
  position: absolute;
  top: -56px;
  right: 0;
}

/* Entrata scaglionata in ordine di lettura. Va da se' senza JavaScript
   (animation ... both finisce sempre visibile). */
.hero-copy > * {
  animation: rise 0.8s var(--ease-out) both;
}

.hero-copy > .hero-kicker { animation-delay: 0.05s; }
.hero-copy > h1 { animation-delay: 0.12s; }
.hero-copy > .lede { animation-delay: 0.22s; }
.hero-copy > .hero-actions { animation-delay: 0.32s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Come funziona (timeline verticale, non 3 card identiche)
   ========================================================================== */
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  max-width: 760px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* La linea si disegna dall'alto verso il basso quando la sezione entra:
   traccia letteralmente la sequenza dei tre passi. */
.timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(var(--border), transparent 95%);
}

.js .timeline::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s var(--ease-out);
}

.js .timeline.is-drawn::before {
  transform: scaleY(1);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-lg);
}

.timeline-num {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent-deep);
  background: var(--bg-elevated);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.5s ease;
}

.timeline-item.is-in .timeline-num {
  box-shadow: 0 0 14px rgba(184, 137, 62, 0.30);
}

.timeline-item h3 {
  margin: 4px 0 6px;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.timeline-item p {
  margin: 0;
  color: var(--text-secondary);
  max-width: 56ch;
}

/* ==========================================================================
   Esempio di narrazione (la parte interattiva)
   Mostra il prodotto invece di descriverlo: l'app produce prosa, quindi la
   prosa e' l'unico "screenshot" onesto disponibile. Niente finta interfaccia.
   ========================================================================== */
.demo {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(27, 22, 18, 0.55), transparent 60%);
}

.demo-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 860px) {
  .demo-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.demo-label {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Allinea "La tua mossa" con "Il Narratore": il pannello a destra ha la sua
   etichetta dopo il padding interno, quindi la colonna sinistra prende lo
   stesso rientro invece di partire piu' in alto. */
@media (min-width: 861px) {
  .demo-choices {
    padding-top: var(--space-lg);
  }
}

.demo-chip {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-narrative);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.demo-chip:hover {
  color: var(--text-primary);
  border-color: var(--border);
  border-left-color: var(--accent-deep);
  background: var(--bg-surface);
}

.demo-chip:active {
  transform: translateY(1px);
}

.demo-chip[aria-pressed="true"] {
  color: var(--text-primary);
  background: var(--bg-surface);
  border-color: var(--accent-deep);
  border-left-color: var(--accent);
}

.demo-scene {
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  margin: 0;
}

.demo-scene-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

/* Altezza minima: il testo si scrive dentro un box gia' dimensionato, cosi'
   la pagina non salta mentre cresce (CLS). */
.demo-takes {
  min-height: 12.5em;
}

@media (min-width: 861px) {
  .demo-takes {
    min-height: 9em;
  }
}

.demo-take {
  margin: 0;
  font-family: var(--font-narrative);
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--text-primary);
}

/* Senza JavaScript restano visibili tutti e tre gli esempi, uno sotto l'altro. */
.demo-take + .demo-take {
  margin-top: var(--space-md);
}

.js .demo-take {
  display: none;
}

.js .demo-take.is-active {
  display: block;
  margin-top: 0;
}

.demo-take.is-typing::after {
  content: '';
  display: inline-block;
  width: 0.45em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: var(--accent);
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  0%, 45%   { opacity: 1; }
  46%, 100% { opacity: 0; }
}

.demo-note {
  margin: var(--space-lg) 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 68ch;
}

/* ==========================================================================
   Bento delle caratteristiche
   Griglia a 6 colonne con ritmo largo/stretto/stretto/largo: quattro celle
   per quattro contenuti, nessuna cella vuota, nessuna fila di card identiche.
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-lg);
}

.bento-cell.-wide { grid-column: span 4; }
.bento-cell.-narrow { grid-column: span 2; }

@media (max-width: 980px) {
  .bento-cell.-wide,
  .bento-cell.-narrow { grid-column: span 3; }
}

@media (max-width: 620px) {
  .bento-cell.-wide,
  .bento-cell.-narrow { grid-column: span 6; }
}

.bento-cell {
  position: relative;
  padding: var(--space-lg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--bg-elevated);
  transition: border-color 0.3s ease;
}

.bento-cell:hover {
  border-color: rgba(184, 137, 62, 0.45);
}

/* Quattro trattamenti di fondo distinti, cosi' la griglia non e' quattro
   riquadri identici con dentro solo testo. */
.bento-cell.-memory {
  background-image: radial-gradient(90% 130% at 8% 0%, rgba(184, 137, 62, 0.14), transparent 62%);
}

.bento-cell.-rules {
  background-image: radial-gradient(120% 120% at 100% 100%, rgba(91, 168, 173, 0.17), transparent 60%);
}

.bento-cell.-math {
  background-color: var(--bg-surface);
}

/* Archi concentrici appena accennati: stesso motivo del cerchio nell'hero,
   disegnato con due sole fermate di gradiente invece che con un SVG. */
.bento-cell.-chronicle {
  background-image:
    radial-gradient(circle at 92% 118%, transparent 41%, rgba(201, 162, 107, 0.16) 41.4%, transparent 42%),
    radial-gradient(circle at 92% 118%, transparent 55%, rgba(201, 162, 107, 0.10) 55.4%, transparent 56%),
    radial-gradient(circle at 92% 118%, transparent 69%, rgba(201, 162, 107, 0.07) 69.4%, transparent 70%);
}

/* Riflesso che segue il cursore. Lo <span> lo inserisce site.js solo sui
   dispositivi con un puntatore fine: su touch non servirebbe a niente. */
.cell-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(201, 162, 107, 0.13), transparent 68%);
}

.bento-cell:hover .cell-spot {
  opacity: 1;
}

.bento-cell h3 {
  position: relative;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
}

.bento-cell.-wide h3 {
  font-size: 1.3rem;
}

.bento-cell p {
  position: relative;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
  max-width: 52ch;
}

/* ==========================================================================
   Sezione onesta / stato del progetto
   ========================================================================== */
.honesty {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.honesty-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.honesty-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.honesty-inner p {
  color: var(--text-secondary);
  font-family: var(--font-narrative);
  font-size: 1.05rem;
  margin: 0;
  text-wrap: pretty;
}

/* ==========================================================================
   CTA finale
   Allineata a sinistra con l'azione a destra: fa da chiusura simmetrica
   all'hero e non ripete la composizione centrata della sezione precedente.
   ========================================================================== */
.cta-band {
  padding-block: var(--space-xxl);
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

.cta-band p {
  color: var(--text-secondary);
  margin: 0;
  max-width: 48ch;
}

@media (max-width: 620px) {
  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-xl);
  background: #080C0B;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-xl);
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.footer-brand img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.footer-tagline {
  font-family: var(--font-narrative);
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.95rem;
}

.footer-col h4 {
  margin: 0 0 var(--space-md);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer-col a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.94rem;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--accent);
}

.footer-legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.footer-legal p {
  margin: 0 0 var(--space-sm);
}

.footer-legal p:last-child {
  margin-bottom: 0;
}

/* Accessibilita': focus visibile e coerente su tutta la pagina */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

/* ==========================================================================
   Movimento ridotto
   Tutto quello che si muove da solo si ferma. Le rivelazioni restano visibili
   (mai contenuto nascosto per sempre), la macchina da scrivere in site.js
   scrive il testo di colpo.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-copy > *,
  .demo-take.is-typing::after {
    animation: none !important;
  }

  .demo-take.is-typing::after {
    display: none;
  }

  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .timeline::before,
  .js .timeline.is-drawn::before {
    transform: scaleY(1);
    transition: none;
  }

  .cell-spot {
    transition: none;
  }
}