/* ---------- Caratteri: ospitati sul sito (niente richieste a Google Fonts), tutti con licenza OFL ---------- */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/anton-400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 700; font-display: swap; src: url("assets/fonts/cormorant-garamond-italic-700.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/dm-sans-variable.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/dm-sans-italic-400.woff2") format("woff2"); }
/* caratteri di riserva con le stesse misure di quelli veri: mentre questi arrivano il testo non si sposta (niente "salti" del layout) */
@font-face { font-family: "DM Sans Fallback"; src: local("Arial"); size-adjust: 103.71%; ascent-override: 95.65%; descent-override: 29.89%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; font-style: italic; font-weight: 700; src: local("Georgia Bold Italic"), local("Georgia-BoldItalic"); size-adjust: 68.96%; ascent-override: 133.98%; descent-override: 41.62%; line-gap-override: 0%; }
@font-face { font-family: "Anton Fallback"; src: local("Impact"); size-adjust: 93.72%; ascent-override: 125.51%; descent-override: 35.11%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  /* Palette brand */
  --nero: #0d0d0d;
  --bianco-caldo: #f7f4ef;
  --champagne: #c6a878;
  --corallo: #ff6f59;
  --blu-notte: #17243b;
  --grafite: #303541;
  --verde: #2bd576;

  /* Ruoli */
  --bg: var(--nero);
  --panel: var(--blu-notte);
  --card: var(--grafite);
  --line: rgba(247, 244, 239, 0.12);
  --text: var(--bianco-caldo);
  --muted: #b4b0a8;
  --accent: var(--corallo);
  --on-accent: var(--nero);

  --font-title: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --font-display: "Anton", "Anton Fallback", Impact, sans-serif;
  --font-body: "DM Sans", "DM Sans Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gutter: 22px;
  --maxw: 1160px;
  --radius: 14px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--font-title); font-style: italic; font-weight: 700; line-height: 1.05; margin: 0; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: 64px 0; position: relative; }

/* parola evidenziata: corallo con bagliore */
.hl { color: var(--accent); text-shadow: 0 0 24px rgba(255, 111, 89, 0.55), 0 0 8px rgba(255, 111, 89, 0.3); }

/* ---------- Bottone ---------- */
.btn {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---------- Hero (mobile first) ---------- */
/* Telefono: testo in alto su nero pieno, cassaforte sotto con sfumatura. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 18px 0 calc(min(108vw, 720px) * 0.91); /* spazio per la foto sotto i testi */
  background: var(--bg);
}
.hero::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: min(108%, 720px);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: url("assets/hero-mobile.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(transparent 0%, transparent 18%, #000 55%, #000 85%, transparent 100%);
  mask-image: linear-gradient(transparent 0%, transparent 18%, #000 55%, #000 85%, transparent 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 85%, var(--bg) 100%);
}
.hero > .container { position: relative; z-index: 1; }

.hero__copy { max-width: 620px; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__logo { display: block; width: 150px; height: auto; margin: 0 0 24px; }

.hero h1 { font-size: clamp(42px, 11vw, 60px); line-height: 1.02; margin-bottom: 14px; }

.hero__sub { margin: 0; font-size: 17px; line-height: 1.45; color: var(--muted); max-width: 560px; }
.hero__sub .w { color: var(--text); }

/* punti di forza: griglia 2x2 su telefono */
.checks {
  list-style: none;
  margin: 22px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.checks li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.3; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--verde);
  box-shadow: 0 0 10px rgba(43, 213, 118, 0.45);
  filter: drop-shadow(0 0 3px rgba(43, 213, 118, 0.5));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232bd576' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}

/* numeri: due colonne separate da una linea */
.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.stat { display: grid; align-content: start; gap: 2px; padding: 0 18px; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__num { font-family: var(--font-display); font-size: 24px; line-height: 1; white-space: nowrap; text-shadow: 0 0 18px rgba(247, 244, 239, 0.3); }
.stat__num--verde { color: var(--verde); text-shadow: 0 0 20px rgba(43, 213, 118, 0.6), 0 0 6px rgba(43, 213, 118, 0.35); }
.stat__label { font-size: 15px; line-height: 1.25; color: var(--muted); }
.stat__word { text-shadow: 0 0 20px rgba(43, 213, 118, 0.6), 0 0 6px rgba(43, 213, 118, 0.35); } /* stesso font, dimensione e bagliore del +50 */

/* social proof: pillola con avatar sovrapposti, stelle e numero */
.proof {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.55);
}
.proof__avatars { display: flex; flex-shrink: 0; }
.proof__avatars img {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg);
}
.proof__avatars img + img { margin-left: -12px; }
.proof__txt { display: grid; gap: 3px; line-height: 1.15; }
.proof__stars { color: var(--accent); font-size: 12px; letter-spacing: 0.08em; line-height: 1; }
.proof__txt b { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; }
@media (max-width: 359px) { .proof__txt b { white-space: normal; } }

/* ---------- Frase-chiave ---------- */
/* sfondo: bagliori caldi + foto a bassa opacità solo a destra + grana (come Gabry) */
.statement {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  text-align: center;
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 90px, rgba(13, 13, 13, 0) calc(100% - 90px), var(--bg) 100%),
    radial-gradient(50% 40% at 100% 0%, rgba(198, 168, 120, 0.13), rgba(13, 13, 13, 0) 70%),
    radial-gradient(62% 50% at 54% 50%, rgba(255, 111, 89, 0.05), rgba(13, 13, 13, 0) 68%),
    linear-gradient(rgba(10, 9, 8, 0.78), rgba(8, 8, 7, 0.72)),
    var(--bg);
}
.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/statement-bg.webp") 100% 50% / 200px auto no-repeat;
  mix-blend-mode: screen;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(90deg, transparent 85%, #000 100%), linear-gradient(transparent, #000 min(22%, 520px), #000 calc(100% - min(22%, 520px)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 85%, #000 100%), linear-gradient(transparent, #000 min(22%, 520px), #000 calc(100% - min(22%, 520px)), transparent);
  mask-composite: intersect;
}
.statement::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-size: 220px 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.statement > .container { position: relative; z-index: 2; }

/* sezione senza sfondo proprio: usa quello del contenitore .mirror-bg */
.statement--plain { background: none; overflow: visible; }
.statement--plain::before, .statement--plain::after { display: none; }

/* sfondo a specchio condiviso dalle sezioni 3 e 4: cassette a sinistra, lato scuro a destra.
   Un'unica foto che scorre dietro tutte e due, senza stacchi. */
.mirror-bg {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 90px, rgba(13, 13, 13, 0) calc(100% - 140px), var(--bg) 100%),
    radial-gradient(50% 30% at 0% 0%, rgba(198, 168, 120, 0.13), rgba(13, 13, 13, 0) 70%),
    radial-gradient(62% 35% at 46% 40%, rgba(255, 111, 89, 0.05), rgba(13, 13, 13, 0) 68%),
    linear-gradient(rgba(10, 9, 8, 0.78), rgba(8, 8, 7, 0.72)),
    var(--bg);
}
.mirror-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(-1);
  background: url("assets/statement-bg.webp") 100% 0 / 200px auto repeat-y;
  mix-blend-mode: screen;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(90deg, transparent 85%, #000 100%), linear-gradient(transparent, #000 8%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 85%, #000 100%), linear-gradient(transparent, #000 8%, #000 80%, transparent);
  mask-composite: intersect;
}
.mirror-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-size: 220px 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.mirror-bg > section, .mirror-bg > .container { position: relative; z-index: 2; }

/* titoli più "bold": Cormorant arriva al massimo a 700, quindi ispessisco i tratti con un contorno sottile dello stesso colore */
.light h2, .change h2 { -webkit-text-stroke: 0.016em currentColor; }

/* ---------- Prima / Dopo (colori e struttura di Gabry) ---------- */
.change { padding: 72px 0; }
.change h2 { margin: 0 auto; max-width: 900px; text-align: center; font-size: clamp(32px, 8.2vw, 60px); line-height: 1.08; color: var(--text); text-wrap: balance; }
.vs { display: grid; gap: 0; margin-top: 40px; }
.vs__col {
  padding: 34px 28px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(229, 72, 77, 0.1), rgba(0, 0, 0, 0) 70%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(229, 72, 77, 0.45);
  box-shadow: 0 0 40px rgba(229, 72, 77, 0.08);
}
.vs__col--after {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(43, 213, 118, 0.1), rgba(0, 0, 0, 0) 70%),
    rgba(255, 255, 255, 0.02);
  border-color: rgba(43, 213, 118, 0.35);
  box-shadow: 0 0 40px rgba(43, 213, 118, 0.1);
}
.vs__title { margin: 0 0 18px; font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 20px; line-height: 1.25; color: #e5484d; }
.vs__col--after .vs__title { color: var(--verde); }
.vs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vs__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; line-height: 1.4; color: var(--muted); }
.vs__list svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: #e5484d; }
.vs__col--after .vs__list li { color: var(--text); }
.vs__col--after .vs__list svg { color: var(--verde); }

