body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); }
.hub { max-width: 1080px; margin: 0 auto; padding: 3rem 1.5rem; }
.hub-head { text-align: center; margin-bottom: 2.5rem; }
.hub-head h1 { font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.6rem); }
.hub-logo { max-height: 90px; }
.hub-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hub-card { display: block; background: var(--surface); border-radius: var(--radius); padding: 1.5rem;
  text-decoration: none; color: inherit; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.hub-card h2 { font-family: var(--font-heading); color: var(--brand); margin-top: 0; }
.hub-pin { font-size: 0.9rem; color: var(--muted); }
.hub-tour, .hub-meta { margin-top: 2.5rem; background: var(--surface); border-radius: var(--radius); padding: 1.5rem; }
.hub-meta { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#resetDemo { background: var(--brand); color: var(--brand-ink); border: 0; border-radius: var(--radius);
  padding: 0.6rem 1.2rem; cursor: pointer; font-family: var(--font-body); }
@media (max-width: 600px) { .hub { padding: 1.5rem 1rem; } }
.hub-lang { display: flex; justify-content: flex-end; gap: 0.25rem; margin-bottom: 1rem; }
.hub-lang button { background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: var(--radius); padding: 0.4rem 0.8rem; cursor: pointer; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.04em; }
.hub-lang button.is-active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }