/* ===========================================================================
 * LIVEDATA OS · Override nav per link reali  (site/templates/os/os-overrides.css)
 * ---------------------------------------------------------------------------
 * Nel port PW la navigazione usa <a> (SEO / no-JS), ma os.css stila i vecchi
 * <button>. Qui estendo le stesse regole agli <a>. Collega questo file DOPO
 * os.css, oppure incolla il contenuto in fondo a os.css.
 * =========================================================================== */

/* ── MENUBAR ─────────────────────────────────────────────────────────────── */
.mb-nav a{
  position:relative;padding:8px 12px;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.02em;color:var(--text-dim);transition:color .3s;white-space:nowrap;
  text-decoration:none;line-height:1;display:inline-flex;align-items:center;
}
.mb-nav a:hover{color:var(--text)}
.mb-nav a[aria-current="page"],
.mb-nav a[aria-current="true"]{color:var(--text)}
.mb-nav a[aria-current="page"]::after,
.mb-nav a[aria-current="true"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1px;background:var(--accent-lit);
}

/* ── DOCK (icone) ────────────────────────────────────────────────────────── */
.dock a,.dock .dock-btn{
  position:relative;width:40px;height:40px;display:grid;place-items:center;
  color:var(--text-dim);transition:.3s var(--ease);text-decoration:none;
}
.dock a svg,.dock .dock-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5}
.dock a:hover,.dock .dock-btn:hover{color:var(--text);background:var(--glass);transform:translateY(-3px)}
.dock a[aria-current="page"],.dock a[aria-current="true"]{color:var(--accent-lit)}
.dock a[aria-current="page"]::after,.dock a[aria-current="true"]::after{
  content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent-lit);
}
.dock a::before,.dock .dock-btn::before{
  content:attr(data-label);position:absolute;top:-30px;left:50%;
  transform:translateX(-50%) translateY(4px);font-family:var(--f-mono);font-size:10px;
  letter-spacing:.06em;white-space:nowrap;color:var(--text);background:var(--bg-2);
  border:1px solid var(--line);padding:3px 8px;opacity:0;pointer-events:none;transition:.25s;
}
.dock a:hover::before,.dock .dock-btn:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── MENU MOBILE ─────────────────────────────────────────────────────────── */
.mmenu a{
  text-align:left;padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:500;font-size:clamp(22px,6vw,34px);
  color:var(--text);text-decoration:none;display:block;
}
.mmenu a[aria-current="page"],.mmenu a[aria-current="true"]{color:var(--accent-lit)}

/* pulsante di chiusura del menu mobile */
.mmenu-close{
  position:absolute;top:18px;right:var(--gutter);width:44px;height:44px;
  display:grid;place-items:center;font-size:22px;line-height:1;color:var(--text);
  background:none;border:1px solid var(--line-2);cursor:pointer;transition:.3s;
}
.mmenu-close:hover{color:var(--accent-lit);border-color:var(--accent-lit)}

/* ── PAGINATORE (insights / progetti) ────────────────────────────────────── */
.feed-pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px;align-items:center}
.feed-pager .pg{
  min-width:36px;height:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;color:var(--text-dim);border:1px solid var(--line);
  text-decoration:none;transition:.25s;
}
.feed-pager .pg:hover{border-color:var(--accent-lit);color:var(--text)}
.feed-pager .pg.is-cur{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── PAGINE DI LETTURA (articoli / progetti) ─────────────────────────────── */
.reader-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  padding:116px var(--gutter) 120px;display:flex;justify-content:center;align-items:flex-start}
.reader{width:100%;max-width:820px}
.reader__back{display:inline-flex;font-family:var(--f-mono);font-size:12px;color:var(--text-dim);
  letter-spacing:.03em;text-decoration:none;margin-bottom:26px;transition:.25s}
.reader__back:hover{color:var(--accent-lit);transform:translateX(-3px)}
.reader__cat{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-lit)}
.reader__title{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(30px,4.4vw,52px);margin:12px 0 14px}
.reader__meta{display:flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:12px;
  color:var(--text-faint);letter-spacing:.03em;margin-bottom:34px}
