/* ═══════════════════════════════════════════════════════════════════
   GenAct — Generative Acta S.r.l. · style.css (sito multi-pagina)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #06060e;
  --panel: #0c0c18;
  --panel-2: #0d0d1c;
  --text: #f0f0f8;
  --red: #96a6ff;
  --purple: #7a8aff;
  --purple-light: #c5cdff;
  --teal: #b9c3ff;
  --blue: #d3dbff;
  --brand-dot: #96a6ff;
  --mono: 'Manrope', system-ui, sans-serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Impedisce ai browser Android di gonfiare autonomamente il testo (layout diversi da iOS) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* colore base dietro alla rete di sfondo globale (body ora trasparente) */
  background: var(--bg);
}
/* Sfondo globale: la rete di particelle come tappeto fisso di TUTTE le pagine.
   Sta dietro al contenuto (z-index -1), sopra al colore base di html. */
.site-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Larghezza ESPLICITA: un <canvas> è un elemento "replaced", con solo
     left/right:0 NON si allarga (resta alla larghezza intrinseca) e su
     monitor grandi lasciava una fascia nera a destra. 100vw copre l'intera
     finestra (scrollbar inclusa); essendo fixed non crea scroll orizzontale. */
  width: 100vw;
  /* Altezza STABILE: su iOS 'height:100%'/inset cambiava col ritrarsi della
     barra, facendo scattare lo sfondo. 100lvh (large viewport) non cambia. */
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
}
body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  /* clip (non hidden): taglia l'overflow orizzontale SENZA trasformare il body
     in un contenitore di scroll. Con hidden, la nav sticky + backdrop-filter
     produceva la "tenda nera" che copriva la pagina durante lo scroll.
     La riga hidden resta come fallback per i browser senza supporto a clip. */
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: var(--purple); color: #06060e; }
input::placeholder, textarea::placeholder { color: rgba(240,240,248,.28); }

