/* Layout: replica della proposta. Desktop (≥1100px) dimensionato in vw sulla tavola da 1536px:
   header 66px, copertina 317px (logo | foto con foglia bianca), tre colonne 553/435/548, barra contatti 40px.
   Mobile-first: sotto i 1100px tutto si impila nello stesso ordine. Tema unico chiaro, colori originali degli SVG. */
:root {
  --navy: #005387;
  --navy-2: #0f5387;
  --text: #0073ba;
  --logo: #0070b9;
  --blue: #0077be;
  --blue-2: #0078bf;
  --sky: #21a1d9;
  --card: #65b9e9;
  --dash: #5bbcf2;
  --deep: #0f3a7a;
  --grad-a: #0081c7;
  --grad-b: #afdaef;
  --cyan: #0393d2;
  --paper: #ffffff;
  --f-display:
    'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --f-text:
    'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 66px;
  scrollbar-color: var(--grad-a) var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--paper);
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3 {
  font-family: var(--f-display);
  margin: 0;
}
p {
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}
.dash {
  display: block;
  border-radius: 2px;
  background: var(--dash);
}
.hl {
  color: var(--sky);
}
.deco {
  display: none;
}
.col-company .photo,
.col-company .tint,
.col-new .photo {
  display: none !important;
}

/* ---------- Header ---------- */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(0, 83, 135, 0.08);
}
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding-left: var(--gl);
  padding-right: var(--gr);
}
.brand img {
  height: 40px;
  width: auto;
}
.burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  cursor: pointer;
}
.burger span,
.burger span::before,
.burger span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  position: relative;
  transition:
    transform 0.2s,
    background-color 0.2s;
}
.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0;
}
.burger span::before {
  top: -6px;
}
.burger span::after {
  top: 6px;
}
.burger[aria-expanded='true'] span {
  background: transparent;
}
.burger[aria-expanded='true'] span::before {
  transform: translateY(6px) rotate(45deg);
}
.burger[aria-expanded='true'] span::after {
  transform: translateY(-6px) rotate(-45deg);
}
.nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--paper);
  box-shadow: 0 20px 30px -20px rgba(0, 83, 135, 0.45);
  padding: 4px var(--gr) 18px var(--gl);
}
.nav ul {
  display: grid;
}
.nav ul a {
  display: block;
  padding: 13px 2px;
  font: 500 1rem var(--f-display);
  color: var(--deep);
  text-decoration: none;
  border-bottom: 1px solid #e3eff8;
}
.nav ul a[aria-current='true'] {
  color: var(--blue);
}
.nav a.btn-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 500 1rem var(--f-display);
  text-decoration: none;
  transition: background-color 0.15s;
}
.nav a.btn-mail:hover {
  background: var(--navy);
}
.btn-mail svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

/* ---------- Composizione della proposta ----------
   Tutte le misure sono in unità --u = 1/100 della tavola da 1536px.
   Desktop: --u = 1vw. Mobile: ogni blocco è una finestra della tavola scalata a tutta larghezza,
   così sfondi e contenuti restano allineati come su desktop. */
.hero,
.cols {
  --u: 1vw;
}
.br {
  display: inline;
}
.hero {
  position: relative;
  height: calc(20.7 * var(--u));
  z-index: 3;
}
.hero-photo {
  position: absolute;
  inset: 0;
  background: var(--paper) url('/images/bg_hero.jpg') 0 0/100% 100% no-repeat;
}
.leaf {
  display: none;
}
.hero-brand {
  position: absolute;
  z-index: 2;
  inset: 0;
}
.hero-brand-in {
  position: absolute;
  left: calc(7.68 * var(--u));
  top: calc(2.4 * var(--u));
}
.lockup {
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  gap: calc(0.8 * var(--u));
}
.lockup .mark {
  width: calc(10.4 * var(--u));
  height: auto;
}
.lockup .wm {
  display: grid;
  justify-items: start;
  gap: calc(0.35 * var(--u));
  padding-top: calc(1.4 * var(--u));
}
.lockup .wordmark {
  width: calc(17 * var(--u));
  height: auto;
}
.tagline {
  font: 400 calc(1.27 * var(--u))/1.17 var(--f-display);
  color: var(--logo);
  text-transform: uppercase;
}
.statement {
  position: absolute;
  left: calc(4.1 * var(--u));
  top: calc(13.2 * var(--u));
  display: grid;
  justify-items: center;
  gap: calc(0.9 * var(--u));
  width: calc(22.4 * var(--u));
}
.statement .dash {
  width: calc(3.6 * var(--u));
  height: calc(0.2 * var(--u));
  min-height: 2px;
  justify-self: start;
  margin-left: calc(1.2 * var(--u));
}
.statement h1 {
  font: 400 calc(1.3 * var(--u))/1.24 var(--f-display);
  color: var(--logo);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 4;
}
.statement h1 strong {
  display: block;
  font-weight: 700;
  color: var(--navy-2);
}
.hero-copy {
  position: absolute;
  z-index: 2;
  left: calc(68.85 * var(--u));
  top: calc(2.65 * var(--u));
}
.hero-copy h2 {
  font-size: calc(2.36 * var(--u));
  line-height: 1.06;
  font-weight: 700;
  color: var(--navy);
}
.hero-copy h2 .l2 {
  color: var(--text);
}
.hero-copy p {
  margin-top: calc(0.9 * var(--u));
  font-size: calc(1.12 * var(--u));
  line-height: 1.42;
  color: var(--text);
}
.hero-copy p span {
  display: block;
  white-space: nowrap;
}
.hero-copy p span:nth-child(2) {
  padding-left: calc(0.8 * var(--u));
}
.hero-copy p span:nth-child(3) {
  padding-left: calc(2.5 * var(--u));
}
.hero-copy p span:nth-child(4) {
  padding-left: calc(4 * var(--u));
}

