/* ------------------------------------------------------------
   Caratteri ospitati sul dominio.
   Prima arrivavano da Google: una connessione in piu' prima del
   primo disegno, e l'IP di ogni visitatore inviato a un terzo —
   cosa che la pagina privacy dichiarava di non fare.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/font/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/font/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   MatWeb Studio — sistema visivo
   Superfici morbide, angoli arrotondati, poche righe di
   separazione. Il ritmo lo danno lo spazio e le ombre, non i
   bordi: cosi' la pagina si legge tutta al primo colpo.
   ============================================================ */

/* ---------- 1. Token ---------- */
:root {
  /* base scura: petrolio profondo, blu-verde, non un nero neutro */
  --night:   #0E1C24;
  --night-2: #162A33;
  --night-3: #213A45;

  /* carta con un velo freddo, cosi' non stona col blu */
  --bone:    #F0F3F2;
  --bone-2:  #E1E8E6;
  --card:    #FFFFFF;

  /* due colori, due mestieri:
     blu = azione (bottoni, link)  ·  verde = avanzamento (progresso, stato) */
  --sig:      #0F6A9C;
  --sig-soft: #DFEBF3;
  --sig-ink:  #F4F9FD;
  --tag-bg:   var(--sig-soft);

  --acc:      #16A06F;
  --acc-soft: #DFF2EA;

  --live:     var(--acc);

  /* tema corrente */
  --paper:   var(--bone);
  --surface: var(--card);
  --ink:     #17191E;
  --ink-2:   #4A4F58;
  --ink-3:   #7B818B;
  --hair:    rgba(23,25,30,.09);
  --lift:    0 1px 2px rgba(14,28,36,.04), 0 10px 30px -12px rgba(14,28,36,.16);
  --lift-2:  0 2px 4px rgba(14,28,36,.05), 0 22px 50px -18px rgba(14,28,36,.24);

  --disp: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* angoli: nessuno spigolo vivo da nessuna parte */
  /* una sola scala di raggi, usata ovunque */
  --r-s: 14px;
  --r-m: 20px;
  --r-l: 28px;
  --r-xl: 28px;

  --gut: clamp(20px, 5vw, 68px);
  --wrap: 1220px;
  --bay: clamp(60px, 7.5vw, 100px);

  /* curve morbide, niente scatti */
  --ease: cubic-bezier(.22,.61,.36,1);
  --soft: cubic-bezier(.33,.02,.16,1);

  --z-flow: 1;
  --z-hud: 40;
  --z-over: 90;
}

.t-night {
  --paper:   var(--night);
  --surface: var(--night-2);
  --ink:     #F3F1EC;
  --ink-2:   rgba(243,241,236,.70);
  --ink-3:   rgba(243,241,236,.48);
  --hair:    rgba(243,241,236,.12);
  --tag-bg:  rgba(58,150,200,.22);
  --lift:    none;
  --lift-2:  none;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--disp);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 17px;
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sig); color: var(--sig-ink); }

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  transform: translateY(-200%);
  background: var(--sig); color: var(--sig-ink);
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 3. Tipografia: minuscolo, respiro, meno rigidita' ---------- */
.disp {
  font-variation-settings: 'wdth' 94, 'wght' 680;
  line-height: 1.04;
  letter-spacing: -.028em;
}
.disp em {
  font-style: normal;
  font-variation-settings: 'wdth' 94, 'wght' 680;
  color: var(--acc);
}
.h-xl { font-size: clamp(2.5rem, 7.4vw, 4.9rem); }
.h-lg { font-size: clamp(2rem, 5vw, 3.2rem); }
.h-md { font-size: clamp(1.45rem, 3vw, 2rem); }

.lede {
  font-size: clamp(1.06rem, 1.9vw, 1.24rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 44ch;
}
p { color: var(--ink-2); max-width: 64ch; }

/* etichetta piccola sopra ai titoli */
.tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .88rem; font-variation-settings: 'wght' 550;
  letter-spacing: -.005em; color: var(--sig);
  background: var(--tag-bg);
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
}
.tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sig); flex: none;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- 4. Impianto ---------- */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gut);
}
.bay {
  background: var(--paper); color: var(--ink);
  padding-block: var(--bay);
  position: relative; z-index: var(--z-flow);
}

/* intestazione di sezione: due righe, niente linea di taglio */
.sect-head {
  display: grid; gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(38px, 5vw, 66px);
}
@media (min-width: 900px) {
  .sect-head {
    grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    align-items: end; column-gap: clamp(40px, 6vw, 90px);
  }
  .sect-head .lede { padding-bottom: .35rem; }
}
.sect-head h2 { margin-top: 16px; }

