/* ============================================================
   FantaCalcetto — sito pubblico (vetrina + regolamento)
   Foglio di stile condiviso da sito.html e regolamento.html.

   Gli stessi colori e gli stessi caratteri dell'app (index.html),
   ma con regole da SITO, non da app:
   - il testo si SELEZIONA e si copia (nell'app è bloccato)
   - lo scroll è quello normale della pagina (niente position:fixed)
   - le barre di scorrimento restano visibili sul desktop
   Se un giorno si copia del CSS dall'app, ricordarsi di NON portarsi
   dietro user-select:none, overflow nascosto e altezze fisse.
   ============================================================ */

:root{
  /* --- identici a index.html --- */
  --bg:#0a1626; --bg2:#0e1d34; --surface:#15294b; --surface2:#1f3a6c;
  --line:rgba(150,185,240,.10); --line-strong:rgba(150,185,240,.20);
  --text:#eef4fd; --muted:#9bb2d6;
  --accent:#3f97ff; --accent-soft:#7ec2ff; --accent-deep:#1c6ff2;
  --gold:#ffc23d; --gold-soft:#ffd470; --green:#2fd98a; --red:#ff5d6b;
  --brand-mark:#dbe5f6;
  /* --- solo del sito --- */
  --maxw:1080px;
  --radius:20px;
  --shadow:0 24px 60px -34px rgba(0,6,20,.95);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  color:var(--text);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.6;
  overflow-x:hidden;
  background:var(--bg);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(63,151,255,.20), transparent 62%),
    radial-gradient(80% 40% at 90% 30%, rgba(255,194,61,.05), transparent 60%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:6px}

/* ---------- tipografia ---------- */
h1,h2,h3,.display{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.035em;line-height:1.04;font-weight:800}
h1{font-size:clamp(38px,7.4vw,68px)}
h2{font-size:clamp(29px,4.6vw,44px)}
h3{font-size:20px;letter-spacing:-.02em;line-height:1.2}
p{color:#d3e0f4}
.lead{font-size:clamp(17px,2.1vw,20px);color:var(--muted);line-height:1.65}
.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);
  display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.num{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- impalcatura ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{padding:clamp(46px,6.4vw,86px) 0;position:relative}
.sec-head{max-width:660px;margin-bottom:clamp(24px,3.2vw,38px)}
.sec-head h2{margin:14px 0 10px}
.hr{margin:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);border:0}

/* ---------- barra in alto ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,22,38,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s, background .25s;
}
.topbar.stuck{border-bottom-color:var(--line);background:rgba(10,22,38,.9)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Bricolage Grotesque';font-weight:800;font-size:18.5px;letter-spacing:-.03em}
.brand img{width:34px;height:34px;border-radius:10px;box-shadow:0 6px 18px -8px rgba(63,151,255,.9)}
.brand .b2{color:var(--brand-mark)}
.topnav{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:600;color:var(--muted)}
.topnav a{transition:color .2s}
.topnav a:hover{color:var(--text)}
.topnav a{position:relative;padding:5px 0}
.topnav a.on{color:var(--text)}
.topnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--accent);border-radius:2px}
@media (max-width:1120px){.topnav{display:none}}

/* ---------- pulsanti ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Hanken Grotesk';font-weight:700;font-size:16px;
  padding:14px 24px;border-radius:14px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;
  box-shadow:0 16px 34px -18px rgba(63,151,255,.95), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{box-shadow:0 20px 42px -16px rgba(63,151,255,1), inset 0 1px 0 rgba(255,255,255,.22)}
.btn-ghost{background:rgba(150,185,240,.07);color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(150,185,240,.13)}
.btn-sm{padding:10px 17px;font-size:14.5px;border-radius:12px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.topbar .btn{margin-left:0}
@media (max-width:1120px){.topbar .btn{margin-left:auto}}
@media (max-width:420px){.topbar .btn{padding:9px 12px;font-size:13.5px}}

/* ---------- pastiglie dei punti (il vocabolario dell'app) ---------- */
.pt{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
  padding:4px 10px;border-radius:9px;display:inline-block;white-space:nowrap;
}
.pt.pos{background:rgba(47,217,138,.16);color:var(--green)}
.pt.neg{background:rgba(255,93,107,.16);color:var(--red)}
.pt.x2{background:rgba(255,194,61,.16);color:var(--gold)}

