/* ═══════════════════════════════════════════════════════════════════════════
   XP-L4B — homepage
   Built on the Nocturne token sheet (css/nocturne.css). Everything neutral —
   grounds, borders, radii, shadows, the button and input components — comes
   from the system. The two brand colours and the display face below are the
   only brand overrides, and they come from the XP-L4B logo book.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --brand-mint: #65BFB0;
  --brand-blue: #2F92B3;
  --font-display: "Orbitron", "Inter", system-ui, sans-serif;

  --shell-width: 1180px;
  --shell-pad: 28px;
  /* Measured from the real header by js/main.js — it wraps to two or three
     rows on narrow screens and grows again in English, so anything that has to
     clear it reads this rather than a guessed number. */
  --header-height: 50px;

  --line: color-mix(in srgb, var(--color-text) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--color-text) 12%, transparent);
  --text-72: color-mix(in srgb, var(--color-text) 72%, transparent);
  --text-66: color-mix(in srgb, var(--color-text) 66%, transparent);
  --text-60: color-mix(in srgb, var(--color-text) 60%, transparent);
  --text-45: color-mix(in srgb, var(--color-text) 45%, transparent);
  --text-42: color-mix(in srgb, var(--color-text) 42%, transparent);
  --text-35: color-mix(in srgb, var(--color-text) 35%, transparent);
}

html {
  /* iOS and Android bounce past the ends of the document, and during that
     bounce the browser drags position:fixed layers — the animated background
     among them — leaving a bare strip behind. Refusing the overscroll at the
     root is the only thing that stops it; script cannot reach it. */
  overscroll-behavior-y: none;
  background: var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent-400); text-decoration: none; }
a:hover { color: var(--color-accent-300); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* The UA rule for [hidden] is display:none, but any class that sets display
   outruns it and the element stays visible while the script believes it is
   hidden — which is how the map viewer's prompt ended up printed over the map.
   This makes the attribute win wherever it is used. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  /* parked above the viewport rather than off to the left: with no
     overflow-x:hidden on the body any more, nothing should sit outside the
     horizontal edges at all */
  position: absolute; top: 12px; left: 12px; z-index: 100;
  transform: translateY(-250%);
  padding: 10px 16px; background: var(--color-surface);
  border: 1px solid var(--color-accent); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: 12px;
}
.skip-link:focus { transform: none; }

/* ── Layout shell ──────────────────────────────────────────────────────── */

.shell {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding-inline: var(--shell-pad);
}

/* The title's shards are absolutely positioned and fly outward, and anything
   that overflows to the right grows the document. Clipped on that axis the
   pieces simply leave the screen — which is what they are doing anyway —
   and the page can never gain a sideways scrollbar. `clip` rather than
   `hidden` on purpose: it makes no scroll container, so the sticky panel
   further down still sticks to the viewport. */
.page { position: relative; z-index: 1; overflow-x: clip; }

section[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

/* ── Shared type ───────────────────────────────────────────────────────── */

.kicker {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  margin: 0 0 18px;
}
.kicker--mint { color: var(--brand-mint); }
.kicker--blue { color: var(--brand-blue); }
.kicker--accent { color: var(--color-accent-400); }
.kicker--muted { color: var(--text-45); }
.kicker--tight { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 14px; }
.kicker--tiny {
  display: block; font-size: 9px; letter-spacing: 0.16em;
  color: var(--text-42); margin-bottom: 8px;
}

.section-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-60);
  margin: 0 0 44px;
  max-width: 60ch;
}
.section-lede--wide {
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-66);
  max-width: 62ch;
}

.btn--display {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding: 14px 22px;
}
.btn--small { font-size: 11px; padding: 11px 18px; }

/* ── Animated background ───────────────────────────────────────────────── */

#bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  /* Its own compositing layer. The header above it carries a backdrop-filter,
     and on iOS a backdrop-filter neighbouring an unpromoted fixed layer can
     get that layer dropped and never repainted — which looks exactly like the
     background switching off and staying off. Promoting it keeps it out of
     that shared surface. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
