/* ================================================================
   FiliuTech v5.2 — Visual upgrade layer (ADDITIVO, non sostitutivo)
   ================================================================
   Caricare DOPO assets/styles.css:
     <link rel="stylesheet" href="assets/styles.css">
     <link rel="stylesheet" href="assets/styles.upgrade.css">
   ================================================================ */

/* ============ Utility classes ============ */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-6 { margin-top: 6px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-22 { margin-top: 22px; }
.u-mt-28 { margin-top: 28px; }
.u-mt-32 { margin-top: 32px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-22 { margin-bottom: 22px; }
.u-mb-28 { margin-bottom: 28px; }
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-flex { display: flex; }
.u-flex-wrap { flex-wrap: wrap; }
.u-gap-6 { gap: 6px; }
.u-gap-10 { gap: 10px; }
.u-gap-12 { gap: 12px; }
.u-max-460 { max-width: 460px; }
.u-max-640 { max-width: 640px; }
.u-max-720 { max-width: 720px; }
.u-fs-13 { font-size: 13px; }
.u-fs-38 { font-size: 38px; }
.u-fw-700 { font-weight: 700; }
.u-opacity-65 { opacity: 0.65; }
.u-opacity-85 { opacity: 0.85; }
.bg-gradient-cyber { background: linear-gradient(135deg, var(--cyber) 0%, var(--cyber-dark) 100%); color: var(--navy); }
.section-cta {
  background: linear-gradient(135deg, var(--cyber) 0%, var(--cyber-dark) 100%);
  color: var(--navy); text-align: center; padding: 72px 0;
}

/* ============ Focus visibility ============ */
:focus-visible { outline: 3px solid var(--cyber); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============ NAVIGATION v5.2 ============ */
.main-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: padding 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.main-nav.scrolled {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 24px rgba(15,23,42,0.06);
}
.nav-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 20px;
  transition: padding 0.2s ease;
}
.main-nav.scrolled .nav-wrap { padding: 9px 24px; }

.logo {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy); font-weight: 800; font-size: 1.05rem;
  text-decoration: none; letter-spacing: -0.02em;
  flex-shrink: 0;
}
.logo:hover { color: var(--navy); }
.logo .logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--cyber) 0%, var(--cyber-dark) 100%);
  color: var(--navy); font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,200,150,0.25);
}
.logo .tech { color: var(--cyber-dark); }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none; padding: 0; margin: 0 auto;
}
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  color: var(--text); font-weight: 500; font-size: 14.5px;
  text-decoration: none; border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  position: relative;
}
.nav-links > li > a:hover,
.nav-links > li > a.active {
  color: var(--cyber-dark);
  background: var(--cyber-soft);
}
.nav-links > li > a[aria-current="page"]::after,
.nav-links > li > a.active::after {
  content: ''; position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 2px; background: var(--cyber);
  border-radius: 2px;
}
.dd-arrow { transition: transform 0.2s; opacity: 0.6; }
.has-dropdown:hover .dd-arrow,
.has-dropdown.mobile-open .dd-arrow { transform: rotate(180deg); }

