/* ============ NextApp — foglio di stile unico ============
   I colori sono campionati dal biglietto da visita (2026-08-03).
   Cambiare un colore qui lo cambia in tutto il sito.                */

@font-face { font-family: Poppins; font-weight: 400; font-display: swap;
             src: url('../font/poppins-400.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap;
             src: url('../font/poppins-600.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap;
             src: url('../font/poppins-700.woff2') format('woff2'); }

:root {
  --blu-notte:    #05091C;
  --blu-fondo:    #071333;
  --blu-carta:    #0F1C48;
  --blu-bagliore: #1A418E;
  --blu-nextapp:  #58A0FC;
  --bianco:       #FFFFFF;
  --testo:        #D5DEF2;
  --testo-tenue:  #9FB0D0;
  --whatsapp:     #25D366;

  --larghezza:  1120px;
  --raggio:     18px;
  --respiro:    clamp(64px, 10vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  color: var(--testo);
  background: var(--blu-fondo);
  -webkit-font-smoothing: antialiased;
}

/* La trama a griglia e il bagliore del retro del biglietto, fissi dietro tutto. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(rgba(88,160,252,.055) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(88,160,252,.055) 1px, transparent 1px) 0 0 / 56px 100%,
    var(--blu-fondo);
}
body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  right: -18vw; bottom: -22vw; width: 68vw; height: 68vw;
  background: radial-gradient(circle, var(--blu-bagliore) 0%, transparent 62%);
  opacity: .55;
}

h1, h2, h3 { color: var(--bianco); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(38px, 7.4vw, 74px); letter-spacing: -.015em; text-transform: uppercase; }
h2 { font-size: clamp(28px, 4.4vw, 44px); letter-spacing: -.01em; }
h3 { font-size: clamp(20px, 2.4vw, 26px); }
p  { margin: 0 0 1em; }
a  { color: var(--blu-nextapp); }

.contenitore { width: min(100% - 40px, var(--larghezza)); margin-inline: auto; }
.sezione     { padding-block: var(--respiro); }

/* L'occhiello spaziato è la firma tipografica del biglietto. */
.occhiello {
  display: block; margin-bottom: 14px;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase; color: var(--blu-nextapp);
}

.pulsante {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease;
}
.pulsante:hover { transform: translateY(-2px); }
.pulsante--whatsapp {
  background: var(--blu-nextapp); color: var(--blu-notte);
  box-shadow: 0 10px 30px rgba(88,160,252,.28);
}
.pulsante--vuoto {
  background: transparent; color: var(--bianco); border-color: rgba(213,222,242,.28);
}

.scheda {
  background: var(--blu-carta); border: 1px solid rgba(88,160,252,.16);
  border-radius: var(--raggio); padding: 28px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ Testata ============ */
.testata {
  min-height: 100svh; display: grid; align-items: center;
  padding-block: 56px 40px; text-align: center;
}
.testata__dentro { display: grid; justify-items: center; }

/* Il logo riempie la prima schermata: è una richiesta esplicita, non un marchietto.
   Su altezze normali (telefono compreso) il tetto è solo in larghezza, come prima: qui
   resta sempre a piena misura (360px su computer). Il tetto in altezza si aggiunge solo
   dentro la media query delle finestre basse, più sotto: non deve rimpicciolire il logo
   su una finestra normale. */
.testata__logo {
  width: min(78vw, 360px); height: auto; margin-bottom: clamp(20px, 4vw, 36px);
  animation: entra-logo .9s cubic-bezier(.22,.61,.36,1) both;
}
.testata .occhiello  { animation: entra-su .7s .35s cubic-bezier(.22,.61,.36,1) both; }
/* max-width allargato (era 15ch): il titolo va a capo su 2 righe a computer invece di 4,
   liberando lo spazio verticale che spingeva i pulsanti sotto la piega. */
.testata h1          { max-width: 24ch; animation: entra-su .7s .5s cubic-bezier(.22,.61,.36,1) both; }
.testata__sotto {
  max-width: 46rem; color: var(--testo-tenue); font-size: clamp(16px, 2vw, 19px);
  animation: entra-su .7s .65s cubic-bezier(.22,.61,.36,1) both;
}
.testata__pulsanti {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 18px;
  animation: entra-su .7s .8s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes entra-logo {
  from { opacity: 0; transform: translateY(26px) scale(.94); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes entra-su {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .testata { min-height: auto; padding-block: 40px 28px; }
  /* Sul telefono la larghezza disponibile è troppo stretta perché il titolo stia su 2 righe
     come a computer: qui riduciamo solo la dimensione del titolo (non il logo) finché non
     entra in 3 righe, per lasciare il pulsante WhatsApp sopra la piega. */
  .testata h1 { font-size: clamp(27px, 7.6vw, 38px); }
  .testata__pulsanti .pulsante { width: 100%; justify-content: center; }
}

/* Finestre basse (un portatile senza barra indirizzi a piena altezza, ma anche un telefono
   con poco spazio verticale come 390×720): qui, e solo qui, il logo prende anche un tetto in
   altezza (width: auto lo lascia proporzionato) e i margini verticali si stringono. Vale per
   qualunque larghezza: la altezza è il problema, non la larghezza. */
@media (max-height: 820px) {
  .testata { padding-block: 36px 24px; }
  .testata__logo { width: auto; height: 34svh; margin-bottom: 14px; }
  .testata__pulsanti { margin-top: 12px; }
}
/* Il titolo invece va abbassato solo sulle larghezze da computer: sul telefono ha già la
   sua regola dedicata qui sopra (clamp legato a vw), che non va toccata. */
@media (max-height: 820px) and (min-width: 641px) {
  .testata h1 { font-size: 52px; }
}

/* ============ Comparsa all'ingresso in schermo (osservate da sito.js) ============ */
/* Il contenuto è visibile per difetto: si nasconde solo se il JavaScript c'è (classe "js"
   messa dallo script inline in <head>), ed è lui a rivelarlo. Senza JavaScript, o se
   l'osservatore non scatta per qualunque motivo, non sparisce niente: vedi la rete di
   sicurezza a tempo in sito.js. */
.js [data-entra] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js [data-entra].e-visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-entra] { opacity: 1; transform: none; } }

/* ============ Fila dei clienti ============ */
.clienti { padding-block: 26px; border-block: 1px solid rgba(88,160,252,.12); }
.clienti__fila {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px);
  align-items: center; justify-content: center;
}
/* Nomi scritti, non loghi: i tre marchi disponibili hanno tutti fondo chiaro opaco e sul
   blu notte diventerebbero rettangoli bianchi (verificato il 2026-08-03). */
.clienti__nome {
  font-size: clamp(14px, 1.8vw, 17px); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--testo);
}
.clienti__dimostrativo {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--testo-tenue); border: 1px dashed rgba(159,176,208,.4);
  border-radius: 8px; padding: 8px 12px;
}

/* ============ Lavori ============ */
.sezione__intro { max-width: 52rem; color: var(--testo-tenue); font-size: clamp(16px, 1.9vw, 18px); }
.lavori { display: grid; gap: 26px; margin-top: 44px; }
@media (min-width: 860px) { .lavori { grid-template-columns: repeat(2, 1fr); } }

.lavoro { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.lavoro__figura { display: block; line-height: 0; background: var(--blu-notte); }
.lavoro__figura img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  transition: transform .5s ease;
}
.lavoro:hover .lavoro__figura img { transform: scale(1.03); }
.lavoro__testo { padding: 24px 26px 28px; }
.lavoro__settore {
  display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blu-nextapp);
}
.lavoro__settore--demo { color: var(--testo-tenue); }
.lavoro h3 { margin-bottom: .35em; text-wrap: balance; }
.lavoro h3 a { color: var(--bianco); text-decoration: none; }
.lavoro h3 a:hover { color: var(--blu-nextapp); }
.lavoro p { color: var(--testo-tenue); margin-bottom: 14px; }
.lavoro__vai { font-weight: 600; font-size: 14px; color: var(--blu-nextapp); }
.lavoro__vai::after { content: ' →'; }

/* ============ Servizi ============ */
.servizi, .formule { display: grid; gap: 24px; margin-top: 44px; }
@media (min-width: 860px) {
  .servizi { grid-template-columns: repeat(3, 1fr); }
  .formule { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.servizio p, .formula__a-chi { color: var(--testo-tenue); }
.servizio ul, .formula ul { margin: 0; padding-left: 0; list-style: none; }
.servizio li, .formula li {
  position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15px;
}
.servizio li::before, .formula li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--blu-nextapp);
}

/* ============ Come lavoriamo ============ */
.passi { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 860px) { .passi { grid-template-columns: repeat(3, 1fr); } }
.passo {
  position: relative; padding: 30px 26px 26px;
  background: var(--blu-carta); border: 1px solid rgba(88,160,252,.16); border-radius: var(--raggio);
}
.passo__numero {
  position: absolute; top: -22px; left: 26px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--blu-nextapp); color: var(--blu-notte); font-weight: 700; font-size: 20px;
}
.passo h3 { margin-top: 10px; }
.passo p { color: var(--testo-tenue); }
.passo__tempo {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: rgba(88,160,252,.14); color: var(--blu-nextapp);
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
}
.metodo__chiusura { margin-top: 40px; text-align: center; }

