/* ============================================================================
   MITA SOLUTIONS — tema e componenti di pagina
   ----------------------------------------------------------------------------
   Variante SCURA del design system Maskai (css/style.css, tema Cobalto).

   PERCHE' SCURO
   Maskai Agency lavora sulla punta dell'iceberg: quello che si vede, su fondo
   bianco. Mita Solutions lavora sotto la linea di galleggiamento: prenotazioni,
   agende, compensi, conti, dati. Stessa famiglia di colori, superficie opposta.

   COSA CAMBIA RISPETTO A MASKAI
   · Fondo notte al posto del bianco freddo, su tutta la pagina (tema unico).
   · Accento funzionale: il verde signal. Il cobalto diventa MATERIA: pieni,
     bagliori, blocchi. Su Maskai vale l'esatto contrario.
   · Barra di navigazione piena a tutta larghezza con filetto, non la pillola
     di vetro flottante.
   · Menu mobile che entra da destra come un cassetto, non che cade dall'alto.

   SISTEMA DI FORME (regola dichiarata)
     bottoni, input, tag ...... --radius-s  (8px)
     pannelli, moduli, media .. --radius-m  (14px)
     superfici grandi ......... --radius-l  (22px)
   Nessuna pillola: le pillole sono di Maskai.

   INDICE
   00 Token del tema      01 Header e menu        02 Hero
   03 Nastro integrazioni 04 Attriti              05 Moduli e configuratore
   06 Esploratore         07 Metriche             08 Settori
   09 Attivazione         10 FAQ                  11 Chiusura e form
   12 Segnaposto screenshot                       13 Rifiniture
   ========================================================================= */


/* ==========================================================================
   00 · TOKEN DEL TEMA
   --------------------------------------------------------------------------
   Si riscrivono i token di style.css §01: i componenti condivisi (bottoni,
   form, footer, marquee, row-item, reveal) seguono da soli.
   Questo blocco vince sul blocco @supports oklch di style.css per ordine di
   sorgente: @supports non aggiunge specificita'.
   ========================================================================= */

:root {
  /* Superfici, dal fondo alla piu' rialzata */
  --white:             #070f1c;   /* fondo di pagina */
  --paper:             #0b1526;   /* sezione alternata */
  --mist:              #102138;   /* superficie tenue: card, icone, input */
  --surface-dark:      #0d1a2e;   /* footer e blocchi .on-dark */
  --surface-dark-2:    #162943;

  /* Inchiostri */
  --ink:               #eef4ff;   /* testo primario, 16.1:1 sul fondo */
  --ink-soft:          #9db2cf;   /* testo secondario, 7.4:1 sul fondo */
  --text-on-dark:      #eef4ff;
  --text-on-dark-soft: #9db2cf;

  /* Filetti */
  --line:              rgba(238, 244, 255, 0.13);
  --line-dark:         rgba(238, 244, 255, 0.13);

  /* Accento funzionale su notte: azzurro leggibile (link secondari, focus) */
  --cobalt:            #7ea6ff;
  --cobalt-deep:       #a9c6ff;

  /* Materia: il cobalto pieno, superficie e pieno dei bottoni */
  --cobalt-fill:       #1b4bf0;
  --cobalt-fill-deep:  #123fdd;

  /* Il verde resta il segnale del marchio, qui promosso ad accento primario */
  --green-signal:      #7cff9b;
  --night-ink:         #04101f;   /* testo scuro sopra il verde */

  --red-error:         #ff8d7a;
  --overlay:           rgba(4, 10, 20, 0.72);

  --container: 76rem;
  --header-h:  4.25rem;
}

/* La pagina resta scura anche nel rimbalzo di overscroll: niente lampo bianco */
html { background-color: var(--white); }
body { background: var(--white); color: var(--ink); }

::selection { background: var(--green-signal); color: var(--night-ink); }

:focus-visible { outline: 2px solid var(--green-signal); outline-offset: 2px; }

