:root{--bg:#071414;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.11);--text:#f3fbfb;--muted:#b8cccc;--teal:#14b8a6;--orange:#f59e0b;--max:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 8% 0%,rgba(20,184,166,.24),transparent 33%),linear-gradient(180deg,#061111 0%,#071414 44%,#040909 100%);line-height:1.55}
.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}.nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(18px);background:rgba(7,20,20,.78);border-bottom:1px solid var(--line)}.nav-inner{min-height:72px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:850;color:var(--text)}.nav-links{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--muted)}.nav-links a{color:var(--muted);text-decoration:none}.btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:0 20px;border-radius:999px;text-decoration:none;font-weight:780;white-space:nowrap}.btn-primary{background:var(--teal);color:#031111}.btn-secondary{background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--text)}.lang{border:1px solid var(--line);border-radius:999px;padding:7px 10px}
.hero{padding:88px 0 66px}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid rgba(20,184,166,.28);background:rgba(20,184,166,.14);color:#c8fff7;font-size:14px;font-weight:760;margin-bottom:22px}h1{font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.065em;margin:0 0 24px}.hero-subtitle{font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:700px;margin:0 0 32px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px}.microcopy{color:#7f9999;font-size:14px}
section{padding:72px 0;border-top:1px solid rgba(255,255,255,.06)}.section-head{max-width:780px;margin-bottom:34px}h2{font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.045em;margin:0 0 16px}.section-head p,.card p,.cta-band p,details p{color:var(--muted)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card{background:linear-gradient(180deg,var(--card),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:26px;padding:26px}.icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(20,184,166,.14);color:var(--teal);margin-bottom:16px;font-size:21px}.card h3{margin:0 0 8px;font-size:21px}.check-row{display:flex;gap:16px;align-items:flex-start}.check{width:26px;height:26px;min-width:26px;margin-top:2px;border-radius:999px;display:grid;place-items:center;background:var(--teal);color:#031111;font-size:14px;font-weight:900}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}.panel{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:30px;padding:30px}.list{display:grid;gap:16px;margin:0;padding:0;list-style:none}.list li{display:flex;gap:12px;color:var(--muted)}.list strong{color:var(--text)}.warning{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.08)}.faq{display:grid;gap:14px}details{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:18px;padding:18px 20px}summary{cursor:pointer;font-weight:820}.cta-band{text-align:center;padding:70px 28px;border-radius:36px;background:radial-gradient(circle at 30% 0%,rgba(20,184,166,.26),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid var(--line)}footer{padding:40px 0;color:#7f9999;font-size:14px;border-top:1px solid var(--line)}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand:visited{color:var(--text)}.nav-links a:visited{color:var(--muted)}.btn-primary:visited{color:#031111}.btn-secondary:visited{color:var(--text)}footer a{color:var(--muted);text-decoration:none}footer a:visited{color:var(--muted)}footer a:hover{color:var(--text)}
.brand-logo{width:38px;height:38px;border-radius:13px;object-fit:cover;display:block}
.nav-links a:hover{color:var(--text)}
/* ---- Nav: gruppo «Funzionalità» (E3-B) -------------------------------------------------------
   Un <details>: apertura nativa con mouse, tastiera e touch, anche senza JavaScript (site.js aggiunge
   solo Esc e clic fuori). Su desktop il pannello è un menu sospeso; sotto i 900 px si espande dentro il
   pannello del menu mobile. Azzera lo stile generico di details (FAQ). */
.nav-group{position:relative;background:none;border:0;border-radius:0;padding:0}
.nav-group>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--muted);font-weight:inherit;border-radius:8px}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-group[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.nav-group>summary:hover,.nav-group[open]>summary{color:var(--text)}
.nav-group>summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.nav-group-list{position:absolute;top:calc(100% + 10px);left:-14px;z-index:20;min-width:240px;margin:0;padding:8px;list-style:none;background:rgba(7,20,20,.97);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 50px rgba(0,0,0,.45)}
.nav-links .nav-group-list a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:10px;color:var(--muted)}
.nav-links .nav-group-list a:hover,.nav-links .nav-group-list a:focus-visible{background:rgba(255,255,255,.06);color:var(--text)}
.nav-external{font-size:.85em;opacity:.75}
/* Target delle voci testuali della nav su desktop (E3-B/05): prima 22 px di altezza cliccabile (38 px il
   selettore di lingua), ora 44 px. Sotto i 900 px vale la regola del menu mobile (display:block, 44 px). */
.nav-links>a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
/* La CTA della nav è un .btn-primary dentro .nav-links: senza questa regola prendeva il grigio dei link
   della nav (.nav-links a pesa più di .btn-primary), con un contrasto insufficiente sul teal. */
.nav-links a.btn-primary,.nav-links a.btn-primary:visited{color:#031111}
@media(prefers-reduced-motion:reduce){.nav-group>summary::after{transition:none}}
.nav-hamburger{display:none;background:transparent;border:none;padding:8px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;border-radius:8px;min-width:40px;min-height:40px}
.nav-hamburger:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.nav-hamburger-bar{display:block;width:22px;height:2px;background:var(--text);border-radius:1px;transition:transform .22s,opacity .22s}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---- Home: immagini e sezioni con immagine ------------------------------------------------
   Le immagini sono slot (Gui/Services/HomeShots.cs): compaiono solo se il file esiste. Sono scene 16:9;
   width/height nel markup danno le proporzioni prima del caricamento (niente spostamenti) e l'immagine
   non viene mai ritagliata: height:auto, nessun object-fit. Senza file la sezione resta a una colonna. */
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.45);background:#030808}
/* «Quando ti serve davvero»: card 2x2 a sinistra, Madrid a destra. L'altezza la decide la griglia delle
   card; l'immagine la riempie (object-fit:cover, inquadratura centrata sul telefono), cosi' le due colonne
   finiscono insieme. Sotto i 1100 px le card si stringerebbero troppo: tutto torna in verticale e
   l'immagine riprende le sue proporzioni 16:9, senza ritaglio. */
.usecase-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:18px;align-items:stretch}
.usecase-media{display:flex;flex-direction:column;gap:14px}
.usecase-media .shot{position:relative;flex:1;min-height:280px}
.usecase-media .shot img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:36% 50%}
.usecase-note{margin:0;color:var(--muted);font-size:15px}.usecase-note strong{color:var(--text)}
@media(max-width:1100px){.usecase-layout{grid-template-columns:1fr;gap:28px}.usecase-media{max-width:760px}.usecase-media .shot{flex:none;min-height:0}.usecase-media .shot img{position:static;height:auto}}
.feature-split{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
/* Alternanza su desktop: l'immagine passa a sinistra. Su mobile l'ordine resta quello del markup. */
@media(min-width:901px){.feature-split-reverse{grid-template-columns:1.1fr 1fr}.feature-split-reverse>.shot{order:-1}}
.feature-split .section-head{margin-bottom:26px}
/* GeoFix Safety (#safety): testo in due colonne su desktop (titolo e riga a sinistra, categorie e CTA a
   destra), una colonna sotto i 900 px. Da E3-B/07 i tre screenshot reali stanno nella prova di prodotto
   della Home (#proof, home.css). */
.safety-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end}
.safety-intro .section-head{margin-bottom:0}
@media(max-width:900px){.safety-intro{grid-template-columns:1fr;gap:24px}}
.section-note{margin:24px 0 0;color:var(--muted);font-size:14px}
.section-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.tool-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px}
.tool-card .icon{font-size:24px;margin-bottom:10px}.tool-card h2{margin:0 0 8px}.tool-card p{margin:0;max-width:520px}.tool-card .btn{flex-shrink:0}
@media(max-width:900px){.hero-grid,.split,.grid-2,.grid-3,.feature-split{grid-template-columns:1fr}.feature-split{gap:28px}.nav-hamburger{display:flex}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;max-height:calc(100vh - 73px);overflow-y:auto;padding:12px 20px 20px;gap:0;background:#071414;backdrop-filter:blur(18px);border-bottom:1px solid var(--line);z-index:99}.nav-links.nav-open{display:flex}.nav-links a:not(.btn){padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;display:block;min-height:44px;border-radius:0;border-left:none;border-right:none;border-top:none}.nav-links .lang{border:none;border-bottom:1px solid rgba(255,255,255,.06);padding:14px 4px;border-radius:0}.nav-links .btn{margin-top:12px;width:100%;justify-content:center;border-radius:999px}}@media(max-width:560px){.container{width:min(100% - 28px,var(--max))}.btn{width:100%}.hero-actions{align-items:stretch}.card,.panel{padding:22px}section{padding:54px 0}}
@media(max-width:900px){.nav-group{border-bottom:1px solid rgba(255,255,255,.06)}.nav-group>summary{justify-content:space-between;padding:14px 4px;font-size:15px}.nav-group-list{position:static;min-width:0;padding:0 0 10px 10px;background:none;border:0;border-radius:0;box-shadow:none}.nav-links .nav-group-list a{padding:12px 6px;border-bottom:0;font-size:15px}}
.cta-mid{text-align:center}.privacy-data{border-color:rgba(20,184,166,.22);background:rgba(20,184,166,.07)}
/* Informativa AI Act art. 50 nel footer condiviso: discreta ma leggibile (--muted su --bg supera abbondantemente il 4.5:1 richiesto), senza bordo proprio per non raddoppiare quello del footer, e fluida su mobile grazie a .container. */
.ai-notice{padding:0 0 34px;color:var(--muted);font-size:13px;line-height:1.65}.ai-notice p{margin:0;max-width:900px}.ai-notice a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}.ai-notice a:hover,.ai-notice a:focus-visible{color:var(--text)}@media(max-width:640px){.ai-notice{padding-bottom:28px;font-size:12.5px}}
/* Focus da tastiera dei pulsanti: l'outline predefinito del browser è quasi nero e sul tema
   scuro del sito risulta poco distinguibile. Stesso trattamento già usato per .nav-hamburger. */
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---- Campi e form condivisi ------------------------------------------------------------------
   Classi nate con T-06 per sostituire gli stili inline ripetuti nelle pagine dell'area riservata.
   Quelle pagine sono state ritirate dallo STEP 5G, ma il blocco NON e' morto: l'editor delle
   fotografie (_ExperiencePhotoEditor) usa form-field, form-label, form-row, form-row-flat,
   form-alert e form-actions, ed e' incluso dal backoffice. Lo STEP 5H ha tolto le cinque rimaste
   senza alcun consumatore: form-narrow, -sm, -xs, form-stack e form-error. Il bordo dei campi usa
   --line come il resto del sito, al posto del vecchio #1f3a3a hardcoded; font:inherit evita che
   gli input adottino il font di sistema del browser. */
