:root {
  --ink: #080808;
  --white: #f8f7f4;
  /* Verdi normalizzati: dark = eyebrow/testi/bordi, accent = CTA verde pieno, hover = accent più scuro */
  --green-dark: #1a4a3a;
  --green-accent: #22c97a;
  --green-accent-hover: #1db86e;
  --green-tint: rgba(34,201,122,0.08);
  /* Alias per retrocompatibilità — NON usare nei nuovi CSS, preferire -dark / -accent */
  --green: var(--green-dark);
  --gb: var(--green-accent);
  --red: #c0392b;
  --amber: #e8a830;
  --mid: #555;
  --border: rgba(8,8,8,0.1);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
html, body {
  overflow-x:clip; max-width:100%;
}
body {
  font-family:'DM Sans',sans-serif;
  background:var(--white);
  color:var(--ink);
  line-height:1.7;
  font-weight:400;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word; word-wrap:break-word;
}

/* ── Anti-overflow orizzontale globale ── */
img, svg, video, iframe, canvas, embed, object {
  max-width:100%; height:auto; display:block;
}
pre, code { max-width:100%; overflow-x:auto; white-space:pre-wrap; word-wrap:break-word; }
table { display:block; max-width:100%; overflow-x:auto; }
/* Permetti ai grid/flex children di shrink sotto il content intrinseco */
main, section, .container, .container--narrow,
.cards, .stats, .steps, .pricing-grid, .service-grid, .sector-grid,
.blog-grid, .benefits-grid, .results-highlight, .form, .ps-item {
  min-width:0;
}
/* Turnstile widget non deve mai sforare */
.cf-turnstile { max-width:100%; overflow:hidden; }
.cf-turnstile iframe { max-width:100% !important; }
/* Email/URL lunghi si spezzano se non entrano */
.contact-info a, .footer a, .legal a, .article-body a {
  word-break:break-word; overflow-wrap:anywhere;
}
a { color:var(--gb); text-decoration:none; transition:color .2s; }
a:hover { color:var(--green); }

/* ── Container ── */
.container { max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.container--narrow { max-width:720px; margin:0 auto; padding:0 1.5rem; }

/* ── Typography ── */
h1, h2, h3, h4 { font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-0.02em; line-height:1.15; color:var(--ink); }
/* Offset anchor: nav fixed 64px + respiro, evita heading incollato sotto la nav su #ancore */
h1, h2, h3, h4, section[id], [id] { scroll-margin-top:96px; }
h1 { font-size:clamp(2rem, 5vw, 3.2rem); margin-bottom:1.5rem; }
h2 { font-size:clamp(1.5rem, 3.5vw, 2.2rem); margin-bottom:1rem; font-weight:700; }
h3 { font-size:clamp(1.1rem, 2.5vw, 1.4rem); margin-bottom:0.75rem; font-weight:700; }
p { margin-bottom:1rem; color:var(--mid); font-size:0.95rem; }
.subtitle { font-size:clamp(1.05rem, 2vw, 1.25rem); color:var(--mid); line-height:1.6; font-weight:300; max-width:min(62ch, 100%); }
.page-header p { max-width:min(62ch, 100%); }
/* Page header centrato (Contatti, pagine settore) */
.page-header--center { text-align:center; max-width:900px; margin:0 auto; }
.page-header--center h1 { max-width:20ch; margin-left:auto; margin-right:auto; text-align:center; }
.page-header--center p,
.page-header--center .subtitle { margin-left:auto; margin-right:auto; text-align:center; max-width:62ch; }
/* Layout Contatti: form centrato come blocco (resta left-align internamente), info contatto centrate */
.contatti-layout .form { margin:2rem auto 0; }
.contatti-layout .contact-info { text-align:center; }
.contatti-layout .contact-info__item { justify-content:center; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.85rem 2rem; min-height:44px; border-radius:8px;
  font-family:'DM Sans',sans-serif; font-weight:500; font-size:0.95rem;
  text-decoration:none; transition:all .25s; cursor:pointer; border:none;
  line-height:1.2;
}
/* Button variants — gerarchia unificata:
   primary  → CTA forte (nero pieno), uso raro/massima attenzione
   accent   → CTA vivace verde su fondo chiaro
   outline  → CTA secondaria su fondo chiaro
   light    → CTA chiara su fondo scuro (cta-block, service-cta)
   green    → [deprecato, alias di accent per retrocompatibilità] */
.btn--primary { background:var(--ink); color:var(--white); border:1.5px solid var(--ink); }
.btn--primary:hover { background:transparent; color:var(--ink); }
.btn--accent { background:var(--green-accent); color:var(--white); border:1.5px solid var(--green-accent); }
.btn--accent:hover { background:var(--green-accent-hover); border-color:var(--green-accent-hover); color:var(--white); }
.btn--outline { background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn--outline:hover { background:var(--ink); color:var(--white); }
.btn--light { background:var(--white); color:var(--green-dark); border:1.5px solid var(--white); }
.btn--light:hover { background:var(--green-accent); color:var(--white); border-color:var(--green-accent); }
/* Retrocompat: .btn--green mappato a .btn--accent */
.btn--green { background:var(--green-accent); color:var(--white); border:1.5px solid var(--green-accent); }
.btn--green:hover { background:var(--green-accent-hover); border-color:var(--green-accent-hover); color:var(--white); }

/* ── Accessibility: focus-visible universale ── */
:focus { outline:none; }
:focus-visible {
  outline:2px solid var(--gb); outline-offset:2px; border-radius:4px;
}
.btn:focus-visible, .nav__cta:focus-visible, .pricing-cta:focus-visible,
.faq__q:focus-visible, .cookie-banner button:focus-visible {
  outline:2px solid var(--gb); outline-offset:3px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Nav ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(248,247,244,0.92);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav__inner {
  max-width:1120px; margin:0 auto; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav__logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.5rem;
  text-decoration:none; letter-spacing:-0.03em;
}
.nav__logo-ink { color:var(--ink); }
.nav__logo-green { color:var(--green); }
.nav__links { display:flex; align-items:center; gap:1.8rem; list-style:none; }
.nav__links a {
  font-size:0.88rem; font-weight:400; color:var(--mid);
  text-decoration:none; transition:color .2s;
}
.nav__links a:hover { color:var(--ink); }
.nav__links a.nav__link--active { color:var(--ink); font-weight:500; }
.nav__links a.nav__link--active::after {
  content:''; display:block; width:100%; height:2px;
  background:var(--gb); border-radius:2px; margin-top:2px;
}
@media (max-width:768px) {
  .nav__links a.nav__link--active { color:var(--green); }
  .nav__links a.nav__link--active::after { display:none; }
}
.nav__cta {
  padding:0.6rem 1.3rem; border-radius:8px;
  background:var(--ink); color:var(--white) !important;
  font-weight:500; font-size:0.85rem;
  transition:background .2s;
}
.nav__cta:hover { background:var(--green); color:var(--white) !important; }

/* Hamburger: 44×44 touch target (WCAG AA) */
.nav__hamburger {
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; margin-right:-10px; position:relative;
  flex-direction:column; justify-content:center; align-items:center;
  border-radius:8px; transition:background .2s;
}
.nav__hamburger:hover { background:rgba(8,8,8,0.05); }
.nav__hamburger span {
  display:block; width:22px; height:2px; background:var(--ink);
  transition:all .3s; position:absolute; border-radius:2px;
}
.nav__hamburger span:nth-child(1) { transform:translateY(-6px); }
.nav__hamburger span:nth-child(3) { transform:translateY(6px); }
.nav__hamburger.active span:nth-child(1) { transform:rotate(45deg); }
.nav__hamburger.active span:nth-child(2) { opacity:0; }
.nav__hamburger.active span:nth-child(3) { transform:rotate(-45deg); }

/* Overlay dietro il drawer: oscura la pagina quando il menu è aperto */
.nav__overlay {
  position:fixed; inset:64px 0 0 0; z-index:998;
  background:rgba(8,8,8,0.35);
  visibility:hidden; opacity:0;
  transition:opacity .25s ease, visibility .25s ease;
  pointer-events:none;
}
.nav__overlay.open { visibility:visible; opacity:1; pointer-events:auto; }

@media (max-width:768px) {
  .nav__hamburger { display:flex; }
  .nav__links {
    position:fixed; top:64px; left:0; right:0;
    max-height:calc(100vh - 64px); overflow-y:auto;
    background:#f8f7f4;
    background:rgba(248,247,244,0.98);
    backdrop-filter:saturate(180%) blur(24px);
    -webkit-backdrop-filter:saturate(180%) blur(24px);
    box-shadow:0 12px 28px rgba(8,8,8,0.15), 0 2px 6px rgba(8,8,8,0.08);
    border-bottom:1px solid var(--border);
    z-index:999;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:1rem 1.5rem 2rem;
    gap:0;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav__links.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__links a {
    font-size:1.05rem; font-weight:500; color:var(--ink);
    padding:0.95rem 0.25rem; min-height:44px;
    display:flex; align-items:center;
    border-bottom:1px solid var(--border);
  }
  .nav__links a:last-child { border-bottom:none; }
  .nav__cta {
    text-align:center; display:block; margin-top:1rem;
    padding:0.95rem 1.3rem !important;
    border-bottom:none !important; font-size:0.95rem !important;
    border-radius:10px;
  }
}

/* Fallback: se backdrop-filter non supportato, rendi il background completamente opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background:#f8f7f4; }
  .nav__links { background:#f8f7f4 !important; }
}

/* Body-lock quando il menu mobile è aperto (toggle via JS).
   position:fixed + width:100% gestisce correttamente iOS Safari. */
body.nav-open {
  position:fixed; top:var(--nav-scroll-offset, 0); left:0; right:0;
  width:100%; overflow:hidden;
}

/* ── Hero ── */
.hero {
  padding:8rem 0 4rem;
  min-height:80vh; display:flex; align-items:center;
}
/* Contenuto hero centrato: no più metà destra vuota su desktop */
.hero__content { max-width:900px; margin:0 auto; text-align:center; }
.hero__badge {
  display:inline-block; padding:0.35rem 1rem; border-radius:50px;
  background:rgba(34,201,122,0.1); color:var(--green);
  font-size:0.8rem; font-weight:500; margin-bottom:1.5rem;
}
.hero h1 {
  max-width:48rem;
  margin-left:auto; margin-right:auto;
  font-size:clamp(2.5rem, 5.5vw, 4.2rem);
  text-align:center;
}
.hero p { max-width:36rem; margin-left:auto; margin-right:auto; text-align:center; }
.hero .mt-2 { display:flex; justify-content:center; }

/* ── Sections ── */
.section { padding:5rem 0; }
.section--alt { background:rgba(8,8,8,0.02); }
.section__label {
  font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.12em; color:var(--gb);
  margin-bottom:0.75rem;
}

/* ── Stat cards ── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; margin:2.5rem 0; }
.stat { text-align:center; padding:2rem 1rem; border:1px solid var(--border); border-radius:12px; background:var(--white); }
.stat__number {
  font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2rem,4vw,2.8rem);
  color:var(--green-dark);
  /* Reset esplicito anti-outline: se una regola cached o esterna imposta text-stroke/fill trasparente, forza il fill pieno */
  -webkit-text-stroke:0;
  -webkit-text-fill-color:currentColor;
}
.stat__label { font-size:0.85rem; color:var(--mid); margin-top:0.3rem; }

/* ── Steps ── */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; margin:2.5rem 0; }
.step {
  padding:2rem 1.5rem; border:1px solid var(--border); border-radius:12px;
  background:var(--white); position:relative;
}
.step__num {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--green); color:var(--white);
  font-family:'Syne',sans-serif; font-weight:700; font-size:0.9rem;
  margin-bottom:1rem;
}
.step h3 { font-size:1.05rem; }
.step p { font-size:0.88rem; }

/* ── Cards grid ── */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin:2rem 0; }
.card {
  padding:2rem 1.5rem; border:1px solid var(--border); border-radius:12px;
  background:var(--white); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-decoration:none; display:block; color:inherit;
}
.card:hover { transform:translateY(-3px); border-color:var(--green-dark); box-shadow:0 8px 24px rgba(8,8,8,0.06); }
.card__icon { font-size:1.6rem; margin-bottom:0.75rem; display:block; }
.card h3 { font-size:1rem; color:var(--ink); }
.card p { font-size:0.85rem; color:var(--mid); }

/* ── CTA banner ── */
.cta-banner {
  padding:4rem 2rem; border-radius:16px; text-align:center;
  background:var(--ink); color:var(--white); margin:3rem 0;
}
.cta-banner h2 { color:var(--white); }
.cta-banner p { color:rgba(248,247,244,0.7); max-width:500px; margin:0 auto 2rem; }

/* ── Breadcrumbs ── */
.breadcrumbs {
  padding:5.5rem 0 0;
  font-size:0.82rem; color:var(--mid);
}
.breadcrumbs a { color:var(--mid); text-decoration:none; }
.breadcrumbs a:hover { color:var(--ink); }
.breadcrumbs span { margin:0 0.4rem; color:var(--border); }

/* ── Legal ── */
.legal h2 { font-size:clamp(1rem,2vw,1.2rem); margin-top:2.5rem; margin-bottom:0.8rem; color:var(--green); }
.legal p, .legal li { font-size:0.92rem; color:var(--mid); margin-bottom:0.8rem; line-height:1.8; }
.legal ul { padding-left:1.5rem; }
.legal a { color:var(--gb); }

/* ── Forms ── */
.form { max-width:560px; }
.form__group { margin-bottom:1.25rem; }
.form__group label {
  display:block; font-size:0.85rem; font-weight:500; color:var(--ink);
  margin-bottom:0.35rem;
}
.form__group input,
.form__group select,
.form__group textarea {
  width:100%; padding:0.75rem 1rem; border:1.5px solid var(--border);
  border-radius:8px; font-family:'DM Sans',sans-serif; font-size:16px;
  background:var(--white); color:var(--ink);
  transition:border-color .2s;
}
.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  outline:none; border-color:var(--gb);
}
.form__group textarea { min-height:120px; resize:vertical; }
.form__consent { display:flex; gap:0.6rem; align-items:flex-start; margin:1.25rem 0; }
.form__consent input[type="checkbox"] { margin-top:4px; accent-color:var(--gb); }
.form__consent label { font-size:0.82rem; color:var(--mid); line-height:1.5; }
.form__msg {
  padding:1rem; border-radius:8px; font-size:0.9rem; margin-top:1rem; display:none;
}
.form__msg--ok { background:rgba(34,201,122,0.1); color:var(--green); }
.form__msg--err { background:rgba(192,57,43,0.1); color:var(--red); }