/* freccia verde che collega il prima al dopo: giù su telefono, a destra su desktop */
.vs__arrow {
  display: block;
  width: 72px; height: 40px;
  margin: 24px auto;
  color: var(--verde);
  filter: drop-shadow(0 0 8px rgba(43, 213, 118, 0.6));
  transform: rotate(90deg);
  animation: vs-nudge-down 1.8s ease-in-out infinite;
}
@keyframes vs-nudge-down { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(8px); } }
@keyframes vs-nudge-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .vs__arrow { animation: none; } }

/* ---------- Immagina: sfondo con cassette a destra + elenco con barra oro ---------- */
.mirror-bg--right {
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 90px, rgba(13, 13, 13, 0) calc(100% - 140px), var(--bg) 100%),
    radial-gradient(50% 30% at 100% 0%, rgba(198, 168, 120, 0.13), rgba(13, 13, 13, 0) 70%),
    radial-gradient(62% 35% at 26% 46%, rgba(255, 111, 89, 0.05), rgba(13, 13, 13, 0) 68%),
    linear-gradient(rgba(10, 9, 8, 0.78), rgba(8, 8, 7, 0.72)),
    var(--bg);
}
.mirror-bg--right::before { transform: none; } /* niente specchio: cassette sul lato destro */
.imagine { padding: 72px 0; }
.imagine h2 { margin: 0; max-width: 900px; font-size: clamp(32px, 8.2vw, 60px); line-height: 1.08; color: var(--text); text-wrap: balance; }

/* barra verticale oro (sfuma verso il basso) con una lineetta luminosa su ogni voce, come Gabry */
.rail { position: relative; list-style: none; margin: 40px 0 0; padding: 0 0 0 26px; display: grid; gap: 34px; max-width: 640px; }
.rail::before {
  content: "";
  position: absolute;
  top: 6px; bottom: 6px; left: 0;
  width: 2px;
  background: linear-gradient(rgba(198, 168, 120, 0.7), rgba(198, 168, 120, 0.12));
}
.rail li { position: relative; font-size: 18px; line-height: 1.55; color: var(--muted); }
.rail li::before {
  content: "";
  position: absolute;
  top: 0.8em; left: -32px;
  width: 14px; height: 1px;
  background: rgba(198, 168, 120, 0.7);
  box-shadow: 0 0 8px rgba(198, 168, 120, 0.7);
}
.rail .w { color: var(--text); }

/* blocco centrato con icona (come la sezione "AI" di Gabry), dentro la sezione Immagina */
.ai { margin-top: 72px; text-align: center; }
.ai__icon {
  display: block;
  width: 96px; height: 96px;
  margin: 0 auto 22px;
  color: var(--accent);
  filter: drop-shadow(0 0 26px rgba(255, 111, 89, 0.4));
}
.ai h2 { margin: 0 auto 18px; text-align: center; }
.ai p { max-width: 816px; margin: 0 auto 18px; font-size: 20px; line-height: 1.72; color: var(--muted); }
.ai .w { color: var(--text); }

/* ---------- Il percorso (cassette a sinistra) ---------- */
.path { padding: 72px 0; }
#immagina { padding-bottom: 24px; } /* "Il percorso" più vicino alla sezione sopra */
#percorso { padding-top: 24px; }
.path__head { max-width: 860px; margin: 0 auto 40px; text-align: center; }
/* targhetta con lucchetto, come l'etichetta di Gabry */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 8px 15px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ead9b8;
  background: linear-gradient(rgba(198, 168, 120, 0.16), rgba(198, 168, 120, 0.05) 48%, rgba(0, 0, 0, 0.2)), rgba(14, 10, 7, 0.9);
  border: 1px solid rgba(198, 168, 120, 0.55);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(234, 217, 184, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 22px rgba(198, 168, 120, 0.12);
}
.badge svg { width: 14px; height: 14px; flex: none; }
.path h2 { margin: 20px auto 18px; max-width: 860px; font-size: clamp(32px, 8.2vw, 60px); line-height: 1.08; color: var(--text); text-wrap: balance; }
.path__lead { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: balance; }

/* ---------- Chi lavora: sfondo corridoio (stesso trattamento di Gabry) ---------- */
.team {
  position: relative;
  overflow: hidden;
  padding: 48px 0 72px;
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 60px, rgba(13, 13, 13, 0) calc(100% - 60px), var(--bg) 100%),
    linear-gradient(90deg, rgba(13, 13, 13, 0.85) 0, rgba(13, 13, 13, 0) 22%, rgba(13, 13, 13, 0) 78%, rgba(13, 13, 13, 0.85) 100%),
    radial-gradient(38% 46% at 27% 52%, rgba(198, 168, 120, 0.12), rgba(0, 0, 0, 0) 66%),
    radial-gradient(38% 46% at 73% 52%, rgba(198, 168, 120, 0.12), rgba(0, 0, 0, 0) 66%),
    linear-gradient(var(--bg) 0, rgba(10, 9, 8, 0.6) 14%, rgba(10, 9, 8, 0.52) 86%, var(--bg) 100%),
    url("assets/corridor.webp") 50% 60% / cover no-repeat,
    var(--bg);
}
.team::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-size: 220px 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* su telefono il titolo cade sulla porta luminosa: velo in più per la leggibilità */
.team::before { content: ""; position: absolute; inset: 0; background: rgba(10, 9, 8, 0.34); }
.team > .container { position: relative; z-index: 2; max-width: 1320px; padding: 0 22px; } /* largo come Gabry: schede da 610px */
.team .path__lead { font-size: 20px; line-height: 1.6; }

/* schede persona: cornice a nicchia con bordo champagne + targhetta che si sovrappone (come Gabry) */
.vaults { display: grid; gap: 40px; margin-top: 40px; }
.vault { position: relative; }
.vault__niche, .expect__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 2px solid rgba(198, 168, 120, 0.55);
  background: linear-gradient(rgba(38, 28, 16, 0.95), rgba(9, 7, 5, 0.98));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 40px rgba(198, 168, 120, 0.14), 0 30px 70px rgba(0, 0, 0, 0.6);
}
.vault__niche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* ombre interne sopra la foto: luce calda in alto, buio in basso verso la targhetta */
.vault__niche::before, .expect__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(198, 168, 120, 0.22), inset 0 26px 60px rgba(198, 168, 120, 0.12), inset 0 -40px 70px rgba(0, 0, 0, 0.8);
}
/* quattro borchie in ottone agli angoli */
.vault__niche::after, .expect__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  pointer-events: none;
  --rivet: radial-gradient(circle at 35% 30%, #efe0c3 0 2px, #c6a878 58%, #7d6840 80%, rgba(0, 0, 0, 0) 84%);
  background:
    var(--rivet) left top / 10px 10px no-repeat,
    var(--rivet) right top / 10px 10px no-repeat,
    var(--rivet) left bottom / 10px 10px no-repeat,
    var(--rivet) right bottom / 10px 10px no-repeat;
}
.vault__plate {
  position: relative;
  z-index: 3;
  margin: -34px 18px 0;
  padding: 18px 22px 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(255, 255, 255, 0.05)),
    linear-gradient(rgb(27, 22, 16), rgb(11, 9, 7));
  border: 1px solid rgba(198, 168, 120, 0.5);
  box-shadow: inset 0 1px 0 rgba(234, 217, 184, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 26px rgba(198, 168, 120, 0.12);
}
.vault__name { margin: 0; font-size: 40px; line-height: 1.05; color: var(--text); text-shadow: 0 0 18px rgba(247, 244, 239, 0.35); }
.vault__role { margin: 6px 0 0; font-size: 16px; line-height: 1.35; color: #c6a878; }
.vault__desc { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--muted); }
.vault__desc .w { color: var(--text); font-weight: 700; }

/* ---------- Cosa ti aspetta: foto inclinata con la stessa cornice, statistiche e moduli (come Gabry) ---------- */
.expect { padding: 72px 0 48px; }
/* sfondo FERMO: la sezione cresce quando apro un modulo, quindi luci e dissolvenze sono ancorate in px
   (e la foto delle cassette ha misura fissa, vedi blocco desktop) invece che in % dell'altezza */
