/* ============================================================
   SYNAPAI — Global Design System
   Dark premium · Blu accent · Glassmorphism · Pill buttons
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --accent: #2F80ED;
  --accent-soft: rgba(47, 128, 237, 0.6);
  --bg-primary: #030303;
  --bg-secondary: #070707;
  --white: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-tertiary: rgba(255, 255, 255, 0.4);
  --border-thin: rgba(47, 128, 237, 0.15);
  --border-soft: rgba(255, 255, 255, 0.08);
  --glass: rgba(255, 255, 255, 0.03);
  --glow: rgba(47, 128, 237, 0.25);

  --radius-card: 20px;
  --radius-sm: 12px;
  --radius-pill: 50px;

  --container: 1200px;
  --section-pad: 120px;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sfondo fisso: qui serve l'altezza GRANDE (lvh, browser a barre ritirate),
   non quella piccola. Con svh, appena la barra sparisce si scoprirebbe una
   striscia vuota in fondo. lvh e' comunque una misura ferma: non cambia
   scorrendo, copre sempre, e la parte in eccesso resta semplicemente
   nascosta sotto la barra. */
#synap-threads-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #synap-threads-bg { display: none; }
}

.bg-primary-solid {
  background: var(--bg-primary);
}

.divider-top {
  border-top: 1px solid var(--border-soft);
}

.panel-reveal-bottom {
  border-radius: 0 0 40px 40px;
}

.panel-reveal-top {
  border-radius: 40px 40px 0 0;
}

body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--bg-primary);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

section {
  position: relative;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
}

h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
  font-size: 1.35em;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.section-intro {
  max-width: 760px;
  margin: 0 auto 70px;
  text-align: center;
}

.section-intro p {
  color: var(--text-secondary);
  margin-top: 18px;
  font-size: 1.08rem;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.section {
  padding: var(--section-pad) 0;
}

.bg-secondary {
  background: var(--bg-secondary);
}

/* ---------- Buttons (always pill) ---------- */
.btn-primary,
.btn-outline,
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, background 0.3s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 8px 30px rgba(47, 128, 237, 0.35);
  transition: transform 0.18s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--border-thin);
  backdrop-filter: blur(10px);
}

.btn-outline:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(47, 128, 237, 0.15);
}

.btn-white {
  background: var(--white);
  color: var(--bg-primary);
}

.btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(255, 255, 255, 0.25);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.9rem;
}

/* ---- CardNav Navigation (reactbits.dev, colori/raggio adattati al brand) ---- */
.card-nav-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 92%;
  max-width: 720px;
}

.card-nav {
  display: block;
  height: 64px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  /* Angoli superiori fissi (non cambiano mai): stessa curva della pillola "Prenota una call".
     Angoli inferiori: pillola quando chiuso, poi 28px fissi da aperto (= raggio card 20px + 8px padding,
     così combaciano esattamente con gli angoli delle nav-card sottostanti). */
  border-radius: 32px 32px 32px 32px;
  transition: border-bottom-left-radius 0.4s ease, border-bottom-right-radius 0.4s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-thin);
  position: relative;
  overflow: hidden;
  will-change: height;
}

.card-nav.open {
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}

.card-nav-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 22px;
  z-index: 2;
}

.hamburger-menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--white);
}

.hamburger-menu:hover .hamburger-line {
  opacity: 0.7;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.25s ease;
}

.hamburger-menu.open .hamburger-line:first-child { transform: translateY(4px) rotate(45deg); }
.hamburger-menu.open .hamburger-line:last-child { transform: translateY(-4px) rotate(-45deg); }

.logo-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}

.logo-container .logo {
  height: 26px;
  width: auto;
}

.card-nav-top .btn-primary {
  flex-shrink: 0;
}

.card-nav-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  bottom: 0;
  padding: 8px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

.card-nav.open .card-nav-content {
  visibility: visible;
  pointer-events: auto;
}

.nav-card {
  height: 100%;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-card);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  gap: 10px;
  background: linear-gradient(160deg, rgba(47, 128, 237, 0.16), var(--bg-primary) 70%);
  border: 1px solid var(--border-thin);
  user-select: none;
}

.nav-card-label {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--white);
  letter-spacing: -0.3px;
}

.nav-card-links {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-card-link {
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.nav-card-link:hover {
  color: var(--white);
}

.nav-card-link:focus {
  outline: none;
}

.nav-card-link:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.nav-card-link-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .card-nav-container {
    width: 92%;
    top: 14px;
  }

  .card-nav-top {
    padding: 0 16px;
    justify-content: space-between;
  }

  .hamburger-menu {
    order: 2;
  }

  .logo-container {
    position: static;
    transform: none;
    order: 1;
  }

  .card-nav-top .btn-primary {
    display: none;
  }

  .card-nav-content {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
  }

  .nav-card {
    height: auto;
    min-height: auto;
    padding: 16px 18px;
  }
}

/* ---------- Hero (ported da synapai.it — orb WebGL + campo stelle) ---------- */
#syna-hero {
  position: relative;
  width: 100%;
  /* Vedi la nota su svh nel blocco a max-width 600px: su desktop vh e svh
     coincidono, su mobile no ed e' li' che conta. */
  height: 100vh;
  min-height: 100vh;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #030303;
  font-family: 'Poppins', sans-serif;
}

#syna-stars-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#syna-orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.syna-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(3,3,3,0.88) 100%);
  pointer-events: none;
  z-index: 1;
}

.syna-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px;
  max-width: 800px;
  margin-top: 13vh;
  margin-top: 13svh;
}

#syna-hero .syna-headline {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(46px, 6.8vw, 90px);
  line-height: 0.9;
  color: #ffffff;
  margin: 0;
}

#syna-hero #syna-blur-line {
  display: inline-block;
  margin-bottom: -0.32em;
}

#syna-hero .blur-word {
  display: inline-block;
  will-change: transform, filter, opacity;
}

#syna-hero .syna-headline .accent {
  color: #2f80ed;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(60px, 9vw, 116px);
  line-height: 0.85;
}

#syna-hero .tw-cursor {
  opacity: 0;
  display: inline-block;
  color: #2f80ed;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  margin-left: 1px;
  transition: opacity 0.3s ease;
}
#syna-hero .tw-cursor.active {
  opacity: 1;
  animation: cursorBlink 1s step-end infinite;
}
#syna-hero .tw-cursor.hidden {
  opacity: 0 !important;
  animation: none !important;
}
@keyframes cursorBlink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

#syna-hero .syna-sub {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 400;
  color: rgba(255,255,255,0.42);
  line-height: 1.7;
  margin: 24px 0 0 0;
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.25s;
}

#syna-hero .syna-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 36px 0 0 0;
  animation: fadeUp 0.9s ease both;
  animation-delay: 0.40s;
}

/* ============================================================
   SISTEMA PULSANTI — le 3 classi ufficiali, usate in tutto il sito
   1) .sa-btn-hero  — pill in vetro con bordo + freccia (CTA principale)
   2) .btn-primary  — pill piena colore accento (nav, CTA secondarie)
   3) .sa-btn-ghost — pill trasparente, si colora leggermente al hover
   Tutte condividono la stessa animazione al hover: translateY(-3px), .18s ease
   ============================================================ */
.sa-btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  background: rgba(47, 128, 237, .12);
  border: 1.5px solid rgba(47, 128, 237, .4);
  color: #fff;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: transform .18s ease, border-color .18s ease;
}

.sa-btn-hero .sa-arrow {
  display: inline-flex;
  color: #2f80ed;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.sa-btn-hero:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 128, 237, .8);
}

.sa-btn-hero:hover .sa-arrow { transform: translateX(5px); }

.sa-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: 1.5px solid transparent;
  color: rgba(255,255,255,0.65);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.sa-btn-ghost:hover {
  transform: translateY(-3px);
  background: rgba(47, 128, 237, .12);
  border-color: transparent;
  color: #fff;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  /* dvh e' l'altezza DINAMICA del viewport: cresce e cala di continuo mentre
     la barra del browser compare e sparisce scorrendo. Sull'hero significa
     che il blocco cambia altezza a ogni gesto e il contenuto centrato balla.
     svh e' l'altezza col browser a barre aperte, e resta ferma: e' la misura
     che si vuole qui, calcolata come se la striscia in basso ci fosse sempre.
     La riga con vh resta come riserva per i browser che non conoscono svh. */
  #syna-hero { height: 100vh; min-height: 100vh; }
  #syna-hero { height: 100svh; min-height: 100svh; }
  .syna-content { margin-top: 10vh; margin-top: 10svh; }
  #syna-hero .syna-headline { font-size: clamp(32px, 8vw, 46px); }
  #syna-hero .syna-headline .accent { font-size: clamp(38px, 10vw, 60px); }
  #syna-hero .syna-btns { flex-direction: column; align-items: center; }
  #syna-hero .sa-btn-hero, #syna-hero .sa-btn-ghost { width: auto; padding-left: 14px; padding-right: 14px; }
}

/* Simple page hero (subpages) */
.page-hero {
  padding: 200px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--glow) 0%, transparent 60%);
  z-index: 0;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero p {
  color: var(--text-secondary);
  max-width: 620px;
  margin: 20px auto 0;
  font-size: 1.1rem;
}

.page-hero .services-grid {
  margin-top: 60px;
  text-align: left;
}

/* ---------- Social proof ticker ---------- */
/* Il vecchio .ticker (nastro con i puntini divisori) e' stato rimosso il
   2026-09-10: la home usa ora la stessa striscia LogoLoop di casi-studio.html,
   e nessuna pagina lo referenziava piu'. Le regole stanno in fondo al file,
   sezione "LogoLoop". */

/* ---------- Cards (glass) ---------- */
.card {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-thin);
  border-radius: var(--radius-card);
  padding: 36px;
  transition: transform 0.35s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-soft);
  box-shadow: 0 12px 28px rgba(47, 128, 237, 0.1);
}

/* ---------- Problem cards ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.problem-card {
  text-align: center;
}

.problem-card .icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 128, 237, 0.1);
  border: 1px solid var(--border-thin);
  font-size: 1.6rem;
}

.problem-card h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.problem-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.problem-bridge {
  text-align: center;
  margin-top: 56px;
}

.problem-bridge .arrow {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.problem-bridge h3 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

/* ---------- Services cards ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 20px;
}

.service-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  min-height: 480px;
  padding: 52px 46px;
  justify-content: space-between;
  /* Sopra agli overlay globali a mix-blend-mode (page-fx-glows/grain,
     z-index 1 e 3): così il loro blend non deve mai "considerare" il
     bordo animato via cursore della card (::after in continuo repaint),
     eliminando l'artefatto visto sulla card adiacente durante l'hover. */
  z-index: 10;
}

.service-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}

.service-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.service-card h3 {
  font-size: 2.1rem;
  letter-spacing: -0.01em;
}

.service-desc {
  color: var(--text-secondary);
  margin: 18px 0 26px;
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ---------- Border glow (cursor-reactive, servizi) ---------- */
.glow-card {
  --glow-rgb: 47, 128, 237;
  --cursor-angle: 0deg;
  --edge-proximity: 0;
  isolation: isolate;
  /* Layer di composizione sempre attivo: l'hover (transform) non deve
     promuovere/rimuovere un layer, altrimenti su alcune GPU appare una
     riga di artefatto sul bordo della card adiacente. */
  will-change: transform;
  /* Contenimento esplicito del rendering: il paint di questa card non deve
     poter influenzare (né essere influenzato da) quello delle card vicine. */
  contain: paint;
}

.glow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--cursor-angle),
    rgba(var(--glow-rgb), 0) 0%,
    rgba(var(--glow-rgb), calc(var(--edge-proximity) * 0.95)) 6%,
    rgba(var(--glow-rgb), 0) 24%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.glow-card:hover,
.glow-card:focus-within {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .glow-card::after { display: none; }
}

/* ---------- Card swap (punti di forza) ---------- */
.card-swap-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 300px;
  margin: 0 auto;
}

.swap-card {
  width: 100%;
  max-width: 480px;
  height: 300px;
  padding: 38px 42px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  background: #0c0c0e;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.swap-card .swap-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 128, 237, 0.12);
  border: 1px solid var(--border-thin);
  margin-bottom: 20px;
}

.swap-card .swap-icon svg {
  width: 24px;
  height: 24px;
}

.swap-card h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.swap-card p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .card-swap-container {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 620px;
  }
  .swap-card {
    position: static !important;
    transform: none !important;
    max-width: none;
    height: auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 640px) {
  .card-swap-container { height: 360px; max-width: min(90vw, 340px); }
  .swap-card { max-width: min(84vw, 300px); height: 360px; padding: 26px 28px; }
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.feature-list li .check {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.service-footer {
  margin-top: auto;
}

.pricing-note {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-bottom: 18px;
  font-style: italic;
}

.powered {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.powered::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Tags & badges ---------- */
.tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: rgba(47, 128, 237, 0.12);
  border: 1px solid var(--border-thin);
  color: var(--accent);
}

.badge-beta {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #2F80ED, #56CCF2);
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 4px 16px var(--glow);
}

/* ---------- How we work / steps ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.step-card {
  position: relative;
}

.step-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3.2rem;
  color: var(--accent);
  opacity: 0.7;
  line-height: 1;
  margin-bottom: 14px;
}

.step-card h3 {
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.step-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* ---------- Comparison table ---------- */
.compare {
  margin-top: 56px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}

.compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
}

.compare-row > div {
  padding: 22px 26px;
  border-bottom: 1px solid var(--border-soft);
}

.compare-head > div {
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--bg-secondary);
}

.compare-head .col-synap {
  color: var(--accent);
  background: rgba(47, 128, 237, 0.08);
}

.compare-row .col-label {
  font-weight: 500;
  color: var(--white);
}

.compare-row .col-synap {
  background: rgba(47, 128, 237, 0.05);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
}

.compare-row .col-without {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ic-yes { color: #56CCF2; font-weight: 700; }
.ic-no { color: rgba(255,255,255,0.3); font-weight: 700; }

.compare-row:last-child > div { border-bottom: none; }

/* ---------- FAQ accordion (minimal full-width) ---------- */
.faq-section {
  padding: var(--section-pad) 0;
}

.faq-list {
  max-width: 860px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  cursor: pointer;
  gap: 24px;
  user-select: none;
}

.faq-q span {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
}

.faq-chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--text-secondary);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq-a p {
  padding-bottom: 28px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 720px;
}

/* ---------- CTA final ---------- */
.cta-final {
  position: relative;
  text-align: center;
  padding: 100px 0;
  overflow: hidden;
}

.cta-box {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  padding: 70px 40px;
  background: linear-gradient(135deg, rgba(47, 128, 237, 0.22), rgba(47, 128, 237, 0.06));
  border: 1px solid var(--border-thin);
  backdrop-filter: blur(20px);
}

.cta-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, var(--glow), transparent 60%);
  border-radius: var(--radius-card);
  z-index: -1;
}

