/* ============================================================
   GUERRILLA BRAIN — TEMA CHIARO (ottobre 2026)
   Linguaggio del film "GOS · I fondamentali": bianco caldo, luce morbida,
   linee sottili, titoli nero + grigio, pochi accenti neri, niente effetti.
   Si carica DOPO styles.css. I loghi restano invariati.
   ============================================================ */
:root {
  --paper: #F5F5F2;
  --paper-2: #ECECE8;
  --card: #FFFFFF;
  --ink: #0B0B0B;
  --steel: #5F5F5E;
  --mist: #6F6F6B; /* contrasto AA sul fondo chiaro (prima #8C8C89) */
  --hairline: rgba(11,11,11,.10);
  --hairline-d: rgba(11,11,11,.10);
  --soft-shadow: 0 1px 2px rgba(11,11,11,.04), 0 12px 32px -18px rgba(11,11,11,.18);
}
html { background: var(--paper); }
body { background: transparent; }

/* --- via gli effetti "da demo" --- */
.grain, .cursor, .cursor-ring, .vignette, .halftone,
.hero-media, .hero-scrim, .hero-route, .hero-hud, .hero-chips, .hero-cue, .hero-eyebrow,
.sec-video, .sec-scrim, .scroll-cue, .spine, .scan-progress { display: none !important; }
html, body, a, button { cursor: auto; }
a, button { cursor: pointer; }

/* --- header --- */
.header, body.on-dark .header { color: var(--ink); }
.header.solid, body.on-dark .header.solid { background: rgba(245,245,242,.82); border-bottom-color: var(--hairline); backdrop-filter: blur(14px) saturate(1.2); }
.nav a, body.on-dark .nav a { color: var(--steel); font-size: 14px; letter-spacing: 0; }
.nav a:hover, .nav a.active, body.on-dark .nav a:hover, body.on-dark .nav a.active { color: var(--ink); }
.nav a::after { height: 1px; bottom: 8px; }
.cta { border-radius: 999px; border-color: rgba(11,11,11,.18); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; padding: 10px 20px; }
.cta::before, body.on-dark .cta::before { background: var(--ink); border-radius: 999px; }
.cta:hover, body.on-dark .cta:hover { color: var(--paper); }

/* --- pulsanti: pillole --- */
.btn { border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; padding: 15px 26px; gap: 12px;
  background: var(--ink); color: var(--paper); }
.btn::before { display: none; }
.btn:hover { color: var(--paper); background: #2B2B2A; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(11,11,11,.18); }
.btn.ghost:hover { background: var(--card); color: var(--ink); border-color: rgba(11,11,11,.35); }

/* --- tipografia --- */
.display { font-weight: 500; letter-spacing: -.035em; line-height: 1.03; font-size: clamp(36px, 5vw, 76px); }
.display .muted { color: #8F8E8A; }
.lead, body.on-dark .lead { color: var(--steel); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
.section-num, .statement-kicker, .kicker, .case-period, .statement-bridge {
  font-family: "Switzer", "Segoe UI", Arial, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--mist); }
.kicker::before { display: none; }

/* --- hero: calmo, centrato, con il marchio a linea sottile --- */
.hero { height: auto; color: var(--ink);
  background: radial-gradient(900px 620px at 50% 38%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 72%); }
.hero-pin { position: relative; height: auto; min-height: 100svh; overflow: visible; display: grid; place-items: center; }
.hero-center { position: relative; inset: auto; padding: calc(var(--header-h) + 48px) var(--edge) 96px; gap: 26px; text-align: center; }
.hero-lead-h { font-family: "Switzer", "Segoe UI", Arial, sans-serif; font-weight: 500; color: var(--ink);
  font-size: clamp(44px, 6.2vw, 96px); line-height: 1.02; letter-spacing: -.04em; max-width: 13ch; }
.hero-lead-sub { color: var(--steel); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; max-width: 54ch; }
.hero-actions { margin-top: 10px; gap: 12px; }

/* --- statement --- */
.statement { background: transparent; }
.big-words { font-weight: 500; letter-spacing: -.035em; color: var(--ink); }
.big-words .word { opacity: .18; }
.statement-sub { color: var(--steel); }

/* --- sezioni: tutto chiaro, separazione con filo sottile --- */
.section, .statement { border-top: 1px solid var(--hairline); }
.section.dark, .manifesto { background: transparent; color: var(--ink); }

/* --- grafo ontologia: linee scure sottili su chiaro --- */
.dg-edge { stroke: rgba(11,11,11,.16); }
.dg-node { fill: #FFFFFF; stroke: rgba(11,11,11,.55); filter: none; }
.dg-node.hub { fill: #0B0B0B; stroke: #0B0B0B; filter: none; }
.dg-halo { stroke: rgba(11,11,11,.12); }
.dg-hubglow { display: none; }
.dg-pulse { fill: #0B0B0B; filter: none; }
.dg-kick { fill: var(--mist); }
.dg-ent, .dg-hub-label { fill: var(--ink); }
.dg-out { fill: var(--steel); }
.dg-label { fill: var(--ink); }
.dg-micro { fill: var(--mist); }
.dg-chev { stroke: rgba(11,11,11,.3); }
.dg-plus { fill: var(--steel); }

/* ============================================================
   MOTION E INTERAZIONE (dalla shell GOS) — vedi motion.js
   ============================================================ */
/* marchio a linea sottile: il cerchio con il punto */
.hero-center::before { content: ""; width: 132px; height: 132px; border-radius: 50%; margin-bottom: 18px; border: 1px solid rgba(11,11,11,.32);
  background: radial-gradient(circle, #0B0B0B 0 5px, transparent 5.5px), radial-gradient(circle, transparent 0 46px, rgba(11,11,11,.08) 46.5px 47.5px, transparent 48px);
  animation: gbMark 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes gbMark { from { opacity: 0; transform: scale(.92); filter: blur(6px); } }

/* riflesso di luce che segue il puntatore */
.sheen { background-image: radial-gradient(280px circle at var(--lx, -400px) var(--ly, -400px), rgba(255,255,255,.75), transparent 70%); }

/* card e pannelli: superfici bianche morbide, sollevamento leggero */
.pillar, .principles article, .signal-card, .prod-spec-cell, .dev-product, .feat-card {
  transition: translate .6s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s; }
.pillar:hover, .principles article:hover, .signal-card:hover, .prod-spec-cell:hover, .dev-product:hover, .feat-card:hover { translate: 0 -3px; }

/* entrate: salita breve + sfocatura che si scioglie */
[data-reveal] { transform: translateY(14px); filter: blur(6px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { filter: none; }
.line-mask > span { transition-duration: .9s; }

/* navigazione a pillola di vetro */
.nav { gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid rgba(11,11,11,.08);
  background-color: rgba(255,255,255,.55); backdrop-filter: blur(20px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.nav a { padding: 8px 14px; border-radius: 999px; transition: color .4s, background .4s; }
.nav a::after { display: none; }
.nav a:hover { background: rgba(11,11,11,.04); }
.nav a.active { background: rgba(11,11,11,.07); color: var(--ink); }
@media (max-width: 1360px) { .nav a { padding: 8px 11px; } }

/* pulsanti: piccolo sollevamento come nella shell */
.btn, .cta { transition: background .4s, border-color .4s, color .4s, translate .4s cubic-bezier(.2,.7,.2,1); }
.btn:hover, .cta:hover { translate: 0 -1px; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { filter: none; }
  .hero-center::before { animation: none; }
  .gs-win * { animation: none !important; }
}

/* ============================================================
   ESEMPIO GOS IN HOME: l'infrastruttura, in stile shell (chiara, vetro)
   Panoramica · Connessioni · Flussi · Da decidere. Niente chat.
   ============================================================ */
.gs-win { --gs-line: rgba(11,11,11,.09); position: relative; margin: clamp(40px, 6vw, 72px) 0 0; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--gs-line); color: var(--ink); text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,250,248,.7));
  backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(11,11,11,.04), 0 40px 80px -48px rgba(11,11,11,.35); }
.gs-win.sheen { background-image: radial-gradient(520px circle at var(--lx, -400px) var(--ly, -400px), rgba(255,255,255,.9), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,250,248,.7)); }
.gs-win b { font-weight: 500; }
/* barra superiore */
.gs-top { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--gs-line); }
.gs-word { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .32em; font-weight: 500; }
.gs-proj { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--steel); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gs-line); background: rgba(255,255,255,.6); }
.gs-proj i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.gs-nav { justify-self: center; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--gs-line); background: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 #fff; }
.gs-tab { font: 500 13.5px/1 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--steel); padding: 9px 16px; border-radius: 999px; border: 0; background: transparent;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: color .4s, background .4s; }
.gs-tab:hover { color: var(--ink); background: rgba(11,11,11,.04); }
.gs-tab.on { color: var(--paper); background: var(--ink); }
.gs-tab b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; background: var(--ink); color: var(--paper); }
.gs-tab.on b { background: var(--paper); color: var(--ink); }
.gs-search { font-size: 13px; color: var(--mist); display: inline-flex; gap: 8px; align-items: center; }
.gs-search kbd { font: 11px "IBM Plex Mono", monospace; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--gs-line); background: #fff; }
/* area principale */
.gs-main { padding: clamp(24px, 3.4vw, 44px) clamp(18px, 3.4vw, 44px) clamp(28px, 3.4vw, 44px); min-height: 560px; }
.gs-panel { display: none; flex-direction: column; gap: 18px; }
.gs-panel.on { display: flex; }
.gs-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0, 380px); gap: 32px; align-items: end; }
.gs-kick, .gs-card-h, .gs-line, .gs-state, .gs-src, .gs-pill, .gs-status { font-family: "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.gs-kick { font-size: 11px; color: var(--mist); }
.gs-h { margin: 12px 0 0; font-family: "Switzer", "Segoe UI", Arial, sans-serif; font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); }
.gs-h span { color: #8F8E8A; }
.gs-note { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--steel); }
.gs-line { margin: 0; font-size: 11.5px; color: var(--ink); display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: .02em; }
.gs-line i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
/* striscia numeri */
.gs-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--gs-line); border-radius: 16px; background: rgba(255,255,255,.55); }
.gs-strip > div { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; min-width: 0; }
.gs-strip > div + div { border-left: 1px solid var(--gs-line); }
.gs-strip b { font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gs-strip span { font-size: 12.5px; color: var(--mist); }
/* schede */
.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.gs-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--gs-line); background: #fff;
  transition: translate .5s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s; }
.gs-card:hover { translate: 0 -2px; border-color: rgba(11,11,11,.2); box-shadow: 0 18px 36px -26px rgba(11,11,11,.3); }
.gs-card-h { font-size: 10.5px; color: var(--mist); }
.gs-card > b, .gs-dec-t > b, .gs-flow-top b { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.gs-card p, .gs-dec-t p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--steel); }
.gs-link { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 500; color: var(--ink); }
.gs-card .gs-btn { align-self: flex-start; margin-top: 4px; }
.gs-state { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--mist); }
.gs-state i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink); }
.gs-state.on { color: var(--ink); }
.gs-state.on i { background: var(--ink); animation: gsPulse 2.4s ease-in-out infinite; }
/* flussi: pipeline con impulso che scorre */
.gs-flow { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--gs-line); background: #fff; }
.gs-flow-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.gs-flow-top > div { display: flex; flex-direction: column; gap: 6px; }
.gs-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.gs-toggle::before { content: ""; width: 30px; height: 18px; border-radius: 999px; background: var(--ink);
  background: radial-gradient(circle at 21px 9px, #fff 0 6px, transparent 6.5px), var(--ink); }
.gs-pipe { --n: 6; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0,1fr)); margin: 0; padding: 0; list-style: none; }
.gs-pipe::before { content: ""; position: absolute; left: 5px; right: calc(100% / var(--n) - 5px); top: 5px; height: 1px; background: rgba(11,11,11,.14); }
.gs-pipe::after { content: ""; position: absolute; left: 5px; top: 5px; height: 1px; width: calc((100% - 100% / var(--n)) * var(--p, 0)); background: var(--ink); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.gs-pipe li { position: relative; padding: 22px 10px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--mist); transition: color .4s; }
.gs-pipe li::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(11,11,11,.4); background: #fff; z-index: 1; transition: background .4s, border-color .4s, transform .4s; }
.gs-pipe li.done { color: var(--ink); }
.gs-pipe li.done::before { background: var(--ink); border-color: var(--ink); }
.gs-pipe li.now::before { transform: scale(1.35); box-shadow: 0 0 0 5px rgba(11,11,11,.07); }
.gs-flow-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--gs-line); font-size: 12.5px; color: var(--steel); }
.gs-pill { font-size: 10.5px; color: var(--steel); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--gs-line); }
/* da decidere */
.gs-dec { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--gs-line); background: #fff;
  transition: translate .5s cubic-bezier(.2,.7,.2,1), border-color .5s; }
