/*
 * BresciaTicket — marketing.css
 * Font + libreria componenti landing/marketing (prototype 2026-06-08).
 * Tutto scoped sotto body.page-marketing per non toccare transazionale/organizer.
 * Token, font, componenti e chrome (header/footer) marketing vivono TUTTI qui:
 * tokens-core.css non è caricato sulle pagine pubbliche, e i token prototype
 * collidono con quelli dell'organizer (--font-display, --muted, --accent-soft).
 * Caricato solo quando $marketingPage è attivo.
 */

/* === Font (inter-400/700 già definiti nel sistema esistente) === */
@font-face { font-family:'Inter'; src:url('../fonts/inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('../fonts/geist-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* === Design tokens (prototype 2026-06-08), scoped alla pagina marketing === */
body.page-marketing {
  --bg: #FFFDF9;
  --surface: #FAFAF9;
  --surface-alt: #F5F5F4;
  --border: #E7E5E4;
  --text: #0A0A0A;
  --text-muted: #57534E;
  --text-subtle: #A8A29E;
  --accent: #1D4ED8;
  --accent-soft: #DBEAFE;
  --cta-dark: #0A0A0A;
  --section-dark: #1C1917;
  --spot-peach: #E5C0A1;
  --spot-sky: #BFD4F2;
  --grid-line: rgba(28, 25, 23, 0.035);
  --fg: var(--text);
  --muted: var(--text-muted);
  --ink: var(--text);
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', monospace;
  --shell: min(1120px, calc(100vw - 96px));
  --radius: 16px;
  --motion-standard: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-reveal: 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* === Base scoped === */
.page-marketing *,
.page-marketing *::before,
.page-marketing *::after { box-sizing: border-box; }

body.page-marketing {
  margin: 0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

.page-marketing a { color: inherit; text-decoration: none; }
.page-marketing .shell { width: var(--shell); margin-inline: auto; }

.page-marketing :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* === Sezioni + contatore === */
.page-marketing main { counter-reset: landing-section; }

.page-marketing .section {
  position: relative;
  padding: 120px 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

.page-marketing .section:not(#hero) { counter-increment: landing-section; }
.page-marketing .section.tight { padding: 120px 0; }

.page-marketing.reveal-ready .section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-reveal), transform var(--motion-reveal);
}

.page-marketing.reveal-ready .section.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* === Griglie === */
.page-marketing .grid { display: grid; gap: 48px; align-items: center; }
.page-marketing .grid.two { grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr); }
.page-marketing .grid.reverse { grid-template-columns: minmax(320px, 0.98fr) minmax(0, 1.02fr); }

/* === Eyebrow === */
.page-marketing .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.page-marketing .section:not(#hero) .eyebrow::before {
  content: "0" counter(landing-section);
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  transform: translateY(1px);
}

/* === Headings === */
.page-marketing h1,
.page-marketing h2,
.page-marketing h3 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--ink);
}

.page-marketing h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  max-width: 920px;
}

.page-marketing h2 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  max-width: 820px;
}

.page-marketing h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.page-marketing p { margin: 0; }
.page-marketing .deck {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 760px;
}

/* === Bottoni === */
.page-marketing .bt-btn-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.page-marketing .bt-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-weight: 600;
  background: var(--surface);
  transition: transform var(--motion-standard), box-shadow var(--motion-standard), border-color var(--motion-standard);
}

.page-marketing .bt-btn.bt-btn-primary,
.page-marketing .bt-btn-primary {
  background: var(--cta-dark);
  color: #FFFFFF;
  border-color: var(--cta-dark);
}

.page-marketing .bt-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.page-marketing .note {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 14px;
}

/* === Photo / visual === */
.page-marketing .photo {
  min-height: 520px;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 28%),
    linear-gradient(135deg, var(--spot-peach), var(--spot-sky));
}

.page-marketing .photo::before,
.page-marketing .photo::after {
  content: "";
  position: absolute;
  inset: auto 7% 10% 7%;
  height: 45%;
  background:
    linear-gradient(90deg, transparent 0 4%, var(--surface) 4% 16%, transparent 16% 20%, var(--surface) 20% 31%, transparent 31% 36%, var(--surface) 36% 49%, transparent 49% 54%, var(--surface) 54% 66%, transparent 66% 72%, var(--surface) 72% 86%, transparent 86%);
  opacity: .78;
  border-radius: 20px 20px 8px 8px;
  filter: blur(.2px);
}

