/* bandovera.it — direzione A (Notte radar) + D (Schermo dell'app). Valori da MOTION.md. */
@font-face{font-family:"Archivo";src:url("assets/font/archivo.woff2") format("woff2");font-weight:400 900;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("assets/font/plexmono-700.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --notte:#0B1730;--notte2:#0f2141;--giallo:#FFCF3A;--ciano:#22D8FF;--bianco:#FFFFFF;--carta:#EDE4D0;--rosso:#FF3B30;--verde:#1FB86B;--blu:#126CE6;
  --t:"Archivo",system-ui,sans-serif;--m:"Plex Mono",ui-monospace,monospace;
  --pad:24px;--col:640px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
html,body{overflow-x:clip}
h1,h2{hyphens:manual}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--t);font-weight:500;font-size:20px;line-height:1.4;color:var(--bianco);background:var(--notte);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
::selection{background:var(--giallo);color:var(--notte)}
:focus-visible{outline:4px solid var(--giallo);outline-offset:3px;border-radius:6px}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:900;font-stretch:125%;line-height:.94;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(54px,13.5vw,96px)}
h2{font-size:clamp(42px,10.5vw,68px)}
h3{font-size:clamp(26px,6.5vw,34px)}
p{max-width:34em}
.num{font-family:var(--m);font-weight:700;font-variant-numeric:tabular-nums}
.giallo{color:var(--giallo)}.ciano{color:var(--ciano)}
.sec{padding:72px var(--pad)}
.wrap{max-width:var(--col);margin:0 auto}
.sec h2{margin-bottom:22px}
.sec p+p{margin-top:16px}
.lead{font-size:23px;font-weight:600}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:68px;padding:0 28px;border-radius:16px;border:0;font:900 23px/1 var(--t);font-stretch:110%;text-decoration:none;color:var(--notte);background:var(--giallo);cursor:pointer;transition:transform .12s cubic-bezier(.2,.8,.2,1),background .12s;user-select:none;-webkit-user-select:none}
.btn:active{transform:scale(.97)}
.btn small{font-family:var(--m);font-weight:700;font-size:17px;opacity:.9}
.btn.ghost{background:transparent;color:var(--bianco);box-shadow:inset 0 0 0 3px var(--ciano)}
.btn.ghost:hover{background:rgba(34,216,255,.12)}
.btn.blocco{width:100%}
.azioni{display:flex;flex-direction:column;gap:14px;margin-top:28px;max-width:420px}

/* testata */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px var(--pad);background:rgba(11,23,48,.92);backdrop-filter:blur(8px)}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-stretch:125%;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.logo img{width:36px;height:36px}
.logo b{color:var(--ciano)}
.top .btn{min-height:46px;padding:0 14px;font-size:16px;white-space:nowrap}