.expect {
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 90px, rgba(13, 13, 13, 0) calc(100% - 140px), var(--bg) 100%),
    radial-gradient(720px 400px at 100% 0, rgba(198, 168, 120, 0.13), rgba(13, 13, 13, 0) 70%),
    radial-gradient(900px 480px at 26% 620px, rgba(255, 111, 89, 0.05), rgba(13, 13, 13, 0) 68%),
    linear-gradient(rgba(10, 9, 8, 0.78), rgba(8, 8, 7, 0.72)),
    var(--bg);
}
.expect::before {
  -webkit-mask-image: linear-gradient(90deg, transparent 85%, #000 100%), linear-gradient(transparent, #000 110px, #000 calc(100% - 260px), transparent);
  mask-image: linear-gradient(90deg, transparent 85%, #000 100%), linear-gradient(transparent, #000 110px, #000 calc(100% - 260px), transparent);
}
.expect__grid { display: grid; gap: 44px; }
/* stessa cornice a nicchia delle schede persona, ma su una foto orizzontale e leggermente inclinata a sinistra */
.expect__frame { aspect-ratio: auto; transform: rotate(-2deg); }
.expect__frame img { display: block; width: 100%; height: auto; }
.expect__frame::before { box-shadow: inset 0 0 0 1px rgba(198, 168, 120, 0.22), inset 0 0 50px rgba(0, 0, 0, 0.35); }
.expect h2 { margin: 0 0 18px; font-size: clamp(32px, 8.2vw, 60px); line-height: 1.08; color: var(--text); text-wrap: balance; }
.expect__lead { margin: 0; font-size: 20px; line-height: 1.7; color: var(--muted); }
.expect__lead .w { color: var(--text); font-weight: 700; }

/* tre numeri affiancati tra due barre champagne sottili, sotto il testo (colonna destra, come Gabry) */
.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 0; padding: 30px 0; border-top: 0.5px solid rgba(198, 168, 120, 0.8); border-bottom: 0.5px solid rgba(198, 168, 120, 0.8); }
.tally__item { display: flex; flex-direction: column; gap: 6px; padding: 0 clamp(8px, 2vw, 28px); border-left: 1px solid var(--line); }
.tally__item:first-child { padding-left: 0; border-left: 0; }
.tally__num { font-family: var(--font-display); font-size: 53px; line-height: 0.95; letter-spacing: -0.01em; color: var(--text); text-shadow: 0 0 22px rgba(247, 244, 239, 0.25); }
.tally__num--green { color: var(--verde); text-shadow: 0 0 26px rgba(43, 213, 118, 0.45); }
.tally__cap { font-size: 16px; line-height: 1.35; color: var(--muted); }

/* elenco moduli a fisarmonica: tutta la riga è il pulsante (summary), il "+" ruota in "×" quando è aperta */
.mods { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid rgba(247, 244, 239, 0.1); interpolate-size: allow-keywords; }
.mod { border-bottom: 1px solid rgba(247, 244, 239, 0.1); }
.mod summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 18px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.mod summary::-webkit-details-marker { display: none; }
.mod__n { font-family: var(--font-title); font-style: italic; font-weight: 700; font-size: 30px; line-height: 1; min-width: 24px; color: var(--accent); }
.mod__title { font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.mod summary:focus-visible { outline: 2px solid rgba(255, 111, 89, 0.6); outline-offset: 2px; }
.mod__who { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.mod__who b { color: var(--text); }
/* solo il viso: ritaglio della foto di Gianluca */
.mod__face { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: url("assets/team-gianluca.webp") 52.8% 21.5% / 310% auto no-repeat, #1b1610; }
.mod__face--rossana { background-image: url("assets/team-rossana.webp"); background-position: 60.6% 23.1%; background-size: 245% auto; }
.mod__ico { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(247, 244, 239, 0.18); background: transparent; color: var(--accent); transition: border-color 0.2s; }
.mod__ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.mod details[open] .mod__ico { border-color: rgba(255, 111, 89, 0.55); }
.mod details[open] .mod__ico svg { transform: rotate(45deg); }
.mod__txt { margin: 0; padding: 0 4px 26px; max-width: 780px; font-size: 17px; line-height: 1.6; color: var(--muted); }
@supports selector(details::details-content) {
  .mod details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s ease, content-visibility 0.3s ease allow-discrete; }
  .mod details[open]::details-content { block-size: auto; }
}
/* telefono: numero a sinistra, titolo e "Con Gianluca" impilati, "+" a destra */
@media (max-width: 799px) {
  .mod summary { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n title ico" "n who ico"; }
  .mod__n { grid-area: n; align-self: start; line-height: 26px; }
  .mod__title { grid-area: title; }
  .mod__who { grid-area: who; }
  .mod__ico { grid-area: ico; align-self: center; }
}

/* ---------- I bonus: etichetta verde, righe testo + immagine con contorno corallo (come Gabry) ---------- */
.badge--green {
  color: #b9f0d0;
  background: linear-gradient(rgba(43, 213, 118, 0.14), rgba(43, 213, 118, 0.04) 48%, rgba(0, 0, 0, 0.2)), rgba(14, 10, 7, 0.9);
  border-color: #2bd576;
  box-shadow: inset 0 1px 0 rgba(185, 240, 208, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 0 22px rgba(43, 213, 118, 0.18);
}
.badge--green svg { color: #2bd576; filter: drop-shadow(0 0 5px rgba(43, 213, 118, 0.8)); }

/* sfondo come Gabry: cassette sui DUE lati (a sinistra il ::before specchiato, a destra .bonus__wall).
   Il centro è NERO puro (nessuna luce colorata) e il nero sfuma verso i lati dove compaiono le cassette.
   Le foto si ripetono in verticale, così la sezione può crescere con i bonus. */
.bonus { padding: 48px 0 72px; }
.bonus {
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 90px, rgba(13, 13, 13, 0) calc(100% - 90px), var(--bg) 100%),
    var(--bg);
}
/* telefono: dissolvenza lunga e morbida (a gradini) dal bordo verso il nero del centro, e più lunga anche in alto e in basso */
.bonus::before, .bonus__wall {
  opacity: 0.34;
  -webkit-mask-image: linear-gradient(90deg, transparent 52%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.65) 92%, #000 100%), linear-gradient(transparent, #000 min(32%, 320px), #000 calc(100% - min(32%, 320px)), transparent);
  mask-image: linear-gradient(90deg, transparent 52%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.65) 92%, #000 100%), linear-gradient(transparent, #000 min(32%, 320px), #000 calc(100% - min(32%, 320px)), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.bonus::before { background-position: 100% 0; }
/* lato destro: stessa foto, non specchiata, sfalsata in verticale così le due pareti non sono identiche */
.bonus__wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: url("assets/statement-bg.webp") 100% -220px / 200px auto repeat-y;
}
.bonus .path__head { margin-bottom: 0; }
.gifts { display: grid; gap: clamp(56px, 8vw, 112px); margin-top: 48px; }
.gift { display: grid; gap: 28px; align-items: center; }
.gift__lab { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
/* "#1": champagne con sfumatura (#C6A878 al centro) e bagliore, come il numero di Gabry */
.gift__n { font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: 0; color: #c6a878; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gift__n {
    background: linear-gradient(170deg, #f3e6c8 8%, #c6a878 46%, #9a7d4c 72%, #e8d5ad 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(198, 168, 120, 0.5)) drop-shadow(0 4px 12px rgba(198, 168, 120, 0.25));
  }
}
.gift__title { margin: 0 0 14px; font-size: 40px; line-height: 1.1; color: var(--text); text-wrap: balance; }
.gift__lead { max-width: 48ch; margin: 0 0 18px; font-size: 20px; line-height: 1.6; color: var(--muted); }
.gift__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 6px 0 0; font-size: 17px; line-height: 1.5; color: var(--muted); }
.gift__value s { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.gift__free { font-weight: 700; }
.gift__free b { color: var(--verde); font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 0 18px rgba(43, 213, 118, 0.45); }
.gift__media { padding: 12px; }
/* ---------- "Funzionerà per me?": cassette a destra, centro nero che sfuma verso il lato (stesso schema del bonus, un solo lato) ---------- */
.doubt { padding: 32px 0 72px; }
.doubt, .bio {
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 90px, rgba(13, 13, 13, 0) calc(100% - 90px), var(--bg) 100%),
    var(--bg);
}
/* gradiente champagne #C6A878 sul lato destro (schema di Gabry in "Come nasce Sales Solution"), più tenue (12%) e più in basso (66% dell'altezza) */
.bio {
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 90px, rgba(13, 13, 13, 0) calc(100% - 90px), var(--bg) 100%),
    radial-gradient(52% 42% at 82% 66%, rgba(198, 168, 120, 0.12), rgba(13, 13, 13, 0) 66%),
    var(--bg);
}
/* sezione con cassette a destra e gradiente champagne #C6A878 a sinistra ("Quanto vale la tranquillità": ellisse 80%×55% in alto a sinistra, 10% → trasparente al 62%) */
.glowleft { padding: 32px 0 72px; }
.glowleft {
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 90px, rgba(13, 13, 13, 0) calc(100% - 90px), var(--bg) 100%),
    radial-gradient(80% 55% at 12% 0%, rgba(198, 168, 120, 0.1), rgba(13, 13, 13, 0) 62%),
    var(--bg);
}
/* ---------- Facciamo i conti: testo a sinistra, "scontrino" a destra (come Gabry); su telefono uno sotto l'altro ---------- */
.badge--conti { color: #e3d2b1; border-color: #c6a878; }
.conti__head { display: flex; justify-content: center; margin-bottom: 36px; } /* etichetta al centro, in alto */
.conti__grid { display: grid; gap: 40px; align-items: start; }
.conti h2 { margin: 0 0 18px; font-size: clamp(32px, 8.2vw, 60px); line-height: 1.08; color: var(--text); text-wrap: balance; }
.conti__lead { margin: 0 0 18px; font-size: 20px; line-height: 1.72; color: var(--muted); }
.conti__lead strong { font-weight: 700; color: var(--text); }

/* scontrino: targa scura con bordo champagne, borchie agli angoli, righe tratteggiate e totale grande */
.receipt {
  position: relative;
  padding: 26px 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(255, 255, 255, 0.04)),
    linear-gradient(rgb(23, 18, 13), rgb(12, 9, 6));
  border: 1px solid rgba(198, 168, 120, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 5px rgba(198, 168, 120, 0.05), 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 60px rgba(198, 168, 120, 0.1);
}
.receipt::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  --rivet: radial-gradient(circle at 35% 30%, #efe0c3 0 1.4px, #c6a878 55%, #7d6840 78%, rgba(0, 0, 0, 0) 82%);
  background:
    var(--rivet) left top / 8px 8px no-repeat,
    var(--rivet) right top / 8px 8px no-repeat,
    var(--rivet) left bottom / 8px 8px no-repeat,
    var(--rivet) right bottom / 8px 8px no-repeat;
}
.receipt__list { list-style: none; margin: 0; padding: 0; }
.receipt__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 22px; align-items: start; padding: 16px 0; border-bottom: 1px dashed rgba(247, 244, 239, 0.16); }
.receipt__item:first-child { padding-top: 0; }
.receipt__item p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--muted); }
.receipt__amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.receipt__num { font-family: var(--font-display); font-size: 28px; line-height: 0.95; letter-spacing: -0.01em; color: var(--text); text-shadow: 0 0 18px rgba(247, 244, 239, 0.2); white-space: nowrap; }
.receipt__cap { font-size: 16px; line-height: 1.35; color: var(--muted); }
.receipt__sum { margin: 0; padding: 18px 0 6px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.receipt__sum strong { font-weight: 700; color: var(--text); }
.receipt__total { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 18px; padding-top: 18px; border-top: 2px solid rgba(247, 244, 239, 0.5); }
.receipt__label { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247, 244, 239, 0.58); }
.receipt__total-num { font-family: var(--font-display); font-size: clamp(64px, 20vw, 100px); line-height: 0.95; letter-spacing: -0.01em; color: var(--text); text-shadow: 0 0 22px rgba(247, 244, 239, 0.25); }

.doubt::before, .bio::before, .glowleft::before {
  opacity: 0.34;
  background-position: 100% 0;
  /* dissolvenza in alto in px (non in %): aprendo una recensione la sezione cresce e lo sfondo non si muove */
  -webkit-mask-image: linear-gradient(90deg, transparent 52%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.65) 92%, #000 100%), linear-gradient(transparent, #000 180px, #000 calc(100% - 260px), transparent);
  mask-image: linear-gradient(90deg, transparent 52%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.65) 92%, #000 100%), linear-gradient(transparent, #000 180px, #000 calc(100% - 260px), transparent);
}
.doubt__head { max-width: 860px; margin: 0 auto; text-align: center; }
.doubt h2 { margin: 0; font-size: clamp(32px, 8.2vw, 60px); line-height: 1.08; color: var(--text); text-wrap: balance; }
.doubt__lead { margin: 18px 0 0; font-size: 20px; line-height: 1.6; color: var(--muted); }

/* ---------- Come nasce il Metodo: foto a sinistra, testo a destra (su telefono foto, titolo, testo, numeri); cassette a sinistra ---------- */
.bio { padding: 32px 0 72px; }
.bio__grid { display: grid; gap: 40px; align-items: center; }
/* stessa cornice a nicchia della foto in "Chi lavora"; senza targhetta, quindi il buio in basso è più leggero */
.bio__photo::before { box-shadow: inset 0 0 0 1px rgba(198, 168, 120, 0.22), inset 0 26px 60px rgba(198, 168, 120, 0.12), inset 0 -30px 60px rgba(0, 0, 0, 0.35); }
.bio h2 { margin: 0 0 18px; font-size: clamp(32px, 8.2vw, 60px); line-height: 1.08; color: var(--text); text-wrap: balance; }
.bio__lead { margin: 0; font-size: 17px; line-height: 1.7; color: var(--muted); }
.bio__lead strong { font-weight: 700; color: var(--text); }
/* due "finestre" come i numeri dell'hero, ma con numeri da 40px; su telefono vanno una sotto l'altra */
.stats--bio { grid-template-columns: 1fr; margin: 28px 0; padding: 22px 0 34px; border-bottom: 1px solid var(--line); }
.stats--bio .stat { padding: 0; }
.stats--bio .stat + .stat { border-left: 0; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.stats--bio .stat__num { font-size: 40px; letter-spacing: -0.4px; }

/* cassette anche in alto: a sinistra il ::before (specchiato) parte quasi dal bordo alto, a destra .bio__wall
   si vede solo nell'angolo in alto e si dissolve verso il basso, così non copre il testo */
.bio::before {
  -webkit-mask-image: linear-gradient(90deg, transparent 52%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.65) 92%, #000 100%), linear-gradient(transparent, #000 90px, #000 calc(100% - 260px), transparent);
  mask-image: linear-gradient(90deg, transparent 52%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.65) 92%, #000 100%), linear-gradient(transparent, #000 90px, #000 calc(100% - 260px), transparent);
}
.bio__wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.34;
  background: url("assets/statement-bg.webp") 100% -220px / 200px auto repeat-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 52%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.65) 92%, #000 100%), linear-gradient(transparent, #000 90px, #000 160px, transparent 460px);
  mask-image: linear-gradient(90deg, transparent 52%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.65) 92%, #000 100%), linear-gradient(transparent, #000 90px, #000 160px, transparent 460px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* recensioni: box con bordo, bagliore interno e quattro borchie agli angoli (come le schede di Gabry),
   in champagne. Il testo è tagliato a 5 righe e il "+" in basso a destra (una label su un checkbox, senza JS) lo apre tutto. */
/* carosello orizzontale come Gabry: scorre a mano o con le frecce, una scheda alla volta */
.vcar { position: relative; margin-top: 36px; }
.reviews {
  display: flex;
  align-items: stretch; /* tutte le schede hanno la stessa altezza (quella della più alta) */
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 22px;
  padding: 20px 22px 40px;
  margin: -14px -22px -22px;
  scrollbar-width: none;
}
.reviews::-webkit-scrollbar { display: none; }
.vcar__nav { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.vcar__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
@media (hover: hover) { .vcar__btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); } }
.vcar__btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }
.vcar__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* nota: riquadro trasparente con bordo sottile bianco e barra corallo a sinistra (come Gabry) */
.note {
  max-width: 860px;
  margin: 40px auto 0;
  padding: 14px 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: 1px solid rgba(247, 244, 239, 0.8);
  border-left: 3px solid var(--accent);
}
.note strong { font-weight: 700; color: var(--text); }
.review {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto; /* intestazione, testo che si allunga, "+" sempre in basso */
  gap: 12px;
  flex: 0 0 min(78vw, 346px);
  scroll-snap-align: start;
  padding: 18px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(198, 168, 120, 0.1), rgba(0, 0, 0, 0) 62%),
    rgba(16, 12, 8, 0.94);
  border: 2px solid rgba(198, 168, 120, 0.62);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 120, 0.22), inset 0 0 30px rgba(198, 168, 120, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 26px rgba(198, 168, 120, 0.14), 0 20px 44px rgba(0, 0, 0, 0.5);
  text-align: left;
}
.review::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  --rivet: radial-gradient(circle at 35% 30%, #efe0c3 0 1.6px, #c6a878 55%, #7d6840 78%, rgba(0, 0, 0, 0) 82%);
  background:
    var(--rivet) left top / 8px 8px no-repeat,
    var(--rivet) right top / 8px 8px no-repeat,
    var(--rivet) left bottom / 8px 8px no-repeat,
    var(--rivet) right bottom / 8px 8px no-repeat;
}
.review__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.review__brand { margin: 0; padding-right: 8px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--text); }
.review__brand span { font-size: 16px; font-weight: 500; color: var(--muted); }
.review__txt {
  align-self: start; /* altezza = 5 righe: se si allungasse con la scheda, sotto i puntini comparirebbe la riga successiva */
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.review__toggle:checked ~ .review__txt { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.review__more {
  justify-self: end;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247, 244, 239, 0.18);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.2s;
}
.review__more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.review__toggle:checked ~ .review__more { border-color: rgba(255, 111, 89, 0.55); }
.review__toggle:checked ~ .review__more svg { transform: rotate(45deg); }
.review__toggle:focus-visible ~ .review__more { outline: 2px solid rgba(255, 111, 89, 0.6); outline-offset: 2px; }

/* totale dei bonus: riquadro centrato sotto le righe, come in Gabry */
.gifts__total { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 80px); }
.total {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0;
  padding: 8px 24px 10px;
  text-align: center;
  border: 2px solid rgba(255, 111, 89, 0.6);
  background: radial-gradient(80% 100% at 50% 0%, rgba(255, 111, 89, 0.14), rgba(0, 0, 0, 0) 70%), linear-gradient(rgba(26, 18, 10, 0.95), rgba(9, 6, 4, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 214, 200, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 34px rgba(255, 111, 89, 0.2), 0 20px 44px rgba(0, 0, 0, 0.55);
}
.total__n { font-family: var(--font-title); font-style: italic; font-weight: 700; font-size: 60px; line-height: 1; color: var(--text); }
.total__lab { font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--muted); }
.total__free { font-size: 20px; line-height: 1.4; color: var(--muted); }
.total__free b { color: var(--verde); font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 0 18px rgba(43, 213, 118, 0.45); }

/* bordo sottile corallo #FF6F59 */
.gift__frame {
  border: 1px solid #ff6f59;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55);
}
.gift__frame img { display: block; width: 100%; height: auto; }

.timeline { list-style: none; margin: 0; padding: 0; }
.week { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 22px; padding: 26px 0; border-top: 1px solid rgba(247, 244, 239, 0.1); }
.week__n { display: flex; flex-direction: column; gap: 4px; }
.week__label { font-size: 14px; font-weight: 700; line-height: 1.55; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247, 244, 239, 0.58); }
.week__num { font-family: var(--font-display); font-size: 48px; line-height: 0.9; letter-spacing: -0.01em; color: var(--text); }
.week__title { margin: 0 0 12px; font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 21px; line-height: 1.22; letter-spacing: -0.02em; color: var(--text); }
.week__txt { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--muted); }
.week .w { color: var(--text); font-weight: 700; }

