/* ============================================================
   fboriani.com — design system «Dinamica»
   Palette allineata a ZCS People · Space Grotesk + Barlow
   ============================================================ */

:root {
  --fondo: #0b0d1f;
  --fondo-2: #0f1228;
  --vetro: rgba(255, 255, 255, .045);
  --vetro-forte: rgba(255, 255, 255, .07);
  --bordo: rgba(127, 179, 220, .18);
  --bordo-forte: rgba(127, 179, 220, .34);
  --blu: #2A71A6;
  --blu-chiaro: #7fb3dc;
  --blu-ghiaccio: #9fd0f5;
  --ghiaccio-velato: rgba(159, 208, 245, .78);   /* blu ghiaccio un po' trasparente: riga del ruolo nell'hero (8/9/2026) */
  --testo: #e8ecf5;
  --attenuato: #a9b3c8;
  --attenuato-2: #8fa3c0;
  --footer: #07081a;
  --raggio: 14px;
  --raggio-g: 16px;
  --titoli: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corpo: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sx: 50%;
  --sy: 50%;
}

/* ---------- base ---------- */
[id] { scroll-margin-top: 88px; }   /* le ancore non finiscono sotto l'intestazione fissa */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--blu-chiaro); text-decoration: none; transition: color .2s; }
a:hover { color: var(--blu-ghiaccio); }
p { margin: 0 0 16px; }
ul { margin: 0; padding: 0; list-style: none; }
strong { color: #fff; font-weight: 600; }
:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--titoli); line-height: 1.08; margin: 0; color: #fff; letter-spacing: -.02em; }
h1 { font-size: clamp(44px, 6vw, 92px); font-weight: 700; }
h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; }
h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.3; }
.testo-grande { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.62; }
.attenuato { color: var(--attenuato); }