.cta-box h2 {
  margin-bottom: 14px;
}

.cta-box p {
  color: var(--text-secondary);
  margin-bottom: 32px;
  font-size: 1.08rem;
}

/* ---------- Timeline (services page) ---------- */
.timeline {
  max-width: 760px;
  margin: 56px auto 0;
  position: relative;
  padding-left: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--accent), var(--border-thin));
}

.timeline-item {
  position: relative;
  padding-bottom: 44px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: '';
  position: absolute;
  left: -34px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(47, 128, 237, 0.18);
}

.timeline-item h3 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.timeline-item .phase-num {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.timeline-item p {
  color: var(--text-secondary);
  font-size: 0.98rem;
}

/* ---------- Service detail blocks ---------- */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}

.use-case-col h4 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: var(--accent);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split.reverse .split-text { order: 2; }

/* ---------- Values (chi-siamo) ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.values-footnote {
  margin-top: 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 1rem;
}

/* ---------- Call direction switcher (Inbound/Outbound, operatore-ai-vocale) ---------- */
.call-direction-switcher {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
}

.call-direction-thumb {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  border-radius: 999px;
  background: var(--white);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}

.call-direction-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 24px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.25s ease;
}

.call-direction-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.call-direction-btn.is-active {
  color: var(--bg-primary);
}

.call-direction-btn.is-active svg {
  color: var(--accent);
}

.call-direction-panels {
  margin-top: 46px;
  overflow: hidden;
  transition: height 0.4s ease;
}

.call-direction-track {
  display: flex;
  width: 200%;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.call-direction-panel {
  flex: 0 0 50%;
  width: 50%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
  text-align: left;
  padding-right: 4px;
}

.call-direction-sectors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 20px;
}

.sector-card {
  text-align: left;
}

.sector-icon {
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.sector-card h4 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.sector-card p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

/* Le card dei settori che hanno una pagina dedicata diventano link; le altre
   restano <div> muti. La freccina e' l'unico segnale che distingue le due, cosi'
   la griglia dice anche quali pagine settore esistono: quando ne nasce una nuova
   basta trasformare la card in <a> e la freccia compare. Stessa icona e stesso
   focus dei .nav-card-link, per non introdurre un secondo linguaggio di link. */
.sector-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* L'h4 resta un blocco: reso inline-flex finirebbe nella stessa riga della
   .sector-icon, che e' un SVG inline, e il titolo scivolerebbe di 26px a destra
   disallineandosi dalle card non cliccabili. La freccia e' l'unica parte inline,
   cosi' segue l'ultima parola e va a capo insieme al testo. */
.sector-card--link h4 {
  transition: color 0.25s ease;
}

.sector-card--link .sector-icon {
  transition: color 0.25s ease;
}

.sector-card-arrow {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 6px;
  vertical-align: middle;
  color: var(--accent);
  opacity: 0.7;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.sector-card--link:hover h4,
.sector-card--link:hover .sector-icon {
  color: var(--accent);
}

.sector-card--link:hover .sector-card-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

.sector-card--link:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .sector-card--link:hover .sector-card-arrow { transform: none; }
}

.call-direction-pricing {
  margin: 44px auto 0;
  padding: 28px 32px;
  border-radius: var(--radius-card);
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  text-align: left;
}

.call-direction-pricing h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  color: var(--accent);
}

.call-direction-pricing p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .call-direction-panel {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .call-direction-sectors-grid {
    grid-template-columns: 1fr;
  }
}

.value-card .icon {
  font-size: 2rem;
  margin-bottom: 16px;
}

.value-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.value-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* ---------- Case studies ---------- */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 20px;
}

.case-card {
  overflow: hidden;
  padding: 0;
}

.case-thumb {
  height: 180px;
  background: linear-gradient(135deg, #0a2a5e, #2F80ED 120%);
  display: flex;
  align-items: flex-end;
  padding: 22px;
  position: relative;
}

.case-thumb.c2 { background: linear-gradient(135deg, #1a1040, #6a3aed 130%); }
.case-thumb.c3 { background: linear-gradient(135deg, #04303a, #0f9bb5 130%); }

.case-thumb .sector {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.4);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}

.case-body {
  padding: 28px;
}

.case-body h3 {
  margin-bottom: 16px;
}

.case-body .case-block {
  margin-bottom: 16px;
}

.case-body .case-block strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  font-weight: 600;
}

.case-body .case-block p {
  color: var(--text-secondary);
  font-size: 0.93rem;
}

.case-result {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

.case-result .num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent);
}

.case-result .lbl {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ---------- Blog ---------- */

/* Sulla pagina blog il fondo resta nero pieno: l'alone globale della page-hero
   ruberebbe attenzione alle card, che qui sono il contenuto. Vale solo qui,
   le altre pagine continuano a usarlo. */
body.page-blog .page-hero::before { display: none; }

/* La barra di ricerca appartiene all'hero, non a una sezione a se': senza
   questo raccordo il respiro standard fra le due la fa sembrare orfana. */
body.page-blog .page-hero { padding-bottom: 46px; }
body.page-blog .page-hero + .section { padding-top: 0; }

/* --- Barra di controllo: ricerca + filtri ---
   Nessun max-width: la barra deve essere larga esattamente come la riga di tre
   card sotto, e vive nello stesso .container. */
.blog-controls {
  margin: 0 auto 34px;
}

.blog-search {
  position: relative;
  display: flex;
  align-items: center;
}

.blog-search__input {
  width: 100%;
  padding: 14px 52px 14px 54px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--glass);
  color: var(--white);
  font-family: var(--font);
  font-size: 1rem;
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.blog-search__input::placeholder { color: var(--text-tertiary); }

.blog-search__input:focus {
  outline: none;
  border-color: var(--accent-soft);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.10);
}

.blog-search__icon {
  position: absolute;
  left: 22px;
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  pointer-events: none;
  transition: color 0.35s ease;
}

.blog-search__input:focus ~ .blog-search__icon { color: var(--accent); }

.blog-search__clear {
  position: absolute;
  right: 14px;
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease;
}

.blog-search__clear.is-visible { display: flex; }

.blog-search__clear:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

.blog-search__clear svg { width: 14px; height: 14px; }

.blog-filters {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.blog-filters button {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-filters button:hover {
  color: var(--white);
  border-color: var(--accent-soft);
}

.blog-filters button.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.blog-results {
  text-align: center;
  margin-bottom: 32px;
  font-size: 0.82rem;
  color: var(--text-tertiary);
  min-height: 20px;
}

.blog-empty {
  display: none;
  text-align: center;
  padding: 70px 20px;
}

.blog-empty.is-visible { display: block; }

.blog-empty h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.blog-empty p {
  color: var(--text-secondary);
  font-size: 0.94rem;
}

.blog-empty__term { color: var(--accent); }

/* --- Griglia --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.blog-card[hidden] { display: none; }

/* --- Card --- */
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  background: var(--bg-secondary);
  /* Il sollevamento all'hover si fa con `top` invece che con `transform`, per
     non litigare con `.reveal.visible { transform: translate(0,0) }`, che
     altrimenti lo annullerebbe e imporrebbe un selettore piu' specifico. */
  position: relative;
  top: 0;
}

/* La transizione va dichiarata anche su `.blog-card.reveal` (0,2,0): `.reveal`
   dichiara un proprio `transition` con la stessa specificita' di `.blog-card`
   ma piu' in basso nel foglio, quindi vincerebbe e lo scorrimento di `top`
   diventerebbe uno scatto secco. Le due voci `opacity` e `transform` sono
   quelle di `.reveal`, ripetute qui per non perdere l'animazione d'ingresso. */
.blog-card,
.blog-card.reveal {
  transition: top 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.35s ease,
              opacity 0.7s ease,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Copertina: altezza fissa cosi' le card di una riga restano allineate anche
   con titoli di lunghezza molto diversa. Il titolo e' quello integrale. */
.blog-card__cover {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 46px 26px 28px;
  background: #050505;
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}

.blog-card__cover::before {
  content: '';
  position: absolute;
  top: -55%;
  left: -10%;
  width: 120%;
  height: 160%;
  background: radial-gradient(circle at 32% 38%, rgba(47, 128, 237, 0.42) 0%, rgba(47, 128, 237, 0.16) 45%, transparent 72%);
  opacity: 0.9;
  pointer-events: none;
}

.blog-card__cover-title {
  position: relative;
  z-index: 1;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: center;
  /* valvola di sicurezza: un titolo fuori scala non sfonda la copertina */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__time {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-thin);
  background: rgba(3, 3, 3, 0.55);
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.blog-card__time svg {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

.blog-card__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__excerpt {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.62;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Piede della card: la CTA a sinistra e la data a destra sulla stessa riga.
   La data sta qui e non in cima perche' conta molto meno del titolo. */
.blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.blog-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
}

.blog-card__cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-card__date {
  font-size: 0.76rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Hover: solo tre cose. La card si solleva, il bordo diventa blu, la freccia
   scorre. Niente alone, niente copertina che si accende, nessun testo che
   cambia colore: la card e' un unico link, non quattro elementi reattivi.
   E' esclusa dal glow globale delle card (vedi "Card hover glow (local)"). */
.blog-card:hover {
  top: -4px;
  border-color: var(--accent-soft);
}

.blog-card:hover .blog-card__cta svg { transform: translateX(5px); }

/* ---------- Articolo (pagina interna del blog) ---------- */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  height: 2px;
  pointer-events: none;
}

.read-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #6bafF5);
  box-shadow: 0 0 12px rgba(47, 128, 237, 0.6);
}

.article-hero {
  padding: 170px 0 0;
}

/* Larghezza di lettura della pagina articolo: via di mezzo fra i 720px di
   partenza (troppo stretti, disallineati dalla testata) e il container pieno
   da 1144px (righe da ~150 caratteri, faticose da seguire).
   Testata e corpo si appoggiano allo stesso container e alla stessa regola,
   quindi non possono disallinearsi: non aggiungere max-width locali. */
body.page-article .article-hero .container,
body.page-article .article-read .container {
  max-width: 980px;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.article-back:hover { color: var(--accent); }

.article-back svg { width: 14px; height: 14px; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  margin-bottom: 20px;
}

.article-meta .cat {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--accent);
}

.article-meta .sep { color: rgba(255, 255, 255, 0.25); }

.article-meta time,
.article-meta .time { color: var(--text-tertiary); }

.article-hero h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.article-standfirst {
  margin-top: 22px;
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--text-secondary);
}

.article-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding: 24px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.article-share__label {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-right: 4px;
}

.article-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.article-share__btn:hover {
  color: var(--white);
  border-color: var(--accent-soft);
  background: rgba(47, 128, 237, 0.06);
}

.article-share__btn svg { width: 15px; height: 15px; }

.article-share__btn.is-done {
  color: var(--accent);
  border-color: var(--accent-soft);
}

/* --- Colonna di lettura ---
   Nessun max-width proprio: testata e corpo devono avere lo stesso bordo
   sinistro e destro, quindi entrambi si appoggiano al .container del sito,
   cioe' alla stessa larghezza della griglia del blog. */
.article-body {
  padding: 54px 0 20px;
}

.article-body > p {
  font-size: 1.05rem;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 24px;
}

.article-body > p:first-of-type {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.88);
}

.article-body h2 {
  font-size: 1.65rem;
  line-height: 1.26;
  letter-spacing: -0.01em;
  margin: 56px 0 18px;
}

.article-body h3 {
  font-size: 1.18rem;
  margin: 38px 0 14px;
}

.article-body ul,
.article-body ol {
  margin: 0 0 24px;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.78);
}

.article-body li {
  margin-bottom: 10px;
  line-height: 1.7;
}

.article-body ul li::marker { color: var(--accent); }

.article-body ol li::marker {
  color: var(--accent);
  font-weight: 700;
}

.article-body strong {
  color: var(--white);
  font-weight: 600;
}

.article-body p a {
  color: var(--accent);
  border-bottom: 1px solid rgba(47, 128, 237, 0.35);
}

.article-body p a:hover { border-bottom-color: var(--accent); }

/* --- Blocchi visuali --- */
.article-figure { margin: 40px 0; }

.article-figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}

.article-figure figcaption {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--text-tertiary);
  text-align: center;
}

.article-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 40px 0;
}

.article-compare__col {
  padding: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--glass);
}

.article-compare__col--no { border-color: rgba(237, 90, 90, 0.18); }

.article-compare__col--yes { border-color: rgba(47, 128, 237, 0.28); }

.article-compare__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.95rem;
  font-weight: 600;
}

.article-compare__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.article-compare__col--no .article-compare__icon {
  background: rgba(237, 90, 90, 0.14);
  color: #ed5a5a;
}

.article-compare__col--yes .article-compare__icon {
  background: rgba(47, 128, 237, 0.14);
  color: var(--accent);
}

.article-compare ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.92rem;
}

.article-compare li {
  margin-bottom: 8px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.article-stat {
  margin: 40px 0;
  padding: 32px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-thin);
  background: linear-gradient(135deg, rgba(47, 128, 237, 0.07), transparent 70%);
  text-align: center;
}

.article-stat__num {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.article-stat__label {
  margin-top: 10px;
  font-size: 0.98rem;
  color: var(--white);
}

/* La fonte non e' decorativa: senza, il numero non va pubblicato. */
.article-stat__source {
  margin-top: 14px;
  font-size: 0.76rem;
  color: var(--text-tertiary);
}

.article-stat__source a {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-soft);
}

.article-callout {
  margin: 40px 0;
  padding: 22px 24px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(47, 128, 237, 0.05);
}

.article-callout__label {
  margin-bottom: 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--accent);
}

.article-callout p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.article-callout--warn {
  border-left-color: #edb45a;
  background: rgba(237, 180, 90, 0.05);
}

.article-callout--warn .article-callout__label { color: #edb45a; }

.article-quote {
  margin: 48px 0;
  padding: 0 20px;
  text-align: center;
}

.article-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.4;
  color: var(--white);
}

.article-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font);
  font-style: normal;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}

.article-steps {
  margin: 40px 0;
  padding: 0;
  list-style: none;
  counter-reset: article-step;
}

.article-steps li {
  counter-increment: article-step;
  position: relative;
  padding-left: 52px;
  margin-bottom: 24px;
}

.article-steps li::before {
  content: counter(article-step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 128, 237, 0.12);
  border: 1px solid var(--border-thin);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
}

.article-steps h4 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.article-steps p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.article-table-wrap {
  margin: 40px 0;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.article-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.article-table th {
  padding: 14px 18px;
  text-align: left;
  background: var(--bg-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-soft);
}

.article-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  color: rgba(255, 255, 255, 0.78);
}

