:root {
  --teal-900: #141f1b;
  --teal-800: #283e37;
  --teal-700: #3c5d52;
  --teal-600: #507c6d;
  --teal-500: #639c89;
  --teal-100: #e0ebe7;
  --teal-50: #eff5f3;

  --olive-500: #7daa55;
  --ochre-500: #c9a227;
  --gold-400: #eed144;
  --sandy-500: #f0780f;
  --wine-500: #c23e5e;
  --slate-500: #4a7291;

  --ink: #17211d;
  --paper: #fbfaf7;

  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reveal allo scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Reveal più marcato per le immagini delle feature-row: sale di più e
   cresce leggermente, ma senza mai superare la dimensione naturale (max
   scale 1) — così non può sconfinare sul testo accanto, a differenza
   dello zoom continuo di prima. */
.feature-row__visual.reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.92);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.feature-row__visual.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.feature-row__content.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.feature-row__content.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .feature-row__visual.reveal,
  .feature-row__content.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection {
  background: var(--gold-400);
  color: var(--teal-900);
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(251, 250, 247, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav__logo img {
  height: 40px;
}

.nav__toggle {
  position: relative;
  z-index: 41;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav__toggle[aria-expanded="true"] span:first-child {
  transform: translateY(4.25px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-4.25px) rotate(-45deg);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  transition: opacity 0.2s ease;
}

.nav__link:hover { opacity: 0.6; }

.nav__cta {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--teal-900);
  color: #fff !important;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.nav__cta:hover {
  opacity: 0.78;
}

@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .nav__links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0 32px;
    background: var(--paper);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .nav__links.is-open {
    transform: translateX(0);
  }

  .nav__link {
    width: 100%;
    padding: 18px 0;
    font-size: 1.4rem;
    border-bottom: 1px solid var(--teal-100);
  }

  .nav__cta {
    margin-top: 20px;
  }
}

@media (min-width: 768px) {
  .nav { padding: 28px 56px; }
  .nav__logo img { height: 70px; }
  .nav__toggle { display: none; }
}

/* Con la voce "Staff" il menu orizzontale non ci sta più con 28px tra le
   voci sotto i 1280px (tablet orizzontale, portatili piccoli). Solo col menu
   orizzontale: il tablet verticale fino a 1024px usa l'hamburger. */
@media (min-width: 768px) and (max-width: 1279px) and (orientation: landscape),
       (min-width: 1025px) and (max-width: 1279px) {
  .nav__links { gap: 18px; }
}

/* Tablet verticale: navbar si comporta come su mobile (bottone hamburger) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .nav__toggle { display: flex; }
}

/* ---------- Hero ---------- */

.hero-track {
  position: relative;
  height: 150vh;
}

.hero {
  position: sticky;
  top: 0;
  /* 100vh su Safari iOS è l'altezza col toolbar già ritratto: appena la
     pagina si carica (toolbar visibile) il fondo, col pulsante Accedi,
     finisce nascosto dietro la barra. 100dvh segue l'altezza visibile
     reale — vh resta come fallback per i browser senza supporto dvh. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 24px 96px;
  color: var(--ink);
  background: var(--paper);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--paper);
}

.hero__icon-link {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Dimensione legata all'altezza dello schermo (il tetto 300px vale solo
     da mobile: da 768px in su la regola sotto lo sovrascrive a 480px). */
  width: clamp(220px, 32vh, 300px);
  height: clamp(220px, 32vh, 300px);
  width: clamp(220px, 32dvh, 300px);
  height: clamp(220px, 32dvh, 300px);
  display: block;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.hero__icon {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__icon circle {
  transition: fill 0.2s ease;
}

.hero__icon-link:hover .hero__icon circle {
  fill: var(--teal-600);
}

@media (max-width: 767px) {
  .hero__icon-link {
    pointer-events: none;
  }
}

@media (min-width: 768px) {
  .hero__icon-link {
    width: 480px;
    height: 480px;
  }
}

.hero__cover {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__reveal-preview {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  pointer-events: none;
}

.hero__reveal-preview .about__eyebrow,
.hero__reveal-preview .about__title {
  margin: 0 0 16px;
  max-width: 40ch;
}

.hero__reveal-preview .about__eyebrow {
  font-size: 1.15rem;
  letter-spacing: 0.1em;
}

.hero__reveal-preview .about__title {
  font-size: clamp(2.2rem, 6vw, 4rem);
  text-transform: uppercase;
}

.hero__intro {
  position: relative;
  z-index: 1;
  align-self: flex-start;
}

.hero__title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
}

.hero__cta {
  margin-top: 28px;
}

.hero__corner {
  position: relative;
  z-index: 1;
  max-width: 280px;
  will-change: transform, opacity;
}

.hero__corner-scroll {
  display: block;
  margin-bottom: 28px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero__corner-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.hero__corner-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--teal-800);
}

/* Le regole mobile stanno DOPO le regole base di .hero__corner* apposta:
   stessa specificità (singola classe) di quelle base più sotto nel file
   avrebbe vinto la cascata e azzerato silenziosamente tutto questo blocco
   anche in mobile — già successo una volta qui. */
@media (max-width: 767px) {
  /* Il titolo in mix-blend-mode sopra al cerchio era pensato per il
     desktop, dove il cerchio è più piccolo rispetto al testo: su mobile
     il cerchio (dimensioni fisse) domina e si sovrappone in modo confuso.
     Qui deve restare visibile solo il pulsante Accedi. */
  .hero__title {
    display: none;
  }

  /* Il cerchio non è più centrato a metà schermo (era la causa reale della
     sovrapposizione col testo, che invece resta ancorato in fondo): spostato
     più in alto, le due zone restano separate per costruzione su qualunque
     altezza mobile, non per un margine calcolato al millimetro. */
  .hero__icon-link {
    top: 38%;
  }

  /* Testo e bottone più in basso rispetto al padding base (96px): il cerchio
     ora è più in alto e lascia spazio, mantenendo comunque un minimo di
     margine dal fondo (gesture bar iPhone). */
  .hero {
    padding-bottom: 64px;
  }

  /* Solo mobile: il pulsante Accedi scende sotto al blocco "La piattaforma
     italiana per mense..." invece di stare sopra — .hero è già un flex
     column, quindi basta l'ordine visivo, senza toccare il markup (e senza
     toccare il desktop, che resta con Accedi per primo). */
  .hero__intro {
    order: 2;
  }

  .hero__corner {
    order: 1;
    margin-top: 24px;
  }

  .hero__corner-scroll {
    display: none;
  }
}

@media (min-width: 768px) {
  .hero {
    justify-content: flex-end;
    padding: 160px 56px 64px;
  }

  .hero__corner {
    position: absolute;
    right: 56px;
    bottom: 56px;
    text-align: right;
  }

  /* Solo da desktop in su: il testo bianco con mix-blend-mode a riposo
     (icona piccola, sfondo chiaro dietro) risultava troppo poco leggibile
     — qui lo sostituiamo con un colore pieno. La versione mobile resta
     quella originale, su richiesta esplicita. */
  .hero__title {
    max-width: 16ch;
    color: var(--teal-900);
    mix-blend-mode: normal;
  }
}

/* ---------- Showcase (prodotto, dopo l'intro con zoom) ---------- */

.showcase {
  position: relative;
  overflow: hidden;
  padding: 100px 24px;
  background: var(--paper);
}

.showcase__blob {
  position: absolute;
  top: -18%;
  right: -18%;
  width: 70vw;
  max-width: 620px;
  height: 70vw;
  max-height: 620px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Sfumatura + blur vivono nello ::before, non sul contenitore: così
   .showcase__blob può ospitare un figlio reale (l'icona di settore,
   vedi .sector-page__mark) senza che il blur sfochi anche quello —
   il filter si applica solo alla box su cui è impostato, non ai
   fratelli nel DOM. */
.showcase__blob::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-400), var(--sandy-500) 60%, transparent 75%);
  opacity: 0.16;
  filter: blur(40px);
}

