:root{--c:#7cc4ff;--c2:#3a7bff;--dim:rgba(160,205,255,.72);--bg:#02040d}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:#cfe6ff;font-family:Rajdhani,system-ui,sans-serif;font-size:19px;line-height:1.5;overflow-x:hidden}
canvas#scena{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.vignetta{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,8,.85) 100%)}
.righe{position:fixed;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,rgba(120,180,255,.025) 0 1px,transparent 1px 3px)}
a{color:var(--c)}
.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px 28px}
.marchio{font-family:Orbitron,sans-serif;letter-spacing:.35em;font-size:15px;color:var(--c);text-decoration:none;text-shadow:0 0 12px rgba(80,160,255,.8)}
.vai{font-weight:600;letter-spacing:.08em;font-size:15px;text-decoration:none;color:#dff0ff;border:1px solid rgba(124,196,255,.45);border-radius:999px;padding:7px 16px;background:rgba(20,40,100,.25);backdrop-filter:blur(6px);transition:.2s}
.vai:hover{border-color:#a9dcff;box-shadow:0 0 18px rgba(90,170,255,.45)}
main{position:relative;z-index:3}
.sez{min-height:115vh;display:flex;align-items:center;padding:12vh 7vw}
.sez[data-lato="d"]{justify-content:flex-start}
.sez[data-lato="s"]{justify-content:flex-end}
.sez[data-lato="c"]{justify-content:center}
.hero{min-height:170vh;align-items:flex-start;padding-top:66vh}
.hero-testo{max-width:900px;text-align:center;margin:0 auto}
h1{font-family:Orbitron,sans-serif;font-weight:700;font-size:clamp(34px,5.4vw,68px);letter-spacing:.14em;line-height:1.15;color:#fff;text-shadow:0 0 28px rgba(80,160,255,.85)}
h1 .sotto{display:block;font-family:Rajdhani,sans-serif;font-weight:500;letter-spacing:.04em;font-size:.46em;color:#dcefff;margin-top:.5em}
h1 .trat{display:none}
h2{font-family:Orbitron,sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,40px);line-height:1.2;letter-spacing:.06em;color:#fff;text-shadow:0 0 20px rgba(80,160,255,.6);margin-bottom:18px}
.occhiello{font-family:Orbitron,sans-serif;letter-spacing:.35em;font-size:12px;color:var(--c);text-transform:uppercase;margin-bottom:14px;text-shadow:0 0 10px rgba(80,160,255,.7)}
.lead{font-size:clamp(19px,1.7vw,23px);color:#d7ecff;margin-bottom:20px;max-width:34em}
.scheda{max-width:min(560px,46vw);padding:34px 36px;border:1px solid rgba(140,200,255,.38);border-radius:22px;background:linear-gradient(135deg,rgba(40,90,210,.16),rgba(10,25,80,.30));box-shadow:0 0 34px rgba(60,130,255,.18),inset 0 0 40px rgba(80,150,255,.06);backdrop-filter:blur(7px)}
.scheda.centro{text-align:center;margin:0 auto}
.scheda.centro .lead{margin-left:auto;margin-right:auto}
#video .scheda{max-width:min(720px,52vw)}
.scorri{display:inline-flex;align-items:center;gap:12px;margin-top:34px;font-family:Orbitron,sans-serif;letter-spacing:.3em;font-size:11px;text-transform:uppercase;color:var(--dim);text-decoration:none}
.scorri span{width:1px;height:34px;background:linear-gradient(var(--c),transparent);animation:giu 1.8s infinite}
@keyframes giu{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}}
/* effetto ologramma: la scritta si disegna dall'alto con una linea di scansione */
.olo{opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1),opacity .6s,filter 1.1s;filter:brightness(2.2) saturate(1.4);position:relative}
.olo.on{opacity:1;clip-path:inset(0 0 -20px 0);filter:none}
.olo.on::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#bfe6ff,transparent);box-shadow:0 0 18px #5aa8ff;animation:scan 1.1s ease-out 1 forwards;pointer-events:none}
@keyframes scan{from{top:0;opacity:1}to{top:100%;opacity:0}}
.hero-testo.olo{clip-path:inset(0 0 -40px 0)}
.cornice-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(140,200,255,.4);background:#030818;box-shadow:0 0 28px rgba(60,130,255,.25)}
.cornice-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#030818}
.segnaposto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,rgba(50,110,240,.28),rgba(3,8,24,.95) 70%)}
.segnaposto strong{font-family:Orbitron,sans-serif;letter-spacing:.12em;font-size:clamp(14px,1.6vw,19px);color:#fff;font-weight:500}
.segnaposto span{color:var(--dim);font-size:16px}
.segnaposto.nascosto{display:none}
.play{width:62px;height:62px;border-radius:50%;border:2px solid rgba(160,215,255,.8);box-shadow:0 0 22px rgba(80,160,255,.6);position:relative;margin-bottom:8px}
.play::after{content:"";position:absolute;left:25px;top:18px;border-left:18px solid #bfe6ff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.frasi{list-style:none;display:grid;gap:12px}
.frasi li{font-size:18px;color:#e6f3ff;line-height:1.35;padding-left:12px;border-left:2px solid rgba(124,196,255,.55)}
.frasi b{display:block;font-family:Orbitron,sans-serif;font-weight:500;letter-spacing:.2em;font-size:11px;text-transform:uppercase;color:var(--c);margin-bottom:2px}
.dialogo{display:grid;gap:10px;font-size:18px}
.dialogo p{padding:10px 16px;border-radius:14px;max-width:92%}
.dialogo .tu{justify-self:end;background:rgba(60,120,230,.2);border:1px solid rgba(124,196,255,.3);color:#cfe6ff}
.dialogo .lui{background:rgba(124,196,255,.1);border:1px solid rgba(160,215,255,.5);color:#fff;box-shadow:0 0 18px rgba(80,160,255,.2)}
.chip{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chip li{font-weight:600;letter-spacing:.04em;padding:9px 18px;border:1px solid rgba(124,196,255,.5);border-radius:999px;background:linear-gradient(180deg,rgba(60,120,230,.22),rgba(20,40,100,.25));color:#dff0ff}
.bottone{display:inline-block;font-weight:600;font-size:19px;letter-spacing:.08em;color:#fff;text-decoration:none;background:linear-gradient(180deg,rgba(70,140,255,.5),rgba(30,70,180,.5));border:1px solid #a9dcff;border-radius:999px;padding:14px 34px;margin:6px 0 16px;box-shadow:0 0 26px rgba(90,170,255,.5);transition:.2s}
.bottone:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(120,190,255,.8)}
.piccolo{font-size:15px;color:var(--dim)}
.piede{position:relative;z-index:3;text-align:center;padding:60px 7vw 44px;color:var(--dim);font-size:15px;background:linear-gradient(transparent,rgba(2,4,13,.9) 35%)}
.piede p+p{margin-top:8px}
.cr{max-width:44em;margin-left:auto;margin-right:auto}
a:focus-visible,video:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* telefono */
@media (max-width:760px){
  body{font-size:18px}
  .top{padding:14px 16px}
  .sez,.sez[data-lato]{justify-content:center;padding:12vh 16px;min-height:105vh}
  .hero{min-height:150vh;padding-top:62vh}
  .scheda,#video .scheda{max-width:100%;width:100%;padding:24px 20px;background:linear-gradient(135deg,rgba(8,20,60,.5),rgba(4,10,40,.58));backdrop-filter:blur(3px)}
  h2{font-size:22px}
  h1{font-size:34px}
  h1 .trat{display:none}
  .frasi li{font-size:17px}
}
/* niente animazioni: versione statica */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .olo{opacity:1;clip-path:none;filter:none;transition:none}
  .olo.on::after{display:none}
  .scorri span{animation:none}
}
.statico .olo{opacity:1;clip-path:none;filter:none;transition:none}
.statico .olo::after{display:none}