/* GENERATO da wordpress/strumenti/adatta_css.py — non modificare a mano.
   Sorgenti: src/styles/critical.css + src/styles/main.css del sito statico.
   Gli adattamenti al markup di Elementor stanno in dbyte-elementor.css. */

/* CSS critico, inline nel <head>: font, token, fondo, loader, transizione. Il resto è in main.css. */
/* Font gratuiti al posto di quelli a pagamento della reference (SentientX usa PP Neue Montreal 400):
   Archivo (istanza a larghezza 97, tarata su Neue Montreal) per tutto · Fragment Mono solo per micro-dati. */
@font-face {
  font-family: 'Archivo DB';
  src: url('../fonts/archivo-w97-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('../fonts/fragment-mono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* metriche del fallback allineate ad Archivo per ridurre il salto al caricamento del font */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 100.6%;
  ascent-override: 87.3%;
  descent-override: 20.9%;
  line-gap-override: 0%;
}

/* Palette misurata su sentientx.com (crema, antracite, nero, card al 4%, un solo accento pallido).
   L'accento è il blu del vecchio sito dottorbyte.it (#1e73be, quello della scritta DOTTORBYTE), schiarito a
   un azzurro pallido: con il testo nero sopra resta a 14,7:1. I nomi --lime e --logo-lime sono rimasti per
   non toccare classi e pagine già importate in WordPress: oggi sono l'azzurro e il blu.
   I toni del logo (monitor, tastiera, cartello) restano solo nelle etichette-stato delle mini-interfacce. */
body {
  --cream: var(--e-global-color-dbytecream, #fffbf7);
  --white: var(--e-global-color-dbytewhite, #ffffff);
  --black: var(--e-global-color-dbyteblack, #000000);
  --ink: var(--e-global-color-dbyteink, #1c1c1c);        /* sezioni scure (hero, Aziende) */
  --ink-2: var(--e-global-color-dbyteink2, #262626);      /* card sul fondo scuro */
  --ink-3: var(--e-global-color-dbyteink3, #3a3a3a);      /* bottoni tenui sul fondo scuro */
  --card: var(--e-global-color-dbytecard, #f4f0eb);       /* card e box sulla crema (nero al 4%) */
  --card-2: var(--e-global-color-dbytecard2, #ebe6df);
  --lime: var(--e-global-color-dbytelime, #badbff);       /* accento azzurro: tasti dei bottoni, evidenziazioni, pixel */
  --logo-lime: var(--e-global-color-dbytelogolime, #1e73be);  /* blu pieno del marchio (vecchio sito) */
  --sky: var(--e-global-color-dbytesky, #cdd9f2);        /* monitor del logo, pallido */
  --lilac: var(--e-global-color-dbytelilac, #ddd2ec);      /* tastiera del logo, pallido */
  --sand: var(--e-global-color-dbytesand, #f2e6c2);       /* cartello del logo, pallido */
  --signal: var(--e-global-color-dbytesignal, #c8401a);     /* stato "guasto" nelle mini-interfacce (testo bianco 5:1) */
  --sage-1: var(--e-global-color-dbytesage1, #b9d1ea);     /* sfumatura della sezione Processo: grigio-azzurro, stessa luce della vecchia salvia */
  --sage-2: var(--e-global-color-dbytesage2, #6a747f);

  --background: var(--cream);
  --text: var(--e-global-color-dbytetext, #000000);
  --text-muted: var(--e-global-color-dbytetextmuted, #5f5f5f);   /* 6,1:1 sulla crema */
  --text-quiet: var(--e-global-color-dbytetextquiet, #8a8a8a);   /* metà grigia dei titoli a due toni: solo testo grande (3,4:1) */
  --border: rgb(0 0 0 / 0.12);
  --border-strong: #000000;
  --success: #2f7d4f;
  --warning: #9a6b00;
  --error: #b3261e;

  --font-sans: 'Archivo DB', 'Archivo Fallback', Arial, sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --radius-s: 3px;
  --radius: 5px;
  --radius-l: 10px;

  --motion-fast: 250ms;
  --motion-base: 500ms;
  --motion-slow: 1000ms;
  --ease-brand: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-emphasis: cubic-bezier(0.76, 0, 0.24, 1);

  /* margine laterale: 15% per lato da 1280 px in su, poi scende fino a 20 px su tablet e telefono */
  --gutter: clamp(20px, calc(37.5vw - 288px), 15vw);
  /* i pannelli (hero, CTA, foto) sbordano di poco oltre la colonna del testo */
  --pad: clamp(12px, 2.6vw, 40px);
  --gap-griglia: 10px;
  --header-h: 64px;

  /* token di tema (cambiano nelle sezioni scure) */
  --bg: var(--cream);
  --fg: var(--text);
  --fg-muted: var(--text-muted);
  --fg-quiet: var(--text-quiet);
  --surface: var(--card);
  --line: var(--border);
}

body {
  background: var(--background);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html { background: #fffbf7; }
body { margin: 0; background: var(--background); }

.skip {
  position: fixed; left: 12px; top: -80px; z-index: 110;
  padding: 12px 18px; background: var(--black); color: var(--white); border-radius: var(--radius-s);
  font: 400 15px/1 var(--font-sans); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- loader "boot": solo prima visita, max ~1,2 s ---------- */
.boot {
  position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--white);
  display: grid; place-items: center; pointer-events: none;
}
.no-boot .boot, html:not(.js) .boot { display: none; }
.boot__count {
  position: absolute; left: var(--gutter); bottom: 28px; margin: 0;
  font: 400 clamp(40px, 5vw, 72px)/1 var(--font-sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.boot__count em { font-style: normal; color: rgb(255 255 255 / 0.4); }
.boot__byte { display: grid; grid-template-columns: repeat(8, 12px); gap: 3px; }
.boot__byte span {
  width: 12px; height: 12px; border-radius: 1px; background: rgb(255 255 255 / 0.08);
  animation: bit 0.9s steps(1) both; animation-delay: calc(var(--i) * 70ms);
}
.boot__byte span:nth-child(3n+1) { --on: var(--lime); }
.boot__byte span:nth-child(3n+2) { --on: var(--white); }
.boot__byte span:nth-child(3n+3) { --on: #6b6b6b; }
.boot__label {
  position: absolute; right: var(--gutter); bottom: 34px; margin: 0;
  font: 400 13px/1 var(--font-sans); color: rgb(255 255 255 / 0.6);
}
.boot__label b { color: var(--white); font-weight: 500; }
@keyframes bit { 0% { background: rgb(255 255 255 / 0.08); } 50%, 100% { background: var(--on, var(--white)); } }
/* uscita a tempo fisso, senza dipendere da JS: la pagina non resta mai bloccata.
   Prima si spegne il contenuto del loader, poi il pannello si dissolve mentre la hero sotto passa da sfocata a nitida. */
.boot { animation: boot-out 0.75s cubic-bezier(0.45, 0, 0.25, 1) 0.95s forwards; }
.boot > * { animation: boot-content-out 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0.8s forwards; }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
@keyframes boot-content-out { to { opacity: 0; filter: blur(8px); transform: translateY(-10px); } }
.js:not(.no-boot) .hero__main { animation: boot-hero-in 1.1s cubic-bezier(0.33, 1, 0.68, 1) 0.95s backwards; }
.js:not(.no-boot) .hero__ascii { animation: boot-fade-in 1.2s cubic-bezier(0.33, 1, 0.68, 1) 1.1s backwards; }
.js:not(.no-boot) .site-header { animation: boot-header-in 0.8s var(--ease-brand) 1.3s backwards; }
@keyframes boot-hero-in { from { opacity: 0.35; filter: blur(14px); transform: scale(1.035); } }
@keyframes boot-fade-in { from { opacity: 0; } }
@keyframes boot-header-in { from { opacity: 0; filter: blur(6px); transform: translateY(-10px); } }

/* ---------- transizione tra pagine: pannello antracite + filo di pixel lime ---------- */
.wipe {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: var(--ink); transform: translateY(100%);
}
.wipe__line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--lime); }
.wipe-in .wipe { animation: wipe-out 0.55s var(--ease-emphasis) 0.05s both; }
.wipe-in .wipe__line { top: auto; bottom: 0; }
@keyframes wipe-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.is-leaving .wipe { transition: transform 0.36s var(--ease-emphasis); transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .wipe { display: none; } }


/* ---------- main.css ---------- */

/* =========================================================================
   DottorByte — foglio principale
   Token in critical.css. Ordine: base · tipografia · bottoni · header · sezioni Home ·
   pagine interne · form · stati di animazione · responsive

   Regole di stile (reference: sentientx.com, misurata dal vivo il 15/09/2026):
   - Crema #FFFBF7, antracite #1C1C1C, nero pieno; card grigie al 4%; un solo accento pallido (lime del logo).
   - Un solo carattere, peso 400, tracking stretto (−0,03/−0,045em); il mono solo per micro-dati.
   - Angoli piccoli: 3 px bottoni e tab, 5 px card e pannelli.
   - Firma: titoli che si decodificano con un blocco di pixel, testo ASCII e anelli wireframe sul fondo scuro,
     mini-interfacce nelle card, tab nera sopra un box grigio, elenchi ‹ 01 ›.
   - Tutto il contenuto sta dentro --gutter (15% per lato su desktop); i pannelli sbordano di --pad.
   ========================================================================= */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-size: 15px; line-height: 1.45; letter-spacing: -0.01em; color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
summary { cursor: pointer; }
strong, b { font-weight: 600; }
::selection { background: var(--lime); color: var(--black); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
main { display: block; outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* filo orizzontale in cima alle sezioni, largo quanto la colonna del testo */
body { --rule: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }

/* temi locali delle sezioni */
[data-theme='dark'] {
  --bg: var(--ink); --fg: var(--white); --fg-muted: rgb(255 255 255 / 0.66); --fg-quiet: rgb(255 255 255 / 0.42);
  --surface: var(--ink-2); --line: rgb(255 255 255 / 0.14);
  background: var(--bg); color: var(--fg);
}
/* salvia chiara con testo nero: la reference usa il bianco, qui serve il contrasto (nero ≥ 6,9:1 su tutta la sfumatura) */
[data-theme='sage'] {
  --fg: var(--black); --fg-muted: rgb(0 0 0 / 0.74); --fg-quiet: rgb(0 0 0 / 0.5);
  --surface: rgb(255 255 255 / 0.3); --line: rgb(0 0 0 / 0.2);
  background: linear-gradient(180deg, var(--sage-1), #8a95a1); color: var(--fg);
}

/* ---------- tipografia ---------- */
/* un solo peso (400) come la reference; tracking più stretto quanto più il testo è grande */
.display-xl, .display-l, .h1-xl, .h1, .h2, .h3 { font-weight: 400; color: var(--fg); text-wrap: balance; }
.display-xl { display: block; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1; letter-spacing: -0.045em; }
.display-l { font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: 1; letter-spacing: -0.045em; }
.h1-xl { display: block; font-size: clamp(2.4rem, 4.6vw, 4.5rem); line-height: 1; letter-spacing: -0.045em; }
.h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.03; letter-spacing: -0.04em; }
.h2 { font-size: clamp(1.55rem, 2.2vw, 2.1rem); line-height: 1.08; letter-spacing: -0.035em; }
.h3 { font-size: clamp(1.15rem, 1.45vw, 1.4rem); line-height: 1.15; letter-spacing: -0.025em; }
.body-l { font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.45; color: var(--fg-muted); }
.mono { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; }
/* etichetta "01 / Testo": grassetto maiuscolo, barra, testo in grigio */
.label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--fg); letter-spacing: -0.005em; }
.label b { font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; }
.label__sep { color: var(--fg); }
.label > span:last-child { color: var(--fg-muted); }
.label__dot { width: 7px; height: 7px; border-radius: 1px; background: currentColor; flex: none; margin-right: 2px; }
.label__dot--ok { background: var(--success); }
.label__dot--warn { background: var(--warning); }
.tt-muted { color: var(--fg-quiet); }
/* ‹ testo › */
.chev { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.chev .ic { width: 12px; height: 12px; stroke-width: 2; opacity: 0.55; }
p a:not([class]), .legal a, .qa__a a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- bottoni ---------- */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; padding-block: 2px; }
.roll > span { display: block; transition: transform var(--motion-base) var(--ease-brand); }
.roll::after {
  content: attr(data-text); position: absolute; left: 0; top: calc(100% + 2px); white-space: nowrap;
  transition: transform var(--motion-base) var(--ease-brand);
}
a:hover > .roll > span, button:hover > .roll > span, a:focus-visible > .roll > span { transform: translateY(calc(-100% - 2px)); }
a:hover > .roll::after, button:hover > .roll::after, a:focus-visible > .roll::after { transform: translateY(calc(-100% - 2px)); }

/* bottone della reference: rettangolo da 3 px, testo, tasto quadrato con la freccia */
.btn {
  --btn-bg: rgb(0 0 0 / 0.06); --btn-fg: var(--black); --btn-key: var(--black); --btn-key-fg: var(--white);
  display: inline-flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 7px 0 15px;
  border-radius: var(--radius-s); background: var(--btn-bg); color: var(--btn-fg);
  font-size: 15px; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-brand), color var(--motion-fast) var(--ease-brand);
}
.btn__key { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 2px; background: var(--btn-key); color: var(--btn-key-fg); transition: transform var(--motion-base) var(--ease-brand); }
.btn__key .ic { width: 14px; height: 14px; stroke-width: 2; }
.btn:hover .btn__key { transform: translateX(2px); }
.btn--soft:hover { --btn-bg: rgb(0 0 0 / 0.11); }
.btn--dark { --btn-bg: var(--black); --btn-fg: var(--white); --btn-key: var(--lime); --btn-key-fg: var(--black); }
.btn--dark:hover { --btn-bg: #2a2a2a; }
[data-theme='dark'] .btn--dark { --btn-bg: var(--lime); --btn-fg: var(--black); --btn-key: var(--black); --btn-key-fg: var(--lime); }
[data-theme='dark'] .btn--dark:hover { --btn-bg: #a8d2ff; }
.btn--lime { --btn-bg: var(--lime); --btn-fg: var(--black); --btn-key: var(--black); --btn-key-fg: var(--lime); }
.btn--lime:hover { --btn-bg: #a8d2ff; }
.btn--round { border-radius: 999px; padding-left: 17px; }
.btn--round .btn__key { border-radius: 50%; }
.btn--round:hover { --btn-bg: rgb(0 0 0 / 0.11); }
[data-theme='dark'] .btn--soft, [data-theme='dark'] .btn--round { --btn-bg: rgb(255 255 255 / 0.13); --btn-fg: var(--white); --btn-key: var(--lime); --btn-key-fg: var(--black); }
[data-theme='dark'] .btn--soft:hover, [data-theme='dark'] .btn--round:hover { --btn-bg: rgb(255 255 255 / 0.22); }
[data-theme='sage'] .btn--soft { --btn-bg: rgb(255 255 255 / 0.4); }
.btn--lg { min-height: 50px; padding-left: 18px; font-size: 16px; }
.btn--lg .btn__key { width: 32px; height: 32px; }

.line-link { display: inline-flex; align-items: center; gap: 6px; padding-block: 5px; font-size: 15px; letter-spacing: -0.02em; position: relative; }
.line-link::after { content: ''; position: absolute; left: 0; right: 20px; bottom: 3px; height: 1px; background: currentColor; transform-origin: right; transition: transform var(--motion-base) var(--ease-brand); }
.line-link:hover::after { transform: scaleX(0); transform-origin: left; animation: redraw var(--motion-base) var(--ease-brand) 0.22s forwards; }
@keyframes redraw { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.line-link .ic { width: 14px; height: 14px; stroke-width: 2; transition: transform var(--motion-base) var(--ease-brand); }
.line-link:hover .ic { transform: translateX(3px); }

.ic { width: 1em; height: 1em; flex: none; }

/* vetro scuro al 74%: il testo bianco resta sopra 4,5:1 anche quando dietro c'è una foto chiara
   (o la crema della pagina, prima che la foto compaia). Al 52% scendeva a 3:1. */
.glass { background: rgb(28 28 28 / 0.74); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border-radius: var(--radius); color: var(--white); --fg-muted: rgb(255 255 255 / 0.82); }

/* ---------- header: etichetta ‹ PAGINA ›, barra nera con menu a tendina, CTA ---------- */
.site-header {
  position: fixed; top: 22px; left: 0; right: 0; z-index: 50; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr minmax(0, 380px) 1fr; align-items: start; gap: 12px; pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.hdr-where {
  justify-self: start; display: inline-flex; align-items: center; height: 30px; margin-top: 5px; padding: 0 8px;
  border-radius: var(--radius-s); background: rgb(28 28 28 / 0.86); color: var(--white);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase;
}
.hdr-bar { width: 100%; background: var(--black); color: var(--white); border-radius: var(--radius-s); overflow: hidden; }
.hdr-bar__top { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 2px 0 14px; }
.hdr-logo { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.hdr-brand { min-height: 40px; }
.mark { width: 20px; height: 20px; }
.wordmark { font-size: 16px; font-weight: 400; letter-spacing: -0.035em; white-space: nowrap; }
.wordmark b { font-weight: 600; }
.hdr-burger { display: grid; place-items: center; width: 44px; height: 40px; color: var(--white); }
.hdr-burger__lines { display: grid; gap: 3px; width: 20px; }
.hdr-burger__lines i { display: block; height: 1px; background: currentColor; transition: transform var(--motion-base) var(--ease-brand), opacity var(--motion-fast); }
.hdr-burger[aria-expanded='true'] .hdr-burger__lines i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.hdr-burger[aria-expanded='true'] .hdr-burger__lines i:nth-child(2) { opacity: 0; }
.hdr-burger[aria-expanded='true'] .hdr-burger__lines i:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
.mnav { position: relative; padding: 4px 14px 16px; max-height: calc(100svh - 90px); overflow-y: auto; }
.mnav[hidden] { display: none !important; }
/* filo di pixel che si accende all'apertura, come il menu della reference */
.mnav__glitch { display: block; height: 18px; margin: 4px -14px 6px; background:
  repeating-linear-gradient(90deg, rgb(255 255 255 / 0.9) 0 2px, transparent 2px 5px) 0 8px / 100% 1px no-repeat,
  repeating-linear-gradient(90deg, rgb(255 255 255 / 0.5) 0 1px, transparent 1px 9px) 20% 11px / 60% 1px no-repeat,
  repeating-linear-gradient(90deg, var(--lime) 0 3px, transparent 3px 17px) 60% 5px / 30% 2px no-repeat; }
.js .mnav.is-open .mnav__glitch { animation: glitch-in 0.7s steps(8) both; }
@keyframes glitch-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.mnav li a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid rgb(255 255 255 / 0.16); font-size: 16px; letter-spacing: -0.025em; }
.mnav__note { margin-left: auto; font-size: 12.5px; color: rgb(255 255 255 / 0.5); }
.mnav li a .ic { width: 14px; height: 14px; stroke-width: 2; margin-left: auto; transition: transform var(--motion-fast) var(--ease-brand); }
.mnav li a .mnav__note + .ic { margin-left: 0; }
.mnav .btn--dark { --btn-bg: var(--lime); --btn-fg: var(--black); --btn-key: var(--black); --btn-key-fg: var(--lime); }
.mnav li a:hover .ic { transform: translateX(3px); }
.mnav li a[aria-current] .mnav__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.js .mnav.is-open li { animation: menu-in 0.5s var(--ease-brand) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
@keyframes menu-in { from { opacity: 0; transform: translateY(10px); } }
.mnav__foot { display: grid; gap: 14px; justify-items: start; margin-top: 16px; }
.mnav__cta { display: none; }
.mnav__nap { font-size: 13px; color: rgb(255 255 255 / 0.6); }
.mnav__nap a { color: var(--white); }
.hdr-cta { justify-self: end; }

/* ---------- barra mobile ---------- */
.bbar { display: none; }

/* =========================== HOME =========================== */

/* ---------- hero: pannello antracite che si stacca in card allo scroll ---------- */
.hero__panel { position: relative; display: flex; flex-direction: column; min-height: max(100svh, 720px); overflow: hidden; isolation: isolate; border-radius: 0 0 var(--radius-l) var(--radius-l); }
.hero__ascii { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; -webkit-mask-image: linear-gradient(transparent 4%, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent 4%, #000 30%, #000 70%, transparent); }
.hero__main { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; padding: clamp(110px, 15vh, 160px) var(--gutter) 0; text-align: center; }
.hero__copy { display: flex; flex-direction: column; align-items: center; }
.hero__title { display: grid; justify-items: center; gap: 20px; }
.hero__title .display-xl { max-width: 17ch; }
.hero__lead { margin-top: 22px; max-width: 46ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.4; color: var(--fg-muted); }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.hero__proof { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 22px; margin-top: 14px; }
.rating-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 14px; color: var(--fg); }
.rating-chip .ic { width: 15px; height: 15px; }
.rating-chip__n { font-size: 20px; letter-spacing: -0.03em; }
.rating-chip__stars { display: inline-flex; gap: 1px; color: var(--lime); }
.rating-chip__stars .ic { width: 11px; height: 11px; }
.rating-chip__c { color: var(--fg-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rating-chip:hover .rating-chip__c { color: var(--fg); }
.hero__status { font-size: 13.5px; color: var(--fg-muted); }
/* voce "Scorri" in basso a destra (il "Keep Scrolling" della reference): sparisce appena si scorre */
.hero__scroll { position: absolute; right: var(--gutter); bottom: 26px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: -0.01em; color: var(--fg); }
.hero__scroll-key { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 2px; background: var(--lime); color: var(--black); animation: nudge 1.8s var(--ease-brand) infinite; }
.hero__scroll-key .ic { width: 14px; height: 14px; stroke-width: 2; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* monitor al tratto con il guasto che si risolve: schermata blu → prompt dei comandi → schermata lime.
   Le misure dentro lo schermo sono in cqw, così tutto scala con la larghezza del monitor. */
.pc { --pc-line: rgb(255 255 255 / 0.55); position: relative; width: clamp(300px, min(32vw, 48vh), 520px); margin: auto 0 -26px; padding-top: clamp(34px, 5vh, 56px); }
.pc__body { position: relative; padding: 10px 10px 26px; border: 1px solid var(--pc-line); border-radius: 10px; background: var(--ink); }
.pc__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18); background: #0f6bd0; container-type: inline-size; text-align: left; }
.pc__bsod, .pc__ok { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8cqw 9cqw 6cqw; }
.pc__bsod { background: #0f6bd0; color: var(--white); }
.pc__sad, .pc__smile { font-size: 15cqw; line-height: 1; letter-spacing: 0; margin-bottom: 4cqw; }
.pc__msg { max-width: 36em; font-size: 3.2cqw; line-height: 1.3; letter-spacing: -0.01em; }
.pc__pct { margin-top: 3cqw; font-size: 3.2cqw; }
.pc__stop { display: flex; align-items: flex-start; gap: 2.4cqw; margin-top: auto; }
.pc__qr { flex: none; width: 9cqw; height: 9cqw; padding: 0.6cqw; background: var(--white); color: #0f6bd0; }
.pc__stop p { font-size: 2cqw; line-height: 1.35; opacity: 0.86; }
.pc__cmd { position: absolute; left: 6%; right: 6%; top: 9%; bottom: 9%; display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; background: #0c0c0c; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2); opacity: 0; transform: translateY(5%) scale(0.97); transition: opacity 0.3s linear, transform 0.6s var(--ease-brand); }
.pc__bar { display: flex; align-items: center; gap: 1.2cqw; height: 5.6cqw; padding: 0 1.8cqw; background: #202020; font-size: 2.3cqw; color: rgb(255 255 255 / 0.82); }
.pc__bar span { flex: 1; white-space: nowrap; overflow: hidden; }
.pc__bar i { width: 1.7cqw; height: 1.7cqw; border: 1px solid rgb(255 255 255 / 0.5); }
.pc__bar i:last-child { background: var(--lime); border-color: var(--lime); }
.pc__log { flex: 1; margin: 0; padding: 2.2cqw 2.6cqw; overflow: hidden; font: 400 2.55cqw/1.5 var(--font-mono); color: #d6d6d6; white-space: pre; }
.pc__log::after { content: '▌'; color: var(--lime); animation: blink 1s steps(1) infinite; }
.pc__log .ok { color: var(--lime); }
.pc__log .ko { color: #f2a65a; }
.pc__log .dim { color: rgb(255 255 255 / 0.45); }
@keyframes blink { 50% { opacity: 0; } }
.pc__ok { background: var(--lime); color: var(--black); }
.pc__okmsg { max-width: 12em; font-size: 5.6cqw; line-height: 1.02; letter-spacing: -0.045em; }
.pc__okfoot { margin-top: auto; font: 400 2.1cqw/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.pc__fx { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
/* comparsa a pixel alla fine dell'intro: finché non è "rivelato" il monitor resta nascosto (rete di sicurezza a 5 s) */
.pc__intro { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.js .pc:not(.is-revealed) .pc__body, .js .pc:not(.is-revealed) .pc__stand { opacity: 0; animation: sc-safety 0s linear 5s forwards; }
.pc__brand { position: absolute; left: 50%; bottom: 5px; display: grid; transform: translateX(-50%); color: rgb(255 255 255 / 0.7); }
.pc__brand .mark { width: 15px; height: 15px; }
.pc__led { position: absolute; right: 16px; bottom: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); transition: background 0.3s; }
.pc__stand { position: relative; height: 64px; }
.pc__neck { position: absolute; left: 50%; top: -1px; width: 17%; height: 50px; transform: translateX(-50%); border: 1px solid var(--pc-line); border-top: 0; background: var(--ink); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.pc__foot { position: absolute; left: 50%; bottom: 0; width: 46%; height: 15px; transform: translateX(-50%); border: 1px solid var(--pc-line); border-radius: 50%; background: var(--ink); }
/* stati: senza JS (o con riduzione del movimento) si vede la schermata risolta; con JS parte dal guasto */
.js .pc:not([data-state='ok']) .pc__ok { visibility: hidden; }
.js .pc:not([data-state='ok']) .pc__led { background: #f2a65a; }
.pc[data-state='cmd'] .pc__cmd { opacity: 1; transform: none; }
.open-status::before, [data-open-status]:not(:empty)::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--status, var(--fg-quiet)); vertical-align: 1px; }
[data-open-status].is-open { --status: #6fcf8e; }
[data-open-status].is-closed { --status: var(--sand); }
.where [data-open-status].is-open, .request [data-open-status].is-open { --status: var(--success); }
.where [data-open-status].is-closed, .request [data-open-status].is-closed { --status: var(--warning); }

/* ---------- immagini: LQIP + ingresso a mosaico ---------- */
.pic { position: relative; display: block; aspect-ratio: var(--ratio); background: var(--card) var(--lqip) center / cover no-repeat; overflow: hidden; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pixel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 1; }
.js [data-pixel]:not(.is-sharp):not(.pixel-hero) img { opacity: 0; }
.js [data-pixel].is-sharp img { opacity: 1; transition: opacity 0.25s linear; }

/* ---------- intro: frase a due toni + foto con card in vetro ---------- */
.intro { padding: clamp(110px, 13vw, 200px) var(--gutter) clamp(50px, 6vw, 90px); }
.intro__title { max-width: 24ch; margin: 0 auto clamp(60px, 8vw, 120px); text-align: center; font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1.04; letter-spacing: -0.045em; font-weight: 400; text-wrap: balance; }
.intro__media { position: relative; margin-inline: calc(var(--pad) * -1); border-radius: var(--radius); overflow: hidden; }
.intro__media .pic { aspect-ratio: 16 / 8.2; }
.intro__card { position: absolute; left: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 2; width: min(410px, calc(100% - 32px)); display: grid; gap: 14px; justify-items: start; padding: 24px 26px 26px; }
.intro__card > p:not(.intro__brand) { font-size: 14.5px; line-height: 1.4; color: rgb(255 255 255 / 0.82); }
.intro__brand { font-size: 20px; letter-spacing: -0.035em; }
.intro__brand b { font-weight: 600; }

/* ---------- testata di sezione: etichetta, titolo a sinistra, azioni a destra ---------- */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 40px; margin-bottom: clamp(40px, 5vw, 70px); }
.sec-head > .label { grid-column: 1 / -1; justify-self: start; }
.sec-head > h2 { grid-column: 1; max-width: 18ch; }
.sec-head__ctas { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.sec-head__hint { grid-column: 1 / -1; max-width: 52ch; color: var(--fg-muted); }
.sec-head--rule { padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }

/* ---------- tre card con mini-interfaccia ---------- */
.pillars { padding: clamp(80px, 9vw, 140px) var(--gutter); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-griglia); }
.pillar__ui { position: relative; aspect-ratio: 10 / 9; margin-bottom: 26px; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.pillar__title { margin-bottom: 10px; font-size: 19px; line-height: 1.2; letter-spacing: -0.03em; font-weight: 400; }
.pillar__text { max-width: 44ch; font-size: 14.5px; color: var(--fg-muted); }
/* diagramma a nodi con fili tratteggiati */
.ui-node { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%); padding: 9px 14px; border-radius: 2px; background: var(--black); color: var(--white); font-size: 14px; white-space: nowrap; }
.ui-node--1 { --x: 28%; --y: 64%; }
.ui-node--2 { --x: 72%; --y: 46%; }
.ui-node--3 { --x: 72%; --y: 84%; }
.ui-hub { position: absolute; left: 50%; top: 22%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 8px rgb(186 219 255 / 0.4); }
.ui-hub .mark { width: 24px; height: 24px; --mark-ink: #000; --mark-accent: #000; }
.ui-wire { position: absolute; border: 0 dashed rgb(0 0 0 / 0.55); }
.ui-wire--1 { left: 0; top: 64%; width: 20%; border-top-width: 1px; }
.ui-wire--2 { left: 28%; top: 22%; width: 22%; height: calc(42% - 16px); border-top-width: 1px; border-left-width: 1px; }
.ui-wire--3 { left: 50%; top: 22%; width: 22%; height: calc(24% - 16px); border-top-width: 1px; border-right-width: 1px; }
.ui-wire--4 { left: 72%; top: 46%; width: 28%; height: 38%; border-left-width: 1px; }
/* elenco di servizi come righe di un'app */
.ui-list { display: grid; align-content: center; justify-items: center; gap: 10px; padding: 12%; }
.ui-row { display: flex; align-items: center; gap: 12px; width: min(100%, 260px); padding: 7px 12px 7px 7px; border-radius: 2px; background: var(--white); font-size: 16px; letter-spacing: -0.025em; }
.ui-row__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 2px; background: var(--black); color: var(--white); }
.ui-row__ico.is-lit { background: var(--lime); color: var(--black); }
.ui-row__ico .ic { width: 16px; height: 16px; }
/* card nera con il voto */
.ui-metric { display: grid; place-items: center; padding: 10%; }
.ui-metric__card { display: grid; gap: 6px; width: min(100%, 290px); padding: 14px 16px 16px; border-radius: 2px; background: var(--black); color: var(--white); }
.ui-metric__k { font-size: 14px; }
.ui-metric__v { justify-self: end; font-size: 36px; line-height: 1; letter-spacing: -0.05em; color: var(--lime); }
.ui-metric__v small { font-size: 0.42em; letter-spacing: 0; color: rgb(255 255 255 / 0.5); }
.ui-metric__s { display: flex; align-items: center; gap: 5px; font-size: 12px; color: rgb(255 255 255 / 0.62); }
.ui-metric__s .ic { width: 18px; height: 18px; color: var(--lime); }
/* ingresso delle mini-interfacce */
.js .pillar .ui-node, .js .pillar .ui-hub { opacity: 0; transform: translate(-50%, -30%); transition: opacity 0.6s var(--ease-brand), transform 0.8s var(--ease-brand); }
.js .pillar .ui-node--1 { transition-delay: 0.35s; } .js .pillar .ui-node--2 { transition-delay: 0.5s; } .js .pillar .ui-node--3 { transition-delay: 0.65s; }
.js .pillar.is-in .ui-node, .js .pillar.is-in .ui-hub { opacity: 1; transform: translate(-50%, -50%); }
.js .pillar .ui-wire { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-emphasis) 0.2s; }
.js .pillar .ui-wire--4 { clip-path: inset(0 0 100% 0); transition-delay: 0.6s; }
.js .pillar.is-in .ui-wire { clip-path: inset(0 0 0 0); }
.js .pillar .ui-row, .js .pillar .ui-metric__card { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-brand), transform 0.8s var(--ease-brand); transition-delay: calc(0.3s + var(--i, 0) * 0.12s); }
.js .pillar.is-in .ui-row, .js .pillar.is-in .ui-metric__card { opacity: 1; transform: none; }

/* ---------- selettore problemi: lista a slash in due toni, risposta in tab + box ---------- */
.problems { padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(80px, 9vw, 140px); }
.problems__list { display: flex; flex-wrap: wrap; align-items: baseline; font-size: clamp(1.9rem, 3.6vw, 3.6rem); line-height: 1.14; letter-spacing: -0.045em; }
.problems__list li { display: inline-flex; align-items: baseline; }
.problem { padding: 0 0.07em; border-radius: var(--radius-s); color: var(--fg-quiet); text-align: left; line-height: inherit; transition: color var(--motion-base) var(--ease-brand), background var(--motion-base) var(--ease-brand); }
.problem:hover { color: var(--fg); }
.problem[aria-expanded='true'] { color: var(--black); background: var(--lime); }
.slash { margin: 0 0.12em; color: var(--fg-quiet); opacity: 0.5; }
.problems__answers { display: grid; max-width: 900px; margin-top: clamp(34px, 4vw, 54px); }
.panswer { grid-area: 1 / 1; }
.js .panswer { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--motion-base) var(--ease-brand), transform var(--motion-base) var(--ease-brand), visibility 0s var(--motion-base); }
.js .panswer[data-active] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html:not(.js) .panswer { grid-area: auto; margin-bottom: 24px; }
.panswer__box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px; padding: 22px 24px; }
.panswer__text { max-width: 50ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.35; letter-spacing: -0.02em; }
.panswer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* tab nera sopra un box grigio ("The Outcome") */
.outcome { display: grid; justify-items: start; }
.outcome__tab { padding: 8px 14px 7px; border-radius: 2px 2px 0 0; background: var(--black); color: var(--white); font-size: 13.5px; letter-spacing: -0.015em; }
.outcome__box { width: 100%; padding: 15px 20px; border-radius: 0 var(--radius-s) var(--radius-s) var(--radius-s); background: var(--surface); font-size: 15px; }
[data-theme='dark'] .outcome__tab { background: var(--lime); color: var(--black); }

/* ---------- mondi Privati / Aziende ---------- */
.world { position: relative; padding: clamp(90px, 10vw, 160px) var(--gutter); }

/* selettore Privati / Aziende */
.aswitch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--radius-s); background: rgb(0 0 0 / 0.06); }
[data-theme='dark'] .aswitch { background: rgb(255 255 255 / 0.1); }
.aswitch a { position: relative; z-index: 1; min-width: 96px; padding: 10px 16px; text-align: center; font-size: 14.5px; letter-spacing: -0.02em; color: var(--fg); transition: color var(--motion-base) var(--ease-brand); }
.aswitch a.is-on { color: var(--bg); }
[data-theme='dark'] .aswitch a.is-on { color: var(--black); }
.aswitch__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 2px; background: var(--fg); transition: transform var(--motion-base) var(--ease-emphasis); }
[data-theme='dark'] .aswitch__thumb { background: var(--lime); }
.aswitch:has(a:nth-of-type(2).is-on) .aswitch__thumb { transform: translateX(100%); }

/* colonna sticky + servizi che scorrono ("Work Reinvented") */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap-griglia); }
.split__side { grid-column: 1 / 6; }
.split__sticky { position: sticky; top: 110px; display: grid; gap: 22px; justify-items: start; padding-bottom: 40px; }
.split__sticky .display-l { font-size: clamp(3rem, 6.4vw, 6.4rem); line-height: 0.92; }
.split__sticky .body-l { max-width: 34ch; }
.split__list { grid-column: 7 / 13; display: grid; gap: clamp(56px, 6vw, 90px); }
.svc-row { display: grid; gap: 14px; justify-items: start; padding-bottom: clamp(44px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.svc-row:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-row__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.svc-row__media .pic, .svc-row__media .art-wrap { width: 100%; height: 100%; aspect-ratio: auto; }
.svc-row__media img { transition: transform 1.2s var(--ease-brand); }
.svc-row__media:hover img { transform: scale(1.03); }
.svc-row__code { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 8px; border-radius: 2px; background: rgb(0 0 0 / 0.78); color: var(--white); font: 400 11px/1 var(--font-mono); letter-spacing: 0.03em; }
.svc-row__title { margin-top: 10px; }
.svc-row__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--motion-base) var(--ease-brand); }
.svc-row__title a:hover { background-size: 100% 1px; }
.svc-row__text { max-width: 56ch; color: var(--fg-muted); }
.svc-row .outcome { width: 100%; margin-top: 4px; }

/* transizione a blocchi: dalla crema all'antracite del mondo Aziende */
.byteshift { position: relative; height: 120svh; margin-top: -1px; }
.byteshift__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.byteshift__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.byteshift__word { position: absolute; left: var(--gutter); bottom: 6vh; font-size: clamp(4rem, calc((100vw - 2 * var(--gutter)) * 0.2), 16rem); line-height: 0.8; letter-spacing: -0.06em; font-weight: 400; color: var(--white); opacity: 0; transform: translateY(8%); }
html:not(.js) .byteshift, .reduced .byteshift { height: 30svh; background: linear-gradient(var(--cream), var(--ink)); }
html:not(.js) .byteshift__sticky, .reduced .byteshift__sticky { display: none; }

/* mondo Aziende: testi a sinistra, anelli con etichette-stato a destra */
.world--aziende { padding-top: clamp(40px, 5vw, 80px); }
.world--aziende .sec-head > h2 { max-width: 12ch; }
.ops { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 40px var(--gap-griglia); margin-bottom: clamp(60px, 8vw, 110px); }
.ops__text { grid-column: 1 / 6; display: grid; gap: 26px; justify-items: start; }
.ops__text > .body-l { max-width: 40ch; }
.ops__item h3 { margin-bottom: 8px; }
.ops__item p { max-width: 42ch; font-size: 15px; color: var(--fg-muted); }
.ops__visual { grid-column: 7 / 13; position: relative; aspect-ratio: 1 / 0.86; }
.ops__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.ops__chip { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: 999px; background: rgb(58 58 58 / 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); color: var(--white); font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; animation: float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -2.3s); }
.ops__chip i { width: 14px; height: 14px; border-radius: 50%; background: var(--sand); }
.ops__chip:first-of-type i { background: var(--lime); }
@keyframes float { 50% { transform: translateY(-8px); } }

/* card dei servizi */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-griglia); }
.card a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 8px; border-radius: var(--radius); background: var(--surface); transition: background var(--motion-fast) var(--ease-brand); }
.card a:hover { background: var(--card-2); }
[data-theme='dark'] .card a:hover { background: #303030; }
.card__media { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: 3px; background: var(--card-2); }
.card__media .pic, .card__media .art-wrap { height: 100%; aspect-ratio: auto; }
.card__media img { transition: transform var(--motion-slow) var(--ease-brand); }
.card a:hover .card__media img, .card a:hover .art-wrap .art { transform: scale(1.04); }
.card__tag { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 5px 7px; border-radius: 2px; background: rgb(255 255 255 / 0.92); color: var(--black); font-size: 12px; letter-spacing: -0.01em; }
.card__body { display: grid; gap: 6px; align-content: start; flex: 1; padding: 16px 44px 10px 8px; }
.card__title { font-size: 19px; line-height: 1.15; letter-spacing: -0.03em; }
.card__text { font-size: 14px; color: var(--fg-muted); }
.card__go { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 2px; background: var(--black); color: var(--white); transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-base) var(--ease-brand); }
.card__go .ic { width: 14px; height: 14px; stroke-width: 2; }
.card a:hover .card__go { background: var(--lime); color: var(--black); transform: translateX(2px); }
[data-theme='dark'] .card__go { background: var(--lime); color: var(--black); }

/* illustrazioni tecniche al tratto */
.art-wrap { display: grid; place-items: center; width: 100%; height: 100%; padding: 8%; color: var(--black); background: var(--card-2); --art-accent: var(--black); }
[data-theme='dark'] .art-wrap { background: #2d2d2d; color: rgb(255 255 255 / 0.86); --art-accent: var(--lime); }
.art { width: 100%; height: 100%; max-height: 100%; stroke-width: 1.5; transition: transform var(--motion-slow) var(--ease-brand); }
.art .a { stroke: var(--art-accent); stroke-width: 2; }
.art [fill='currentColor'].a, .art circle.a[fill] { fill: var(--art-accent); }
.art__dash { stroke-dasharray: 3 5; opacity: 0.6; }
.art__cone { fill: var(--lime); fill-opacity: 0.35; stroke: none; }
.art__tag, .art__node { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; }
.art__lead { opacity: 0.6; }
.art__led { animation: led 1.6s steps(2) infinite; }
@keyframes led { 50% { opacity: 0.2; } }
.js .art [data-draw] { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 1.6s var(--ease-brand); }
.js .art.is-drawn [data-draw] { stroke-dashoffset: 0; }

/* file di etichette che scorrono (le "Invoice Matched" della reference) */
.flowchips { display: grid; gap: 12px; margin: clamp(60px, 8vw, 110px) calc(var(--pad) * -1) 0; padding: clamp(28px, 4vw, 56px) 0; border-radius: var(--radius); background: var(--black); overflow: hidden; }
.flowchips__row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.flowchips__track { display: flex; gap: 10px; width: max-content; animation: marquee 56s linear infinite; }
.flowchips__row--1 .flowchips__track { animation-duration: 64s; animation-direction: reverse; }
.flowchips__row--2 .flowchips__track { animation-duration: 72s; }
.flowchips span { padding: 10px 17px; border-radius: var(--radius-s); font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -0.02em; white-space: nowrap; }
.flowchips__row--0 span { background: var(--lime); color: var(--black); }
.flowchips__row--1 span { background: #4a4a4a; color: var(--white); }
.flowchips__row--2 span { background: var(--white); color: var(--black); }
@keyframes marquee { to { transform: translateX(calc(-50% - 5px)); } }

.az__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 30px var(--gap-griglia); margin-top: clamp(60px, 8vw, 110px); }
.az__quote { grid-column: 1 / 8; }
.az__quote p { font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.14; letter-spacing: -0.04em; }
.az__quote footer { margin-top: 16px; font-size: 14px; color: var(--fg-muted); }
.az__ctas { grid-column: 9 / 13; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 22px; }

/* ---------- processo: sfumatura salvia, fisarmonica ‹ 01 ›, lastre isometriche ---------- */
.process { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(100svh, 900px); }
.process__side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: clamp(80px, 9vw, 130px) clamp(24px, 3vw, 48px) clamp(50px, 6vw, 90px) var(--gutter); }
.process__side .display-l { max-width: 12ch; }
.process__sub { max-width: 42ch; color: var(--fg-muted); }
.process__list { align-self: stretch; margin-top: auto; padding-top: 30px; }
.step { border-bottom: 1px solid var(--line); }
.step:first-child { border-top: 1px solid var(--line); }
.step summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; list-style: none; }
.step summary::-webkit-details-marker { display: none; }
.step__t { font-size: clamp(1.4rem, 2.3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.045em; transition: opacity var(--motion-fast); }
.step:not([open]) .step__t { opacity: 0.72; }
.step summary:hover .step__t { opacity: 1; }
.step .chev { font-size: 14px; }
.step[open] .chev .ic { opacity: 1; }
.step__d { max-width: 44ch; padding: 0 0 18px; color: var(--fg-muted); }
.process__art {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='86'%3E%3Cpath d='M75 21L113 43L75 65L37 43ZM37 43v5L75 70L113 48v-5M75 65v5M0 -22L38 0L0 22L-38 0ZM-38 0v5L0 27L38 5v-5M0 22v5M150 -22L188 0L150 22L112 0ZM112 0v5L150 27L188 5v-5M150 22v5M0 64L38 86L0 108L-38 86ZM-38 86v5L0 113L38 91v-5M0 108v5M150 64L188 86L150 108L112 86ZM112 86v5L150 113L188 91v-5M150 108v5' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 150px 86px;
  animation: iso-drift 40s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%);
}
@keyframes iso-drift { to { background-position: 150px 86px; } }
.process--compact { min-height: 0; }
.process--compact .process__side { padding-block: clamp(70px, 8vw, 110px) clamp(40px, 5vw, 70px); }

/* ---------- recensioni: griglia di card con il voto in nero ---------- */
.reviews { padding: clamp(80px, 9vw, 140px) var(--gutter); }
.reviews__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-griglia); align-items: stretch; }
.rscore { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius); background: var(--black); }
.rscore__k { font-size: 15px; }
.rscore__big { display: flex; align-items: flex-end; margin-top: auto; font-size: clamp(5rem, 10vw, 9.5rem); line-height: 0.82; letter-spacing: -0.07em; color: var(--lime); font-variant-numeric: tabular-nums; }
.rscore__big small { margin: 0 0 0.12em 0.18em; font-size: 0.2em; letter-spacing: 0; color: var(--fg-muted); }
.rscore__sub { display: flex; align-items: center; gap: 3px; color: var(--fg-muted); }
.rscore__sub .ic { width: 13px; height: 13px; color: var(--white); }
.rscore__sub span { margin-left: 8px; }
.rscore__dist { display: grid; gap: 5px; width: min(100%, 340px); }
.rscore__dist li { display: grid; grid-template-columns: 12px 1fr 30px; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.rscore__dist li span:last-child { text-align: right; }
.bar { height: 4px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 0.14); }
.bar span { display: block; width: var(--w); height: 100%; background: var(--lime); transform-origin: left; }
.js .bar span { transform: scaleX(0); transition: transform 1.2s var(--ease-brand) 0.2s; }
.js .reviews.is-in .bar span { transform: scaleX(1); }
.rcard { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius); background: var(--surface); }
.rcard__stars { display: flex; gap: 2px; }
/* una sola riga di card che scorre: si ferma al passaggio del mouse, quando una card ha il focus e quando
   la riga è fuori schermo. Senza movimento (o senza JS) la riga si scorre a mano. */
.rscroll { min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; border-radius: var(--radius); }
.rscroll__track { display: flex; gap: var(--gap-griglia); width: max-content; min-height: 100%; }
.rscroll__track > * { flex: none; width: clamp(260px, 22vw, 320px); scroll-snap-align: start; }
.reviews--full .rscroll__track > * { width: clamp(280px, 27vw, 400px); }
.rscroll.is-running { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.rscroll.is-running .rscroll__track { animation: rscroll calc(var(--n, 8) * 6.5s) linear infinite; }
.rscroll.is-running:hover .rscroll__track, .rscroll.is-running:focus-within .rscroll__track, .rscroll.is-paused .rscroll__track { animation-play-state: paused; }
@keyframes rscroll { to { transform: translateX(calc(-50% - var(--gap-griglia) / 2)); } }
.rcard__stars .ic { width: 12px; height: 12px; }
.rcard blockquote p { font-size: 17px; line-height: 1.3; letter-spacing: -0.025em; }
.reviews--full .rcard blockquote p { font-size: 15.5px; line-height: 1.4; }
.rcard figcaption { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 13.5px; color: var(--fg-muted); }
.rcard__g .ic { width: 14px; height: 14px; color: var(--fg); }
.rtopics { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius); background: var(--surface); }
.rtopics__k { font-size: 15px; }
.rtopics__list { display: flex; flex-wrap: wrap; gap: 8px; }
.rtopics__list li { padding: 8px 12px; border-radius: 2px; background: var(--white); font-size: 16px; letter-spacing: -0.02em; }
.rtopics__list sup { margin-left: 3px; font-size: 11px; color: var(--fg-muted); }
.rtopics__note { margin-top: auto; font-size: 12.5px; color: var(--fg-muted); }

/* ---------- storia: foto della vetrina, card in vetro, anno che scorre ---------- */
.history { padding: clamp(30px, 4vw, 60px) var(--gutter) clamp(80px, 9vw, 140px); }
.history__media { position: relative; margin-inline: calc(var(--pad) * -1); overflow: hidden; border-radius: var(--radius); }
.history__media .pic { aspect-ratio: 16 / 8.6; }
.history__year { position: absolute; right: clamp(16px, 2.4vw, 32px); top: clamp(10px, 1.8vw, 24px); z-index: 2; font-size: clamp(4rem, 10vw, 9rem); line-height: 0.9; letter-spacing: -0.07em; color: var(--white); font-variant-numeric: tabular-nums; text-shadow: 0 2px 30px rgb(0 0 0 / 0.3); }
.history__card { position: absolute; left: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 2; width: min(440px, calc(100% - 32px)); display: grid; gap: 14px; justify-items: start; padding: 24px 26px 26px; }
.history__card > p:not(.label) { font-size: 14.5px; line-height: 1.45; color: rgb(255 255 255 / 0.82); }

/* ---------- laboratorio (scroll orizzontale dentro la colonna del sito) ---------- */
.lab { position: relative; }
.lab__pin { padding: clamp(70px, 8vw, 120px) var(--gutter) clamp(60px, 7vw, 110px); overflow: hidden; }
.lab__win { overflow: hidden; }
.lab__track { display: flex; gap: var(--gap-griglia); width: max-content; }
.lab__item { width: clamp(240px, 22vw, 360px); }
.lab__item:nth-child(even) { margin-top: 48px; }
.lab__item .pic { aspect-ratio: 4 / 5; border-radius: var(--radius); }
.lab__item figcaption { display: flex; gap: 10px; max-width: 36ch; margin-top: 12px; font-size: 13.5px; color: var(--fg-muted); }
.lab__item figcaption .chev { color: var(--fg); font-size: 12.5px; }
html:not(.js) .lab__track, .reduced .lab__track, .touch .lab__track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.touch .lab__item, .reduced .lab__item { scroll-snap-align: start; flex: none; }

/* ---------- sede ---------- */
.where { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 50px var(--gap-griglia); padding: clamp(80px, 9vw, 140px) var(--gutter); background: var(--rule); }
.where__info { grid-column: 1 / 6; display: grid; gap: 22px; justify-items: start; }
.where__status { font-size: 15px; }
.where__card { width: 100%; max-width: 440px; padding: 6px 18px; border-radius: var(--radius); background: var(--surface); }
.hours { width: 100%; border-collapse: collapse; font-size: 15px; }
.hours th, .hours td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours td { text-align: right; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--fg); }
.hours tr.is-today th::after { content: 'oggi'; margin-left: 8px; padding: 2px 6px; border-radius: 2px; background: var(--lime); color: var(--black); font-size: 11.5px; vertical-align: 1px; }
.where__facts { display: grid; gap: 10px; color: var(--fg-muted); }
.where__facts li { display: flex; align-items: flex-start; gap: 10px; }
.where__facts .ic { width: 17px; height: 17px; margin-top: 2px; color: var(--fg); }
.where__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.where__map { grid-column: 7 / 13; position: sticky; top: 100px; }
/* mappa della reference: strade a puntini sul fondo scuro, via del negozio in lime */
.smap { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.smap img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transition: transform 2.2s var(--ease-brand); }
.smap.is-in img { transform: scale(1.18); }
.smap__pin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgb(186 219 255 / 0.25); }
.smap__pin::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--black); }
.smap__pin span { position: absolute; inset: -34px; border-radius: 50%; border: 1px solid var(--lime); animation: ping 2.4s var(--ease-brand) infinite; }
@keyframes ping { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.smap__cap { position: absolute; left: calc(50% + 26px); top: calc(50% - 118px); z-index: 3; display: grid; gap: 10px; width: min(236px, calc(50% - 34px)); padding: 12px 12px 12px 14px; font-size: 14px; line-height: 1.3; }
.smap__cap a { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 2px; background: rgb(255 255 255 / 0.14); font-size: 13px; }
.smap__cap .btn__key { width: 18px; height: 18px; background: var(--lime); color: var(--black); }
.smap__cap .btn__key .ic { width: 12px; height: 12px; }
.smap__credit { position: absolute; left: 12px; bottom: 10px; z-index: 2; font: 400 10px/1.3 var(--font-mono); letter-spacing: 0.02em; color: rgb(255 255 255 / 0.5); }

/* ---------- footer: pannello CTA nero, poi footer nero con colonne e card ---------- */
.fcta { padding: clamp(30px, 4vw, 60px) var(--gutter) clamp(50px, 6vw, 90px); background: var(--cream); }
.fcta__panel { position: relative; display: grid; align-content: center; justify-items: center; gap: 20px; min-height: clamp(460px, 62vh, 640px); margin-inline: calc(var(--pad) * -1); padding: 90px 24px 120px; overflow: hidden; border-radius: var(--radius); background: var(--black); text-align: center; }
.fcta__title { max-width: 13ch; font-size: clamp(2.4rem, 4.6vw, 4.5rem); line-height: 1; letter-spacing: -0.05em; font-weight: 400; text-wrap: balance; }
.fcta__phone { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.035em; color: var(--fg-muted); font-variant-numeric: tabular-nums; transition: color var(--motion-fast); }
.fcta__phone:hover { color: var(--lime); }
.fcta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.fcta__corner { position: absolute; bottom: 24px; z-index: 2; font-size: 13px; line-height: 1.45; color: var(--fg-muted); text-align: left; }
.fcta__corner--l { left: clamp(20px, 2.4vw, 32px); }
.fcta__corner--r { right: clamp(20px, 2.4vw, 32px); text-align: right; }
.fcta__corner a:hover, a.fcta__corner:hover { color: var(--white); }
/* area cliccabile di almeno 24 px (WCAG 2.5.8) senza spostare il testo: il margine negativo compensa */
.fcta__corner a { display: inline-block; padding-block: 5px; margin-block: -5px; }
/* scie di puntini e frecce che scorrono */
.fcta__trail { position: absolute; z-index: 0; font: 400 14px/1 var(--font-mono); letter-spacing: 4px; color: var(--white); white-space: nowrap; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 45%, transparent 70%); mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 45%, transparent 70%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; animation: trail 3.6s linear infinite; }
.fcta__trail--a { left: 2%; bottom: 96px; }
.fcta__trail--b { right: 3%; bottom: 78px; animation-delay: -1.8s; }
@keyframes trail { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.fdark { padding: clamp(50px, 6vw, 80px) var(--gutter) 24px; background: var(--black); }
.fmain { display: grid; grid-template-columns: 1fr repeat(3, minmax(0, 1fr)) 1.3fr; gap: 40px clamp(18px, 1.8vw, 26px); }
.fbrand { display: grid; gap: 18px; align-content: start; font-size: 14px; color: var(--fg-muted); }
.fbrand__logo { color: var(--white); }
.fbrand__logo .mark { width: 40px; height: 40px; }
.fbrand__logo .wordmark { font-size: 22px; }
.fcol__title { margin-bottom: 14px; font-size: 15px; }
.fcol li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 4px; font-size: 15px; letter-spacing: -0.02em; }
.fcol li a .ic { width: 13px; height: 13px; stroke-width: 2; opacity: 0.7; transition: transform var(--motion-fast) var(--ease-brand); }
.fcol li a:hover .ic { transform: translateX(3px); opacity: 1; }
.fcol li a:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fcol address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--fg-muted); }
.fcol address a { display: inline-block; padding-block: 2px; color: var(--white); }
.fcol address a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fhours { display: grid; gap: 3px; margin-top: 16px; font-size: 13px; color: var(--fg-muted); }
.fhours li { display: flex; justify-content: space-between; gap: 12px; }
.fcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-griglia); margin-top: clamp(50px, 6vw, 80px); }
.fcard { position: relative; display: flex; align-items: flex-end; min-height: clamp(220px, 22vw, 320px); padding: 26px; overflow: hidden; border-radius: var(--radius); background: #262626; color: var(--white); isolation: isolate; }
.fcard .pic { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
.fcard .pic img { filter: grayscale(1) brightness(0.5); transition: filter var(--motion-slow) var(--ease-brand), transform var(--motion-slow) var(--ease-brand); }
.fcard--photo:hover .pic img { filter: grayscale(0.2) brightness(0.55); transform: scale(1.03); }
.fcard__txt { display: grid; gap: 8px; }
.fcard__big { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -0.05em; }
.fcard__small { font-size: 14px; color: rgb(255 255 255 / 0.7); }
.fcard > .ic { position: absolute; right: 22px; top: 22px; width: 22px; height: 22px; stroke-width: 2; color: var(--lime); transition: transform var(--motion-base) var(--ease-brand); }
.fcard:hover > .ic { transform: translateX(4px); }
.fcard__iso { position: absolute; right: 7%; bottom: 0; z-index: -1; width: auto; height: 88%; color: rgb(255 255 255 / 0.3); }
.fcard__iso-lit { fill: #e9e4cf; stroke: none; }
.fbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-muted); }
.fbar ul { display: flex; gap: 20px; }
.fbar a:hover { color: var(--white); }

/* ======================= PAGINE INTERNE ======================= */
/* hero interno della reference: percorso piccolo, titolo grande a sinistra, testo a destra */
.phero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 24px var(--gap-griglia); padding: clamp(150px, 22vh, 240px) var(--gutter) clamp(40px, 5vw, 70px); }
.phero > .crumbs { grid-column: 1 / -1; }
.phero__title { grid-column: 1 / 8; display: grid; gap: 16px; }
.phero__kicker { font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg-muted); }
.phero__side { grid-column: 9 / 13; display: grid; gap: 20px; justify-items: start; }
.phero__lead { font-size: 16px; line-height: 1.45; color: var(--fg-muted); }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.phero--center { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; }
.phero--center > * { grid-column: 1 / -1; }
.phero--center .h1-xl { max-width: 16ch; }
.phero--center .phero__lead { max-width: 52ch; }
.phero--center .phero__ctas { justify-content: center; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--fg-muted); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--fg-quiet); }
.crumbs a { color: var(--fg); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 26px; border-top: 1px solid var(--line); }
.chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 14px; border-radius: 999px; background: rgb(0 0 0 / 0.055); font-size: 14px; letter-spacing: -0.015em; transition: background var(--motion-fast), color var(--motion-fast); }
.chips li:first-child a, .chips a:hover { background: var(--black); color: var(--white); }
.chips sup { font-size: 10px; opacity: 0.6; }

.hub { padding: 0 var(--gutter) clamp(40px, 4vw, 70px); }
.cards--hub { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.crosslink { display: grid; justify-items: start; gap: 16px; padding: clamp(80px, 9vw, 140px) var(--gutter); background: var(--rule); }
.crosslink .h1 a { display: inline-flex; align-items: center; gap: 18px; }
.crosslink .h1 .btn__key { width: 44px; height: 44px; border-radius: var(--radius-s); background: var(--lime); color: var(--black); transition: transform var(--motion-base) var(--ease-brand); }
.crosslink .h1 .btn__key .ic { width: 22px; height: 22px; }
.crosslink .h1 a:hover .btn__key { transform: translateX(6px); }

/* card piccole con icona in basso ("Traps to Avoid") */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--gap-griglia); }
.tgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcard { display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 20px 20px 22px; border-radius: var(--radius); background: var(--surface); }
.tcard__t { font-size: 19px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 400; }
.tcard__d { max-width: 36ch; font-size: 14px; color: var(--fg-muted); }
.tcard__ico { margin-top: auto; padding-top: 24px; }
.tcard__ico .ic { width: 30px; height: 30px; stroke-width: 1.1; }

.b2b-intro { padding: clamp(80px, 9vw, 140px) var(--gutter); }
.b2b-intro__quote { max-width: 60ch; margin-top: 50px; }
.b2b-intro__quote p { font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.3; letter-spacing: -0.03em; }
.b2b-intro__quote footer { margin-top: 12px; font-size: 14px; color: var(--fg-muted); }

/* dettaglio servizio: media grande che sborda, blocchi a due colonne */
.sdetail { padding: 0 var(--gutter) clamp(70px, 8vw, 120px); }
.sdetail__media { margin: clamp(20px, 3vw, 40px) calc(var(--pad) * -1) 0; overflow: hidden; border-radius: var(--radius); }
.sdetail__media .pic, .sdetail__media .art-wrap { width: 100%; aspect-ratio: 16 / 8; max-height: 78svh; }
.sdetail__media .art-wrap { padding: 4%; }
.sdetail__block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px var(--gap-griglia); padding-top: clamp(70px, 8vw, 120px); }
.sdetail__block > .h1 { grid-column: 1 / 5; max-width: 12ch; }
.sdetail__block > .plist, .sdetail__block > .tgrid { grid-column: 5 / 13; }
.plist li { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.plist li:last-child { border-bottom: 1px solid var(--line); }
.plist p { max-width: 50ch; margin-top: 6px; color: var(--fg-muted); }
.plist .chev { flex: none; font-size: 13px; color: var(--fg-muted); padding-top: 4px; }
.sgallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-griglia); margin-top: clamp(60px, 7vw, 100px); }
.sgallery .pic { aspect-ratio: 4 / 3; border-radius: var(--radius); }

.rstrip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 30px var(--gap-griglia); padding: clamp(80px, 9vw, 140px) var(--gutter); }
.rstrip__score { grid-column: 1 / 4; display: grid; gap: 8px; justify-items: start; padding: 22px; border-radius: var(--radius); background: var(--black); color: var(--white); }
.rstrip__n { font-size: clamp(3.4rem, 5.5vw, 5rem); line-height: 0.9; letter-spacing: -0.07em; color: var(--lime); }
.rstrip__n small { margin-left: 0.15em; font-size: 0.26em; letter-spacing: 0; color: rgb(255 255 255 / 0.5); }
.rstrip__score .ic { display: inline-block; width: 12px; height: 12px; }
.rstrip__score a { display: inline-block; padding-block: 12px; font-size: 14px; color: rgb(255 255 255 / 0.75); text-decoration: underline; text-underline-offset: 3px; }
.rstrip__quote { grid-column: 5 / 13; }
.rstrip__quote p { font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.12; letter-spacing: -0.045em; }
.rstrip__quote footer { margin-top: 20px; font-size: 14px; color: var(--fg-muted); }

.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px var(--gap-griglia); padding: clamp(80px, 9vw, 140px) var(--gutter); background: var(--rule); }
.faq__head { grid-column: 1 / 5; display: grid; gap: 18px; align-content: start; justify-items: start; }
.faq__list { grid-column: 6 / 13; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; list-style: none; font-size: clamp(1.1rem, 1.45vw, 1.3rem); letter-spacing: -0.025em; }
.qa summary::-webkit-details-marker { display: none; }
.qa__icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 2px; background: rgb(0 0 0 / 0.06); transition: transform var(--motion-base) var(--ease-brand), background var(--motion-base); }
.qa__icon .ic { width: 14px; height: 14px; stroke-width: 2; }
.qa[open] .qa__icon { transform: rotate(45deg); background: var(--lime); }
.qa__a { max-width: 70ch; padding: 0 60px 24px 0; color: var(--fg-muted); }

.related { padding: clamp(80px, 9vw, 140px) var(--gutter); background: var(--rule); }
.related__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: 44px; }
.related__head .label { flex-basis: 100%; }
.cards--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.scta { padding: clamp(40px, 5vw, 80px) var(--gutter); }
.scta__panel { display: grid; justify-items: center; gap: 26px; margin-inline: calc(var(--pad) * -1); padding: clamp(70px, 9vw, 130px) 24px; border-radius: var(--radius); background: var(--black); text-align: center; }
.scta__panel .display-l { max-width: 16ch; }
.scta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* chi siamo */
.about-hero__panel { position: relative; display: grid; align-content: center; justify-items: center; gap: 24px; min-height: 86svh; padding: 150px var(--gutter) 200px; overflow: hidden; isolation: isolate; border-radius: 0 0 var(--radius-l) var(--radius-l); text-align: center; }
.about-hero .crumbs ol { justify-content: center; }
.about-hero__title { display: grid; gap: 16px; justify-items: center; }
.about-hero__title .h1-xl { max-width: 10ch; font-size: clamp(3rem, 6.6vw, 6.6rem); }
.about-hero__rings { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 50%; }
.about-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 70px var(--gap-griglia); padding: clamp(80px, 9vw, 140px) var(--gutter); }
.about-panel__intro, .about-panel__split { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap-griglia); }
.about-panel__intro .h2, .about-panel__split .h2 { grid-column: 1 / 6; max-width: 14ch; }
.about-panel__text, .about-panel__split > div { grid-column: 7 / 13; display: grid; gap: 18px; }
.about-panel__pic { grid-column: 1 / -1; margin-inline: calc(var(--pad) * -1); }
.about-panel__pic .pic { border-radius: var(--radius); }
.about-panel__pic figcaption { margin-top: 10px; padding-inline: var(--pad); font-size: 13px; color: var(--fg-muted); }
.about-steps { display: grid; gap: 14px; }
.about-steps li { display: grid; grid-template-columns: 40px 1fr; padding-top: 14px; border-top: 1px solid var(--line); }
.about-steps__n { padding-top: 3px; font: 400 12px/1.4 var(--font-mono); color: var(--fg-muted); }
.about-services, .loc-svc { display: grid; gap: 26px; justify-items: start; padding: clamp(80px, 9vw, 140px) var(--gutter); background: var(--rule); }
.about-services__cols, .loc-svc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px var(--gap-griglia); width: 100%; margin-top: 20px; }
.loc-svc__col { display: grid; gap: 22px; align-content: start; justify-items: start; }
.svc-list { display: grid; width: 100%; margin-top: 12px; }
.svc-list a { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 14px 8px 14px 4px; border-top: 1px solid var(--line); font-size: clamp(1.1rem, 1.6vw, 1.45rem); letter-spacing: -0.035em; transition: background var(--motion-fast), padding var(--motion-base) var(--ease-brand); }
.svc-list li:last-child a { border-bottom: 1px solid var(--line); }
.svc-list a:hover { padding-left: 12px; background: var(--surface); }
.svc-list__ico .ic { width: 22px; height: 22px; }
.svc-list a > .ic { width: 16px; height: 16px; stroke-width: 2; color: var(--fg-muted); }

