@font-face {
font-display: swap;
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('grafika/czcionki/anton.woff2') format('woff2');
}

@font-face {
font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('grafika/czcionki/inter-regular.woff2') format('woff2');
}

@font-face {
font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('grafika/czcionki/inter-600.woff2') format('woff2');
}

@font-face {
font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('grafika/czcionki/inter-700.woff2') format('woff2');
}

@font-face {
font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('grafika/czcionki/inter-800.woff2') format('woff2');
}

@font-face {
font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('grafika/czcionki/inter-900.woff2') format('woff2');
}

:root {
--granat:         #061a3c;
  --niebieski:      #004aa9;
  --niebieski-2:    #0067dd;
  --czerwony:       #e31b23;
  --czerwony-2:     #9f0710;
  --zielony-sukces: #079f41;
  --zielony-sukces-2: #1ec748;
  --czerwony-bledu: #e74c3c;
  --tlo-bledu: rgba(231, 76, 60, .06);
  --obrys-bledu: rgba(231, 76, 60, .25);
  --tlo-karty-logowania: linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,249,253,.94));
  --linia-pola-logowania: #cbd8e8;
  --tekst-pomocniczy-logowania: #526176;
  --cien-karty-logowania: 0 26px 74px rgba(0,0,0,.32);
  --zolty:          #ffd114;
  --zolty-2:        #ffea78;
  --bialy:          #ffffff;
  --tusz:           #071b3d;
  --przygaszony:    #63708a;
  --ciemny-tlo:     #041225;

  --tekst-tytul-sekcji:     clamp(42px, 6vw, 86px);
  --tekst-tytul-karty:      clamp(34px, 4vw, 58px);
  --tekst-tytul-kafelka:    clamp(22px, 2.4vw, 32px);
  --tekst-opisu:            clamp(16px, 1.35vw, 18px);
  --tekst-maly:             clamp(14px, 1vw, 16px);
  --tekst-bardzo-maly:      clamp(12px, 1vw, 14px);
  --tekst-stopki:           clamp(13px, .95vw, 15px);
  --tekst-przycisku:        clamp(16px, 1.35vw, 18px);
  --tekst-podstawowy:       1rem;
  
  --wysokosc-naglowka: 82px;
  --szerokosc-pojemnika: 1460px;
  --dopelnienie-sekcji: clamp(40px, 5vw, 80px);


  --zaokraglenie: 8px;
  --odstep-linii-maly: 1.0;
  --odstep-linii-sredni: 1.1;
  --odstep-linii-duzy: 1.5;
  --odstep-litery-maly: .4px;
  --odstep-litery-sredni: .8px;
  --odstep-litery-duzy: 1.2px;
  --grubosc-tekstu-mala: 400; 
  --grubosc-tekstu-srednia: 600;   
  --grubosc-tekstu-duza: 800;   
  --linia-jasna-bardzo-lekko: rgba(255,255,255,.1); 
  --linia-jasna-lekko: rgba(255,255,255,.2);
  --linia-jasna-srednio: rgba(255,255,255,.4);
  --linia-jasna-mocno: rgba(255,255,255,.6);
  --linia-jasna-bardzo-mocno: rgba(255,255,255,.8);
  --linia-ciemna-bardzo-lekko: rgba(0,0,0,.1); 
  --linia-ciemna-lekko: rgba(0,0,0,.2); 
  --linia-ciemna-srednio: rgba(0,0,0,.4); 
  --linia-ciemna-mocno: rgba(0,0,0,.6); 
  --linia-ciemna-bardzo-mocno: rgba(0,0,0,.8); 
    --zielony-sukces-ciemny: #5D8C68;
  --zielony-sukces-jasny: #4E995F;
  
  --cien:     0 24px 60px rgba(2, 18, 50, .25);
  --polysk:   linear-gradient(120deg, transparent 0%, transparent 24%, var(--linia-jasna-lekko) 39%, transparent 54%, transparent 100%);
  --gradient-wydarzenia: linear-gradient(135deg, var(--granat), var(--niebieski));
}

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

html {
scroll-behavior: smooth;
  scroll-padding-top: var(--wysokosc-naglowka);
}

body {
margin: 0;
  overflow-x: hidden;
  background: var(--ciemny-tlo);
  color: var(--tusz);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

body.menu-otwarte {
  overflow: hidden;
}

a {
color: inherit; text-decoration: none;
}

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

button, input, select, textarea {
font: inherit;
}

button {
cursor: pointer;
}

.pojemnik {
width: min(var(--szerokosc-pojemnika), calc(100% - 48px));
  margin-inline: auto;
  text-align: center;
}

.sekcja {
position: relative;
  padding: var(--dopelnienie-sekcji) 0;
}

.sekcja[id] {
scroll-margin-top: var(--wysokosc-naglowka);
}

.sekcja-oddzielona {
border-bottom: 1px solid var(--linia-jasna-lekko);
}

.siatka {
display: grid;
  gap: 24px;
  align-items: stretch;
  margin-top: 24px;
}

.siatka-3-standard,
.siatka-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.siatka-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.siatka-elastyczna {
display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}

.karta {
position: relative;
  overflow: hidden;
  border-radius: var(--zaokraglenie);
}

.karta-kolumna {
display: flex;
  flex-direction: column;
  height: 100%;
}

.karta-jasna {
border: 1px solid rgba(6,26,60,.10);
  background: var(--bialy);
  box-shadow: 0 24px 56px rgba(6,26,60,.10);
}

/* Teksty wyrównane do lewej wewnątrz pojemnika */
.pojemnik-lewo {
text-align: left;
}

.bez-ramki {
border: 0;
}

.strona-publiczna main {
min-height: 60vh;
}

.pojemnik-siatka {
width: min(1460px, calc(100% - 48px));
  margin-inline: auto;
}

/* =====================================================================
   NAGŁÓWEK STRONY
   ===================================================================== */
.naglowek-strony {
position: sticky;
  top: 0;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--wysokosc-naglowka);
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  transition:
    background .22s ease,
    border-color .22s ease,
    backdrop-filter .22s ease,
    box-shadow .22s ease;
}

.naglowek-strony.przewiniety,
.naglowek-strony.menu-otwarte {
  border-bottom-color: var(--linia-jasna-lekko);
  background: linear-gradient(180deg, rgba(3,18,45,.94), rgba(3,18,45,.78));
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 26px var(--linia-ciemna-lekko);
}

.wnetrze-naglowka {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: min(1480px, calc(100% - 56px));
  height: 100%;
  margin-inline: auto;
  overflow: visible;
}

/* Logo marki */
.marka {
display: flex;
  align-items: center;
  gap: 16px;
  min-width: 150px;
  height: 100%;
  overflow: visible;
}

.marka img {
height: 100px;
  width: auto;
  max-height: none;
  display: block;
  object-fit: contain;
  transform: translateY(10px);
  filter: drop-shadow(0 10px 18px var(--linia-ciemna-srednio));
}

/* Nawigacja desktopowa */
.nawigacja {
display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 28px);
  color: #fff;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-przycisku);
  letter-spacing: var(--odstep-litery-duzy);
  text-transform: uppercase;
  text-shadow: 0 2px 10px var(--linia-ciemna-mocno);
}

.element-menu {
position: relative;
  display: flex;
  align-items: center;
}

.link-nawigacji,
.przycisk-podmenu {
position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 13px;
  border: 0;
  border-radius: var(--zaokraglenie);
  background: transparent;
  color: #fff;
  font: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.link-nawigacji::after,
.przycisk-podmenu::after {
content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 3px;
  border-radius: var(--zaokraglenie);
  background: var(--zolty);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

.link-nawigacji:hover,
.przycisk-podmenu:hover {
color: var(--zolty);
}

.link-nawigacji:hover::after,
.przycisk-podmenu:hover::after {
transform: scaleX(1);
}

.link-nawigacji.aktywny,
.przycisk-podmenu.aktywny {
background: var(--zolty);
  color: var(--granat);
  text-shadow: none;
  box-shadow: 0 12px 24px var(--linia-ciemna-lekko);
}

.link-nawigacji.aktywny::after,
.przycisk-podmenu.aktywny::after {
display: none;
}

/* Trzy stałe kategorie wydarzeń mieszczą się również na mniejszych laptopach. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .wnetrze-naglowka {
    gap: 10px;
    width: calc(100% - 36px);
  }

  .marka {
    min-width: 118px;
  }

  .marka img {
    height: 88px;
  }

  .nawigacja {
    gap: 2px;
    /* font-size: 14px; */
  }

  .link-nawigacji,
  .przycisk-podmenu {
    /* padding-inline: 7px; */
  }

  .przycisk-logowania {
    /* padding-inline: 15px; */
  }
}

/* Podmenu (dropdown) */
.podmenu {
position: absolute;
  top: calc(100% + 13px);
  left: 50%;
  min-width: 360px;
  padding: 5px;
  border-radius: var(--zaokraglenie);
  background: rgba(3,18,45,.96);
  box-shadow: 0 24px 50px var(--linia-ciemna-srednio);
  text-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.podmenu::before {
content: "";
  position: absolute;
  top: -14px;
  right: 0;
  left: 0;
  height: 14px;
}

.ma-podmenu.otwarte .podmenu {
opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* transform: translate(-50%, 0); */
}

.podmenu a {
display: block;
  padding: 12px 14px;
  margin: 3px;
  border-radius: var(--zaokraglenie);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--tekst-maly);
  font-weight: var(--grubosc-tekstu-duza);
  letter-spacing: var(--odstep-litery-maly);
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.podmenu a:hover {
background: var(--zolty);
  color: var(--granat);
}

.podmenu a.aktywny {
background: var(--zolty);
  color: var(--granat);
}

.brak-wydarzen-menu {
    display: block;
    padding: 12px 14px;
    margin: 3px;
    border-radius: var(--zaokraglenie);
    color: #686869;
    font-family: Inter, system-ui, sans-serif;
    font-size: var(--tekst-maly);
    font-weight: var(--grubosc-tekstu-duza);
    letter-spacing: var(--odstep-litery-maly);
    text-transform: uppercase;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

/* Przycisk "Zaloguj się desktop */
.przycisk-logowania {
position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: var(--zaokraglenie);
  padding: 11px 22px;
  color: #fff;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-przycisku);
  letter-spacing: var(--odstep-litery-sredni);
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--czerwony), var(--czerwony-2));
  box-shadow: 0 12px 28px var(--linia-ciemna-lekko);
  text-shadow: none;
  transition: filter .2s ease, box-shadow .22s ease;
  text-decoration: none;
}

.przycisk-logowania.aktywny {
border-color: var(--zolty);
}

.przycisk-logowania::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--polysk);
  transform: translateX(-100%);
  transition: transform .55s ease;
  pointer-events: none;
}

.przycisk-logowania:hover {
filter: brightness(1.06); box-shadow: 0 16px 34px var(--linia-ciemna-lekko);
}

.przycisk-logowania:hover::before {
transform: translateX(100%);
}

/* Przycisk hamburger (mobilny) */
.przycisk-menu {
display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linia-jasna-srednio);
  border-radius: var(--zaokraglenie);
  background: var(--linia-jasna-bardzo-lekko);
  cursor: pointer;
  box-shadow: 0 10px 24px var(--linia-ciemna-lekko);
}

.przycisk-menu span {
display: block;
  width: 22px;
  height: 2px;
  border-radius: var(--zaokraglenie);
  background: #fff;
  transition: transform .22s ease, opacity .22s ease;
}

.przycisk-menu[aria-expanded="true"] span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.przycisk-menu[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}

.przycisk-menu[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

/* Logowanie mobilne (wewnątrz nawigacji) */
.nawigacja .logowanie-mobilne {
display: none;
}

.logowanie-mobilne {
position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: var(--zaokraglenie);
  color: #fff;
  font-family: Anton, Inter, sans-serif;
  letter-spacing: var(--odstep-litery-sredni);
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--czerwony), var(--czerwony-2));
  box-shadow: 0 12px 28px var(--linia-ciemna-lekko);
  text-shadow: none;
  transition: filter .2s ease;
  text-decoration: none;
}

.logowanie-mobilne::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--polysk);
  transform: translateX(-100%);
  transition: transform .55s ease;
  pointer-events: none;
}

.logowanie-mobilne::after {
display: none;
}

.logowanie-mobilne:hover {
filter: brightness(1.06);
}

.logowanie-mobilne:hover::before {
transform: translateX(100%);
}

/* =====================================================================
   PRZYCISKI (globalne)
   ===================================================================== */
.przycisk {
position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--zaokraglenie);
  color: #fff;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-przycisku);
  letter-spacing: var(--odstep-litery-sredni);
  text-transform: uppercase;
  text-shadow: none;
  transition: filter .2s ease, box-shadow .22s ease;
}

.mapa-przycisk {
padding: 0 16px;
}

.przycisk::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--polysk);
  transform: translateX(-100%);
  transition: transform .55s ease;
  pointer-events: none;
}

.przycisk:hover {
filter: brightness(1.06);
}

.przycisk:hover::before {
transform: translateX(100%);
}

/* Warianty przycisków (w tym aliasy dla wstecznej zgodności) */
.przycisk-czerwony {
background: linear-gradient(135deg, var(--czerwony), var(--czerwony-2));
}

.przycisk-niebieski {
background: linear-gradient(135deg, var(--niebieski-2), #032b70);
}

.przycisk-zolty {
background: linear-gradient(135deg, var(--zolty-2), var(--zolty)); color: var(--granat);
}

.przycisk-przezroczysty {
border: 1px solid var(--linia-jasna-lekko); background: linear-gradient(135deg, var(--linia-jasna-bardzo-lekko), var(--linia-jasna-lekko));
}

/* =====================================================================
   ETYKIETA SEKCJI (mały napis nad tytułem)
   ===================================================================== */
.etykieta-sekcji {
display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--zolty);
  font-family: Inter, system-ui, sans-serif;
  line-height: var(--odstep-linii-maly);  
  font-size: var(--tekst-bardzo-maly);
  font-weight: var(--grubosc-tekstu-duza);
  letter-spacing: var(--odstep-litery-duzy);
  text-transform: uppercase;
}

.etykieta-sekcji::before {
content: "";
  width: 42px;
  height: 4px;
  border-radius: var(--zaokraglenie);
  background: linear-gradient(90deg, transparent, var(--czerwony));
}

.etykieta-sekcji::after {
content: "";
  width: 42px;
  height: 4px;
  border-radius: var(--zaokraglenie);
  background: linear-gradient(90deg, var(--czerwony), transparent);
}

