/* ==========================================================================
   Mockly — componenti
   Identità D110: base bianca, navy e blu.
   Nessun effetto decorativo: hover sobri, nessun movimento allo scroll.
   BEM per esteso. Stati is- + ARIA. Mobile-first.
   ========================================================================== */

/* ==========================================================================
   Bottone
   I tre stili: --primary (pieno), --secondary (bordo), --ghost (solo testo).
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xsmall);
  padding: 1rem 1.9rem;
  min-height: 3.25rem;
  border: var(--border-width-medium) solid transparent;
  /* Pill piena, non più tagliata con precisione (D50): i bottoni sono i
     primi elementi con cui si interagisce, e i font arrotondati di D94
     chiedevano forme altrettanto morbide sotto di loro. */
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.button__icon {
  flex-shrink: 0;
  width: 1.125em;
  height: 1.125em;
  fill: currentColor;
}

.button--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse-on-accent);
}

.button--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-inverse-on-accent);
}

.button--primary:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
}

.button--secondary {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.button--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.button--ghost {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.button--ghost:hover {
  border-color: var(--color-text);
  background-color: var(--color-surface);
  color: var(--color-text);
}

.button--full-width {
  width: 100%;
}

.button[disabled],
.button.is-loading {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

@media (min-width: 30em) {
  .button--full-width {
    width: auto;
  }
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xsmall);
}

.button-group--stacked {
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 30em) {
  .button-group--stacked {
    flex-direction: row;
    align-items: center;
  }
}

/* ==========================================================================
   Intestazione — pillola bianca sospesa, sempre uguale
   ========================================================================== */

/* Intestazione sempre come dopo lo scroll (D107): pillola sospesa, staccata
   dai bordi, sempre la stessa. Niente cambio di stato scrollando. */
.site-header {
  position: fixed;
  top: var(--space-small);
  left: 50%;
  width: calc(100% - var(--space-large) * 2);
  max-width: var(--container-width);
  transform: translateX(-50%);
  z-index: var(--layer-header);
  background-color: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
}

@media (max-width: 47.99em) {
  .site-header {
    top: var(--space-2xsmall);
    width: calc(100% - var(--space-2xsmall) * 2);
  }

}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-small);
  min-height: var(--header-height);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.4em;
  color: var(--color-heading);
  font-family: var(--font-logo);
  font-size: 1.6rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.04em;
  text-decoration: none;
}

.site-header__logo:hover {
  color: var(--color-accent);
}

.site-header__logo-text {
  line-height: 1;
}

.site-header__logo-icon {
  display: block;
  height: 2.4rem;
  width: auto;
}

.site-header__navigation {
  display: none;
}

.site-header__navigation-list {
  display: flex;
  align-items: center;
  /* Voci non più dentro pillole: solo testo spaziato, come un ferro di
     rivista — il gap più largo tiene la spaziatura anche senza scatola. */
  gap: var(--space-medium);
}

.site-header__navigation-link {
  position: relative;
  display: block;
  padding: 0.3rem 0;
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-header__navigation-link:hover {
  color: var(--color-accent);
}

.site-header__navigation-link.is-current {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.site-header__navigation-link.is-current::after {
  content: none;
}

.site-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: none; /* sui telefoni stretti non si schiaccia sotto i 44px */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.site-header__toggle:hover,
.site-header__toggle:focus-visible {
  background-color: var(--color-surface-alt);
}

.site-header__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-heading);
}

/* Niente morph hamburger → X: la trasformazione avverrebbe coperta dal
   pannello (glitch visibile ai bordi). La X vive dentro il pannello. */

.site-header__overlay {
  position: fixed;
  inset: 0;
  /* `.site-header` ha backdrop-filter: diventa il contenitore di ogni
     discendente `fixed`, "inset: 0" si misura sui suoi ~60px invece che sul
     vero viewport, e il velo copre solo la barra in alto. Altezza esplicita
     in unità di viewport, immune al contenitore: 100dvh tiene conto anche
     della barra degli indirizzi mobile, dove supportata. */
  height: 100vh;
  height: 100dvh;
  z-index: var(--layer-overlay);
  background-color: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  /* Il dito sul velo non deve far scorrere la pagina dietro (iOS). */
  touch-action: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

.site-header__overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--duration-base) var(--ease-out),
    visibility 0s;
}

.site-header__panel {
  position: fixed;
  /* L'intestazione ha un transform, quindi fa da riferimento ai suoi
     discendenti "fixed": top e right si misurano sulla pillola, non sullo
     schermo. Questi due valori riportano il pannello ai bordi veri. */
  top: calc(var(--space-2xsmall) * -1);
  right: calc((100% - 100vw) / 2);
  /* Altezza esplicita in unità di viewport, per lo stesso motivo. */
  height: 100vh;
  height: 100dvh;
  z-index: var(--layer-menu);
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  width: 100vw;
  padding: var(--space-small) var(--space-medium) calc(var(--space-large) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  /* Lo stesso blu notte delle pagine, con un bagliore in alto. */
  background:
    radial-gradient(90% 55% at 15% 0, rgba(84, 168, 188, 0.45), transparent 70%),
    radial-gradient(80% 50% at 100% 100%, rgba(32, 112, 161, 0.6), transparent 70%),
    #0D0E3A;
  color: #FFFFFF;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--duration-menu) var(--ease-menu),
    visibility 0s linear var(--duration-menu);
}

/* Da tablet in su è una colonna a destra, non tutto lo schermo. */
@media (min-width: 48em) {
  .site-header__panel {
    top: calc(var(--space-small) * -1);
    width: 26rem;
    border-radius: var(--radius-soft) 0 0 var(--radius-soft);
    box-shadow: var(--shadow-float);
  }
}

.site-header__panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--duration-menu) var(--ease-menu),
    visibility 0s;
}

/* Barra propria del pannello: marchio + X dedicata. */
.site-header__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
}

.site-header__panel-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  max-width: none;
  color: #FFFFFF;
  font-family: var(--font-logo);
  font-size: 1.5rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.03em;
}

/* Sul blu il logo scuro non si leggerebbe: lo schiarisco. */
.site-header__panel-brand .site-header__logo-icon {
  filter: brightness(0) invert(1);
}

