/* ════════════════════════════════════════════════════════════
   B4b Executive Theme — main.css
   Design System + Full Layout
════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES
───────────────────────────────────────────────────────────── */
:root {
  /* ════════════════════════════════════════════════════
     FINSTYLE — Sistema di Stile Sintetico
     Derivato da FinecoBank + Segugio.it
     Blu istituzionale + Verde CTA conversione
     Nessun arancio — troppo consumer per servizi B2B
  ════════════════════════════════════════════════════ */

  /* ── PRIMARIO — Verde Petrolio ───────────────────── */
  --primary:         #0F8060;
  --primary-dark:    #0A5C45;
  --primary-darker:  #07332F;
  --primary-mid:     #7FC0A8;
  --primary-light:   #7FC0A8;
  --primary-soft:    #E6F4EE;

  /* ── CTA — Arancio conversione ───────────────────── */
  --accent:          #F39422;
  --accent-dark:     #D47817;
  --accent-darker:   #B26012;
  --accent-mid:      #F8B15A;
  --accent-soft:     #FEF3E4;

  /* ── ALIAS LEGACY ────────────────────────────────── */
  --amber:           var(--accent);
  --amber-dark:      var(--accent-dark);
  --amber-darker:    var(--accent-darker);
  --teal:            var(--primary);

  /* ── NAVY / DARK ────────────────────────────────── */
  --navy:            #1D3D6B;
  --navy-dark:       #0F2647;
  --navy-darker:     #081E37;
  --navy-light:      #6B86AA;
  --navy-soft:       rgba(29, 61, 107, 0.08);

  /* ── SUPERFICI ──────────────────────────────────── */
  --bg-main:         #FFFFFF;
  --bg-white:        #FFFFFF;
  --bg-section:      #F5F7FA;
  --bg-section-alt:  #F5F7FA;
  --bg-off:          #F5F7FA;
  --bg-dark:         #0F2647;
  --bg-footer:       #1D3D6B;
  --bg-copyright:    #0F2647;
  --fog:             #EDEFF2;
  --fog-dark:        #D4D9E0;
  --surface:         #FFFFFF;
  --surface-2:       #F5F7FA;

  /* ── TESTI ──────────────────────────────────────── */
  --text-primary:    #3D4754;
  --text-secondary:  #7A8594;
  --text-tertiary:   #9AA5B3;
  --text-muted:      #7A8594;
  --text-light:      #B7C0CC;
  --text-legal:      #99A3B3;

  /* ── BORDI ──────────────────────────────────────── */
  --border:          #E2E8EF;   /* FINSTYLE: più neutro */
  --border-strong:   #C5CFE0;
  --border-soft:     #F5F7FA;

  /* ── STATO ──────────────────────────────────────── */
  --success:         var(--primary);
  --error:           #E02020;
  --warning:         var(--accent);
  --info:            var(--primary);

  /* ── TIPOGRAFIA — FINSTYLE ──────────────────────── */
  --font-display:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ── RAGGI — FINSTYLE ───────────────────────────── */
  --radius-xs:       4px;
  --radius-sm:       8px;
  --radius:          8px;
  --radius-md:       12px;
  --radius-lg:       20px;
  --radius-xl:       24px;
  --radius-full:     9999px;
  --radius-pill:     9999px;
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  /* ── OMBRE — FINSTYLE (tono neutro) ────────────── */
  --shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.07);
  --shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:         0 24px 48px rgba(0, 0, 0, 0.14);
  --card-bg:            #F2F4F7;
  --shadow-card:        none;
  --shadow-card-hover:  none;
  --shadow-header:      0 1px 0 rgba(15, 23, 33, 0.07);
  --shadow-form:        0 12px 40px rgba(15, 23, 33, 0.12);
  --shadow-btn-primary: 0 2px 8px rgba(15, 128, 96, 0.25);
  --shadow-btn-accent:  0 2px 8px rgba(243, 148, 34, 0.25);

  /* ── TRANSIZIONI ────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition:      200ms ease;
  --transition-base: 0.2s ease;
  --transition-slow: 300ms ease;

  /* ── LAYOUT ─────────────────────────────────────── */
  --container-max:   1240px;   /* FINSTYLE: 1240px */
  --container-text:  720px;
  --section-py:      80px;     /* FINSTYLE: clamp(48px, 7vw, 80px) */
  --section-py-mob:  56px;

  /* ── HEADER ─────────────────────────────────────── */
  --header-h:         96px;
  --header-h-mob:     66px;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  background: none;
  border: none;
}

textarea {
  resize: vertical;
}

/* ─────────────────────────────────────────────────────────────
   SKIP LINK (Accessibilità)
───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1.5rem;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 9999;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Focus state globale WCAG — primary green ring (spec) + 2px offset */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT UTILITIES
───────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 80px;
}

@media (max-width: 1280px) {
  .container { padding: 0 40px; }
}
@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

.section {
  background: var(--bg-white);
  padding: var(--section-py) 0;
  border-top: 4px solid var(--fog-dark);
}

.section--alt {
  background-color: var(--bg-off);
}

#valore {
  background: var(--bg-white);
}

#casi-studio {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 100%),
    url('../img/Marketig funziona.webp') center / cover no-repeat;
}

.section--white {
  background-color: var(--bg-white);
}

.section--brand {
  background-color: var(--primary-soft);
  border-top-color: var(--primary);
}

.section--accent {
  background-color: var(--accent-soft);
  border-top-color: var(--accent);
}

.section--dark,
.section-dark {
  background-color: var(--navy);
  color: #FFFFFF;
}

.section--metrics {
  background: linear-gradient(160deg, #f0f4f8 0%, #e8f0fb 50%, #dbeafe 100%);
  padding: var(--section-py) 0;
}

@media (max-width: 768px) {
  .section,
  .section--alt,
  .section--white,
  .section--brand,
  .section--accent,
  .section--metrics,
  .section--dark,
  .section-dark {
    padding: var(--section-py-mob) 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY SCALE
───────────────────────────────────────────────────────────── */
/* Spec: Inter only, weights 400/500/600/700. Scale 1.25 ratio.
   h1 36/28 · h2 28/24 · h3 22/20 · h4 18/18 · body 16 · line-height body 1.6 · heading 1.2 */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.2;
  font-feature-settings: 'cv11', 'ss01';
}

h1 { font-size: 2.25rem;   letter-spacing: -0.02em; line-height: 1.2;  font-weight: 700; color: var(--primary-dark); }
h2 { font-size: 1.75rem;   letter-spacing: -0.02em; line-height: 1.2;  font-weight: 600; }
h3 { font-size: 1.375rem;  letter-spacing: -0.01em; line-height: 1.25; font-weight: 600; }
h4 { font-size: 1.125rem;  letter-spacing: 0;       line-height: 1.4;  font-weight: 600; }

p { line-height: 1.6; }

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);  /* FINSTYLE hero scale */
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);  /* FINSTYLE h2 scale */
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);  /* FINSTYLE */
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-family: var(--font-heading);
  font-size: 1.375rem;   /* h3 */
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 2.5rem;
}

.section-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: var(--container-text);
  margin: 0;
}

.section-header {
  margin-bottom: 4rem;
  max-width: var(--container-text);
}

.text-body-sm { font-size: 0.875rem; line-height: 1.6; }
.text-caption { font-size: 0.75rem; line-height: 1.4; color: var(--text-tertiary); }

@media (max-width: 1280px) {
  .display-xl { font-size: 2.75rem; }
  .display-lg { font-size: 2.25rem; }
}

