/* Soryon — sito vetrina. Struttura v3, mondo visivo v2 «Il disegno spiegato» */

:root {
  --paper: #ffffff;
  --ink: #0d0d12;
  --ink-2: #474a5a;
  --ink-3: #5d6074;
  --blue: #1200ff;
  --blue-deep: #0b00a8;
  --blue-wash: #ecebff;
  --blue-mist: #c9c8ff;
  --blue-tint: #e4e3ff;   /* fondo delle fasce alternate */
  --rule: #1200ff;
  --rule-soft: #d7daf0;
  --on-blue: #ffffff;
  --on-blue-2: #d4d2ff;
  --error: #b3001b;
  --error-wash: #fff4f5;

  /* disegni: il fondo del sito in toni pieni, il blu solo per ciò che fa Soryon */
  --map-plate: #f1f1fa;
  --map-block: #e2e2f4;
  --map-build: #cbcbea;
  --map-water: #d3d2fd;
  --device: #6b7085;       /* sensori già presenti nel sito */
  --signal: #e8590c;       /* l'anomalia, e solo quella */
  --signal-ink: #c2410c;   /* testo dell'anomalia, AA su carta */
  --signal-wash: #fcdcc8;
  --signal-core: #f6b08a;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wide: 112%;
  --narrow: 78%;

  --line: 3px;
  --hair: 1.5px;

  --gutter: clamp(16px, 3.4vw, 48px);
  --section-y: clamp(72px, 9vw, 136px);
  --section-y-tight: clamp(56px, 6.5vw, 96px);
  --maxw: 1440px;
  --header-h: 72px;       /* header ridotto, durante lo scorrimento */
  --header-top: 108px;    /* header in cima alla pagina */
  --logo-h: 34px;
  --logo-top: 54px;
  --logo-scale: 0.63;     /* logo-h / logo-top */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* schermi bassi (portatili 1366×768, 1280×720): l'header grande resta contenuto, così «Proponi un sito» sta nella prima schermata */
@media (min-width: 768px) and (max-height: 820px) {
  :root { --header-top: 84px; --logo-top: 44px; --logo-scale: 0.773; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--blue) var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--blue); color: var(--on-blue); }
.on-blue ::selection { background: var(--paper); color: var(--blue); }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 500; font-stretch: var(--wide); text-wrap: balance; }
p { text-wrap: pretty; }
button { font: inherit; }

a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { color: var(--blue-deep); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.on-blue :focus-visible { outline-color: var(--on-blue); }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.form__hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--blue); color: var(--on-blue); padding: 12px 16px; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.skip-link:hover, .skip-link:focus { color: var(--on-blue); }

.wrap {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.ph { color: var(--ink-2); text-decoration: underline dashed 1px; text-decoration-color: var(--blue-mist); text-underline-offset: 4px; }
.pilot__sheet .ph { color: var(--on-blue-2); text-decoration-color: rgba(255, 255, 255, 0.5); }
/* link segnaposto: si leggono come in attesa, non come link attivi */
a[data-placeholder] { color: var(--ink-2); text-decoration: underline dashed 1px; text-decoration-color: var(--blue-mist); cursor: default; }
a[data-placeholder]:hover { color: var(--ink-2); }
.site-footer a[data-placeholder], .site-footer a[data-placeholder]:hover { color: var(--on-blue-2); text-decoration-color: rgba(255, 255, 255, 0.5); }

/* ---------- tipografia ---------- */
.h2 {
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  max-width: 22ch;
}
.h2 em { font-style: normal; color: var(--blue); }
.lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--ink); max-width: 60ch; }
.label {
  font-size: 13px; font-weight: 600; font-stretch: var(--narrow);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue);
}

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 22px;
  border: var(--hair) solid var(--blue); border-radius: 0;
  background: var(--blue); color: var(--on-blue);
  font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--on-blue); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { min-height: 44px; padding: 0 18px; }
.btn--line { background: transparent; color: var(--blue); }
.btn--line:hover { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.btn--paper { background: var(--paper); color: var(--blue); border-color: var(--paper); }
.btn--paper:hover { background: var(--blue-wash); color: var(--blue-deep); border-color: var(--blue-wash); }
.btn[disabled] { opacity: 0.5; cursor: progress; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 600; font-size: 15px; text-decoration: none; color: var(--blue);
}
.link-arrow span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.link-arrow svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }
.link-arrow:hover svg { transform: translateY(3px); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--hair) solid var(--rule);
}
.header__row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; min-height: 44px; flex: none; }
.brand img { height: var(--logo-h); width: auto; }
/* in cima alla pagina header e logo sono più grandi; scorrendo si riducono.
   Header fisso e solo trasformazioni: il contenuto non si sposta e il layout non viene ricalcolato */
.js .site-header { position: fixed; left: 0; right: 0; transition: transform 0.35s var(--ease-out); }
.js body { padding-top: var(--header-top); }
.js .header__row { height: var(--header-top); }
/* si spostano i singoli elementi, non la riga: il menu a tendina resta agganciato al bordo dell'header */
.js .brand, .js .nav > .btn, .js .menu-toggle, .js .nav__list { transition: transform 0.35s var(--ease-out); }
.js .brand img { height: var(--logo-top); transform-origin: left center; transition: transform 0.35s var(--ease-out); }
.js .site-header.is-compact { transform: translateY(calc(var(--header-h) - var(--header-top))); }
.js .site-header.is-compact :is(.brand, .nav > .btn, .menu-toggle) { transform: translateY(calc((var(--header-top) - var(--header-h)) / 2)); }
.js .site-header.is-compact .brand img { transform: scale(var(--logo-scale)); }
@media (min-width: 1024px) {
  .js .site-header.is-compact .nav__list { transform: translateY(calc((var(--header-top) - var(--header-h)) / 2)); }
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav__list { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; height: 44px; padding: 0 14px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px;
}
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: var(--line);
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="location"]::after { transform: scaleX(1); }
.nav .btn[aria-current="location"] { background: var(--blue-deep); border-color: var(--blue-deep); }

.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.menu-toggle svg { width: 26px; height: 26px; margin: auto; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }

/* ---------- hero ---------- */
.hero { padding: clamp(24px, 3vw, 48px) 0 clamp(64px, 8vw, 112px); overflow: hidden; }
/* «torna all'inizio» porta allo scorrimento zero, dove l'header torna grande */
.js .hero { scroll-margin-top: calc(var(--header-top) - var(--header-h)); }
.hero__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px;
  align-items: start;
}
.hero__copy { grid-column: 1 / span 6; }
.demo { grid-column: 7 / span 6; }
.hero__title {
  font-size: clamp(40px, 4.3vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 15ch;
}
.hero__title em { font-style: normal; color: var(--blue); }
.hero__lead { margin-top: 28px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; max-width: 50ch; }
.hero__for {
  margin-top: 22px; padding-top: 14px; max-width: 46ch;
  border-top: var(--hair) solid var(--rule);
  font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--ink);
}
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* esempio: la mappa in linea blu */
.demo { border-top: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule); }
.demo__map { padding: 20px 0 16px; }
.demo__map svg { width: 100%; height: auto; }

/* il sito: lastra, isolati ed edifici pieni, strade bianche; nessun contorno */
.m-plate { fill: var(--map-plate); }
.m-block { fill: var(--map-block); }
.m-road { fill: none; stroke: var(--paper); stroke-width: 14; }
.m-build { fill: var(--map-build); }
.m-water { fill: var(--map-water); }
.m-base { fill: var(--blue); }
.m-label {
  font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--ink);
  paint-order: stroke; stroke: var(--map-plate); stroke-width: 5px; stroke-linejoin: round;
}
.m-label--signal { fill: var(--signal-ink); }
.m-tag { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--on-blue); }
.sector__art .m-label { font-size: 13px; stroke-width: 4px; }

.sensor circle { fill: var(--paper); stroke: var(--device); stroke-width: 2; }
.alert__dot { fill: var(--paper); stroke: var(--device); stroke-width: 2; transition: fill 0.3s ease, stroke 0.3s ease; }
.alert__halo { fill: var(--signal); opacity: 0; transform-box: fill-box; transform-origin: center; }
.alert .m-label { opacity: 0; transition: opacity 0.3s ease; }
.route { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vehicle__body { fill: var(--blue); stroke: var(--paper); stroke-width: 3; }
.vehicle__tag { fill: var(--blue); }
/* passo 2: il drone elabora a bordo; il rombo che si allarga è il calcolo in corso, non un sensore */
.vehicle__pulse { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.vehicle__edge { opacity: 0; transition: opacity 0.3s ease; }
/* passo 3: le informazioni già elaborate arrivano alla base */
.uplink { opacity: 0; transition: opacity 0.5s ease; }
.uplink__line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 6; }
.m-label--blue { fill: var(--blue); }
.samples ellipse { fill: var(--signal-wash); stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 2 5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); }
.samples .samples__core { fill: var(--signal-core); stroke: none; }
.origin { opacity: 0; transition: opacity 0.5s ease 0.2s; }
.origin__area { fill: none; stroke: var(--ink); stroke-width: 3; }
.origin__tag { fill: var(--ink); }

.demo[data-step="0"] .alert__dot,
.demo[data-step="1"] .alert__dot,
.demo[data-step="2"] .alert__dot { fill: var(--signal); stroke: var(--paper); stroke-width: 2.5; }
.demo[data-step="0"] .alert .m-label,
.demo[data-step="1"] .alert .m-label,
.demo[data-step="2"] .alert .m-label { opacity: 1; }
.demo[data-step="0"] .alert__halo { animation: halo 1.4s var(--ease-out) infinite; }
/* passo 2: due tratti, verso il segnale e poi attorno; il JS muove il drone con gli stessi tempi */
.demo[data-step="1"] .route,
.demo[data-step="2"] .route { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-out); }
.demo[data-step="1"] .route--2 { transition-delay: 1.8s; }
.demo[data-step="1"] .samples ellipse,
.demo[data-step="2"] .samples ellipse { opacity: 1; transform: scale(1); transition: opacity 0.6s ease 2.2s, transform 1.2s var(--ease-out) 2.2s; }
.demo[data-step="1"] .samples .samples__core { transition-delay: 2.8s; }
.demo[data-step="2"] .samples ellipse { transition: none; }
.demo[data-step="1"] .vehicle__edge { opacity: 1; transition-delay: 2.3s; }
.demo[data-step="1"] .vehicle__pulse { animation: pulse 1.4s var(--ease-out) 1.8s infinite; }
.demo[data-step="2"] .origin { opacity: 1; transition-delay: 0.3s; }
.demo[data-step="2"] .uplink { opacity: 1; transition-delay: 1.1s; }
.demo[data-step="2"] .uplink__line { animation: flow 0.9s linear infinite; }
.demo.is-static .vehicle__edge { opacity: 1; }
.demo[data-step="reset"] * { transition: none !important; }
.demo.is-paused, .demo.is-paused * { animation-play-state: paused !important; }

@keyframes pulse {
  0% { opacity: 0.6; transform: rotate(45deg) scale(1); }
  100% { opacity: 0; transform: rotate(45deg) scale(2.6); }
}
@keyframes flow { to { stroke-dashoffset: -14; } }
@keyframes halo {
  0% { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.2); }
}

.demo__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-soft); }
.demo__step {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 16px 20px;
  transition: background-color 0.4s ease, opacity 0.4s ease;
}
.demo__step + .demo__step { border-left: 1px solid var(--rule-soft); }
.demo__step::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: var(--line);
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out);
}
.demo__key, .demo__what strong, .demo__what span { transition: color 0.4s ease, opacity 0.4s ease; }
.js .demo__step:not(.is-on) .demo__key { opacity: 0.45; }
.js .demo__step:not(.is-on) .demo__what strong { color: var(--ink-2); }
.js .demo__step:not(.is-on) .demo__what span { color: var(--ink-3); }
.demo__step.is-now { background: var(--blue-wash); }
.demo__step.is-now::before { transform: scaleX(1); }
/* la chiave del passo è lo stesso segno che compare sulla mappa */
.demo__key { display: block; width: 28px; height: 28px; }
.demo__key svg { width: 28px; height: 28px; }
.demo__what strong { display: block; font-size: 17px; line-height: 1.3; font-weight: 600; }
.demo__what span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.demo__count { display: none; }

