:root {
  --fondo: #07060d;
  --fondo2: #100d1c;
  --testo: #ece9f6;
  --tenue: #a29cb8;
  --fucsia: #ff2e88;
  --ciano: #00e5ff;
  --lime: #b6ff00;
  --lilla: #a66cff;
  --bordo: rgba(255, 255, 255, .09);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--fondo); color: var(--testo); font: 17px/1.6 var(--font); }
a { color: var(--ciano); }
img { max-width: 100%; display: block; }
.salta { position: absolute; left: -999px; }
.salta:focus { left: 16px; top: 16px; background: var(--fucsia); color: #fff; padding: 8px 12px; z-index: 9; }

.testata { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px); background: rgba(7, 6, 13, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bordo); }
.marchio { display: flex; align-items: center; gap: 10px; color: var(--testo); text-decoration: none; font-weight: 800; letter-spacing: .04em; }
.marchio img { border-radius: 10px; }
nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
nav a { color: var(--tenue); text-decoration: none; }
nav a:hover { color: var(--testo); }
.nav-gilda { color: var(--lime) !important; font-weight: 600; }

.hero { position: relative; min-height: 88vh; display: grid; place-content: center; text-align: center; padding: 80px 16px; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 40%, rgba(255, 46, 136, .18), transparent 70%), radial-gradient(40% 40% at 80% 80%, rgba(0, 229, 255, .12), transparent 70%); }
.porta { position: absolute; inset: 50% auto auto 50%; width: min(340px, 70vw); aspect-ratio: 3 / 5; transform: translate(-50%, -54%);
  border: 2px solid rgba(255, 46, 136, .5); border-radius: 160px 160px 8px 8px; box-shadow: 0 0 60px rgba(255, 46, 136, .25), inset 0 0 60px rgba(0, 229, 255, .12);
  opacity: .5; animation: respiro 6s ease-in-out infinite; }