/* ── Contact info ── */
.contact-info { margin-top:3rem; }
.contact-info__item {
  display:flex; align-items:flex-start; gap:0.75rem;
  margin-bottom:1.25rem; font-size:0.92rem; color:var(--mid);
}
.contact-info__item strong { color:var(--ink); font-weight:500; }

/* ── FAQ ── */
.faq { margin:2rem 0; }
.faq__item { border-bottom:1px solid var(--border); }
.faq__q {
  width:100%; background:none; border:none; cursor:pointer;
  padding:1.25rem 0; display:flex; justify-content:space-between; align-items:center;
  font-family:'DM Sans',sans-serif; font-size:0.95rem; font-weight:500;
  color:var(--ink); text-align:left;
}
.faq__q::after { content:'+'; font-size:1.3rem; transition:transform .3s; color:var(--mid); }
.faq__item.active .faq__q::after { content:'-'; }
.faq__a {
  max-height:0; overflow:hidden; transition:max-height .35s ease;
  padding:0;
}
.faq__a p { font-size:0.9rem; color:var(--mid); padding-bottom:1.25rem; }
.faq__item.active .faq__a { max-height:1200px; }

/* ── Footer ── */
.footer {
  background:var(--ink); color:rgba(248,247,244,0.78); padding:4rem 0 2rem;
  margin-top:4rem;
}
.footer a { color:rgba(248,247,244,0.78); transition:color .2s; }
.footer a:hover { color:var(--gb); }
.footer__grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2rem; margin-bottom:3rem;
}
.footer__brand .nav__logo { font-size:1.3rem; margin-bottom:0.75rem; display:block; }
.footer__brand .nav__logo-ink { color:var(--white); }
.footer__brand p { font-size:0.85rem; max-width:260px; color:rgba(248,247,244,0.72); }
.footer__col h4 {
  font-family:'DM Sans',sans-serif; font-size:0.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em; color:rgba(248,247,244,0.6);
  margin-bottom:1rem;
}
.footer__col ul { list-style:none; }
.footer__col li { margin-bottom:0.6rem; }
.footer__col a { font-size:0.85rem; }
.footer__bottom {
  border-top:1px solid rgba(248,247,244,0.08);
  padding-top:1.5rem; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:1rem; font-size:0.78rem;
}
.footer__social { display:flex; gap:1rem; }

