/* ============================================================
   GOLDTRENDIA — TEMA SCURO "CRUSCOTTO"
   Livello di rifacimento grafico: si carica DOPO styles.css e
   ne riscrive fondo, tipografia e componenti ricorrenti.
   Tenerlo separato permette di tornare indietro togliendo una riga.
   ============================================================ */

:root {
    /* Fondali: nero non puro, leggermente freddo */
    --gt-ground:      #08080A;
    --gt-ground-2:    #0B0B0E;
    --gt-panel:       #0F0F13;
    --gt-panel-2:     #14141A;
    --gt-line:        rgba(255, 255, 255, 0.07);
    --gt-line-strong: rgba(255, 255, 255, 0.14);

    /* Testo */
    --gt-text:   #F1F2F5;
    --gt-text-2: #A5A9B2;
    --gt-text-3: #6C707A;

    /* Accenti */
    --gt-blue:  #4C82F7;
    --gt-blue-2:#7AA5FF;
    --gt-mint:  #58D3AE;
    --gt-red:   #E8705F;
    --gt-amber: #E0A44C;

    --gt-radius:    18px;
    --gt-radius-sm: 12px;
    --gt-radius-pill: 999px;

    /* Riscrittura dei token originali del sito: tutto ciò che li
       usa (258 punti) passa al tema scuro senza toccare le regole. */
    --bg-dark:       var(--gt-ground);
    --bg-card:       var(--gt-panel);
    --bg-card-hover: var(--gt-panel-2);
    --bg-surface:    var(--gt-ground-2);
    --gold-primary:  var(--gt-blue);
    --gold-light:    var(--gt-blue-2);
    --gold-dark:     #2F5FD0;
    --gold-glow:     rgba(76, 130, 247, 0.22);
    --text-primary:  var(--gt-text);
    --text-secondary:var(--gt-text-2);
    --text-muted:    var(--gt-text-3);
    --accent-blue:   var(--gt-blue);
    --accent-green:  var(--gt-mint);
    --accent-red:    var(--gt-red);
    --gradient-gold: var(--gt-blue);
    --gradient-dark: var(--gt-ground);
}

/* ---------- FONDO E TIPOGRAFIA ---------- */

html, body {
    background: var(--gt-ground);
    color: var(--gt-text);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Il serif dell'impianto vecchio non regge il registro da cruscotto:
   tutta la gerarchia passa a Inter, con tracking stretto sui titoli. */
h1, h2, h3, h4,
.section-title, .hero-title, .page-title,
.truth-title, .faq-question, .pc-title, .pc-cta-title {
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.022em;
    color: var(--gt-text);
}

h1, .hero-title { font-weight: 600; line-height: 1.06; }
h2, .section-title { font-weight: 600; line-height: 1.12; }

/* Micro-etichette maiuscole: la cifra stilistica del riferimento */
.section-label,
.chart-stat .stat-label,
.stat-label,
.gt-label {
    font-size: 0.68rem !important;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gt-text-3) !important;
}

/* I numeri grandi vanno leggeri e allineati in colonna */
.stat-value, .price-value, .metric-value, .cost-value, .big-number {
    font-weight: 500 !important;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* ---------- SUPERFICI ---------- */

section { background: transparent; }

.hero, .thesis, .section, .section-white, .section-warm,
.faq-section, .charts-section, .benefits-section, .how-section,
.costs-section, .testimonials-section, .content-section,
.cta-section, .about-section, .risk-warning-section {
    background: var(--gt-ground) !important;
    border-top: 1px solid var(--gt-line);
}

.full-disclaimer-section { background: var(--gt-ground-2) !important; }

/* Pannelli: bordo capello, nessuna ombra pesante, raggio ampio */
.chart-container, .detail-panel, .truth-card, .faq-item,
.cost-card, .benefit-tab, .option-card, .testimonial-video,
.trader-info-box, .pc-strategy, .stat-card, .info-card {
    background: var(--gt-panel) !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: var(--gt-radius) !important;
    box-shadow: none !important;
}

.truth-card:hover, .benefit-tab:hover, .option-card:hover,
.faq-item:hover, .pc-strategy:hover {
    border-color: var(--gt-line-strong) !important;
    background: var(--gt-panel-2) !important;
}

/* ---------- INTESTAZIONE ---------- */

.header {
    background: rgba(8, 8, 10, 0.78) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gt-line) !important;
    box-shadow: none !important;
}

