/* ---------- SELF-HOSTED FONTS ---------- */
@font-face{
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/manrope-variable-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: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/manrope-variable-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/poppins-300-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: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/poppins-300-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400-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: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500-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: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600-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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700-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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/poppins-800-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: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/poppins-800-latin-ext.woff2') format('woff2');
  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;
}

:root{
  --bg: #0a0a12;
  --bg-alt: #0f0f1a;
  --surface: #14141f;
  --surface-border: rgba(255,255,255,0.08);
  --text: #eef0f5;
  --text-muted: #a3a6b8;
  /* Era #ec1b7f. Su quel rosa il bianco stava a 4.18:1, sotto AA 4.5:1,
     e riguardava i tre elementi che portano testo bianco piccolo sul
     gradiente: .btn-primary (15.68px/600), .nav-cta (15.20px/600) e
     .pillar-tag (16px/700 — bold sotto i 18.66px e' ancora testo
     normale, non "large text"). Tutti e tre prendono il fondo da --grad,
     il cui punto peggiore e' lo stop 0%, cioe' questo token: correggerlo
     qui li sistema tutti e tre insieme.
     #e21376 porta il bianco a 4.58:1. Non serve piu' margine di cosi':
     WCAG si calcola sui colori DICHIARATI, non sui pixel resi, e lo
     stop 0% e' esattamente il valore dichiarato.
     La distanza dal rosa precedente e' dE2000 = 2.68, il confine sotto
     cui due campioni non si distinguono nemmeno affiancati. Tinta e
     saturazione non si muovono: cala L* di 2.6 punti, da 52.0 a 49.4.
     I nove rgba() decorativi nel foglio usano lo stesso valore in forma
     letterale (226,19,118): non possono leggere una variabile perche'
     serve il canale alpha, ma vanno tenuti allineati a mano. */
  --pink: #e21376;
  --pink-soft: #ff5fa8;
  --purple: #6c3ce9;
  --purple-soft: #9d7bff;
  /* Rosso di errore. Scelto per distanza di tinta dal rosa del brand
     (#ff5fa8, 333°): a 4° ne dista 31°, cosi' lo stato di errore non si
     confonde con l'accento del sito, che .form-note usa gia'.
     Contrasto 7.55:1 su --bg-alt e 7.24:1 su --surface: oltre AA 4.5:1
     per il testo e oltre il 3:1 richiesto per i bordi. */
  --color-error: #ff7b72;
  --color-error-soft: rgba(255,123,114,0.12);
  --grad: linear-gradient(120deg, var(--pink) 0%, var(--purple) 100%);
  --radius: 18px;
  --max-width: 1180px;
  --font-display: "Poppins", sans-serif;
  --font-body: "Manrope", sans-serif;

  /* Il sito esiste solo in versione scura. Dichiararlo fa usare al
     browser le proprie varianti scure per tutto cio' che non stiliamo
     noi e che spesso non e' stilabile affatto: il menu a tendina dei
     <select>, le scrollbar, il caret, le checkbox, e il riempimento
     automatico di Chrome, che senza questa riga resta giallo pallido
     sopra i campi scuri del form.

     Non interferisce con prefers-color-scheme: color-scheme dichiara
     cosa la PAGINA supporta, la media query legge cosa l'UTENTE
     preferisce. Sono due cose diverse. */
  color-scheme: dark;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: #fff;
  line-height: 1.2;
  margin: 0 0 0.6em;
}
/* h1 aveva solo il peso e nessuna dimensione: fuori dalla hero cadeva
   sul foglio dell'user agent, che per la resa suggerita dallo spec HTML
   riduce a 1.5em gli h1 dentro <section> — 24px, meno degli h2 che vanno
   da 27.2 a 40. Il titolo di pagina risultava piu' piccolo dei titoli di
   sezione. Valeva per le pagine legali, vale per la 404 e varrebbe per
   qualunque pagina futura: la dimensione va data qui, una volta.
   .hero h1 e' piu' specifica e continua a vincere sulla home. */