/* === Dropdown === */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15,23,42,0.18);
  padding: 12px;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 200;
}
.has-dropdown { position: relative; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.dropdown-mega {
  min-width: 760px;
  left: 50%; transform: translate(-50%, -8px);
  padding: 22px;
}
.has-dropdown:hover .dropdown-mega,
.has-dropdown:focus-within .dropdown-mega {
  transform: translate(-50%, 0);
}
.dd-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px;
}
.dd-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-muted); font-weight: 700;
  margin-bottom: 10px; padding: 0 8px;
}
.dd-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: background 0.15s;
}
.dd-item:hover { background: var(--bg-alt); color: inherit; }
.dd-item .dd-ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cyber-soft);
  color: var(--cyber-dark);
  border-radius: 8px;
  font-size: 16px; font-weight: 700;
}
.dd-item strong {
  display: block;
  color: var(--navy); font-weight: 600; font-size: 14px;
  margin-bottom: 1px;
}
.dd-item span {
  display: block;
  font-size: 12.5px; color: var(--text-muted);
}
.dd-item-simple {
  display: block;
  padding: 8px 12px;
  color: var(--text); text-decoration: none;
  font-size: 13.5px; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.dd-item-simple:hover { background: var(--bg-alt); color: var(--cyber-dark); }
.dd-col-feature { padding-left: 20px; border-left: 1px solid var(--border); }
.dd-cta {
  display: inline-block;
  margin-top: 12px; padding: 8px 14px;
  background: var(--cyber); color: var(--navy);
  font-weight: 700; font-size: 13px;
  border-radius: 8px; text-decoration: none;
  transition: transform 0.15s, background 0.15s;
}
.dd-cta:hover { background: var(--cyber-dark); color: var(--navy); transform: translateX(2px); }

.nav-cta {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

/* Hamburger menu button */
.menu-btn {
  display: none;
  width: 40px; height: 40px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: 8px;
  align-items: center; justify-content: center;
}
.menu-btn:hover { background: var(--bg-alt); }
.hamburger {
  display: inline-flex; flex-direction: column;
  width: 22px; height: 16px;
  position: relative;
}
.hamburger span {
  display: block; height: 2px; width: 100%;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.2s, top 0.3s;
  position: absolute; left: 0;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 7px; }
.hamburger span:nth-child(3) { top: 14px; }
.menu-btn.is-open .hamburger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-btn.is-open .hamburger span:nth-child(2) { opacity: 0; }
.menu-btn.is-open .hamburger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.4);
  z-index: 90;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* === Mobile nav === */
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .nav-links {
    position: fixed; top: 0; right: 0;
    height: 100vh; width: min(360px, 85vw);
    margin: 0;
    background: var(--white);
    box-shadow: -8px 0 32px rgba(15,23,42,0.16);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 80px 16px 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
    z-index: 99;
    /* v5.6 fix: bulletproof hide — anche se transform fallisse (iOS Safari + cached CSS) */
    visibility: hidden;
    pointer-events: none;
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s ease, visibility 0s linear 0s;
  }
  .nav-links > li { width: 100%; }
  .nav-links > li > a {
    padding: 14px 16px;
    width: 100%;
    justify-content: space-between;
    font-size: 16px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .dropdown {
    position: static;
    opacity: 1; visibility: visible;
    transform: none;
    box-shadow: none; border: 0;
    background: var(--bg-alt);
    border-radius: 0;
    padding: 8px 16px;
    margin-bottom: 8px;
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .has-dropdown.mobile-open .dropdown {
    max-height: 1200px;
    padding: 12px 16px;
  }
  .dropdown-mega {
    min-width: 0;
    transform: none;
    left: auto; right: auto;
  }
  .has-dropdown:hover .dropdown-mega,
  .has-dropdown:focus-within .dropdown-mega { transform: none; }
  .dd-grid { grid-template-columns: 1fr; gap: 14px; }
  .dd-col-feature { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
  .nav-cta { gap: 6px; }
  .nav-cta > a { padding: 9px 12px; font-size: 13px; }
  .nav-cta > a.btn-ghost { display: none; }
}

@media (max-width: 480px) {
  .logo { font-size: 0.95rem; }
  .logo .logo-mark { width: 28px; height: 28px; font-size: 14px; }
  .nav-cta > a.btn-primary { padding: 8px 10px; font-size: 12.5px; }
}

/* ============ HERO with cyber pattern ============ */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 70%, var(--navy-darker) 100%);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ''; position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,200,150,0.18) 0%, transparent 65%);
  z-index: -1;
  animation: heroGlow 12s ease-in-out infinite alternate;
}
.hero::after {
  content: ''; position: absolute;
  bottom: -150px; left: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 70%);
  z-index: -1;
}
/* Subtle grid pattern overlay */
.hero > .container { position: relative; z-index: 1; }
.hero > .container::before {
  content: ''; position: absolute;
  inset: -88px 0; z-index: -1;
  background-image:
    linear-gradient(rgba(0,200,150,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,150,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  pointer-events: none;
}
@keyframes heroGlow {
  0% { transform: translate(0,0) scale(1); opacity: 0.6; }
  100% { transform: translate(40px,30px) scale(1.15); opacity: 0.9; }
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--cyber) 0%, #5EEAD4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(0,200,150,0.12);
  border: 1px solid rgba(0,200,150,0.3);
  color: var(--cyber);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  margin-bottom: 22px;
}
.hero-tag .dot {
  width: 8px; height: 8px;
  background: var(--cyber); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0,200,150,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,200,150,0.6); }
  70% { box-shadow: 0 0 0 10px rgba(0,200,150,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,150,0); }
}
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 56px; align-items: center;
  padding: 88px 0;
}
.hero p {
  color: rgba(255,255,255,0.82);
  font-size: 1.125rem; line-height: 1.7;
  margin: 18px 0 28px;
  max-width: 560px;
}
.hero-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-trust {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 13.5px;
  color: rgba(255,255,255,0.7);
}
.hero-trust span::before {
  content: '✓ '; color: var(--cyber); font-weight: 700;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; padding: 64px 0; gap: 36px; }
}

