/* ================================================================
   inFactory Suite — Site CSS  v3
   Homepage + pagine sito · Brand: navy / mint / blue
   Allineato a Guidelines PDF Alessio (giugno 2026)
   ================================================================ */

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

:root {
  /* ── Brand core (Design System Giugno 2026 — Guidelines PDF Alessio) ── */
  --mint:        #01D5CA;   /* Brand teal — logo "F", dot, gradient start */
  --mint-dark:   #00b396;   /* Planner primary / hover */
  --mint-xl:     rgba(1,213,202,.12);
  --brand-blue:  #008EEB;   /* Logo wordmark end "y" */
  --brand-gradient: linear-gradient(-31deg, #01D5CA 0%, #008EEB 100%);

  /* ── Module colors — da Guidelines PDF Alessio + SVG brand assets ── */
  --mod-monitoring:   #7C3AED;
  --mod-monitoring-2: #2563EB;
  --mod-monitoring-l: #f5f3ff;
  --mod-monitoring-g: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);

  --mod-planner:      #00B896;
  --mod-planner-2:    #0077CC;
  --mod-planner-l:    #e6faf6;
  --mod-planner-g:    linear-gradient(135deg, #00B896 0%, #0077CC 100%);

  --mod-maintenance:  #F97316;
  --mod-maintenance-2:#F59E0B;
  --mod-maintenance-l:#fff7ed;
  --mod-maintenance-g:linear-gradient(135deg, #F97316 0%, #F59E0B 100%);

  --mod-warehouse:    #2563EB;
  --mod-warehouse-2:  #06B6D4;
  --mod-warehouse-l:  #eff6ff;
  --mod-warehouse-g:  linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);

  /* ── Neutrali & semantici ── */
  --navy:      #0f1923;   /* DS dark shell — heading & testo scuro */
  --navy-mid:  #1e3a5f;
  --blue:      #2563eb;   /* DS info / Warehouse */
  --accent:    #f97316;   /* DS warning / Maintenance */
  --gold:      #f59e0b;
  --gold-light:#fffbeb;
  --gold-border:rgba(245,158,11,.3);

  /* ── Superfici ── */
  --bg:        #f0f2f5;   /* DS surface bg */
  --surface:   #ffffff;
  --text:      #334155;   /* DS text2 */
  --text-light:#64748b;   /* DS text3 */
  --border:    #e2e8f0;   /* DS border */
  --border-hi: #cbd5e1;

  /* ── Ombre ── */
  --shadow-sm: 0 1px 4px rgba(15,25,35,.06), 0 1px 2px rgba(15,25,35,.04);
  --shadow:    0 4px 16px rgba(15,25,35,.08), 0 1px 4px rgba(15,25,35,.04);
  --shadow-md: 0 8px 32px rgba(15,25,35,.12), 0 2px 8px rgba(15,25,35,.06);
  --shadow-lg: 0 20px 60px rgba(15,25,35,.16), 0 4px 16px rgba(15,25,35,.08);

  /* ── Border radius (DS scale) ── */
  --r:         12px;   /* card */
  --r-sm:      8px;    /* btn / badge */
  --r-lg:      16px;   /* panel */
  --r-pill:    50px;

  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; overflow-x: clip; }
@media (max-width: 820px) { html { scroll-padding-top: 60px; } }
body { background: var(--bg); color: var(--navy); line-height: 1.6; font-size: 16px; overflow-x: clip; }

/* ── Global animations ─────────────────────────────────────────── */
@keyframes grad-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glow-mint {
  0%,100% { box-shadow: 0 4px 16px rgba(1,213,202,.28); }
  50%      { box-shadow: 0 6px 32px rgba(1,213,202,.62); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes shimmer-pass {
  0%   { left: -110%; }
  100% { left: 110%; }
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { font-family: "DM Sans",sans-serif; letter-spacing: -.025em; line-height: 1.15; }
.mono, .kpi-num, strong.kpi { font-family: "DM Mono", "DM Sans", monospace; }

/* ── Layout ── */
.container  { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.container-wide { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
section     { padding: 88px 0; }
.section-sm { padding: 56px 0; }

/* ── Grid helpers ── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ai-center { align-items: center; }
.ai-start  { align-items: start; }

/* ── Section header ── */
.eyebrow {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--mint-dark); display: block; margin-bottom: 10px;
}
.section-head       { max-width: 580px; margin-bottom: 52px; }
.section-head.center{ text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2    { font-size: clamp(26px,3.5vw,40px); font-weight: 700; margin-bottom: 14px; }
.section-head h2 em { font-style: normal; color: var(--mint-dark); }
.section-head p     { font-size: 17px; color: var(--text); line-height: 1.65; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 15px;
  border-radius: var(--r-sm); cursor: pointer; border: 2px solid transparent;
  transition: all .18s; padding: 0 22px; height: 46px;
  white-space: nowrap;
}
.btn-mint {
  background: linear-gradient(90deg, var(--mint) 0%, var(--brand-blue) 50%, var(--mint) 100%);
  background-size: 200% 100%;
  color: white; border-color: transparent;
  box-shadow: 0 3px 14px rgba(1,213,202,.35);
  animation: grad-shift 4s ease infinite;
}
.btn-mint:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(1,213,202,.5); }
.btn-blue    { background: var(--blue); color: white; border-color: var(--blue); box-shadow: 0 3px 14px rgba(0,142,235,.3); }
.btn-blue:hover { background: #0078c2; border-color: #0078c2; transform: translateY(-1px); }
.btn-gold    { background: var(--gold); color: white; border-color: var(--gold); box-shadow: 0 3px 14px rgba(245,158,11,.35); }
.btn-gold:hover { background: #d97706; border-color: #d97706; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--border); }
.btn-outline:hover { border-color: var(--mint); color: var(--mint-dark); background: var(--mint-xl); }
.btn-ghost   { background: transparent; color: var(--text); border-color: transparent; }
.btn-ghost:hover { background: var(--bg); border-color: var(--border); }
.btn-white   { background: white; color: var(--navy); border-color: rgba(255,255,255,.2); }
.btn-white:hover { background: #f0f4f8; }
.btn-lg      { height: 54px; font-size: 17px; padding: 0 32px; border-radius: var(--r); }
.btn-sm      { height: 36px; font-size: 13px; padding: 0 16px; border-radius: 8px; }

/* ══════════════════════════════════════ ANNOUNCEMENT BAR ══ */
.site-ann {
  background: linear-gradient(90deg, #00897b 0%, var(--brand-blue) 35%, #7C3AED 65%, var(--brand-blue) 100%);
  background-size: 300% 100%;
  animation: grad-shift 6s ease infinite;
  padding: 11px 20px 12px;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; position: relative;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.95);
  line-height: 1.4;
}
.site-ann-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.site-ann-cta {
  display: inline-flex; align-items: center;
  background: var(--gold); color: white;
  border-radius: 6px; padding: 2px 12px;
  font-size: 12px; font-weight: 700;
  transition: background .15s;
  white-space: nowrap;
  min-height: 32px;
}
.site-ann-cta:hover { background: #d97706; }
.site-ann-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,.5); font-size: 16px; line-height: 1;
  width: 40px; height: 40px; padding: 0; border-radius: 10px;
  display: grid; place-items: center; transition: color .15s, background .15s;
}
.site-ann-close:hover { color: white; background: rgba(255,255,255,.1); }

/* ══════════════════════════════════════════════════ NAV ══ */
.site-nav {
  position: sticky; top: 0; z-index: 200;
  padding: 0;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.06);
  border-bottom: none;
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
/* Gradient line al fondo — brand signature */
.site-nav::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mint) 0%, var(--brand-blue) 60%, transparent 100%);
  opacity: .55;
  transition: opacity .25s;
}
.site-nav.scrolled {
  /* Liquid glass — Apple-inspired */
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(48px) saturate(220%) brightness(1.1);
  -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 8px 32px rgba(0,100,200,.06),
    0 2px 8px rgba(15,25,35,.05);
  border-bottom: 1px solid rgba(255,255,255,.45);
}
.site-nav.scrolled::after { opacity: 1; }

/* Transparent nav — liquid glass sopra l'hero foto */
.site-nav.nav-transparent {
  background: rgba(6, 14, 32, 0.38) !important;
  backdrop-filter: blur(28px) saturate(160%) brightness(1.05);
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 4px 24px rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-nav.nav-transparent::after { opacity: 0; }
.site-nav.nav-transparent .nav-links > a,
.site-nav.nav-transparent .nav-links .nav-dropdown > a { color: rgba(255,255,255,.88); }
.site-nav.nav-transparent .nav-links > a:hover,
.site-nav.nav-transparent .nav-links .nav-dropdown > a:hover { color: var(--mint); }
.site-nav.nav-transparent .nav-links > a.nav-active { color: #fff; }

/* Dropdown menu resta sempre leggibile su sfondo bianco */
.site-nav.nav-transparent .nav-dropdown-menu a { color: var(--navy); }
.site-nav.nav-transparent .nav-dropdown-menu a:hover { color: var(--mint-dark); }
.site-nav.nav-transparent .nav-links a.nav-incentivi {
  color: #fbbf24;
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.3);
}
.site-nav.nav-transparent .btn-ghost {
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.35);
}
.site-nav.nav-transparent .btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.site-nav.nav-transparent .nav-hamburger span { background: #fff; }

.nav-inner {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 0; height: 76px;
}

/* Logo — ancora a sx, verticalmente centrato */
.nav-logo-wrap {
  display: flex; align-items: center;
  padding-right: 28px;
  flex-shrink: 0;
}
.nav-logo { height: 24px; width: auto; }

/* Link area — centrata, occupa lo spazio disponibile */
.nav-links {
  display: flex; align-items: center; gap: 0;
  flex: 1; padding: 0 16px;
}
.nav-links a {
  font-size: 16px; font-weight: 700; color: var(--text-light);
  padding: 0 13px; height: 100%;
  display: flex; align-items: center;
  border-radius: 0; position: relative;
  transition: color .15s;
  white-space: nowrap;
}
/* Underline accent al hover */
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 13px; right: 13px;
  height: 2px;
  background: linear-gradient(90deg, var(--mint), var(--brand-blue));
  border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.nav-active { color: var(--navy); font-weight: 700; }
.nav-links a.nav-active::after { transform: scaleX(1); }

/* Incentivi — voce di menu standard con accent gold */
.nav-links a.nav-incentivi {
  color: var(--gold);
}
.nav-links a.nav-incentivi:hover { color: #d97706; }

/* CTA — a dx, verticalmente centrata */
.nav-cta {
  display: flex; align-items: center; gap: 8px;
  padding-left: 24px;
  flex-shrink: 0;
}
.nav-cta .btn {
  font-size: 16px;
  height: 40px;
  padding: 0 20px;
  align-self: center;
}

/* ── Settori dropdown ── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown > a {
  display: flex; align-items: center; gap: 4px;
}
.nav-dropdown > a::before {
  content: ''; display: none; /* hide the underline ::after on parent */
}
.nav-dropdown-arrow {
  display: inline-block; font-size: 9px; opacity: .6;
  transition: transform .2s;
  margin-left: 1px;
}
.nav-dropdown:hover .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 240px;
  background: white; border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 8px;
  /* Invisible padding-top creates a bridge to prevent mouse-leave gap */
  padding-top: 16px;
  margin-top: -8px; /* pulls menu up to overlap the trigger slightly */
  opacity: 0; pointer-events: none;
  transition: opacity .18s .15s, transform .18s .15s; /* delay on HIDE */
  z-index: 300;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .15s 0s, transform .15s 0s; /* no delay on SHOW */
}
.nav-dropdown-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  transition: background .13s, color .13s;
  border-bottom: none !important;
}
.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-menu a:hover { background: var(--bg); color: var(--mint-dark); }
.nav-dropdown-menu a .dd-icon { font-size: 18px; flex-shrink: 0; }
.nav-dropdown-menu a .dd-label { display: flex; flex-direction: column; }
.nav-dropdown-menu a .dd-label span { font-size: 11px; color: var(--text-light); font-weight: 400; margin-top: 1px; }
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Hamburger ── */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; border-radius: 10px;
  background: transparent; border: none;
  cursor: pointer; padding: 11px 10px; flex-shrink: 0;
  transition: background .18s;
}
.nav-hamburger:active { background: var(--bg); }
.nav-hamburger span {
  display: block; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--mint-dark), var(--brand-blue));
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s, width .2s;
  transform-origin: center;
}
.nav-hamburger span:nth-child(3) { width: 65%; }
.nav-hamburger.open span:nth-child(3) { width: 100%; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Mobile menu ── */
.nav-mobile {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  padding: 72px 20px 40px;  /* 72px = nav height 60px + 12px breathing room */
  gap: 2px;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile.open { transform: translateX(0); }
.nav-mobile a {
  font-size: 17px; font-weight: 700; color: var(--navy);
  padding: 14px 16px; border-radius: var(--r-sm);
  border-bottom: 1px solid var(--border);
  min-height: 52px; display: flex; align-items: center;
  transition: background .15s, color .15s;
}
.nav-mobile a:last-of-type { border-bottom: none; }
.nav-mobile a:active { background: var(--bg); }
.nav-mobile a.nav-incentivi {
  color: #b45309; background: var(--gold-light);
  border: 1px solid var(--gold-border);
}
.nav-mobile-cta {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.nav-mobile-cta .btn { justify-content: center; height: 52px; font-size: 16px; }

/* ════════════════════════════════════════════════════ HERO ══ */
.hero {
  padding-top: 80px; padding-bottom: 80px;
  background: linear-gradient(152deg, #c8d8f0 0%, #dce8fb 30%, #cce6f8 60%, #d4e2f8 100%);
  background-size: 300% 300%;
  animation: grad-shift 10s ease infinite;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 800px 500px at 75% 60%, rgba(1,213,202,.14), transparent),
    radial-gradient(ellipse 400px 300px at 15% 20%, rgba(0,142,235,.08), transparent);
}

/* Hero con foto di fabbrica — homepage only */
.hero.hero-photo {
  background: url('../assets/homepage-hero-tessile.webp') center/cover no-repeat;
  background-size: cover;
  animation: none;
  margin-top: -76px;
  padding-top: calc(76px + 100px);
  padding-bottom: 100px;
}
.hero.hero-photo::before {
  background:
    linear-gradient(90deg,
      rgba(4,10,22,.90) 0%,
      rgba(4,10,22,.78) 46%,
      rgba(4,10,22,.56) 100%),
    linear-gradient(180deg,rgba(4,10,22,.18),rgba(4,10,22,.38));
}
.hero.hero-photo h1 { color: #fff; }
.hero.hero-photo h1 em { color: var(--mint); }
.hero.hero-photo .hero-sub { color: rgba(255,255,255,.82); }
.hero.hero-photo .hero-label {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.9);
  box-shadow: none;
}
.hero.hero-photo .hero-label-dot { background: var(--mint); }
.hero.hero-photo .hero-trust-item { color: rgba(255,255,255,.65); }
.hero.hero-photo .hero-trust-item::before { color: var(--mint); }

/* Suite hero photo */
.suite-hero-photo {
  position: relative; overflow: hidden;
  background: url('../assets/moduli.webp') center/cover no-repeat;
  margin-top: -76px;
}
.suite-hero-photo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(6,14,30,.80) 0%,
    rgba(0,20,55,.70) 45%,
    rgba(0,10,35,.60) 100%);
}
.suite-hero-photo .container { position: relative; z-index: 1; }
.suite-hero-photo h1 { color: #fff !important; }
.suite-hero-photo h1 em { color: var(--mint) !important; }
.suite-hero-photo p { color: rgba(255,255,255,.82) !important; }
.suite-hero-photo .btn-outline {
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.35) !important;
}
.suite-hero-photo .btn-outline:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.6) !important;
}