/* Wariant z czerwoną kreską (jasne tło) */
.etykieta-sekcji-czerwona {
color: var(--czerwony);
}

/* Etykieta wyśrodkowana */
.etykieta-sekcji-centrum {
justify-content: center;
}

.etykieta-sekcji-lewa {
justify-content: flex-start;
}

/* =====================================================================
   TYTUŁY I OPISY SEKCJI
   ===================================================================== */
.tytul-sekcji {
margin: 0;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-sekcji);
  line-height: var(--odstep-linii-sredni);
  letter-spacing: var(--odstep-litery-duzy);
  text-transform: uppercase;
}

.tytul-sekcji-bialy {
color: #fff;
}

.tytul-sekcji-ciemny {
color: var(--granat);
}

.opis-sekcji {
margin: 18px 0 0;
  font-size: var(--tekst-opisu);
  font-weight: var(--grubosc-tekstu-mala);
  line-height: var(--odstep-linii-duzy);
}

.opis-sekcji-bialy {
color: var(--linia-jasna-bardzo-mocno);
}

.opis-sekcji-szary {
color: #5b6880;
}

.opis-sekcji-centrum {
margin-inline: auto; text-align:center;
}

/* =====================================================================
   TŁO PODSTRONY (wrapper pod hero)
   ===================================================================== */
.zaplecze {
position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #051225;
  color: #fff;
}

.zaplecze::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 10% 6%, rgba(227,27,35,.22), transparent 25%),
    radial-gradient(circle at 88% 10%, rgba(0,103,221,.22), transparent 26%),
    linear-gradient(180deg, #051226 0%, #061a3c 22%, #041020 66%, #061426 100%);
}

.zaplecze::after {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .14;
  background-image:
    linear-gradient(115deg, transparent 0 47%, var(--linia-jasna-bardzo-lekko) 48%, transparent 49% 100%),
    radial-gradient(circle at 18% 12%, var(--linia-jasna-lekko) 0 1px, transparent 2px);
  background-size: 220px 220px, 34px 34px;
  pointer-events: none;
}

/* =====================================================================
   STOPKA
   ===================================================================== */
.stopka {
padding: 22px 0;
  background: #252626;
}

.rzad-stopki {
align-items: center;
  gap: 28px;
  color: var(--linia-jasna-mocno);
  font-weight: var(--grubosc-tekstu-mala);
  font-size: var(--tekst-stopki);
}

.autor-stopki {
display: grid;
  gap: 6px;
  line-height: var(--odstep-linii-duzy);
  text-transform: uppercase;
  justify-content: center;
  justify-items: center;
}

.autor-stopki strong {
color: var(--bialy);
  font-size: var(--tekst-stopki);
  font-weight: var(--grubosc-tekstu-srednia);
}

.autor-stopki strong span {
color: var(--zolty);
  font-weight: var(--grubosc-tekstu-duza);
}

/* =====================================================================
   HERO STRONY GŁÓWNEJ
   ===================================================================== */
.hero-glowna {
position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  background: #071a3a;
  color: #fff;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 24px 74px;
  margin-top: calc(var(--wysokosc-naglowka) * -1);
  padding-top: 116px;
  border-bottom: 1px solid var(--linia-jasna-lekko);
}

.hero-glowna::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(180deg, rgba(5,17,43,.20), rgba(5,17,43,.18) 40%, rgba(3,10,24,.88) 100%),
    url("grafika/hero-projekt-final.webp");
  background-size: cover;
  background-position: center;
  filter: saturate(1.08);
  transform: scale(1.015);
}

.hero-glowna::after {
content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 31%, var(--linia-jasna-bardzo-lekko), transparent 24%),
    linear-gradient(90deg, rgba(2,8,22,.62), rgba(2,8,22,.12) 28%, rgba(2,8,22,.12) 70%, rgba(2,8,22,.62));
  pointer-events: none;
}

.rozpryski-farby {
position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 18%, rgba(225,27,35,.78) 0 4px, transparent 5px),
    radial-gradient(circle at 18% 53%, rgba(255,209,20,.75) 0 5px, transparent 6px),
    radial-gradient(circle at 91% 25%, rgba(0,103,221,.72) 0 4px, transparent 5px),
    radial-gradient(circle at 83% 45%, rgba(255,209,20,.82) 0 5px, transparent 6px);
  opacity: .85;
}

.tresc-hero {
position: relative;
  width: min(1460px, 100%);
  min-height: min(730px, calc(100vh - var(--wysokosc-naglowka) - 127px));
  min-height: min(730px, calc(100svh - var(--wysokosc-naglowka) - 127px));
  min-height: min(730px, calc(100dvh - var(--wysokosc-naglowka) - 127px));
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 610px) 1fr;
  align-items: start;
  gap: 20px;
}

.centrum-hero {
grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 5;
  transform: translateY(-3px);
}

.logo-hero {
width: min(560px, 74vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 34px var(--linia-ciemna-srednio)) drop-shadow(0 0 5px var(--linia-jasna-mocno));
}

.tytul-hero {
grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  margin: 1px 0 18px;
  font-family: Anton, Inter, sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--odstep-litery-duzy);
  line-height: var(--odstep-linii-sredni);
  font-size: clamp(32px, 6vw, 62px);
  text-shadow: 0 9px 0 rgba(1,15,39,.42), 0 18px 28px var(--linia-ciemna-mocno);
  z-index: 6;
}

.tytul-hero span {
color: var(--zolty);
}

.tytul-hero-podstrony span {
color: var(--zolty);
}

.tytul-sekcji span {
color: var(--zolty);
}

.rzad-przyciskow {
display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  z-index: 6;
}

/* Układ rzędu CTA w hero */
.rzad-cta {
grid-column: 1 / -1;
  grid-row: 3;
}

/* Kolumny "pędzli" (dekoracja po bokach hero) */
.kolumna-pedzli {
display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 4;
  pointer-events: none;
}

.kolumna-pedzli.lewa {
grid-column: 1;
  grid-row: 1;
  align-items: flex-end;
  padding-right: 4px;
}

.kolumna-pedzli.prawa {
grid-column: 3;
  grid-row: 1;
  align-items: flex-start;
  padding-left: 4px;
}

/* Pędzel (splash z napisem) */
.pedzel {
position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(220px, 23vw, 350px);
  min-height: 88px;
  padding: 18px 26px;
  color: #fff;
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(24px, 2.45vw, 30px);
  line-height: var(--odstep-linii-sredni);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--odstep-litery-sredni);
  text-shadow: 0 4px 0 var(--linia-ciemna-lekko), 0 10px 18px var(--linia-ciemna-srednio);
  transform: rotate(var(--r, -3deg)) translateX(var(--x, 0));
  isolation: isolate;
  backface-visibility: hidden;
}

.pedzel::before {
content: "";
  position: absolute;
  inset: -10px -20px;
  background: var(--tlo-pedzla, var(--niebieski));
  clip-path: polygon(2% 34%, 12% 22%, 4% 17%, 25% 20%, 18% 8%, 39% 15%, 51% 6%, 63% 16%, 84% 8%, 78% 22%, 98% 16%, 90% 31%, 100% 40%, 87% 48%, 98% 58%, 83% 66%, 96% 82%, 75% 76%, 63% 91%, 48% 78%, 32% 91%, 20% 78%, 4% 86%, 13% 66%, 0 59%, 14% 49%, 0 42%);
}

.pedzel::after {
content: "";
  position: absolute;
  inset: -13px -26px;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, var(--linia-jasna-lekko) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, transparent 0 4%, var(--linia-jasna-lekko) 10% 13%, transparent 19% 31%, var(--linia-ciemna-bardzo-lekko) 42% 47%, transparent 58% 70%, var(--linia-jasna-lekko) 80% 84%, transparent 94%);
  clip-path: polygon(5% 38%, 18% 25%, 7% 21%, 29% 25%, 23% 13%, 43% 19%, 53% 10%, 64% 18%, 86% 12%, 80% 26%, 98% 22%, 91% 35%, 100% 43%, 88% 52%, 99% 62%, 84% 70%, 96% 84%, 76% 79%, 64% 93%, 49% 82%, 33% 94%, 21% 82%, 5% 88%, 15% 69%, 0 62%, 15% 52%, 1% 45%);
  opacity: .55;
}

@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
.pedzel::before, .pedzel::after { clip-path: none; border-radius: var(--zaokraglenie); }
}

.pedzel span {
position: relative;
  z-index: 2;
  display: block;
  transform: translateY(-5px) skew(-5deg);
}

.pedzel.czerwony {
--tlo-pedzla: linear-gradient(90deg, #9d050d 0%, #df0d18 45%, #ff211f 60%, #a90410 100%);
}

.pedzel.niebieski {
--tlo-pedzla: linear-gradient(90deg, #032a6b 0%, #054aa9 42%, #0d75f4 62%, #032b70 100%);
}

.pedzel.bialy {
color: #08285b; --tlo-pedzla: linear-gradient(90deg, #e7edf8 0%, #fff 45%, #f7f9fe 60%, #dfe7f4 100%); text-shadow: none;
}

.pedzel.zolty {
color: #052250; --tlo-pedzla: linear-gradient(90deg, #efb900 0%, #ffd114 44%, #ffe168 60%, #f0b900 100%); text-shadow: none;
}

.pedzel.bialy::after,
.pedzel.zolty::after {
opacity: .35;
}

.pedzel-1 {
--r: -7deg; --x: 24px;
}

.pedzel-2 {
--r: -4deg; --x: -36px;
}

.pedzel-3 {
--r: -5deg; --x: 10px;
}

.pedzel-4 {
--r: -6deg; --x: -4px;
}

.pedzel-5 {
--r: 4deg; --x: -18px;
}

.pedzel-6 {
--r: -3deg; --x: 36px;
}

.pedzel-7 {
--r: -4deg; --x: -8px;
}

.pedzel-8 {
--r: 4deg; --x: 16px;
}

/* =====================================================================
   SEKCJA WYDARZEŃ (slider)
   ===================================================================== */
.sekcja-wydarzen {
background:
    linear-gradient(180deg, rgba(1,8,22,.90), rgba(2,13,35,.96)),
    radial-gradient(circle at 74% 20%, rgba(227,27,35,.22), transparent 25%),
    radial-gradient(circle at 18% 30%, rgba(0,103,221,.28), transparent 26%);
}

.obudowa-slidera {
position: relative; margin-top: 18px;
}

.slider-wydarzen {
display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
    scroll-behavior: smooth;
  transition: height .25s ease;
}

.slider-wydarzen::-webkit-scrollbar {
display: none;
}

.slajd-wydarzenia {
flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}

.karta-wydarzenia,
.karta-wydarzenia-pion {
position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--zaokraglenie);
  min-height: 430px;
  border: 1px solid var(--linia-jasna-lekko);
  background:
    linear-gradient(135deg, var(--linia-jasna-lekko), var(--linia-jasna-bardzo-lekko)),
    linear-gradient(135deg, #061632, #020916);
  box-shadow: 0 36px 90px var(--linia-ciemna-srednio);
}

.karta-wydarzenia {
grid-template-columns: minmax(330px, .92fr) 1.36fr;
}

.karta-wydarzenia-pion {
grid-template-columns: 1fr;
padding: 0;
  color: #fff;
}

.informacje-wydarzenia {
position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background:
    radial-gradient(circle at 12% 12%, rgba(0,103,221,.34), transparent 34%),
    linear-gradient(90deg, rgba(3,15,39,.94), rgba(3,15,39,.82) 74%, rgba(3,15,39,0));
}

.informacje-wydarzenia-pion {
position: relative;
  z-index: 2;
  padding: clamp(18px, 4vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background:
    radial-gradient(circle at 12% 12%, rgba(0,103,221,.34), transparent 34%),
    linear-gradient(90deg, rgba(3,15,39,.94), rgba(3,15,39,.82) 74%, rgba(3,15,39,0));
}

.etykiety-wydarzenia,
.etykiety-wydarzenia-pion {
display: flex;
  align-items: center;
  gap: 16px;
}

.etykiety-wydarzenia {
margin-bottom: 22px;
}

.znacznik-dyscypliny {
 display: inline-flex;
  place-items: center;
  padding: 12px 18px;
  border-radius: var(--zaokraglenie);
  background: rgba(21, 56, 103, .8);
  box-shadow: 0 12px 28px var(--linia-ciemna-lekko);
  color: var(--bialy);
  font-weight: var(--grubosc-tekstu-duza);
  font-size: var(--tekst-maly);
  text-transform: uppercase;
}



	
	
	

.rodzaj-wydarzenia {
position: absolute;
  bottom: 24px;
  top: auto;
  left: 24px;
  z-index: 3;
  display: inline-flex;
  padding: 12px 18px;
  border-radius: var(--zaokraglenie);
  background: rgba(21,56,103,.8);
  color: var(--bialy);
  font-weight: var(--grubosc-tekstu-duza);
  font-size: var(--tekst-maly);
  text-transform: uppercase;
  box-shadow: 0 12px 28px var(--linia-ciemna-lekko);
}

.karta-wydarzenia h3,
.karta-wydarzenia-pion h3 {
margin: 0;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-karty);
  line-height: var(--odstep-linii-sredni);
  text-transform: uppercase;
  letter-spacing: var(--odstep-litery-duzy);
  color: var(--zolty);
  padding-bottom: 20px;
}

/* W sliderze nazwa wydarzenia korzysta z gwiazdek w polu nazwa_kod:
   zwykła część jest biała, a wyróżniony fragment — żółty. */
.karta-wydarzenia h3 {
  color: var(--bialy);
}

.karta-wydarzenia h3 span {
  color: var(--zolty);
}

.karta-wydarzenia small,
.karta-wydarzenia-pion small {
font-size: var(--tekst-opisu);
  color: var(--linia-jasna-bardzo-mocno);
  line-height: var(--odstep-linii-duzy);
}

.meta-wydarzenia {
display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 28px 0;
}

.meta-wydarzenia-pion {
display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.kapsulka-meta {
padding: 14px 16px;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: var(--zaokraglenie);
  background: var(--linia-jasna-bardzo-lekko);
  color: #fff;
  font-weight: var(--grubosc-tekstu-duza);
  font-size: var(--tekst-opisu);
}

.kapsulka-meta strong {
display: block;
  color: var(--zolty);
  text-transform: uppercase;
  font-size: var(--tekst-stopki);
}

.obraz-wydarzenia {
position: relative;
  overflow: hidden;
  min-height: 430px;
  text-align: right;
  background:
    linear-gradient(90deg, rgba(2,8,20,.2), transparent 20%),
    var(--gradient-wydarzenia);
}

.zdjecie-wydarzenia {
position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.obraz-wydarzenia::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,15,39,.35), rgba(3,15,39,0) 28%, rgba(3,15,39,.2) 100%),
    radial-gradient(circle at 60% 10%, rgba(255,209,20,.28), transparent 25%);
}

.obraz-wydarzenia > :not(.zdjecie-wydarzenia):not(.rodzaj-wydarzenia):not(.status-wydarzenia):not(.status-wydarzenia-planowanego) {
position: relative;
  z-index: 2;
}

.tytul-wycentrowany {
text-align: center;
}

.rzad-przyciskow-wycentrowany {
justify-content: center; margin-top: 8px;
}

.status-wydarzenia,
.status-wydarzenia-planowanego {
position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: inline-flex;
  padding: 12px 18px;
  border-radius: var(--zaokraglenie);
  background: var(--zolty);
  color: var(--granat);
  font-weight: var(--grubosc-tekstu-duza);
  font-size: var(--tekst-maly);
  text-transform: uppercase;
  box-shadow: 0 12px 28px var(--linia-ciemna-lekko);
}

.status-wydarzenia::before {
content: "";
  width: var(--tekst-maly);
  height: var(--tekst-maly);
  margin: 2px 4px 0 0;
  padding: 0;
  border-radius: var(--zaokraglenie);
  background: var(--czerwony-2);
  box-shadow: 0 0 18px rgba(255,209,20,.92);
  animation: puls-wydarzenia 1.8s ease-in-out infinite;
}

@keyframes puls-wydarzenia {
0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(.72); opacity: .56; }
}