/* --- Icone: sprite inline di Tabler Icons (MIT), tratto ufficiale ---
   Si dimensionano con font-size come facevano le vecchie icone a font,
   quindi tutte le regole che davano una misura al contenitore continuano
   a valere. Lo sprite in cima al body non si vede e non occupa spazio. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
}

/* --- Bottoni: il pieno cobalto resta materia, il verde resta segnale --- */
.btn-primary,
.btn-cobalt {
  background: var(--cobalt-fill);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover,
.btn-cobalt:hover { background: var(--cobalt-fill-deep); }

.btn-signal { background: var(--green-signal); color: var(--night-ink); }
.btn-signal:hover { background: #a6ffbd; }

.btn-secondary { border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { border-color: var(--green-signal); color: var(--green-signal); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-cobalt:hover { box-shadow: 0 14px 30px -14px rgba(27, 75, 240, 0.85); }
  .btn-signal:hover { box-shadow: 0 14px 30px -16px rgba(124, 255, 155, 0.5); }
  .btn-secondary:hover { box-shadow: none; }
}

/* --- Form su fondo notte ---
   ATTENZIONE: qui si usa background-COLOR, mai la shorthand `background`.
   La shorthand azzera anche immagine, misura e posizione: e' cosi' che la
   freccia del select era esplosa a tutta cella, disegnando un triangolone
   chiaro al posto del chevron. */
.input { background-color: var(--mist); border-color: var(--line); color: var(--ink); }
.input::placeholder { color: var(--ink-soft); }
.input:hover { border-color: rgba(238, 244, 255, 0.28); }
.input:focus-visible { outline-color: var(--green-signal); border-color: var(--green-signal); }
/* Le <option> sono disegnate dal sistema: su tema scuro vanno vestite a mano */
.input option { background-color: var(--paper); color: var(--ink); }

/* Sotto i 430px la voce piu' lunga arrivava sotto il chevron e si tagliava
   a meta' parola: si stringe il corpo e si recupera spazio a destra. */
@media (max-width: 430px) {
  select.input {
    font-size: 0.9375rem;
    padding-right: 2.25rem;
    background-position: right 0.75rem center;
  }
}

/* Chevron come immagine unica: una sola regola da tenere allineata al tema */
select.input {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%239db2cf' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

.panel { background: var(--paper); border-color: var(--line); }
.on-paper { background: var(--paper); }
.on-dark { background: var(--surface-dark); color: var(--ink); }

.label { color: var(--green-signal); }
.link, .prose a { color: var(--green-signal); }
.link:hover, .prose a:hover { color: var(--cobalt-deep); }

.rule { border-top-color: var(--line); }

/* style.css disegna lo skip link con background:--ink e color:--text-on-dark.
   Su tema chiaro sono due colori opposti, qui diventerebbero lo stesso bianco:
   il primo elemento raggiungibile da tastiera sparirebbe. */
.skip-link { background: var(--green-signal); color: var(--night-ink); }

.form-success { background: var(--mist); border-color: var(--green-signal); }
.field-error { color: var(--red-error); }

.u-signal { background-size: 100% 0.16em; }

/* Footer: un gradino sopra il fondo, non un blocco cobalto come in Maskai */
.site-footer { background: var(--surface-dark); border-top: 1px solid var(--line); }
.site-footer__heading { color: var(--green-signal); }

/* Firma di chi fa il prodotto: Mita e' di Maskai, e si vede */
.site-footer__by { font-size: var(--size-caption); color: var(--ink-soft); }
.site-footer__by a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) ease;
}
.site-footer__by a:hover { color: var(--green-signal); }
.site-footer__list a:hover { color: var(--green-signal); }
/* Su telefono anche i link del footer devono essere bersagli veri: erano
   alti 30px, sotto la soglia pratica dei 44. */
@media (max-width: 767.98px) {
  .site-footer__list { gap: 0; }
  .site-footer__list a,
  .site-footer__list span { display: block; padding-block: 0.6rem; }
}


/* ==========================================================================
   01 · HEADER E MENU
   --------------------------------------------------------------------------
   Barra piena a tutta larghezza, filetto in basso quando si scorre. Le voci
   hanno un trattino verde che cresce da sinistra. L'azione principale e' un
   bottone in outline, separato dalle voci da un filetto verticale.
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  height: var(--header-h);
  padding-block: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}
.site-header.is-scrolled {
  background: rgba(7, 15, 28, 0.86);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.site-header .container { max-width: var(--container); }
/* style.css §15 stringe la testata a --space-m sotto i 900px: qui la barra
   e' a tutta larghezza e deve stare sulla stessa colonna del contenuto. */
@media (max-width: 899px) {
  .site-header .container { padding-inline: var(--gutter); }
}

/* Si annullano le regole della pillola di vetro di Maskai (style.css §15).
   La variante .is-scrolled va nominata per esteso: in style.css ha
   specificita' (0,3,0) e batterebbe il selettore semplice qui sotto,
   riportando una barra quasi bianca sopra la pagina scura. */
.site-header .site-nav,
.site-header.is-scrolled .site-nav {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-nav {
  height: var(--header-h);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.site-nav::before,
.site-nav::after { content: none; }

.site-nav__logo { min-width: 0; padding-inline: 0; }

.site-nav__links { gap: clamp(1.25rem, 2.4vw, 2.25rem); }

.site-nav__link {
  padding: 0.5rem 0;
  border-radius: 0;
  font-size: 0.9375rem;
  font-weight: 560;
  color: var(--ink-soft);
}
.site-nav__link::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 1.5px;
  background: var(--green-signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { color: var(--ink); }
.site-nav__link:hover::before { transform: scaleX(1); }
.site-nav__link[aria-current="page"] { color: var(--ink); }
.site-nav__link[aria-current="page"]::before { transform: scaleX(1); }
.site-nav__link[aria-current="page"]::after { display: none; }

/* Filetto verticale fra le voci e l'azione: il dettaglio che questa barra
   ha e la pillola di Maskai non puo' avere. */
.site-nav__actions { gap: var(--space-m); }
@media (min-width: 900px) {
  .site-nav__actions::before {
    content: "";
    width: 1px;
    height: 1.5rem;
    background: var(--line);
  }
}

.site-nav .btn--nav {
  min-height: 40px;
  padding-inline: 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.site-nav .btn--nav:hover {
  background: transparent;
  border-color: var(--green-signal);
  color: var(--green-signal);
  box-shadow: none;
}

/* Pulsante menu: due tratti, non tre. Diventa una croce all'apertura. */
.nav-toggle { gap: 7px; background: transparent; color: var(--ink); }
.nav-toggle__bar { width: 24px; }
/* Croce di chiusura. I selettori partono dal FONDO (:last-child) perche' nel
   markup i due tratti sono preceduti dall'etichetta per gli screen reader:
   contando dall'inizio si colpirebbero gli indici sbagliati, ed e' proprio
   il bug che lasciava una sola stanghetta al posto della croce. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-last-child(2) {
  opacity: 1;
  transform: translateY(4.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  opacity: 1;
  transform: translateY(-4.5px) rotate(-45deg);
}

/* Menu mobile: cassetto da destra */
.nav-overlay {
  background: var(--paper);
  color: var(--ink);
  position: fixed;
  /* In orizzontale su un telefono le voci non ci stanno: senza scroll una
     voce finiva sopra il bordo e i contatti sotto, irraggiungibili. `safe
     center` centra solo finche' c'e' spazio, poi ancora in alto invece di
     tagliare da tutte e due le parti. */
  align-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + var(--space-2xl)) var(--gutter)
           max(var(--space-3xl), env(safe-area-inset-bottom));
  transform: translateX(100%);
}
.nav-overlay.is-open { transform: translateX(0); }
.nav-overlay__links { gap: var(--space-xs); }
/* Bersaglio da 44px e riga cliccabile per intero, non solo sulle lettere */
.nav-overlay__link {
  display: block;
  padding-block: 0.5rem;
  font-size: clamp(1.6rem, 6vw, 2.25rem);
  color: var(--ink);
}
.nav-overlay__link:hover { color: var(--green-signal); }
.nav-overlay__footer { color: var(--ink-soft); }

/* I due recapiti in fondo al cassetto erano rimasti a 24px, sotto i 44 che
   valgono per tutto il resto del menu: sono link, e su un telefono si toccano. */
.nav-overlay__footer a {
  display: inline-block;
  padding-block: 0.625rem;
}

/* Chiusura dentro il cassetto: con aria-modal il resto della pagina sparisce
   per gli screen reader, quindi il comando per uscire deve stare qui dentro. */
.nav-overlay__close {
  position: absolute;
  top: calc((var(--header-h) - 44px) / 2);
  right: var(--gutter);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: 1.6rem;
  transition: color var(--dur-fast) ease;
}
.nav-overlay__close:hover { color: var(--green-signal); }


/* ==========================================================================
   02 · HERO
   --------------------------------------------------------------------------
   Split asimmetrico. Dietro, la rete di nodi in Three.js: chi prenota, chi
   eroga il servizio e chi tiene i conti, uniti dalle stesse linee. E' il
   soggetto del prodotto, non un fondale.
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + clamp(2.5rem, 5vw, 5rem)) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(120% 90% at 16% 6%, rgba(27, 75, 240, 0.32), transparent 58%),
    radial-gradient(80% 70% at 94% 90%, rgba(124, 255, 155, 0.09), transparent 62%),
    linear-gradient(to right, rgba(238, 244, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(238, 244, 255, 0.045) 1px, transparent 1px),
    var(--white);
  background-size: 100% 100%, 100% 100%, 58px 58px, 58px 58px, 100% 100%;
}
/* La griglia sfuma verso il basso: la sezione non finisce di taglio */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--white));
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
  /* La forma si dissolve scendendo: entra netta da sopra la testata e si
     perde nel fondo, come la massa sotto la linea di galleggiamento. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 88%);
}
.hero__canvas.is-ready { opacity: 1; }

/* Colonna unica: il copy a bandiera a sinistra, lo screenshot largo sotto.
   Cosi' il centro e la meta' destra restano liberi per la forma. */
.hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-l);
  justify-items: start;
  max-width: 38rem;
}

.hero__media {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(124, 255, 155, 0.32);
  border-radius: var(--radius-s);
  background: rgba(124, 255, 155, 0.08);
  color: var(--green-signal);
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.hero__title {
  font-size: clamp(2.1rem, 1.35rem + 1.9vw, 2.7rem);
  line-height: 1.06;
  max-width: 26ch;
}

.hero__lead { max-width: 34em; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-m); }

/* Bottone che segue il puntatore di pochi pixel: conferma fisica che
   l'elemento e' il bersaglio principale. Lo scostamento passa da due custom
   property, cosi' lo scale del :active resta intatto. */
.btn--magnetic {
  will-change: transform;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition:
    transform 240ms var(--ease-out),
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn--magnetic:hover { transform: translate(var(--mx, 0px), var(--my, 0px)); }
  .btn--magnetic:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(0.97); }
}