.demo__foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--ink-2);
}
.pause-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: var(--hair) solid var(--blue); border-radius: 0; background: var(--paper); color: var(--blue);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease;
}
.pause-btn:hover { background: var(--blue-wash); }
.pause-btn svg { width: 16px; height: 16px; }
.pause-btn .i-play { display: none; }
.pause-btn.is-paused .i-pause { display: none; }
.pause-btn.is-paused .i-play { display: block; }

/* ---------- sezioni ---------- */
.section { padding: var(--section-y) 0; }
.section--tight { padding: var(--section-y-tight) 0; }
/* fasce alternate: la fascia separa le sezioni al posto del filetto;
   dentro la fascia le campiture diventano carta e i filetti tenui si fanno più blu */
.section--tint {
  background: var(--blue-tint);
  --blue-wash: var(--paper);
  --rule-soft: var(--blue-mist);
}
.head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px;
  align-items: end; margin-bottom: clamp(40px, 5vw, 64px);
}
.head .h2 { grid-column: 1 / span 6; }
.head .lead { grid-column: 7 / span 6; }
.head--stack { align-items: start; row-gap: 16px; }
.head--stack .h2 { grid-column: 1 / span 8; }
.head--stack .lead { grid-column: 1 / span 7; }
.head--big .h2 { font-size: clamp(36px, 5vw, 76px); max-width: 16ch; }

/* problema */
.problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule); }
.problem { padding: 28px 28px 32px; }
.problem:nth-child(3n+1) { padding-left: 0; }
.problem:nth-child(3n) { padding-right: 0; }
.problem:not(:nth-child(3n+1)) { border-left: 1px solid var(--rule-soft); }
.problem:nth-child(n+4) { border-top: 1px solid var(--rule-soft); }
.problem h3 { font-size: 19px; line-height: 1.3; font-weight: 600; font-stretch: 100%; margin-bottom: 10px; }
.problem { display: flex; flex-direction: column; }
.problem p { color: var(--ink-2); max-width: 42ch; }
/* il rimando alla parte della piattaforma che affronta il problema, allineato in fondo alla riga */
.problem__link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: auto; padding-top: 16px; min-height: 44px;
  font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--blue); text-decoration: none;
}
.problem__link > span:not(.visually-hidden) { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.problem__link svg { flex: none; width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.problem__link:hover svg { transform: translateY(3px); }

/* come funziona: titoli dei due schemi */
.sub-title {
  margin-bottom: clamp(20px, 2.4vw, 28px); max-width: 28ch;
  font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -0.015em; font-weight: 600;
}
.sub-title--next { margin-top: clamp(64px, 8vw, 112px); }
.sub-head { margin-bottom: clamp(20px, 2.4vw, 28px); }
.sub-head .sub-title { margin-bottom: 0; }
.sub-head .sub-lead { margin-top: 12px; }
/* il primo blocco si stacca dal sottotitolo della sezione */
.head--big + .sub-head { margin-top: clamp(8px, 2vw, 24px); }
.sub-lead { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }

/* schema 1: molte sorgenti, una mappa con la sua storia */
.agg__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  border-top: var(--hair) solid var(--rule);
}
.agg__sources { grid-column: 1 / span 5; grid-row: 1; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.agg__src {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; align-content: center;
  padding: 18px 0;
}
.agg__src + .agg__src { border-top: 1px solid var(--rule-soft); }
.agg__glyph { grid-row: 1 / span 2; width: 32px; height: 32px; }
.agg__src strong { font-size: clamp(18px, 1.4vw, 20px); font-weight: 600; font-stretch: var(--wide); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.agg__src span { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 38ch; }
/* le tre linee convergono sul lato del campo blu */
.agg__join { position: relative; grid-column: 6 / span 1; grid-row: 1; margin: 0 -24px; }
.agg__join svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* l'uscita: un dato sulla mappa, con le sue tre chiavi */
.agg__out { grid-column: 7 / span 6; grid-row: 1; align-self: center; margin: 24px 0; }
.agg__map { width: 100%; max-width: 560px; height: auto; }
.agg__lead path { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.agg__ring { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.agg__dot { fill: var(--ink); }
.agg__tag rect { fill: var(--paper); stroke: var(--blue); stroke-width: 1.5; }
.agg__v { font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--ink); }
.agg__cap { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 52ch; }
.agg__note { margin-top: 28px; padding-top: 14px; padding-right: max(0px, calc(100% - 72ch)); border-top: 1px solid var(--rule-soft); font-size: 15px; color: var(--ink-2); }

/* schema 2: la mappa in quattro stati */
.loop { border-top: var(--hair) solid var(--rule); }
.loop__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -24px; }
.loop__step { padding: 24px 24px 8px; }
.loop__step + .loop__step { border-left: 1px solid var(--rule-soft); }
.loop__map { width: 100%; height: auto; margin-bottom: 20px; }
.loop__step h3 {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.012em; font-weight: 600;
}
.loop__n {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue); color: var(--on-blue); font-size: 13px; font-weight: 600; font-stretch: 100%; letter-spacing: 0;
}
.loop__step p { color: var(--ink-2); font-size: 16px; line-height: 1.5; max-width: 34ch; }
.cycle__back { position: relative; margin: 16px 0 0; height: 56px; }
.cycle__back svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 30px; }
.cycle__back .cycle__tip { left: calc(4% - 7px); right: auto; top: -6px; width: 14px; height: 10px; }
.cycle__back span {
  position: absolute; left: 50%; top: 17px; transform: translateX(-50%);
  max-width: calc(100% - 160px); background: var(--paper); padding: 0 14px; text-align: center;
  font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--blue);
}


/* livelli di autonomia: quattro colonne, un indicatore di quadrati pieni per livello */
.levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; list-style: none; border-top: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule); }
.level { padding: 24px 20px 28px 0; }
.level:nth-child(even) { padding: 24px 0 28px 20px; border-left: 1px solid var(--rule-soft); }
.level:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
.level__meter { display: flex; gap: 4px; margin-bottom: 18px; }
.level__meter i { width: 14px; height: 14px; border: var(--hair) solid var(--blue); }
.level[data-level="1"] .level__meter i:nth-child(-n+1),
.level[data-level="2"] .level__meter i:nth-child(-n+2),
.level[data-level="3"] .level__meter i:nth-child(-n+3) { background: var(--blue); }
/* l'autonomia piena è predisposta ma non attiva: quadrati tratteggiati */
.level--future .level__meter i { border-style: dashed; }
.level h4 { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; margin-bottom: 8px; }
.level p { color: var(--ink-2); font-size: 16px; line-height: 1.5; max-width: 34ch; }
.level--future h4, .level--future p { color: var(--ink-2); }
.fold--block > .fold__head.fold__head--tight { margin-bottom: 12px; }
.levels__lead { margin-bottom: clamp(20px, 2.4vw, 28px); }

