/* ============================================================
   neo.css — RE-SKIN futuristico (caricato per ULTIMO, vince sul resto)
   Palette: near-black + ciano elettrico + viola/indaco. Font: Space Grotesk.
   Neon glow, glass, aurora vivida. Trasformazione visiva netta.
   ============================================================ */
:root{
  --bg:#060814; --bg-2:#0a0e20; --bg-3:#0e1430; --panel:#0b1026; --panel-2:#111a3c;
  --border:#1b2348; --border-2:#2c3870;
  --navy:#6366f1;            /* indaco elettrico */
  --azure:#22d3ee;           /* ciano — accento primario */
  --azure-bright:#67e8f9;
  --gold:#f5b748;            /* ambra: SOLO card Gold (metallo) */
  --green:#34d399; --red:#fb7185;
  --txt:#eaf0ff; --txt-2:#a6b2e2; --txt-3:#6b78ad; --txt-faint:#414b78;
  --neon-c:#22d3ee; --neon-v:#a855f7;
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
body{background:var(--bg)}

/* ---- font display futuristico ---- */
h1,h2,h3,.hero h1,.sec-head h2,.about-body h2,.strat h3,.contact h2,.callout h2{
  font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.03em;font-weight:700}
.hero h1{font-weight:600}
.logo-text{font-family:'Space Grotesk',sans-serif}

/* ---- headline gradient ciano->viola (background-IMAGE per non resettare il clip-text) ---- */
.gradient{background-image:linear-gradient(110deg,#22d3ee,#a855f7 52%,#22d3ee)!important;
  background-size:220% auto;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important}

/* ---- AURORA vivida ciano/viola/indaco ---- */
.hero-bg{
  background:
    radial-gradient(44vw 44vw at 13% 22%, rgba(34,211,238,.34), transparent 60%),
    radial-gradient(42vw 42vw at 87% 16%, rgba(168,85,247,.30), transparent 60%),
    radial-gradient(52vw 52vw at 60% 98%, rgba(99,102,241,.40), transparent 62%),
    radial-gradient(24vw 24vw at 92% 70%, rgba(34,211,238,.18), transparent 60%) !important;
  filter:blur(24px)!important}
.hero::before{background:conic-gradient(from 0deg at 50% 50%,
  rgba(34,211,238,.26), rgba(99,102,241,0) 22%, rgba(168,85,247,.20) 48%,
  rgba(34,211,238,0) 64%, rgba(103,232,249,.24) 84%, rgba(34,211,238,.26))!important}
.hero::after{background:radial-gradient(60% 50% at 72% 22%,rgba(168,85,247,.20),transparent 60%)!important}
.hero-grid{background-image:linear-gradient(rgba(99,110,241,.16) 1px,transparent 1px),
  linear-gradient(90deg,rgba(99,110,241,.16) 1px,transparent 1px)!important}
/* canvas WebGL 3D a TUTTA PAGINA (background fisso dietro ogni sezione) */
html{background:var(--bg)} body{background:transparent}
#bg3d{position:fixed;inset:0;z-index:-1;width:100vw;height:100vh;display:none;pointer-events:none}
body.has-3d #bg3d{display:block}
body.has-3d #heroCanvas{display:none}
/* scrim leggibilità: il 3D traspare appena dietro le sezioni, il testo resta nitido */
body.has-3d .sec{background:rgba(7,9,20,0.78)}
body.has-3d .sec.bg-alt{background:linear-gradient(180deg,rgba(7,9,20,0.70),rgba(10,14,34,0.80))}
body.has-3d footer{background:rgba(7,9,20,0.80)}
body.has-3d .hero-bg{opacity:.55}   /* nell'hero lascia respirare il 3D */

/* ---- GLASS tiles + bordo neon ---- */
.strat,.val,.hero-stat,.callout{
  background:linear-gradient(165deg,rgba(20,26,60,.62),rgba(10,14,32,.55))!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(120,180,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(180,210,255,.10), 0 14px 44px -28px rgba(0,0,0,.85)!important}
.strat.feature{background:linear-gradient(150deg,rgba(34,40,90,.66),rgba(12,16,40,.6))!important}
.strat:hover,.val:hover{border-color:rgba(34,211,238,.4)!important;
  box-shadow:inset 0 1px 0 rgba(180,210,255,.12), 0 0 34px -10px rgba(34,211,238,.35), var(--shadow)!important}
@media (prefers-reduced-transparency:reduce){
  .strat,.val,.hero-stat,.callout{backdrop-filter:none!important;background:#0c1130!important}
}

/* ---- top accent delle card -> ciano/viola ---- */
.strat::before{background:linear-gradient(90deg,var(--neon-c),var(--neon-v))!important}
.strat.gold::before{background:linear-gradient(90deg,#b8862f,var(--gold))!important}

/* ---- glow-border neon ---- */
.glow-border::before{background:linear-gradient(125deg,var(--neon-c),var(--neon-v))!important}
.anim-border::before{background:conic-gradient(from var(--pa,0deg),
  var(--neon-c),transparent 20%,var(--neon-v) 50%,transparent 80%,var(--neon-c))!important}
.strat.feature.glow-border{box-shadow:inset 0 1px 0 rgba(180,210,255,.12), 0 0 50px -16px rgba(34,211,238,.45)!important}

/* ---- CTA / nav neon ---- */
.btn-primary,.nav-cta{
  background:linear-gradient(135deg,var(--navy),var(--azure))!important;color:#02121a!important;font-weight:600;
  box-shadow:0 0 22px -6px rgba(34,211,238,.6), 0 10px 30px -12px rgba(99,102,241,.7)!important}
.btn-primary:hover,.nav-cta:hover{box-shadow:0 0 34px -4px rgba(34,211,238,.8), 0 12px 34px -10px rgba(168,85,247,.7)!important}
.btn-ghost:hover{border-color:var(--azure)!important;box-shadow:0 0 22px -10px rgba(34,211,238,.6)}
.contact-email:hover{border-color:var(--azure)!important;box-shadow:0 0 30px -10px rgba(34,211,238,.5)!important}

/* ---- accenti testo / eyebrow / metriche ---- */
.eyebrow,.strat-tag{color:var(--azure)}
.metric .v.az{color:var(--azure)} .metric .v.pos{color:var(--green)}
.val .ico{background:rgba(34,211,238,.12);color:var(--azure);
  box-shadow:0 0 18px -6px rgba(34,211,238,.5)}
.val:hover .ico{background:rgba(168,85,247,.16);color:#c4b5fd}
.stat{color:var(--azure)!important}
.hero-stat .num span{color:var(--azure)}
.logo-mark{background:linear-gradient(135deg,var(--navy),var(--azure))!important;color:#02121a;
  box-shadow:0 0 16px -4px rgba(34,211,238,.6)}

/* ---- section glow ciano/viola ---- */
.sec.bg-alt::before,#strategies::before{
  background:radial-gradient(680px 380px at 85% 8%,rgba(34,211,238,.08),transparent 60%),
            radial-gradient(560px 360px at 12% 30%,rgba(168,85,247,.07),transparent 60%)!important}

/* ---- pull-quote accent ---- */
.pullquote .q{color:var(--azure);opacity:.8}

/* ---- scroll progress neon ---- */
.scroll-progress{background:linear-gradient(90deg,var(--neon-c),var(--neon-v),var(--neon-c))!important}

/* ---- ABOUT ridisegnato (niente quadrato segnaposto) ---- */
.about-head{max-width:780px;margin-bottom:38px}
.about-head h2{font-size:clamp(2.1rem,4.6vw,3.3rem);margin-top:10px}
.about-head .about-role{font-family:var(--mono);color:var(--azure);font-size:.82rem;
  letter-spacing:.06em;margin-top:12px;opacity:.9}
.about-cols{display:block;max-width:880px}
.about-text p{color:var(--txt-2);margin-bottom:16px;font-size:1.03rem;line-height:1.7}
.about-text .about-tags{margin-top:26px}
.about-facts{display:flex;flex-direction:column;gap:13px;position:sticky;top:96px}
.about-facts .fact{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:15px;
  background:linear-gradient(160deg,rgba(20,26,60,.62),rgba(10,14,32,.5));
  border:1px solid rgba(120,180,255,.13);
  box-shadow:inset 0 1px 0 rgba(180,210,255,.10), 0 12px 36px -26px rgba(0,0,0,.8);
  transition:.25s cubic-bezier(.2,.7,.2,1)}
.about-facts .fact:hover{border-color:rgba(34,211,238,.4);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(180,210,255,.12), 0 0 30px -12px rgba(34,211,238,.4)}
.about-facts .fn{font-family:var(--mono);font-weight:700;font-size:1.7rem;line-height:1;
  color:var(--azure);font-variant-numeric:tabular-nums;min-width:64px;text-align:right;
  text-shadow:0 0 18px rgba(34,211,238,.45)}
.about-facts .fl{font-size:.85rem;color:var(--txt-2);line-height:1.35}
@media(max-width:900px){.about-cols{grid-template-columns:1fr}.about-facts{position:static}}

/* ---- RESULTS: grafico 3D + tabella scenari ---- */
#results .chart3d-wrap, #results-gold .chart3d-wrap, #results-systemb .chart3d-wrap{position:relative;height:440px;margin-bottom:36px;border-radius:18px;
  background:radial-gradient(60% 75% at 50% 100%,rgba(34,211,238,.06),transparent 70%);
  border:1px solid rgba(120,180,255,.07)}
#results-gold .chart3d-wrap{background:radial-gradient(60% 75% at 50% 100%,rgba(245,183,72,.07),transparent 70%)}
#chart3d, #chart3d-gold, #chart3d-systemb{width:100%;height:100%;display:block}
#results-gold .chart3d-legend b{color:var(--gold,#f5b748)}
.chart3d-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:8px;
  font-family:var(--mono);font-size:.78rem;color:var(--txt-3)}
.chart3d-legend b{color:var(--green);font-weight:600}
.chart3d-note{text-align:center;font-size:.76rem;color:var(--txt-3);margin-top:10px;font-style:italic}
.res-table{max-width:880px;margin:0 auto}
.res-table table{width:100%;border-collapse:collapse;font-size:.92rem;border:1px solid var(--border);
  border-radius:14px;overflow:hidden;background:linear-gradient(160deg,rgba(20,26,60,.5),rgba(10,14,32,.45))}
.res-table th{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-2);background:rgba(255,255,255,.04);text-align:right;padding:12px 16px;font-weight:600}
.res-table th:first-child{text-align:left}
.res-table td{padding:12px 16px;text-align:right;color:var(--txt);border-top:1px solid var(--border);
  font-variant-numeric:tabular-nums;font-family:var(--mono)}
.res-table td:first-child{text-align:left;font-family:var(--ff);color:var(--txt-2)}
.res-table tr.hl td{background:rgba(34,211,238,.08)}
.res-table td.cfg{vertical-align:middle;line-height:1.25}
.cfg-name{display:inline-flex;align-items:center;gap:9px;color:var(--txt);font-weight:600;font-size:.96rem}
.cfg-sub{display:block;font-family:var(--mono);font-size:.67rem;color:var(--txt-3);margin-top:4px;letter-spacing:.02em;text-transform:none}
.reco{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:#03121a;
  background:linear-gradient(135deg,var(--azure),#7fe9ff);padding:3px 8px;border-radius:20px;font-weight:700;white-space:nowrap;
  box-shadow:0 0 14px -4px rgba(34,211,238,.7)}
.res-table td.pos{color:var(--green)}
.res-table td.az{color:var(--azure)}
.res-table tr.hl .cfg-name{color:var(--azure)}
.res-glossary{font-size:.8rem;color:var(--txt-2);line-height:1.75;margin:18px auto 0;max-width:880px}
.res-glossary b{color:var(--txt);font-weight:600}
.res-caveat{font-size:.74rem;color:var(--txt-3);margin-top:12px;line-height:1.6;font-style:italic;max-width:880px;margin-left:auto;margin-right:auto}
.res-table .ml{display:none}   /* etichette per-cella: solo su mobile */

/* ---- legenda annuale: nascosta quando il grafico 3D è attivo (evita doppione) ---- */
.chart3d-wrap.chart-ready .chart3d-legend{display:none}

/* ---- FIX menu mobile: pannello full-width a comparsa, opaco, leggibile ----
   (la navbar ha backdrop-filter → crea containing-block: niente bottom:0) */
@media(max-width:920px){
  .nav-links{
    top:70px !important; left:0 !important; right:0 !important; bottom:auto !important;
    width:auto !important; height:auto !important; flex-direction:column; align-items:stretch !important;
    gap:2px !important; padding:14px 24px 22px !important;
    background:#090e22 !important; border-left:none !important; border-bottom:1px solid var(--border-2);
    box-shadow:0 28px 60px -20px rgba(0,0,0,.92);
    transform:translateY(-140%) !important; transition:transform .34s cubic-bezier(.2,.7,.2,1) !important; z-index:95}
  .nav-links.open{transform:translateY(0) !important}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:13px 4px;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav-cta{justify-content:center;margin-top:10px}
  .nav-live{justify-content:center;margin-top:6px}
  .lang-toggle{align-self:center;margin-top:10px}
}

/* ---- FIX tabella su mobile: ogni riga diventa una card leggibile ---- */
@media(max-width:600px){
  #results .chart3d-wrap, #results-gold .chart3d-wrap, #results-systemb .chart3d-wrap{height:300px}
  .res-table table,.res-table thead,.res-table tbody{display:block}
  .res-table thead{display:none}
  .res-table tr{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:start;
    border:1px solid var(--border);border-radius:14px;padding:15px 16px;margin-bottom:12px;
    background:linear-gradient(160deg,rgba(20,26,60,.55),rgba(10,14,32,.5))}
  .res-table tr.hl{border-color:rgba(34,211,238,.42)}
  .res-table td{display:flex;flex-direction:column;gap:3px;text-align:left !important;padding:0 !important;border:none !important;background:none !important}
  .res-table td.cfg{grid-column:1 / -1;padding-bottom:11px !important;border-bottom:1px solid var(--border) !important}
  .res-table .ml{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3)}
  .res-table .cv{font-family:var(--mono);font-size:1.12rem;font-weight:600;font-variant-numeric:tabular-nums}
}

/* ---- badge / live dot ---- */
.hero-badge{border-color:rgba(34,211,238,.25)!important}
.nav-live .dot,.hero-badge .dot{background:var(--green);box-shadow:0 0 10px var(--green)}