/* ═══════════════════════════════════════════════════════════════════════
   IBT — stile del sito pubblico
   La grafica dei post: fondo quasi nero, aloni di colore, titoli enormi.

   I valori non sono scelti a occhio: sono gli stessi delle card Instagram
   del circuito — DM Sans per il testo, Orbitron per le etichette, il blu
   #4C8BFF per chi gioca e l'oro #F0C24B per chi organizza. Chi arriva qui
   da un post deve riconoscere il posto prima di leggere una parola.

   Il foglio e' scritto MOBILE FIRST: le regole di base descrivono il
   telefono, che e' da dove il sito viene letto quasi sempre. Le media
   query aggiungono il tablet e il desktop, non il contrario.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── I due caratteri ────────────────────────────────────────────────────
   Ospitati qui invece che presi da Google Fonts: una pagina che dichiara
   di non tracciare nessuno non manda l'indirizzo IP di chi la legge a un
   terzo per scaricare un font. */

@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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: 'DM Sans';
  src: url('/fonts/DMSans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Di Orbitron si usa un peso solo, il 700: il file e' quello, non il
   variabile intero — 6 KB invece di 38. */
@font-face {
  font-family: 'Orbitron';
  src: url('/fonts/Orbitron-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  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;
}

:root {
  /* Fondali */
  --ink: #04060B;
  --panel: #0F1524;
  --line: #232B3D;
  --line-soft: #1A2131;

  /* Aloni: le tre macchie di colore dietro alle sezioni */
  --glow-blue: #18294F;
  --glow-navy: #14213D;
  --glow-gold: #3D3413;

  /* Accenti */
  --blue: #4C8BFF;
  --blue-deep: #2B5FE0;
  --blue-glow: #7FB2FF;
  --gold: #F0C24B;
  --amber: #FF9F0A;

  /* Testo */
  --text: #F3F5FA;
  --text-2: #98A1B5;
  --text-3: #616A7E;

  /* Raggi: superfici grandi, raggi grandi — come nei post */
  --r-lg: 24px;
  --r-xl: 30px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 0.9, 0.24, 1);

  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
  --tech: 'Orbitron', 'DM Sans', Verdana, sans-serif;

  /* Margine laterale della pagina e larghezza della colonna di lettura */
  --gutter: 22px;
  --col: 1080px;

  /* Quanto spazio lasciare sotto il contenuto perche' l'ultima riga non
     finisca sotto la barra fluttuante. */
  --nav-clearance: calc(88px + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0 0 var(--nav-clearance);
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ── Tipografia ─────────────────────────────────────────────────────────
   Un titolo grande non e' decorazione: e' la frase che deve restare in
   testa a chi scorre. Le misure crescono con la larghezza dello schermo
   nelle stesse proporzioni delle card 1080x1350. */

h1, h2, h3, h4 { color: var(--text); margin: 0; font-weight: 700; }

h1 {
  font-size: clamp(38px, 10.4vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(31px, 8.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h3 {
  font-size: clamp(20px, 4.4vw, 27px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h4 {
  font-size: clamp(17px, 3.8vw, 21px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p { margin: 0 0 16px; color: var(--text-2); }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--text); font-weight: 600; }
em { font-style: normal; color: var(--text); }

a { color: var(--blue-glow); text-decoration: none; }
a:hover { color: #A7CBFF; }
a:active { opacity: 0.7; }

ul { margin: 0 0 16px; padding-left: 22px; color: var(--text-2); }
li { margin-bottom: 8px; }
li:last-child { margin-bottom: 0; }

/* Il capoverso d'apertura di una sezione: piu' grande del testo normale,
   e mai piu' largo di una riga leggibile. */
.lead {
  font-size: clamp(17px, 4.4vw, 25px);
  line-height: 1.42;
  color: var(--text-2);
  max-width: 24em;
  margin: 0 0 clamp(22px, 5vw, 34px);
}

/* Sotto a un titolone il capoverso non si appoggia: nei post fra i due
   c'e' sempre un respiro, ed e' quello che li tiene separati senza
   bisogno di una riga. */
h1 + .lead, h2 + .lead { margin-top: clamp(18px, 3.4vw, 28px); }

/* Lo stesso vale per tutto il resto che puo' seguire un titolo di
   sezione. `.tiles` e `.numbered` hanno gia' il loro stacco. */
h1 + .prose, h2 + .prose,
h1 + .split, h2 + .split,
h1 + .table-scroll, h2 + .table-scroll { margin-top: clamp(24px, 5vw, 40px); }

.fine { font-size: 14px; color: var(--text-3); margin: 0 0 8px; }
.note { font-size: 14.5px; color: var(--text-3); margin: 18px 0 0; }

/* L'etichetta in Orbitron sopra a ogni titolo: e' il font del marchio, e
   qui fa lo stesso lavoro che fa sulle card — dire di cosa si parla in
   una parola, in un carattere che non si confonde con il testo. */
.kicker {
  font-family: var(--tech);
  font-size: clamp(11.5px, 2.5vw, 13px);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 clamp(16px, 3.4vw, 26px);
  line-height: 1.3;
}

.kicker.gold { color: var(--gold); }
.kicker.dim { color: var(--text-3); }

/* Intestazione di sezione: l'etichetta a sinistra, il numero della tappa
   a destra. Il numero non e' un vezzo — su una pagina lunga dice a che
   punto si e'. */
.slide-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.slide-head .kicker { margin-bottom: 0; }
.slide-head + h2, .slide-head + h1 { margin-top: clamp(16px, 3.4vw, 26px); }

.mail {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.94em;
  word-break: break-word;
  border-bottom: 1px solid rgba(127, 178, 255, 0.35);
}

/* ── La colonna ─────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Il testo lungo delle pagine interne non deve arrivare a 1080px: oltre i
   36 caratteri per riga l'occhio perde il capo. */
.prose { max-width: 760px; }
/* Il `:not()` non e' un vezzo: `.prose > p` e' piu' specifico di `.lead`
   e di `.note`, e senza l'esclusione se li mangerebbe riportandoli alla
   misura del testo corrente. */
.prose > p:not(.lead):not(.note):not(.stamp),
.prose > ul, .prose > ol { font-size: clamp(16px, 4vw, 18px); }

/* Dentro a un testo lungo i sottotitoli devono staccare senza gridare: il
   titolone della sezione e' gia' passato, e questi stanno sotto di lui. */
.prose h3 { margin: clamp(30px, 5.4vw, 44px) 0 10px; }
.prose h4 { margin: clamp(24px, 4.4vw, 32px) 0 8px; }
.prose > :first-child { margin-top: 0; }

/* Una tabella o una scheda dentro al testo puo' allargarsi oltre la
   colonna di lettura: sono righe corte, non prosa. */
.prose .table-scroll, .prose .tiles { max-width: none; }

/* Un capoverso che riprende dopo una fila di schede non si attacca a
   quelle: tiene la distanza che tiene ogni altro blocco. Lo stesso dopo
   testo e telefono affiancati. */
.tiles + .prose, .numbered + .prose,
.split + .prose { margin-top: clamp(24px, 5vw, 40px); }

/* ── Pagine legali ──────────────────────────────────────────────────────
   Un'informativa non e' una vetrina. I titoli tornano a misura di
   documento: qui contano le nove sezioni numerate, non l'effetto della
   prima riga. Il resto del vestito — fondo, font, colori — non cambia. */

.legal h2 {
  font-size: clamp(22px, 5vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: clamp(36px, 6.4vw, 56px) 0 12px;
}

.legal h3 {
  font-size: clamp(17px, 4vw, 20px);
  margin: clamp(24px, 4.4vw, 32px) 0 8px;
}

.legal > :first-child { margin-top: 0; }
.legal p:not(.lead):not(.note):not(.stamp),
.legal ul, .legal ol { font-size: clamp(16px, 4vw, 17.5px); }
.legal ol { padding-left: 22px; color: var(--text-2); }

/* La data in cima a un'informativa: si legge, non si annuncia. */
.legal .stamp {
  font-family: var(--tech);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 24px;
}

/* ── Le sezioni ─────────────────────────────────────────────────────────
   Ogni sezione e' una card del carosello: fondo nero, un alone di colore
   in un angolo, e dentro il suo contenuto. L'alone cambia posizione da
   una sezione all'altra, cosi' scorrendo la luce si sposta. */

/* Niente `content-visibility: auto` qui: provato e tolto. Su queste
   sezioni, alte da 400 a 2000px, la misura di riserva non ci azzecca e
   l'altezza del documento cambia mentre si scorre — 843px di scarto sulla
   pagina dei club. Una barra di scorrimento che mente sul telefono costa
   piu' di quanto faccia risparmiare saltare qualche ridisegno. */
.slide {
  position: relative;
  overflow: hidden;
  padding: clamp(54px, 12vw, 112px) 0;
}

.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 58% at 80% 6%,
    var(--glow, var(--glow-blue)) 0%, transparent 62%);
}

.slide > * { position: relative; }

.slide.gold { --glow: var(--glow-gold); }
.slide.navy { --glow: var(--glow-navy); }

/* Alone in basso a sinistra invece che in alto a destra. */
.slide.low::before {
  background: radial-gradient(ellipse 100% 58% at 18% 96%,
    var(--glow, var(--glow-blue)) 0%, transparent 64%);
}

/* Sezione senza alone, per far respirare fra due sezioni accese. */
.slide.flat::before { background: none; }

/* Un filo di luce fra una sezione e l'altra, dove serve un confine. */
.slide.ruled { border-top: 1px solid var(--line-soft); }

/* ── Le schede ──────────────────────────────────────────────────────────
   Il rettangolo scuro con il bordo sottile: e' l'unico contenitore del
   sito. Con `hi` il bordo diventa oro, e vuol dire "guarda questa". */

.tiles {
  display: grid;
  gap: clamp(12px, 2.4vw, 18px);
  margin: clamp(24px, 5vw, 40px) 0 0;
}

.tiles.two { grid-template-columns: 1fr; }
.tiles.three { grid-template-columns: 1fr; }

.tile {
  padding: clamp(22px, 5vw, 34px);
  border-radius: var(--r-xl);
  background: var(--panel);
  border: 1px solid var(--line);
}

.tile > :last-child { margin-bottom: 0; }
.tile h3, .tile h4 { margin-bottom: 8px; }
.tile p { font-size: clamp(15.5px, 3.8vw, 19px); line-height: 1.4; }

.tile.hi { border-color: var(--gold); }

/* Scheda con il solo titolo, come l'elenco "non costa niente": il titolo
   e' tutta la frase, e va centrato sul proprio peso. */
.tile.solo {
  padding: clamp(20px, 4.6vw, 30px) clamp(22px, 5vw, 34px);
  font-size: clamp(18px, 4.6vw, 26px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Il titolo dorato delle missioni. */
.tile .badge {
  display: block;
  font-size: clamp(17px, 4.2vw, 22px);
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

/* La quota del club: la cifra grande in oro e, sotto, la capsula che
   dice che l'importo non e' ancora deciso. Finche' non lo e', le due
   vanno sempre insieme. */
.tile .price {
  display: block;
  font-size: clamp(36px, 9vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin-bottom: 12px;
}

.tile .price small {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}

.pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: clamp(13px, 3.2vw, 15px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pill + p { margin-top: 16px; }

/* ── La citazione ───────────────────────────────────────────────────────
   Una riga sola, il filo d'oro a sinistra: e' la frase che il post lascia
   in fondo, quella che si ricorda. */

.quote {
  margin: clamp(26px, 5.4vw, 44px) 0 0;
  padding: 4px 0 4px clamp(18px, 3.4vw, 30px);
  border-left: 4px solid var(--gold);
  font-size: clamp(18px, 4.6vw, 28px);
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 22em;
}

/* ── L'elenco numerato ──────────────────────────────────────────────────
   Le cifre in Orbitron, dorate, dentro la scheda: gli stessi 01/02/03
   della card sulle squadre. */

/* Fuori da una colonna affiancata a uno screenshot, i passi si fermano
   prima del bordo: tre righe di testo larghe 1080px non si leggono, si
   scandagliano. */
.numbered {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 5vw, 40px) 0 0;
  max-width: 820px;
}

.split .numbered { max-width: none; }
.numbered li { margin: 0 0 clamp(12px, 2.4vw, 18px); }
.numbered li:last-child { margin-bottom: 0; }

.numbered .step {
  display: flex;
  gap: clamp(14px, 3vw, 24px);
  padding: clamp(20px, 4.6vw, 32px);
  border-radius: var(--r-xl);
  background: var(--panel);
  border: 1px solid var(--line);
}

.numbered .step.hi { border-color: var(--gold); }

.numbered .n {
  flex: 0 0 auto;
  font-family: var(--tech);
  font-size: clamp(16px, 3.6vw, 21px);
  font-weight: 700;
  color: var(--gold);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.numbered .n.blue { color: var(--blue); }
.numbered .step > div > :last-child { margin-bottom: 0; }
.numbered .step h4 { margin-bottom: 6px; }
.numbered .step p { font-size: clamp(15.5px, 3.8vw, 19px); line-height: 1.4; }

/* ── Il telefono ────────────────────────────────────────────────────────
   Una scocca sottile attorno allo screenshot, come nelle card. Non e' una
   cornice finta di un iPhone: e' un bordo e un raggio, quel tanto che
   basta a dire "questo e' lo schermo". */

/* Quanto largo: a 74vw lo screenshot veniva alto quanto tre quarti dello
   schermo, e una foto di telefono grande quanto il telefono che la
   guarda e' una presa in giro. A 52vw se ne vede uno intero con attorno
   il testo che lo spiega. Da 760px in su comanda la misura fissa.
   Il raggio segue la larghezza, se no a 200px la scocca e' un ovale. */
.phone {
  width: clamp(185px, 52vw, 300px);
  padding: 9px;
  border-radius: clamp(26px, 7.2vw, 42px);
  background: linear-gradient(160deg, #1B2336 0%, #0A0E18 60%);
  border: 1px solid #2A344A;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}

/* Il video sta nella cornice come ci sta un'immagine: stessa larghezza,
   stessi angoli. Vedi il filmato del torneo in club.html. */
.phone img,
.phone video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(clamp(26px, 7.2vw, 42px) - 9px);
}

/* L'anello acceso: si usa per la schermata che la sezione sta spiegando,
   una per pagina. */
.phone.ring {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 26px 70px rgba(76, 139, 255, 0.30),
    0 26px 60px rgba(0, 0, 0, 0.55);
}

.phone.ring.gold {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 26px 70px rgba(240, 194, 75, 0.22),
    0 26px 60px rgba(0, 0, 0, 0.55);
}

/* Telefono e testo affiancati. Sul telefono vero restano incolonnati, con
   lo screenshot sotto al testo che lo spiega. */
.split { display: grid; gap: clamp(30px, 7vw, 56px); align-items: center; }
.split .shot { display: flex; justify-content: center; }

/* ── I pulsanti ─────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: clamp(26px, 5vw, 40px) 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-glow) 0%, var(--blue) 48%, var(--blue-deep) 100%);
  box-shadow: 0 12px 30px rgba(76, 139, 255, 0.30);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.btn:hover { color: #fff; box-shadow: 0 14px 38px rgba(76, 139, 255, 0.42); }
.btn:active { transform: scale(0.98); }

.btn.ghost {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
}

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

.btn.gold {
  color: #0A0803;
  background: linear-gradient(135deg, #FFD97A 0%, var(--gold) 50%, #C99A2E 100%);
  box-shadow: 0 12px 30px rgba(240, 194, 75, 0.26);
}

.btn.gold:hover { color: #0A0803; box-shadow: 0 14px 38px rgba(240, 194, 75, 0.36); }

/* ── La copertina ───────────────────────────────────────────────────────
   Il logo, il marchio inciso, la frase. Centrata come la prima card del
   carosello, e alta quanto basta a non far vedere subito il resto. */

.cover {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(28px, 7vw, 56px) 0 clamp(48px, 10vw, 96px);
}

.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 92% 56% at 50% 2%,
    var(--glow-blue) 0%, transparent 64%);
}

.cover > * { position: relative; }

.cover .mark {
  width: min(280px, 58vw);
  height: auto;
  display: block;
  margin: 0 auto clamp(26px, 5vw, 42px);
  filter: drop-shadow(0 12px 48px rgba(76, 139, 255, 0.34));
}

.cover .kicker { margin-bottom: clamp(18px, 3.6vw, 28px); }
.cover .lead { margin-left: auto; margin-right: auto; }
.cover .actions { justify-content: center; align-items: center; }
.cover .actions .btn { width: 100%; max-width: 340px; }

/* L'intestazione delle pagine interne: stessa impaginazione, senza logo e
   allineata a sinistra, perche' li' comincia un testo da leggere. */
.page-head {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 7vw, 56px) 0 clamp(34px, 7vw, 56px);
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 60% at 78% 4%,
    var(--glow-blue) 0%, transparent 64%);
}

.page-head > * { position: relative; }
.page-head .lead { margin-bottom: 0; }

/* ── La striscia dei numeri ─────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: clamp(30px, 6vw, 48px) auto 0;
  max-width: 660px;
}

.stat {
  padding: clamp(14px, 3vw, 22px) 8px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: center;
}

.stat b {
  display: block;
  font-size: clamp(24px, 6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat span {
  display: block;
  font-family: var(--tech);
  font-size: clamp(10.5px, 2vw, 11px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 8px;
}

/* ── La barra di navigazione ────────────────────────────────────────────
   Come nell'app: non e' attaccata al bordo dello schermo, galleggia sopra
   il contenuto che le scorre dietro sfocandosi. Sul telefono sta in
   basso, a distanza di pollice; sul desktop, dove il pollice non c'entra
   niente, sale in cima. */

.nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 28px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 50;
  display: flex;
  height: 58px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(10, 14, 24, 0.72);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid #2A344A;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.62);
}

/* Dove il blur non c'e' (o e' disattivato) il vetro diventa quasi
   trasparente e il testo dietro lo attraversa: meglio una superficie
   piena. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(10, 14, 24, 0.96); }
}

.nav a {
  flex: 0 0 auto;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.nav a svg { width: 20px; height: 20px; display: block; }

.nav a:hover { color: var(--text-2); }

.nav a[aria-current="page"] {
  color: var(--blue-glow);
  background: rgba(76, 139, 255, 0.16);
  border-color: rgba(76, 139, 255, 0.34);
  font-weight: 600;
}

/* ── Richiamo ───────────────────────────────────────────────────────────
   Il riquadro azzurro dentro al testo delle pagine interne: una cosa che
   va letta prima di proseguire. */

.callout {
  padding: clamp(18px, 4vw, 26px);
  margin: clamp(22px, 4.4vw, 32px) 0;
  border-radius: var(--r-lg);
  background: rgba(76, 139, 255, 0.07);
  border: 1px solid rgba(76, 139, 255, 0.26);
  border-left: 3px solid var(--blue);
  color: var(--text-2);
  font-size: clamp(15.5px, 3.8vw, 17.5px);
}

.callout > :last-child { margin-bottom: 0; }

.callout.gold {
  background: rgba(240, 194, 75, 0.07);
  border-color: rgba(240, 194, 75, 0.26);
  border-left-color: var(--gold);
}

/* Ambra: si usa dove una conseguenza e' irreversibile e va vista prima di
   toccare, non per ogni nota di contorno. */
.callout.warn {
  background: rgba(255, 159, 10, 0.07);
  border-color: rgba(255, 159, 10, 0.28);
  border-left-color: var(--amber);
}

/* ── Elenco numerato in linea, per le pagine interne ────────────────── */

.steps { list-style: none; counter-reset: step; padding: 0; margin: 24px 0 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 52px;
  color: var(--text-2);
  font-size: clamp(16px, 4vw, 18px);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--tech);
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.steps li:last-child { padding-bottom: 0; }
.steps strong { display: block; margin-bottom: 3px; color: var(--text); }

/* ── Tabelle ────────────────────────────────────────────────────────────
   Sul telefono una tabella a tre colonne non si legge: o si stringe fino
   a spezzare ogni parola, o si trascina di lato e si perde l'intestazione.
   Qui ogni riga diventa una scheda e ogni cella si porta dietro il nome
   della sua colonna (`data-th`, messo nell'HTML). Da 760px in su, dove lo
   spazio c'e', torna una tabella vera. */

.table-scroll { margin: 24px 0 0; }

table { width: 100%; border-collapse: collapse; }

thead { display: none; }

tbody tr {
  display: block;
  padding: clamp(16px, 3.6vw, 20px);
  margin-bottom: 12px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}

tbody tr:last-child { margin-bottom: 0; }

tbody td {
  display: block;
  padding: 0;
  color: var(--text-2);
  font-size: 16px;
}

tbody td + td { margin-top: 12px; }

tbody td::before {
  content: attr(data-th);
  display: block;
  margin-bottom: 3px;
  font-family: var(--tech);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* La prima colonna e' quasi sempre il soggetto della riga: si comporta da
   titolo della scheda, e non ha bisogno di dire come si chiama. */
tbody td:first-child {
  color: var(--text);
  font-weight: 600;
  font-size: 17px;
}

tbody td:first-child::before { display: none; }

/* Una tabella di sole due colonne e' una lista di voci con un valore:
   l'etichetta della seconda colonna, ripetuta riga dopo riga, e' rumore. */
tbody tr:not(:has(td:nth-child(3))) td:nth-child(2)::before { display: none; }

/* ── Elenco di documenti ────────────────────────────────────────────── */

.doc-list { list-style: none; padding: 0; margin: clamp(24px, 5vw, 40px) 0 0; }

.doc-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}

.doc-list li:first-child { padding-top: 0; }
.doc-list li:last-child { padding-bottom: 0; border-bottom: none; }

.doc-list a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: clamp(17px, 4.2vw, 20px);
  font-weight: 600;
  margin-bottom: 2px;
}

.doc-list span { display: block; color: var(--text-2); font-size: 15.5px; }

/* ── Piede ──────────────────────────────────────────────────────────── */

.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 8vw, 80px);
  padding: clamp(36px, 7vw, 60px) 0 clamp(20px, 4vw, 34px);
  border-top: 1px solid var(--line-soft);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 20% 100%,
    var(--glow-navy) 0%, transparent 66%);
}

.site-footer > * { position: relative; }

/* Sei voci in fila, lette con il telefono in mano: alte quanto il
   testo sarebbero 22px, e si sbaglia link. I 44px non li fa il carattere,
   li fa il riempimento attorno. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 0 0 16px;
  margin-left: -4px;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--text-2);
  font-size: 15.5px;
}

.footer-nav a:hover { color: var(--text); }

.site-footer .social {
  font-family: var(--tech);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}

.site-footer .social a { color: var(--blue); }

/* ── Da 640px: due colonne dove servono ─────────────────────────────── */

@media (min-width: 640px) {
  .tiles.two { grid-template-columns: repeat(2, 1fr); }
  .tiles.three { grid-template-columns: repeat(2, 1fr); }
  .actions { flex-direction: row; flex-wrap: wrap; }
  .cover .actions .btn { width: auto; }
  .stats { gap: 14px; }
}

/* ── Da 760px: la tabella torna una tabella ─────────────────────────── */

@media (min-width: 760px) {
  body { font-size: 17px; }

  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  table { font-size: 16px; }

  thead { display: table-header-group; }

  thead th {
    text-align: left;
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-family: var(--tech);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  tbody tr {
    display: table-row;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }

  tbody tr:last-child { border-bottom: none; }

  tbody td {
    display: table-cell;
    padding: 14px 16px;
    vertical-align: top;
  }

  tbody td + td { margin-top: 0; }
  tbody td::before { display: none; }
  tbody td:first-child { font-size: 16px; }

  .split { grid-template-columns: 1fr minmax(0, 300px); }
  .split.flip { grid-template-columns: minmax(0, 300px) 1fr; }
  .split.flip .shot { order: -1; }
  .phone { width: 300px; }
}

/* ── Da 980px: la barra sale in cima, e le griglie si allargano ────── */

@media (min-width: 980px) {
  :root { --nav-clearance: 40px; --gutter: 40px; }

  body { padding-top: 84px; }

  .nav {
    top: 18px;
    bottom: auto;
    height: 50px;
    gap: 3px;
  }

  .nav a {
    min-width: 0;
    flex-direction: row;
    gap: 9px;
    padding: 0 20px;
    font-size: 14.5px;
    font-weight: 500;
  }

  .nav a svg { width: 17px; height: 17px; }

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

  .split { grid-template-columns: 1fr minmax(0, 340px); gap: 72px; }
  .split.flip { grid-template-columns: minmax(0, 340px) 1fr; }
  .phone { width: 340px; }

  .cover .mark { width: 320px; }
}