@media (pointer: coarse) {
  /* overhangs the viewport, so there is no bare edge to expose if the browser
     drags the layer anyway (top and height both set, so bottom is ignored) */
  #bg-canvas { top: -8vh; height: 116vh; }
}

#asteroid-layer {
  position: fixed; inset: 0;
  z-index: 35; pointer-events: none; overflow: hidden;
}

@keyframes xpl4b-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* The toast is the only user of this one, and it is centred by transform, so
   the centring has to travel through every step — a bare `transform: none`
   here would drop it and slide the toast off to the right. */
@keyframes xpl4b-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.96); }
  12%  { opacity: 1; transform: translateX(-50%); }
  88%  { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}
@keyframes xpl4b-float { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-46px); } }

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 12px var(--shell-pad);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px 24px;
}
.site-header__brand { flex: none; display: block; }
.site-header__brand img { height: 26px; width: auto; }

.site-nav {
  display: flex; flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13px; letter-spacing: 0.01em;
  flex: 1 1 auto;
}
.site-nav a { color: var(--text-72); white-space: nowrap; }
.site-nav a:hover { color: var(--color-text); }

.hud { display: flex; align-items: center; gap: 14px; flex: none; }
.hud__score { display: flex; align-items: center; gap: 6px; }
.hud__score-glyph, .hud__score-value {
  font-family: var(--font-display);
  color: var(--text-35);
  transition: color .3s ease;
}
.hud__score-glyph { font-size: 13px; }
.hud__score-value { font-size: 11px; letter-spacing: 0.06em; min-width: 26px; }
.hud__score.is-scoring .hud__score-glyph,
.hud__score.is-scoring .hud__score-value { color: var(--brand-mint); }

.hud__level {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--color-accent-400);
}
.hud__bar {
  width: 100px; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
  overflow: hidden;
}
.hud__bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-mint), var(--brand-blue), var(--color-accent-500));
  transition: width .5s cubic-bezier(.2, .7, .3, 1);
}

.lang-toggle {
  flex: none;
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.1em;
  padding: 6px 10px; min-height: auto;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  display: flex; flex-wrap: wrap;
  gap: 48px 56px; align-items: center;
  padding-top: calc(var(--header-height) + clamp(60px, 9vw, 120px));
  padding-bottom: 80px;
}
.hero__text { flex: 1 1 400px; min-width: 0; animation: xpl4b-fade .7s ease both; }
.hero__text .kicker { margin-bottom: 22px; }
.hero__text h1 {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.08;
  margin: 0 0 24px;
}

/* The title's shatter. js/hero-title.js writes one number per letter, --e,
   from 0 (whole) to 1 (gone); everything below is that number multiplied out.
   The letter box itself never moves, so the heading holds its lines and the
   page does not reflow while the pieces are in the air. */
.shatter__w { display: inline-block; white-space: nowrap; }
.shatter__l {
  --e: 0;
  display: inline-block;
  position: relative;
}
/* the intact glyph — what is read at the top of the page, handed over to the
   shards within the first few percent of the travel */
.shatter__g {
  display: inline-block;
  opacity: calc(1 - min(1, var(--e) * 12));
}
.shatter__p {
  position: absolute; inset: 0;
  transform:
    translate3d(calc(var(--dx, 0) * var(--e) * 1px), calc(var(--dy, 0) * var(--e) * 1px), 0)
    rotate(calc(var(--rot, 0) * var(--e) * 1deg))
    scale(calc(1 - 0.55 * var(--e)));
  opacity: calc(min(1, var(--e) * 12) * clamp(0, (1 - var(--e)) * 1.35, 1));
}
/* debris picks up the two brand colours on the way out */
.shatter__p--1 { color: color-mix(in srgb, var(--color-text) 74%, var(--brand-mint)); }
.shatter__p--2 { color: color-mix(in srgb, var(--color-text) 74%, var(--brand-blue)); }

/* A little depth of field, where there is a machine to pay for it: a filter
   per letter is more than a phone should be asked to repaint every frame. */
@media (min-width: 900px) and (pointer: fine) {
  .shatter__l { filter: blur(calc(var(--e) * 2.2px)); }
}

@media (prefers-reduced-motion: reduce) {
  .shatter__g { opacity: 1; }
  .shatter__p { display: none; }
}