.salta {
  position: absolute; left: -999px; top: 10px; z-index: 100;
  background: var(--blu); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.salta:focus { left: 10px; }

/* ---------- layout ---------- */
.contenitore { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.contenitore--stretto { max-width: 820px; }
.contenitore--largo { max-width: 1440px; }   /* Imprese e Idee in home: larghezza del mockup D (1440) */
.sezione { padding-block: clamp(56px, 8vw, 96px); }
.sezione--bordo { border-top: 1px solid var(--bordo); }
.sezione--compatta { padding-block: clamp(40px, 5vw, 64px); }

.griglia-2, .griglia-3, .griglia-4 { display: grid; gap: 22px; }
.griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.intestazione-sezione { text-align: center; margin-bottom: clamp(32px, 4vw, 50px); }
.intestazione-sezione .etichetta { display: block; margin-bottom: 14px; }
.intestazione-sezione--riga { display: flex; justify-content: space-between; align-items: baseline; text-align: left; gap: 24px; flex-wrap: wrap; }

/* ---------- componenti ---------- */
.etichetta {
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--blu-chiaro);
}
.badge {
  display: inline-block; padding: 9px 22px; border: 1px solid var(--bordo-forte); border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--blu-chiaro);
}
/* pulsanti · stile «bordo di luce» (scelto il 7/9/2026 tra tre proposte, mockup/pulsanti-3-varianti.html):
   fondo scuro, un bagliore percorre il bordo; al passaggio accelera e l'interno si riempie di blu */
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 34px; border-radius: 999px; color: #fff;
  font-weight: 600; font-size: 15px; letter-spacing: .04em; border: 0; background: var(--fondo-2);
  position: relative; isolation: isolate; overflow: hidden; white-space: nowrap;
  transition: transform .28s ease, box-shadow .28s ease;
}
.pill::before {
  content: ''; position: absolute; inset: -60%; z-index: -2;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(159, 208, 245, .25) 74%, var(--blu-ghiaccio) 82%, rgba(159, 208, 245, .25) 90%, transparent 100%);
  animation: giro 3.4s linear infinite;
}
.pill::after { content: ''; position: absolute; inset: 1.5px; border-radius: inherit; z-index: -1; background: linear-gradient(180deg, #17305a, #0f1e3c); transition: background .3s ease; }
.pill:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(42, 113, 166, .35); }
.pill:hover::after { background: linear-gradient(180deg, var(--blu), #1d5480); }
.pill:hover::before { animation-duration: 1.1s; }
.pill svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .28s ease; }
.pill:hover svg { transform: translateX(4px); }
.pill--ghost::before { background: conic-gradient(from 0deg, transparent 0 70%, rgba(127, 179, 220, .5) 85%, transparent 100%); animation-duration: 6s; }
.pill--ghost::after { background: var(--fondo); }
.pill--ghost:hover::after { background: rgba(255, 255, 255, .06); }
.pill--gradiente { }   /* le CTA usano lo stesso stile del principale */
@keyframes giro { to { transform: rotate(360deg); } }
.azioni { display: flex; gap: 14px; flex-wrap: wrap; }
.azioni--centro { justify-content: center; }

.vetro {
  background: var(--vetro); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 30px 28px; transition: border-color .3s ease, background .3s ease;
}
.vetro:hover { border-color: var(--bordo-forte); background: var(--vetro-forte); }
.vetro--evidenza {
  background: linear-gradient(160deg, rgba(42, 113, 166, .32), rgba(42, 113, 166, .08));
  border-color: rgba(42, 113, 166, .55); box-shadow: 0 0 44px rgba(42, 113, 166, .22);
}
.vetro--evidenza:hover { border-color: rgba(42, 113, 166, .8); }
.vetro .etichetta { display: block; margin-bottom: 14px; }
.vetro h3 { margin-bottom: 10px; }
.vetro p { color: var(--attenuato); font-size: 15.5px; line-height: 1.7; margin: 0; }
.vetro__icona { display: block; width: 30px; height: 30px; margin-bottom: 18px; color: var(--blu-chiaro); }  /* block: da inline i 30px erano ignorati e l'svg riempiva la card */
.vetro__icona svg { width: 100%; height: 100%; }
/* misure del mockup D per le due sezioni in home */
.griglia--imprese { gap: 24px; }
.griglia--imprese .vetro { padding: 38px 34px; }
.griglia--imprese .vetro .etichetta { font-size: 11px; font-weight: 700; letter-spacing: .16em; display: block; margin-bottom: 16px; }
.griglia--imprese .vetro h3 { font-size: clamp(22px, 1.9vw, 27px); margin-bottom: 12px; }
.griglia--imprese .vetro p { font-size: 15px; }
/* Quattro temi in Idee (11/9/2026): card corte e uguali, link «linea che cresce» allineato in basso */
.griglia--temi .vetro { display: flex; flex-direction: column; }
.griglia--temi .vetro h3 { font-size: 20px; }
.griglia--temi .vetro p { font-size: 15px; }
.griglia--temi .freccia { margin-top: auto; padding-top: 22px; align-self: flex-start; }
.griglia--temi .freccia::after { bottom: 0; }

.titolo-gradiente {
  color: var(--blu-chiaro);
  background: linear-gradient(100deg, #ffffff 20%, var(--blu-ghiaccio) 55%, #5a8fc0 85%, #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: luccica 20s linear infinite;
}
/* glitch a fasce: attivo solo mentre il titolo si decodifica (classe messa dallo script) */
.decodifica { position: relative; animation: tremolio .14s steps(2) infinite; }
.decodifica::before, .decodifica::after {
  content: attr(data-testo); position: absolute; inset: 0; pointer-events: none; background: none;
  -webkit-text-fill-color: currentColor; opacity: .85; mix-blend-mode: screen;
}
.decodifica::before { color: var(--blu-ghiaccio); animation: glitch1 .34s steps(1) infinite; }
.decodifica::after { color: var(--blu); animation: glitch2 .27s steps(1) infinite; }
@keyframes glitch1 {
  0% { clip-path: inset(8% 0 72% 0); transform: translate(-7px, -2px) skewX(-6deg); }
  25% { clip-path: inset(52% 0 22% 0); transform: translate(6px, 1px) skewX(4deg); }
  50% { clip-path: inset(30% 0 48% 0); transform: translate(-5px, 2px) skewX(-3deg); }
  75% { clip-path: inset(74% 0 4% 0); transform: translate(7px, -1px) skewX(5deg); }
  100% { clip-path: inset(0 0 84% 0); transform: translate(-6px, 0) skewX(-5deg); }
}
@keyframes glitch2 {
  0% { clip-path: inset(60% 0 12% 0); transform: translate(6px, 1px) skewX(5deg); }
  25% { clip-path: inset(14% 0 66% 0); transform: translate(-7px, -1px) skewX(-4deg); }
  50% { clip-path: inset(80% 0 0 0); transform: translate(5px, 2px) skewX(3deg); }
  75% { clip-path: inset(36% 0 40% 0); transform: translate(-6px, 0) skewX(-6deg); }
  100% { clip-path: inset(22% 0 58% 0); transform: translate(7px, -2px) skewX(4deg); }
}
@keyframes tremolio { 0% { transform: skewX(0); } 50% { transform: skewX(1.5deg) translateX(1px); } 100% { transform: skewX(-1deg) translateX(-1px); } }
@keyframes luccica { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* card Imprese in home: si girano al clic (fronte/retro nella stessa cella di griglia = stessa altezza) */
.carta { display: grid; perspective: 1400px; cursor: pointer; outline: none; }   /* grid: le facce riempiono tutta l'altezza della riga */
.carta__facce { display: grid; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2,.7,.2,1); height: 100%; }
.carta__fronte, .carta__retro { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; }
.carta__retro { transform: rotateY(180deg); justify-content: center; }
.carta__retro .pill { align-self: flex-start; margin-top: 8px; }
.carta.girata .carta__facce { transform: rotateY(180deg); }
.carta__cenno { margin-top: auto; padding-top: 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--attenuato-2); opacity: .8; transition: color .3s ease; }
.carta:hover .carta__cenno, .carta:focus-visible .carta__cenno { color: var(--blu-chiaro); }
.carta:focus-visible .carta__fronte, .carta:focus-visible .carta__retro { border-color: var(--blu-chiaro); }
@media (prefers-reduced-motion: reduce) { .carta__facce { transition: none; } }

/* stat */
.stat { padding: 30px 30px 26px; }
.stat__numero { font-family: var(--titoli); font-size: clamp(36px, 3.2vw, 46px); font-weight: 700; color: #fff; line-height: 1; }
.stat__etichetta { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--attenuato-2); margin-top: 10px; }
.stat__azienda { color: var(--attenuato-2); opacity: .5; font-weight: 500; }   /* nome dell'azienda: seconda riga, più in ombra */
.numeri { position: relative; z-index: 3; margin-top: -30px; }

/* citazione */
.citazione { position: relative; overflow: hidden; text-align: center; }
.citazione blockquote {
  margin: 0 auto; max-width: 960px; font-family: var(--titoli); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.45; color: #fff; position: relative;
}
.citazione__alone {
  position: absolute; top: -260px; right: -160px; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 113, 166, .38), rgba(42, 113, 166, .16) 40%, transparent 70%); will-change: transform;
  animation: deriva2 48s ease-in-out infinite alternate; pointer-events: none;
}

