/* =========================================================================
   MAGISTRAL — base condivisa da tutte le pagine pubbliche
   Font, token, reset, accessibilità, sistema "liquid glass", navbar,
   footer, banner cookie.
   ========================================================================= */

@font-face{font-family:'Grotesk';src:url('../fonts/arimo-latin-400-normal.woff2') format('woff2'),url('../fonts/arimo-latin-400-normal.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Grotesk';src:url('../fonts/arimo-latin-500-normal.woff2') format('woff2'),url('../fonts/arimo-latin-500-normal.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Grotesk';src:url('../fonts/arimo-latin-600-normal.woff2') format('woff2'),url('../fonts/arimo-latin-600-normal.woff') format('woff');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Grotesk';src:url('../fonts/arimo-latin-700-normal.woff2') format('woff2'),url('../fonts/arimo-latin-700-normal.woff') format('woff');font-weight:700 900;font-style:normal;font-display:swap;}

:root{
  --orange:#FF5A00;
  --black:#000000;
  --white:#FFFFFF;

  /* Un solo gutter orizzontale per tutto il sito (header, sezioni, footer). */
  --gutter:clamp(18px,5vw,64px);
  --edge:max(10px,calc(var(--gutter) - 16px));
  --content-max:1200px;
  --section-space:clamp(72px,9vw,120px);

  /* Testo secondario: tutte le varianti superano 4.5:1 su nero (WCAG AA). */
  --text-muted:rgba(255,255,255,.62);
  --text-soft:rgba(255,255,255,.78);
  --line:rgba(255,255,255,.12);

  /* Vetro: riflessi ottici sottili, non pannelli lattiginosi. */
  --lg-radius:20px;
  --lg-blur:10px;
  --lg-sat:175%;
  --lg-bright:1.06;

  /* Raggi: un'unica scala per tutte le superfici. */
  --r-xs:10px;
  --r-sm:14px;
  --r-md:22px;
  --r-lg:28px;
  --r-xl:32px;
  --r-pill:999px;

  /* Movimento: tre curve e tre durate, usate ovunque.
     --ease-out    uscite morbide (rivelazioni, pannelli)
     --ease-expo   entrate decise che si posano piano (menu, navbar)
     --spring      molla con un leggero rimbalzo (pressioni, icone)
     --spring-soft molla smorzata, ~3% di rimbalzo (vetro che cambia forma) */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.36,.64,1);
  --spring-soft:cubic-bezier(.2,1.1,.3,1);
  --dur-fast:.18s;
  --dur-base:.32s;
  --dur-slow:.6s;
}
/* Dove il browser lo consente, la molla è una curva fisica vera (linear()). */
@supports (transition-timing-function:linear(0,1)){
  :root{
    --spring:linear(0,.009,.035 2.1%,.141 4.4%,.281 6.7%,.723 12.9%,.938 16.7%,1.017 19.4%,1.077 22.6%,1.104 25.9%,1.104 29.2%,1.076 33.4%,1.025 39.6%,.997 45.9%,.989 52.1%,.997 64.6%,1);
    /* molla smorzata (ζ 0,74) con velocità iniziale: parte subito, supera appena il punto e si posa */
    --spring-soft:linear(0,.04 1.5%,.106 3.7%,.191 6.4%,.289 9.2%,.394 12.3%,.501 15.6%,.604 19.1%,.7 22.7%,.784 26.5%,.856 30.4%,.914 34.4%,.959 38.5%,.991 42.7%,1.013 47.1%,1.027 51.5%,1.033 56%,1.034 60.6%,1.032 65.2%,1.028 70%,1.023 74.8%,1.018 79.7%,1.013 84.7%,1.009 89.7%,1.006 94.8%,1);
  }
}

/* La tinta del vetro è tipizzata per interpolare in modo uniforme dove supportato. */
@property --lg-tint{syntax:'<color>';inherits:false;initial-value:rgba(6,6,8,.2);}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--black);-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* il body resta trasparente: gli aloni (z-index:-1) restano visibili dietro al contenuto */
body{
  background:transparent;
  color:var(--white);
  font-family:'Grotesk',Arial,'Helvetica Neue',Helvetica,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
/* niente riquadro grigio di Safari al tocco: ogni controllo ha già la sua risposta (:active) */
a,button,label,summary,[role="button"]{-webkit-tap-highlight-color:transparent;}
img,video,canvas,svg{display:block;max-width:100%;}
::selection{background:var(--orange);color:var(--black);}
/* titoli bilanciati, paragrafi senza parole orfane (dove supportato) */
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}

/* ---------- Accessibilità ---------- */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px;}
.skip-link{
  position:fixed;top:12px;left:12px;z-index:100001;
  background:var(--orange);color:var(--black);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 16px;transform:translateY(-200%);transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);}
