:root {
    color-scheme: only light;
    --blue-900: #252643;
    --blue-800: #42458B;
    --blue-700: #5662BA;
    --blue-600: #697AC8;
    --blue-500: #869ACB;
    --blue-300: #BAC4EE;
    --blue-200: #E4E7F5;
    --blue-100: #ECF0FC;
    --blue-50:  #F5F7FD;
    --red:      #BA0F31;
    --red-dark: #8A0A24;
    --red-soft: #FCE4EA;
    --black:    #121212;
    --gray-900: #17181C;
    --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;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

    --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);

    --container: 1240px;
  }

  * { 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: 120px 0; }

  .eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before {
    content: ''; width: 24px; height: 1px; background: var(--primary);
  }
  .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, 6.4vw, 92px); line-height: 1.0; font-weight: 900; letter-spacing: -0.04em; }
  h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.08; }
  h3 { font-size: 22px; }
  p { margin: 0; }
  .lead { font-size: 20px; 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: 10px;
    font-weight: 600; font-size: 15px;
    font-family: var(--font-body);
    cursor: pointer; border: 0;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    text-decoration: none;
    white-space: nowrap;
  }
  .btn-primary { background: var(--primary); color: var(--white); }
  .btn-primary:hover { background: var(--primary-strong); transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--black); border: 1px solid var(--gray-300); }
  .btn-ghost:hover { border-color: var(--black); }
  .btn-dark { background: var(--black); color: var(--white); }
  .btn-dark:hover { background: var(--gray-900); }

  /* NAV */
  .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;
    gap: 40px;
    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; }
  .nav-links { display: flex; align-items: center; gap: 32px; }
  .nav-links > a, .nav-links .dd-trigger { font-size: 15px; font-weight: 500; color: var(--gray-700); transition: color .15s ease; cursor: pointer; }
  .nav-links > a:hover, .nav-links > a.active, .nav-links .dd-trigger:hover { color: var(--black); }
  .nav-links .dd-trigger { display: inline-flex; align-items: center; gap: 6px; }
  .nav-links .dd-trigger svg { transition: transform .15s ease; }
  .nav-dd { position: relative; padding-bottom: 18px; margin-bottom: -18px; }
  .nav-dd:hover .dd-trigger svg { transform: rotate(180deg); }
  .nav-dd-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    box-shadow: 0 24px 60px -20px rgba(16,24,40,0.18), 0 4px 12px -4px rgba(16,24,40,0.06);
    padding: 10px;
    min-width: 280px;
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 100;
  }
  .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-dd-menu a {
    display: block; padding: 12px 14px; border-radius: 8px;
    color: var(--gray-800); font-size: 14px; font-weight: 600;
    transition: background .12s ease, color .12s ease;
  }
  .nav-dd-menu a:hover { background: var(--blue-50); color: var(--primary-strong); }
  .nav-dd-menu a .dd-desc {
    display: block; font-size: 12px; font-weight: 400;
    color: var(--gray-500); margin-top: 3px;
  }
  .nav-dd-menu a:hover .dd-desc { color: var(--gray-600); }
  @media (max-width: 800px) { .nav-links { display: none; } }

  /* HERO */
  .hero {
    position: relative;
    padding: 100px 0 120px 0;
    overflow: hidden;
    background:
      radial-gradient(ellipse 900px 600px at 90% 10%, var(--primary-100), transparent 60%),
      radial-gradient(ellipse 700px 500px at 0% 90%, #FFE9E4, transparent 70%),
      linear-gradient(180deg, var(--white) 0%, var(--blue-50) 100%);
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(86,98,186,0.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(86,98,186,0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
  }
  .hero-bg { display: none; }
  .hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: 64px; align-items: center;
  }
  @media (max-width: 1080px) {
    .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 12px;
    background: var(--white);
    border: 1px solid var(--blue-200);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600; color: var(--primary-strong);
    letter-spacing: 0.08em; text-transform: uppercase;
    box-shadow: 0 2px 12px -4px rgba(86,98,186,0.18);
    margin-bottom: 28px;
  }
  .hero-eyebrow .ld { width: 6px; height: 6px; border-radius: 50%; background: #1BA66C; box-shadow: 0 0 0 3px rgba(27,166,108,0.18); }

  /* Hero visual */
  .hero-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 520px;
    justify-self: end;
    width: 100%;
  }
  @media (max-width: 1080px) { .hero-visual { justify-self: start; max-width: 480px; } }
  .hv-card {
    position: absolute;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 30px 60px -25px rgba(28,34,84,0.25), 0 0 0 1px rgba(86,98,186,0.08);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .hv-card .lbl {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gray-500);
  }
  .hv-card .val {
    font-family: var(--font-display); font-weight: 800;
    font-size: 26px; letter-spacing: -0.02em; color: var(--black);
    line-height: 1.05;
  }
  .hv-card .sub { font-size: 12px; color: var(--gray-600); }
  .hv-card.donor {
    top: 4%; left: 0;
    width: 230px;
    border-left: 3px solid #1BA66C;
  }
  .hv-card.sack {
    top: 12%; right: 0;
    width: 200px;
    border-left: 3px solid var(--primary);
  }
  .hv-card.stock {
    bottom: 4%; left: 8%;
    width: 220px;
    border-left: 3px solid var(--red);
  }
  .hv-card .row1 { display: flex; align-items: center; gap: 10px; }
  .hv-card .av {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: var(--white); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 13px;
    flex-shrink: 0;
  }
  .hv-card .name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--black); }
  .hv-card .meta { font-family: var(--font-mono); font-size: 10px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.08em; }
  .hv-card .tag {
    display: inline-block; align-self: flex-start;
    margin-top: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .hv-card .tag.ok { background: #E6F6EE; color: #1b8d5a; }
  .hv-card .tag.warn { background: #FFE9E4; color: var(--red-dark); }
  /* Center pulse ring */
  .hv-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary) 0%, var(--primary-strong) 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    box-shadow: 0 30px 80px -20px rgba(86,98,186,0.5);
  }
  .hv-core::before, .hv-core::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(86,98,186,0.25);
    animation: hvring 3.5s ease-out infinite;
  }
  .hv-core::after { animation-delay: 1.75s; }
  @keyframes hvring {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.7); opacity: 0; }
  }
  .hv-core .lockup {
    position: relative;
    text-align: center;
  }
  .hv-core .lockup .small {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.7);
    display: block; margin-bottom: 8px;
  }
  .hv-core .lockup .big {
    font-family: var(--font-display); font-weight: 900;
    font-size: 44px; letter-spacing: -0.04em; line-height: 1;
  }
  .hv-core .lockup .tag {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  /* Connecting dotted lines (svg overlay) */
  .hv-lines {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .hv-lines path { stroke: var(--primary); stroke-width: 1.2; stroke-dasharray: 3 5; fill: none; opacity: 0.35; }
  .hv-card { z-index: 2; }
  .hv-core { z-index: 1; }
  .pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 10px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 500; color: var(--gray-700);
    letter-spacing: 0.02em;
  }
  .pill .dot {
    width: 7px; height: 7px; 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 8px rgba(27,166,108,0);}
    100% { box-shadow: 0 0 0 0 rgba(27,166,108,0);}
  }
  .hero h1 { margin-top: 0; }
  .hero h1 .accent { color: var(--primary); }
  .hero h1 .italic { font-style: italic; font-weight: 400; color: var(--primary-strong); }
  .hero-sub { margin-top: 28px; font-size: 20px; line-height: 1.5; color: var(--gray-700); max-width: 56ch; text-wrap: pretty; }
  .hero-ctas { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-trust {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--blue-200);
    display: flex; gap: 32px; flex-wrap: wrap;
  }
  .hero-trust .t {
    display: flex; flex-direction: column; gap: 4px;
  }
  .hero-trust .t .l {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--gray-500);
  }
  .hero-trust .t .v {
    font-family: var(--font-display); font-weight: 700;
    font-size: 14px; color: var(--black);
  }
  .hero-meta {
    margin-top: 48px;
    display: flex; gap: 56px; flex-wrap: wrap;
    padding-top: 36px;
    border-top: 1px solid var(--gray-200);
  }
  .hero-meta .m {
    display: flex; flex-direction: column; gap: 4px;
  }
  .hero-meta .m .l { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gray-500); }
  .hero-meta .m .v { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--black); line-height: 1; }
  .hero-meta .m .v .unit { font-size: 14px; font-weight: 600; color: var(--gray-500); margin-left: 2px; }

  /* SECTION HEAD */
  .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; }
  @media (max-width: 900px) {
    .section-head { grid-template-columns: 1fr; gap: 24px; }
  }

  /* PRODUCT FEATURE */
  .product-feature {
    padding: 100px 0;
    background: var(--blue-900);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .product-feature::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 80% 20%, rgba(86,98,186,0.25), transparent 50%),
      radial-gradient(circle at 10% 90%, rgba(86,98,186,0.18), transparent 50%);
    pointer-events: none;
  }
  .pf-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px;
    align-items: center;
  }
  @media (max-width: 1000px) { .pf-inner { grid-template-columns: 1fr; gap: 56px; } }
  .pf-tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--primary-300);
  }
  .pf-tag::before { content: ''; width: 24px; height: 1px; background: var(--primary-300); }
  .pf-headline {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(44px, 5.4vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--white);
    margin: 18px 0 0 0;
    text-wrap: balance;
  }
  .pf-headline .hl { color: var(--primary-300); }
  .pf-headline em {
    font-style: italic; font-weight: 900;
    color: var(--primary-300);
  }
  .pf-name {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(56px, 7vw, 96px);
    line-height: 0.95; letter-spacing: -0.04em;
    color: var(--white);
    margin: 22px 0 0 0;
  }
  .pf-tagline {
    font-family: var(--font-display); font-weight: 400;
    font-style: italic;
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--primary-300);
    margin-top: 14px;
    letter-spacing: -0.01em;
  }
  .pf-desc {
    margin-top: 32px;
    font-size: 19px; line-height: 1.55;
    color: rgba(255,255,255,0.8);
    max-width: 56ch;
    text-wrap: pretty;
  }
  .pf-points {
    list-style: none; padding: 0; margin: 32px 0 0 0;
    display: flex; flex-direction: column; gap: 14px;
  }
  .pf-points li {
    display: grid; grid-template-columns: 22px 1fr; gap: 14px;
    font-size: 16px; color: rgba(255,255,255,0.85);
    align-items: flex-start;
  }
  .pf-points .chk {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); color: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 3px;
  }
  .pf-ctas { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
  .pf-ctas .btn-primary { background: var(--primary); }
  .pf-ctas .btn-light {
    background: rgba(255,255,255,0.08);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.18);
  }
  .pf-ctas .btn-light:hover { background: rgba(255,255,255,0.14); }

  /* Mockup window (terminal-ish) */
  .pf-mockup {
    background: #0E0F12;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
  }
  .pf-mockup-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .pf-mockup-bar .tl { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.2); }
  .pf-mockup-bar .url {
    flex: 1; margin-left: 14px;
    font-family: var(--font-mono);
    font-size: 11px; color: rgba(255,255,255,0.5);
  }
  .pf-mockup-body {
    padding: 28px 28px 32px 28px;
    font-family: var(--font-mono);
    font-size: 13px; line-height: 1.7;
    color: rgba(255,255,255,0.7);
  }
  .pf-mockup-body .row { display: flex; gap: 14px; align-items: baseline; }
  .pf-mockup-body .ts { color: rgba(255,255,255,0.35); width: 72px; flex-shrink: 0; }
  .pf-mockup-body .lvl { font-weight: 600; width: 56px; flex-shrink: 0; }
  .pf-mockup-body .lvl.ok { color: #6FF29E; }
  .pf-mockup-body .lvl.info { color: var(--primary-300); }
  .pf-mockup-body .lvl.warn { color: #FFD479; }
  .pf-mockup-body .msg { color: rgba(255,255,255,0.85); }
  .pf-mockup-body .msg em { color: var(--primary-300); font-style: normal; }
  .pf-mockup-body .stats {
    margin-top: 22px; padding-top: 22px;
    border-top: 1px dashed rgba(255,255,255,0.1);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  }
  .pf-mockup-body .stats .s .l { color: rgba(255,255,255,0.45); font-size: 11px; }
  .pf-mockup-body .stats .s .v { color: var(--white); font-size: 22px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }

  /* MISSION */
  .mission-grid {
    display: grid; grid-template-columns: 1fr; gap: 56px;
  }
  .mission-grid h2 .accent { color: var(--primary); }
  .mission-top {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: 64px; align-items: center;
  }
  .mission-text { max-width: 760px; }
  @media (max-width: 1000px) {
    .mission-top { grid-template-columns: 1fr; gap: 48px; }
  }

  /* Mission visual: paper vs digital */
  .mission-visual {
    position: relative;
    min-height: 380px;
    height: 100%;
  }
  .mv-paper, .mv-digital {
    position: absolute;
    border-radius: 12px;
  }
  .mv-paper {
    top: 0; left: 0;
    width: 58%;
    padding: 24px 22px 28px;
    background: #FBF7E8;
    background-image:
      linear-gradient(transparent 0, transparent 27px, rgba(86,98,186,0.16) 28px, transparent 29px);
    background-size: 100% 30px;
    background-position: 0 36px;
    box-shadow:
      0 1px 0 rgba(0,0,0,0.04),
      0 12px 28px -16px rgba(120,100,40,0.35),
      0 22px 50px -28px rgba(0,0,0,0.25);
    transform: rotate(-3.2deg);
    z-index: 1;
    color: #2C2A1F;
    font-family: 'Caveat', cursive;
  }
  .mv-paper .mv-tape {
    position: absolute;
    top: -12px; left: 50%;
    width: 78px; height: 22px;
    background: rgba(212,196,120,0.55);
    border: 1px dashed rgba(140,120,40,0.25);
    transform: translateX(-50%) rotate(-2deg);
    border-radius: 2px;
  }
  .mv-paper-head {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(60,50,20,0.55);
    margin-bottom: 12px;
  }
  .mv-paper-list { list-style: none; padding: 0; margin: 0; }
  .mv-paper-list li {
    font-size: 22px; line-height: 30px;
    font-weight: 500;
    display: flex; align-items: baseline; gap: 10px;
  }
  .mv-paper-list li .t {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(60,50,20,0.55);
    min-width: 36px;
  }
  .mv-paper-list li.strike { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.65; }
  .mv-paper-list li .q { color: #B7791F; font-weight: 700; }
  .mv-paper-list li .ck { color: #2F855A; font-weight: 700; }
  .mv-paper-list li.add {
    margin-top: 4px;
    color: rgba(60,50,20,0.7);
    font-style: italic;
  }
  .mv-scribble {
    position: absolute;
    bottom: 14px; right: 18px;
    width: 64px; height: 18px;
    color: rgba(60,50,20,0.35);
  }

  .mv-digital {
    bottom: 0; right: 0;
    width: 64%;
    padding: 18px;
    background: var(--white);
    border: 1px solid var(--gray-100);
    box-shadow:
      0 30px 60px -25px rgba(86,98,186,0.32),
      0 12px 28px -12px rgba(16,24,40,0.10);
    z-index: 2;
    transform: rotate(0.6deg);
  }
  .mv-digital-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-100);
  }
  .mv-d-title { font-size: 13px; font-weight: 700; color: var(--black); }
  .mv-d-sub   { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
  .mv-d-pill {
    font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #2F855A; background: #E6F4EC;
    padding: 4px 10px; border-radius: 999px;
    white-space: nowrap;
  }
  .mv-d-list { margin-top: 10px; display: grid; gap: 6px; }
  .mv-d-slot {
    display: grid; grid-template-columns: 48px 1fr 10px;
    align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--blue-50);
    border-radius: 8px;
  }
  .mv-d-slot .t {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--gray-700);
  }
  .mv-d-slot .n {
    font-size: 13px; font-weight: 500; color: var(--black);
  }
  .mv-d-slot .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2F855A;
  }
  .mv-d-slot .dot.warn { background: #C09020; }

  @media (max-width: 1000px) {
    .mission-visual { min-height: 0; height: auto; display: grid; gap: 24px; }
    .mv-paper, .mv-digital {
      position: relative; width: 100%;
      transform: none;
    }
  }

  .mission-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  }
  @media (max-width: 1000px) {
    .mission-stats { grid-template-columns: 1fr; gap: 16px; }
  }
  .mission-pull {
    background: var(--primary-soft);
    border-radius: 18px;
    padding: 28px;
    border-left: 4px solid var(--primary);
  }
  .mission-pull .big {
    font-family: var(--font-display); font-weight: 900;
    font-size: 56px; line-height: 0.95; letter-spacing: -0.03em;
    color: var(--primary);
  }
  .mission-pull .lbl {
    margin-top: 12px;
    font-size: 15px; color: var(--gray-700); line-height: 1.45;
  }
  .mission-pull .lbl strong { color: var(--black); font-weight: 600; }
  .mission-pull .src {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--blue-200);
    font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--gray-500);
  }

  /* OS MOCKUP (in product feature, replacing terminal) */
  .os-mockup {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
    color: var(--black);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .os-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
  }
  .os-bar .tl { width: 11px; height: 11px; border-radius: 50%; }
  .os-url {
    flex: 1; margin-left: 12px;
    font-family: var(--font-mono);
    font-size: 11px; color: var(--gray-500);
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 6px; padding: 4px 10px;
  }
  .os-body { display: flex; min-height: 420px; }
  .os-side {
    width: 168px; padding: 18px 12px;
    background: #FBFBFD;
    border-right: 1px solid var(--gray-100);
    font-size: 12px;
    display: flex; flex-direction: column; gap: 3px;
  }
  .os-side-h {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 13px;
    padding: 4px 6px 14px 6px;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 12px;
    color: var(--black);
  }
  .os-side-h .sd { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }
  .os-nav {
    padding: 8px 10px; border-radius: 7px;
    display: flex; align-items: center; gap: 9px;
    color: var(--gray-700);
  }
  .os-nav.active { background: var(--primary-100); color: var(--primary-strong); font-weight: 600; }
  .os-nav span { width: 14px; height: 14px; border-radius: 3px; background: var(--gray-300); display: inline-block; }
  .os-nav.active span { background: var(--primary); }
  .os-main { flex: 1; padding: 22px 26px; min-width: 0; }
  .os-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .os-h > div:first-child { min-width: 0; flex: 1; }
  .os-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--black); line-height: 1.25; }
  .os-sub { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
  .os-pill { flex-shrink: 0; }
  .os-pill {
    background: #E6F6EE; color: #1b8d5a;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  }
  .os-slots { display: flex; flex-direction: column; gap: 6px; }
  .os-slot {
    display: grid; grid-template-columns: 56px 1fr auto;
    gap: 12px; align-items: center;
    padding: 9px 12px;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    font-size: 12px;
  }
  .os-slot .t { font-family: var(--font-mono); color: var(--gray-500); font-size: 11px; }
  .os-slot .n { font-weight: 600; color: var(--black); }
  .os-slot .bg {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 999px;
    background: var(--primary-100); color: var(--primary-strong);
  }
  .os-slot.warn .bg { background: #FFF4E0; color: #B7791F; }
  .os-slot.empty .n { color: var(--gray-400); font-weight: 400; font-style: italic; }
  .os-slot.empty .bg { display: none; }
  .os-kpi {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-top: 14px;
  }
  .os-kpi .k { background: var(--gray-50); border-radius: 8px; padding: 10px 12px; }
  .os-kpi .kl { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-500); }
  .os-kpi .kv { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--black); margin-top: 2px; }

  /* ROSSO STRIP */
  .rosso {
    padding: 96px 0;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
  }
  .rosso-inner {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center;
  }
  @media (max-width: 900px) { .rosso-inner { grid-template-columns: 1fr; gap: 40px; } }
  .rosso-tag {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--red);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .rosso-tag::before { content: ''; width: 24px; height: 1px; background: var(--red); }
  .rosso h2 { margin-top: 18px; }
  .rosso h2 em { color: var(--red); font-style: normal; }
  .rosso p { margin-top: 22px; font-size: 18px; color: var(--gray-700); line-height: 1.5; max-width: 50ch; }
  .rosso .btn {
    margin-top: 28px;
    background: var(--red); color: var(--white);
  }
  .rosso .btn:hover { background: var(--red-dark); }
  /* Rosso phone image */
  .rosso-phone-wrap { display: flex; justify-content: center; }
  .rosso-shot {
    max-width: 320px; width: 100%; height: auto;
    border-radius: 38px;
    box-shadow: 0 40px 80px -30px rgba(186,15,49,0.35), 0 20px 40px -15px rgba(0,0,0,0.25);
  }

  /* CONTATTI */
  .contatti {
    padding: 100px 0;
    background: var(--white);
    color: var(--black);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
  }
  .contatti-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
    align-items: center;
  }
  @media (max-width: 900px) { .contatti-grid { grid-template-columns: 1fr; gap: 40px; } }
  .contatti h2 { color: var(--black); }
  .contatti .lead { color: var(--gray-700); margin-top: 22px; }
  .contatti-cta { display: flex; justify-content: flex-start; align-items: center; }
  .contatti-mail {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -0.02em;
    color: var(--primary-strong);
    border-bottom: 2px solid var(--blue-200);
    padding-bottom: 6px;
    transition: border-color .15s ease, color .15s ease;
  }
  .contatti-mail:hover { border-color: var(--primary-strong); }

  /* FOOTER */
  .site-footer {
    background: var(--blue-900);
    color: rgba(255,255,255,0.75);
    padding: 80px 0 32px 0;
  }
  .foot-grid {
    display: grid; grid-template-columns: 1fr; gap: 40px;
  }
  @media (min-width: 920px) {
    .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
  }
  .foot-logo { height: 22px; filter: brightness(0) invert(1); }
  .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;
  }
  .foot-brand .foot-mission {
    margin-top: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 13px; line-height: 1.55;
    max-width: 42ch;
  }
  .eu-logo {
    margin-top: 22px;
    display: block;
    max-width: 260px; height: auto;
    background: var(--white);
    border-radius: 6px;
    padding: 8px 12px;
  }
  .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);
  }
  .foot-col p {
    margin: 0 0 6px 0;
    font-size: 13px; line-height: 1.55;
    color: rgba(255,255,255,0.78);
  }
  .foot-col p.muted { color: rgba(255,255,255,0.5); font-size: 12px; }
  .foot-col a { color: rgba(255,255,255,0.85); }
  .foot-col a:hover { color: var(--white); }
  .foot-col strong { color: var(--white); font-weight: 600; }
  .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;
  }
  .foot-bottom .fb-meta {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
  }

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

  /* 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; } }


/* ───────────────────────────────────────
   ANIMAZIONI & GRAPHIC ACCENTS (homepage)
─────────────────────────────────────── */

/* Floating hero cards: gentle bob, sfasati */
@keyframes hv-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.hv-card.donor { animation: hv-bob 5.4s ease-in-out infinite; }
.hv-card.sack  { animation: hv-bob 6.0s ease-in-out infinite; animation-delay: -1.6s; }
.hv-card.stock { animation: hv-bob 5.7s ease-in-out infinite; animation-delay: -3.0s; }

/* Connection lines: data flow traveling dots */
@keyframes line-flow {
  to { stroke-dashoffset: -32; }
}
.hv-lines path {
  animation: line-flow 3.2s linear infinite;
}

/* Hero core: lockup .big — micro tilt on hover */
.hv-core { transition: transform .4s ease; }
.hero-visual:hover .hv-core { transform: translate(-50%, -50%) scale(1.03); }

/* Btn primary: subtle sheen on hover (coerente con ema-os) */
.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%; }

/* OS mockup: live indicator dot prima dell'URL */
.os-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;
}

/* OS mockup: slot rows stagger fade-in (su scroll, via .reveal.in del JS esistente) */
@keyframes slot-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pf-inner.in .os-slot {
  animation: slot-rise 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.pf-inner.in .os-slot:nth-child(1) { animation-delay: 0.20s; }
.pf-inner.in .os-slot:nth-child(2) { animation-delay: 0.28s; }
.pf-inner.in .os-slot:nth-child(3) { animation-delay: 0.36s; }
.pf-inner.in .os-slot:nth-child(4) { animation-delay: 0.44s; }
.pf-inner.in .os-slot:nth-child(5) { animation-delay: 0.52s; }
.pf-inner.in .os-slot:nth-child(6) { animation-delay: 0.60s; }

/* OS mockup KPI: stagger fade-in */
.pf-inner.in .os-kpi .k {
  animation: slot-rise 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.pf-inner.in .os-kpi .k:nth-child(1) { animation-delay: 0.7s; }
.pf-inner.in .os-kpi .k:nth-child(2) { animation-delay: 0.78s; }
.pf-inner.in .os-kpi .k:nth-child(3) { animation-delay: 0.86s; }

/* Mission pull-quote 97%: micro entrance scale */
@keyframes pull-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mission-grid.in .mission-pull {
  animation: pull-rise 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}
.mission-grid.in .mission-stats .mission-pull:nth-child(1) { animation-delay: 0.15s; }
.mission-grid.in .mission-stats .mission-pull:nth-child(2) { animation-delay: 0.28s; }
.mission-grid.in .mission-stats .mission-pull:nth-child(3) { animation-delay: 0.41s; }

/* Rosso phone: subtle hover scale + tilt */
.rosso-shot {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.45s ease;
}
.rosso-phone-wrap:hover .rosso-shot {
  transform: translateY(-6px) rotate(-1.5deg);
  box-shadow: 0 50px 90px -30px rgba(186,15,49,0.4), 0 25px 50px -15px rgba(0,0,0,0.3);
}

/* Hero pill verde: già pulse — nessuna modifica */

/* Eyebrow: piccolo "shimmer" sul tratto orizzontale (tutti gli eyebrow del sito) */
@keyframes eb-shimmer {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50%      { transform: scaleX(1.4); opacity: 0.7; }
}
.eyebrow::before {
  transform-origin: left center;
  animation: eb-shimmer 3.8s ease-in-out infinite;
}

/* Decorative dot pattern: applicabile come .section-dotted */
.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: 28px 28px;
  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;
}

/* Reduced motion: disabilita animazioni decorative */
@media (prefers-reduced-motion: reduce) {
  .hv-card.donor, .hv-card.sack, .hv-card.stock,
  .hv-lines path,
  .os-url::before,
  .pf-inner.in .os-slot,
  .pf-inner.in .os-kpi .k,
  .mission-grid.in .mission-pull,
  .eyebrow::before {
    animation: none !important;
  }
  .hv-core,
  .rosso-phone-wrap:hover .rosso-shot { transform: none !important; }
  .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;
  }
}