.article-table tr:last-child td { border-bottom: 0; }

/* --- Torna su, in coda all'articolo --- */
.article-totop {
  display: flex;
  justify-content: center;
  padding-top: 14px;
}

.article-totop__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-tertiary);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.article-totop__btn:hover {
  color: var(--white);
  border-color: var(--accent-soft);
}

.article-totop__btn svg {
  width: 12px;
  height: 12px;
}

/* --- Articoli correlati --- */
.article-related__title {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 34px;
}

/* auto-fit invece di due colonne fisse: con un solo correlato la card resta
   centrata invece di appoggiarsi a sinistra lasciando un buco. */
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 364px));
  justify-content: center;
  gap: 26px;
}

/* ---------- Contatti — sezione 1: prenotazione ---------- */

/* Sfondo: stessa identica logica di operatore-ai-vocale.html e servizi.html.
   Le sezioni si alternano fra `bg-secondary` (#070707, il "nero chiaro") e
   nessun fondo (si vede il body, #030303, il "nero scuro"), tutte separate da
   `divider-top`. Le classi stanno nell'HTML, qui non serve nessuna regola di
   sfondo.

   NON dare z-index a queste sezioni. I glow sono position:fixed a z-index 1 e
   devono passare SOPRA i fondi delle sezioni: e' quello a dare la colorazione
   blu che scorre. Una sezione a z-index 5 si mette davanti ai glow e li
   cancella nel proprio tratto — errore fatto e corretto il 2026-09-10. Per lo
   stesso motivo non serve proteggere l'embed Cal.com dalla grana: quella
   passa sopra a tutto il sito, ha pointer-events:none e non intercetta i
   click. */

.call-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 44px 0 56px;
}

/* Nome SENZA "-card" di proposito: queste schede sono informative e non
   cliccabili, quindi devono restare fuori dal selettore globale
   [class*="-card"]:hover, che le farebbe sollevare come se lo fossero. */
.call-step {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-thin);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  text-align: left;
}

.call-step__n {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 14px;
}

.call-step h3 {
  font-size: 1.02rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.call-step p {
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* Altezza automatica, non fissa: l'embed inline di Cal.com ridimensiona da se'
   il proprio iframe: con un'altezza fissa il riquadro resta mezzo vuoto sotto
   al calendario. min-height evita il salto di layout mentre l'embed carica. */
/* Il riquadro resta largo quanto il container, come ogni altro blocco del
   sito: stringerlo sul booker creava barre di scorrimento dentro l'iframe.
   Il booker di Cal.com ha pero' un max-width proprio e resta centrato, quindi
   lascia del vuoto ai lati DENTRO l'iframe: il padding verticale qui sotto e'
   tarato su quel vuoto (misurato leggendo i pixel del calendario renderizzato,
   non a occhio) perche' il margine risulti uguale sui quattro lati. */
.cal-wrap {
  border-radius: var(--radius-card);
  border: 1px solid var(--border-thin);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* 51 sopra e 41 sotto, non 15 come ai lati: misurando i pixel del
     calendario renderizzato, il contenuto del booker lascia ~74px di vuoto a
     destra e a sinistra (il suo max-width interno) contro 38 sopra e 48 sotto.
     Questi due valori portano tutti e quattro i lati a ~74px. Asimmetrici
     perche' il contenuto dell'iframe non e' centrato in verticale: sotto c'e'
     il logo Cal.com, che occupa spazio proprio. */
  padding: 51px 15px 41px;
  overflow: hidden;
}

#my-cal-inline-discovery-call {
  width: 100%;
  border-radius: var(--radius-sm);
}

/* ---------- Contatti — sezione 2: canali diretti ---------- */

/* Il contenitore NON puo' chiamarsi "contact-cards": `[class*="-card"]:hover`
   aggancia per sottostringa e prenderebbe anche lui, cosi' passando su una
   card si solleva l'intera griglia (tutte e tre insieme) e in piu' la singola
   card si solleva per conto suo. E' la stessa trappola del bug del blog, qui
   presa dal lato del contenitore invece che dei figli. */
.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}

/* Contiene "-card", quindi eredita sollevamento e ombra da
   [class*="-card"]:hover — qui e' corretto, l'intera scheda e' un link.
   Nessun figlio porta "-card" nel nome: il selettore aggancia per
   SOTTOSTRINGA e prenderebbe anche quelli (bug del blog, 2026-09-10). */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-thin);
  border-radius: var(--radius-card);
  padding: 30px 28px;
}

.contact-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(47, 128, 237, 0.12);
  color: var(--accent);
  margin-bottom: 12px;
}

.contact-ico svg {
  width: 23px;
  height: 23px;
}

.contact-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.contact-value {
  font-size: 1.04rem;
  font-weight: 500;
  color: var(--white);
}

.contact-social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 46px;
}

.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.contact-social a:hover {
  color: var(--white);
  border-color: var(--accent);
  transform: translateY(-3px);
}

.contact-social svg {
  width: 19px;
  height: 19px;
}

.contact-geo {
  text-align: center;
  margin-top: 22px;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/* ---------- Footer social icons (riusate anche in contatti.html) ---------- */
.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.footer-social a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-3px);
}

.footer-social svg { width: 18px; height: 18px; }