/* === Scan widget === */
.scan-widget {
  position: relative;
  background: rgba(7,21,40,0.85);
  border: 1px solid rgba(0,200,150,0.25);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
.scan-widget::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--cyber) 50%, transparent 100%);
  animation: scanline 3s ease-in-out infinite;
}
@keyframes scanline {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(200px); opacity: 1; }
}
.widget-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.widget-head .dots {
  display: inline-flex; gap: 5px;
}
.widget-head .dots span {
  width: 10px; height: 10px;
  border-radius: 50%; background: rgba(255,255,255,0.2);
}
.widget-head .dots span:first-child { background: #FF5F57; }
.widget-head .dots span:nth-child(2) { background: #FEBC2E; }
.widget-head .dots span:last-child { background: #28C840; }
.badge-free {
  background: var(--cyber); color: var(--navy);
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 999px;
  letter-spacing: 1px;
}
#quickScanForm input {
  width: 100%; padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  border-radius: 8px;
  font-size: 14px; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
#quickScanForm input:focus {
  outline: none;
  border-color: var(--cyber);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(0,200,150,0.12);
}
#quickScanForm input::placeholder { color: rgba(255,255,255,0.4); }
#quickScanForm button {
  width: 100%; padding: 13px;
  background: var(--cyber); color: var(--navy);
  border: 0; border-radius: 8px;
  font-weight: 700; font-size: 14.5px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, transform 0.15s;
}
#quickScanForm button:hover {
  background: #5EEAD4; transform: translateY(-1px);
}
.scan-note {
  margin-top: 12px; font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}

/* ============ Trust band ============ */
.trust-band {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.85);
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.trust-band-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 36px; flex-wrap: wrap;
  font-size: 13.5px;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.trust-band-inner > span {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.tb-icon { width: 18px; height: 18px; color: var(--cyber); flex-shrink: 0; }
.trust-band-inner strong { color: var(--white); font-weight: 600; }

/* ============ Cards (lift effect) ============ */
.card, .diff-card, .price-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
}
.card:hover, .diff-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--cyber);
}
.card { display: block; padding: 28px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; }
.card .card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--cyber-soft); color: var(--cyber-dark);
  border-radius: 12px;
  font-size: 22px; font-weight: 700;
  margin-bottom: 14px;
}
.card h3 { margin-bottom: 8px; }
.card-meta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--cyber-dark); font-weight: 700;
}
.diff-card { padding: 24px; }
.diff-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cyber-soft); color: var(--cyber-dark);
  border-radius: 10px;
  font-size: 20px; font-weight: 700;
  margin-bottom: 14px;
}
.diff-card h4 { margin-bottom: 8px; }

/* Pricing featured */
.price-card.featured {
  position: relative;
  border: 2px solid var(--cyber) !important;
  box-shadow: 0 12px 32px rgba(0,200,150,0.18);
}
.price-card.featured::before {
  content: 'PIÙ RICHIESTO';
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--cyber); color: var(--navy);
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  padding: 4px 12px; border-radius: 999px;
}
.price-name {
  display: inline-block;
  background: var(--bg-soft); color: var(--text-muted);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px;
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.price-card.featured .price-name { background: var(--cyber-soft); color: var(--cyber-dark); }
.price-card h3 { margin-bottom: 6px; }
.price-amount {
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 800; color: var(--navy);
  margin: 8px 0 4px;
  font-family: 'JetBrains Mono', monospace;
}
.price-amount .euro { font-size: 0.6em; vertical-align: super; margin-right: 4px; opacity: 0.7; }
.price-amount small { font-size: 0.4em; font-weight: 500; color: var(--text-muted); margin-left: 6px; vertical-align: middle; }
.price-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }
.price-features {
  list-style: none; padding: 0; margin: 16px 0 20px;
  border-top: 1px solid var(--border); padding-top: 16px;
}
.price-features li {
  position: relative;
  padding-left: 24px; margin-bottom: 8px;
  font-size: 14.5px; color: var(--text-secondary);
}
.price-features li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--cyber-dark); font-weight: 800;
}
.price-features li.off { opacity: 0.45; }
.price-features li.off::before { content: '✕'; color: var(--text-muted); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.price-card { padding: 28px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); }
@media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ============ Testimonials ============ */
.testimonial {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s, transform 0.22s;
}
.testimonial:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.testimonial::before {
  content: '"';
  position: absolute; top: 4px; left: 18px;
  font-family: Georgia, serif;
  font-size: 70px; color: var(--cyber);
  opacity: 0.18; line-height: 1;
}
.testimonial blockquote {
  margin: 12px 0 18px;
  font-style: italic; color: var(--text-secondary); line-height: 1.7;
}
.testi-author { font-weight: 700; color: var(--navy); font-size: 15px; }
.testi-role { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

/* ============ FAQ details ============ */
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.faq-item[open] {
  border-color: var(--cyber);
  box-shadow: var(--shadow);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 50px 18px 22px;
  font-weight: 600;
  color: var(--navy);
  position: relative;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 24px; color: var(--cyber-dark);
  font-weight: 300;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-answer {
  padding: 0 22px 20px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.faq-list { max-width: 880px; margin: 0 auto; }

/* ============ Stat counter ============ */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  position: relative;
  text-align: center;
  padding: 24px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.stat:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--cyber);
}
.stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.05;
  margin-bottom: 6px;
}
.stat-num .plus { color: var(--cyber-dark); }
.stat-label {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============ Buttons with glow ============ */
.btn-primary {
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.btn-primary:hover::before { transform: translateX(100%); }

/* ============ Steps timeline ============ */
@media (min-width: 768px) {
  .steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .steps::before {
    content: ''; position: absolute;
    top: 28px; left: 12.5%; right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--cyber) 0%, var(--cyber-dark) 100%);
    opacity: 0.4; z-index: 0;
  }
  .step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
  .step-num {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--white);
    color: var(--cyber-dark);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800; font-size: 18px;
    border: 2px solid var(--cyber);
    margin: 0 auto 14px;
  }
  .bg-navy .step-num { background: var(--navy); color: var(--cyber); }
}
.step h4 { margin-bottom: 6px; }
.step p { font-size: 14.5px; color: var(--text-secondary); }