.nav-link {
    color: var(--gt-text-2) !important;
    font-size: 0.86rem;
    letter-spacing: -0.005em;
}

.nav-link:hover { color: var(--gt-text) !important; }

/* Il logo è nero su trasparente: su fondo scuro va invertito */
.logo-img { filter: invert(1) hue-rotate(180deg) saturate(1.1); }

/* ---------- BOTTONI ---------- */

.btn-primary, .header-cta, .hero-cta, .cta-button, .pc-cta-btn, .gate-cta {
    background: var(--gt-blue) !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: var(--gt-radius-pill) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: none !important;
    transition: background 0.18s, transform 0.18s;
}

.btn-primary:hover, .header-cta:hover, .hero-cta:hover,
.cta-button:hover, .pc-cta-btn:hover {
    background: var(--gt-blue-2) !important;
    transform: translateY(-1px);
}

.btn-secondary, .btn-outline {
    background: transparent !important;
    color: var(--gt-text) !important;
    border: 1px solid var(--gt-line-strong) !important;
    border-radius: var(--gt-radius-pill) !important;
}

/* ---------- RIGHE ETICHETTA / VALORE ----------
   Nel riferimento la colonna destra è una lista di coppie separate
   da un filo: niente card dentro card. */

.chart-stats {
    background: transparent !important;
    border: 0 !important;
    gap: 0 !important;
    display: grid !important;
}

.chart-stat {
    background: transparent !important;
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 0 !important;
    border-bottom: 1px solid var(--gt-line);
}

.chart-stat:last-child { border-bottom: 0; }

.chart-stat .stat-value { color: var(--gt-text) !important; font-size: 1.05rem !important; }
.chart-stat .stat-value.positive { color: var(--gt-mint) !important; }
.chart-stat .stat-value.negative { color: var(--gt-red) !important; }

/* ---------- FAQ ---------- */

.faq-item { border-radius: var(--gt-radius-sm) !important; }

.faq-question {
    color: var(--gt-text) !important;
    font-weight: 500 !important;
    font-size: 0.97rem !important;
    letter-spacing: -0.012em;
}

.faq-answer p, .faq-answer { color: var(--gt-text-2) !important; }

.faq-icon {
    color: var(--gt-text-3) !important;
    background: transparent !important;
    border: 1px solid var(--gt-line-strong) !important;
}

/* ---------- SCHEDE E PANNELLI A TAB ---------- */

.benefit-tab.active, .tab-item.active {
    border-color: var(--gt-blue) !important;
    background: var(--gt-panel-2) !important;
}

