/* Font Inter: caricato via <link rel="preload"> + <link rel="stylesheet"> in ogni pagina HTML.
   L'@import è stato rimosso: causava una catena bloccante (CSS → Google Fonts CSS → woff2)
   che era la causa principale del CLS. */

/* ============================================================
   AFB — Analysis For Business  |  Shared Stylesheet
   ============================================================ */

/* Fallback metrico per Inter: annulla lo spostamento di layout al caricamento del font */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override:  90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

:root {
  --blue-primary: #253896;
  --blue-dark:    #173694;
  --blue-accent:  #008DD9;
  --gold:         #C9A84C;
  --gold-light:   #D4B460;
  --gold-dark:    #A88B3D;
  --white:        #FFFFFF;
  --gray-light:   #F5F5F5;
  --text-dark:    #1A1A1A;
  --text-medium:  #4A4A4A;
  --text-light:   #6B7280;
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 20px rgba(37,56,150,0.10);
  --shadow-lg:    0 10px 40px rgba(37,56,150,0.18);
  --radius:       12px;
  --radius-lg:    20px;
  --transition:   0.3s ease;
  /* z-index scale */
  --z-base:        10;
  --z-dropdown:    30;
  --z-navbar:      50;
  --z-mobile-nav:  55;
  --z-hamburger:   56;
  --z-progress:    60;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Inter Fallback', system-ui, Arial, sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a  { text-decoration: none; color: inherit; transition: color var(--transition); }
ul { list-style: none; }
img { max-width: 100%; height: auto; }

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6 { line-height: 1.2; font-weight: 700; }

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--blue-dark);
  margin-bottom: 0.75rem;
}
.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-light);
  max-width: 580px;
  margin: 0 auto 3rem;
  line-height: 1.7;
}
.section-header { text-align: center; }

/* ---- Layout ---- */
.container   { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.section-pad { padding: 5rem 0; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-navbar);
  padding: 1.25rem 0;
  background: transparent;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.navbar.scrolled {
  background: rgba(23,54,148,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0,0,0,0.22);
}
@supports not (backdrop-filter: blur(1px)) {
  .navbar.scrolled { background: var(--blue-dark); }
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo-img {
  max-height: 50px;
  width: auto;
  display: block;
  object-fit: contain;
  /* inverte il logo scuro in bianco sullo sfondo navy */
  filter: brightness(0) invert(1);
}
.nav-links { display: flex; align-items: center; gap: 2.5rem; }
.nav-links a {
  font-size: 0.875rem; font-weight: 500;
  color: rgba(255,255,255,0.8);
  position: relative;
  transition: color var(--transition);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--blue-accent);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
/* Puntino dorato accanto a "Score gratuito" */
.nav-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #C9A84C;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

.btn-nav {
  background: var(--blue-accent) !important;
  color: var(--white) !important;
  padding: 0.55rem 1.2rem;
  border-radius: 6px;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition) !important;
}
.btn-nav::after { display: none !important; }
.btn-nav:hover  { background: #009ee8 !important; transform: translateY(-1px); }

/* ── NAVBAR SHINE — Prodotti AFB (oro) · Score gratuito (bianco) ── */
.nav-links .nav-dropdown-trigger,
.nav-links a[href="score-finanziario-pmi.html"] {
  overflow: hidden;
}
.nav-links .nav-dropdown-trigger::before {
  content: "";
  position: absolute;
  top: -40%; left: -140%;
  width: 52%; height: 180%;
  pointer-events: none;
  filter: blur(2px);
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(212,180,96,.95) 0%, rgba(201,168,76,.35) 40%, transparent 72%);
  animation: navSweep 4.5s ease-in-out infinite;
}
.nav-links a[href="score-finanziario-pmi.html"]::before {
  content: "";
  position: absolute;
  top: -40%; left: -140%;
  width: 52%; height: 180%;
  pointer-events: none;
  filter: blur(2px);
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 45%, transparent 72%);
  animation: navSweep 4.5s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes navSweep {
  0%   { left: -140%; }
  45%  { left: 150%; }
  100% { left: 150%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links .nav-dropdown-trigger::before,
  .nav-links a[href="score-finanziario-pmi.html"]::before { display: none; }
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none;
  cursor: pointer; padding: 4px; z-index: var(--z-hamburger);
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav {
  position: fixed; inset: 0;
  background: var(--blue-dark);
  z-index: var(--z-mobile-nav);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 2.5rem;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 5rem;
  padding-bottom: 2rem;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a {
  font-size: 1.5rem; font-weight: 700;
  color: rgba(255,255,255,0.8);
  transition: color var(--transition);
}
.mobile-nav a:hover { color: var(--blue-accent); }

/* ── PRODOTTI AFB — voce navbar in oro con dropdown ── */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger {
  color: var(--gold) !important;
  font-weight: 700;
  display: flex !important;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
.nav-dropdown-trigger::after { display: none !important; }
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible { color: var(--gold-light) !important; outline: none; }
.nav-dropdown-trigger svg { flex-shrink: 0; transition: transform 0.2s ease; }
.nav-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;               /* nessun gap: il pannello tocca il trigger */
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(23,54,148,0.14), 0 2px 8px rgba(0,0,0,0.06);
  padding: 0.75rem 0.5rem 0.5rem; /* gap visivo ora è padding-top, area sensibile al mouse */
  min-width: 232px;
  z-index: var(--z-dropdown);
}
/* ponte invisibile: estende l'area sensibile sopra il pannello */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -8px;
  right: -8px;
  height: 14px;
}
/* apertura CSS-primary: hover sul contenitore + focus-within per tastiera */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown-menu.open {
  display: block;
  animation: dropdownFadeIn 0.18s ease both;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-5px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.nav-dropdown-menu a {
  display: flex !important;
  flex-direction: column;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  color: var(--blue-dark) !important;
  font-weight: 500 !important;
  transition: background 0.15s ease;
}
.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-menu a:hover { background: var(--gray-light); }
.nav-dropdown-menu a:hover .dd-name { color: var(--gold); }
.dd-name { font-size: 0.875rem; font-weight: 600; color: var(--blue-dark); transition: color 0.15s; }
.dd-sub  { font-size: 0.73rem; color: var(--text-light); margin-top: 0.1rem; font-style: italic; }

/* ── Mega-menu Prodotti AFB (tutte le pagine) ── */
.nav-mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 660px;
  background: var(--white, #fff);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(37,56,150,0.13), 0 2px 8px rgba(37,56,150,0.08);
  z-index: var(--z-dropdown, 900);
  padding: 0;
  overflow: hidden;
}
.nav-dropdown:hover .nav-mega-menu,
.nav-dropdown:focus-within .nav-mega-menu,
.nav-mega-menu.open {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  animation: dropdownFadeIn 0.18s ease both;
}
.mega-group {
  padding: 1.1rem 0;
  border-right: 1px solid rgba(37,56,150,0.07);
}
.mega-group:last-child { border-right: none; }
.mega-group-header {
  display: block;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold, #C9A84C);
  padding: 0.2rem 1rem 0.55rem;
  border-bottom: 1px solid rgba(37,56,150,0.07);
  margin-bottom: 0.25rem;
}
.mega-group a {
  padding: 0.42rem 1rem !important;
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-dark, #173694);
  transition: color 0.15s, background 0.15s;
}
.mega-group a:hover { background: rgba(37,56,150,0.045); color: var(--blue-primary, #253896); }
.nav-mega-menu .mega-group a.active { color: var(--blue-primary); font-weight: 700; }
.nav-mega-menu .mega-group a.active:hover { color: var(--gold); }

.mobile-dropdown { width: 100%; text-align: center; }
.mobile-dropdown-trigger {
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; font-weight: 700;
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; width: 100%;
  font-family: inherit;
  transition: color var(--transition);
  padding: 0;
}
.mobile-dropdown-trigger:hover { color: var(--gold-light); }
.mobile-dropdown-trigger svg { transition: transform 0.25s ease; }
.mobile-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-dropdown-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.mobile-dropdown-menu.open {
  max-height: 60vh;
  overflow-y: auto;
  padding-top: 1rem;
}
.mobile-dropdown-menu a {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.7) !important;
  padding-left: 1.5rem;
}
.mobile-dropdown-menu a:hover { color: var(--blue-accent) !important; }
.mobile-nav .btn-mobile-cta {
  background: var(--blue-accent) !important;
  color: var(--white) !important;
  padding: 0.875rem 2.5rem;
  border-radius: 8px;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.875rem 1.75rem;
  border-radius: 8px;
  font-weight: 600; font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  font-family: inherit;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue-accent);
  color: var(--white); border-color: var(--blue-accent);
}
.btn-primary:hover {
  background: #009ee8; border-color: #009ee8;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,141,217,0.38);
}
.btn-outline-white {
  background: transparent;
  color: var(--white); border-color: rgba(255,255,255,0.55);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white); transform: translateY(-2px);
}
.hero .btn-outline-white:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: transparent;
}
.hero .btn-outline-white:hover svg path { stroke: var(--gold); }
.btn-white {
  background: var(--white);
  color: var(--blue-primary); border-color: var(--white); font-weight: 700;
}
.btn-white:hover {
  background: var(--gray-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.btn-accent-outline {
  background: transparent;
  color: var(--blue-accent); border-color: var(--blue-accent);
}
.btn-accent-outline:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: transparent;
  transform: translateY(-2px);
}
.btn-accent-outline:hover svg path { stroke: var(--gold); }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
  color: #ffffff;
  border: none;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(60,40,5,.45);
}
.btn-gold svg path { stroke: #ffffff; }
.btn-gold:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.40);
}

/* ---- Strumenti Gratuiti ---- */
.tool-card-wrap {
  display: flex;
  justify-content: center;
}
.tool-card {
  background: var(--white);
  border: 1px solid rgba(37,56,150,0.09);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(15,30,80,0.10);
  padding: 2.75rem 3rem;
  max-width: 600px;
  width: 100%;
  text-align: center;
  transition: box-shadow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
  .tool-card:hover,
  .product-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 6px 18px rgba(200,168,76,0.30),
      0 18px 50px rgba(200,168,76,0.22);
  }
}
.tool-card-icon {
  width: 80px; height: 80px;
  background: rgba(0,141,217,0.08);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}
