:root {
    color-scheme: only light;
    /* Brand EMA Health (dal deck + Figma) */
    --blue-900: #252643;
    --blue-800: #42458B;
    --blue-700: #5662BA;   /* primary */
    --blue-600: #697AC8;
    --blue-500: #869ACB;
    --blue-300: #BAC4EE;
    --blue-200: #E4E7F5;
    --blue-100: #ECF0FC;
    --blue-50:  #F5F7FD;
    --red:      #FC3713;
    --red-dark: #BB251A;
    --red-soft: #FFE9E4;
    --black:    #121212;
    --gray-900: #17181C;
    --gray-800: #1D1F23;
    --gray-700: #4E4E5C;
    --gray-600: #6F6F82;
    --gray-500: #8B8B9C;
    --gray-400: #A3A3B1;
    --gray-300: #CCCCD4;
    --gray-200: #DEDEE3;
    --gray-100: #EFEFF2;
    --gray-50:  #FAFAFA;
    --white:    #FFFFFF;

    --font-display: 'Nunito Sans', ui-sans-serif, -apple-system, sans-serif;
    --font-body:    'Inter', ui-sans-serif, -apple-system, sans-serif;

    /* Tweakables (overridden at runtime) */
    --primary: var(--blue-700);
    --primary-strong: var(--blue-800);
    --primary-soft: var(--blue-50);
    --primary-100: var(--blue-100);
    --primary-200: var(--blue-200);
    --primary-300: var(--blue-300);
    --accent: var(--red);

    --section-pad-y: 120px;
    --container: 1240px;
    --radius: 16px;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    color: var(--black);
    background: var(--white);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

  .container { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
  .section   { padding: var(--section-pad-y) 0; }
  .section.compact { padding: 96px 0; }

  /* Typography */
  .eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before {
    content: '';
    width: 24px; height: 1px; background: var(--primary);
    display: inline-block;
  }
  .eyebrow.on-dark { color: var(--primary-300); }
  .eyebrow.on-dark::before { background: var(--primary-300); }

  h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.025em; margin: 0; color: var(--black); font-weight: 700; text-wrap: balance; }
  h1 { font-size: clamp(48px, 6vw, 84px); line-height: 1.02; font-weight: 900; letter-spacing: -0.035em; }
  h2 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.08; }
  h3 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.2; }
  h4 { font-size: 20px; letter-spacing: -0.01em; }

  p { margin: 0; }
  .lead { font-size: 21px; line-height: 1.5; color: var(--gray-700); max-width: 60ch; text-wrap: pretty; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-radius: 12px;
    font-weight: 600; font-size: 16px;
    font-family: var(--font-body);
    cursor: pointer; border: 0;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    text-decoration: none;
    white-space: nowrap;
  }
  .btn-primary { background: var(--primary); color: var(--white); box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 8px 24px -10px rgba(86,98,186,0.5); }
  .btn-primary:hover { background: var(--primary-strong); transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--black); border: 1px solid var(--gray-200); }
  .btn-ghost:hover { border-color: var(--gray-400); }
  .btn-dark { background: var(--black); color: var(--white); }
  .btn-dark:hover { background: var(--gray-900); }
  .btn-light { background: var(--white); color: var(--primary); }
  .btn-light:hover { background: var(--blue-50); }

  /* Navbar */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid var(--gray-100);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 40px;
    max-width: var(--container);
    margin: 0 auto;
  }
  .logo {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-body); font-weight: 800; font-size: 18px;
    letter-spacing: -0.02em; color: var(--black);
  }
  .logo img.logotype { height: 26px; width: auto; display: block; }
  .logo .product-tag {
    font-family: var(--font-body); font-weight: 600; font-size: 13px;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--primary-100);
    color: var(--primary-strong);
    text-transform: uppercase;
  }

  .nav-links { display: flex; align-items: center; gap: 30px; }
  .nav-links a { font-size: 15px; font-weight: 500; color: var(--gray-700); transition: color .15s ease; }
  .nav-links a:hover, .nav-links a.active { color: var(--black); }
  .nav-links a.active { color: var(--primary); font-weight: 600; }
  .nav-links .dd-trigger { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
  .dropdown { position: relative; padding-bottom: 18px; margin-bottom: -18px; }
  .dropdown-menu {
    position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%);
    background: var(--white); border: 1px solid var(--gray-100);
    border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(16,24,40,0.18);
    padding: 8px; min-width: 260px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease;
    z-index: 100;
  }
  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu,
  .dropdown.open .dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .dropdown-menu a {
    display: block; padding: 10px 12px; border-radius: 8px;
    font-size: 14px; color: var(--gray-800); font-weight: 500;
  }
  .dropdown-menu a:hover { background: var(--primary-soft); color: var(--primary); }
  .dropdown-menu a .dd-desc { display: block; font-size: 12px; color: var(--gray-500); font-weight: 400; margin-top: 2px; }
  .nav-cta { display: flex; align-items: center; gap: 12px; }

  @media (max-width: 900px) {
    .nav-links { display: none; }
  }

  /* HERO */
  .hero {
    position: relative;
    padding: 80px 0 100px 0;
    overflow: hidden;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .hero .pill-status {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px 8px 10px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-200);
    border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--primary-strong);
    letter-spacing: 0.01em;
  }
  .hero .pill-status .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #1BA66C;
    box-shadow: 0 0 0 0 rgba(27,166,108,0.5);
    animation: pulse 2.2s infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(27,166,108,0.5);}
    70% { box-shadow: 0 0 0 10px rgba(27,166,108,0);}
    100% { box-shadow: 0 0 0 0 rgba(27,166,108,0);}
  }
  .hero h1 { margin-top: 22px; }
  .hero h1 .accent { color: var(--primary); }
  .hero h1 .italic { font-style: italic; font-weight: 400; color: var(--primary-strong); }
  .hero .hero-sub { margin-top: 22px; font-size: 20px; line-height: 1.5; color: var(--gray-700); max-width: 560px; }
  .hero-ctas { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
  .hero-proof {
    margin-top: 36px;
    display: flex; align-items: center; gap: 18px;
    font-size: 13px; color: var(--gray-600);
  }
  .hero-proof .avatars { display: flex; }
  .hero-proof .avatars .av {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary-200);
    border: 2px solid var(--white);
    margin-left: -8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--primary-strong);
    font-family: var(--font-display);
  }
  .hero-proof .avatars .av:first-child { margin-left: 0; }
  .hero-proof .avatars .av:nth-child(2) { background: var(--primary-300); color: var(--white); }
  .hero-proof .avatars .av:nth-child(3) { background: var(--primary); color: var(--white); }
  .hero-proof .avatars .av:nth-child(4) { background: var(--primary-strong); color: var(--white); }

  /* hero visual (dashboard) */
  .hero-visual {
    position: relative;
    perspective: 1400px;
  }
  .dashboard-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    box-shadow:
      0 1px 2px rgba(16,24,40,0.04),
      0 28px 60px -24px rgba(25, 30, 80, 0.28),
      0 8px 24px -12px rgba(86,98,186,0.2);
    overflow: hidden;
    transform: rotateY(-4deg) rotateX(4deg);
    transform-origin: center center;
  }
  .db-topbar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
  }
  .db-topbar .tl { width: 10px; height: 10px; border-radius: 50%; }
  .db-topbar .url {
    flex: 1; margin-left: 10px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 7px;
    font-size: 12px; padding: 5px 12px;
    color: var(--gray-500);
    font-family: ui-monospace, Menlo, monospace;
  }
  .db-body { display: flex; min-height: 460px; }
  .db-side {
    width: 180px;
    background: #FBFBFD;
    border-right: 1px solid var(--gray-100);
    padding: 18px 12px;
    font-size: 12px;
    display: flex; flex-direction: column; gap: 3px;
  }
  .db-side .logo-mini {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px 14px 6px;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 12px;
    font-weight: 700; font-size: 13px;
  }
  .db-side .logo-mini .dot { width: 12px; height: 12px; background: var(--primary); border-radius: 50%; }
  .db-nav {
    padding: 7px 10px; border-radius: 7px;
    display: flex; align-items: center; gap: 9px;
    color: var(--gray-700);
  }
  .db-nav.active { background: var(--primary-100); color: var(--primary-strong); font-weight: 600; }
  .db-nav .ico { width: 14px; height: 14px; border-radius: 3px; background: var(--gray-300); }
  .db-nav.active .ico { background: var(--primary); }
  .db-main { flex: 1; padding: 22px 24px; background: var(--white); min-width: 0; }
  .db-main h4 { font-size: 17px; margin-bottom: 2px; }
  .db-main .sub { font-size: 11px; color: var(--gray-500); margin-bottom: 16px; }
  .db-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
  .db-head .sub { margin-bottom: 0; }
  .db-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .db-search {
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    padding: 6px 10px; border-radius: 999px;
    background: var(--gray-50); border: 1px solid var(--gray-200);
    color: var(--gray-600); white-space: nowrap;
  }
  .db-pill {
    font-family: var(--font-body); font-size: 10px; font-weight: 600;
    padding: 6px 10px; border-radius: 999px;
    background: var(--primary); color: var(--white);
    white-space: nowrap;
  }
  .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
  .kpi {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
    padding: 10px 12px;
  }
  .kpi .kl { font-size: 10px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
  .kpi .kv { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--black); margin-top: 2px; letter-spacing: -0.02em; }
  .kpi .kv .trend { font-size: 10px; font-weight: 700; color: #1b9461; margin-left: 4px; }
  .chart-card { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 10px; padding: 12px; }
  .chart-title { font-size: 11px; font-weight: 600; color: var(--gray-700); margin-bottom: 10px; display: flex; justify-content: space-between; }
  .bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
  .bar { flex: 1; background: var(--primary-200); border-radius: 4px 4px 0 0; }
  .bar.hi { background: var(--primary); }
  .bar-labels { display: flex; gap: 6px; margin-top: 6px; font-size: 9px; color: var(--gray-500); }
  .bar-labels span { flex: 1; text-align: center; }
  .pl-row {
    display: grid; grid-template-columns: 18px 1fr 60px 64px;
    gap: 10px; align-items: center;
    padding: 7px 10px;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 8px; font-size: 11px;
    margin-top: 6px;
  }
  .pl-row .av { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-200); }
  .pl-row .nm { font-weight: 600; color: var(--black); }
  .pl-row .tm { color: var(--gray-500); font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
  .pl-row .tag { padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; text-align: center; letter-spacing: 0.02em; }
  .pl-row .tag.ok { background: #E6F6EE; color: #1b9461; }
  .pl-row .tag.info { background: var(--primary-100); color: var(--primary-strong); }
  .pl-row .tag.warn { background: #FFF4E0; color: #B7791F; }

  .hero-visual .floating {
    position: absolute;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    box-shadow: 0 20px 40px -20px rgba(25,30,80,0.3);
    padding: 14px 16px;
    font-size: 13px;
    display: flex; align-items: center; gap: 12px;
  }
  .hero-visual .floating.donor {
    left: -30px; top: 50px;
    min-width: 200px;
  }
  .hero-visual .floating.notif {
    right: -20px; bottom: 30px;
    min-width: 240px;
  }
  .floating .circle-ico {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary-100); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .floating .circle-ico.red { background: var(--red-soft); color: var(--red); }
  .floating .lbl { font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
  .floating .val { font-size: 14px; font-weight: 700; color: var(--black); }

  /* LOGO CLOUD */
  .logos {
    padding: 40px 0 60px;
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
  }
  .logos-label {
    text-align: center;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--gray-500);
    margin-bottom: 22px;
  }
  .logos-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 30px; flex-wrap: wrap;
  }
  .logo-item {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
    color: var(--gray-500); opacity: .82;
    white-space: nowrap;
  }
  .logo-item.serif { font-family: Georgia, serif; font-style: italic; font-weight: 400; }
  .logo-item.mono { font-family: ui-monospace, Menlo, monospace; font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; }
  .logo-item.rounded { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.03em; }

  /* PROBLEM */
  .section-head {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-end;
    margin-bottom: 64px;
  }
  .section-head .titles h2 { margin-top: 16px; }
  .section-head .titles h2 .accent { color: var(--primary); }
  .section-head .side { align-self: flex-end; }
  .section-head .side .lead { font-size: 18px; }

  @media (max-width: 900px) {
    .section-head { grid-template-columns: 1fr; gap: 24px; }
  }

  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; }
  .stat-card {
    background: var(--primary-soft);
    border-radius: 20px;
    padding: 32px 30px;
    display: flex; flex-direction: column; gap: 12px;
    min-height: 220px;
  }
  .stat-card .big {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 64px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--primary);
  }
  .stat-card.accent { background: var(--black); color: var(--white); }
  .stat-card.accent .big { color: var(--white); }
  .stat-card .label { font-size: 16px; font-weight: 500; color: var(--gray-800); line-height: 1.4; }
  .stat-card.accent .label { color: rgba(255,255,255,0.82); }
  .stat-card .src { font-size: 12px; color: var(--gray-500); margin-top: auto; font-weight: 500; }
  .stat-card.accent .src { color: rgba(255,255,255,0.55); }

  .problem-list { display: flex; flex-direction: column; }
  .problem-item {
    display: grid;
    grid-template-columns: 56px 1fr 1fr;
    gap: 28px;
    align-items: flex-start;
    padding: 26px 0;
    border-top: 1px solid var(--gray-200);
  }
  .problem-item:last-child { border-bottom: 1px solid var(--gray-200); }
  .problem-item .ico {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--primary-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
  }
  .problem-item .t { font-size: 22px; font-weight: 600; color: var(--black); margin-bottom: 6px; line-height: 1.25; letter-spacing: -0.01em; font-family: var(--font-display); }
  .problem-item .d { font-size: 16px; color: var(--gray-700); line-height: 1.5; }

  /* SOLUTION */
  .section.bg-soft { background: var(--primary-soft); }

  .solution-grid {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center;
  }
  .solution-grid .dashboard-card { transform: none; }
  @media (max-width: 1000px) {
    .solution-grid { grid-template-columns: 1fr; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual .floating { display: none; }
  }

  .check-list { list-style: none; padding: 0; margin: 28px 0 0 0; display: flex; flex-direction: column; gap: 14px; }
  .check-list li {
    display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: flex-start;
    font-size: 17px; line-height: 1.5; color: var(--gray-800);
  }
  .check-list li .chk {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
  }
  .check-list li strong { color: var(--black); font-weight: 600; }

  /* MODULES */
  .modules-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  }
  .modules-grid.nine { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 1000px) {
    .modules-grid,
    .modules-grid.nine { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .modules-grid,
    .modules-grid.nine { grid-template-columns: 1fr; }
  }

  .module {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 28px 26px;
    min-height: 168px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
  }
  .module::after {
    /* sottile decoro angolare in alto a destra */
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-100) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .module:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -22px rgba(86,98,186,0.28);
  }
  .module:hover::after { opacity: 1; }

  .module .m-ico {
    position: relative;
    width: 52px; height: 52px; border-radius: 13px;
    background: var(--primary-100);
    color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease;
  }
  .module:hover .m-ico {
    background: var(--primary);
    color: var(--white);
  }

  .module .m-title {
    position: relative;
    font-family: var(--font-display);
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--black);
    line-height: 1.18;
    padding-right: 40px;
  }

  .module .m-arrow {
    position: absolute;
    right: 22px; bottom: 22px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-700);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .module:hover .m-arrow {
    background: var(--primary);
    color: var(--white);
    transform: translateX(3px);
  }

  /* legacy class kept for backward-compat (no longer used) */
  .module .m-desc { font-size: 14px; line-height: 1.5; color: var(--gray-700); }

  /* HOW — flow */
  .flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
  }
  @media (max-width: 900px) { .flow { grid-template-columns: 1fr; } }

  .flow-step {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    padding: 32px 30px;
    display: flex; flex-direction: column; gap: 14px;
    position: relative;
    min-height: 280px;
  }
  .flow-step.hi { background: var(--primary); border-color: var(--primary); color: var(--white); }
  .flow-step .num {
    font-family: var(--font-display); font-weight: 900;
    font-size: 36px; color: var(--primary); letter-spacing: -0.03em; line-height: 1;
  }
  .flow-step.hi .num { color: var(--white); }
  .flow-step .st-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 24px; letter-spacing: -0.02em; color: var(--black); line-height: 1.2;
  }
  .flow-step.hi .st-title { color: var(--white); }
  .flow-step .st-desc { font-size: 15px; color: var(--gray-700); line-height: 1.5; }
  .flow-step.hi .st-desc { color: rgba(255,255,255,0.86); }
  .flow-step .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
  .flow-step .chip {
    padding: 5px 10px; background: var(--primary-100); color: var(--primary-strong);
    border-radius: 999px; font-size: 11px; font-weight: 600;
  }
  .flow-step.hi .chip { background: rgba(255,255,255,0.2); color: var(--white); }

  .timeline-row {
    margin-top: 36px;
    display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;
    font-size: 15px; color: var(--gray-600);
  }
  .timeline-row strong { color: var(--black); font-weight: 700; }
  .timeline-row .sep { color: var(--gray-400); }

  /* RESULTS / QUOTE */
  .results-grid {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
  }
  @media (max-width: 1000px) { .results-grid { grid-template-columns: 1fr; } }
  .quote-block {
    background: var(--primary-soft);
    border-radius: 24px;
    padding: 48px 48px 40px 48px;
    position: relative;
  }
  .quote-block .qmark {
    font-family: var(--font-display); font-weight: 900;
    font-size: 140px; color: var(--primary);
    position: absolute; top: -10px; left: 32px;
    line-height: 1;
  }
  .quote-block blockquote {
    font-family: var(--font-display); font-weight: 400;
    font-size: 28px; line-height: 1.3;
    color: var(--black);
    margin: 40px 0 28px 0;
    letter-spacing: -0.015em;
    text-wrap: pretty;
  }
  .quote-block blockquote em { font-style: italic; color: var(--primary); }
  .author-row { display: flex; align-items: center; gap: 14px; }
  .author-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--primary-200);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px; color: var(--primary-strong);
    font-family: var(--font-display);
  }
  .author-row .who { font-size: 16px; font-weight: 600; color: var(--black); }
  .author-row .role { font-size: 13px; color: var(--gray-600); }

  .case-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  }
  .case-stat {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 26px 24px;
  }
  .case-stat .n {
    font-family: var(--font-display); font-weight: 900;
    font-size: 48px; line-height: 1; letter-spacing: -0.035em;
    color: var(--primary);
  }
  .case-stat .l { font-size: 14px; color: var(--gray-700); line-height: 1.4; margin-top: 8px; }

  /* CTA */
  .cta-section {
    padding: 100px 0;
    background: var(--primary);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .cta-section .bg-blob-a {
    position: absolute; right: -200px; top: -200px;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%);
  }
  .cta-section .bg-blob-b {
    position: absolute; left: -150px; bottom: -150px;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle at 60% 60%, rgba(255,255,255,0.1), rgba(255,255,255,0) 60%);
  }
  .cta-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center;
  }
  @media (max-width: 900px) {
    .cta-inner { grid-template-columns: 1fr; }
  }
  .cta-inner h2 { color: var(--white); font-size: clamp(36px, 4.5vw, 60px); }
  .cta-inner .cta-lead { color: rgba(255,255,255,0.85); font-size: 20px; margin-top: 18px; max-width: 560px; line-height: 1.5; }

  .demo-card {
    background: var(--white);
    border-radius: 20px;
    padding: 32px 32px 28px 32px;
    color: var(--black);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3);
  }
  .demo-card h3 { font-size: 22px; margin-bottom: 14px; }
  .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .form-row label { font-size: 12px; font-weight: 600; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.08em; }
  .form-row input, .form-row select, .form-row textarea {
    padding: 12px 14px; border-radius: 10px; border: 1px solid var(--gray-200);
    font-size: 15px; font-family: inherit; color: var(--black); background: var(--white);
    transition: border-color .15s ease, box-shadow .15s ease;
    line-height: 1.45;
  }
  .form-row textarea { resize: vertical; min-height: 86px; }
  .form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-100);
  }
  .form-row .form-opt {
    font-size: 11px; font-weight: 500; color: var(--gray-500);
    text-transform: none; letter-spacing: 0;
    margin-left: 4px;
  }
  .form-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .demo-card .btn-primary { width: 100%; justify-content: center; margin-top: 6px; }
  .demo-card .note { font-size: 12px; color: var(--gray-500); margin-top: 10px; text-align: center; line-height: 1.4; }

  /* FOOTER */
  footer { background: var(--gray-50); border-top: 1px solid var(--gray-100); padding: 72px 0 32px 0; }
  .foot-grid {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px;
    margin-bottom: 48px;
  }
  @media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  .foot-brand .logo { margin-bottom: 14px; }
  .foot-brand p { font-size: 14px; color: var(--gray-600); line-height: 1.55; max-width: 340px; }
  .foot-col h5 {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--gray-500); margin: 0 0 14px 0;
  }
  .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .foot-col a { font-size: 14px; color: var(--gray-700); transition: color .15s ease; }
  .foot-col a:hover { color: var(--primary); }
  .foot-bottom {
    border-top: 1px solid var(--gray-200);
    padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: var(--gray-500);
    flex-wrap: wrap; gap: 12px;
  }
  .foot-bottom .fb-links { display: flex; gap: 20px; }
  .foot-bottom .fb-links a:hover { color: var(--black); }

  /* Subtle reveal on scroll */
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* hero bg decoration */
  .hero-bg {
    position: absolute;
    pointer-events: none;
    top: -120px; right: -120px;
    width: 600px; height: 600px;
    background: radial-gradient(circle at 30% 30%, var(--primary-100), transparent 60%);
    z-index: -1;
  }

  /* Responsive hero */
  @media (max-width: 900px) {
    .hero { padding: 48px 0 64px 0; }
    .section { padding: 80px 0; }
  }

  /* Hero → Problema divider */
  .hero-divider {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    margin-top: 8px;
    height: 64px;
    pointer-events: none;
  }
  .hd-line {
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--gray-200) 40%, var(--primary) 100%);
    transform: scaleY(0);
    transform-origin: top center;
    animation: hd-grow 1.1s cubic-bezier(.7,0,.3,1) forwards;
    height: 100%;
  }
  .hd-dot {
    position: absolute;
    bottom: -3px; left: 50%;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
    transform: translateX(-50%) scale(0);
    animation: hd-pop 0.4s 1.0s cubic-bezier(.5,1.7,.5,1) forwards;
  }
  .hd-dot::after {
    content: '';
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    opacity: 0;
    animation: hd-pulse 2.6s 1.5s ease-out infinite;
  }
  @keyframes hd-grow { to { transform: scaleY(1); } }
  @keyframes hd-pop { to { transform: translateX(-50%) scale(1); } }
  @keyframes hd-pulse {
    0% { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
  }
  @media (max-width: 900px) {
    .hero-divider { height: 44px; margin-top: 4px; }
  }

  /* Reduce hero bottom padding + section top padding so the divider connects */
  .hero { padding-bottom: 32px; }
  #per-chi { padding-top: 40px; }
  @media (max-width: 900px) {
    #per-chi { padding-top: 24px; }
  }


  /* FOOTER (canonical) */
  .site-footer {
    background: var(--blue-900);
    color: rgba(255,255,255,0.75);
    padding: 80px 0 32px 0;
  }
  .site-footer .foot-grid {
    display: grid; grid-template-columns: 1fr; gap: 40px;
  }
  @media (min-width: 920px) {
    .site-footer .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
  }
  .site-footer .foot-logo { height: 22px; filter: brightness(0) invert(1); }
  .site-footer .foot-brand .foot-tagline {
    margin-top: 18px;
    color: var(--white);
    font-family: var(--font-display); font-weight: 600;
    font-size: 16px; line-height: 1.4; letter-spacing: -0.01em;
    max-width: 38ch;
  }
  .site-footer .foot-brand .foot-mission {
    margin-top: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 13px; line-height: 1.55;
    max-width: 42ch;
  }
  .site-footer .eu-logo {
    margin-top: 22px;
    display: block;
    max-width: 260px; height: auto;
    background: var(--white);
    border-radius: 6px;
    padding: 8px 12px;
  }
  .site-footer .foot-col h5 {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: rgba(255,255,255,0.5);
    margin: 0 0 14px 0;
    font-family: var(--font-mono);
  }
  .site-footer .foot-col p {
    margin: 0 0 6px 0;
    font-size: 13px; line-height: 1.55;
    color: rgba(255,255,255,0.78);
  }
  .site-footer .foot-col p.muted { color: rgba(255,255,255,0.5); font-size: 12px; }
  .site-footer .foot-col a { color: rgba(255,255,255,0.85); }
  .site-footer .foot-col a:hover { color: var(--white); }
  .site-footer .foot-col strong { color: var(--white); font-weight: 600; }
  .site-footer .foot-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 22px;
    margin-top: 56px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
  }
  .site-footer .foot-bottom .fb-meta {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
  }


  /* NAV (canonical) */
  .nav.canon {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-100);
  }
  .nav.canon .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px;
    padding: 18px 40px;
    max-width: var(--container, 1240px); margin: 0 auto;
  }
  .nav.canon .logo { display: inline-flex; align-items: center; gap: 12px; }
  .nav.canon .logo img.logotype { height: 26px; width: auto; display: block; }
  .nav.canon .nav-links { display: flex; align-items: center; gap: 32px; margin-right: auto; }
  .nav.canon .nav-links a { font-size: 15px; font-weight: 500; color: var(--gray-700); transition: color .15s ease; }
  .nav.canon .nav-links a:hover, .nav.canon .nav-links a.active { color: var(--primary); }
  .nav.canon .nav-links a.active { font-weight: 600; }
  @media (max-width: 800px) { .nav.canon .nav-links { display: none; } }