/* ============================================================
   APERTURA — titolo corto e subito le schermate da scorrere
   ============================================================ */
.hero{padding-top:clamp(32px,5vw,62px);padding-bottom:clamp(26px,3.6vw,44px)}
.hero-head{max-width:720px}
.hero h1{margin:18px 0 16px}
.hero h1 em{font-style:normal;color:var(--accent-soft)}
.hero .lead{max-width:560px}
.hero-shots{padding-top:clamp(24px,3.4vw,36px);padding-bottom:clamp(40px,5vw,72px)}

/* ---------- telefono ---------- */
/* Le proporzioni della scocca seguono lo screenshot che contiene (--ar),
   così l'immagine ci entra intera: niente lati o piedi tagliati.
   Le schermate dell'app sono 640x1306, quelle dell'installazione 640x1387. */
.phone{
  width:100%;max-width:302px;margin:0 auto;
  border-radius:40px;padding:8px;position:relative;
  background:linear-gradient(160deg,#2b3f61,#131f36 40%,#0b1424);
  box-shadow:var(--shadow), 0 0 0 1px rgba(150,185,240,.14), inset 0 1px 0 rgba(255,255,255,.16);
}
/* scocca Android: angoli più squadrati, cornice più sottile */
.phone.and{border-radius:22px;padding:6px;background:linear-gradient(160deg,#3a4256,#1b2130 45%,#0f131c)}
.phone.and .phone-screen{border-radius:17px}
/* Le proporzioni stanno sullo SCHERMO (non sulla scocca, altrimenti la
   cornice le falsa di qualche pixel e l'immagine esce). Combaciano con
   lo screenshot: app 640x1306, installazione 640x1387. */
.phone-screen{
  width:100%;aspect-ratio:var(--ar, 640/1306);border-radius:33px;overflow:hidden;position:relative;
  background:radial-gradient(120% 60% at 50% 0%, rgba(63,151,255,.20), transparent 60%), var(--bg);
}
.phone-screen>img{width:100%;height:100%;object-fit:cover;object-position:top center;position:relative;z-index:2}
.phone-screen>img.missing{display:none}

/* segnaposto: si vede finché non arriva lo screenshot vero */
.slot-ph{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:22px;
  border-radius:33px;
}
.slot-ph .ic{font-size:30px;opacity:.6}
.slot-ph .nm{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--accent-soft);
  background:rgba(63,151,255,.12);border:1px dashed rgba(126,194,255,.4);padding:6px 10px;border-radius:8px}
.slot-ph .ds{font-size:13px;color:var(--muted);line-height:1.45}



/* ============================================================
   COME FUNZIONA — quattro schede che scorrono di lato
   ============================================================ */
.stepcard{width:264px}
.stepcard .phone{max-width:264px;margin-bottom:16px}
.stepcard h3{font-size:19px;margin:10px 0 7px}
.stepcard p{font-size:14.5px;color:var(--muted);line-height:1.5}
.stepcard .tags{margin-top:12px}
.stepcard .tag{font-size:12px;padding:5px 10px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tag{
  font-size:13px;font-weight:600;color:var(--muted);
  border:1px solid var(--line);background:rgba(21,41,75,.45);
  padding:6px 12px;border-radius:999px;
}

/* ============================================================
   COSA C'È DENTRO — griglia
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(31,58,108,.34),rgba(13,26,47,.42));
  border:1px solid var(--line);border-radius:16px;padding:22px 20px 24px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.card::before{                        /* filo di colore in alto, uno per scheda */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--acc,var(--accent));opacity:.9;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 22px 40px -30px rgba(0,6,20,1)}
.card .ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:20px;margin-bottom:14px;background:var(--chip,rgba(63,151,255,.14));
}
.card h3{font-size:17px;margin-bottom:6px}
.card p{font-size:14.5px;color:var(--muted);line-height:1.5}