@media (max-width: 1023px) {
  /* Sotto i 1024px .showcase resta overflow:hidden (da 1024px in su
     diventa overflow:visible, vedi sotto, ed è per questo che lì il
     problema non si vede). Con l'offset negativo originale, o con
     top:0, il bordo della sezione tagliava il cerchio proprio nella
     zona ancora "piena" del gradiente (il centro è al 30%/30% del
     riquadro, non al centro), lasciando una linea netta invece di una
     dissolvenza. Spostando il cerchio più in basso, il margine sfumato
     dal blur si esaurisce prima di arrivare al bordo della sezione.
     Vale sia per tablet che per mobile; non tocca il desktop. */
  .showcase__blob {
    top: 110px;
    right: -10%;
    width: 90vw;
    height: 90vw;
  }
}

.showcase__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.showcase__eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.showcase__title {
  margin: 0 0 20px;
  max-width: 16ch;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--teal-900);
}

.showcase__lead {
  margin: 0 0 32px;
  max-width: 44ch;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--teal-800);
}

.showcase__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.showcase__secondary-cta {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal-900);
  transition: opacity 0.2s ease;
}

.showcase__secondary-cta:hover {
  opacity: 0.6;
}

.showcase__media {
  display: flex;
  justify-content: center;
}

.showcase__visual {
  /* Senza una larghezza esplicita, dentro il flex di .showcase__media il
     browser può calcolare la dimensione minima automatica in base alla
     larghezza intrinseca dell'immagine (qui piatti-board.webp, ~1912px,
     rapporto ~6:1) invece che allo spazio disponibile: su mobile la card
     collassava a pochi px, lasciando visibile solo il primo dei tre puntini
     decorativi di .feature-shot::before (gli altri due, disegnati più a
     destra via box-shadow, finivano tagliati dall'overflow:hidden). */
  width: 100%;
  max-width: 560px;
  transform: rotate(-1.2deg);
  box-shadow: 0 30px 60px -20px rgba(20, 31, 27, 0.28);
}

