/* SellZone · sito in «vetro nero» (dalla versione 445). Si carica DOPO i fogli di ogni pagina (landing, piattaforma,
   prezzi, aziende, analisi) e ne cambia solo l'aspetto: niente scritte e pulsanti sfumati, niente bagliori viola,
   barra e riquadri in vetro, un solo colore d'accento. Togliendo questo file si torna allo stile di prima. */

@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #05070d; --bg-2: #0a0d16; --card: rgba(255, 255, 255, .035); --card-2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .16);
  --text: #f5f7fa; --muted: #a3acba; --dim: #8b95a5;
  --blue: #5aa9ff; --violet: #5aa9ff; --teal: #8ec5ff; --amber: #ffc24d; --good: #8ec5ff; --warn: #ffc24d; --bad: #ff9a3c;
  --grad: linear-gradient(#5aa9ff, #5aa9ff);
  --shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --vg: rgba(24, 30, 44, .55); --vg-line: rgba(255, 255, 255, .14); --vg-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 32px rgba(0, 0, 0, .45); --vg-blur: blur(22px) saturate(160%);
  --tint: rgba(90, 169, 255, .07); --tint-line: rgba(90, 169, 255, .38); --tint-ink: #cfe5ff;
}
body { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); }
body::before, .spot { display: none !important; }
h1, h2 { font-weight: 600; letter-spacing: -.035em; }
h3 { font-weight: 650; letter-spacing: -.02em; }
/* niente testo sfumato: la seconda parte del titolo è più chiara, non colorata */
.grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--muted); }
.eyebrow { color: var(--dim); font-weight: 700; }
.progress span { background: var(--blue); }

/* pulsanti: pillola piena per l'azione principale, vetro per le altre */
.btn, .btn.big { border-radius: 999px; }
.btn.primary { background: var(--blue); color: #05070d; box-shadow: none; }
.btn.primary:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
.btn.ghost { background: var(--vg); border-color: var(--vg-line); backdrop-filter: var(--vg-blur); -webkit-backdrop-filter: var(--vg-blur); }
.btn.ghost:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .08); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--blue); }

/* barra in alto: vetro che galleggia */
.nav { margin: 12px clamp(8px, 2vw, 24px) 0; top: 12px; border: 1px solid var(--vg-line); border-radius: 22px; background: var(--vg); backdrop-filter: var(--vg-blur); -webkit-backdrop-filter: var(--vg-blur); box-shadow: var(--vg-shadow); }
.nav.scrolled { border-bottom-color: var(--vg-line); }
.mark { box-shadow: none; }
.links a.on::after { background: var(--blue); }

/* riquadri: superficie leggera e uniforme (niente sfumature) */
.plan, .val, .en, .c2, .tool, .report, .rp-cta, .screen-wrap, .ai-card, .fu-seq, .fu-events, .l-card, .tabs, .st, .demo, .vs-cost, .nf { background: var(--card); }
.phone, .ai-visual { background: var(--bg-2); }
.section.alt::before { background: rgba(255, 255, 255, .018); }
/* i riquadri «buoni» (piano consigliato, il nostro risultato, il gruppo che va meglio): tinta blu tenue, senza bagliori */
.plan.best, .pc.good, .gn, .study, .c2.eval, .vs-col.new, .ctrl, .scenario, .kpi.hero-kpi, .flip .back, .mini-row.hl, .stat.hl, .an-ok, .val-row.hl { background: var(--tint); border-color: var(--tint-line); box-shadow: none; }
.pyr button.on, .pyr button:hover { background: var(--tint); border-color: var(--tint-line); }
.step.on { border-color: var(--tint-line); }
.split .keep { border-color: var(--tint-line); }

/* chat d'esempio: i messaggi in uscita sono blu tenue, non viola */
.msg.out, .bub.out, .tb.out { background: rgba(90, 169, 255, .22); border: 1px solid rgba(90, 169, 255, .35); color: var(--text); }
.bub.in { background: rgba(255, 255, 255, .08); }
.ai-typing { background: rgba(90, 169, 255, .2); }
.msg.sys { background: rgba(90, 169, 255, .12); color: var(--teal); }

/* etichette e numeri messi in evidenza */
.save, .plan.best .step-tag, .levels span.on, .cc-res span, .badge, .pill.violet, .vs-col.new li::before { background: rgba(90, 169, 255, .16); color: var(--tint-ink); }
.tb.ok { background: rgba(90, 169, 255, .12); border-color: rgba(90, 169, 255, .5); color: var(--tint-ink); }
.val-row.hl i, .b2.us b, .split-l span:last-child, .an-ok b { color: var(--tint-ink); }
.flow-brain { background: rgba(90, 169, 255, .12); }
.flow-brain::before, .flow-brain::after { border-color: rgba(90, 169, 255, .3); }
.lead-form input:focus, .code-form input:focus, .demo input:focus, .demo select:focus, .demo textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(90, 169, 255, .18); }