/* ───────────────────────────────────────────────────────────────
   VIGILO HQ — Sito (livello marketing)
   Costruito sopra i token del design system (colors_and_type.css).
   Register: LIGHT. Accento unico: steel blue #2563EB. Inter.
   Tipografia in scala "web" (più grande della scala densa dell'app).
   ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--vh-font-sans);
  color: var(--vh-fg-primary);
  background: var(--vh-bg-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

/* scala tipografica web */
:root {
  --w-fs-display: clamp(2.4rem, 5.2vw, 4.1rem);
  --w-fs-h2:      clamp(1.7rem, 3.2vw, 2.6rem);
  --w-fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --w-fs-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --w-fs-body:    1.0625rem;   /* 17px */
  --w-fs-sm:      0.9375rem;   /* 15px */
  --w-maxw:       1200px;
  --w-gutter:     24px;
  --w-pillH:      48px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── Layout helpers ───────────────────────────────────── */
.w-wrap { max-width: var(--w-maxw); margin: 0 auto; padding-inline: var(--w-gutter); }
.w-wrap-narrow { max-width: 880px; margin: 0 auto; padding-inline: var(--w-gutter); }
.w-section { padding-block: clamp(56px, 8vw, 104px); }
.w-section-tight { padding-block: clamp(40px, 5vw, 64px); }
.w-bg-base { background: var(--vh-bg-base); }
.w-bg-surface { background: var(--vh-bg-surface); }
.w-bg-ink { background: #0F172A; color: #E2E8F0; }
.w-center { text-align: center; }

/* ── Eyebrow / labels ─────────────────────────────────── */
.w-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--vh-brand-blue);
  margin: 0 0 16px;
}
.w-eyebrow.is-muted { color: var(--vh-fg-muted); }
.w-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: 0.6;
}
.w-eyebrow.is-center { justify-content: center; }

/* ── Headings & text ──────────────────────────────────── */
.w-display {
  font-size: var(--w-fs-display); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.04; margin: 0;
  text-wrap: balance;
}
.w-h2 {
  font-size: var(--w-fs-h2); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.1; margin: 0;
  text-wrap: balance;
}
.w-h3 {
  font-size: var(--w-fs-h3); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; margin: 0;
}
.w-lead {
  font-size: var(--w-fs-lead); line-height: 1.5;
  color: var(--vh-fg-secondary); margin: 18px 0 0;
  text-wrap: pretty;
}
.w-body { font-size: var(--w-fs-body); color: var(--vh-fg-secondary); }
.w-accent { color: var(--vh-brand-blue); }
.w-section-head { max-width: 760px; }
.w-section-head.is-center { margin-inline: auto; }

/* ── Buttons ──────────────────────────────────────────── */
.w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--w-pillH); padding: 0 22px;
  border-radius: var(--vh-r-sm);
  font-size: var(--w-fs-sm); font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: var(--vh-trans-interactive), transform var(--vh-dur-fast);
  white-space: nowrap;
}
.w-btn i { font-size: 1.05em; }
.w-btn-primary { background: var(--vh-brand-blue); color: #fff; box-shadow: var(--vh-shadow-sm); }
.w-btn-primary:hover { background: #1D4ED8; box-shadow: var(--vh-shadow-md); }
.w-btn-primary:active { transform: translateY(1px); }
.w-btn-ghost {
  background: var(--vh-bg-surface); color: var(--vh-fg-primary);
  border-color: var(--vh-border-strong);
}
.w-btn-ghost:hover { background: var(--vh-bg-hover); border-color: var(--vh-fg-muted); }
.w-btn-ghost:active { transform: translateY(1px); }
.w-btn-on-ink {
  background: rgba(255,255,255,0.08); color: #fff;
  border-color: rgba(255,255,255,0.22);
}
.w-btn-on-ink:hover { background: rgba(255,255,255,0.16); }
.w-btn-lg { height: 54px; padding: 0 28px; font-size: 1rem; }
.w-btn-block { width: 100%; }

/* ── Navbar ───────────────────────────────────────────── */
.w-nav {
  position: sticky; top: 0; z-index: 1030;
  background: var(--vh-glass-bg);
  backdrop-filter: var(--vh-glass-blur);
  -webkit-backdrop-filter: var(--vh-glass-blur);
  border-bottom: 1px solid var(--vh-border);
}
.w-nav-inner {
  max-width: var(--w-maxw); margin: 0 auto; padding: 0 var(--w-gutter);
  height: 68px; display: flex; align-items: center; gap: 28px;
}
.w-brand { display: flex; align-items: center; gap: 11px; }
.w-brand-mark { width: 30px; height: 30px; flex: none; }
.w-brand-text { display: flex; flex-direction: column; line-height: 1; }
.w-wordmark { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.03em; }
.w-wordmark .hq { color: var(--vh-brand-blue-bright); }
.w-tagline { font-size: 0.64rem; color: var(--vh-fg-muted); letter-spacing: 0.01em; margin-top: 3px; }
.w-nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.w-nav-link {
  font-size: var(--w-fs-sm); font-weight: 500; color: var(--vh-fg-secondary);
  padding: 9px 13px; border-radius: var(--vh-r-sm);
  transition: var(--vh-trans-interactive);
}
.w-nav-link:hover { color: var(--vh-fg-primary); background: var(--vh-bg-hover); }
.w-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.w-nav-login { font-size: var(--w-fs-sm); font-weight: 600; color: var(--vh-fg-secondary); padding: 9px 12px; }
.w-nav-login:hover { color: var(--vh-fg-primary); }
.w-nav-burger { display: none; }

/* ── Nav dropdown (Per la tua attività) ───────────────── */
.w-nav-drop { position: relative; }
.w-nav-drop > .w-nav-link { display: inline-flex; align-items: center; gap: 5px; }
.w-nav-drop .caret { font-size: 0.62rem; transition: transform .15s ease; }
.w-nav-drop:hover .caret, .w-nav-drop:focus-within .caret { transform: rotate(180deg); }
.w-nav-menu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 236px;
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border);
  border-radius: var(--vh-r-md); box-shadow: var(--vh-shadow-lg);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 1040;
}
.w-nav-drop:hover .w-nav-menu, .w-nav-drop:focus-within .w-nav-menu { opacity: 1; visibility: visible; transform: none; }
.w-nav-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--vh-r-sm); font-size: var(--w-fs-sm); font-weight: 500; color: var(--vh-fg-secondary); white-space: nowrap; transition: var(--vh-trans-interactive); }
.w-nav-menu a:hover { background: var(--vh-bg-hover); color: var(--vh-fg-primary); }
.w-nav-menu a i { color: var(--vh-brand-blue); font-size: 1rem; width: 18px; text-align: center; flex: none; }

