/* ============================================================
   Guacamedia theme - design system
   Dark ancorato ai token della console (Design System 2.0),
   Inter + Instrument Serif, un solo accento verde, zero gradienti
   decorativi. Le animazioni sono progressive: senza JS il contenuto
   resta visibile (gate .gm-anim aggiunto da js/site.js).
   ============================================================ */

/* Instrument Serif con il VERO corsivo (ital@1): la piattaforma inietta
   solo wght@400, senza italic il browser lo finge e "comunicare" cambia
   faccia. Google Fonts e' un URL assoluto, valido anche nel sito statico. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  --bg: #0a0b0a;
  --bg-elevated: #0e100e;
  --surface: #111411;
  --surface-2: #171b17;
  --surface-muted: rgba(255, 255, 255, 0.045);
  --text: #edefe9;
  --text-muted: #9aa094;
  --text-faint: #6a7064;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.17);
  --accent: #4fc878;
  --accent-solid: #3fba68;
  --accent-hover: #37aa5e;
  --accent-ink: #06210f;
  --accent-soft: rgba(79, 200, 120, 0.12);
  --seed: #e5c462;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1140px;

  /* Ritmo di pagina: due token, non un clamp ricopiato in dodici punti.
     (Savee deriva il margine da --nav-height con round(): elegante, ma qui
     avrebbe stretto i margini desktop da 40 a 33px senza motivo, e round()
     non e' supportato ovunque: se cade, var() resta invalido e il padding
     va a zero. Teniamo i valori attuali, guadagniamo la fonte unica.) */
  --nav-height: 68px;
  --page-margin: clamp(20px, 4vw, 40px);

  /* Scala tipografica ottica. La regola: piu' il testo e' grande, piu'
     l'interlinea scende sotto 1 e la spaziatura si stringe; sotto i 16px
     la spaziatura torna POSITIVA, perche' le lettere piccole hanno bisogno
     d'aria mentre quelle grandi hanno bisogno di stare strette.
     I pesi si fermano a 500/600: la gerarchia la fanno dimensione e ritmo,
     non il grassetto. */
  --t-display: clamp(2.9rem, 8vw, 6.6rem);
  --t-display-lh: 0.93;
  --t-display-ls: -0.045em;

  --t-title: clamp(2rem, 4vw, 3.1rem);
  --t-title-lh: 1;
  --t-title-ls: -0.038em;

  --t-subtitle: clamp(1.5rem, 2.4vw, 2rem);
  --t-subtitle-lh: 1.08;
  --t-subtitle-ls: -0.032em;

  --t-h3: 1.3rem;
  --t-h3-lh: 1.18;
  --t-h3-ls: -0.025em;

  --t-lead: clamp(1.06rem, 1.4vw + 0.4rem, 1.3rem);
  --t-lead-lh: 1.5;
  --t-lead-ls: -0.017em;

  --t-body: 1rem;
  --t-body-lh: 1.55;
  --t-body-ls: -0.011em;

  --t-small: 0.9rem;
  --t-small-lh: 1.5;
  --t-small-ls: -0.005em;

  --t-label: 0.78rem;
  --t-label-lh: 1.4;
  --t-label-ls: 0.012em;

  --w-display: 500;
  --w-strong: 600;
  /* Alias/scale richiesti dal validatore temi della piattaforma. */
  --fg: var(--text);
  --font-display: var(--font-sans);
  --gutter: var(--page-margin);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
}

.site, .site *, .site *::before, .site *::after { box-sizing: border-box; }
.site { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 20px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--t-body-lh); letter-spacing: var(--t-body-ls); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
.site a { color: inherit; text-decoration: none; }
.site img { max-width: 100%; display: block; }
::selection { background: rgba(79, 200, 120, 0.26); color: var(--text); }

.gm-wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--page-margin); padding-right: var(--page-margin); }
.serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.005em; color: var(--accent); }
/* Una parola in *corsivo* nei titoli diventa l'accento serif verde (editabile a mano). */
.gm-hero h1 em, .gm-title em, .gm-idx-t em, .gm-pillar-txt h3 em, .gm-team-txt em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; color: var(--accent); }

/* ---------- top bar (nav chrome) ---------- */
/* EFFETTO CINEMA: mentre il filmato sale al centro dello schermo, la barra in
   alto si smaterializza. Il fondo, la sfocatura e il filo stanno tutti su uno
   strato sotto (::before) e sfumano insieme; il marchio e il selettore lingua
   rimpiccioliscono e si attenuano. Fuori da quel tratto la barra e' quella di
   sempre: --cinema vale 0 e nessuna di queste regole ha effetto.
   Il numero lo scrive js/site.js, lo stesso che pilota lo zoom del video. */
.gm-top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-height); padding: 0 var(--page-margin); }
.gm-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  /* transizione corta: il valore arriva gia' smorzato dal rAF, una lunga
     ci metterebbe un secondo ritardo sopra e il fondo resterebbe indietro. */
  opacity: 0; transition: opacity 0.14s linear;
}
.gm-top.scrolled::before { opacity: calc(1 - var(--cinema, 0)); }
.gm-brand, .gm-lang { transition: transform 0.14s linear, opacity 0.14s linear; }
.gm-brand { transform-origin: left center; }
.gm-lang { transform-origin: right center; }
.gm-brand { transform: scale(calc(1 - var(--cinema, 0) * 0.26)); }   /* si rimpicciolisce, non si spegne */
.gm-lang { transform: scale(calc(1 - var(--cinema, 0) * 0.3)); opacity: calc(1 - var(--cinema, 0) * 0.45); }
.gm-brand { display: flex; align-items: center; gap: 11px; }
.gm-mark { position: relative; width: 29px; height: 29px; border-radius: 9px; background: var(--accent-solid); flex: none; }
.gm-mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--seed); transform: translate(-50%, -50%); }
.gm-word { font-weight: var(--w-strong); font-size: 17px; letter-spacing: -0.03em; }

/* ---------- selettore lingua (tendina in header, alto a destra) ----------
   Native <details>: funziona senza JS, in editor e nel sito statico. Stile
   ancorato ai token (superficie + bordo + blur), come la dock. Il widget
   flottante globale della piattaforma viene nascosto: qui il selettore vive
   nell'header, cosi' non collide piu' con la dock in basso. */
.gm-lang { position: relative; flex: none; }
.gm-lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.gm-lang > summary::-webkit-details-marker { display: none; }
.gm-lang > summary:hover, .gm-lang[open] > summary { color: var(--text); border-color: var(--text-faint); }
.gm-lang-globe { width: 15px; height: 15px; opacity: 0.85; }
.gm-lang-code { text-transform: uppercase; }
.gm-lang-caret { width: 13px; height: 13px; opacity: 0.6; transition: transform 0.2s var(--ease); }
.gm-lang[open] .gm-lang-caret { transform: rotate(180deg); }
.gm-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 172px; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--shadow-pop); z-index: 60; }
.gm-lang-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--text-muted); transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.gm-lang-opt:hover { background: var(--surface-muted); color: var(--text); }
.gm-lang-opt.is-current { color: var(--text); }
.gm-lang-opt-code { flex: none; width: 24px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-faint); }
.gm-lang-opt.is-current .gm-lang-opt-code { color: var(--accent); }

/* Widget lingua flottante della piattaforma: qui e' sostituito dalla tendina
   in header, quindi lo nascondo su ogni schermo (niente collisione con dock). */
.gm-langnav { display: none !important; }

/* RTL (arabo): il documento ha gia' dir="rtl". Specchio i pochi ancoraggi
   fisici del selettore; la dock e' centrata, quindi resta a posto. */
html[dir="rtl"] .gm-lang-menu { right: auto; left: 0; }
html[dir="rtl"] .gm-lang-opt-code { letter-spacing: 0; }