/* ==========================================================================
   03 · NASTRO INTEGRAZIONI
   ========================================================================= */

.integrations { padding-block: var(--space-2xl); }

.integrations__intro {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin-bottom: var(--space-l);
}

/* Il keyframe di style.css torna indietro di 50% + meta' di --space-2xl:
   allargando il gap senza dirglielo, il loop saltava di 8px a ogni giro. */
.marquee__track { --marquee-gap: var(--space-2xl); }
.marquee--tools { border-block: 1px solid var(--line); }
.marquee--tools .marquee__track { --marquee-gap: var(--space-3xl); }
.marquee--tools .marquee__track,
.marquee--tools .marquee__item { gap: var(--marquee-gap); }
.marquee__track {
  animation-name: marquee-mita;
}
/* Lo spostamento e' la larghezza di UN blocco piu' il suo spazio, misurata
   da js/main.js e scritta in --marquee-shift. Il fallback vale finche' il JS
   non ha misurato (o se non parte): meglio un salto raro che un nastro fermo. */
@keyframes marquee-mita {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}
.marquee--tools img {
  height: 26px;
  width: auto;
  opacity: 0.55;
  transition: opacity var(--dur-fast) ease;
}
.marquee--tools img:hover { opacity: 1; }


/* ==========================================================================
   04 · ATTRITI
   ========================================================================= */

