/* ==================================================================
   NeuroFlow Engine — sistema di stile
   Navy profondo, accenti indigo e teal, card con bordo sfumato.
   Condiviso fra la pagina pubblica (index.html) e l'app (app.html).
   ================================================================== */

:root{
  --sfondo:      #0d0d2d;
  --sfondo-2:    #090a14;
  --scuro-800:   #0f0e1f;
  --scuro-700:   #14142b;
  --scuro-600:   #1a1a38;
  --scuro-500:   #232244;
  --scuro-400:   #2e2d55;

  --primario:    #4f46e5;
  --primario-2:  #818cf8;
  --primario-3:  #c7d2fe;
  --teal:        #2dd4bf;
  --teal-scuro:  #14b8a6;
  --verde:       #34d399;
  --rosso:       #f87171;
  --giallo:      #fbbf24;

  --testo:       #ffffff;
  --testo-2:     #b4b8d4;
  --testo-3:     #7c81a8;

  --bordo:       rgba(255,255,255,.10);
  --bordo-2:     rgba(255,255,255,.06);

  --font:        'Inter', system-ui, -apple-system, sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, monospace;

  --r-card:      20px;
  --r-med:       12px;
  --r-pic:       8px;
  --ease:        cubic-bezier(.16,.8,.24,1);
  --larghezza:   1280px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; background:var(--sfondo-2); overscroll-behavior-y:none; overflow-x:hidden; }