/* ── Hero ─────────────────────────────────────────────── */
.w-hero { position: relative; overflow: hidden; background: var(--vh-bg-surface); }
.w-hero::before {
  /* soft blue radial atmosphere, top-left (per brand) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 440px at 8% -8%, rgba(59,130,246,0.10), transparent 70%),
    radial-gradient(560px 420px at 100% 0%, rgba(96,165,250,0.07), transparent 70%);
}
.w-hero-inner {
  position: relative; max-width: var(--w-maxw); margin: 0 auto;
  padding: clamp(44px, 6vw, 84px) var(--w-gutter) clamp(40px, 5vw, 64px);
}
.w-hero-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.w-hero-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.82rem; font-weight: 600; color: var(--vh-fg-secondary);
  background: var(--vh-bg-base); border: 1px solid var(--vh-border);
  padding: 7px 14px 7px 11px; border-radius: var(--vh-r-pill); margin-bottom: 22px;
}
.w-hero-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vh-success); box-shadow: 0 0 0 3px var(--vh-success-bg); }
.w-hero h1 { font-size: var(--w-fs-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
.w-hero h1 .w-accent { color: var(--vh-brand-blue); }
.w-hero-sub { font-size: var(--w-fs-lead); color: var(--vh-fg-secondary); margin: 22px 0 0; max-width: 540px; text-wrap: pretty; }

/* Two doors */
.w-doors { margin: 30px 0 0; }
.w-doors-label { font-size: 0.8rem; font-weight: 600; color: var(--vh-fg-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.w-doors-row { display: flex; gap: 12px; flex-wrap: wrap; }
.w-door {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 19px; border-radius: var(--vh-r-lg);
  border: 1.5px solid var(--vh-border-strong); background: var(--vh-bg-surface);
  transition: var(--vh-trans-interactive), transform var(--vh-dur-fast);
  flex: 1 1 220px; text-align: left;
}
.w-door:hover { border-color: var(--vh-brand-blue); background: var(--vh-brand-blue-tint); transform: translateY(-1px); }
.w-door.is-active { border-color: var(--vh-brand-blue); background: var(--vh-brand-blue-tint); box-shadow: var(--vh-focus-ring); }
.w-door-ic {
  width: 42px; height: 42px; flex: none; border-radius: var(--vh-r-md);
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--vh-brand-blue); color: #fff;
}
.w-door.is-multi .w-door-ic { background: #0F172A; }
.w-door-tx b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.w-door-tx span { display: block; font-size: 0.84rem; color: var(--vh-fg-muted); margin-top: 2px; }

.w-hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.w-hero-note { font-size: 0.85rem; color: var(--vh-fg-muted); display: flex; align-items: center; gap: 7px; }
.w-hero-note i { color: var(--vh-success); }

/* ── Browser mockup frame ─────────────────────────────── */
.w-mock {
  border-radius: var(--vh-r-lg); overflow: hidden;
  border: 1px solid var(--vh-border);
  box-shadow: var(--vh-shadow-xl);
  background: var(--vh-bg-surface);
}
.w-mock-bar {
  height: 38px; display: flex; align-items: center; gap: 7px;
  padding: 0 14px; background: var(--vh-bg-base);
  border-bottom: 1px solid var(--vh-border);
}
.w-mock-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--vh-border-strong); }
.w-mock-url {
  margin-left: 12px; height: 22px; flex: 1; max-width: 280px;
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border);
  border-radius: var(--vh-r-pill); display: flex; align-items: center;
  gap: 6px; padding: 0 11px; font-size: 0.72rem; color: var(--vh-fg-muted);
}
.w-hero-mock { position: relative; }
.w-hero-mock .w-floatcard {
  position: absolute; background: var(--vh-bg-surface);
  border: 1px solid var(--vh-border); border-radius: var(--vh-r-md);
  box-shadow: var(--vh-shadow-lg); padding: 12px 14px;
}
.w-floatcard .fc-label { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vh-fg-muted); }
.w-floatcard .fc-value { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.w-floatcard .fc-delta { font-size: 0.78rem; font-weight: 600; }
.fc-up { color: var(--vh-success); }

/* ── Generic card grid ────────────────────────────────── */
.w-grid { display: grid; gap: var(--w-gutter); }
.w-grid-2 { grid-template-columns: repeat(2, 1fr); }
.w-grid-3 { grid-template-columns: repeat(3, 1fr); }
.w-grid-4 { grid-template-columns: repeat(4, 1fr); }

.w-card {
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border);
  border-radius: var(--vh-r-lg); padding: 26px;
  transition: var(--vh-trans-interactive), transform var(--vh-dur-fast);
}
.w-card.is-hover:hover { box-shadow: var(--vh-shadow-md); transform: translateY(-2px); border-color: var(--vh-border-strong); }
.w-card-ic {
  width: 46px; height: 46px; border-radius: var(--vh-r-md);
  display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 18px;
}
.w-card h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.w-card p { margin: 0; font-size: var(--w-fs-sm); color: var(--vh-fg-secondary); line-height: 1.55; }

/* ── Prima / Dopo ─────────────────────────────────────── */
.w-prepost { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: stretch; }
.w-pp-col { border-radius: var(--vh-r-xl); padding: 30px; border: 1px solid var(--vh-border); }
.w-pp-before { background: var(--vh-bg-base); }
.w-pp-after { background: #0F172A; border-color: #1E293B; color: #E2E8F0; }
.w-pp-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 6px 12px; border-radius: var(--vh-r-pill); margin-bottom: 20px;
}
.w-pp-before .w-pp-tag { background: var(--vh-danger-bg); color: var(--vh-danger-text); }
.w-pp-after .w-pp-tag { background: rgba(34,197,94,0.16); color: #86EFAC; }
.w-pp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.w-pp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--w-fs-sm); line-height: 1.45; }
.w-pp-list li i { font-size: 1.05rem; margin-top: 1px; flex: none; }
.w-pp-before li { color: var(--vh-fg-secondary); }
.w-pp-before li i { color: var(--vh-danger); }
.w-pp-after li { color: #CBD5E1; }
.w-pp-after li i { color: #4ADE80; }
.w-pp-arrow { display: grid; place-items: center; }
.w-pp-arrow span {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vh-brand-blue); color: #fff; font-size: 1.4rem; box-shadow: var(--vh-shadow-lg);
}

/* ── Pilastri (4 mondi) ───────────────────────────────── */
.w-pillar {
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border);
  border-radius: var(--vh-r-lg); padding: 0; overflow: hidden;
  transition: var(--vh-trans-interactive), transform var(--vh-dur-fast);
  display: flex; flex-direction: column;
}
.w-pillar:hover { box-shadow: var(--vh-shadow-md); transform: translateY(-2px); }
.w-pillar-top { height: 3px; }
.w-pillar-body { padding: 26px; display: flex; flex-direction: column; height: 100%; }
.w-pillar-ic { width: 48px; height: 48px; border-radius: var(--vh-r-md); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 18px; }
.w-pillar h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.w-pillar > .w-pillar-body > p { margin: 0 0 18px; font-size: var(--w-fs-sm); color: var(--vh-fg-secondary); line-height: 1.55; }
.w-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.w-chip {
  font-size: 0.78rem; font-weight: 500; color: var(--vh-fg-secondary);
  background: var(--vh-bg-base); border: 1px solid var(--vh-border);
  padding: 5px 11px; border-radius: var(--vh-r-pill);
}
.w-chip b { font-weight: 700; color: var(--vh-fg-primary); }