.friction__grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 900px) {
  .friction__grid { grid-template-columns: 5fr 6fr; gap: var(--space-3xl); }
}

.friction__list { display: grid; gap: var(--space-l); }

.friction__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  align-items: start;
  padding-bottom: var(--space-l);
  border-bottom: 1px solid var(--line);
}
.friction__item:last-child { border-bottom: 0; padding-bottom: 0; }

.friction__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  background: var(--mist);
  color: var(--green-signal);
  font-size: 1.35rem;
}

.friction__item h3 { font-size: 1.0625rem; font-stretch: 108%; margin-bottom: 0.2rem; }
.friction__item p { color: var(--ink-soft); font-size: 0.9375rem; max-width: 42ch; }


/* ==========================================================================
   05 · MODULI E CONFIGURATORE
   --------------------------------------------------------------------------
   Sei moduli in griglia a ritmo variabile (7/5, 5/7, 6/6): sei celle esatte,
   nessuna casella vuota. Si accendono e la barra in basso tiene il conto
   della configurazione, che finisce nel modulo di contatto.
   ========================================================================= */

.modules__head { display: grid; gap: var(--space-m); max-width: 44rem; margin-bottom: var(--space-2xl); }

.modules__grid { display: grid; gap: var(--space-m); }
@media (min-width: 900px) {
  .modules__grid { grid-template-columns: repeat(12, 1fr); }
  .module--wide   { grid-column: span 7; }
  .module--narrow { grid-column: span 5; }
  .module--half   { grid-column: span 6; }
}

.module {
  position: relative;
  display: grid;
  gap: var(--space-m);
  align-content: start;
  padding: var(--space-xl);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--paper);
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.module.is-selected {
  border-color: rgba(124, 255, 155, 0.55);
  box-shadow: 0 20px 50px -34px rgba(124, 255, 155, 0.5);
}
@media (hover: hover) and (pointer: fine) {
  .module:hover { transform: translateY(-2px); border-color: rgba(238, 244, 255, 0.24); }
}

