/* ============================================================================
   Paratia — sito di presentazione
   ----------------------------------------------------------------------------
   I valori qui non sono scelti a occhio: sono gli stessi dell'applicazione,
   presi da `Theme.kt` e dai componenti Compose. Chi arriva dal sito e installa
   l'app deve riconoscere la stessa cosa, non un parente stretto.

   Semantica del colore, identica a quella dell'app:
     verde     = stato positivo (protezione attiva, conferme). Mai decorativo.
     blu/viola = marchio e informazione.
     rosso     = problemi.
   Per questo il tasto principale è il gradiente del marchio e non verde: nel
   prodotto il verde significa "sta funzionando", e un pulsante non è uno stato.
   ========================================================================= */

@font-face{
  font-family:'Poppins';
  src:url('fonts/poppins_semibold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('fonts/poppins_bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter_variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* Fondali e superfici — Theme.kt */
  --ink:#060A12;
  --surface:#0D1524;
  --surface-2:#131C2E;
  --stroke:#1E2A40;

  /* Marchio */
  --blue:#2E7BFF;
  --blue-deep:#1B4FD8;
  --violet:#7B3FE4;
  --violet-deep:#5A24B8;
  --shield-a:#35A0FF;
  --shield-b:#7B3FE4;

  /* Stato */
  --green:#00E676;
  --danger:#FF5C7A;
  --warn:#FFB74D;

  /* Testo */
  --text:#FFFFFF;
  --muted:#AEB4C1;

  --max:1200px;
  --radius:20px;
  --radius-sm:14px;

  --head:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Il fondale dell'app: due aloni freddi e nient'altro. Niente griglia tecnica —
   nell'app non c'è, e sul sito faceva "dashboard" invece che "scudo". */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(70rem 46rem at 50% 108%, rgba(0,230,118,.05), transparent 70%),
    var(--ink);
}

/* Gli elementi di una griglia hanno `min-width:auto`: si rifiutano di
   scendere sotto la propria larghezza massima naturale e allargano la traccia,
   e su telefono il risultato era una pagina più larga dello schermo con i
   titoli tagliati a destra. Azzerarlo è la condizione perché il ridimensionamento
   funzioni davvero. */
.hero > *,.showcase > *,.challenge > *,.three > *,.lower > *,.metrics > *{min-width:0}

a{color:inherit;text-decoration:none}
/* `height:auto` non è pignoleria: con width e height dichiarati nell'HTML e la larghezza
   vincolata dal riquadro, senza questa riga il browser tiene l'altezza fissa e schiaccia
   l'immagine. Era il motivo per cui alcune schermate risultavano sproporzionate. */
img{max-width:100%;height:auto;display:block}
.wrap{width:min(calc(100% - 40px),var(--max));margin-inline:auto}

h1,h2,h3,.metric b,.miniCard .big,.floatStat b{
  font-family:var(--head);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.12;
  margin:0;
}
h1{font-size:clamp(2.4rem,5.4vw,4rem);text-wrap:balance}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);text-wrap:balance}
h3{font-size:1.05rem;font-weight:600;letter-spacing:0}

/* Il gradiente dello scudo, usato per una parola sola per titolo. */
.grad{
  background:linear-gradient(100deg,var(--shield-a),var(--shield-b));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.kicker{
  display:inline-block;
  font-family:var(--head);font-weight:600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);
  margin-bottom:12px;
}