.site-header__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: transparent;
  border: var(--border-width-medium) solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.site-header__close:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.site-header__toggle,
.site-header__close,
.site-header__panel-link {
  -webkit-tap-highlight-color: transparent;
}

.site-header__close-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.site-header__panel-label {
  margin-bottom: var(--space-2xsmall);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
}

/* Le voci: grandi, una per riga, con sotto una riga che dice cosa trovi. */
.site-header__panel-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width-hairline) solid rgba(255, 255, 255, 0.22);
}

.site-header__panel-link {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 2.5rem 0.9rem 0;
  border-bottom: var(--border-width-hairline) solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out), padding-left var(--duration-fast) var(--ease-out);
}

.site-header__panel-name {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 1.6rem + 5vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1;
}

.site-header__panel-hint {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-label);
  line-height: 1.3;
}

/* La freccia a destra: un cerchio che si riempie sulla pagina in cui sei. */
.site-header__panel-link::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--border-width-hairline) solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill);
  font-size: 1rem;
  transform: translateY(-50%);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.site-header__panel-link:hover,
.site-header__panel-link:active {
  padding-left: var(--space-2xsmall);
  color: #7FC8D8;
}

.site-header__panel-link.is-current .site-header__panel-name {
  color: #7FC8D8;
}

.site-header__panel-link.is-current::after {
  content: "•";
  background-color: #7FC8D8;
  border-color: #7FC8D8;
  color: #0D0E3A;
}

/* In fondo: WhatsApp e telefono, sempre raggiungibili dal menu. */
.site-header__panel-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xsmall);
  margin-top: auto;
}

.site-header__panel-contact {
  width: 100%;
  justify-content: center;
}

.site-header__panel .button--ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #FFFFFF;
}

.site-header__panel .button--ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}


/* Su telefono il menu scende dall'alto come la serranda del negozio in fondo
   alla pagina: questa è la sua barra, con la maniglia. */
.site-header__panel-rail {
  display: none;
}

@media (max-width: 47.99em) {
  .site-header__panel {
    padding-bottom: calc(var(--space-large) + 1.1rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(-102%);
  }

  .site-header__panel.is-open {
    transform: translateY(0);
  }

  .site-header__panel-rail {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: 1.1rem;
    background: linear-gradient(#6c727c, #3b4049 60%, #23262d);
  }

  .site-header__panel-rail::before {
    content: "";
    position: absolute;
    top: 0.32rem;
    left: 50%;
    width: 4.5rem;
    height: 0.4rem;
    background-color: #14161b;
    border-radius: var(--radius-pill);
    transform: translateX(-50%);
  }
}

/* Le voci entrano una dopo l'altra, appena il menu è aperto. */
@media (prefers-reduced-motion: no-preference) {
  .site-header__panel.is-open .site-header__panel-list li,
  .site-header__panel.is-open .site-header__panel-foot {
    animation: menu-item-in 0.5s var(--ease-out) both;
    animation-delay: 0.16s;
  }

  .site-header__panel.is-open .site-header__panel-list li:nth-child(2) { animation-delay: 0.22s; }
  .site-header__panel.is-open .site-header__panel-list li:nth-child(3) { animation-delay: 0.28s; }
  .site-header__panel.is-open .site-header__panel-list li:nth-child(4) { animation-delay: 0.34s; }
  .site-header__panel.is-open .site-header__panel-list li:nth-child(5) { animation-delay: 0.4s; }
  .site-header__panel.is-open .site-header__panel-foot { animation-delay: 0.5s; }
}

@keyframes menu-item-in {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
}

/* A menu aperto la bolla WhatsApp si nasconde: starebbe sopra i contatti in fondo. */
.site-header:has(.site-header__panel.is-open) ~ .whatsapp-bar {
  visibility: hidden;
}

@media (min-width: 80em) {
  /* Da computer la pillola è larga quanto serve a logo e menu, non quanto
     tutta la pagina. */
  .site-header {
    width: fit-content;
    max-width: calc(100% - var(--space-large) * 2);
  }

  .site-header__inner {
    width: auto;
    gap: var(--space-2xlarge);
    padding-inline: var(--space-large);
  }

  .site-header__navigation {
    display: block;
  }

  .site-header__toggle,
  .site-header__panel,
  .site-header__overlay {
    display: none;
  }
}

.page-body {
  padding-top: calc(var(--header-height) + var(--space-small));
}

@media (max-width: 47.99em) {
  .page-body {
    padding-top: calc(var(--header-height) + var(--space-2xsmall));
  }
}

/* ==========================================================================
   Bottone WhatsApp — pulsante rotondo fluttuante (solo telefono)
   ========================================================================== */

.whatsapp-bar {
  position: fixed;
  right: var(--space-small);
  bottom: calc(var(--space-small) + env(safe-area-inset-bottom, 0px));
  z-index: var(--layer-header);
}

.whatsapp-bar__button {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  min-height: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
}

.whatsapp-bar__icon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 80em) {
  .whatsapp-bar {
    display: none;
  }
}

/* ==========================================================================
   Torna su — freccia fissa in basso a destra, solo da PC
   Da telefono il bottone WhatsApp basta: due pulsanti fissi impilati sopra
   al pollice erano di troppo. Resta solo da 80em in su.
   ========================================================================== */

.back-to-top {
  display: none;
}

@media (min-width: 80em) {
.back-to-top {
  position: fixed;
  right: var(--space-small);
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--layer-back-to-top);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  color: var(--color-accent);
  opacity: 0;
  visibility: hidden;
}
}

.back-to-top:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse-on-accent);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top__icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 80em) {
  .back-to-top {
    right: var(--space-large);
    bottom: var(--space-large);
  }
}

/* ==========================================================================
   Hero rivoluzionato
   ========================================================================== */

.hero {
  position: relative;
  overflow: clip;
  padding-block: var(--space-xlarge) var(--space-xlarge);
  background-color: transparent;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-xlarge);
}

.hero__title {
  margin-top: var(--space-small);
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
}

/*
 * Firma: colore pieno sull'accento, senza segno sotto — il tratto disegnato
 * a mano (uno spesso 5px su un'onda di 14px) copriva le discendenti di
 * lettere come "p"/"g" alle dimensioni piccole di un telefono, illeggibile.
 * L'enfasi resta nel colore, che cambia da solo su sfondo scuro perché usa
 * currentColor.
 */