.form-row{margin:14px 0 0}
.form-row-flat{margin:0}
.form-label{display:block;margin-bottom:6px}
.form-field{width:100%;min-height:44px;padding:10px;border-radius:6px;border:1px solid var(--line);background:transparent;color:inherit;font:inherit}
.form-field:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.form-alert{color:#f59e0b;margin:0 0 16px}
.form-actions{margin:18px 0 0}
.form-note{margin-top:16px}
.form-note-sm{margin-top:8px}
.form-note-lg{margin-top:20px}
.access-code{font-size:20px;letter-spacing:1px}
/* Honeypot: fuori dallo schermo e fuori dal focus, non `display:none` — deve restare compilabile
   dai bot per svolgere la sua funzione. */
.offscreen{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.form-alert-text{margin:0}
.form-note-block{margin:12px 0}
.form-row-loose{margin:16px 0 0}

/* ---- Assistenza pubblica su WhatsApp -------------------------------------------------------
   Canale pubblico del supporto. Numero, URL e messaggio precompilato vivono in
   Site:SupportWhatsApp, non qui: queste classi si occupano solo della resa.
   Le email transazionali (registrazione, verifica, codice, recupero, moderazione) continuano a
   partire via SMTP e non dipendono da nulla di questo blocco. */
a.support-whatsapp,a.support-whatsapp:visited{color:var(--teal);font-weight:820;text-decoration:none}
a.support-whatsapp:hover{text-decoration:underline}
a.support-whatsapp:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.wa-head{display:flex;gap:12px;align-items:center}
.wa-icon{width:26px;height:26px;min-width:26px;color:var(--teal);display:block}
.wa-lead{margin:0 0 18px}
.wa-actions{margin:0 0 18px}
.wa-number{margin:0 0 22px;font-size:18px}
.wa-number strong{color:var(--text);font-weight:820}
.wa-hint{color:var(--muted);margin:0 0 12px}
.wa-note{color:var(--muted);margin:18px 0 0}
.wa-note-sm{color:var(--muted);margin:12px 0 0;font-size:13px}
.wa-note-link,.wa-note-link:visited{color:var(--muted)}

/* Nome dell'autore nel footer: stesso trattamento degli altri link del footer, con in più un
   focus da tastiera visibile sul tema scuro (l'outline predefinito del browser è quasi nero).
   La regola è mirata a questo link e non tocca gli altri. */
.footer-owner,.footer-owner:visited{color:var(--muted);text-decoration:none}
.footer-owner:hover{color:var(--text)}
.footer-owner:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px;color:var(--text)}

/* ------------------------------------------------------------------ link testuali condivisi

   Regola proprietaria dello stile di <a> su tutte le pagine GeoFix, IT ed EN: ogni pagina con
   _GeoFixLayout carica questo foglio.

   Prima non esisteva alcuna regola generica su `a`: c'erano solo quelle mirate ai componenti
   (.brand, .nav-links a, .btn, footer a, .ai-notice a, .support-whatsapp, .footer-owner). Un
   link testuale senza classe — allora erano le microcopy dell'area riservata, ritirata dallo
   STEP 5G, oggi quelli nei testi delle pagine — cadeva quindi sui colori predefiniti del
   browser: azzurro da nuovo e soprattutto viola #551A8B una volta visitato. Fuori tema e, sul
   fondo scuro, poco leggibile.

   :visited è dichiarato esplicitamente, con lo stesso colore di :link. È l'unico modo di
   impedire il viola: senza una dichiarazione propria il browser riapplica il suo, e il difetto
   ricompare appena il visitatore ha aperto una volta la pagina di destinazione.

   Perché :where(). Azzera la specificità: queste regole pesano quanto il solo selettore di
   tipo `a`, così qualunque regola con una classe le scavalca senza !important e senza dover
   ripetere :visited componente per componente. Anche hover e focus stanno dentro :where(), e non
   è pignoleria: `a:visited:hover` vale 0-1-1 e batterebbe `.btn-primary` (0-1-0), facendo cambiare
   colore ai pulsanti al passaggio del mouse. Con :where() vincono sempre i componenti.

   La sottolineatura resta: in mezzo a un paragrafo è il segnale che distingue il link dal testo,
   e il colore da solo non basta a chi non percepisce il contrasto cromatico. Hover e focus
   passano all'accento GeoFix già in uso (--teal su --bg supera il 4.5:1), e il focus da tastiera
   aggiunge l'outline, perché il solo cambio di colore non è un indicatore di focus sufficiente. */
a:where(:link,:visited){color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:where(:link,:visited):where(:hover,:focus-visible){color:var(--teal);text-decoration-color:currentColor}
a:where(:link,:visited):where(:focus-visible){outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}

/* Contatto WhatsApp flottante del layout pubblico (_GeoFixWhatsAppButton). Un link e basta:
   nessuna risorsa esterna. In basso a destra, ma alzato di quanto basta a lasciare libero
   l'angolo al pulsante delle preferenze cookie di Iubenda, che per impostazione predefinita sta
   proprio lì; sotto al menu mobile (z-index 99) e sotto al banner di consenso. */
.wa-float{
    position:fixed;z-index:50;
    right:max(16px,env(safe-area-inset-right));bottom:calc(88px + env(safe-area-inset-bottom));
    display:flex;align-items:center;justify-content:center;
    width:56px;height:56px;border-radius:50%;
    background:var(--teal);color:var(--bg);border:1px solid rgba(255,255,255,.18);
    box-shadow:0 6px 18px rgba(0,0,0,.35);text-decoration:none;
    transition:transform .15s ease,filter .15s ease;
}
.wa-float:visited{color:var(--bg)}
.wa-float:hover{transform:translateY(-2px);filter:brightness(1.08)}
.wa-float:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.wa-float svg{width:30px;height:30px;display:block}
/* A fine pagina l'ultimo testo deve restare sopra il pulsante, non sotto. */
.ai-notice{padding-bottom:160px}
@media(max-width:560px){
    .wa-float{width:52px;height:52px;right:max(12px,env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom))}
    .wa-float svg{width:28px;height:28px}
    .ai-notice{padding-bottom:148px}
}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}
@media print{.wa-float{display:none}}