/* =====================================================================
   Nexus, sito pubblico (terza versione: chiaro e scuro)
   Due temi gemelli, costruiti sugli stessi token: il chiaro è il foglio
   della suite (off-white con una punta di blu, navy per il testo) ed è
   quello con cui il sito parte sempre; lo scuro è la sala di controllo
   (navy profondo) e si accende solo dall'interruttore in testata. Un solo accento teal, il
   blu riservato a ciò che propone l'intelligenza artificiale, l'ambra per
   ciò che chiede una persona. Archivo con l'asse di larghezza: espanso nei
   titoli, normale nel testo. Movimento: curve forti, interfaccia sotto i
   300 ms, un momento orchestrato (il Progettista) e un movimento
   ambientale motivato (i dati che scorrono verso il gestionale).
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- token: tema chiaro (il default) ---------- */
:root {
  --bg: #F5F8FC;
  --bg-2: #EDF2F8;
  --panel: #FFFFFF;
  --panel-2: #F0F4F9;
  --panel-3: #E3EAF2;
  --field: #F5F8FC;
  --line: rgb(10 21 38 / .10);
  --line-2: rgb(10 21 38 / .18);
  --text: #0A1526;
  --muted: #4B5D77;
  --faint: #7B8CA3;
  --tint: rgb(10 21 38 / .025);
  --ghost: rgb(10 21 38 / .05);
  --ghost-hover: rgb(10 21 38 / .09);

  --teal: #1CCFC9;
  --teal-2: #15B8B2;
  --teal-soft: rgb(28 207 201 / .14);
  --accent-ink: #0B7C77;
  --on-teal: #0A1526;
  --ai: #2F6BFF;
  --ai-soft: rgb(47 107 255 / .09);
  --amber-ink: #9A6100;
  --amber-soft: rgb(245 165 36 / .16);
  --ok: #22C55E;
  --ok-ink: #147A45;
  --ok-soft: rgb(34 197 94 / .14);
  --on-ok: #FFFFFF;
  --bad-ink: #C22B2B;

  --paper: #F7F9FC;
  --invert-bg: #0A1526;
  --invert-text: #F4F7FB;
  --bezel: #0A1526;
  --core-a: #E4F7F6;
  --core-b: #FFFFFF;
  --live-bg: #E1F7F4;
  --stripe: #E8EEF5;
  --top-bg: rgb(245 248 252 / .78);
  --shadow-soft: 0 1px 2px rgb(10 21 38 / .06);
  --shadow-lift: 0 1px 2px rgb(10 21 38 / .06), 0 24px 48px -28px rgb(10 21 38 / .35);
  --shadow-deep: 0 40px 80px -40px rgb(10 21 38 / .35);
  --glow-teal: 0 10px 30px -14px rgb(28 207 201 / .75);
  --icon-sun: none;
  --icon-moon: block;

  --r-lg: 22px;
  --r: 14px;
  --r-sm: 10px;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: light;
}