@media (max-width:768px) {
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1/-1; }
}
@media (max-width:480px) {
  .footer__grid { grid-template-columns:1fr; }
}

/* ── Cookie banner ── */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:var(--ink); color:rgba(248,247,244,0.85);
  padding:1rem 1.5rem;
  padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  display:none;
  align-items:center; justify-content:space-between;
  gap:1rem; font-size:0.85rem; flex-wrap:wrap;
  box-shadow:0 -4px 12px rgba(0,0,0,0.15);
}
.cookie-banner p { margin:0; color:rgba(248,247,244,0.85); font-size:0.85rem; }
.cookie-banner a { color:var(--gb); text-decoration:underline; }
.cookie-banner button {
  padding:0.7rem 1.5rem; min-height:44px; border:none; border-radius:8px; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem;
  background:var(--gb); color:var(--ink); white-space:nowrap;
}
.cookie-banner button:hover { background:var(--green-accent-hover); }

/* ── Stub page ── */
.stub { text-align:center; padding:8rem 0 4rem; min-height:60vh; display:flex; align-items:center; justify-content:center; }
.stub h1 { margin-bottom:1rem; }
.stub p { color:var(--mid); }

/* ── About page ── */
.about-hero { padding:2rem 0 3rem; }
.about-values { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin:2rem 0; }
.about-value { padding:1.5rem; border:1px solid var(--border); border-radius:12px; }
.about-value h3 { font-size:1rem; margin-bottom:0.5rem; }
.about-value p { font-size:0.88rem; }

/* ── Service pages ── */
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin:3rem 0; }
.service-card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:2rem; transition:transform 0.2s,box-shadow 0.2s; }
.service-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.08); }
.service-icon { font-size:2.5rem; margin-bottom:1rem; }
.service-card h2 { font-family:'Syne',sans-serif; font-weight:700; font-size:1.2rem; margin-bottom:0.8rem; color:var(--ink); }
.service-card p { font-size:0.9rem; color:var(--mid); line-height:1.7; margin-bottom:1rem; }
.service-card a { color:var(--green); font-weight:600; text-decoration:none; font-size:0.9rem; }
.service-card a:hover { text-decoration:underline; }