body{
  background:linear-gradient(to bottom, var(--sfondo), var(--sfondo-2));
  background-attachment:fixed;
  color:var(--testo);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.su{ color:var(--verde); }
.giu{ color:var(--rosso); }

/* ---------- impaginato ---------- */
.contenitore{ max-width:var(--larghezza); margin:0 auto; padding:0 20px; }
.sezione{ padding:80px 0; }

/* Texture a griglia sottile per la hero — solo estetica, nessuna dipendenza */
.sfondo-griglia{
  background-size:36px 36px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
}
@media(min-width:768px){ .sezione{ padding:120px 0; } .contenitore{ padding:0 32px; } }

h1,h2,h3,h4{ font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.h-hero{ font-size:clamp(34px,6vw,68px); }
.h-sez{ font-size:clamp(26px,4vw,40px); }
.h-card{ font-size:clamp(19px,2.4vw,28px); }
.guida{ font-size:clamp(16px,2vw,19px); font-weight:300; color:var(--testo); }
.sotto{ color:var(--testo-2); font-size:15px; }
.minuscolo{ font-size:12px; color:var(--testo-3); }

/* Parole chiave evidenziate dentro ai paragrafi di testo, in tutto il
   sito: stessa retroilluminazione neon già usata sul titolo iniziale
   ("MetaTrader 5" nell'hero), non solo il colore piatto. */
.chiave{
  color:var(--teal); font-weight:600;
  text-shadow:
    0 0 10px rgba(45,212,191,.85),
    0 0 24px rgba(45,212,191,.6),
    0 0 48px rgba(45,212,191,.4);
}

.occhiello{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal);
}

/* Testo con gradiente animato: firma visiva del marchio */
.grad-anim{
  display:inline-block; color:transparent;
  background-image:linear-gradient(to right,#c7d2fe,#2dd4bf,#818cf8,#2dd4bf,#c7d2fe);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:scorriGrad 5s linear infinite;
}
@keyframes scorriGrad{ to{ background-position:300% 0; } }

/* ---------- particelle di sfondo ---------- */
.strato-particelle{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}

/* Sfondo a piena larghezza per la vista "Home": esce dai margini del
   contenitore con il classico trucco 100vw, e cambia immagine
   (verticale/orizzontale) in base alla larghezza dello schermo.
   background-position ancorato in basso: le confezioni stanno nella metà
   inferiore dell'immagine, così restano sempre intere invece di essere
   tagliate; a essere ritagliata (in alto) è solo la parte vuota.
   Il gradiente lineare è volutamente leggero (più luce sull'immagine);
   il gradiente radiale scurisce un po' solo il centro, dove sta il
   testo, per leggibilità, senza appesantire il resto della foto. */
.vista-home{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  background-image:
    linear-gradient(180deg, rgba(10,10,26,.72) 0%, rgba(10,10,26,.5) 32%, rgba(10,10,26,.88) 100%),
    url('../assets/sfondo/home-mobile.jpg');
  background-size:cover;
  background-position:center 100%;
  background-repeat:no-repeat;
}
@media(min-width:900px){
  .vista-home{
    background-image:
      linear-gradient(180deg, rgba(10,10,26,.68) 0%, rgba(10,10,26,.45) 32%, rgba(10,10,26,.88) 100%),
      url('../assets/sfondo/home-pc.jpg');
  }
}

/* Titolo + CTA centrati sopra lo sfondo, a riempire tutta l'altezza
   disponibile sotto la testata. */
.vista-home__contenuto{
  position:relative;
  min-height:calc(100vh - 100px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,3.5vh,32px); text-align:center; padding:clamp(16px,4vh,40px) 24px;
}
.vista-home__logo{
  width:clamp(40px,9vh,64px); height:auto; opacity:.92;
  filter:drop-shadow(0 0 16px rgba(45,212,191,.5));
}
.vista-home__titolo{
  max-width:760px;
  font-size:clamp(28px,4.6vw,52px); font-weight:700; line-height:1.15; letter-spacing:-.01em;
  color:#fff; text-shadow:0 4px 26px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.55);
}
/* margin-top:auto sui pulsanti: assorbe tutto lo spazio libero sopra di
   loro, così restano ancorati in basso invece che appena sotto al titolo
   — dove coprivano le scatole dei prodotti nell'immagine di sfondo. Logo
   e titolo restano raggruppati sopra, il gap fisso tra loro non cambia. */
.vista-home__azioni{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:auto; padding-top:clamp(12px,3.5vh,48px); }
@media(max-width:520px){
  .vista-home__azioni{ flex-direction:column; align-items:center; width:100%; }
  .vista-home__azioni .btn{ white-space:normal; text-align:center; width:100%; max-width:340px; padding:clamp(10px,2.4vh,15px) 30px; }
}
/* Stesso problema, stessa cura: il testo lungo del pulsante "Scarica ora
   la licenza..." sotto la card trasparenza andava fuori dallo schermo su
   mobile (nascosto da overflow-x:hidden su html, invisibile invece di
   andare a capo). */
@media(max-width:520px){
  .riga-cta-trasparenza{ flex-direction:column; align-items:stretch; width:100%; }
  .riga-cta-trasparenza .btn{ white-space:normal; text-align:center; width:100%; }
  .riga-cta-trasparenza .link-testo{ text-align:center; width:100%; }
}
/* Parola "NeuroBot" in evidenza con retroilluminazione neon (coerente con
   lo stile delle scatole nell'immagine di sfondo). */
.vista-home__titolo .chiave{
  color:var(--teal);
  text-shadow:
    0 0 10px rgba(45,212,191,.95),
    0 0 26px rgba(45,212,191,.75),
    0 0 54px rgba(45,212,191,.5),
    0 4px 26px rgba(0,0,0,.7);
}
.vista-home__sottotitolo{
  max-width:680px; margin-top:-16px;
  font-size:clamp(20px,3.4vw,30px); font-weight:600; color:#fff;
  text-shadow:0 4px 26px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.55);
}
.alone{
  position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none;
}
/* Gli aloni hanno dimensioni fisse in px pensate per schermi larghi: su
   mobile, con offset negativi/percentuali, sporgono oltre la larghezza
   dello schermo e causano lo scorrimento orizzontale indesiderato della
   pagina. Li limitiamo qui, indipendentemente dalla dimensione inline. */
@media(max-width:640px){
  .alone{ width:min(240px,60vw) !important; height:min(240px,60vw) !important; }
}

/* Riquadro "trasparenza": su mobile via il contorno/sfondo della card
   (resta solo il contenuto), titolo centrato e più grande, logo Myfxbook
   più piccolo e spostato a destra sotto al titolo, carosello a piena
   larghezza (esce dai margini) e retroilluminazione dietro all'immagine
   sempre visibile (qui e su desktop — non va mai tolta). */
@media(max-width:640px){
  #cardTrasparenza{ background:none; padding:0; }
  /* overflow:visible: senza questo, il contenitore tagliava i bordi
     dell'immagine a piena larghezza qui sotto (il "carosello a piena
     larghezza" restava comunque chiuso dentro il riquadro della card,
     che le rifilava ~20px per lato — ecco perché sparivano lettere
     proprio all'inizio delle righe di testo dell'immagine). Su mobile
     non serve più clippare nulla: sfondo e angoli arrotondati sono
     già stati tolti qui sopra. */
  #cardTrasparenza .card__interno{ background:none; border-radius:0; overflow:visible; }
  #cardTrasparenza .card__interno::before{ background:none; }
  #cardTrasparenza .riga-trasparenza{ flex-direction:column; align-items:center; text-align:center; }
  #cardTrasparenza #titoloAggregato{ text-align:center; font-size:26px; }
  #cardTrasparenza .logo-myfxbook{ align-self:flex-end; }
  #cardTrasparenza .logo-myfxbook img{ height:44px !important; }
  #cardTrasparenza #grafAggregato{ width:100vw; margin-left:calc(50% - 50vw); border-radius:0; }
}

/* ---------- card con bordo sfumato ---------- */
.card{
  position:relative; border-radius:var(--r-card); padding:1px;
  background:linear-gradient(to bottom, var(--scuro-400), rgba(46,45,85,0));
}
.card__interno{
  position:relative; height:100%; border-radius:calc(var(--r-card) - 1px);
  background:var(--scuro-700); overflow:hidden;
}
.card__interno::before{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(ellipse 60% 300px at 50% 0, rgba(255,255,255,.07), transparent 110%);
}
.card__corpo{ position:relative; z-index:1; padding:24px; }
@media(min-width:1024px){ .card__corpo{ padding:36px; } }

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-size:14px; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primario{
  background:linear-gradient(135deg, var(--primario), #6366f1);
  color:#fff; box-shadow:0 0 20px rgba(79,70,229,.6), 0 0 46px rgba(79,70,229,.35), 0 4px 24px rgba(79,70,229,.35);
}
.btn--primario:hover{ box-shadow:0 0 26px rgba(79,70,229,.75), 0 0 60px rgba(79,70,229,.45), 0 8px 34px rgba(79,70,229,.5); }
.btn--teal{
  background:rgba(129,140,248,.1); color:var(--primario-2); border:1px solid var(--primario-2);
  box-shadow:0 0 18px rgba(79,70,229,.5), 0 0 44px rgba(79,70,229,.26), inset 0 0 14px rgba(79,70,229,.18);
}
.btn--teal:hover{ background:rgba(129,140,248,.16); box-shadow:0 0 24px rgba(79,70,229,.65), 0 0 58px rgba(79,70,229,.35), inset 0 0 18px rgba(79,70,229,.24); }
.btn--contorno{
  border-color:rgba(255,255,255,.35); color:var(--testo); background:rgba(255,255,255,.03);
  box-shadow:0 0 10px rgba(255,255,255,.12), inset 0 0 10px rgba(255,255,255,.05);
}
.btn--contorno:hover{
  border-color:var(--primario-2); color:var(--primario-2);
  box-shadow:0 0 16px rgba(129,140,248,.4), inset 0 0 12px rgba(129,140,248,.12);
}
.btn--fantasma{ color:var(--testo-2); }
.btn--fantasma:hover{ color:var(--testo); background:rgba(255,255,255,.05); box-shadow:0 0 12px rgba(255,255,255,.15); }
.btn--bianco{
  background:#fff; color:#0d0d2d;
  box-shadow:0 0 14px rgba(255,255,255,.25), 0 4px 20px rgba(0,0,0,.25);
}
.btn--bianco:hover{ background:#f1f1f5; box-shadow:0 0 20px rgba(255,255,255,.35), 0 6px 24px rgba(0,0,0,.3); }
/* Retroilluminazione per il pulsante trasparente: solo un bagliore
   esterno (box-shadow), niente riempimento — altrimenti il centro non
   resterebbe trasparente come richiesto. */
.btn--trasparente--glow{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px) saturate(115%);
  -webkit-backdrop-filter:blur(6px) saturate(115%);
  box-shadow:
    0 0 22px rgba(45,212,191,.4), 0 0 46px rgba(129,140,248,.3),
    inset 0 0 10px rgba(255,255,255,.06);
}
.btn--trasparente--glow:hover{
  box-shadow:
    0 0 30px rgba(45,212,191,.55), 0 0 60px rgba(129,140,248,.4),
    inset 0 0 14px rgba(255,255,255,.1);
}
.btn--trasparente{
  background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.1), inset 0 0 8px rgba(255,255,255,.04);
}
.btn--trasparente:hover{
  border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.05);
  box-shadow:0 0 16px rgba(255,255,255,.2), inset 0 0 12px rgba(255,255,255,.08);
}
/* Pulsante "Verifica su Myfxbook": bagliore blu (indaco, lo stesso
   registro cromatico del resto del sito — var(--primario)), non più
   ambra. */