/* ---------- 5. Comparse morbide ---------- */
/* Il contenuto si nasconde SOLO se il JavaScript ha confermato di essere
   vivo (classe .rv messa da uno script nel <head>). Senza questo gancio,
   un errore di script lasciava le immagini a opacity 0 per sempre. */
.rv [data-rv] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.rv [data-rv][data-in] { opacity: 1; transform: none; }

/* superato dallo scorrimento veloce: compare subito, senza transizione.
   Altrimenti decine di elementi partivano tutti insieme in ritardo,
   e il telefono arrancava */
.rv [data-rv][data-now] { transition: none; }

.msk { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .09em; }
.msk > i {
  display: inline-block; font-style: inherit;
  transform: translateY(104%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--w, 0) * 70ms);
}
[data-in] .msk > i { transform: none; }
[data-now] .msk > i { transition: none; }

/* ---------- 6. Bottoni a pastiglia ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--sig); color: var(--sig-ink);
  border: 1px solid transparent;
  font-size: 1rem; font-weight: 600;
  font-variation-settings: 'wght' 600;
  letter-spacing: -.005em;
  box-shadow: 0 6px 18px -8px rgba(15,106,156,.55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(15,106,156,.5); }
.btn:active { transform: translateY(0) scale(.985); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--hair);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--surface); box-shadow: var(--lift);
  border-color: transparent;
}
.t-night .btn--ghost:hover { background: rgba(243,241,236,.08); }
.btn .arw { flex: none; transition: transform .4s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
.ico-wa { width: 22px; height: 22px; flex: none; border-radius: 50%; }

/* link semplici (non bottoni) con l'icona davanti al testo */
.ico-link { display: inline-flex; align-items: center; gap: 9px; }
.ico-link .ico-wa { width: 20px; height: 20px; }

.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); flex: none;
  box-shadow: 0 0 0 0 rgba(22,160,111,.5);
  animation: halo 3s var(--ease) infinite;
}
@keyframes halo {
  0%   { box-shadow: 0 0 0 0 rgba(22,160,111,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(22,160,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,160,111,0); }
}

/* ============================================================
   7. HUD
   ============================================================ */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-hud);
  padding-top: 10px;
  transition: padding .4s var(--ease);
}
.hud-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; height: 60px;
  padding-inline: clamp(14px, 3vw, 22px);
  border-radius: 999px;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s;
}
.hud.is-stuck .hud-in {
  background: rgba(14,28,36,.80);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 10px 34px -14px rgba(6,16,22,.55);
}
/* sul telefono la sfocatura dietro alla barra e' il livello piu' caro da
   ridisegnare a ogni scorrimento: raggio piu' corto e niente saturazione */