/* media */
.media-riga {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 40px; gap: 28px; padding: 24px 0;
  border-top: 1px solid var(--bordo); align-items: center; color: var(--testo); transition: background .2s;
}
.media-riga:last-child { border-bottom: 1px solid var(--bordo); }
.media-riga:hover { background: rgba(127, 179, 220, .04); }
.media-riga__quando { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blu-chiaro); }
.media-riga__titolo { font-size: 18px; }
.media-riga__freccia { color: var(--blu-chiaro); text-align: right; }

/* foto */
.foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; border: 1px solid var(--bordo); background: var(--vetro); }
/* tessera «passione senza foto» (es. intelligenza artificiale): stesse misure di una foto */
.foto--ia { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(22px, 2.4vw, 34px); color: var(--testo);
  background: radial-gradient(420px 260px at 80% 20%, rgba(42, 113, 166, .35), transparent 70%), var(--vetro); transition: border-color .3s ease, background .3s ease; }
.foto--ia:hover { border-color: var(--bordo-forte); }
.foto--ia .vetro__icona { margin-bottom: 0; }
.foto--ia h3 { font-size: clamp(20px, 1.7vw, 24px); }
.foto--ia p { margin: 0; color: var(--attenuato); font-size: 15px; line-height: 1.6; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.foto:hover img { transform: scale(1.04); }
.foto--alta { aspect-ratio: 3 / 4; }
.segnaposto {
  aspect-ratio: 4 / 3; border-radius: 12px; border: 1px dashed var(--bordo-forte); background: var(--vetro);
  display: flex; align-items: flex-end; padding: 14px; font-size: 13px; color: var(--attenuato-2);
}
.didascalia { font-size: 14px; color: var(--attenuato-2); margin-top: 10px; }

/* faq */
.faq details { border-top: 1px solid var(--bordo); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--bordo); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  font-family: var(--titoli); font-size: 19px; font-weight: 600; color: #fff;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--blu-chiaro); font-size: 26px; line-height: 1; flex-shrink: 0; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--attenuato); margin: 12px 0 0; max-width: 760px; }

/* briciole */
.briciole { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--attenuato-2); margin-bottom: 22px; }
.briciole a { color: var(--attenuato-2); }
.briciole a:hover { color: var(--blu-chiaro); }
.briciole span::before { content: '/'; margin-right: 10px; opacity: .5; }
.briciole span:first-child::before { content: none; margin: 0; }