/* Variazione di superficie: due celle su sei non sono uguali alle altre */
.module--tinted {
  background:
    radial-gradient(130% 130% at 12% 0%, rgba(124, 255, 155, 0.09), transparent 58%),
    var(--mist);
}
.module--deep {
  background:
    radial-gradient(120% 120% at 85% 8%, rgba(124, 255, 155, 0.16), transparent 60%),
    linear-gradient(150deg, var(--cobalt-fill), #0a2caa);
  border-color: transparent;
}
.module--deep .module__desc,
.module--deep .module__features li { color: #cfdcff; }
.module--deep .module__icon { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
.module--deep .module__features .icon { color: var(--green-signal); }

.module__top { display: flex; align-items: center; gap: var(--space-m); }

.module__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-m);
  background: var(--mist);
  color: var(--green-signal);
  font-size: 1.4rem;
}
.module--tinted .module__icon { background: rgba(238, 244, 255, 0.08); }

.module__title { font-size: 1.1875rem; font-stretch: 110%; font-weight: 700; }
.module__desc { color: var(--ink-soft); font-size: 0.9375rem; max-width: 46ch; }

.module__features { display: grid; gap: var(--space-xs); font-size: 0.9375rem; color: var(--ink-soft); }
.module__features li { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: start; }
.module__features .icon { color: var(--green-signal); font-size: 1rem; line-height: 1.5; }

.module__foot { margin-top: auto; padding-top: var(--space-s); }

/* Selettore: una vera checkbox, resa come pulsante */
.module__pick {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 0.9375rem;
  font-weight: 620;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.module__pick:hover { border-color: var(--green-signal); }
.module--deep .module__pick { border-color: rgba(255, 255, 255, 0.38); color: #ffffff; }
.module__pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.module__box {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  font-size: 0.75rem;
  opacity: 0.5;
  transition: background-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.module__box .icon { opacity: 0; transition: opacity var(--dur-fast) ease; }
.module__pick input:checked ~ .module__box { background: currentColor; opacity: 1; }
.module__pick input:checked ~ .module__box .icon { opacity: 1; color: var(--night-ink); }
.module__pick input:focus-visible ~ .module__box { outline: 2px solid var(--green-signal); outline-offset: 2px; }
.module.is-selected .module__pick,
.module--deep.is-selected .module__pick { border-color: var(--green-signal); color: var(--green-signal); }

/* --- Barra della configurazione: a portata mentre scorri la griglia --- */
.quote-bar {
  position: sticky;
  bottom: var(--space-m);
  z-index: var(--z-dropdown);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  margin-top: var(--space-xl);
  padding: var(--space-m) var(--space-l);
  border: 1px solid rgba(238, 244, 255, 0.16);
  border-radius: var(--radius-l);
  background: rgba(11, 21, 38, 0.9);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.quote-bar__read { display: grid; gap: 0.15rem; }
.quote-bar__label { font-size: var(--size-caption); color: var(--ink-soft); }
.quote-bar__total { font-size: 1.3125rem; font-stretch: 114%; font-weight: 720; }
.quote-bar__total span { color: var(--green-signal); font-variant-numeric: tabular-nums; }
.quote-bar.is-empty .quote-bar__total span { color: var(--ink-soft); }
.quote-bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

/* Su telefono la barra deve costare una riga, non un terzo di schermo.
   Prima andava a tre righe e copriva la card che stavi leggendo. Adesso:
   conteggio compatto a sinistra, una sola azione a destra. "Azzera" sparisce,
   e' una comodita' secondaria e le caselle si tolgono a mano. */
@media (max-width: 620px) {
  .quote-bar {
    flex-wrap: nowrap;
    gap: var(--space-s);
    padding: 0.6rem 0.75rem 0.6rem var(--space-m);
    border-radius: var(--radius-m);
  }
  .quote-bar__read { gap: 0; min-width: 0; }
  .quote-bar__label { font-size: 0.75rem; }
  /* "Moduli scelti" e' ridondante: l'etichetta sopra lo dice gia', e su
     375px quelle due parole spingevano il conteggio sotto il bottone. */
  .quote-bar__word { display: none; }
  .quote-bar__total { font-size: 1.0625rem; white-space: nowrap; }
  .quote-bar__actions { flex: none; }
  .quote-bar [data-quote-reset] { display: none; }
  .quote-bar .btn {
    min-height: 44px;
    padding-inline: 0.9rem;
    font-size: 0.9375rem;
  }
}

.modules__note { margin-top: var(--space-l); font-size: var(--size-caption); color: var(--ink-soft); max-width: 62ch; }


/* ==========================================================================
   06 · ESPLORATORE DELLA PIATTAFORMA
   ========================================================================= */

.explorer__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 960px) {
  .explorer__grid { grid-template-columns: 22rem 1fr; gap: var(--space-3xl); align-items: start; }
  .explorer__nav { position: sticky; top: calc(var(--header-h) + var(--space-l)); }
}

.explorer__nav { display: grid; gap: var(--space-2xs); }

.explorer__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  align-items: start;
  width: 100%;
  padding: var(--space-m);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  text-align: left;
  color: var(--ink-soft);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.explorer__tab:hover { background: var(--mist); color: var(--ink); }
.explorer__tab[aria-selected="true"] {
  background: var(--mist);
  border-color: rgba(124, 255, 155, 0.4);
  color: var(--ink);
}
.explorer__tab .icon { font-size: 1.35rem; line-height: 1.35; }
.explorer__tab[aria-selected="true"] .icon { color: var(--green-signal); }
.explorer__tab b { display: block; font-size: 1.0625rem; font-stretch: 108%; font-weight: 700; color: var(--ink); }
.explorer__tab span { font-size: 0.875rem; }

.explorer__panel { display: grid; gap: var(--space-m); }
.explorer__panel[hidden] { display: none; }
.explorer__caption { font-size: 0.9375rem; color: var(--ink-soft); max-width: 62ch; }


/* ==========================================================================
   07 · METRICHE
   ========================================================================= */

.metrics__head { display: grid; gap: var(--space-m); max-width: 42rem; margin-bottom: var(--space-2xl); }

.metrics__grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .metrics__grid { grid-template-columns: repeat(2, 1fr); }
  .metric--lead { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .metrics__grid { grid-template-columns: repeat(3, 1fr); }
}

.metric {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--paper);
}
.metric .icon { font-size: 1.5rem; color: var(--green-signal); }
.metric b { font-size: 1.0625rem; font-stretch: 108%; font-weight: 700; }
.metric p { font-size: 0.9375rem; color: var(--ink-soft); }

/* La metrica capofila: stessa materia delle altre, piu' respiro e il numero
   di riferimento messo in orizzontale invece che in colonna. */
.metric--lead {
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(124, 255, 155, 0.1), transparent 60%),
    var(--mist);
  border-color: rgba(124, 255, 155, 0.28);
}
@media (min-width: 640px) {
  .metric--lead {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-l);
    padding: var(--space-xl);
  }
  .metric--lead .icon { grid-row: span 2; font-size: 2rem; }
  .metric--lead b { font-size: 1.25rem; }
  .metric--lead p { max-width: 52ch; }
}

.metrics__foot { margin-top: var(--space-xl); display: grid; gap: var(--space-l); }


/* ==========================================================================
   08 · SETTORI
   --------------------------------------------------------------------------
   Righe grandi con miniatura in duotone cobalto: le foto diventano materia
   di marca, non stock messo li' a caso.
   ========================================================================= */

.sector { align-items: center; }
@media (min-width: 768px) {
  .sector { grid-template-columns: 9rem 1.15fr 1fr; gap: var(--space-xl); }
}

/* Tessera del settore: pittogramma su cobalto, stessa lingua delle icone
   dei moduli. Quando arrivano le foto vere del cliente basta aggiungere
   la classe has-image e mettere dentro una <img>: il duotone la riporta
   nella palette del marchio.
       <div class="sector__thumb has-image"><img src="img/..." alt="..."></div> */
.sector__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 120% at 20% 12%, rgba(124, 255, 155, 0.2), transparent 62%),
    linear-gradient(150deg, var(--cobalt-fill), #0a247f);
  color: #ffffff;
  font-size: 1.9rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .row-item:hover .sector__thumb { transform: translateY(-2px); }
}