.nawigacja-slidera {
margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.strzalka-slidera {
width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 24px;
  color: #fff;
  background: var(--linia-jasna-bardzo-lekko);
  box-shadow: inset 0 1px 0 var(--linia-jasna-lekko);
  transition: background .2s ease, color .2s ease;
}

.strzalka-slidera:hover {
background: var(--zolty); color: var(--granat);
}

/* =====================================================================
   SEKCJA "DLACZEGO WARTO"
   ===================================================================== */
.sekcja-dlaczego {
background: linear-gradient(180deg, #071632 0%, #08285b 100%);
  overflow: hidden;
}

.sekcja-dlaczego::before {
content: "";
  position: absolute;
  right: -14%;
  top: 12%;
  width: 42%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(227,27,35,.38), transparent 62%);
  filter: blur(4px);
}

.siatka-dlaczego {
margin-top: 38px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(32px, 5vw, 70px);
}

.lista-dlaczego {
display: grid; gap: 18px;
}

.element-dlaczego {
display: grid;
  grid-template-columns: clamp(58px, 5vw, 72px) 1fr;
  gap: 18px;
  align-items: start;
  text-align: left;
  padding: 20px;
  border-radius: var(--zaokraglenie);
  border: 1px solid var(--linia-jasna-lekko);
  background: linear-gradient(135deg, var(--linia-jasna-lekko), var(--linia-jasna-bardzo-lekko));
}

.ikona-dlaczego {
color: var(--bialy);
  display: grid;
  place-items: center;
  width:  clamp(50px, 5vw, 64px);
  height: clamp(50px, 5vw, 64px);
  border-radius: 50%;
  font-size: var(--tekst-opisu);
  font-family: Anton, Inter, sans-serif;
  border: 1px solid var(--linia-jasna-lekko);
  box-shadow: 0 0 28px rgba(0,103,221,.35);
  font-size: var(--tekst-tytul-kafelka);
}

.element-dlaczego h3 {
color: var(--zolty);
  margin: 0 0 12px;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-kafelka);
  letter-spacing: var(--odstep-litery-duzy);
  text-transform: uppercase;
}

.element-dlaczego p {
margin: 0;
  font-size: var(--tekst-opisu);
  color: var(--linia-jasna-bardzo-mocno);
  line-height: var(--odstep-linii-duzy);
}

.zdjecie-dlaczego {
position: relative;
  min-height: 560px;
  border-radius: var(--zaokraglenie);
  overflow: hidden;
  background: url("grafika/dzieci.webp") center / cover no-repeat;
  box-shadow: 0 40px 90px var(--linia-ciemna-srednio);
}

.zdjecie-dlaczego::before {
content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(3,15,39,.82));
}

.naklejka-dlaczego {
position: absolute;
  left: 28px;
  bottom: 28px;
  max-width: 360px;
  padding: 22px 24px;
  border-radius: var(--zaokraglenie);
  background: var(--linia-jasna-bardzo-mocno);
  color: var(--granat);
  font-size: var(--tekst-opisu);
  line-height: var(--odstep-linii-duzy);
  box-shadow: 0 24px 50px var(--linia-ciemna-lekko);
  transform: rotate(-2deg);
}

.naklejka-dlaczego strong {
font-family: Anton, Inter, sans-serif;
  font-size: 34px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
  line-height: 34px;
}

/* =====================================================================
   SEKCJA OFERTY / ARENA
   ===================================================================== */
.sekcja-oferty {
position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,209,20,.12), transparent 22%),
    radial-gradient(circle at 15% 20%, rgba(0,103,221,.18), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(227,27,35,.16), transparent 28%),
    linear-gradient(180deg, #081833 0%, #0b2452 38%, #071a3d 100%);
  color: #fff;
}

.sekcja-oferty::before {
content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,12,28,.14) 0%, rgba(4,12,28,.08) 36%, rgba(4,12,28,.18) 100%);
  pointer-events: none;
}

.arena-zalozen {
position: relative;
  min-height: 720px;
  margin-top: 40px;
  margin-bottom: 40px;
  display: grid;
  place-items: center;
}

.pierscien-areny {
position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vw, 700px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 36px rgba(255, 255, 255, .12), 0 0 0 78px rgba(255, 255, 255, .05);
}

.pierscien-areny::before {
content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 1px solid var(--linia-jasna-bardzo-lekko);
}

.pierscien-areny::after {
content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 1px solid var(--linia-jasna-bardzo-lekko);
}

.stadion-areny {
position: relative;
  z-index: 2;
  width: min(74vw, 720px);
  filter: drop-shadow(0 34px 54px var(--linia-ciemna-srednio));
  pointer-events: none;
}

.karta-zalozenia {
position: absolute;
  z-index: 6;
  max-width: 490px;
  overflow: visible;
  border-radius: var(--zaokraglenie);
  background: var(--bialy);
  color: var(--granat);
  border: 1px solid rgba(149,149,150,.90);
  box-shadow: 0 24px 48px var(--linia-ciemna-lekko);
  display: grid;
  grid-template-columns: 148px 1fr;
  align-items: stretch;
  text-align: left;
}

.karta-zalozenia::before {
content: attr(data-numer);
  position: absolute;
  left: -14px;
  top: -14px;
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--zolty);
  color: var(--granat);
  font-family: Anton, Inter, sans-serif;
  font-size: 22px;
  box-shadow: 0 10px 22px var(--linia-ciemna-lekko);
}

.zdjecie-zalozenia {
  height: auto;
  /* min-height: 148px; */
  align-self: stretch;
  border-radius: var(--zaokraglenie) 0 0 var(--zaokraglenie);
  background: var(--zdjecie) center / cover no-repeat;
}

.zalozenie-zdjecie-1 {
--zdjecie: url("grafika/zdjecie6.webp");
}

.zalozenie-zdjecie-2 {
--zdjecie: url("grafika/zdjecie4.webp");
}

.zalozenie-zdjecie-3 {
--zdjecie: url("grafika/zdjecie3.webp");
}

.zalozenie-zdjecie-4 {
--zdjecie: url("grafika/zdjecie2.webp");
}

.zalozenie-zdjecie-5 {
--zdjecie: url("grafika/zdjecie1.webp");
}

.zalozenie-zdjecie-6 {
--zdjecie: url("grafika/zdjecie5.webp");
}

.opis-zalozenia {
display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  gap: 9px;
  min-width: 0;
}

.opis-zalozenia h3 {
margin: 0;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-kafelka);
  line-height: var(--odstep-linii-sredni);
  text-transform: uppercase;
  letter-spacing: var(--odstep-litery-maly);
}

.opis-zalozenia p {
margin: 0;
  color: var(--tusz);
  font-size: var(--tekst-maly);
  line-height: var(--odstep-linii-duzy);
  font-weight: var(--grubosc-tekstu-mala);
}

/* Pozycje kart na "arenie" */
.karta-zalozenia-1 {
left: 50%; top: -6px;     transform: translateX(-50%);
}

.karta-zalozenia-2 {
top: 188px;  left: 104px;
}

.karta-zalozenia-3 {
top: 188px;  right: 104px;
}

.karta-zalozenia-4 {
bottom: 158px; left: 72px;
}

.karta-zalozenia-5 {
bottom: 158px; right: 72px;
}

.karta-zalozenia-6 {
left: 50%; bottom: -38px; transform: translateX(-50%);
}

/* =====================================================================
   SEKCJA "DLA KOGO"
   ===================================================================== */