/* ── Sector pages ── */
.sector-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; margin:3rem 0; }
.sector-card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:2rem; text-decoration:none; color:var(--ink); transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s; display:block; }
.sector-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.08); border-color:var(--green-dark); }
/* Container icona settore: quadrato con tint verde, icona in var(--green-dark) */
.sector-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; padding:12px;
  background:var(--green-tint); border:1px solid var(--border);
  border-radius:12px; margin-bottom:1rem;
  color:var(--green-dark);
}
.sector-icon svg { display:block; width:100%; height:100%; }
.sector-card h2 { font-family:'Syne',sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:0.5rem; }
.sector-card p { font-size:0.88rem; color:var(--mid); line-height:1.6; }
.problem-solution-grid { display:flex; flex-direction:column; gap:1.5rem; margin:2rem 0; }
.ps-item { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:1.5rem; border:1px solid var(--border); border-radius:12px; }
.ps-problem h3, .ps-solution h3 { font-family:'Syne',sans-serif; font-size:0.9rem; font-weight:700; margin-bottom:0.5rem; }
.ps-problem h3 { color:var(--red); }
.ps-solution h3 { color:var(--green); }
.ps-problem p, .ps-solution p { font-size:0.85rem; color:var(--mid); line-height:1.6; }
.results-highlight { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin:2rem 0; }
.results-highlight .stat { text-align:center; padding:1.5rem; background:#f0f4f2; border-radius:12px; }
.results-highlight .stat-num { font-family:'Syne',sans-serif; font-weight:800; font-size:1.8rem; color:var(--green); }
.results-highlight .stat-label { font-size:0.8rem; color:var(--mid); margin-top:0.3rem; }

/* ── Results: sezione "Risultati concreti" pagine settore ── */
.results { margin:4rem 0; }
.results__title { text-align:center; margin-bottom:3rem; }
.results__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.5rem; }
/* Variante 3 colonne fisse desktop (per stat con esattamente 3 voci in container narrow) */
.results__grid--3col { grid-template-columns:repeat(3, 1fr); }
@media (max-width:640px) { .results__grid--3col { grid-template-columns:1fr; } }
/* Riduce gap problem-solution-grid (rendeva le righe sparse nelle pagine settori espanse) */
.problem-solution-grid { gap:1rem; }
/* Cascata sezioni espanse Fase 0.5: quando piu' .section consecutive sono nello
   stesso container, dimezza il padding-top per ridurre lo "spazio gratuito" */