.hero__lede {
  font-size: 17px; line-height: 1.62;
  color: var(--text-72);
  max-width: 52ch; margin: 0 0 34px;
  text-wrap: pretty;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero__die {
  flex: 1 1 260px; min-width: 0;
  animation: xpl4b-fade .7s .12s ease both;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.die {
  width: min(268px, 72vw); height: min(268px, 72vw);
  flex: none; padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-accent-500) 40%, transparent);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--color-accent-700) 40%, transparent), transparent);
  color: var(--color-text);
  cursor: pointer; position: relative;
  box-shadow: var(--shadow-md);
  transition: transform .3s ease, border-color .3s ease;
}
.die:hover { border-color: var(--color-accent-500); transform: translateY(-4px); }
.die canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.die__label {
  position: absolute; left: 0; right: 0; bottom: 22px;
  font-family: var(--font-display);
  font-size: 9px; letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  text-align: center;
}
.die__quote {
  font-size: 13px; line-height: 1.55;
  color: var(--text-60);
  text-align: center; max-width: 34ch;
  min-height: 60px; margin: 0;
}

/* ── Partner ───────────────────────────────────────────────────────────── */

.partners { padding-bottom: 80px; }
.partners__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
  gap: 10px;
}
.partners__cell {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  height: 78px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
  transition: border-color .3s ease, transform .3s ease;
}
.partners__cell:hover { border-color: var(--color-accent-500); transform: translateY(-3px); }
.partners__cell img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: .7;
  transition: opacity .3s ease;
}
.partners__cell:hover img { opacity: 1; }

/* ── Dati Salesforce ───────────────────────────────────────────────────── */

.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-section) 55%, transparent),
    color-mix(in srgb, var(--color-section) 25%, transparent));
}
.stats__grid {
  padding-block: 52px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 36px;
}
.stat p { margin: 0; }
.stat__value { font-family: var(--font-display); font-size: 40px; line-height: 1; }
.stat__value--mint { color: var(--brand-mint); }
.stat__value--blue { color: var(--brand-blue); }
.stat__value--accent { color: var(--color-accent-400); }
.stat__label { font-size: 13px; color: var(--text-66); margin-top: 8px; line-height: 1.5; }
.stat--source {
  border-left: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  padding-left: 24px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; line-height: 1.6;
  color: var(--text-42);
}

/* ── Il corteo che scorre ──────────────────────────────────────────────── */

.crowd {
  --crowd-gap: 44px;      /* space between figures — desktop widens it below */
  --crowd-height: 92px;
  overflow: hidden;
  padding-block: 30px 6px;
  /* they walk in and out of the edges rather than being cut off at them */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  /* the row can be turned by hand: take horizontal gestures, leave vertical
     ones to the page so a finger can still scroll straight through the band */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.crowd.is-grabbing { cursor: grabbing; }

.crowd__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.crowd__set {
  display: flex;
  align-items: flex-end;
  gap: var(--crowd-gap);
  padding-right: var(--crowd-gap);  /* keeps the spacing even across the seam */
}
.crowd__set picture { display: contents; }
.crowd__person {
  height: var(--crowd-height);
  width: auto;
  flex: none;
  image-rendering: pixelated;       /* pixel art: keep the edges crisp */
  opacity: .92;
  -webkit-user-drag: none;          /* dragging the row, not the picture */
  pointer-events: none;
}

@media (min-width: 900px) {
  /* far more room between them on a wide screen, as asked */
  .crowd {
    --crowd-gap: 170px;
    --crowd-height: 128px;
    padding-block: 44px 10px;
  }
}

/* ── Progressi ─────────────────────────────────────────────────────────── */

.progress { padding-block: 80px 20px; }
.progress h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin: 0 0 12px; }
.progress .section-lede { max-width: 56ch; margin-bottom: 40px; }

