/* ============================================================
   bluestudio — staging3 v2
   Palette: navy #00075D · off-white #F7F8F8 · ink #222321 · white #FFF
   Font: Clash Display variable (titoli) · Inter variable (testi)
   Wordmark: SVG ufficiale (assets/logo.svg)
   Linguaggio: tipografia oversized = visual, griglie rotte,
   allineamenti misti, deck cinematografico. (vedi docs/research-notes.md)
   ============================================================ */

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-var.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy: #00075D;
  --paper: #F7F8F8;
  --ink: #222321;
  --white: #FFFFFF;

  /* accento: due palette ufficiali, si commuta con ?palette=rosso */
  --accent: #EB5E28;   /* arancio */

  /* --- token semantici: il tema li rimappa (chiaro = default) --- */
  --bg: #F7F8F8;        /* fondo pagina */
  --bg-deck: #222321;   /* sezione progetti */
  --bg-block: #00075D;  /* blocchi pieni: chi siamo, footer */
  --fg: #222321;        /* testo su --bg */
  --fg-strong: #00075D; /* titoli ed elementi forti su --bg */
  --on-block: #F7F8F8;  /* testo sui blocchi pieni */
  --body-3d: #00075D;   /* modello 3D anatomia */
  --gl-bg: #F7F8F8;     /* shader hero: fondo */
  --gl-fluid: #00075D;  /* shader hero: fluido */

  --font-display: 'Clash Display', sans-serif;  /* titoli e testi grandi */
  --font-sans: 'Inter', sans-serif;             /* testi correnti */

  --pad: clamp(1.25rem, 4vw, 4rem);
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}
:root[data-palette="rosso"] { --accent: #FB3640; }

/* Transizione fra pagine: la pagina nuova entra da un buco che si allarga
   dal punto in cui hai cliccato (vedi initPageTransition in main.js).
   Vale per ogni link interno; i browser che non la supportano navigano
   e basta. Ogni pagina del sito deve caricare questo CSS perché funzioni. */
@view-transition { navigation: auto; }

/* transizione tema: il nuovo tema entra con un cerchio che cresce
   dall'angolo alto-sinistra (vedi initTheme in main.js).
   Le stesse regole servono al varco fra pagine: il vecchio resta fermo
   sotto, il nuovo si scopre sopra. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* --- tema scuro: tutto vira al blu profondo --- */
:root[data-theme="scuro"] {
  --bg: #010726;
  --bg-deck: #00030F;
  --bg-block: #00075D;
  --fg: #E6E9F5;
  --fg-strong: #F7F8F8;
  --on-block: #F7F8F8;
  --body-3d: #F7F8F8;   /* scultura chiara sul navy profondo */
  --gl-bg: #010726;
  --gl-fluid: #4A55D2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-width: thin; scrollbar-color: var(--fg-strong) var(--bg); }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--navy); color: var(--white); }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.preloader__logo {
  position: relative; display: block;
  width: clamp(190px, 26vw, 330px);
}
.preloader__logo .wordmark { display: block; width: 100%; height: auto; }
/* il wordmark È la barra di caricamento: base spenta, copia
   bianca sopra che si svela da sinistra col progresso */
.preloader__logo-base { display: block; color: rgba(247, 248, 248, 0.22); }
.preloader__logo-fill {
  position: absolute; inset: 0; display: block;
  color: var(--white);
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.preloader__word {
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Cursore ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 999;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fg-strong);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease), height 0.35s var(--ease), background-color 0.35s var(--ease);
}
.cursor--big { width: 92px; height: 92px; }
/* l'etichetta deve contrastare col cerchio: il cerchio è --fg-strong,
   quindi il testo dentro prende il colore del fondo pagina */
.cursor__label {
  color: var(--bg); font-size: 0.85rem; font-weight: 600;
  opacity: 0; transition: opacity 0.25s;
  white-space: nowrap;
}
.cursor--big .cursor__label { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* ---------- Grana ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 900; pointer-events: none;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  30% { transform: translate(3%, -15%); }
  50% { transform: translate(12%, 9%); }
  70% { transform: translate(9%, 4%); }
  90% { transform: translate(-1%, 7%); }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--pad);
  color: var(--fg-strong);
  transition: transform 0.6s var(--ease), color 0.45s var(--ease);
}
/* sopra le sezioni scure (deck, chi siamo, footer) la nav si schiarisce */
.nav--inverted { color: var(--on-block); }
/* col menu mobile aperto la nav sta sul velo navy: sempre chiara */
.nav--velo { color: var(--on-block); }