.accent-red    { color: var(--red); }
.accent-purple { color: var(--purple); }
.accent-teal   { color: var(--teal); }
.accent-blue   { color: var(--blue); }

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes gaPulse    { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.82)} }
@keyframes gaShimmer  { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
@keyframes gaRotate   { to{transform:rotate(360deg)} }
@keyframes gaRotateR  { to{transform:rotate(-360deg)} }
@keyframes gaBounce   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

[data-reveal] { will-change: transform, opacity; }

/* Testo solo per screen reader e motori di ricerca (invisibile) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ═══ NAV ══════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 32px;
  height: 60px;
  background: rgba(6,6,14,.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
}
.wordmark-dot { color: var(--brand-dot); }
.wordmark-sm { font-size: 18px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
  color: rgba(240,240,248,.55);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-link:hover { color: var(--text); }
.nav-link.active {
  color: var(--text);
  border-bottom-color: var(--red);
}
.nav-cta {
  position: relative;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  color: #06060e;
  background: linear-gradient(135deg, var(--red), var(--purple));
  padding: 9px 22px;
  border-radius: 100px;
  box-shadow: 0 4px 24px -4px rgba(150, 166, 255,.45);
  transition: box-shadow .3s;
  flex-shrink: 0;
}
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-menu {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 199;
  flex-direction: column;
  background: rgba(6,6,14,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 32px 20px;
}
.nav-menu.open { display: flex; }
.nav-menu .nav-link {
  padding: 14px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
@media (max-width: 899px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ═══ HERO (home) ══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
/* La frase d'impatto (badge + titolo + lead) riempie la prima schermata,
   centrata; manifesto e barre valori scendono sotto la piega (scroll). */
.hero-statement {
  min-height: calc(100svh - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(122, 138, 255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 138, 255,.07) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 20%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 20%, transparent 85%);
}
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  filter: blur(80px);
}
.hero-orbit {
  position: absolute;
  /* ancorato al centro della PRIMA schermata (svh), non al 50% della hero ora
     più alta — altrimenti i cerchi scivolavano giù verso il manifesto */
  top: 40svh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 560px;
  z-index: 1;
  pointer-events: none;
  opacity: .32;
}
@media (max-width: 1100px) { .hero-orbit { display: none; } }
.orbit-ring { position: absolute; border-radius: 50%; }
.orbit-ring-1 { inset: 0;    border: 1px solid rgba(122, 138, 255,.22); animation: gaRotate 36s linear infinite; }
.orbit-ring-2 { inset: 38px; border: 1px solid rgba(150, 166, 255,.18);  animation: gaRotateR 24s linear infinite; }
.orbit-ring-3 { inset: 76px; border: 1px solid rgba(185, 195, 255,.14); animation: gaRotate 18s linear infinite; }
.orbit-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  background: var(--purple);
  border-radius: 50%;
  box-shadow: 0 0 24px 6px rgba(122, 138, 255,.7);
}
.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(240,240,248,.55);
  text-decoration: none;
  transition: color .2s;
}
.scroll-cue:hover { color: rgba(240,240,248,.9); }
.scroll-cue svg { animation: gaBounce 2s ease-in-out infinite; }
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 64px;
  align-items: center;
  text-align: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid rgba(185, 195, 255,.25);
  border-radius: 100px;
  background: rgba(185, 195, 255,.05);
  margin-top: 40px;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--teal);
  animation: gaPulse 2.2s ease-in-out infinite;
}
.badge-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(240,240,248,.7);
}
.hero-title {
  margin: 0 0 28px;
  font-size: clamp(48px, 8.5vw, 100px);
  line-height: .96;
  font-weight: 800;
  letter-spacing: -.04em;
}
.hero-title > span { display: block; }
.hero-title-shimmer {
  background: linear-gradient(110deg, var(--red), var(--purple-light), var(--blue), var(--purple-light), var(--red));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gaShimmer 9s linear infinite;
  filter: drop-shadow(0 0 48px rgba(150, 166, 255,.35));
}
.hero-title-muted { color: rgba(240,240,248,.45); }
.home-approccio {
  max-width: 60ch;
  margin: 44px auto 0;
}
.manifesto-lead {
  margin: 0;
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 600;
  line-height: 1.45;
  color: rgba(240,240,248,.92);
  text-align: center;
}
.home-approccio p {
  margin: 0 0 26px;
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.7;
  color: rgba(240,240,248,.65);
  text-align: center;
}
.home-approccio p:last-child { margin-bottom: 0; }
.home-approccio strong { color: var(--text); font-weight: 600; }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 52px;
}
.btn-primary {
  position: relative;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  color: #06060e;
  background: var(--red);
  padding: 15px 32px;
  border-radius: 100px;
  box-shadow: 0 8px 32px -8px rgba(150, 166, 255,.55);
  transition: background .45s, box-shadow .45s;
}
.btn-primary-lg {
  font-size: 14px;
  font-weight: 700;
  padding: 17px 38px;
  overflow: visible;
}
.btn-ghost {
  position: relative;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--text);
  padding: 15px 32px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.03);
  transition: background .3s, border-color .3s;
}
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.3); }
/* Barre a tutta larghezza, una sotto l'altra (stesso sviluppo dell'accordion di cosa-facciamo) */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 940px;
  width: 100%;
  margin: 56px auto 0;
}
.stat-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 22px 28px;
  /* Sfondo OPACO: la rete di particelle resta dietro, visibile solo negli
     spazi tra le barre, non attraverso di esse. Velo di luce in cima per
     non appiattire il blocco. */
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), #0a0a15;
  transition: border-color .5s, box-shadow .5s;
  text-align: center;
}
.stat-card:hover { border-color: rgba(255,255,255,.18); }
/* Blocchi informativi: stesso stile di bordo delle barre valori del hero.
   Applicare ai blocchi di contenuto; NON ai banner CTA di fine pagina. */
.info-box {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.025);
  padding: 30px clamp(22px, 4vw, 40px);
  transition: border-color .5s;
}
.info-box:hover { border-color: rgba(255,255,255,.18); }
.stat-value {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 5px;
}
.stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(240,240,248,.55);
}
.spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  z-index: 0;
}