.hero__mark {
  display: inline;
  color: var(--color-accent);
}

.hero__text {
  margin-top: var(--space-medium);
  margin-inline: auto;
  max-width: 52ch;
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  color: var(--color-text-muted);
  text-align: center;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-medium);
  margin-top: var(--space-large);
  text-align: center;
}

/*
 * Confronto interattivo: uno schizzo a mano libera (wireframe disegnato in
 * SVG, non una foto filtrata) coperto sopra lo screenshot vero di Forno
 * Nero, tagliato con clip-path in base a uno slider nativo — accessibile
 * da tastiera e da touch senza codice in più. Mostra "zero template" invece
 * di scriverlo soltanto. Senza JS l'input non sposta nulla, quindi lo
 * schizzo e il divisore restano nascosti e si vede solo il sito vero
 * (vedi @media (scripting: none) più sotto).
 */
.hero__reveal {
  position: relative;
  width: 100%;
  max-width: 50rem;
  margin-inline: auto;
}

.hero__reveal-label {
  max-width: none;
  margin-bottom: var(--space-xsmall);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  letter-spacing: 0.01em;
  text-align: center;
}

/* Rende animabile la quota di schizzo visibile (dove non è supportato,
   il passaggio è semplicemente istantaneo). */
@property --reveal-pct {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

/* Niente bordo/angoli/ombra da "screenshot in una card" (D89): l'immagine
   riempie la sua colonna come un visual vero, non un riquadro-prodotto. */
.hero__reveal-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 8 / 5;
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-lift);
  --reveal-pct: 0%;
  /* Il passaggio schizzo -> sito vero scorre da sinistra (vedi @property). */
  transition: --reveal-pct 1100ms cubic-bezier(0.65, 0, 0.35, 1);
}

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

.hero__reveal-final {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero__reveal-sketch {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--reveal-pct)) 0 0);
}

.hero__reveal-sketch-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__reveal-state {
  display: flex;
  justify-content: center;
  gap: var(--space-medium);
  margin-top: var(--space-small);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-small);
}

.hero__reveal-state span {
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.hero__reveal-state .is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

@media (scripting: none) {
  .hero__reveal-sketch,
  .hero__reveal-state {
    display: none;
  }
}

/* ==========================================================================
   Hero delle pagine interne: la stessa firma della home, senza ripeterla
   ========================================================================== */
.hero__title-page {
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
}

/* Pagine di servizio (404, cookie, grazie, privacy): titolo semplice, senza
   classe propria — centrato come tutte le altre hero. */
.hero > .container > h1 {
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 64em) {
  /* Da computer il titolo sta un po' più in basso, con aria sotto
     l'intestazione (D122). Da telefono resta com'è. */
  .hero {
    padding-block: var(--space-xlarge) var(--space-2xlarge);
  }

  /* Hero a lato: il testo a sinistra, lo schizzo che diventa sito a destra.
     Il testo resta centrato nella sua colonna, come in tutto il sito. */
  .hero__inner--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: var(--space-2xlarge);
  }

  .hero__inner--split .hero__title {
    max-width: 14ch;
    font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.5rem);
  }

  .hero__inner--split .hero__text {
    max-width: 34ch;
  }

  .hero__inner--split .hero__reveal {
    max-width: none;
    margin-inline: 0;
  }
}

/* ==========================================================================
   Fascia promesse + griglie vecchie
   .promise-list: le tre righe "Prezzo onesto / Tutto tuo / ..." in chi-siamo.
   ========================================================================== */

.promise-list {
  display: grid;
  gap: var(--space-small);
}

.promise-list__item {
  position: relative;
  padding: var(--space-medium);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-crisp);
}

.promise-list__title {
  margin-bottom: var(--space-3xsmall);
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h4);
}

.promise-list__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

@media (min-width: 48em) {
  .promise-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-medium);
  }
}

.card-grid {
  display: grid;
  gap: var(--space-medium);
}

@media (min-width: 48em) {
  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 64em) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Bento servizi + card prodotto
   Le due card "Due prodotti" (Siti web / Gestionali) nella home.
   ========================================================================== */

.bento {
  display: grid;
  gap: var(--space-medium);
}

.bento__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-large);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 0;
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.bento__card:hover {
  border-left-color: var(--color-accent);
}

.bento__label {
  color: var(--color-accent-hover);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
}

.bento__title {
  margin-top: var(--space-2xsmall);
}

.bento__price {
  margin-top: var(--space-2xsmall);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.bento__description {
  margin-top: var(--space-xsmall);
  color: var(--color-text-muted);
}

.bento__points {
  display: grid;
  gap: var(--space-2xsmall);
  margin-top: var(--space-medium);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.bento__points li {
  display: flex;
  justify-content: center;
  gap: var(--space-2xsmall);
  align-items: flex-start;
  text-align: left;
}

.bento__points li::before {
  content: "✓";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-hover);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
}

.bento__action {
  margin-top: auto;
  padding-top: var(--space-large);
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-large);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.product-card:hover {
  border-left-color: var(--color-accent);
}

.product-card:focus-within {
  border-left-color: var(--color-accent);
}

.product-card__label {
  margin-bottom: var(--space-2xsmall);
  color: var(--color-accent-hover);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
}

.product-card__title {
  margin-bottom: var(--space-2xsmall);
}

.product-card__price {
  margin-bottom: var(--space-xsmall);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.product-card__description {
  margin-bottom: var(--space-medium);
  color: var(--color-text-muted);
}

.product-card__action {
  margin-top: auto;
}

@media (min-width: 64em) {
  /* Larghezze uguali (D90): le due card a proporzioni diverse (D51) davano
     l'impressione di due forme diverse, non di due prodotti pari. */
  .bento {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  /* Con un solo prodotto in vetrina (D101) la card resta a piena
     larghezza invece di lasciare mezza griglia vuota. */
  .bento--single {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Card prezzo
   Le tre card degli abbonamenti in siti-web.html#assistenza e
   #assistenza-gestionali. Box classico con bordo su tutti i lati (non più
   il solo taglio a sinistra di D65: a Simone non convinceva, voleva un
   confronto prezzi più leggibile a colpo d'occhio, il formato più comune).
   Il piano centrale si distingue con un bordo più spesso e uno sfondo
   leggermente tinto, non solo dall'etichetta sopra.
   ========================================================================== */

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-large);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-crisp);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.price-card:hover {
  border-color: var(--color-accent);
}

.price-card--featured {
  background-color: var(--color-accent-soft);
  border: var(--border-width-medium) solid var(--color-accent);
}

.price-card__badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--space-small);
  padding: var(--space-3xsmall) var(--space-xsmall);
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-text-inverse-on-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
}

.price-card__plan {
  margin-bottom: var(--space-2xsmall);
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h3);
  letter-spacing: -0.01em;
}