/* ============================================================
   CAROSELLO — un solo componente, usato in tre punti: le
   schermate dell'apertura, i quattro passi, l'installazione.
   Scorre col dito; puntini e frecce li aggiunge lo script, e
   senza JS resta comunque una fila che si scorre.
   ============================================================ */
.crsl{position:relative}
.crsl-track{
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:22px;
  padding:4px 22px 8px;margin:0 -22px;scrollbar-width:none;
}
.crsl-track::-webkit-scrollbar{display:none}
.crsl-item{flex:0 0 auto;scroll-snap-align:start}
.crsl-cap{margin-top:12px;text-align:center;font-size:13.5px;color:var(--muted);font-weight:600}
.crsl-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.crsl-nav button{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line-strong);
  background:rgba(150,185,240,.07);color:var(--text);font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .18s,opacity .18s;
}
.crsl-nav button:hover{background:rgba(150,185,240,.16)}
.crsl-nav button:disabled{opacity:.26;cursor:default}
.crsl-dots{display:flex;gap:7px;align-items:center}
.crsl-dots i{width:7px;height:7px;border-radius:99px;background:var(--line-strong);
  transition:width .25s,background .25s}
.crsl-dots i.on{width:22px;background:var(--accent)}
.swipe{font-size:13.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px}
@media (max-width:700px){.crsl-nav button{display:none}}

/* una schermata dentro il carosello */
.shot{width:230px}
.shot .phone{max-width:230px}

/* ============================================================
   INSTALLAZIONE — linguette + carosello
   ============================================================ */
/* Le linguette sono l'unico modo per scoprire che esiste anche il tutorial
   Android: se passano inosservate, meta' delle persone non lo trova. Quindi
   grandi, con l'icona del sistema, e quella NON scelta resta visibilmente
   un pulsante (bordo + colore acceso), non testo spento. */
.tabs-lab{
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--accent-soft);
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.tabs-lab::after{content:"↓";font-size:15px;opacity:.75}
.tabs{display:inline-flex;gap:6px;background:rgba(10,22,38,.6);border:1px solid var(--line-strong);border-radius:17px;padding:6px;margin-bottom:24px}
.tabs button{
  font-family:'Hanken Grotesk';font-weight:700;font-size:16.5px;color:var(--accent-soft);
  background:transparent;border:1.5px solid var(--line-strong);padding:13px 26px;border-radius:12px;cursor:pointer;transition:all .2s;
  display:inline-flex;align-items:center;gap:9px;
}
.tabs button:hover{border-color:var(--accent);color:var(--text)}
.tabs button[aria-selected="true"]{
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;border-color:transparent;
  box-shadow:0 12px 26px -12px rgba(63,151,255,.85);
}
.tabs .ic{font-size:18px;line-height:1}
@media (max-width:420px){
  .tabs{display:flex;width:100%}
  .tabs button{flex:1;justify-content:center;padding:13px 10px;font-size:15.5px}
}
.panel[hidden]{display:none}
.warn{
  display:flex;gap:13px;align-items:flex-start;
  background:rgba(255,194,61,.09);border:1px solid rgba(255,194,61,.28);
  border-radius:14px;padding:14px 16px;margin-bottom:24px;
}
.warn .ic{font-size:19px;line-height:1.3}
.warn p{font-size:15px;color:#f3e2be;line-height:1.5}
.warn b{color:var(--gold-soft)}
.istep{width:232px}
.istep .phone{max-width:232px;margin:0 auto 14px}
.istep .n,.stepcard .n{
  width:26px;height:26px;border-radius:8px;background:var(--accent);color:#fff;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
  display:grid;place-items:center;margin-bottom:9px;
}
.istep h3{font-size:16.5px;margin-bottom:5px}
.istep p{font-size:14px;color:var(--muted);line-height:1.5}
.istep code{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;background:rgba(63,151,255,.14);
  color:var(--accent-soft);padding:2px 7px;border-radius:6px;
}

/* ============================================================
   DOMANDE FREQUENTI
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-family:'Bricolage Grotesque';font-weight:700;font-size:18.5px;letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--accent);font-weight:400;
  transition:transform .25s;
}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 20px;color:var(--muted);font-size:16px;max-width:760px}
.faq .a p+p{margin-top:12px}
/* il grassetto è la risposta vera e propria: va sul colore pieno, altrimenti
   sparisce nel grigio del resto del paragrafo */
.faq .a b{color:var(--text);font-weight:700}

/* ============================================================
   CHIUSURA + PIÈ DI PAGINA
   ============================================================ */
.final{
  background:linear-gradient(160deg,rgba(63,151,255,.16),rgba(21,41,75,.35));
  border:1px solid var(--line-strong);border-radius:26px;
  padding:clamp(38px,5.6vw,66px) clamp(24px,4vw,52px);text-align:center;
}
.final h2{margin-bottom:16px}
.final .lead{margin:0 auto;max-width:520px}
.final .btn-row{justify-content:center}
footer{border-top:1px solid var(--line);padding:32px 0 40px;margin-top:clamp(40px,5.5vw,72px)}
.foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot small{color:var(--muted);font-size:13.5px}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:14px;color:var(--muted);font-weight:600}
.foot nav a{white-space:nowrap}   /* le voci vanno a capo INTERE, mai spezzate a meta' */
.foot nav a:hover{color:var(--text)}

