/* ===========================================================================
   Pigreco FVG — Foglio di stile principale
   Tema chiaro & corporate. Palette e token centralizzati in :root.
   =========================================================================== */

:root {
  /* Colori — tema chiaro */
  --bg:            #ffffff;
  --surface:       #f4f7fb;   /* bande / sezioni alternate */
  --surface-2:     #eaf1f8;   /* card hover, accenti chiari */
  --ink:           #0f1d33;   /* testo principale (navy profondo) */
  --ink-soft:      #45576e;   /* testo secondario */
  --ink-faint:     #6b7c92;   /* testo terziario / didascalie */
  --border:        rgba(15, 29, 51, 0.10);
  --border-soft:   rgba(15, 29, 51, 0.07);

  /* Brand */
  --accent:        #1f6fb2;   /* blu primario (buon contrasto su bianco) */
  --accent-deep:   #155189;
  --accent-hover:  #18608f;
  --accent-bright: #4db8e8;   /* azzurro luminoso (hero / accenti) */
  --gold:          #e0921a;
  --green:         #138a5f;
  --green-light:   #1aa572;
  --orange-jora:   #E0A807;

  /* Testo su sfondi scuri / immagini */
  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255, 255, 255, 0.82);
  --on-dark-faint:  rgba(255, 255, 255, 0.62);

  /* Layout */
  --maxw:          1080px;
  --maxw-hero:     920px;
  --pad-x:         3rem;
  /* --maxw è la larghezza del CONTENUTO. Le sezioni normali ci aggiungono il
     padding (box-sizing: border-box), le bande a tutta larghezza lo ottengono
     da .pg-section-inner: così ogni sezione ha lo stesso bordo sinistro. */
  --maxw-section:  calc(var(--maxw) + var(--pad-x) * 2);
  --maxw-text:     720px;     /* colonna di lettura: label e intro di sezione */
  --radius:        14px;
  --shadow-sm:     0 1px 3px rgba(15, 29, 51, 0.06), 0 1px 2px rgba(15, 29, 51, 0.04);
  --shadow-md:     0 10px 30px rgba(15, 29, 51, 0.08), 0 2px 8px rgba(15, 29, 51, 0.05);
  --shadow-lg:     0 24px 60px rgba(15, 29, 51, 0.14);

  /* Tipografia: Roboto per testo/UI, Space Grotesk per titoli e numeri.
     Lo stack di sistema resta come fallback finché i webfont non sono pronti. */
  --font:         'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Etichette in maiuscoletto: una misura e una spaziatura sole per tutte,
     così i micro-titoli si leggono come una famiglia e non come dieci. */
  --label-size:   11.5px;
  --label-track:  0.16em;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* I controlli di form non ereditano il font dal body: senza questo i bottoni
   restano sul default del browser (Arial) invece che su --font. */
button, input, select, textarea { font-family: inherit; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Font display (Space Grotesk) su titoli, numeri ed eyebrow.
   Il testo corrente e l'UI restano su Roboto (--font). */
h1,
h2,
h3,
.pg-stat-num,
.pg-value-num,
.pg-am-label,
.clabel {
  font-family: var(--font-display);
}

/* Offset per gli anchor sotto la nav sticky */
[id] { scroll-margin-top: 90px; }

/* Accessibilità: link "salta al contenuto" */
.pg-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-deep);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  z-index: 100;
  font-size: 13px;
}
.pg-skip-link:focus { left: 0; }

/* --------------------------------------------------------------- Navbar */
/* La nav parte trasparente sopra l'hero e diventa bianca allo scroll. */
.pg-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--pad-x);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pg-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.pg-nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* Logo navbar: due versioni sovrapposte, swap in base allo stato della nav */
.pg-nav-logo-img {
  display: block;
  height: 38px;
  width: auto;
  transition: opacity 0.3s ease;
}
.pg-nav-logo-img.pg-logo-dark { display: none; }   /* versione a colori, nascosta sopra l'hero */
.pg-nav.is-scrolled .pg-logo-light { display: none; }
.pg-nav.is-scrolled .pg-logo-dark { display: block; }

.pg-nav-menu { display: flex; align-items: center; gap: 2rem; }
.pg-nav-links { display: flex; gap: 2rem; font-size: 14px; font-weight: 500; }
.pg-nav-links a {
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.pg-nav-links a:hover,
.pg-nav-links a.is-active { color: var(--on-dark); }
.pg-nav.is-scrolled .pg-nav-links a { color: var(--ink-soft); }
.pg-nav.is-scrolled .pg-nav-links a:hover,
.pg-nav.is-scrolled .pg-nav-links a.is-active { color: var(--accent); }

.pg-nav-cta {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 9px 22px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(31, 111, 178, 0.35);
}
.pg-nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* Hamburger (nascosto su desktop) */
.pg-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--on-dark);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.3s ease;
}
.pg-nav.is-scrolled .pg-nav-toggle { color: var(--ink); }

/* --------------------------------------------------------------- Bottoni */
.btn-primary,
.btn-secondary {
  padding: 14px 30px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(31, 111, 178, 0.4);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }

/* --------------------------------------------------------------- Hero */
.pg-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem var(--pad-x) 6rem;
  color: var(--on-dark);
  overflow: hidden;
}
/* Slideshow di sfondo: più foto del porto in crossfade. Le slide sono
   impilate; il JS attiva una slide alla volta (classe .is-active).
   Vedi src/js/heroSlideshow.js. */
.pg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.pg-hero-slide {
  position: absolute;
  inset: 0;
  background-position: center 38%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity;
}
/* Fallback senza JS: mostra comunque la prima foto */
.pg-hero-slide:first-child { opacity: 1; }
.pg-hero-slide.is-active { opacity: 1; }
/* Overlay per leggibilità e tinta brand */
.pg-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 22, 43, 0.55) 0%, rgba(8, 22, 43, 0.35) 40%, rgba(8, 22, 43, 0.78) 100%),
    linear-gradient(120deg, rgba(21, 81, 137, 0.45) 0%, rgba(8, 22, 43, 0.2) 60%);
  z-index: -1;
}
.pg-hero-inner { max-width: var(--maxw-hero); margin: 0 auto; }
.pg-hero h1 {
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.pg-hero h1 em { font-style: normal; color: var(--accent-bright); }
.pg-hero p {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--on-dark-muted);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 2.75rem;
}
.pg-hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Indicatore di scroll */
.pg-hero-scroll {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--on-dark-faint);
  font-size: 26px;
  animation: pg-bounce 2s ease-in-out infinite;
}
@keyframes pg-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* --------------------------------------------------------------- Stats */
/* Banda chiara che prosegue nella sezione "Chi siamo": flow-root evita che il
   margine negativo della card collassi e trascini su anche lo sfondo. */
