/* JoystickDen — foglio di stile principale */

:root {
  --ink: #000000;
  --paper: #ffffff;
  --ash: #eeeeee;
  --concrete: #d9d9d9;
  --charcoal: #333333;
  --slate: #595959;
  --stone: #808080;
  --accent: #7ffeb1;

  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Anton", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 28px;

  --track: 0.06em;

  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-60: 60px;
  --sp-120: 120px;

  --page: 1200px;
  --radius-card: 8px;
  --radius-img: 8px;
  --radius-btn: 40px;
  --radius-tag: 100px;
  --radius-nav: 20px;
  --header-h: 64px;
}

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.4;
  letter-spacing: var(--track);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: var(--track); }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.section--dark :focus-visible,
.header :focus-visible,
.footer :focus-visible { outline-color: var(--accent); }

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

.container {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--sp-20);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--sp-32); }
}

.section {
  padding-block: var(--sp-60);
  border-top: 1px solid var(--concrete);
}

@media (min-width: 768px) {
  .section { padding-block: 80px; }
}

.section--dark {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}

.section--flush { border-top: 0; }

.section__kicker {
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--slate);
  margin-bottom: var(--sp-12);
}

.section--dark .section__kicker { color: var(--stone); }

.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 9vw, 64px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  max-width: 18ch;
}

.section__lead {
  margin-top: var(--sp-16);
  max-width: 62ch;
  font-size: var(--text-body);
  color: var(--charcoal);
}

.section--dark .section__lead { color: var(--concrete); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  margin-bottom: var(--sp-40);
}

@media (min-width: 1024px) {
  .section__head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .section__head--split .section__lead { margin-top: var(--sp-12); }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  border-radius: var(--radius-btn);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover { background: var(--charcoal); border-color: var(--charcoal); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--invert {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.btn--invert:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.btn--ghost-invert {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}

.btn--ghost-invert:hover { background: var(--paper); color: var(--ink); }

.btn--wide { width: 100%; }

.btn__icon { width: 14px; height: 14px; flex: none; }

.tag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-tag);
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--ink);
}

.tag--line {
  background: transparent;
  color: var(--slate);
  border: 1px solid var(--concrete);
}

/* ---------- header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: var(--header-h);
}

.logo {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  color: var(--paper);
  white-space: nowrap;
}

.logo__accent { color: var(--accent); }

.logo--ink { color: var(--ink); }

.header__nav { display: none; }

.header__list {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
}

.header__link {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  text-decoration: none;
  color: var(--paper);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.header__link:hover { border-bottom-color: var(--accent); }

.header__cta { display: none; }

.burger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  background: transparent;
  border: 1px solid var(--paper);
  border-radius: var(--radius-nav);
  color: var(--paper);
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
}

.burger__bars { width: 16px; height: 12px; position: relative; display: inline-block; }

.burger__bars::before,
.burger__bars::after,
.burger__bars span {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
}

.burger__bars::before { top: 0; }
.burger__bars span { top: 5px; }
.burger__bars::after { bottom: 0; }

.header__drawer {
  display: none;
  background: var(--ink);
  border-top: 1px solid var(--charcoal);
  padding-block: var(--sp-16) var(--sp-24);
}

.header__drawer.is-open { display: block; }

.header__drawer-list { list-style: none; display: grid; gap: 2px; }

.header__drawer-link {
  display: block;
  padding: 12px 0;
  font-size: var(--text-subheading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  text-decoration: none;
  color: var(--paper);
  border-bottom: 1px solid var(--charcoal);
}

.header__drawer-link:hover { color: var(--accent); }

@media (min-width: 1024px) {
  .header__nav { display: block; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
  .header__drawer { display: none !important; }
}

@media (min-width: 1280px) {
  .header__list { gap: 22px; }
  .header__link { font-size: var(--text-caption); }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-48) var(--sp-60);
  background: var(--paper);
}

.hero__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.09;
  filter: grayscale(1);
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero__grid { display: grid; gap: var(--sp-40); }

.hero__display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(54px, 15vw, 106px);
  line-height: 0.83;
  letter-spacing: 0.005em;
  margin: 0;
}

.hero__display-line { display: block; }

.hero__display-line--out {
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
}

.hero__text {
  margin-top: var(--sp-24);
  font-size: var(--text-subheading);
  color: var(--charcoal);
  max-width: 46ch;
}

.hero__actions {
  margin-top: var(--sp-32);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.hero__facts {
  margin-top: var(--sp-32);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-24);
  list-style: none;
  border-top: 1px solid var(--concrete);
  padding-top: var(--sp-20);
}

.hero__fact-value {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
}

.hero__fact-label {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate);
}

.hero__stage { display: flex; flex-direction: column; gap: var(--sp-20); align-items: center; }

.phone {
  width: 236px;
  background: var(--ink);
  border-radius: var(--radius-btn);
  padding: 14px;
  position: relative;
}

.phone__notch {
  width: 62px;
  height: 5px;
  border-radius: var(--radius-tag);
  background: var(--charcoal);
  margin: 0 auto 10px;
}

.phone__screen {
  border-radius: var(--radius-nav);
  overflow: hidden;
  background: var(--charcoal);
}

.phone__screen img { width: 100%; height: auto; }

.phone__bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.phone__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.showcase {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-8);
}

.showcase__item {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-img);
  overflow: hidden;
  border: 1px solid var(--concrete);
  background: var(--ash);
}

@media (min-width: 768px) {
  .hero { padding-block: var(--sp-60) 80px; }
  .showcase__item { width: 56px; height: 56px; }
  .phone { width: 268px; }
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: var(--sp-48);
  }
}

/* ---------- muro dei giochi (masonry) ---------- */

