/* =============================================================
   Software PLC e HMI — pagina di vendita dedicata (namespace .sw-)
   Isolata: non usa service-redesign-*, pel- né pq-.
   Stesso filo di Progettazione elettrica (carta bianca, inchiostro blu
   notte, un accento blu), meccanismi propri:
   1 · il pannello si accende (schermata vera ridisegnata, guidata dallo scroll)
   2 · nastro clienti (identico alle altre pagine servizio, per continuità)
   3 · sotto il vetro: la stessa pagina scomposta in tre strati
   4 · quando si ferma, ti dice dove (allarme vero, trascritto)
   5 · in campo: pannelli D&D a bordo macchina
   6 · il servizio: teleassistenza, garanzia, primo anno, rispondiamo sempre
   7 · il primo passo: fotografa il tuo pannello
   ============================================================= */

.page-sw {
  --sw-ink: var(--corp-navy, #0b1220);
  --sw-soft: var(--corp-secondary, #475569);
  --sw-copy: #56627a;
  --sw-gray: #7b889c;
  --sw-muted: var(--corp-muted, #64748b);
  --sw-accent: #2563eb;
  --sw-accent-ink: #1d4ed8;
  --sw-accent-deep: #1e3a8a;
  --sw-mist: #f5f5f7;
  --sw-rule: rgba(15, 23, 42, 0.1);
  /* Agganciato al token globale: la barra e' passata a 50px (54 su
     telefono) e un valore fisso qui sfalsa palchi sticky e altezze. */
  --sw-nav: var(--nav-height, 50px);
  --sw-pad: clamp(96px, 11vw, 168px);
  --sw-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sw-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* .page-home-corporate impone main{overflow:hidden}: romperebbe sticky */
body.page-sw main {
  overflow-x: clip;
  overflow-y: visible;
  background: #ffffff;
}

.sw-wrap {
  width: min(100% - 40px, var(--max-width, 1200px));
  margin-inline: auto;
}

.page-sw section[id] { scroll-margin-top: 72px; }
.page-sw :is(a, button):focus-visible {
  outline: 3px solid var(--sw-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.sw-eyebrow {
  margin: 0;
  color: var(--sw-accent-deep);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sw-label {
  margin: 0;
  color: var(--sw-muted);
  font: 500 0.72rem/1.35 var(--sw-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* intestazione di sezione: al centro, titolo grande, seconda riga grigia */
.sw-head {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}
.sw-title {
  margin: 0.42em 0 0;
  color: var(--sw-ink);
  font-size: clamp(2.5rem, 5.6vw, 4.9rem);
  font-weight: 790;
  letter-spacing: -0.048em;
  line-height: 1.01;
  text-wrap: balance;
}
.sw-title span { color: var(--sw-gray); }
.sw-lede {
  margin: 26px auto 0;
  max-width: 42ch;
  color: var(--sw-copy);
  font-size: clamp(1.1rem, 1.45vw, 1.32rem);
  line-height: 1.5;
  text-wrap: balance;
}

/* il rimando: un link, non un pulsante */
.sw-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sw-accent);
  font-size: var(--fs-caption);
  font-weight: 640;
  text-decoration: none;
  white-space: nowrap;
}
.sw-link svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.sw-link:hover { color: var(--sw-accent-ink); }
.sw-link:hover svg { transform: translateX(2px); }

/* le sezioni entrano quando arrivano in vista (script in pagina) */
.reveal-ready .sw-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--sw-ease), transform 0.8s var(--sw-ease);
}
.reveal-ready .sw-in.is-in {
  opacity: 1;
  transform: none;
}

/* =============================================================
   1. HERO — prima il titolo, poi il pannello si disegna e si accende
   ============================================================= */
.sw-hero {
  position: relative;
  height: 440vh;
  background: #ffffff;
}

/* il palco: resta fermo mentre la pagina scorre */
.sw-hero__stage {
  position: sticky;
  top: var(--sw-nav);
  z-index: 0;
  height: calc(100vh - var(--sw-nav));
  height: calc(100svh - var(--sw-nav));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vh, 24px);
  padding: clamp(14px, 3vh, 36px) clamp(16px, 3vw, 48px);
  overflow: hidden;
}

.sw-panel {
  position: relative;
  width: min(100%, calc((100vh - var(--sw-nav) - 120px) * 1.648), 1240px);
  width: min(100%, calc((100svh - var(--sw-nav) - 120px) * 1.648), 1240px);
  aspect-ratio: 1470 / 892;
}
.sw-panel__svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sw-panel__svg text { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }

/* ombra a terra: arriva solo quando il pannello diventa un oggetto */
.sw-panel__shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 1.5%;
  height: 40%;
  border-radius: 40px;
  box-shadow: 0 46px 80px -30px rgba(15, 23, 42, 0.45);
  opacity: var(--sw-shadow, 1);
  pointer-events: none;
}

.sw-hero__cap {
  margin: 0;
  max-width: 64ch;
  color: #94a3b8;
  font-family: var(--sw-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
}

/* la prima schermata: solo il titolo */
.sw-hero__screen {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: calc(100vh - var(--sw-nav));
  height: calc(100svh - var(--sw-nav));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.sw-hero__copy {
  pointer-events: auto;
  /* alone appena accennato: il titolo resta leggibile, le prime linee si vedono */
  background: radial-gradient(54% 56% at 50% 46%, rgba(255, 255, 255, 0.9) 34%, rgba(255, 255, 255, 0) 100%);
}
.sw-hero h1 {
  margin: 0.34em auto 0;
  max-width: 18ch;
  color: var(--sw-ink);
  font-size: clamp(2.7rem, 5.6vw, 5rem);
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 1;
  text-wrap: balance;
}
.sw-hero h1 span { color: var(--sw-gray); }
.sw-hero__lead {
  margin: 24px auto 0;
  max-width: 50ch;
  color: var(--sw-soft);
  font-size: var(--fs-lead);
  line-height: 1.6;
}
.sw-hero__actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.sw-hero__reassure {
  margin: 16px 0 0;
  color: var(--sw-muted);
  font-size: var(--fs-caption);
}
.sw-hero__hint {
  margin: clamp(26px, 5vh, 54px) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #94a3b8;
  font-family: var(--sw-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  transition: opacity 0.45s ease;
}
.sw-hero__hint svg { width: 12px; height: 12px; animation: sw-nudge 2.2s ease-in-out infinite; }
@keyframes sw-nudge {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(2px); }
}
.sw-hero__stage.is-started ~ .sw-hero__screen .sw-hero__hint { opacity: 0; }

/* senza script si vede la schermata accesa: il disegno a inchiostro resta nascosto */
.sw-panel__svg .sw-ink { display: none; }
.sw-hero__stage.is-live .sw-ink { display: inline; }

/* stato iniziale con lo script: tutto da comporre */
.sw-hero__stage.is-live [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.sw-hero__stage.is-live [data-fade] { opacity: 0; }
.sw-hero__stage.is-live .sw-hero__cap { opacity: 0; transition: opacity 0.6s ease; }
.sw-hero__stage.is-done .sw-hero__cap { opacity: 1; }
.sw-panel__svg [data-draw] { stroke-linecap: round; stroke-linejoin: round; }

/* pannello acceso: il gas scorre nella linea aperta */
.sw-panel__svg .sw-flow { opacity: 0; transition: opacity 0.8s ease; }
.sw-hero__stage.is-on .sw-flow {
  opacity: 0.85;
  animation: sw-flow 1.4s linear infinite;
}
@keyframes sw-flow {
  from { stroke-dashoffset: 28; }
  to { stroke-dashoffset: 0; }
}

/* =============================================================
   3. SOTTO IL VETRO — la stessa pagina scomposta in tre strati
   Con lo script: palco fermo, la pagina si inclina e si apre a strati
   mentre si scorre; accanto si accende lo strato di cui si parla.
   Senza script (o con movimento ridotto): strati già aperti, testi in fila.
   ============================================================= */
.sw-layers {
  position: relative;
  padding-top: var(--sw-pad);
  background: #ffffff;
}
.sw-layers__track { position: relative; }
.sw-layers.is-live .sw-layers__track { height: 320vh; }
.sw-layers__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px) var(--sw-pad);
}
.sw-layers.is-live .sw-layers__stage {
  position: sticky;
  top: var(--sw-nav);
  height: calc(100vh - var(--sw-nav));
  height: calc(100svh - var(--sw-nav));
  padding-block: 0;
}

.sw-layers__scene {
  position: relative;
  perspective: 2600px;
  perspective-origin: 50% 30%;
}
/* senza script (o con movimento ridotto) il palco non è agganciato: serve un'altezza */
.sw-layers:not(.is-live) .sw-layers__scene { aspect-ratio: 1366 / 1060; }
.sw-layers.is-live .sw-layers__scene { height: 100%; min-height: 240px; }
.sw-layers__stack {
  --sw-rx: 54deg;
  --sw-rz: -34deg;
  --sw-gap: 1;
  --sw-sc: 0.8;
  position: absolute;
  left: 3%;
  right: 3%;
  top: 50%;
  aspect-ratio: 1366 / 800;
  transform-style: preserve-3d;
  /* aprendosi le lastre salgono verso sinistra: le riporto al centro del palco */
  transform: translateY(-50%) translate(calc(var(--sw-gap) * 5%), calc(var(--sw-gap) * 7%))
    scale(calc(var(--sw-sc) * var(--sw-shrink, 1))) rotateX(var(--sw-rx)) rotateZ(var(--sw-rz));
}
.sw-plane {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 6px;
  transform: translateZ(calc(var(--sw-z) * var(--sw-gap)));
  transition: opacity 0.5s ease;
}
.sw-plane img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -webkit-user-drag: none;
  user-select: none;
}
.sw-plane--page { --sw-z: 0px; box-shadow: 0 40px 70px -30px rgba(15, 23, 42, 0.38); }
.sw-plane--state { --sw-z: 200px; }
.sw-plane--value { --sw-z: 400px; }
/* le lastre trasparenti portano il fantasma della pagina: basta un filo di bordo */
.sw-plane--state,
.sw-plane--value {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}
.sw-layers.is-live .sw-plane { opacity: var(--sw-o, 1); }

.sw-layers__notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(26px, 4.4vh, 44px);
}
.sw-note__num {
  display: block;
  color: var(--sw-ink);
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 1;
}
.sw-note__num small {
  margin-left: 0.18em;
  color: var(--sw-gray);
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sw-note p {
  margin: 10px 0 0;
  max-width: 34ch;
  color: var(--sw-copy);
  font-size: 1.04rem;
  line-height: 1.55;
}
.sw-layers.is-live .sw-note { transition: opacity 0.5s ease; }
.sw-layers.is-live.is-reading .sw-note { opacity: 0.28; }
.sw-layers.is-live.is-reading .sw-note.is-on { opacity: 1; }
.sw-layers__src {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  color: #94a3b8;
  font-family: var(--sw-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.sw-layers.is-live .sw-layers__src {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 3vh, 30px);
}

/* =============================================================
   4. QUANDO SI FERMA — l'allarme vero, trascritto in grande
   ============================================================= */
.sw-alarm {
  padding-block: var(--sw-pad);
  background: var(--sw-mist);
}
.sw-alarm__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.sw-alarm__photo {
  margin: 0;
}
.sw-alarm__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1086 / 1448;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 30px 70px -38px rgba(15, 23, 42, 0.45);
}
.sw-alarm__photo figcaption {
  margin-top: 14px;
  color: #94a3b8;
  font-family: var(--sw-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.sw-alarm__copy .sw-title { font-size: clamp(2.4rem, 4.8vw, 4.3rem); }
.sw-alarm__lede {
  margin: 24px 0 0;
  max-width: 40ch;
  color: var(--sw-copy);
  font-size: clamp(1.1rem, 1.45vw, 1.28rem);
  line-height: 1.5;
}

/* la riga dello storico, com'è sullo schermo: data, ora, stato, testo */
.sw-log {
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--sw-rule);
}
.sw-log__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sw-log__meta b {
  margin-left: 10px;
  color: var(--sw-ink);
  font-family: var(--sw-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sw-log__src {
  margin: 22px 0 0;
  color: #94a3b8;
  font-family: var(--sw-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.sw-log__msg {
  margin: 18px 0 0;
  color: var(--sw-ink);
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.06;
  text-wrap: balance;
}
.sw-log__msg em {
  font-style: normal;
  color: var(--sw-accent);
}
.sw-log__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.sw-log__keys li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--sw-copy);
  font-size: var(--fs-caption);
}
.sw-log__keys b {
  color: var(--sw-ink);
  font-weight: 650;
}

/* =============================================================
   5. IN CAMPO — pannelli D&D a bordo macchina
   ============================================================= */
.sw-field {
  --sw-edge: max(20px, calc((100% - var(--max-width, 1200px)) / 2));
  padding-block: var(--sw-pad) clamp(80px, 9vw, 130px);
  background: #ffffff;
}
.sw-works__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  text-align: left;
}
.sw-works__title { margin-top: 0.3em; max-width: 14ch; }
.sw-works__lede {
  margin: 20px 0 0;
  max-width: 44ch;
  color: var(--sw-copy);
  font-size: clamp(1.06rem, 1.3vw, 1.2rem);
  line-height: 1.55;
}
.sw-works__nav {
  flex: none;
  display: flex;
  gap: 10px;
}
.sw-works__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 50%;
  background: #ffffff;
  color: var(--sw-ink);
  cursor: pointer;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}
.sw-works__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sw-works__btn:hover:not(:disabled) { border-color: rgba(15, 23, 42, 0.32); }
.sw-works__btn:disabled { opacity: 0.35; cursor: default; }
.sw-works__nav[hidden] { display: none; }

.sw-works__track {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0 var(--sw-edge) 6px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sw-edge);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sw-works__track::-webkit-scrollbar { display: none; }
.sw-works__track:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 4px; }
/* il margine finale: in alcuni browser il padding a destra di un contenitore che scorre non conta */
.sw-works__track::after {
  content: "";
  flex: 0 0 calc(var(--sw-edge) - clamp(16px, 2vw, 26px));
}

.sw-work {
  --sw-work-h: clamp(330px, 54vh, 560px);
  flex: none;
  scroll-snap-align: start;
}
.sw-work figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.sw-work img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--sw-work-h);
  border-radius: 22px;
  background: #e3e6ea;
  object-fit: cover;
}
/* la console è il soggetto: il taglio la tiene intera, schermo compreso */
.sw-work img[src*="piattaforma"] { object-position: 50% 42%; }
/* la didascalia prende la larghezza della foto, non la allarga */
.sw-work figcaption {
  width: 0;
  min-width: 100%;
  margin-top: 20px;
}
.sw-work__where {
  margin: 0;
  color: var(--sw-muted);
  font: 500 0.7rem/1.35 var(--sw-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sw-work h3 {
  margin: 8px 0 0;
  color: var(--sw-ink);
  font-size: clamp(1.14rem, 1.4vw, 1.3rem);
  font-weight: 760;
  letter-spacing: -0.024em;
  line-height: 1.25;
}
.sw-work p:not([class]) {
  margin: 6px 0 0;
  max-width: 42ch;
  color: var(--sw-copy);
  font-size: 0.98rem;
  line-height: 1.5;
}
.sw-work .sw-link { margin-top: 10px; }

/* l'ultima tessera: la prossima schermata è quella del visitatore */
.sw-work--next {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(380px, 78vw);
  height: var(--sw-work-h);
  padding: 0 clamp(8px, 2vw, 24px);
}
.sw-work--next h3 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 790;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.sw-work--next p:not([class]) { margin-top: 14px; font-size: 1.05rem; }
.sw-work--next .button { align-self: flex-start; margin-top: 26px; }

.sw-field__stack {
  margin: clamp(56px, 7vw, 88px) auto 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--sw-rule);
}
.sw-field__stack div {
  padding: 26px 0 0;
}
.sw-field__stack div + div {
  padding-left: clamp(20px, 4vw, 48px);
  border-left: 1px solid var(--sw-rule);
}
.sw-field__stack dd {
  margin: 10px 0 0;
  color: var(--sw-ink);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.25;
  text-wrap: balance;
}

/* =============================================================
   6. IL SERVIZIO — quello che ricevi e non si tocca con mano
   ============================================================= */
.sw-care {
  padding-block: var(--sw-pad);
  background: var(--sw-mist);
}

/* teleassistenza: la stessa pagina, in macchina e da noi */
.sw-remote {
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(28px, 5vw, 64px);
  border-radius: 28px;
  background: #ffffff;
}
.sw-remote__screens {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 30px);
  align-items: center;
}
.sw-remote__screen { margin: 0; }
.sw-remote__glass {
  padding: clamp(6px, 1vw, 12px);
  border-radius: clamp(12px, 1.6vw, 20px);
  background: #12161b;
  box-shadow: 0 28px 60px -34px rgba(15, 23, 42, 0.5);
}
.sw-remote__glass img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1366 / 800;
  border-radius: 3px;
}
.sw-remote__screen figcaption {
  margin-top: 14px;
  text-align: center;
}
.sw-remote__screen figcaption b {
  display: block;
  color: var(--sw-ink);
  font-size: 1rem;
  font-weight: 700;
}
.sw-remote__screen figcaption span {
  color: var(--sw-muted);
  font-size: var(--fs-caption);
}
/* il collegamento: un filo sottile che si traccia quando entra in vista */
.sw-remote__link {
  width: clamp(40px, 7vw, 96px);
  height: 2px;
  margin-bottom: 44px;
  background: linear-gradient(90deg, var(--sw-accent) 50%, rgba(37, 99, 235, 0.18) 50%) 0 0 / 12px 2px repeat-x;
}
.reveal-ready .sw-remote.sw-in .sw-remote__link { animation: none; }
.sw-remote.is-in .sw-remote__link { animation: sw-dash 1.2s linear infinite; }
@keyframes sw-dash {
  from { background-position: 0 0; }
  to { background-position: 24px 0; }
}
.sw-remote__copy {
  margin: clamp(36px, 5vw, 56px) auto 0;
  max-width: 760px;
  text-align: center;
}
.sw-remote__copy h3 {
  margin: 10px 0 0;
  color: var(--sw-ink);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.06;
  text-wrap: balance;
}
.sw-remote__copy p:not([class]) {
  margin: 16px auto 0;
  max-width: 52ch;
  color: var(--sw-copy);
  font-size: 1.08rem;
  line-height: 1.55;
}

