/* =========================================================================
   SDGi — sito vetrina · foglio unico
   Palette e gerarchia da SDGi Brand Book v2.0 (teal = accento firma, non
   cambia mai tinta; navy = base del testo). Mobile-first.
   ========================================================================= */

/* ---------- Font self-hosted (nessuna chiamata esterna) ---------------- */
@font-face{font-family:Roboto;src:url(../assets/font/roboto-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(../assets/font/roboto-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(../assets/font/roboto-700.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url(../assets/font/roboto-900.woff2)format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ---------- Token ------------------------------------------------------ */
:root{
  --navy:#14273B;
  --teal:#0AC5A4;
  --cyan:#14ABBA;
  --blue:#2A7ACA;
  --slate:#5A6E80;
  --surface:#F8FAFA;
  --border:#E4E8E9;
  --white:#fff;

  --navy-soft:#22374D;      /* separatori dentro i blocchi navy */
  --on-navy:#AEBCCB;        /* testo secondario su fondo navy   */

  --wrap:1140px;
  --pad:24px;
  --r:14px;                 /* raggio standard */
  --r-lg:22px;

  --t:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset essenziale ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- Accessibilità --------------------------------------------- */
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;font-weight:500;
}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Impalcatura ------------------------------------------------ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(56px,9vw,104px)}
.sec--alt{background:var(--surface);border-block:1px solid var(--border)}

/* ---------- Scala tipografica ----------------------------------------- */
.h-display{
  font-weight:900;font-size:clamp(2.35rem,6.2vw,4.25rem);line-height:1.04;
  letter-spacing:-.025em;text-wrap:balance;
}
h2,.h2{
  font-weight:700;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.15;
  letter-spacing:-.015em;text-wrap:balance;
}
h3,.h3{font-weight:700;font-size:1.125rem;line-height:1.35;letter-spacing:-.005em}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-weight:500;font-size:.75rem;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);flex:none}
.lead{font-size:clamp(1.0625rem,1.7vw,1.1875rem);color:var(--slate);max-width:62ch}
.prose{max-width:66ch}
.prose p+p{margin-top:1.1em}
.small{font-size:.875rem;line-height:1.6}

/* ---------- Bottoni ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:500;font-size:.9375rem;line-height:1;
  padding:15px 24px;border-radius:10px;border:1px solid transparent;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover{background:#1d3550;transform:translateY(-1px)}
.btn--teal{background:var(--teal);color:var(--navy);font-weight:700}
.btn--teal:hover{background:#09b294;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--navy);transform:translateY(-1px)}
.btn--onnavy{background:#fff;color:var(--navy)}
.btn--onnavy:hover{background:var(--surface);transform:translateY(-1px)}
.btn--outnavy{background:transparent;color:#fff;border-color:#3A536D}
.btn--outnavy:hover{border-color:#fff;transform:translateY(-1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Testata ---------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:26px;width:auto}
.site-nav ul{display:flex;align-items:center;gap:30px}
.site-nav a{font-weight:500;font-size:.9375rem;color:var(--slate);transition:color var(--t)}
.site-nav a:hover{color:var(--navy)}
.head-cta{display:flex;align-items:center;gap:10px}
.head-cta .btn{padding:11px 18px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border)}
.burger svg{width:20px;height:20px}

@media(max-width:900px){
  .site-nav,.head-cta .btn--ghost{display:none}
  .burger{display:flex}
}
/* cassetto mobile */
.drawer{
  display:none;border-bottom:1px solid var(--border);background:#fff;
}
.drawer.is-open{display:block}
.drawer ul{padding:10px 0 18px}
.drawer a{display:block;padding:13px 0;font-weight:500;border-bottom:1px solid var(--border)}
.drawer .btn{width:100%;margin-top:16px}

/* ---------- Hero ------------------------------------------------------- */
.hero{
  padding-block:clamp(56px,10vw,116px) clamp(48px,8vw,96px);
  background:
    radial-gradient(900px 420px at 50% -18%, rgba(10,197,164,.10) 0%, rgba(255,255,255,0) 62%);
  text-align:center;
}
.hero__logo{height:clamp(46px,8vw,70px);width:auto;margin:0 auto 26px}

/* Il punto della "i" cade e rimbalza una volta sola, all'arrivo sulla pagina.
   Due accorgimenti che sembrano dettagli ma decidono se si vede o no:
   - overflow visibile, altrimenti il disegno taglia il punto mentre cade
     e resta visibile solo l'ultimo centimetro di caduta;
   - misure in unità del disegno (riquadro alto ~600), non in pixel schermo,
     così il rimbalzo resta proporzionato a qualunque dimensione del logo. */
.hero__logo{overflow:visible}
@keyframes logoDotCade{
    0%{transform:translateY(-190px);opacity:0}
   18%{opacity:1}
   44%{transform:translateY(0)}
   60%{transform:translateY(-62px)}
   76%{transform:translateY(0)}
   88%{transform:translateY(-19px)}
  100%{transform:translateY(0)}
}
.hero__logo .logo-dot{animation:logoDotCade 1.05s cubic-bezier(.34,0,.36,1) .18s both}

/* chi ha chiesto meno movimento al sistema operativo non lo subisce */
@media(prefers-reduced-motion:reduce){
  .hero__logo .logo-dot{animation:none}
}

.hero .h-display{max-width:15ch;margin-inline:auto}
.hero .lead{margin:20px auto 0;max-width:58ch}
@media(min-width:720px){
  /* le righe le decido io: ognuna deve stare su una riga sola,
     quindi qui il limite di larghezza va tolto */
  .lead--lines span{display:block}
  .hero .lead--lines{max-width:none}
  .site-foot__blurb span{display:block}
  .site-foot__blurb{max-width:none}
}
.domani{font-weight:700;color:var(--navy)}
@media(min-width:720px){.domani{margin-top:.5em}}
.hero .btn-row{justify-content:center;margin-top:34px}
.payoff{
  margin-top:52px;font-weight:900;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(2.5rem,4.8vw,3.25rem);
}
/* il punto è del marchio: teal, sia nel payoff sia nel titolo */
.dot{color:var(--teal)}
.hero__rule{
  height:3px;border-radius:2px;max-width:var(--wrap);margin:0 auto;
  background:linear-gradient(90deg,var(--teal),var(--cyan) 34%,var(--blue) 66%,var(--navy));
}

/* ---------- Blocco a due colonne (Cos'è) ------------------------------- */
.split{display:grid;gap:clamp(28px,5vw,64px)}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr;align-items:start}}
.claim{
  font-weight:700;font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.4;
  letter-spacing:-.01em;
}
.claim .hl{
  background:linear-gradient(transparent 62%,rgba(10,197,164,.28) 0);
  padding-bottom:2px;
}
.factlist{margin-top:30px;border-top:1px solid var(--border)}
.factlist li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.factlist svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--teal)}
.factlist b{display:block;font-weight:700;margin-bottom:2px}
.factlist span{color:var(--slate);font-size:.9375rem}