.porta span { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); font-weight: 800; letter-spacing: .3em; color: var(--fucsia); font-size: 14px; }
@keyframes respiro { 50% { box-shadow: 0 0 90px rgba(255, 46, 136, .4), inset 0 0 80px rgba(0, 229, 255, .2); } }
.hero > *:not(.porta) { position: relative; }
.occhiello { text-transform: uppercase; letter-spacing: .22em; font-size: 13px; color: var(--ciano); font-weight: 700; }
h1 { font-size: clamp(56px, 12vw, 132px); line-height: .95; font-weight: 900; letter-spacing: -.02em; margin: 10px 0 14px;
  text-shadow: 0 0 24px rgba(255, 46, 136, .65), 0 0 2px #fff; }
.slogan { font-size: clamp(20px, 3vw, 26px); color: var(--fucsia); font-weight: 700; }
.intro { max-width: 640px; margin: 16px auto 0; color: var(--tenue); }
.azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.btn { display: inline-block; padding: 14px 26px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-neon { background: var(--fucsia); color: #fff; box-shadow: 0 0 24px rgba(255, 46, 136, .55); }
.btn-neon:hover { box-shadow: 0 0 40px rgba(255, 46, 136, .8); }
.btn-linea { border: 1px solid var(--ciano); color: var(--ciano); }
.live { margin-top: 26px; font-size: 15px; color: var(--tenue); display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }

.blocco { padding: clamp(64px, 9vw, 110px) clamp(16px, 5vw, 64px); max-width: 1180px; margin: 0 auto; }
.blocco-scuro { max-width: none; background: var(--fondo2); border-block: 1px solid var(--bordo); }
.blocco-scuro > * { max-width: 1180px; margin-inline: auto; }
h2 { font-size: clamp(32px, 5vw, 50px); line-height: 1.1; margin: 8px 0 18px; }
.sotto { color: var(--tenue); max-width: 640px; margin-bottom: 26px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 26px; }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.carta { background: rgba(255, 255, 255, .03); border: 1px solid var(--bordo); border-radius: 18px; padding: 24px; transition: border-color .25s, transform .25s; }
.carta:hover { border-color: rgba(0, 229, 255, .45); transform: translateY(-3px); }
.carta .icona { font-size: 30px; }
.carta h3 { margin: 10px 0 6px; font-size: 20px; }
.carta p { color: var(--tenue); font-size: 15.5px; }
.carta-bot h3 { color: var(--lime); }
.passi { counter-reset: p; list-style: none; padding: 0; display: grid; gap: 14px; margin: 26px 0 34px; max-width: 640px; }
.passi li { counter-increment: p; display: flex; gap: 16px; align-items: center; padding: 14px 18px; border: 1px solid var(--bordo); border-radius: 14px; }
.passi li::before { content: counter(p); flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: rgba(166, 108, 255, .18); color: var(--lilla); }
.faq details { border-bottom: 1px solid var(--bordo); padding: 16px 0; max-width: 780px; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { color: var(--tenue); margin-top: 8px; }

.piede { text-align: center; padding: 40px 16px 50px; color: var(--tenue); font-size: 14px; border-top: 1px solid var(--bordo); display: grid; gap: 6px; }
.piede .nota { font-size: 12.5px; opacity: .75; max-width: 640px; margin: 6px auto 0; }
@media (max-width: 720px) { nav a:not(.nav-gilda) { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* =================== v3 · vaporwave =================== */
@font-face { font-family: "Monoton"; src: url(/font/monoton-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url(/font/vt323-latin-400-normal.woff2) format("woff2"); font-display: swap; }
:root { --fucsia: #ff71ce; --ciano: #01cdfe; --lime: #05ffa1; --lilla: #b967ff; --giallo: #fffb96; --fondo: #0d0221; --fondo2: #150533; }
body { background: var(--fondo); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .18;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.occhiello, .live, nav { font-family: "VT323", monospace; font-size: 19px; letter-spacing: .14em; }
.occhiello { color: var(--ciano); text-shadow: 0 0 8px rgba(1, 205, 254, .7); }
.testata { background: rgba(13, 2, 33, .7); border-bottom: 1px solid rgba(255, 113, 206, .35); }

.hero { min-height: 100vh; background: none; isolation: isolate; }
.cielo { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, #0d0221 0%, #261447 32%, #6b2d7b 50%, #c9467f 62%, #ff9a5a 68%, #0d0221 68.2%); }
.sole { position: absolute; left: 50%; top: 30%; width: min(440px, 70vw); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--giallo) 0%, #ffb86b 35%, var(--fucsia) 75%);
  -webkit-mask: linear-gradient(180deg, #000 48%, transparent 48% 52%, #000 52% 60%, transparent 60% 64%, #000 64% 71%, transparent 71% 76%, #000 76% 82%, transparent 82% 88%, #000 88%);
          mask: linear-gradient(180deg, #000 48%, transparent 48% 52%, #000 52% 60%, transparent 60% 64%, #000 64% 71%, transparent 71% 76%, #000 76% 82%, transparent 82% 88%, #000 88%);
  filter: drop-shadow(0 0 60px rgba(255, 113, 206, .7)); animation: sorge 8s ease-in-out infinite alternate; }
@keyframes sorge { to { translate: -50% 4%; filter: drop-shadow(0 0 90px rgba(255, 154, 90, .8)); } }
.montagne { position: absolute; left: 0; right: 0; top: 52%; height: 17%;
  background: linear-gradient(180deg, #2a0a4a, #120327); clip-path: polygon(0 100%, 0 60%, 8% 30%, 15% 55%, 24% 18%, 33% 62%, 41% 40%, 50% 75%, 58% 35%, 67% 58%, 76% 22%, 85% 52%, 93% 28%, 100% 50%, 100% 100%); }
.griglia-pavimento { position: absolute; left: -50%; right: -50%; top: 68%; height: 60%; transform-origin: top; transform: perspective(280px) rotateX(60deg);
  background-image: linear-gradient(rgba(255, 113, 206, .85) 2px, transparent 2px), linear-gradient(90deg, rgba(1, 205, 254, .75) 2px, transparent 2px);
  background-size: 64px 64px; animation: corsa 1.4s linear infinite; box-shadow: 0 -10px 60px rgba(255, 113, 206, .45); }
.griglia-pavimento::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--fondo) 85%); }
@keyframes corsa { to { background-position: 0 64px, 0 0; } }
h1 { font-family: "Monoton", system-ui, sans-serif; font-weight: 400; letter-spacing: .04em; font-size: clamp(54px, 11vw, 140px);
  background: linear-gradient(180deg, #fff 0%, #ffd6f5 38%, var(--fucsia) 52%, #6b2d7b 53%, var(--ciano) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgba(255, 113, 206, .65)) drop-shadow(3px 3px 0 rgba(1, 205, 254, .55)); }
h1:hover { animation: glitch .4s steps(2) 2; }
@keyframes glitch { 25% { transform: translate(-3px, 1px) skewX(-6deg); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-1px, 2px) skewX(4deg); } }
.slogan { font-family: "VT323", monospace; font-size: clamp(26px, 4vw, 36px); color: var(--giallo); text-shadow: 0 0 12px rgba(255, 251, 150, .6); }
.intro { color: #e6d7ff; text-shadow: 0 2px 8px rgba(13, 2, 33, .9); }
.btn-neon { background: linear-gradient(90deg, var(--fucsia), var(--lilla)); box-shadow: 0 0 26px rgba(255, 113, 206, .6); border-radius: 4px; }
.btn-linea { border-color: var(--ciano); color: var(--ciano); border-radius: 4px; background: rgba(13, 2, 33, .55); }
.punto { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
h2 { font-family: "VT323", monospace; font-size: clamp(42px, 6vw, 64px); font-weight: 400; letter-spacing: .04em; color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 16px var(--fucsia), 3px 3px 0 var(--ciano); }
.blocco-scuro { background: linear-gradient(180deg, var(--fondo), #1c0640 50%, var(--fondo)); border-color: rgba(185, 103, 255, .3); }
.carta { background: linear-gradient(var(--fondo2), var(--fondo2)) padding-box, linear-gradient(135deg, var(--fucsia), var(--ciano), var(--lilla)) border-box;
  border: 1px solid transparent; border-radius: 6px; }
.carta:hover { box-shadow: 0 0 26px rgba(255, 113, 206, .35), 0 0 60px rgba(1, 205, 254, .15); }
.carta h3 { font-family: "VT323", monospace; font-size: 28px; font-weight: 400; color: var(--giallo); letter-spacing: .03em; }
.carta-bot h3 { color: var(--lime); }
.passi li { border-color: rgba(255, 113, 206, .35); background: rgba(21, 5, 51, .7); }
.passi li::before { background: linear-gradient(135deg, var(--fucsia), var(--lilla)); color: #fff; }
.faq details { border-color: rgba(185, 103, 255, .3); }
.piede { border-color: rgba(255, 113, 206, .35); }
@media (prefers-reduced-motion: reduce) { .griglia-pavimento, .sole { animation: none; } }
.hero > .cielo { position: absolute; inset: 0; }
.sole { z-index: 0; } .montagne { z-index: 1; }
.griglia-pavimento { z-index: 2; background-color: #0d0221; }

/* v4 · vaporwave toned down */
body::after { opacity: .07; }
.griglia-pavimento { opacity: .55; box-shadow: none; animation-duration: 2.6s; }
.sole { filter: drop-shadow(0 0 30px rgba(255, 113, 206, .4)); opacity: .8; animation: none; }
.cielo { background: linear-gradient(180deg, #0d0221 0%, #1d0d3d 40%, #4a2366 56%, #8a3a73 64%, #b3577a 68%, #0d0221 68.2%); }
h1 { filter: drop-shadow(0 0 10px rgba(255, 113, 206, .35)); }
h2 { text-shadow: 0 0 10px rgba(255, 113, 206, .5); }
.btn-neon { box-shadow: 0 0 14px rgba(255, 113, 206, .4); }

/* =================== v5 · centred + richer page =================== */
.blocco { text-align: center; }
.sotto, .intro { margin-inline: auto; }
.griglia { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 460px)); }
.passi { margin-inline: auto; text-align: left; }
.faq details { margin-inline: auto; text-align: left; }
.blocco .btn { margin-top: 6px; }

.appello { padding: 0 16px; margin-top: -60px; position: relative; z-index: 3; }
.appello-box { max-width: 980px; margin: 0 auto; text-align: center; padding: clamp(28px, 5vw, 54px); border-radius: 10px;
  background: linear-gradient(#150533, #150533) padding-box, linear-gradient(120deg, var(--fucsia), var(--giallo), var(--ciano), var(--lilla), var(--fucsia)) border-box;
  border: 2px solid transparent; background-size: auto, 300% 300%; animation: bordo 8s linear infinite; box-shadow: 0 0 50px rgba(255, 113, 206, .25); }
@keyframes bordo { to { background-position: 0 0, 300% 0; } }
.appello-box h2 { margin-top: 6px; }
.appello-box p { color: #e6d7ff; max-width: 720px; margin: 0 auto; }
.vantaggi { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 6px; }
.vantaggi span { padding: 6px 14px; border-radius: 999px; background: rgba(255, 113, 206, .1); border: 1px solid rgba(255, 113, 206, .35); font-size: 15px; }

.contatori { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 26px 0; }
.contatore { min-width: 150px; padding: 16px 20px; border-radius: 8px; background: rgba(21, 5, 51, .75); border: 1px solid rgba(1, 205, 254, .35); }
.contatore b { display: block; font: 400 46px/1 "VT323", monospace; color: var(--ciano); text-shadow: 0 0 10px rgba(1, 205, 254, .6); }
.contatore span { font-size: 14px; color: #cbb8f0; }
.online { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 980px; margin: 0 auto; }
.utente { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(21, 5, 51, .8); border: 1px solid rgba(185, 103, 255, .3); font-size: 15px; }
.utente img { width: 34px; height: 34px; border-radius: 50%; }
.utente small { color: var(--lime); display: block; font-size: 12.5px; line-height: 1.2; }
.utente i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.utente i.idle { background: #ffb86b; } .utente i.dnd { background: #ff5577; }

.vetrina-gilda { position: relative; max-width: 1180px; border-radius: 12px; overflow: hidden; padding: clamp(56px, 8vw, 96px) 24px; margin-block: 40px; }
.vg-arte { position: absolute; inset: 0; background: center / cover var(--img, none); filter: brightness(.45) saturate(1.2); transition: transform 8s ease; }
.vetrina-gilda:hover .vg-arte { transform: scale(1.06); }
.vg-arte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 2, 33, .3), rgba(13, 2, 33, .85)); }
.vg-testo { position: relative; max-width: 700px; margin: 0 auto; }
.vg-testo h2 { font-family: "Cinzel Decorative", serif; color: #f3d3a4; text-shadow: 0 0 20px rgba(196, 137, 75, .6); }
.vg-testo p { color: #f0e6ff; }
.vg-testo .contatore { border-color: rgba(227, 180, 124, .4); }
.vg-testo .contatore b { color: #f3d3a4; text-shadow: 0 0 10px rgba(196, 137, 75, .6); }
@font-face { font-family: "Cinzel Decorative"; src: url(/font/cinzel-decorative-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

.banner-scorre { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.nastro { display: flex; gap: 18px; width: max-content; animation: nastro 50s linear infinite; }
.nastro img { height: 150px; width: auto; border-radius: 8px; border: 1px solid rgba(255, 113, 206, .3); }
.banner-scorre:hover .nastro { animation-play-state: paused; }
@keyframes nastro { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nastro, .appello-box { animation: none; } }