@media (max-width: 768px) {
  h1 { font-size: 1.75rem; }
  h2, .section-title { font-size: 1.5rem; }
  h3, .section-subtitle { font-size: 1.25rem; }
  h4 { font-size: 1.125rem; }
  .display-xl { font-size: 2.25rem; }
  .display-lg { font-size: 2rem; }
  .section-sub { font-size: 1rem; }
  .section-header { margin-bottom: 2.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   TAGS & BADGES
───────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  line-height: 1;
}

.tag--primary {
  color: var(--primary);
  border: 1px solid var(--primary-mid);
  background: var(--primary-soft);
}

.tag--accent {
  color: var(--accent-dark);
  border: 1px solid var(--accent-mid);
  background: var(--accent-soft);
}

.tag--navy {
  color: var(--navy);
  border: 1px solid rgba(29, 61, 107, 0.12);
  background: rgba(29, 61, 107, 0.08);
}

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  line-height: 1;
}

.badge--primary { background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-mid); }
.badge--accent  { background: var(--accent-soft);  color: var(--accent-dark); border: 1px solid var(--accent-mid); }
.badge--navy    { background: rgba(29, 61, 107, 0.08); color: var(--navy); border: 1px solid rgba(29, 61, 107, 0.12); }

.card {
  background: var(--bg-white);
  border: 1px solid var(--fog-dark);
  border-radius: var(--radius-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.card--accent:hover { border-color: var(--accent); }
.card--navy:hover   { border-color: var(--navy); }

/* ─────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────── */
/* Spec button: font 15px, letter-spacing +0.01em, radius 8px. Sizes sm 32/md 40/lg 48. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn-sm { height: 32px; padding: 0 16px; font-size: 0.875rem; }
.btn-md { height: 40px; padding: 0 20px; font-size: 0.9375rem; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 0.9375rem; }

.btn svg, .btn [data-lucide] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-btn-accent);
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-btn-accent);
}
.btn-accent:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}
.btn-accent:active {
  transform: translateY(0);
}
.btn-accent:disabled { opacity: 0.5; pointer-events: none; }

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-color: var(--primary-dark);
}
.btn-outline:active {
  background: var(--primary-soft);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: none;
  border-radius: var(--radius-pill);
}
.btn-secondary:hover {
  background-color: var(--primary);
  color: #fff;
  transform: translateY(-1px);
}
.btn-secondary:active {
  background-color: var(--primary-dark);
  color: #fff;
  transform: translateY(0);
}
.btn-secondary:disabled { opacity: 0.4; pointer-events: none; }

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-ghost:hover {
  background-color: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-1px);
}
.btn-ghost:active {
  background-color: var(--primary-soft);
  color: var(--primary-darker);
  transform: translateY(0);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.btn-link:hover { color: var(--primary-dark); }
.btn-link svg, .btn-link [data-lucide] { width: 16px; height: 16px; }

/* ─────────────────────────────────────────────────────────────
   NAVBAR — spec: 96px desktop / 68px mobile, logo 77px
───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #FFFFFF;
  box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0, 0, 0, 0.05);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: box-shadow var(--transition);
}

.site-header.scrolled {
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.navbar-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.navbar-logo:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.logo-name {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.logo-title {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.navbar-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1D3D6B;
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 12px;
  right: 12px;
  width: auto;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform var(--transition-fast);
  transform-origin: left;
}

.nav-link:hover,
.nav-link.active {
  color: #1D3D6B;
  background-color: #F2F4F7;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 1.5rem;
}

.navbar-cta {
  flex-shrink: 0;
}

.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: #1D3D6B;
  border-radius: var(--radius);
  transition: background-color var(--transition-fast);
}

.hamburger:hover {
  background-color: #F2F4F7;
}

.hamburger svg, .hamburger [data-lucide] {
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .navbar-nav { display: none; }
  .navbar-cta  { display: none; }
  .hamburger   { display: flex; }
  .site-header { height: var(--header-h-mob); }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE MENU
───────────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navy-dark);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 0 24px 40px;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1999;
  opacity: 0;
  transition: opacity var(--transition);
}

.mobile-menu-overlay.open {
  display: block;
  opacity: 1;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.mobile-menu-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.8);
  border-radius: var(--radius);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-menu-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.mobile-menu-close [data-lucide] { width: 24px; height: 24px; }

.mobile-nav-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 2rem 0;
}

.mobile-nav-link {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 0.875rem 0;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color var(--transition-fast);
}

.mobile-nav-link:hover {
  color: #fff;
}

.mobile-menu-cta {
  padding-top: 2rem;
}

/* ─────────────────────────────────────────────────────────────
   HERO SECTION
───────────────────────────────────────────────────────────── */
.section-hero {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.80) 100%),
    url('../img/business.webp') center / cover no-repeat;
  padding: 96px 0 80px;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 5rem;
  align-items: center;
  min-height: 600px;
}

.hero-text {
  max-width: 620px;
}

.hero-h1 {
  font-family: var(--font-display);         /* FINSTYLE: Plus Jakarta Sans */
  font-size: clamp(2.5rem, 5vw, 3.75rem);  /* FINSTYLE: hero headline scale */
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--primary-dark);
  margin: 1.25rem 0 1.5rem;
}

.hero-sub {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 1.75rem;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.proof-sep {
  color: var(--border-strong);
  margin: 0 0.25rem;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hero-microcopy {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Dashboard stilizzata */
.hero-visual {
  width: 100%;
}

.dashboard-card {
  background: var(--bg-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); /* 20px — Segugio card pattern */
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.dashboard-title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
}

.dashboard-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--success);
  padding: 3px 8px;
  background: rgba(0,82,204,0.1);
  border-radius: var(--radius-sm);
}

.dashboard-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.dashboard-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--bg-main);
  border-radius: var(--radius);
}

.dashboard-kpi-value {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}

.dashboard-kpi-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.dashboard-chart-area {
  margin-bottom: 1.25rem;
}

.dashboard-chart-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
}

.dashboard-chart {
  width: 100%;
  height: auto;
}

.dashboard-processes {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.process-row {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  align-items: center;
  gap: 0.625rem;
}

.process-name {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.process-bar-wrap {
  height: 6px;
  background: var(--bg-section);
  border-radius: 3px;
  overflow: hidden;
}

.process-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease;
}

.process-pct {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
}

@media (max-width: 1280px) {
  .hero-inner {
    gap: 3rem;
  }
  .hero-h1 {
    font-size: 2.375rem;
  }
}

@media (max-width: 768px) {
  .section-hero {
    padding: var(--section-py-mob) 0;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    min-height: auto;
  }
  .hero-h1 {
    font-size: 1.875rem;
  }
  .hero-text {
    max-width: 100%;
  }
  .hero-proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .proof-sep { display: none; }
  .hero-cta-group {
    flex-direction: column;
  }
  .hero-cta-group .btn {
    width: 100%;
  }
  .dashboard-kpi-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   SEZIONE VALORE
───────────────────────────────────────────────────────────── */
.valore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.valore-item {
  display: flex;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); /* 20px — Segugio */
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.valore-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.valore-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);   /* FINSTYLE: #EBF2FF */
  border-radius: var(--radius);
  color: var(--primary);
}

.valore-icon [data-lucide] {
  width: 24px;
  height: 24px;
}

.valore-title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.625rem;
  line-height: 1.35;
}

.valore-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .valore-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   SOCIAL PROOF — METRICHE
───────────────────────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: start;
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4rem;
}

.metric-separator {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 0 3rem;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  padding: 0 1rem;
}

.metric-number {
  font-family: var(--font-display);
  font-size: 2.625rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.metric-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Testimonianze */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: var(--bg-white);
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
}

.testimonial-quote {
  display: block;
  font-family: var(--font-heading);
  font-size: 3.75rem;
  color: var(--primary);              /* FINSTYLE: blu */
  line-height: 0;
  padding-top: 1rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.testimonial-body {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.testimonial-footer {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.testimonial-name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.125rem;
}

.testimonial-role {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .metric-separator { display: none; }
}

@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: 1fr;
    border: none;
    gap: 1.5rem;
    padding: 0;
    margin-bottom: 2.5rem;
  }
  .metric-item {
    text-align: left;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
  }
  .metric-separator { display: none; }
  .metric-number { font-size: 2rem; }
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   CHI SONO
───────────────────────────────────────────────────────────── */
.chi-sono-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 5rem;
}