.gs-dec:hover { translate: 0 -2px; border-color: rgba(11,11,11,.2); }
.gs-dec-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gs-src { font-size: 10.5px; color: var(--mist); margin-top: 2px; }
.gs-dec-a { display: flex; gap: 8px; flex: none; }
.gs-btn { font-size: 13.5px; font-weight: 500; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(11,11,11,.16); background: rgba(255,255,255,.8); color: var(--ink);
  transition: translate .4s cubic-bezier(.2,.7,.2,1), border-color .4s; }
.gs-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gs-btn:hover { translate: 0 -1px; border-color: rgba(11,11,11,.4); }
.gs-btn.sm { font-size: 12.5px; padding: 8px 15px; }
/* barra di stato */
.gs-status { display: flex; justify-content: space-between; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--gs-line); font-size: 10.5px; color: var(--mist); }
.gs-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-right: 8px; vertical-align: 1px; animation: gsPulse 2.4s ease-in-out infinite; }
@keyframes gsPulse { 50% { opacity: .25; } }
/* entrata in sequenza, come nella shell */
@keyframes gsUp { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
.gs-win.play .gs-panel.on [data-d] { animation: gsUp .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * 1ms); }
#gos .gc-principle { margin-top: 36px; }
.gc-principle b { color: var(--ink); }
@media (max-width: 1100px) { .gs-search, .gs-proj { display: none; } .gs-top { grid-template-columns: auto 1fr; } .gs-head { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 780px) {
  .gs-top { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
  .gs-nav { justify-self: stretch; overflow-x: auto; scrollbar-width: none; } .gs-nav::-webkit-scrollbar { display: none; }
  .gs-tab { flex: 1 0 auto; justify-content: center; padding: 9px 12px; font-size: 13px; gap: 6px; }
  .gs-main { min-height: 0; }
  .gs-strip { grid-template-columns: 1fr 1fr; }
  .gs-strip > div:nth-child(3) { border-left: 0; }
  .gs-strip > div:nth-child(n+3) { border-top: 1px solid var(--gs-line); }
  .gs-pipe { grid-template-columns: 1fr; gap: 12px; }
  .gs-pipe::before, .gs-pipe::after { left: 5px; right: auto; top: 6px; width: 1px; height: calc(100% - 22px); }
  .gs-pipe::after { height: calc((100% - 22px) * var(--p, 0)); transition: height .5s cubic-bezier(.2,.7,.2,1); }
  .gs-pipe li { padding: 0 0 0 26px; }
  .gs-dec { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gs-status span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .gs-win * { animation: none !important; } }

/* ============================================================
   MOTION CINEMATOGRAFICA (motion.js aggiunge le classi cine-*)
   Tempi lunghi, curve morbide, un solo gesto per volta.
   ============================================================ */
:root { --cine: cubic-bezier(.16,1,.3,1); --cine-io: cubic-bezier(.76,0,.24,1); }
.boot { display: none !important; }

/* --- apertura: il marchio si disegna, il titolo sale parola per parola --- */
.hero-center.has-mark::before { display: none; }
.cine-mark { width: 132px; height: 132px; margin-bottom: 18px; }
.cine-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cine-mark circle { fill: none; stroke-width: 1; }
.cine-mark .cm-o { stroke: rgba(11,11,11,.32); }
.cine-mark .cm-i { stroke: rgba(11,11,11,.12); }
.cine-mark .cm-o, .cine-mark .cm-i { stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 66px 66px; }
.cine-mark .cm-d { fill: #0B0B0B; stroke: none; transform: scale(0); transform-origin: 66px 66px; }
.cine-go .cine-mark .cm-o { animation: cmDraw 1.9s var(--cine-io) forwards; }
.cine-go .cine-mark .cm-i { animation: cmDraw 1.6s var(--cine-io) .35s forwards; }
.cine-go .cine-mark .cm-d { animation: cmDot 1s var(--cine) 1.05s forwards; }
@keyframes cmDraw { to { stroke-dashoffset: 0; } }
@keyframes cmDot { 0% { transform: scale(0); } 55% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes cmBreath { 0%, 100% { stroke-dashoffset: 0; opacity: 1; } 50% { opacity: .45; } }

.hero-lead-h .cw-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin: 0 -.02em -.14em; }
.hero-lead-h .cw-m > span { display: inline-block; transform: translateY(108%) rotate(5deg); transform-origin: 0 100%; }
.cine-go .hero-lead-h .cw-m > span { animation: cwRise 1.6s var(--cine) both; animation-delay: calc(.5s + var(--i) * 75ms); }
@keyframes cwRise { from { transform: translateY(108%) rotate(5deg); } to { transform: none; } }

.hero-center.cine .hero-actions { opacity: 0; }
.cine-go .hero-actions { animation: cineUp 1.3s var(--cine) 1.7s both; }
@keyframes cineUp { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero-center { will-change: transform, opacity; transform-origin: 50% 30%; }
.cine-intro .header { animation: hdrIn 1.3s var(--cine) 1.4s backwards; }
@keyframes hdrIn { from { transform: translateY(-100%); opacity: 0; } }

/* --- testi a fuoco progressivo --- */
.cw-f { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.45em);
  transition: opacity 1s var(--cine), filter 1.1s var(--cine), transform 1.2s var(--cine);
  transition-delay: calc(var(--i) * 13ms); }
.cine-go .cw-f { opacity: 1; filter: none; transform: none; }
.hero-center .cw-f { transition-delay: calc(1.15s + var(--i) * 16ms); }

/* --- sezioni: il filo si traccia, il numero entra come un ciak --- */
.section, .statement { position: relative; border-top-color: transparent; }
.cine-rule { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(11,11,11,.12); pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 2s var(--cine-io); }
.cine-in > .cine-rule { transform: scaleX(1); }
.section > .section-num { display: flex; align-items: center; gap: 12px; }
.cine-tick { flex: none; width: 0; height: 1px; background: var(--ink); transition: width 1.1s var(--cine) .25s; }
.cine-in .cine-tick { width: 28px; }
.cine-slate { display: inline-block; overflow: hidden; vertical-align: top; }
.cine-slate > span { display: inline-block; transform: translateY(110%); transition: transform 1.2s var(--cine) .4s; }
.cine-in .cine-slate > span { transform: none; }

/* titoli: le righe salgono con una lieve rotazione, come un titolo di testa */
.line-mask > span { transform: translateY(112%) rotate(3.5deg); transform-origin: 0 100%; transition: transform 1.6s var(--cine); }
.line-mask.in > span, .reveal-in .line-mask > span { transform: none; }
.line-mask:nth-child(2) > span { transition-delay: .14s; }
.line-mask:nth-child(3) > span { transition-delay: .28s; }

/* blocchi grandi: arrivano in prospettiva (camera) */
.cine-dolly { transform-origin: 50% 0; will-change: transform, opacity; }

/* immagini dei casi: si aprono dal basso e si assestano */
.cine-on .signal-card-media { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--cine-io); transition-delay: calc(var(--k, 0) * 120ms); }
.cine-on .signal-card-media img { transform: scale(1.18); transition: transform 2.4s var(--cine); transition-delay: calc(var(--k, 0) * 120ms); }
.cine-on .cine-in .signal-card-media { clip-path: inset(0); }
.cine-on .cine-in .signal-card-media img { transform: scale(1.02); }
.cine-on .cine-in .signal-card:hover .signal-card-media img { transform: scale(1.07); transition-delay: 0s; }

/* --- avanzamento della lettura --- */
.cine-progress { position: fixed; left: 0; right: 0; top: 0; height: 1px; z-index: 1600; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* --- testo che rotola nei pulsanti e nel menu --- */
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; line-height: 1.25; }
.roll > span { display: inline-block; transition: transform .75s var(--cine); }
.roll::after { content: attr(data-t); position: absolute; left: 0; top: 0; white-space: nowrap; transform: translateY(115%); transition: transform .75s var(--cine); }
a:hover .roll > span, button:hover .roll > span, .gs-btn:hover .roll > span, .roll:hover > span { transform: translateY(-115%); }
a:hover .roll::after, button:hover .roll::after, .gs-btn:hover .roll::after, .roll:hover::after { transform: none; }
.btn i, .section-cta i { transition: transform .75s var(--cine); }
.btn:hover i, .section-cta:hover i { transform: translateX(5px); }

/* --- pillola che scivola tra le voci --- */
.nav.has-ind, .gs-nav.has-ind { position: relative; }
.nav-ind { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: rgba(11,11,11,.07); pointer-events: none; z-index: 0;
  transition: transform .7s var(--cine), width .7s var(--cine), opacity .4s; }
.nav.has-ind a { position: relative; z-index: 1; }
.nav.has-ind a, .nav.has-ind a:hover, .nav.has-ind a.active { background: transparent; }
.gs-nav .nav-ind { background: var(--ink); box-shadow: 0 6px 16px -8px rgba(11,11,11,.5); }
.gs-nav.has-ind .gs-tab { position: relative; z-index: 1; }
.gs-nav.has-ind .gs-tab, .gs-nav.has-ind .gs-tab:hover, .gs-nav.has-ind .gs-tab.on { background: transparent; }
.gs-tab { transition: color .5s var(--cine); }

/* --- sipario chiaro tra le pagine --- */
.transition { background: var(--paper); opacity: 1; clip-path: inset(100% 0 0 0); }
.transition.in { animation: curtIn .85s var(--cine-io) forwards; }
.transition.out { clip-path: inset(0); animation: curtOut .68s var(--cine-io) forwards; }
@keyframes curtIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes curtOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
.transition-label { color: var(--ink); }
.transition-label .tl-mark { display: none; }
.transition-label::before { content: ""; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(11,11,11,.32);
  background: radial-gradient(circle, #0B0B0B 0 3px, transparent 3.5px); }
.transition-label .tl-name { font-weight: 500; letter-spacing: -.04em; }
.transition-label .tl-bar { background: rgba(11,11,11,.12); }
.transition-label .tl-bar b { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .cine-progress, .nav-ind { display: none; }
  .line-mask > span { transform: none; }
}

/* ============================================================
   CAPITOLI DELLA HOME (motion.js): Intro · GOS · Studio · Signals
   ============================================================ */
/* apertura di capitolo: 2 schermi di scroll, il cartello resta fermo e si compone */
.chapter { position: relative; height: 200vh; overflow-x: clip; }
.chapter-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  padding: var(--header-h) var(--edge) 120px; text-align: center; will-change: transform, opacity; transform-origin: 50% 45%; }
.chapter-top { display: flex; align-items: center; gap: 12px; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.chapter-mark { width: 22px; height: 22px; overflow: visible; }
.chapter-mark circle { fill: none; stroke: rgba(11,11,11,.45); stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--m, 0) * 100); transform: rotate(-90deg); transform-origin: 20px 20px; }
.chapter-mark .d { fill: var(--ink); stroke: none; transform: scale(var(--m, 0)); }
.chapter-title { margin: 0; font-family: "Switzer", "Segoe UI", Arial, sans-serif; font-weight: 500; font-size: clamp(84px, 19vw, 300px); line-height: .92; color: var(--ink); }
.chapter-letters { display: inline-flex; letter-spacing: .17em; }
.chapter-letters .cl { display: inline-block; overflow: hidden; padding: 0 .015em .26em; margin-bottom: -.26em; }
.chapter-letters .cl > span { display: inline-block; transform: translate3d(0,108%,0); transform-origin: 0 100%; will-change: transform; }
.chapter-line { display: block; width: min(520px, 64vw); height: 1px; background: var(--ink); transform: scaleX(0); }
.chapter-index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.chapter-index button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(11,11,11,.12);
  background: rgba(255,255,255,.62); backdrop-filter: blur(12px); font: 500 14.5px "Switzer", "Segoe UI", Arial, sans-serif; color: var(--steel); cursor: pointer; opacity: 0;
  transition: color .45s, border-color .45s, background .45s, translate .6s var(--cine); }
.chapter-index button i { font: 11px "IBM Plex Mono", monospace; font-style: normal; color: var(--mist); }
.chapter-index button:hover { color: var(--ink); background: #fff; border-color: rgba(11,11,11,.32); translate: 0 -2px; }

/* barra dei capitoli: pillola di vetro in basso, come la navigazione della shell */
.chap-nav { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 20px); bottom: 22px; z-index: 1300; display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: 999px; border: 1px solid rgba(11,11,11,.10); background: rgba(250,250,248,.74); backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 44px -26px rgba(11,11,11,.4);
  transform: translateY(160%); opacity: 0; transition: transform 1s var(--cine), opacity .6s; }
.chap-nav.show { transform: none; opacity: 1; }
body.menu-open .chap-nav { transform: translateY(160%); opacity: 0; }
.chap-ind { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--ink); z-index: 0;
  box-shadow: 0 8px 18px -10px rgba(11,11,11,.6); transition: transform .8s var(--cine), width .8s var(--cine); }
.chap-item { position: relative; }
.chap-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 13px; border: 0; border-radius: 999px; background: transparent;
  font: 500 13.5px/1 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--steel); cursor: pointer; transition: color .6s var(--cine); }
