/* ============================================================
   FINANCE LINK — design system v4
   Concept: allineato a IBsolution (e quindi a FTMO, da cui IBsolution
   prende la pelle):
     · fondo near-black a cast freddo (#05070C)
     · blu #2680FF come unico accento d'azione (CTA, focus, link)
     · #59A0FF per il blu usato come TESTO su fondo scuro
     · verde/rosso restano SOLO semantici (valori positivi/negativi):
       lì il colore è informazione, non decorazione
     · raggi contenuti (10px), niente più 20px: più vicino a FTMO
     · un solo carattere, nessun serif e nessun monospazio decorativo
   Type: Figtree — display, corpo, label e dati.
         Per le colonne numeriche si usa `font-variant-numeric: tabular-nums`
         invece di un secondo font: le cifre restano allineate.
   ============================================================ */

:root {
  /* ---- superfici ---- */
  --bg: #05070c;
  --surface-0: #0b0f18;
  --surface-1: #10151f;
  --surface-2: #161c28;
  --surface-3: #1e2634;

  /* ---- bordi (bianchi come IBsolution, non più azzurrati) ---- */
  --border: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* ---- testo ----
     --text-3 regge le label da 10-11px (eyebrow, chiavi KPI, periodi):
     deve restare sopra 4.5:1 su --surface-1, per questo non scende
     sotto #8891a0. */
  --text: #ffffff;
  --text-2: #a8b1bf;
  --text-3: #8891a0;

  /* ---- accento primario ----
     Due valori distinti di proposito, come in IBsolution: --accent per i
     RIEMPIMENTI (bottoni pieni, chip), --accent-bright per il TESTO su
     fondo scuro. Il blu pieno usato come testo risulta più cupo del
     gradiente dei bottoni e sembra "un altro blu". */
  --accent-pure: #2680ff;
  --accent: #2680ff;
  --accent-hover: #1a75ff;
  /* --accent-fill: per i RIEMPIMENTI che portano testo bianco sopra.
     Il bianco su #2680ff sta a 3.74:1, sotto AA per il testo dei bottoni
     (14-15px bold); su #1c70de sale a 4.75:1. Affiancati non si distinguono,
     ma il testo diventa leggibile. Il blu di brand resta #2680ff ovunque
     serva come bordo, alone, chip o testo. */
  --accent-fill: #1c70de;
  --accent-fill-deep: #1868d0;
  --accent-bright: #59a0ff;
  --accent-soft: rgba(38, 128, 255, 0.14);
  --accent-line: rgba(38, 128, 255, 0.38);
  --accent-glow: rgba(38, 128, 255, 0.42);
  --on-accent: #ffffff;

  /* ---- accento secondario ----
     Era un peach caldo: la palette IBsolution è monocromatica, quindi
     punta al blu chiaro. Le variabili restano perché usate in molti punti. */
  --warm: #8cbcff;
  --warm-soft: rgba(140, 188, 255, 0.12);
  --warm-deep: #16305c;

  /* ---- semantici (restano a colore proprio: sono dati) ---- */
  --pos: #35d07f;
  --pos-soft: rgba(53, 208, 127, 0.13);
  --neg: #ff6b6b;

  /* ---- alias legacy ----
     Mantenuti perché usati in centinaia di punti (CSS + style inline). */
  --void: var(--bg);
  --depth: var(--surface-0);
  --panel: var(--surface-1);
  --raise: var(--surface-2);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --ivory: var(--text);
  --sage: var(--text-2);
  --sage-dim: var(--text-3);
  --phosphor: var(--accent-bright);
  --phosphor-soft: var(--accent-soft);
  --phosphor-glow: var(--accent-glow);
  --red: var(--neg);

  /* un solo carattere: le tre variabili restano distinte così il CSS
     esistente non cambia, ma puntano tutte a Figtree */
  --font-display: "Figtree", system-ui, -apple-system, sans-serif;
  --font-serif: "Figtree", system-ui, sans-serif;
  --font-mono: "Figtree", system-ui, sans-serif;
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --sect: clamp(96px, 12vw, 160px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 20px 50px rgba(2, 4, 10, 0.5);
}

/* Le cifre nelle tabelle e nei KPI si allineano in colonna anche senza un
   font monospazio: sostituisce la funzione che aveva JetBrains Mono. */
[class*="mono"],
table td,
table th,
.kpi-val,
.num {
  font-variant-numeric: tabular-nums;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background:
    radial-gradient(120vw 70vh at 82% -20%, rgba(38, 128, 255, 0.10), transparent 60%),
    radial-gradient(80vw 50vh at 0% 8%, rgba(38, 128, 255, 0.05), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent-fill); color: var(--on-accent); }

img, svg, canvas, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent-fill); color: var(--on-accent);
  padding: 10px 18px; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- typography ---------- */

/* eyebrow: chip bordata (modulazione FTMO) invece del trattino + mono spaziato */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  line-height: 1;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 10px var(--accent-glow);
  flex: none;
}
.eyebrow .code { color: var(--text-3); letter-spacing: 0.12em; }

.voice-it {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.3vw, 27px);
  color: var(--warm);
  letter-spacing: 0.01em;
  display: block;
  margin-bottom: 12px;
}
/* dentro un bottone la voce italiana segue il colore del bottone: il peach
   su riempimento azure scendeva a 3.3:1 (es. CTA "Attiva il copy trading") */
.btn .voice-it {
  color: inherit;
  display: inline;
  margin-bottom: 0;
  font-size: inherit;
}

