:root{
  --viola:#6D31D3; --viola-chiaro:#8B5CF6; --viola-scuro:#4A1D9E;
  --notte:#160B2E; --notte-2:#241243;
  --carta:#ffffff; --sfondo:#F7F5FB; --sfondo-2:#EFEAFA;
  --testo:#1B1330; --testo-2:#5B5470; --bordo:#E6E0F2;
  --verde:#0E9F6E;
  --r:20px; --max:1180px;
  --ombra:0 1px 2px rgba(22,11,46,.04), 0 12px 32px -12px rgba(22,11,46,.16);
  --ombra-alta:0 2px 4px rgba(22,11,46,.06), 0 30px 60px -20px rgba(22,11,46,.30);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--sfondo); color:var(--testo);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
h1,h2,h3{margin:0; letter-spacing:-.025em; line-height:1.1; font-weight:800}
h1{font-size:clamp(2.3rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.8rem)}
h3{font-size:1.15rem; letter-spacing:-.01em}
p{margin:0}
.occhiello{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 15px; border-radius:999px;
}

/* ── barra ─────────────────────────────────────────────── */
.barra{position:sticky; top:0; z-index:60; backdrop-filter:saturate(180%) blur(14px);
  background:rgba(247,245,251,.82); border-bottom:1px solid transparent; transition:border-color .2s}