.chap-btn:hover { color: var(--ink); }
.chap-item.on .chap-btn { color: var(--paper); }
.chap-n { font: 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; opacity: .55; }
.chap-bar { position: absolute; left: 18px; right: 18px; bottom: 6px; height: 1px; background: rgba(11,11,11,.12); overflow: hidden; }
.chap-item.on .chap-bar { background: rgba(255,255,255,.22); }
.chap-bar b { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }
.chap-keys { position: relative; z-index: 1; font: 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; color: var(--mist); padding: 0 12px 0 10px; margin-left: 4px; border-left: 1px solid rgba(11,11,11,.10); cursor: help; }
/* sottosezioni: si aprono sopra la voce */
.chap-pop { position: absolute; left: 50%; bottom: calc(100% + 16px); min-width: 240px; display: flex; flex-direction: column; gap: 2px; padding: 8px; text-align: left;
  border-radius: 18px; border: 1px solid rgba(11,11,11,.10); background: rgba(252,252,250,.92); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: inset 0 1px 0 #fff, 0 26px 56px -30px rgba(11,11,11,.45);
  opacity: 0; transform: translate(-50%, 10px) scale(.98); transform-origin: 50% 100%; pointer-events: none; transition: opacity .35s, transform .6s var(--cine); }
.chap-pop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
.chap-item:hover .chap-pop, .chap-item:focus-within .chap-pop { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.chap-pop-h { font: 10.5px "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); padding: 8px 10px 6px; }
.chap-sub { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; white-space: nowrap;
  font: 14px "Switzer", "Segoe UI", Arial, sans-serif; color: var(--steel); text-align: left; transition: background .3s, color .3s; }
.chap-sub i { flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink); transition: background .3s; }
.chap-sub:hover, .chap-sub.on { background: rgba(11,11,11,.05); color: var(--ink); }
.chap-sub.on i { background: var(--ink); }
@media (hover: none) { .chap-keys, .chap-pop { display: none; } }
@media (max-width: 720px) {
  .chapter { height: 170vh; }
  .chapter-pin { gap: 22px; padding-bottom: 150px; }
  .chap-nav { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .chap-n { display: none; }
  .chap-btn { padding: 9px 13px 11px; font-size: 12.5px; }
  .chap-bar { left: 13px; right: 13px; bottom: 5px; }
}

/* ============================================================
   FONDI ANIMATI E SCHEMI INTERATTIVI (motion.js)
   ============================================================ */
/* il canvas sta tra il colore di fondo (bg-flow) e i contenuti */
.amb { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bg-flow { z-index: -2; }
/* le sezioni restano trasparenti: il fondo si vede, i testi restano leggibili */
.statement-inner, .hsec-head { position: relative; }

/* ontologia: percorso acceso, il resto si attenua; i dati scorrono sulle linee accese */
.onto-d .dg-edge, .onto-d .dg-node, .onto-d .dg-halo, .onto-d text { transition: opacity .5s var(--cine), stroke .5s, stroke-width .5s, fill .5s; }
.onto-d.dim .dg-edge:not(.hot) { opacity: .25; }
.onto-d.dim .dg-node:not(.hot), .onto-d.dim .dg-halo:not(.hot), .onto-d.dim text:not(.hot):not(.dg-kick) { opacity: .28; }
.onto-d .dg-edge.hot { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 5 7; animation: ontoFlow 1.1s linear infinite; }
.onto-d .dg-halo.hot { stroke: rgba(11,11,11,.35); }
.onto-d .dg-node.hot:not(.hub) { fill: var(--ink); }
@keyframes ontoFlow { to { stroke-dashoffset: -24; } }
.onto-d .dg-hit { fill: transparent; cursor: pointer; pointer-events: all; }

/* infrastruttura: il modulo si alza e la sua linea si accende fino alla base */
.gos-stack { position: relative; }
.stack-mod { transition: background .4s, translate .6s var(--cine), box-shadow .6s var(--cine); position: relative; z-index: 1; }
.stack-mod.hot { background: #fff; translate: 0 -4px; box-shadow: 0 18px 36px -24px rgba(11,11,11,.35); }
.stack-mod.hot b { font-weight: 500; }
.stack-link i { transition: background .4s, width .4s; }
.stack-link i.hot { background: var(--ink); width: 2px; }
.stack-core { transition: box-shadow .6s var(--cine), translate .6s var(--cine); }
.gos-stack.has-hot .stack-core { box-shadow: 0 0 0 1px rgba(11,11,11,.4), 0 26px 50px -30px rgba(11,11,11,.55); }

/* caroselli trascinabili */
.feat-track.draggable { cursor: grab; }
.feat-track.dragging { cursor: grabbing; scroll-snap-type: none !important; scroll-behavior: auto !important; user-select: none; }
.feat-track.dragging * { pointer-events: none; }

/* segni di registro agli angoli degli schemi */
.onto-graph { position: relative; }
.reg { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0; transition: opacity .8s var(--cine) .6s, transform 1.2s var(--cine) .6s; }
.reg.tl { left: -10px; top: -10px; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); transform: translate(10px, 10px); }
.reg.tr { right: -10px; top: -10px; border-right: 1px solid var(--ink); border-top: 1px solid var(--ink); transform: translate(-10px, 10px); }
.reg.bl { left: -10px; bottom: -10px; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: translate(10px, -10px); }
.reg.br { right: -10px; bottom: -10px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: translate(-10px, -10px); }
.cine-in .reg { opacity: .55; transform: none; }
@media (max-width: 720px) { .reg { display: none; } }
/* nel grafo (contenitore scorrevole su schermi stretti) i segni stanno dentro gli angoli */
.onto-graph .reg.tl { left: 0; top: 0; } .onto-graph .reg.tr { right: 0; top: 0; }
.onto-graph .reg.bl { left: 0; bottom: 0; } .onto-graph .reg.br { right: 0; bottom: 0; }
/* stack su mobile: l'ultimo modulo, se dispari, occupa tutta la riga (niente cella vuota) */
@media (max-width: 720px) { .stack-modules .stack-mod:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ============================================================
   SHELL GLOBALE (motion.js · shellGlobal)
   ============================================================ */
/* --- header a tre zone: contesto · navigazione al centro · comandi --- */
@media (min-width: 1121px) {
  .header.sh-head .nav { margin: 0 auto; }
  .header.sh-head .sh-search { margin-left: 0; }
}
@media (max-width: 1120px) { .header.sh-head .sh-search { margin-left: auto; } }
.sh-ctx { display: inline-flex; align-items: center; gap: 8px; margin-left: 18px; max-width: 300px; padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid rgba(11,11,11,.10); background: rgba(255,255,255,.55); backdrop-filter: blur(16px); white-space: nowrap; overflow: hidden;
  font: 500 13px/1.2 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--steel); cursor: pointer; transition: border-color .4s, background .4s; }
.sh-ctx:hover { border-color: rgba(11,11,11,.25); background: #fff; }
.sh-ctx > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.sh-ctx-a { color: var(--ink); }
.sh-ctx-sep { color: rgba(11,11,11,.25); }
.sh-ctx-b { overflow: hidden; text-overflow: ellipsis; }
.sh-ctx-a, .sh-ctx-b { display: inline-block; }
.sh-ctx.one .sh-ctx-sep, .sh-ctx.one .sh-ctx-b { display: none; }
.sh-ctx.swap .sh-ctx-a, .sh-ctx.swap .sh-ctx-b { animation: ctxSwap .7s var(--cine); }
@keyframes ctxSwap { from { opacity: 0; transform: translateY(7px); filter: blur(3px); } }
.sh-search { display: inline-flex; align-items: center; gap: 9px; margin-right: 14px; padding: 6px 7px 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(11,11,11,.10); background: rgba(255,255,255,.55); backdrop-filter: blur(16px);
  font: 13px/1 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--steel); transition: border-color .4s, background .4s, color .4s, translate .4s var(--cine); }
.sh-search:hover { color: var(--ink); border-color: rgba(11,11,11,.25); background: #fff; translate: 0 -1px; }
.sh-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sh-search kbd { font: 10.5px/1 "IBM Plex Mono", monospace; padding: 4px 6px; border-radius: 6px; border: 1px solid rgba(11,11,11,.12); background: #fff; color: var(--mist); }
@media (max-width: 1599px) { .sh-ctx { display: none; } }
@media (max-width: 1360px) { .sh-search span, .sh-search kbd { display: none; } .sh-search { padding: 8px; } }

/* --- barra di stato --- */
.sh-status { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; z-index: 1250; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--edge); font: 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mist);
  background: rgba(245,245,242,.82); backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid rgba(11,11,11,.08); }
.sh-prog { position: absolute; left: 0; right: 0; top: -1px; height: 1px; overflow: hidden; }
.sh-prog b { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.sh-l, .sh-r { display: flex; align-items: center; gap: 16px; white-space: nowrap; overflow: hidden; }
.sh-l { gap: 10px; }
.sh-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: gsPulse 2.4s ease-in-out infinite; }
.sh-ready { color: var(--ink); font-weight: 500; }
.sh-where { overflow: hidden; text-overflow: ellipsis; }
.sh-clock { color: var(--ink); font-variant-numeric: tabular-nums; }
body.has-shbar { padding-bottom: 30px; }
body.has-shbar .chap-nav { bottom: 46px; }
@media (min-width: 1121px) and (hover: hover) { body.has-shbar .cine-progress { display: none; } }
@media (max-width: 1120px), (hover: none) {
  .sh-status { display: none; }
  body.has-shbar { padding-bottom: 0; }
  body.has-shbar .chap-nav { bottom: 22px; }
}
@media (max-width: 720px) { body.has-shbar .chap-nav { bottom: calc(82px + env(safe-area-inset-bottom)); } }

/* --- pannello: mappa del sito + comandi --- */
html.sh-lock, html.sh-lock body { overflow: hidden; }
.sh-ov { position: fixed; inset: 0; z-index: 2100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 84px var(--edge) 48px;
  background: rgba(245,245,242,.84); backdrop-filter: blur(22px) saturate(1.2); opacity: 0; transition: opacity .45s var(--cine); }
.sh-ov[hidden] { display: none; }
.sh-ov.open { opacity: 1; }
.sh-esc { position: absolute; top: 22px; right: var(--edge); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(11,11,11,.12); background: rgba(255,255,255,.6); cursor: pointer;
  font: 11px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.sh-esc:hover { color: var(--ink); background: #fff; }
.sh-map { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". here ." "sys core studio" ". contact ."; align-items: center; gap: 40px 84px; width: min(1120px, 100%); }
.sh-ov.q .sh-map { display: none; }
.sh-g-here { grid-area: here; } .sh-g-sys { grid-area: sys; } .sh-g-studio { grid-area: studio; } .sh-g-contact { grid-area: contact; }
.sh-core { grid-area: core; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sh-core svg { width: 112px; height: 112px; overflow: visible; margin-bottom: 8px; }
.sh-core .o, .sh-core .i { fill: none; stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 66px 66px; }
.sh-core .o { stroke: rgba(11,11,11,.32); } .sh-core .i { stroke: rgba(11,11,11,.12); }
.sh-core .d { fill: var(--ink); transform: scale(0); transform-origin: 66px 66px; }
.sh-ov.open .sh-core .o { animation: cmDraw 1.1s var(--cine-io) .05s forwards; }
.sh-ov.open .sh-core .i { animation: cmDraw 1s var(--cine-io) .2s forwards; }
.sh-ov.open .sh-core .d { animation: cmDot .7s var(--cine) .55s forwards; }
.sh-core-a, .sh-core-b { font: 11px/1.3 "IBM Plex Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.sh-core-a { color: var(--ink); } .sh-core-b { color: var(--mist); }
.sh-g { position: relative; display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity .7s var(--cine), transform .9s var(--cine), filter .7s var(--cine); }
.sh-ov.open .sh-g { opacity: 1; transform: none; filter: none; }
.sh-ov.open .sh-g-here { transition-delay: .12s; } .sh-ov.open .sh-g-sys { transition-delay: .2s; }
.sh-ov.open .sh-g-studio { transition-delay: .28s; } .sh-ov.open .sh-g-contact { transition-delay: .36s; }
.sh-g-h { font: 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.sh-g-l { display: flex; flex-direction: column; gap: 2px; }
.sh-g-here, .sh-g-contact { align-items: center; }
.sh-g-here .sh-g-l, .sh-g-contact .sh-g-l { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 22px; }
.sh-g-sys { align-items: flex-end; justify-self: end; text-align: right; }
.sh-g-sys .sh-it { flex-direction: row-reverse; }
.sh-g-studio { align-items: flex-start; justify-self: start; }
.sh-it { display: inline-flex; align-items: center; gap: 12px; padding: 6px 2px; border: 0; background: transparent; cursor: pointer;
  font: 400 clamp(17px, 1.55vw, 22px)/1.2 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.01em; color: var(--steel); transition: color .3s, transform .5s var(--cine); }
.sh-it i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ink); transition: background .3s, transform .4s var(--cine); }
.sh-it:hover, .sh-it:focus-visible, .sh-it.cur { color: var(--ink); }
.sh-it:hover i, .sh-it.cur i { background: var(--ink); }
.sh-it:hover i { transform: scale(1.25); }
.sh-g-sys .sh-it:hover { transform: translateX(-4px); } .sh-g-studio .sh-it:hover { transform: translateX(4px); }
.sh-g-line { position: absolute; background: rgba(11,11,11,.2); transition: transform 1s var(--cine-io) .3s; }
.sh-g-here .sh-g-line { left: 50%; top: calc(100% + 8px); width: 1px; height: 26px; transform: scaleY(0); transform-origin: top; }
.sh-g-contact .sh-g-line { left: 50%; bottom: calc(100% + 8px); width: 1px; height: 26px; transform: scaleY(0); transform-origin: bottom; }
.sh-g-sys .sh-g-line { left: calc(100% + 16px); top: 50%; height: 1px; width: 52px; transform: scaleX(0); transform-origin: left; }
.sh-g-studio .sh-g-line { right: calc(100% + 16px); top: 50%; height: 1px; width: 52px; transform: scaleX(0); transform-origin: right; }
.sh-ov.open .sh-g-line { transform: none; }
.sh-in { width: min(560px, 100%); margin-top: 52px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(10px); transition: opacity .6s var(--cine) .4s, transform .8s var(--cine) .4s; }
.sh-ov.open .sh-in { opacity: 1; transform: none; }
.sh-ov.q .sh-in { order: -1; margin: 0 0 18px; transition-delay: 0s; }
.sh-in input { width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid rgba(11,11,11,.25); background: transparent; outline: none; text-align: center;
  font: 400 clamp(18px, 1.6vw, 22px)/1.3 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--ink); transition: border-color .4s; }
.sh-in input:focus { border-color: var(--ink); }
.sh-in input::placeholder { color: var(--mist); }
.sh-hint { font: 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.sh-res { width: min(640px, 100%); display: flex; flex-direction: column; gap: 2px; }
.sh-r-it { display: grid; grid-template-columns: 12px minmax(0,1fr) auto 18px; align-items: center; gap: 14px; padding: 13px 16px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; text-align: left;
  animation: gsUp .55s var(--cine) both; transition: background .25s, box-shadow .25s; }
.sh-r-it i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink); }
.sh-r-it .a { font: 16px/1.3 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-r-it .b { font: 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.sh-r-it .k { font: 12px/1 "IBM Plex Mono", monospace; color: var(--mist); opacity: 0; }
.sh-r-it.on { background: #fff; box-shadow: 0 0 0 1px rgba(11,11,11,.08), 0 16px 34px -24px rgba(11,11,11,.35); }
.sh-r-it.on i { background: var(--ink); } .sh-r-it.on .k { opacity: 1; }
.sh-none { margin: 0; padding: 20px; text-align: center; font: 14px "Switzer", "Segoe UI", Arial, sans-serif; color: var(--mist); }
@media (max-width: 760px) {
  .sh-ov { justify-content: flex-start; overflow-y: auto; padding-top: 72px; }
  .sh-map { grid-template-columns: 1fr; grid-template-areas: "core" "here" "sys" "studio" "contact"; gap: 26px; justify-items: center; }
  .sh-g, .sh-g-sys, .sh-g-studio { align-items: center; justify-self: center; text-align: center; }
  .sh-g-sys .sh-it { flex-direction: row; }
  .sh-g .sh-g-l { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 16px; }
  .sh-g-line, .sh-hint { display: none; }
  .sh-core svg { width: 72px; height: 72px; }
  .sh-r-it .b { display: none; }
}
/* spazio per le lettere con discendente (g, p, y) sopra la linea del cartello */
.chapter-title { margin-bottom: .1em; }

/* ============================================================
   ESEMPIO GOS INTERATTIVO (motion.js · gosDemo)
   ============================================================ */
/* schede cliccabili della panoramica */
button.gs-card { font: inherit; text-align: left; color: inherit; cursor: pointer; width: 100%; }
button.gs-card:focus-visible, .gs-btn:focus-visible, .gs-mini:focus-visible, .gs-toggle:focus-visible, .gs-tab:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
button.gs-card .gs-link { transition: transform .5s var(--cine); }
button.gs-card:hover .gs-link { transform: translateX(4px); }
.gs-btn { cursor: pointer; font-family: "Switzer", "Segoe UI", Arial, sans-serif; }
.gs-btn:disabled { opacity: .45; cursor: default; translate: none; }

/* grafici minimi nella striscia dei numeri */
.gs-strip > div { position: relative; }
.gs-spark { width: 100%; height: 22px; margin-top: 6px; overflow: visible; }
.gs-spark polyline { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; stroke-dasharray: 160; stroke-dashoffset: 160; }
.gs-spark.draw polyline { animation: sparkDraw 1.6s var(--cine-io) .3s forwards; }
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }

/* contatore delle schede che "batte" quando cambia */
.gs-tab b { transition: transform .4s var(--cine); }
.gs-tab.bump b { animation: badgeBump .7s var(--cine); }
@keyframes badgeBump { 30% { transform: scale(1.45); } }

/* connessioni: sincronizza, collega */
.gs-sync { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--gs-line); }
.gs-ago { font: 11.5px/1.2 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--mist); }
.gs-mini { flex: none; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(11,11,11,.14); background: transparent; cursor: pointer;
  font: 500 12px/1 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--ink); transition: background .3s, border-color .3s; }
.gs-mini:hover { background: #fff; border-color: rgba(11,11,11,.35); }
.gs-card[data-conn] { position: relative; overflow: hidden; }
.gs-card[data-conn]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.gs-card.syncing::after { animation: syncBar 1.5s var(--cine-io) forwards; }
.gs-card.connecting::after { animation: syncBar 2.4s var(--cine-io) forwards; }
@keyframes syncBar { 0% { transform: scaleX(0); } 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.gs-steps { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.gs-steps i { font: normal 12px/1.3 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--mist); display: flex; align-items: center; gap: 8px; }
.gs-steps i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(11,11,11,.4); transition: background .3s; }
.gs-steps i.on { color: var(--ink); } .gs-steps i.on::before { background: var(--ink); border-color: var(--ink); }
.gs-card.is-off { opacity: .55; }
.gs-card.is-off:hover { translate: none; box-shadow: none; }

/* flussi: interruttore vero, pausa, azioni */
.gs-toggle { border: 0; background: transparent; cursor: pointer; padding: 4px 0; font: 500 13px/1 "Switzer", "Segoe UI", Arial, sans-serif; }
.gs-toggle::before { transition: background .4s var(--cine); }
.gs-toggle:not(.on)::before { background: radial-gradient(circle at 9px 9px, #fff 0 6px, transparent 6.5px), rgba(11,11,11,.22); }
.gs-toggle:not(.on) { color: var(--mist); }
.gs-flow { transition: opacity .5s var(--cine); }
.gs-flow.off .gs-pipe { opacity: .35; filter: grayscale(1); }
.gs-flow-act { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* decisioni: fatto, uscita, nuova */
.gs-decs { display: flex; flex-direction: column; gap: 12px; }
.gs-dec { overflow: hidden; transition: translate .5s var(--cine), border-color .5s, height .5s var(--cine), opacity .4s, padding .5s var(--cine), margin .5s var(--cine), background .5s; }
.gs-dec.done { background: #FAFAF8; border-color: rgba(11,11,11,.22); }
.gs-dec.gone { height: 0 !important; padding-top: 0; padding-bottom: 0; opacity: 0; margin-bottom: -12px; border-width: 0; }
.gs-dec.fresh { animation: decFresh 1.4s var(--cine); }
@keyframes decFresh { 0% { opacity: 0; transform: translateY(-10px); box-shadow: 0 0 0 0 rgba(11,11,11,.0); } 40% { opacity: 1; transform: none; box-shadow: 0 0 0 4px rgba(11,11,11,.08); } 100% { box-shadow: 0 0 0 0 rgba(11,11,11,0); } }
.gs-ok { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--ink); white-space: nowrap; }
.gs-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 46px 20px; text-align: center; border: 1px dashed rgba(11,11,11,.16); border-radius: 16px; animation: gsUp .8s var(--cine) both; }
.gs-empty svg { width: 34px; height: 34px; margin-bottom: 6px; }
.gs-empty circle { fill: none; stroke: rgba(11,11,11,.35); } .gs-empty .d { fill: var(--ink); stroke: none; }
.gs-empty b { font-size: 17px; font-weight: 500; } .gs-empty span { font-size: 13.5px; color: var(--steel); }

/* pannello di dettaglio: scorre da destra sopra l'area di lavoro */
.gs-main { position: relative; transition: filter .5s var(--cine), opacity .5s var(--cine); }
.gs-win.drawer-open .gs-main { filter: blur(2px); opacity: .55; }
.gs-drawer { position: absolute; right: 0; top: 62px; bottom: 38px; z-index: 5; width: min(460px, 100%); overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  padding: 24px 26px 28px; background: rgba(255,255,255,.94); backdrop-filter: blur(20px); border-left: 1px solid var(--gs-line);
  box-shadow: -30px 0 60px -40px rgba(11,11,11,.35); transform: translateX(104%); visibility: hidden;
  transition: transform .7s var(--cine), visibility 0s linear .7s; }
.gs-drawer.show { transform: none; visibility: visible; transition: transform .7s var(--cine), visibility 0s; }
.gs-dr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gs-x { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid rgba(11,11,11,.12); background: #fff; cursor: pointer; font: 18px/1 "Switzer", Arial, sans-serif; color: var(--ink); transition: transform .5s var(--cine), border-color .3s; }
.gs-x:hover { transform: rotate(90deg); border-color: rgba(11,11,11,.35); }
.gs-dr-h { margin: 2px 0 0; font: 500 22px/1.2 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.gs-dr-p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--steel); }
.gs-trace { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; }
.gs-trace::before { content: ""; position: absolute; left: 3.5px; top: 10px; bottom: 10px; width: 1px; background: rgba(11,11,11,.14); }
.gs-trace li { position: relative; display: grid; grid-template-columns: 8px 92px minmax(0,1fr); gap: 12px; align-items: baseline; padding: 8px 0; font-size: 13.5px; line-height: 1.45;
  opacity: 0; transform: translateY(6px); }
.gs-drawer.show .gs-trace li { animation: traceIn .6s var(--cine) forwards; animation-delay: calc(.25s + var(--k) * 140ms); }
@keyframes traceIn { to { opacity: 1; transform: none; } }
.gs-trace li i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); background: #fff; align-self: center; position: relative; z-index: 1; }
.gs-drawer.show .gs-trace li i { animation: traceDot .3s linear forwards; animation-delay: calc(.45s + var(--k) * 140ms); }
@keyframes traceDot { to { background: var(--ink); } }
.gs-trace b { font-weight: 500; color: var(--ink); } .gs-trace span { color: var(--steel); }
.gs-dr-ver { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(11,11,11,.04); font: 500 12.5px/1.4 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--ink); }
.gs-dr-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.gs-dr-act.choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gs-choice { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; border: 1px solid rgba(11,11,11,.14); background: #fff; text-align: left; cursor: pointer;
  font: 13px/1.3 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--steel); transition: border-color .3s, translate .5s var(--cine), box-shadow .5s var(--cine); }
.gs-choice b { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.gs-choice.rec { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.gs-choice:hover { translate: 0 -2px; box-shadow: 0 0 0 1px var(--ink), 0 18px 34px -24px rgba(11,11,11,.4); }

/* notifiche di GOS */
.gs-toasts { position: absolute; right: 18px; bottom: 52px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.gs-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 420px; padding: 11px 12px 11px 14px; border-radius: 14px;
  background: var(--ink); color: var(--paper); font: 13px/1.4 "Switzer", "Segoe UI", Arial, sans-serif; box-shadow: 0 20px 40px -22px rgba(11,11,11,.6);
  animation: toastIn .6s var(--cine) both; }
.gs-toast > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); animation: gsPulse 1.6s ease-in-out infinite; }
.gs-toast button { flex: none; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--paper); cursor: pointer; font: 500 12px/1 "Switzer", Arial, sans-serif; }
.gs-toast button:hover { background: rgba(255,255,255,.12); }
.gs-toast.out { animation: toastOut .5s var(--cine) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }

/* barra di stato: ripristino */
.gs-status-r { display: inline-flex; align-items: center; gap: 16px; }
.gs-reset { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 780px) {
  .gs-drawer { width: 100%; }
  .gs-dr-act.choose { grid-template-columns: 1fr; }
  .gs-toasts { left: 12px; right: 12px; align-items: stretch; }
  .gs-toast { max-width: none; }
  .gs-spark { display: none; }
  .gs-trace li { grid-template-columns: 8px minmax(0,1fr); } .gs-trace li span { grid-column: 2; }
}

/* fonti come pillole, pannello più compatto, focus discreto */
.gs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gs-chip { font: 12px/1 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--steel); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--gs-line); background: #fff; }
.gs-main { min-height: 600px; }
.gs-drawer { gap: 12px; padding: 20px 24px 22px; }
.gs-trace li { padding: 6px 0; }
.gs-x:focus { outline: none; }
.gs-x:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
/* su telefono il dettaglio diventa un pannello che sale dal basso, sopra la barra dell'app */
@media (max-width: 780px) {
  .gs-drawer { position: fixed; left: 0; right: 0; top: auto !important; bottom: 0 !important; width: 100%; max-height: 84vh; max-height: 84svh; z-index: 2200;
    border-left: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -30px 60px -30px rgba(11,11,11,.35); padding-bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateY(104%); }
  .gs-drawer.show { transform: none; }
  .gs-dr-act { margin-top: 6px; }
}
.gs-drawer { --gs-line: rgba(11,11,11,.09); }
/* ============================================================
   LIVELLO AVANZATO: impaginazione editoriale, grafiche sullo scroll, UX
   ============================================================ */
/* --- dettagli di interfaccia --- */
::selection { background: #0B0B0B; color: #F5F5F2; }
html { scrollbar-width: thin; scrollbar-color: rgba(11,11,11,.28) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(11,11,11,.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(11,11,11,.4); }
::-webkit-scrollbar-track { background: transparent; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

/* --- testate editoriali: titolo a sinistra, testo a destra; riga di testata sopra --- */
@media (min-width: 1100px) {
  .home .section:not(.manifesto) > .hsec-head,
  .home .section:not(.manifesto) > .split-head,
  .home .hpin-stage > .split-head {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: clamp(40px, 6vw, 120px); row-gap: 16px; align-items: end;
    max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
  .home .section:not(.manifesto) > .hsec-head > .display,
  .home .section:not(.manifesto) > .split-head > .display,
  .home .hpin-stage > .split-head > .display { grid-column: 1; grid-row: 1 / span 4; max-width: 15ch; margin: 0; }
  .home .section:not(.manifesto) > .hsec-head > :not(.display),
  .home .section:not(.manifesto) > .split-head > :not(.display),
  .home .hpin-stage > .split-head > :not(.display) { grid-column: 2; margin: 0; max-width: 44ch; text-align: left; }
  .home .section > .section-num, .home .hpin-stage > .section-num { position: relative; top: auto; right: auto; margin-bottom: clamp(36px, 5vh, 64px); }
}
.section-num .cine-ch { margin-left: auto; color: var(--mist); }
.section-num .cine-link { color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .5s var(--cine); }
.section-num.is-link { cursor: pointer; }
.section-num.is-link:hover .cine-link, .section-num.is-link:focus-visible .cine-link { opacity: 1; transform: none; }
.section-num.is-link:hover .cine-ch { opacity: .35; }
.section-num.is-link:hover .cine-tick { width: 44px; }
@media (max-width: 1099px) { .section-num .cine-ch, .section-num .cine-link { display: none; } }

/* --- caratteristiche: palco fermo, schede che scorrono di lato --- */
.section.hpin { padding-bottom: 0; }
.hpin-stage { position: sticky; }
.hpin .feat-nav { display: none; }
.hpin .feat-track { scroll-snap-type: none; cursor: default; }
.hpin .feat-carousel { margin-top: clamp(28px, 4vh, 52px); }
.hpin-meter { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font: 11px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; color: var(--mist); }
.hpin-meter b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.hpin-meter i { display: block; width: 160px; height: 1px; background: rgba(11,11,11,.14); margin-left: 8px; overflow: hidden; }
.hpin-meter em { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }

/* --- chiusura: il marchio grande dietro l'invito --- */
.manifesto-glow { display: none; }
.finale-mark { position: absolute; left: 50%; top: 50%; width: min(78vmin, 820px); height: min(78vmin, 820px); transform: translate(-50%, -50%); z-index: 0; pointer-events: none; overflow: visible; }
.finale-mark circle { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 66px 66px; }
.finale-mark .o { stroke: rgba(11,11,11,.16); }
.finale-mark .i { stroke: rgba(11,11,11,.08); }
.finale-mark .d { fill: var(--ink); stroke: none; stroke-dasharray: none; transform: scale(0); transform-box: fill-box; transform-origin: center; opacity: .9; }
.manifesto > :not(.finale-mark):not(.cine-rule) { position: relative; z-index: 1; }

/* --- notifiche globali --- */
.g-toasts { position: fixed; left: 0; right: 0; bottom: 104px; z-index: 2150; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.g-toast { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 13px/1.2 "Switzer", "Segoe UI", Arial, sans-serif; box-shadow: 0 20px 40px -22px rgba(11,11,11,.6); animation: toastIn .55s var(--cine) both; }
.g-toast > i { width: 6px; height: 6px; border-radius: 50%; background: var(--paper); }
.g-toast.out { animation: toastOut .5s var(--cine) forwards; }

/* --- barra di stato: torna all'inizio --- */
.sh-top { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--steel); transition: color .3s; }
.sh-top:hover { color: var(--ink); }

/* testo di destra allineato alla base del titolo */
@media (min-width: 1100px) {
  .home .section:not(.manifesto) > .hsec-head, .home .section:not(.manifesto) > .split-head, .home .hpin-stage > .split-head { grid-template-rows: 1fr auto auto; }
  .home .section:not(.manifesto) > .hsec-head > .display, .home .section:not(.manifesto) > .split-head > .display, .home .hpin-stage > .split-head > .display { grid-row: 1 / -1; align-self: end; }
  .home .section:not(.manifesto) > .hsec-head > .display + *, .home .section:not(.manifesto) > .split-head > .display + *, .home .hpin-stage > .split-head > .display + * { grid-row: 2; }
  .home .section:not(.manifesto) > .hsec-head > .display + * + *, .home .section:not(.manifesto) > .split-head > .display + * + * { grid-row: 3; }
}
/* palco delle caratteristiche più compatto, riga di testata come le altre */
.hpin-stage > .section-num { display: flex; align-items: center; gap: 12px; }
@media (min-width: 1100px) { .home .hpin-stage > .section-num { margin-bottom: clamp(22px, 3vh, 36px); } }
.hpin .split-head { margin-bottom: 0 !important; }
.hpin .feat-carousel { margin-top: clamp(18px, 3vh, 36px); }
.hpin .feat-track { padding-block: 12px; }
.hpin .feat-card { min-height: 360px; padding: 34px 30px 30px; }
.hpin-meter { margin-top: 10px; }
/* nella chiusura restano solo gli anelli: il punto cadrebbe in mezzo al testo */
.finale-mark .d { display: none; }
/* ============================================================
   ONTOLOGIA · scheda dell'entità al clic (motion.js · ontology)
   ============================================================ */
.onto-d text { transition: opacity .22s, fill .5s; }
.onto-d text.swap { opacity: 0 !important; }
.onto-d .dg-node.pin { stroke-width: 2.5; }
.onto-graph.pinned .onto-d .dg-hit { cursor: pointer; }
.onto-d .dg-hit:focus { outline: none; }
.onto-d .dg-hit:focus-visible { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; fill: transparent; }
.onto-card { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; border-radius: 16px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border: 1px solid rgba(11,11,11,.12); box-shadow: 0 26px 50px -30px rgba(11,11,11,.5);
  opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; transition: opacity .35s, transform .6s var(--cine); text-align: left; }
.onto-card.show { opacity: 1; transform: none; pointer-events: auto; }
.oc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oc-top .gs-x { width: 26px; height: 26px; font-size: 15px; }
.oc-t { font: 500 19px/1.2 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.oc-p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--steel); }
.oc-f { font: 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); margin-top: 4px; }
@media (min-width: 900px) { .onto-graph { overflow: visible; } }

/* ============================================================
   PAGINE INTERNE · hero chiaro, editoriale, senza video
   ============================================================ */
.ipage-hero, .ipage-hero.hw { background: transparent !important; color: var(--ink); min-height: 84svh; }
.ipage-hero .hero-media, .ipage-hero canvas, .ipage-hero .grid-bg, .ipage-hero .hero-cue, .ipage-hero .scroll-cue,
.ipage-hero.hw.flat::after, .ipage-hero::before, .ipage-hero-watermark { display: none !important; }
.ipage-hero-index { left: max(var(--edge), calc((100% - var(--maxw)) / 2)); right: max(var(--edge), calc((100% - var(--maxw)) / 2)); color: var(--mist); font-size: 11px; letter-spacing: .14em; }
.ipage-hero-index i { background: rgba(11,11,11,.14); }
.hw-sub { left: max(var(--edge), calc((100% - var(--maxw)) / 2)); right: max(var(--edge), calc((100% - var(--maxw)) / 2)); padding: 0; }
.hw-sub .eyebrow, .ipage-hero-copy .eyebrow { color: var(--mist); font-size: 11px; letter-spacing: .14em; margin-bottom: 26px; }
.ipage-hero .hw-sub h1, .ipage-hero.hw.flat .hw-sub h1, .ipage-hero-copy h1 { color: var(--ink); font-family: "Switzer", "Segoe UI", Arial, sans-serif; font-weight: 500;
  font-size: clamp(44px, 7vw, 112px); line-height: .96; letter-spacing: -.045em; max-width: 15ch; }
.ipage-hero .hw-sub h1 .muted, .ipage-hero-copy h1 .muted { color: #8F8E8A; }
.ipage-hero .hw-sub p, .ipage-hero-copy p { color: var(--steel); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; max-width: 52ch; margin-top: 28px; }

/* ============================================================
   CARD ENTERPRISE · un solo standard per tutto il sito
   Superficie bianca, bordo sottile, riga d'intestazione in mono separata da un filo,
   titolo Switzer 500, testo leggibile, piede con azione dove serve.
   Al passaggio: bordo più scuro, lieve sollevamento, ombra morbida.
   ============================================================ */
:root { --cd-bg: #FFFFFF; --cd-bd: rgba(11,11,11,.10); --cd-bd-h: rgba(11,11,11,.30); --cd-r: 14px;
  --cd-sh: 0 1px 0 rgba(11,11,11,.03); --cd-sh-h: 0 24px 48px -32px rgba(11,11,11,.38), 0 2px 6px -4px rgba(11,11,11,.08); }
.principles article, .prod-spec-cell, .gos-mod, .feat-card, .signal-card, .case-metric, .copt {
  background: var(--cd-bg); border: 1px solid var(--cd-bd); border-radius: var(--cd-r); box-shadow: var(--cd-sh);
  transition: border-color .4s, box-shadow .6s var(--cine), translate .6s var(--cine), opacity .5s, transform .6s var(--cine); }
.principles article:hover, .prod-spec-cell:hover, .gos-mod:hover, .signal-card:hover, .copt:hover {
  border-color: var(--cd-bd-h); box-shadow: var(--cd-sh-h); translate: 0 -2px; background: var(--cd-bg); }

/* --- principi (Comprensione / Verifica / Provenienza, Local-first…) --- */
.principles { gap: 14px; }
.principles article { display: flex; flex-direction: column; padding: 22px 24px 26px; }
.principles article > .mono:first-child { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(11,11,11,.08); font-size: 11px; letter-spacing: .14em; color: var(--mist); }
.principles article > .mono:first-child::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .85; }
.principles h3 { margin: 18px 0 10px; font: 500 clamp(19px, 1.5vw, 22px)/1.22 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.015em; color: var(--ink); }
.principles p { margin: 0; color: var(--steel); font-size: 14.5px; line-height: 1.6; }

/* --- specifiche di prodotto: celle separate invece della griglia a filo --- */
.prod-spec { gap: 14px; background: none; border: 0; }
.prod-spec-cell { padding: 20px 22px 24px; gap: 12px; }
.prod-spec-cell span { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(11,11,11,.08); color: var(--ink); font-size: 11px; letter-spacing: .14em; }
.prod-spec-cell span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
.prod-spec-cell p { color: var(--steel); font-size: 14.5px; line-height: 1.55; }

/* --- moduli GOS (CRM, Vendite…) --- */
.gos-modules { gap: 12px; }
.gos-mod { padding: 18px 20px 20px; min-height: 0; gap: 10px; border-color: var(--cd-bd); }
.gos-mod b { font: 500 17px/1.2 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.gos-mod span { color: var(--mist); font-size: 10px; letter-spacing: .14em; }
.gos-mod:hover { transform: none; }
.gos-mod.add { border-style: dashed; border-color: rgba(11,11,11,.22); background: transparent; box-shadow: none; }
.gos-mod.add b { color: var(--steel); }

/* --- metriche dei casi: numero protagonista, etichetta in mono --- */
.case-metrics { gap: 14px; }
.case-metric { padding: 20px 22px 22px; border-top: 1px solid var(--cd-bd); }
.case-metric b { font-weight: 500; letter-spacing: -.045em; color: var(--ink); font-size: clamp(38px, 4.4vw, 64px); font-variant-numeric: tabular-nums; }
.case-metric strong { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(11,11,11,.08); font: 500 11px/1.3 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }

/* --- caratteristiche in home (carosello / sequenza) --- */
.feat-card { padding: 22px 26px 28px; min-height: 380px; }
.feat-card.is-active { border-color: var(--ink); box-shadow: var(--cd-sh-h); }
.feat-card .feat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 28px; border-bottom: 1px solid rgba(11,11,11,.08); }
.feat-card .feat-n { font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; color: var(--ink); }
.feat-card .feat-head b { font: 400 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; color: var(--mist); }
.feat-card h3 { font: 500 clamp(22px, 2vw, 28px)/1.15 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.025em; color: var(--ink); }
.feat-card p { color: var(--steel); font-size: 15px; line-height: 1.6; }

/* --- Signals e casi --- */
.signal-card { overflow: hidden; }
.signal-card-media { border-bottom: 1px solid var(--cd-bd); }
.signal-card-body { padding: 18px 22px 0; gap: 12px; }
.signal-card-meta { align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(11,11,11,.08); font-size: 10.5px; letter-spacing: .14em; color: var(--mist); }
.signal-card-meta .signal-tag { padding: 4px 8px; border-radius: 4px; background: var(--ink); color: var(--paper); letter-spacing: .12em; }
.signal-card h3 { font: 500 clamp(20px, 1.9vw, 26px)/1.18 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; }
.signal-card-body p { font-size: 14.5px; line-height: 1.55; }
.signal-card-cta { display: flex; justify-content: space-between; align-items: center; margin: auto -22px 0; padding: 14px 22px; border-top: 1px solid rgba(11,11,11,.08);
  font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; color: var(--ink); transition: background .4s; }
.signal-card:hover .signal-card-cta { background: rgba(11,11,11,.03); }

/* --- caso in evidenza (scheda nera): stessi angoli e misure delle card --- */
.app-feature { border-radius: 18px; overflow: hidden; }
.app-feature h3 { font-weight: 500; letter-spacing: -.03em; }
.app-metric b { font-weight: 500; letter-spacing: -.045em; }

/* --- opzioni del modulo contatti --- */
.copt { padding: 16px 18px; }

/* --- prodotti nello sviluppo (GOS · Applicazioni): card chiare come le altre --- */
.dev-products, .section:not(.dark) .dev-products { gap: 14px; background: none; border: 0; }
.dev-product { background: var(--cd-bg); border: 1px solid var(--cd-bd); border-radius: 18px; box-shadow: var(--cd-sh); color: var(--ink);
  transition: border-color .4s, box-shadow .6s var(--cine), translate .6s var(--cine); }
.dev-product:hover { background: var(--cd-bg); border-color: var(--cd-bd-h); box-shadow: var(--cd-sh-h); translate: 0 -2px; }
.dev-product-k { padding-bottom: 14px; border-bottom: 1px solid rgba(11,11,11,.08); color: var(--mist); font-size: 10.5px; letter-spacing: .14em; }
.dev-product h3 { color: var(--ink); font-weight: 500; letter-spacing: -.045em; }
.dev-product p { color: var(--steel); }
.dev-product-go { margin: auto calc(-1 * clamp(26px,3vw,44px)) calc(-1 * clamp(30px,4vw,52px)); padding: 16px clamp(26px,3vw,44px); border-top: 1px solid rgba(11,11,11,.08);
  color: var(--ink); justify-content: space-between; }

/* ============================================================
   PAGINE INTERNE · stessa regia della home
   ============================================================ */
/* apertura: riga indice che si traccia, etichetta, titolo parola per parola, testo a fuoco */
.ipage-hero h1 .cw-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin: 0 -.02em -.14em; }
.ipage-hero.cine h1 .cw-m > span { display: inline-block; transform: translateY(108%) rotate(5deg); transform-origin: 0 100%; }
.ipage-hero.cine-go h1 .cw-m > span { animation: cwRise 1.6s var(--cine) both; animation-delay: calc(.35s + var(--i) * 75ms); }
.ipage-hero .cw-f { transition-delay: calc(.9s + var(--i) * 14ms); }
.ipage-hero.cine .ipage-hero-index i { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.8s var(--cine-io) .1s; }
.ipage-hero.cine-go .ipage-hero-index i { transform: none; }
.ipage-hero.cine .ipage-hero-index span, .ipage-hero.cine .eyebrow { opacity: 0; }
.ipage-hero.cine-go .ipage-hero-index span, .ipage-hero.cine-go .eyebrow { animation: cineUp 1.1s var(--cine) .2s both; }
.ipage-hero .hw-sub { will-change: transform, opacity; transform-origin: 0 60%; }

/* barra delle sezioni nelle pagine interne: niente cambia larghezza.
   A sinistra il nome della sezione in corso (campo fisso), a destra i numeri a misura fissa,
   il nome delle altre sezioni in un'etichetta sopra la voce. */
.chap-nav.auto { gap: 0; padding: 5px 5px 5px 6px; }
.chap-cur { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 10px; width: 210px; padding: 0 16px 0 12px; margin-right: 4px;
  border-right: 1px solid rgba(11,11,11,.10); overflow: hidden; white-space: nowrap; }
.chap-cur-n { flex: none; font: 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; color: var(--mist); font-variant-numeric: tabular-nums; }
.chap-cur-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 13.5px/1.2 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--ink); }
.chap-cur.swap .chap-cur-n, .chap-cur.swap .chap-cur-t { animation: curSwap .55s var(--cine); }
@keyframes curSwap { from { opacity: 0; transform: translateY(6px); } }
.chap-nums { position: relative; display: flex; align-items: center; }
.chap-nav.auto .chap-ind { top: 0; bottom: 0; }
.chap-nav.auto .chap-item { position: relative; }
.chap-nav.auto .chap-btn { width: 38px; justify-content: center; gap: 0; padding: 11px 0 13px; }
.chap-nav.auto .chap-n { opacity: 1; font-size: 11px; }
.chap-nav.auto .chap-bar { left: 9px; right: 9px; bottom: 6px; }
.chap-tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 4px); padding: 7px 10px; border-radius: 8px;
  background: var(--ink); color: var(--paper); font: 500 12px/1.1 "Switzer", "Segoe UI", Arial, sans-serif; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .35s var(--cine); }