/* ---------- token: tema scuro, solo se scelto dall'interruttore (il sito parte sempre chiaro) ---------- */
:root[data-theme="dark"] {
  --bg: #060E1A;
  --bg-2: #0A1526;
  --panel: #0D1A2F;
  --panel-2: #12223C;
  --panel-3: #182C4B;
  --field: #060E1A;
  --line: #1B3050;
  --line-2: #26406A;
  --text: #EEF3F9;
  --muted: #9FB1C6;
  --faint: #6F87A6;
  --tint: rgb(255 255 255 / .02);
  --ghost: rgb(255 255 255 / .05);
  --ghost-hover: rgb(255 255 255 / .09);
  --teal-soft: rgb(28 207 201 / .12);
  --accent-ink: #1CCFC9;
  --ai: #6E97FF;
  --ai-soft: rgb(110 151 255 / .12);
  --amber-ink: #F5A524;
  --amber-soft: rgb(245 165 36 / .12);
  --ok: #3DDC97;
  --ok-ink: #3DDC97;
  --ok-soft: rgb(61 220 151 / .12);
  --on-ok: #06101C;
  --bad-ink: #FF6B6B;
  --invert-bg: #F7F9FC;
  --invert-text: #0F172A;
  --bezel: #182C4B;
  --core-a: #13304A;
  --core-b: #0A1526;
  --live-bg: #12303A;
  --stripe: #142640;
  --top-bg: rgb(6 14 26 / .72);
  --shadow-soft: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-lift: 0 1px 2px rgb(0 0 0 / .3), 0 24px 48px -28px rgb(0 0 0 / .8);
  --shadow-deep: 0 40px 80px -40px rgb(0 0 0 / .9);
  --glow-teal: 0 10px 30px -14px rgb(28 207 201 / .9);
  --icon-sun: block;
  --icon-moon: none;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-stretch: 100%; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
p, dd, li { text-wrap: pretty; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--teal); color: var(--on-teal); padding: 10px 14px; border-radius: var(--r-sm); font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- pulsanti: raggio 10px per tutti i comandi ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 24px; white-space: nowrap; border: 0; border-radius: var(--r-sm);
  font-weight: 650; font-size: 16px; font-stretch: 105%; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--teal { background: var(--teal); color: var(--on-teal); box-shadow: var(--glow-teal); }
.btn--ghost { background: var(--ghost); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) and (pointer: fine) {
  .btn--teal:hover { background: var(--teal-2); }
  .btn--ghost:hover, .btn--line:hover { background: var(--ghost-hover); }
}

/* ---------- testata ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--top-bg); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color 200ms ease, background-color 200ms ease;
}
.top.is-scrolled { border-bottom-color: var(--line); }
.top__in { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); height: 72px; display: flex; align-items: center; gap: 24px; }
.brand { color: var(--text); margin-right: auto; }
.brand__logo { height: 28px; width: auto; }
.top__tools { display: flex; align-items: center; gap: 4px; order: 3; }
.theme { width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }
.theme:active { transform: scale(.94); }
.theme svg { width: 20px; height: 20px; }
.theme__sun { display: var(--icon-sun); }
.theme__moon { display: var(--icon-moon); }
@media (hover: hover) and (pointer: fine) { .theme:hover { background: var(--ghost); color: var(--text); } }
.nav { display: flex; align-items: center; gap: 28px; order: 2; }
.nav a:not(.btn) { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; position: relative; transition: color 150ms ease; }
.nav a.is-current { color: var(--text); }
.nav a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--teal); }
@media (hover: hover) and (pointer: fine) { .nav a:not(.btn):hover { color: var(--text); } }
.navtoggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.navtoggle__bar, .navtoggle__bar::before, .navtoggle__bar::after { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--text); transition: transform 200ms var(--ease-out), background-color 150ms ease; }
.navtoggle__bar { top: 21px; }
.navtoggle__bar::before { content: ""; left: 0; top: -7px; }
.navtoggle__bar::after { content: ""; left: 0; top: 7px; }
.navtoggle[aria-expanded="true"] .navtoggle__bar { background: transparent; }
.navtoggle[aria-expanded="true"] .navtoggle__bar::before { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(36px, 6vw, 84px) 0 clamp(56px, 8vw, 110px); isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: -72px 0 auto 0; height: 900px; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 78% 30%, rgb(28 207 201 / .12), transparent 70%),
    radial-gradient(ellipse 40% 50% at 15% 70%, rgb(47 107 255 / .08), transparent 70%);
}
.hero__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "k k" "t t" ". s"; gap: 0 48px; }
.kicker { grid-area: k; font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.hero__title {
  grid-area: t; margin-top: 22px;
  font-size: clamp(40px, 6.4vw, 92px); font-weight: 820; font-stretch: 112%; letter-spacing: -.045em; line-height: .96;
}
.hero__title span { display: block; }
@media (min-width: 821px) { .hero__title .l1, .hero__title .l2 { white-space: nowrap; } }
.hero__title .l2 { color: var(--muted); font-weight: 700; }
.hero__title em { font-style: normal; color: var(--text); position: relative; white-space: nowrap; }
.hero__title em::after { content: ""; position: absolute; left: .02em; right: .02em; bottom: .02em; height: .08em; background: var(--teal); transform-origin: left; animation: underline 900ms 700ms var(--ease-out) both; }
@keyframes underline { from { transform: scaleX(0); } }
.hero__side { grid-area: s; margin-top: clamp(24px, 3vw, 36px); }
.hero__lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); line-height: 1.55; }
.hero__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

.rise { animation: rise 700ms var(--ease-out) both; }
.hero__title.rise { animation-delay: 60ms; }
.hero__side.rise { animation-delay: 160ms; }
.stage.rise { animation-delay: 260ms; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- il palco del Progettista ---------- */
.stage {
  margin-top: clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-deep), 0 0 0 1px rgb(28 207 201 / .06);
  overflow: hidden;
}
.stage__bar { display: flex; align-items: center; gap: 20px; padding: 14px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.stage__name { font-weight: 700; font-stretch: 110%; letter-spacing: -.01em; }
.steps { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 6px; counter-reset: s; }
.steps li { counter-increment: s; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13.5px; color: var(--faint); transition: color 200ms ease, background-color 200ms ease; }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--mono); font-size: 11px; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.steps li.is-done { color: var(--muted); }
.steps li.is-done::before { background: var(--teal-soft); color: var(--accent-ink); box-shadow: none; }
.steps li.is-now { color: var(--text); background: var(--ghost); }
.steps li.is-now::before { background: var(--teal); color: var(--on-teal); box-shadow: none; }