/* fuori dallo schermo resta senza colore: Safari su iPhone non lo usa per tingere la barra di stato */
.skip-link:not(:focus){background:transparent;color:transparent;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- Protezione logo: niente drag, niente "salva immagine" da long-press ---------- */
.logo-img{
  -webkit-user-drag:none;user-drag:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}

/* =========================================================================
   REAL GLASS — una superficie unica, sottile e otticamente credibile.
   La luce vive nei bordi e nella parte alta; il centro resta trasparente.
   Nessuna passata animata o alone artificiale.
   ========================================================================= */
.lg{
  --lg-tint:rgba(18,19,22,.10);
  --lg-blur:10px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--lg-radius);
  background:
    linear-gradient(180deg,rgba(255,255,255,.105) 0%,rgba(255,255,255,.035) 12%,rgba(255,255,255,.008) 48%,rgba(255,255,255,.025) 100%),
    var(--lg-tint);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.04),
    inset 0 0 18px -6px rgba(255,255,255,.10),
    0 8px 28px -18px rgba(0,0,0,.75);
  /* solo proprietà interpolabili: niente scatti tra stato normale e hover.
     Niente transform qui: i pannelli entrano con GSAP, che scrive transform a
     ogni fotogramma, e una transizione CSS sopra la rincorrerebbe. */
  transition:--lg-tint var(--dur-base) ease,border-color var(--dur-base) ease,box-shadow var(--dur-base) ease,color var(--dur-base) ease;
}
/* Il riflesso superiore e la dispersione laterale sono statici: sembrano luce
   ambientale sulla lastra, non un effetto che corre sopra l'interfaccia. */
.lg::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(112deg,rgba(255,255,255,.105) 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 76%,rgba(190,215,255,.045) 100%),
    linear-gradient(180deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.025) 1px,transparent 22%);
  opacity:.72;
  transition:opacity var(--dur-base) ease;
}
.lg::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1.5px;
  pointer-events:none;
  z-index:-1;
  /* bordo speculare: la luce colpisce l'angolo in alto a sinistra e rimbalza in basso a destra */
  background:linear-gradient(135deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.16) 24%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.16) 76%,rgba(255,255,255,.52) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.lg-pill{--lg-radius:var(--r-pill);--lg-blur:6px;}
/* pillole e icone rispondono al tocco: la loro transform segue una molla */
.lg-pill,.lg-round{transition:--lg-tint var(--dur-base) ease,border-color var(--dur-base) ease,box-shadow var(--dur-base) ease,color var(--dur-base) ease,transform .55s var(--spring);}
.lg-pill,.lg-round{--lg-tint:rgba(20,21,24,.12);}
.lg-round{--lg-radius:50%;--lg-blur:6px;}
/* Hover: la lastra si schiarisce appena e il filo di luce si accende.
   Tutto interpolato (tinta, ombra interna, opacità del riflesso). */