/* display sentence-case largo: FTMO non usa uppercase condensato */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 100%;
  line-height: 1.0;
  letter-spacing: -0.032em;
  font-size: clamp(36px, 6vw, 84px);
  text-wrap: balance;
}
.h-1 {
  font-weight: 780;
  font-stretch: 100%;
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-size: clamp(31px, 4.6vw, 58px);
  text-wrap: balance;
}
.h-2 {
  font-weight: 720;
  font-stretch: 100%;
  line-height: 1.14;
  letter-spacing: -0.018em;
  font-size: clamp(22px, 2.8vw, 33px);
  text-wrap: balance;
}
.h-3 { font-weight: 700; font-size: clamp(17px, 2vw, 21px); line-height: 1.25; }

.lead {
  color: var(--sage);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
  max-width: 62ch;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.phosphor { color: var(--accent-bright); }
.warm { color: var(--warm); }
/* delta: verde in positivo, rosso in negativo — l'azure resta al brand */
.up { color: var(--pos); }
.down { color: var(--neg); }

.sect { padding-block: calc(var(--sect) / 2); }
.sect-head { margin-bottom: clamp(36px, 5vw, 64px); }
.sect-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  /* squadrati, non a pillola: è la forma dei CTA di IBsolution e FTMO */
  border-radius: 8px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
    background-color 0.25s, color 0.25s, border-color 0.25s;
  will-change: transform;
  white-space: nowrap;
}
/* sfumatura verticale leggera + alone blu, come i CTA di IBsolution */
/* sfumatura verticale leggera + alone blu, come i CTA di IBsolution.
   Entrambi gli estremi del gradiente restano sopra 4.5:1 col testo bianco. */
.btn-solid {
  background: linear-gradient(180deg, var(--accent-fill) 0%, var(--accent-fill-deep) 100%);
  color: var(--on-accent);
  box-shadow: 0 6px 20px rgba(38, 128, 255, 0.3);
}
.btn-solid:hover {
  /* in hover satura verso un blu più pieno invece di schiarire */
  background: linear-gradient(180deg, var(--accent-fill-deep) 0%, #145cbb 100%);
  box-shadow: 0 8px 30px rgba(38, 128, 255, 0.55);
  transform: translateY(-2px);
}
.btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}
.btn-ghost:hover {
  border-color: var(--accent-line);
  color: var(--accent-bright);
  background: var(--accent-soft);
  transform: translateY(-2px);
}
/* terzo livello caldo: peach su fondo scuro, per i CTA secondari editoriali */
.btn-warm {
  border: 1px solid rgba(140, 188, 255, 0.35);
  color: var(--warm);
  background: var(--warm-soft);
}
.btn-warm:hover { border-color: var(--warm); transform: translateY(-2px); }
.btn-text {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-bright);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-text::after { content: "— —"; transition: transform 0.3s var(--ease-out); }
.btn-text:hover::after { transform: translateX(5px); }
.btn-lg { padding: 18px 38px; font-size: 16px; }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(5, 7, 12, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--border);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-stretch: 100%;
  font-size: 18.5px; letter-spacing: -0.02em;
  margin-right: auto;
}
.logo-word { white-space: nowrap; }
.logo-accent { color: var(--accent-bright); }
.nav-logo svg { width: 26px; height: 26px; }
.nav-links { display: flex; align-items: center; gap: 6px; }
/* link nav come pill: hover = superficie, non sottolineatura (pattern FTMO) */
.nav-links a {
  /* Bianco pieno, non grigio: sul blu scuro della barra il grigio
     #a8b1bf si leggeva a fatica. Peso alzato per lo stesso motivo. */
  font-size: 14.5px; font-weight: 650; color: var(--text);
  transition: color 0.2s, background-color 0.2s;
  position: relative;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-links a[aria-current="page"] { color: var(--accent-bright); background: var(--accent-soft); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-lang {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--sage-dim);
  white-space: nowrap;
}
.nav-lang b { color: var(--ivory); font-weight: 600; }

/* ---------- selettore lingua (IT · EN · FR) ----------
   Costruito da assets/js/i18n.js dentro .nav-lang / .top-lang.
   Menu a tendina: bandiera + codice della lingua attiva, l'elenco si apre
   al clic. Prima erano tre pulsanti affiancati sempre visibili. */
.lang-switch { position: relative; display: inline-flex; }

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  line-height: 1;
  transition: background-color 0.16s;
}
/* Lo stato al passaggio del mouse e' un rettangolo arrotondato appena
   accennato: deve leggersi sul blu scuro della barra senza diventare un
   bottone pieno. */
.lang-trigger:hover,
.lang-switch.open .lang-trigger { background: rgba(255, 255, 255, 0.10); }