.page-marketing .photo::after {
  inset: 8% 8% auto auto;
  width: 42%;
  height: 30%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 70%, transparent), color-mix(in srgb, var(--ink) 15%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb, white 50%, transparent) 14px 16px);
  opacity: .6;
}

.page-marketing .photo.has-image { background: var(--surface-alt); }
.page-marketing .photo.has-image::before,
.page-marketing .photo.has-image::after { content: none; display: none; }

.page-marketing .photo-media,
.page-marketing .photo-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.page-marketing .photo-media img { object-fit: cover; object-position: center; }

.page-marketing .photo.hero-scene {
  min-height: 560px;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(180deg, transparent 0 46%, rgba(0,0,0,.18) 100%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.7), transparent 20%),
    linear-gradient(135deg, var(--spot-peach), var(--spot-sky));
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
}

.page-marketing .photo.hero-scene::before {
  inset: auto 8% 12% 8%;
  height: 42%;
  background:
    radial-gradient(circle at 10% 72%, #1C1917 0 4%, transparent 4.5%),
    radial-gradient(circle at 27% 62%, #1C1917 0 4%, transparent 4.5%),
    radial-gradient(circle at 44% 68%, #1C1917 0 4%, transparent 4.5%),
    radial-gradient(circle at 62% 60%, #1C1917 0 4%, transparent 4.5%),
    radial-gradient(circle at 80% 70%, #1C1917 0 4%, transparent 4.5%),
    linear-gradient(90deg, transparent 0 4%, rgba(255,255,255,.82) 4% 16%, transparent 16% 20%, rgba(255,255,255,.82) 20% 31%, transparent 31% 36%, rgba(255,255,255,.82) 36% 49%, transparent 49% 54%, rgba(255,255,255,.82) 54% 66%, transparent 66% 72%, rgba(255,255,255,.82) 72% 86%, transparent 86%);
}

.page-marketing .photo.chaos::before {
  inset: 12% 10% 16% 10%;
  height: auto;
  background:
    linear-gradient(12deg, transparent 0 8%, white 8% 27%, transparent 27% 34%, white 34% 58%, transparent 58% 64%, white 64% 88%, transparent 88%),
    repeating-linear-gradient(-8deg, rgba(28,25,23,.18) 0 2px, transparent 2px 18px);
  opacity: .9;
  border-radius: 12px;
}

.page-marketing .photo.ordered::before {
  inset: 16% 10% 18% 10%;
  height: auto;
  background:
    linear-gradient(90deg, rgba(255,255,255,.88) 0 28%, transparent 28% 34%, rgba(255,255,255,.88) 34% 66%, transparent 66% 72%, rgba(255,255,255,.88) 72% 100%),
    linear-gradient(180deg, transparent, rgba(29,78,216,.2));
  opacity: .95;
  border-radius: 16px;
}

.page-marketing .visual-label {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: color-mix(in srgb, white 86%, transparent);
  border: 1px solid color-mix(in srgb, white 60%, var(--border));
  border-radius: 14px;
  backdrop-filter: blur(10px);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

.page-marketing .qr {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #111 7px, transparent 7px 14px, #111 14px 21px, transparent 21px 28px, #111 28px),
    linear-gradient(#111 7px, transparent 7px 14px, #111 14px 21px, transparent 21px 28px, #111 28px);
  background-size: 42px 42px;
  opacity: .88;
}

.page-marketing .step-card:hover,
.page-marketing .mini:hover,
.page-marketing .target-card:hover {
  transform: translateY(-2px);
  border-color: var(--text-subtle);
}

.page-marketing .section-note {
  margin-top: 32px;
  max-width: 920px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.page-marketing .support-cta {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.page-marketing .support-cta p { margin-top: 12px; color: var(--muted); }

/* === Liste === */
.page-marketing .bullets,
.page-marketing .steps,
.page-marketing .segments { display: grid; gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }

.page-marketing .bullets li,
.page-marketing .steps li,
.page-marketing .segments li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  transition: transform 250ms ease-out, border-color 250ms ease-out;
}

.page-marketing .bullets li:hover,
.page-marketing .steps li:hover,
.page-marketing .segments li:hover {
  transform: translateY(-2px);
  border-color: var(--text-subtle);
}

/* === Step cards === */
.page-marketing .step-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.page-marketing .step-card {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 250ms ease-out, border-color 250ms ease-out;
}

.page-marketing .step-card .step-number {
  font-family: var(--font-display);
  font-size: 54px;
  line-height: .9;
  font-weight: 700;
  color: var(--accent);
}

.page-marketing .step-card h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.page-marketing .step-card p {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.page-marketing .num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
}

/* === Mini scenes / benefit / target === */
.page-marketing .mini-scenes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.page-marketing .mini,
.page-marketing .target-card {
  min-height: 170px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(150deg, var(--surface), var(--surface-alt));
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  transition: transform 250ms ease-out, border-color 250ms ease-out;
}

.page-marketing .mini.benefit-card {
  min-height: 360px;
  padding: 0;
  isolation: isolate;
  background: var(--section-dark);
  color: white;
}

.page-marketing .mini.benefit-card .mini-media,
.page-marketing .mini.benefit-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.page-marketing .mini.benefit-card img {
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-marketing .mini.benefit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.68)),
    linear-gradient(90deg, rgba(0,0,0,0.2), transparent 58%);
}

.page-marketing .mini.benefit-card:hover img { transform: scale(1.045); }

.page-marketing .mini.benefit-card span {
  position: relative;
  z-index: 2;
  margin: auto 20px 20px;
  max-width: 86%;
  color: white;
  text-shadow: 0 1px 14px rgba(0,0,0,.34);
}

.page-marketing .target-card {
  min-height: 260px;
  padding: 0;
  isolation: isolate;
  background: var(--section-dark);
  color: white;
}

.page-marketing .target-card .target-media,
.page-marketing .target-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.page-marketing .target-card img {
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-marketing .target-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.64)),
    linear-gradient(90deg, rgba(0,0,0,0.28), transparent 58%);
}

.page-marketing .target-card:hover img { transform: scale(1.045); }

.page-marketing .target-card span {
  position: relative;
  z-index: 2;
  margin: auto 20px 20px;
  max-width: 88%;
  color: white;
  text-shadow: 0 1px 14px rgba(0,0,0,.34);
}

.page-marketing .mini:not(.benefit-card)::before {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  right: 18px;
  top: 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: -44px 54px 0 var(--spot-peach);
}

.page-marketing .section-kicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.page-marketing .chaos {
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--spot-peach) 42%, white), transparent 55%),
    repeating-linear-gradient(-8deg, white 0 34px, var(--surface-alt) 34px 64px);
}

.page-marketing .ordered {
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--accent-soft) 70%, white), transparent 52%),
    linear-gradient(135deg, var(--surface), var(--surface-alt));
}