/* ───────────────────────────────────────
   MOBILE POLISH (homepage)
─────────────────────────────────────── */

/* Hero visual su mobile: scala card e tipografia */
@media (max-width: 600px) {
  .hero-visual { max-width: 360px; margin: 0 auto; }
  .hv-card.donor { width: 64%; }
  .hv-card.sack  { width: 56%; }
  .hv-card.stock { width: 62%; }
  .hv-card .val { font-size: 22px; }
  .hv-core { width: 180px; height: 180px; }
  .hv-core .lockup .big { font-size: 32px; }
}

/* Hero h1 più compatto su mobile */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(36px, 10vw, 56px); }
  .hero-sub { font-size: 16px; }
  .hero-meta .m .v { font-size: 22px; }
  .hero { padding: 56px 0 80px 0 !important; }
}

/* Product feature: dashboard mockup compatto su mobile */
@media (max-width: 600px) {
  .product-feature { padding: 80px 0 !important; }
  .pf-headline { font-size: clamp(36px, 9vw, 56px) !important; }
  .pf-name { font-size: clamp(48px, 13vw, 72px) !important; }
  .os-body { min-height: 380px; }
  .os-side { width: 124px; padding: 14px 8px; font-size: 11px; }
  .os-main { padding: 18px 18px; }
  .os-title { font-size: 15px; }
  .os-slot { font-size: 11px; padding: 8px 10px; }
}