/* ---------- buttons ---------- */
.btn { font-family: var(--font-sans); font-size: 15px; font-weight: var(--w-strong); letter-spacing: -0.02em; border-radius: 10px; padding: 13px 22px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid transparent; transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease); }
.btn-primary { color: var(--accent-ink); background: var(--accent-solid); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
/* .site a {color:inherit} (0,1,1) batte .btn-primary (0,1,0): senza questo il
   CTA <a> nell'hero eredita il bianco. Rialzo la specificita' = testo scuro. */
.site a.btn-primary { color: var(--accent-ink); }
.btn-ghost { color: var(--text); background: transparent; border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--text-faint); background: var(--surface); transform: translateY(-2px); }
.btn svg { transition: transform 0.25s var(--ease); }
.btn-ghost:hover svg { transform: translateX(3px); }

/* ---------- hero ---------- */
/* L'hero non prende tutto lo schermo: si ferma all'84% dell'altezza, cosi'
   il bordo alto del filmato si affaccia sotto i bottoni gia' al primo colpo
   d'occhio, senza dover scorrere per scoprire che sotto c'e' qualcosa.
   E' quello che fa Savee: il video si intravede e ti tira giu'. */
.gm-hero { position: relative; overflow: hidden; min-height: 84svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 108px var(--page-margin) clamp(52px, 7vh, 80px); }
.gm-hero canvas { position: absolute; inset: 0; z-index: 0; }
.gm-hero .falloff { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(112% 96% at 50% 38%, transparent 26%, color-mix(in srgb, var(--bg) 78%, transparent) 68%, var(--bg) 100%), linear-gradient(to bottom, transparent 62%, var(--bg) 100%); }
.gm-hero .grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0.04; mix-blend-mode: screen; }
.gm-hero-content { position: relative; z-index: 2; }
.gm-hero h1 { font-weight: var(--w-display); font-size: var(--t-display); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); max-width: 15ch; margin: 0 auto; }
.gm-hero .sub { margin: 30px auto 0; max-width: 600px; font-size: var(--t-lead); line-height: var(--t-lead-lh); letter-spacing: var(--t-lead-ls); color: var(--text-muted); }
.gm-hero .sub b, .gm-hero .sub strong { color: var(--text); font-weight: 600; }
.gm-cta-row { margin-top: 38px; display: flex; align-items: center; justify-content: center; gap: 13px; flex-wrap: wrap; }

/* ---------- section scaffolding ---------- */
/* Niente filo tra una banda e l'altra: hanno tutte lo stesso fondo, quindi
   la riga non separa niente, segna solo il punto in cui finisce un blocco.
   A dividere ci pensano lo spazio e il cambio di ritmo tipografico. */
.gm-band { position: relative; z-index: 2; background: var(--bg); padding: clamp(96px, 15vh, 190px) 0; }
.gm-kicker { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.gm-head { max-width: 760px; margin-bottom: clamp(54px, 7vh, 88px); }
.gm-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.gm-title { font-size: var(--t-title); font-weight: var(--w-display); letter-spacing: var(--t-title-ls); line-height: var(--t-title-lh); }
.gm-intro { margin-top: 20px; font-size: var(--t-lead); line-height: var(--t-lead-lh); letter-spacing: var(--t-lead-ls); color: var(--text-muted); max-width: 620px; }
.gm-intro b, .gm-intro strong { color: var(--text); }
.gm-head--center .gm-intro { margin-left: auto; margin-right: auto; }

/* ---------- services ---------- */
/* ---------- vetrina: il filmato ----------
   La meccanica e' quella di Savee: lo STESSO filmato montato due volte, dietro
   sfocato e piu' grande, davanti nitido. L'alone attorno allo schermo non e'
   un'ombra colorata a caso, e' il contenuto stesso fuori fuoco, quindi cambia
   insieme alle immagini. Costa zero banda in piu': e' lo stesso file, il
   secondo <video> attinge alla cache.
   Lo scroll pilota un solo numero (--p, da 0 a 1) e il CSS decide cosa farci.
   Il JS non anima niente e non tocca il layout.
   Nota peso: vendiamo velocita' e in pagina c'e' il test che lo dice al
   cliente, quindi il poster e' un jpeg da 13 kB, i video non partono finche'
   non entrano nello schermo, e la copia sfocata (che raddoppierebbe la
   decodifica) sparisce sotto i 900px e con reduced-motion. */
/* Il filmato arriva subito dopo i bottoni dell'hero: nessun titolo, nessun
   occhiello, nessuna didascalia. Si guarda, non si presenta. Per questo la
   banda qui sopra non ha il suo padding: parte quasi attaccata. */
/* La banda del filmato taglia solo di lato: l'alone deve poter uscire in
   basso e continuare dentro "Cosa facciamo", se no si vede il gradino netto
   dove finisce la sezione. Sta sotto (z-index 1) alle bande successive, che
   qui diventano trasparenti: cosi' la luce passa dietro al testo. */
.gm-vetrina { overflow: visible; padding-top: 0; z-index: 1; }
/* IL FILMATO NON DEVE POTER ALLARGARE LA PAGINA.
   Intorno alla cornice ci sono due cose piu' larghe di lei: l'alone, che
   su schermo grande e' un video sfocato ingrandito quasi quattro volte e su
   telefono una sfumatura al 116%, e la cornice stessa, che con lo scorrimento
   arriva a 1,12. Nessuna delle due si vede ai bordi - una e' sfumata, l'altra
   e' quello che vogliamo, il filmato che riempie - ma tutte e due CONTANO
   nella larghezza del documento, e bastavano a far scorrere la pagina di
   lato di una quarantina di pixel su telefono.
   "clip" e non "hidden": hidden sull'orizzontale costringe il verticale a
   diventare una zona di scorrimento a se', e romperebbe lo scorrimento
   normale della pagina. clip taglia e basta. */
.gm-vetrina { overflow-x: clip; }
.gm-vet-stage { --p: 0; position: relative; display: grid; place-items: center; margin: 0 auto; padding: 0 var(--page-margin); }
.gm-vet-alone {
  position: absolute; inset: -55% 0 -95% 0; display: grid; place-items: center;
  pointer-events: none; z-index: 0;
}
/* L'alone si sfoca PICCOLO e poi si ingrandisce. Sfocare un rettangolo da
   1250px con un raggio da 90 costringe Chrome a disegnarlo a piastrelle da
   512 pixel, e sulla giunzione fra due piastrelle restava una riga netta in
   mezzo alla pagina (si vedeva fra l'hero e il filmato). Qui il rettangolo
   sfocato e' largo 340px - una piastrella sola, nessuna giunzione - e a
   portarlo a dimensione ci pensa la scala, che moltiplica anche la
   sfocatura: 26 x 3,7 fa lo stesso alone di prima. */
.gm-vet-alone .gm-vet-v {
  width: 340px; aspect-ratio: 16 / 9; object-fit: cover;
  opacity: 0.52; filter: blur(26px);
  transform: scale(calc((1.15 + var(--p) * 0.35) * 3.7));
  /* La maschera sta SUL VIDEO, non sul contenitore: cosi' vive nello stesso
     spazio della sfocatura e viene ingrandita insieme a lei. Messa sul
     contenitore, la luce svaniva in un punto e la sfocatura veniva tagliata
     in un altro - e il taglio era la riga che si vedeva fra l'hero e il
     filmato. Qui la luce e' gia' a zero molto prima del bordo, quindi non
     c'e' piu' nessun bordo da tagliare. */
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 0%, #000 26%, transparent 94%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 0%, #000 26%, transparent 94%);
}
.gm-vet-cornice { position: relative; z-index: 1; width: min(1160px, calc(100vw - var(--page-margin) * 2)); border-radius: clamp(12px, 1.6vw, 22px); overflow: hidden; background: #000; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85); transform: scale(calc(0.86 + var(--p) * 0.26)); transform-origin: 50% 45%; }
.gm-vet-cornice .gm-vet-v { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Il bottone di riproduzione: invisibile finche' il video parte da solo.
   Non e' un controllo del player, e' una scialuppa - per questo e' grande,
   al centro, e non ha etichetta scritta. */
.gm-vet-play {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
  display: none; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--accent-solid) 92%, transparent);
  color: var(--accent-ink);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.75);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.gm-vet-play:hover { transform: scale(1.06); }
.gm-vet-play:active { transform: scale(0.96); }
.gm-vet-fermo .gm-vet-play { display: flex; }
@media (max-width: 640px) { .gm-vet-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; } }