h1{ font-weight:700; font-size: clamp(2rem, 3.6vw, 2.75rem); }
h2{ font-weight:600; font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3{ font-weight:600; font-size: 1.2rem; }
h4{ font-weight:600; font-size: 1.05rem; }
p{ margin: 0 0 1em; color: var(--text-muted); }
a{ color: inherit; text-decoration:none; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.container.narrow{ max-width: 760px; }
.container.center{ text-align:center; }

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background: var(--surface);
  color:#fff;
  border:1px solid var(--pink);
  border-radius: 0 0 12px 0;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  
}
.skip-link:focus{ left:0; outline:none; }

/* visibile solo agli screen reader */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space:nowrap;
  border:0;
}

.bg-glow{
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 0%, rgba(108,60,233,0.25), transparent 45%),
    radial-gradient(circle at 90% 20%, rgba(226,19,118,0.18), transparent 45%);
  pointer-events: none;
}

/* ---------- HEADER ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,18,0.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--surface-border);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 76px;
}
.brand-logo{ max-height: 75px; width:auto; display:block; }
.main-nav{
  display:flex;
  align-items:center;
  gap: 28px;
  font-size: 0.95rem;
  font-weight: 500;
}
.main-nav a{
  color: var(--text-muted);
  transition: color .2s ease;
  white-space: nowrap;
}
.main-nav a:hover{ color: #fff; }
.nav-cta{
  background: var(--grad);
  color:#fff !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight:600;
}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px;
}
.nav-toggle span{
  width: 24px; height: 2px;
  background: #fff;
  display:block;
  border-radius: 2px;
}
.lang-select{
  background: var(--surface);
  color: #fff;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
  transition: border-color .2s ease;
}
.lang-select:hover, .lang-select:focus{ border-color: var(--pink); outline:none; }
/* Serve una regola dedicata, non basta il select:focus-visible generico
   piu' in basso: quello e' (0,1,1) e perdeva contro l'outline:none della
   riga sopra, che e' (0,2,0). Risultato, il selettore lingua era l'unico
   controllo del sito senza indicatore di focus da tastiera — e il bordo
   rosa non lo sostituisce, perche' e' identico a quello di :hover.
   L'outline e' disegnato fuori dal bordo, quindi non copre la freccia.

   outline-offset: 0 e non 2px: con l'offset l'anello si staccava dal
   controllo e si leggeva come un alone luminoso attorno al bordo rosa,
   due rosa invece di uno. A filo, e nella stessa tinta del bordo, i due
   tratti si fondono in un unico bordo netto di ~3px. E' anche la
   distinzione dallo stato :hover, che resta a 1px. */
.lang-select:focus-visible{
  outline: 2px solid var(--pink);
  outline-offset: 0;
}
/* Dove il popup lo disegna il browser (Chromium e Firefox su Windows e
   Linux) queste due righe colorano le voci. Dove lo disegna il sistema
   operativo — Safari ovunque, Chrome su macOS, i picker di iOS e Android
   — vengono ignorate, e l'unica leva resta color-scheme: dark su :root.
   Cornice, angoli, ombra e colore di evidenziazione del popup sono chrome
   nativo su ogni piattaforma: non esiste CSS che li raggiunga. */
/* --surface e' il fondo piu' chiaro della palette e resta comunque quasi
   nero. Per staccare il menu dal fondo pagina lo si schiarisce a partire
   dalla variabile invece di introdurre un colore nuovo: la prima riga fa
   da ripiego dove color-mix non c'e'. */