.games__note {
  margin: 0 0 var(--sp-32);
  padding: var(--sp-16);
  border: 1px dashed var(--concrete);
  border-radius: var(--radius-card);
  font-size: var(--text-body-sm);
  color: var(--charcoal);
}

.games__wall { column-gap: var(--sp-24); }

@media (min-width: 768px) { .games__wall { column-count: 2; } }

.game {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--sp-24);
  border: 1px solid var(--concrete);
  border-radius: var(--radius-card);
  padding: var(--sp-16);
  background: var(--paper);
  overflow: hidden;
}

.game--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.game__index {
  position: absolute;
  top: 4px;
  right: 10px;
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 1;
  color: var(--ash);
  pointer-events: none;
  user-select: none;
}

.game--ink .game__index { color: #1c1c1c; }

.game--shot .game__index { top: auto; bottom: 8px; right: 12px; font-size: 60px; }

.game__media {
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--ash);
  margin-bottom: var(--sp-16);
}

.game__media img { width: 100%; height: auto; }

.game__head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  position: relative;
}

.game__icon {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--radius-img);
  overflow: hidden;
  border: 1px solid var(--concrete);
  background: var(--ash);
}

.game--ink .game__icon { border-color: var(--charcoal); }

.game--compact .game__icon { width: 84px; height: 84px; }

.game__name {
  font-size: var(--text-subheading);
  font-weight: 700;
  line-height: 1.2;
}

.game__dev {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--text-body-sm);
  font-weight: 400;
  color: var(--slate);
}

.game--ink .game__dev { color: var(--stone); }

.game__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-12);
  margin-top: var(--sp-12);
  position: relative;
}

.game__text {
  margin-top: var(--sp-12);
  font-size: var(--text-body-sm);
  color: var(--charcoal);
  position: relative;
}

.game--ink .game__text { color: var(--concrete); }

.game__genre {
  margin-top: var(--sp-12);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--stone);
}

.game__foot { margin-top: var(--sp-16); position: relative; }

.game--ink .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.game--ink .btn:hover { background: var(--accent); border-color: var(--accent); }

@media (min-width: 480px) {
  .game { padding: var(--sp-20); }
}

/* ---------- rating ---------- */

.rating { display: inline-flex; align-items: center; gap: var(--sp-8); }

.rating__bar { position: relative; display: block; width: 92px; height: 17px; }

.rating__stars { width: 92px; height: 17px; display: block; fill: currentColor; }

.rating__base { color: var(--concrete); }

.game--ink .rating__base { color: #3d3d3d; }

.rating__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--ink);
}

.game--ink .rating__fill,
.section--dark .rating__fill { color: var(--accent); }

.rating__value {
  font-size: var(--text-body-sm);
  font-weight: 700;
}

.rating__count {
  font-size: var(--text-caption);
  color: var(--slate);
}

.game--ink .rating__count { color: var(--stone); }

/* ---------- generi ---------- */

.genres__grid {
  display: grid;
  gap: var(--sp-24);
}

@media (min-width: 640px) { .genres__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .genres__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.genre { display: flex; flex-direction: column; gap: var(--sp-12); }

.genre__media {
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--ash);
  aspect-ratio: 16 / 9;
}

.genre__media img { width: 100%; height: 100%; object-fit: cover; }

.genre__title { font-size: var(--text-body); font-weight: 700; }

.genre__text { font-size: var(--text-body-sm); color: var(--charcoal); }

.genre__list {
  list-style: none;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
  display: grid;
  gap: var(--sp-4);
}

/* ---------- passi ---------- */

.band {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
}

.band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
  pointer-events: none;
}