.gm-vet-did { margin: clamp(22px, 3vh, 34px) auto 0; text-align: center; font-size: var(--t-label); letter-spacing: var(--t-label-ls); color: var(--text-faint); }
@media (max-width: 900px) {
  /* Due video in decodifica su un telefono non valgono l'alone: resta il nitido. */
  .gm-vet-alone { display: none; }
  .gm-vet-cornice { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-vet-alone { display: none; }
  .gm-vet-cornice { transform: none; }
}


/* ---------- servizi ----------
   Impianto disegnato da Dario. Tre parti: l'intro su due colonne allineate
   in basso (titolo grande a sinistra, sommario a destra), l'elenco numerato
   del processo con una riga di separazione fra le voci, e in fondo le schede
   degli interventi mirati - due riquadri divisi da un filo di un pixel, che
   e' lo sfondo che passa fra due superfici accostate.
   Qui aggiungo solo due cose: i colori arrivano dai token del tema invece di
   essere scritti a mano, e le voci entrano sfalsate come tutto il resto del
   sito (il numero, poi il titolo, poi il testo).
   La parola in corsivo del titolo diventa serif verde: e' la stessa regola
   che vale nell'hero, quindi la sezione parla la lingua del resto. */
.gm-servizi { background: transparent; }   /* lascia passare l'alone del filmato */
.gm-serv-kick { display: flex; align-items: center; gap: 12px; margin: 0 0 44px; }
.gm-serv-kick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.gm-serv-testa {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: end;
  padding-bottom: 64px;
}
.gm-serv-testa .gm-title {
  max-width: 620px; margin: 0;
  font-size: clamp(44px, 5.2vw, 72px); font-weight: 450;
  line-height: 0.99; letter-spacing: -0.055em;
}
.gm-serv-occhio { max-width: 450px; margin: 0; color: var(--text-muted); font-size: 18px; line-height: 1.55; }

.gm-serv-lista { border-top: 1px solid var(--border); counter-reset: gmserv; }
.gm-serv {
  counter-increment: gmserv;
  display: grid;
  grid-template-columns: 56px minmax(210px, 0.82fr) minmax(320px, 1.18fr);
  gap: 24px; align-items: start;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--border);
}
.gm-serv-n { padding-top: 4px; color: var(--accent); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.gm-serv-n::before { content: counter(gmserv, decimal-leading-zero); }
.gm-serv h3 { margin: 0; font-size: clamp(21px, 2vw, 25px); font-weight: 520; line-height: 1.25; letter-spacing: -0.025em; }
.gm-serv h3 em, .gm-serv-box h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.gm-serv p { max-width: 570px; margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; }

.gm-serv-tit2 { margin: 64px 0 18px; color: var(--text-muted); font-size: 12px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }
/* Il filo fra le schede e' il fondo che si vede nel varco di un pixel fra
   due superfici: una riga sola invece di quattro bordi che si sommano. */
.gm-serv-schede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.gm-serv-schede:empty, .gm-serv-tit2:has(+ .gm-serv-schede:empty) { display: none; }
.gm-serv-box { min-height: 230px; padding: 30px; background: var(--surface); }
.gm-serv-meta { display: block; margin-bottom: 46px; color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }
.gm-serv-box h3 { margin: 0 0 12px; font-size: clamp(21px, 2vw, 25px); font-weight: 520; letter-spacing: -0.025em; }
.gm-serv-box p { max-width: 440px; margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.6; }

/* entrata: il numero, poi il titolo, poi il testo - una voce per volta */
.gm-anim .gm-serv .gm-serv-n { opacity: 0; transition: opacity 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 75ms + 120ms); }
.gm-anim .gm-serv.in .gm-serv-n { opacity: 1; }
.gm-anim .gm-serv p, .gm-anim .gm-serv-box p { opacity: 0; transition: opacity 0.55s var(--ease); transition-delay: calc(var(--i, 0) * 75ms + 280ms); }
.gm-anim .gm-serv.in p, .gm-anim .gm-serv-box.in p { opacity: 1; }
.gm-anim .gm-serv-box .gm-serv-meta { opacity: 0; transition: opacity 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 75ms + 120ms); }
.gm-anim .gm-serv-box.in .gm-serv-meta { opacity: 1; }
html.gm-editor .gm-serv p, html.gm-editor .gm-serv .gm-serv-n,
html.gm-editor .gm-serv-box p, html.gm-editor .gm-serv-box .gm-serv-meta { opacity: 1 !important; }

@media (max-width: 760px) {
  .gm-serv-kick { margin-bottom: 32px; }
  .gm-serv-testa { grid-template-columns: 1fr; gap: 24px; padding-bottom: 48px; }
  .gm-serv-testa .gm-title { font-size: clamp(42px, 13vw, 58px); }
  .gm-serv-occhio { font-size: 17px; }
  .gm-serv { grid-template-columns: 42px minmax(0, 1fr); gap: 10px 14px; padding: 25px 0 27px; }
  .gm-serv p { grid-column: 2; }
  .gm-serv-schede { grid-template-columns: 1fr; }
  .gm-serv-box { min-height: 0; }
  .gm-serv-meta { margin-bottom: 30px; }
}

/* ---------- articolo: le pagine di servizio ----------
   Le pagine che rispondono a una ricerca sono fatte di testo, e il testo va
   messo in condizione di essere letto: una colonna sola, larga quanto una
   riga si legge senza perdere il segno (circa 68 caratteri), titoli di
   sezione che si distinguono senza urlare, e spazio fra un blocco e l'altro.
   Niente riquadri: e' un articolo, non una scheda prodotto. */
/* La testata e' un manifesto: centrata, col campo di punti alle spalle,
   come l'hero della home. Il CORPO invece resta ancorato a sinistra:
   paragrafi lunghi centrati si leggono male, l'occhio perde l'attacco
   della riga. Testata da manifesto, lettura da libro. */
.gm-art { position: relative; }
.gm-art-cielo { position: absolute; inset: 0 0 auto 0; height: min(520px, 60vh); z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.gm-art-cielo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-art .gm-wrap { position: relative; z-index: 1; }
.gm-art-testa { max-width: min(860px, 100%); margin: 0 auto; text-align: center; }
.gm-art-testa .gm-serv-kick { justify-content: center; }
.gm-art-intro { margin-left: auto; margin-right: auto; }
.gm-art-subito { display: flex; justify-content: center; }
.gm-art-h {
  margin: 0; font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: var(--w-display);
  line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance;
}
.gm-art-h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.gm-art-intro { margin-top: clamp(20px, 3vh, 32px); max-width: 62ch; }
.gm-art-intro p { margin: 0 0 14px; color: var(--text-muted); font-size: var(--t-lead); line-height: var(--t-lead-lh); letter-spacing: var(--t-lead-ls); }
.gm-art-intro p:last-child { margin-bottom: 0; }

.gm-art-corpo { margin-top: clamp(50px, 8vh, 96px); max-width: 68ch; margin-left: auto; margin-right: auto; }
.gm-art-sez + .gm-art-sez { margin-top: clamp(40px, 6vh, 72px); padding-top: clamp(36px, 5vh, 60px); border-top: 1px solid var(--border); }
.gm-art-sez h2 {
  margin: 0 0 18px; font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: var(--w-display);
  letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance;
}
.gm-art-sez h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.gm-art-sez p { margin: 0 0 16px; color: var(--text-muted); font-size: 1.05rem; line-height: 1.68; }
.gm-art-sez p:last-child { margin-bottom: 0; }
.gm-art-sez strong { color: var(--text); font-weight: 600; }
.gm-art-sez a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.gm-art-punti { margin: 18px 0 0; padding: 0; list-style: none; }
.gm-art-punti li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  color: var(--text-muted); font-size: 1.05rem; line-height: 1.6;
}
.gm-art-punti li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* La coppia di bottoni sta NELLA colonna del testo, allineata a sinistra
   come l'ultima riga del discorso: prima galleggiava centrata fra il corpo
   e il modulo, scollegata da tutti e due. */
