/* ═══════════════════════════════════════════════════════════════
   TC Consulting — Shared Stylesheet
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  --green: #16a34a;
  --green-dark: #15803d;
  --green-light: #22c55e;
  /* Qui vivevano --green-text (#137a39) e --green-deep (#116632), due verdi
     piu' scuri introdotti per il contrasto e usati in 78 regole al posto del
     verde di marca. Rimossi in 0.17.43 per scelta esplicita: il sito usa il
     verde del disegno ovunque.
     Il costo, misurato e accettato consapevolmente: --green su bianco da'
     3.30:1, sotto il minimo AA di 4.5:1 per il testo. Riguarda il testo verde
     piccolo (etichette di sezione, "Scopri di piu'", tag) e il testo bianco
     sopra i bottoni verdi. Gli unici verdi che restano conformi da soli sono
     quelli sotto testo grande — i numeroni delle statistiche a 32px, dove la
     soglia scende a 3:1.
     Non c'era una via di mezzo: il verde piu' chiaro che tiene ancora l'AA
     sul grigio delle card e' #11823b, a occhio indistinguibile da #137a39.
     Se un domani l'AA torna a essere un requisito, la strada e' rimettere
     questi due token e non schiarire il verde di marca. */
  --blue: #4a7ab5;
  --blue-dark: #3a6095;
  /* Qui vivevano --blue-text (#3a6095) e --blue-on-dark (#7eb3f5), la stessa
     politica del verde applicata all'altro colore di marca, in 14 regole.
     Rimossi in 0.17.44 insieme ai verdi scuri: il sito usa la palette del
     disegno. Il --blue di marca su bianco da' 4.43:1, appena sotto il minimo
     AA di 4.5:1 — uno scarto molto piu' stretto di quello del verde. */
  --blue-light: #eaf1f8;
  --black: #111111;
  --dark: #1a1a1a;
  --gray: #f5f5f5;
  --gray2: #e8e8e8;
  --gray3: #d0d0d0;
  --text: #333333;
  --text-light: #666666;
  --text-tag:   #595959; /* WCAG AA su sfondo --gray (#f5f5f5): 4.92:1. Usata per pill/tag/badge piccoli (sla-header, article-tag, case-tech-tag) dove serve un grigio "secondary" senza scendere sotto AA. team-person-tags e' passata al verde brand in 0.16.93 */
  --white: #ffffff;
  --font: 'Montserrat', 'Montserrat Fallback', sans-serif;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.14);
  --radius: 14px;
  --radius-sm: 8px;
}

/* Fallback font con metric override per matchare Montserrat — elimina CLS da
   font swap. Il browser usa Arial (preinstallato Win/Mac/Linux) con
   x-height/ascent/descent reshaped per occupare lo stesso spazio di Montserrat
   mentre quest'ultimo si scarica da Google Fonts.
   Valori derivati da fontaine (https://fontaine.dev) per Montserrat. */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial');
  size-adjust: 113.34%;
  ascent-override: 85.21%;
  descent-override: 22.09%;
  line-gap-override: 0%;
}

html { scroll-behavior: smooth; }
/* overflow-x: hidden — .nav-mobile-overlay è position:fixed, inset:0 e da chiuso
   sta fuori schermo con translateX(100%): il browser lo conteggia nella larghezza
   scrollabile del documento, generando uno scroll orizzontale fantasma (banda
   bianca a destra, ben visibile su mobile accanto all'hamburger). Nessuna sezione
   sporge di proposito in orizzontale — marquee, hero e canvas particles hanno già
   il loro overflow:hidden locale — e il tema non usa position:sticky, quindi la
   regola è sicura su html+body. */
html, body { overflow-x: hidden; }
body { font-family: var(--font); color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ─── HEADER ─── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent;
  box-shadow: none;
  height: 72px; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between;
}
/* La transizione si accende SOLO dopo che il JS ha applicato lo stato iniziale.
   Senza, una pagina caricata gia' scorsa — il caso di una scheda che il browser
   ha scaricato e ricarica quando ci si torna — mostrava l'header trasparente e
   poi lo vedeva sfumare al bianco in 300 ms. Misurato: a 47 ms la classe
   .scrolled c'era gia', ma il fondo era rgba(0,0,0,0) e ci metteva 300 ms ad
   arrivare a bianco. Era quello il tremolio. */
.js-pronto .site-header {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* backdrop-filter rimosso in 0.16.95: e' compositor work su ogni frame di scroll
   (header fixed) e la rimozione e' impercettibile perche' il fondo e' opaco al
   97-98%. Misurato su dev03 a 390x844 DPR2/3: maxDelta 4 su Chromium, 0 su WebKit,
   sotto il rumore di fondo della cattura. NON rimosso da .page-stat-card, dove il
   fondo e' il dot-grid 28px di .page-hero-inner: la' la rimozione da' maxDelta 85
   su 0,105% dei pixel, fuori tolleranza. */
.site-header.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
/* Logo swap: dark/white in base allo stato dell'header.
   I due PNG hanno ratio leggermente diversi (490x151 vs 480x144) e
   possibili padding interni differenti: stackiamo in absolute dentro
   .header-logo (che ha width/height fissi via .header-logo img sotto)
   per evitare qualsiasi shift orizzontale/verticale allo swap. v0.16.77+ */
.header-logo { position: relative; display: inline-flex; align-items: center; }
.header-logo img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.logo-white { opacity: 0; }
.logo-dark  { opacity: 1; }
.site-header:not(.scrolled) .logo-dark  { opacity: 0; }
.site-header:not(.scrolled) .logo-white { opacity: 1; }
/* Nav links bianchi su header trasparente */
.site-header:not(.scrolled) .header-nav a,
.site-header:not(.scrolled) .nav-dropdown-trigger,
.site-header:not(.scrolled) .header-phone,
.site-header:not(.scrolled) .header-phone a {
  color: rgba(255,255,255,0.85);
}
.site-header:not(.scrolled) .header-nav a:hover,
.site-header:not(.scrolled) .nav-dropdown-trigger:hover { color: #ffffff; }
.site-header:not(.scrolled) .header-nav .nav-ai,
.site-header:not(.scrolled) .nav-dropdown-trigger.nav-ai { color: #7eb3f5; }
.site-header:not(.scrolled) .nav-mobile-btn span { background: #ffffff; }
/* Dropdown menu sempre dark, indipendentemente dallo stato dell'header */
.site-header:not(.scrolled) .nav-dropdown-menu a { color: var(--text); }
.site-header:not(.scrolled) .nav-dropdown-menu a.nav-ai { color: var(--blue); }
/* Verde piu' scuro anche qui: il pannello e' bianco a prescindere dallo stato
   dell'header, e il verde brand su bianco si ferma a 3.30:1. */
.site-header:not(.scrolled) .nav-dropdown-menu a:hover { color: var(--green); }
/* La voce che corrisponde alla pagina aperta resta riconoscibile in entrambi
   gli stati dell'header. Senza questa riga la regola qui sopra — piu'
   specifica di `.header-nav a.active` — la riportava al grigio del testo
   normale, e con l'header in cima non si capiva piu' su quale pagina si
   fosse. */
.site-header:not(.scrolled) .nav-dropdown-menu a.active { color: var(--green); }
/* ─── HAMBURGER BUTTON ─── */
.nav-mobile-btn {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer; background: none; border: none; padding: 8px; z-index: 1100;
}
.nav-mobile-btn span {
  display: block; width: 22px; height: 2px; background: var(--text);
  border-radius: 2px; transition: transform 0.25s, opacity 0.25s;
}
.nav-mobile-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-mobile-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-mobile-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* ─── MOBILE NAV OVERLAY ─── */
.nav-mobile-overlay {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(255,255,255,0.98);
  display: flex; flex-direction: column; padding: 96px 32px 48px;
  transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto;
}
.nav-mobile-overlay.open { transform: translateX(0); }
.nav-mobile { display: flex; flex-direction: column; }
.nav-mobile a {
  font-size: 20px; font-weight: 700; color: var(--black);
  padding: 14px 0; border-bottom: 1px solid var(--gray2);
  transition: color 0.2s; display: block;
}
.nav-mobile a:hover { color: var(--green); }
.nav-mobile a.nav-ai { color: var(--blue); }
.nav-mobile .nav-mobile-label {
  font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-light); padding: 20px 0 8px; border-bottom: none;
  pointer-events: none;
}
.nav-mobile .nav-mobile-cta {
  background: var(--green); color: white; padding: 16px 24px;
  border-radius: 8px; text-align: center; margin-top: 24px;
  font-size: 16px; border-bottom: none;
}
.nav-mobile .nav-mobile-cta:hover { background: var(--green-dark); color: white; }
/* Box riservato per i 2 PNG sovrapposti (v0.16.77+, brand v0.16.79).
   Entrambi i loghi 312x90 ratio 3.481. Width 162 = 46*3.481+respiro.
   object-fit:contain + object-position:left center: match esatto allo swap. */
.header-logo { width: 162px; height: 46px; }
.header-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.header-nav { display: flex; align-items: center; gap: 32px; height: 100%; }
.header-nav a { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.3px; transition: color 0.2s; line-height: 1; display: inline-flex; align-items: center; }
.header-nav a:hover, .header-nav a.active { color: var(--green); }
.header-nav .nav-ai { color: var(--blue); }
.header-nav .nav-ai:hover { color: var(--blue-dark); }
.header-right { display: flex; align-items: center; gap: 16px; height: 100%; }
.header-phone { font-size: 13px; font-weight: 600; color: var(--text-light); display: inline-flex; align-items: center; line-height: 1; }
.header-phone a { color: var(--green); font-weight: 700; }
.btn-header {
  background: var(--green); color: var(--white);
  padding: 11px 24px; border-radius: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  transition: background 0.2s, transform 0.15s;
  display: inline-flex; align-items: center; line-height: 1;
}
.btn-header:hover { background: var(--green-dark); transform: translateY(-1px); }

/* ─── NAV DROPDOWN ─── */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--text); letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 4px;
  transition: color 0.2s;
}
.nav-dropdown-trigger:hover, .nav-dropdown.active .nav-dropdown-trigger { color: var(--green); }
.nav-dropdown-trigger .arrow { font-size: 9px; transition: transform 0.2s; }
/* Il pannello si apre in tre modi, e le regole sono separate di proposito:
   :hover solo dove il puntatore esiste davvero — su un touch screen l'hover
   resta "appiccicato" dopo il tocco e il pannello non si chiuderebbe piu';
   :focus-within per chi naviga da tastiera; .is-open per il tocco, gestita da
   main.js. E' anche la condizione che il JS legge per tenere aria-expanded
   allineato a cio' che si vede. */
.nav-dropdown:focus-within .nav-dropdown-trigger .arrow,
.nav-dropdown.is-open .nav-dropdown-trigger .arrow { transform: rotate(180deg); }
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-trigger .arrow { transform: rotate(180deg); }
}
/* Transparent bridge that fills the gap — keeps hover alive as mouse moves to menu */
.nav-dropdown::after {
  content: ''; position: absolute; top: 100%; left: -20px; right: -20px;
  height: 20px; display: none;
}
.nav-dropdown:focus-within::after,
.nav-dropdown.is-open::after { display: block; }
@media (hover: hover) {
  .nav-dropdown:hover::after { display: block; }
}
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  background: var(--white); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); border: 1px solid var(--gray2);
  padding: 8px 0; min-width: 220px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  transform: translateX(-50%) translateY(-4px);
  z-index: 100;
}
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}
/* Escape deve chiudere anche se il focus resta sul trigger — e li' deve
   restare, altrimenti chi naviga da tastiera perde il segno. Questa classe
   scavalca :focus-within e viene tolta appena il focus se ne va o si torna a
   premere. Il :focus-within resta in CSS di proposito: e' l'unico modo di
   aprire il pannello se il JS non parte. */
.nav-dropdown.is-escaped .nav-dropdown-menu {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
}
.nav-dropdown.is-escaped::after { display: none; }
.nav-dropdown.is-escaped .nav-dropdown-trigger .arrow { transform: none; }
.nav-dropdown-menu a {
  display: block; padding: 10px 20px;
  font-size: 13px; font-weight: 600; color: var(--text);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--gray); color: var(--green); }
.nav-dropdown-menu a.nav-ai { color: var(--blue); }
.nav-dropdown-menu a.nav-ai:hover { color: var(--blue-dark); background: var(--blue-light); }
.nav-dropdown-menu::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; background: var(--white);
  border-left: 1px solid var(--gray2); border-top: 1px solid var(--gray2);
  transform: translateX(-50%) rotate(45deg);
}

/* ─── HOMEPAGE HERO ─── */
.hero {
  padding-top: 72px; min-height: 100svh;
  background: #080f1a; display: flex; align-items: center;
  position: relative; overflow: hidden;
}
/* Stripe-style mesh: blob solidi + filter blur */
.hero-mesh {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.mesh-blob {
  position: absolute; border-radius: 50%;
}
/* Verde profondo — dietro il testo headline, top-left */
.mb-g1 {
  width: 1860px; height: 1860px;
  background: radial-gradient(circle closest-side, rgba(22,163,74,0.5761) 0.0%, rgba(22,163,74,0.5592) 15.0%, rgba(22,163,74,0.4576) 30.0%, rgba(22,163,74,0.2363) 45.0%, rgba(22,163,74,0.0576) 60.0%, rgba(22,163,74,0.0055) 75.0%, rgba(22,163,74,0.0002) 90.0%, rgba(22,163,74,0.0) 100.0%);
  opacity: 1; filter: none;
  top: -800px; left: -720px;
}
/* Blu — dietro la form, top-right */
.mb-b1 {
  width: 1710px; height: 1710px;
  background: radial-gradient(circle closest-side, rgba(74,122,181,0.5955) 0.0%, rgba(74,122,181,0.5772) 15.0%, rgba(74,122,181,0.4695) 30.0%, rgba(74,122,181,0.2403) 45.0%, rgba(74,122,181,0.0583) 60.0%, rgba(74,122,181,0.0056) 75.0%, rgba(74,122,181,0.0002) 90.0%, rgba(74,122,181,0.0) 100.0%);
  opacity: 1; filter: none;
  top: -680px; right: -660px;
}
/* Teal — ponte tra verde e blu, centro-basso */
.mb-t1 {
  width: 1440px; height: 1440px;
  background: radial-gradient(circle closest-side, rgba(26,188,156,0.3459) 0.0%, rgba(26,188,156,0.3206) 15.0%, rgba(26,188,156,0.2283) 30.0%, rgba(26,188,156,0.0993) 45.0%, rgba(26,188,156,0.0218) 60.0%, rgba(26,188,156,0.0021) 75.0%, rgba(26,188,156,0.0001) 90.0%, rgba(26,188,156,0.0) 100.0%);
  opacity: 1; filter: none;
  bottom: -520px; left: 35%;
  transform: translateX(-50%);
}
/* Verde brillante — accento mid-left */
.mb-g2 {
  width: 1140px; height: 1140px;
  background: radial-gradient(circle closest-side, rgba(34,197,94,0.2803) 0.0%, rgba(34,197,94,0.254) 15.0%, rgba(34,197,94,0.1712) 30.0%, rgba(34,197,94,0.0703) 45.0%, rgba(34,197,94,0.015) 60.0%, rgba(34,197,94,0.0015) 75.0%, rgba(34,197,94,0.0001) 90.0%, rgba(34,197,94,0.0) 100.0%);
  opacity: 1; filter: none;
  top: calc(40% - 360px); left: calc(10% - 360px);
}
/* Particles canvas */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* Dot-grid su tutto il hero */
.hero-bg-dots {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-image: radial-gradient(circle, rgba(255,255,255,0.065) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 1;
}
.hero-inner {
  max-width: 860px; margin: 0 auto; padding: 80px 48px 80px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; z-index: 1; width: 100%;
}
.hero-content { width: 100%; }
.hero-eyebrow { margin-bottom: 28px; }
.hero-overline {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase;
  /* opacity 0.42 (4.09:1, fail AA marginal) elevata a 0.55 (~5.4:1, AA pass) */
  color: rgba(255,255,255,0.55);
}
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: pulse-dot 2.4s ease-out infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  60%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.hero-title {
  font-size: clamp(42px, 6vw, 80px); font-weight: 900; line-height: 1.06;
  color: #ffffff; letter-spacing: -2px; margin-bottom: 28px;
}
.hero-title .accent-green,
.hero-title .g { color: #22c55e; }
.hero-title .accent-blue,
.hero-title .b { color: #7eb3f5; }
.hero-lead { font-size: 18px; color: rgba(255,255,255,0.62); line-height: 1.75; margin-bottom: 16px; max-width: 600px; margin-left: auto; margin-right: auto; }
.hero-qualifier {
  margin-bottom: 36px;
  font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.78); line-height: 1.7;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.hero-social-proof {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  justify-content: center; margin-bottom: 32px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.78); letter-spacing: 0.2px;
}
.hsp-sep { color: rgba(255,255,255,0.45); font-weight: 400; }
.hero-cta-group { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; justify-content: center; }
.btn-primary {
  background: var(--green); color: var(--white);
  padding: 16px 36px; border-radius: 7px; font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 18px rgba(22,163,74,0.35); transition: all 0.2s; display: inline-block;
  border: none; outline: none; cursor: pointer;
}
.btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(22,163,74,0.45); }
.btn-outline {
  background: transparent; color: var(--text);
  padding: 15px 32px; border-radius: 7px; border: 1.5px solid var(--gray3);
  font-weight: 600; font-size: 15px; transition: all 0.2s; display: inline-block;
}
.btn-outline:hover { border-color: var(--green); color: var(--green); }
/* btn-outline su sfondo scuro (hero + ai-section) */
.hero .btn-outline,
.ai-section .btn-outline {
  color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.22);
}
.hero .btn-outline:hover,
.ai-section .btn-outline:hover { border-color: #22c55e; color: #22c55e; }
.hero-trust { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.trust-item {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
  padding: 7px 14px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.78); letter-spacing: 0.5px;
}
.trust-item.ai { background: rgba(74,122,181,0.15); border-color: rgba(74,122,181,0.3); color: #7eb3f5; }

/* Hero Form */

.form-tag {
  display: inline-block; background: var(--blue-light); color: var(--blue);
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 100px; margin-bottom: 14px;
}
.form-title { font-size: 21px; font-weight: 800; color: var(--black); margin-bottom: 4px; }
.form-sub { font-size: 13px; color: var(--text-light); margin-bottom: 26px; line-height: 1.5; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text); margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--gray2); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; color: var(--text);
  background: var(--white); transition: border-color 0.2s; outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--green); }
.form-group textarea { resize: vertical; min-height: 72px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-form {
  width: 100%; background: var(--green); color: var(--white);
  padding: 14px; border: none; border-radius: 7px;
  font-family: var(--font); font-weight: 700; font-size: 14px;
  cursor: pointer; transition: background 0.2s; margin-top: 14px;
}
.btn-form:hover { background: var(--green-dark); }
.form-note { font-size: 11px; color: var(--text-light); margin-top: 10px; line-height: 1.5; }

/* ─── FLUENT FORMS · stile coerente con i form HTML del tema ───
   Targettato dentro .contatto-form-card. Usa specificità alta + !important
   sui colori chiave perché Fluent Forms inietta CSS proprio (azzurro #1a73e8)
   con specificità simile alla nostra. */
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-el-group { margin-bottom: 12px !important; }
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-t-container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-bottom: 12px !important; }
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-t-cell { padding: 0 !important; }
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-t-cell .ff-el-group { margin-bottom: 0 !important; }
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-el-input--label { padding: 0 !important; margin: 0 !important; }
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-el-input--content { padding: 0 !important; margin: 0 !important; }
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-el-input--label label,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform label {
  display: block !important; font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.7px !important;
  color: var(--text) !important; margin: 0 0 4px 0 !important; padding: 0 !important;
  line-height: 1.4 !important;
}

/* Nasconde l'asterisco rosso dei required (l'originale non lo mostra) */
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-el-is-required label::after,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .asterisk-right label::after,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform label .ff-el-is-required-asterisk,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform label::after { content: none !important; display: none !important; }

:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-el-form-control,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform input[type="text"],
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform input[type="email"],
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform input[type="tel"],
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform input[type="number"],
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform input[type="url"],
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform select,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform textarea {
  width: 100% !important; padding: 11px 14px !important; height: auto !important;
  border: 1.5px solid var(--gray2) !important; border-radius: var(--radius-sm) !important;
  font-family: var(--font) !important; font-size: 13px !important; line-height: 1.5 !important;
  color: var(--text) !important; background: var(--white) !important;
  /* Niente `outline: none` qui: questo blocco ha specificita' 0,3,1 e batterebbe
     la regola :focus-visible universale in fondo al file, lasciando chi naviga
     da tastiera senza alcun segnale di dove si trova. */
  transition: border-color 0.2s !important; box-shadow: none !important;
}
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-el-form-control:focus,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform input:focus,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform select:focus,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform textarea:focus {
  border-color: var(--green) !important; box-shadow: none !important;
}
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform textarea { resize: vertical !important; min-height: 110px !important; }

/* Bottone submit — verde a tutta larghezza, override forte sul blu di FF */
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff_submit_btn_wrapper {
  text-align: stretch; margin-top: 18px;
}
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-btn,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-btn-submit,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform button[type="submit"],
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style {
  width: 100% !important; display: block !important;
  background: var(--green) !important; background-color: var(--green) !important;
  color: var(--white) !important;
  padding: 14px !important; height: auto !important; min-height: 0 !important;
  border: none !important; border-radius: 7px !important;
  font-family: var(--font) !important; font-weight: 700 !important; font-size: 14px !important;
  text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer !important; box-shadow: none !important; transition: background 0.2s !important;
}
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-btn:hover,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-btn-submit:hover,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform button[type="submit"]:hover {
  background: var(--green-dark) !important; background-color: var(--green-dark) !important;
  color: var(--white) !important; opacity: 1 !important;
}

/* Errori di validazione */
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .error,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .text-danger,
:is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-el-is-error { color: #d33 !important; font-size: 12px !important; margin-top: 4px !important; }

@media (max-width: 640px) {
  :is(.contatto-form-card, .case-modal-form-wrap) .fluentform .ff-t-container { grid-template-columns: 1fr; }
}
/* Modal case study: il blocco Fluent Forms sopra e' condiviso col form
   contatti, qui solo i valori in cui il mockup del modal differisce (input
   piu' generosi, bottone con testo piu' grande e ombra verde all'hover).
   Riferimento: .case-modal-form input / .case-modal-submit del fallback. */
.case-modal-form-wrap .fluentform .ff-el-form-control,
.case-modal-form-wrap .fluentform input[type="text"],
.case-modal-form-wrap .fluentform input[type="email"] {
  padding: 12px 14px !important; font-size: 14px !important;
}
.case-modal-form-wrap .fluentform .ff-el-form-control::placeholder { color: var(--text-light) !important; }
.case-modal-form-wrap .fluentform .ff_submit_btn_wrapper { margin-top: 12px !important; }
.case-modal-form-wrap .fluentform .ff-btn,
.case-modal-form-wrap .fluentform .ff-btn-submit,
.case-modal-form-wrap .fluentform button[type="submit"] {
  border-radius: 8px !important; font-size: 15px !important;
}
.case-modal-form-wrap .fluentform .ff-btn:hover,
.case-modal-form-wrap .fluentform .ff-btn-submit:hover,
.case-modal-form-wrap .fluentform button[type="submit"]:hover {
  box-shadow: 0 4px 16px rgba(22,163,74,0.35) !important;
}
/* Riga "Caso richiesto": non e' nel mockup, la teniamo perche' e' l'unica
   conferma visiva di QUALE caso si sta richiedendo. Subordinata al sottotitolo. */
/* I titoli dei case study sono lunghi (fino a ~110 caratteri): senza il clamp
   questa riga occupa 3 righe e domina il modal, allontanandolo dal mockup.
   Due righe con ellissi tengono la conferma visiva senza sbilanciare. */
.case-modal-case {
  font-size: 12px; color: var(--text-light); margin: -18px 0 22px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}
.case-modal-case strong { color: var(--text); font-weight: 700; }
/* Il link nella nota sotto il modulo era distinguibile SOLO dal colore, e a
   11px il verde del marchio su fondo chiaro non arriva a 4,5:1 — segnalato da
   axe per entrambi i motivi. Invece di scurire il verde (il marchio resta
   quello che e') il link prende il colore del testo che lo circonda e una
   sottolineatura, che e' cio' che lo rende riconoscibile a chi non percepisce
   quella differenza cromatica. Il verde torna al passaggio del mouse. */
.form-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(0,0,0,0.35); transition: color 0.18s, text-decoration-color 0.18s; }
.form-note a:hover,
.form-note a:focus-visible { color: var(--green); text-decoration-color: var(--green); }