/* ============ Lead magnet ============ */
.lead-magnet {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px;
  align-items: center;
  padding: 64px 48px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border-radius: 20px;
}
@media (max-width: 880px) { .lead-magnet { grid-template-columns: 1fr; padding: 36px 24px; gap: 28px; } }
.ebook-mock {
  background: var(--white);
  padding: 28px 24px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(234,88,12,0.18);
  transform: rotate(-2deg);
  transition: transform 0.3s;
  position: relative;
}
.ebook-mock:hover { transform: rotate(0); }
.ebook-mock .badge {
  display: inline-block;
  background: var(--warm); color: var(--white);
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 14px;
}
.ebook-mock h4 { font-size: 1.1rem; margin-bottom: 14px; }
.ebook-mock ul {
  list-style: none; padding: 0; margin: 0;
  font-size: 13.5px; color: var(--text-secondary);
}
.ebook-mock li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.ebook-mock li:last-child { border: 0; font-style: italic; color: var(--text-muted); }

/* ============ Footer ============ */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 24px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px;
  margin-bottom: 40px;
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-col h5 {
  color: var(--white); font-size: 14px; font-weight: 700;
  margin-bottom: 14px; letter-spacing: 0.4px;
}
.footer-col a {
  display: block;
  padding: 5px 0;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--cyber); }