/* ═══ PAGE HEAD (pagine interne) ═══════════════════════════════ */
.page-head {
  position: relative;
  padding: 88px 32px 20px;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(122, 138, 255,.07), transparent 65%);
}
.page-head .container { max-width: 1120px; }
.page-title {
  margin: 0 0 18px;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.03em;
  max-width: 20ch;
}
.page-sub {
  margin: 0 0 24px;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.7;
  color: rgba(240,240,248,.65);
  max-width: 58ch;
}
.page-sub strong { color: var(--text); font-weight: 600; }

/* ═══ SEZIONI (condivise) ══════════════════════════════════════ */
.section {
  padding: 96px 32px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.section-flush { border-top: none; padding-top: 48px; }
.section-compliance { padding: 72px 32px; }
.section-glow-top-soft { background: radial-gradient(ellipse 70% 50% at 50% 0%,   rgba(122, 138, 255,.05), transparent 65%); }
.section-glow-bottom   { background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(150, 166, 255,.05),  transparent 70%); }
.container { max-width: 1120px; margin: 0 auto; }
.kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 48px;
}
.kicker-tight { margin-bottom: 28px; }
.kicker > span:first-child {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
}
.kicker-red    > span:first-child { color: var(--red); }
.kicker-purple > span:first-child { color: var(--purple); }
.kicker-teal   > span:first-child { color: var(--teal); }
.kicker-blue   > span:first-child { color: var(--blue); }
.kicker-muted  > span:first-child { color: rgba(240,240,248,.5); font-weight: 500; }
.kicker-line { flex: 1; height: 1px; }
.kicker-line-red    { background: linear-gradient(90deg, rgba(150, 166, 255,.4),  transparent); }
.kicker-line-purple { background: linear-gradient(90deg, rgba(122, 138, 255,.4), transparent); }
.kicker-line-teal   { background: linear-gradient(90deg, rgba(185, 195, 255,.4), transparent); }
.kicker-line-blue   { background: linear-gradient(90deg, rgba(211, 219, 255,.4), transparent); }
.kicker-line-muted  { background: rgba(255,255,255,.09); }
.h2 {
  margin: 0;
  font-size: clamp(32px, 5.5vw, 58px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.03em;
}
.section-sub {
  margin: 0 0 48px;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.65;
  color: rgba(240,240,248,.6);
  max-width: 54ch;
}
.callout { border-left: 2px solid; padding: 4px 0 4px 22px; }
.callout p {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: .02em;
}
.callout-red    { border-color: rgba(150, 166, 255,.6);  margin-top: 40px; max-width: 64ch; }
.callout-red p  { color: rgba(240,240,248,.58); }

/* ═══ IL PROBLEMA (home) ═══════════════════════════════════════ */
.problema-title {
  margin-bottom: 52px;
  font-size: clamp(34px, 5.5vw, 62px);
  line-height: 1.04;
  max-width: 16ch;
}
.problema-list { display: flex; flex-direction: column; }
.problema-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 32px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.problema-row-last { border-bottom: 1px solid rgba(255,255,255,.08); }
.problema-index { font-family: var(--mono); font-size: 13px; color: rgba(240,240,248,.25); }
.problema-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--red);
  margin-bottom: 12px;
}
.problema-text {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 33px);
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.02em;
  max-width: 26ch;
}
.problema-text-wide { max-width: 28ch; }

