/* =====================================================================
   LANDING PAGE — foglio di stile condiviso dalle 6 pagine servizio
   Un solo file: il browser lo scarica una volta e lo riusa su tutte.
   Palette e font identici al sito principale.
   ===================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/font/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/font/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/font/inter-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/font/grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/font/grotesk-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/font/plexmono-500.woff2') format('woff2');}

:root{
  --ink:#1C1A17; --ink-soft:#55504A; --stone:#6B6862; --stone-line:#D8D3C9;
  --paper:#F4F2ED; --paper-alt:#ECE8DF; --card:#FFFFFF;
  --blue:#2E4A6B; --blue-deep:#1C3350; --blue-tint:#E6ECF2;
  --dark:#0B1220; --dark-2:#121C2B;
  --green:#2E7D4F;
  --r-sm:12px; --r-md:18px; --r-lg:24px;
  --sh-1:0 14px 34px rgba(11,18,32,0.06);
  --sh-2:0 26px 64px rgba(11,18,32,0.12);
  --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}

h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.2; margin:0 0 14px;}
h1{font-size:clamp(28px,4.2vw,44px); letter-spacing:-0.01em;}
h2{font-size:clamp(23px,3vw,32px);}
h3{font-size:18px;}
p{margin:0 0 14px;}

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--blue); margin-bottom:10px;
}

/* ---------- BOTTONI ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:14px; border:1px solid transparent;
  font-family:var(--body); font-size:15.5px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s;
}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 26px rgba(46,74,107,0.24);}
.btn-primary:hover{background:var(--blue-deep); transform:translateY(-1px);}
.btn-ghost{background:rgba(255,255,255,0.10); color:#fff; border-color:rgba(255,255,255,0.26);}
.btn-ghost:hover{background:rgba(255,255,255,0.18);}
.btn-wa{background:#0B7A41; color:#fff;}   /* stesso verde del sito: bianco a 5,42 */
.btn-wa:hover{background:#09693A;}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none;} }

/* ---------- HEADER minimale ---------- */
/* niente menu di navigazione: su una pagina pubblicitaria ogni link
   che porta altrove e' un potenziale contatto perso */
.lp-header{
  position:sticky; top:0; z-index:60;
  background:rgba(244,242,237,0.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--stone-line);
}
.lp-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:12px; padding-bottom:12px;}
.lp-logo{height:38px; width:auto;}
.lp-tel{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:13.5px; font-weight:500;
  color:var(--blue); text-decoration:none; padding:9px 15px;
  border:1px solid var(--stone-line); border-radius:100px; background:var(--card);
}
.lp-tel svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9;}
@media(max-width:520px){ .lp-tel span{display:none;} .lp-tel{padding:10px 13px;} }

/* ---------- HERO ---------- */
.lp-hero{position:relative; background:var(--dark); color:#fff; overflow:hidden; padding:64px 0 56px;}
.lp-hero-bg{position:absolute; inset:0; z-index:0;}
.lp-hero-bg img{width:100%; height:100%; object-fit:cover; opacity:0.30;}
.lp-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,8,14,0.86) 0%, rgba(5,8,14,0.72) 50%, rgba(5,8,14,0.92) 100%);
}
.lp-hero .wrap{position:relative; z-index:1;}
.lp-hero h1{color:#fff; max-width:20ch;}
.lp-hero h1 span{color:#9CC0E8;}
.lp-sub{font-size:17px; color:rgba(255,255,255,0.80); max-width:54ch; margin-bottom:26px;}
.lp-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px;}
.lp-pills{display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0 0 22px;}
.lp-pills li{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:100px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.07em;
  text-transform:uppercase; color:rgba(255,255,255,0.92);
}
.lp-pills li.star{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.24);}
.lp-pills svg{width:13px; height:13px; fill:#FFC33D;}

/* ---------- SEZIONI ---------- */
section{padding:64px 0;}
.alt{background:var(--paper-alt);}
.sec-head{max-width:62ch; margin-bottom:32px;}
.sec-head p{color:var(--ink-soft); font-size:15.5px;}

/* ---------- COSA COMPRENDE ---------- */
.incl{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; list-style:none; padding:0; margin:0;}
.incl li{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--card); border:1px solid var(--stone-line);
  border-radius:var(--r-md); padding:17px 18px;
}
.incl svg{width:19px; height:19px; flex-shrink:0; margin-top:2px; fill:none; stroke:var(--green); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
.incl strong{display:block; font-size:15px; margin-bottom:3px;}
.incl span{font-size:13.8px; color:var(--ink-soft); line-height:1.55;}
@media(max-width:680px){ .incl{grid-template-columns:1fr;} }

/* ---------- PRIMA / DOPO ---------- */
.ba{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-1); background:var(--card); border:1px solid var(--stone-line);
}
.ba-imgs{position:relative; aspect-ratio:4/3; overflow:hidden;}
.ba-imgs img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ba-after{clip-path:inset(0 0 0 50%);}
.ba-line{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,0.15);}
.ba-knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,0.28); display:flex; align-items:center; justify-content:center;
}
.ba-tag{
  position:absolute; top:14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.06em; text-transform:uppercase; color:#fff;
  background:rgba(11,18,32,0.78); padding:5px 11px; border-radius:100px;
}
.ba-tag.l{left:14px;} .ba-tag.r{right:14px;}
.ba-cap{padding:16px 20px; font-size:14px; color:var(--ink-soft);}
.ba-cap strong{color:var(--ink); display:block; margin-bottom:2px; font-size:15px;}

