/* Ukryj hero-description i hero-badges na urządzeniach mobilnych */
@media (max-width: 768px) {
  .hero-description,
  .hero-badges {
    display: none !important;
  }
}
/* Ukryj sekcję SEO na urządzeniach mobilnych */
@media (max-width: 768px) {
  .seo-content {
    display: none !important;
  }
}
/* ============================================
   Polska Gier Miejskich – STYLE GŁÓWNE (HUB, O APLIKACJI, REGULAMIN)
   ============================================ */

/* ---------- ZMIENNE GLOBALNE ---------- */
:root {
  --bg: #1a2a1f;
  --surface: #2c3a2a;
  --card: #3d4a32;
  --border: #5e6b47;
  --gold: #c9a87b;
  --gold2: #dbc5a0;
  --ember: #b46b3a;
  --text: #f0efd9;
  --muted: #b2b692;
  --found: #4f7a4a;
  --radius: 14px;
}

/* ---------- RESET I PODSTAWY ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Dla stron informacyjnych i huba – przewijanie, pełna wysokość, brak ukrycia overflow */
body {
  font-family: 'Inter', Arial, sans-serif;
  background:
    linear-gradient(135deg, rgba(26, 42, 31, 0.98) 0%, rgba(48, 39, 28, 0.98) 46%, rgba(18, 18, 18, 0.99) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 22px);
  color: var(--text);
  overflow: auto;
  height: auto;
  min-height: 100vh;
  padding: 20px;
  display: block;
}

/* Subtelna faktura w tle (zachowana dla spójności) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(201, 168, 123, 0.14), transparent 34%, rgba(180, 107, 58, 0.12)),
    repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 44px);
  z-index: 0;
}

/* ---------- KONTENER GŁÓWNY (HUB I PODSTRONY) ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  background: rgba(29, 39, 28, 0.78);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(201, 168, 123, 0.32);
  position: relative;
  z-index: 1;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

/* ---------- LINK POWROTU (dla o-aplikacji i regulaminu) ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  background: rgba(0, 0, 0, 0.42);
  padding: 9px 16px;
  border-radius: 40px;
  text-decoration: none;
  color: #c9a87b;
  font-weight: 800;
  margin-bottom: 24px;
  transition: 0.2s;
  border: 1px solid rgba(201, 168, 123, 0.34);
}
.back-link:hover {
  background: rgba(201, 168, 123, 0.2);
  gap: 12px;
}

/* ---------- NAGŁÓWKI (H1, H2, H3) ---------- */
h1 {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  background: linear-gradient(135deg, #f0efd9, #c9a87b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 20px;
}
h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  color: #c9a87b;
  margin: 30px 0 15px;
  border-left: 4px solid #c9a87b;
  padding-left: 16px;
}
h3 {
  font-size: 1.2rem;
  margin: 20px 0 10px;
  color: #e0d8b0;
}

/* ---------- TEKST I LISTY ---------- */
p, li {
  line-height: 1.6;
  color: #e2e2cd;
  margin-bottom: 12px;
}
ul, ol {
  margin-left: 24px;
  margin-bottom: 20px;
}

/* ---------- SEKCJA HERO (tylko hub) ---------- */
.hero {
  text-align: center;
  margin-bottom: 34px;
  padding: 16px 10px 10px;
}
.hero .hero-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid rgba(201, 168, 123, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: #dbc5a0;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 auto 12px;
}
.hero h1 {
  font-size: 2.8rem;
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}
.hero-emblem {
  display: block;
  width: clamp(72px, 13vw, 108px);
  height: auto;
  margin: 0 auto 8px;
  opacity: 0.92;
  filter:
    sepia(0.28)
    saturate(0.78)
    brightness(1.08)
    contrast(0.95)
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.32));
}
.hero-title {
  background: none;
  color: #c9a87b;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 0.82;
  margin: 2px auto 8px;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.2),
    0 10px 22px rgba(0, 0, 0, 0.28);
}
.hero-title-top {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(2rem, 6.5vw, 3.95rem);
  font-weight: 800;
  letter-spacing: 0.045em;
}
.hero-title-bottom {
  font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  font-size: clamp(1.8rem, 5.6vw, 3.45rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero .hero-slogan {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1rem, 2.5vw, 1.28rem);
  font-weight: 700;
  color: #e0d8b0;
  margin: 0 auto 14px;
  text-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.hero p {
  font-size: 1.1rem;
  color: #d4cfb2;
  max-width: 720px;
  margin: 0 auto;
}

.content-page {
  max-width: 980px;
}

.content-hero {
  padding: 8px 0 18px;
}

.content-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0;
  margin-bottom: 12px;
}

.content-hero p {
  max-width: 760px;
  font-size: 1.05rem;
}

.content-hero .effective-date {
  margin-top: 12px;
}

.legend-page {
  max-width: 1040px;
}

.legend-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 28px;
  align-items: center;
  padding-bottom: 24px;
}