@media (max-width: 899px) {
  .hud.is-stuck .hud-in {
    background: rgba(14,28,36,.90);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
.mark { display: flex; align-items: center; color: #F3F1EC; }
/* il font del marchio e' molto piu' "disteso" del testo che sostituiva
   (monospazio, spaziatura larga): a parita' di altezza sarebbe piu' del
   doppio piu' largo. Misurato lo spazio libero prima del menu anche nel
   punto piu' stretto (1024px di finestra, dove il menu compare): resta
   comodo anche a questa altezza, un filo sopra ai 29,5px del vecchio
   testo */
.mark-img { display: block; height: 30px; width: auto; }

.foot-mark .mark-img { height: 48px; }

.hud-nav { display: none; }
@media (min-width: 1024px) {
  .hud-nav { display: flex; align-items: center; gap: 2px; }
  .hud-nav a {
    padding: 9px 15px; border-radius: 999px;
    font-size: .94rem; color: rgba(243,241,236,.66);
    transition: color .3s var(--ease), background .3s var(--ease);
  }
  .hud-nav a:hover { color: #F3F1EC; background: rgba(243,241,236,.08); }
  .hud-nav a[aria-current='true'] { color: #F3F1EC; background: rgba(243,241,236,.11); }
}
.hud-cta { display: none; }
@media (min-width: 640px) { .hud-cta { display: inline-flex; padding: 12px 22px; font-size: .95rem; } }

.lap { display: none; }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 46px; height: 46px; padding: 0 12px;
  border-radius: 999px; background: rgba(243,241,236,.1);
}
.burger i { display: block; height: 1.6px; border-radius: 2px; background: #F3F1EC; transition: transform .45s var(--ease), opacity .25s; }
.burger[aria-expanded='true'] i:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

.sheet {
  position: fixed; inset: 0; z-index: calc(var(--z-hud) - 1);
  background: var(--night);
  padding: 100px var(--gut) 36px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
  overflow-y: auto;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet a {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(12px, 2.2vh, 18px) 0;
  font-variation-settings: 'wdth' 96, 'wght' 660;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  letter-spacing: -.03em; color: #F3F1EC;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.sheet.is-open a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 55ms + 100ms); }
.sheet a span { font-family: var(--mono); font-size: .8rem; color: var(--sig); }
.sheet-foot {
  display: grid; gap: 10px; padding-top: 30px;
  font-size: .98rem; color: rgba(243,241,236,.6);
}
.sheet-foot a { display: inline; font: inherit; opacity: 1; transform: none; letter-spacing: 0; }

.dock {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: var(--z-hud);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .6s var(--ease);
}
/* nascosta solo se il JS e' vivo: altrimenti resta a vista,
   e' l'unico pulsante di contatto sul telefono */
.rv .dock { transform: translateY(160%); }
.rv .dock.is-up { transform: none; }
.dock a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 8px; border-radius: 999px;
  font-size: .98rem; font-weight: 600;
  /* niente sfocatura dietro: il fondo e' gia' coprente al 92%, non si
     vedeva la differenza e restava un livello fisso da ridisegnare
     durante tutto lo scorrimento sul telefono */
  background: rgba(14,28,36,.96);
  color: #F3F1EC;
  box-shadow: 0 10px 30px -12px rgba(6,16,22,.6);
}
.dock a + a { background: var(--sig); color: var(--sig-ink); }
.dock a:active { transform: scale(.97); }
@media (min-width: 640px) { .dock { display: none; } }

/* ============================================================
   8. HERO — luce che respira, nessuna linea
   ============================================================ */
.hero {
  --paper: var(--night); --surface: var(--night-2);
  --ink: #F3F1EC; --ink-2: rgba(243,241,236,.72); --ink-3: rgba(243,241,236,.5);
  --hair: rgba(243,241,236,.12);
  --tag-bg: rgba(58,150,200,.22);
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 112px; padding-bottom: clamp(40px, 7vh, 80px);
  background: var(--night); color: #F3F1EC;
  overflow: hidden;
}
/* due aloni morbidi che si muovono piano: da' vita senza distrarre */
.glow {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform;
}
.glow-a {
  width: min(70vw, 620px); aspect-ratio: 1;
  top: -14%; right: -12%;
  background: radial-gradient(circle, rgba(30,130,180,.42) 0%, rgba(30,130,180,0) 68%);
  animation: drift-a 22s var(--soft) infinite alternate;
}
.glow-b {
  width: min(80vw, 700px); aspect-ratio: 1;
  bottom: -26%; left: -20%;
  background: radial-gradient(circle, rgba(22,160,111,.28) 0%, rgba(22,160,111,0) 70%);
  animation: drift-b 28s var(--soft) infinite alternate;
}
.glow-c {
  width: min(60vw, 520px); aspect-ratio: 1;
  top: 20%; left: 44%;
  background: radial-gradient(circle, rgba(243,241,236,.10) 0%, rgba(243,241,236,0) 72%);
  animation: drift-c 26s var(--soft) infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-8%, 9%, 0) scale(1.16); }
}
@keyframes drift-b {
  from { transform: translate3d(0,0,0) scale(1.08); }
  to   { transform: translate3d(10%, -7%, 0) scale(.92); }
}
@keyframes drift-c {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(6%, 8%, 0) scale(1.1); }
}

.hero-in { position: relative; z-index: 2; width: 100%; }
/* una colonna sola: il riquadro dati a fianco e' stato tolto */
.hero-col { max-width: 46rem; }
.hero h1 { margin-bottom: clamp(22px, 3vh, 32px); }
.hero h1 .big { color: var(--acc); }
.hero-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vh, 40px); }

/* ------------------------------------------------------------
   L'hero si costruisce da sola, in CSS puro.
   Prima dipendeva dal JavaScript (data-rv / data-split): finche'
   lo script non partiva restava un buco vuoto, i pulsanti
   entravano prima del titolo e arrivavano da fuori schermo.
   Adesso l'animazione parte al primo disegno, uguale su ogni
   browser, e l'ordine e' quello giusto: titolo, frase, pulsanti.

   Tutte usano fill "backwards": tengono la posizione di partenza
   durante l'attesa, ma alla fine restituiscono il controllo alle
   regole normali. Con "forwards" resterebbero loro padrone della
   trasformazione e il sollevamento al passaggio del mouse sui
   pulsanti non funzionerebbe piu'.
   ------------------------------------------------------------ */

/* il titolo: una parola alla volta che sale da dietro la riga */
.hero-h1 .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .09em;
}
.hero-h1 .hw > i {
  display: inline-block;
  font-style: normal;
  animation: hw-su .85s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay: calc(var(--d, 0) * 75ms + 80ms);
}
@keyframes hw-su { from { transform: translateY(108%); } }