/* ── Feature showcase (modulo in vetrina) ─────────────── */
.w-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.w-feature.is-reverse .w-feature-media { order: -1; }
.w-feature-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.82rem; font-weight: 700; padding: 7px 13px 7px 9px;
  border-radius: var(--vh-r-pill); margin-bottom: 18px;
}
.w-feature-badge .b-ic { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 0.85rem; }
.w-feature-badge .b-sub { font-weight: 500; color: var(--vh-fg-muted); }
.w-feature h2 { font-size: var(--w-fs-h2); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
.w-feature > div > p { font-size: var(--w-fs-body); color: var(--vh-fg-secondary); margin: 18px 0 0; line-height: 1.55; text-wrap: pretty; }
.w-feature-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 16px; }
.w-feature-list li { display: flex; gap: 13px; align-items: flex-start; }
.w-feature-list .fl-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 0.95rem; background: var(--vh-brand-blue-tint); color: var(--vh-brand-blue); }
.w-feature-list b { display: block; font-size: var(--w-fs-sm); font-weight: 700; letter-spacing: -0.01em; }
.w-feature-list span { display: block; font-size: 0.9rem; color: var(--vh-fg-secondary); margin-top: 2px; line-height: 1.45; }
.w-feature-actions { margin-top: 28px; }
.w-feature-link { display: inline-flex; align-items: center; gap: 7px; font-size: var(--w-fs-sm); font-weight: 600; color: var(--vh-brand-blue); }
.w-feature-link:hover { gap: 11px; }

/* ── Settori (tipo attività) ──────────────────────────── */
.w-sector {
  position: relative; overflow: hidden;
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border);
  border-radius: var(--vh-r-lg); padding: 24px;
  transition: var(--vh-trans-interactive), transform var(--vh-dur-fast);
  display: flex; flex-direction: column; gap: 12px; min-height: 168px;
}
.w-sector:hover { transform: translateY(-2px); box-shadow: var(--vh-shadow-md); border-color: var(--vh-border-strong); }
.w-sector-ic { width: 44px; height: 44px; border-radius: var(--vh-r-md); display: grid; place-items: center; font-size: 1.3rem; background: var(--vh-bg-base); color: var(--vh-brand-blue); }
.w-sector h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.w-sector p { margin: 0; font-size: 0.9rem; color: var(--vh-fg-secondary); line-height: 1.5; }
.w-sector .w-sector-go { margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--vh-brand-blue); display: inline-flex; align-items: center; gap: 6px; }

/* ── Perché VIGILO ────────────────────────────────────── */
.w-reason { display: flex; gap: 16px; align-items: flex-start; }
.w-reason-ic { width: 44px; height: 44px; border-radius: var(--vh-r-md); flex: none; display: grid; place-items: center; font-size: 1.25rem; background: var(--vh-brand-blue-tint); color: var(--vh-brand-blue); }
.w-reason h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 6px; }
.w-reason p { margin: 0; font-size: 0.92rem; color: var(--vh-fg-secondary); line-height: 1.5; }