.lang-code {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Rettangolo, non cerchio, e questo e' il punto.
   Prima era un tondo da 19x19 con dentro un tricolore quadrato: il ritaglio
   circolare mangiava le due fasce esterne — che sono agli angoli, dove il
   cerchio taglia di piu' — e a venti pixel restava una macchia quasi tutta
   bianca, con verde e rosso ridotti a due unghie. Una bandiera si riconosce
   dalle proporzioni delle sue fasce: se le tagli non si legge piu'.
   Adesso e' 3:2, le proporzioni vere, con gli angoli appena smussati.

   L'anello era nero al 12%: su un fondo scuro un contorno nero non esiste.
   Adesso e' bianco tenue, e serve a staccare il bianco della bandiera dal
   riquadro dietro — altrimenti il tricolore sembra sfrangiato a destra. */
.lang-flag {
  /* 21x14 e' 3:2 esatto, come il viewBox: qualsiasi altra coppia lascia
     due strisce vuote ai lati, perche' l'SVG si adatta mantenendo le
     proporzioni invece di deformarsi. */
  width: 21px;
  height: 14px;
  flex: none;
  /* Angoli veri, non accennati: a tre pixel su una figura alta tredici lo
     smusso non si legge. */
  border-radius: 4px;
  /* E' questo a smussare la bandiera: il ritaglio del contenitore agisce
     sull'SVG, che resta un disegno rettangolare semplice.
     Niente bordo attorno: un bordo di un pixel stringe il disegno dentro
     l'ingombro e lascia uno stacco scuro fra la cornice e il tricolore, che
     a venti pixel sembra una figura che non entra nel suo riquadro. Il
     contorno torna a essere un'ombra appoggiata FUORI, che segue la curva
     senza rubare spazio al disegno. */
  overflow: hidden;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.lang-flag svg { width: 100%; height: 100%; display: block; }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 196px;
  padding: 8px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* ATTENZIONE alla riga qui sotto: "visibility 0s 0.15s", non
     "visibility 0.15s". visibility e' una proprieta' DISCRETA, non si
     interpola come l'opacita': messa in transizione con una durata, il
     pannello resta nascosto anche a menu aperto (verificato: hidden anche
     dopo mezzo secondo, e l'area non era nemmeno cliccabile).
     Cosi' invece: in chiusura aspetta che la dissolvenza finisca, in
     apertura (regola sotto) scatta subito. */
  transition: opacity 0.15s, transform 0.15s, visibility 0s 0.15s;
  z-index: 120;
}
.lang-switch.open .lang-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.15s, transform 0.15s, visibility 0s;
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  background: transparent;
  /* Il pannello e' bianco: il testo qui NON segue i colori del tema scuro. */
  color: #16181d;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  line-height: 1;
  transition: background-color 0.14s;
}
.lang-item:hover { background: rgba(0, 0, 0, 0.055); }
.lang-item.on { font-weight: 700; }
.lang-name { white-space: nowrap; }

@media (max-width: 640px) {
  .lang-menu { left: auto; right: 0; transform: translateY(-4px); }
  .lang-switch.open .lang-menu { transform: translateY(0); }
}

/* niente lampo nella lingua sbagliata mentre carica il dizionario */
html.i18n-loading body { visibility: hidden; }
.nav-login { font-size: 14.5px; font-weight: 650; color: var(--text); white-space: nowrap; }
.nav-login:hover { color: var(--ivory); }
.nav .btn { padding: 11px 22px; font-size: 14px; }

.nav-burger {
  display: none;
  flex-direction: column; gap: 5px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 10px;
}
.nav-burger span {
  width: 18px; height: 1.6px; background: var(--ivory);
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-burger { display: flex; }
  /* il selettore lingua resta visibile anche su mobile: con tre lingue
     nasconderlo vorrebbe dire non poter cambiare lingua da telefono */
  .nav-links, .nav-cta .nav-login { display: none; }
  .nav-cta .lang-opt { padding: 5px 7px; font-size: 10.5px; }
  .nav-menu-open .nav-links {
    display: flex;
    position: fixed; inset: 73px 0 auto 0;
    flex-direction: column; align-items: stretch;
    gap: 4px;
    background: rgba(5, 7, 12, 0.97);
    backdrop-filter: blur(18px);
    padding: 18px var(--gutter) 30px;
    border-bottom: 1px solid var(--border);
  }
  .nav-menu-open .nav-links a { font-size: 18px; padding: 12px 14px; width: 100%; border-radius: 12px; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-canvas {
  position: absolute; inset: 0; z-index: -2;
}
.hero-canvas canvas { width: 100%; height: 100%; }
.hero-vignette {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 85% at 72% 34%, rgba(38, 128, 255, 0.12), transparent 58%),
    radial-gradient(120% 90% at 70% 40%, transparent 30%, rgba(5, 7, 12, 0.74) 78%),
    linear-gradient(to top, var(--bg) 0%, transparent 34%),
    linear-gradient(to bottom, rgba(5, 7, 12, 0.85) 0%, transparent 22%);
  pointer-events: none;
}
.hero-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px var(--gutter) clamp(60px, 8vh, 110px);
}
@media (max-width: 720px) {
  .hero-inner { padding-top: 96px; }
  .hero-stats { margin-top: 30px; gap: 20px 32px; padding-top: 22px; }
  .hero-ctas .btn { width: 100%; }
}
.hero .h-display { font-size: clamp(30px, 5vw, 72px); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 17px;
  margin-bottom: 30px;
  background: rgba(16, 21, 29, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 10px rgba(53, 208, 127, 0.55);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.hero-sub {
  margin-top: 28px;
  color: var(--sage);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.65;
  max-width: 54ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.hero-stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(44px, 6vh, 70px);
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.hero-stat .n {
  font-weight: 800; font-stretch: 100%;
  letter-spacing: -0.03em;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-stat .l {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  margin-top: 9px;
}
.hero-verify {
  margin-top: 26px;
  display: inline-flex;
}
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: 120px;
  writing-mode: vertical-rl;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--sage-dim);
  display: flex; align-items: center; gap: 12px;
}
.hero-scroll::after {
  content: ""; width: 1px; height: 48px;
  background: linear-gradient(var(--accent-bright), transparent);
  animation: drip 2.2s var(--ease-out) infinite;
}
@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  56% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 720px) { .hero-scroll { display: none; } }

/* ---------- ticker ---------- */

.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: rgba(11, 15, 21, 0.72);
  position: relative;
  z-index: 2;
}
.ticker-track {
  display: flex; width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-item {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: 13px;
  padding: 13px 30px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.ticker-item .sym { color: var(--text-2); letter-spacing: 0.06em; }
.ticker-item .px { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ticker-item .chg { font-size: 12px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- cards / panels ---------- */

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease-out), border-color 0.35s, box-shadow 0.4s var(--ease-out),
    background-color 0.35s;
}
.panel-hover:hover {
  transform: translateY(-4px);
  background: var(--surface-2);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-card);
}
.panel-pad { padding: clamp(22px, 3vw, 34px); }
/* variante calda: usata per i blocchi editoriali / voce italiana */
.panel-warm {
  border-color: rgba(140, 188, 255, 0.22);
  background: linear-gradient(165deg, rgba(140, 188, 255, 0.05), var(--surface-1) 55%);
}

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* terminal window chrome */
.term {
  background: var(--surface-0);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(2, 4, 10, 0.55);
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.1em; color: var(--sage-dim);
}
.term-bar .dots { display: flex; gap: 6px; margin-right: 8px; }
.term-bar .dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--raise); border: 1px solid var(--line-strong);
}
.term-bar .dots i:first-child { background: var(--accent-soft); border-color: var(--accent-bright); }
.term-body { padding: clamp(16px, 2.4vw, 26px); font-family: var(--font-mono); font-size: 13.5px; }
.term-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 4px;
  border-bottom: 1px dashed var(--line);
  color: var(--sage);
}
.term-row:last-child { border-bottom: 0; }
.term-row .name { color: var(--ivory); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.term-row .tag {
  font-size: 10.5px; letter-spacing: 0.12em;
  padding: 3px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); color: var(--sage);
}
.term-row .tag.live { color: var(--pos); border-color: rgba(53, 208, 127, 0.4); background: var(--pos-soft); }