.price-card__price {
  margin-bottom: var(--space-medium);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
}

.price-card__include-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xsmall);
  margin-bottom: var(--space-medium);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.price-card__include {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-2xsmall);
}

.price-card__include::before {
  content: "✓";
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Griglia di fatti — non un confronto, una lista di cose vere. Niente card
   attorno: un solo elemento in un riquadro non aveva senso quando restava
   l'unico rimasto dopo che il resto del confronto era stato tolto (D46).
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-medium) var(--space-large);
}

.feature-grid__item {
  position: relative;
  padding-left: 2rem;
  color: var(--color-text);
}

.feature-grid__item::before {
  content: "✓";
  position: absolute;
  top: 0.05em;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-hover);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Tabella piani
   La tabella comparativa completa dei tre abbonamenti, usata in privacy.html.
   ========================================================================== */

.plan-table__scroll {
  position: relative;
  overflow-x: auto;
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-crisp);
  background-color: var(--color-surface);
}

.plan-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.plan-table__caption {
  padding: var(--space-small) var(--space-medium);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-align: left;
}

.plan-table th,
.plan-table td {
  padding: var(--space-xsmall) var(--space-small);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.plan-table thead th {
  background-color: var(--color-background-warm);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-table__cell--feature {
  font-weight: var(--font-weight-medium);
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (min-width: 48em) {
  .plan-table {
    min-width: 0;
  }
}

/* ==========================================================================
   Card progetto
   Le card del portfolio, una per demo o lavoro reale.
   ========================================================================== */

.project-card {
  scroll-margin-top: calc(var(--header-height) + var(--space-large));
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.project-card:hover {
  border-left-color: var(--color-accent);
}

.project-card:focus-within {
  border-left-color: var(--color-accent);
}

.project-card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-alt);
  border-bottom: var(--border-width-hairline) solid var(--color-border);
}

.project-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2xsmall);
  padding: var(--space-medium);
}

.project-card__sector {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
}

.project-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
}

.project-card__summary {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.project-card__action {
  margin-top: auto;
  padding-top: var(--space-xsmall);
}

.project-card__link {
  display: inline-block;
  padding-block: 0.6rem;
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.project-card__external-note {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.project-card.is-hidden {
  display: none;
}

[data-show-more-wrap].is-hidden {
  display: none;
}

/* ==========================================================================
   Etichetta
   I badge colorati sulle card (demo, lavoro reale, in lavorazione).
   ========================================================================== */

.badge {
  display: inline-block;
  align-self: flex-start; /* dentro una card a colonna non si allarga a tutta la riga */
  max-width: 100%;
  padding: var(--space-3xsmall) var(--space-small);
  border-radius: var(--radius-crisp);
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14px: si legge anche su telefono */
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  line-height: 1.4;
}

.badge--demo {
  background-color: var(--color-surface-alt);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.badge--real {
  background-color: var(--color-accent-soft);
  border: var(--border-width-hairline) solid var(--color-accent);
  color: var(--color-accent-hover);
}

/* ==========================================================================
   Passi — una linea blu, non più un riquadro con un pallino dentro
   Il cerchio numerato su sfondo bianco era la card SaaS più classica del
   sito. Ora un tratto verticale blu segna il passo, il numero vero (1, 2,
   3 — non più 01/02 con lo zero finto) siede sopra la linea, il titolo e
   il testo stanno a destra. Niente più box: la gerarchia la fa il segno,
   non la scatola.
   ========================================================================== */

.step-list {
  display: grid;
  gap: var(--space-large);
  counter-reset: step;
}

.step-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: start;
  column-gap: var(--space-medium);
  padding-left: var(--space-medium);
  counter-increment: step;
}

/* La linea laterale del passo. È un pezzo a sé (non un bordo) perché da
   browser che lo supportano si disegna dall'alto mentre scorri. */
.step-list__item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background-color: var(--color-accent);
  transform-origin: top;
  transition: background-color var(--duration-base) var(--ease-out);
}

.step-list__item:hover::after {
  background-color: var(--color-accent-hover);
}

.step-list__item::before {
  content: counter(step);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.step-list__title {
  margin-bottom: var(--space-3xsmall);
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h4);
  letter-spacing: -0.01em;
}

.step-list__text {
  color: var(--color-text-muted);
}

@media (min-width: 64em) {
  .step-list--split {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-medium);
  }
}

/* ==========================================================================
   Confronto onesto
   Paragrafi centrati sotto un titolo, riusati in più pagine (chi-siamo, gestionali).
   ========================================================================== */

#chi-siamo > .container > p,
#onesta > .container > p,
#dove-siamo > .container > p,
#codice-a-mano > .container > p,
#siamo-giovani > .container > h3,
#siamo-giovani > .container > p.push-small {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   Accordion — apertura fluida
   ========================================================================== */

.accordion {
  display: grid;
  gap: var(--space-xsmall);
}

.accordion__item {
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-crisp);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.accordion__item:hover {
  border-color: var(--color-border-strong);
}

.accordion__item.is-open {
  border-color: var(--color-accent);
}

.accordion__heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-small);
  width: 100%;
  padding: var(--space-small) var(--space-medium);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-crisp);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: left;
  transition: color var(--duration-fast) var(--ease-out);
}

.accordion__trigger:hover {
  color: var(--color-accent-hover);
}

.accordion__icon {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-hover);
  transition:
    transform var(--duration-base) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  border-radius: 2px;
}

.accordion__icon::before {
  width: 0.8rem;
  height: 2px;
}

.accordion__icon::after {
  width: 2px;
  height: 0.8rem;
}