.bio-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.75rem 0 2rem;
}

.bio-text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-primary);
}

.credentials {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.5rem;
  background: transparent;
  border-radius: var(--radius-md);
  border: none;
}

.credential-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.credential-item [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--accent);    /* FINSTYLE: verde CTA per le icone credenziali */
  flex-shrink: 0;
  margin-top: 1px;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 1.5rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--border), var(--primary), var(--accent));
}

.timeline-item {
  position: relative;
  margin-bottom: 1.25rem;
}

.timeline-item:last-child { margin-bottom: 0; }

.timeline-marker {
  position: absolute;
  left: -1.875rem;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--bg-white);
  box-shadow: 0 0 0 2px var(--navy);
}

.timeline-marker--accent {
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--amber);
}

.timeline-year {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);    /* FINSTYLE: verde CTA per le date */
  margin-bottom: 0.25rem;
}

.timeline-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.timeline-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Tech Stack */
.tech-stack {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: transparent;
  border-radius: var(--radius-md);
  border: none;
}

.tech-stack-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 0.875rem;
}

.tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Come lavoro 4 punti */
.come-lavoro-preview {
  border-top: 1px solid var(--border);
  padding: 4rem 2rem;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
}

.come-lavoro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.come-lavoro-item {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); /* 20px — Segugio */
  background: var(--bg-white);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.come-lavoro-item:hover {
  border-color: var(--primary);  /* FINSTYLE: bordo blu al hover */
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.come-lavoro-number {
  font-family: var(--font-display);   /* FINSTYLE */
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary);             /* FINSTYLE: verde */
  opacity: 0.9;
  line-height: 1;
  margin-bottom: 1rem;
}

.come-lavoro-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.come-lavoro-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .come-lavoro-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .chi-sono-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
  }
  .come-lavoro-grid { grid-template-columns: 1fr; }
  .come-lavoro-preview { padding: 2.5rem 1.25rem; }
}

/* ─────────────────────────────────────────────────────────────
   SERVIZI
───────────────────────────────────────────────────────────── */
.servizi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.servizio-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); /* 20px — Segugio card */
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
}

.servizio-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.servizio-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);   /* FINSTYLE: #EBF2FF */
  border-radius: var(--radius);
  color: var(--primary);
}

.servizio-title {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  margin: 0;
}

.servizio-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);   /* FINSTYLE: uppercase label → blu primario */
  margin-bottom: 0.5rem;
}

.servizio-problema p,
.servizio-sistema p,
.servizio-target p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.servizio-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.servizio-risultato {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--success);
  font-weight: 500;
  padding: 0.875rem 1rem;
  background: transparent;
  border-radius: var(--radius);
}

.servizio-risultato [data-lucide] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.servizio-card .btn-link {
  margin-top: auto;
}

@media (max-width: 1024px) {
  .servizi-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .servizio-card { flex-direction: column; }
}

@media (max-width: 768px) {
  .servizi-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   CASI STUDIO
───────────────────────────────────────────────────────────── */
.casi-studio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.caso-card {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); /* 20px — Segugio card */
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.caso-card:hover {
  border-color: var(--primary);  /* FINSTYLE: bordo blu */
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.caso-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.caso-metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.caso-number {
  font-family: var(--font-display);
  font-size: 2.625rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.caso-metric-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.caso-title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  margin: 0;
}

.caso-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.caso-risultato {
  border-top: 1px solid var(--border-strong);
  padding-top: 1.25rem;
}

.caso-risultato-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);  /* FINSTYLE: uppercase label → blu */
  margin-bottom: 0.5rem;
}

.caso-risultato p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .casi-studio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .casi-studio-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   CTA FINALE
───────────────────────────────────────────────────────────── */
.section-cta-finale {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.80) 100%),
    url('../img/business.webp') center / cover no-repeat;
  padding: var(--section-py) 0;
  text-align: center;
}

.cta-finale-title {
  font-family: var(--font-heading);
  font-size: 2.375rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  text-align: center;
}

.cta-finale-sub {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 2.5rem;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-finale-btn {
  margin-bottom: 1.5rem;
  display: inline-flex;
}

.cta-finale-micro {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 768px) {
  .cta-finale-title { font-size: 1.75rem; }
  .cta-finale-sub { font-size: 1rem; }
  .cta-finale-btn { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   CONTATTI
───────────────────────────────────────────────────────────── */
.contatti-grid {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 5rem;
  align-items: start;
}

.contatti-text {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 1.5rem 0 2rem;
}

.contatti-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contatti-info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.contatti-info-item [data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--navy);
  flex-shrink: 0;
}

.contatti-info-item a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.contatti-info-item a:hover { color: var(--accent); }  /* FINSTYLE: verde CTA */

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
}

.required {
  color: var(--error);
  margin-left: 2px;
}

/* Spec form input: 44px min, border 1.5px #D4D9E0, radius 8px, font 15px.
   Focus: border primary green + shadow in brand tono */
.form-input {
  height: 48px;
  border: 1.5px solid var(--fog-dark);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder {
  color: var(--text-secondary);
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 128, 96, 0.18);
}

.form-input.has-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.form-textarea {
  height: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  resize: vertical;
  min-height: 130px;
}

.select-wrap {
  position: relative;
}

.form-select {
  width: 100%;
  cursor: pointer;
  padding-right: 2.5rem;
}

.select-icon {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  pointer-events: none;
}

.form-error {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--error);
  line-height: 1.4;
}

.form-footer {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.form-submit {
  align-self: flex-start;
  min-width: 200px;
}

.form-microcopy {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Loading spinner */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Form success/error messages */
.form-success {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(0,82,204,0.08);
  border: 1px solid rgba(0,82,204,0.25);
  border-radius: var(--radius-md);
}

.form-success [data-lucide] {
  width: 24px;
  height: 24px;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 1px;
}

.form-success-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--success);
  margin-bottom: 0.375rem;
}

.form-success-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.form-error-msg {
  padding: 1rem 1.25rem;
  background: rgba(193,51,51,0.08);
  border: 1px solid rgba(193,51,51,0.25);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--error);
  line-height: 1.5;
}

/* Calendly section */
.calendly-section {
  border-top: 1px solid var(--border);
  padding-top: 3rem;
}

.calendly-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.calendly-header [data-lucide] {
  width: 24px;
  height: 24px;
  color: var(--navy);
}