.chap-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; background: var(--ink); transform: translate(-50%, -4px) rotate(45deg); border-radius: 1px; }
.chap-nav.auto .chap-item:hover .chap-tip, .chap-nav.auto .chap-btn:focus-visible + .chap-tip { opacity: 1; transform: translate(-50%, 0); }
.chap-nav.auto .chap-item.on:hover .chap-tip { opacity: 0; }
@media (max-width: 720px) {
  .chap-cur { width: 128px; padding: 0 10px; } .chap-cur-n { display: none; }
  .chap-nav.auto .chap-n { display: inline; font-size: 10.5px; }
  .chap-nav.auto .chap-btn { padding: 10px 0 12px; }
  .chap-nav.auto .chap-btn { width: 30px; }
  .chap-nums { overflow-x: auto; max-width: calc(100vw - 170px); scrollbar-width: none; } .chap-nums::-webkit-scrollbar { display: none; }
  .chap-nav.auto .chap-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ipage-hero.cine h1 .cw-m > span, .ipage-hero.cine .eyebrow, .ipage-hero.cine .ipage-hero-index span { transform: none; opacity: 1; animation: none; } }

/* ============================================================
   FINESTRA GOS · gerarchia per eccezione, verificato / dedotto, incognite visibili
   ============================================================ */
