/* Inter variabile, sottoinsieme latino, servito da qui: 48 KB una volta sola,
   nessuna chiamata a un CDN esterno (niente terzi, niente round-trip in piu'). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;
font-display:swap;src:url(fonts/inter-latin-var.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
U+FEFF,U+FFFD}

/* ---------------------------------------------------------------- tokens */
:root{
--bg:#08090b;--surface:#0c0e12;--raised:#13161c;
--fg:#f4f6f9;--fg-2:#c3cad4;--muted:#8a94a3;
--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);
--accent:#7d97ff;--accent-ink:#080a0e;--accent-soft:rgba(125,151,255,.12);
--signal:#ff7f6a;--good:#4ade80;
--shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -16px rgba(0,0,0,.7);
--glow:rgba(125,151,255,.22);
color-scheme:dark;

--sans:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

--page:76rem;--text:44rem;
--r-s:8px;--r-m:12px;--r-l:18px;--r-xl:26px;
--ease:cubic-bezier(.22,.61,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--t-fast:130ms;--t-mid:300ms;--t-slow:620ms;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
--bg:#fbfbfd;--surface:#fff;--raised:#f4f5f8;
--fg:#0a0c10;--fg-2:#39414c;--muted:#5f6773;
--line:rgba(10,12,16,.10);--line-2:rgba(10,12,16,.18);
--accent:#2b52e0;--accent-ink:#fff;--accent-soft:rgba(43,82,224,.10);
--signal:#c0392b;--good:#0a7c48;
--shadow:0 1px 2px rgba(10,12,16,.05),0 12px 32px -12px rgba(10,12,16,.18);
--glow:rgba(43,82,224,.16);
color-scheme:light;
}}
:root[data-theme="light"]{
--bg:#fbfbfd;--surface:#fff;--raised:#f4f5f8;
--fg:#0a0c10;--fg-2:#39414c;--muted:#5f6773;
--line:rgba(10,12,16,.10);--line-2:rgba(10,12,16,.18);
--accent:#2b52e0;--accent-ink:#fff;--accent-soft:rgba(43,82,224,.10);
--signal:#c0392b;--good:#0a7c48;
--shadow:0 1px 2px rgba(10,12,16,.05),0 12px 32px -12px rgba(10,12,16,.18);
--glow:rgba(43,82,224,.16);
color-scheme:light;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg-2);
font:1rem/1.65 var(--sans);font-optical-sizing:auto;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:clip}
img,svg{max-width:100%;height:auto}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* L'intestazione e' appiccicata: senza questo margine un salto a un'ancora
   lascia il titolo nascosto sotto la barra. */
[id]{scroll-margin-top:5.5rem}

.skip{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.6rem 1rem;
border-radius:var(--r-s);background:var(--accent);color:var(--accent-ink);
font-weight:600;transition:top var(--t-fast) var(--ease)}
.skip:focus{top:1rem}
.sr,caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* L'interruttore del tema non fa nulla senza JavaScript: se non c'e', non deve
   nemmeno esistere per chi usa un lettore di schermo. */
.no-js .theme{display:none}

/* --------------------------------------------------------------- tipografia */
h1,h2,h3,h4{color:var(--fg);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,1.35rem+2.7vw,3.3rem);line-height:1.04;letter-spacing:-.035em}
h2{font-size:clamp(1.35rem,1.15rem+.85vw,1.85rem);line-height:1.15;letter-spacing:-.024em;
margin:3.5rem 0 .9rem}
h3{font-size:1.0625rem;line-height:1.35;letter-spacing:-.012em;margin:2rem 0 .6rem}
h1+.lede,h2+p,h3+p{margin-top:0}
p{margin:0 0 1rem;text-wrap:pretty}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px;
transition:color var(--t-fast) var(--ease)}
a:hover{text-decoration:underline}
b,strong{color:var(--fg);font-weight:600}
ul{padding-left:1.15rem;margin:0 0 1rem}
li{margin:.3rem 0}
.lede{font-size:clamp(1.05rem,1rem+.45vw,1.28rem);line-height:1.45;color:var(--fg-2);
letter-spacing:-.012em;margin:0 0 1rem;max-width:38ch;text-wrap:balance}
.eyebrow{font:600 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin:0 0 1rem;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
box-shadow:0 0 0 4px var(--accent-soft);flex:none}
.meta{font:.8125rem/1.5 var(--mono);color:var(--muted);letter-spacing:.01em;margin:0 0 2rem}
.note{border-left:2px solid var(--line-2);padding:.15rem 0 .15rem 1rem;color:var(--muted);
font-size:.95rem;margin:0 0 1.25rem}
.prose{max-width:var(--text)}
.prose>h2:first-child{margin-top:1.5rem}
.prose code{font:.875em/1 var(--mono);background:var(--raised);border-radius:5px;
padding:.15em .4em}