/* il "5" sale come le altre parole e poi si accende un istante:
   e' il numero che vende, tanto vale farlo notare */
.hero-h1 .hw > i.big {
  color: var(--acc);
  animation: hw-su .85s cubic-bezier(.22,.61,.36,1) backwards,
             big-acceso 1.2s var(--ease) backwards;
  animation-delay: calc(var(--d, 0) * 75ms + 80ms),
                   calc(var(--d, 0) * 75ms + 420ms);
}
@keyframes big-acceso {
  from { text-shadow: 0 0 0 rgba(22,160,111,0); }
  35%  { text-shadow: 0 0 28px rgba(22,160,111,.8), 0 0 64px rgba(22,160,111,.32); }
  to   { text-shadow: 0 0 0 rgba(22,160,111,0); }
}

/* la frase sotto, poi i due pulsanti con un piccolo assestamento */
.hero .lede { animation: hero-su .8s var(--ease) .58s backwards; }
.hero-act .btn { animation: btn-entra .7s cubic-bezier(.34,1.56,.64,1) backwards; }
.hero-act .btn:nth-child(1) { animation-delay: .74s; }
.hero-act .btn:nth-child(2) { animation-delay: .85s; }
@keyframes hero-su  { from { opacity: 0; transform: translateY(18px); } }
@keyframes btn-entra { from { opacity: 0; transform: translateY(20px) scale(.96); } }

/* ============================================================
   10. COSA FACCIO — pannelli morbidi che si aprono
   ============================================================ */
.chan { display: grid; gap: 12px; }
.chan-row {
  background: var(--surface);
  border-radius: var(--r-l);
  box-shadow: var(--lift);
  overflow: hidden;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}
.chan-row:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.chan-btn {
  width: 100%; display: grid; align-items: center;
  grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(14px, 3vw, 24px);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
  text-align: left;
}
.chan-h { display: grid; gap: 2px; min-width: 0; }
.chan-t {
  font-variation-settings: 'wdth' 98, 'wght' 640;
  font-size: clamp(1.16rem, 2.4vw, 1.4rem);
  letter-spacing: -.02em; line-height: 1.25; color: var(--ink);
}
.chan-s { font-size: .98rem; color: var(--ink-3); line-height: 1.4; }

.chan-x {
  position: relative; width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: var(--bone-2);
  transition: background .4s var(--ease), transform .5s var(--ease);
}
.chan-x::before, .chan-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px; border-radius: 2px; background: var(--ink-2);
  transform: translate(-50%,-50%);
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.chan-x::after { transform: translate(-50%,-50%) rotate(90deg); }

.chan-row.is-open {
  background: var(--night); box-shadow: var(--lift-2);
  --ink: #F3F1EC; --ink-2: rgba(243,241,236,.72); --ink-3: rgba(243,241,236,.5);
  --hair: rgba(243,241,236,.14);
}
.chan-row.is-open .chan-x { background: rgba(243,241,236,.14); transform: rotate(180deg); }
.chan-row.is-open .chan-x::before { background: #F3F1EC; }
.chan-row.is-open .chan-x::after { opacity: 0; }

.chan-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.chan-panel.is-open { grid-template-rows: 1fr; }
.chan-panel > div { overflow: hidden; }
.chan-body {
  display: grid; gap: clamp(16px, 2.4vw, 22px);
  padding: 0 clamp(20px, 3vw, 30px) clamp(24px, 3.4vw, 32px) clamp(20px, 3vw, 30px);
}
@media (min-width: 860px) {
  .chan-body {
    grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
    align-items: start; column-gap: clamp(26px, 4vw, 46px);
  }
}
.chan-body p { font-size: 1.02rem; margin: 0; }

/* i tre modi di prendere i contenuti social, dentro il pannello */
.ways { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 700px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.ways li {
  padding: 16px 18px;
  border-radius: var(--r-m);
  background: rgba(243,241,236,.08);
}
.ways b {
  display: block; font-variation-settings: 'wght' 640;
  font-size: .98rem; color: #F3F1EC; margin-bottom: 4px;
}
.ways span { font-size: .92rem; color: rgba(243,241,236,.62); line-height: 1.45; }
/* ============================================================
   12. IL PERCORSO — binario morbido dentro l'elenco
   ============================================================ */
.legs {
  /* il binario corre fuori dalle schede: dentro restava coperto */
  --rail-x: clamp(15px, 3vw, 21px);
  --rail-gap: clamp(44px, 7vw, 62px);
  position: relative; display: grid; gap: 12px;
  padding-left: var(--rail-gap);
}
.route-rail {
  position: absolute; left: calc(var(--rail-x) - 2px); top: 0; height: 0; width: 4px;
  border-radius: 999px; background: var(--bone-2); z-index: 0;
}
.route-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 999px; background: var(--acc); }
.route-car {
  position: absolute; left: 50%; top: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--acc); border: 4px solid var(--paper);
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px -4px rgba(22,160,111,.75);
}

