/* Digivents stile */
/* ============ Digivents — Mockup design system (BRAND) ============ */
/* Palette ufficiale estratta dal logo www.digivents.com:
   blu #1848A0 · verde lime #A0C038 · grigio payoff #707880 */
:root {
  --ink: #14233f;
  --ink-soft: #4a5670;
  --bg: #ffffff;
  --bg-soft: #f2f6fb;
  --bg-navy: #0c2150;          /* deep brand blue per le sezioni scure */
  --line: #dde6f2;
  --primary: #1848a0;          /* blu Digivents scuro (dominante) */
  --primary-dark: #123a82;
  --green: #90ba54;            /* verde Digivents (richiamo, accento) */
  --green-dark: #7aa343;
  --grad: #1848a0;             /* blu Digivents pieno, senza degradé */
  --green-text: #5f882c;       /* verde leggibile per testi piccoli su tinte chiare */
  --green-tint: #eef5e1;       /* fondo verde tenue per chip e riquadri */
  --accent: #90ba54;           /* il verde sostituisce l'arancio per pill e tag */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(12, 33, 80, .10);
  --maxw: 1180px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top: l'header e' sticky (87px), senza questo il bersaglio di
   un'ancora finisce sotto l'header. Il salto vero e proprio lo ripete lo script
   dg-anchor a pagina caricata: il salto nativo del browser fallisce perche' le
   immagini senza width/height spostano il layout mentre carica. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Evidenziazione del bersaglio di un'ancora. Sulla pagina video i riquadri sono
   nove e si somigliano: chi arriva da "Video: l'app" deve capire a colpo d'occhio
   quale stava cercando. Due pulsazioni e poi sparisce, per non restare rumore.
   Niente scuotimento: quello è il vocabolario dell'errore, ed è il movimento che
   disturba chi ha problemi vestibolari. */
@keyframes dg-evidenzia{
  0%   { box-shadow: 0 0 0 0   rgba(24,72,160,0) }
  20%  { box-shadow: 0 0 0 6px rgba(24,72,160,.38) }
  55%  { box-shadow: 0 0 0 10px rgba(144,186,84,.30) }
  100% { box-shadow: 0 0 0 0   rgba(24,72,160,0) }
}
.dg-evidenzia{ border-radius: var(--radius); animation: dg-evidenzia 1.5s ease-in-out 2 }
@media (prefers-reduced-motion: reduce){
  .dg-evidenzia{ animation: none; box-shadow: 0 0 0 5px rgba(24,72,160,.35) }
}
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16.5px;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.topbar {
  background: var(--bg-navy); color: #b9c4e0; font-size: 13px;
  text-align: center; padding: 6px 16px;
}
.topbar strong { color: #fff; }
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 28px; height: 86px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.5px; }
.logo span { color: var(--primary); }
.logo .logo-mark { flex-shrink: 0; }
.logo .wm { font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: -.6px; }
.logo .wm b { color: var(--primary); }
.logo .wm i { color: var(--green); font-style: normal; }
.logo--light .wm b { color: #fff; }
.nav ul.menu { display: flex; gap: 22px; list-style: none; margin-left: 12px; flex: 1; }
.nav ul.menu > li { position: relative; }
.nav ul.menu > li > a {
  color: var(--ink); font-weight: 600; font-size: 15px; padding: 24px 2px; display: inline-block;
}
.nav ul.menu > li > a:hover { color: var(--primary); }
.dropdown {
  position: absolute; top: 100%; left: -12px; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .18s ease;
}
li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--ink); font-size: 14.5px; font-weight: 500;
}
.dropdown a:hover { background: var(--bg-soft); color: var(--primary); }
.dropdown a small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 12.5px; }
.lang { display: flex; gap: 6px; font-size: 13px; font-weight: 700; }
.lang a {
  padding: 4px 8px; border-radius: 6px; color: var(--ink-soft);
}
.lang a.active { background: var(--ink); color: #fff; }
.lang a:not(.active):hover { background: var(--bg-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-weight: 700; border-radius: 10px;
  padding: 13px 24px; font-size: 15.5px; transition: all .15s ease;
  border: 2px solid transparent; cursor: pointer; text-align: center;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(24,72,160,.35); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost.on-dark { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost.on-dark:hover { border-color: #fff; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn .sub { display: block; font-size: 12px; font-weight: 500; opacity: .85; }
.play-ico::before { content: "▶ "; font-size: 12px; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary); background: #eef0fd; border-radius: 999px; padding: 6px 14px;
  margin-bottom: 18px;
}
h1 { font-size: 46px; line-height: 1.12; letter-spacing: -1.2px; font-weight: 800; }
h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 19px; color: var(--ink-soft); margin: 20px 0 28px; max-width: 56ch; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.trust-line { margin-top: 22px; font-size: 14px; color: var(--ink-soft); display: flex; gap: 18px; flex-wrap: wrap; }
.trust-line b { color: var(--ink); }

/* ---------- Placeholders (immagini/video da produrre) ---------- */
.ph {
  border-radius: var(--radius); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  color: #fff; font-weight: 700; min-height: 220px; padding: 24px;
  background: linear-gradient(135deg, #123a82 0%, #1848a0 60%, #90ba54 118%);
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 80% -20%, rgba(255,255,255,.25), transparent);
}
.ph small { font-weight: 500; font-size: 12.5px; opacity: .85; max-width: 40ch; }
.ph.video { min-height: 320px; }
.ph.video::before, .ph.play::before {
  content: "▶"; width: 64px; height: 64px; border-radius: 50%; color: #fff;
  background: rgba(12,33,80,.55); border: 2px solid rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 2;
  backdrop-filter: blur(2px);
}
.ph.play { min-height: 150px; }
/* Immagini di esempio al posto dei placeholder degradé */
.ph.has-shot {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: transparent; border: 1px solid var(--line);
}
.ph.has-shot::after { display: none; }
.ph.light { background: linear-gradient(135deg, #e8ecfb, #f3eefe); color: var(--ink-soft); box-shadow: none; border: 1px dashed #c9d2ee; }
.ph.thumb { min-height: 150px; }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
section.soft { background: var(--bg-soft); }
section.navy { background: var(--bg-navy); color: #dfe6f7; }
section.navy h2 { color: #fff; }
.section-head { max-width: 760px; margin: 0 auto 42px; text-align: center; }
h2 { font-size: 33px; letter-spacing: -.7px; line-height: 1.18; font-weight: 800; }
.section-head p { color: var(--ink-soft); margin-top: 12px; font-size: 17px; }
section.navy .section-head p { color: #b9c4e0; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 22px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: all .18s ease; color: var(--ink); display: block;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c9d2ee; }
.card .ico {
  width: 46px; height: 46px; border-radius: 12px; background: #eef0fd;
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px;
}
.card p { color: var(--ink-soft); font-size: 15px; margin-top: 8px; }
.card .more { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--primary); }
.tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--primary); background: #eef0fd;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
}
.tag.new { color: #b4530a; background: #fff1e6; }

/* Timeline prima/durante/dopo */
.timeline { counter-reset: step; }
.timeline .card { position: relative; padding-top: 34px; }
.timeline .card::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -18px; left: 26px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.timeline ul { list-style: none; margin-top: 12px; }
.timeline li { padding: 4px 0 4px 24px; position: relative; color: var(--ink-soft); font-size: 15px; }
.timeline li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 800; }

/* Logo strip */
.logos { display: flex; flex-wrap: wrap; gap: 14px 38px; justify-content: center; align-items: center; }
.logos span {
  font-weight: 800; font-size: 17px; color: #9aa6c4; letter-spacing: .5px;
  text-transform: uppercase; opacity: .9;
}

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.stats .n { font-size: 42px; font-weight: 800; letter-spacing: -1px; background: linear-gradient(120deg,#9fc0e0,#c2dc8a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats .l { color: #b9c4e0; font-size: 14.5px; margin-top: 4px; }

/* Quotes */
.quote { border-left: 4px solid var(--primary); }
.quote blockquote { font-size: 16.5px; color: var(--ink); font-style: italic; }
.quote .who { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.quote .avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--grad);
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.quote .who b { display: block; font-size: 14.5px; }
.quote .who small { color: var(--ink-soft); font-size: 13px; }

/* FAQ */
.faq-list { max-width: 820px; margin: 0 auto; }
details {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 12px;
}
details summary {
  font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 32px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; position: absolute; right: 0; top: -2px; font-size: 22px; color: var(--primary); font-weight: 600;
}
details[open] summary::after { content: "–"; }
details p { color: var(--ink-soft); margin-top: 10px; font-size: 15.5px; }

/* CTA finale */
.cta-final { text-align: center; background: var(--grad); color: #fff; border-radius: 22px; padding: 64px 40px; }
.cta-final h2 { color: #fff; }
.cta-final p { color: #eaf2ff; margin: 12px auto 28px; max-width: 60ch; }
.cta-final .btn-primary { background: #fff; color: var(--primary); box-shadow: none; }
.urgency { margin-top: 18px; font-size: 14px; color: #d7e6c4; }

/* Security band */
.sec-band { display: flex; align-items: center; gap: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 30px; }
.badge-iso {
  flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%;
  background: var(--bg-navy); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 10px; font-weight: 800; text-align: center; line-height: 1.3;
}
.badge-iso b { font-size: 13px; }

/* Breadcrumb + page hero */
.crumbs { font-size: 13.5px; color: var(--ink-soft); padding: 18px 0 0; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--primary); }
.page-hero { padding: 44px 0 50px; }
.page-hero h1 { font-size: 40px; }
.answer-box {
  margin-top: 18px; background: #eef0fd; border-left: 4px solid var(--primary);
  border-radius: 0 12px 12px 0; padding: 16px 20px; font-size: 16.5px; color: var(--ink);
  max-width: 70ch;
}
.answer-box b { color: var(--primary-dark); }

/* Feature rows */
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 36px 0; }
.feat-row.rev > .ph, .feat-row.rev > .feat-media { order: 2; }
.feat-row ul { list-style: none; margin-top: 14px; }
.feat-row li { padding: 5px 0 5px 26px; position: relative; color: var(--ink-soft); }
.feat-row li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 800; }
.feat-row li b { color: var(--ink); }

/* Pricing */
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.featured { border: 2px solid var(--primary); box-shadow: var(--shadow); }
.price-card .pill {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
  padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.price-card .fascia { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
.price-card ul { list-style: none; margin: 18px 0; flex: 1; }
.price-card li { padding: 5px 0 5px 24px; position: relative; font-size: 15px; color: var(--ink-soft); }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 800; }

/* Video page */
.vtabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.vtabs button {
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 9px 20px; font-size: 14.5px; font-weight: 700; cursor: pointer; color: var(--ink-soft);
  font-family: inherit;
}
.vtabs button.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.vcard .dur {
  position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.7);
  color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; z-index: 2;
}
.vcard .ph { border-radius: 12px; }
.vcard { position: relative; }
.vcard h3 { font-size: 17px; margin-top: 14px; }
.vcard p { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
.vcard .meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }
.hidden { display: none !important; }

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { font-size: 14px; font-weight: 700; display: block; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 15px; font-family: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
.form-note { font-size: 13px; color: var(--ink-soft); }

/* Footer */
footer { background: var(--bg-navy); color: #b9c4e0; padding: 60px 0 30px; margin-top: 80px; font-size: 14.5px; }
footer .grid { gap: 40px; }
footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
footer ul { list-style: none; }
footer li { margin-bottom: 8px; }
footer a { color: #b9c4e0; }
footer a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; }

/* Blog — indice */
.post-card { display: flex; flex-direction: column; }
.post-thumb { height: 158px; border-radius: 10px; margin-bottom: 14px;
  background:#e7eefa center/cover no-repeat; }
.post-thumb--ph { background: linear-gradient(135deg,#123a82 0%,#1848a0 60%,#90ba54 120%); }
.post-card .tag { margin: 0 0 8px; }
.post-card .post-date { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
.post-card h3 { font-size: 18px; line-height: 1.28; }

/* Blog — articolo */
.article { padding: 30px 0 4px; }
.article-narrow { max-width: 760px; }
.article > .article-narrow > .tag { margin-bottom: 6px; }
.article h1 { font-size: 38px; line-height: 1.16; letter-spacing: -1px; margin-top: 8px; }
.article .post-date { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.article-cover { width: 100%; height: 360px; border-radius: 16px; margin: 24px 0 8px;
  background:#e7eefa center/cover no-repeat; box-shadow: var(--shadow); }
.article-body { font-size: 17.5px; line-height: 1.7; color: #2b3852; margin-top: 22px; }
.article-body p { margin: 0 0 18px; }
.article-body h2 { font-size: 26px; line-height: 1.25; margin: 34px 0 12px; color: var(--ink); }
.article-body h3 { font-size: 21px; margin: 26px 0 10px; color: var(--ink); }
.article-body ul, .article-body ol { margin: 0 0 18px 22px; }
.article-body li { margin: 6px 0; }
.article-body a { color: var(--primary); text-decoration: underline; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 18px 0; }
.article-body blockquote { border-left: 4px solid var(--green); background: var(--bg-soft);
  padding: 14px 20px; border-radius: 0 10px 10px 0; margin: 22px 0; font-style: italic; color: var(--ink); }
.article > .article-narrow > .more { display: inline-block; margin-top: 26px; }

/* Mockup note */
.mock-note {
  position: fixed; bottom: 16px; right: 16px; z-index: 99;
  background: var(--ink); color: #fff; font-size: 12px; padding: 8px 14px;
  border-radius: 999px; opacity: .85;
}

/* ===== Tema Digivents: blu dominante, verde nei dettagli =====
   Regole valide su tutto il sito (messe a punto sulla home). */

/* Banda CTA finale in navy profondo (più sobria del blu pieno) */
.cta-final { background: var(--bg-navy); }

/* Box informativi singoli: bordo verde di accento */
.answer-box { border-left-color: var(--green); }
.sec-band { border-left: 4px solid var(--green); }

/* Box (moduli, feature, casi studio) e citazioni a 3 colonne:
   primo di ogni riga verde, gli altri blu */
.grid.c3 .card { border-left: 4px solid var(--primary); }
.grid.c3 .card:nth-child(3n+1) { border-left-color: var(--green); }
.grid.c3 a.card:hover { border-left-color: var(--primary); }
.grid.c3 a.card:nth-child(3n+1):hover { border-left-color: var(--green); }
.quote { border-left-color: var(--primary); }
.grid.c2 .quote:nth-child(odd) { border-left-color: var(--green); }
.grid.c3 .quote:nth-child(3n+1) { border-left-color: var(--green); }
/* le step-card "Prima/Durante/Dopo" restano neutre (hanno il numero in alto) */
.grid.c3.timeline .card { border-left: 1px solid var(--line); }

/* freccia play delle CTA secondarie verde */
.play-ico::before { color: var(--green-dark); }

/* Elenchi puntati (Prima/Durante/Dopo, feature, prezzi): trattini bassi
   orizzontali al posto delle spunte; il primo verde, gli altri grigi */
.timeline li::before,
.feat-row li::before,
.price-card li::before {
  content: ""; background: #aab3c2;
  width: 13px; height: 3px; border-radius: 2px;
  left: 0; font-size: 0;
}
.timeline li::before { top: 17px; }
.feat-row li::before { top: 19px; }
.price-card li::before { top: 18px; }
.timeline li:first-child::before,
.feat-row li:first-child::before,
.price-card li:first-child::before { background: var(--green); }

/* Hamburger (nascosto su desktop) */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; padding: 0 10px;
}
.nav-toggle span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: all .2s ease; }
.mobile-cta { display: none; }   /* la CTA nel pannello compare solo su mobile */

/* Responsive */
@media (max-width: 920px) {
  .hero-grid, .feat-row, .grid.c3, .grid.c4, .form-grid { grid-template-columns: 1fr; }
  .grid.c2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 34px; }
  .page-hero h1 { font-size: 31px; }
  h2 { font-size: 27px; }
  .feat-row.rev > .ph, .feat-row.rev > .feat-media { order: 0; }

  /* Header mobile: logo a sinistra, lingua + hamburger a destra */
  .nav { height: 64px; gap: 12px; }
  .nav .logo { margin-right: auto; }
  .nav .logo img { height: 38px !important; }
  .nav-toggle { display: flex; }
  .demo-desktop { display: none; }

  /* Pannello menu a tendina full-width */
  .nav ul.menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0; background: #fff;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 8px 24px 16px; max-height: 78vh; overflow-y: auto;
  }
  header.site.menu-open ul.menu { display: flex; }
  .nav ul.menu > li { border-bottom: 1px solid var(--line); }
  .nav ul.menu > li:last-child { border-bottom: none; }
  .nav ul.menu > li > a { padding: 13px 2px; display: block; }

  /* Dropdown sempre visibili (no hover) dentro il pannello */
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0 0 8px 12px; min-width: 0; border-radius: 0;
  }
  .dropdown a { padding: 8px 10px; }
  .mobile-cta { display: block; padding: 14px 0 4px; }
  .mobile-cta .btn { width: 100%; }
  .menu-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Pattern verde/blu a 1 colonna: solo il primo box di ogni gruppo verde, gli altri blu */
  .grid.c3 .card:nth-child(3n+1),
  .grid.c3 .quote:nth-child(3n+1),
  .grid.c2 .quote:nth-child(odd) { border-left-color: var(--primary); }
  .grid.c3:not(.timeline) .card:first-child,
  .grid.c2 .quote:first-child { border-left-color: var(--green); }
  .grid.c3.timeline .card { border-left-color: var(--line); }   /* step-card sempre neutre */

  /* Blog su mobile */
  .article h1 { font-size: 28px; }
  .article-cover { height: 200px; }
  .article-body { font-size: 16.5px; }

  /* Margini più compatti */
  .cta-final { padding: 44px 24px; }
  .hero { padding: 40px 0 36px; }
  section { padding: 48px 0; }
}

/* ===== Override per resa 1:1 con widget nativi Elementor ===== */
/* Forza le griglie/hero del prototipo sopra il flex dei container Elementor */
.hero-grid{display:grid!important;grid-template-columns:1.05fr .95fr!important;gap:56px!important;align-items:center!important}
.grid{display:grid!important}
.grid.c2{grid-template-columns:repeat(2,1fr)!important}
.grid.c3{grid-template-columns:repeat(3,1fr)!important}
.grid.c2,.grid.c3{gap:22px!important}
/* contenitore centrato a 1180 */
.container{max-width:clamp(1180px,88vw,1520px)!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important;width:100%}
/* i container Elementor non impongono gap/larghezze proprie dove usiamo le nostre classi */
.hero-grid,.grid,.card,.quote,.cta-row,.section-head,.who{gap:initial}
.e-con.card{gap:0!important}
.cta-row{display:flex!important;flex-direction:row!important;gap:14px!important;flex-wrap:wrap}
.who{display:flex!important;flex-direction:row!important;gap:12px!important;align-items:center}
.who>.elementor-element{width:auto}
/* Elementor azzera il border-radius dei container: lo ripristino come nel prototipo */
.card{border-radius:14px!important}
.cta-final{border-radius:22px!important}
.answer-box{border-radius:0 12px 12px 0!important}
.sec-band{border-radius:14px!important}
.ph{border-radius:14px!important}

/* banda CTA finale: tutto centrato, titolo bianco, pulsante bianco (come prototipo) */
.cta-final{text-align:center!important;padding:64px 40px!important}
.cta-final .urgency{margin-top:18px!important}
@media (max-width:920px){ .cta-final{padding:44px 24px!important} }
.cta-final .elementor-widget{text-align:center!important}
.cta-final .elementor-heading-title{color:#fff!important}
.cta-final .elementor-button-wrapper{text-align:center!important}
.cta-final .dg-btn-primary .elementor-button{background:#fff!important;color:var(--primary)!important;box-shadow:none!important}
.cta-final .dg-btn-primary .elementor-button:hover{background:#eef2ff!important}
/* azzera i margini di default dei widget Elementor (usiamo i margini del prototipo) */
.elementor-widget{margin-block-end:0!important;margin-bottom:0!important}
.elementor-widget-container{margin:0!important}
.section-head .elementor-widget,.cta-final .elementor-widget{margin-bottom:0!important}
/* pulsanti nativi -> stile .btn */
.dg-btn .elementor-button{font-weight:700!important;border-radius:10px!important;padding:13px 24px!important;font-size:15.5px!important;border:2px solid transparent!important;transition:all .15s;line-height:1.4!important;fill:#fff}
.dg-btn-primary .elementor-button{background:var(--primary)!important;color:#fff!important;box-shadow:0 6px 18px rgba(24,72,160,.35)!important}
.dg-btn-primary .elementor-button:hover{background:var(--primary-dark)!important;color:#fff!important}
.dg-btn-ghost .elementor-button{background:#fff!important;border-color:var(--line)!important;color:var(--ink)!important}
.dg-btn-ghost .elementor-button:hover{border-color:var(--primary)!important;color:var(--primary)!important}
/* Header sticky: il widget HTML che contiene header.site è alto solo ~120px e limita
   lo sticky. Con display:contents il widget non forma un box → header.site (position:sticky
   del prototipo) si aggancia rispetto all'intera pagina e il menu resta fisso in alto. */
.elementor-widget-html:has(header.site){display:contents}
.elementor-widget-html:has(header.site)>.elementor-widget-container{display:contents}
/* Su alcune pagine (es. blog) l'header è dentro un container corto: rendo display:contents
   anche il/i container che lo avvolgono, così lo sticky si aggancia all'intera pagina. */
.e-con:has(header.site),.elementor-element.e-con:has(header.site){display:contents!important}
header.site{z-index:100!important}
/* Separatore nel dropdown Piattaforma: divide i moduli (feature) da Sicurezza/Integrazioni */
.dropdown .dd-sep{height:1px;background:var(--line,#dde6f2);margin:8px 8px;border:0;padding:0}
/* Player video "lite" (poster + play, carica l'iframe Vimeo al click) — pagina Video + hero */
.vlite{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#0c2c53;border:0;border-radius:14px;cursor:pointer;overflow:hidden;padding:0}
.vlite .vlite-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.vlite::after{content:"";position:absolute;inset:0;background:rgba(8,30,63,.20);transition:background .15s;z-index:1}
.vlite:hover::after{background:rgba(8,30,63,.06)}
.vlite .vlite-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(27,78,160,.94);display:flex;align-items:center;justify-content:center;z-index:2}
.vlite .vlite-play svg{width:22px;height:22px;margin-left:3px;fill:#fff}
.vlite iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;border-radius:14px}
.vcard .vlite{margin-bottom:12px}
/* Modale player video (lightbox): click su .vlite apre il player Vimeo grande e centrato,
   con fullscreen nativo. Chiusura: X / click fuori / Esc. */
.dg-vmodal{position:fixed;inset:0;z-index:100000;background:rgba(8,20,40,.82);display:flex;align-items:center;justify-content:center;padding:24px;animation:dgvfade .15s ease}
@keyframes dgvfade{from{opacity:0}to{opacity:1}}
.dg-vmodal-inner{position:relative;width:min(1000px,92vw)}
.dg-vmodal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.dg-vmodal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dg-vmodal-close{position:absolute;top:-46px;right:0;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#14233f;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.dg-vmodal-close:hover{background:#eef2ff}
body.dg-vmodal-open{overflow:hidden}
@media(max-width:600px){.dg-vmodal-inner{width:96vw}.dg-vmodal-close{top:-42px}}
/* Card-link: ancora overlay che rende cliccabile l'intera card (titolo/testo restano widget
   nativi modificabili). Nell'editor Elementor l'overlay è disattivato per non bloccare la modifica. */
.card.link-card{position:relative}
.card.link-card>.elementor-element:has(.card-link){position:absolute!important;inset:0;z-index:3;margin:0;padding:0}
.card.link-card>.elementor-element:has(.card-link)>.elementor-widget-container{height:100%}
.card .card-link{display:block;width:100%;height:100%;border-radius:inherit;font-size:0}
.card .card-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.elementor-editor-active .card.link-card>.elementor-element:has(.card-link){pointer-events:none}
/* Card native "ariose" come il prototipo: Elementor mette padding 10px e con gap:0 i margini
   interni non passano i wrapper widget → ripristino padding 26px e le spaziature sui wrapper. */
.e-con.card{padding:26px!important}
.e-con.card>.elementor-widget-heading{margin-top:16px}
.e-con.card>.elementor-widget-text-editor{margin-top:8px}
.e-con.card>.elementor-widget-html:has(.more){margin-top:14px}
.e-con.card .ico{margin-bottom:0}
.e-con.card p{margin-top:0}
.e-con.card .more{margin-top:0}
/* FAQ nativa (accordion): domanda=Heading, risposta=Text-editor (editabili inline), stessa resa
   di <details> del prototipo. Toggle via classe .open (JS), disattivato nell'editor (risposte visibili). */
.e-con.faq-list{display:block!important;max-width:820px;margin:0 auto}
.e-con.faq-item{display:block!important;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.faq-item .faq-q{position:relative;cursor:pointer;padding-right:32px}
.faq-item .faq-q .elementor-heading-title{font-weight:700;font-size:16.5px;line-height:1.4;margin:0}
.faq-item .faq-q::after{content:"+";position:absolute;right:0;top:-2px;font-size:22px;color:var(--primary);font-weight:600;pointer-events:none}
.faq-item.open .faq-q::after{content:"–"}
.faq-item .faq-a{display:none}
.faq-item.open .faq-a{display:block}
.faq-item .faq-a p{color:var(--ink-soft);font-size:15.5px;margin:10px 0 0}
.elementor-editor-active .faq-item .faq-a{display:block}
/* Bullet featrows ora in Text-editor: ripristino spunta verde e stile (il text-editor Elementor
   azzera la formattazione del prototipo). */
.feat-row .elementor-widget-text-editor ul{list-style:none!important;margin:14px 0 0;padding:0}
.feat-row .elementor-widget-text-editor li{padding:5px 0 5px 26px;position:relative;color:var(--ink-soft);list-style:none}
.feat-row .elementor-widget-text-editor li::before{content:"✓"!important;position:absolute;left:0;color:var(--primary);font-weight:800}
.feat-row .elementor-widget-text-editor li b{color:var(--ink)}
/* FONT INTER ovunque: sul Cloud le tipografie GLOBALI di Elementor sovrascrivevano Inter sui
   titoli (font diverso da localhost). Sovrascrivo le variabili global di Elementor e forzo Inter
   sui selettori di testo (NON sulle icone, che hanno font-family propria sull'elemento <i>). */
:root,body{
  --e-global-typography-primary-font-family:"Inter";
  --e-global-typography-secondary-font-family:"Inter";
  --e-global-typography-text-font-family:"Inter";
  --e-global-typography-accent-font-family:"Inter";
}
body,h1,h2,h3,h4,h5,h6,p,a,li,blockquote,small,strong,b,
.elementor-heading-title,.elementor-widget-text-editor,.elementor-button,
.dg-btn,.btn,.menu a,.dropdown a,.eyebrow,.tag,.answer-box,.card,.card h3,.card p,
.faq-list summary,.crumbs,input,select,textarea,button{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
}
/* PESO TITOLI come nel prototipo: sul Cloud le tipografie globali di Elementor forzavano i
   titoli a 600 (più leggeri di localhost=800). Ripristino h1/h2=800, h3/h4=700. */
h1,.elementor-widget-heading h1.elementor-heading-title{font-weight:800!important}
h2,.elementor-widget-heading h2.elementor-heading-title{font-weight:800!important}
h3,.elementor-widget-heading h3.elementor-heading-title{font-weight:700!important}
h4,.elementor-widget-heading h4.elementor-heading-title{font-weight:700!important}
/* Logo header: 52px, proporzioni sempre mantenute (no squish da max-width); su mobile più piccolo per stare nello spazio */
header.site .logo img{height:52px!important;width:auto!important;max-width:none!important}
@media (max-width:920px){ header.site .logo img{height:38px!important} }
/* Pulsanti .btn primari (header/menu): testo SEMPRE bianco (il tema lo annerisce su hover) */
.btn.btn-primary,.btn.btn-primary:hover,.btn.btn-primary:focus,.btn.btn-primary:active,.btn.btn-primary:visited{color:#fff!important}
/* Hamburger: niente sfondo fucsia su focus/tap, resta bianco */
.nav-toggle{-webkit-tap-highlight-color:transparent}
.nav-toggle:hover,.nav-toggle:focus,.nav-toggle:active,.nav-toggle:focus-visible{background:#fff!important;outline:none!important;box-shadow:none!important}
/* Contatti mobile: il form (colonna con <form>) compare per primo, senza scorrere tutta la pagina */
@media (max-width:920px){ .page-hero .hero-grid>*:has(form){order:-1} }

/* Single post: nascondi area commenti (commenti disattivati) */
.wp-block-comments,.comments-area,#comments,#respond,.comment-respond{display:none!important}
/* Single post: navigazione "articolo precedente / successivo" più gradevole */
.wp-block-post-navigation-link{display:inline-flex!important;align-items:center;gap:10px;padding:16px 22px;border:1px solid var(--line);border-radius:14px;background:#fff;max-width:48%;transition:all .15s;text-decoration:none}
.wp-block-post-navigation-link:empty{display:none!important}
.wp-block-post-navigation-link a{color:var(--ink);font-weight:700;font-size:15.5px;line-height:1.3;text-decoration:none}
.wp-block-post-navigation-link:hover{border-color:var(--primary);box-shadow:0 8px 22px rgba(24,72,160,.12);transform:translateY(-2px)}
.wp-block-post-navigation-link:hover a{color:var(--primary)}
.wp-block-post-navigation-link__arrow-previous,.wp-block-post-navigation-link__arrow-next{color:var(--primary);font-weight:800}

/* Single post Digivents: larghezza di lettura 760px (.container forza 1180 con !important) */
.container.article-narrow{max-width:760px!important}
/* Immagini dell'articolo: stesso formato della copertina (full-width, stondate, ombra, centrate) */
/* !important per battere le larghezze inline dei blocchi immagine "is-resized" di WordPress */
.article-body img{width:100%!important;height:auto!important;max-width:100%!important;display:block;border-radius:16px;box-shadow:var(--shadow);margin:24px auto}
.article-body figure,.article-body .wp-block-image{width:100%!important;max-width:100%!important;margin:24px auto;text-align:center}
.article-body figure img{margin:0 auto}
/* immagini dentro un link: il link deve essere block, altrimenti l'img non va full-width */
.article-body a:has(img){display:block;width:100%}
.article-body figure a{display:block;width:100%}
/* Video dentro gli articoli: stessa resa delle schede della pagina Video (velo +
   tasto play) e stessa apertura in lightbox. La classe dg-vplay la mette il
   filtro the_content del plugin sui link a Vimeo che contengono un'immagine. */
.article-body a.dg-vplay{position:relative;display:block;width:100%;border-radius:16px;overflow:hidden;line-height:0;box-shadow:var(--shadow);margin:24px auto}
.article-body a.dg-vplay img{margin:0!important;border-radius:0!important;box-shadow:none!important}
.article-body a.dg-vplay::before{content:"";position:absolute;inset:0;background:rgba(8,30,63,.20);transition:background .15s;z-index:1}
.article-body a.dg-vplay:hover::before{background:rgba(8,30,63,.06)}
.article-body a.dg-vplay::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(27,78,160,.94) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% 50%/22px 22px;z-index:2}
@media(prefers-reduced-motion:reduce){.article-body a.dg-vplay::before{transition:none}}
/* Single post Digivents: navigazione tra articoli (prev/next) */
.dg-postnav{display:flex;gap:18px;flex-wrap:wrap;margin:46px 0 6px;border-top:1px solid var(--line);padding-top:32px}
.dg-postnav-link{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;transition:all .15s}
.dg-postnav-link:hover{border-color:var(--primary);box-shadow:0 8px 22px rgba(24,72,160,.12);transform:translateY(-2px)}
.dg-postnav-link span{font-size:13px;color:var(--ink-soft);font-weight:600}
.dg-postnav-link b{color:var(--ink);font-size:16px;line-height:1.3}
.dg-postnav-link:hover b{color:var(--primary)}
.dg-postnav-link.next{text-align:right;align-items:flex-end}

/* Blog: barra filtro categorie (chip) */
.blog-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 34px}
.blog-cats .chip{display:inline-block;padding:8px 17px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-soft);background:#fff;transition:all .15s}
.blog-cats .chip:hover{border-color:var(--primary);color:var(--primary)}
.blog-cats .chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
/* Blog: paginazione numerata */
.blog-pager{margin-top:44px;display:flex;justify-content:center}
.blog-pager ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.blog-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 13px;border:1px solid var(--line);border-radius:10px;font-weight:700;font-size:15px;color:var(--ink);background:#fff;text-decoration:none;transition:all .15s}
.blog-pager a.page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.blog-pager .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}
.blog-pager .page-numbers.dots{border-color:transparent;background:none}

/* Sezioni "soft" (il prototipo usa section.soft element-qualified; qui sono container div) */
.soft{background:var(--bg-soft)!important}
/* Titoli nativi: il prototipo li lascia color ink (scuri), Elementor li forza blu */
.elementor-heading-title{color:var(--ink)!important}
.cta-final .elementor-heading-title,.navy .elementor-heading-title{color:#fff!important}
/* section-head centrato (max-width 760, centrato) come nel prototipo */
.section-head{text-align:center!important;max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
.section-head .elementor-heading-title,.section-head .elementor-widget-text-editor,.section-head .elementor-widget-container{text-align:center!important}

/* Loghi clienti: carosello a scorrimento continuo, una riga, a colori (~6 visibili) */
/* scritta centrata verticalmente tra l'inizio della sezione (padding-top 48px) e il bordo dei loghi: margine-sotto = padding-top */
.logos-caption{text-align:center;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.2px;margin:0 auto 48px;max-width:680px;line-height:1.35}
.logo-marquee{overflow:hidden;width:100%;background:var(--bg-soft);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.logo-track{display:flex;align-items:center;gap:108px;width:max-content;animation:dg-logoscroll 44s linear infinite;background:var(--bg-soft)}
.logo-track img{height:110px!important;width:auto!important;max-width:none!important;object-fit:contain;flex-shrink:0;filter:none!important;opacity:1!important;mix-blend-mode:multiply}
@media (max-width:920px){ .logo-track img{height:82px!important} }
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes dg-logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Avatar testimonial come foto reale */
.quote img.avatar,img.avatar{width:42px!important;height:42px!important;border-radius:50%;object-fit:cover;flex-shrink:0;display:block}

/* Hero "narrow" (Prezzi/FAQ/Clienti): colonna stretta centrata ma TITOLO A SINISTRA (scelta utente,
   come localhost). Forzo left con !important perché sul Cloud Elementor centra il widget heading. */
.hero-narrow{max-width:860px!important;margin-left:auto!important;margin-right:auto!important;text-align:left!important}
.hero-narrow .eyebrow,.hero-narrow .answer-box,
.hero-narrow .elementor-widget-heading,.hero-narrow .elementor-heading-title{text-align:left!important}

/* Home hero: video reale Digivents in autoplay (sfondo); poster di fallback se il dominio non è autorizzato su Vimeo */
/* Home hero: eyebrow + H1 a tutta larghezza in alto, poi griglia testo|video sotto (video più grande) */
.hero>.container{display:block!important}
.hero .eyebrow{display:inline-block;margin-bottom:16px}
.hero .hero-title{font-size:46px;line-height:1.12;letter-spacing:-1.2px;font-weight:800;margin:0 0 30px;max-width:100%}
/* SOLO desktop: 2 colonne con video più grande (su mobile resta colonna unica) */
@media (min-width:921px){ .hero .hero-grid{grid-template-columns:.82fr 1.22fr!important;gap:44px!important;align-items:center!important} }
@media (max-width:920px){ .hero .hero-title{font-size:32px;margin-bottom:22px} .hero .hero-grid{grid-template-columns:1fr!important;gap:22px!important;align-items:stretch!important} }
.home-hero-video{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--bg-navy) center/cover no-repeat}
.home-hero-video .hhv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.home-hero-video .hhv-iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.home-hero-video .hhv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:none;cursor:pointer;background:rgba(24,72,160,.92);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .15s,background .15s}
.home-hero-video .hhv-play::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff}
.home-hero-video .hhv-play:hover{background:var(--primary);transform:translate(-50%,-50%) scale(1.06)}

/* Home: banda navy (il prototipo usa section.navy; qui è un container .navy) */
.navy{background:var(--bg-navy)!important;color:#dfe6f7!important}
.navy h2{color:#fff!important}
.navy .section-head p{color:#b9c4e0!important}
/* CTA finale: cta-row centrata + pulsante ghost "on-dark" (trasparente, bordo bianco) */
.cta-final .cta-row{justify-content:center!important}
.cta-final .dg-btn-ghost .elementor-button{background:transparent!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important;box-shadow:none!important}
.cta-final .dg-btn-ghost .elementor-button:hover{border-color:#fff!important}

/* feat-row a 2 colonne (batte il flex dei container Elementor) */
.feat-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:48px!important;align-items:center!important}
.feat-row>.elementor-element{min-width:0}
/* alternanza testo/immagine: nel build nativo i figli diretti sono .elementor-element (la .ph è annidata),
   quindi sposto a destra la colonna testo sulle righe .rev (solo desktop; su mobile resta testo-primo) */
@media (min-width:921px){ .feat-row.rev>.elementor-element:first-child{order:2!important} }
/* immagine reale nelle feat-row (al posto del placeholder .ph): stondata, ombra, formato uniforme 3:2 */
.feat-img{width:100%!important;max-width:100%!important;display:block;border-radius:14px;box-shadow:var(--shadow);background:#fff;aspect-ratio:3/2;height:auto;object-fit:cover;object-position:center}
/* icona play verde sul pulsante ghost dei video (come .play-ico del prototipo) */
.dg-btn-ghost.has-play .elementor-button-content-wrapper::before{content:"\25B6\00a0";color:var(--green-dark);font-size:12px}
/* accordion (FAQ) -> stile .faq-list/details */
.faq-acc .elementor-accordion-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-acc .elementor-tab-title{font-weight:700;padding:18px 22px;border:none}
.faq-acc .elementor-tab-content{color:var(--ink-soft);padding:0 22px 16px;font-size:15.5px}
.faq-acc .elementor-accordion-icon{color:var(--primary)}

/* ===== Responsive: a colonna unica su mobile (batte i grid !important desktop) ===== */
@media (max-width:920px){
  .hero-grid,.grid.c2,.grid.c3,.grid.c4,.feat-row{grid-template-columns:1fr!important;gap:22px!important}
  .stats{grid-template-columns:repeat(2,1fr)!important}
  /* pattern verde/blu a 1 colonna: solo il primo box del gruppo verde */
  .grid.c3 .card:nth-child(3n+1),.grid.c3 .quote:nth-child(3n+1),.grid.c2 .quote:nth-child(odd){border-left-color:var(--primary)!important}
  .grid.c3:not(.timeline) .card:first-child,.grid.c2 .quote:first-child{border-left-color:var(--green)!important}
}
/* telefono cliccabile: stile testo, niente colore link */
a[href^="tel:"]{color:inherit;text-decoration:none}
/* Quando i CTA "Prenota una demo" portano al form (stessa pagina), lascio spazio
   sopra: altrimenti l'header sticky coprirebbe l'inizio del modulo. */
.dg-lead-form{scroll-margin-top:96px}
/* ===== Barra CTA sticky su mobile =====
   Il testo dell'answer-box resta INTERO; la conversione è garantita da una barra fissa
   in basso che compare SOLO quando la CTA della hero esce dallo schermo (niente doppione)
   e si nasconde di nuovo sulla CTA finale. Gestisce l'area sicura iOS (home indicator)
   e alza il widget chat per non sovrapporsi. */
.dg-sticky-cta{display:none}
@media (max-width:767px){
  .dg-sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9000;
    background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(12,33,80,.10);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    transform:translateY(120%);transition:transform .25s ease;will-change:transform}
  .dg-sticky-cta.dg-on{transform:none}
  .dg-sticky-cta a{display:block;text-align:center;background:var(--primary);color:#fff;
    font-weight:700;font-size:16px;line-height:1.2;padding:14px 18px;border-radius:10px;text-decoration:none}
  /* il widget chat sale sopra la barra quando è visibile */
  body.dg-sticky-on chat-widget,body.dg-sticky-on #chat-widget,
  body.dg-sticky-on [id*="lc_text_widget"],body.dg-sticky-on .lc-widget{bottom:88px!important}
}
/* Badge dentro l'eyebrow (es. "Beta"): .tag ha margin-bottom:12px che in un flex
   centrato lo spinge in alto → lo azzero e lo allineo al resto della scritta. */
.eyebrow .tag{margin-bottom:0;align-self:center;line-height:1.35}
/* Variante gialla per evidenziare uno stato (Beta / Novità) */
.tag.beta{color:#8a6100;background:#fff4cc;border:1px solid #f0d488}
/* ===== Rivelazione allo scroll (fade + slide) =====
   Lo stato "nascosto" si applica SOLO se il JS aggiunge .dg-anim al body: se il JS non
   parte, tutto resta visibile (nessun rischio di contenuti invisibili). Disattivata
   nell'editor Elementor e per chi ha prefers-reduced-motion. */
body.dg-anim .dg-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease-out,transform .55s ease-out}
body.dg-anim .dg-reveal.dg-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  body.dg-anim .dg-reveal{opacity:1!important;transform:none!important;transition:none!important}
}
/* Immagine in evidenza (hero): stessa resa di .feat-img ma SENZA maschera sketch. */
.feat-img.no-mask{-webkit-mask-image:none!important;mask-image:none!important}
/* Box immagine "card": stondato + bordino blu a sinistra.
   Aggiungi la classe "img-card" all'immagine in Elementor (Avanzate → Classi CSS). */
.img-card img,img.img-card{display:block!important;max-width:100%!important;height:auto;border-radius:14px!important;border-left:6px solid var(--primary)!important;box-shadow:var(--shadow)!important}
/* Variante "boxed": immagine dentro un riquadro bianco con spazio attorno (come il box "In breve").
   Funziona sia con la classe sul widget Immagine sia direttamente sull'<img>. */
.img-card-boxed{background:#fff!important;padding:14px!important;border-radius:14px!important;border:0!important;border-left:6px solid var(--primary)!important;box-shadow:var(--shadow)!important;box-sizing:border-box!important}
.img-card-boxed img{display:block!important;max-width:100%!important;height:auto;border-radius:8px!important;box-shadow:none!important;border:0!important}
img.img-card-boxed{padding:14px!important;background:#fff!important;border-radius:14px!important;border:0!important;border-left:6px solid var(--primary)!important;box-shadow:var(--shadow)!important;box-sizing:border-box!important}
/* in un box la maschera sketch non ha senso: la disattivo */
.img-card-boxed img,img.img-card-boxed{-webkit-mask-image:none!important;mask-image:none!important}
/* Form lead contatti → Squadd: textarea, consenso, honeypot, errore */
.form-grid textarea{min-height:92px;resize:vertical;font-family:inherit}
.dg-consent{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink-soft);cursor:pointer}
.dg-consent input[type=checkbox]{width:auto;height:auto;min-height:0;margin:3px 0 0;padding:0;flex:0 0 auto;box-shadow:none}
.dg-consent span{flex:1 1 auto;line-height:1.45}
.dg-consent a{color:var(--primary);text-decoration:underline;white-space:nowrap}
.dg-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.dg-form-error{display:none;font-size:13.5px;color:#c0392b;margin:0}

/* Maschera "sketch" (Elementor) su TUTTE le immagini feature — replicata via CSS globale.
   La hero non e\' .feat-img, quindi resta esclusa. size:cover, centrata (come su registrazione). */
.feat-img{
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xMTQzIDg4Ljk5OTkiPjxwYXRoIGQ9Ik04Mi4xNzQ5LDM3LjUyNjZsMS42MTE5LTEuNjExOWMuOTQ4Ni0uOTQ4Ny02LjM3LTUuOTMwOS03LjA0OTItNi4zNzgyYTQ1LjE1MTYsNDUuMTUxNiwwLDAsMC01Ljc3NjYtMy4zMjQxYy0uMjQ2OC0uMTE1Ny0uNjAxNi0uMzAwOC0uOTg3Mi0uNDc4MnExLjc4MTYtMS44OTcyLDMuNTg2My0zLjc3MTNjLjk0ODYtLjk4LTYuMzYyOC01LjkyMzItNy4wNDkyLTYuMzcwNUE0NC4xNTc5LDQ0LjE1NzksMCwwLDAsNjAuNzUsMTIuMjYwNmwtLjI5My0uMTQ2NSwxLjM5NTktMS41NDI1Yy45NDA5LTEuMDQ4OS02LjMzMTktNS45LTcuMDQ5Mi02LjM3QTQ0LjIxMiw0NC4yMTIsMCwwLDAsNDkuMDQyMi44NjE2Yy0uNTQtLjI0NjctMi4zMTM3LTEuMjY0OC0yLjg0NTgtLjY4NjRRMzIuNzM4MSwxNS4xNjgyLDE4LjExNTQsMjkuMDY2Yy03Ljg0MzYsNy40NS0xNi41NjYzLDE1LjU3OTEtMTguMTA4OCwyNi44Ny0uMTE1Ny44MjUzLDEuMzI2NSwxLjk3NDQsMS43NDMsMi4zMTM4YTQwLjc5OSw0MC43OTksMCwwLDAsNS4zMTM5LDQuMDU2Nyw0NC4yMTc0LDQ0LjIxNzQsMCwwLDAsNS43NjExLDMuMzRjLjY0LjI5MzEsMi4xNzUsMS4yMDMxLDIuODQ1OS42ODY0bDIuMDc0Ny0xLjU1NzljMS40NSwxLjg1ODcsNS45Njk0LDQuNzIsNi42NzEyLDUuMTc1bDEuNDg4NS45NTY0QzI0LjQwMSw3Mi43NjQ3LDIyLjkyLDc0LjYzMTEsMjEuNDcsNzYuNTI4M2MtLjkxLDEuMTg3OCw2LjI2MjUsNS44NjE1LDcuMDQ5Miw2LjM3YTQ0LjE2MzMsNDQuMTYzMywwLDAsMCw1Ljc2MTEsMy4zMzE4Yy42MDE2LjI3NzYsMi4yMjg5LDEuMjM0LDIuODQ1OS42OTQxbDkuMjU1LTguMDk4Yy44MjUyLDIuNTY4MiwxNC41Njg3LDExLjYzLDE1LjY3MTYsOS45NzIxTDkxLjA2LDQ1LjM2MjRDOTEuNjkyLDQ0LjQxMzgsODYuNzI1Miw0MC4zMjYyLDgyLjE3NDksMzcuNTI2NloiLz48L3N2Zz4=");
  mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MS4xMTQzIDg4Ljk5OTkiPjxwYXRoIGQ9Ik04Mi4xNzQ5LDM3LjUyNjZsMS42MTE5LTEuNjExOWMuOTQ4Ni0uOTQ4Ny02LjM3LTUuOTMwOS03LjA0OTItNi4zNzgyYTQ1LjE1MTYsNDUuMTUxNiwwLDAsMC01Ljc3NjYtMy4zMjQxYy0uMjQ2OC0uMTE1Ny0uNjAxNi0uMzAwOC0uOTg3Mi0uNDc4MnExLjc4MTYtMS44OTcyLDMuNTg2My0zLjc3MTNjLjk0ODYtLjk4LTYuMzYyOC01LjkyMzItNy4wNDkyLTYuMzcwNUE0NC4xNTc5LDQ0LjE1NzksMCwwLDAsNjAuNzUsMTIuMjYwNmwtLjI5My0uMTQ2NSwxLjM5NTktMS41NDI1Yy45NDA5LTEuMDQ4OS02LjMzMTktNS45LTcuMDQ5Mi02LjM3QTQ0LjIxMiw0NC4yMTIsMCwwLDAsNDkuMDQyMi44NjE2Yy0uNTQtLjI0NjctMi4zMTM3LTEuMjY0OC0yLjg0NTgtLjY4NjRRMzIuNzM4MSwxNS4xNjgyLDE4LjExNTQsMjkuMDY2Yy03Ljg0MzYsNy40NS0xNi41NjYzLDE1LjU3OTEtMTguMTA4OCwyNi44Ny0uMTE1Ny44MjUzLDEuMzI2NSwxLjk3NDQsMS43NDMsMi4zMTM4YTQwLjc5OSw0MC43OTksMCwwLDAsNS4zMTM5LDQuMDU2Nyw0NC4yMTc0LDQ0LjIxNzQsMCwwLDAsNS43NjExLDMuMzRjLjY0LjI5MzEsMi4xNzUsMS4yMDMxLDIuODQ1OS42ODY0bDIuMDc0Ny0xLjU1NzljMS40NSwxLjg1ODcsNS45Njk0LDQuNzIsNi42NzEyLDUuMTc1bDEuNDg4NS45NTY0QzI0LjQwMSw3Mi43NjQ3LDIyLjkyLDc0LjYzMTEsMjEuNDcsNzYuNTI4M2MtLjkxLDEuMTg3OCw2LjI2MjUsNS44NjE1LDcuMDQ5Miw2LjM3YTQ0LjE2MzMsNDQuMTYzMywwLDAsMCw1Ljc2MTEsMy4zMzE4Yy42MDE2LjI3NzYsMi4yMjg5LDEuMjM0LDIuODQ1OS42OTQxbDkuMjU1LTguMDk4Yy44MjUyLDIuNTY4MiwxNC41Njg3LDExLjYzLDE1LjY3MTYsOS45NzIxTDkxLjA2LDQ1LjM2MjRDOTEuNjkyLDQ0LjQxMzgsODYuNzI1Miw0MC4zMjYyLDgyLjE3NDksMzcuNTI2NloiLz48L3N2Zz4=");
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* ============ Fasce a tutta larghezza (header, hero, loghi, footer) ============
   Solo la "cornice" del sito si allarga sui monitor grandi: header, hero, striscia
   dei loghi e footer. I paragrafi delle sezioni interne restano nel .container
   normale, altrimenti le righe di testo diventerebbero troppo lunghe da leggere. */
/* Solo da 1200px in su: sotto quella soglia le fasce devono restare allineate
   alle sezioni normali, altrimenti su mobile header e hero risultano piu' stretti. */
@media (min-width:1200px){
  header.site>.container,
  footer>.container,
  .hero>.container,
  .page-hero>.container{ max-width:min(1760px,94vw)!important }
}

/* La striscia dei loghi va da bordo a bordo: ha già overflow nascosto e le
   sfumature laterali, quindi il taglio ai lati resta pulito. */
.container:has(>.elementor-widget-html .logo-marquee){
  max-width:100%!important; padding-left:0!important; padding-right:0!important;
}
.container:has(>.elementor-widget-html .logo-marquee) .logos-caption{
  padding-left:24px; padding-right:24px;
}

/* Con la hero più larga la colonna di testo crescerebbe troppo: l'occhiello e il
   riquadro "In breve" restano entro una misura leggibile (~65 caratteri). */
@media (min-width:1400px){
  .page-hero .answer-box,
  .hero .answer-box{ max-width:660px!important }
}

/* ---- Foto "da album" su tutte le hero — mat di carta, angolini
   porta-foto moderni (translucidi, non i triangolini neri classici) e angolo
   piegato in basso a destra. Si attiva con la classe img-album sul widget
   immagine della hero. Se piace: stessa classe sulle altre pagine. ---- */
.img-album{position:relative;display:block;background:#fdfaf3;padding:16px;border-radius:6px;
  box-shadow:0 24px 48px rgba(20,35,63,.18),0 3px 10px rgba(20,35,63,.08);
  transform:rotate(-1.4deg)}
.img-album img{display:block!important;width:100%!important;height:auto;border-radius:3px;box-shadow:0 1px 4px rgba(20,35,63,.18)}
/* angolini minimal su 3 angoli: doppio livello (bordo scuro sotto, velo bianco sopra) */
.img-album::before{content:'';position:absolute;inset:16px;pointer-events:none;border-radius:3px;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.9) 0 49%, transparent 50%),
    linear-gradient(135deg, rgba(20,35,63,.14) 0 49%, transparent 50%),
    linear-gradient(225deg, rgba(255,255,255,.9) 0 49%, transparent 50%),
    linear-gradient(225deg, rgba(20,35,63,.14) 0 49%, transparent 50%),
    linear-gradient(45deg,  rgba(255,255,255,.9) 0 49%, transparent 50%),
    linear-gradient(45deg,  rgba(20,35,63,.14) 0 49%, transparent 50%);
  background-repeat:no-repeat;
  background-size:44px 44px,48px 48px,44px 44px,48px 48px,44px 44px,48px 48px;
  background-position:left top,left top,right top,right top,left bottom,left bottom}
/* angolo piegato in basso a dx: il taglio mostra la carta dell'album, il lembo
   e' il retro della foto, con l'ombra della piega sopra */
.img-album::after{content:'';position:absolute;right:16px;bottom:16px;width:56px;height:56px;
  border-bottom-right-radius:3px;
  background:linear-gradient(315deg,#fdfaf3 0 47%,#d9d2c2 47% 53%,#f7f2e7 53% 100%);
  box-shadow:-5px -5px 12px -2px rgba(20,35,63,.18)}
@media (max-width:920px){
  .img-album{padding:12px;transform:rotate(-1deg)}
  .img-album::before{inset:12px}
  .img-album::after{right:12px;bottom:12px;width:44px;height:44px}
}

/* variante alternata: inclinazione a destra (classe aggiuntiva alt-dx).
   Le pagine alternano sx/dx nell'ordine dei menu Piattaforma e Soluzioni. */
.img-album.alt-dx{transform:rotate(1.4deg)}
@media (max-width:920px){ .img-album.alt-dx{transform:rotate(1deg)} }

/* ---- Pagina Video: schede come blocchi Elementor nativi ----
   Prima ogni scheda era HTML scritto a mano dentro un'unica casella; ora e' un
   container .vcard con widget nativi. Qui l'immagine del widget riprende l'aspetto
   che aveva .vlite: rapporto 16/9, angoli stondati, velo e pulsante play.
   L'id del video Vimeo vive nell'href del link (lo legge lo script nel plugin). */
.vcard .vplay a{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0c2c53}
.vcard .vplay img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block;border-radius:0!important}
.vcard .vplay a::before{content:"";position:absolute;inset:0;background:rgba(8,30,63,.20);transition:background .15s;z-index:1}
.vcard .vplay a:hover::before{background:rgba(8,30,63,.06)}
.vcard .vplay a::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(27,78,160,.94) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% 50%/22px 22px;z-index:2}
.vcard .vplay{margin-bottom:12px}
.vcard .elementor-widget-heading{margin-bottom:6px}
/* la riga meta mantiene lo stile che aveva come <div class="meta"> */
.vcard .meta p{margin:0}

/* messaggio quando un filtro non ha video (di norma non si vede: le schede di
   categoria vuote vengono nascoste) */
.vempty{text-align:center;margin:34px 0 0;color:var(--ink-soft);font-size:15px}