/* Real Flow - stile del sito */

/* ==================================================================
   REAL FLOW — il sito (ottobre 2026)

   L'idea: i soldi del servizio viaggiano dalla cassa al telefono.
   Il motivo grafico sono gli SCONTRINI: escono dalla stampante della
   cassa e volano dentro il telefono, che gira in 3D. Sotto, la serata
   di un ristorante raccontata con lo scorrimento: l'orologio va dalle
   19 a mezzanotte e il locale si riempie.

   Colori del marchio (blu notte, menta, azzurro) e tre caratteri,
   tutti dentro il sito (nessun file esterno: la Content-Security-Policy
   dell'hosting non lo permette, e la pagina non manda niente a nessuno):
     Unbounded  — titoli e numeri grandi
     Figtree    — testo
     Plex Mono  — solo sugli scontrini, come la stampante termica
   ================================================================== */
@font-face { font-family:'Unbounded'; src:url('../font/unbounded.woff2') format('woff2'); font-weight:200 900; font-display:swap; }
@font-face { font-family:'Figtree'; src:url('../font/figtree.woff2') format('woff2'); font-weight:300 900; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('../font/plex-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --notte:#061A2D; --notte-2:#0A2742; --notte-3:#0E3354;
  --navy:#0B3D6B; --azzurro:#1B74AE; --ciano:#38C6F4;
  --menta:#16C784; --menta-scura:#0B9A5E; --ambra:#F2A93B; --rosa:#E5636B;
  --carta:#FBF7EE; --inchiostro:#0E1B2E; --nebbia:#EEF3F8; --linea:#DCE4EE;
  --grigio:#5B6878; --grigio-2:#8C99AA;
  --titolo:'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --testo:'Figtree', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono:'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --guscio:1200px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--notte); color-scheme:light only; }
