/* Esperienza a scena: prototipo */
.xp{background:#07090a;overflow-x:hidden}
.xp-bar{position:fixed;z-index:50;top:18px;left:3%;right:3%;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-radius:12px;background:rgba(14,20,21,.6);border:1px solid rgba(234,255,239,.12);backdrop-filter:blur(16px)}
.xp-bar nav{display:flex;gap:22px;align-items:center;font-size:14px}
.xp-bar nav a:hover{color:var(--orange)}
.xp-cta{padding:9px 14px;border-radius:6px;background:var(--orange);color:#19120c;font-weight:700}
.xp-cta:hover{color:#19120c!important;background:#ff985d}
.xp-progress{position:fixed;z-index:51;left:0;right:0;top:0;height:3px;background:#ffffff10}
.xp-progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#77c7bc,var(--orange))}

.scene{position:relative}
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}

/* Scena 1 */
.s-intro .stage{background:#07090a}
.orb{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--orange);box-shadow:0 0 40px 6px #ff7a2f70;animation:orb-pulse 1.8s ease-in-out infinite}
@keyframes orb-pulse{50%{box-shadow:0 0 70px 16px #ff7a2f40}}
.intro-title{position:relative;z-index:2;margin:0;text-align:center;font-size:clamp(46px,9vw,150px);font-weight:600;letter-spacing:-.05em;line-height:1;padding:0 6%;transform:translateY(-.6em)}
.intro-title .ch{display:inline-block;opacity:0}
.intro-sub{position:absolute;z-index:2;left:0;right:0;top:calc(50% + clamp(40px,7vw,110px));margin:0;text-align:center;font-size:clamp(17px,1.8vw,24px);color:var(--muted);opacity:0}
.hint{position:absolute;bottom:34px;left:0;right:0;margin:0;text-align:center;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#7d8f89}
.hint span{display:block;width:1px;height:38px;margin:0 auto 12px;background:linear-gradient(transparent,var(--orange));animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Scene 2–3 */
.s-chaos .stage{background:#0b1011}
.chaos-head{position:absolute;z-index:4;left:6%;top:15vh;max-width:640px;pointer-events:none}
.chaos-head h2{position:absolute;left:0;top:0;width:max-content;max-width:88vw;margin:0;font-size:clamp(34px,4.6vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.h-ai,.h-order{opacity:0}
.meter{position:absolute;z-index:4;right:6%;top:16vh;text-align:right}
.meter-label{display:block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#8a9e96;margin-bottom:6px}
.meter-num{display:block;font-size:clamp(60px,8vw,130px);font-weight:300;letter-spacing:-.05em;line-height:1;color:#e05a4b;font-variant-numeric:tabular-nums}
.pile{position:absolute;inset:0;z-index:2}
.item{position:absolute;left:50%;top:58%;max-width:280px;padding:13px 16px;border-radius:10px;font-size:14px;line-height:1.35;color:#dfe6e3;background:#152022;border:1px solid #ffffff1a;box-shadow:0 18px 40px -12px #000d;white-space:nowrap;will-change:transform,opacity}
.item b{font-weight:650}
.item small{display:block;color:#8a9e96;font-size:12px}
.item.mail:before{content:"✉ ";color:#77c7bc}
.item.file{font-family:Consolas,"SFMono-Regular",monospace;font-size:12.5px;background:#121a1b}
.item.file:before{content:"▤ ";color:#9fb3ad}
.item.note{background:#3a2f12;border-color:#f2c94c40;color:#f6e3a6;font-weight:600}
.item.notif{background:#2a1515;border-color:#e05a4b55;color:#f1b8b0}
.item.notif:before{content:"● ";color:#e05a4b}
.item.cal{background:#1c1730;border-color:#9b8cf055;color:#d3cbff}
.sweep{position:absolute;z-index:5;left:0;top:58%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--orange);box-shadow:0 0 60px 20px #ff7a2f66,0 0 0 0 #ff7a2f;opacity:0}
.order{position:absolute;z-index:4;left:50%;top:58%;width:min(560px,88vw);transform:translate(-50%,-50%);list-style:none;margin:0;padding:0;display:grid;gap:12px}
.order li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 20px;border-radius:12px;background:#121a1b;border:1px solid #ff7a2f40;opacity:0;font-size:16px}
.order b{font-weight:600}
.order small{color:var(--orange);font-weight:700;font-size:14px}
.ok{width:22px;height:22px;border-radius:50%;background:var(--orange);position:relative}
.ok:after{content:"";position:absolute;left:7px;top:4px;width:6px;height:11px;border:solid #12100e;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Fine */
.s-end{min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:100px 6%;background:#0b1011;border-top:1px solid var(--line)}
.end-tag{margin:0 0 18px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--orange)}
.s-end h2{max-width:900px;font-size:clamp(34px,4.5vw,70px);letter-spacing:-.04em;line-height:1.05}
.end-actions{display:flex;flex-wrap:wrap;gap:20px 30px;align-items:center;margin-top:20px}

@media(max-width:760px){
  .xp-bar{top:12px;padding:12px 16px}.xp-bar nav a:not(.xp-cta){display:none}
  .chaos-head{top:13vh;left:6%;right:6%}
  .meter{left:6%;right:auto;top:auto;bottom:7vh;text-align:left}
  .item{max-width:210px;font-size:12.5px;padding:10px 12px;top:55%}
  .order li{font-size:14px;padding:13px 14px}
  .order,.sweep{top:56%}
}

/* Senza animazioni: tutto fermo e leggibile */
.xp-static .stage{height:auto;min-height:100vh;padding:120px 6% 80px;place-items:start}
.xp-static .intro-title .ch,.xp-static .intro-sub,.xp-static .h-order,.xp-static .order li{opacity:1}
.xp-static .intro-title{transform:none;margin-top:20vh}
.xp-static .intro-sub{position:static;margin-top:20px}
.xp-static .orb,.xp-static .hint,.xp-static .pile,.xp-static .sweep,.xp-static .meter,.xp-static .h-ai{display:none}
.xp-static .h-problem{position:relative}
.xp-static .h-order{position:relative;margin-top:30px}
.xp-static .chaos-head{position:relative;left:auto;top:auto}
.xp-static .order{position:relative;left:auto;top:auto;transform:none;margin-top:40px}
.intro-title .word{display:inline-block;white-space:nowrap}
@media(min-width:761px){.item{font-size:16px;padding:15px 20px;max-width:340px;border-radius:12px}.item small{font-size:13px}.item.file{font-size:14px}.order{width:min(720px,88vw)}.order li{font-size:19px;padding:20px 24px}.order small{font-size:16px}}
@media(max-width:760px){.item{max-width:180px;white-space:normal}}

/* ===== Scene 4–7 ===== */
.kicker{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange)}

/* 4 · Metodo: pannelli che scorrono in orizzontale */
.s-method .stage{background:#0b1011;place-items:stretch;display:block}
.m-head{position:absolute;z-index:3;left:6%;top:13vh}
.m-head h2{margin:0;font-size:clamp(30px,3.6vw,56px);letter-spacing:-.035em;line-height:1.05}
.m-track{position:absolute;left:0;top:0;height:100%;display:flex;will-change:transform}
.m-panel{--c:#77c7bc;flex:none;width:100vw;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:6vw;padding:24vh 8% 10vh}
.m-num{display:block;font-size:clamp(110px,15vw,260px);font-weight:300;letter-spacing:-.06em;line-height:.85;color:var(--c)}
.m-copy h3{margin:20px 0 14px;font-size:clamp(28px,3vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.m-copy p{margin:0;max-width:440px;font-size:clamp(16px,1.3vw,19px);color:var(--muted)}
.m-dots{position:absolute;z-index:3;left:50%;bottom:6vh;display:flex;gap:10px;transform:translateX(-50%)}
.m-dots i{width:34px;height:3px;border-radius:3px;background:#ffffff26}
.m-dots i.on{background:var(--orange)}

/* scene riprese dalla home */
.m-scene .scene{--c:inherit;border:1px solid #ffffff17;border-radius:18px;background:#0e1516;padding:28px;box-shadow:0 40px 80px -30px #000}
.m-panel .scene{--c:var(--c)}
.m-scene .scene-title{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--c)}
.m-scene .scene-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #ffffff14}
.m-scene .scene-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--c);color:#0b1011;font-weight:800}
.m-scene .scene-head b{display:block;font-size:17px}.m-scene .scene-head small{color:var(--muted);font-size:13px}
.m-scene .scene-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.m-scene .scene-checks li{display:flex;gap:12px;align-items:center;padding:13px 15px;border-radius:10px;background:#ffffff08;font-size:16px}
.m-scene .scene-checks .ico-wrap{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--c) 25%,transparent);color:var(--c);font-size:13px;flex:none}
.m-scene .scene-agenda ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.m-scene .scene-agenda li{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:10px;background:#ffffff08;border-left:3px solid var(--c)}
.m-scene .scene-agenda li span{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.m-scene .scene-agenda li b{font-size:16px;font-weight:600}
.m-scene .scene-task{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:16px}
.m-scene .scene-file{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 16px;border:1px dashed #ffffff30;border-radius:12px;font-size:12.5px;color:var(--muted);text-align:center;max-width:150px}
.m-scene .scene-file .ico-wrap{font-size:30px;color:var(--text)}
.m-scene .scene-arrow{color:var(--c);font-size:22px}
.m-scene .scene-out{padding:18px;border-radius:12px;background:color-mix(in srgb,var(--c) 12%,#0b1112);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.m-scene .scene-out ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.m-scene .scene-out li{display:flex;flex-direction:column;padding-left:12px;border-left:2px solid var(--c)}
.m-scene .scene-out li b{font-size:15px}.m-scene .scene-out li span{font-size:12.5px;color:var(--muted)}

/* 5 · Numeri */
.s-numbers .stage{background:radial-gradient(ellipse at 50% 60%,#1f8a8a26,transparent 60%),#07090a;text-align:center}
.s-numbers .kicker{position:absolute;top:18vh;left:0;right:0}
.n-stack{position:relative;width:100%;height:60vh;display:grid;place-items:center}
.n-item{grid-area:1/1;opacity:0}
.n-item:first-child{opacity:1}
.n-val{font-size:clamp(120px,22vw,340px);font-weight:300;letter-spacing:-.07em;line-height:.9;color:var(--text);font-variant-numeric:tabular-nums}
.n-plus{font-size:clamp(60px,10vw,160px);font-weight:300;color:var(--orange);vertical-align:top}
.n-item p{margin:10px 0 0;font-size:clamp(18px,2vw,28px);color:var(--muted)}

/* 6 · Portale in 3D */
.s-portal .stage{background:#0b1011;perspective:1400px;display:block}
.p-head{position:absolute;z-index:3;left:0;right:0;top:12vh;text-align:center;padding:0 6%}
.p-head h2{margin:0;font-size:clamp(30px,4vw,62px);letter-spacing:-.035em;line-height:1.05}
.p-device{position:absolute;left:50%;top:58%;width:min(1000px,86vw);transform-style:preserve-3d;border-radius:16px;overflow:hidden;border:1px solid #ffffff1f;background:#0a0a0a;box-shadow:0 60px 120px -30px #000,0 0 0 1px #ff7a2f22;will-change:transform}
.p-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#151818;border-bottom:1px solid #ffffff14}
.p-bar .ai-demo-dots{display:flex;gap:6px}.p-bar .ai-demo-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff26}.p-bar .ai-demo-dots i:first-child{background:#ff7a2f99}
.p-bar .portal-shot-url{flex:0 1 320px;margin:0 auto;padding:4px 14px;border-radius:6px;background:#0b0f0f;color:#8a9e96;font-size:12px;text-align:center}
.p-views{position:relative;aspect-ratio:1600/1156}
.p-view{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0}
.p-view:first-child{opacity:1}
.p-labels{position:absolute;z-index:3;left:0;right:0;bottom:5vh;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0 6%}
.p-labels li{padding:8px 14px;border-radius:999px;border:1px solid #ffffff1f;font-size:13.5px;font-weight:600;color:var(--muted);transition:color .3s,border-color .3s,background .3s}
.p-labels li.on{color:var(--text);border-color:#ff7a2f99;background:#ff7a2f1f}

/* 7 · Chiusura: il punto diventa il pulsante */
.s-close .stage{background:#07090a;text-align:center}
.c-title{position:absolute;top:24vh;left:0;right:0;margin:0;padding:0 6%;font-size:clamp(40px,6.5vw,110px);font-weight:600;letter-spacing:-.05em;line-height:1;opacity:0}
.c-button{position:absolute;left:50%;top:60%;display:grid;place-items:center;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:999px;background:var(--orange);color:#19120c;font-weight:800;font-size:clamp(17px,1.6vw,22px);box-shadow:0 0 50px 8px #ff7a2f66;overflow:hidden;white-space:nowrap}
.c-button span{opacity:0}
.c-button:hover{background:#ff985d}
.c-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.c-links{position:absolute;left:0;right:0;bottom:8vh;display:flex;justify-content:center;gap:28px;margin:0;font-size:14px;color:var(--muted);opacity:0}
.c-links a:hover{color:var(--orange)}

@media(max-width:760px){
  .m-head{top:11vh}
  .m-panel{grid-template-columns:1fr;gap:22px;padding:24vh 7% 12vh;align-content:start}
  .m-num{font-size:84px}
  .m-copy h3{margin:10px 0 8px;font-size:26px}
  .m-copy p{font-size:15px}
  .m-scene .scene{padding:16px}
  .m-scene .scene-checks li,.m-scene .scene-agenda li b{font-size:13.5px}
  .m-scene .scene-agenda li{grid-template-columns:1fr;gap:2px;padding:9px 12px}
  .m-scene .scene-task{grid-template-columns:1fr}
  .m-scene .scene-file{flex-direction:row;max-width:none;padding:10px 12px}
  .m-scene .scene-file .ico-wrap{font-size:20px}
  .m-scene .scene-arrow{transform:rotate(90deg);justify-self:center}
  .p-device{top:52%;width:92vw}
  .p-labels{bottom:9vh}
}

/* versione ferma */
.xp-static .m-track{position:relative;display:block}
.xp-static .m-panel{width:auto;height:auto;padding:40px 0}
.xp-static .m-head,.xp-static .p-head,.xp-static .c-title,.xp-static .c-links,.xp-static .s-numbers .kicker,.xp-static .p-labels{position:relative;top:auto;bottom:auto;opacity:1}
.xp-static .m-dots{display:none}
.xp-static .n-stack{height:auto;display:grid;gap:30px}
.xp-static .n-item{grid-area:auto;opacity:1}
.xp-static .p-device{position:relative;left:auto;top:auto;margin:40px auto}
.xp-static .c-button{position:relative;left:auto;top:auto;margin:40px auto;width:auto;height:auto;padding:18px 30px}
.xp-static .c-button span{opacity:1}
.n-item:first-child{opacity:0}
.p-device{width:min(860px,72vw);top:56%}
@media(max-width:760px){.m-head{right:6%}.m-head h2{font-size:26px}.m-panel{padding-top:20vh;padding-bottom:10vh}.m-num{font-size:68px}.m-scene{max-height:40vh;overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}.p-device{width:92vw;top:52%}}

/* Versione ferma: correzioni */
.xp-static .n-item,.xp-static .n-item:first-child{opacity:1!important;transform:none!important}
.xp-static .stage{overflow:visible}
.xp-static .s-intro .stage{min-height:70vh}
.xp-static .h-problem{margin-bottom:20px}
.xp-static .chaos-head h2{width:auto}
.xp-static .m-head h2{white-space:normal}
.xp-static .p-views .p-view{position:relative;opacity:1}
.xp-static .p-views .p-view:not(:first-child){display:none}
.xp-static .s-close .stage{text-align:center;place-items:center}
.xp-static .c-links{justify-content:center;display:flex}
.xp-static .n-stack{padding:20px 0 60px}
.xp-static .s-numbers .stage{padding-top:60px}
.xp-static .chaos-head,.xp-static .m-head,.xp-static .p-head{right:auto;left:auto}