.reader__intro{font-size:clamp(16px,1.4vw,19px);line-height:1.7;color:var(--text);margin-bottom:30px}
.reader__intro p{margin:0 0 14px}
.reader__hero{margin:0 0 34px;border:1px solid var(--line)}
.reader__hero img{display:block;width:100%;height:auto}
.reader__body{font-size:16px;line-height:1.8;color:var(--text);max-width:68ch}
.reader__body>*:first-child{margin-top:0}
.reader__body h2{font-family:var(--f-display);font-weight:600;color:var(--text);font-size:clamp(22px,2.6vw,30px);margin:38px 0 14px;letter-spacing:-.01em}
.reader__body h3{font-family:var(--f-display);font-weight:500;color:var(--text);font-size:clamp(18px,2vw,22px);margin:30px 0 12px}
.reader__body h4{font-family:var(--f-display);font-weight:500;color:var(--text);font-size:17px;margin:24px 0 10px}
.reader__body p{margin:0 0 18px}
.reader__body a{color:var(--accent-lit);text-decoration:underline;text-underline-offset:2px}
.reader__body ul,.reader__body ol{margin:0 0 18px;padding-left:22px}
.reader__body li{margin:6px 0}
.reader__body img{max-width:100%;height:auto;border:1px solid var(--line);margin:20px 0}
.reader__body blockquote{border-left:2px solid var(--accent-lit);padding-left:18px;margin:22px 0;color:var(--text)}
.reader__body pre{background:var(--bg-2);border:1px solid var(--line);padding:16px;overflow-x:auto;margin:20px 0;font-family:var(--f-mono);font-size:13px}
.reader__body code{font-family:var(--f-mono);font-size:.9em;background:var(--glass);border:1px solid var(--line);padding:1px 5px}
.reader__gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:30px}
.reader__gallery img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line)}

/* progetto: striscia specifiche + banner + cta */
.reader__specs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 34px}
.reader__specs>div{background:var(--card);padding:16px 18px}
.reader__specs .k{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.reader__specs .v{font-family:var(--f-display);font-weight:500;font-size:15px;color:var(--text);line-height:1.35}
.reader__banner{aspect-ratio:21/9;overflow:hidden;border:1px solid var(--line);margin:34px 0}
.reader__banner img{width:100%;height:100%;object-fit:cover;display:block}
.reader__cta{margin-top:34px}
@media (max-width:760px){ .reader__specs{grid-template-columns:1fr!important} .reader__banner{aspect-ratio:16/9} }

/* barra di progresso lettura — figlia di <body>, ancorata al viewport (fuori dallo stage trasformato) */
.reader-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:65;pointer-events:none}
.reader-progress i{display:block;height:100%;width:0;background:var(--accent-lit);transition:width .1s linear}

/* capolettera: solo quando il corpo inizia con un paragrafo (non con un titolo) */
.reader__body>p:first-child::first-letter{float:left;font-family:var(--f-display);font-weight:600;
  font-size:3.2em;line-height:.82;padding:6px 12px 0 0;color:var(--text)}
@media (max-width:560px){ .reader__body>p:first-child::first-letter{font-size:2.6em;padding:4px 9px 0 0} }

/* ── LANGUAGE SWITCHER ────────────────────────────────────────────────────── */
.lang-switch{display:inline-flex;align-items:center;gap:2px;margin-right:4px}
.lang-switch a{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--text-faint);
  text-decoration:none;padding:4px 6px;transition:.25s;line-height:1}
.lang-switch a:hover{color:var(--text)}
.lang-switch a[aria-current="true"]{color:var(--accent-lit)}
@media (max-width:560px){ .lang-switch{display:none} } /* su mobile resta nel menu, non nella barra */

/* ── ACCESSIBILITÀ ────────────────────────────────────────────────────────── */
.skip-link{position:fixed;top:-64px;left:12px;z-index:9999;background:var(--accent);color:#fff;
  padding:10px 16px;font-family:var(--f-mono);font-size:13px;text-decoration:none;
  border:1px solid var(--accent-lit);transition:top .2s}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--accent-lit);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ── LOGO UFFICIALE ───────────────────────────────────────────────────────── */
.osmark__logo{height:19px;width:auto;display:block;filter:brightness(0) invert(1)} /* bianco su scuro */
[data-theme="light"] .osmark__logo{filter:none} /* nero originale su chiaro */

/* ── P.IVA globale nella status bar ──────────────────────────────────────── */
.sb-legal{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);letter-spacing:.02em;white-space:nowrap}
@media (max-width:640px){ .statusbar .sb-stat .live{display:none} }