.tab-num, .truth-num, .step-num, .h-step-num {
    color: var(--gt-blue) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.tab-title, .truth-title { color: var(--gt-text) !important; }

/* ---------- TESTI CORRENTI ---------- */

p, li, .section-subtitle, .panel-text p, .hero-desc,
.performance-disclaimer, .about-text p {
    color: var(--gt-text-2);
}

strong, b { color: var(--gt-text); }

.gold { color: var(--gt-blue) !important; text-shadow: none !important; }

/* ---------- MODULO ---------- */

.form-overlay { background: rgba(4, 4, 6, 0.82) !important; backdrop-filter: blur(10px); }

.form-modal {
    background: var(--gt-panel) !important;
    border: 1px solid var(--gt-line-strong) !important;
    border-radius: var(--gt-radius) !important;
    color: var(--gt-text) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}

.option-card {
    border-radius: var(--gt-radius-sm) !important;
    padding: 0.9rem 1.1rem !important;
}

.option-card.selected, .option-card:has(input:checked) {
    border-color: var(--gt-blue) !important;
    background: rgba(76, 130, 247, 0.1) !important;
}

.option-label { color: var(--gt-text) !important; }

.form-modal input[type="text"],
.form-modal input[type="email"],
.form-modal input[type="tel"] {
    background: var(--gt-ground-2) !important;
    border: 1px solid var(--gt-line) !important;
    border-radius: var(--gt-radius-sm) !important;
    color: var(--gt-text) !important;
}

.form-modal input::placeholder { color: var(--gt-text-3) !important; }

.form-modal input:focus {
    outline: none;
    border-color: var(--gt-blue) !important;
}

.progress-fill, .progress-bar-fill { background: var(--gt-blue) !important; }

/* ---------- AVVERTENZE ---------- */

.risk-warning-section, .risk-box {
    background: rgba(232, 112, 95, 0.05) !important;
    border: 1px solid rgba(232, 112, 95, 0.2) !important;
    border-radius: var(--gt-radius) !important;
}

.risk-banner, .risk-ribbon {
    background: rgba(232, 112, 95, 0.09) !important;
    border-bottom: 1px solid rgba(232, 112, 95, 0.2) !important;
    color: #F0A79B !important;
}

/* ---------- PIÈ DI PAGINA ---------- */

.footer {
    background: var(--gt-ground-2) !important;
    border-top: 1px solid var(--gt-line) !important;
}

.footer-copy, .footer-disclaimer, .full-disclaimer-text p {
    color: var(--gt-text-3) !important;
}

.footer-links a { color: var(--gt-text-2) !important; }
.footer-links a:hover { color: var(--gt-blue) !important; }

/* ---------- GRAFICO ---------- */

.chart-container { padding: 1.5rem !important; }
.chart-canvas { filter: none; }

.price-value { color: var(--gt-text) !important; font-size: 1.35rem !important; }
.price-change.positive { color: var(--gt-mint) !important; }

.verified, .chart-verified {
    background: rgba(88, 211, 174, 0.1) !important;
    border: 1px solid rgba(88, 211, 174, 0.25) !important;
    color: var(--gt-mint) !important;
    border-radius: var(--gt-radius-pill) !important;
}

/* ---------- GATE VIDEO ---------- */

.gate { background: var(--gt-ground) !important; }
.gate-player { border: 1px solid var(--gt-line-strong); border-radius: var(--gt-radius) !important; }
.gate-bar { background: var(--gt-blue) !important; }
.gate-eyebrow { color: var(--gt-blue) !important; border-color: rgba(76, 130, 247, 0.4) !important; }

/* ---------- PAGINA PRE-CALL ---------- */

.pc-hero, .pc-cta {
    background: var(--gt-ground-2) !important;
    border-color: var(--gt-line) !important;
}

.pc-stats {
    background: var(--gt-line) !important;
    border-color: var(--gt-line) !important;
}

.pc-stats > div { background: var(--gt-panel) !important; }
.pc-stats dd { color: var(--gt-text) !important; }
.pc-stats dd.pos { color: var(--gt-mint) !important; }
.pc-stats dd.neg { color: var(--gt-red) !important; }

.pc-strategy-tag { background: rgba(88, 211, 174, 0.12) !important; color: var(--gt-mint) !important; }
.pc-strategy-tag.alt { background: rgba(232, 112, 95, 0.12) !important; color: var(--gt-red) !important; }

.pc-link { color: var(--gt-blue) !important; }

.pc-confirm {
    background: rgba(76, 130, 247, 0.06) !important;
    border-color: rgba(76, 130, 247, 0.28) !important;
    border-radius: var(--gt-radius) !important;
}

.pc-confirm-btn { background: var(--gt-blue) !important; border-radius: var(--gt-radius-pill) !important; }
.pc-confirm-done { color: var(--gt-mint) !important; }

.pc-warning {
    background: rgba(232, 112, 95, 0.05) !important;
    border-color: rgba(232, 112, 95, 0.2) !important;
    border-radius: var(--gt-radius) !important;
}

/* ---------- PAGINE LEGALI ---------- */

.legal-container, .legal-content, .legal-header {
    background: transparent !important;
    color: var(--gt-text-2) !important;
    border-color: var(--gt-line) !important;
}

.legal-title, .legal-content h2, .legal-content h3 { color: var(--gt-text) !important; }
.legal-content a { color: var(--gt-blue) !important; }

.legal-content .highlight-box {
    background: var(--gt-panel) !important;
    border-left-color: var(--gt-blue) !important;
    border-radius: 0 var(--gt-radius-sm) var(--gt-radius-sm) 0 !important;
}

.back-link { color: var(--gt-blue) !important; }

/* ---------- ACCESSIBILITÀ ---------- */

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--gt-blue);
    outline-offset: 2px;
}

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

/* ============================================================
   TESTI EREDITATI IN NERO
   Il foglio originale era pensato su fondo bianco: una ventina di
   regole fissano il testo in nero o quasi. Su fondo scuro sparivano.
   ============================================================ */