/* ── Come funziona (3 passi) ──────────────────────────── */
.w-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-gutter); counter-reset: step; }
.w-step { position: relative; padding: 28px; border-radius: var(--vh-r-lg); background: var(--vh-bg-surface); border: 1px solid var(--vh-border); }
.w-step-n { width: 38px; height: 38px; border-radius: 50%; background: var(--vh-brand-blue); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 1.05rem; margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.w-step h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.w-step p { margin: 0; font-size: var(--w-fs-sm); color: var(--vh-fg-secondary); line-height: 1.55; }

/* ── CTA / Demo ───────────────────────────────────────── */
.w-cta { position: relative; overflow: hidden; border-radius: var(--vh-r-xl); background: #0F172A; color: #fff; padding: clamp(36px, 5vw, 64px); }
.w-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(540px 360px at 12% 0%, rgba(59,130,246,0.30), transparent 65%), radial-gradient(480px 360px at 100% 100%, rgba(96,165,250,0.16), transparent 60%); }
.w-cta-grid { position: relative; display: grid; grid-template-columns: 1fr 460px; gap: clamp(32px, 5vw, 64px); align-items: center; }
.w-cta h2 { font-size: var(--w-fs-h2); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
.w-cta p { font-size: var(--w-fs-lead); color: #CBD5E1; margin: 18px 0 0; }
.w-cta-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.w-cta-list li { display: flex; gap: 11px; align-items: center; font-size: var(--w-fs-sm); color: #E2E8F0; }
.w-cta-list i { color: #4ADE80; }

.w-form { background: var(--vh-bg-surface); color: var(--vh-fg-primary); border-radius: var(--vh-r-lg); padding: 28px; box-shadow: var(--vh-shadow-xl); }
.w-form h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.w-form .w-form-sub { font-size: 0.9rem; color: var(--vh-fg-muted); margin: 0 0 20px; }
.w-field { margin-bottom: 14px; }
.w-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--vh-fg-secondary); margin-bottom: 6px; }
.w-field input, .w-field select {
  width: 100%; height: 46px; padding: 0 13px;
  font-family: inherit; font-size: var(--w-fs-sm); color: var(--vh-fg-primary);
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border-strong);
  border-radius: var(--vh-r-sm); transition: var(--vh-trans-interactive);
}
.w-field input:focus, .w-field select:focus { outline: none; border-color: var(--vh-brand-blue); box-shadow: var(--vh-focus-ring); }
.w-form-note { font-size: 0.78rem; color: var(--vh-fg-muted); margin: 14px 0 0; text-align: center; }
.w-form-note a { color: var(--vh-brand-blue); }

/* ── Placeholder (dati da inserire) ───────────────────── */
.w-ph {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 600; color: var(--vh-warning-text);
  background: var(--vh-warning-bg); border: 1px dashed var(--vh-warning);
  padding: 4px 10px; border-radius: var(--vh-r-sm); letter-spacing: 0.01em;
}
.w-logorow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.w-logoslot {
  width: 132px; height: 46px; border-radius: var(--vh-r-sm);
  border: 1px dashed var(--vh-border-strong); background: var(--vh-bg-base);
  display: grid; place-items: center; font-size: 0.72rem; color: var(--vh-fg-muted);
}

/* ── Footer ───────────────────────────────────────────── */
.w-foot { background: #0F172A; color: #94A3B8; padding-block: 56px 32px; }
.w-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.w-foot-brand .w-wordmark { color: #fff; }
.w-foot-brand p { font-size: 0.9rem; color: #64748B; margin: 16px 0 0; max-width: 280px; line-height: 1.5; }
.w-foot h4 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #E2E8F0; margin: 0 0 16px; }
.w-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.w-foot a { font-size: 0.9rem; color: #94A3B8; transition: color var(--vh-dur-fast); }
.w-foot a:hover { color: #fff; }
.w-foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid #1E293B; font-size: 0.82rem; color: #64748B; }
.w-foot-legal { margin: 16px 0 0; font-size: 0.76rem; line-height: 1.7; color: #64748B; max-width: 380px; }
.w-foot-legal b { color: #94A3B8; font-weight: 700; }
.w-foot-legal a { color: #94A3B8; }
.w-foot-legal a:hover { color: #fff; }
.w-foot-legal .mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.w-foot-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.w-foot-badge { font-size: 0.72rem; color: #94A3B8; border: 1px solid #1E293B; border-radius: var(--vh-r-sm); padding: 5px 10px; }

/* ── V-grid mark ──────────────────────────────────────── */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 13%; width: 100%; height: 100%; }
.vgrid i { border-radius: 22%; }

/* ── Reveal-on-scroll ─────────────────────────────────── */
.w-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--vh-ease-ent), transform 0.5s var(--vh-ease-ent); }
.w-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .w-reveal { opacity: 1; transform: none; transition: none; } }

/* ── Mock content (product screenshots in CSS) ────────── */
.mk { font-size: 12px; color: var(--vh-fg-primary); }
.mk-pad { padding: 14px; }
.mk-row { display: flex; align-items: center; }
.mk-spacer { flex: 1; }
.mk-soft { color: var(--vh-fg-muted); }
.mk-tnum { font-variant-numeric: tabular-nums; }

/* shift planner mock */
.mk-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--vh-border); background: var(--vh-bg-surface); }
.mk-pill { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: var(--vh-r-sm); border: 1px solid var(--vh-border); color: var(--vh-fg-secondary); background: var(--vh-bg-surface); display: inline-flex; align-items: center; gap: 5px; }
.mk-pill.is-pub { background: var(--vh-success); color: #fff; border-color: transparent; }
.mk-pill.is-danger { color: var(--vh-danger-text); border-color: var(--vh-danger); background: var(--vh-danger-bg); }
.mk-grid-head, .mk-grid-row { display: grid; grid-template-columns: 128px repeat(5, 1fr); }
.mk-grid-head > div { padding: 8px 8px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vh-fg-muted); border-bottom: 1px solid var(--vh-border); text-align: center; }
.mk-grid-head > div:first-child { text-align: left; }
.mk-grid-row > div { padding: 9px 8px; border-bottom: 1px solid var(--vh-border-light); min-height: 46px; }
.mk-emp { display: flex; align-items: center; gap: 8px; }
.mk-av { width: 26px; height: 26px; border-radius: 7px; background: var(--vh-brand-blue); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.mk-emp b { font-size: 11.5px; font-weight: 600; }
.mk-emp span { font-size: 10px; color: var(--vh-fg-muted); }
.mk-shift { font-size: 10.5px; font-weight: 600; padding: 5px 7px; border-radius: 6px; text-align: center; }
.mk-shift.am { background: var(--vh-bg-base); border: 1px solid var(--vh-border); color: var(--vh-fg-primary); }
.mk-shift.pm { background: var(--vh-brand-blue-tint); border: 1px solid rgba(59,130,246,0.35); color: var(--vh-brand-blue-dark); }
.mk-dash { color: var(--vh-border-strong); text-align: center; font-size: 13px; }

/* stock mock */
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.mk-kpi { border: 1px solid var(--vh-border); border-radius: var(--vh-r-md); padding: 12px; }
.mk-kpi .l { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vh-fg-muted); }
.mk-kpi .v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.mk-kpi .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; float: right; }
.mk-table { width: 100%; border-collapse: collapse; }
.mk-table th { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vh-fg-muted); text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--vh-border); }
.mk-table td { font-size: 11px; padding: 9px 14px; border-bottom: 1px solid var(--vh-border-light); font-variant-numeric: tabular-nums; }
.mk-table td.num { text-align: right; }
.mk-badge { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--vh-r-pill); }
.mk-badge.ok { background: var(--vh-success-bg); color: var(--vh-success-text); }
.mk-badge.warn { background: var(--vh-warning-bg); color: var(--vh-warning-text); }
.mk-badge.crit { background: var(--vh-danger-bg); color: var(--vh-danger-text); }
.mk-leftacc { box-shadow: inset 3px 0 0 var(--vh-warning); }
.mk-leftacc.crit { box-shadow: inset 3px 0 0 var(--vh-danger); }
.mk-leftacc.ok { box-shadow: inset 3px 0 0 var(--vh-success); }

/* responsive */
@media (max-width: 980px) {
  .w-hero-grid { grid-template-columns: 1fr; }
  .w-hero-mock { margin-top: 8px; }
  .w-feature, .w-cta-grid { grid-template-columns: 1fr; }
  .w-feature.is-reverse .w-feature-media { order: 0; }
  .w-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .w-foot-grid { grid-template-columns: 1fr 1fr; }
  .w-foot-brand { grid-column: 1 / -1; }
  .w-cta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .w-nav-links { display: none; }
  .w-nav-burger { display: inline-grid; }
  .w-grid-2, .w-grid-3, .w-grid-4 { grid-template-columns: 1fr; }
  .w-prepost { grid-template-columns: 1fr; }
  .w-pp-arrow span { transform: rotate(90deg); }
  .w-steps { grid-template-columns: 1fr; }
  .w-nav-cta .w-nav-login { display: none; }
}

/* ══════════════════════════════════════════════════════════
   MODULE PAGES (livello 1 — discorsive, per modulo)
   Accento per modulo via --m-accent / --m-accent-soft inline.
   ══════════════════════════════════════════════════════════ */

/* breadcrumb */
.w-crumb { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--vh-fg-muted); margin-bottom: 22px; }
.w-crumb a { color: var(--vh-fg-muted); }
.w-crumb a:hover { color: var(--vh-fg-primary); }
.w-crumb i { font-size: 0.7rem; }

/* module hero */
.w-mhero { position: relative; overflow: hidden; }
.w-mhero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at 8% -10%, var(--m-accent-soft, rgba(59,130,246,0.10)), transparent 70%);
}
.w-mhero-inner { position: relative; max-width: var(--w-maxw); margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--w-gutter) clamp(40px, 5vw, 64px); }
.w-mhero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.w-mbadge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 8px 16px 8px 9px; border-radius: var(--vh-r-pill);
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border);
  margin-bottom: 20px; box-shadow: var(--vh-shadow-xs);
}
.w-mbadge .mb-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 1.05rem; background: var(--m-accent, var(--vh-brand-blue)); }
.w-mbadge .mb-name { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; }
.w-mbadge .mb-sub { font-size: 0.98rem; font-weight: 500; color: var(--vh-fg-muted); }
.w-mhero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
.w-mhero h1 em { font-style: normal; color: var(--m-accent, var(--vh-brand-blue)); }
.w-mhero-sub { font-size: var(--w-fs-lead); color: var(--vh-fg-secondary); margin: 20px 0 0; max-width: 540px; text-wrap: pretty; }
.w-mhero-actions { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.w-btn-accent { background: var(--m-accent, var(--vh-brand-blue)); color: #fff; box-shadow: var(--vh-shadow-sm); }
.w-btn-accent:hover { filter: brightness(0.94); box-shadow: var(--vh-shadow-md); }
.w-btn-accent:active { transform: translateY(1px); }
.w-link-accent { color: var(--m-accent, var(--vh-brand-blue)); }

/* benefit strip under hero */
.w-mstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-gutter); margin-top: 8px; }
.w-mstrip .ms { display: flex; gap: 12px; align-items: flex-start; }
.w-mstrip .ms-ic { width: 38px; height: 38px; border-radius: var(--vh-r-md); flex: none; display: grid; place-items: center; font-size: 1.1rem; background: var(--m-accent-soft, var(--vh-brand-blue-tint)); color: var(--m-accent, var(--vh-brand-blue)); }
.w-mstrip .ms b { display: block; font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; }
.w-mstrip .ms span { display: block; font-size: 0.88rem; color: var(--vh-fg-secondary); margin-top: 2px; line-height: 1.45; }