/* === Dashboard === */
.page-marketing .dashboard {
  background: var(--section-dark);
  color: white;
  padding: 32px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

.page-marketing .dash-top { display: flex; gap: 8px; }
.page-marketing .dash-top span { width: 10px; height: 10px; border-radius: 999px; background: white; opacity: .45; }
.page-marketing .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.page-marketing .dash-tile {
  min-height: 94px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
}
.page-marketing .dash-tile b { display: block; margin-top: 16px; font-size: 24px; color: white; }

/* === Targets / split / final === */
.page-marketing .targets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.page-marketing .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  min-height: 420px;
  background: var(--surface);
}

.page-marketing .split-pane { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
.page-marketing .split-pane.bad { background: repeating-linear-gradient(0deg, var(--surface-alt), var(--surface-alt) 18px, white 18px, white 42px); }
.page-marketing .split-pane.good { background: linear-gradient(145deg, var(--accent-soft), white); }

.page-marketing .final {
  text-align: center;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    var(--section-dark);
  background-size: 32px 32px;
  color: white;
  border-bottom: 0;
}
.page-marketing .final h2,
.page-marketing .final .eyebrow { color: white; }
.page-marketing .final h2 { margin-inline: auto; }
.page-marketing .final .deck { color: #D6D3D1; margin-inline: auto; }
.page-marketing .final .bt-btn-primary { background: white; color: var(--ink); border-color: white; }

/* === Responsive === */
@media (max-width: 900px) {
  body.page-marketing { --shell: min(100vw - 48px, 1120px); }
  .page-marketing .grid.two,
  .page-marketing .grid.reverse,
  .page-marketing .split { grid-template-columns: 1fr; }
  .page-marketing .grid { gap: 32px; }
  .page-marketing .photo { min-height: 380px; }
  .page-marketing .photo.hero-scene { min-height: 440px; }
  .page-marketing .step-cards { grid-template-columns: 1fr; }
  .page-marketing .step-card { min-height: auto; }
  .page-marketing .mini-scenes,
  .page-marketing .targets { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body.page-marketing { --shell: min(100vw - 48px, 1120px); }
  body.page-marketing { font-size: 16px; }
  .page-marketing h1 { font-size: 40px; line-height: 1; letter-spacing: -.025em; }
  .page-marketing h2 { font-size: 30px; line-height: 1.06; letter-spacing: -.02em; }
  .page-marketing h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
  .page-marketing .eyebrow { font-size: 12px; }
  .page-marketing .deck { margin-top: 24px; font-size: 16px; }
  .page-marketing .bt-btn-row { margin-top: 24px; gap: 12px; align-items: stretch; }
  .page-marketing .bt-btn-row .bt-btn { width: 100%; min-height: 50px; }
  .page-marketing .section,
  .page-marketing .section.tight { padding: 72px 0; }
  .page-marketing .support-cta,
  .page-marketing .step-card,
  .page-marketing .mini { padding: 24px; }
  .page-marketing .mini.benefit-card { min-height: 300px; padding: 0; }
  .page-marketing .target-card { min-height: 240px; padding: 0; }
  .page-marketing .bullets li,
  .page-marketing .steps li,
  .page-marketing .segments li { padding: 18px; }
  .page-marketing .bullets,
  .page-marketing .steps,
  .page-marketing .segments,
  .page-marketing .step-cards,
  .page-marketing .mini-scenes,
  .page-marketing .targets { gap: 16px; margin-top: 24px; }
  .page-marketing .photo { min-height: 320px; border-radius: 18px; }
  .page-marketing .photo.hero-scene { min-height: 360px; }
  .page-marketing .visual-label {
    left: 14px;
    right: 14px;
    bottom: 14px;
    align-items: flex-start;
    padding: 12px;
    font-size: 14px;
  }
  .page-marketing .qr { width: 34px; height: 34px; background-size: 34px 34px; flex: 0 0 auto; }
  .page-marketing .dash-grid { grid-template-columns: 1fr; }
  .page-marketing .split { min-height: 0; }
  .page-marketing .split-pane { padding: 24px; min-height: 240px; }
}

@media (max-width: 380px) {
  body.page-marketing { --shell: min(100vw - 32px, 1120px); }
  .page-marketing h1 { font-size: 36px; }
  .page-marketing .section,
  .page-marketing .section.tight { padding: 64px 0; }
  .page-marketing .photo { min-height: 280px; }
  .page-marketing .photo.hero-scene { min-height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-marketing,
  .page-marketing *,
  .page-marketing *::before,
  .page-marketing *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  body.page-marketing { scroll-behavior: auto; }
  .page-marketing.reveal-ready .section { opacity: 1; transform: none; }
}

/* ============================================================
   CHROME marketing (header/footer) — scoped a .page-marketing.
   Le classi .site-header/.site-footer sono globali (header.php,
   footer_bar.php); qui le ristiliamo SOLO sulle pagine marketing,
   lasciando intatto il chrome di event/checkout.
============================================================ */

/* --- Header --- */
.page-marketing .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.page-marketing .site-header .shell { min-height: 70px; }
.page-marketing .site-header .brand {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
  font-size: 24px;
  color: var(--ink);
}
.page-marketing .site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.page-marketing .site-nav a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 22px;
  height: auto;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  transition: transform var(--motion-standard), box-shadow var(--motion-standard), border-color var(--motion-standard);
}
.page-marketing .site-nav a:hover { color: var(--ink); }
.page-marketing .site-nav .lang {
  border-color: var(--border);
  background: var(--surface);
  border-radius: 8px;
  gap: 4px;
}
.page-marketing .site-nav .lang b { color: var(--ink); font-weight: 700; }
.page-marketing .site-nav .cta-create {
  background: var(--cta-dark);
  color: #FFFFFF !important;
  border-color: var(--cta-dark);
  border-radius: 8px;
}
.page-marketing .site-nav .cta-create:hover {
  background: var(--cta-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* --- Footer --- */
/* Il footer è globale e uniforme su tutto il sito: vedi .site-footer in style.css.
   marketing.css NON ridichiara il footer per evitare divergenze. */

@media (max-width: 900px) {
  .page-marketing .site-header .shell { min-height: 64px; }
  .page-marketing .site-nav .lang { display: none; }
}

@media (max-width: 560px) {
  .page-marketing .site-header .shell { gap: 12px; }
  .page-marketing .site-header .brand { font-size: 20px; }
  .page-marketing .site-nav { gap: 8px; }
  .page-marketing .site-nav a { min-height: 40px; padding: 0 12px; font-size: 14px; }
}

@media (max-width: 380px) {
  .page-marketing .site-header .brand { font-size: 18px; }
  .page-marketing .site-nav a { min-height: 38px; padding: 0 10px; font-size: 13px; }
}