.sekcja-odbiorcow {
background:
    radial-gradient(circle at 20% 12%, rgba(227,27,35,.22), transparent 25%),
    linear-gradient(180deg, #071632, #020916);
}

.siatka-odbiorcow {
margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.karta-odbiorcy {
position: relative;
  overflow: hidden;
  border-radius: var(--zaokraglenie);
  border: 1px solid var(--linia-jasna-lekko);
  background: var(--granat);
  box-shadow: 0 34px 80px var(--linia-ciemna-srednio);
  display: flex;
  flex-direction: column;
text-align: left;
}

.zdjecie-odbiorcy {
width: 100%;
  height: 260px;
  flex: 0 0 260px;
  background: var(--zdjecie-odbiorcy) center / cover no-repeat;
}

.tresc-odbiorcy {
position: relative;
  z-index: 2;
  padding: 30px 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tresc-odbiorcy h3 {
margin: 0 0 16px;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-kafelka);
  line-height: var(--odstep-linii-sredni);
  letter-spacing: var(--odstep-litery-duzy);
  text-transform: uppercase;
  color: var(--zolty);
  text-align: center;
}

.tresc-odbiorcy p {
margin: 0 0 24px;
  color: var(--linia-jasna-bardzo-mocno);
  line-height: var(--odstep-linii-duzy);
  font-weight: var(--grubosc-tekstu-mala);
  font-size: var(--tekst-opisu);
}

.tresc-odbiorcy .przycisk {
margin-top: auto;
}

.karta-odbiorcy-czerwona {
background: #8d0710;
}

.karta-odbiorcy-niebieska {
background: #08285b;
}

.odbiorcy-rodzice {
--zdjecie-odbiorcy: url("grafika/dorosli.webp");
}

.odbiorcy-dzieci {
--zdjecie-odbiorcy: url("grafika/dzieciimlodziez.webp");
}

.odbiorcy-placowki {
--zdjecie-odbiorcy: url("grafika/placowki.webp");
}

/* =====================================================================
   SEKCJA STATYSTYK
   ===================================================================== */
.sekcja-statystyk {
background:
    radial-gradient(circle at 16% 16%, rgba(0,103,221,.24), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(227,27,35,.22), transparent 28%),
    linear-gradient(180deg, #071632 0%, #020916 100%);
  color: #fff;
}

.siatka-statystyk {
margin-top: 42px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.kafel-statystyki {
padding: 22px 16px;
  border-radius: var(--zaokraglenie);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, var(--linia-jasna-lekko), var(--linia-jasna-bardzo-lekko));
  border: 1px solid var(--linia-jasna-lekko);
}

.naglowek-statystyki {
color: var(--zolty);
  font-weight: var(--grubosc-tekstu-srednia);
  font-size: clamp(18px, 2vw, 24px);
  line-height: var(--odstep-linii-duzy);
  letter-spacing: var(--odstep-litery-duzy);
  font-family: Anton, Inter, sans-serif;
  text-transform: uppercase;
}

.wartosc-statystyki {
margin: 10px 0 8px;
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(42px, 5vw, 60px);
  line-height: var(--odstep-linii-maly);
  text-shadow: 0 0 28px var(--linia-jasna-lekko);
}

.opis-statystyki {
color: var(--linia-jasna-bardzo-mocno);
  font-size: var(--tekst-opisu);
  line-height: var(--odstep-linii-sredni);
  font-weight: var(--grubosc-tekstu-mala);
}

.kafel-statystyki span {
display: block;
  color: var(--czerwony);
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(38px, 4vw, 62px);
  line-height: var(--odstep-linii-maly);
}

.kafel-statystyki p {
margin: 0;
  color: var(--przygaszony);
  font-weight: var(--grubosc-tekstu-duza);
  line-height: var(--odstep-linii-duzy);
}

.karta-odbiorcy img {
width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: calc(var(--zaokraglenie) - 4px);
}

.strona-wydarzenia {

  background: #041225;
}

.hero-wydarzenia {
position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  margin-top: calc(var(--wysokosc-naglowka) * -1);
  padding: calc(var(--wysokosc-naglowka) + clamp(54px, 6vw, 94px)) 0 clamp(54px, 6vw, 86px);
  overflow: hidden;
}

.zdjecie-tla-wydarzenia {
position: absolute;
  inset: 0;
  z-index: -5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-wydarzenia::before {
content: "";
  position: absolute;
    inset: 0;
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(2,8,22,.90), rgba(2,8,22,.60) 42%, rgba(2,8,22,.40) 70%, rgba(2,8,22,.10)),
    linear-gradient(180deg, rgba(5,16,41,.10), rgba(3,10,24,.30));
}

.hero-wydarzenia::after {
content: "";
  position: absolute;
  inset: -10px 0 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(227,27,35,.28), transparent 30%),
    radial-gradient(circle at 80% 18%, rgba(0,103,221,.28), transparent 28%);
}

.hero-wydarzenia-wnetrze {
position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr);
  gap: clamp(34px, 5vw, 80px);
  width: min(var(--szerokosc-pojemnika), calc(100% - 48px));
  margin-inline: auto;
  align-items: center;
}

.tytul-hero-wydarzenia {
margin: 0;
  max-width: 960px;
  color: var(--bialy);
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(50px, 6.6vw, 96px);
  line-height: var(--odstep-linii-sredni);
  text-transform: uppercase;
}

.tytul-hero-wydarzenia span {
  color: var(--zolty);
}

.opis-hero-wydarzenia {
max-width: 820px;
  margin: 14px 0 20px;
  color: var(--linia-jasna-bardzo-mocno);
  font-size: var(--tekst-opisu);
  font-weight: var(--grubosc-tekstu-srednia);
  line-height: var(--odstep-linii-duzy);
}

.rzad-przyciskow-hero {
display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.karta-wydarzenia-pion h2 {
margin: 18px 0 12px;
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(34px, 4vw, 58px);
  line-height: var(--odstep-linii-sredni);
  text-transform: uppercase;
}

.karta-wydarzenia-pion p {
color: var(--linia-jasna-bardzo-mocno);
  font-weight: var(--grubosc-tekstu-srednia);
  line-height: var(--odstep-linii-duzy);
}

.karta-wydarzenia-pion dl {
display: grid;
  gap: 12px;
  margin: 26px 0 0;
}

.karta-wydarzenia-pion dl div {
display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: 14px;
  background: var(--linia-jasna-bardzo-lekko);
}

.karta-wydarzenia-pion dt {
color: var(--zolty);
  font-size: 12px;
  font-weight: var(--grubosc-tekstu-duza);
  text-transform: uppercase;
}

.karta-wydarzenia-pion dd {
margin: 0;
  font-weight: var(--grubosc-tekstu-srednia);
}

.uklad-mapy {
display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: self-start;
position: relative;
  z-index: 2;
  gap: 28px;
}

.filtry-mapy {
display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.filtr-mapy.aktywny,
.filtr-mapy[aria-pressed="true"] {
border-color: var(--zolty);
  background: linear-gradient(135deg, var(--zolty-2), var(--zolty));
  color: var(--granat);
}

.mapa-kontener {
position: relative;
  overflow: hidden;
  width: 100%;
  height: 474px;
  min-height: 474px;
  border-radius: var(--zaokraglenie);
  background: var(--linia-jasna-bardzo-lekko);
border: 1px solid var(--linia-jasna-lekko);
  background:
    linear-gradient(115deg, rgba(3,18,45,.96), rgba(8,40,91,.72)),
    radial-gradient(circle at 20% 22%, rgba(255,209,20,.16), transparent 24%),
    radial-gradient(circle at 76% 42%, rgba(227,27,35,.16), transparent 28%);
}

.legenda-mapy {
display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  color: var(--linia-jasna-bardzo-mocno);
  font-size: var(--tekst-maly);
  font-weight: var(--grubosc-tekstu-mala);
gap: 12px 20px;
  justify-content: center;
}

.legenda-mapy span {
display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kropka-legendy {
width: var(--tekst-maly);
  height: var(--tekst-maly);
  border-radius: 999px;
  display: inline-block;
}

.kropka-legendy-zolta { background: var(--zolty); }
.kropka-legendy-czerwona { background: var(--czerwony); }
.kropka-legendy-niebieska { background: var(--niebieski-2); }

.karta-placowki {
position: relative;
  overflow: hidden;
  padding: 24px 24px 24px 31px;
  color: var(--bialy);
  border-radius: var(--zaokraglenie);
  border: 1px solid var(--linia-jasna-lekko);
  background: linear-gradient(135deg, var(--linia-jasna-lekko), var(--linia-jasna-bardzo-lekko));
  text-align: left;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.karta-placowki::before {
content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--akcent-placowki);
}

.karta-kolor-przedszkole {
--akcent-placowki: var(--zolty);
}

.karta-kolor-szkola {
--akcent-placowki: var(--czerwony);
}

.karta-kolor-technikum {
--akcent-placowki: var(--niebieski);
}

.karta-placowki:hover,
.karta-placowki:focus-visible {
outline: none;
  transform: translateY(-4px);
  cursor: pointer;
}

.gora-placowki {
display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.typ-placowki {
display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: var(--zaokraglenie);
  background: var(--zolty);
  color: var(--granat);
  font-weight: var(--grubosc-tekstu-duza);
}

.numer-placowki {
display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: var(--zaokraglenie);
  background: var(--zolty);
  color: var(--granat);
  font-weight: var(--grubosc-tekstu-duza);
}

.numer-placowki {
background: var(--linia-jasna-bardzo-lekko);
  color: var(--linia-jasna-bardzo-mocno);
display: grid;
  place-items: center;
  width: clamp(50px, 5vw, 64px);
  height: clamp(50px, 5vw, 64px);
  min-height: 0;
  padding: 0;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: 50%;
  background: var(--linia-jasna-bardzo-lekko);
  color: var(--bialy);
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-kafelka);
  font-weight: var(--grubosc-tekstu-mala);
  line-height: var(--odstep-linii-maly);
  box-shadow: 0 0 28px var(--linia-jasna-srednio);
}

.karta-placowki h3 {
margin: 24px 0 10px;
  color: var(--zolty);
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(24px, 2vw, 32px);
  line-height: var(--odstep-linii-sredni);
  letter-spacing: var(--odstep-litery-duzy);
  text-transform: uppercase;
}

.karta-placowki p {
margin: 0 0 18px;
  color: var(--linia-jasna-bardzo-mocno);
  font-weight: var(--grubosc-tekstu-srednia);
  line-height: var(--odstep-linii-duzy);
}

.karta-placowki dl {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.karta-placowki dl div {
padding: 10px;
  border-radius: 12px;
  background: var(--linia-jasna-bardzo-lekko);
}

.karta-placowki dt {
color: var(--linia-jasna-mocno);
  font-size: 11px;
  font-weight: var(--grubosc-tekstu-duza);
  text-transform: uppercase;
}

.karta-placowki dd {
margin: 4px 0 0;
  color: #fff;
  font-size: 22px;
  font-weight: var(--grubosc-tekstu-duza);
}

.mini-progress {
overflow: hidden;
  width: 100%;
  height: 8px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--linia-jasna-lekko);
  appearance: none;
}

.mini-progress::-webkit-progress-bar {
background: var(--linia-jasna-lekko);
}

.mini-progress::-webkit-progress-value {
background: linear-gradient(90deg, var(--czerwony), var(--zolty));
}

.mini-progress::-moz-progress-bar {
background: linear-gradient(90deg, var(--czerwony), var(--zolty));
}

.tlo-event-noc {
background:
    radial-gradient(circle at 12% 12%, rgba(0,103,221,.27), transparent 27%),
    radial-gradient(circle at 88% 18%, rgba(227,27,35,.22), transparent 27%),
    radial-gradient(circle at 50% 0%, rgba(255,209,20,.10), transparent 26%),
    linear-gradient(180deg, #071632 0%, #020916 100%);
}

.tlo-event-arena {
background:
    radial-gradient(circle at 50% 0%, rgba(255,209,20,.12), transparent 22%),
    radial-gradient(circle at 15% 20%, rgba(0,103,221,.18), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(227,27,35,.16), transparent 28%),
    linear-gradient(180deg, #081833 0%, #0b2452 38%, #071a3d 100%);
}

.sekcja-wydarzenia {
position: relative;
  overflow: hidden;
}

.dekoracja-sekcji {
position: absolute;
  pointer-events: none;
  opacity: .18;
  z-index: 0;
}

.dekoracja-sekcji-kolo {
width: min(520px, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--linia-jasna-lekko);
  box-shadow: inset 0 0 0 24px var(--linia-jasna-bardzo-lekko), 0 0 90px rgba(0,103,221,.2);
}

.dekoracja-sekcji-prawa {
right: -12%; bottom: -18%;
}

.karta-szklana {
position: relative;
  overflow: hidden;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: var(--zaokraglenie);
  background: linear-gradient(145deg, var(--linia-jasna-lekko), var(--linia-jasna-bardzo-lekko));
  box-shadow: var(--cien), inset 0 1px 0 var(--linia-jasna-bardzo-lekko);
  text-align: left;
}

.modul-mapy {
padding: clamp(18px, 2vw, 26px);
  min-height: 620px;
}

.kropka-legendy {
display: inline-block;
  flex: 0 0 auto;
  border: 2px solid var(--bialy);
}

.linia-legendy {
display: inline-block;
  flex: 0 0 auto;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: #877c7d;
}

.metryka-archiwum {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(1020px, 100%);
  margin: 28px auto 0;
}

.metryka-archiwum .kafel-statystyki {
min-height: 100px;
  padding: 18px 14px;
}

.metryka-archiwum .wartosc-statystyki {
font-family: Inter, Anton, sans-serif;
  font-size: clamp(22px, 1.6vw, 26px);
  font-weight: var(--grubosc-tekstu-srednia);
  line-height: var(--odstep-linii-sredni);
}

.typ-placowki {
display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border: 3px solid var(--linia-jasna-bardzo-mocno);
  border-radius: var(--zaokraglenie);
  background: var(--linia-jasna-bardzo-lekko);
  color: var(--linia-jasna-bardzo-mocno);
  font-size: clamp(12px, .95vw, 14px);
  font-weight: var(--grubosc-tekstu-duza);
  letter-spacing: var(--odstep-litery-duzy);
  text-transform: uppercase;
}

.karta-placowki-szkola .typ-placowki {
background: var(--czerwony);
  color: #fff;
}

.karta-placowki-technikum .typ-placowki {
background: var(--niebieski);
  color: #fff;
}

.karta-placowki-przedszkole .typ-placowki {
background: var(--zolty);
  color: var(--granat);
}

.adres-placowki {
margin: 14px 0 18px;
  color: var(--linia-jasna-bardzo-mocno);
  font-size: var(--tekst-opisu);
  line-height: var(--odstep-linii-duzy);
}

.dol-placowki {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--linia-jasna-lekko);
}

.dol-placowki span {
color: var(--linia-jasna-mocno);
  font-size: 16px;
  font-weight: var(--grubosc-tekstu-duza);
  letter-spacing: var(--odstep-litery-duzy);
  text-transform: uppercase;
}

.dol-placowki b {
color: var(--zolty);
  font-size: clamp(18px, 2.8vw, 20px);
}

.filtr-dodatek {
white-space: nowrap;
}

.custom-marker {
display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--linia-jasna-bardzo-mocno);
  border-radius: 50%;
  color: #fff;
  font-family: Anton, Inter, sans-serif;
  font-size: 15px;
  line-height: var(--odstep-linii-maly);
  letter-spacing: var(--odstep-litery-maly);
  align-content: center;  
  text-transform: uppercase;
  box-shadow: 0 14px 28px var(--linia-ciemna-srednio);
}

.custom-marker span {
display: block;
  transform: translateY(1px);
}

.custom-marker .marker-glowny {
font-size: 15px;
  height: 18px;
  line-height: var(--odstep-linii-maly);
  letter-spacing: var(--odstep-litery-maly);
  transform: translateY(0);
}

.custom-marker .marker-miasto {
display: block;
  max-width: 32px;
  margin-top: 0;
  overflow: hidden;
  color: currentColor;
  font-family: Inter, sans-serif;
  font-size: 7px;
  font-weight: var(--grubosc-tekstu-duza);
  line-height: var(--odstep-linii-maly);
  letter-spacing: .04px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-marker.szkola {
background: var(--czerwony);
}

.custom-marker.przedszkole {
background: var(--zolty); color: var(--granat);
}

.custom-marker.technikum {
background: var(--niebieski-2);
}

.custom-marker.pickup,
.custom-marker.stadium {
background: var(--granat); color: var(--bialy);
}

.custom-marker.pickup span {
font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: var(--grubosc-tekstu-duza);
  letter-spacing: var(--odstep-litery-maly);
}

.custom-marker.stadium span {
font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: var(--grubosc-tekstu-duza);
  letter-spacing: var(--odstep-litery-maly);
}

.popup-title {
color: var(--granat);
  font-weight: var(--grubosc-tekstu-duza);
  line-height: var(--odstep-linii-sredni);
}

.popup-meta {
margin-top: 6px;
  color: #34415c;
  font-weight: var(--grubosc-tekstu-srednia);
  line-height: var(--odstep-linii-duzy);
}

.popup-meta strong {
color: var(--granat);
  font-weight: var(--grubosc-tekstu-duza);
}

.siatka-partnerow {
position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.siatka-partnerow > .karta-partnera {
  flex: 0 1 calc((100% - 54px) / 4);
  min-width: 0;
}

.karta-partnera {
display: grid;
  gap: 16px;
  padding: 28px;
  /* min-height: 250px; */
  align-content: center;
  justify-items: center;
  text-align: center;
  border: 1px solid var(--linia-jasna-lekko);
  background: linear-gradient(145deg, var(--linia-ciemna-lekko), var(--linia-ciemna-bardzo-lekko));
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.karta-partnera:hover,
.karta-partnera:focus-within {
transform: translateY(-4px);
}

.logo-partnera {
display: block;
  width: min(210px, 78%);
  aspect-ratio: 3 / 1.2;
  filter: drop-shadow(0 12px 22px var(--linia-ciemna-lekko));
}

.logo-partnera img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.karta-partnera h3 {
margin: 0;
  color: var(--zolty);
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-kafelka);
  line-height: var(--odstep-linii-sredni);
  letter-spacing: var(--odstep-litery-sredni);
  text-transform: uppercase;
}

.kategoria-partnera {
color: var(--bialy);
  font-size: var(--tekst-bardzo-maly);
  font-weight: var(--grubosc-tekstu-duza);
  letter-spacing: var(--odstep-litery-duzy);
  text-transform: uppercase;
}

/* =====================================================================
   HERO PODSTRON (kontakt / zasady)
   ===================================================================== */
.hero-podstrony {
position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  margin-top: calc(var(--wysokosc-naglowka) * -1);
  padding: calc(var(--wysokosc-naglowka) + 68px) 0 60px;
  overflow: hidden;
  border-bottom: 1px solid var(--linia-jasna-lekko);
  background: transparent;
  color: #fff;
}

.hero-podstrony::after {
content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* Hero kontakt */
.hero-kontakt::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(2,8,22,.90), rgba(2,8,22,.60) 42%, rgba(2,8,22,.40) 70%, rgba(2,8,22,.10)),
    linear-gradient(180deg, rgba(5,16,41,.10), rgba(3,10,24,.30)),
    url("grafika/hero-kontakt.webp") center / cover no-repeat;
}

.hero-kontakt::after {
background:
    radial-gradient(circle at 16% 28%, rgba(255,209,20,.22), transparent 24%),
    radial-gradient(circle at 80% 18%, rgba(0,103,221,.20), transparent 28%),
    radial-gradient(circle at 78% 74%, rgba(227,27,35,.18), transparent 28%),
    linear-gradient(180deg, transparent 70%, rgba(4,18,36,.88));
}

/* Hero zasady */
.hero-zasady::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(2,8,22,.90), rgba(2,8,22,.60) 42%, rgba(2,8,22,.40) 70%, rgba(2,8,22,.10)),
    linear-gradient(180deg, rgba(5,16,41,.10), rgba(3,10,24,.30)),
    url("grafika/hero-zasady.webp") center / cover no-repeat;
}

.hero-archiwum::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(2,8,22,.88), rgba(2,8,22,.56) 38%, rgba(2,8,22,.25) 68%, rgba(2,8,22,.70)),
    linear-gradient(180deg, rgba(5,16,41,.20), rgba(3,10,24,.88));
}

.zdjecie-tla-podstrony {
position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-zasady::after {
background:
    radial-gradient(circle at 17% 30%, rgba(255,209,20,.20), transparent 24%),
    radial-gradient(circle at 78% 20%, rgba(0,103,221,.18), transparent 28%),
    linear-gradient(180deg, transparent 72%, rgba(4,18,36,.84));
}

.tresc-hero-podstrony {
width: min(var(--szerokosc-pojemnika), calc(100% - 48px));
  margin-inline: auto;
  text-align: center;
}

.hero-podstrony .etykieta-sekcji {
justify-content: center;
}

.tytul-hero-podstrony {
margin: 0;
  margin-inline: auto;
  /* max-width: 90%; */
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(40px, 6.6vw, 96px);
  line-height: var(--odstep-linii-sredni);
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 9px 0 rgba(1,15,39,.42), 0 18px 28px var(--linia-ciemna-mocno);
}

.opis-hero-podstrony {
margin: 14px auto 20px;
  color: var(--linia-jasna-bardzo-mocno);
  font-size: var(--tekst-opisu);
  font-weight: var(--grubosc-tekstu-srednia);
  line-height: var(--odstep-linii-duzy);
  /* max-width: 80%; */
}

.hero-kontakt .tresc-hero-podstrony,
.hero-zasady .tresc-hero-podstrony,
.hero-archiwum .tresc-hero-podstrony {
text-align: center;
}

.hero-podstrony .rzad-przyciskow {
justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.hero-podstrony .rzad-przyciskow-hero {
justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

/* Rozpryski (dekoracja) */

.rozpryski {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .88;
  background: var(--rozpryski-tlo);
}

.rozpryski-miejsce1 {
  --rozpryski-tlo:
    radial-gradient(circle at 7% 21%, rgba(225, 27, 35, .78) 0 4px, transparent 5px),
    radial-gradient(circle at 16% 62%, rgba(255, 209, 20, .76) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 27%, rgba(0, 103, 221, .74) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 71%, rgba(255, 209, 20, .72) 0 6px, transparent 7px);
}

.rozpryski-miejsce2 {
  --rozpryski-tlo:
    radial-gradient(circle at 12% 74%, rgba(225, 27, 35, .76) 0 5px, transparent 6px),
    radial-gradient(circle at 24% 18%, rgba(255, 209, 20, .74) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 39%, rgba(0, 103, 221, .76) 0 5px, transparent 6px),
    radial-gradient(circle at 94% 82%, rgba(255, 209, 20, .70) 0 6px, transparent 7px);
}

.rozpryski-miejsce4 {
  --rozpryski-tlo:
    radial-gradient(circle at 5% 48%, rgba(225, 27, 35, .74) 0 4px, transparent 5px),
    radial-gradient(circle at 33% 82%, rgba(255, 209, 20, .78) 0 6px, transparent 7px),
    radial-gradient(circle at 68% 14%, rgba(0, 103, 221, .72) 0 5px, transparent 6px),
    radial-gradient(circle at 91% 53%, rgba(255, 209, 20, .74) 0 4px, transparent 5px);
}

.rozpryski-miejsce3 {
  --rozpryski-tlo:
    radial-gradient(circle at 18% 31%, rgba(225, 27, 35, .78) 0 6px, transparent 7px),
    radial-gradient(circle at 41% 12%, rgba(255, 209, 20, .72) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 66%, rgba(0, 103, 221, .76) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 91%, rgba(255, 209, 20, .70) 0 6px, transparent 7px);
}

.rozpryski-miejsce5 {
  --rozpryski-tlo:
    radial-gradient(circle at 49% 12%, rgba(225, 27, 35, .76) 0 5px, transparent 6px),
    radial-gradient(circle at 28% 33%, rgba(255, 209, 20, .74) 0 4px, transparent 5px),
    radial-gradient(circle at 76% 21%, rgba(0, 103, 221, .78) 0 6px, transparent 7px),
    radial-gradient(circle at 80% 78%, rgba(255, 209, 20, .72) 0 5px, transparent 6px);
}

.rozpryski-miejsce6 {
  --rozpryski-tlo:
    radial-gradient(circle at 14% 12%, rgba(225, 27, 35, .72) 0 4px, transparent 5px),
    radial-gradient(circle at 39% 69%, rgba(255, 209, 20, .78) 0 6px, transparent 7px),
    radial-gradient(circle at 71% 84%, rgba(0, 103, 221, .74) 0 5px, transparent 6px),
    radial-gradient(circle at 89% 19%, rgba(255, 209, 20, .76) 0 4px, transparent 5px);
}


/* =====================================================================
   NAGŁÓWEK SEKCJI (na podstronach)
   ===================================================================== */
.naglowek-sekcji {
display: grid;
  padding-top: 6px;
  margin-bottom: 26px;
  text-align: center;
}

.naglowek-sekcji-centrum {
max-width: 100%;
  text-align: center;
}

/* =====================================================================
   FAQ — AKORDEONY (zasady.html)
   ===================================================================== */
.sekcja-faq-dzieci {
background:
    radial-gradient(circle at 12% 14%, rgba(255,209,20,.13), transparent 24%),
    radial-gradient(circle at 85% 10%, rgba(0,103,221,.15), transparent 24%),
    linear-gradient(180deg, #0c203b 0%, #071a33 100%);
}

.sekcja-faq-rodzice {
background:
    radial-gradient(circle at 84% 10%, rgba(255,209,20,.11), transparent 24%),
    radial-gradient(circle at 13% 18%, rgba(0,103,221,.12), transparent 24%),
    linear-gradient(180deg, #07131f 0%, #0a1726 100%);
}

.sekcja-faq-placowki {
background:
    radial-gradient(circle at 16% 16%, rgba(0,103,221,.24), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(227,27,35,.22), transparent 28%),
    linear-gradient(180deg, #071632 0%, #020916 100%);
}

.uklad-faq {
display: grid;
  grid-template-columns: minmax(300px, .42fr) minmax(0, .58fr);
  gap: clamp(22px, 3vw, 38px);
  align-items: start;
}

.uklad-faq-prawe-zdjecie {
grid-template-columns: minmax(0, .60fr) minmax(300px, .40fr);
}

.uklad-faq-prawe-zdjecie .media-faq {
order: 2;
}

.uklad-faq-zdjecie-gora {
grid-template-columns: 1fr; gap: 26px;
}

.media-faq {
position: sticky;
  top: calc(var(--wysokosc-naglowka) + 24px);
  display: grid;
  align-content: start;
  gap: 18px;
}

.slot-zdjecia {
display: grid;
  place-items: center;
  min-height: clamp(500px, 32vw, 560px);
  overflow: hidden;
  border: 1px solid var(--linia-jasna-mocno);
  border-radius: var(--zaokraglenie);
  box-shadow: inset 0 1px 0 var(--linia-jasna-bardzo-lekko), 0 22px 54px var(--linia-ciemna-lekko);
}

.slot-zdjecia-dzieci {
background: linear-gradient(135deg, var(--linia-jasna-lekko), var(--linia-jasna-bardzo-lekko)), url("grafika/faq_dzieci.webp") 50% 60% / cover;
}

.slot-zdjecia-dorosli {
background: linear-gradient(135deg, var(--linia-jasna-lekko), var(--linia-jasna-bardzo-lekko)), url("grafika/faq_dorosli.webp") 50% 60% / cover;
}

.slot-zdjecia-placowki {
background: linear-gradient(135deg, var(--linia-jasna-lekko), var(--linia-jasna-bardzo-lekko)), url("grafika/faq_placowki.webp") 50% 25% / cover;
}

.wazna-informacja {
text-align: left;
  padding: 24px;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: var(--zaokraglenie);
  background: linear-gradient(135deg, var(--linia-jasna-lekko), var(--linia-jasna-bardzo-lekko));
  color: #fff;
  box-shadow: 0 18px 44px var(--linia-ciemna-lekko);
}

.wazna-informacja h3 {
margin: 0 0 10px;
  color: var(--zolty);
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: var(--odstep-linii-sredni);
  letter-spacing: var(--odstep-litery-sredni);
  text-transform: uppercase;
}

.wazna-informacja p,
.wazna-informacja ul {
margin: 0;
  color: var(--linia-jasna-bardzo-mocno);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: var(--grubosc-tekstu-mala);
  line-height: var(--odstep-linii-duzy);
}

.wazna-informacja li {
padding-top: 10px;
}

.wazna-informacja li::marker {
color: var(--zolty);
}

.lista-faq {
display: grid;
  gap: 16px;
  align-content: start;
}

.dymek-faq {
position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: var(--zaokraglenie);
  color: #fff;
  box-shadow: 0 18px 44px var(--linia-ciemna-lekko);
}

.dymek-faq::before {
content: "";
  position: absolute;
  z-index: -1;
  border: inherit;
  background: inherit;
}

/* Tła dymków */
.sekcja-faq-dzieci   .dymek-faq {
background: linear-gradient(90deg, #23354d, #223954);
}

.sekcja-faq-rodzice  .dymek-faq {
background: linear-gradient(270deg, #293b50, #333e4b);
}

.sekcja-faq-placowki .dymek-faq {
background: linear-gradient(180deg, #38465b, #2a384e);
}

/* Ogonki dymków */
.dymek-faq.ogon-lewy::before {
width: 20px; height: 30px; top: 20px; left: -10px; transform: rotate(145deg); border-top: 0; border-left: 0; background: #23354d;
}

.dymek-faq.ogon-prawy::before {
width: 20px; height: 30px; top: 20px; right: -10px; transform: rotate(35deg);  border-bottom: 0; border-left: 0; background: #293a55;
}

.dymek-faq.ogon-gora::before {
width: 16px; height: 16px; top: -10px; left: clamp(40px, 12vw, 170px); transform: rotate(45deg); border-right: 0; border-bottom: 0; background: #38465b;
}

.dymek-faq.ogon-gora:nth-child(even)::before {
right: clamp(40px, 12vw, 170px); left: auto;
}

/* Aktywny dymek */
.sekcja-faq-dzieci   .dymek-faq.aktywny {
background: linear-gradient(90deg, #383f49, #212a36);
}

.sekcja-faq-rodzice  .dymek-faq.aktywny {
background: linear-gradient(270deg, #3c3c3d, #333537);
}

.sekcja-faq-placowki .dymek-faq.aktywny {
background: linear-gradient(180deg, #49494a, #383b40);
}

.sekcja-faq-dzieci   .dymek-faq.aktywny::before {
background: #383f49;
}

.sekcja-faq-rodzice  .dymek-faq.aktywny::before {
background: #3c3c3d;
}

.sekcja-faq-placowki .dymek-faq.aktywny::before {
background: #49494a;
}

.pytanie-faq {
position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 54px 1fr 34px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px 20px 10px 20px;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.numerek-faq {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3vw, 46px);
  min-width: clamp(38px, 3vw, 46px);
  height: clamp(38px, 3vw, 46px);
  border-radius: 999px;
  border: 1px solid var(--linia-jasna-lekko);
  color: #fff;
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(18px, 1vw, 22px);
  line-height: var(--odstep-linii-maly);
  letter-spacing: var(--odstep-litery-maly);
}

.sekcja-faq-dzieci   .numerek-faq {
box-shadow: 0 0 28px rgba(0,103,221,.35);
}

.sekcja-faq-rodzice  .numerek-faq {
box-shadow: 0 0 28px rgba(187,188,208,.35);
}

.sekcja-faq-placowki .numerek-faq {
box-shadow: 0 0 28px rgba(182,168,189,.35);
}

.dymek-faq.aktywny .numerek-faq {
background: var(--zolty);
  color: var(--tusz);
  box-shadow: 0 0 28px var(--linia-jasna-mocno);
}

.tekst-pytania {
color: var(--bialy);
  font-size: clamp(16px, 1vw, 20px);
  font-weight: var(--grubosc-tekstu-srednia);
  line-height: var(--odstep-linii-duzy);
}

.dymek-faq.aktywny .tekst-pytania {
color: var(--zolty);
}

.dymek-faq:hover    .tekst-pytania {
color: var(--zolty);
}

.ikona-rozwin {
display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: 999px;
  background: var(--linia-jasna-bardzo-lekko);
  color: #fff;
  font-family: Anton, Inter, sans-serif;
  font-size: 20px;
  line-height: var(--odstep-linii-maly);
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.dymek-faq.aktywny .ikona-rozwin {
background: rgba(255,209,20,.16);
  color: var(--zolty);
  transform: rotate(180deg);
}

.odpowiedz-faq {
position: relative;
  z-index: 2;
  margin-top: -2px;
  padding: 10px 22px 10px 30px;
  background: linear-gradient(90deg, var(--bialy), var(--linia-jasna-bardzo-mocno));
  border-radius: 0 0 var(--zaokraglenie) var(--zaokraglenie);
}

.odpowiedz-faq p {
text-align: left;
  margin: 0;
  color: var(--linia-ciemna-bardzo-mocno);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: var(--grubosc-tekstu-mala);
  line-height: var(--odstep-linii-duzy);
}

/* =====================================================================
   SEKCJA DOKUMENTÓW (zasady.html)
   ===================================================================== */
.sekcja-dokumentow {
background: linear-gradient(180deg, #ffffff 0%, #ecf2fc 100%);
  color: var(--tusz);
}

.siatka-dokumentow {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}

.karta-dokumentu {
display: flex;
  overflow: hidden;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(6,26,60,.10);
  border-radius: var(--zaokraglenie);
  background: #fff;
  box-shadow: 0 24px 56px rgba(6,26,60,.10);
}

.zdjecie-dokumentu {
display: grid;
  place-items: center;
  height: 500px;
  background-size: cover;
  background-position: center;
}

.zdjecie-dokumentu-zgoda {
background-image: url("grafika/zgoda_na_wyjazd.webp");
}

.zdjecie-dokumentu-regulamin {
background-image: url("grafika/regulamin_wyjazdu.webp");
}

.zdjecie-dokumentu-informacja {
background-image: url("grafika/informacja_dla_rodzicow.webp");
}

.tresc-dokumentu {
display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}

.karta-dokumentu h3 {
margin: 0 0 10px;
  color: var(--granat);
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(26px, 2vw, 34px);
  line-height: var(--odstep-linii-sredni);
  letter-spacing: var(--odstep-litery-sredni);
  text-transform: uppercase;
}

.karta-dokumentu p {
text-align: left;
  margin: 0;
  color: #5b6880;
  font-size: 15px;
  font-weight: var(--grubosc-tekstu-mala);
  line-height: var(--odstep-linii-duzy);
}

/* =====================================================================
   SEKCJA CTA "DODATKOWE PYTANIA" (zasady.html)
   ===================================================================== */
.sekcja-pytania-koncowe {
position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(3,16,38,.78), rgba(3,16,38,.50)), url("grafika/stadion-arena-360.webp") center / cover no-repeat;
  color: #fff;
  isolation: isolate;
}

.uklad-pytania-koncowego {
display: grid;
  grid-template-columns: minmax(0, 820px) auto;
  align-items: center;
  gap: 28px;
  text-align: left;
}

.tresc-pytania-koncowego {
text-align: center;
}

.tresc-pytania-koncowego .etykieta-sekcji {
display: flex;
  width: fit-content;
  margin-inline: auto;
  justify-content: center;
}

.tresc-pytania-koncowego .tytul-sekcji {
text-align: center; color: #fff; text-shadow: 0 10px 24px var(--linia-ciemna-srednio);
}

.tresc-pytania-koncowego .opis-sekcji {
text-align: center; margin: 18px auto 0; max-width: 760px;
}

.panel-dodatkowych-przyciskow {
margin-left: auto;
  padding: 35px;
  border-radius: var(--zaokraglenie);
  border: 1px solid var(--linia-jasna-lekko);
  background: var(--linia-ciemna-srednio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  text-align: center;
}

.panel-dodatkowych-przyciskow span {
display: block;
  margin: 0 0 18px;
  font-family: Anton, Inter, sans-serif;
  font-size: clamp(16px, 3vw, 30px);
  line-height: var(--odstep-linii-sredni);
  color: var(--zolty);
  text-align: center;
}

.rzad-przyciskow-dodatkowych {
display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* =====================================================================
   KONTAKT — SEKCJA FORMULARZA
   ===================================================================== */
.siatka-odbiorcow-kontaktu {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.karta-odbiorcy-kontaktu {
position: relative;
  overflow: hidden;
  min-height: 460px;
  border-radius: var(--zaokraglenie);
  background: var(--zdjecie-kontaktu) center / cover no-repeat;
  box-shadow: 0 14px 20px var(--linia-ciemna-srednio);
  display: flex;
  align-items: flex-end;
}

.karta-odbiorcy-kontaktu::before {
content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3,15,39,.90) 0%, rgba(3,15,39,.50) 50%, rgba(3,15,39,.15) 100%);
}

.kontakt-rodzic {
--zdjecie-kontaktu: url("grafika/kontakt_rodzic.webp");
}

.kontakt-dziecko {
--zdjecie-kontaktu: url("grafika/kontakt_dziecko.webp");
}

.kontakt-placowka {
--zdjecie-kontaktu: url("grafika/kontakt_placowka.webp");
}

.tresc-karty-kontaktu {
position: relative;
  z-index: 2;
  padding: 28px;
  width: 100%;
}

.numer-karty {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--zolty);
  color: var(--granat);
  font-family: Anton, Inter, sans-serif;
  font-size: 22px;
  margin-bottom: 14px;
}

.tresc-karty-kontaktu h3 {
margin: 0 0 10px;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-kafelka);
  line-height: var(--odstep-linii-sredni);
  text-transform: uppercase;
  color: var(--zolty);
  letter-spacing: var(--odstep-litery-duzy);
}

.tresc-karty-kontaktu p {
margin: 0 0 16px;
  color: var(--linia-jasna-bardzo-mocno);
  font-size: var(--tekst-maly);
    line-height: var(--odstep-linii-duzy);
    font-weight: var(--grubosc-tekstu-mala);
}

.przycisk-wyboru {
position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--zaokraglenie);
  color: #fff;
  border: 1px solid var(--linia-jasna-lekko); 
  background: linear-gradient(135deg, var(--linia-jasna-bardzo-lekko), var(--linia-jasna-lekko));
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-przycisku);
  letter-spacing: var(--odstep-litery-sredni);
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: none;
  transition: filter .2s ease, box-shadow .22s ease;
}

.przycisk-wyboru::before,
.przycisk-wyboru.aktywny::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--polysk);
  transform: translateX(-100%);
  transition: transform .55s ease;
  pointer-events: none;
}

.przycisk-wyboru.aktywny {
background: linear-gradient(135deg, var(--zolty-2), var(--zolty));
  color: var(--granat);
  border: 0;
}

.przycisk-wyboru:hover::before {
filter: brightness(1.06);
  transform: translateX(100%);
}

/* Formularz kontaktowy */
.formularz-kontaktowy {
  margin-top: 32px;
  border-radius: var(--zaokraglenie);
  border: 1px solid var(--linia-jasna-lekko);
  box-shadow: inset 0 1px 0 var(--linia-jasna-bardzo-lekko);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.10));
  padding: 0 20px 20px 20px;
  margin-bottom: 20px;
}

.podsekcja-formularza {
position: relative;
      display: grid;
      gap: 16px;
      padding: 20px;
      border: 1px solid var(--linia-jasna-lekko);
      border-radius: var(--zaokraglenie);
      background: linear-gradient(180deg, var(--linia-ciemna-lekko), var(--linia-ciemna-srednio));
	  margin-top: 28px;
      overflow: hidden;
position: relative;
}

.podsekcja-formularza::before {
content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--kolor-podsekcji, var(--niebieski));
}

.podsekcja-formularza-niebieska {
--akcent-podsekcji: var(--niebieski);
--kolor-podsekcji: var(--niebieski);
}

.podsekcja-formularza-zielona {
--akcent-podsekcji: #0aa66a;
--kolor-podsekcji: #089b69;
}

.podsekcja-formularza-zolta {
--akcent-podsekcji: var(--zolty);
--kolor-podsekcji: var(--zolty);
}

.podsekcja-formularza-czerwona {
--akcent-podsekcji: var(--czerwony);
--kolor-podsekcji: var(--czerwony);
}

.naglowek-podsekcji {
display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
	  margin-bottom: 0px;
	  border: 0;
      padding-bottom: 2px;
}

.naglowek-podsekcji span {
color: var(--zolty);
      font-family: Anton, Inter, sans-serif;
      font-size: clamp(22px, 2vw, 32px);
      line-height: var(--odstep-linii-maly);
      letter-spacing: var(--odstep-litery-sredni);
      text-transform: uppercase;
}

.naglowek-podsekcji p {
margin: 0;
  color: var(--linia-jasna-bardzo-mocno);
  font-size: var(--tekst-maly);
}

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

.pole-formularza {
position: relative;
      display: grid;
      gap: 0;
}

.pole-formularza label {
position: absolute;
      top: 13px;
      left: 16px;
      z-index: 2;
      color: #cdd3d9;
      font-size: var(--tekst-bardzo-maly);
      font-weight: var(--grubosc-tekstu-srednia);
      letter-spacing: var(--odstep-litery-maly);
      line-height: var(--odstep-linii-sredni);
      text-transform: uppercase;
      pointer-events: none;
}

.pole-formularza label span {
color: var(--zolty);
}

.gwiazdka {
color: var(--zolty) !important; font-style: normal;
}

.pole-formularza input,
.pole-formularza select,
.pole-formularza textarea {
padding: 13px 16px;
  font-size: var(--tekst-opisu);
      width: 100%;
      border: 1px solid var(--linia-jasna-bardzo-lekko);
      border-radius: var(--zaokraglenie);
      outline: none;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.15));
      color: var(--bialy);
      font-weight: var(--grubosc-tekstu-srednia);
      transition: border-color .2s ease, box-shadow .2s ease;
}

.pole-formularza input,
.pole-formularza select {
min-height: 74px; padding: 32px 16px 8px;
}

.pole-formularza select {
appearance: none;
      padding-right: 46px;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--zolty) 50%), linear-gradient(135deg, var(--zolty) 50%, transparent 50%);
      background-position: calc(100% - 24px) 31px, calc(100% - 17px) 31px;
      background-size: 7px 7px, 7px 7px;
      background-repeat: no-repeat;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.15));
}