.container > .section + .section { padding-top:2.5rem; }
.container > .section + .cta-block,
.container > .cta-block + .section,
.container > .section + .results { padding-top:2.5rem; }
/* Variante manuale opzionale per future sezioni che vogliono padding ridotto */
.section--compact { padding:2.5rem 0; }
.result-card {
  border:1px solid var(--border);
  border-radius:12px;
  padding:2rem;
  background:var(--white);
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.result-card:hover {
  transform:translateY(-2px); border-color:var(--green-dark);
  box-shadow:0 6px 20px rgba(8,8,8,0.05);
}
.result-card__number {
  font-family:'Syne',sans-serif;
  font-size:clamp(1.75rem, 3vw, 2.5rem);
  font-weight:800;
  color:var(--green-dark);
  line-height:1;
  letter-spacing:-0.02em;
  margin-bottom:0.5rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.result-card__label {
  font-size:0.95rem;
  color:var(--ink);
  font-weight:600;
  margin-bottom:1rem;
  line-height:1.3;
}
.result-card__desc {
  font-size:0.85rem;
  color:var(--mid);
  line-height:1.6;
  margin-bottom:0;
}
@media (max-width:768px) {
  .results__grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px) {
  .results__grid { grid-template-columns:1fr; }
}

/* ── Pricing ── */
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin:3rem 0; align-items:stretch; }
.pricing-card { border:1px solid var(--border); border-radius:16px; padding:2rem; position:relative; display:flex; flex-direction:column; }
.pricing-card.featured { border-color:var(--green); background:#f0f8f4; }
.pricing-badge {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--green-dark); color:#fff;
  font-size:0.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.12em;
  padding:0.18rem 0.7rem; border-radius:100px;
  white-space:nowrap; line-height:1.4;
  box-shadow:0 2px 6px rgba(8,8,8,0.08);
}
.pricing-name { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--mid); margin-bottom:0.25rem; }
/* Sottotitolo descrittivo sotto nome pacchetto: sostituisce lo spazio tra nome e prezzo */
.pricing-tagline { font-size:0.85rem; color:var(--mid); font-weight:500; line-height:1.35; margin:0 0 0.6rem; }
.pricing-price { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.4rem, 1.8vw, 1.75rem); color:var(--ink); line-height:1; letter-spacing:-0.02em; white-space:nowrap; }
.pricing-freq { font-size:0.8rem; color:var(--mid); margin-bottom:1rem; }
.pricing-desc { font-size:0.85rem; color:var(--mid); line-height:1.65; margin-bottom:1.5rem; }
.pricing-features { list-style:none; padding:0; margin:0 0 1.5rem; display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.pricing-features li { font-size:0.83rem; color:var(--ink); padding-left:1.2rem; position:relative; }
.pricing-features li::before { content:'\2713'; position:absolute; left:0; color:var(--gb); font-weight:700; font-size:0.72rem; }
.pricing-cta { display:block; text-align:center; padding:0.75rem; border:1.5px solid var(--ink); border-radius:8px; font-size:0.85rem; font-weight:600; font-family:'Syne',sans-serif; color:var(--ink); text-decoration:none; transition:all 0.2s; margin-top:auto; }
.pricing-cta:hover { background:var(--ink); color:var(--white); }
.pricing-card.featured .pricing-cta { background:var(--green); border-color:var(--green); color:#fff; }
.tax-credit-section { margin-top:3rem; padding:2rem; background:#f0f4f2; border-radius:12px; }
.tax-credit-section h2 { font-family:'Syne',sans-serif; font-size:1.2rem; margin-bottom:1rem; }
.tax-credit-section p { font-size:0.9rem; color:var(--mid); line-height:1.7; }

/* ── Richieste fuori listino: CTA di conversazione (non un pacchetto) ── */
.custom-request {
  display:flex; align-items:center; gap:2rem;
  margin:3rem 0;
  padding:2.5rem;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:16px;
}
.custom-request__text { flex:1 1 65%; }
.custom-request__title {
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:1.5rem; line-height:1.25;
  color:var(--ink); margin-bottom:0.9rem;
}
.custom-request__text p {
  font-size:0.95rem; color:var(--mid); line-height:1.65;
  margin-bottom:0.75rem;
}
.custom-request__text p:last-child { margin-bottom:0; }
.custom-request__cta {
  flex-shrink:0;
  display:inline-block; text-align:center;
  padding:0.75rem 1.5rem;
  border:1.5px solid var(--ink); border-radius:8px;
  font-family:'Syne',sans-serif; font-weight:600; font-size:0.85rem;
  color:var(--ink); text-decoration:none;
  transition:all 0.2s;
}
.custom-request__cta:hover { background:var(--ink); color:var(--white); }
@media(max-width:768px){
  .custom-request { flex-direction:column; align-items:stretch; gap:0; padding:1.75rem; }
  .custom-request__cta { display:block; width:100%; margin-top:1.5rem; }
}

/* ── Pricing: tier range (Sistema €3.500 – €8.000) ── */
.pricing-range { font-size:0.78rem; color:var(--mid); margin-top:0.15rem; margin-bottom:0.1rem; font-weight:500; }

/* ── Pricing: dual-tier card (Gestione Base / Plus) ──
   Base/Plus stacked verticalmente: la card Gestione è 1/4 della grid su desktop,
   affiancarli orizzontalmente renderebbe illeggibile il prezzo "€1.200". */
.pricing-tiers {
  display:flex; flex-direction:column; gap:0.75rem;
  margin:0.5rem 0 1.25rem;
  flex:1;
}
.pricing-tier {
  padding:0.9rem 1rem; border:1px solid var(--border); border-radius:10px;
  background:rgba(248,247,244,0.6);
  display:flex; flex-direction:column;
}
.pricing-tier--plus { border-color:rgba(34,201,122,0.35); background:rgba(34,201,122,0.05); }
.pricing-tier__head {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:0.5rem; flex-wrap:wrap; margin-bottom:0.6rem;
}
.pricing-tier__name {
  font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.14em; color:var(--ink);
}
.pricing-tier--plus .pricing-tier__name { color:var(--green); }
/* Badge visivo aggiuntivo per Plus (non solo color) */
.pricing-tier--plus .pricing-tier__name::after {
  content:' \2B50'; margin-left:0.3rem; font-size:0.82em; vertical-align:0.05em;
}
.pricing-tier__price-wrap { display:inline-flex; align-items:baseline; gap:0.3rem; }
.pricing-tier__price {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.25rem;
  color:var(--ink); line-height:1;
}
.pricing-tier__freq { font-size:0.72rem; color:var(--mid); }
.pricing-tier__features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.3rem; }
.pricing-tier__features li {
  font-size:0.78rem; color:var(--ink); padding-left:0.95rem;
  position:relative; line-height:1.5;
}
.pricing-tier__features li::before {
  content:'\2713'; position:absolute; left:0; color:var(--gb);
  font-weight:700; font-size:0.72rem; top:0.12rem;
}
.pricing-tier--plus .pricing-tier__features li::before { color:var(--green); }

/* ── Edizione Lancio: teaser section ── */
.launch-edition {
  position:relative; margin:4rem auto 1rem; max-width:780px;
  padding:3rem 2.25rem; border-radius:20px;
  background:
    radial-gradient(ellipse at top right, rgba(34,201,122,0.14), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(232,168,48,0.10), transparent 55%),
    linear-gradient(180deg, #0c0c0c 0%, #080808 100%);
  color:var(--white);
  border:1px solid rgba(232,168,48,0.25);
  box-shadow:0 20px 60px rgba(8,8,8,0.18), 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow:hidden;
}
.launch-edition::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 15%, rgba(232,168,48,0.18), transparent 40%);
  pointer-events:none;
}
.launch-edition__tag {
  position:relative; display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.4rem 0.9rem; border-radius:100px;
  background:rgba(232,168,48,0.15); border:1px solid rgba(232,168,48,0.4);
  color:var(--amber);
  font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.12em;
  margin-bottom:1.25rem;
}
.launch-edition__title {
  position:relative; font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(1.6rem, 3.5vw, 2.3rem); line-height:1.15;
  color:var(--white); margin-bottom:1rem; letter-spacing:-0.02em;
}
.launch-edition__text {
  position:relative; font-size:1rem; line-height:1.7;
  color:rgba(248,247,244,0.85); margin-bottom:1rem; max-width:640px;
}
.launch-edition__teaser {
  position:relative; font-size:0.88rem; font-style:italic;
  color:rgba(248,247,244,0.55); margin-bottom:1.75rem; max-width:640px;
}
.launch-edition__cta {
  position:relative; display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.95rem 1.75rem; min-height:48px; border-radius:10px;
  background:var(--gb); color:var(--ink);
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.95rem;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 4px 16px rgba(34,201,122,0.35);
}
.launch-edition__cta:hover {
  background:var(--green-accent-hover); transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(34,201,122,0.5);
  color:var(--ink);
}
.launch-edition__cta::after {
  content:'\2192'; transition:transform .2s ease;
}
.launch-edition__cta:hover::after { transform:translateX(3px); }
.launch-edition__note {
  position:relative; margin-top:1rem; font-size:0.78rem;
  color:rgba(248,247,244,0.55);
}
.launch-edition__fallback {
  position:relative; margin-top:0.75rem; font-size:0.82rem;
  color:rgba(248,247,244,0.65);
}
.launch-edition__fallback a {
  color:var(--gb); text-decoration:underline; font-weight:500;
}
.launch-edition__fallback a:hover { color:#3fe090; }
@media (max-width:640px) {
  .launch-edition {
    margin:3rem 0 1rem; padding:2.25rem 1.5rem; border-radius:16px;
  }
  .launch-edition__title { font-size:clamp(1.4rem, 5vw, 1.8rem); }
  .launch-edition__text { font-size:0.95rem; }
  .launch-edition__cta { width:100%; justify-content:center; }
}

/* ── Blog ── */
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; margin:3rem 0; }
.blog-card { border:1px solid var(--border); border-radius:16px; padding:2rem; text-decoration:none; color:var(--ink); transition:transform 0.2s,box-shadow 0.2s; display:block; }
.blog-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.08); }
.blog-card-date { font-size:0.75rem; color:var(--mid); margin-bottom:0.5rem; }
.blog-card h2 { font-family:'Syne',sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:0.8rem; color:var(--ink); }
.blog-card p { font-size:0.88rem; color:var(--mid); line-height:1.6; margin-bottom:1rem; }
.blog-card .read-more { color:var(--green); font-weight:600; font-size:0.9rem; }
.article-body { max-width:720px; margin:0 auto; }
.article-body h2 { font-family:'Syne',sans-serif; font-weight:700; font-size:1.4rem; margin:2.5rem 0 1rem; color:var(--ink); }
.article-body h3 { font-family:'Syne',sans-serif; font-weight:600; font-size:1.1rem; margin:1.5rem 0 0.8rem; }
.article-body p { font-size:0.95rem; color:var(--mid); line-height:1.8; margin-bottom:1rem; }
.article-body ul, .article-body ol { padding-left:1.5rem; margin-bottom:1rem; }
.article-body li { font-size:0.92rem; color:var(--mid); line-height:1.7; margin-bottom:0.5rem; }
.article-body strong { color:var(--ink); }
.article-cta { text-align:center; margin:3rem 0; padding:2.5rem; background:#f0f4f2; border-radius:16px; }
.article-cta p { font-size:1.1rem; margin-bottom:1rem; }

/* ── Shared content ── */
.section-intro { font-size:1rem; color:var(--mid); line-height:1.75; max-width:min(62ch, 100%); margin-bottom:2rem; }
.section-intro strong { color:var(--ink); font-weight:600; }
.benefits-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin:2rem 0; }
.benefit-item {
  padding:1.75rem; border:1px solid var(--border); border-radius:12px;
  background:var(--white);
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.benefit-item:hover {
  transform:translateY(-2px); border-color:var(--green-dark);
  box-shadow:0 6px 20px rgba(8,8,8,0.05);
}
.benefit-item__icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:10px;
  background:var(--green-tint); border:1px solid var(--border);
  border-radius:10px; margin-bottom:1rem;
  color:var(--green-dark);
}
.benefit-item__icon svg { display:block; width:100%; height:100%; }
.benefit-item h3 { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:700; margin-bottom:0.5rem; color:var(--ink); }
.benefit-item p { font-size:0.85rem; color:var(--mid); line-height:1.6; }
.cta-block { text-align:center; margin:3rem 0; padding:2.5rem; background:var(--green-dark); border-radius:16px; color:var(--white); }
.cta-block h1, .cta-block h2, .cta-block h3 { color:var(--white); }
.cta-block p { color:rgba(255,255,255,0.85); font-size:1rem; margin-bottom:1.2rem; }
.cta-block strong { color:var(--white); }
/* Nota: rimossa regola .cta-block a che trasformava OGNI link inline in bottone
   — spaccava i paragrafi nelle pagine Servizi*. I link-bottone usano .btn, i link
   inline dentro .cta-block p ereditano ora lo stile link standard. */