.truth-body p,
.faq-answer p,
.detail-h-text p,
.h-step-desc,
.section-subtitle,
.question-subtitle,
.hero-desc,
.input-field label,
.spots-sublabel,
.hero-fineprint,
.panel-text p,
.benefit-desc,
.step-desc,
.card-desc,
.testimonial-text,
.cost-note,
.disclaimer-text {
    color: var(--gt-text-2) !important;
}

.hero-fineprint, .spots-sublabel, .cost-note, .disclaimer-text {
    color: var(--gt-text-3) !important;
}

/* Testo dentro i pulsanti pieni: resta chiaro, il fondo è blu */
.btn-primary, .btn-next, .hero-cta, .hero-cta .cta-text,
.popup-cta, .bottom-nav-item.nav-cta, .bottom-nav-item.nav-cta:hover {
    color: #FFFFFF !important;
}

/* Elementi grafici su pastiglie chiare: il nero ci sta bene */
.chat-bubble.outgoing,
.detail-h-tag,
.flow-node.master,
.detail-h-visual .copy-trade.master,
.pricing-label,
.step-label.active,
.step-label.completed {
    color: #0A0A0C !important;
}

/* ============================================================
   BORDI E SFONDI EREDITATI DAL TEMA CHIARO
   Trentuno regole usavano bordi neri traslucidi e sei uno sfondo
   bianco: su fondo scuro i primi sparivano, i secondi accecavano.
   ============================================================ */

.privacy-checkbox, .form-buttons, .card-stats, .chart-stats,
.chart-data-fields, .footer, .footer-disclaimer {
    border-color: var(--gt-line) !important;
}

.hero-video, .card-inner, .trader-info-box, .testimonial-video,
.chart-card, .benefit-tab, .tab-indicator, .panel-visual,
.detail-h-panel, .detail-h-visual .visual-call, .truth-card,
.truth-icon, .truth-visual, .flow-node.you, .truth-panel,
.faq-item, .cookie-customize-panel, .success-modal,
.bottom-nav, .popup-info {
    border-color: var(--gt-line) !important;
}

.cookie-btn-outline, .play-button::before {
    border-color: var(--gt-line-strong) !important;
}

/* Superfici che erano bianche */
.form-modal, .cookie-banner, .success-modal {
    background: var(--gt-panel) !important;
    color: var(--gt-text) !important;
}

.header { background: rgba(8, 8, 10, 0.78) !important; }
.header.scrolled { background: rgba(8, 8, 10, 0.92) !important; }

/* I riquadri d'avvertenza erano crema: diventano ambra su scuro */
.risk-warning-box, .conflict-box {
    background: rgba(224, 164, 76, 0.07) !important;
    border: 1px solid rgba(224, 164, 76, 0.22) !important;
    color: var(--gt-text-2) !important;
}

.risk-warning-box strong, .conflict-box strong { color: var(--gt-amber) !important; }

/* ============================================================
   SPUNTE DI CONSENSO
   Il bordo era nero al 15% su fondo nero: la casella non si vedeva
   e il visitatore non capiva di doverla spuntare. Bloccava l'invio.
   ============================================================ */

.checkmark {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 2px solid var(--gt-line-strong) !important;
    height: 22px !important;
    width: 22px !important;
    border-radius: 6px !important;
}

.checkbox-container { padding-left: 36px !important; }
.checkbox-container:hover .checkmark { border-color: var(--gt-blue) !important; }

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--gt-blue) !important;
    border-color: var(--gt-blue) !important;
}

/* Il segno di spunta era nero: su fondo blu si leggeva male */
.checkbox-container .checkmark:after {
    border-color: #FFFFFF !important;
    left: 7px !important;
    top: 3px !important;
    width: 5px !important;
    height: 10px !important;
    border-width: 0 2.5px 2.5px 0 !important;
}

/* Il focus da tastiera deve essere visibile: prima non lo era */
.checkbox-container input:focus-visible ~ .checkmark {
    outline: 2px solid var(--gt-blue);
    outline-offset: 3px;
}

.checkbox-text { color: var(--gt-text-2) !important; }
.checkbox-text a { color: var(--gt-blue) !important; }

.input-error { color: var(--gt-red) !important; }

/* ============================================================
   TIPOGRAFIA — MONTSERRAT
   Un unico carattere per tutte le pagine, in tutti i pesi.
   Sovrascrive Inter, Bebas Neue e Playfair Display del vecchio impianto.
   ============================================================ */