/* ---------- Scroll reveal ---------- */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal { transform: translateY(38px); }
.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ---- Titoli: slide + fade allo scroll ---- */
.highlight-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.highlight-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Accent highlight (blu sweep) ---- */
.accent-on-scroll {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, rgba(255,255,255,0.3) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background-position 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.accent-on-scroll.visible {
  background-position: 0% 0;
}

/* ---- Timeline draw-in ---- */
.timeline-line {
  position: relative;
}

.timeline-line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 0%;
  background: linear-gradient(180deg, var(--accent), transparent);
  transform: translateX(-50%);
  transition: height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-line.visible::before {
  height: 100%;
}

/* ---- Stagger children ---- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.stagger-children.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.5s; }

/* ---- Scale reveal ---- */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ---------- Card hover glow (local) ---------- */
/* ATTENZIONE al selettore [class*="-card"]: aggancia per SOTTOSTRINGA, quindi
   pesca anche i figli in stile BEM come .blog-card__cover, .blog-card__title,
   .blog-card__excerpt, .blog-card__cta, .blog-card__date — tutti contengono
   "-card". Serve `:not([class*="blog-card"])`, non `:not(.blog-card)`, che
   escluderebbe solo il contenitore e lascerebbe reattivo ogni figlio. */
.card,
.case-card,
.feature-card,
.step-card,
[class*="-card"]:not([class*="blog-card"]) {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* Le card del blog sono fuori da questo hover generico: hanno il loro.
   L'esclusione DEVE essere `:not([class*="blog-card"])` e non `:not(.blog-card)`:
   `[class*="-card"]` aggancia per sottostringa, quindi senza la forma larga
   ogni figlio BEM (.blog-card__title, .blog-card__excerpt, .blog-card__cta...)
   riceve al proprio hover translateY e box-shadow, e nella card si accende un
   rettangolo chiaro dietro al singolo pezzo di testo che il mouse tocca.
   E' esattamente il bug segnalato tre volte da Martino il 2026-09-10. */
.card:hover,
.case-card:hover,
.feature-card:hover,
.step-card:hover,
[class*="-card"]:not(.nav-card-link):not(.nav-card-label):not(.nav-card-links):not(.service-card):not(.sector-card):not(.work-card):not(.work-card-visual):not([class*="blog-card"]):hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(47, 128, 237, 0.08);
  border-color: rgba(47, 128, 237, 0.16);
}

/* ---------- Icon helpers ---------- */
.icon-accent {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  flex-shrink: 0;
}

.icon-white {
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: rgba(47, 128, 237, 0.4);
  border-radius: 10px;
  border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :root { --section-pad: 90px; }
  .services-grid,
  .split { grid-template-columns: 1fr; }
  .split { gap: 30px; }
  .split.reverse .split-text { order: 0; }
  .cases-grid,
  .blog-grid,
  .problem-grid,
  .steps-grid,
  .call-steps,
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-channels { grid-template-columns: 1fr; }
  .cal-wrap { padding: 34px 14px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links,
  .nav-cta .btn-primary { display: none; }
  .hamburger { display: flex; }
  .nav-cta { gap: 0; }
  .cases-grid,
  .blog-grid,
  .problem-grid,
  .steps-grid,
  .call-steps,
  .values-grid,
  .article-compare,
  .article-related-grid,
  .service-detail { grid-template-columns: 1fr; }
  .call-steps { margin: 34px 0 40px; }
  .cal-wrap { padding: 14px 10px; }
  .contact-social { gap: 14px; }
  .blog-search__input { padding: 17px 48px 17px 50px; font-size: 0.95rem; }
  .blog-card__cover { height: 190px; padding: 44px 22px 26px; }
  .blog-card__cover-title { font-size: 1.18rem; }
  .article-hero { padding: 140px 0 0; }
  .article-body { padding-top: 40px; }
  .article-body h2 { font-size: 1.4rem; margin-top: 44px; }
  .article-quote p { font-size: 1.35rem; }
  .article-stat__num { font-size: 2.4rem; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row > div { border-bottom: 1px solid var(--border-soft); }
  .compare-head { display: none; }
  .compare-row .col-label { font-weight: 600; background: var(--bg-secondary); }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  :root { --section-pad: 70px; }
  .container { padding: 0 20px; }
  .card { padding: 26px; }
  .cta-box { padding: 50px 26px; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline { width: 100%; }
  .page-hero { padding: 150px 0 60px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   SCROLL ANIMATIONS — added refinements
   ============================================================ */

/* ---- Blur-to-sharp reveal ---- */
.reveal-blur {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(10px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-blur.visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* ---- Scroll highlight sweep (like a marker pen) ---- */
.highlight-sweep {
  position: relative;
  display: inline;
}
.highlight-sweep::after {
  content: '';
  position: absolute;
  left: -4px;
  bottom: -2px;
  width: 0%;
  height: 110%;
  background: rgba(47, 128, 237, 0.25);
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}
.highlight-sweep.visible::after {
  width: calc(100% + 8px);
}

/* ---- Scroll highlight reveal (marker bar behind the lower part of the letters, left→right) ---- */
.highlight-underline {
  position: relative;
  display: inline;
  /* Se la frase evidenziata va a capo a meta', il ::after (posizionato
     rispetto al bounding box totale, frammentato su piu' righe) si rompe
     visivamente. white-space:nowrap forza l'intera frase a spostarsi
     tutta insieme sulla riga successiva quando non c'e' spazio, invece
     di spezzarsi al suo interno. */
  white-space: nowrap;
}
.highlight-underline::after {
  content: '';
  position: absolute;
  left: -0.08em;
  bottom: 0.24em;
  width: 0%;
  height: 0.4em;
  background: var(--accent);
  border-radius: 0;
  z-index: -1;
  transform: skewX(-6deg);
  transform-origin: bottom left;
  transition: width 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.highlight-underline.visible::after {
  width: calc(100% + 0.16em);
}

/* ---- Gradient text color reveal on scroll ---- */
/* ============================================================
   SCROLL TIMELINE — "Come lavoriamo"
   ============================================================ */
.scroll-timeline {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 160px 0;
  display: flex;
  align-items: center;
}

.scroll-timeline .container {
  width: 100%;
}

.timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}

.timeline-track-line {
  position: absolute;
  top: 60px;
  bottom: 60px;
  left: 0;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12) 0px,
    rgba(255, 255, 255, 0.12) 4px,
    transparent 4px,
    transparent 12px
  );
}

/* Traccia "laser": cresce dall'alto in base allo scroll, sovrapposta alla linea tratteggiata spenta */
.timeline-track-line-fill {
  position: absolute;
  top: 60px;
  left: 0;
  width: 1px;
  height: 0px;
  background: linear-gradient(to bottom, rgba(47, 128, 237, 0.2), var(--accent));
  box-shadow: 0 0 6px rgba(47, 128, 237, 0.9), 0 0 16px rgba(47, 128, 237, 0.55);
}

.timeline-marker {
  position: sticky;
  top: 50vh;
  top: 50svh;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0%, var(--accent) 55%, rgba(47, 128, 237, 0.4) 100%);
  border: none;
  box-shadow: 0 0 10px 3px rgba(47, 128, 237, 0.95), 0 0 26px rgba(47, 128, 237, 0.7), 0 0 46px rgba(47, 128, 237, 0.4);
  margin-left: -9px;
  transform: translateY(-50%);
  transition: top 0.1s;
  z-index: 3;
}

.timeline-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: 60px 0;
}

.timeline-step {
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  align-items: stretch;
  gap: 0 20px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-step.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Odd steps: card on left */
.timeline-step:nth-child(odd) .step-card {
  grid-column: 1;
  text-align: right;
}
.timeline-step:nth-child(odd) .step-node {
  grid-column: 2;
}
.timeline-step:nth-child(odd) .step-empty {
  grid-column: 3;
}

/* Even steps: card on right */
.timeline-step:nth-child(even) .step-empty {
  grid-column: 1;
}
.timeline-step:nth-child(even) .step-node {
  grid-column: 2;
}
.timeline-step:nth-child(even) .step-card {
  grid-column: 3;
  text-align: left;
}

.step-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  min-height: 100%;
  border: 1px solid rgba(47, 128, 237, 0.35);
  border-radius: var(--radius-card);
  background: rgba(8, 8, 10, 0.88);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-family: var(--font);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, background 0.35s ease;
}

.step-node.is-lit {
  border-color: rgba(47, 128, 237, 0.9);
  background: rgba(10, 18, 30, 0.92);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(47, 128, 237, 0.55), 0 0 40px rgba(47, 128, 237, 0.25), inset 0 0 20px rgba(47, 128, 237, 0.25);
}

.scroll-timeline .step-card {
  padding: 28px 32px;
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-card);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.scroll-timeline .step-card:hover {
  border-color: rgba(47, 128, 237, 0.25);
  box-shadow: 0 8px 32px rgba(47, 128, 237, 0.1);
}

.scroll-timeline .step-card h3 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 10px;
  font-size: 0.8rem;
}

.scroll-timeline .step-card p {
  color: var(--text-secondary);
  font-size: 0.97rem;
  line-height: 1.7;
}

.scroll-timeline .step-card .step-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ============================================================
   FOOTER — ported da synapai.it (griglia + bottone glass + LED)
   ============================================================ */
.foot-col-legal{ text-align:right; overflow:visible; }
.foot-legal{
  margin:0; color:var(--white); font-size:1rem; line-height:1.5; white-space:nowrap;
}
.foot-legal-links{
  margin:.4rem 0 0; font-size:1rem; display:flex; align-items:baseline; gap:8px;
  justify-content:flex-end; white-space:nowrap; overflow:visible;
}
.foot-legal-link{ color:var(--white); text-decoration:none; }
.foot-legal-link::after{ display:none !important; }
.foot-sep{ opacity:.85; padding:0 .35rem; }

.synap-footer{
  --synap-blue:#2f80ed;
  --link:#bfc6ce;
  --link-darker:#9aa3ad;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:400; background:transparent; color:var(--white);
  position:relative; overflow:clip; isolation:isolate;
  padding:220px 0 0; font-size:1rem;
}

.synap-footer__inner{ position:relative; z-index:1; max-width:1760px; margin:0 auto; padding:0 48px; box-sizing:content-box; }

/* Il margine stretto arriva fino a 700 e non a 640: fra i 645 e i 690px le
   due colonne del footer chiedono 573px e con 48px di margine per lato non
   ce ne restano abbastanza, cosi' la colonna dei contatti sbordava oltre il
   margine — non tagliata, ma piu' vicina al bordo di quanto dovesse. Con
   20px di margine a 700px lo spazio utile e' 660, e appena sopra la soglia
   ne bastano 609. */
@media (max-width: 700px) {
  .synap-footer__inner{ padding:0 20px; }
}

.foot-grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:26px 56px; align-items:start; margin-bottom:20px;
}
/* La soglia e' 1280 e non 1000 (punto 24 dell'audit responsive). Le quattro
   colonne sono dichiarate 1fr, che vuol dire minmax(auto, 1fr): nessuna
   scende sotto la larghezza minima del proprio contenuto, e titoli e link
   hanno tutti white-space: nowrap. I minimi sommano 1061px, piu' 168px di
   vuoti fanno 1229 — contro i 924 disponibili con la finestra a 1020px. La
   griglia non puo' stringersi, quindi sfora, e overflow: clip taglia via il
   di piu' senza barra di scorrimento: fra i 1020 e i 1260px sparivano la
   P. IVA e la Cookie Policy, e nessuno se ne accorgeva perche' non restava
   nulla a dire che mancasse qualcosa. Le quattro colonne chiedono 1229px
   piu' i 96 di margine: sotto i 1330 si passa quindi alle due, che a quelle
   larghezze respirano. Fra i 1285 e i 1320 il blocco legale non veniva
   tagliato ma sbordava comunque oltre il margine, ed e' il motivo per cui
   la soglia e' 1330 e non 1280. Le tre soglie che seguono descrivono lo
   stesso confine e vanno spostate insieme. */
@media (max-width:1330px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:24px 32px; } }
/* E la colonna singola parte da 620 e non da 560, per lo stesso motivo della
   soglia qui sopra: a due colonne i minimi sono 288.8 + 252.4, che con il
   vuoto in mezzo fanno 573px, contro i 540 disponibili a 580px di finestra.
   Fra i 561 e i 599px il blocco legale finiva tagliato; fino a 610 sbordava
   ancora oltre il margine senza essere tagliato, ed e' per questo che la
   soglia e' 620 e non 600. Le quattro soglie a 620px del footer descrivono
   lo stesso confine: si spostano insieme. */
@media (max-width:620px){ .foot-grid{ grid-template-columns:1fr; } }

.foot-col--grid{
  display:grid; grid-template-columns:auto 1fr; grid-auto-rows:min-content; column-gap:18px;
}
.foot-title{
  margin:0; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; color:var(--white); white-space:nowrap;
  grid-column:1;
}
.foot-col--grid .foot-firstlink{ grid-column:2; grid-row:1; align-self:baseline; margin-top:-4px; }

.foot-col--grid .foot-list{
  grid-column:2; grid-row:2;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:10px; margin:6px 0 0; padding:0; list-style:none;
}
.foot-col--grid .foot-list li{ margin:0; padding:0; line-height:1.4; }
.foot-col--grid .foot-icons{ grid-column:2; margin-top:18px; }

.foot-firstlink, .foot-link{
  color:var(--link); text-decoration:none; font-size:1rem;
  display:inline-flex; align-items:center; gap:6px; text-transform:capitalize; white-space:nowrap;
}
.foot-firstlink::after, .foot-link::after{
  content:""; width:1em; height:1em; background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M7 17L17 7M17 7H9M17 7v8"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M7 17L17 7M17 7H9M17 7v8"/></svg>') no-repeat center/contain;
}
.foot-firstlink:hover, .foot-link:hover{ color:var(--link-darker); }
.foot-text{ color:var(--white); font-size:1rem; }

.foot-icons{ display:flex; gap:10px; margin-top:10px; }
.foot-icon{ display:inline-block; padding:0; }
.foot-icon img{ width:22px; height:22px; object-fit:contain; display:block; }

.foot-col-cta{ text-align: center; }
.foot-col-cta .foot-cta-btn{ margin-top: 14px; }

.synap-led-wrap{ display: none; }

.foot-logo{
  display:block;
  width:100vw;
  margin-left:calc(50% - 50vw);
  /* La scritta viene scalata via JS per riempire esattamente la larghezza,
     quindi la sua altezza cresce anche lei in proporzione alla pagina: circa
     0.20 volte la larghezza. Con un'altezza di 0.17 volte la larghezza la
     fascia ne mostra l'85% e taglia il resto in basso, ed e' li' che la
     sfumatura mangia le lettere: e' la resa che si vede su desktop.
     Il clamp aveva un pavimento di 160px che sotto i 941px di larghezza
     spegneva la proporzione: a 390px la fascia restava alta 160px per una
     scritta alta 78, cioe' meta' fascia di nero vuoto sotto le lettere, con
     la sfumatura sprecata sul fondo invece che sul logo. Resta il tetto di
     300px, che serve sui monitor molto larghi. */
  height:min(17vw, 300px);
  margin-top:55px;
  overflow:hidden;
  position:relative;
}
.foot-logo-text{
  display:block;
  position:absolute;
  top:-6%;
  left:0;
  width:max-content;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:200px;
  line-height:0.82;
  letter-spacing:-0.02em;
  white-space:nowrap;
  text-align:left;
  transform-origin:top left;
  background:linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.75) 60%, rgba(255,255,255,0.2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0;
}

.foot-logo-blur{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:40%;
  pointer-events:none;
  z-index:2;
}
.foot-logo-blur > div{
  position:absolute;
  inset:0;
}

/* Gli scostamenti qui dentro sono ritocchi a mano del layout a quattro
   colonne: valgono solo dove quel layout c'e' davvero, quindi la soglia
   segue quella della griglia. */
@media (min-width:1331px){
  .foot-grid section:nth-child(2){ transform: translateX(-59px); }
  .foot-grid > section:nth-child(3){ transform: translateX(-41px); }
  .foot-grid > section:nth-child(3) .foot-title{ transform: translateY(-5px); }
  .foot-grid > section:nth-child(2) .foot-firstlink{ transform: translateY(-1px); }
  .foot-col-legal .foot-legal:first-child{ transform: translateY(-4px); display: inline-block; }
  .foot-col-legal{ text-align: right; }
  .foot-col-legal .foot-legal--piva{ display:block; width:100%; text-align:right; margin-top:2px; }
  .foot-col-legal .foot-legal-links{ margin-top: 8px; }
}

@media (max-width:1330px){
  .foot-col-legal .foot-legal--piva{ display:block; text-align:center; }
  .synap-footer .foot-col-legal{ text-align: center; }
  .synap-footer .foot-legal-links{ justify-content: center; }
  .synap-footer .foot-col-legal .foot-legal-links{ margin-top: 20px; }
}

@media (max-width: 620px){
  :root{ --foot-title-col: 150px; }
  .synap-footer .foot-col--grid{
    display: grid; grid-template-columns: var(--foot-title-col) 1fr; align-items: start; column-gap: 16px;
  }
  .synap-footer .foot-title{ font-size: 1rem; line-height: 1.4; letter-spacing: .06em; margin: 0; text-transform: uppercase; }
  .synap-footer .foot-col--grid .foot-firstlink{ margin-top: -2px; }
  .synap-footer .foot-col--grid .foot-list{ margin-top: 6px; gap: 10px; }
  .synap-footer .foot-col-cta{ justify-self: center; display: flex; flex-direction: column; align-items: center; }
  .synap-footer .foot-col-legal{ text-align: center; justify-self: center; }
  .synap-footer .foot-legal-links{ justify-content: center; }
  .synap-footer .foot-col--grid:first-child { margin-bottom: 28px; }
  .synap-footer .foot-col { margin-bottom: 28px; }
  .synap-footer .foot-col-legal { margin-bottom: 0; }
  .synap-footer .foot-col-legal p, .synap-footer .foot-col-legal a, .synap-footer .foot-col-legal .foot-sep {
    font-size: 0.8rem; line-height: 1.3;
  }
  .synap-footer .foot-col--grid:first-child .foot-firstlink,
  .synap-footer .foot-col--grid:first-child .foot-list { margin-left: 25px; }
  .synap-footer .foot-col--grid:nth-child(2) .foot-firstlink,
  .synap-footer .foot-col--grid:nth-child(2) .foot-text,
  .synap-footer .foot-col--grid:nth-child(2) .foot-icons { margin-left: 25px; }
  .synap-footer .foot-col--grid .foot-title { position: relative; left: 35px; }
  .synap-footer .foot-col-legal .foot-legal:first-child,
  .synap-footer .foot-col-legal .foot-legal--piva { position: relative; top: -6px; }
  .foot-logo{ margin-top: 50px; }
}

.synap-footer * { box-sizing: border-box; }
.synap-footer h3, .synap-footer p, .synap-footer ul, .synap-footer li { margin:0; padding:0; }
.synap-footer ul { list-style:none; }
.synap-footer .foot-col { text-align:left; }
.synap-footer .foot-col-legal { text-align:right; }
.synap-footer a{ text-decoration:none; }

@media (max-width: 768px) {
  /* Metodo ACCA su mobile: stesso identico meccanismo del desktop — linea
     tratteggiata, laser che cresce con lo scorrimento, pallino appiccicato a
     meta' schermo, lettere che si accendono al passaggio — solo riorganizzato
     su una colonna sola: le lettere tutte a sinistra con la traccia che le
     attraversa, le card col testo a destra.

     Prima la traccia era semplicemente nascosta e restava una lista di card,
     ma nemmeno quella funzionava: la griglia passava a una colonna e le card
     venivano riportate in colonna 1, mentre le lettere tenevano il
     `grid-column: 2` del desktop. Con una sola colonna dichiarata, quel 2
     creava una colonna implicita a destra, e le lettere finivano li' — fuori
     asse rispetto alla card, senza nessuna traccia a legarle. */
  .scroll-timeline { --acca-lettera: 64px; }

  .timeline-track {
    /* Centro della colonna delle lettere invece che centro della sezione. */
    left: calc(var(--acca-lettera) / 2);
  }

  /* Con passi piu' corti i 60px di rientro del desktop lascerebbero la traccia
     accesa solo a meta': qui la linea arriva quasi a filo della prima e
     dell'ultima lettera. */
  .timeline-track-line,
  .timeline-track-line-fill { top: 26px; }
  .timeline-track-line { bottom: 26px; }

  .timeline-steps { gap: 44px; padding: 26px 0; }

  .timeline-step {
    grid-template-columns: var(--acca-lettera) 1fr;
    gap: 0 18px;
  }

  /* Le due file alternate del desktop diventano una sola disposizione.
     La riga va dichiarata, non solo la colonna: nei passi dispari la card
     viene prima nel markup, quindi si prende la riga 1, e la lettera —
     che arriva dopo — non puo' piu' tornare indietro a occupare la colonna 1
     della stessa riga e finisce in una riga nuova, sotto la card. */
  .timeline-step:nth-child(odd) .step-node,
  .timeline-step:nth-child(even) .step-node {
    grid-column: 1;
    grid-row: 1;
  }
  .timeline-step:nth-child(odd) .step-card,
  .timeline-step:nth-child(even) .step-card {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .step-node {
    width: var(--acca-lettera);
    min-height: 100%;
    font-size: 1.9rem;
    margin: 0;
  }

  .step-empty { display: none; }
}

/* ============================================================
   PAGE FX — sfumature d'angolo in parallax + grana (pagine servizi)
   Stanno SOPRA a tutte le sezioni (blend mode, pointer-events:none),
   che mantengono i loro colori nativi (nero pieno / bg-secondary).
   ============================================================ */
.page-fx-glows {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  /* Altezza agganciata al viewport GRANDE, quello con le barre del browser
     ritirate. I due glow sono posizionati in percentuale su questo
     contenitore (--tl a top -18%, --br a bottom -20%): se il contenitore
     cambia altezza, si spostano. E su iPhone un elemento position:fixed alto
     quanto il viewport cambia altezza di continuo, perche' la striscia di
     comandi del browser si ritira scorrendo verso il basso e ritorna
     scorrendo verso l'alto. Da qui lo scatto: lo sfondo va su e giu' mentre
     la pagina scorre.
     Serve proprio la misura GRANDE e non quella piccola (svh, usata invece
     per l'hero della home): con svh, appena la barra si ritira, il glow in
     basso a destra resterebbe piu' in alto del bordo e scoprirebbe una
     striscia vuota. Con lvh il contenitore e' sempre almeno alto quanto lo
     schermo, la parte in eccesso resta semplicemente nascosta sotto la barra,
     e soprattutto non si muove mai.
     La riga con vh resta come riserva per i browser senza lvh. */
  height: 100vh;
  height: 100lvh;
}

.page-fx-glow {
  /* niente mix-blend-mode: su sfondo quasi nero "screen" e "normal" danno
     un risultato quasi identico, ed evitare il blend mode elimina
     un'interazione con il backdrop-filter delle card che causava un
     artefatto grigio sul bordo della card adiacente durante l'hover. */
  position: absolute;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(70px);
}

.page-fx-glow--tl {
  top: -18%;
  left: -14%;
  background: radial-gradient(circle, rgba(47, 128, 237, 0.38) 0%, rgba(47, 128, 237, 0.16) 45%, transparent 72%);
}

.page-fx-glow--br {
  right: -16%;
  bottom: -20%;
  background: radial-gradient(circle, rgba(107, 175, 245, 0.32) 0%, rgba(47, 128, 237, 0.14) 45%, transparent 72%);
}

.page-fx-grain {
  /* niente mix-blend-mode, stesso motivo di .page-fx-glow qui sopra */
  position: fixed;
  /* Sovradimensionata SOLO in altezza, e a zero sui lati.
     Stesso motivo del contenitore dei glow: inset in percentuale su un
     elemento fisso significa altezza che segue la barra del browser. La
     grana e' un disturbo uniforme e ripetuto, quindi spostarsi non si vede,
     ma ridimensionarla a ogni scorrimento costa un ridisegno a schermo
     intero. -10% sopra e -10% sotto fanno il 120% dell'altezza.
     Sui lati invece il margine in piu' non serviva a niente: la larghezza
     non cambia mai con la barra del browser. Era un effetto collaterale
     della forma breve `inset: -10%`, che lo applicava a tutti e quattro i
     lati, e sporgeva del 10% a sinistra e a destra fuori dallo schermo.
     Nessuno lo tagliava: essendo position: fixed non e' contenuto
     dall'overflow-x: hidden del body, ed e' per lo stesso motivo che non
     compariva in document.scrollWidth, che infatti misurava 390 su 390
     mentre questo elemento stava a -39..429. */
  inset: -10% 0;
  top: -10lvh;
  bottom: auto;
  height: 120lvh;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .page-fx-glow { transform: none !important; }
}

/* Il ::before radiale centrato (preesistente nel template) va rimosso su
   queste pagine — i due glow d'angolo restano visibili anche nella hero. */
.page-fx-glows ~ .page-hero::before {
  display: none;
}

/* .page-hero .container ha z-index:1 (globale, per stare sopra al vecchio
   glow centrale) — questo intrappola qualunque z-index dei suoi discendenti
   nel SUO contesto di stacking locale, a un tetto di 1: alzare lo z-index
   di .service-card da solo non basta a farlo emergere sopra a
   .page-fx-grain (z-index 3). Qui, solo dove .page-fx-glows è presente,
   alziamo il tetto sopra a entrambi gli overlay globali (1 e 3). */
.page-fx-glows ~ .page-hero .container {
  z-index: 5;
}

/* servizi.html: hero e card servizio ora nella stessa sezione (#pilastri).
   overflow:hidden serviva solo a contenere il vecchio glow centrale (già
   rimosso qui sopra) — con le card dentro, tagliava/alterava il rendering
   del loro border-glow vicino al bordo quando una vicina è in hover. */
#pilastri.page-hero {
  overflow: visible;
}

/* ============================================================
   INTEGRATIONS ORBIT — grafo di loghi animato (operatore-ai-vocale)
   Rotazione continua via JS (rAF, non CSS animation) cosi la velocita'
   puo' accelerare durante lo scroll e rilassarsi dolcemente quando
   lo scroll si ferma, senza lo scatto che si avrebbe cambiando
   animation-duration su una CSS animation gia' in corso.
   ============================================================ */
.integrations-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  text-align: left;
}