@media (hover:hover){
  .lg-pill:hover,.lg-round:hover{--lg-tint:rgba(44,46,52,.2);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 22px -6px rgba(255,255,255,.18),0 12px 30px -18px rgba(0,0,0,.8);transform:translate3d(0,-1px,0);}
  .lg:hover::before{opacity:1;}
}
/* Pressione: la lastra cede e torna con una molla. */
.lg-pill:active,.lg-round:active{transform:scale(.96);transition-duration:.12s;}

/* Luce che segue il puntatore (ui.js, solo mouse): una sorgente morbida
   spostata con transform, quindi composta dalla GPU senza ridipingere il vetro. */
.lg-glint{
  --g:220px;
  position:absolute;left:0;top:0;z-index:-1;
  width:var(--g);height:var(--g);margin:calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.17),rgba(255,255,255,.06) 42%,rgba(255,255,255,0));
  transition:opacity .5s ease;will-change:transform;
}
.lg.is-lit > .lg-glint{opacity:1;}
.lg.on-light > .lg-glint{background:radial-gradient(closest-side,rgba(255,255,255,.7),rgba(255,255,255,.2) 45%,rgba(255,255,255,0));}

/* Superfici interne (chip dentro un pannello di vetro): stesso linguaggio
   del vetro ma senza sfocatura, che dentro un altro vetro sarebbe solo costo. */
.glass-inset{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
/* =========================================================================
   VETRO LIMPIDO — card, modulo, barra del footer (.lg-panel, .lg-clear).
   Sono superfici nel flusso della pagina: dietro hanno solo lo sfondo fisso,
   già morbido di suo. Qui la sfocatura non mostrerebbe nulla in più e su
   iPhone costerebbe un ricalcolo a ogni fotogramma, mentre la velatura le
   faceva sembrare pannelli scuri. La lastra quindi è trasparente: la si
   riconosce dal bordo speculare, dal filo di luce in alto e da una lente
   leggera che ravviva i colori che le passano dietro (saturazione e
   luminosità, nessuna convoluzione). Identica per tutte le card.
   ========================================================================= */
.lg-panel,.lg-clear{
  --lg-radius:var(--r-md);
  --lg-tint:rgba(255,255,255,0);
  background:var(--lg-tint);
  -webkit-backdrop-filter:saturate(150%) brightness(1.12);
  backdrop-filter:saturate(150%) brightness(1.12);
  border-color:rgba(255,255,255,.09);
  /* solo luce di bordo: un filo in alto e un alone sottilissimo lungo il perimetro.
     L'interno resta del colore di ciò che c'è dietro. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.015),
    inset 0 0 14px -8px rgba(255,255,255,.2),
    0 24px 48px -36px rgba(0,0,0,.9);
}
/* riflesso d'angolo minimo, dove la luce colpisce la lastra */
.lg-panel::before,.lg-clear::before{
  background:radial-gradient(130% 70% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 38%);
  opacity:1;
}
@media (hover:hover){
  .lg-panel:hover,.lg-clear:hover{--lg-tint:rgba(255,255,255,.02);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 1px rgba(255,255,255,.02),inset 0 0 18px -8px rgba(255,255,255,.28),0 24px 48px -36px rgba(0,0,0,.9);}
}

.lg.on-light{
  --lg-tint:rgba(246,247,250,.22);
  color:var(--black);text-shadow:none;
  border-color:rgba(255,255,255,.3);
  background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.14)),var(--lg-tint);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(0,0,0,.035),0 8px 24px -16px rgba(0,0,0,.22);
}
.lg.on-light::after{background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.4) 30%,rgba(255,255,255,.25) 60%,rgba(255,255,255,.8) 100%);}
.lg.on-light::before{background:linear-gradient(112deg,rgba(255,255,255,.34),transparent 30%,transparent 76%,rgba(160,185,220,.07));}
.lg-sweep::before{animation:none!important;}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .lg{background:rgba(20,21,24,.88);}
  .lg.on-light{background:rgba(248,248,250,.94);}
}
@media (prefers-reduced-transparency:reduce){
  .lg{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,21,24,.96);}
  .lg.on-light{background:rgba(248,248,250,.98);}
}