/* ---------- menu mobile ---------- */
.nav__burger {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  background: none; border: 0; padding: 0;
  color: inherit; cursor: pointer;
}
.nav__burger i {
  position: absolute; left: 8px; right: 8px;
  height: 2px; background: currentColor;
  transition: transform 0.4s var(--ease);
}
.nav__burger i:first-child { top: 15px; }
.nav__burger i:last-child { bottom: 15px; }
.nav__burger.is-aperto i:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger.is-aperto i:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.nav__velo {
  position: fixed; inset: 0; z-index: -1;   /* dietro la riga della nav, sopra la pagina */
  display: none;
  flex-direction: column; justify-content: center;
  gap: clamp(2rem, 6vh, 3rem);
  padding: calc(1.4rem + 60px) var(--pad) 2rem;
  background: var(--bg-block); color: var(--on-block);
}
.velo__nav { display: flex; flex-direction: column; gap: 0.4rem; }
.velo__link {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-transform: uppercase;
}
.velo__link > span { display: block; }
.velo__link--cta { font-weight: 700; color: var(--accent); }
.velo__servizi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--on-block) 22%, transparent);
  max-width: 26rem;
}
.velo__servizi a { font-size: 0.98rem; font-weight: 500; opacity: 0.85; }
.velo__mail { font-size: 0.9rem; opacity: 0.6; }
.nav--hidden { transform: translateY(-110%); }
.nav__logo { display: block; }
.nav__logo .wordmark { display: block; height: 22px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.8rem); }
.nav__link { font-size: 0.95rem; font-weight: 400; position: relative; }
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- dropdown dei servizi ----------
   Scorciatoia per andare dritti alla pagina del servizio invece di
   passare dalla home. Il pannello tiene fondo e colore suoi: la nav
   si inverte sulle sezioni scure, lui no. */
.nav__voce { position: relative; }
.ndrop {
  position: absolute; top: 100%; left: 50%;
  min-width: 15rem;
  margin-top: 0.9rem;
  padding: 0.45rem;
  background: var(--bg);
  color: var(--fg-strong);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  border-radius: 6px;               /* spigoli quasi vivi, non pillole */
  box-shadow: 0 26px 60px -30px rgba(1, 7, 38, 0.45);
  opacity: 0;
  visibility: hidden;
  translate: -50% -10px;
  transition: opacity 0.35s var(--ease), translate 0.45s var(--ease), visibility 0.35s;
}
/* la fascia invisibile sopra il pannello: il mouse ci passa senza che
   si chiuda mentre scende dal link */