.integrations-copy h2,
.integrations-copy p {
  text-align: left;
}

.integrations-copy p {
  color: var(--text-secondary);
  margin-top: 18px;
  font-size: 1.08rem;
}

.integrations-orbit {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.orbit-path {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed var(--border-soft);
}

.orbit-path--outer {
  width: 380px;
  height: 380px;
  margin: -190px;
}

.orbit-path--inner {
  width: 200px;
  height: 200px;
  margin: -100px;
}

.orbit-ring {
  position: absolute;
  inset: 0;
}

.orbit-ring--outer {
  --radius: 190px;
}

.orbit-ring--inner {
  --radius: 100px;
}

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: -29px;
  transform: rotate(var(--angle)) translateX(var(--radius));
}

.orbit-item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  /* Cancella sia la rotazione dinamica dell'anello (--counter-angle,
     ereditata dal ring) sia l'angolo statico di posizionamento
     dell'item stesso (--angle), cosi' il logo resta sempre dritto. */
  transform: rotate(calc(var(--counter-angle, 0deg) - var(--angle, 0deg)));
}

.orbit-item-inner img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Il logo Zoho e' un simbolo piu' minuto/dettagliato degli altri: meno
   padding per farlo leggere alla stessa dimensione percepita. */
.orbit-item-inner--zoho {
  padding: 6px;
}

.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  margin: -42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  z-index: 2;
}

.orbit-center span {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}

@media (max-width: 900px) {
  .integrations-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .integrations-copy h2,
  .integrations-copy p {
    text-align: center;
  }
  .integrations-orbit {
    max-width: 300px;
  }
  .orbit-ring--outer { --radius: 108px; }
  .orbit-ring--inner { --radius: 72px; }
  .orbit-path--outer { width: 216px; height: 216px; margin: -108px; }
  .orbit-path--inner { width: 144px; height: 144px; margin: -72px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-ring { transform: none !important; }
  .orbit-item-inner { transform: none !important; }
}

/* ============================================================
   AI COMPARE — tabella "senza/con operatore AI" (operatore-ai-vocale)
   ============================================================ */
.ai-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 980px;
  margin: 56px auto 0;
}

.ai-compare-col {
  border-radius: var(--radius-card);
  padding: 36px 38px;
  border: 1px solid var(--border-soft);
}

.ai-compare-col--without {
  background: transparent;
  opacity: 0.75;
}

.ai-compare-col--with {
  background: rgba(47, 128, 237, 0.07);
  border-color: rgba(47, 128, 237, 0.35);
  box-shadow: 0 20px 50px rgba(47, 128, 237, 0.12);
}

.ai-compare-label {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 22px;
}

.ai-compare-col--without .ai-compare-label {
  color: var(--text-secondary);
}

.ai-compare-col--with .ai-compare-label {
  color: var(--accent);
}

.ai-compare-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  line-height: 1.5;
}

.ai-compare-col--without .ai-compare-list li {
  color: var(--text-secondary);
}

.ai-compare-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 1px;
}

.ai-compare-icon--no {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.ai-compare-icon--yes {
  background: rgba(47, 128, 237, 0.16);
  color: var(--accent);
}

@media (max-width: 768px) {
  .ai-compare {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TRY AI — sezione "provalo tu stesso" (operatore-ai-vocale)
   ============================================================ */
.try-ai-section {
  overflow: hidden;
}

.try-ai-box {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: 56px;
}

.try-ai-copy {
  text-align: left;
  min-width: 0;
}

.try-ai-copy h2 {
  font-size: clamp(1.95rem, 3.4vw, 2.75rem);
}

.try-ai-box p {
  color: var(--text-secondary);
  margin: 20px 0 0;
  font-size: 1.08rem;
  max-width: 440px;
}

.try-ai-visual {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1300px;
}

.try-ai-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  margin: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 128, 237, 0.28), transparent 68%);
  filter: blur(10px);
  animation: try-ai-glow-pulse 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes try-ai-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* ---------- Mockup telefono (iPhone reale come immagine) ---------- */
/* Track: posa di riposo diagonale (impostata via GSAP all'ingresso,
   qui come fallback statico per no-JS / reduced-motion) */
.phone-mockup-track {
  position: relative;
  width: 262px;
  max-width: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-17deg) rotateZ(6deg);
  will-change: transform;
}

.phone-mockup {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  will-change: transform;
}

.phone-mockup-device {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Overlay allineato all'area vetro dell'iPhone nel PNG
   (misure ricavate dal file: top 1.75% · left 4.37% · 91.52% × 96.5%) */
.phone-mockup-screen {
  position: absolute;
  top: 1.75%;
  left: 4.37%;
  width: 91.52%;
  height: 96.5%;
  border-radius: 17% / 8%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #0e1524, #05060a 78%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 13% 9% 9%;
}

.phone-call-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: auto 0;
}

.phone-call-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.phone-call-label {
  font-size: 0.68rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.phone-call-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
}

.phone-orb-wrap {
  position: relative;
  width: 146px;
  height: 146px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-orb-wrap::before {
  content: '';
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 128, 237, 0.42), transparent 72%);
  filter: blur(8px);
}

.phone-orb-canvas {
  position: relative;
  width: 146px;
  height: 146px;
}

.phone-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  margin-top: -6px;
}

.phone-waveform span {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.75;
  animation: try-ai-wave 1.2s ease-in-out infinite;
}

.phone-waveform span:nth-child(1) { height: 5px; animation-delay: -1.1s; }
.phone-waveform span:nth-child(2) { height: 12px; animation-delay: -0.9s; }
.phone-waveform span:nth-child(3) { height: 17px; animation-delay: -0.7s; }
.phone-waveform span:nth-child(4) { height: 9px; animation-delay: -0.5s; }
.phone-waveform span:nth-child(5) { height: 18px; animation-delay: -0.3s; }
.phone-waveform span:nth-child(6) { height: 8px; animation-delay: -0.1s; }
.phone-waveform span:nth-child(7) { height: 14px; animation-delay: -0.6s; }

@keyframes try-ai-wave {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.phone-call-actions {
  display: flex;
  align-items: center;
  gap: 34px;
}

.phone-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
}

.phone-call-btn svg {
  width: 18px;
  height: 18px;
}

.phone-call-btn--decline {
  background: #e5484d;
}

.phone-call-btn--accept {
  background: #2fbb6a;
  animation: try-ai-accept-pulse 1.8s ease-in-out infinite;
}

@keyframes try-ai-accept-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 187, 106, 0.55); }
  50% { box-shadow: 0 0 0 10px rgba(47, 187, 106, 0); }
}

.try-ai-btn {
  font-size: 1.05rem;
  padding: 16px 34px;
  gap: 12px;
  margin-top: 34px;
}

.try-ai-btn svg:first-child {
  width: 18px;
  height: 18px;
}

/* Rassicurazione sopra il bottone: sta dentro .try-ai-box p, quindi
   ridimensiona font e colore per non competere col paragrafo principale.
   Il margine del bottone si stringe quando la nota lo precede. */
.try-ai-note {
  margin-top: 26px;
  color: var(--text-tertiary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.try-ai-note + .try-ai-btn {
  margin-top: 16px;
}

/* Modalità "Demo in arrivo" (temporanea, finché l'agente demo non è pronto).
   L'etichetta NON è un bottone: niente hover, niente cursore, così non sembra
   un pulsante rotto. Stesse misure del link .try-ai-soon-link accanto, cosi'
   le due pillole hanno la stessa altezza. Da cancellare insieme al
   markup quando si ripristina la versione originale. */
.try-ai-soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 34px;
}

.try-ai-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  background: rgba(47, 128, 237, .08);
  border: 1.5px dashed rgba(47, 128, 237, .45);
  color: #fff;
  cursor: default;
  user-select: none;
}

.try-ai-soon-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: try-ai-soon-pulse 1.8s ease-in-out infinite;
}

@keyframes try-ai-soon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 128, 237, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(47, 128, 237, 0); }
}

.try-ai-soon-link {
  gap: 8px;
  font-size: 0.95rem;
}

.try-ai-soon-link svg {
  color: var(--accent);
  transition: transform 0.25s ease;
}

.try-ai-soon-link:hover svg {
  transform: translateX(4px);
}

@media (max-width: 860px) {
  .try-ai-box {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 480px;
  }
  .try-ai-copy {
    text-align: center;
  }
  .try-ai-soon {
    justify-content: center;
  }
  .try-ai-box p {
    margin-left: auto;
    margin-right: auto;
  }
  .try-ai-visual {
    order: 2;
    max-width: 300px;
  }
  .phone-mockup-track {
    transform: rotateY(-12deg) rotateZ(4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .try-ai-glow,
  .try-ai-soon-dot,
  .phone-waveform span,
  .phone-call-btn--accept {
    animation: none !important;
  }
  .phone-mockup {
    transform: none !important;
  }
}

/* ---------- USE-CASE SWITCHER (consulenza-aios) ---------- */
.usecase { margin-top: 44px; }

.usecase-switcher {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--bg-primary);
  border: 1px solid var(--border-soft);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.usecase-thumb {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  border-radius: 999px;
  background: var(--white);
  transition: transform 0.4s cubic-bezier(0.65,0,0.35,1), width 0.4s cubic-bezier(0.65,0,0.35,1);
  z-index: 0;
}
.usecase-pill {
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 10px 20px;
  cursor: pointer;
  transition: color 0.25s ease;
}
.usecase-pill.is-active { color: var(--bg-primary); }

.usecase-stage {
  position: relative;
  margin-top: 40px;
  transition: height 0.4s ease;
}
.usecase-panel {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding: 34px;
  border-radius: var(--radius-card);
  background: var(--bg-primary);
  border: 1px solid var(--border-soft);
}
.usecase-panel h3 { font-size: 1.5rem; margin-bottom: 14px; }
.usecase-panel p { color: var(--text-secondary); line-height: 1.7; margin: 0; max-width: none; }
.usecase-mock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.usecase-mock svg { width: 82%; height: 82%; }
.usecase-mock .mock { color: var(--text-secondary); }
.usecase-mock .mock-ink {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.usecase-panel.is-active .usecase-mock.play .mock-ink { opacity: 1; transform: none; }
.usecase-panel.is-active .usecase-mock.play .mock-ink:nth-of-type(2) { transition-delay: 0.06s; }
.usecase-panel.is-active .usecase-mock.play .mock-ink:nth-of-type(3) { transition-delay: 0.12s; }
.usecase-panel.is-active .usecase-mock.play .mock-ink:nth-of-type(4) { transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  .usecase-mock .mock-ink { opacity: 1; transform: none; transition: none; }
}

/* JS-on: pannelli sovrapposti, fade + sfocatura (fallback no-JS = tutti visibili in colonna) */
.usecase.js-ready .usecase-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  filter: blur(12px);
  transition: opacity 0.55s ease, filter 0.55s ease, visibility 0s linear 0.55s;
}
.usecase.js-ready .usecase-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transition: opacity 0.55s ease, filter 0.55s ease;
}
@media (prefers-reduced-motion: reduce) {
  .usecase.js-ready .usecase-panel { filter: none; transition: none; }
}

.usecase-cta {
  margin-top: 40px;
  padding: 34px 40px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(47, 128, 237, 0.45);
  background: rgba(47, 128, 237, 0.09);
  text-align: center;
}
.usecase-cta-lead { font-size: 1.3rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.usecase-cta p { color: var(--white); max-width: 620px; margin: 0 auto; line-height: 1.6; }
.usecase-cta .sa-btn-hero { margin-top: 22px; }

@media (max-width: 860px) {
  .usecase-panel { grid-template-columns: 1fr; gap: 26px; padding: 26px; }
  .usecase-mock { aspect-ratio: 16 / 10; max-width: 420px; margin: 0 auto; width: 100%; }
  .usecase-switcher { width: 100%; justify-content: center; }
  .usecase-cta { padding: 26px 22px; }
}

/* ---------- AIOS GRAPH (consulenza-aios, sezione "Cos'e' un AIOS") ---------- */
.aios-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
  margin-top: 66px;
}
.aios-cols-text p {
  color: var(--text-secondary);
  max-width: none;
  margin: 18px 0 0;
  font-size: 1.05rem;
}
.aios-graph {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.aios-graph canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 860px) {
  .aios-cols { grid-template-columns: 1fr; gap: 30px; margin-top: 44px; }
  .aios-graph { max-width: 420px; margin: 0 auto; aspect-ratio: 4 / 3; }
}

/* ---------- CALCOLATORE RISPARMIO (consulenza-aios) ---------- */
.savings {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: start;
  margin-top: 44px;
}

.savings-controls {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.savings-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
  cursor: pointer;
}
.savings-field-label {
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}
.savings-field-value {
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.savings-field-hint {
  display: block;
  margin-top: 12px;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  line-height: 1.5;
}

.savings-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 4px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  accent-color: var(--accent);
  cursor: pointer;
}
/* thumb: pallino azzurro pieno + glow sfumato leggero e poco esteso */
.savings-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 0 6px rgba(47, 128, 237, 0.55);
  cursor: pointer;
}
.savings-field input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 0 6px rgba(47, 128, 237, 0.55);
  cursor: pointer;
}
.savings-field input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.savings-field input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.savings-field input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.4);
}