.calendly-header h3 {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

.calendly-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.calendly-placeholder {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 3rem;
  background: var(--bg-white);
}

.calendly-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (max-width: 1024px) {
  .contatti-grid { gap: 3rem; }
}

@media (max-width: 768px) {
  .contatti-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .form-row { grid-template-columns: 1fr; }
  .form-submit { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-footer);
  padding: 64px 0 0;
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 40fr 30fr 30fr;
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer-name {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.625rem;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.footer-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-linkedin:hover { color: #fff; }
.footer-linkedin svg { width: 20px; height: 20px; }

.footer-col-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 1.25rem;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-nav-list a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-nav-list a:hover { color: #fff; }

.footer-cta-link {
  color: var(--accent) !important;
  font-weight: 600;
}
.footer-cta-link:hover { color: #fff !important; }

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.78);
}

.footer-contact-list [data-lucide] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.footer-contact-list a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-contact-list a:hover { color: #fff; }

.footer-piva {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.62);
  margin-top: 1.25rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-copyright {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
}

.footer-privacy {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.footer-privacy:hover { color: #fff; }

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   ANIMAZIONI SCROLL (Intersection Observer)
───────────────────────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in--delayed {
  transition-delay: 150ms;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
  .dashboard-badge::before { animation: none; }
  .spin { animation: none; }
}

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

/* ─────────────────────────────────────────────────────────────
   LOGO IMMAGINE (navbar + footer) — logo 77px desktop
───────────────────────────────────────────────────────────── */
.navbar-logo-img {
  display: block;
  height: 85px;
  width: auto;
  max-width: 400px;
  object-fit: contain;
}

.footer-logo-wrap {
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;   /* lo sfondo segue esattamente i bordi dell'immagine */
  margin-bottom: 1rem;
  line-height: 0;     /* elimina gap sotto l'img */
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.footer-logo-wrap:hover {
  opacity: 0.88;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.footer-logo {
  display: block;
  height: 96px;
  width: auto;
  max-width: 400px;
  object-fit: contain;
  /* nessun filtro: logf.png ha già i propri colori per sfondo scuro */
}

/* ─────────────────────────────────────────────────────────────
   FOTO PERSONALE — Sezione Chi Sono
───────────────────────────────────────────────────────────── */
.chi-sono-photo-wrap {
  width: 100%;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  line-height: 0;
}

.chi-sono-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 16px;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE — Leggibilità, contrasto, touch targets
───────────────────────────────────────────────────────────── */

/* Touch target minimo 44x44px per link e bottoni su mobile */
@media (max-width: 768px) {
  .btn {
    min-height: 52px;
    font-size: 1rem;
    padding: 0 20px;
  }

  .nav-link,
  .footer-nav-list a,
  .footer-contact-list a,
  .contatti-info-item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Testo corpo più leggibile */
  body {
    font-size: 1rem;
    line-height: 1.7;
  }

  .bio-text p,
  .servizio-problema p,
  .servizio-sistema p,
  .servizio-target p,
  .caso-text,
  .valore-text,
  .come-lavoro-text {
    font-size: 1rem;
    line-height: 1.75;
  }

  /* Contrasto migliorato per testi secondari */
  .text-secondary-mobile {
    color: var(--text-primary);
  }

  /* Contatti info: aumenta spaziatura per facilità tap */
  .contatti-info {
    gap: 1.25rem;
  }

  .contatti-info-item {
    font-size: 1rem;
    gap: 0.875rem;
  }

  /* Form più usabile su mobile */
  .form-input {
    height: 52px;
    font-size: 1rem;
  }

  .form-textarea {
    min-height: 140px;
    font-size: 1rem;
  }

  /* Navbar logo dimensione mobile — nessun box */

  .navbar-logo-img {
    height: 56px;
    max-width: 300px;
  }

  /* Footer: logo mobile */
  .footer-logo {
    height: 64px;
    max-width: 300px;
  }

  /* Hero CTA bottoni full-width su mobile già gestiti,
     ma assicuriamo che siano sempre cliccabili */
  .hero-cta-group .btn {
    justify-content: center;
    min-height: 52px;
  }

  /* Padding sezioni su mobile */
  .section-hero { padding: 56px 0 48px; }
}

/* Miglioramento leggibilità generale testo secondario */
.text-secondary,
.contatti-text,
.hero-sub,
.section-sub {
  color: #4A5260; /* leggermente più scuro di --text-secondary (#5A6070) */
}

/* Segugio lift universale — tutte le card salgono di 3px */
.valore-item,
.come-lavoro-item,
.servizio-card,
.caso-card,
.post-card {
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.valore-item:hover,
.come-lavoro-item:hover,
.servizio-card:hover,
.caso-card:hover {
  transform: translateY(-4px); /* FINSTYLE: lift 4px — più percettibile su bianco */
}

/* Hamburger touch target */
.hamburger {
  min-width: 44px;
  min-height: 44px;
}

/* Link contatti info */
.contatti-info-item a:hover {
  text-decoration-color: var(--accent);
}

/* Rimuovi stili Calendly non più usati senza rompere il parse */
.calendly-section,
.calendly-header,
.calendly-text,
.calendly-placeholder,
.calendly-placeholder-inner {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   FINSTYLE — Componenti aggiuntivi
   Label uppercase, Stat numbers, Sezione dark premium
═══════════════════════════════════════════════════════════ */

/* Label uppercase identitaria (Fineco) — marca le sezioni */
.label-section {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}

/* Stat bold per sezioni numeri/metriche */
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
}

/* Sezione dark premium */
.section-dark {
  background: var(--navy);
  padding: clamp(56px, 8vw, 88px) 0;
  color: #FFFFFF;
}
.section-dark .label-section { color: var(--accent); }
.section-dark h2              { color: #FFFFFF; }
.section-dark p               { color: rgba(255, 255, 255, 0.72); }

/* Card semitrasparente per sezione dark */
.card-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.card-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(243, 148, 34, 0.3);
}
.card-dark-title {
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.card-dark-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.55;
}

/* Bottone outline bianco (su sezione dark/primary) */
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.btn-outline-white:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

/* Metriche in verde (FINSTYLE: numeri in verde su sfondo section) */
.metric-number--cta {
  color: var(--primary);
}

/* ─────────────────────────────────────────────────────────────
   BLOG FAQ — AEO accordion
───────────────────────────────────────────────────────────── */
.blog-faq-list { display: flex; flex-direction: column; gap: 0.75rem; }

.blog-faq-item {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}
.blog-faq-item[open] { border-color: var(--primary-mid); }

.blog-faq-q {
  padding: 1.125rem 1.5rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  color: var(--navy); cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  user-select: none;
}
.blog-faq-q::-webkit-details-marker { display: none; }
.blog-faq-q::after {
  content: '+'; font-size: 1.25rem; font-weight: 400;
  color: var(--primary); flex-shrink: 0;
  transition: transform var(--transition);
}
.blog-faq-item[open] .blog-faq-q::after { content: '−'; }
.blog-faq-q:hover { color: var(--primary); }

.blog-faq-a {
  padding: 0 1.5rem 1.25rem;
  font-family: var(--font-body); font-size: 0.9375rem;
  line-height: 1.75; color: #1A1A1A; font-weight: 400;
  margin: 0; border-top: 1px solid var(--fog);
}

@media (max-width: 768px) {
  .blog-faq-q { padding: 1rem 1.25rem; font-size: 0.9375rem; }
  .blog-faq-a { padding: 0 1.25rem 1rem; }
}

/* ─────────────────────────────────────────────────────────────
   BOX TEXT — Inter Regular (400) / Medium (500), colore #1A1A1A
   Applicato a tutto il testo corpo dentro card, box e articoli
───────────────────────────────────────────────────────────── */

/* Articoli — corpo testo */
.post-content {
  color: #1A1A1A;
  font-family: var(--font-body);
  font-weight: 400;
}

.post-content p,
.post-content li {
  color: #1A1A1A;
  font-weight: 400;
}

.post-content strong {
  color: #1A1A1A;
  font-weight: 700;
}

.post-inbreve-text {
  font-family: var(--font-body);
  font-weight: 400;
  color: #1A1A1A;
}

/* Post card — excerpt */
.post-card-excerpt {
  font-family: var(--font-body);
  font-weight: 400;
  color: #1A1A1A;
}

/* Valore items */
.valore-text {
  font-family: var(--font-body);
  font-weight: 400;
  color: #1A1A1A;
}

/* Testimonianze — body */
.testimonial-body {
  font-family: var(--font-body);
  font-weight: 400;
  color: #1A1A1A;
}

/* Bio */
.bio-text p {
  font-family: var(--font-body);
  font-weight: 400;
  color: #1A1A1A;
}

.credential-item {
  font-family: var(--font-body);
  font-weight: 400;
  color: #1A1A1A;
}

/* Servizi card */
.servizio-problema p,
.servizio-sistema p,
.servizio-target p {
  font-family: var(--font-body);
  font-weight: 400;
  color: #1A1A1A;
}

/* Casi studio */
.caso-text,
.caso-risultato p,
.caso-metric-label {
  font-family: var(--font-body);
  font-weight: 400;
  color: #1A1A1A;
}

/* ═══════════════════════════════════════════════════════════
   BLOG — Archive, Single Post, Post Card
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   BLOG HERO (archive.php) — Segugio gradient pattern, b4b colors
───────────────────────────────────────────────────────────── */
.blog-hero {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 100%),
    url('../img/Marketig funziona.webp') center / cover no-repeat;
  padding: 80px 0;
  border-bottom: none;
  color: var(--text-primary);
}

.blog-hero-inner {
  max-width: 900px;
}

.blog-hero .tag {
  background: rgba(29, 61, 107, 0.10);
  color: var(--primary-dark);
  border: 1px solid rgba(29, 61, 107, 0.20);
}

.blog-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 1rem 0 1.25rem;
}

.blog-hero-sub {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--text-primary);
  line-height: 1.75;
}

/* Contatore articoli nel hero */
.blog-hero-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #2d5a8e;
}

@media (max-width: 768px) {
  .blog-hero { padding: 72px 0 56px; }
  .blog-hero-title { font-size: 2.25rem; }
  .blog-hero-sub { font-size: 1rem; }
}

/* ─────────────────────────────────────────────────────────────
   BLOG SECTION + GRID
───────────────────────────────────────────────────────────── */
.blog-section {
  padding: 64px 0 96px;
  background: #FFFFFF;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 4rem;
}

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   POST CARD — Segugio card pattern, b4b brand colors
───────────────────────────────────────────────────────────── */
.post-card {
  background: #FFFFFF;
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  transition: transform var(--transition);
  cursor: pointer;
}

.post-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.post-card-img-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-section);
}

.post-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
  display: block;
}

.post-card:hover .post-card-img {
  transform: scale(1.04);
}

/* Placeholder grafico quando manca l'immagine */
.post-card-no-img {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--navy-soft) 0%, var(--primary-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.post-card-no-img [data-lucide] { width: 32px; height: 32px; opacity: 0.4; }

.post-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.625rem;
}

/* Categoria — Segugio pill badge */
.post-card-cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px; /* Segugio pill shape */
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-dark);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  width: fit-content;
}
.post-card-cat:hover {
  background: var(--accent);
  color: #fff;
}

.post-card-title {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 0;
}

.post-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.post-card-title a:hover { color: var(--primary); }

.post-card-excerpt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.post-card-meta-sep { color: var(--border-strong); }

/* Reading time badge */
.post-card-reading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.post-card-link {
  font-size: 0.875rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Featured card (primo articolo) ─── */
.post-card--featured {
  grid-column: 1 / -1; /* occupa tutta la larghezza */
  flex-direction: row;
  min-height: 320px;
}
.post-card--featured .post-card-img-link {
  flex: 0 0 48%;
  aspect-ratio: unset;
  min-height: 260px;
}
.post-card--featured .post-card-body {
  padding: 2rem 2.5rem;
  justify-content: center;
  gap: 1rem;
}
.post-card--featured .post-card-title {
  font-size: 1.5rem;
  line-height: 1.25;
}
.post-card--featured .post-card-excerpt {
  -webkit-line-clamp: 4;
}
.post-card--featured .post-card-no-img {
  flex: 0 0 48%;
  aspect-ratio: unset;
  min-height: 260px;
}

@media (max-width: 768px) {
  .post-card--featured {
    flex-direction: column;
    grid-column: unset;
  }
  .post-card--featured .post-card-img-link,
  .post-card--featured .post-card-no-img {
    flex: none;
    min-height: 200px;
    aspect-ratio: 16 / 9;
  }
  .post-card--featured .post-card-body {
    padding: 1.5rem;
  }
  .post-card--featured .post-card-title {
    font-size: 1.25rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   BLOG EMPTY STATE
───────────────────────────────────────────────────────────── */
.blog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 5rem 1rem;
}

.blog-empty [data-lucide] {
  width: 48px;
  height: 48px;
  color: var(--text-tertiary);
}

.blog-empty-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--navy);
  font-weight: 600;
}

.blog-empty-sub {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────────────
   BLOG PAGINAZIONE
───────────────────────────────────────────────────────────── */
.blog-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border: 1px solid var(--border);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  background: var(--bg-white);
}

.blog-pagination .page-numbers:hover {
  border-color: var(--navy);
  background: var(--bg-section);
  box-shadow: 0 2px 8px rgba(0,82,204,0.10);
}

.blog-pagination .page-numbers.current {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(0,82,204,0.30);
}

.blog-pagination .page-numbers.dots {
  border: none;
  background: none;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   BLOG CTA STRIP (blog-layout.php in fondo)
───────────────────────────────────────────────────────────── */
.blog-cta-strip {
  padding: 48px 0;
}

.blog-cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.blog-cta-strip-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.375rem;
}

.blog-cta-strip-sub {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .blog-cta-strip-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .blog-cta-strip-inner .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────
   SINGLE POST — HEADER
───────────────────────────────────────────────────────────── */
.post-header {
  background-color: var(--bg-main);
  padding: 112px 0 64px;
  border-bottom: 1px solid var(--border);
}

.post-header-inner {
  max-width: 800px;
}

.post-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.post-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}
.post-breadcrumb a:hover { color: var(--accent); }  /* verde CTA FINSTYLE */
.post-breadcrumb a [data-lucide] { width: 16px; height: 16px; }

.post-breadcrumb-sep { color: var(--border-strong); }

.post-cat-tag { margin-bottom: 1rem; }

.post-title {
  font-family: var(--font-display);   /* FINSTYLE */
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0.5rem 0 1.25rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.post-meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.post-meta-item [data-lucide] { width: 15px; height: 15px; }
.post-meta-sep { color: var(--border-strong); }

@media (max-width: 768px) {
  .post-header { padding: 88px 0 48px; }
  .post-title { font-size: 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   SINGLE POST — IMMAGINE IN EVIDENZA
───────────────────────────────────────────────────────────── */
.post-featured-img-wrap {
  padding: 2.5rem 0 0;
  background: var(--bg-main);
}

.post-featured-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   SINGLE POST — LAYOUT (contenuto + sidebar)
───────────────────────────────────────────────────────────── */
.post-main {
  padding: 64px 0 96px;
  background: var(--bg-white);
}

.post-reading {
  max-width: 800px;
  margin: 0 auto;
}

.post-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .post-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  /* Su mobile/tablet: contenuto prima, poi sidebar */
  .post-content-wrap { order: 1; }
  .post-sidebar       { order: 2; position: static; }
}

/* ─────────────────────────────────────────────────────────────
   SINGLE POST — TIPOGRAFIA CONTENUTO
───────────────────────────────────────────────────────────── */
.post-content {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--text-primary);
  max-width: 72ch;
}

.post-content h1 {
  font-size: 1.75rem;
  margin: 3rem 0 1.25rem;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.post-content h2 {
  font-size: 1.875rem;
  margin: 2.5rem 0 1rem;
  color: var(--navy);
}

.post-content h3 {
  font-size: 1.375rem;
  margin: 2rem 0 0.875rem;
  color: var(--navy);
}

.post-content h4 {
  font-size: 1.125rem;
  margin: 1.75rem 0 0.75rem;
}

.post-content p {
  margin-bottom: 1.5rem;
}

.post-content ul,
.post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }

.post-content li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
}

.post-content blockquote {
  border-left: 3px solid var(--primary);  /* FINSTYLE: blu istituzionale */
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--primary-soft);        /* FINSTYLE: #EBF2FF */
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--navy);
}