/* l'eccezione domina, il resto è quieto */
.gs-panel[data-gs-panel="ov"] .gs-grid { grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); }
.gs-card.alert { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 22px 44px -26px rgba(11,11,11,.7); }
.gs-card.alert .gs-card-h { color: rgba(245,245,242,.62); display: inline-flex; align-items: center; gap: 8px; }
.gs-card.alert .gs-card-h::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); animation: gsPulse 1.6s ease-in-out infinite; }
.gs-card.alert > b { color: var(--paper); font-size: clamp(18px, 1.6vw, 22px); }
.gs-card.alert p { color: rgba(245,245,242,.72); }
.gs-card.alert .gs-link { color: var(--paper); }
.gs-card.alert:hover { border-color: var(--ink); background: #1b1b1a; }
.gs-panel[data-gs-panel="ov"] .gs-card:not(.alert) { background: rgba(255,255,255,.55); box-shadow: none; }
.gs-panel[data-gs-panel="ov"] .gs-card:not(.alert) > b { font-size: 15px; }
.gs-panel[data-gs-panel="ov"] .gs-card:not(.alert) p { font-size: 13px; }
.gs-calm { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 1px solid rgba(11,11,11,.08); border-radius: 12px; background: transparent;
  cursor: pointer; text-align: left; font: 13.5px/1.4 "Switzer", "Segoe UI", Arial, sans-serif; color: var(--steel); transition: border-color .3s, background .3s; }
.gs-calm b { font-weight: 500; color: var(--ink); }
.gs-calm > i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px dashed var(--ink); }
.gs-calm em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--ink); white-space: nowrap; }
.gs-calm:hover { border-color: rgba(11,11,11,.25); background: rgba(255,255,255,.6); }