html, body,
h1, h2, h3, h4, h5, h6,
p, li, a, span, div, label, button, input, select, textarea,
.section-title, .section-label, .hero-title, .page-title,
.truth-title, .faq-question, .faq-answer, .tab-title,
.pc-title, .pc-cta-title, .legal-title, .logo-text,
.btn-primary, .btn-next, .hero-cta, .stat-value, .price-value,
.sim-value, .sim-big, .gate-title, .gate-cta {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
}

/* Montserrat è più largo di Inter: i titoli hanno bisogno di meno
   tracking negativo e di un'interlinea leggermente più aperta. */
h1, .hero-title { letter-spacing: -0.018em; line-height: 1.1; }
h2, .section-title { letter-spacing: -0.015em; line-height: 1.16; }
h3, .truth-title, .tab-title { letter-spacing: -0.01em; }

/* Le maiuscole spaziate restano la cifra del riferimento, ma con
   Montserrat serve un filo di spaziatura in meno per non slabbrare. */
.section-label, .stat-label, .sim-chart-label,
.sim-summary-label, .sim-field label, .gt-label {
    letter-spacing: 0.13em !important;
    font-weight: 600 !important;
}

.faq-question, .pc-title, .sim-big { font-weight: 600 !important; }

/* ============================================================
   RISPOSTE TAGLIATE
   Gli accordion avevano un'altezza massima fissa (200px le FAQ,
   300px le card "verità") con overflow nascosto: ogni risposta più
   lunga veniva troncata a metà frase. Un valore ampio non taglia
   nulla e mantiene l'animazione di apertura.
   ============================================================ */

.faq-item.active .faq-answer { max-height: 3000px !important; }
.truth-card.active .truth-body { max-height: 3000px !important; }

/* ============================================================
   PANNELLI DEI VANTAGGI — TESTO A FILO DEL BORDO
   Il contenitore ha altezza fissa e il pannello la riempie al 100%:
   con l'interlinea stretta dei titoli la prima riga finiva sopra il
   bordo arrotondato. Serve respiro e altezza libera.
   ============================================================ */

.benefits-detail { min-height: 460px; }

.detail-panel {
    height: auto !important;
    min-height: 100%;
    padding: .5rem .25rem !important;
}

.panel-text { padding-top: .35rem; }

.panel-text h3, .panel-text h4, .detail-h-text h3 {
    line-height: 1.3 !important;
    margin-top: 0 !important;
    padding-top: .15rem;
}

@media (max-width: 900px) {
    .benefits-detail { min-height: auto; }
    .detail-panel { padding: .25rem 0 !important; }
}

/* ---------- VIDEO NELL'HERO ----------
   Il contenitore era stato disegnato per un iframe: un <video>
   senza regole proprie resta alla sua dimensione naturale e viene
   tagliato dai bordi arrotondati. */

.hero-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Il pulsante di riproduzione nativo va reso evidente: con
   preload="none" il browser mostra solo la barra in basso e sembra
   una fotografia. Il poster resta, ma si vede che è un video. */