.savings-result {
  padding: 36px;
  min-height: 300px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(47, 128, 237, 0.45);
  background: rgba(47, 128, 237, 0.09);
}
.savings-result-eyebrow {
  display: block;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
}
.savings-result-amount {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 1.8rem);
  line-height: 1.2;
  white-space: nowrap;
  margin: 6px 0 14px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left center;
}
.savings-result-amount.pulse { transform: scale(1.03); }
.savings-result-secondary {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}
.savings-result-secondary + .savings-result-secondary { margin-top: 4px; }
.savings-disclaimer {
  color: var(--text-tertiary);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 20px 0 0;
  max-width: none;
}
.savings-result .sa-btn-hero { margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  .savings-result-amount { transition: none; }
}

@media (max-width: 860px) {
  .savings {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 36px;
  }
  .savings-result { padding: 28px 24px; }
}

/* ============================================================
   CHI SIAMO — Vision/Mission e sezione "Come lavoriamo"
   ============================================================ */

/* La dimensione del corpo grande è definita una volta sola: i titoli
   la riusano moltiplicata per 1.35, il fattore già tarato a pixel per
   pareggiare l'altezza percepita tra Cormorant Garamond e Poppins
   (vedi progetto-nuovo-sito, 2026-08-21). */
.illuminate-section,
#come-lavoriamo {
  --il-size: clamp(2rem, 4.6vw, 3.9rem);
}

.illuminate-block + .illuminate-block {
  margin-top: clamp(90px, 14vh, 170px);
  margin-top: clamp(90px, 14svh, 170px);
}

.illuminate-head,
.work-head {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: calc(var(--il-size) * 1.35);
  line-height: 1.1;
  color: var(--accent);
  text-align: center;
  margin-bottom: 34px;
}

/* I titoli dei tre blocchi restano in Poppins bianco: il corsivo blu è il
   segno dei titoli di sezione, se lo prendessero anche loro la gerarchia
   tra "Come lavoriamo" e "Costruiamo" sparirebbe. */
.work-panel-title {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 22px;
}

.scroll-illuminate {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--il-size);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Il grigio spento lo mette il JS, solo quando può davvero animarlo.
   Senza JS il testo resta bianco: il default NON deve essere spento,
   altrimenti a JavaScript disattivato la sezione risulta illeggibile. */
.scroll-illuminate.is-ready,
.scroll-illuminate.is-ready .il-word {
  color: rgba(255, 255, 255, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-illuminate,
  .scroll-illuminate .il-word {
    color: var(--white);
  }
}

/* ---- "Come lavoriamo": stato di base = fallback, tre card in colonna ----
   Lo zig-zag e il percorso animato sono l'arricchimento: senza JS o su schermo
   stretto restano queste tre card impilate, che si leggono benissimo lo stesso. */
.work-flow {
  position: relative;
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Le card di questa sezione non reagiscono al puntatore: sono lastre ferme
   attraversate dal percorso, non elementi cliccabili. Il selettore generico
   [class*="-card"] le prenderebbe, quindi qui la transizione va spenta. */
.work-card,
.work-card-visual {
  transition: none;
}

.work-card {
  position: relative;
  z-index: 1;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-thin);
  border-radius: var(--radius-card);
  padding: clamp(26px, 3vw, 40px);
}

.work-card .work-panel-title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom: 16px;
}

.work-card p {
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

.work-card-visual {
  margin-top: 30px;
}

/* ---- Zig-zag: solo da 901px in su ----
   Sotto questa soglia due card affiancate non starebbero, e un percorso che le
   collega non avrebbe spazio per i tratti orizzontali. */
@media (min-width: 901px) {
  .work-flow {
    gap: clamp(70px, 9vw, 130px);
  }

  .work-card {
    width: 54%;
  }

  .work-card--right {
    margin-left: auto;
  }
}

/* ---- Il percorso che collega le card ----
   L'SVG copre tutto il contenitore e sta sotto le card: il tratto che
   attraversa la card 2 sparisce dietro di essa, ed è quello che fa sembrare
   che il laser entri da sopra e riesca di fianco. */
.work-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.work-path-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 2;
  stroke-linecap: round;
}

.work-path-live {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--glow));
}

.work-path-head {
  fill: #9CC6FF;
  filter: drop-shadow(0 0 8px rgba(47, 128, 237, 0.9));
}

/* ---- Mockup: mappa del sistema (card "Costruiamo" e "Cresciamo") ----
   La card 3 riusa lo stesso pannello con due nodi in più: la mappa deve
   restare riconoscibile, è quello che dimostra "non si ricomincia da zero". */
.sysmap {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  padding: 18px;
}

.sysmap-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.sysmap-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sysmap-in {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Altezza fissa, non negoziabile: le coordinate del fascio SVG sono scritte a
   mano nell'HTML e valgono solo se ogni nodo è alto 38px con 10px di distanza
   (centri a 19, 67, 115, 163, 211). Cambiare questi due valori significa
   ricalcolare i path in chi-siamo.html. */
.sysmap-node {
  height: 38px;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 0.82rem;
  white-space: nowrap;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
}

/* i rami innestati dopo: stesso posto, accento acceso */
.sysmap-node--new {
  border-color: var(--accent-soft);
  color: var(--white);
  background: rgba(47, 128, 237, 0.10);
}

/* ---- Il fascio che porta i nodi dentro al sistema ----
   Due strati: i fili spenti sempre presenti, e sopra un tratto corto che li
   percorre in continuazione verso il sistema. Non è un caricamento che finisce:
   il flusso non si ferma mai, come il lavoro che il sistema fa ogni giorno. */
.sysmap-beam {
  flex: none;
  overflow: visible;
}

.sysmap-wire {
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1;
  fill: none;
}

.sysmap-wire--new {
  stroke: rgba(47, 128, 237, 0.28);
}

.sysmap-flow {
  stroke: var(--accent);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  /* il tratto corto su un vuoto lungo quanto il filo: passa uno alla volta */
  stroke-dasharray: 16 120;
  animation: sysmap-run 3.3s linear infinite;
}

/* i due rami nuovi pulsano un filo più accesi: sono la novità della card */
.sysmap-flow--new {
  stroke: #9CC6FF;
  stroke-width: 2;
  animation-duration: 2.6s;
}

@keyframes sysmap-run {
  from { stroke-dashoffset: 136; }
  to { stroke-dashoffset: 0; }
}

.sysmap-hub {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-thin);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(47, 128, 237, 0.08);
  flex: none;
}

.sysmap-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
  flex: none;
}

/* ---- Mockup: i due binari dell'assistenza (card "Restiamo") ----
   Le linee sfumano verso destra e non finiscono con un punto: il senso è che
   il rapporto continua, non che si è chiuso un intervento. */
.rails {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  padding: 18px;
  overflow: hidden;
}

.rails-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.rail {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rail + .rail {
  margin-top: 12px;
}

.rail-name {
  font-size: 0.85rem;
  color: var(--white);
  white-space: nowrap;
}

/* il margine negativo fa uscire la linea dal pannello: la dissolvenza
   finisce oltre il bordo, così non si legge come una barra che finisce */
.rail-line {
  position: relative;
  flex: 1;
  height: 1px;
  margin-right: -18px;
  background: linear-gradient(90deg, var(--accent-soft), rgba(47, 128, 237, 0));
}

/* un impulso che percorre il binario e se ne va oltre il bordo: la stessa
   idea del fascio nelle altre due card, il rapporto continua */
.rail-line::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -34px;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(156, 198, 255, 0), #9CC6FF);
  animation: rail-run 3.6s linear infinite;
}

.rail:last-of-type .rail-line::after {
  animation-delay: -1.8s;
}

@keyframes rail-run {
  from { left: -34px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

.rails-live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

.rail-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: rail-pulse 2.4s ease-in-out infinite;
}

@keyframes rail-pulse {
  0%, 100% { opacity: 0.35; box-shadow: 0 0 0 rgba(47, 128, 237, 0); }
  50% { opacity: 1; box-shadow: 0 0 12px var(--glow); }
}

@media (prefers-reduced-motion: reduce) {
  .rail-live { animation: none; opacity: 1; }
  .rail-line::after { animation: none; opacity: 0; }
  .sysmap-flow { animation: none; stroke-dasharray: none; opacity: 0.5; }
}

@media (max-width: 900px) {
  .illuminate-block + .illuminate-block { margin-top: 80px; }
}

/* ---------- Casi studio: in attesa del primo caso ---------- */
/* Sola tipografia, nessun riquadro: decorare un'assenza la fa notare di piu'.
   Quando ci sara' il primo caso, questa sezione lascia il posto a .cases-grid. */
.cases-pending {
  padding: 130px 0 140px;
  text-align: center;
}

.cases-pending h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin: 0 auto;
}

.cases-pending p {
  color: var(--text-secondary);
  font-size: 1.15rem;
  line-height: 1.65;
  max-width: 46ch;
  margin: 26px auto 0;
}

@media (max-width: 640px) {
  .cases-pending { padding: 90px 0 96px; }
  .cases-pending p { font-size: 1.05rem; }
}



/* ---------- LogoLoop — nastro loghi clienti ---------- */
/* Porting vanilla del componente React fornito da Martino (js/logo-loop.js).
   Sostituisce il vecchio .ticker su casi-studio.html: niente puntini
   divisori, solo i loghi distanziati con sfumatura ai bordi. */
.logoloop {
  position: relative;
  overflow: hidden;
  --logoloop-gap: 88px;
  --logoloop-logoHeight: 34px;
  --logoloop-fadeColor: var(--bg-secondary, #0a0a0a);
}

.logoloop__track {
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
}

.logoloop__list {
  display: flex;
  align-items: center;
  gap: var(--logoloop-gap);
  margin: 0;
  padding: 0 calc(var(--logoloop-gap) / 2);
  list-style: none;
  flex: none;
}

.logoloop__item {
  flex: none;
  display: flex;
  align-items: center;
}

.logoloop__item img {
  height: var(--logoloop-logoHeight);
  width: auto;
  display: block;
  object-fit: contain;
  /* i loghi arrivano gia' bianchi su fondo trasparente: il filtro li
     normalizza comunque, l'opacita' li tiene sotto al peso dei titoli */
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.logoloop--scale-hover .logoloop__item:hover img {
  opacity: 1;
  transform: scale(1.08);
}

/* Sfumatura ai due bordi: i loghi entrano ed escono invece di apparire
   di colpo sul taglio del contenitore.
   E' una MASCHERA, non due rettangoli di colore sopra al nastro: su queste
   pagine i bagliori d'angolo (.page-fx-glows) passano sopra alle sezioni,
   quindi un fade dipinto col colore di sfondo si stacca dal fondo e
   disegna due blocchi scuri sul blu. La maschera rende trasparenti i
   bordi e funziona su qualunque sfondo ci sia sotto. */
.logoloop--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Con prefers-reduced-motion il nastro non parte: la lista resta ferma,
   centrata e completamente leggibile. */
.logoloop--static .logoloop__list {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 28px;
}

/* Le tre altezze sono diverse di proposito. I canvas sono 906x250,
   588x250 e 400x250 px, e FAinteriors ha margini trasparenti interni:
   con un'altezza unica Biasotto risultava piu' del doppio di FAinteriors.
   Si pareggia il peso visivo percepito, non l'altezza nominale.
   Valori validati su screenshot reale. */
.logoloop__item--biasotto img { height: calc(var(--logoloop-logoHeight) * 0.75); }
.logoloop__item--white-blossom img { height: var(--logoloop-logoHeight); }
.logoloop__item--fainteriors img { height: var(--logoloop-logoHeight); }

@media (max-width: 640px) {
  .logoloop { --logoloop-gap: 58px; --logoloop-logoHeight: 40px; }
}

/* ---------- Casi studio: card del primo caso, in attesa ---------- */
/* Ha la forma di una card caso studio vera (stessa griglia, stesso
   riquadro, stessa area immagine in alto): dice che i casi non ci sono
   ancora mostrando la sagoma di quello che ci sara'. */
.case-pending-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 46px;
}

.case-pending {
  grid-column: 2;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  text-align: center;
}

.case-pending__thumb {
  height: 150px;
  position: relative;
  background:
    linear-gradient(135deg, rgba(47, 128, 237, 0.18), rgba(47, 128, 237, 0.04) 70%),
    var(--bg-secondary, #0d0d0d);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tre righe che suggeriscono il titolo del caso senza scriverlo */
.case-pending__lines {
  width: 62%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-pending__lines i {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.09);
}

.case-pending__lines i:nth-child(1) { width: 100%; }
.case-pending__lines i:nth-child(2) { width: 74%; align-self: center; }
.case-pending__lines i:nth-child(3) { width: 46%; align-self: center; }

.case-pending__body {
  padding: 28px 26px 34px;
}

.case-pending__label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(47, 128, 237, 0.35);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 16px;
}

.case-pending__body h3 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 12px;
}

.case-pending__body p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 900px) {
  .case-pending-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .case-pending { grid-column: 1; }
}

/* Striscia loghi: e' una fascia sottile, non una sezione a pieno respiro.
   Il padding verticale standard di .section la renderebbe alta quanto le
   altre, che qui non serve: c'e' solo un'etichetta e un nastro. */
.clients-strip {
  padding: 34px 0 30px;
}

/* Didascalia sopra il nastro loghi: sta sotto ai titoli di sezione per
   peso, e' un'etichetta non un H2. */
.clients-strip-label {
  text-align: center;
  color: var(--text-tertiary, rgba(255,255,255,0.5));
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin: 0 0 18px;
}

@media (max-width: 640px) {
  .clients-strip { padding: 26px 0 22px; }
  .clients-strip-label { margin-bottom: 14px; }
}

/* ============================================================
   RESPONSIVE MOBILE — CORREZIONI TRASVERSALI
   Dall'audit a 390px del 2026-09-10 (wiki/sito-nuovo/audit-responsive-390.md).
   Stanno in fondo di proposito: correggono regole scritte per il desktop e
   devono vincere a parita' di specificita', senza ricorrere a !important.
   Le correzioni che riguardano una sola pagina NON vanno qui.
   ============================================================ */