/* Rifrazione vera dei bordi (solo Chromium con mouse): ui.js crea un filtro SVG per ogni vetro
   e lo aggancia a --lg-bd. Safari, Firefox e touch restano sulla sola sfocatura. */
html.lg-refract .lg[style*="--lg-bd"]{
  -webkit-backdrop-filter:var(--lg-bd);
  backdrop-filter:var(--lg-bd);
}

/* Testo che scorre al passaggio del mouse (ui.js divide l'etichetta in lettere). */
.roll{position:relative;display:inline-flex;overflow:hidden;vertical-align:top;line-height:1.25;}
.roll-a,.roll-b{display:inline-flex;}
.roll-b{position:absolute;inset:0;}
.roll i{display:inline-block;font-style:normal;white-space:pre;transition:transform .32s var(--ease-out);transition-delay:calc(var(--i) * 8ms);}
.roll-b i{transform:translate3d(0,108%,0);}
@media (hover:hover){
  :is(a,button):hover > .roll .roll-a i{transform:translate3d(0,-108%,0);}
  :is(a,button):hover > .roll .roll-b i{transform:translate3d(0,0,0);}
}

/* ---------- Navbar liquid glass (condivisa) ----------
   In home la barra è "liquida": scendendo si raccoglie in una pillola al
   centro (logo + menu), risalendo o passandoci sopra si riapre. Si animano
   solo i bordi sinistro/destro della barra, con una molla. */
.site-header{
  --hx:var(--edge);
  position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:var(--hx);right:var(--hx);z-index:500;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:56px;padding:8px 10px 8px 16px;--lg-radius:28px;
  color:var(--white);
  /* la navbar passa sopra titoli bianchi e grandi: un alone leggerissimo tiene il testo leggibile */
  text-shadow:0 0 1px rgba(0,0,0,.28),0 1px 10px rgba(0,0,0,.34);
  contain:layout style;
  /* la lastra cambia forma con una molla smorzata (si stringe, supera appena il
     punto e si posa); l'entrata scende e si assesta con la stessa molla */
  transition:left .78s var(--spring-soft),right .78s var(--spring-soft),margin .78s var(--spring-soft),transform 1.1s var(--spring-soft),scale 1.1s var(--spring-soft),opacity .45s ease,--lg-tint .4s ease,border-color .4s ease,color .3s ease,box-shadow .4s ease;
  will-change:transform;
}
/* Mentre cambia forma la lastra si deforma leggermente in verticale: la scala
   è una proprietà a sé (scale), non tocca la transform dell'entrata ed è
   composta dalla GPU. main.js aggiunge .is-morphing per la durata del cambio. */
.site-header.is-morphing{animation:navGel .78s cubic-bezier(.3,.7,.4,1);}
@keyframes navGel{0%{scale:1 1}28%{scale:1.004 .955}62%{scale:.999 1.012}100%{scale:1 1}}
/* Entrata: prima la lastra (scende, leggermente ridotta, e si posa), poi il
   contenuto, in sequenza da sinistra a destra. */
.site-header.nav-pending{scale:.94;}
.site-header .brand-mark,.site-header .quick-nav a,.site-header .menu-toggle{transition:opacity .55s ease var(--d,0s),transform .8s var(--ease-expo) var(--d,0s),color .25s ease;}
.site-header .brand-mark{--d:.32s;}
.site-header .quick-nav a{--d:calc(.4s + var(--n,0) * 45ms);}
.site-header .quick-nav a:nth-child(2){--n:1;}
.site-header .quick-nav a:nth-child(3){--n:2;}
.site-header .quick-nav a:nth-child(4){--n:3;}
.site-header .quick-nav a:nth-child(5){--n:4;}
.site-header .menu-toggle{--d:.62s;}
.site-header.nav-pending .brand-mark,.site-header.nav-pending .quick-nav a,.site-header.nav-pending .menu-toggle{opacity:0;transform:translate3d(0,7px,0);}
.site-header.is-compact{--hx:max(var(--edge),calc(50% - var(--compact-w,260px) / 2));}
/* Leggibilità dinamica: in cima la lastra è quasi trasparente; quando sotto
   scorrono titoli e testo si vela un poco di più, senza perdere il vetro. */