/* ---------- Griglia moduli --------------------------------------------- */
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:40px}
@media(min-width:700px){.mods{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:1000px){.mods{grid-template-columns:repeat(4,1fr)}}
.mod{
  display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  padding:22px 18px 20px;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
  position:relative;
}
.mod:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,39,59,.07)}
.mod__ico{width:34px;height:34px;color:var(--navy);stroke-width:1.5}
.mod__nm{font-weight:700;font-size:.9375rem;line-height:1.3}
.mod__nm::after{content:"";display:block;width:26px;height:2px;background:var(--teal);border-radius:2px;margin-top:9px;transition:width var(--t)}
.mod:hover .mod__nm::after{width:42px}
.mod__d{font-size:.8125rem;line-height:1.5;color:var(--slate)}
.mod__go{
  margin-top:auto;padding-top:12px;font-size:.75rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal);opacity:0;transition:opacity var(--t);
}
.mod:hover .mod__go,.mod:focus-visible .mod__go{opacity:1}
@media(hover:none){.mod__go{opacity:1}}

/* ---------- Finestra demo ---------------------------------------------- */
.browser{
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:0 30px 70px rgba(20,39,59,.13);
}
.browser__bar{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);
}
.browser__dots{display:flex;gap:7px;flex:none}
.browser__dots i{width:11px;height:11px;border-radius:50%;background:#D3DADE;display:block}
.browser__url{
  flex:1;min-width:0;background:#fff;border:1px solid var(--border);border-radius:7px;
  padding:6px 12px;font-size:.8125rem;color:var(--slate);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.browser__url b{color:var(--navy);font-weight:500}
.browser__body{position:relative;background:var(--surface)}
.browser__body iframe{display:block;width:100%;height:min(78vh,660px);border:0;background:#fff}
.browser__small{display:none}
@media(max-width:760px){
  .browser__body iframe{display:none}
  .browser__small{
    display:block;background:#fff;padding:38px 22px;text-align:center;
  }
  .browser__small p{margin:0 0 6px;font-size:.9375rem;color:var(--slate)}
  .browser__small .btn{margin-top:18px}
}
.demo-note{
  margin-top:16px;font-size:.8125rem;color:var(--slate);display:flex;gap:9px;align-items:flex-start;
}
.demo-note svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--slate)}

/* ---------- Perché sceglierlo ------------------------------------------ */
.whys{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-top:40px}
@media(min-width:760px){.whys{grid-template-columns:1fr 1fr}}
.why{background:#fff;padding:clamp(24px,3.4vw,34px)}
.why__n{font-weight:900;font-size:.8125rem;color:var(--teal);letter-spacing:.08em;margin-bottom:14px}
.why h3{margin-bottom:8px}
.why p{color:var(--slate);font-size:.9375rem}

/* ---------- I tre pilastri (su fondo navy) ----------------------------- */
.band--tight{padding-block:clamp(48px,7vw,84px)}
.pillars{display:grid;gap:1px;background:var(--navy-soft);border:1px solid var(--navy-soft);border-radius:var(--r-lg);overflow:hidden;margin-top:38px}
@media(min-width:900px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--navy);padding:clamp(26px,3vw,34px)}
.pillar__k{
  display:inline-block;font-weight:900;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);background:var(--teal);padding:5px 11px;border-radius:999px;margin-bottom:18px;
}
.pillar h3{color:#fff;margin-bottom:10px}
.pillar p{color:var(--on-navy);font-size:.9375rem}

/* ---------- Prezzo ----------------------------------------------------- */
.price{display:grid;gap:14px;margin-top:38px}
@media(min-width:820px){.price{grid-template-columns:repeat(3,1fr)}}
.price__step{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:clamp(22px,3vw,30px);position:relative}
.price__n{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;font-weight:900;font-size:.9375rem;margin-bottom:16px;
}
.price__step h3{margin-bottom:8px}
.price__step p{color:var(--slate);font-size:.9375rem}
.price__note{
  margin-top:16px;border:1px solid var(--teal);background:rgba(10,197,164,.07);
  border-radius:var(--r);padding:clamp(20px,2.6vw,26px);
}
.price__note p{font-size:1.0625rem}

/* ---------- Chiedi un preventivo -------------------------------------- */
.ask{
  margin-top:16px;background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:clamp(26px,3.6vw,38px);display:grid;gap:26px;
}
@media(min-width:900px){.ask{grid-template-columns:1.5fr .9fr;align-items:center;gap:44px}}
.ask h3{color:#fff;font-size:clamp(1.25rem,2.2vw,1.5rem);margin-bottom:12px}
.ask p{color:var(--on-navy);font-size:.9375rem}
.ask p+p{margin-top:12px}
.ask strong{color:#fff}
.ask__go{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ask__go .btn{width:100%;justify-content:center;font-size:1rem;padding:17px 24px}
.ask__hint{font-size:.8125rem;color:#93A8BC;line-height:1.5}

/* ---------- Domande frequenti ----------------------------------------- */
.faq{margin-top:36px;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-weight:700;font-size:1.0625rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:#1d3550}
.faq p{color:var(--slate);padding:0 44px 24px 0;max-width:76ch}

/* ---------- Blocco navy (contatti) ------------------------------------- */
.band{background:var(--navy);color:#fff}
.band .eyebrow{color:#8FA3B6}
.band h2{color:#fff}
.band .lead{color:var(--on-navy)}
.contact{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:880px){.contact{grid-template-columns:1.15fr .85fr;align-items:center}}
.card-me{
  background:#1B3149;border:1px solid var(--navy-soft);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,36px);
}
.card-me__nm{font-weight:700;font-size:1.25rem}
.card-me__role{color:var(--on-navy);font-size:.9375rem;margin-top:2px}
.card-me ul{margin-top:24px;display:grid;gap:2px}
.card-me li{border-top:1px solid var(--navy-soft)}
.card-me li a,.card-me li span{
  display:flex;align-items:center;gap:14px;padding:15px 2px;color:#fff;font-weight:500;
  transition:color var(--t);
}
.card-me li a:hover{color:var(--teal)}
.card-me svg{width:19px;height:19px;flex:none;color:var(--teal)}
.card-me .muted{color:var(--on-navy);font-weight:400}

/* ---------- Footer ----------------------------------------------------- */
.site-foot{background:var(--navy);color:var(--on-navy);padding-block:56px 28px;font-size:.9375rem}
.site-foot__cols{display:grid;gap:34px}
@media(min-width:760px){.site-foot__cols{grid-template-columns:2fr 1fr 1fr}}
.site-foot img{height:26px;width:auto;margin-bottom:16px}
.site-foot h4{color:#fff;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-bottom:14px}
.site-foot a{display:block;padding:5px 0;color:var(--on-navy);transition:color var(--t)}
.site-foot a:hover{color:#fff}
.site-foot__blurb{max-width:38ch;color:var(--on-navy)}
.site-foot__legal{
  border-top:1px solid var(--navy-soft);margin-top:40px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:.8125rem;color:#8296A9;
}
.site-foot__legal a{display:inline;padding:0}

/* ---------- Pagina di testo (privacy) ---------------------------------- */
.doc{padding-block:clamp(48px,7vw,80px)}
.doc h2{margin-top:2.2em;font-size:clamp(1.25rem,2.4vw,1.5rem)}
.doc h2:first-of-type{margin-top:1.4em}
.doc p,.doc li{color:var(--slate)}
.doc ul{margin-top:.8em}
.doc li{position:relative;padding-left:22px;margin-bottom:.5em}
.doc li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--teal)}
.doc a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* ---------- Stampa ----------------------------------------------------- */
@media print{
  .site-head,.drawer,.browser,.btn-row{display:none}
  body{font-size:11pt;color:#000}
}