/* ClimaGest — sito di presentazione. Tema scuro come l'app, vetrina a schede
   stile App Store con iPhone disegnato in CSS (le schermate sono vere, 1170x2532). */
:root{--fondo:#05060c;--fondo2:#0b0d1a;--carta:#10131f;--bordo:rgba(255,255,255,.08);--testo:#eef2f7;--tenue:#9aa6bd;--azzurro:#38bdf8;--azzurro2:#0ea5e9;--viola:#a78bfa;--verde:#34d399;--r:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--testo);font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}
a{color:var(--azzurro)}
img{max-width:100%}
.contenitore{max-width:1180px;margin:0 auto;padding:0 18px}
.marchio{font-family:'Dancing Script',cursive;font-weight:700;color:#fff;text-decoration:none;font-size:30px;line-height:1;display:inline-flex;align-items:center;gap:10px}
.marchio img{width:34px;height:34px}
.marchio b{color:var(--azzurro);font-weight:700}

/* testata */
.testata{position:sticky;top:0;z-index:50;background:rgba(5,6,12,.72);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--bordo)}
.testata .contenitore{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.menu{display:none;gap:26px;font-size:14px;font-weight:500}
.menu a{color:var(--tenue);text-decoration:none}.menu a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:12px 18px;border-radius:14px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;font-family:inherit}
.btn-pieno{background:linear-gradient(135deg,var(--azzurro),var(--azzurro2));color:#fff;box-shadow:0 8px 24px rgba(14,165,233,.35)}
.btn-pieno:hover{filter:brightness(1.08)}
.btn-vetro{background:rgba(255,255,255,.07);color:#fff;border:1px solid var(--bordo)}
.btn-piccolo{padding:9px 14px;font-size:14px;border-radius:12px}

/* apertura */
.apertura{position:relative;padding:56px 0 30px;overflow:hidden}
.apertura::before{content:'';position:absolute;inset:-30% -20% auto;height:90%;background:radial-gradient(ellipse at 30% 40%,rgba(59,79,216,.38),transparent 60%),radial-gradient(ellipse at 75% 30%,rgba(167,139,250,.22),transparent 55%);filter:blur(20px);pointer-events:none}
.apertura .contenitore{position:relative;display:grid;gap:40px;align-items:center}
.etichetta{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--azzurro);background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);padding:6px 12px;border-radius:99px}
h1{font-size:40px;line-height:1.08;letter-spacing:-.02em;font-weight:800;margin:16px 0 14px}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--azzurro),var(--viola));-webkit-background-clip:text;background-clip:text;color:transparent}
.sotto{color:var(--tenue);font-size:18px;max-width:560px;margin:0}
.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.garanzie{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;color:var(--tenue);font-size:14px}
.garanzie span{display:inline-flex;align-items:center;gap:6px}
.garanzie svg{color:var(--verde)}
.palco{display:flex;justify-content:center;perspective:1600px;padding:10px 0 20px}