/* livelli di autonomia (7 colonne) e dashboard (4 colonne) affiancati su desktop */
.how-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; margin-top: clamp(64px, 8vw, 112px); }
.how-pair__main { grid-column: 1 / span 7; }
.how-pair__side { grid-column: 9 / span 4; }
.how-pair__side .dashes { grid-template-columns: 1fr; }
.how-pair__side .dash, .how-pair__side .dash + .dash { padding: 24px 0 28px; border-left: 0; }
.how-pair__side .dash + .dash { border-top: 1px solid var(--rule-soft); }
/* da desktop le due colonne hanno la stessa altezza: le liste si allungano fino al filetto blu in fondo, allineato */
@media (min-width: 1024px) {
  .how-pair { align-items: stretch; }
  .how-pair__main, .how-pair__side { display: flex; flex-direction: column; }
  .how-pair .fold--block { flex: 1 1 auto; display: flex; flex-direction: column; }
  .how-pair .fold--block::details-content { flex: 1 1 auto; display: flex; flex-direction: column; }
  .how-pair .levels, .how-pair .dashes { flex: 1 1 auto; }
  /* a sinistra titolo su una riga più la frase (12px sopra, 17px/1.55); a destra il titolo su due righe occupa lo stesso spazio, così anche i filetti blu in alto sono allineati */
  .how-pair__side .fold__head .sub-title { min-height: calc(1lh + 12px + 17px * 1.55); }
}

/* blocchi a scomparsa: aperti e fermi da 768px in su, a richiesta sul telefono */
.fold > summary { list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold__head { display: flex; align-items: center; gap: 14px; }
.fold__icon { display: none; flex: none; width: 22px; height: 22px; margin-left: auto; color: var(--blue); transition: transform 0.3s var(--ease-out); }
.fold[open] .fold__icon { --plus-v: transparent; }
.fold--block > .fold__head { margin-bottom: clamp(20px, 2.4vw, 28px); }
.fold--block > .fold__head .sub-title { margin-bottom: 0; }
@media (min-width: 768px) { .fold > summary { cursor: default; } }
.trait__key { flex: none; width: 44px; height: 28px; }
.trait .fold__head { margin-bottom: 10px; }
.trait .fold__head h3 { margin-bottom: 0; }

/* le due dashboard */
.dashes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; list-style: none; border-top: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule); }
.dash { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 28px 40px 32px 0; }
.dash > :not(.dash__key) { grid-column: 2; }
.dash + .dash { padding: 28px 0 32px 40px; border-left: 1px solid var(--rule-soft); }
.dash__key { grid-column: 1; grid-row: 1; width: 28px; height: 28px; margin-top: -1px; }
.dash__more { justify-self: start; margin-top: 12px; }
.dash h4 { margin-bottom: 10px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.dash p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 58ch; }

/* tratti distintivi */
.traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: var(--hair) solid var(--rule); }
.trait { padding: 28px 0 30px; }
.trait:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
.trait h3 { margin-bottom: 10px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.trait p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 62ch; }

/* approfondimenti a scomparsa */
.more-group { margin-top: clamp(32px, 4vw, 48px); }
.more { border-top: var(--hair) solid var(--rule); }
.more:last-child { border-bottom: var(--hair) solid var(--rule); }
.more summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; font-weight: 600; font-size: 17px; color: var(--blue);
}
.more summary::-webkit-details-marker { display: none; }
.more summary svg { width: 22px; height: 22px; flex: none; transition: transform 0.3s var(--ease-out); }
.more[open] summary svg { --plus-v: transparent; }
.more summary:hover span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.more__body { padding: 0 0 32px; }
.faq > div { padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.faq > div:first-child { border-top: 0; padding-top: 0; }
.faq dt { font-weight: 600; max-width: 70ch; }
.faq dd { margin-top: 4px; color: var(--ink-2); max-width: 70ch; }

/* ambiti: lo schema della base con i moduli, poi il portuale, poi gli esempi in piccolo */
.platform { margin: 0 0 clamp(48px, 6vw, 88px); }
.platform__modules {
  --link: 32px;
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 16px;
}
.module { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 16px 18px 18px; }
.module::after {
  content: ""; position: absolute; left: 50%; top: 100%; height: calc(var(--link) + var(--line)); width: var(--line); margin: 0 0 0 -1.5px;
  background: var(--blue);
}
.module__kind { font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.module strong { hyphens: auto; overflow-wrap: break-word; font-weight: 500; font-stretch: var(--wide); letter-spacing: -0.012em; line-height: 1.15; }
.module--on { border: var(--line) solid var(--blue); background: var(--paper); }
.module--on strong { font-size: clamp(26px, 2.4vw, 36px); color: var(--blue); }
.module--on .chip { margin: auto 0 0; }
.module--ex { border: var(--hair) dashed var(--blue); }
.module--ex strong { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink); }
.module--ex::after { width: var(--hair); margin-left: -0.75px; background: repeating-linear-gradient(to bottom, var(--blue) 0 4px, transparent 4px 8px); }
.module--open { padding: 0; }
.module--open a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; height: 100%; padding: 16px 18px 18px;
  color: var(--ink); text-decoration: none; transition: background-color 0.2s ease;
}
.module--open a:hover { background: var(--blue-tint); color: var(--ink); }
.module--open strong { color: var(--blue); }
.module--open svg { width: 22px; height: 22px; margin-top: auto; color: var(--blue); transition: transform 0.3s var(--ease-out); }
.module--open a:hover svg { transform: rotate(90deg); }

