/* ============================================================
   F.R. di Busato Fausto — stile principale
   Tema: chiaro + blu moderno, luminoso ed elegante
   ============================================================ */

:root{
  --bg:        #f3f6fc;
  --bg-2:      #eaf1fb;
  --surface:   #ffffff;
  --surface-2: #f4f8ff;
  --line:      rgba(37,99,235,.14);
  --line-forte:rgba(37,99,235,.26);
  --text:      #12203b;
  --muted:     #4c5a76;
  --faint:     #8492ab;

  /* Accento: le pagine progetto lo sovrascrivono via JS */
  --accent:    #2563eb;
  --accent-2:  color-mix(in srgb, var(--accent) 78%, #0a1220);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:var(--accent-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

::selection{ background:var(--accent); color:#ffffff; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:#ffffff;
  padding:.6rem 1rem; z-index:200; border-radius:0 0 8px 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

.container{
  width:min(100% - 2.5rem, var(--maxw));
  margin-inline:auto;
}

/* ------------------------------------------------------------
   Sfondo animato
   ------------------------------------------------------------ */
.sfondo{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(50rem 36rem at -10% 40%, rgba(96,165,250,.10), transparent 60%),
    var(--bg);
}
#bg-canvas{
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  opacity:.55;
}
.orb{
  position:fixed; z-index:-1; border-radius:50%;
  filter:blur(90px); opacity:.35; pointer-events:none;
}
.orb-a{
  width:34rem; height:34rem; top:-12rem; right:-10rem;
  background:radial-gradient(circle, rgba(37,99,235,.40), transparent 70%);
  animation:deriva-a 26s ease-in-out infinite alternate;
}
.orb-b{
  width:28rem; height:28rem; bottom:-10rem; left:-8rem;
  background:radial-gradient(circle, rgba(96,165,250,.42), transparent 70%);
  animation:deriva-b 32s ease-in-out infinite alternate;
}
@keyframes deriva-a{ from{ transform:translate(0,0);} to{ transform:translate(-6rem,5rem);} }
@keyframes deriva-b{ from{ transform:translate(0,0);} to{ transform:translate(5rem,-4rem);} }

/* ------------------------------------------------------------
   Header / navigazione
   ------------------------------------------------------------ */
.header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 0;
}
.marchio{
  display:flex; align-items:center; gap:.7rem;
  color:var(--text); font-family:var(--font-display);
}
.marchio:hover{ text-decoration:none; }
.marchio-logo{
  width:40px; height:40px; flex:none;
  background:url("../img/favicon.svg") center / contain no-repeat;
  font-size:0; color:transparent;
}
.marchio-testo{ line-height:1.15; }
.marchio-testo strong{ display:block; font-size:.98rem; font-weight:600; }
.marchio-testo span{ display:block; font-size:.72rem; color:var(--muted); letter-spacing:.04em; }

/* Titolo "terminale": scrive di continuo "L'informatica" con cursore */
.tw-word-h1{ font-weight:700; }
.tw-caret-h1{
  display:inline-block; width:.06em; min-width:3px; height:.86em;
  margin-left:.05em; border-radius:2px;
  background:var(--accent); vertical-align:-.02em;
  animation:lampeggia 1s steps(1) infinite;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.nav-menu{
  display:flex; align-items:center; gap:1.6rem;
  list-style:none; margin:0; padding:0;
}
.nav-menu a{
  color:var(--muted); font-size:.94rem; font-weight:500;
  transition:color .2s ease;
}
.nav-menu a:hover{ color:var(--text); text-decoration:none; }
.nav-menu a.attivo{ color:var(--accent-2); }
.nav-cta{
  padding:.5rem 1.05rem; border-radius:999px;
  border:1px solid var(--accent-line);
  color:var(--text) !important;
  background:var(--accent-soft);
  transition:background .2s ease, border-color .2s ease;
}
.nav-cta:hover{ background:color-mix(in srgb, var(--accent) 26%, transparent); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  border-radius:10px; padding:.5rem .6rem; cursor:pointer;
}
.nav-toggle span{
  display:block; width:20px; height:2px; background:var(--text);
  margin:4px 0; border-radius:2px; transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------
   Tipografia e blocchi comuni
   ------------------------------------------------------------ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-2);
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0 0 1rem;
}
.eyebrow::before{ content:"//"; color:var(--faint); letter-spacing:0; }

h1,h2,h3{ font-family:var(--font-display); line-height:1.15; margin:0; }
h1{ font-size:clamp(2.4rem, 5.6vw, 4.1rem); font-weight:600; letter-spacing:-.02em; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:600; letter-spacing:-.015em; }
h3{ font-size:1.18rem; font-weight:600; }

.gradiente{
  background:linear-gradient(100deg, var(--accent-2), var(--accent) 55%, color-mix(in srgb, var(--accent) 45%, #0ea5e9));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.sottotitolo{ color:var(--muted); max-width:46rem; }

.sezione{ padding:5.5rem 0; position:relative; }
.sezione-testa{ margin-bottom:2.6rem; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.8rem 1.5rem; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:.97rem;
  cursor:pointer; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn-pieno{
  background:linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #6ea8ff));
  color:#ffffff;
  box-shadow:0 8px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-pieno:hover{ box-shadow:0 12px 32px -8px color-mix(in srgb, var(--accent) 75%, transparent); }
.btn-vuoto{
  border-color:var(--line-forte); color:var(--text);
  background:rgba(37,99,235,.04);
}
.btn-vuoto:hover{ border-color:var(--accent-line); background:var(--accent-soft); }

/* Animazioni di comparsa allo scroll */
.rivela{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
}
.rivela.visibile{ opacity:1; transform:none; }
.rivela[data-ritardo="1"]{ transition-delay:.1s; }
.rivela[data-ritardo="2"]{ transition-delay:.2s; }
.rivela[data-ritardo="3"]{ transition-delay:.3s; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero{
  padding:6.5rem 0 5rem;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:3.5rem; align-items:center;
}
.hero-lead{ color:var(--muted); font-size:1.14rem; max-width:34rem; margin:1.3rem 0 2.1rem; }
.hero-azioni{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-nota{
  margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1.6rem;
  color:var(--faint); font-size:.88rem; font-family:var(--font-mono);
}
.hero-nota b{ color:var(--muted); font-weight:600; }

/* Terminale decorativo — firma della pagina */
.terminale{
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius:var(--radius);
  background:linear-gradient(165deg, #14223f, #0d1730);
  box-shadow:0 30px 70px -32px rgba(37,99,235,.45);
  overflow:hidden;
  font-family:var(--font-mono); font-size:.86rem;
}
.terminale-barra{
  display:flex; align-items:center; gap:.45rem;
  padding:.7rem 1rem; border-bottom:1px solid rgba(255,255,255,.10);
  color:#7d8cab; font-size:.72rem; letter-spacing:.05em;
}
.terminale-barra i{
  width:10px; height:10px; border-radius:50%; display:inline-block;
  background:var(--line-forte);
}
.terminale-barra i:nth-child(1){ background:#e0655f; }
.terminale-barra i:nth-child(2){ background:#e8b653; }
.terminale-barra i:nth-child(3){ background:#5ec26a; }
.terminale-barra em{ margin-left:auto; font-style:normal; }
.terminale-corpo{ padding:1.15rem 1.25rem 1.4rem; min-height:14.5rem; }
.terminale-corpo .riga{ display:block; margin:.28rem 0; color:#9fb1d4; }
.terminale-corpo .cmd{ color:#eef3ff; }
.terminale-corpo .cmd::before{ content:"$ "; color:#6ea8ff; }
.terminale-corpo .ok::before{ content:"✓ "; color:#5ec26a; }
.cursore{
  display:inline-block; width:.55em; height:1.05em;
  background:#6ea8ff; vertical-align:text-bottom;
  animation:lampeggia 1s steps(1) infinite;
}
@keyframes lampeggia{ 50%{ opacity:0; } }

/* Striscia partner */
.partner-striscia{
  border-block:1px solid var(--line);
  background:rgba(37,99,235,.04);
  padding:1.2rem 0;
}
.partner-lista{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 2.8rem; justify-content:center;
  margin:0; padding:0; list-style:none;
}
.partner-lista li{
  font-family:var(--font-display); font-weight:600;
  color:var(--faint); letter-spacing:.05em; font-size:1rem;
  display:flex; align-items:center; gap:.6rem;
  transition:color .25s ease;
}
.partner-lista li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); opacity:.55;
}
.partner-lista li:hover{ color:var(--muted); }

/* ------------------------------------------------------------
   Sezione azienda
   ------------------------------------------------------------ */
.azienda-griglia{
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start;
}
.azienda-testo p{ color:var(--muted); margin:0 0 1.1rem; }
.azienda-testo strong{ color:var(--text); }

.pannello-dati{
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  padding:1.8rem;
  display:grid; gap:1.4rem;
}
.dato{ display:flex; gap:1rem; align-items:baseline; border-bottom:1px dashed var(--line); padding-bottom:1.2rem; }
.dato:last-child{ border-bottom:0; padding-bottom:0; }
.dato-num{
  font-family:var(--font-display); font-weight:700;
  font-size:2rem; color:var(--accent-2); min-width:5.5rem;
}
.dato-desc{ color:var(--muted); font-size:.95rem; }

/* ------------------------------------------------------------
   Servizi
   ------------------------------------------------------------ */
.servizi-griglia{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;
}
.servizio{
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  padding:1.7rem;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.servizio:hover{
  transform:translateY(-5px);
  border-color:var(--accent-line);
  box-shadow:0 20px 45px -22px color-mix(in srgb, var(--accent) 45%, transparent);
}
.servizio-icona{
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; margin-bottom:1.1rem;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  color:var(--accent-2);
}
.servizio-icona svg{ width:22px; height:22px; }
.servizio h3{ margin-bottom:.55rem; }
.servizio p{ color:var(--muted); font-size:.95rem; margin:0; }

/* ------------------------------------------------------------
   Portfolio — griglia stile "casi studio"
   ------------------------------------------------------------ */
.filtri{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin-bottom:2rem;
}
.filtri-etichetta{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); margin-right:.5rem;
}
.chip{
  border:1px solid var(--line-forte); background:rgba(37,99,235,.05);
  color:var(--muted); border-radius:999px;
  padding:.42rem 1.05rem; font-size:.88rem; font-weight:500;
  cursor:pointer; transition:all .2s ease;
  font-family:var(--font-body);
}
.chip:hover{ color:var(--text); border-color:var(--accent-line); }
.chip.attivo{
  background:var(--accent); border-color:var(--accent);
  color:#ffffff; font-weight:600;
}

.bento{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:15.5rem;
  grid-auto-flow:dense;
}
.card-progetto{
  --c: var(--accent);
  position:relative; overflow:hidden;
  border-radius:calc(var(--radius) + 6px);
  border:1px solid color-mix(in srgb, var(--c) 34%, transparent);
  background:
    radial-gradient(120% 110% at 85% 110%, color-mix(in srgb, var(--c) 18%, transparent), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, #ffffff) 0%, color-mix(in srgb, var(--c) 4%, #f4f8ff) 100%);
  padding:1.6rem;
  display:flex; flex-direction:column; gap:.6rem;
  color:var(--text);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  grid-column:span 2; grid-row:span 1;
}
.card-progetto:hover{
  text-decoration:none; transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow:0 26px 60px -24px color-mix(in srgb, var(--c) 55%, transparent);
}
.card-progetto.xl{ grid-column:span 4; grid-row:span 2; }
.card-progetto.lg{ grid-column:span 4; }
.card-progetto.md{ grid-column:span 2; }

.card-anno{
  align-self:flex-start;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  color:color-mix(in srgb, var(--c) 62%, #0a1220);
  background:color-mix(in srgb, var(--c) 12%, #ffffff);
  border:1px solid color-mix(in srgb, var(--c) 28%, transparent);
  padding:.28rem .8rem; border-radius:999px;
  backdrop-filter:blur(4px);
}
.card-titolo{
  font-family:var(--font-display); font-weight:600;
  font-size:1.45rem; letter-spacing:-.01em;
  display:flex; align-items:center; gap:.6rem;
}
.card-titolo::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--c); box-shadow:0 0 12px var(--c); flex:none;
}
.card-desc{
  color:color-mix(in srgb, var(--text) 78%, transparent);
  font-size:.93rem; margin:0; max-width:34rem;
}
.card-progetto.md .card-titolo{ font-size:1.2rem; }
.card-progetto.md .card-desc{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.card-anteprima{
  flex:1; min-height:0; margin-top:.4rem;
  border-radius:12px 12px 0 0;
  border:1px solid rgba(18,32,59,.10); border-bottom:0;
  background:rgba(255,255,255,.6);
  overflow:hidden; position:relative;
  transform:translateY(6px);
  transition:transform .3s ease;
}
.card-progetto:hover .card-anteprima{ transform:translateY(0); }
.card-anteprima img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.mock-finestra{ height:100%; padding:.7rem .9rem; }
.mock-punti{ display:flex; gap:.35rem; margin-bottom:.7rem; }
.mock-punti i{ width:7px; height:7px; border-radius:50%; background:rgba(18,32,59,.18); }
.mock-riga{
  height:9px; border-radius:5px; margin:.5rem 0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), rgba(18,32,59,.06));
}
.mock-riga.corta{ width:55%; }
.mock-riga.media{ width:78%; }

.card-azione{
  position:absolute; right:1.2rem; bottom:1.2rem; z-index:2;
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.85rem; font-weight:600;
  color:color-mix(in srgb, var(--c) 60%, #0a1220);
  background:rgba(255,255,255,.82);
  border:1px solid color-mix(in srgb, var(--c) 26%, transparent);
  padding:.5rem 1rem; border-radius:999px;
  backdrop-filter:blur(6px);
  transition:background .2s ease, gap .2s ease;
}
.card-progetto:hover .card-azione{ background:rgba(255,255,255,.96); gap:.7rem; }

.vuoto-progetti{
  border:1px dashed var(--line-forte); border-radius:var(--radius);
  padding:3rem; text-align:center; color:var(--muted);
  grid-column:1 / -1;
}

/* ------------------------------------------------------------
   Pagina progetto
   ------------------------------------------------------------ */
.progetto-hero{ padding:5rem 0 3rem; }
.progetto-meta{
  display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 0;
}
.tag{
  font-family:var(--font-mono); font-size:.78rem;
  border:1px solid var(--accent-line); color:var(--accent-2);
  background:var(--accent-soft);
  padding:.34rem .9rem; border-radius:999px;
}
.progetto-corpo{
  display:grid; grid-template-columns:1.05fr .95fr; gap:3rem;
  align-items:start; padding-bottom:2rem;
}
.progetto-blocco{ margin-bottom:2.2rem; }
.progetto-blocco p{ color:var(--muted); margin:.6rem 0 0; }
.lista-funzioni{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.7rem; }
.lista-funzioni li{
  display:flex; gap:.7rem; color:var(--muted); font-size:.97rem;
}
.lista-funzioni li::before{
  content:"→"; color:var(--accent-2); font-family:var(--font-mono); flex:none;
}
.galleria-segnaposto{
  border:1px dashed var(--accent-line); border-radius:var(--radius);
  background:var(--accent-soft);
  min-height:20rem;
  display:grid; place-items:center; text-align:center;
  color:var(--muted); padding:2rem; gap:0;
}
.galleria-segnaposto strong{ color:var(--text); display:block; margin-bottom:.4rem; }
.galleria{ display:grid; gap:1rem; }
.galleria img{ border-radius:var(--radius); border:1px solid var(--line-forte); }
.torna{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.85rem; color:var(--muted);
  margin-bottom:1.6rem;
}
.torna:hover{ color:var(--text); text-decoration:none; }

/* ------------------------------------------------------------
   Callout assistenza remota
   ------------------------------------------------------------ */
.callout{
  border:1px solid var(--accent-line);
  border-radius:calc(var(--radius) + 6px);
  background:
    radial-gradient(80% 120% at 100% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(165deg, var(--surface-2), var(--surface));
  padding:2.6rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
}
.callout h2{ margin-bottom:.5rem; }
.callout p{ color:var(--muted); margin:0; max-width:34rem; }

/* ------------------------------------------------------------
   Contatti
   ------------------------------------------------------------ */
.contatti-griglia{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;
}
.contatto{
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  padding:1.7rem;
}
.contatto h3{ margin-bottom:.5rem; display:flex; align-items:center; gap:.6rem; }
.contatto h3 svg{ width:19px; height:19px; color:var(--accent-2); flex:none; }
.contatto p{ color:var(--muted); margin:0; font-size:.96rem; }
.contatto a{ font-weight:600; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer{
  border-top:1px solid var(--line);
  background:rgba(37,99,235,.035);
  padding:3rem 0 2rem;
  margin-top:4rem;
}
.footer-griglia{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem;
  margin-bottom:2rem;
}
.footer-col p, .footer-col li{ color:var(--muted); font-size:.92rem; }
.footer-col ul{ list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.45rem; }
.footer-col a{ color:var(--muted); }
.footer-col a:hover{ color:var(--text); }
.footer-legale{
  border-top:1px solid var(--line); padding-top:1.4rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem;
  color:var(--faint); font-size:.84rem; font-family:var(--font-mono);
}

/* ------------------------------------------------------------
   Pagine legali
   ------------------------------------------------------------ */
.legale{ max-width:52rem; padding:4.5rem 0; }
.legale h1{ font-size:clamp(1.9rem, 4vw, 2.7rem); margin-bottom:.6rem; }
.legale h2{ font-size:1.35rem; margin:2.4rem 0 .7rem; }
.legale p, .legale li{ color:var(--muted); }
.legale .aggiornamento{
  font-family:var(--font-mono); font-size:.8rem; color:var(--faint);
}

/* ------------------------------------------------------------
   Avviso cookie
   ------------------------------------------------------------ */
.avviso-cookie{
  position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%);
  z-index:150;
  width:min(100% - 2rem, 44rem);
  border:1px solid var(--line-forte); border-radius:var(--radius);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  padding:1.2rem 1.4rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
.avviso-cookie p{ margin:0; font-size:.88rem; color:var(--muted); flex:1 1 22rem; }
.avviso-cookie .btn{ padding:.55rem 1.2rem; font-size:.88rem; }
.avviso-cookie[hidden]{ display:none; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; padding-top:4.5rem; gap:2.6rem; }
  .azienda-griglia,
  .progetto-corpo{ grid-template-columns:1fr; gap:2.2rem; }
  .servizi-griglia{ grid-template-columns:repeat(2, 1fr); }
  .contatti-griglia{ grid-template-columns:1fr 1fr; }
  .bento{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:minmax(14rem, auto); }
  .card-progetto.xl{ grid-column:span 2; grid-row:span 2; }
  .card-progetto.lg{ grid-column:span 2; }
  .card-progetto.md{ grid-column:span 1; }
}

@media (max-width: 700px){
  .nav-menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(255,255,255,.98); border-bottom:1px solid var(--line);
    padding:.6rem 1.25rem 1.2rem;
    display:none;
  }
  .nav-menu.aperto{ display:flex; }
  .nav-menu li{ border-bottom:1px solid var(--line); }
  .nav-menu li:last-child{ border-bottom:0; padding-top:.9rem; }
  .nav-menu a{ display:block; padding:.85rem 0; }
  .nav-cta{ text-align:center; }
  .nav-toggle{ display:block; }

  .sezione{ padding:3.8rem 0; }
  .servizi-griglia,
  .contatti-griglia{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .card-progetto,
  .card-progetto.xl,
  .card-progetto.lg,
  .card-progetto.md{ grid-column:span 1; grid-row:span 1; min-height:15rem; }
  .card-anteprima{ min-height:9rem; }
  .callout{ padding:1.8rem; }
  .dato-num{ font-size:1.6rem; min-width:4.4rem; }
}

/* ------------------------------------------------------------
   Riduzione del movimento
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .rivela{ opacity:1; transform:none; }
  .orb-a,.orb-b{ animation:none; }
  .cursore{ animation:none; }
}

/* ============================================================
   V2 — Dinamiche aggiuntive
   ============================================================ */

/* Barra di avanzamento dello scroll */
.progresso{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:130;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Testo in gradiente con riflesso animato */
.gradiente{
  background-size:200% 100%;
  animation:brilla 7s ease-in-out infinite;
}
@keyframes brilla{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* Ingresso orchestrato degli elementi della hero */
.entra{ opacity:0; animation:entrata .85s cubic-bezier(.22,.7,.3,1) forwards; }
.entra[data-passo="1"]{ animation-delay:.1s; }
.entra[data-passo="2"]{ animation-delay:.22s; }
.entra[data-passo="3"]{ animation-delay:.34s; }
.entra[data-passo="4"]{ animation-delay:.46s; }
.entra[data-passo="5"]{ animation-delay:.6s; }
@keyframes entrata{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}

/* Effetto tilt 3D sul terminale */
.terminale{ will-change:transform; transition:transform .18s ease-out; }

/* Riflettore che segue il cursore sulle card servizio */
.servizio{ position:relative; overflow:hidden; }
.servizio::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 65%);
}
.servizio:hover::after{ opacity:1; }

/* ------------------------------------------------------------
   Partner — nastro scorrevole con badge
   ------------------------------------------------------------ */
.partner-striscia{ padding:1.6rem 0 1.8rem; }
.partner-titolo{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--faint);
  text-align:center; margin:0 0 1.2rem;
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-traccia{
  display:flex; width:max-content;
}
.marquee-traccia.pronto{ animation:scorri 30s linear infinite; }
.marquee:hover .marquee-traccia.pronto{ animation-play-state:paused; }
@keyframes scorri{ to{ transform:translateX(-50%); } }
.marquee-gruppo{
  display:flex; align-items:center; gap:2.2rem;
  list-style:none; margin:0; padding:0 1.1rem;
}
.badge-partner{
  display:flex; align-items:center; gap:.8rem;
  padding:.75rem 1.5rem; border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  filter:grayscale(.6) brightness(1);
  transition:filter .35s ease, transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  white-space:nowrap;
  text-decoration:none;
}
.badge-partner:hover{
  filter:none; transform:translateY(-3px);
  border-color:var(--accent-line);
  box-shadow:0 14px 34px -16px color-mix(in srgb, var(--accent) 50%, transparent);
  text-decoration:none;
}
.badge-icona{ display:grid; place-items:center; flex:none; }
.badge-icona svg{ width:26px; height:26px; display:block; }
.badge-nome{
  font-family:var(--font-display); font-weight:600;
  font-size:.98rem; color:var(--text); letter-spacing:.02em;
}

@media (max-width:700px){
  .badge-partner{ padding:.6rem 1.15rem; gap:.6rem; }
  .badge-icona svg{ width:22px; height:22px; }
  .badge-nome{ font-size:.9rem; }
}

@media (prefers-reduced-motion: reduce){
  .gradiente{ animation:none; }
  .entra{ opacity:1; animation:none; }
  .marquee-traccia.pronto{ animation:none; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee-gruppo{ flex-wrap:wrap; justify-content:center; }
  .progresso{ display:none; }
}

/* ============================================================
   V3 — Portfolio dinamico
   ============================================================ */

/* Nascita ed uscita animata delle card */
.card-attesa{ opacity:0; }
.card-nasce{ animation:card-in .65s cubic-bezier(.22,.7,.3,1) forwards; }
@keyframes card-in{
  from{ opacity:0; transform:translateY(30px) scale(.96); }
  to{ opacity:1; transform:none; }
}
.card-esce{ animation:card-out .22s ease forwards; pointer-events:none; }
@keyframes card-out{
  to{ opacity:0; transform:scale(.95); }
}

/* Bagliore che segue il cursore, tinto col colore del progetto */
.card-progetto::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--c) 20%, transparent), transparent 65%);
}
.card-progetto:hover::after{ opacity:1; }

/* Lama di luce che attraversa la card al passaggio del mouse */
.card-progetto::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(115deg, transparent 35%, rgba(37,99,235,.10) 48%, transparent 62%);
  transform:translateX(-130%);
}
.card-progetto:hover::before{
  transform:translateX(130%);
  transition:transform .85s ease;
}

/* Etichette: anno + categoria colorata */
.card-tags{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.card-cat{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  color:color-mix(in srgb, var(--c) 62%, #0a1220);
  background:color-mix(in srgb, var(--c) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 38%, transparent);
  padding:.28rem .8rem; border-radius:999px;
}

/* Filtri con conteggio */
.chip b{
  font-weight:600; font-size:.72rem; margin-left:.5rem;
  padding:.08rem .5rem; border-radius:999px;
  background:rgba(18,32,59,.07); color:var(--muted);
}
.chip.attivo b{ background:rgba(255,255,255,.22); color:inherit; }

/* Anteprima v2 — piccola interfaccia viva */
.mock-url{
  flex:1; height:8px; margin-left:.45rem; border-radius:4px;
  background:rgba(18,32,59,.07);
}
.mock-layout{ display:flex; gap:.85rem; height:calc(100% - 1.5rem); min-height:0; }
.mock-sidebar{ width:22%; display:flex; flex-direction:column; gap:.5rem; }
.mock-sidebar i{ height:8px; border-radius:4px; background:rgba(18,32,59,.09); }
.mock-sidebar i:first-child{ background:color-mix(in srgb, var(--c) 55%, transparent); }
.mock-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mock-main .mock-riga{ flex:none; }
.mock-grafico{
  display:flex; align-items:flex-end; gap:.5rem;
  flex:1; min-height:2.2rem; margin-top:.65rem;
}
.mock-grafico i{
  flex:1; border-radius:4px 4px 0 0;
  height:var(--h, 50%);
  transform-origin:bottom;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--c) 75%, transparent),
    color-mix(in srgb, var(--c) 22%, transparent));
  animation:equalizza 2.6s ease-in-out infinite alternate;
  animation-delay:var(--d, 0s);
}
.card-progetto:hover .mock-grafico i{ animation-duration:1.1s; }
@keyframes equalizza{
  from{ transform:scaleY(.5); }
  to{ transform:scaleY(1); }
}

/* Bagliore che scorre sulle righe segnaposto */
.mock-riga{ position:relative; overflow:hidden; }
.mock-riga::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:scintilla 3s ease infinite;
  animation-delay:var(--d, 0s);
}
@keyframes scintilla{
  55%, 100%{ transform:translateX(100%); }
}

/* Segnaposto immagini nella pagina progetto: respiro luminoso */
.galleria-segnaposto{ animation:respira 3.2s ease-in-out infinite; }
@keyframes respira{
  50%{
    border-color:color-mix(in srgb, var(--accent) 65%, transparent);
    background:color-mix(in srgb, var(--accent) 11%, transparent);
  }
}

@media (prefers-reduced-motion: reduce){
  .card-attesa{ opacity:1; }
  .card-nasce, .card-esce{ animation:none; }
  .mock-grafico i, .mock-riga::after, .galleria-segnaposto{ animation:none; }
  .card-progetto::before{ display:none; }
}

/* ============================================================
   V4 — Servizi in evidenza, richiamo HeleoX, Blog/Annunci
   ============================================================ */

/* ---- Servizi: tier in evidenza + tier secondario ---- */
.servizi-evidenza{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem;
  margin-bottom:1.4rem;
}
.servizi-secondari{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;
}
.servizio-focus{
  background:
    radial-gradient(120% 120% at 100% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(165deg, var(--surface), var(--surface-2));
  border-color:var(--accent-line);
  box-shadow:0 18px 42px -30px color-mix(in srgb, var(--accent) 55%, transparent);
}
.servizio-focus .servizio-icona{
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #6ea8ff));
  border-color:transparent; color:#ffffff;
}
.servizio-focus-tag{
  position:absolute; top:1.1rem; right:1.1rem; z-index:2;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:.24rem .6rem; border-radius:999px;
}
.servizio-link{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1.1rem; font-weight:600; font-size:.92rem;
  color:var(--accent-2);
}
.servizio-link:hover{ text-decoration:none; gap:.65rem; }

/* ---- Richiamo HeleoX ---- */
.heleox{
  --accent:#8b5cf6;
  --accent-2: color-mix(in srgb, var(--accent) 78%, #0a1220);
  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);
  margin-top:2.8rem;
  display:grid; grid-template-columns:1.55fr .9fr; gap:2rem; align-items:center;
  border:1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius:calc(var(--radius) + 6px);
  background:
    radial-gradient(90% 130% at 100% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(165deg, var(--surface), var(--surface-2));
  padding:2.4rem;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent),
    0 0 40px -2px color-mix(in srgb, var(--accent) 34%, transparent),
    0 24px 60px -28px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:box-shadow .35s ease, border-color .35s ease;
}
.heleox:hover{
  border-color:color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent),
    0 0 56px 2px color-mix(in srgb, var(--accent) 42%, transparent),
    0 26px 66px -26px color-mix(in srgb, var(--accent) 60%, transparent);
}
.heleox-titolo{ font-size:clamp(1.4rem, 2.6vw, 1.7rem); margin:.3rem 0 .8rem; }
.heleox-testo > p:not(.eyebrow){ color:var(--muted); margin:0; max-width:40rem; }
.heleox-annuncio{
  display:flex; align-items:center; flex-wrap:wrap; gap:.7rem 1rem;
  margin:1.4rem 0;
  padding:.9rem 1.1rem;
  border:1px dashed var(--accent-line); border-radius:var(--radius-sm);
  background:var(--accent-soft);
}
.heleox-annuncio p{ margin:0; color:var(--text); font-size:.95rem; }
.heleox-badge{
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.03em; white-space:nowrap;
  color:#ffffff; background:var(--accent);
  padding:.35rem .8rem; border-radius:999px;
}
.heleox-azioni{ display:flex; flex-wrap:wrap; gap:.9rem; }

.heleox-vetrina{
  display:flex; flex-direction:column; gap:1.2rem; align-items:center;
  padding:1.8rem 1.6rem;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:var(--radius);
  background:linear-gradient(165deg, #1c1836, #130f28);
  box-shadow:0 24px 60px -34px color-mix(in srgb, var(--accent) 55%, transparent);
}
.heleox-scudo{
  width:92px; height:92px; border-radius:22px; overflow:hidden;
  display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent),
             0 14px 34px -14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.heleox-scudo img{ width:100%; height:100%; object-fit:cover; display:block; }
.heleox-scudo svg{ width:40px; height:40px; }
.heleox-check{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; width:100%; }
.heleox-check li{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--font-mono); font-size:.82rem; color:#c3d2ee;
}
.heleox-check i{
  width:17px; height:17px; border-radius:50%; flex:none; position:relative;
  background:rgba(94,194,106,.18); border:1px solid rgba(94,194,106,.4);
}
.heleox-check i::after{
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:.64rem; color:#5ec26a;
}

/* ---- Blog / Annunci ---- */
.blog-griglia{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;
}
.blog-anteprima{ grid-template-columns:repeat(2, 1fr); }
.annuncio{
  display:flex; flex-direction:column; gap:.7rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  padding:1.6rem; cursor:pointer;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.annuncio:hover{
  transform:translateY(-5px);
  border-color:var(--accent-line);
  box-shadow:0 20px 45px -22px color-mix(in srgb, var(--accent) 45%, transparent);
}
.annuncio:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.annuncio-meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.annuncio-data{ font-family:var(--font-mono); font-size:.74rem; color:var(--faint); }
.annuncio-tag{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-2);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:.2rem .65rem; border-radius:999px;
}
.annuncio-titolo{ font-size:1.16rem; margin:0; }
.annuncio-testo{ color:var(--muted); font-size:.95rem; margin:0; flex:1; }
.annuncio-azione{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.9rem; color:var(--accent-2);
  transition:gap .2s ease;
}
.annuncio:hover .annuncio-azione{ gap:.65rem; }
.blog-vuoto{
  color:var(--muted); border:1px dashed var(--line-forte); border-radius:var(--radius);
  padding:2.4rem; text-align:center;
}

/* ---- Pop-up annuncio (dialog nativo) ---- */
.annuncio-modal{
  width:min(100% - 2rem, 40rem);
  max-height:calc(100vh - 4rem); overflow:auto;
  border:1px solid var(--line-forte); border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  color:var(--text);
  padding:2.2rem;
  box-shadow:0 40px 90px -30px rgba(15,27,51,.5);
}
.annuncio-modal::backdrop{ background:rgba(15,27,51,.55); backdrop-filter:blur(4px); }
.annuncio-modal[open]{ animation:modale-in .3s cubic-bezier(.22,.7,.3,1); }
@keyframes modale-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.annuncio-modal-chiudi{
  position:absolute; top:.7rem; right:1rem;
  background:none; border:0; cursor:pointer;
  font-size:1.8rem; line-height:1; color:var(--faint);
}
.annuncio-modal-chiudi:hover{ color:var(--text); }
.annuncio-modal-titolo{ font-size:clamp(1.3rem, 3vw, 1.6rem); margin:.6rem 0 1.1rem; }
.annuncio-modal-corpo p{ color:var(--muted); margin:0 0 1rem; }
.annuncio-modal-corpo a{ font-weight:600; }
.annuncio-modal-link{ margin-top:.4rem; }

/* ---- Responsive V4 ---- */
@media (max-width: 980px){
  .servizi-evidenza{ grid-template-columns:repeat(2, 1fr); }
  .servizi-secondari{ grid-template-columns:repeat(2, 1fr); }
  .heleox{ grid-template-columns:1fr; }
  .heleox-vetrina{ max-width:24rem; }
  .blog-griglia{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 700px){
  .servizi-evidenza{ grid-template-columns:1fr; }
  .servizi-secondari{ grid-template-columns:1fr; }
  .heleox{ padding:1.7rem; }
  .heleox-annuncio{ flex-direction:column; align-items:flex-start; }
  .blog-griglia,
  .blog-anteprima{ grid-template-columns:1fr; }
  .annuncio-modal{ padding:1.7rem; }
}

@media (prefers-reduced-motion: reduce){
  .annuncio-modal[open]{ animation:none; }
}

/* ============================================================
   V5 — Card servizio cliccabili + Pagine servizio + Certificazioni
   ============================================================ */

/* Le card servizio diventano link all'intera pagina */
.servizio{ display:block; text-decoration:none; color:var(--text); }
.servizio:hover{ text-decoration:none; }
.servizi-secondari .servizio{ display:flex; flex-direction:column; }
.servizi-secondari .servizio .servizio-link{ margin-top:auto; }

/* ---- Pagina servizio ---- */
.servizio-hero{ padding:4.2rem 0 1.4rem; }
.servizio-hero .torna{ margin-bottom:1.4rem; }
.servizio-sezione{ padding:2.4rem 0; }
.servizio-sezione h2{ margin-bottom:1rem; }
.servizio-testo{ max-width:54rem; }
.servizio-testo p{ color:var(--muted); margin:0 0 1.1rem; }
.servizio-testo p:last-child{ margin-bottom:0; }

/* In dettaglio (spiegazioni dei concetti) */
.servizio-approfondimenti{ display:grid; gap:1.6rem; margin-top:1.4rem; }
.approfondimento{ border-left:3px solid var(--accent-line); padding-left:1.3rem; }
.approfondimento h3{ margin-bottom:.4rem; }
.approfondimento p{ color:var(--muted); margin:.55rem 0 0; max-width:56rem; }
.approfondimento p:first-of-type{ margin-top:0; }

/* Come lavoriamo (approccio, passi numerati) */
.servizio-approccio{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:grid; gap:1.2rem; counter-reset:passo; max-width:56rem;
}
.servizio-approccio li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.servizio-approccio li::before{
  counter-increment:passo; content:counter(passo);
  width:2.2rem; height:2.2rem; flex:none;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  color:#ffffff; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #6ea8ff));
}
.passo-testo strong{ font-family:var(--font-display); font-size:1.05rem; display:block; margin-bottom:.2rem; }
.passo-testo p{ color:var(--muted); margin:0; }

/* FAQ (accordion) */
.faq{ display:grid; gap:.8rem; max-width:52rem; margin-top:1.4rem; }
.faq-item{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer;
  padding:1rem 1.2rem;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; color:var(--accent-2); font-size:1.4rem; line-height:1; flex:none;
  transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:0; padding:0 1.2rem 1.1rem; color:var(--muted); }

/* Griglia dei dati/statistiche */
.stat-griglia{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem;
  margin-top:1.8rem;
}
.stat{
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  padding:1.5rem;
  display:flex; flex-direction:column;
}
.stat-num{
  font-family:var(--font-display); font-weight:700; line-height:1.05;
  font-size:1.85rem; color:var(--accent-2);
  letter-spacing:-.01em;
}
.stat-testo{ color:var(--muted); font-size:.95rem; margin-top:.55rem; }
.stat-fonte{
  color:var(--faint); font-size:.74rem; font-family:var(--font-mono);
  margin-top:.9rem;
}

/* Casi d'uso + A chi serve */
.servizio-doppia{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; }
.lista-check{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.75rem; }
.lista-check li{ display:flex; gap:.7rem; color:var(--muted); }
.lista-check li::before{
  content:"✓"; color:var(--accent-2); font-weight:700; flex:none;
  font-family:var(--font-mono);
}

/* ---- Certificazioni ---- */
.certificazioni-griglia{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.4rem; margin-top:1.6rem;
}
.certificazione{
  display:flex; flex-direction:column; align-items:flex-start; gap:1.05rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  padding:1.4rem 1.5rem;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.certificazione:hover{
  transform:translateY(-3px); border-color:var(--accent-line);
  box-shadow:0 16px 38px -18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.certificazione img{ height:34px; width:auto; max-width:150px; object-fit:contain; flex:none; }
.certificazione-badge{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  color:var(--accent-2);
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.certificazione-badge svg{ width:24px; height:24px; }
.certificazione-testo{ display:flex; flex-direction:column; gap:.2rem; line-height:1.3; }
.certificazione-testo strong{ font-family:var(--font-display); font-size:1.02rem; }
.certificazione-testo span{ color:var(--faint); font-size:.82rem; font-family:var(--font-mono); }

@media (max-width:980px){
  .certificazioni-griglia{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .certificazioni-griglia{ grid-template-columns:1fr; }
}

@media (max-width: 980px){
  .stat-griglia{ grid-template-columns:repeat(2, 1fr); }
  .servizio-doppia{ grid-template-columns:1fr; gap:1.8rem; }
}
@media (max-width: 560px){
  .stat-griglia{ grid-template-columns:1fr; }
}

/* ============================================================
   RECENSIONI — Design finale (graft B "Premium showcase" +
   pattern-firma "riflettore al cursore" di C)
   Tema chiaro/blu · font già presenti · zero risorse esterne.
   Stelle oro #f59e0b su traccia var(--line-forte).
   Sostituisce integralmente il CSS recensioni attuale.
   ============================================================ */

/* ---------- Riepilogo media: pannello elevato con badge ---------- */
.recensioni-riepilogo{
  position:relative;
  display:flex; align-items:center; gap:1.1rem 1.4rem; flex-wrap:wrap;
  margin-bottom:2.6rem;
  padding:1.5rem 1.8rem;
  border:1px solid var(--accent-line);
  border-radius:calc(var(--radius) + 4px);
  background:
    radial-gradient(120% 150% at 0% 0%, var(--accent-soft), transparent 58%),
    linear-gradient(165deg, var(--surface), var(--surface-2));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent),
    0 22px 50px -30px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Eyebrow mono a tutta larghezza sopra la media */
.recensioni-riepilogo::before{
  content:"\2605  Giudizio dei clienti";
  flex-basis:100%;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-2);
}
.recensioni-media{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-size:2.9rem; font-weight:700;
  line-height:1; color:var(--accent-2); letter-spacing:-.01em;
}
/* Stella grande accanto al numero */
.recensioni-media::before{
  content:"\2605"; color:#f59e0b; font-size:2.1rem; line-height:1;
  filter:drop-shadow(0 4px 10px color-mix(in srgb, #f59e0b 45%, transparent));
}
.recensioni-media-stelle{ display:inline-flex; gap:.12rem; font-size:1.4rem; }
.recensioni-media-stelle .stella{ color:var(--line-forte); }
.recensioni-media-stelle .stella.piena{ color:#f59e0b; }
.recensioni-conteggio{
  color:var(--muted); font-size:.86rem;
  font-family:var(--font-mono); letter-spacing:.02em;
  padding-left:1.1rem; margin-left:.1rem;
  border-left:1px solid var(--line-forte);
}

/* ---------- Griglia 3 → 2 → 1 ---------- */
.recensioni-griglia{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.4rem;
  align-items:start;
}
/* Con una sola recensione la fila non deve sembrare spoglia: la card
   viene centrata a larghezza confortevole invece di restare stretta a
   sinistra. Con 2+ recensioni la griglia torna a riempirsi da sinistra. */
.recensioni-griglia .recensione:only-child{
  grid-column:1 / -1; width:100%; max-width:36rem; margin-inline:auto;
}

/* ---------- Card recensione: superficie premium + riflettore ---------- */
.recensione{
  position:relative; overflow:hidden; isolation:isolate;
  margin:0; padding:1.7rem 1.6rem 1.5rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(130% 120% at 100% 0%, var(--accent-soft), transparent 55%),
    linear-gradient(165deg, var(--surface), var(--surface-2));
  display:flex; flex-direction:column; gap:1rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 12px 30px -26px color-mix(in srgb, var(--accent) 45%, transparent);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  animation:rec-entra .7s cubic-bezier(.16,.84,.44,1) both;
}
/* Contenuto sopra riflettore e filigrana */
.recensione > *{ position:relative; z-index:1; }

/* Filigrana virgolette in stile display */
.recensione::before{
  content:"\201C";
  position:absolute; top:.1rem; right:1.1rem; z-index:0;
  font-family:var(--font-display); font-weight:700;
  font-size:4.6rem; line-height:1; color:var(--accent);
  opacity:.10; pointer-events:none;
}
/* Riflettore che segue il cursore (--mx/--my via JS; centrato di default) */
.recensione::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%);
}
.recensione:hover::after{ opacity:1; }
.recensione:hover{
  transform:translateY(-5px); border-color:var(--accent-line);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent),
    0 28px 55px -26px color-mix(in srgb, var(--accent) 48%, transparent);
}

@keyframes rec-entra{
  from{ opacity:0; transform:translateY(26px) scale(.985); }
  to{ opacity:1; transform:none; }
}
.recensione:nth-child(1){ animation-delay:.04s; }
.recensione:nth-child(2){ animation-delay:.10s; }
.recensione:nth-child(3){ animation-delay:.16s; }
.recensione:nth-child(4){ animation-delay:.22s; }
.recensione:nth-child(5){ animation-delay:.28s; }
.recensione:nth-child(6){ animation-delay:.34s; }
.recensione:nth-child(7){ animation-delay:.40s; }
.recensione:nth-child(8){ animation-delay:.46s; }
.recensione:nth-child(9){ animation-delay:.52s; }

/* ---------- Stelle card: pop "a onda" in hover ---------- */
.recensione-stelle{ display:inline-flex; gap:.14rem; font-size:1.1rem; }
.recensione-stelle .stella{
  color:var(--line-forte);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), color .2s ease;
}
.recensione-stelle .stella.piena{ color:#f59e0b; }
.recensione:hover .recensione-stelle .stella.piena{ transform:translateY(-2px) scale(1.16); }
.recensione-stelle .stella:nth-child(2){ transition-delay:.03s; }
.recensione-stelle .stella:nth-child(3){ transition-delay:.06s; }
.recensione-stelle .stella:nth-child(4){ transition-delay:.09s; }
.recensione-stelle .stella:nth-child(5){ transition-delay:.12s; }

.recensione-testo{
  margin:0; color:var(--text); font-size:1rem; line-height:1.62; font-weight:400;
}

/* ---------- Autore con monogramma circolare ---------- */
.recensione-autore{
  display:flex; align-items:center; gap:.8rem;
  margin-top:auto; padding-top:.9rem;
  border-top:1px solid var(--line);
}
.recensione-mono{
  flex:none; display:grid; place-items:center;
  width:2.6rem; height:2.6rem; border-radius:999px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  color:var(--accent-2);
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  line-height:1; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.recensione-autore-testo{
  display:flex; flex-direction:column; gap:.1rem; min-width:0;
}
.recensione-nome{
  font-family:var(--font-display); font-weight:600;
  color:var(--text); font-size:.98rem; line-height:1.25;
}
.recensione-data{
  font-size:.76rem; color:var(--faint);
  font-family:var(--font-mono); letter-spacing:.02em;
}

/* ---------- Stato vuoto ---------- */
.recensioni-vuoto{
  grid-column:1 / -1;
  text-align:center; color:var(--muted);
  padding:2.2rem 1.4rem; margin:0;
  border:1px dashed var(--line-forte); border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
}

/* ============================================================
   Form recensione — stessa pelle premium, stelle interattive
   ============================================================ */
.recensione-form-box{
  position:relative; overflow:hidden;
  margin-top:2.6rem; padding:1.9rem 2rem;
  border:1px solid var(--accent-line); border-radius:calc(var(--radius) + 2px);
  background:
    radial-gradient(110% 130% at 100% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(165deg, var(--surface), var(--surface-2));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 6%, transparent),
    0 20px 46px -32px color-mix(in srgb, var(--accent) 45%, transparent);
}
.recensione-form-box::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #0ea5e9));
  opacity:.75;
}
.recensione-form-box h3{ margin-bottom:1.2rem; }
.recensione-form{ display:flex; flex-direction:column; gap:1.1rem; }
.rec-riga{ display:grid; grid-template-columns:1fr auto; gap:1.1rem; align-items:start; }
.rec-campo{ display:flex; flex-direction:column; gap:.4rem; }
.rec-campo > span, .rec-etichetta{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-2); font-weight:600;
}
.recensione-form input, .recensione-form textarea{
  font:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--line-forte); border-radius:var(--radius-sm);
  padding:.75rem .95rem; width:100%; box-sizing:border-box; resize:vertical;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.recensione-form input::placeholder, .recensione-form textarea::placeholder{ color:var(--faint); }
.recensione-form input:hover, .recensione-form textarea:hover{ border-color:var(--accent-line); }
.recensione-form input:focus, .recensione-form textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* Selettore stelle interattivo (radiogroup di button) */
.rec-stelle-input{ display:inline-flex; gap:.2rem; }
.rec-stella{
  background:none; border:none; cursor:pointer; padding:.1rem .12rem;
  font-size:1.9rem; line-height:1; color:var(--line-forte);
  transition:color .14s ease, transform .18s cubic-bezier(.34,1.56,.64,1), filter .14s ease;
}
.rec-stella:hover{ transform:scale(1.22) rotate(-4deg); }
.rec-stella:active{ transform:scale(.94); }
.rec-stella.piena{ color:#f59e0b; filter:drop-shadow(0 2px 6px rgba(245,158,11,.42)); }
.rec-stella:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

.rec-piede{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; }
.rec-nota{ font-size:.85rem; color:var(--muted); max-width:36rem; margin:0; }
.rec-nota strong{ color:var(--text); }

/* Stati esito con badge e comparsa morbida */
.rec-errore{
  font-size:.9rem; color:#dc2626; font-weight:600; margin:0;
  display:flex; align-items:center; gap:.5rem;
  animation:rec-avviso .3s ease both;
}
.rec-errore::before{
  content:"!"; flex:0 0 auto; display:inline-grid; place-items:center;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:#dc2626; color:#fff; font-size:.75rem; font-weight:700; line-height:1;
}
.rec-ok{
  font-size:.92rem; color:#047857; font-weight:600; margin:0;
  display:flex; align-items:flex-start; gap:.55rem;
  background:linear-gradient(120deg, rgba(4,120,87,.10), rgba(4,120,87,.04));
  border:1px solid rgba(4,120,87,.28);
  border-radius:var(--radius-sm); padding:.8rem 1rem;
  animation:rec-avviso .35s ease both;
}
.rec-ok::before{
  content:"\2713"; flex:0 0 auto; display:inline-grid; place-items:center;
  width:1.3rem; height:1.3rem; border-radius:50%; margin-top:.05rem;
  background:#047857; color:#fff; font-size:.8rem; font-weight:700; line-height:1;
}
@keyframes rec-avviso{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}

/* ============================================================
   Accessibilità
   ============================================================ */
#recensioni :is(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm);
}

/* ============================================================
   Responsive: 3 → 2 → 1 colonne
   ============================================================ */
@media (max-width: 900px){
  .recensioni-griglia{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .recensioni-griglia{ grid-template-columns:1fr; }
  .rec-riga{ grid-template-columns:1fr; }
  .rec-piede .btn{ width:100%; justify-content:center; }
  .recensioni-riepilogo{ padding:1.3rem 1.4rem; }
  .recensioni-media{ font-size:2.5rem; }
  .recensioni-conteggio{
    padding-left:0; margin-left:0; border-left:none; flex-basis:100%;
  }
}

/* ============================================================
   Rispetto di prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .recensione{ animation:none; }
  .recensione,
  .recensione-stelle .stella,
  .rec-stella{ transition:none; }
  .recensione:hover{ transform:none; }
  .recensione::after{ display:none; }
  .recensione:hover .recensione-stelle .stella.piena{ transform:none; }
  .rec-stella:hover, .rec-stella:active{ transform:none; }
  .rec-errore, .rec-ok{ animation:none; }
}

/* ============================================================
   V6 — Pagina progetto: layout editoriale asimmetrico + galleria
   ============================================================ */

/* Il corpo passa da griglia a 2 colonne a un flusso editoriale */
.progetto-corpo.progetto-flusso{
  display:block;
  max-width:72rem;
}
.progetto-flusso .progetto-blocco{
  position:relative;
  margin:0 0 3.2rem;
  max-width:44rem;
}
.blocco-eyebrow{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.22em;
  color:color-mix(in srgb, var(--accent) 70%, #0a1220);
  display:block; margin-bottom:.55rem;
}
.blocco-eyebrow::before{ content:"// "; color:var(--faint); }
.progetto-flusso .progetto-blocco h2{ margin-bottom:.3rem; }
.progetto-flusso .progetto-blocco p{ color:var(--muted); margin:.5rem 0 0; }

/* "La soluzione": spostata a destra e trattata come scheda in evidenza */
.blocco-soluzione{
  margin-left:auto;
  max-width:49rem;
  padding:1.7rem 1.9rem;
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  background:
    radial-gradient(120% 130% at 100% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(165deg, var(--surface), var(--surface-2));
  box-shadow:0 26px 64px -36px color-mix(in srgb, var(--accent) 48%, transparent);
}

/* "Funzionalità": scheda spostata a sinistra */
.blocco-funzioni{
  max-width:41rem;
  padding:1.7rem 1.9rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
}
.blocco-funzioni .lista-funzioni{ margin-top:.9rem; }

/* -------- Galleria immagini (base; disposizione sparsa in V8) -------- */
.progetto-galleria{ margin:.4rem 0 3.4rem; }
.galleria-item{
  margin:0; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line-forte);
  background:var(--surface-2);
  transition:transform .45s cubic-bezier(.22,.7,.3,1), box-shadow .4s ease;
}
.galleria-item img{
  width:100%; height:100%; object-fit:cover; display:block; border:0; border-radius:0;
  transition:transform .6s cubic-bezier(.22,.7,.3,1);
}
.galleria-item:hover img{ transform:scale(1.05); }

@media (max-width: 700px){
  .progetto-corpo.progetto-flusso{ max-width:none; }
  .progetto-flusso .progetto-blocco,
  .blocco-soluzione,
  .blocco-funzioni{ max-width:none; margin-left:0; }
}
@media (prefers-reduced-motion: reduce){
  .galleria-item, .galleria-item img{ transition:none; }
}

/* ============================================================
   V7 — Motivi animati a tema (uno per progetto)
   ============================================================ */
.motivo{ position:absolute; inset:0; color:var(--c, var(--accent)); }
.m-svg{ width:100%; height:100%; display:block; }

/* Motivo dentro la card della griglia: piccolo "schermo" scuro */
.card-anteprima-motivo{
  min-height:6rem;
  border-color:color-mix(in srgb, var(--c) 30%, transparent);
  background:
    radial-gradient(120% 120% at 80% 110%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%),
    linear-gradient(160deg, #0e1a30, #0b1424);
}

/* Il motivo come SFONDO dell'intestazione della pagina progetto:
   a tutta larghezza, dietro il contenuto, sfumato verso il colore
   del progetto e il trasparente (nessun riquadro) */
.progetto-hero-motivo{ position:relative; }
.progetto-sfondo{
  position:absolute; left:50%; top:-6rem;
  transform:translateX(-50%);
  width:100vw; height:clamp(26rem, 60vw, 38rem);
  z-index:-1; pointer-events:none;
  color:var(--accent);
  opacity:.55;
  -webkit-mask-image:
    linear-gradient(180deg, #000 30%, transparent 97%),
    linear-gradient(100deg, rgba(0,0,0,.35), #000 45%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg, #000 30%, transparent 97%),
    linear-gradient(100deg, rgba(0,0,0,.35), #000 45%);
  mask-composite:intersect;
}
.progetto-sfondo .motivo{ position:absolute; inset:0; }
/* Velo colorato: la sfumatura verso l'accento del progetto */
.progetto-sfondo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 90% at 78% 12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 65%),
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--accent) 7%, transparent) 78%, transparent 100%);
}
/* Sul fondo chiaro i tratti respirano un po' di più */
.progetto-sfondo .m-edge{ opacity:.34; }
.progetto-sfondo .m-ring{ opacity:.26; }
.progetto-sfondo .m-node{ opacity:.55; }

/* Primitive di disegno */
.m-edge, .m-ring, .m-scan{ stroke:currentColor; fill:none; }
.m-edge{ stroke-width:1.3; opacity:.22; }
.m-ring{ stroke-width:1; opacity:.16; }
.m-tratt{ stroke-dasharray:3 7; }
.m-node, .m-blip{ fill:currentColor; }
.m-node{ opacity:.4; }
.m-hit{ fill:none; }
.m-wedge{ fill:currentColor; opacity:.14; }
.m-scan{ stroke-width:1.6; opacity:.8; }
.m-freccia{ fill:currentColor; opacity:.55; }
.m-box{ fill:none; stroke:currentColor; stroke-width:1.5; opacity:.6; }
.m-barra{
  fill:currentColor; opacity:.4;
  transform-box:fill-box; transform-origin:bottom;
}
.m-dente{
  fill:none; stroke:currentColor; opacity:.5;
  stroke-width:11; stroke-dasharray:7 8;
}

/* Animazioni condivise (guidate da --d per lo sfasamento) */
.m-pulse{
  animation:m-pulse 2.6s ease-in-out infinite; animation-delay:var(--d, 0s);
  transform-box:fill-box; transform-origin:center;
}
@keyframes m-pulse{
  0%, 100%{ opacity:.28; }
  50%{ opacity:1; filter:drop-shadow(0 0 5px currentColor); }
}
.m-flow{ stroke-dasharray:5 9; animation:m-flow 3.2s linear infinite; animation-delay:var(--d, 0s); }
@keyframes m-flow{ to{ stroke-dashoffset:-140; } }
.m-sweep{
  transform-box:fill-box; transform-origin:center;
  animation:m-spin 4.6s linear infinite;
}
@keyframes m-spin{ to{ transform:rotate(360deg); } }
.m-sweep.m-rev{ animation-direction:reverse; }

/* Alone che si espande (hub delle sinapsi, echi radar, ingranaggi) */
.m-halo{
  animation:m-halo 3.4s ease-out infinite; animation-delay:var(--d, 0s);
  transform-box:fill-box; transform-origin:center;
}
@keyframes m-halo{
  0%{ transform:scale(.6); opacity:.5; }
  70%, 100%{ transform:scale(1.5); opacity:0; }
}

/* Righe che si scrivono da sole (documento frGest) */
.m-write{
  stroke-dasharray:var(--len, 100);
  animation:m-write 4.5s ease-in-out infinite; animation-delay:var(--d, 0s);
}
@keyframes m-write{
  0%{ stroke-dashoffset:var(--len, 100); opacity:.9; }
  45%, 85%{ stroke-dashoffset:0; opacity:.9; }
  100%{ stroke-dashoffset:0; opacity:.15; }
}

/* Barre del grafico che crescono */
.m-bar{
  animation:m-bar 3.4s ease-in-out infinite; animation-delay:var(--d, 0s);
}
@keyframes m-bar{
  0%{ transform:scaleY(.35); }
  55%, 100%{ transform:scaleY(1); }
}

/* Nastro trasportatore: i pezzi avanzano */
.m-travel{ animation:m-travel 6s linear infinite; }
@keyframes m-travel{
  from{ transform:translateX(-80px); }
  to{ transform:translateX(160px); }
}

@media (prefers-reduced-motion: reduce){
  .m-pulse, .m-flow, .m-sweep, .m-halo, .m-write, .m-bar, .m-travel{ animation:none; }
  .m-node, .m-blip{ opacity:.7; }
  .m-write{ stroke-dashoffset:0; }
}

/* ============================================================
   V8 — Righe alternate testo/immagine + griglia "giocosa"
   ============================================================ */

/* ---- Pagina progetto: testo e immagine fianco a fianco,
        lati che si invertono a ogni riga ---- */
.duo{
  display:grid; grid-template-columns:1.04fr .96fr;
  gap:2rem 3rem; align-items:center;
  margin:0 0 3.6rem;
}
.duo .progetto-blocco{ margin:0; max-width:none; }
.duo-inversa .duo-img{ order:-1; }
.duo.solo{ grid-template-columns:1fr; }
.duo.solo .duo-img{ display:none; }

.duo-img{
  margin:0; position:relative;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-forte);
  background:var(--surface-2);
  aspect-ratio:16 / 11;
  box-shadow:0 24px 58px -30px rgba(18,32,59,.35);
  transition:transform .45s cubic-bezier(.22,.7,.3,1), box-shadow .4s ease;
}
.duo-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.duo-img:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 70px -26px color-mix(in srgb, var(--accent) 55%, rgba(18,32,59,.4));
}
/* Tocco giocoso senza inclinare nulla: le immagini sono sfalsate
   in verticale e leggermente più strette del testo, verso l'esterno */
.duo:not(.duo-inversa) .duo-img{ width:94%; margin-left:auto; transform:translateY(1.1rem); }
.duo-inversa .duo-img{ width:94%; margin-right:auto; transform:translateY(-1rem); }
.duo:not(.duo-inversa) .duo-img:hover{ transform:translateY(.6rem); }
.duo-inversa .duo-img:hover{ transform:translateY(-1.4rem); }

/* Pannello-motivo usato al posto della prima foto quando manca */
.duo-motivo{
  position:absolute; inset:0;
  color:var(--accent);
  background:
    radial-gradient(110% 120% at 82% 108%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(160deg, #0e1a30, #0b1424);
}
.duo-motivo .motivo{ position:absolute; inset:0; }

/* ---- Griglia progetti: pattern "giocoso" ----
   Le dimensioni dipendono dalla posizione: le card grandi si
   alternano sinistra/destra e le piccole si intrecciano intorno,
   così nessun lato ha solo card grandi o solo piccole. */
.bento .card-progetto,
.bento .card-progetto.xl,
.bento .card-progetto.lg,
.bento .card-progetto.md{ grid-column:span 2; grid-row:span 1; }
.bento .card-progetto:nth-child(6n+1){ grid-column:span 4; grid-row:span 2; } /* grande a sinistra */
.bento .card-progetto:nth-child(6n+4){ grid-column:span 2; grid-row:span 2; } /* piccola alta */
.bento .card-progetto:nth-child(6n+5){ grid-column:3 / span 4; grid-row:span 2; } /* grande a destra */
/* Angoli non tutti uguali: ogni card ha una "firma" diversa, ma dritta */
.bento .card-progetto:nth-child(3n+1){ border-radius:2.4rem 1.1rem 1.5rem 1.5rem; }
.bento .card-progetto:nth-child(3n+2){ border-radius:1.1rem 1.5rem 2.4rem 1.5rem; }
.bento .card-progetto:nth-child(3n+3){ border-radius:1.5rem 2.4rem 1.1rem 2.1rem; }

/* ---- Motivo come sfondo sfumato nelle card piccole ---- */
.card-motivo-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  color:var(--c);
  opacity:.2;
  -webkit-mask-image:linear-gradient(115deg, transparent 8%, #000 55%);
  mask-image:linear-gradient(115deg, transparent 8%, #000 55%);
  transition:opacity .35s ease;
}
.card-progetto:hover .card-motivo-bg{ opacity:.36; }
.card-motivo-bg .m-svg{ width:100%; height:100%; }
/* Il contenuto resta sopra il motivo.
   .card-azione e' esclusa di proposito: e' ancorata in basso a destra con
   position:absolute, e includerla qui la riportava nel flusso, dove
   right/bottom la spostavano sopra la descrizione. Il suo z-index sta
   nella sua regola. */
.card-tags, .card-titolo, .card-desc, .card-anteprima{
  position:relative; z-index:2;
}

@media (max-width: 980px){
  .bento .card-progetto,
  .bento .card-progetto.xl,
  .bento .card-progetto.lg,
  .bento .card-progetto.md{ grid-column:span 1; grid-row:span 1; }
  .bento .card-progetto:nth-child(6n+1),
  .bento .card-progetto:nth-child(6n+5){ grid-column:span 2; grid-row:span 2; }
  .bento .card-progetto:nth-child(6n+4){ grid-column:span 1; grid-row:span 2; }
}
@media (max-width: 700px){
  .duo,
  .duo.solo{ grid-template-columns:1fr; gap:1.3rem; margin-bottom:2.6rem; }
  .duo-inversa .duo-img{ order:2; }
  .duo:not(.duo-inversa) .duo-img,
  .duo-inversa .duo-img{ width:100%; margin:0; transform:none; }
  .bento .card-progetto:nth-child(6n+1),
  .bento .card-progetto:nth-child(6n+4),
  .bento .card-progetto:nth-child(6n+5){ grid-column:span 1; grid-row:span 1; }
  .progetto-sfondo{ height:24rem; opacity:.4; }
}
@media (prefers-reduced-motion: reduce){
  .duo-img{ transition:none; transform:none !important; }
}

/* ============================================================
   V9 — Animazioni sobrie: i motivi si muovono SOLO al passaggio
   del cursore. Da fermi mostrano un fotogramma statico elegante.
   ============================================================ */
.m-pulse, .m-flow, .m-sweep, .m-halo, .m-bar, .m-travel{
  animation-play-state:paused;
}
:is(.card-progetto:hover, .progetto-hero-motivo:hover, .duo-img:hover)
  :is(.m-pulse, .m-flow, .m-sweep, .m-halo, .m-bar, .m-travel){
  animation-play-state:running;
}
/* Da fermi i nodi restano ben visibili (non nel loro minimo) */
.m-pulse{ opacity:.6; }

/* Le righe "che si scrivono" da ferme sono scritte per intero */
.m-write{ animation:none; stroke-dasharray:none; }
:is(.card-progetto:hover, .progetto-hero-motivo:hover, .duo-img:hover) .m-write{
  stroke-dasharray:var(--len, 100);
  animation:m-write 4.5s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}

/* Anche le anteprime segnaposto (equalizer, scintille) solo su hover */
.mock-grafico i,
.mock-riga::after,
.galleria-segnaposto{ animation-play-state:paused; }
.card-progetto:hover :is(.mock-grafico i, .mock-riga::after){
  animation-play-state:running;
}

/* ============================================================
   V10 — Fluidità della sezione Sviluppo Software
   Easing più morbidi e tempi leggermente più distesi: la pagina
   scorre e reagisce senza scatti.
   ============================================================ */
.card-progetto{
  transition:transform .5s cubic-bezier(.16,.8,.26,1),
             box-shadow .5s ease,
             border-color .4s ease;
  will-change:transform;
}
.card-nasce{ animation:card-in .85s cubic-bezier(.16,.8,.26,1) forwards; }
@keyframes card-in{
  from{ opacity:0; transform:translateY(26px) scale(.975); }
  to{ opacity:1; transform:none; }
}
.card-esce{ animation:card-out .32s ease forwards; }
.chip{ transition:all .3s ease; }
.card-progetto .card-anteprima{ transition:transform .5s cubic-bezier(.16,.8,.26,1); }
.card-azione{ transition:background .3s ease, gap .3s ease; }
.duo-img{ transition:transform .55s cubic-bezier(.16,.8,.26,1), box-shadow .5s ease; }
.rivela{ transition:opacity .85s ease, transform .85s cubic-bezier(.16,.8,.26,1); }

@media (prefers-reduced-motion: reduce){
  .card-progetto{ will-change:auto; transition:none; }
}