/* iPhone in CSS: cornice titanio, schermo con isola e barra di stato */
.telefono{--w:250px;position:relative;display:inline-block;padding:calc(var(--w)*.038);border-radius:calc(var(--w)*.2);background:#0a0a0c;box-shadow:0 0 0 calc(var(--w)*.012) #b9bcc3,0 0 0 calc(var(--w)*.018) #5b5e66,0 0 0 calc(var(--w)*.022) #2a2b30,0 50px 90px rgba(0,0,0,.6),0 0 120px rgba(56,189,248,.12)}
.telefono::before,.telefono::after{content:'';position:absolute;width:calc(var(--w)*.016);border-radius:4px;background:linear-gradient(90deg,#7c7f88,#c9ccd2)}
.telefono::before{left:calc(var(--w)*-.034);top:22%;height:13%;box-shadow:0 calc(var(--w)*.2) 0 #9ea1a9}
.telefono::after{right:calc(var(--w)*-.034);top:28%;height:19%}
.schermo{position:relative;width:var(--w);aspect-ratio:1170/2532;border-radius:calc(var(--w)*.165);overflow:hidden;background:#000;container-type:inline-size}
.schermo img{display:block;width:100%;height:100%;object-fit:cover}
.schermo::before{content:'';position:absolute;z-index:3;top:2.2%;left:50%;transform:translateX(-50%);width:31%;height:4.3%;background:#000;border-radius:99px}
.schermo::after{content:'';position:absolute;inset:0;z-index:4;background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 32%);pointer-events:none}
.stato{position:absolute;z-index:2;top:2.6%;left:9%;right:8%;display:flex;justify-content:space-between;align-items:center;color:#fff;font:600 5.4cqw/1 -apple-system,Inter,sans-serif;letter-spacing:-.01em}
.stato i{display:inline-flex;gap:1.6cqw;align-items:center;font-style:normal}
.stato svg{height:3.6cqw;width:auto}
.home{position:absolute;z-index:2;bottom:1.1%;left:50%;transform:translateX(-50%);width:36%;height:.55%;background:rgba(255,255,255,.85);border-radius:99px}
.inclina{transform:rotateY(-24deg) rotateX(9deg) rotateZ(4deg);transform-style:preserve-3d;transition:transform .6s ease}
.inclina-destra{transform:rotateY(22deg) rotateX(8deg) rotateZ(-4deg)}
.palco:hover .inclina{transform:rotateY(-14deg) rotateX(6deg) rotateZ(2deg)}

/* vetrina a schede (come l'anteprima dell'App Store) */
.vetrina-sezione{padding:30px 0 10px}
.titoletto{font-size:30px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px}
.sottotitoletto{color:var(--tenue);margin:0 0 22px}
.vetrina{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 18px 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vetrina::-webkit-scrollbar{display:none}
.scheda{flex:0 0 84%;max-width:380px;height:600px;scroll-snap-align:center;position:relative;border-radius:32px;overflow:hidden;padding:30px 26px 0;background:radial-gradient(120% 70% at 50% 100%,rgba(59,79,216,.35),transparent 60%),linear-gradient(180deg,#1a1d27,#0c0e15);border:1px solid var(--bordo)}
.scheda:nth-child(2){background:radial-gradient(120% 70% at 50% 100%,rgba(52,211,153,.25),transparent 60%),linear-gradient(180deg,#1a1d27,#0c0e15)}
.scheda:nth-child(3){background:radial-gradient(120% 70% at 50% 100%,rgba(167,139,250,.3),transparent 60%),linear-gradient(180deg,#1a1d27,#0c0e15)}
.scheda:nth-child(4){background:radial-gradient(120% 70% at 50% 100%,rgba(56,189,248,.3),transparent 60%),linear-gradient(180deg,#1a1d27,#0c0e15)}
.scheda:nth-child(5){background:radial-gradient(120% 70% at 50% 100%,rgba(245,158,11,.22),transparent 60%),linear-gradient(180deg,#1a1d27,#0c0e15)}
.scheda h3{font-size:27px;line-height:1.12;font-weight:500;letter-spacing:-.01em;margin:0;color:#f4f4f5}
.scheda h3 b{font-weight:700;color:#fff}
.scheda p{color:var(--tenue);font-size:14px;margin:10px 0 0}
.scheda .palco{position:absolute;left:0;right:0;bottom:-175px;padding:0}
.scheda .telefono{--w:230px}
.frecce{display:none;gap:10px;justify-content:flex-end;margin-top:-6px}
.freccia{width:44px;height:44px;border-radius:50%;border:1px solid var(--bordo);background:rgba(255,255,255,.06);color:#fff;font-size:20px;cursor:pointer}

/* sezioni */
.sezione{padding:64px 0}
.sezione h2{font-size:32px;line-height:1.15;letter-spacing:-.01em;font-weight:800;text-align:center;margin:0 0 10px}
.sezione .intro{text-align:center;color:var(--tenue);max-width:640px;margin:0 auto 34px}
.griglia{display:grid;gap:14px}
.box{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--r);padding:22px}
.box h3{margin:12px 0 6px;font-size:18px}
.box p{margin:0;color:var(--tenue);font-size:15px}
.icona{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(56,189,248,.12);color:var(--azzurro)}
.icona svg{width:24px;height:24px}
.prossimamente{text-align:center;color:var(--tenue);font-size:14px;margin-top:22px}
.prossimamente b{color:var(--viola)}

/* prezzi */
.pacchetto{position:relative;display:flex;flex-direction:column;background:var(--carta);border:1px solid var(--bordo);border-radius:26px;padding:26px}
.pacchetto.consigliato{border-color:rgba(56,189,248,.6);box-shadow:0 0 0 1px rgba(56,189,248,.3),0 20px 50px rgba(14,165,233,.18)}
.bollino{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--azzurro),var(--viola));color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px;white-space:nowrap}
.pacchetto h3{margin:0;font-size:21px}
.prezzo{font-size:44px;font-weight:800;letter-spacing:-.02em;margin:8px 0 0}
.prezzo small{font-size:16px;color:var(--tenue);font-weight:600}
.per-chi{color:var(--tenue);font-size:14px;margin:2px 0 16px}
.voci{list-style:none;padding:0;margin:0 0 18px;flex:1}
.voci li{display:flex;gap:10px;padding:6px 0;font-size:15px}
.voci li::before{content:'';flex:0 0 18px;height:18px;margin-top:3px;border-radius:50%;background:rgba(52,211,153,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.attivazione{font-size:13px;color:var(--tenue);margin-bottom:14px}
.nota-prezzi{text-align:center;color:var(--tenue);font-size:14px;margin-top:20px}

/* modulo */
.prova{background:linear-gradient(160deg,#0d1030,#0a0e3a 50%,#120d2e);border:1px solid rgba(56,189,248,.2);border-radius:30px;padding:30px 20px;max-width:760px;margin:0 auto}
.modulo{display:grid;gap:14px;margin-top:8px}
.modulo label{display:block;font-size:13px;font-weight:600;color:#c7d2fe;margin-bottom:6px}
.modulo input,.modulo select,.modulo textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:16px}
.modulo select option{color:#111}
.modulo input:focus,.modulo select:focus,.modulo textarea:focus{outline:2px solid rgba(56,189,248,.6);outline-offset:1px}
.coppia{display:grid;gap:14px}
.consenso{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#c7d2fe}
.consenso input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--azzurro2)}
.esito{display:none;padding:14px;border-radius:12px;font-weight:600}
.esito.ok{display:block;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:#a7f3d0}
.esito.errore{display:block;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fecaca}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* domande */
.domande details{background:var(--carta);border:1px solid var(--bordo);border-radius:16px;padding:16px 18px;margin-bottom:10px}
.domande summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:'+';color:var(--azzurro);font-size:20px;line-height:1}
.domande details[open] summary::after{content:'–'}
.domande p{color:var(--tenue);margin:10px 0 0}
.fascia{background:linear-gradient(135deg,rgba(56,189,248,.12),rgba(167,139,250,.12));border:1px solid var(--bordo);border-radius:20px;padding:18px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

/* piè di pagina */
.piede{border-top:1px solid var(--bordo);padding:34px 0 40px;color:var(--tenue);font-size:14px}
.piede .contenitore{display:grid;gap:18px}
.piede a{color:var(--tenue)}

/* banner consenso */
.consenso-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:100;background:#141827;border:1px solid var(--bordo);border-radius:18px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);font-size:14px;color:#cbd5e1;display:none}
.consenso-banner.si{display:block}
.consenso-banner .azioni{margin-top:12px}

/* calcolatore */
.calcolatore{background:var(--carta);border:1px solid var(--bordo);border-radius:26px;padding:24px;max-width:760px;margin:0 auto}
.risultato{display:grid;gap:12px;margin-top:20px}
.numero{background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25);border-radius:18px;padding:16px}
.numero span{display:block;color:var(--tenue);font-size:13px}
.numero b{font-size:30px;letter-spacing:-.01em}
.avviso{font-size:13px;color:var(--tenue);border-left:3px solid var(--viola);padding-left:12px;margin-top:16px}
.testo-lungo{max-width:760px;margin:0 auto;color:#cbd5e1}
.testo-lungo h2{text-align:left;font-size:24px;margin-top:34px}
.testo-lungo table{width:100%;border-collapse:collapse;font-size:15px}
.testo-lungo td,.testo-lungo th{border-bottom:1px solid var(--bordo);padding:8px 6px;text-align:left}

@media(min-width:700px){
  .coppia{grid-template-columns:1fr 1fr}
  .griglia.tre{grid-template-columns:repeat(3,1fr)}
  .griglia.due{grid-template-columns:repeat(2,1fr)}
  .prova{padding:40px}
  .scheda{flex-basis:360px}
  .frecce{display:flex}
}
@media(min-width:960px){
  .menu{display:flex}
  .apertura{padding:80px 0 40px}
  .apertura .contenitore{grid-template-columns:1.15fr .85fr}
  h1{font-size:58px}
  .telefono.grande{--w:300px}
  .griglia.funzioni{grid-template-columns:repeat(3,1fr)}
  .piede .contenitore{grid-template-columns:2fr 1fr 1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.inclina{transition:none}}