/* le promesse: la tipografia è il disegno */
.sw-promises {
  margin: clamp(56px, 8vw, 96px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.sw-promise {
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: 24px;
  background: #ffffff;
}
.sw-promise__big {
  display: block;
  color: var(--sw-ink);
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  font-weight: 790;
  letter-spacing: -0.055em;
  line-height: 0.95;
}
.sw-promise__big small {
  margin-left: 0.12em;
  color: var(--sw-gray);
  font-size: 0.5em;
  letter-spacing: -0.03em;
}
.sw-promise h3 {
  margin: clamp(22px, 3vw, 34px) 0 0;
  color: var(--sw-ink);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.sw-promise p {
  margin: 10px 0 0;
  color: var(--sw-copy);
  font-size: 1rem;
  line-height: 1.55;
}
.sw-promise a {
  color: var(--sw-accent);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.sw-promise a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* =============================================================
   7. IL PRIMO PASSO — fotografa il tuo pannello
   ============================================================= */
.sw-cta {
  padding-block: var(--sw-pad);
  background: #ffffff;
  text-align: center;
}
.sw-cta__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.sw-cta__note {
  margin: 16px 0 0;
  color: var(--sw-muted);
  font-size: var(--fs-caption);
}
.sw-cta__help {
  margin: clamp(56px, 7vw, 80px) auto 0;
  padding-top: 26px;
  max-width: 640px;
  border-top: 1px solid var(--sw-rule);
  color: var(--sw-copy);
  font-size: var(--fs-caption);
  line-height: 1.6;
}
.sw-cta__help b { color: var(--sw-ink); font-weight: 650; }
.sw-cta__help a { color: var(--sw-accent); font-weight: 650; text-decoration: none; white-space: nowrap; }
.sw-cta__help a:hover { text-decoration: underline; }

/* =============================================================
   8. MOVIMENTO RIDOTTO · RESPONSIVE (in coda: vincono sulle regole base)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  /* niente aggancio: prima il titolo, poi il pannello già acceso */
  .sw-hero { height: auto; display: flex; flex-direction: column; }
  .sw-hero__screen { order: -1; position: static; height: auto; padding-block: clamp(48px, 9vh, 110px) 0; }
  .sw-hero__stage { position: static; height: auto; padding-block: clamp(28px, 5vh, 60px); }
  .sw-hero__hint { display: none; }
  .sw-hero__stage.is-on .sw-flow { animation: none; opacity: 0; }
  .sw-panel { width: min(100%, 1180px); }
  .reveal-ready .sw-in { opacity: 1; transform: none; transition: none; }
  .sw-remote.is-in .sw-remote__link { animation: none; }
}

@media (max-width: 1000px) {
  .sw-layers__stage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sw-layers.is-live .sw-layers__stage {
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr) auto;
    padding-block: clamp(16px, 3vh, 32px) clamp(24px, 5vh, 48px);
  }
  .sw-layers:not(.is-live) .sw-layers__scene { aspect-ratio: 1366 / 980; }
  .sw-layers__scene { width: min(100%, 720px); margin-inline: auto; }
  /* Schermo stretto: le lastre stanno sopra il testo. L'ancoraggio era a 46% e
     lasciava un vuoto enorme fra disegno e didascalia (122px su tablet, 228 su
     telefono) — ed era quel vuoto a far sembrare il disegno "sparito" quando la
     sezione si sgancia. Ingrandire non basta: il disegno cresce verso l'ALTO e
     finisce sotto la barra. Va abbassato l'ancoraggio. */
  .sw-layers.is-live .sw-layers__stack { top: 58%; --sw-shrink: 0.84; }
  .sw-layers__notes { max-width: 560px; margin-inline: auto; text-align: center; }
  .sw-note p { margin-inline: auto; }
  /* Sul palco resta solo il testo dello strato acceso, uno sopra l'altro.
     `.is-reading` va ripetuto: su desktop le note sono affiancate e quelle
     spente restano leggibili a 0.28, ma qui sono IMPILATE nella stessa cella e
     quella regola (piu' specifica) faceva riaffiorare i testi degli altri
     strati sotto a quello acceso. Qui spente vuol dire invisibili. */
  .sw-layers.is-live .sw-layers__notes { display: grid; grid-template-areas: "n"; min-height: 9.5em; align-items: start; }
  .sw-layers.is-live .sw-note,
  .sw-layers.is-live.is-reading .sw-note { grid-area: n; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .sw-layers.is-live .sw-note.is-on,
  .sw-layers.is-live.is-reading .sw-note.is-on { opacity: 1; transform: none; }
  .sw-layers.is-live .sw-layers__src { display: none; }
  .sw-alarm__grid { grid-template-columns: minmax(0, 1fr); }
  .sw-alarm__photo { order: 2; width: min(100%, 460px); margin-inline: auto; }
  .sw-promises { grid-template-columns: minmax(0, 1fr); }
}

/* Lo scostamento fra le lastre e' in px fissi (--sw-z 200/400), quindi piu' lo
   schermo e' stretto piu' la pila risulta alta in proporzione: l'ancoraggio non
   puo' essere uno solo per tutta la fascia sotto i 1000px. Tre gradini, ognuno
   verificato: disegno sotto la barra, dentro i bordi, vicino alla didascalia. */
@media (max-width: 700px) {
  .sw-layers.is-live .sw-layers__stack { top: 66%; --sw-shrink: 0.88; }
}

@media (max-width: 450px) {
  .sw-layers.is-live .sw-layers__stack { top: 72%; --sw-shrink: 1.05; }
}

@media (max-width: 760px) {
  .sw-hero { height: 340vh; }
  /* niente camera che attraversa il pannello: come su Progettazione elettrica
     il disegno sta tutto dentro lo schermo e non esce mai dai bordi */
  .sw-hero__stage { padding-inline: 12px; }
  .sw-panel { width: 100%; max-width: 100%; transform: none; }
  .sw-hero h1 { max-width: 13ch; }
  .sw-hero__copy { background: none; }
  .sw-works__head { display: block; }
  .sw-works__nav { display: none; }
  .sw-work { --sw-work-h: clamp(300px, 74vw, 430px); }
  .sw-work img { max-width: calc(100vw - 56px); }
  .sw-work--next { width: calc(100vw - 80px); }
  .sw-field__stack { grid-template-columns: minmax(0, 1fr); }
  .sw-field__stack div + div { padding-left: 0; border-left: 0; }
  .sw-remote { padding: 22px 16px 30px; border-radius: 22px; }
  .sw-remote__screens { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .sw-remote__screen { width: min(100%, 420px); }
  .sw-remote__link { width: 2px; height: 36px; margin: 0; background: linear-gradient(180deg, var(--sw-accent) 50%, rgba(37, 99, 235, 0.18) 50%) 0 0 / 2px 12px repeat-y; }
  @keyframes sw-dash {
    from { background-position: 0 0; }
    to { background-position: 0 24px; }
  }
}

@media (max-width: 520px) {
  .sw-hero__actions .button,
  .sw-cta__actions .button { width: 100%; justify-content: center; }
  .sw-log__cols { gap: 16px; }
}