/* ---------------------------------------------------------------- struttura */
.wrap{max-width:var(--page);margin:0 auto;padding:0 1.5rem}
main{display:block;padding-bottom:2rem}
section{padding:0}
hr.rule{border:0;border-top:1px solid var(--line);margin:4rem 0 0}

.progress{position:fixed;inset:0 0 auto;height:2px;z-index:60;transform:scaleX(0);
transform-origin:0 50%;background:linear-gradient(90deg,var(--accent),var(--signal))}
@supports (animation-timeline:scroll()){
.progress{animation:grow linear both;animation-timeline:scroll(root block)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

header.top{position:sticky;top:0;z-index:50;background:var(--bg);
border-bottom:1px solid transparent;transition:border-color var(--t-mid) var(--ease),
background-color var(--t-mid) var(--ease)}
@supports (backdrop-filter:blur(1px)){
header.top{background:color-mix(in srgb,var(--bg) 72%,transparent);
backdrop-filter:blur(18px) saturate(180%)}}
header.top.stuck{border-bottom-color:var(--line)}
header.top .wrap{display:flex;align-items:center;gap:1rem;height:3.75rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--fg);font-weight:600;
letter-spacing:-.02em;font-size:.95rem;white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--fg)}
.brand .mark{color:var(--accent);flex:none;transition:transform var(--t-mid) var(--ease-out)}
.brand:hover .mark{transform:rotate(-6deg) scale(1.06)}
nav.site{display:flex;align-items:center;gap:.25rem;margin-left:auto}
nav.site a{color:var(--muted);font-size:.875rem;font-weight:500;padding:.45rem .7rem;
border-radius:var(--r-s)}
nav.site a:hover{color:var(--fg);background:var(--raised);text-decoration:none}
nav.site a[aria-current="page"]{color:var(--fg)}
.theme{display:grid;place-items:center;width:2.1rem;height:2.1rem;flex:none;
border:1px solid var(--line);border-radius:var(--r-s);background:transparent;
color:var(--muted);cursor:pointer;transition:color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.theme:hover{color:var(--fg);border-color:var(--line-2)}
.theme:active{transform:scale(.94)}
.theme .sun{display:none}
:root[data-theme="light"] .theme .sun,html.light .theme .sun{display:block}
:root[data-theme="light"] .theme .moon,html.light .theme .moon{display:none}

nav.crumbs{font:.8125rem/1 var(--mono);color:var(--muted);padding:1.5rem 0 0}
nav.crumbs .wrap{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
nav.crumbs a{color:var(--muted)}
nav.crumbs a:hover{color:var(--fg)}
nav.crumbs .sep{opacity:.45}

footer.site{border-top:1px solid var(--line);padding:3rem 0 4rem;margin-top:5rem;
color:var(--muted);font-size:.875rem}
footer.site .cols{display:grid;gap:2rem;
grid-template-columns:minmax(15rem,1.7fr) repeat(3,minmax(8rem,1fr))}
footer.site h4{font:600 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin:0 0 .9rem}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin:.4rem 0}
footer.site a{color:var(--fg-2)}
footer.site .fine{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);
display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8125rem}

/* -------------------------------------------------------------------- hero */
/* `overflow-x:clip` e non `hidden`: taglia le luci dello sfondo senza creare un
   contenitore di scorrimento, che romperebbe l'intestazione appiccicata. */
.hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 1rem;isolation:isolate;
overflow-x:clip}
.hero .aura{position:absolute;z-index:-1;inset:-14rem 0 auto;height:44rem;
pointer-events:none;
background:radial-gradient(46% 52% at 50% 30%,var(--glow),transparent 72%)}
.hero .grid-bg{position:absolute;z-index:-1;inset:-6rem 0 auto;height:32rem;
pointer-events:none;opacity:.5;
background-image:linear-gradient(var(--line) 1px,transparent 1px),
linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(60% 70% at 50% 20%,#000,transparent 75%);
mask-image:radial-gradient(60% 70% at 50% 20%,#000,transparent 75%)}
@supports (animation-timeline:scroll()){
.hero .grid-bg,.hero .aura{animation:drift linear both;animation-timeline:scroll(root block);
animation-range:0 60vh}}
@keyframes drift{to{transform:translate3d(0,-3rem,0);opacity:0}}
.hero h1{max-width:16ch;margin-bottom:1.25rem}
.hero .lede{max-width:44ch;font-size:clamp(1.1rem,1rem+.6vw,1.4rem)}
.hero .actions{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.75rem 0 0}
.hero .split{display:grid;gap:clamp(2.5rem,4vw,4rem);align-items:center}
@media (min-width:64rem){
.hero{padding-bottom:clamp(2rem,5vw,4rem)}
.hero .split{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
.hero .split .stage{margin:0}
.hero h1{max-width:14ch}
}

/* ----------------------------------------------------------------- bottoni */
.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;gap:.5rem;
font:600 .9375rem/1 var(--sans);letter-spacing:-.01em;padding:.8rem 1.25rem;
border:1px solid transparent;border-radius:var(--r-m);cursor:pointer;
background:var(--accent);color:var(--accent-ink);
transform:translate3d(var(--mx),var(--my),0);
transition:transform var(--t-fast) var(--ease),filter var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn:active{transform:translate3d(var(--mx),var(--my),0) scale(.97)}
.btn[disabled]{opacity:.55;cursor:default;filter:none}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--raised);filter:none}
.btn .arrow{transition:transform var(--t-mid) var(--ease-out)}
.btn:hover .arrow{transform:translateX(3px)}

/* ------------------------------------------------------------------- carte */
.card{position:relative;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-l);padding:1.5rem}
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
background:linear-gradient(140deg,var(--accent),transparent 45%);opacity:0;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
transition:opacity var(--t-mid) var(--ease)}
.card:hover::after{opacity:.6}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;
margin:2rem 0}
.kpi{border:1px solid var(--line);border-radius:var(--r-m);padding:1.1rem 1.2rem;
background:var(--surface)}
.kpi b{display:block;font-size:clamp(1.6rem,1.3rem+1vw,2.1rem);line-height:1.1;
letter-spacing:-.035em;color:var(--fg);font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1}
.kpi span{display:block;margin-top:.35rem;font:.75rem/1.35 var(--mono);
letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;list-style:none;margin:0 0 1rem}
.chips li{margin:0}
.chips a,.chips span{display:inline-block;background:var(--raised);border:1px solid var(--line);
border-radius:999px;padding:.28rem .75rem;font-size:.8125rem;color:var(--fg-2)}
.chips a:hover{border-color:var(--line-2);color:var(--fg);text-decoration:none}

/* ----------------------------------------------------------------- tabelle */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.5rem;
border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:34rem}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);
white-space:nowrap}
thead th{position:sticky;top:0;z-index:1;background:var(--raised);
font:600 .6875rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--muted)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color var(--t-fast) var(--ease)}
tbody tr:hover{background:var(--raised)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1}
td.rank{font:500 .8125rem/1 var(--mono);color:var(--muted);width:1%}
tr.me td{background:var(--accent-soft)}
tr.me td:first-child,tr.me a{color:var(--fg);font-weight:600}