.legs-list { display: grid; gap: 12px; }
.leg {
  position: relative; z-index: 1;
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--lift);
  padding: clamp(22px, 3vw, 30px);
  transition: opacity .6s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* sbiaditi solo se il JS e' vivo e puo' riaccenderli scorrendo */
.rv .leg { opacity: .55; }
.leg.is-hit { opacity: 1; }
.leg.is-hit:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.leg-dot {
  position: absolute; z-index: 2;
  left: calc(var(--rail-x) - 9px - var(--rail-gap));
  top: clamp(26px, 3.4vw, 34px);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 4px var(--bone-2);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.leg.is-hit .leg-dot { box-shadow: inset 0 0 0 5px var(--acc); transform: scale(1.06); }
.leg-k { display: block; font-family: var(--mono); font-size: .82rem; color: var(--sig); }
.leg h3 {
  margin-top: 6px;
  font-variation-settings: 'wdth' 98, 'wght' 660;
  font-size: clamp(1.24rem, 2.8vw, 1.6rem);
  letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
}
.leg p { margin-top: 10px; font-size: 1rem; }

/* ============================================================
   13. LAVORI — galleria trascinabile
   ============================================================ */
.pits {
  display: flex; gap: 14px;
  overflow-x: auto;
  /* "mandatory" + scroll-snap-stop "always" sui figli: una slidata anche
     piccola porta alla scheda dopo, e una sola per volta, senza volare
     oltre. Con "proximity" bisognava spingere forte, perche' se non si
     arrivava abbastanza vicino la scheda tornava indietro.
     Il vecchio problema delle schede che saltavano da sole al caricamento
     di immagini e caratteri qui non si presenta piu': le schede hanno
     larghezza fissa e le foto hanno gia' il rapporto 4/3 riservato, quindi
     i punti di aggancio non si spostano piu' sotto al dito. */
  scroll-snap-type: x mandatory;
  overflow-anchor: none;         /* niente correzioni automatiche di posizione */
  padding-block: 10px 16px;      /* spazio per l'ombra, altrimenti viene tagliata */
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  scroll-padding-inline: var(--gut);
  scrollbar-width: none; cursor: grab;
}
.pits::-webkit-scrollbar { display: none; }
.pits.is-drag { cursor: grabbing; scroll-snap-type: none; }
.pits .pit { scroll-snap-stop: always; }
.pit {
  flex: 0 0 min(84vw, 440px); scroll-snap-align: start;
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--lift); overflow: hidden;
  display: grid; align-content: start;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pit:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.pit-shot { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bone-2); }
.pit-shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.pit:hover .pit-shot img { transform: scale(1.05); }
.pit-badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(14,28,36,.80);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .86rem; font-weight: 500; color: #F3F1EC;
}
.pit-i { display: none; }
.pit-body { padding: clamp(20px, 2.8vw, 26px); display: grid; gap: 8px; }
.pit h3 {
  font-variation-settings: 'wdth' 98, 'wght' 650;
  font-size: clamp(1.14rem, 2.4vw, 1.34rem);
  letter-spacing: -.02em; color: var(--ink);
}
.pit-k { font-size: .92rem; color: var(--ink-3); }
.pit p { font-size: .96rem; }
.pit-go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px; font-size: .98rem; font-weight: 600; color: var(--sig);
  justify-self: start;
}
.pit-go svg { transition: transform .4s var(--ease); }
.pit:hover .pit-go svg { transform: translateX(4px); }
.rail-bar {
  height: 5px; border-radius: 999px; background: var(--bone-2);
  position: relative; overflow: hidden; margin-top: 8px;
}
.rail-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--acc); width: 30%; }
.drag-cue { margin-top: 14px; font-size: .94rem; color: var(--ink-3); }

/* ============================================================
   14. CHI SONO
   ============================================================ */