/* ============================================================
   COMPARSA ALLO SCROLL — la classe la mette lo script.
   Senza JS (o con "riduci movimento") tutto resta visibile.
   ============================================================ */
/* ============================================================
   PREZZI
   Gerarchia: il TOTALE e' il prezzo, il costo a testa e' la
   rassicurazione. Se si invertono le dimensioni la gente crede
   di dover pagare in quindici, ed e' esattamente il malinteso
   da evitare.
   ============================================================ */
/* stretch, non start: le due schede devono finire alla stessa altezza anche
   quando una riga va a capo solo da una parte */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.plan{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(31,58,108,.34),rgba(13,26,47,.42));
  border:1px solid var(--line);border-radius:18px;padding:24px 22px 26px;
}
.plan::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--acc,var(--accent));opacity:.9}
.plan.pro{
  border-color:rgba(255,194,61,.34);
  background:linear-gradient(180deg,rgba(255,194,61,.10),rgba(13,26,47,.5));
  box-shadow:0 26px 60px -38px rgba(255,194,61,.6);
}
.plan .ptag{
  position:absolute;top:16px;right:16px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:rgba(255,194,61,.16);color:var(--gold);
}
.plan h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:19px;letter-spacing:-.025em;margin-bottom:4px}
.plan h3 .gd{color:var(--gold)}
.plan .psub{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.plan{display:flex;flex-direction:column}
.plan ul{flex:1 1 auto}
.plan .pcost{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1.1}
.plan.pro .pcost{color:var(--gold)}
.plan .pcost small{display:block;font-family:'Hanken Grotesk';font-weight:600;font-size:13px;color:var(--muted);margin-top:5px;letter-spacing:0;
  line-height:1.3;min-height:2.6em}   /* due righe riservate sempre: allinea le liste sotto */
/* il prezzo pieno barrato: piccolo, sopra, e MAI presentato come «prima era».
   E' il prezzo che partira' davvero dalla stagione successiva. */
/* Il barrato c'e' solo nel Pro: nel gratis resta la stessa riga, invisibile,
   cosi' i due prezzi (e le due liste sotto) partono dalla stessa altezza. */
.plan .pcost s{display:block;font-size:14px;color:var(--muted);text-decoration-thickness:1.5px;margin-bottom:2px}
.plan .pcost s.ghost{visibility:hidden}
.plan ul{list-style:none;margin:20px 0 0;display:grid;gap:10px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.plan li .tk{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;margin-top:2px;background:rgba(47,217,138,.16);color:var(--green)}
.plan.pro li .tk{background:rgba(255,194,61,.18);color:var(--gold)}
.plan li.off .tk{background:rgba(150,185,240,.10);color:var(--muted)}
.plan li.off{color:var(--muted)}

/* --- il calcolatore --- */
.calc{
  margin-top:16px;text-align:center;position:relative;overflow:hidden;
  border:1px solid rgba(255,194,61,.30);border-radius:22px;
  padding:clamp(58px,7.4vw,70px) 22px clamp(24px,3.4vw,34px);   /* l'occhiello deve stare SOTTO la fascetta */
  background:
    radial-gradient(90% 130% at 50% -20%, rgba(255,194,61,.18), transparent 62%),
    linear-gradient(180deg,rgba(31,58,108,.40),rgba(13,26,47,.55));
}
.calc .ceye{font-size:12.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap}   /* mai a capo: andando a capo finiva sotto la fascetta */
/* nel riquadro grande: barrato piccolo sopra, con scritto a cosa si riferisce,
   cosi' non lo si puo' leggere come uno sconto finto su un prezzo mai fatto */
/* Fascetta d'angolo: e' la cosa che dice «adesso conviene» prima ancora che
   si legga il numero. Il riquadro ha gia' overflow:hidden, quindi si taglia
   pulita sull'angolo. */
/* FASCETTA D'ANGOLO. Il riquadro ha overflow:hidden, quindi della fascia si
   vede solo il pezzo che attraversa l'angolo. Quel pezzo e' lungo
       L = 1,414 * (W/2 - R + T + H/2)
   e prima non bastava: W200 R52 T20 H28 dava 116px per un testo che ne chiede
   120, ed ecco perche' «PREZZO DI LANCIO» usciva tagliato. Con questi numeri
   sono 167px, cioe' 45 di margine. Se un giorno si allunga il testo o si
   ingrandisce il carattere, rifare il conto invece di provare a occhio. */
.calc .cribbon{
  position:absolute;top:34px;right:-52px;transform:rotate(45deg);
  width:240px;text-align:center;padding:10px 0;line-height:1.15;
  font-size:12.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  white-space:nowrap;
  color:#2a1c00;background:linear-gradient(135deg,#ffe6a8,var(--gold));
  box-shadow:0 10px 26px -10px rgba(255,194,61,.95), inset 0 -1px 0 rgba(0,0,0,.10);
}
@media(max-width:420px){
  /* piu' stretta e piu' piccola, ma il conto torna lo stesso: 144px per ~108 */
  .calc .cribbon{top:30px;right:-46px;width:210px;padding:8px 0;
    font-size:10.5px;letter-spacing:.07em}
}
/* Il barrato: piu' grosso di prima e con la riga ROSSA, che si vede da lontano.
   L'etichetta accanto dice «dalla prossima stagione», al futuro: cosi' non lo
   si puo' leggere come uno sconto su un prezzo mai praticato. */
.calc .cwas{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.calc .cwas s{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(24px,4.6vw,30px);
  color:#8ea6c8;letter-spacing:-.02em;
  text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px}
.calc .cwas i{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-soft);background:rgba(255,194,61,.14);
  border:1px solid rgba(255,194,61,.30);border-radius:999px;padding:5px 11px}
.calc .cbig{
  font-family:'Bricolage Grotesque';font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(62px,13vw,98px);margin:6px 0 8px;
  /* la luce che attraversa il numero: e' una banda chiara dentro il gradiente,
     spostata dall'animazione. Niente immagini, niente sovrapposizioni. */
  background:linear-gradient(100deg,var(--gold) 0%,#ffe6a8 38%,#fffdf5 47%,#ffe6a8 56%,var(--gold) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:cshine 5.5s linear infinite;
}
@keyframes cshine{0%{background-position:220% 0}100%{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){.calc .cbig{animation:none;background-position:50% 0}}
.calc .cwhat{font-size:clamp(16px,2vw,19px);font-weight:700}
.calc .cwhen{color:var(--muted);font-size:14px;margin-top:6px}
.calc .cwhen b{color:#cfe0f7;font-weight:700}
.calc .csep{height:1px;margin:26px auto 22px;max-width:420px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.calc .cq{font-size:15.5px;font-weight:600;margin-bottom:14px}
.calc .cq b{font-family:'JetBrains Mono',monospace;color:var(--accent-soft);font-size:18px}
.calc input[type=range]{
  -webkit-appearance:none;appearance:none;width:min(420px,100%);height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--gold));outline:none;margin:0 0 6px;
}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);cursor:pointer;
  box-shadow:0 6px 18px -6px rgba(0,6,20,.9);
}
.calc input[type=range]::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--accent);
  cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,6,20,.9);
}
.calc .cscale{display:flex;justify-content:space-between;max-width:min(420px,100%);
  margin:0 auto 20px;font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace}
