:root{--bg:#050811;--fg:#f5f8ff;--muted:#9fb0c7;--cyan:#63e7ff;--blue:#4e7dff;--violet:#9c79ff;--green:#69f0b0;--amber:#ffd36a}
*{box-sizing:border-box}html,body{margin:0;background:#050811;color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;overflow:hidden}
body:before{content:"";position:fixed;inset:-30%;background:radial-gradient(circle at 50% 40%,#18325755,transparent 28%),radial-gradient(circle at 75% 65%,#4e3a7d33,transparent 24%);filter:blur(30px);animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.08) translateY(-1%)}}
#particles{position:fixed;inset:0;width:100%;height:100%;opacity:.7}
.scene{position:absolute;inset:0;padding:7vh 7vw 10vh;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transform:scale(.985);pointer-events:none;transition:opacity 1.2s ease,transform 1.4s ease}
.scene.active{opacity:1;transform:scale(1);pointer-events:auto}
.kicker{font-size:clamp(16px,1.4vw,26px);letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin-bottom:2vh}
h1{font-size:clamp(56px,7.2vw,132px);line-height:.92;letter-spacing:-.055em;text-align:center;margin:0;max-width:1500px;text-wrap:balance}
h2{font-size:clamp(42px,5.2vw,94px);line-height:1;text-align:center;margin:.2em 0;max-width:1500px;text-wrap:balance}
.sub{font-size:clamp(22px,2.1vw,38px);line-height:1.35;color:var(--muted);text-align:center;max-width:1100px;margin-top:2.4vh;text-wrap:balance}
.glow{color:#fff;text-shadow:0 0 32px #63e7ff66}
.accent{color:var(--cyan)}.green{color:var(--green)}.amber{color:var(--amber)}
.stage{width:min(1500px,92vw);height:min(70vh,850px);display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center}
.stage .copy{text-align:left}.stage .copy h2{text-align:left}.stage .copy .sub{text-align:left}
.screen{position:relative;border-radius:22px;overflow:hidden;border:1px solid #8bdfff44;box-shadow:0 30px 100px #000a,0 0 70px #4ad8ff18;background:#0b1020;transform:perspective(1400px) rotateY(-3deg) scale(.96);animation:float 5s ease-in-out infinite alternate}
.screen img{display:block;width:100%;height:auto;max-height:68vh;object-fit:contain;background:#0b1020}
.screen:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px #0007;pointer-events:none}
@keyframes float{to{transform:perspective(1400px) rotateY(1deg) translateY(-8px) scale(1)}}
.cards{display:flex;gap:2vw;flex-wrap:wrap;justify-content:center;margin-top:4vh}
.card{min-width:220px;padding:24px 30px;border:1px solid #8bdfff44;background:#0d1525bb;border-radius:20px;font-size:clamp(20px,1.7vw,30px);box-shadow:0 20px 60px #0007;animation:rise 1s both}
.card:nth-child(2){animation-delay:.25s}.card:nth-child(3){animation-delay:.5s}.card:nth-child(4){animation-delay:.75s}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
.flow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:5vh}
.pill{padding:18px 26px;border:1px solid #7be7ff55;border-radius:999px;background:#0c1628cc;font-size:clamp(18px,1.5vw,28px)}
.arrow{font-size:34px;color:var(--cyan);opacity:.8}
.orbit{position:relative;width:min(900px,70vw);aspect-ratio:1.65;margin-top:2vh}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:260px;height:260px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:34px;font-weight:800;background:radial-gradient(circle,#173c61,#09111f 68%);border:1px solid #76e6ff99;box-shadow:0 0 80px #50ddff44}
.node{position:absolute;padding:14px 20px;border:1px solid #789cff55;border-radius:14px;background:#0b1323dd;font-size:22px}
.node:nth-child(2){left:0;top:8%}.node:nth-child(3){right:0;top:8%}.node:nth-child(4){left:-4%;top:46%}.node:nth-child(5){right:-4%;top:46%}.node:nth-child(6){left:5%;bottom:5%}.node:nth-child(7){right:5%;bottom:5%}
.hud{position:fixed;left:3vw;right:3vw;bottom:2.2vh;z-index:20;display:flex;align-items:center;gap:12px}
button{border:1px solid #ffffff25;background:#0b1320cc;color:#fff;border-radius:999px;padding:10px 15px;font-size:15px;cursor:pointer;backdrop-filter:blur(12px)}
button:hover{border-color:#63e7ff88}.bar{height:3px;background:#ffffff20;flex:1;border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.counter{color:#a9b7ca;font-variant-numeric:tabular-nums;font-size:13px}
.start{z-index:30;background:radial-gradient(circle at 50% 45%,#142b4d 0,#050811 45%,#02040a 100%)}
.start .play{margin-top:5vh;padding:16px 28px;font-size:18px;border-color:#63e7ff66}
.caption{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);max-width:min(1100px,80vw);font-size:clamp(18px,1.4vw,26px);color:#dce8f8;text-align:center;background:#050811aa;padding:12px 20px;border-radius:14px;backdrop-filter:blur(10px)}
.logo{font-size:clamp(72px,10vw,170px);font-weight:900;letter-spacing:-.07em}.logo span{color:var(--cyan)}
@media(max-width:900px){.stage{grid-template-columns:1fr;height:auto}.stage .copy h2,.stage .copy .sub{text-align:center}.screen img{max-height:45vh}}

/* LOFAXTE v2 shared navigation */
.lfx-logo{position:fixed;left:2.2vw;top:2.2vh;z-index:100;font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(22px,2.2vw,38px);font-weight:800;letter-spacing:-.055em;color:#f7fbff;text-decoration:none;text-shadow:0 0 28px #63e7ff33}.lfx-logo i{font-style:normal;color:#63e7ff}.lfx-nav{position:fixed;right:2.2vw;top:2vh;z-index:100;display:flex;gap:8px;align-items:center}.lfx-nav a{border:1px solid #ffffff24;background:#07111dcc;color:#dcecff;text-decoration:none;border-radius:999px;padding:9px 13px;font-size:12px;letter-spacing:.04em;backdrop-filter:blur(12px)}.lfx-nav a:hover{border-color:#63e7ff88;color:white}

/* V3 visual system */
html,body{background:#081528!important;color:#f8fbff}
body:before{content:""!important;position:fixed!important;inset:0!important;background:linear-gradient(rgba(3,12,25,.16),rgba(3,12,25,.16)),url('assets/brand/bg.png') center/cover no-repeat!important;filter:none!important;animation:none!important;z-index:-3}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(circle at 50% 50%,rgba(2,11,25,.82) 0%,rgba(7,27,50,.62) 34%,rgba(70,142,192,.16) 67%,rgba(255,255,255,.08) 100%)}
#particles{opacity:.28}
.lfx-logo-img{position:fixed;left:2.2vw;top:2.1vh;z-index:110;width:clamp(145px,12vw,230px);height:auto;filter:drop-shadow(0 8px 24px #001a2f55)}
.lfx-nav{position:fixed;right:2.2vw;top:2vh;z-index:110;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lfx-nav a,.lfx-nav button{border:1px solid #bcecff66;background:#061426c7;color:#f4fbff;text-decoration:none;border-radius:999px;padding:10px 14px;font-size:12px;backdrop-filter:blur(14px);box-shadow:0 8px 24px #00152a33}
.lfx-nav a:hover,.lfx-nav button:hover{border-color:#65ddff;background:#0a2844dd}
.scene{padding-top:9vh}
.kicker{font-size:clamp(18px,1.55vw,29px)!important}.sub{font-size:clamp(27px,2.45vw,46px)!important;max-width:1280px!important}
h1{font-size:clamp(74px,8.2vw,150px)!important}h2{font-size:clamp(58px,6.1vw,112px)!important}
.stage{width:min(1660px,94vw);height:min(74vh,900px);gap:3vw}.stage .copy h2{font-size:clamp(58px,5.6vw,105px)!important}.screen{border-radius:28px;box-shadow:0 35px 110px #00112499,0 0 90px #62dfff22}.screen img{max-height:72vh}
.pill{padding:22px 31px;font-size:clamp(23px,1.9vw,36px)}.flow{gap:22px}.arrow{font-size:42px}.card{min-width:260px;padding:30px 36px;font-size:clamp(24px,2vw,38px)}
.hud{bottom:1.8vh;background:#061426a6;border:1px solid #ffffff16;padding:8px 10px;border-radius:18px;backdrop-filter:blur(14px)}

/* V4 — contrasto, logo singolo, leggibilità */
body:before{background:linear-gradient(rgba(5,18,34,.10),rgba(5,18,34,.10)),url('assets/brand/bg.png') center/cover no-repeat!important}
body:after{background:radial-gradient(circle at 50% 50%,rgba(3,14,29,.64) 0%,rgba(13,45,74,.40) 38%,rgba(111,178,216,.08) 72%,rgba(255,255,255,.025) 100%)!important}
h1,h2,.sub,.kicker,.pill,.card,.node,.core,.counter,.lfx-nav a,.lfx-nav button{
text-shadow:-1px -1px 0 rgba(2,17,31,.58),1px -1px 0 rgba(2,17,31,.58),-1px 1px 0 rgba(2,17,31,.58),1px 1px 0 rgba(2,17,31,.58),0 2px 8px rgba(0,20,38,.40)}
h1,h2{color:#dbe7ef!important}.sub{color:#8ea5b8!important}.kicker{color:#35b8dc!important}
.pill,.card,.node{color:#c8d8e3!important;border-color:#3f91b6aa!important}
.lfx-logo-img{width:clamp(135px,10.5vw,205px)!important}