/* ─── NON SIAMO PER TUTTI ─── */
.qualifica-section { background: var(--black); padding: 96px 0; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.08); }
.qualifica-section::before { content: ''; position: absolute; border-radius: 50%; pointer-events: none; width: 1440px; height: 1440px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.4971) 0.0%, rgba(74,122,181,0.4837) 15.0%, rgba(74,122,181,0.3995) 30.0%, rgba(74,122,181,0.2091) 45.0%, rgba(74,122,181,0.0515) 60.0%, rgba(74,122,181,0.005) 75.0%, rgba(74,122,181,0.0002) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; top: -520px; left: -500px; }
.qualifica-section::after  { content: ''; position: absolute; border-radius: 50%; pointer-events: none; width: 1460px; height: 1460px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.3683) 0.0%, rgba(74,122,181,0.3443) 15.0%, rgba(74,122,181,0.2508) 30.0%, rgba(74,122,181,0.1119) 45.0%, rgba(74,122,181,0.0249) 60.0%, rgba(74,122,181,0.0024) 75.0%, rgba(74,122,181,0.0001) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; bottom: -580px; right: -540px; }
.qualifica-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
  position: relative; z-index: 1;
}
.qualifica-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 16px; }
.qualifica-title { font-size: clamp(26px, 2.4vw, 36px); font-weight: 900; color: var(--white); line-height: 1.2; margin-bottom: 20px; }
.qualifica-title em { font-style: normal; color: var(--green); }
.qualifica-desc { font-size: 16px; color: rgba(255,255,255,0.78); line-height: 1.78; margin-bottom: 28px; }
.qualifica-note { font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.7; padding: 16px 18px; margin-top: 4px; background: rgba(22,163,74,0.05); border: 1px solid rgba(22,163,74,0.14); border-left: 2px solid rgba(22,163,74,0.55); border-radius: 0 10px 10px 0; }
.qualifica-note strong { color: rgba(255,255,255,0.75); }
.qualifica-criteria { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; }
.qualifica-item { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; transition: border-color 0.22s, background 0.22s; }
.qualifica-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
.qualifica-item:hover { background: rgba(255,255,255,0.04); }
.qualifica-criteria .qualifica-item:nth-child(1) { border-left: 3px solid rgba(22,163,74,0.6); }
.qualifica-criteria .qualifica-item:nth-child(1) .qualifica-item-num { background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.32); color: var(--green); }
.qualifica-criteria .qualifica-item:nth-child(2) { border-left: 3px solid rgba(74,122,181,0.6); }
.qualifica-criteria .qualifica-item:nth-child(2) .qualifica-item-num { background: rgba(74,122,181,0.12); border-color: rgba(74,122,181,0.32); color: var(--blue); }
.qualifica-criteria .qualifica-item:nth-child(3) { border-left: 3px solid rgba(255,255,255,0.22); }
.qualifica-criteria .qualifica-item:nth-child(3) .qualifica-item-num { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.65); }
.qualifica-item-num { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; min-width: 32px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qualifica-item-body h3,
.qualifica-item-body h4 { font-size: 15px; font-weight: 800; color: var(--white); margin-bottom: 7px; line-height: 1.3; }
.qualifica-item-body p { font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.75; margin: 0; }
@media (max-width: 860px) {
  .qualifica-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
  .qualifica-section { padding: 64px 0; }
}
.qualifica-compact { background: rgba(0,0,0,0.025); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 24px 28px; margin-bottom: 28px; }
.qualifica-compact-title { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); margin-bottom: 16px; }
.qualifica-compact-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.qualifica-compact-item:last-child { margin-bottom: 0; }
.qualifica-compact-check { color: var(--green); font-weight: 900; margin-top: 1px; flex-shrink: 0; }
.qualifica-compact-text { font-size: 13px; color: rgba(0,0,0,0.62); line-height: 1.6; }
.qualifica-compact-text strong { color: rgba(0,0,0,0.88); font-weight: 700; }

/* ─── TRUST BAR ─── */
.trust-bar {
  background: var(--white);
  border-top: 1px solid var(--gray2);
  border-bottom: 1px solid var(--gray2);
  padding: 15px 48px;
}
.trust-bar-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-light);
}
.tb-sep { color: #757575; font-weight: 400; }

/* ─── SECTIONS BASE ─── */
.section { padding: 100px 48px; }
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.section-label.blue { color: var(--blue); }
.section-title { font-size: clamp(30px, 3.5vw, 46px); font-weight: 800; color: var(--black); line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 18px; }
.section-subtitle { font-size: 17px; color: var(--text-light); line-height: 1.75; max-width: 640px; }
.section-header { margin-bottom: 64px; }
.center { text-align: center; }
.center .section-subtitle { margin: 0 auto; }

/* ─── SERVIZI GRID (homepage) ─── */
.servizi-section { background: var(--white); }
/* AI-Native banner — sopra la griglia servizi */
.servizi-ai-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  background: var(--black); border-radius: var(--radius);
  box-shadow: 0 0 0 2px var(--blue), 0 8px 32px rgba(74,122,181,0.12);
  padding: 36px 44px; margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.servizi-ai-banner::before {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  width: 1300px; height: 1300px; background: radial-gradient(circle closest-side, rgba(37,99,235,0.2348) 0.0%, rgba(37,99,235,0.2026) 15.0%, rgba(37,99,235,0.1224) 30.0%, rgba(37,99,235,0.0453) 45.0%, rgba(37,99,235,0.0092) 60.0%, rgba(37,99,235,0.001) 75.0%, rgba(37,99,235,0.0) 90.0%, rgba(37,99,235,0.0) 100.0%); opacity: 1; filter: none;
  top: -620px; right: -540px;
}
.servizi-ai-banner::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  width: 1120px; height: 1120px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.1588) 0.0%, rgba(22,163,74,0.1325) 15.0%, rgba(22,163,74,0.0744) 30.0%, rgba(22,163,74,0.0259) 45.0%, rgba(22,163,74,0.0052) 60.0%, rgba(22,163,74,0.0006) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none;
  bottom: -540px; left: -480px;
}
.servizi-ai-banner-left { flex: 1; position: relative; z-index: 1; }
.servizi-ai-banner-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.servizi-ai-banner-name { font-size: 22px; font-weight: 900; color: var(--white); letter-spacing: -0.4px; margin-bottom: 14px; }
.servizi-ai-banner-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.servizi-ai-banner-chips span { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); padding: 4px 12px; border-radius: 100px; }
.servizi-ai-banner-desc { font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.72; max-width: 560px; margin: 0; }
.servizi-ai-banner-cta {
  flex-shrink: 0; position: relative; z-index: 1;
  font-size: 13px; font-weight: 700; color: var(--white);
  background: rgba(74,122,181,0.18); border: 1px solid rgba(74,122,181,0.40);
  padding: 13px 26px; border-radius: 8px; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.servizi-ai-banner-cta:hover { background: rgba(74,122,181,0.32); border-color: var(--blue); }

/* Banner come link cliccabile (variante <a class="servizi-ai-banner servizi-ai-banner--link">) */
a.servizi-ai-banner--link {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: box-shadow 0.25s, transform 0.25s;
}
a.servizi-ai-banner--link:hover {
  box-shadow: 0 0 0 2px var(--blue), 0 12px 40px rgba(74,122,181,0.22);
  transform: translateY(-2px);
}
a.servizi-ai-banner--link:hover .servizi-ai-banner-cta {
  background: rgba(74,122,181,0.32); border-color: var(--blue);
}

@media (max-width: 860px) {
  .servizi-ai-banner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px; }
}

/* Griglia 5 servizi: 2 wide (50%) + 3 narrow (33%) */
.servizi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.servizio-card:nth-child(1), .servizio-card:nth-child(2) { grid-column: span 3; }
.servizio-card:nth-child(3), .servizio-card:nth-child(4), .servizio-card:nth-child(5) { grid-column: span 2; }
@media (max-width: 900px) { .servizi-grid { grid-template-columns: repeat(2,1fr); } .servizio-card:nth-child(n) { grid-column: span 1; } }
@media (max-width: 600px) { .servizi-grid { grid-template-columns: 1fr; } }
.servizi-grid { align-items: stretch; }
.servizio-card {
  background: var(--white); border-radius: var(--radius); padding: 32px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.22s ease; position: relative;
  display: flex; flex-direction: column;
  /* min-height + flex column evita card di altezze diverse nella griglia
     6-col del mockup quando i testi servizio variano in lunghezza */
  min-height: 280px;
}
.servizio-card:hover { box-shadow: 0 0 0 1.5px var(--green), 0 6px 20px rgba(0,0,0,0.08); }
.servizio-card.featured { box-shadow: 0 0 0 2px var(--green), 0 4px 16px rgba(22,163,74,0.08); }
.servizio-card.featured-ai { box-shadow: 0 0 0 2px var(--blue), 0 4px 16px rgba(74,122,181,0.10); display: flex; flex-direction: column; }
.servizio-card.featured-ai:hover { box-shadow: 0 0 0 2px var(--blue), 0 6px 20px rgba(74,122,181,0.14); }
.servizio-card.featured-ai .stack-wrap { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.07); }
.servizio-icon { width: 36px; height: 36px; margin-bottom: 20px; display: flex; align-items: center; color: var(--green); }
.servizio-icon svg { width: 100%; height: 100%; }
.servizio-card.featured-ai .servizio-icon { color: var(--blue); }
.servizio-name { font-size: 17px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.servizio-desc { font-size: 13px; color: var(--text-light); line-height: 1.65; }
.servizio-link { font-size: 12px; font-weight: 700; color: var(--green); margin-top: 14px; display: inline-flex; align-items: center; gap: 4px; }
.servizio-card.featured-ai .servizio-link { color: var(--blue); }

/* Process two-col layout con dark card */
.process-col-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; margin-top: 48px; }
@media (max-width: 900px) { .process-col-grid { grid-template-columns: 1fr; } }

/* AI competenze grid: 3×2 layout, override del 5-servizi nth-child */
.servizi-grid.ai-grid { grid-template-columns: repeat(3, 1fr); }
.servizi-grid.ai-grid .servizio-card { grid-column: span 1 !important; }
.servizi-grid.ai-grid + .servizi-grid.ai-grid { margin-top: 0; }
@media (max-width: 900px) { .servizi-grid.ai-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .servizi-grid.ai-grid { grid-template-columns: 1fr; } }

/* Divisore tra core AI e aree specialistiche */
.ai-competenze-divider { display: flex; align-items: center; gap: 16px; margin: 12px 0; }
.ai-competenze-divider::before, .ai-competenze-divider::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.08); }
.ai-competenze-divider span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-light); white-space: nowrap; }

/* ─── AI NATIVE SECTION (homepage) ─── */
.ai-section {
  background: var(--black); color: var(--white);
  padding: 110px 48px; position: relative; overflow: hidden;
}
.ai-section::before {
  content: ''; position: absolute; pointer-events: none; border-radius: 50%;
  width: 1840px; height: 1840px;
  background: radial-gradient(circle closest-side, rgba(74,122,181,0.5155) 0.0%, rgba(74,122,181,0.4983) 15.0%, rgba(74,122,181,0.4015) 30.0%, rgba(74,122,181,0.2028) 45.0%, rgba(74,122,181,0.0488) 60.0%, rgba(74,122,181,0.0047) 75.0%, rgba(74,122,181,0.0002) 90.0%, rgba(74,122,181,0.0) 100.0%);
  opacity: 1; filter: none;
  top: -800px; right: -740px;
}
.ai-section::after {
  content: ''; position: absolute; pointer-events: none; border-radius: 50%;
  width: 1530px; height: 1530px;
  background: radial-gradient(circle closest-side, rgba(22,163,74,0.4345) 0.0%, rgba(22,163,74,0.4167) 15.0%, rgba(22,163,74,0.3271) 30.0%, rgba(22,163,74,0.1596) 45.0%, rgba(22,163,74,0.0375) 60.0%, rgba(22,163,74,0.0036) 75.0%, rgba(22,163,74,0.0001) 90.0%, rgba(22,163,74,0.0) 100.0%);
  opacity: 1; filter: none;
  bottom: -640px; left: -610px;
}
.ai-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.ai-header { text-align: center; margin-bottom: 80px; }
.ai-label {
  display: inline-block; background: rgba(74,122,181,0.18); color: #8ab4dd;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 18px; border-radius: 100px; margin-bottom: 20px;
  border: 1px solid rgba(74,122,181,0.3);
}
.ai-title { font-size: clamp(32px, 4vw, 54px); font-weight: 900; line-height: 1.1; letter-spacing: -1px; }
.ai-title .g { color: var(--green-light); }
.ai-title .b { color: #8ab4dd; }
.ai-subtitle { font-size: 18px; color: rgba(255,255,255,0.6); max-width: 700px; margin: 20px auto 0; line-height: 1.75; }
.ai-manifesto { border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 28px 0; margin: 0 0 72px; text-align: center; }
.ai-manifesto p { font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.8); }
.ai-manifesto p strong { color: var(--green-light); }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 64px; }
.ai-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 32px; transition: background 0.25s ease, border-color 0.25s ease; }
.ai-card:hover { background: rgba(74,122,181,0.10); border-color: rgba(74,122,181,0.35); }
.ai-card-icon { width: 28px; height: 28px; margin-bottom: 16px; display: flex; align-items: center; color: rgba(255,255,255,0.9); }
.ai-card-icon svg { width: 100%; height: 100%; }
.ai-card-title { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.ai-card-text { font-size: 13px; color: rgba(255,255,255,0.70); line-height: 1.7; }
.ai-process { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 48px; }


/* ─── NUMERI ─── */
.numeri-section { background: var(--white); }
.numeri-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--gray2); border-bottom: 1px solid var(--gray2); }
.numero-card { text-align: left; padding: 48px 32px; border-right: 1px solid var(--gray2); position: relative; }
.numero-card:last-child { border-right: none; }
.numero-card::before { content: ''; position: absolute; top: 0; left: 32px; width: 32px; height: 2px; background: var(--green); }
.numero-val { font-size: clamp(48px, 4.5vw, 68px); font-weight: 900; color: var(--black); line-height: 1; margin-bottom: 10px; letter-spacing: -2px; }
.numero-val .unit { font-size: 0.5em; font-weight: 700; color: var(--green); letter-spacing: 0; }
.numero-label { font-size: 13px; font-weight: 700; color: var(--black); line-height: 1.4; margin-bottom: 8px; }
.numero-note { font-size: 12px; color: var(--text-light); line-height: 1.6; }

/* ─── VALORI ─── */

.valori-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.valore-card { background: var(--white); border-radius: var(--radius); padding: 36px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03); transition: box-shadow 0.22s ease; }
.valore-card:hover { box-shadow: 0 0 0 1.5px var(--green), 0 6px 20px rgba(0,0,0,0.07); }
.valore-icon { width: 28px; height: 28px; margin-bottom: 14px; display: flex; align-items: center; color: var(--green); }
.valore-icon svg { width: 100%; height: 100%; }
.valore-card:nth-child(2) .valore-icon { color: var(--blue); }
.valore-card:nth-child(3) .valore-icon { color: #e67e22; }
.valore-card:nth-child(4) .valore-icon { color: #8e44ad; }
.valore-card:nth-child(5) .valore-icon { color: #c0392b; }
.valore-card:nth-child(6) .valore-icon { color: #16a085; }
.valore-name { font-size: 17px; font-weight: 800; color: var(--black); margin-bottom: 10px; }
.valore-desc { font-size: 14px; color: var(--text-light); line-height: 1.7; }
.valore-proof { font-size: 12px; font-weight: 700; color: var(--green); margin-top: 12px; font-style: italic; }

/* ─── CASE STUDY ─── */
.case-section { background: var(--gray); }
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
/* Colonna: le card della griglia sono alte uguale, e senza questo la CTA
   resta dove finisce il testo invece che in fondo — con testi di lunghezza
   diversa le due CTA finivano a 157 e 37 px dal bordo inferiore. */
.case-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); transition: box-shadow 0.22s ease; }
.case-card:hover { box-shadow: 0 0 0 1.5px var(--green), 0 8px 24px rgba(0,0,0,0.09); }
/* Il gap e' necessario: con space-between e senza gap, appena i due testi
   riempiono la riga la pillola e la dicitura del settore si toccano, e con
   etichette lunghe sembrano un unico blocco. Niente flex-wrap qui: con il wrap
   gli item non possono piu' restringersi e il settore andrebbe a capo anche
   dove lo spazio c'e'. Sotto i 640px si impilano (vedi @media). */
.case-card-header { padding: 28px 32px 0; display: flex; gap: 8px 20px; justify-content: space-between; align-items: flex-start; }
.case-card-header .case-tag { min-width: 0; }
/* Varianti per sfondi CHIARI. Le controparti per sfondi scuri stanno più sotto,
   sotto .case-full-header / .page-hero.
   Il fondo grigio sul selettore nudo serve alla scelta "Default (grigio)" dei
   campi SCF (es. ai_enhancement): senza, la chip restava senza sfondo e con il
   colore ereditato — su header scuro faceva 1.52:1, praticamente invisibile.
   .blue mancava del tutto pur essendo selezionabile (ed è il default del tag
   secondario dei case study): resa identica a .ai, con cui condivide già la
   variante scura. .orange era selezionabile in acf-service-sections (layout
   case_study_inline) senza alcuna regola. */
.case-tag { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; background: var(--gray); color: var(--text-tag); }
.case-tag.ai    { background: var(--blue-light); color: var(--blue); }
.case-tag.blue  { background: var(--blue-light); color: var(--blue); }
.case-tag.green { background: rgba(22,163,74,0.1); color: var(--green); }
.case-tag.orange { background: rgba(234,88,12,0.10); color: #9a3412; }
.case-sector { font-size: 11px; color: var(--text-light); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.case-card-body { flex: 1; display: flex; flex-direction: column; padding: 20px 32px 32px; }
.case-title { font-size: 19px; font-weight: 800; color: var(--black); margin-bottom: 10px; line-height: 1.3; }
.case-desc { font-size: 14px; color: var(--text-light); line-height: 1.7; margin-bottom: 20px; }
.case-results { display: flex; gap: 20px; flex-wrap: wrap; }
.case-result-val { font-size: 22px; font-weight: 900; color: var(--black); }
.case-result-label { font-size: 11px; color: var(--text-light); font-weight: 600; }
.case-metric-strip { display: flex; background: var(--black); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; position: relative; }
.case-metric-strip::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1020px; height: 1020px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.1351) 0.0%, rgba(22,163,74,0.1135) 15.0%, rgba(22,163,74,0.0647) 30.0%, rgba(22,163,74,0.0228) 45.0%, rgba(22,163,74,0.0046) 60.0%, rgba(22,163,74,0.0005) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; top: -440px; right: calc(20% - 360px); }
.case-metric-strip::after  { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 760px; height: 760px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.096) 0.0%, rgba(74,122,181,0.0788) 15.0%, rgba(74,122,181,0.0428) 30.0%, rgba(74,122,181,0.0145) 45.0%, rgba(74,122,181,0.0029) 60.0%, rgba(74,122,181,0.0003) 75.0%, rgba(74,122,181,0.0) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; bottom: -340px; left: calc(10% - 280px); }
.case-metric-strip > * { position: relative; z-index: 1; }
.case-metric-item { flex: 1; padding: 20px 22px; border-right: 1px solid rgba(255,255,255,0.08); }
.case-metric-item:last-child { border-right: none; }
.case-metric-val { font-size: 26px; font-weight: 900; color: var(--white); line-height: 1; }
.case-metric-label { font-size: 11px; color: rgba(255,255,255,0.78); font-weight: 600; line-height: 1.4; margin-top: 6px; }

/* ─── SOCIAL PROOF ─── */
.proof-section {
  background: var(--black);
  position: relative;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}
.proof-section .section-inner {
  padding-left: 48px;
  padding-right: 48px;
}
.proof-section::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(22,163,74,0.22) 0%, transparent 65%);
  top: 0; left: -80px;
  pointer-events: none;
  animation: proof-blob-1 24s ease-in-out infinite alternate;
}
.proof-section::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(26,79,156,0.22) 0%, transparent 65%);
  top: -150px; right: -100px;
  pointer-events: none;
  animation: proof-blob-2 30s ease-in-out infinite alternate;
}
@keyframes proof-blob-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(70px, 50px) scale(1.15); }
}
@keyframes proof-blob-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-60px, -40px) scale(1.10); }
}
.proof-section .section-title { color: var(--white); }

/* ─── Marquee wrapper ─── */
.proof-section .section-inner { position: relative; }
.proof-marquee-wrap {
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding: 8px 0 16px;
}
.proof-fade-left,
.proof-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 280px;
  z-index: 10;
  pointer-events: none;
}
.proof-fade-left {
  left: 0;
  background: linear-gradient(to right, #111111 30%, transparent);
}
.proof-fade-right {
  right: 0;
  background: linear-gradient(to left, #111111 30%, transparent);
}
.proof-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 12px 48px;
  animation: proof-scroll 55s linear infinite;
}
/* Solo dove un puntatore esiste davvero. Su iOS l'`:hover` resta appiccicato
   dopo un tocco e si toglie solo toccando altrove: senza questa condizione,
   sfiorare il nastro mentre si scorre lo lasciava fermo a tempo indeterminato.
   Stesso difetto del menu a tendina, corretto in 0.17.26. */
@media (hover: hover) {
  .proof-marquee-track:hover { animation-play-state: paused; }
}
@keyframes proof-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.proof-card {
  width: 480px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  position: relative; overflow: hidden;
}
.proof-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22,163,74,0.4), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.proof-card:hover {
  border-color: rgba(22,163,74,0.35);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 40px rgba(22,163,74,0.08), 0 20px 60px rgba(0,0,0,0.3);
}
.proof-card:hover::before { opacity: 1; }
/* Variante dark dentro AI Enhancement: niente hover effect (la card non è
   un link cliccabile, l'effetto suggerirebbe interattività che non c'è). */
.proof-card--dark:hover { border-color: rgba(255,255,255,0.10); background: var(--black); box-shadow: none; }
.proof-card--dark:hover::before { opacity: 0; }
/* Toggle "Vedi originale" / "See original" sotto la testimonianza tradotta
   (v0.16.67+). Sotto la author row con separatore, visibile su entrambe le
   varianti di card (marquee homepage + proof-card--dark in AI Enhancement). */
.proof-toggle {
  background: none;
  border: none;
  padding: 12px 0 0;
  margin: 16px 0 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 2;
  transition: color 0.18s;
}
.proof-toggle:hover,
.proof-toggle:focus-visible { color: var(--green); outline: none; }
/* Sulla card marquee (.proof-card senza --dark) il text ha flex:1 e l'author
   margin-top:auto: per evitare che il toggle resti schiacciato, garantiamo
   un minimo padding-bottom alla card così il toggle abbia respiro. */
.proof-card:not(.proof-card--dark) .proof-toggle { margin-top: 18px; }
.proof-card .proof-text { flex: 1; }
.proof-card .proof-author { margin-top: auto; }
.proof-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 52px; line-height: 1;
  color: var(--green);
  opacity: 0.5;
  margin-bottom: 20px; display: block;
  user-select: none;
}
/* line-clamp protegge il marquee da testimonianze troppo lunghe (oltre ~280
   caratteri rompevano l'altezza fissa della card). */
.proof-text { font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 28px; font-style: italic; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; }
.proof-author { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; align-items: center; gap: 14px; }
.proof-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: center 25%;
  flex-shrink: 0;
  border: 2px solid rgba(22,163,74,0.5);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
  /* HiDPI sharpening: lascia al browser scegliere il filtro migliore quando
     scala 88/132 → 44. Su Chrome -webkit-optimize-contrast era utile in
     passato ma è deprecato in favore di "auto", che oggi usa Lanczos. */
  image-rendering: auto;
}
/* Placeholder iniziali quando manca la foto: gradient verde/blu coerente
   con la palette + iniziali in bianco. */
