@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/poppins-latin-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-latin-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-latin-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-latin-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400.woff2) format("woff2")}

/* Grafite e beige del CV, più un ambra caldo per gli accenti. --tint lo aggiorna lo script col colore del capitolo. */
:root{
  --bg:#0d0c0b; --ink:#efe9e1; --muted:#a39a8f; --line:rgba(239,233,225,.13);
  --beige:#e3dad0; --amber:#d9a066; --ok:#8ee05a; --tint:217 160 102; --gx:65%;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --sans:Poppins,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --pad:clamp(16px,5vw,72px);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
/* niente barra di scorrimento a destra: si scorre con rotella, tastiera e dito */
html{-webkit-text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:hidden;transition:background-color .9s ease,color .9s ease}
::selection{background:var(--amber);color:#14110e}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:6px}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.kicker{color:var(--amber);font-family:var(--mono);font-size:13px;margin-bottom:22px}
/* titoli di sezione per chi usa uno screen reader: le sezioni che a schermo si capiscono dalla grafica */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- sfondo ---------- */
#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:0;pointer-events:none;display:block}
.glow{position:fixed;inset:-10%;z-index:0;pointer-events:none;background:radial-gradient(55vmax 45vmax at var(--gx) 50%,rgb(var(--tint) / .13),transparent 65%)}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
main,footer{position:relative;z-index:2}
.aurora{position:fixed;inset:-15%;z-index:0;pointer-events:none;opacity:.9;transition:opacity .9s}
.aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--tint) / .12),transparent);animation:drift 28s ease-in-out infinite alternate}
.aurora i:nth-child(1){left:-5%;top:5%}
.aurora i:nth-child(2){right:-10%;top:25%;animation-duration:34s;animation-delay:-9s;background:radial-gradient(closest-side,rgb(var(--tint) / .08),transparent)}
.aurora i:nth-child(3){left:25%;bottom:-20%;animation-duration:40s;animation-delay:-17s;background:radial-gradient(closest-side,rgb(110 130 255 / .06),transparent)}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,-7vh) scale(1.18)}100%{transform:translate(-7vw,9vh) scale(.92)}}
/* velo dei link del menu: la pagina sfuma, salta al punto giusto e ricompare (il menu resta sopra) */
.veil{position:fixed;inset:0;z-index:39;pointer-events:none;background:#0d0c0b;opacity:0;transition:opacity .24s ease}
.veiling .veil{opacity:1}
.sweep{position:fixed;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgb(var(--tint)) 30%,#fff 50%,rgb(var(--tint)) 70%,transparent);box-shadow:0 0 30px 6px rgb(var(--tint) / .45)}
.tilt{will-change:transform}
.tilt::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgb(255 255 255 / .14),transparent 45%);opacity:0;transition:opacity .4s}
.tilt:hover::after{opacity:1}
.scr{color:var(--amber)}

/* ---------- avvio ---------- */
.boot{display:none}
.js .boot{display:flex;position:fixed;inset:0;z-index:90;background:#0a0908;color:#cfc6bb;flex-direction:column;justify-content:space-between;padding:calc(var(--pad) + 8px) var(--pad);font-family:var(--mono);font-size:13px;clip-path:inset(0 0 0 0)}
.boot-log p{white-space:pre;line-height:1.95}
.boot-log .ok{color:var(--ok)}
.boot-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.boot-logo{display:block;height:clamp(64px,10vw,120px);width:auto}
.boot-pct{font-family:var(--sans);font-weight:700;font-size:clamp(72px,15vw,200px);line-height:.78;letter-spacing:-.04em;color:var(--beige)}

/* ---------- cursore e menu ---------- */
.cur-dot,.cur-ring{display:none}
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor .cur-dot,.has-cursor .cur-ring{display:block;position:fixed;left:0;top:0;z-index:95;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cur-on .cur-dot,.cur-on .cur-ring{opacity:1}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--amber)}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgb(var(--tint) / .75);transition:width .35s,height .35s,margin .35s,background-color .35s}
.cur-hover .cur-ring{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgb(var(--tint) / .14)}