/* Il «a testa» e' la cosa che convince: va vista da lontano. Resta comunque
   piu' piccolo del totale (98px contro 46) perche' la gerarchia non deve
   ribaltarsi: il prezzo e' quello della lega, non della persona. */
.calc .chead{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(47,217,138,.13);border:1px solid rgba(47,217,138,.36);
  border-radius:20px;padding:14px 28px;
  box-shadow:0 18px 44px -26px rgba(47,217,138,.9);
}
.calc .chead b{font-family:'Bricolage Grotesque';font-size:clamp(34px,7.4vw,46px);
  font-weight:800;color:var(--green);letter-spacing:-.035em;line-height:1.05}
.calc .chead span{font-size:14px;font-weight:700;color:#bff0da;letter-spacing:.01em}
.calc .cflags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:16px}
.calc .cflag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  color:var(--muted);background:rgba(150,185,240,.06);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;white-space:nowrap}
.calc .cflag b{color:var(--green);font-size:11px}
/* pulsante Pro: oro pieno, largo, e' l'azione della sezione */
.btn-gold{
  background:linear-gradient(135deg,#ffd470,var(--gold));color:#2a1c00;border-color:transparent;
  box-shadow:0 16px 36px -16px rgba(255,194,61,.95), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover{box-shadow:0 20px 44px -14px rgba(255,194,61,1), inset 0 1px 0 rgba(255,255,255,.45)}
.calc #proBtn{margin-top:22px;min-width:min(300px,100%);justify-content:center;font-size:16px;padding:15px 26px}
.calc .csoon{
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease, opacity .3s ease, margin .3s ease;
  color:var(--gold-soft);font-size:13.5px;line-height:1.55;margin:0 auto;max-width:380px;
}
.calc .csoon.on{max-height:80px;opacity:1;margin-top:11px}
.calc .cnote{color:var(--muted);font-size:13px;margin-top:14px;max-width:440px;margin-left:auto;margin-right:auto;line-height:1.55}
.calc .cnote b{color:var(--text)}

/* Affiancate SEMPRE, anche sul telefono: due colonne si confrontano con lo
   sguardo, una sopra l'altra bisogna ricordarsela. Sotto i 420px si stringe
   tutto invece di impilare. */
@media(max-width:760px){
  .plan{padding:17px 14px 19px}
  .plan h3{font-size:16.5px}
  .plan .pcost{font-size:23px}
  .plan li{font-size:13px;gap:8px}
}
@media(max-width:420px){
  .plans{gap:9px}
  .plan{padding:14px 11px 16px;border-radius:15px}
  .plan h3{font-size:14.5px;letter-spacing:-.03em}
  .plan .psub{display:none}
  .plan .pcost{font-size:20px}
  .plan .pcost s{font-size:12.5px}
  .plan .pcost small{font-size:11px}
  .plan ul{gap:8px;margin-top:15px}
  .plan li{font-size:12px;gap:6px;line-height:1.4}
  .plan li .tk{width:15px;height:15px;font-size:9px;margin-top:1px}
}

/* ---------- avviso «prima installala» ---------- */
.instbox{
  position:fixed;z-index:70;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);
  width:calc(100% - 40px);max-width:400px;text-align:center;
  background:var(--bg2);border:1px solid var(--line-strong);border-radius:22px;
  padding:26px 22px 22px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .24s, transform .24s cubic-bezier(.2,.8,.2,1);
}
.instbox.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.instbox .ic{font-size:42px;line-height:1;display:block;margin-bottom:10px}
.instbox h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:21px;letter-spacing:-.025em;margin-bottom:9px}
.instbox p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:18px}
.instbox p b{color:var(--text)}
.instbox .btn{width:100%;justify-content:center}
.instbox .btn-ghost{margin-top:10px}

