/* Dall'energia venduta all'energia gestita — pagina scroll-driven */
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-standard-normal.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --bg:#06111B; --bg2:#0C2133; --fg:#EEF4F8; --muted:#8EA4B5; --dim:#3E5568;
  --cyan:#46D2F0; --amber:#FFA53D; --panel:#0D2335; --edge:#2A4A64;
  --pad:clamp(20px,5vw,96px);
  --spin:0deg; --tone:0; --py:0px; --prog:0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Archivo',system-ui,sans-serif;font-weight:450;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- sfondo: gradiente, griglia a punti in parallasse, tono ambra→ciano ---------- */
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 90% at 72% 38%,var(--bg2),var(--bg) 70%);overflow:hidden}
.bg::before{content:'';position:absolute;inset:-60px;background-image:radial-gradient(rgba(159,195,218,.16) 1.3px,transparent 1.6px);
  background-size:48px 48px;transform:translate3d(0,var(--py),0)}
.bg i{position:absolute;width:90vmax;height:90vmax;border-radius:50%;filter:blur(20px);pointer-events:none}
.bg .warm{right:-35vmax;bottom:-50vmax;background:radial-gradient(closest-side,rgba(255,159,69,.30),rgba(208,96,58,.10) 55%,transparent);opacity:calc(1 - var(--tone))}
.bg .cool{right:-30vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(70,210,240,.18),rgba(70,210,240,.05) 55%,transparent);opacity:var(--tone)}

/* ---------- barra di avanzamento, marchi, navigazione a punti ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:50;transform-origin:0 50%;transform:scaleX(var(--prog));
  background:linear-gradient(90deg,var(--amber),var(--cyan))}
.brand{position:fixed;left:var(--pad);top:18px;z-index:40;display:flex;align-items:center;gap:10px;
  font:500 11px/1 'Plex Mono',monospace;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;pointer-events:none}
.brand b{color:var(--fg);font-weight:500}
.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:10px}
.dots a{position:relative;display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(142,164,181,.6);transition:transform .3s,background .3s,border-color .3s}
.dots a.on{background:var(--cyan);border-color:var(--cyan);transform:scale(1.35);box-shadow:0 0 12px rgba(70,210,240,.7)}
.dots a span{position:absolute;right:20px;top:50%;transform:translate(8px,-50%);white-space:nowrap;opacity:0;pointer-events:none;
  font:500 11px/1 'Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);background:rgba(13,35,53,.92);
  padding:7px 10px;border-radius:6px;border:1px solid var(--edge);transition:opacity .25s,transform .25s}
.dots a:hover span,.dots a:focus-visible span{opacity:1;transform:translate(0,-50%)}

/* ---------- rivelazioni legate allo scroll: --r va da 0 a 1 ---------- */
[data-t]{opacity:var(--r,1);transform:translate3d(0,calc((1 - var(--r,1)) * 26px),0)}
.blur[data-t]{filter:blur(calc((1 - var(--r,1)) * 10px))}

/* ---------- apertura ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-content:center;padding:96px var(--pad) 120px}
.hero .in{max-width:1100px;transform:translate3d(0,calc(var(--hq,0) * -12vh),0) scale(calc(1 - var(--hq,0) * .06));opacity:calc(1 - var(--hq,0) * 1.1)}
.eyebrow{font:500 clamp(11px,1.05vw,14px)/1.4 'Plex Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.eyebrow.cy{color:var(--cyan)}
.hero h1{font-weight:760;font-size:clamp(40px,6.6vw,104px);line-height:.98;letter-spacing:-.025em;margin:0 0 26px;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero p.lead{font-size:clamp(18px,1.7vw,24px);color:var(--muted);max-width:40ch;margin:0 0 36px;line-height:1.4}
.hero .row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.logos{display:flex;gap:10px;align-items:center}
.logo{--lh:48px;--k:.6;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;height:var(--lh);padding:0 14px;overflow:hidden}
.logo img{height:calc(var(--lh) * var(--k));width:auto;max-width:100%;object-fit:contain}
.logo.apio{--k:.82} .logo.k4{--k:.6} .logo.zte{--k:.54}
.cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 11px/1 'Plex Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:calc(1 - var(--hq,0) * 3)}
.cue svg{width:22px;height:22px}

/* ---------- scene con palcoscenico fisso durante lo scroll ---------- */
.scene{position:relative;height:calc(var(--h) * 1vh)}
@supports (height:1svh){.scene{height:calc(var(--h) * 1svh)}}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}
@supports (height:1svh){.stage{height:100svh}}
.inner{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(16px,3vw,56px);
  padding:72px var(--pad) 110px;transform:translate3d(0,calc(var(--q,0) * -7vh),0) scale(calc(1 - var(--q,0) * .05));opacity:calc(1 - var(--q,0) * .85);transform-origin:50% 30%}