.proof-avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16a34a 0%, #4a7ab5 100%);
  color: rgba(255,255,255,0.95);
  font-size: 14px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.proof-name { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.proof-role { font-size: 11.5px; color: rgba(255,255,255,0.78); font-weight: 500; }

/* ─── AI MANIFESTO DARK HERO ─── */
.ai-manifesto-hero { background: #080f1a; position: relative; overflow: hidden; }
/* Clearance sotto l'header fisso (.site-header: 72px, 64px sotto i 480px).
   L'elemento porta anche la classe .section, che a pari specificità vinceva
   sotto i 1024px solo perché le sue media query sono scritte più avanti nel
   file, riportando il padding-top a 80/64/48px: a 768px il titolo finiva 8px
   SOTTO la barra fissa. Selettore a doppia classe (0,2,0) così vince sempre,
   indipendentemente dall'ordine. Le media query stanno qui e non nei blocchi
   sparsi in fondo al file proprio perché è la dispersione che ha causato il
   bug: la specificità le rende immuni all'ordine, quindi tenerle insieme è
   sicuro e leggibile. Padding laterale e inferiore restano a .section.
   Margine residuo sotto l'header: 68 / 38 / 28 / 24px. */
.section.ai-manifesto-hero { padding-top: 140px; }
@media (max-width: 1024px) { .section.ai-manifesto-hero { padding-top: 110px; } }
@media (max-width: 768px)  { .section.ai-manifesto-hero { padding-top: 100px; } }
@media (max-width: 480px)  { .section.ai-manifesto-hero { padding-top: 88px; } }
.ai-manifesto-hero .hero-mesh { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* ─── AI PROCESS SECTION ─── */
.ai-process-section { background: #080f1a; position: relative; overflow: hidden; }
.ai-process-section::before { content: ''; position: absolute; border-radius: 50%; width: 1660px; height: 1660px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.493) 0.0%, rgba(74,122,181,0.4715) 15.0%, rgba(74,122,181,0.3671) 30.0%, rgba(74,122,181,0.1772) 45.0%, rgba(74,122,181,0.0414) 60.0%, rgba(74,122,181,0.004) 75.0%, rgba(74,122,181,0.0001) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; top: -700px; right: -600px; pointer-events: none; }
.ai-process-section::after  { content: ''; position: absolute; border-radius: 50%; width: 1480px; height: 1480px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.4099) 0.0%, rgba(22,163,74,0.3862) 15.0%, rgba(22,163,74,0.2877) 30.0%, rgba(22,163,74,0.1317) 45.0%, rgba(22,163,74,0.0297) 60.0%, rgba(22,163,74,0.0029) 75.0%, rgba(22,163,74,0.0001) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; bottom: -610px; left: -540px; pointer-events: none; }
/* I 4 step numerati: prima il template imponeva repeat(2,1fr) inline, che
   vinceva su qualsiasi media query. Il layout vive qui.
   Le tre soglie DEVONO essere tutte a questa specificità (0,2,0): le media
   query generiche di .servizi-grid (righe 575/576/2076) sono a (0,1,0), quindi
   da sole perderebbero contro la regola desktop qui sotto e la griglia
   resterebbe a 4 colonne anche su smartphone. Soglie allineate al resto del
   sito: 900px → 2 colonne, 768px → 1 colonna. */
/* Due colonne, non quattro: e' cosi' nel mockup, e la ragione si vede appena
   si prova — ogni passo del processo e' un pallino numerato piu' un paragrafo
   lungo, e a quattro colonne resta una striscia di testo di poco piu' di 200px
   con parole spezzate. La versione a quattro nasceva dall'aver tolto lo style
   inline del mockup (che bloccava le colonne a 2 ignorando le media query) e
   dall'averlo sostituito con la scala generica delle altre griglie, che pero'
   ospitano card corte, non paragrafi.
   Sotto i 768px si scende a una colonna: il mockup ne tiene due anche sul
   telefono, ma li' il testo starebbe in 110px. */
.ai-process-section .servizi-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .ai-process-section .servizi-grid { grid-template-columns: 1fr; } }

/* ─── CLIENTI MARQUEE ─── */
.clienti-section {
  background: #080f1a;
  padding: 72px 0;
  overflow: hidden;
  position: relative;
}
.clienti-mesh { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cm-b1 { position: absolute; width: 1560px; height: 1560px; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(74,122,181,0.2869) 0.0%, rgba(74,122,181,0.2646) 15.0%, rgba(74,122,181,0.1863) 30.0%, rgba(74,122,181,0.0801) 45.0%, rgba(74,122,181,0.0175) 60.0%, rgba(74,122,181,0.0017) 75.0%, rgba(74,122,181,0.0001) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; top: -680px; left: -580px; }
.cm-g1 { position: absolute; width: 1380px; height: 1380px; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(22,163,74,0.2589) 0.0%, rgba(22,163,74,0.233) 15.0%, rgba(22,163,74,0.1546) 30.0%, rgba(22,163,74,0.0626) 45.0%, rgba(22,163,74,0.0132) 60.0%, rgba(22,163,74,0.0013) 75.0%, rgba(22,163,74,0.0001) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; top: -590px; right: -520px; }
.cm-b2 { position: absolute; width: 1180px; height: 1180px; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(26,188,156,0.1337) 0.0%, rgba(26,188,156,0.1152) 15.0%, rgba(26,188,156,0.0694) 30.0%, rgba(26,188,156,0.0257) 45.0%, rgba(26,188,156,0.0052) 60.0%, rgba(26,188,156,0.0005) 75.0%, rgba(26,188,156,0.0) 90.0%, rgba(26,188,156,0.0) 100.0%); opacity: 1; filter: none; bottom: -500px; left: 50%; transform: translateX(-50%); }
.clienti-label {
  font-size: 22px; font-weight: 700; letter-spacing: -0.3px; text-transform: none;
  color: rgba(255,255,255,0.55); text-align: center; margin-bottom: 44px; padding: 0 48px;
  position: relative; z-index: 1;
}
.marquee-wrap { position: relative; z-index: 1; }
.marquee-wrap::before,
.marquee-wrap::after { display: none; }
.marquee-wrap::before,
.marquee-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0;  background: linear-gradient(to right, #080f1a 20%, transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left,  #080f1a 20%, transparent); }
.marquee-row { overflow: hidden; margin-bottom: 12px; }
.marquee-row:last-child { margin-bottom: 0; }
.marquee-track { display: flex; align-items: center; width: max-content; }
.marquee-left  { animation: mq-left  38s linear infinite; }
.marquee-right { animation: mq-right 38s linear infinite; }
@keyframes mq-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes mq-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (hover: hover) {
  .marquee-track:hover { animation-play-state: paused; }
}
.marquee-logo {
  padding: 18px 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.marquee-logo img {
  max-height: 85px; max-width: 180px; width: auto; object-fit: contain;
  filter: grayscale(100%) invert(1); opacity: 0.55;
}

/* ─── WHEREVER OFFICE ─── */
.wherever-section {
  background: #0a1220; padding: 100px 48px;
  position: relative; overflow: hidden;
}
.wherever-section::before {
  content: ''; position: absolute; pointer-events: none; border-radius: 50%;
  width: 1710px; height: 1710px;
  background: radial-gradient(circle closest-side, rgba(22,163,74,0.4963) 0.0%, rgba(22,163,74,0.481) 15.0%, rgba(22,163,74,0.3913) 30.0%, rgba(22,163,74,0.2003) 45.0%, rgba(22,163,74,0.0485) 60.0%, rgba(22,163,74,0.0047) 75.0%, rgba(22,163,74,0.0001) 90.0%, rgba(22,163,74,0.0) 100.0%);
  opacity: 1; filter: none;
  top: -700px; left: -650px;
}
.wherever-section::after {
  content: ''; position: absolute; pointer-events: none; border-radius: 50%;
  width: 1480px; height: 1480px;
  background: radial-gradient(circle closest-side, rgba(74,122,181,0.5075) 0.0%, rgba(74,122,181,0.4782) 15.0%, rgba(74,122,181,0.3562) 30.0%, rgba(74,122,181,0.163) 45.0%, rgba(74,122,181,0.0368) 60.0%, rgba(74,122,181,0.0036) 75.0%, rgba(74,122,181,0.0001) 90.0%, rgba(74,122,181,0.0) 100.0%);
  opacity: 1; filter: none;
  bottom: -610px; right: -560px;
}
.wherever-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.wherever-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green-light); margin-bottom: 14px; }
.wherever-title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 900; color: var(--white); line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 20px; }
.wherever-title span { color: var(--green-light); }
.wherever-desc { font-size: 16px; color: rgba(255,255,255,0.6); line-height: 1.75; margin-bottom: 36px; }
.wherever-features { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.wherever-feature { display: flex; gap: 14px; align-items: flex-start; }
.wherever-feature-icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; background: rgba(22,163,74,0.15); display: flex; align-items: center; justify-content: center; color: var(--green-light); }
.wherever-feature-icon svg { width: 18px; height: 18px; }
.wherever-feature-text h3,
.wherever-feature-text h4 { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.wherever-feature-text p { font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.55; }
.btn-wherever { display: inline-block; background: var(--green); color: var(--white); padding: 14px 32px; border-radius: 7px; font-weight: 700; font-size: 14px; transition: background 0.2s; box-shadow: 0 4px 16px rgba(22,163,74,0.3); }
.btn-wherever:hover { background: var(--green-dark); }
.wherever-visual { display: flex; align-items: center; justify-content: center; min-height: 360px; }
.wo-metrics { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.wo-metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wo-metric {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 28px 24px;
  transition: background 0.2s;
}
.wo-metric:hover { background: rgba(255,255,255,0.09); }
.wo-metric-val {
  font-size: 36px; font-weight: 900; color: #ffffff;
  line-height: 1; letter-spacing: -1px; margin-bottom: 6px;
}
.wo-metric-val span { font-size: 18px; font-weight: 600; color: #22c55e; margin-left: 1px; }
.wo-metric-label { font-size: 12px; color: rgba(255,255,255,0.78); font-weight: 500; line-height: 1.4; }
.wo-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(22,163,74,0.12); border: 1px solid rgba(34,197,94,0.2);
  border-radius: 8px; padding: 10px 16px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px; color: rgba(255,255,255,0.78);
}

/* ─── SOSTENIBILITÀ ─── */
.sostenibilita-section { background: var(--white); }
.sos-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; margin-bottom: 40px; }
.sos-points-row { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 48px; border-top: 1px solid var(--gray2); }
.sos-visual {
  /* Due risoluzioni, non un compromesso: il riquadro e' 510x320 al massimo,
     quindi uno schermo 1x ha bisogno di 520 px di larghezza (25 KB) e uno 2x
     di 1020. La sorgente e' larga 800: e' il tetto reale, oltre si
     ingrandirebbe senza aggiungere dettaglio, quindi la si dichiara come 2x
     ed e' il meglio disponibile per gli schermi densi.
     Si citano i .jpg e non i gemelli .webp di proposito: e' il server a
     scegliere il formato (vedi docs/htaccess-webp.sample), e i due meccanismi
     si combinano — un 2x che accetta WebP scarica dolomiti.jpg.webp.
     La prima riga e' il ripiego per chi non conosce image-set: prende la
     piu' leggera. */
  background: center 40% / cover no-repeat;
  background-image: url('../img/dolomiti-520.jpg');
  background-image: -webkit-image-set(url('../img/dolomiti-520.jpg') 1x, url('../img/dolomiti.jpg') 2x);
  background-image: image-set(url('../img/dolomiti-520.jpg') 1x, url('../img/dolomiti.jpg') 2x);
  border-radius: var(--radius);
  padding: 56px;
  text-align: center;
  border: none;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sos-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(10,18,32,0.25) 0%, rgba(5,10,18,0.50) 100%);
  border-radius: inherit;
}
.sos-visual > * { position: relative; z-index: 1; }
.sos-big-number { font-size: 72px; font-weight: 900; color: #ffffff; line-height: 1; letter-spacing: -2px; }
.sos-big-unit { font-size: 22px; font-weight: 700; color: rgba(255,255,255,0.80); }
.sos-big-label { font-size: 15px; color: rgba(255,255,255,0.85); margin-top: 12px; line-height: 1.5; text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5); }
.sos-points { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.sos-point { display: flex; gap: 14px; align-items: flex-start; }
.sos-point-icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; color: var(--green); }
.sos-point-icon svg { width: 100%; height: 100%; }
.sos-point-body h3,
.sos-point-body h4 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 4px; }
.sos-point-body p { font-size: 13px; color: var(--text-light); line-height: 1.6; }

/* ─── CHI SIAMO preview ─── */


.chisiamo-text p { font-size: 16px; color: var(--text-light); line-height: 1.75; margin-bottom: 16px; }
.chisiamo-certs { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }


/* ─── TEAM SECTION (homepage) ─── */
.team-section { background: var(--gray); }
.team-people-grid { display: grid; grid-template-columns: repeat(var(--team-cols, 4), 1fr); gap: 20px; margin-bottom: 48px; }
.team-person-card {
  background: var(--white); border-radius: var(--radius); padding: 28px 24px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.22s ease;
}
.team-person-card:hover { box-shadow: 0 0 0 1.5px var(--green), 0 6px 20px rgba(0,0,0,0.08); }
.team-person-photo {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: rgba(255,255,255,0.95);
  margin-bottom: 20px;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px color-mix(in srgb, var(--c1) 30%, transparent);
}
/* Variante con foto reale: l'<img> dentro riempie il cerchio con object-fit */
.team-person-photo--img { padding: 0; background: none; color: transparent; overflow: hidden; }
.team-person-photo--img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  display: block; border-radius: 50%;
}
.team-person-name { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 4px; }
.team-person-role { font-size: 13px; color: var(--text-light); margin-bottom: 14px; line-height: 1.4; }
.team-person-tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Pillole coerenti con .case-tag / .form-tag: border-radius pieno e verde brand
   tenue, al posto del vecchio 4px su fondo grigio piatto.
   Il testo usa --green-dark e non --green: le chip stanno su .team-person-card
   (bianca), dove #16a34a su bianco+8% di verde dà 3.02:1, sotto il 4.5:1 che
   WCAG AA chiede a 11px. #15803d sullo stesso fondo dà 4.59:1 e la differenza
   visiva è minima. Il bordo è decorativo, non ha requisiti di contrasto. */
.team-person-tags span {
  font-size: 11px; font-weight: 600;
  color: var(--green-dark);
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.18);
  border-radius: 100px;
  padding: 5px 14px;
}
.team-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--gray2); }
.team-footer-text { font-size: 15px; color: var(--text-light); }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.team-card { background: var(--white); border-radius: var(--radius); padding: 24px; display: flex; gap: 16px; align-items: center; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); transition: box-shadow 0.22s ease; }
.team-card:hover { box-shadow: 0 0 0 1.5px var(--green), 0 4px 16px rgba(0,0,0,0.07); }
.team-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: white; }
.team-name { font-size: 14px; font-weight: 700; color: var(--black); }
.team-role { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.team-more { background: var(--white); border-radius: var(--radius); padding: 24px; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--gray3); color: var(--text-light); font-size: 13px; font-weight: 600; grid-column: span 2; transition: all 0.2s; }
.team-more:hover { border-color: var(--green); color: var(--green); }

/* ─── CTA MULTI-LIVELLO (homepage) ─── */
.cta-section { background: linear-gradient(135deg, var(--black) 0%, #1a2a1a 50%, #1a1a2a 100%); padding: 110px 48px; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; border-radius: 50%; pointer-events: none; width: 1640px; height: 1640px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.2047) 0.0%, rgba(22,163,74,0.1849) 15.0%, rgba(22,163,74,0.1238) 30.0%, rgba(22,163,74,0.0505) 45.0%, rgba(22,163,74,0.0107) 60.0%, rgba(22,163,74,0.0011) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; top: -670px; right: -620px; }
.cta-section::after  { content: ''; position: absolute; border-radius: 50%; pointer-events: none; width: 1280px; height: 1280px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.1132) 0.0%, rgba(22,163,74,0.0967) 15.0%, rgba(22,163,74,0.0571) 30.0%, rgba(22,163,74,0.0207) 45.0%, rgba(22,163,74,0.0042) 60.0%, rgba(22,163,74,0.0004) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; bottom: -520px; left: -500px; }
.cta-inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cta-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green-light); margin-bottom: 20px; }
.cta-title { font-size: clamp(32px, 4vw, 54px); font-weight: 900; color: var(--white); line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px; }
.cta-title span { color: var(--green-light); }
.cta-sub { font-size: 17px; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 560px; margin: 0 auto 56px; }
.cta-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.cta-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 28px; text-align: left; transition: all 0.2s; }
.cta-card:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); transform: translateY(-3px); }
.cta-card-icon { width: 28px; height: 28px; margin-bottom: 12px; display: flex; align-items: center; color: rgba(255,255,255,0.7); }
.cta-card-icon svg { width: 100%; height: 100%; }
.cta-card-title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.cta-card-desc { font-size: 12px; color: rgba(255,255,255,0.78); line-height: 1.6; margin-bottom: 14px; }
.cta-card-action { font-size: 12px; font-weight: 700; color: var(--green-light); }
.cta-main-btn { display: inline-block; background: var(--green); color: var(--white); padding: 18px 48px; border-radius: 7px; font-weight: 700; font-size: 16px; box-shadow: 0 6px 24px rgba(22,163,74,0.4); transition: all 0.2s; }
.cta-main-btn:hover { background: var(--green-dark); transform: translateY(-2px); }
.cta-below { font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 20px; }

/* ─── FOOTER ─── */
.site-footer { background: var(--black); color: rgba(255,255,255,0.55); padding: 72px 48px 40px; }
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer-logo { height: 36px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: 0.85; }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.78); line-height: 1.7; max-width: 280px; margin-bottom: 20px; }
.footer-certs { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-cert { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 4px 10px; letter-spacing: 0.5px; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.78); transition: all 0.2s; }
.footer-social a svg { width: 16px; height: 16px; }
.footer-social a:hover { border-color: var(--green-light); color: var(--green-light); background: rgba(22,163,74,0.1); }
.footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 20px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links li a { font-size: 14px; color: rgba(255,255,255,0.78); transition: color 0.2s; }
.footer-links li a:hover { color: var(--green-light); }
.footer-contact { font-size: 14px; color: rgba(255,255,255,0.78); line-height: 1.8; }
.footer-contact a { color: var(--green-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-copy { font-size: 12px; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,0.78); transition: color 0.18s; }
.footer-legal a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGES
   ═══════════════════════════════════════════════════════════════ */

/* ─── 404 A SCHERMO PIENO ───────────────────────────────────────────────
   Il body va in colonna flessibile: il <main> si prende lo spazio che resta
   e il footer finisce in fondo allo schermo qualunque sia l'altezza, senza
   barra di scorrimento quando il testo ci sta. Prima la testata era alta 511
   px fissi e su un monitor da 1600 rimaneva mezzo schermo vuoto sotto al
   footer, mentre su 900 la pagina scorreva per 90 px — misurato.

   Scoped a `body.error404`, che e' una classe che mette WordPress da se':
   nessuna altra pagina del sito cambia comportamento.

   svh e non vh: su iOS `100vh` conta la finestra CON la barra degli
   indirizzi ritratta, quindi la pagina scorre sempre di quei ~60 px. `svh`
   e' l'altezza piu' piccola, cioe' quella che si vede davvero. Il vh resta
   come ripiego per i browser che svh non lo conoscono. */
body.error404 {
  display: flex; flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
/* Una cella unica che riempie lo spazio: cosi' il fondo scuro della testata
   copre tutta l'area invece di lasciar vedere il bianco della pagina sotto. */
body.error404 > main { flex: 1 1 auto; display: grid; }
.e404 { display: grid; place-items: center; }
.e404-inner { max-width: 620px; padding: 56px 24px; text-align: center; position: relative; z-index: 1; }
.e404-title {
  font-size: clamp(34px, 6vw, 60px); font-weight: 900; color: var(--white);
  line-height: 1.08; letter-spacing: -1px; margin: 10px 0 16px;
  text-wrap: balance;
}
.e404-text { font-size: 16px; color: rgba(255,255,255,0.62); line-height: 1.7; margin-bottom: 32px; }

/* ─── PAGE HERO ─── */
.page-hero {
  padding-top: 72px;
  background: #080f1a;
  position: relative; overflow: hidden;
}
/* Mesh blobs — stesso stile home */
.page-hero::before {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  width: 1840px; height: 1840px;
  background: radial-gradient(circle closest-side, rgba(22,163,74,0.5155) 0.0%, rgba(22,163,74,0.4983) 15.0%, rgba(22,163,74,0.4015) 30.0%, rgba(22,163,74,0.2028) 45.0%, rgba(22,163,74,0.0488) 60.0%, rgba(22,163,74,0.0047) 75.0%, rgba(22,163,74,0.0002) 90.0%, rgba(22,163,74,0.0) 100.0%);
  opacity: 1; filter: none;
  top: -790px; left: -690px;
}
.page-hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  width: 1660px; height: 1660px;
  background: radial-gradient(circle closest-side, rgba(74,122,181,0.5324) 0.0%, rgba(74,122,181,0.5093) 15.0%, rgba(74,122,181,0.3965) 30.0%, rgba(74,122,181,0.1914) 45.0%, rgba(74,122,181,0.0447) 60.0%, rgba(74,122,181,0.0043) 75.0%, rgba(74,122,181,0.0001) 90.0%, rgba(74,122,181,0.0) 100.0%);
  opacity: 1; filter: none;
  top: -680px; right: -650px;
}
/* Dot-grid texture */
.page-hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 72px 48px;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: end;
  position: relative; z-index: 1;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}
.page-hero.full .page-hero-inner { grid-template-columns: 1fr; max-width: 860px; }
.page-hero.full .page-hero-subtitle { max-width: 600px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 12px; color: rgba(255,255,255,0.78); margin-bottom: 20px; flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,0.78); transition: color 0.2s; }
.breadcrumb a:hover { color: rgba(255,255,255,0.75); }
.breadcrumb-sep { opacity: 0.4; }
.page-hero-title { font-size: clamp(34px, 4vw, 56px); font-weight: 900; color: #ffffff; line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px; }
.page-hero-title .g { color: #22c55e; }
.page-hero-title .b { color: #7eb3f5; }
.page-hero-inner .section-label { color: #22c55e; }
.page-hero-subtitle { font-size: 17px; color: rgba(255,255,255,0.60); line-height: 1.75; max-width: 560px; }
.page-hero-right { display: flex; flex-direction: column; gap: 16px; }
/* Griglia dei box statistici (chi-siamo → "TC Consulting in numeri"). Prima il
   layout era interamente in uno style inline sul contenitore, quindi bloccato a
   N colonne fisse a ogni larghezza: dentro .qualifica-section, che ha
   overflow:hidden, il 3° e 4° box venivano tagliati invece di andare a capo,
   senza nemmeno produrre una scrollbar che rendesse evidente il problema.
   Il numero di colonne desktop resta dinamico (dipende da quante statistiche ha
   inserito l'editor) ma passa da --stats-cols: essendo una variabile e non
   grid-template-columns, l'inline non blocca più le media query. */
.page-stats-grid {
  display: grid;
  grid-template-columns: repeat(var(--stats-cols, 4), 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) { .page-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .page-stats-grid { grid-template-columns: 1fr; } }
.page-stat-card {
  background: rgba(255,255,255,0.07); border-radius: var(--radius);
  padding: 24px 28px; border-left: 4px solid #22c55e;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
.page-stat-card.blue { border-left-color: #7eb3f5; }
.page-stat-val { font-size: 38px; font-weight: 900; color: #ffffff; line-height: 1; }
.page-stat-label { font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 4px; }

/* ─── HERO ISO TRUST BAR ─── */
.hero-iso-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 28px;
}
.hero-iso-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.78);
  letter-spacing: 0.5px;
}
.hero-iso-badge svg { opacity: 0.55; flex-shrink: 0; }
.hero-iso-badge.green { border-color: rgba(34,197,94,0.3); color: rgba(34,197,94,0.75); background: rgba(34,197,94,0.06); }

/* ─── MID-PAGE CTA STRIP ─── */
.mid-cta-strip {
  background: var(--gray);
  border: 1px solid var(--gray2);
  border-radius: var(--radius);
  padding: 32px 40px;
  /* justify-content: center e non space-between. Su una riga sola non cambia
     nulla, perché .mid-cta-strip-text ha flex:1 e assorbe tutto lo spazio
     libero spingendo il bottone a destra da sé. Quando invece il contenuto va
     a capo, il bottone resta solo sulla sua riga: space-between lo incollava
     a sinistra, center lo centra. Vale a qualsiasi larghezza e con qualsiasi
     lunghezza di etichetta, quindi copre anche EN/DE dove il bottone è più
     largo e il wrap scatta prima della soglia della media query sotto. */
  display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap;
  margin: 56px 0;
}
.mid-cta-strip-text { flex: 1; min-width: 260px; }
.mid-cta-strip-label { font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.mid-cta-strip-title { font-size: 20px; font-weight: 800; color: var(--black); line-height: 1.3; }
.mid-cta-strip-sub { font-size: 14px; color: var(--text-light); margin-top: 6px; }
.mid-cta-strip .btn-primary { white-space: nowrap; flex-shrink: 0; }
/* Sotto i 768px la CTA diventa esplicitamente impilata e centrata. Vale anche
   per la variante .mid-cta-dark, che condivide struttura e classi.
   Deve stare DOPO le regole base qui sopra: sono tutte a specificità (0,1,0) e
   le media query non ne aggiungono, quindi da sopra il min-width:260px vincerebbe.
   min-width: 0 perché a 375px il contenuto disponibile dentro lo strip scende a
   ~247px e i 260px lo farebbero sbordare; padding ridotto per lo stesso motivo. */
@media (max-width: 768px) {
  .mid-cta-strip { flex-direction: column; align-items: center; text-align: center; padding: 28px 24px; }
  .mid-cta-strip-text { text-align: center; min-width: 0; }
  /* nowrap è giusto in riga accanto al testo, ma con etichette lunghe (EN/DE)
     su schermo stretto forzerebbe overflow: qui il bottone può andare a capo. */
  .mid-cta-strip .btn-primary { white-space: normal; }
}

/* ─── CONTENT LAYOUTS ─── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.two-col.center-v { align-items: center; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.three-col .card-simple { display: flex; flex-direction: column; }


/* ─── GENERIC CARDS ─── */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card-simple { background: var(--white); border-radius: var(--radius); padding: 28px 32px; border: 1.5px solid var(--gray2); transition: all 0.2s; }
.card-simple:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-simple-icon { width: 28px; height: 28px; margin-bottom: 12px; display: flex; align-items: center; color: var(--green); }
.card-simple-icon svg { width: 100%; height: 100%; }
.card-simple-title { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.card-simple-text { font-size: 13px; color: var(--text-light); line-height: 1.65; }

/* ─── PROCESS STEPS (vertical) ─── */
.process-list { display: flex; flex-direction: column; gap: 0; }
.process-step { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 36px; position: relative; }
.process-step:last-child { padding-bottom: 0; }
.process-step:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px; background: var(--gray2); }
.process-step-num { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--green); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; z-index: 1; }
.process-step-body h3 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 6px; margin-top: 8px; }
.process-step-body p { font-size: 14px; color: var(--text-light); line-height: 1.65; }

/* ─── FEATURE LIST ─── */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text); line-height: 1.6; }
.feature-list li::before { content: '✓'; color: var(--green); font-weight: 900; flex-shrink: 0; margin-top: 2px; }
.feature-list.blue li::before { color: var(--blue); }

/* ─── FEATURE CARDS (3-col, service pages) ─── */
/* Card statica: niente hover interattivo (la sezione non ha link cliccabili,
   sarebbe un falso segnale visivo). Mantenuto solo per garanzie-dark dove la
   card è leggermente translucida. */
.feature-card { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); transition: box-shadow 0.22s, transform 0.22s; }
/* Hover: bordo verde + leggero lift (mockup parity). La variante highlighted
   conserva il bordo blu (non sovrascrivibile da hover). */
.feature-card:not(.feature-card--highlighted):hover { box-shadow: 0 0 0 2px var(--green), 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.feature-card-icon { width: 32px; height: 32px; margin-bottom: 16px; display: flex; align-items: center; color: var(--green); }
.feature-card-icon svg { width: 100%; height: 100%; }
.feature-card-title { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; }

.feature-card-desc { font-size: 13px; color: var(--text-light); line-height: 1.65; }
/* Variante "highlighted": prima card delle garanzie con solo sfondo
   azzurro chiaro (no bordo né box-shadow). Icona + eyebrow virano sul blu. */
.feature-card--highlighted { background: rgba(74,122,181,0.07); box-shadow: none; }
.feature-card--highlighted .feature-card-icon { color: var(--blue); }
.feature-card-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--green); margin-bottom: 8px; }
.feature-card--highlighted .feature-card-eyebrow { color: var(--blue); }