/* bozze (interruttore nel generatore) */
.bozza { color: #6d7791; font-size: .92em; }

/* ---------- header ---------- */
#progresso {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--blu), var(--blu-ghiaccio));
}
#intestazione {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px clamp(20px, 4vw, 56px);
  background: rgba(11, 13, 31, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo);
  transition: padding .3s ease, background .3s ease;
}
#intestazione.compatta { padding-block: 9px; background: rgba(11, 13, 31, .94); }
.marchio { display: flex; align-items: center; gap: 10px; font-family: var(--titoli); font-weight: 700; font-size: 18px; color: #fff; }
.marchio:hover { color: #fff; }
/* marchio «linea che cresce» (scelto l'11/9/2026 tra sei proposte, mockup/marchio-6-varianti.html):
   a riposo solo pallino e nome; al passaggio cresce una linea blu ghiaccio sotto il nome, come i link «freccia» */
.marchio__nome { position: relative; padding-bottom: 3px; }
.marchio__nome::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--blu-ghiaccio); opacity: 0; transition: width .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.marchio:hover .marchio__nome::after { width: 100%; opacity: 1; }
.marchio__punto { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--blu); box-shadow: 0 0 12px var(--blu); animation: pulsa 3.2s ease-in-out infinite; }
/* da piccolo semitrasparente, da grande colore pieno */
@keyframes pulsa { 0%, 100% { transform: scale(1); opacity: .45; box-shadow: 0 0 12px var(--blu); } 50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 20px 2px var(--blu); } }
#menu { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
#menu a { color: var(--testo); }
#menu a:hover, #menu a.attivo { color: var(--blu-chiaro); }
#menu .pill { padding: 10px 24px; font-size: 13px; color: #fff; }
#menu .pill:hover { transform: none; box-shadow: 0 0 24px rgba(42, 113, 166, .35); }
.menu-toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: none; border: 1px solid var(--bordo); border-radius: 8px; color: #fff; cursor: pointer; padding: 0;
}
.menu-toggle svg { width: 22px; height: 22px; }