/* stat blocks */
.stat-card { text-align: left; }
.stat-card .k {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.stat-card .v {
  font-weight: 800; font-stretch: 100%;
  letter-spacing: -0.03em;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.02;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.stat-card .d { color: var(--sage); font-size: 14px; margin-top: 8px; }

/* ---------- tabs (ecosystem) ---------- */

.tabs-nav {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 30px;
}
.tab-btn {
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.06em;
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--sage);
  transition: all 0.25s;
}
.tab-btn:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.04); }
.tab-btn[aria-selected="true"] {
  background: var(--accent-fill); color: var(--on-accent);
  border-color: var(--accent); font-weight: 600;
}
.tab-panel[hidden] { display: none; }
.svc-list { display: grid; gap: 0; }
.svc-list li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 13px 4px;
  border-bottom: 1px dashed var(--line);
  color: var(--sage); font-size: 15.5px;
}
.svc-list li::before { content: "— —"; color: var(--accent-bright); font-family: var(--font-mono); flex: none; }
.svc-list li:last-child { border-bottom: 0; }

/* ---------- accordion ---------- */

/* FAQ a card arrotondate separate (FTMO) invece delle righe a filetto */
.acc { display: grid; gap: 12px; }
.acc-item {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s, background-color 0.25s;
}
.acc-item:hover { border-color: var(--border-strong); }
.acc-item[open] { background: var(--surface-2); border-color: var(--accent-line); }
.acc-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 22px;
  cursor: pointer;
  font-weight: 650; font-size: clamp(15.5px, 1.8vw, 18px);
  letter-spacing: -0.01em;
  transition: color 0.25s;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary:hover { color: var(--accent-bright); }
.acc-item summary .ico {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--border-strong); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 15px; font-weight: 400;
  color: var(--text-2);
  transition: transform 0.35s var(--ease-out), background-color 0.25s, color 0.25s;
}
.acc-item[open] summary .ico {
  transform: rotate(45deg);
  background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent);
}
.acc-item .acc-body {
  padding: 0 22px 22px;
  color: var(--text-2);
  max-width: 72ch;
  line-height: 1.7;
}

/* ---------- pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
}
.plan-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(38, 128, 255, 0.10), var(--surface-1) 42%);
  box-shadow: 0 24px 70px rgba(38, 128, 255, 0.16);
}
.plan-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent-fill); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 16px; border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(38, 128, 255, 0.35);
}
.plan-period {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
}
.plan-name {
  font-weight: 780; font-stretch: 100%;
  letter-spacing: -0.028em;
  font-size: 27px; margin-top: 10px;
}
.plan-day { font-family: var(--font-mono); font-size: 13px; color: var(--accent-bright); margin-top: 4px; }
.plan-price { margin-block: 18px 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-price .was { color: var(--text-3); text-decoration: line-through; font-size: 18px; }
.plan-price .now {
  font-weight: 800; font-stretch: 100%;
  letter-spacing: -0.035em;
  font-size: clamp(34px, 4vw, 46px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-price .per { color: var(--sage); font-size: 14px; }
.plan-desc { color: var(--sage); font-size: 14.5px; line-height: 1.6; min-height: 3.2em; }
.plan-feats { margin-block: 22px; flex: 1; }
.plan-feats li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; font-size: 14.5px; color: var(--ivory);
  border-bottom: 1px dashed var(--line);
}
.plan-feats li::before { content: "—S—"; color: var(--pos); font-family: var(--font-mono); flex: none; }
.plan-feats li.off { color: var(--text-3); }
.plan-feats li.off::before { content: "—"; color: var(--text-3); }
.plan-feats li.plus-head { color: var(--text-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.plan-feats li.plus-head::before { content: "+"; color: var(--accent-bright); }
.plan .btn { width: 100%; }

/* comparison table */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%; min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage);
  border-bottom: 1px solid var(--line-strong);
}
.cmp tbody th { font-weight: 550; color: var(--ivory); }
.cmp td { color: var(--text-2); font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cmp td .yes { color: var(--pos); }
.cmp td .no { color: var(--text-3); }

/* ---------- reviews ---------- */

.marquee { overflow: hidden; position: relative; }
.marquee-track { display: flex; gap: 20px; width: max-content; animation: ticker 70s linear infinite; padding-block: 4px; }
.marquee-rev { animation-direction: reverse; animation-duration: 82s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}
.rev-card {
  width: min(380px, 82vw); flex: none;
  padding: 26px;
}
.rev-card p { font-size: 15px; line-height: 1.65; color: var(--ivory); }
.rev-card p::before { content: "—S"; font-family: var(--font-serif); font-size: 38px; color: var(--warm); line-height: 0; vertical-align: -10px; margin-right: 4px; }
.rev-meta { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.rev-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-bright);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
}
.rev-meta .who { font-weight: 600; font-size: 14px; }
.rev-meta .when { font-family: var(--font-mono); font-size: 11.5px; color: var(--sage-dim); letter-spacing: 0.08em; }