/* contatti */
.clist { padding: 0 var(--gutter) clamp(40px, 5vw, 80px); }
.clist__row { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 20px; padding: clamp(18px, 2.4vw, 28px) 0; border-top: 1px solid var(--line); }
.clist__row:last-child { border-bottom: 1px solid var(--line); }
.clist__row > .mono { font-family: var(--font-sans); font-size: 14px; letter-spacing: -0.01em; text-transform: none; color: var(--fg-muted); }
.clist__v { font-size: clamp(1.4rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.05em; overflow-wrap: anywhere; }
.clist__v .sc-w { white-space: normal; }
.clist__go { width: 40px; height: 40px; border-radius: var(--radius-s); background: var(--black); color: var(--lime); transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-base) var(--ease-brand); }
.clist__go .ic { width: 18px; height: 18px; }
.clist__row:hover .clist__go { background: var(--lime); color: var(--black); transform: translateX(4px); }
.form-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap-griglia); padding: clamp(80px, 9vw, 140px) var(--gutter); background: var(--rule); }
.form-sec__head { grid-column: 1 / 5; display: grid; gap: 16px; align-content: start; justify-items: start; }
.form-sec__head p:last-child { color: var(--fg-muted); }
.form-sec .rform { grid-column: 6 / 13; }