.accordion__item.is-open .accordion__icon {
  transform: rotate(135deg);
  background-color: var(--color-accent);
  color: var(--color-text-inverse-on-accent);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__panel p {
  padding: 0 var(--space-medium) var(--space-medium);
  color: var(--color-text-muted);
}

.accordion__panel[hidden] {
  display: none;
}

/* ==========================================================================
   Modulo
   Il modulo di contatto di contatti.html.
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-medium);
  padding: var(--space-large);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-crisp);
}

.form__field {
  display: grid;
  gap: var(--space-3xsmall);
}

.form__label {
  font-weight: var(--font-weight-semibold);
}

.form__required {
  color: var(--color-error);
}

.form__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: var(--space-xsmall) var(--space-small);
  min-height: 3rem;
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-crisp);
  font-size: 1rem;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(32, 112, 161, 0.2);
}

.form__textarea {
  min-height: 8rem;
  resize: vertical;
}

.form__field.is-invalid .form__input,
.form__field.is-invalid .form__textarea,
.form__field.is-invalid .form__select {
  border-width: var(--border-width-medium);
  border-color: var(--color-error);
  background-color: var(--color-error-soft);
}

.form__error {
  display: none;
  color: var(--color-error);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-small);
}

.form__field.is-invalid .form__error {
  display: block;
}

.form__consent {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-2xsmall);
  align-items: start;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.form__checkbox {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-accent);
}

.form__status {
  display: none;
  padding: var(--space-xsmall) var(--space-small);
  border-radius: var(--radius-crisp);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.form__status.is-error {
  display: block;
  background-color: var(--color-error-soft);
  border: var(--border-width-hairline) solid var(--color-error);
  color: var(--color-error);
}

/* ==========================================================================
   Nota
   Box con un bordo blu a sinistra, per un'informazione da far notare.
   ========================================================================== */

.note {
  padding: var(--space-small) var(--space-medium);
  background-color: var(--color-background-warm);
  border: var(--border-width-hairline) solid var(--color-border);
  border-left: var(--border-width-medium) solid var(--color-accent);
  border-radius: 0 var(--radius-crisp) var(--radius-crisp) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

/* La nota di chiusura degli abbonamenti (siti-web.html) segue i tre prezzi,
   ora centrati: resta centrata anche lei invece di restare a sinistra.
   Stesso trattamento per la nota "E se serve altro?" di gestionali.html. */
#assistenza .note,
#cosa .note,
#tempi .note,
#team .note {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

/* Il paragrafo-guida sopra le fasce orarie di risposta (contatti.html):
   stesso trattamento delle altre intro, centrato sulla pagina. */
#tempi > .container > .text-lead {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

/* Modificatore riusabile per le note di chiusura fuori da una sezione con
   id proprio (dove non ha senso un selettore per id). */
.note--centered {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   Chiamata all'azione — pannello scuro con carta millimetrata
   ========================================================================== */

.call-to-action {
  position: relative;
  padding-block: var(--section-spacing);
}

.call-to-action__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 1.4rem + 4vw, 4rem);
  background-color: var(--color-surface-alt);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-soft);
  color: var(--color-text);
}

.call-to-action__title {
  position: relative;
  max-width: 22ch;
  margin-inline: auto;
  color: var(--color-text);
  text-align: center;
}

.call-to-action__text {
  position: relative;
  margin-top: var(--space-medium);
  margin-inline: auto;
  max-width: 52ch;
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  color: var(--color-text-muted);
  text-align: center;
}

.call-to-action__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xsmall);
  margin-top: var(--space-large);
}

/* Una sola colonna centrata, non più testo a sinistra e bottoni a destra:
   la stessa composizione del pannello della home, ovunque. */
.call-to-action__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-large);
}

/* ==========================================================================
   Piè di pagina — la facciata di un negozio
   La serranda (.shopfront__roll) si alza mentre arrivi in fondo alla pagina:
   --shutter-open (da 0 a 1) lo scrive init_shopfront() in main.js. Senza
   JavaScript, o con "riduci movimento", vale 1: negozio aperto, tutto visibile.
   I grigi del metallo e il crema del cartellino sono colori di materiale e
   vivono solo qui; il resto usa i token.
   ========================================================================== */

.site-footer {
  padding-block: var(--space-xlarge) var(--space-large);
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
  overflow: hidden; /* il marciapiede sporge di poco oltre il contenitore */
}

.shopfront {
  position: relative;
  max-width: 60rem;
  margin-inline: auto;
  padding: var(--space-2xsmall) var(--space-2xsmall) 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.07) 5rem); /* il muro sfuma nel fondo, senza stacco */
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
}

/* L'insegna: si illumina quando il negozio è aperto. */
.shopfront__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.1rem 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.4rem 1rem 0.45rem;
  background-color: #101238;
  border: var(--border-width-medium) solid #3b3d8a;
  border-radius: var(--radius-crisp);
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.6s, border-color 0.6s, box-shadow 0.6s;
}

.shopfront__logo {
  width: 1.8rem;
  height: 1.8rem;
  opacity: 0.6;
  transition: opacity 0.6s;
}