/* ---------- hero ---------- */
.eroe {
  position: relative; overflow: hidden; background: var(--fondo);
  min-height: min(calc(100svh - 74px), 900px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(56px, 7vw, 100px) clamp(20px, 4vw, 56px) clamp(80px, 9vw, 120px);
}
.eroe__tela { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.eroe__griglia {
  position: absolute; inset: 0; opacity: .5; z-index: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(127, 179, 220, .05) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(127, 179, 220, .05) 0 1px, transparent 1px 80px);
  animation: griglia 60s linear infinite;
}
.eroe__alone { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; will-change: transform; }
.eroe__alone--1 { top: -360px; left: -280px; width: 1150px; height: 1150px; background: radial-gradient(closest-side, rgba(42, 113, 166, .48), rgba(42, 113, 166, .22) 38%, transparent 70%); animation: deriva1 44s ease-in-out infinite alternate; }
.eroe__alone--2 { bottom: -440px; right: -320px; width: 1250px; height: 1250px; background: radial-gradient(closest-side, rgba(91, 186, 213, .28), rgba(91, 186, 213, .12) 40%, transparent 70%); animation: deriva2 58s ease-in-out infinite alternate; }
.eroe__vignetta { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(900px 500px at 50% 45%, transparent 0%, rgba(11, 13, 31, .55) 100%); }
.eroe__contenuto { position: relative; z-index: 2; max-width: 900px; }
/* etichetta che compare quando il mouse ferma il pallino rosso della rete */
.eroe__missione {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%) translateY(4px); transition: opacity .35s ease, transform .35s ease;
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(11, 13, 31, .9); border: 1px solid rgba(255, 90, 110, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--titoli); font-size: 15px; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 24px rgba(255, 90, 110, .22);
}
.eroe__missione.visibile { opacity: 1; transform: translate(-50%, -100%) translateY(-16px); }
.eroe__missione em { font-style: normal; color: #ff8a9a; font-weight: 700; margin-right: 2px; }
.eroe__missione-punto { width: 8px; height: 8px; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 10px #ff5a6e; flex-shrink: 0; }
@media (max-width: 767px) { .eroe__missione { white-space: normal; max-width: 82vw; border-radius: 14px; font-size: 14px; } }
.eroe__contenuto .badge { margin-bottom: 30px; }
.eroe__contenuto h1 { margin-bottom: 20px; }
.eroe__ruolo { font-size: clamp(15px, 1.3vw, 19px); font-weight: 500; color: var(--ghiaccio-velato); margin-bottom: 28px; }
/* link «freccia» della home: stile 1 «linea che cresce» in blu ghiaccio (scelto l'8/9/2026, mockup/link-3-varianti.html) */
.freccia {
  display: inline-flex; align-items: center; gap: 10px; position: relative; padding-bottom: 6px;
  color: var(--blu-ghiaccio); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: color .25s ease;
}
.freccia svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .28s ease; }
.freccia::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 22px; background: var(--blu-ghiaccio); opacity: .7; transition: width .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.freccia:hover { color: #fff; }
.freccia:hover::after { width: 100%; opacity: 1; }
.freccia:hover svg { transform: translateX(4px); }
.eroe__testo { max-width: 760px; margin: 0 auto 40px; color: var(--testo); }
.eroe--interno { min-height: 0; padding: clamp(48px, 6vw, 84px) clamp(20px, 4vw, 56px); text-align: left; justify-content: flex-start; }
.eroe--interno .eroe__contenuto { max-width: 1200px; width: 100%; margin-inline: auto; }
.eroe--interno h1 { font-size: clamp(36px, 4.6vw, 64px); margin-bottom: 14px; }
.eroe--interno .eroe__testo { margin: 0; max-width: 720px; color: var(--attenuato); }

@keyframes deriva1 { from { transform: translate(-6%, -4%) scale(1); } to { transform: translate(8%, 10%) scale(1.2); } }
@keyframes deriva2 { from { transform: translate(9%, 7%) scale(1.14); } to { transform: translate(-8%, -10%) scale(.92); } }
@keyframes griglia { from { background-position: 0 0, 0 0; } to { background-position: 320px 0, 0 320px; } }

/* ---------- chi sono ---------- */
.chi-sono { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border-top: 1px solid var(--bordo); }
.chi-sono__ritratto {
  position: relative; min-height: 540px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  background: radial-gradient(600px 480px at 50% 78%, rgba(42, 113, 166, .4), transparent 70%);
}
.chi-sono__ritratto::before, .chi-sono__ritratto::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; border: 1px solid var(--bordo-forte);
}
.chi-sono__ritratto::before { bottom: -140px; width: 560px; height: 560px; opacity: .8; }
.chi-sono__ritratto::after { bottom: -60px; width: 380px; height: 380px; opacity: .6; }
.chi-sono__ritratto img { position: relative; height: 500px; width: auto; max-width: none; filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .6)); }
.chi-sono__testo { padding: clamp(40px, 6vw, 84px) clamp(24px, 5vw, 64px); }
.chi-sono__testo .etichetta { display: block; margin-bottom: 20px; }
.chi-sono__testo h2 { margin-bottom: 22px; }
.chi-sono__testo p { color: var(--attenuato); }