.sector__thumb.has-image > .icon { display: none; }
.sector__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.92);
  mix-blend-mode: luminosity;
  opacity: 0.85;
}
@media (max-width: 767.98px) { .sector__thumb { max-width: 9rem; } }

.sector__desc { color: var(--ink-soft); font-size: 0.9375rem; }
.sector__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sector__tags span {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}


/* ==========================================================================
   09 · ATTIVAZIONE
   ========================================================================= */

.steps { display: grid; gap: var(--space-xl); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-l); }
}

.step { position: relative; display: grid; gap: var(--space-s); padding-top: var(--space-l); }
.step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--line);
}
.step.is-live::before { background: var(--green-signal); }
.step__when { font-size: var(--size-caption); font-weight: 650; color: var(--green-signal); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 1.1875rem; font-stretch: 110%; }
.step p { font-size: 0.9375rem; color: var(--ink-soft); max-width: 32ch; }


/* ==========================================================================
   10 · FAQ
   ========================================================================= */

.faq { display: grid; max-width: 52rem; }

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  padding-block: var(--space-l);
  font-size: 1.0625rem;
  font-stretch: 106%;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--green-signal); }
.faq__item summary .icon {
  flex: none;
  font-size: 1.25rem;
  color: var(--green-signal);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__answer { padding-bottom: var(--space-l); color: var(--ink-soft); max-width: 68ch; }


/* ==========================================================================
   11 · CHIUSURA E FORM
   --------------------------------------------------------------------------
   L'unico blocco di cobalto pieno della pagina: la chiusura e' il punto in
   cui la materia di marca esce allo scoperto.
   ========================================================================= */

.closing {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 10% 0%, rgba(124, 255, 155, 0.15), transparent 55%),
    linear-gradient(150deg, var(--cobalt-fill), #0a247f);
  color: #ffffff;
}

.closing__grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 900px) {
  .closing__grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-3xl); }
}