/* Garanzie dark section */
.garanzie-dark { background: var(--black) !important; position: relative; overflow: hidden; }
.garanzie-dark::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1740px; height: 1740px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.1363) 0.0%, rgba(22,163,74,0.128) 15.0%, rgba(22,163,74,0.0945) 30.0%, rgba(22,163,74,0.0428) 45.0%, rgba(22,163,74,0.0096) 60.0%, rgba(22,163,74,0.0009) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; top: -770px; right: -720px; }
.garanzie-dark::after  { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1380px; height: 1380px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.1109) 0.0%, rgba(74,122,181,0.0999) 15.0%, rgba(74,122,181,0.0663) 30.0%, rgba(74,122,181,0.0268) 45.0%, rgba(74,122,181,0.0057) 60.0%, rgba(74,122,181,0.0006) 75.0%, rgba(74,122,181,0.0) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; bottom: -590px; left: -540px; }
.garanzie-dark .section-label { color: #22c55e !important; }
.garanzie-dark .section-title { color: var(--white) !important; }
.garanzie-dark .section-subtitle { color: rgba(255,255,255,0.60) !important; }
.garanzie-dark .feature-card { background: rgba(255,255,255,0.05); box-shadow: none; border: 1px solid rgba(255,255,255,0.09); }
.garanzie-dark .feature-card-icon { color: #22c55e; }
.garanzie-dark .feature-card-title { color: var(--white); }
.garanzie-dark .feature-card-desc { color: rgba(255,255,255,0.55); }
/* Garanzie grid con lead full-width */
.garanzie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.garanzie-grid .garanzie-lead { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 24px; border-color: rgba(22,163,74,0.35) !important; background: rgba(22,163,74,0.09) !important; }
.garanzie-grid .garanzie-lead .feature-card-icon { flex-shrink: 0; margin-bottom: 0; margin-top: 4px; }
.garanzie-lead-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #22c55e; margin-bottom: 8px; }
/* Confronto dark section */
.confronto-dark { background: var(--black) !important; position: relative; overflow: hidden; }
.confronto-dark::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width:1560px; height:1560px; background:radial-gradient(circle closest-side, rgba(74,122,181,0.0956) 0.0%, rgba(74,122,181,0.0882) 15.0%, rgba(74,122,181,0.0621) 30.0%, rgba(74,122,181,0.0267) 45.0%, rgba(74,122,181,0.0058) 60.0%, rgba(74,122,181,0.0006) 75.0%, rgba(74,122,181,0.0) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity:1; filter:none; top:-660px; left:-630px; }
.confronto-dark::after  { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1200px; height: 1200px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.0778) 0.0%, rgba(22,163,74,0.0679) 15.0%, rgba(22,163,74,0.0419) 30.0%, rgba(22,163,74,0.0159) 45.0%, rgba(22,163,74,0.0033) 60.0%, rgba(22,163,74,0.0003) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; bottom: -500px; right: -480px; }
.confronto-dark > .section-inner { position: relative; z-index: 1; }
.confronto-dark .section-label { color: #22c55e; }
.confronto-dark .section-title { color: var(--white); }
.confronto-dark .comparison-col-bad { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); }
.confronto-dark .comparison-col-bad .comparison-col-header { background: transparent; border-bottom-color: rgba(255,255,255,0.08); }
.confronto-dark .comparison-label { color: rgba(255,255,255,0.78); }
.confronto-dark .comparison-col-good .comparison-label { color: white; }
.confronto-dark .comparison-list li.neg { color: rgba(255,255,255,0.78); }
/* AI manifesto hero stats */
.ai-hero-stats { display: flex; justify-content: center; border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius); overflow: hidden; margin: 36px auto 52px; max-width: 680px; }
.ai-hero-stat { flex: 1; padding: 22px 28px; border-right: 1px solid rgba(255,255,255,0.08); text-align: center; }
.ai-hero-stat:last-child { border-right: none; }
.ai-hero-stat-val { font-size: 30px; font-weight: 900; color: var(--white); line-height: 1; }
.ai-hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.78); margin-top: 8px; line-height: 1.4; }
@media (max-width: 600px) { .ai-hero-stats { flex-direction: column; } .ai-hero-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); } .ai-hero-stat:last-child { border-bottom: none; } }

/* Servizio-card.featured con flex column (per stack-wrap in fondo) */
.servizio-card.featured { display: flex; flex-direction: column; }
.servizio-card.featured .stack-wrap { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.07); }

/* ─── TECH STACK TAGS ─── */
.stack-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.stack-tag { background: var(--gray); border: 1px solid var(--gray2); border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text); }
.stack-criteria { display: flex; flex-direction: column; gap: 18px; }
.stack-criterion { display: flex; gap: 16px; align-items: flex-start; }
.stack-criterion-num { font-size: 11px; font-weight: 800; color: var(--blue); min-width: 24px; padding-top: 2px; letter-spacing: 0.5px; }
.stack-criterion strong { font-size: 13px; font-weight: 700; color: var(--black); display: block; margin-bottom: 2px; }
.stack-criterion p { font-size: 12px; color: var(--text-light); line-height: 1.55; margin: 0; }

/* ─── TECH CRITERIA DARK CARD ─── */
.tech-criteria-card { background: var(--black); border-radius: var(--radius); position: relative; overflow: hidden; }
.tech-criteria-card::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1280px; height: 1280px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.5664) 0.0%, rgba(74,122,181,0.5171) 15.0%, rgba(74,122,181,0.3548) 30.0%, rgba(74,122,181,0.1485) 45.0%, rgba(74,122,181,0.0319) 60.0%, rgba(74,122,181,0.0032) 75.0%, rgba(74,122,181,0.0001) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; top: -540px; right: -480px; }
.tech-criteria-card::after  { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1100px; height: 1100px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.4284) 0.0%, rgba(22,163,74,0.3785) 15.0%, rgba(22,163,74,0.2407) 30.0%, rgba(22,163,74,0.0935) 45.0%, rgba(22,163,74,0.0194) 60.0%, rgba(22,163,74,0.002) 75.0%, rgba(22,163,74,0.0001) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; bottom: -460px; left: -420px; }
.tech-criteria-inner { padding: 36px; position: relative; z-index: 1; }
.tech-criteria-card h3 { font-size: 21px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.tech-criteria-card > .tech-criteria-inner > p { font-size: 15px; color: rgba(255,255,255,0.78); margin-bottom: 24px; line-height: 1.65; }
.tech-criteria-card .stack-criterion-num { color: #8ab4dd; }
.tech-criteria-card .stack-criterion strong { font-size: 15px; color: rgba(255,255,255,0.88); }
.tech-criteria-card .stack-criterion p { font-size: 13px; color: rgba(255,255,255,0.78); }
.tech-criteria-divider { border: none; border-top: 1px solid rgba(255,255,255,0.10); margin: 28px 0; }
.tech-criteria-lead { display: flex; gap: 14px; align-items: flex-start; }
.tech-criteria-lead-icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--green-light); margin-top: 2px; }
.tech-criteria-lead-icon svg { width: 100%; height: 100%; }
.tech-criteria-lead p { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.65; font-weight: 500; }
.tech-criteria-lead strong { color: var(--white); font-weight: 700; }
.tech-criteria-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #22c55e; margin-bottom: 14px; }
.si-sys-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.78); margin-bottom:8px; }
.stack-tag.si-tag { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }
/* Variante "chip cluster" dentro tech-criteria-card: usata quando il
   tech_items.desc del seeder è una lista separata da " · ". Renderizza
   un'etichetta sezione + chip stack-tag invece dei numeri 01/02/03. */
.stack-criterion--chips { display: block; padding: 0; }
/* Quando la stack-criteria contiene gruppi "chips" (mockup system-integration
   "Sistemi che integriamo"), gap stretto come da mockup (16px) — i cluster
   ERP/CRM/E-commerce/Logistica devono respirare meno del default (18px). */
.stack-criteria:has(.stack-criterion--chips) { gap: 16px; }
/* ─── VERTICAL EXPERTISE CARDS ─── */
.vertical-card-icon { width: 32px; height: 32px; color: var(--green-light); margin-bottom: 20px; }
.vertical-card-icon svg { width: 100%; height: 100%; }
.tech-criteria-card--health::before    { background:radial-gradient(circle closest-side, rgba(22,163,74,0.5664) 0.0%, rgba(22,163,74,0.5171) 15.0%, rgba(22,163,74,0.3548) 30.0%, rgba(22,163,74,0.1485) 45.0%, rgba(22,163,74,0.0319) 60.0%, rgba(22,163,74,0.0032) 75.0%, rgba(22,163,74,0.0001) 90.0%, rgba(22,163,74,0.0) 100.0%); }
.tech-criteria-card--health::after     { background:radial-gradient(circle closest-side, rgba(13,148,136,0.4284) 0.0%, rgba(13,148,136,0.3785) 15.0%, rgba(13,148,136,0.2407) 30.0%, rgba(13,148,136,0.0935) 45.0%, rgba(13,148,136,0.0194) 60.0%, rgba(13,148,136,0.002) 75.0%, rgba(13,148,136,0.0001) 90.0%, rgba(13,148,136,0.0) 100.0%); }
.tech-criteria-card--logistics::before { background:radial-gradient(circle closest-side, rgba(74,122,181,0.5664) 0.0%, rgba(74,122,181,0.5171) 15.0%, rgba(74,122,181,0.3548) 30.0%, rgba(74,122,181,0.1485) 45.0%, rgba(74,122,181,0.0319) 60.0%, rgba(74,122,181,0.0032) 75.0%, rgba(74,122,181,0.0001) 90.0%, rgba(74,122,181,0.0) 100.0%); }
.tech-criteria-card--logistics::after  { background:radial-gradient(circle closest-side, rgba(22,163,74,0.4284) 0.0%, rgba(22,163,74,0.3785) 15.0%, rgba(22,163,74,0.2407) 30.0%, rgba(22,163,74,0.0935) 45.0%, rgba(22,163,74,0.0194) 60.0%, rgba(22,163,74,0.002) 75.0%, rgba(22,163,74,0.0001) 90.0%, rgba(22,163,74,0.0) 100.0%); }

/* ─── AI ENHANCEMENT BOX ─── */
.ai-enhance-box {
  background: var(--black); border-radius: var(--radius); padding: 48px;
  position: relative; overflow: hidden;
}
.ai-enhance-box::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1200px; height: 1200px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.3027) 0.0%, rgba(74,122,181,0.2639) 15.0%, rgba(74,122,181,0.1631) 30.0%, rgba(74,122,181,0.0617) 45.0%, rgba(74,122,181,0.0127) 60.0%, rgba(74,122,181,0.0013) 75.0%, rgba(74,122,181,0.0001) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; top: -520px; right: -500px; }
.ai-enhance-box::after  { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1070px; height: 1070px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.2378) 0.0%, rgba(22,163,74,0.206) 15.0%, rgba(22,163,74,0.1256) 30.0%, rgba(22,163,74,0.0469) 45.0%, rgba(22,163,74,0.0096) 60.0%, rgba(22,163,74,0.001) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; bottom: -460px; left: -440px; }
.ai-enhance-label { display: inline-block; background: rgba(74,122,181,0.2); color: #8ab4dd; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; border: 1px solid rgba(74,122,181,0.3); }
.ai-enhance-title { font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 12px; }

.ai-enhance-items { display: flex; flex-direction: column; gap: 12px; }
.ai-enhance-item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.6; }
.ai-enhance-item-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; color: var(--green-light); }
.ai-enhance-item-icon svg { width: 100%; height: 100%; }
.ai-enhance-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green-light); margin-top: 24px; transition: gap 0.2s; }
.ai-enhance-link:hover { gap: 10px; }

/* ─── MINI CTA STRIP ─── */


/* ─── CONTATTO PAGE ─── */
.contatto-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.contatto-form-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 48px; }
.contatto-info { display: flex; flex-direction: column; gap: 24px; }
.info-block { background: var(--gray); border-radius: var(--radius); padding: 28px; }
.info-block-icon { width: 24px; height: 24px; margin-bottom: 10px; display: flex; align-items: center; color: var(--green); }
.info-block-icon svg { width: 100%; height: 100%; }
.info-block-title { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.info-block-text { font-size: 14px; color: var(--text-light); line-height: 1.7; }
.info-block-text a { color: var(--green); font-weight: 600; }
.cta-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 64px; }
.cta-option-card { background: var(--white); border: 1.5px solid var(--gray2); border-radius: var(--radius); padding: 32px 28px; text-align: center; transition: all 0.22s; }
.cta-option-card:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-3px); }
.cta-option-icon { width: 36px; height: 36px; margin-bottom: 14px; display: flex; align-items: center; color: var(--green); }
.cta-option-icon svg { width: 100%; height: 100%; }
.cta-option-title { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
.cta-option-desc { font-size: 13px; color: var(--text-light); line-height: 1.65; margin-bottom: 20px; }

/* Qualifica "Chi lavora bene con noi": variante scura (mockup contatti). */
.qualifica-compact--dark { background: var(--black); border-color: rgba(255,255,255,0.08); }
.qualifica-compact--dark .qualifica-compact-text { color: rgba(255,255,255,0.62); }
.qualifica-compact--dark .qualifica-compact-text strong { color: rgba(255,255,255,0.92); }

/* Card info contatto boxata: un unico riquadro bianco con righe e divisori
   (mockup), in alternativa ai .info-block separati. */
.contatto-info-card { background: var(--white); border: 1px solid var(--gray2); border-radius: 12px; padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }
.contatto-info-row { display: flex; align-items: flex-start; gap: 14px; }
.contatto-info-ico { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--green); }
.contatto-info-ico svg { width: 100%; height: 100%; }
.contatto-info-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); margin-bottom: 3px; }
.contatto-info-val { font-size: 13.5px; color: #374151; line-height: 1.5; }
.contatto-info-val a { color: var(--green); font-weight: 600; text-decoration: none; }
.contatto-info-sep { height: 1px; background: var(--gray); }
.contatto-info-foot { font-size: 12.5px; color: var(--text-light); line-height: 1.6; text-align: center; }
.contatto-info-foot a { color: var(--green); font-weight: 600; text-decoration: none; }

/* ─── CHI SIAMO PAGE ─── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: 32px; padding-bottom: 40px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px; background: var(--gray2); }
.timeline-year { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--green); color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; z-index: 1; }
.timeline-body h3 { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 6px; margin-top: 8px; }
.timeline-body p { font-size: 14px; color: var(--text-light); line-height: 1.65; }

/* ─── FULL OUTSOURCING PAGE ─── */
/* SLA Table */
.sla-table { border: 1px solid var(--gray2); border-radius: var(--radius); overflow: hidden; margin-top: 48px; }
.sla-row { display: grid; grid-template-columns: 160px 1fr 120px 140px 160px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--gray2); gap: 16px; }
.sla-row:last-child { border-bottom: none; }
.sla-header { background: var(--gray); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-tag); padding: 14px 24px; }
.sla-critical { background: rgba(239,68,68,0.04); }
.sla-col-desc { font-size: 13px; color: var(--text-light); line-height: 1.5; }
.sla-col-response, .sla-col-resolve, .sla-col-channel { font-size: 13px; font-weight: 600; color: var(--text); }
.sla-highlight { color: var(--green); font-weight: 800; font-size: 15px; }
.sla-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
.sla-badge.critical { background: rgba(239,68,68,0.12); color: #a81717; }
.sla-badge.high     { background: rgba(245,158,11,0.12); color: #8a5309; }
.sla-badge.medium   { background: rgba(59,130,246,0.12); color: #2563eb; }
.sla-badge.low      { background: rgba(0,0,0,0.06); color: var(--text-light); }

/* Process steps (full-outsourcing — bordered table layout) */
.process-steps { display: flex; flex-direction: column; gap: 0; margin-top: 56px; border: 1px solid var(--gray2); border-radius: var(--radius); overflow: hidden; }
.process-steps .process-step { display: grid; grid-template-columns: 80px 1fr; gap: 0; background: var(--white); border-bottom: 1px solid var(--gray2); align-items: stretch; }
.process-steps .process-step:last-child { border-bottom: none; }
.process-steps .process-step-num { font-size: 13px; font-weight: 800; color: var(--green); letter-spacing: 1px; padding: 38px 0 36px 40px; border-right: 1px solid var(--gray2); display: flex; align-items: flex-start; width: auto; height: auto; border-radius: 0; background: transparent; }


/* ─── PROCESS SECTION BLOBS ─── */
.process-section { position: relative; overflow: hidden; }
.process-section::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1560px; height: 1560px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.0861) 0.0%, rgba(22,163,74,0.0794) 15.0%, rgba(22,163,74,0.0559) 30.0%, rgba(22,163,74,0.024) 45.0%, rgba(22,163,74,0.0052) 60.0%, rgba(22,163,74,0.0005) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; top: -680px; right: -630px; }
.process-section::after  { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1380px; height: 1380px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.1017) 0.0%, rgba(74,122,181,0.0915) 15.0%, rgba(74,122,181,0.0607) 30.0%, rgba(74,122,181,0.0246) 45.0%, rgba(74,122,181,0.0052) 60.0%, rgba(74,122,181,0.0005) 75.0%, rgba(74,122,181,0.0) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; bottom: -590px; left: -540px; }
/* Mockup full-outsourcing: processo con sfondo bianco — nascondi i blob
   ambient (verdi/blu) che fanno sembrare il bg sporco. */
.process-section[style*="--white"]::before,
.process-section[style*="--white"]::after { display: none; }

/* ─── MID-CTA DARK SECTION ─── */
.mid-cta-dark { background: var(--black) !important; position: relative; overflow: hidden; }
.mid-cta-dark::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1680px; height: 1680px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.2094) 0.0%, rgba(22,163,74,0.1924) 15.0%, rgba(22,163,74,0.1341) 30.0%, rgba(22,163,74,0.057) 45.0%, rgba(22,163,74,0.0124) 60.0%, rgba(22,163,74,0.0012) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; top: -720px; left: -670px; }
.mid-cta-dark::after  { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1440px; height: 1440px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.173) 0.0%, rgba(74,122,181,0.1603) 15.0%, rgba(74,122,181,0.1141) 30.0%, rgba(74,122,181,0.0497) 45.0%, rgba(74,122,181,0.0109) 60.0%, rgba(74,122,181,0.0011) 75.0%, rgba(74,122,181,0.0) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; bottom: -590px; right: -540px; }
.mid-cta-dark .mid-cta-strip { background: transparent; border-color: rgba(255,255,255,0.10); }
.mid-cta-dark .mid-cta-strip-title { color: var(--white); }
.mid-cta-dark .mid-cta-strip-label { color: #22c55e; }
.mid-cta-dark .mid-cta-strip-sub { color: rgba(255,255,255,0.78); }
.mid-cta-dark > .section-inner { position: relative; z-index: 1; }

/* ─── GARANZIE SECTION BLOB ─── */
.garanzie-section { position: relative; overflow: hidden; }
.garanzie-section::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 1740px; height: 1740px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.0681) 0.0%, rgba(74,122,181,0.064) 15.0%, rgba(74,122,181,0.0473) 30.0%, rgba(74,122,181,0.0214) 45.0%, rgba(74,122,181,0.0048) 60.0%, rgba(74,122,181,0.0005) 75.0%, rgba(74,122,181,0.0) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity: 1; filter: none; top: -770px; right: -720px; }

/* ─── FEATURE CARD DESC ─── */
.feature-card-desc { font-size: 13px; color: var(--text-light); line-height: 1.65; }

/* Comparison grid */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.comparison-col { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray2); }
.comparison-col-header { padding: 20px 28px; border-bottom: 1px solid var(--gray2); }
.comparison-col-bad .comparison-col-header { background: var(--white); }
.comparison-col-good .comparison-col-header { background: var(--green); border-bottom: none; }
.comparison-label { font-size: 13px; font-weight: 800; color: var(--black); }
.comparison-col-good .comparison-label { color: white; }
.comparison-list { list-style: none; padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.comparison-list li { font-size: 14px; line-height: 1.5; padding-left: 24px; position: relative; }
.comparison-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; }
.comparison-list li.neg { color: var(--text-light); }
.comparison-list li.neg::before { background: rgba(239,68,68,0.25); border: 1.5px solid rgba(239,68,68,0.4); }
.comparison-list li.pos { color: rgba(255,255,255,0.85); }
.comparison-list li.pos::before { background: var(--green); }
.comparison-col-good { background: var(--black); border: none; box-shadow: 0 0 0 2px var(--green), 0 8px 32px rgba(22,163,74,0.14); position: relative; overflow: hidden; }
.comparison-col-good::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width: 960px; height: 960px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.2767) 0.0%, rgba(22,163,74,0.2413) 15.0%, rgba(22,163,74,0.1491) 30.0%, rgba(22,163,74,0.0564) 45.0%, rgba(22,163,74,0.0116) 60.0%, rgba(22,163,74,0.0012) 75.0%, rgba(22,163,74,0.0001) 90.0%, rgba(22,163,74,0.0) 100.0%); opacity: 1; filter: none; top: -400px; right: -380px; }

/* ─── ARTICLE PAGE ─── */
.article-hero { background: var(--black); padding: 72px 0 80px; position: relative; overflow: hidden; }
.article-hero::before { content: ''; position: absolute; border-radius: 50%; pointer-events: none; width: 1520px; height: 1520px; top: -680px; left: -600px; }
.article-hero::after  { content: ''; position: absolute; border-radius: 50%; pointer-events: none; width: 1320px; height: 1320px; top: -580px; right: -530px; }

/* Architettura — blu + ciano */
.article-hero--arch::before { background: radial-gradient(circle closest-side, rgba(37,99,235,0.1971) 0.0%, rgba(37,99,235,0.1885) 15.0%, rgba(37,99,235,0.1465) 30.0%, rgba(37,99,235,0.0706) 45.0%, rgba(37,99,235,0.0165) 60.0%, rgba(37,99,235,0.0016) 75.0%, rgba(37,99,235,0.0001) 90.0%, rgba(37,99,235,0.0) 100.0%); opacity: 1; filter: none; }
.article-hero--arch::after  { background: radial-gradient(circle closest-side, rgba(6,182,212,0.1449) 0.0%, rgba(6,182,212,0.135) 15.0%, rgba(6,182,212,0.0974) 30.0%, rgba(6,182,212,0.043) 45.0%, rgba(6,182,212,0.0095) 60.0%, rgba(6,182,212,0.0009) 75.0%, rgba(6,182,212,0.0) 90.0%, rgba(6,182,212,0.0) 100.0%); opacity: 1; filter: none; }