@media (max-width: 900px) {
  .modules-cta { grid-column: span 2 !important; flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 600px) {
  .modules-cta { grid-column: span 1 !important; }
}

/* ───────────────────────────────────────
   STAKEHOLDERS — "Pensata per chi"
─────────────────────────────────────── */
.stakeholders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stakeholders-grid.two-up { grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 1000px) {
  .stakeholders-grid,
  .stakeholders-grid.two-up { grid-template-columns: 1fr; }
}

.stakeholder-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.stakeholder-card:hover {
  border-color: var(--primary-200);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -24px rgba(86,98,186,0.2);
}
.stakeholder-card .sh-ico {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--primary-100);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.stakeholder-card .sh-tag {
  display: inline-flex; align-self: flex-start;
  padding: 5px 11px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-200);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary-strong);
  margin-top: -4px;
}
.stakeholder-card h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 26px; letter-spacing: -0.02em; color: var(--black);
  line-height: 1.18; margin: 0;
}
.stakeholder-card .sh-lede {
  font-size: 16px; color: var(--gray-700); line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

/* ───────────────────────────────────────
   CONTINUITY — "Si integra con il vostro centro"
─────────────────────────────────────── */
.continuity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) { .continuity-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .continuity-grid { grid-template-columns: 1fr; } }