.shopfront__name {
  font-family: var(--font-logo);
  font-size: 1.5rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.shopfront__motto {
  flex-basis: 100%;
  font-size: 0.875rem;
  text-align: center;
}

.shopfront.is-open .shopfront__sign {
  border-color: #9fdcf0;
  box-shadow: 0 0 26px rgba(127, 227, 255, 0.45), inset 0 0 18px rgba(127, 227, 255, 0.18);
  color: var(--color-text-inverse);
}

.shopfront.is-open .shopfront__logo {
  opacity: 1;
}

.shopfront.is-open .shopfront__name {
  text-shadow: 0 0 0.45em rgba(127, 227, 255, 0.9);
}

/* La tenda a righe, con il bordo a festoni. */
.shopfront__awning {
  position: relative;
  z-index: 2;
  height: 2rem;
  margin: var(--space-2xsmall) -0.3rem -0.5rem;
  background: repeating-linear-gradient(90deg, #f4f6fb 0 2.4rem, var(--color-accent) 2.4rem 4.8rem);
  border-radius: var(--radius-crisp) var(--radius-crisp) 0 0;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 0.6rem) no-repeat, radial-gradient(circle at 50% 0, #000 0.6rem, transparent 0.62rem) bottom left / 1.2rem 0.6rem repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 0.6rem) no-repeat, radial-gradient(circle at 50% 0, #000 0.6rem, transparent 0.62rem) bottom left / 1.2rem 0.6rem repeat-x;
}

/* Il vano: guide ai lati, cassonetto in alto. */
.shopfront__bay {
  position: relative;
  overflow: hidden;
  background-color: #05061c;
  border: 0.35rem solid #14153f;
  border-top: 1.2rem solid #0b0c2e;
  border-bottom: 0;
}

/* L'interno: la luce si accende man mano che la serranda sale. */
.shopfront__shop {
  display: grid;
  gap: 0.35rem;
  padding: 1.65rem 0.35rem 0; /* in alto, lo spazio della barra quando è alzata */
  background-color: #14153f;
  filter: brightness(calc(0.4 + 0.6 * var(--shutter-open, 1)));
}

.shopfront__glass,
.shopfront__door {
  position: relative;
  padding: var(--space-small);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.13) 0 13%, transparent 13% 33%, rgba(255, 255, 255, 0.06) 33% 39%, transparent 39%),
    radial-gradient(90% 70% at 50% 0, rgba(255, 221, 150, 0.28), transparent 70%),
    #171a4d;
  color: var(--color-text-inverse);
}

.shopfront__glass {
  display: grid;
  align-content: center;
  gap: var(--space-2xsmall);
  border-bottom: 0.6rem solid #0b0c2e; /* lo zoccolo sotto la vetrina */
}

.shopfront__vinyl {
  max-width: none;
  margin: 0;
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.25rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1;
}

.shopfront__contacts,
.shopfront__pages {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shopfront__contacts {
  display: grid;
  gap: 0.15rem var(--space-small);
}

.shopfront__contact {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3rem; /* area di tocco comoda col pollice */
  color: var(--color-text-inverse);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.shopfront__icon {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shopfront__contact-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.shopfront__contact-text small {
  color: #9fdcf0;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
}

/* Il colore va ripetuto: altrimenti vince a:hover (navy) e il testo
   sparisce sul vetro scuro. */
.shopfront__contact:hover,
.shopfront__page:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

/* La porta, con il cartellino appeso. */
.shopfront__door {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-small);
  border: 0.3rem solid #0b0c2e;
  border-bottom: 0;
}

.shopfront__plate {
  position: relative;
  margin-top: 1.2rem;
  padding: 0.3rem 0.8rem 0.4rem;
  background-color: #fbf6ea;
  border: var(--border-width-medium) solid var(--color-heading);
  border-radius: var(--radius-crisp);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
  color: var(--color-heading);
  font-size: 1.05rem;
  font-weight: var(--font-weight-extrabold);
  transform: rotate(-3deg);
  transform-origin: 50% -1.6rem;
}

.shopfront__plate::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 3.4rem;
  height: 1.6rem;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #cfd3e6 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), #cfd3e6 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right / 50% 100% no-repeat;
  transform: translateX(-50%);
}

.shopfront__pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-2xsmall);
}

.shopfront__page {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

/* La serranda. Da alzata resta visibile solo la barra in fondo. */
.shopfront__roll {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
  padding-bottom: 1.4rem;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 6% 94%, rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(180deg, #d5d9df 0 0.35rem, #b9bec7 0.35rem 0.85rem, #8e949e 0.85rem 0.95rem, #e6e9ed 0.95rem 1.1rem);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.65);
  transform: translateY(calc(var(--shutter-open, 1) * (1.4rem - 100%)));
  will-change: transform;
}

.shopfront.is-open .shopfront__roll {
  pointer-events: none;
}

.shopfront__paint {
  color: var(--color-heading);
  font-family: var(--font-logo);
  font-size: clamp(3.8rem, 15vw, 9rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.04em;
  line-height: 1;
  mix-blend-mode: multiply;
  opacity: 0.82;
  transform: rotate(-5deg);
}

.shopfront__hint {
  padding: 0.2rem 0.8rem;
  background-color: var(--color-heading);
  border-radius: var(--radius-pill);
  color: var(--color-text-inverse);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
}

/* La barra in fondo alla serranda, con la maniglia e il lucchetto. */
.shopfront__rail {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.4rem;
  background: linear-gradient(#6c727c, #3b4049 60%, #23262d);
}

.shopfront__rail::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 50%;
  width: 5rem;
  height: 0.5rem;
  background-color: #14161b;
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
}

.shopfront__rail::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  right: 12%;
  width: 0.9rem;
  height: 1rem;
  background-color: #d8a93a;
  border-radius: 2px;
  box-shadow: 0 -0.35rem 0 -0.2rem #d8a93a, 0 2px 3px rgba(0, 0, 0, 0.5);
}

/* Il marciapiede. */
.shopfront__step {
  height: 1rem;
  margin-inline: -0.8rem;
  background: linear-gradient(#aeb4bd, #7d838d);
  border-radius: 2px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
  .shopfront__roll {
    transition: transform 0.12s linear;
  }

  .shopfront.is-open .shopfront__plate {
    animation: shopfront-swing 1.6s ease-out;
  }
}

@keyframes shopfront-swing {
  0% { transform: rotate(-3deg); }
  20% { transform: rotate(9deg); }
  45% { transform: rotate(-8deg); }
  70% { transform: rotate(2deg); }
  100% { transform: rotate(-3deg); }
}

@media (min-width: 48em) {
  .shopfront {
    padding: var(--space-small) var(--space-medium) 0;
  }

  .shopfront__sign {
    padding: 0.5rem 1.6rem 0.6rem;
  }

  .shopfront__logo {
    width: 2.2rem;
    height: 2.2rem;
  }

  .shopfront__name {
    font-size: 1.9rem;
  }

  .shopfront__motto {
    flex-basis: auto;
    font-size: var(--font-size-label);
  }

  .shopfront__awning {
    height: 2.6rem;
    margin-inline: -0.6rem;
  }

  .shopfront__bay {
    border-width: 0.55rem;
    border-top-width: 1.5rem;
    border-bottom: 0;
  }

  .shopfront__shop {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 0.5rem;
    padding: 1.75rem 0.5rem 0;
  }

  .shopfront__glass,
  .shopfront__door {
    padding: var(--space-medium);
  }

  .shopfront__glass {
    gap: var(--space-small);
    min-height: 19rem;
    border-bottom-width: 2.2rem;
  }

  .shopfront__door {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    border-width: 0.45rem;
    border-bottom: 0;
  }

  /* la maniglia della porta */
  .shopfront__door::after {
    content: "";
    position: absolute;
    top: 52%;
    left: 0.5rem;
    width: 0.4rem;
    height: 4rem;
    background: linear-gradient(90deg, #f2f3f6, #8c929c);
    border-radius: 3px;
  }

  .shopfront__plate {
    margin-top: 1.6rem;
    padding: 0.35rem 1.2rem 0.45rem;
    font-size: 1.25rem;
  }

  .shopfront__pages {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding-left: var(--space-small);
  }

  .shopfront__step {
    height: 1.1rem;
    margin-inline: -1.4rem;
  }
}

/* Solo da computer i contatti stanno su due colonne: prima l'email andrebbe a capo. */
@media (min-width: 64em) {
  .shopfront__contacts {
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  }
}

/* Telefoni molto stretti: il cartellino sta sopra le pagine, non di fianco. */
@media (max-width: 23.99em) {
  .shopfront__door {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-2xsmall);
  }

  .shopfront__pages {
    width: 100%;
  }
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* 44px: area di tocco comoda anche col pollice */
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

/* Copyright a sinistra, Privacy e Cookie a destra, sulla stessa riga. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-medium);
  max-width: 60rem;
  margin: var(--space-medium) auto 0;
}

.site-footer__legal > span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.site-footer__legal a:first-of-type {
  margin-left: auto;
}

/* Su telefono la bolla WhatsApp fissa sta sopra l'ultima riga: spazio in
   fondo al piè di pagina perché non copra Privacy e Cookie. */
@media (max-width: 79.99em) {
  .site-footer {
    padding-bottom: calc(var(--space-2xlarge) + env(safe-area-inset-bottom, 0px));
  }

  .site-footer__legal {
    padding-right: 4.5rem;
  }
}

/* ==========================================================================
   Scheda persona
   Le tre card del team in chi-siamo.html (Noah, Adriano, Simone).
   ========================================================================== */

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xsmall);
  padding: var(--space-large);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-crisp);
  text-align: center;
}

.person-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  margin-bottom: var(--space-2xsmall);
  overflow: hidden;
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-text-inverse-on-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-extrabold);
}