/* ---------- PREZZI ---------- */

/* ---------- PASSI ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:s;}
.step{background:var(--card); border:1px solid var(--stone-line); border-radius:var(--r-md); padding:22px 20px;}
.step .n{
  width:30px; height:30px; border-radius:50%; background:var(--blue-tint);
  color:var(--blue); font-family:var(--mono); font-size:13px;
  display:flex; align-items:center; justify-content:center; margin-bottom:13px;
}
.step h3{font-size:16.5px; margin-bottom:6px;}
.step p{font-size:14px; color:var(--ink-soft); margin:0;}
@media(max-width:760px){ .steps{grid-template-columns:1fr;} }

/* ---------- FAQ ---------- */
.faq{display:grid; gap:10px; max-width:820px;}
.faq details{
  background:var(--card); border:1px solid var(--stone-line);
  border-radius:var(--r-md); overflow:hidden;
}
.faq details[open]{border-color:var(--blue);}
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:17px 20px; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:16px; font-weight:600;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+"; font-family:var(--body); font-size:21px; font-weight:400;
  color:var(--blue); line-height:1; flex-shrink:0;
}
.faq details[open] summary::after{content:"\2013";}
.faq .ans{padding:0 20px 18px; font-size:15px; color:var(--ink-soft); line-height:1.7;}
.faq .ans p:last-child{margin-bottom:0;}

/* ---------- FORM ---------- */
.field{margin-bottom:15px;}
.field label{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.field label .opt{font-family:var(--body); text-transform:none; letter-spacing:0; color:var(--stone); font-size:12.5px;}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; font-family:var(--body); font-size:16px;
  color:var(--ink); background:var(--paper); border:1px solid var(--stone-line);
  border-radius:var(--r-sm); outline:none; transition:border-color .15s, box-shadow .15s;
}
.field textarea{min-height:104px; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,74,107,0.12);
}
.check{display:flex; align-items:flex-start; gap:11px; margin:18px 0 20px;}
.check input{width:22px; height:22px; flex-shrink:0; accent-color:var(--blue);}
.check label{font-size:13.5px; color:var(--ink-soft); line-height:1.55;}