.closing__title { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.06; }
.closing .lead { color: #cfdcff; }

.closing__facts { display: grid; gap: var(--space-m); margin-top: var(--space-xl); }
.closing__facts div { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; }
.closing__facts .icon { color: var(--green-signal); font-size: 1.25rem; line-height: 1.4; }
.closing__facts p { color: #cfdcff; font-size: 0.9375rem; }

.closing .panel {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-radius: var(--radius-l);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    rgba(4, 12, 32, 0.46);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 30px 70px -40px rgba(2, 8, 24, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.closing .input {
  background-color: rgba(4, 12, 32, 0.5);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}
.closing .input::placeholder { color: #b6c7ee; }
.closing .input:focus-visible { outline-color: var(--green-signal); border-color: var(--green-signal); }
.closing .field > label,
.closing .field-label { color: #ffffff; }
.closing .audit-form__note { color: #cfdcff; }
.closing .form-success { background: rgba(4, 12, 32, 0.62); border-color: var(--green-signal); color: #ffffff; }
.closing select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23cfdcff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.quote-form { display: grid; gap: var(--space-l); }
@media (min-width: 620px) {
  .quote-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
}
.quote-form .field > label {
  font-size: 0.875rem;
  font-weight: 620;
  color: #dbe6ff;
}
.quote-form .btn[type="submit"] { width: 100%; }

/* I moduli si scelgono anche da qui, non solo dalla griglia in alto: sono
   checkbox vere dentro un fieldset, non un riepilogo da guardare. Il filetto
   sopra le stacca dai campi da compilare. */
.quote-form__summary {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: var(--space-l) 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.quote-form__summary > legend {
  float: left;            /* i legend non stanno nella griglia: si sfila */
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-s);
  font-size: 0.8125rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-signal);
}
.quote-form__summary > legend + * { clear: both; }

.quote-form__modules { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.quote-form__hint { font-size: var(--size-caption); color: #b6c7ee; }

/* Pastiglia selezionabile: stessa grammatica del selettore sulle card dei
   moduli, in formato piu' piccolo. */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-s);
  font-size: 0.8125rem;
  font-weight: 560;
  color: #cfdcff;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.chip:hover { border-color: var(--green-signal); }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip__box {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: 0.6rem;
  opacity: 0.5;
  transition: background-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.chip__box .icon { opacity: 0; transition: opacity var(--dur-fast) ease; }
.chip input:checked ~ .chip__box { background: currentColor; opacity: 1; }
.chip input:checked ~ .chip__box .icon { opacity: 1; color: #04101f; }
.chip input:focus-visible ~ .chip__box { outline: 2px solid var(--green-signal); outline-offset: 3px; }
.chip.is-picked { border-color: var(--green-signal); color: var(--green-signal); }


/* ==========================================================================
   12 · SEGNAPOSTO SCREENSHOT
   --------------------------------------------------------------------------
   Riquadri vuoti e dichiarati: qui vanno gli screenshot reali. Non simulano
   interfaccia, dicono cosa serve e a che misura. Per riempirne uno:
       <div class="shot has-image"><img src="img/nome.png" alt="..."></div>
   ========================================================================= */

.shot {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--space-s);
  padding: var(--space-xl);
  aspect-ratio: var(--shot-ratio, 16 / 10);
  border: 1.5px dashed rgba(124, 255, 155, 0.34);
  border-radius: var(--radius-l);
  background:
    repeating-linear-gradient(-45deg,
      rgba(238, 244, 255, 0.035) 0 12px,
      transparent 12px 24px),
    var(--mist);
  color: var(--ink-soft);
  text-align: center;
  overflow: hidden;
}
.shot > .icon { font-size: 2rem; color: var(--green-signal); opacity: 0.75; }
.shot__what { font-weight: 650; color: var(--ink); font-size: 0.9375rem; }
.shot__size { font-size: var(--size-caption); font-variant-numeric: tabular-nums; }

.shot.has-image { padding: 0; border-style: solid; border-color: var(--line); background: var(--paper); }
.shot.has-image > :not(img) { display: none; }

/* L'immagine e' posizionata in assoluto, non e' una cella della griglia:
   altrimenti uno scatto verticale con object-fit:contain allunga la riga
   (min-height:auto) e sfonda la proporzione della cornice.
   object-fit: CONTAIN e non cover: sono schermate di un gestionale, non
   fotografie. Ritagliandole sparivano la barra laterale e le cifre in fondo
   alle righe, cioe' proprio quello che l'immagine deve dimostrare. */
.shot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* La cornice prende la proporzione dello scatto: niente bande nere e niente
   ritagli. Il valore arriva dal markup, dove si conoscono le misure vere. */
.shot--as-is { aspect-ratio: var(--shot-ratio); }

/* Le quattro viste dell'esploratore si scambiano nello stesso posto: la
   cornice tiene una proporzione fissa, altrimenti il pannello salterebbe di
   altezza a ogni cambio di scheda. 7/4 e' la via di mezzo fra le proporzioni
   dei tre scatti orizzontali (1.70, 1.70, 1.82): le bande che restano sono
   sotto il 2%, invisibili. Con 16/10 erano il 6% e si vedevano eccome. */
.explorer__panel .shot { --shot-ratio: 7 / 4; }

/* Scatto verticale (la mini app sul telefono) dentro una cornice orizzontale */
.shot--fit { background: var(--mist); }
.shot--fit > img { padding: var(--space-m); }

.shot--wide { --shot-ratio: 21 / 9; }

.hero .shot {
  border-color: rgba(124, 255, 155, 0.4);
  background:
    repeating-linear-gradient(-45deg,
      rgba(238, 244, 255, 0.04) 0 12px,
      transparent 12px 24px),
    rgba(18, 36, 62, 0.93);
  box-shadow: 0 34px 90px -46px rgba(0, 0, 0, 0.95);
}

.closing .shot {
  border-color: rgba(124, 255, 155, 0.45);
  background:
    repeating-linear-gradient(-45deg,
      rgba(255, 255, 255, 0.05) 0 12px,
      transparent 12px 24px),
    rgba(4, 12, 32, 0.4);
  color: #cfdcff;
}
.closing .shot__what { color: #ffffff; }

/* Su telefono un riquadro 21:9 diventa una fessura: si alza la proporzione.
   Il blocco sta in fondo di proposito: .hero .shot ha la stessa specificita'
   e piu' avanti nel file vincerebbe lui, lasciando l'override senza effetto.
   767.98 e non 767 perche' tra 767 e 768 px, con zoom o schermi frazionari,
   non deve restare una fascia scoperta da entrambe le regole. */
@media (max-width: 767.98px) {
  .shot--wide,
  .hero .shot { --shot-ratio: 4 / 3; }
}


/* ==========================================================================
   13 · RIFINITURE
   ========================================================================= */

.section__title { max-width: 20ch; }
.section__intro { max-width: 56ch; color: var(--ink-soft); }

/* Wordmark: firma tipografica in Archivo Expanded piu' un quadrato pieno.
   Nessuna illustrazione disegnata a mano. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-stretch: 125%;
  font-weight: 780;
  font-size: 1.1875rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.wordmark__mark {
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  background: var(--green-signal);
  box-shadow: inset 0 0 0 3px var(--cobalt-fill);
}
.wordmark em {
  font-style: normal;
  font-weight: 540;
  font-stretch: 100%;
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* ==========================================================================
   PAGINE LEGALI (privacy.html, terms.html)
   Qui non si viene a farsi convincere, si viene a cercare una cosa precisa.
   Quindi: colonna stretta, niente reveal, niente nastro, niente figura 3D.
   Il fondo resta quello del sito, il corpo del testo scende di contrasto e i
   titoli di sezione salgono, cosi' si scorre a salti invece di rileggere.
   ========================================================================== */
.legal-header { margin-bottom: var(--space-2xl); }

.legal-header h1 {
  font-size: var(--size-h2);
  font-stretch: 118%;
  font-weight: 720;
  letter-spacing: -0.015em;
}

.legal-updated {
  margin-top: var(--space-s);
  font-size: var(--size-caption);
  color: var(--ink-soft);
}

.legal-intro {
  margin-top: var(--space-l);
  max-width: 62ch;
  color: var(--ink-soft);
}

/* Il filetto sopra ogni titolo fa da indice implicito: si vede dove si
   stacca una sezione senza doverla leggere. */
.legal .prose h2 {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
  font-size: 1.1875rem;
  font-stretch: 112%;
  font-weight: 640;
  letter-spacing: -0.005em;
}

.legal .prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal .prose p,
.legal .prose li { color: var(--ink-soft); }
.legal .prose strong { color: var(--ink); font-weight: 620; }

/* Recapiti in fondo: stesso trattamento dei pannelli del sito. */
.legal-contact {
  margin-top: var(--space-2xl);
  padding: var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-dark);
}
.legal-contact p { margin: 0; color: var(--ink-soft); }
.legal-contact p + p { margin-top: var(--space-s); }
.legal-contact strong { color: var(--ink); }

@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: rgba(238, 244, 255, 0.22) transparent; }
}

/* Sotto i 900px la forma resterebbe schiacciata contro la testata e
   sporcherebbe il wordmark: sul piccolo restano griglia e bagliore. */
@media (max-width: 899px) {
  .hero__canvas { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__canvas { display: none; }
}