/* logo footer (stesso comportamento tema del logo menubar) */
.ldf-logo{height:22px;width:auto;display:block;filter:brightness(0) invert(1)}
[data-theme="light"] .ldf-logo{filter:none}

/* logo nel boot: bianco su boot scuro, nero su boot chiaro */
.boot__logo-img{height:24px;width:auto;filter:brightness(0) invert(1)}
[data-theme="light"] .boot__logo-img{filter:none}

/* ── FAILSAFE progressive enhancement ─────────────────────────────────────
   Se il JS è disattivo (.no-js) o os.js non è partito entro 5s (.ld-stuck),
   i contenuti dei moduli restano comunque visibili (niente pagina vuota). */
html.no-js .module .rv,
html.ld-stuck .module .rv{opacity:1 !important;transform:none !important}

/* ── 404 in stile OS ──────────────────────────────────────────────────────── */
.reader--404{max-width:640px}
.err-nav{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-2)}
.err-nav__label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:14px}
.err-links{display:flex;flex-direction:column;gap:2px}
.err-links a{font-family:var(--f-mono);font-size:14px;color:var(--text-dim);text-decoration:none;
  padding:8px 0;border-bottom:1px solid transparent;transition:.2s;width:fit-content}
.err-links a:hover{color:var(--accent-lit)}

/* ── MURO LOGHI CLIENTI (marquee CSS, niente JS) ──────────────────────────── */
.logo-wall{margin-top:34px;max-width:520px}
.logo-wall__label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:16px}
.logo-wall__mask{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-wall__track{display:flex;align-items:center;width:max-content;animation:logoScroll 48s linear infinite}
.logo-wall:hover .logo-wall__track,.logo-wall:focus-within .logo-wall__track{animation-play-state:paused}
.logo-wall__track img{height:65px;width:auto;flex:none;margin-right:52px;
  filter:grayscale(1) brightness(0) invert(1);opacity:.45;transition:opacity .3s,filter .3s}
.logo-wall__track img:hover{filter:none;opacity:1}
[data-theme="light"] .logo-wall__track img{filter:grayscale(1);opacity:.55}
[data-theme="light"] .logo-wall__track img:hover{filter:none;opacity:1}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logo-wall__track{animation:none;flex-wrap:wrap;justify-content:flex-start;width:auto;gap:26px 40px}
  .logo-wall__track img{margin-right:0}
  .logo-wall__mask{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:560px){ .logo-wall__track img{height:26px;margin-right:40px} }

/* ── HERO · visualizzazione "spina deterministica" ────────────────────────── */
.hero-vis__spin{animation:hvSpin 28s linear infinite}
@keyframes hvSpin{to{transform:rotate(360deg)}}
.hero-vis__flow{animation:hvFlow 3.6s cubic-bezier(.45,0,.2,1) infinite}
@keyframes hvFlow{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:1}
  44%{transform:translateX(112px)}          /* arrivo su DECIDE */
  56%{transform:translateX(112px)}          /* micro-pausa: la regola decide */
  92%{opacity:1}
  100%{transform:translateX(224px);opacity:0} /* uscita su ESEGUE */
}
@media (prefers-reduced-motion:reduce){
  .hero-vis__spin,.hero-vis__flow{animation:none}
  .hero-vis__flow{opacity:0}
}

/* ══ AUDIT DESIGN · OVERVIEW ══════════════════════════════════════════════ */