@media (min-width: 768px) {
  .showcase {
    padding: 130px 56px;
  }
}

/* Solo sulla hero di /locali: il contenuto è centrato verticalmente in
   un'area quasi a tutto schermo, invece di stare incollato in alto con
   dello spazio vuoto sotto — così il blocco successivo non "sbircia" già
   dal primo schermo, ma il contenuto scende con lui invece di lasciare
   un vuoto. Non tocca la showcase della home, che resta com'era. */
.showcase--tall {
  display: flex;
  align-items: center;
  min-height: 85vh;
}

@media (min-width: 768px) {
  .showcase--tall {
    min-height: 88vh;
  }
}

@media (min-width: 1024px) {
  .showcase__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
  }

  .showcase__content {
    flex: 1 1 480px;
  }

  .showcase__media {
    flex: 1 1 480px;
    min-width: 0;
    justify-content: flex-end;
  }

  .showcase__visual {
    transform: rotate(-2deg);
  }

  /* Solo da desktop in su (su mobile resta come nell'ultimo commit): la
     banner della home è larghissima (rapporto ~6:1) e può sporgere oltre
     il bordo destro della sezione invece di restare schiacciata nella
     colonna di testo. Ancorata a sinistra apposta: essendo più larga
     della sua colonna, con flex-end si estenderebbe verso sinistra sopra
     il testo invece che verso destra fuori dallo schermo. Non tocca
     /locali, che non ha .feature-shot in questo contenitore. */
  .showcase {
    overflow: visible;
  }

  .showcase__visual.feature-shot {
    max-width: none;
    overflow: visible;
  }

  .showcase__visual.feature-shot img {
    width: min(1400px, 82vw);
    max-width: none;
  }

  .showcase__media:has(.showcase__visual.feature-shot) {
    justify-content: flex-start;
  }
}

/* Render fotorealistico con ombra già incorporata nell'immagine: niente
   rotazione o box-shadow aggiuntivi, altrimenti si somma un'ombra finta
   sopra quella vera del render. */
.showcase__visual--render {
  transform: none;
  box-shadow: none;
}

.showcase__visual--render img {
  display: block;
  width: 100%;
  height: auto;
}

/* Solo per il render multi-device della hero di /work: più largo del
   telefono singolo di /locali, quindi ha bisogno di più spazio nella
   colonna. Non tocca .showcase__visual--render di base. */
@media (min-width: 1024px) {
  .showcase__media--wide {
    flex: 1.3 1 560px;
  }

  .showcase__visual--devices {
    max-width: 760px;
  }

  /* Foto d'ambiente in orizzontale (es. schermo in sala su /prodotto/schermi):
     più larga della card verticale di default, altrimenti nella hero alta
     resta piccola e sproporzionata rispetto alla colonna. */
  .showcase__visual--landscape {
    max-width: 820px;
  }
}

/* Hero "impilata": testo centrato sopra, immagine grande a tutta larghezza
   sotto invece che stretta in una colonna affiancata al testo — pensata per
   contenuti in orizzontale (schermi, dashboard) dove la colonna hero classica
   li fa sembrare piccoli e sproporzionati. Rompe volutamente la larghezza
   standard delle altre sezioni: qui l'immagine deve poter essere grande. */
.showcase--stacked .showcase__inner {
  max-width: 1400px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.showcase--stacked .showcase__content {
  max-width: 640px;
  margin: 0 auto;
}

.showcase--stacked .showcase__title {
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}

.showcase--stacked .showcase__lead {
  margin-left: auto;
  margin-right: auto;
}

.showcase--stacked .showcase__actions {
  justify-content: center;
}

.showcase--stacked .showcase__media {
  width: 100%;
  margin-top: 8px;
}

.showcase__visual--flat {
  width: 100%;
  max-width: 1300px;
}

.showcase__visual--flat img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 40px 80px -32px rgba(20, 31, 27, 0.32);
}

/* ---------- Trust bar ---------- */

.trust-bar {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-top: 1px solid var(--teal-100);
  border-bottom: 1px solid var(--teal-100);
  padding: 40px 24px;
}

.trust-bar__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.trust-bar__item {
  text-align: center;
}

.trust-bar__value {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--teal-900);
}

.trust-bar__label {
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--teal-700);
}

@media (min-width: 768px) {
  .trust-bar__inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .trust-bar__item {
    position: relative;
  }

  .trust-bar__item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--teal-100);
  }
}

/* ---------- About ---------- */

.about {
  position: relative;
  z-index: 1;
  background: var(--paper);
  padding: 120px 24px;
  scroll-margin-top: 130px;
  opacity: 0;
  transform: translateY(70px);
  will-change: transform, opacity;
}

.about__inner {
  max-width: 1040px;
  margin: 0 auto;
}