/* frase di chiusura del percorso, centrata */
.week:last-child { border-bottom: 1px solid rgba(247, 244, 239, 0.1); } /* linea anche dopo l'ultimo passo */
.path .path__close { margin: 20px auto 0; max-width: 900px; text-align: center; }
.statement h2 { max-width: 900px; margin: 0 auto; font-size: clamp(30px, 8.2vw, 60px); line-height: 1.08; text-wrap: balance; }
.statement__intro { max-width: 640px; margin: 18px auto 0; font-size: 18px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.statement .statement__intro--sm { font-size: 20px; }
.statement__intro strong { color: var(--text); font-weight: 700; }

/* variante con testo allineato a sinistra */
.statement--left { text-align: left; }
.statement--left h2 { margin: 0; max-width: 900px; }
.statement--left .statement__intro { margin: 18px 0 0; max-width: 700px; text-wrap: pretty; }

/* spazi più stretti tra sezione 2, 3 e 4 */
#metodo { padding-bottom: 48px; }
#pezzo { padding: 24px 0; }

/* ---------- Sezione risultato: frase + elenco con X ---------- */
.result { padding: 16px 0 0; }
.result__lead { margin: 0; font-size: 23px; font-weight: 700; line-height: 1.2; color: var(--text); }
.xlist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; max-width: 760px; }
.xlist li { display: flex; align-items: flex-start; gap: 14px; font-size: 20px; line-height: 1.35; color: var(--muted); }
.xlist strong { color: var(--text); font-weight: 700; }
.xlist svg {
  flex: none;
  width: 28px; height: 28px;
  margin-top: 2px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(255, 111, 89, 0.6));
}