.post-content a {
  color: var(--primary);               /* FINSTYLE: blu primario */
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color var(--transition-fast);
}
.post-content a:hover { color: var(--primary-dark); }

.post-content strong { font-weight: 700; color: var(--text-primary); }
.post-content em { font-style: italic; }

.post-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.post-content img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  margin: 1.5rem 0;
}

/* Responsive tables in article content */
.post-content .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--fog-dark);
}

.post-content .post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 360px;
}

.post-content .post-table th,
.post-content .post-table td {
  padding: 0.625rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--fog-dark);
  vertical-align: top;
}

.post-content .post-table th {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-section);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.post-content .post-table tr:last-child td {
  border-bottom: none;
}

.post-content .post-table tbody tr:hover td {
  background: var(--bg-section);
}

.post-content pre,
.post-content code {
  font-family: 'Courier New', Courier, monospace;
  background: var(--bg-section);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.post-content code {
  padding: 2px 6px;
  color: var(--navy);
}

.post-content pre {
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.post-content pre code {
  background: none;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────
   SINGLE POST — IN BREVE (riepilogo articolo)
───────────────────────────────────────────────────────────── */
.post-inbreve {
  background: #F0F9FF;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.post-inbreve-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.post-inbreve-text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   PAGE SIMPLE — Pagine statiche (privacy, cookie, ecc.)
───────────────────────────────────────────────────────────── */
.page-simple {
  padding: 120px 0 80px;
  min-height: 60vh;
  max-width: 720px;
}

.page-simple-title {
  font-family: var(--font-heading);
  font-size: 2.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 2rem;
}

.page-simple-content {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
}

.page-simple-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-simple-content a:hover { color: var(--primary-dark); }

@media (max-width: 768px) {
  .page-simple { padding: 80px 0 60px; }
  .page-simple-title { font-size: 1.75rem; }
}

/* ─────────────────────────────────────────────────────────────
   SINGLE POST — LINK INTERNI CONTESTUALI
───────────────────────────────────────────────────────────── */
.post-related-links {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--bg-section);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}

.post-related-links-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.post-related-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.post-related-links a {
  font-size: 0.9375rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color var(--transition-fast);
}

.post-related-links a::before {
  content: '→';
  font-size: 0.875rem;
  color: var(--accent);
}

.post-related-links a:hover { color: var(--primary-dark); }

/* ─────────────────────────────────────────────────────────────
   SINGLE POST — TAG
───────────────────────────────────────────────────────────── */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.post-tag {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 12px;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.post-tag:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* ─────────────────────────────────────────────────────────────
   SINGLE POST — NAVIGAZIONE PREV/NEXT
───────────────────────────────────────────────────────────── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.post-nav-item:hover {
  border-color: var(--navy);
  box-shadow: 0 4px 16px rgba(0,82,204,0.10);
  transform: translateY(-2px);
}

.post-nav-item--next {
  text-align: right;
}

/* Forza next in colonna 2 solo se c'è anche prev */
.post-nav-item--prev ~ .post-nav-item--next {
  grid-column: 2;
}

/* Se next è l'unico elemento, resta in colonna 1 a sinistra */
.post-nav-item--next:only-child {
  grid-column: 1;
  text-align: left;
}
.post-nav-item--next:only-child .post-nav-label {
  justify-content: flex-start;
}

.post-nav-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.post-nav-item--next .post-nav-label {
  justify-content: flex-end;
}

.post-nav-label [data-lucide] { width: 14px; height: 14px; }

.post-nav-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .post-nav {
    grid-template-columns: 1fr;
  }
  .post-nav-item--next { grid-column: 1; text-align: left; }
  .post-nav-item--next .post-nav-label { justify-content: flex-start; }
}

/* ─────────────────────────────────────────────────────────────
   SINGLE POST — SIDEBAR
───────────────────────────────────────────────────────────── */
.post-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.post-sidebar-card {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

/* Card autore */
.post-author-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-author-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--border-strong);
}

.post-author-name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}

.post-author-role {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--amber);
  margin-bottom: 0.625rem;
}