.pole-formularza textarea {
min-height: 150px; resize: vertical; padding: 34px 16px 16px; line-height: var(--odstep-linii-duzy);
}

.pole-formularza input:focus,
.pole-formularza select:focus,
.pole-formularza textarea:focus {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.10));
        border-color: var(--linia-jasna-bardzo-lekko);
      box-shadow: 0 0 0 4px rgba(255,209,20,.13);
}

.pole-formularza select option {
  background: #3c4550;
  /* color: var(--tusz); */
}


.pole-pelnej-szerokosci {
grid-column: 1 / -1;
}

.zgody-formularza {
display: grid;
      gap: 0;
      overflow: hidden;
      border: 1px solid var(--linia-jasna-bardzo-lekko);
      border-radius: var(--zaokraglenie);
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.10));
	  margin-bottom: 20px;
}

.podsekcja-formularza .zgody-formularza {
margin-bottom: 0;
}

.checkbox-zgody {
display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 12px;
	  
  text-align: left;
      padding: 16px 18px;
      color: #fff;
  font-size: var(--tekst-maly);
  font-weight: var(--grubosc-tekstu-mala);
  line-height: var(--odstep-linii-duzy);
  cursor: pointer;
}

.checkbox-zgody + .checkbox-zgody {
border-top: 1px solid var(--linia-jasna-bardzo-lekko);
}

