/* Landing Prova gratuita Vacufit · Fit and Go Cisterna di Latina
   Layout: mobile-first, sezioni a fascia piena alternate chiaro/scuro; hero scuro con modulo in evidenza */
:root{
  --ink:#0d1b21;        /* blu notte: testi e fasce scure */
  --ink-2:#16303a;      /* superfici sulle fasce scure */
  --teal:#00b7d3;       /* turchese Fit and Go */
  --teal-deep:#00788a;  /* turchese leggibile su bianco */
  --thermal:#ff7a3d;    /* calore a infrarossi, solo nel meccanismo */
  --paper:#ffffff;
  --mist:#eef5f7;
  --line:#d5e3e7;
  --muted:#4f646b;
  --muted-dark:#a9c1c8;
  --ok:#14804a; --err:#c0392b;
  --display:"Montserrat","Segoe UI",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",Arial,sans-serif;
  --radius:12px;
  --gutter:clamp(16px,4vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-deep)}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.wrap{max-width:1160px;margin:0 auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}
.section{padding-block:clamp(56px,9vw,104px)}
.section > .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,40px)}
.section--dark{background:var(--ink);color:#fff}
.section--mist{background:var(--mist)}
.h2{font-size:clamp(28px,4.4vw,44px);font-weight:800;letter-spacing:-.01em;max-width:22ch}
.lead{font-size:clamp(18px,2vw,20px);color:var(--muted);max-width:62ch}
.section--dark .lead{color:var(--muted-dark)}
.eyebrow{font:700 13px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}

/* 1. Trust bar */
.trustbar{background:#08141a;color:#cfe3e8;font:600 12px/1.4 var(--display);letter-spacing:.1em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:9px var(--gutter);text-align:center}
.trustbar > span + span::before{content:"·";margin-right:18px;color:var(--teal)}
.trustbar__rating{text-transform:none;letter-spacing:.02em}
.stars{color:#ffc93c;letter-spacing:1px}

/* Bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:14px 28px;border:0;border-radius:999px;
  font:800 16px/1.2 var(--display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn--primary{background:var(--teal);color:var(--ink);box-shadow:0 8px 24px -10px rgba(0,183,211,.8)}
.btn--primary:hover{background:#18c8e3;transform:translateY(-1px)}
.btn--primary:disabled{opacity:.6;cursor:progress;transform:none}
.btn--center{justify-self:center}
.btn--small{min-height:40px;padding:8px 18px;font-size:13px;background:var(--teal);color:var(--ink)}

/* Liste con spunte / croci */
.ticks,.crosses{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li,.crosses li{position:relative;padding-left:34px;font-weight:600}
.ticks li::before,.crosses li::before{position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font:800 14px/1 var(--body)}
.ticks li::before{content:"✓";background:var(--teal);color:var(--ink)}
.crosses li::before{content:"✕";background:#e9eef0;color:#8a9aa0}

/* 2. Hero */
.hero{background:radial-gradient(120% 80% at 85% 0%,#14414d 0%,var(--ink) 60%);color:#fff;padding-block:24px clamp(48px,7vw,88px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;grid-template-areas:"logo" "copy" "form" "photo"}
.hero__logo{grid-area:logo;justify-self:start}
.hero__logo img{width:150px}
.hero__copy{grid-area:copy;display:grid;gap:18px;align-content:start}
.hero h1{font-size:clamp(30px,5vw,52px);font-weight:800;letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero__sub{font-size:clamp(18px,2vw,21px);color:var(--muted-dark);max-width:52ch}
.hero .ticks{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:6px}
.hero__form{grid-area:form}
.hero__photo{grid-area:photo}
@media (min-width:960px){
  .hero__grid{grid-template-columns:1.15fr .85fr;column-gap:56px;grid-template-areas:"logo logo" "copy form" "photo form"}
  .hero__form{align-self:start;position:sticky;top:24px}
}

/* Modulo */
.lead-form{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:clamp(20px,3vw,32px);display:grid;gap:14px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.section:not(.section--dark) .lead-form{border:1px solid var(--line)}
.lead-form__title{font-size:22px;font-weight:800}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:15px}
.field input{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:400 17px var(--body)}
.field input:focus{border-color:var(--teal-deep);outline:none;box-shadow:0 0 0 3px rgba(0,183,211,.25)}
.field input[aria-invalid="true"]{border-color:var(--err)}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px;line-height:1.45;color:var(--muted);cursor:pointer}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--teal-deep)}
.consent.is-invalid{color:var(--err)}
.captcha{min-height:78px;display:flex;justify-content:center;transform-origin:center top}
@media (max-width:360px){.captcha{transform:scale(.88)}}
.lead-form .btn{width:100%}
.lead-form__note{font-size:14px;color:var(--muted)}
.lead-form__msg{font-weight:600;font-size:15px}
.lead-form__msg:empty{display:none}
.lead-form__msg.is-error{color:var(--err)}
.lead-form.is-sent{place-items:center;text-align:center;padding-block:40px}
.thanks{display:grid;gap:10px;justify-items:center}
.thanks__icon{width:56px;height:56px;border-radius:50%;background:var(--teal);color:var(--ink);display:grid;place-items:center;font:800 28px/1 var(--body)}
.thanks h3{font-size:22px}
.thanks p{color:var(--muted)}

/* Segnaposto foto (da sostituire con le foto reali) */
.photo-slot{margin:0;aspect-ratio:4/3;max-width:100%;border-radius:var(--radius);display:grid;place-items:center;padding:20px;text-align:center;
  background:repeating-linear-gradient(135deg,rgba(0,183,211,.10) 0 14px,rgba(0,183,211,.04) 14px 28px);border:2px dashed rgba(0,183,211,.5);
  color:var(--teal);font:600 14px/1.4 var(--display)}
.photo-slot--wide{aspect-ratio:16/9;width:100%;max-width:880px;justify-self:center}
.photo-slot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* 3. Card identificazione */
.cards3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{display:grid;gap:14px;align-content:start;padding:28px 24px;border-radius:var(--radius);background:var(--mist)}
.card__icon{width:44px;height:44px;fill:none;stroke:var(--teal-deep);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:20px;font-weight:700}

/* 4. Meccanismo */
.formula{display:grid;gap:12px;align-items:stretch}
.formula__item{border-radius:var(--radius);padding:24px;background:var(--ink-2);display:grid;gap:10px;align-content:start;border-top:4px solid}
.formula__item--move{border-color:var(--teal)}
.formula__item--vacuum{border-color:#7fdcec}
.formula__item--thermal{border-color:var(--thermal)}
.formula__tag{font:800 clamp(24px,3vw,32px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.formula__item--move .formula__tag{color:var(--teal)}
.formula__item--vacuum .formula__tag{color:#7fdcec}
.formula__item--thermal .formula__tag{color:var(--thermal)}
.formula__item p{color:var(--muted-dark)}
.formula__op{justify-self:center;font:800 32px/1 var(--display);color:var(--muted-dark)}
.formula__result{font:700 clamp(18px,2.2vw,22px)/1.4 var(--display);max-width:48ch}
@media (min-width:860px){.formula{grid-template-columns:1fr auto 1fr auto 1fr}.formula__op{align-self:center}}

/* 5. Benefici */
.benefit{padding:28px 24px;border-radius:var(--radius);border:1px solid var(--line);display:grid;gap:10px;align-content:start}
.benefit h3{font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
.benefit p{font-size:18px}

/* 6. Confronto */
.compare{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.compare__col{border-radius:var(--radius);padding:28px 24px;display:grid;gap:18px;align-content:start}
.compare__col h3{font-size:18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.compare__col--gym{background:var(--paper);color:var(--muted)}
.compare__col--gym .crosses li{font-weight:400}
.compare__col--vacufit{background:var(--ink);color:#fff;box-shadow:0 20px 50px -28px rgba(13,27,33,.8)}
.compare__col--vacufit h3{color:var(--teal)}

/* 7. Offerta */
.offer{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.section > .wrap.offer{grid-template-columns:minmax(0,1fr) 440px;align-items:center;column-gap:56px}}
.offer__copy{display:grid;gap:28px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;font-size:18px;font-weight:600}
.steps li::before{content:counter(s);width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--teal);display:grid;place-items:center;font:800 18px/1 var(--display)}

/* 8. FAQ */
.faq{display:grid;gap:10px}
.faq details{background:var(--paper);border-radius:10px;border:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 52px 18px 20px;position:relative;font:700 17px/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  background:var(--mist);color:var(--teal-deep);display:grid;place-items:center;font:800 18px/1 var(--body);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 20px;color:var(--muted)}

/* 12. Chiusura */
.close{grid-template-columns:minmax(0,1fr)}
.close__copy{display:grid;gap:16px}
.close__address{text-align:center;font-weight:700;color:var(--ink)}
.close__photo{margin:0}
.close__photo img{border-radius:var(--radius);width:100%}
@media (min-width:900px){.section > .wrap.close{grid-template-columns:minmax(0,1fr) 440px;column-gap:56px;align-items:start}.close__photo{grid-column:1/-1}}

/* Footer */
.footer{background:#08141a;color:#9fb6bc;font-size:15px;padding-block:48px 28px}
.footer a{color:#cfe3e8}
.footer__grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.footer address{font-style:normal;line-height:1.7}
.footer__social{display:flex;flex-wrap:wrap;gap:16px}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 20px;line-height:1.5;margin-top:32px;padding-top:20px;border-top:1px solid #1d3540;font-size:13px}


/* Cookie bar */
.cookiebar{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;max-width:560px;
  background:var(--ink);color:#e6f0f2;border-radius:var(--radius);padding:14px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  box-shadow:0 12px 40px -12px rgba(0,0,0,.5);font-size:14px}
.cookiebar p{flex:1 1 240px}
.cookiebar a{color:var(--teal)}

/* Pagine legali */
.legal{padding-block:40px 72px}
.legal h1{font-size:clamp(28px,4vw,38px);margin-bottom:24px}
.legal h2{font-size:20px;margin:32px 0 10px}
.legal p,.legal li{max-width:70ch;color:#2b3c42}
.legal p+p{margin-top:10px}
.legal .todo{background:#fff4d6;color:#7a5200;padding:0 4px;border-radius:3px}
.legal-top{background:var(--ink);padding-block:16px}
.legal-top img{width:130px}
@media (max-width:600px){.trustbar{gap:4px 14px;font-size:11px}.trustbar > span + span::before{content:none}}

/* Link recensioni nella trust bar */
a.trustbar__rating{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(207,227,232,.5)}
a.trustbar__rating:hover{color:#fff;border-bottom-color:#fff}

/* Recensioni Google */
.reviews__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.gscore{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--paper)}
.gscore:hover{border-color:var(--teal-deep)}
.gscore__g{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:800 18px/1 var(--body);color:#fff;
  background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0)}
.gscore__num{font:800 28px/1 var(--display)}
.gscore__meta{display:grid;font-size:13px;line-height:1.3;color:var(--muted)}
.marquee{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:8px 4px;margin-top:clamp(24px,4vw,40px)}
.marquee::-webkit-scrollbar{display:none}
.marquee:focus-visible{outline-offset:-3px}
.marquee__track{display:flex;gap:16px;width:max-content;padding-inline:var(--gutter)}
.review{width:min(340px,82vw);flex:none;display:grid;gap:10px;align-content:start;padding:22px;border-radius:var(--radius);
  background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 30px -22px rgba(13,27,33,.5)}
.review__head{display:flex;gap:12px;align-items:center}
.review__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.review__avatar--empty{display:grid;place-items:center;background:var(--mist);color:var(--teal-deep);font:800 16px/1 var(--display)}
.review__author{display:block;font-weight:700;color:var(--ink);text-decoration:none}
a.review__author:hover{text-decoration:underline}
.review__when{display:block;font-size:13px;color:var(--muted)}
.review .stars{font-size:16px}
.review__text{font-size:16px;color:#2b3c42}
.reviews__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(20px,3vw,28px)}
.reviews__credit{font-size:13px;color:var(--muted)}
.btn--ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);min-height:48px;font-size:14px}
.btn--ghost:hover{background:var(--ink);color:#fff}

/* Galleria */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.gallery__item{display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--line)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
a.gallery__item:hover img{transform:scale(1.04)}
.gallery .photo-slot{aspect-ratio:4/3}
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0}
.lightbox::backdrop{background:rgba(5,12,15,.92)}
.lightbox[open]{display:grid;place-items:center}
.lightbox__img{max-width:min(92vw,1400px);max-height:86vh;width:auto;height:auto;border-radius:8px}
.lightbox__close,.lightbox__nav{position:fixed;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;border-radius:50%;
  width:48px;height:48px;font:400 26px/1 var(--body);display:grid;place-items:center}
.lightbox__close{top:calc(16px + env(safe-area-inset-top,0px));right:16px}
.lightbox__nav{top:50%;transform:translateY(-50%)}
.lightbox__nav--prev{left:12px}
.lightbox__nav--next{right:12px}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.25)}
.section > .wrap.reviews__foot{display:flex}
.gallery .photo-slot{display:grid}

/* Video Vacufit in azione e foto benefici */
.hero__video{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--ink-2)}
.hero__video video{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:960px){.hero__video{aspect-ratio:16/11}}
.benefits__photo{margin:0;justify-self:center;width:100%;max-width:880px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10}
.benefits__photo img{width:100%;height:100%;object-fit:cover}

/* Banner consenso */
.cookiebar__actions{display:flex;gap:8px;flex-wrap:wrap}
.btn--outline{background:transparent;color:#e6f0f2;border:1.5px solid rgba(230,240,242,.6)}
.btn--outline:hover{border-color:#fff;color:#fff}

/* Pagina di ringraziamento */
.ty{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;padding-block:56px}
.ty__box{max-width:640px;display:grid;gap:18px}
.ty__icon{width:72px;height:72px;border-radius:50%;background:var(--teal);color:var(--ink);display:grid;place-items:center;font:800 36px/1 var(--body)}
.ty h1{font-size:clamp(32px,5vw,48px);font-weight:800}
.ty .lead{color:var(--muted-dark)}
.ty__next{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.ty__next li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;color:#e6f0f2}
.ty__next li span{width:32px;height:32px;border-radius:50%;background:var(--ink-2);color:var(--teal);display:grid;place-items:center;font:800 15px/1 var(--display)}
.ty__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.btn--wa{background:#25d366;color:#fff}
.btn--ghost-light{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.marquee__track{align-items:flex-start}

/* Foto in alta definizione: benefici e galleria del centro */
.benefits__photo{aspect-ratio:4/3;max-width:760px}
@media (min-width:900px){.section > .wrap.close .close__gallery{grid-column:1/-1}}
.close__gallery{display:grid;gap:18px;margin-top:8px}
.close__gallery-title{font-size:clamp(20px,2.4vw,26px);font-weight:800;color:#fff}
.gallery--portrait{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.gallery--portrait{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gallery--portrait .gallery__item{aspect-ratio:3/4;background:var(--ink-2)}
/* Pagina di ringraziamento: sempre a tutta altezza, footer in fondo */
.page-ty{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--ink)}
.page-ty .ty{flex:1 0 auto}
.page-ty .footer{flex:none}