.post-author-bio {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.post-author-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.post-author-linkedin:hover { color: var(--amber); }

/* Card CTA */
.post-sidebar-cta {
  background: var(--navy);
  border-color: var(--navy);
}

.post-sidebar-cta-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.post-sidebar-cta-text {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Card articoli recenti */
.post-sidebar-section-title {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-tertiary);
  margin-bottom: 1rem;
}

.post-sidebar-recent {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.post-sidebar-recent li {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.875rem;
}

.post-sidebar-recent li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.post-sidebar-recent a {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 0.25rem;
  transition: color var(--transition-fast);
}
.post-sidebar-recent a:hover { color: var(--amber); }

.post-sidebar-recent-date {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

@media (max-width: 1024px) {
  .post-sidebar {
    position: static;
  }
}

/* ═══════════════════════════════════════════════════════════
   SINGLE POST — MOBILE RESPONSIVE (768px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .post-header {
    padding: 88px 0 48px;
  }

  .post-title {
    font-size: 1.375rem;
    letter-spacing: -0.01em;
  }

  .post-meta {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .post-section {
    padding: 48px 0 72px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SMALL PHONES — 480px breakpoint
   iPhone SE, older Androids, narrow viewports
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Hero homepage */
  .hero-title {
    font-size: 2rem;
    letter-spacing: -0.02em;
  }

  .hero-sub {
    font-size: 0.9375rem;
  }

  .hero-cta-group {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
  }

  /* Blog hero */
  .blog-hero {
    padding: 56px 0 40px;
  }

  .blog-hero-title {
    font-size: 1.75rem;
  }

  .blog-hero-sub {
    font-size: 0.9375rem;
  }

  /* Blog grid: single col + riduce gap */
  .blog-section {
    padding: 40px 0 64px;
  }

  .blog-grid {
    gap: 1.25rem;
  }

  /* Post card: corpo più compatto */
  .post-card-body {
    padding: 1.25rem;
  }

  .post-card-title {
    font-size: 1rem;
  }

  /* Blog paginazione: bottoni più compatti */
  .blog-pagination .page-numbers {
    width: 38px;
    height: 38px;
    font-size: 0.875rem;
  }

  /* Blog CTA strip */
  .blog-cta-strip {
    padding: 36px 0;
  }

  .blog-cta-strip-title {
    font-size: 1.125rem;
  }

  /* Single post */
  .post-header {
    padding: 84px 0 36px;
  }

  .post-title {
    font-size: 1.25rem;
  }

  .post-breadcrumb {
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.8125rem;
  }

  .post-section {
    padding: 36px 0 56px;
  }

  .post-nav {
    gap: 1rem;
  }

  .post-nav-item {
    padding: 1rem;
  }

  /* Sezioni homepage */
  .section-hero {
    padding: 48px 0 40px;
  }

  .section {
    padding: 48px 0;
  }

  .section-title {
    font-size: 1.75rem;
  }

  /* Servizi: card più compatta */
  .servizio-card {
    padding: 1.5rem;
  }

  /* Casi studio: card più compatta */
  .caso-card {
    padding: 1.5rem 1.25rem;
  }

  /* Valori: card più compatta */
  .valore-item {
    padding: 1.25rem;
  }

  /* Contatti form */
  .contatti-section .container {
    padding: 0 1rem;
  }

  /* Navbar: logo su schermi strettissimi — nessun box */

  .navbar-logo-img {
    height: 50px;
    max-width: 240px;
  }

  /* Footer */
  .footer-grid {
    gap: 2rem;
  }

  .footer-logo {
    height: 64px;
  }

  .footer-bottom {
    padding: 1.25rem 0;
    gap: 0.375rem;
  }

  .footer-copyright,
  .footer-privacy {
    font-size: 0.8125rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   BLOG ARTICLES GRID — Responsive Layout
═══════════════════════════════════════════════════════════ */

/* Hero sezione blog — proprietà consolidate nel blocco principale sopra */

.blog-hero-tag {
  display: inline-block;
  background: rgba(29, 61, 107, 0.10);
  color: var(--primary-dark);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
  border: 1px solid rgba(29, 61, 107, 0.20);
}

.blog-hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 600px;
  margin-bottom: 32px;
}

.blog-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: #4a6b62;
}

.blog-hero-meta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Griglia articoli */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.blog-article-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(30, 30, 30, 0.30);
  display: flex;
  flex-direction: column;
  position: relative;
}

.blog-article-card:hover {
  box-shadow: 0 8px 28px rgba(30, 30, 30, 0.42);
  transform: translateY(-4px);
  border-color: var(--primary);
}

/* Prima card: featured (occupa tutta la riga) */
.blog-article-card--featured {
  grid-column: 1 / -1;
}

.blog-article-inner--featured {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
}

.blog-article-featured-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 48px 40px 48px 48px;
  justify-content: space-between;
}