/* le prime 20 leghe: sta sotto al riquadro del prezzo, e deve sembrare un
   premio, non una nota a pie' di pagina */
.pfound{
  margin-top:14px;display:flex;gap:14px;align-items:center;
  border:1px solid rgba(255,194,61,.30);border-radius:16px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(255,194,61,.10),rgba(13,26,47,.35));
  font-size:14.5px;line-height:1.55;color:#e6d9bd;
}
.pfound .ic{font-size:26px;line-height:1;flex:none}
.pfound b{color:var(--gold-soft);font-weight:800}
@media(max-width:420px){ .pfound{font-size:13.5px;padding:14px 15px;gap:11px} }

.rise{opacity:0;transform:translateY(22px)}
.rise.seen{opacity:1;transform:none;transition:opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}}

/* ============================================================
   PAGINA REGOLAMENTO
   ============================================================ */
.doc{max-width:780px;margin:0 auto}
.doc h2{margin:clamp(38px,5vw,58px) 0 18px;font-size:clamp(25px,3.6vw,34px)}
.doc h3{margin:30px 0 12px;color:var(--accent-soft)}
.doc p{margin-bottom:15px}
.doc ul{margin:0 0 18px 20px;color:#d3e0f4}
.doc li{margin-bottom:9px}
.doc li b{color:var(--text)}
.formula{
  background:rgba(10,22,38,.6);border:1px solid var(--line-strong);border-radius:14px;
  padding:20px 22px;margin:20px 0;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1.9;color:var(--accent-soft);
}
.formula b{color:var(--gold)}
table{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:15.5px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
td:last-child,th:last-child{text-align:right;white-space:nowrap}
/* Tabelle DISCORSIVE (privacy, termini): l'ultima colonna e' testo, non un
   numero. Qui il nowrap va tolto o la tabella esce dallo schermo. */
.tbl{table-layout:fixed}
.tbl td,.tbl th{text-align:left;vertical-align:top;overflow-wrap:anywhere}
.tbl td:last-child,.tbl th:last-child{text-align:left;white-space:normal}
.doc{overflow-x:hidden}   /* rete di sicurezza: niente scorrimento laterale */
.note{
  background:rgba(63,151,255,.08);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;padding:15px 18px;margin:22px 0;font-size:15.5px;color:#cfdff5;
}
.crumb{font-size:14px;color:var(--muted);font-weight:600;margin-bottom:20px;display:inline-block}
.crumb:hover{color:var(--text)}


/* ============================================================
   IL CERCHIO ROSSO SULLE ISTRUZIONI
   Sta sopra lo screenshot e indica cosa toccare. Posizione e
   misura arrivano dall'HTML in percentuale (--x, --y, --w, --h),
   perché dipendono da dove cade il pulsante in quella foto.
   ============================================================ */
.hot{
  position:absolute;z-index:3;pointer-events:none;
  left:var(--x);top:var(--y);width:var(--w,13%);height:var(--h,6%);
  transform:translate(-50%,-50%);
  border:3px solid #ff3b4e;border-radius:999px;
  box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 16px rgba(255,59,78,.5);
  animation:hotPulse 2s ease-out infinite;
}
@keyframes hotPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 0 0 rgba(255,59,78,.5)}
  60%{box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 0 9px rgba(255,59,78,0)}
}
/* il puntatore, appoggiato in basso a destra del cerchio */
.hot::after{
  content:"";position:absolute;right:-14px;bottom:-18px;width:26px;height:26px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 2.2l13 8.6-6.1 1.4 2.6 6.9-3 1.1-2.6-6.9-3.9 4.4z' fill='%23fff' stroke='%23101820' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));
  animation:hotTap 2s ease-out infinite;
}
@keyframes hotTap{0%,100%{transform:none}60%{transform:translate(-3px,-3px)}}
@media (prefers-reduced-motion:reduce){
  .hot,.hot::after{animation:none}
}

