:root{
  --blu:#2B2F9E;
  --ink:#14163F;
  --giallo:#F8C800;
  --grigio:#7C8088;
  --cemento:#EEEFF2;
  --bianco:#FFFFFF;
  --skew:-8deg;
  --pad:clamp(24px,5vw,72px);
  --radius:0px;
  --glass:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Archivo',sans-serif;color:var(--ink);background:var(--bianco);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.display{font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.95}
.mono{font-family:'IBM Plex Mono',monospace}

/* ── SCROLL PROGRESS ── */
#spb{position:fixed;top:0;left:0;width:0%;height:3px;background:var(--giallo);z-index:200;transition:width .1s linear;pointer-events:none}

/* ── QUOTA / dimension line ── */
.quota{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.quota .line{position:relative;flex:0 0 120px;height:1px;background:var(--grigio)}
.quota .line::before,.quota .line::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--grigio)}
.quota .line::before{left:0}.quota .line::after{right:0}
.quota .lbl{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--blu)}
.quota.inv .line,.quota.inv .line::before,.quota.inv .line::after{background:rgba(255,255,255,.45)}
.quota.inv .lbl{color:var(--giallo)}
.dot{color:var(--giallo)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:'Archivo',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.05em;font-size:15px;padding:18px 30px;border:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;transform:skewX(var(--skew));position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .2s}
.btn:hover::after{background:rgba(255,255,255,.08)}
.btn>span{transform:skewX(calc(var(--skew)*-1));display:inline-flex;align-items:center;gap:12px}
.btn-giallo{background:var(--giallo);color:var(--ink)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.btn-blu{background:var(--blu);color:#fff}
.btn:hover{transform:skewX(var(--skew)) translateY(-3px);box-shadow:0 14px 30px -12px rgba(20,22,63,.5)}
.btn .arr{font-style:normal}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(32px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}.rv[data-d="2"]{transition-delay:.2s}.rv[data-d="3"]{transition-delay:.3s}.rv[data-d="4"]{transition-delay:.4s}.rv[data-d="5"]{transition-delay:.5s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.btn:hover{transform:skewX(var(--skew))}html{scroll-behavior:auto}}

/* ── HEADER ── */
header{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:3px solid var(--giallo);box-shadow:0 4px 30px -10px rgba(20,22,63,.18)}
header.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);box-shadow:0 4px 30px -10px rgba(20,22,63,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:20px}
.nav .logo img{height:40px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none}
.nav ul a{font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);position:relative;padding:6px 0;cursor:pointer;transition:color .2s}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--giallo);transform:skewX(var(--skew));transition:width .25s ease}
.nav ul a:hover::after,.nav ul a.active::after{width:100%}
.nav .btn{padding:13px 22px;font-size:13px}
.burger{display:none;background:none;border:none;cursor:pointer;width:42px;height:42px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span{display:block;width:26px;height:3px;background:var(--ink);transform:skewX(var(--skew));transition:transform .3s,opacity .3s,background .3s}
.burger.open span:nth-child(1){transform:skewX(var(--skew)) translateY(9px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:skewX(var(--skew)) translateY(-9px) rotate(-45deg)}
@media(max-width:1020px){
  .nav ul{display:none;position:absolute;top:87px;left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);flex-direction:column;gap:0;border-bottom:3px solid var(--giallo);box-shadow:0 24px 40px -20px rgba(20,22,63,.3)}
  .nav ul.open{display:flex}
  .nav ul li{border-top:1px solid var(--cemento)}
  .nav ul a{display:block;padding:18px var(--pad);color:var(--ink)!important}
  .burger{display:flex}
  .nav .btn{display:none}
}

/* ── ROUTER ── */
.page{display:none}
.page.active{display:block;animation:pgin .5s cubic-bezier(.22,1,.36,1)}
@keyframes pgin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}