.stage__body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.stage__idea { padding: 24px 22px 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.stage__plan { padding: 24px 22px 22px; min-height: 420px; }
.stage__label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 550; background: var(--ghost); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; }
.chips button:active { transform: scale(.97); }
.chips button[aria-checked="true"] { background: var(--teal-soft); color: var(--text); box-shadow: inset 0 0 0 1px rgb(28 207 201 / .6); }
@media (hover: hover) and (pointer: fine) { .chips button[aria-checked="false"]:hover { color: var(--text); background: var(--ghost-hover); } }
.prompt { flex: 1; min-height: 150px; background: var(--field); border-radius: var(--r); padding: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.prompt__text { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; font-weight: 500; }
.prompt__text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--accent-ink); animation: blink 900ms steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.stage__status { font-family: var(--mono); font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.stage__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.stage[data-phase="1"] .stage__status::before, .stage[data-phase="2"] .stage__status::before, .stage[data-phase="3"] .stage__status::before { background: var(--teal); animation: pulse 1.4s infinite; }
.stage[data-phase="4"] .stage__status::before { background: var(--ok); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(28 207 201 / .5); } 70% { box-shadow: 0 0 0 7px rgb(28 207 201 / 0); } 100% { box-shadow: 0 0 0 0 rgb(28 207 201 / 0); } }

