/* Stili comuni di is4ict.com (home e pagine interne): stavano in linea nella home, spostati qui
   il 30/09/2026 quando è nata /cloud/, perché una seconda copia avrebbe divergito dalla prima. */
:root{--blu:#4260b3;--blu-scuro:#2f4685;--ink:#1c2333;--grigio:#5b6478;--sfondo:#f6f7fb;--bianco:#fff;--bordo:#e3e6ee;--acc:#13bbbd}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bianco);line-height:1.6}
a{color:var(--blu);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--bordo);z-index:10}
nav{display:flex;align-items:center;justify-content:space-between;height:80px}
nav img{height:64px}
nav ul{display:flex;gap:26px;list-style:none}
nav ul a{color:var(--ink);font-weight:500;font-size:15px}
/* aree toccabili ≥ 44px senza spostare niente: il margine negativo restituisce lo spazio aggiunto;
   sui link dentro un paragrafo basta il padding verticale, che non cambia l'altezza delle righe */
nav ul a{display:inline-block;padding:14px 4px;margin:-14px -4px}
.contatti .riga a,footer a{display:inline-block;padding:14px 0;margin:-14px 0}
.card p a,.card li a{padding:14px 0}
/* il menu è fisso in alto: le sezioni raggiunte dal menu non finiscono sotto l'intestazione */
[id]{scroll-margin-top:96px}
.btn{display:inline-block;padding:12px 22px;border-radius:8px;font-weight:600;border:2px solid var(--blu);background:var(--blu);color:#fff;transition:.15s}
.btn:hover{background:var(--blu-scuro);border-color:var(--blu-scuro)}
.btn.ghost{background:transparent;color:var(--blu)}
.btn.ghost:hover{background:var(--blu);color:#fff}
.hero{padding:120px 0 104px;color:#fff;background:linear-gradient(100deg,rgba(18,32,78,.92) 0%,rgba(30,52,120,.78) 55%,rgba(30,52,120,.45) 100%),url(../img/background.jpg) center/cover no-repeat}
.hero h1{font-size:clamp(30px,4.6vw,48px);line-height:1.15;max-width:760px;letter-spacing:-.5px;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero p{font-size:19px;color:#dbe2f5;max-width:640px;margin:20px 0 32px}
.hero .btn.ghost{color:#fff;border-color:#fff}.hero .btn.ghost:hover{background:#fff;color:var(--blu)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
section{padding:72px 0}
section.alt{background:var(--sfondo)}
h2{font-size:32px;letter-spacing:-.3px;margin-bottom:8px}
.sub{color:var(--grigio);font-size:17px;margin-bottom:40px;max-width:680px}
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--bordo);border-radius:14px;padding:28px;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(28,35,51,.1)}
.ico{width:44px;height:44px;border-radius:10px;background:#e9edf9;color:var(--blu);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:20px;margin-bottom:6px}
.card .prezzo{font-size:30px;font-weight:700;color:var(--blu);margin:10px 0 4px}
.card .prezzo small{font-size:15px;font-weight:500;color:var(--grigio)}
.card p{color:var(--grigio);font-size:15px}
.card ul{list-style:none;margin:16px 0 22px;font-size:15px}
.card li{padding:5px 0 5px 26px;position:relative}
.card li::before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:700}
.card.top{border-color:var(--blu);box-shadow:0 8px 30px rgba(66,96,179,.12)}
.tag{display:inline-block;line-height:19px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--blu);background:#e9edf9;padding:4px 10px;border-radius:99px;margin-bottom:12px}
.servizi .card{padding:22px}
.servizi h3{font-size:17px}
/* Pulsante verso la pagina di un servizio (Francesco, 30/09): per i servizi con una pagina,
   <a class="btn" href="…">, lo stesso pulsante delle Offerte e dei contatti. Qui solo la posizione:
   sempre in fondo alla scheda, quindi alla stessa quota nelle schede della stessa riga. */
.servizi .card{display:flex;flex-direction:column}
.servizi .card p:has(+ .btn){margin-bottom:18px}
.servizi .card .btn{margin-top:auto;align-self:flex-start}
/* Offerte: cinque schede, mai una da sola in fondo. Da 1000px le prime due (siti e cloud, le offerte
   principali) larghe metà riga e le altre tre un terzo; fra 768 e 999 due colonne con i siti su tutta
   la riga (1+2+2); più stretto, titolo, prezzo ed etichetta della scheda cloud andrebbero a capo; sotto, una colonna */
#offerte .griglia{grid-template-columns:1fr}
/* schede della stessa riga: pulsanti allineati in fondo */
#offerte .card{display:flex;flex-direction:column}
#offerte .card .tag,#offerte .card .btn{align-self:flex-start}
#offerte .card .btn{margin-top:auto}
@media(min-width:768px){#offerte .griglia{grid-template-columns:repeat(2,minmax(0,1fr))}#offerte .card.top{grid-column:span 2}}
/* fra 768 e 999 la scheda cloud (con etichetta) sta accanto all'automazione (senza): lo stesso spazio
   dell'etichetta sopra l'automazione tiene allineati titoli e prezzi della riga.
   ponytail: 39px = altezza .tag (19 + 8 di padding) + 12 di margine; se cambia .tag, cambia qui */
@media(min-width:768px) and (max-width:999px){#offerte .card:nth-child(3)::before{content:"";flex:0 0 39px}}
@media(min-width:1000px){#offerte .griglia{grid-template-columns:repeat(6,minmax(0,1fr))}#offerte .card{grid-column:span 2}#offerte .card:nth-child(-n+2){grid-column:span 3}}
/* sotto i 360px "Per agenzie e software house" andrebbe su due righe */
@media(max-width:359px){.tag{letter-spacing:0;font-size:11px}}
.nota-iva{color:var(--grigio);font-size:14px;margin-top:22px}
/* tre passaggi: o uno sotto l'altro o tutti e tre in fila, mai 2+1 */
.step{display:grid;grid-template-columns:1fr;gap:22px;counter-reset:s}
@media(min-width:721px){.step{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step div{padding:26px 22px 22px;background:#fff;border:1px solid var(--bordo);border-radius:14px;position:relative}
.step div::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:22px;width:32px;height:32px;border-radius:50%;background:var(--blu);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.step h3{font-size:18px;margin-bottom:4px}
.step p{color:var(--grigio);font-size:15px}
.contatti{background:var(--blu);color:#fff;text-align:center}
.contatti h2{color:#fff}
.contatti .sub{color:#dfe5f7;margin:0 auto 28px;text-wrap:balance}
.contatti .riga{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;font-size:17px;margin-bottom:28px}
.contatti .riga a{color:#fff;font-weight:600}
.contatti .btn{background:#fff;color:var(--blu);border-color:#fff}
.contatti .btn:hover{background:#e9edf9}
footer{padding:28px 0;font-size:13px;color:var(--grigio);text-align:center;border-top:1px solid var(--bordo)}
/* su telefono il menu diventa una seconda riga che scorre in orizzontale, senza JavaScript */
@media(max-width:720px){
  nav{flex-wrap:wrap;height:auto;padding-top:6px}
  nav img{height:52px}
  nav ul{order:3;flex:0 0 calc(100% + 40px);margin:2px -20px 0;padding:0 20px;gap:0;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--bordo)}
  nav ul::-webkit-scrollbar{display:none}
  nav ul a{display:flex;align-items:center;min-height:46px;padding:0 12px;margin:0;white-space:nowrap}
  nav ul li:first-child a{padding-left:0}
  [id]{scroll-margin-top:124px}
  .hero{padding:56px 0 48px}section{padding:52px 0}
}
/* sotto i 1280px il testo della hero arriva sulla parte chiara della foto: velo uniforme (30/09,
   misurato: il paragrafo era a 2,96:1 a 768 px e 4,17:1 a 1024 px, e sotto 4,5 anche fra 1025 e 1279) */
@media(max-width:1279px){.hero{background:linear-gradient(rgba(18,32,78,.9),rgba(30,52,120,.86)),url(../img/background.jpg) center/cover no-repeat}}