/* I bottoni finali stanno CENTRATI, e la nota con loro: e' la chiusa della
   pagina, non una riga del paragrafo. (Prima erano a sinistra con la nota
   centrata, poi a sinistra del tutto: la forma giusta e' questa, tutto
   centrato e coerente, su richiesta esplicita e accorata di Dario.) */
.gm-art-cta { margin: clamp(34px, 5vh, 56px) auto 0; max-width: 68ch; text-align: center; }
.gm-art-cta-riga { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.gm-art-nota { text-align: center; }
@media (max-width: 640px) {
  /* su telefono i due bottoni si impilano a tutta larghezza: mezzo bottone
     per riga e' il peggio dei due mondi */
  .gm-art-cta-riga { flex-direction: column; }
  .gm-art-cta-riga .btn { width: 100%; justify-content: center; }
}
.gm-art-nota { margin: 14px 0 0; color: var(--text-faint); font-size: var(--t-small); }

/* ---------- domande frequenti ----------
   Un <details> nativo per voce: si apre senza JS, e chi arriva da una
   ricerca trova la risposta senza dover cercare il bottone giusto. */
.gm-faq-lista { margin-top: clamp(36px, 5vh, 60px); max-width: 68ch; border-top: 1px solid var(--border); }
.gm-faq-voce { border-bottom: 1px solid var(--border); }
.gm-faq-voce > summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 20px;
  justify-content: space-between; padding: clamp(18px, 2.6vh, 26px) 0;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: var(--w-strong);
  letter-spacing: -0.02em; line-height: 1.4; color: var(--text);
  transition: color 0.2s var(--ease);
}
.gm-faq-voce > summary::-webkit-details-marker { display: none; }
.gm-faq-voce > summary:hover { color: var(--accent); }
.gm-faq-segno { position: relative; flex: none; width: 14px; height: 14px; margin-top: 5px; }
.gm-faq-segno::before, .gm-faq-segno::after {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px;
  background: var(--text-faint); transition: transform 0.28s var(--ease), background 0.2s var(--ease);
}
.gm-faq-segno::after { transform: rotate(90deg); }
.gm-faq-voce[open] .gm-faq-segno::after { transform: rotate(0deg); }
.gm-faq-voce[open] .gm-faq-segno::before, .gm-faq-voce[open] .gm-faq-segno::after { background: var(--accent); }
.gm-faq-risposta { padding: 0 0 clamp(20px, 3vh, 28px); max-width: 60ch; }
.gm-faq-risposta p { margin: 0 0 12px; color: var(--text-muted); font-size: 1.02rem; line-height: 1.65; }
.gm-faq-risposta p:last-child { margin-bottom: 0; }

/* ---------- coverflow lavori/campagne ----------
   I progetti restano in coverflow 3D: la scheda centrale si legge intera e
   le altre restano inclinate ai lati, cosi' si capisce che c'e' un seguito.
   Le posizioni le calcola js/site.js frame per frame su una posizione
   CONTINUA (0.0, 1.4, 2.7...): trascinando, le card seguono la mano invece
   di saltare da una all'altra, e al rilascio una molla le aggancia alla piu'
   vicina. Per questo qui NON c'e' transition sul transform: la fluidita' la
   fa la molla, una transition ci litigherebbe sopra.
   Senza JS le schede restano impilate in colonna e leggibili. */
.gm-cf { margin-top: clamp(30px, 4vh, 52px); }
.gm-cf-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; counter-reset: gmcf; }
.gm-cf-card { counter-increment: gmcf; position: relative; width: min(700px, 92vw); height: 420px; display: flex; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-pop); }
.gm-cf-shot { flex: 0 0 300px; height: 100%; position: relative; overflow: hidden; background: #000; border-right: 1px solid var(--border); }
.gm-cf-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; pointer-events: none; user-select: none; }
.gm-cf-shot::after { content: ""; position: absolute; inset: 0; box-shadow: inset -20px 0 40px -20px rgba(0, 0, 0, 0.55); }
.gm-cf-info { flex: 1; min-width: 0; padding: 34px; display: flex; flex-direction: column; justify-content: center; }
.gm-cf-num { font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; color: var(--accent); margin-bottom: 14px; }
.gm-cf-num::before { content: counter(gmcf, decimal-leading-zero); }
.gm-cf-info h3 { margin: 0; font-size: var(--t-h3); font-weight: var(--w-display); letter-spacing: var(--t-h3-ls); line-height: var(--t-h3-lh); }
.gm-cf-info h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
.gm-cf-info p { color: var(--text-muted); font-size: var(--t-small); line-height: 1.6; letter-spacing: var(--t-small-ls); margin-top: 14px; }
.gm-cf-visit { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 9px; color: var(--accent); font-weight: var(--w-strong); font-size: var(--t-label); letter-spacing: 0.01em; width: max-content; max-width: 100%; white-space: nowrap; }
.gm-cf-visit svg { transition: transform 0.25s var(--ease); }
.gm-cf-nav { display: none; margin-top: 40px; align-items: center; justify-content: center; gap: 20px; }
.gm-cf-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease); }
.gm-cf-arrow:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.gm-cf-dots { display: flex; gap: 8px; align-items: center; }
.gm-cf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); border: 0; padding: 0; cursor: pointer; transition: width 0.3s var(--ease), background 0.3s var(--ease), border-radius 0.3s var(--ease); }
.gm-cf-dot.on { background: var(--accent); width: 24px; border-radius: 4px; }

.gm-cf.is-live .gm-cf-stage { display: block; position: relative; height: 460px; perspective: 2200px; cursor: grab; touch-action: pan-y; }
.gm-cf.is-live .gm-cf-stage.is-drag { cursor: grabbing; user-select: none; }
.gm-cf.is-live .gm-cf-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 22px; }
.gm-cf.is-live .gm-cf-card { position: absolute; top: 50%; left: 50%; cursor: pointer; will-change: transform, opacity; }
.gm-cf.is-live .gm-cf-card.is-active { cursor: default; border-color: var(--border-strong); }
.gm-cf.is-live .gm-cf-card.is-active .gm-cf-visit:hover svg { transform: translateX(4px); }
.gm-cf.is-live .gm-cf-shot img { transition: none; will-change: transform; }
.gm-cf.is-live .gm-cf-nav { display: flex; }
@media (max-width: 860px) {
  .gm-cf.is-live .gm-cf-stage { height: 400px; }
  .gm-cf-card { width: 88vw; height: 360px; border-radius: 16px; }
  .gm-cf-shot { flex: 0 0 42%; }
  .gm-cf-info { padding: 20px; }
  .gm-cf-num { font-size: 1.1rem; margin-bottom: 8px; }
  .gm-cf-info p { margin-top: 10px; }
  .gm-cf-visit { padding-top: 14px; }
}
html.gm-editor .gm-cf-nav { display: none !important; }