.blog-article-featured-left .blog-article-title {
  font-size: 1.75rem;
  line-height: 1.25;
  flex: 1;
}

.blog-article-featured-left .blog-article-footer {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 0;
}

.blog-article-featured-right {
  border-left: 2px solid rgba(0, 0, 0, 0.07);
  padding: 48px 48px 48px 40px;
  display: flex;
  align-items: center;
}

.blog-article-featured-right .blog-article-excerpt {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .blog-article-inner--featured {
    grid-template-columns: 1fr;
  }
  .blog-article-featured-left {
    padding: 32px 32px 24px;
  }
  .blog-article-featured-right {
    border-left: none;
    border-top: 2px solid rgba(0, 0, 0, 0.07);
    padding: 24px 32px 32px;
  }
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-article-card {
    min-height: auto;
  }
}

/* Decorazione colore sinistro */
.blog-article-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #9ca3af 0%, #d1d5db 100%);
}

/* ── Sfondi card per categoria ── */
.blog-article-card--cat-leadership    { background: #f5f3ff; } /* lavanda */
.blog-article-card--cat-operativita   { background: #f0fdf4; } /* menta */
.blog-article-card--cat-comunicazione { background: #eff6ff; } /* azzurro */
.blog-article-card--cat-gestione      { background: #fffbeb; } /* ambra */
.blog-article-card--cat-strategia     { background: #eef2ff; } /* indaco */

.blog-article-inner {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.blog-article-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent-darker);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: fit-content;
}

.blog-article-title {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  margin: 0;
}

.blog-article-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

.blog-article-title a:hover {
  color: var(--primary);
}

.blog-article--featured .blog-article-title {
  font-size: 1.75rem;
}

.blog-article-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}

.blog-article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.blog-article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-article-reading {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.blog-article-reading svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.blog-article-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all var(--transition);
}

.blog-article-link:hover {
  color: var(--primary-dark);
  transform: translateX(2px);
}

.blog-article-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
}

.blog-article-link:hover svg {
  transform: translateX(3px);
}

/* CTA Strip */
.blog-cta-strip {
  padding: 48px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-section);
}

.blog-cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.blog-cta-strip-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px 0;
}