.pilot { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 960px) {
  .pilot { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); column-gap: clamp(44px, 6vw, 86px); align-items: center; }
}
.pilot-shot { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--lift-2); }
.pilot-shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pilot-shot figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 14px 22px; background: var(--surface);
  font-size: .92rem; color: var(--ink-3);
}
.pilot p + p { margin-top: 1.1em; }
.creds { margin-top: clamp(26px, 3.4vw, 36px); display: grid; gap: 10px; }
.creds li {
  display: grid; gap: 4px;
  padding: 16px 20px; border-radius: var(--r-m);
  background: var(--surface); box-shadow: var(--lift);
  color: var(--ink-2); font-size: .98rem;
}
.creds li b { font-variation-settings: 'wght' 650; color: var(--ink); font-size: 1rem; }
.out {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 24px; padding: 12px 22px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--lift);
  font-size: .98rem; font-weight: 600; color: var(--ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .3s;
}
.out:hover { transform: translateY(-2px); box-shadow: var(--lift-2); color: var(--sig); }

/* ============================================================
   15. DOMANDE
   ============================================================ */
.radio { display: grid; gap: 10px; }
.radio-row {
  background: var(--surface); border-radius: var(--r-m);
  box-shadow: var(--lift); overflow: hidden;
  transition: box-shadow .45s var(--ease);
}
.radio-row.is-open { box-shadow: var(--lift-2); }
.radio-q {
  width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 16px; align-items: center;
  padding: clamp(18px, 2.6vw, 24px) clamp(20px, 3vw, 28px);
  text-align: left;
}
.radio-q .ch { display: none; }
.radio-q .qt {
  font-variation-settings: 'wght' 600;
  font-size: clamp(1.02rem, 2.2vw, 1.14rem);
  line-height: 1.4; color: var(--ink); letter-spacing: -.012em;
}
.radio-q .sig {
  position: relative; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--bone-2);
  transition: background .4s var(--ease), transform .5s var(--ease);
}
.radio-q .sig::before, .radio-q .sig::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2px; border-radius: 2px; background: var(--ink-2);
  transform: translate(-50%,-50%);
  transition: opacity .3s var(--ease), background .3s;
}
.radio-q .sig::after { transform: translate(-50%,-50%) rotate(90deg); }
.radio-q .sig i { display: none; }
.radio-row.is-open .sig { background: var(--sig); transform: rotate(180deg); }
.radio-row.is-open .sig::before { background: var(--sig-ink); }
.radio-row.is-open .sig::after { opacity: 0; }
.radio-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.radio-a.is-open { grid-template-rows: 1fr; }
.radio-a > div { overflow: hidden; }
.radio-a p {
  padding: 0 clamp(20px, 3vw, 28px) clamp(22px, 3vw, 28px);
  font-size: 1rem;
}

/* ============================================================
   16. CONTATTI
   ============================================================ */
.form {
  max-width: 760px;
  display: grid; gap: 18px;
  background: rgba(243,241,236,.05);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3.4vw, 38px);
}
.fr { display: grid; gap: 18px; }
@media (min-width: 620px) { .fr { grid-template-columns: 1fr 1fr; } }
.f { display: grid; gap: 8px; }
.f label { font-size: .94rem; color: var(--ink-3); }
.f label .req { color: var(--sig); }
.f input, .f select, .f textarea {
  width: 100%; padding: 15px 18px;
  background: rgba(243,241,236,.07);
  color: var(--ink);
  border: 1px solid transparent; border-radius: var(--r-m);
  font-size: 1rem;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.f textarea { resize: vertical; min-height: 116px; line-height: 1.6; }
.f select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  cursor: pointer; padding-right: 40px;
}
.f option { background: var(--night-2); color: #F3F1EC; }
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none; background: rgba(243,241,236,.11); border-color: rgba(243,241,236,.24);
}
.f-err { font-size: .88rem; color: var(--sig); opacity: 0; transition: opacity .3s var(--ease); }
.f.is-bad input, .f.is-bad select, .f.is-bad textarea { border-color: var(--sig); }
.f.is-bad .f-err { opacity: 1; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 4px; }
.form-msg { font-size: .96rem; line-height: 1.5; max-width: 34ch; color: var(--ink-2); }
.form-msg[data-s='ok'] { color: var(--acc); }
.form-msg[data-s='err'] { color: var(--sig); }
.btn[data-busy='true'] { pointer-events: none; opacity: .6; }
.btn .spin {
  width: 14px; height: 14px; flex: none; display: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .8s linear infinite;
}
.btn[data-busy='true'] .spin { display: block; }
.btn[data-busy='true'] .arw { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   17. FONDO PAGINA
   ============================================================ */
.foot {
  background: var(--night); color: #F3F1EC;
  --ink: #F3F1EC; --ink-2: rgba(243,241,236,.68); --ink-3: rgba(243,241,236,.46);
  --hair: rgba(243,241,236,.12);
  --tag-bg: rgba(58,150,200,.22);
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: calc(clamp(34px, 4vw, 54px) + env(safe-area-inset-bottom));
}
@media (max-width: 639px) { .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
.foot-top { display: grid; gap: clamp(30px, 4vw, 48px); }
@media (min-width: 800px) { .foot-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .9fr); column-gap: clamp(30px, 5vw, 70px); } }
.foot-mark b { font-size: clamp(1.5rem, 4vw, 2rem); font-variation-settings: 'wdth' 96, 'wght' 720; }
.foot p { margin-top: 14px; font-size: 1rem; max-width: 34ch; }
.foot h4 { font-size: .94rem; color: var(--ink-3); margin-bottom: 14px; font-variation-settings: 'wght' 500; }
.foot-list { display: grid; gap: 10px; }
.foot-list a { font-size: 1rem; color: rgba(243,241,236,.74); transition: color .3s; }
.foot-list a.ico-link { color: rgba(243,241,236,.9); }
.foot-list a:hover { color: var(--sig); }
.foot-end {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: clamp(40px, 5vw, 60px); padding-top: 24px;
  border-top: 1px solid rgba(243,241,236,.1);
  font-size: .92rem; color: rgba(243,241,236,.46);
}
.foot-end a:hover { color: var(--sig); }