.continuity-pillar {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.continuity-pillar.optional {
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--white) 60%);
  border-color: var(--primary-200);
}
.continuity-pillar .cp-flag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary-strong);
  background: var(--white);
  border: 1px solid var(--primary-200);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(86,98,186,0.08);
}
.continuity-pillar .cp-flag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.continuity-pillar .cp-ico {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.continuity-pillar.optional .cp-ico {
  background: var(--white);
  color: var(--primary);
  border: 1px solid var(--primary-200);
}
.continuity-pillar h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.01em;
  color: var(--black); line-height: 1.25; margin: 0;
}
.continuity-pillar p {
  font-size: 14px; line-height: 1.55; color: var(--gray-700);
  margin: 0;
}

/* ───────────────────────────────────────
   TRUST — "Costruita sugli standard del SSN"
─────────────────────────────────────── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .trust-grid { grid-template-columns: 1fr; } }

.trust-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.trust-item .tr-ico {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--primary-100);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-item .tr-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: -0.01em;
  color: var(--black); line-height: 1.25;
  margin-top: 4px;
}
.trust-item .tr-d {
  font-size: 13px; line-height: 1.5; color: var(--gray-600);
}

/* ───────────────────────────────────────
   OUTCOMES — qualitative
─────────────────────────────────────── */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .outcomes-grid { grid-template-columns: 1fr; } }