.site-header.is-scrolled:not(.on-light){--lg-tint:rgba(12,13,16,.34);border-color:rgba(255,255,255,.09);}
/* Sopra il menu di vetro scuro la barra resta vetro scuro, logo arancione:
   solo un filo di luce in più per staccarla dalla lastra sotto. */
.site-header.lg.menu-open{--lg-tint:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
/* stato iniziale: la barra attende sopra il viewport e scende con un movimento unico */
.site-header.nav-pending{transform:translate3d(0,calc(-100% - 28px),0);opacity:0;}
.site-header.is-static{position:sticky;left:auto;right:auto;margin:10px var(--hx) 0;}
.site-header .menu-toggle{color:inherit;}
.brand-mark{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;letter-spacing:.02em;min-height:34px;color:inherit;white-space:nowrap;}
.brand-mark img{height:22px;width:auto;}
.quick-nav{display:flex;align-items:center;gap:22px;font-size:11px;letter-spacing:.12em;font-weight:700;white-space:nowrap;}
.quick-nav a{color:var(--text-soft);padding:8px 0;}
.quick-nav a[aria-current="page"]{color:var(--orange);}
@media (hover:hover){.quick-nav a:hover{color:var(--white);}}
.site-header.on-light .quick-nav a{color:rgba(0,0,0,.72);}
.site-header.on-light .quick-nav a[aria-current="page"]{color:#C24400;}
@media (hover:hover){.site-header.on-light .quick-nav a:hover{color:var(--black);}}

/* ---------- Tipografia di servizio condivisa ---------- */
.meta{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--text-muted);}
.accent{color:var(--orange);}

/* ---------- Footer (condiviso) ----------
   wordmark (solo home) → icone contatto/social → barra in vetro con legali e accesso Private. */
.site-footer{position:relative;padding:0 var(--edge) calc(20px + env(safe-area-inset-bottom,0px));}
.foot-social{list-style:none;display:flex;justify-content:center;gap:14px;padding:0 0 clamp(40px,6vw,72px);}
.foot-social li{--i:0;}
.foot-social li:nth-child(2){--i:1;}
.foot-social li:nth-child(3){--i:2;}
.foot-social li:nth-child(4){--i:3;}
/* vetro del footer più sottile: resta limpido e costa meno da ricalcolare */
.social-btn{display:grid;place-items:center;width:56px;height:56px;color:var(--white);--lg-blur:8px;}
.social-btn svg{width:21px;height:21px;transition:transform .6s var(--spring);}
@media (hover:hover){
  .social-btn:hover{--lg-tint:rgba(255,90,0,.3);transform:translateY(-3px);}
  .social-btn:hover svg{transform:scale(1.12);}
}

.foot-glass{
  margin:0 auto;padding:18px 20px 0;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding-bottom:16px;}
.foot-id{--j:0;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:4px 14px;}
/* orologio: puntino "in diretta" con un'onda che si allarga (solo transform/opacity) */
.foot-clock{position:relative;display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;color:var(--text-soft);}
.foot-clock::before,.foot-clock::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;}
.foot-clock::before{box-shadow:0 0 8px var(--orange);}
.foot-clock::after{position:absolute;left:0;top:50%;margin-top:-3px;opacity:0;animation:clockPulse 2.6s cubic-bezier(.16,1,.3,1) infinite paused;}
.site-footer.in-view .foot-clock::after{animation-play-state:running;}
@keyframes clockPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
.foot-legal{--j:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;}
.foot-legal a,.foot-legal button{
  color:var(--text-muted);font:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:6px 0;transition:color .2s ease;
}
.foot-legal a[aria-current="page"]{color:var(--white);}
@media (hover:hover){.foot-legal a:hover,.foot-legal button:hover{color:var(--orange);}}
.foot-legal a:active,.foot-legal button:active,.foot-private:active,.quick-nav a:active{color:var(--orange);}
/* accesso all'area privata: in fondo, al centro, discreto */
.foot-private-row{--j:2;display:flex;justify-content:center;border-top:1px solid rgba(255,255,255,.09);padding:10px 0 12px;}
.foot-private{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 16px;border-radius:999px;
  font-size:10px;letter-spacing:.2em;font-weight:700;color:var(--text-muted);
  transition:color .25s ease,background-color .25s ease;
}
.foot-private svg{width:13px;height:13px;}
@media (hover:hover){.foot-private:hover{color:var(--white);background-color:rgba(255,255,255,.07);}}
@media (max-width:720px){
  .foot-glass{padding:18px 16px 0;}
  .foot-row{flex-direction:column;align-items:flex-start;gap:12px;}
  .foot-legal{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;width:100%;}
  .foot-legal a,.foot-legal button{text-align:left;padding:9px 0;font-size:10.5px;}
}