.checkbox-zgody input {
appearance: none;
      display: grid;
      place-items: center;
      width: 20px;
      height: 20px;
      margin: 1px 0 0;
      border: 1px solid var(--linia-jasna-lekko);
      border-radius: 6px;
      background: var(--linia-jasna-bardzo-lekko);
      min-height: auto;
	  accent-color: var(--zolty);
	  cursor: pointer; 
      padding: 0;
      transition: background .18s ease, border-color .18s ease;
}

.checkbox-zgody input::before {
content: "";
      width: 9px;
      height: 5px;
      border: solid var(--tusz);
      border-width: 0 0 2px 2px;
      opacity: 0;
      transform: rotate(-45deg) translate(1px, -1px);
}

.checkbox-zgody input:checked {
border-color: var(--zolty); background: var(--zolty);
}

.checkbox-zgody input:checked::before {
opacity: 1;
}


.checkbox-zgody input:disabled {
background: var(--linia-jasna-lekko);
border: 1px solid var(--linia-jasna-lekko);
cursor: not-allowed;
}

.checkbox-zgody input:disabled::before {
  content: "\2716";
  width: auto;
  height: auto;
  border: none;
  font-size: 14px;
  line-height: 1;
  color: var(--linia-jasna-srednio);
  opacity: 1;
  transform: none;
  display: flex; align-items: center; justify-content: center;
}



.podsumowanie-formularza {
display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.pole-pulapka {
position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Logowanie */
.ekran-logowania {
position: relative;
  isolation: isolate;
  display: grid;
  place-items: start;
  justify-items: center;
  width: 100%;
  height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  padding: 14px 24px;
  /* overflow: hidden; */
  background: #082448;
}

.strona-logowania,
.strona-systemu-testowego {
height: 100%;
  overflow: hidden;
}

.strona-logowania main,
.strona-systemu-testowego main {
height: 100%;
  min-height: 0;
}

.ekran-logowania::before {
content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(115deg, rgba(5,16,37,.62), rgba(5,20,48,.72)),
    radial-gradient(circle at 12% 20%, rgba(200,20,40,.34), transparent 28rem),
    radial-gradient(circle at 82% 10%, rgba(11,79,158,.42), transparent 32rem),
    url("grafika/tlo-logowania.webp") center / cover no-repeat;
  filter: blur(3px);
  opacity: .82;
  transform: scale(1.03);
}

.ekran-logowania::after {
content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, var(--linia-jasna-bardzo-lekko), transparent 68%);
  pointer-events: none;
}

.obudowa-logowania {
display: grid;
  justify-items: center;
  width: min(100%, 560px);
  max-height: 100%;
  min-width: 0;
}

.logo-logowania {
display: block;
  width: 156px;
  margin-bottom: -68px;
  position: relative;
  z-index: 2;
}

.logo-logowania img {
display: block;
  width: 100%;
  height: auto;
}

.karta-logowania {
width: 100%;
  min-width: 0;
  padding: 82px 42px 36px;
  border: 1px solid var(--linia-jasna-bardzo-mocno);
  border-radius: var(--zaokraglenie);
  background: var(--tlo-karty-logowania);
  box-shadow: var(--cien-karty-logowania);
  margin-bottom: 20px;
  color: var(--granat);
  backdrop-filter: blur(18px);
  
}

.etykieta-logowania {
margin: 0 0 9px;
  color: var(--czerwony);
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-opis);
  line-height: var(--odstep-linii-maly);
  text-transform: uppercase;
}

.tytul-logowania {
margin: 0;
  color: var(--granat);
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-sekcji);
  font-weight: var(--grubosc-tekstu-mala);
  line-height: var(--odstep-linii-sredni);
  text-transform: uppercase;
}

.opis-logowania {
max-width: 100%;
  margin: 12px 0 0;
  color: var(--tekst-pomocniczy-logowania);
  font-size: var(--tekst-podstawowy, 1rem);
  font-weight: var(--grubosc-tekstu-srednia);
  line-height: var(--odstep-linii-duzy);
}

.formularz-logowania {
display: grid;
  width: 100%;
  gap: 18px;
  margin-top: 25px;
}

.pole-logowania {
display: grid;
  min-width: 0;
  gap: 8px;
  color: var(--granat);
}

.pole-logowania > span {
font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-opisu);
  line-height: var(--odstep-linii-maly);
  text-transform: uppercase;
}

.pole-logowania > span b,
.pomoc-formularza-logowania b {
color: var(--czerwony);
  font: inherit;
}