/* ---------- effetti (classi agganciate dal JS) ---------- */
.js .rivela { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .rivela.visibile { opacity: 1; transform: none; }
.tilt { transform-style: preserve-3d; will-change: transform; }
/* card «sobria» (pagina Imprese, 8/9/2026): al passaggio si solleva di poco, il bordo si accende, un filo di luce si
   disegna lungo il bordo superiore e un riflesso attraversa la card una volta sola */
.vetro--sobria { position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease, box-shadow .45s ease, background .45s ease; }
.vetro--sobria::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--blu-ghiaccio), transparent); transform: translateX(-50%); transition: width .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.vetro--sobria::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 30%; background: linear-gradient(105deg, transparent, rgba(159, 208, 245, .08) 50%, transparent); transform: skewX(-16deg) translateX(-140%); pointer-events: none; }
.vetro--sobria:hover { transform: translateY(-4px); border-color: var(--bordo-forte); box-shadow: 0 22px 50px rgba(0, 0, 0, .35), 0 0 0 1px rgba(159, 208, 245, .12); }
.vetro--sobria:hover::before { width: 100%; }
.vetro--sobria:hover::after { transform: skewX(-16deg) translateX(560%); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.vetro--sobria > * { position: relative; z-index: 1; }
.spot { position: relative; }
.spot::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(620px circle at var(--sx) var(--sy), rgba(42, 113, 166, .16), transparent 62%);
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* ---------- articolo ---------- */
.articolo { max-width: 780px; margin-inline: auto; }
.articolo__meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--attenuato-2); margin: 18px 0 34px; }
.articolo p { font-size: 18px; line-height: 1.78; color: #c9d1e0; margin-bottom: 22px; }
.articolo h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 40px 0 16px; }
.articolo blockquote { margin: 34px 0; padding: 22px 28px; border-left: 3px solid var(--blu); background: var(--vetro); border-radius: 0 12px 12px 0; font-family: var(--titoli); font-size: 21px; color: #fff; line-height: 1.45; }

/* timeline */
.timeline { position: relative; padding-left: 34px; border-left: 1px solid var(--bordo-forte); display: flex; flex-direction: column; gap: 34px; }
.timeline__voce { position: relative; }
.timeline__voce::before { content: ''; position: absolute; left: -41px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--fondo); border: 3px solid var(--blu); box-shadow: 0 0 14px rgba(42, 113, 166, .6); }
/* il pallino di «Oggi» pulsa come quello del marchio */
.timeline__voce--oggi::before { animation: pulsa-oggi 3.2s ease-in-out infinite; }
@keyframes pulsa-oggi { 0%, 100% { transform: scale(1); background: var(--fondo); box-shadow: 0 0 14px rgba(42, 113, 166, .6); } 50% { transform: scale(1.25); background: var(--blu); box-shadow: 0 0 26px 4px rgba(42, 113, 166, .9); } }
.timeline__quando { font-family: var(--titoli); font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.timeline__voce p { color: var(--attenuato); margin: 0; }

/* ---------- contatti: modulo Netlify (21/9/2026) ---------- */
.contatti { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .8fr); gap: 40px; align-items: start; }
.modulo { display: grid; gap: 18px; padding: 36px 34px; }
.modulo:hover { background: var(--vetro); border-color: var(--bordo); }
.modulo__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.modulo label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--attenuato); }
.modulo__facoltativo { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--attenuato-2); margin-left: 6px; }
.modulo input[type="text"], .modulo input[type="email"], .modulo textarea {
  width: 100%; font: inherit; font-family: var(--corpo); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--testo);
  background: rgba(11, 13, 31, .55); border: 1px solid var(--bordo); border-radius: 10px; padding: 13px 15px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.modulo textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.modulo input:focus, .modulo textarea:focus { outline: none; border-color: var(--blu-chiaro); box-shadow: 0 0 0 3px rgba(127, 179, 220, .18); background: rgba(11, 13, 31, .8); }
