:root{
  --nuit:#0B1622; --nuit-2:#07101A; --acier:#17364F; --vif:#2BB3A3; --vif-2:#229587;
  --ink:#10171E; --ink-2:#3F5160; --ink-3:#7A8A97;
  --fondo:#F2F5F7; --rigo:#D8E0E6;
  --display:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gutter:clamp(1rem,5vw,4rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; font-family:var(--display); color:var(--ink); background:var(--fondo); line-height:1.55}
a{color:inherit}

.nav{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.9rem var(--gutter); background:rgba(7,16,26,.92); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.nav nav{display:flex; align-items:center; gap:clamp(.8rem,2.5vw,1.8rem); font-size:.92rem}
.nav nav a{text-decoration:none; color:rgba(255,255,255,.75)}
.nav nav a:hover{color:#fff}
.nav nav a.login{color:#fff; font-weight:600; border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:.45rem .95rem}
.nav nav a.login:hover{background:var(--vif); border-color:var(--vif)}
@media(max-width:560px){ .nav nav a:not(.login){display:none} }

.marchio{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.15rem; letter-spacing:-.02em; text-decoration:none}
.marchio-segno{font-family:var(--mono); font-size:.82rem; font-weight:600; background:#fff; color:var(--nuit); border-radius:6px; padding:.15rem .42rem}
.marchio-segno i{font-style:normal; color:var(--vif)}

.etichetta{margin:0 0 .9rem; font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--vif)}

.eroe{
  padding:clamp(4rem,12vh,8rem) var(--gutter) clamp(4rem,10vh,7rem); color:#fff;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(43,179,163,.22), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(23,54,79,.55), transparent 50%),
    var(--nuit);
}
.eroe h1{margin:0; max-width:22ch; font-size:clamp(2.1rem,5.4vw,4rem); font-weight:700; line-height:1.08; letter-spacing:-.035em}
.lead{max-width:60ch; margin:1.5rem 0 2.2rem; font-size:clamp(1rem,1.5vw,1.15rem); color:rgba(255,255,255,.75)}
.azioni{display:flex; flex-wrap:wrap; gap:.8rem}
.principale,.secondaria{
  display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 1.4rem;
  border-radius:9px; font-weight:600; font-size:.98rem; text-decoration:none; transition:background .15s, border-color .15s;
}
.principale{background:var(--vif); color:#fff}
.principale:hover{background:var(--vif-2)}
.secondaria{border:1px solid rgba(255,255,255,.3); color:#fff}
.secondaria:hover{border-color:#fff}

.sezione{padding:clamp(3.5rem,9vh,6rem) var(--gutter)}
.sezione h2,.chiusura h2{margin:0 0 2.4rem; max-width:24ch; font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:600; line-height:1.15; letter-spacing:-.025em}

.passi{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rigo);
       border:1px solid var(--rigo); border-radius:14px; overflow:hidden; grid-template-columns:1fr}
@media(min-width:720px){ .passi{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .passi{grid-template-columns:repeat(3,1fr)} }
.passi li{background:#fff; padding:1.7rem 1.6rem 1.9rem}
.num{font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--vif-2)}
.passi h3{margin:.5rem 0 .55rem; font-size:1.15rem; font-weight:600}
.passi p{margin:0; font-size:.94rem; color:var(--ink-2)}

.scura{background:var(--nuit-2); color:#fff}
.principi{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.principi article{border-top:2px solid var(--vif); padding-top:1.1rem}
.principi h3{margin:0 0 .5rem; font-size:1.1rem; font-weight:600}
.principi p{margin:0; font-size:.94rem; color:rgba(255,255,255,.68)}

.chiusura{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
          padding:clamp(3rem,7vh,4.5rem) var(--gutter)}
.chiusura h2{margin:0}

.piede{
  display:flex; justify-content:center; padding:1rem var(--gutter); text-align:center;
  background:var(--nuit-2); color:rgba(255,255,255,.58);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.11em; text-transform:uppercase;
}