.cols {
  display: grid;
  grid-template-columns: 36fr 28.32fr 35.68fr;
  height: calc(39.06 * var(--u));
}
.col {
  position: relative;
  overflow: hidden;
  height: calc(39.06 * var(--u));
}
.col-in {
  position: relative;
  z-index: 1;
  display: grid;
}
.col h2 {
  font-size: calc(2.36 * var(--u));
  line-height: 1.04;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.lead {
  font-size: calc(1.07 * var(--u));
  line-height: 1.3;
}
.lead b {
  font-weight: 700;
  color: var(--navy);
}
.dash {
  width: calc(2.6 * var(--u));
  height: calc(0.2 * var(--u));
  min-height: 2px;
}
.features {
  display: grid;
  gap: calc(1.45 * var(--u));
  margin-top: calc(1.3 * var(--u));
}
.feature {
  display: grid;
  grid-template-columns: calc(4.7 * var(--u)) 1fr;
  gap: calc(1.9 * var(--u));
  align-items: center;
}
.feature img {
  width: calc(4.7 * var(--u));
  height: calc(4.7 * var(--u));
}
.feature h3 {
  font-size: calc(1.02 * var(--u));
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  line-height: 1.2;
}
.feature p {
  font-size: calc(1.02 * var(--u));
  line-height: 1.24;
  margin-top: calc(0.15 * var(--u));
}

.col-company {
  background: var(--paper) url('/images/bg_building.jpg') 0 0/100% 100%
    no-repeat;
  padding: calc(2.3 * var(--u)) calc(1.5 * var(--u)) calc(0.5 * var(--u))
    calc(6.38 * var(--u));
}
.col-company .col-in {
  gap: calc(0.6 * var(--u));
}
.col-company .lead {
  margin-top: calc(0.3 * var(--u));
}

.col-platform {
  background: var(--blue);
  color: #fff;
  padding: calc(0.75 * var(--u)) calc(1.6 * var(--u)) calc(0.9 * var(--u))
    calc(2.6 * var(--u));
}
.col-platform .col-in {
  gap: calc(0.3 * var(--u));
}
.col-platform .eyebrow {
  font: 700 calc(0.86 * var(--u)) var(--f-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.col-platform h2 {
  color: #fff;
  font-size: calc(1.86 * var(--u));
  line-height: 1.04;
  margin-top: calc(0.15 * var(--u));
}
.col-platform .sub {
  font-size: calc(1 * var(--u));
  line-height: 1.22;
  margin-top: calc(0.1 * var(--u));
  color: #fff;
}
.laptop {
  width: calc(19.2 * var(--u));
  max-width: none;
  height: auto;
  margin: calc(-0.2 * var(--u)) 0 calc(0.1 * var(--u)) calc(1.8 * var(--u));
  filter: drop-shadow(
    0 calc(0.9 * var(--u)) calc(1.2 * var(--u)) rgba(15, 58, 122, 0.35)
  );
}
.benefits {
  background: var(--card);
  margin: calc(-0.4 * var(--u)) 0 0 calc(-1 * var(--u));
  padding: calc(0.15 * var(--u)) calc(1.2 * var(--u));
  border-radius: calc(1.2 * var(--u));
}
.benefit {
  display: grid;
  grid-template-columns: calc(2.9 * var(--u)) 1fr;
  gap: calc(3 * var(--u));
  align-items: center;
  padding: calc(0.16 * var(--u)) 0;
  border-bottom: 1px solid var(--sky);
}
.benefit:last-child {
  border-bottom: 0;
}
.benefit img {
  width: calc(2.9 * var(--u));
  height: calc(2.9 * var(--u));
}
.benefit h3 {
  color: #fff;
  font-size: calc(0.95 * var(--u));
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.08;
}
.benefit p {
  color: #fff;
  font-size: calc(0.92 * var(--u));
  line-height: 1.08;
}

.col-new {
  background: var(--paper) url('/images/bg_dm.jpg') 0 0/100% 100% no-repeat;
  padding: calc(2.4 * var(--u)) calc(3 * var(--u)) calc(2.4 * var(--u))
    calc(4.2 * var(--u));
}
.col-new .col-in {
  gap: calc(0.55 * var(--u));
}
.col-new .eyebrow {
  font: 700 calc(0.95 * var(--u)) var(--f-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: calc(0.4 * var(--u));
}
.col-new h2 {
  font-size: calc(2.12 * var(--u));
  line-height: 1.14;
  margin-top: calc(0.1 * var(--u));
}
.col-new .lead {
  font-size: calc(1.12 * var(--u));
  line-height: 1.3;
  margin-top: calc(0.5 * var(--u));
  color: var(--navy);
}
.col-new .features {
  margin-top: calc(2.8 * var(--u));
}

/* Mobile: finestre della tavola, impilate */
@media (max-width: 1099.98px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  /* copertina sinistra: x 0–620 della tavola (+ spazio per l'ultima riga dello slogan) */
  .hero-brand {
    --u: calc(100vw * 15.36 / 620);
    order: -1;
    position: relative;
    inset: auto;
    height: calc(26.6 * var(--u));
    background: url('/images/bg_hero.jpg') 0 0 / calc(100 * var(--u))
      calc(28 * var(--u)) no-repeat;
    /* 20.7 */
    /* url('/images/bg_building.jpg') 0 calc(20.7 * var(--u)) /
        calc(36 * var(--u)) calc(39.06 * var(--u)) no-repeat,
        var(--paper); */
  }
  /* sezione dispositivi medici: x 990–1536 della tavola */
  .hero-photo {
    --u: calc(100vw * 15.36 / 546);
    position: relative;
    inset: auto;
    height: calc(20.7 * var(--u));
    background: var(--paper) url('/images/bg_hero.jpg') calc(-64.453 * var(--u))
      0 / calc(100 * var(--u)) 100% no-repeat;
  }
  .hero-copy {
    left: calc(4.397 * var(--u));
  }
  .cols {
    display: block;
    height: auto;
  }
  .col-company {
    --u: calc(100vw * 15.36 / 553);
  }
  .col-platform {
    --u: calc(100vw * 15.36 / 435);
  }
  .col-new {
    --u: calc(100vw * 15.36 / 548);
  }
}

/* ---------- Contatti ---------- */
/* ---------- Contatti ---------- */
.contact {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--blue) 0%,
    var(--blue-2) 50%,
    var(--grad-a) 80%,
    #3aa6e0 100%
  );
  color: #fff;
}
.contact h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.contact-in {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px var(--gr) 16px var(--gl);
}
.contact a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
  padding: 6px 4px;
  word-break: break-all;
}
.contact a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.contact .sep {
  display: none;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.6);
}
.contact-info {
  text-align: center;
  padding-bottom: var(--gl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.org-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  font-size: small;
  line-height: 1.2;
}

@media (min-width: 720px) {
  .contact-in {
    display: flex;
    justify-content: center;
    gap: 28px;
  }
  .contact .sep {
    display: block;
  }
  .org-info {
    flex-direction: row;
  }
  .org-info :not(:last-child)::after {
    content: '-';
    margin: 0 0.5rem;
  }
}

/* ================= DESKTOP: tavola 1536px → 1vw = 15.36px ================= */
@media (min-width: 1100px) {
  .burger {
    display: none;
  }
  .top-in {
    min-height: 0;
    height: 4.36vw;
    padding-left: 6.77vw;
    padding-right: 6vw;
  }
  html {
    scroll-padding-top: 4.36vw;
  }
  .brand img {
    height: 3.3vw;
  }
  .nav {
    position: static;
    display: flex !important;
    align-items: center;
    gap: 2.6vw;
    padding: 0;
    box-shadow: none;
    background: none;
  }
  .nav[hidden] {
    display: flex !important;
  }
  .nav ul {
    display: flex;
    gap: 2.25vw;
  }
  .nav ul a {
    border: 0;
    padding: 6px 0;
    font: 500 1.04vw var(--f-display);
    color: var(--deep);
    position: relative;
  }
  .nav ul a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transition: transform 0.2s;
  }
  .nav ul a:hover::after,
  .nav ul a[aria-current='true']::after {
    transform: scaleX(1);
  }
  .nav ul a[aria-current='true'] {
    color: var(--blue);
  }
  .nav a.btn-mail {
    margin: 0;
    padding: 0 1.9vw;
    height: 2.9vw;
    font-size: 1.04vw;
    gap: 0.65vw;
  }
  .btn-mail svg {
    width: 1.3vw;
    height: 1.3vw;
  }
  .contact-in {
    padding: 0;
    height: 2.54vw;
    gap: 2vw;
    align-items: center;
  }
  .contact a {
    font-size: 1.07vw;
    gap: 1.1vw;
    padding: 0;
  }
  .contact svg {
    width: 1.45vw;
    height: 1.45vw;
  }
}
[hidden] {
  display: none !important;
}