/* AI & Innovazione — viola + rosa */
.article-hero--ai::before { background: radial-gradient(circle closest-side, rgba(109,40,217,0.2168) 0.0%, rgba(109,40,217,0.2073) 15.0%, rgba(109,40,217,0.1611) 30.0%, rgba(109,40,217,0.0776) 45.0%, rgba(109,40,217,0.0181) 60.0%, rgba(109,40,217,0.0018) 75.0%, rgba(109,40,217,0.0001) 90.0%, rgba(109,40,217,0.0) 100.0%); opacity: 1; filter: none; }
.article-hero--ai::after  { background: radial-gradient(circle closest-side, rgba(236,72,153,0.1352) 0.0%, rgba(236,72,153,0.126) 15.0%, rgba(236,72,153,0.0909) 30.0%, rgba(236,72,153,0.0402) 45.0%, rgba(236,72,153,0.0089) 60.0%, rgba(236,72,153,0.0009) 75.0%, rgba(236,72,153,0.0) 90.0%, rgba(236,72,153,0.0) 100.0%); opacity: 1; filter: none; }

/* Soluzioni IT — verde + lime */
.article-hero--it::before { background: radial-gradient(circle closest-side, rgba(5,150,105,0.2365) 0.0%, rgba(5,150,105,0.2261) 15.0%, rgba(5,150,105,0.1758) 30.0%, rgba(5,150,105,0.0847) 45.0%, rgba(5,150,105,0.0197) 60.0%, rgba(5,150,105,0.0019) 75.0%, rgba(5,150,105,0.0001) 90.0%, rgba(5,150,105,0.0) 100.0%); opacity: 1; filter: none; }
.article-hero--it::after  { background: radial-gradient(circle closest-side, rgba(132,204,22,0.1256) 0.0%, rgba(132,204,22,0.117) 15.0%, rgba(132,204,22,0.0844) 30.0%, rgba(132,204,22,0.0373) 45.0%, rgba(132,204,22,0.0083) 60.0%, rgba(132,204,22,0.0008) 75.0%, rgba(132,204,22,0.0) 90.0%, rgba(132,204,22,0.0) 100.0%); opacity: 1; filter: none; }

/* Team & Processo — ambra + arancio */
.article-hero--team::before { background: radial-gradient(circle closest-side, rgba(217,119,6,0.2168) 0.0%, rgba(217,119,6,0.2073) 15.0%, rgba(217,119,6,0.1611) 30.0%, rgba(217,119,6,0.0776) 45.0%, rgba(217,119,6,0.0181) 60.0%, rgba(217,119,6,0.0018) 75.0%, rgba(217,119,6,0.0001) 90.0%, rgba(217,119,6,0.0) 100.0%); opacity: 1; filter: none; }
.article-hero--team::after  { background: radial-gradient(circle closest-side, rgba(239,68,68,0.1449) 0.0%, rgba(239,68,68,0.135) 15.0%, rgba(239,68,68,0.0974) 30.0%, rgba(239,68,68,0.043) 45.0%, rgba(239,68,68,0.0095) 60.0%, rgba(239,68,68,0.0009) 75.0%, rgba(239,68,68,0.0) 90.0%, rgba(239,68,68,0.0) 100.0%); opacity: 1; filter: none; }
.article-hero-inner { max-width: 800px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 1; }
.article-hero-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.article-hero-sep { color: rgba(255,255,255,0.45); font-size: 12px; }
.article-read-time { font-size: 12px; color: rgba(255,255,255,0.78); font-weight: 600; }
.article-hero-date { font-size: 12px; color: rgba(255,255,255,0.78); font-weight: 600; }
/* word-break protegge titoli articolo da overflow su mobile (titoli con
   parole molto lunghe tipo URL o nomi tecnici di 30+ char). overflow-wrap
   è il modern equivalent compatibile con tutti i browser moderni. */
.article-hero-title { font-size: clamp(26px, 3.5vw, 46px); font-weight: 900; color: var(--white); line-height: 1.15; margin-bottom: 24px; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.article-hero-lead { font-size: 18px; color: rgba(255,255,255,0.58); line-height: 1.75; margin-bottom: 40px; }
.article-author-row { display: flex; align-items: center; gap: 14px; }
.article-author-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #0d9488); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: white; flex-shrink: 0; }
.article-author-name { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.85); }
.article-author-role { font-size: 12px; color: rgba(255,255,255,0.78); margin-top: 2px; }

.article-body { background: var(--white); padding: 72px 0 96px; }
.article-content { max-width: 720px; margin: 0 auto; padding: 0 48px; }
.article-content h2 { font-size: 22px; font-weight: 800; color: var(--black); margin: 52px 0 16px; line-height: 1.3; }
.article-content h3 { font-size: 17px; font-weight: 700; color: var(--black); margin: 36px 0 12px; line-height: 1.35; }
.article-content p { font-size: 17px; color: #374151; line-height: 1.82; margin-bottom: 24px; }
.article-content ul, .article-content ol { padding-left: 24px; margin-bottom: 24px; }
.article-content li { font-size: 17px; color: #374151; line-height: 1.75; margin-bottom: 8px; }
.article-content strong { color: var(--black); font-weight: 700; }
.article-content a { color: var(--green); text-decoration: none; font-weight: 600; }
.article-content a:hover { text-decoration: underline; }
.article-content hr { border: none; border-top: 1px solid var(--gray2); margin: 52px 0; }

.article-callout { background: #f0fdf4; border-left: 3px solid var(--green); border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 32px 0; }
.article-callout p { font-size: 15px; color: #166534; line-height: 1.7; margin: 0; }
.article-callout strong { color: #14532d; }

.article-callout.neutral { background: var(--gray); border-left-color: var(--gray2); }
.article-callout.neutral p { color: var(--text-light); }

.article-tag-list { display: flex; gap: 8px; flex-wrap: wrap; margin: 48px 0 0; }
.article-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--gray); color: var(--text-tag); padding: 6px 14px; border-radius: 100px; }

.article-related { background: var(--gray); padding: 72px 0; }
.article-related-inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.article-related-title { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-light); margin-bottom: 32px; }

@media (max-width: 700px) {
  .article-hero-inner, .article-content, .article-related-inner { padding: 0 24px; }
  .article-hero { padding: 48px 0 56px; }
  .article-body { padding: 48px 0 64px; }
  .article-content h2 { font-size: 20px; }
  .article-content p, .article-content li { font-size: 16px; }
}

/* ─── BLOG PAGE ─── */
.blog-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
/* Le chip del filtro sono quelle condivise con l'archivio Case Study
   (.filter-btn: 13px/600, padding 8px 20px, pill 100px) — identiche al mockup
   blog.html, che non ha alcun override. Fino alla 0.17.0 c'era qui un
   !important a 15px/700 con padding 12px 28px: chip molto piu' pesanti del
   riferimento (0.17.1).
   min-height: la regola touch-target globale porta ogni .filter-btn a 44px.
   Qui la annulliamo per stare all'altezza del mockup (~35px, comunque sopra i
   24px minimi di WCAG 2.2 SC 2.5.8) e la ripristiniamo dove il puntatore e'
   grosso — dito, non mouse — che e' il caso in cui il target conta davvero
   (SC 2.5.5). Discriminante il tipo di puntatore, non la larghezza: un tablet
   in landscape e' sopra i 768px ma si usa col dito. */
.blog-filters .filter-btn { min-height: 0; }
@media (pointer: coarse) {
  .blog-filters .filter-btn { min-height: 44px; }
}

/* Contenitore dei risultati (featured + griglia + paginazione): e' il nodo che
   main.js rimpiazza via fetch quando si cambia filtro o pagina. Durante la
   richiesta lo sbiadiamo e blocchiamo i click, così il doppio click su due
   filtri diversi non genera due navigazioni sovrapposte. */
.blog-results { transition: opacity 0.15s ease; }
.blog-results.is-loading { opacity: 0.5; pointer-events: none; }
.blog-results:focus { outline: none; } /* riceve focus() dopo lo swap, per gli screen reader */
.blog-empty { text-align: center; color: var(--text-light); padding: 48px 0; font-size: 15px; }
.blog-empty a { color: var(--green); font-weight: 700; }

/* Featured */
/* Articolo in evidenza: 2 colonne come nel mockup (immagine a sinistra, body a
   destra), single-col sotto 1024. Dalla 0.16.19 alla 0.17.0 era full-width a
   tutti i viewport: con le featured image reali — poster 16:9 con testo dentro
   — la fascia da 1280x300 mostrava circa un terzo dell'immagine. In 2 col la
   colonna immagine e' ~640px, cioe' la misura per cui i poster sono pensati. */
.blog-featured { display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid var(--gray2); margin-bottom: 48px; transition: box-shadow 0.22s, opacity 0.2s, transform 0.2s; }
.blog-featured:hover { box-shadow: 0 16px 56px rgba(0,0,0,0.08); }
.blog-featured-visual { background: #080f1a; position: relative; overflow: hidden; min-height: 300px; }
.blog-featured-visual::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 30% 40%, rgba(16,185,129,0.35) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(74,122,181,0.30) 0%, transparent 60%); }
.blog-featured-body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.blog-featured-title { font-size: clamp(20px, 2vw, 26px); font-weight: 800; color: var(--black); line-height: 1.3; margin-bottom: 16px; overflow-wrap: break-word; word-break: break-word; }
.blog-featured-excerpt { font-size: 15px; color: var(--text-light); line-height: 1.75; margin-bottom: 28px; }
.blog-featured-author { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.blog-author-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #047857); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: 0.5px; }
.blog-author-name { font-size: 13px; font-weight: 600; color: var(--text-light); }
.blog-featured-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; background: var(--green); border-radius: 7px; padding: 14px 28px; transition: background 0.2s, gap 0.2s; }
.blog-featured-cta:hover { background: var(--green-dark); gap: 12px; }

/* Grid */
/* 2 colonne fisse a tutti i viewport ≥769px (richiesta utente). Sotto
   769 collassa a 1 col come prima. */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--gray2); transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s, opacity 0.2s; background: var(--white); display: flex; flex-direction: column; }
.blog-card:hover { border-color: rgba(16,185,129,0.4); box-shadow: 0 12px 40px rgba(0,0,0,0.10); transform: translateY(-4px); }
/* Slot immagine della card: ratio 2,4:1 invece dell'altezza fissa di 160px.
   Con height: 160px su una card da 628px il box era 3,9:1 e di un'immagine
   16:9 se ne vedeva il 41%. A 2,4:1 il taglio resta ma prende solo i bordi
   alto/basso, dove i poster non hanno testo. NB: e' qui che va messo il ratio,
   non piu' nel blocco CLS in fondo al file: un height esplicito vince
   sull'aspect-ratio, ed era il motivo per cui quella regola non ha mai avuto
   effetto. */
.blog-card-header { aspect-ratio: 2.4 / 1; height: auto; overflow: hidden; }
.blog-card-visual { width: 100%; height: 100%; }
/* Variante con featured image reale: img dentro che riempie il container */
.blog-card-visual--img { position: relative; }
.blog-card-visual--img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.blog-featured-visual--img { position: relative; overflow: hidden; }
.blog-featured-visual--img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* contain, non cover: l'altezza della colonna immagine la decide la riga del
     grid (il body e' piu' alto dell'immagine), quindi con cover il box risulta
     ~1,5:1 e ritaglierebbe i lati del poster — dove il titolo inizia. Le bande
     cadono sul fondo #07090e della regola base, che i poster hanno anch'essi
     scuro. */
  object-fit: contain; object-position: center; display: block;
}
/* Dei due overlay decorativi ne resta spento uno solo. Il dot grid animato e'
   un'animazione infinita per card e sopra una fotografia vera non aggiunge
   niente: via. Il blob di categoria invece ci va anche sopra le immagini —
   e' cosi' nel disegno, dove ogni scheda ha la sua fotografia con la velatura
   del colore della categoria, ed e' il segnale che lega la miniatura alla
   pillola. Spegnerlo (fino alla 0.17.44) rendeva le miniature tutte uguali. */
.blog-card-visual--img::before,
.blog-featured-visual--img::before { content: none; }
/* La velatura sta sopra la fotografia: senza z-index espliciti l'ordine fra
   img in position:absolute e ::after dipende dall'ordine nel DOM, che qui e'
   fragile perche' l'img la stampa WordPress. */