.hero-pill svg circle { fill: var(--gold); }

.tool-badge {
  display: inline-block;
  background: transparent;
  color: var(--gold-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0.3rem 0.875rem;
  border-radius: 100px;
  border: 1px solid var(--gold);
  margin-bottom: 1rem;
}
.tool-card-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue-dark);
  margin-bottom: 0.875rem;
}
.tool-card-desc {
  font-size: 0.975rem;
  color: var(--text-medium);
  line-height: 1.75;
  max-width: 440px;
  margin: 0 auto 2rem;
}

@media (max-width: 480px) {
  .tool-card { padding: 2rem 1.5rem; }
  .tool-card-title { font-size: 1.25rem; }
}

/* ============================================================
   HERO — HOME
   ============================================================ */
.hero {
  min-height: 580px;
  background-image:
    linear-gradient(135deg, rgba(37,56,150,0.55) 0%, rgba(23,54,148,0.40) 100%),
    image-set(
      url('hero-bg.avif')      type('image/avif'),
      url('hero-bg-web.webp')  type('image/webp'),
      url('hero-background.png') type('image/png')
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex; align-items: center;
  padding-top: 110px;
  padding-bottom: 4rem;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; top: -15%; right: -8%;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,141,217,0.13) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; bottom: -25%; left: -5%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 58%; padding: 2rem 0; margin-left: 0; margin-right: auto; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(0,141,217,0.15);
  border: 1px solid rgba(0,141,217,0.35);
  color: var(--blue-accent);
  font-size: 0.78rem; font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: 100px; letter-spacing: 0.3px;
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 900; color: var(--white);
  line-height: 1.1; letter-spacing: -1px;
  margin-bottom: 1.5rem;
}
.hero h1 em { color: var(--white); font-style: normal; }
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.75);
  max-width: 540px; line-height: 1.75;
  margin-bottom: 2.5rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
.hero-locs {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
  padding-top: 0.5rem;
}
.hero-loc {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 500;
  color: rgba(255,255,255,0.6);
}