/* Entrata del footer (ui.js aggiunge html.fx-foot e poi .is-in al footer).
   Una sola volta, solo transform e opacity: nessun calcolo legato allo
   scroll, quindi niente scatti nemmeno con lo scroll a inerzia del telefono.
   Senza JavaScript o con "riduci movimento" il footer è già al suo posto.
   --fx0 = ritardo di partenza (in home aspetta il wordmark). */
html.fx-foot .site-footer:not(.is-in) .foot-social li,
html.fx-foot .site-footer:not(.is-in) .foot-glass,
html.fx-foot .site-footer:not(.is-in) .foot-glass :is(.foot-id,.foot-legal,.foot-private-row){opacity:0;}
.site-footer.is-in .foot-social li{
  animation:fxPop .95s var(--spring) both,fxFade .4s ease-out both;
  animation-delay:calc(var(--fx0,0s) + var(--i) * 70ms);
}
.site-footer.is-in .foot-glass{
  animation:fxLift 1.05s cubic-bezier(.16,1,.3,1) both,fxFade .5s ease-out both;
  animation-delay:calc(var(--fx0,0s) + .24s);
}
.site-footer.is-in .foot-glass :is(.foot-id,.foot-legal,.foot-private-row){
  animation:fxNudge .8s cubic-bezier(.16,1,.3,1) both,fxFade .5s ease-out both;
  animation-delay:calc(var(--fx0,0s) + .42s + var(--j,0) * 80ms);
}
@keyframes fxPop{from{transform:translate3d(0,22px,0) scale(.6)}to{transform:none}}
@keyframes fxLift{from{transform:translate3d(0,32px,0) scale(.985)}to{transform:none}}
@keyframes fxNudge{from{transform:translate3d(0,10px,0)}to{transform:none}}
@keyframes fxFade{from{opacity:0}to{opacity:1}}