/* ═══ CARD SERVIZI (anteprima home + testata cosa-facciamo) ════ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 16px;
  row-gap: 0;
}
@media (max-width: 1023px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card { margin-bottom: 16px; }
}
@media (max-width: 599px) {
  .svc-grid { grid-template-columns: 1fr; }
}
.svc-card {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  align-content: start;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 28px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color .3s, transform .1s, box-shadow .4s;
}
.svc-card:hover { border-color: rgba(122, 138, 255,.45); }
.svc-topline {
  position: absolute;
  top: 0;
  left: 28px;
  width: 60px;
  height: 3px;
  border-radius: 3px;
  z-index: 1;
}
/* Tutti i tratti alti nello stesso viola del sito (richiesta: nessuna variazione tonale) */
.svc-topline-red,
.svc-topline-purple,
.svc-topline-teal,
.svc-topline-blue { background: linear-gradient(90deg, var(--red), transparent); }
.svc-bignum {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.035);
  pointer-events: none;
  z-index: 0;
}
.svc-card > *:not(.spot):not(.svc-bignum):not(.svc-topline) { position: relative; z-index: 1; }
.svc-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(240,240,248,.6);
  margin-bottom: 16px;
}
.svc-title { margin: 0 0 6px; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.svc-tagline { margin: 0 0 20px; font-size: 16px; color: rgba(240,240,248,.58); font-weight: 500; }
.svc-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 9px;
  margin-bottom: 20px;
}
.svc-value-main { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.svc-value-note { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: rgba(240,240,248,.55); }
.svc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(240,240,248,.62);
  transition: color .2s;
}
.svc-card:hover .svc-link { color: var(--text); }
.svc-link svg { transition: transform .25s; }
.svc-card:hover .svc-link svg { transform: translateX(4px); }
.svc-more { margin-top: 36px; text-align: center; }
.svc-more a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(240,240,248,.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.svc-more a:hover { color: var(--text); border-color: rgba(255,255,255,.5); }

/* ═══ SERVIZI ESTESI (/cosa-facciamo/) ═════════════════════════ */
.service {
  padding: 72px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  scroll-margin-top: 84px;
}
.service:first-of-type { border-top: none; padding-top: 40px; }
.service-head { margin-bottom: 40px; }
.service-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .16em;
  margin-bottom: 14px;
}
.service-title { margin: 0 0 10px; font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.02em; }
.service-tagline { margin: 0 0 22px; font-size: clamp(16px, 2.1vw, 19px); color: rgba(240,240,248,.6); font-weight: 500; }
.service-desc {
  margin: 0;
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(240,240,248,.75);
}
.steps { margin-top: 40px; display: flex; flex-direction: column; }
.step {
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  max-width: 76ch;
}
.step-head {
  /* Numero sopra il titolo: titolo centrato senza ingombro laterale */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}
.step-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.step-num-red    { background: rgba(150, 166, 255,.12);  border: 1px solid rgba(150, 166, 255,.25);  color: var(--red); }
.step-num-purple { background: rgba(122, 138, 255,.12); border: 1px solid rgba(122, 138, 255,.25); color: var(--purple); }
.step-num-teal   { background: rgba(185, 195, 255,.12); border: 1px solid rgba(185, 195, 255,.25); color: var(--teal); }
.step-num-blue   { background: rgba(211, 219, 255,.12); border: 1px solid rgba(211, 219, 255,.25); color: var(--blue); }
.step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: rgba(240,240,248,.68);
}
.service-strip {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(240,240,248,.45);
}

/* ═══ ACCORDION SERVIZI (/cosa-facciamo/) ══════════════════════ */
.acc { display: flex; flex-direction: column; gap: 14px; }
.acc-item {
  position: relative;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .3s;
  scroll-margin-top: 84px;
}
.acc-item:hover { border-color: rgba(255,255,255,.18); }
.acc-item.open { border-color: rgba(150, 166, 255,.45); }
.acc-head {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3.5vw, 36px);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: var(--sans);
}
.acc-num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  flex-shrink: 0;
}
.acc-titles { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.acc-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(240,240,248,.55);
}
.acc-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.acc-tagline { font-size: 15px; color: rgba(240,240,248,.6); font-weight: 500; }
.acc-plus {
  /* Ancorato al bordo destro: non partecipa al flex, così il titolo resta centrato davvero */
  position: absolute;
  right: clamp(20px, 3.5vw, 36px);
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.2);
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
  color: rgba(240,240,248,.7);
  transition: transform .35s, border-color .3s, color .3s;
}
.acc-item.open .acc-plus {
  transform: translateY(-50%) rotate(45deg);
  border-color: rgba(150, 166, 255,.55);
  color: var(--red);
}
@media (max-width: 640px) {
  /* Schermi stretti: spazio simmetrico ai lati (il testo resta centrato e non finisce sotto il +) */
  .acc-head { padding-left: 52px; padding-right: 52px; }
  .acc-plus { right: 12px; width: 30px; height: 30px; font-size: 18px; }
  /* Titolo fluido: sotto i ~390px si restringe col viewport, così i nomi dei
     blocchi restano su una riga anche a 320px o con testo Android ingrandito */
  .acc-title { font-size: clamp(16px, 5.6vw, 22px); }
}
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; min-height: 0; }
.acc-content {
  padding: 6px clamp(20px, 3.5vw, 36px) 34px;
}
.acc-content .service-desc { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); }
.acc-content .steps { margin-top: 24px; }