.badges {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 14px;
}
.badge {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
  transition: border-color .4s ease, background .4s ease;
}
.badge__glyph, .badge__name {
  display: block;
  font-family: var(--font-display);
  color: color-mix(in srgb, var(--color-text) 30%, transparent);
  transition: color .4s ease;
}
.badge__glyph { font-size: 26px; line-height: 1; margin-bottom: 14px; }
.badge__name { font-size: 13px; margin-bottom: 7px; }
.badge__how {
  display: block;
  font-size: 12.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.badge.is-unlocked {
  border-color: color-mix(in srgb, var(--color-accent-500) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent-500) 10%, transparent);
}
.badge.is-unlocked .badge__glyph,
.badge.is-unlocked .badge__name { color: var(--color-accent-400); }

/* ── Servizi ───────────────────────────────────────────────────────────── */

.services { padding-block: 70px 90px; }
.services h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; margin: 0 0 14px; max-width: 22ch; }
.services .section-lede { margin-bottom: 44px; }

.services__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
}
.catalogue {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  padding: 34px 30px;
}
.catalogue h3 {
  font-size: 20px; line-height: 1.3;
  margin: 0 0 24px;
}

/* On one column the two catalogues are seventeen entries stacked end to end,
   and everything under them is a long scroll away. There they fold: the
   heading stays, the list goes behind a toggle. The fold is added by script
   and only under the width where the columns stack — with no script the
   button never appears and both lists are open, as they are on a wide
   screen. */
.catalogue__toggle {
  display: none;
  width: 100%;
  margin: 0 0 4px;
  padding: 12px 0;
  border: 0; border-top: 1px solid var(--line-strong);
  background: transparent;
  color: var(--color-accent-300);
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.16em;
  cursor: pointer;
  justify-content: space-between; align-items: center; gap: 14px;
}
.catalogue.is-folded .catalogue__toggle { display: flex; }
/* bigger and brighter than the ticks on the entries inside it, so the two
   levels of open-and-close do not read as the same control */
.catalogue__toggle-tick { font-size: 15px; color: var(--color-accent-400); }
.catalogue.is-folded .catalogue__body { overflow: hidden; transition: max-height .4s ease; }

.accordion__item { margin: 0; font-weight: inherit; }
.accordion__trigger {
  width: 100%; text-align: left;
  padding: 13px 0;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
  background: transparent;
  color: var(--color-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14.5px; line-height: 1.4;
  cursor: pointer;
  display: flex; justify-content: space-between; gap: 14px;
  align-items: baseline;
}
.accordion__trigger:hover { color: var(--color-accent-300); }
.accordion__tick {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--text-35);
  transition: color .2s ease;
}
.accordion__trigger[aria-expanded="true"] .accordion__tick { color: var(--color-accent-500); }

.accordion__panel {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.accordion__panel p {
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-60);
  margin: 12px 0 6px;
}

/* ── Mappe di gioco ────────────────────────────────────────────────────── */

.maps { padding-block: 30px 90px; }
.maps h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; margin: 0 0 18px; max-width: 26ch; }

.maps__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
}
.map-card {
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left;
  font-family: "Inter", system-ui, sans-serif;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  padding: 28px 26px;
  color: inherit;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.map-card:hover { transform: translateY(-5px); border-color: var(--color-accent-500); }
.map-card.is-active {
  border-color: var(--color-accent-500);
  background: color-mix(in srgb, var(--color-accent-500) 12%, transparent);
}
.map-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--map-color, var(--color-text));
  margin-bottom: 14px;
}
.map-card__use {
  display: block;
  font-size: 13px;
  color: var(--color-accent-300);
  margin-bottom: 14px;
}
.map-card__body {
  display: block;
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-66);
  margin-bottom: 16px;
}
.map-card__cue {
  display: block; margin-top: auto;
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.map-card.is-active .map-card__cue { color: var(--brand-mint); }

.viewer {
  margin-top: 26px;
  border: 1px solid color-mix(in srgb, var(--color-accent-500) 40%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  overflow: hidden;
  animation: xpl4b-fade .4s ease both;
}
/* when the window is moved in among the cards on a narrow screen */
.maps__grid > .viewer { grid-column: 1 / -1; }

.viewer__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}
.viewer__dots { display: flex; gap: 5px; flex: none; }
.viewer__dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 22%, transparent);
}
.viewer.is-loaded .viewer__dot--live { background: var(--brand-mint); }
.viewer__path {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--text-60);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.viewer__status {
  margin: 0; flex: none;
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--color-accent-400);
}
.viewer.is-ready .viewer__status { color: var(--brand-mint); }
.viewer__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
}
.viewer__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viewer__ask {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center;
}
.viewer__ask p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.3;
  color: var(--color-text);
  max-width: 26ch;
}