/* ============ Formule ============ */
.formula { position: relative; }
.formula--evidenza { border-color: var(--blu-nextapp); box-shadow: 0 18px 50px rgba(88,160,252,.14); }
.formula__nastro {
  position: absolute; top: -13px; left: 26px; padding: 5px 14px; border-radius: 999px;
  background: var(--blu-nextapp); color: var(--blu-notte);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.formule__nota { margin-top: 32px; color: var(--testo-tenue); max-width: 46rem; }

@media (max-width: 640px) {
  .metodo__chiusura .pulsante { width: 100%; justify-content: center; }
}

/* ============ Contatti ============ */
.contatti__dentro { text-align: center; display: grid; justify-items: center; }
.contatti__intro { max-width: 44rem; color: var(--testo-tenue); font-size: clamp(16px, 2vw, 19px); }
.pulsante--grande { margin-top: 12px; padding: 20px 40px; font-size: 18px; }

.recapiti {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; gap: 22px; width: 100%;
}
@media (min-width: 720px) { .recapiti { grid-template-columns: repeat(3, 1fr); } }
.recapiti li { display: grid; gap: 4px; }
.recapiti__voce {
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--blu-nextapp);
}
.recapiti a { color: var(--bianco); text-decoration: none; font-size: 17px; }
.recapiti a:hover { color: var(--blu-nextapp); }