/* ---------- intestazione ---------- */
nav{
  min-height:78px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* Lo stesso blocco dell'intestazione dell'app: scudo piccolo, poi il nome in
   Poppins. Prima era un PNG del logo esteso ritagliato male, con il bordo
   sporco di artefatti: qui il nome è testo vero, nitido a ogni densità. */
.brand{display:flex;align-items:center}
/* Il marchio è un'immagine sola — scudo e scritta insieme, alfa pulita — e non più uno
   scudo minuscolo accanto a del testo. L'altezza guida, la larghezza segue. */
.brand img{
  height:44px;width:auto;
  filter:drop-shadow(0 0 18px rgba(46,123,255,.35));
}

/* La banda in cima: lo stesso gradiente della card «Protezione attiva» dell'app, sfumato in
   verticale fino al nero della pagina. Sta dietro a tutto e non intercetta i clic. */
.topGlow{
  position:absolute;top:0;left:0;right:0;height:560px;
  z-index:-1;pointer-events:none;
  background:
    /* Il gradiente della card «Protezione attiva»: blu a sinistra, viola a destra. */
    linear-gradient(100deg, rgba(46,123,255,.55) 0%, rgba(123,63,228,.55) 100%),
    radial-gradient(80% 100% at 50% 0%, rgba(53,160,255,.45), transparent 70%);
  /* Sfuma in verticale fino al nero della pagina: in cima è pieno, a metà è già andato. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,.12) 58%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,.12) 58%,transparent 100%);
}
/* Una riga di luce sul bordo superiore: è il taglio che l'app ha fra card e sfondo. */
.topGlow::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(120,180,255,.7),rgba(160,120,255,.7),transparent);
}

.navlinks{display:flex;align-items:center;gap:26px;color:var(--muted);font-size:.94rem}
.navlinks a{transition:color .18s ease}
.navlinks a:hover{color:var(--text)}
.language-switch{display:flex;gap:7px;color:var(--muted);font-size:.85rem}
.language-switch a:hover{color:var(--text)}

/* ---------- pulsanti ---------- */
.btn{
  min-height:52px;padding:0 26px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--head);font-weight:600;font-size:.98rem;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#fff;
  background:linear-gradient(100deg,var(--blue),var(--violet));
  box-shadow:0 10px 34px rgba(46,123,255,.30);
}
.btn-primary:hover{box-shadow:0 14px 42px rgba(123,63,228,.42)}
.btn-outline{
  background:rgba(255,255,255,.03);
  border-color:var(--stroke);
  color:var(--text);
}
.btn-outline:hover{border-color:var(--blue);background:rgba(46,123,255,.08)}

/* ---------- badge di stato ---------- */
/* Verde, perché dice che qualcosa è attivo: è la stessa regola dell'app. */
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:999px;
  background:rgba(0,230,118,.09);
  border:1px solid rgba(0,230,118,.28);
  color:var(--green);
  font-size:.83rem;font-weight:600;
  margin-bottom:20px;
}
.badge i{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,230,118,.55)}
  70%{box-shadow:0 0 0 9px rgba(0,230,118,0)}
  100%{box-shadow:0 0 0 0 rgba(0,230,118,0)}
}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
  align-items:center;
  /* Il vuoto fra marchio e badge era di un'intera schermata su portatile. */
  padding:14px 0 88px;
}
.lead{font-size:1.14rem;color:var(--muted);margin:22px 0 32px;max-width:34rem}
.lead strong{color:var(--text);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.micro{margin-top:22px;color:var(--muted);font-size:.88rem;display:flex;align-items:center;gap:9px}
.micro svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* L'arte dell'hero riprende l'animazione dell'onboarding: anelli sottili con
   pallini che orbitano piano attorno allo scudo. È l'unica cosa in movimento
   della pagina, ed è già il linguaggio dell'app. */
.heroArt{position:relative;display:grid;place-items:center;min-height:640px}
/* Le orbite vivono in un livello proprio, ritagliato sul riquadro dell'arte.
   Servono più larghe del riquadro per circondare il telefono, ma senza questo
   contenitore allargavano il documento di una sessantina di pixel: nessuna
   barra di scorrimento visibile grazie a `overflow-x`, e però un documento più
   largo dello schermo è il tipo di difetto che salta fuori sul telefono di
   qualcun altro. La sfumatura ai bordi rende invisibile il taglio. */
.orbits{
  position:absolute;inset:0;overflow:clip;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 88%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 88%,transparent 100%);
}
/* `inset:0` con `margin:auto` centra un elemento assoluto di dimensione nota
   senza usare `transform`, che qui serve tutta alla rotazione. */