.platform__base {
  margin-top: 32px; background: var(--blue); color: var(--on-blue);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr); column-gap: 16px; align-items: center;
  padding: 18px;
}
/* i collegamenti dei moduli arrivano su una linea comune, non su una singola funzione */
.platform__base { position: relative; padding-top: 44px; }
.platform__base::before { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: var(--hair); background: rgba(255, 255, 255, 0.6); }
.platform__base :focus-visible { outline-color: var(--on-blue); }
.platform__name { font-size: clamp(22px, 2.1vw, 32px); font-weight: 500; font-stretch: var(--wide); line-height: 1.1; letter-spacing: -0.018em; }
.platform__ref { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.platform__ref li:not(:last-child)::after { content: "·"; padding: 0 10px; color: var(--on-blue-2); }

.sector--lead {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px;
  padding: 32px 0 40px; border-top: var(--hair) solid var(--rule);
}
.sector__intro { grid-column: 1 / span 5; }
.sector__detail { grid-column: 7 / span 6; }
.sector__art { width: 100%; max-width: 380px; height: auto; margin-bottom: 20px; }
.sector h3 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.018em; margin-bottom: 12px; }
.sector__text { color: var(--ink-2); font-size: 16px; line-height: 1.5; max-width: 54ch; }
.sector__sub { margin: 0; padding-bottom: 10px; border-bottom: var(--hair) solid var(--rule); font-size: 12px; font-weight: 600; font-stretch: var(--narrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }


.chip {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; margin-bottom: 14px;
  border: var(--hair) solid var(--blue); color: var(--blue); font-size: 13px; font-weight: 600; line-height: 1.3;
}
.chip--on { background: var(--blue); color: var(--on-blue); }

.cases li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--rule-soft); font-size: 15px; line-height: 1.45; }
.cases li:first-child { border-top: 0; }
.cases strong { font-weight: 600; }
.cases span { color: var(--ink-2); }

/* contesto normativo: riga a tutta larghezza sotto le due colonne del portuale, così aprirla non sbilancia le colonne */
.reg { grid-column: 1 / -1; background: var(--blue-wash); }
.reg summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 8px 18px; font-size: 15px; font-weight: 600; color: var(--blue);
}
.reg summary::-webkit-details-marker { display: none; }
.reg summary svg { width: 18px; height: 18px; flex: none; transition: transform 0.3s var(--ease-out); }
.reg[open] summary svg { --plus-v: transparent; }
.reg summary:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.reg__body { margin: 0 18px; border-top: 1px solid var(--blue-mist); }
.reg__group + .reg__group { border-top: 1px solid var(--blue-mist); }
.reg__h { padding-top: 18px; font-size: 12px; font-weight: 600; font-stretch: var(--narrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.reg ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reg li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 24px 22px; }
.reg li:first-child { padding-left: 0; }
.reg li:last-child { padding-right: 0; }
.reg li + li { border-left: 1px solid var(--blue-mist); }
.reg .date { font-size: 14px; font-weight: 600; font-stretch: var(--narrow); letter-spacing: 0.04em; color: var(--blue); font-variant-numeric: tabular-nums; }
.reg p { font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.reg__src { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; font-size: 14px; font-weight: 600; }
.reg__src svg { width: 13px; height: 13px; flex: none; }

.close-line {
  margin-top: clamp(40px, 5vw, 56px); padding-top: 28px; border-top: var(--hair) solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
}
.close-line p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; font-weight: 500; font-stretch: var(--wide); letter-spacing: -0.01em; max-width: 44ch; }

/* stato: quattro fasi lungo una linea */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--hair) solid var(--rule); }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: var(--hair); background: var(--blue-mist); }
/* la linea entra a metà nella fase corrente: è in corso */
.timeline::after { content: ""; position: absolute; left: 0; top: 39px; height: var(--line); width: 40%; background: var(--blue); }
.phase { position: relative; padding: 23px 24px 32px; }
.phase.is-current { background: var(--blue-wash); }
.phase__dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper); border: var(--hair) solid var(--blue); color: var(--on-blue);
  margin-bottom: 22px;
}
.phase__dot svg { width: 16px; height: 16px; }
.phase.is-done .phase__dot { background: var(--blue); }
.phase.is-current .phase__dot::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); }
.phase__when { margin-bottom: 6px; font-size: 14px; font-weight: 600; font-stretch: var(--narrow); letter-spacing: 0.03em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.phase h3 { margin-bottom: 6px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.phase p:not(.phase__when):not(.phase__state) { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.phase__state { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.phase__state::before { content: ""; width: 10px; height: 10px; border: var(--hair) solid var(--blue); border-radius: 50%; }
.phase.is-done .phase__state::before, .phase.is-current .phase__state::before { background: var(--blue); }
.phase.is-current .phase__state { color: var(--blue); }

/* pilot: il foglio blu */
.pilot { padding: var(--section-y-tight) 0 0; }
.pilot__sheet {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(32px, 4vw, 56px); align-items: start;
  background: var(--blue); color: var(--on-blue);
  padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 72px);
}
.pilot__sheet > .h2 { grid-column: 1 / -1; }
.pilot__intro { grid-column: 1 / span 5; }
.pilot__lists { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; border-top: var(--hair) solid rgba(255, 255, 255, 0.9); }
.pilot .h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1.02; letter-spacing: -0.028em; max-width: 22ch; }
.pilot .lead { margin: 0 0 16px; color: var(--on-blue); }
.pilot__terms { margin-bottom: 28px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.35); font-size: 16px; line-height: 1.5; color: var(--on-blue-2); max-width: 46ch; }
.pilot__col { padding-top: 18px; }
.pilot__col:first-child { padding-right: 24px; border-right: var(--hair) solid rgba(255, 255, 255, 0.9); }
.pilot__col + .pilot__col { padding-left: 24px; }
.pilot__col h3 { font-size: 13px; font-weight: 600; font-stretch: var(--narrow); letter-spacing: 0.06em; text-transform: uppercase; }
.pilot__col ul { margin-top: 12px; }
.pilot__col li { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.35); font-size: 16px; line-height: 1.45; }
.pilot__col li:first-child { border-top: 0; }
.pilot__col li svg { width: 14px; height: 14px; margin-top: 5px; }
.pilot__sheet :focus-visible { outline-color: var(--on-blue); }
/* team */
.team__story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: start; margin-bottom: clamp(40px, 5vw, 64px); }
.team__story .h2 { grid-column: 1 / span 8; }
.team__lead { grid-column: 1 / span 9; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.42; letter-spacing: -0.005em; max-width: 60ch; }
.people {
  --people-gap: 48px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--people-gap);
  border-top: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule);
}
/* ritratto: duotono blu d'identità su lastra carta, tagliato alle spalle da un filetto blu */
.person { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 0 24px; }
.person + .person::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--people-gap) / -2); border-left: 1px solid var(--rule-soft); }
.person__photo {
  display: block; width: 100%; max-width: 168px; height: auto; aspect-ratio: 1 / 1; margin-bottom: 20px;
  background: var(--paper); border-bottom: var(--hair) solid var(--blue);
}
.person__name { hyphens: auto; overflow-wrap: break-word; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.person__role { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.person__focus { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft); max-width: 30ch; font-size: 15px; line-height: 1.45; }
.person__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; }
.person__link svg { width: 14px; height: 14px; }
.team__foot { margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.team__foot > div:first-child { grid-column: 1 / span 7; }
.team__foot > div:last-child { grid-column: 9 / span 4; }
.team__foot p { margin-top: 12px; color: var(--ink-2); max-width: 52ch; }
.advisors { margin-top: 12px; }
.advisors li { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--rule-soft); font-size: 15px; }
.advisors strong { font-weight: 600; }
.advisors span { color: var(--ink-2); }