/* richiesta */
.request { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 40px var(--gap-griglia); padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(90px, 10vw, 150px); background: var(--rule); }
.request__form { grid-column: 1 / 8; padding-top: 20px; }
.request__aside { grid-column: 9 / 13; position: sticky; top: 100px; display: grid; gap: var(--gap-griglia); }
.request__card { display: grid; gap: 14px; padding: 22px; border-radius: var(--radius); background: var(--surface); }
.request__big { font-size: clamp(1.7rem, 2.4vw, 2.2rem); letter-spacing: -0.045em; }
.request__card a { display: inline-flex; align-items: center; gap: 8px; }
.request__card .ic { width: 18px; height: 18px; }
.request__status { font-size: 14px; color: var(--fg-muted); }
.mini-steps { display: grid; gap: 12px; }
.mini-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; }
.mini-steps .mono { padding-top: 3px; color: var(--fg-muted); }
.mini-steps p { font-size: 14px; color: var(--fg-muted); }
.request .hours { font-size: 14px; }

/* testi legali e tabelle */
.legal { display: grid; gap: 18px; max-width: calc(860px + 2 * var(--gutter)); margin-inline: auto; padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(90px, 10vw, 150px); }
.legal h2 { margin-top: 28px; font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -0.03em; font-weight: 400; }
.legal ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.legal p, .legal li { max-width: 72ch; }
.legal > p.mono { font-size: 11px; color: var(--fg-muted); }
.draft { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--radius); background: var(--sand); }
.draft p:last-child { color: rgb(0 0 0 / 0.72); }
.table-wrap { overflow-x: auto; }
.ctable { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.ctable th, .ctable td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ctable th { font-size: 13px; font-weight: 600; color: var(--fg); border-bottom-color: var(--fg); }
.thanks, .nf { min-height: 80svh; align-content: center; }

/* ============================ FORM ============================ */
.rform { display: grid; gap: 30px; }
.rform__who { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; }
.rform__who legend { margin-bottom: 16px; padding: 0; }
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; width: min(100%, 380px); padding: 3px; border-radius: var(--radius-s); background: var(--surface); }
.seg__opt { position: relative; z-index: 1; cursor: pointer; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg__opt span { display: block; padding: 12px 18px; text-align: center; font-size: 15px; letter-spacing: -0.02em; color: var(--black); transition: color var(--motion-base) var(--ease-brand); }
.seg__opt input:checked + span { color: var(--white); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: -4px; border-radius: 2px; }
.seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 2px; background: var(--black); transition: transform var(--motion-base) var(--ease-emphasis); }
.seg:has(input[value='azienda']:checked) .seg__thumb { transform: translateX(100%); }
.rform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--gap-griglia); }
.rform__grid > div:has(> .field--wide), .field--wide { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-size: 14px; letter-spacing: -0.015em; }
.req { color: var(--fg); }
.opt { color: var(--fg-muted); }
.field input:not([type='checkbox']):not([type='radio']), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 13px 14px; border: 1px solid transparent; border-radius: var(--radius-s);
  background: var(--surface); color: var(--black); font-size: 16px; transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.field input::placeholder, .field textarea::placeholder { color: #8a8a8a; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field textarea { min-height: 140px; line-height: 1.5; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(0 0 0 / 0.2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 3px var(--lime); }
.field input[type='file'] { padding: 10px; font-size: 14px; }
.field input[type='file']::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; border-radius: 2px; background: var(--black); color: var(--white); font: 400 14px/1 var(--font-sans); cursor: pointer; }
.field__hint { font-size: 13px; color: var(--fg-muted); }
.field__err { min-height: 0; font-size: 13px; color: var(--error); }
.field__err:empty { display: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.check { display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 12px; font-size: 14px; color: var(--fg-muted); cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--black); }
.check a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rform__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.rform__alt { font-size: 14px; color: var(--fg-muted); }
.rform__alt a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.rform__status:empty { display: none; }
.rform__status { padding: 18px 20px; border-radius: var(--radius); background: var(--surface); outline: none; }
.rform__status.is-ok { box-shadow: inset 4px 0 0 var(--success); }
.rform__status.is-err { box-shadow: inset 4px 0 0 var(--error); }
.rform__status strong { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 500; }
.rform.is-sending [data-submit] { opacity: 0.6; pointer-events: none; }
.rform--compact .rform__grid { grid-template-columns: 1fr 1fr; }
[hidden] { display: none !important; }
html:not(.js) .only-b2b[hidden] { display: block !important; }