.result__p { margin: 32px 0 0; max-width: 760px; font-size: 20px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.result__p strong { color: var(--text); font-weight: 700; }
.result__q { margin: 16px 0 0; font-size: 20px; line-height: 1.5; font-style: italic; color: var(--muted); }
.result__big {
  margin: 40px 0 0;
  max-width: 900px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
/* "il problema" sottolineato a penna, in corallo: doppio tratto irregolare */
.ul {
  white-space: nowrap;
  padding-bottom: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8c24-5 44 3 70-1s52-5 78 0 36 1 48-1' fill='none' stroke='%23ff6f59' stroke-width='3.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12 12.5c40-3 92 0 170-1.5' fill='none' stroke='%23ff6f59' stroke-width='2' stroke-linecap='round' opacity='.65' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% 14px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* freccia ondulata che "respira" verso il pulsante */
.result__arrow {
  display: block;
  width: 40px; height: 72px;
  margin: 32px 0 16px 8px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(255, 111, 89, 0.6));
  animation: nudge 1.8s ease-in-out infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) { .result__arrow { animation: none; } }

/* pulsante come quello di Gabry: bordo spesso, interno oro scuro, testo bianco con bagliore */
.btn--gold {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 38px;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  background: #8b6e09;
  border: 4px solid var(--accent);
  border-radius: 0;
  box-shadow: 0 0 16px rgba(198, 168, 120, 0.29), 0 0 40px rgba(255, 111, 89, 0.25);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.5);
  text-wrap: balance;
}

/* ---------- Immagine del ponte ---------- */
/* stesse proporzioni di Gabry: a tutta larghezza ma bassa (200px su telefono, ~374px a 1425px di larghezza) */
.bridge { margin-top: 20px; overflow: hidden; border-bottom: 2px solid var(--accent); } /* filo corallo a fine immagine */
.bridge img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 50% 60%;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 75%, transparent);
  mask-image: linear-gradient(transparent, #000 35%, #000 75%, transparent);
}

/* ---------- Sezione chiara (marmo) ---------- */
/* sfondo come Gabry: bianco caldo + marmo leggero (multiply, 30%) ripetuto in verticale + grana scura */
.light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 0;
  color: var(--nero);
  background: radial-gradient(at 100% 0%, rgba(255, 111, 89, 0.08), rgba(0, 0, 0, 0) 50%), #f6f3ee;
}
.light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/marble.webp") 0 0 / 104% auto repeat; /* 104%: spinge fuori vista il bordo chiaro a destra dell'immagine */
  mix-blend-mode: multiply;
  opacity: 0.3;
  pointer-events: none;
}
.light::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 220px 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.07;
  pointer-events: none;
}
.light > .container { position: relative; z-index: 1; max-width: 1320px; padding: 0 22px; } /* contenitore largo come Gabry: righe da 1276px */
.light h2 { margin: 0; max-width: 900px; font-size: clamp(32px, 8.2vw, 60px); line-height: 1.08; color: var(--nero); text-wrap: balance; }
.light .hl { text-shadow: none; } /* su fondo chiaro il bagliore corallo sporca */
.light__intro { margin: 20px 0 0; max-width: 720px; font-size: 20px; line-height: 1.5; color: #5f5b55; text-wrap: pretty; }
.light__intro strong { font-weight: 700; color: var(--nero); }
.light__get { margin: 32px 0 0; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--nero); }

/* frase di chiusura, centrata sotto i punti */
.light__closing { margin: 56px auto 0; max-width: 720px; text-align: center; font-size: 20px; font-weight: 400; line-height: 1.5; color: var(--nero); text-wrap: balance; }
.light__closing strong { font-weight: 700; }

/* punti numerati (stesso schema di Gabry): numero + testo da una parte, immagine dall'altra */
.steps { display: grid; gap: 40px; margin-top: 32px; }
.step { display: grid; gap: 24px; align-items: center; }
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 0.82;
  /* champagne pieno in basso, che sfuma verso l'alto */
  background: linear-gradient(to top, #c6a878 0%, #c6a878 30%, rgba(198, 168, 120, 0.18) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* sottolineatura: champagne pieno a sinistra, sfuma a destra */
.step__line {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 3px;
  margin: 8px 0 18px;
  background: linear-gradient(90deg, #c6a878 0%, rgba(198, 168, 120, 0) 100%);
}
.step__title {
  margin: 0;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -0.4px;
  color: var(--nero);
  text-wrap: pretty;
}
/* finestra su fondo chiaro con riquadro champagne dietro, spostato di 18px (come Gabry) */
.step__media { position: relative; padding: 18px 0 0 18px; }
.step__media::before {
  content: "";
  position: absolute;
  inset: 0 18px 18px 0;
  background: linear-gradient(150deg, rgba(198, 168, 120, 0.22), rgba(198, 168, 120, 0.06));
  box-shadow: inset 0 0 0 1px rgba(198, 168, 120, 0.5);
}
.step__media img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2; /* come Gabry: 682×454 e 501×334 */
  object-fit: cover;
  height: auto;
  border: 1px solid rgba(13, 13, 13, 0.12);
  box-shadow: 0 0 0 1px rgba(198, 168, 120, 0.35), 0 22px 46px rgba(60, 45, 25, 0.28);
}

/* ---------- Card situazioni ---------- */
.cards { display: grid; gap: 20px; max-width: 1136px; margin: 40px auto 0; text-align: left; }
.card {
  position: relative;
  padding: 30px 28px 28px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 111, 89, 0.1), rgba(13, 13, 13, 0) 70%),
    rgba(16, 12, 10, 0.94);
  border: 1px solid rgba(247, 244, 239, 0.1);
  box-shadow: inset 0 0 0 1px rgba(198, 168, 120, 0.22), 0 20px 40px rgba(0, 0, 0, 0.4);
}
/* quattro borchie in ottone agli angoli */
.card::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  --rivet: radial-gradient(circle at 35% 30%, #efe0c3 0 1.4px, #c6a878 55%, #7d6840 78%, rgba(0, 0, 0, 0) 82%);
  background:
    var(--rivet) left top / 9px 9px no-repeat,
    var(--rivet) right top / 9px 9px no-repeat,
    var(--rivet) left bottom / 9px 9px no-repeat,
    var(--rivet) right bottom / 9px 9px no-repeat;
}
.card__n {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--font-display);
  font-size: 43px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(247, 244, 239, 0.16);
}
.card__icon {
  display: block;
  width: 64px; height: 64px;
  margin-bottom: 20px;
  color: var(--accent);
  filter: drop-shadow(0 0 14px rgba(255, 111, 89, 0.5));
}
.card h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.1; }
.card p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted); }

