:root{
  --blu-scuro:#0a2a6b; --blu:#1746b5; --arancio:#f97316;
  --testo:#1f2937; --tenue:#6b7280; --fondo:#f5f8ff; --bordo:#e2e8f0;
  --verde:#166534;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     color:var(--testo);line-height:1.6;background:#fff}
img{max-width:100%;height:auto}
a{color:var(--blu)}
.contenitore{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
:focus-visible{outline:3px solid var(--arancio);outline-offset:2px}

/* barra */
.barra{position:sticky;top:0;z-index:50;background:var(--blu-scuro);color:#fff}
.barra-interna{display:flex;align-items:center;justify-content:space-between;
               gap:1rem;min-height:64px}
.marchio{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;
         font-weight:700;font-size:1.05rem}
.menu{display:flex;align-items:center;gap:1.25rem}
.menu a{color:#c7d7f5;text-decoration:none;font-size:.95rem}
.menu a:hover{color:#fff}
/* I pulsanti restano bianchi pieni: la regola qui sopra è più specifica delle
   .btn-* e altrimenti li spegnerebbe in azzurro slavato. */
.menu a.btn{color:#fff}
.menu a.btn:hover{color:#fff}
.apri-menu{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}

/* pulsanti */
.btn{display:inline-block;padding:.7rem 1.3rem;border-radius:8px;font-weight:700;
     text-decoration:none;border:0;cursor:pointer;font-size:1rem}
.btn-arancio{background:var(--arancio);color:#fff}
.btn-blu{background:var(--blu);color:#fff}
.btn-bianco{background:#fff;color:var(--blu-scuro)}
.btn-cloud{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);
           padding:.5rem 1rem;font-weight:600}

/* sezioni */
.sezione{padding:4rem 0}
.sezione-tenue{background:var(--fondo)}
.sezione h2{font-size:2rem;margin:0 0 .5rem}
.occhiello{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;
           font-weight:700;color:var(--blu)}
.griglia{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr)}
/* Due colonne invece di tre. Serve una classe, non uno stile in linea: quello
   scavalcherebbe la regola per il telefono qui sotto e lascerebbe i riquadri
   affiancati e strettissimi. */
.griglia-due{grid-template-columns:repeat(2,1fr)}
.scheda{background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:1.4rem}

/* apertura */
.apertura{background:linear-gradient(135deg,var(--blu-scuro),var(--blu));color:#fff;
          padding:4.5rem 0}
.apertura h1{font-size:2.8rem;line-height:1.1;margin:0 0 .5rem}
.apertura .claim{color:#ffd9b0;font-weight:600;font-size:1.2rem}

/* tabella */
.tabella-confronto{width:100%;border-collapse:collapse;background:#fff;
                   border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(10,42,107,.1)}
.tabella-confronto th{background:var(--blu-scuro);color:#fff;padding:.9rem;text-align:left}
.tabella-confronto th.col-pro{background:var(--arancio);text-align:center}
.tabella-confronto th.col-free{text-align:center}
.tabella-confronto td{padding:.75rem .9rem;border-top:1px solid var(--bordo)}
.tabella-confronto td.si,.tabella-confronto td.no{text-align:center;font-weight:700}
.tabella-confronto td.si{color:var(--blu)}
.tabella-confronto td.no{color:#cbd5e1}
.tabella-confronto tr:nth-child(even) td{background:#f8fbff}

/* cloud */
.cloud{background:var(--verde);color:#fff}
.cloud a.btn{background:#fff;color:var(--verde)}

/* piè di pagina */
.pie{background:#0f172a;color:#cbd5e1;padding:2.5rem 0;font-size:.9rem}
.pie-interno{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.pie-marchio{color:#fff;font-weight:700;margin-bottom:.4rem}
.pie-link{display:flex;flex-direction:column;gap:.4rem}
.pie-link a{color:#cbd5e1;text-decoration:none}
.pie-link a:hover{color:#fff;text-decoration:underline}

.solo-mobile{display:none}

@media (max-width:800px){
  .apri-menu{display:block}
  .menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--blu-scuro);
        flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.25rem 1.5rem;
        box-shadow:0 14px 28px rgba(15,23,42,.3)}
  .menu.aperto{display:flex}
  /* Voci separate da una riga sottile, per non farle sembrare un blocco unico. */
  .menu a{padding:.9rem .2rem;border-bottom:1px solid rgba(255,255,255,.14)}
  .menu a:last-child{border-bottom:0}
  /* I due pulsanti finali: staccati dalle voci, distanziati fra loro e centrati.
     Senza questo restano incollati, perche' il contenitore ha gap:0. */
  .menu .btn{border-bottom:0;text-align:center;padding:.85rem 1rem}
  .menu .btn-cloud{margin-top:1.1rem}
  .menu .btn-arancio{margin-top:.6rem}
  /* I pulsanti dentro le schede occupano la riga: a mezza larghezza il testo si
     spezzerebbe una parola per riga. */
  .scheda .btn{display:block;text-align:center}
  .scheda .btn + .btn{margin-top:.6rem}
  .griglia{grid-template-columns:1fr}
  .griglia-due{grid-template-columns:1fr}
  .apertura h1{font-size:2rem}
  .sezione{padding:2.5rem 0}
  .solo-desktop{display:none}
  .solo-mobile{display:block}
}

/* modulo d'ordine */
.modulo{margin-top:2rem}
.campo{margin-bottom:1.1rem}
.campo label,.campo legend{display:block;font-weight:600;margin-bottom:.3rem}
.campo input,.campo select,.campo textarea{width:100%;padding:.65rem;
  border:1px solid var(--bordo);border-radius:8px;font:inherit;background:#fff}
.campo input:read-only{background:#f3f4f6}
.campo-doppio{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.obbl{color:var(--arancio)}
fieldset.campo{border:1px solid var(--bordo);border-radius:10px;padding:1rem}
.informativa{font-size:.8rem;line-height:1.5}
fieldset.campo p label{display:inline;font-weight:400}
fieldset.campo p input{width:auto}
@media (max-width:800px){ .campo-doppio{grid-template-columns:1fr} }

/* pagine di servizio (licenza, condizioni di vendita) */
.documento{max-width:52rem}
.documento p{margin:.6rem 0}
.documento font{font-size:inherit !important;font-family:inherit !important}

/* pagina di conferma acquisto */
.label{font-weight:700;color:var(--blu-scuro)}
.info-recapt{border:1px solid var(--arancio);margin:1rem 0;padding:.9rem 1rem;
  border-radius:8px;background:#fff7ed;color:#9a3412;text-align:center}
.tabella-bonifico{width:100%;max-width:30rem;margin:1rem auto;border-collapse:collapse;
  background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(10,42,107,.08)}
.tabella-bonifico td{padding:.65rem .9rem;border-top:1px solid var(--bordo)}
.tabella-bonifico tr:first-child td{border-top:0}
.tabella-bonifico td:first-child{background:var(--fondo);font-weight:600;width:42%}