/* ═══ USCITA VERSO DESTRA (bottoni con data-exit-right) ═══════════
   Al click il bottone (testo + contorno) scivola a destra e si
   dissolve prima della navigazione (classe aggiunta da main.js). */
.exit-right {
  animation: gaExitRight .48s cubic-bezier(.5, 0, .85, .45) forwards;
  pointer-events: none;
}
@keyframes gaExitRight {
  to { transform: translateX(70vw); opacity: 0; }
}


/* ═══ COUNTDOWN AI ACT ═════════════════════════════════════════ */
.countdown {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  border-radius: 20px;
  padding: 32px 30px 28px;
  max-width: 76ch;
  transition: border-color .5s;
}
.countdown:hover { border-color: rgba(255,255,255,.18); }
.countdown-num {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--red);
}
.countdown-text { max-width: 58ch; }
.countdown-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(240,240,248,.6);
  margin-bottom: 8px;
}
.countdown-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(240,240,248,.68);
}
.countdown-sub strong { color: var(--text); }
.countdown-sub a { color: rgba(240,240,248,.85); }

/* ═══ PROSE (ai-act, chi-siamo, testi lunghi) ══════════════════ */
.prose { max-width: 72ch; }
.prose h2 {
  margin: 44px 0 14px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.prose p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.78;
  color: rgba(240,240,248,.72);
}
.prose strong { color: var(--text); font-weight: 600; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { font-size: 17px; line-height: 1.75; color: rgba(240,240,248,.72); margin-bottom: 8px; }
.prose a { color: var(--purple-light); }

/* ═══ MISSION & VISION (chi-siamo) ═════════════════════════════ */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  align-items: stretch;
}
.mv-card {
  position: relative;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 36px;
  overflow: hidden;
  transition: border-color .3s;
}
.mv-card:hover { border-color: rgba(255,255,255,.18); }
.mv-card > *:not(.spot):not(.svc-topline) { position: relative; z-index: 1; }
.mv-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  margin-bottom: 18px;
}
.mv-title {
  margin: 0 0 14px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.mv-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(240,240,248,.7);
}

/* ═══ PERCHÉ GENACT ════════════════════════════════════════════ */
.perche-list { display: flex; flex-direction: column; gap: 4px; }
.perche-item {
  margin: 0;
  /* min abbassato: sotto i ~390px le tre frasi restano su UNA riga ciascuna
     (a 30px fisso andavano a capo su viewport stretti tipo Android 360px) */
  font-size: clamp(20px, 5.8vw, 58px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.035em;
}
.perche-num {
  font-family: var(--mono);
  font-size: .3em;
  font-weight: 500;
  color: rgba(240,240,248,.25);
  vertical-align: middle;
  margin-right: .6em;
}
.perche-gradient {
  background: linear-gradient(100deg, var(--red), var(--purple), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ═══ COMPLIANCE CALLOUT ═══════════════════════════════════════ */
.compliance-callout {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.025);
  padding: 30px clamp(22px, 4vw, 40px);
  max-width: 76ch;
  transition: border-color .5s;
}
.compliance-callout:hover { border-color: rgba(255,255,255,.18); }
.compliance-main {
  margin: 0;
  font-size: clamp(17px, 2.3vw, 22px);
  line-height: 1.7;
  color: rgba(240,240,248,.8);
}
.compliance-main strong { color: var(--text); font-weight: 700; }
.compliance-meta {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: .02em;
  color: rgba(240,240,248,.58);
}

/* ═══ CHI SIAMO ════════════════════════════════════════════════ */
.about {
  display: flex;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}
.about-photo {
  flex-shrink: 0;
  width: 168px;
  height: 168px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(150, 166, 255,.25), rgba(122, 138, 255,.25));
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-initials {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgba(240,240,248,.85);
}
.about-title { margin: 0 0 16px; font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; }
.about-bio {
  margin: 0 0 16px;
  max-width: 58ch;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.7;
  color: rgba(240,240,248,.75);
}
.about-bio strong { color: var(--text); }
.about-sign {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}
.about-meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(240,240,248,.55);
}

/* ═══ FAQ ══════════════════════════════════════════════════════ */
.faq-title { margin-bottom: 40px; }
.faq-list { display: flex; flex-direction: column; max-width: 860px; }
.faq-item { border-top: 1px solid rgba(255,255,255,.09); }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: rgba(240,240,248,.88);
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #fff; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.22);
  font-size: 17px;
  font-weight: 400;
  color: rgba(240,240,248,.6);
  transition: transform .3s, border-color .3s, color .3s;
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  border-color: rgba(122, 138, 255,.55);
  color: var(--purple);
}
.faq-item p {
  margin: 0;
  padding: 0 44px 24px 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(240,240,248,.68);
}

