/* ══════════════════════════════════════════════════════════════════════════
   PROXIMA · px-launch.css   [PXL-2026-09-10]
   Layer di lancio. Va caricato PER ULTIMO in ogni pagina.

   Contiene cinque cose:
     1. Sistema di movimento    — una sola curva, una sola grammatica
     2. Correzioni performance  — proprietà che non toccano il layout
     3. Accessibilità           — skip link, focus, target, contrasto
     4. Cookie banner           — stile del consenso
     5. Pagine legali e FAQ     — privacy, termini, domande

   Regola che tiene insieme tutto: si animano solo `transform` e `opacity`.
   Ogni animazione su `left`, `height`, `box-shadow`, `filter` o `width`
   costringe il browser a rifare layout o paint a ogni frame, ed è da lì che
   veniva lo scatto.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Una curva sola per tutto ciò che entra in scena. Decelerazione lunga:
     è quello che fa leggere un movimento come "costoso" invece che "veloce". */
  --px-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  /* Per ciò che risponde al dito o al mouse: partenza pronta, arrivo morbido. */
  --px-ease-ui: cubic-bezier(0.32, 0.72, 0, 1);

  --px-dur-micro: 160ms;   /* stati: hover, focus, press          */
  --px-dur-ui:    280ms;   /* elementi che si aprono o si chiudono */
  --px-dur-enter: 820ms;   /* ingressi allo scroll                */

  --px-lift: -5px;         /* sollevamento standard delle card    */
}

/* ══════════════════════════════════════════════════════════════════════════
   1 · SISTEMA DI MOVIMENTO
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Reveal allo scroll ────────────────────────────────────────────────────
   Prima: 16px in 700ms con curva piatta → si vedeva "scattare" al traguardo.
   Ora: corsa più lunga con decelerazione esponenziale, più un filo di scala.
   Il movimento arriva in porto invece di fermarsi.                          */
