/* NGN Group – sito su fondo scuro. Colori presi dal marchio (logo e schema servizi). */

@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2")}

:root{
  color-scheme:dark;
  /* marchio */
  --blu:#004878;        /* blu scuro del logo */
  --azzurro:#3878b8;    /* blu medio */
  --verde:#88c038;      /* verde mela */
  /* derivati */
  --abisso:#03182a;     /* fondo della pagina */
  --notte:#062a45;      /* fasce e riquadri */
  --notte-2:#0b3656;
  --superficie:#082f4d; /* schede e moduli */
  --cielo:#7fb0e0;
  --verde-testo:#9fd45a;
  --link:#9ccaf5;
  --carta:#062a45;
  --bianco:#ffffff;
  --titolo:#ffffff;
  --inchiostro:#d6e3ee;
  --grigio:#9fb6ca;
  --linea:#1d4466;
  --su-scuro:#c9d8e5;

  --display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --testo:"Barlow","Segoe UI",Arial,sans-serif;
  --gutter:clamp(16px,4vw,32px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--abisso);color:var(--inchiostro);font:400 1.0625rem/1.6 var(--testo);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.005em;margin:0;text-wrap:balance;color:var(--titolo)}
p{margin:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.etichetta{font:500 .8rem/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}
section[id]{scroll-margin-top:84px}

/* header */
.testata{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(3,24,42,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.testata .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.marchio svg{width:64px;height:auto;display:block}
.marchio-nome{font:500 1.55rem/1 var(--display);letter-spacing:.06em;color:var(--titolo)}
.marchio-nome span{color:var(--verde);font-weight:500}
.menu{display:flex;align-items:center;gap:28px}
.menu a{color:var(--inchiostro);text-decoration:none;font-weight:500;font-size:.98rem;white-space:nowrap}
.menu a:hover{color:var(--link)}
.menu .tel{color:var(--grigio);font-variant-numeric:tabular-nums}
.pulsante{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 20px;border-radius:4px;background:var(--azzurro);color:var(--bianco);font:600 1rem/1 var(--testo);text-decoration:none;border:1px solid var(--azzurro);cursor:pointer;transition:background .15s}
.pulsante:hover{background:#4a8bcb}
.menu .pulsante{color:var(--bianco)}
.pulsante.secondario{background:transparent;color:var(--bianco);border-color:var(--cielo)}
.pulsante.secondario:hover{background:rgba(127,176,224,.12)}
.apri-menu{display:none;background:none;border:1px solid var(--linea);border-radius:4px;padding:8px 14px;font:500 .95rem var(--testo);color:var(--bianco)}

/* apertura */
.apertura{background:radial-gradient(720px 440px at 78% 35%,rgba(56,120,184,.26),transparent 70%),var(--abisso)}
.apertura>.wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:32px;align-items:center;padding-block:64px 48px;max-width:1280px}
.apertura h1{font-size:clamp(2.5rem,5.2vw,4.3rem);margin-block:18px 22px}
.apertura h1 em{font-style:normal;color:var(--cielo)}
.apertura p.intro{font-size:1.2rem;color:var(--grigio);max-width:34em}
.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.rete{width:100%;height:auto;display:block;overflow:visible}
/* gli occhi stanno sotto, molto trasparenti: in primo piano restano otto, segnale e scritte */
.rete .occhi{opacity:.3}
.rete .anello{fill:none;stroke:var(--cielo);stroke-opacity:.55;stroke-width:3;stroke-linejoin:round}
.rete .percorso{fill:none;stroke:var(--bianco);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
/* il segnale percorre tutto l'otto dei due anelli (lunghezza del percorso: 1837) */
.rete .scia{fill:none;stroke:var(--verde);stroke-width:6;stroke-linecap:round;stroke-opacity:.35;stroke-dasharray:150 1687;animation:scia 9s linear infinite}
.rete .segnale{fill:none;stroke:#b8ec70;stroke-width:10;filter:drop-shadow(0 0 6px rgba(136,192,56,.9));stroke-linecap:round;stroke-dasharray:40 1797;stroke-dashoffset:-110;animation:segnale 9s linear infinite}
.rete .nodo{fill:var(--abisso);stroke:var(--cielo);stroke-width:3;animation:acceso 9s linear infinite}
.rete .nodo.forte{stroke:var(--bianco);stroke-width:4.5}
.rete .nodo.centro{fill:var(--verde);stroke:var(--bianco);stroke-width:5;animation:none}
/* al centro dell'otto: l'IA, che unisce sicurezza e infrastruttura */
.rete .nodo.centro.ia{fill:var(--abisso);stroke:var(--verde);stroke-width:2.5}
.rete .ia-centro{font:500 17px var(--display);fill:var(--verde);letter-spacing:.14em;pointer-events:none}
.rete .nodo-ia{cursor:pointer}
.rete .nodo-ia:hover .centro,.rete .nodo-ia:focus-visible .centro{fill:rgba(136,192,56,.18)}
.rete .nodo-ia:focus-visible{outline:none}
.rete .nodo-ia:focus-visible .centro{stroke-width:4}
.rete .alone{fill:none;stroke:var(--verde);stroke-width:1.5;animation:alone 3s ease-out infinite}
@keyframes alone{0%{r:22px;stroke-opacity:.5}100%{r:38px;stroke-opacity:0}}
.rete .voce{font:500 17px var(--testo);fill:#b9cddd}
.rete .area{font:600 25px var(--display);fill:var(--bianco);letter-spacing:.02em}
.rete .area-sotto{font:500 12px var(--display);fill:var(--verde);letter-spacing:.2em}
@keyframes scia{from{stroke-dashoffset:0}to{stroke-dashoffset:-1837}}
@keyframes segnale{from{stroke-dashoffset:-110}to{stroke-dashoffset:-1947}}
/* i punti si accendono quando passa il segnale */
@keyframes acceso{0%{fill:#88c038}14%{fill:#03182a}100%{fill:#03182a}}

.prove{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--abisso)}
.prove ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.prove li{padding:22px 24px;border-left:1px solid var(--linea);display:grid;gap:2px}
.prove li:first-child{border-left:0;padding-left:0}
.prove strong{font:600 1.35rem/1.2 var(--display);color:var(--titolo)}
.prove span{color:var(--grigio);font-size:.95rem}
.prove a{color:var(--link)}

/* servizi */
.sezione{padding-block:96px}
.titolo-sezione{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:48px}
.titolo-sezione h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:12px}
.titolo-sezione p{color:var(--grigio);max-width:32em}
.aree{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.area{min-width:0}
.area{border:1px solid var(--linea);border-top:6px solid var(--cielo);padding:28px;display:flex;flex-direction:column;background:var(--superficie);border-radius:4px}
.area.infra{border-top-color:var(--azzurro)}
.area.ia{border-top-color:var(--verde)}
.area.ia li::before{border-color:var(--verde)}
.area.ia .etichetta{color:var(--verde)}
.area h3{font-size:1.9rem;margin-bottom:10px}
.area>p{color:var(--grigio);margin-bottom:22px}
.area ul{list-style:none;margin:0 0 28px;padding:0;display:grid}
.area li{display:grid;grid-template-columns:14px 1fr;gap:14px;padding-block:14px;border-top:1px solid var(--linea)}
.area li::before{content:"";width:10px;height:10px;margin-top:8px;border:2px solid var(--cielo);border-radius:50%;background:var(--superficie)}
.area.infra li::before{border-color:var(--azzurro)}
.area li b{font-weight:600;display:block}
.area li small{display:block;color:var(--grigio);font-size:.95rem;line-height:1.5}
.area .vai{margin-top:auto;font-weight:600;text-decoration:none}
.area .vai:hover{text-decoration:underline}

/* metodo */
.metodo{background:var(--notte);color:var(--su-scuro)}
.metodo .etichetta{color:var(--verde)}
.metodo h2{color:var(--bianco);font-size:clamp(2rem,3.8vw,3.1rem);margin-block:14px 20px;max-width:18em}
.metodo .guida{font-size:1.2rem;max-width:40em}
.passi{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:passo}
.passi li{counter-increment:passo;padding:28px 28px 0 0;border-top:1px solid #2a4f6e;position:relative}
.passi li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--notte);border:3px solid var(--verde)}
.passi li::after{content:"Fase " counter(passo);position:absolute;top:-26px;left:22px;font:500 .78rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:#8fb0cb}
.passi h3{color:var(--bianco);font-size:1.45rem;margin-bottom:8px}

/* chi siamo */
.chi .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.chi h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-block:12px 18px}
.chi p{color:var(--grigio);margin-bottom:14px;max-width:34em}
.fatti{margin:26px 0 28px;padding:0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px}
.fatti dt{font:600 1.05rem var(--display);color:var(--titolo)}
.fatti dd{margin:0;color:var(--grigio)}

/* contatti */
.contatti{background:var(--carta);border-top:1px solid var(--linea)}
.contatti .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.contatti h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-block:12px 16px}
.contatti .guida{color:var(--grigio);margin-bottom:32px}
.recapiti{margin:0;display:grid;gap:18px}
.recapiti div{display:grid;gap:2px}
.recapiti dt{font:500 .78rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}
.recapiti dd{margin:0;font-size:1.15rem;font-weight:500;font-variant-numeric:tabular-nums}
.recapiti dd a{text-decoration:none}
.recapiti dd a:hover{text-decoration:underline}
form{background:var(--superficie);border-radius:4px;border:1px solid var(--linea);padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:grid;gap:6px}
.campo.largo,.consenso,form .invia{grid-column:1/-1}
label{font-weight:500;font-size:.95rem}
input,textarea,select{font:inherit;color:var(--inchiostro);background:var(--abisso);border:1px solid #2f5a7e;border-radius:4px;padding:11px 12px;width:100%}
textarea{min-height:130px;resize:vertical}
.consenso{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--grigio)}
.consenso input{width:18px;height:18px;margin-top:3px;flex:none}
.invia{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.esito{font-size:.95rem;color:var(--verde-testo)}

/* piede */
.piede{background:#021120;color:var(--su-scuro);font-size:.93rem}
.piede .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-block:56px 40px}
.piede h3{font:500 .78rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:#8fb0cb;margin-bottom:12px}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.piede a{color:var(--bianco);text-decoration:none}
.piede a:hover{text-decoration:underline}
.piede .legale{grid-column:1/-1;border-top:1px solid #2a4f6e;padding-top:20px;color:#8fb0cb;font-size:.85rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.piede .legale a{color:#dbe8f3;text-decoration:underline;text-underline-offset:3px}

@media (max-width:980px){
  .menu .tel{display:none}
  .apertura>.wrap,.titolo-sezione,.chi .wrap,.contatti .wrap{grid-template-columns:1fr}
  .apertura>.wrap{padding-block:48px 40px;gap:24px}
  .rete-box{max-width:620px}
  .prove ul{grid-template-columns:1fr 1fr}
  .prove li:nth-child(3){border-left:0;padding-left:0}
  .prove li:nth-child(n+3){border-top:1px solid var(--linea)}
  .aree{grid-template-columns:1fr}
  .titolo-sezione{gap:16px}
}
@media (max-width:760px){
  .apri-menu{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:76px;background:var(--abisso);border-bottom:1px solid var(--linea);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 20px}
  .menu.aperto{display:flex}
  .menu a{padding-block:12px;border-bottom:1px solid var(--linea)}
  .menu .tel{display:block}
  .menu .pulsante{margin-top:14px;justify-content:center;border-bottom:0}
  .sezione{padding-block:64px}
  .passi{grid-template-columns:1fr;gap:40px}
  .passi li{padding-right:0}
  .rete .voce{display:none}
  form{grid-template-columns:1fr;padding:22px}
  .piede .wrap{grid-template-columns:1fr}
}
@media (max-width:480px){
  .prove ul{grid-template-columns:1fr}
  .prove li{border-left:0;padding-left:0;border-top:1px solid var(--linea)}
  .prove li:first-child{border-top:0}
  .area{padding:24px}
  .marchio svg{width:52px}
  .marchio-nome{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rete .segnale,.rete .scia{animation:none;stroke-dasharray:none;stroke-opacity:0}
  .rete .nodo{animation:none}
  .rete .alone{animation:none;stroke-opacity:0}
  .c-otto .segnale,.c-otto .scia{animation:none;stroke-dasharray:none;stroke-opacity:0}
  .c-otto .nodo,.c-linea.ia{animation:none}
  .c-otto .alone{animation:none;stroke-opacity:0}
}

/* ---------- pagine interne ---------- */
.testata .menu a[aria-current="page"]:not(.pulsante){color:var(--link);box-shadow:inset 0 -2px 0 var(--verde)}
.testa-pagina{background:radial-gradient(640px 360px at 85% 20%,rgba(56,120,184,.24),transparent 70%),var(--abisso);border-bottom:1px solid var(--linea)}
.testa-pagina .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:end;padding-block:56px 64px}
.briciole{font-size:.9rem;color:var(--grigio);margin-bottom:22px}
.briciole a{color:var(--grigio)}
.testa-pagina h1{font-size:clamp(2.3rem,4.6vw,3.7rem);margin-block:14px 20px}
.testa-pagina h1 em{font-style:normal;color:var(--cielo)}
.testa-pagina .intro{font-size:1.2rem;color:var(--grigio);max-width:36em}
.indice{background:var(--superficie);border-radius:4px;border:1px solid var(--linea);padding:22px 24px}
.indice ol{list-style:none;margin:10px 0 0;padding:0;display:grid}
.indice li{border-top:1px solid var(--linea)}
.indice li:first-child{border-top:0}
.indice a{display:flex;justify-content:space-between;gap:12px;padding-block:10px;text-decoration:none;font-weight:500}
.indice a::after{content:"↓";color:var(--grigio)}
.indice a:hover{text-decoration:underline}

.gruppo{padding-block:80px}
.gruppo+.gruppo{border-top:1px solid var(--linea)}
.gruppo>.wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.gruppo-titolo{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px)}
.gruppo-titolo h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-block:12px 14px}
.gruppo-titolo p{color:var(--grigio);max-width:28em}
.servizi{display:grid}
.servizio{padding-block:26px;border-top:1px solid var(--linea);display:grid;gap:8px}
.servizio:first-child{border-top:0;padding-top:4px}
.servizio h3{font-size:1.5rem}
.servizio p{color:var(--grigio);max-width:40em}
.servizio ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.servizio li{font-size:.88rem;color:var(--cielo);background:var(--carta);border:1px solid var(--linea);border-radius:3px;padding:3px 10px}

.catena{background:var(--notte);color:var(--su-scuro)}
.catena .etichetta{color:var(--verde)}
.catena h2{color:var(--bianco);font-size:clamp(1.9rem,3.4vw,2.8rem);margin-block:12px 16px;max-width:20em}
.catena .guida{max-width:40em;font-size:1.1rem}
.catena .passi p b{color:var(--bianco);font-weight:500}
.catena .passi li::after{content:attr(data-fase)}

.temi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tema{border:1px solid var(--linea);padding:26px;display:grid;gap:10px;align-content:start}
.tema h3{font-size:1.4rem}
.tema p{color:var(--grigio);font-size:.98rem}
.fonti{margin-top:24px;font-size:.88rem;color:var(--grigio)}

.fascia-cta{background:var(--blu);color:var(--bianco)}
.fascia-cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:56px}
.fascia-cta h2{color:var(--bianco);font-size:clamp(1.7rem,3vw,2.4rem);max-width:22em}
.fascia-cta p{color:var(--su-scuro);margin-top:8px}
.pulsante.chiaro{background:var(--bianco);color:var(--blu);border-color:var(--bianco)}
.pulsante.chiaro:hover{background:#e6eef5}

.rimando{background:var(--carta);border-top:1px solid var(--linea)}
.rimando .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-block:40px}
.rimando p{font:600 1.35rem/1.25 var(--display);color:var(--titolo)}
.rimando a{font-weight:600}

.qualita{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;border:1px solid var(--linea);padding:28px;max-width:760px}
.sigillo{width:112px;height:112px;border-radius:50%;border:3px solid var(--cielo);display:grid;place-content:center;text-align:center;font:600 1.4rem/1 var(--display);color:var(--titolo)}
.sigillo small{display:block;font:500 .8rem var(--display);letter-spacing:.1em;color:var(--grigio);margin-top:4px}
.qualita h3{font-size:1.5rem;margin-bottom:8px}
.qualita p{color:var(--grigio)}
.societa{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 28px;max-width:760px}
.societa dt{font:500 .8rem/1.9 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}
.societa dd{margin:0;font-weight:500}

.testo-legale{max-width:46em;display:grid;gap:14px}
.testo-legale h2{font-size:1.6rem;margin-top:18px}
.testo-legale p,.testo-legale li{color:var(--inchiostro)}
.avviso-bozza{background:#fff6d6;border:1px solid #e3c86a;padding:14px 18px;color:#5a4400;font-size:.95rem}

@media (max-width:980px){
  .testa-pagina .wrap,.gruppo>.wrap{grid-template-columns:1fr;gap:28px}
  .gruppo-titolo{position:static}
  .temi{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .gruppo{padding-block:56px}
  .temi{grid-template-columns:1fr}
  .qualita{grid-template-columns:1fr}
  .societa{grid-template-columns:1fr;gap:2px}
  .societa dd{margin-bottom:12px}
}

/* quadrante H24 (home) */
.h24{background:var(--notte);color:var(--su-scuro);padding:32px;display:grid;gap:24px;justify-items:center}
.quadrante{width:100%;max-width:340px;height:auto;display:block}
.q-fondo{fill:#0b3656}
.q-anello{fill:none;stroke:#2a4f6e;stroke-width:2}
.q-tacche line{stroke:#5f86a8;stroke-width:2;stroke-linecap:round}
.q-ore text{font:500 15px var(--display);fill:#8fb0cb;letter-spacing:.06em}
.q-giro{transform-origin:200px 200px;animation:giro 24s linear infinite}
.q-punto{fill:var(--verde);stroke:var(--notte);stroke-width:4}
.q-grande{font:600 76px var(--display);fill:var(--bianco);letter-spacing:-.01em}
.q-piccolo{font:500 14px var(--display);fill:var(--verde);letter-spacing:.22em}
@keyframes giro{to{transform:rotate(360deg)}}
.h24-passi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;counter-reset:h}
.h24-passi li{counter-increment:h;border-top:2px solid var(--verde);padding-top:10px;display:grid;gap:2px;font-size:.92rem;line-height:1.4}
.h24-passi b{font:600 1.1rem var(--display);color:var(--bianco)}

/* mappa dei servizi (chi siamo) */
.costellazione svg{width:100%;max-width:1000px;height:auto;display:block;margin-inline:auto}
.c-linea{stroke:var(--linea);stroke-width:2}
.c-centro{fill:var(--superficie);stroke:var(--cielo);stroke-width:4}
.c-nome{font:600 26px var(--display);fill:var(--titolo);letter-spacing:.12em}
.c-nodo{stroke:var(--abisso);stroke-width:4}
.c-nodo.blu{fill:#5b9bd8}
.c-nodo.azzurro{fill:var(--azzurro)}
.c-nodo.verde{fill:var(--verde)}
.c-voce{font:500 19px var(--testo);fill:var(--inchiostro)}
.c-linea.ia{stroke:var(--verde);stroke-opacity:.55;stroke-dasharray:6 7;animation:ia-flusso 1.2s linear infinite}
.c-nodo.ia{fill:var(--abisso);stroke:var(--verde);stroke-width:3}
.c-voce.ia{fill:var(--verde)}
/* al centro l'otto del marchio, con il segnale che scorre e l'IA nel punto d'incontro */
.c-otto .anello{fill:none;stroke:var(--cielo);stroke-opacity:.55;stroke-width:7;stroke-linejoin:round}
.c-otto .percorso{fill:none;stroke:var(--bianco);stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.c-otto .scia{fill:none;stroke:var(--verde);stroke-width:12;stroke-linecap:round;stroke-opacity:.35;stroke-dasharray:150 1687;animation:scia 9s linear infinite}
.c-otto .segnale{fill:none;stroke:#b8ec70;stroke-width:20;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(136,192,56,.9));stroke-dasharray:40 1797;stroke-dashoffset:-110;animation:segnale 9s linear infinite}
.c-otto .nodo{fill:var(--abisso);stroke:var(--cielo);stroke-width:6;animation:acceso 9s linear infinite}
.c-otto .nodo.forte{stroke:var(--bianco);stroke-width:8}
.c-otto .centro{fill:var(--abisso);stroke:var(--verde);stroke-width:6}
.c-otto .alone{fill:none;stroke:var(--verde);stroke-width:4;animation:c-alone 3s ease-out infinite}
@keyframes c-alone{0%{r:44px;stroke-opacity:.5}100%{r:70px;stroke-opacity:0}}
.c-otto .ia-centro{font:500 40px var(--display);fill:var(--verde);letter-spacing:.14em}
.costellazione-lista{display:none;list-style:none;margin:0;padding:0;grid-template-columns:1fr 1fr;gap:10px 16px}
.costellazione-lista li{display:flex;gap:10px;align-items:center;font-weight:500}
.costellazione-lista li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--azzurro);flex:none}
.costellazione-lista li:nth-child(3n+1)::before{background:#5b9bd8}
.costellazione-lista li:nth-child(3n)::before{background:var(--verde)}
.costellazione-lista li.ia{color:var(--verde)}
.costellazione-lista li.ia::before{background:var(--abisso);box-shadow:inset 0 0 0 2px var(--verde)}
@media (max-width:760px){
  .costellazione svg{display:none}
  .costellazione-lista{display:grid}
  .h24-passi{grid-template-columns:1fr}
  .h24{padding:24px}
}
@media (max-width:420px){.costellazione-lista{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.q-giro{animation:none}}

/* modulo: campo antispam ed errori */
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.esito.errore{color:#ff8a7a}
.consenso a{color:var(--link)}

/* pagine semplici (grazie, 404) */
.messaggio{padding-block:96px;text-align:left}
.messaggio .wrap{display:grid;gap:18px;justify-items:start;max-width:760px}
.messaggio h1{font-size:clamp(2.3rem,4.6vw,3.4rem)}
.messaggio p{color:var(--grigio);font-size:1.15rem}

/* avviso cookie */
.avviso-cookie{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;max-width:760px;margin-inline:auto;background:var(--notte);color:var(--su-scuro);border:1px solid #2a4f6e;border-radius:6px;padding:14px 16px 14px 20px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;box-shadow:0 12px 30px -10px rgba(3,24,42,.6);font-size:.95rem}
.avviso-cookie p{flex:1 1 320px}
.avviso-cookie a{color:var(--bianco)}
.avviso-cookie .pulsante{background:var(--verde);border-color:var(--verde);color:var(--notte);min-height:40px;padding:8px 18px}
.avviso-cookie .pulsante:hover{background:#9bd14c}

/* IA on-premise */
.passi.quattro{grid-template-columns:repeat(4,1fr)}
.ia-home{background:radial-gradient(620px 380px at 80% 50%,rgba(136,192,56,.1),transparent 70%),var(--abisso);border-top:1px solid var(--linea)}
.ia-home .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ia-home .etichetta{color:var(--verde)}
.ia-home h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-block:12px 16px}
.ia-home .guida{color:var(--grigio);font-size:1.1rem;max-width:34em}
.ia-punti{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:14px}
.ia-punti li{display:grid;gap:2px;padding-left:18px;border-left:2px solid var(--verde)}
.ia-punti b{font:600 1.1rem var(--display);color:var(--titolo)}
.ia-punti span{color:var(--grigio);font-size:.95rem}
.ia-schema{width:100%;height:auto;display:block}
.ia-rete{fill:rgba(56,120,184,.08);stroke:var(--cielo);stroke-width:2;stroke-dasharray:8 7}
.ia-etichetta{font:500 13px var(--display);letter-spacing:.18em;fill:var(--cielo)}
.ia-flusso{fill:none;stroke:var(--verde);stroke-width:3;stroke-linecap:round;stroke-dasharray:4 9;animation:ia-flusso 1.2s linear infinite}
@keyframes ia-flusso{to{stroke-dashoffset:-26}}
.ia-server rect{fill:var(--superficie);stroke:var(--cielo);stroke-width:2}
.ia-server circle{fill:var(--verde)}
.ia-modello{fill:rgba(136,192,56,.14);stroke:var(--verde);stroke-width:2.5}
.ia-modello-t{font:600 30px var(--display);fill:var(--bianco)}
.ia-nome{font:500 14px var(--testo);fill:var(--grigio)}
.ia-doc rect{fill:var(--superficie);stroke:var(--cielo);stroke-width:2}
.ia-doc path,.ia-persone path{fill:none;stroke:var(--cielo);stroke-width:2;stroke-linecap:round}
.ia-persone circle{fill:none;stroke:var(--cielo);stroke-width:2}
.ia-cloud{fill:none;stroke:#5f7890;stroke-width:2;stroke-dasharray:3 4}
.ia-fuori{fill:#5f7890}
.ia-blocco{stroke:#5f7890;stroke-width:2;stroke-dasharray:3 5}
.ia-x{stroke:#ff8a7a;stroke-width:3;stroke-linecap:round}
.ia-lucchetto rect{fill:var(--abisso);stroke:var(--verde);stroke-width:2}
.ia-lucchetto path{fill:none;stroke:var(--verde);stroke-width:2}
@media (max-width:980px){.ia-home .wrap{grid-template-columns:1fr;gap:32px}.passi.quattro{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (max-width:760px){.passi.quattro{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ia-flusso{animation:none}}

/* con sei voci, fra 1120 e 1280 px le voci si stringono; sotto i 1120 px diventa il menu a tendina */
@media (max-width:1280px){.menu{gap:18px}.testata .wrap{gap:16px}}
@media (max-width:1120px){
  .apri-menu{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:76px;background:var(--abisso);border-bottom:1px solid var(--linea);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 20px}
  .menu.aperto{display:flex}
  .menu a{padding-block:12px;border-bottom:1px solid var(--linea)}
  .menu .tel{display:block}
  .menu .pulsante{margin-top:14px;justify-content:center;border-bottom:0}
}

/* illustrazione dell'IA on-premise (home): linee sottili e luminose */
.il{width:100%;height:auto;display:block;overflow:visible}
.il *{stroke-linejoin:round;stroke-linecap:round}
.il-box{fill:url(#il-vetro);stroke:var(--cielo);stroke-width:2}
.il-linea{fill:none;stroke:var(--cielo);stroke-width:1.6;stroke-opacity:.7}
.il-led{fill:var(--verde);animation:il-led 2.4s ease-in-out infinite}
.il-led.l2{animation-delay:.6s}.il-led.l3{animation-delay:1.2s}
@keyframes il-led{50%{opacity:.35}}
.il-nome{font:500 13.5px var(--testo);fill:var(--grigio)}
.il-nome.fuori{fill:#6f8aa3}
.il-flusso{fill:none;stroke:var(--verde);stroke-width:2.5;stroke-dasharray:2 8;animation:il-flusso 1s linear infinite;opacity:.9}
@keyframes il-flusso{to{stroke-dashoffset:-20}}
.il-alone{fill:none;stroke:var(--verde);stroke-width:1.5;stroke-opacity:.2}
.il-orbita{fill:none;stroke:var(--verde);stroke-width:1.2;stroke-opacity:.45;stroke-dasharray:3 5}
.il-orbita.o2{stroke-opacity:.7;stroke-dasharray:none}
.il-giro{transform-box:view-box;transform-origin:250px 248px;animation:il-giro 9s linear infinite}
@keyframes il-giro{to{transform:rotate(360deg)}}
.il-satellite{fill:var(--verde)}
.il-satellite.s2{fill:var(--cielo)}
.il-cuore{animation:il-pulsa 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes il-pulsa{50%{transform:scale(1.12)}}
.il-ia{font:600 14px var(--display);letter-spacing:.12em;fill:#03182a}
.il-chat{fill:url(#il-vetro);stroke:rgba(127,176,224,.55);stroke-width:1.5;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.il-msg.utente{fill:rgba(127,176,224,.18);stroke:rgba(127,176,224,.45);stroke-width:1}
.il-msg.ia{fill:rgba(136,192,56,.14);stroke:rgba(136,192,56,.5);stroke-width:1}
.il-testo{font:500 12px var(--testo);fill:var(--inchiostro)}
.il-fonte{font:400 10.5px var(--testo);fill:var(--verde)}
.il-avatar{fill:none;stroke:var(--cielo);stroke-width:1.6}
.il-punto-ia{fill:var(--verde)}
.il-nuvola{fill:none;stroke:#5f7890;stroke-width:2;stroke-dasharray:4 5}
.il-tentativo{fill:none;stroke:#5f7890;stroke-width:1.8;stroke-dasharray:4 5}
.il-x{stroke:#ff8a7a;stroke-width:2.2}
.il-scudo{fill:var(--abisso);stroke:var(--verde);stroke-width:2.2;filter:drop-shadow(0 0 8px rgba(136,192,56,.35))}
.il-spunta{fill:none;stroke:var(--verde);stroke-width:2.4}
@media (prefers-reduced-motion:reduce){.il *{animation:none!important}}

/* selettore di lingua */
.menu .lingua{font:600 .82rem/1 var(--display);letter-spacing:.12em;color:var(--cielo);border:1px solid var(--linea);border-radius:3px;padding:6px 8px}
.menu .lingua:hover{color:var(--bianco);border-color:var(--cielo)}
@media (max-width:1120px){.menu .lingua{border:0;border-bottom:1px solid var(--linea);border-radius:0;padding-inline:0;font-size:.95rem}}

/* pagina software */
.testa-pagina .azioni{margin-top:28px}
.schema-box{background:var(--notte);border-block:1px solid var(--linea)}
.schema-box .wrap{padding-block:40px}
.schema{width:100%;max-width:980px;height:auto;display:block;margin-inline:auto}
.s-titolo{font:500 13px var(--display);letter-spacing:.18em;fill:var(--grigio)}
.s-titolo.v{fill:var(--verde)}
.s-sede{fill:rgba(8,47,77,.45);stroke:var(--verde);stroke-opacity:.6;stroke-width:1.5;stroke-dasharray:6 6}
.s-server{fill:var(--superficie);stroke:var(--cielo);stroke-width:2}
.s-righe{fill:none;stroke:var(--linea);stroke-width:6;stroke-linecap:round}
.s-led{fill:var(--verde);animation:il-led 2s ease-in-out infinite}
.s-app{font:600 21px var(--display);fill:var(--titolo)}
.s-voce{font:500 15px var(--testo);fill:var(--inchiostro)}
.s-disp{fill:none;stroke:var(--cielo);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.s-punto{fill:var(--cielo)}
.s-sist{fill:var(--notte-2);stroke:var(--linea);stroke-width:1.5}
.s-db{fill:var(--notte-2);stroke:var(--cielo);stroke-width:2}
.s-filo{fill:none;stroke:var(--linea);stroke-width:2}
.s-luce{fill:none;stroke:#b8ec70;stroke-width:3;stroke-linecap:round;stroke-dasharray:14 400;animation:s-luce 3.3s linear infinite;filter:drop-shadow(0 0 4px rgba(136,192,56,.8))}
.s-luce.v{stroke:var(--cielo);animation-duration:2.6s;filter:drop-shadow(0 0 4px rgba(127,176,224,.8))}
@keyframes s-luce{from{stroke-dashoffset:14}to{stroke-dashoffset:-300}}
.gruppo>.wrap>*{min-width:0}
.frasi{list-style:none;margin:0;padding:0;display:grid}
.frasi li{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;padding-block:18px;border-top:1px solid var(--linea)}
.frasi q{font:500 1.2rem/1.35 var(--display);color:var(--titolo);quotes:"«" "»"}
.frasi span{color:var(--grigio)}
.funzioni{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linea)}
.funzioni article{padding:24px 24px 24px 0;border-bottom:1px solid var(--linea);display:grid;gap:6px;align-content:start}
.funzioni h3{font-size:1.25rem}
.funzioni p{color:var(--grigio);font-size:.96rem}
.tecnica{columns:2;column-gap:40px;padding:0;margin:0;list-style:none}
.tecnica li{break-inside:avoid;padding:10px 0;border-top:1px solid var(--linea);color:var(--grigio);font-size:.96rem}
.tecnica li b{color:var(--inchiostro);font-weight:600}
.domande{display:grid;border-top:1px solid var(--linea)}
.domande details{border-bottom:1px solid var(--linea)}
.domande summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font:600 1.2rem var(--display);color:var(--titolo);position:relative}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 1.6rem var(--testo);color:var(--verde)}
.domande details[open] summary::after{content:"–"}
.domande summary:focus-visible{outline:2px solid var(--verde);outline-offset:4px}
.domande details p{padding:0 0 18px;color:var(--grigio);max-width:46em}
@media (max-width:980px){.funzioni{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .schema-box{display:none}
  .funzioni,.tecnica{grid-template-columns:1fr;columns:1}
  .frasi li{grid-template-columns:1fr;gap:6px}
}
@media (prefers-reduced-motion:reduce){.s-luce{animation:none;stroke-opacity:0}.s-led{animation:none}}