/* ═══ CONTATTI ═════════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}
.cta-title {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
}
.cta-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(240,240,248,.55);
}
.contact-copy {
  margin: 22px 0 26px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(240,240,248,.68);
}
.cta-mail {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(240,240,248,.55);
  text-decoration: none;
  transition: color .2s;
}
.cta-mail:hover { color: var(--text); }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 30px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field > span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(240,240,248,.6);
}
.form-field input,
.form-field textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 13px 16px;
  outline: none;
  transition: border-color .2s, background .2s;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(122, 138, 255,.6);
  background: rgba(122, 138, 255,.05);
}
.form-submit {
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 16px 32px;
  margin-top: 4px;
}
.form-privacy {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(240,240,248,.45);
}
.form-privacy a { color: rgba(240,240,248,.7); }

/* ═══ CTA BANNER (fine pagina interne) ═════════════════════════ */
.cta-banner {
  margin-top: 72px;
  padding: 44px 40px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background:
    radial-gradient(500px circle at 12% 0%, rgba(150, 166, 255,.1), transparent 60%),
    radial-gradient(500px circle at 88% 100%, rgba(122, 138, 255,.1), transparent 60%),
    var(--panel-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-banner h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.cta-banner p {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(240,240,248,.55);
}

/* ═══ BLOG ═════════════════════════════════════════════════════ */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 860px;
}
.post-card {
  position: relative;
  display: block;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 26px 28px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: border-color .3s, transform .1s, box-shadow .4s;
}
.post-card:hover { border-color: rgba(122, 138, 255,.45); }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(240,240,248,.5);
  margin-bottom: 12px;
}
.post-cat-guide { color: var(--teal); }
.post-cat-norme { color: var(--red); }
.post-cat-casi  { color: var(--blue); }
.post-title {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.post-excerpt {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(240,240,248,.62);
  max-width: 68ch;
}
.post-empty {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  color: rgba(240,240,248,.5);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 28px;
  max-width: 860px;
}

/* Articolo */
.article { max-width: 720px; margin: 0 auto; padding: 72px 32px 96px; }
.article-back {
  display: inline-block;
  margin-bottom: 36px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(240,240,248,.6);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 100px;
  padding: 8px 18px;
  transition: color .2s, border-color .2s;
}
.article-back:hover { color: var(--text); border-color: rgba(255,255,255,.35); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(240,240,248,.5);
  margin-bottom: 18px;
}
.article-title {
  margin: 0 0 28px;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.03em;
}
.inbrief {
  border: 1px solid rgba(122, 138, 255,.3);
  border-left: 3px solid var(--purple);
  background: rgba(122, 138, 255,.06);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 36px;
}
.inbrief-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--purple-light);
  margin-bottom: 10px;
}
.inbrief ul { margin: 0; padding-left: 20px; }
.inbrief li { font-size: 15.5px; line-height: 1.7; color: rgba(240,240,248,.8); margin-bottom: 6px; }
.inbrief li:last-child { margin-bottom: 0; }
.article-body p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.78;
  color: rgba(240,240,248,.78);
}
.article-body h2 {
  margin: 40px 0 14px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 24px; }