.outcome-card {
  background: var(--primary-soft);
  border-radius: 20px;
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--primary-200);
}
.outcome-card .oc-ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--white);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--primary-200);
}
.outcome-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.015em;
  color: var(--black); line-height: 1.2; margin: 0;
}
.outcome-card p {
  font-size: 15px; line-height: 1.55; color: var(--gray-700);
  margin: 0;
}

/* ───────────────────────────────────────
   CTA bullets (used in cta-section)
─────────────────────────────────────── */
.cta-bullets {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 14px;
  max-width: 480px;
}
.cta-bullet {
  display: flex; align-items: center; gap: 14px;
  font-size: 15px; color: rgba(255,255,255,0.92);
}
.cta-bullet .cb-tick {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ───────────────────────────────────────
   ANIMAZIONI & GRAPHIC ACCENTS
─────────────────────────────────────── */

/* Hero dashboard: stagger draw-in delle barre */
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.hero-visual .bars .bar {
  transform-origin: bottom;
  transform: scaleY(0);
  animation: barGrow 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.hero-visual .bars .bar:nth-child(1) { animation-delay: 0.45s; }
.hero-visual .bars .bar:nth-child(2) { animation-delay: 0.55s; }
.hero-visual .bars .bar:nth-child(3) { animation-delay: 0.65s; }
.hero-visual .bars .bar:nth-child(4) { animation-delay: 0.75s; }
.hero-visual .bars .bar:nth-child(5) { animation-delay: 0.85s; }
.hero-visual .bars .bar:nth-child(6) { animation-delay: 0.95s; }
.hero-visual .bars .bar:nth-child(7) { animation-delay: 1.05s; }

/* Floating badges: gentle bob (sinusoidale, sfasati) */
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.hero-visual .floating.donor {
  animation: float-bob 5.2s ease-in-out infinite;
}
.hero-visual .floating.notif {
  animation: float-bob 5.6s ease-in-out infinite;
  animation-delay: -1.8s; /* sfasato per evitare sincronia */
}

/* CTA: blobs che derivano lentamente */
@keyframes blob-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, 20px) scale(1.05); }
}
@keyframes blob-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -15px) scale(0.97); }
}
.cta-section .bg-blob-a { animation: blob-drift-a 14s ease-in-out infinite; }
.cta-section .bg-blob-b { animation: blob-drift-b 16s ease-in-out infinite; }