.plan { list-style: none; margin: 14px 0 0; padding: 0 0 0 22px; display: grid; gap: 8px; position: relative; }
.plan::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--line-2); transform-origin: top; transform: scaleY(var(--grow, 0)); transition: transform 500ms var(--ease-out); }
.node {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: center; gap: 2px 12px;
  padding: 10px 14px 10px 16px; border-radius: var(--r-sm); background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--c, var(--line-2));
  opacity: 0; transform: translateX(-8px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out), background-color 300ms ease;
}
.node.is-in { opacity: 1; transform: none; }
.node::before { content: ""; position: absolute; left: -20px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--c, var(--line-2)); }
.node__type { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c, var(--faint)); }
.node__name { grid-column: 1; font-weight: 600; font-size: 15px; line-height: 1.3; }
.node__why { grid-column: 1; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.node__tag { grid-column: 2; grid-row: 1 / span 3; justify-self: end; font-family: var(--mono); font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; background: var(--ghost); color: var(--muted); transition: background-color 250ms ease, color 250ms ease; }
.node[data-kind="new"] .node__tag { background: var(--teal-soft); color: var(--accent-ink); }
.node[data-kind="hand"] { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--amber-ink); background: repeating-linear-gradient(135deg, var(--panel-2) 0 10px, var(--stripe) 10px 20px); }
.node[data-kind="hand"] .node__tag { background: var(--amber-soft); color: var(--amber-ink); }
.node.is-built .node__tag { background: var(--ok-soft); color: var(--ok-ink); }
.node.is-live { background: var(--live-bg); }
.node.is-live .node__tag { background: var(--ok); color: var(--on-ok); }
.plan__sum { margin-top: 14px; font-size: 14px; color: var(--muted); min-height: 1.6em; }
.stage__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 22px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; min-height: 64px; }
.stage__note { font-size: 13px; color: var(--faint); flex: 1 1 320px; }
.stage__nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; animation: nav-in 220ms var(--ease-out); }
.stage__nav[hidden] { display: none; }
.stage__hint { font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.stage__nav .btn:disabled { opacity: .45; cursor: default; }
.stage__nav .btn--teal:disabled { box-shadow: none; }
@keyframes nav-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- sezioni ---------- */
.sec { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.sec__title { font-size: clamp(34px, 5vw, 68px); font-weight: 800; font-stretch: 116%; letter-spacing: -.04em; line-height: .98; max-width: 15ch; }
.sec__lead { margin-top: 22px; font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 40em; }

/* ---------- mappa della piattaforma ---------- */
.map { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.map__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map__wires .wire { fill: none; stroke: var(--line-2); stroke-width: 1.5; transition: stroke 200ms ease; }
.map__wires .wire.is-on { stroke: var(--teal); stroke-width: 2; }
/* il flusso dei dati, dal gestionale al modulo scelto: movimento costante, quindi lineare */
.map__wires .flow { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 2 12; stroke-linecap: round; opacity: 0; transition: opacity 200ms ease; animation: wire 1.4s linear infinite; }
.map__wires .flow.is-on { opacity: 1; }
.map__wires .port { fill: var(--panel); stroke: var(--line-2); stroke-width: 1.5; transition: stroke 200ms ease, fill 200ms ease; }
.map__wires .port.is-on { fill: var(--teal); stroke: var(--teal); }
@keyframes wire { to { stroke-dashoffset: -28; } }
/* quattro moduli a sinistra, il gestionale al centro, quattro a destra */
.map__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); grid-template-rows: repeat(4, auto); gap: 12px clamp(40px, 5vw, 72px); }
.mod:nth-of-type(1) { grid-area: 1 / 1; }
.mod:nth-of-type(2) { grid-area: 2 / 1; }
.mod:nth-of-type(3) { grid-area: 3 / 1; }
.mod:nth-of-type(4) { grid-area: 4 / 1; }
.mod:nth-of-type(5) { grid-area: 1 / 3; }
.mod:nth-of-type(6) { grid-area: 2 / 3; }
.mod:nth-of-type(7) { grid-area: 3 / 3; }
.mod:nth-of-type(8) { grid-area: 4 / 3; }
.mod {
  position: relative; text-align: left; border: 0; cursor: pointer; padding: 20px 20px 22px; border-radius: var(--r);
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft);
  display: grid; gap: 4px; align-content: start; padding: 16px 18px 18px;
  transition: transform 200ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}
.mod:active { transform: scale(.98); }
.mod__k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.mod__n { font-size: 20px; font-weight: 750; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.1; }
.mod__d { font-size: 14px; color: var(--muted); line-height: 1.5; }
.mod[aria-selected="true"] { background: var(--panel-2); box-shadow: inset 0 0 0 1px rgb(28 207 201 / .7), 0 20px 40px -24px rgb(28 207 201 / .5); }
.mod[aria-selected="true"] .mod__k { color: var(--accent-ink); }
.mod[aria-selected="true"]::after { content: ""; position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-top: 2px solid var(--teal); border-right: 2px solid var(--teal); }
@media (hover: hover) and (pointer: fine) { .mod[aria-selected="false"]:hover { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-soft); } }
.mod#m-ai .mod__k { color: var(--ai); }