/* ---------- steps / path ---------- */

.path { position: relative; }
.path-line {
  position: absolute; left: 21px; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(var(--accent) 0%, var(--border-strong) 100%);
}
.path-step {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr; gap: 22px;
  padding-block: 26px;
}
.path-num {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--accent-line);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-bright);
  position: relative; z-index: 1;
}
.path-step .tag-mini {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-bright);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 3px 10px; border-radius: var(--radius-sm);
  margin-left: 12px; vertical-align: middle;
}
.path-step p { color: var(--sage); margin-top: 10px; max-width: 60ch; }

/* ---------- calendar ---------- */

.cal { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-0); }
.cal-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cal-head span {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-dim);
  padding: 12px 10px; text-align: center;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day {
  min-height: 96px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 9px;
  font-size: 11px;
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day .d { font-family: var(--font-mono); font-size: 11.5px; color: var(--sage-dim); }
.cal-ev {
  margin-top: 6px;
  padding: 5px 8px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  color: var(--ivory);
  line-height: 1.35;
  font-size: 10.5px;
}
.cal-ev.gold { border-left-color: var(--warm); background: var(--warm-soft); }
.cal-ev.macro { border-left-color: var(--pos); background: var(--pos-soft); }
@media (max-width: 860px) {
  .cal-grid { grid-template-columns: 1fr; }
  .cal-head { display: none; }
  .cal-day { min-height: 0; border-right: 0; display: none; }
  .cal-day.has-ev { display: block; }
  .cal-day .d::after { content: " · July 2026"; letter-spacing: 0.06em; }
}

/* freq chips */
.freq { display: flex; flex-wrap: wrap; gap: 12px; }
.freq span {
  font-family: var(--font-mono); font-size: 12.5px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 9px 18px; color: var(--sage);
}
.freq span b { color: var(--accent-bright); font-weight: 600; margin-right: 6px; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  margin-top: var(--sect);
  background: linear-gradient(to bottom, transparent, rgba(38, 128, 255, 0.05));
}
.footer-hero { padding-block: clamp(60px, 8vw, 100px) 30px; }
.footer-hero .voice-it { font-size: clamp(24px, 3.4vw, 40px); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-block: 40px 60px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sage-dim);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  color: var(--sage); font-size: 14.5px;
  padding-block: 6px;
  transition: color 0.2s, transform 0.3s var(--ease-out);
}
.footer-col a:hover { color: var(--accent-bright); transform: translateX(4px); }
.footer-legal {
  border-top: 1px solid var(--line);
  padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  align-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--sage-dim);
}
.footer-legal a:hover { color: var(--accent-bright); }

/* ---------- legal pages ---------- */

.legal-hero { padding: 170px 0 60px; border-bottom: 1px solid var(--line); }
.legal-body { padding-block: 60px var(--sect); max-width: 76ch; }
.legal-body h2 { font-size: 22px; font-weight: 750; margin: 44px 0 14px; }
.legal-body h3 { font-size: 17px; font-weight: 700; margin: 30px 0 10px; }
.legal-body p, .legal-body li { color: var(--sage); font-size: 15.5px; line-height: 1.75; margin-bottom: 12px; }
.legal-body ul { padding-left: 20px; }
.legal-body ul li { list-style: square; }
.legal-body ul li::marker { color: var(--accent-bright); }
.legal-body a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
/* i bottoni dentro il corpo legale non sono link testuali: `.legal-body a` è più
   specifico di `.btn-solid` e ne sovrascriveva il colore (azure su azure). */
.legal-body a.btn { text-decoration: none; }
.legal-body a.btn-solid { color: var(--on-accent); }
.legal-body a.btn-ghost, .legal-body a.btn-warm { color: var(--text); }
.legal-body strong { color: var(--ivory); }
.legal-body table { width: 100%; border-collapse: collapse; margin-block: 20px; font-size: 14px; }
.legal-body th, .legal-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; color: var(--sage); }
.legal-body th { color: var(--ivory); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }

/* page hero (interior pages) */
.page-hero {
  position: relative;
  padding: clamp(160px, 22vh, 220px) 0 clamp(50px, 7vw, 80px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero .h-display { font-size: clamp(36px, 6vw, 76px); }
.page-hero-glow {
  position: absolute; top: -30%; right: -10%;
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, rgba(38, 128, 255, 0.16), transparent 65%);
  pointer-events: none;
}

/* ---------- reveal animations (JS-gated; visible without JS) ---------- */

html.js .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--rv-delay, 0s);
}
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv-l { transform: translateX(-30px); }
html.js .rv-r { transform: translateX(30px); }
html.js .rv-l.in, html.js .rv-r.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .panel { transition: none; }
}

/* utility */
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.mt-1 { margin-top: 14px; } .mt-2 { margin-top: 28px; } .mt-3 { margin-top: 48px; }
.mb-2 { margin-bottom: 28px; }
.small { font-size: 13px; color: var(--sage-dim); }
.divider-node {
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding-block: calc(var(--sect) / 4);
}
.divider-node svg { width: 120px; opacity: 0.5; }

/* CTA band */
.cta-band {
  position: relative;
  border-block: 1px solid var(--line);
  padding-block: clamp(70px, 10vw, 120px);
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 50% 100%, rgba(38, 128, 255, 0.18), transparent 70%);
  pointer-events: none;
}

/* ---------- forms (register / login) ---------- */

[hidden] { display: none !important; }