/* ── Prodotti ──────────────────────────────────────────────────────────── */

.products { padding-block: 30px 40px; }
.products h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; margin: 0 0 44px; max-width: 24ch; }

.products__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
}
.product {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  padding: 36px 32px;
}
.product--featured {
  border-color: color-mix(in srgb, var(--color-accent-500) 40%, transparent);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--color-section) 45%, transparent),
    color-mix(in srgb, var(--color-surface) 75%, transparent));
}
.product__name { font-size: 30px; margin: 0 0 16px; color: var(--color-text); }
/* L'indirizzo sotto il nome del prodotto. Sale al posto del margine del nome,
   così la coppia nome + indirizzo resta un blocco solo. */
.product__link {
  /* La scheda è una colonna flex, che di suo stira i figli per tutta la
     larghezza: senza questo il link resterebbe alto una riga ma largo quanto
     la scheda, e si cliccherebbe anche nel vuoto alla sua destra. */
  align-self: flex-start;
  margin: -10px 0 18px;
  font-size: 13.5px;
}
.product__body {
  font-size: 15px; line-height: 1.62;
  color: var(--text-72);
  margin: 0 0 22px;
}
.product__points {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.product__points li {
  display: flex; gap: 11px; align-items: baseline;
  font-size: 13.5px; line-height: 1.5;
  color: var(--text-66);
}
.product__points li::before {
  content: "◆";
  flex: none;
  font-size: 11px;
  color: var(--point-color);
}
.product__points--mint { --point-color: var(--brand-mint); }
.product__points--blue { --point-color: var(--brand-blue); }

.product__media {
  border-top: 1px solid var(--line-strong);
  padding-top: 20px;
  display: flex; flex: 1;
  justify-content: center; align-items: center;
}
/* Il mockup è cliccabile: il link avvolge l'immagine senza aggiungere una
   scatola: prende la stessa larghezza e lascia il resto alla figura. */
.product__media-link {
  display: block;
  width: 100%; max-width: 340px;
  border-radius: var(--radius-md);
}
.product__media-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; }
.product__mockup {
  width: 100%; max-width: 340px; height: auto;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .55));
  transition: transform .3s ease, filter .3s ease;
}
.product__media-link:hover .product__mockup {
  transform: translateY(-5px);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6));
}
.product__media--fan {
  padding-top: 26px;
  min-height: 300px;
  max-width: 100%;
}
.product__media--fan picture { display: contents; }
/* Il ventaglio è tutto un link. La disposizione passa qui dal contenitore:
   così il link resta una scatola vera — raggiungibile da tastiera e presente
   nell'albero di accessibilità, che display:contents su un <a> non garantisce
   — e i margini negativi che sovrappongono le carte lavorano dentro di lui. */
.card-fan {
  display: flex; width: 100%;
  justify-content: center; align-items: center;
}
.card-fan:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 10px; border-radius: var(--radius-md); }

.card-fan__item {
  height: auto;
  transform-origin: bottom center;
  transition: transform .35s ease;
}
.card-fan__item--left {
  width: 34%; margin-right: -11.5%;
  transform: rotate(-13deg) translateY(16px);
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .6));
}
.card-fan__item--centre {
  width: 38%; position: relative; z-index: 2;
  transform: rotate(-1deg);
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .65));
}
.card-fan__item--right {
  width: 34%; margin-left: -11.5%;
  transform: rotate(11deg) translateY(16px);
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .6));
}
.card-fan__item--left:hover { transform: rotate(-13deg) translateY(-4px); }
.card-fan__item--centre:hover { transform: rotate(-1deg) translateY(-14px); }
.card-fan__item--right:hover { transform: rotate(11deg) translateY(-4px); }

/* ── VR / AR ───────────────────────────────────────────────────────────── */