.core {
  grid-area: 1 / 2 / 5 / 3;
  position: relative; display: grid; place-content: center; text-align: center; gap: 4px;
  border-radius: 50%; aspect-ratio: 1; width: 220px; justify-self: center; align-self: center;
  background: radial-gradient(circle at 50% 40%, var(--core-a), var(--core-b) 70%);
  box-shadow: inset 0 0 0 1px rgb(28 207 201 / .5), 0 0 80px -10px rgb(28 207 201 / .3);
}
.core__ring { position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgb(28 207 201 / .45); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.core__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.core__n { font-size: 24px; font-weight: 820; font-stretch: 118%; letter-spacing: -.03em; line-height: 1; }
.core__c { font-size: 12px; color: var(--muted); max-width: 15ch; margin: 2px auto 0; line-height: 1.35; }

.detail { margin-top: clamp(28px, 4vw, 44px); }
.det { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.det[hidden] { display: none; }
.det.is-anim { animation: det-in 240ms var(--ease-out); }
@keyframes det-in { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }
.det__copy h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 760; font-stretch: 110%; letter-spacing: -.025em; line-height: 1.1; }
.det__copy > p { margin-top: 14px; color: var(--muted); }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 6px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg); }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: var(--r); background: var(--paper); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-deep); }
.shot--doc { max-width: 620px; justify-self: center; }
.shot--phone { max-width: 290px; justify-self: center; }
.shot--phone img { border-radius: 30px; box-shadow: 0 0 0 8px var(--bezel), 0 0 0 9px var(--line-2), var(--shadow-deep); }