/* ---------- Desktop ---------- */
@media (min-width: 800px) {
  :root { --gutter: 32px; }
  body { font-size: 18px; }
  .section { padding: 96px 0; }

  /* come Gabry: testo a sinistra su nero, cassaforte a destra */
  .hero { min-height: clamp(600px, 58.6vw, 844px); padding: clamp(40px, 6vw, 86px) 0; }
  /* immagine a tutta larghezza, ancorata in basso: la cassaforte resta nella metà destra */
  .hero::before {
    left: 0; right: 0;
    width: auto;
    transform: none;
    aspect-ratio: 2000 / 1125;
    background-image: url("assets/hero-desktop.webp");
    -webkit-mask-image: linear-gradient(transparent 0%, #000 16%);
    mask-image: linear-gradient(transparent 0%, #000 16%);
  }
  .hero::after { background: linear-gradient(rgba(13, 13, 13, 0.35), rgba(13, 13, 13, 0) 26%, rgba(13, 13, 13, 0) 72%, var(--bg) 100%); }
  /* testo ancorato a sinistra e mai più largo di metà schermo: resta lontano dalla cassaforte */
  .hero > .container { max-width: none; margin: 0; padding: 0 clamp(24px, 4vw, 80px); }
  .hero__copy { max-width: min(620px, 46vw); }

  .hero__logo { width: clamp(130px, 12.2vw, 176px); margin-bottom: 14px; }
  .hero h1 { font-size: clamp(38px, 4.2vw, 60px); margin-bottom: 12px; }
  .hero__sub { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; max-width: 615px; }
  .checks { grid-template-columns: 1fr; gap: 9px; margin-top: 24px; padding: 0; border-top: 0; max-width: 674px; }
  .checks li { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.4; padding-left: 38px; }
  .checks li::before { top: 0; width: 24px; height: 24px; background-size: 13px; }
  .stats { grid-template-columns: auto auto; justify-content: start; margin-top: 26px; padding: 18px 0 0; max-width: 100%; }
  .stat__num { font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -0.4px; }
  .statement { padding: 120px 0; }
  .statement::before {
    background-size: 660px auto;
    background-position: 100% 35%;
    opacity: 0.26;
    -webkit-mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 min(22%, 520px), #000 calc(100% - min(22%, 520px)), transparent);
    mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 min(22%, 520px), #000 calc(100% - min(22%, 520px)), transparent);
  }
  .statement h2 { font-size: clamp(44px, 5vw, 60px); }
  .statement__intro { margin-top: 20px; font-size: 20px; }
  #metodo { padding-bottom: 72px; }
  #pezzo { padding: 32px 0 24px; }
  .result { padding: 24px 0 0; }
  /* foto cassette prolungata: una sola immagine alta quanto le due sezioni */
  .mirror-bg::before {
    background-size: auto 100%;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    opacity: 0.26;
    -webkit-mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 8%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 8%, #000 80%, transparent);
  }
  .bridge { margin-top: -30px; }
  .bridge img { height: clamp(280px, 26.2vw, 440px); object-position: 50% 55%; }
  .light { padding: 96px 0; }
  .light h2 { font-size: clamp(44px, 5vw, 60px); }
  /* righe larghe 1276px: colonna piccola 518px + colonna grande 701px (gap 56px).
     Le immagini sono tutte della stessa misura (684×456): sempre nella colonna grande.
     Punti dispari: testo a sinistra, immagine a destra. Punti pari: immagine a sinistra, testo a destra. */
  .steps { gap: clamp(48px, 6vw, 86px); margin-top: 48px; }
  .light__closing { margin-top: 80px; }
  .change { padding: 120px 0; }
  .change h2 { font-size: clamp(44px, 5vw, 60px); }
  .vs { grid-template-columns: minmax(0, 0.475fr) 72px minmax(0, 0.525fr); margin-top: 56px; }
  .vs__col { padding: 34px; }
  .vs__arrow { margin: 0; align-self: center; justify-self: center; transform: none; animation-name: vs-nudge-right; }
  .imagine { padding: 120px 0; }
  .imagine h2 { font-size: clamp(44px, 5vw, 60px); }
  .rail { margin-top: 56px; gap: 40px; }
  .ai { margin-top: 112px; }
  .path { padding: 120px 0; }
  .path__head { margin-bottom: 64px; }
  .path h2 { font-size: clamp(44px, 5vw, 60px); }
  .week { grid-template-columns: 96px minmax(0, 1fr); padding: 40px 0; }
  .team { padding: 72px 0 120px; }
  .team .path__head { margin-bottom: 0; }
  .team::before { display: none; }
  .vaults { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 64px; }
  .week__num { font-size: 72px; }
  .path .path__close { margin-top: 28px; }
  #immagina { padding-bottom: 40px; }
  #percorso { padding-top: 32px; }
  .week__title { font-size: 30px; letter-spacing: -0.6px; }
  .step { grid-template-columns: minmax(0, 0.425fr) minmax(0, 0.575fr); gap: 56px; }
  .step:nth-child(even) { grid-template-columns: minmax(0, 0.575fr) minmax(0, 0.425fr); }
  .step:nth-child(even) .step__txt { order: 2; }
  .step:nth-child(even) .step__media { padding: 18px 18px 0 0; }
  .step:nth-child(even) .step__media::before { inset: 0 0 18px 18px; }
  .step__num { font-size: clamp(84px, 8.6vw, 124px); }
  .step__title { font-size: clamp(24px, 2.1vw, 30px); }
  .btn--gold { display: inline-flex; font-size: 27px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 269px)); justify-content: center; margin-top: 56px; }
  .proof { margin-top: 24px; padding: 8px 16px 8px 8px; }
  .proof__avatars img { width: 34px; height: 34px; }
  .expect { padding: 96px 0 48px; }
  /* foto cassette a misura fissa (non più "100% dell'altezza"), ancorata in alto: aprire un modulo non la ingrandisce */
  .expect::before {
    background-size: 770px auto;
    background-position: 100% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 110px, #000 1000px, transparent 1324px);
    mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 110px, #000 1000px, transparent 1324px);
  }
  .bonus::before, .bonus__wall {
    opacity: 0.44;
    background-size: 660px auto;
    background-repeat: repeat-y;
    -webkit-mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 min(22%, 520px), #000 calc(100% - min(22%, 520px)), transparent);
    mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 min(22%, 520px), #000 calc(100% - min(22%, 520px)), transparent);
  }
  .bonus::before { background-position: 100% 0; }
  .bonus__wall { background-position: 100% -420px; }
  .doubt { padding: 48px 0 120px; }
  .doubt h2 { font-size: clamp(44px, 5vw, 60px); }
  .bio { padding: 48px 0 120px; }
  .bio__grid { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); gap: clamp(36px, 6vw, 86px); }
  .bio h2 { font-size: clamp(44px, 5vw, 60px); }
  .bio__wall {
    opacity: 0.34;
    background-size: 660px auto;
    background-position: 100% -420px;
    -webkit-mask-image: linear-gradient(90deg, transparent 72%, #000 100%), linear-gradient(transparent, #000 90px, #000 200px, transparent 560px);
    mask-image: linear-gradient(90deg, transparent 72%, #000 100%), linear-gradient(transparent, #000 90px, #000 200px, transparent 560px);
  }
  .stats--bio { grid-template-columns: auto auto; justify-content: start; margin-top: 28px; padding: 22px 0 34px; } /* più spazio sotto: la barra in fondo sta un pelo più in basso */
  .stats--bio .stat { padding: 0 28px; }
  .stats--bio .stat:first-child { padding-left: 0; }
  .stats--bio .stat + .stat { border-left: 1px solid var(--line); border-top: 0; margin-top: 0; padding-top: 0; }
  .glowleft { padding: 48px 0 120px; }
  .conti__head { margin-bottom: 56px; }
  .conti__grid { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); gap: 56px; align-items: center; } /* titolo e testo al centro (in verticale) rispetto allo scontrino */
  .conti h2 { font-size: clamp(44px, 5vw, 60px); }
  .receipt { padding: 38px; }
  .doubt::before, .bio::before, .glowleft::before {
    opacity: 0.44;
    background-size: 660px auto;
    background-position: 100% 0;
    background-repeat: repeat-y;
    -webkit-mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 220px, #000 calc(100% - 320px), transparent);
    mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 220px, #000 calc(100% - 320px), transparent);
  }
  /* "Come nasce il Metodo": la fascia a sinistra parte già dall'alto (dissolvenza di 90px invece di 220px) */
  .bio::before {
    -webkit-mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 90px, #000 calc(100% - 320px), transparent);
    mask-image: linear-gradient(90deg, transparent 66%, #000 100%), linear-gradient(transparent, #000 90px, #000 calc(100% - 320px), transparent);
  }
  .expect > .container { max-width: 1320px; padding: 0 22px; } /* largo come la sezione "Chi lavora": la riga del titolo sta su due righe */
  .expect__grid { grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); gap: 72px; align-items: center; }
  .expect h2 { font-size: clamp(44px, 5vw, 60px); }
  .mods { margin-top: 56px; }
  .bonus { padding: 72px 0 120px; }
  .gifts { margin-top: 64px; }
  .gift { grid-template-columns: 55fr 45fr; gap: clamp(36px, 6vw, 88px); }
  .gift__copy { padding-right: 20px; }
  /* righe alternate: immagine a sinistra e testo a destra (su telefono il testo resta sopra e l'immagine in fondo) */
  .gift--flip { grid-template-columns: 45fr 55fr; }
  .gift--flip .gift__copy { order: 2; padding-right: 0; padding-left: 20px; }
  .gift--flip .gift__media { order: 1; }
}