/* Live indicator nel topbar del mockup hero */
.hero-visual .db-topbar .url::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1BA66C;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(27,166,108,0.55);
  animation: pulse 2.2s infinite;
}

/* Btn primary: subtle sheen on hover */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover::after { left: 130%; }

/* Dot pattern decorativo per sezioni chiare */
.section-dotted {
  position: relative;
  isolation: isolate;
}
.section-dotted::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(86,98,186,0.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
  opacity: 0.7;
  z-index: -1;
}

/* Continuity: optional card riceve un sottile glow pulsante */
@keyframes optional-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(86,98,186,0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(86,98,186,0.06); }
}
.continuity-pillar.optional {
  animation: optional-glow 4s ease-in-out infinite;
}

/* Stakeholder cards: gradient sweep on hover */
.stakeholder-card { position: relative; isolation: isolate; overflow: hidden; }
.stakeholder-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, var(--primary-100) 0%, transparent 40%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: -1;
}
.stakeholder-card:hover::before { opacity: 0.55; }

/* Hero divider dot: già pulsing, raffino il timing */
.hd-dot::after { animation-duration: 3.2s; }

/* Reduced motion: disabilita tutte le animazioni decorative */
@media (prefers-reduced-motion: reduce) {
  .hero-visual .bars .bar,
  .hero-visual .floating.donor,
  .hero-visual .floating.notif,
  .cta-section .bg-blob-a,
  .cta-section .bg-blob-b,
  .continuity-pillar.optional,
  .hero-visual .db-topbar .url::before {
    animation: none !important;
  }
  .hero-visual .bars .bar { transform: scaleY(1); }
  .btn-primary::after { display: none; }
}

/* ───────────────────────────────────────
   MOBILE MENU + RESPONSIVE POLISH
─────────────────────────────────────── */

/* Toggle button (hamburger) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  position: relative;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
.nav-toggle span {
  display: block;
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform .25s ease, opacity .15s ease, top .25s ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }

body.nav-open .nav-toggle span:nth-child(1) {
  top: 21px; transform: rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) {
  top: 21px; transform: rotate(-45deg);
}

/* Mobile menu panel */
.nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity .3s ease, transform .35s cubic-bezier(0.4, 0, 0.2, 1), visibility .35s;
  padding-top: 80px;
  overflow-y: auto;
}
body.nav-open .nav-mobile {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.nav-mobile-inner {
  padding: 24px 28px 60px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-mobile a:not(.btn) {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--black);
  padding: 14px 4px;
  border-bottom: 1px solid var(--gray-100);
  transition: color .15s ease, transform .2s ease;
}
.nav-mobile a:not(.btn):active {
  color: var(--primary);
  transform: translateX(4px);
}
.nav-mobile-cta {
  margin-top: 24px;
  font-size: 16px !important;
  padding: 16px 24px !important;
  justify-content: center;
}

@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .nav-cta-desk { display: none; }
}
@media (min-width: 801px) {
  .nav-mobile { display: none !important; }
}

/* Mobile section padding ridotto */
@media (max-width: 768px) {
  .section { padding: 72px 0 !important; }
  .container { padding: 0 20px; }
  .hero { padding: 56px 0 80px 0 !important; }
}
@media (max-width: 480px) {
  .section { padding: 60px 0 !important; }
  .container { padding: 0 18px; }
}

/* Touch active states (su mobile/touch) */
@media (hover: none) {
  .module:active,
  .stakeholder-card:active,
  .continuity-pillar:active,
  .trust-item:active,
  .outcome-card:active {
    transform: scale(0.98);
    transition: transform .1s ease;
  }
}

/* ───────────────────────────────────────
   MODULES — carosello orizzontale su mobile
─────────────────────────────────────── */
@media (max-width: 700px) {
  .modules-grid {
    grid-template-columns: none !important;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 -18px;
    padding: 4px 18px 18px 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 18px;
  }
  .modules-grid::-webkit-scrollbar { display: none; }
  .modules-grid .module {
    flex: 0 0 80%;
    max-width: 320px;
    min-height: 168px;
    scroll-snap-align: start;
  }
}