/* ---------- works ---------- */
.gm-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gm-work { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-elevated); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); }
.gm-work:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.gm-work-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.gm-work-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.gm-work-shot { aspect-ratio: 1440 / 820; background: var(--surface-2); overflow: hidden; }
.gm-work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gm-work-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.gm-work-name { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.gm-work-tag { font-size: 0.82rem; color: var(--text-faint); }
.gm-work:hover .gm-work-tag { color: var(--accent); }
@media (max-width: 900px) { .gm-works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gm-works { grid-template-columns: 1fr; } }

/* coverflow lavori/campagne: card 3D (screenshot a sinistra, info a destra).
   Progressive enhancement: senza JS (o in editor) le card restano statiche
   e impilate (tutte visibili/editabili); js/site.js aggiunge .is-live e
   attiva il coverflow. Numero via contatore CSS (decimal-leading-zero). */
/* Marquee dei clienti, alla "Used by leading design studios" di Savee: i nomi
   arrivano dagli stessi items del carosello, quindi non c'e' contenuto doppio
   da tenere allineato a mano. Il gruppo e' scritto due volte nel template e il
   track scorre di -50%: il giro si chiude esatto, senza una riga di JS. Ai
   bordi una mask sfuma invece di tagliare di netto. */
.gm-marquee { overflow: hidden; margin: 0 0 clamp(40px, 6vh, 72px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.gm-marquee-track { display: flex; width: max-content; animation: gmScorri 46s linear infinite; }
.gm-marquee:hover .gm-marquee-track { animation-play-state: paused; }
.gm-marquee-group { display: flex; align-items: center; gap: clamp(2rem, 4vw, 3.6rem); padding-right: clamp(2rem, 4vw, 3.6rem); }
.gm-marquee-group .gm-logo-nome { font-size: clamp(1.05rem, 1.9vw, 1.6rem); font-weight: var(--w-display); letter-spacing: -0.035em; color: var(--text-faint); white-space: nowrap; }

/* ---- la striscia dei clienti, coi loro loghi ----
   IL GRIGIO NON E' UN'OPACITA'. Abbassare l'opacita' lascia trasparire i
   colori originali e la fila diventa un arcobaleno slavato, dove il logo
   piu' acceso si mangia gli altri. Qui il logo viene prima APPIATTITO a
   nero (brightness 0, che cancella ogni colore, gradiente e tratto) e poi
   risollevato a un grigio uniforme (invert): il risultato e' identico per
   qualunque file, di qualunque colore, senza bisogno di preparare una
   versione chiara di ogni logo. Al passaggio si arriva al bianco pieno.
   Su touch il passaggio del mouse non esiste: li' i loghi stanno un po'
   piu' chiari di serie, se no resterebbero grigi per sempre. */
.gm-loghi .gm-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; text-decoration: none; }
.gm-loghi .gm-logo img {
  display: block; width: auto; max-width: clamp(96px, 13vw, 168px);
  /* La scala per singolo logo: serve perche' a parita' di altezza un marchio
     lungo e sottile sembra piu' piccolo di uno tozzo, ed e' l'occhio a
     decidere quando una fila di loghi e' pareggiata, non il righello. */
  height: calc(clamp(20px, 2.3vw, 30px) * var(--gm-logo-s, 1)); object-fit: contain;
  filter: brightness(0) invert(0.58);
  transition: filter 0.22s var(--ease), transform 0.22s var(--ease);
}
a.gm-logo:hover img, a.gm-logo:focus-visible img { filter: brightness(0) invert(1); transform: scale(1.04); }
a.gm-logo:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 6px; border-radius: 6px; }
a.gm-logo:hover .gm-logo-nome, a.gm-logo:focus-visible .gm-logo-nome { color: var(--text); }
.gm-loghi .gm-logo-nome { transition: color 0.22s var(--ease); }
@media (hover: none) {
  .gm-loghi .gm-logo img { filter: brightness(0) invert(0.78); }
}
/* Loghi fermi: niente scorrimento, una riga sola che va a capo se serve.
   Il secondo gruppo - la copia che serviva a chiudere il giro - qui non
   ha piu' senso e sparisce, se no ogni cliente comparirebbe due volte. */
.gm-loghi.fermi { -webkit-mask-image: none; mask-image: none; }
.gm-loghi.fermi .gm-marquee-track { width: auto; animation: none; justify-content: center; }
.gm-loghi.fermi .gm-marquee-group { flex-wrap: wrap; justify-content: center; row-gap: clamp(1.4rem, 2.6vw, 2.2rem); padding-right: 0; }
.gm-loghi.fermi .gm-marquee-group[aria-hidden="true"] { display: none; }
@keyframes gmScorri { 0% { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gm-marquee-track { animation: none; } }

/* Le card laterali del coverflow (position:absolute + translateX ampi) escono
   dal viewport. Le contengo alla sezione: senza questo su Android l'overflow-x
   del body non basta, la pagina diventa pannabile in orizzontale e il dock
   position:fixed finisce spinto a destra. clip = nessuno scroll container,
   quindi fixed/sticky restano ancorati al viewport. */
#lavori, #campagne { overflow-x: clip; }
/* live: coverflow 3D attivo (JS) */
@media (max-width: 640px) {
}
/* editor: statico e impilato, ogni card editabile (niente coverflow) */

/* ---------- platform showcase ---------- */
.gm-plat-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--accent); font-weight: 600; font-size: 0.98rem; }
.gm-plat-link svg { transition: transform 0.25s var(--ease); }
.gm-plat-link:hover svg { transform: translateX(3px); }
.gm-pillars { display: grid; gap: clamp(50px, 8vh, 96px); margin-top: 58px; }
.gm-pillar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.gm-pillars > .gm-pillar:nth-child(even) .gm-pillar-visual { order: -1; }
.gm-pk { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.gm-pillar-txt h3 { font-size: var(--t-subtitle); font-weight: var(--w-display); letter-spacing: var(--t-subtitle-ls); line-height: var(--t-subtitle-lh); margin: 0; }
.gm-pillar-txt p { margin: 16px 0 0; color: var(--text-muted); line-height: 1.6; font-size: 1.05rem; max-width: 470px; }
@media (max-width: 820px) { .gm-pillar { grid-template-columns: 1fr; gap: 24px; } .gm-pillars > .gm-pillar:nth-child(even) .gm-pillar-visual { order: 0; } }

.gm-mock { border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow-pop); }
.gm-mock-bar { display: flex; gap: 6px; padding: 11px 13px; border-bottom: 1px solid var(--border); background: var(--surface); }
.gm-mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.gm-mock-body { padding: 18px; }
.gm-edit { display: grid; gap: 9px; }
.gm-eb { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); font-size: 0.92rem; color: var(--text-muted); }
.gm-eb .grip { width: 10px; height: 16px; flex: none; background-image: radial-gradient(currentColor 1.1px, transparent 1.1px); background-size: 5px 5px; opacity: 0.45; }
.gm-eb.sel { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); }
.gm-eb.sel .cur { display: inline-block; width: 2px; height: 15px; background: var(--accent); margin-left: 3px; animation: gm-blink 1.1s steps(1) infinite; }
@keyframes gm-blink { 50% { opacity: 0; } }
.gm-eb.add { justify-content: center; border-style: dashed; color: var(--accent); }
.gm-chat { display: grid; gap: 12px; }
.gm-msg { max-width: 84%; padding: 12px 15px; border-radius: 15px; font-size: 0.92rem; line-height: 1.45; }
.gm-msg.u { justify-self: end; background: var(--surface-2); color: var(--text); border-bottom-right-radius: 4px; }
.gm-msg.a { justify-self: start; background: var(--accent-soft); color: var(--text); border-bottom-left-radius: 4px; display: flex; gap: 9px; }
.gm-msg.a .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 6px; }
.gm-chat-in { margin-top: 4px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-faint); font-size: 0.9rem; }
.gm-chat-in .spark { color: var(--accent); font-size: 1rem; }
.gm-chat-in .send { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-solid); flex: none; }
.gm-a-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.gm-a-top .t { font-weight: var(--w-strong); letter-spacing: -0.02em; font-size: 0.95rem; }
.gm-a-top .t small { color: var(--text-faint); font-weight: 500; }
.gm-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.gm-live b { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.gm-a-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.gm-stat { border: 1px solid var(--border); border-radius: 11px; padding: 14px; background: var(--bg-elevated); }
.gm-stat .n { font-size: 1.35rem; font-weight: var(--w-display); letter-spacing: -0.035em; }
.gm-stat .l { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.gm-chart { border: 1px solid var(--border); border-radius: 11px; padding: 16px; background: var(--bg-elevated); }
.gm-chart .cl { font-size: 11px; color: var(--text-faint); margin-bottom: 12px; }
.gm-bars { display: flex; align-items: flex-end; gap: 7px; height: 82px; }
.gm-bars i { flex: 1; background: var(--accent-soft); border-radius: 4px 4px 0 0; display: block; }
.gm-bars i.hi { background: var(--accent-solid); }
.gm-feat-wrap { margin-top: clamp(56px, 8vh, 90px); padding-top: 32px; text-align: center; }
.gm-feat-lead { color: var(--text-faint); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 20px; }
.gm-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 36px; }
.gm-feat li { display: flex; gap: 12px; align-items: center; font-size: 0.98rem; color: var(--text); }
.gm-feat li b { font-weight: 600; }
.gm-chk { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.gm-chk svg { width: 13px; height: 13px; }
.gm-note { margin-top: 26px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.86rem; color: var(--text-muted); }
.gm-note b { color: var(--text); font-weight: 600; }

/* ---------- team ---------- */
.gm-team-txt { max-width: 680px; }
.gm-team-txt p { color: var(--text-muted); line-height: 1.6; font-size: 1.08rem; margin: 16px 0 0; }
.gm-team-txt p b, .gm-team-txt strong { color: var(--text); font-weight: 600; }
.gm-founders { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gm-founder { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-elevated); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); }
.gm-founder:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.gm-founder .ph-img { aspect-ratio: 4 / 5; background: var(--surface-2); overflow: hidden; }
.gm-founder .ph-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.gm-founder .fmeta { padding: 18px 20px 22px; }
.gm-founder .fn { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.gm-founder .fr { font-size: 0.88rem; color: var(--text-faint); margin-top: 3px; }
@media (max-width: 720px) { .gm-founders { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.gm-contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 54px; align-items: start; }
.gm-contact-side p { color: var(--text-muted); line-height: 1.55; margin-top: 18px; font-size: 1.05rem; }
.gm-contact-info { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.gm-contact-info li { display: flex; gap: 16px; align-items: baseline; font-size: 1.02rem; color: var(--text); }
.gm-contact-info .k { width: 58px; flex: none; color: var(--text-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.gm-contact-info a { color: var(--accent); }
.contact-form { display: grid; gap: 14px; }
.gm-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gm-field { display: grid; gap: 7px; }
.gm-field label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.gm-field input, .gm-field textarea { font-family: var(--font-sans); font-size: 15px; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; outline: none; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.gm-field input:focus, .gm-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gm-field textarea { resize: vertical; min-height: 110px; }
.gm-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; color: var(--text-muted); line-height: 1.45; cursor: pointer; }
.gm-consent input { margin-top: 2px; accent-color: var(--accent-solid); width: 16px; height: 16px; flex: none; }
.gm-consent a { color: var(--accent); }
.gm-checks { display: grid; gap: 9px; margin-top: 2px; }
.contact-form .btn-primary { justify-content: center; margin-top: 4px; }
.form-feedback { font-size: 0.9rem; margin-top: 2px; color: var(--accent); }
.form-feedback:empty { display: none; }
.gm-consent-note { font-size: 0.82rem; color: var(--text-faint); margin: 2px 0 0; }
.gm-consent-note a { color: var(--accent); }
@media (max-width: 780px) { .gm-contact { grid-template-columns: 1fr; gap: 34px; } .gm-frow { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.gm-footer { position: relative; z-index: 2; background: var(--bg); padding: 56px 0 130px; }
.gm-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.gm-foot-brand { max-width: 300px; }
/* Contrasto: #6a7064 su #0a0b0a sta sotto il 4.5:1 richiesto. Nel footer
   i "faint" salgono a muted: era l'intera colonna dei rimproveri di
   Lighthouse sull'accessibilita'. */
.gm-foot-brand p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; margin-top: 14px; }
.gm-foot-cols { display: flex; gap: clamp(30px, 6vw, 72px); flex-wrap: wrap; }
.gm-foot-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 14px; font-weight: 600; }
.gm-foot-col a { display: block; color: var(--text-muted); font-size: 0.95rem; margin-bottom: 10px; transition: color 0.2s var(--ease); }
.gm-foot-col a:hover { color: var(--text); }
.gm-foot-legal { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Un link dentro un blocco di testo non puo' distinguersi solo per
   colore: la sottolineatura e' il segnale che vale anche per chi i
   colori non li separa. */
.gm-foot-legal a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* Firma di chiusura: il nome a tutta larghezza come chiusura grafica, non
   come titolo. Sta basso di contrasto apposta, e' una filigrana. Il valore
   di vw e' tarato sui 10 caratteri di "guacamedia": riempie la riga senza
   andare a capo, e overflow clip lo tiene dentro alla pagina. */
@media (max-width: 640px) {  }
.gm-foot-legal a:hover { color: var(--text); }

/* ---------- pagine legali (privacy, cookie) ---------- */
.gm-legal-wrap { max-width: 760px; }
.gm-legal-title { font-size: var(--t-title); font-weight: var(--w-display); letter-spacing: var(--t-title-ls); line-height: var(--t-title-lh); }
.gm-legal-updated { color: var(--text-faint); font-size: 0.9rem; margin-top: 16px; }
.gm-legal-lead { color: var(--text-muted); font-size: 1.1rem; margin-top: 22px; line-height: 1.5; }
.gm-legal-section { margin-top: 40px; }
.gm-legal-section h2 { font-size: var(--t-h3); font-weight: var(--w-strong); letter-spacing: var(--t-h3-ls); line-height: var(--t-h3-lh); margin: 0 0 6px; }
.gm-legal-body { color: var(--text-muted); line-height: 1.6; }
.gm-legal-body p { margin-top: 12px; }
.gm-legal-body strong { color: var(--text); font-weight: 600; }
.gm-legal-body a { color: var(--accent); }

/* ---------- trademark dock (nav chrome, in-page nav) ---------- */
.gm-fade { position: fixed; inset: auto 0 0 0; height: 104px; pointer-events: none; z-index: 49; background: linear-gradient(to top, color-mix(in srgb, var(--bg) 94%, transparent) 10%, color-mix(in srgb, var(--bg) 64%, transparent) 46%, transparent 100%); }
/* La dock reagisce allo scroll come la barra di Savee, ma invece di sparire
   si STRINGE: mentre scendi le etichette si richiudono e restano le icone,
   appena risali tornano le parole. Cosi' la navigazione non se ne va mai. */
/* La dock vive dentro una fascia di altezza FISSA e ci sta appoggiata in
   BASSO (align-items: flex-end): quando si stringe il suo bordo inferiore
   resta dov'e' e a rimpicciolire e' il corpo verso l'alto. Non scivola verso
   il bordo dello schermo (era il difetto di prima, che calava il padding di
   sotto) e non si restringe attorno al centro (che la faceva "galleggiare"):
   sta ancorata giu' e basta. */
.gm-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; height: calc(6.5rem + env(safe-area-inset-bottom)); padding: 0 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); pointer-events: none; transition: padding 0.42s var(--ease); }
.gm-dock-inner { pointer-events: auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.45rem; transition: padding 0.34s var(--ease); border-radius: 999px; border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--shadow-pop); }
/* Lo spazio icona/parola sta nel margine dell'etichetta, non in gap: cosi'
   puo' chiudersi a zero insieme al testo, senza lasciare un vuoto sospeso. */
.gm-tab { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 999px; padding: 0.72rem 1.15rem; color: var(--text-muted); font-size: var(--t-small); line-height: 1; letter-spacing: -0.015em; white-space: nowrap; transition: background-color 140ms ease, color 140ms ease, transform 120ms ease, padding 0.34s var(--ease), font-size 0.34s var(--ease); }
/* max-width invece di display:none, perche' none non si puo' animare. 12ch
   sta largo per la voce piu' lunga: e' un tetto, non una misura. */
.gm-tab .lbl { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 12ch; margin-left: 0.55rem; opacity: 1; transition: max-width 0.34s var(--ease), margin-left 0.34s var(--ease), opacity 0.2s var(--ease); }
/* Scendendo la dock fa due cose insieme: chiude le parole E rimpicciolisce.
   Cala tutto in proporzione (guscio, pastiglie, testo, icone), cosi' non
   sembra la stessa barra schiacciata ma la stessa barra piu' piccola. */
.gm-dock.is-compact .gm-dock-inner { padding: 0.3rem; }
.gm-dock.is-compact .gm-tab { padding: 0.5rem 0.58rem; font-size: var(--t-label); }
.gm-dock.is-compact .gm-tab .lbl { max-width: 0; margin-left: 0; opacity: 0; }
.gm-dock.is-compact .gm-tab svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .gm-dock-inner, .gm-tab, .gm-tab .lbl, .gm-tab svg { transition: none; } }
.gm-tab:active { transform: scale(0.94); }
.gm-tab:hover { background: var(--surface-muted); color: var(--text); }
.gm-tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.gm-tab svg { width: 21px; height: 21px; flex: none; transition: width 0.34s var(--ease), height 0.34s var(--ease); }
/* Sul telefono la barra larga sta da bordo a bordo come quella di
   Instagram: le voci si distribuiscono invece di stringersi in una
   pastiglia in mezzo allo schermo. Quando si compatta non cambia larghezza
   l'elemento (non si anima), si stringono i margini della fascia: la barra
   si contrae verso il centro con un movimento continuo. */
@media (max-width: 640px) {
  .gm-dock { height: calc(5.6rem + env(safe-area-inset-bottom)); padding-inline: 0.75rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .gm-dock-inner { width: 100%; justify-content: space-between; padding: 0.42rem 0.5rem; border-radius: 28px; }
  .gm-tab { flex: 1 1 0; padding: 0.68rem 0; }
  /* Su telefono l'etichetta sparisce ALLA VISTA ma non ai lettori di
     schermo: con display:none il collegamento restava senza nome
     (Lighthouse: "links do not have a discernible name"). Il ritaglio a
     un pixel la toglie dallo schermo e la lascia nel nome accessibile,
     nella lingua giusta della pagina, senza etichette doppie. */
  .gm-tab .lbl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; margin: 0; max-width: none;
  }
  .gm-dock.is-compact { padding-inline: 20%; }
  .gm-dock.is-compact .gm-dock-inner { padding: 0.28rem 0.3rem; border-radius: 999px; }
  .gm-dock.is-compact .gm-tab { padding: 0.5rem 0; }
}

/* ---------- reveal (progressive: hidden only when JS arms .gm-anim) ---------- */
.gm-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* ---------- movimento ----------
   Le curve sono quelle vere di Savee, lette dal loro CSS: opacita' e
   spostamento viaggiano su curve DIVERSE (la trasparenza in ease normale,
   il movimento in expo) ed e' questo che toglie il sapore di transizione
   automatica. Il JS non anima niente: mette una classe e un indice. */

/* Titoli parola per parola. Lo split rispetta gli <em>: la parola serif
   verde resta il suo elemento, si spezzano solo i nodi di testo. */
.gm-anim .gm-split .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.56s ease, transform 0.68s cubic-bezier(0.22, 0.86, 0, 1);
  transition-delay: calc(var(--wi, 0) * 32ms);
  will-change: transform, opacity;
}
.gm-anim .gm-split.in .w { opacity: 1; transform: none; }

/* Blocchi a cascata: stesso principio del testo, applicato alle schede. */
.gm-anim .reveal { transition-delay: calc(var(--i, 0) * 75ms); }

/* CTA lettera per lettera: due righe che si scambiano ruotando sull'asse X.
   Lo stagger e' 18ms in entrata e 14ms in uscita, come loro. */
.gm-cta-letters { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.gm-cta-line { display: inline-flex; white-space: pre; }
.gm-cta-line--b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.gm-cta-l { display: inline-block; min-width: 0.16em; transform-origin: 50% 55%; will-change: transform, opacity; }
.gm-cta-l::before { content: attr(data-ch); }
.gm-cta-sp { width: 0.28em; }
@keyframes gmCtaIn { 0% { opacity: 0; transform: translateY(115%) rotateX(-72deg); } to { opacity: 1; transform: translateY(0) rotateX(0deg); } }
@keyframes gmCtaOut { 0% { opacity: 1; transform: translateY(0) rotateX(0deg); } to { opacity: 0; transform: translateY(-115%) rotateX(72deg); } }
.gm-cta-enter { opacity: 1; }
.gm-cta-leave { opacity: 1; }
.gm-cta-enter .gm-cta-l { animation: gmCtaIn 0.52s cubic-bezier(0.22, 0.86, 0, 1) both; animation-delay: calc(var(--li) * 18ms); }
.gm-cta-leave .gm-cta-l { animation: gmCtaOut 0.42s cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: calc(var(--li) * 14ms); }

@media (prefers-reduced-motion: reduce) {
  .gm-anim .gm-split .w { opacity: 1; transform: none; transition: none; }
  .gm-anim .reveal { transition-delay: 0s; }
  .gm-cta-enter .gm-cta-l, .gm-cta-leave .gm-cta-l { animation: none; }
}
/* In editor i titoli restano interi e fermi: si deve poter cliccare e scrivere. */
html.gm-editor .gm-split .w { opacity: 1 !important; transform: none !important; transition: none !important; }
.gm-anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gm-anim .reveal { opacity: 1; transform: none; transition: none; } }
/* Nell'editor della console il contenuto e' sempre visibile (niente reveal),
   cosi' i re-render dell'anteprima non lasciano blocchi a opacity 0. */
html.gm-editor .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ============================================================
   TELEFONI E MACCHINE MODESTE: meno strati, non meno sito.
   Non e' una versione ridotta: e' la stessa pagina senza gli effetti che
   costano a ogni fotogramma di scorrimento e che a quella dimensione non
   si vedono. Il vetro smerigliato (backdrop-filter) e' il piu' caro di
   tutti: barra e dock sono FISSE, quindi hanno sempre qualcosa che scorre
   sotto, e il browser rifa' la sfocatura di quel qualcosa sessanta volte al
   secondo. Sopra un fondo scuro, un fondo pieno al 95% e' indistinguibile
   da un vetro - lo scorrimento a scatti no.
   ============================================================ */
@media (max-width: 860px) {
  .gm-top::before {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--bg) 95%, transparent);
  }
  .gm-dock-inner {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
  }
  .gm-lang > summary {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
  }
  .gm-lang-menu { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }

  /* L'alone dietro il filmato era un SECONDO video sfocato: due decodifiche
     1440p in parallelo su un telefono. Qui e' una sfumatura ferma - il video
     di troppo lo toglie js/site.js, questa prende il suo posto. */
  .gm-vet-alone { display: none; }
  .gm-vet-stage::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 50%;
    width: 116%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side at 50% 50%,
                  color-mix(in srgb, var(--accent-solid) 30%, transparent) 0%,
                  transparent 74%);
    pointer-events: none;
  }

  /* Su telefono non c'e' passaggio del mouse: queste lettere non si animano
     mai, ma will-change le teneva promosse a strato ognuna per conto suo -
     memoria video occupata per un effetto che non puo' partire. */
  .gm-cta-l, .gm-cta { will-change: auto; }
}