.vr {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 44px; align-items: center;
  padding-block: 50px 90px;
}
.vr h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; margin: 0 0 20px; }
.vr .section-lede {
  font-size: 16px; line-height: 1.62;
  color: var(--text-66);
  max-width: 48ch; margin-bottom: 26px;
}
.vr .btn { padding: 13px 20px; }
.vr__media {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  background: radial-gradient(110% 85% at 50% 30%,
    color-mix(in srgb, var(--color-section) 60%, transparent),
    color-mix(in srgb, var(--color-surface) 70%, transparent));
  padding: 34px;
  display: flex; align-items: center; justify-content: center;
}
.vr__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .55));
}

/* ── Possibile formato ─────────────────────────────────────────────────── */

.format {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-section) 45%, transparent), transparent);
  padding-block: 90px 100px;
}
.format h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; margin: 0 0 10px; max-width: 24ch; }
.format .section-lede { font-size: 15px; color: color-mix(in srgb, var(--color-text) 62%, transparent); max-width: 60ch; }

.format__layout {
  display: flex; flex-wrap: wrap;
  gap: 36px 40px; align-items: flex-start;
}
.questions {
  flex: 1 1 380px; min-width: 0;
  display: flex; flex-direction: column; gap: 26px;
}
.question { border: 0; margin: 0; padding: 0; min-width: 0; }
.question__label {
  padding: 0;
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin-bottom: 12px;
}
.question__options { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 10px 15px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: "Inter", system-ui, sans-serif;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  background: transparent;
  color: var(--text-72);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--color-accent-500); }
.chip[aria-pressed="true"] {
  border-color: var(--color-accent-500);
  background: color-mix(in srgb, var(--color-accent-500) 18%, transparent);
  color: var(--color-accent-100);
}

.recommendation {
  flex: 1 1 300px; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  padding: 30px 28px;
  position: sticky; top: calc(var(--header-height) + 16px);
}
.recommendation__title {
  font-size: 20px; line-height: 1.25;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  transition: color .3s ease;
}
.recommendation.is-resolved .recommendation__title { color: var(--brand-mint); }
.recommendation__body {
  font-size: 14px; line-height: 1.62;
  color: var(--text-66);
  margin: 0 0 22px; min-height: 66px;
}
.recommendation__rule {
  height: 1px;
  background: var(--line-strong);
  margin-bottom: 20px;
}
.recommendation__label {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: 7px;
}
.recommendation .input { margin-bottom: 14px; padding: 11px 13px; }
.recommendation .btn-block { padding: 13px; margin-top: 0; }
/* The addresses the panel ends at. */
.contact-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.contact-list__link { font-size: 15px; }

.recommendation__note {
  font-size: 11.5px;
  color: var(--text-42);
  margin: 12px 0 0; line-height: 1.5;
}

/* ── Shop ──────────────────────────────────────────────────────────────── */

.shop {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-section) 40%, transparent), transparent);
  padding-block: 90px 100px;
}
.shop__head {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.shop__head .kicker { margin-bottom: 0; }
.shop__link { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.04em; }
.shop h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; margin: 0 0 18px; max-width: 24ch; }
.shop .section-lede { max-width: 58ch; margin-bottom: 48px; }