.px-reveal{
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(0.985);
  transition:
    opacity   var(--px-dur-enter) var(--px-ease-entrance),
    transform var(--px-dur-enter) var(--px-ease-entrance);
}
.px-reveal.in{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
/* will-change solo finché serve: tenerlo sempre acceso su decine di elementi
   costringe il browser a mantenere altrettanti layer di composizione. */
.px-reveal:not(.in){ will-change: opacity, transform; }
.px-reveal.in{ will-change: auto; }

/* ── Cascata dentro le griglie ─────────────────────────────────────────────
   Gli elementi affiancati non devono entrare tutti insieme: 70ms di sfasatura
   bastano a leggerli come una sequenza invece che come un blocco.            */
.px-fmt-grid   > .px-reveal:nth-child(2),
.px-consult-grid > .px-reveal:nth-child(2),
.px-foot-grid  > .px-reveal:nth-child(2){ transition-delay: 70ms; }
.px-fmt-grid   > .px-reveal:nth-child(3),
.px-consult-grid > .px-reveal:nth-child(3),
.px-foot-grid  > .px-reveal:nth-child(3){ transition-delay: 140ms; }
.px-fmt-grid   > .px-reveal:nth-child(4),
.px-consult-grid > .px-reveal:nth-child(4),
.px-foot-grid  > .px-reveal:nth-child(4){ transition-delay: 210ms; }

/* ── Split reveal delle parole (H1) ───────────────────────────────────────
   Stessa curva del resto, corsa un po' più lunga: è la prima cosa che si vede
   e regge un tempo maggiore.                                                */
.px-split > span{
  transition: transform 940ms var(--px-ease-entrance);
}

/* ── Flip delle cifre ──────────────────────────────────────────────────────
   rotateX(90deg) era troppo: il numero spariva del tutto e poi sbatteva.     */
.px-flip{
  transform: perspective(900px) rotateX(58deg);
  transform-origin: bottom center;
  opacity: 0;
  transition:
    transform 760ms var(--px-ease-entrance),
    opacity   520ms var(--px-ease-entrance);
}
.px-flip.in{ transform: perspective(900px) rotateX(0deg); opacity: 1; }

/* ── CTA ───────────────────────────────────────────────────────────────────
   Il glow pulsava all'infinito animando box-shadow: repaint continuo su un
   elemento sempre a schermo, e un pulsante che lampeggia da solo legge come
   banner pubblicitario. Il bagliore ora è una pseudo-elemento in opacity,
   fermo finché non lo si tocca.                                             */
.px-cta-glow{
  animation: none !important;
  position: relative;
  transition:
    transform  var(--px-dur-micro) var(--px-ease-ui),
    box-shadow var(--px-dur-ui)    var(--px-ease-ui),
    filter     var(--px-dur-ui)    var(--px-ease-ui);
}
.px-cta-glow::before{
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: 0 10px 34px -10px rgba(106,69,255,0.75);
  opacity: 0;
  transition: opacity var(--px-dur-ui) var(--px-ease-ui);
  pointer-events: none;
  z-index: -1;
}
.px-cta-glow:hover{ transform: translateY(-2px) scale(1.015); }
.px-cta-glow:hover::before{ opacity: 1; }
.px-cta-glow:active{ transform: translateY(0) scale(0.985); transition-duration: 80ms; }

/* La sciabolata di luce sul CTA: da `left` a `transform`.
   Identica a vedersi, ma senza layout a ogni frame.                          */
.px-cta-glow::after{
  left: 0 !important;
  width: 46%;
  transform: translateX(-160%) skewX(-18deg);
  transition: transform 720ms var(--px-ease-ui) !important;
}
.px-cta-glow:hover::after{ transform: translateX(320%) skewX(-18deg); }

/* ── Scanner sul ticker ────────────────────────────────────────────────────
   Anche qui `left` animato all'infinito → ora translateX.                    */
.px-scan::after{
  left: 0 !important;
  animation: px-scanmove-t 4.2s cubic-bezier(0.45,0,0.55,1) infinite !important;
}
@keyframes px-scanmove-t{
  0%   { transform: translateX(-120px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(102vw);  opacity: 0; }
}

/* ── Ticker ────────────────────────────────────────────────────────────────
   Un filo più lento e con maschera ai bordi: entra ed esce sfumando invece di
   essere tagliato di netto dal bordo della sezione.                          */
.px-ticker{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.px-ticker-track{ animation-duration: 42s !important; }
.px-ticker:hover .px-ticker-track{ animation-play-state: paused; }

/* ── Blob ambientali ───────────────────────────────────────────────────────
   Animare `border-radius` su un elemento con blur(52px) significa ricalcolare
   una sfocatura enorme a ogni frame. La forma resta, il morphing no: si muove
   solo con transform, che la GPU gestisce gratis.                            */
.px-blob{
  animation-name: pxLiquidT !important;
  animation-duration: 26s !important;
  filter: blur(60px);
  will-change: transform;
}
.px-blob-2{ animation-duration: 34s !important; }
@keyframes pxLiquidT{
  0%   { transform: translate3d(0,0,0)        rotate(0deg)  scale(1);    }
  50%  { transform: translate3d(28px,-22px,0) rotate(8deg)  scale(1.08); }
  100% { transform: translate3d(-16px,18px,0) rotate(-6deg) scale(0.96); }
}

/* ── Card ──────────────────────────────────────────────────────────────────
   Sollevamento leggermente maggiore, curva unica, ombra che accompagna.      */
.px-consult-grid .glass-dark{
  transition:
    transform  420ms var(--px-ease-ui),
    box-shadow 420ms var(--px-ease-ui),
    border-color 420ms var(--px-ease-ui) !important;
}
.px-consult-grid .glass-dark:hover{
  transform: translate3d(0, var(--px-lift), 0) !important;
  box-shadow: 0 26px 60px -22px rgba(0,0,0,0.62) !important;
}
.px-fmt{ transition: transform 420ms var(--px-ease-ui), box-shadow 420ms var(--px-ease-ui) !important; }
.px-fmt:hover{ transform: translate3d(0, var(--px-lift), 0); }

/* Il tilt aveva una transition su transform mentre il JS scriveva transform a
   ogni frame: le due cose si combattevano ed è una delle ragioni per cui la
   card sembrava "in ritardo" sul mouse. Ora il JS interpola da sé. */
.px-tilt{ transition: box-shadow 420ms var(--px-ease-ui) !important; }
.px-tilt-layer{ transition: none !important; }

/* ── Nav ───────────────────────────────────────────────────────────────────
   Blur 40px su un elemento fisso viene ridipinto a ogni scroll: costo alto e
   costante. 22px è indistinguibile a occhio e molto più leggero.             */
nav.glass-strong{
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
          backdrop-filter: blur(22px) saturate(180%) !important;
  background: rgba(251,250,253,0.72) !important;
  transition:
    padding      var(--px-dur-ui) var(--px-ease-ui),
    background   var(--px-dur-ui) var(--px-ease-ui),
    border-color var(--px-dur-ui) var(--px-ease-ui),
    box-shadow   var(--px-dur-ui) var(--px-ease-ui) !important;
  box-shadow: 0 1px 0 rgba(42,39,51,0.05), 0 10px 30px -22px rgba(42,39,51,0.35);
}
/* Link della nav: sottolineatura che cresce invece del solo cambio colore. */
.px-navlinks a[href]{ position: relative; }
.px-navlinks a[href]:not(.px-cta-glow)::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 340ms var(--px-ease-ui);
}
.px-navlinks a[href]:not(.px-cta-glow):hover::after{ transform: scaleX(1); transform-origin: left; }

/* ── Barra di avanzamento ──────────────────────────────────────────────────
   Da `height` animata (layout a ogni frame) a scaleY (solo composizione).    */
.px-progress{
  height: 100% !important;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: none;
  will-change: transform;
}

/* ── Grana ─────────────────────────────────────────────────────────────────
   `mix-blend-mode: multiply` su un layer fisso a tutto schermo obbliga il
   browser a ricomporre l'intera pagina a ogni frame di scroll. Su mobile era
   il singolo costo più alto del sito. La grana resta, il blend no.           */
.px-noise{
  mix-blend-mode: normal !important;
  opacity: 0.028 !important;
  contain: strict;
}
@media (max-width: 900px){ .px-noise{ display: none !important; } }

/* ── Ken Burns ────────────────────────────────────────────────────────────  */
.px-kenburns{ transition: transform 9s cubic-bezier(0.22,0.61,0.36,1) !important; }

/* ── Ancore ────────────────────────────────────────────────────────────────
   Lo scroll agli id non deve finire sotto la nav fissa.                      */
html{ scroll-padding-top: 96px; }

/* ══════════════════════════════════════════════════════════════════════════
   2 · PERFORMANCE
   ══════════════════════════════════════════════════════════════════════════ */

/* Le immagini dichiarano il loro rapporto: niente salto di layout mentre
   arrivano (è metà del punteggio CLS). */
img{ max-width: 100%; height: auto; }

/* Sezioni fuori schermo: il browser può saltarne il rendering finché non
   servono. `contain-intrinsic-size` evita che la scrollbar salti. */
@supports (content-visibility: auto){
  #consulting, #chi-siamo, #newsletter, footer{
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}

/* Il canvas 3D quando non viene acceso (mobile, reduced motion, device
   leggeri): al suo posto un gradiente statico, non un buco. */
.px-star-fallback{
  background:
    radial-gradient(38% 46% at 62% 44%, rgba(106,69,255,0.22), transparent 70%),
    radial-gradient(28% 34% at 74% 32%, rgba(138,109,255,0.30), transparent 72%);
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · ACCESSIBILITÀ
   ══════════════════════════════════════════════════════════════════════════ */

.px-skip{
  position: absolute; left: 12px; top: -60px; z-index: 100000;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  padding: 12px 18px; border-radius: var(--radius-sm);
  transition: top 200ms var(--px-ease-ui);
}
.px-skip:focus{ top: 12px; color: var(--paper); }

/* Anello di focus unico e sempre visibile, anche sopra il violetto. */
:focus-visible{
  outline: 2px solid var(--violet-500);
  outline-offset: 3px;
  border-radius: 5px;
}
.glass-dark :focus-visible,
footer :focus-visible{ outline-color: var(--violet-300); }

/* Target minimo 44px sul touch: sotto quella soglia il dito sbaglia. */
@media (pointer: coarse){
  nav a, nav button, footer a, .px-fmt a, form button{ min-height: 44px; }
  .px-navburger{ min-width: 44px; min-height: 44px; }
}

/* Chi ha chiesto meno movimento lo ottiene davvero, canvas 3D compreso. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .px-reveal, .px-flip, .px-split > span{ opacity: 1 !important; transform: none !important; }
  .px-blob, .px-ticker-track, .px-scan::after{ animation: none !important; }
  .px-noise{ display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · COOKIE BANNER
   ══════════════════════════════════════════════════════════════════════════ */

.px-cc{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100001;
  max-width: 560px; margin: 0 auto;
  background: rgba(251,250,253,0.86);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
          backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(42,39,51,0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px -24px rgba(42,39,51,0.45);
  padding: 24px 24px 20px;
  transform: translate3d(0, 130%, 0);
  opacity: 0;
  transition: transform 620ms var(--px-ease-entrance), opacity 420ms linear;
}
.px-cc.in{ transform: translate3d(0,0,0); opacity: 1; }
.px-cc h2{
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px;
}
.px-cc p{
  font-family: var(--font-display); font-size: 13.5px; line-height: 1.55;
  color: var(--slate-700); margin: 0 0 16px;
}
.px-cc p a{ color: var(--violet-700); text-decoration: underline; text-underline-offset: 2px; }
.px-cc-row{ display: flex; gap: 9px; flex-wrap: wrap; }
.px-cc button{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 13px 18px;
  border-radius: var(--radius-pill, 999px); cursor: pointer;
  transition: transform var(--px-dur-micro) var(--px-ease-ui),
              background var(--px-dur-micro) var(--px-ease-ui),
              border-color var(--px-dur-micro) var(--px-ease-ui);
  flex: 1 1 auto; min-height: 44px;
}
.px-cc button:active{ transform: scale(0.975); }
.px-cc-yes{ background: var(--violet-500); color: #fff; border: 1px solid var(--violet-500); }
.px-cc-yes:hover{ background: var(--violet-700); border-color: var(--violet-700); }
.px-cc-no{ background: transparent; color: var(--slate-700); border: 1px solid var(--slate-300); }
.px-cc-no:hover{ border-color: var(--ink); color: var(--ink); }
.px-cc-min{
  flex: 0 0 100%; background: none; border: none; color: var(--slate-500);
  font-size: 10.5px; padding: 4px 0 0; text-align: center;
}
.px-cc-min:hover{ color: var(--ink); }
@media (max-width: 480px){
  .px-cc{ left: 10px; right: 10px; bottom: 10px; padding: 20px 18px 16px; }
  .px-cc-row button{ flex: 1 1 100%; }
}

/* Link "Preferenze cookie" nel footer */
.px-cc-reopen{ background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; }
.px-cc-reopen:hover{ text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   5 · PAGINE LEGALI E FAQ
   ══════════════════════════════════════════════════════════════════════════ */

/* Riquadro dati sintetici in cima alle informative */
.px-legal-meta{
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--violet-500);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin: 0 0 38px;
  background: var(--mist);
}
.px-legal-meta dl{ margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; }
.px-legal-meta dt{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate-500); padding-top: 2px;
}
.px-legal-meta dd{
  margin: 0; font-family: var(--font-display); font-size: 14.5px; color: var(--ink);
}
.px-legal-meta dd a{ color: var(--violet-700); }
@media (max-width: 560px){
  .px-legal-meta dl{ grid-template-columns: 1fr; gap: 3px; }
  .px-legal-meta dd{ margin-bottom: 12px; }
}

/* Tabella dei trattamenti / dei cookie */
.px-table-wrap{ overflow-x: auto; margin: 26px 0 34px; -webkit-overflow-scrolling: touch; }
table.px-table{
  width: 100%; min-width: 520px; border-collapse: collapse;
  font-family: var(--font-display); font-size: 14px;
}
table.px-table th{
  text-align: left; font-family: var(--font-mono); font-weight: 400;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate-500); padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--slate-300);
}
table.px-table td{
  padding: 13px 14px 13px 0; vertical-align: top;
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-700); line-height: 1.5;
}
table.px-table td:first-child{ color: var(--ink); font-weight: 500; }

/* FAQ — accordion nativo, zero JavaScript */
.px-faq{ margin: 0 0 46px; }
.px-faq details{
  border-bottom: 1px solid var(--slate-200);
  padding: 0;
}
.px-faq details:first-of-type{ border-top: 1px solid var(--slate-200); }
.px-faq summary{
  list-style: none; cursor: pointer; position: relative;
  padding: 24px 46px 24px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  line-height: 1.35; letter-spacing: -0.01em; color: var(--ink);
  transition: color var(--px-dur-micro) var(--px-ease-ui);
}
.px-faq summary::-webkit-details-marker{ display: none; }
.px-faq summary:hover{ color: var(--violet-700); }
.px-faq summary::after{
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 1.8px solid var(--violet-500);
  border-bottom: 1.8px solid var(--violet-500);
  transform: rotate(45deg);
  transition: transform 320ms var(--px-ease-ui);
}
.px-faq details[open] summary::after{ transform: rotate(-135deg); margin-top: -3px; }
.px-faq .px-faq-a{
  padding: 0 8px 26px 0;
  animation: px-faq-in 420ms var(--px-ease-entrance);
}
.px-faq .px-faq-a p{
  font-family: var(--font-serif); font-size: 17px; line-height: 1.68;
  color: var(--slate-700); margin: 0 0 14px;
}
.px-faq .px-faq-a p:last-child{ margin-bottom: 0; }
.px-faq .px-faq-a a{ color: var(--violet-700); text-decoration: underline; text-underline-offset: 2px; }
@keyframes px-faq-in{
  from{ opacity: 0; transform: translate3d(0,-6px,0); }
  to  { opacity: 1; transform: none; }
}
@media (max-width: 560px){
  .px-faq summary{ font-size: 16.5px; padding: 20px 38px 20px 0; }
  .px-faq .px-faq-a p{ font-size: 16px; }
}

/* Footer delle pagine statiche: riga legale */
.px-foot-legal{
  display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.px-foot-legal a, .px-foot-legal button{ color: inherit; opacity: 0.72; }
.px-foot-legal a:hover, .px-foot-legal button:hover{ opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   6 · MOBILE
   Non una versione ridotta del desktop: una versione che tiene conto del
   fatto che si legge con una mano, su uno schermo che si sposta.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px){
  /* Il form consulenza era sticky. In colonna unica una scheda che si
     incolla mentre il resto scorre disorienta, e sui telefoni bassi copre
     metà schermo. In colonna unica scorre insieme al resto. */
  form.glass-dark{ position: static !important; top: auto !important; }
}

@media (max-width: 880px){
  /* Notch e barra gesti: il contenuto non finisce sotto il vetro. */
  nav{
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
  }
  footer{ padding-bottom: max(40px, env(safe-area-inset-bottom)) !important; }
  .px-cc{ bottom: max(14px, env(safe-area-inset-bottom)); }

  /* La card KPI dell'hero occupa la larghezza piena invece di restare
     incastrata a destra come sul desktop. */
  .px-hero-kpi{ justify-content: stretch !important; }
  .px-hero-kpi > *{ width: 100% !important; }

  /* Vetro più leggero: su GPU mobile ogni backdrop-filter è un layer
     ridisegnato a ogni scroll. */
  .glass-strong{
    -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
            backdrop-filter: blur(18px) saturate(170%) !important;
  }
  .glass-dark{
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
            backdrop-filter: blur(16px) saturate(150%) !important;
  }

  /* Reveal più corti: su schermo piccolo la stessa corsa sembra lenta,
     perché l'elemento attraversa una porzione maggiore di viewport. */
  .px-reveal{ transform: translate3d(0, 18px, 0) scale(0.99); }
  :root{ --px-dur-enter: 620ms; }

  /* Cascata dimezzata: in colonna unica 210ms sull'ultima card significa
     aspettare a vuoto. */
  .px-fmt-grid > .px-reveal:nth-child(2),
  .px-consult-grid > .px-reveal:nth-child(2){ transition-delay: 40ms; }
  .px-fmt-grid > .px-reveal:nth-child(3),
  .px-consult-grid > .px-reveal:nth-child(3){ transition-delay: 80ms; }
  .px-fmt-grid > .px-reveal:nth-child(4),
  .px-consult-grid > .px-reveal:nth-child(4){ transition-delay: 120ms; }
}

/* Feedback al tocco: senza :hover, un tocco senza risposta visiva fa
   sembrare il sito bloccato. */
.px-tapped{
  transform: scale(0.975) !important;
  opacity: 0.86;
  transition: transform 90ms ease-out, opacity 90ms ease-out !important;
}

@media (max-width: 620px){
  /* Testo che non si comprime sotto la soglia di leggibilità. */
  .px-body p, .px-faq .px-faq-a p{ font-size: 16.5px; line-height: 1.65; }
  .px-lead{ font-size: 18px; }
  .px-legal-meta{ padding: 16px 18px; }

  /* Tabelle larghe: scorrono da sole, con un'ombra che dice che c'è altro. */
  .px-table-wrap{
    background:
      linear-gradient(90deg, var(--paper) 30%, rgba(251,250,253,0)) left / 32px 100% no-repeat,
      linear-gradient(270deg, var(--paper) 30%, rgba(251,250,253,0)) right / 32px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(42,39,51,0.14), transparent) left / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(42,39,51,0.14), transparent) right / 14px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /* Niente zoom automatico di iOS sui campi: sotto i 16px Safari ingrandisce
     la pagina al focus e poi non la riporta indietro. */
  input, textarea, select{ font-size: 16px !important; }
}

/* Altezza reale del viewport, impostata da px-mobile.js */
@supports (height: 1px){
  .px-vh-100{ height: calc(var(--px-vh, 1vh) * 100); }
}

/* ── Barra di lettura delle pagine statiche ────────────────────────────────
   Era `width` animata: layout a ogni frame di scroll su un elemento sempre a
   schermo. Stessa resa, con scaleX su un layer già promosso. */
.px-gauge{
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: none !important;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════════════════
   7 · CONTRASTO
   Misurato, non stimato. Sette coppie del sistema colori non arrivavano al
   4.5:1 richiesto da WCAG AA per il testo normale. Qui sono corrette solo
   dove il colore fa da testo: come riempimento o come bordo restano quelle
   del brand, perché lì la soglia non si applica.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Varianti leggibili su fondo chiaro. Sono le più chiare che superano
     il 4.5:1 su --paper, cioè il minimo scostamento dal colore originale. */
  --px-coral-text: #e51400;   /* da #ff6a5c · 2.70 → 4.56 */
  --px-teal-text:  #0f8172;   /* da #15b6a0 · 2.45 → 4.59 */
  --px-amber-text: #a16607;   /* da #f5a524 · 2.28 → 4.57 */
}

/* Messaggi di errore su fondo chiaro. Un errore illeggibile è due volte un
   errore: il modulo si blocca e non si capisce perché. */
#newsletter [style*="--data-coral"],
.px-body [style*="--data-coral"]{ color: var(--px-coral-text) !important; }
#newsletter span[role="status"]{ color: var(--px-coral-text) !important; }

/* Il segno di spunta bianco sul cerchio teal stava a 2.55:1. Il testo scuro
   sullo stesso cerchio sta a 6.03:1 e non richiede di cambiare il colore
   del brand. */
#newsletter .glass-strong span[style*="--data-teal"]{ color: var(--ink) !important; }

/* Etichette piccole su fondo chiaro: slate-400 sta a 2.77:1, sotto la
   soglia anche per il testo grande. */
.px-body [style*="slate-400"],
.px-legal-meta dt{ color: var(--slate-500) !important; }

/* Riga di copyright e link legali del footer scuro: slate-500 su ink-surface
   sta a 2.85:1. slate-400 sullo stesso fondo sta a 5.35:1. */
footer .px-foot-legal,
footer .px-foot-legal a,
footer .px-foot-legal button{ color: var(--slate-400) !important; opacity: 1; }
footer .px-foot-legal a:hover,
footer .px-foot-legal button:hover{ color: var(--paper) !important; }
footer span[style*="slate-500"]{ color: var(--slate-400) !important; }

/* violet-400 come testo su fondo scuro sta a 4.19:1. violet-300 sta a 6.88. */
footer span[style*="violet-400"]{ color: var(--violet-300) !important; }

/* I segnaposto dei campi devono restare distinguibili dal valore digitato
   ma non illeggibili. */
input::placeholder, textarea::placeholder{ color: var(--slate-500); opacity: 1; }
.glass-dark input::placeholder, .glass-dark textarea::placeholder{ color: #8d88a0; opacity: 1; }

/* Chi ha alzato il contrasto a livello di sistema lo ottiene anche qui. */
@media (prefers-contrast: more){
  .px-reveal{ opacity: 1 !important; transform: none !important; }
  .glass-light, .glass-strong{ background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass-dark{ background: var(--ink-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .px-noise{ display: none !important; }
  a{ text-decoration: underline; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8 · STRUTTURA DEI TITOLI
   .px-section-label era uno <span>: a schermo sembra un titolo di sezione,
   ma per uno screen reader la pagina risultava un blocco unico senza indice
   navigabile. Ora è un <h2> e qui vengono azzerati i default del browser,
   così l'aspetto resta identico al pixel.
   ══════════════════════════════════════════════════════════════════════════ */
h2.px-section-label{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet-500);
  margin: 56px 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.4;
}
h2.px-section-label:first-of-type{ margin-top: 44px; }
@media (max-width: 620px){ h2.px-section-label{ margin: 44px 0 10px; } }

/* Scheda "Il metodo" di chi-siamo: le etichette erano <span> e <div>, ora
   sono <h2> e <h3>. Reset dei default del browser, resa invariata. */
.px-methodcard h2.lbl{ font-weight: 400; margin: 0; }
.px-methodcard h3.rt{ font-weight: 600; margin: 0 0 6px; font-size: 16px; line-height: 1.35; }


/* ══════════════════════════════════════════════════════════════════════════
   9 · LIQUID GLASS — REVISIONE
   Nella prima passata avevo tagliato troppo: morphing dei blob spento, blur
   della nav da 40 a 22, vetro mobile a 16. Il costo era sceso ma il vetro
   era diventato plastica opaca.

   Il costo però non stava nella QUANTITÀ di blur: stava nell'animare la
   GEOMETRIA sotto il blur. `border-radius` che cambia a ogni frame obbliga
   il browser a ricalcolare la sfocatura ogni volta. Un elemento già sfocato
   che cambia solo `transform` viene rasterizzato una volta e poi spostato
   dalla GPU, a costo quasi nullo.

   Quindi: il vetro torna ricco, il movimento torna liquido, ma prodotto da
   scale non uniforme invece che da morphing della forma. L'occhio legge una
   forma che si deforma; la GPU vede solo una matrice.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Vetro pieno ───────────────────────────────────────────────────────────
   La saturazione conta più del blur: è quella che fa respirare i colori
   sotto invece di ingrigirli. Il bordo speculare c'era già (::before con
   maschera): non lo tocco, lo lascio lavorare. */
nav.glass-strong{
  -webkit-backdrop-filter: blur(34px) saturate(210%) brightness(1.05) !important;
          backdrop-filter: blur(34px) saturate(210%) brightness(1.05) !important;
  background: rgba(251,250,253,0.60) !important;
}
.glass-strong:not(nav){
  -webkit-backdrop-filter: blur(32px) saturate(205%) brightness(1.03);
          backdrop-filter: blur(32px) saturate(205%) brightness(1.03);
}
.glass-light{
  -webkit-backdrop-filter: blur(26px) saturate(190%);
          backdrop-filter: blur(26px) saturate(190%);
}
.glass-dark{
  -webkit-backdrop-filter: blur(30px) saturate(175%);
          backdrop-filter: blur(30px) saturate(175%);
}

/* ── Blob liquidi ──────────────────────────────────────────────────────────
   Forma fissa, deformazione dalla scala. Due assi con periodi diversi e una
   rotazione lenta danno la stessa lettura organica del morphing, senza mai
   invalidare la sfocatura. */
.px-blob{
  filter: blur(62px);
  will-change: transform;
  animation: px-liquid 21s cubic-bezier(0.45,0,0.55,1) infinite alternate !important;
}
.px-blob-2{ animation-duration: 29s !important; animation-delay: -11s !important; }

@keyframes px-liquid{
  0%   { transform: translate3d(0,0,0)        scale(1.00, 1.00) rotate(0deg);  }
  30%  { transform: translate3d(24px,-18px,0) scale(1.16, 0.89) rotate(8deg);  }
  62%  { transform: translate3d(-16px,20px,0) scale(0.91, 1.13) rotate(-6deg); }
  100% { transform: translate3d(10px,6px,0)   scale(1.07, 0.95) rotate(3deg);  }
}

/* ── Riflesso che scorre ───────────────────────────────────────────────────
   Passa una volta ogni nove secondi sulla card dei numeri. È questo, più del
   blur, a distinguere una superficie viva da un rettangolo semitrasparente.
   ::before è già occupato dal bordo speculare, quindi usa ::after. */
.px-hero-kpi .glass-dark{ overflow: hidden; }
.px-hero-kpi .glass-dark::after{
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  background: linear-gradient(104deg, transparent, rgba(255,255,255,0.11) 46%, transparent);
  transform: translateX(-170%);
  animation: px-sheen 9s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}
@keyframes px-sheen{
  0%, 64% { transform: translateX(-170%); }
  86%     { transform: translateX(330%);  }
  100%    { transform: translateX(330%);  }
}

/* Le card format e consulting si sollevano con un filo di scala: il
   movimento verticale da solo legge come "salto", con la scala legge come
   "si avvicina". */
.px-fmt:hover{ transform: translate3d(0, var(--px-lift), 0) scale(1.008); }
.px-consult-grid .glass-dark:hover{
  transform: translate3d(0, var(--px-lift), 0) scale(1.006) !important;
}

@media (prefers-reduced-motion: reduce){
  .px-blob{ animation: none !important; }
  .px-hero-kpi .glass-dark::after{ animation: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   10 · MOBILE — REVISIONE DAGLI SCREENSHOT 10/09
   Correzioni su cose che si vedono solo guardando lo schermo.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px){
  /* ── Il claim era troppo piccolo ────────────────────────────────────────
     Era clamp(28px, 8.4vw, 40px): su un telefono da 412px faceva 34px, e
     "Misuriamo la politica." è l'unica cosa che deve dominare quella
     schermata. 12.5vw arriva a 51px e "la politica." sta ancora su una riga
     sola, che è il vincolo vero. */
  header h1{
    font-size: clamp(38px, 12.5vw, 56px) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.04em !important;
  }

  /* Il sommario serif resta leggibile ma smette di competere. */
  header > div p:not(.px-hero-note){ font-size: 17px !important; line-height: 1.6 !important; }

  /* ── La riga in calce ───────────────────────────────────────────────────
     Era un <p> e si prendeva la regola `header p { font-size: 16.5px }`:
     usciva grande quanto il sommario e occupava tre righe. Torna a essere
     una nota. */
  .px-hero-note{
    font-size: 11px !important;
    line-height: 1.55 !important;
    opacity: 0.9;
    max-width: 34ch;
  }

  /* ── I tre CTA ──────────────────────────────────────────────────────────
     I primi due a piena larghezza e affiancati in verticale, il terzo come
     link di testo: la gerarchia resta leggibile anche senza colore. */
  .px-hero-actions{ gap: 10px !important; width: 100%; }
  .px-hero-actions .px-cta-1,
  .px-hero-actions .px-cta-2{
    flex: 1 1 100%;
    text-align: center;
    padding: 16px 20px !important;
  }
  .px-hero-actions .px-cta-3{
    flex: 1 1 100%;
    padding: 6px 0 0 !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 900px){
  /* ── La card dei numeri copriva il pulsante ─────────────────────────────
     Nella sezione Termometro la card KPI è in posizionamento assoluto e su
     schermo stretto finiva sopra "Leggi l'analisi". In colonna unica non ha
     motivo di sovrapporsi: scorre sotto. */
  .px-hero-kpi, .px-kpi-float, .px-featured-kpi{
    position: static !important;
    transform: none !important;
    margin-top: 16px !important;
    right: auto !important; bottom: auto !important; left: auto !important;
  }

  /* ── Le card consulting erano a due colonne ─────────────────────────────
     A 412px ogni colonna era larga ~170px e il testo andava a capo ogni due
     parole. Una colonna sola. */
  #consulting .px-consult-grid,
  #consulting [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }

  /* ── Spazi verticali ────────────────────────────────────────────────────
     Le distanze tra sezioni erano calibrate sul desktop: su mobile
     diventavano vuoti di mezzo schermo. Circa un terzo in meno. */
  section{ padding-top: 64px !important; padding-bottom: 64px !important; }
  section > .px-reveal:first-child{ margin-top: 0 !important; }
  .px-cta{ margin-top: 40px !important; padding: 34px 24px !important; }
}

@media (max-width: 620px){
  /* ── Etichette grigie sotto soglia ──────────────────────────────────────
     "2 edizioni pubblicate", "fonti primarie pubbliche" e simili erano in
     slate-400 su fondo chiaro: 2,77:1, illeggibili al sole. */
  .px-arch-meta, .px-arch-meta *,
  .px-body [class*="meta"], .px-eyebrow + .px-arch-title ~ *{
    color: var(--slate-500) !important;
  }

  /* Il titolo della nav e il logo non devono scendere sotto il pollice. */
  .px-nav-word{ font-size: 15px !important; letter-spacing: 0.16em !important; }

  /* Le immagini nelle card non tagliano più il soggetto a metà. */
  .px-fmt img, .px-arch-card img{ object-position: center 38%; }
}

/* ── Nav su mobile ─────────────────────────────────────────────────────────
   Negli screenshot la barra galleggiante lasciava trasparire il testo sotto
   in modo confuso. Più opaca e con un'ombra che la stacca dal contenuto,
   restando vetro. */
@media (max-width: 880px){
  nav.glass-strong{
    background: rgba(251,250,253,0.82) !important;
    -webkit-backdrop-filter: blur(26px) saturate(190%) !important;
            backdrop-filter: blur(26px) saturate(190%) !important;
    box-shadow: 0 10px 30px -14px rgba(42,39,51,0.28) !important;
  }
}