:root{
  --bg:#0f1115; --panel:#161a22; --panel2:#1c2130; --ink:#e8ecf3; --muted:#9aa5b5;
  --line:#262c3a; --brand:#3b82f6; --brand2:#60a5fa; --accent:#22c55e;
  --max:1080px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f6f8fc; --panel:#ffffff; --panel2:#f0f3fa; --ink:#121722; --muted:#5a6678;
    --line:#e2e8f2; --brand:#2563eb; --brand2:#1d4ed8;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                 /* nessuno scroll laterale, mai */
}
/* niente testo che sborda dai contenitori */
h1,h2,h3,p,a,span,dd,dt,summary,address{overflow-wrap:anywhere; word-break:break-word}
img,svg{max-width:100%}
a{color:var(--brand2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
header{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand a{color:inherit}
.brand a:hover{text-decoration:none}
.logo{
  width:38px; height:38px; flex:none; display:block;
  filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--brand) 40%,transparent));
}
.brand small{display:block; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:.5px}
nav.links a{color:var(--muted); margin-left:22px; font-size:14px; font-weight:500}
nav.links a:hover{color:var(--ink); text-decoration:none}
@media(max-width:860px){ nav.links a{margin-left:14px; font-size:13px} }
@media(max-width:640px){ nav.links{display:none} }

.hero{padding:72px 0 56px}
.eyebrow{color:var(--brand2); font-weight:600; font-size:13px; letter-spacing:1.4px; text-transform:uppercase}
h1{font-size:clamp(28px,5vw,46px); line-height:1.12; margin:14px 0 18px; letter-spacing:-.5px}
.lead{font-size:clamp(16px,2.2vw,19px); color:var(--muted); max-width:720px}
.cta{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 22px; border-radius:10px; font-weight:600; font-size:15px;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border:0;
}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn:hover{text-decoration:none; filter:brightness(1.05)}

section{padding:46px 0; border-top:1px solid var(--line)}
h2{font-size:clamp(22px,3vw,30px); letter-spacing:-.3px; margin:0 0 8px}
.sub{color:var(--muted); margin:0 0 30px; max-width:680px}

.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px;
  min-width:0; overflow:hidden;      /* la card non si allarga oltre la colonna */
}
.grid > *{min-width:0}               /* fix classico: le celle grid possono restringersi */
.card h3{margin:0 0 8px; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:14.5px}
.ic{
  width:40px; height:40px; border-radius:10px; margin-bottom:14px;
  background:var(--panel2); display:grid; place-items:center; color:var(--brand2);
}
.ic svg{width:22px; height:22px}
.ic{font-weight:700; font-size:17px}  /* per gli step numerici del processo */
#numbers .facts{grid-template-columns:repeat(4,1fr)}
#numbers .facts dd{font-size:22px}
@media(max-width:620px){ #numbers .facts{grid-template-columns:1fr 1fr} }

.facts{display:grid; gap:0; grid-template-columns:1fr 1fr; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.facts div{padding:18px 22px; border-bottom:1px solid var(--line)}
.facts div:nth-child(odd){border-right:1px solid var(--line)}
.facts dt{color:var(--muted); font-size:12.5px; letter-spacing:.4px; text-transform:uppercase; margin:0 0 4px}
.facts dd{margin:0; font-weight:600; font-size:15px}
@media(max-width:560px){ .facts{grid-template-columns:1fr} .facts div:nth-child(odd){border-right:0} }

.contact-grid{display:grid; gap:18px; grid-template-columns:1.2fr 1fr}
@media(max-width:720px){ .contact-grid{grid-template-columns:1fr} }
.addr{font-style:normal; color:var(--ink); line-height:1.8}

/* pagine legali / testo lungo */
.legal{padding:52px 0}
.legal .updated{color:var(--muted); font-size:13px; margin:0 0 28px}
.legal h2{margin:34px 0 10px; font-size:clamp(19px,2.4vw,24px)}
.legal h3{margin:22px 0 6px; font-size:16px}
.legal p, .legal li{color:var(--ink); font-size:15.5px}
.legal .muted, .legal p.muted{color:var(--muted)}
.legal ul{padding-left:20px; margin:6px 0 14px}
.legal li{margin:5px 0}
.legal .lead{color:var(--muted); margin-bottom:6px}
.pagehead{padding:56px 0 8px}
.pagehead .eyebrow{margin-bottom:6px}

/* hero product mock (pure CSS, no stock photo) */
.hero-shot{margin-top:38px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); box-shadow:0 20px 50px -20px color-mix(in srgb,var(--brand) 35%,transparent)}
.shot-bar{display:flex; gap:7px; padding:12px 14px; background:var(--panel2); border-bottom:1px solid var(--line)}
.shot-bar span{width:11px;height:11px;border-radius:50%;background:var(--line)}
.shot-body{display:grid; grid-template-columns:200px 1fr; gap:0}
.shot-side{padding:20px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:12px}
.shot-row{height:12px;border-radius:6px;background:var(--panel2)}
.shot-row.w70{width:70%}.shot-row.w60{width:60%}.shot-row.w50{width:50%}.shot-row.w40{width:40%}
.shot-main{padding:22px; display:flex; flex-direction:column; gap:20px}
.shot-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.shot-kpis .kpi{height:60px;border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 18%,var(--panel2)),var(--panel2))}
.shot-chart{display:flex; align-items:flex-end; gap:12px; height:150px}
.shot-chart .bar{flex:1;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--brand2),var(--brand))}
@media(max-width:560px){ .shot-body{grid-template-columns:1fr} .shot-side{display:none} }

/* trust strip */
.trust{display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.trust-tech{color:var(--muted); font-size:13px; margin-left:6px}
.tech-pill{display:inline-block; background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-size:12.5px; color:var(--ink); margin:3px 4px 3px 0; max-width:100%; white-space:nowrap}
/* le card con molte pill: contenitore flessibile che va a capo e non sborda */
#tech .card p, #trust .trust{display:flex; flex-wrap:wrap; gap:0}
#tech .card p{gap:0}

/* project tag */
.tag{display:inline-block; font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--brand2); font-weight:600; margin-bottom:8px}

/* faq */
.faq details{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:0 18px; margin-bottom:12px}
.faq summary{cursor:pointer; padding:16px 0; font-weight:600; font-size:15.5px; list-style:none; position:relative; padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:14px; color:var(--brand2); font-size:20px; font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 16px; color:var(--muted); font-size:15px}

/* footer rich */
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:24px; line-height:1.9}
@media(max-width:620px){ .foot-grid{grid-template-columns:1fr} }
footer{border-top:1px solid var(--line); padding:30px 0 50px; color:var(--muted); font-size:13px}
.foot-row{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
.foot-links a{color:var(--muted); margin-right:16px; font-size:13px}
.foot-links a:hover{color:var(--ink)}
.badge{display:inline-flex; align-items:center; gap:7px; background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:12.5px; color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}