/* ------------------------------------------------------------ classifica */
.rank{list-style:none;padding:0;margin:2rem 0;border:1px solid var(--line);
border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.rank li{margin:0;border-bottom:1px solid var(--line)}
.rank li:last-child{border-bottom:0}
.rank a.row,.rank span.row{display:grid;
grid-template-columns:2.5rem minmax(7rem,11rem) 1fr auto auto;
gap:1rem;align-items:center;padding:.85rem 1.15rem;color:var(--fg-2);
transition:background-color var(--t-fast) var(--ease)}
.rank a.row:hover{background:var(--raised);text-decoration:none}
.rank .pos{font:500 .8125rem/1 var(--mono);color:var(--muted);text-align:right}
.rank .who{color:var(--fg);font-weight:550;letter-spacing:-.012em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .val{font:600 .9375rem/1 var(--sans);color:var(--fg);
font-variant-numeric:tabular-nums;min-width:3.5rem;text-align:right}
.rank .cov{font:.75rem/1 var(--mono);color:var(--muted);text-align:right;
min-width:3.25rem}
.rank li:first-child .val{color:var(--accent)}

/* `display:block` non e' decorativo: dentro la classifica la barra e' annidata
   in uno <span>, e un elemento in linea ignora altezza e larghezza. */
.track{display:block;position:relative;height:.5rem;border-radius:999px;
overflow:hidden;background:color-mix(in srgb,var(--fg) 10%,transparent)}
.rank .track-cell{display:block;min-width:0}
.track i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
border-radius:999px;background:linear-gradient(90deg,var(--accent),
color-mix(in srgb,var(--accent) 55%,var(--signal)));
transition:transform var(--t-slow) var(--ease-out) calc(var(--i,0)*45ms)}
.track.mine i{background:linear-gradient(90deg,var(--signal),
color-mix(in srgb,var(--signal) 70%,var(--accent)))}
.in .track i,.no-js .track i{transform:scaleX(var(--w,0))}

/* --------------------------------------------------------------- confronto */
.compare{display:grid;gap:.9rem;margin:2rem 0}
.compare .row{display:grid;grid-template-columns:minmax(6rem,10rem) 1fr auto;gap:1rem;
align-items:center;font-size:.9375rem}
.compare .name{color:var(--muted);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.compare .row.me .name{color:var(--fg);font-weight:600}
.compare .track{height:.85rem;border-radius:var(--r-s)}
.compare .track i{border-radius:var(--r-s)}
.compare .val{font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums;
min-width:3.25rem;text-align:right}

/* ------------------------------------------------------ visualizzazione 3D */
.stage{perspective:1400px;margin:3rem 0 0}
.tilt{--px:0;--py:0;transform:rotateX(calc(var(--py)*-3.5deg))
rotateY(calc(var(--px)*5deg));transform-style:preserve-3d;
transition:transform 480ms var(--ease-out);will-change:transform}
.tilt .card{box-shadow:var(--shadow)}
.tilt .float{transform:translateZ(28px)}

/* ------------------------------------------------------------------- call */
.cta{position:relative;overflow:hidden;border:1px solid var(--line);
border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,2.75rem);margin:4rem 0 0;
background:var(--surface)}
.cta::before{content:"";position:absolute;inset:auto -30% -60% ;height:22rem;
z-index:0;pointer-events:none;
background:radial-gradient(50% 60% at 50% 100%,var(--glow),transparent 70%)}
.cta>*{position:relative;z-index:1}
.cta h2{margin-top:0}
.cta .lede{max-width:52ch}

/* ------------------------------------------------------------------- form */
form.contact{display:grid;gap:.85rem;margin:1.5rem 0 0;max-width:34rem}
form.contact .pair{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
form.contact .field{display:grid;gap:.35rem;margin:0}
form.contact label{font:600 .75rem/1 var(--mono);letter-spacing:.08em;
text-transform:uppercase;color:var(--muted)}
form.contact input,form.contact textarea{width:100%;font:1rem/1.5 var(--sans);
color:var(--fg);background:var(--bg);border:1px solid var(--line-2);
border-radius:var(--r-m);padding:.7rem .85rem;
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
form.contact input::placeholder,form.contact textarea::placeholder{color:var(--muted);
opacity:.75}
form.contact input:focus,form.contact textarea:focus{outline:0;border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft)}
form.contact input:user-invalid{border-color:var(--signal)}
form.contact textarea{min-height:5.5rem;resize:vertical}
form.contact .btn{justify-self:start;margin-top:.25rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{color:var(--muted);font-size:.8125rem;line-height:1.55;margin:.35rem 0 0}
.formok{display:flex;gap:.75rem;align-items:flex-start;border:1px solid var(--good);
border-radius:var(--r-m);padding:1rem 1.15rem;margin:1.5rem 0 0;color:var(--fg);
max-width:34rem;background:var(--surface)}
.formok svg{color:var(--good);flex:none;margin-top:.15rem}
.formerr{color:var(--signal);font-size:.875rem;margin:.35rem 0 0}

/* -------------------------------------------------------------- movimento */
.js .reveal{opacity:0;transform:translate3d(0,14px,0)}
.js .reveal.in{opacity:1;transform:none;
transition:opacity var(--t-slow) var(--ease) calc(var(--i,0)*55ms),
transform var(--t-slow) var(--ease-out) calc(var(--i,0)*55ms)}

/* ------------------------------------------------------------- adattivita' */
@media (max-width:900px){
footer.site .cols{grid-template-columns:1fr 1fr}
footer.site .cols>*:first-child{grid-column:1/-1}
}
@media (max-width:420px){footer.site .cols{grid-template-columns:1fr}}
@media (max-width:640px){
.wrap{padding:0 1.15rem}
nav.site a{padding:.4rem .5rem}
nav.site a.hide-s{display:none}
.rank a.row{grid-template-columns:1.75rem 1fr auto;gap:.75rem;row-gap:.5rem}
.rank .track-cell{grid-column:1/-1;grid-row:2}
.rank .cov{display:none}
form.contact .pair{grid-template-columns:1fr}
.compare .row{grid-template-columns:minmax(5rem,7rem) 1fr auto;gap:.65rem;
font-size:.875rem}
}

/* ------------------------------------------------------------- preferenze */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important}
.js .reveal{opacity:1;transform:none}
.track i{transform:scaleX(var(--w,0))}
.tilt{transform:none!important}
.btn{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
header.top{background:var(--bg);backdrop-filter:none}
.hero .aura,.cta::before{display:none}
}
@media (prefers-contrast:more){
:root{--line:var(--line-2);--muted:var(--fg-2)}
.card,.kpi,.scroll,.rank,.cta{border-color:var(--fg-2)}
}
@media print{
header.top,.progress,footer.site,.cta,nav.crumbs,.theme{display:none!important}
body{background:#fff;color:#000}
.scroll{border:0}
a{color:#000;text-decoration:underline}
}