/* ============================================================
   18. PAGINE DI SERVIZIO
   ============================================================ */
.slim {
  --paper: var(--night); --surface: var(--night-2);
  --ink: #F3F1EC; --ink-2: rgba(243,241,236,.7); --ink-3: rgba(243,241,236,.48);
  --hair: rgba(243,241,236,.12);
  --tag-bg: rgba(58,150,200,.22);
  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--night); color: #F3F1EC;
}
.slim-main { flex: 1; padding-block: clamp(110px, 16vh, 180px) clamp(60px, 10vh, 100px); }
.slim-in { max-width: 66ch; margin-inline: 0; }
.slim h1 { margin-bottom: clamp(22px, 3vw, 32px); }
.slim p { color: rgba(243,241,236,.7); font-size: 1.06rem; }
.slim p + p { margin-top: 1.15em; }
.slim-in p a { color: #F3F1EC; border-bottom: 1px solid var(--sig); }
.slim-in p a:hover { color: var(--sig); }
.slim .slim-code {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(4rem, 18vw, 9rem); line-height: .9;
  letter-spacing: -.05em; color: var(--sig);
  margin-top: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(14px, 2.4vw, 22px);
}
.slim-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 42px); }

/* ---------- 19. Preferenze di movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv [data-rv] { opacity: 1; transform: none; }
  .msk > i { transform: none; }
}

@media print {
  .hud, .dock, .sheet, .strip, .glow { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------
   Sfondo dell'hero: luce diffusa + grana leggera, e a destra (solo
   da schermi larghi) l'accenno di un telefono con la pagina dentro.
   Il video e' stato tolto (i file restano intatti in /assets/video/,
   non e' escluso di riusarli altrove).
   ------------------------------------------------------------ */
.hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(15,106,156,.24) 0%, rgba(15,106,156,0) 58%),
    radial-gradient(95% 80% at 8% 104%, rgba(22,160,111,.16) 0%, rgba(22,160,111,0) 62%);
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: overlay;
  opacity: .07;
}

/* accenno di telefono con la pagina dentro. Da desktop sta a destra
   del testo; da telefono si sposta sotto ai pulsanti, dove nell'hero
   c'e' sempre stato spazio vuoto. Il "respiro" (scene-float) e'
   staccato dal posizionamento cosi' i due non litigano sul transform. */
.hero-scene {
  position: absolute; top: 50%; right: 6%;
  transform: translateY(-50%);
  width: min(19vw, 195px);
  pointer-events: none;
  z-index: 1;
}
.scene-float { animation: scene-breathe 12s var(--soft) infinite alternate; }
/* hero fuori campo: si fermano respiro e battito, niente ridisegni inutili */
.hero-scene.is-ferma, .hero-scene.is-ferma * { animation-play-state: paused; }
@keyframes scene-breathe {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(0,-14px,0); }
}
@media (max-width: 999px) {
  /* spazio riservato in fondo all'hero: senza, il telefono finiva
     addosso al pulsante di WhatsApp */
  .hero { padding-bottom: calc(min(30vw, 125px) * 2 + 44px); }
  .hero-scene {
    top: auto; right: auto; bottom: 18px; left: 50%;
    transform: translateX(-50%);
    width: min(30vw, 125px);
    opacity: .85;
  }
}
/* schermo basso: non c'e' spazio sotto ai pulsanti senza far diventare
   l'hero piu' alto della schermata, quindi il telefono si salta */