.about__eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.about__title {
  margin: 0 0 20px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--teal-900);
}

.about__text {
  margin: 0 0 64px;
  max-width: 60ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--teal-800);
}

.about__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about__grid-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about__card {
  padding-top: 24px;
  border-top: 2px solid var(--teal-100);
}

/* Stabilizza il livello compositato prima dell'animazione di reveal —
   senza, alcuni browser (Safari/iOS in testa) rasterizzano lo screenshot
   dentro leggermente più morbido durante/dopo la transizione. */
.about__card--feature {
  will-change: transform;
}

.about__card-index {
  display: block;
  margin-bottom: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sandy-500);
}

.about__card h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--teal-900);
}

.about__card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--teal-700);
}

@media (min-width: 768px) {
  /* 1 e 2 impilate a sinistra, 3 (il mockup telefono) a destra — flexbox
     invece di grid: "stretch" fa combaciare l'altezza della card 3 con
     quella reale della colonna di sinistra, senza calcoli impliciti che
     possono lasciare spazio vuoto in fondo. */
  .about__grid {
    flex-direction: row;
    align-items: stretch;
  }

  .about__grid-col {
    flex: 1;
  }

  .about__card--feature {
    flex: 1.15;
    display: flex;
    flex-direction: column;
  }

  /* Cresce per riempire lo spazio: parte in alto, allineato all'immagine
     della card 1, e il testo finisce in basso, allineato al testo della
     card 2 (la colonna a sinistra). */
  .about__card--feature .feature-shot--render {
    flex: 1;
    align-items: center;
    justify-content: center;
  }

  .about__card--feature .feature-shot--render img {
    width: 100%;
    max-width: 500px;
    height: auto;
  }
}

/* Continuazione testuale 04→06 sotto alle 3 card con foto: niente immagine
   né icona, solo numero/titolo/testo come nelle card sopra, così si legge
   come un proseguimento della stessa sequenza e non un blocco a sé. */
.about__more {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .about__more {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Ecosistema ---------- */

.ecosystem {
  position: relative;
  z-index: 1;
  background: var(--teal-50);
  padding: 100px 24px;
  scroll-margin-top: 130px;
}

.ecosystem__inner {
  max-width: 1040px;
  margin: 0 auto;
}

.ecosystem__eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.ecosystem__title {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--teal-900);
}

.ecosystem__text {
  margin: 0;
  max-width: 60ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--teal-800);
}

.ecosystem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

.ecosystem__card {
  padding: 32px 28px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px -18px rgba(20, 31, 27, 0.14);
}

.ecosystem__card-index {
  display: block;
  margin-bottom: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sandy-500);
}

.ecosystem__card h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--teal-900);
}

.ecosystem__card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--teal-700);
}

@media (min-width: 768px) {
  .ecosystem__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Settori ---------- */

.sectors {
  position: relative;
  z-index: 1;
  background: var(--teal-50);
  padding: 100px 24px;
  scroll-margin-top: 130px;
}

.sectors__inner {
  max-width: 1040px;
  margin: 0 auto;
}

.sectors__eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.sectors__title {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--teal-900);
}

.sectors__text {
  margin: 0;
  max-width: 60ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--teal-800);
}

.sectors__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

@media (min-width: 640px) {
  .sectors__grid { grid-template-columns: repeat(2, 1fr); }
}

.ecosystem__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  color: var(--teal-600);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Card orizzontale: icona a sinistra su tutta l'altezza, contenuto a
   destra — non più una torre verticale. Il colore pieno del settore vive
   solo nel chip dell'icona, non più sparso sull'intera card: resta
   riconoscibile a colpo d'occhio ma concentrato, non diffuso. */
.sectors__card {
  --accent: var(--teal-600);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 24px;
  border-radius: 20px;
  border: 1px solid #ece7db;
  background: var(--paper);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.45s ease;
  box-shadow: 0 10px 28px -16px rgba(20, 31, 27, 0.14);
}

.sectors__card--locali { --accent: var(--teal-500); }
.sectors__card--edu { --accent: var(--ochre-500); }
.sectors__card--work { --accent: var(--slate-500); }
.sectors__card--med { --accent: var(--olive-500); }
.sectors__card--care { --accent: var(--sandy-500); }
.sectors__card--sagre { --accent: var(--sandy-500); }
.sectors__card--catering { --accent: var(--wine-500); }

.sectors__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--accent) 50%, transparent);
}

.sectors__icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--accent);
}

.sectors__card .sectors__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sectors__card-body {
  flex: 1;
  min-width: 0;
}

.sectors__card-body h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--teal-900);
}

/* Link vero e proprio solo sul titolo (anchor text corto e pertinente per
   SEO/screen reader) esteso a tutta la card con lo pseudo-elemento: la
   card intera resta cliccabile come prima, cambia solo cosa "conta" come
   testo del link. .sectors__card ha position:relative apposta per questo. */