/* feature list accent override on module pages */
.w-feature.is-acc .fl-ic { background: var(--m-accent-soft); color: var(--m-accent); }
.w-feature.is-acc .w-feature-link { color: var(--m-accent); }

/* quote / closing line */
.w-quote { text-align: center; max-width: 820px; margin: 0 auto; }
.w-quote p { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--vh-fg-primary); margin: 0; text-wrap: balance; }
.w-quote .w-accent { color: var(--m-accent, var(--vh-brand-blue)); }

/* related modules */
.w-relcard { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--vh-border); border-radius: var(--vh-r-lg); background: var(--vh-bg-surface); transition: var(--vh-trans-interactive), transform var(--vh-dur-fast); }
.w-relcard:hover { transform: translateY(-2px); box-shadow: var(--vh-shadow-md); border-color: var(--vh-border-strong); }
.w-relcard .rc-ic { width: 40px; height: 40px; border-radius: var(--vh-r-md); flex: none; display: grid; place-items: center; color: #fff; font-size: 1.15rem; }
.w-relcard b { display: block; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; }
.w-relcard span { display: block; font-size: 0.84rem; color: var(--vh-fg-muted); margin-top: 1px; }
.w-relcard .rc-go { margin-left: auto; color: var(--vh-fg-muted); }

/* ── Moduli index page ── */
.w-modgroup { margin-top: 52px; }
.w-modgroup-head { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.w-modgroup-ic { width: 44px; height: 44px; border-radius: var(--vh-r-md); display: grid; place-items: center; font-size: 1.25rem; flex: none; }
.w-modgroup-head h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.w-modgroup-head p { font-size: 0.92rem; color: var(--vh-fg-muted); margin: 3px 0 0; }
.w-modcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border);
  border-radius: var(--vh-r-lg); padding: 0;
  transition: var(--vh-trans-interactive), transform var(--vh-dur-fast);
}
.w-modcard:hover { transform: translateY(-3px); box-shadow: var(--vh-shadow-md); }
.w-modcard-top { height: 3px; }
.w-modcard-body { padding: 22px; display: flex; flex-direction: column; height: 100%; }
.w-modcard-ic { width: 46px; height: 46px; border-radius: var(--vh-r-md); display: grid; place-items: center; font-size: 1.3rem; color: #fff; margin-bottom: 16px; }
.w-modcard .mc-name { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.w-modcard .mc-sub { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vh-fg-muted); margin: 3px 0 12px; }
.w-modcard p { margin: 0 0 16px; font-size: 0.92rem; color: var(--vh-fg-secondary); line-height: 1.5; }
.w-modcard .mc-go { margin-top: auto; font-size: 0.86rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.w-modcard .mc-go:hover { gap: 11px; }
.w-modcard.is-soon { opacity: 0.92; }
.w-soon { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vh-fg-muted); border: 1px solid var(--vh-border-strong); border-radius: var(--vh-r-pill); padding: 2px 8px; }

/* ── Phone / app mock ── */
.mk-phone { width: 230px; margin: 0 auto; border-radius: 26px; border: 1px solid var(--vh-border); background: #0F172A; padding: 9px; box-shadow: var(--vh-shadow-xl); }
.mk-phone-screen { border-radius: 18px; overflow: hidden; background: var(--vh-bg-surface); }
.mk-phone-top { height: 30px; background: var(--m-accent, var(--vh-brand-blue)); display: flex; align-items: center; padding: 0 13px; gap: 8px; }
.mk-phone-top .pt-dot { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,0.25); }
.mk-phone-top .pt-tx { color: #fff; font-size: 11px; font-weight: 700; }
.mk-phone-body { padding: 12px; }
.mk-appcard { border: 1px solid var(--vh-border); border-radius: 10px; padding: 11px; margin-bottom: 9px; }
.mk-appcard .ac-row { display: flex; align-items: center; justify-content: space-between; }
.mk-appcard .ac-day { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vh-fg-muted); }
.mk-appcard .ac-time { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mk-appcard .ac-role { font-size: 10px; color: var(--vh-fg-muted); }
.mk-appbtn { height: 32px; border-radius: 8px; background: var(--m-accent, var(--vh-brand-blue)); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; margin-top: 4px; }

@media (max-width: 980px) {
  .w-mhero-grid { grid-template-columns: 1fr; }
  .w-mstrip { grid-template-columns: 1fr; gap: 16px; }
}

/* ══════════════════════════════════════════════════════════
   TUTTO CONNESSO — diagramma collegamenti + storie
   ══════════════════════════════════════════════════════════ */

/* "un dato, una volta sola" hub */
.w-hub { --hub-gap: 22px; max-width: 860px; margin: 0 auto; }
.w-hub-core {
  width: max-content; max-width: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: 13px;
  padding: 13px 22px 13px 13px; border-radius: var(--vh-r-pill);
  background: #0F172A; color: #fff; border: 1px solid #1E293B;
  box-shadow: var(--vh-shadow-md); position: relative;
}
.w-hub-core .hc-mark { width: 32px; height: 32px; flex: none; }
.w-hub-core .hc-txt { text-align: left; }
.w-hub-core b { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.w-hub-core small { display: block; font-size: 0.74rem; color: #94A3B8; margin-top: 2px; }
.w-hub-core::after { content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--hub-gap)); width: 2px; height: var(--hub-gap); background: var(--vh-border-strong); transform: translateX(-50%); }
.w-hub-ring {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: calc(var(--hub-gap) * 2);
}
.w-hub-ring::before { content: ""; position: absolute; top: calc(-1 * var(--hub-gap)); left: calc((100% - 42px) / 8); right: calc((100% - 42px) / 8); height: 2px; background: var(--vh-border-strong); }
.w-hub-node {
  position: relative; display: flex; gap: 11px; align-items: center; padding: 16px;
  border-radius: var(--vh-r-lg); border: 1px solid var(--vh-border); background: var(--vh-bg-surface);
  box-shadow: var(--vh-shadow-xs); transition: var(--vh-trans-interactive), transform var(--vh-dur-fast);
}
.w-hub-node:hover { transform: translateY(-2px); box-shadow: var(--vh-shadow-sm); }
.w-hub-node::before { content: ""; position: absolute; top: calc(-1 * var(--hub-gap)); left: 50%; width: 2px; height: var(--hub-gap); background: var(--vh-border-strong); transform: translateX(-50%); }
.w-hub-node .hn-ic { width: 36px; height: 36px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-size: 1.05rem; }
.w-hub-node b { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; }
.w-hub-node > span:last-child span { display: block; font-size: 0.74rem; color: var(--vh-fg-muted); margin-top: 1px; }

/* story of connection */
.w-story { background: var(--vh-bg-surface); border: 1px solid var(--vh-border); border-radius: var(--vh-r-xl); padding: 28px; height: 100%; display: flex; flex-direction: column; }
.w-story-problem { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 20px; }
.w-story-problem .sp-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--vh-danger-bg); color: var(--vh-danger); font-size: 1rem; }
.w-story-problem b { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

/* flow chain */
.w-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.w-flow-step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--vh-r-pill); border: 1px solid var(--vh-border); background: var(--vh-bg-base); font-size: 0.82rem; font-weight: 600; }
.w-flow-step .fs-dot { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-size: 0.6rem; flex: none; }
.w-flow-step small { display: block; font-weight: 500; color: var(--vh-fg-muted); font-size: 0.72rem; }
.w-flow-arrow { color: var(--vh-fg-muted); font-size: 0.9rem; }
.w-story-result { margin-top: auto; padding-top: 20px; display: flex; gap: 11px; align-items: flex-start; border-top: 1px solid var(--vh-border-light); }
.w-story-result .sr-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--vh-success-bg); color: var(--vh-success); font-size: 1rem; }
.w-story-result span { font-size: 0.92rem; color: var(--vh-fg-secondary); line-height: 1.45; }
.w-story-result b { color: var(--vh-fg-primary); font-weight: 700; }