.band__inner { position: relative; }

.steps__grid { display: grid; gap: var(--sp-32); list-style: none; }

@media (min-width: 640px) { .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step { border-top: 1px solid var(--charcoal); padding-top: var(--sp-16); }

.step__num {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--paper);
}

.step__icon { width: 28px; height: 28px; margin-top: var(--sp-12); color: var(--accent); }

.step__title { margin-top: var(--sp-12); font-size: var(--text-body); font-weight: 700; }

.step__text { margin-top: var(--sp-8); font-size: var(--text-body-sm); color: var(--concrete); }

/* ---------- novità / scelta della redazione ---------- */

.picks__grid { display: grid; gap: var(--sp-32); }

@media (min-width: 768px) { .picks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pick { display: flex; flex-direction: column; gap: var(--sp-12); }

.pick--lead { gap: var(--sp-16); }

.pick__media {
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--ash);
  aspect-ratio: 16 / 9;
}

.pick__media img { width: 100%; height: 100%; object-fit: cover; }

.pick__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--slate);
}

.pick__title { font-size: var(--text-heading-sm); font-weight: 700; line-height: 1.2; }

.pick__text { font-size: var(--text-body-sm); color: var(--charcoal); }

.pick__link {
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  align-self: flex-start;
}

.pick__link:hover { border-bottom-color: var(--accent); }

/* ---------- metodo di selezione ---------- */

.method__grid { display: grid; gap: var(--sp-24); }

@media (min-width: 768px) { .method__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.method {
  border: 1px solid var(--concrete);
  border-radius: var(--radius-card);
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  background: var(--paper);
}

.method__step {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  letter-spacing: 0.04em;
}

.method__title { margin: 0; font-size: var(--text-subheading); line-height: 1.25; }

.method__text { margin: 0; font-size: var(--text-body-sm); color: var(--charcoal); }

.method__list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: auto;
  border-top: 1px solid var(--concrete);
  padding-top: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.method__list li {
  position: relative;
  padding-left: var(--sp-20);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-weight: 700;
  color: var(--slate);
}

.method__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 2px;
  background: var(--ink);
}

.method__note {
  margin: var(--sp-24) 0 0;
  font-size: var(--text-body-sm);
  color: var(--slate);
  border-left: 2px solid var(--ink);
  padding-left: var(--sp-16);
}

/* ---------- form iscrizione ---------- */

.subscribe__grid { display: grid; gap: var(--sp-32); }

@media (min-width: 1024px) {
  .subscribe__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--sp-48); }
}

.form { display: grid; gap: var(--sp-16); }

.form__row { display: grid; gap: var(--sp-16); }

@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: var(--sp-8); }

.field__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--concrete);
}

.field__input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--paper);
  border-radius: var(--radius-nav);
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  letter-spacing: var(--track);
  color: var(--ink);
}

.field__input::placeholder { color: var(--stone); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  font-size: var(--text-body-sm);
  color: var(--concrete);
}

.consent__box {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--accent);
}

.consent a { color: var(--paper); }

.form__note { font-size: var(--text-caption); color: var(--stone); }

.form__success {
  display: none;
  border-radius: var(--radius-card);
  background: var(--accent);
  color: var(--ink);
  padding: var(--sp-16) var(--sp-20);
  font-size: var(--text-body-sm);
  font-weight: 700;
}

.form__success.is-visible { display: block; }

.subscribe__list {
  list-style: none;
  display: grid;
  gap: var(--sp-16);
  margin-top: var(--sp-24);
}

.subscribe__item {
  display: flex;
  gap: var(--sp-12);
  font-size: var(--text-body-sm);
  color: var(--concrete);
  border-top: 1px solid var(--charcoal);
  padding-top: var(--sp-16);
}

.subscribe__icon { width: 22px; height: 22px; flex: none; color: var(--accent); }

/* ---------- progetto ---------- */

.project__grid { display: grid; gap: var(--sp-32); }

@media (min-width: 1024px) {
  .project__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-48); align-items: center; }
}

.project__media {
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--ash);
  aspect-ratio: 16 / 9;
}

.project__media img { width: 100%; height: 100%; object-fit: cover; }

.project__list { list-style: none; display: grid; gap: var(--sp-20); }

.project__item { border-top: 1px solid var(--concrete); padding-top: var(--sp-16); }

.project__item-title {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--text-body);
  font-weight: 700;
}

.project__icon { width: 20px; height: 20px; flex: none; }

.project__item-text { margin-top: var(--sp-8); font-size: var(--text-body-sm); color: var(--charcoal); }

/* ---------- faq ---------- */

.faq__list { border-top: 1px solid var(--concrete); }