.sectors__card-title-link {
  color: inherit;
  text-decoration: none;
}

.sectors__card-title-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.sectors__card-body p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--teal-700);
}

.sectors__card-link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- CTA section (home + pagine settore) ---------- */

.cta-button {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 999px;
  background: var(--teal-900);
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.cta-button:hover {
  opacity: 0.78;
}

.cta-section {
  position: relative;
  z-index: 1;
  background: var(--teal-50);
  padding: 100px 24px;
  text-align: center;
  scroll-margin-top: 130px;
}

.cta-section__eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.cta-section__title {
  margin: 0 auto 16px;
  max-width: 24ch;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--teal-900);
}

.cta-section__text {
  margin: 0 auto 36px;
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--teal-800);
}

/* ---------- Pagine settore ---------- */

/* Identità di settore: stesso --accent già usato per la card in home
   (vedi .sectors__card--*), applicato ai punti della pagina settore dove
   un colore si nota DAVVERO — striscia sotto la nav (fissa, sempre in
   vista), badge con icona nell'eyebrow, bottone CTA, tinta diffusa sulla
   hero — invece di un blob decorativo in alto a destra: primo tentativo,
   ma lì finisce quasi del tutto coperto dallo screenshot del telefono
   (verificato con uno screenshot reale), quindi di fatto invisibile.
   Scoping tramite .sector-page sul <body>: le pagine senza questa classe
   (home compresa, che condivide le stesse classi .showcase__eyebrow/
   .sector-features) restano identiche a oggi.

   --accent è il colore "vero" della card, usato solo per fondi grandi e
   diluiti (blob, tinta della hero) dove un po' di desaturazione non è un
   problema. --accent-ink è la stessa tinta impastata con --teal-900 in
   percentuale diversa PER SETTORE: il giallo di Edu o l'arancio di Sagre,
   usati puri come testo bianco-su-colore o colore-su-paper, cadono sotto
   2:1 di contrasto (illeggibili); il verde di Locali o il blu di Work
   invece reggono quasi da soli. Ogni --accent-ink qui sotto è calibrato
   per restare sopra 4.5:1 (AA) nel proprio caso peggiore. Va sempre
   --accent-ink ovunque ci sia testo o un bottone pieno; --accent va bene
   solo per sfondi/blob a bassa opacità. */
.sector-page--locali {
  --accent: var(--teal-500);
  --accent-ink: color-mix(in srgb, var(--accent) 72%, var(--teal-900));
}

.sector-page--work {
  --accent: var(--slate-500);
  --accent-ink: color-mix(in srgb, var(--accent) 85%, var(--teal-900));
}

.sector-page--edu {
  --accent: var(--ochre-500);
  --accent-ink: color-mix(in srgb, var(--accent) 60%, var(--teal-900));
}

.sector-page--med {
  --accent: var(--olive-500);
  --accent-ink: color-mix(in srgb, var(--accent) 62%, var(--teal-900));
}

.sector-page--sagre {
  --accent: var(--sandy-500);
  --accent-ink: color-mix(in srgb, var(--accent) 62%, var(--teal-900));
}

.sector-page--catering {
  --accent: var(--wine-500);
  --accent-ink: color-mix(in srgb, var(--accent) 80%, var(--teal-900));
}

.sector-page .nav {
  border-bottom: 3px solid var(--accent-ink);
}

/* Tinta diffusa su tutta la hero, non un blob isolato: si vede ovunque
   il contenuto lasci spazio (dietro il badge, ai bordi, sotto il testo),
   invece di dipendere da dove capita di finire uno screenshot. Qui va
   bene --accent puro: è un fondo grande e molto diluito verso --paper,
   non testo. */
.sector-page .showcase--tall {
  background: radial-gradient(ellipse 85% 65% at 12% 8%, color-mix(in srgb, var(--accent) 28%, var(--paper)), var(--paper) 62%);
}

/* Il bottone principale è il posto più efficace per far "leggere" il
   colore: è grande, saturo, compare due volte nella pagina (hero e CTA
   finale). */
.sector-page .cta-button {
  background: var(--accent-ink);
}

.sector-page .showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--paper));
  color: var(--accent-ink);
}

.sector-page .showcase__eyebrow-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sector-page .sector-features__eyebrow,
.sector-page .sector-features__icon {
  color: var(--accent-ink);
}

.sector-page .sector-features__item {
  border-top-color: color-mix(in srgb, var(--accent) 35%, var(--paper));
}

.sector-page .showcase__blob::before {
  opacity: 0.22;
  background: radial-gradient(circle at 30% 30%, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--teal-900)) 60%, transparent 75%);
}

