/* ============================================================
   premium.css — "Quant terminal, institutional restraint"
   Layer additivo (dopo style.css + enhance.css). Riusa i token brand.
   Lineage: Linear / Mercury / Stripe. Niente cyberpunk.
   ============================================================ */

/* ---- cifre da terminale: mono + tabular (niente jitter sul count-up) ---- */
.hero-stat .num, .metric .v, .metric .v *{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- H1 oversized + kinetic ---- */
.hero h1{font-size:clamp(2.7rem,7vw,5rem);line-height:.98;letter-spacing:-.026em}
.hero-sub{max-width:640px}

/* ---- superfici "tile" premium: bordo luminoso + inset highlight + gradiente ---- */
.strat, .val, .callout, .hero-stat, .disclaimer{
  border-color:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 40px -28px rgba(0,0,0,.8);
}
.hero-stat{background:linear-gradient(160deg,rgba(19,34,77,.7),rgba(12,21,48,.6))}
.strat{background:linear-gradient(165deg,#101c40,#0b1430)}
.strat.feature{background:linear-gradient(150deg,#152552,#0e1a3e)}

/* ---- BENTO: strategie (asimmetrico) ---- */
.strat-grid.bento{grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,auto);align-items:stretch}
.strat-grid.bento .strat{grid-column:span 6}
.strat-grid.bento .strat.feature{grid-column:span 8;grid-row:span 2}
.strat-grid.bento .strat.feature .strat-metrics{grid-template-columns:repeat(4,1fr)}

/* ---- BENTO: metodo (2 tile forti piu' grandi) ---- */
.val-grid.bento{grid-template-columns:repeat(12,1fr)}
.val-grid.bento .val{grid-column:span 3}
.val-grid.bento .val:nth-child(1),.val-grid.bento .val:nth-child(4){grid-column:span 6}

/* ---- MESH aurora multi-blob (upgrade hero-bg) ---- */
.hero-bg{
  background:
    radial-gradient(42vw 42vw at 16% 26%, rgba(59,157,216,.32), transparent 60%),
    radial-gradient(40vw 40vw at 84% 20%, rgba(111,194,239,.22), transparent 60%),
    radial-gradient(48vw 48vw at 62% 92%, rgba(30,58,138,.40), transparent 62%),
    radial-gradient(26vw 26vw at 90% 74%, rgba(232,181,75,.10), transparent 60%) !important;
  filter:blur(26px);will-change:transform;
  animation:meshDrift 26s ease-in-out infinite alternate !important;
}
@keyframes meshDrift{0%{transform:translate3d(-2%,-1.5%,0) scale(1.06)}100%{transform:translate3d(2.5%,1.5%,0) scale(1.13)}}

/* ---- GRAIN overlay (anti-banding, statico) ---- */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}

/* ---- GLOW-BORDER (flagship + CTA). Base statica; animata via .anim-border (JS-gated) ---- */
.glow-border{position:relative;isolation:isolate}
.glow-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;z-index:-1;
  background:linear-gradient(125deg,var(--azure),rgba(111,194,239,.2) 40%,var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.anim-border::before{background:conic-gradient(from var(--pa,0deg),var(--azure),transparent 22%,var(--gold) 50%,transparent 78%,var(--azure));
  animation:paSpin 11s linear infinite}
.btn-primary.anim-border::before{animation-duration:6s}
@keyframes paSpin{to{--pa:360deg}}

/* ---- 3D tilt (base; valori da JS) ---- */
.strat{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.tilt-on{transition:transform .08s linear}
.strat *{transform:translateZ(0)}

/* ---- magnetic CTA (transition gestita; transform da JS) ---- */
.magnetic{transition:transform .25s cubic-bezier(.2,.7,.2,1),filter .2s,box-shadow .2s}

/* ---- pull-quote editoriale (Mercury-style) ---- */
.pull{padding:70px 0}
.pullquote{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1.3;color:var(--txt);max-width:900px;margin:0 auto;
  text-align:center;letter-spacing:-.01em}
.pullquote .q{color:var(--azure);opacity:.7}
.pull cite{display:block;text-align:center;margin-top:18px;font-family:var(--mono);font-style:normal;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}

/* ---- live status pill in navbar ---- */
.nav-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);padding:5px 11px;border-radius:30px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.nav-live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);
  animation:pulse 2.4s ease-out infinite}

/* glass solo dove serve (navbar gia' lo ha) — fallback trasparenza ridotta */
@media (prefers-reduced-transparency:reduce){
  .navbar{background:#0a1024!important;backdrop-filter:none!important}
}

/* ---- guardia motion estesa a TUTTI i nuovi effetti ---- */
@media (prefers-reduced-motion:reduce){
  .hero-bg{animation:none!important}
  .anim-border::before{animation:none!important}
  .nav-live .dot{animation:none!important}
  .strat,.magnetic{transition:none!important;transform:none!important}
}

/* ---- responsive bento ---- */
@media(max-width:900px){
  .strat-grid.bento,.val-grid.bento{grid-template-columns:1fr}
  .strat-grid.bento .strat,.strat-grid.bento .strat.feature{grid-column:auto;grid-row:auto}
  .val-grid.bento .val,.val-grid.bento .val:nth-child(1),.val-grid.bento .val:nth-child(4){grid-column:auto}
  .strat-grid.bento .strat.feature .strat-metrics{grid-template-columns:repeat(2,1fr)}
}