.btn--myfxbook{
  background:rgba(255,255,255,.04); border:1px solid rgba(79,70,229,.5); color:#fff;
  box-shadow:0 0 22px rgba(79,70,229,.5), 0 0 46px rgba(79,70,229,.3), inset 0 0 10px rgba(255,255,255,.05);
}
.btn--myfxbook:hover{
  border-color:rgba(79,70,229,.8);
  box-shadow:0 0 30px rgba(79,70,229,.65), 0 0 60px rgba(79,70,229,.4), inset 0 0 14px rgba(255,255,255,.08);
}
.btn--g{ padding:15px 30px; font-size:16px; }
.btn--p{ padding:8px 15px; font-size:13px; }
.btn--pieno{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

/* Cornice animata attorno al pulsante principale */
.btn-alone{ position:relative; display:inline-block; }
.btn-alone::before{
  content:''; position:absolute; inset:-3px; border-radius:999px; z-index:0;
  background:conic-gradient(from var(--giro,0deg), transparent, var(--teal) 12%, var(--primario-2) 24%, transparent 36%);
  animation:giroCornice 4s linear infinite; opacity:.85; filter:blur(3px);
}
.btn-alone .btn{ position:relative; z-index:1; }
@keyframes giroCornice{ to{ --giro:360deg; } }
@property --giro{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ---------- barra superiore ---------- */
.promo{
  display:block; background:linear-gradient(to right,#0d9488,#0891b2,#4f46e5);
  text-align:center; padding:11px 20px; font-size:14px; font-weight:600;
  transition:filter .25s;
}
.promo:hover{ filter:brightness(1.12); }
.promo .pill{
  background:var(--scuro-800); color:#fff; font-size:12px;
  padding:2px 9px; border-radius:999px; margin-left:8px;
}

.testata{ position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:rgba(13,13,45,.72); border-bottom:1px solid var(--bordo-2);
  padding-top:env(safe-area-inset-top); }
.testata__riga{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.logo{ height:38px; width:auto; filter:brightness(0) invert(1); }
@media(max-width:520px){ .logo{ height:24px; } }

.marchio{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.marchio__icona{ height:32px; width:auto; filter:brightness(0) invert(1); }
.marchio__testo{ font-family:var(--font); font-weight:700; font-size:19px; letter-spacing:-.02em; color:#fff; }
@media(max-width:520px){
  .marchio__icona{ height:24px; }
  .marchio__testo{ font-size:16px; }
}
.menu{ display:none; gap:28px; }
@media(min-width:900px){ .menu{ display:flex; } }
.menu a{ font-size:14px; color:var(--testo-2); transition:color .2s; }
.menu a:hover{ color:var(--testo); }
.azioni-testata{ display:flex; align-items:center; gap:10px; }
.azioni-desktop{ display:none; align-items:center; gap:10px; }
@media(min-width:900px){ .azioni-desktop{ display:flex; } }
.apri-menu{ display:flex; padding:8px; border-radius:var(--r-pic); }
@media(min-width:900px){ .apri-menu{ display:none; } }
@media(min-width:900px){ .video-hero{ max-width:960px; } }

.pannello-menu{
  position:fixed; inset:0 0 0 auto; width:290px; max-width:85vw; z-index:80;
  background:linear-gradient(180deg,#1a1836,#0f0e1f); border-left:1px solid var(--bordo);
  transform:translateX(100%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column; padding:24px;
  padding-top:calc(24px + env(safe-area-inset-top));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.pannello-menu.aperto{ transform:translateX(0); }
.pannello-menu a{ padding:16px 0; border-bottom:1px solid var(--bordo-2); font-size:17px; }
.velo{ position:fixed; inset:0; z-index:70; background:rgba(9,10,20,.7); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .3s; }
.velo.aperto{ opacity:1; pointer-events:auto; }

/* ---------- elenchi con spunta ---------- */
.spunte{ display:flex; flex-direction:column; gap:12px; }
.spunte li{ position:relative; padding-left:34px; font-weight:300; }
.spunte svg{ width:22px; height:22px; position:absolute; left:0; top:2px; color:var(--teal); }

/* ---------- griglie ---------- */
.griglia-2{ display:grid; gap:32px; }
@media(min-width:1024px){ .griglia-2{ grid-template-columns:1fr 1fr; gap:48px; } }
.griglia-fun{ display:grid; gap:28px; }
@media(min-width:768px){ .griglia-fun{ grid-template-columns:1fr 1fr; gap:40px; } }

.funz{ display:flex; gap:20px; align-items:flex-start; }
.funz__icona{
  width:64px; height:64px; flex:none; border-radius:var(--r-med);
  background:var(--scuro-600); display:flex; align-items:center; justify-content:center;
}
.funz__icona svg{ width:30px; height:30px; color:var(--primario-2); }
.funz h3{ font-size:19px; margin-bottom:4px; }
.funz p{ font-size:14px; color:var(--testo-2); }

/* ---------- metriche ---------- */
.metriche{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.metrica{ background:var(--scuro-700); border:1px solid var(--bordo-2); border-radius:var(--r-med); padding:16px; }
.metrica__et{ font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--testo-3); }
.metrica__val{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:600; margin-top:5px; letter-spacing:-.02em; }
.metrica__nota{ font-size:12px; color:var(--testo-3); margin-top:3px; }

/* ---------- badge ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; border:1px solid var(--bordo); color:var(--testo-3);
}
.badge--demo{ border-color:rgba(251,191,36,.5); color:var(--giallo); background:rgba(251,191,36,.08); }
.badge--reale{ border-color:rgba(52,211,153,.5); color:var(--verde); background:rgba(52,211,153,.08); }
.badge--attivo{ border-color:rgba(52,211,153,.5); color:var(--verde); }
.badge--fermo{ border-color:rgba(248,113,113,.5); color:var(--rosso); }
.badge--nuovo{ border:none; padding:0; color:transparent; }

/* ---------- CTA di collegamento rapido sulle schede ---------- */
.cta-collega{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-pic);
  background:rgba(45,212,191,.08); border:1px solid rgba(45,212,191,.35);
  font-size:12.5px; font-weight:600; color:var(--teal);
}
.cta-collega button{ flex:none; }
.cta-collega--fatto{
  background:rgba(255,255,255,.03); border-color:var(--bordo-2); color:var(--testo-3); font-weight:500;
}

/* ---------- scala dei livelli ---------- */
.scala{ display:flex; flex-direction:column; gap:10px; }
.livello{
  display:grid; grid-template-columns:40px 1fr 150px auto auto; align-items:center; gap:20px;
  width:100%; text-align:left; padding:18px 22px; border-radius:var(--r-med);
  border:1px solid var(--bordo-2); cursor:pointer;
  background:linear-gradient(90deg, rgba(79,70,229, calc(.05 + var(--p) * .16)), rgba(255,255,255,.015));
  transition:transform .28s var(--ease), border-color .28s, box-shadow .28s;
}
.livello__video{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(45,212,191,.10); border:1px solid rgba(45,212,191,.4); color:var(--teal);
  transition:background .2s, transform .2s;
}
.livello__video:hover{ background:rgba(45,212,191,.22); transform:scale(1.08); }
.livello:hover{
  transform:translateX(5px); border-color:var(--teal);
  box-shadow:0 8px 32px rgba(79,70,229, calc(.12 + var(--p) * .24));
}
.livello__nome{ display:block; font-size:19px; font-weight:700; }
.livello__desc{ display:block; font-size:13px; color:var(--testo-2); margin-top:2px; }
.livello__cifre{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:104px; }
.livello__rend{ font-family:var(--mono); font-size:19px; font-weight:600; color:var(--verde); }
.livello__dd{ font-family:var(--mono); font-size:12px; color:var(--testo-3); }

.tacche{ display:flex; gap:4px; align-items:center; }
.tacca{ width:7px; height:20px; border-radius:2px; background:rgba(255,255,255,.07); }
.tacca.on{
  background:linear-gradient(180deg, var(--teal), var(--primario));
  box-shadow:0 0 10px rgba(45,212,191, calc(.2 + var(--p) * .4));
}

@media(max-width:900px){
  .livello{ grid-template-columns:32px 1fr; gap:12px; padding:16px 16px; }
  .livello__graf{ grid-column:2; margin-top:10px; }
  .livello__cifre{ grid-column:2; flex-direction:row; align-items:center; gap:12px; margin-top:8px; }
  .livello__video{ grid-column:2; justify-self:start; margin-top:8px; }
  .funz__icona{ width:52px; height:52px; }
}

/* ---------- griglia risultati: 4 prodotti fissi, mai una scheda orfana ---------- */
.griglia-prodotti{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.griglia-prodotti > *{ flex:1 1 260px; max-width:340px; }
@media(max-width:639px){ .griglia-prodotti > *{ flex-basis:100%; max-width:none; } }

/* ---------- grafico equity ---------- */
.graf{ position:relative; width:100%; }
.graf svg{ display:block; width:100%; height:100%; }
.graf--riga{ height:44px; }
.graf--grande{ aspect-ratio:16/9; height:auto; overflow:hidden; } /* rapporto reale del video 1280x714 — se torni all'immagine, valuta se serve ricalibrarlo */

/* immagine vera del widget myfxbook dentro .graf--grande: object-fit:contain
   mostra sempre il grafico intero (mai tagliato); qui il riquadro ha sfondo
   chiaro perché il widget stesso lo è — non è un refuso rispetto al resto
   del sito scuro, è voluto per restare fedele all'originale myfxbook */
.graf__widget-link{ display:block; width:100%; height:100%; background:#fff; border-radius:inherit; }
.graf__widget-img{ display:block; width:100%; height:100%; object-fit:contain; }

/* carosello di screenshot reali (myfxbook), crossfade automatico */
.carosello-performance{ position:relative; display:block; width:100%; height:100%; border-radius:inherit; overflow:hidden; background:#000; }
.carosello-performance__slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease;
}
.carosello-performance__slide.attiva{ opacity:1; }

/* ---------- anteprima video (facciata cliccabile, iframe solo al click) ---------- */
.video-anteprima{ position:relative; width:100%; aspect-ratio:16/9; min-height:200px; background:#000; cursor:pointer; }
.video-anteprima--statico{ cursor:default; }
.video-anteprima__miniatura{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-anteprima__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(9,10,20,.28); transition:background .2s;
}
.video-anteprima:hover .video-anteprima__play{ background:rgba(9,10,20,.12); }
.video-anteprima__cerchio{
  width:68px; height:68px; border-radius:50%;
  background:rgba(13,13,45,.75); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s;
}
.video-anteprima:hover .video-anteprima__cerchio{ transform:scale(1.08); }
.video-anteprima__cerchio svg{ width:24px; height:24px; margin-left:3px; fill:#fff; }
.video-anteprima iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.graf__demo{
  position:absolute; top:8px; right:10px;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.4); color:var(--giallo);
}

/* ---------- timeline ---------- */
.tappe{ position:relative; display:flex; flex-direction:column; gap:44px; }
.tappa{ display:flex; gap:20px; max-width:780px; }
.tappa__filo{ position:relative; width:56px; flex:none; display:flex; justify-content:center; }
.tappa__filo::before{ content:''; position:absolute; top:0; bottom:-44px; width:2px; background:rgba(45,212,191,.12); }
.tappa:last-child .tappa__filo::before{ display:none; }
.tappa__punto{
  position:relative; z-index:1; width:26px; height:26px; border-radius:50%;
  background:var(--teal); border:8px solid #0b3b38; animation:respiro 3s infinite;
}
@keyframes respiro{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
.tappa h3{ font-size:19px; margin-bottom:3px; }
.tappa p{ color:var(--testo-2); font-weight:300; }

/* ---------- FAQ ---------- */
.faq__voce{ border-bottom:1px solid var(--bordo-2); }
.faq__dom{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:22px 0; text-align:left; font-size:17px; font-weight:500;
}
.faq__dom svg{ width:20px; height:20px; flex:none; transition:transform .25s; color:var(--testo-3); }
.faq__voce.aperta .faq__dom svg{ transform:rotate(180deg); }
.faq__ris{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq__ris p{ padding-bottom:22px; color:var(--testo-2); font-weight:300; }

/* ---------- piani ---------- */
.griglia-piani{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.piano{ display:flex; flex-direction:column; height:100%; }
.piano__prezzo{ font-family:var(--mono); font-size:34px; font-weight:600; margin:10px 0 18px; letter-spacing:-.03em; }
.piano__prezzo span{ font-size:14px; color:var(--testo-3); font-family:var(--font); }
.piano__lista{ display:flex; flex-direction:column; gap:9px; margin-bottom:24px; flex:1; font-size:14px; color:var(--testo-2); }
.piano__lista li::before{ content:'—'; color:var(--teal); margin-right:8px; }

/* ---------- tabelle ---------- */
.tab-wrap{ overflow-x:auto; }
.tab{ width:100%; border-collapse:collapse; font-size:14px; }
.tab th{
  text-align:left; padding:10px 14px; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--testo-3); border-bottom:1px solid var(--bordo-2);
}
.tab td{ padding:14px; border-bottom:1px solid var(--bordo-2); white-space:nowrap; }
.tab tbody tr:hover{ background:rgba(255,255,255,.02); }
.tab .num{ text-align:right; }

/* ---------- form ---------- */
.campo{ display:block; margin-bottom:16px; }
.campo__et{ display:block; font-size:13px; color:var(--testo-2); margin-bottom:7px; }
.campo input, .campo select, .campo textarea{
  width:100%; padding:12px 14px; font-size:15px; font-family:inherit;
  background:var(--scuro-800); color:var(--testo);
  border:1px solid var(--bordo); border-radius:var(--r-med);
}
.campo input:focus, .campo select:focus{ outline:2px solid var(--teal); outline-offset:1px; border-color:transparent; }

.avviso{
  padding:12px 14px; border-radius:var(--r-med); font-size:14px; margin-bottom:16px;
  background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.35); color:#fca5a5;
}
.avviso--ok{ background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.35); color:#6ee7b7; }
.avviso--errore{ background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.35); color:#fca5a5; }
.avviso--info{ background:rgba(129,140,248,.1); border-color:rgba(129,140,248,.35); color:var(--primario-3); }

.divisore{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--testo-3); font-size:13px; }
.divisore::before,.divisore::after{ content:''; flex:1; height:1px; background:var(--bordo-2); }

.link-testo{ font-size:13px; color:var(--testo-3); }
.link-testo:hover{ color:var(--teal); text-decoration:underline; }

/* ---------- modale ---------- */
.modale{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(9,10,20,.82); backdrop-filter:blur(6px); }
.modale[hidden]{ display:none; }
.modale__box{
  width:100%; max-width:560px; max-height:88vh; overflow:auto;
  background:var(--scuro-700); border:1px solid var(--bordo); border-radius:var(--r-card); padding:28px;
}
.modale__testa{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }

/* ---------- notifica temporanea ---------- */
.interruttore{
  position:relative; flex:none; width:50px; height:28px; border-radius:999px;
  background:var(--scuro-600); border:1px solid var(--bordo); transition:background .2s, border-color .2s;
}
.interruttore__pallino{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35); transition:transform .2s;
}
.interruttore[aria-checked="true"]{ background:#22c55e; border-color:#22c55e; }
.interruttore[aria-checked="true"] .interruttore__pallino{ transform:translateX(22px); }

.chat-fissa{
  position:fixed; z-index:120; display:flex; align-items:center; justify-content:center;
  right:calc(20px + env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%; color:#08110d;
  background:#22c55e; box-shadow:0 10px 28px rgba(34,197,94,.45);
  transition:transform .2s;
}
.chat-fissa[hidden]{ display:none; }

.chat-pannello{
  position:fixed; z-index:121; display:flex; flex-direction:column;
  right:0; bottom:0; left:0; top:0; background:var(--scuro-800);
}
.chat-pannello[hidden]{ display:none; }
@media(min-width:640px){
  .chat-pannello{
    right:calc(20px + env(safe-area-inset-right)); bottom:calc(90px + env(safe-area-inset-bottom));
    left:auto; top:auto; width:380px; height:min(560px, 70vh);
    border-radius:var(--r-card); border:1px solid var(--bordo-2); box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
}
.chat-pannello__testa{
  display:flex; align-items:center; justify-content:space-between; flex:none;
  padding:16px 18px; border-bottom:1px solid var(--bordo-2); padding-top:calc(16px + env(safe-area-inset-top));
}
.chat-pannello__corpo{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.chat-msg{ max-width:80%; padding:10px 14px; border-radius:var(--r-med); font-size:14px; line-height:1.4; }
.chat-msg--cliente{ align-self:flex-end; background:var(--primario); color:#fff; border-bottom-right-radius:4px; }
.chat-msg--admin{ align-self:flex-start; background:var(--scuro-600); color:var(--testo); border-bottom-left-radius:4px; }
.chat-msg__ora{ display:block; margin-top:4px; font-size:11px; opacity:.65; }
.chat-pannello__scrivi{
  display:flex; gap:10px; flex:none; padding:14px 18px; border-top:1px solid var(--bordo-2);
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.chat-pannello__scrivi input{
  flex:1; padding:11px 16px; border-radius:999px; border:1px solid var(--bordo);
  background:var(--scuro-700); color:var(--testo); font-family:inherit; font-size:16px;
}
.chat-pannello__scrivi button{
  flex:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--primario); color:#fff;
}
.chat-fissa:hover{ transform:scale(1.06); }

.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:95;
  background:var(--scuro-600); border:1px solid var(--teal); border-radius:var(--r-med);
  padding:13px 18px; font-size:14px; max-width:90vw; box-shadow:0 16px 44px rgba(0,0,0,.5);
}
.toast[hidden]{ display:none; }

/* ---------- piè di pagina ---------- */
.piede{ border-top:1px solid var(--bordo-2); padding:48px 0 40px; }
.piede__legale{ font-size:12px; color:var(--testo-3); line-height:1.7; }
.piede__legale ul{ list-style:disc; padding-left:20px; display:flex; flex-direction:column; gap:5px; margin:10px 0; }
.piede__link{ display:flex; gap:18px; flex-wrap:wrap; font-size:13px; margin-top:24px; color:var(--testo-3); }
.social{ display:flex; gap:22px; justify-content:center; }
.social a{ opacity:.55; transition:opacity .2s; }
.social a:hover{ opacity:1; }
.social svg{ width:26px; height:26px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}