.blog-cta-strip-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .blog-article-card--featured .blog-article-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px;
  }

  .blog-article-inner {
    padding: 24px;
    gap: 12px;
  }

  .blog-article-title {
    font-size: 1.25rem;
  }

  .blog-article--featured .blog-article-title {
    font-size: 1.625rem;
  }

  .blog-hero-title {
    font-size: 2rem;
  }

  .blog-hero-subtitle {
    font-size: 1rem;
  }

  .blog-cta-strip-inner {
    gap: 24px;
  }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
  .blog-hero {
    padding: 56px 0;
  }

  .blog-hero-inner {
    max-width: 100%;
  }

  .blog-hero-title {
    font-size: 1.625rem;
    margin-bottom: 12px;
  }

  .blog-hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }

  .blog-article-card {
    border-radius: var(--radius-lg);
  }

  .blog-article-card--featured .blog-article-inner {
    padding: 24px;
  }

  .blog-article-inner {
    padding: 20px;
    gap: 12px;
  }

  .blog-article-title {
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .blog-article--featured .blog-article-title {
    font-size: 1.375rem;
  }

  .blog-article-excerpt {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .blog-article-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-top: none;
    padding-top: 0;
    margin-top: 12px;
  }

  .blog-cta-strip {
    padding: 36px 0;
  }

  .blog-cta-strip-inner {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .blog-cta-strip-title {
    font-size: 1.125rem;
  }

  .blog-cta-strip-subtitle {
    font-size: 0.875rem;
  }

  .blog-article-badge {
    font-size: 0.7rem;
    padding: 5px 10px;
  }

  .blog-article-title,
  .blog-hero-title,
  .post-title,
  .post-content {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN REFRESH 2026 — Sfondi, Card, Navbar, Tipografia, CTA
═══════════════════════════════════════════════════════════ */

/* ── 1. CLASSI BACKGROUND GLOBALI ───────────────────────── */

.bg-hero {
  background: linear-gradient(160deg, #EEF3FA 0%, #DDE8F5 60%, #E8F1FB 100%) !important;
}
.bg-light-mint {
  background: linear-gradient(160deg, #F0F7F4 0%, #E6F2EE 60%, #EDF5F1 100%) !important;
}
.bg-light-cream {
  background: linear-gradient(160deg, #FDF8F2 0%, #FAF2E6 60%, #FCF6EE 100%) !important;
}
.bg-neutral {
  background: linear-gradient(160deg, #F7F9FC 0%, #EEF3FA 100%) !important;
}
.bg-dark-navy {
  background: linear-gradient(160deg, #1A2B4A 0%, #1E3257 60%, #162444 100%) !important;
}

/* ── ASSEGNAZIONE SFONDI PER SEZIONE ────────────────────── */

#valore {
  background: linear-gradient(160deg, #F0F7F4 0%, #E6F2EE 60%, #EDF5F1 100%);
}

#social-proof {
  background: linear-gradient(160deg, #F0F7F4 0%, #E6F2EE 60%, #EDF5F1 100%);
}

#chi-sono {
  background: linear-gradient(160deg, #F7F9FC 0%, #EEF3FA 100%);
}

#come-lavoro {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 100%),
    url('../img/Azienda funziona.webp') center / cover no-repeat;
}

#contatti {
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 100%),
    url('../img/Margini migliori.webp') center / cover no-repeat;
}

/* ── 2. CARD — SFONDO GRIGIO CHIARO UNIFORME, NESSUN BORDO, NESSUNA OMBRA ── */

.card,
.caso-card,
.servizio-card,
.testimonial-card,
.come-lavoro-item,
.valore-item,
.dashboard-card,
article.post,
.entry-card {
  background: var(--card-bg);
  border: none;
  border-radius: 14px;
  box-shadow: none;
  transition: transform 0.25s ease;
}

.card:hover,
.caso-card:hover,
.servizio-card:hover,
.testimonial-card:hover,
.come-lavoro-item:hover,
.valore-item:hover,
.dashboard-card:hover,
article.post:hover,
.entry-card:hover {
  transform: translateY(-3px);
}

/* ── 3. NAVBAR ────────────────────────────────────────────── */

.site-header {
  background: #FFFFFF;
  box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0, 0, 0, 0.05);
}

.site-header.scrolled {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ── 4. TIPOGRAFIA (h1/h2/h3/p/li → vedi style.css che carica dopo) ── */

/* Preserve white/inherited text in dark contexts */
.section--dark p,
.section--dark li,
.section-dark p,
.section-dark li {
  color: inherit;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: inherit;
}

.tag-label,
.category-label,
.post-category {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #E8850A;
}

/* ── 5. BOTTONI CTA ──────────────────────────────────────── */

.btn-primary,
.btn-accent {
  background: #F39422;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: none;
  box-shadow: 0 4px 16px rgba(243, 148, 34, 0.35);
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary:hover,
.btn-accent:hover {
  background: #E07B00;
  box-shadow: 0 6px 28px rgba(255, 100, 150, 0.50);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.btn-primary:active,
.btn-accent:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(255, 100, 150, 0.35);
}

a.cta-secondary {
  color: #1E6B5A;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(30, 107, 90, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}

a.cta-secondary:hover {
  border-color: rgba(30, 107, 90, 0.7);
}

/* ── 6. SEZIONE NUMERI ───────────────────────────────────── */

.stat-number,
.metric-number {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.03em;
  border-bottom: 2px solid rgba(243, 148, 34, 0.20);
  padding-bottom: 12px;
  margin-bottom: 10px;
}

/* ── 7. BLOG CARD GRID ───────────────────────────────────── */

.blog-grid .card,
.posts-grid article,
.blog-articles-grid .blog-article-card {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-grid .card h3,
.posts-grid article h2,
.blog-articles-grid .blog-article-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 8. FOOTER ───────────────────────────────────────────── */

.site-footer {
  background: linear-gradient(160deg, #1A2B4A 0%, #1E3257 60%, #162444 100%);
  padding-top: 64px;
  padding-bottom: 64px;
}

.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin-top: 32px;
  padding-top: 20px;
}

.footer-legal-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* ── 9. SPAZIATURA GLOBALE TRA SEZIONI ──────────────────── */

.site-section,
.wp-block-group,
section {
  padding-top: clamp(64px, 8vw, 100px);
  padding-bottom: clamp(64px, 8vw, 100px);
  border-bottom: 1px solid rgba(26, 43, 74, 0.06);
}

/* ── 10. CARD — TESTO NERO ───────────────────────────────── */

/* Colore base ereditato */
.caso-card,
.servizio-card,
.testimonial-card,
.come-lavoro-item,
.valore-item,
.dashboard-card {
  color: #111827;
}

/* Titoli dentro le card */
.valore-title,
.servizio-title,
.come-lavoro-title,
.caso-title,
.testimonial-name,
.dashboard-title {
  color: #111827;
}

/* Testi corpo dentro le card */
.valore-text,
.servizio-problema p,
.servizio-sistema p,
.servizio-target p,
.come-lavoro-text,
.caso-text,
.caso-metric-label,
.caso-risultato p,
.caso-risultato-label,
.testimonial-body,
.testimonial-role,
.dashboard-chart-label,
.dashboard-kpi-label {
  color: #374151;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE COMPLETO — tablet 1024px · mobile 768px · small 640px
════════════════════════════════════════════════════════════ */

/* ── TABLET LANDSCAPE (≤ 1024px) ──────────────────────────── */
@media (max-width: 1024px) {

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    min-height: auto;
  }
  .hero-visual { display: none; }
  .hero-text   { max-width: 100%; }

  /* Chi sono */
  .chi-sono-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Valore */
  .valore-grid { gap: 1.5rem; }

  /* Social proof — testimoniali */
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  /* Contatti */
  .contatti-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* CTA Finale */
  .cta-finale-title { font-size: 2rem; }

  /* Blog featured card */
  .blog-article-inner--featured {
    grid-template-columns: 1fr;
  }
  .blog-article-featured-left {
    padding: 32px 32px 24px;
  }
  .blog-article-featured-right {
    border-left: none;
    border-top: 2px solid rgba(0,0,0,0.07);
    padding: 24px 32px 32px;
  }

  /* Blog grid */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  /* Metriche social proof */
  .metric-number { font-size: 2.25rem; }
  .caso-number   { font-size: 2.25rem; }
}

/* ── TABLET PORTRAIT / MOBILE GRANDE (≤ 768px) ────────────── */
@media (max-width: 768px) {

  /* Tipografia heading responsive */
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  .hero-h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .cta-finale-title { font-size: 1.75rem; }
  .blog-hero-title  { font-size: clamp(1.75rem, 6vw, 2.25rem); }

  /* Container padding ridotto */
  .container { padding: 0 20px; }

  /* Sezioni padding ridotto */
  .section,
  .section--alt,
  .section--white,
  .section-hero,
  .section-cta-finale {
    padding: 48px 0;
  }

  /* Hero */
  .hero-inner { gap: 2rem; }
  .hero-proof {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  .proof-sep { display: none; }
  .hero-cta-group {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
  .hero-cta-group .btn { width: 100%; justify-content: center; }

  /* Chi sono */
  .chi-sono-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
  .come-lavoro-preview { padding: 2rem 1.25rem; }
  .come-lavoro-grid    { grid-template-columns: 1fr; gap: 1rem; }

  /* Valore */
  .valore-grid { grid-template-columns: 1fr; gap: 1rem; }
  .valore-item { padding: 1.25rem; }

  /* Social proof */
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 0;
    margin-bottom: 2.5rem;
  }
  .metric-separator { display: none; }
  .metric-item { padding: 0; text-align: left; }
  .metric-number { font-size: 2rem; }
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Servizi */
  .servizi-grid { grid-template-columns: 1fr; gap: 1rem; }
  .servizio-card { padding: 1.5rem; }

  /* Casi studio */
  .casi-studio-grid { grid-template-columns: 1fr; gap: 1rem; }
  .caso-card { padding: 1.5rem; }
  .caso-number { font-size: 2rem; }

  /* Contatti */
  .contatti-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .form-row { grid-template-columns: 1fr; }

  /* CTA Finale */
  .cta-finale-btn { width: 100%; justify-content: center; }
  .cta-finale-sub { font-size: 1rem; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-hero  { padding: 56px 0 40px; }
  .blog-article-inner { padding: 24px; gap: 12px; }
  .blog-article-featured-left,
  .blog-article-featured-right { padding: 24px; }
  .blog-article-title { font-size: 1.125rem; }

  /* Blog CTA strip */
  .blog-cta-strip-inner {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
  .blog-cta-strip-inner .btn { width: 100%; justify-content: center; }

  /* Header */
  .navbar-nav { display: none; }
  .navbar-cta  { display: none; }
  .hamburger   { display: flex; }
  .site-header { height: var(--header-h-mob); }

  /* Dashboard card (hero) */
  .dashboard-kpi-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* ── MOBILE PICCOLO (≤ 640px) ──────────────────────────────── */
@media (max-width: 640px) {

  /* Container padding minimo */
  .container { padding: 0 16px; }

  /* Tipografia ancora più compatta */
  .hero-h1         { font-size: 1.625rem; }
  .cta-finale-title { font-size: 1.5rem; }

  /* Chi sono — credenziali senza padding eccessivo */
  .credentials { padding: 0.75rem 0; }

  /* Valore */
  .valore-item { gap: 1rem; }
  .valore-icon { width: 40px; height: 40px; }

  /* Servizi */
  .servizio-icon { width: 44px; height: 44px; }

  /* Casi studio */
  .caso-number { font-size: 1.75rem; }

  /* Metriche */
  .metric-number { font-size: 1.75rem; }

  /* Timeline compatta */
  .timeline { padding-left: 1.25rem; }
  .timeline-item { margin-bottom: 1rem; }

  /* Blog article card */
  .blog-article-inner { padding: 20px 16px; }
  .blog-article-featured-left,
  .blog-article-featured-right { padding: 20px 16px; }
  .blog-article-excerpt { font-size: 0.9rem; }

  /* Sezioni — padding minimo */
  .section,
  .section--alt,
  .section--white,
  .section-hero,
  .section-cta-finale {
    padding: 40px 0;
  }

  /* Bottoni CTA full-width su mobile piccolo */
  .hero-cta-group .btn,
  .cta-finale-btn { width: 100%; justify-content: center; }

  /* Come lavoro */
  .come-lavoro-item { padding: 1rem; }
  .come-lavoro-preview { padding: 1.5rem 1rem; }
}