/* ============ Navigazione delle pagine interne ============ */
.navigazione { padding-block: 20px; border-bottom: 1px solid rgba(88,160,252,.12); }
.navigazione__dentro { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.navigazione__indietro { color: var(--testo-tenue); text-decoration: none; font-size: 14px; font-weight: 600; }
.navigazione__indietro::before { content: '← '; }
.navigazione__indietro:hover { color: var(--blu-nextapp); }

/* ============ Casi studio ============ */
.caso__testata { padding-block: clamp(52px, 8vw, 96px) clamp(32px, 5vw, 56px); }
.caso__testata h1 { font-size: clamp(34px, 6vw, 62px); }
.caso__sommario { max-width: 52rem; color: var(--testo-tenue); font-size: clamp(17px, 2.1vw, 21px); }
.caso__sito { display: inline-block; margin-top: 8px; font-weight: 600; }

.caso__due { display: grid; gap: 36px; }
@media (min-width: 860px) { .caso__due { grid-template-columns: 1fr 1fr; gap: 56px; } }
/* Dentro un capitolo i due blocchi stanno sotto al titolo del capitolo: serve solo aria sopra. */
.caso__due--capitolo { margin-top: 28px; }

.caso__elenco, .caso__risultati { list-style: none; margin: 0; padding: 0; }
.caso__elenco li, .caso__risultati li {
  position: relative; padding-left: 28px; margin-bottom: 12px;
}
.caso__elenco li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--blu-nextapp);
}
.caso__risultati li::before {
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--blu-nextapp); font-weight: 700;
}
.caso__risultati li { font-size: clamp(16px, 2vw, 19px); color: var(--bianco); }

.caso__nota { margin-top: 16px; font-size: 14px; color: var(--testo-tenue); }
.caso__prova { margin-top: 28px; }

.caso__figure { display: grid; gap: 28px; margin-top: 32px; align-items: start; }
@media (min-width: 860px) { .caso__figure { grid-template-columns: 2fr 1fr; gap: 40px; } }
/* Quando la schermata del telefono non esiste, la figura sola non deve prendersi due colonne
   e restare mezza vuota: torna a una colonna sola. */
@media (min-width: 860px) { .caso__figure--sola { grid-template-columns: 1fr; } }
.caso__figure figure { margin: 0; }
.caso__figure img {
  width: 100%; height: auto; border-radius: var(--raggio);
  border: 1px solid rgba(88,160,252,.18); background: var(--blu-notte);
}
.caso__figure figcaption { margin-top: 10px; font-size: 14px; color: var(--testo-tenue); }
.caso__figura--telefono img { max-width: 300px; }

.caso__chiusura { border-top: 1px solid rgba(88,160,252,.14); }

.avviso {
  margin: 0 0 28px; padding: 16px 20px; border-radius: 12px;
  background: rgba(88,160,252,.10); border: 1px dashed rgba(88,160,252,.4);
  color: var(--testo); font-size: 15px;
}

@media (max-width: 640px) {
  .caso__chiusura .pulsante--grande { width: 100%; justify-content: center; }
}

/* ============ Piè di pagina ============ */
.fondo { border-top: 1px solid rgba(88,160,252,.14); padding-block: 34px; }
.fondo__dentro { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.fondo__riga { margin: 0; font-size: 14px; color: var(--testo-tenue); }
.fondo__riga a { color: var(--testo-tenue); }

@media (max-width: 640px) {
  .contatti .pulsante--grande { width: 100%; justify-content: center; }
}