/* ---------- ventiquattro ore ---------- */
.sec--day { background: linear-gradient(180deg, var(--bg), var(--bg-2) 30%, var(--bg-2) 70%, var(--bg)); }
.day { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.day__aside { position: sticky; top: 104px; }
.dial { position: relative; margin-top: 40px; width: min(100%, 360px); }
.dial__svg { width: 100%; height: auto; }
.dial__face { fill: var(--panel); stroke: var(--line-2); stroke-width: 1; }
.dial__ticks line { stroke: var(--line-2); stroke-width: 1.2; }
.dial__ticks line.major { stroke: var(--faint); stroke-width: 2; }
.dial__ticks text { fill: var(--faint); font-family: var(--mono); font-size: 7.5px; text-anchor: middle; dominant-baseline: middle; }
.dial__arc { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; opacity: .85; }
.dial__hand { stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; transform-origin: 100px 100px; transition: transform 600ms var(--ease-in-out); }
.dial__pin { fill: var(--accent-ink); }
.dial__time { margin-top: 14px; text-align: center; font-size: clamp(22px, 2.6vw, 30px); color: var(--text); letter-spacing: .02em; }

.moments { list-style: none; margin: 0; padding: 0; }
.moment { position: relative; padding: 34px 0 40px 28px; border-left: 1px solid var(--line-2); opacity: .45; transition: opacity 300ms ease; }
.moment::before { content: ""; position: absolute; left: -6px; top: 42px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--line-2); transition: background-color 300ms ease, box-shadow 300ms ease; }
.moment.is-now { opacity: 1; }
.moment.is-now::before { background: var(--teal); box-shadow: 0 0 0 5px var(--teal-soft); }
.moment__t { font-size: 13px; color: var(--accent-ink); letter-spacing: .04em; }
.moment h3 { margin-top: 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 760; font-stretch: 110%; letter-spacing: -.025em; line-height: 1.12; }
.moment p { margin-top: 10px; color: var(--muted); max-width: 34em; }
.moment__m { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 4px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- per chi ---------- */
.who { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.who__cell { padding: 26px 24px 28px; border-radius: var(--r); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); display: grid; gap: 12px; align-content: start; }
.who__cell--teal { background: linear-gradient(160deg, var(--teal-soft), var(--panel) 70%); }
.who__cell--ai { background: linear-gradient(160deg, var(--ai-soft), var(--panel) 70%); }
.who__cell--amber { background: linear-gradient(160deg, var(--amber-soft), var(--panel) 70%); }
.who__cell h3 { font-size: 24px; font-weight: 760; font-stretch: 112%; letter-spacing: -.025em; }
.who__cell p { color: var(--muted); font-size: 15.5px; }
.ex { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ex li { font-size: 12.5px; font-weight: 550; padding: 5px 10px; border-radius: 999px; background: var(--ghost); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }

/* ---------- AI con regole ---------- */
.rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rules__head { position: sticky; top: 104px; }
.rules__head .sec__title { font-size: clamp(32px, 4vw, 54px); max-width: 17ch; }
.ask { margin-top: 40px; background: var(--panel); border-radius: var(--r-lg); padding: 22px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-deep); max-width: 520px; }
.ask__who { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ai); }
.ask__dot { width: 22px; height: 22px; }
.ask__msg { margin-top: 12px; font-size: 17px; line-height: 1.5; padding-left: 14px; box-shadow: inset 2px 0 0 var(--ai); }
.ask__op { margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ask__op div { background: var(--field); border-radius: var(--r-sm); padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.ask__op dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ask__op dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.ask__btns { margin-top: 16px; display: flex; gap: 10px; }
.ask__out { margin-top: 14px; font-size: 14px; color: var(--muted); min-height: 1.5em; }
.ask[data-state="yes"] .ask__out { color: var(--ok-ink); }
.ask[data-state="no"] .ask__out { color: var(--amber-ink); }
.ask__btns { align-items: center; }
.ask[data-state] .ask__btns .btn { opacity: .45; pointer-events: none; }
.ask__reset { margin-left: auto; width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease; animation: reset-in 220ms var(--ease-out); }
.ask__reset[hidden] { display: none; }
.ask__reset svg { width: 18px; height: 18px; }
.ask__reset:active { transform: scale(.94); }
@keyframes reset-in { from { opacity: 0; transform: scale(.9); } }
@media (hover: hover) and (pointer: fine) { .ask__reset:hover { color: var(--accent-ink); background: var(--ghost); } }

.rulelist { margin: 0; }
.rulelist > div { padding: 26px 0 28px; border-top: 1px solid var(--line-2); }
.rulelist > div:first-child { border-top: 0; padding-top: 6px; }
.rulelist dt { font-size: clamp(20px, 1.9vw, 24px); font-weight: 720; font-stretch: 108%; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
.rulelist dd { margin: 8px 0 0 24px; color: var(--muted); max-width: 34em; }
.sw { flex: none; width: 12px; height: 12px; border-top: 2px solid var(--accent-ink); border-right: 2px solid var(--accent-ink); }
.sw--ai { border-color: var(--ai); }

/* ---------- i vostri dati ---------- */
.sec--data { background: var(--bg-2); }
.net { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); align-items: stretch; }
/* le due schede hanno la stessa geometria: tre righe da 46px, così la corsia in uscita
   collega il Connector al database alla stessa altezza */
.net__zone { position: relative; height: 230px; border-radius: var(--r); padding: 46px 22px 26px; }
.net__zone--in { box-shadow: inset 0 0 0 1px var(--line-2); background: var(--tint); }
.net__zone--out { box-shadow: inset 0 0 0 1px rgb(28 207 201 / .5); background: var(--teal-soft); }
.net__label { position: absolute; top: 16px; left: 22px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.net__zone--out .net__label { color: var(--accent-ink); }
.net__stack { display: grid; gap: 10px; }
.net__box { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; background: var(--panel); border-radius: var(--r-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); }
.net__box--conn { background: var(--teal); color: var(--on-teal); box-shadow: none; }
.net__box--nx { background: var(--invert-bg); color: var(--invert-text); box-shadow: none; }
.net__box--nx svg { width: 18px; height: 18px; flex: none; }
.net__mid { display: block; }
.net__mid svg { width: 100%; height: 100%; display: block; overflow: visible; }
.net__t { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: var(--faint); }
.net__t--on { fill: var(--accent-ink); }
.net__t--no { fill: var(--faint); text-transform: none; letter-spacing: .02em; }
.net__wall { fill: var(--panel-3); stroke: var(--line-2); stroke-width: 1; }
.net__mortar { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.net__gate { fill: var(--bg-2); stroke: var(--teal); stroke-width: 1.5; }
.net__lane { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.net__lane--no { stroke: var(--faint); stroke-dasharray: 3 7; stroke-linecap: round; }
/* il flusso verso Nexus: movimento costante, quindi lineare */
.net__flow { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 2 12; stroke-linecap: round; animation: wire 1.4s linear infinite; }
.net__head { fill: var(--teal); }
.net__port { fill: var(--teal); }
.net__stop { fill: var(--panel); stroke: var(--bad-ink); stroke-width: 1.5; }
.net__x { fill: none; stroke: var(--bad-ink); stroke-width: 2; stroke-linecap: round; }
.net__midtext { display: none; }
.facts { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.facts p { display: grid; gap: 10px; padding: 0 28px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.facts p + p { padding-left: 28px; border-left: 1px solid var(--line-2); }
.facts .num { font-size: clamp(56px, 7vw, 96px); font-weight: 850; font-stretch: 120%; letter-spacing: -.05em; line-height: .9; color: var(--text); }
.data__more { margin-top: 44px; color: var(--muted); max-width: 52em; }

/* ---------- come si comincia ---------- */
.start { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: st; }
.start li { padding: 28px 26px 8px 0; border-top: 2px solid var(--line-2); position: relative; }
.start li + li { padding-left: 26px; }
.start li::before { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 2px; background: var(--teal); }
.start li + li::before { left: 26px; }
.start__n { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); }
.start h3 { margin-top: 10px; font-size: 22px; font-weight: 740; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.15; }
.start p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }

/* ---------- domande ---------- */
.faqwrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq details + details { border-top: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-size: 19px; font-weight: 650; position: relative; transition: color 150ms ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: translateY(5px) rotate(-135deg); border-color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent-ink); } }
.faq details p { padding: 0 48px 24px 0; color: var(--muted); }

/* ---------- contatti ---------- */
.sec--cta { background: radial-gradient(ellipse 60% 80% at 20% 100%, rgb(28 207 201 / .14), transparent 70%), var(--bg-2); }
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.cta__title { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; font-stretch: 116%; letter-spacing: -.04em; line-height: 1; }
.cta__copy > p { margin-top: 20px; color: var(--muted); font-size: 19px; }
.cta__facts { margin: 30px 0 0; display: grid; gap: 10px; }
.cta__facts > div { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; }
.cta__facts > div[hidden] { display: none; }
.cta__facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cta__facts dd { margin: 0; }
.cta__facts a { text-decoration: none; font-size: 18px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .cta__facts a:hover { color: var(--accent-ink); } }
.form { background: var(--panel); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-deep); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form input, .form select, .form textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--text);
  background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 11px 13px; min-height: 48px; width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.form ::placeholder { color: var(--faint); opacity: 1; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgb(28 207 201 / .22); }
.form [aria-invalid="true"] { border-color: var(--bad-ink); }
.form .btn { justify-self: start; }
.form__note { font-size: 13px; color: var(--faint); }
.form__err { font-size: 14px; color: var(--bad-ink); font-weight: 600; }

/* ---------- piede ---------- */
.foot { border-top: 1px solid var(--line); padding: 44px 0 52px; color: var(--muted); font-size: 14px; background: var(--bg); }
.foot__in { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 48px; align-items: center; }
.foot__logo { height: 26px; width: auto; color: var(--text); }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot nav a { text-decoration: none; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .foot nav a:hover { color: var(--text); } }
.foot__note { grid-column: 1 / -1; color: var(--faint); font-size: 13px; max-width: 70em; }

/* ---------- movimento allo scorrimento: sempre leggibile ---------- */
.js .reveal { transform: translateY(16px); transition: transform 700ms var(--ease-out); }
.js .reveal.is-in { transform: none; }
.rulelist .reveal:nth-child(2), .facts .reveal:nth-child(2), .start .reveal:nth-child(2), .who .reveal:nth-child(2) { transition-delay: 60ms; }
.rulelist .reveal:nth-child(3), .facts .reveal:nth-child(3), .start .reveal:nth-child(3), .who .reveal:nth-child(3) { transition-delay: 120ms; }
.rulelist .reveal:nth-child(4), .start .reveal:nth-child(4), .who .reveal:nth-child(4) { transition-delay: 180ms; }
.rulelist .reveal:nth-child(5), .who .reveal:nth-child(5) { transition-delay: 240ms; }
.rulelist .reveal:nth-child(6), .who .reveal:nth-child(6) { transition-delay: 300ms; }

/* ---------- schermi medi ---------- */
@media (max-width: 1080px) {
  .hero__top { grid-template-columns: 1fr; grid-template-areas: "k" "t" "s"; }
  .hero__side { max-width: 560px; }
  .stage__body { grid-template-columns: 1fr; }
  .stage__idea { border-right: 0; border-bottom: 1px solid var(--line); }
  .stage__plan { min-height: 0; }
  .map__wires { display: none; }
  .map__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 12px; }
  .mod:nth-of-type(n) { grid-area: auto; }
  .core { grid-area: 1 / 1 / 2 / -1; width: 100%; aspect-ratio: auto; border-radius: var(--r); padding: 22px; }
  .core__ring { display: none; }
  .core__c { max-width: none; }
  .det { grid-template-columns: 1fr; }
  .day, .rules, .faqwrap { grid-template-columns: 1fr; }
  .day__aside, .rules__head { position: static; }
  .dial { display: none; }
  .moment { opacity: 1; }
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net { grid-template-columns: 1fr; gap: 0; }
  .net__zone { height: auto; }
  .net__mid { display: none; }
  .net__midtext { display: block; position: relative; margin: 0; padding: 32px 0 32px 24px; font-size: 12px; color: var(--accent-ink); }
  .net__midtext::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, var(--teal) 0 6px, transparent 6px 12px); }
  .start { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .start li:nth-child(3) { padding-left: 0; }
  .start li:nth-child(3)::before { left: 0; }
}