/* "lavora insieme a" on module pages */
.w-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-gutter); }
.w-workcard { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--vh-border); border-radius: var(--vh-r-lg); background: var(--vh-bg-surface); transition: var(--vh-trans-interactive), transform var(--vh-dur-fast); }
.w-workcard:hover { transform: translateY(-2px); box-shadow: var(--vh-shadow-md); }
.w-workcard-head { display: flex; align-items: center; gap: 10px; }
.w-workcard-ic { width: 36px; height: 36px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-size: 1.05rem; }
.w-workcard-head b { font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; }
.w-workcard-head small { display: block; font-size: 0.72rem; color: var(--vh-fg-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.w-workcard p { margin: 0; font-size: 0.9rem; color: var(--vh-fg-secondary); line-height: 1.5; }
.w-workcard .wc-link { font-size: 0.78rem; font-weight: 600; color: var(--vh-brand-blue); }

@media (max-width: 980px) {
  .w-hub-ring { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .w-hub-ring::before, .w-hub-node::before, .w-hub-core::after { display: none; }
  .w-works { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .w-hub-ring { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   MODULE MODAL (moduli senza pagina dedicata)
   ══════════════════════════════════════════════════════════ */
.w-modal-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.w-modal-overlay[hidden] { display: none; }
.w-modal { background: var(--vh-bg-surface); border-radius: var(--vh-r-lg); max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--vh-shadow-xl); position: relative; animation: wModalIn 0.25s var(--vh-ease-ent); }
@keyframes wModalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .w-modal { animation: none; } }
.w-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--vh-border); background: var(--vh-bg-surface); color: var(--vh-fg-secondary); font-size: 1.4rem; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: var(--vh-trans-interactive); z-index: 2; }
.w-modal-close:hover { background: var(--vh-bg-hover); color: var(--vh-fg-primary); }
.w-modal-head { display: flex; align-items: center; gap: 14px; padding: 26px 56px 18px 26px; border-bottom: 1px solid var(--vh-border-light); }
.w-modal-ic { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.5rem; flex: none; background: var(--m-accent, var(--vh-brand-blue)); }
.w-modal-head h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.w-modal-sub { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vh-fg-muted); margin-top: 3px; }
.w-modal-body { padding: 22px 26px; }
.w-modal-body > p { margin: 0 0 22px; font-size: 1.02rem; color: var(--vh-fg-secondary); line-height: 1.55; }
.w-modal-sec { margin-bottom: 22px; }
.w-modal-sec:last-child { margin-bottom: 0; }
.w-modal-sec h4 { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vh-fg-muted); margin: 0 0 12px; }
.w-modal-sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.w-modal-sec li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.95rem; color: var(--vh-fg-secondary); line-height: 1.45; }
.w-modal-sec li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m-accent, var(--vh-brand-blue)); margin-top: 7px; flex: none; }
.w-modal-sec > p { margin: 0; font-size: 0.95rem; color: var(--vh-fg-secondary); line-height: 1.5; }
.w-modal-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.w-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 26px; border-top: 1px solid var(--vh-border-light); background: var(--vh-bg-base); position: sticky; bottom: 0; }
.w-modcard { cursor: pointer; }