.legend-hero img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(201, 168, 123, 0.28);
  padding: 18px;
}

.legend-section {
  background: rgba(18, 24, 18, 0.36);
  border: 1px solid rgba(201, 168, 123, 0.24);
  border-radius: 18px;
  padding: 26px;
  margin: 20px 0;
}

.legend-section h2 {
  margin-top: 0;
}

.legend-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid rgba(201, 168, 123, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  color: #dbc5a0;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.legend-source {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 4px solid #c9a87b;
  border-radius: 8px;
  background: rgba(201, 168, 123, 0.1);
  color: #dbc5a0;
  font-size: 0.92rem;
}

.legend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 4px;
}

.primary-link,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 900;
  text-decoration: none;
}

.primary-link {
  color: #1a2a1f;
  background: #c9a87b;
}

.secondary-link {
  color: #dbc5a0;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(201, 168, 123, 0.34);
}

/* ---------- SIATKA KART MIAST (tylko hub) ---------- */
.cities-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  max-width: 1040px;
  margin: 20px 0 40px;
  margin-left: auto;
  margin-right: auto;
}
.city-card {
  width: calc((100% - 44px) / 3);
  min-width: 0;
  background: rgba(34, 46, 32, 0.92);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(201, 168, 123, 0.36);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.city-main-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
  border-color: #c9a87b;
}
.city-card:focus-visible {
  outline: 3px solid #e0c088;
  outline-offset: 4px;
}
.city-card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0 18px 18px;
}
.legend-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(201, 168, 123, 0.45);
  border-radius: 10px;
  color: #dbc5a0;
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}
.legend-card-link:hover {
  background: rgba(201, 168, 123, 0.16);
  color: #f0efd9;
}

.legend-links-panel {
  max-width: 1040px;
  margin: 0 auto 34px;
  padding: 22px;
  border: 1px solid rgba(201, 168, 123, 0.26);
  border-radius: 18px;
  background: rgba(18, 24, 18, 0.34);
  text-align: center;
}

.legend-links-panel h2 {
  margin-top: 0;
  border-left: 0;
  padding-left: 0;
}

.legend-link-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.legend-link-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(201, 168, 123, 0.34);
  color: #dbc5a0;
  font-weight: 800;
  text-decoration: none;
}