/* Mission pull-quote compatta su mobile */
@media (max-width: 600px) {
  .mission-pull { padding: 28px 24px; border-radius: 16px; }
  .mission-pull .big { font-size: 64px; }
}

/* Rosso strip: phone più piccolo */
@media (max-width: 600px) {
  .rosso-shot { max-width: 240px; }
}

/* Tap feedback: niente hover-tilt su touch, ma feedback visivo al tap */
@media (hover: none) {
  .rosso-phone-wrap:hover .rosso-shot { transform: none; }
  .rosso-shot:active { transform: scale(0.98); }
}

/* ───────────────────────────────────────
   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 index */
@media (max-width: 600px) {
  .pf-name { font-size: clamp(44px, 13vw, 64px) !important; line-height: 1 !important; }
  .pf-tagline { font-size: 17px !important; }
  .pf-desc { font-size: 15px !important; }

  .mission-pull { padding: 24px 22px !important; border-radius: 14px !important; border-left-width: 3px !important; }
  .mission-pull .big { font-size: 56px !important; line-height: 0.95 !important; letter-spacing: -0.04em !important; }
  .mission-pull .lbl { font-size: 14px !important; line-height: 1.4 !important; margin-top: 12px !important; }

  /* Hero core lockup su mobile */
  .hv-core { width: 160px !important; height: 160px !important; }
  .hv-core .lockup .small { font-size: 9px !important; margin-bottom: 4px !important; }
  .hv-core .lockup .big { font-size: 26px !important; }

  /* Hero floating cards: più piccole e leggere */
  .hv-card { padding: 12px 14px !important; gap: 4px !important; }
  .hv-card .lbl { font-size: 9px !important; }
  .hv-card .val { font-size: 18px !important; }
  .hv-card .name { font-size: 12px !important; }
  .hv-card .meta { font-size: 9px !important; }
  .hv-card .av { width: 26px !important; height: 26px !important; font-size: 11px !important; }
  .hv-card .tag { font-size: 9px !important; padding: 2px 7px !important; }

  /* Footer più compatto */
  .foot-grid { gap: 28px !important; }
  .foot-brand .foot-tagline { font-size: 14px !important; }
  .foot-bottom { margin-top: 32px !important; padding-top: 18px !important; }
}