/* Hint di scroll: piccolo gradient sul bordo destro per suggerire "swipe" */
@media (max-width: 700px) {
  #prodotto .container {
    position: relative;
  }
  #prodotto .container::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to left, var(--primary-soft), transparent);
    pointer-events: none;
  }
}

/* ───────────────────────────────────────
   STICKY MOBILE CTA
─────────────────────────────────────── */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  background: var(--primary);
  color: var(--white);
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 14px 32px -10px rgba(86,98,186,0.55),
    0 6px 14px rgba(0,0,0,0.10);
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), opacity .25s ease, background .2s ease;
}
.mobile-sticky-cta:active { background: var(--primary-strong); transform: scale(0.98); }
.mobile-sticky-cta.hidden {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .mobile-sticky-cta { display: inline-flex; }
  /* spazio per non sovrapporre il footer */
  .site-footer .foot-bottom { margin-bottom: 72px; }
}

/* Su mobile riduci leggermente blur e shadow per perf */
@media (max-width: 700px) {
  .nav.canon { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .module:hover {
    transform: none;  /* niente lift su touch */
    box-shadow: 0 10px 24px -16px rgba(86,98,186,0.2);
  }
  .module::after { display: none; }  /* niente decoro radiale */
  .stakeholder-card:hover { transform: none; }
}

/* Hero visual: nascondi i floating su small screen (già fatto a 1000px), 
   ma su mobile small (<480) compatta tutto */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(36px, 9vw, 48px); }
  .hero .hero-sub { font-size: 16px; }
  .demo-card { padding: 24px 22px; border-radius: 16px; }
  .demo-card h3 { font-size: 19px; }
  .form-row input, .form-row select, .form-row textarea {
    padding: 14px 14px;  /* tap target più grande */
    font-size: 16px;     /* iOS: niente zoom su focus */
  }
}

/* ───────────────────────────────────────
   MOBILE — REFINEMENT "POCKET PREMIUM"
─────────────────────────────────────── */

/* Tipografia ridotta e tight – si privilegia la gerarchia, non la dimensione */
@media (max-width: 600px) {
  h1 {
    font-size: clamp(30px, 8.4vw, 40px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
  }
  h2 {
    font-size: clamp(24px, 6.6vw, 34px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
  }
  h3 { font-size: 18px !important; line-height: 1.25 !important; }
  h4 { font-size: 16px !important; }

  p, .lead, .hero-sub {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }
  .lead { font-size: 16px !important; max-width: 100%; }

  /* Strong tags meno aggressivi su mobile */
  .hero-sub strong, .lead strong { font-weight: 600 !important; }

  /* Eyebrow più piccolo per non rubare spazio */
  .eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }
  .eyebrow::before { width: 16px !important; }

  /* CTA buttons più raffinati */
  .btn { padding: 12px 18px; font-size: 14px; border-radius: 10px; }
  .hero-ctas .btn { width: auto; }
}

@media (max-width: 400px) {
  h1 { font-size: 30px !important; }
  h2 { font-size: 24px !important; }
}

/* Spacing più stretti per ritmo curato */
@media (max-width: 600px) {
  .section { padding: 56px 0 !important; }
  .hero { padding: 40px 0 56px 0 !important; }
  .product-feature { padding: 56px 0 !important; }
  .rosso, .contatti { padding: 56px 0 !important; }
  .site-footer { padding: 48px 0 24px 0 !important; }

  .section-head { margin-bottom: 32px !important; gap: 16px !important; }
  .section-head .titles h2 { margin-top: 8px !important; }

  /* Hero CTA: stack su mobile per tap più ampio */
  .hero-ctas { gap: 10px; flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
}

/* Scroll progress bar – WOW touch sottile sopra la nav */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--blue-500, #869ACB));
  z-index: 100;
  pointer-events: none;
  transition: width 0.08s linear;
  border-bottom-right-radius: 2px;
}

/* Hero entrance: stagger su h1, sub, CTA su mobile */
@media (max-width: 800px) {
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero h1, .hero .hero-sub, .hero .hero-ctas {
    animation: hero-rise 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .hero h1 { animation-delay: 0.05s; }
  .hero .hero-sub { animation-delay: 0.18s; }
  .hero .hero-ctas { animation-delay: 0.30s; }
}

/* Decorazione sottile dietro l'h1 su mobile (gradient blob) */
@media (max-width: 600px) {
  .hero { position: relative; }
  .hero::after {
    content: '';
    position: absolute;
    top: -40px; right: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-100), transparent 65%);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
  }
  .hero .container { position: relative; z-index: 1; }
}

/* Override su mobile: elementi "grossi" specifici di ema-os */
@media (max-width: 600px) {
  /* Hero h1 ema-os: stretto e impattante */
  .hero h1 .accent { display: inline; }

  /* Demo card: più compatta */
  .demo-card { padding: 24px 20px !important; border-radius: 16px !important; }
  .demo-card h3 { font-size: 18px !important; margin-bottom: 12px !important; }
  .form-row { margin-bottom: 12px !important; }
  .form-row label { font-size: 11px !important; }

  /* Stakeholder cards più contenute */
  .stakeholder-card { padding: 28px 22px !important; }
  .stakeholder-card h3 { font-size: 22px !important; }
  .stakeholder-card .sh-lede { font-size: 14.5px !important; }

  /* Module cards più tight */
  .module { padding: 22px 20px !important; min-height: 148px !important; }
  .module .m-title { font-size: 18px !important; }
  .module .m-ico { width: 44px !important; height: 44px !important; }
  .module .m-arrow { width: 28px !important; height: 28px !important; right: 18px; bottom: 18px; }

  /* Continuity pillars */
  .continuity-pillar { padding: 22px 20px !important; }
  .continuity-pillar h4 { font-size: 16px !important; }

  /* Trust grid: 2 col su mobile per leggibilità */
  .trust-grid { gap: 12px !important; }
  .trust-item { padding: 18px 16px !important; }
  .trust-item .tr-t { font-size: 14px !important; }
  .trust-item .tr-d { font-size: 12px !important; }

  /* Outcome cards */
  .outcome-card { padding: 26px 22px !important; }
  .outcome-card h3 { font-size: 20px !important; }
  .outcome-card p { font-size: 14.5px !important; }

  /* Sticky CTA: più piccolo, refined */
  .mobile-sticky-cta { padding: 14px 20px !important; font-size: 14px !important; border-radius: 12px !important; }

  /* Hero subtext: meno aggressivo */
  .hero .hero-sub br { display: none; }  /* niente line breaks artificiali */
}

/* Footer compatto su mobile */
@media (max-width: 600px) {
  .site-footer { padding: 48px 0 24px 0 !important; }
  .site-footer .foot-grid { gap: 28px !important; }
  .site-footer .foot-brand .foot-tagline { font-size: 14px !important; }
  .site-footer .foot-bottom { margin-top: 32px !important; padding-top: 18px !important; }
}