/* contatti */
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.contact__intro { grid-column: 1 / span 4; }
.contact__intro .lead { margin-top: 24px; }
.contact__next { margin-top: 32px; border-top: var(--hair) solid var(--rule); counter-reset: next; }
.contact__next li {
  counter-increment: next; display: grid; grid-template-columns: 28px 1fr; column-gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--rule-soft); font-size: 15px; line-height: 1.45; color: var(--ink-2);
}
.contact__next li::before {
  content: counter(next); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: var(--hair) solid var(--blue); color: var(--blue); font-size: 13px; font-weight: 600;
}
.contact__mail { margin-top: 32px; }
.contact__mail p { font-size: 14px; color: var(--ink-2); }
.contact__mail a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 500; font-stretch: var(--wide); letter-spacing: -0.01em; }

.form { grid-column: 6 / span 7; border: var(--hair) solid var(--rule); }
.form :focus-visible { outline-color: var(--blue); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; }
.cell { position: relative; min-width: 0; margin: 0; padding: 14px 18px 12px; border: 0; border-bottom: var(--hair) solid var(--rule); transition: background-color 0.2s ease; }
.cell--full { grid-column: 1 / -1; }
.cell--half + .cell--half { border-left: var(--hair) solid var(--rule); }
.cell:focus-within { background: var(--blue-wash); }
.cell:has(input[type="text"]:focus-visible, input[type="email"]:focus-visible, textarea:focus-visible) { box-shadow: inset 0 0 0 2px var(--blue); }
.cell > label, .cell legend {
  display: block; padding: 0; font-size: 13px; font-weight: 600; font-stretch: var(--narrow);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue);
}
.req--pilot { display: none; }
.form.is-pilot .req--pilot { display: inline; }
.cell .req { margin-left: 4px; color: var(--ink-2); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.cell input[type="text"], .cell input[type="email"], .cell textarea {
  width: 100%; margin-top: 6px; padding: 6px 0 4px; border: 0; border-radius: 0; background: transparent;
  font: inherit; font-size: 18px; color: var(--ink); caret-color: var(--blue); outline: none;
}
.cell input[type="text"], .cell input[type="email"] { min-height: 44px; }
.cell textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.cell input::placeholder, .cell textarea::placeholder { color: var(--ink-3); }
.form__hint { clear: both; margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--blue); }
.err { display: none; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--error); }
.cell.is-invalid .err { display: block; }
.cell.is-invalid { background: var(--error-wash); }
.cell.is-invalid > label, .cell.is-invalid legend { color: var(--error); }

fieldset.cell legend { float: left; width: 100%; margin-bottom: 10px; }
.choices { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--hair) solid var(--rule); background: var(--paper); }
.choice { position: relative; }
.choice + .choice { border-left: var(--hair) solid var(--rule); }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 8px 10px;
  font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.choice input:hover + span { background: var(--blue-wash); }
.choice input:checked + span { background: var(--blue); color: var(--on-blue); }
.choice input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; position: relative; z-index: 1; }

.consent { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; }
.consent input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 0;
  border: var(--hair) solid var(--blue); background: var(--paper); display: grid; place-items: center; cursor: pointer;
}
.consent input:checked { background: var(--blue); }
.consent input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.consent label { font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.cell.is-invalid .consent input { border-color: var(--error); }
.cell--pilot { padding-top: 16px; padding-bottom: 16px; }
.cell--pilot:has(input:checked) { background: var(--blue-wash); }
.consent--pilot { align-items: center; }
.consent--pilot label { font-size: 16px; font-weight: 600; color: var(--ink); }

.form__status { padding: 16px 18px 0; font-size: 14px; font-weight: 600; color: var(--error); }
.form__status:empty { display: none; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; }
.form__foot p { font-size: 14px; color: var(--ink-2); max-width: 42ch; }
.form__done { display: none; padding: clamp(28px, 4vw, 48px); }
.form.is-sent .form__grid, .form.is-sent .form__foot { display: none; }
.form.is-sent .form__done { display: block; }
.form__done-mark { width: 56px; height: 56px; }
.form__done h3 { margin-top: 20px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.015em; }
.form__done p { margin-top: 12px; color: var(--ink-2); max-width: 52ch; }

/* footer: chiude la pagina in blu pieno */
.site-footer { padding: 72px 0 40px; background: var(--blue); color: var(--on-blue); }
.site-footer ::selection { background: var(--paper); color: var(--blue); }
.site-footer :focus-visible { outline-color: var(--on-blue); }
.footer { display: grid; grid-template-columns: 1.2fr 0.8fr 2fr; column-gap: 48px; row-gap: 32px; }
.footer__brand img { height: 40px; width: auto; }
.footer__brand p { margin-top: 14px; font-size: 14px; color: var(--on-blue-2); max-width: 32ch; }
.footer__h { font-size: 14px; font-weight: 600; font-stretch: 100%; }
.footer__col p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--on-blue-2); max-width: 62ch; }
.footer__col a { color: var(--on-blue); }
.footer__links { display: flex; flex-direction: column; align-items: flex-start; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__col a:hover { color: var(--on-blue-2); }
.footer-meta { margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.35); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--on-blue-2); }
.footer-meta ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-meta a { color: var(--on-blue-2); display: inline-flex; align-items: center; min-height: 44px; }
.footer-meta li { display: flex; align-items: center; gap: 6px; }
.footer-meta a:hover { color: var(--on-blue); }
.soon { white-space: nowrap; }
.consent .soon { color: var(--ink-2); font-weight: 400; }