.copy{position:relative;z-index:2}
.art{position:relative;z-index:1;min-width:0}
.art svg{display:block;width:100%;height:auto;max-height:76vh;overflow:visible}
.art .h{font-family:'Archivo',sans-serif;font-weight:760}
.art .b{font-family:'Archivo',sans-serif;font-weight:450}
.art .m{font-family:'Plex Mono',monospace;font-weight:500;letter-spacing:2.5px}

h2.big{font-weight:760;font-size:clamp(32px,4.5vw,74px);line-height:1.02;letter-spacing:-.022em;margin:0}
.mega{font-weight:800;font-size:clamp(84px,14vw,230px);line-height:.86;letter-spacing:-.04em;margin:0 0 6px;font-variant-numeric:tabular-nums}
.mega.m2{font-size:clamp(64px,9.2vw,170px);white-space:nowrap}
.ln{display:block}
.amber{color:var(--amber)} .cyan{color:var(--cyan)}
.sub{font-size:clamp(18px,1.9vw,30px);line-height:1.35;color:var(--muted);margin:22px 0 0;max-width:30ch}
.sub strong{color:var(--fg);font-weight:700}
.solid{color:var(--fg);font-weight:600}
.note{position:absolute;left:var(--pad);bottom:34px;z-index:3;margin:0;font:500 11px/1.5 'Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);max-width:min(60vw,640px)}
.glow-amber{position:absolute;right:-12%;bottom:-38%;width:80%;height:85%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,159,69,.42),rgba(208,96,58,.12) 55%,transparent);opacity:var(--g,0)}

/* parole che si accendono (scena 3) */
.word{transition:none;font-weight:650}

/* scena 4: occhiello e titolo che cambiano */
.swap{display:grid}
.swap>*{grid-area:1/1}
.s4 .head{font-weight:760;font-size:clamp(40px,5.2vw,88px);white-space:nowrap;line-height:1;letter-spacing:-.025em;margin:6px 0 18px}
.s4 .list{font-weight:760;font-size:clamp(26px,3.6vw,58px);line-height:1.18;letter-spacing:-.015em;margin:0}
.s4 .list span.ext{color:var(--cyan)}
.s4 .thanks{font-size:clamp(18px,1.9vw,30px);margin:24px 0 0}

/* tracciato 01 · 02 · 03 */
.track{display:flex;gap:clamp(10px,1.6vw,28px);margin:0 0 clamp(20px,4vh,44px)}
.track div{flex:0 1 210px}
.track i{display:block;height:5px;border-radius:3px;background:var(--dim);overflow:hidden;margin-bottom:12px}
.track i b{display:block;height:100%;width:calc(var(--f,0) * 100%);background:var(--cyan);box-shadow:0 0 12px rgba(70,210,240,.8)}
.track span{font:500 clamp(10px,.95vw,14px)/1 'Plex Mono',monospace;letter-spacing:.16em;color:var(--muted)}
.track .on span{color:var(--fg)}

/* ---------- numeri dei partner ---------- */
.s9 .inner{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(18px,3.4vh,40px)}
.partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,40px)}
.pcard{border-left:2px solid var(--edge);padding-left:clamp(14px,1.6vw,26px)}
.pcard .logo{--lh:clamp(52px,6.4vh,72px);width:clamp(150px,13vw,210px);margin-bottom:14px}
.pcard .role{font:500 clamp(10px,.9vw,13px)/1.4 'Plex Mono',monospace;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin:0 0 clamp(10px,2vh,22px)}
.kpi{margin:0 0 clamp(8px,1.8vh,18px)}
.kpi b{display:block;font-weight:760;font-size:clamp(30px,3.5vw,58px);line-height:1;letter-spacing:-.02em;color:var(--cyan);font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:clamp(14px,1.15vw,18px);color:var(--fg);opacity:.9;margin-top:6px}