.ndrop::before {
  content: ''; position: absolute; left: 0; right: 0; top: -0.9rem; height: 0.9rem;
}
.nav__voce.is-aperto .ndrop { opacity: 1; visibility: visible; translate: -50% 0; }
.ndrop__voce {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.4rem;
  padding: 0.62rem 0.75rem;
  border-radius: 4px;
  transition: background 0.35s var(--ease);
}
.ndrop__voce:hover,
.ndrop__voce:focus-visible { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.ndrop__voce[aria-current="page"] .ndrop__nome { color: var(--accent); }
.ndrop__nome {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  font-variation-settings: 'wght' 420;
  transition: font-variation-settings 0.4s var(--ease);
}
.ndrop__voce:hover .ndrop__nome { font-variation-settings: 'wght' 640; }
.ndrop__parte {
  font-size: 0.76rem;
  opacity: 0.45;
  white-space: nowrap;
}
.nav__cta {
  font-size: 0.95rem; font-weight: 500;
  padding: 0.65rem 1.4rem; border: 1px solid currentColor; border-radius: 99px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.nav__cta:hover { background: var(--fg-strong); color: var(--bg); }
.nav--inverted .nav__cta:hover { background: var(--on-block); color: var(--bg-block); }
.nav__accent {
  width: 16px; height: 16px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent);
  transition: transform 0.35s var(--ease);
}
.nav__accent:hover { transform: scale(1.25); }
.nav__theme {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: inherit;
}
.nav__theme svg {
  width: 20px; height: 20px;
  transition: transform 0.5s var(--ease);
}
.nav__theme:hover svg { transform: rotate(180deg); }
:root[data-theme="scuro"] .nav__theme svg { transform: rotate(180deg); }
:root[data-theme="scuro"] .nav__theme:hover svg { transform: rotate(0deg); }

/* ============================================================
   HERO — composizione tipografica full-viewport
   ============================================================ */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(5rem, 12vh, 8rem) var(--pad) 0;
  overflow: hidden;
  position: relative;
}
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__comp {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  text-transform: uppercase;
  line-height: 0.92;
}
.hero__line {
  font-family: var(--font-display);
  display: flex; align-items: center;
  font-size: clamp(3.2rem, 13vw, 12.5rem);
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.hero__line--a { justify-content: flex-start; gap: clamp(1rem, 2.5vw, 2.5rem); }
.hero__line--b { justify-content: flex-end; gap: clamp(1rem, 2.5vw, 2.5rem); }
.hero__line--c { justify-content: flex-start; margin-left: clamp(2rem, 14vw, 16rem); gap: clamp(1rem, 3vw, 3rem); }

.hero__word { display: inline-block; }
.hero__word--light { font-weight: 300; }
.hero__word--bold { font-weight: 700; color: var(--fg-strong); }
/* niente outline sul display grande: le forme geometriche di Clash,
   da cave e sovrapposte, davano un effetto wireframe "gaming" */
.hero__word--outline {
  font-weight: 300;
  color: var(--fg-strong);
}

/* chip media inline nella riga di testo */
.hero__chip {
  display: inline-flex;
  width: clamp(5rem, 14vw, 13rem);
  height: 0.72em;
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}
.hero__chip-media {
  width: 100%; height: 100%;
  background: linear-gradient(120deg, #00075D, #4a55d2, #00075D, #2a34b8);
  background-size: 300% 100%;
  animation: chipFlow 7s linear infinite;
}
@keyframes chipFlow {
  0% { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

.hero__meta-inline {
  font-size: clamp(0.7rem, 0.9vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-transform: none;
  mix-blend-mode: difference;
  color: #fff;
  align-self: flex-start;
  margin-top: 0.5em;
  margin-left: auto;
  white-space: normal;
  max-width: 12rem;
}

.hero__star {
  width: clamp(2.5rem, 7vw, 6.5rem); height: auto;
  color: var(--accent);
  flex-shrink: 0;
}

.hero__foot {
  position: absolute; bottom: 2.5rem; left: var(--pad); right: var(--pad);
  display: flex; justify-content: space-between; align-items: flex-end;
}
.hero__tag { font-size: 1rem; line-height: 1.5; font-weight: 400; opacity: 0.8; }
.hero__scroll {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em;
  animation: scrollPulse 2.2s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.35; transform: translateY(6px); }
}

/* ============================================================
   MANIFESTO — scroll orizzontale (invariato)
   ============================================================ */
.manifesto { background: var(--bg); color: var(--fg-strong); transition: background-color 0.5s var(--ease), color 0.5s var(--ease); }
.manifesto__pin {
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.manifesto__track {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  padding-left: 100vw;
  padding-right: 8vw;
  white-space: nowrap;
  will-change: transform;
}
.m-word {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 12rem);
  font-weight: 300; line-height: 1; letter-spacing: -0.03em;
}
.m-word--bold { font-weight: 700; }
.m-word--outline { color: transparent; -webkit-text-stroke: 2px var(--fg-strong); }
.m-word--dot { color: var(--accent); -webkit-text-stroke: 0; font-weight: 700; }
.m-word:nth-child(4n) { margin-left: clamp(0.5rem, 2vw, 2rem); }
.m-icon { flex-shrink: 0; color: var(--fg-strong); }
.m-icon--star { width: clamp(3.5rem, 8vw, 7rem); height: auto; color: var(--accent); }
.m-icon--curve { width: clamp(7rem, 16vw, 14rem); height: auto; color: var(--fg-strong); opacity: 0.9; }
.m-icon--circle { width: clamp(3.5rem, 8vw, 7rem); height: auto; }

/* ============================================================
   WORK — deck di pannelli full-viewport impilati
   ============================================================ */
.work { background: var(--bg-deck); transition: background-color 0.5s var(--ease); }
.work__deck { position: relative; }

.plate {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: block;
  cursor: pointer;
  will-change: transform;
}
.plate__media {
  position: absolute; inset: 0;
  transform: scale(1.06);
  will-change: transform;
}
.plate__media--1 { background: linear-gradient(135deg, #00075D 0%, #2a34b8 55%, #8891e6 130%); }
.plate__media--2 { background: linear-gradient(210deg, #16171a 0%, #00075D 75%, #2a34b8 130%); }
.plate__media--3 { background: linear-gradient(150deg, #c6c9e8 -10%, #4a55d2 45%, #00075D 100%); }
.plate__media--4 { background: linear-gradient(115deg, #05082e 0%, #00075D 50%, #4a55d2 115%); }
.plate__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 6, 20, 0.55), transparent 45%);
}

.plate__index {
  position: absolute; top: 4vh; right: var(--pad);
  font-size: clamp(8rem, 24vw, 22rem);
  font-weight: 400; line-height: 1;
  /* pieno, in accento: la carta e la copertina del caso studio che apre
     devono avere lo stesso numero, dello stesso colore */
  color: var(--accent);
  letter-spacing: -0.05em;
  user-select: none;
}
.plate__head {
  position: absolute; top: 5vh; left: var(--pad);
  display: flex; flex-direction: column; gap: 0.4rem;
  color: var(--paper);
}
.plate__cat { font-size: 0.95rem; font-weight: 500; }
.plate__year { font-size: 0.85rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.plate__title {
  font-family: var(--font-display);
  position: absolute; bottom: 5vh; left: var(--pad); right: var(--pad);
  color: var(--paper);
  font-size: clamp(3rem, 8.5vw, 8rem);
  font-weight: 300; line-height: 0.95; letter-spacing: -0.03em;
  text-transform: uppercase;
}
.plate__title em { font-style: normal; font-weight: 700; }

/* ============================================================
   SERVIZI — anatomia di un progetto (corpo centrale + callout)
   Layout mobile-first: canvas sopra, pannelli in colonna.
   Desktop (no reduced-motion): corpo centrato a tutto schermo,
   pannelli overlay alternati sx/dx con linea di richiamo.
   ============================================================ */
.anatomy { background: var(--bg); position: relative; transition: background-color 0.5s var(--ease); }
.anatomy__pin { position: relative; }
.anatomy__stage {
  position: relative;
  height: 100vh; height: 100svh;
}
#anatomyGl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* mobile: il corpo sfuma nel bianco verso il basso, così il testo
   poggia sul paper senza bisogno di card */
.anatomy__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52vh;
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 24%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
/* desktop: quando un pannello è attivo, il corpo sfuma nel bianco
   dal suo lato — stessa lingua della dissolvenza mobile, niente card */
.anatomy__sidefade {
  display: none;
  position: absolute;
  top: 0; bottom: 0;
  width: 44vw;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
.anatomy__sidefade--left {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, var(--bg) 35%, transparent 100%);
}
.anatomy__sidefade--right {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, var(--bg) 35%, transparent 100%);
}

.anatomy__lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
.anatomy__lines line { stroke: var(--fg-strong); stroke-width: 1.5; }
.anatomy__lines circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
/* intro e pannelli: overlay sul corpo — in basso su mobile,
   ai lati su desktop (override nel media query) */
.aintro {
  display: flex; flex-direction: column; gap: 1rem;
  position: absolute;
  left: var(--pad); right: var(--pad);
  bottom: max(2.5rem, env(safe-area-inset-bottom));
  z-index: 3;
  pointer-events: none;
}
.aintro__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.aintro__title em { font-style: normal; font-weight: 700; color: var(--fg-strong); }
.aintro__sub {
  font-size: clamp(0.98rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  opacity: 0.75;
}
.aintro__hint {
  font-size: 1.4rem;
  color: var(--accent);
  animation: scrollPulse 2.2s var(--ease) infinite;
}

.anatomy__panels {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
}
/* su mobile il testo vive direttamente sul bianco, senza card:
   sono le inquadrature a garantirgli lo spazio libero */
.apanel {
  display: flex; flex-direction: column; gap: 0.9rem;
  position: absolute;
  left: var(--pad); right: var(--pad);
  bottom: max(2.5rem, env(safe-area-inset-bottom));
  visibility: hidden;
  opacity: 0;
}
.apanel__num {
  font-size: 0.85rem; font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}
.apanel__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.apanel__title em { font-style: normal; font-weight: 700; color: var(--fg-strong); }
.apanel__body {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  max-width: 38ch;
  opacity: 0.8;
}
.apanel__part {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent);
  opacity: 0.85;
}
.anatomy__zones { display: block; }
.azone { height: 100vh; }
.azone--outro { height: 55vh; }
/* su mobile ogni pagina richiede meno scroll di pollice */
@media (max-width: 900px) {
  .azone { height: 72vh; }
  .azone--outro { height: 40vh; }
}

/* desktop: pannelli ai lati invece che in basso */
@media (min-width: 901px) {
  .aintro {
    top: 50%; bottom: auto; right: auto;
    transform: translateY(-50%);
    width: min(26rem, 32vw);
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .apanel {
    top: 50%; bottom: auto;
    left: auto; right: auto;
    width: min(26rem, 32vw);
    padding: 0;
    transform: translateY(-50%);
  }
  .apanel--left  { left: var(--pad); }
  .apanel--right { right: var(--pad); align-items: flex-end; text-align: right; }
  .anatomy__fade { display: none; }
  .anatomy__sidefade { display: block; }
}

/* reduced motion: lista statica, niente overlay né pin */
@media (prefers-reduced-motion: reduce) {
  .anatomy__stage { height: 50vh; height: 50svh; }
  .anatomy__lines { display: none; }
  .aintro { position: static; transform: none; padding: 3rem var(--pad) 0; width: auto; }
  .anatomy__panels { position: static; }
  .apanel {
    position: static; transform: none; width: auto;
    visibility: visible; opacity: 1;
    margin: 1.2rem var(--pad);
  }
  .anatomy__zones { display: none; }
}

/* ============================================================
   CTA — kinetic variable type
   ============================================================ */
.cta {
  min-height: 90vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(5rem, 12vh, 8rem) var(--pad);
  text-align: center;
}
.cta__pre { font-size: clamp(1rem, 1.6vw, 1.3rem); opacity: 0.7; }
.cta__word {
  font-family: var(--font-display);
  display: block;
  font-size: clamp(3.4rem, 13.5vw, 13rem);
  font-weight: 300;
  font-variation-settings: 'wght' 300;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg-strong);
  white-space: nowrap;
}
.cta__word .cta-ch { display: inline-block; font-variation-settings: inherit; }
.cta__sub {
  display: flex; gap: 3rem;
  font-size: 0.9rem; opacity: 0.6;
}

/* ---------- Form contatti: la lettera da compilare ----------
   pattern mad-lib: i campi vivono dentro la frase (Huffduffer, 2008).
   Niente pill, niente riquadri: solo testo grande e linee sotto.   */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.mform {
  width: min(62rem, 100%);
  margin-top: clamp(2.5rem, 7vh, 5rem);
  text-align: left;
}
.mform__line {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.6;
  color: var(--fg);
  margin-bottom: clamp(0.9rem, 2.2vh, 1.4rem);
}

/* lo spazio da riempire: input nudo con la linea sotto */
.mfield { position: relative; display: inline-block; vertical-align: baseline; }
.mfield input,
.mfield textarea {
  font: inherit;
  letter-spacing: inherit;
  color: var(--fg-strong);
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  border-radius: 0;
  padding: 0 0.1em 0.08em;
  min-width: 4ch;
  transition: border-color 0.4s var(--ease);
  appearance: none;
}
.mfield textarea { resize: none; overflow: hidden; line-height: inherit; display: block; width: 100%; }
.mfield--area { display: block; width: 100%; margin-top: 0.2em; }
.mfield input::placeholder,
.mfield textarea::placeholder { color: var(--fg); opacity: 0.28; font-weight: 300; }
.mfield input:focus, .mfield textarea:focus { outline: none; }
/* al focus la linea si ridisegna in accent, da sinistra */
.mfield::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.mfield:focus-within::after { transform: scaleX(1); }
.mfield--error input, .mfield--error textarea { border-bottom-color: var(--accent); }
.mfield--error input::placeholder,
.mfield--error textarea::placeholder { color: var(--accent); opacity: 0.7; }

/* la scelta del servizio: parole nella frase, non bottoni */
.mchoice { display: inline; }
.mchoice i {
  font-style: normal; font-weight: 300;
  opacity: 0.25;
  margin: 0 0.28em;
}
.mopt { position: relative; display: inline-block; cursor: pointer; }
.mopt input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; left: 0; top: 0;
  cursor: pointer; margin: 0;
}
.mopt span {
  position: relative;
  display: inline-block;
  font-weight: 400;
  opacity: 0.45;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease),
              font-variation-settings 0.3s var(--ease);
}
/* sottolineatura che si disegna quando la parola è scelta */
.mopt span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -0.06em;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.mopt:hover span { opacity: 1; }
.mopt input:checked + span {
  opacity: 1;
  color: var(--accent);
  font-weight: 600;
}
.mopt input:checked + span::after { transform: scaleX(1); }
.mopt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }
.mchoice--error .mopt span { color: var(--accent); opacity: 0.7; }

.mform__foot {
  display: flex; align-items: baseline; gap: 1.8rem; flex-wrap: wrap;
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
}
/* invio: testo grande con la linea che cresce, niente pill */
.mform__submit {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 1.7vw, 1.6rem); font-weight: 600;
  letter-spacing: -0.015em;
  padding: 0 0 0.3rem;
  border: 0; background: none;
  color: var(--fg-strong);
  cursor: pointer;
  position: relative;
}
.mform__submit::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.mform__submit:hover::after { transform: scaleX(1); }
.mform__submit svg { width: 22px; height: 22px; transition: transform 0.4s var(--ease); }
.mform__submit:hover svg { transform: translateX(6px); }
.mform__submit[disabled] { opacity: 0.55; cursor: default; }
.mform__note { font-size: 0.92rem; opacity: 0.75; }
.mform__note--ok { color: var(--accent); opacity: 1; }
.mform__note a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .mform__line { font-size: clamp(1.1rem, 4.8vw, 1.3rem); }
  .mform__foot { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-block); color: var(--on-block);
  padding: clamp(4rem, 10vh, 7rem) var(--pad) 2rem;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.footer__top {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem; margin-bottom: clamp(4rem, 10vh, 7rem);
}
.footer__col { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.footer__label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em;
  opacity: 0.5; margin-bottom: 0.6rem;
}
.footer__link { font-size: 1.05rem; font-weight: 300; position: relative; }
.footer__link::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.footer__link:hover::after { transform: scaleX(1); transform-origin: left; }
.footer__text { font-size: 1.05rem; font-weight: 300; opacity: 0.8; font-variant-numeric: tabular-nums; }
.footer__logo {
  color: var(--on-block);
  margin-bottom: 2.5rem;
  user-select: none;
}
.footer__logo .wordmark { display: block; width: 100%; height: auto; }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.82rem; opacity: 0.5;
  border-top: 1px solid rgba(247, 248, 248, 0.15); padding-top: 1.5rem;
}

/* pagina interna ancora senza contenuti: tiene l'altezza così si vedono
   header e footer al posto giusto (serve per provare il varco) */
.pagina-vuota { min-height: 100vh; min-height: 100svh; }

/* ============================================================
   PAGINE DI TESTO (privacy, cookie, credits)
   ============================================================ */
.legale {
  width: min(52rem, 100%);
  margin: 0 auto;
  padding: clamp(8rem, 18vh, 12rem) var(--pad) clamp(4rem, 10vh, 7rem);
}
.legale__titolo {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 300; line-height: 1; letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--fg-strong);
}
.legale__titolo em { font-style: normal; font-weight: 700; }
.legale__data {
  display: block;
  margin-top: 1.2rem;
  font-size: 0.78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent);
}
.legale h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--fg-strong);
  margin: clamp(2.4rem, 6vh, 3.6rem) 0 0.9rem;
}
.legale h3 {
  font-size: 1rem; font-weight: 600;
  color: var(--fg-strong);
  margin: 1.8rem 0 0.5rem;
}
.legale p, .legale li { font-size: 1.02rem; line-height: 1.75; }
.legale p + p { margin-top: 0.9rem; }
.legale ul { margin: 0.9rem 0 0 1.1rem; }
.legale li { margin-bottom: 0.45rem; }
.legale a {
  color: var(--fg-strong);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.legale a:hover { color: var(--accent); }

/* riquadro "qui va messo il dato vero" */
.legale__nota {
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 0.95rem;
}

/* tabella dei cookie: scorre da sola sui piccoli schermi */
.legale__tabella { overflow-x: auto; margin: 1.2rem 0; }
.legale__tabella table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.legale__tabella th, .legale__tabella td {
  text-align: left; padding: 0.75rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  font-size: 0.92rem; line-height: 1.5;
  vertical-align: top;
}
.legale__tabella th {
  font-weight: 600; color: var(--fg-strong);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem;
}
.legale__tabella td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ============================================================
   BANNER COOKIE — pannello in basso a sinistra, spigoli vivi.
   "Accetta" e "Rifiuta" hanno lo stesso peso grafico: il Garante
   chiede che rifiutare costi quanto accettare.
   ============================================================ */
.ck {
  position: fixed; z-index: 1200;
  left: var(--pad); bottom: var(--pad);
  width: min(30rem, calc(100vw - var(--pad) * 2));
  background: var(--bg-block); color: var(--on-block);
  border-radius: 6px;
  padding: clamp(1.3rem, 2.5vw, 1.8rem);
  box-shadow: 0 26px 70px -24px rgba(1, 7, 38, 0.55);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}
.ck--su { transform: translateY(0); opacity: 1; }
.ck[hidden] { display: none; }
.ck__titolo {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.ck__testo { font-size: 0.92rem; line-height: 1.6; opacity: 0.85; }
.ck__testo a {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--accent); text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ck__azioni {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 1.2rem;
}
/* i due bottoni sono identici: stessa dimensione, stesso contrasto */
.ck__btn {
  flex: 1 1 8rem;
  font-family: var(--font-sans);
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
  padding: 0.75rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--on-block) 45%, transparent);
  border-radius: 4px;
  background: none; color: var(--on-block);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease);
}
.ck__btn:hover { background: var(--on-block); border-color: var(--on-block); color: var(--bg-block); }
.ck__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* "salva" compare solo col pannello aperto e prende una riga sua */
.ck__btn[data-ck="salva"] { flex: 1 1 100%; }
.ck__altro {
  margin-top: 0.9rem;
  display: inline-block;
  font-size: 0.85rem; font-weight: 500;
  background: none; border: 0; padding: 0 0 0.2rem;
  color: var(--on-block); opacity: 0.75;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 80%, transparent);
}
.ck__altro:hover { opacity: 1; }
/* l'attributo hidden deve vincere sul display qui sopra */
.ck__altro[hidden] { display: none; }