/* schermi larghi: l'immagine è più alta dell'hero, quindi la centro in verticale */
@media (min-width: 1500px) {
  .hero::before { bottom: 50%; transform: translateY(50%); }
}

/* ---------- I 3 percorsi: sfondo dei bonus + tre card come Gabry (bordo neutro / verde / oro) e freccia verde verso la centrale ---------- */
.tiers-sec { padding: 56px 0 80px; }
.tiers-sec .path__head { margin-bottom: 0; }
.tiers-sec h2 { font-variant-numeric: lining-nums; } /* il "3" di Cormorant è di default "minuscolo" e scende sotto la riga */
.tiers { position: relative; display: grid; gap: 76px; max-width: 520px; margin: 68px auto 0; }
.tiers__feat { position: relative; display: flex; }
.tiers__feat .tier { flex: 1; min-width: 0; }

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0) 55%), #0a0a0a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.054), 0 0 24px rgba(255, 255, 255, 0.1), 0 0 60px rgba(255, 255, 255, 0.051), inset 0 0 60px rgba(255, 255, 255, 0.014);
  --chk: 43, 213, 118;
}
/* centrale (la più scelta): bordo verde con alone */
.tier--pick {
  border-color: #2bd576;
  background: radial-gradient(120% 60% at 50% 0%, rgba(43, 213, 118, 0.12), rgba(0, 0, 0, 0) 55%), #0a0a0a;
  box-shadow: 0 0 0 1px #2bd576, 0 0 32px rgba(43, 213, 118, 0.45), 0 0 90px rgba(43, 213, 118, 0.27), inset 0 0 80px rgba(43, 213, 118, 0.12);
}
/* terza: bordo oro, fondo caldo, rivetti agli angoli */
.tier--lux {
  --chk: 255, 176, 84;
  overflow: hidden;
  border: 2px solid #ffc98a;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 176, 84, 0.2), rgba(0, 0, 0, 0) 58%), radial-gradient(90% 50% at 50% 100%, rgba(255, 150, 60, 0.1), rgba(0, 0, 0, 0) 62%), linear-gradient(rgba(28, 19, 9, 0.96), rgba(9, 7, 4, 0.99));
  box-shadow: inset 0 0 0 1px rgba(255, 216, 154, 0.38), inset 0 0 90px rgba(255, 176, 84, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 34px rgba(255, 176, 84, 0.38), 0 0 110px rgba(255, 150, 60, 0.26), 0 26px 60px rgba(0, 0, 0, 0.6);
}
.tier--lux::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 30%, #f6dcae 0, #f6dcae 1.6px, #c08a3a 55%, #7a4e18 78%, rgba(0, 0, 0, 0) 82%) 0 0 / 11px 11px no-repeat,
    radial-gradient(circle at 35% 30%, #f6dcae 0, #f6dcae 1.6px, #c08a3a 55%, #7a4e18 78%, rgba(0, 0, 0, 0) 82%) 100% 0 / 11px 11px no-repeat,
    radial-gradient(circle at 35% 30%, #f6dcae 0, #f6dcae 1.6px, #c08a3a 55%, #7a4e18 78%, rgba(0, 0, 0, 0) 82%) 0 100% / 11px 11px no-repeat,
    radial-gradient(circle at 35% 30%, #f6dcae 0, #f6dcae 1.6px, #c08a3a 55%, #7a4e18 78%, rgba(0, 0, 0, 0) 82%) 100% 100% / 11px 11px no-repeat;
}

.tier__badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border-radius: 999px;
  background: #2bd576;
  color: #050505;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(43, 213, 118, 0.45);
}
.tier__name {
  align-self: flex-start;
  margin-bottom: 22px;
  padding: 6px 12px;
  border-radius: 17px; /* come una pillola, ma se il nome va su due righe (telefono) resta un rettangolo arrotondato */
  border: 1px solid rgba(255, 255, 255, 0.117);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tier--pick .tier__name { border-color: rgba(43, 213, 118, 0.65); background: rgba(43, 213, 118, 0.22); }
.tier--lux .tier__name { border-color: rgba(255, 216, 154, 0.9); background: linear-gradient(#ffd79a, #f0a63f); color: #1a1006; box-shadow: 0 0 18px rgba(255, 176, 84, 0.45); }
.tier__desc { margin: 0 0 16px; font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, 0.65); }
.tier__desc strong { color: #fff; font-weight: 700; }

.tier__price { margin: 0 0 16px; padding: 14px 0 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }
.tier__new { display: flex; justify-content: center; font-family: var(--font-display); font-size: 96px; line-height: 91px; letter-spacing: -0.01em; color: #fff; text-shadow: 0 0 22px rgba(255, 255, 255, 0.25); }
.tier__unit { align-self: flex-end; margin: 0 0 12px 8px; font-size: 0.42em; line-height: 1; letter-spacing: 0; color: rgba(255, 255, 255, 0.65); } /* "ore": come l'€ ma dopo il numero */
.tier__until { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.55; color: var(--accent); }
.tier--pick .tier__until { color: #2bd576; }
.tier--lux .tier__until { color: #ffd79a; }

.tier__list { display: grid; gap: 9px; margin: 0 0 18px; padding: 0; list-style: none; }
.tier__list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.38; color: #fff; }
.tier__list li strong { font-weight: 700; }
.tier__list li::before, .tier__list li::after { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; }
.tier__list li::before { border-radius: 50%; background: rgba(var(--chk), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--chk), 0.55), 0 0 14px rgba(var(--chk), 0.25); }
.tier__list li::after {
  background: rgb(var(--chk));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path d='M5 8.8l2.4 2.4L12 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 17px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><path d='M5 8.8l2.4 2.4L12 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 17px no-repeat;
}

.tier__plus { margin: 0 0 12px; padding: 8px 12px; font-size: 16px; line-height: 1.55; background: rgba(255, 176, 84, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 176, 84, 0.12); border-left: 3px solid #ffb054; }
.tier__plus strong { font-weight: 700; color: #fff; }

.tier__cta { margin-top: auto; padding-top: 8px; }
.tier__cta .btn { display: block; width: 100%; text-align: center; }
/* "Cosa include:" sotto la durata */
.tier__incl { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.4; color: #fff; }

/* pulsante: testo bianco, bordo arancio (corallo), interno #5E5300 sfumato (un po' più chiaro in alto) */
.btn--tier {
  padding: 14px 18px;
  border: 2px solid var(--accent);
  background: linear-gradient(#7a6c00, #5e5300);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-wrap: balance;
  cursor: pointer;
}
.btn--tier:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* popup con il modulo "Richiedi maggiori informazioni" */
html:has(.lead[open]) { overflow: hidden; }
.lead {
  width: min(92vw, 460px);
  max-height: 92dvh;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(198, 168, 120, 0.45);
  border-radius: 4px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(198, 168, 120, 0.12), rgba(0, 0, 0, 0) 55%), #0a0a0a;
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 60px rgba(198, 168, 120, 0.18), 0 30px 80px rgba(0, 0, 0, 0.7);
}
.lead::backdrop { background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(3px); }
.lead__panel { position: relative; padding: 36px 24px 28px; }
.lead__x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.75); cursor: pointer; }
.lead__x:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.lead__x svg { width: 14px; height: 14px; }
.lead__title { margin: 0 0 22px; padding-right: 30px; font-size: clamp(28px, 7vw, 34px); line-height: 1.1; color: var(--text); text-wrap: balance; }
.lead__form { display: grid; gap: 16px; }
.lead__field { display: grid; gap: 6px; }
.lead__field span { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lead__field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
}
.lead__field input:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(198, 168, 120, 0.22); }
.lead__check { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--muted); cursor: pointer; }
.lead__check a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lead__check a:hover { color: var(--champagne); }
.lead__check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--champagne); cursor: pointer; }
.lead__submit { width: 100%; margin-top: 6px; text-align: center; }
.lead__submit:disabled { opacity: 0.6; cursor: default; }
.lead__error { margin: 0; font-size: 14px; line-height: 1.45; color: #ff9b8c; }
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* campo trappola per i bot: fuori dallo schermo */

/* pulsante WhatsApp fisso in basso a sinistra */
.wa {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 22px rgba(37, 211, 102, 0.35);
  transition: transform 0.18s ease;
}
.wa svg { width: 30px; height: 30px; fill: currentColor; }
.wa:hover { transform: scale(1.07); }
.wa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lead__done { display: none; }
.lead__done p { margin: 0 0 22px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.lead.is-sent .lead__main { display: none; }
.lead.is-sent .lead__done { display: block; }

/* frecce verdi: una swirl sopra le card (desktop), una corta nello spazio sopra la card centrale (telefono) */
.tiers__arrow, .tiers__arrow-m {
  fill: none;
  stroke: #2bd576;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(43, 213, 118, 0.25)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  transition: opacity 0.2s ease;
}
.tiers__arrow { display: none; stroke-width: 3.5; }
.tiers__arrow-m { position: absolute; z-index: 3; left: calc(50% + 78px); top: -68px; width: 28px; height: auto; stroke-width: 5.2; }
.tiers__arrow path, .tiers__arrow-m path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); }
.tiers__arrow path:last-child, .tiers__arrow-m path:last-child { transition-delay: 0.85s; }
.tiers__arrow.is-pending, .tiers__arrow-m.is-pending { opacity: 0; }
.tiers__arrow.is-pending path, .tiers__arrow-m.is-pending path { stroke-dashoffset: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .tiers__arrow path, .tiers__arrow-m path { transition: none; }
}

/* il pulsante "Scopri i vantaggi…" porta alle card: si ferma con le card in alto (su desktop si vede anche la freccia) */
.tiers { scroll-margin-top: 28px; }

/* FAQ: stesso sfondo di "Facciamo i conti" (cassette a destra + gradiente champagne a sinistra in alto) e altri due gradienti champagne più in basso */
.faq {
  background:
    linear-gradient(var(--bg) 0, rgba(13, 13, 13, 0) 90px, rgba(13, 13, 13, 0) calc(100% - 90px), var(--bg) 100%),
    radial-gradient(80% 55% at 12% 0%, rgba(198, 168, 120, 0.1), rgba(13, 13, 13, 0) 62%),
    radial-gradient(70% 45% at 6% 55%, rgba(198, 168, 120, 0.1), rgba(13, 13, 13, 0) 64%),
    radial-gradient(80% 50% at 14% 100%, rgba(198, 168, 120, 0.1), rgba(13, 13, 13, 0) 62%),
    var(--bg);
}

/* box a fisarmonica come Gabry: fondo scuro caldo, bordo #292521, "+" in cerchio che ruota in "×" */
.faq__wrap { max-width: 880px; } /* 816px di contenuto, come Gabry */
.faq__head { margin: 0 0 44px; text-align: center; }
.faq h2 { margin: 20px auto 0; font-size: clamp(32px, 8.2vw, 60px); line-height: 1.08; color: var(--text); }
.faq__list { display: grid; gap: 10px; interpolate-size: allow-keywords; }
.faq__item {
  background: rgba(16, 12, 8, 0.94);
  border: 1px solid #292521;
  box-shadow: inset 0 0 0 1px rgba(255, 176, 84, 0.07);
  transition: background-color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.faq__item[open] { background: rgba(30, 20, 10, 0.96); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 20px; list-style: none; cursor: pointer; font-size: 19px; font-weight: 700; line-height: 1.3; color: #fff; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid rgba(255, 111, 89, 0.6); outline-offset: -2px; }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid rgba(255, 111, 89, 0.55); border-radius: 50%; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: rgba(255, 111, 89, 0.55); transition: background-color 0.2s; }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { transform: rotate(45deg); border-color: var(--accent); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: var(--accent); }
.faq__a { padding: 0 20px 22px; }
.faq__a p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--muted); }
@supports selector(details::details-content) {
  .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s ease, content-visibility 0.3s ease allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
}

/* fine sezione più corta, chiusa da un leggero bordo corallo */
.faq { padding-bottom: 40px; border-bottom: 1px solid rgba(255, 111, 89, 0.4); }

/* ---------- Footer: fondo #0d0d0d, dati legali in colonne, barra, copyright a sinistra e policy a destra (come Gabry) ---------- */
.footer { padding: 48px 0 96px; background: #0d0d0d; font-family: var(--font-body); } /* spazio in fondo: il pulsante WhatsApp fisso non copre il testo */
.footer__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.footer__fiscal { display: grid; gap: 20px; margin: 0; padding: 0 0 28px; }
.footer__fiscal > div { display: flex; flex-direction: column; gap: 2px; }
.footer__fiscal dt { font-size: 11px; font-weight: 600; line-height: 1.55; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247, 244, 239, 0.5); }
.footer__fiscal dd { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--text); }
.footer__rule { height: 1px; margin: 0; border: 0; background: rgba(255, 255, 255, 0.08); } /* leggera barra spaziatrice */
.footer__legal { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; }
.footer__copy { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--muted); }
.footer__policy { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer__policy a { padding: 4px 0; font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--muted); text-decoration: none; transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.footer__policy a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__policy a:focus-visible { outline: 2px solid rgba(255, 111, 89, 0.6); outline-offset: 3px; }
.footer__pref { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 1.55; color: var(--muted); cursor: pointer; transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.footer__pref:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__pref:focus-visible { outline: 2px solid rgba(255, 111, 89, 0.6); outline-offset: 3px; }

/* banner cookie: esiste solo se è attivo Clarity; "Rifiuta" e "Accetta" hanno lo stesso peso */
.cookie {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 18px 16px;
  border: 1px solid rgba(198, 168, 120, 0.45);
  border-radius: 4px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(198, 168, 120, 0.12), rgba(0, 0, 0, 0) 55%), #0a0a0a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 18px 60px rgba(0, 0, 0, 0.65);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0 0 14px; color: var(--muted); }
.cookie p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cookie__btns { display: flex; gap: 10px; }
.cookie__btn { flex: 1; padding: 11px 14px; border: 2px solid var(--accent); border-radius: 999px; background: linear-gradient(#7a6c00, #5e5300); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.cookie__btn:hover { filter: brightness(1.1); }
.cookie__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (min-width: 800px) {
  .tiers-sec { padding: 72px 0 120px; }
  .tiers { margin-top: 84px; max-width: 560px; scroll-margin-top: 48px; }
  .tiers-sec h2 { font-size: clamp(44px, 5vw, 60px); }
  .faq h2 { font-size: clamp(44px, 5vw, 60px); }
  .faq__head { margin-bottom: 64px; }
  .faq { padding-bottom: 64px; }
  .footer { padding: 72px 0 104px; }
  .wa { left: 24px; bottom: 24px; width: 60px; height: 60px; }
  .wa svg { width: 32px; height: 32px; }
  .footer__fiscal { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; padding-bottom: 32px; }
  .footer__legal { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
/* tre colonne affiancate: la freccia scende dall'alto dentro la card centrale */
@media (min-width: 1100px) {
  .tiers-sec > .container { max-width: 1320px; }
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; margin-top: 160px; scroll-margin-top: 190px; }
  .tiers__feat .tier { height: 100%; }
  .tiers__arrow-m { display: none; }
  .tiers__arrow { display: block; position: absolute; z-index: 3; left: calc(50% + 84px); top: -132px; width: 84px; height: 166px; transform: rotate(14deg); }
}

/* desktop stretto: scurisco un po' il lato del testo, così i fogli volanti non lo toccano */
@media (min-width: 800px) and (max-width: 1299px) {
  .hero::after {
    background:
      linear-gradient(90deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.4) 35%, rgba(13, 13, 13, 0) 55%),
      linear-gradient(rgba(13, 13, 13, 0.35), rgba(13, 13, 13, 0) 26%, rgba(13, 13, 13, 0) 72%, var(--bg) 100%);
  }
}