@media (max-width: 960px) {
  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); padding: 8px var(--gutter) 24px; border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(-6px); visibility: hidden;
    transition: opacity 150ms ease, transform 150ms var(--ease-out), visibility 0s 150ms;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity 200ms ease, transform 200ms var(--ease-out); }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav a.is-current::after { display: none; }
  .nav .btn { margin-top: 18px; height: 50px; }
  .navtoggle { display: block; }
}

@media (max-width: 820px) {
  /* i margini delle sezioni si sommano fra una sezione e l'altra: sul telefono si stringono */
  .sec { padding: 60px 0; }
  .hero { padding-bottom: 60px; }
  .sec__lead { margin-top: 16px; }
  .cta { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 28px; }
  .facts p, .facts p + p { padding: 0; border-left: 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .sec { padding: 48px 0; }
  .hero { padding-bottom: 48px; }
  .map, .who, .net, .start { margin-top: 32px; }
  .detail { margin-top: 24px; }
  .ask { margin-top: 28px; }
  .moment { padding: 24px 0 28px 24px; }
  .steps { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .stage__nav { width: 100%; }
  .stage__hint { width: 100%; }
  .stage__nav .btn { flex: 1; }
  .steps li { padding-right: 8px; }
  .steps li:not(.is-now) { font-size: 0; gap: 0; padding: 4px; }
  .steps li:not(.is-now)::before { font-size: 11px; }
  .map__grid, .who { grid-template-columns: 1fr; }
  .mod { min-height: 0; }
  .start { grid-template-columns: 1fr; }
  .start li, .start li + li { padding-left: 0; }
  .start li::before, .start li + li::before { left: 0; }
  .form__row { grid-template-columns: 1fr; }
  .ask__op { grid-template-columns: 1fr; }
  .faq details p { padding-right: 0; }
  .shot--phone { max-width: 240px; }
}

/* Movimento ridotto: restano le dissolvenze, spariscono spostamenti e cicli. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: fade 300ms ease both; }
  .hero__title em::after { animation: none; }
  .js .reveal, .node { transform: none !important; }
  .map__wires .flow, .net__flow, .core__ring, .stage__status::before, .prompt__text.is-typing::after { animation: none !important; }
  .det.is-anim { animation: fade 160ms ease; }
  .dial__hand { transition: none; }
}
@keyframes fade { from { opacity: 0; } }