/* ── INTRO ── */
#intro{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#FFFFFF;transition:opacity .7s ease,visibility .7s ease}
#intro.hide{opacity:0;visibility:hidden;pointer-events:none}
#intro .i-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px}
#intro .i-logo{width:min(420px,72vw);opacity:0;transform:translateY(14px);animation:iRise .9s .15s cubic-bezier(.22,.75,.25,1) forwards}
#intro .i-line{display:block;width:0;height:3px;background:var(--giallo);margin:28px 0 18px;animation:iLine .8s .8s cubic-bezier(.22,.75,.25,1) forwards}
#intro .i-sub{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--blu);opacity:0;animation:iFade .8s 1.15s ease forwards}
#intro .i-hint{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(20,22,63,.45);opacity:0;animation:iFade .8s 1.6s ease forwards}
#intro .i-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(20,22,63,.08)}
#intro .i-bar span{display:block;height:100%;width:0;background:var(--giallo)}
@keyframes iRise{to{opacity:1;transform:translateY(0)}}
@keyframes iLine{to{width:min(180px,40vw)}}
@keyframes iFade{to{opacity:1}}
body.intro-lock{overflow:hidden}
#hero-home .inner{transition:opacity .9s ease}
body.intro-lock #hero-home .inner{opacity:0}
@media (prefers-reduced-motion:reduce){#intro .i-logo,#intro .i-line,#intro .i-sub,#intro .i-hint{animation-duration:.01s;animation-delay:0s}#hero-home .inner{transition:none}}

/* ── HERO ── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.hero .tint{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,14,42,.93) 0%,rgba(15,17,50,.42) 46%,rgba(12,14,42,.28) 100%),linear-gradient(115deg,rgba(43,47,158,.30) 0%,rgba(20,22,63,.08) 60%)}
#hero-home .bg{background-position:26% 42%}
.phero .bg{background-position:28% 40%}
.hero .noise{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px}
.hero .inner{position:relative;width:100%;padding-top:160px}
.hero h1{font-size:clamp(46px,8.4vw,118px)}
.hero h1 .l2{color:var(--giallo);font-size:.62em}
.hero p.lead{max-width:560px;font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.88);margin:30px 0 38px}
.hero .ctas{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:70px}

/* hero strip */
.hero .strip{position:relative;background:var(--giallo);color:var(--ink);clip-path:polygon(0 18px,100% 0,100% 100%,0 100%)}
.hero .strip .wrap{display:flex;flex-wrap:wrap;padding-top:34px;padding-bottom:22px}
.hero .strip .cell{flex:1 1 200px;padding:6px 26px 6px 0;border-right:1px solid rgba(20,22,63,.18);margin-right:26px}
.hero .strip .cell:last-child{border-right:none;margin-right:0}
.hero .strip .num{font-style:italic;font-weight:900;font-size:clamp(26px,3vw,38px);line-height:1}
.hero .strip .des{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:6px}

/* ── PAGE HERO ── */
.phero{position:relative;min-height:64svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding-bottom:64px}
.phero .bg{position:absolute;inset:0;background-position:center;background-size:cover}
.phero .tint{position:absolute;inset:0;background:linear-gradient(155deg,rgba(20,22,63,.9) 0%,rgba(43,47,158,.52) 55%,rgba(20,22,63,.84) 100%)}
.phero .inner{position:relative;width:100%;padding-top:150px}
.phero h1{font-size:clamp(40px,6.4vw,86px)}
.phero p.lead{max-width:620px;font-size:17px;color:rgba(255,255,255,.9);margin-top:24px}

section{padding:110px 0}
h2.display{font-size:clamp(32px,4.4vw,56px);margin-bottom:18px}
h3.display{font-size:clamp(22px,2.6vw,30px)}
.sub{max-width:660px;color:#3c3f63;font-size:17px}

/* ── CARDS ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}
@media(max-width:960px){.cards{grid-template-columns:1fr}}
.card{background:var(--cemento);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;cursor:pointer;will-change:transform}
.card:hover{transform:translateY(-10px);box-shadow:0 36px 60px -30px rgba(20,22,63,.45)}
.card .ph{position:relative;height:240px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card:hover .ph img{transform:scale(1.08)}
.card .ph .tag{position:absolute;top:0;left:0;background:var(--blu);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;padding:8px 14px}
.card .body{padding:30px 30px 34px;display:flex;flex-direction:column;flex:1}
.card h3{font-style:italic;font-weight:800;text-transform:uppercase;font-size:23px;line-height:1.1;margin-bottom:14px}
.card p{font-size:15.5px;color:#3c3f63;flex:1}
.card .more{margin-top:24px;font-weight:800;font-style:italic;text-transform:uppercase;font-size:13.5px;color:var(--blu);display:inline-flex;gap:10px;align-items:center}
.card .more .bar{width:34px;height:3px;background:var(--giallo);transform:skewX(var(--skew));transition:width .3s ease}
.card:hover .more .bar{width:58px}
.card.featured{outline:3px solid var(--giallo);outline-offset:-3px}

/* ── SPLIT ── */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;margin-top:60px}
@media(max-width:960px){.split{grid-template-columns:1fr;gap:36px}}
.split .ph{position:relative}
.split .ph img{width:100%;height:460px;object-fit:cover;clip-path:polygon(0 0,100% 26px,100% 100%,0 calc(100% - 26px));transition:clip-path .4s ease}
@media(max-width:960px){.split .ph img{height:320px}}
.split .ph .badge{position:absolute;left:-2px;bottom:34px;background:var(--giallo);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:10px 16px}

/* ── CHECKLIST ── */
.checklist{list-style:none;margin-top:26px}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--cemento);font-size:15.5px;transition:padding-left .2s}
.checklist li:hover{padding-left:6px}
.checklist li::before{content:"";flex:0 0 12px;height:12px;margin-top:6px;background:var(--giallo);transform:skewX(var(--skew))}
.checklist.inv li{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.88)}