.auth-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 960px) { .auth-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage-dim);
  margin-bottom: 8px;
}
.input {
  width: 100%;
  background: var(--surface-0);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.input::placeholder { color: var(--text-3); }
.input:focus {
  outline: none;
  background: var(--surface-1);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field .hint {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--sage-dim);
  margin-top: 7px;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  position: relative;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.06em;
  padding: 10px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--sage);
  cursor: pointer;
  transition: all 0.25s;
}
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.04); }
.chip:has(input:checked) {
  background: var(--accent-fill); color: var(--on-accent);
  border-color: var(--accent); font-weight: 600;
}
.chip:has(input:focus-visible) { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.check {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; color: var(--sage); line-height: 1.55;
}
.check input {
  flex: none; width: 16px; height: 16px; margin-top: 3px;
  accent-color: var(--accent);
}
.check a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }

.form-msg {
  font-family: var(--font-mono); font-size: 13px;
  line-height: 1.55;
  margin-top: 16px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.09);
  color: var(--neg);
}
.form-msg.ok {
  border-color: rgba(53, 208, 127, 0.4);
  background: var(--pos-soft);
  color: var(--pos);
}

/* ---------- admin console ---------- */

.gate-panel { max-width: 440px; margin-inline: auto; }

.pill {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  color: var(--sage);
  white-space: nowrap;
}
.pill-on {
  color: var(--accent-bright);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.pill-pos { color: var(--pos); border-color: rgba(53, 208, 127, 0.4); background: var(--pos-soft); }
.pill-warm { color: var(--warm); border-color: rgba(140, 188, 255, 0.35); background: var(--warm-soft); }

.admin-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table {
  width: 100%; min-width: 720px;
  border-collapse: collapse;
  font-family: var(--font-mono); font-size: 13px;
}
.admin-table th, .admin-table td {
  padding: 13px 14px; text-align: left;
  border-bottom: 1px dashed var(--line);
  color: var(--sage);
  white-space: nowrap;
}
.admin-table thead th {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-dim);
  border-bottom: 1px solid var(--line-strong);
}
.admin-table td.who { color: var(--ivory); font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.admin-table tr:last-child td { border-bottom: 0; }

.btn-mini {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--sage);
  transition: all 0.2s;
}
.btn-mini:hover { color: var(--accent-bright); border-color: var(--accent-line); background: var(--accent-soft); }
.btn-mini.danger:hover { color: var(--neg); border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.08); }
.btn-mini[disabled] { opacity: 0.35; cursor: not-allowed; }
.row-actions { display: flex; gap: 8px; }

.admin-session {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--sage);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.admin-session .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pos);
  box-shadow: 0 0 10px rgba(53, 208, 127, 0.55);
}

/* ========================================================================
   SITO PUBBLICO — struttura sul riferimento indicato.
   Carattere e colori restano i nostri: cambia come sono disposte le cose.
   ======================================================================== */

/* ---------------- le tre prove sotto il titolo ---------------- */
.hero-punti {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 30px;
  margin: 26px 0 0;
  padding: 0; list-style: none;
  font-size: 14px; color: var(--text-3);
}
.hero-punti li { display: flex; align-items: baseline; gap: 7px; }
.hero-punti b {
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text);
}
.hero-punti li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--border-strong); margin-right: 26px; align-self: center;
}

/* ---------------- vetrina del prodotto ----------------
   Una finestra, non un riquadro: la barra col titolo in cima e' quello che
   fa capire in mezzo secondo che sotto c'e' un prodotto e non un'altra
   sezione di testo. */
.vetrina {
  max-width: 940px; margin: 46px auto 0;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10, 14, 20, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 50px 110px -50px rgba(38, 128, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  text-align: left;
}
.vetrina-barra {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .022);
}
.vt-punti { display: flex; gap: 5px; }
.vt-punti i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.vt-titolo { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.vt-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #4ade80;
}
.vt-live i {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, .7);
}
.vetrina-corpo { padding: 18px; }
.vt-carica { padding: 40px 10px; text-align: center; color: var(--text-3); font-size: 13.5px; }

