:root {
  --night:#090411; --night2:#150a22; --plum:#5a2a72; --plum-l:#7b4a92; --paper:#f7f4ef; --surface:#ece7e4;
  --gold:#d1943d; --grad:linear-gradient(90deg,#5a2a72 0%,#9d62c9 55%,#d1943d 100%); --ink:#241d27; --muted:#756c78; --w:min(74vw,360px); --h:calc(var(--w) * 0.6848);
  --serif: ui-serif,"New York","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--night); }
/* Il fondo della pagina è il viola notte (come l'inizio): niente linee chiare nella barra di stato né nel rimbalzo dello scorrimento. */
body { background:var(--night); color:var(--ink); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; }

/* ───── Hero ───── */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:calc(56px + env(safe-area-inset-top)) 24px 90px; color:#f4ecf8; background:radial-gradient(90% 60% at 50% 28%, #2a1240 0%, var(--night) 70%); overflow:hidden; }
/* Il bordo alto dell'hero è esattamente il colore della barra di stato: nessuno stacco. */
.hero::before { content:""; position:absolute; left:0; right:0; top:0; height:180px; background:linear-gradient(180deg,var(--night) 0%,transparent 100%); z-index:1; pointer-events:none; }
.glow { position:absolute; left:50%; top:14%; width:min(120vw,720px); aspect-ratio:1; transform:translateX(-50%); background:radial-gradient(circle, #8a4fa955 0%, #5a2a7222 38%, transparent 66%); filter:blur(8px); animation:breathe 7s ease-in-out infinite; pointer-events:none; }
@keyframes breathe { 0%,100% { opacity:.75; transform:translateX(-50%) scale(1); } 50% { opacity:1; transform:translateX(-50%) scale(1.06); } }
.stars { position:absolute; inset:0; background-image:
  radial-gradient(1.2px 1.2px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 82% 12%, #fff7 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 68% 34%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 24% 52%, #fff6 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 90% 58%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 8% 80%, #fff5 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 56% 88%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 38% 8%, #fff6 50%, transparent 51%); animation:twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity:.45; } to { opacity:1; } }

/* Farfalla ferma al centro (nessuna levitazione): corpo fisso, solo le due ali si chiudono ogni tanto verso il corpo. */
.butterfly { position:relative; width:var(--w); height:var(--h); margin-bottom:6px; opacity:1; }
.butterfly::before { content:""; position:absolute; left:50%; top:52%; width:118%; aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle, #c9a0e02e 0%, #9d6cc01c 34%, transparent 66%); pointer-events:none; z-index:-1; }
@keyframes appear { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }
.butterfly i { position:absolute; inset:0; background:no-repeat center / 100% 100%; display:block; }
.butterfly .body { background-image:url("./bf-body.png"); }
.butterfly .wl { background-image:url("./bf-wing-l.png"); transform-origin:49.9% 50%;  will-change:transform; }
.butterfly .wr { background-image:url("./bf-wing-r.png"); transform-origin:49.9% 50%;  will-change:transform; }
.butterfly.idle .wl, .butterfly.idle .wr { animation:flap 7s ease-in-out infinite; }
@keyframes flap {
  0%,60% { transform:scaleX(1); }
  65% { transform:scaleX(.45); }
  70% { transform:scaleX(1); }
  75% { transform:scaleX(.55); }
  80%,100% { transform:scaleX(1); }
}
.w { display:none; }

/* Apertura come nell'app: buio viola notte, poi la luce sale piano e la farfalla entra in volo e si posa. */
.veil { position:absolute; inset:0; z-index:20; background:#090411; pointer-events:none; }
.bloom { position:absolute; width:760px; height:760px; margin:-380px 0 0 -380px; left:50%; top:30%; z-index:21; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, #dbbdf2 0%, #b98ad9 26%, #8a4fa955 48%, transparent 68%); mix-blend-mode:screen; }
.butterfly { z-index:22; }

.eyebrow { margin-top:20px; font-size:.78rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:#caa7dc; opacity:0; animation:rise 1.2s ease 5.0s forwards; }
h1 { margin:.5rem 0 .8rem; font:400 clamp(2.4rem,9.4vw,4.6rem)/1.05 var(--serif); letter-spacing:-.01em; opacity:0; animation:rise 1.4s ease 5.3s forwards; }
/* Il titolo dell'inizio ha il gradiente di Obvia: crema → lilla → oro. */
.hero h1 { background:linear-gradient(100deg,#b57be0 0%,#e7c7f7 22%,#fff1dc 42%,#f6c77a 66%,#e0a04a 82%,#c58bea 100%); background-size:220% 100%; animation:rise 1.4s ease 5.3s forwards, sheen 9s ease-in-out 7s infinite alternate; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; padding-bottom:.08em; }
.hero .eyebrow { background:linear-gradient(90deg,#caa7dc,#e2b979); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.hero .seats b { background:linear-gradient(180deg,#f6d79a,#d1943d); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lead { max-width:30rem; color:#cdbed6; font-size:1.08rem; opacity:0; animation:rise 1.4s ease 5.6s forwards; }
.seats { margin-top:26px; display:inline-flex; align-items:baseline; gap:10px; padding:10px 22px; border-radius:999px; border:1px solid #ffffff22; background:#ffffff0d; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; animation:rise 1.4s ease 5.9s forwards; }
.seats b { font:600 1.6rem var(--serif); color:var(--gold); }
.seats span { color:#d9cbe2; font-size:.95rem; }
.cta { margin-top:22px; opacity:0; animation:rise 1.4s ease 6.2s forwards; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.btn { display:inline-block; padding:17px 34px; border-radius:999px; background:linear-gradient(180deg,#e2a74f,#c9852f); color:#2a1606; font-weight:700; font-size:1.05rem; text-decoration:none; box-shadow:0 14px 40px #d1943d44, inset 0 1px 0 #ffffff55; transition:transform .25s, box-shadow .25s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 18px 46px #d1943d66, inset 0 1px 0 #ffffff55; }
.btn:active { transform:scale(.98); }
.platform { margin-top:14px; font-size:.86rem; color:#a898b4; }
.platform.dark { color:#d6c6e0; }
.scroll { position:absolute; bottom:26px; left:50%; width:26px; height:42px; margin-left:-13px; border:1.5px solid #ffffff44; border-radius:14px; opacity:0; animation:rise 1s ease 6.8s forwards; }
.scroll span { position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff; animation:dot 1.8s ease-in-out infinite; }
@keyframes dot { 0% { opacity:0; transform:translateY(0); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(16px); } }

/* ───── Zona chiara ───── */
.paperzone { background:var(--paper); position:relative; }
.paperzone::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad); }
.grad, .paperzone h2, .paperzone .kicker { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.paperzone .kicker { background-size:100% 100%; display:inline-block; }
.ring .prog { stroke:url(#ringGrad); }
.ring-card.expired .prog { stroke:#e53030; }

/* ───── Mappa ───── */
.map { display:grid; gap:44px; align-items:center; max-width:1040px; margin:0 auto; padding:110px 24px; }
@media (min-width:860px) { .map { grid-template-columns:1fr 340px; gap:80px; } }
.kicker { font-size:.78rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--plum); margin-bottom:14px; }
.kicker.light { color:#caa7dc; }
h2 { font:400 clamp(2rem,7.4vw,3.3rem)/1.08 var(--serif); color:var(--plum); }
.map-copy p:last-child { margin-top:18px; color:#4b4252; font-size:1.08rem; max-width:30rem; }
.phone { justify-self:center; width:min(310px,80vw); padding:11px; border-radius:50px; background:linear-gradient(160deg,#2b1c36,#0d0614); box-shadow:0 40px 90px #3a1a5244, 0 0 0 1.5px #ffffff18 inset; }
.screen { position:relative; border-radius:40px; overflow:hidden; background:var(--paper); aspect-ratio:9/19; }
.notch { position:absolute; top:9px; left:50%; width:84px; height:23px; margin-left:-42px; border-radius:12px; background:#0d0614; z-index:6; }
.app { position:absolute; inset:0; padding:46px 14px 0; display:flex; flex-direction:column; }
.top { display:flex; align-items:center; gap:6px; font:600 .5rem var(--sans); letter-spacing:.14em; color:var(--ink); }
.top svg { width:10px; height:10px; vertical-align:-1px; margin-right:4px; }
.top .loc { display:flex; align-items:center; margin-right:auto; }
.top .cred { display:flex; align-items:center; gap:5px; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.coin { width:17px; height:17px; background:url("./bf-coin.png") center / contain no-repeat; }
.bell { color:var(--plum); } .bell svg { width:15px; height:15px; margin:0; }
.ttl { margin-top:14px; font:400 1.45rem/1.1 var(--serif); color:var(--plum); }
.sub { margin-top:6px; font-size:.6rem; line-height:1.3; color:#756c78; }
.mapcard { position:relative; flex:1; margin:12px -2px 0; border-radius:26px 26px 0 0; overflow:hidden; background:#ece7e4b8; box-shadow:0 0 0 1px #5a2a7214 inset; }
#hexmap { position:absolute; inset:0; width:100%; height:100%; }
.mtitle { position:absolute; top:9px; left:9px; display:flex; align-items:center; gap:4px; padding:6px 8px; border-radius:99px; background:#ece7e4f0; font:600 .4rem var(--sans); letter-spacing:.14em; color:var(--ink); }
.mtitle svg { width:8px; height:8px; }
.cbtn { position:absolute; top:9px; right:9px; width:26px; height:26px; border-radius:50%; background:var(--plum); color:#fff; display:grid; place-items:center; box-shadow:0 2px 4px #0003; }
.cbtn svg { width:11px; height:11px; }
.ctrl { position:absolute; left:50%; bottom:84px; transform:translateX(-50%); display:flex; align-items:center; gap:2px; padding:3px; border-radius:99px; background:#ece7e4f5; box-shadow:0 0 0 1px #5a2a721a inset; color:var(--ink); font-size:.62rem; }
.ctrl b { width:26px; text-align:center; font-weight:500; font-size:.9rem; } .ctrl em { font-style:normal; width:30px; text-align:center; font-variant-numeric:tabular-nums; font-size:.55rem; }
.ctrl u { width:1px; height:12px; background:#0002; margin:0 3px; } .ctrl span { width:26px; display:grid; place-items:center; } .ctrl svg { width:13px; height:13px; }

/* Dock: vetro liquido come la TabView di iOS 26 (barra fluttuante, capsula di selezione color prugna che si stira e rimbalza) */
.tabbar { position:absolute; left:12px; right:12px; bottom:10px; z-index:5; display:grid; grid-template-columns:repeat(5,1fr); padding:4px; border-radius:99px; isolation:isolate;
  background:linear-gradient(180deg,#ffffff5c,#ffffff24);
  -webkit-backdrop-filter:blur(9px) saturate(2) brightness(1.06); backdrop-filter:blur(9px) saturate(2) brightness(1.06);
  box-shadow:0 0 0 .6px #ffffffcc inset, 0 1.5px 1px #ffffffee inset, 0 -1.5px 3px #ffffff80 inset, 0 8px 22px #3a1a5230, 0 1px 2px #3a1a5222; }
.tabbar::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(120% 90% at 18% 0%,#ffffff70,transparent 46%), radial-gradient(90% 70% at 90% 110%,#ffffff40,transparent 50%); mix-blend-mode:soft-light; }
.tabbar .ind { position:absolute; z-index:-1; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 5); border-radius:99px; will-change:transform;
  background:linear-gradient(180deg,#5a2a7233,#5a2a7218); -webkit-backdrop-filter:blur(4px) saturate(1.8); backdrop-filter:blur(4px) saturate(1.8);
  box-shadow:0 0 0 .7px #ffffffd0 inset, 0 1.5px 1px #ffffffcc inset, 0 -2px 6px #5a2a7226 inset, 0 3px 8px #5a2a7222; }
.tabbar .tab { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0 5px; color:#7a6f82; transition:color .4s; }
.tabbar .tab svg { width:17px; height:17px; }
.tabbar .tab b { font:600 .43rem var(--sans); letter-spacing:.01em; }
.tabbar .tab.on { color:var(--plum); }

/* Esagoni: stessi colori e stessi stati della mappa dell'app */
#pan { animation:drift 22s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform:translate(0,0); } 30% { transform:translate(-34px,22px); } 60% { transform:translate(26px,-26px); } 80% { transform:translate(10px,14px); } }
.hx .base { fill:#f7f4ef; stroke:#5a2a721f; stroke-width:1; }
.hx.free .base { fill:#5a2a720e; stroke:#5a2a7221; }
.hx.rev .base { fill:#5a2a7221; stroke:#5a2a7266; }
.hx.me .base { fill:#5a2a72; stroke:none; }
.hx.mine .base { stroke:#d1943d; stroke-width:2.5; }
.hx text { text-anchor:middle; dominant-baseline:central; }
.hx .num { font:500 8px ui-monospace,Menlo,monospace; fill:#5a2a7280; }
.hx.rev .num { fill:#5a2a72; }
.hx .q { font:600 24px var(--serif); fill:#5a2a72b8; }
.hx .qn { font:500 7px ui-monospace,Menlo,monospace; fill:#5a2a7260; }
.hx .lockic { fill:#5a2a7238; }
.hx .bf, .hx .who { transform-box:fill-box; transform-origin:center; }
.hx .who { opacity:0; }
.hx.rev .who { opacity:1; } .hx.rev .bf { opacity:0; }
.hx .hglow { fill:none; stroke:#d1943d; stroke-width:3; opacity:0; filter:blur(1.6px); }
.hx.flip { animation:hxscale 4.6s ease-in-out; }
.hx.flip .bf { animation:bfout .55s .2s both ease-in; }
.hx.flip .who { animation:whoin .7s .55s both cubic-bezier(.2,1.4,.4,1); }
.hx.flip .hglow { animation:hglow .9s .75s 4 alternate ease-in-out; }
.hx.flip .base { animation:basein .6s .4s both; }
@keyframes bfout { to { transform:scaleX(0); opacity:0; } }
@keyframes whoin { from { transform:scaleX(0); opacity:1; } to { transform:scaleX(1); opacity:1; } }
@keyframes hglow { from { opacity:.35; } to { opacity:.9; } }
@keyframes basein { to { fill:#5a2a7221; stroke:#5a2a7266; } }
@keyframes hxscale { 0%,100% { transform:scale(1); } 30%,60% { transform:scale(1.1); } }
.hx.flip .num { animation:numout .3s .3s both; }
@keyframes numout { to { opacity:0; } }
.hx.noav.flip .who { display:none; }

/* ───── Valori ───── */
.values { display:grid; gap:16px; max-width:1040px; margin:0 auto; padding:10px 24px 110px; }
@media (min-width:760px) { .values { grid-template-columns:1fr 1fr; } }
.v { position:relative; padding:30px 28px 32px; border-radius:28px; background:#fff; border:1px solid #ece3ef; box-shadow:0 18px 60px #391a4610; overflow:hidden; }
.v i { position:absolute; right:22px; top:10px; font:400 4.2rem/1 var(--serif); color:#5a2a7212; font-style:normal; }
.v h3 { font:400 1.45rem/1.2 var(--serif); color:var(--plum); max-width:16em; }
.v::after { content:""; position:absolute; left:28px; top:0; width:64px; height:3px; border-radius:0 0 3px 3px; background:var(--grad); }
.v i { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; opacity:.22; }
.v p { margin-top:10px; color:#4b4252; font-size:1rem; }

/* ───── 100 posti ───── */
.hundred { text-align:center; padding:110px 24px; color:#f4ecf8; background:radial-gradient(80% 90% at 50% 0%, #34174d 0%, var(--night) 75%); }
.big { font:400 clamp(7rem,34vw,15rem)/.9 var(--serif); background:linear-gradient(180deg,#f2cf8f,#d1943d 60%,#8a5a22); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; margin:6px 0; }
.hundred h2 { color:#f1e3f8; font-size:clamp(1.8rem,6vw,2.6rem); }
.hundred p { max-width:28rem; margin:16px auto 0; color:#cdbed6; }

/* ───── Finale ───── */
.final { text-align:center; padding:110px 24px 120px; background:linear-gradient(180deg,var(--night) 0%, #2a1240 100%); color:#f4ecf8; }
.final h2 { color:#f1e3f8; margin-bottom:30px; }

footer { text-align:center; padding:34px 24px calc(42px + env(safe-area-inset-bottom)); background:#2a1240; border-top:1px solid transparent; border-image:linear-gradient(90deg,#5a2a72,#9d62c9,#d1943d) 1; color:#a898b4; font-size:.86rem; }
footer nav { display:flex; justify-content:center; gap:26px; margin-bottom:10px; }
footer a { color:#d6c6e0; text-decoration:none; font-weight:600; }

/* ───── Comparsa allo scorrimento ───── */
/* ───── Il tempo (stesso anello dell'app) ───── */
.time { display:grid; gap:40px; align-items:center; justify-items:center; max-width:1040px; margin:0 auto; padding:30px 24px 110px; }
@media (min-width:860px) { .time { grid-template-columns:1fr 340px; gap:80px; justify-items:stretch; } .ring-card { justify-self:center; } }
.time-copy p:last-child { margin-top:18px; color:#4b4252; font-size:1.08rem; max-width:30rem; }
.ring-card { position:relative; width:min(280px,74vw); aspect-ratio:1; border-radius:36px; background:#fff; border:1px solid #ece3ef; box-shadow:0 24px 70px #391a461a; display:grid; place-items:center; }
.ring { width:72%; }
.ring .track { fill:none; stroke:#5a2a7221; stroke-width:10; transition:stroke .25s; }
.ring .prog { fill:none; stroke:var(--plum); stroke-width:10; stroke-linecap:round; stroke-dasharray:364.4; stroke-dashoffset:0; transition:stroke .25s; }
.ring-card.expired .track { stroke:#e5303024; } .ring-card.expired .prog { stroke:#e53030; }
.ring-text b { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ring-card.expired .ring-text b { background:none; -webkit-text-fill-color:#e53030; }
.ring-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--plum); transition:color .25s; }
.ring-text b { font:700 1.65rem ui-monospace,Menlo,monospace; letter-spacing:.02em; }
.ring-text small { font:700 .56rem var(--sans); letter-spacing:.14em; }
.ring-card.expired .ring-text { color:#e53030; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.values .reveal:nth-child(2) { transition-delay:.08s; } .values .reveal:nth-child(3) { transition-delay:.16s; } .values .reveal:nth-child(4) { transition-delay:.24s; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .veil, .bloom { display:none; }
  .butterfly, .eyebrow, h1, .lead, .seats, .cta, .scroll { opacity:1 !important; }
  .reveal { opacity:1; transform:none; }
}

.hx.me .base { animation:mepulse 3.2s ease-in-out infinite; }
@keyframes mepulse { 0%,100% { filter:drop-shadow(0 0 0 #5a2a7200); } 50% { filter:drop-shadow(0 0 6px #5a2a7299); } }
.hx.noav.shown text.q, .hx.noav.open text.q { opacity:1; }

@keyframes sheen { from { background-position:0% 50%; } to { background-position:100% 50%; } }
.lead .shout { display:inline-block; margin-top:.7em; font:italic 400 1.45rem/1.2 var(--serif); letter-spacing:.005em; background:linear-gradient(100deg,#c48ae8,#f3d9ff 35%,#f6c77a 70%,#e0a04a); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:sheen 7s ease-in-out infinite alternate; }