/* ---------- finale ---------- */
.s10 .inner{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.s10 .tag{font-weight:760;font-size:clamp(38px,5vw,84px);line-height:1.02;letter-spacing:-.025em;margin:0 0 clamp(20px,3.5vh,40px)}
.roles{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px}
.roles figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.roles .logo{--lh:clamp(54px,7vh,76px);width:clamp(120px,11vw,180px)}
.roles figcaption{font:500 10px/1.3 'Plex Mono',monospace;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;text-align:center}
.final{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.final .alt{color:var(--muted);font-size:clamp(15px,1.3vw,19px);margin:0}
.halo{position:relative;display:grid;place-items:center;padding:clamp(20px,3vw,48px)}
.halo i{position:absolute;inset:0;margin:auto;width:100%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(70,210,240,.55);
  transform:scale(var(--k,0));opacity:calc(1 - var(--k,0));pointer-events:none}
.halo::before{content:'';position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(closest-side,rgba(70,210,240,.28),transparent);opacity:var(--hg,0);pointer-events:none}

/* ---------- CTA ---------- */
.cta-wrap{position:absolute;right:var(--pad);bottom:28px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cta-wrap small{font:500 10px/1 'Plex Mono',monospace;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.cta{--s:1;--mx:0px;--my:0px;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:14px;
  padding:10px 10px 10px 24px;border-radius:999px;text-decoration:none;color:#04121C;
  font:700 clamp(15px,1.1vw,17px)/1 'Archivo',sans-serif;letter-spacing:.005em;white-space:nowrap;
  border:2.5px solid transparent;
  background:linear-gradient(115deg,#9DEEFF 0%,#46D2F0 42%,#22B3D6 100%) padding-box,
    conic-gradient(from var(--spin),var(--amber),var(--cyan),#EEF4F8,var(--cyan),var(--amber)) border-box;
  box-shadow:0 14px 34px -14px rgba(70,210,240,.75),inset 0 1px 0 rgba(255,255,255,.55);
  transform:translate3d(var(--mx),var(--my),0) scale(var(--s));transition:transform .35s cubic-bezier(.2,.9,.2,1.2),box-shadow .35s}
.cta::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:var(--shine,160%) 0;mix-blend-mode:soft-light}
.cta .lbl{position:relative}
.cta .arr{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#04121C;color:var(--cyan);flex:none;
  transition:transform .35s cubic-bezier(.2,.9,.2,1.2)}
.cta .arr svg{width:18px;height:18px}
.cta:hover,.cta:focus-visible{--s:1.06;box-shadow:0 22px 46px -14px rgba(70,210,240,.95),0 0 0 6px rgba(70,210,240,.14),inset 0 1px 0 rgba(255,255,255,.6)}
.cta:hover .arr,.cta:focus-visible .arr{transform:translateX(3px) rotate(-45deg)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:5px}
.cta:active{--s:.97}
.cta.xl{font-size:clamp(18px,1.8vw,26px);gap:18px;padding:14px 14px 14px clamp(26px,2.4vw,40px)}
.cta.xl .arr{width:clamp(48px,4vw,62px);height:clamp(48px,4vw,62px)}
.cta.xl .arr svg{width:24px;height:24px}

/* ---------- piè di pagina ---------- */
footer{padding:48px var(--pad) 60px;border-top:1px solid rgba(42,74,100,.6);color:var(--muted);font-size:13px;line-height:1.6;display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between}
footer p{margin:0}

/* ---------- schermi stretti e verticali ---------- */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .dots{display:none}
  .inner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start;align-content:start;gap:clamp(10px,2.4vh,26px);
    padding:58px var(--pad) 128px}
  .art{align-self:center}
  .art svg{max-height:40svh;margin:0 auto}
  .mega{font-size:clamp(76px,24vw,150px)}
  h2.big{font-size:clamp(30px,8.6vw,56px)}
  .sub{font-size:clamp(16px,4.4vw,22px);margin-top:12px}
  .s4 .head{font-size:clamp(36px,10.5vw,64px);margin:2px 0 10px}
  .s4 .list{font-size:clamp(22px,6.2vw,38px)}
  .s4 .thanks{margin-top:12px}
  .note{bottom:96px;font-size:9.5px;max-width:calc(100% - 2 * var(--pad))}
  .cta-wrap{left:var(--pad);right:var(--pad);bottom:22px;align-items:stretch}
  .cta-wrap small{display:none}
  .cta{justify-content:space-between}
  .track{margin-bottom:12px}
  .s9 .inner,.s10 .inner{grid-template-rows:none}
  .partners{grid-template-columns:1fr;gap:18px}
  .pcard{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;border-left:0;border-top:1px solid var(--edge);padding:14px 0 0}
  .pcard .logo{--lh:46px;width:118px;margin:0}
  .pcard .role{align-self:center;margin:0}
  .pcard .kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .kpi{margin:0}
  .kpi b{font-size:clamp(22px,6.4vw,34px)}
  .kpi span{font-size:12px;line-height:1.25}
  .s10 .inner{grid-template-columns:minmax(0,1fr)}
  .roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .roles figure{min-width:0}
  .roles .logo{--lh:50px;width:100%;padding:0 8px}
  .roles figcaption{font-size:8.5px;letter-spacing:.1em}
  .s9 .note{position:static;margin:2px 0 0}
}
/* sezioni il cui contenuto non sta in uno schermo: scorrono senza palcoscenico fisso */
.scene.flow{height:auto}
.scene.flow .stage{position:relative;height:auto;min-height:100vh;overflow:visible}
@supports (height:1svh){.scene.flow .stage{min-height:100svh}}
.scene.flow .inner{height:auto;min-height:inherit;padding-bottom:150px}

@media (prefers-reduced-motion:reduce){
  .cta,.cta .arr{transition:none}
}