.blog-card-visual--img img,
.blog-featured-visual--img img { z-index: 0; }
.blog-card-visual--img::after,
.blog-featured-visual--img::after { z-index: 1; }
.blog-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.blog-card-title { font-size: 16px; font-weight: 700; color: var(--black); line-height: 1.45; margin-bottom: 10px; flex: 1; overflow-wrap: break-word; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.blog-card-excerpt { font-size: 13px; color: var(--text-light); line-height: 1.7; margin-bottom: 16px; }
.blog-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--gray2); margin-top: auto; }
.blog-card-link { font-size: 13px; font-weight: 700; color: var(--green); text-decoration: none; }
.blog-card-link:hover { text-decoration: underline; }
.blog-card-author { display: flex; align-items: center; gap: 8px; }
.blog-author-avatar--sm { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #047857); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: 0.3px; }
.blog-card-author .blog-author-name { font-size: 12px; }

/* Category badges */
.blog-cat { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; }
.blog-cat-ai   { background: rgba(74,122,181,0.12); color: #4a7ab5; }
.blog-cat-arch { background: rgba(139,92,246,0.12); color: #6d28d9; }
.blog-cat-it   { background: rgba(16,185,129,0.12); color: #059669; }
.blog-cat-team { background: rgba(245,158,11,0.12); color: #8a5309; }
/* Il sito ha cinque categorie, il disegno quattro famiglie di colore: questa
   e' la quinta, per "Casi di successo". 5,38:1 sulla pillola. */
.blog-cat-case { background: rgba(244,63,94,0.12); color: #be123c; }
.article-hero .blog-cat-ai   { background: rgba(126,179,245,0.18); color: #9cc4f7; }
.article-hero .blog-cat-arch { background: rgba(167,139,250,0.18); color: #c4b5fd; }
.article-hero .blog-cat-it   { background: rgba(52,211,153,0.18);  color: #6ee7b7; }
.article-hero .blog-cat-team { background: rgba(251,191,36,0.18);  color: #fcd34d; }
.article-hero .blog-cat-case { background: rgba(251,113,133,0.18); color: #fda4af; }
.blog-read-time { font-size: 12px; color: var(--text-light); font-weight: 500; }
.blog-date { font-size: 12px; color: var(--text-light); }

/* Visual placeholders — design language coerente con il sito */
@keyframes dotDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 28px 28px; }
}

/* Base comune */
.blog-card-visual,
.blog-featured-visual {
  background-color: #07090e;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
/* Overlay scuro + dot grid */
.blog-card-visual::before,
.blog-featured-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: dotDrift 8s linear infinite;
  z-index: 1;
  pointer-events: none;
}
/* Overlay colorato per categoria (dark base + color blob) */
.blog-card-visual::after,
.blog-featured-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(6px);
}

/* Le tinte sotto erano agganciate al numero del segnaposto (.blog-visual-3),
   che il template assegnava dalla posizione nel loop: il colore girava a ogni
   pagina e non diceva niente. Ora ogni gruppo porta anche la sua classe di
   categoria .blog-visual--*, che il template stampa dalla categoria vera.
   I nomi numerati restano per i segnaposto senza immagine, che da quei nomi
   prendono anche la fotografia di sfondo. */

/* AI & Innovazione — viola + rosa */
.blog-visual-ai::after, .blog-visual-5::after, .blog-visual-8::after {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(109,40,217,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 25%, rgba(236,72,153,0.35) 0%, transparent 50%),
    linear-gradient(rgba(7,9,14,0.50), rgba(7,9,14,0.50));
}

/* Architettura — blu + ciano */
.blog-visual-1::after, .blog-visual-2::after, .blog-visual-7::after {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(37,99,235,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 25%, rgba(6,182,212,0.35) 0%, transparent 50%),
    linear-gradient(rgba(7,9,14,0.50), rgba(7,9,14,0.50));
}

/* Soluzioni IT — verde + lime */
.blog-visual-3::after, .blog-visual-4::after {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(5,150,105,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 25%, rgba(132,204,22,0.30) 0%, transparent 50%),
    linear-gradient(rgba(7,9,14,0.50), rgba(7,9,14,0.50));
}

/* Team & Processo — ambra + arancio */
.blog-visual-6::after, .blog-visual-9::after {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(217,119,6,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 25%, rgba(239,68,68,0.30) 0%, transparent 50%),
    linear-gradient(rgba(7,9,14,0.50), rgba(7,9,14,0.50));
}

/* ─── Velature per categoria ───────────────────────────────────────────────
   Le regole numerate qui sopra vengono dal disegno e agganciano la velatura al
   NUMERO del segnaposto, che il template assegnava dalla posizione nel loop: il
   colore cambiava a ogni pagina e non diceva niente. Queste classi la agganciano
   alla categoria vera, e stanno dopo apposta — su una scheda che porta entrambe
   deve vincere la categoria.

   Due sono scambiate rispetto al disegno, di proposito. Nel mockup Soluzioni IT
   e Team hanno chip e velatura dello stesso colore — rgb(5,150,105) e
   rgb(217,119,6), identici — mentre AI ha chip blu e velatura viola, e
   Architettura chip viola e velatura blu. Due casi su quattro dicono qual e' la
   regola; negli altri due i colori sono finiti invertiti. Qui la regola vale per
   tutti e cinque, tanto piu' che su questo sito l'AI e' blu ovunque: voce di
   menu, chip dell'hero, tag dei case study. */

/* AI & Innovazione — blu + ciano, come la sua chip */
.blog-visual--ai::after {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(37,99,235,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 25%, rgba(6,182,212,0.35) 0%, transparent 50%),
    linear-gradient(rgba(7,9,14,0.50), rgba(7,9,14,0.50));
}
/* Architettura — viola + rosa, come la sua chip */
.blog-visual--arch::after {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(109,40,217,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 25%, rgba(236,72,153,0.35) 0%, transparent 50%),
    linear-gradient(rgba(7,9,14,0.50), rgba(7,9,14,0.50));
}
/* Soluzioni IT — verde + lime */
.blog-visual--it::after {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(5,150,105,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 25%, rgba(132,204,22,0.30) 0%, transparent 50%),
    linear-gradient(rgba(7,9,14,0.50), rgba(7,9,14,0.50));
}
/* Team & Processo — ambra + arancio */
.blog-visual--team::after {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(217,119,6,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 25%, rgba(239,68,68,0.30) 0%, transparent 50%),
    linear-gradient(rgba(7,9,14,0.50), rgba(7,9,14,0.50));
}
/* Casi di successo — rosa + cremisi. La quinta famiglia: il disegno ne ha
   quattro, il sito ha cinque categorie. Vedi tcc_blog_cat_class(). */
.blog-visual--case::after {
  background:
    radial-gradient(ellipse at 20% 70%, rgba(190,18,60,0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 25%, rgba(251,113,133,0.35) 0%, transparent 50%),
    linear-gradient(rgba(7,9,14,0.50), rgba(7,9,14,0.50));
}

/* Immagini per ogni articolo */
.blog-visual-ai  { background-image: url('../img/blog/ai-native.jpg'); }
.blog-visual-1   { background-image: url('../img/blog/event-driven.jpg'); }
.blog-visual-5   { background-image: url('../img/blog/ai-washing.jpg'); }
.blog-visual-4   { background-image: url('../img/blog/saas.jpg'); }
.blog-visual-2   { background-image: url('../img/blog/rag-finetuning.jpg'); }
.blog-visual-3   { background-image: url('../img/blog/erp.jpg'); }
.blog-visual-6   { background-image: url('../img/blog/arch-review.jpg'); }
.blog-visual-7   { background-image: url('../img/blog/offline-first.jpg'); }
.blog-visual-8   { background-image: url('../img/blog/ai-coding.jpg'); }
.blog-visual-9   { background-image: url('../img/blog/outsourcing.jpg'); }

/* Newsletter */
.blog-newsletter { background: #07090e; border-top: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 80px 0; position: relative; overflow: hidden; }
.blog-newsletter::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.blog-newsletter::after { content: ''; position: absolute; inset: 0; background:
    radial-gradient(ellipse at 30% 60%, rgba(16,185,129,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 30%, rgba(59,130,246,0.22) 0%, transparent 50%);
  filter: blur(32px); pointer-events: none; }
.blog-nl-inner { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
/* Variante senza form (nessun ID Fluent Forms indicato sulla pagina): il testo
   prende tutta la sezione invece di restare in mezza colonna con l'altra metà
   vuota. Il paragrafo resta su una misura leggibile — ~75 caratteri per riga —
   invece di allungarsi per tutti gli 880px. */
.blog-nl-inner--text-only { grid-template-columns: 1fr; gap: 0; }
.blog-nl-inner--text-only .blog-nl-sub { max-width: 620px; }
.blog-nl-title { font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 12px; }
.blog-nl-sub { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.75; }
.blog-nl-form { display: flex; flex-direction: row; gap: 10px; }
.blog-nl-input { flex: 1; padding: 14px 18px; border: 1.5px solid rgba(255,255,255,0.12); border-radius: 8px; font-size: 14px; font-family: var(--font); outline: none; transition: border-color 0.2s; background: rgba(255,255,255,0.06); color: #fff; min-width: 0; }
.blog-nl-input::placeholder { color: rgba(255,255,255,0.78); }
.blog-nl-input:focus { border-color: var(--green); }
.blog-nl-form .btn-primary { white-space: nowrap; flex-shrink: 0; padding: 14px 28px; box-shadow: none; }

/* Newsletter con form Fluent Forms (campo "ID form" sulla pagina Idee).

   Struttura vera del plugin, letta dal DOM di dev03:
     .fluentform > form > fieldset > [ .ff-t-container > .ff-t-cell > .ff-el-group ]
   Due cose che la prima versione di questo blocco (0.17.3) sbagliava:
   - il layout in riga era messo sul <form>, ma il fieldset in mezzo lo
     annulla: gli unici figli flex diventano il fieldset stesso, e la catena
     fieldset → container → cell → group finiva stirata all'altezza della
     colonna di testo, spingendo il modulo in cima alla sezione;
   - le due colonne del form builder hanno flex-basis: 50% inline, quindi
     email e bottone venivano larghi uguali invece che "email elastica +
     bottone alla sua misura" come nel mockup. Servono gli !important, perche'
     lo stile del 50% e' inline.
   Il layout in riga lo fa quindi .ff-t-container, che il plugin rende gia'
   flex. Un form a colonna singola non ha container: i gruppi restano in
   blocco, si impilano, e il bottone prende tutta la larghezza. */
.blog-nl-form-wrap { align-self: center; }
.blog-nl-form-wrap .fluentform,
.blog-nl-form-wrap .fluentform form,
.blog-nl-form-wrap .fluentform fieldset { display: block; height: auto; }
.blog-nl-form-wrap .fluentform .ff-t-container {
  display: flex !important; flex-wrap: wrap; gap: 10px;
  /* flex-start, non center. Con `center` bastava un messaggio d'errore sotto
     il campo email per rendere quella cella piu' alta dell'altra, e il bottone
     scendeva a centrarsi sulla nuova altezza: input e bottone si disallineavano
     proprio nel momento in cui l'utente sta guardando li'. Allineati in cima,
     l'errore cresce verso il basso e il bottone non si muove. Perche' funzioni
     i due devono essere alti uguali: vedi il bordo trasparente sul bottone piu'
     sotto. Niente `stretch`: le celle resterebbero alte quanto la riga. */
  align-items: flex-start;
  margin: 0 !important;
}
.blog-nl-form-wrap .fluentform .ff-t-cell { padding: 0 !important; }
/* Prima colonna (il campo): elastica. Colonna del bottone: alla sua misura.
   :has() prende la cella del submit dovunque sia; :last-child copre i browser
   senza :has(), dove il bottone e' comunque l'ultima colonna. */
.blog-nl-form-wrap .fluentform .ff-t-cell { flex: 1 1 200px !important; min-width: 0; }
/* width: auto e' necessario. Il plugin dichiara
     @media (min-width: 768px) .frm-fluent-form .ff-t-cell { width: 100% }
   e con flex-basis: auto la base dell'elemento e' proprio la width: la cella
   del bottone valeva 100% della riga e finiva a capo, trascinando giu' tutto. */
.blog-nl-form-wrap .fluentform .ff-t-cell:last-child,
.blog-nl-form-wrap .fluentform .ff-t-cell:has(.ff_submit_btn_wrapper) { flex: 0 0 auto !important; width: auto !important; }
.blog-nl-form-wrap .fluentform .ff-el-group { margin: 0 0 10px !important; }
.blog-nl-form-wrap .fluentform .ff-el-group:last-child,
.blog-nl-form-wrap .fluentform .ff-t-cell .ff-el-group { margin: 0 !important; }
.blog-nl-form-wrap .fluentform .ff-el-input--content { margin: 0 !important; padding: 0 !important; }
.blog-nl-form-wrap .fluentform .ff_submit_btn_wrapper { margin: 0 !important; }
/* Nel mockup l'etichetta non c'e' (basta il placeholder): la nascondiamo con
   clip e non con display:none, cosi' resta leggibile dagli screen reader. */
.blog-nl-form-wrap .fluentform .ff-el-input--label {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.blog-nl-form-wrap .fluentform input[type="email"],
.blog-nl-form-wrap .fluentform input[type="text"],
.blog-nl-form-wrap .fluentform .ff-el-form-control {
  width: 100% !important; padding: 14px 18px !important; height: auto !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important; border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important; color: #fff !important;
  font-family: var(--font) !important; font-size: 14px !important;
  /* 1.25 e non 1.5: cosi' l'altezza combacia con .blog-nl-input del fallback (48px) */
  line-height: 1.25 !important;
  /* vedi sopra: l'outline resta al :focus-visible */
  box-shadow: none !important;
}
.blog-nl-form-wrap .fluentform input::placeholder { color: rgba(255,255,255,0.78) !important; }
.blog-nl-form-wrap .fluentform input:focus { border-color: var(--green) !important; }
.blog-nl-form-wrap .fluentform :focus-visible { outline-color: #ffffff !important; }
.blog-nl-form-wrap .fluentform .ff-btn,
.blog-nl-form-wrap .fluentform .ff-btn-submit,
.blog-nl-form-wrap .fluentform button[type="submit"] {
  background: var(--green) !important; background-color: var(--green) !important; color: #fff !important;
  padding: 14px 28px !important; height: auto !important; min-height: 0 !important;
  /* Il plugin da' al bottone un margin-bottom di 20px, che qui sballava la
     centratura verticale del modulo nella sezione. */
  margin: 0 !important;
  /* Bordo trasparente, non `none`: il campo email ha 1.5px di bordo, quindi
     senza questi 3px il bottone sarebbe piu' basso di 3px e, allineati in cima,
     la differenza si vedrebbe. Cosi' i due combaciano senza fissare altezze. */
  border: 1.5px solid transparent !important; border-radius: 7px !important; white-space: nowrap !important;
  font-family: var(--font) !important; font-weight: 700 !important; font-size: 14px !important;
  line-height: 1.25 !important; cursor: pointer !important; box-shadow: none !important;
  transition: background 0.2s !important;
  /* A piena larghezza quando il form e' impilato (nessuna colonna); dentro una
     cella del container torna alla larghezza del testo, come nel mockup. */
  width: 100% !important;
  /* Lo stile "bottone a piena larghezza" del form builder viene iniettato dal
     plugin come <style> dentro il form:
       form.fluent_form_N .wpf_has_custom_css.ff-btn-submit { min-width: 100% }
     Con il bottone in colonna accanto all'email quel min-width lo spingeva a
     capo, trascinandosi dietro tutto il layout. Non ha !important, quindi qui
     basta azzerarlo: l'aspetto del bottone lo decide il tema, non le opzioni
     del form. */
  min-width: 0 !important;
}
.blog-nl-form-wrap .fluentform .ff-t-cell .ff-btn,
.blog-nl-form-wrap .fluentform .ff-t-cell .ff-btn-submit,
.blog-nl-form-wrap .fluentform .ff-t-cell button[type="submit"] { width: auto !important; }
.blog-nl-form-wrap .fluentform .ff-btn:hover,
.blog-nl-form-wrap .fluentform .ff-btn-submit:hover,
.blog-nl-form-wrap .fluentform button[type="submit"]:hover {
  background: var(--green-dark) !important; background-color: var(--green-dark) !important;
}
/* Consenso privacy, messaggi ed errori: vanno su fondo scuro, e il consenso
   prende una riga intera invece di stringere il campo email.

   Il campo e' un `gdpr_agreement` di Fluent Forms, aggiunto ai tre moduli
   newsletter — uno per lingua — con il link all'informativa di quella lingua.
   Il plugin lo rende cosi':

     .ff-el-group > .ff-el-form-check.ff-el-tc > label.ff_tc_label
        > span.ff_tc_checkbox > input   (la casella)
        > div.ff_t_c                    (il testo, con il link)

   cioe' un <div> di blocco dentro una <label>: senza flex sulla label la
   casella finisce su una riga e il testo su quella dopo. */
.blog-nl-form-wrap .fluentform .ff-el-form-check { flex: 1 1 100% !important; }
/* Il gruppo del consenso e' l'ultimo del modulo, e per l'ultimo il blocco qui
   sopra azzera il margine (serve a non sbilanciare la centratura verticale).
   Qui invece uno stacco dalla riga email+bottone ci vuole, altrimenti il testo
   si appoggia al campo. La classe .tcc-consenso arriva dal container_class del
   campo e alza la specificita' quel tanto che basta per superare
   `.ff-el-input--content { margin: 0 !important }`, che il plugin mette sullo
   stesso elemento. */
.blog-nl-form-wrap .fluentform .ff-el-group.tcc-consenso { margin: 14px 0 0 !important; }
/* Il plugin dispone questa riga come una TABELLA, non come flex:
     .fluentform .ff-el-tc label.ff_tc_label      { display: table-row }
     .fluentform .ff-el-tc label.ff_tc_label>span { display: table-cell;
                                                    padding-top: 8px !important;
                                                    width: 20px }
   Sono selettori da (0,3,1) e (0,3,2): un `.blog-nl-form-wrap .fluentform
   .ff_tc_checkbox` vale (0,3,0) e PERDE — misurato, la casella restava
   table-cell con gli 8px di padding e finiva a meta' fra le due righe di
   testo. Da qui la forma piu' lunga dei selettori, che ricalca quella del
   plugin aggiungendo lo scope: serve la specificita', non e' verbosita'. */
.blog-nl-form-wrap .fluentform .ff-el-tc label.ff_tc_label {
  display: flex !important; align-items: flex-start; gap: 9px;
  margin: 0 !important; cursor: pointer;
}
/* La casella si allinea alla PRIMA riga di testo, non al centro del blocco:
   su due righe, centrarla la farebbe scivolare a meta' paragrafo. I 18px sono
   l'altezza di una riga di testo a 12px con line-height 1.5. */
.blog-nl-form-wrap .fluentform .ff-el-tc label.ff_tc_label > span.ff_tc_checkbox {
  display: flex !important; align-items: center; flex: 0 0 auto;
  height: 18px; width: auto !important; padding: 0 !important;
}
/* Casella disegnata a mano, non nativa: quella di sistema e' un quadrato
   bianco pieno, che su questo fondo pesa piu' del campo email a cui
   appartiene. Bordo e fondo sono gli stessi token dell'input qui sopra, cosi'
   i due controlli si leggono come lo stesso modulo. appearance: none non
   toglie niente all'accessibilita': resta un input[type=checkbox], con il suo
   stato, il suo focus e la sua navigazione da tastiera. */
.blog-nl-form-wrap .fluentform .ff_tc_label input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 16px; height: 16px; margin: 0; flex: 0 0 auto; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.30); border-radius: 4px;
  background: rgba(255,255,255,0.06);
  transition: background 0.15s, border-color 0.15s;
}
.blog-nl-form-wrap .fluentform .ff_tc_label input[type="checkbox"]:hover { border-color: rgba(255,255,255,0.5); }
.blog-nl-form-wrap .fluentform .ff_tc_label input[type="checkbox"]:checked {
  background: var(--green); border-color: var(--green);
}
.blog-nl-form-wrap .fluentform .ff_tc_label input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 0.5px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.blog-nl-form-wrap .fluentform .ff_tc_label input[type="checkbox"]:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}
/* In modalita' a colori forzati la casella disegnata sparirebbe: il sistema
   ignora background e bordi, e resterebbe un riquadro vuoto senza spunta. */
@media (forced-colors: active) {
  .blog-nl-form-wrap .fluentform .ff_tc_label input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; }
  .blog-nl-form-wrap .fluentform .ff_tc_label input[type="checkbox"]:checked::after { content: none; }
}
.blog-nl-form-wrap .fluentform .ff_t_c { line-height: 1.5; }
.blog-nl-form-wrap .fluentform .ff-el-form-check-label,
.blog-nl-form-wrap .fluentform .ff-el-help-message { color: rgba(255,255,255,0.55) !important; font-size: 12px !important; }
/* A 12px su fondo scuro il solo schiarimento non basta a far leggere un link
   come tale: serve anche la sottolineatura. Al passaggio del mouse va al verde
   chiaro, che sul nero regge meglio di --green.

   .ff-el-tc in mezzo non e' decorativo. In errore il plugin dichiara
     .fluentform .ff-el-is-error .ff-el-form-check-label a { color: danger }
   che vale (0,3,1) come `.blog-nl-form-wrap .fluentform .ff_t_c a`: a parita'
   vince chi viene dopo, e il CSS del plugin e' accodato al nostro. Risultato
   misurato: al primo invio a vuoto il link all'informativa diventava rosso,
   come se fosse lui l'errore. Con .ff-el-tc si sale a (0,4,1) e resta un link. */
.blog-nl-form-wrap .fluentform .ff-el-tc .ff_t_c a {
  color: rgba(255,255,255,0.92); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,0.35);
  transition: color 0.18s, text-decoration-color 0.18s;
}
.blog-nl-form-wrap .fluentform .ff-el-tc .ff_t_c a:hover,
.blog-nl-form-wrap .fluentform .ff-el-tc .ff_t_c a:focus-visible { color: var(--green-light); text-decoration-color: var(--green-light); }
/* In errore a colorarsi e' la casella, non la frase: e' li' che manca
   qualcosa, e il messaggio sotto lo dice gia' a parole. */
.blog-nl-form-wrap .fluentform .ff-el-is-error .ff_tc_label input[type="checkbox"] { border-color: #ff8f8f; }
.blog-nl-form-wrap .fluentform .ff-message-success { color: #fff !important; }
.blog-nl-form-wrap .fluentform .error,
.blog-nl-form-wrap .fluentform .text-danger { color: #ff8f8f !important; font-size: 12px !important; }

@media (max-width: 1024px) {
  /* Come .blog-nl-form, che nel blocco @1024 passa in colonna. */
  .blog-nl-form-wrap .fluentform .ff-t-container { flex-direction: column; align-items: stretch; }
  /* !important anche sulla width: la regola base sulla cella del bottone e'
     `width: auto !important` (serve sopra 1024), e senza !important qui quella
     vincerebbe lasciando il bottone alla larghezza del testo. */
  .blog-nl-form-wrap .fluentform .ff-t-cell,
  .blog-nl-form-wrap .fluentform .ff-t-cell:last-child { flex: 0 0 auto !important; width: 100% !important; }
  /* Stessa lista di selettori della regola base, non solo .ff-btn-submit: quella
     contiene anche `button[type="submit"]`, che ha specificita' piu' alta (un
     attributo in piu') e vincerebbe con il suo width: auto. */
  .blog-nl-form-wrap .fluentform .ff-t-cell .ff-btn,
  .blog-nl-form-wrap .fluentform .ff-t-cell .ff-btn-submit,
  .blog-nl-form-wrap .fluentform .ff-t-cell button[type="submit"] { width: 100% !important; }
}

/* ─── CASE STUDY PAGE ─── */
.cases-section { background: var(--gray); }
/* La paginazione (qui c'era solo un margin-top scoped) e' ora stilata in modo
   generico nella sezione PAGINAZIONE in fondo al file: stesso risultato su
   questa pagina, piu' blog e ricerca che prima restavano senza stile. */


.filter-btn {
  background: var(--white); border: 1.5px solid var(--gray2);
  border-radius: 100px; padding: 8px 20px; font-size: 13px; font-weight: 600;
  color: var(--text-light); cursor: pointer; transition: all 0.2s; font-family: var(--font);
  /* I <button> non ereditano il line-height del body, gli <a> del filtro blog
     si': senza questo le chip crescevano di ~5px rispetto al mockup. */
  line-height: normal;
  /* I filtri del blog sono <a> verso /blog/?categoria=<slug> (filtro server-side):
     serve azzerare la sottolineatura e tenere il colore anche da :visited. */
  text-decoration: none;
}
a.filter-btn:visited { color: var(--text-light); }
a.filter-btn.active, a.filter-btn.active:visited { color: #fff; }
.filter-btn:hover { border-color: var(--green); color: var(--green); }
.filter-btn.active { background: var(--green); border-color: var(--green); color: white; }

/* Grid layout */
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* Card base */
.case-full-card { border-radius: 16px; border: 1px solid var(--gray2); border-top: 2px solid rgba(22,163,74,0.45); overflow: hidden; transition: box-shadow 0.25s ease, border-color 0.25s ease; display: flex; flex-direction: column; }
/* Card del settore AI: bordo top blu (parità con mockup, dove le card
   data-sector="ai" hanno inline border-top color rgba(74,122,181,0.5)). */
.cases-grid .case-full-card[data-sector~="ai"] { border-top-color: rgba(74,122,181,0.5); }
.case-full-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 0 0 1.5px rgba(22,163,74,0.4); border-color: rgba(22,163,74,0.35); }

/* Featured card — full-width horizontal */
.case-full-card.featured {
  grid-column: 1 / -1;
  flex-direction: row;
  border-top: 3px solid var(--green);
}
.case-full-card.featured .case-full-header { flex: 1; }
.case-full-card.featured .case-teaser {
  flex: 1;
  border-top: none;
  border-left: 1px solid var(--gray2);
  padding: 48px 52px;
  justify-content: center;
}
.case-full-card.featured .case-teaser-title { font-size: 22px; line-height: 1.25; margin-bottom: 14px; }
.case-full-card.featured .case-teaser-desc { font-size: 14px; line-height: 1.75; margin-bottom: 28px; }
.case-full-card.featured .cfm-val { font-size: clamp(36px, 3.2vw, 54px); }
@media (max-width: 860px) {
  .case-full-card.featured { flex-direction: column; }
  .case-full-card.featured .case-teaser { border-left: none; border-top: 1px solid var(--gray2); padding: 28px 32px; }
}

/* Header */
.case-full-header { padding: 32px 32px 28px; background: #080f1a; position: relative; overflow: hidden; background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 22px 22px; flex-shrink: 0; }
.case-full-header::before, .case-full-header::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }

/* ── Schema colori unificato: verde brand (sinistra) + blu brand (destra), intensità alternata ── */
.cases-grid .case-full-card:nth-child(odd)  .case-full-header::before { width: 1360px;height: 1360px;background: radial-gradient(circle closest-side, rgba(21,156,24,0.4084) 0.0%, rgba(21,156,24,0.3638) 15.0%, rgba(21,156,24,0.2357) 30.0%, rgba(21,156,24,0.0932) 45.0%, rgba(21,156,24,0.0195) 60.0%, rgba(21,156,24,0.002) 75.0%, rgba(21,156,24,0.0001) 90.0%, rgba(21,156,24,0.0) 100.0%);opacity: 1;filter: none;top: -640px;left: -540px; }
.cases-grid .case-full-card:nth-child(odd)  .case-full-header::after  { width: 1200px;height: 1200px;background: radial-gradient(circle closest-side, rgba(26,79,156,0.3459) 0.0%, rgba(26,79,156,0.3017) 15.0%, rgba(26,79,156,0.1864) 30.0%, rgba(26,79,156,0.0705) 45.0%, rgba(26,79,156,0.0145) 60.0%, rgba(26,79,156,0.0015) 75.0%, rgba(26,79,156,0.0001) 90.0%, rgba(26,79,156,0.0) 100.0%);opacity: 1;filter: none;top: -540px;right: -480px; }
.cases-grid .case-full-card:nth-child(even) .case-full-header::before { width: 1360px;height: 1360px;background: radial-gradient(circle closest-side, rgba(26,79,156,0.4084) 0.0%, rgba(26,79,156,0.3638) 15.0%, rgba(26,79,156,0.2357) 30.0%, rgba(26,79,156,0.0932) 45.0%, rgba(26,79,156,0.0195) 60.0%, rgba(26,79,156,0.002) 75.0%, rgba(26,79,156,0.0001) 90.0%, rgba(26,79,156,0.0) 100.0%);opacity: 1;filter: none;top: -640px;left: -540px; }
.cases-grid .case-full-card:nth-child(even) .case-full-header::after  { width: 1200px;height: 1200px;background: radial-gradient(circle closest-side, rgba(21,156,24,0.3286) 0.0%, rgba(21,156,24,0.2866) 15.0%, rgba(21,156,24,0.1771) 30.0%, rgba(21,156,24,0.067) 45.0%, rgba(21,156,24,0.0138) 60.0%, rgba(21,156,24,0.0014) 75.0%, rgba(21,156,24,0.0001) 90.0%, rgba(21,156,24,0.0) 100.0%);opacity: 1;filter: none;top: -540px;right: -480px; }
/* Featured standalone (service pages) */
.case-full-card.featured .case-full-header::before { width: 1380px;height: 1380px;background: radial-gradient(circle closest-side, rgba(21,156,24,0.3698) 0.0%, rgba(21,156,24,0.3329) 15.0%, rgba(21,156,24,0.2209) 30.0%, rgba(21,156,24,0.0894) 45.0%, rgba(21,156,24,0.0189) 60.0%, rgba(21,156,24,0.0019) 75.0%, rgba(21,156,24,0.0001) 90.0%, rgba(21,156,24,0.0) 100.0%);opacity: 1;filter: none;top: -640px;left: -540px; }
.case-full-card.featured .case-full-header::after  { width: 1220px;height: 1220px;background: radial-gradient(circle closest-side, rgba(26,79,156,0.3381) 0.0%, rgba(26,79,156,0.2983) 15.0%, rgba(26,79,156,0.1892) 30.0%, rgba(26,79,156,0.0733) 45.0%, rgba(26,79,156,0.0152) 60.0%, rgba(26,79,156,0.0015) 75.0%, rgba(26,79,156,0.0001) 90.0%, rgba(26,79,156,0.0) 100.0%);opacity: 1;filter: none;top: -540px;right: -480px; }

/* AI sector: blue-dominant blobs (overrides nth-child, placed after for cascade priority) */
.cases-grid .case-full-card[data-sector="ai"] .case-full-header::before { background:radial-gradient(circle closest-side, rgba(26,79,156,0.4356) 0.0%, rgba(26,79,156,0.3881) 15.0%, rgba(26,79,156,0.2515) 30.0%, rgba(26,79,156,0.0994) 45.0%, rgba(26,79,156,0.0208) 60.0%, rgba(26,79,156,0.0021) 75.0%, rgba(26,79,156,0.0001) 90.0%, rgba(26,79,156,0.0) 100.0%); opacity:1; }
.cases-grid .case-full-card[data-sector="ai"] .case-full-header::after  { background:radial-gradient(circle closest-side, rgba(21,156,24,0.3113) 0.0%, rgba(21,156,24,0.2715) 15.0%, rgba(21,156,24,0.1678) 30.0%, rgba(21,156,24,0.0635) 45.0%, rgba(21,156,24,0.013) 60.0%, rgba(21,156,24,0.0013) 75.0%, rgba(21,156,24,0.0001) 90.0%, rgba(21,156,24,0.0) 100.0%); opacity:1; }
/* AI sector: blue hover ring */
.cases-grid .case-full-card[data-sector="ai"]:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 0 0 1.5px rgba(74,122,181,0.5); border-color: rgba(74,122,181,0.4); }

.case-full-header-top { display: flex; gap: 8px 20px; justify-content: space-between; align-items: center; margin-bottom: 28px; position: relative; z-index: 1; }
.case-full-meta { display: flex; gap: 8px; flex-wrap: wrap; }
/* Settore su fondo scuro. Era una regola globale su .case-sector: essendo più
   in basso vinceva sulla variante chiara di riga 752 e stampava bianco al 65%
   anche sulle card a fondo chiaro (home, AI-Native, box case study delle pagine
   servizio) — 1.06:1 su #f5f5f5, cioè testo invisibile. Ora è limitata ai due
   contesti scuri, come le .case-tag qui sotto: .case-full-header (#080f1a) e la
   hero di single-case_study.php. */
.case-full-header .case-sector,
.page-hero .case-sector { letter-spacing: 1.2px; color: rgba(255,255,255,0.65); }
/* Varianti per sfondi SCURI. .page-hero è nell'elenco da 0.16.94: la hero di
   single-case_study.php monta le chip in .case-full-meta senza il wrapper
   .case-full-header, quindi su fondo #080f1a prendeva le varianti chiare
   (green 5.24:1 — leggibile ma spenta) e per blue/nudo restava senza sfondo. */
.case-full-header .case-tag.green,
.page-hero .case-tag.green,
.case-hero .case-tag.green { background: rgba(22,163,74,0.22); color: #4ade80; }
.case-full-header .case-tag.blue,
.case-full-header .case-tag.ai,
.page-hero .case-tag.blue,
.page-hero .case-tag.ai,
.case-hero .case-tag.blue,
.case-hero .case-tag.ai { background: rgba(74,122,181,0.28); color: #93c5fd; }
.case-full-header .case-tag.orange,
.page-hero .case-tag.orange { background: rgba(234,88,12,0.24); color: #fdba74; }
/* Chip senza modificatore di colore su fondo scuro */
.case-full-header .case-tag,
.page-hero .case-tag { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
/* Sotto i 640px chip e categoria vanno impilate: affiancate, il blocco chip
   riceveva ~156px e il testo maiuscolo andava a capo DENTRO la pillola,
   raddoppiandone l'altezza e facendo sembrare le due chip fuse (gap 8px).
   A piena larghezza della card il testo sta su una riga sola. */
@media (max-width: 640px) {
  .case-full-header-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Stessa cosa per la card su fondo chiaro (home, AI-Native): affiancate, le
     due etichette si riducono a due colonne strettissime e il testo maiuscolo
     va a capo dentro la pillola. */
  .case-card-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .case-full-meta { gap: 10px; }
  .case-sector { text-align: left; }
}
.case-client-logo-row { margin: 22px 0 8px; height: 48px; display: flex; align-items: center; }
.case-client-logo { max-height: 48px; width: auto; max-width: 200px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.88; display: block; }


.case-full-metrics { display: flex; gap: 28px; position: relative; z-index: 1; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; }
.cfm-val { font-size: clamp(26px, 2.4vw, 38px); font-weight: 900; color: #ffffff; line-height: 1; letter-spacing: -1.5px; }
.cfm-lbl { font-size: 10px; color: rgba(255,255,255,0.78); font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; margin-top: 6px; }


.case-tags-row { display: flex; flex-wrap: wrap; gap: 7px; }
.case-tech-tag { background: var(--gray); border: 1px solid var(--gray2); border-radius: 4px; padding: 3px 9px; font-size: 11px; font-weight: 700; color: var(--text-tag); }

@media (max-width: 860px) { .cases-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Blob drift — movimento ampio perché sono già blurriti 120px+ ── */
@keyframes blob-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(160px, -120px) scale(1.1); }
  66%      { transform: translate(-100px, 80px) scale(0.92); }
}
@keyframes blob-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-130px, 110px) scale(1.08); }
  75%      { transform: translate(110px, -90px) scale(0.94); }
}
@keyframes blob-drift-c {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(calc(-50% + 90px)) translateY(-70px) scale(1.12); }
}
@keyframes blob-drift-d {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-80px, 60px) scale(1.06); }
}
.mb-g1 { animation: blob-drift-a 22s ease-in-out infinite; }
.mb-b1 { animation: blob-drift-b 28s ease-in-out infinite; }
.mb-t1 { animation: blob-drift-c 18s ease-in-out infinite; }
.mb-g2 { animation: blob-drift-d 32s ease-in-out infinite reverse; }
@keyframes ph-blob-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(120px, 100px); }
}
@keyframes ph-blob-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-110px, 80px); }
}
.page-hero::before { animation: ph-blob-a 20s ease-in-out infinite; }
.page-hero::after  { animation: ph-blob-b 26s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .mb-g1,.mb-b1,.mb-t1,.mb-g2 { animation: none; }
  .page-hero::before,.page-hero::after { animation: none; }
}

/* ── 2. Hero entrance — gestita via JS ── */
.hero-entrance {
  opacity: 0;
  transform: translateY(28px);
}
.hero-entrance.hero-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-entrance { opacity: 1; transform: none; }
}

/* ── 3. Mouse spotlight ── */
[data-spotlight] { position: relative; }
.spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ─── CASE TEASER (public card body) ─── */
.case-teaser { padding: 22px 32px 26px; background: var(--white); display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--gray2); }
.case-teaser-text { flex: 1; }
.case-teaser-title { font-size: 15px; font-weight: 800; color: var(--black); line-height: 1.35; margin-bottom: 7px; }
.case-teaser-desc { font-size: 12.5px; color: var(--text-light); line-height: 1.72; margin-bottom: 18px; }
.btn-case-request,
.btn-card-read { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1.5px solid var(--green); color: var(--green); padding: 8px 16px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: var(--font); white-space: nowrap; text-decoration: none; }
.btn-case-request:hover,
.btn-card-read:hover { background: var(--green); color: white; box-shadow: 0 4px 14px rgba(22,163,74,0.25); }

/* Home preview case card — CTA inline (link verde) o bottone richiesta */
/* margin-top: auto spinge la CTA in fondo alla card. Il distacco dal blocco
   sopra sta nel padding e non nel margine, perche' fuori da un contenitore
   flex il margine automatico vale zero e il distacco sparirebbe.
   align-self serve perche' in colonna flex la CTA verrebbe stirata per
   tutta la larghezza, e la sottolineatura al passaggio del mouse con lei. */
.case-card-cta { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 16px; font-size: 13px; font-weight: 700; color: var(--green); text-decoration: none; cursor: pointer; }
.case-card-cta--btn { background: transparent; border: 0; padding: 16px 0 0; font-family: var(--font); }
/* Il bottone porta anche la classe .btn-case-request, che serve al JS del
   modal e non si puo' togliere, ma si porta dietro l'hover del pulsante a
   pillola dell'archivio: riempimento verde e testo bianco. Qui a riposo e'
   un link, e senza il bordo e il padding di quel pulsante il riquadro verde
   spuntava a filo del testo. Va spento, cosi' la variante gated si comporta
   come quella pubblica, che e' un <a> con la sola sottolineatura. */
.case-card-cta:hover { text-decoration: underline; }
.case-card-cta--btn:hover { background: transparent; color: var(--green); box-shadow: none; }

/* ─── CASE STUDY MODAL ─── */
.case-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.case-modal-overlay.open { opacity: 1; pointer-events: all; }
.case-modal { background: var(--white); border-radius: 16px; padding: 48px 44px; max-width: 480px; width: 100%; position: relative; transform: translateY(20px); transition: transform 0.25s ease; box-shadow: 0 24px 80px rgba(0,0,0,0.18); }
.case-modal-overlay.open .case-modal { transform: translateY(0); }
.case-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; cursor: pointer; padding: 6px; color: var(--text-light); transition: color 0.2s; display: flex; }
.case-modal-close:hover { color: var(--black); }
.case-modal-close svg { width: 20px; height: 20px; }
.case-modal-tag { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.case-modal-title { font-size: 22px; font-weight: 900; color: var(--black); margin-bottom: 8px; letter-spacing: -0.5px; }
.case-modal-sub { font-size: 14px; color: var(--text-light); margin-bottom: 28px; line-height: 1.6; }
.case-modal-form { display: flex; flex-direction: column; gap: 12px; }
.case-modal-form input { width: 100%; border: 1.5px solid var(--gray2); border-radius: 8px; padding: 12px 14px; font-size: 14px; font-family: var(--font); color: var(--black); background: var(--white); outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.case-modal-form input:focus { border-color: var(--green); }
.case-modal-form input::placeholder { color: var(--text-light); }
.case-modal-submit { background: var(--green); color: white; border: none; border-radius: 8px; padding: 14px; font-size: 15px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: all 0.2s; margin-top: 4px; }
.case-modal-submit:hover { background: var(--green-dark); box-shadow: 0 4px 16px rgba(22,163,74,0.35); }
.case-modal-note { font-size: 12px; color: var(--text-light); margin-top: 14px; display: flex; align-items: center; gap: 6px; }
.case-modal-note svg { flex-shrink: 0; }
@media (max-width: 600px) {
  .case-modal { padding: 36px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════ */

/* Nav links — slide-in underline */
.header-nav a {
  position: relative;
}
.header-nav a::after {
  content: '';
  position: absolute;
  /* bottom:-8px replica il distacco glyph<->underline del mockup
     (line-height 1.6 dava ~5.8px half-leading sotto + 2px = ~8px).
     Da v0.16.80 il link e' line-height:1 (per allineamento verticale
     col resto dell'header), quindi senza compenso l'underline finirebbe
     attaccata al testo. v0.16.82+ */
  left: 0; bottom: -8px;
  width: 0; height: 2px;
  background: var(--green);
  border-radius: 2px;
  transition: width 0.25s cubic-bezier(0.16,1,0.3,1);
}
.header-nav a:hover::after,
.header-nav a.active::after { width: 100%; }

/* Underline anche per il trigger dropdown quando un suo figlio è la pagina attiva.
   Esempio: sei su /sviluppo-software/, il trigger "Servizi" mostra l'underline. */
.nav-dropdown-trigger { position: relative; }
.nav-dropdown-trigger::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--green);
  border-radius: 2px;
  transition: width 0.25s cubic-bezier(0.16,1,0.3,1);
}
.nav-dropdown-trigger.active::after,
.nav-dropdown-trigger:hover::after { width: 100%; }
.nav-dropdown-trigger.active { color: var(--green); }
.site-header:not(.scrolled) .nav-dropdown-trigger.active { color: #ffffff; }
.site-header:not(.scrolled) .nav-dropdown-trigger.active::after { background: #ffffff; }
/* Solo le voci di primo livello: sono loro a stare sul fondo scuro. Senza il
   selettore di figlio diretto la regola prendeva anche le voci del sottomenu,
   che stanno su un pannello bianco — underline bianco su bianco, cioe'
   invisibile proprio sulla pagina in cui doveva segnalare "sei qui". */
.site-header:not(.scrolled) .header-nav > a.active::after { background: #ffffff; }

/* ─── Dropdown: scollega il sottomenu dalle regole della barra orizzontale ───
   Le voci di .nav-dropdown-menu sono <a> annidati in .header-nav, quindi
   ereditano `.header-nav a` e `.header-nav a::after`, tarate sulla navbar:
   - bottom:-8px sull'underline la spingeva nell'8 dei 10px di padding-top
     della voce sotto, facendola sembrare appartenente a quest'ultima;
   - line-height:1 (serve all'allineamento verticale nell'header, v0.16.80+)
     schiacciava le righe del menu, dove invece c'è spazio.
   Override più specifici invece di ritoccare le regole base, così le voci
   semplici della navbar (AI-Native, Case Study, Idee, Chi siamo) non cambiano. */
/* L'underline segue il testo, non il pannello: le voci hanno 20px di padding
   laterale, e una riga che arriva ai bordi si legge come un separatore fra
   due voci invece che come "sei qui". */
.header-nav .nav-dropdown-menu a::after { bottom: 4px; left: 20px; }
.header-nav .nav-dropdown-menu a:hover::after,
.header-nav .nav-dropdown-menu a.active::after { width: calc(100% - 40px); }
.header-nav .nav-dropdown-menu a { line-height: 1.4; }

/* Gap trigger→box: la freccia (.nav-dropdown-menu::before) è un quadrato 12x12
   ruotato 45°, quindi il suo vertice sporge di ~2,5px oltre il bordo del
   quadrato ((12·√2−12)/2) e con top:-6px arriva ~8,5px sopra il box. Con il
   gap originale di 8px la punta finiva sopra l'underline del trigger
   (.nav-dropdown-trigger::after, bottom:-6px) invece di uscirle da sotto.
   Stessa specificità della regola base (riga ~179): deve stare dopo. */
.nav-dropdown-menu { top: calc(100% + 21px); }
/* Il ponte trasparente che tiene vivo l'hover mentre il puntatore scende dal
   trigger al box (.nav-dropdown::after, riga ~173) è alto 20px: era dimensionato
   sul gap di 8px, con 21px lascerebbe una banda morta di 1px in cui l'hover cade
   e il menu si chiude. Portato a 22px, 1px di sovrapposizione col box. */
.nav-dropdown::after { height: 22px; }

/* Mobile: voce attiva con border-color verde */
.nav-mobile a.active { color: var(--green); border-bottom-color: var(--green); }
.nav-mobile a.active.nav-ai { color: var(--blue); border-bottom-color: var(--blue); }

/* Inputs — focus ring */


/* ═══════════════════════════════════════════════════════════════
   BLOG
   ═══════════════════════════════════════════════════════════════ */
.blog-section { background: var(--white); }

/* Filtri */
/* Homepage blog preview */
.blog-preview-section { background: var(--white); }
.blog-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .section { padding: 80px 32px; }
  .hero-inner { padding: 120px 32px 100px; }
  .page-hero-inner { padding: 60px 32px; gap: 48px; }
  .numeri-grid { grid-template-columns: repeat(3, 1fr); border-bottom: none; }
  .numeri-grid .numero-card { border-bottom: 1px solid var(--gray2); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  
  
  .two-col { gap: 48px; }
  .three-col { grid-template-columns: repeat(2, 1fr); }
  /* Sotto 1024 il featured passa a colonna singola, come nel mockup.
     .blog-grid resta 2-col fino a 768 (poi 1 col, vedi blocco @768). */
  .blog-featured { grid-template-columns: 1fr; min-height: 0; }
  .blog-featured-visual { min-height: 220px; }
  /* Con immagine reale il box prende il ratio dell'immagine: a colonna singola
     non serve ne' crop ne' bande. Doppia classe per restare sopra al
     min-height di .blog-featured-visual anche nel blocco @768. */
  .blog-featured-visual.blog-featured-visual--img { aspect-ratio: 16 / 9; min-height: 0; }
  .blog-grid, .blog-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-nl-inner { grid-template-columns: 1fr; gap: 40px; }
  .blog-nl-form { flex-direction: column; }
  /* Tablet (≤1024): nav inline più compatta per evitare overflow con 6+ voci.
     Sotto 768 la nav è display:none e si usa l'overlay mobile. */
  .header-nav { gap: 18px; }
  .header-nav a { font-size: 12px; letter-spacing: 0.2px; }
  .header-phone { display: none; } /* libera spazio per la nav */
}
@media (max-width: 768px) {
  .site-header { padding: 0 20px; }
  .header-nav { display: none; }
  .header-phone { display: none; }
  .btn-header { display: none; }
  .header-logo { width: 134px; height: 38px; }
  .nav-mobile-btn { display: flex; }
  /* Blog featured: già single-col globale; su mobile riduco l'altezza
     minima dell'immagine (180 vs 220 tablet, vs 300 default). */
  .blog-featured-visual { min-height: 180px; }
  .hero-inner { padding: 100px 24px 80px; }
  .hero-bg-dots { display: block; }
  
  .form-row { grid-template-columns: 1fr; }
  .page-hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px; }
  .blog-grid, .blog-preview-grid { grid-template-columns: 1fr; }
  /* Era display:none — le 3 .page-stat-card sparivano del tutto invece di
     impilarsi sotto il testo hero. Lo stile base (.page-hero-right, riga 1167)
     è già flex-column con gap 16px, e .page-hero-inner qui sopra è già a una
     colonna: la separazione dal testo la dà il suo gap di 32px, quindi non
     serve alcun margin-top. L'ordine DOM è testo → statistiche. */
  .page-hero-right { display: flex; }
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .three-col { grid-template-columns: 1fr; }
  /* .comparison-grid non aveva alcuna media query: restava a 1fr 1fr fino al
     viewport più piccolo, con ogni colonna a ~155px. Impilate: prima il
     problema ("Software SaaS o generico"), poi la soluzione. */
  .comparison-grid { grid-template-columns: 1fr; gap: 20px; }
  
  .card-grid { grid-template-columns: 1fr; }
  .servizi-grid { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  .ai-process { padding: 28px 20px; }
  .numeri-grid { grid-template-columns: repeat(2, 1fr); }
  .valori-grid { grid-template-columns: 1fr; }
  .marquee-logo { padding: 16px 28px; }
  .marquee-logo img { max-height: 52px; max-width: 130px; }
  .case-grid { grid-template-columns: 1fr; }
  .proof-card { width: 300px; }
  .proof-section .section-inner { padding-left: 32px; padding-right: 32px; }
  /* Le fade laterali del marquee sono larghe 280px ciascuna e coprono tutta
     l'altezza della .proof-section (sono sue figlie, non del marquee-wrap):
     sotto ~560px di viewport si sovrappongono fra loro e velano titolo e card,
     rendendo le testimonianze illeggibili. Su desktop servono, qui no. */
  .proof-fade-left, .proof-fade-right { display: none; }
  .proof-text { color: rgba(255,255,255,0.85); }
  /* Trust bar: i figli sono <span> inline in un flex wrap, quindi le voci si
     spezzavano a metà riga risultando sfasate. Una per riga, piena larghezza,
     centrata — separatori "·" inutili in colonna. */
  .trust-bar { padding: 15px 20px; } /* era 48px per lato: mangiava un quarto della riga */
  .trust-bar-inner { flex-direction: column; gap: 10px; }
  .trust-bar-inner > span { width: 100%; text-align: center; }
  .tb-sep { display: none; }
  .wherever-inner { grid-template-columns: 1fr; gap: 40px; }
  .wherever-visual { display: none; }
  .sos-inner { grid-template-columns: 1fr; gap: 40px; }
  /* .sos-points-row restava a repeat(3, 1fr) a ogni viewport: su smartphone
     le 3 card finivano a ~100px l'una e sbordavano. Impilate. */
  .sos-points-row { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  
  .team-people-grid { grid-template-columns: repeat(2, 1fr); }
  .team-footer { flex-direction: column; gap: 20px; align-items: flex-start; }
  /* Qui c'era un secondo `.blog-grid, .blog-preview-grid { repeat(2, 1fr) }`
     che, essendo piu' in basso nello stesso @media, vinceva sulla riga 1fr
     poche decine di righe sopra: su smartphone le card restavano a due colonne
     da ~160px, strettissime e disallineate rispetto all'articolo in evidenza
     che invece era a piena larghezza. Il duplicato arriva dal mockup, che ha
     le stesse due regole in conflitto nel blocco 768px. Rimosso: sotto 768px
     il listing e' a colonna singola (0.17.1). */
  .cta-cards { grid-template-columns: 1fr; }
  .cta-options-grid { grid-template-columns: 1fr; }
  .contatto-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  
  .section { padding: 64px 20px; }
  .ai-section { padding: 72px 20px; }
  .cta-section { padding: 72px 20px; }
  .wherever-section { padding: 72px 20px; }
  
}
@media (max-width: 390px) {
  /* Nota: qui NON va .hero-title — questo blocco precede quello a 480px, che
     quindi vincerebbe la cascata a parità di specificità. La dimensione mobile
     del titolo è gestita con clamp() nel blocco 480px, che copre già i 320-480. */
  .btn-header { padding: 8px 12px; font-size: 11px; }
  .numeri-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — INTEGRAZIONI v0.8 (mobile-small + scaling)
   ═══════════════════════════════════════════════════════════════ */

/* Base font scaling: leggermente ridotto su mobile per leggibilità */
@media (max-width: 480px) {
  html { font-size: 15px; }

  /* Container padding più stretti */
  .site-header { padding: 0 16px; height: 64px; }
  .header-logo { width: 114px; height: 32px; }
  .section { padding: 48px 16px; }
  .section-inner { padding: 0; }
  .hero-inner { padding: 96px 16px 64px; }
  .ai-section, .cta-section, .wherever-section { padding: 56px 16px; }
  /* Solo spazi verticali: i 16px orizzontali erano il terzo strato di gutter
     sommato a .site-footer e .footer-top. Il gutter resta ai 20px di
     .site-footer (blocco 768px): 4px in più dei 16px di .section a questo
     breakpoint, differenza non percepibile, e tenerlo qui non funzionerebbe
     comunque perché la shorthand `padding` del blocco 768px viene dopo. */
  .footer-inner { padding: 32px 0 24px; }

  /* Typography mobile */
  /* Era 28px fisso: troppo piccolo, e con un salto brusco dai 42px del breakpoint
     sopra. clamp scala 32→38px fra 320 e 480px senza altri breakpoint. Il
     letter-spacing base (-2px) è tarato su 80px: a questa scala stringe troppo. */
  .hero-title { font-size: clamp(32px, 8.5vw, 38px); line-height: 1.15; letter-spacing: -0.8px; }
  .hero-lead { font-size: 16px; }
  .hero-qualifier { font-size: 14px; }
  .hero-social-proof { font-size: 12px; gap: 6px; }
  .section-title { font-size: 28px; }
  .section-subtitle { font-size: 15px; }
  .page-hero-title { font-size: 30px; }
  .page-hero-subtitle, .page-hero-lead { font-size: 15px; }
  .article-hero-title { font-size: 28px; line-height: 1.25; }
  .article-content p, .article-content li { font-size: 16px; }
  /* 20 e 17px, gli stessi del blocco 700px: a 24 e 19 i titoli di sezione
     risultavano piu' grandi su telefono che su desktop (dove sono 22 e 17), e
     la scala andava all'indietro — 22 → 20 → 24 scendendo di larghezza. */
  .article-content h2 { font-size: 20px; }
  .article-content h3 { font-size: 17px; }

  /* Grid + card tighter */
  .numeri-grid { grid-template-columns: 1fr; }
  .team-people-grid { grid-template-columns: 1fr; }
  .servizio-card, .ai-card, .case-card, .blog-card { padding: 20px; }
  .proof-card { width: 260px; padding: 24px; }
  .proof-text { font-size: 14px; }

  /* Hero buttons full-width */
  .hero-cta-group { flex-direction: column; align-items: stretch; }
  .hero-cta-group .btn-primary, .hero-cta-group .btn-outline { width: 100%; text-align: center; }

  /* Header mobile più aggressivo */
  .nav-mobile-btn { padding: 6px; }
  .nav-mobile-overlay { padding: 80px 24px 32px; }
  .nav-mobile a { font-size: 17px; padding: 12px 0; }

  /* Footer stack più stretto */
  .footer-top { gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; padding-top: 24px; }
  .footer-legal { flex-wrap: wrap; gap: 12px; }

  /* Page hero mobile: stat card collassate */
  .page-hero-inner { padding: 32px 16px; gap: 24px; }
  .page-stat-card { padding: 16px; }

  /* Servizi banner AI */
  .servizi-ai-banner { padding: 20px; }
  .servizi-ai-banner-name { font-size: 22px; }

  /* Trust bar: la colonna e l'hide dei separatori arrivano dal blocco 768px,
     qui restano solo padding/gap/size più compatti. Il padding orizzontale
     dell'inner va a 0: il gutter lo dà già .trust-bar, sommarli restringeva
     le voci a ~280px su un viewport da 412px. */
  .trust-bar { padding: 15px 16px; }
  .trust-bar-inner { padding: 16px 0; gap: 8px; font-size: 11px; }

  /* Modal case study */
  .case-modal { padding: 32px 20px; max-width: calc(100vw - 24px); margin: 12px; }
  .case-modal-title { font-size: 20px; }

  /* Marquee clienti più piccolo */
  .marquee-logo { padding: 12px 20px; }
  .marquee-logo img { max-height: 40px; max-width: 100px; }
}

/* Tablet: pulire alcuni gap residui (≤1024px non ancora coperti) */
@media (max-width: 1200px) {
  /* Switch a "modalità mobile" da tablet/laptop piccoli: nasconde nav
     desktop, CTA header, telefono e lang-switcher (tutti disponibili
     nell'overlay), mostra hamburger. Soglia 1200px per evitare
     compressione/wrap di "AI-Native", "Case Study", "Chi siamo" sui
     viewport intermedi (1024-1200). v0.16.76+ (era 1024). */
  .header-nav { display: none !important; }
  .header-phone { display: none !important; }
  .btn-header { display: none !important; }
  .lang-switcher--header { display: none !important; }
  .nav-mobile-btn { display: flex !important; }
  .site-header { padding: 0 24px; }
}

@media (max-width: 1024px) {
  .servizi-ai-banner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ai-process { padding: 32px 24px; }
  /* Era "0 32px": duplicava il gutter già dato da .site-footer. Il padding
     orizzontale del footer è gestito solo da .site-footer (vedi 768/480px). */
  .footer-top { padding: 0; }
}

/* Mobile-large finishing touches (≤768px) */
@media (max-width: 768px) {
  .section-inner { padding: 0 4px; }
  .blog-filters { gap: 8px; flex-wrap: wrap; }
  .filter-btn { padding: 8px 14px; font-size: 12px; }
  .blog-card { padding: 0; }
  .blog-card-body { padding: 20px; }
  .article-author-row { flex-wrap: wrap; gap: 12px; }
  .case-results { grid-template-columns: 1fr 1fr; gap: 12px; }
  .qualifica-inner { padding: 0 16px; }
  .breadcrumb { font-size: 11px; flex-wrap: wrap; }
  /* I 48px laterali di .site-footer (riga 1100) non erano mai ridotti su
     mobile: sommati a .footer-top e .footer-inner il contenuto partiva a
     64-96px dal bordo. Ora il gutter è solo qui, allineato ai 20px di
     .section a questo breakpoint. */
  .site-footer { padding: 56px 20px 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINAZIONE — generica per ogni listing paginato
   ═══════════════════════════════════════════════════════════════
   the_posts_pagination() genera sempre lo stesso markup:
     nav.navigation.pagination > .nav-links > span/a.page-numbers
       (.current per la pagina attiva, .dots per i puntini, .prev/.next)
   Prima l'unica regola era `.cases-section .navigation.pagination`, con solo un
   margin-top: sul blog e sulla ricerca i numeri di pagina uscivano come link di
   testo nudi. Qui lo stile e' fuori da qualunque scope di pagina.
   Le pillole riprendono i token dei filtri (--gray2, --green, font-weight 700)
   con --radius al posto del pill 100px: numeri e frecce restano leggibili anche
   a due cifre. Il ring di focus arriva dal :focus-visible universale in fondo
   al file, quindi qui non serve ripeterlo. */
.navigation.pagination { margin-top: 48px; }
.navigation.pagination .nav-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
}
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  /* 44px = target touch minimo WCAG 2.5.5, come .filter-btn */
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--gray2); border-radius: var(--radius);
  background: var(--white); color: var(--text-light);
  font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.navigation.pagination a.page-numbers:visited { color: var(--text-light); }
.navigation.pagination a.page-numbers:hover { border-color: var(--green); color: var(--green); }
/* Pagina corrente: stessa evidenza del filtro attivo (.filter-btn.active) */
.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers.current:visited {
  background: var(--green); border-color: var(--green); color: #fff;
}
/* Puntini di troncamento: separatore, non un bottone */
.navigation.pagination .page-numbers.dots {
  min-width: 24px; padding: 0 2px;
  background: transparent; border-color: transparent; color: var(--text-light);
  font-weight: 600; letter-spacing: 1px;
}
/* Frecce prev/next: leggermente piu' larghe e con la freccia piu' grande */
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next { padding: 0 18px; font-size: 18px; }

@media (max-width: 768px) {
  .navigation.pagination { margin-top: 32px; }
  .navigation.pagination .nav-links { gap: 6px; }
  /* Restiamo a 40px di larghezza (l'altezza tocco resta 44px) per stare su
     due righe al massimo anche con 11 pagine su schermo da 360px. */
  .navigation.pagination .page-numbers { min-width: 40px; padding: 0 10px; font-size: 14px; }
  .navigation.pagination .page-numbers.prev,
  .navigation.pagination .page-numbers.next { padding: 0 12px; font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — WCAG 2.1 AA / European Accessibility Act
   ═══════════════════════════════════════════════════════════════ */

/* Skip link: invisibile finché non riceve focus, poi appare in alto */
.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 99999;
  padding: 12px 18px; background: var(--green); color: var(--white);
  font-weight: 700; font-size: 14px; border-radius: var(--radius-sm);
  text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 12px; outline: 3px solid var(--white); outline-offset: 2px; }

/* Equivalente di .sr-only per il markup generato da WordPress core, che usa
   .screen-reader-text (etichette "Pagina N" nella paginazione, "Cerca:" nel
   search form): il tema non definiva la classe, quindi quei testi risultavano
   visibili. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Utility classe sr-only (visually hidden, ma leggibile da screen reader) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Fluent Forms, campi con l'etichetta nascosta a schermo.
   Il plugin la nasconde con `display:none; visibility:hidden`, che la toglie
   anche dall'albero di accessibilita': la <label> resta nel DOM ma nessun
   lettore di schermo la annuncia, e il campo resta senza nome come se
   l'etichetta non ci fosse. Qui si rimette con la stessa tecnica di .sr-only —
   invisibile all'occhio, presente per chi ascolta.
   Serve !important perche' la regola del plugin arriva dopo nel foglio. */
.ff-el-form-hide_label > .ff-el-input--label {
  display: block !important; visibility: visible !important;
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Candidature spontanee sotto il team di «Chi siamo».
   Non e' un bottone: e' una riga di testo con un link, perche' non porta a una
   pagina ma apre il programma di posta — e un bottone contornato promette una
   pagina. Il verde e la sottolineatura dicono che e' un link; la busta dice
   che e' una mail prima che qualcuno ci passi sopra col mouse. */
.team-candidatura {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 14px; margin-top: 48px; text-align: center;
}
.team-candidatura-testo { font-size: 15px; color: var(--text); }
.team-candidatura-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--green);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.team-candidatura-link:hover { text-decoration-thickness: 2px; }
/* La busta non va sottolineata insieme al testo: la sottolineatura le passerebbe
   attraverso. Sta fuori dal flusso del testo con un allineamento suo. */
.team-candidatura-icona { flex-shrink: 0; text-decoration: none; }
/* La riga dell'informativa: piu' piccola e piu' quieta del richiamo sopra, ma
   presente. Sta in pagina perche' e' qui che i dati vengono raccolti, ed e' qui
   che il titolare deve dire come li tratta. */
.team-candidatura-privacy {
  margin-top: 10px; text-align: center;
  font-size: 13px; color: var(--text-light);
}
.team-candidatura-privacy a {
  color: var(--text-light);
  text-decoration: underline; text-underline-offset: 3px;
}
.team-candidatura-privacy a:hover { color: var(--green); }

@media (max-width: 480px) {
  .team-candidatura { flex-direction: column; gap: 10px; }
}

/* Focus indicator universale per navigazione tastiera.
   Usiamo :focus-visible così il ring NON appare al click del mouse. */
:focus-visible {
  outline: 3px solid var(--green) !important;
  outline-offset: 2px;
  border-radius: 3px;
}
.site-header:not(.scrolled) :focus-visible {
  outline-color: #ffffff !important;
}

/* Form fields: focus state più evidente */
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--green) !important;
  outline-offset: 1px;
  border-color: var(--green);
}

/* Migliora contrasto su testi semi-trasparenti che erano marginali (rgba 0.40-0.48).
   I dati WCAG audit indicavano questi sotto soglia AA. */
.hero-qualifier { color: rgba(255,255,255,0.65); }
/* :not(.ai) perche' la chip AI-Native ha un blu suo, #7eb3f5, che il disegno
   tiene apposta. Senza l'esclusione questa riga la travolgeva — stessa
   specificita', ma viene dopo — e la chip usciva bianca come le altre. */
.hero-trust .trust-item:not(.ai) { color: rgba(255,255,255,0.62); }
.proof-role { color: rgba(255,255,255,0.55); }
.qualifica-note { color: rgba(255,255,255,0.62); }

/* Animazioni: rispetta la preferenza utente "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;
  }
  .marquee-track, .marquee-left, .marquee-right, .proof-marquee-track {
    animation: none !important;
  }
  .hero-canvas { display: none !important; } /* particelle disabilitate */
}

/* Stato collapsed/expanded per dropdown trigger e mobile button:
   l'attributo aria-expanded controlla l'icona freccia. */
.nav-dropdown-trigger[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.nav-dropdown-trigger .arrow { display: inline-block; transition: transform 0.2s; }
.nav-mobile-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-mobile-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-mobile-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Larghezza minima touch target 44x44px (WCAG 2.5.5) per pulsanti piccoli */
.btn-header, .filter-btn, .blog-card-link, .footer-social a {
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center;
}
/* Il centraggio orizzontale vale per i bersagli che SONO un bottone o
   un'icona, e che quindi si adattano al proprio contenuto. */
.btn-header, .filter-btn, .footer-social a { justify-content: center; }
/* Non per «Leggi l'articolo», che nell'anteprima e' figlio diretto di
   .blog-card-body e quindi largo quanto la card: centrarlo dentro quella
   larghezza portava il testo a 146px dal bordo, contro i 25px di occhiello,
   titolo ed estratto — misurato, e la colonna del disegno si rompeva. Nel
   listing il link sta invece dentro .blog-card-footer, dove la scatola hugga
   il testo: li' non cambia niente, ed e' giusto cosi'. Il min-height da solo
   basta a fare i 44px del bersaglio. */
.blog-card-link { justify-content: flex-start; }

/* ═══════════════════════════════════════════════════════════════
   LANG SWITCHER (Polylang) — discreto, IT|EN|DE
   ═══════════════════════════════════════════════════════════════ */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
}
.lang-switcher--header { margin-right: 6px; }

.lang-switcher-item {
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 4px;
  min-height: 32px; min-width: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  line-height: 1;
}

/* Header con scroll (sfondo chiaro): testo scuro ben leggibile */
.site-header.scrolled .lang-switcher-item,
.lang-switcher--mobile .lang-switcher-item {
  color: var(--text);
}
.site-header.scrolled .lang-switcher-item:hover,
.lang-switcher--mobile .lang-switcher-item:hover {
  color: var(--green);
  background: rgba(22,163,74,0.08);
}

/* Header in cima (sfondo scuro): testo bianco pieno per essere visibile */
.site-header:not(.scrolled) .lang-switcher-item {
  color: #ffffff;
}
.site-header:not(.scrolled) .lang-switcher-item:hover {
  color: var(--green);
  background: rgba(255,255,255,0.12);
}

/* Separatore verticale tra voci alternative */
.lang-switcher-item + .lang-switcher-item { position: relative; }
.lang-switcher-item + .lang-switcher-item::before {
  content: ''; position: absolute; left: -1px; top: 28%; bottom: 28%;
  width: 1px; background: rgba(0,0,0,0.18);
}
.site-header:not(.scrolled) .lang-switcher-item + .lang-switcher-item::before {
  background: rgba(255,255,255,0.78);
}

/* Mobile overlay (v0.16.87+): pillole in riga ancorate in alto a sinistra,
   simmetriche alla X di chiusura. Prima era una colonna a piena larghezza in
   fondo al menu, con label "Lingua" e native names, raggiungibile solo con
   scroll. min-height 44px pari a quella della X: i centri verticali dei due
   elementi coincidono (16 + 22 = 38px da entrambi i lati). */
.lang-switcher--mobile {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 1102;
  margin: 0; padding: 0;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
}
.lang-switcher--mobile .lang-switcher-item {
  padding: 7px 16px;
  /* min-height 40px: con padding 7px e font 13px il box naturale starebbe a
     ~30px, sotto la soglia comoda di touch. */
  min-height: 40px; min-width: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(17,17,17,0.15);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}
.lang-switcher--mobile .lang-switcher-item:hover,
.lang-switcher--mobile .lang-switcher-item:focus-visible {
  color: var(--green);
  border-color: rgba(22,163,74,0.45);
  background: rgba(22,163,74,0.08);
}
/* Lingua corrente: pillola piena brand. È uno <span>, non cliccabile. */
.lang-switcher--mobile .lang-switcher-item.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
  cursor: default;
}
/* Disabilita il separatore "|" tra item: con le pillole non serve */
.lang-switcher--mobile .lang-switcher-item + .lang-switcher-item::before { content: none; }

/* Lang-switcher--header hide: spostato nel @media max-width:1200px sopra
   (v0.16.76+, soglia hamburger). Regola lasciata vuota per chiarezza. */

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV OVERLAY — X close button + scroll fix iOS
   ═══════════════════════════════════════════════════════════════ */

/* Override del padding-top originale (96px) — ora basta meno spazio
   perché abbiamo l'X close button dentro l'overlay invece dell'hamburger
   sopra (che era nascosto sotto l'overlay per stacking context). */
.nav-mobile-overlay {
  padding-top: 72px;
  -webkit-overflow-scrolling: touch; /* scroll fluido su iOS Safari */
  overscroll-behavior: contain;       /* evita "rubber band" che chiude pagina */
}

/* Pulsante X di chiusura, dentro l'overlay (non più nell'hamburger esterno) */
.nav-mobile-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 22px;
  color: var(--text);
  z-index: 1102;
  transition: background 0.18s, border-color 0.18s;
}
.nav-mobile-close:hover { background: var(--gray); border-color: var(--text); }
.nav-mobile-close svg { width: 20px; height: 20px; }
/* Nota: l'X è position:absolute dentro l'overlay che a sua volta è
   già spostato in basso quando admin bar è visibile (regola in functions.php).
   Quindi top: 16px è sempre relativo al box dell'overlay già compensato. */

/* ═══════════════════════════════════════════════════════════════
   PAGINE SERVIZIO · ACF sections (sviluppo, system-int, mobile,
   full-out, ux-ui, ai-native)
   ═══════════════════════════════════════════════════════════════ */

/* Garanzie / Impegni grid — la griglia a 2 colonne che stava qui e' stata
   tolta: nessun template la usa piu' (le pagine servizio rendono le garanzie
   con .three-col, vedi sec-garanzie.php), ma stando piu' in basso nel file
   scavalcava per ordine la .garanzie-grid a 3 colonne dichiarata sopra, che e'
   quella della pagina AI-Native — l'unica che usa davvero questa classe.
   Effetto: quella pagina mostrava due colonne dove il disegno ne prevede tre. */


/* Confronto table */


/* Modelli collaborazione */


/* FAQ accordion (markup: <details class="faq-item">/<summary class="faq-question">)
   Stile fedele al mockup: lista pulita full-width con border-bottom separator,
   no card / no border-radius / no background. Allineamento a sinistra. */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--gray2); border-radius: 0; overflow: visible; }
.faq-question { padding: 22px 0; font-size: 16px; font-weight: 700; color: var(--black); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; user-select: none; list-style: none; }
/* Nasconde il marker nativo: list-style:none + ::marker copre Firefox/Chrome moderni,
   ::-webkit-details-marker copre Safari/Chromium legacy */
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }
.faq-question::after { content: '+'; font-size: 22px; font-weight: 300; color: var(--green); flex-shrink: 0; transition: transform .2s ease; }
.faq-item[open] .faq-question::after { transform: rotate(45deg); }
.faq-answer { font-size: 14px; color: var(--text-light); line-height: 1.75; padding-bottom: 20px; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }

/*
 * Animazione smooth dell'open/close via interpolate-size + details::details-content.
 * Browser supportati (gennaio 2025+): Chrome 131, Safari 17.2 (sotto bandiera in alcune
 * versioni), Firefox 134. I browser più vecchi cadono in graceful degradation
 * (apertura/chiusura istantanea senza animazione, comportamento nativo <details>).
 */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
  }
  .faq-item[open]::details-content {
    block-size: auto;
  }
}