/* Quando il sistema si prende il video (browser dentro le app che non
   permettono la riproduzione nella pagina) resta la fotografia: niente
   bottone, niente alone che pulsa a vuoto. Vedi js/site.js. */
.gm-vet-immagine .gm-vet-play { display: none !important; }
.gm-vet-immagine .gm-vet-cornice img.gm-vet-v { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ============================================================
   AVVISO DI LINGUA
   Una finestrella appesa al selettore della lingua, col beccuccio che lo
   indica: non un cartello generico in fondo alla pagina, ma un'etichetta
   attaccata al comando che risolve la cosa. In basso non poteva stare -
   c'e' la dock, e sotto ancora passa la barra dei cookie.
   Segue il verso della pagina da sola: sulle pagine in arabo l'intestazione
   e' ribaltata e la finestrella si sposta con lei, perche' e' ancorata con
   le proprieta' logiche e non con "destra".
   Il testo lo scrive js/site.js nella lingua che sta proponendo.
   ============================================================ */
.gm-lingua {
  position: absolute; z-index: 61;
  top: calc(100% - 10px); inset-inline-end: var(--page-margin);
  width: 19rem; max-width: calc(100vw - var(--page-margin) * 2);
  padding: 0.95rem 1.05rem 0.9rem;
  border-radius: 14px; border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  text-align: start;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.gm-lingua.is-on { opacity: 1; transform: none; }
.gm-lingua[hidden] { display: none; }
/* il beccuccio: un quadratino ruotato, sotto il globo del selettore */
.gm-lingua::before {
  content: ""; position: absolute; top: -5px; inset-inline-end: 26px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--surface);
  border-inline-start: 1px solid var(--border-strong);
  border-block-start: 1px solid var(--border-strong);
  border-start-start-radius: 3px;
}
.gm-lingua-txt { margin: 0 0 0.75rem; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.gm-lingua-btns { display: flex; align-items: center; gap: 0.9rem; }
.gm-lingua-si {
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--accent-ink); background: var(--accent-solid);
  padding: 0.5rem 0.8rem; border-radius: 999px; text-decoration: none;
  transition: opacity 0.18s var(--ease);
}
/* Il colore va ripetuto con la stessa forza della regola generale sui link,
   se no quella vince e il testo resta chiaro: su questo verde ci vuole
   l'inchiostro scuro, come su tutti gli altri bottoni pieni del sito. */
.site .gm-lingua a.gm-lingua-si, a.gm-lingua-si { color: var(--accent-ink); }
.gm-lingua-si:hover { opacity: 0.88; }
.gm-lingua-no {
  border: 0; background: none; cursor: pointer; white-space: nowrap; padding: 0;
  font-size: 12.5px; color: var(--text-faint);
  font-family: inherit;
  transition: color 0.18s var(--ease);
}
.gm-lingua-no:hover { color: var(--text); }
/* mentre la finestrella e' aperta il selettore resta acceso: si capisce a
   colpo d'occhio che le due cose parlano della stessa faccenda */
.gm-lingua.is-on ~ .gm-lang > summary,
.gm-top:has(.gm-lingua.is-on) .gm-lang > summary { border-color: var(--accent-solid); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .gm-lingua { transition: none; transform: none; }
}

/* ---- contatti: la promessa e WhatsApp ---- */
/* La promessa e' la riga che trasforma il modulo da muro a patto: dice
   cosa ricevi e quando. Sta evidenziata ma senza urlare. */
.gm-contact-promessa {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent-solid) 35%, transparent);
  background: color-mix(in srgb, var(--accent-solid) 9%, transparent);
  color: var(--text); font-size: 14.5px; line-height: 1.5;
}
.gm-contact-wa {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 16px 0 4px; padding: 0.65rem 1rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.gm-contact-wa:hover { border-color: #25d366; color: #fff; }
.gm-contact-wa svg { color: #25d366; flex: none; }

/* ---- articolo: lo screenshot della sezione ----
   Nei casi studio la prova e' il sito vero: lo screen sta sotto il testo,
   incorniciato come una finestra di browser in miniatura, e se ha un link
   porta al sito. Il bordo e l'ombra lo staccano dal fondo scuro. */
.gm-art-screen { margin: 22px 0 6px; }
.gm-art-screen video,
.gm-art-screen img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--border-strong);
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.7);
}
.gm-art-screen a { display: block; transition: transform 0.22s var(--ease); }
.gm-art-screen a:hover { transform: translateY(-3px); }
.gm-art-screen figcaption { margin-top: 10px; font-size: 12.5px; color: var(--text-faint); }