.faq__item { border-bottom: 1px solid var(--concrete); }

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  background: transparent;
  border: 0;
  padding: var(--sp-20) 0;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: var(--track);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq__sign { position: relative; width: 16px; height: 16px; flex: none; }

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.15s ease;
}

.faq__sign::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq__sign::after { left: 7px; top: 0; width: 2px; height: 16px; }

.faq__trigger[aria-expanded="true"] .faq__sign::after { transform: scaleY(0); }

.faq__panel { display: none; padding-bottom: var(--sp-20); }

.faq__panel.is-open { display: block; }

.faq__text { font-size: var(--text-body-sm); color: var(--charcoal); max-width: 78ch; }

.faq__text + .faq__text { margin-top: var(--sp-12); }

/* ---------- footer ---------- */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--sp-48) var(--sp-32);
}

.footer__top { display: grid; gap: var(--sp-32); }

@media (min-width: 768px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-48); } }

.footer__about { font-size: var(--text-body-sm); color: var(--concrete); margin-top: var(--sp-16); max-width: 42ch; }

.footer__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--stone);
  margin-bottom: var(--sp-16);
}

.footer__list { list-style: none; display: grid; gap: var(--sp-12); }

.footer__link {
  font-size: var(--text-body-sm);
  text-decoration: none;
  color: var(--paper);
  border-bottom: 1px solid transparent;
}

.footer__link:hover { border-bottom-color: var(--accent); }

.contact { margin-top: var(--sp-48); border-top: 1px solid var(--charcoal); padding-top: var(--sp-32); }

.contact__grid { display: grid; gap: var(--sp-24); }

@media (min-width: 768px) { .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.contact__title { font-family: var(--font-display); font-size: 32px; text-transform: uppercase; font-weight: 400; }

.contact__text { margin-top: var(--sp-12); font-size: var(--text-body-sm); color: var(--concrete); max-width: 46ch; }

.contact__mail {
  display: inline-block;
  margin-top: var(--sp-16);
  font-size: var(--text-subheading);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.contact__mail:hover { border-bottom-color: var(--accent); }

.contact__meta { font-size: var(--text-body-sm); color: var(--stone); display: grid; gap: var(--sp-8); align-content: start; }

.footer__bottom {
  margin-top: var(--sp-32);
  border-top: 1px solid var(--charcoal);
  padding-top: var(--sp-20);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-24);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-caption);
  color: var(--stone);
}

/* ---------- legal ---------- */

.legal { padding-block: var(--sp-48) var(--sp-60); }

.legal__crumbs { font-size: var(--text-caption); color: var(--slate); margin-bottom: var(--sp-16); }

.legal__crumbs a { text-decoration: none; border-bottom: 1px solid var(--concrete); }

.legal__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 10vw, 72px);
  line-height: 0.88;
}

.legal__updated {
  margin-top: var(--sp-16);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate);
}

.legal__body { margin-top: var(--sp-40); max-width: 76ch; display: grid; gap: var(--sp-24); }

.legal__h2 { font-size: var(--text-heading-sm); font-weight: 700; margin-top: var(--sp-16); }

.legal__h3 { font-size: var(--text-body); font-weight: 700; }

.legal__p { font-size: var(--text-body-sm); color: var(--charcoal); }

.legal__ul { display: grid; gap: var(--sp-8); padding-left: var(--sp-20); font-size: var(--text-body-sm); color: var(--charcoal); }

.legal__table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.legal__table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }

.legal__table th,
.legal__table td { border: 1px solid var(--concrete); padding: var(--sp-12); text-align: left; vertical-align: top; }

.legal__table th { background: var(--ash); font-weight: 700; }

.legal__actions { margin-top: var(--sp-32); }

/* ---------- utility: torna su + cookie ---------- */

.totop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--paper);
  background: var(--ink);
  color: var(--paper);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.totop.is-visible { display: flex; }

.totop svg { width: 18px; height: 18px; }

.cookie {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 70;
  display: none;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  padding: var(--sp-16);
}

.cookie.is-visible { display: block; }

.cookie__text { font-size: var(--text-body-sm); }

.cookie__text a { font-weight: 700; }

.cookie__actions { margin-top: var(--sp-16); display: flex; flex-wrap: wrap; gap: var(--sp-8); }

/* accettare e rifiutare hanno lo stesso peso visivo */
.cookie__btn {
  flex: 1 1 130px;
  padding: 12px 22px;
  font-size: var(--text-caption);
  font-weight: 700;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.cookie__btn:hover { background: var(--ink); color: var(--paper); }

@media (min-width: 768px) {
  .cookie {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 420px;
  }
  .totop { right: 24px; bottom: 24px; }
}