.vt-prezzo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.vt-k {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 5px;
}
.vt-p { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.vt-p.su, .vt-var.su { color: #4ade80; }
.vt-p.giu, .vt-var.giu { color: #ff6b7a; }
.vt-var { font-size: 16px; font-weight: 800; }

.vt-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vt-riq {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; background: rgba(255, 255, 255, .022);
}
.vt-liv {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 5px 0; font-size: 13px;
}
.vt-liv span { color: var(--text-3); }
.vt-liv b { font-weight: 700; font-variant-numeric: tabular-nums; }
.vt-liv.perno b { color: var(--accent-bright); }

.vt-barra { display: flex; gap: 2px; margin: 4px 0 9px; }
.vt-barra span {
  display: flex; align-items: center; justify-content: center;
  height: 30px; border-radius: 7px;
  font-size: 12px; font-weight: 800; min-width: 34px;
}
.vt-barra .c { background: rgba(47, 191, 113, .2); color: #4ade80; box-shadow: inset 0 0 0 1px rgba(47, 191, 113, .36); }
.vt-barra .v { background: rgba(229, 72, 77, .18); color: #ff6b7a; box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .36); }
.vt-sotto { font-size: 12px; color: var(--text-3); }
.vt-sotto b { color: var(--text-2); }
.vt-nota { margin: 15px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }

/* ---------------- tre passi ---------------- */
.passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.passo {
  border: 1px solid var(--border); border-radius: 16px; padding: 22px;
  background: rgba(255, 255, 255, .018);
  display: flex; flex-direction: column; gap: 10px;
}
.passo-n {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-bright);
  border: 1px solid var(--accent-line);
  font-size: 13px; font-weight: 800;
}
.passo h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.passo p { font-size: 14px; line-height: 1.6; color: var(--text-3); margin: 0; }
.passo-lista { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.passo-lista li {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
  background: rgba(255, 255, 255, .03);
}

/* ---------------- griglia strumenti ---------------- */
.griglia-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.strum {
  border: 1px solid var(--border); border-radius: 16px; padding: 22px;
  background: rgba(255, 255, 255, .018);
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .2s, transform .2s;
}
.strum:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.strum-i {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-bright);
  border: 1px solid var(--accent-line);
}
.strum-i svg { width: 18px; height: 18px; }
.strum h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.strum p { font-size: 13.5px; line-height: 1.58; color: var(--text-3); margin: 0; }

/* ---------------- fiducia sotto l'invito finale ---------------- */
.fiducia {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
  margin-top: 22px; padding: 0; list-style: none;
  font-size: 13px; color: var(--text-3);
}
.fiducia li { display: inline-flex; align-items: center; gap: 7px; }
.fiducia li::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

@media (max-width: 900px) {
  .passi, .griglia-6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .hero-punti { gap: 8px 16px; font-size: 13px; }
  .hero-punti b { font-size: 17px; }
  .hero-punti li + li::before { display: none; }
  .vetrina { margin-top: 34px; border-radius: 14px; }
  .vt-griglia { grid-template-columns: 1fr; }
  .vt-p { font-size: 30px; }
  .passi, .griglia-6 { grid-template-columns: 1fr; }
}

/* Sottotitolo di sezione: una riga sotto il titolo che dice cosa aspettarsi,
   come nel riferimento. */
.sect-sub {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-3);
}

/* La "voce italiana" sopra i titoli e' un vezzo grafico pensato per la
   pagina in inglese: la frase in italiano in corsivo, e sotto il titolo
   inglese. Con la pagina gia' in italiano diventava un doppione — ogni
   titolo compariva due volte, identico ("Guarda come funziona" sopra
   "Guarda come funziona"). Succedeva su TUTTE le sezioni del sito, non
   solo su quelle nuove.
   i18n scrive la lingua corrente sull'elemento radice: basta agganciarsi
   a quella. */
html[lang="it"] .voice-it { display: none; }

/* La barra in cima non ci stava su telefono: marchio, selettore lingua,
   pulsante e menu a panino sommati superavano la larghezza dello schermo e
   la pagina scorreva di lato. Difetto che c'era gia' — si notava poco
   perche' bastavano quaranta pixel. Qui si stringe tutto quello che si puo'
   stringere senza togliere niente: il selettore della lingua resta, perche'
   sul telefono e' l'unico modo di cambiarla. */
@media (max-width: 480px) {
  .nav-inner { gap: 10px; padding-inline: 14px; }
  .nav-cta { gap: 8px; }
  .nav-logo .logo-word { font-size: 13px; letter-spacing: 0.02em; }
  .nav-logo svg { width: 22px; height: 22px; }
  .nav-cta .btn-solid { padding: 9px 14px; font-size: 12.5px; }
  .nav-burger { width: 38px; }
}

/* ---------------- schermate della piattaforma ----------------
   Le immagini stanno in una cornice con un alone: senza, un'immagine scura
   su fondo scuro sembra un buco nella pagina invece di uno schermo. */
/* La cornice del riferimento e' una vera cornice, non un bordo: fra il filo
   luminoso e l'immagine c'e' qualche pixel di scuro, come la scocca attorno a
   uno schermo. E' quel distacco a farla leggere come un dispositivo invece
   che come un rettangolo con un contorno.
   L'anello nero esterno serve a staccare il filo chiaro dal fondo, che e'
   quasi dello stesso colore: senza, il bordo si confonde. */
.scatto {
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(89, 160, 255, .30);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .65),
    0 60px 120px -58px rgba(38, 128, 255, .75),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}
.scatto img {
  display: block; width: 100%; height: auto;
  border-radius: 15px;   /* 22 della cornice meno i 7 di scocca */
}



/* ---------------- righe alternate schermata / testo ---------------- */
.righe { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); margin-top: clamp(56px, 8vw, 110px); }
.riga { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
/* Nella riga rovesciata vanno invertite anche le COLONNE, non solo l'ordine:
   altrimenti la schermata finisce nella colonna stretta e si rimpicciolisce a
   meta' — succedeva a Finance Gold Preview e al Wealth Tracker, larghi 445 pixel
   contro i 603 delle altre due. */
.riga.rovescia { grid-template-columns: 1.15fr 0.85fr; }
.riga.rovescia .riga-testo { order: 2; }
.riga.rovescia .scatto { order: 1; }
.riga-testo h3 {
  font-size: clamp(21px, 2.4vw, 30px); font-weight: 800;
  letter-spacing: -.028em; line-height: 1.2; margin: 12px 0 0;
}
.riga-testo p:last-child { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-3); }

@media (max-width: 860px) {
  .riga, .riga.rovescia { grid-template-columns: 1fr; }
  .riga.rovescia .riga-testo, .riga.rovescia .scatto { order: initial; }
}

/* ---------------- giostra dei servizi ----------------
   Tutte le schermate grandi, una alla volta, scorrendo. Lo scorrimento e'
   quello nativo del browser con l'aggancio: funziona col dito, con la rotella
   e con la tastiera senza una riga di libreria, e su telefono si comporta
   come si aspetta chi ci e' abituato. */
.giostra { margin-top: clamp(30px, 4vw, 48px); }

.gio-tab {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px;
  scrollbar-width: none;
}
.gio-tab::-webkit-scrollbar { display: none; }
.gio-t {
  flex: none; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .022);
  color: var(--text-3);
  font: inherit; font-size: 13px; font-weight: 700;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.gio-t:hover { color: var(--text); border-color: var(--accent-line); }
.gio-t.on { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }

.gio-pista {
  display: flex; gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 14px 0 6px;
  scrollbar-width: none;
}
.gio-pista::-webkit-scrollbar { display: none; }
.lastra { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; }
.lastra-dida { margin-top: 20px; max-width: 74ch; }
.lastra-dida h3 {
  font-size: clamp(20px, 2.3vw, 28px); font-weight: 800;
  letter-spacing: -.028em; line-height: 1.2; margin: 10px 0 0;
}
.lastra-dida p:last-child { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-3); }