/* Pagina Chi siamo: le persone sono il contenuto principale, foto più grandi. */
.card-grid--team .person-card__avatar {
  width: 9.5rem;
  height: 9.5rem;
}

.person-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-card__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
}

.person-card__role {
  color: var(--color-accent-hover);
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
}

.person-card__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.person-card__link-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xsmall);
  margin-top: auto;
  padding-top: var(--space-xsmall);
  font-size: var(--font-size-small);
}

.person-card__link-list a {
  display: inline-block;
  padding: 0.7rem 0.4rem; /* area di tocco da 44px */
}

/* ==========================================================================
   Movimenti legati allo scorrimento
   Pochi e piccoli: servono a dare un filo alla pagina mentre scorri, non a
   stupire. Solo CSS (nessuno script), solo dove il browser li supporta e
   mai con "riduci movimento". Dove non ci sono, la pagina è già completa.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* La linea di ogni passo si disegna dall'alto mentre il passo entra. */
    .step-list__item::after {
      animation: scroll-line linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }

    /* Il numero del passo si accende insieme alla linea. */
    .step-list__item::before {
      animation: scroll-number linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }

    /* I punti della scheda arrivano uno dopo l'altro, da sinistra. */
    .bento__points li {
      animation: scroll-point linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    /* La foto del lavoro vero si assesta mentre entra. */
    .project-card__image {
      animation: scroll-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    /* Da computer lo schizzo scende un po' più piano del testo. */
    .hero__reveal {
      animation: scroll-lag linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 60vh;
    }
  }
}