.pg-stats-band {
  display: flow-root;
  background: var(--surface);
}
.pg-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: -4.5rem auto 0;
  position: relative;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pg-stat {
  flex: 1;
  min-width: 150px;
  text-align: center;
  padding: 2.25rem 1rem;
  border-right: 1px solid var(--border-soft);
}
.pg-stat:last-child { border-right: none; }
.pg-stat-num { font-size: 40px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pg-stat-num span { color: var(--gold); }
.pg-stat-label { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; letter-spacing: 0.03em; font-weight: 500; }

/* --------------------------------------------------------------- Sezioni */
.pg-section { padding: 6rem var(--pad-x); max-width: var(--maxw-section); margin: 0 auto; }
.pg-section h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pg-divider { border: none; border-top: 1px solid var(--border-soft); margin: 0 var(--pad-x); }

.pg-section-intro {
  max-width: var(--maxw-text);
  margin-left: auto;
  margin-right: auto;
}
.pg-section-intro { font-size: 17px; color: var(--ink-soft); line-height: 1.75; margin-top: -0.25rem; }

/* Colonna interna delle sezioni a banda piena (--tint, --dark): stessa
   larghezza e stesso bordo sinistro del contenuto delle sezioni normali. */
.pg-section-inner { max-width: var(--maxw); margin: 0 auto; position: relative; }

/* Sezione "Chi siamo" su banda chiara */
.pg-section--tint { background: var(--surface); max-width: none; }

/* --------------------------------------------------------------- Competenze (banda spotlight scura) */
.pg-section--dark {
  position: relative;
  max-width: none;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(77, 184, 232, 0.16), transparent 60%),
    radial-gradient(1000px 600px at 100% 110%, rgba(31, 111, 178, 0.22), transparent 55%),
    linear-gradient(160deg, #0c1f38 0%, #0a1729 100%);
  overflow: hidden;
}
.pg-section--dark::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright), var(--green-light));
  opacity: 0.9;
}
.pg-section--dark h2 { color: #fff; }
.pg-section--dark .pg-section-intro { color: var(--on-dark-muted); }

/* Griglia competenze */
.pg-comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}
.pg-comp-item {
  position: relative;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 1.85rem 1.6rem;
  overflow: hidden;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
/* Barra accento in alto, animata in hover */
.pg-comp-item::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.pg-comp-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(77, 184, 232, 0.5);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(77, 184, 232, 0.15);
}
.pg-comp-item:hover::before { transform: scaleX(1); }
.pg-comp-icon {
  width: 54px; height: 54px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 8px 22px rgba(31, 111, 178, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pg-comp-item:hover .pg-comp-icon {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 12px 30px rgba(77, 184, 232, 0.55);
}
.pg-comp-item h3 { font-size: 16.5px; font-weight: 700; color: #fff; margin-bottom: 9px; letter-spacing: -0.01em; }
.pg-comp-item p { font-size: 14px; color: var(--on-dark-faint); line-height: 1.65; }

/* Griglia target */
.pg-target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 3rem; }
.pg-target-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 1.25rem 1.35rem;
  display: flex; align-items: center; gap: 13px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, transform 0.2s;
}
.pg-target-item:hover { border-color: rgba(31, 111, 178, 0.4); transform: translateY(-2px); }
.pg-target-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 0 4px rgba(31, 111, 178, 0.12); }
.pg-target-item span:last-child { font-size: 14px; color: var(--ink); font-weight: 500; }

/* Griglia valori */
.pg-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.pg-value-card {
  background: linear-gradient(160deg, #fff 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pg-value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pg-value-num {
  font-size: 28px;
  color: var(--accent-bright);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
  -webkit-text-stroke: 0;
}
.pg-value-card h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.pg-value-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.65; }

/* --------------------------------------------------------------- Banner aftermarket */
.pg-aftermarket-banner {
  margin: 0 var(--pad-x) 6rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #0f2a44 0%, #3d2b0b 100%);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-md);
}
.pg-aftermarket-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright), var(--orange-jora));
}
.pg-am-inner { display: flex; align-items: center; justify-content: space-between; padding: 3rem 3.25rem; gap: 2.5rem; flex-wrap: wrap; }
.pg-am-label {
  display: inline-block;
  background: rgba(224, 168, 7, 0.18);
  border: 1px solid rgba(224, 168, 7, 0.45);
  color: #f5c86b;
  font-size: var(--label-size);
  padding: 5px 13px;
  border-radius: 20px;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.pg-am-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: #fff; margin-bottom: 0.65rem; letter-spacing: -0.01em; }
.pg-am-title em { font-style: normal; color: var(--orange-jora); }
.pg-am-desc { font-size: 15px; color: rgba(255, 255, 255, 0.7); line-height: 1.65; max-width: 540px; }
.pg-am-cta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.btn-am {
  background: var(--orange-jora);
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
  display: inline-block;
}
.btn-am:hover { background: #dac316; transform: translateY(-2px); }
.pg-am-note { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); text-align: right; }

/* --------------------------------------------------------------- Contatti */
/* Banda finale con foto panoramica del porto + overlay scuro */
.pg-contact {
  position: relative;
  padding: 6rem var(--pad-x);
  color: var(--on-dark);
  overflow: hidden;
}
.pg-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/hero-terminal.jpg') center 55% / cover no-repeat;
  z-index: -2;
}
.pg-contact::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(8, 22, 43, 0.82) 0%, rgba(13, 49, 86, 0.62) 100%);
  z-index: -1;
}
.pg-contact-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.pg-contact h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: #fff; margin-bottom: 0.9rem; letter-spacing: -0.02em; }
.pg-contact > .pg-contact-inner > div:first-child > p { font-size: 16px; color: var(--on-dark-muted); line-height: 1.75; }
.pg-contact-details {
  display: flex; flex-direction: column; gap: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.75rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pg-contact-row { display: flex; align-items: flex-start; gap: 13px; }
.pg-contact-row .ci { font-size: 18px; color: var(--accent-bright); margin-top: 2px; flex-shrink: 0; }
.pg-contact-row > div { font-size: 14px; }
.clabel { color: var(--on-dark-faint); font-size: var(--label-size); text-transform: uppercase; letter-spacing: var(--label-track); margin-bottom: 3px; font-weight: 700; }
.cval { color: #fff; }
.cval a { color: var(--accent-bright); text-decoration: none; }
.cval a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Footer */
.pg-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 2rem var(--pad-x);
}
.pg-footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  max-width: var(--maxw); margin: 0 auto; gap: 1rem; flex-wrap: wrap;
}
.pg-footer p { font-size: 12.5px; color: var(--ink-faint); }
/* Link "Impostazioni cookie": è un <button> perché apre un pannello, non
   naviga; lo vestiamo da link del footer. */
.pg-footer-legal button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-decoration: underline;
  cursor: pointer;
}
.pg-footer-legal button:hover { color: var(--accent); }

.pg-footer-credits {
  max-width: var(--maxw);
  margin: 1rem auto 0;
  font-size: 11px;
  color: var(--ink-faint);
  opacity: 0.75;
  line-height: 1.5;
}
.pg-footer-credits a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------- Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 860px) {
  :root { --pad-x: 1.5rem; }

  .pg-nav { padding: 1rem var(--pad-x); }
  .pg-nav-toggle { display: block; }

  .pg-nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 0 var(--pad-x);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
  }
  .pg-nav-menu.is-open {
    max-height: 440px;
    opacity: 1;
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
  }
  /* Su mobile i link del menu sono sempre scuri (sfondo bianco) */
  .pg-nav-links { flex-direction: column; gap: 0; font-size: 16px; }
  .pg-nav-links a,
  .pg-nav.is-scrolled .pg-nav-links a { color: var(--ink-soft); padding: 0.9rem 0; border-bottom: 1px solid var(--border-soft); }
  .pg-nav-cta { margin-top: 1rem; width: 100%; padding: 13px; }

  .pg-hero { min-height: 88vh; padding: 7rem var(--pad-x) 5rem; }

  .pg-stats { margin-top: -3rem; }
  .pg-stat { padding: 1.75rem 1rem; }
  .pg-stat-num { font-size: 32px; }

  .pg-section { padding: 4rem var(--pad-x); }

  .pg-am-inner { flex-direction: column; align-items: flex-start; padding: 2.25rem; }
  .pg-am-cta { align-items: flex-start; width: 100%; }
  .pg-am-note { text-align: left; }

  .pg-contact-inner { grid-template-columns: 1fr; gap: 2rem; }
  .pg-footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .pg-stat { border-right: none; border-bottom: 1px solid var(--border-soft); min-width: 50%; flex: 1 1 50%; }
  .pg-stat:nth-child(odd) { border-right: 1px solid var(--border-soft); }
}

/* Rispetta le preferenze di chi disabilita le animazioni */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .pg-hero-scroll { animation: none; }
  /* Niente crossfade: resta la prima foto, ferma */
  .pg-hero-slide { transition: none; }
}