.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: white; border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 14px 5px 8px;
  font-size: 12px; font-weight: 700; color: var(--navy);
  box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.hero-label-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }
.hero h1 { font-size: clamp(34px,4.5vw,56px); font-weight: 700; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--mint-dark); }
.hero-sub { font-size: 18px; color: var(--text); line-height: 1.65; margin-bottom: 28px; max-width: 500px; }
.hero-incentivo-pill {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--gold-light); border: 1.5px solid var(--gold-border);
  border-radius: 14px; padding: 14px 18px;
  color: #92400e; margin-bottom: 28px;
  max-width: 100%;
}
.hero-incentivo-pill .hpill-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.hero-incentivo-pill .hpill-title {
  font-size: 15px; font-weight: 800; color: #78350f;
  line-height: 1.25; margin-bottom: 3px;
}
.hero-incentivo-pill .hpill-desc {
  font-size: 14px; font-weight: 500; color: #92400e;
  line-height: 1.4;
}
.hero-incentivo-pill .hpill-desc strong { font-weight: 800; color: #78350f; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; }
.hero-trust-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-light); font-weight: 600; }
.hero-trust-item::before { content: "✓"; color: var(--mint); font-weight: 800; font-size: 14px; }
.hero-visual {
  background: white; border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; position: relative;
  animation: float-y 7s ease-in-out infinite;
}
.hero-visual-bar {
  height: 40px; background: #0f1923;
  display: flex; align-items: center; padding: 0 16px; gap: 8px;
}
.hero-visual-dot { width: 10px; height: 10px; border-radius: 50%; }
.hero-dash { padding: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 10px; }
.hero-kpi-mini {
  background: var(--bg); border-radius: 10px; padding: 12px;
  border: 1px solid var(--border);
}
.hero-kpi-mini span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); display: block; margin-bottom: 4px; }
.hero-kpi-mini strong { font-family: "DM Mono","DM Sans",monospace; font-size: 24px; font-weight: 700; color: var(--navy); }
.hero-kpi-mini strong.mint { color: var(--mint-dark); }
.hero-kpi-mini strong.blue { color: var(--blue); }
.hero-kpi-mini small { font-size: 11px; color: var(--mint-dark); font-weight: 600; }
.hero-chart {
  margin: 0 16px 16px;
  background: var(--bg); border-radius: 10px; padding: 12px;
  border: 1px solid var(--border); height: 80px;
  display: flex; align-items: flex-end; gap: 6px;
}
.chart-bar { flex: 1; border-radius: 4px 4px 0 0; background: rgba(1,213,202,.25); min-height: 12px; }
.chart-bar.hi { background: var(--mint); }
.hero-machine-row { display: flex; gap: 8px; padding: 0 16px 16px; }
.hero-machine-chip {
  flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px;
}
.hero-machine-chip .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ══════════════════════════════════════════════ TRUST BAR ══ */
.trust-bar { background: var(--navy); padding: 20px 0; }
.trust-bar-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.trust-item { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.55); font-size: 13px; font-weight: 600; }
.trust-item strong { font-family: "DM Sans",sans-serif; font-size: 26px; font-weight: 700; color: var(--mint); display: block; line-height: 1; }