/* ── METODO (blue band) ── */
.metodo{background:var(--blu);color:#fff;clip-path:polygon(0 0,100% 54px,100% 100%,0 100%);padding-top:160px;position:relative;overflow:hidden}
.metodo::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(255,255,255,.06) 0%,transparent 70%);pointer-events:none}
.metodo h2{color:#fff}
.metodo .sub{color:rgba(255,255,255,.82)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:70px;position:relative}
.steps::before{content:"";position:absolute;top:7px;left:2%;right:2%;height:1px;background:rgba(255,255,255,.3)}
.step{padding:0 18px 0 0;position:relative}
.step .tick{width:15px;height:15px;background:var(--giallo);transform:skewX(var(--skew));margin-bottom:22px;position:relative;z-index:1;transition:transform .25s,box-shadow .25s}
.step:hover .tick{transform:skewX(var(--skew)) scale(1.4);box-shadow:0 0 16px rgba(248,200,0,.6)}
.step .n{font-family:'IBM Plex Mono',monospace;color:var(--giallo);font-size:12px;letter-spacing:.2em;margin-bottom:8px}
.step h4{font-style:italic;font-weight:800;text-transform:uppercase;font-size:17px;margin-bottom:8px}
.step p{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.5}
@media(max-width:960px){.steps{grid-template-columns:1fr 1fr;gap:30px 0}.steps::before{display:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ── 3D BUILDER ── */
.builder{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.builder::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 80%,rgba(43,47,158,.3) 0%,transparent 70%);pointer-events:none}
.builder h2{color:#fff}
.builder .sub{color:rgba(255,255,255,.78)}
.stage{position:relative;margin-top:50px;background:linear-gradient(180deg,#7fa0e6 0%,#4364bd 45%,#2b3170 100%);border:1px solid rgba(255,255,255,.1)}
#cantiere3d{display:block;width:100%;height:660px;border:0}
@media(max-width:720px){#cantiere3d{height:520px}}
.no3d{display:flex;align-items:center;justify-content:center;text-align:center;height:420px;padding:30px;color:rgba(255,255,255,.85);font-style:italic;font-weight:700;font-size:18px;line-height:1.6}

/* ── CANTIERE (timeline foto) ── */
.cantiere{background:var(--cemento)}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px}
@media(max-width:1100px){.tl{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tl{grid-template-columns:1fr}}
.tl .shot{position:relative;background:#fff;padding:10px 10px 18px;box-shadow:0 18px 34px -24px rgba(20,22,63,.3);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.tl .shot:hover{transform:translateY(-8px) rotate(-.5deg);box-shadow:0 30px 50px -20px rgba(20,22,63,.4)}
.tl .shot img{width:100%;height:260px;object-fit:cover;transition:transform .5s ease}
.tl .shot:hover img{transform:scale(1.04)}
.tl .shot .cap{display:flex;align-items:baseline;gap:10px;padding:14px 6px 0}
.tl .shot .cap .f{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--blu);letter-spacing:.16em;white-space:nowrap}
.tl .shot .cap .t{font-size:13.5px;font-weight:600}
.tl .shot::after{content:"";position:absolute;top:0;left:0;width:46px;height:8px;background:var(--giallo);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.cta-line{margin-top:54px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cta-line .note{font-size:15px;color:#3c3f63;max-width:430px}

/* ── FASI PISCINE ── */
.fasi{counter-reset:fase}
.fase-row{display:grid;grid-template-columns:120px 1fr;gap:30px;padding:44px 0;border-top:1px solid #d8dae3;transition:background .2s}
.fase-row:last-child{border-bottom:1px solid #d8dae3}
.fase-row:hover{background:rgba(43,47,158,.03);margin:0 -20px;padding-left:20px;padding-right:20px}
@media(max-width:720px){.fase-row{grid-template-columns:1fr;gap:14px}.fase-row:hover{margin:0;padding-left:0;padding-right:0}}
.fase-row .num{font-style:italic;font-weight:900;font-size:54px;color:transparent;-webkit-text-stroke:2px var(--blu);line-height:1}
.fase-row h3{font-style:italic;font-weight:800;text-transform:uppercase;font-size:22px;margin-bottom:10px}
.fase-row p,.fase-row li{font-size:15.5px;color:#3c3f63}
.fase-row ul{list-style:none;margin-top:10px}
.fase-row li{display:flex;gap:12px;padding:5px 0}
.fase-row li::before{content:"";flex:0 0 10px;height:10px;margin-top:8px;background:var(--giallo);transform:skewX(var(--skew))}

/* ── VS (skimmer/sfioro) ── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:50px}
@media(max-width:860px){.vs{grid-template-columns:1fr}}
.vs .col{background:#fff;padding:38px 34px;box-shadow:0 22px 44px -30px rgba(20,22,63,.28);transition:transform .3s,box-shadow .3s}
.vs .col:hover{transform:translateY(-6px);box-shadow:0 32px 60px -24px rgba(20,22,63,.38)}
.vs .col.pro{outline:3px solid var(--giallo);outline-offset:-3px}
.vs .col .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--blu);text-transform:uppercase}
.vs .col h3{font-style:italic;font-weight:900;text-transform:uppercase;font-size:28px;margin:8px 0 18px}
.vs .col p{font-size:15px;color:#3c3f63;margin-bottom:16px}

/* ── GRID / BOX ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:50px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.box{background:var(--cemento);padding:36px 32px;transition:transform .25s,box-shadow .25s}
.box:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(20,22,63,.25)}
.box h3{font-style:italic;font-weight:800;text-transform:uppercase;font-size:20px;margin-bottom:14px}

/* ── GOOGLE REVIEWS SECTION ── */
.reviews-band{background:var(--ink);color:#fff;padding:60px 0;position:relative;overflow:hidden}
.reviews-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 20% 50%,rgba(43,47,158,.4) 0%,transparent 70%);pointer-events:none}
.reviews-band .inner{position:relative;display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:space-between}
.reviews-band .left{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.reviews-g-logo{display:flex;align-items:center;gap:12px}
.reviews-g-logo .g-icon{width:42px;height:42px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.reviews-g-logo .g-icon svg{width:24px;height:24px}
.reviews-g-logo .g-text{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.reviews-g-logo .g-text b{display:block;font-size:15px;letter-spacing:0;color:#fff;font-family:"Archivo",sans-serif;font-style:italic;font-weight:800;text-transform:uppercase}
.stars-row{display:flex;align-items:center;gap:14px}
.stars{display:flex;gap:3px}
.stars svg{width:22px;height:22px}
.rating-num{font-style:italic;font-weight:900;font-size:38px;line-height:1;color:var(--giallo)}
.rating-count{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.6);margin-top:4px}
.btn-reviews{display:inline-flex;align-items:center;gap:12px;font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.05em;font-size:14px;padding:16px 28px;background:var(--giallo);color:var(--ink);transform:skewX(var(--skew));transition:transform .2s,box-shadow .2s;border:none;cursor:pointer;white-space:nowrap}
.btn-reviews>span{transform:skewX(calc(var(--skew)*-1));display:inline-flex;align-items:center;gap:10px}
.btn-reviews:hover{transform:skewX(var(--skew)) translateY(-3px);box-shadow:0 14px 30px -10px rgba(248,200,0,.4)}

/* ── CONTATTI ── */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;margin-top:50px}
@media(max-width:960px){.contact{grid-template-columns:1fr}}
.cinfo .row{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--cemento);transition:background .2s}
.cinfo .row:hover{background:rgba(43,47,158,.04);margin:0 -12px;padding:16px 12px}
.cinfo .row .ic{flex:0 0 14px;height:14px;margin-top:7px;background:var(--giallo);transform:skewX(var(--skew))}
.cinfo .row b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--blu)}

/* ── FORM ── */
form{background:var(--cemento);padding:40px 36px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
.fg{margin-bottom:18px;position:relative}
.fg label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blu);margin-bottom:7px;transition:color .2s}
.fg:focus-within label{color:var(--ink)}
.fg input,.fg select,.fg textarea{width:100%;padding:14px;border:1px solid #cfd2dd;background:#fff;font-family:'Archivo',sans-serif;font-size:15px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 3px rgba(43,47,158,.12)}
.fok{display:none;margin-top:18px;background:#fff;border-left:4px solid var(--giallo);padding:16px 18px;font-size:14.5px}
.fok.show{display:block}

/* ── CTA FINALE ── */
.fine{position:relative;background:var(--ink);color:#fff;clip-path:polygon(0 54px,100% 0,100% 100%,0 100%);padding:160px 0 120px;overflow:hidden}
.fine .bgph{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.12}
.fine::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 80% 50%,rgba(43,47,158,.35) 0%,transparent 70%);pointer-events:none}
.fine .inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:50px;flex-wrap:wrap}
.fine h2{color:#fff;max-width:620px}
.fine .contatti{font-family:'IBM Plex Mono',monospace;font-size:14px;color:rgba(255,255,255,.82);margin-top:22px;line-height:2.1}
.fine .contatti b{color:var(--giallo);font-weight:600}

/* ── FOOTER ── */
footer{background:var(--ink);color:rgba(255,255,255,.72);font-size:13.5px}
footer .hz{height:10px;background:repeating-linear-gradient(-55deg,var(--giallo) 0 16px,var(--ink) 16px 32px)}
footer .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:54px 0 40px}
footer img{height:34px;filter:brightness(0) invert(1);opacity:.88}
footer a{transition:color .2s}
footer a:hover{color:var(--giallo)}
footer .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.45);border-top:1px solid rgba(255,255,255,.1)}

/* footer social */
.ft-social{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.ft-social-row{display:flex;gap:12px;align-items:center}
.ft-social-row .si{color:#fff;display:inline-flex;transition:color .2s,transform .2s}
.ft-social-row .si:hover{color:var(--giallo);transform:scale(1.15)}
.ft-social-row .sl{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.72)}

/* google reviews in footer */
.ft-reviews{margin-top:18px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:background .2s,border-color .2s}
.ft-reviews:hover{background:rgba(248,200,0,.1);border-color:rgba(248,200,0,.35)}
.ft-reviews .g-badge-icon{width:28px;height:28px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ft-reviews .g-badge-icon svg{width:16px;height:16px}
.ft-reviews .g-badge-text{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1.4}
.ft-reviews .g-badge-text b{display:block;font-size:13px;letter-spacing:0;color:var(--giallo);font-family:'Archivo',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase}
.ft-reviews .g-stars{display:flex;gap:2px;align-items:center}
.ft-reviews .g-stars svg{width:12px;height:12px}

/* ── WA FLOAT ── */
.wa{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -8px rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s}
.wa:hover{transform:scale(1.1);box-shadow:0 20px 40px -10px rgba(37,211,102,.5)}
.wa svg{width:30px;height:30px;fill:#fff}

/* ── LEGAL PAGES ── */
.lp{max-width:860px}
.lp h3{font-style:italic;font-weight:800;text-transform:uppercase;font-size:19px;margin:38px 0 12px;color:var(--ink)}
.lp p,.lp li{font-size:15px;color:#3c3f63;line-height:1.7}
.lp ul{margin:10px 0 10px 22px}
.lp .upd{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);margin-bottom:8px}
.lp a{color:var(--blu);text-decoration:underline}

@media(max-width:760px){
  footer .top{padding:42px var(--pad) 30px;gap:30px}
  footer .top>div{width:100%}
  footer .legal{flex-direction:column;gap:8px;padding:16px var(--pad)}
}
@media(max-width:560px){
  :root{--pad:20px}
  .fine .inner{gap:30px}
  .reviews-band .inner{gap:24px}
  .rating-num{font-size:28px}
}

/* ── FAQ ── */
.faq-list{max-width:880px;margin-top:44px}
.faq{border-bottom:1px solid rgba(20,22,63,.14)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;padding:22px 8px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(15px,2vw,19px);color:var(--ink);transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fn{font-family:'IBM Plex Mono',monospace;font-style:normal;font-weight:600;font-size:12px;letter-spacing:.18em;color:var(--blu);flex:0 0 auto}
.faq summary .fx{margin-left:auto;flex:0 0 auto;font-style:normal;font-weight:600;color:var(--giallo);font-size:22px;line-height:1;transform:translateY(2px);transition:transform .2s}
.faq[open] summary{color:var(--blu)}
.faq[open] summary .fx{transform:rotate(45deg) translateY(2px)}
.faq .fa{padding:0 8px 26px 8px;max-width:760px;color:#3a3d55;font-size:16px}
.faq .fa b{color:var(--ink)}
@media(min-width:700px){.faq .fa{padding-left:64px}}


/* LAVORA CON NOI - inizio */
.phero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 45%}
.btn-tab-off{background:transparent;color:var(--blu);box-shadow:inset 0 0 0 2px rgba(43,47,158,.32)}
.lcn-tabs{display:flex;gap:14px;flex-wrap:wrap}
.lcn-consenso{margin:22px 0 24px}
.lcn-band .txt h2{font-size:clamp(26px,3vw,38px);margin-bottom:10px}
.lcn-band .txt p{max-width:540px;color:rgba(255,255,255,.8)}
.lcn-band .arr{font-style:normal}
.lcn-consenso label{display:flex;gap:10px;align-items:flex-start}
.lcn-consenso input{flex:0 0 auto;margin-top:5px}
@media(max-width:560px){.lcn-tabs .btn{padding:16px 18px;font-size:14px}}
@media(max-width:640px){.lcn-tabs{display:grid;grid-template-columns:1fr}.lcn-tabs .btn{width:100%;justify-content:center}}
@media(max-width:700px){.phero .bgimg{object-position:88% 45%}}
.lcn-ok-grande{background:var(--cemento);border-left:6px solid var(--giallo);padding:30px 28px;font-size:16px;margin-top:40px}
.lcn-ok-grande b{display:block;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(22px,3vw,28px);line-height:1.1;margin-bottom:12px;color:var(--ink)}
/* LAVORA CON NOI - fine */


/* CORREZIONI COLLAUDO IPHONE - inizio */
/* footer img fissa solo l'altezza: dove l'immagine dichiara width="640" quel numero
   diventava la larghezza reale, stirando il logo a 640x34. Le altre pagine non lo
   notavano perche' il loro logo non dichiara le dimensioni. Con width:auto la
   larghezza torna a seguire le proporzioni, identica su tutte e nove le pagine. */
footer img{width:auto}
/* Un pulsante che ha anche la classe di comparsa .rv perdeva l'inclinazione:
   .rv{transform:translateY(32px)} e .rv.in{transform:none} vincono su
   .btn{transform:skewX(...)} perche' hanno una classe in piu'. Qui la si rimette. */
.btn.rv{transform:skewX(var(--skew)) translateY(32px)}
.btn.rv.in{transform:skewX(var(--skew))}
.btn.rv.in:hover{transform:skewX(var(--skew)) translateY(-3px)}
@media(prefers-reduced-motion:reduce){.btn.rv{transform:skewX(var(--skew))}}

/* Fascia dei numeri: su schermo stretto le quattro celle si impilavano una per riga,
   con il bordo divisorio verticale appeso a destra e altezze diverse fra loro.
   Qui diventano una griglia 2x2, con una sola linea divisoria fra le colonne. */
@media(max-width:700px){
  .hero .strip .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:20px}
  .hero .strip .cell{margin-right:0;padding:0}
  .hero .strip .cell:nth-child(odd){border-right:1px solid rgba(20,22,63,.18);padding-right:18px}
  .hero .strip .cell:nth-child(even){border-right:none}
}

/* Elenchi spezzati su due colonne: impilandosi su schermo stretto lasciavano un
   buco di 54px (28px di gap della griglia + 26px di margine dell'elenco), che
   sembrava una voce mancante. Il -28px annulla il gap e li ricuce in un elenco solo.
   Il :first-child limita la regola alle colonne che contengono SOLO l'elenco:
   dove la colonna comincia con un sottotitolo lo stacco e' voluto e resta. */
@media(max-width:860px){
  .grid2 > div + div > .checklist:first-child{margin-top:-28px}
}

/* Elenchi delle fasi (piscine): la voce era display:flex, quindi la parola in
   grassetto finiva in una colonna sua e il testo in un'altra, lasciando un vuoto
   sotto il grassetto e staccando i due punti dalla parola. Su schermo stretto la
   voce torna testo normale, con il quadratino giallo appeso a sinistra. */
@media(max-width:720px){
  .fase-row li{display:block;position:relative;padding-left:22px}
  .fase-row li::before{position:absolute;left:0;top:13px;width:10px;margin-top:0}
}
/* CORREZIONI COLLAUDO IPHONE - fine */