/* ===========================================================================
   LIVELLO AFTERMARKET — spareparts-site
   Tutto quello che sta sopra è il foglio del sito istituzionale
   (pigrecofvg-site/assets/css/custom.css), preso come base perché questo è
   un sito Pigreco e deve assomigliare a casa.
   Qui sotto solo ciò che il racconto sui ricambi aggiunge: l'arancio che il
   sito madre usa già per l'aftermarket promosso ad accento di sezione, i
   capitoli numerati, e i pochi componenti che il madre non ha.
   =========================================================================== */

:root {
  --am:        #E0A807;   /* l'arancio che il madre usa per l'aftermarket */
  --am-deep:   #b8860a;
  --am-ink:    #8a6304;   /* arancio leggibile su fondo chiaro */
  --am-wash:   rgba(224, 168, 7, 0.10);
  --am-line:   rgba(224, 168, 7, 0.42);
}

/* --------------------------------------------------------------- Ritmo */
/* Cosa è veloce e cosa no: due card con una barra che dice la durata senza
   dover promettere numeri che non abbiamo. */
.sp-pace-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
  margin-top: 1.25rem;
}
.sp-pace-bar span { display: block; height: 100%; border-radius: 3px; }
.sp-pace-bar--fast span { width: 30%; background: var(--am); }
.sp-pace-bar--slow span { width: 85%; background: var(--accent); }
.sp-pace-note {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- Ruoli */
.sp-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.sp-role {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 11px 11px 0;
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.sp-role--am { border-left-color: var(--am); }
.sp-role-who {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.sp-role p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

/* --------------------------------------------------------------- Nota */
/* Il disclaimer TecDoc: dovuto, quindi visibile, ma non urlato. */
.sp-note {
  margin-top: 2.25rem;
  border-left: 2px solid var(--am);
  background: var(--am-wash);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem;
}
.sp-note p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.sp-note strong { color: var(--ink); }

/* --------------------------------------------------------------- Banda finale */
/* Stessa costruzione del banner aftermarket del sito madre, a tutta banda:
   è il punto in cui la storia consegna il visitatore. */
.sp-invite {
  position: relative;
  max-width: none;
  padding: 5.5rem var(--pad-x);
  background: linear-gradient(135deg, #0f2a44 0%, #3d2b0b 100%);
  color: var(--on-dark);
  overflow: hidden;
}
.sp-invite::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright), var(--am));
}
.sp-invite h2 { color: #fff; font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.1rem; }
.sp-invite p { color: var(--on-dark-muted); font-size: 16.5px; line-height: 1.75; max-width: 62ch; }
.sp-invite p + p { margin-top: 1rem; }
.sp-invite strong { color: #fff; }
.sp-invite-cta { margin-top: 2.5rem; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------- Testo lungo */
/* Il racconto ha paragrafi veri, che il sito madre non ha: la colonna di
   lettura resta stretta anche quando la sezione è larga. */
.sp-prose { max-width: var(--maxw-text); }
.sp-prose p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.8; }
.sp-prose p + p { margin-top: 1.15rem; }
.sp-prose strong { color: var(--ink); font-weight: 500; }
.sp-prose a { color: var(--accent-deep); font-weight: 500; }
/* Un titoletto dentro la prosa: apre un discorso, quindi respira sopra e
   tiene il paragrafo staccato di poco, come una didascalia del suo capoverso. */
.sp-prose h3 { margin-bottom: 0.65rem; }
.sp-prose p + h3 { margin-top: 2rem; }
.pg-section--dark .sp-prose p { color: var(--on-dark-muted); }
.pg-section--dark .sp-prose strong { color: #fff; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 860px) {
  .sp-invite { padding: 4rem var(--pad-x); }
}

/* La banda dei numeri finisce dove comincia il racconto: sotto la card
   resta un respiro chiaro, poi la pagina torna bianca. */
.pg-stats-band { padding-bottom: 3.5rem; }

/* Nel sito madre i bottoni sono <button>; qui alcuni portano fuori pagina e
   quindi sono <a>. Senza questo arrivano sottolineati. */
.btn-primary,
.btn-secondary,
.btn-am,
.pg-nav-cta {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ritmo: «veloce» e «lento» sono etichette, non numeri, e vanno lette come
   tali — l'azzurro dei numeri del madre qui sbiadiva. */
.sp-pace-label {
  font-family: var(--font-display);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.sp-pace-label--fast { color: var(--am-ink); }
.sp-pace-label--slow { color: var(--accent-deep); }

/* ===========================================================================
   NARRAZIONE — dal blu all'arancione
   La pagina cambia temperatura mentre la si legge: parte blu come i porti e
   arriva arancione come l'aftermarket. Ogni capitolo dichiara il proprio
   colore in --ch e quello del capitolo prima in --ch-prev; tutto il resto
   (label, numeri, icone, bordi, barre) lo eredita, così il viaggio non è
   dipinto a mano sezione per sezione.
   Nessuna fotografia: i fondi sono luce dipinta in CSS.
   =========================================================================== */

:root {
  --ch-1: #1f6fb2;   /* il ponte — blu dei porti */
  --ch-2: #3f9fd4;   /* la piattaforma — azzurro */
  --ch-3: #C9A227;   /* il ritmo — la traversata: qui il freddo cede */
  --ch-4: #E0A807;   /* cosa sviluppiamo — oro aftermarket */
  --ch-5: #E08A0A;   /* la partnership — ambra */
  --ch-6: #E0680C;   /* come si comincia — arancio d'arrivo */

  --navy-deep: #0a1729;
  --navy: #0f2a44;
  --bronze-deep: #201503;
}

/* Ogni sezione narrativa porta il proprio colore e quello di prima. */
.sp-ch { position: relative; }
.sp-ch--1 { --ch: var(--ch-1); --ch-prev: var(--accent-bright); }
.sp-ch--2 { --ch: var(--ch-2); --ch-prev: var(--ch-1); }
.sp-ch--3 { --ch: var(--ch-3); --ch-prev: var(--ch-2); }
.sp-ch--4 { --ch: var(--ch-4); --ch-prev: var(--ch-3); }
.sp-ch--5 { --ch: var(--ch-5); --ch-prev: var(--ch-4); }
.sp-ch--6 { --ch: var(--ch-6); --ch-prev: var(--ch-5); }

/* Cucitura fra capitoli: un filo che porta il colore di prima in quello di
   adesso. È il collegamento, non un bordo decorativo. */
.sp-ch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ch-prev) 0%, var(--ch) 60%, transparent 100%);
  opacity: 0.75;
  z-index: 1;
}

/* Il fondo delle sezioni chiare prende un velo del proprio colore: la
   temperatura cambia senza che la pagina diventi colorata. */
.sp-ch--light {
  background:
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--ch) 6%, #fff) 100%);
  border-top: 0;
}
.sp-ch .pg-value-num { color: color-mix(in srgb, var(--ch) 85%, #2a1f00); }
.sp-ch .pg-value-card { border-top: 2px solid color-mix(in srgb, var(--ch) 55%, transparent); }
.sp-ch .pg-value-card:hover { border-color: var(--ch); }
.sp-ch .sp-note { border-left-color: var(--ch); background: color-mix(in srgb, var(--ch) 9%, #fff); }
.sp-ch .sp-role { border-left-color: color-mix(in srgb, var(--ch) 70%, transparent); }
.sp-ch .sp-role--am { border-left-color: var(--ch); }

/* --------------------------------------------------------------- Hero */
/* Il velo del madre serviva a rendere leggibile la foto: senza foto, sparisce. */
.sp-hero { background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 55%, #16233a 100%); }
.sp-hero::after { content: none; }

.sp-hero-light { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.sp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.sp-glow--blue  { width: 46vw; height: 46vw; left: -8vw; top: -10vw; background: #1f6fb2; animation: sp-drift-a 26s ease-in-out infinite; }
.sp-glow--azure { width: 38vw; height: 38vw; right: -6vw; top: 6vw;  background: #4db8e8; opacity: 0.34; animation: sp-drift-b 32s ease-in-out infinite; }
/* L'arancio è già qui, in basso e appena visibile: è dove arriva la storia. */
.sp-glow--amber { width: 52vw; height: 30vw; left: 22vw; bottom: -16vw; background: var(--ch-6); opacity: 0.22; animation: sp-drift-c 38s ease-in-out infinite; }

@keyframes sp-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4vw,3vw,0) scale(1.08); } }
@keyframes sp-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-5vw,4vw,0) scale(1.12); } }
@keyframes sp-drift-c { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3vw,-3vw,0) scale(1.1); } }

.pg-hero-inner { position: relative; z-index: 1; }

.sp-hero h1 { text-shadow: none; }
.sp-hero-lead {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--on-dark-muted);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 2.75rem;
  animation: sp-rise 0.9s ease 0.38s both;
}
.pg-hero-btns { animation: sp-rise 0.9s ease 0.5s both; }