/* OS mockup: nascondi su small mobile, troppo denso */
@media (max-width: 520px) {
  .os-mockup { transform: scale(0.92); transform-origin: top left; }
  .os-side { width: 110px !important; padding: 12px 6px !important; }
  .os-nav { padding: 6px 8px !important; font-size: 11px !important; }
  .os-side-h { font-size: 12px !important; }
  .os-main { padding: 16px 14px !important; }
  .os-slot { padding: 7px 9px !important; font-size: 11px !important; }
  .os-kpi .kv { font-size: 16px !important; }
}

/* ───────────────────────────────────────
   MOBILE — REDESIGN RADICALE
   "Un solo punto per sezione, niente clutter"
─────────────────────────────────────── */
@media (max-width: 700px) {

  /* HERO: nascondi le 3 card fluttuanti e le linee tratteggiate.
     Resta solo il core EMA OS, centrato, come accent decorativo. */
  .hv-card { display: none !important; }
  .hv-lines { display: none !important; }
  .hero-visual {
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    justify-self: center !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .hv-core {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    width: 200px !important; height: 200px !important;
  }

  /* PRODUCT FEATURE: nascondi dashboard mockup su mobile (troppo denso)
     e mostra solo testo + bullets + CTA. Cleaner. */
  .pf-inner .os-mockup { display: none !important; }
  .pf-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Hero CTAs: stack verticale, primary full-width, secondary linkato */
  .hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .hero-ctas .btn { justify-content: center !important; }

  /* Mission grid: stack pulito */
  .mission-grid { gap: 24px !important; }
}

/* Sotto 480px: tipografia più asciutta */
@media (max-width: 480px) {
  .hero h1 br { display: none; }
  .pf-headline br { display: none; }
}

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

/* ───────────────────────────────────────
   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; }
}

/* ───────────────────────────────────────
   MISSION PAPER vs DIGITAL — overlap diagonale (solo mobile)
─────────────────────────────────────── */
@media (max-width: 700px) {
  .mission-visual {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 0 8px 0 !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  .mv-paper, .mv-digital {
    position: relative;
    width: 88% !important;
    max-width: 100%;
  }
  .mv-paper {
    transform: rotate(-2.5deg) translateX(-2%) !important;
    margin: 0 0 -36px 0 !important;
    z-index: 1;
    border-radius: 6px;
  }
  .mv-digital {
    transform: rotate(1.5deg) translateX(8%) !important;
    margin: 0 0 0 auto !important;
    z-index: 2;
    box-shadow: 0 24px 48px -16px rgba(86,98,186,0.25), 0 8px 18px -8px rgba(0,0,0,0.1);
  }
  /* Etichette PRIMA / DOPO per chiarezza narrativa */
  .mv-paper::before {
    content: 'PRIMA';
    position: absolute;
    top: -10px; left: 14px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    background: var(--gray-900, #17181C);
    color: var(--white);
    padding: 4px 9px;
    border-radius: 4px;
    transform: rotate(2.5deg);
    z-index: 3;
  }
  .mv-digital::before {
    content: 'DOPO';
    position: absolute;
    top: -10px; right: 14px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    background: var(--primary);
    color: var(--white);
    padding: 4px 9px;
    border-radius: 999px;
    transform: rotate(-1.5deg);
    z-index: 3;
    box-shadow: 0 4px 10px -4px rgba(86,98,186,0.5);
  }
  /* Mission stats: stack verticale tight */
  .mission-stats {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 36px !important;
  }
  .mission-pull { padding: 22px 20px !important; border-radius: 14px !important; }
  .mission-pull .big { font-size: 48px !important; line-height: 0.95 !important; }
  .mission-pull .lbl { font-size: 14px !important; line-height: 1.4 !important; margin-top: 10px !important; }
}

/* ───────────────────────────────────────
   FOOTER compatto su mobile
─────────────────────────────────────── */
@media (max-width: 700px) {
  .site-footer {
    padding: 40px 0 20px 0 !important;
  }
  .site-footer .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .site-footer .foot-brand .foot-tagline {
    font-size: 14px !important;
    line-height: 1.4;
    margin-top: 12px !important;
  }
  .site-footer .foot-brand .foot-mission {
    font-size: 12.5px !important;
    line-height: 1.5;
    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; }
}

/* ───────────────────────────────────────
   FIX HERO INDEX: respiro sotto al core EMA OS
─────────────────────────────────────── */
@media (max-width: 700px) {
  .hero {
    padding: 48px 0 96px 0 !important;  /* più spazio sotto */
  }
  .hero-visual {
    min-height: 240px !important;
    padding: 20px 0 36px 0 !important;
    margin-top: 16px !important;
  }
  .hv-core {
    width: 180px !important;
    height: 180px !important;
  }
  .hv-core .lockup .small { font-size: 9px !important; margin-bottom: 4px !important; }
  .hv-core .lockup .big { font-size: 28px !important; }
  /* Disabilita animazione rings su mobile per evitare clipping bordi */
  .hv-core::before,
  .hv-core::after { animation: none !important; opacity: 0.3 !important; transform: none !important; }
}

@media (max-width: 480px) {
  .hero {
    padding: 40px 0 80px 0 !important;
  }
  .hv-core {
    width: 160px !important;
    height: 160px !important;
  }
  .hv-core .lockup .big { font-size: 24px !important; }
}

/* ───────────────────────────────────────
   MISSION STATS: 2 affiancati + 1 sotto (mobile)
─────────────────────────────────────── */
@media (max-width: 700px) {
  .mission-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 36px !important;
  }
  .mission-stats .mission-pull:nth-child(3) {
    grid-column: 1 / -1;  /* il terzo span su tutta la riga */
  }
  .mission-pull {
    padding: 18px 16px !important;
    border-radius: 12px !important;
    border-left-width: 3px !important;
  }
  .mission-pull .big {
    font-size: 36px !important;
    line-height: 0.95 !important;
    letter-spacing: -0.04em !important;
  }
  .mission-stats .mission-pull:nth-child(3) .big {
    font-size: 44px !important;  /* il full-width può essere leggermente più grande */
  }
  .mission-pull .lbl {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }
  .mission-stats .mission-pull:nth-child(3) .lbl {
    font-size: 14px !important;
  }
}

/* ───────────────────────────────────────
   HERO CORE — pulsazione con ombre (sostituisce i rings)
   Solo mobile (su desktop restano i rings::before/::after)
─────────────────────────────────────── */
@media (max-width: 700px) {
  @keyframes core-pulse-shadow {
    0% {
      box-shadow:
        0 30px 80px -20px rgba(86,98,186,0.55),
        0 0 0 0 rgba(86,98,186,0.45),
        0 0 0 0 rgba(86,98,186,0.30);
    }
    50% {
      box-shadow:
        0 30px 80px -20px rgba(86,98,186,0.55),
        0 0 0 14px rgba(86,98,186,0.18),
        0 0 0 28px rgba(86,98,186,0.08);
    }
    100% {
      box-shadow:
        0 30px 80px -20px rgba(86,98,186,0.55),
        0 0 0 30px rgba(86,98,186,0),
        0 0 0 50px rgba(86,98,186,0);
    }
  }
  .hv-core {
    animation: core-pulse-shadow 2.6s ease-out infinite !important;
  }
  /* I rings ::before/::after restano nascosti come da fix precedente */
}

/* ───────────────────────────────────────
   HERO INDEX: avvicina la sezione di sotto
─────────────────────────────────────── */
@media (max-width: 700px) {
  .hero {
    padding: 48px 0 56px 0 !important;
  }
  .hero-visual {
    min-height: 220px !important;
    padding: 16px 0 12px 0 !important;
    margin-top: 12px !important;
  }
}
@media (max-width: 480px) {
  .hero {
    padding: 40px 0 44px 0 !important;
  }
  .hero-visual {
    padding: 12px 0 8px 0 !important;
    margin-top: 8px !important;
  }
}

/* ───────────────────────────────────────
   FIX HERO: striscia bianca tra hero e product-feature
─────────────────────────────────────── */
@media (max-width: 700px) {
  .hero {
    padding: 48px 0 24px 0 !important;
  }
  .hero-visual {
    padding: 12px 0 8px 0 !important;
    margin-top: 12px !important;
  }
  /* Estendi il rosa più in basso, rimuovi la coda quasi-bianca */
  .hero {
    background:
      radial-gradient(ellipse 900px 600px at 90% 10%, var(--primary-100), transparent 60%),
      radial-gradient(ellipse 1000px 700px at 30% 110%, #FFE9E4, transparent 60%),
      linear-gradient(180deg, var(--white) 0%, #FCEDED 100%) !important;
  }
}
@media (max-width: 480px) {
  .hero {
    padding: 40px 0 20px 0 !important;
  }
}

/* ───────────────────────────────────────
   HERO → PRODUCT-FEATURE: niente striscia, transizione diretta
─────────────────────────────────────── */
@media (max-width: 700px) {
  .hero {
    padding: 48px 0 0 0 !important;
  }
  .hero-visual {
    padding: 12px 0 28px 0 !important;
    margin-top: 8px !important;
  }
}
@media (max-width: 480px) {
  .hero {
    padding: 40px 0 0 0 !important;
  }
  .hero-visual {
    padding: 10px 0 24px 0 !important;
  }
}

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