.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px var(--pad);color:var(--ink);transition:transform .6s cubic-bezier(.2,.7,.2,1),color .9s}
.nav::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;background:linear-gradient(var(--bg) 20%,transparent);opacity:0;transition:opacity .5s}
.nav.scrolled::before{opacity:.9}
.nav.hide{transform:translateY(-110%)}
.brand{justify-self:start;display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.22em;font-size:14px}
.brand img{display:block;height:31px;width:auto}
.nav ul{display:flex;gap:34px;list-style:none;font-size:13.5px}
.nav ul a{opacity:.68;transition:opacity .3s}
.nav ul a:hover{opacity:1}
.nav-cta{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:600;transition:background-color .35s,color .35s,border-color .35s}
.nav-cta span{transition:transform .35s}
.nav-cta:hover{background:var(--amber);border-color:transparent;color:#14110e}
.nav-cta:hover span{transform:translateX(3px)}
.nav ul a{position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- testata ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:580px}
.hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(26px,6vh,60px)}
.hero-cmd{color:var(--muted);margin-bottom:clamp(8px,2vh,20px)}
.hero-cmd .prompt{color:var(--amber)}
.caret{display:inline-block;width:.62em;height:1.15em;background:var(--amber);vertical-align:-.22em;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-title{font-weight:300;font-size:clamp(62px,12.6vw,204px);line-height:.86;letter-spacing:-.04em;margin-left:-.045em}
.hero-title .line{display:block;overflow:hidden;padding:.02em 0 .07em}
.hero-title .l2{font-weight:700}
.sw{display:inline-block;white-space:nowrap}
.sc{display:inline-block;will-change:transform}
.hero-sub{display:flex;flex-wrap:wrap;gap:10px 48px;align-items:baseline;margin-top:clamp(14px,3vh,28px)}
.role{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.verbs{font-size:clamp(18px,2vw,24px);line-height:1.32;font-weight:300;color:var(--muted)}
.verb-box{position:relative;display:inline-block;height:1.32em;vertical-align:top;overflow:hidden;color:var(--ink);font-weight:600}
.ready .verb{position:absolute;left:0;top:0;white-space:nowrap}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(22px,5vh,54px);padding-top:18px;border-top:1px solid var(--line)}
.scroll-hint{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.scroll-hint i{position:relative;width:1px;height:40px;background:var(--line);overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--amber);animation:drip 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes drip{to{top:100%}}
.hero-facts{display:flex;gap:28px;list-style:none;color:var(--muted)}

/* ---------- manifesto ---------- */
.manifesto{padding:22vh var(--pad) 18vh;max-width:1440px}
.manifesto-text{font-size:clamp(28px,4.6vw,70px);line-height:1.14;font-weight:300;letter-spacing:-.025em}
.manifesto-text em{font-style:normal;font-weight:600;color:var(--amber)}
.ww{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wi{display:inline-block;will-change:transform}

/* ---------- lo stack, a capitoli ---------- */
.story{position:relative}
/* uno schermo per il primo capitolo e 70vh per ognuno dei 5 seguenti: ogni gesto della rotella è un capitolo */
.ready .story{height:450vh}
.story-sticky{position:relative}
.ready .story-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.story-head{position:absolute;top:100px;left:var(--pad);display:flex;gap:18px;color:var(--muted)}
.story-head .cur{color:var(--ink)}
html:not(.ready) .story-head,html:not(.ready) .story-bars{display:none}
.panels{padding:0 var(--pad)}
.ready .panels{position:absolute;left:var(--pad);top:50%;width:min(560px,44vw);padding:0;z-index:1}
.panel{position:relative;padding:40px 0}
.ready .panel{position:absolute;left:0;top:0;width:100%;padding:0;transform:translateY(-50%);visibility:hidden}
.p-n{position:absolute;left:-.06em;top:-.62em;z-index:-1;font-size:clamp(120px,15vw,230px);font-weight:700;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none}
.unit{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:18px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.unit .st{color:var(--ok)}
.p-title{font-size:clamp(34px,4.4vw,66px);line-height:1.02;font-weight:600;letter-spacing:-.035em;margin-bottom:22px}
.p-text{font-size:clamp(15px,1.25vw,18px);font-weight:300;color:var(--muted);max-width:480px}
.p-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:26px}
.p-tags li{font-family:var(--mono);font-size:12px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:rgb(20 18 16 / .55)}
/* il link alla pagina del servizio, sotto ogni capitolo */
.p-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding-bottom:3px;border-bottom:1px solid rgb(217 160 102 / .35);font-family:var(--mono);font-size:12.5px;color:var(--amber);transition:color .3s,border-color .3s}
.p-link span{transition:transform .35s}
.p-link:hover{color:var(--ink);border-color:var(--ink)}
.p-link:hover span{transform:translateX(3px)}
.story-bars{position:absolute;left:var(--pad);right:var(--pad);bottom:38px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.story-bars button{font:inherit;font-family:var(--mono);font-size:11px;color:var(--muted);text-align:left;background:none;border:0;padding:0 0 4px;cursor:pointer;transition:color .3s}
.story-bars button:hover,.story-bars button.on{color:var(--ink)}
.story-bars button:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:4px}
.story-bars b{display:block;height:2px;background:var(--line);margin-bottom:10px;overflow:hidden}
.story-bars i{display:block;height:100%;background:rgb(var(--tint));transform:scaleX(0);transform-origin:0 50%}

/* ---------- cybersecurity: lo scudo che si ripara ---------- */
.cyber{position:relative}
.ready .cyber{height:450vh}
.cyber-sticky{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,90px);align-items:center;max-width:1500px;margin:0 auto;padding:14vh var(--pad)}
.ready .cyber-sticky{position:sticky;top:0;height:100vh;height:100svh;padding:0 var(--pad)}
.cyber .kicker{color:#a995ff}
.cyber .h2{font-size:clamp(34px,4.2vw,62px)}
.cyber-intro{margin:14px 0 18px;max-width:470px;font-size:clamp(15px,1.2vw,17px);font-weight:300;color:var(--muted)}
.cyber-list{list-style:none;counter-reset:c;max-width:520px}
.cyber-list li{position:relative;padding:9px 0 9px 54px;border-top:1px solid var(--line);opacity:.38;transition:opacity .5s}
.cyber-list li:last-child{border-bottom:1px solid var(--line)}
.cyber-list li::before{counter-increment:c;content:"0" counter(c);position:absolute;left:0;top:11px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.cyber-list li::after{content:"";position:absolute;left:30px;top:15px;width:10px;height:10px;border-radius:50%;border:1.5px solid rgb(255 255 255 / .25);transition:background-color .4s,border-color .4s,box-shadow .4s}
.cyber-list b{display:block;font-size:clamp(16px,1.35vw,19px);font-weight:600}
.cyber-list span{display:block;max-height:0;overflow:hidden;font-size:13.5px;color:var(--muted);transition:max-height .5s,margin .5s}
.cyber-list li.on{opacity:1}
.cyber-list li.on span{max-height:64px;margin-top:4px}
.cyber-list li.done{opacity:.72}
.cyber-list li.on::after,.cyber-list li.done::after{background:#8ee05a;border-color:#8ee05a;box-shadow:0 0 12px rgb(142 224 90 / .7)}
.cyber-visual{display:flex;flex-direction:column;align-items:center}
.shield{display:block;width:min(400px,36vw);height:auto;overflow:visible}
.shield .sr{transform-box:fill-box;transform-origin:center;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.shield .sr.on{transform:scaleX(1)}
.shield .br{transition:opacity .45s}
.shield .br.off{opacity:0}
.shield .broken line{animation:jit 2.6s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes jit{0%{transform:translateX(0);opacity:1}50%{opacity:.45}100%{transform:translateX(7px);opacity:.9}}
.shield .beam{transition:opacity .3s}
.shield .tick{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1) .15s;filter:drop-shadow(0 0 10px rgb(255 255 255 / .6))}
.shield.safe .tick{stroke-dashoffset:0}
.shield .solid{transition:filter .6s}
.shield.safe .solid{filter:drop-shadow(0 0 14px rgb(169 149 255 / .55))}
.shield-status{margin-top:18px;color:var(--muted)}
.shield-status .pct{font-family:var(--sans);font-size:24px;color:var(--ink)}
.shield.safe + .shield-status .pct{color:#8ee05a}

/* ---------- una giornata tipo ---------- */
.ops{position:relative;display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(36px,6vw,96px);align-items:center;max-width:1520px;margin:0 auto;padding:16vh var(--pad) 14vh}
.h2{font-size:clamp(40px,5.6vw,88px);line-height:1;font-weight:600;letter-spacing:-.04em}
.h2 .light{font-weight:300}
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.counters b{display:block;font-size:clamp(48px,5.2vw,80px);font-weight:300;line-height:1;letter-spacing:-.04em}
.counters span{display:block;margin-top:10px;font-size:14px;color:var(--muted);max-width:190px}
.term{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgb(16 15 14 / .82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 50px 120px -40px rgb(0 0 0 / .9)}
.term-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#e8655a}
.term-bar i:nth-child(2){background:#e3b341}
.term-bar i:nth-child(3){background:#5fc35a}
.term-bar span{margin-left:10px}
.term-body{height:390px;overflow:hidden;padding:20px 22px;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:#ddd5ca}
.term-body .ps{color:var(--amber)}
.term-body .out{white-space:pre;color:#a39a8f}
.term-body .ok{color:var(--ok)}
.term-body .cur{display:inline-block;width:.6em;height:1.15em;background:#ddd5ca;vertical-align:-.25em;animation:blink 1s steps(1) infinite}

.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.meter{border:1px solid var(--line);border-radius:12px;padding:12px 14px 10px;background:rgb(16 15 14 / .72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.meter p{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.meter b{font-weight:400;color:var(--ink)}
.meter svg{display:block;width:100%;height:44px;margin-top:8px;overflow:visible}
.meter .l{fill:none;stroke:rgb(var(--c));stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgb(var(--c) / .7))}
.meter .a{fill:rgb(var(--c) / .13)}

/* ---------- strumenti: nastri che scorrono da soli ---------- */
.tools{position:relative;padding:14vh 0 16vh;overflow:hidden}
.tools-head{max-width:1520px;margin:0 auto 56px;padding:0 var(--pad)}
.tools-head .h2{max-width:13em}
.tools-text{margin-top:24px;max-width:520px;font-size:clamp(15px,1.3vw,18px);font-weight:300;color:var(--muted)}
.belts{display:grid;gap:16px}
.belt{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.belt-track{display:flex;gap:14px;width:max-content;list-style:none;padding:6px 0;animation:belt var(--d,80s) linear infinite}
.belt.rev .belt-track{animation-direction:reverse}
.belt:hover .belt-track,.belt:focus-within .belt-track,.tip-open .belt-track{animation-play-state:paused}
@keyframes belt{to{transform:translateX(-50%)}}
.belt-track li,.legend li{--c:217 160 102}
li[data-cat=sys]{--c:255 157 77}
li[data-cat=virt]{--c:169 149 255}
li[data-cat=cloud]{--c:95 168 255}
li[data-cat=cont]{--c:54 209 173}
li[data-cat=mon]{--c:142 224 90}
li[data-cat=sec]{--c:255 107 74}
li[data-cat=app]{--c:227 218 208}
/* niente backdrop-filter sulle pillole: sono 136 elementi in movimento e la sfocatura dello sfondo le rendeva pesanti */
.belt-track li{display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border:1px solid var(--line);border-radius:999px;background:linear-gradient(180deg,rgb(30 28 26 / .82),rgb(19 18 17 / .82));font-size:clamp(15px,1.35vw,20px);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .35s,box-shadow .35s,transform .35s}
.belt-track li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 12px rgb(var(--c) / .8)}
.belt-track li:hover,.belt-track li:focus-within{border-color:rgb(var(--c));box-shadow:0 0 30px -6px rgb(var(--c) / .8);transform:translateY(-3px);outline:none}
.belt-track button{all:unset;cursor:inherit}
.tools-hint{margin-top:18px;text-align:center;font-size:12px;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;list-style:none;max-width:1100px;margin:44px auto 0;padding:0 var(--pad);font-size:12px;color:var(--muted)}
.legend li{display:inline-flex;align-items:center;gap:8px}
.legend li::before{content:"";width:7px;height:7px;border-radius:50%;background:rgb(var(--c))}

/* ---------- come lavoro: una fascia beige con sei schede piccole, senza scorrimento a passi ---------- */
.journey{position:relative;padding:clamp(72px,12vh,124px) var(--pad);background:var(--beige);color:#2b2b2b;--line:rgba(43,43,43,.14);--muted:#5f574e}
.journey ::selection{background:#2b2b2b;color:var(--beige)}
.j-head{max-width:1520px;margin:0 auto 40px}
.j-head .kicker{color:#9a5b22}
.j-head .h2{font-size:clamp(36px,4.4vw,66px)}
.j-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1520px;margin:0 auto}
.j-card{display:flex;flex-direction:column;padding:22px 22px 20px;border:1px solid var(--line);border-radius:16px;background:rgb(255 255 255 / .3);transition:background-color .35s,border-color .35s}
.j-card:hover{background:rgb(255 255 255 / .5);border-color:rgba(43,43,43,.22)}
.j-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--muted)}
.j-n{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 7px;border-radius:999px;background:#2b2b2b;color:var(--beige);font-size:11px}
.j-card h3{font-size:clamp(18px,1.45vw,21px);font-weight:600;line-height:1.22;letter-spacing:-.015em;margin-bottom:8px}
.j-desc{font-size:14px;line-height:1.62;color:var(--muted)}
.j-tags{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin-top:auto;padding-top:14px}
.j-tags li{font-family:var(--mono);font-size:10.5px;padding:3px 9px;border:1px solid var(--line);border-radius:999px}
.j-card.now{background:#2b2b2b;color:#efe9e1;border-color:transparent}
.j-card.now .j-top,.j-card.now .j-desc{color:rgb(227 218 208 / .72)}
.j-card.now .j-n{background:var(--beige);color:#2b2b2b}
.j-card.now .j-tags li{border-color:rgb(227 218 208 / .22)}

/* ---------- nastro delle tecnologie ---------- */
.stack{position:relative;overflow:hidden;padding:12vh 0 10vh}
.mq{overflow:hidden;white-space:nowrap}
.mq-in{display:inline-block;font-size:clamp(46px,7.4vw,124px);font-weight:700;line-height:1.1;letter-spacing:-.045em;will-change:transform}
.mq-in span{display:inline-block;margin:0 .22em}
.mq-in .star{color:var(--amber);font-weight:300;font-size:.5em;vertical-align:.35em}
.mq-in.outline span:not(.star){color:transparent;-webkit-text-stroke:1.5px var(--muted)}

/* ---------- domande frequenti: fisarmoniche, una aperta alla volta ---------- */
.faq{position:relative;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,6vw,96px);align-items:start;max-width:1520px;margin:0 auto;padding:12vh var(--pad) 10vh;interpolate-size:allow-keywords}
.faq .h2{font-size:clamp(36px,4.4vw,66px)}
.faq-lista{border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq details::details-content{height:0;overflow:clip;opacity:0;transition:height .4s cubic-bezier(.2,.7,.2,1),opacity .35s,content-visibility .4s allow-discrete}
.faq details[open]::details-content{height:auto;opacity:1}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:6px}
.faq summary h3{font-size:clamp(17px,1.5vw,22px);font-weight:600;line-height:1.28;letter-spacing:-.015em;transition:color .3s}
.faq summary:hover h3{color:var(--amber)}
/* il più che diventa una croce */
.faq summary::after{content:"";flex:none;width:15px;height:15px;background:linear-gradient(var(--amber),var(--amber)) center/100% 1.5px no-repeat,linear-gradient(var(--amber),var(--amber)) center/1.5px 100% no-repeat;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{max-width:680px;padding:0 36px 24px 0;font-size:clamp(15px,1.15vw,17px);font-weight:300;color:#c9c1b7}
.schede[hidden]{display:none}

/* ---------- contatti ---------- */
.contact{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh;padding:0 var(--pad) 9vh}
.contact-title{font-size:clamp(44px,min(8.6vw,12.5vh),156px);line-height:.94;font-weight:300;letter-spacing:-.045em;max-width:12em}
.contact-title b{font-weight:700}
.c-sub{margin-top:26px;max-width:560px;font-size:clamp(16px,1.4vw,20px);font-weight:300;color:var(--muted)}
.c-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px;margin-top:36px}
.c-actions{display:flex;flex-wrap:wrap;gap:14px}
.mbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:64px;padding:0 34px;border:1px solid var(--line);border-radius:999px;font-size:16px;font-weight:600;overflow:hidden;isolation:isolate;transition:color .45s}
.mbtn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ink);transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.mbtn:hover{color:var(--bg)}
.mbtn:hover::before{transform:translateY(0)}
.mbtn.primary{background:var(--amber);color:#14110e;border-color:transparent}
.mbtn[hidden]{display:none}
.c-mail{font-family:var(--mono);font-size:13px;color:var(--muted)}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:26px var(--pad) 34px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted)}
.f-link{margin-left:auto;transition:color .3s}
.f-link:hover{color:var(--ink)}
.to-top{display:inline-flex;align-items:center;gap:8px;transition:color .3s}
.to-top span{display:inline-block;transition:transform .35s}
.to-top:hover{color:var(--ink)}
.to-top:hover span{transform:translateY(-3px)}

/* ---------- modulo a comparsa ---------- */
.drawer{position:fixed;inset:0;z-index:80}
.drawer[hidden]{display:none}
.drawer-bg{position:absolute;inset:0;background:rgb(8 8 12 / .55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .45s}
/* il pannello è una colonna: in alto il modulo (che scorre solo se lo schermo è davvero basso), in fondo la riga con l'email, sempre visibile */
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(480px,100vw);display:flex;flex-direction:column;color:#eef0f8;background:linear-gradient(180deg,#14141e,#0d0d14);border-left:1px solid rgb(255 255 255 / .1);box-shadow:-40px 0 120px -30px rgb(0 0 0 / .8);transform:translateX(104%);transition:transform .6s cubic-bezier(.2,.75,.15,1)}
.drawer-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:30px 32px 14px}
.drawer-body::-webkit-scrollbar{display:none}
.drawer.open .drawer-bg{opacity:1}
.drawer.open .drawer-panel{transform:none}
.drawer-x{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgb(255 255 255 / .14);background:transparent;color:inherit;font-size:15px;cursor:pointer;transition:background-color .3s,transform .3s}
.drawer-x:hover{background:rgb(255 255 255 / .08);transform:rotate(90deg)}
.drawer .kicker{color:#a995ff;margin-bottom:12px}
.drawer-title{font-size:clamp(26px,3vw,32px);font-weight:600;line-height:1.08;letter-spacing:-.03em}
.drawer-sub{margin:6px 0 16px;color:#9ba1b9;font-weight:300}
.cform{display:grid;gap:10px}
.cform .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cform .field label{display:block;margin-bottom:5px;font-size:12px;color:#9ba1b9}
.cform input,.cform textarea{width:100%;padding:11px 13px;border:1px solid rgb(255 255 255 / .12);border-radius:12px;background:rgb(0 0 0 / .3);color:#eef0f8;font:inherit;font-size:15px;outline:none;transition:border-color .3s,box-shadow .3s}
.cform textarea{height:76px;min-height:58px;resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:#a995ff;box-shadow:0 0 0 4px rgb(169 149 255 / .15)}
.cform .check{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5;color:#9ba1b9}
.cform .check input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:#7b5cf0}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .send{width:100%;height:52px;border:0;cursor:pointer;font-family:inherit;color:#fff;background:linear-gradient(120deg,#3f7cf0,#7b5cf0)}
.cform .send::before{background:#fff}
.cform .send:hover{color:#14161f}
.cform .send:disabled{opacity:.6;cursor:wait}
.cform .stato{min-height:1.2em;font-size:13px;text-align:center;color:#9ba1b9}
.cform .stato:empty{min-height:0}
.cform .stato.ok{color:#8ee05a}
.cform .stato.err{color:#ff8a73}
.drawer .alt{flex:none;padding:13px 32px calc(15px + env(safe-area-inset-bottom));border-top:1px solid rgb(255 255 255 / .1);background:rgb(8 8 13 / .55);font-size:13.5px;color:#9ba1b9}
.drawer .alt a{color:#eef0f8;text-decoration:underline;text-decoration-color:rgb(169 149 255 / .6);text-underline-offset:3px;white-space:nowrap}
.has-cursor .drawer input,.has-cursor .drawer textarea{cursor:text!important}
/* schermi bassi (portatili con la finestra del browser piena di barre): tutto più stretto, così il modulo ci sta intero */
@media (max-height:740px) and (min-width:761px){
  .drawer-body{padding-top:22px}
  .drawer .kicker{display:none}
  .drawer-title{font-size:26px}
  .drawer-sub{margin:2px 0 10px;font-size:14px}
  .cform{gap:8px}
  .cform input{padding:9px 12px}
  .cform textarea{height:58px}
  .cform .send{height:46px}
}

/* ---------- scheda di uno strumento ---------- */
.tip{--c:217 160 102;position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:20px}
.tip[hidden]{display:none}
.tip-bg{position:absolute;inset:0;background:rgb(8 8 12 / .5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .3s}
.tip-card{position:relative;width:min(440px,100%);padding:24px 26px 24px;border:1px solid rgb(var(--c) / .45);border-radius:18px;background:linear-gradient(180deg,#18171b,#0f0f12);color:#eef0f8;box-shadow:0 40px 100px -30px rgb(0 0 0 / .85),0 0 70px -24px rgb(var(--c) / .55);opacity:0;transform:translateY(14px) scale(.97);transition:opacity .3s,transform .45s cubic-bezier(.2,.75,.15,1)}
.tip.open .tip-bg{opacity:1}
.tip.open .tip-card{opacity:1;transform:none}
.tip-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid rgb(255 255 255 / .14);background:transparent;color:inherit;font-size:13px;cursor:pointer;transition:background-color .3s,transform .3s}
.tip-x:hover{background:rgb(255 255 255 / .08);transform:rotate(90deg)}
.tip-area{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#9ba1b9}
.tip-area i{width:8px;height:8px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 10px rgb(var(--c) / .8)}
.tip-nome{margin:6px 0 4px;padding-right:40px;font-size:clamp(24px,3vw,30px);font-weight:600;line-height:1.12;letter-spacing:-.02em}
.tip-lab{margin-top:14px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--c))}
.tip-cose,.tip-serve{margin-top:4px;font-size:15px;line-height:1.6;color:#d4d6e0}

altcha-widget.captcha{display:block;--altcha-max-width:100%;--altcha-border-width:1px;--altcha-border-radius:14px;--altcha-color-base:rgb(0 0 0 / .3);--altcha-color-border:rgb(255 255 255 / .12);--altcha-color-border-focus:#a995ff;--altcha-color-text:#eef0f8;--altcha-color-error-text:#ff8a73;--altcha-color-footer-bg:transparent}

/* ---------- schermi stretti ---------- */
/* il link della cybersecurity sta nell'angolo: fra le voci toglierebbe spazio, e sugli schermi bassi non ce n'è */
@media (min-width:901px){
  .ready .cyber .p-link{position:absolute;right:var(--pad);bottom:clamp(18px,4.5vh,40px);margin:0}
}
@media (max-width:1100px){
  .j-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .cyber-sticky{grid-template-columns:1fr;gap:12px;align-content:center}
  .ready .cyber-sticky{padding-top:64px}
  .cyber-visual{order:-1;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px}
  .shield{width:min(116px,30vw)}
  .shield-status{margin:0;font-size:11px}
  .cyber-intro{display:none}
  .cyber .kicker{margin-bottom:8px}
  .cyber .h2{font-size:clamp(28px,8vw,40px)}
  .cyber-list{margin-top:14px}
  .cyber-list li{padding:7px 0 7px 46px}
  .cyber-list li::before{top:9px}
  .cyber-list li::after{left:26px;top:13px}
  .cyber-list b{font-size:15px}
  .cyber-list span{font-size:12.5px}
  .nav{grid-template-columns:1fr auto}
  .nav ul{display:none}
  .ops{grid-template-columns:1fr}
}
@media (max-width:760px){
  .boot-log p{white-space:pre-wrap;font-size:11px;line-height:1.8}
  .nav-cta{padding:7px 14px;font-size:12.5px}
  .hero-facts{display:none}
  /* telefono: velo scuro sfumato dietro al testo del manifesto, così le parole non si confondono con le particelle
     della galassia che gli passano dietro (la galassia resta accesa) */
  .manifesto{position:relative;z-index:0;padding:16vh 16px 14vh}
  .manifesto::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,rgb(13 12 11 / .8) 18%,rgb(13 12 11 / .8) 82%,transparent)}
  .ready .panels{left:16px;right:16px;width:auto;top:auto;bottom:84px}
  .ready .panel{top:auto;bottom:0;transform:none}
  .ready .story-sticky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(to top,var(--bg) 45%,transparent);pointer-events:none}
  .p-n{font-size:110px;top:-.55em}
  .p-title{font-size:clamp(30px,9vw,40px);margin-bottom:14px}
  .p-text{font-size:14.5px}
  .p-tags{margin-top:16px;gap:6px}
  .p-tags li{font-size:11px;padding:4px 9px}
  .story-head{top:84px}
  .story-bars{bottom:30px;gap:6px;font-size:0}
  .story-bars b{margin:0}
  .counters{gap:16px;margin-top:36px}
  .counters b{font-size:clamp(34px,10vw,48px)}
  .counters span{font-size:12.5px}
  .term-body{height:340px;padding:16px;font-size:11px}
  .meters{gap:8px}
  .meter{padding:10px 10px 8px}
  .meter p{flex-direction:column;gap:2px;font-size:10px}
  .belts{gap:10px}
  .belt-track{gap:10px}
  .belt-track li{padding:10px 18px;font-size:14px}
  .legend{gap:8px 16px;font-size:11px}
  .faq{grid-template-columns:minmax(0,1fr);gap:8px;padding:9vh 16px 5vh}
  .faq .h2{font-size:clamp(30px,8.6vw,40px)}
  .faq details p{padding-right:0;font-size:14.5px}
  .journey{padding:64px 16px}
  .j-head{margin-bottom:26px}
  .j-head .h2{font-size:clamp(30px,8.6vw,40px)}
  .j-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .j-card{padding:16px 16px 15px}
  .j-top{margin-bottom:8px}
  .j-card h3{font-size:17px}
  .j-desc{font-size:13.5px}
  .contact{padding-bottom:7vh}
  .contact-title{font-size:clamp(32px,9.5vw,40px)}
  .c-sub{margin-top:14px;font-size:14.5px}
  .c-row{margin-top:22px}
  .mbtn{height:56px;padding:0 26px}
  .drawer-panel{top:auto;left:0;width:100%;max-height:92vh;max-height:92svh;border-left:0;border-top:1px solid rgb(255 255 255 / .1);border-radius:22px 22px 0 0;overflow:hidden;transform:translateY(104%)}
  .drawer-body{padding:30px 18px 12px}
  .drawer .alt{padding:12px 18px calc(14px + env(safe-area-inset-bottom))}
  .cform input,.cform textarea{font-size:16px}
  .tip-card{padding:22px 20px 20px}
  .tip-cose,.tip-serve{font-size:14.5px}
}
@media (max-width:420px){
  .cform .row2{grid-template-columns:minmax(0,1fr)}
}

/* ---------- telefono: stack e cybersecurity scorrono come una pagina normale, testi al centro ---------- */
@media (min-width:760px){
  .a-capo-tel{display:none}
}
@media (max-width:759px){
  html.modal-open,html.modal-open body{overflow:hidden}
  /* scorrimento leggero sul telefono: la grana resta ma ferma e grande quanto lo schermo (animata era un livello
     quattro volte lo schermo da ricomporre di continuo), gli aloni stanno fermi e le parole dei titoli diventano
     livelli separati solo mentre si muovono (lo fa GSAP), non sempre */
  .grain{inset:0;animation:none}
  .aurora i{animation:none}
  .wi,.sc{will-change:auto}
  /* lo stack: un capitolo sotto l'altro, ognuno alto quasi uno schermo, con la sua forma sopra e il testo sotto */
  .ready .story{height:auto}
  .ready .story-sticky{position:relative;top:auto;height:auto;overflow:visible}
  .ready .story-sticky::after{display:none}
  .story-head,.story-bars{display:none}
  .ready .panels{position:static;width:auto;padding:0}
  .ready .panel{position:relative;z-index:0;top:auto;bottom:auto;left:auto;transform:none;visibility:visible;display:flex;flex-direction:column;justify-content:flex-end;min-height:88svh;padding:0 16px 8svh}
  /* ogni riga del testo dei capitoli entra quando arriva dal basso (.fuori) e sparisce quando sale nella metà alta
     dello schermo, dove stanno le forme di particelle (.sotto): classi messe da main.js con un IntersectionObserver.
     Solo opacità e spostamento, che il telefono anima senza ridisegnare la pagina. Niente veli scuri né maschere:
     i veli, muovendosi con i capitoli, tagliavano i disegni a fette */
  .ready .panel :is(.p-n,.unit,.p-title,.p-text,.p-tags,.p-link){transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .p-link{align-self:flex-start;margin-top:16px}
  .ready .panel .fuori{opacity:0;transform:translateY(22px)}
  .ready .panel .sotto{opacity:0;transition-duration:.3s}
  .p-n{position:relative;left:auto;top:auto;display:block;margin:0 0 -.4em -.06em;font-size:104px}
  /* cybersecurity: lo scudo (al centro, come le forme di particelle) resta in alto e le voci, tutte con la
     descrizione, gli scorrono sotto */
  .ready .cyber{height:auto}
  .ready .cyber-sticky{position:relative;top:auto;display:flex;flex-direction:column;align-items:stretch;height:auto;padding:12vh 16px 10vh;gap:0}
  .cyber-text{display:contents}
  .cyber .kicker{order:1}
  .cyber .h2{order:2}
  .cyber-intro{display:none}
  /* la fascia dello scudo parte dal bordo dello schermo (sotto il menu) ed è piena fin sotto la percentuale:
     quello che scorre sotto non si vede né sopra né dietro i numeri */
  .cyber-visual{order:3;align-self:stretch;position:sticky;top:0;z-index:2;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin:0 -16px;padding:62px 16px 26px;background:linear-gradient(var(--bg) calc(100% - 20px),transparent)}
  .shield{width:min(150px,40vw)}
  .shield-status{margin:0;font-size:11px}
  .shield-status .pct{font-size:20px}
  .cyber-list{order:4;width:100%;margin:4px 0 0}
  .cyber .p-link{order:5}
  .cyber-list li{opacity:.5}
  .cyber-list li.on,.cyber-list li.done{opacity:1}
  .cyber-list span{max-height:none;margin-top:4px}
  /* una giornata tipo: le righe del terminale vanno a capo invece di essere tagliate */
  .ops{padding:12vh 16px 10vh}
  .term{background:rgb(16 15 14 / .94);backdrop-filter:none;-webkit-backdrop-filter:none}
  .term-body .out{white-space:pre-wrap;overflow-wrap:anywhere}
  .meter{background:rgb(16 15 14 / .9);backdrop-filter:none;-webkit-backdrop-filter:none}
}

@media (prefers-reduced-motion:reduce){
  .veil{transition:none}
  .ready .panel .fuori{transform:none}
  .grain,.caret,.scroll-hint i::after,.term-body .cur,.belt-track,.aurora i,.shield .broken line{animation:none}
  .belt-track{flex-wrap:wrap;width:auto;justify-content:center;padding:0 var(--pad)}
}