@keyframes sp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* La rotta dichiarata in apertura: due estremi e il filo che li unisce. */
.sp-hero-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 3.25rem;
  font-family: var(--font-display);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  animation: sp-rise 0.9s ease 0.62s both;
}
.sp-route-end--from { color: var(--accent-bright); }
.sp-route-end--to { color: var(--ch-6); }
.sp-route-line {
  height: 2px;
  width: clamp(90px, 22vw, 260px);
  background: linear-gradient(90deg, var(--accent-bright), var(--ch-3) 55%, var(--ch-6));
  transform-origin: left;
  animation: sp-draw 1.4s ease 0.7s both;
}
@keyframes sp-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------- Barra di avanzamento */
.sp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; pointer-events: none; }
.sp-progress span {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  /* La sfumatura è ancorata al viewport: il colore in punta è il colore del
     punto della storia in cui sei. */
  background: linear-gradient(90deg, var(--ch-1), var(--ch-2) 30%, var(--ch-3) 52%, var(--ch-4) 70%, var(--ch-6));
  background-size: 100vw 100%;
  background-repeat: no-repeat;
  transition: width 0.1s linear;
}

/* --------------------------------------------------------------- Filo dei capitoli */
.sp-rail {
  position: fixed;
  left: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sp-rail.is-on { opacity: 1; }
.sp-rail-line {
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
  overflow: hidden;
}
.sp-rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ch-1), var(--ch-2) 28%, var(--ch-3) 50%, var(--ch-4) 68%, var(--ch-6));
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  transition: transform 0.15s linear;
}
.sp-rail-nodes { list-style: none; display: flex; flex-direction: column; gap: 1.35rem; position: relative; }
.sp-rail-nodes a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--ink-faint);
}
.sp-rail-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  flex: none;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.sp-rail-label {
  font-family: var(--font-display);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
.sp-rail-nodes a:hover .sp-rail-label,
.sp-rail-nodes a:focus-visible .sp-rail-label { opacity: 1; transform: none; }
.sp-rail-nodes li.is-done .sp-rail-dot { border-color: currentColor; }
.sp-rail-nodes li.is-active a { color: var(--ink); }
.sp-rail-nodes li.is-active .sp-rail-dot { transform: scale(1.35); border-color: var(--rail-c, var(--accent)); background: var(--rail-c, var(--accent)); }
.sp-rail-nodes li.is-active .sp-rail-label { opacity: 1; transform: none; color: var(--rail-c, var(--accent)); }
/* Il colore di ogni nodo è quello del suo capitolo. */
.sp-rail-nodes li:nth-child(1) { --rail-c: var(--ch-1); }
.sp-rail-nodes li:nth-child(2) { --rail-c: var(--ch-2); }
.sp-rail-nodes li:nth-child(3) { --rail-c: var(--ch-3); }
.sp-rail-nodes li:nth-child(4) { --rail-c: var(--ch-4); }
.sp-rail-nodes li:nth-child(5) { --rail-c: var(--ch-5); }
.sp-rail-nodes li:nth-child(6) { --rail-c: var(--ch-6); }

/* --------------------------------------------------------------- Banda scura della piattaforma */
/* Da navy verso il petrolio: la traversata è cominciata. */
.sp-ch--2.pg-section--dark {
  background:
    radial-gradient(1100px 480px at 12% -10%, rgba(63, 159, 212, 0.20), transparent 60%),
    radial-gradient(900px 560px at 100% 108%, rgba(224, 168, 7, 0.16), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, #0c2033 60%, #14232c 100%);
}
.sp-ch--2.pg-section--dark::before {
  background: linear-gradient(90deg, var(--ch-1), var(--ch-2) 45%, var(--ch-4));
  opacity: 1;
  height: 3px;
}
.sp-ch--2 .pg-comp-icon { background: linear-gradient(135deg, var(--ch-2) 0%, color-mix(in srgb, var(--ch-4) 70%, var(--ch-2)) 100%); }
.sp-ch--2 .pg-comp-item:hover { border-color: color-mix(in srgb, var(--ch-4) 55%, transparent); }
.sp-ch--2 .pg-comp-item::before { background: linear-gradient(90deg, var(--ch-2), var(--ch-4)); }

/* --------------------------------------------------------------- Ritmo */
.sp-pace-bar--fast span { background: var(--ch-4); animation: sp-fill-fast 1.1s ease both; }
.sp-pace-bar--slow span { background: var(--ch-1); animation: sp-fill-slow 1.8s ease both; }
.reveal .sp-pace-bar span { animation-play-state: paused; }
.reveal.is-visible .sp-pace-bar span { animation-play-state: running; }
@keyframes sp-fill-fast { from { width: 0; } to { width: 30%; } }
@keyframes sp-fill-slow { from { width: 0; } to { width: 85%; } }
.sp-pace-label--fast { color: color-mix(in srgb, var(--ch-4) 80%, #2a1f00); }
.sp-pace-label--slow { color: var(--accent-deep); }

/* --------------------------------------------------------------- Invito */
/* Arrivo: qui l'arancio prende la banda. */
.sp-invite {
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(224, 104, 12, 0.35), transparent 60%),
    linear-gradient(135deg, #14283c 0%, #3a2408 55%, #4a2a05 100%);
}
.sp-invite::before { background: linear-gradient(90deg, var(--ch-4), var(--ch-6)); }
.btn-am { background: var(--ch-6); }
.btn-am:hover { background: #f07a1c; }

/* --------------------------------------------------------------- Contatti */
/* Niente foto: la banda finale resta calda, come il punto d'arrivo. */
.pg-contact::before {
  background:
    radial-gradient(800px 400px at 10% 0%, rgba(224, 168, 7, 0.18), transparent 60%),
    linear-gradient(150deg, var(--bronze-deep) 0%, #14202f 100%);
}
.pg-contact::after { content: none; }
.pg-contact .pg-contact-row .ci { color: var(--ch-4); }
.pg-contact .cval a { color: var(--ch-4); }

/* --------------------------------------------------------------- Comparsa */
/* Il racconto entra dal basso, un pezzo alla volta. */
.sp-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.sp-stagger.is-visible > * { opacity: 1; transform: none; }
.sp-stagger.is-visible > *:nth-child(2) { transition-delay: 0.07s; }
.sp-stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.sp-stagger.is-visible > *:nth-child(4) { transition-delay: 0.21s; }
.sp-stagger.is-visible > *:nth-child(5) { transition-delay: 0.28s; }
.sp-stagger.is-visible > *:nth-child(6) { transition-delay: 0.35s; }
.sp-stagger.is-visible > *:nth-child(7) { transition-delay: 0.42s; }
.sp-stagger.is-visible > *:nth-child(8) { transition-delay: 0.49s; }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 1320px) {
  /* Sotto questa soglia il filo dei capitoli darebbe fastidio al testo. */
  .sp-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-glow { animation: none; }
  .sp-hero-lead,
  .pg-hero-btns,
  .sp-hero-route { animation: none; }
  .sp-route-line { animation: none; transform: none; }
  .sp-pace-bar--fast span { animation: none; width: 30%; }
  .sp-pace-bar--slow span { animation: none; width: 85%; }
  .sp-stagger > * { opacity: 1; transform: none; transition: none; }
  .sp-progress span,
  .sp-rail-fill { transition: none; }
}

.sp-ch .pg-section-intro { margin-left: 0; margin-right: 0; }

/* La rotta in apertura respirava troppo poco sotto i bottoni. */
.sp-hero-route { margin-top: 4.25rem; }
.sp-glow--amber { opacity: 0.3; }

/* I capitoli sono bande a tutta larghezza: il colore del capitolo deve
   arrivare ai bordi dello schermo, il contenuto resta nella colonna. */
.sp-ch.pg-section {
  max-width: none;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.sp-ch--light {
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--ch) 11%, #fff) 100%);
}

/* ===========================================================================
   REVISIONE — identità propria
   Il sistema del sito madre resta la parentela (blu d'origine, logo, navy),
   ma questo sito non deve sembrarne una copia. Cambiano i materiali e
   l'impaginato, non i caratteri:
     · niente card con ombra morbida: filetti da 1px e regoli di colore
     · raggio 3px invece di 14: bordi netti
     · impaginato editoriale allineato a sinistra, numeri di capitolo grandi
       nel margine, colonna di lettura stretta
   =========================================================================== */

:root {
  --radius: 3px;
  /* Le ombre morbide erano la firma del madre: qui restano appena percettibili. */
  --shadow-sm: 0 1px 2px rgba(15, 29, 51, 0.05);
  --shadow-md: 0 6px 18px rgba(15, 29, 51, 0.07);
  --shadow-lg: 0 10px 28px rgba(15, 29, 51, 0.10);
  /* --now è il colore del capitolo in lettura, scritto da story.js. */
  --now: var(--ch-1);
}

body { font-size: 18px; line-height: 1.8; }

h1,
h2,
h3,
.pg-stat-num,
.pg-value-num,
.sp-rail-label,
.sp-pace-label,
.sp-role-who,
.clabel,
.pg-nav-links,
.pg-nav-cta,
.btn-primary,
.btn-secondary,
.btn-am,
.sp-hero-route,
.sp-pull,
.sp-roles-caption {
  font-family: var(--font-display);
}

h1 { font-size: clamp(40px, 6.4vw, 82px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; }
h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.sp-prose p, .pg-section-intro, .pg-hero p, .sp-invite p { font-family: var(--font); }
.pg-section-intro { font-size: 19px; line-height: 1.75; font-style: italic; color: var(--ink-soft); }

/* --------------------------------------------------------------- Impaginato */
/* Tutto a sinistra: il racconto si legge come una pagina, non come una
   brochure centrata. */
.pg-hero { text-align: left; align-items: flex-start; min-height: 96vh; }
.pg-hero-inner { margin: 0; max-width: 17ch; }
.sp-hero-lead { margin-left: 0; margin-right: 0; max-width: 54ch; }
.sp-hero-route { justify-content: flex-start; }
.pg-hero-btns { justify-content: flex-start; }
.sp-hero h1 { max-width: none; }
.pg-hero-inner { max-width: min(20ch, 100%); }
.sp-hero-lead, .pg-hero-btns, .sp-hero-route { max-width: 56ch; }

/* --------------------------------------------------------------- Materiali */
/* Via le card con ombra: restano filetti e un regolo di colore. */
.pg-value-card,
.sp-role,
.pg-target-item {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.sp-ch .pg-value-card {
  border-top: 0;
  border-left: 2px solid color-mix(in srgb, var(--ch) 65%, transparent);
  padding: 1.5rem 1.6rem;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.sp-ch .pg-value-card:hover {
  transform: none;
  border-left-color: var(--ch);
  background: color-mix(in srgb, var(--ch) 5%, transparent);
  box-shadow: none;
}
.sp-role { border-radius: var(--radius); }

.pg-value-num {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  line-height: 1;
}

/* --------------------------------------------------------------- Numeri */
/* Niente scheda bianca sospesa sopra l'hero: una banda con filetti e i numeri
   grandi nel carattere dei titoli. */
.pg-stats-band { background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.pg-stats {
  margin: 0 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 3.5rem 0 3rem;
}
.pg-stat { border-right: 1px solid var(--border-soft); text-align: left; padding: 0 2rem; }
.pg-stat:first-child { padding-left: 0; }
.pg-stat-num { font-size: clamp(44px, 5.5vw, 68px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--ink); }
.pg-stat-num span { color: var(--ch-4); }
.pg-stat-label { font-family: var(--font); font-style: italic; font-size: 15px; line-height: 1.5; margin-top: 0.9rem; color: var(--ink-faint); letter-spacing: 0; }

/* --------------------------------------------------------------- Moduli */
/* Sulla banda scura niente vetro né riquadri con gradiente: righe con un
   filetto e l'icona nel colore del capitolo. */
.sp-ch--2 .pg-comp-grid { grid-template-columns: 1fr; gap: 0; margin-top: 3.5rem; }
.sp-ch--2 .pg-comp-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 1.15rem 0;
  display: grid;
  grid-template-columns: 28px minmax(150px, 0.8fr) minmax(0, 1.7fr);
  gap: clamp(0.9rem, 2.2vw, 2.5rem);
  align-items: baseline;
}
.sp-ch--2 .pg-comp-item:hover { transform: none; background: rgba(255,255,255,0.03); box-shadow: none; border-color: color-mix(in srgb, var(--ch-4) 60%, transparent); }
.sp-ch--2 .pg-comp-item::before { content: none; }
.sp-ch--2 .pg-comp-icon {
  width: auto; height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 24px;
  color: var(--ch-4);
  margin: 0;
}
.sp-ch--2 .pg-comp-item:hover .pg-comp-icon { transform: none; box-shadow: none; }
.sp-ch--2 .pg-comp-item h3 { grid-column: 2; margin-bottom: 0; }
.sp-ch--2 .pg-comp-item p { grid-column: 3; font-family: var(--font); font-size: 15px; line-height: 1.65; }

/* --------------------------------------------------------------- Bottoni */
/* Squadrati, e quello principale porta il colore del punto della storia in
   cui ti trovi. */
.btn-primary, .btn-secondary, .btn-am, .pg-nav-cta {
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12.5px;
  box-shadow: none;
}
.btn-primary, .btn-am { padding: 15px 28px; }
.btn-primary { background: var(--now); }
.btn-primary:hover { background: var(--now); filter: brightness(1.12); transform: none; }
.btn-secondary { border-width: 1px; }
.btn-secondary:hover { transform: none; }
.pg-nav-cta { background: var(--now); padding: 10px 18px; }
.pg-nav-cta:hover { background: var(--now); filter: brightness(1.12); transform: none; }

/* --------------------------------------------------------------- Navigazione */
.pg-nav-links { font-size: var(--label-size); font-weight: 700; letter-spacing: var(--label-track); text-transform: uppercase; gap: 1.75rem; }
.pg-nav.is-scrolled { background: rgba(255,255,255,0.94); box-shadow: none; border-bottom-color: var(--border-soft); }
.pg-nav.is-scrolled .pg-nav-links a:hover,
.pg-nav.is-scrolled .pg-nav-links a.is-active { color: var(--now); }

/* --------------------------------------------------------------- Contatti */
.pg-contact-details { background: rgba(255,255,255,0.05); border-radius: var(--radius); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255,255,255,0.16); }
.cval { font-family: var(--font); font-size: 16px; }

/* --------------------------------------------------------------- Footer */
.pg-footer { background: var(--bg); border-top: 1px solid var(--border-soft); }
.pg-footer p { font-family: var(--font); font-size: 13.5px; }

/* --------------------------------------------------------------- Nota */
.sp-note { border-radius: 0 var(--radius) var(--radius) 0; }
.sp-note p { font-family: var(--font); font-size: 14.5px; }

/* Il vincolo di misura va sul titolo, non sul contenitore: e il contenuto
   dell'apertura deve stare sulla stessa colonna delle sezioni. */
.pg-hero-inner {
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}
.sp-hero h1 { max-width: 15ch; }
.sp-hero-lead { max-width: 52ch; }

/* `.pg-hero p` del foglio madre (classe + tipo) batte le classi singole:
   qui i selettori a due classi riprendono il comando sull'apertura. */
.pg-hero .sp-hero-lead,
.pg-hero .sp-hero-route {
  margin-left: 0;
  margin-right: 0;
}
.pg-hero .sp-hero-lead { max-width: 52ch; margin-bottom: 0; }
.pg-hero .sp-hero-route {
  margin-top: 3rem;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
}
.pg-hero .pg-hero-btns { margin-top: 2.5rem; }

/* Il velo dei capitoli caldi era troppo carico: la temperatura deve salire,
   non la pagina diventare crema. */
.sp-ch--light { background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--ch) 8%, #fff) 100%); }

/* ===========================================================================
   RITORNO AI FONT DI FAMIGLIA + PRESENZA
   Montserrat e Lora sono stati provati e scartati: i caratteri sono quelli
   del sito istituzionale. Restano invece i materiali propri (filetti, regoli,
   angoli netti) e la rampa cromatica.
   =========================================================================== */

:root {
  --font:         'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { font-size: 17px; line-height: 1.75; }
/* Space Grotesk in casa esiste in 500 e 700: l'800 non c'è e il browser lo
   ingrasserebbe da solo. */
h1 { font-weight: 700; font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: clamp(27px, 3.8vw, 43px); letter-spacing: -0.025em; }
.pg-stat-num, .pg-value-num { font-weight: 700; }
.pg-section-intro { font-style: normal; font-size: 18.5px; }
.pg-stat-label { font-style: normal; font-size: 14px; }
.cval, .sp-note p, .sp-ch--2 .pg-comp-item p { font-family: var(--font); }

/* --------------------------------------------------------------- Le rotte */
/* Linee che attraversano l'apertura: si disegnano una dopo l'altra e poi
   respirano. Danno all'hero qualcosa da guardare senza spiegare niente. */
.sp-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.75;
  pointer-events: none;
}
.sp-flow path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: sp-trace 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) both,
             sp-breathe 9s ease-in-out infinite 3s;
}
.sp-flow path:nth-child(1) { animation-delay: 0.2s, 3s; }
.sp-flow path:nth-child(2) { animation-delay: 0.5s, 3.4s; }
.sp-flow path:nth-child(3) { animation-delay: 0.8s, 3.8s; }
.sp-flow path:nth-child(4) { animation-delay: 1.1s, 4.2s; }
@keyframes sp-trace { to { stroke-dashoffset: 0; } }
@keyframes sp-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* --------------------------------------------------------------- Grana */
/* Un velo di grana su tutta la pagina: è quello che separa una superficie
   piatta da una superficie. Non si vede, si sente. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- Filigrana */
/* Il numero del capitolo, grande, dietro il titolo: dà scala e profondità
   dove prima c'era solo spazio bianco. */
.sp-ch { overflow: hidden; }
.sp-ch[data-num]::after {
  content: attr(data-num);
  position: absolute;
  right: -0.06em;
  top: -0.18em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(160px, 26vw, 380px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ch);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.sp-ch--2[data-num]::after { opacity: 0.11; }
.sp-ch .pg-section-inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .sp-flow path { animation: none; stroke-dashoffset: 0; }
}

/* ===========================================================================
   PRESENZA — dove la pagina alza la voce
   Fin qui il racconto era tutto alla stessa altezza: etichetta, titolo, prosa,
   griglia, e da capo. Una storia che si legge ha invece dei momenti in cui si
   ferma. Questo strato ne aggiunge tre, e nessuno inventa niente di nuovo:
     · le frasi promosse — una riga di testo approvato, portata a voce alta
     · il capolettera — il segnale che qui si legge, non si scorre
     · i titoli che entrano riga per riga, da sotto una feritoia
   E dà profondità alla banda scura, che era l'unico posto dove il racconto
   diventava un elenco su un fondo piatto.
   =========================================================================== */

/* --------------------------------------------------------------- Feritoia */
/* Le righe di un titolo salgono da dietro il loro stesso bordo. La feritoia è
   il contenitore; la riga dentro parte da sotto. Il ritardo per riga sta in
   --i, che lines.js scrive quando misura dove il browser è andato a capo. */
.sp-ln {
  display: block;
  overflow: hidden;
  /* Senza questo la feritoia taglia le discendenti (p, g, q). */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.sp-ln > span {
  display: block;
  transform: translateY(108%);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 90ms);
}
.is-in > .sp-ln > span { transform: none; }

/* Nell'apertura non c'è niente da aspettare: il titolo entra al caricamento. */
.sp-hero h1 .sp-ln > span {
  transition: none;
  animation: sp-slot 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sp-hero h1 .sp-ln:nth-child(1) > span { animation-delay: 0.12s; }
.sp-hero h1 .sp-ln:nth-child(2) > span { animation-delay: 0.26s; }
.sp-ln--accent { color: var(--accent-bright); }
@keyframes sp-slot { from { transform: translateY(108%); } to { transform: none; } }

/* Senza l'occhiello il titolo comincia più in alto e ha spazio per due righe
   intere: «Vent'anni a far parlare» non deve spezzarsi a metà. */
.sp-hero h1 { max-width: 24ch; }
.pg-hero .sp-hero-lead { margin-top: 2rem; }

/* --------------------------------------------------------------- Frase promossa */
/* Una riga sola, presa dal testo qui accanto e portata alla misura di un
   titolo. Il filetto sopra porta il colore del capitolo; le parole restano in
   inchiostro, perché è la frase a dover pesare, non la tinta. */
.sp-prose p.sp-pull,
.sp-pull {
  margin: 3.25rem 0 3rem;
  max-width: 21ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 2.9vw, 35px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--ink);
}
.sp-pull::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: 1.5rem;
  background: var(--ch, var(--accent));
}
/* Sulla banda scura la frase è chiara e il filetto resta del capitolo. */
.pg-section--dark .sp-prose p.sp-pull,
.pg-section--dark .sp-pull { color: var(--on-dark); }

/* Il solo filetto, senza frase: stessa misura e stesso respiro della frase
   promossa, per chiudere un blocco di testo senza aggiungere parole. */
.sp-prose p.sp-pull-rule,
.sp-pull-rule {
  margin: 3.25rem 0 0;
  width: 64px;
  height: 3px;
  background: var(--ch, var(--accent));
}

/* --------------------------------------------------------------- Capolettera */
/* Solo sul primo paragrafo di ogni capitolo: è l'attacco del racconto, non un
   ornamento da ripetere. */
.sp-prose--open > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 700;
  /* La lettera deve coprire due righe di prosa e non una goccia di più: due
     righe sono 3.6em, e 3.6 / 5 = 0.72 — che al pixel arrotonda per eccesso e
     si mangia anche la terza riga. Da qui lo 0.7. */
  font-size: 5em;
  line-height: 0.7;
  /* Nessun padding sopra: sommato all'interlinea sforerebbe le due righe. */
  padding: 0 0.1em 0 0;
  color: var(--ch, var(--accent));
}

/* --------------------------------------------------------------- Filigrana */
/* Il numero del capitolo era tagliato a metà dal bordo dello schermo, che
   sembrava un incidente. Ora finisce dove finisce la colonna del testo: è
   una cifra intera, dietro al racconto. */
.sp-ch[data-num]::after {
  right: max(var(--pad-x), calc((100% - var(--maxw)) / 2));
  top: -0.1em;
  font-size: clamp(150px, 21vw, 300px);
  opacity: 0.085;
}
.sp-ch--2[data-num]::after { opacity: 0.13; }
/* `clip` taglia come `hidden` ma non crea un contenitore di scorrimento:
   serve perché la filigrana non allarghi la pagina. */
.sp-ch { overflow: hidden; overflow: clip; }

/* --------------------------------------------------------------- Banda scura */
/* Era un fondo piatto con sopra un elenco. Adesso ha tre piani: la luce che
   entra da sinistra, il buio agli angoli, e i moduli appoggiati su un ripiano
   — che è poi quello che dice la sezione: una piattaforma, e sopra i
   prodotti. */
.sp-ch--2.pg-section--dark {
  background:
    radial-gradient(1200px 520px at 12% -12%, rgba(63, 159, 212, 0.26), transparent 62%),
    radial-gradient(900px 560px at 100% 108%, rgba(224, 168, 7, 0.18), transparent 55%),
    radial-gradient(130% 95% at 50% 45%, transparent 42%, rgba(3, 10, 18, 0.55) 100%),
    linear-gradient(160deg, var(--navy) 0%, #0c2033 58%, #101d28 100%);
}

/* Otto righe, non un ripiano. Il riquadro grigio che le teneva era la scheda
   più grande della pagina, proprio dove le schede erano state tolte da tutte
   le altre parti — e con otto moduli su tre colonne restava sempre una casella
   vuota e i filetti finivano a mezz'aria. Adesso sono una pila sola: la
   piattaforma è la pila, e sotto c'è la riga del motore. */
.sp-ch--2 .pg-comp-grid {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.sp-ch--2 .pg-comp-item {
  transition: background 0.3s ease, border-color 0.3s ease;
}
/* L'ultimo filetto lo fa la riga del motore. */
.sp-ch--2 .pg-comp-item:last-child { border-bottom-color: transparent; }
.sp-ch--2 .pg-comp-item:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ch-4) 13%, transparent), transparent 70%);
}
.sp-ch--2 .pg-comp-icon {
  font-size: 25px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.sp-ch--2 .pg-comp-item:hover .pg-comp-icon {
  color: #ffc63a;
  text-shadow: 0 0 22px rgba(224, 168, 7, 0.55);
}
/* Su schermo stretto la descrizione va sotto il nome invece che accanto. */
@media (max-width: 760px) {
  .sp-ch--2 .pg-comp-item {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 0.2rem 0.9rem;
    padding: 1.1rem 0;
  }
  .sp-ch--2 .pg-comp-item p { grid-column: 2; margin-top: 0.35rem; }
}

/* --------------------------------------------------------------- Responsive */

@media (prefers-reduced-motion: reduce) {
  /* Senza movimento i titoli restano come sono scritti: lines.js non li
     tocca nemmeno, e la feritoia non deve nascondere niente. */
  .sp-ln { overflow: visible; }
  .sp-ln > span,
  .sp-hero h1 .sp-ln > span { transform: none; transition: none; animation: none; }
}

/* --------------------------------------------------------------- I numeri */
/* La banda dei numeri era l'unica cosa in pagina senza margine: su schermo
   stretto le didascalie finivano sotto il bordo. Ora sta nella colonna come
   tutto il resto, e sotto i 760px i tre numeri si mettono in fila indiana
   con il loro regolo, invece di andare a capo due e uno. */
.pg-stats-band { padding-left: var(--pad-x); padding-right: var(--pad-x); }

@media (max-width: 760px) {
  .pg-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.9rem;
    padding: 2.75rem 0 2.5rem;
  }
  .pg-stats .pg-stat {
    border-right: 0;
    border-left: 2px solid color-mix(in srgb, var(--ch-1) 50%, transparent);
    padding: 0 0 0 1.1rem;
  }
}

/* --------------------------------------------------------------- La traversata */
/* Il capitolo del ponte non parla di collegamenti: parla di provenienza. Due
   mondi che sembrano diversi e hanno la stessa forma. Quindi qui non c'è
   niente che colleghi niente — nessun nodo, nessuna traccia da un nome a un
   altro, nessuna freccia. C'è un campo di luce largo quanto lo schermo che
   passa dal freddo dei porti al caldo dell'aftermarket, tre rotte che lo
   attraversano ed escono da entrambi i lati (non hanno estremi: non sono
   collegamenti, sono passaggi), i due vocabolari appoggiati alle due
   estremità, e la frase che chiude il capitolo. */
.sp-crossing {
  position: relative;
  /* A tutta larghezza: è l'unico momento della metà chiara in cui la pagina
     esce dalla colonna. `overflow: clip` del capitolo tiene a bada i 100vw. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 4rem;
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x);
  isolation: isolate;
}

/* Il campo: freddo a sinistra, caldo a destra, e in mezzo niente confine. */
.sp-crossing-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 130% at 6% 34%, rgba(31, 111, 178, 0.20), transparent 64%),
    radial-gradient(66% 130% at 96% 66%, rgba(224, 168, 7, 0.24), transparent 62%),
    linear-gradient(90deg, rgba(31, 111, 178, 0.07) 0%, rgba(201, 162, 39, 0.05) 54%, rgba(224, 104, 12, 0.10) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* Le rotte entrano da un bordo dello schermo ed escono dall'altro. Nessuna
   comincia o finisce su una parola. */
.sp-crossing-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 46%;
  max-height: 300px;
  z-index: -1;
  opacity: 0.62;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
.is-visible .sp-crossing-routes { clip-path: inset(0 0 0 0); }

.sp-crossing-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

/* La frase che chiude il capitolo, alla misura di un titolo. Il capitolo la
   dice una volta sola: nella prosa non c'è più. */
.sp-crossing-say {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(27px, 4.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
  /* Larga abbastanza da spezzarsi sulla virgola, dove si spezza da sola. */
  max-width: 28ch;
  text-wrap: balance;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.sp-worlds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.sp-world-tag {
  font-family: var(--font-display);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.sp-world--from .sp-world-tag { color: color-mix(in srgb, var(--ch-1) 82%, #0f1d33); }
.sp-world--to .sp-world-tag { color: color-mix(in srgb, var(--ch-4) 76%, #2a1f00); }
.sp-world-names {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.sp-world-note {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 38ch;
}
/* Un filetto sopra ogni vocabolario, nel colore del suo mondo: è il solo
   segno grafico, e non collega niente. */
.sp-world { border-top: 2px solid; padding-top: 1.4rem; }
.sp-world--from { border-top-color: color-mix(in srgb, var(--ch-1) 55%, transparent); }
.sp-world--to { border-top-color: color-mix(in srgb, var(--ch-4) 65%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .sp-crossing-routes { clip-path: none; transition: none; }
}

/* --------------------------------------------------------------- Le durate */
/* «Cosa è veloce, e cosa no» erano due schede con due barrette dentro: due
   misure che non si potevano confrontare, perché non stavano sullo stesso
   metro. Adesso stanno una sopra l'altra su tutta la colonna, stesso zero e
   stessa lunghezza totale. Numeri non ce ne sono e non se ne inventano: c'è
   la lunghezza relativa, che è quello che il testo dice.
   Il tempo lo fa il movimento: la traccia lenta ci mette davvero più del
   doppio a riempirsi. */
.sp-durate {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.25rem);
  margin-top: 3.5rem;
}
.sp-durata--fast { --dur-c: var(--ch-4); --dur-len: 30%; }
.sp-durata--slow { --dur-c: var(--ch-1); --dur-len: 85%; }

.sp-durata-label {
  font-family: var(--font-display);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  color: color-mix(in srgb, var(--dur-c) 76%, #241a05);
}
.sp-durata--slow .sp-durata-label { color: color-mix(in srgb, var(--dur-c) 82%, #0f1d33); }
.sp-durata h3 {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

/* L'asse: un filetto per tutta la colonna. Il riempimento è una scala
   orizzontale, non una larghezza animata — il browser non deve rifare il
   calcolo del layout a ogni fotogramma. */
.sp-durata-track {
  position: relative;
  height: 1px;
  background: var(--border);
  margin: 1.75rem 0 1.5rem;
  color: var(--dur-c);
}
.sp-durata-fill {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  width: var(--dur-len);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}
.sp-durata-end {
  position: absolute;
  left: var(--dur-len);
  top: -3.5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0.3);
}
.is-visible .sp-durata--fast .sp-durata-fill { transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); transform: none; }
.is-visible .sp-durata--slow .sp-durata-fill { transition: transform 2.2s cubic-bezier(0.22, 0.61, 0.36, 1); transform: none; }
.is-visible .sp-durata--fast .sp-durata-end { transition: opacity 0.3s ease 0.85s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.85s; opacity: 1; transform: none; }
.is-visible .sp-durata--slow .sp-durata-end { transition: opacity 0.3s ease 2.1s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 2.1s; opacity: 1; transform: none; }

.sp-durata-note {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* --------------------------------------------------------------- I numeri */
/* La banda dei numeri tagliava di netto l'apertura sul bianco. Adesso il navy
   dell'apertura prosegue dentro la banda e si dissolve nel bianco sotto i
   numeri: l'apertura finisce, e il racconto comincia. I tre numeri sono le
   credenziali, e appartengono all'apertura. */
.pg-stats-band {
  background:
    /* L'apertura finisce con l'arancio in basso: se la banda comincia navy
       secco, la cucitura si vede. Il bagliore prosegue di là dal taglio. */
    radial-gradient(1200px 240px at 44% 0%, rgba(224, 104, 12, 0.17), transparent 72%),
    #16233a;
  border-bottom: 0;
}
/* Qui la banda finiva dissolvendosi nel bianco. Una rampa di luminanza lunga
   150px su un navy è il caso da manuale del banding: le fasce si vedono, e
   scorrendo si muovono. Il taglio netto non fa male a nessuno — e la cucitura
   del capitolo 01, che cade proprio lì, lo rende voluto. */
.pg-stats { margin-top: 0; padding: 4.5rem 0 4.5rem; }
.pg-stats .pg-stat { border-right-color: rgba(255, 255, 255, 0.16); }
.pg-stats .pg-stat-num { color: var(--on-dark); }
.pg-stats .pg-stat-num span { color: var(--ch-4); }
.pg-stats .pg-stat-label { color: var(--on-dark-muted); }

@media (max-width: 760px) {
  .pg-stats { padding: 3.5rem 0 6rem; }
  .pg-stats .pg-stat { border-left-color: rgba(255, 255, 255, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-durata-fill { transform: none; }
  .sp-durata-end { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- I quattro pezzi */
/* Erano quattro schede uguali in griglia: la cosa più da modello rimasta in
   pagina. Adesso sono quattro righe, con la cifra appesa nel margine come la
   filigrana del capitolo e il testo sulla colonna di lettura. */
.sp-pezzi {
  list-style: none;
  margin-top: 3.25rem;
  border-top: 1px solid var(--border-soft);
}
.sp-pezzo {
  display: grid;
  grid-template-columns: clamp(84px, 9vw, 132px) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.25rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--border-soft);
}
.sp-pezzo-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--ch) 80%, #2a1f00);
}
.sp-pezzo h3 {
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.sp-pezzo-testo p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 66ch;
}
/* La riga si scalda quando la si guarda: la cifra prende il colore pieno. */
.sp-pezzo { transition: background 0.25s ease; }
.sp-pezzo:hover { background: color-mix(in srgb, var(--ch) 5%, transparent); }
.sp-pezzo-num { transition: color 0.25s ease; }
.sp-pezzo:hover .sp-pezzo-num { color: color-mix(in srgb, var(--ch) 88%, #2a1f00); }

@media (max-width: 620px) {
  .sp-pezzo { grid-template-columns: 1fr; gap: 0.5rem; }
  .sp-pezzo-num { font-size: 30px; }
}

/* --------------------------------------------------------------- I ruoli */
/* Due colonne su un filetto solo, senza riquadri: ognuno nel colore di quello
   che porta — il blu dei sistemi, l'oro del dato aftermarket. */
.sp-roles-caption {
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2.5rem;
}
.sp-roles { border-top: 1px solid var(--border); padding-top: 0; margin-top: 2.5rem; }
/* Con l'etichetta sopra, il filetto si avvicina: lo stacco l'ha già dato lei. */
.sp-roles-caption + .sp-roles { margin-top: 0.9rem; }
.sp-ch .sp-role {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 1.5rem 0 0;
}
.sp-role .sp-role-who { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; }
.sp-ch .sp-role--pg .sp-role-who { color: color-mix(in srgb, var(--ch-1) 82%, #0f1d33); }
.sp-ch .sp-role--am .sp-role-who { color: color-mix(in srgb, var(--ch-4) 76%, #2a1f00); }

/* La nota TecDoc è dovuta, quindi resta in pagina — ma è una nota a piè di
   pagina, non un avviso: filetto sopra, corpo piccolo, niente fondo colorato. */
.sp-ch .sp-note {
  background: none;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 1.1rem 0 0;
  margin-top: 3.25rem;
  max-width: 68ch;
}
.sp-note p { font-size: 13.5px; line-height: 1.7; color: var(--ink-faint); }
.sp-note strong { color: var(--ink-soft); }

/* --------------------------------------------------------------- Il motore */
/* «Un motore solo, e sopra i servizi che vi servono»: sotto la pila dei
   moduli, la riga che la regge. */
.sp-ch--2 .pg-comp-grid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--ch-2), var(--ch-4) 82%, transparent);
  opacity: 0.8;
}

/* --------------------------------------------------------------- Il giro si chiude */
/* La rotta dell'apertura ricompare in fondo, arrivata: gli estremi sono
   entrambi caldi e la linea è tutta oro. Non è un ornamento ripetuto — è la
   stessa figura al punto d'arrivo. */
.sp-route--arrivata {
  margin: 0 0 1.75rem;
  animation: none;
  justify-content: flex-start;
}
.sp-route--arrivata .sp-route-end--from { color: var(--ch-4); opacity: 0.55; }
.sp-route--arrivata .sp-route-end--to { color: var(--ch-6); }
.sp-route--arrivata .sp-route-line {
  background: linear-gradient(90deg, var(--ch-4), var(--ch-6));
  animation: none;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-visible .sp-route--arrivata .sp-route-line { transform: none; }

/* I contatti erano un pannello semitrasparente: l'ultimo riquadro rimasto.
   Adesso sono righe con un filetto, come tutto il resto della pagina. */
.pg-contact .pg-contact-details {
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 0;
  padding: 0;
}
.pg-contact .pg-contact-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.15rem 0;
  align-items: center;
}
.pg-contact .cval { font-size: 17px; line-height: 1.5; }
.pg-contact .clabel { color: var(--ch-4); opacity: 0.85; }

/* --------------------------------------------------------------- Le superfici del browser */
/* Selezione, cursore, anello di focus, barra di scorrimento: sono parti della
   pagina che nessuno disegna, e restano quelle del browser — cioè di nessuno.
   Qui le prende la rampa, e la selezione segue il capitolo in lettura. */
::selection {
  background: color-mix(in srgb, var(--now) 26%, transparent);
}
:root {
  accent-color: var(--now);
  caret-color: var(--now);
  scrollbar-color: color-mix(in srgb, var(--ink) 34%, transparent) transparent;
}
:focus-visible {
  outline: 2px solid var(--now);
  outline-offset: 3px;
  border-radius: 2px;
}
.pg-section--dark :focus-visible,
.sp-invite :focus-visible,
.pg-contact :focus-visible { outline-color: var(--ch-4); }

/* I collegamenti nel testo: la sottolineatura non deve toccare le discendenti. */
.sp-prose a,
.pg-contact .cval a,
.pg-footer a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* Le cifre incolonnate: i numeri della banda e i dati dei contatti non devono
   ballare mentre il contatore sale. */
.pg-stat-num,
.sp-pezzo-num { font-variant-numeric: tabular-nums; }