@media (max-width: 999px) and (max-height: 700px) {
  .hero { padding-bottom: clamp(40px, 7vh, 80px); }
  .hero-scene { display: none; }
}
.mock-phone {
  border-radius: 26px;
  border: 2px solid rgba(243,241,236,.18);
  background: rgba(14,28,36,.55);
  padding: 8px;
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.7);
  animation: phone-pop .8s cubic-bezier(.34,1.56,.64,1) both;
}
.mock-phone-screen {
  border-radius: 16px;
  overflow: hidden;
  padding: 10px;
  display: grid; gap: 7px;
  /* proporzione da telefono: senza, i quattro blocchi lasciavano una
     scheda larga e bassa, che di telefono non aveva niente */
  aspect-ratio: 9 / 17;
  align-content: start;
  background: rgba(14,28,36,.4);
}
/* i blocchi arrivano da lati diversi e si assemblano una volta sola,
   poi restano con il battito lento gia' presente (mock-glow) */
.mock-block {
  display: block; border-radius: 12px; background: rgba(243,241,236,.06);
  animation: piece-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
.mock-p-nav  { height: 8px; width: 34%; --fx: -50px; animation-delay: .5s; }
.mock-p-hero {
  height: 60px; background: rgba(22,160,111,.24); --fy: -40px;
  animation: piece-in .55s cubic-bezier(.34,1.56,.64,1) .62s both,
             mock-glow 7s ease-in-out infinite 1.6s;
}
.mock-p-card { height: 30px; }
.mock-p-card-a { width: 70%; --fx: 50px; animation-delay: .82s; }
.mock-p-card-b {
  width: 90%; background: rgba(15,106,156,.22); --fy: 40px;
  animation: piece-in .5s cubic-bezier(.34,1.56,.64,1) .98s both,
             mock-glow 7s ease-in-out infinite 3.9s;
}
@keyframes phone-pop {
  from { opacity: 0; transform: scale(.82) rotate(-5deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes piece-in {
  from { opacity: 0; transform: translate3d(var(--fx, 0), var(--fy, 0), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes mock-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.55); }
}

/* ============================================================
   19. TARGHETTA RECENSIONI — prodotto a se', ordinabile da solo
   Il disegno della targhetta e' un SVG nostro e non una foto di
   catalogo del fornitore: la foto presa altrove si riconosce, non
   e' nostra da ripubblicare e sparisce quando cambia l'inserzione.
   ============================================================ */
.nfc { display: grid; gap: clamp(30px, 5vw, 52px); align-items: center; }
@media (min-width: 900px) {
  .nfc {
    grid-template-columns: minmax(0,.92fr) minmax(0,1fr);
    column-gap: clamp(40px, 6vw, 84px);
  }
}

.nfc-art {
  border-radius: var(--r-l);
  overflow: hidden;
  /* la foto del prodotto ha gia' il fondo bianco: dando lo stesso
     bianco al contenitore lo scatto non galleggia in un riquadro scuro */
  background: #FFFFFF;
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.65);
}
.nfc-art img {
  display: block; width: 100%; height: auto;
}

.nfc-steps { display: grid; gap: 12px; counter-reset: nfc; }
.nfc-steps li {
  position: relative;
  padding: 18px 22px 18px 56px;
  border-radius: var(--r-m);
  background: rgba(243,241,236,.07);
}
.nfc-steps li::before {
  counter-increment: nfc;
  content: counter(nfc, decimal-leading-zero);
  position: absolute; left: 22px; top: 19px;
  font-family: var(--mono); font-size: .8rem; color: var(--acc);
}
.nfc-steps b {
  display: block; margin-bottom: 4px;
  font-variation-settings: 'wght' 640; font-size: 1rem; color: #F3F1EC;
}
.nfc-steps span { font-size: .95rem; line-height: 1.5; color: rgba(243,241,236,.64); }

.nfc-note {
  margin-top: 14px; padding: 20px 22px;
  border-radius: var(--r-m);
  background: rgba(22,160,111,.15);
}
.nfc-note b {
  display: block; margin-bottom: 4px;
  font-variation-settings: 'wght' 640; color: #F3F1EC;
}
.nfc-note span { font-size: .95rem; line-height: 1.5; color: rgba(243,241,236,.72); }

.nfc-cta {
  margin-top: clamp(20px, 3vw, 28px);
  display: grid; gap: 16px; justify-items: start;
}
.nfc-small { font-size: .9rem; line-height: 1.5; color: rgba(243,241,236,.52); max-width: 48ch; }