/* ══════════════════════════════════════ INCENTIVI SECTION ══ */
.incentivi-section {
  background: linear-gradient(150deg, #fffbeb 0%, #fef3c7 50%, #fde68a22 100%);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--gold-border);
  padding: 80px 0;
  position: relative; overflow: hidden;
}
.incentivi-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 700px 400px at 80% 50%, rgba(245,158,11,.08), transparent);
}
.incentivi-head {
  text-align: center; max-width: 680px; margin: 0 auto 52px;
  position: relative; z-index: 1;
}
.eyebrow-gold {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: #b45309; display: block; margin-bottom: 10px;
}
.incentivi-head h2 { font-size: clamp(26px,3.5vw,40px); font-weight: 700; margin-bottom: 14px; color: var(--navy); }
.incentivi-head h2 em { font-style: normal; color: var(--gold); }
.incentivi-head p { font-size: 17px; color: var(--text); line-height: 1.65; }
.incentivi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 44px; position: relative; z-index: 1; }
.incentivo-card {
  background: white; border: 1.5px solid var(--gold-border);
  border-radius: var(--r-lg); padding: 28px;
  box-shadow: 0 4px 20px rgba(245,158,11,.12);
  position: relative; overflow: hidden;
}
.incentivo-card.main {
  border-color: var(--gold); border-width: 2px;
  box-shadow: 0 8px 32px rgba(245,158,11,.22);
}
.incentivo-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold); color: white;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 18px;
}
.incentivo-badge.secondary { background: var(--navy); }
.incentivo-badge.tertiary  { background: var(--blue); }
.incentivo-card h3 { font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.incentivo-card .incentivo-sub { font-size: 13px; color: var(--text-light); margin-bottom: 18px; line-height: 1.5; }
.incentivo-rate {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 18px;
}
.incentivo-rate strong {
  font-family: "DM Sans",sans-serif;
  font-size: 52px; font-weight: 700; color: var(--gold); line-height: 1;
}
.incentivo-rate.secondary strong { color: var(--navy); }
.incentivo-rate.tertiary  strong { color: var(--blue); }
.incentivo-rate span { font-size: 16px; font-weight: 700; color: var(--text); }
.incentivo-list { list-style: none; display: grid; gap: 9px; }
.incentivo-list li { font-size: 13px; color: var(--text); display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.incentivo-list li::before { content: "✓"; color: var(--gold); font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.incentivo-list li.check-blue::before { color: var(--blue); }
.incentivi-qualify {
  background: white; border: 1.5px solid var(--gold-border);
  border-radius: var(--r-lg); padding: 32px 36px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  position: relative; z-index: 1;
  box-shadow: 0 4px 20px rgba(245,158,11,.1);
}
.qualify-left h3 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.qualify-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qualify-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.qualify-check-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(1,213,202,.1); border: 1.5px solid var(--mint);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--mint-dark); font-weight: 800;
}
.qualify-right { text-align: center; flex-shrink: 0; }
.qualify-amount {
  font-family: "DM Sans",sans-serif;
  font-size: 48px; font-weight: 700; color: var(--gold); line-height: 1;
  margin-bottom: 4px;
}
.qualify-amount-label { font-size: 13px; color: var(--text-light); margin-bottom: 16px; }

/* ══════════════════════════════════════════════ PROBLEMA ══ */
.problem-section { background: var(--surface); }
.problem-intro { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.problem-intro h2 { font-size: clamp(26px,3.5vw,38px); margin-bottom: 16px; }
.problem-intro h2 em { font-style: normal; color: var(--accent); }
.problem-intro p { font-size: 17px; color: var(--text); line-height: 1.65; }
.problem-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.problem-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); padding: 26px;
  border-top: 3px solid var(--accent);
}
.problem-icon { font-size: 32px; margin-bottom: 14px; }
.problem-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.problem-card p  { font-size: 14px; color: var(--text); line-height: 1.6; }

/* ════════════════════════════════════════ METODOLOGIA ══ */
.methodology-section {
  background: var(--navy);
  background-image: radial-gradient(ellipse 900px 600px at 60% 50%, rgba(1,213,202,.12), transparent);
  padding: 80px 0;
}
.method-head { text-align: center; max-width: 560px; margin: 0 auto 52px; }
.method-head h2 { font-size: clamp(26px,3.5vw,40px); font-weight: 700; color: white; margin-bottom: 14px; }
.method-head h2 em { font-style: normal; color: var(--mint); }
.method-head p { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.65; }
.method-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; position: relative;
}
.method-grid::before {
  content: ""; position: absolute; top: 44px; left: 16.5%; right: 16.5%;
  height: 2px; background: linear-gradient(90deg, var(--mint), var(--blue));
  opacity: .4; z-index: 0;
}
.method-step {
  text-align: center; padding: 0 28px; position: relative; z-index: 1;
}
.method-icon {
  width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 24px;
  background: rgba(1,213,202,.12); border: 2px solid rgba(1,213,202,.3);
  display: flex; align-items: center; justify-content: center; font-size: 36px;
  position: relative;
}
.method-num {
  position: absolute; top: -6px; right: -6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mint); color: white;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.method-step h3 { font-size: 20px; font-weight: 700; color: white; margin-bottom: 8px; }
.method-step h3 em { font-style: normal; color: var(--mint); }
.method-step p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.65; }
.method-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.method-tag { font-size: 11px; font-weight: 600; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 3px 10px; color: rgba(255,255,255,.5); }