.cta-block .btn--primary { background:var(--white); color:var(--green-dark); }
.cta-block .btn--primary:hover { background:var(--green-accent); color:var(--white); }
.cta-block .btn--outline { background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4); }
.cta-block .btn--outline:hover { border-color:var(--white); background:rgba(255,255,255,0.08); color:var(--white); }

/* ── Service CTA: box "consulenza gratuita" con testo + UN bottone chiaro ── */
.service-cta {
  background:var(--green-dark);
  color:var(--white);
  padding:3rem 2rem;
  border-radius:16px;
  text-align:center;
  margin:3rem 0 4rem;
}
.service-cta__text {
  color:rgba(255,255,255,0.85);
  max-width:720px;
  margin:0 auto 1.5rem;
  line-height:1.6;
}
.service-cta__text strong { color:var(--white); }
.service-cta__btn {
  display:inline-block;
  background:var(--white);
  color:var(--green-dark);
  padding:0.9rem 2rem;
  border-radius:8px;
  font-family:'Syne',sans-serif;
  font-weight:700;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.service-cta__btn:hover { background:var(--green-accent); color:var(--white); }

/* ── CTA Audit gratuito riusabile (inline a fondo pagina, distinto da service-cta) ── */
.cta-audit {
  background:linear-gradient(180deg, var(--green-tint), rgba(34,201,122,0.02));
  border:1px solid rgba(34,201,122,0.25);
  border-radius:20px;
  padding:3rem 2rem;
  margin:4rem 0 2rem;
  text-align:center;
}
.cta-audit__inner { max-width:680px; margin:0 auto; }
.cta-audit__title {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(1.4rem, 3vw, 1.85rem);
  color:var(--ink); line-height:1.2; margin-bottom:1rem;
  letter-spacing:-0.01em;
}
.cta-audit__text {
  color:var(--mid); font-size:1rem; line-height:1.65;
  margin-bottom:1.5rem; max-width:560px; margin-inline:auto;
}
.cta-audit__btn-row {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:1rem;
}
.cta-audit__note {
  font-size:0.82rem; color:var(--mid); margin:0;
}
@media (max-width:640px) {
  .cta-audit { padding:2.25rem 1.25rem; margin:3rem 0 1.5rem; }
  .cta-audit__btn-row .btn { width:100%; }
}

/* ── Pillar / Settori / Zone — content layout ── */
.seo-content { max-width:760px; margin:0 auto; }
.seo-lead {
  font-size:1.1rem; line-height:1.7; color:var(--ink);
  border-left:3px solid var(--green-accent);
  padding:0.5rem 0 0.5rem 1.25rem;
  margin:1.5rem 0 2.5rem;
}
.seo-content h2 { margin-top:2.5rem; }
.seo-content h3 { margin-top:1.75rem; }
.seo-content ul, .seo-content ol { margin:1rem 0 1.5rem 1.5rem; }
.seo-content li { margin-bottom:0.4rem; line-height:1.65; }
.seo-content p { line-height:1.75; margin-bottom:1.1rem; }
.seo-content blockquote {
  border-left:3px solid var(--border);
  padding:0.5rem 0 0.5rem 1.25rem;
  margin:1.5rem 0;
  font-style:italic; color:var(--mid);
}
/* Nota: per blocchi numerici nelle pagine SEO si usa il pattern
   .results__grid + .result-card già definito sopra (audit-approved).
   Le vecchie regole .seo-stat-row/.seo-stat sono state rimosse. */

/* ── Success icon (thank-you pages) ── */
.success-check {
  display:inline-flex; align-items:center; justify-content:center;
  width:80px; height:80px; border-radius:50%;
  background:var(--green-tint); border:2px solid var(--green-accent);
  color:var(--green-accent); margin-bottom:1.5rem;
  animation:successPop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.success-check svg { width:40px; height:40px; }
@keyframes successPop {
  0%   { opacity:0; transform:scale(0.8); }
  60%  { opacity:1; }
  100% { opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .success-check { animation:none; }
}

/* ── Mobile responsive for new components ── */
@media(max-width:768px){
  .service-grid, .sector-grid, .blog-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .benefits-grid { grid-template-columns:1fr; }
  .ps-item { grid-template-columns:1fr; gap:1rem; }
  .results-highlight { grid-template-columns:repeat(2,1fr); }
  .hero { padding:7rem 0 3rem; min-height:auto; }
  .section { padding:3.5rem 0; }
  .cta-banner { padding:2.75rem 1.5rem; margin:2rem 0; }
  .stats, .steps, .cards { gap:1rem; margin:2rem 0; }
  .footer__bottom { justify-content:flex-start; }
}

/* ── Smartphone piccoli (<480px) ── */
@media(max-width:480px){
  .container, .container--narrow { padding:0 1.1rem; }
  .hero { padding:6rem 0 2.5rem; }
  .hero__content { max-width:100%; }
  .section { padding:2.75rem 0; }
  .stat { padding:1.5rem 0.75rem; }
  .step { padding:1.5rem 1.25rem; }
  .card { padding:1.5rem 1.25rem; }
  .cta-banner { padding:2.25rem 1.25rem; border-radius:12px; }
  .pricing-card { padding:1.75rem 1.5rem; }
  .tax-credit-section, .article-cta, .cta-block { padding:1.75rem 1.25rem; }
  .service-card, .sector-card, .blog-card { padding:1.75rem 1.5rem; }
  .nav__inner { padding:0 1.1rem; }
  .nav__logo { font-size:1.35rem; }
  .btn { padding:0.85rem 1.5rem; width:auto; }
  .form { max-width:100%; }
  .form__consent label { font-size:0.88rem; line-height:1.6; }
  .breadcrumbs { padding-top:5rem; font-size:0.78rem; }
}

/* ── Utility ── */
.mt-2 { margin-top:2rem; }
.mt-3 { margin-top:3rem; }
.text-center { text-align:center; }

/* ═══════════════════════════════════════════════════════════════
   HOME UPGRADES — hero weave, before/after, scroll reveal, counter
   ═══════════════════════════════════════════════════════════════ */

/* Scroll reveal (abilitato solo quando JS presente) */
.js .reveal {
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.js .reveal.is-visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
}

/* ── HERO: connection weave SVG ── */
.hero { position:relative; overflow:hidden; }
.hero > .container { position:relative; z-index:1; }
.hero-weave {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:0.35;
}
.hero-weave svg { width:100%; height:100%; display:block; }
.hero-weave__line {
  stroke:var(--ink); stroke-width:1.25; fill:none;
  stroke-linecap:round;
  stroke-dasharray:600; stroke-dashoffset:600;
  opacity:0;
  animation:weaveLine 5.5s cubic-bezier(.4,0,.2,1) infinite;
}
.hero-weave__node {
  fill:var(--white); stroke:var(--ink); stroke-width:1.5;
  transform-origin:center; transform-box:fill-box;
  animation:weaveNode 5.5s cubic-bezier(.16,1,.3,1) infinite;
}
.hero-weave__line:nth-of-type(1) { animation-delay:0s; }
.hero-weave__line:nth-of-type(2) { animation-delay:.25s; }
.hero-weave__line:nth-of-type(3) { animation-delay:.5s; }
.hero-weave__line:nth-of-type(4) { animation-delay:.75s; }
.hero-weave__node:nth-of-type(5) { animation-delay:.1s; }
.hero-weave__node:nth-of-type(6) { animation-delay:.35s; }
.hero-weave__node:nth-of-type(7) { animation-delay:.6s; }
.hero-weave__node:nth-of-type(8) { animation-delay:.85s; }
.hero-weave__node:nth-of-type(9) { animation-delay:1.1s; }
@keyframes weaveLine {
  0%   { stroke-dashoffset:600; opacity:0; }
  10%  { opacity:0.35; }
  45%  { stroke-dashoffset:0;   opacity:0.35; }
  78%  { stroke-dashoffset:0;   opacity:0.35; }
  90%  { opacity:0; }
  100% { stroke-dashoffset:600; opacity:0; }
}
@keyframes weaveNode {
  0%, 18% { transform:scale(1); fill:var(--white); stroke:var(--ink); }
  32%     { transform:scale(1.4); fill:var(--gb); stroke:var(--gb); }
  50%, 100% { transform:scale(1); fill:var(--white); stroke:var(--ink); }
}
@media (max-width:768px) {
  .hero-weave { opacity:0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-weave__line, .hero-weave__node { animation:none; opacity:0.35; stroke-dashoffset:0; }
}

/* ── PRIMA / DOPO LUDVIA ── */
.beforeafter { padding:5.5rem 0 4.5rem; }
.beforeafter__intro { max-width:620px; margin-bottom:2rem; }
.beforeafter__grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--border); border-radius:20px; overflow:hidden;
  margin-top:1rem; background:var(--white);
  box-shadow:0 1px 2px rgba(8,8,8,0.04);
}
.beforeafter__panel {
  position:relative; min-height:420px;
  padding:2rem 1.75rem 1.75rem;
  display:flex; flex-direction:column;
}
.beforeafter__panel--before {
  background:linear-gradient(180deg, rgba(192,57,43,0.025) 0%, rgba(232,168,48,0.03) 100%);
  border-right:1px solid var(--border);
}
.beforeafter__panel--after {
  background:linear-gradient(180deg, rgba(34,201,122,0.06) 0%, rgba(26,74,58,0.03) 100%);
}
.beforeafter__label {
  font-family:'DM Sans',sans-serif; font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em;
  color:var(--mid); margin-bottom:0.35rem;
}
.beforeafter__panel--after .beforeafter__label { color:var(--green); }
.beforeafter__title {
  font-family:'Syne',sans-serif; font-weight:700; font-size:1rem;
  color:var(--ink); margin-bottom:1rem; letter-spacing:-0.01em;
}
.beforeafter__panel--after .beforeafter__title { color:var(--green); }

/* Scena interna */
.ba-scene { position:relative; flex:1; min-height:280px; }

/* Caos: tag assoluti flottanti */
.ba-scene--chaos { overflow:hidden; border-radius:8px; }
.ba-scene--chaos .ba-tag {
  position:absolute; padding:0.4rem 0.75rem;
  border-radius:8px; background:var(--white); border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(8,8,8,0.05);
  font-size:0.74rem; color:var(--ink); font-weight:500;
  white-space:normal; max-width:62%; line-height:1.35;
  transform:rotate(var(--r, 0deg));
  animation:chaosFloat 7s ease-in-out infinite;
  animation-delay:var(--delay, 0s);
}
.ba-scene--chaos .ba-tag--alert {
  border-color:rgba(192,57,43,0.4);
  background:rgba(192,57,43,0.04);
}
.ba-scene--chaos .ba-tag--alert::before {
  content:''; position:absolute; top:-4px; right:-4px;
  width:10px; height:10px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 0 rgba(192,57,43,0.5);
  animation:alertPulse 1.8s ease-in-out infinite;
}
@keyframes chaosFloat {
  0%,100% { transform:rotate(var(--r, 0deg)) translate(0,0); }
  25%     { transform:rotate(var(--r, 0deg)) translate(3px,-3px); }
  50%     { transform:rotate(var(--r, 0deg)) translate(-2px,3px); }
  75%     { transform:rotate(var(--r, 0deg)) translate(3px,2px); }
}
@keyframes alertPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(192,57,43,0.5); }
  50%     { box-shadow:0 0 0 7px rgba(192,57,43,0); }
}