/* ---------- FOOTER ---------- */
.lp-footer{background:var(--dark); color:#9FB0C4; padding:44px 0 96px; font-size:14px;}
.lp-footer a{color:#9FB0C4;}
.lp-footer .flex{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center;}
.lp-footer img{height:44px; width:auto;}
.lp-footer .small{font-size:12.5px; color:#72859B; margin-top:14px; line-height:1.7;}

/* ---------- BARRA MOBILE ---------- */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(244,242,237,0.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--stone-line);
}
.mbar a{flex:1; padding:14px 10px; border-radius:12px; font-size:15px;}
@media(max-width:760px){ .mbar{display:flex;} .lp-footer{padding-bottom:104px;} }

/* ---------- BANNER COOKIE ---------- */
.ck{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:90;
  background:var(--card); border:1px solid var(--stone-line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:22px 22px;
  max-width:460px; font-size:14px; line-height:1.6; color:var(--ink-soft);
}
.ck h3{font-size:16px; margin-bottom:8px;}
.ck-btns{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px;}
.ck-btns .btn{flex:1; padding:12px 16px; font-size:14px;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--stone-line);}
@media(max-width:760px){ .ck{bottom:82px;} }


/* =====================================================================
   HERO A DUE COLONNE CON MODULO INTEGRATO
   Su traffico a pagamento il visitatore arriva con l'intenzione gia'
   formata: il modulo deve essere nella prima schermata, non in fondo.
   ===================================================================== */
.lp-hero{padding:52px 0 56px;}
.hero-grid{
  display:grid; grid-template-columns:1fr 420px; gap:44px; align-items:start;
}
.hero-left h1{max-width:none;}
.hero-bullets{list-style:none; padding:0; margin:0 0 26px;}
.hero-bullets li{
  display:flex; align-items:flex-start; gap:11px;
  padding:9px 0; color:rgba(255,255,255,0.88); font-size:15px; line-height:1.5;
}
.hero-bullets svg{
  width:18px; height:18px; flex-shrink:0; margin-top:2px;
  fill:none; stroke:#7ee2a8; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.hero-bullets strong{color:#fff; font-weight:600;}

/* modulo su fondo bianco: massimo contrasto sulla hero scura */
.hero-form{
  background:var(--card); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:0 30px 70px rgba(0,0,0,0.42);
  position:sticky; top:78px;
  /* la hero impone color:#fff: qui va riportato al testo scuro,
     altrimenti tutto cio' che non dichiara un colore sparisce */
  color:var(--ink);
}
.hero-form .hf-title{font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:6px; line-height:1.25; color:var(--ink);}
.hero-form .hf-sub{font-size:13.8px; color:var(--ink-soft); margin:0 0 18px; line-height:1.5;}
.hero-form .field{margin-bottom:12px;}
.hero-form .field input, .hero-form .field textarea{padding:12px 14px;}
.hero-form .field textarea{min-height:76px;}
.hero-form .check{margin:14px 0 16px;}
.hero-form .btn-primary{width:100%; padding:16px 22px;}
.hero-form .hf-alt{
  margin-top:14px; text-align:center; font-size:13.5px; color:var(--ink-soft);
}
.hero-form .hf-alt a{color:var(--blue); font-weight:600;}
.hf-badge{
  display:flex; align-items:center; gap:9px; margin-top:15px; padding-top:15px;
  border-top:1px solid var(--stone-line); font-size:12.8px; color:var(--ink-soft); line-height:1.5;
}
.hf-badge svg{width:17px; height:17px; flex-shrink:0; fill:none; stroke:var(--blue); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:18px;}
  .hero-form{position:static; padding:22px 20px;}
  .lp-hero{padding:38px 0 44px;}
  .hero-bullets{margin-bottom:0;}
  .hero-bullets li:last-child{padding-bottom:0;}
}

/* ---------- BLOCCO CHIUSURA ---------- */
.closing{background:var(--dark); color:#fff; text-align:center; padding:64px 0;}
.closing h2{color:#fff;}
.closing p{color:rgba(255,255,255,0.76); max-width:52ch; margin:0 auto 26px; font-size:16px;}
.closing .lp-actions{justify-content:center;}

/* ---------- CONFERMA INVIO ---------- */
.hf-ok{text-align:center; padding:14px 0 6px;}
.hf-ok svg{width:42px; height:42px; color:var(--green); margin:0 auto 12px;}
.hf-ok h3{font-size:18px; margin-bottom:6px; color:var(--ink);}
.hf-ok p{font-size:14px; color:var(--ink-soft); margin-bottom:16px;}
.hf-ok .btn{width:100%;}

/* =====================================================================
   BLOCCO TRASPARENZA
   Impegni concreti che un operatore scorretto non prenderebbe mai.
   Nessun riferimento ai concorrenti: la differenza si vede da sola.
   ===================================================================== */
.clear-lead{
  max-width:64ch; font-size:16px; color:var(--ink-soft);
  line-height:1.75; margin-bottom:30px;
}
.clear-lead strong{color:var(--ink);}
.pledges{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.pledge{
  background:var(--card); border:1px solid var(--stone-line);
  border-left:3px solid var(--blue);
  border-radius:var(--r-md); padding:22px 22px;
}
.pledge h3{font-size:16.5px; margin-bottom:8px; display:flex; align-items:center; gap:10px;}
.pledge h3 svg{
  width:19px; height:19px; flex-shrink:0;
  fill:none; stroke:var(--blue); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.pledge p{font-size:14.5px; color:var(--ink-soft); margin:0; line-height:1.65;}
.pledge p strong{color:var(--ink);}
@media(max-width:760px){ .pledges{grid-template-columns:1fr;} }

/* due confronti prima/dopo affiancati */
.ba-pair{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media(max-width:860px){ .ba-pair{grid-template-columns:1fr;} }

/* =====================================================================
   RECENSIONI — stesse card del sito principale, su tre colonne
   ===================================================================== */
.rev-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px; border-radius:100px;
  background:var(--card); border:1px solid var(--stone-line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink); margin-top:4px;
}
.rev-badge b{font-weight:600;}
.rev-badge svg{width:13px; height:13px; fill:#E8A33D; flex-shrink:0;}

.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.rev-card{
  margin:0; padding:28px 24px; border-radius:22px;
  background:var(--card); border:1px solid var(--stone-line);
  box-shadow:0 18px 44px rgba(28,26,23,0.05);
  display:flex; flex-direction:column;
}
.rev-quote{
  width:24px; height:24px; fill:none; stroke:var(--stone-line);
  stroke-width:1.6; margin-bottom:14px; flex-shrink:0;
}
.rev-card p{font-size:15px; line-height:1.72; color:var(--ink-soft); margin:0 0 22px; flex:1;}
.rev-card .rev-foot-in{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--stone-line);
}
.rev-name{font-size:14.5px; font-weight:600; color:var(--ink);}
.rev-src{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--stone);
}
.rev-all{
  margin-top:28px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:14.5px; color:var(--ink-soft);
}
.rev-all a{color:var(--blue); font-weight:600; text-decoration:none;}
.rev-all a:hover{text-decoration:underline;}
@media(max-width:900px){ .rev-grid{grid-template-columns:1fr;} }