/* ---- 1. Scroll orizzontale su tutto il sito ----
   .reveal-left / .reveal-right partono da translateX(-44px) e (+44px). E' un
   valore da desktop: a 390px ogni elemento non ancora rivelato sporge di 44px
   e allarga il documento a 414. Il telefono ci guadagna uno scroll laterale
   e, soprattutto, il layout viewport si allarga con lui — quindi tutto cio'
   che e' dimensionato in percentuale viene calcolato sulla misura sbagliata.
   Su mobile l'animazione d'ingresso resta, ma arriva dal basso come .reveal:
   sull'asse verticale la pagina scorre gia', non c'e' niente da allargare. */
@media (max-width: 768px) {
  .reveal-left,
  .reveal-right { transform: translateY(38px); }
}

/* ---- 2. Navbar ancorata ai bordi, non a una percentuale ----
   .card-nav-container e' position:fixed con width:92%: la percentuale si
   calcola sul layout viewport, che su mobile si allarga insieme al documento
   appena qualcosa sfora. Risultato a 390px: pillola larga 386px anziche' 359,
   con l'angolo destro e il bordo attorno alla X fuori schermo su ogni pagina.
   Ancorandola a left/right in pixel diventa immune: anche se un domani una
   pagina tornasse a sforare, la barra resta comunque dentro lo schermo. */
@media (max-width: 768px) {
  .card-nav-container {
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    transform: none;
  }
}

/* ---- 3. Il vuoto prima del footer ----
   padding-top: 220px serve sul desktop, dove il logo gigante in fondo alla
   pagina ha bisogno di respiro. Su uno schermo da 844px e' un quarto di
   schermata di nero prima che il footer cominci, su tutte e dodici le pagine. */
@media (max-width: 768px) {
  .synap-footer { padding-top: 90px; }
}

/* ---- 4. L'email non e' un titolo ----
   .foot-firstlink ha text-transform: capitalize perche' nel markup i nomi
   delle pagine sono scritti minuscoli ("home", "chi siamo"). Dallo stesso
   selettore passa pero' anche l'indirizzo email, che diventa
   "Info@Synapai.It". Vale su mobile e su desktop. */
.foot-firstlink[href^="mailto:"] { text-transform: none; }

/* ---- 5. Aree toccabili del footer ----
   Sul desktop si clicca con un puntatore preciso, sul telefono col
   polpastrello: sotto i 44px si sbaglia bersaglio. I link del footer erano
   alti 22-26px, le tre icone social 22x22 e i link legali 17px.
   L'area cresce col padding, non col testo: la grafica non cambia. */
@media (max-width: 768px) {
  .synap-footer .foot-firstlink,
  .synap-footer .foot-link {
    min-height: 44px;
    align-items: center;
  }
  .synap-footer .foot-col--grid .foot-list { gap: 0; margin-top: 0; }

  /* Il padding porta il bersaglio a 44x44; il margine negativo rimette la
     prima icona esattamente dove stava, cosi' la fila resta allineata al
     testo sopra invece di scivolare a destra di 11px. */
  .foot-icons { gap: 0; margin-left: -11px; }
  .foot-icon { padding: 11px; }

  .foot-legal-link { display: inline-block; padding: 10px 6px; }
}

/* ---- 5-bis. Footer: etichetta sopra, link sotto ----
   Sotto i 560px il footer teneva l'etichetta in una colonna fissa da 150px a
   sinistra e i link nella colonna accanto: 150px di colonna morta sotto ogni
   titolo, e le voci lunghe ("Operatore AI Vocale") spinte a sfiorare il bordo
   destro. Su 390px di larghezza non c'e' spazio per due colonne. Ogni blocco
   torna quindi a piena larghezza — titolo in cima, elenco allineato sotto —
   e con lui saltano i rientri di 25px e 35px che servivano solo a rimettere
   in colonna quello che la griglia aveva spostato. */
@media (max-width: 620px) {
  .synap-footer .foot-col--grid { display: block; }

  /* A una colonna sola lo spazio fra i blocchi veniva contato due volte:
     26px di row-gap della griglia piu' i 28px di margine di .foot-col. */
  .synap-footer .foot-grid { row-gap: 0; }

  .synap-footer .foot-col--grid .foot-title {
    position: static;
    left: auto;
    margin-bottom: 4px;
  }

  /* I rientri da azzerare sono dichiarati con :first-child e :nth-child(2),
     che pesano una classe in piu': vanno ripetuti qui o non vengono scavalcati. */
  .synap-footer .foot-col--grid:first-child .foot-firstlink,
  .synap-footer .foot-col--grid:first-child .foot-list,
  .synap-footer .foot-col--grid:nth-child(2) .foot-firstlink,
  .synap-footer .foot-col--grid:nth-child(2) .foot-text,
  .synap-footer .foot-col--grid .foot-firstlink,
  .synap-footer .foot-col--grid .foot-list,
  .synap-footer .foot-col--grid .foot-text {
    margin-left: 0;
    margin-top: 0;
  }

  /* -11px compensa il padding che allarga il bersaglio dell'icona (punto 5):
     senza, la fila di icone scivolerebbe a destra rispetto al testo sopra. */
  .synap-footer .foot-col--grid:nth-child(2) .foot-icons,
  .synap-footer .foot-col--grid .foot-icons { margin-left: -11px; }
}

/* ---- 6. Spaziature verticali mai ridotte su mobile ----
   .scroll-timeline aveva 160px sopra e sotto anche a 390px (320px di aria per
   sezione) piu' un min-height di una schermata intera, .cta-final 100px per
   lato. Sommate al vuoto del footer erano le lunghe schermate nere che si
   attraversavano scorrendo. */
@media (max-width: 640px) {
  .scroll-timeline { padding: 80px 0; min-height: 0; }
  .cta-final { padding: 64px 0; }
}

/* ---- 7. Etichette sotto la soglia di leggibilita' ----
   0.72rem sono 11.5px: su un monitor a mezzo metro passano, su un telefono
   in mano no. Portate a 12.5px, che resta un'etichetta ma si legge. */
@media (max-width: 640px) {
  .blog-card__time,
  .blog-card__date,
  .article-callout__label,
  .case-pending__label,
  .sysmap-label,
  .rails-label,
  /* Nel mockup del telefono l'etichetta e' 10.88px su una superficie gia'
     inclinata in prospettiva: la scritta piu' piccola del sito, resa
     illeggibile due volte. Lo schermo finto e' largo circa 318px, ci sta. */
  .phone-call-label { font-size: 0.78rem; }

  /* Stessa specificita' della regola a <=560px che le fissa a 0.8rem,
     dichiarata dopo per vincere senza !important. */
  .synap-footer .foot-col-legal p,
  .synap-footer .foot-col-legal a { font-size: 0.83rem; }
}

/* ---- 8. Menu mobile: bersagli grandi, ma dentro lo schermo ----
   Due problemi nello stesso posto. Nel menu aperto i link erano alti 24px con
   4px di distanza: tre bersagli piccoli e vicini per ogni scheda (stessa
   logica del punto 5). Ma portandoli a 40px il menu diventava alto 734px
   fissi, e 734px stanno solo su uno schermo intero: su un iPhone 12 col
   browser a barre aperte ne restano 636 utili e il menu sforava di 98, su un
   iPhone SE di 209. L'altezza non si adattava mai, perche' dipendeva solo dal
   contenuto.

   Le tre misure che decidono l'ingombro diventano quindi variabili, e
   js/main.js (initCardNav) le stringe per gradi finche' il menu non entra:
   prima l'altezza dei link, che sono nove ed e' la leva piu' efficace, poi il
   respiro dentro le schede, infine lo spazio fra una scheda e l'altra. I
   valori qui sono quelli pieni, il minimo sta nel JS: sotto una certa misura
   un link torna difficile da centrare col dito, e allora e' meglio far
   scorrere il menu che continuare a schiacciarlo. */
@media (max-width: 768px) {
  .card-nav {
    --nav-link-h: 40px;
    --nav-card-pad: 16px;
    --nav-card-gap: 10px;
  }

  .card-nav-content { gap: var(--nav-card-gap); }

  .nav-card {
    padding: var(--nav-card-pad) 18px;
    /* Stacco fra l'etichetta della scheda e i suoi link: segue il respiro
       della scheda invece di restare fisso, cosi' si stringe con lei. */
    gap: calc(var(--nav-card-pad) * 0.625);
  }

  .nav-card-links { gap: 0; }
  .nav-card-link { min-height: var(--nav-link-h); }
}

/* ---- 9. Orbita integrazioni (operatore-ai-vocale) ----
   Sta qui e non fra le correzioni di pagina perche' e' l'ultima sorgente
   dello scroll orizzontale globale: senza, il punto 1 resta a meta'.

   Due difetti distinti nello stesso componente.

   a) Il documento restava largo 403px. Non e' un'icona che sporge: gli anelli
      ruotano, e il riquadro di un quadrato che ruota cresce fino a 1.41 volte
      il lato (300px diventano 424) anche restando vuoto negli angoli. Le
      icone stanno tutte entro 147px dal centro, cioe' dentro il riquadro da
      300: ritagliarlo non toglie niente di visibile.

   b) I due anelli distavano 36px (raggi 108 e 72) con icone da 58px: si
      sovrapponevano di 22px, e infatti Outlook finiva sopra Zoho e HubSpot
      sopra Gmail. Icone piu' piccole e anello esterno piu' largo: 124-72
      fanno 52px di distanza per icone da 46, sei di margine. L'esterno arriva
      a 147px dal centro (il limite e' 150), l'interno si ferma a 49 e il
      disco centrale ne occupa 42. */
@media (max-width: 900px) {
  .integrations-orbit { overflow: clip; }

  .orbit-item { width: 46px; height: 46px; margin: -23px; }
  .orbit-ring--outer { --radius: 124px; }
  .orbit-ring--inner { --radius: 72px; }
  .orbit-path--outer { width: 248px; height: 248px; margin: -124px; }
  .orbit-path--inner { width: 144px; height: 144px; margin: -72px; }
}

/* ---- 10. Il fondo pagina non rimbalza ----
   Su iPhone, arrivati in fondo, se si continua a trascinare la pagina
   prosegue oltre la fine e torna indietro da sola. Il logo, che e' l'ultima
   cosa, si stacca dal bordo e sotto compare il fondo nudo.
   overscroll-behavior-y: none dice al browser di fermarsi alla fine.
   Va messo sia su html sia su body: su iOS a scorrere e' l'elemento radice,
   e la sola dichiarazione su body non basta.

   Nota su cosa NON fare qui. Sotto al logo si vedeva una fascia piu' chiara e
   un primo tentativo l'aveva coperta con una sfumatura verso il colore della
   pagina. Era sbagliato: quel velo scuro non esiste sul desktop, dove il logo
   non arriva mai a opacita' zero e semplicemente si sfoca sempre di piu'.
   La causa vera stava nel raggio di sfocatura, ed e' corretta in
   js/main.js (initFooterLogo). */
html,
body {
  overscroll-behavior-y: none;
}

/* ---- 11. "I nostri punti di forza": respiro attorno al sottotitolo ----

   a) Il sottotitolo era attaccato al titolo: 0px di stacco, misurati, contro
      i 18px che `.section-intro p` usa in tutto il resto del sito. `.split-text`
      non aveva nessuna regola per il paragrafo e si prendeva il margine zero
      del reset. Stesso valore delle altre sezioni, non uno nuovo.

   b) Su mobile le card animate finivano SOPRA il sottotitolo. Non e' un
      problema di gap: lo stack e' fatto di card in posizione assoluta traslate
      verso l'alto, che sporgono di 34px oltre il bordo del contenitore. Con
      30px di gap la prima card partiva 4px piu' in alto della fine del
      sottotitolo. I 44px di margine coprono la sporgenza e lasciano 40px di
      stacco vero. Sul desktop non serve: li' le due colonne stanno affiancate. */
.split-text p {
  margin-top: 18px;
}

@media (max-width: 768px) {
  .split .card-swap-container {
    margin-top: 44px;
  }
}

/* ---- 12. I mockup delle card "Come lavoriamo" dentro il loro pannello ----
   La mappa del sistema e' una riga fatta di tre pezzi che non si stringono:
   i nodi hanno white-space: nowrap e il piu' lungo ("Nuova procedura") e'
   largo 141px, il fascio SVG e' flex: none a 46px, il riquadro "Sistema"
   flex: none a 109px. Con i due spazi in mezzo servono 316px, e dentro il
   pannello a 390px ce ne sono 262. Il di piu' usciva a destra: 24px oltre il
   bordo nella card "Costruiamo", 57px in "Cresciamo", dove il riquadro
   "Sistema" galleggiava fuori dalla card.

   Sotto i 375px di viewport il riquadro usciva anche dallo schermo (il
   documento arrivava a 382px) e tornava lo scroll orizzontale: da li' la
   navbar, che e' larga il 92% del layout viewport allargato, risforava a sua
   volta. E' lo stesso effetto a catena del punto 1.

   Rimpicciolire non basta: anche portando i nodi a 12.5px, il fascio a 34 e
   il riquadro al minimo servono ancora 267px contro i 262 disponibili, e a
   360px lo spazio scende a 232. La riga orizzontale sta solo da 446px in su.
   Quindi sotto i 640px la mappa si gira in verticale: i nodi impilati a
   piena larghezza, il sistema sotto, e al posto del fascio una linea che
   scende dentro di esso con lo stesso impulso e la stessa cadenza (3.3s).
   Il senso del disegno — tutto converge nel sistema — regge girato di 90
   gradi, e le coordinate del fascio scritte a mano in chi-siamo.html
   restano intatte per il desktop. */
@media (max-width: 640px) {
  .sysmap-body {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* I path dell'SVG sono coordinate orizzontali scritte a mano: girato in
     verticale non vuol dire niente, e stirarlo lo deformerebbe. Al suo posto
     subentra la linea sotto. */
  .sysmap-beam { display: none; }

  /* Ogni nodo largo quanto la sua etichetta e centrato in colonna: puntano
     al sistema che sta sotto e restano pillole. Tirati a piena larghezza
     sarebbero cinque barre uguali, e sembrerebbero i campi di un modulo.
     I 18px di respiro laterale, contro i 12 del desktop, servono perche' i
     nodi corti ("Procedure") non si riducano a una scritta con un filo di
     bordo attorno. */
  .sysmap-in { align-items: center; }
  .sysmap-node { padding: 0 18px; }

  .sysmap-hub {
    position: relative;
    align-self: center;
    margin-top: 38px;
    justify-content: center;
  }

  /* il filo spento, sempre presente */
  .sysmap-hub::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -38px;
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.13);
  }

  /* il tratto acceso che ci scorre dentro, in continuazione */
  .sysmap-hub::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -38px;
    width: 2px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(47, 128, 237, 0), var(--accent));
    animation: sysmap-drop 3.3s linear infinite;
  }

  /* La card "Cresciamo" e' la stessa mappa con due rami in piu': il tratto
     prende il colore acceso dei rami nuovi, come fa sysmap-flow--new. */
  .sysmap--grown .sysmap-hub::after {
    background: linear-gradient(180deg, rgba(156, 198, 255, 0), #9CC6FF);
    animation-duration: 2.6s;
  }
}