/* hero */
.hero{position:relative;min-height:calc(100svh - 72px);padding:8px var(--pad) 48px;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.radar-box{position:relative;width:min(84vw,360px);aspect-ratio:1;margin:0 auto 6px;pointer-events:none}
.radar-cv{position:absolute;inset:0}
/* le schede compaiono quando la lama le trova (radar.js aggiunge .vista); senza JS restano visibili */
.profilo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:4px;z-index:2}
.profilo b{font:800 12px/1 var(--t);background:var(--notte2);color:var(--ciano);border:1.5px solid var(--ciano);border-radius:20px;padding:5px 8px;transition:background .15s,color .15s}
.profilo b.on{background:var(--ciano);color:var(--notte);animation:gomma .45s both}
.js .radar-box .scheda{opacity:0;transition:opacity .1s}
.js .radar-box .scheda.vista{opacity:1;animation:gomma .55s cubic-bezier(.3,0,.3,1) both}
/* «gomma»: la scheda salta fuori e si assesta a molla (Walter 29/10, eccezione a MOTION.md) */
@keyframes gomma{0%{transform:scale(.2)}35%{transform:scale(1.18,.82)}55%{transform:scale(.92,1.08)}75%{transform:scale(1.04,.97)}100%{transform:none}}
.scheda{position:absolute;white-space:nowrap;background:var(--bianco);color:var(--notte);border-radius:12px;padding:8px 11px;font-size:15px;font-weight:800;line-height:1.15;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.scheda .num{display:block;color:var(--rosso);font-size:19px;margin-top:2px}
.scheda .esempio{position:absolute;right:-6px;top:-10px}
.hero-testo{position:relative}
.hero h1{margin-bottom:18px}
.hero .lead{margin-bottom:8px;max-width:22em}
.hero .nota{font-size:18px;opacity:.85;margin-top:14px}
@media(min-width:900px){
  .hero{flex-direction:row;align-items:center;gap:40px;max-width:1120px;margin:0 auto;min-height:640px;padding-top:40px}
  .hero-testo{flex:1 1 520px;min-width:0}
  .hero h1{font-size:min(96px,7.4vw)}
  .radar-box{width:min(520px,42vw);flex:none;margin:0}
  .scheda{font-size:clamp(15px,1.4vw,18px)}
  .profilo b{font-size:14px;padding:6px 10px}
}

/* problema */
.problema{position:relative;overflow:hidden}
.problema h2 b{color:var(--giallo)}
.occhiello{margin:0 0 14px;color:#c9d6ea;font-size:19px;font-weight:700;border-left:4px solid var(--giallo);padding-left:12px}
@media(min-width:900px){.detto{text-indent:-.42em}}
.timbro{display:inline-block;margin:26px 0 28px;border:7px solid var(--rosso);color:var(--rosso);font:900 clamp(44px,11vw,64px)/1 var(--t);font-stretch:125%;padding:8px 18px;transform:rotate(-7deg);letter-spacing:.04em;will-change:transform}
.marasma{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 22px}
.marasma span{background:var(--notte2);color:#c9d6ea;font-weight:700;font-size:18px;padding:10px 14px;border-radius:10px}

/* tre cose */
.tre{list-style:none;display:grid;gap:16px;margin-top:30px}
.tre li{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;font-size:24px;font-weight:800;line-height:1.15}
.tre li small{display:block;font-size:18px;font-weight:500;opacity:.85;margin-top:3px}
.tre i{width:72px;height:72px;border-radius:50%;background:var(--ciano);display:grid;place-items:center}
.tre svg{width:38px;height:38px;stroke:var(--notte);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* schermo dell'app */
.schermo{background:var(--notte);padding-bottom:0}
.schermo .wrap{display:flex;flex-direction:column;gap:28px}
.telefono{margin:0 auto;width:min(100%,360px);background:#071324;border:10px solid #1b2a47;border-bottom:0;border-radius:40px 40px 0 0;padding:20px 14px 0;overflow:hidden;min-height:620px}
.app{font-size:16px;color:#c9d6ea}
.app .ente{background:var(--notte2);border-radius:14px;padding:12px 14px;font-weight:800;color:#fff;font-size:17px}
.app .ente small{display:block;font-weight:500;color:#9fb3d1;font-size:15px;margin-top:2px}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.kpi div{background:var(--notte2);border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.2}
.kpi .num{display:block;font-size:34px;color:var(--ciano);margin-top:4px}
.kpi .num.g{color:var(--giallo)}
.bando{background:var(--bianco);color:var(--notte);border-radius:14px;padding:14px;margin-top:10px;will-change:transform}
.bando h3{font-size:17px;line-height:1.2;font-weight:800}
.bando .meta{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.bando .meta span{font-size:15px;font-weight:700;padding:5px 9px;border-radius:7px;background:#eef3fb}
.bando .meta .sc{background:var(--rosso);color:#fff;font-family:var(--m);font-size:19px}
.bando .meta .ok::before{content:"✓ ";color:var(--verde);font-weight:900}
.bando .fonte{display:block;margin-top:10px;font-size:15px;color:var(--blu);font-weight:800;text-decoration:none}
.esempio{display:inline-block;font-family:var(--m);font-size:13px;background:var(--giallo);color:var(--notte);padding:2px 6px;border-radius:4px;vertical-align:middle;margin-left:4px}
@media(min-width:900px){
  .schermo .wrap{flex-direction:row;align-items:flex-start;max-width:1000px;gap:48px}
  .schermo .testo{flex:1;position:sticky;top:100px}
}

/* come funziona: bianco */
.come{background:var(--bianco);color:var(--notte)}
.come h2 b{color:var(--blu)}
.passi{display:grid;gap:22px;margin-top:30px}
.passo{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:start;font-size:23px;font-weight:800;line-height:1.15}
.passo .n{font-family:var(--m);font-size:40px;color:var(--ciano);background:var(--notte);border-radius:18px;height:76px;display:grid;place-items:center}
.passo small{display:block;font-weight:500;font-size:19px;color:#3b4a66;margin-top:4px}
.passo .num{color:var(--notte)}

/* per chi */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.chips span{border:3px solid var(--ciano);color:#fff;font-weight:800;font-size:20px;padding:10px 16px;border-radius:999px}
.italia{font-size:24px;font-weight:800}
.italia b{color:var(--giallo)}

/* presidente */
.presidente{background:var(--carta);color:var(--notte)}
.presidente blockquote{font-size:clamp(26px,6.5vw,34px);font-weight:800;line-height:1.15;letter-spacing:-.01em;max-width:20em}
.presidente blockquote::before{content:"«"}.presidente blockquote::after{content:"»"}
.presidente .chi{margin-top:18px;font-size:19px}
.firma{font-weight:900;font-stretch:125%;font-size:clamp(34px,8.5vw,48px);line-height:1;margin-top:30px;letter-spacing:-.02em}

/* chiaro */
.chiaro ul{list-style:none;display:grid;gap:14px;margin-top:26px}
.chiaro li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;font-size:22px;font-weight:700;line-height:1.2}
.chiaro li b{display:block;color:var(--giallo)}
.chiaro li small{display:block;font-size:18px;font-weight:500;opacity:.85;margin-top:3px}
.chiaro .x{width:44px;height:44px;border-radius:50%;background:var(--rosso);color:#fff;display:grid;place-items:center;font-weight:900;font-size:26px}
.chiaro .v{background:var(--verde)}

/* prezzo */
.prezzo{background:var(--giallo);color:var(--notte);text-align:left;overflow:hidden}
.prezzo .cifra{font-family:var(--m);font-size:clamp(68px,19vw,120px);line-height:1;letter-spacing:-.04em}
.prezzo .cifra sup{font-size:.4em;vertical-align:top;margin-left:6px}
.prezzo .anno{font-weight:900;font-stretch:125%;font-size:clamp(30px,8vw,44px);line-height:1;margin-top:6px}
.prezzo ul{list-style:none;margin:24px 0 10px;display:grid;gap:10px;font-size:21px;font-weight:700}
.prezzo li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center}
.prezzo li i{width:30px;height:30px;border-radius:50%;background:var(--notte);display:grid;place-items:center}
.prezzo li svg{width:18px;height:18px;stroke:var(--giallo);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.prezzo .btn{background:var(--notte);color:var(--giallo);margin-top:14px}
.prezzo .btn small{color:#fff}

/* faq */
.faq details{border-top:3px solid var(--notte2);padding:4px 0}
.faq details:last-child{border-bottom:3px solid var(--notte2)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 40px;align-items:center;gap:12px;font-size:22px;font-weight:800;line-height:1.2;padding:16px 0;min-height:64px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:16px;height:16px;border-right:4px solid var(--ciano);border-bottom:4px solid var(--ciano);transform:rotate(45deg);justify-self:center;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{padding:0 0 20px;font-size:20px;opacity:.95}

/* finale e piede */
.finale{text-align:left}
.finale .azioni{max-width:460px}
.piede{padding:40px var(--pad) 56px;font-size:17px;opacity:.9}
.piede .claim{font-weight:900;font-stretch:125%;font-size:26px;line-height:1.05;letter-spacing:-.02em;opacity:1;margin-bottom:18px}
.piede .claim b{color:var(--ciano)}
.piede p+p{margin-top:8px}
.piede a{color:var(--ciano)}

/* modulo /attiva */
.modulo{background:var(--bianco);color:var(--notte);min-height:100svh}
.modulo h1{font-size:clamp(54px,13.5vw,96px)}
.modulo .intro{font-size:21px;margin:14px 0 30px;color:#3b4a66}
fieldset{border:0;margin:0 0 34px}
legend{font-weight:900;font-stretch:120%;font-size:26px;line-height:1.1;margin-bottom:6px}
.aiuto{font-size:18px;color:#3b4a66;margin-bottom:14px}
label.campo{display:block;font-weight:800;font-size:20px;margin:16px 0 8px}
.campo .opz{font-weight:500;color:#3b4a66}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;font:600 21px/1.3 var(--t);color:var(--notte);background:#fff;border:3px solid #9fb3d1;border-radius:14px;padding:16px 16px;min-height:64px}
textarea{min-height:140px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--blu);box-shadow:0 0 0 4px rgba(18,108,230,.2)}
input:user-invalid,textarea:user-invalid{border-color:var(--rosso)}
.scelte{display:flex;flex-wrap:wrap;gap:10px}
.scelte label{position:relative;display:inline-flex;align-items:center;min-height:56px;padding:0 18px;border-radius:999px;border:3px solid #9fb3d1;font-weight:800;font-size:19px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .12s,border-color .12s,transform .12s}
.scelte label:active{transform:scale(.97)}
.scelte input{position:absolute;opacity:0;width:1px;height:1px}
.scelte input:checked+span{color:#fff}
.scelte label:has(input:checked){background:var(--notte);border-color:var(--notte);color:#fff}
.scelte label:has(input:focus-visible){outline:4px solid var(--giallo);outline-offset:2px}
.consenso{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;font-size:19px;line-height:1.3;margin:10px 0 26px}
.consenso input{width:30px;height:30px;accent-color:var(--blu);margin-top:2px}
.errore{display:none;background:#fff1f0;border:3px solid var(--rosso);color:#8a1a14;font-weight:700;border-radius:14px;padding:14px 16px;margin:16px 0;font-size:19px}
.errore.on{display:block}
.riepilogo{background:var(--notte);color:#fff;border-radius:22px;padding:28px 24px;margin-top:30px}
.riepilogo h2{font-size:clamp(34px,9vw,52px);margin-bottom:12px}
.riepilogo dl{display:grid;grid-template-columns:1fr;gap:10px;margin:18px 0 26px;font-size:19px}
.riepilogo dt{font-weight:800;color:var(--ciano);font-size:16px}
.riepilogo dd{margin:0 0 4px}
.riepilogo .btn{width:100%}
.riepilogo .nota{font-size:18px;opacity:.9;margin-top:16px}
.riepilogo .nota a{color:var(--giallo)}
@media(min-width:900px){.modulo .wrap{max-width:720px}}

/* pagina attiva: testata e piede scuri su fondo bianco */
.modulo .top{color:#fff}
.modulo h1 .ciano{color:var(--blu)}
.modulo .piede{background:var(--notte);color:#fff;margin-top:40px}
.modulo .riepilogo a{color:var(--giallo)}
.modulo .btn.blocco{margin-top:10px}

/* pagina privacy: testo lungo, titoli piccoli */
.legale .sec h2{font-size:30px;margin:40px 0 10px;max-width:none}
.legale .sec p+p{margin-top:12px}
.legale .sec ul{list-style:disc;padding-left:1.2em;margin:0 0 12px;max-width:34em}
.legale .sec li+li{margin-top:8px}
.legale .sec a{color:var(--blu)}

/* desktop: colonna larga e griglie a 2-3 colonne */
@media(min-width:900px){
  :root{--col:920px}
  .sec{padding:96px var(--pad)}
  .sec h2{font-size:64px;max-width:14em}
  .sec .lead{max-width:30em}
  .tre{grid-template-columns:repeat(3,1fr);gap:28px}
  .tre li{grid-template-columns:1fr;align-items:start;gap:14px}
  .passi{grid-template-columns:repeat(3,1fr);gap:32px}
  .passo{grid-template-columns:1fr;gap:14px}
  .chiaro ul{grid-template-columns:1fr 1fr;gap:28px 48px}
  .prezzo .wrap{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"h h" "c l" "a l" "b b";column-gap:64px;align-items:center}
  .prezzo h2{grid-area:h}.prezzo .cifra{grid-area:c}.prezzo .anno{grid-area:a;align-self:start}.prezzo ul{grid-area:l;margin:0}.prezzo .btn{grid-area:b;justify-self:start;margin-top:32px}
  .faq .wrap{max-width:780px}
  .presidente blockquote{max-width:24em}
  .finale .wrap{text-align:center}.finale .azioni{margin:0 auto}
  .piede .wrap{display:flex;justify-content:space-between;gap:40px;align-items:flex-start}.piede .claim{margin:0;flex:none}
}