.modulo__consenso { grid-template-columns: auto 1fr; align-items: start; gap: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 14.5px; line-height: 1.55; color: var(--attenuato); }
.modulo__consenso input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blu); }
.modulo__nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo button.pill { font-family: var(--corpo); cursor: pointer; justify-self: start; margin-top: 6px; }
.contatti__lato { padding-top: 8px; }
.contatti__lato .etichetta { display: block; margin-bottom: 14px; }
.contatti__lato p { color: var(--testo); margin-bottom: 14px; }

/* ---------- cta + footer ---------- */
.cta { text-align: center; }
.cta h2 { margin-bottom: 14px; }
.cta p { color: var(--attenuato); margin-bottom: 34px; }
/* footer (8/9/2026): sede, email, PEC, social e collegamenti */
.pie { background: var(--footer); color: #7a83a0; font-size: 14px; padding: 48px clamp(20px, 4vw, 56px) 34px; }
.pie a { color: var(--blu-chiaro); }
.pie a:hover { color: var(--blu-ghiaccio); }
.pie__griglia { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--bordo); }
.pie__blocco p { margin: 0 0 6px; line-height: 1.6; }
.pie__marchio { font-family: var(--titoli); font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 10px; }
.pie__social { text-align: right; }
.pie__seguimi { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--attenuato-2); margin: 4px 0 12px !important; }
.pie__icone { display: flex; gap: 12px; justify-content: flex-end; }
.pie__icone a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--bordo-forte); display: inline-grid; place-items: center; color: var(--testo); background: rgba(255, 255, 255, .03); transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.pie__icone a svg { width: 18px; height: 18px; }
.pie__icone a:hover { background: var(--blu); border-color: var(--blu); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(42, 113, 166, .35); }
.pie__base { max-width: 1200px; margin: 22px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.pie__base nav { display: flex; gap: 26px; flex-wrap: wrap; }

/* ---------- riduzione movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .eroe__tela { display: none; }
  .js .rivela { opacity: 1; transform: none; }
  .spot::before { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .chi-sono__ritratto img { height: 440px; }
}
@media (max-width: 1023px) {
  .griglia-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chi-sono { grid-template-columns: 1fr; }
  .chi-sono__ritratto { min-height: 420px; }
  .chi-sono__ritratto img { height: 400px; }
  .media-riga { grid-template-columns: 170px minmax(0, 1fr) 30px; gap: 18px; }
  .contatti { grid-template-columns: 1fr; }
  .eroe { min-height: min(calc(100svh - 66px), 820px); }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .griglia-2, .griglia-3, .griglia-4 { grid-template-columns: 1fr; }
  .numeri { margin-top: -16px; }
  .menu-toggle { display: inline-flex; }
  #menu {
    display: none; position: fixed; top: 66px; left: 0; right: 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 24px;
    background: rgba(11, 13, 31, .98); border-bottom: 1px solid var(--bordo);
  }
  #menu.aperto { display: flex; }
  #menu a { padding: 14px 4px; border-bottom: 1px solid var(--bordo); font-size: 15px; }
  #menu .pill { margin-top: 14px; justify-content: center; border: none; }
  #intestazione { padding: 12px 20px; }
  .eroe { padding-bottom: 64px; }
  .eroe__contenuto .badge { margin-bottom: 22px; letter-spacing: .14em; }
  .eroe__ruolo { line-height: 1.5; }
  .eroe .azioni { flex-direction: column; align-items: stretch; }
  .eroe .azioni .pill { justify-content: center; }
  .chi-sono__ritratto { min-height: 360px; }
  .chi-sono__ritratto img { height: 340px; }
  .media-riga { grid-template-columns: 1fr; gap: 6px; }
  .modulo__griglia { grid-template-columns: 1fr; }
  .modulo { padding: 26px 20px; }
  .media-riga__freccia { display: none; }
  .pie__griglia { grid-template-columns: 1fr; }
  .pie__social { text-align: left; }
  .pie__icone { justify-content: flex-start; }
  .pie__base { flex-direction: column; align-items: flex-start; }
  .intestazione-sezione--riga { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 519px) {
  .sezione { padding-block: 48px; }
  .vetro { padding: 24px 22px; }
  .stat__numero { font-size: 34px; }
  .eroe__contenuto .badge { font-size: 11px; padding: 8px 16px; }
}