.barra.giu{border-bottom-color:var(--bordo)}
.barra .wrap{display:flex; align-items:center; gap:28px; height:70px}
.marchio{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.15rem; text-decoration:none; letter-spacing:-.02em}
.marchio img{width:34px; height:34px; border-radius:9px}
.menu{display:flex; gap:26px; margin-left:auto; font-size:.95rem; font-weight:600}
.menu a{color:var(--testo-2); text-decoration:none; transition:color .15s}
.menu a:hover{color:var(--viola)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:999px; font-weight:700; font-size:.98rem;
  text-decoration:none; border:0; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-viola{background:var(--viola); color:#fff; box-shadow:0 8px 20px -8px rgba(109,49,211,.7)}
.btn-viola:hover{background:var(--viola-scuro); transform:translateY(-1px)}
.btn-chiaro{background:#fff; color:var(--testo); border:1px solid var(--bordo)}
.btn-chiaro:hover{border-color:#cdbff0}
.solo-largo{display:none}
.solo-stretto{display:inline-flex; margin-left:auto; padding:11px 18px; font-size:.92rem}
@media(min-width:900px){ .solo-largo{display:inline-flex} .solo-stretto{display:none} }
@media(max-width:760px){ .menu{display:none} }

/* ── apertura ──────────────────────────────────────────── */
.apertura{position:relative; overflow:hidden; padding:76px 0 40px}
@media(min-width:1000px){ .apertura{padding-bottom:96px} }
.apertura::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:820px; z-index:0;
  background:
    radial-gradient(680px 380px at 18% 8%, rgba(139,92,246,.30), transparent 62%),
    radial-gradient(620px 420px at 88% 22%, rgba(240,98,146,.20), transparent 60%),
    radial-gradient(700px 380px at 55% 65%, rgba(0,188,212,.13), transparent 62%);
  filter:blur(6px);
}
.apertura .wrap{position:relative; z-index:1}
.griglia-apertura{display:grid; grid-template-columns:1fr; gap:52px; align-items:center}
@media(min-width:1000px){ .griglia-apertura{grid-template-columns:1.02fr .98fr; gap:40px} }
.occhiello-apertura{background:#fff; color:var(--viola); border:1px solid var(--bordo); box-shadow:var(--ombra)}
.punto{width:7px;height:7px;border-radius:99px;background:var(--verde);box-shadow:0 0 0 3px rgba(14,159,110,.18)}
.apertura h1{margin:22px 0 0}
.apertura h1 em{font-style:normal; color:var(--viola)}
.sommario{margin-top:20px; font-size:1.13rem; color:var(--testo-2); max-width:33em}
.azioni{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.gratis{display:flex; align-items:center; gap:9px; margin-top:22px; font-weight:600; color:var(--verde); font-size:.98rem}

/* pulsanti store */
.store{display:inline-flex; align-items:center; gap:11px; padding:11px 20px 11px 17px;
  border-radius:15px; text-decoration:none; font-weight:600; transition:transform .15s, box-shadow .15s}
.store svg{width:26px; height:26px; flex:none}
.store b{display:block; font-size:1.02rem; font-weight:750; letter-spacing:-.01em; line-height:1.15}
.store span{display:block; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; opacity:.72; font-weight:600}
.store-attivo{background:var(--notte); color:#fff; box-shadow:0 10px 26px -12px rgba(22,11,46,.85)}
.store-attivo:hover{transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(22,11,46,.9)}
.store-presto{background:#fff; color:var(--testo-2); border:1px dashed #cfc6e4; cursor:default}
.store-presto b{color:var(--testo)}

/* ventaglio di carte */
.ventaglio{position:relative; height:520px; display:none}
@media(min-width:1000px){ .ventaglio{display:block} }
.ventaglio img{
  position:absolute; width:300px; border-radius:16px; box-shadow:var(--ombra-alta);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.ventaglio img:nth-child(1){left:0;   top:56px;  transform:rotate(-7deg) translateZ(0); z-index:1}
.ventaglio img:nth-child(2){left:100px; top:0;   transform:rotate(1deg);  z-index:3}
.ventaglio img:nth-child(3){left:200px; top:74px; transform:rotate(8deg);  z-index:2}
.ventaglio:hover img:nth-child(1){transform:rotate(-11deg) translate(-14px,-6px)}
.ventaglio:hover img:nth-child(3){transform:rotate(12deg) translate(14px,-6px)}
.ventaglio-piccolo{display:flex; gap:14px; overflow-x:auto; padding:4px 24px 18px; margin:0 -24px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.ventaglio-piccolo img{width:250px; flex:none; border-radius:14px; box-shadow:var(--ombra); scroll-snap-align:center}
@media(min-width:1000px){ .ventaglio-piccolo{display:none} }

/* ── fascia scorrevole ─────────────────────────────────── */
.sezione{padding:92px 0}
.sezione-scura{background:var(--notte); color:#fff}
.titolo-sez{max-width:44rem}
.titolo-sez .occhiello{background:var(--sfondo-2); color:var(--viola); margin-bottom:18px}
.sezione-scura .titolo-sez .occhiello{background:rgba(255,255,255,.10); color:#C4B0F5}
.titolo-sez p{margin-top:16px; font-size:1.1rem; color:var(--testo-2)}
.sezione-scura .titolo-sez p{color:#B8AFD0}

.nastro{margin-top:52px; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.nastro + .nastro{margin-top:22px}
.pista{display:flex; gap:22px; width:max-content; animation:scorri 64s linear infinite}
.pista-2{animation-duration:78s; animation-direction:reverse}
.nastro:hover .pista{animation-play-state:paused}
.pista img{width:300px; border-radius:15px; box-shadow:0 20px 44px -22px rgba(0,0,0,.75); background:#fff}
@keyframes scorri{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){
  .pista{animation:none}
  .nastro{overflow-x:auto}
}

/* ── passi ─────────────────────────────────────────────── */
.passi{display:grid; gap:22px; margin-top:52px; grid-template-columns:1fr}
@media(min-width:820px){ .passi{grid-template-columns:repeat(3,1fr)} }
.passo{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r); padding:30px 26px 32px; box-shadow:var(--ombra)}
.numero{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--viola),var(--viola-chiaro)); color:#fff;
  font-weight:800; font-size:1.05rem; margin-bottom:20px;
  box-shadow:0 10px 20px -10px rgba(109,49,211,.9);
}
.passo p{margin-top:11px; color:var(--testo-2); font-size:1rem}

/* ── confronto ─────────────────────────────────────────── */
.confronto{display:grid; gap:20px; margin-top:52px; grid-template-columns:1fr}
@media(min-width:860px){ .confronto{grid-template-columns:1fr 1fr; gap:26px} }
.colonna{border-radius:var(--r); padding:30px 28px}
.col-prima{background:#fff; border:1px solid var(--bordo)}
.col-dopo{background:linear-gradient(155deg,var(--viola),#5324A8); color:#fff; box-shadow:0 26px 54px -26px rgba(109,49,211,.85)}
.colonna h3{display:flex; align-items:center; gap:10px; margin-bottom:20px; font-size:1.05rem; letter-spacing:.01em}
.colonna ul{margin:0; padding:0; list-style:none; display:grid; gap:14px}
.colonna li{display:flex; gap:12px; align-items:flex-start; font-size:1rem}
.col-prima li{color:var(--testo-2)}
.segno{flex:none; width:22px; height:22px; border-radius:99px; display:grid; place-items:center; font-size:.72rem; font-weight:800; margin-top:2px}
.col-prima .segno{background:#F3EFF9; color:#9A8FB5}
.col-dopo .segno{background:rgba(255,255,255,.20); color:#fff}

/* ── riquadri ──────────────────────────────────────────── */
.riquadri{display:grid; gap:20px; margin-top:52px; grid-template-columns:1fr}
@media(min-width:760px){ .riquadri{grid-template-columns:1fr 1fr} }
@media(min-width:1040px){ .riquadri{grid-template-columns:repeat(3,1fr)} }
.riquadro{background:#fff; border:1px solid var(--bordo); border-radius:var(--r); padding:28px 26px; box-shadow:var(--ombra)}
.icona{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px; background:var(--sfondo-2)}
.icona svg{width:22px; height:22px; stroke:var(--viola); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.riquadro p{margin-top:10px; color:var(--testo-2); font-size:.99rem}

/* ── portafogli ────────────────────────────────────────── */
.portafogli{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.badge-wallet{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); color:#fff; padding:11px 18px; border-radius:13px; font-weight:650; font-size:.96rem}
.badge-wallet svg{width:20px;height:20px}

/* ── chiusura ──────────────────────────────────────────── */
.chiusura{text-align:center; padding:96px 0}
.chiusura .azioni{justify-content:center}
.chiusura .gratis{justify-content:center}
.chiusura img.icona-app{width:88px; height:88px; border-radius:22px; margin:0 auto 26px; box-shadow:var(--ombra-alta)}

/* ── piede ─────────────────────────────────────────────── */
.piede{background:var(--notte); color:#9A90B8; padding:52px 0 40px; font-size:.94rem}
.piede .wrap{display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between}
.piede a{color:#C9C0E4; text-decoration:none}
.piede a:hover{color:#fff; text-decoration:underline}
.piede-link{display:flex; flex-wrap:wrap; gap:22px}
.piede-marchio{display:flex; align-items:center; gap:11px; color:#fff; font-weight:750}
.piede-marchio img{width:30px;height:30px;border-radius:8px}
.piede-nife{display:flex; align-items:center; gap:9px; opacity:.8}
.piede-nife img{width:96px; filter:invert(1) brightness(2)}

/* ══ PAGINE DI TESTO (assistenza, privacy) ═══════════════ */
.testata-doc{position:relative; overflow:hidden; padding:64px 0 52px; background:var(--sfondo)}
.testata-doc::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:520px; z-index:0;
  background:radial-gradient(620px 320px at 20% 10%, rgba(139,92,246,.26), transparent 62%),
             radial-gradient(560px 320px at 82% 30%, rgba(0,188,212,.14), transparent 60%);
  filter:blur(6px);
}
.testata-doc .wrap{position:relative; z-index:1}
.testata-doc .occhiello{background:#fff; color:var(--viola); border:1px solid var(--bordo); box-shadow:var(--ombra)}
.testata-doc h1{font-size:clamp(2rem,4.6vw,3.3rem); margin:20px 0 0}
.testata-doc h1 em{font-style:normal; color:var(--viola)}
.testata-doc .sommario{margin-top:18px}
.data-doc{margin-top:20px; font-size:.9rem; color:var(--testo-2)}

.doc{padding:0 0 92px}
.doc-griglia{display:grid; grid-template-columns:1fr; gap:40px}
@media(min-width:1000px){ .doc-griglia{grid-template-columns:250px 1fr; gap:56px; align-items:start} }
.indice{display:none}
@media(min-width:1000px){
  .indice{display:block; position:sticky; top:96px; font-size:.93rem}
  .indice ol{margin:0; padding:0; list-style:none; display:grid; gap:9px; border-left:2px solid var(--bordo); padding-left:18px}
  .indice a{color:var(--testo-2); text-decoration:none}
  .indice a:hover{color:var(--viola)}
  .indice .titolo-indice{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--testo-2); margin-bottom:14px}
}
.blocco{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r); padding:30px 30px 32px; box-shadow:var(--ombra); margin-bottom:20px; scroll-margin-top:92px}
.blocco > h2{font-size:1.42rem; margin-bottom:14px}
.blocco > h3{margin:24px 0 8px}
.blocco p + p{margin-top:13px}
.blocco p, .blocco li{color:var(--testo-2)}
.blocco strong{color:var(--testo); font-weight:700}
.blocco ul{margin:14px 0 0; padding-left:0; list-style:none; display:grid; gap:12px}
.blocco ul li{position:relative; padding-left:26px}
.blocco ul li::before{content:""; position:absolute; left:8px; top:.62em; width:6px; height:6px; border-radius:99px; background:var(--viola-chiaro)}
.blocco a{color:var(--viola); font-weight:600}
.blocco table{width:100%; border-collapse:collapse; margin-top:16px; font-size:.97rem}
.blocco th{text-align:left; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--testo-2); padding:0 0 10px; border-bottom:1px solid var(--bordo)}
.blocco td{padding:14px 16px 14px 0; border-bottom:1px solid var(--bordo); vertical-align:top; color:var(--testo-2)}
.blocco td:first-child{font-weight:700; color:var(--testo); width:38%}
.blocco tr:last-child td{border-bottom:0}
.rilievo{background:linear-gradient(155deg,var(--viola),#5324A8); color:#fff; border:0; box-shadow:0 26px 54px -26px rgba(109,49,211,.8)}
.rilievo h2, .rilievo strong{color:#fff}
.rilievo p, .rilievo li{color:#E4DBFA}
.rilievo ul li::before{background:rgba(255,255,255,.6)}
.rilievo a{color:#fff; text-decoration:underline}
.avviso{background:#FFF8E9; border:1px solid #F0DFB8; border-radius:14px; padding:18px 20px; margin-top:18px}
.avviso p{color:#7A5A18}
.posta{display:inline-flex; align-items:center; gap:11px; margin-top:18px; background:var(--notte); color:#fff;
  padding:15px 24px; border-radius:14px; text-decoration:none; font-weight:700; font-size:1.02rem;
  box-shadow:0 12px 28px -14px rgba(22,11,46,.9)}
.posta:hover{transform:translateY(-1px)}
.posta svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}

/* domande a fisarmonica */
.domanda{border-bottom:1px solid var(--bordo)}
.domanda:last-child{border-bottom:0}
.domanda summary{
  cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative;
  font-weight:700; font-size:1.04rem; color:var(--testo); letter-spacing:-.01em;
}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary::after{
  content:""; position:absolute; right:6px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2.4px solid var(--viola); border-bottom:2.4px solid var(--viola);
  transform:rotate(45deg); transition:transform .2s;
}
.domanda[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.domanda .risposta{padding:0 0 20px}
.domanda .risposta p + p{margin-top:12px}
.blocco ul + p, .blocco table + p, .blocco .avviso + p{margin-top:14px}

/* ── la galleria delle 18 carte (3/09/2026) ──────────────
   Prima erano due nastri che scorrevano: le nove grafiche nuove
   arrivavano dopo più di un minuto e non le vedeva nessuno.
   Adesso stanno tutte in pagina, con il nome e a chi servono. */
.galleria-carte{
  display:grid; gap:38px 26px; margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
@media(min-width:560px){ .galleria-carte{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))} }
@media(min-width:1000px){ .galleria-carte{grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:44px 28px} }
/* le carte sono alte in modo diverso: la didascalia si appoggia in fondo,
   così i nomi stanno su una riga sola e la griglia non sembra sbilenca */
.carta-voce{margin:0; display:flex; flex-direction:column; height:100%}
.carta-voce img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.55));
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.carta-voce:hover img{transform:translateY(-8px)}
.carta-voce figcaption{margin-top:auto; padding-top:18px}
.carta-voce b{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:#fff; font-size:1rem; font-weight:750; letter-spacing:-.01em;
}
.carta-voce span{display:block; margin-top:6px; color:#B8AFD0; font-size:.87rem; line-height:1.45}
.chip-euro{
  font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#C4B0F5; background:rgba(255,255,255,.10); border-radius:999px; padding:3px 8px;
}
.tutte-qui{color:#fff; display:inline-block; margin-top:10px}
@media(prefers-reduced-motion:reduce){ .carta-voce img{transition:none} .carta-voce:hover img{transform:none} }