.footer-col p { margin: 0; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.65); }
.social-list {
  display: flex; gap: 10px; margin-top: 14px;
}
.social-list a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 0;
  transition: background 0.18s, transform 0.18s;
}
.social-list a:hover { background: var(--cyber); transform: translateY(-2px); }
.social-list svg { width: 16px; height: 16px; fill: var(--white); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-bottom a:hover { color: var(--cyber); }

/* ============ Floating: WhatsApp + Chatbot + Scroll-top ============ */
.wa-float {
  position: fixed; bottom: 26px; right: 26px;
  z-index: 999;
  width: 56px; height: 56px;
  background: #25D366; color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(37,211,102,0.55); color: white; }
.wa-float svg { width: 28px; height: 28px; fill: white; }
.chatbot-toggle {
  position: fixed; bottom: 26px; right: 92px;
  z-index: 999;
  width: 56px; height: 56px;
  background: var(--navy); color: var(--cyber);
  border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(11,31,58,0.4);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.chatbot-toggle:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(11,31,58,0.55); }
.chatbot-toggle svg { width: 26px; height: 26px; }
.chat-pulse {
  position: absolute; inset: -4px;
  border: 2px solid var(--cyber);
  border-radius: 50%;
  opacity: 0;
  animation: chatPulse 2.5s infinite;
  pointer-events: none;
}
@keyframes chatPulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

.chatbot-window {
  position: fixed; bottom: 100px; right: 26px;
  z-index: 999;
  width: min(380px, calc(100vw - 52px));
  height: 540px; max-height: calc(100vh - 140px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.24);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
  overflow: hidden;
}
.chatbot-window.open {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
}
.chatbot-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--navy);
  color: var(--white);
}
.chatbot-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--cyber);
}
.chatbot-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chatbot-head .title { font-weight: 700; font-size: 14.5px; }
.chatbot-head .status {
  font-size: 12px; color: rgba(255,255,255,0.65);
  display: flex; align-items: center; gap: 6px;
}
.dot-online {
  width: 8px; height: 8px;
  background: var(--cyber); border-radius: 50%;
  animation: pulse 2s infinite;
}
.chatbot-body {
  flex: 1; overflow-y: auto;
  padding: 16px; background: var(--bg-alt);
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.chatbot-body::-webkit-scrollbar { width: 6px; }
.chatbot-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.chat-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 88%;
  font-size: 14px; line-height: 1.5;
}
.chat-bubble.bot {
  background: var(--white);
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-bubble.user {
  background: var(--cyber); color: var(--navy);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-options {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.chat-options button {
  background: var(--white);
  border: 1px solid var(--cyber);
  color: var(--cyber-dark);
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.chat-options button:hover { background: var(--cyber-soft); }
.chatbot-footer {
  display: flex; padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.chatbot-footer input {
  flex: 1; padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px; font-family: inherit;
}
.chatbot-footer input:focus { outline: none; border-color: var(--cyber); }
.chatbot-footer button {
  margin-left: 8px;
  padding: 9px 14px;
  background: var(--cyber); color: var(--navy);
  border: 0; border-radius: 8px;
  font-weight: 700; cursor: pointer;
  font-family: inherit;
}

/* === Scroll to top === */
.scroll-top {
  position: fixed; bottom: 158px; right: 26px;
  z-index: 998;
  width: 44px; height: 44px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(15,23,42,0.12);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
}
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--navy); color: var(--cyber); border-color: var(--navy); }
.scroll-top svg { width: 18px; height: 18px; }

/* === Toast === */
.toast-host {
  position: fixed; bottom: 26px; left: 26px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 12px 18px;
  background: var(--navy); color: var(--white);
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 12px 24px rgba(15,23,42,0.2);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: auto;
  max-width: 340px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-warn { background: var(--warning); color: var(--navy); }

/* ============ Print ============ */
@media print {
  .main-nav, .site-footer, .wa-float, .chatbot-toggle, .chatbot-window,
  .cookie-banner, #klaro, .hero-cta, .nav-cta, .scroll-top, .toast-host { display: none !important; }
  body { background: white; color: black; }
  .hero { background: white !important; color: black !important; }
  .hero h1 .accent { -webkit-text-fill-color: var(--cyber-dark) !important; color: var(--cyber-dark) !important; }
}

/* ============ Mobile fixes ============ */
@media (max-width: 640px) {
  .hero-grid { gap: 28px !important; }
  .section-cta h2 { font-size: 26px !important; }
  .section-cta p { font-size: 15.5px !important; }
  .hero h1 { font-size: clamp(1.65rem, 8vw, 2.25rem); }
  .stat-num { font-size: 1.85rem; }
  .wa-float, .chatbot-toggle { bottom: 16px; }
  .chatbot-toggle { right: 82px; }
  .wa-float { right: 16px; }
  .chatbot-window { bottom: 86px; right: 16px; }
  .scroll-top { bottom: 142px; right: 16px; }
  .toast-host { left: 16px; right: 16px; bottom: 16px; }
  .toast { max-width: none; }
}

/* ============ Reveal on scroll (progressive enhancement) ============ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-head, .grid-2 > *, .grid-3 > *, .pricing-grid > *, .steps > * {
      animation: revealUp 0.6s ease-out both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes revealUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}

/* ============ Section spacing ============ */
section { padding: 88px 0; }
section.tight { padding: 56px 0; }
.section-head { margin-bottom: 48px; max-width: 720px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.bg-alt { background: var(--bg-alt); }
.bg-soft { background: var(--bg-soft); }
.bg-navy { background: var(--navy); color: var(--white); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); }
.bg-navy .lead { color: rgba(255,255,255,0.78); }
.bg-navy .eyebrow { color: var(--cyber); }

.flex-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.mt-3 { margin-top: 22px; }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }

/* ================================================================
   === v5.5 MOBILE FIXES ===
   Tested 320 / 375 / 414 / 768 px. Strictly additive: every rule
   below is wrapped in a max-width media query so desktop (>960px)
   is unaffected. Touch-friendly tap targets, no horizontal scroll,
   iOS notch safe-area, hardened mobile sidebar.
   ================================================================ */

/* ---- CRITICAL: kill horizontal scroll on every page ----
   Root cause: the mobile sidebar is position:fixed with
   width:min(360px,85vw) translated translateX(100%). The off-screen
   bounding box still extends documentElement.scrollWidth past the
   viewport on iOS Safari and Chrome Android, producing a phantom
   horizontal scrollbar / rubber-band on every page. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Universal tap-highlight + no callout on non-text interactive elements */
a, button, .btn, summary, [role="button"] {
  -webkit-tap-highlight-color: rgba(0, 200, 150, 0.16);
}
.btn, .menu-btn, .wa-float, .chatbot-toggle, .scroll-top,
.logo-mark, .card-icon, .diff-icon, .dd-ico {
  -webkit-touch-callout: none;
}

/* ---- Sidebar hardening: closed sidebar must be invisible to AT ---- */
@media (max-width: 960px) {
  .nav-links {
    /* Force right-anchored only, kill the inherited left:0 that
       desktop rule set, so the off-screen box can't push scroll. */
    left: auto !important;
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav-links.open {
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s linear 0s;
  }
  /* Mega dropdown must not impose its desktop min-width inside sidebar */
  .dropdown,
  .dropdown-mega {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .dd-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .dd-item { padding: 12px 10px; min-height: 44px; }
  .dd-ico { flex-shrink: 0; }
}

/* ---- Anchor scroll offset so sticky nav doesn't cover targets ---- */
:target { scroll-margin-top: 84px; }
section[id], h2[id], h3[id] { scroll-margin-top: 84px; }
@media (max-width: 960px) {
  :target { scroll-margin-top: 72px; }
  section[id], h2[id], h3[id] { scroll-margin-top: 72px; }
}

/* ---- 375px and below: typography + spacing ---- */
@media (max-width: 480px) {
  .hero h1, .page-hero h1 {
    font-size: clamp(1.6rem, 7.5vw, 2rem);
    line-height: 1.18;
    letter-spacing: -0.022em;
  }
  h2 { font-size: clamp(1.4rem, 6vw, 1.85rem); line-height: 1.22; }
  h3 { font-size: 1.18rem; line-height: 1.25; }
  .lead, .hero p, .page-hero p { font-size: 1rem; line-height: 1.6; }
  .container, .container-narrow { padding-left: 18px; padding-right: 18px; }
  section { padding: 56px 0; }
  .section-head { margin-bottom: 32px; }
  .scan-widget, .widget { padding: 18px; border-radius: 14px; }
  .scan-widget::before { display: none; } /* kill scanline at small width */
  .card { padding: 20px; }
  .diff-card { padding: 20px; }
  .price-card { padding: 24px 20px; }
  .testimonial { padding: 22px 18px 18px; }
  article.post { padding: 36px 18px 56px; }
  article.post h2 { font-size: 1.4rem; margin: 28px 0 10px; }
  article.post h3 { font-size: 1.1rem; margin: 22px 0 8px; }
  article.post p, article.post li { font-size: 15.5px; }
  article.post blockquote { padding: 12px 16px; margin: 18px 0; }
  article.post .cta-box { padding: 22px 20px; }
}

/* ---- Touch tap-target floor: 44px (Apple HIG) ---- */
@media (max-width: 960px) {
  .btn, .btn-sm { min-height: 44px; }
  .btn-sm { padding: 10px 16px; font-size: 13.5px; }
  .nav-cta .btn-primary { min-height: 40px; padding: 10px 14px; }
  .menu-btn { width: 44px; height: 44px; }
  .nav-links > li > a { min-height: 48px; display: flex; align-items: center; }
  .dd-item-simple { padding: 12px; min-height: 44px; display: flex; align-items: center; }
  .breadcrumb { padding: 14px 0; line-height: 1.6; }
  .breadcrumb a { display: inline-block; padding: 6px 4px; margin: -6px -4px; }
  .faq-item summary { padding: 18px 48px 18px 18px; min-height: 56px; }
  .social-list a { width: 44px; height: 44px; }
  .price-features li { padding: 12px 0 12px 28px; }
  .field input, .field select, .field textarea,
  #quickScanForm input, .scan-widget input {
    min-height: 46px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }
  .field textarea { min-height: 110px; }
  /* Cookie banner buttons */
  .cookie-actions button, .klaro .cookie-modal button { min-height: 44px; }
}

/* ---- Form input safety: full width, no flex weirdness ---- */
@media (max-width: 640px) {
  .form-row { gap: 10px; }
  .field input, .field select, .field textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
  .scan-widget input { box-sizing: border-box; }
  .field-checkbox { gap: 12px; }
  .field-checkbox input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
}

/* ---- Pricing card "PIÙ RICHIESTO" badge stays inside card ---- */
@media (max-width: 640px) {
  .price-card.featured::before {
    font-size: 10px;
    padding: 4px 10px;
    letter-spacing: 0.8px;
    white-space: nowrap;
    max-width: calc(100% - 20px);
  }
  .price-card { padding-top: 28px; }
  .price-amount { font-size: clamp(2rem, 9vw, 2.5rem); }
}

/* ---- Footer column gap mobile ---- */
@media (max-width: 640px) {
  .footer-grid { gap: 32px 24px; }
  .footer-col h5 { margin-bottom: 10px; }
  .footer-col a, .footer-col p { padding: 4px 0; font-size: 14px; }
  .footer-bottom { gap: 10px; font-size: 12px; }
  .footer-bottom > * { flex-basis: 100%; text-align: center; }
}

/* ---- Lead magnet: ebook mock not too large mobile ---- */
@media (max-width: 640px) {
  .lead-magnet { padding: 28px 22px; gap: 22px; border-radius: 16px; }
  .ebook-mock { transform: rotate(-1.5deg); padding: 20px 18px; max-width: 280px; margin: 0 auto; }
  .ebook-mock h4 { font-size: 1rem; }
}

/* ---- Mockup industry tabs / scrollable rails ---- */
@media (max-width: 720px) {
  .industry-tabs, .mockup-tabs, [role="tablist"] {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
  }
  .industry-tabs::-webkit-scrollbar,
  .mockup-tabs::-webkit-scrollbar,
  [role="tablist"]::-webkit-scrollbar { display: none; }
  .industry-tabs > *, .mockup-tabs > *, [role="tablist"] > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ---- Code blocks horizontal scroll inside articles ---- */
@media (max-width: 640px) {
  pre, code.block, .code-block, article.post pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 13px;
    padding: 14px 16px;
    border-radius: 10px;
  }
  pre code, code { word-break: normal; white-space: pre; }
  /* Inline code wraps */
  article.post p code, article.post li code {
    word-break: break-word;
    white-space: normal;
    padding: 2px 6px;
  }
}

/* ---- Calcolatore rischio: option cards + step indicator ---- */
@media (max-width: 640px) {
  .option-card, .calc-option {
    min-height: 56px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .step-indicator, .calc-steps { gap: 6px; flex-wrap: wrap; }
  .step-indicator > *, .calc-steps > * { font-size: 12.5px; }
}

/* ---- Tables in articles ---- */
@media (max-width: 640px) {
  article.post table, .responsive-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ---- Floating buttons: iOS safe-area + 44px target ---- */
@media (max-width: 960px) {
  .wa-float, .chatbot-toggle {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }
  .wa-float svg { width: 26px; height: 26px; }
  .chatbot-toggle svg { width: 24px; height: 24px; }
}
@media (max-width: 480px) {
  .wa-float { right: 12px; }
  .chatbot-toggle { right: 72px; }
  .chatbot-window {
    right: 8px; left: 8px;
    width: auto;
    max-width: none;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    height: min(72vh, 540px);
  }
  .scroll-top { right: 12px; bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
  .toast-host { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Cookie banner / Klaro mobile-friendly ---- */
@media (max-width: 640px) {
  .cookie-banner, #klaro .cookie-notice, #klaro .cookie-modal {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 13.5px;
  }
  .cookie-banner-inner, #klaro .cn-body { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-actions, #klaro .cn-buttons { flex-direction: column; gap: 8px; width: 100%; }
  .cookie-actions button, #klaro .cn-buttons button { width: 100%; }
}

/* ---- Hero quick-scan widget tighter mobile ---- */
@media (max-width: 480px) {
  .hero-grid { gap: 24px !important; padding: 56px 0 48px !important; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 auto; min-width: 0; }
  .hero-trust { gap: 14px; font-size: 12.5px; }
  .hero-tag { font-size: 11.5px; padding: 5px 12px; }
}

/* ---- Service detail sidebar: unsticky on mobile to avoid overlap ---- */
@media (max-width: 900px) {
  .service-sidebar { position: static; top: auto; }
}

/* ---- Cards inside scroll-snap (industry mockup row) ---- */
@media (max-width: 640px) {
  .grid-2 > .card, .grid-3 > .card, .grid-4 > .card { width: 100%; }
}

/* ---- Reduce motion on mobile to save battery / nausea ---- */
@media (prefers-reduced-motion: reduce) {
  .scan-widget::before,
  .chat-pulse,
  .hero-tag .dot,
  .dot-online { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* ---- Focus-visible polish: stronger on dark hero ---- */
.bg-navy :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible {
  outline-color: #5EEAD4;
  outline-offset: 3px;
}

/* ---- 320px ultra-small (iPhone SE 1st gen) ---- */
@media (max-width: 360px) {
  .container, .container-narrow { padding-left: 14px; padding-right: 14px; }
  .nav-cta .btn-primary { padding: 8px 10px; font-size: 12px; }
  .logo { font-size: 0.95rem; gap: 6px; }
  .logo .logo-mark { width: 26px; height: 26px; font-size: 13px; }
  .hero h1, .page-hero h1 { font-size: clamp(1.45rem, 8vw, 1.85rem); }
  .price-amount { font-size: 1.85rem; }
  .stat-num { font-size: 1.7rem; }
}

/* === END v5.5 MOBILE FIXES === */

/* ============================================================
   === v5.6 MOBILE NAV HOTFIX ===
   Bug report (user): "si vede a metà il menu tutto verso destra"
   Root cause: open .nav-links has z-index:99, but .wa-float,
   .chatbot-toggle, .scroll-top, and the Klaro cookie-notice all
   have z-index 998-999. They sit on top of the slide-in panel,
   covering its bottom-right half. Hit-testing confirmed clicks
   inside the panel hit the cookie banner and float buttons.

   Strategy:
   1) Promote the open mobile nav above floating UI (z-index 9000+)
   2) Hide the lower-priority floating widgets while the drawer is
      open (cleaner than stacking-war and avoids covering the Klaro
      banner with an opaque white sidebar that has no consent button)
   3) Keep Klaro accessible by allowing it to sit ABOVE the overlay
      (so cookie consent still works) but BELOW the drawer header.
   Desktop (>960px) is untouched.
   ============================================================ */
@media (max-width: 960px) {
  /* 1. Lift the open drawer + overlay above all floating UI */
  .nav-links {
    z-index: 9001;
  }
  .nav-overlay {
    z-index: 9000;
  }

  /* 2. While the drawer is open, hide floating widgets that would
        otherwise punch through the panel on the right edge. */
  body.nav-open .wa-float,
  body.nav-open .chatbot-toggle,
  body.nav-open .chatbot-window,
  body.nav-open .scroll-top,
  body.nav-open .klaro .cookie-notice,
  body.nav-open .klaro .cookie-modal,
  body.nav-open #klaro .cm-modal,
  body.nav-open #klaro .cn-body {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 3. Body scroll lock — JS already sets overflow:hidden, this is
        a CSS belt-and-suspenders so the hash from outside scrolls
        don't leak through on iOS. */
  body.nav-open {
    overflow: hidden !important;
    touch-action: none;
  }
}

/* Ultra-small viewports (<=360px): drawer should span almost full
   width so the user doesn't see the dim page peek that looks like
   "menu cut in half". 92vw keeps a 1cm gesture grab area on the left. */
@media (max-width: 360px) {
  .nav-links {
    width: min(92vw, 340px) !important;
  }
}
/* === END v5.6 MOBILE NAV HOTFIX === */

/* ============================================================
   === v5.7 MOBILE NAV — DEFINITIVE FIX ===
   Bug report (user): "si vede a metà il menu tutto verso destra"

   Real root cause (verified with playwright simulated 390x800):
   1) Sidebar width: min(360px, 85vw) leaves a left page sliver
      visible behind the overlay → user perceives "menu a metà"
   2) Dropdown panels (Servizi/Strumenti mega menus) render
      partially visible as gray ghost boxes even when collapsed,
      because max-height:0 doesn't kill padding/border/bg

   Fix strategy:
   - Drawer goes FULL viewport width (100vw) on mobile so the
     overlay-sliver illusion disappears
   - Collapsed dropdowns must have ZERO visual footprint
   - When mobile-open: dropdown expands inline with native height
   - Drawer panel internal layout: pure list, no inline-flex
     residue from desktop rules
   ============================================================ */

@media (max-width: 960px) {

  /* ---- Drawer: full-screen panel (FIXED with inset top/right/bottom/left=0)
         Using left+right=0 instead of width:100vw avoids the desktop-scrollbar
         shift bug where 100vw > clientWidth → drawer slipped 15px to the left.
         Using 100dvh + min-height 100vh ensures full coverage on iOS Safari. */
  nav .nav-links,
  nav .nav-links.open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;  /* iOS dynamic viewport (Safari 15.4+) */
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 76px 18px 32px !important;
    background: var(--white) !important;
    box-shadow: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 9001 !important;
    box-sizing: border-box !important;
  }

  /* Animation uses translateY (slide down from top) instead of translateX
     to avoid any left/right edge clipping issues with inset:0 fullscreen. */
  nav .nav-links {
    transform: translateY(-100%) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  nav .nav-links.open {
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* ---- Drawer items: full-width pill rows ---- */
  nav .nav-links > li {
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
  }
  nav .nav-links > li > a {
    display: flex !important;
    width: 100% !important;
    padding: 16px 4px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 56px !important;
    text-decoration: none !important;
  }
  nav .nav-links > li > a:active {
    background: var(--cyber-soft) !important;
  }
  nav .nav-links > li > a::after { display: none !important; }

  /* ---- Dropdown collapsed: ZERO visual footprint ---- */
  nav .has-dropdown .dropdown {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
  }
  nav .has-dropdown.mobile-open .dropdown {
    max-height: 1500px !important;
    padding: 12px 0 16px !important;
    background: var(--bg-alt) !important;
    border-radius: 10px !important;
    margin: 8px 0 12px !important;
  }

  /* Mega dropdown grid collapses to single column */
  nav .dropdown-mega { left: auto !important; right: auto !important; }
  nav .dd-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  nav .dd-eyebrow {
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--text-muted) !important;
    padding: 8px 14px 4px !important;
    margin: 0 !important;
    background: transparent !important;
  }
  nav .dd-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    min-height: 52px !important;
    border-radius: 8px !important;
  }
  nav .dd-item-simple {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    min-height: 48px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }
  nav .dd-col-feature {
    padding: 8px 0 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 8px !important;
  }
  nav .dd-cta {
    margin: 12px 14px !important;
    padding: 12px 18px !important;
    min-height: 48px !important;
  }
  nav .dd-arrow { width: 14px !important; height: 14px !important; }

  /* ---- Overlay sits BELOW drawer but ABOVE everything else ---- */
  .nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(11, 31, 58, 0.55) !important;
    z-index: 9000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s !important;
  }
  .nav-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease, visibility 0s linear 0s !important;
  }

  /* ---- Body scroll lock while drawer is open ---- */
  body.nav-open,
  body:has(.nav-links.open) {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* ---- Suppress floating widgets when drawer open ---- */
  body:has(.nav-links.open) .wa-float,
  body:has(.nav-links.open) .chatbot-toggle,
  body:has(.nav-links.open) .chatbot-window,
  body:has(.nav-links.open) .scroll-top,
  body:has(.nav-links.open) #klaro,
  body.nav-open .wa-float,
  body.nav-open .chatbot-toggle,
  body.nav-open .chatbot-window,
  body.nav-open .scroll-top,
  body.nav-open #klaro {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ---- Menu button (hamburger) ---- */
  .menu-btn {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 9002 !important;  /* stays above drawer for close action */
    position: relative !important;
  }
}

/* === END v5.7 MOBILE NAV — DEFINITIVE FIX === */