/* consenso statistiche (compare solo se GA4 è configurato) */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: 760px; margin-inline: auto; padding: 16px 18px; border-radius: var(--radius); background: var(--black); color: var(--white); font-size: 14px; }
.consent a { text-decoration: underline; }
.consent div { display: flex; gap: 8px; }
.consent button { min-height: 44px; padding: 0 18px; border-radius: var(--radius-s); background: rgb(255 255 255 / 0.13); font-size: 14px; }
.consent button[data-c='yes'] { background: var(--lime); color: var(--black); }
@media (max-width: 767px) { .consent { bottom: 80px; } }

/* ===================== STATI DI ANIMAZIONE ===================== */
/* titoli che si decodificano: le lettere compaiono dietro un blocco di pixel che scorre (reference) */
[data-scramble] .sc-w { display: inline-block; white-space: nowrap; }
[data-scramble] .sc-c { display: inline-block; white-space: pre; }
[data-scramble] .sc-c.is-wait { opacity: 0; }
[data-scramble] .sc-c.is-px { color: transparent !important; background-size: 100% 100%; image-rendering: pixelated; }
/* finché lo script non ha preparato il titolo resta nascosto (tranne la hero, che è l'LCP); rete di sicurezza a 2,5 s */
.js [data-scramble]:not([data-sc-ready]):not([data-scramble='hero']) { opacity: 0; animation: sc-safety 0s linear 2.5s forwards; }
@keyframes sc-safety { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js [data-scramble]:not([data-sc-ready]) { opacity: 1; animation: none; } }
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease-brand), transform 0.9s var(--ease-brand); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.no-boot.js .hero [data-reveal] { --d: 0.25s; }

