/* Fuoriclasse Live — pagina di presentazione, versione "stadio del futuro".
   Notte profonda, neon tricolore, vetro. Il torneo intero vola in 3D dietro il logo;
   scorrendo si entra nella O del 10 che esulta. Poi lo schermo del programma lavora da solo. */
:root{
  --notte:#02060F; --notte2:#050D1F; --navy:#0B1B3A; --navy2:#13285A; --rosso:#FF1F2D; --rosso2:#E10F14; --verde:#05984F; --neon:#2BF59A;
  --bianco:#F4F7FF; --nebbia:#8EA0C6; --vetro:rgba(255,255,255,.045); --bordo:rgba(255,255,255,.10);
  --cond:'Barlow Condensed','Poppins',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--notte)}
body{font-family:'Poppins',sans-serif;color:var(--bianco);background:var(--notte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:6px}
.contenitore{max-width:1240px;margin:0 auto;padding:0 24px}
.bottone{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:14px;padding:16px 26px;font:700 16px 'Poppins',sans-serif;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .25s,background .2s;isolation:isolate}
.bottone:active{transform:scale(.97)}
.bottone.rosso{background:linear-gradient(180deg,#FF3341,#D80E1B);color:#fff;box-shadow:0 0 0 1px rgba(255,80,90,.5),0 10px 40px rgba(255,31,45,.45)}
.bottone.rosso:hover{box-shadow:0 0 0 1px rgba(255,120,130,.8),0 14px 60px rgba(255,31,45,.7)}
.bottone.vetro{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bottone.vetro:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(43,245,154,.6),0 0 30px rgba(43,245,154,.2)}
.bottone svg{width:18px;height:18px}

/* pannelli di vetro con luce che segue il mouse */
.vetro{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02)),rgba(6,14,32,.6);border:1px solid var(--bordo);border-radius:24px;overflow:hidden}
.vetro::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(43,245,154,.12),transparent 60%)}
.vetro:hover::before{opacity:1}

