/* overflow-x:clip anche su html: così quello del body non passa alla finestra e ritaglia come il contenitore del design */
/* scroll-padding: ancore e scorrimento sul focus lasciano spazio alla testata sticky (WCAG 2.4.11) */
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:96px}
body{margin:0;background:#03090A}
:root{color-scheme:dark}
/* .au è sul <body>: tiene la stessa specificità dei selettori del design */
.au{--a:#29B5A8;position:relative;background:#03090A;color:#EAF4F3;font-family:'Geist','Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.au *,.au *::before,.au *::after{box-sizing:border-box}
.au ::selection{background:rgba(41,181,168,.42);color:#fff}
.au h1,.au h2,.au h3,.au h4{text-wrap:balance}
.au p{text-wrap:pretty}
.au a:focus-visible,.au button:focus-visible,.au input:focus-visible,.au textarea:focus-visible{outline:2px solid #8CFBEA;outline-offset:3px}
.au [tabindex="-1"]:focus{outline:none}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.f-m{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.f-s{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mk{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#93B3AE}
.eyb{display:inline-flex;align-items:center;gap:12px;margin:0;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#93B3AE}
.eyb::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ec,#8CFBEA);box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.eyb.eyb-4::before{display:none}
.eyd{display:inline-flex;gap:5px}
.eyd i{width:8px;height:8px;border-radius:50%}
.h2{margin:20px 0 0;font-weight:600;font-size:clamp(2.3rem,4.8vw,4.5rem);line-height:.98;letter-spacing:-.05em;color:#F2FBFA}
.lead{margin:0;font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.6;color:#A9C0BD}
.sec{position:relative;padding-block:clamp(96px,11vw,156px)}
.shead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 64px}
.shead-t{flex:1 1 560px;max-width:860px;min-width:0}
.shead-a{flex:0 1 400px;min-width:0}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#5CF2DC}
.ar{flex:none}

/* pulsanti */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;text-decoration:none;font-family:inherit;font-weight:500;font-size:15px;line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background-color .3s,border-color .3s,color .3s}
.btn .ar{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover .ar{transform:translateX(3px)}
.btn-p{background:var(--a);color:#021514;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 36px -14px var(--a)}
.btn-p:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 44px -12px var(--a)}
.btn-g{background:rgba(255,255,255,.04);color:#EAF4F3;border-color:rgba(255,255,255,.14)}
.btn-g:hover{background:rgba(255,255,255,.08);border-color:rgba(124,245,230,.5);color:#fff}
.btn-l{min-height:56px;padding:0 28px;font-size:16px}
.btn-c{min-height:44px;padding:0 18px;font-size:14.5px;color:#F2FBFA;background:rgba(255,255,255,.02);border-color:var(--c,rgba(255,255,255,.22))}
.btn-c:hover{background:rgba(255,255,255,.07)}
.xl{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.xl svg{flex:none;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.xl:hover svg{transform:translateX(4px)}

/* header */
.skip{position:absolute;left:16px;top:-120px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#EAF4F3;color:#021514;font-weight:500;text-decoration:none}
.skip:focus{top:16px}
.hdr{position:sticky;top:0;z-index:60;padding:14px clamp(12px,2.4vw,28px) 0}
.hdr-in{position:relative;max-width:1360px;margin:0 auto;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 26px;border-radius:999px;background:rgba(4,13,15,.95);border:1px solid rgba(160,255,240,.1);box-shadow:0 14px 50px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.logo{display:flex;align-items:center;gap:12px;min-height:44px;min-width:0;text-decoration:none;color:#fff;flex:0 1 auto}
.logo picture,.logo img{display:block;flex:none}
.logo img{height:36px;width:auto;translate:0 9%}
.hnav .nl-tel{display:none}
.hnav{display:flex;gap:2px;font-size:14.5px}
.nl{color:#C4D6D3;text-decoration:none;padding:0 14px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;transition:color .2s,background-color .2s}
.nl:hover{color:#fff;background:rgba(255,255,255,.06)}
.hact{display:flex;align-items:center;gap:8px;flex:none}
.hact .btn{min-height:44px;font-size:14px;padding:0 16px}
.hact .mbtn{display:none;width:44px;padding:0}
.mbtn .ic-x{display:none}
.mbtn[aria-expanded="true"] .ic-x{display:block}
.mbtn[aria-expanded="true"] .ic-m{display:none}
.mnav{position:absolute;left:0;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:22px;background:rgba(4,13,15,.98);border:1px solid rgba(160,255,240,.14);box-shadow:0 30px 80px -30px rgba(0,0,0,.95)}
.mnav[data-open="false"]{display:none}
.mnav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 16px;border-radius:14px;color:#EAF4F3;text-decoration:none;font-size:16px}
.mnav a:hover{background:rgba(255,255,255,.05)}
.mnav a span{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;color:#93B3AE}
.mnav hr{border:0;height:1px;margin:6px 10px;background:rgba(160,255,240,.1)}

/* hero */
.hero{position:relative;margin-top:-78px;padding:clamp(100px,10vw,132px) 0 clamp(44px,5vw,76px);overflow:hidden;isolation:isolate;background:radial-gradient(70% 62% at 74% 50%,#082A2C 0%,#041516 48%,#03090A 80%)}
.hero-g{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,3.6vw,56px);align-items:start}
.hero-tx{min-width:0}
.h1{margin:0;font-weight:600;font-size:clamp(2.75rem,5.4vw,4.75rem);line-height:.93;letter-spacing:-.056em;color:#F2FBFA}
.h1-l{display:block}
.h1 .f-s{display:inline-block;color:#8CFBEA;font-size:1.1em;letter-spacing:-.02em;line-height:.85;padding-right:.05em}
.hsub{margin:28px 0 0;max-width:35rem;font-size:clamp(1.05rem,1.25vw,1.2rem);line-height:1.55;color:#B3C8C5}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.who{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:34px;padding-top:18px;border-top:1px solid rgba(160,255,240,.1)}
.who ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.who li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-size:14px;color:#DDEFEC}
.who li svg{color:#8CFBEA}

/* rete viva */
.lchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.lchips-l{flex-basis:100%;margin:0 0 2px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.lchips-l .mk{color:#B9D3CF}
.lchips-h{font-size:13.5px;line-height:1.4;color:#93B3AE}
.lchip{--c:#8CFBEA;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(4,14,16,.72);color:#C4D6D3;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .3s,background-color .3s,color .3s,box-shadow .3s}
.lchip:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.lchip i{width:8px;height:8px;border-radius:50%;background:var(--c);animation:cue .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(1.2s + var(--n,0) * .5s)}
.lchip .tri{display:inline-flex;gap:3px}
.lchip .tri i{width:6px;height:6px}
@keyframes cue{0%,100%{transform:scale(1)}45%{transform:scale(1.9)}}
.lchip[aria-pressed="true"]{color:#fff;border-color:var(--c);background:rgba(10,30,32,.95);box-shadow:0 0 0 4px rgba(255,255,255,.03),0 0 26px -8px var(--c)}
.stage{container-type:inline-size;position:relative;width:min(100%,max(320px,calc((100vh - 330px) * 4 / 3)));width:min(100%,max(320px,calc((100svh - 330px) * 4 / 3)));margin-inline:auto;aspect-ratio:800/600;background:radial-gradient(37.5% 50% at 50% 50%,rgba(41,181,168,.2),rgba(41,181,168,0))}
.stage svg{position:absolute;inset:0;display:block;overflow:visible}
.stage-fx{pointer-events:none}
.nd{fill:#061719;stroke-width:1.3;stroke-opacity:.8}
.ic{fill:none;stroke:#DDEFEC;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ly{transition:opacity .45s ease}
.net:not([data-l="all"]) .ly{opacity:.13}
.net[data-l="rete"] .ly.l-rete,.net[data-l="voce"] .ly.l-voce,.net[data-l="cloud"] .ly.l-cloud,.net[data-l="sic"] .ly.l-sic,.net[data-l="ass"] .ly.l-ass{opacity:1}
.gw{opacity:0;transition:opacity .45s ease}
.net[data-l="rete"] .l-rete .gw,.net[data-l="voce"] .l-voce .gw,.net[data-l="cloud"] .l-cloud .gw,.net[data-l="sic"] .l-sic .gw,.net[data-l="ass"] .l-ass .gw{opacity:1}
.sx{display:none}
.net[data-l="all"] .sx.pa,.net[data-l="rete"] .sx.p-rete,.net[data-l="voce"] .sx.p-voce,.net[data-l="cloud"] .sx.p-cloud,.net[data-l="sic"] .sx.p-sic,.net[data-l="ass"] .sx.p-ass{display:inline}
.pk{fill:none;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:.1 140;stroke-dashoffset:.1;animation:pk 4s linear infinite}
@keyframes pk{to{stroke-dashoffset:-140}}
.pk.atk{stroke-dasharray:.1 200;animation-name:atk}
@keyframes atk{0%{stroke-dashoffset:.1;opacity:1}70%{stroke-dashoffset:-99.9;opacity:1}72%,100%{stroke-dashoffset:-99.9;opacity:0}}
.hit{fill:none;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center;animation:hit 4s ease-out infinite}
@keyframes hit{0%,68%{opacity:0;transform:scale(.5)}74%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(2.3)}}
.cpulse{fill:none;stroke:#8CFBEA;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:cp 4.2s ease-out infinite}
@keyframes cp{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
.nlb{position:absolute;z-index:2;display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:rgba(3,10,11,.84);border:1px solid rgba(255,255,255,.08);font-size:12.5px;line-height:1.3;font-weight:500;color:#D5E6E3;white-space:nowrap;pointer-events:none;transition:color .4s,border-color .4s}
.a-r{transform:translate(0,-50%)}.a-l{transform:translate(-100%,-50%)}.a-b{transform:translate(-50%,0)}
.net:not([data-l="all"]) .nlb{color:#86A29E;border-color:rgba(255,255,255,.04)}
.net[data-l="rete"] .nlb.l-rete,.net[data-l="voce"] .nlb.l-voce,.net[data-l="cloud"] .nlb.l-cloud,.net[data-l="sic"] .nlb.l-sic,.net[data-l="ass"] .nlb.l-ass{color:#FFFFFF;border-color:rgba(255,255,255,.26)}
.core-l{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);text-align:center;font-weight:600;font-size:13px;line-height:1.15;color:#F2FBFA;pointer-events:none}
.core-l span{display:block;margin-top:4px;font-family:'Geist Mono',ui-monospace,monospace;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8CFBEA}
.lbox{--lc:#8CFBEA;position:relative;margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px 28px;padding:18px 20px;border-radius:20px;border:1px solid rgba(160,255,240,.14);background:linear-gradient(180deg,rgba(10,30,32,.8),rgba(4,14,16,.8))}
.lbox.lbx{display:none}
.net[data-l="all"] .lbx-all,.net[data-l="rete"] .lbx-rete,.net[data-l="voce"] .lbx-voce,.net[data-l="cloud"] .lbx-cloud,.net[data-l="sic"] .lbx-sic,.net[data-l="ass"] .lbx-ass{display:grid}
.lbox::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0),var(--lc),rgba(0,0,0,0))}
.lbox-h{display:flex;justify-content:space-between;align-items:center;gap:6px 14px;flex-wrap:wrap}
.lbox-k{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lc)}
.lbox-k i{width:7px;height:7px;border-radius:50%;background:var(--lc)}
.lbox-t{margin:10px 0 0;font-weight:600;font-size:17.5px;line-height:1.3;letter-spacing:-.02em;color:#F2FBFA}
.lbox .xl{color:var(--lc);font-size:14.5px;margin-top:4px}
.lbox-r{list-style:none;margin:0;padding:0;align-self:center}
.lbox-r li{display:grid;grid-template-columns:8px minmax(0,auto) minmax(0,1fr);gap:4px 10px;align-items:baseline;padding:8px 0;border-top:1px solid rgba(160,255,240,.08);font-size:13.5px;line-height:1.4}
.lbox-r li:first-child{border-top:0}
.lbox-r li i{width:7px;height:7px;border-radius:50%;transform:translateY(-1px)}
.lbox-r b{font-weight:600;color:#EAF4F3;white-space:nowrap}
.lbox-r span{color:#A9C0BD}
.lbox-r li.lr-a{display:block;padding:0}
.lr-a a{display:grid;grid-template-columns:8px minmax(0,auto) minmax(0,1fr);gap:4px 10px;align-items:baseline;min-height:44px;padding:8px 0;color:inherit;text-decoration:none}
.lr-a b{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;text-decoration-thickness:1px}
.lr-a a:hover b{text-decoration-color:currentColor;color:#fff}

/* missione */
.mis{display:flex;flex-wrap:wrap;gap:28px 64px}
.mis .eyb{flex:0 0 200px;align-self:flex-start;margin-top:14px}
.mis-t{flex:1 1 640px;min-width:0;margin:0;font-weight:500;font-size:clamp(1.85rem,3.6vw,3.4rem);line-height:1.1;letter-spacing:-.038em;color:#6E8B88}
.mis-t span{color:#EAF4F3}
.mis-t .f-s{color:#8CFBEA;font-size:1.1em;letter-spacing:-.02em}

/* servizi: canali della rete */
.lanes{position:relative;margin-top:clamp(48px,6vw,80px);border-bottom:1px solid rgba(160,255,240,.09)}
.lanes::before{content:"";position:absolute;left:23px;top:0;bottom:0;width:1px;background:repeating-linear-gradient(180deg,rgba(124,245,230,.34) 0 4px,rgba(124,245,230,0) 4px 9px)}
.lane{--c:#5CF2DC;position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.12fr);gap:20px clamp(24px,3.4vw,56px);align-items:center;padding:clamp(32px,4vw,52px) 0;border-top:1px solid rgba(160,255,240,.09)}
.lane-n{position:relative;z-index:1;align-self:start;width:47px;height:47px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--c);background:#061719;color:var(--c);transition:box-shadow .4s}
.lane-n::after{content:"";position:absolute;left:50%;top:50%;width:57px;height:57px;margin:-28.5px 0 0 -28.5px;border-radius:50%;border:1px solid var(--c);opacity:.18}
.lane:hover .lane-n,.lane:focus-within .lane-n{box-shadow:0 0 0 6px rgba(255,255,255,.03),0 0 28px -4px var(--c)}
.lane h3{margin:0;font-weight:600;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1;letter-spacing:-.045em;color:#F2FBFA}
.lane-c{margin:12px 0 0;font-size:18px;line-height:1.35;font-weight:500;color:var(--c)}
.lane-d{margin:12px 0 0;font-size:16px;line-height:1.6;color:#A9C0BD;max-width:34rem}
.lane-a{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:22px}
.vz{position:relative;min-width:0;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#061416,#040D0F);padding:18px 18px 20px;transition:border-color .4s}
.lane:hover .vz{border-color:rgba(255,255,255,.16)}
.vz-h{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin:0 0 14px;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8EA9A5}
.vz-f{margin:14px 0 0;font-size:13px;line-height:1.45;color:#A9C0BD}
.st{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.st-ok{color:#8CFBEA;background:rgba(41,181,168,.14)}
.st-no{color:#FFB08A;background:rgba(255,138,80,.14)}
.st-w{color:#A9E6FF;background:rgba(103,212,255,.14)}
/* ticket */
.tk-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tk-cols span{display:block;padding:10px 12px;border-radius:12px;border:1px solid rgba(103,212,255,.22);background:rgba(103,212,255,.05);font-size:13px;line-height:1.3;color:#CFE0DD}
.tk-cols b{display:block;margin-bottom:2px;font-family:'Geist Mono',ui-monospace,monospace;font-weight:500;font-size:17px;color:#67D4FF}
.tk-tr{position:relative;height:44px;margin-top:10px;overflow-x:clip}
.tk-tr::before{content:"";position:absolute;left:16.666%;right:16.666%;top:50%;height:1px;background:repeating-linear-gradient(90deg,rgba(103,212,255,.6) 0 4px,rgba(103,212,255,0) 4px 8px)}
.tk-d{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;border:1px solid #67D4FF;background:#040D0F}
.tk-run{position:absolute;inset:0;transform:translateX(33.333%);transition:transform 1s cubic-bezier(.6,0,.2,1)}
.lane:hover .tk-run,.lane:focus-within .tk-run{transform:translateX(66.666%)}
.tk-chip{position:absolute;top:50%;left:16.666%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:#0B2633;border:1px solid #67D4FF;font-size:12.5px;font-weight:500;color:#E6F7FF;white-space:nowrap}
/* patch panel */
.pp{display:grid;grid-template-columns:84px minmax(0,1fr);gap:0 12px;align-items:center}
.pp-l{font-size:12.5px;color:#A9C0BD}
.pp-p{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;padding:7px;border-radius:8px;background:#0A1B1D;border:1px solid rgba(255,255,255,.09)}
.pp-p i{display:block;aspect-ratio:1.1;border-radius:2px;background:#020809;border:1px solid rgba(255,255,255,.16)}
.pp-p i.d,.pp-p i.v,.pp-p i.w{border-color:var(--pc);box-shadow:inset 0 0 0 2px rgba(0,0,0,.5)}
.pp-w{grid-column:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;padding:0 7px;height:30px}
.pp-w i{justify-self:center;width:2px;height:100%;border-radius:2px;background:var(--pc,transparent);opacity:.75;transition:opacity .4s}
.lane:hover .pp-w i{opacity:1}
.pp .d{--pc:#5CF2DC}.pp .v{--pc:#C8F07A}.pp .w{--pc:#DCE9FF}
.lg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:12.5px;color:#A9C0BD}
.lg span{display:inline-flex;align-items:center;gap:7px}
.lg i{width:12px;height:3px;border-radius:2px}
/* voce */
.rt{display:grid;grid-template-columns:auto minmax(14px,1fr) auto minmax(14px,1fr) auto;align-items:center}
.rt-n{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:8px 12px;border-radius:12px;border:1px solid rgba(200,240,122,.3);background:rgba(200,240,122,.06);font-size:13px;line-height:1.3;color:#E7F5D2}
.rt-n svg{color:#C8F07A;flex:none}
.rt-n.hl{border-color:#C8F07A;background:rgba(200,240,122,.14);color:#fff}
.rt-c{display:block;height:1px;background:repeating-linear-gradient(90deg,rgba(200,240,122,.75) 0 4px,rgba(200,240,122,0) 4px 8px)}
.rt-f{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed rgba(200,240,122,.25)}
.rt-k{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#A9C0BD;margin-right:auto}
/* cloud */
.sy-r{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(40px,.7fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13.5px;color:#DDEFEC}
.vz-h + .sy-r{border-top:0}
.sy-r svg{color:#DCE9FF}
.sy-b{display:block;height:4px;border-radius:4px;background:rgba(220,233,255,.12);overflow:hidden}
.sy-b i{display:block;height:100%;background:#DCE9FF;transform-origin:left center;transform:scaleX(.86);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.lane:hover .sy-b i{transform:scaleX(1)}
/* sicurezza */
.pm{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(22px,1fr) 22px minmax(14px,.6fr) auto;align-items:center;row-gap:12px}
.pm-l{grid-column:1;font-size:13px;line-height:1.3;color:#DDEFEC;padding-right:10px}
.pm-w{grid-column:2;position:relative;display:block;height:1px}
.pm-w.no{background:repeating-linear-gradient(90deg,rgba(255,122,122,.85) 0 4px,rgba(255,122,122,0) 4px 8px)}
.pm-w.no svg{position:absolute;right:-3px;top:-6px;color:#FF8C8C}
.pm-w.ok,.pm-r.ok{background:#5CF2DC}
.pm-r{grid-column:4;display:block;height:1px}
.pm-s{grid-column:5;justify-self:start;margin-left:10px}
.pm-wall{grid-column:3;grid-row:1/4;align-self:stretch;position:relative}
.pm-wall svg{position:absolute;inset:-6px 0;width:100%;height:calc(100% + 12px)}
.pm-cap{grid-column:2/6;justify-self:center;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#F6C453}
/* progetti */
.bp{position:relative;aspect-ratio:520/210;border-radius:14px;overflow:hidden;border:1px solid rgba(160,255,240,.12);background:linear-gradient(rgba(124,245,230,.05) 1px,rgba(0,0,0,0) 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(124,245,230,.05) 1px,rgba(0,0,0,0) 1px) 0 0/22px 22px,#041214}
.bp svg{position:absolute;inset:0;width:100%;height:100%}
.bp-l{position:absolute;transform:translate(-50%,-50%);padding:2px 7px;border-radius:6px;background:rgba(4,18,20,.86);font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:#A9DCD4;white-space:nowrap}

/* ecosistema */
.eco-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(48px,6vw,72px)}
.dial{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:640/600;container-type:inline-size}
@container (max-width:500px){.en{font-size:13px;padding:0 12px;gap:7px}}
.dial svg{position:absolute;inset:0;overflow:visible}
.eco .eg{transition:opacity .6s ease}
.eco[data-sel="hd"] .eg,.eco[data-sel="sw"] .eg,.eco[data-sel="fg"] .eg,.eco[data-sel="lv"] .eg{opacity:.13}
.eco[data-sel="hd"] .eg.k-hd,.eco[data-sel="sw"] .eg.k-sw,.eco[data-sel="fg"] .eg.k-fg,.eco[data-sel="lv"] .eg.k-lv{opacity:1}
.hd-spokes{opacity:0;transition:opacity .6s ease}
.eco[data-sel="hd"] .hd-spokes{opacity:1}
.orbit-rot,.spk-rot{transform-box:view-box;transform-origin:320px 300px}
.eco[data-sel="hd"] .orbit-rot{animation:spin 60s linear infinite}
.eco[data-sel="sw"] .spk-rot{animation:spin 120s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.needle{opacity:0;stroke:#8CFBEA;transform-box:view-box;transform-origin:320px 300px;transform:rotate(-94.5deg);transition:transform .9s cubic-bezier(.6,0,.2,1),opacity .4s,stroke .4s}
.eco[data-sel="hd"] .needle{opacity:1;stroke:#67D4FF;transform:rotate(-94.5deg)}
.eco[data-sel="sw"] .needle{opacity:1;stroke:#F6C453;transform:rotate(175.5deg)}
.eco[data-sel="fg"] .needle{opacity:1;stroke:#FF8A50;transform:rotate(-4.5deg)}
.eco[data-sel="lv"] .needle{opacity:1;stroke:#A7A3FF;transform:rotate(85.5deg)}
.pke{display:none;fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:.1 140;stroke-dashoffset:.1;animation:pk 3.6s linear infinite}
.eco[data-sel="hd"] .pke.e-hd,.eco[data-sel="sw"] .pke.e-sw,.eco[data-sel="fg"] .pke.e-fg,.eco[data-sel="lv"] .pke.e-lv{display:inline}
.int-dot{fill:#BFFFF5;transition:fill .5s}
.eco[data-sel="fg"] .int-dot{fill:#FF8A50}
.hping{fill:none;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.eco[data-sel="hd"] .hp-hd,.eco[data-sel="sw"] .hp-sw,.eco[data-sel="fg"] .hp-fg,.eco[data-sel="lv"] .hp-lv{animation:hping 2.4s ease-out infinite}
@keyframes hping{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.elab{position:absolute;z-index:3;transform:translate(-50%,-50%);font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;color:#B9D3CF;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s}
.eco[data-sel="all"] .elab,.eco[data-sel="fg"] .elab-fg,.eco[data-sel="lv"] .elab-lv{opacity:1}
.en{position:absolute;z-index:4;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#061113;color:#EAF4F3;font-family:inherit;font-size:14.5px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:opacity .4s,border-color .3s,background-color .3s,box-shadow .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
.en:hover{transform:translate(-50%,-50%) scale(1.05);border-color:rgba(255,255,255,.42)}
.en-dot{width:8px;height:8px;border-radius:50%;flex:none}
.eco[data-sel="hd"] .en:not(.en-hd),.eco[data-sel="sw"] .en:not(.en-sw),.eco[data-sel="fg"] .en:not(.en-fg),.eco[data-sel="lv"] .en:not(.en-lv){opacity:.7}
.en-hd[aria-pressed="true"]{border-color:#67D4FF;background:#0A2430;box-shadow:0 0 0 5px rgba(103,212,255,.12),0 0 46px rgba(103,212,255,.45)}
.en-sw[aria-pressed="true"]{border-color:#F6C453;background:#2C220A;box-shadow:0 0 0 5px rgba(246,196,83,.12),0 0 46px rgba(246,196,83,.4)}
.en-fg[aria-pressed="true"]{border-color:#FF8A50;background:#30160A;box-shadow:0 0 0 5px rgba(255,138,80,.12),0 0 46px rgba(255,138,80,.4)}
.en-lv[aria-pressed="true"]{border-color:#A7A3FF;background:#181638;box-shadow:0 0 0 5px rgba(167,163,255,.14),0 0 46px rgba(167,163,255,.45)}
.enc{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:22.5%;aspect-ratio:1;border-radius:50%;border:0;padding:0;background:transparent;color:#F2FBFA;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;transition:background-color .4s,box-shadow .4s}
.enc:hover{background:radial-gradient(circle,rgba(41,181,168,.24),rgba(41,181,168,0) 70%)}
.enc[aria-pressed="true"]{box-shadow:0 0 0 1px rgba(124,245,230,.55),0 0 60px rgba(41,181,168,.35)}
.enc-t{font-size:clamp(12px,1.2vw,15px);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.enc-s{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#93B3AE}
.enc[aria-pressed="true"] .enc-s{color:#8CFBEA}
.lgd{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;margin:20px 0 0;padding:0;list-style:none;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#93B3AE}
.lgd li{display:inline-flex;align-items:center;gap:9px}
.panel:focus{outline:none}
.panel{position:relative;min-width:0;min-height:700px;display:flex;flex-direction:column;padding:clamp(26px,3vw,44px);border-radius:28px;border:1px solid rgba(160,255,240,.12);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));container-type:inline-size}
.pfade{display:flex;flex-direction:column;flex:1;animation:pfade .6s cubic-bezier(.2,.8,.2,1)}
@keyframes pfade{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:none}}
.pk-k{margin:0;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.pk-h{margin:18px 0 0;font-weight:600;font-size:clamp(2rem,3.2vw,3rem);line-height:1;letter-spacing:-.045em;color:#F2FBFA}
.pk-n{margin:16px 0 0;font-weight:600;font-size:clamp(2.6rem,4.4vw,4.2rem);line-height:.92;letter-spacing:-.055em;color:#fff}
.pk-logo{line-height:0}
.pk-logo img{display:block;max-width:100%;height:auto}
.pk-s{margin:12px 0 0;font-size:clamp(1.4rem,2.1vw,1.95rem);line-height:1.12}
.pk-d{margin:16px 0 0;color:#A9C0BD;font-size:16px;line-height:1.55;max-width:36rem}
.pfor{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:#CFE0DD}
.pfor b{margin-right:10px;font-family:'Geist Mono',ui-monospace,monospace;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.feat{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:9px 22px}
.feat li{position:relative;padding-left:20px;font-size:15px;line-height:1.45;color:#CFE0DD}
.feat li::before{content:"";position:absolute;left:1px;top:.5em;width:7px;height:7px;transform:rotate(45deg);border-radius:1px;background:var(--c)}
.mini{margin-top:22px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(1,6,7,.55);padding:14px 18px 16px}
.mini-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8EA9A5}
.dns{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid rgba(255,255,255,.06);font-family:'Geist Mono',ui-monospace,monospace;font-size:12.5px;color:#CFE0DD;overflow-wrap:anywhere}
.mini-h + .dns{border-top:0}
.tun{display:grid;grid-template-columns:minmax(0,auto) minmax(40px,1fr) minmax(0,auto);gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13.5px;color:#CFE0DD}
.mini-h + .tun{border-top:0}
.tun-l{position:relative;height:1px;background:repeating-linear-gradient(90deg,rgba(246,196,83,.6) 0 4px,rgba(246,196,83,0) 4px 8px)}
.tun-l i{position:absolute;left:0;right:7px;top:-3px;height:7px;animation:tun 2.8s ease-in-out infinite alternate}
.tun-l i::after{content:"";position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:#F6C453}
@keyframes tun{to{transform:translateX(100%)}}
.chn{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;margin-top:14px}
.chb{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;padding:7px 10px;border-radius:8px;border:1px solid rgba(167,163,255,.42);color:#D3D1FF;background:rgba(167,163,255,.08)}
.chl{width:16px;height:1px;background:rgba(167,163,255,.6)}
.pact{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.osel{margin-top:26px}
.osel-l{margin:0 0 6px}
.orow{--c:#8CFBEA;display:grid;grid-template-columns:116px 104px minmax(0,1fr) 20px;gap:14px;align-items:center;width:100%;min-height:62px;padding:12px 10px;border:0;border-top:1px solid rgba(160,255,240,.09);background:transparent;color:#EAF4F3;text-align:left;font-family:inherit;cursor:pointer;transition:background-color .3s,border-color .3s}
.orow:last-child{border-bottom:1px solid rgba(160,255,240,.09)}
.orow:hover{background:rgba(255,255,255,.03)}
.orow[aria-pressed="true"]{background:rgba(255,255,255,.04);box-shadow:inset 3px 0 0 var(--c)}
.orow-k{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.orow-n{font-weight:600;font-size:17px;letter-spacing:-.01em}
.orow-d{font-size:14px;color:#A9C0BD;line-height:1.4}
.orow svg{color:#93B3AE;transition:transform .3s,color .3s}
.orow:hover svg{transform:translateX(3px);color:#fff}
.eco:not([data-sel="all"]) .osel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:18px;border-top:1px solid rgba(160,255,240,.09)}
.eco:not([data-sel="all"]) .osel-l{flex-basis:100%}
.eco:not([data-sel="all"]) .orow{display:inline-flex;align-items:center;gap:9px;width:auto;min-height:44px;padding:0 15px;border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:none}
.eco:not([data-sel="all"]) .orow::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.eco:not([data-sel="all"]) .orow-k,.eco:not([data-sel="all"]) .orow-d,.eco:not([data-sel="all"]) .orow svg{display:none}
.eco:not([data-sel="all"]) .orow-n{font-size:14.5px;font-weight:500}
.eco:not([data-sel="all"]) .orow[aria-pressed="true"]{border-color:var(--c);background:rgba(255,255,255,.07)}
@container (max-width:440px){
.orow{grid-template-columns:minmax(0,1fr) 20px;gap:4px 12px}
.orow-k,.orow-n,.orow-d{grid-column:1}
.orow svg{grid-column:2;grid-row:1/4}
}

/* perché */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:clamp(44px,5.5vw,72px)}
.cmp-c{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(22px,2.6vw,34px);border-radius:24px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.015)}
.cmp-c.us{border-color:rgba(124,245,230,.3);background:linear-gradient(180deg,rgba(41,181,168,.11),rgba(41,181,168,.02))}
.cmp-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0}
.cmp-h b{font-weight:600;font-size:clamp(1.25rem,1.8vw,1.55rem);letter-spacing:-.03em;color:#F2FBFA}
.cmp-l{list-style:none;margin:18px 0 0;padding:0}
.cmp-l li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:46px;padding:6px 0;border-top:1px solid rgba(255,255,255,.07);font-size:15px;line-height:1.35;color:#C4D6D3}
.cmp-l li:first-child{border-top:0}
.cmp-l svg{color:#7F9C98}
.cmp-l .f-m{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#93B3AE;white-space:nowrap}
.cmp-one{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px;padding:20px;border-radius:18px;border:1px solid rgba(124,245,230,.32);background:rgba(3,12,13,.6)}
.cmp-dots{display:flex;gap:6px}
.cmp-dots i{width:10px;height:10px;border-radius:50%}
.cmp-one b{font-weight:600;font-size:17px;color:#F2FBFA}
.cmp-tel{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em;color:#8CFBEA;text-decoration:none}
.cmp-tel:hover{color:#fff}
.cmp-f{margin:auto 0 0;padding-top:18px;font-size:15px;line-height:1.55;color:#A9C0BD}
.rsn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);margin:clamp(36px,4.5vw,56px) 0 0;padding:0;list-style:none}
.rsn li{padding:20px 0 24px;border-top:1px solid rgba(160,255,240,.1)}
.rsn h3{margin:0;font-weight:600;font-size:clamp(1.15rem,1.5vw,1.35rem);letter-spacing:-.025em;line-height:1.2;color:#F2FBFA}
.rsn p{margin:8px 0 0;font-size:15px;line-height:1.55;color:#A9C0BD}

/* chi siamo */
.ab-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,5vw,80px);align-items:center}
.amb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin:30px 0 0}
.amb div{padding-top:12px;border-top:1px solid rgba(160,255,240,.1)}
.amb dt{font-weight:600;font-size:15.5px;color:#EAF4F3}
.amb dd{margin:4px 0 0;font-size:14px;line-height:1.45;color:#A9C0BD}
.rings{margin:0}
.rings-a{position:relative;aspect-ratio:640/440;border-radius:28px;overflow:hidden;border:1px solid rgba(160,255,240,.12);background:radial-gradient(64% 70% at 50% 50%,rgba(41,181,168,.15),rgba(41,181,168,0) 72%),#061315}
.rings-a svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rl{position:absolute;transform:translate(-50%,-50%);padding:2px 7px;border-radius:999px;background:rgba(6,19,21,.84);font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:#BFE3DD;white-space:nowrap}
.rl-k{font-size:13px;color:#F2FBFA}
.rl-m{color:#BFE3DD}
.rl-m b{font-weight:500;color:#F2FBFA}
.rl-r{transform:translate(0,-50%)}
@media (max-width:560px){.rl-m{font-size:11px;padding:2px 5px;letter-spacing:.02em}}
.rings figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:#A9C0BD}
.pkr{fill:none;stroke:#F2FFFD;stroke-width:4;stroke-linecap:round;stroke-dasharray:.1 99.9;animation:pkr 16s linear infinite}
@keyframes pkr{to{stroke-dashoffset:-100}}
.done-g{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start;margin-top:clamp(64px,8vw,112px)}
.h3s{margin:0;font-weight:600;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.035em;line-height:1.1;color:#EAF4F3}
.done{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1080px){.done{grid-template-columns:repeat(2,minmax(0,1fr))}}
.done li{--c:#5CF2DC;padding:22px;border-radius:20px;border:1px solid rgba(160,255,240,.1);background:rgba(255,255,255,.02)}
.done li svg{color:var(--c)}
.done h4{margin:14px 0 0;font-weight:600;font-size:18px;letter-spacing:-.02em;color:#F2FBFA}
.done p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:#A9C0BD}
.done li.now{border-color:rgba(124,245,230,.32);background:linear-gradient(180deg,rgba(41,181,168,.1),rgba(41,181,168,.02))}
.pdots{display:flex;gap:6px;margin-top:12px}
.pdots i{width:8px;height:8px;border-radius:50%}

/* contatti */
.ct-h{text-align:center;max-width:960px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.ct-g{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:20px;margin-top:clamp(48px,6vw,80px);align-items:start}
/* sotto i 980px le schede seguono l'ordine del DOM (prima «Chiamaci», poi il modulo): niente order, così l'ordine del Tab è quello visivo */
.card{min-width:0;container-type:inline-size;border-radius:26px;border:1px solid rgba(160,255,240,.12);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));padding:clamp(22px,2.8vw,40px)}
.bigtel{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-weight:600;font-size:clamp(1.5rem,2.8vw,2.4rem);letter-spacing:-.035em;color:#F2FBFA;text-decoration:none}
.bigtel:hover{color:#8CFBEA}
.ep{margin:22px 0 0;padding:0}
.ep-r{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:center;padding:8px 0;border-top:1px solid rgba(160,255,240,.08)}
.ep-r dt{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#93B3AE}
.ep-r dd{margin:0;font-size:16px;line-height:1.45;color:#EAF4F3;overflow-wrap:break-word}
@container (max-width:440px){.ep-r{grid-template-columns:minmax(0,1fr);gap:0;padding:12px 0 4px}}
.ct-cli{margin:18px 0 0;max-width:40rem;font-size:15px;line-height:1.55;color:#A9C0BD}
.ct-cli .lnk{display:inline;padding-block:12px}
.em-s{display:none}
.lnk{display:inline-flex;align-items:center;min-height:44px;color:#E4F6F3;text-decoration:underline;text-decoration-color:rgba(124,245,230,.45);text-underline-offset:5px;text-decoration-thickness:1px;transition:color .2s,text-decoration-color .2s}
.lnk:hover{color:#fff;text-decoration-color:#8CFBEA}
.cli{margin-top:26px;padding:18px 20px;border-radius:18px;border:1px solid rgba(160,255,240,.12);background:rgba(41,181,168,.05)}
.cli p{margin:0;font-weight:600;font-size:16px;color:#F2FBFA}
.cli div{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:4px}
.cli .cli-d{margin:4px 0 0;font-weight:400;font-size:14px;line-height:1.5;color:#A9C0BD}
.frm{display:flex;flex-direction:column;gap:20px}
.frm-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.frm-h h3{margin:0;font-weight:600;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.035em;color:#F2FBFA}
.frm-body{display:flex;flex-direction:column;gap:20px}
.frm fieldset{border:0;margin:0;padding:0;min-width:0}
.frm legend{padding:0;font-size:14px;color:#B3C8C5}
.chip-gl{margin:14px 0 0;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#93B3AE}
.chip-g{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{--c:var(--a);display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.025);color:#C4D6D3;font-family:inherit;font-size:14px;cursor:pointer;transition:border-color .25s,background-color .25s,color .25s}
.chip-w{position:relative;display:inline-flex}
.chip-in{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip-in:hover + .chip{border-color:rgba(124,245,230,.45);color:#fff}
.au .chip-in:focus-visible + .chip{outline:2px solid #8CFBEA;outline-offset:3px}
.chip-b{width:15px;height:15px;border-radius:5px;border:1px solid rgba(255,255,255,.4);display:inline-flex;align-items:center;justify-content:center;color:#021514;transition:background-color .25s,border-color .25s}
.chip-b svg{opacity:0;transition:opacity .2s}
.chip-in:checked + .chip{border-color:var(--c);background:rgba(255,255,255,.07);color:#fff}
.chip-in:checked + .chip .chip-b{background:var(--c);border-color:var(--c)}
.chip-in:checked + .chip .chip-b svg{opacity:1}
.chosen{margin:12px 0 0;font-size:13.5px;color:#A9C0BD}
.chosen b{color:#EAF4F3;font-weight:500}
.fg2{display:flex;flex-wrap:wrap;gap:16px}
.flab{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#B3C8C5;flex:1 1 220px;min-width:0}
.flab-i{display:flex;flex-direction:column;gap:8px}
.req{color:#8CFBEA}
.opt{color:#93B3AE}
.in{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.42);background:rgba(1,6,7,.6);color:#F2FBFA;font:inherit;font-size:16px;transition:border-color .25s,box-shadow .25s,background-color .25s}
.in::placeholder{color:#7F9C98}
.in:hover{border-color:rgba(255,255,255,.56)}
.in:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 4px rgba(41,181,168,.2);background:rgba(2,12,13,.85)}
.in[aria-invalid="true"]{border-color:#FF8F7E;box-shadow:0 0 0 3px rgba(255,120,100,.14)}
.ferr{display:flex;align-items:flex-start;gap:7px;margin:0;font-size:13px;line-height:1.4;color:#FFAA99}
.ferr svg{flex:none;margin-top:2px}
.pv{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding-top:10px;font-size:14px;line-height:1.5;color:#A9C0BD;cursor:pointer}
.pv input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--a)}
.pv a{color:#E4F6F3;text-decoration:underline;text-underline-offset:3px}
.fsum{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,143,126,.4);background:rgba(255,120,100,.08);font-size:14px;line-height:1.45;color:#FFC2B6}
.fsum > svg{flex:none;margin-top:2px}
.frm-act{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.frm[data-sent="true"] .lb-send,.frm[data-sent="false"] .lb-new,.frm[data-sent="true"] .frm-req{display:none}
.frm[data-sent="true"] .frm-sub{background:rgba(255,255,255,.04);color:#EAF4F3;border-color:rgba(255,255,255,.14);box-shadow:none}
.frm[data-sent="true"] .frm-sub:hover{background:rgba(255,255,255,.08);border-color:rgba(124,245,230,.5);color:#fff}
.okbox{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:300px;justify-content:center}
.okbox h4{margin:0;font-weight:600;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.035em;color:#F2FBFA}
.okbox p{margin:0;font-size:16px;line-height:1.55;color:#A9C0BD;max-width:34rem}
.okbox p b{color:#EAF4F3;font-weight:500}
.ok-i{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(41,181,168,.16);border:1px solid rgba(124,245,230,.5);color:#8CFBEA}
.note{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;color:#93B3AE}

/* footer */
.ftr{position:relative;border-top:1px solid rgba(160,255,240,.08);background:#020607;overflow:hidden;isolation:isolate}
/* orizzonte: ancorato al bordo superiore della striscia in basso, così resta sopra i dati societari
   qualunque sia la loro altezza; più piatto del design per non attraversare il testo */
.fbz{position:relative}
.fhz{position:absolute;left:50%;top:-62px;width:max(1500px,300%);height:1200px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(28% 5% at 50% 0%,rgba(92,242,220,.18),rgba(92,242,220,0)),#020607;box-shadow:0 -1px 0 0 rgba(160,255,240,.4),0 -22px 80px -14px rgba(41,181,168,.45),0 -110px 260px -40px rgba(41,181,168,.26);pointer-events:none;z-index:-1}
.fcols{display:flex;flex-wrap:wrap;gap:40px 56px;justify-content:space-between}
.fh{margin:0 0 6px;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#93B3AE}
.fl{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:#C4D6D3;text-decoration:none;font-size:14.5px;transition:color .2s}
.fl:hover{color:#fff}
.fl i{width:7px;height:7px;border-radius:50%}
.fbot{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:center;padding-block:14px 22px;font-size:13px;color:#93B3AE}
.fbot .fl{font-size:13px}
/* dati societari: vanno a capo nella loro colonna, i link restano a destra */
.fleg{flex:1 1 34rem;max-width:58rem;line-height:1.6}

/* responsive */
@media (min-width:1180px){.mnav{display:none}}
@media (min-width:641px){.mnav{left:auto;width:min(400px,100%)}}
@media (min-width:1280px){.hnav .nl-tel{display:inline-flex}}
@media (min-width:1180px){.logo{flex:none}.hnav{min-width:0;flex-wrap:wrap;justify-content:center}}
@media (max-width:1179px){.hnav{display:none}.hact .mbtn{display:inline-flex}.hdr-in{border-radius:24px}}
@media (max-width:1100px){.lane{grid-template-columns:48px minmax(0,1fr)}.lane .vz{grid-column:2}}
@media (max-width:1080px){.ab-g,.done-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:954px){.panel{min-height:0}}
@media (max-width:980px){
.rsn{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
.hero-g{grid-template-columns:minmax(0,1fr);row-gap:0}
.hero-tx{display:contents}
.h1{margin-top:20px}
.netcol{order:1;justify-self:center;width:100%;max-width:780px;margin-top:32px;display:flex;flex-direction:column}
.netcol .stage{order:-1}
.lchips{margin:18px 0 14px}
.who{order:2}
.cmp{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){.fhz{width:max(1100px,420%);top:-52px}.who{display:none}}
@media (max-width:640px){
.hdr{padding:10px 10px 0}
.hdr-in{padding:6px 6px 6px 18px;gap:8px}
.logo{gap:10px}
.logo img{height:32px}
.hact{gap:6px}
.hact .hsup{display:none}
.hact .hcli{padding:0 14px;font-size:13.5px}
.lbox{grid-template-columns:minmax(0,1fr)}
.rt{grid-template-columns:minmax(0,1fr);justify-items:start;row-gap:0}
.rt-c{width:1px;height:14px;margin-left:22px;background:repeating-linear-gradient(180deg,rgba(200,240,122,.75) 0 4px,rgba(200,240,122,0) 4px 8px)}
.done{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
.lanes::before{display:none}
.lane{grid-template-columns:minmax(0,1fr)}
.lane .vz{grid-column:1}
.hs-x,.hero-cta .btn-g,.rl-s,.elab{display:none}
.hero{padding-top:96px}
.h1{margin-top:20px;font-size:clamp(2.3rem,10.6vw,2.75rem)}
.hsub{margin-top:18px}
.hero-cta{margin-top:24px}
.netcol{margin-top:26px}
.rsn{grid-template-columns:minmax(0,1fr)}
.amb{grid-template-columns:minmax(0,1fr)}
.en{font-size:12.5px;padding:0 11px;gap:6px}
.en-dot{width:6px;height:6px}
.enc-s{display:none}
.pp{grid-template-columns:minmax(0,1fr)}
.pp-l{margin:6px 0}
.pp-w{grid-column:1}
.tk-cols span{padding:8px;overflow-wrap:anywhere;hyphens:auto}
.sy-r{grid-template-columns:20px minmax(0,1fr) auto}
.sy-b{display:none}
.pm{grid-template-columns:minmax(min-content,1.4fr) minmax(16px,1fr) 22px 10px auto}
.pm-l{padding-right:6px}
.cmp-l li{grid-template-columns:22px minmax(0,1fr);row-gap:0}
.cmp-l .f-m{grid-column:2}
}
@media (max-width:480px){
.pact .btn-c,.ct-h .btn,.hero-cta .btn,.frm-act .btn,.pcta .btn{white-space:normal;max-width:100%;min-height:48px;padding-block:10px;line-height:1.25;text-align:center}
}
@media (max-width:420px){.em-l{display:none}.em-s{display:inline}}
@media (max-width:400px){.hdr-in{gap:6px}}
@media (max-width:339px){.logo img{height:36px;translate:none}}
@media (max-width:380px){.tk-cols span{font-size:12px;padding:8px 6px}.pm-cap{grid-column:1/6}}
/* schema della rete sui telefoni: solo le etichette esterne e quelle dello strato scelto.
   Vale sotto i 560px di finestra, come nel design, e anche quando lo schema stesso è stretto
   (telefono in orizzontale, finestra bassa), dove altrimenti le etichette si sovrapporrebbero. */
@media (max-width:560px){
.lb-in,.nlb-x,.core-l span{display:none}
.net[data-l="rete"] .lb-in.l-rete,.net[data-l="voce"] .lb-in.l-voce,.net[data-l="cloud"] .lb-in.l-cloud,.net[data-l="sic"] .lb-in.l-sic,.net[data-l="ass"] .lb-in.l-ass{display:inline-flex}
.nlb{font-size:12px;padding:2px 7px}
/* etichette che qui si toccherebbero: piccoli spostamenti rispetto al nodo */
.nlb-ms{left:43.82%!important;transform:translate(-100%,-50%)}
.nlb-pz{left:36.4%!important;top:63%!important;transform:translate(-100%,0)}
.nlb-cv{left:47.5%!important;top:74.5%!important}
.nlb-sm{left:82%!important;top:75.5%!important}
.nlb-sv{top:31.2%!important}
.nlb-nas{top:42.6%!important}
}
@container (max-width:420px){
.lb-in,.nlb-x,.core-l span{display:none}
.net[data-l="rete"] .lb-in.l-rete,.net[data-l="voce"] .lb-in.l-voce,.net[data-l="cloud"] .lb-in.l-cloud,.net[data-l="sic"] .lb-in.l-sic,.net[data-l="ass"] .lb-in.l-ass{display:inline-flex}
.nlb{font-size:12px;padding:2px 7px}
/* etichette che qui si toccherebbero: piccoli spostamenti rispetto al nodo */
.nlb-ms{left:43.82%!important;transform:translate(-100%,-50%)}
.nlb-pz{left:36.4%!important;top:63%!important;transform:translate(-100%,0)}
.nlb-cv{left:47.5%!important;top:74.5%!important}
.nlb-sm{left:82%!important;top:75.5%!important}
.nlb-sv{top:31.2%!important}
.nlb-nas{top:42.6%!important}
}
/* hero a due colonne stretto (circa 860-940px): qualche pixel di respiro tra etichette vicine */
@container (min-width:421px) and (max-width:470px){.nlb-ms{top:6.2%!important}.nlb-bk{top:15.7%!important}.nlb-spw{left:68.2%!important}}
@container (min-width:421px) and (max-width:500px){.nlb-pz{top:61.8%!important}}
/* schermi da 320px: etichette appena più piccole; «Centralino VoIP» si stacca dal nodo Trunk SIP */
@container (max-width:300px){.nlb{font-size:11px;padding:1px 6px}.nlb-cv{left:48.5%!important}.nlb-sm{left:83.5%!important}}
/* touch: le micro-visualizzazioni mostrano il percorso senza hover */
@media (hover:none){
.tk-run{transform:translateX(66.666%)}
.sy-b i{transform:scaleX(1)}
.pp-w i{opacity:1}
}
@keyframes tkrun{from{transform:translateX(0)}to{transform:translateX(66.666%)}}
@keyframes syb{from{transform:scaleX(.2)}to{transform:scaleX(1)}}
@supports (animation-timeline:view()){
@media (hover:none) and (prefers-reduced-motion:no-preference){
.tk-run{animation:tkrun linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
.sy-b i{animation:syb linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.au *,.au *::before,.au *::after{animation:none!important;transition:none!important}
.hit{opacity:.7}
}

/* ===== produzione: stati pilotati dal JS ===== */
/* animazioni infinite in pausa quando il blocco è fuori schermo (IntersectionObserver) */
[data-off] :is(.pk,.hit,.cpulse,.orbit-rot,.spk-rot,.pke,.hping,.tun-l i,.pkr,.nf-off,.nf-ping){animation-play-state:paused!important}

/* modulo: invio in corso, errori del server, campo trappola */
.lb-busy{display:none}
.frm[aria-busy="true"] .lb-busy{display:inline}
.frm[aria-busy="true"] .lb-send,.frm[aria-busy="true"] .frm-sub .ar{display:none}
.frm-sub[aria-disabled="true"]{cursor:progress;opacity:.72;transform:none}
.fsum p{margin:0}
.fsum a{color:#FFE4DD;text-decoration:underline;text-decoration-color:rgba(255,194,182,.6);text-underline-offset:3px}
.fsum a:hover{color:#fff;text-decoration-color:currentColor}
.trap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* piè di pagina: sezioni del sito, destinazione del link Menu senza JavaScript.
   Quando site.js trasforma il link in pulsante la nasconde (hidden): il piè di pagina torna quello del design. */
.fnav{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:10px}

/* ===== pagine interne: testata comune ===== */
.ptop{position:relative;margin-top:-78px;padding:clamp(150px,15vw,200px) 0 clamp(44px,5vw,72px);overflow:hidden;isolation:isolate;background:radial-gradient(60% 90% at 82% 0%,#082A2C 0%,#041516 48%,#03090A 82%);border-bottom:1px solid rgba(160,255,240,.07)}
.ptop-fx{position:absolute;right:-120px;top:-60px;z-index:-1;width:min(620px,70vw);height:auto;opacity:.9;pointer-events:none}
.ph1{margin:20px 0 0;font-weight:600;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:.98;letter-spacing:-.05em;color:#F2FBFA}
.ph1 .f-s{color:#8CFBEA;font-size:1.08em;letter-spacing:-.02em;padding-right:.05em}
.plead{margin:24px 0 0;max-width:44rem}
/* pulsanti delle pagine interne: come .hero-cta ma senza le regole della home che nascondono i secondari sui telefoni */
.pcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.pmeta{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px}
.ph-t{font-family:'Geist Mono',ui-monospace,monospace;font-size:.8em;letter-spacing:.02em;color:#F6C453;background:rgba(246,196,83,.1);padding:1px 6px;border-radius:6px;white-space:nowrap}

/* ===== informativa privacy ===== */
.doc-g{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;padding-block:clamp(48px,6vw,88px) clamp(88px,10vw,140px)}
.toc{position:sticky;top:104px;min-width:0}
.toc ol{list-style:none;margin:12px 0 0;padding:0}
.toc a{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:baseline;min-height:36px;padding:6px 0;color:#C4D6D3;text-decoration:none;font-size:14.5px;line-height:1.35;transition:color .2s}
.toc a span{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:#7F9C98}
.toc a:hover{color:#fff}
.prose{min-width:0;max-width:70ch;font-size:17px;line-height:1.7;color:#BFD2CF}
.prose > section + section{margin-top:44px;padding-top:44px;border-top:1px solid rgba(160,255,240,.08)}
.prose h2{display:flex;align-items:baseline;gap:14px;margin:0;font-weight:600;font-size:clamp(1.45rem,2.2vw,1.9rem);line-height:1.15;letter-spacing:-.03em;color:#F2FBFA}
.doc-n{flex:none;font-family:'Geist Mono',ui-monospace,monospace;font-weight:500;font-size:13px;letter-spacing:.12em;color:#8CFBEA}
.prose h3{margin:28px 0 0;font-weight:600;font-size:1.1rem;line-height:1.3;letter-spacing:-.01em;color:#EAF4F3}
.prose p,.prose ul{margin:14px 0 0}
.prose ul{list-style:none;padding:0}
.prose li{position:relative;padding-left:22px}
.prose li + li{margin-top:8px}
.prose li::before{content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px;transform:rotate(45deg);border-radius:1px;background:#5CF2DC}
.prose b,.prose strong{font-weight:600;color:#EAF4F3}
.prose a{color:#E4F6F3;text-decoration:underline;text-decoration-color:rgba(124,245,230,.5);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.prose a:hover{color:#fff;text-decoration-color:#8CFBEA}
.kv{margin:18px 0 0;padding:0}
.kv div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid rgba(160,255,240,.08)}
.kv div:first-child{border-top:0}
.kv dt{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#93B3AE;padding-top:4px}
.kv dd{margin:0;color:#EAF4F3;overflow-wrap:anywhere}
.fin{display:grid;gap:12px;margin-top:20px}
.fin-c{padding:20px 22px;border-radius:18px;border:1px solid rgba(160,255,240,.12);background:rgba(255,255,255,.02)}
.prose .fin-c h3{margin:0;font-size:1.05rem}
.fin-c .kv{margin-top:10px}
.fin-c .kv div{grid-template-columns:130px minmax(0,1fr);font-size:15.5px;line-height:1.55;padding:8px 0}
.box{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:18px 20px;border-radius:18px;border:1px solid rgba(124,245,230,.3);background:linear-gradient(180deg,rgba(41,181,168,.11),rgba(41,181,168,.02));color:#DDEFEC}
.box svg{flex:none;margin-top:4px;color:#8CFBEA}
.box p{margin:0}
.doc-end{margin-top:56px;padding:24px;border-radius:22px;border:1px solid rgba(160,255,240,.12);background:rgba(255,255,255,.02)}
.doc-end p{margin:0}
.doc-end .lnk{font-size:16px}

/* ===== 404 ===== */
.nf{position:relative;margin-top:-78px;padding:clamp(130px,13vw,170px) 0 clamp(80px,9vw,128px);overflow:hidden;isolation:isolate;background:radial-gradient(60% 70% at 72% 50%,#082A2C 0%,#041516 48%,#03090A 82%)}
.nf-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.nf-viz{position:relative;width:100%;max-width:600px;margin-inline:auto;aspect-ratio:600/460}
.nf-viz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nf-off{animation:nfoff 2.6s ease-in-out infinite}
@keyframes nfoff{0%,100%{opacity:1}50%{opacity:.35}}
.nf-ping{fill:none;stroke:#FF8A50;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:hping 2.6s ease-out infinite}
.nf-alt{margin:26px 0 0;font-size:15px;line-height:1.55;color:#A9C0BD}
.nf-alt .lnk{display:inline;padding-block:12px}

/* ===== pagine di esito del modulo ===== */
.msg-in{max-width:48rem}
.msg-in .ok-i{display:flex}
.need{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.need li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:baseline;padding:14px 18px;border-radius:16px;border:1px solid rgba(160,255,240,.12);background:rgba(255,255,255,.02);font-size:16px;line-height:1.5;color:#C4D6D3}
.need li svg{color:#8CFBEA;transform:translateY(3px)}
.need b{font-weight:600;color:#F2FBFA}
.msg-n{margin:22px 0 0;font-size:15px;line-height:1.55;color:#A9C0BD}
.msg-n .lnk{display:inline;padding-block:12px}

@media (max-width:900px){
.doc-g{grid-template-columns:minmax(0,1fr)}
.toc{position:static;padding:18px 20px 12px;border-radius:20px;border:1px solid rgba(160,255,240,.12);background:rgba(255,255,255,.02)}
.nf-g{grid-template-columns:minmax(0,1fr)}
.nf-viz{max-width:520px;order:-1}
}
@media (max-width:560px){
.ptop{padding-top:128px}
.ptop-fx{display:none}
.prose{font-size:16.5px}
.kv div,.fin-c .kv div{grid-template-columns:minmax(0,1fr);gap:2px}
.nf{padding-top:104px}
}

/* ===== ritocchi di impaginazione dopo la revisione ===== */
/* pillola dell'hero: su una riga nella fascia a due colonne stretta */
@media (min-width:861px) and (max-width:1059px){.hp-x{display:none}}
/* riquadro «Vista d'insieme» nella colonna stretta: testo e righe una sotto l'altro */
@media (min-width:861px) and (max-width:1100px){.lbox{grid-template-columns:minmax(0,1fr)}}
@media (max-width:380px){.lbox-r li,.lr-a a{grid-template-columns:8px minmax(0,1fr)}.lbox-r span{grid-column:2}}
/* chip degli strati: righe complete, niente «Assistenza» da sola */
@media (max-width:560px){.lchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.lchips-l{grid-column:1/-1}}
@media (min-width:561px) and (max-width:700px),(min-width:861px) and (max-width:1359px){.lchips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.lchips-l{grid-column:1/-1}}
/* FoxyGuard, filtro DNS nel pannello stretto: dominio sopra, esito sotto, niente parole spezzate */
@container (max-width:340px){.dns{grid-template-columns:minmax(0,1fr);gap:4px;overflow-wrap:normal}.dns .st{justify-self:start}}
/* «I siti»: l'etichetta va sopra quando i quattro link non stanno sulla stessa riga, e sotto i 360px i link vanno 2+2 */
/* «Scegli una soluzione» con una soluzione aperta: niente LogVault da sola sull'ultima riga.
   Da 600px di pannello le cinque pillole stanno su una riga (flex, come nel design); sotto, griglia:
   3+2, poi Panoramica sopra e le quattro soluzioni 2+2, infine una colonna sui 320px. */
@container (max-width:599px){
.eco:not([data-sel="all"]) .osel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.eco:not([data-sel="all"]) .osel-l{grid-column:1/-1}
.eco:not([data-sel="all"]) .orow{justify-content:center}
}
@container (max-width:405px){
.eco:not([data-sel="all"]) .osel{grid-template-columns:repeat(2,minmax(0,1fr))}
.eco:not([data-sel="all"]) .orow[data-pick="all"]{grid-column:1/-1}
}
@container (max-width:251px){.eco:not([data-sel="all"]) .osel{grid-template-columns:minmax(0,1fr)}}
/* 404, colonna del testo stretta (telefoni e fascia a due colonne): il principale su tutta la riga, i due secondari affiancati */
.nf-tx{container-type:inline-size}
@container (max-width:460px){.nf-tx .pcta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.nf-tx .pcta .btn-p{grid-column:1/-1}.nf-tx .pcta .btn{padding-inline:14px}}
/* pulsanti delle pagine interne sui telefoni: il principale su tutta la riga, i secondari affiancati */
@media (max-width:480px){
.pcta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pcta .btn-p,.pcta .btn:last-child:nth-child(2){grid-column:1/-1}
.pcta .btn{padding-inline:14px}
}

/* contrasto elevato di Windows: lo stato premuto resta visibile anche quando bordi, fondi e ombre vengono sostituiti */
@media (forced-colors:active){
/* !important: deve vincere anche sulle regole più specifiche dello stato premuto (per esempio le pillole di .osel) */
:is(.lchip,.en,.enc,.orow)[aria-pressed="true"]{forced-color-adjust:none;background:Highlight!important;color:HighlightText!important;border-color:Highlight!important}
:is(.lchip,.en,.enc,.orow)[aria-pressed="true"] *{color:HighlightText!important}
}

/* ===== cielo «Nebulosa»: spazio profondo dietro a tutto il sito =====
   Strati, dal più lontano: polvere di stelle (.sky, ferma nella finestra); nebulosa con le stelle vicine (.sky-neb:
   ferma mentre si scorre, a pagina ferma scivola piano dove la porterebbe una parallasse); stella cadente (.sky-sh,
   creata da site.js); stelle brillanti che scintillano (.sky-st, create da site.js), che stanno nella pagina e
   scorrono con il testo. Si animano solo transform e opacity, sul compositore, e mai durante lo scorrimento: ogni
   strato in movimento costa a ogni fotogramma.
   Senza JavaScript il cielo c'è lo stesso; con prefers-reduced-motion è fermo; con forced-colors sparisce.
   Sta a z-index -2: tra il cielo e i contenuti c'è posto (z-index -1) per le velature dietro ai testi più scuri. */
.sky{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;contain:strict;background:url(/assets/img/sky-far.44df06c62a.svg) 0 0/640px 640px;animation:sky-in 1.6s ease-out}
@keyframes sky-in{from{opacity:0}}
.sky>*,.sky-neb>*{position:absolute;left:0;top:0;width:100%}
.sky-neb{height:170vh}
.sky-near{height:100%;background:url(/assets/img/sky-near.278bee09bd.svg) 0 0/1200px 1200px}
/* nubi: due immagini di gas (teal e azzurro, viola e azzurro) riusate ruotate e in scale diverse */
.cl{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);opacity:var(--o,.3);transform:rotate(var(--r,0deg));background:url(/assets/img/sky-neb-a.ac4056fbd3.webp) center/100% 100% no-repeat}
.cl.b{background-image:url(/assets/img/sky-neb-b.0603a6a9b6.webp)}
.c1{--x:-16vw;--y:-22vh;--w:80vw;--h:58vw;--r:-14deg;--o:.24}
.c2{--x:58vw;--y:-16vh;--w:52vw;--h:38vw;--r:196deg;--o:.21}
.c3{--x:-12vw;--y:54vh;--w:54vw;--h:40vw;--r:12deg;--o:.22}
.c4{--x:24vw;--y:70vh;--w:28vw;--h:16vw;--o:1;background:radial-gradient(50% 50% at 50% 50%,rgba(255,138,80,.05),rgba(255,138,80,.018) 50%,rgba(255,138,80,0))}
.c5{--x:34vw;--y:86vh;--w:84vw;--h:58vw;--r:152deg;--o:.23}
.c6{--x:-14vw;--y:110vh;--w:62vw;--h:44vw;--r:-160deg;--o:.24}
.c7{--x:52vw;--y:126vh;--w:56vw;--h:40vw;--r:34deg;--o:.21}
/* stelle brillanti: nella pagina (il body è il loro contenitore), dietro a tutti i contenuti; site.js le mette solo
   negli spazi vuoti, lontano da testo, schemi e controlli. Scorrono con il testo, che quindi non passa mai sopra di
   loro: non si spengono mai. Ogni stella è un solo elemento senza effetti propri (la luminosità --a sta nei colori
   del disegno): mentre si scorre il browser le disegna tutte insieme, senza strati né lavoro per stella. A pagina
   ferma site.js le fa scintillare (opacità, sul compositore). Compaiono piano, insieme al cielo */
.sky-st{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-2;pointer-events:none;contain:strict;animation:sky-in 1.6s ease-out}
.sky-st i{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;--a:.65;background:radial-gradient(circle,rgba(255,255,255,var(--a)) 0,rgba(255,255,255,calc(.92*var(--a))) .9px,rgba(214,236,255,calc(.4*var(--a))) 2px,rgba(214,236,255,calc(.13*var(--a))) 4px,rgba(214,236,255,0) 9px)}
.sky-st i.w{background:radial-gradient(circle,rgba(255,250,242,var(--a)) 0,rgba(255,240,222,calc(.92*var(--a))) .9px,rgba(255,210,170,calc(.36*var(--a))) 2px,rgba(255,210,170,calc(.11*var(--a))) 4px,rgba(255,210,170,0) 9px)}
.sky-st i.s{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:radial-gradient(circle,rgba(255,255,255,var(--a)) 0,rgba(255,255,255,calc(.92*var(--a))) .63px,rgba(214,236,255,calc(.4*var(--a))) 1.4px,rgba(214,236,255,calc(.13*var(--a))) 2.8px,rgba(214,236,255,0) 6.3px)}
/* stella cadente: un filo sottile con la testa luminosa, mossa da site.js con transform */
.sky-sh{position:absolute;left:0;top:0;width:150px;height:1.5px;margin-top:-.75px;border-radius:2px;opacity:0;transform-origin:100% 50%;background:linear-gradient(90deg,rgba(200,255,246,0),rgba(200,255,246,.18) 55%,rgba(235,255,252,.9))}
.sky-sh::after{content:"";position:absolute;right:-2px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(220,255,250,.6) 40%,rgba(220,255,250,0) 70%)}
/* nebulosa che si assesta: niente parallasse durante lo scorrimento (uno strato grande in movimento, anche in pausa,
   costa a ogni fotogramma); quando la pagina si ferma site.js le dà la posizione della parallasse (fino a -70vh in
   fondo alla pagina) e lei ci scivola con calma. Con il movimento ridotto resta ferma (niente transizioni) */
.sky-neb{transition:transform 1.8s cubic-bezier(.22,.61,.36,1)}
/* dai 761 px le nubi stanno dove le mostrava la vecchia deriva lenta al caricamento della pagina */
@media (min-width:761px){.sky-neb{translate:-.6vw 0;scale:1.016;opacity:.9}}
/* schermi larghi: una nube (c5) più in alto, in basso a destra già in apertura; scendendo la nebulosa sale e
   arrivano anche le nubi basse (c6, c7) */
@media (min-width:1025px){.c5{--y:58vh}}
/* telefoni: nubi più grandi (le stelle brillanti sono meno fitte: lo decide site.js) */
@media (max-width:760px){
.c1{--x:-70vw;--y:-10vh;--w:200vw;--h:140vw}
.c2{--x:20vw;--y:-6vh;--w:130vw;--h:95vw}
.c3{--x:-60vw;--y:52vh;--w:150vw;--h:110vw}
.c4{--x:0vw;--w:80vw;--h:46vw}
.c5{--x:-30vw;--w:190vw;--h:130vw}
.c6{--x:-60vw;--w:160vw;--h:115vw}
.c7{--x:0vw;--w:140vw;--h:100vw}
}
/* movimento ridotto: niente comparsa né scintillio, stelle ferme poco sopra la luminosità media dello scintillio */
@media (prefers-reduced-motion:reduce){.sky,.sky-st{animation:none}.sky-st i{--a:.8!important}}
@media (forced-colors:active){.sky,.sky-st{display:none}}
@media print{.sky,.sky-st{display:none}}

/* anello del nodo centrale degli schemi («La tua azienda»): il bordo era teal all'80% e lasciava passare il cielo a
   2 px dalle lettere. Ora è pieno, in un teal un po' più scuro di quello che aveva sul fondo scuro di prima, così il
   bordo sfumato accanto alle lettere non le schiarisce (l'etichetta ha anche l'alone dei testi, più sotto) */
.au circle[fill="#051617"][stroke-opacity="0.8"]{stroke:#1C7F77;stroke-opacity:1}
/* sezioni: gli sfondi pieni diventano velature, così le stelle si vedono ovunque ma le luci aurora restano */
.hero{background:radial-gradient(70% 62% at 74% 50%,rgba(9,48,50,.86) 0%,rgba(5,29,30,.6) 48%,rgba(3,9,10,0) 80%)}
.ptop{background:radial-gradient(60% 90% at 82% 0%,rgba(9,48,50,.86) 0%,rgba(5,29,30,.6) 48%,rgba(3,9,10,0) 82%)}
.nf{background:radial-gradient(60% 70% at 72% 50%,rgba(9,48,50,.86) 0%,rgba(5,29,30,.6) 48%,rgba(3,9,10,0) 82%)}
/* piè di pagina: le stelle si spengono verso l'orizzonte del pianeta, come dentro un'atmosfera */
.ftr{background:linear-gradient(180deg,rgba(2,6,7,0),rgba(2,6,7,.55) 55%,rgba(2,6,7,.8))}
/* schede, pannelli e modulo: fondo scuro quasi pieno sotto le loro trasparenze, il testo non sta mai sulle stelle */
.panel{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),rgba(4,17,19,.94)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),rgba(3,9,10,.93)}
.cmp-c{background:linear-gradient(rgba(255,255,255,.015),rgba(255,255,255,.015)),rgba(3,9,10,.93)}
.cmp-c.us{background:linear-gradient(180deg,rgba(41,181,168,.11),rgba(41,181,168,.02)),rgba(3,9,10,.93)}
.done li{background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),rgba(3,9,10,.93)}
.done li.now{background:linear-gradient(180deg,rgba(41,181,168,.1),rgba(41,181,168,.02)),rgba(3,9,10,.93)}
.lbox{background:linear-gradient(180deg,rgba(10,30,32,.95),rgba(4,14,16,.95))}
.lchip{background:rgba(4,14,16,.92)}
.nlb{background:rgba(3,10,11,.92)}
.btn-g{background:linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04)),rgba(3,9,10,.9)}
.btn-g:hover{background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),rgba(3,9,10,.9)}
.btn-c{background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),rgba(3,9,10,.9)}
.btn-c:hover{background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)),rgba(3,9,10,.9)}
.fin-c,.doc-end,.need li{background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),rgba(3,9,10,.93)}
.box{background:linear-gradient(180deg,rgba(41,181,168,.11),rgba(41,181,168,.02)),rgba(3,9,10,.93)}
.ph-t{background:linear-gradient(rgba(246,196,83,.1),rgba(246,196,83,.1)),rgba(3,9,10,.92)}
@media (max-width:900px){.toc{background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),rgba(3,9,10,.93)}}
/* testo direttamente sul cielo: un contorno scuro stretto (2-3 px, quattro copie spostate e appena sfumate) spegne
   le stelle che passano a ridosso dei caratteri ma non scurisce la nebulosa tra le righe: niente fasce scure. Vale
   anche per l'etichetta del nodo centrale degli schemi (.core-l): le sue lettere toccano l'anello e le linee teal */
.au main,.au .ftr{text-shadow:0 -2px 3px #03090A,0 2px 3px #03090A,2px 0 3px #03090A,-2px 0 3px #03090A,0 0 3px #03090A}
/* etichette piccole nei colori più scuri del design (#93B3AE e simili): sopra le nubi più chiare serve anche un
   alone largo, leggero. Sono righe brevi, non paragrafi: non fanno fasce. Non dentro schede e controlli (fondo pieno) */
.au :is(.eyb,.fh,.fbot,.lchips-h,.lgd,.mk,.note,.mini-h,.vz-h,.kv dt,.ep-r dt,.enc-s,.opt,.chip-gl):not(:is(.btn,.lchip,.nlb,.lbox,.vz,.en,.enc,.panel,.cmp-c,.done li,.card,.ph,.rings-a,.bp,.toc,.fin-c,.box,.doc-end,.need li,.fbz) *){text-shadow:0 -2px 3px #03090A,0 2px 3px #03090A,2px 0 3px #03090A,-2px 0 3px #03090A,0 0 2px #03090A,0 0 4px #03090A,0 0 10px rgba(3,9,10,.6)}
/* titoli grandi: bastano 3:1 e le stelle sono già tenui, alone più leggero (non deve sembrare un'ombra) */
.au :is(.h1,.h2,.ph1,.mis-t,.lane h3,.h3s,.bigtel,.cmp-tel){text-shadow:0 0 2px rgba(3,9,10,.85),0 0 6px rgba(3,9,10,.45)}
.au :is(.btn,.lchip,.nlb,.lbox,.vz,.en,.enc,.panel,.cmp-c,.done li,.card,.ph,.rings-a,.bp,.toc,.fin-c,.box,.doc-end,.need li,.fbz,.ph-t){text-shadow:none}
/* i testi più scuri del design (la missione, le note dei numeri, i numeri dell'indice dell'informativa): dietro una
   velatura scura piena sotto il testo che fuori sfuma piano (--f px in orizzontale, --g in verticale, curva morbida)
   fino a sparire: nessun bordo né angolo, non un riquadro sopra la nebulosa. Sta in un ::before a z-index -1, sopra
   il cielo e sotto tutti i contenuti, così non scurisce i testi vicini */
.mis-t{position:relative}
.mis-t::before,.toc::before{--f:112px;--g:64px;content:"";position:absolute;z-index:-1;inset:calc(-1*var(--g)) calc(-1*var(--f));pointer-events:none;background:rgba(3,9,10,var(--va,.62));
-webkit-mask:linear-gradient(90deg,#0000,#0002 calc(var(--f)*.25),#0008 calc(var(--f)*.5),#000d calc(var(--f)*.75),#000 var(--f),#000 calc(100% - var(--f)),#000d calc(100% - var(--f)*.75),#0008 calc(100% - var(--f)*.5),#0002 calc(100% - var(--f)*.25),#0000),linear-gradient(#0000,#0002 calc(var(--g)*.25),#0008 calc(var(--g)*.5),#000d calc(var(--g)*.75),#000 var(--g),#000 calc(100% - var(--g)),#000d calc(100% - var(--g)*.75),#0008 calc(100% - var(--g)*.5),#0002 calc(100% - var(--g)*.25),#0000);
-webkit-mask-composite:source-in;mask-composite:intersect}
.toc::before{display:none}
/* l'indice è sticky, quindi ha un suo contesto e la velatura gli sta sopra ai vicini: in orizzontale resta dentro allo
   spazio tra le colonne (quello di .doc-g meno 12 px), così non tocca il testo dell'informativa */
@media (min-width:901px){.toc::before{display:block;--va:.7;--f:calc(clamp(32px,6vw,96px) - 12px);--g:72px}}

/* Avviso cookie e privacy (solo strumenti tecnici: informa, non chiede consenso) */
.ck{position:fixed;z-index:70;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(920px,calc(100% - 32px));display:flex;align-items:center;gap:16px 24px;padding:18px 18px 18px 24px;border-radius:22px;background:rgba(4,13,15,.97);border:1px solid rgba(160,255,240,.16);box-shadow:0 24px 60px -20px rgba(0,0,0,.85);color:#C4D6D3;font-size:14.5px;line-height:1.5}
.ck p{margin:0;flex:1 1 auto}
.ck b{color:#F2FBFA;font-weight:600}
.ck a{color:#8CFBEA;text-underline-offset:3px}
.ck-b{display:flex;flex:0 0 auto;gap:10px}
.ck:focus{outline:none}
@media (max-width:640px){.ck{flex-direction:column;align-items:stretch;padding:18px}.ck-b .btn{flex:1}}
@media (prefers-reduced-motion:no-preference){.ck{animation:ck-in .5s cubic-bezier(.2,.8,.2,1)}@keyframes ck-in{from{opacity:0;transform:translate(-50%,16px)}}}

/* Schede PDF delle soluzioni */
.shelf{margin-top:clamp(64px,8vw,112px)}
.shelf-h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.shelf-h .h3s{margin-top:10px}
.shelf-h>p{margin:0;max-width:30rem;color:#A9C0BD;font-size:15px;line-height:1.55}
.shelf-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.bro{--c:#5CF2DC;width:100%;font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;height:100%;box-sizing:border-box;text-decoration:none;color:#EAF4F3;border-radius:20px;padding:14px;border:1px solid rgba(160,255,240,.1);background:rgba(255,255,255,.02);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.bro:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 60%,transparent)}
.bro:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.doc-cv{display:block;width:100%;height:auto;aspect-ratio:210/297;object-fit:cover;border-radius:10px;border:1px solid color-mix(in srgb,var(--c) 30%,transparent);background:#0c1719}
.doc-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 4px 2px}
.doc-ft b{display:block;font-weight:600;font-size:15px}
.doc-ft small{display:block;white-space:nowrap;font-family:'Geist Mono',ui-monospace,monospace;font-size:11.5px;color:#8FA9A5;margin-top:3px}
.doc-dl{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);color:var(--c);transition:background-color .3s,color .3s}
.bro:hover .doc-dl{background:var(--c);color:#041012}
.shelf *{text-shadow:none!important}
@media (max-width:900px){.shelf-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (max-width:560px){.shelf-g{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:4px 20px 8px;scroll-padding-inline:20px;scrollbar-width:none}.shelf-g li{flex:0 0 70%;scroll-snap-align:start}}
@media (prefers-reduced-motion:reduce){.bro,.bro:hover{transition:none;transform:none}}

/* Visualizzatore delle brochure: pagine come immagini, nessun PDF da scaricare */
.bv{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:#030A0B;color:#EAF4F3;display:none;flex-direction:column}
.bv[open]{display:flex}
.bv::backdrop{background:rgba(2,8,9,.7)}
html.bv-on{overflow:hidden}
.bv-h{display:flex;align-items:center;gap:12px 20px;padding:calc(12px + env(safe-area-inset-top,0px)) clamp(16px,3vw,32px) 12px;border-bottom:1px solid rgba(160,255,240,.12);background:#040D0F}
.bv-t{margin:0;font-weight:600;font-size:17px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bv-n{margin:0 auto 0 0;white-space:nowrap}
.bv-ask{min-height:42px;font-size:14px}
.bv-x{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#EAF4F3;cursor:pointer}
.bv-x:hover{border-color:rgba(124,245,230,.5)}
.bv-b{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:24px clamp(12px,3vw,32px) calc(40px + env(safe-area-inset-bottom,0px));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bv-b:focus{outline:none}
.bv-b img{display:block;width:100%;max-width:880px;height:auto;margin:0 auto 18px;border-radius:6px;box-shadow:0 20px 50px -24px rgba(0,0,0,.9);background:#0c1719;pointer-events:none}
@media (max-width:640px){.bv-ask{display:none}.bv-h{padding-inline:16px;gap:12px}.bv-t{font-size:15px}.bv-n{font-size:11px;letter-spacing:.08em}.bv-b{padding-inline:8px}.bv-b img{margin-bottom:10px;border-radius:3px}}

/* modulo: verifica «sei umano?» (icone generate da site.js, controllo anche sul server) */
.sf{margin-top:6px;padding:16px 16px 14px;border-radius:16px;border:1px dashed rgba(160,255,240,.18);background:rgba(255,255,255,.02)}
.au .sf-l{font-size:15px;font-weight:600;color:#EAF4F3}
.sf-q{margin:4px 0 0;font-size:14px;color:#A9C0BD}
.sf-q b{color:#FFC59E;font-weight:600}
.sf-g{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.sf-g:empty{display:none}
.sf-o{position:relative;display:inline-flex}
.sf-o input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sf-i{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);color:#C4D6D3;transition:border-color .2s,background-color .2s,color .2s,transform .2s}
.sf-o input:hover + .sf-i{border-color:rgba(124,245,230,.45);color:#fff;transform:translateY(-2px)}
.au .sf-o input:focus-visible + .sf-i{outline:2px solid #8CFBEA;outline-offset:3px}
.sf .sf-o[data-esito="si"] .sf-i{border-color:#5CF2DC;background:rgba(92,242,220,.14);color:#8CFBEA;animation:sf-si .5s cubic-bezier(.3,1.6,.5,1)}
.sf .sf-o[data-esito="no"] .sf-i{border-color:rgba(255,138,80,.7);color:#FFB08A;animation:sf-no .4s}
.sf-r{margin:10px 0 0;min-height:1.5em;font-size:14px;color:#A9C0BD}
.sf-r[data-esito="si"]{color:#8CFBEA}
.sf-r[data-esito="no"]{color:#FFB08A}
.sf-r button{margin-left:6px;padding:0;border:0;background:none;font:inherit;color:#E4F6F3;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sf .ferr{margin-top:6px}
.sf-nojs{display:none}
@keyframes sf-si{0%{transform:scale(.85)}100%{transform:scale(1)}}
@keyframes sf-no{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.sf-i{transition:none}.sf-o[data-esito] .sf-i{animation:none}.sf-o input:hover + .sf-i{transform:none}}