/* ==========================================================================
   NODE Agency — override di design
   Caricato DOPO il CSS del build: tutte le modifiche di palette e
   presentazione stanno qui, il CSS generato non viene toccato.
   Contiene la parte della Patch C non applicata dal builder:
   palette ambra, sezione network con i loghi, visual del Metodo,
   alleggerimento delle cornici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE — l'accento passa da blu ad ambra
   Regola di leggibilità: l'ambra chiara si usa come riempimento, come linea
   o come testo SU FONDO SCURO. Sui fondi chiari il testo usa --accent-ink
   (ocra scura, contrasto 5.4:1 sul crema), mai l'ambra chiara.
   -------------------------------------------------------------------------- */
:root {
  --accent: #f2b233;        /* ambra: fill, linee, testo su fondo scuro */
  --accent-strong: #d99a1f; /* ambra profonda: punti, bordi, dettagli */
  --accent-ink: #8a5a12;    /* ocra: testo piccolo su fondo chiaro */
  --accent-ink-lg: #b87d0a; /* ambra scura: titoli grandi su fondo chiaro */
  --accent-soft: #fdf3e2;   /* tinta calda per fondi tenui */
  --blue: var(--accent);
  --blue-soft: var(--accent-soft);
  --blue-light: var(--accent);
}

/* 1a. Testo d'accento su fondo CHIARO → ocra leggibile */
.section-label > span,
.service-row__number,
.service-row li:before,
.before-after span,
.before-after > i,
.method-list li > span,
.method-card__number,
.method-page__sequence span,
.principles article > span,
.faq summary > span,
.demo-progress button > span,
.demo-form legend span,
.detail-body li span,
.not-found > span,
.legal-content aside small,
.sector-page__modules li span,
.systems-page__functions li span,
.systems-os__custom > span,
.systems-os__verticals-heading > span,
.websites-block li span,
.capability-grid a > span,
.equipment-strip li span,
.dooh-card > div > span,
.marketing-activities li span {
  color: var(--accent-ink);
}

/* Titoli grandi su fondo chiaro: ambra piu accesa, resta leggibile */
.hero h1 em,
.method-page__opening h2 em {
  color: var(--accent-ink-lg);
}

/* 1b. Testo d'accento su fondo SCURO → ambra piena */
.systems-page__hero h1 em,
.systems-page__interface h2 em,
.systems-page__heading h2 em,
.demo-hero h1 em,
.systems-page__principles a:hover,
.method-page__visual em,
.site-footer a:hover {
  color: var(--accent);
}

/* 1c. Sottolineature di navigazione: servono da affordance, quindi ocra */
.desktop-nav a:after,
.desktop-solutions > button:after {
  background: var(--accent-ink);
}

/* 1d. Punti, pallini ed elementi grafici minuti su fondo chiaro */
.eyebrow > span,
.signal-line i,
.hero__visual-meta span:before,
.legal-sections li:before {
  background: var(--accent-strong);
}

/* 1e. Grandi blocchi pieni: restano NERI, l'ambra è l'accento non il fondo.
   Un fondo giallo a tutta pagina con testo bianco sarebbe illeggibile
   e visivamente aggressivo: il nero regge il testo, l'ambra fa il resto. */
.contact,
.project-cta,
.detail-contact,
.systems-page__final,
.deliverable-strip,
.demo-form__submit {
  background: var(--black);
}
.deliverable-strip li {
  border-color: #ffffff4d;
}

/* 1f. Stati hover e conferme: qui l'ambra lavora come riempimento,
   sempre con testo nero sopra (contrasto 10.5:1) */