/* torna all'inizio: compare dopo la prima schermata */
.to-top {
  position: fixed; z-index: 40;
  right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 48px; height: 48px;
  border: var(--hair) solid var(--blue); background: var(--paper); color: var(--blue);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out), visibility 0s linear 0.35s, background-color 0.2s ease;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--blue-wash); color: var(--blue-deep); }
.to-top svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease-out); }
.to-top:hover svg { transform: translateY(-3px); }
/* senza JavaScript il pulsante non sa quando comparire: resta nascosto */
html:not(.js) .to-top { display: none; }

/* ---------- 1023px: tablet ---------- */
@media (max-width: 1023px) {
  .menu-toggle { display: block; }
  .nav { gap: 8px; }
  .nav__list {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--paper); border-bottom: var(--hair) solid var(--rule);
    padding: 8px var(--gutter) 16px;
    display: none;
  }
  .nav__list.is-open { display: flex; }
  .nav__list li + li { border-top: 1px solid var(--rule-soft); }
  .nav__link { height: 56px; width: 100%; padding: 0; font-size: 18px; }
  .nav__link::after { left: 0; right: auto; width: 40px; bottom: 10px; }

  .hero__copy, .demo { grid-column: 1 / -1; }
  .hero__title { max-width: 16ch; }
  .demo { max-width: 720px; }
  .head .h2, .head .lead { grid-column: 1 / -1; }
  .problems { grid-template-columns: 1fr 1fr; }
  .problems > .problem { padding: 24px 24px 28px 0; border-left: 0; border-top: 0; }
  .problems > .problem:nth-child(even) { padding: 24px 0 28px 24px; border-left: 1px solid var(--rule-soft); }
  .problems > .problem:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
  .dashes { grid-template-columns: 1fr; }
  .dash, .dash + .dash { padding: 24px 0 28px; border-left: 0; }
  .dash + .dash { border-top: 1px solid var(--rule-soft); }
  .loop__steps { grid-template-columns: 1fr 1fr; margin: 0 -20px; }
  .loop__step { padding: 24px 20px 28px; }
  .loop__step:nth-child(odd) { border-left: 0; }
  .loop__step:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
  .cycle__back { height: auto; margin: 4px 0 20px; }
  .cycle__back svg { display: none; }
  .cycle__back span { position: static; transform: none; max-width: none; padding: 0; display: inline-flex; align-items: center; gap: 12px; white-space: normal; }
  .how-pair { display: block; }
  .how-pair__side { margin-top: clamp(64px, 8vw, 112px); }
  .cycle__back span::before { content: ""; flex: none; width: 24px; height: var(--line); background: var(--blue); }
  .loop { border-bottom: var(--hair) solid var(--rule); }
  .traits { grid-template-columns: 1fr; }
  .trait:nth-child(n+2) { border-top: 1px solid var(--rule-soft); }
  .module--ex strong { font-size: 16px; }
  .platform__base { grid-template-columns: 1fr; row-gap: 8px; }
  .sector__intro, .sector__detail { grid-column: 1 / -1; }
  .agg__sources { grid-column: 1 / span 5; }
  .agg__join { grid-column: 6 / span 1; }
  .agg__out { grid-column: 7 / span 6; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline::before, .timeline::after { display: none; }
  .phase { border-top: var(--hair) solid var(--rule); }
  .pilot__intro, .pilot__lists { grid-column: 1 / -1; }
  .team__story .h2, .team__lead { grid-column: 1 / -1; }
  .people { grid-template-columns: 1fr 1fr; }
  .person:nth-child(3)::before { display: none; }
  .person:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
  .team__foot > div:first-child, .team__foot > div:last-child { grid-column: 1 / -1; }
  .contact__intro, .form { grid-column: 1 / -1; }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer__col:last-child { grid-column: 1 / -1; }
}