/* ───────────────────────────────────────
   MOBILE — REDESIGN RADICALE
   "Riassunto, scopri di più, niente futili"
─────────────────────────────────────── */
@media (max-width: 700px) {

  /* HERO: niente line break dentro h1, hero-sub asciutto */
  .hero h1 br { display: none; }
  .hero-sub-extra { display: none; }
  .hero-sub { font-size: 16px !important; line-height: 1.55 !important; max-width: 100% !important; }
  .hero-sub strong { font-weight: 600 !important; }

  /* HERO CTAs: solo primary full-width, secondary come link sotto */
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-ctas .btn { justify-content: center !important; }
  .hero-ctas .btn-ghost {
    background: transparent !important;
    border: 0 !important;
    color: var(--primary) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 8px !important;
    font-weight: 600;
  }

  /* TRUST: 2-col su mobile, descrizioni nascoste, solo icona+titolo */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .trust-item {
    padding: 18px 14px !important;
    gap: 10px !important;
  }
  .trust-item .tr-d { display: none; }   /* leva descrizioni: solo icone+titoli */
  .trust-item .tr-t { font-size: 13.5px !important; line-height: 1.3 !important; }
  .trust-item .tr-ico {
    width: 36px !important; height: 36px !important;
    border-radius: 9px !important;
  }
  .trust-item .tr-ico svg { width: 16px; height: 16px; }

  /* OUTCOMES: stacked + descrizioni più tight */
  .outcomes-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .outcome-card { padding: 22px 20px !important; gap: 10px !important; }
  .outcome-card .oc-ico { width: 40px !important; height: 40px !important; }
  .outcome-card h3 { font-size: 18px !important; }
  .outcome-card p { font-size: 14px !important; }

  /* CONTINUITY: stacked, pad ridotti */
  .continuity-grid { gap: 12px !important; }
  .continuity-pillar { padding: 20px 18px !important; }
  .continuity-pillar h4 { font-size: 16px !important; }
  .continuity-pillar p { font-size: 14px !important; }

  /* STAKEHOLDER cards: senza glow / overlay decorations */
  .stakeholder-card::before { display: none !important; }
  .stakeholder-card { padding: 26px 22px !important; }
  .stakeholder-card .sh-ico { width: 48px !important; height: 48px !important; }
  .stakeholder-card .sh-tag {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    padding: 4px 9px !important;
  }
  .stakeholder-card h3 { font-size: 22px !important; line-height: 1.18 !important; }
  .stakeholder-card .sh-lede { font-size: 14.5px !important; }

  /* PER-CHI: niente dot pattern decorativo (rumore in più) */
  .section-dotted::before { display: none !important; }

  /* CTA: form lead più asciutto */
  .cta-section { padding: 64px 0 !important; }
  .cta-inner { gap: 32px !important; }
  .cta-inner h2 { font-size: clamp(28px, 7vw, 38px) !important; }
  .cta-lead { font-size: 15px !important; line-height: 1.55 !important; }

  /* SECTION HEAD: side text più piccolo */
  .section-head { gap: 12px !important; }
  .section-head .lead { font-size: 15.5px !important; }
}