.article-body li { font-size: 18px; line-height: 1.75; color: rgba(240,240,248,.78); margin-bottom: 8px; }
.article-body strong { color: var(--text); font-weight: 600; }
.article-body a { color: var(--purple-light); }
.article-sources {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.article-sources h2 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(240,240,248,.5);
  font-weight: 600;
  margin: 0 0 12px;
}
.article-sources li { font-size: 14px; color: rgba(240,240,248,.6); }

/* ═══ FOOTER ═══════════════════════════════════════════════════ */
.footer {
  padding: 32px 32px 44px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: center;
  justify-content: space-between;
}
.footer-brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.footer-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(240,240,248,.65);
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(240,240,248,.5);
}
.footer-meta a { color: rgba(240,240,248,.55); text-decoration: none; }
.footer-meta a:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT CENTRATO (prova del 2026-08-02, rimovibile in blocco:
   per tornare all'allineamento a sinistra eliminare tutto fino a
   "FINE LAYOUT CENTRATO")
   ═══════════════════════════════════════════════════════════════ */

.page-head .container,
.section .container { text-align: center; }

/* Blocchi a larghezza limitata: centrati orizzontalmente */
.page-title, .page-sub, .section-sub,
.prose, .faq-list, .post-list, .post-excerpt,
.compliance-callout, .countdown, .article-sources,
.service-desc, .step { margin-left: auto; margin-right: auto; }

/* Kicker: etichetta al centro con linee simmetriche ai lati */
.kicker { justify-content: center; }
.kicker::before { content: ''; flex: 1; height: 1px; }
.kicker-red::before    { background: linear-gradient(90deg, transparent, rgba(150, 166, 255,.4)); }
.kicker-purple::before { background: linear-gradient(90deg, transparent, rgba(122, 138, 255,.4)); }
.kicker-teal::before   { background: linear-gradient(90deg, transparent, rgba(185, 195, 255,.4)); }
.kicker-blue::before   { background: linear-gradient(90deg, transparent, rgba(197, 205, 255,.4)); }
.kicker-muted::before  { background: rgba(255,255,255,.09); }

/* Liste centrate: senza puntatori laterali */
.prose ul, .prose ol, .article-sources ul, .inbrief ul {
  list-style: none;
  padding-left: 0;
}

/* Accordion servizi: contenuto e step centrati, barra invariata */
.acc-content { text-align: center; }
.acc-titles { flex: 1; align-items: center; text-align: center; }
.step-head { justify-content: center; }
.acc-item .svc-topline, .mv-card .svc-topline {
  left: 50%;
  transform: translateX(-50%);
}

/* FAQ: domande e risposte centrate (padding simmetrico al "+") */
.faq-item summary { text-align: center; padding-left: 44px; }
.faq-item p { text-align: center; padding-left: 44px; }

/* Chi siamo: foto sopra, testo centrato sotto */
.about { flex-direction: column; align-items: center; text-align: center; }
.about-bio { margin-left: auto; margin-right: auto; }

/* Banner CTA: contenuto impilato e centrato */
.cta-banner {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

/* Contatti: tutto centrato, form compreso (etichette, campi, testo digitato) */
.contact-grid { text-align: center; }
.contact-copy { margin-left: auto; margin-right: auto; }
.contact-form { text-align: center; }
.contact-form .form-field input,
.contact-form .form-field textarea { text-align: center; }

/* Footer centrato */
.footer-inner { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; }
.footer-meta { justify-content: center; }

/* Link "scopri" centrati anche dove avevano allineamenti locali */
.svc-more { text-align: center !important; }

/* Articoli blog (parcheggiati): stessa impostazione */
.article { text-align: center; }
.article-meta { justify-content: center; }

/* ═══ FINE LAYOUT CENTRATO ═════════════════════════════════════ */

/* ═══ REDUCED MOTION ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbit-ring, .orbit-dot, .badge-dot, .hero-title-shimmer, .scroll-cue svg {
    animation: none !important;
  }
}