/* ══════════════════════════════════════════════════════════
   LIVE DEMO (app reale incorporata, autoplay + hover-zoom)
   ══════════════════════════════════════════════════════════ */
.w-demo { max-width: 1000px; margin: 0 auto; }
.w-demo-frame { border: 1px solid var(--vh-border); border-radius: var(--vh-r-lg); overflow: hidden; box-shadow: var(--vh-shadow-xl); background: var(--vh-bg-surface); transition: transform 0.35s var(--vh-ease-ent), box-shadow 0.35s var(--vh-ease-ent); transform-origin: center top; }
.w-demo-frame:hover { transform: scale(1.05); box-shadow: 0 34px 80px rgba(15,23,42,0.22); }
.w-demo-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--vh-bg-base); border-bottom: 1px solid var(--vh-border); }
.w-demo-rec { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 700; color: var(--vh-danger); margin-left: auto; text-transform: uppercase; letter-spacing: 0.05em; }
.w-demo-rec .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vh-danger); animation: demoPulse 1.4s infinite; }
@keyframes demoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.w-demo-stage { position: relative; width: 100%; aspect-ratio: 924 / 540; background: #F8FAFC; overflow: hidden; }
.w-demo-stage iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 812px; border: 0; transform-origin: top left; }
.w-demo-ctrls { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.w-demo-play { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--vh-r-sm); border: 1px solid var(--vh-border-strong); background: var(--vh-bg-surface); font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: inherit; color: var(--vh-fg-primary); transition: var(--vh-trans-interactive); }
.w-demo-play:hover { background: var(--vh-bg-hover); }
.w-demo-steps { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.w-demo-step { font-size: 0.8rem; font-weight: 600; color: var(--vh-fg-secondary); background: var(--vh-bg-surface); border: 1px solid var(--vh-border); padding: 7px 13px; border-radius: var(--vh-r-pill); cursor: pointer; transition: var(--vh-trans-interactive); }
.w-demo-step:hover { border-color: var(--vh-border-strong); color: var(--vh-fg-primary); }
.w-demo-step.is-active { color: #fff; background: #0E9F6E; border-color: transparent; }
.w-demo-hint { text-align: center; font-size: 0.84rem; color: var(--vh-fg-muted); margin-top: 14px; }
.w-demo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; }
.w-demo-img.is-on { opacity: 1; transition: opacity 0.6s var(--vh-ease-ent); animation: demoKen 7s ease-out forwards; }
@keyframes demoKen { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .w-demo-img.is-on { animation: none; } }

/* ══════════════════════════════════════════════════════════
   PHONE SHOWCASE (screenshot reali app VIGILO People)
   Le immagini hanno già il device + sfondo navy #0F172A: su un
   pannello navy il telefono "galleggia" senza tagli.
   ══════════════════════════════════════════════════════════ */
.w-phonewrap {
  background: #0F172A; border: 1px solid #1E293B;
  border-radius: 26px; padding: clamp(20px, 3vw, 36px);
  display: flex; gap: clamp(14px, 2vw, 28px); align-items: flex-start;
  justify-content: center; box-shadow: var(--vh-shadow-xl);
  position: relative; overflow: hidden;
}
.w-phonewrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 300px at 18% -10%, rgba(59,130,246,0.18), transparent 70%),
    radial-gradient(420px 280px at 100% 110%, rgba(96,165,250,0.10), transparent 65%);
}
.w-phonewrap img { position: relative; width: 100%; max-width: 226px; height: auto; display: block; }
.w-phonewrap.is-duo img { max-width: 200px; }
.w-phonewrap.is-trio img { max-width: 184px; }

/* fascia scura con più telefoni in fila */
.w-phoneband { display: flex; gap: clamp(16px, 3vw, 40px); justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.w-phoneband figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 220px; }
.w-phoneband img { width: 100%; max-width: 210px; height: auto; display: block; filter: drop-shadow(0 22px 38px rgba(0,0,0,0.45)); }
.w-phoneband figcaption { font-size: 0.86rem; color: #94A3B8; text-align: center; line-height: 1.4; }
.w-phoneband figcaption b { color: #E2E8F0; font-weight: 600; display: block; font-size: 0.95rem; }

/* singolo telefono "eroe" nei feature (su sfondo chiaro: tile navy) */
.w-phonehero { max-width: 300px; margin: 0 auto; }

@media (max-width: 760px) {
  .w-phonewrap { flex-wrap: wrap; }
  .w-phonewrap.is-trio img { max-width: 150px; }
}

/* ══════════════════════════════════════════════════════════
   DEMO INTERATTIVA — prototipo app embeddato (iframe)
   Pannello chiaro con il telefono "vivo" + sfide cliccabili.
   ══════════════════════════════════════════════════════════ */
.w-demogrid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 60px); align-items: center; }