/* pannello preferenze */
.ck__scelte { margin-top: 1.2rem; border-top: 1px solid color-mix(in srgb, var(--on-block) 20%, transparent); }
.ck__scelte[hidden] { display: none; }
.ck__voce {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--on-block) 14%, transparent);
}
.ck__voce h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; }
.ck__voce p { font-size: 0.85rem; line-height: 1.5; opacity: 0.8; }
/* interruttore quadrato, coerente col resto del sito */
.ck__int {
  flex: 0 0 auto; margin-top: 0.15rem;
  width: 22px; height: 22px;
  border: 1px solid color-mix(in srgb, var(--on-block) 55%, transparent);
  border-radius: 3px;
  background: none; cursor: pointer;
  position: relative;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ck__int::after {
  content: ''; position: absolute; inset: 0;
  background: no-repeat center/12px 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.ck__int[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.ck__int[aria-checked="true"]::after { opacity: 1; }
.ck__int[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.ck__int:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 700px) {
  .ck { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ck { transition: none; transform: none; }
}

/* riga legale nel footer */
.footer__legale {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  justify-content: center;
}
.footer__legale a,
.footer__legale button {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.footer__legale a:hover,
.footer__legale button:hover { text-decoration-color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__line { white-space: normal; }
  .hero__line--c { margin-left: clamp(1rem, 8vw, 4rem); }
  .hero__meta-inline { display: none; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.5rem; position: static; margin-top: 3rem; padding-bottom: 2.5rem; }
  .plate__index { font-size: clamp(6rem, 30vw, 12rem); }
  .plate__title { font-size: clamp(2.2rem, 10vw, 4.5rem); }
  .footer__bottom { flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; }
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .nav__link { display: none; }
  .nav__cta { display: none; }        /* il Parliamone vive nel menu */
  .nav__burger { display: block; }
  .cta__word { white-space: normal; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain, .hero__scroll, .hero__chip-media { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* link "Scopri" dentro i pannelli servizio: unico elemento cliccabile
   dell'overlay (i pannelli hanno pointer-events: none) */
.apanel__link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 0.4rem;
  padding: 0.55rem 1.3rem;
  border: 1px solid currentColor; border-radius: 99px;
  font-family: var(--font-display);
  font-size: 0.98rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg-strong);
  pointer-events: auto;
  align-self: flex-start;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.apanel--right .apanel__link { align-self: flex-end; }
.apanel__link svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.apanel__link:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.apanel__link:hover svg { transform: translateX(4px); }

/* ============================================================
   STUDIO — il mazzo: carte-mestiere trascinabili sul tavolo.
   Niente pill: spigoli quasi vivi, link testuale con freccia.
   ============================================================ */
.deckabout {
  position: relative;
  background: var(--bg); color: var(--fg);
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: clamp(5rem, 12vh, 9rem) var(--pad) clamp(4rem, 10vh, 7rem);
  overflow: hidden;
}
.deckabout__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.deckabout__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.deckabout__line { display: block; }
.deckabout__line--em { font-weight: 700; color: var(--fg-strong); }
.deckabout__lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6; max-width: 44ch; opacity: 0.8;
  padding-bottom: 0.3rem;
}
.deckabout__lead em { font-style: normal; color: var(--accent); font-weight: 500; }

/* il tavolo */
.deckabout__table {
  position: relative;
  flex: 1;
  min-height: clamp(340px, 46vh, 520px);
  margin-top: clamp(1.5rem, 4vh, 3rem);
}
.tcard {
  position: absolute;
  width: clamp(180px, 16vw, 250px);
  aspect-ratio: 3 / 4;
  padding: 1.2rem 1.3rem;
  border-radius: 6px;
  display: flex; flex-direction: column;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 50px -18px rgba(1, 7, 38, 0.35);
  will-change: transform;
}
.tcard:active { cursor: grabbing; }

/* il ritratto riempie la carta, virato nel colore della carta stessa:
   così cinque foto diverse restano una famiglia sola. Al passaggio del
   mouse la vernice si toglie e resta la faccia vera, a colori. */
.tcard__foto {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
.tcard__foto img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.55s var(--ease), transform 0.7s var(--ease);
}
.tcard__foto::after {
  content: ''; position: absolute; inset: 0;
  background: var(--tinta);
  mix-blend-mode: color;
  opacity: 0.92;
  transition: opacity 0.55s var(--ease);
}
.tcard:hover .tcard__foto::after { opacity: 0; }
.tcard:hover .tcard__foto img { filter: grayscale(0) contrast(1); transform: scale(1.045); }

/* velo dal basso: tiene leggibile il testo anche sulla foto a colori */
.tcard::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--velo);
  pointer-events: none;
}

.tcard__num,
.tcard__role,
.tcard__part,
.tcard__nome { position: relative; z-index: 2; }

.tcard__num {
  font-size: 0.8rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  opacity: 0.75;
}
/* riga pronta per il nome vero, quando ci saranno le foto */
.tcard__nome {
  margin-top: auto;
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.7;
}
.tcard__role {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-top: auto;
}
.tcard__nome + .tcard__role { margin-top: 0.1rem; }
.tcard__part {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: 0.35rem;
}

.tcard--paper {
  /* la carta è bianca in ogni tema: il testo resta navy, non segue --fg-strong
     (che nel tema scuro diventa chiaro e sparirebbe sul bianco) */
  background: var(--white); color: var(--bg-block);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  --tinta: #FFFFFF;
  --velo: linear-gradient(to top,
    rgba(255, 255, 255, 0.94) 14%,
    rgba(255, 255, 255, 0.55) 42%,
    rgba(255, 255, 255, 0.05) 100%);
}
.tcard--navy {
  background: var(--bg-block); color: var(--on-block);
  --tinta: var(--bg-block);
  --velo: linear-gradient(to top,
    color-mix(in srgb, var(--bg-block) 92%, transparent) 14%,
    color-mix(in srgb, var(--bg-block) 45%, transparent) 45%,
    transparent 100%);
}
.tcard--accent {
  background: var(--accent); color: var(--white);
  --tinta: var(--accent);
  --velo: linear-gradient(to top,
    color-mix(in srgb, var(--accent) 90%, transparent) 14%,
    color-mix(in srgb, var(--accent) 42%, transparent) 45%,
    transparent 100%);
}

/* link testuale, niente pill */
.deckabout__link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  align-self: flex-end;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  font-size: clamp(1rem, 1.2vw, 1.15rem); font-weight: 500;
  color: var(--fg-strong);
  position: relative;
  padding-bottom: 0.35rem;
}
.deckabout__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.deckabout__link:hover::after { transform: scaleX(1); }
.deckabout__link svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.deckabout__link:hover svg { transform: translateX(5px); }

@media (max-width: 900px) {
  .deckabout__head { grid-template-columns: 1fr; align-items: start; gap: 1.4rem; }
  .deckabout__table { min-height: 420px; }
  .tcard { width: clamp(150px, 40vw, 190px); }
  .deckabout__link { align-self: flex-start; }
}

/* dal deck all'indice completo dei progetti */
.work__tutti {
  position: absolute; z-index: 5;
  right: var(--pad); bottom: clamp(2rem, 6vh, 4rem);
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 600;
  color: var(--on-block);
}
.work__tutti svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.work__tutti:hover { color: var(--accent); }
.work__tutti:hover svg { transform: translateX(6px); }
@media (max-width: 900px) {
  .work__tutti { position: static; margin: 2rem var(--pad) 0; }
}