/* (rimossa regola legacy .mid-cta-dark { padding:64px 0; text-align:center }
   che sovrascriveva il layout .mid-cta-strip orizzontale introdotto in 0.16.34
   e azzerava il padding orizzontale del .section, facendo arrivare il bordo
   dello strip ai margini del viewport.) */

/* AI-Native Enhancement box */


.ai-enhancement-text { font-size: 15px; color: var(--text-light); line-height: 1.75; margin-bottom: 16px; }


/* Case teaser (single case highlight) */
/* Teaser variante pagina singola case study (grid 2-col con visual a fianco).
   Scope ristretto a .single-case_study per non leakare sull'archivio dove
   .case-teaser è una colonna semplice dentro .case-full-card. */
.single-case_study .case-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: var(--white); border-radius: 14px; overflow: hidden; border: 1px solid var(--gray2); margin-top: 32px; }


.single-case_study .case-teaser-title { font-size: 22px; font-weight: 800; color: var(--black); line-height: 1.25; margin-bottom: 12px; }
.single-case_study .case-teaser-desc { font-size: 14px; color: var(--text-light); line-height: 1.7; margin-bottom: 20px; }


/* Verticali / Settori */


/* Testimonianza singola (highlight in pagina servizio) */
.testimonianza-card { background: var(--white); border: 1px solid var(--gray2); border-radius: 14px; padding: 36px; margin-top: 32px; position: relative; }
.testimonianza-quote { position: absolute; top: 18px; left: 28px; font-size: 56px; line-height: 1; color: var(--green); opacity: 0.18; font-weight: 900; }
.testimonianza-text { font-size: 17px; font-style: italic; color: var(--text); line-height: 1.7; margin: 16px 0 24px; padding: 0; border: none; quotes: none; }
.testimonianza-author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--gray2); }
.testimonianza-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonianza-avatar--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #16a34a 0%, #4a7ab5 100%); color: rgba(255,255,255,0.95); font-size: 16px; font-weight: 800; text-transform: uppercase; }
.testimonianza-name { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 2px; }
.testimonianza-role { font-size: 13px; color: var(--text-light); }