/* Ordine: lista pulita con scan line */
.ba-scene--order {
  list-style:none; margin:0;
  display:flex; flex-direction:column; gap:0.6rem;
  padding:0.25rem 0; position:relative;
}
.ba-scene--order { --scanDistance:280px; }
.ba-scene--order::after {
  content:''; position:absolute; left:-1.75rem; right:-1.75rem; top:0;
  height:1px; background:linear-gradient(90deg, transparent, var(--gb) 30%, var(--gb) 70%, transparent);
  opacity:0; will-change:transform, opacity;
  animation:scanLine 5.5s ease-in-out infinite;
}
@keyframes scanLine {
  0%   { transform:translateY(0);                          opacity:0; }
  8%   { opacity:0.55; }
  92%  { opacity:0.55; }
  100% { transform:translateY(var(--scanDistance, 280px)); opacity:0; }
}
.js .ba-scene--order .ba-tag {
  display:flex; align-items:center; gap:0.55rem;
  padding:0.65rem 0.85rem; border-radius:10px;
  background:var(--white); border:1px solid rgba(34,201,122,0.25);
  font-size:0.83rem; color:var(--ink); font-weight:500;
  box-shadow:0 1px 2px rgba(26,74,58,0.04);
  opacity:0; transform:translateY(10px);
  transition:opacity .5s ease-out, transform .55s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 70ms + 80ms);
}
.js .ba-scene--order.is-visible .ba-tag {
  opacity:1; transform:translateY(0);
}
.ba-scene--order .ba-tag::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--gb); flex-shrink:0;
  box-shadow:0 0 0 2px rgba(34,201,122,0.15);
}
/* Fallback senza JS: tag ordine visibili */
.ba-scene--order .ba-tag {
  display:flex; align-items:center; gap:0.55rem;
  padding:0.65rem 0.85rem; border-radius:10px;
  background:var(--white); border:1px solid rgba(34,201,122,0.25);
  font-size:0.83rem; color:var(--ink); font-weight:500;
  box-shadow:0 1px 2px rgba(26,74,58,0.04);
}