@keyframes scroll-line {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes scroll-number {
  from { opacity: 0.15; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scroll-point {
  from { opacity: 0.2; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scroll-settle {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

@keyframes scroll-lag {
  from { transform: translateY(0); }
  to   { transform: translateY(28px); }
}

/* ==========================================================================
   Notte — il fondo blu, su tutte le pagine
   .scene-bg è lo sfondo fisso (un <div> vuoto subito dopo <body>): blu notte
   pieno con una sola luce ferma dall'alto, come quella di un'insegna. Niente
   aloni che si muovono. Lo usano la home (.home-scenes) e le pagine interne
   (.night).
   Sulle pagine interne i colori cambiano solo dentro <main>: intestazione e
   menu restano chiari. I componenti leggono gli stessi token di sempre.
   ========================================================================== */

/* Anche la radice è blu: oltre i bordi (rimbalzo dello scorrimento su
   iPhone, barre di Safari) non deve mai spuntare il bianco. */
html:has(.scene-bg) {
  background-color: #0D0E3A;
}

.night,
.home-scenes {
  --l-ink: #0d0e3a;
  background-color: var(--l-ink);
}

.scene-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  /* Su iPhone la finestra cresce quando Safari ritira le barre: lvh è
     l'altezza massima dello schermo, più un margine per il rimbalzo. */
  height: 120vh;
  height: calc(100lvh + 8rem);
  background:
    radial-gradient(120% 62% at 50% 0, rgba(32, 112, 161, 0.5), rgba(32, 112, 161, 0) 70%),
    var(--l-ink);
  pointer-events: none;
}

/* ==========================================================================
   Tenda — la tenda a righe del negozio, in cima a ogni pagina
   Stesso disegno di quella nel piè di pagina. Sta in cima al documento e
   scorre via con il contenuto; l'intestazione ci passa sopra.
   ========================================================================== */

.awning {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(var(--header-height) + var(--space-large));
  background: repeating-linear-gradient(90deg, #f4f6fb 0 3rem, var(--color-accent) 3rem 6rem);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 0.75rem) no-repeat, radial-gradient(circle at 50% 0, #000 0.75rem, transparent 0.77rem) bottom left / 1.5rem 0.75rem repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 0.75rem) no-repeat, radial-gradient(circle at 50% 0, #000 0.75rem, transparent 0.77rem) bottom left / 1.5rem 0.75rem repeat-x;
  pointer-events: none;
}

@media (max-width: 47.99em) {
  .awning {
    height: calc(var(--header-height) + var(--space-medium));
    background-size: auto;
    background-image: repeating-linear-gradient(90deg, #f4f6fb 0 2.25rem, var(--color-accent) 2.25rem 4.5rem);
  }
}

.night main,
.night .site-footer,
.home-scenes .site-footer {
  position: relative;
  z-index: 1;
}

/* Il negozio poggia direttamente sul blu della pagina, senza fascia propria. */
.night .site-footer,
.home-scenes .site-footer {
  background-color: transparent;
  border-radius: 0;
}

.night main {
  color-scheme: dark;
  --color-background: transparent;
  --color-background-warm: transparent;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-alt: rgba(255, 255, 255, 0.1);
  --color-text: rgba(255, 255, 255, 0.92);
  --color-text-muted: rgba(255, 255, 255, 0.78);
  --color-heading: #FFFFFF;
  --color-border: rgba(255, 255, 255, 0.2);
  --color-border-strong: rgba(255, 255, 255, 0.5);
  --color-accent: #7FC8D8;                  /* azzurro chiaro: link ed evidenze sul blu notte */
  --color-accent-hover: #B4E3EE;
  --color-accent-active: #FFFFFF;
  --color-accent-soft: rgba(127, 200, 216, 0.16);
  --color-text-inverse-on-accent: #0D0E3A;  /* testo scuro sopra l'azzurro pieno */
  --color-success: #7BE0A8;
  --color-error: #FF9AA2;
  --color-error-soft: rgba(255, 154, 162, 0.14);
  --shadow-lift: none;
  --shadow-float: 0 20px 48px rgba(0, 0, 0, 0.4);
  color: var(--color-text);
}

/* Titoli grandi e stretti, come nella home. */
.night .hero__title,
.night .hero__title-page,
.night .hero > .container > h1 {
  font-size: clamp(3.2rem, 1.4rem + 7vw, 7rem);
  letter-spacing: -0.005em;
  line-height: 0.95;
  text-wrap: balance;
}

.night .section__title {
  text-wrap: balance;
}

/* I bottoni restano quelli della home: blu pieno con testo bianco, e
   contorno bianco per quello secondario. */
.night main .button--primary {
  background-color: #2070A1;
  border-color: #2070A1;
  color: #FFFFFF;
}

.night main .button--primary:hover {
  background-color: #2B86BD;
  border-color: #2B86BD;
  color: #FFFFFF;
}

.night main .button--secondary,
.night main .button--ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #FFFFFF;
}

.night main .button--secondary:hover,
.night main .button--ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.night main ::placeholder {
  color: rgba(255, 255, 255, 0.55);
}


/* ==========================================================================
   Apertura — la serranda che si alza al primo arrivo
   Un <div class="loader"> subito dopo <body>, su ogni pagina. Sopra una
   barra da finestra del browser con l'indirizzo, sotto la serranda con
   "mockly" a vernice: si alza e scopre il sito, come il negozio in fondo
   alla pagina. Dura circa un secondo e mezzo, poi sparisce da sola: è tutto
   CSS, quindi non resta mai bloccata.
   Si vede una volta per visita: una riga di script subito dopo il <div>
   mette "is-returning" sulla radice quando sei già passato di qui.
   ========================================================================== */

.loader {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    overflow: hidden;
    pointer-events: none;
    animation: loader-gone 0s linear 1.75s forwards;
  }

  .is-returning .loader {
    display: none;
  }

  /* la barra del browser: resta un attimo, poi sale via */
  .loader__bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-small);
    padding: 0.6rem var(--space-small);
    padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
    background-color: #dfe3ea;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    animation: loader-bar 0.45s cubic-bezier(0.6, 0, 0.8, 0.2) 1.25s forwards;
  }

  .loader__dots {
    flex: none;
    width: 3.1rem;
    height: 0.75rem;
    background:
      radial-gradient(circle at 0.375rem 50%, #b6bcc7 0.36rem, transparent 0.38rem),
      radial-gradient(circle at 1.55rem 50%, #b6bcc7 0.36rem, transparent 0.38rem),
      radial-gradient(circle at 2.725rem 50%, #b6bcc7 0.36rem, transparent 0.38rem);
  }

  .loader__url {
    flex: 1;
    max-width: 30rem;
    margin-inline: auto;
    padding: 0.35rem 1rem;
    background-color: #f6f7fa;
    border-radius: var(--radius-pill);
    color: #2a2f38;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    text-align: center;
  }

  /* la serranda: un piccolo scatto verso il basso, poi su */
  .loader__roll {
    position: relative;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.5rem;
    padding-bottom: 1.6rem;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 6% 94%, rgba(0, 0, 0, 0.25)),
      repeating-linear-gradient(180deg, #d5d9df 0 0.35rem, #b9bec7 0.35rem 0.85rem, #8e949e 0.85rem 0.95rem, #e6e9ed 0.95rem 1.1rem);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.6);
    animation: loader-roll 1s cubic-bezier(0.65, 0, 0.3, 1) 0.4s forwards;
    will-change: transform;
  }

  .loader__paint {
    color: #16174F;
    font-family: var(--font-logo);
    font-size: clamp(4.5rem, 20vw, 13rem);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.04em;
    line-height: 1;
    mix-blend-mode: multiply;
    opacity: 0.82;
    transform: rotate(-5deg);
  }

  .loader__hint {
    padding: 0.25rem 0.9rem;
    background-color: #16174F;
    border-radius: var(--radius-pill);
    color: #FFFFFF;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
  }

  .loader__rail {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1.6rem;
    background: linear-gradient(#6c727c, #3b4049 60%, #23262d);
  }

  .loader__rail::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    width: 6rem;
    height: 0.55rem;
    background-color: #14161b;
    border-radius: var(--radius-pill);
    transform: translateX(-50%);
  }
}

@keyframes loader-roll {
  0% { transform: translateY(0); }
  14% { transform: translateY(0.5rem); }
  100% { transform: translateY(-105%); }
}

@keyframes loader-bar {
  to { transform: translateY(-110%); }
}

@keyframes loader-gone {
  to { visibility: hidden; }
}