/* ---- la scheda del lavoro: il link al caso studio ----
   Due collegamenti, due gerarchie: "Visita il sito" resta il principale
   in verde, "Scopri il progetto" sta sotto, piu' sobrio, e porta al
   racconto interno. E' un link interno: niente target blank, la
   navigazione resta nel sito. */
.gm-cf-caso {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px; width: max-content; max-width: 100%; white-space: nowrap;
  color: var(--text-muted); font-weight: var(--w-strong);
  font-size: calc(var(--t-label) - 1px); letter-spacing: 0.01em;
  transition: color 0.2s var(--ease);
}
.gm-cf-caso:hover { color: var(--text); }
.gm-cf-caso svg { transition: transform 0.25s var(--ease); }
.gm-cf-caso:hover svg { transform: translateX(3px); }

/* ---- la griglia dei casi studio ----
   Una scheda per cliente: il logo trattato come nella striscia della home
   (appiattito a grigio, bianco al passaggio: nessuna versione chiara da
   preparare), una riga di racconto e l'invito. Tutta la scheda e' il
   collegamento: il bersaglio grande e' meta' dell'usabilita'. */
.gm-casi-band { position: relative; }
.gm-casi-band .gm-wrap { position: relative; z-index: 1; }
.gm-casi-band .gm-head { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
.gm-casi-band .gm-head .gm-kicker { justify-content: center; }
.gm-casi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: clamp(30px, 5vh, 52px); }
.gm-caso {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 16px; border: 1px solid var(--border-strong);
  background: var(--surface); text-decoration: none;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.gm-caso:hover { border-color: var(--accent-solid); transform: translateY(-3px); }
.gm-caso-logo { display: flex; align-items: center; min-height: 44px; }
.gm-caso-logo img {
  display: block; max-width: min(200px, 70%); height: 26px; width: auto; object-fit: contain; object-position: left center;
  filter: brightness(0) invert(0.58);
  transition: filter 0.22s var(--ease);
}
.gm-caso:hover .gm-caso-logo img { filter: brightness(0) invert(1); }
.gm-caso-nome { font-size: 1.25rem; font-weight: var(--w-display); letter-spacing: -0.03em; color: var(--text); }
.gm-caso-riga { color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }
.gm-caso-vai {
  margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-faint); font-weight: var(--w-strong); font-size: calc(var(--t-label) - 1px);
  transition: color 0.2s var(--ease);
}
.gm-caso:hover .gm-caso-vai { color: var(--accent); }
.gm-caso-vai svg { transition: transform 0.25s var(--ease); }
.gm-caso:hover .gm-caso-vai svg { transform: translateX(3px); }