.sector-features {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 24px 110px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

.sector-features__item {
  padding-top: 24px;
  border-top: 2px solid var(--teal-100);
}

.sector-features__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  color: var(--teal-600);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sector-features__eyebrow {
  margin: 0 0 32px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
  grid-column: 1 / -1;
}

/* Righe in evidenza (oggi solo su /locali, non tocca le altre pagine
   settore): screenshot reale + testo, alternati, per le 1-2 funzioni più
   "da vedere" — le altre restano nella lista compatta sotto. */
.feature-rows {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

.feature-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 40px 0;
  text-align: center;
}

.feature-row__content h2 {
  margin: 0 0 14px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--teal-900);
}

.feature-row__content p {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--teal-700);
}

.feature-row__media {
  width: 100%;
}

.feature-row__visual {
  will-change: transform;
}

/* Larghezze fisse per fascia (non percentuali/flex): con un valore
   definito in px, margin:0 auto centra in modo inequivocabile in
   qualunque browser — senza calcoli ambigui su contenitori che si
   restringono intorno al contenuto.
   Selettore doppio .feature-shot--render.feature-row__visual img (non solo
   .feature-row__visual img) apposta: la regola condivisa .feature-shot--render
   img più avanti nel foglio ha la STESSA specificità di un singolo-classe +
   tag, quindi vincendo per ordine sovrascriveva silenziosamente questa —
   era la vera causa per cui nessuna delle modifiche precedenti aveva
   effetto. Il doppio-classe alza la specificità e chiude la questione. */
.feature-shot--render.feature-row__visual img {
  display: block;
  width: 260px;
  height: auto;
  margin: 0 auto;
}

.feature-shot--render.feature-row__visual--phone img {
  width: 200px;
}

@media (min-width: 480px) {
  .feature-shot--render.feature-row__visual img {
    width: 400px;
  }

  .feature-shot--render.feature-row__visual--phone img {
    width: 260px;
  }
}

@media (min-width: 900px) {
  .feature-shot--render.feature-row__visual img {
    width: 500px;
  }

  .feature-shot--render.feature-row__visual--phone img {
    width: 340px;
  }
}

@media (min-width: 900px) {
  .feature-row {
    flex-direction: row;
    text-align: left;
    gap: 64px;
    padding: 56px 0;
  }

  .feature-row--reverse {
    flex-direction: row-reverse;
  }

  .feature-row__media {
    flex: 1.15;
    min-width: 0;
  }

  .feature-row__content {
    flex: 0.85;
    min-width: 0;
  }

  .feature-row__content p {
    margin: 0;
  }
}

.sector-features__item h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--teal-900);
}

.sector-features__item p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--teal-700);
}

/* FAQ di settore: stesso accordion (.faq__group-title/.faq__item) della
   pagina /faq.html generale, definito in faq.css — qui solo il contenitore,
   più stretto delle altre sezioni per restare leggibile come testo lungo. */
.sector-faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 24px 90px;
}

/* Cornice "browser": i tre pallini usano i colori del brand invece del
   classico rosso/giallo/verde, così anche questo dettaglio è riconoscibile. */
.feature-shot {
  position: relative;
  margin-bottom: 16px;
  padding: 26px 10px 0;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--teal-100);
  box-shadow: 0 16px 40px -14px rgba(20, 31, 27, 0.18);
  overflow: hidden;
}

.feature-shot::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sandy-500);
  box-shadow: 16px 0 0 var(--gold-400), 32px 0 0 var(--teal-500);
}

.feature-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}

/* Bezel sottilissimo e uniforme, raggio molto grande ("squircle") e Dynamic
   Island piccola e inserita nello schermo, non nel bezel — i tre dettagli
   che fanno davvero la differenza tra "telefono generico" e iPhone. */
.feature-shot--phone {
  max-width: 220px;
  margin: 0 auto 16px;
  padding: 4px 7px;
  border-radius: 46px;
  background: #1c1c1e;
  border: none;
  box-shadow: 0 20px 44px -16px rgba(20, 31, 27, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.feature-shot--phone::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 13px;
  left: 50%;
  width: 30%;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  box-shadow: none;
}

.feature-shot--phone img {
  position: relative;
  border-radius: 39px;
}

/* Render fotorealistico già completo di device e ombra: nessuna cornice
   CSS aggiuntiva, solo dimensione e centratura. */
.feature-shot--render {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-shot--render img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .sector-features { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* ---------- Footer ---------- */

.footer {
  background: var(--teal-900);
  color: rgba(255, 255, 255, 0.85);
  padding: 64px 24px 32px;
}

.footer__top {
  max-width: 1040px;
  margin: 0 auto 48px;
}

.footer__logo {
  height: 32px;
  filter: invert(1);
  margin-bottom: 16px;
}

.footer__tagline {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  max-width: 32ch;
}

.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.footer__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.footer__cols {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__col h3 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-100);
}

.footer__col > a {
  display: inline-block;
  padding: 6px 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}

.footer__col > a:hover { color: #fff; }

.footer__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer__cta {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid #fff;
  background: #fff;
  color: var(--teal-900) !important;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer__cta:hover {
  background: transparent;
  color: #fff !important;
}

.footer__cta--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff !important;
}

.footer__cta--ghost:hover {
  background: #fff;
  color: var(--teal-900) !important;
  border-color: #fff;
}

.footer__bottom {
  max-width: 1040px;
  margin: 24px auto 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Cookie banner ---------- */

.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px;
  background: var(--teal-900);
  color: var(--paper);
  box-shadow: 0 -8px 24px rgba(20, 31, 27, 0.25);
}

.cookie-banner__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(251, 250, 247, 0.85);
}

.cookie-banner__link {
  color: var(--paper);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
}

.cookie-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 9px 22px;
  border-radius: 999px;
  border: 1.5px solid #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cookie-banner__btn--primary {
  background: #fff;
  color: var(--teal-900);
}

.cookie-banner__btn--primary:hover {
  background: transparent;
  color: #fff;
}

.cookie-banner__btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.cookie-banner__btn--ghost:hover {
  background: #fff;
  color: var(--teal-900);
}

@media (min-width: 768px) {
  .cookie-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18px 56px;
  }
}