/* ---------- 767px: mobile ---------- */
@media (max-width: 767px) {
  :root { --header-h: 64px; --header-top: 76px; --logo-h: 28px; --logo-top: 36px; --logo-scale: 0.778; }
  body { font-size: 16px; }
  .to-top { width: 44px; height: 44px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .hero { padding-top: 16px; }
  .hero__grid { row-gap: 0; }
  .hero__copy, .contact__intro, .pilot__intro { display: contents; }
  .hero__grid > *, .hero__copy > *, .contact__grid > *, .contact__intro > *, .pilot__sheet > *, .pilot__intro > * { grid-column: 1 / -1; }
  .hero__title { order: 1; }
  .hero__lead { order: 2; }
  .hero__actions { order: 3; }
  .demo { order: 4; margin-top: 12px; }
  .demo__map { padding: 10px 0; }
  .hero__for { order: 5; }
  .contact__grid { row-gap: 0; }
  .contact__intro .h2 { order: 1; }
  .contact__intro .lead { order: 2; }
  .form { order: 3; margin-top: 28px; }
  .contact__next { order: 4; margin-top: 40px; }
  .contact__mail { order: 5; }
  .pilot__sheet { row-gap: 0; }
  .pilot__intro > * { order: 1; }
  .pilot__lists { order: 2; margin-top: 32px; }
  .pilot .btn { order: 1; }
  .pilot .lead { margin-top: 20px; }
  .hero__title { font-size: clamp(34px, 9.6vw, 44px); letter-spacing: -0.024em; }
  .hero__lead { margin-top: 14px; font-size: 16px; }
  .hero__actions { gap: 8px 20px; margin-top: 16px; }
  .h2 { font-size: 30px; }
  .head--big .h2 { font-size: 36px; }
  .lead { font-size: 17px; }
  .demo__steps { grid-template-columns: 1fr; }
  .demo__step { flex-direction: row; align-items: baseline; gap: 14px; padding: 12px 10px 14px; }
  .demo__step + .demo__step { border-left: 0; border-top: 1px solid var(--rule-soft); }
  .demo__step { align-items: flex-start; }
  .demo__key { flex: none; margin-top: 1px; }
  /* un passo alla volta, subito sotto la mappa; con movimento ridotto restano tutti e tre */
  .js .demo:not(.is-static) .demo__steps { display: grid; }
  .js .demo:not(.is-static) .demo__step { grid-area: 1 / 1; align-self: start; }
  .js .demo:not(.is-static) .demo__step + .demo__step { border-top: 0; }
  .js .demo:not(.is-static) .demo__step:not(.is-now) { visibility: hidden; }
  .js .demo:not(.is-static) .demo__count { display: block; flex: none; margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--blue); }
  /* blocchi a scomparsa */
  .fold > summary { cursor: pointer; min-height: 44px; }
  .fold__icon { display: block; }
  .fold:not([open]) > .fold__head { margin-bottom: 0; }
  .fold--block { border-bottom: var(--hair) solid var(--rule); }
  .fold--block[open] { border-bottom: 0; }
  /* su telefono il ciclo resta una griglia 2×2, come nella v3: le mappe non hanno etichette da leggere */
  .loop__steps { grid-template-columns: 1fr 1fr; margin: 0 -8px; }
  .loop__step { padding: 16px 8px 20px; }
  .loop__step:nth-child(odd) { border-left: 0; }
  .loop__map { margin-bottom: 12px; }
  /* le mappe scendono al 70%: rotta e segnale si ingrossano per restare visibili */
  .lp-route { stroke-width: 4px; }
  .lp-route[stroke-dasharray] { stroke-dasharray: 1 7; }
  .lp-dot { transform-box: fill-box; transform-origin: center; transform: scale(1.35); }
  .loop__step h3 { font-size: 17px; gap: 8px; }
  .loop__n { width: 26px; height: 26px; font-size: 12px; }
  .loop__step p { font-size: 14px; }
  .cycle__back span { text-align: left; }
  .hero__for { margin-top: 20px; padding-top: 0; border-top: 0; font-size: 15px; }
  .problems { grid-template-columns: 1fr; }
  .problems > .problem, .problems > .problem:nth-child(even) { padding: 24px 0 28px; border-left: 0; }
  .problems > .problem + .problem { border-top: 1px solid var(--rule-soft); }
  .levels { grid-template-columns: 1fr; }
  .level, .level + .level, .level:nth-child(even) { padding: 20px 0 22px; border-left: 0; }
  .level + .level { border-top: 1px solid var(--rule-soft); }
  .level__meter { margin-bottom: 12px; }
  .level p { max-width: none; }
  .sub-lead { font-size: 16px; }
  /* su telefono i moduli stanno su una dorsale che scende fino alla base */
  .platform__modules { position: relative; grid-template-columns: 1fr; gap: 10px; padding-left: 22px; }
  .platform__modules::before { content: ""; position: absolute; left: 0; top: 26px; bottom: -24px; width: var(--line); background: var(--blue); }
  .module::after, .module--ex::after { left: -22px; top: 26px; width: 22px; height: var(--line); margin: -1.5px 0 0; }
  .module--ex::after { left: -19px; width: 19px; height: var(--hair); margin-top: -0.75px; background: repeating-linear-gradient(to right, var(--blue) 0 4px, transparent 4px 8px); }
  .module, .module--open a { min-height: 0; padding: 12px 14px 14px; }
  .module--open { padding: 0; }
  .module--open a { position: relative; padding-right: 52px; }
  .module--open svg { position: absolute; right: 14px; top: 50%; margin-top: -11px; }
  .module--on .chip { margin-top: 6px; }
  .module--on strong { font-size: 24px; }
  .module--ex strong { font-size: 16px; }
  .module__kind { font-size: 13px; }
  .platform__base { margin-top: 24px; padding: 36px 16px 20px; }
  .platform__base::before { left: 16px; right: 16px; top: 16px; }
  .sector--lead { padding: 24px 0 32px; row-gap: 24px; }
  .cases li { grid-template-columns: 1fr; }
  .reg ol { grid-template-columns: 1fr; }
  .reg li, .reg li:first-child, .reg li:last-child { padding: 16px 0 14px; }
  .reg li + li { border-left: 0; border-top: 1px solid var(--blue-mist); }
  /* su telefono le sorgenti scendono su una dorsale fino alla mappa */
  .agg__grid { display: block; }
  .agg__sources { position: relative; display: block; padding-left: 22px; }
  .agg__sources::before { content: ""; position: absolute; left: 0; top: 34px; bottom: -20px; width: var(--line); background: var(--blue); }
  .agg__src { position: relative; padding: 16px 0; }
  .agg__src::before { content: ""; position: absolute; left: -22px; top: 32px; width: 22px; height: var(--hair); background: var(--blue); }
  .agg__join { display: none; }
  .agg__out { margin: 24px 0 0; }
      .agg__src strong { font-size: 18px; }
  .sub-title { font-size: 24px; }
  .close-line .btn { width: 100%; }
  .timeline { grid-template-columns: 1fr; border-bottom: 0; }
  .phase { display: grid; grid-template-columns: 34px 1fr; column-gap: 18px; padding: 20px 12px 24px; }
  .phase > :not(.phase__dot) { grid-column: 2; }
  .phase__dot { grid-row: 1 / span 5; margin: 0; }
  .phase:last-child { border-bottom: var(--hair) solid var(--rule); }
  .phase__state { justify-self: start; }
  .pilot__lists { grid-template-columns: 1fr; }
  .pilot__col:first-child { padding-right: 0; padding-bottom: 12px; border-right: 0; }
  .pilot__col + .pilot__col { padding-left: 0; border-top: var(--hair) solid rgba(255, 255, 255, 0.9); }
  .pilot .btn { width: 100%; }
  .people { --people-gap: 24px; }
  .person { padding: 24px 0 16px; }
  .person__photo { max-width: 120px; margin-bottom: 14px; }
  .person__name { font-size: 18px; }
  .person__focus { font-size: 14px; }
  /* su telefono nome e ruolo degli advisor sempre su due righe, anche quando il ruolo è corto */
  .advisors li { flex-direction: column; gap: 2px; }
  .form__grid { grid-template-columns: 1fr; }
  .cell--half + .cell--half { border-left: 0; }
  .choices { grid-template-columns: 1fr 1fr; }
  .choice:nth-child(3) { border-left: 0; }
  .choice:nth-child(n+3) { border-top: var(--hair) solid var(--rule); }
  .form__foot .btn { width: 100%; }
  .footer { grid-template-columns: 1fr; }
  .more summary { font-size: 16px; }
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .pause-btn, .demo__foot { display: none; }
}