.legend-link-grid a:hover {
  color: #f0efd9;
  background: rgba(201, 168, 123, 0.15);
}
.card-image {
  height: 188px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.34));
}
.card-image .emoji-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 74px;
  height: 74px;
  overflow: hidden;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 18px;
  padding: 6px;
  backdrop-filter: blur(4px);
  z-index: 1;
}
.card-image .emoji-overlay img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 12px;
}
.card-image.krakow .emoji-overlay {
  background: radial-gradient(circle at 35% 25%, #f0d060, #c84b11 58%, #231a0d);
}
.card-image.wroclaw .emoji-overlay {
  background: radial-gradient(circle at 35% 25%, #f7d27b, #bd7a3a 58%, #232a1f);
}
.card-image.jelenia .emoji-overlay {
  background: radial-gradient(circle at 35% 25%, #dbc5a0, #6e8b4f 58%, #1a2a1f);
}
.card-image.lodz .emoji-overlay {
  background: radial-gradient(circle at 35% 25%, #f0d060, #c85a2a 58%, #2a1e1a);
}
.card-image.katowice .emoji-overlay {
  background: radial-gradient(circle at 35% 25%, #f0d060, #4a4a4a 58%, #121212);
}
.card-content {
  padding: 18px;
  text-align: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}
.card-content h2 {
  font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  font-size: 1.48rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  color: #c9a87b;
  border-left: none;
  padding-left: 0;
}
.card-content .city-name {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0;
  color: #1a2a1f;
  background: #dbc5a0;
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 12px;
}
.card-content .description {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #d4cfb2;
  flex: 1;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 15px;
  background: #c9a87b;
  color: #1a2a1f;
  padding: 8px 14px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.8rem;
  transition: 0.2s;
}
.city-card:hover .badge {
  background: #e0c088;
  transform: scale(1.02);
}

/* Tła dla poszczególnych miast */
.card-image.krakow {
  background-image: url('../images/krakow-bg.webp');
  background-color: #3a2a1f;
  /*background-blend-mode: overlay;*/
}
.card-image.wroclaw {
  background-image: url('../images/wroclaw-bg.webp');
  background-color: #2a3a3a;
  /*background-blend-mode: overlay;*/
}
.card-image.jelenia {
  background-image: url('../images/jelenia-bg.webp');
  background-color: #2a3a1f;
  /*background-blend-mode: overlay;*/
}
.card-image.lodz {
  background-image: url('../images/lodz-bg.webp');
  background-color: #3a2a3a;
  /*background-blend-mode: overlay;*/
}
.card-image.katowice {
  background-image: url('../images/katowice-bg.webp');
  background-color: #1a1a1a;
  /*background-blend-mode: overlay;*/
}

/* ---------- SEKCJA FUNKCJI (dla o-aplikacji) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 25px 0;
}
.feature-card {
  background: rgba(30, 40, 25, 0.7);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(201, 168, 123, 0.3);
}
.feature-card .emoji {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 10px;
}
.feature-card h4 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: #c9a87b;
}

.info-panel {
  background: rgba(18, 24, 18, 0.34);
  border: 1px solid rgba(201, 168, 123, 0.22);
  border-radius: 18px;
  padding: 22px;
  margin: 18px 0;
}

.info-panel h2 {
  margin-top: 0;
}

.split-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.check-list {
  margin: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 28px;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #e0c088;
  font-weight: 900;
}

.legal-panel {
  padding: 20px 22px;
}

.legal-panel h2 {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.partner-page {
  max-width: 1040px;
}

.partner-hero {
  padding-bottom: 26px;
}

.partner-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.partner-benefits h2 {
  border-left: 0;
  padding-left: 0;
}

.pricing-panel {
  position: relative;
  overflow: hidden;
}

.pricing-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201, 168, 123, 0.13), transparent 42%, rgba(180, 107, 58, 0.13));
  pointer-events: none;
}

.pricing-panel > * {
  position: relative;
  z-index: 1;
}

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 22px 0;
}

.price-card {
  background: rgba(30, 40, 25, 0.78);
  border: 1px solid rgba(201, 168, 123, 0.36);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.price-card.featured {
  border-color: rgba(224, 192, 136, 0.76);
}

.featured-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #c9a87b;
  color: #1a2a1f;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 18px;
  color: #f0efd9;
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 800;
}

.price span {
  color: #dbc5a0;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.contact-note {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(201, 168, 123, 0.24);
  color: #dbc5a0;
}

.contact-note a {
  color: #e0c088;
  font-weight: 900;
}

.sponsor-preview {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.sponsor-preview-full {
  grid-template-columns: minmax(300px, 1.1fr) minmax(240px, 0.9fr);
  align-items: center;
}

.sponsor-map-mock {
  position: relative;
  min-height: 410px;
  overflow: visible;
  border: 1px solid rgba(201, 168, 123, 0.3);
  border-radius: 16px;
  background:
    radial-gradient(circle at 22% 28%, rgba(197, 181, 122, 0.22), transparent 16%),
    radial-gradient(circle at 72% 70%, rgba(67, 99, 75, 0.38), transparent 22%),
    linear-gradient(135deg, #44513b, #263529 46%, #536246);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sponsor-map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 38px 38px;
  transform: rotate(-8deg) scale(1.2);
}

.mock-road {
  position: absolute;
  display: block;
  height: 18px;
  border-radius: 999px;
  background: rgba(226, 210, 166, 0.58);
  box-shadow: 0 0 0 3px rgba(84, 65, 36, 0.18);
}

.mock-road-a {
  left: 0;
  top: 48%;
  width: 100%;
  transform: rotate(-18deg);
}

.mock-road-b {
  left: 36%;
  top: 0;
  width: 18px;
  height: 100%;
  transform: rotate(22deg);
}

.mock-road-c {
  left: 6%;
  bottom: 18%;
  width: 78%;
  transform: rotate(12deg);
  opacity: 0.78;
}

.sponsor-preview-pin {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50% 50% 50% 12px;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, #ffd66b, #f08a32);
  color: #3b2108;
  border: 3px solid #fff8d9;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  font-size: 1.5rem;
  font-weight: 900;
  cursor: pointer;
}

.sponsor-preview-pin span {
  display: block;
  transform: rotate(45deg);
}

.sponsor-preview-pin-map {
  position: absolute;
  left: 44%;
  top: 48%;
  margin-left: -29px;
  margin-top: -29px;
  border: 3px solid #fff8d9;
  animation: sponsorPinPulse 1.8s ease-in-out infinite;
  z-index: 2;
}

@keyframes sponsorPinPulse {
  0%, 100% { box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(255, 214, 107, 0.42); }
  50% { box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), 0 0 0 12px rgba(255, 214, 107, 0); }
}

.sponsor-popup-demo {
  position: absolute;
  left: calc(44% + 24px);
  top: 42px;
  width: min(268px, calc(100% - 56px));
  max-height: none;
  overflow: visible;
  border: 1px solid rgba(201, 168, 123, 0.36);
  border-radius: 16px;
  background: rgba(30, 40, 25, 0.96);
  padding: 14px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 3;
}

.sponsor-map-mock.is-open .sponsor-popup-demo {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.sponsor-popup-demo::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 46%;
  width: 18px;
  height: 18px;
  background: rgba(30, 40, 25, 0.98);
  border-left: 1px solid rgba(201, 168, 123, 0.36);
  border-bottom: 1px solid rgba(201, 168, 123, 0.36);
  transform: rotate(45deg);
}

.sponsor-popup-demo h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.sponsor-popup-demo p {
  font-size: 0.86rem;
  line-height: 1.36;
  margin-bottom: 8px;
}

.sponsor-popup-badge {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 214, 107, 0.16);
  color: #ffd66b;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sponsor-popup-address {
  color: #dbc5a0;
  font-weight: 800;
}

.sponsor-demo-coupon {
  margin: 8px 0;
  padding: 9px;
  border: 2px dashed rgba(255, 214, 107, 0.72);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 214, 107, 0.2), rgba(240, 138, 50, 0.14));
  text-align: center;
}

.sponsor-demo-coupon span,
.sponsor-demo-coupon small {
  display: block;
  color: #f8e7bb;
}

.sponsor-demo-coupon strong {
  display: inline-flex;
  margin: 5px 0;
  padding: 7px 12px;
  border-radius: 10px;
  background: #fff8d9;
  color: #3b2108;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.sponsor-demo-coupon small {
  font-size: 0.8rem;
}

.sponsor-demo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sponsor-demo-actions a,
.sponsor-demo-actions button {
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(201, 168, 123, 0.48);
  background: rgba(0, 0, 0, 0.24);
  color: #e0c088;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  font-size: 0.86rem;
}

.sponsor-preview-copy h3 {
  margin-top: 0;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.process-grid div {
  background: rgba(30, 40, 25, 0.68);
  border: 1px solid rgba(201, 168, 123, 0.26);
  border-radius: 14px;
  padding: 18px;
}

.process-grid span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #c9a87b;
  color: #1a2a1f;
  font-weight: 900;
}

.faq-panel details {
  border-top: 1px solid rgba(201, 168, 123, 0.22);
  padding: 14px 0;
}

.faq-panel summary {
  cursor: pointer;
  color: #e0d8b0;
  font-weight: 900;
}

.faq-panel p {
  margin-top: 10px;
}

.guide-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.guide-fact {
  min-height: 100px;
  padding: 16px;
  border: 1px solid rgba(201, 168, 123, 0.28);
  border-radius: 14px;
  background: rgba(30, 40, 25, 0.68);
}

.guide-fact strong {
  display: block;
  margin-bottom: 6px;
  color: #e0c088;
  font-size: 0.9rem;
}

.guide-fact span {
  color: #e2e2cd;
  font-size: 0.92rem;
  line-height: 1.45;
}

.guide-steps {
  counter-reset: guide-step;
  display: grid;
  gap: 14px;
  margin: 18px 0;
}

.guide-step {
  position: relative;
  padding: 18px 18px 18px 58px;
  border: 1px solid rgba(201, 168, 123, 0.24);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.guide-step::before {
  counter-increment: guide-step;
  content: counter(guide-step);
  position: absolute;
  left: 16px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #c9a87b;
  color: #1a2a1f;
  font-weight: 900;
}

.guide-step h3 {
  margin-top: 0;
}

.guide-city-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.guide-city-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(201, 168, 123, 0.34);
  border-radius: 10px;
  color: #dbc5a0;
  background: rgba(0, 0, 0, 0.22);
  font-weight: 800;
  text-decoration: none;
}

.guide-city-links a:hover {
  color: #f0efd9;
  background: rgba(201, 168, 123, 0.14);
}

.guide-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(224, 192, 136, 0.44);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(201, 168, 123, 0.16), rgba(0, 0, 0, 0.14));
}

.guide-cta h2 {
  margin: 0 0 8px;
}

.guide-cta p {
  margin: 0;
}

/* ---------- STOPKA (wspólna dla wszystkich stron) ---------- */
.footer {
  text-align: center;
  padding: 30px 20px 15px;
  font-size: 0.8rem;
  color: #9aa87a;
  border-top: 1px solid rgba(201, 168, 123, 0.3);
  margin-top: 20px;
}
.footer a {
  color: #c9a87b;
  text-decoration: none;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.site-footer p {
  flex: 1;
  margin: 0;
  color: #bfc2a0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(201, 168, 123, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  font-weight: 800;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(201, 168, 123, 0.42);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  color: #e0c088;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.social-links a:hover,
.social-links a:focus {
  background: #e0c088;
  border-color: #e0c088;
  color: #182018;
  transform: translateY(-1px);
}

.social-icon {
  width: 20px;
  height: 20px;
  display: block;
  background: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.social-icon-instagram {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 4.2a3.8 3.8 0 1 1 0 7.6 3.8 3.8 0 0 1 0-7.6Zm0 2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6ZM17.7 6.1a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 4.2a3.8 3.8 0 1 1 0 7.6 3.8 3.8 0 0 1 0-7.6Zm0 2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6ZM17.7 6.1a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.social-icon-facebook {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8h3V4h-3c-3 0-5 2-5 5v2H6v4h3v7h4v-7h3.2l.8-4h-4V9c0-.6.4-1 1-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8h3V4h-3c-3 0-5 2-5 5v2H6v4h3v7h4v-7h3.2l.8-4h-4V9c0-.6.4-1 1-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.social-icon-youtube {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.6 7.2a3 3 0 0 0-2.1-2.1C17.7 4.6 12 4.6 12 4.6s-5.7 0-7.5.5a3 3 0 0 0-2.1 2.1A31 31 0 0 0 2 12a31 31 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.8.5 7.5.5 7.5.5s5.7 0 7.5-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 22 12a31 31 0 0 0-.4-4.8ZM10 15.4V8.6L16 12l-6 3.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.6 7.2a3 3 0 0 0-2.1-2.1C17.7 4.6 12 4.6 12 4.6s-5.7 0-7.5.5a3 3 0 0 0-2.1 2.1A31 31 0 0 0 2 12a31 31 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.8.5 7.5.5 7.5.5s5.7 0 7.5-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 22 12a31 31 0 0 0-.4-4.8ZM10 15.4V8.6L16 12l-6 3.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.social-icon-tiktok {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3c.4 2.7 1.9 4.3 4.5 4.7v3.6A8.2 8.2 0 0 1 15 9.9v5.5a6 6 0 1 1-6.2-6v3.7a2.3 2.3 0 1 0 2.4 2.3V3H15Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3c.4 2.7 1.9 4.3 4.5 4.7v3.6A8.2 8.2 0 0 1 15 9.9v5.5a6 6 0 1 1-6.2-6v3.7a2.3 2.3 0 1 0 2.4 2.3V3H15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.language-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid rgba(224, 192, 136, 0.36);
  border-radius: 12px;
  background: rgba(13, 18, 13, 0.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.language-switcher-page {
  margin-left: 6px;
}

.language-switcher button,
.language-suggestion button {
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  background: transparent;
  color: #e0c088;
  font: 800 0.78rem 'Inter', Arial, sans-serif;
  cursor: pointer;
}

.language-current {
  min-width: 38px;
  min-height: 34px;
}

.language-current span {
  display: block;
  font-size: 1.1rem;
  line-height: 1;
}

.flag-icon {
  display: inline-block;
  width: 22px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 2px;
  border: 1px solid rgba(245, 237, 220, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  vertical-align: middle;
}

.flag-pl {
  background: linear-gradient(to bottom, #fff 0 50%, #dc143c 50% 100%);
}

.flag-gb {
  background: #012169 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h60v40H0z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23012169' d='M0 0h60v40H0z'/%3E%3Cpath stroke='%23fff' stroke-width='8' d='m0 0 60 40M60 0 0 40'/%3E%3Cpath stroke='%23C8102E' stroke-width='4.8' d='m0 0 60 40M60 0 0 40'/%3E%3Cpath stroke='%23fff' stroke-width='13' d='M30 0v40M0 20h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='8' d='M30 0v40M0 20h60'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}

.language-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  display: grid;
  gap: 6px;
  min-width: 150px;
  max-width: calc(100vw - 24px);
  padding: 10px;
  border: 1px solid rgba(224, 192, 136, 0.36);
  border-radius: 12px;
  background: rgba(13, 18, 13, 0.96);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.language-menu[hidden] {
  display: none;
}

.language-menu span {
  color: #f5eddc;
  font-size: 0.76rem;
  font-weight: 800;
}

.language-menu button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}

.language-menu button.active,
.language-menu button:hover,
.language-menu button:focus,
.language-suggestion button:first-of-type {
  background: #e0c088;
  color: #182018;
}

@media (max-width: 680px) {
  .language-switcher-page .language-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

.language-suggestion {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(92vw, 520px);
  padding: 10px;
  border: 1px solid rgba(224, 192, 136, 0.36);
  border-radius: 14px;
  background: rgba(13, 18, 13, 0.92);
  color: #f5eddc;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(14px);
}

.language-suggestion span {
  font-weight: 800;
}

.brand-credit {
  color: #fff;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.86;
}

.brand-dot {
  color: #eab308;
}

.logo-link {
  text-decoration: none;
  display: inline-block;
}
.logo-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.logo-dot {
  color: #eab308;
}
.logo-link:hover .logo-text {
  background: linear-gradient(90deg, #d4af37, #eab308, #c84b11);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- DODATKOWE NAKŁADKI (daty, itp.) ---------- */
.effective-date {
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 16px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

/* ---------- RESPONSYWNOŚĆ ---------- */
@media (max-width: 750px) {
  .hero h1 {
    font-size: 2rem;
  }
  .card-image {
    height: 170px;
  }
  .card-content h2 {
    font-size: 1.5rem;
  }
  .city-card {
    width: calc((100% - 18px) / 2);
  }
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .legend-hero {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .cities-grid {
    gap: 18px;
  }
  .city-card {
    width: 100%;
  }
  .split-panel {
    grid-template-columns: 1fr;
  }
  .process-grid,
  .sponsor-preview,
  .guide-facts,
  .guide-cta {
    grid-template-columns: 1fr;
  }
  .sponsor-map-mock {
    min-height: 430px;
  }
  .sponsor-popup-demo {
    left: 14px;
    right: 14px;
    top: 112px;
    width: auto;
    max-height: none;
  }
  .sponsor-popup-demo::before {
    display: none;
  }
}
@media (max-width: 600px) {
  body {
    padding: 12px;
  }
  .container {
    padding: 18px 14px;
    border-radius: 18px;
  }
  h1 {
    font-size: 1.9rem;
  }
  h2 {
    font-size: 1.4rem;
  }
}
/*
  Copyright (c) Smart Commerce. All rights reserved.
  Tropiciele Legend styles, UI layout, visual system, texts and assets
  are protected by copyright. No permission is granted to copy, clone,
  reproduce, scrape for replication, train AI models on, or generate
  derivative competing versions without prior written consent.
*/