/* il ragionamento: pieno = verificato, tratteggio = dedotto, con la fonte */
.gs-why { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gs-legend { display: inline-flex; gap: 14px; font: 10px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.gs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gs-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.gs-legend i.d { background: #fff; border: 1px dashed var(--ink); }
.gs-trace li { grid-template-columns: 8px 92px minmax(0, 1fr); }
.gs-trace li em { grid-column: 3; font: normal 9.5px/1.3 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-top: 2px; }
.gs-trace li.inf i { background: #fff !important; border-style: dashed; animation: none !important; }
.gs-trace li.inf span { font-style: italic; }
.gs-trace li.inf b { color: var(--steel); }
@media (max-width: 780px) {
  .gs-panel[data-gs-panel="ov"] .gs-grid { grid-template-columns: minmax(0, 1fr); }
  .gs-trace li em { grid-column: 2; }
}

/* ============================================================
   LEGGIBILITÀ · contrasto WCAG AA
   etichette e testi piccoli in --mist (#6F6F6B, 4,7:1 sul fondo); parti grigie dei titoli
   grandi in #8F8E8A (oltre 3:1, soglia AA per testo grande)
   ============================================================ */
.display .muted, .ipage-hero h1 .muted, .hw-sub h1 .muted, .chapter-title .muted, .gs-h span, .big-words .muted { color: #8F8E8A; }

/* ============================================================
   HEADER FERMO · il menù non si sposta mai
   - non si nasconde scorrendo (come la barra di un'applicazione)
   - la pillola di contesto ha larghezza fissa: cambiando sezione il menù centrale non si ricentra
   ============================================================ */
.header.hidden, body.on-dark .header.hidden { transform: none !important; }
.sh-ctx { width: 280px; max-width: 280px; flex: none; }
.sh-ctx-b { min-width: 0; flex: 1; }

/* ============================================================
   ELEMENTO FORTE NELLE SEZIONI DI SOLO TESTO
   ============================================================ */
/* --- dichiarazione (le introduzioni a due colonne di ogni pagina) --- */
.intro-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: end; }
.intro-split h2 { font-family: "Switzer", "Segoe UI", Arial, sans-serif; font-weight: 500; font-size: clamp(38px, 5vw, 78px); line-height: .98; letter-spacing: -.045em; color: var(--ink); }
.intro-split h2 .muted { color: #8F8E8A; }
.intro-copy { position: relative; gap: 18px; padding-left: clamp(22px, 2.4vw, 34px); }
.intro-copy::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--ink); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.4s var(--cine-io) .2s; }
.intro-copy.in::before, .intro-copy:not([data-reveal])::before { transform: none; }
.intro-copy p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--steel); }
.intro-copy p:first-child { font: 500 clamp(18px, 1.5vw, 22px)/1.45 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.012em; color: var(--ink); }

/* --- catena di verifica: nodi del marchio, collegamenti che si tracciano, ripercorribile al passaggio --- */
.vchain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 7vh, 80px); align-items: start; }
.vchain > i { display: none; }
.vchain > div { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 20px 0 0; border: 0; background: none; transition: opacity .45s var(--cine); }
.vchain > div:hover { background: none; }
.vchain > div::before { content: ""; position: relative; z-index: 1; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; border: 1px solid var(--ink);
  background: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px), radial-gradient(circle, transparent 0 15px, rgba(11,11,11,.14) 15.5px 16.5px, transparent 17px), #fff;
  transition: box-shadow .5s var(--cine), transform .5s var(--cine); }