/* ---- Hero Compact ---- */
.hero-compact {
  background-image:
    linear-gradient(135deg, rgba(37,56,150,0.82) 0%, rgba(23,54,148,0.68) 100%),
    image-set(
      url('hero-bg.avif')      type('image/avif'),
      url('hero-bg-web.webp')  type('image/webp'),
      url('hero-background.png') type('image/png')
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 8rem 0 4.5rem;
  text-align: center; position: relative; overflow: hidden;
}
.hero-compact::before {
  content: '';
  position: absolute; top: -40%; right: -5%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,141,217,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.hero-compact::after {
  content: '';
  position: absolute; bottom: -40%; left: -5%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.hero-compact h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900; color: var(--white);
  margin-bottom: 1rem; position: relative;
}
.hero-compact p {
  font-size: 1.05rem; color: rgba(255,255,255,0.7);
  max-width: 500px; margin: 0 auto; position: relative;
}

/* ============================================================
   GRIDS
   ============================================================ */
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.5rem; }

/* ============================================================
   PROBLEM CARDS
   ============================================================ */
.problem-section { background: var(--gray-light); }
.problem-section .grid-3 { grid-auto-rows: 1fr; }
.problem-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.875rem 1.875rem 1.875rem 1.625rem;
  border-left: 4px solid var(--blue-accent);
  box-shadow: var(--shadow-sm);
  display: flex; gap: 1.25rem; align-items: flex-start;
  transition: transform var(--transition), box-shadow var(--transition);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.problem-icon {
  width: 52px; height: 52px;
  background: rgba(0,141,217,0.1); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.problem-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 0.5rem; }
.problem-card p  { font-size: 0.9rem; color: var(--text-light); line-height: 1.7; }

/* ============================================================
   TARLI — 8 card + modale intermezzo
   ============================================================ */
.tarlo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  grid-auto-rows: 1fr;
}
.tarlo-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.625rem 1.5rem 1.375rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tarlo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,141,217,0.18);
}
.tarlo-icon {
  width: 48px;
  height: 48px;
  background: rgba(0,141,217,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 1rem;
}
.tarlo-frase {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-dark, #173694);
  line-height: 1.48;
  flex-grow: 1;
  margin-bottom: 1.1rem;
}
.btn-tarlo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #008DD9;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: gap 0.2s ease;
}
.btn-tarlo:hover { gap: 0.5rem; }
.tarlo-buy-btn {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  font-size: 0.88rem;
  padding: 0.5rem 1rem;
}
.tarlo-buy-price {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #5a6272;
}
.tarlo-buy-price del {
  color: #9ca3af;
  text-decoration-color: #9ca3af;
}
@media (max-width: 900px) {
  .tarlo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .tarlo-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* ── Modale overlay ── */
.tarlo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,24,68,0.72);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.tarlo-overlay.is-open { opacity: 1; visibility: visible; }
.tarlo-overlay.is-open .tarlo-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.tarlo-modal {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34,1.2,0.64,1), opacity 0.25s ease;
}
.tarlo-close {
  position: sticky;
  top: 0.75rem;
  float: right;
  margin: 0.75rem 0.75rem 0 0;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.tarlo-close:hover { background: rgba(255,255,255,0.28); }

/* Fascia 1 — SPECCHIO (navy) */
.tarlo-specchio {
  background: linear-gradient(160deg, #0d1f55 0%, #12277a 100%);
  padding: 2rem 2rem 2rem;
  color: #fff;
}
.tarlo-occhiello {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(201,168,76,0.85);
  margin-bottom: 0.75rem;
}
.tarlo-frase-grande {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.42;
  margin-bottom: 1rem;
  color: #fff;
}
.tarlo-specchio-testo {
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(255,255,255,0.65);
  line-height: 1.72;
  margin: 0;
}

/* Fascia 2 — PERCORSO (white) */
.tarlo-percorso {
  background: #fff;
  padding: 1.875rem 2rem 1.5rem;
}
.tarlo-percorso-titolo {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #008DD9;
  margin-bottom: 1.5rem;
}
.tarlo-tappe {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.tarlo-tappe::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 15px;
  bottom: 15px;
  width: 1px;
  background: rgba(0,141,217,0.2);
}
.tarlo-tappa {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  position: relative;
}
.tarlo-tappa:last-child { margin-bottom: 0; }
.tarlo-tappa-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #008DD9;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.tarlo-tappa-body { flex: 1; padding-top: 0.15rem; }
.tarlo-tappa-nome {
  font-size: 0.9rem;
  font-weight: 700;
  color: #173694;
  margin-bottom: 0.3rem;
}
.tarlo-tappa-nome a { color: inherit; text-decoration: none; }
.tarlo-tappa-nome a:hover { color: #008DD9; text-decoration: underline; }
.tarlo-tappa-dettaglio {
  font-size: 0.81rem;
  color: var(--text-light);
  line-height: 1.6;
}
.tarlo-tappa-dettaglio strong { font-weight: 600; color: var(--text-medium, #555); }

/* Fascia 3 — CHIUSURA + CTA (white) */
.tarlo-chiusura {
  background: #fff;
  padding: 0 2rem 2.25rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.tarlo-ora {
  background: rgba(0,184,107,0.09);
  border-left: 3px solid #00B86B;
  border-radius: 0 4px 4px 0;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #00703f;
  margin: 1.5rem 0;
  line-height: 1.5;
}
.tarlo-cta { display: inline-flex; align-items: center; gap: 0.4rem; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tarlo-overlay, .tarlo-modal { transition: none !important; }
  .tarlo-overlay.is-open .tarlo-modal { transform: none; }
}
/* Mobile modale — sheet dal basso */
@media (max-width: 620px) {
  .tarlo-overlay { padding: 0; align-items: flex-end; }
  .tarlo-modal { max-height: 93vh; border-radius: 16px 16px 0 0; }
  .tarlo-specchio { padding: 1.75rem 1.25rem 1.5rem; }
  .tarlo-percorso { padding: 1.5rem 1.25rem 1.25rem; }
  .tarlo-chiusura { padding: 0 1.25rem 2rem; }
  .tarlo-frase-grande { font-size: 1.08rem; }
}

/* ============================================================
   SERVICE CARDS (preview)
   ============================================================ */
.service-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem;
  border: 1px solid rgba(37,56,150,0.07);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.service-card-icon {
  width: 48px; height: 48px;
  background: rgba(0,141,217,0.1); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.25rem;
}
.service-card h3 { font-size: 0.975rem; font-weight: 700; color: var(--blue-dark); }
.service-card p  { font-size: 0.85rem; color: var(--text-light); line-height: 1.6; }

/* ============================================================
   SERVICE GRID — hover = anteprima · click = fissa + pannello
   ============================================================ */

.sg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-top: 2.5rem;
}

/* ── Card base ── */
.sg-card {
  background: var(--white);
  border: 1px solid rgba(37,56,150,0.1);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background 200ms ease, box-shadow 200ms ease;
  user-select: none;
  -webkit-user-select: none;
}
.sg-card:focus-visible { outline: 2px solid #D4B460; outline-offset: 2px; }

/* Card FISSATA (click): navy pieno + bordo oro */
.sg-card.is-locked {
  background: #12277a;
  box-shadow: inset 0 0 0 2px #D4B460, 0 4px 20px rgba(18,39,122,0.18);
}

/* Card SFIORATA (hover preview) — solo se non è anche fissata */
.sg-card.is-hovered:not(.is-locked) {
  box-shadow: inset 0 0 0 1.5px rgba(212,180,96,0.55);
  background: rgba(37,56,150,0.035);
}

/* ── Icona ── */
.sg-card-icon {
  width: 40px; height: 40px;
  background: rgba(0,141,217,0.09);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0.3rem;
  transition: background 200ms ease;
}
.sg-card.is-locked .sg-card-icon { background: rgba(212,180,96,0.15); }

/* Viraggio icona SVG → oro (solo card fissata) */
.sg-card.is-locked .sg-card-icon svg *[stroke="#008DD9"] { stroke: #D4B460; }
.sg-card.is-locked .sg-card-icon svg *[fill="#008DD9"]   { fill:  #D4B460; }
.sg-card.is-locked .sg-card-icon svg *[stroke="white"]   { stroke: rgba(255,255,255,0.85); }

/* ── Titolo ── */
.sg-card-name {
  font-size: 0.875rem; font-weight: 700;
  color: var(--blue-dark, #173694);
  line-height: 1.3; margin: 0 0 0.15rem;
  transition: color 200ms ease;
}
.sg-card.is-locked .sg-card-name { color: #fff; }

/* ── Sottotitolo ── */
.sg-card-sub {
  font-size: 0.77rem; color: #6b7a99;
  line-height: 1.45; margin: 0;
  transition: color 200ms ease;
}
.sg-card.is-locked .sg-card-sub { color: rgba(143,180,232,0.9); }

/* ── Pannello descrizione (sotto la griglia) ── */

/* Pannello: colonna flex così il footer CTA si ancora in basso.
   min-height è calibrata via JS su tutti i testi per evitare CLS. */
.sg-panel {
  margin-top: 1rem;
  background: #12277a;
  border: 1px solid rgba(212,180,96,0.30);
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1.2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.sg-panel-inner {
  display: flex;
  flex-direction: column;
  flex: 1;             /* si estende a riempire il pannello */
  transition: opacity 120ms ease;
}
.sg-panel-inner.is-fading { opacity: 0; }

/* +1-2px rispetto al precedente 0.875rem → 0.95rem */
.sg-panel-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.75;
  margin: 0 0 0.9rem;
  flex: 1;             /* il testo cresce, il footer resta ancorato in basso */
}

/* Footer: hint a sinistra, CTA spinta a destra con margin-left: auto */
.sg-panel-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

.sg-panel-cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 1.1rem;
  margin-left: auto;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 7px;
  color: #fff;
  font-size: 0.82rem; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s;
}
.sg-panel-cta:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.sg-panel-cta--gold { border-color: #D4B460; color: #D4B460; }
.sg-panel-cta--gold:hover { background: rgba(212,180,96,0.15); }

.sg-panel-hint {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.42);
  font-style: italic;
  flex-shrink: 0;
  transition: opacity 160ms ease;
}
.sg-panel-hint.is-hidden { opacity: 0; pointer-events: none; }

/* Placeholder non più necessario: le card non si espandono */
.sg-placeholder { display: none; }

/* ── Touch / no-hover ── */
@media (hover: none) {
  .sg-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  /* Su touch il pannello è più stretto: CTA sotto il testo a tutta larghezza */
  .sg-panel-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .sg-panel-cta {
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  .sg-panel-hint { text-align: center; }
}

/* ── Tablet ≤1100px ── */
@media (hover: hover) and (max-width: 1100px) {
  .sg-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Piccolo tablet ≤720px ── */
@media (hover: hover) and (max-width: 720px) {
  .sg-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile stretto ≤480px ── */
@media (hover: none) and (max-width: 480px) {
  .sg-grid { grid-template-columns: 1fr; }
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .sg-card,
  .sg-card-icon,
  .sg-card-name,
  .sg-card-sub,
  .sg-panel-inner,
  .sg-panel-hint { transition: none; }
}

/* ============================================================
   PRODUCT CARDS — Vetrina Prodotti (home)
   ============================================================ */
.product-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(37,56,150,0.07);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.product-card-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.5rem;
}
.product-card-icon svg { width: 64px; height: 64px; }
.product-card h3 {
  font-size: 0.975rem; font-weight: 700; color: var(--blue-dark);
}
.product-question {
  font-size: 0.82rem; color: var(--text-light); font-style: italic;
  flex-grow: 1;
}
.product-price {
  font-size: 0.875rem; font-weight: 600; color: var(--text-medium);
  margin-top: 0.75rem;
  min-height: 1.3em;
}

/* ============================================================
   VETRINA PRODOTTI — dark navy variant
   ============================================================ */
.prodotti-navy {
  background-color: #0a1844;
  background-image: url("products-bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.prodotti-navy .section-title    { color: var(--white); }
.prodotti-navy .section-subtitle { color: rgba(255,255,255,0.72); }

.prodotti-badge {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.28rem 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.90);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Timeline line — desktop only */
.grid-5-wrap {
  position: relative;
  margin-top: 2.5rem;
  padding-bottom: 44px;
}
.grid-5-wrap::after {
  content: "";
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  height: 8px;
  /* line + 5 dots centred on each card column (10% 30% 50% 70% 90%) */
  background:
    linear-gradient(rgba(201,168,76,0.45), rgba(201,168,76,0.45)) left center / 100% 1.5px no-repeat,
    radial-gradient(circle, rgba(201,168,76,0.65) 4px, transparent 4px) 10% center / 8px 8px no-repeat,
    radial-gradient(circle, rgba(201,168,76,0.65) 4px, transparent 4px) 30% center / 8px 8px no-repeat,
    radial-gradient(circle, rgba(201,168,76,0.65) 4px, transparent 4px) 50% center / 8px 8px no-repeat,
    radial-gradient(circle, rgba(201,168,76,0.65) 4px, transparent 4px) 70% center / 8px 8px no-repeat,
    radial-gradient(circle, rgba(201,168,76,0.65) 4px, transparent 4px) 90% center / 8px 8px no-repeat;
  pointer-events: none;
}

/* Cards on dark background */
.prodotti-navy .product-card {
  background: var(--white);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.14);
}
@media (hover: hover) {
  .prodotti-navy .product-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 8px 28px rgba(201,168,76,0.32),
      0 20px 56px rgba(201,168,76,0.20);
  }
}

/* Featured card — Dashboard Bilancio */
.product-card--featured {
  position: relative;
  border: 2px solid var(--gold) !important;
}
.featured-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.7rem;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: uppercase;
}

.featured-badge--sm { font-size: 0.58rem; }

/* Hide timeline on tablet/mobile */
@media (max-width: 1024px) {
  .grid-5-wrap::after  { display: none; }
  .grid-5-wrap         { padding-bottom: 0; }
}

/* ============================================================
   PRODOTTI — gruppi (home, vetrina a 3 fasce)
   ============================================================ */
.prodotti-gruppo { margin-top: 2.75rem; }

.prodotti-gruppo-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.prodotti-gruppo-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.13);
}
.prodotti-gruppo-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
  flex-shrink: 0;
}
.prodotti-gruppo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1024px) {
  .prodotti-gruppo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .prodotti-gruppo-grid { grid-template-columns: 1fr; }
}

/* Gruppo con riga incompleta — stessa tecnica di .team-grid-members in chi-siamo.
   Flex + justify-content:center centra automaticamente qualsiasi riga corta.
   Larghezza card = colonna della griglia a 4: (100% - 3 gap) / 4            */
.prodotti-gruppo-grid--centrato {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.prodotti-gruppo-grid--centrato .product-card {
  flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
}
@media (max-width: 1024px) {
  .prodotti-gruppo-grid--centrato .product-card {
    flex: 0 0 calc((100% - 1.25rem) / 2);
  }
}
@media (max-width: 540px) {
  .prodotti-gruppo-grid--centrato .product-card {
    flex: 0 0 100%;
  }
}

/* Mobile nav — etichette di gruppo nella tendina */
.mobile-group-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.42);
  padding: 0.8rem 0 0.2rem;
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 0.3rem;
}
.mobile-group-label:first-child { border-top: none; margin-top: 0; }

/* ============================================================
   WHY SECTION
   ============================================================ */
.why-section { background: var(--blue-dark); }
.why-section .section-title    { color: var(--white); }
.why-section .section-subtitle { color: rgba(255,255,255,0.6); }
.why-card { text-align: center; padding: 2.5rem 1.5rem; }
.why-icon {
  width: 68px; height: 68px;
  background: rgba(0,141,217,0.15); border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.why-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 0.875rem; }
.why-card p  { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.75; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { background: linear-gradient(180deg, #eef3fb 0%, #ffffff 45%, #ffffff 100%); }
.testimonial-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2.25rem; box-shadow: var(--shadow-md);
  transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
  .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.t-quote  { font-size: 3.5rem; line-height: 0.8; color: var(--blue-accent); font-family: Georgia, serif; margin-bottom: 0.75rem; }
.t-text   { font-size: 0.95rem; color: var(--text-medium); line-height: 1.75; font-style: italic; margin-bottom: 1.5rem; }
.t-author { font-weight: 700; color: var(--blue-dark); font-size: 0.95rem; }
.t-role   { font-size: 0.8rem; color: var(--text-light); margin-top: 0.15rem; }
.testimonials-note { text-align: center; margin-top: 2rem; font-size: 0.8rem; color: var(--text-light); font-style: italic; }

.casi-divider{border:none;border-top:1px solid #E6E9F2;max-width:1100px;margin:3rem auto}
.casi-altri{max-width:1100px;margin:0 auto}
.casi-eyebrow{text-align:center;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#008DD9;font-weight:700;margin-bottom:1.6rem}
.casi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.caso-card{background:#fff;border:1px solid #E6E9F2;border-radius:16px;padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;transition:box-shadow .2s,transform .2s}
.caso-card:hover{box-shadow:0 10px 30px rgba(37,56,150,.10);transform:translateY(-3px)}
.caso-num{font-size:.75rem;font-weight:700;color:#008DD9;letter-spacing:.1em}
.caso-settore{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#6C7884;font-weight:600}
.caso-tipo{margin:.15rem 0 .1rem;font-size:1.05rem;color:#173694;font-weight:700;line-height:1.25}
.caso-desc{font-size:.9rem;line-height:1.5;color:#253896;margin:0;flex-grow:1}
.caso-std{align-self:flex-start;margin-top:.4rem;font-size:.72rem;font-weight:600;color:#253896;background:#F5F7FC;border:1px solid #E6E9F2;border-radius:999px;padding:.28rem .7rem}
.casi-disclaimer{text-align:center;font-size:.8rem;color:#6C7884;margin-top:1.4rem;font-style:italic}
@media(max-width:900px){.casi-grid{grid-template-columns:1fr}}
.testimonial-card--foto .t-foto{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:1rem}
.testimonial-card--foto .t-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Slider testimonianza singola ── */
.testimonials-single{max-width:430px;margin:0 auto}
.testimonial-card--slider .t-carousel{position:relative;margin-bottom:1.25rem}
.t-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:12px;scrollbar-width:none;-ms-overflow-style:none}
.t-track::-webkit-scrollbar{display:none}
.t-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:16/9}
.t-slide img{width:100%;height:100%;object-fit:cover;display:block}
.t-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);border:none;box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;display:grid;place-items:center;color:var(--blue-dark);font-size:1rem;line-height:1}
.t-arrow:hover{background:#fff}
.t-arrow.prev{left:8px}.t-arrow.next{right:8px}
.t-dots{display:flex;gap:6px;justify-content:center;margin-top:.6rem}
.t-dot{width:7px;height:7px;border-radius:50%;background:#cfd8ea;border:none;padding:0;cursor:pointer;transition:width .2s,background .2s}
.t-dot.active{background:var(--blue-accent);width:18px;border-radius:4px}
.t-lavoro{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--blue-primary);background:#F5F7FC;border:1px solid #E6E9F2;border-left:3px solid var(--gold);border-radius:6px;padding:.32rem .75rem;margin-bottom:1rem}
.t-cliente{font-weight:700;color:var(--blue-dark);font-size:1.05rem;line-height:1.3}
.t-settore{font-size:.82rem;color:var(--text-light);margin-top:.2rem}
@media (max-width:480px){.t-arrow{width:30px;height:30px}}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  background-color: #070f2c;
  background-image: url("cta-bg.svg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.cta-section .section-title    { color: var(--white); }
.cta-section .section-subtitle { color: rgba(255,255,255,0.8); }
/* Numero in evidenza oro */
.num-gold { color: var(--gold); font-weight: 700; }

/* Sottotitolo con sottolineatura oro finissima */
.gold-underline {
  display: inline-block;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
}
.cta-form { max-width: 680px; margin: 0 auto; }
.cta-form .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.cta-fg { display: flex; flex-direction: column; gap: 0.35rem; }
.cta-form label { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.cta-form input,
.cta-form textarea {
  padding: 0.875rem 1rem; border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.12);
  color: var(--white); font-family: inherit; font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.cta-form input::placeholder,
.cta-form textarea::placeholder { color: rgba(255,255,255,0.45); }
.cta-form input:focus,
.cta-form textarea:focus { border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.18); }
.cta-form textarea { resize: vertical; min-height: 120px; margin-bottom: 1rem; }
.cta-contacts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2rem; margin-top: 2.5rem;
}
.cta-contact-item {
  display: flex; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.8); font-size: 0.9rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--text-dark); padding: 4.5rem 0 2rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr 1.1fr;
  gap: 3rem; padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 2rem;
}
.footer .afb { font-size: 1.75rem; font-weight: 900; color: var(--white); }
.footer .afb span { color: var(--blue-accent); }
.footer .tagline-f {
  font-size: 0.6rem; font-weight: 500;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px; text-transform: uppercase;
  display: block; margin-bottom: 1rem;
}
.footer-brand p { font-size: 0.875rem; color: rgba(255,255,255,0.4); line-height: 1.7; max-width: 240px; }
.footer-col h4 {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: rgba(255,255,255,0.85); margin-bottom: 1.25rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul li a { font-size: 0.875rem; color: rgba(255,255,255,0.45); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--blue-accent); }
.footer-contact-line {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: rgba(255,255,255,0.45);
  margin-bottom: 0.65rem;
}
.footer-contact-line a { color: rgba(255,255,255,0.45); transition: color var(--transition); }
.footer-contact-line a:hover { color: var(--blue-accent); }
.footer-sedi { margin-top: 0.75rem; font-size: 0.8rem; color: rgba(255,255,255,0.3); line-height: 1.9; }
.footer-bottom {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem; font-size: 0.78rem; color: rgba(255,255,255,0.3);
}
.footer-bottom a { color: rgba(255,255,255,0.3); transition: color var(--transition); }
.footer-bottom a:hover { color: var(--blue-accent); }

/* ============================================================
   SERVIZI PAGE — Detail sections
   ============================================================ */
.service-detail { padding: 5rem 0; }
.service-detail:nth-child(odd)  { background: var(--white); }
.service-detail:nth-child(even) { background: var(--gray-light); }
.sd-grid { display: grid; grid-template-columns: 1fr 1.55fr; gap: 4rem; align-items: center; }
.sd-grid.rev { direction: rtl; }
.sd-grid.rev > * { direction: ltr; }
.sd-visual {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-primary));
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.sd-visual::before {
  content: '';
  position: absolute; top: -20%; right: -20%;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(0,141,217,0.18);
}
.sd-visual::after {
  content: '';
  position: absolute; bottom: -15%; left: -15%;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.sd-big-icon {
  width: 88px; height: 88px;
  background: rgba(0,141,217,0.11); border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
.sd-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--blue-dark); margin-bottom: 1rem; }
.sd-content .desc { font-size: 0.975rem; color: var(--text-medium); line-height: 1.8; margin-bottom: 1.5rem; }
.a-chi h4 {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-light); margin-bottom: 0.75rem;
}
.a-chi ul { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; }
.a-chi li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--text-medium); }
.a-chi li::before {
  content: '';
  flex-shrink: 0; width: 6px; height: 6px;
  background: var(--blue-accent); border-radius: 50%;
  margin-top: 0.45rem;
}

/* ============================================================
   CHI SIAMO PAGE
   ============================================================ */
.team-card-large {
  background: var(--white); border-radius: var(--radius-lg); padding: 3rem;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(37,56,150,0.08);
  position: relative;   /* ancora per .badge-socio */
  transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
  .team-card-large:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

/* Badge "Socio" — navy tenue, angolo top-right, non oro */
.badge-socio {
  position: absolute;
  top: 1.25rem; right: 1.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-dark);
  background: rgba(37,56,150,0.06);
  border: 1px solid rgba(37,56,150,0.22);
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  line-height: 1.4;
  user-select: none;
}

/* Griglia 5 membri — flexbox con justify-content:center centra automaticamente
   qualsiasi riga incompleta (ultima riga da 2, o da 1 su tablet). */
.team-grid-members {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2.5rem;
}
/* Desktop: 3 per riga esatte — 2 gap × 2rem = 4rem sottratti */
.team-grid-members .team-card-large {
  flex: 0 0 calc((100% - 4rem) / 3);
}
/* Tablet: 2 per riga — 1 gap × 2rem = 2rem sottratti */
@media (max-width: 860px) {
  .team-grid-members .team-card-large {
    flex: 0 0 calc((100% - 2rem) / 2);
  }
}
/* Mobile: 1 per riga */
@media (max-width: 520px) {
  .team-grid-members .team-card-large {
    flex: 0 0 100%;
  }
}
.avatar-large {
  width: 110px; height: 110px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.25rem; font-weight: 800; color: var(--white);
  letter-spacing: -1px; margin-bottom: 1.5rem;
  border: 4px solid rgba(0,141,217,0.2);
}
.team-card-large h3   { font-size: 1.4rem; font-weight: 800; color: var(--blue-dark); margin-bottom: 0.3rem; }
.team-card-large .role { font-size: 0.875rem; font-weight: 600; color: var(--blue-accent); margin-bottom: 1.25rem; }
.team-card-large .bio  { font-size: 0.925rem; color: var(--text-medium); line-height: 1.8; margin-bottom: 1.5rem; }
.linkedin-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(0,119,181,0.08); color: #0077B5;
  border: 1px solid rgba(0,119,181,0.2);
  padding: 0.5rem 1rem; border-radius: 6px;
  font-size: 0.82rem; font-weight: 600;
  transition: all var(--transition);
}
.linkedin-btn:hover { background: rgba(0,119,181,0.15); }
.valori-section { background: var(--gray-light); }
.valore-card {
  background: var(--white); border-radius: var(--radius);
  padding: 2rem 1.75rem;
  border-top: 3px solid var(--blue-accent); box-shadow: var(--shadow-sm);
  transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
  .valore-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.valore-num { font-size: 2.5rem; font-weight: 900; color: rgba(37,56,150,0.07); line-height: 1; margin-bottom: 0.5rem; }
.valore-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 0.75rem; }
.valore-card p  { font-size: 0.875rem; color: var(--text-light); line-height: 1.7; }
.storia-section { background: var(--blue-dark); }
.storia-section .section-title    { color: var(--white); }
.storia-section .section-subtitle { color: rgba(255,255,255,0.6); }
.storia-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding: 3rem 2.5rem;
  text-align: left; max-width: 760px; margin: 0 auto;
}
.storia-box p { color: rgba(255,255,255,0.88); font-size: 0.975rem; line-height: 1.85; }
.storia-box p + p { margin-top: 1.25rem; }

/* ============================================================
   RETI DI APPARTENENZA
   ============================================================ */
.reti-section { background: var(--white); }

.reti-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}

/* flex-wrap: aggiungere una seconda .rete-item affianca automaticamente le due card */
.reti-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2.5rem;
}

.rete-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex: 1 1 340px;
  max-width: 620px;
  background: var(--gray-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid rgba(37,56,150,0.07);
}

/* Spazio fisso 80×80: nessun CLS quando il logo reale sostituirà il placeholder */
.rete-logo-wrap { flex-shrink: 0; width: 80px; height: 80px; }

.rete-logo-placeholder {
  width: 80px; height: 80px;
  border-radius: 12px;
  background: #eef3fb;
  border: 1.5px solid rgba(37,56,150,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800;
  color: var(--blue-primary);
  letter-spacing: -1px;
  user-select: none;
}

/* Stesse dimensioni del placeholder: il layout non salta alla sostituzione */
.rete-logo-wrap img {
  width: 80px; height: 80px;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

.rete-name {
  font-size: 1.05rem; font-weight: 700;
  color: var(--blue-dark);
  margin: 0 0 0.65rem;
}

.rete-desc {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.75;
  margin: 0;
}
.rete-membri{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.55rem}
.rete-membri li{position:relative;padding-left:1.1rem;font-size:.92rem;line-height:1.45;color:#253896}
.rete-membri li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#008DD9}
.rete-membri strong{color:#173694}

@media (max-width: 540px) {
  .rete-item { flex-direction: column; gap: 1rem; }
}

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pull-quote {
  border-left: 3px solid var(--gold, #C9A84C);
  margin: 2.5rem 0;
  padding: 0.5rem 0 0.5rem 2rem;
}
.pull-quote blockquote {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 600;
  color: var(--blue-dark, #173694);
  line-height: 1.55;
  font-style: italic;
  margin: 0 0 0.75rem;
}
.pull-quote cite {
  font-size: 0.82rem;
  font-style: normal;
  color: #6b7a99;
  font-weight: 500;
}

/* ============================================================
   CONTATTI PAGE
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; align-items: start; }
.contact-form-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 3rem;
  box-shadow: var(--shadow-md); border: 1px solid rgba(37,56,150,0.06);
}
.contact-form-card h2 { font-size: 1.5rem; font-weight: 800; color: var(--blue-dark); margin-bottom: 0.4rem; }
.contact-form-card > p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1.25rem; }
.form-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-medium); }
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select {
  padding: 0.875rem 1rem; border-radius: 8px;
  border: 1.5px solid rgba(37,56,150,0.15);
  background: var(--white); color: var(--text-dark);
  font-family: inherit; font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(107,114,128,0.6); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(0,141,217,0.1);
}
.form-group textarea { resize: vertical; min-height: 150px; }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem; cursor: pointer;
}
.contact-info-side { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 0.5rem; }
.contact-info-card {
  background: var(--white); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(37,56,150,0.06);
  display: flex; gap: 1rem; align-items: flex-start;
  transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
  .contact-info-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.ci-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(0,141,217,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-card h4 {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-light); margin-bottom: 0.25rem;
}
.contact-info-card a,
.contact-info-card p { font-size: 0.925rem; font-weight: 600; color: var(--blue-dark); display: block; }
.contact-info-card small { font-size: 0.78rem; color: var(--text-light); display: block; margin-top: 0.15rem; }
.sedi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.875rem; margin-top: 1rem; }
.sede-chip { background: var(--gray-light); border-radius: 8px; padding: 0.875rem; text-align: center; }
.sede-chip h5 { font-size: 0.8rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 0.15rem; }
.sede-chip p  { font-size: 0.72rem; color: var(--text-light); }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }

/* ============================================================
   HERO ENTRY ANIMATIONS
   ============================================================ */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-pill { animation: fadeInDown 0.7s ease both; }
.anim-h1   { animation: fadeInDown 0.8s ease 0.1s both; }
.anim-sub  { animation: fadeInUp  0.8s ease 0.3s both; }
.hero-standard{display:inline-block;margin:0 0 1rem;font-size:.74rem;font-weight:600;letter-spacing:.04em;color:#eaf1ff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.32rem .8rem}
/* ── Link inline nelle guide — sottolineati ── */
.blocco-insight p a,.blocco-insight li a,.blocco-insight .firma-box a,.db-hero--guida p a{text-decoration:underline;text-underline-offset:2px}
.blocco-insight p a:hover,.blocco-insight li a:hover,.blocco-insight .firma-box a:hover,.db-hero--guida p a:hover{color:#173694}
.blocco-insight p a.btn,.blocco-insight li a.btn,.guida-cta-card .btn{text-decoration:none}
.anim-cta  { animation: fadeIn    0.7s ease 0.6s both; }
.anim-prof { animation: fadeIn    0.7s ease 0.73s both; }
.anim-locs { animation: fadeIn    0.7s ease 0.85s both; }

/* prefers-reduced-motion: show everything in final state, no movement */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .anim-pill, .anim-h1, .anim-sub, .anim-cta, .anim-prof, .anim-locs {
    animation-duration: 0.01ms !important;
    animation-delay:    0s !important;
  }
  * { transition-duration: 0.01ms !important; }
  .read-progress { display: none !important; }
}

/* ============================================================
   PROGRESS BAR — product pages only
   ============================================================ */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  z-index: var(--z-progress);
  pointer-events: none;
}


/* ================================================================
   PERCORSO TEASER — anteprima del metodo (home page)
   ================================================================ */
.percorso-teaser {
  background: linear-gradient(180deg, #0d1f55 0%, #12277a 55%, #0e2260 100%);
  padding: 5rem 0 5.5rem;
}

.percorso-teaser-inner {
  display: flex;
  align-items: center;
  gap: 5rem;
}

.percorso-teaser-testo {
  flex: 1;
  min-width: 0;
}

.percorso-teaser-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C9A84C;
  margin: 0 0 1rem;
}

.percorso-teaser-titolo {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 1.1rem;
}

.percorso-teaser-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.75;
  margin: 0 0 2.25rem;
  max-width: 420px;
}

.percorso-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Preview timeline ── */
.percorso-teaser-preview {
  width: 280px;
  flex-shrink: 0;
}

.pt-timeline {
  display: flex;
  flex-direction: column;
}

.pt-step {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.pt-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12px;
  flex-shrink: 0;
}

.pt-nodo {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #C9A84C;
  flex-shrink: 0;
  margin-top: 5px;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.35s ease, transform 0.38s ease;
}

.pt-line {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: #C9A84C;
  margin-top: 3px;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.45s ease;
}

.pt-line--fade {
  background: linear-gradient(to bottom, #C9A84C 0%, rgba(201, 168, 76, 0) 100%);
  min-height: 44px;
}

.pt-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  background: #fff;
  border-radius: 10px;
  padding: 0.9rem 1.1rem 1.4rem;
  box-shadow:
    0 4px 22px rgba(0, 0, 0, 0.32),
    inset 0 0 0 3px #fff,
    inset 0 0 0 4px rgba(37, 56, 150, 0.15);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.pt-step--last .pt-card {
  padding-bottom: 0.9rem;
}

.pt-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #173694;
  display: block;
  line-height: 1.25;
}

.pt-payoff {
  font-size: 0.75rem;
  color: #4a5880;
  font-style: italic;
  display: block;
  line-height: 1.4;
}

.pt-continua {
  font-size: 0.77rem;
  color: rgba(201, 168, 76, 0.5);
  letter-spacing: 0.04em;
  font-style: italic;
  margin: 0.25rem 0 0 1.5rem;
}

/* ── Animated state (JS aggiunge .percorso-teaser--acceso) ── */
.percorso-teaser--acceso .pt-nodo {
  opacity: 1;
  transform: scale(1);
}

.percorso-teaser--acceso .pt-line {
  opacity: 1;
  transform: scaleY(1);
}

.percorso-teaser--acceso .pt-card {
  opacity: 1;
  transform: none;
}

/* Delays sequenziali: nodo → card → linea → step successivo */
.pt-step:nth-child(1) .pt-nodo { transition-delay: 0ms; }
.pt-step:nth-child(1) .pt-card { transition-delay: 80ms; }
.pt-step:nth-child(1) .pt-line { transition-delay: 220ms; }
.pt-step:nth-child(2) .pt-nodo { transition-delay: 400ms; }
.pt-step:nth-child(2) .pt-card { transition-delay: 480ms; }
.pt-step:nth-child(2) .pt-line { transition-delay: 620ms; }
.pt-step:nth-child(3) .pt-nodo { transition-delay: 800ms; }
.pt-step:nth-child(3) .pt-card { transition-delay: 880ms; }
.pt-step:nth-child(3) .pt-line { transition-delay: 1020ms; }

@media (prefers-reduced-motion: reduce) {
  .pt-nodo,
  .pt-line,
  .pt-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .percorso-teaser {
    padding: 4rem 0 4.5rem;
  }

  .percorso-teaser-inner {
    flex-direction: column;
    gap: 2.5rem;
  }

  .percorso-teaser-preview {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  .percorso-teaser-sub {
    max-width: 100%;
  }
  .percorso-mappa-inner > svg {
    display: none;
  }
}


/* ================================================================
   METODO CODA — sezione servizi aggiuntivi in percorso.html
   ================================================================ */
.metodo-coda {
  background: #fff;
  padding: 5rem 0 5.5rem;
  border-top: 2px solid rgba(37, 56, 150, 0.07);
}

.metodo-coda-intro {
  max-width: 700px;
}

.metodo-coda-titolo {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: #173694;
  line-height: 1.25;
  margin: 0 0 1.25rem;
}

.metodo-coda-testo {
  font-size: 1.05rem;
  color: #4a5568;
  line-height: 1.85;
  margin: 0;
}

.metodo-coda-cards {
  margin-top: 3.5rem;
}

/* CODA CARDS — due servizi in appendice al percorso */
.metodo-coda-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.coda-card {
  background: #f8faff;
  border: 1px solid #dde4f2;
  border-radius: 12px;
  padding: 2rem 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
}

.coda-card-titolo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-dark, #173694);
  margin: 0 0 0.3rem;
  line-height: 1.25;
}

.coda-card-sottotitolo {
  font-size: 0.88rem;
  color: #4a5880;
  font-style: italic;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.coda-card-testo {
  font-size: 0.93rem;
  color: #4a5568;
  line-height: 1.75;
  margin: 0 0 1.5rem;
  flex: 1;
}

.coda-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  border: 2px solid var(--blue-primary, #253896);
  border-radius: 8px;
  color: var(--blue-primary, #253896);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.18s ease, color 0.18s ease;
}

.coda-card-cta:hover,
.coda-card-cta:focus {
  background: var(--blue-primary, #253896);
  color: #fff;
}

@media (max-width: 768px) {
  .metodo-coda {
    padding: 3.5rem 0 4rem;
  }

  .metodo-coda-titolo {
    font-size: 1.45rem;
  }

  .metodo-coda-testo {
    font-size: 0.97rem;
  }

  .metodo-coda-grid {
    grid-template-columns: 1fr;
  }
}

/* ── CODA GROUPS — etichette di gruppo ── */
.coda-group + .coda-group { margin-top: 3.5rem; }

.coda-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #8a96b4;
  margin: 0 0 1.25rem;
}

/* Alta specializzazione — una per riga, bordo oro */
.metodo-coda-grid--speciale {
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.coda-card--speciale {
  border-left: 3px solid var(--gold, #C9A84C);
  background: #fff;
}

/* Paragrafi multipli dentro la card */
.coda-card-testo > p { margin: 0 0 0.8em; }
.coda-card-testo > p:last-child { margin-bottom: 0; }

/* Riga Rete — discreta, a piè di card */
.coda-card-rete {
  font-size: 0.79rem;
  color: #8a96b4;
  font-style: italic;
  border-top: 1px solid #e0e6f0;
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ============================================================
   SOCIAL PROOF — Dicono di noi
   ============================================================ */
.social-proof {
  background: #f4f6fb;
}

.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
  max-width: 720px; /* una card non si allarga a tutto schermo */
}

.sp-card {
  background: #fff;
  border-radius: 14px;
  padding: 2rem 2.25rem;
  box-shadow: 0 2px 20px rgba(37, 56, 150, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sp-card--stampa {
  border-left: 3px solid var(--gold, #C9A84C);
}

.sp-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #C9A84C);
}

.sp-testata {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7a99;
  margin: 0;
  letter-spacing: 0.02em;
}

.sp-titolo-articolo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-dark, #173694);
  margin: 0;
  line-height: 1.3;
}

.sp-citazione {
  margin: 0.2rem 0 0;
  font-size: 0.97rem;
  color: #3a4a6b;
  line-height: 1.75;
  font-style: italic;
}

.sp-virgolette {
  font-size: 2.4rem;
  line-height: 0;
  vertical-align: -0.55rem;
  color: var(--gold, #C9A84C);
  font-style: normal;
  margin-right: 0.08em;
  opacity: 0.5;
}

.sp-attribuzione {
  font-size: 0.78rem;
  color: #8a97b5;
  margin: 0.25rem 0 0;
  border-top: 1px solid #eaeef6;
  padding-top: 0.75rem;
}

/* Struttura card testimonianza (per implementazione futura) */
.sp-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--blue-primary, #253896);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-nome {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-dark, #173694);
  margin: 0;
}

.sp-settore {
  font-size: 0.78rem;
  color: #8a97b5;
  margin: 0;
}

/* Sotto-blocco "Nella stampa" dentro la sezione testimonials */
.dicono-stampa {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid #e4e9f5;
}

.dicono-stampa-eyebrow {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a97b5;
  margin: 0 0 1.25rem;
}

.dicono-stampa .sp-card {
  max-width: 520px;
}

@media (max-width: 640px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-card { padding: 1.5rem 1.75rem; }
}

/* ============================================================
   FOCUS VISIBLE — keyboard navigation
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--blue-accent);
  outline-offset: 3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 992px) {
  .product-card-icon,
  .product-card-icon svg { width: 72px; height: 72px; }
}
@media (max-width: 1024px) {
  .grid-5       { grid-template-columns: repeat(3,1fr); }
  .grid-4       { grid-template-columns: repeat(2,1fr); }
  .footer-grid  { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .sd-grid      { grid-template-columns: 1fr; gap: 2rem; }
  .sd-grid.rev  { direction: ltr; }
  .sd-visual    { display: none; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-form-card,
  .contact-info-card { min-width: 0; }
}
@media (max-width: 768px) {
  .section-pad  { padding: 3.5rem 0; }
  .nav-links    { display: none; }
  .hamburger    { display: flex; }
  .nav-logo-img { max-height: 40px; }
  .grid-5       { grid-template-columns: repeat(2,1fr); }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .hero         { min-height: auto; padding-top: 90px; padding-bottom: 3rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .footer-grid  { grid-template-columns: 1fr; gap: 2rem; }
  .cta-form .form-row-2 { grid-template-columns: 1fr; }
  .form-row     { grid-template-columns: 1fr; }
  .sedi-grid    { grid-template-columns: 1fr; }
  .contact-form-card { padding: 2rem 1.5rem; }
  .team-card-large   { padding: 2rem; }
  /* Fix 1 — hero locs su una riga */
  .hero-locs { gap: 0.75rem; }
  .hero-loc  { font-size: 0.78rem; }
  /* Fix 2 — contact cards non sforano */
  .contact-form-card,
  .contact-info-card { box-sizing: border-box; width: 100%; max-width: 100%; }
  /* Fix 4 — placeholder Enrico nascosto su mobile */
  .cit-ritratto { display: none; }
}
@media (max-width: 480px) {
  .grid-5          { grid-template-columns: 1fr; }
  .hero h1         { font-size: 2rem; }
  .hero-compact h1 { font-size: 1.75rem; }
}

/* ══════════════════════════════════════════════════════════════
   SISTEMA PROMO PREZZI  —  interruttore: const PROMO in main.js
   Il CSS legge il data-attribute impostato da JS su <body>:
     body[data-promo-lancio="on"]  → sbarre visibili
     body[data-promo-lancio="off"] → solo prezzo pieno (nessuna barra)
   ══════════════════════════════════════════════════════════════ */

/* .prezzo-pieno — di default è il prezzo normale (nessuna barratura).
   In promo lancio diventa sbarrato e tenue: il prezzo di lancio lo affianca. */
.prezzo-pieno {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--blue-dark, #173694);
  line-height: 1.2;
}
body[data-promo-lancio="on"] .prezzo-pieno {
  text-decoration: line-through;
  text-decoration-color: rgba(107, 114, 128, 0.45);
  color: #9ca3af;
  font-size: 1.05rem;
  font-weight: 500;
}

/* .prezzo-lancio — il prezzo scontato evidenziato.
   Nascosto per default; appare solo quando PROMO.lancio = true. */
.prezzo-lancio {
  display: none;
  font-size: 2rem;
  font-weight: 800;
  color: var(--blue-dark, #173694);
  line-height: 1.1;
  margin-top: 0.15rem;
}
body[data-promo-lancio="on"] .prezzo-lancio {
  display: block;
}

/* .prezzo-iva — dicitura IVA: sempre visibile, qualunque sia lo stato promo */
.prezzo-iva {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 0.2rem;
}

/* .badge-sconto — es. "-50%" o "Lancio". Nascosto per default. */
.badge-sconto {
  display: none;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--gold, #C9A84C);
  color: #fff;
  border-radius: 4px;
  padding: 0.22rem 0.6rem;
  margin-bottom: 0.5rem;
}
body[data-promo-lancio="on"] .badge-sconto {
  display: inline-block;
}

/* ── Hero rotator — frasi orizzontali scorrevoli ── */
.hero-rotator{ max-width:600px; margin-bottom:2.5rem; }
.hero-rotator__stem{
  display:block; font-size:clamp(.95rem,1.6vw,1.1rem); font-weight:500;
  color:rgba(255,255,255,.65); letter-spacing:.2px; margin-bottom:.6rem;
}
.hero-rotator__viewport{
  position:relative; display:flex; align-items:stretch; gap:.85rem; overflow:hidden;
}
.hero-rotator__accent{
  flex:0 0 auto; width:4px; border-radius:4px;
  background:linear-gradient(180deg, var(--blue-accent), var(--gold));
}
.hero-rotator__list{
  position:relative; flex:1 1 auto;
  height:clamp(3.4rem, 8vw, 4.3rem);
  list-style:none; margin:0; padding:0;
}
.hero-rotator__item{
  position:absolute; inset:0; margin:0; display:flex; align-items:center;
  font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:600; line-height:1.35; color:#fff;
  opacity:0; transform:translateX(100%); pointer-events:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.hero-rotator__item.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; }
.hero-rotator__item.is-leaving{ opacity:0; transform:translateX(-100%); }
.hero-rotator__progress{ display:flex; gap:7px; margin-top:1.1rem; }
.hero-rotator__seg{
  position:relative; width:30px; height:3px; padding:0; border:0; cursor:pointer;
  border-radius:3px; background:rgba(255,255,255,.2); overflow:hidden;
}
.hero-rotator__seg::after{
  content:""; position:absolute; inset:0; width:0; background:var(--blue-accent); border-radius:3px;
}
.hero-rotator__seg.is-active::after{ width:100%; transition:width 3.5s linear; }
@media (prefers-reduced-motion: reduce){
  .hero-rotator__item,
  .hero-rotator__item.is-active,
  .hero-rotator__item.is-leaving{ transform:none; transition:opacity .4s ease; }
  .hero-rotator__seg.is-active::after{ transition:none; }
}
@media (max-width: 480px){
  .hero-rotator__list{ height: 4.8rem; }
  .hero-rotator__item{ font-size: 1rem; line-height: 1.45; }
}