/* ---------- barra in alto ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,box-shadow .3s}
#nav .contenitore{display:flex;align-items:center;gap:22px;height:70px;max-width:1360px}
#nav .marchio img{height:34px;width:auto}
#nav .marchio{opacity:0;transition:opacity .3s}
#nav nav{display:flex;gap:4px;margin-left:auto}
#nav nav a{font-size:14px;font-weight:600;color:#BFCBE6;text-decoration:none;padding:8px 12px;border-radius:10px}
#nav nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
#nav .bottone{padding:10px 16px;font-size:14px;border-radius:11px}
#nav.pieno{background:rgba(2,6,15,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.07)}
#nav.pieno .marchio{opacity:1}
@media (max-width:860px){ #nav nav{display:none} #nav .bottone.vetro{display:none} #nav .contenitore{gap:10px} #nav .bottone.rosso{margin-left:auto} }

/* ---------- sezioni: titoli ---------- */
.sezione{position:relative;padding:130px 0}
.titolo-sez{font:800 clamp(38px,5.2vw,72px)/.96 var(--cond);text-transform:uppercase;letter-spacing:.2px;text-wrap:balance;
  background:linear-gradient(180deg,#fff 40%,#9FB3DE);-webkit-background-clip:text;background-clip:text;color:transparent}
.testo-sez{font-size:17px;line-height:1.7;margin-top:18px;max-width:560px;color:#BFCBE6}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.aurora i{position:absolute;width:900px;height:900px;border-radius:50%;opacity:.5}
.aurora i:nth-child(1){background:radial-gradient(circle,rgba(14,92,58,.55),transparent 65%);left:-360px;top:-10%}
.aurora i:nth-child(2){background:radial-gradient(circle,rgba(90,11,20,.5),transparent 65%);right:-420px;top:30%}
.aurora i:nth-child(3){background:radial-gradient(circle,rgba(19,40,90,.6),transparent 65%);left:25%;bottom:-520px}
.sezione > .contenitore{position:relative}

/* ---------- confronto ---------- */
.conf-box{margin-top:46px;padding:10px 10px 0}
.tabella-conf{width:100%;border-collapse:collapse;font-size:15px}
.tabella-conf th{font:800 20px/1.1 var(--cond);text-transform:uppercase;text-align:center;padding:18px 12px;vertical-align:bottom;color:#BFCBE6}
.tabella-conf th:first-child{text-align:left}
.tabella-conf th.noi{color:#fff;background:linear-gradient(180deg,rgba(43,245,154,.18),rgba(43,245,154,.06));border-radius:18px 18px 0 0;box-shadow:inset 0 1px 0 rgba(43,245,154,.6)}
.tabella-conf th.noi img{height:26px;margin:0 auto 8px}
.tabella-conf td{padding:15px 12px;border-top:1px solid rgba(255,255,255,.07);text-align:center;color:#8EA0C6;font-weight:500}
.tabella-conf td:first-child{text-align:left;color:#E4EAF8;font-weight:600}
.tabella-conf td.noi{background:rgba(43,245,154,.06);color:var(--neon);font-weight:800;font-size:19px;text-shadow:0 0 12px rgba(43,245,154,.7)}
.tabella-conf tr:last-child td.noi{border-radius:0 0 18px 18px}
.nonfa{margin-top:20px;display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start;padding:34px}
.nonfa h3{font:800 34px/1 var(--cond);text-transform:uppercase}
.nonfa p.s{font-size:15px;line-height:1.6;color:#BFCBE6;margin-top:10px}
.nonfa ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.nonfa li{font-size:15px;line-height:1.55;color:#BFCBE6;padding-left:32px;position:relative}
.nonfa li b{color:#fff}
.nonfa li::before{content:'✕';position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:7px;background:rgba(255,31,45,.14);color:#FF7A83;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
@media (max-width:860px){ .nonfa{grid-template-columns:1fr} .tabella-conf{font-size:13px} .tabella-conf th{font-size:15px;padding:12px 6px} .tabella-conf td{padding:12px 6px} .scorri-x{overflow-x:auto} .tabella-conf{min-width:560px} }

/* ---------- demo ---------- */
.demo .intro{text-align:center;max-width:720px;margin:0 auto}
.demo .intro .testo-sez{margin:16px auto 0}
.cornice-video{position:relative;margin:48px auto 0;max-width:1020px;aspect-ratio:16/9;border-radius:26px;overflow:hidden;background:#050D1F;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 120px rgba(0,0,0,.6),0 0 140px rgba(43,245,154,.15)}
.cornice-video video{width:100%;height:100%;object-fit:cover;display:block}
.copertina{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;cursor:pointer;border:none;color:#fff;font-family:inherit;
  background:radial-gradient(circle at 50% 45%,rgba(19,40,90,.6),#030A1A 75%)}
.copertina canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.copertina img,.copertina .play,.copertina span{position:relative}
.copertina img{width:min(440px,60%)}
.copertina .play{width:92px;height:92px;border-radius:50%;background:linear-gradient(180deg,#FF3341,#D80E1B);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 14px rgba(255,31,45,.16),0 0 60px rgba(255,31,45,.6);transition:transform .2s}
.copertina:hover .play{transform:scale(1.08)}
.copertina .play svg{width:34px;height:34px;margin-left:5px;fill:#fff}
.copertina span{font-size:14px;font-weight:600;color:#C3CFEA}
.demo .azioni{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}

/* ---------- prezzi ---------- */
.piani{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:48px;align-items:stretch}
.piano{padding:26px 22px;display:flex;flex-direction:column}
.piano.top{background:linear-gradient(180deg,rgba(43,245,154,.16),rgba(43,245,154,.03));border-color:rgba(43,245,154,.5);box-shadow:0 0 60px rgba(43,245,154,.15);transform:translateY(-10px)}
.piano .badge{align-self:flex-start;margin:-6px 0 10px;background:var(--rosso);color:#fff;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:7px;box-shadow:0 0 18px rgba(255,31,45,.6)}
.piano h3{font:800 28px/1 var(--cond);text-transform:uppercase}
.piano .prezzo{margin-top:16px;font:800 50px/1 var(--cond)}
.piano .prezzo small{font:500 13px 'Poppins';opacity:.7;margin-left:4px}
.piano .alt{font-size:12px;color:var(--nebbia);margin-top:4px;min-height:18px}
.piano p.d{font-size:13.5px;line-height:1.55;margin-top:12px;color:#BFCBE6}
.piano ul{list-style:none;margin:16px 0 22px;display:flex;flex-direction:column;gap:8px}
.piano li{font-size:13.5px;line-height:1.45;display:flex;gap:8px;color:#E4EAF8}
.piano li::before{content:'✓';color:var(--neon);font-weight:800;flex:none}
.piano .bottone{margin-top:auto;padding:13px 18px;font-size:14.5px}
.servizio{margin-top:16px;display:flex;align-items:center;gap:22px;padding:22px 26px;flex-wrap:wrap}
.servizio .ic{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.servizio div{flex:1;min-width:220px}
.servizio b{font:800 24px var(--cond);text-transform:uppercase}
.servizio p{font-size:14px;color:#BFCBE6;margin-top:3px;line-height:1.5}
.servizio .costo{font:800 32px var(--cond);flex:none}
.servizio .costo small{font:500 13px 'Poppins';opacity:.7}

/* ---------- domande ---------- */
.domande .contenitore{display:grid;grid-template-columns:1fr 1.6fr;gap:60px}
.faq details{border-top:1px solid rgba(255,255,255,.09);padding:20px 0}
.faq details:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:800 28px/1 var(--cond);color:var(--neon);transition:transform .25s;flex:none;text-shadow:0 0 10px rgba(43,245,154,.7)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{font-size:15px;line-height:1.7;color:#BFCBE6;margin-top:10px;max-width:640px}
@media (max-width:860px){ .domande .contenitore{grid-template-columns:1fr;gap:20px} }

/* ---------- chiusura ---------- */
.finale{position:relative;overflow:hidden;padding:150px 0 130px;text-align:center}
.finale::before{content:'';position:absolute;left:50%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(5,152,79,.45),rgba(2,6,15,0) 25%,rgba(255,31,45,.4) 50%,rgba(2,6,15,0) 75%,rgba(5,152,79,.45));filter:blur(70px);opacity:.6;animation:gira-semplice 24s linear infinite}
@keyframes gira-semplice{to{transform:rotate(360deg)}}
.finale .contenitore{position:relative}
.finale img{width:150px;margin:0 auto 26px;border-radius:34px;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 20px 80px rgba(43,245,154,.35)}
.finale .titolo-sez{max-width:820px;margin:0 auto}
.finale .testo-sez{margin:16px auto 0}
.finale .azioni{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
footer{background:#01040B;color:var(--nebbia);font-size:13px;padding:34px 0;border-top:1px solid rgba(255,255,255,.06)}
footer .contenitore{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
footer img{height:30px}
footer nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
footer a{text-decoration:none;color:#C3CFEA}
footer a:hover{color:#fff}

/* ---------- finestra del video demo ---------- */
.video-velo{position:fixed;inset:0;z-index:200;background:rgba(1,4,11,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .25s}
.video-velo.on{opacity:1;pointer-events:auto}
.video-velo .cornice{position:relative;width:min(1200px,100%);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 120px rgba(0,0,0,.7)}
.video-velo video{width:100%;height:100%;display:block}
.video-velo .chiudi{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer}
.video-velo .chiudi:hover{background:rgba(255,255,255,.22)}
.video-velo .errore{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:#C3CFEA;font-size:16px}

/* ---------- pagine interne (funzioni, domande) ---------- */
.testata-pagina{position:relative;padding:150px 0 70px;overflow:hidden}
.testata-pagina h1{font:800 clamp(44px,6.4vw,88px)/.95 var(--cond);text-transform:uppercase;max-width:900px;text-wrap:balance;background:linear-gradient(180deg,#fff 40%,#9FB3DE);-webkit-background-clip:text;background-clip:text;color:transparent}
.testata-pagina p{font-size:19px;line-height:1.65;color:#BFCBE6;max-width:680px;margin-top:20px}
.indice{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.indice a{font-size:14px;font-weight:600;text-decoration:none;color:#E4EAF8;background:rgba(255,255,255,.05);border:1px solid var(--bordo);padding:9px 16px;border-radius:999px}
.indice a:hover{border-color:rgba(43,245,154,.6);color:#fff}
.blocco{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;padding:70px 0;border-top:1px solid rgba(255,255,255,.07)}
.blocco.inverti .foto{order:-1}
.blocco .chi{font:800 16px var(--cond);color:var(--neon);letter-spacing:.6px;display:flex;align-items:center;gap:10px;text-transform:uppercase}
.blocco .chi::before{content:'';width:28px;height:2px;background:currentColor}
.blocco h2{margin-top:12px;font:800 clamp(34px,4vw,54px)/1 var(--cond);text-transform:uppercase;text-wrap:balance}
.blocco > div > p{font-size:16.5px;line-height:1.7;color:#BFCBE6;margin-top:14px;max-width:540px}
.blocco ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.blocco li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15px;line-height:1.5;color:#E4EAF8}
.blocco li::before{content:'✓';color:var(--neon);font-weight:800}
.blocco li b{color:#fff}
.foto{position:relative}
.foto img{width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.6)}
.foto.telefoni{display:flex;gap:18px;justify-content:center}
.foto.telefoni img{width:min(46%,300px);border-radius:30px;box-shadow:0 0 0 8px #0E1626,0 0 0 9px rgba(255,255,255,.14),0 40px 90px rgba(0,0,0,.6)}
.foto figcaption{margin-top:12px;font-size:12.5px;color:var(--nebbia);text-align:center}
@media (max-width:900px){ .blocco{grid-template-columns:1fr;gap:30px;padding:50px 0} .blocco.inverti .foto{order:0} }
.faq-pagina{max-width:860px}
.faq-pagina h2{font:800 30px var(--cond);text-transform:uppercase;margin:50px 0 6px;color:var(--neon)}
#nav nav a.qui{color:#fff;background:rgba(255,255,255,.08)}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important} }
.blocco .nonfa li{display:block;padding-left:32px;position:relative;color:#BFCBE6}
.blocco .nonfa li::before{content:'✕';position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:7px;background:rgba(255,31,45,.14);color:#FF7A83;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}