.merch {
  display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--color-accent-500) 40%, transparent);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 50% 6%,
    color-mix(in srgb, var(--color-text) 8%, transparent),
    color-mix(in srgb, var(--color-surface) 80%, transparent));
  padding: 36px 32px 34px;
  margin-bottom: 40px;
  color: var(--color-text);
  transition: border-color .35s ease;
}
.merch:hover { border-color: var(--color-accent-500); color: var(--color-text); }
.merch__title { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; margin: 0 0 6px; }
.merch__sub {
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0;
}
.merch__fan {
  display: flex; flex: 1;
  justify-content: center; align-items: flex-end;
  min-height: 0;
  padding: 22px 12px 18px;
  max-width: 100%;
}
.merch__fan picture { display: contents; }
.merch__item {
  object-fit: contain;
  object-position: bottom center;
  transform-origin: bottom center;
  transition: transform .35s ease;
}
.merch__item--left {
  width: 34%; height: clamp(130px, 22vw, 250px);
  margin-right: -8%;
  transform: rotate(-9deg);
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .55));
}
.merch__item--centre {
  width: 38%; height: clamp(148px, 25vw, 282px);
  position: relative; z-index: 2;
  transform: translateY(-18px);
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .6));
}
.merch__item--right {
  width: 34%; height: clamp(130px, 22vw, 250px);
  margin-left: -8%;
  transform: rotate(8deg);
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .55));
}
.merch__item--left:hover { transform: rotate(-9deg) translateY(-10px); }
.merch__item--centre:hover { transform: translateY(-34px); }
.merch__item--right:hover { transform: rotate(8deg) translateY(-10px); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);
}
.site-footer__grid {
  padding-block: 80px 70px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 44px;
}
.site-footer__logo { height: 82px; width: auto; margin-bottom: 22px; }
.site-footer__payoff {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.14em;
  color: var(--color-accent-400);
  margin: 0 0 14px;
}
.site-footer__about {
  font-size: 14px; line-height: 1.65;
  color: var(--text-60);
  margin: 0; max-width: 40ch;
}
.site-footer__contact {
  display: flex; flex-direction: column;
  font-style: normal;
  font-size: 14.5px; line-height: 1.9;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.site-footer__nav {
  display: flex; flex-direction: column; gap: 9px;
  font-size: 14.5px;
}
.site-footer__legal { border-top: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent); }
.site-footer__legal-inner {
  padding-block: 20px;
  font-size: 12px;
  color: var(--text-35);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.site-footer__legal-inner p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
/* I separatori li mette la CSS, non il testo: appartengono a una voce, quindi
   vanno a capo con lei e non restano mai soli in fondo a una riga. */
.site-footer__legal-inner p span + span::before {
  content: "·";
  margin-right: 10px;
  color: color-mix(in srgb, var(--color-text) 22%, transparent);
}
.site-footer__domain { font-family: ui-monospace, Menlo, monospace; }

/* ── Toast ─────────────────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 60; pointer-events: none;
  animation: xpl4b-pop 3s ease both;
  border: 1px solid var(--color-accent-500);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  border-radius: var(--radius-md);
  padding: 13px 20px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 32px);
}
.toast p { margin: 0; }
.toast__glyph { font-family: var(--font-display); font-size: 20px; color: var(--brand-mint); }
.toast__kicker {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--color-accent-400);
}
.toast__text { font-size: 13.5px; color: var(--color-text); margin-top: 3px; }

/* ── Asteroids (created by js/asteroids.js) ────────────────────────────── */

.asteroid {
  position: absolute; left: 0; top: 0;
  pointer-events: auto; cursor: crosshair;
  will-change: transform;
}
.asteroid svg { overflow: visible; }
.asteroid__score {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--brand-mint);
  pointer-events: none;
  animation: xpl4b-float .9s ease-out both;
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root { --shell-pad: 20px; }
  .site-header__inner { padding-inline: 20px; gap: 10px 16px; }
  /* logo, HUD and language on one row; the nav takes the row below, which is
     one fewer row than letting all four wrap in source order */
  .site-nav { order: 3; flex: 1 0 100%; font-size: 12px; gap: 8px 18px; }
  .hud { margin-left: auto; }
  .recommendation { position: static; }
  .stat--source { border-left: 0; padding-left: 0; }
}

@media (max-width: 560px) {
  /* the header already wraps; keep each row as short as it can be */
  .site-header__brand img { height: 22px; }
  .hud { gap: 10px; }
  .hud__bar { width: 64px; }
}

@media (max-width: 560px) {
  /* Below about 410px the auto-fit track no longer fits two badges and they
     fall into one tall column, and even where two do fit the tile is roomier
     than it needs to be. Two per row, and the tile tightened to earn the
     narrower cell: less padding, a smaller glyph, tighter leading. */
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .badge { padding: 13px 12px; border-radius: var(--radius-md); }
  .badge__glyph { font-size: 18px; margin-bottom: 7px; }
  .badge__name { font-size: 11.5px; margin-bottom: 3px; }
  .badge__how { font-size: 11px; line-height: 1.38; }
  .progress { padding-block: 56px 12px; }
  .progress .section-lede { margin-bottom: 28px; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .toast { animation: none; }
}