/* ---------- Fascia prodotti stile Kanpla (pagine settore con più servizi) ---------- */

.product-strip {
  max-width: 1800px;
  margin: 0 auto;
  padding: 100px 32px;
  scroll-margin-top: 130px;
}

.product-strip__eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.product-strip__title {
  margin: 0 0 40px;
  max-width: 46ch;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--teal-900);
}

.product-strip__viewport {
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.product-strip__grid {
  display: flex;
  gap: 16px;
}

.product-strip__card {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
}

.product-strip__card--clone {
  display: none;
}

@media (max-width: 899px) {
  .product-strip__viewport {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .product-strip__viewport::-webkit-scrollbar {
    display: none;
  }

  .product-strip__grid {
    width: max-content;
  }

  .product-strip__card--clone {
    display: block;
  }

  .product-strip__card {
    width: 62vw;
    max-width: 260px;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .product-strip__card { width: 34vw; max-width: 280px; }
}

@media (min-width: 900px) {
  .product-strip__grid {
    display: grid;
    grid-template-columns: repeat(var(--product-strip-cols, 5), 1fr);
    gap: 36px;
  }
}

.product-strip__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}

@media (max-width: 899px) {
  .product-strip__nav {
    display: flex;
  }
}

.product-strip__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--teal-100);
  border-radius: 999px;
  background: #fff;
  color: var(--teal-900);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.product-strip__arrow:hover {
  background: var(--teal-50);
}

.product-strip__arrow:active {
  transform: scale(0.94);
}

.product-strip__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 899px) {
  .product-strip__arrow {
    display: none;
  }
}

.product-strip__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-strip__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--teal-100);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.product-strip__dot.is-active {
  width: 22px;
  background: var(--teal-600);
}

.product-strip__media {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 18px;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid #ece7db;
  background: var(--teal-50);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-strip__card:hover .product-strip__media {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(20, 31, 27, 0.24);
}

.product-strip__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-strip__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  color: var(--teal-600);
  background: repeating-linear-gradient(135deg, var(--teal-50), var(--teal-50) 10px, #f3efe4 10px, #f3efe4 20px);
}

.product-strip__placeholder svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-strip__placeholder span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 6px;
}

.product-strip__label {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--teal-900);
}

.product-strip__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sandy-500);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- Prodotti correlati (fondo pagine /prodotto/*) ---------- */

.related-products {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 64px;
  text-align: center;
}

.related-products__title {
  margin: 0 0 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.related-products__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.related-products__link {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #ece7db;
  background: var(--paper);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--teal-800);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.related-products__link:hover {
  border-color: var(--teal-500);
  color: var(--teal-900);
}

/* Hero placeholder per prodotti senza ancora uno screenshot reale (es. totem, schermi) */

.showcase__visual--placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
}

.showcase__visual--placeholder .product-strip__placeholder {
  border-radius: 24px;
}

.showcase__visual--placeholder .product-strip__placeholder svg {
  width: 64px;
  height: 64px;
}

.showcase__visual--placeholder .product-strip__placeholder span {
  font-size: 0.8rem;
}

.feature-row__visual--placeholder .product-strip__placeholder {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  border-radius: 20px;
}

.feature-row__visual--placeholder .product-strip__placeholder svg {
  width: 48px;
  height: 48px;
}

/* Link dentro a testo descrittivo (lead, paragrafi, titoli funzione): il reset
   globale `a` sopra li rende invisibili, quindi qui si marcano esplicitamente
   in grassetto e sottolineati, così si riconoscono come link anche nel mezzo
   di una frase. */
.showcase__lead a,
.feature-row__content p a,
.sector-features__item p a,
.sector-features__item h2 a {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.showcase__lead a:hover,
.feature-row__content p a:hover,
.sector-features__item p a:hover,
.sector-features__item h2 a:hover {
  opacity: 0.7;
}

/* ---------- Form richiesta demo (/richiedi-demo) ---------- */

.demo-intro {
  max-width: 640px;
  margin: 0 auto;
  padding: 140px 24px 40px;
  text-align: center;
}

.demo-form-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

.demo-form {
  background: var(--paper);
  border: 1px solid #ece7db;
  border-radius: 24px;
  box-shadow: 0 20px 48px -24px rgba(20, 31, 27, 0.18);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .demo-form {
    padding: 36px;
  }
}

.demo-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 560px) {
  .demo-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.demo-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* Un <select> con opzioni lunghe (es. "Prodotto: Schermi e menu digitale")
     ha una larghezza minima intrinseca basata sul testo più lungo: senza
     azzerarla, sballa la griglia 1fr/1fr della riga anche se le due colonne
     sono nominalmente uguali. */
  min-width: 0;
}

.demo-form__field label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal-900);
}