/* dispositivi lenti / riduzione movimento */
.reduced *, .reduced *::before, .reduced *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.reduced .flowchips__track, .reduced .process__art, .reduced .fcta__trail { animation: none !important; }
.reduced .flowchips__track { flex-wrap: wrap; width: auto; padding-inline: 20px; }
@media (prefers-reduced-motion: reduce) {
  .flowchips__track, .art__led, .smap__pin span, .ops__chip, .process__art, .fcta__trail, .pc__log::after, .hero__scroll-key { animation: none !important; }
  .js .pc:not(.is-revealed) .pc__body, .js .pc:not(.is-revealed) .pc__stand { opacity: 1; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-pixel]:not(.is-sharp) img { opacity: 1; }
}

/* ========================== RESPONSIVE ========================== */
@media (max-width: 1279px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fmain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fbrand { grid-column: 1 / -1; }
}

/* tablet: l'etichetta ‹ PAGINA › non ci sta più accanto alla barra */
@media (max-width: 1023px) {
  .hdr-where { visibility: hidden; }
  .intro__title { max-width: 20ch; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-head__ctas { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .panswer__box { grid-template-columns: 1fr; }
  .split { display: block; }
  .split__sticky { position: static; padding-bottom: 50px; }
  .ops__text, .ops__visual { grid-column: 1 / -1; }
  .ops__visual { max-width: 560px; width: 100%; justify-self: center; }
  .az__quote, .az__ctas { grid-column: 1 / -1; justify-content: flex-start; }
  .process { grid-template-columns: 1fr; }
  .process__side { padding-inline: var(--gutter); }
  .process__art { height: 180px; order: -1; -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); }
  .reviews__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .where__info, .where__map { grid-column: 1 / -1; position: static; }
  .fmain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phero__title, .phero__side { grid-column: 1 / -1; }
  .sdetail__block > .h1, .sdetail__block > .plist, .sdetail__block > .tgrid { grid-column: 1 / -1; }
  .rstrip__score, .rstrip__quote, .faq__head, .faq__list, .form-sec__head, .form-sec .rform, .request__form, .request__aside { grid-column: 1 / -1; }
  .rstrip__score { justify-self: start; }
  .request__aside { position: static; }
  .about-panel__intro .h2, .about-panel__split .h2, .about-panel__text, .about-panel__split > div { grid-column: 1 / -1; }
  .cards--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgrid--3 { grid-template-columns: 1fr; }
  .tcard { min-height: 0; }
  .lab__win { margin-inline: calc(var(--gutter) * -1); }
  .lab__track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; padding: 1px var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .lab__track::-webkit-scrollbar { display: none; }
  .lab__item { flex: none; width: min(74vw, 340px); scroll-snap-align: start; }
  .lab__item:nth-child(even) { margin-top: 0; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  /* header: solo la barra nera a tutta larghezza, azioni rapide in basso */
  .site-header { top: 10px; grid-template-columns: minmax(0, 1fr); padding-inline: 10px; }
  .hdr-where, .hdr-cta { display: none; }
  .hdr-bar__top { height: 48px; }
  .hdr-burger { height: 48px; }
  .mnav__cta { display: inline-flex; }
  .mnav li a { font-size: 20px; min-height: 52px; }
  .btn { min-height: 44px; }
  .bbar {
    position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--black);
    transition: transform var(--motion-base) var(--ease-brand);
  }
  .bbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--radius-s); color: var(--white); font-size: 14px; letter-spacing: -0.02em; }
  .bbar a > .ic { width: 16px; height: 16px; }
  .bbar .bbar__main { justify-content: space-between; padding: 0 6px 0 14px; background: var(--lime); color: var(--black); }
  .bbar__main .btn__key { background: var(--black); color: var(--lime); }
  .menu-open .bbar { transform: translateY(150%); }
  .site-footer { padding-bottom: 72px; }

  .hero__panel { min-height: max(100svh, 640px); border-radius: 0 0 var(--radius) var(--radius); }
  .hero__main { padding-top: 118px; }
  .hero__lead { font-size: 15.5px; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 auto; justify-content: space-between; }
  .hero__proof { flex-direction: column; margin-top: 10px; }
  .hero__scroll { position: static; margin-top: 26px; font-size: 13px; }
  .pc { width: min(100%, 420px); margin-bottom: 40px; }
  .pc__body { padding: 7px 7px 20px; border-radius: 8px; }
  .pc__brand { bottom: 2px; }
  .pc__brand .mark { width: 13px; height: 13px; }
  .pc__led { bottom: 8px; right: 12px; }
  .intro__media { margin-inline: calc(var(--gutter) * -0.5); }
  .intro__media .pic { aspect-ratio: 4 / 3.4; }
  .intro__card { position: static; width: auto; border-radius: 0; background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pillars__grid { grid-template-columns: 1fr; gap: 40px; }
  .problems__list { display: grid; font-size: clamp(1.7rem, 7.6vw, 2.3rem); line-height: 1.12; }
  .problems__list li { border-bottom: 1px solid var(--line); }
  .problem { width: 100%; min-height: 56px; padding: 8px 6px; }
  .slash { display: none; }
  .split__sticky .display-l { font-size: clamp(3.2rem, 16vw, 5rem); }
  .svc-row__media { aspect-ratio: 4 / 3.2; }
  .cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(76vw, 300px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 1px var(--gutter) 14px; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
  .cards::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: start; }
  .cards--hub { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; margin: 0; padding: 0; }
  .ops__chip { font-size: 12.5px; }
  .flowchips { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .flowchips span { padding: 8px 13px; }
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .rscore { min-height: 0; }
  .rscroll { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .rscroll__track > *, .reviews--full .rscroll__track > * { width: 78vw; }
  .history__media { margin-inline: calc(var(--gutter) * -0.5); }
  .history__media .pic { aspect-ratio: 4 / 3; }
  .history__card { position: static; width: auto; border-radius: 0; background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .smap__cap { left: 12px; right: 12px; top: auto; bottom: 34px; width: auto; }
  .fcta { padding-inline: 10px; }
  .fcta__panel { margin-inline: 0; min-height: 0; padding: 70px 20px 150px; }
  .fcta__ctas { width: 100%; flex-direction: column; align-items: stretch; }
  .fcta__ctas .btn { justify-content: space-between; }
  .fcta__corner { bottom: 20px; }
  .fcta__corner--r { display: none; }
  .fcta__trail--b { display: none; }
  .fmain { gap: 32px var(--gap-griglia); }
  .fmain { grid-template-columns: minmax(0, 1fr); }
  .fcards { grid-template-columns: 1fr; }
  .fbar { flex-direction: column; }
  .phero { padding-top: 110px; gap: 20px; }
  .sdetail__media .pic, .sdetail__media .art-wrap { aspect-ratio: 4 / 3.4; }
  .sgallery { grid-template-columns: 1fr; }
  .rform__grid, .rform--compact .rform__grid { grid-template-columns: 1fr; }
  .rform__submit .btn { width: 100%; justify-content: space-between; }
  .clist__row { grid-template-columns: 1fr auto; }
  .clist__row > .mono { grid-column: 1 / -1; }
  .cards--related { grid-template-columns: none; }
  .about-hero__panel { min-height: 76svh; padding-bottom: 160px; }
  .about-services__cols, .loc-svc__cols { grid-template-columns: 1fr; }
  .qa__a { padding-right: 0; }
  .where__ctas > * { flex: 1 1 auto; justify-content: space-between; }
}

/* telefoni stretti */
@media (max-width: 359px) {
  .hdr-bar .wordmark { font-size: 15px; }
}

@media (min-width: 1600px) {
  body { font-size: 16px; }
}

/* ---------- container di Elementor (GENERATO) ----------
   I container a cui il design system non assegna un display tornano a blocco:
   senza questa regola sarebbero flex e i margini verticali non si fonderebbero.
   Le classi elencate qui sotto hanno già un loro display e non si toccano. */
.e-con:where(:not(:is(.about-hero__panel, .about-hero__title, .about-panel, .about-panel__intro, .about-panel__split, .about-panel__text, .about-services, .about-services__cols, .about-steps, .art-wrap, .aswitch, .az__ctas, .az__foot, .bbar, .boot, .boot__byte, .btn, .btn__key, .byteshift__sticky, .card__body, .card__go, .cards, .check, .chev, .chips, .clist__row, .consent, .crosslink, .display-xl, .draft, .faq, .faq__head, .fbar, .fbrand, .fcard, .fcard__txt, .fcards, .fcta__corner--r, .fcta__ctas, .fcta__panel, .fcta__trail--b, .fhours, .field, .field__err, .flowchips, .flowchips__track, .fmain, .form-sec, .form-sec__head, .h1-xl, .hdr-bar__top, .hdr-burger, .hdr-burger__lines, .hdr-cta, .hdr-logo, .hdr-where, .hero__copy, .hero__ctas, .hero__main, .hero__panel, .hero__proof, .hero__scroll, .hero__scroll-key, .hero__title, .history__card, .ic, .intro__card, .lab__track, .label, .legal, .line-link, .loc-svc, .loc-svc__col, .loc-svc__cols, .mini-steps, .mnav, .mnav__cta, .mnav__foot, .mnav__glitch, .only-b2b, .open-status, .ops, .ops__chip, .ops__text, .outcome, .panswer__actions, .panswer__box, .pc__bar, .pc__brand, .pc__bsod, .pc__cmd, .pc__ok, .pc__stop, .phero, .phero__ctas, .phero__side, .phero__title, .pic, .pillars__grid, .problems__answers, .problems__list, .process, .process__side, .qa__icon, .rating-chip, .rating-chip__stars, .rcard, .rcard__stars, .related__head, .request, .request__aside, .request__card, .reviews__grid, .rform, .rform__grid, .rform__status, .rform__submit, .rform__who, .roll, .rscore, .rscore__big, .rscore__dist, .rscore__sub, .rscroll__track, .rstrip, .rstrip__score, .rtopics, .rtopics__list, .sc-c, .sc-w, .scta__ctas, .scta__panel, .sdetail__block, .sec-head, .sec-head__ctas, .seg, .sgallery, .site-header, .slash, .smap__cap, .split, .split__list, .split__sticky, .svc-list, .svc-row, .svc-row__media, .tcard, .tgrid, .ui-hub, .ui-list, .ui-metric, .ui-metric__card, .ui-metric__s, .ui-row, .ui-row__ico, .where, .where__ctas, .where__facts, .where__info, .wipe))) { display: block; }

/* Nei contenitori in riga i widget non prendono tutta la larghezza, altrimenti
   vanno a capo uno per riga; dove il design system dà una misura al componente,
   quella vince (la regola sta su :where, che non conta nella specificità). */
:where(.e-con:is(.az__ctas, .btn, .chev, .chips, .consent, .fbar, .fcard, .fcta__ctas, .flowchips__track, .hdr-bar__top, .hdr-logo, .hdr-where, .hero__copy, .hero__ctas, .hero__main, .hero__panel, .hero__proof, .hero__scroll, .lab__track, .label, .line-link, .mnav__cta, .ops__chip, .panswer__actions, .pc__bar, .pc__bsod, .pc__cmd, .pc__ok, .pc__stop, .phero__ctas, .problems__list, .process__side, .rating-chip, .rating-chip__stars, .rcard, .rcard__stars, .related__head, .rform__submit, .rscore, .rscore__big, .rscore__sub, .rscroll__track, .rtopics, .rtopics__list, .scta__ctas, .sec-head__ctas, .tcard, .ui-metric__s, .ui-row, .where__ctas)) > :where(.elementor-widget) { width: auto; }

/* Larghezza predefinita dei container: auto invece di 100%, come nel sito statico
   (serve ai pannelli con i margini negativi e alle colonne che si restringono sul
   contenuto). Si cambia solo il valore predefinito della variabile, così la
   larghezza impostata nel pannello di Elementor continua a vincere; si scrive
   .e-con.e-con perché sul telefono Elementor rimette --width: 100%. */
.e-con.e-con { --width: auto; }