.vchain > div::after { content: ""; position: absolute; left: 52px; right: 0; top: 26px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--cine-io), background .4s; }
.vchain > div:last-of-type::after { display: none; }
.vchain > div:nth-of-type(1)::after { transition-delay: .3s; } .vchain > div:nth-of-type(2)::after { transition-delay: .7s; } .vchain > div:nth-of-type(3)::after { transition-delay: 1.1s; }
.vchain.in > div::after, .vchain:not([data-reveal]) > div::after { transform: none; }
.vchain .mono { font-size: 11px; letter-spacing: .14em; color: var(--mist); }
.vchain b { font: 500 clamp(20px, 1.9vw, 28px)/1.15 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.025em; color: var(--ink); }
.vchain.trace > div:not(.lit) { opacity: .28; }
.vchain.trace > div.lit::before { box-shadow: 0 0 0 6px rgba(11,11,11,.06); }
.vchain.trace > div.lit:last-of-type::before, .vchain.trace > div.lit.tip::before { transform: scale(1.08); background: radial-gradient(circle, #fff 0 4px, transparent 4.5px), var(--ink); }
.vchain.trace > div:not(.lit)::after, .vchain.trace > div.tip::after { background: rgba(11,11,11,.16); }
@media (max-width: 760px) {
  .intro-split { grid-template-columns: 1fr; align-items: start; }
  .vchain { grid-template-columns: 1fr; gap: 0; }
  .vchain > div { flex-direction: row; align-items: center; gap: 16px; padding: 0 0 28px; }
  .vchain > div::before { margin: 0; flex: none; }
  .vchain > div::after { left: 26px; right: auto; top: 52px; bottom: 0; width: 1px; height: auto; transform: scaleY(0); transform-origin: 50% 0; }
  .vchain.in > div::after { transform: none; }
}

/* risultati della ricerca: il titolo resta sempre leggibile, la provenienza si accorcia */
.sh-r-it { grid-template-columns: 12px minmax(0, 1fr) minmax(0, 42%) 18px; }
.sh-r-it .b { overflow: hidden; text-overflow: ellipsis; text-align: right; }
.vchain + .product-delta { margin-top: clamp(40px, 6vh, 64px); }

/* ============================================================
   TELEFONO · revisione (leggibilità, barra in basso chiara, tocchi)
   ============================================================ */
@media (max-width: 720px) {
  /* barra rapida in basso: chiara come il resto del sito */
  .mobar { background: rgba(250,250,248,.94); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    border-top: 1px solid rgba(11,11,11,.10); box-shadow: 0 -10px 30px -24px rgba(11,11,11,.35); }
  .mobar-item, .mobar-item span { color: var(--ink); }
  .mobar-item span { font-size: 10px; opacity: .62; }
  .mobar-ic svg { opacity: .7; }
  .mobar-item.is-current::before { background: var(--ink); }
  .mobar-item.cta { border: 0; border-radius: 0; padding: 9px 4px 10px; font-size: inherit; letter-spacing: normal; overflow: visible; display: flex; gap: 4px; }
  .mobar-item.cta::before { content: none; }
  .mobar-item.cta i.mobar-ic { width: 30px; height: 30px; background: var(--ink); transform: none; }
  .mobar-item.cta:hover { color: var(--ink); translate: none; }
  .mobar-item.cta .mobar-ic { background: var(--ink); }
  .mobar-item.cta .mobar-ic svg { color: #fff; }
  /* testi in mono: mai sotto gli 11px su schermo piccolo */
  .fb-group span, .fb-group a, .stack-mod > span, .gos-mod > span.mono, .signal-tag, .gc-step-k, .app-metric > span,
  .gc-tab, .gl-row em, .gc-role, .app-feature-k, .pflow-cap, .pflow-core-k, .gos-screen-bar, .gos-live, .case-tag,
  .gc-badge, .gc-verified, .gc-src, .gl-owner, .gl-owner b, .product-delta b.mono { font-size: 11px; }
  /* aree di tocco: lingue nel menu */
  .menu-lang a, .menu-lang b { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; }
  /* scorciatoie da tastiera: non servono su telefono */
  .chap-keys { display: none; }
  /* finestra GOS: le schede scorrono, il bordo destro sfuma per dirlo */
  .gs-nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .gs-nav.at-end { -webkit-mask-image: none; mask-image: none; }
  .gs-tab { padding-left: 12px; padding-right: 12px; }
  /* etichetta di sezione: nel flusso, sopra il titolo (in alto a destra si sovrapponeva al titolo) */
  .section > .section-num { position: relative; top: auto; right: auto; left: auto; display: flex; justify-content: flex-start; margin: 0 0 22px; }
}

/* header: nessun testo a capo; in FR e PT le voci sono più lunghe, la ricerca resta solo icona fino a 1600px */
.header .cta, .sh-search span, .sh-search kbd { white-space: nowrap; }
@media (max-width: 1600px) { html[lang="fr"] .sh-search span, html[lang="fr"] .sh-search kbd, html[lang="pt"] .sh-search span, html[lang="pt"] .sh-search kbd { display: none; } html[lang="fr"] .sh-search, html[lang="pt"] .sh-search { padding: 8px; } }

/* ============================================================
   MENU · chiaro, come il resto del sito (sostituisce il menu nero)
   ============================================================ */
.menu { background: #F6F6F3; color: var(--ink); }
.menu-grid, .menu::before { display: none; }
.menu-links a { color: var(--ink); font-weight: 500; letter-spacing: -.03em; font-size: clamp(30px, 7.4vw, 60px); border-top-color: rgba(11,11,11,.09); }
.menu-links a > span { color: var(--mist); font-size: 11px; letter-spacing: .14em; width: 2.2em; }
.menu-links a::after { color: var(--ink); font-size: .5em; }
.menu-links a:hover, .menu-links a.current { color: var(--ink); }
.menu-links a:hover > span, .menu-links a.current > span { color: var(--ink); }
.menu-links a > span { position: relative; white-space: nowrap; }
.menu-links a.current > span::before { content: ""; position: absolute; left: -13px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); }
.menu-links { padding-left: 14px; }
.menu-close { color: var(--steel); }
.menu-close:hover { color: var(--ink); }
.menu-close .mc-x::before, .menu-close .mc-x::after { background: currentColor; }
.menu-lang b { color: var(--ink); }
.menu-lang a, .menu-meta, .menu-meta a { color: var(--steel); }
.menu-lang a:hover, .menu-meta a:hover { color: var(--ink); }
.menu-lang > span { color: rgba(11,11,11,.25); }
.menu-talk { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; flex-basis: 100%; padding: 15px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 500 15px/1 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.01em; text-transform: none; margin-bottom: 8px; }
.menu-talk i { font-style: normal; }
@media (min-width: 721px) { .menu-talk { flex-basis: auto; } }
body.menu-open .header .wordmark, body.menu-open .header .sh-search { position: relative; z-index: 1600; }

/* ============================================================
   NAVIGAZIONE DA TELEFONO · una sola barra in basso + foglio delle sezioni
   ============================================================ */
.mnav, .msheet { display: none; }
@media (max-width: 720px) {
  body.has-mnav .mobar, body.has-mnav .chap-nav { display: none !important; }
  body.has-mnav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1600;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(250,250,248,.94);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid rgba(11,11,11,.10); box-shadow: 0 -12px 30px -26px rgba(11,11,11,.45); }
  .mn-t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 4px 2px; border-radius: 12px;
    color: var(--steel); font: 500 10.5px/1.1 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: 0; -webkit-tap-highlight-color: transparent; transition: color .25s, background .25s; }
  .mn-t span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mn-t i { position: relative; display: grid; place-items: center; width: 34px; height: 26px; border-radius: 999px; transition: background .25s; }
  .mn-t svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .mn-t svg .f { fill: currentColor; stroke: none; }
  .mn-t:active { background: rgba(11,11,11,.05); }
  .mn-t.is-cur, .mn-t.on { color: var(--ink); }
  .mn-t.is-cur i, .mn-t.on i { background: rgba(11,11,11,.07); }
  .mn-cta { color: var(--ink); }
  .mn-cta i { background: var(--ink); color: #fff; }
  .mn-cta.is-cur i { background: var(--ink); }
  .mn-c { position: absolute; top: -7px; right: -14px; padding: 2px 4px; border-radius: 6px; background: var(--ink); color: #fff;
    font: 500 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .02em; font-style: normal; }
  .mn-c:empty { display: none; }
  body.menu-open .mnav { background: #F6F6F3; box-shadow: none; }
  .menu { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .menu-links a { padding: 13px 0; font-size: 30px; }
  .menu-foot { gap: 14px; align-items: flex-start; }
  .menu-meta { text-align: left; }
  .menu-lang { gap: 6px; flex-wrap: wrap; }
  .menu-lang > span { display: none; }
  .menu-lang a, .menu-lang b { min-width: 46px; min-height: 40px; border-radius: 999px; border: 1px solid rgba(11,11,11,.12); background: #fff; font-size: 12px; }
  .menu-lang b { background: var(--ink); color: #fff; border-color: var(--ink); }

  /* foglio delle sezioni */
  .msheet { display: block; position: fixed; inset: 0; z-index: 1550; }
  .msheet[hidden] { display: none; }
  .ms-scrim { position: absolute; inset: 0; background: rgba(11,11,11,.22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
  .ms-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 76vh; display: flex; flex-direction: column;
    padding: 8px 18px calc(78px + env(safe-area-inset-bottom)); background: #FBFBF9; border-radius: 22px 22px 0 0;
    box-shadow: 0 -24px 60px -30px rgba(11,11,11,.45); transform: translateY(102%); transition: transform .42s cubic-bezier(.2,.8,.2,1); }
  .msheet.open .ms-scrim { opacity: 1; }
  .msheet.open .ms-panel { transform: none; }
  .ms-grab { width: 38px; height: 4px; border-radius: 4px; background: rgba(11,11,11,.16); margin: 2px auto 12px; }
  .ms-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 0 2px 14px; border-bottom: 1px solid rgba(11,11,11,.08); }
  .ms-k { display: block; font: 500 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: 7px; }
  .ms-h { display: block; font: 500 17px/1.25 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.015em; color: var(--ink); }
  .ms-x { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(11,11,11,.12); background: #fff; font-size: 20px; line-height: 1; color: var(--ink); }
  .ms-list { list-style: none; margin: 0; padding: 6px 0 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .ms-list li.grp { padding: 10px 0 4px; border-bottom: 1px solid rgba(11,11,11,.06); }
  .ms-ch { display: block; padding: 4px 2px 6px; font: 500 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
  .ms-list button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 8px 10px; border-radius: 12px; text-align: left; color: var(--steel); transition: background .25s, color .25s; }
  .ms-list button i { flex: none; width: 34px; font: 400 11px/1 "IBM Plex Mono", monospace; font-style: normal; color: var(--mist); }
  .ms-list button b { font: 500 16px/1.25 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: -.01em; }
  .ms-list button.on { background: rgba(11,11,11,.05); color: var(--ink); }
  .ms-list button.on i { color: var(--ink); }
  .ms-list button { position: relative; padding-left: 24px; }
  .ms-list button.on::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); }
  body.ms-open { overflow: hidden; }
  /* aperture dei capitoli: su telefono meno strada a vuoto (resta l'animazione delle lettere) */
  .chapter { height: 135vh; height: 135svh; }
  /* l'header c'è subito: niente attesa dell'apertura */
  .cine-intro .header { animation: none; }
  /* ritmo verticale: meno vuoto tra le sezioni */
  .section, .home .section { padding-block: 72px; }
  .next { padding-block: 64px; }
  /* hero delle pagine interne: alto quanto il contenuto, non uno schermo intero vuoto sopra il titolo */
  .ipage-hero, .ipage-hero.hw { min-height: 0; padding: calc(var(--header-h, 76px) + 76px) var(--edge) 56px; }
  .ipage-hero .hw-sub { position: relative; left: auto; right: auto; bottom: auto; }
  .ipage-hero .hero-hud { display: none; }
  /* footer compatto: contatti per intero, sede e sistema affiancati */
  .footer { padding-top: 56px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-top: 36px; padding-bottom: 32px; }
  .footer-top .footer-brand, .footer-top .footer-col:nth-child(2) { grid-column: 1 / -1; }
  .footer-col { gap: 9px; }
  .footer-col a, .footer-col p { font-size: 14px; }
  .footer-bottom { gap: 10px; }
}

@media (hover: none) { .cine-intro .header { animation: none; } }

/* ============================================================
   CONTATTI · procedura a schermo intero
   La procedura ha la sua barra in alto e i suoi pulsanti in basso: niente barre del sito sopra.
   ============================================================ */
body:has(.cwiz) .mnav, body:has(.cwiz) .msheet, body:has(.cwiz) .sh-status, body:has(.cwiz) .chap-nav, body:has(.cwiz) .mobar { display: none !important; }
body:has(.cwiz) { padding-bottom: 0 !important; }
/* logo uguale a quello del sito: GUERRILLA leggero, BRAIN 500, quadratino */
.cwiz .cwiz-wm { display: inline-flex; align-items: center; gap: .34em; font: 300 15px/1 "Switzer", "Segoe UI", Arial, sans-serif; letter-spacing: .34em; color: var(--ink); }
.cwiz .cwiz-wm b { font-weight: 500; letter-spacing: .34em; }
.cwiz .cwiz-wm i { width: 5px; height: 5px; border-radius: 0; margin: 0; vertical-align: 0; background: currentColor; }
/* lingue: colore del sito, non quello dei link visitati */
.cwiz .cwiz-lang a, .cwiz .cwiz-lang a:visited { color: var(--mist); }
.cwiz .cwiz-lang a:hover { color: var(--ink); }
.cwiz .cwiz-lang b { color: var(--ink); }
/* le tre scelte in una riga su schermo largo */
@media (min-width: 1000px) { .cwiz .copt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cwiz .copt { min-height: 168px; } }
/* l'avviso compare accanto al pulsante che lo ha provocato */
@media (min-width: 761px) { .cwiz .cform-error { left: auto; right: var(--edge); bottom: 84px; text-align: right; } }
.cwiz .cform-error { color: var(--ink); font-weight: 500; }
.cwiz .cform-error::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; vertical-align: 1px; }
.cwiz .cerr, .cwiz .cerr.show { color: var(--ink); font-style: normal; font-weight: 500; }
.cwiz .cerr.show::before { content: "!"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 9px; font-weight: 600; vertical-align: 1px; }
.cwiz .cinput.has-err input, .cwiz .cinput.has-err textarea { border-bottom: 2px solid var(--ink); }
.cwiz .cform-nav .cbtn { white-space: nowrap; }
@media (max-width: 760px) { .cwiz .cform-nav .cbtn { padding-left: 12px; padding-right: 12px; gap: 8px; } }
/* contatti: l'icona dei cookie sta sopra il piede della procedura, non sul testo */
body:has(.cwiz) #CookiebotWidget { bottom: 96px !important; left: 16px !important; }
@media (max-width: 760px) { body:has(.cwiz) #CookiebotWidget { top: 64px !important; bottom: auto !important; left: auto !important; right: 12px !important; transform: scale(.8); transform-origin: right top; } }

/* contatti, schermo largo: i pulsanti seguono il contenuto del passo (allineati a sinistra, sotto le opzioni) */
@media (min-width: 761px) {
  .cwiz .cstep { padding-bottom: 110px; }
  .cwiz .cstep .cform-nav { position: static; display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 6px 0 0; padding: 0; background: none; border: 0; }
  .cwiz .cstep .cform-nav [hidden] { display: none; }
  .cwiz .cstep .cform-error { position: static; margin: -14px 0 0; text-align: left; }
  .cwiz .cnav-hint { margin-left: 8px; font-size: 11px; letter-spacing: .1em; color: var(--mist); text-transform: uppercase; white-space: nowrap; }
}
.cnav-hint[hidden] { display: none !important; }
@media (max-width: 760px), (hover: none) { .cnav-hint { display: none !important; } }

/* contatti: hover immediati e fermi (niente sollevamenti né transizioni lente che sembrano bloccarsi) */
.cwiz .copt { transform: none !important; translate: none !important; transition: border-color .18s, box-shadow .22s, background-color .18s, color .18s; }
.cwiz .copt:hover { border-color: rgba(11,11,11,.32); box-shadow: 0 10px 28px -20px rgba(11,11,11,.4); background: #fff; }
.cwiz .copt.on, .cwiz .copt.on:hover { background: var(--ink); border-color: var(--ink); box-shadow: 0 14px 30px -22px rgba(11,11,11,.6); }
.cwiz .copt.on b { color: #fff; } .cwiz .copt.on small { color: rgba(255,255,255,.72); } .cwiz .copt.on .copt-k { color: rgba(255,255,255,.5); }
.cwiz .chip { transform: none !important; translate: none !important; transition: background-color .18s, border-color .18s, color .18s; }
.cwiz .cbtn { transform: none !important; translate: none !important; transition: background-color .18s, border-color .18s, color .18s, opacity .18s; flex: 0 0 auto; }
.cwiz .cbtn.ghost:hover { background: rgba(11,11,11,.05); border-color: var(--ink); }
.cwiz .cbtn[data-next]:hover, .cwiz .cbtn.solid:hover { opacity: 1; background: #2a2a28; }
.cwiz .cbtn:focus { outline: none; }
.cwiz .cbtn:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.cwiz .cform-nav .cbtn[hidden] { display: none !important; }
@media (max-width: 760px) { .cwiz .cform-nav .cbtn { flex: 1 1 0; min-width: 0; } }

/* telefono: dettaglio GOS su una colonna (passo, contenuto, fonte uno sotto l'altro) */
@media (max-width: 780px) {
  .gs-trace li { grid-template-columns: 8px minmax(0, 1fr); row-gap: 3px; }
  .gs-trace li b, .gs-trace li span, .gs-trace li em { grid-column: 2; }
  .gs-trace li i { grid-row: 1; align-self: center; }
}
/* telefono: risultati della ricerca con il titolo intero, il contesto sotto */
@media (max-width: 720px) {
  .sh-r-it { grid-template-columns: 12px minmax(0, 1fr); row-gap: 4px; padding: 11px 12px; }
  .sh-r-it .a { white-space: normal; }
  .sh-r-it .b { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .sh-r-it .k { display: none; }
}

/* aperture dei capitoli: il titolo gigante sta sempre nello schermo, qualunque sia la lunghezza del nome
   (0.8em circa per lettera con la spaziatura iniziale dell'animazione) */
.chapter-title { font-size: min(clamp(84px, 19vw, 300px), calc(92vw / (var(--n, 6) * 0.8))); }

/* voci di menu di due parole (Chi siamo, À propos, Sobre nós): mai a capo */
.header .nav a { white-space: nowrap; }
.header .cta { flex: none; }
@media (min-width: 1121px) and (max-width: 1320px) { .header .nav a { padding-left: 9px; padding-right: 9px; } .header .lang-switch { gap: 6px; } }
/* FR e PT hanno voci più lunghe: il menu compatto arriva prima (1180px invece di 1120px) */
@media (max-width: 1180px) { html[lang="fr"] .header .nav, html[lang="pt"] .header .nav, html[lang="fr"] .header .cta, html[lang="pt"] .header .cta { display: none; } html[lang="fr"] .burger, html[lang="pt"] .burger { display: block; margin-left: auto; } html[lang="fr"] .header.sh-head .sh-search, html[lang="pt"] .header.sh-head .sh-search { margin-left: auto; } }

/* pulsante "ingrandisci" dei video dei casi: stessa grafica, area di tocco 42px */
.gos-expand { position: relative; }
.gos-expand::after { content: ""; position: absolute; inset: -8px; }

/* etichette mono: mai sotto i 10,5px anche su desktop */
.stack-mod > span, .gc-badge, .gc-role, .gc-verified, .gc-src, .gc-step-k, .pflow-cap, .gl-row em, .gl-owner, .gs-trace li em { font-size: 10.5px; }