/* 1 · Contrasto AA in tema chiaro: --text-faint da ~3:1 a ~5:1 */
body[data-theme="light"]{ --text-faint:#586576; }

/* 2 · Tipografia hero: titolone più "tight" e crisp (era line-height di default) */
.h-xl{letter-spacing:-.02em;line-height:1.04}

/* 3 · Micro-interazioni (le giurie guardano questi dettagli) */
.tile{transition:background .3s var(--ease)}
.tile b{transition:color .3s var(--ease)}
.tile:hover{background:var(--glass)}
.tile:hover b{color:var(--accent-lit)}
.btn--ghost:hover{background:var(--glass)}

/* ══ AUDIT DESIGN · PILASTRI ══════════════════════════════════════════════ */
/* icona che reagisce al hover */
.pill__ic{transition:transform .35s var(--ease)}
.pill:hover .pill__ic{transform:translateY(-2px) scale(1.06)}
/* freccia che scorre (micro-interazione premium) */
.pill__arrow{display:inline-block;transition:transform .3s var(--ease)}
.pill:hover .pill__arrow{transform:translateX(5px)}
/* indice sistematico 01–04, filigrana in basso a destra */
.pill__more{position:relative;z-index:1}
.pill__idx{position:absolute;right:18px;bottom:15px;font-family:var(--f-mono);font-weight:500;
  font-size:32px;line-height:1;color:var(--text);opacity:.06;pointer-events:none;z-index:0;
  transition:opacity .35s var(--ease),color .35s var(--ease)}
.pill:hover .pill__idx{opacity:.13;color:var(--accent-lit)}

/* ══ AUDIT DESIGN · STACK (ispettore livelli) ═════════════════════════════ */
/* barra-indicatore verticale sulla riga: tenue al hover, accento se attiva */
.stk-row{position:relative}
.stk-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:transparent;transition:background .3s var(--ease)}
.stk-row:hover::before{background:var(--line-2)}
.stk-row:hover .n{color:var(--accent-lit)}
.stk-row[aria-selected="true"]::before{background:var(--accent-lit)}
.stk-row[aria-selected="true"] .ly{color:var(--accent-lit)}
/* refresh del pannello: il contenuto entra in scaletta ad ogni selezione */
.stk__detail .big{animation:stkIn .34s var(--ease) both}
.stk__detail h3{animation:stkIn .34s .05s var(--ease) both}
.stk__detail p{animation:stkIn .34s .10s var(--ease) both}
.stk__detail .chips{animation:stkIn .34s .15s var(--ease) both}
@keyframes stkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .stk__detail .big,.stk__detail h3,.stk__detail p,.stk__detail .chips{animation:none}
}
/* strata a spina: la barra del livello attivo entra con un flash a ogni selezione */
.stk__strata rect.on{animation:stkOn .45s var(--ease) both}
@keyframes stkOn{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .stk__strata rect.on{animation:none} }

/* ══ AUDIT DESIGN · METODO timeline ══════════════════════════════════════ */
.method__vis text.met-n{font-family:var(--f-mono)}

/* ══ AUDIT DESIGN · VERTICALI (card app) ══════════════════════════════════ */
/* stesso linguaggio di Pilastri: icona reattiva + linea d'accento dal basso */
.app__ic{transition:transform .35s var(--ease)}
.app:hover .app__ic{transform:translateY(-2px) scale(1.05)}
.app:hover .app__open{transform:translate(2px,-2px)}
.app::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--accent-lit);transition:width .4s var(--ease)}
.app:hover::after{width:100%}
/* link "prova dal vivo": sottolineatura netta al hover */
.expcol a{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s var(--ease)}
.expcol a:hover{border-color:var(--accent-lit)}

/* ══ AUDIT DESIGN · CAPACITÀ (allineo le card al sistema) ═════════════════ */
.capcard{transition:background .3s var(--ease)}
.capcard:hover{background:var(--glass)}
.capcard .ic{transition:transform .35s var(--ease)}
.capcard:hover .ic{transform:translateY(-2px) scale(1.06)}

/* ══ AUDIT DESIGN · METODO (tocco editoriale sobrio) ═════════════════════ */
.step h4{transition:color .3s var(--ease)}
.step:hover h4{color:var(--accent-lit)}

/* ══ AUDIT DESIGN · CONTATTI (righe vive) ════════════════════════════════ */
.cline{transition:background .25s var(--ease)}
.cline:hover{background:var(--glass)}
.cline:hover span{color:var(--text-dim)}

/* language switcher dentro il menu mobile (dove la barra lo nasconde) */
.mmenu-lang{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.mmenu-lang .lang-switch{display:inline-flex!important}
.mmenu-lang .lang-switch a{font-size:15px;padding:8px 12px}

/* ── CTA PREVENTIVO (riutilizzabile nei moduli) ──────────────────────────── */
.mod-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:56px;padding:26px 30px;border:1px solid var(--line-2);border-radius:14px;background:var(--glass)}
.mod-cta__txt{max-width:60ch}
.mod-cta__h{font-family:var(--f-disp,'Space Grotesk'),sans-serif;font-size:22px;line-height:1.15;margin:0 0 4px}
.mod-cta__p{margin:0;color:var(--text-dim)}
@media (max-width:560px){ .mod-cta{padding:22px} .mod-cta .btn{width:100%;justify-content:center} }