.lang-select option{ background: var(--surface); color: var(--text); }
.lang-select option{ background: color-mix(in srgb, var(--surface) 86%, #fff); }
/* L'opzione corrente marcata con la tinta del sito invece che con il
   blu di sistema. Vale solo dove il popup e' del browser. */
.lang-select option:checked{
  background: var(--surface);
  color: var(--pink-soft);
  font-weight: 700;
}

/* Fallback del selettore lingua, visibile solo senza JavaScript: il
   <noscript> e' display:none quando lo scripting e' attivo, quindi con
   JS non occupa spazio e non entra nell'albero di accessibilita'.

   Sta su una riga propria e NON dentro .header-inner. Quello e' un flex
   alto 76px con logo e hamburger: a 320px il contenuto disponibile e'
   272px, il logo ne occupa 143 e il pulsante ~30, restano 99px per
   cinque pillole. Non ci stanno. Una riga a se' con flex-wrap non puo'
   rompersi a nessuna larghezza.

   Nemmeno dentro .main-nav: a <=720px quel pannello e' opacity:0 e
   pointer-events:none finche' JS non aggiunge .open, quindi i link
   sarebbero irraggiungibili proprio dove il fallback serve. */
.lang-links-row{
  display:flex;
  justify-content:center;
  padding: 8px 24px 10px;
  border-top: 1px solid var(--surface-border);
}
.lang-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 6px;
  list-style:none;
  margin:0;
  padding:0;
}
.lang-links a{
  display:block;
  padding: 5px 11px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color .15s ease, border-color .15s ease;
}
.lang-links a:hover{ color:#fff; border-color: var(--pink); }
.lang-links a[aria-current="page"]{
  color:#fff;
  border-color: var(--pink);
  background: rgba(226,19,118,0.16);
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
  border: none;
}
.btn-primary{
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(226,19,118,0.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -6px rgba(226,19,118,0.65); }
.btn-ghost{
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.btn-ghost:hover{ border-color: rgba(255,255,255,0.6); }
.btn-block{ width:100%; text-align:center; }
.btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-primary:disabled:hover{
  transform: none;
  box-shadow: 0 10px 30px -8px rgba(226,19,118,0.55);
}

/* ---------- HERO ---------- */
.hero{
  position: relative;
  padding: 120px 0 110px;
  min-height: 92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
/* <picture> e' display:inline: senza questa regola l'height:100%
   dell'img si risolverebbe contro una scatola inline di altezza auto
   e lo sfondo dell'hero collasserebbe. Non e' una modifica al design,
   e' cio' che lo conserva ora che l'img non e' piu' figlia diretta. */
.hero-bg picture{ display:block; width:100%; height:100%; }
.hero-bg img{
  width:100%; height:100%; object-fit: cover; object-position: center 30%;
  opacity: 0.5;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,18,0.55) 0%, rgba(10,10,18,0.85) 60%, var(--bg) 100%),
              linear-gradient(90deg, rgba(10,10,18,0.9) 0%, rgba(10,10,18,0.35) 55%);
}
.hero-content{ position:relative; z-index:1; max-width: 760px; }
.eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight:700;
  color: var(--pink-soft);
  margin-bottom: 18px;
}
.hero h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom: 24px; }
.grad-text{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead{ font-size: 1.12rem; color: #d7d9e6; }
.hero-sub{ font-size: 0.98rem; }
.hero-tagline{
  font-family: var(--font-display);
  font-weight:600;
  color:#fff;
  font-size: 1.05rem;
  margin-bottom: 34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- SECTIONS ---------- */
.section{ padding: 96px 0; }
.section-alt{ background: var(--bg-alt); }
.section-title{ text-align:center; margin-bottom: 56px; }
.lead{ font-size: 1.15rem; color:#d7d9e6; }
.highlight{
  font-family: var(--font-display);
  font-weight:600;
  color:#fff;
  font-size: 1.1rem;
}

/* ---------- DIFFERENTIATORS ---------- */
.section-diff{ background: var(--bg-alt); }
.diff-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.diff-card{
  background: linear-gradient(160deg, rgba(108,60,233,0.14), rgba(226,19,118,0.09));
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 36px;
}
.diff-icon{ font-size: 2rem; margin-bottom: 16px; }
.diff-card h3{ margin-bottom: 14px; }
.diff-card p{ margin-bottom: 0; }
.diff-stat{
  display:flex;
  align-items:baseline;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--surface-border);
}
.diff-stat-num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height:1;
}
.diff-stat-label{
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 220px;
  line-height:1.4;
}
.diff-highlights{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.diff-highlight{
  text-align:center;
  padding: 28px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--surface-border);
}
.diff-highlight-icon{
  width: 46px; height:46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--grad);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.3rem;
}
/* h3 e non h4: questi quattro riquadri stanno in .diff-highlights, che e'
   fratello di .diff-grid, quindi dipendono dall'h2 di sezione e non dagli
   h3 delle due card che li precedono. La dimensione era e resta 1rem,
   dichiarata qui: la resa non cambia. */
.diff-highlight h3{ margin-bottom: 8px; font-size: 1rem; }
.diff-highlight p{ margin:0; font-size: 0.9rem; }

/* ---------- FEATURE GRID ---------- */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 32px;
  transition: transform .25s ease, border-color .25s ease;
}
.feature-card:hover{ transform: translateY(-4px); border-color: rgba(226,19,118,0.4); }
.feature-card-wide{ grid-column: span 3; }
.feature-icon{ font-size: 1.8rem; margin-bottom: 14px; }
.feature-card h3{ margin-bottom: 12px; }
.feature-list-label{
  color:#fff; font-weight:600; margin-bottom: 8px; font-size:0.92rem;
}
.feature-list{
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
}
.feature-list li{
  color: var(--text-muted);
  font-size: 0.95rem;
  padding-left: 20px;
  position: relative;
}
.feature-list li::before{
  content: "";
  position:absolute; left:0; top: 0.55em;
  width:8px; height:8px;
  border-radius:50%;
  background: var(--grad);
}
.feature-note{
  font-style: italic;
  color: var(--pink-soft);
  margin:0;
}

/* ---------- PILLARS ---------- */
.pillars{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar{
  background: linear-gradient(160deg, rgba(108,60,233,0.12), rgba(226,19,118,0.08));
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 36px 28px;
}
.pillar-tag{
  display:inline-block;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1rem;
  color:#fff;
  background: var(--grad);
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pillar p{ margin:0; }

/* ---------- CONTROL SECTION ---------- */
.section-control{ padding: 100px 0; }
.control-inner{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items:center;
}
.control-photo img{
  width: 200px; height:200px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid transparent;
  background: var(--grad);
  padding: 4px;
  background-clip: padding-box;
  box-shadow: 0 0 0 3px rgba(226,19,118,0.25), 0 20px 50px -10px rgba(108,60,233,0.4);
}
.control-text p:last-child{ margin-bottom:0; }

/* ---------- WHY GRID ---------- */
.why-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
  max-width: 920px;
  margin: 0 auto;
}
.why-item{
  display:flex;
  gap: 16px;
  align-items:flex-start;
}
.why-check{
  flex-shrink:0;
  width: 30px; height:30px;
  border-radius: 50%;
  background: var(--grad);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 0.9rem;
  font-weight:700;
  margin-top: 2px;
}
/* h3 e non h4: la sezione #perche' aveva un h2 seguito da cinque h4, cioe'
   un livello saltato. font-size dichiarato qui perche' la regola globale
   h3 vale 1.2rem contro gli 1.05rem di h4: senza questa riga i cinque
   titoli crescerebbero da 16.8 a 19.2px. Con la riga la resa e' identica
   a prima — tra h3 e h4 l'unica differenza e' la dimensione, il peso e'
   600 in entrambi e il resto viene dalla regola h1,h2,h3,h4. */
.why-item h3{ margin-bottom: 4px; font-size: 1.05rem; }
.why-item p{ margin:0; font-size: 0.95rem; }

/* ---------- CLOSING ---------- */
.closing-section{ text-align:center; }
.closing-tagline{
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight:700;
  color:#fff;
  margin-top: 20px;
}

/* ---------- CONTACT ---------- */
.section-contact{ background: var(--bg-alt); }
.contact-form{
  margin-top: 40px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-single{ grid-template-columns: 1fr; }
/* Riga flex invece di checkbox in position:absolute dentro un padding.
   Con l'assoluto la casella non riserva il proprio spazio: la spaziatura
   dipendeva da un padding-left di 26px scelto a mano, e qualunque cosa
   alterasse la larghezza resa della casella — i minimi di rendering dei
   browser mobili sopra tutto — la faceva sovrapporre al testo o lo
   spingeva a capo. In flex la casella occupa la sua colonna e il gap la
   separa dal testo, senza numeri da indovinare. */
.form-consent{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.form-consent input[type="checkbox"]{
  /* flex:0 0 16px impedisce che venga compressa quando il testo e
     lungo; width e height la tengono quadrata anche dove il browser
     avrebbe una sua idea. */
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  /* La riga di testo e alta 0.85rem x 1.5 = 20.4px e la casella 16:
     2px la centrano sulla PRIMA riga invece che sul blocco intero. */
  margin-top: 2px;
  accent-color: var(--pink);
  cursor: pointer;
}
/* label e link restano dentro un unico contenitore: come figli diretti
   del flex diventerebbero due colonne, e il link si staccherebbe dalla
   frase di cui e la fine. */
.form-consent-text{ flex: 1 1 auto; }
.form-consent label{ cursor: pointer; }
.form-consent a{
  color: var(--pink-soft);
  font-weight: 600;
  text-decoration: underline;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color: var(--pink);
}

/* Etichette dei campi. Prima non esistevano: l'unica identificazione era
   il placeholder, che sparisce alla prima battuta — chi si interrompe a
   meta' modulo non sa piu' cosa sta compilando (WCAG 3.3.2, livello A).
   Ora sono visibili e permanenti, e i placeholder sono stati rimossi
   perche' ripetevano la stessa stringa.
   Figlio diretto di .field: la <label> del consenso e' annidata in
   .form-consent > .form-consent-text e mantiene il suo stile.
   Il gap di .contact-form e' 16px e vale fra i .field, non dentro: la
   distanza label-campo la da' questo margin, e resta contenuta perche'
   i due elementi devono leggersi come una cosa sola. */
.contact-form .field > label{
  display:block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.form-note{
  text-align:center;
  color: var(--pink-soft);
  font-weight:600;
  min-height: 1.4em;
}
.contact-alt{
  margin-top: 28px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.contact-alt a{ color: var(--pink-soft); font-weight:600; }

/* ---------- VALIDAZIONE DEL FORM ---------- */

/* .btn imposta display:inline-block e vincerebbe sull'attributo hidden,
   che vive nel foglio dell'utente-agente e ha percio' priorita' minore.
   Senza questa riga il pulsante "riprova" sarebbe visibile da subito. */
[hidden]{ display:none !important; }

/* Il messaggio d'errore si mostra da solo quando ha del testo: il JS
   scrive textContent e basta, non deve anche ricordarsi di alzare una
   classe. Un errore impostato ma invisibile diventa impossibile. */
.field-error{
  display:none;
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-error);
}
.field-error:not(:empty){ display:block; }

.contact-form input,
.contact-form textarea{
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-consent{
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* Piu' in basso di .contact-form input:focus, quindi vince a parita' di
   specificita': un campo invalido resta rosso anche mentre lo si compila. */
.contact-form input.is-invalid,
.contact-form textarea.is-invalid,
.contact-form input.is-invalid:focus,
.contact-form textarea.is-invalid:focus{
  border-color: var(--color-error);
}

/* Focus da tastiera. Prima non esisteva: outline:none era applicato senza
   un sostituto distinguibile, e il bordo rosa di :focus e' identico a
   quello di :hover, quindi chi naviga da tastiera non sapeva dov'era.
   :focus-visible non scatta sul clic del mouse, quindi il design a bordo
   pulito resta intatto per chi usa il puntatore. */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--pink-soft);
  outline-offset: 2px;
}
.contact-form input.is-invalid:focus-visible,
.contact-form textarea.is-invalid:focus-visible{
  outline-color: var(--color-error);
}

/* Una casella di 16px non regge da sola il peso di uno stato di errore:
   si evidenzia il contenitore. box-shadow invece di padding perche' la
   checkbox e' in position:absolute e il padding la sposterebbe; lo spread
   dipinge un'area piu' ampia del testo senza toccare il layout. */
.form-consent.is-invalid{
  border-radius: 8px;
  background: var(--color-error-soft);
  box-shadow: 0 0 0 10px var(--color-error-soft);
}
.form-consent.is-invalid input[type="checkbox"]{
  accent-color: var(--color-error);
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

.form-note.is-error{ color: var(--color-error); }

/* Spinner: solo bordi e una rotazione, nessuna immagine. */
.btn-spinner{
  display:none;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -3px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
.btn.is-sending .btn-spinner{ display:inline-block; }
@keyframes btn-spin{ to{ transform: rotate(360deg); } }

/* Mostrato solo dal <style> dentro <noscript>, che alza display:block.
   Di default e' nascosto: con JavaScript attivo il form funziona e
   questo messaggio non ha ragione di esistere. */
.form-noscript{
  display:none;
  margin-top: 40px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Esito positivo: sostituisce il form, non lo affianca. Nessun display
   dichiarato, cosi' l'attributo hidden continua a funzionare. */
.form-success{
  margin-top: 40px;
  padding: 36px 24px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  text-align:center;
}
.form-success-icon{ color: var(--pink-soft); margin-bottom: 14px; }
.form-success h3{ margin-bottom: 8px; }
.form-success p{ margin:0; color: var(--text-muted); }

/* Trappola anti-spam del form: un campo che un essere umano non vede e
   non puo' raggiungere, e che i bot compilano. Era style="display:none"
   nel markup, che la CSP blocca — e un honeypot visibile e' un campo in
   piu' accanto al consenso.
   display:none lo toglie dal layout e dall'ordine di tabulazione in un
   colpo solo. !important perche' la sua invisibilita' non e' estetica:
   se una regola futura lo mostrasse, il form chiederebbe a tutti di
   compilare una casella che serve a scartare i bot. */
.honeypot{ display:none !important; }

/* Usata solo dalla 404, che ha i pulsanti centrati invece che allineati
   a sinistra come nella hero. Era anch'essa un attributo style. */
.hero-actions-center{ justify-content:center; }

/* Le cinque frasi della 404, una per lingua. Uniformi e senza gerarchia
   fra loro: l'h1 "404" porta gia' il significato in modo neutro rispetto
   alla lingua, quindi nessuna delle cinque e' il messaggio "principale".
   Nessun bullet: la lista dichiara il parallelismo alla tecnologia
   assistiva, non serve mostrarlo anche come pallini. */
.error-messages{
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 1rem;
  color: var(--text-muted);
}

/* I cinque link della 404 non avevano alcuna classe, quindi cadevano su
   a{color:inherit;text-decoration:none} — testo bianco identico al
   contenuto attorno, senza nessun segno di essere cliccabile. Non era
   solo colore: non c'era affordance di alcun tipo. .site-footer a
   ripristina l'underline per il footer, ma la 404 non ha footer.
   --pink-soft su --bg e' 7.00:1, e la sottolineatura non lascia il
   riconoscimento al solo colore. */
.error-langs a{
  color: var(--pink-soft);
  text-decoration: underline;
  font-weight: 600;
}

/* ---------- PAGINE LEGALI ---------- */

/* La dimensione dell'h1 non e' qui: sta nella regola globale, perche' il
   problema non era delle pagine legali ma di ogni h1 fuori dalla hero.
   Qui resta solo cio' che e' proprio di una pagina da leggere.

   Gli h2 della home sono titoli-insegna centrati che aprono una sezione
   a tutta pagina, e 40px la' sono giusti. Dentro un documento che si
   legge riga dopo riga sono un cartellone. Scala ridotta, e piu' aria
   sopra che sotto: un heading appartiene al testo che introduce, non a
   quello che chiude. */
.section-legal h2{
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.3;
  margin: 2.2em 0 0.5em;
}

/* Misura di riga. .container.narrow e' 760px: con Manrope a 16px fanno
   circa 95 caratteri, oltre il punto in cui l'occhio perde il capo riga
   tornando a sinistra. 72ch meno i 48px di padding che il container ha
   gia' (box-sizing: border-box) scendono intorno ai 76. In ch e non in
   px cosi' la misura regge se un giorno cambia la dimensione del testo. */
.section-legal .container.narrow{ max-width: 72ch; }

/* 1.65 va bene per i paragrafi brevi della home. Qui sono 37 paragrafi
   di prosa legale di fila: un filo di interlinea in piu' riduce la
   fatica su un testo che nessuno legge per piacere. */
.section-legal p{ line-height: 1.7; }
/* L'indirizzo nel corpo dell'informativa e' l'unico recapito per
   esercitare i diritti: era testo semplice, da copiare a mano. Come link
   serve un colore, perche' a{} globale azzera anche text-decoration.
   --pink-soft su --bg e' 7.00:1, e l'underline non affida il
   riconoscimento al solo colore. */
.section-legal a{
  color: var(--pink-soft);
  text-decoration: underline;
}

/* ---------- FOOTER ---------- */
.site-footer{
  padding: 40px 0;
  border-top: 1px solid var(--surface-border);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 16px;
}
.site-footer p{ margin:0; font-size: 0.85rem; }
/* Il footer ha due righe di testo: copyright e dati legali. */
.footer-legal{ display:flex; flex-direction:column; gap: 6px; }
/* a{} globale azzera color e text-decoration: senza questa regola il
   link alla privacy sarebbe indistinguibile dal testo intorno. */
.site-footer a{ text-decoration: underline; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
  .feature-card-wide{ grid-column: span 2; }
  .pillars{ grid-template-columns: 1fr; }
  .control-inner{ grid-template-columns: 1fr; text-align:center; }
  .control-photo{ display:flex; justify-content:center; }
  .diff-grid{ grid-template-columns: 1fr; }
  .diff-highlights{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .main-nav{
    position:absolute;
    top: 76px; left:0; right:0;
    background: rgba(10,10,18,0.97);
    backdrop-filter: blur(14px);
    flex-direction:column;
    align-items:flex-start;
    padding: 20px 24px 28px;
    gap: 18px;
    border-bottom: 1px solid var(--surface-border);
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition: all .25s ease;
  }
  .main-nav.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:flex; }
  .nav-cta{ margin-top: 4px; }
  .feature-grid{ grid-template-columns: 1fr; }
  .feature-card-wide{ grid-column: span 1; }
  .feature-list{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  /* Su mobile il distacco fra navbar e contenuto veniva da due cose
     insieme: i 100px di padding-top e min-height:92vh con
     align-items:center, che centra il contenuto e aggiunge meta' dello
     spazio libero sopra. Su un telefono da 844px erano circa 138px di
     vuoto. min-height:auto toglie il centraggio, cosi il contenuto parte
     esattamente dopo il padding, che scende a 48px. */
  .hero{ padding: 48px 0 64px; min-height: auto; text-align:left; }
  .diff-highlights{ grid-template-columns: 1fr; }
}

/* Chi ha chiesto meno animazioni le ottiene su tutto il sito, incluse le
   cinque transizioni gia' presenti prima di questo blocco. Lo spinner si
   ferma: lo stato di invio resta comunque comunicato dal testo del
   pulsante e da aria-busy, quindi non si perde informazione.
   scroll-behavior qui non basta per scrollIntoView({behavior:'smooth'}),
   che ignora il CSS: quel caso e' gestito in script.js. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}