/* ───────────────────────────────────────
   FIX OVERFLOW ORIZZONTALE — solo mobile
─────────────────────────────────────── */
@media (max-width: 1000px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ───────────────────────────────────────
   CONTINUITY: carosello orizzontale su mobile
─────────────────────────────────────── */
@media (max-width: 700px) {
  .continuity-grid {
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 14px !important;
    margin: 0 -18px !important;
    padding: 4px 18px 18px 18px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .continuity-grid::-webkit-scrollbar { display: none; }
  .continuity-pillar {
    flex: 0 0 78% !important;
    max-width: 320px;
    scroll-snap-align: start;
    min-height: 200px;
  }

  /* Outcomes: stessa coerenza, carosello */
  .outcomes-grid {
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    margin: 0 -18px !important;
    padding: 4px 18px 18px 18px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .outcomes-grid::-webkit-scrollbar { display: none; }
  .outcome-card {
    flex: 0 0 80% !important;
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* Stakeholders: anche loro carosello orizzontale (solo 2 card, ma consistency) */
  .stakeholders-grid {
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 14px !important;
    margin: 0 -18px !important;
    padding: 4px 18px 18px 18px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stakeholders-grid::-webkit-scrollbar { display: none; }
  .stakeholders-grid.two-up { grid-template-columns: none !important; }
  .stakeholder-card {
    flex: 0 0 86% !important;
    max-width: 360px;
    scroll-snap-align: start;
  }

  /* Hint visivo: piccolo indicatore "swipe" sotto ogni carosello */
  .modules-grid::after,
  .continuity-grid::after,
  .outcomes-grid::after,
  .stakeholders-grid::after {
    content: '';
    flex: 0 0 4px;  /* spazio in fondo per scroll naturale */
  }
}

/* Hero ema-os: risolvi taglio nascondendo overflow + hero-visual contained — solo mobile */
@media (max-width: 1000px) {
  .hero { overflow: hidden; }
  .hero-visual { max-width: 100% !important; overflow: hidden; }
  .dashboard-card { max-width: 100% !important; }
}

/* Sotto 700px: hero ema-os solo testo (niente dashboard mockup, troppo denso) */
@media (max-width: 700px) {
  .hero .hero-visual { display: none !important; }
}

/* ───────────────────────────────────────
   MENU MOBILE — REDESIGN ELEGANTE (drawer + scrim + glass)
   Solo mobile (≤800px), desktop intatto
─────────────────────────────────────── */
@media (max-width: 800px) {
  /* Outer: scrim con blur, niente più bianco pieno */
  .nav-mobile {
    background: rgba(15, 18, 28, 0.5) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    transform: none !important;
    padding-top: 0 !important;
    transition: opacity .28s ease, visibility .32s !important;
  }
  body.nav-open .nav-mobile {
    transform: none !important;
  }

  /* Inner: drawer da destra */
  .nav-mobile-inner {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 86% !important;
    max-width: 360px !important;
    background: var(--white) !important;
    padding: 0 !important;
    transform: translateX(100%) !important;
    transition: transform .32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -16px 0 40px -10px rgba(0,0,0,0.18) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow-y: auto;
  }
  body.nav-open .nav-mobile-inner {
    transform: translateX(0) !important;
  }

  /* Header: logo + close X */
  .nav-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--gray-100);
    flex-shrink: 0;
  }
  .nav-mobile-head .logotype {
    height: 22px;
    width: auto;
    display: block;
  }
  .nav-mobile-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--gray-100);
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-700);
    transition: background .15s, color .15s, transform .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-mobile-close:active {
    background: var(--gray-200);
    color: var(--black);
    transform: scale(0.94);
  }

  /* Lista link refined: piccola, soft, con chevron */
  .nav-mobile-links {
    flex: 1;
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nav-mobile-links a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    color: var(--gray-900, #17181C) !important;
    border: 0 !important;
    border-radius: 10px;
    transition: background .15s, color .15s, padding-left .2s;
    text-decoration: none;
  }
  .nav-mobile-links a::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 1.5px solid var(--gray-400);
    border-top: 1.5px solid var(--gray-400);
    transform: rotate(45deg);
    transition: border-color .2s, transform .2s;
    margin-right: 4px;
  }
  .nav-mobile-links a:active,
  .nav-mobile-links a:hover {
    background: var(--primary-soft);
    color: var(--primary-strong) !important;
    padding-left: 18px !important;
  }
  .nav-mobile-links a:active::after,
  .nav-mobile-links a:hover::after {
    border-color: var(--primary);
    transform: rotate(45deg) translate(2px, -2px);
  }

  /* Footer drawer: CTA primary full-width */
  .nav-mobile-foot {
    padding: 14px 18px 22px 18px;
    border-top: 1px solid var(--gray-100);
    flex-shrink: 0;
  }
  .nav-mobile-foot .btn {
    width: 100%;
    justify-content: center;
    padding: 13px 22px !important;
    font-size: 15px !important;
    border-radius: 12px;
  }

  /* Hamburger: linee più sottili, colore neutro */
  .nav-toggle span {
    background: var(--gray-900, #17181C) !important;
    height: 1.5px !important;
    border-radius: 2px;
    width: 18px !important;
    left: 13px !important;
  }
  .nav-toggle span:nth-child(1) { top: 16px !important; }
  .nav-toggle span:nth-child(2) { top: 21px !important; }
  .nav-toggle span:nth-child(3) { top: 26px !important; }
  body.nav-open .nav-toggle span:nth-child(1) { top: 21px !important; transform: rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(3) { top: 21px !important; transform: rotate(-45deg); }
}

/* Annulla i vecchi stili "rinocerontici" che erano applicati ai figli diretti di .nav-mobile */
@media (max-width: 800px) {
  .nav-mobile a:not(.btn) {
    /* override completo del vecchio stile big bold */
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-bottom: 0 !important;
    padding: 14px !important;
    letter-spacing: -0.005em !important;
  }
  /* Gli a fuori da .nav-mobile-links resettati a stile button */
  .nav-mobile-foot a.btn { font-weight: 600 !important; }
}

/* ───────────────────────────────────────
   FOOTER compatto su mobile (ema-os)
─────────────────────────────────────── */
@media (max-width: 700px) {
  .site-footer {
    padding: 40px 0 88px 0 !important; /* spazio per sticky CTA bottom */
  }
  .site-footer .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .site-footer .foot-brand .foot-tagline {
    font-size: 14px !important;
    margin-top: 12px !important;
  }
  .site-footer .foot-brand .foot-mission {
    font-size: 12.5px !important;
    margin-top: 6px !important;
  }
  .site-footer .eu-logo {
    margin-top: 14px !important;
    max-width: 200px !important;
  }
  .site-footer .foot-col h5 {
    font-size: 10px !important;
    margin-bottom: 8px !important;
  }
  .site-footer .foot-col p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin: 0 0 4px 0 !important;
  }
  .site-footer .foot-col p[style*="margin-top"] {
    margin-top: 12px !important;
  }
  .site-footer .foot-bottom {
    margin-top: 28px !important;
    padding-top: 16px !important;
    font-size: 11px !important;
    flex-direction: column;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .foot-logo { height: 18px !important; }
}

/* ───────────────────────────────────────
   CAROSELLI — fix peek (no taglio brutto su destra)
─────────────────────────────────────── */
@media (max-width: 700px) {
  /* Card più larghe: peek piccolo (~24px) e pulito */
  .modules-grid .module {
    flex: 0 0 calc(100% - 56px) !important;
    max-width: 320px !important;
  }
  .continuity-grid .continuity-pillar {
    flex: 0 0 calc(100% - 56px) !important;
    max-width: 320px !important;
  }
  .outcomes-grid .outcome-card {
    flex: 0 0 calc(100% - 56px) !important;
    max-width: 320px !important;
  }
  .stakeholders-grid .stakeholder-card {
    flex: 0 0 calc(100% - 56px) !important;
    max-width: 360px !important;
  }

  /* Padding-right del carosello aumentato per chiusura elegante in fondo */
  .modules-grid,
  .continuity-grid,
  .outcomes-grid,
  .stakeholders-grid {
    padding-right: 28px !important;
  }

  /* Gradient fade sul bordo destro = sezioni con bg-soft */
  #prodotto { position: relative; overflow: hidden; }
  #prodotto::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(to left, var(--primary-soft), transparent);
    pointer-events: none;
    z-index: 3;
  }

  /* Sezioni con bg bianco (continuity, outcomes, per-chi) */
  #integrazione,
  #esperienza,
  #per-chi {
    position: relative;
    overflow: hidden;
  }
  #integrazione::after,
  #esperienza::after,
  #per-chi::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(to left, var(--white), transparent);
    pointer-events: none;
    z-index: 3;
  }

  /* Trust resta grid 2-col, niente carosello — non serve fade qui */
}

/* ───────────────────────────────────────
   STAKEHOLDER cards: stack verticale compatto su mobile
   (override del carosello aggiunto prima)
─────────────────────────────────────── */
@media (max-width: 700px) {
  .stakeholders-grid,
  .stakeholders-grid.two-up {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }
  .stakeholder-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 20px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }
  .stakeholder-card .sh-ico {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
  .stakeholder-card .sh-ico svg {
    width: 18px;
    height: 18px;
  }
  .stakeholder-card .sh-tag {
    font-size: 9px !important;
    padding: 3px 8px !important;
    letter-spacing: 0.06em !important;
  }
  .stakeholder-card h3 {
    font-size: 19px !important;
    line-height: 1.2 !important;
    margin-top: -2px !important;
  }
  .stakeholder-card .sh-lede {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
  /* Versioni testo: mostra mobile, nascondi desktop */
  .sh-lede--desktop { display: none !important; }
  .sh-lede--mobile { display: block !important; }

  /* Niente fade gradient sulla section per-chi (è stack ora, non più carousel) */
  #per-chi::after { display: none !important; }
}

/* Su desktop: opposto */
@media (min-width: 701px) {
  .sh-lede--desktop { display: block; }
  .sh-lede--mobile { display: none; }
}

/* ───────────────────────────────────────
   FIX caroselli "troppo attaccati" (più respiro)
─────────────────────────────────────── */
@media (max-width: 700px) {
  /* Gap più ampio + card leggermente più strette */
  .modules-grid,
  .continuity-grid,
  .outcomes-grid {
    gap: 16px !important;
    padding-left: 18px !important;
    padding-right: 36px !important;
  }
  .modules-grid .module,
  .continuity-grid .continuity-pillar,
  .outcomes-grid .outcome-card {
    flex: 0 0 calc(100% - 80px) !important;
    max-width: 320px !important;
  }

  /* Gradient fade più visibile sul bordo destro */
  #prodotto::after,
  #integrazione::after,
  #esperienza::after {
    width: 36px !important;
  }
}

/* ───────────────────────────────────────
   Anchor links: scroll offset per nav sticky
─────────────────────────────────────── */
html { scroll-padding-top: 80px; }
@media (max-width: 700px) { html { scroll-padding-top: 70px; } }