.hero-video { background: #000; }

/* ---------- PANNELLI VANTAGGI: BOX ESTERNO PIÙ LARGO ---------- */

.benefits-detail {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.detail-panel { padding: .75rem !important; }
.panel-visual { padding: 1.25rem !important; }

@media (max-width: 1240px) {
    .benefits-detail { max-width: 100%; }
}


/* ============================================================
   CORREZIONI DOPO IL CONTROLLO SULLA VERSIONE MOBILE
   ============================================================ */

/* ---------- 1. BARRA DI AVVERTENZA: ERA BIANCO SU BIANCO ----------
   .urgency-bar usava var(--text-primary) come sfondo. Nel tema chiaro
   originale era quasi nero; qui è #F1F2F5, quindi l'avvertenza
   obbligatoria sul rischio risultava invisibile. */
.urgency-bar {
    background: var(--gt-ground-2) !important;
    border-bottom: 1px solid var(--gt-line) !important;
}
.urgency-label { color: var(--gt-text-2) !important; }
.urgency-bar svg { color: var(--gt-amber); }

/* ---------- 2. COOKIE COME POPUP CENTRALE ----------
   Si apre all'arrivo sopra il modulo (z-index 10000), con lo sfondo
   oscurato, cosi' la scelta sui cookie viene fatta per prima e il pixel
   parte gia' dal primo accesso. */
.cookie-banner {
    z-index: 12000 !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(520px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px !important;
    border: 1px solid var(--gt-line-strong) !important;
    border-radius: 18px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.72), 0 24px 60px rgba(0, 0, 0, 0.5) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -46%);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.cookie-banner.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}
.cookie-banner-content {
    flex-direction: column;
    align-items: stretch !important;
    gap: 20px !important;
}
.cookie-text { min-width: 0 !important; }
.cookie-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cookie-actions #cookieAccept {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Rifiuta e Personalizza avevano un bordo al 14% di opacità: invisibili
   accanto alla pillola blu di Accetta. Squilibrio anche ai fini GDPR. */
.cookie-btn-outline {
    border-color: rgba(255, 255, 255, 0.45) !important;
    background: var(--gt-panel-2) !important;
    color: var(--gt-text) !important;
}

/* ---------- 3. ELEMENTI DISEGNATI IN NERO SU NERO ---------- */
.number-circle .bg { stroke: var(--gt-line-strong) !important; }
.indicator-dot { background: var(--gt-line-strong) !important; }
.testimonials-grid::-webkit-scrollbar-thumb { background: var(--gt-line-strong) !important; }
.panel-visual { color: var(--gt-text); }

/* Cornice bianca da 4px attorno alla foto di "Chi sono" */
.about-img {
    border: 1px solid var(--gt-line) !important;
    outline: none !important;
}

/* Numeri degli step: la regola puntava a .h-step-num, classe che
   nell'HTML non esiste (si chiama .h-node-num). */
.h-node-num { color: var(--gt-text-2) !important; }
.h-node.active .h-node-num { color: var(--gt-blue) !important; }

/* ---------- 4. LINK SENZA COLORE ESPLICITO ----------
   Non esisteva nessuna regola generica su <a>: i link dentro le FAQ
   cadevano sul blu di default del browser, illeggibile sul nero. */
.faq-answer a,
.truth-body a,
.pc-faq a { color: var(--gt-blue-2) !important; text-decoration: underline; }

/* ---------- 5. PULSANTE PRIMARIO USATO SU UN <a> ----------
   .btn-primary non dichiarava display: su un <a> il testo andava a capo
   e lo sfondo si spezzava in due blocchi sfalsati. */
a.btn-primary,
a.btn-secondary {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

/* ---------- 6. ANCORE CHE ATTERRANO SOTTO L'HEADER FISSO ---------- */
section[id] { scroll-margin-top: 130px; }

/* ---------- 7. AREE DI TOCCO ---------- */
.modal-close { min-width: 44px; min-height: 44px; }
.btn-back, .btn-next, .cookie-btn { min-height: 44px; }
.footer-links a { display: inline-block; padding: 10px 4px; }

/* ---------- 8. CAMPI DEL MODULO: IOS INGRANDIVA LA PAGINA ----------
   Sotto i 16px Safari zooma automaticamente al focus e il modale,
   essendo fixed, esce dallo schermo. */
@media (max-width: 768px) {
    .form-input,
    .form-input:focus,
    select.form-input,
    textarea.form-input { font-size: 16px !important; }
}

/* ---------- 9. LAYOUT MOBILE ---------- */
@media (max-width: 768px) {
    /* 100px sopra e sotto per otto sezioni = circa 1600px di scroll vuoto */
    section { padding-top: 56px !important; padding-bottom: 56px !important; }

    /* L'override del tema sistemava colori e bordi ma lasciava due colonne */
    .chart-stats { grid-template-columns: 1fr !important; }

    /* I titoli e le descrizioni degli step non venivano mai ridotti:
       le regole mobile puntavano a classi rinominate da tempo. */
    .h-step-title { font-size: 1.02rem !important; }
    .h-step-desc  { font-size: .82rem !important; line-height: 1.55 !important; }
    .tab-title    { font-size: .92rem !important; }
    .cta-text     { font-size: .9rem !important; }

    /* Il pannello di dettaglio stava sopra i tab che lo comandano:
       toccando una voce il contenuto cambiava fuori schermo. */
    .benefits-nav    { order: 1 !important; }
    .benefits-detail { order: 2 !important; }
}

@media (max-width: 480px) {
    /* L'hero perdeva tutto il padding laterale mentre il resto ne aveva 12px */
    .hero-container { padding: 0 12px !important; }

    /* Tre colonne da 112px con etichette di 30 caratteri: muro di testo */
    .hero-numbers { grid-template-columns: 1fr !important; }
}

/* ---------- 10. MODALE DEL MODULO FUORI SCHERMO SU IOS ----------
   .form-modal usava calc(100vh - 60px): su iOS 100vh è l'altezza SENZA
   le barre del browser, quindi il fondo del modale — e con esso i
   pulsanti Avanti/Invia — finiva sotto il bordo visibile. Con il body
   bloccato le barre non si ritraggono mai e il funnel si fermava lì. */
@media (max-width: 768px) {
    .form-modal {
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
    }

    /* I pulsanti restano sempre raggiungibili in fondo alla scatola */
    .form-buttons {
        position: sticky;
        bottom: 0;
        background: var(--gt-panel);
        padding-top: .75rem;
        margin-top: .5rem;
        z-index: 2;
    }
}

/* ---------- 11. NOTA DI TRASPARENZA IN "CHI SONO" ----------
   Precisazione sui ruoli: va letta, ma non deve pesare quanto il
   racconto sopra. Corpo piu' piccolo e colore piu' tenue, restando
   comunque sopra la soglia di leggibilita'. */
.about-text.about-nota {
    font-size: .75rem !important;   /* 12px: il corpo intorno e' 16,8px */
    line-height: 1.65;
    color: var(--gt-text-2) !important;
    margin-top: 1.4rem;
    opacity: .9;
}

@media (max-width: 768px) {
    /* Non si scende sotto i 12px: e' una precisazione sui ruoli e
       deve restare leggibile, non diventare un carattere in ombra. */
    .about-text.about-nota { font-size: .75rem !important; }
}

/* ---------- 12. ETICHETTE SOTTO IL GRAFICO ----------
   Tre righe incolonnate: tipo di strategia, nome commerciale e sotto
   il link allo storico. Prima erano affiancate su due colonne e a
   360px "Strategia Conservativa" andava a capo tre volte. */
.chart-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1rem .5rem;
}

.chart-stat .stat-label {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-bottom: 0 !important;
}

.chart-stat .stat-brand {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--gt-text) !important;
    text-transform: none;
}