.gio-comandi { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.gio-freccia {
  width: 42px; height: 42px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: rgba(255, 255, 255, .022); color: var(--text);
  font-size: 20px; line-height: 1;
  transition: border-color .15s, background .15s;
}
.gio-freccia:hover { border-color: var(--accent); background: var(--accent-soft); }
.gio-freccia[disabled] { opacity: .35; cursor: default; }
.gio-freccia[disabled]:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, .022); }
.gio-conta {
  font-size: 13px; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums; min-width: 56px; text-align: center;
}

@media (max-width: 620px) {
  .gio-pista { gap: 14px; }
  .lastra-dida { margin-top: 15px; }
}

/* ---------------- eroe a due colonne ----------------
   A sinistra il discorso, a destra la piattaforma. Le regole stanno qui in
   fondo e sovrascrivono quelle dell'eroe centrato di prima, che resta valida
   per le altre pagine che la usano ancora. */
.hero-due {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  text-align: left;
  max-width: 1360px;
}
.hero-due .hero-badge { margin-inline: 0; }
.hero-due h1 { margin-inline: 0; }
.hero-due .hero-sub { margin-inline: 0; max-width: 54ch; }
.hero-due .hero-ctas { justify-content: flex-start; }
.hero-due .voice-it { text-align: left; }

/* Le prove diventano un elenco spuntato in colonna: accanto a un'immagine
   una riga sola di numeri si perdeva, incolonnata si legge una per una. */
.hero-due .hero-punti {
  flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 11px; margin-top: 30px;
}
.hero-due .hero-punti li { gap: 9px; }
/* La spunta va su TUTTE le righe. C'era gia' una regola per l'eroe
   orizzontale che spegneva il segno dalla seconda riga in poi (li' era il
   pallino separatore): restava accesa anche qui, e il cerchietto compariva
   solo sulla prima. Si vedeva a occhio nudo. */
.hero-due .hero-punti li::before,
.hero-due .hero-punti li + li::before {
  content: ""; display: block;
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  margin-right: 0;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  align-self: center;
}

/* ---------------- la piattaforma a destra ---------------- */
.hero-vista { position: relative; }
/* La schermata sborda un po' a destra, come nel riferimento: da' l'idea che
   la piattaforma continui oltre il bordo invece di essere un francobollo
   incollato in mezzo. */
.hero-scatto { margin-right: clamp(-90px, -5vw, 0px); }
/* Il riquadro deve SPORGERE dalla schermata, non coprirla: prima era largo
   360 e alto quanto mezza immagine, e della piattaforma si vedevano solo i
   bordi. Ora e' piu' stretto, spostato piu' in basso e a sinistra, e mostra
   una cosa sola oltre al prezzo. */
.hero-vista .vetrina {
  position: absolute; left: -52px; bottom: -34px; z-index: 2;
  width: min(300px, 62%);
  max-width: none; margin: 0;
}
/* A 300 pixel la barra del titolo andava a capo: "la piattaforma" scendeva
   sotto e "DATI REALI" si spezzava in due. Testo piu' piccolo, niente
   pallini e nessuna riga che va a capo. */
.hero-vista .vetrina-barra { padding: 9px 13px; gap: 8px; }
.hero-vista .vt-punti { display: none; }
.hero-vista .vt-titolo { font-size: 11.5px; white-space: nowrap; }
.hero-vista .vt-live { font-size: 9.5px; white-space: nowrap; }
.hero-vista .vetrina-corpo { padding: 13px; }

/* L'indicatore "scorri" finiva scritto sopra la schermata. Nell'eroe a due
   colonne non serve: c'e' gia' la piattaforma a dire che sotto continua. */
.hero:has(.hero-due) .hero-scroll { display: none; }
.hero-vista .vt-prezzo { padding-bottom: 12px; margin-bottom: 12px; }
.hero-vista .vt-p { font-size: 25px; }
.hero-vista .vt-var { font-size: 13px; }
.hero-vista .vt-griglia { grid-template-columns: 1fr; gap: 10px; }
/* Dei due riquadri resta il posizionamento della folla: i livelli sono tre
   righe di numeri che a questa misura non si leggono comunque, e servivano
   solo ad allungare la scheda. */
.hero-vista .vt-riq:first-child { display: none; }
.hero-vista .vt-nota { display: none; }   /* accanto alla schermata e' rumore */

@media (max-width: 1080px) {
  .hero-due { grid-template-columns: 1fr; text-align: center; }
  .hero-due .hero-badge, .hero-due h1, .hero-due .hero-sub { margin-inline: auto; }
  .hero-due .hero-ctas { justify-content: center; }
  .hero-due .voice-it { text-align: center; }
  .hero-due .hero-punti { align-items: center; }
  .hero-scatto { margin-right: 0; }
  /* Sotto i 1080 il riquadro dei dati esce da sopra la schermata e si mette
     in fila: sovrapposto su uno schermo stretto coprirebbe meta' immagine. */
  .hero-vista .vetrina { position: static; width: auto; margin-top: 16px; }
  .hero-vista .vt-griglia { grid-template-columns: 1fr 1fr; }
  .hero-vista .vt-riq:first-child { display: block; }   /* qui lo spazio c'e' */
}
@media (max-width: 620px) {
  .hero-vista .vt-griglia { grid-template-columns: 1fr; }
}