.pole-logowania input {
width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 0 15px;
  border: 1px solid var(--linia-pola-logowania);
  border-radius: var(--zaokraglenie);
  outline: none;
  background: var(--bialy);
  color: var(--granat);
  font: inherit;
  font-weight: var(--grubosc-tekstu-srednia);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.pole-logowania input:focus {
/* background: var(--linia-jasna-bardzo-lekko); */
  /* border-color: var(--linia-jasna-lekko); */
  box-shadow: 0 0 0 4px rgba(255,209,20,.13);
}

.pomoc-formularza-logowania {
margin: 0;
  color: var(--przygaszony);
  font-size: var(--tekst-bardzo-maly);
  font-weight: var(--grubosc-tekstu-srednia);
  line-height: var(--odstep-linii-duzy);
}

.dzialania-logowania {
display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.dzialania-logowania .przycisk {
min-height: 52px;
}

.formularz-logowania .przycisk:disabled {
opacity: .68;
  cursor: wait;
}

.formularz-wylogowania {
display: contents;
}

.dzialania-systemu-testowego {
margin-top: 26px;
}

/* Dane organizatorów */
.sekcja-organizatorow {
background:
    radial-gradient(circle at 16% 20%, rgba(0,103,221,.18), transparent 28%),
    linear-gradient(180deg, #071632 0%, #020916 100%);
}

.uklad-organizatorow {
display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 36px;
}

.kolumny-kontaktowe {
padding: 22px;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: var(--zaokraglenie);
  background: rgba(3,18,45,.52);
}

.kolumny-kontaktowe h3 {
margin: 0 0 16px;
  font-family: Anton, Inter, sans-serif;
  font-size: var(--tekst-tytul-kafelka);
  text-transform: uppercase;
  color: var(--zolty);
  line-height: var(--odstep-linii-sredni);
}

.kolumny-kontaktowe p {
margin: 0;
  text-align: left;
  font-weight: var(--grubosc-tekstu-mala);
  line-height: var(--odstep-linii-duzy);
}

.lista-danych {
display: grid; gap: 12px;
}

.pozycja-danych {
display: flex;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--linia-jasna-lekko);
  border-radius: var(--zaokraglenie);
  background: var(--linia-jasna-bardzo-lekko);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.pozycja-danych:hover {
transform: translateY(-4px);
  background: var(--linia-jasna-lekko);
  cursor: pointer;
}

.pozycja-danych .ikona-danych {
display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--zaokraglenie);
  background: var(--zolty);
  color: var(--granat);
  font-weight: var(--grubosc-tekstu-srednia);
  margin-right: 10px;
}

.pozycja-danych .ikona-danych img {
border:0;
 width: 20px;
}

.pozycja-danych strong {
color: #fff; font-size: var(--tekst-opisu); font-weight: var(--grubosc-tekstu-duza); word-break: break-word;
}

.pozycja-danych small {
color: var(--linia-jasna-mocno); font-size: 12px; font-weight: var(--grubosc-tekstu-duza); text-transform: uppercase; letter-spacing: var(--odstep-litery-maly);
}

.komunikat-przyklejony {
position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  padding: 14px 20px;
  color: #fff;
  transform: translateY(110%);
  transition: transform .2s ease;
}

.komunikat-przyklejony[hidden] {
display: none;
}

.komunikat-przyklejony-blad {
background: linear-gradient(135deg, var(--czerwony), var(--czerwony-2));
}

.komunikat-przyklejony-sukces {
background: linear-gradient(135deg, var(--zielony-sukces-ciemny), var(--zielony-sukces-jasny));
}

.komunikat-przyklejony-wnetrze {
display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(var(--szerokosc-pojemnika), calc(100% - 40px));
  font-weight: var(--grubosc-tekstu-srednia);
  text-align: left;
}

.komunikat-przyklejony-ikona {
display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--linia-jasna-lekko);
  font-family: Anton, Inter, sans-serif;
  color: #FFFF00;
}

.komunikat-przyklejony-tekst {
line-height: var(--odstep-linii-sredni);
    font-size: var(--tekst-maly);
}

.komunikat-przyklejony.jest-widoczny {
transform: translateY(0);
}

.formularz-kontaktowy .pole-bledne,
.formularz-kontaktowy [aria-invalid="true"] {
border-color: var(--czerwony-bledu) !important;
outline-color: var(--czerwony-bledu) !important;
background-color: #B30D15 !important;
box-shadow: 0 0 0 4px rgba(255,209,20,.13);
}

/* .formularz-kontaktowy [aria-invalid="true"] { */
/* border-color: var(--czerwony-bledu) !important; */
/* box-shadow: 0 0 0 4px rgba(255,209,20,.13); */
/* } */

.strona-logowania .pole-bledne,
.strona-logowania [aria-invalid="true"] {
border-color: var(--czerwony-bledu) !important;
outline-color: var(--czerwony-bledu) !important;
background-color: #fff0f2 !important;
box-shadow: 0 0 0 4px rgba(255,209,20,.13);
}

/* =====================================================================
   RESPONSYWNOŚĆ — TABLET
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
/* Arena założeń — tryb siatki */
.arena-zalozen {
min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.pierscien-areny {
display: none;
}

.stadion-areny {
grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 680px);
    margin-bottom: 8px;
}

.karta-zalozenia {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-1 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-2 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-3 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-4 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-5 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-6 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.zdjecie-zalozenia {
width: 120px;
    height: auto;
    min-height: 120px;
    align-self: stretch;
}

.nawigacja {
gap: 6px;
position: fixed;
    left: 17px;
    right: 17px;
    top: calc(var(--wysokosc-naglowka) + 12px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px;
    background: rgba(3,18,45,.97);
    border: 1px solid var(--linia-jasna-lekko);
    border-radius: var(--zaokraglenie);
    box-shadow: 0 28px 60px var(--linia-ciemna-srednio);
    text-shadow: none;
}

.link-nawigacji {
padding-inline: 10px;
-webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
width: 100%;
    justify-content: center;
    padding: 13px 16px;
    border-radius: var(--zaokraglenie);
    border: 1px solid var(--linia-jasna-srednio);
}

.przycisk-podmenu {
padding-inline: 10px;
-webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
width: 100%;
    justify-content: center;
    padding: 14px 16px;
    border-radius: var(--zaokraglenie);
    border: 1px solid var(--linia-jasna-srednio);
}

.przycisk-logowania {
padding-inline: 17px;
display: none;
}

.uklad-faq {
grid-template-columns: 1fr;
}

.uklad-faq-prawe-zdjecie {
grid-template-columns: 1fr;
}

.uklad-faq-prawe-zdjecie .media-faq {
order: 0;
}

.media-faq {
position: relative;
    top: auto;
}

.uklad-pytania-koncowego {
grid-template-columns: 1fr;
}

/* Ogonki dymków na mobilu — zawsze góra */
.dymek-faq.ogon-lewy::before {
top: -10px;
    right: auto;
    left: clamp(40px, 12vw, 170px);
    border-top: 1px solid var(--linia-jasna-lekko);
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid var(--linia-jasna-lekko);
    transform: rotate(45deg);
}

/* Ogonki dymków na mobilu — zawsze góra */
.dymek-faq.ogon-prawy::before {
top: -10px;
    right: auto;
    left: clamp(40px, 12vw, 170px);
    border-top: 1px solid var(--linia-jasna-lekko);
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid var(--linia-jasna-lekko);
    transform: rotate(45deg);
}

.dymek-faq.ogon-lewy:nth-child(even)::before {
right: clamp(40px, 12vw, 170px);
    left: auto;
}

.dymek-faq.ogon-prawy:nth-child(even)::before {
right: clamp(40px, 12vw, 170px);
    left: auto;
}

.sekcja-faq-dzieci   .dymek-faq {
background: linear-gradient(180deg, #23354d, #223954);
}

.sekcja-faq-rodzice  .dymek-faq {
background: linear-gradient(180deg, #293b50, #333e4b);
}

.sekcja-faq-placowki .dymek-faq {
background: linear-gradient(180deg, #38465b, #2a384e);
}

.sekcja-faq-dzieci   .dymek-faq::before {
width: 18px;
    height: 18px;
    background: #23354d;
}

.sekcja-faq-rodzice  .dymek-faq::before {
width: 18px;
    height: 18px;
    background: #293b50;
}

.sekcja-faq-placowki .dymek-faq::before {
width: 18px;
    height: 18px;
    background: #38465b;
}

.hero-wydarzenia {
display: block;
    min-height: 0;
    padding: 0 0 clamp(48px, 7vw, 82px);
}

.hero-wydarzenia-wnetrze {
grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
}

.hero-wydarzenia-tresc {
display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(var(--szerokosc-pojemnika), calc(100% - 48px));
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    margin-inline: auto;
    padding: calc(var(--wysokosc-naglowka) + 42px) 0 48px;
}

.hero-wydarzenia-karta {
width: min(var(--szerokosc-pojemnika), calc(100% - 48px));
    margin: clamp(32px, 5vw, 54px) auto 0;
}

.uklad-mapy {
grid-template-columns: 1fr;
}

.karta-wydarzenia {
grid-template-columns: 1fr;
    min-height: auto;
}

.karta-wydarzenia-pion {
grid-template-columns: 1fr;
    min-height: auto;
}

.informacje-wydarzenia {
background: rgba(3,15,39,.92);
}

.obraz-wydarzenia {
min-height: 360px;
    order: -1;
}

.siatka-dlaczego {
grid-template-columns: 1fr;
}

.zdjecie-dlaczego {
min-height: 460px;
}

.siatka-odbiorcow {
grid-template-columns: 1fr 1fr;
}

.karta-odbiorcy-niebieska {
grid-column: 1 / -1;
}

.siatka-statystyk {
display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Pierwsze 3 kafelki — każdy zajmuje 1/3 szerokości */
.siatka-statystyk > *:nth-child(1) {
grid-column: span 2;
}

/* Pierwsze 3 kafelki — każdy zajmuje 1/3 szerokości */
.siatka-statystyk > *:nth-child(2) {
grid-column: span 2;
}

/* Pierwsze 3 kafelki — każdy zajmuje 1/3 szerokości */
.siatka-statystyk > *:nth-child(3) {
grid-column: span 2;
}

/* Kolejne 2 kafelki — każdy zajmuje 1/2 szerokości */
.siatka-statystyk > *:nth-child(4) {
grid-column: span 3;
}

/* Kolejne 2 kafelki — każdy zajmuje 1/2 szerokości */
.siatka-statystyk > *:nth-child(5) {
grid-column: span 3;
}

.siatka-dokumentow {
grid-template-columns: 1fr;
}

.siatka-partnerow {
justify-content: center;
}

.siatka-partnerow > .karta-partnera {
flex-basis: calc((100% - 18px) / 2);
}

.siatka-3,
.siatka-3-standard {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.siatka-3 > *:last-child {
grid-column: 1 / -1;
}

:root {
--wysokosc-naglowka: 78px;
    --dopelnienie-sekcji: clamp(40px, 4vw, 76px);
}

.nawigacja a,
.nawigacja button {
-webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
}

.podmenu a {
-webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 14px 14px;
    margin: 0;
    border: 1px solid var(--linia-jasna-srednio);
    border-radius: var(--zaokraglenie);
    background: var(--linia-jasna-lekko);
    color: #fff;
    font-size: 13px;
    font-weight: var(--grubosc-tekstu-duza);
    line-height: var(--odstep-linii-sredni);
    text-align: center;
    text-transform: uppercase;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.nawigacja a:focus {
outline: none;
    box-shadow: none;
}

.nawigacja button:focus {
outline: none;
    box-shadow: none;
}

.link-nawigacji:focus {
outline: none;
    box-shadow: none;
}

.przycisk-podmenu:focus {
outline: none;
    box-shadow: none;
}

.podmenu a:focus {
outline: none;
    box-shadow: none;
}

.nawigacja a:active {
-webkit-tap-highlight-color: transparent;
}

.nawigacja button:active {
-webkit-tap-highlight-color: transparent;
}

.link-nawigacji:active {
-webkit-tap-highlight-color: transparent;
}

.przycisk-podmenu:active {
-webkit-tap-highlight-color: transparent;
}

.podmenu a:active {
-webkit-tap-highlight-color: transparent;
}

.wnetrze-naglowka {
width: calc(100% - 34px);
}

.przycisk-menu {
display: flex;
    order: 4;
}

.nawigacja.otwarte {
display: flex;
}

.nawigacja .logowanie-mobilne {
display: inline-flex;
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    padding: 13px 18px;
    justify-content: center;
}

.link-nawigacji:hover {
border: 1px solid var(--zolty);
}

.przycisk-podmenu:hover {
border: 1px solid var(--zolty);
}

.element-menu {
display: block;
}

.podmenu {
position: static;
    display: none;
    min-width: 0;
    margin: 8px 0 0;
    padding: 0;
    opacity: 1;
    border: 0;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: none;
    box-shadow: none;
    text-shadow: none;
}

.podmenu::before {
display: none;
}

.ma-podmenu.otwarte .podmenu {
display: grid;
    gap: 8px;
}

.podmenu a:hover {
border-color: var(--zolty);
    background: var(--zolty);
    color: var(--granat);
    transform: translateY(-1px);
}

.podmenu a:focus-visible {
border-color: var(--zolty);
    background: var(--zolty);
    color: var(--granat);
    transform: translateY(-1px);
}

.podmenu a.aktywny {
border-color: var(--zolty);
    background: var(--zolty);
    color: var(--granat);
    transform: translateY(-1px);
}

.brak-wydarzen-menu {
margin: 0;
    border-color: var(--linia-jasna-lekko);
    background: var(--linia-jasna-bardzo-lekko);
    color: var(--linia-jasna-bardzo-mocno);
}

.panel-dodatkowych-przyciskow {
margin: 0 auto;
    padding: 25px;
}

.link-nawigacji::after {
display: none;
}

.przycisk-podmenu::after {
display: none;
}

.tresc-hero {
grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 0px;
}

.centrum-hero {
grid-column: 1;
    grid-row: 1;
    order: 1;
}

.tytul-hero {
grid-column: 1;
    grid-row: 2;
    order: 2;
}

.rzad-cta {
grid-column: 1;
    grid-row: 3;
    order: 3;
}

.kolumna-pedzli {
display: none;
}

.hero-glowna::before {
filter: none;
    transform: none;
}

.grupa-pol {
grid-template-columns: 1fr;
}


.metryka-archiwum {
grid-template-columns: 1fr;
}

.ekran-logowania {
padding: 20px;
}

.karta-logowania {
padding-inline: 36px;
}
}

/* =====================================================================
   RESPONSYWNOŚĆ — SMARTFON
   ===================================================================== */
@media (max-width: 767px) {
/* Arena założeń — tryb siatki */
.arena-zalozen {
min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
grid-template-columns: 1fr;
}

.pierscien-areny {
display: none;
}

.stadion-areny {
grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 680px);
    margin-bottom: 8px;
}

.karta-zalozenia {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
	max-width: none;
    height: auto;
    min-height: 112px;
    grid-template-columns: 96px 1fr;
}

.karta-zalozenia-1 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-2 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-3 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-4 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-5 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}

.karta-zalozenia-6 {
position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    margin-top: 10px;
    grid-template-columns: 120px 1fr;
}



.nawigacja {
gap: 6px;
position: fixed;
    left: 17px;
    right: 17px;
    top: calc(var(--wysokosc-naglowka) + 12px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px;
    background: rgba(3,18,45,.97);
    border: 1px solid var(--linia-jasna-lekko);
    border-radius: var(--zaokraglenie);
    box-shadow: 0 28px 60px var(--linia-ciemna-srednio);
    text-shadow: none;
}

.link-nawigacji {
padding-inline: 10px;
-webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
width: 100%;
    justify-content: center;
    padding: 13px 16px;
    border-radius: var(--zaokraglenie);
    border: 1px solid var(--linia-jasna-srednio);
}

.przycisk-podmenu {
padding-inline: 10px;
-webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
width: 100%;
    justify-content: center;
    padding: 13px 16px;
    border-radius: var(--zaokraglenie);
    border: 1px solid var(--linia-jasna-srednio);
}

.przycisk-logowania {
padding-inline: 17px;
display: none;
}

.uklad-faq {
grid-template-columns: 1fr;
}

.uklad-faq-prawe-zdjecie {
grid-template-columns: 1fr;
}

.uklad-faq-prawe-zdjecie .media-faq {
order: 0;
}

.media-faq {
position: relative;
    top: auto;
}

.uklad-pytania-koncowego {
grid-template-columns: 1fr;
}

/* Ogonki dymków na mobilu — zawsze góra */
.dymek-faq.ogon-lewy::before {
top: -10px;
    right: auto;
    left: clamp(40px, 12vw, 170px);
    border-top: 1px solid var(--linia-jasna-lekko);
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid var(--linia-jasna-lekko);
    transform: rotate(45deg);
}

/* Ogonki dymków na mobilu — zawsze góra */
.dymek-faq.ogon-prawy::before {
top: -10px;
    right: auto;
    left: clamp(40px, 12vw, 170px);
    border-top: 1px solid var(--linia-jasna-lekko);
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid var(--linia-jasna-lekko);
    transform: rotate(45deg);
}

.dymek-faq.ogon-lewy:nth-child(even)::before {
right: clamp(40px, 12vw, 170px);
    left: auto;
}

.dymek-faq.ogon-prawy:nth-child(even)::before {
right: clamp(40px, 12vw, 170px);
    left: auto;
}

.sekcja-faq-dzieci   .dymek-faq {
background: linear-gradient(180deg, #23354d, #223954);
}

.sekcja-faq-rodzice  .dymek-faq {
background: linear-gradient(180deg, #293b50, #333e4b);
}

.sekcja-faq-placowki .dymek-faq {
background: linear-gradient(180deg, #38465b, #2a384e);
}

.sekcja-faq-dzieci   .dymek-faq::before {
width: 18px;
    height: 18px;
    background: #23354d;
}

.sekcja-faq-rodzice  .dymek-faq::before {
width: 18px;
    height: 18px;
    background: #293b50;
}

.sekcja-faq-placowki .dymek-faq::before {
width: 18px;
    height: 18px;
    background: #38465b;
}

.hero-wydarzenia {
display: block;
    min-height: 0;
    padding: 0 0 clamp(48px, 7vw, 82px);
}

.hero-wydarzenia-wnetrze {
grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
}

.hero-wydarzenia-tresc {
display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(var(--szerokosc-pojemnika), calc(100% - 48px));
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    margin-inline: auto;
    padding: calc(var(--wysokosc-naglowka) + 42px) 0 48px;
padding-top: calc(var(--wysokosc-naglowka) + 32px);
}

.hero-wydarzenia-karta {
width: min(var(--szerokosc-pojemnika), calc(100% - 48px));
    margin: clamp(32px, 5vw, 54px) auto 0;
}

.uklad-mapy {
grid-template-columns: 1fr;
}

.karta-wydarzenia {
grid-template-columns: 1fr;
    min-height: auto;
border-radius: var(--zaokraglenie);
}

.karta-wydarzenia-pion {
grid-template-columns: 1fr;
    min-height: auto;
border-radius: var(--zaokraglenie);
}

.informacje-wydarzenia {
background: rgba(3,15,39,.92);
padding: 24px;
}

.obraz-wydarzenia {
min-height: 360px;
    order: -1;
min-height: 300px;
}

.siatka-dlaczego {
grid-template-columns: 1fr;
}

.zdjecie-dlaczego {
min-height: 460px;
min-height: 390px;
    border-radius: 28px;
}

.siatka-odbiorcow {
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr;
}

.karta-odbiorcy-niebieska {
grid-column: 1 / -1;
}

.siatka-statystyk {
display: grid;
gap: 12px 0;
grid-template-columns: 1fr;
}

/* Pierwsze 3 kafelki — każdy zajmuje 1/3 szerokości */
.siatka-statystyk > *:nth-child(1) {
grid-column: span 2;
}

/* Pierwsze 3 kafelki — każdy zajmuje 1/3 szerokości */
.siatka-statystyk > *:nth-child(2) {
grid-column: span 2;
}

/* Pierwsze 3 kafelki — każdy zajmuje 1/3 szerokości */
.siatka-statystyk > *:nth-child(3) {
grid-column: span 2;
}

/* Kolejne 2 kafelki — każdy zajmuje 1/2 szerokości */
.siatka-statystyk > *:nth-child(4) {
grid-column: span 3;
}

/* Kolejne 2 kafelki — każdy zajmuje 1/2 szerokości */
.siatka-statystyk > *:nth-child(5) {
grid-column: span 3;
}

.siatka-dokumentow {
grid-template-columns: 1fr;
}

.siatka-partnerow {
justify-content: center;
}

.siatka-partnerow > .karta-partnera {
flex-basis: 100%;
}

.siatka-3,
.siatka-3-standard {
grid-template-columns: 1fr;
}

.siatka-3 > *:last-child {
grid-column: 1 / -1;
}

:root {
--wysokosc-naglowka: 72px;
    --dopelnienie-sekcji: clamp(40px, 3vw, 62px);
}

.nawigacja a,
.nawigacja button {
-webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
}

.podmenu a {
-webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 14px 14px;
    margin: 0;
    border: 1px solid var(--linia-jasna-srednio);
    border-radius: var(--zaokraglenie);
    background: var(--linia-jasna-lekko);
    color: #fff;
    font-size: 13px;
    font-weight: var(--grubosc-tekstu-duza);
    line-height: var(--odstep-linii-sredni);
    text-align: center;
    text-transform: uppercase;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.nawigacja a:focus {
outline: none;
    box-shadow: none;
}

.nawigacja button:focus {
outline: none;
    box-shadow: none;
}

.link-nawigacji:focus {
outline: none;
    box-shadow: none;
}

.przycisk-podmenu:focus {
outline: none;
    box-shadow: none;
}

.podmenu a:focus {
outline: none;
    box-shadow: none;
}

.nawigacja a:active {
-webkit-tap-highlight-color: transparent;
}

.nawigacja button:active {
-webkit-tap-highlight-color: transparent;
}

.link-nawigacji:active {
-webkit-tap-highlight-color: transparent;
}

.przycisk-podmenu:active {
-webkit-tap-highlight-color: transparent;
}

.podmenu a:active {
-webkit-tap-highlight-color: transparent;
}

.wnetrze-naglowka {
width: calc(100% - 34px);
width: calc(100% - 30px);
    gap: 10px;
}

.przycisk-menu {
display: flex;
    order: 4;
}

.nawigacja.otwarte {
display: flex;
}

.nawigacja .logowanie-mobilne {
display: inline-flex;
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    padding: 13px 18px;
    justify-content: center;
}

.link-nawigacji:hover {
border: 1px solid var(--zolty);
}

.przycisk-podmenu:hover {
border: 1px solid var(--zolty);
}

.element-menu {
display: block;
}

.podmenu {
position: static;
    display: none;
    min-width: 0;
    margin: 8px 0 0;
    padding: 0;
    opacity: 1;
    border: 0;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: none;
    box-shadow: none;
    text-shadow: none;
}

.podmenu::before {
display: none;
}

.ma-podmenu.otwarte .podmenu {
display: grid;
    gap: 8px;
}

.podmenu a:hover {
border-color: var(--zolty);
    background: var(--zolty);
    color: var(--granat);
    transform: translateY(-1px);
}

.podmenu a:focus-visible {
border-color: var(--zolty);
    background: var(--zolty);
    color: var(--granat);
    transform: translateY(-1px);
}

.podmenu a.aktywny {
border-color: var(--zolty);
    background: var(--zolty);
    color: var(--granat);
    transform: translateY(-1px);
}

.panel-dodatkowych-przyciskow {
margin: 0 auto;
    padding: 25px;
width: 100%;
}

.link-nawigacji::after {
display: none;
}

.przycisk-podmenu::after {
display: none;
}

.tresc-hero {
grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 0px;
}

.centrum-hero {
grid-column: 1;
    grid-row: 1;
    order: 1;
}

.tytul-hero {
grid-column: 1;
    grid-row: 2;
    order: 2;
margin: 0;
    line-height: var(--odstep-linii-sredni);
}

.rzad-cta {
grid-column: 1;
    grid-row: 3;
    order: 3;
}

.kolumna-pedzli {
display: none;
}

.hero-glowna::before {
filter: none;
    transform: none;
}

.grupa-pol {
grid-template-columns: 1fr;
}

.formularz-kontaktowy {
padding: 0 16px 16px 16px;
}

.metryka-archiwum {
grid-template-columns: 1fr;
}

.rodzaj-wydarzenia {
bottom: 24px;
    top: auto;
}

.uklad-organizatorow {
grid-template-columns: 1fr;
}

.pozycja-danych {
justify-content: center;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.marka {
min-width: 92px;
}

.marka img {
height: 84px;
    transform: translateY(8px);
height: 78px;
}

.pojemnik {
width: min(calc(100% - 48px), var(--szerokosc-pojemnika));
}

.tresc-hero-podstrony {
width: min(calc(100% - 48px), var(--szerokosc-pojemnika));
}

.tytul-sekcji {
font-size: clamp(36px, 12vw, 58px);
}

.meta-wydarzenia {
grid-template-columns: 1fr;
}

.element-dlaczego {
grid-template-columns: 1fr;
}

.naklejka-dlaczego {
left: 10px;
    right:10px;
    padding: 16px 18px;
}

.lista-dlaczego article {
display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
    text-align: left;
}

.lista-dlaczego article .ikona-dlaczego {
margin: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
}

.lista-dlaczego article > div:not(.ikona-dlaczego) {
display: contents;
}

.lista-dlaczego article h3 {
grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
    text-align: left;
}

.lista-dlaczego article p {
grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    text-align: left;
}

.zdjecie-odbiorcy {
height: 220px;
    flex-basis: 220px;
}

.tresc-odbiorcy {
padding: 24px;
}

.hero-glowna {
min-height: 100svh;
    padding: calc(var(--wysokosc-naglowka) + 12px) 14px 62px;
}

.logo-hero {
width: min(420px, 80vw);
}

.rzad-przyciskow {
gap: 14px;
}

.rozpryski-farby {
display: none;
}

.pytanie-faq {
grid-template-columns: 46px 1fr 32px;
    gap: 12px;
    padding: 8px 14px;
}

.odpowiedz-faq {
padding: 10px 18px 10px 26px;
}

.rzad-stopki {
grid-template-columns: 1fr;
    text-align: center;
    gap: 14px;
}

.autor-stopki {
text-align: center;
}

.rzad-przyciskow-dodatkowych {
flex-direction: column;
    gap: 16px;
    width: 100%;
}

.tresc-pytania-koncowego .tytul-sekcji {
text-align: center;
}

.tresc-pytania-koncowego .opis-sekcji {
text-align: center;
}

.tresc-pytania-koncowego .etykieta-sekcji {
display: flex;
    width: fit-content;
    margin-inline: auto;
    justify-content: center;
}

.filtry-mapy {
display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.filtry-mapy > button:last-child {
grid-column: 1 / -1;
}

.siatka-placowek {
grid-template-columns: 1fr;
}

.tytul-hero-wydarzenia {
font-size: clamp(42px, 12vw, 66px);
}

.mapa-kontener {
height: 390px;
    min-height: 390px;
}

.karta-placowki dl {
grid-template-columns: 1fr;
}

.filtr-mapy {
width: 100%;
}

.filtr-dodatek {
width: 100%;
}

.dol-placowki {
align-items: flex-start;
}

.opis-zalozenia {
padding: 15px 14px;
}

.opis-zalozenia h3 {
font-size: 22px;
}

.karta-zalozenia::before {
left: -12px;
    top: -12px;
    width: 42px;
    height: 42px;
    font-size: 20px;
}

.ekran-logowania {
  height: auto;
  min-height: 100dvh;
  /* align-content: center; */
  padding: 16px 16px;
}

.strona-logowania,
.strona-logowania main {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

.obudowa-logowania {
  width: 100%;
  max-height: none;
}

.logo-logowania {
  width: 118px;
  margin-bottom: -42px;
}

.karta-logowania {
  padding: 48px 18px 20px;
  margin-bottom: 0;
}

.etykieta-logowania {
  margin-bottom: 7px;
  font-size: 12px;
}

.tytul-logowania {
  font-size: clamp(36px, 11vw, 46px);
}

.opis-logowania {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.2;
}

.formularz-logowania {
  gap: 14px;
  margin-top: 20px;
}

.pole-logowania {
  gap: 6px;
}

.pole-logowania > span {
  font-size: 14px;
}

.pole-logowania input {
  min-height: 48px;
  padding-inline: 13px;
  font-size: 15px;
}

.pomoc-formularza-logowania {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}

.dzialania-logowania {
display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dzialania-logowania .przycisk {
width: 100%;
  min-height: 48px;
  font-size: 14px;
}

}