.w-livebadge { display: inline-flex; align-items: center; gap: 9px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--m-accent, var(--vh-brand-blue)); margin-bottom: 16px; }
.w-livebadge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.w-livebadge .dot { animation: vhLiveDot 1.8s ease-out infinite; }
@keyframes vhLiveDot { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.w-demostage {
  position: relative; border-radius: var(--vh-r-xl); overflow: hidden;
  border: 1px solid var(--vh-border); box-shadow: var(--vh-shadow-md);
  background:
    radial-gradient(460px 340px at 50% 12%, rgba(37,99,235,0.12), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 100%);
  padding: clamp(14px, 2vw, 24px);
  height: clamp(560px, 74vh, 768px);
}
.w-demostage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: radial-gradient(rgba(15,23,42,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 38%, #000, transparent 78%);
          mask-image: radial-gradient(72% 62% at 50% 38%, #000, transparent 78%);
}
.w-demo-iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.w-demostage.is-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  animation: vhDemoPulse 0.75s var(--vh-ease, ease-out) 1;
}
@keyframes vhDemoPulse { from { box-shadow: 0 0 0 3px rgba(37,99,235,0.5) inset; } to { box-shadow: 0 0 0 0 rgba(37,99,235,0) inset; } }

.w-trylist { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.w-trychip {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border); border-radius: var(--vh-r-lg);
  padding: 13px 16px; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}
.w-trychip:hover { border-color: var(--m-accent, var(--vh-brand-blue)); box-shadow: var(--vh-shadow-md); transform: translateY(-1px); }
.w-trychip.is-active { border-color: var(--m-accent, var(--vh-brand-blue)); background: var(--m-accent-soft, rgba(37,99,235,0.08)); }
.w-trychip-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--vh-r-md); display: grid; place-items: center; font-size: 1.15rem; background: var(--m-accent-soft, rgba(37,99,235,0.12)); color: var(--m-accent, var(--vh-brand-blue)); }
.w-trychip-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w-trychip-tx b { font-size: 0.96rem; font-weight: 700; color: var(--vh-fg-primary); letter-spacing: -0.01em; }
.w-trychip-tx span { font-size: 0.84rem; color: var(--vh-fg-secondary); line-height: 1.4; }
.w-trychip-go { margin-left: auto; flex: 0 0 auto; color: var(--vh-fg-muted); transition: color .15s, transform .15s; }
.w-trychip:hover .w-trychip-go, .w-trychip.is-active .w-trychip-go { color: var(--m-accent, var(--vh-brand-blue)); transform: translateX(2px); }

.w-demohint { margin-top: 18px; font-size: 0.82rem; color: var(--vh-fg-muted); display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.w-demohint i { color: var(--m-accent, var(--vh-brand-blue)); }

@media (max-width: 900px) {
  .w-demogrid { grid-template-columns: 1fr; }
  .w-demostage { height: 660px; order: -1; }
}
@media (max-width: 480px) {
  .w-demostage { height: 600px; padding: 8px; }
}

/* ── Demo desktop — cornice finestra browser (Shift / Stock) ── */
.w-deskhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.w-deskhead .w-section-head { margin: 0; max-width: 640px; }

.w-tryrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.w-tryrow .w-trychip { align-items: flex-start; }
.w-tryrow .w-trychip-go { align-self: center; }
@media (max-width: 900px) { .w-tryrow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .w-tryrow { grid-template-columns: 1fr; } }

.w-deskframe {
  position: relative; border-radius: var(--vh-r-lg); overflow: hidden;
  border: 1px solid var(--vh-border); box-shadow: var(--vh-shadow-lg); background: #fff;
}
.w-deskbar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; background: #F1F5F9; border-bottom: 1px solid var(--vh-border); }
.w-deskdots { display: flex; gap: 7px; flex: 0 0 auto; }
.w-deskdots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.w-deskurl {
  flex: 1 1 auto; max-width: 440px; height: 28px; display: flex; align-items: center; gap: 8px;
  padding: 0 13px; border-radius: var(--vh-r-pill); background: #fff; border: 1px solid var(--vh-border);
  font-size: 0.78rem; color: var(--vh-fg-muted);
}
.w-deskurl i { color: var(--vh-success, #16A34A); font-size: 0.8rem; }
.w-deskurl .mono { font-family: var(--vh-font-mono, ui-monospace, monospace); color: var(--vh-fg-secondary); }
.w-deskbadge { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; color: var(--m-accent, var(--vh-brand-blue)); }
.w-deskbadge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; animation: vhLiveDot 1.8s ease-out infinite; }
.w-deskframe iframe { display: block; width: 100%; height: clamp(540px, 72vh, 768px); border: 0; background: #F8FAFC; }
.w-deskframe.is-pulse::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; animation: vhDemoPulse 0.75s var(--vh-ease, ease-out) 1; }
@media (max-width: 760px) { .w-deskbadge { display: none; } }

/* ══════════════════════════════════════════════════════════
   BRIDGE — collegamento a casse / POS / gestionali esterni
   (riusato in Home #casse e in Tutto connesso)
   ══════════════════════════════════════════════════════════ */
.w-bridge { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto minmax(0,1.05fr); align-items: stretch; gap: clamp(12px, 1.6vw, 24px); }
.w-bridge-panel {
  background: var(--vh-bg-surface); border: 1px solid var(--vh-border);
  border-radius: var(--vh-r-xl); padding: clamp(18px, 2.2vw, 26px);
  display: flex; flex-direction: column;
}
.w-bridge-panel.is-core {
  background: #0F172A; border-color: #0F172A; color: #fff;
  justify-content: center; align-items: center; text-align: center; gap: 14px;
}
.w-bridge-tag { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.w-bridge-tag .bt-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #fff; font-size: 1rem; }
.w-bridge-tag b { font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; }
.w-bridge-tag small { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vh-fg-muted); margin-top: 1px; }
.w-bridge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.w-bridge-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--vh-fg-secondary); line-height: 1.4; }
.w-bridge-list li i { color: var(--vh-brand-blue); font-size: 0.95rem; margin-top: 2px; flex: none; }
.w-bridge-list.is-out li i { color: var(--vh-success); }
.w-bridge-list li b { color: var(--vh-fg-primary); font-weight: 600; }
.w-bridge-arrow { display: grid; place-items: center; color: var(--vh-fg-muted); font-size: 1.25rem; }
.w-bridge-core-mark { width: 44px; height: 44px; }
.w-bridge-panel.is-core .bc-name { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; }
.w-bridge-panel.is-core .bc-sub { font-size: 0.84rem; color: #94A3B8; line-height: 1.45; max-width: 220px; }
.w-bridge-panel.is-core .bc-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; color: #4ADE80; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.28); padding: 5px 11px; border-radius: var(--vh-r-pill); }
.w-bridge-panel.is-core .bc-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; animation: vhLiveDot 1.8s ease-out infinite; }

@media (max-width: 860px) {
  .w-bridge { grid-template-columns: 1fr; }
  .w-bridge-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* punti "su misura / rapido / sinergia" sotto il ponte */
.w-bridge-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-gutter); margin-top: clamp(24px, 3vw, 40px); }
.w-bridge-feat { display: flex; flex-direction: column; gap: 9px; padding: 22px; border: 1px solid var(--vh-border); border-radius: var(--vh-r-lg); background: var(--vh-bg-surface); }
.w-bridge-feat .bf-ic { width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-size: 1.05rem; background: var(--vh-brand-blue); }
.w-bridge-feat b { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.w-bridge-feat p { margin: 0; font-size: 0.9rem; color: var(--vh-fg-secondary); line-height: 1.5; }
@media (max-width: 860px) { .w-bridge-feats { grid-template-columns: 1fr; } }