/* ---- i link dentro la prosa si devono VEDERE ----
   La regola generale del tema (.site a: colore ereditato, niente
   sottolineatura) va bene per schede e bottoni, dove il collegamento
   e' l'intero oggetto. Dentro un paragrafo no: un link identico al
   testo non lo clicca nessuno, perche' nessuno sa che c'e'. Qui,
   in tutti i contesti di prosa, il link e' verde e sottolineato. */
.gm-art-intro a, .gm-art-sez p a,
.gm-faq-risposta a, .gm-intro a,
.gm-contact-side p a, .gm-speed-sub a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transition: text-decoration-color 0.18s var(--ease);
}
.gm-art-intro a:hover, .gm-art-sez p a:hover,
.gm-faq-risposta a:hover, .gm-intro a:hover,
.gm-contact-side p a:hover, .gm-speed-sub a:hover {
  text-decoration-color: var(--accent);
}

/* ---- articolo: il bottone in cima ---- */
.gm-art-subito { margin-top: clamp(18px, 2.6vh, 26px); }

.gm-langnav{position:fixed;bottom:16px;right:16px;z-index:2147482000;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(20,20,20,.82);box-shadow:0 4px 16px rgba(0,0,0,.22);font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:600}.gm-langnav a,.gm-langnav span{display:inline-block;padding:4px 10px;border-radius:999px;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;color:#fff;opacity:.65}.gm-langnav a:hover{opacity:1}.gm-langnav [aria-current]{background:#fff;color:#111;opacity:1}