.chart-stat .stat-value {
    font-size: .82rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- CANALE TELEGRAM NEL MESSAGGIO DI SUCCESSO ----------
   Compare solo dopo l'invio del modulo: il lead e' gia' acquisito,
   quindi il canale non gli toglie attenzione. */
.success-telegram {
    border-top: 1px solid var(--gt-line);
    padding-top: 20px;
    margin: 0 0 18px;
}
.success-telegram-text {
    color: var(--gt-text-2);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 14px;
}
.success-telegram-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
#closeSuccessModal {
    width: 100%;
    min-height: 44px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.testimonials-telegram .btn-secondary {
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 44px;
}
.testimonials-telegram .btn-secondary:hover { border-color: var(--gt-text-2) !important; }

/* ---------- SEZIONE CANALE TELEGRAM (dopo l'avvertenza sui rischi) ---------- */
.telegram-section {
    padding: 20px 0 60px;
    background: transparent;
}
.telegram-card {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    background: var(--gt-panel);
    border: 1px solid var(--gt-line-strong);
    border-radius: var(--gt-radius);
}
.telegram-logo {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #229ED9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.telegram-logo svg { width: 30px; height: 30px; margin-left: -3px; }
.telegram-copy { flex: 1; min-width: 0; }
.telegram-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gt-text);
    margin: 0 0 6px;
    line-height: 1.3;
}
.telegram-text {
    color: var(--gt-text-2);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}
.telegram-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: var(--gt-radius-pill);
    background: #229ED9;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.telegram-btn svg { width: 18px; height: 18px; }
.telegram-btn:hover { background: #1B8BC2; transform: translateY(-1px); }

@media (max-width: 700px) {
    .telegram-card {
        flex-direction: column;
        text-align: center;
        padding: 26px 22px;
        gap: 16px;
    }
    .telegram-btn { width: 100%; }
}

/* ---------- FOOTER: link su una riga, vanno a capo interi ----------
   Con cinque link le voci si spezzavano a meta' ("Privacy / Policy"). */
.footer-content { gap: 16px 32px; flex-wrap: wrap; }
.footer-links { flex-wrap: wrap; gap: 4px 22px !important; }
.footer-links a { white-space: nowrap; }