.beforeafter__caption {
  text-align:center; max-width:640px; margin:2.5rem auto 0;
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:clamp(1.15rem, 2.2vw, 1.4rem); color:var(--ink);
  line-height:1.35; letter-spacing:-0.01em;
}
.beforeafter__cta-row { text-align:center; margin-top:1.25rem; }
.beforeafter__cta {
  display:inline-flex; align-items:center; gap:0.4rem;
  color:var(--green); font-family:'DM Sans',sans-serif; font-weight:600;
  font-size:0.95rem; text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .2s, color .2s;
}
.beforeafter__cta:hover { border-bottom-color:var(--green); color:var(--ink); }
.beforeafter__cta::after { content:'\2192'; transition:transform .2s ease; }
.beforeafter__cta:hover::after { transform:translateX(3px); }

@media (max-width:768px) {
  .beforeafter { padding:4rem 0 3.5rem; }
  .beforeafter__grid { grid-template-columns:1fr; }
  .beforeafter__panel--before {
    border-right:none; border-bottom:1px solid var(--border);
  }
  .beforeafter__panel { min-height:auto; padding:1.75rem 1.25rem 1.5rem; }
  .ba-scene { min-height:260px; }
  /* Bollettine: il container clippa (overflow:hidden globale), ma riduciamo max-width
     in modo che i tag con left:46-47% non sforino nemmeno visivamente */
  .ba-scene--chaos .ba-tag { font-size:0.72rem; max-width:50%; padding:0.35rem 0.6rem; }
  .ba-scene--order::after { left:-1.25rem; right:-1.25rem; }
  .ba-scene--order { --scanDistance:260px; }
}
@media (max-width:480px) {
  .beforeafter__panel { padding:1.5rem 1rem 1.25rem; }
  .ba-scene { min-height:240px; }
  .ba-scene--chaos .ba-tag { font-size:0.68rem; max-width:48%; padding:0.3rem 0.55rem; line-height:1.3; }
  /* I due tag più a destra (left:46%/47%) non possono andare oltre il 50% */
  .ba-scene--chaos .ba-tag:nth-of-type(2),
  .ba-scene--chaos .ba-tag:nth-of-type(4) {
    max-width:46%;
  }
  .ba-scene--order { --scanDistance:240px; }
}

/* Counter stat: transizione morbida sui cambi di contenuto */
.stat__number { font-variant-numeric:tabular-nums; }

/* Screen-reader only (visually hidden, accessibile agli assistive tech) */
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}