body { margin:0; font-family:var(--testo); color:var(--inchiostro); background:#fff; line-height:1.55;
       -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
a { color:inherit; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-family:var(--titolo); letter-spacing:-.025em; line-height:1.06; font-weight:700; }
h3 { font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.guscio { max-width:var(--guscio); margin:0 auto; padding:0 28px; }
.num { font-variant-numeric:tabular-nums; }
:focus-visible { outline:3px solid var(--ciano); outline-offset:3px; border-radius:6px; }
.salta { position:absolute; left:-999px; top:8px; z-index:100; background:#fff; padding:10px 14px; border-radius:10px; }
.salta:focus { left:12px; }

/* ---------- pulsanti ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 22px; border-radius:14px;
       font:700 15px/1 var(--testo); text-decoration:none; border:1.5px solid transparent; cursor:pointer;
       transition:transform .15s, background .2s, box-shadow .2s, border-color .2s; white-space:nowrap; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn-menta { background:var(--menta); color:#04261A; box-shadow:0 10px 30px -8px rgba(22,199,132,.6); }
.btn-menta:hover { background:#28D995; box-shadow:0 14px 36px -8px rgba(22,199,132,.75); }
.btn-vetro { color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06); }
.btn-vetro:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); }
.btn-chiaro { color:var(--inchiostro); border-color:var(--linea); background:#fff; }
.btn-chiaro:hover { border-color:var(--inchiostro); }

/* ---------- testata ---------- */
.testata { position:fixed; inset:0 0 auto 0; z-index:50; padding-top:env(safe-area-inset-top, 0px); transition:background .3s, box-shadow .3s, backdrop-filter .3s; }
.testata .riga { display:flex; align-items:center; justify-content:space-between; gap:20px; height:74px; }
.testata.piena { background:rgba(6,26,45,.78); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 1px 0 rgba(255,255,255,.08); }
.marchio { display:flex; align-items:center; text-decoration:none; }
.marchio svg { height:34px; width:auto; display:block; }
.testata nav { display:flex; gap:28px; font-weight:600; font-size:14.5px; color:rgba(255,255,255,.72); }
.testata nav a { text-decoration:none; transition:color .15s; }
.testata nav a:hover { color:#fff; }
.testata .azioni { display:flex; gap:10px; align-items:center; }
.testata .btn { padding:11px 18px; font-size:14px; }
.testata .accedi { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.10); }
.testata .accedi svg { width:16px; height:16px; flex:none; }
@media (max-width:980px){ .testata nav { display:none; } }
@media (max-width:420px){ .testata .btn { padding:10px 13px; font-size:13px; } .marchio svg { height:28px; } }
@media (max-width:370px){ .testata .accedi svg { display:none; } .testata .azioni { gap:8px; } .testata .btn { padding:10px 11px; } }

/* ==================================================================
   HERO: la notte, il pavimento a griglia, il telefono che gira
   ================================================================== */
.hero { position:relative; min-height:100vh; min-height:100svh; color:#fff; overflow:hidden; isolation:isolate;
        background:
          radial-gradient(60% 50% at 78% 38%, rgba(56,198,244,.20) 0%, transparent 70%),
          radial-gradient(45% 40% at 18% 90%, rgba(22,199,132,.16) 0%, transparent 70%),
          linear-gradient(180deg, #04121F 0%, var(--notte) 45%, var(--notte-2) 100%); }
.hero canvas.polvere { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
/* il pavimento: una griglia in prospettiva che scorre verso di noi */
.pavimento { position:absolute; left:-50%; right:-50%; bottom:-6%; height:62%; z-index:-1; pointer-events:none; overflow:hidden;
             transform:perspective(560px) rotateX(64deg); transform-origin:50% 100%;
             -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 45%, transparent 92%);
                     mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 45%, transparent 92%); }
/* la griglia scorre spostando un livello (lavoro della scheda grafica, non ridisegno) */
.pavimento::before { content:''; position:absolute; left:0; right:0; top:-64px; bottom:0; will-change:transform;
             background-image:
               linear-gradient(rgba(56,198,244,.32) 1px, transparent 1px),
               linear-gradient(90deg, rgba(56,198,244,.32) 1px, transparent 1px);
             background-size:64px 64px; animation:scorri 3.2s linear infinite; }
@keyframes scorri { from { transform:translateY(0); } to { transform:translateY(64px); } }
.orizzonte { position:absolute; left:0; right:0; top:52%; height:2px; z-index:-1; pointer-events:none;
             background:linear-gradient(90deg, transparent, rgba(56,198,244,.55), rgba(22,199,132,.55), transparent);
             filter:blur(1px); box-shadow:0 0 40px 6px rgba(56,198,244,.25); }

.hero-griglia { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); column-gap:40px; align-content:center;
                grid-template-areas:"testa palco" "resto palco";
                min-height:100vh; min-height:100svh; padding-top:calc(96px + env(safe-area-inset-top, 0px)); padding-bottom:56px; }
.in-diretta { display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 12px; border-radius:999px;
              background:rgba(22,199,132,.10); border:1px solid rgba(22,199,132,.35); color:#9FF0CB; font-weight:700; font-size:13.5px; }
.in-diretta i { position:relative; width:8px; height:8px; border-radius:50%; background:var(--menta); }
.in-diretta i::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--menta); animation:battito 1.8s infinite; }
@keyframes battito { 0% { transform:scale(1); opacity:.7; } 70%, 100% { transform:scale(3.4); opacity:0; } }
.h-testa { grid-area:testa; align-self:end; }
.h-resto { grid-area:resto; align-self:start; position:relative; z-index:4; }
.hero-griglia > .palco { grid-area:palco; align-self:center; }
.hero h1 { font-size:clamp(34px, 4.1vw, 60px); margin:22px 0 22px; font-weight:800; }
.hero h1 .riga-h { display:block; overflow:hidden; padding-bottom:.06em; }
.hero h1 .riga-h > span { display:inline-block; transform:translateY(105%); animation:sale .9s cubic-bezier(.2,.8,.2,1) forwards; }
.hero h1 .riga-h:nth-child(2) > span { animation-delay:.08s; }
.hero h1 .riga-h:nth-child(3) > span { animation-delay:.16s; }
.hero h1 .riga-h:nth-child(4) > span { animation-delay:.24s; }
@keyframes sale { to { transform:none; } }
/* "adesso" e' scritto in contorno e si riempie come un indicatore che carica */
.hero h1 .adesso { position:relative; display:inline-block; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.65); }
.hero h1 .adesso::after { content:attr(data-t); position:absolute; inset:0; color:var(--menta); -webkit-text-stroke:1.5px var(--menta);
                          clip-path:inset(0 100% 0 0); animation:riempi 1.6s 1s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes riempi { to { clip-path:inset(0 0 0 0); } }
.hero .lead { font-size:clamp(17px, 1.5vw, 19.5px); color:rgba(225,236,247,.82); max-width:46ch; opacity:0; animation:appare .8s .45s forwards; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; opacity:0; animation:appare .8s .6s forwards; }
.hero .nota { margin-top:22px; font-size:13.5px; color:rgba(200,215,232,.6); max-width:50ch; opacity:0; animation:appare .8s .75s forwards; }
@keyframes appare { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* ---------- il palco 3D ---------- */
.palco { position:relative; height:min(720px, 84vh); min-height:560px; perspective:1500px; perspective-origin:50% 50%; }
.tel-pos { position:absolute; left:50%; top:50%; width:var(--tw); height:var(--th); margin:calc(var(--th) / -2) 0 0 calc(var(--tw) / -2);
           transform-style:preserve-3d; --tw:300px; --th:612px; --sp:14px; cursor:grab; }
.tel { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.tel .fetta { position:absolute; inset:0; border-radius:52px; background:#0B1A2A; }
.tel .fetta.bordo { background:linear-gradient(135deg, #3B5878, #13263C 40%, #2F4B6B 70%, #0E1E31); }
.tel .retro { position:absolute; inset:0; border-radius:52px; transform:rotateY(180deg) translateZ(calc(var(--sp) / 2)); backface-visibility:hidden;
              background:radial-gradient(120% 80% at 30% 20%, #23466C 0%, #0C2440 55%, #071628 100%); overflow:hidden;
              box-shadow:inset 0 0 0 2px rgba(255,255,255,.08); }
.tel .retro .camere { position:absolute; top:24px; left:24px; width:50px; height:136px; border-radius:25px;
                      background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14); }
.tel .retro .camere i { position:absolute; left:6px; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #3E6A9A, #0A1626 60%);
                        box-shadow:0 0 0 3px #11263D, 0 0 0 4px rgba(255,255,255,.12); }
.tel .retro .camere i:nth-child(1) { top:6px; } .tel .retro .camere i:nth-child(2) { top:49px; } .tel .retro .camere i:nth-child(3) { top:92px; }
.tel .retro .camere::after { content:''; position:absolute; left:62px; top:12px; width:10px; height:10px; border-radius:50%; background:#F7E7B0; box-shadow:0 0 10px #F7E7B0; }
.tel .retro .logo-retro { position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width:120px; opacity:.9; }
.fronte { position:absolute; inset:0; border-radius:52px; transform:translateZ(calc(var(--sp) / 2)); backface-visibility:hidden;
               background:#05101C; padding:11px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.10); }
.vetro { position:absolute; inset:11px; border-radius:42px; pointer-events:none; z-index:3;
              background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%); }
.isola { position:absolute; top:22px; left:50%; transform:translateX(-50%); width:23px; height:23px; border-radius:50%; background:radial-gradient(circle at 40% 38%, #1d2f45 0 3px, #000 4.5px); box-shadow:0 0 0 1.5px #0b0d10; z-index:4; }
.schermo { position:relative; height:100%; border-radius:42px; overflow:hidden; background:#F2F5FA; color:var(--inchiostro);
           display:flex; flex-direction:column; font-size:12px; }
.schermo .barra { display:flex; justify-content:space-between; align-items:center; padding:20px 26px 4px; font-weight:700; font-size:12.5px; }
.schermo .barra b { font-family:var(--testo); }
.schermo .testa-app { display:flex; justify-content:space-between; align-items:center; padding:18px 18px 10px; }
.schermo .testa-app svg { height:22px; width:auto; }
.schermo .testa-app .locale { white-space:nowrap; font-size:10.5px; font-weight:800; color:var(--navy); background:#E2ECF7; padding:5px 10px; border-radius:999px; }
.schermo .blocco { margin:0 12px 10px; background:#fff; border-radius:18px; padding:14px 15px; box-shadow:0 1px 2px rgba(14,27,46,.05); }
.schermo .eti { font-size:10.5px; color:var(--grigio-2); font-weight:700; }
.schermo .incasso { font-family:var(--titolo); font-weight:700; font-size:31px; letter-spacing:-.03em; margin-top:4px; transition:color .4s; }
.schermo .incasso.lampo { color:var(--menta-scura); }
.schermo .confronto { font-size:11px; color:var(--grigio); margin-top:3px; }
.schermo .confronto b { color:var(--menta-scura); }
.schermo .barre { display:flex; align-items:flex-end; gap:3px; height:58px; margin-top:10px; }
.schermo .barre i { flex:1; background:#BFD3E8; border-radius:3px 3px 1px 1px; transition:height .7s cubic-bezier(.2,.8,.2,1), background .3s; }
.schermo .barre i.ora { background:var(--menta); }
.schermo .lista { list-style:none; margin:6px 0 0; padding:0; }
.schermo .lista li { display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid #EEF2F7; font-size:11.5px; }
.schermo .lista li:first-child { border-top:none; }
.schermo .lista li b { font-variant-numeric:tabular-nums; }
.schermo .lista li.nuovo { animation:entra .6s cubic-bezier(.2,.8,.2,1); background:linear-gradient(90deg, rgba(22,199,132,.12), transparent 80%); }
@keyframes entra { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.schermo .mini { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 12px 10px; }
.schermo .mini .blocco { margin:0; padding:11px 13px; }
.schermo .mini .val { font-family:var(--titolo); font-weight:700; font-size:18px; margin-top:2px; }
.schermo .onda-arrivo { position:absolute; inset:0; border-radius:42px; pointer-events:none; box-shadow:inset 0 0 0 0 rgba(22,199,132,0); z-index:2; }
.schermo .onda-arrivo.via { animation:onda .7s ease-out; }
@keyframes onda { 0% { box-shadow:inset 0 0 0 3px rgba(22,199,132,.9); } 100% { box-shadow:inset 0 0 0 26px rgba(22,199,132,0); } }
.ombra-tel { position:absolute; left:50%; top:50%; width:300px; height:60px; margin:330px 0 0 -150px; border-radius:50%;
             background:radial-gradient(closest-side, rgba(56,198,244,.35), transparent); filter:blur(8px); pointer-events:none; }

/* il telefono vero in WebGL: la tela 3D sotto, lo schermo HTML sopra */
.tre-tela, .tre-css { position:absolute !important; inset:0; pointer-events:none; z-index:0; }
.tre-tela, .tre-css { opacity:0; transition:opacity .8s ease; }
.palco.pronto .tre-tela, .palco.pronto .tre-css { opacity:1; }
/* il telefono CSS si vede subito e lascia il posto a quello vero */
.tel { transition:opacity .8s ease; }
.palco.tre-d .tel { opacity:0; }
.palco.tre-fatto .tel { display:none; }
.palco.fuori .tre-tela, .palco.fuori .tre-css { visibility:hidden; }
.palco.tre-d .tel-pos { z-index:3; }
.palco.tre-d .fronte { background:transparent; box-shadow:none; padding:8px; }
.palco.tre-d .schermo { border-radius:45px; }
/* il riflesso sul vetro scorre mentre il telefono gira */
.palco.tre-d .fronte .vetro { inset:8px; border-radius:45px; background-size:320% 100%; background-position:var(--rif, 50%) 0;
  background-image:linear-gradient(112deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.20) 46%, rgba(255,255,255,.06) 52%, rgba(255,255,255,0) 64%); }

/* ---------- la stampante della cassa e gli scontrini ---------- */
.stampante { position:absolute; left:2%; bottom:7%; width:150px; height:96px; z-index:2; transform:rotate(-4deg); }
.stampante .corpo { position:absolute; inset:18px 0 0 0; border-radius:18px;
                    background:linear-gradient(160deg, #24435F 0%, #12283F 55%, #0B1C2E 100%);
                    box-shadow:0 22px 40px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14); }
.stampante .fessura { position:absolute; left:22px; right:22px; top:26px; height:6px; border-radius:6px; background:#02080F;
                      box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.1); }
.stampante .led { position:absolute; right:16px; bottom:14px; width:7px; height:7px; border-radius:50%; background:var(--menta); box-shadow:0 0 10px var(--menta); }
.stampante .led.stampa { animation:lampeggia .25s 4; }
@keyframes lampeggia { 50% { opacity:.2; } }
.stampante .nome { position:absolute; left:18px; bottom:12px; font:700 10px/1 var(--testo); color:rgba(255,255,255,.45); letter-spacing:.04em; }
.scontrino { position:absolute; width:118px; z-index:1; transform-origin:50% 100%; pointer-events:none;
             background:var(--carta); color:#2A2A2A; font:500 8.6px/1.38 var(--mono); padding:9px 9px 13px; border-radius:2px;
             box-shadow:0 10px 26px rgba(0,0,0,.35);
             -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat, radial-gradient(circle 3px at 4px 100%, transparent 3px, #000 3.5px) bottom/8px 6px repeat-x;
                     mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat, radial-gradient(circle 3px at 4px 100%, transparent 3px, #000 3.5px) bottom/8px 6px repeat-x; }
.scontrino .int { text-align:center; font-weight:500; margin-bottom:4px; }
.scontrino .r { display:flex; justify-content:space-between; gap:6px; }
.scontrino .sep { border-top:1px dashed #9A9488; margin:4px 0; }
.scontrino .tot { font-size:10px; font-weight:500; }
.scontrino .r span:last-child { white-space:nowrap; }
.scontrino .pie { text-align:center; color:#5E5A52; margin-top:4px; }
.etichetta-volo { position:absolute; z-index:6; pointer-events:none; font:800 15px/1 var(--titolo); color:var(--menta);
                  text-shadow:0 0 18px rgba(22,199,132,.7); white-space:nowrap; }

/* chip di vetro intorno al telefono */
.chip { position:absolute; z-index:5; display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:16px;
        background:rgba(12,39,66,.88); border:1px solid rgba(140,200,255,.22);
        color:#E6F1FC; font-size:13px; font-weight:600; box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
        opacity:0; transform:translateY(10px) scale(.96); transition:opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); }
.chip.on { opacity:1; transform:none; }
.chip .pallino { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; flex:none; font-weight:800; }
.chip small { display:block; font-size:11.5px; font-weight:500; color:rgba(200,220,240,.7); }
.chip-1 { left:-4%; top:10%; } .chip-1 .pallino { background:rgba(22,199,132,.18); color:var(--menta); }
.chip-2 { right:-4%; bottom:9%; } .chip-2 .pallino { background:rgba(242,169,59,.18); color:var(--ambra); }

.giu { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); color:rgba(255,255,255,.55); font-size:12.5px; font-weight:600;
       display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; }
.giu i { width:22px; height:34px; border-radius:12px; border:1.5px solid rgba(255,255,255,.4); position:relative; }
.giu i::after { content:''; position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background:#fff; animation:rotella 1.6s infinite; }
@keyframes rotella { 0% { transform:translateY(0); opacity:1; } 80% { transform:translateY(10px); opacity:0; } 100% { opacity:0; } }

@media (max-width:980px){
  .hero-griglia { grid-template-columns:1fr; grid-template-areas:"testa" "palco" "resto"; gap:0; padding-top:calc(96px + env(safe-area-inset-top, 0px)); padding-bottom:30px; min-height:0; }
  .hero h1 { font-size:clamp(32px, 8.6vw, 52px); margin:16px 0 4px; }
  .palco { height:560px; min-height:0; margin-top:10px; }
  .tel-pos { --tw:252px; --th:514px; --sp:12px; }
  .ombra-tel { width:240px; margin:276px 0 0 -120px; }
  .stampante { left:-6px; bottom:4%; width:118px; height:80px; }
  .stampante .nome { display:none; }
  .scontrino { width:100px; font-size:7.6px; }
  .chip-1 { left:-6px; top:4%; } .chip-2 { right:-6px; bottom:6%; }
  .chip { font-size:12px; padding:9px 11px; } .chip small { font-size:10.5px; }
  .giu { display:none; }
}
@media (max-width:420px){
  .palco { height:500px; }
  .tel-pos { --tw:224px; --th:458px; }
  .tel .fetta, .tel .retro, .palco:not(.tre-d) .fronte { border-radius:44px; }
  .palco:not(.tre-d) .schermo, .palco:not(.tre-d) .vetro { border-radius:36px; }
  .palco:not(.tre-d) .schermo .incasso { font-size:25px; }
  .palco:not(.tre-d) .schermo .blocco { padding:11px 12px; margin:0 10px 8px; }
  .palco:not(.tre-d) .schermo .lista li { padding:5px 0; font-size:10.5px; }
  .palco:not(.tre-d) .schermo .mini .val { font-size:15px; } .palco:not(.tre-d) .schermo .mini .eti { font-size:9.5px; white-space:nowrap; }
  .palco:not(.tre-d) .schermo .testa-app .locale { font-size:9.5px; padding:4px 8px; }
  .ombra-tel { width:210px; margin:248px 0 0 -105px; }
  .chip-2 { display:none; }
}

/* ==================================================================
   LA SERATA: lo scorrimento muove l'orologio dalle 19 a mezzanotte
   ================================================================== */
.serata { position:relative; height:420vh; background:linear-gradient(180deg, var(--notte-2) 0%, #08213A 100%); color:#fff; }
.serata .fissa { position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; overflow:hidden; padding-top:calc(74px + env(safe-area-inset-top, 0px)); box-sizing:border-box; }
.serata .fissa::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 75% 50%, rgba(56,198,244,.10), transparent 70%), radial-gradient(40% 50% at 10% 80%, rgba(22,199,132,.08), transparent 70%); }
.serata-griglia { position:relative; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px; align-items:center; width:100%; }
.serata .sopra { line-height:1.3; font-size:15px; color:rgba(200,220,240,.7); font-weight:600; }
.orologio { font-family:var(--titolo); font-weight:800; font-size:clamp(64px, 11vw, 150px); letter-spacing:-.05em; line-height:.95; margin:8px 0 6px;
            background:linear-gradient(180deg, #fff 30%, #8FB6DA); -webkit-background-clip:text; background-clip:text; color:transparent; }
.serata .totale { font-family:var(--titolo); font-size:clamp(22px, 2.6vw, 34px); font-weight:700; color:var(--menta); letter-spacing:-.02em; }
.serata .totale small { font-family:var(--testo); font-size:14px; color:rgba(200,220,240,.65); font-weight:600; letter-spacing:0; margin-left:8px; }
.momenti { position:relative; margin-top:30px; min-height:132px; }
.momento { position:absolute; inset:0 auto auto 0; max-width:44ch; opacity:0; transform:translateY(14px); transition:opacity .2s, transform .2s; pointer-events:none; }
.momento.on { opacity:1; transform:none; transition:opacity .45s .18s, transform .45s .18s; pointer-events:auto; }
.momento b { display:block; font-size:20px; font-weight:800; margin-bottom:6px; }
.momento p { color:rgba(214,228,242,.8); font-size:16px; }
.momento .avviso { display:inline-flex; gap:8px; align-items:center; margin-top:10px; padding:8px 12px; border-radius:12px;
                   background:rgba(242,169,59,.12); border:1px solid rgba(242,169,59,.35); color:#FFD9A0; font-size:13.5px; font-weight:700; }
.avanzamento { margin-top:28px; height:4px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; max-width:420px; }
.avanzamento i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--ciano), var(--menta)); }

.sala { background:rgba(255,255,255,.04); border:1px solid rgba(140,200,255,.16); border-radius:28px; padding:22px; }
.sala-testa { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:16px; }
.sala-testa b { font-size:16px; }
.sala-testa span { font-size:13px; color:rgba(200,220,240,.65); }
.tavoli { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.tavolo { position:relative; border-radius:16px; padding:12px 12px 11px; min-height:76px; border:1.5px solid rgba(255,255,255,.10);
          background:rgba(255,255,255,.03); color:rgba(200,220,240,.45); font-size:12px; transition:background .35s, border-color .35s, color .35s; transform-origin:50% 60%; }
.tavolo b { display:block; font-size:15px; color:rgba(230,240,250,.55); font-family:var(--titolo); font-weight:700; letter-spacing:-.02em; }
.tavolo .stato, .tavolo .imp { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tavolo .imp { font-weight:700; font-variant-numeric:tabular-nums; }
.tavolo.aperto { background:rgba(22,199,132,.12); border-color:rgba(22,199,132,.55); color:#BFF3DB; }
.tavolo.aperto b { color:#fff; }
.tavolo.lungo { background:rgba(242,169,59,.14); border-color:rgba(242,169,59,.6); color:#FFE0AE; }
.tavolo.lungo b { color:#fff; }
.tavolo.chiuso { background:rgba(56,198,244,.06); border-color:rgba(56,198,244,.25); color:rgba(170,215,240,.75); }
.tavolo.chiuso b { color:rgba(220,236,250,.85); }
.tavolo.accende { animation:accende .8s cubic-bezier(.2,.8,.2,1); }
.tavolo.allarme { animation:allarme .9s ease-out; }
.tavolo.paga { animation:paga .75s cubic-bezier(.2,.8,.2,1); }
.tavolo.spegne { animation:spegne .5s ease-out; }
@keyframes accende {
  0% { transform:perspective(420px) rotateX(-105deg); box-shadow:0 0 0 0 rgba(22,199,132,0); }
  55% { transform:perspective(420px) rotateX(16deg); box-shadow:0 0 34px 4px rgba(22,199,132,.55); }
  100% { transform:none; box-shadow:0 0 0 0 rgba(22,199,132,0); } }
@keyframes allarme {
  0%, 100% { transform:none; box-shadow:0 0 0 0 rgba(242,169,59,0); }
  30% { transform:scale(1.08); box-shadow:0 0 0 6px rgba(242,169,59,.4), 0 0 34px rgba(242,169,59,.55); }
  60% { transform:scale(.97); } }
@keyframes paga {
  0% { transform:perspective(420px) rotateY(-100deg); box-shadow:0 0 0 0 rgba(56,198,244,0); }
  60% { transform:perspective(420px) rotateY(12deg); box-shadow:0 0 30px 4px rgba(56,198,244,.5); }
  100% { transform:none; box-shadow:0 0 0 0 rgba(56,198,244,0); } }
@keyframes spegne { from { opacity:.2; transform:scale(.92); } to { opacity:1; transform:none; } }
.tavolo .soldi { position:absolute; left:50%; top:26%; z-index:2; pointer-events:none; white-space:nowrap;
                 font:800 14px/1 var(--titolo); color:var(--menta); text-shadow:0 0 14px rgba(22,199,132,.85);
                 animation:soldi 1.25s ease-out forwards; }
@keyframes soldi { 0% { opacity:0; transform:translate(-50%,8px) scale(.8); } 20% { opacity:1; transform:translate(-50%,-10px) scale(1.06); }
                   100% { opacity:0; transform:translate(-50%,-58px) scale(1); } }
.sala { transform-origin:50% 0; }

/* i titoli delle sezioni: ogni parola sale da sotto la sua maschera */
.parola { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
.parola > span { display:inline-block; transform-origin:0 100%; }
.ore { display:flex; align-items:flex-end; gap:8px; height:110px; margin-top:20px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); }
.ore div { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.ore i { width:100%; max-width:44px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg, var(--ciano), rgba(56,198,244,.25)); height:2%; transition:height .25s; }
.ore div.ora i { background:linear-gradient(180deg, var(--menta), rgba(22,199,132,.3)); box-shadow:0 0 24px rgba(22,199,132,.35); }
.ore span { font-size:11.5px; color:rgba(200,220,240,.6); font-weight:600; }
@media (max-width:980px){
  .serata { height:460vh; }
  .serata .fissa { align-items:flex-start; padding-top:calc(88px + env(safe-area-inset-top, 0px)); }
  .serata-griglia { grid-template-columns:1fr; gap:18px; }
  .orologio { font-size:clamp(54px, 17vw, 86px); }
  .momenti { margin-top:14px; min-height:150px; }
  .momento b { font-size:17px; } .momento p { font-size:14.5px; }
  .avanzamento { margin-top:14px; }
  .sala { padding:14px; border-radius:22px; }
  .tavoli { gap:7px; }
  .tavolo { min-height:58px; padding:8px 9px; font-size:10.5px; border-radius:12px; }
  .tavolo b { font-size:13px; }
  .ore { height:72px; margin-top:12px; }
}
@media (max-height:700px) and (max-width:980px){ .ore { display:none; } .momenti { min-height:130px; } }

/* ==================================================================
   LE SEZIONI CHIARE: calme, leggibili
   ================================================================== */
.sez { padding:120px 0; position:relative; }
.sez.nebbia { background:var(--nebbia); }
.intesta { max-width:60ch; margin-bottom:46px; }
.intesta h2 { font-size:clamp(30px, 3.8vw, 48px); }
.intesta p { margin-top:16px; font-size:18px; color:var(--grigio); }
@media (max-width:760px){ .sez { padding:84px 0; } .intesta { margin-bottom:32px; } }

/* funzioni: schede */
.schede { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.scheda { padding:11px 17px; border-radius:999px; border:1.5px solid var(--linea); background:#fff; font:700 14px/1 var(--testo);
          color:var(--grigio); cursor:pointer; transition:all .18s; }
.scheda:hover { color:var(--inchiostro); border-color:#B8C6D6; }
.scheda[aria-selected="true"] { background:var(--notte); color:#fff; border-color:var(--notte); }
.scheda .pacchetto { margin-left:7px; font-size:10.5px; padding:3px 7px; border-radius:6px; background:#FFF1D9; color:#9A6100; }
.scheda[aria-selected="true"] .pacchetto { background:rgba(242,169,59,.22); color:#FFD9A0; }
.pannello { display:none; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:48px; align-items:center; }
.pannello.on { display:grid; animation:pann .45s cubic-bezier(.2,.8,.2,1); }
@keyframes pann { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.pannello h3 { font-size:clamp(22px, 2.2vw, 28px); margin-bottom:12px; font-family:var(--titolo); font-weight:700; letter-spacing:-.02em; }
.pannello > div > p { color:var(--grigio); font-size:16.5px; }
.pannello ul { margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.pannello li { padding-left:28px; position:relative; font-size:15.5px; }
.pannello li::before { content:''; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:6px; background:#DDF6EA; }
.pannello li::after { content:''; position:absolute; left:6px; top:7px; width:5px; height:9px; border:solid var(--menta-scura); border-width:0 2px 2px 0; transform:rotate(45deg); }
.pannello .nota-pacchetto { margin-top:16px; font-size:14px; }
.vista { background:#fff; border-radius:24px; padding:20px; box-shadow:0 30px 60px -30px rgba(11,61,107,.35), 0 0 0 1px var(--linea); }
.vista-testa { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:14px; }
.vista-testa b { font-size:15px; }
.vista-testa span { font-size:12.5px; color:var(--grigio-2); }
@media (max-width:900px){ .pannello.on { grid-template-columns:1fr; gap:26px; } }

.hbar { display:grid; grid-template-columns:118px minmax(0,1fr) 78px; gap:10px; align-items:center; font-size:13px; padding:7px 0; }
.hbar .pista { height:10px; background:var(--nebbia); border-radius:99px; overflow:hidden; }
.hbar .pista i { display:block; height:100%; border-radius:99px; background:var(--azzurro); transform-origin:left; animation:cresce 1s cubic-bezier(.2,.8,.2,1) both; }
.hbar .pista i.m { background:var(--menta); }
.hbar .v { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
@keyframes cresce { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.mappa { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.mappa div { border-radius:12px; padding:10px; font-size:12px; border:1.5px solid var(--linea); }
.mappa b { display:block; font-size:13.5px; }
.mappa .a { background:#E3F7EE; border-color:#B4E6CF; } .mappa .l { background:#FFF3DE; border-color:#F3D29A; } .mappa .f { color:var(--grigio-2); }
table.tab { width:100%; border-collapse:collapse; font-size:12.5px; }
table.tab th { text-align:left; color:var(--grigio-2); font-weight:700; font-size:11.5px; padding:7px 8px; border-bottom:1px solid var(--linea); }
table.tab td { padding:9px 8px; border-bottom:1px solid var(--linea); }
table.tab .d { text-align:right; font-variant-numeric:tabular-nums; }
table.tab tr.t td { font-weight:800; background:var(--nebbia); }
.tab-scorre { overflow-x:auto; }
.regola { display:flex; gap:12px; padding:13px 14px; border-radius:14px; background:#FFF6E6; margin-bottom:9px; }
.regola.v { background:#E9F8F0; } .regola.r { background:#FDECEC; }
.regola i { width:10px; height:10px; border-radius:50%; background:var(--ambra); margin-top:6px; flex:none; }
.regola.v i { background:var(--menta-scura); } .regola.r i { background:var(--rosa); }
.regola b { display:block; font-size:14px; } .regola span { font-size:12.5px; color:var(--grigio); }
.giorni { display:flex; gap:5px; margin-top:7px; }
.giorni em { font-style:normal; font-size:10.5px; font-weight:800; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:#fff; color:var(--grigio-2); }
.giorni em.s { background:var(--notte); color:#fff; }
.riga-fc { display:flex; justify-content:space-between; gap:10px; margin-top:12px; font-size:13.5px; flex-wrap:wrap; }
.su { color:var(--menta-scura); font-weight:800; } .giu-r { color:var(--rosa); font-weight:800; }

/* come funziona: il viaggio del dato */
.viaggio { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; position:relative; }
.viaggio svg.filo { position:absolute; left:0; top:36px; width:100%; height:40px; pointer-events:none; overflow:visible; }
.tappa { position:relative; }
.tappa .icona { width:72px; height:72px; border-radius:22px; display:grid; place-items:center; background:var(--notte); color:#fff;
                box-shadow:0 18px 36px -14px rgba(6,26,45,.6); margin-bottom:22px; position:relative; z-index:1; }
.tappa .icona svg { width:32px; height:32px; }
.tappa .n { font:800 13px/1 var(--titolo); color:var(--azzurro); margin-bottom:8px; }
.tappa h3 { font-size:20px; margin-bottom:8px; }
.tappa p { color:var(--grigio); font-size:15.5px; }
@media (max-width:860px){ .viaggio { grid-template-columns:1fr; gap:34px; } .viaggio svg.filo { display:none; } }

/* web app */
.due { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }
@media (max-width:900px){ .due { grid-template-columns:1fr; gap:34px; } }
.vantaggi { display:grid; gap:22px; }
.vantaggio { display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; }
.vantaggio .ic { width:44px; height:44px; border-radius:14px; background:#fff; display:grid; place-items:center; color:var(--azzurro); box-shadow:0 0 0 1px var(--linea); }
.vantaggio h3 { font-size:17.5px; margin-bottom:4px; }
.vantaggio p { color:var(--grigio); font-size:15px; }
.istruzioni { background:#fff; border-radius:24px; padding:26px; box-shadow:0 0 0 1px var(--linea); }
.istruzioni h3 { font-size:17px; margin-bottom:4px; }
.istruzioni > p { color:var(--grigio); font-size:14px; margin-bottom:16px; }
.istruzioni ol { margin:6px 0 18px; padding-left:20px; font-size:15px; line-height:1.75; }
.istruzioni .so { font-weight:800; font-size:14px; }

/* licenze */
.prezzi { background:var(--notte); color:#fff; overflow:hidden; }
.prezzi::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 50% at 50% 0%, rgba(56,198,244,.14), transparent 70%); }
.prezzi .intesta p { color:rgba(200,220,240,.7); }
.piani { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; align-items:stretch; position:relative; }
.piano { position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(140,200,255,.18); border-radius:26px; padding:30px; display:flex; flex-direction:column; }
.piano.forte { background:#fff; color:var(--inchiostro); border-color:#fff; box-shadow:0 40px 80px -30px rgba(22,199,132,.45); }
.piano .fascia { position:absolute; top:-13px; left:28px; background:var(--menta); color:#04261A; font-size:12px; font-weight:800; padding:6px 12px; border-radius:999px; }
.piano h3 { font-family:var(--titolo); font-size:26px; font-weight:700; letter-spacing:-.02em; }
.piano .chi { font-size:14.5px; color:rgba(200,220,240,.7); margin-top:6px; }
.piano.forte .chi { color:var(--grigio); }
.piano .prezzo { font-size:15px; font-weight:700; margin:20px 0 4px; color:rgba(200,220,240,.85); }
.piano.forte .prezzo { color:var(--grigio); }
.piano ul { list-style:none; margin:16px 0 26px; padding:0; display:grid; gap:10px; font-size:15px; flex:1; }
.piano li { padding-left:26px; position:relative; }
.piano li::before { content:'✓'; position:absolute; left:0; color:var(--menta); font-weight:800; }
.piano li.no { color:rgba(200,220,240,.45); } .piano li.no::before { content:'–'; color:rgba(200,220,240,.45); }
.piano.forte li.no { color:var(--grigio-2); } .piano.forte li.no::before { color:var(--grigio-2); }
.extra { position:relative; margin-top:36px; border-radius:24px; padding:28px; display:flex; gap:22px; align-items:center; flex-wrap:wrap;
         background:linear-gradient(120deg, rgba(22,199,132,.16), rgba(56,198,244,.10)); border:1.5px solid rgba(22,199,132,.55); }
.extra .fascia { position:absolute; top:-13px; left:26px; background:var(--menta); color:#04261A; font-size:12px; font-weight:800; padding:6px 12px; border-radius:999px; }
.extra .testo { flex:1; min-width:250px; }
.extra b { font-size:19px; } .extra p { color:rgba(214,228,242,.82); font-size:15px; margin-top:6px; }
.extra .perche { color:#9FF0CB; font-weight:700; font-size:14px; margin-top:8px; }
@media (max-width:980px) and (min-width:761px){ .piani { grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .piani { grid-template-columns:1fr; } }

/* guide */
.guide { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.guida { display:block; text-decoration:none; background:#fff; border-radius:22px; padding:26px 28px; box-shadow:0 0 0 1px var(--linea); transition:box-shadow .2s, transform .2s; }
.guida:hover { box-shadow:0 0 0 1.5px var(--inchiostro), 0 20px 40px -24px rgba(6,26,45,.4); transform:translateY(-2px); }
.guida h3 { font-size:19px; margin-bottom:8px; }
.guida p { color:var(--grigio); font-size:15px; }
.guida .leggi { display:inline-block; margin-top:14px; font-weight:800; font-size:14px; color:var(--azzurro); }
@media (max-width:760px){ .guide { grid-template-columns:1fr; } }

/* domande */
.domande { max-width:820px; }
details { border-bottom:1px solid var(--linea); }
summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:22px 0; font-weight:800; font-size:17.5px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:''; flex:none; width:28px; height:28px; border-radius:50%; background:var(--nebbia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1B2E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat; transition:transform .25s; }
details[open] summary::after { transform:rotate(45deg); }
details p { padding:0 0 22px; color:var(--grigio); font-size:16px; max-width:66ch; }

/* chiusura */
.chiusura { position:relative; overflow:hidden; color:#fff; text-align:center; padding:130px 0 0;
            background:linear-gradient(180deg, var(--notte-2), #04121F); isolation:isolate; }
.chiusura .pavimento { height:70%; bottom:-10%; opacity:.7; }
.chiusura .pavimento::before { animation-duration:4s; }
.chiusura h2 { font-size:clamp(32px, 5vw, 64px); max-width:16ch; margin:0 auto; }
.chiusura p { color:rgba(214,228,242,.8); font-size:18px; max-width:52ch; margin:18px auto 30px; }
.chiusura .cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.chiusura .piccolo { font-size:14px; color:rgba(200,220,240,.6); margin-top:16px; }
.piede { margin-top:110px; border-top:1px solid rgba(255,255,255,.08); padding:30px 0 40px; text-align:left;
         display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13.5px; color:rgba(200,220,240,.62); line-height:1.8; }
.piede svg { height:26px; width:auto; display:block; margin-bottom:8px; }
.piede a { text-decoration:none; } .piede a:hover { color:#fff; }
.piede .link { display:flex; gap:18px; flex-wrap:wrap; }

/* chi preferisce meno movimento: tutto fermo, tutto visibile */

/* i link interni (#serata, #prezzi...) non finiscono sotto la testata */
html { scroll-padding-top:calc(80px + env(safe-area-inset-top, 0px)); }

/* niente spostamenti a destra e sinistra sul telefono: i pezzi che arrivano
   dai lati non devono mai allargare la pagina */
body { overflow-x:hidden; }
@supports (overflow:clip) { html, body { overflow-x:clip; } }
main > section, .sez, .chiusura, footer { overflow-x:hidden; }
@supports (overflow:clip) { main > section, .sez, .chiusura, footer { overflow-x:clip; } }
.serata { overflow-x:visible; }
.tel-pos { touch-action:pan-y; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .pavimento::before { animation:none; }
}

/* classi al posto degli stili scritti nell'HTML (cosi' la protezione CSP puo' essere la piu' severa) */
.w8 { width:8%; }
.w21 { width:21%; }
.w39 { width:39%; }
.w45 { width:45%; }
.w62 { width:62%; }
.w71 { width:71%; }
.w88 { width:88%; }
.w100 { width:100%; }
.nota-a { margin-top:14px; font-size:13px; color:var(--grigio); }
.nota-b { margin-top:12px; font-size:12.5px; color:var(--grigio-2); }
.tenue { color:var(--grigio-2); }
.intesta.stretta { margin-bottom:34px; }
ol.senza-fondo { margin-bottom:0; }
b.bianco { color:#fff; }