/* Il -50% va ripetuto in ogni passaggio: transform e' una proprieta' sola,
   e un keyframe che dichiarasse solo translateY perderebbe il centramento. */
@keyframes sysmap-drop {
  from { transform: translate(-50%, -14px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translate(-50%, 38px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sysmap-hub::after { animation: none; opacity: 0; }
}

/* ---- 13. Il corpo grande di Vision, Mission e "Come lavoriamo" ----
   --il-size e' clamp(2rem, 4.6vw, 3.9rem): a 390px 4.6vw fa 17.9px, quindi
   comanda il pavimento e il testo resta a 32px. La frase della Vision
   diventava alta 343px e la sezione 984px — due schermate per due frasi, e
   di ciascuna se ne leggeva un pezzo per volta.

   Sotto i 640px il pavimento scende e torna a comandare la larghezza dello
   schermo. A 640px il valore vale 32px esatti, come la regola generale
   appena sopra la soglia: il passaggio non si vede. */
@media (max-width: 640px) {
  .illuminate-section,
  #come-lavoriamo {
    --il-size: clamp(1.55rem, 6.7vw, 2rem);
  }
}

/* ---- 14. Footer: sui blocchi a colonna singola tutto centrato ----
   Sotto i 560px il footer e' gia' a blocchi impilati (punto 5-bis), e la CTA
   e le righe legali erano gia' centrate. LINK RAPIDI e CONTATTI restavano
   invece allineati a sinistra, ereditando .foot-col { text-align: left }:
   due blocchi a bandiera in mezzo a due centrati. Su richiesta di Martino
   vanno al centro anche loro, cosi' la colonna unica ha un asse solo.

   L'elenco dei link e' un flex in colonna con align-items: flex-start, e
   text-align da solo non lo tocca: va cambiato l'allineamento dell'asse
   trasversale. Le icone social sono anch'esse un flex, e li' cade il -11px
   che serviva a compensare il padding del bersaglio: quel margine rimetteva
   la prima icona a filo del testo a sinistra, ma a centro storcerebbe la
   fila di 11px. */
@media (max-width: 620px) {
  .synap-footer .foot-col--grid,
  .synap-footer .foot-col--grid .foot-title,
  .synap-footer .foot-col--grid .foot-text { text-align: center; }

  .synap-footer .foot-col--grid .foot-list { align-items: center; }

  .synap-footer .foot-col--grid:nth-child(2) .foot-icons,
  .synap-footer .foot-col--grid .foot-icons {
    justify-content: center;
    margin-left: 0;
  }
}

/* ---- 15. Consulenza AIOS: lo switcher dei casi d'uso su piu' righe ----
   Era il difetto peggiore rimasto sul sito (punto 2 dell'audit). Lo switcher
   e' un segmented control: sei pillole dentro una pillola sola, e sotto
   quella attiva scorre .usecase-thumb, un ovale bianco.

   Il segmented control regge finche' le pillole stanno su una riga. Le sei
   sommano 717px, con i vuoti e il bordo ne chiedono 749: sotto gli 810px
   circa vanno a capo, e l'indicatore si rompe due volte. E' ancorato con
   top: 6px e bottom: 6px, quindi si alza fino a coprire tutte le righe; e il
   JS lo posiziona con offsetLeft, che su piu' righe dice solo la distanza
   dal bordo sinistro, non da quale riga. Il risultato e' un ovale bianco
   alto quanto l'intero switcher, fermo a meta', che copre le voci che non
   c'entrano.

   La soglia e' 860px e non 768: il misurato dice che il capo arriva gia'
   sopra gli 800, e a 769px l'indicatore era ancora alto il doppio di una
   pillola. 860 e' anche il breakpoint che questa sezione usa gia', e sopra
   di esso lo switcher torna largo quanto il suo contenuto: una riga sempre.

   Sotto quella soglia non si prova piu' a tenere insieme il segmented
   control: la pillola esterna sparisce e ogni caso d'uso diventa una pillola
   a se', quella attiva riempita di bianco. Niente indicatore da spostare,
   niente da calcolare, e i bersagli diventano abbastanza grandi per il dito.

   La griglia si conta da sola con auto-fit, e il min() dentro il minmax
   evita che a 320px pretenda piu' larghezza di quanta ce ne sia. */
@media (max-width: 860px) {
  .usecase-switcher {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
  }

  .usecase-thumb { display: none; }

  .usecase-pill {
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.02);
    /* 14px di respiro laterale al posto di 20: a 320px la colonna e' larga
       136px e "Presentazioni" con 40px di padding ci andrebbe a due righe. */
    padding: 12px 14px;
    min-height: 44px;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  }

  .usecase-pill.is-active {
    background: var(--white);
    border-color: var(--white);
    color: var(--bg-primary);
  }
}

/* Lasciato solo ad auto-fit, sopra i 560px lo spazio basta per cinque
   colonne e le sei voci si dispongono 5 + 1: l'ultima resta sola in fondo.
   Tre colonne le dividono in due file pari. Sul telefono restano due, che
   e' quanto ci sta davvero. */
@media (min-width: 561px) and (max-width: 860px) {
  .usecase-switcher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   PAGINE SETTORE (.page-settore)
   ------------------------------------------------------------
   Richiesta di Martino (16/09): in queste pagine il testo di
   servizio non va in grigio. Il grigio (--text-secondary, bianco
   al 60%) fa sembrare secondario un contenuto che invece e' la
   sostanza della pagina, quella su cui si posiziona.
   Il corsivo Cormorant resta solo nel titolo della hero: negli
   altri titoli si usa .highlight-underline.
   ============================================================ */
.page-settore .page-hero p,
.page-settore .section-intro p,
.page-settore .usecase-panel p,
.page-settore .faq-a p,
.page-settore .value-card p,
.page-settore .feature-list li,
.page-settore .ai-compare-col--without .ai-compare-list li {
  color: var(--white);
}

/* Nota di chiusura sezione: stessa colonna del testo introduttivo,
   altrimenti si allinea al container e sembra fuori asse. */
.page-settore .settore-nota {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
  color: var(--white);
  font-size: 1.02rem;
  line-height: 1.7;
}

.page-settore .settore-cta {
  margin-top: 56px;
  text-align: center;
}

/* Link contestuali dentro il testo: senza questa regola ereditano il bianco del
   paragrafo e nessuno si accorge che sono cliccabili. Sono i collegamenti
   interni su cui poggia meta' del lavoro SEO, quindi devono vedersi. */
.page-settore .section-intro p a,
.page-settore .usecase-panel-text a,
.page-settore .settore-nota a,
.page-settore .faq-a a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(47, 128, 237, 0.45);
  transition: text-decoration-color 0.25s ease;
}

.page-settore .section-intro p a:hover,
.page-settore .usecase-panel-text a:hover,
.page-settore .settore-nota a:hover,
.page-settore .faq-a a:hover {
  text-decoration-color: var(--accent);
}

/* ============================================================
   BADGE DI CONFORMITA' NEL FOOTER — GDPR / EU AI Act
   Stanno in fondo alla colonna legale, sotto Privacy e Cookie Policy, impilati
   uno sopra l'altro: in mezzo al footer sembravano appoggiati li' per caso,
   accanto ai link legali invece si leggono come quello che sono. Seguono
   l'allineamento della colonna: a destra sul desktop, centrati dove la colonna
   si centra (1330px e 620px). Icone generiche, nessun emblema istituzionale.
   ============================================================ */
.foot-compliance {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.foot-compliance-item,
.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.78);
  font-size: .82rem;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
}

/* flex:none, altrimenti l'icona si schiaccia quando la riga va stretta. */
.foot-compliance-item svg,
.compliance-badge svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
}

@media (max-width: 1330px) {
  .synap-footer .foot-compliance { align-items: center; }
}

@media (max-width: 620px) {
  .synap-footer .foot-compliance { align-items: center; margin-top: 12px; gap: 7px; }
  .synap-footer .foot-compliance-item { font-size: .76rem; padding: 6px 11px; }
}

/* Riga badge dentro il corpo di una pagina (sezione sui dati). Stessa resa del
   footer, posizione diversa: qui chiude la sezione, non il sito. */
.compliance-row {
  margin: 26px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

@media (max-width: 620px) {
  .compliance-row { gap: 8px 10px; }
  .compliance-badge { font-size: .76rem; padding: 6px 11px; }
}


/* ============================================================
   Cookie banner (Iubenda skin)
   ------------------------------------------------------------
   Perche' il doppio id e gli !important: Iubenda inietta un
   <style> nel documento DOPO il nostro foglio, con selettori
   "#iubenda-cs-banner .classe" e !important su ogni riga. A
   parita' di specificita' vince chi viene dopo, cioe' loro:
   ripetere l'id (#iubenda-cs-banner#iubenda-cs-banner) alza la
   specificita' a due id e ci fa vincere senza toccare il markup.
   Enumerato dal CSSOM il 2026-09-18, non dedotto.

   Due proprieta' NON si possono cambiare da qui: background-color
   e color di .iubenda-cs-content, che Iubenda scrive inline con
   !important, e lo style attribute batte qualsiasi foglio. Il loro
   nero e' #040404 contro il nostro #030303: si tiene il loro.

   La logica del consenso non si tocca. "Rifiuta" e "Accetta"
   restano identici per dimensione, colore e peso: e' un requisito
   del Garante, il rifiuto reso meno evidente e' la contestazione
   piu' frequente.
   ============================================================ */

#iubenda-cs-banner#iubenda-cs-banner,
#iubenda-cs-banner#iubenda-cs-banner * {
  font-family: var(--font) !important;
}

/* La card: stretta, in basso al centro */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-container {
  /* Stessa larghezza della barra di navigazione: .card-nav-container usa
     width 92% con tetto a 720px, e sotto i 768px si ancora a 14px per lato.
     Ricopiare quella formula tiene banner e nav incolonnati a ogni
     larghezza, anche se un domani la nav cambia misura. */
  width: 92% !important;
  max-width: 720px !important;
  /* margin-top auto tiene la card in basso: il contenitore del banner e'
     alto quanto lo schermo, senza questo finisce centrata a meta' pagina */
  margin: auto auto 20px !important;
  padding: 0 !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-content {
  /* Sopra i 900px Iubenda mette 16px di margine attorno alla card: senza
     azzerarlo il banner risulta 32px piu' stretto della nav. */
  margin: 0 !important;
  border: 1px solid var(--border-thin) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 40px var(--glow) !important;
  max-width: 100% !important;
}

/* Intestazione: via il logo, dentro icona e titolo.
   Il logo arriva dal pannello Iubenda e oggi punta al CDN di
   Squarespace: nasconderlo toglie anche quella dipendenza. */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand {
  padding: 18px 18px 0 !important;
  align-items: center !important;
  gap: 9px !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand img { display: none !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand::before {
  content: '' !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  background-color: var(--accent) !important;
  -webkit-mask: var(--cookie-icon) center / contain no-repeat;
  mask: var(--cookie-icon) center / contain no-repeat;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand::after {
  content: 'Cookie' !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--white) !important;
}

/* Il testo: piu' piccolo e grigio, come i paragrafi secondari */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-banner-content {
  padding: 10px 18px 0 !important;
  font-weight: 400 !important;
}
#iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph,
#iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph p {
  font-size: 0.75rem !important;
  line-height: 1.55 !important;
  color: var(--text-secondary) !important;
}
#iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph b,
#iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph strong {
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 600 !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-banner-content a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* I pulsanti, come .btn-primary e .btn-outline del sito.
   column, non column-reverse: segue l'ordine del DOM e tiene
   "personalizza" sopra e Rifiuta/Accetta in fondo, uguale a
   desktop e mobile. Con column-reverse desktop e mobile si
   invertivano fra loro, perche' Iubenda ha sue media query. */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group {
  flex-direction: column !important;
  gap: 8px !important;
  margin: 16px 18px 18px !important;
}
/* order esplicito: sotto i 768px Iubenda assegna order 2 al gruppo
   "personalizza" e order 1 al gruppo del consenso, invertendo la card
   rispetto al desktop. Fissarli qui tiene lo stesso ordine ovunque. */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group-consent {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  order: 2 !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group-custom {
  display: flex !important;
  width: 100% !important;
  order: 1 !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button {
  padding: 10px 18px !important;
  margin: 0 !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border: 1.5px solid transparent !important;
  transition: transform 0.18s ease, border-color 0.3s ease, color 0.3s ease !important;
}
/* Pari evidenza: stessa larghezza, stesso colore, stesso peso */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn,
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn {
  flex: 1 1 0 !important;
  background-color: var(--accent) !important;
  color: var(--white) !important;
  box-shadow: 0 8px 24px rgba(47, 128, 237, 0.28) !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn:hover,
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn:hover {
  transform: translateY(-2px) !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn {
  width: 100% !important;
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-soft) !important;
  box-shadow: none !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn:hover {
  color: var(--white) !important;
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
}

/* Da tablet in su la card e' larga quanto la nav (720px): tre pulsanti
   a tutta larghezza diventerebbero enormi. Riga unica, "personalizza" a
   sinistra e la coppia del consenso a destra. Sotto i 768px restano
   impilati, che e' l'unica forma leggibile su telefono. */
@media (min-width: 769px) {
  #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
  }
  #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group-custom,
  #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group-consent {
    width: auto !important;
  }
  #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn,
  #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn {
    flex: 0 0 auto !important;
    /* stessa larghezza minima per entrambi: la parita' visiva fra
       Rifiuta e Accetta non deve dipendere dalla lunghezza della parola */
    min-width: 132px !important;
  }
}

/* 768px, non 480: e' il punto in cui la nav passa a left/right 14px */
@media (max-width: 768px) {
  #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-container {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-bottom: 16px !important;
  }
}
@media (max-width: 480px) {
  #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group-consent { flex-wrap: wrap !important; }
}

@media (prefers-reduced-motion: reduce) {
  #iubenda-cs-banner#iubenda-cs-banner.iubenda-cs-slidein,
  #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-content { animation: none !important; transition: none !important; }
  #iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button { transition: none !important; }
}

:root {
  /* Icona del banner cookie: biscotto, mascherato in --accent */
  --cookie-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E");
}

/* Pagina 404: il blocco delle pagine suggerite segue la page-hero senza
   stacco di sfondo, quindi il suo padding-top sarebbe sommato ai 90px con
   cui la hero già chiude. Ridotto, altrimenti le due parti sembrano due
   sezioni diverse invece di una sola. */
.section--404-link {
  padding-top: 40px;
}