.button:hover {
  color: #fff;
  background:
    radial-gradient(125% 165% at 82% 0%, #f2b23396 0%, #f2b2332e 42%, #f2b2330a 68%, #0000 84%),
    linear-gradient(158deg, #3b2b0d 0%, #120f0a 62%);
  border-color: #f2b233b0;
}
.button--light:hover {
  color: #fff;
  background:
    radial-gradient(140% 190% at 78% 0%, #f2b2338c 0%, #f2b23330 44%, #f2b2330a 70%, #0000 86%),
    #0000;
  border-color: #f2b233b0;
}
.button--outline-light:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.service-row:hover > a,
.capability-grid a:hover {
  color: var(--black);
  background: var(--accent);
  border-color: var(--accent);
}
.capability-grid a:hover > span,
.capability-grid a:hover strong,
.capability-grid a:hover i {
  color: var(--black);
}
.demo-success-toast__mark {
  color: var(--black);
  background: var(--accent);
}
.skip-link {
  color: var(--white);
  background: var(--black);
}
.demo-privacy input:checked,
.demo-form .needs-select input:checked,
.inbox-filter button.is-active {
  border-color: var(--accent-strong);
  background: var(--accent);
}
.desktop-solutions > div a:hover {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

/* --------------------------------------------------------------------------
   2. SEZIONE NETWORK — loghi al posto dei nomi, nessuna cornice
   I nomi restano nel DOM (aria-label + testo) per accessibilità e SEO:
   vengono solo nascosti visivamente e sostituiti dal logo.
   -------------------------------------------------------------------------- */
.network-section {
  border-top: 1px solid var(--line);
  background: var(--warm);
}
.network-grid {
  border: 0;
  gap: 0 clamp(24px, 4vw, 64px);
  margin-top: clamp(48px, 6vw, 88px);
}
.network-card {
  border: 0;
  gap: clamp(20px, 3vw, 34px);
  min-height: 0;
  padding: clamp(20px, 2.6vw, 34px) 0;
  justify-content: flex-start;
}
.network-section--extended .network-card {
  min-height: 0;
}
.network-card:hover {
  color: inherit;
  background: none;
}

/* Il logo prende il posto del nome */
.network-card__wordmark {
  color: transparent;
  font-size: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  min-height: 68px;
}
.network-card__logo {
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 46px;
  object-fit: contain;
  object-position: left center;
  opacity: 0.88;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Marchi quasi quadrati: correzione ottica, altezza maggiore */
.network-card__logo--square {
  max-width: 90px;
  max-height: 66px;
}
.network-card:hover .network-card__logo {
  opacity: 1;
  transform: translateY(-2px);
}

/* Partner senza file logo: il nome resta, impaginato come lockup tipografico */
.network-card__wordmark--text {
  color: var(--black);
  letter-spacing: -0.03em;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
}

.network-card__role {
  color: var(--accent-ink);
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 700;
}
.network-card p {
  color: #0b0b0c99;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
}
.network-card i {
  color: #0b0b0c5c;
  top: 4px;
  right: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}
.network-card:hover i {
  color: var(--accent-ink);
  transform: translate(3px, -3px);
}

@media (max-width: 900px) {
  .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
  }
  .network-card,
  .network-section--extended .network-card {
    min-height: 0;
    padding: 22px 0;
  }
  .network-card__wordmark {
    min-height: 52px;
  }
  .network-card__logo {
    max-width: 132px;
    max-height: 36px;
  }
  .network-card__logo--square {
    max-width: 70px;
    max-height: 52px;
  }
  .network-card p {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   3. VISUAL DEL METODO — filamenti che raccolgono le parole
   Al centro il marchio NODE con "STRATEGIA". Le parole arrivano a distanze
   diverse e alternate; quando i filamenti le agganciano si allineano tutte
   alla stessa distanza dal centro.
   -------------------------------------------------------------------------- */
.method-visual {
  background-image: none;
  border: 0;
  min-height: 0;
  margin-top: clamp(24px, 3vw, 52px);
  overflow: visible;
}
.method-visual .mr {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  font-family: "Manrope Variable", sans-serif;
}
/* Due composizioni: radiale sul largo, verticale sullo stretto.
   Su schermo piccolo la radiale ridurrebbe il testo a 8px: illeggibile. */
.method-visual .mr--wide {
  max-width: 980px;
}
.method-visual .mr--tall {
  display: none;
  max-width: 460px;
}
@media (max-width: 760px) {
  .method-visual .mr--wide { display: none; }
  .method-visual .mr--tall { display: block; }
}

/* Nucleo: marchio e lockup */
.mr-core {
  opacity: 0;
  transform: scale(0.9);
  transform-origin: 500px 392px;
  transition: opacity 0.8s ease, transform 1s var(--ease);
}
.is-organized .mr-core {
  opacity: 1;
  transform: none;
}

/* Filamenti: si tracciano dal centro verso la parola */
.mr-rope {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.85s var(--ease);
  transition-delay: calc(0.55s + var(--i) * 0.16s);
}
.is-organized .mr-rope {
  stroke-dashoffset: 0;
}

/* Il punto luminoso in cui il filamento aggancia la parola */
.mr-dot {
  opacity: 0;
  transition: opacity 0.45s ease;
  transition-delay: calc(1.15s + var(--i) * 0.16s);
}
.is-organized .mr-dot {
  opacity: 1;
}

/* Le parole: da distanze diverse a distanza uguale */
.mr-word {
  opacity: 0;
  transform: translate(var(--dx), var(--dy));
  transition: opacity 0.6s ease, transform 0.95s var(--ease);
  transition-delay: calc(1.05s + var(--i) * 0.16s);
}
.is-organized .mr-word {
  opacity: 1;
  transform: none;
}

@media (max-width: 620px) {
  .method-visual .mr { max-width: none; }
  .mr-rope { transition-delay: calc(0.35s + var(--i) * 0.09s); }
  .mr-word { transition-delay: calc(0.6s + var(--i) * 0.09s); }
  .mr-dot { transition-delay: calc(0.68s + var(--i) * 0.09s); }
}

@media (prefers-reduced-motion: reduce) {
  .mr-core, .mr-rope, .mr-dot, .mr-word {
    transition: none !important;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   3b. HEADER — solo le scritte, colore che si inverte sullo sfondo
   Via la barra opaca allo scroll: resta il menu, che diventa bianco sulle
   sezioni scure e torna nero su quelle chiare.
   -------------------------------------------------------------------------- */
.site-header,
.site-header--solid {
  background: none;
  border-color: #0000;
  -webkit-backdrop-filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.site-header .brand,
.site-header .desktop-nav a,
.site-header .desktop-solutions > button,
.site-header .menu-toggle {
  transition: color 0.28s ease, border-color 0.28s ease;
}
.brand__mark,
.brand__wordmark {
  transition: filter 0.28s ease;
}

html.hdr-dark .site-header .brand,
html.hdr-dark .site-header .desktop-nav a,
html.hdr-dark .site-header .desktop-solutions > button {
  color: #fff;
}
html.hdr-dark .site-header .brand__mark,
html.hdr-dark .site-header .brand__wordmark {
  filter: invert(1);
}
html.hdr-dark .site-header .menu-toggle {
  border-color: #ffffff4d;
}
html.hdr-dark .site-header .menu-toggle span {
  background: #fff;
}
html.hdr-dark .site-header .desktop-nav a:after,
html.hdr-dark .site-header .desktop-solutions > button:after {
  background: var(--accent);
}
/* con il menu mobile aperto vince la regola del menu */
.site-header--menu-open .brand,
.site-header--menu-open .desktop-nav a {
  color: #fff;
}

/* --------------------------------------------------------------------------
   3c. PULSANTE "Raccontaci il progetto" — sfumato come i blocchi scuri
   -------------------------------------------------------------------------- */
.button {
  background:
    radial-gradient(130% 170% at 84% 6%, #f2b23340 0%, #f2b2330d 38%, #0000 66%),
    linear-gradient(158deg, #221a0a 0%, #0b0b0c 58%);
  border: 1px solid #f2b23352;
  color: #fff;
}
.button:hover {
  color: #fff;
  background:
    radial-gradient(125% 165% at 82% 0%, #f2b23396 0%, #f2b2332e 42%, #f2b2330a 68%, #0000 84%),
    linear-gradient(158deg, #3b2b0d 0%, #120f0a 62%);
  border-color: #f2b233b0;
}
/* variante sui fondi scuri: solo sfumatura e bordo, nessun blocco bianco */
.button--light {
  background:
    radial-gradient(140% 190% at 80% 0%, #f2b23336 0%, #f2b2330f 40%, #0000 68%),
    #0000;
  border: 1px solid #f2b2335c;
  color: #fff;
}
.button--light:hover {
  color: #fff;
  background:
    radial-gradient(140% 190% at 78% 0%, #f2b2338c 0%, #f2b23330 44%, #f2b2330a 70%, #0000 86%),
    #0000;
  border-color: #f2b233b0;
}
.button--outline-light {
  border-color: #f2b23359;
}

/* --------------------------------------------------------------------------
   4. ALLEGGERIMENTO DELLE CORNICI
   Meno riquadri chiusi, più spazio e linee sottili.
   -------------------------------------------------------------------------- */
.capability-grid {
  border: 0;
  gap: 0 clamp(20px, 3vw, 48px);
}
.capability-grid a {
  border-right: 0;
  border-bottom: 1px solid var(--line);
  min-height: 0;
  padding: clamp(22px, 2.4vw, 32px) 0;
}
.systems-os__custom {
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  padding: clamp(28px, 3vw, 42px) 0 0;
}
.dooh-card {
  border-width: 0 0 1px;
}
.method-card {
  border-width: 0 0 1px;
}
.equipment-strip li {
  border: 0;
  padding-left: 0;
}

/* --------------------------------------------------------------------------
   5. "NODE" evidenziato nel testo
   Su fondo chiaro l'ambra come testo è illeggibile: si usa l'ocra della
   palette, con un peso maggiore per farla risaltare.
   -------------------------------------------------------------------------- */
.brand-accent {
  color: var(--accent-ink);
  font-style: normal;
  font-weight: 620;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   6. BLOCCO CTA — sfumatura ambra dentro il nero
   -------------------------------------------------------------------------- */
.project-cta,
.detail-contact {
  background:
    radial-gradient(120% 140% at 88% 8%, #f2b23330 0%, #f2b2330f 34%, #0000 62%),
    linear-gradient(160deg, #1a1508 0%, #0b0b0c 46%),
    var(--black);
  position: relative;
  overflow: hidden;
}
.project-cta:after,
.detail-contact:after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -40%;
  width: 46%;
  min-width: 320px;
  aspect-ratio: 1;
  background: radial-gradient(circle, #f2b2332e 0%, #f2b2330a 45%, #0000 70%);
  border-radius: 50%;
  pointer-events: none;
}
.project-cta > *,
.detail-contact > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   8. RIFINITURE
   -------------------------------------------------------------------------- */
::selection {
  color: var(--black);
  background: var(--accent);
}
:focus-visible {
  outline-color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   9. HEADER — si nasconde scorrendo in giu, torna scorrendo in su
   Con l'header trasparente non c'e piu una barra opaca a coprire cio che
   passa sotto: le etichette di sezione finivano sopra il logo. Nascondere
   l'header nella direzione di lettura risolve senza rinunciare alla
   trasparenza.
   -------------------------------------------------------------------------- */
.site-header {
  transition: transform 0.42s var(--ease), opacity 0.3s ease;
  will-change: transform;
}
html.hdr-hidden .site-header {
  transform: translateY(-104%);
  opacity: 0;
  pointer-events: none;
}
/* col menu mobile aperto l'header resta sempre visibile */
html.hdr-hidden .site-header--menu-open,
html.hdr-hidden body[data-menu-open] .site-header {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   10. FRECCE — su iOS il carattere freccia diventa emoji colorata
   Forza la resa testuale: la freccia prende il colore del testo accanto.
   -------------------------------------------------------------------------- */
.site-header i,
.button span,
.button i,
.service-row > a,
.capability-grid a i,
.network-card i,
.sector-tile i,
.detail-body i,
.method-page__sequence,
.before-after > i,
.systems-page__principles a,
.dooh-card i,
.marketing-activities i,
.site-footer i,
.hero__actions a span,
a[href] > span[aria-hidden="true"],
i[aria-hidden="true"] {
  font-variant-emoji: text;
  -webkit-font-variant-emoji: text;
  font-family: "Inter Variable", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   11. HOME — sezioni che vivono meglio nelle pagine dedicate
   Nascoste qui in attesa di essere spostate nel sorgente: i quattro settori
   hanno le proprie pagine, e il progetto Clinic appartiene alla sua.
   -------------------------------------------------------------------------- */
.verticals.section-pad,
.clinic-work.section-pad {
  display: none;
}

/* --------------------------------------------------------------------------
   12. IMMAGINE DEL PONTE — su mobile meno cartolina
   A pieno margine, taglio verticale piu stretto e didascalia leggibile:
   diventa un'apertura editoriale invece di una foto incorniciata.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hero__visual {
    aspect-ratio: auto;
    border-left: 0;
    border-right: 0;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    margin-top: 38px;
  }
  .hero__visual img {
    aspect-ratio: 1.15;
    height: auto;
    object-position: 62% center;
  }
  .hero__visual:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: linear-gradient(to top, #0b0b0cb8, #0b0b0c00);
    pointer-events: none;
  }
  .hero__visual figcaption {
    left: 18px;
    right: 18px;
    bottom: 16px;
    max-width: none;
    font-size: 12px;
    color: #fff;
  }
  .hero__visual-meta {
    inset: 16px 18px auto;
    color: #ffffffc4;
  }
}

/* --------------------------------------------------------------------------
   13. CONTRASTO — /sistemi: paragrafo nero su fondo nero
   Il build assegnava color:#0b0b0ca3 a un testo che sta su fondo scuro.
   È la voce narrante di NODE: chiara e in corsivo.
   -------------------------------------------------------------------------- */
.systems-page__hero-grid > p {
  color: #ffffffa8;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   14. ATTIVITÀ DELLE CARD METODO — via i rettangolini
   I bordi davano un'aria da modulo burocratico: restano le parole, separate
   da un punto ambra.
   -------------------------------------------------------------------------- */
.method-card summary ul {
  gap: 10px 26px;
  margin-top: 24px;
}
.method-card summary li {
  color: #0b0b0c8f;
  letter-spacing: 0.02em;
  border: 0;
  align-items: center;
  gap: 9px;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}
.method-card summary li:before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent-strong);
  border-radius: 50%;
  flex: none;
}

/* --------------------------------------------------------------------------
   16. HERO — l'immagine apre, il claim segue
   -------------------------------------------------------------------------- */
.hero__grid {
  display: flex;
  flex-direction: column;
}
.hero__grid > .hero__visual {
  order: -1;
  margin-top: 0;
  margin-bottom: clamp(44px, 5vw, 80px);
  /* da bordo a bordo, uscendo dal contenitore centrato */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-left: 0;
  border-right: 0;
  aspect-ratio: auto;
  height: clamp(420px, 76vh, 780px);
}
.hero__grid > .hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  aspect-ratio: auto;
}
/* Le etichette in alto scendono sotto la barra del menu, cosi non si
   sovrappongono al logo e alle voci. */
.hero__grid > .hero__visual .hero__visual-meta {
  inset: clamp(88px, 11vh, 124px) clamp(20px, 4vw, 44px) auto;
}
.hero__grid > .hero__visual figcaption {
  left: clamp(20px, 4vw, 44px);
  right: clamp(20px, 4vw, 44px);
  bottom: clamp(18px, 3vh, 30px);
  max-width: 520px;
}

@media (max-width: 760px) {
  .hero__grid > .hero__visual {
    height: clamp(320px, 52vh, 460px);
    margin-bottom: 34px;
  }
  .hero__grid > .hero__visual img {
    aspect-ratio: auto;
  }
  .hero__grid > .hero__visual .hero__visual-meta {
    inset: 76px 18px auto;
    font-size: 8px;
  }
}

/* --------------------------------------------------------------------------
   17. APERTURA — il marchio compare e sfuma
   -------------------------------------------------------------------------- */
.node-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #0b0b0c;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.node-intro img:first-child {
  width: clamp(64px, 7.5vw, 92px);
  height: auto;
  animation: nodeIntroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.node-intro img:last-child {
  width: clamp(124px, 14vw, 182px);
  height: auto;
  animation: nodeIntroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
@keyframes nodeIntroIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}
.node-intro.is-out {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   19. RESA — le sezioni fuori schermo non vengono disegnate finche non servono
   -------------------------------------------------------------------------- */
.principles.section-pad,
.faq.section-pad,
.network-section.section-pad,
.project-cta.section-pad,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}

/* --------------------------------------------------------------------------
   20. PANNELLO SOLUZIONI — sempre leggibile
   Il pannello ha fondo crema anche quando l'header e in modalita chiara su
   sezione scura: senza questa regola le voci ereditavano il bianco e
   sparivano. Il colore del testo del pannello non dipende dallo sfondo.
   -------------------------------------------------------------------------- */
#desktop-solutions-panel a,
html.hdr-dark .site-header #desktop-solutions-panel a {
  color: var(--black);
}
#desktop-solutions-panel a:hover,
html.hdr-dark .site-header #desktop-solutions-panel a:hover {
  color: var(--accent-ink);
  background: var(--accent-soft);
}
#desktop-solutions-panel a.is-active,
html.hdr-dark .site-header #desktop-solutions-panel a.is-active {
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   21. SITI WEB — i tre formati diventano schede visive
   La lista esisteva gia con le tre voci giuste: qui prende un'immagine per
   ciascuna, senza toccare il markup. I mockup sono disegni astratti costruiti
   da zero, senza marchi: illustrano il tipo di lavoro, non lo spacciano per
   una schermata reale.
   -------------------------------------------------------------------------- */
.websites-block__grid {
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 34px);
}
.websites-block__grid > div:last-child > p {
  max-width: 780px;
  margin-top: 0;
}
.websites-block ul {
  border-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 38px);
  margin-top: clamp(38px, 4.2vw, 62px);
  display: grid;
}
.websites-block li {
  border-bottom: 0;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  font-size: clamp(19px, 1.7vw, 24px);
  display: block;
}
.websites-block li:before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 520 / 360;
  margin-bottom: 18px;
  background: #fff center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}
.websites-block li:nth-child(1):before { background-image: url(/media/mock-vetrina.svg); }
.websites-block li:nth-child(2):before { background-image: url(/media/mock-landing.svg); }
.websites-block li:nth-child(3):before { background-image: url(/media/mock-ecommerce.svg); }
.websites-block li:hover:before {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px #0b0b0c1f;
}
.websites-block li span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-ink);
}

@media (max-width: 900px) {
  .websites-block ul {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .websites-block li:before {
    margin-bottom: 14px;
  }
}

/* --------------------------------------------------------------------------
   22. "NODE" nelle voci di menu
   Il wordmark del marchio e un disegno, non un font: riprodurlo con una
   maschera CSS si e rivelato fragile. Qui la parola resta testo vero, con la
   spaziatura ampia che richiama il lockup. Sempre leggibile, sempre cliccabile.
   -------------------------------------------------------------------------- */
.nav-wm {
  letter-spacing: 0.22em;
  font-weight: 500;
  padding-left: 0.1em;
}
.mobile-menu nav > a > .nav-wm {
  letter-spacing: 0.16em;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   23. Brief /demo: nota sui campi obbligatori
   Va nel primo step, non nella nav degli step: quella e sticky e il testo
   aggiunto li sopra collideva con l'header del sito.
   -------------------------------------------------------------------------- */
.demo-form fieldset:first-of-type::before {
  content: "I campi contrassegnati da * sono obbligatori; tutti gli altri sono facoltativi.";
  display: block;
  margin-bottom: 22px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(11, 11, 12, 0.6);
}

/* --------------------------------------------------------------------------
   24. Brief /demo: freccia giu nell'hero, stile classico (asta + punta)
   Ambra, sul lato destro della pagina sotto la colonna del paragrafo,
   con discesa lenta.
   -------------------------------------------------------------------------- */
.demo-hero .demo-hero__grid > div:last-child::before {
  content: "";
  display: block;
  width: 2px;
  height: 46px;
  margin-top: 42px;
  margin-left: 7px;
  background: var(--accent, #f2b233);
  animation: node-demo-arrow-stem 2.4s ease-in-out infinite;
}
.demo-hero .demo-hero__grid > div:last-child::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  margin-top: -12px;
  border-right: 2px solid var(--accent, #f2b233);
  border-bottom: 2px solid var(--accent, #f2b233);
  transform: rotate(45deg);
  animation: node-demo-arrow 2.4s ease-in-out infinite;
}
@keyframes node-demo-arrow {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; }
  50%      { transform: translateY(10px) rotate(45deg); opacity: 0.55; }
}
@keyframes node-demo-arrow-stem {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(10px); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-hero .demo-hero__grid > div:last-child::before,
  .demo-hero .demo-hero__grid > div:last-child::after { animation: none; }
}

/* --------------------------------------------------------------------------
   25. Brief /demo: gli step 01-04 si accendono appena lo step riceve dati
   Solo CSS (:has): la logica non tocca l'idratazione React. Criteri:
   01/02 un obbligatorio valido, un facoltativo compilato o un chip "needs"
   selezionato; 03 un facoltativo compilato; 04 la spunta privacy.
   -------------------------------------------------------------------------- */
.demo-form .demo-progress li button span {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.demo-form:has(fieldset:nth-of-type(1) [required]:valid) .demo-progress li:nth-child(1) button span,
.demo-form:has(fieldset:nth-of-type(1) [placeholder]:not(:placeholder-shown)) .demo-progress li:nth-child(1) button span,
.demo-form:has(input[name="needs"]:checked) .demo-progress li:nth-child(1) button span,
.demo-form:has(fieldset:nth-of-type(2) [required]:valid) .demo-progress li:nth-child(2) button span,
.demo-form:has(fieldset:nth-of-type(2) [placeholder]:not(:placeholder-shown)) .demo-progress li:nth-child(2) button span,
.demo-form:has(fieldset:nth-of-type(3) [placeholder]:not(:placeholder-shown)) .demo-progress li:nth-child(3) button span,
.demo-form:has(input[name="privacy"]:checked) .demo-progress li:nth-child(4) button span {
  background: var(--accent, #f2b233);
  border-color: var(--accent, #f2b233);
  color: #0b0b0c;
}

/* --------------------------------------------------------------------------
   26. Brief /demo: blocco "Di cosa hai bisogno" in nero/oro
   Stessa palette del bottone "Raccontaci il progetto": pannello scuro con
   bagliore ambra sul fondo, chip chiari, selezione piena in ambra.
   -------------------------------------------------------------------------- */
.demo-form .needs-select {
  background: linear-gradient(155deg, #0d0d0e 0%, #12100c 62%, #241a09 100%);
  border: 1px solid rgba(242, 178, 51, 0.4);
  box-shadow: inset 0 -46px 90px -50px rgba(242, 178, 51, 0.55);
  color: #f5f2ea;
}
.demo-form .needs-select > * { color: #f5f2ea; }
.demo-form .needs-select label {
  border: 1px solid rgba(245, 242, 234, 0.3);
  background: rgba(245, 242, 234, 0.05);
  color: #f5f2ea;
}
.demo-form .needs-select label:hover { border-color: var(--accent, #f2b233); }
.demo-form .needs-select label:has(input:checked) {
  background: var(--accent, #f2b233);
  border-color: var(--accent, #f2b233);
  color: #0b0b0c;
}
.demo-form .needs-select input[type="checkbox"] { accent-color: var(--accent, #f2b233); }

/* --------------------------------------------------------------------------
   26b. Brief /demo: contrasto dei chip "needs"
   Il tema base colora gli span dentro i label: senza questa regola il testo
   dei chip restava scuro sul pannello scuro.
   -------------------------------------------------------------------------- */
.demo-form .needs-select label span { color: #f5f2ea; }
.demo-form .needs-select label:has(input:checked) span { color: #0b0b0c; }

/* --------------------------------------------------------------------------
   27. /demo hero: sfumatura oro laterale
   Fondo nero che si apre verso la luce sul lato destro, come nelle creative
   e nei caroselli del brand.
   -------------------------------------------------------------------------- */
.demo-hero {
  background:
    radial-gradient(95% 120% at 108% 12%, rgba(242, 178, 51, 0.32) 0%, rgba(242, 178, 51, 0.10) 38%, rgba(242, 178, 51, 0) 62%),
    radial-gradient(70% 90% at 102% 85%, rgba(242, 178, 51, 0.10) 0%, rgba(242, 178, 51, 0) 60%),
    #0b0b0c;
}

/* --------------------------------------------------------------------------
   28. Hero home: etichette servizi sopra il ponte
   I quattro gruppi del nuovo nastro (al posto di Strategia/Sistemi/
   Contenuti/Crescita). Il testo originale resta nel DOM (React lo
   ripristinerebbe): qui viene azzerato e riscritto via ::after, con puntino
   ambra e spazio vero tra le voci — "Content e social" e "Display DOOH"
   respirano.
   -------------------------------------------------------------------------- */
.hero__visual-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 40px;
}
.hero__visual-meta span {
  font-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.hero__visual-meta span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #f2b233);
  flex: 0 0 auto;
  margin: 0;
}
.hero__visual-meta span::after {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.hero__visual-meta span:nth-child(1)::after { content: "SISTEMI OS"; }
.hero__visual-meta span:nth-child(2)::after { content: "SITI WEB\0000a0\0000a0·\0000a0\0000a0E-COMMERCE\0000a0\0000a0·\0000a0\0000a0LANDING PAGES"; }
.hero__visual-meta span:nth-child(3)::after { content: "CONTENT E SOCIAL"; }
.hero__visual-meta span:nth-child(4)::after { content: "DISPLAY DOOH\0000a0\0000a0·\0000a0\0000a0MARKETING E ADVERTISING"; }
@media (max-width: 900px) {
  .hero__visual-meta { gap: 10px 22px; justify-content: flex-start; }
  .hero__visual-meta span { white-space: normal; }
  .hero__visual-meta span::after { letter-spacing: 0.11em; }
}

/* --------------------------------------------------------------------------
   29. Intro di apertura (solo home)
   Sipario nero in due meta: il logo parte grande e si ritira, appare lo
   slogan, la linea ambra taglia il centro, poi le due meta si aprono verso
   l'alto e verso il basso. Overlay fuori dalla root React: idratazione
   intatta. Rispetta prefers-reduced-motion e va in scena una volta per
   sessione di navigazione.
   -------------------------------------------------------------------------- */
html.node-intro-lock { overflow: hidden; }
#node-intro { position: fixed; inset: 0; z-index: 2147483000; }
#node-intro .ni-panel {
  position: absolute; left: 0; width: 100%; height: 50.15%;
  background: #0b0b0c;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
#node-intro .ni-top { top: 0; }
#node-intro .ni-bottom { bottom: 0; }
#node-intro .ni-line {
  position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; margin-top: -1px;
  background: var(--accent, #f2b233);
  transform: scaleX(0); transform-origin: center;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1) .2s, opacity .35s ease;
}
#node-intro .ni-center {
  position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 16px;
  transform: scale(1.3);
  transition: transform .9s cubic-bezier(.33, 1, .68, 1), opacity .4s ease;
}
#node-intro .ni-mark { width: 92px; height: auto; }
#node-intro .ni-word { width: 156px; height: auto; }
#node-intro .ni-slogan {
  color: rgba(245, 242, 234, .88);
  font-family: 'Manrope Variable', Manrope, Arial, sans-serif;
  font-style: italic;
  font-size: 13px; font-weight: 650;
  letter-spacing: .22em; text-transform: uppercase; text-align: center;
  margin-top: 6px; opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease .45s, transform .5s ease .45s;
}
#node-intro.is-armed .ni-center { transform: scale(1); }
#node-intro.is-armed .ni-slogan { opacity: 1; transform: translateY(0); }
#node-intro.is-armed .ni-line { transform: scaleX(1); }
#node-intro.is-open .ni-top { transform: translateY(-101%); }
#node-intro.is-open .ni-bottom { transform: translateY(101%); }
#node-intro.is-open .ni-center,
#node-intro.is-open .ni-line { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #node-intro { display: none; } }

/* --------------------------------------------------------------------------
   30. /strategia — "Dal disordine al sistema"
   Stessa luce degli altri fondi neri: sfumatura oro dal lato destro.
   Le parole del visual (mercato, target, contenuti, acquisizione, dati...)
   passano a Manrope, il font della brand identity; il wordmark del logo
   resta un disegno (file immagine), non un font.
   -------------------------------------------------------------------------- */
.method-page__visual {
  background:
    radial-gradient(95% 120% at 108% 12%, rgba(242, 178, 51, 0.30) 0%, rgba(242, 178, 51, 0.10) 38%, rgba(242, 178, 51, 0) 62%),
    radial-gradient(70% 90% at 102% 85%, rgba(242, 178, 51, 0.10) 0%, rgba(242, 178, 51, 0) 60%),
    #0b0b0c;
}
.method-visual .mr-word text {
  font-family: 'Manrope Variable', Manrope, Arial, sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   31. /dooh — catalogo prodotti
   Le tre card esistenti vengono rinominate (Totem pubblicitari, Display a
   parete, Totem self service) e vestite con le foto reali; il link "Scheda
   prodotto" e la panoramica sotto l'hero arrivano da node-dooh-page.js.
   -------------------------------------------------------------------------- */
.dooh-grid .dooh-card h2 { font-size: 0; }
.dooh-grid .dooh-card h2::after {
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.015em;
}
.dooh-grid .dooh-card:nth-child(1) h2::after { content: "Totem pubblicitari"; }
.dooh-grid .dooh-card:nth-child(2) h2::after { content: "Display a parete"; }
.dooh-grid .dooh-card:nth-child(3) h2::after { content: "Totem self service"; }

.dooh-grid .dooh-card figure { background-position: center; background-size: cover; }
.dooh-grid .dooh-card:nth-child(1) figure { background-image: url(/media/dooh/totem-pubblicitario-front.webp); background-color: #fff; background-size: contain; background-repeat: no-repeat; }
.dooh-grid .dooh-card:nth-child(2) figure { background-image: url(/media/dooh/parete-contesto.webp); }
.dooh-grid .dooh-card:nth-child(3) figure { background-image: url(/media/dooh/self-service-front.webp); background-color: #fff; background-size: contain; background-repeat: no-repeat; }
.dooh-grid .dooh-card figure img { opacity: 0; }

.dooh-card.is-linked { cursor: pointer; }
.dooh-card.is-linked:hover h2::after { color: var(--accent-ink, #8a5a12); }
.dooh-card__link {
  display: inline-flex;
  margin-top: 14px;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-ink, #8a5a12);
  text-decoration: none;
  letter-spacing: .02em;
}
.dooh-card__link:hover { text-decoration: underline; }

/* La panoramica e una banda a larghezza piena SOPRA il titolo, col rapporto
   nativo dell'immagine: mai ritagliata, su nessuno schermo. Inserita da
   node-dooh-page.js prima dell'hero. */
.dooh-hero-band { margin: 0; }
.dooh-hero-band img { display: block; width: 100%; height: auto; }

/* 31b. /dooh — titolo dentro la panoramica (desktop)
   Didascalia sovrapposta nella fascia del marmo: Manrope, inchiostro, alone
   crema per staccare dai riflessi; dimensione agganciata alla larghezza
   dell'immagine. Il titolo React sotto viene nascosto; su schermi stretti
   la banda e troppo bassa e il titolo torna al suo posto sotto l'immagine. */
.dooh-lead { display: none; }

@media (min-width: 721px) {
  .dooh-hero-band { position: relative; }
  .dooh-hero-band::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 48%;
    background: linear-gradient(to top, rgba(8, 8, 9, 0.66) 0%, rgba(8, 8, 9, 0.32) 46%, rgba(8, 8, 9, 0) 100%);
    pointer-events: none;
  }
  .dooh-hero-band figcaption {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    width: min(78%, 1020px);
    text-align: center;
    font: 600 clamp(24px, 3.2vw, 64px)/1.06 'Manrope Variable', Manrope, Arial, sans-serif;
    letter-spacing: -0.025em;
    color: #f5f2ea;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
  }
  .service-page__hero.dooh-page__hero { display: none; }
  .dooh-lead {
    display: block;
    font-size: 17px;
    line-height: 1.65;
    max-width: 66ch;
    color: rgba(11, 11, 12, 0.72);
    margin: 14px 0 36px;
  }
}

/* 31c. Audit mobile (5/8): slogan dell'intro protetto sugli schermi stretti
   e link "Scheda prodotto" con area tocco piena (44px). */
#node-intro .ni-center { padding: 0 22px; }
#node-intro .ni-slogan { max-width: 92%; }
.dooh-card__link { min-height: 44px; align-items: center; }

/* 31d. Audit mobile: anche i form pubblici a 16px su schermi piccoli —
   iOS non zooma al focus (demo, contatti, qualunque input del sito). */
@media (max-width: 768px) {
  input, textarea, select { font-size: 16px; }
}

/* 32. Texture di marca: esplorata in demo (filamenti, nodi, tre tarature) e
   ritirata: su layout cosi testuali ogni trama ripetuta collide col contenuto.
   Il fondo crema resta pulito; i filamenti vivono nelle sezioni scure. */

/* --------------------------------------------------------------------------
   33. /sistemi — copy dell'hero piu concreto (demo)
   "Sistemi digitali che semplificano / il lavoro di ogni giorno."
   Sostituzione via pseudo-elementi: il testo React resta nel DOM.
   -------------------------------------------------------------------------- */
.systems-page__hero-grid h1 { font-size: 0; }
.systems-page__hero-grid h1::before {
  content: "Sistemi digitali\00000ache semplificano ";
  white-space: pre-line;
  font-size: clamp(54px, 6vw, 96px);
  letter-spacing: -0.035em;
}
.systems-page__hero-grid h1 em { font-size: 0; }
.systems-page__hero-grid h1 em::after {
  content: "il lavoro di ogni giorno.";
  font-size: clamp(54px, 6vw, 96px);
  letter-spacing: -0.035em;
}
@media (max-width: 760px) {
  .systems-page__hero-grid h1::before,
  .systems-page__hero-grid h1 em::after { font-size: clamp(56px, 11vw, 84px); }
}

/* 32b. Griglia quadrata originale: trovata e spenta (gradient+background-size).
   Escluso .admin-field select: quei gradient sono la freccia del menu. */
.account-access,
.detail-hero,
.hero,
.method-visual,
.service-page__hero {
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   34. Home: il ponte sale dietro al menu
   Il menu e gia fisso e trasparente: la striscia crema era la rincorsa
   dell'hero (padding) piu il margine della figure. Azzerate entrambe,
   il nastro etichette scende sotto la zona del menu.
   -------------------------------------------------------------------------- */
.hero { padding-top: 0; }
.hero .hero__visual { margin-top: 0; border-top: 0; }
.hero .hero__visual-meta { inset: 98px 24px auto; }
@media (max-width: 760px) {
  .hero .hero__visual-meta { inset: 86px 18px auto; }
}


/* --------------------------------------------------------------------------
   35. Audit responsive & cross-browser (14 agosto) — mandato prompt_patch
   Patch progressive: dove la feature moderna manca, resta il comportamento
   del tema; nessuna dipendenza esclusiva da API recenti.
   -------------------------------------------------------------------------- */

/* 35a. Menu mobile e consent layer: altezza dal viewport REALE di iOS.
   Il tema li fissa a 100vh (piu alti dello schermo con le barre Safari):
   qui 100svh — iOS 16 lo supporta — e il 100vh del tema resta il fallback. */
.mobile-menu, .consent-layer { height: 100svh; }
.mobile-menu { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

/* 35b. Scroll bloccato a menu aperto. Aggancio allo stato ARIA del bottone:
   se il tema gia lo gestisce e un doppione innocuo; il selettore resta
   inerte su desktop (il toggle vive solo su mobile). */
html:has(.menu-toggle[aria-expanded="true"]) { overflow: hidden; }

/* 35c. Hamburger: area tocco piena. */
.menu-toggle { min-width: 44px; min-height: 44px; }

/* 35d. Notch e Dynamic Island in landscape: header nel safe area. */
.site-header {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 35e. Titoli con a-capo bilanciati (progressive enhancement: dove
   text-wrap non e supportato non cambia nulla) e paragrafi che non
   sfondano mai il viewport con parole lunghe. */
h1, h2, h3 { text-wrap: balance; }
p { overflow-wrap: break-word; }

/* 35f. Font sempre in swap: ridichiaro le facce del tema con font-display
   (nel bundle solo una ce l'ha) — niente testo invisibile al primo paint. */
@font-face { font-family: 'Manrope Variable'; src: url(/assets/manrope-latin-wght-normal-DHIcAJRg.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Inter Variable'; src: url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }

/* 35g. Nastro voci servizi (punto 7 del mandato): alle larghezze intermedie
   i quattro gruppi compongono due righe ordinate invece di comprimersi;
   i gruppi restano interi, nessuna riduzione artificiale del corpo. */
@media (min-width: 761px) and (max-width: 1120px) {
  .hero__visual-meta {
    justify-content: flex-start;
    column-gap: 40px;
    row-gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   36. Mobile reale (screenshot iPhone 24/8) — /strategia e header
   -------------------------------------------------------------------------- */

/* 36a. Sequenza del metodo (Analisi -> Strategia -> Brand -> Sistemi ->
   Lancio -> Crescita): il bundle la forza in grid a 3 colonne con la
   centrale da 18px — BRAND e CRESCITA finivano impilati lettera per
   lettera. Ripristinato il flusso flex previsto, a ogni larghezza. */
.method-page__sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  grid-template-columns: none;
}
@media (max-width: 760px) {
  .method-page__sequence { gap: 10px 14px; font-size: 11px; }
}

/* 36b. Header sempre leggibile da telefono: fondo pieno costante, senza
   dipendere dal toggle JS dello scroll (su iOS puo mancare il colpo).
   Desktop invariato. */
@media (max-width: 760px) {
  .site-header {
    background: rgba(245, 244, 240, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(11, 11, 12, 0.08);
  }
  .hdr-dark .site-header {
    background: rgba(11, 11, 12, 0.86);
    border-bottom-color: rgba(245, 242, 234, 0.12);
  }
}

/* 36c v2 (26/8): il nastro resta SOPRA l'immagine anche su telefono — la
   versione statica di ieri collassava la geometria della figure (aspect
   ratio e altezze percentuali) e il ponte spariva. Leggibilita garantita
   dai chip: pillole crema traslucide con testo inchiostro, su ogni cielo. */
@media (max-width: 760px) {
  .hero .hero__visual-meta {
    position: absolute;
    inset: 86px 18px auto;
    padding: 0;
    justify-content: flex-start;
    gap: 8px;
  }
  .hero__visual-meta span {
    background: rgba(245, 244, 240, 0.88);
    padding: 5px 9px;
    border-radius: 999px;
  }
  .hero__visual-meta span::after { color: #0b0b0c; }
}

/* --------------------------------------------------------------------------
   37. Ricalibrazione tipografica desktop (26/8, richiesta Federico)
   La scala del sito urlava (display fino a 150px, paragrafi a 68px):
   massimali abbassati alla compostezza del documento interno — display
   fino a 96, sezioni 72, sottotitoli 52, lead 23-28 — mantenendo clamp,
   fluidita e gerarchia. Solo da 681px in su: il mobile resta com'e.
   ------------------------------------------------------------------------- */
@media (min-width: 681px) {
.demo-hero h1,
.detail-hero h1,
.hero h1,
.legal-hero h1,
.sector-index__hero h1,
.sector-page__hero h1,
.service-page__hero h1,
.systems-page__hero h1 {
  font-size: clamp(54px, 6vw, 96px);
}
.clinic-work h2,
.faq h2,
.manifesto h2,
.method h2,
.principles h2,
.section-heading h2,
.sector-page__cta h2,
.systems h2,
.systems-page__final h2,
.systems-page__functions h2,
.systems-page__heading h2,
.systems-page__interface h2 {
  font-size: clamp(44px, 4.8vw, 72px);
}
.composition-box h2,
.contact h2,
.detail-contact h2,
.dooh-system h2,
.hero h1,
.marketing-activities h2,
.method-page__closing h2,
.project-cta h2,
.sector-page__functions-heading h2,
.sector-page__live-heading h2,
.sector-page__modules h2,
.service-page__hero h1,
.service-split h2,
.systems-os__heading h2,
.systems-os__interface h2,
.websites-block h2 {
  font-size: clamp(40px, 4.2vw, 64px);
}
.demo-hero h1,
.detail-hero h1,
.network-section__heading h2,
.sector-tile h2,
.service-page__hero h1,
.service-row h3,
.vertical-card h3 {
  font-size: clamp(32px, 3.2vw, 52px);
}
.clinic-work h2,
.demo-brief aside h2,
.faq h2,
.hero h1,
.legal-sections h2,
.manifesto h2,
.marketing-activities li strong,
.method h2,
.method-card h3,
.method-list h3,
.mobile-solutions>button,
.principles h2,
.section-heading h2,
.sector-live-card h3,
.system-product h3,
.systems h2,
.systems-os__custom h3 {
  font-size: clamp(28px, 2.6vw, 44px);
}
.detail-body__lead,
.sector-page__logic article p {
  font-size: clamp(20px, 1.8vw, 28px);
}
.composition-box__grid>p,
.detail-hero__intro,
.manifesto__grid .lead,
.service-split__grid>p,
.systems-os__heading>p,
.websites-block__grid>div:last-child>p {
  font-size: clamp(18px, 1.5vw, 23px);
}
}

/* 37b. Ritmo verticale ricalibrato con la nuova scala (26/8, screenshot
   Federico): le stanze erano rimaste della misura dei titoli vecchi.
   Solo desktop; il titolo home sale di una taglia (e il manifesto del
   sito), "Il punto" si compone su due righe bilanciate. */
@media (min-width: 681px) {
  .section-pad { padding-block: clamp(72px, 8vw, 128px); }
  .hero__copy { padding-top: clamp(44px, 5vw, 76px); }
  .hero h1 { font-size: clamp(58px, 6.6vw, 108px); }
  .manifesto h2 { max-width: 15ch; }
  .manifesto__grid { margin-top: 44px; }
}

/* --------------------------------------------------------------------------
   38. Brand 2026 (7/9): nuovi SVG ufficiali in /media/brand. Le proporzioni
   dei nuovi tracciati (simbolo 1:1, wordmark 462:92) via aspect-ratio, senza
   toccare gli attributi width/height nel payload React. L'inversione sui
   fondi scuri resta quella del tema (filter: invert su .brand--inverse).
   -------------------------------------------------------------------------- */
.brand__mark { aspect-ratio: 1 / 1; }
.brand__wordmark { aspect-ratio: 462 / 92; }

/* --------------------------------------------------------------------------
   39. Tap target minimi (11/9): due elementi restavano a 42px di altezza,
   sotto la soglia di 44px per un tocco comodo col pollice.
   -------------------------------------------------------------------------- */
.button--small { min-height: 44px; }
.mobile-solutions > div a { min-height: 44px; }

/* --------------------------------------------------------------------------
   40. CTA header su mobile (11/9): "desktop-cta" spariva sotto i 680px,
   la demo restava raggiungibile solo aprendo il menu. Ora resta visibile
   come pulsante rotondo accanto all'hamburger: il testo del link resta
   invariato (accessibile per screen reader), solo nascosto alla vista;
   la freccia via ::after segue la stessa regola di escape a 6 cifre gia
   in uso nel file.
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .site-header__inner {
    grid-template-columns: 1fr auto auto;
    gap: 14px;
  }
  .site-header__actions {
    display: flex;
  }
  .desktop-cta {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    gap: 0;
  }
  .desktop-cta::after {
    content: "\002192";
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   42. HOME v3 (24/9) — "NODE, connessi a tutto."
   Richiesta di Federico: hero su fondo nero con il claim a tutta pagina e
   il nastro dei servizi che scorre sotto (riferimento: Delos Lab); via le
   sezioni superflue; i servizi subito dopo, con reveal d'immagine al
   passaggio del mouse (porting a mano di "Hover Image Reveal" di Originkit,
   vedi assets/node-home.js).
   Scope: main#contenuto senza classe = solo la home.
   Le sezioni tolte sono NASCOSTE, non cancellate dal markup: stanno sia
   nell'HTML sia nel payload RSC, e tagliarle a mano da entrambi rischia
   errori di idratazione. Per ripristinarne una basta togliere il selettore.
   -------------------------------------------------------------------------- */
main#contenuto:not([class]) > .manifesto,
main#contenuto:not([class]) > .systems,
main#contenuto:not([class]) > .method,
main#contenuto:not([class]) > .verticals,
main#contenuto:not([class]) > .principles {
  display: none !important;
}

/* 42a. Hero: fondo nero, claim enorme, niente ponte */
main#contenuto:not([class]) > .hero {
  background: #0b0b0c !important;
  color: #f5f4f0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 0 !important;
  border-top: 0;
}
main#contenuto:not([class]) > .hero .hero__grid {
  flex: 1;
  justify-content: center;
}
main#contenuto:not([class]) > .hero .hero__visual,
main#contenuto:not([class]) > .hero .hero__eyebrow,
main#contenuto:not([class]) > .hero .hero__intro,
main#contenuto:not([class]) > .hero .hero__actions {
  display: none !important;
}
main#contenuto:not([class]) > .hero .hero__copy {
  padding-top: clamp(120px, 16vh, 180px);
  padding-bottom: clamp(40px, 7vh, 80px);
}
main#contenuto:not([class]) > .hero .hero__headline-grid {
  display: block;
}
main#contenuto:not([class]) > .hero h1 {
  color: #f5f4f0 !important;
  font-family: 'Manrope Variable', Manrope, Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(56px, 11.2vw, 196px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase;
  max-width: none !important;
  margin: 0;
}
main#contenuto:not([class]) > .hero h1 em {
  display: block;
  font-style: normal;
  color: #f5f4f0 !important;
}
main#contenuto:not([class]) > .hero .hero__side {
  max-width: none;
  padding: 0;
  margin-top: clamp(28px, 4vh, 44px);
}
main#contenuto:not([class]) > .hero .hero__disciplines {
  color: rgba(245, 244, 240, 0.72) !important;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.14em;
  margin: 0;
}

/* 42b. Nastro dei servizi che scorre. Solo CSS, sul contenitore gia
   esistente .hero__index: nessun nodo aggiunto al DOM di React. Il testo
   e ripetuto due volte e trasla di -50%, cosi il giro e continuo. */
main#contenuto:not([class]) > .hero .hero__index {
  width: 100%;
  max-width: none;
  margin: 0;
  height: auto;
  padding: 22px 0;
  border-top: 1px solid rgba(245, 244, 240, 0.12);
  overflow: hidden;
  display: block;
  white-space: nowrap;
  position: relative;
}
main#contenuto:not([class]) > .hero .hero__index > span {
  display: none;
}
main#contenuto:not([class]) > .hero .hero__index::before {
  content: "SISTEMI OPERATIVI\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0SITI WEB\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0E-COMMERCE\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0CONTENT E SOCIAL\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0FOTO E VIDEO\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0DIGITAL DISPLAY E DOOH\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0MARKETING E ADV\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0SISTEMI OPERATIVI\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0SITI WEB\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0E-COMMERCE\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0CONTENT E SOCIAL\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0FOTO E VIDEO\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0DIGITAL DISPLAY E DOOH\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0MARKETING E ADV\0000a0\0000a0\0000a0\0000a0·\0000a0\0000a0\0000a0\0000a0";
  display: inline-block;
  color: rgba(245, 244, 240, 0.55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  animation: node-marquee 48s linear infinite;
  will-change: transform;
}
main#contenuto:not([class]) > .hero .hero__index:hover::before {
  animation-play-state: paused;
}
@keyframes node-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  main#contenuto:not([class]) > .hero .hero__index::before { animation: none; }
}

/* 42c. Servizi: stessa superficie nera dell'hero, titolo e vecchia lista
   nascosti SOLO quando il reveal e stato montato (:has). Se lo script non
   gira, resta la lista originale: la sezione non resta mai vuota. */
main#contenuto:not([class]) > #servizi {
  background: #0b0b0c !important;
  color: #f5f4f0;
  border-top: 0;
}
main#contenuto:not([class]) > #servizi:has(.node-reveal) .section-heading,
main#contenuto:not([class]) > #servizi:has(.node-reveal) .service-list {
  display: none !important;
}

.node-reveal {
  position: relative;
  padding-block: clamp(8px, 2vw, 24px);
}
.node-reveal__eyebrow {
  color: rgba(245, 244, 240, 0.55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.node-reveal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.1vw, 30px);
}
.node-reveal__item {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  color: #f5f4f0;
  text-decoration: none;
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
}
.node-reveal__item::after { display: none !important; }
.node-reveal__num {
  color: rgba(245, 244, 240, 0.4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  transform: translateY(-0.4em);
  transition: color 0.25s ease;
}
.node-reveal__roll {
  display: block;
  overflow: hidden;
  position: relative;
  /* tipografia del preset Originkit: Inter 400, interlinea 0.9em, -0.05em */
  font-family: 'Inter Variable', Inter, Arial, sans-serif;
  font-size: clamp(38px, 6.4vw, 104px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.node-reveal__roll > span {
  display: block;
  white-space: nowrap;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}
.node-reveal__roll > span + span {
  position: absolute;
  inset: 100% 0 auto 0;
}
.node-reveal__arrow {
  font-size: clamp(18px, 2vw, 28px);
  color: #f2b233;
  opacity: 0;
  transform: translate(-8px, 8px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.node-reveal.is-active .node-reveal__roll > span { color: #51565a; }
.node-reveal .node-reveal__item.is-hovered .node-reveal__roll > span {
  color: #f5f4f0;
  transform: translateY(-100%);
}
.node-reveal .node-reveal__item.is-hovered .node-reveal__num { color: #f2b233; }
.node-reveal .node-reveal__item.is-hovered .node-reveal__arrow {
  opacity: 1;
  transform: translate(0, 0);
}
.node-reveal__item:focus-visible {
  outline: 2px solid #f2b233;
  outline-offset: 6px;
}

/* immagine che segue il puntatore */
.node-reveal__float {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(240px, 22vw, 340px);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transform: translate3d(-9999px, 0, 0);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.node-reveal.is-active .node-reveal__float { opacity: 1; }
.node-reveal__slide {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.node-reveal__slide.is-before { transform: translateY(-100%); }
.node-reveal__slide.is-current { transform: translateY(0); }
.node-reveal__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.node-reveal__ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  box-sizing: border-box;
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(242, 178, 51, 0.35), transparent 60%),
    linear-gradient(160deg, #26272b, #0b0b0c);
  color: #f5f4f0;
  font-family: 'Manrope Variable', Manrope, Arial, sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
.node-reveal__thumb { display: none; }

/* Touch: niente hover, niente immagine che insegue. La miniatura sta
   nella riga, il link resta pieno. */
@media (hover: none), (max-width: 760px) {
  .node-reveal__float { display: none; }
  .node-reveal__item {
    width: 100%;
    align-items: center;
    padding-block: 10px;
    border-bottom: 1px solid rgba(245, 244, 240, 0.12);
    min-height: 44px;
  }
  .node-reveal__roll { font-size: clamp(30px, 8.4vw, 56px); flex: 1; }
  .node-reveal__roll > span { white-space: normal; }
  .node-reveal__arrow { opacity: 1; transform: none; }
  .node-reveal__thumb {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex: none;
    background: #26272b;
  }
}
@media (prefers-reduced-motion: reduce) {
  .node-reveal__roll > span,
  .node-reveal__slide,
  .node-reveal__float,
  .node-reveal__arrow { transition: none !important; }
}

/* --------------------------------------------------------------------------
   43. TENDINA "SOLUZIONI" (24/9) — da rettangolo con ombra pesante a
   pannello morbido che cresce dal suo pulsante.
   Tempi e curva dalla ricetta 05 "Menu dropdown" di transitions.dev
   (Jakub Antalik): 250ms in apertura, cubic-bezier(0.22, 1, 0.36, 1),
   scala di partenza 0.97. React monta/smonta il pannello (niente classe
   di stato sul pannello stesso), quindi l'ingresso e un'animazione al
   montaggio; la chiusura resta istantanea.
   -------------------------------------------------------------------------- */
:root {
  --dropdown-open-dur: 250ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.desktop-solutions > #desktop-solutions-panel {
  width: 300px;
  padding: 8px;
  gap: 2px;
  top: calc(100% + 10px);
  border-radius: 16px;
  border: 1px solid rgba(11, 11, 12, 0.08);
  background: rgba(245, 244, 240, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 40px -14px rgba(11, 11, 12, 0.28),
    0 4px 12px -6px rgba(11, 11, 12, 0.12);
  transform-origin: top center;
  animation: node-dropdown-in var(--dropdown-open-dur) var(--dropdown-ease) both;
}
.desktop-solutions > #desktop-solutions-panel a {
  border-radius: 10px;
  padding: 11px 14px;
  transition: background-color 150ms ease, color 150ms ease;
  animation: node-dropdown-item var(--dropdown-open-dur) var(--dropdown-ease) both;
}
.desktop-solutions > #desktop-solutions-panel a:nth-child(2) { animation-delay: 25ms; }
.desktop-solutions > #desktop-solutions-panel a:nth-child(3) { animation-delay: 50ms; }
.desktop-solutions > #desktop-solutions-panel a:nth-child(4) { animation-delay: 75ms; }
.desktop-solutions > #desktop-solutions-panel a:nth-child(5) { animation-delay: 100ms; }
.desktop-solutions > button > span {
  display: inline-block;
  transition: transform var(--dropdown-open-dur) var(--dropdown-ease);
}
.desktop-solutions.is-open > button > span { transform: rotate(180deg); }
@keyframes node-dropdown-in {
  from { opacity: 0; transform: translate(-50%, -4px) scale(var(--dropdown-pre-scale)); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes node-dropdown-item {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-solutions > #desktop-solutions-panel,
  .desktop-solutions > #desktop-solutions-panel a { animation: none; }
  .desktop-solutions > button > span { transition: none; }
}

/* --------------------------------------------------------------------------
   44. SETTORI ELIMINATI (24/9) — richiesta di Federico: via tutta la sezione.
   Voce tolta da menu desktop, menu mobile e footer; le pagine /settori/*
   reindirizzano alla home (vercel.json, redirect temporanei: reversibili)
   e sono fuori dalla sitemap. I file delle pagine restano nel repo.
   -------------------------------------------------------------------------- */
.site-header a[href="/settori"],
.mobile-menu a[href="/settori"],
.site-footer a[href^="/settori"],
.sector-use-strip {
  display: none !important;
}

/* --------------------------------------------------------------------------
   45. TENDINA A PASSAGGIO DEL MOUSE (24/9) — complemento di node-home.js.
   Ponte: il vuoto tra voce e pannello appartiene al pannello (::before),
   cosi il mouse non "esce" attraversandolo. Chiusura: dissolvenza 150ms
   (ricetta 05 transitions.dev, fase is-closing) prima che React smonti.
   -------------------------------------------------------------------------- */
#desktop-solutions-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}
.desktop-solutions > #desktop-solutions-panel.is-closing {
  animation: none;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.99);
  transition: opacity 150ms var(--dropdown-ease), transform 150ms var(--dropdown-ease);
  pointer-events: none;
}
.desktop-solutions > #desktop-solutions-panel.is-closing a { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .desktop-solutions > #desktop-solutions-panel.is-closing { transition: none; }
}

/* --------------------------------------------------------------------------
   46. PAGINE SOLUZIONI IN ALLESTIMENTO (24/9)
   /sistemi, /content, /dooh, /marketing: solo il titolo, a tutta pagina,
   come l'hero della home (nero, maiuscolo, peso leggero). Il contenuto
   originale e nascosto, non cancellato: si ripristina togliendo questa
   sezione e il blocco in node-home.js.
   -------------------------------------------------------------------------- */
main#contenuto:has(> .node-soon) > :not(.node-soon) {
  display: none !important;
}
main#contenuto > .node-soon {
  background: #0b0b0c !important;
  color: #f5f4f0;
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: clamp(120px, 16vh, 180px) 0 clamp(56px, 10vh, 120px) !important;
  margin: 0 !important;
  border-top: 0 !important;
}
.node-soon__eyebrow {
  color: rgba(245, 244, 240, 0.55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 clamp(20px, 3vh, 36px);
}
.node-soon__title {
  color: #f5f4f0;
  font-family: 'Manrope Variable', Manrope, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(52px, 10vw, 176px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   47. METODO NODE (24/9) — via "Cosa produciamo concretamente" (i chip dei
   deliverable). Nascosta, non cancellata.
   -------------------------------------------------------------------------- */
.deliverable-strip {
  display: none !important;
}

/* --------------------------------------------------------------------------
   48. GRAFICO "STRATEGIA NODE" (24/9) — geometria radiale e nuove transizioni
   Prima i fili partivano da due punti laterali invisibili (316/684,372):
   due ciuffi storti. Ora si irradiano da un anello attorno al marchio verso
   otto nodi su un'ellisse (geometria in MethodVisual-*.v2.js, rigenerata;
   stesso SVG nell'HTML statico di /strategia).
   Sequenza, tutta su transform/opacity/dashoffset (niente layout):
   nucleo che si mette a fuoco → fili tracciati dal centro → punti a rimbalzo
   → parole che entrano sfocate → a riposo, impulsi di luce lungo i fili e
   aloni che respirano. Sostituisce i tempi della §7 (restano validi i
   selettori .is-organized messi dal componente).
   -------------------------------------------------------------------------- */
.method-visual .mr-core {
  filter: blur(8px);
  transform: scale(0.94);
  transform-origin: 500px 378px;
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
  transition-delay: 0s;
}
.method-visual.is-organized .mr-core { filter: blur(0); }

.method-visual .mr--wide .mr-rope {
  transition: stroke-dashoffset 1.25s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(0.35s + var(--i) * 0.08s);
}
.method-visual .mr--wide .mr-dot {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(1.35s + var(--i) * 0.08s);
}
.method-visual.is-organized .mr--wide .mr-dot { opacity: 1; transform: scale(1); }
.method-visual .mr--wide .mr-word {
  filter: blur(4px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
  transition-delay: calc(1.45s + var(--i) * 0.08s);
}
.method-visual.is-organized .mr--wide .mr-word { filter: blur(0); }

/* a riposo: impulsi dal centro verso le parole, sfasati per nodo */
.mr-pulse {
  opacity: 0;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 100;
}
.method-visual.is-organized .mr-pulse {
  animation: mr-pulse 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: calc(2.6s + var(--i) * 0.45s);
}
@keyframes mr-pulse {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.9; }
  85%, 100% { stroke-dashoffset: 5; opacity: 0; }
}
.mr-halo { transform-box: fill-box; transform-origin: center; }
.method-visual.is-organized .mr--wide .mr-halo {
  animation: mr-breathe 3.6s ease-in-out infinite;
  animation-delay: calc(2.6s + var(--i) * 0.45s + 2.5s);
}
@keyframes mr-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.9); opacity: 0.35; }
}
.method-visual .mr--wide .mr-word text { transition: fill-opacity 0.25s ease; }
.method-visual .mr--wide .mr-word:hover text { fill-opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .method-visual .mr-core,
  .method-visual .mr--wide .mr-dot,
  .method-visual .mr--wide .mr-word { filter: none; transform: none; opacity: 1; transition: none !important; }
  .mr-pulse, .method-visual .mr--wide .mr-halo { animation: none !important; opacity: 0; }
}

/* --------------------------------------------------------------------------
   49. FORME TONDE (24/9) — riferimento: header di Clinic Academy.
   Al posto dei rettangoli: bottoni a pillola, voci del menu con fondo a
   pillola al passaggio (niente piu sottolineatura), tendina con angoli
   ampi, freccia della tendina disegnata (chevron) invece del glifo "⌄",
   hamburger e pannello cookie arrotondati. I campi dei form restano a
   linea (non sono rettangoli), le sezioni restano a filo.
   -------------------------------------------------------------------------- */
.button,
.button--small,
.desktop-cta,
.mobile-menu__cta,
.consent-panel button {
  border-radius: 999px !important;
}
.button,
.button--small { padding-inline: clamp(18px, 1.6vw, 26px); }

/* menu desktop: pillola al passaggio e sulla voce attiva */
.desktop-nav { gap: clamp(4px, 0.6vw, 10px); }
.desktop-nav > a,
.desktop-solutions > button {
  padding: 9px 16px !important;
  border-radius: 999px;
  transition: background-color 200ms ease, color 200ms ease;
}
.desktop-nav > a::after,
.desktop-solutions > button::after { display: none !important; }
.desktop-nav > a:hover,
.desktop-nav > a.is-active,
.desktop-solutions > button:hover,
.desktop-solutions.is-open > button {
  background: rgba(11, 11, 12, 0.06);
}
html.hdr-dark .desktop-nav > a:hover,
html.hdr-dark .desktop-nav > a.is-active,
html.hdr-dark .desktop-solutions > button:hover,
html.hdr-dark .desktop-solutions.is-open > button {
  background: rgba(245, 244, 240, 0.12);
}

/* freccia: chevron disegnato, centrato sul testo, ruota in apertura (§43) */
.desktop-solutions > button { align-items: center; gap: 6px; }
.desktop-solutions > button > span {
  font-size: 0;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
  opacity: 0.8;
}

/* tendina: angoli ampi come il riferimento */
.desktop-solutions > #desktop-solutions-panel {
  border-radius: 26px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.97);
}
.desktop-solutions > #desktop-solutions-panel a {
  border-radius: 18px;
  padding: 12px 16px;
}

/* hamburger e pannello cookie */
.menu-toggle { border-radius: 999px !important; }
.consent-panel { border-radius: 26px; }

/* --------------------------------------------------------------------------
   50. CTA HEADER CON "NOISE BACKGROUND" (24/9) — porting CSS del componente
   Aceternity "NoiseBackground": anello a pillola con gradienti che si
   muovono lentamente + grana, e il bottone come superficie interna.
   Palette NODE al posto dei colori demo: ambra #f2b233, crema #f5e6c4,
   bronzo #b87d0a. Tutto su un solo elemento (il bottone e React):
   - background del bottone = anello (gradienti animati + grana SVG);
   - ::before = superficie interna, 4px dentro, sotto il testo
     (isolation: il pseudo resta sopra il fondo e sotto le lettere).
   Su mobile il bottone e il cerchio compatto della §40: stesso anello.
   -------------------------------------------------------------------------- */
.site-header .desktop-cta {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  color: #f5f4f0 !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(40% 90% at 20% 50%, #f2b233 0%, rgba(242, 178, 51, 0) 70%),
    radial-gradient(40% 90% at 55% 50%, #f5e6c4 0%, rgba(245, 230, 196, 0) 70%),
    radial-gradient(40% 90% at 85% 50%, #b87d0a 0%, rgba(184, 125, 10, 0) 70%),
    #d99a1f !important;
  background-size: 160px 160px, 220% 220%, 220% 220%, 220% 220%, auto !important;
  background-position: 0 0, 0% 50%, 50% 50%, 100% 50%, 0 0;
  box-shadow: 0 4px 14px -10px rgba(217, 154, 31, 0.4) !important;
  opacity: 1;
  animation: node-noise-drift 9s ease-in-out infinite alternate;
  transition: transform 100ms ease, box-shadow 200ms ease;
}
.site-header .desktop-cta::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #0b0b0c 0%, #0b0b0c 55%, #1c1b1a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.35);
}
.site-header .desktop-cta:hover {
  box-shadow: 0 6px 18px -10px rgba(242, 178, 51, 0.55) !important;
}
.site-header .desktop-cta:active { transform: scale(0.98); }
@keyframes node-noise-drift {
  0%   { background-position: 0 0, 0% 30%, 50% 70%, 100% 40%, 0 0; }
  50%  { background-position: 0 0, 60% 70%, 10% 30%, 40% 60%, 0 0; }
  100% { background-position: 0 0, 100% 40%, 80% 60%, 0% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .desktop-cta { animation: none; }
}

/* --------------------------------------------------------------------------
   52. METODO NODE (24/9) — via la sezione "01 Dal disordine al sistema"
   con il grafico Strategia NODE. Nascosta, non cancellata (la geometria
   radiale della §48 resta pronta se servisse di nuovo).
   -------------------------------------------------------------------------- */
.method-page__visual {
  display: none !important;
}

/* 50b. (24/9) anello alleggerito: 2px invece di 4px, colori piu tenui
   (il nero interno copre di piu, l'anello resta un filo luminoso) */
.site-header .desktop-cta {
  filter: saturate(0.8) brightness(0.95);
}

/* --------------------------------------------------------------------------
   53. MOBILE (24/9) — margini laterali del contenitore
   Il tema, sotto i 680px, forza .shell a width:100% (regola anti-overflow)
   e l'effetto netto era margine 0: testi attaccati al bordo dello schermo
   su tutte le pagine. Qui torna la gabbia del tema: 18px per lato.
   Escluso il nastro della home (.hero__index), che va a filo.
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .shell:not(.hero__index) {
    width: auto !important;
    max-width: none !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    box-sizing: border-box;
  }
}

/* --------------------------------------------------------------------------
   54. MOBILE (24/9) — bersagli di tocco sotto i 44px
   Audit a 390px su 10 pagine: link del footer alti 20px, logo 32px,
   caselle privacy 16-20px, step del form demo 37px. Portati a 44px
   (area toccabile, non dimensione visiva del testo).
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-header a[aria-label*="homepage"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .demo-progress button { min-height: 44px; }
  .site-footer button { min-height: 44px; }
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    flex: none;
  }
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    padding-block: 11px;
  }
}

/* --------------------------------------------------------------------------
   55. CHECKLIST iOS / TOCCO (24/9) — i punti applicabili a questo sito
   (build gia compilata: niente browserslist ne layout.tsx; verificato a
   parte che nei JS non ci sono blocchi "static {" che rompono Safari 16.0).
   -------------------------------------------------------------------------- */
/* p.5 — elemento fisso dentro un genitore con backdrop-filter: il menu
   mobile sta dentro .site-header, che da "solid" ha un blur. Su Safari il
   filtro diventa il contenitore del fisso e il pannello resta alto 68px.
   Mentre il menu e aperto il filtro si spegne. */
.site-header--menu-open {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* p.6 — tocco: niente ritardo del doppio tap, evidenziazione coerente
   (niente riquadro grigio di iOS, al suo posto uno stato :active visibile) */
a, button, summary, label, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .button:active,
  .mobile-menu a:active,
  .site-footer a:active,
  .node-reveal__item:active,
  .menu-toggle:active { opacity: 0.6; }
  .button:active { transform: scale(0.98); }
}

/* p.9 — sul telefono l'anello del bottone non si anima: background-position
   ridipinge a ogni frame (batteria, scatti). Resta il colore, fermo. */
@media (hover: none) {
  .site-header .desktop-cta { animation: none; }
}

/* p.4 — il sipario d'ingresso si toglie via JS dopo ~7s; se il JS si
   fermasse a meta, sparisce comunque da solo via CSS a 9s. */
#node-intro {
  animation: node-intro-failsafe 0.6s ease 9s forwards;
}
@keyframes node-intro-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* --------------------------------------------------------------------------
   56. SIPARIO D'INGRESSO (24/9) — solo il marchio, che gira in senso orario
   Via la scritta sotto il logo (wordmark + slogan). Il marchio ruota di
   360° in continuo finche il sipario e aperto. Solo transform: leggero
   anche su iPhone. (Chi ha "riduci movimento" il sipario non lo vede.)
   -------------------------------------------------------------------------- */
#node-intro .ni-word,
#node-intro .ni-slogan {
  display: none !important;
}
#node-intro .ni-mark {
  animation: ni-spin 2.4s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes ni-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}