.demo-form__field .demo-form__optional {
  font-weight: 500;
  color: var(--teal-600);
}

.demo-form__field input,
.demo-form__field select,
.demo-form__field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--teal-900);
  background: #fff;
  border: 1px solid #ece7db;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.demo-form__field textarea {
  resize: vertical;
  min-height: 70px;
}

/* I select nativi hanno un'altezza/padding diversa da un input testuale a
   parità di CSS (chrome del sistema operativo): appearance:none + freccia
   disegnata a mano li riporta alla stessa identica altezza degli altri campi. */
.demo-form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23507c6d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.demo-form__field input:focus,
.demo-form__field select:focus,
.demo-form__field textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-500) 25%, transparent);
}

.demo-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.demo-form__submit {
  border: none;
  cursor: pointer;
  width: 100%;
}

.demo-form__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.demo-form__status {
  display: none;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.demo-form__status.is-visible {
  display: block;
}

.demo-form__status--success {
  background: var(--teal-50);
  color: var(--teal-800);
}

.demo-form__status--error {
  background: #fdecec;
  color: #9a2f2f;
}

/* Nastro "Coming soon" che scorre in loop, dietro al totem (immagine già a
   sfondo trasparente: il nastro si vede nei vuoti intorno alla sagoma).
   Solo CSS, nessun JS: due copie identiche della sequenza, l'animazione
   trasla di -50% così il loop non ha soluzione di continuità. */
.coming-soon-banner {
  position: absolute;
  top: 210px;
  left: -10%;
  width: 120%;
  z-index: 0;
  overflow: hidden;
  background: var(--sandy-500);
  box-shadow: 0 8px 24px -8px rgba(20, 31, 27, 0.35);
  padding: 18px 0;
  transform: rotate(-3deg);
  pointer-events: none;
}

.coming-soon-banner__track {
  display: flex;
  width: max-content;
  animation: coming-soon-scroll 16s linear infinite;
}

.coming-soon-banner__track span {
  flex-shrink: 0;
  padding: 0 18px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

@keyframes coming-soon-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .coming-soon-banner__track {
    animation: none;
  }
}

/* Sotto i 1024px il contenuto della hero è impilato (testo sopra, immagine
   sotto) invece che affiancato: la versione sovrapposta/ruotata pensata per
   "passare dietro" al device in orizzontale qui finirebbe sopra al testo,
   illeggibile. Sotto quella soglia si nasconde questa e si mostra invece
   .coming-soon-banner--mobile: non più un overlay dentro alla hero, ma una
   fascia vera e propria nel flusso normale della pagina — nav, poi nastro,
   poi il resto — così non si sovrappone mai a nulla. */
@media (max-width: 1023px) {
  .coming-soon-banner {
    display: none;
  }
}

.coming-soon-banner--mobile {
  display: none;
}

@media (max-width: 1023px) {
  .coming-soon-banner--mobile {
    display: block;
    position: static;
    width: 100%;
    margin-top: 84px;
    box-shadow: none;
    background: var(--sandy-500);
    padding: 14px 0;
    overflow: hidden;
    transform: none;
  }

  .coming-soon-banner--mobile .coming-soon-banner__track {
    animation-duration: 12s;
  }

  .coming-soon-banner--mobile .coming-soon-banner__track span {
    padding: 0 14px;
    font-size: 0.88rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .coming-soon-banner--mobile {
    margin-top: 142px;
  }
}

/* La macchia sfumata di .showcase__blob parte vicino al bordo della
   sezione su tablet/mobile (vedi sopra): prima si confondeva con la
   navbar sovrapposta, ora che c'è il nastro subito sopra risalta come
   una chiazza a sé, staccata dal resto della pagina. La si toglie solo
   dove c'è il nastro. */
@media (max-width: 1023px) {
  .coming-soon-banner--mobile ~ main .showcase__blob {
    display: none;
  }
}

/* Badge "in arrivo" accanto all'eyebrow della hero (es. /prodotto/totem) */

.showcase__eyebrow-badge {
  flex-shrink: 0;
  margin-left: 10px;
  padding: 4px 10px 3px;
  border-radius: 999px;
  background: var(--sandy-500);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}