/* ════════════════════════════════════════════════ MODULI ══ */
.modules-section { background: var(--bg); }
.module-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s, transform .15s;
}
.module-card:hover { border-color: var(--mint); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.module-card-top { padding: 28px 26px 22px; border-bottom: 1px solid var(--border); }
.module-card-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; }
.module-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.module-card p  { font-size: 14px; color: var(--text); line-height: 1.55; }
.module-card-bottom { padding: 18px 26px; }
.module-kpi { display: flex; gap: 20px; }
.module-kpi-item strong { display: block; font-family: "DM Sans",sans-serif; font-size: 24px; font-weight: 700; color: var(--mint-dark); }
.module-kpi-item span   { font-size: 11px; color: var(--text-light); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.module-capabilities { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.module-capability {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 116px;
}
.module-capability-label {
  display: block;
  font-size: 10px;
  color: var(--text-light);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.module-capability strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  color: var(--navy);
  font-weight: 800;
  margin-bottom: 6px;
}
.module-capability p {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.module-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.m-tag { font-size: 11px; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; color: var(--text-light); background: var(--bg); }

/* ═══════════════════════════════════════════════ SETTORI ══ */
.sectors-section { background: var(--surface); }
.sectors-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.sector-tile {
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  background: white; text-decoration: none;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
.sector-tile-img {
  width: 100%; height: 160px;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.sector-tile-overlay { display: none; }
.sector-tile-body {
  padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.sector-tile-body strong {
  display: block; font-size: 14px; font-weight: 700;
  color: var(--navy); line-height: 1.3;
}
.sector-tile-body span {
  font-size: 12px; color: var(--text-light); display: block;
}
.sector-tile-cta {
  margin-top: 8px;
  font-size: 12px; font-weight: 700; color: var(--mint-dark);
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.sector-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--mint);
}
.sector-tile:hover .sector-tile-img { transform: scale(1.04); }
.sector-tile:hover .sector-tile-cta { opacity: 1; transform: translateY(0); }


/* ═══════════════════════════════════════ COME FUNZIONA ══ */
.how-section { background: linear-gradient(180deg,var(--bg),var(--surface)); }
.how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.how-grid::before {
  content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%;
  height: 2px; background: var(--mint); opacity: .3; z-index: 0;
}
.how-step { text-align: center; padding: 0 16px; position: relative; z-index: 1; }
.how-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--mint); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; margin: 0 auto 20px;
  box-shadow: 0 4px 14px rgba(1,213,202,.35);
}
.how-step h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.how-step p  { font-size: 13px; color: var(--text); line-height: 1.6; }

/* ═══════════════════════════════════════════ RISULTATI ══ */
.results-section {
  background: var(--navy); color: white;
  background-image: radial-gradient(ellipse 800px 600px at 80% 50%, rgba(1,213,202,.15), transparent);
}
.results-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.result-item {
  text-align: center; padding: 40px 24px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.result-item:last-child { border-right: none; }
.result-item strong { font-family: "DM Mono","DM Sans",monospace;
  display: block; font-family: "DM Sans",sans-serif;
  font-size: 52px; font-weight: 700; color: var(--mint); line-height: 1;
  margin-bottom: 8px;
}
.result-item span { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.5; }
.result-item > strong { min-height: 2em; }
.result-item > span {
  display: block;
  min-height: 4.5em;
}
.result-source { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 6px; }

/* ════════════════════════════════════ TESTIMONIALS ══ */
.testimonials-section { background: var(--bg); }
.testimonial-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 28px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px;
}
.testimonial-stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
.testimonial-quote { font-size: 15px; line-height: 1.7; color: var(--text); font-style: italic; flex: 1; }
.testimonial-quote::before { content: ""; }
.testimonial-quote::after  { content: ""; }
.testimonial-bottom { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.t-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: white; }
.t-name    { font-size: 14px; font-weight: 700; }
.t-company { font-size: 12px; color: var(--text-light); }
.t-sector  { display: inline-flex; align-self: flex-start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border: 1px solid; border-radius: 6px; padding: 4px 10px; white-space: nowrap; }
.t-sector--mechanics { background: rgba(0,142,235,.12); border-color: rgba(0,142,235,.28); color: #0068ad; }
.t-sector--food      { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.3); color: #b54708; }
.t-sector--print     { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.28); color: #6d28d9; }
.t-detail  { display: flex; flex-wrap: wrap; gap: 6px; }
.t-chip    { font-size: 11px; font-weight: 600; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-light); }

/* ══════════════════════════════════════════════ FAQ ══ */
.faq-section { background: var(--surface); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-item {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  transition: border-color .15s;
}
.faq-item.open { border-color: var(--mint); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--navy);
  gap: 12px;
}
.faq-q:hover { background: rgba(1,213,202,.04); }
.faq-arrow { font-size: 18px; color: var(--mint); flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-arrow { transform: rotate(45deg); }
.faq-a {
  display: none; padding: 0 22px 18px;
  font-size: 14px; color: var(--text); line-height: 1.65;
  border-top: 1px solid var(--border);
}
.faq-a.visible { display: block; }

/* ══════════════════════════════════════════════ PREZZI ══ */
.pricing-section { background: var(--bg); }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: start; }
.pricing-card {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-lg); padding: 32px 28px;
  position: relative; transition: box-shadow .2s;
}
.pricing-card:hover { box-shadow: var(--shadow-md); }
.pricing-card.featured { border-color: var(--mint); box-shadow: 0 8px 40px rgba(1,213,202,.22); }
.pricing-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--mint); color: white; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 4px 16px; border-radius: 999px; white-space: nowrap;
}
.pricing-tier  { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); margin-bottom: 10px; }
.pricing-price { font-family: "DM Sans",sans-serif; font-size: 44px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.pricing-price small { font-size: 18px; font-weight: 600; color: var(--text-light); }
.pricing-desc  { font-size: 13px; color: var(--text-light); margin-bottom: 24px; line-height: 1.5; }
.pricing-sep   { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.pricing-features { list-style: none; display: grid; gap: 11px; margin-bottom: 28px; }
.pricing-features li { font-size: 14px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.pricing-features li::before { content: "✓"; color: var(--mint); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.pricing-incentivo-note {
  background: var(--gold-light); border: 1px solid var(--gold-border);
  border-radius: 8px; padding: 10px 14px; margin-top: 14px;
  font-size: 12px; color: #92400e; font-weight: 600; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 8px;
}

/* ══════════════════════════════════ CTA + FORM SECTION ══ */
.cta-section {
  background: linear-gradient(135deg, var(--navy) 0%, #00427a 35%, var(--brand-blue) 65%, #7C3AED 100%);
  background-size: 300% 300%;
  animation: grad-shift 8s ease infinite;
  color: white; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 600px 400px at 70% 50%, rgba(1,213,202,.18), transparent);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; }
.cta-text h2 { font-size: clamp(28px,4vw,44px); color: white; margin-bottom: 16px; }
.cta-text h2 em { font-style: normal; color: var(--mint); }
.cta-text p  { font-size: 17px; color: rgba(255,255,255,.72); line-height: 1.65; margin-bottom: 24px; }
.cta-trust { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-trust span { font-size: 13px; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 5px; }
.cta-trust span::before { content: "✓"; color: var(--mint); font-weight: 700; }
.cta-form { background: white; border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-lg); }
.cta-form h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.cta-form p  { font-size: 13px; color: var(--text-light); margin-bottom: 22px; }
.form-field { display: grid; gap: 6px; margin-bottom: 14px; }
.form-field label { font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; }
.form-field input,
.form-field select {
  height: 48px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 0 14px; font-size: 16px; font-family: inherit; /* 16px prevents iOS zoom */
  background: white; color: var(--navy); transition: border-color .15s;
  width: 100%; -webkit-appearance: none;
}
.form-field input:focus,
.form-field select:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(1,213,202,.15); }
.form-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-submit { width: 100%; margin-top: 6px; justify-content: center; }
.form-note   { text-align: center; font-size: 12px; color: var(--text-light); margin-top: 10px; }

/* ════════════════════════════════════════════ FOOTER ══ */
.site-footer { background: var(--navy); color: rgba(255,255,255,.5); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.footer-logo { height: 26px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.footer-col p, .footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,.45); line-height: 2.2; transition: color .15s; }
.footer-col a:active { color: var(--mint); }
.footer-col a:hover  { color: var(--mint); }
.footer-col h4 { font-size: 13px; font-weight: 700; color: white; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; }
.footer-socials { display: flex; gap: 10px; margin-top: 14px; }
.footer-social-btn {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: rgba(255,255,255,.55);
  transition: background .15s, color .15s;
}
.footer-social-btn:hover  { background: rgba(1,213,202,.15); color: var(--mint); }
.footer-social-btn:active { background: rgba(1,213,202,.2);  color: var(--mint); }
.footer-offices { margin-top: 12px; }
.footer-offices p { line-height: 1.6; margin-bottom: 4px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 16px; flex-wrap: wrap; }

/* ── Misc ── */
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; }
.badge-mint   { background: var(--mint-xl); border: 1px solid rgba(1,213,202,.3); color: var(--mint-dark); }
.badge-accent { background: rgba(231,79,16,.1); border: 1px solid rgba(231,79,16,.3); color: #c84000; }
.text-mint  { color: var(--mint-dark); }
.text-navy  { color: var(--navy); }
.text-muted { color: var(--text-light); }
.fw-700 { font-weight: 700; }

/* ══════════════════════════════════════════ RESPONSIVE ══ */
@media (max-width: 1024px) {
  .sectors-grid { grid-template-columns: repeat(3,1fr); }
  .incentivi-qualify { grid-template-columns: 1fr; }
  .qualify-right { text-align: left; }
  .cta-inner { grid-template-columns: 1fr; gap: 40px; }
  .cta-form  { max-width: 500px; }
}
@media (max-width: 820px) {
  section { padding: 52px 0; }
  .hero-inner      { grid-template-columns: 1fr; text-align: center; }
  .hero-visual     { display: none; }
  .hero-sub        { max-width: 100%; font-size: 16px; }
  .hero-actions    { justify-content: center; }
  .hero-trust      { justify-content: center; }
  .g2,.g3,.g4      { grid-template-columns: 1fr; }
  .incentivi-grid  { grid-template-columns: 1fr; }
  .method-grid     { grid-template-columns: 1fr; gap: 32px; }
  .method-grid::before { display: none; }
  .sectors-grid    { grid-template-columns: repeat(2,1fr); }
  .how-grid        { grid-template-columns: repeat(2,1fr); }
  .how-grid::before { display: none; }
  .results-grid    { grid-template-columns: repeat(2,1fr); }
  .result-item     { padding: 28px 16px; }
  .result-item strong { font-size: clamp(32px,10vw,44px) !important; }
  .pricing-grid    { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pricing-price   { font-size: 34px; }
  .footer-grid     { grid-template-columns: 1fr 1fr; }
  .footer-social-btn { width: 44px; height: 44px; }
  .nav-links       { display: none; }
  .nav-cta         { display: none; }
  .nav-hamburger   { display: flex; align-self: center; }
  .nav-logo-wrap   { border-right: none; padding-right: 0; }
  .nav-inner       { height: 60px; align-items: center; }
  .site-nav::after { height: 3px; opacity: 1; }
  /* Su mobile la nav è sempre solida — transparent solo su desktop */
  .site-nav,
  .site-nav.nav-transparent {
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 1px 0 var(--border) !important;
    border-bottom: none !important;
  }
  .site-nav.nav-transparent .nav-hamburger span { background: var(--navy) !important; }
  /* Hero photo: aggiusta margin-top per nav 60px mobile */
  .hero.hero-photo { margin-top: -60px; padding-top: calc(60px + 80px); }
  .suite-hero-photo { margin-top: -60px; }
  .problem-cards   { grid-template-columns: 1fr; }
  .trust-bar-inner { gap: 16px; flex-direction: column; align-items: flex-start; }
  .trust-item      { gap: 10px; }
  .trust-item strong { font-size: 20px; }
  .faq-grid        { grid-template-columns: 1fr; }
  .qualify-checks  { grid-template-columns: 1fr; }
  .cs-preview-grid { grid-template-columns: 1fr; }
  .site-ann        { min-height: 44px; padding: 6px 44px 6px 12px; font-size: 12px; }
  .site-ann-inner  { gap: 6px; flex-wrap: nowrap; justify-content: center; }
  .site-ann-inner .ann-long { display: none; }
  .site-ann-cta    { padding: 6px 10px; font-size: 11px; min-height: 32px; }
  .cta-inner       { grid-template-columns: 1fr; }
  .cta-form        { max-width: 100%; }
  /* Moduli */
  .module-card-top  { padding: 20px 18px; }
  .module-card-hero { height: 90px; }
  .module-card-banner { height: 44px; }
}
@media (max-width: 560px) {
  section          { padding: 44px 0; }
  .container       { padding: 0 16px; }
  .sectors-grid    { grid-template-columns: repeat(2,1fr); }
  .sector-tile-img { height: 120px; }
  .sector-tile-body strong { font-size: 13px; }
  .how-grid        { grid-template-columns: 1fr; }
  .results-grid    { grid-template-columns: 1fr 1fr; }
  .result-item strong { font-size: clamp(28px,9vw,36px) !important; }
  .footer-grid     { grid-template-columns: 1fr; }
  .footer-bottom   { flex-direction: column; gap: 8px; text-align: center; }
  .form-g2         { grid-template-columns: 1fr; }
  .cta-form        { padding: 20px; }
  .btn-sm          { height: 44px; padding: 0 18px; }
  .hero-actions .btn { width: 100%; justify-content: center; min-height: 52px; }
  .hero-actions    { flex-direction: column; }
  .hero            { padding-top: 52px; padding-bottom: 52px; }
  .incentivi-head p { font-size: 15px; }
  .trust-bar-inner  { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .cs-grid         { grid-template-columns: 1fr; }
  /* Testimonial e pricing */
  .testimonial-card { padding: 20px; }
  .pricing-card    { padding: 24px 20px; }
  .nav-logo-wrap a { min-height: 44px; display: flex; align-items: center; }
  .footer-col > a,
  .footer-offices a { min-height: 40px; padding: 6px 0; display: flex; align-items: center; line-height: 1.45; }
  .footer-bottom a { min-height: 40px; display: inline-flex; align-items: center; }
  textarea { font-size: 16px !important; }
}

/* ── Ultra-small phones (≤400px) ── */
@media (max-width: 400px) {
  .container       { padding: 0 12px; }
  section          { padding: 36px 0; }
  .hero            { padding-top: 44px; padding-bottom: 44px; }
  .results-grid    { grid-template-columns: 1fr; }
  .result-item     { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .result-item:last-child { border-bottom: none; }
  .sectors-grid    { grid-template-columns: 1fr 1fr; gap: 8px; }
  .footer-grid     { gap: 24px; }
  .nav-inner       { height: 60px; }
}

/* ── Hover effects disabled on touch devices ── */
@media (hover: none) {
  .module-card:hover,
  .sector-tile:hover,
  .testimonial-card:hover,
  .pricing-card:hover { transform: none !important; box-shadow: inherit !important; }
  .result-item:hover   { transform: none !important; }
}

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

/* Page fade-in */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-in .35s ease both; }

/* Card hover lift */
.module-card,
.sector-tile,
.testimonial-card,
.pricing-card {
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1) !important;
}
.module-card:hover,
.testimonial-card:hover,
.pricing-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.sector-tile:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Result items — subtle scale on hover */
.result-item { transition: transform .2s ease !important; }
.result-item:hover { transform: scale(1.04) !important; }

/* Logo nav — override mobile/dark section */
.nav-logo { height: 24px !important; }

/* Micro-note contestuali sotto i claim numerici */
.stat-note { font-size: 0.75rem; color: #888; margin-top: 4px; line-height: 1.4; }

/* Callout box per novità normative */
.callout { border-radius: 10px; padding: 18px 22px; margin: 20px 0; font-size: 14px; line-height: 1.65; }
.callout-change { background: #fffbeb; border: 1.5px solid #f59e0b; color: #78350f; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  VISUAL UPGRADE — Guidelines PDF Alessio 2026                  ║
   ║  Hero dark · Gradient text · Moduli animati · Glassmorphism    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Gradient text utility ─── */
.gradient-text,
.hero h1 em,
.section-head h2 em,
.cta-text h2 em,
.method-head h2 em {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
}
/* Problem usa arancio — non sovrascrivere */
.problem-intro h2 em {
  background: none;
  -webkit-text-fill-color: var(--accent);
}
/* Eyebrow gradient */
.eyebrow {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
/* Eccezione: eyebrow gold resta gold */
.eyebrow-gold {
  -webkit-text-fill-color: #b45309;
  background: none;
}

/* ─── HERO — Dark + Brand gradient ─────────────────────────────── */
.hero {
  background: #060e1a;
  padding-top: 96px;
  padding-bottom: 96px;
}

/* Gradient orbs di profondità */
.hero::before {
  background:
    radial-gradient(ellipse 700px 600px at 88% 15%, rgba(1,213,202,.22) 0%, transparent 65%),
    radial-gradient(ellipse 500px 420px at 4%  88%, rgba(0,142,235,.18) 0%, transparent 60%),
    radial-gradient(ellipse 350px 280px at 48% 105%, rgba(1,213,202,.1) 0%, transparent 55%);
}

/* Linea gradiente brand alla base dell'hero */
.hero::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-gradient);
  opacity: .55;
}

/* Testo hero su sfondo scuro */
.hero h1 { color: #ffffff; font-weight: 800; font-size: clamp(38px,5vw,62px); }
.hero-sub { color: rgba(255,255,255,.6); }

.hero-label {
  background: rgba(255,255,255,.06);
  border-color: rgba(1,213,202,.3);
  color: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
}
.hero-label-dot {
  box-shadow: 0 0 10px var(--mint), 0 0 20px rgba(1,213,202,.5);
}

.hero-incentivo-pill {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.35);
  color: rgba(255,200,80,.9);
}
.hero-incentivo-pill .hpill-title { color: rgba(255,210,100,.95); }
.hero-incentivo-pill .hpill-desc  { color: rgba(255,190,70,.75); }
.hero-incentivo-pill .hpill-desc strong { color: rgba(255,220,110,1); }

.hero-trust-item {
  color: rgba(255,255,255,.42);
}
.hero-trust-item::before { color: var(--mint); }

/* Bottone outline su sfondo scuro */
.hero-actions .btn-outline {
  color: rgba(255,255,255,.8);
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}
.hero-actions .btn-outline:hover {
  color: var(--mint);
  border-color: rgba(1,213,202,.5);
  background: rgba(1,213,202,.1);
}

/* ─── Hero visual — Glassmorphism dashboard ─────────────────────── */
.hero-visual {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(1,213,202,.12),
    0 32px 96px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.07);
}
.hero-visual-bar {
  background: rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-kpi-mini {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.hero-kpi-mini span { color: rgba(255,255,255,.38); }
.hero-kpi-mini strong { color: rgba(255,255,255,.92); }
.hero-kpi-mini strong.mint { color: var(--mint); }
.hero-kpi-mini strong.blue { color: var(--brand-blue); }
.hero-kpi-mini small { color: rgba(1,213,202,.85); }
.hero-chart {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}
.hero-machine-chip {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.68);
}

/* ─── Animazione barre grafico — crescono dal basso ─────────────── */
@keyframes bar-grow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
.hero .chart-bar {
  transform-origin: bottom;
  animation: bar-grow .7s cubic-bezier(.34,1.56,.64,1) both;
}
.hero .chart-bar:nth-child(1)  { animation-delay: .85s; }
.hero .chart-bar:nth-child(2)  { animation-delay: .92s; }
.hero .chart-bar:nth-child(3)  { animation-delay: .99s; }
.hero .chart-bar:nth-child(4)  { animation-delay:1.06s; }
.hero .chart-bar:nth-child(5)  { animation-delay:1.13s; }
.hero .chart-bar:nth-child(6)  { animation-delay:1.20s; }
.hero .chart-bar:nth-child(7)  { animation-delay:1.27s; }
.hero .chart-bar:nth-child(8)  { animation-delay:1.34s; }
.hero .chart-bar:nth-child(9)  { animation-delay:1.41s; }
.hero .chart-bar:nth-child(10) { animation-delay:1.48s; }
.hero .chart-bar:nth-child(11) { animation-delay:1.55s; }
.hero .chart-bar:nth-child(12) { animation-delay:1.62s; }

/* ─── Moduli — barra gradiente per modulo + icon ────────────────── */
.module-card {
  position: relative;
  overflow: hidden;
  border-top: 0 !important;
}
/* ::before gradient strip — usato solo su card senza banner hero */
.module-card::before {
  content: none;
}

/* Gradiente specifico per ciascun modulo — allineato a SVG brand assets */
.module-card[data-module="monitoring"]::before {
  background-image: linear-gradient(90deg, #7C3AED, #2563EB, #7C3AED);
}
.module-card[data-module="planner"]::before {
  background-image: linear-gradient(90deg, #00B896, #0077CC, #00B896);
}
.module-card[data-module="maintenance"]::before {
  background-image: linear-gradient(90deg, #F97316, #F59E0B, #F97316);
}
.module-card[data-module="warehouse"]::before {
  background-image: linear-gradient(90deg, #2563EB, #06B6D4, #2563EB);
}

/* ── Module card hero banner ──────────────────────────────────────── */
.module-card-hero {
  height: 80px;
  overflow: hidden;
  display: flex; align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
/* Background gradient per ciascun modulo */
.module-card[data-module="monitoring"] .module-card-hero {
  background: linear-gradient(135deg, #7C3AED 0%, #2563EB 50%, #7C3AED 100%);
  background-size: 200% 200%; animation: grad-shift 5s ease infinite;
}
.module-card[data-module="planner"]    .module-card-hero {
  background: linear-gradient(135deg, #00B896 0%, #0077CC 50%, #00B896 100%);
  background-size: 200% 200%; animation: grad-shift 5s ease infinite;
}
.module-card[data-module="maintenance"] .module-card-hero {
  background: linear-gradient(135deg, #F97316 0%, #F59E0B 50%, #F97316 100%);
  background-size: 200% 200%; animation: grad-shift 5s 1s ease infinite;
}
.module-card[data-module="warehouse"]  .module-card-hero {
  background: linear-gradient(135deg, #2563EB 0%, #06B6D4 50%, #2563EB 100%);
  background-size: 200% 200%; animation: grad-shift 5s 1.5s ease infinite;
}

.module-card-banner {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.module-card:hover .module-card-banner {
  transform: translateX(4px);
}

/* Icon modulo — più grande e con ombra colore */
.module-card-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  font-size: 28px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.module-card:hover .module-card-icon { transform: scale(1.1) rotate(-4deg); }
.module-card[data-module="monitoring"]:hover .module-card-icon {
  box-shadow: 0 8px 24px rgba(124,62,237,.35);
}
.module-card[data-module="planner"]:hover .module-card-icon {
  box-shadow: 0 8px 24px rgba(0,184,150,.35);
}
.module-card[data-module="maintenance"]:hover .module-card-icon {
  box-shadow: 0 8px 24px rgba(249,115,22,.35);
}
.module-card[data-module="warehouse"]:hover .module-card-icon {
  box-shadow: 0 8px 24px rgba(6,182,212,.35);
}

/* KPI nei moduli — gradient text */
.module-kpi-item strong {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 26px !important;
  font-weight: 800 !important;
}

/* ─── Steps (How it works) — gradient circles ───────────────────── */
.how-num {
  background: var(--brand-gradient);
  box-shadow: 0 4px 20px rgba(1,213,202,.4), 0 0 0 4px rgba(1,213,202,.1);
}

/* ─── Metodologia — icone con glow ──────────────────────────────── */
.method-icon {
  box-shadow: 0 0 0 1px rgba(1,213,202,.15), 0 8px 32px rgba(1,213,202,.1);
  transition: box-shadow .3s, background .3s, transform .3s;
}
.method-step:hover .method-icon {
  background: rgba(1,213,202,.18);
  box-shadow: 0 0 0 1px rgba(1,213,202,.35), 0 12px 48px rgba(1,213,202,.22);
  transform: scale(1.06);
}
.method-num {
  background: var(--brand-gradient);
  box-shadow: 0 2px 8px rgba(1,213,202,.5);
}

/* ─── Risultati — numeri puliti, senza background/clip ereditati ─── */
.result-item strong {
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--mint) !important;
  color: var(--mint) !important;
  font-size: 60px !important;
  font-weight: 800 !important;
  font-family: "DM Sans", sans-serif !important;
  line-height: 1 !important;
  margin-bottom: 10px;
  text-shadow: none !important;
}

/* ─── Sector tile — bordo gradiente su hover, interno sempre bianco ─ */
.sector-tile {
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
}
.sector-tile:hover {
  border-color: transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--brand-gradient) border-box;
}

/* ─── Pricing featured — gradient border ────────────────────────── */
.pricing-card.featured {
  position: relative;
  border-color: transparent;
}
.pricing-card.featured::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: calc(var(--r-lg) + 2px);
  background: var(--brand-gradient);
  z-index: -1;
}
.pricing-card.featured::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--r-lg);
  background: white;
  z-index: -1;
}

/* ─── Pricing badge — gradient ──────────────────────────────────── */
.pricing-badge {
  background: var(--brand-gradient);
  box-shadow: 0 4px 16px rgba(1,213,202,.4);
}

/* ─── Form focus ring — brand ───────────────────────────────────── */
.form-field input:focus,
.form-field select:focus,
.f-field input:focus,
.f-field select:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(1,213,202,.15);
}

/* ─── CTA section — gradient orb più intenso ────────────────────── */
.cta-section::before {
  background:
    radial-gradient(ellipse 700px 500px at 75% 50%, rgba(1,213,202,.2), transparent),
    radial-gradient(ellipse 400px 300px at 10% 80%, rgba(0,142,235,.15), transparent);
}

/* ─── Hero content — stagger slide-up ──────────────────────────── */
@keyframes hero-el-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-label         { animation: hero-el-in .65s .1s cubic-bezier(.4,0,.2,1) both; }
.hero h1            { animation: hero-el-in .65s .22s cubic-bezier(.4,0,.2,1) both; }
.hero-sub           { animation: hero-el-in .65s .34s cubic-bezier(.4,0,.2,1) both; }
.hero-incentivo-pill { animation: hero-el-in .65s .42s cubic-bezier(.4,0,.2,1) both; }
.hero-actions       { animation: hero-el-in .65s .52s cubic-bezier(.4,0,.2,1) both; }
.hero-trust         { animation: hero-el-in .65s .62s cubic-bezier(.4,0,.2,1) both; }
/* Override animations.js (che anima .hero-content come blocco) */
.hero-content       { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ─── Risultati section — radial più caldo ──────────────────────── */
.results-section {
  background-image:
    radial-gradient(ellipse 900px 500px at 30% 50%, rgba(1,213,202,.1), transparent),
    radial-gradient(ellipse 600px 400px at 80% 80%, rgba(0,142,235,.12), transparent);
}

/* ─── Testimonial — accent line gradiente ───────────────────────── */
.testimonial-card {
  position: relative;
}
.testimonial-card::before {
  content: "\201C";
  position: absolute; top: 16px; right: 20px;
  font-size: 72px; line-height: 1;
  color: transparent;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: .15;
  font-family: Georgia, serif;
}

/* ─── Problem cards — accent rosso più moderno ──────────────────── */
.problem-card {
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.problem-card:hover {
  border-top-color: var(--accent);
  box-shadow: 0 8px 32px rgba(249,115,22,.12);
  transform: translateY(-4px);
}

/* ─── Announement bar — gradient accent ─────────────────────────── */
.site-ann {
  background: linear-gradient(90deg, #00897b 0%, var(--brand-blue) 35%, #7C3AED 65%, var(--brand-blue) 100%);
  background-size: 300% 100%;
  animation: grad-shift 6s ease infinite;
}

/* ─── Tooltip / hover per nav item ──────────────────────────────── */
.nav-links a:hover {
  background: rgba(1,213,202,.05);
}

/* ─── Bricolage inline nel HTML (numeri incentivi) ──────────────── */
[style*="Bricolage"] {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 800 !important;
}

/* ════════════════════════════════ CASE STUDY INDEX ══ */
.cs-index-card {
  padding: 36px 0;
}
.cs-index-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.cs-index-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 4px 12px; border-radius: var(--r-pill);
}
.cs-index-badge.mod-planner    { background: var(--mod-planner-l);    color: var(--mod-planner);    border: 1px solid rgba(0,179,150,.2); }
.cs-index-badge.mod-monitoring { background: var(--mod-monitoring-l); color: var(--mod-monitoring); border: 1px solid rgba(124,62,237,.2); }
.cs-index-badge.sec            { background: #f0f9ff; color: #0369a1;  border: 1px solid rgba(3,105,161,.15); }

.cs-index-body h2 {
  font-size: clamp(18px, 2.5vw, 24px); font-weight: 700;
  color: var(--navy); margin-bottom: 12px; line-height: 1.25;
}
.cs-index-body h2 a { color: inherit; transition: color .15s; }
.cs-index-body h2 a:hover { color: var(--mint-dark); }
.cs-index-body > p {
  font-size: 15px; color: var(--text); line-height: 1.7;
  max-width: 680px; margin-bottom: 20px;
}

.cs-index-kpis {
  display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 20px;
}
.cs-index-kpi { display: flex; flex-direction: column; gap: 2px; }
.cs-index-kpi-num {
  font-family: "DM Mono", monospace;
  font-size: 22px; font-weight: 500; color: var(--navy); line-height: 1;
}
.cs-index-kpi-label {
  font-size: 12px; color: var(--text-light);
}

.cs-index-link {
  font-size: 14px; font-weight: 700; color: var(--mint-dark);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .15s;
}
.cs-index-link:hover { color: var(--mint); }

.cs-index-divider {
  border: none; border-top: 1px solid var(--border);
}

.cs-index-placeholder {
  margin-top: 36px; padding: 24px;
  background: var(--bg); border-radius: var(--r);
  text-align: center;
  font-size: 14px; color: var(--text-light); line-height: 1.6;
}
.cs-index-placeholder a { color: var(--mint-dark); text-decoration: underline; }

/* active nav link */
.nav-active { color: var(--mint-dark) !important; font-weight: 600; }

/* ═══════════════════════════ HOMEPAGE: CS PREVIEW SECTION ══ */
.cs-preview-section { background: var(--surface); }
.cs-preview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 40px;
}
.cs-preview-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow .18s, transform .18s;
}
.cs-preview-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.cs-preview-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-preview-card h3 {
  font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.3;
}
.cs-preview-card p {
  font-size: 13px; color: var(--text); line-height: 1.65; flex: 1;
}
.cs-preview-nums {
  display: flex; gap: 20px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cs-preview-num strong {
  display: block; font-family: "DM Mono", monospace;
  font-size: 18px; font-weight: 500; color: var(--navy);
}
.cs-preview-num span { font-size: 11px; color: var(--text-light); }
.cs-preview-link {
  font-size: 13px; font-weight: 700; color: var(--mint-dark);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* KPI text reset — evita rettangoli/gradient clip su numeri e label operative */
.suite-mod-kpi strong,
.trust-item strong,
.cs-index-kpi-num,
.cs-preview-num strong,
.hero-kpi-mini strong,
.incentivo-rate strong {
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

@media (max-width: 680px) {
  .cs-preview-grid { grid-template-columns: 1fr; }
  .cs-index-kpis   { gap: 16px; }
}

/* ── result-item mobile fix: re-override il 60px globale su schermi piccoli ── */
@media (max-width: 820px) {
  .result-item strong { font-size: clamp(32px,10vw,44px) !important; }
}
@media (max-width: 560px) {
  .result-item strong { font-size: clamp(28px,9vw,36px) !important; }
}
@media (max-width: 400px) {
  .result-item strong { font-size: clamp(24px,7vw,28px) !important; }
  .results-grid { grid-template-columns: 1fr; }
  .result-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: 24px 16px; }
  .result-item:last-child { border-bottom: none; }
}

/* ══════════════════════════════════ POLISH & ACCESSIBILITÀ ══ */

/* Focus ring brand — tastiera e screen reader */
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 3px; }

/* Tap highlight discreto su iOS */
a, button { -webkit-tap-highlight-color: rgba(1,213,202,.15); }

/* Titoli bilanciati — evita orfani su 2 righe */
h1, h2, h3 { text-wrap: balance; }

/* Tap target minimi su touch (WCAG 44px) */
@media (hover: none) and (pointer: coarse) {
  .btn-sm { min-height: 44px; }
  .nav-dropdown-menu a { min-height: 44px; }
  .footer-col > a,
  .footer-offices a { min-height: 40px; padding: 6px 0; display: flex; align-items: center; line-height: 1.45; }
  .cs-index-link,
  .cs-preview-link { min-height: 44px; padding: 10px 0; align-items: center; }
}

/* Riduzione animazioni per chi la richiede */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  DESIGN RULES — Scala tipografica, numeri e ritmo verticale       ║
   ║  Fonte di verità per TUTTE le pagine. Non usare font-size inline: ║
   ║  usare queste classi.                                             ║
   ║                                                                   ║
   ║  Titoli:   .page-h1  → h1 hero pagine interne                     ║
   ║            .sec-h2   → h2 di sezione (= section-head h2)          ║
   ║            .card-h3  → titolo card/form                           ║
   ║  Numeri:   .num-hero → KPI gigante (40→60px, scala su mobile)     ║
   ║            .num-big  → KPI medio (26→36px)                        ║
   ║  Sezioni:  .page-hero → hero pagine interne (padding standard)    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root {
  --fs-display: clamp(34px, 4.5vw, 56px);  /* hero homepage */
  --fs-h1:      clamp(30px, 4vw, 48px);    /* hero pagine interne */
  --fs-h2:      clamp(26px, 3.5vw, 40px);  /* titoli sezione */
  --fs-h3:      clamp(17px, 2vw, 20px);    /* titoli card */
  --fs-num-xl:  clamp(40px, 6vw, 60px);    /* numeroni KPI */
  --fs-num:     clamp(26px, 3.5vw, 36px);  /* numeri medi */
}

.page-h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.12;
  margin-bottom: 16px;
}
.page-h1 em { font-style: normal; color: var(--mint-dark); }

.sec-h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 14px;
}
.sec-h2 em { font-style: normal; color: var(--mint-dark); }

.card-h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--navy); }

.num-hero {
  font-size: var(--fs-num-xl);
  font-weight: 800;
  font-family: "DM Sans", sans-serif;
  line-height: 1;
}
.num-big {
  font-size: var(--fs-num);
  font-weight: 800;
  font-family: "DM Sans", sans-serif;
  line-height: 1;
}

/* Hero standard pagine interne (contatti, faq, prezzi, incentivi…) */
.page-hero { padding: 96px 0 64px; }
@media (max-width: 820px) { .page-hero { padding: 56px 0 44px; } }

/* ── Ritmo verticale mobile per sezioni con padding inline ──
   Le sezioni costruite con style="padding:72px 0" ecc. non scalavano
   su mobile: qui le riallineiamo alla regola globale (52px/44px). */
@media (max-width: 820px) {
  section[style*="padding:72px"],
  section[style*="padding:80px"],
  section[style*="padding: 72px"],
  section[style*="padding: 80px"] { padding: 52px 0 !important; }
  section[style*="padding:56px"],
  section[style*="padding: 56px"] { padding: 44px 0 !important; }
}
@media (max-width: 560px) {
  section[style*="padding:72px"],
  section[style*="padding:80px"],
  section[style*="padding: 72px"],
  section[style*="padding: 80px"] { padding: 44px 0 !important; }
  section[style*="padding:56px"],
  section[style*="padding: 56px"] { padding: 36px 0 !important; }
}

/* Lead — paragrafo introduttivo sotto page-h1 */
.lead {
  font-size: 18px;
  color: var(--text);
  line-height: 1.65;
}
@media (max-width: 560px) { .lead { font-size: 16px; } }

/* =================================================================
   SYSTEM POLISH 2026-07
   Regole finali: scala unica, ritmo mobile, griglie prevedibili.
   ================================================================= */

:root {
  --page-x: clamp(18px, 3vw, 28px);
  --section-y: clamp(64px, 8vw, 92px);
  --section-y-compact: clamp(44px, 6vw, 64px);
  --section-gap: clamp(28px, 5vw, 52px);
  --card-pad: clamp(20px, 3vw, 28px);
  --copy-lg: clamp(16px, 1.5vw, 18px);
  --copy-md: 15px;
  --copy-sm: 13px;
  --shadow-card: 0 10px 32px rgba(15,25,35,.075), 0 1px 3px rgba(15,25,35,.04);
}

html,
body {
  width: 100%;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  letter-spacing: 0;
}

.container,
.container-wide {
  width: min(100%, var(--container-max, 1100px));
  padding-left: var(--page-x);
  padding-right: var(--page-x);
}

.container-wide { --container-max: 1280px; }

section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.section-sm {
  padding-top: var(--section-y-compact);
  padding-bottom: var(--section-y-compact);
}

.section-head,
.problem-intro,
.method-head,
.incentivi-head {
  margin-bottom: var(--section-gap);
}

.section-head h2,
.problem-intro h2,
.method-head h2,
.incentivi-head h2,
.cta-text h2 {
  font-size: var(--fs-h2);
  line-height: 1.16;
}

.section-head p,
.problem-intro p,
.method-head p,
.incentivi-head p,
.cta-text p {
  font-size: var(--copy-lg);
}

.module-card,
.problem-card,
.incentivo-card,
.testimonial-card,
.pricing-card,
.faq-item,
.sector-tile,
.cs-preview-card {
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}

.problem-card,
.testimonial-card,
.pricing-card,
.cs-preview-card,
.incentivo-card {
  padding: var(--card-pad);
}

.g2,
.g3,
.g4,
.problem-cards,
.incentivi-grid,
.pricing-grid,
.faq-grid,
.cs-preview-grid {
  gap: clamp(16px, 2.4vw, 24px);
}

.hero h1 {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.08;
}

.hero-sub {
  font-size: var(--copy-lg);
  max-width: 560px;
}

.btn {
  min-width: 0;
  max-width: 100%;
}

.btn-lg {
  height: 52px;
  font-size: 16px;
}

.module-card-top {
  padding: var(--card-pad);
}

.module-card-bottom {
  padding: 20px var(--card-pad) var(--card-pad);
}

.module-card h3,
.problem-card h3,
.incentivo-card h3,
.testimonial-card h3,
.pricing-card h3,
.faq-q,
.cs-preview-card h3 {
  font-size: var(--fs-h3);
  line-height: 1.28;
}

.module-card p,
.problem-card p,
.testimonial-quote,
.pricing-desc,
.faq-a,
.cs-preview-card p {
  font-size: var(--copy-md);
  line-height: 1.62;
}

.module-kpi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.module-kpi-item strong {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
}

.module-capabilities {
  gap: 12px;
}

.module-capability {
  min-height: 0;
  padding: 14px;
}

.sectors-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.results-grid {
  gap: 1px;
  background: rgba(255,255,255,.1);
}

.result-item {
  background: rgba(255,255,255,.035);
  border-right: 0;
}

.result-item strong {
  font-size: clamp(34px, 5vw, 50px);
}

.cta-inner {
  gap: clamp(32px, 5vw, 56px);
}

.cta-form {
  border-radius: var(--r);
  padding: var(--card-pad);
}

.site-footer {
  padding-top: clamp(44px, 6vw, 64px);
}

@media (max-width: 820px) {
  :root {
    --page-x: 20px;
    --section-y: 56px;
    --section-y-compact: 44px;
    --section-gap: 32px;
  }

  body {
    font-size: 15px;
  }

  .site-ann {
    min-height: 38px;
    padding-right: 42px;
  }

  .nav-mobile {
    padding: calc(68px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  }

  .nav-mobile a {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 14px;
  }

  .hero.hero-photo {
    padding-top: calc(60px + 56px);
    padding-bottom: 56px;
  }

  .hero-inner {
    gap: 28px;
    text-align: left;
  }

  .hero h1 {
    font-size: clamp(32px, 8vw, 42px);
    line-height: 1.08;
  }

  .hero-actions,
  .hero-trust {
    justify-content: flex-start;
  }

  .g2,
  .g3,
  .g4,
  .problem-cards,
  .method-grid,
  .incentivi-grid,
  .pricing-grid,
  .faq-grid,
  .cta-inner {
    grid-template-columns: 1fr;
  }

  .module-capabilities,
  .qualify-checks,
  .form-g2 {
    grid-template-columns: 1fr;
  }

  .how-grid,
  .results-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sectors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sector-tile-img {
    height: clamp(118px, 32vw, 160px);
  }

  .section-head,
  .section-head.center,
  .problem-intro,
  .method-head,
  .incentivi-head {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 680px;
  }

  .footer-grid {
    gap: 28px 20px;
  }
}

@media (max-width: 560px) {
  :root {
    --page-x: 18px;
    --section-y: 48px;
    --section-y-compact: 38px;
    --card-pad: 18px;
  }

  .container,
  .container-wide {
    padding-left: var(--page-x);
    padding-right: var(--page-x);
  }

  .site-ann-inner {
    justify-content: flex-start;
  }

  .hero h1,
  .page-h1 {
    font-size: clamp(30px, 9vw, 38px);
  }

  .hero-sub,
  .lead {
    font-size: 16px;
    line-height: 1.58;
  }

  .hero-actions .btn,
  .cta-section .btn,
  .nav-mobile-cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 50px;
    white-space: normal;
    text-align: center;
  }

  .hero-trust {
    flex-direction: column;
    gap: 8px;
  }

  .module-kpi,
  .results-grid,
  .how-grid,
  .sectors-grid {
    grid-template-columns: 1fr;
  }

  .sector-tile {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 112px;
  }

  .sector-tile-img {
    height: 100%;
  }

  .sector-tile-body {
    padding: 14px;
  }

  .result-item {
    padding: 24px 18px;
    text-align: left;
  }

  .result-item strong {
    font-size: clamp(30px, 10vw, 38px) !important;
  }

  .footer-bottom {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 380px) {
  :root {
    --page-x: 16px;
  }

  .btn {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
  }

  .hero h1,
  .page-h1 {
    font-size: 29px;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .module-card,
  .sector-tile,
  .testimonial-card,
  .result-item,
  .problem-card,
  .method-step,
  .pricing-card,
  .faq-item,
  .how-step,
  .qualify-item,
  .contact-info-block,
  .incentivo-card,
  .section-head,
  .incentivi-head,
  .problem-intro,
  .method-head {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}
/* Shared form privacy and consent UI */
.form-privacy-consent{display:flex;align-items:flex-start;gap:9px;margin:12px 0 16px;font-size:12px;line-height:1.45;color:inherit;cursor:pointer}
.form-privacy-consent input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--mint,#00b8a9)}
.form-privacy-consent a{text-decoration:underline;color:inherit}
.cookie-consent{position:fixed;z-index:10000;left:20px;right:20px;bottom:20px;max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 22px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:#071724;color:#fff;box-shadow:0 16px 50px rgba(0,0,0,.34);font-size:14px}
.cookie-consent strong{font-size:16px}.cookie-consent p{margin:5px 0 0;max-width:680px;color:rgba(255,255,255,.76);line-height:1.5}
.cookie-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.cookie-actions button,.cookie-actions a{border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:10px 14px;background:transparent;color:#fff;font:inherit;cursor:pointer;text-decoration:none;white-space:nowrap}.cookie-actions .cookie-accept{background:var(--mint,#00b8a9);border-color:transparent;color:#062029;font-weight:700}
@media(max-width:700px){.cookie-consent{left:10px;right:10px;bottom:10px;display:block}.cookie-actions{margin-top:14px}.cookie-actions button{flex:1}}
@media(max-width:560px){.hero-content{min-width:0}.hero h1{font-size:clamp(29px,8.7vw,34px);overflow-wrap:break-word}.cookie-actions{display:grid;grid-template-columns:1fr 1fr}.cookie-actions a{grid-column:1/-1;text-align:center}.cookie-actions button{width:100%;white-space:normal}.cookie-actions button,.cookie-actions a{min-height:44px;display:flex;align-items:center;justify-content:center}.form-privacy-consent{font-size:13px;gap:11px}.footer-bottom a{display:inline-flex;min-height:40px;align-items:center}.ifp-note{font-size:11.5px!important}}