.orbit{
  position:absolute;inset:0;margin:auto;
  border:1px solid rgba(174,180,193,.20);border-radius:50%;
  animation:spin linear infinite;
}
/* Le orbite devono circondare il telefono, non nascondersi dietro: più strette
   del soggetto smettevano di leggersi come orbite e diventavano due archi. */
.orbit.o1{width:min(700px,92vw);height:min(700px,92vw);animation-duration:52s}
.orbit.o2{width:min(575px,80vw);height:min(575px,80vw);animation-duration:38s;animation-direction:reverse;border-color:rgba(46,123,255,.28)}
.orbit.o3{width:min(455px,68vw);height:min(455px,68vw);animation-duration:29s;border-color:rgba(123,63,228,.28)}
.orbit::after{
  content:"";position:absolute;top:-4px;left:50%;
  width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.75);
}
.orbit.o2::after{background:var(--blue);box-shadow:0 0 12px rgba(46,123,255,.9)}
.orbit.o3::after{background:var(--violet);box-shadow:0 0 12px rgba(123,63,228,.9)}
@keyframes spin{to{transform:rotate(360deg)}}

.phone{
  position:relative;z-index:2;
  width:min(300px,72vw);
  border-radius:42px;
  padding:9px;
  background:linear-gradient(160deg,#1a2540,#0b1220);
  border:1px solid var(--stroke);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 60px rgba(46,123,255,.14);
}
/* Il rapporto è quello reale delle schermate, uguale per tutte dopo la normalizzazione:
   così il riquadro ha la sua altezza prima ancora che l'immagine arrivi, e la pagina non
   sobbalza durante il caricamento. */
.phone .screen{border-radius:34px;overflow:hidden;background:var(--ink);aspect-ratio:684/1536}
.phone .screen img{width:100%;height:100%;object-fit:cover}
.phoneMini{
  border-radius:34px;padding:7px;
  background:linear-gradient(160deg,#1a2540,#0b1220);
  border:1px solid var(--stroke);
  box-shadow:0 26px 56px rgba(0,0,0,.5);
}
.phoneMini .screen{border-radius:28px;overflow:hidden;background:var(--ink);aspect-ratio:684/1536}
.phoneMini .screen img{width:100%;height:100%;object-fit:cover}

/* Le targhette attorno al telefono sono le stesse quattro grandezze della
   schermata principale, ognuna con l'icona e il colore che ha nell'app. */
.floatStat{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:11px;
  padding:12px 16px;border-radius:var(--radius-sm);
  background:rgba(13,21,36,.9);
  border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  animation:bob 7s ease-in-out infinite;
}
.floatStat svg{
  width:20px;height:20px;flex:none;
  fill:none;stroke:var(--c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* Numero sopra, etichetta sotto: la stessa disposizione delle celle in Home. */
.floatStat > div{display:flex;flex-direction:column;gap:3px}
.floatStat b{display:block;font-size:1.45rem;font-variant-numeric:tabular-nums;line-height:1}
.floatStat span{display:block;font-size:.72rem;color:var(--muted);line-height:1.25}
.floatStat.s1{top:4%;left:0;--c:var(--violet);animation-delay:0s}
.floatStat.s2{top:26%;right:0;--c:var(--blue);animation-delay:.9s}
.floatStat.s3{bottom:24%;left:0;--c:var(--blue);animation-delay:1.8s}
.floatStat.s4{bottom:4%;right:0;--c:var(--green);animation-delay:2.7s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- movimento ---------- */
/* Comparsa breve mentre si scorre: dice che la pagina risponde, senza mettersi in mostra.
   Lo stato di partenza vive qui e non nello script, così chi arriva con JavaScript disattivato
   vede comunque tutto — la classe `is-visible` viene aggiunta subito in quel caso. */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-visible{opacity:1;transform:none}

/* Le schede di una stessa fila entrano sfalsate: insieme sembrerebbero un blocco solo. */
.three [data-reveal]:nth-child(2){transition-delay:.09s}
.three [data-reveal]:nth-child(3){transition-delay:.18s}
.metrics [data-reveal]:nth-child(2){transition-delay:.06s}
.metrics [data-reveal]:nth-child(3){transition-delay:.12s}
.metrics [data-reveal]:nth-child(4){transition-delay:.18s}
.phoneRow [data-reveal]:nth-child(2){transition-delay:.10s}
.phoneRow [data-reveal]:nth-child(3){transition-delay:.20s}
.steps [data-reveal]:nth-child(2){transition-delay:.08s}
.steps [data-reveal]:nth-child(3){transition-delay:.16s}
.lower [data-reveal]:nth-child(2){transition-delay:.07s}
.lower [data-reveal]:nth-child(3){transition-delay:.14s}
.lower [data-reveal]:nth-child(4){transition-delay:.21s}

/* I numeri contano: larghezza fissa per cifra, altrimenti il riquadro balla mentre salgono. */
[data-count]{font-variant-numeric:tabular-nums}

/* Il telefono dell'hero respira piano. Un movimento solo, lento, che non chiede attenzione. */
.phone{animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- fasce e schede ---------- */
.band{
  padding:96px 0;
  background:linear-gradient(180deg,transparent,rgba(19,28,46,.42) 18%,rgba(19,28,46,.42) 82%,transparent);
}
section{padding:24px 0}
.head{text-align:center;max-width:44rem;margin:0 auto 52px}

/* La scheda dell'app: fondo di superficie, un filo di bordo, angoli 20. */
.feature,.priceCard,.privacyCard,.miniCard,.service,.step,.metric{
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{padding:32px 28px;transition:border-color .2s ease,transform .2s ease}
.feature:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--glow) 45%,var(--stroke))}
.ficon{
  width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;margin-bottom:20px;
  background:color-mix(in srgb,var(--glow) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--glow) 30%,transparent);
}
.ficon svg{width:24px;height:24px;fill:none;stroke:var(--glow);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature h3{
  font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--glow);margin-bottom:10px;
}
.feature p{margin:0;color:var(--muted);font-size:.97rem}

.showcase{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.phoneRow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.phoneRow .phoneMini:nth-child(2){transform:translateY(-22px)}
.copy{color:var(--muted);margin:18px 0 28px}

.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:22px}
.metric{padding:16px 18px;border-radius:var(--radius-sm)}
.metric b{display:block;font-size:1.7rem;font-variant-numeric:tabular-nums}
.metric span{font-size:.82rem;color:var(--muted)}

/* Le righe del registro, con la distinzione che l'app tiene ferma: la
   categoria dice cos'è il dominio, l'azione dice cosa ne è stato fatto. */
.service{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 18px;margin-bottom:10px;
  border-radius:var(--radius-sm);
}
.service b{font-family:var(--head);font-weight:600;font-size:.98rem;display:block}
.service small{color:var(--muted);font-size:.82rem}
.service .status{
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-align:right;
  line-height:1.5;color:var(--danger);white-space:nowrap;
  padding:6px 11px;border-radius:9px;
  background:rgba(255,92,122,.09);
  border:1px solid rgba(255,92,122,.24);
}

.challenge{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* Le categorie come chip di testo: le emoji erano l'unico punto della pagina
   in cui il linguaggio visivo non era quello dell'app, che non ne usa nessuna. */
.categories{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.cat{
  padding:9px 16px;border-radius:999px;
  background:rgba(46,123,255,.07);
  border:1px solid var(--stroke);
  color:var(--muted);font-size:.9rem;
}
.steps{display:grid;gap:11px}
.step{display:flex;gap:14px;align-items:baseline;padding:15px 18px;border-radius:var(--radius-sm)}
.step b{font-family:var(--head);font-weight:600;color:var(--blue);white-space:nowrap}
.step span{color:var(--muted);font-size:.94rem}

.lower{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}

/* «Paratia oggi»: sul sito è la stessa card della Home, non un riquadro
   qualunque — è il pezzo che i tester condivideranno. */
.miniCard{
  padding:26px;
  background:linear-gradient(150deg,#15203A,#241B44);
  border-color:rgba(0,230,118,.22);
}
.miniCard .big{display:block;font-size:2rem;font-variant-numeric:tabular-nums;margin-top:14px}
.miniCard .sub{display:block;color:var(--muted);font-size:.85rem}
.shareBtn{
  display:inline-flex;align-items:center;gap:7px;margin-top:22px;
  color:var(--green);font-family:var(--head);font-weight:600;font-size:.92rem;
}
.shareBtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shareBtn:hover{text-decoration:underline}

.priceCard{padding:26px}
.priceCard h3{font-size:1.25rem;font-weight:700;margin-bottom:16px}
.priceCard.pro{border-color:rgba(123,63,228,.42);background:linear-gradient(160deg,#16264A,#2A1B4D)}
.priceCard ul,.privacyCard ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px}
.priceCard li,.privacyCard li{
  color:var(--muted);font-size:.93rem;
  padding-left:24px;position:relative;
}
/* La spunta verde: nell'app è il segno che qualcosa è a posto. */
.priceCard li::before,.privacyCard li::before{
  content:"";position:absolute;left:1px;top:.42em;
  width:11px;height:6px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.forever{
  display:block;font-family:var(--head);font-weight:600;font-size:.9rem;color:var(--text);
  padding-top:16px;border-top:1px solid var(--stroke);
}
.privacyCard{padding:26px}
.privacyCard h3{font-size:1.1rem;font-weight:700;margin-bottom:16px;line-height:1.35}

.cta{
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
  padding:52px 48px;margin:64px 0;
  border-radius:26px;
  background:linear-gradient(120deg,#15203A,#241B44);
  border:1px solid rgba(123,63,228,.32);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.cta h2{margin-bottom:10px}
.cta p{margin:0;color:var(--muted)}

/* ---------- finestre di Privacy e Termini ---------- */
.linkBtn{
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;
}
.linkBtn:hover{color:var(--text)}

body.modal-open{overflow:hidden}

.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modalBack{
  position:absolute;inset:0;
  background:rgba(3,6,12,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:fade .2s ease-out;
}
.modalBox{
  position:relative;
  width:min(720px,100%);max-height:min(84vh,900px);
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:22px;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  animation:rise .24s cubic-bezier(.22,.61,.36,1);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.modalHead{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--stroke);
}
.modalHead h2{font-size:1.5rem}
.modalX{
  flex:none;width:38px;height:38px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:11px;
  color:var(--muted);cursor:pointer;transition:.18s ease;
}
.modalX:hover{color:var(--text);border-color:var(--blue)}
.modalX svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Il corpo scorre da solo: i due testi sono lunghi e la finestra non deve crescere oltre
   lo schermo. */
.modalBody{overflow-y:auto;padding:20px 24px 26px;-webkit-overflow-scrolling:touch}
.modalLead{color:var(--text);font-size:1.02rem;margin:0 0 20px}
.modalBody h3{
  font-family:var(--head);font-weight:600;font-size:1rem;
  color:var(--blue);margin:24px 0 8px;
}
.modalBody h3:first-of-type{margin-top:0}
.modalBody p{color:var(--muted);margin:0 0 12px;font-size:.95rem}
.modalBody strong{color:var(--text);font-weight:600}
.modalBody ul{margin:0 0 14px;padding-left:20px;color:var(--muted);font-size:.95rem}
.modalBody li{margin-bottom:7px}
.modalBody a{color:var(--blue)}
.modalBody a:hover{text-decoration:underline}
.modalDate{font-size:.85rem;color:var(--muted);opacity:.75;margin-top:22px}

/* Nel piede il marchio è più discreto: è una firma, non un'insegna. */
.brandFoot img{height:30px;filter:none;opacity:.8}

footer{border-top:1px solid var(--stroke);padding:36px 0;margin-top:40px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footlinks{display:flex;gap:22px;color:var(--muted);font-size:.88rem;flex-wrap:wrap}
.footlinks a:hover{color:var(--text)}

/* La firma nel piede. In linea con il testo, non un blocco a se': e' un saluto,
   non una rivendicazione, e a schermo stretto va a capo col resto. */
.made{display:inline-flex;align-items:center;gap:.34em;white-space:nowrap}
.made svg{width:.95em;height:.95em;fill:#FF4D6D;flex:none}

/* Il fuoco della tastiera deve restare visibile: è la sola strada per chi non
   usa il puntatore. */
a:focus-visible,.btn:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- adattamento ---------- */
@media (max-width:980px){
  .hero,.showcase,.challenge{grid-template-columns:1fr;gap:44px}
  .heroArt{min-height:560px;order:-1}
  .three{grid-template-columns:1fr}
  .lower{grid-template-columns:repeat(2,1fr)}
  .navlinks > a:not(.btn){display:none}
}
@media (max-width:640px){
  body{font-size:16px}

  /* In testata resta il solo marchio: il tasto andava a capo e schiacciava il
     cambio lingua, e lo stesso invito è due schermate più sotto. */
  .navlinks > a.btn{display:none}
  .brand img{height:36px}
  .topGlow{height:340px}

  /* Il messaggio prima dello screenshot.
     Con l'immagine in cima, titolo e invito finivano sotto la piega: chi apre il sito vedeva
     la schermata di un'app che non conosce ancora, invece della frase che gliela spiega. */
  .heroArt{order:0;min-height:0;padding:6px 0 2px}
  .hero{padding:6px 0 44px;gap:26px}
  h1{font-size:clamp(2rem,8.2vw,2.6rem)}
  /* L'andata a capo forzata serve al titolo largo. Su telefono litiga con quella naturale e
     produce righe spaiate: qui la si toglie e si lascia decidere a `text-wrap:balance`. */
  .brDesk{display:none}
  .lead{font-size:1rem;margin:16px 0 24px}
  .actions{width:100%}
  .actions .btn{flex:1 1 100%}

  /* Le targhette coprivano proprio le celle dello schermo che ripetono: a questa larghezza
     il telefono racconta già da solo gli stessi quattro numeri. */
  .floatStat{display:none}
  .phone{width:min(262px,76vw)}

  /* Una schermata sola, non tre.
     In verticale i tre telefoni diventavano una colonna alta il triplo, che si scorre a
     vuoto e ripete ciò che l'hero ha già mostrato. Resta il registro, che è la schermata
     che risponde alla domanda del titolo. */
  .phoneRow{grid-template-columns:1fr;max-width:248px;margin-inline:auto}
  .phoneRow .phoneMini:nth-child(1),
  .phoneRow .phoneMini:nth-child(3){display:none}
  .phoneRow .phoneMini:nth-child(2){transform:none}

  .lower{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr;gap:10px}
  .metric b{font-size:1.4rem}
  .metric span{font-size:.76rem}
  .service .status{font-size:.6rem}
  .feature{padding:24px 22px}
  .showcase,.challenge{gap:32px}
  .head{margin-bottom:34px}
  section{padding:12px 0}
  .cta{padding:32px 22px;margin:40px 0}
  .band{padding:56px 0}

  /* La finestra occupa lo schermo: una scheda centrata piccola costringe a scorrere un
     testo lungo dentro un francobollo. */
  .modal{padding:0}
  .modalBox{
    width:100%;height:100%;max-height:100%;
    border-radius:0;border-left:0;border-right:0;
  }
  .modalHead{padding:18px 18px 14px}
  .modalHead h2{font-size:1.25rem}
  .modalBody{padding:18px 18px 40px}
}

/* Chi ha chiesto meno movimento non deve vedere orbite che girano. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{scroll-behavior:auto}
}

/* La pagina è dichiaratamente scura, come l'app: nessun tema chiaro. */