/* ============================================================
   PUNTEGGI — la tabellina, senza fronzoli
   ============================================================ */
/* una riga per riquadro: emoji, etichetta e valore sempre sulla stessa
   linea. Sotto i 560px si passa a colonna unica, perché in due colonne
   «Porta inviolata» non ci sta e andrebbe a capo. */
.ptgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:9px}
@media (max-width:560px){.ptgrid{grid-template-columns:1fr}}
.prow{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-height:54px;
  background:rgba(10,22,38,.5);border:1px solid var(--line);border-radius:13px;padding:9px 12px;
}
.prow .e{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:15px;background:rgba(150,185,240,.07)}
.prow .l{flex:1;min-width:0;font-size:14.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.prow .pt{flex:0 0 auto}

/* ============================================================
   MENU — le tre righe e la tendina laterale
   Sotto i 1120px le voci in alto sparirebbero comunque per
   mancanza di spazio: al loro posto il pulsante apre un
   pannello da destra con le stesse sezioni. La classe .on la
   mette lo script, seguendo lo scroll, su entrambi i menu.
   ============================================================ */
.burger{
  display:none;width:42px;height:42px;flex-direction:column;gap:4px;
  align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:12px;background:rgba(150,185,240,.07);
}
.burger i{width:18px;height:2px;background:var(--text);border-radius:2px}
@media (max-width:1120px){.burger{display:flex}}

.scrim{
  position:fixed;inset:0;z-index:60;background:rgba(4,10,20,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(310px,84vw);
  background:#0d1c31;border-left:1px solid var(--line-strong);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.9);
  transform:translateX(101%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));
}
.drawer.open{transform:none}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.drawer .dh span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.drawer .x{
  width:36px;height:36px;border-radius:10px;cursor:pointer;color:var(--text);font-size:17px;
  border:1px solid var(--line-strong);background:rgba(150,185,240,.07);
}
.drawer a{
  display:block;padding:13px 13px;border-radius:12px;font-weight:700;font-size:16px;
  color:var(--muted);border:1px solid transparent;
}
.drawer a.on{color:var(--text);background:rgba(63,151,255,.14);border-color:rgba(63,151,255,.4)}
.drawer .btn{margin-top:16px;justify-content:center}
/* «Gioca ora» nella tendina: .drawer a (0,1,1) batte .btn-primary (0,1,0),
   quindi senza queste righe la scritta restava grigio-muted sul fondo blu e
   da telefono spariva. Colore pieno + un po' di alone per staccarlo. */
.drawer a.btn-primary{
  color:#fff;font-size:17px;padding:15px 24px;
  border-color:rgba(126,194,255,.5);
  box-shadow:0 16px 34px -14px rgba(63,151,255,1), inset 0 1px 0 rgba(255,255,255,.28);
}
.drawer a.btn-primary:hover,.drawer a.btn-primary:focus-visible{color:#fff}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}

/* intestazione con il suggerimento a destra */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;max-width:none}

/* le ancore non devono finire sotto la barra in alto */
section[id], div[id]{scroll-margin-top:88px}