/* Responsive servizi */
@media (max-width: 900px) {
	.case-teaser { grid-template-columns: 1fr; }
	
	
	/* Due colonne, non una: le card di garanzia sono corte e a questa
	   larghezza stanno comodamente in coppia. Colonna singola sotto i 640px. */
	.garanzie-grid { grid-template-columns: repeat(2, 1fr); }
	
}

/* Confronto variante DARK (per pagine servizio: mobile-app, full-out, ux-ui, ai-native) */
.confronto-dark { background: var(--black); position: relative; overflow: hidden; }
.confronto-dark::before { content:''; position:absolute; border-radius:50%; pointer-events:none; width:1560px; height:1560px; background:radial-gradient(circle closest-side, rgba(74,122,181,0.0956) 0.0%, rgba(74,122,181,0.0882) 15.0%, rgba(74,122,181,0.0621) 30.0%, rgba(74,122,181,0.0267) 45.0%, rgba(74,122,181,0.0058) 60.0%, rgba(74,122,181,0.0006) 75.0%, rgba(74,122,181,0.0) 90.0%, rgba(74,122,181,0.0) 100.0%); opacity:1; filter:none; top:-660px; left:-630px; }
.confronto-dark .section-label { color: var(--green) !important; }
.confronto-dark .section-title { color: var(--white) !important; }


/* Garanzie variante DARK: adatta .garanzia-card */


/* Single article — Servizi correlati (mockup v2)
   Sezione tra il content e la CTA finale. 1-4 card che linkano alle pagine
   servizio (default: Sviluppo Software + System Integration). */
.article-services-section {
  background: #f8f9fa;
  padding: 56px 32px;
}
.article-services-section .section-inner { max-width: 1100px; margin: 0 auto; }
.article-services-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text);
}
.article-services-eyebrow-line { display: block; width: 28px; height: 2px; background: var(--green); }
.article-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.article-service-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--gray2);
  border-radius: var(--radius);
  padding: 28px 26px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
  border-top-width: 3px;
}
.article-service-card.is-green { border-top-color: var(--green); }
.article-service-card.is-blue  { border-top-color: var(--blue); }
.article-service-card:hover {
  box-shadow: 0 0 0 1.5px var(--green), 0 8px 28px rgba(0,0,0,0.08);
  border-color: rgba(22,163,74,0.35);
  transform: translateY(-2px);
}
.article-service-card.is-blue:hover {
  box-shadow: 0 0 0 1.5px var(--blue), 0 8px 28px rgba(74,122,181,0.10);
  border-color: rgba(74,122,181,0.40);
}
.article-service-card-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--green); margin-bottom: 12px;
}
.article-service-card.is-blue .article-service-card-eyebrow { color: var(--blue); }
.article-service-card-title {
  font-size: 17px; font-weight: 800; color: var(--black);
  line-height: 1.3; margin-bottom: 12px;
  overflow-wrap: break-word;
}
.article-service-card-desc { font-size: 13px; color: var(--text-light); line-height: 1.7; margin-bottom: 18px; }
.article-service-card-link { font-size: 13px; font-weight: 700; color: var(--green); }
.article-service-card.is-blue .article-service-card-link { color: var(--blue); }

@media (max-width: 600px) {
  .article-services-section { padding: 40px 20px; }
  .article-services-grid { grid-template-columns: 1fr; }
}

/* Qui c'era la striscia recruiting della CTA finale di «Chi siamo». Il suo
   markup non esiste piu' dalla 0.17.57: lo stesso invito sta sotto il team,
   e due richiami identici sulla stessa pagina si contendevano l'attenzione. */

/* ═══════════════════════════════════════════════════════════════
   AI Enhancement + Testimonianza (layout combinato sviluppo-software)
   ═══════════════════════════════════════════════════════════════
   Quando il SCF ai_enhancement ha anche testimonial_quote popolato,
   il template renderizza una grid 2-col con header label sinistra + label/
   titolo destra (riga 1) e box AI + proof-card a destra (riga 2). */
.ai-with-testimonial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
  row-gap: 16px;
}
.ai-with-testimonial-head { align-self: end; }
.proof-card--dark {
  background: var(--black);
  border-color: rgba(255,255,255,0.10);
  width: auto;          /* override del 480px fisso del marquee */
  flex-shrink: 1;
  position: relative;
  overflow: hidden;
}
.proof-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.proof-blob--blue  { width: 660px; height: 660px; background: radial-gradient(circle closest-side, rgba(74,122,181,0.1689) 0.0%, rgba(74,122,181,0.1396) 15.0%, rgba(74,122,181,0.0768) 30.0%, rgba(74,122,181,0.0263) 45.0%, rgba(74,122,181,0.0052) 60.0%, rgba(74,122,181,0.0006) 75.0%, rgba(74,122,181,0.0) 90.0%, rgba(74,122,181,0.0) 100.0%); filter: none; top: -280px; left: -280px; }
.proof-blob--green { width: 540px; height: 540px; background: radial-gradient(circle closest-side, rgba(22,163,74,0.1124) 0.0%, rgba(22,163,74,0.0921) 15.0%, rgba(22,163,74,0.0498) 30.0%, rgba(22,163,74,0.0168) 45.0%, rgba(22,163,74,0.0033) 60.0%, rgba(22,163,74,0.0004) 75.0%, rgba(22,163,74,0.0) 90.0%, rgba(22,163,74,0.0) 100.0%); filter: none; bottom: -180px; right: -180px; }

/* Variante 2-col: AI box (sx) + case study inline (dx). Stesso grid pattern
   di .ai-with-testimonial ma con body case allineato a top e metriche flat. */
.ai-with-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
  row-gap: 16px;
  align-items: start;
}
.ai-with-case__body { align-self: start; }
.ai-with-case__left { align-self: start; }
.ai-with-case__p { font-size: 15px; color: var(--text-light); line-height: 1.75; margin-bottom: 16px; }
.ai-with-case__p strong { color: var(--text); }
.ai-with-case__metrics { display: flex; gap: 20px; flex-wrap: wrap; margin: 4px 0 24px; }

/* Mobile: due colonne collassano */
@media (max-width: 900px) {
  .ai-with-testimonial { grid-template-columns: 1fr; column-gap: 0; row-gap: 32px; }
  .ai-with-case        { grid-template-columns: 1fr; column-gap: 0; row-gap: 32px; }
  /* .ai-with-testimonial ha 4 figli diretti piazzati dall'auto-placement: su
     desktop la griglia 2x2 li accoppia (label AI | label+H2 testimonianza /
     box AI | proof-card), ma a una colonna escono nell'ordine letterale del
     DOM e le due etichette finiscono di fila, separate dai rispettivi
     contenuti. `order` li ricompone in coppie label→contenuto.
     Nota: .ai-with-case NON ha questo problema pur essendo la stessa griglia,
     perché ha solo 2 figli e ognuno annida già label + contenuto. */
  .ai-with-testimonial-head--left        { order: 1; }
  .ai-with-testimonial > .ai-enhance-box { order: 2; } /* scoped: .ai-enhance-box è usato anche in .ai-with-case__left e full-width */
  .ai-with-testimonial-head--right       { order: 3; }
  .ai-with-testimonial > div:last-child { order: 4; } /* wrapper della .proof-card, senza classe propria */
}

/* ═══════════════════════════════════════════════════════════════
   Aspect-ratio CLS prevention
   ═══════════════════════════════════════════════════════════════
   Slot pre-allocato per le immagini dinamiche (blog cards, case study,
   team, article cover) per ridurre Cumulative Layout Shift quando le
   immagini caricano. Le proporzioni rispettano i ratio del mockup. */
/* .blog-card-header: il ratio (2,4:1) e' definito con la card, non qui — vedi
   il commento la'. Questa regola duplicata non ha mai avuto effetto, perche'
   l'altezza fissa di 160px vinceva sull'aspect-ratio.
   NB: aspect-ratio non va su .blog-featured-visual in generale (era 16/10 +
   min-height:0): su single-col forzava un'altezza pari al 62,5% della
   larghezza del viewport → immagine gigante. Sotto 1024 il ratio 16/9 e'
   applicato solo alla variante --img, dove corrisponde all'immagine servita. */
/* Riga logo cliente: altezza fissa nel mockup (48px). Il min-height 80px
   viene applicato solo quando la riga è il placeholder con iniziali, dove
   serve spazio per il quadrato gradient. */


.team-person-photo:not(.team-person-photo--img) { aspect-ratio: 1 / 1; }
.team-person-photo--img { aspect-ratio: 1 / 1; }
/* (rimossa regola .case-full-card .case-full-header min-height: 200px:
   il mockup non prevede altezza minima. Le card senza metriche risultavano
   artificialmente alte rispetto al riferimento.) */

/* ═══════════════════════════════════════════════════════════════
   Catch-all per utenti con prefers-reduced-motion: reduce
   ═══════════════════════════════════════════════════════════════
   Estensione delle media query reduced-motion già presenti su elementi
   specifici (blobs, hero entrance, scroll reveal). Questa regola universal
   azzera transition/animation residue rimaste fuori dai blocchi mirati
   (marquee testimonials/clienti, FAQ details, card hover, ecc.).
   Pattern raccomandato dal W3C/WebAIM per WCAG 2.1 SC 2.3.3. */
@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;
  }
}

/* Avviso visibile solo a chi e' collegato con permessi di modifica, sulle
   schede riservate: senza, il contenuto completo a schermo fa pensare che il
   blocco pubblico non funzioni. */
.admin-gate-note {
  /* In basso e non in alto: l'header e' fisso e ci passava sopra, tagliando
     l'avviso a meta' — cioe' proprio il contrario di quello che deve fare.
     Qui non lo copre nessuno e resta visibile mentre si scorre. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: #fef3c7; color: #7c4a03;
  border-top: 2px solid #f2c465;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
  padding: 12px 24px; font-size: 13px; line-height: 1.55; text-align: center;
}
.admin-gate-note strong { color: #663c02; }

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY — testata e blocchi del corpo
   ═══════════════════════════════════════════════════════════════
   Nel mockup queste regole stavano in un <style> dentro la pagina del case
   study, non nel foglio condiviso: alla conversione sono rimaste indietro, e
   architettura, risultati, testimonianza e lezioni uscivano come testo nudo.
   Portate qui tali e quali, cosi' la scheda in WordPress e' quella disegnata. */

.cs-metrics-hero {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin: 36px 0 0;
  padding: 28px 36px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
}
.cs-metric-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-metric-val {
  font-size: 32px;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.5px;
}
.cs-metric-lbl {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.cs-client-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cs-client-logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
.cs-client-info {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}
.cs-client-name {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  font-size: 15px;
}

/* Architecture diagram */
.cs-arch-block {
  background: var(--gray);
  border: 1px solid var(--gray2);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 24px 0;
}
/* h3 e h4 insieme, non h3 al posto di h4. Il contenuto delle schede arriva
   dal mockup, che usa h4: portandoli a h3 (0.17.72) la scaletta dei titoli
   smette di saltare un livello, ma se un domani qualcuno reincolla un blocco
   dal mockup l'h4 continua a rendersi giusto invece di comparire come testo
   di sistema in mezzo alla pagina. Stessa cosa per le lezioni qui sotto. */
.cs-arch-block h3,
.cs-arch-block h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green);
  margin-bottom: 10px;
}
.cs-arch-block p {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.7;
  margin: 0;
}

/* Results metrics */
.cs-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}
@media (min-width: 600px) {
  .cs-results-grid { grid-template-columns: repeat(4, 1fr); }
}
.cs-result-item {
  background: var(--gray);
  border: 1px solid var(--gray2);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
}
.cs-result-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 6px;
}
.cs-result-lbl {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}

/* Testimonial */
.cs-testimonial {
  background: linear-gradient(135deg, #0a1628 0%, #0d1f0d 100%);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 16px;
  padding: 36px 40px;
  margin: 32px 0;
  position: relative;
}
.cs-testimonial::before {
  content: '"';
  position: absolute;
  top: 16px;
  left: 28px;
  font-size: 64px;
  color: var(--green);
  opacity: 0.3;
  line-height: 1;
  font-family: Georgia, serif;
}
/* Il selettore porta anche il contenitore, e non e' un vezzo: questo <p> vive
   dentro .article-content, dove `.article-content p { color: #374151 }` ha
   specificita' 0,1,1 e batteva `.cs-testimonial-text`, che ne ha 0,1,0. Il
   risultato era un virgolettato grigio scuro su fondo quasi nero — illeggibile.
   I due blocchi vicini, .cs-arch-block p e .cs-lesson-body p, non avevano il
   problema solo perche' hanno la stessa specificita' della regola generica ma
   stanno piu' in basso nel file: un pareggio vinto dall'ordine, non dal
   disegno. Qui la specificita' e' esplicita. */
.cs-testimonial .cs-testimonial-text {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 20px;
  padding-top: 20px;
}
.cs-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.cs-testimonial-name {
  font-size: 14px;
  font-weight: 700;
  color: white;
}
.cs-testimonial-role {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

/* Lessons */
.cs-lessons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
}
.cs-lesson {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 24px;
  background: var(--gray);
  border: 1px solid var(--gray2);
  border-radius: 10px;
}
.cs-lesson-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--green);
  opacity: 0.4;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
}
.cs-lesson-body h3,
.cs-lesson-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
}
.cs-lesson-body p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.65;
  margin: 0;
}

/* Testata del case study: adattamenti rispetto al mockup ─────────────
   Nel mockup la riga meta e le metriche hanno testi piu' corti di quelli
   usati in archivio; qui il campo e' uno solo e alimenta entrambi, quindi
   invece di duplicare i contenuti si rende la testata capace di reggere le
   etichette lunghe. */
/* gap 16px e stacco dal breadcrumb come nel mockup. */
.case-hero .article-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; }
/* Separatore e voce che segue restano insieme quando la riga va a capo:
   altrimenti il punto resta appeso in fondo alla riga precedente. */
.case-hero .article-hero-meta-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* Il titolo ha gli a capo decisi in redazione: la sillabazione automatica
   del tema qui spezzerebbe le parole in mezzo ("uni-fica"). */
.case-hero .article-hero-title { hyphens: manual; }
/* Le metriche restano sul flex del mockup: le colonne si dimensionano sul
   contenuto invece di essere forzate uguali. Con etichette lunghe il flex
   manda a capo l'ultima metrica — e' il compromesso del disegno originale. */

@media (max-width: 640px) {
  .garanzie-grid { grid-template-columns: 1fr; }
}