/* ---------- Banner e preferenze cookie ---------- */
.cookie-consent{position:fixed;left:clamp(12px,3vw,32px);right:clamp(12px,3vw,32px);bottom:calc(clamp(12px,3vw,32px) + env(safe-area-inset-bottom,0px));z-index:99999;display:none;align-items:center;gap:24px;padding:17px 20px;--lg-tint:rgba(10,10,12,.62);--lg-blur:22px;color:#fff;}
.cookie-consent.is-visible{display:flex;animation:cookieIn .5s cubic-bezier(.22,1,.36,1) both;}
.cookie-copy{flex:1;min-width:0;}
.cookie-kicker{margin:0 0 5px;font-size:10px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);}
.cookie-text{margin:0;max-width:760px;font-size:12px;line-height:1.5;color:var(--text-soft);}
.cookie-text a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.cookie-actions{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.cookie-btn{appearance:none;border:1px solid var(--orange);background:var(--orange);color:#000;border-radius:999px;padding:12px 16px;min-height:40px;font:700 10px/1 'Grotesk',Arial,sans-serif;letter-spacing:.08em;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease;}
.cookie-btn-text{background:rgba(255,255,255,.04);color:var(--orange);}
@media (hover:hover){
  .cookie-btn:hover{background:#fff;border-color:#fff;color:#000;transform:translateY(-1px);}
  .cookie-btn-text:hover{background:var(--orange);border-color:var(--orange);color:#000;}
}
.cookie-preferences{position:fixed;inset:0;z-index:100000;display:none;place-items:center;padding:20px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.cookie-preferences.is-visible{display:grid;}
.cookie-panel{width:min(520px,100%);max-height:calc(100svh - 40px);overflow:auto;overscroll-behavior:contain;--lg-radius:22px;--lg-tint:rgba(12,12,14,.74);--lg-blur:26px;padding:24px;color:#fff;}
.cookie-panel-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px;}
.cookie-panel h2{margin:0;font-size:22px;letter-spacing:-.03em;}
.cookie-panel p{margin:8px 0 0;color:var(--text-muted);font-size:12px;line-height:1.55;}
.cookie-close{border:0;background:transparent;color:var(--text-soft);font-size:22px;line-height:1;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;flex-shrink:0;}
.cookie-category{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1);}
.cookie-category strong{display:block;font-size:12px;margin-bottom:4px;}
.cookie-category span{display:block;font-size:11px;color:var(--text-muted);line-height:1.45;}
.cookie-status{font-size:10px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)!important;white-space:nowrap;}
/* interruttore accessibile (checkbox nativa) */
.cookie-switch{position:relative;display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer;}
.cookie-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.cookie-switch .track{width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);position:relative;transition:background .2s ease;}
.cookie-switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s ease;}
.cookie-switch input:checked + .track{background:var(--orange);border-color:var(--orange);}
.cookie-switch input:checked + .track::after{transform:translateX(18px);background:#000;}
.cookie-switch input:focus-visible + .track{outline:2px solid var(--orange);outline-offset:3px;}
.cookie-panel-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:18px;}
@keyframes cookieIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
  .cookie-consent{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:stretch;gap:13px;padding:15px;--lg-radius:18px;}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
  .cookie-btn{width:100%;padding:13px 8px;}
  .cookie-btn-primary{grid-column:1/-1;order:-1;}
  .cookie-panel{padding:20px;--lg-radius:18px;}
}

/* ---------- Rivelazione allo scroll delle pagine interne (site.js) ---------- */
.reveal-ready [data-animate]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s var(--ease-out) var(--reveal-delay,0ms),transform .8s var(--ease-out) var(--reveal-delay,0ms);}
.reveal-ready [data-animate].is-in{opacity:1;transform:none;}
/* vetro: solo dissolvenza (muovere una lastra o il suo contenuto la ricompone a ogni fotogramma) */
.reveal-ready .lg[data-animate]{transform:none;transition:opacity .9s var(--ease-out) var(--reveal-delay,0ms);}
.link-btn{font:inherit;color:var(--orange);text-decoration:underline;text-underline-offset:3px;padding:0;display:inline;}

/* Alone arancione statico per le pagine interne: dà al vetro qualcosa da rifrangere. */
.page-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.page-glow::before,.page-glow::after{content:"";position:absolute;border-radius:50%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(255,90,0,.62),rgba(255,90,0,.2) 55%,rgba(255,90,0,0));}
.page-glow::before{width:clamp(320px,55vw,820px);top:-22%;right:-16%;opacity:.55;}
.page-glow::after{width:clamp(240px,38vw,560px);bottom:-18%;left:-14%;opacity:.35;}
.page-glow.soft{opacity:.55;}

/* Passaggio tra le pagine: dissolvenza morbida invece dello stacco netto
   (View Transitions tra documenti; i browser che non la supportano la ignorano). */
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.4,0,.2,1);}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}