/* Motyw lozy: stare zloto, granat i noc. Trzy kolory wystarcza - zloto na
   akcenty, chlodny blekit na liczby, granat na glebie. Dyskretnie masonski:
   posadzka w szachownice, cyrkiel z wegielnica w znaku, zadnych oczu w trojkacie. */
:root {
  --tlo: #080b12;
  --tlo-glebia: #04060b;
  --tlo-panel: rgba(224, 196, 122, .05);
  --tlo-panel-2: rgba(224, 196, 122, .1);
  --kamien: rgba(212, 175, 84, .16);
  --kamien-jasny: rgba(212, 175, 84, .38);
  --akcent: #c9a227;
  --akcent-jasny: #e8cf92;
  --akcent-guzik: #c9a227;
  --akcent2: #2c3e64;
  --akcent2-jasny: #8ea6cc;
  --akcent3: #8aa8d4;
  /* zloty sztabkowy gradient: jasny grzbiet w srodku, ciemniejsze konce.
     Klipuje sie na tekst (liczby, cena) i sluzy za tlo guzika - stad ciemny
     atrament na .pxbtn zamiast bieli, ktora na zlocie znika */
  --grad: linear-gradient(120deg, #a8811f, #e8cf92 48%, #b8912f);
  --atrament-guzika: #17120a;
  --tekst: #efe7d7;
  --tekst-cichy: #a49a86;
  --zieleń: #7fae86;
  --czerwien: #c86a6a;
  --niebieski: #8aa8d4;
  --tlo-poswiata: #0e1526;
  --tlo-pole: rgba(0, 0, 0, .4);
  --tlo-najazd: rgba(224, 196, 122, .12);
  --atrament: #efe7d7;
  --neon-cien: 0 0 18px rgba(212, 175, 84, .55);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- tlo: noc, posadzka w szachownice i lampy ---------- */

.strona {
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--tlo);
  overflow-x: hidden;
}
/* posadzka lozy: szachownica w perspektywie, plasko przy dolnej krawedzi ekranu,
   powoli sunaca w strone patrzacego. Kwadraty sa ledwo widoczne - to ma byc
   przeczucie posadzki, nie plansza do warcabow. Siatka linii na wierzchu
   trzyma czytelnosc pola, gdy same kwadraty rozmyja sie w perspektywie */
.strona::before {
  content: ""; position: fixed; z-index: -2; pointer-events: none;
  left: -60%; right: -60%; bottom: 0; height: 46vh;
  background-image:
    repeating-conic-gradient(rgba(212, 175, 84, .11) 0 25%, transparent 0 50%),
    repeating-linear-gradient(90deg, rgba(212, 175, 84, .16) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(212, 175, 84, .12) 0 1px, transparent 1px 96px);
  background-size: 192px 192px, auto, auto;
  transform: perspective(300px) rotateX(66deg);
  transform-origin: bottom center;
  /* maska sciemnia calosc juz przy dolnej krawedzi (alfa .55, nie 1), bo pelna
     szachownica czytala sie jak plansza do gry, a ma byc tylko przeczucie posadzki */
  mask-image: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 66%);
  animation: podloga 11s linear infinite;
}
@keyframes podloga {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 192px, 0 0, 0 96px; }
}
.strona::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(820px 460px at 12% -80px, rgba(201, 162, 39, .16), transparent 70%),
    radial-gradient(760px 440px at 88% 4%, rgba(44, 62, 100, .22), transparent 72%),
    radial-gradient(900px 520px at 60% 100%, rgba(138, 168, 212, .08), transparent 74%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
}
.strona section[id] { scroll-margin-top: 84px; }
.strona a { color: var(--akcent-jasny); }

/* ---------- pasek ---------- */

.pasek-gorny {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 26px; position: sticky; top: 0; z-index: 30;
  background: rgba(9, 12, 20, .78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kamien);
  box-shadow: 0 1px 0 rgba(212, 175, 84, .25), 0 10px 30px rgba(0, 0, 0, .5);
}
.marka {
  display: flex; align-items: center; gap: 11px;
  color: var(--tekst); text-decoration: none; white-space: nowrap;
}

/* logo (.logo-*) stoi w styl.css, bo ten sam znak wisi tez w naglowku panelu */
.marka .znak { display: inline-flex; flex: none; }
.marka .znak svg {
  width: 38px; height: 38px;
  filter: drop-shadow(0 0 12px rgba(212, 175, 84, .55));
}

.marka-tekst { display: flex; flex-direction: column; line-height: 1.1; }
.marka-nazwa {
  font-weight: 800; font-size: 21px; letter-spacing: .06em; color: var(--tekst);
  text-shadow: 0 0 14px rgba(212, 175, 84, .5);
}
.marka-slogan {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--akcent3); font-weight: 700;
  text-shadow: 0 0 12px rgba(138, 168, 212, .45);
}

.nawigacja { display: flex; gap: 6px; }
.nawigacja a {
  font-size: 13.5px; color: var(--tekst-cichy); text-decoration: none;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid transparent; transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.nawigacja a:hover {
  color: var(--tekst); background: var(--tlo-panel); border-color: var(--kamien);
}

.jezyki {
  display: flex; gap: 2px; padding: 3px;
  border: 1px solid var(--kamien); border-radius: 999px;
  background: var(--tlo-panel);
}
/* flaga to SVG (emoji flag nie ma glifu w Windowsie - patrz tresc.js), wiec rozmiar
   idzie z reguly .jezyk svg w styl.css, a nie z font-size */
.jezyk {
  display: inline-flex; align-items: center;
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 5px 9px; line-height: 0; border-radius: 999px;
  filter: grayscale(.7) opacity(.6); transition: filter .18s ease, background .18s ease;
}
.jezyk:hover { filter: none; }
.jezyk.wybrany { filter: none; background: rgba(255, 255, 255, .12); }

.pasek-konto { display: flex; align-items: center; gap: 10px; }
.pasek-nick { font-size: 13px; color: var(--tekst-cichy); white-space: nowrap; }

/* ---------- guziki ---------- */

.pxbtn, .strona a.pxbtn {
  position: relative; color: var(--atrament-guzika); border: none;
  font-weight: 700; letter-spacing: .02em;
  background: var(--grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 10px 30px rgba(201, 162, 39, .28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pxbtn:hover {
  filter: brightness(1.09); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 44px rgba(201, 162, 39, .55);
}
.pxbtn.szeroki { display: block; width: 100%; margin-top: 18px; }

.pxbtn-ghost, .strona a.pxbtn-ghost {
  color: var(--tekst);
  background: var(--tlo-panel);
  border: none;
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .09),
    inset 0 -3px 0 rgba(0, 0, 0, .3);
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.pxbtn-ghost:hover {
  background: var(--tlo-panel-2); color: var(--akcent-jasny); transform: translateY(-2px);
}
.pxbtn-ghost.maly { padding: 8px 14px; font-size: 12.5px; }

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

/* hero mierzy dokladnie jeden ekran (minus pasek gorny) i centruje tresc w pionie,
   zeby liczby i skroty do sekcji miescily sie bez scrollowania, a na wysokich
   ekranach nie zostawal pusty pas na dole. Odstepy jada na vh, wiec na niskich
   oknach scieskaja sie same, zamiast wypychac skroty pod krawedz */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100svh - 70px);
  padding: clamp(56px, 8vh, 124px) 24px clamp(40px, 6vh, 88px);
}
/* pieczec lozy za trescia hero: cyrkiel z wegielnica w kregu, ledwo widoczny,
   plus cieply poblask pod spodem. Znak jest w data-URI, a nie w HTML-u, bo to
   czysta dekoracja - nie ma go po co wystawiac drzewu dostepnosci */
/* pieczec siedzi wyzej niz tresc hero i jest mniejsza, bo przy 330 px i top -40 px
   wchodzila pod naglowek oraz akapit pod nim - zloty znak przebijal przez litery */
.winieta {
  position: absolute; pointer-events: none;
  top: -150px; left: 50%; width: 620px; height: 620px; margin-left: -310px;
  opacity: .38;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23c9a227' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='22'/%3E%3Ccircle cx='24' cy='24' r='19.4'/%3E%3Cpath d='M15 35 24 11 33 35'/%3E%3Cpath d='M13.5 23 24 34 34.5 23'/%3E%3C/svg%3E")
      center / 330px 330px no-repeat,
    radial-gradient(circle at 50% 46%, rgba(201, 162, 39, .16), transparent 60%);
}

/* trzy powoli plynace lampy - to one daja glebie zamiast plaskiego tla */
.poswiaty { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.poswiaty span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
  animation: plyn 20s ease-in-out infinite;
}
.poswiaty span:nth-child(1) {
  width: 420px; height: 420px; top: -120px; left: 4%;
  background: radial-gradient(circle, rgba(201, 162, 39, .5), transparent 68%);
}
.poswiaty span:nth-child(2) {
  width: 460px; height: 460px; top: -60px; right: 2%;
  background: radial-gradient(circle, rgba(44, 62, 100, .55), transparent 68%);
  animation-delay: -7s;
}
.poswiaty span:nth-child(3) {
  width: 360px; height: 360px; top: 320px; left: 42%;
  background: radial-gradient(circle, rgba(138, 168, 212, .3), transparent 70%);
  animation-delay: -13s;
}
@keyframes plyn {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(38px, 26px, 0) scale(1.08); }
  66% { transform: translate3d(-28px, 14px, 0) scale(.95); }
}

.hero-uklad {
  position: relative; max-width: 860px; margin: 0 auto; text-align: center;
}
.hero-tresc { position: relative; min-width: 0; }
.hero-opis, .plakietka-przegladarka { margin-left: auto; margin-right: auto; }
.hero-guziki { justify-content: center; }
.nadtytul {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 15px;
  font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700;
  color: var(--akcent-jasny);
  background: linear-gradient(90deg, rgba(201, 162, 39, .16), rgba(44, 62, 100, .16));
  border: 1px solid rgba(212, 175, 84, .35);
  border-radius: 999px; backdrop-filter: blur(8px);
  box-shadow: 0 0 22px rgba(212, 175, 84, .2);
}
/* romb zamiast kropki - drobny znak lozy, tetni jak kontrolka "chodzi" */
.nadtytul::before {
  content: ""; width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--akcent); box-shadow: 0 0 10px var(--akcent);
  animation: tetno 2.4s ease-in-out infinite;
}
@keyframes tetno {
  0%, 100% { opacity: 1; transform: rotate(45deg) scale(1); }
  50% { opacity: .45; transform: rotate(45deg) scale(.82); }
}
/* chromowany naglowek jak z okladki plyty z 1986: bialy grzbiet, rozowy spod */
.hero h1 {
  font-family: inherit; font-weight: 800;
  font-size: clamp(36px, 5.2vw, 60px); line-height: 1.05;
  letter-spacing: -.02em; margin: 0 0 26px;
  background: linear-gradient(180deg, #ffffff 8%, #fdf3d8 34%, #e0c274 62%, #a8811f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(212, 175, 84, .45));
}
.hero-opis { font-size: 17px; color: var(--tekst-cichy); max-width: 560px; margin: 0; }
.hero-guziki { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.plakietka-przegladarka {
  display: inline-flex; align-items: flex-start; gap: 10px; text-align: left;
  max-width: 560px; margin: 26px 0 0; padding: 11px 17px;
  font-size: 12.5px; line-height: 1.45; color: var(--tekst-cichy);
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  border-radius: 12px; backdrop-filter: blur(8px);
}
.plakietka-znak { color: var(--akcent2-jasny); font-size: 15px; line-height: 1.2; }

@media (prefers-reduced-motion: reduce) {
  .poswiaty span, .nadtytul::before { animation: none; }
}

.liczby {
  position: relative; list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
  margin: clamp(28px, 5vh, 64px) auto 0; padding: 0; max-width: 1000px;
}
.liczba {
  padding: 22px 16px; text-align: center; border-radius: 16px;
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.liczba:hover {
  transform: translateY(-3px); border-color: var(--kamien-jasny); background: var(--tlo-panel-2);
}
.liczba-wartosc {
  display: block; font-size: 31px; font-weight: 800; letter-spacing: -.02em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.liczba-etykieta { display: block; font-size: 12.5px; color: var(--tekst-cichy); margin-top: 6px; }

/* skroty do sekcji tuz pod liczbami - to samo, co w pasku gornym, ale w zasiegu
   wzroku, bez odjezdzania na gore strony */
.hero-skroty {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: clamp(18px, 3vh, 34px) auto 0;
}
.hero-skroty a {
  font-size: 13.5px; color: var(--tekst-cichy); text-decoration: none;
  padding: 9px 18px; border-radius: 999px;
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  backdrop-filter: blur(8px);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.hero-skroty a:hover {
  color: var(--akcent-jasny); background: var(--tlo-panel-2);
  border-color: var(--kamien-jasny); transform: translateY(-2px);
}

/* ---------- sekcje ---------- */

.sekcja { position: relative; max-width: 1160px; margin: 0 auto; padding: 96px 24px 0; }
.sekcja.waska { max-width: 760px; }
.sekcja h2 {
  font-family: inherit; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(26px, 4vw, 40px); text-align: center;
  background: linear-gradient(180deg, #ffffff 12%, #fdf3d8 42%, #e0c274 72%, #9a7b28 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px rgba(212, 175, 84, .3));
}
.sekcja h2::after {
  content: ""; display: block; width: 72px; height: 2px; margin: 16px auto 0;
  border-radius: 2px; background: var(--grad);
}
.podtytul { text-align: center; color: var(--tekst-cichy); max-width: 660px; margin: 14px auto 40px; }

.sekcja.ciemna {
  padding-top: 92px; padding-bottom: 92px; margin-top: 92px;
}
.sekcja.ciemna::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
  border-top: 1px solid var(--kamien); border-bottom: 1px solid var(--kamien);
}
.sekcja.ciemna + .sekcja { padding-top: 96px; }

/* ---------- moduly ---------- */

.grupy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grupa {
  padding: 24px 22px; border-radius: 18px;
  background: var(--tlo-panel); border: 1px solid var(--kamien);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.grupa h3 {
  font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--akcent);
  border-bottom: 1px solid var(--kamien); padding-bottom: 12px; margin: 0 0 8px;
}
.lista-mozliwosci { list-style: none; margin: 0; padding: 0; }
.mozliwosc {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 -12px; padding: 12px; border-radius: 14px;
  transition: background .18s ease;
}
.mozliwosc:hover { background: rgba(255, 255, 255, .05); }
.mozliwosc-tresc { min-width: 0; }
.mozliwosc-nazwa { display: block; font-weight: 600; font-size: 14.5px; color: var(--tekst); }
.mozliwosc-opis { margin: 3px 0 0; font-size: 13.5px; color: var(--tekst-cichy); }

/* ---------- kafelki ikon ---------- */

.ikona {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  color: var(--akcent-jasny);
  background: linear-gradient(150deg, rgba(201, 162, 39, .22), rgba(44, 62, 100, .24));
  border: 1px solid rgba(212, 175, 84, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ikona svg { width: 23px; height: 23px; }
.ikona.ikona-gry {
  background: linear-gradient(150deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
}
/* sprite'y z gry maja rozne proporcje (alliance 67x98, food 160x112), wiec
   przy sztywnym kwadracie te waskie wygladaly na mniejsze od reszty.
   Kwadrat rysuje kafelek, obrazek dostaje caly srodek i sam sie w nim miesci */
.ikona.ikona-gry img {
  width: 100%; height: 100%; padding: 5px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}
.grupa:hover {
  transform: translateY(-4px);
  border-color: var(--kamien-jasny);
  background: var(--tlo-panel-2);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
.mozliwosc:hover .ikona {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 0 28px rgba(201, 162, 39, .45), 0 0 14px rgba(138, 168, 212, .3);
}

/* ---------- podglad panelu ---------- */

.podglad-uklad { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
.podglad-tekst h2, .podglad-tekst .podtytul { text-align: left; margin-left: 0; }
.podglad-tekst h2::after { margin-left: 0; }
.ptaszki { list-style: none; margin: 0 0 26px; padding: 0; }
.ptaszki li {
  position: relative; padding-left: 28px; font-size: 14.5px; margin-bottom: 10px;
  color: var(--tekst-cichy);
}
/* romb zamiast ptaszka: ten sam znak co w plakietce nadtytulu, spina liste
   z reszta motywu i nie ciagnie zieleni w zloto-granatowa palete */
.ptaszki li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--akcent); box-shadow: 0 0 8px rgba(201, 162, 39, .5);
}

.podglad-makieta {
  padding: 18px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--kamien-jasny);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  transition: transform .2s ease;
}
.podglad-makieta:hover { transform: translateY(-4px); }
.makieta-tytul {
  font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--akcent); margin-bottom: 14px;
}
.podglad-makieta .okno-ataku { border-radius: 12px; gap: 10px; border-color: var(--kamien); }
/* w edytorze rzad ma na sztywno 2 albo 3 kolumny, bo sloty maja stac w siatce.
   W makiecie boczne flanki maja po jednym slocie, wiec siedzial on w polowie
   kolumny, a druga polowa stala pusta - i nazwa lamala sie w polowie slowa.
   Tu liczba kolumn idzie za liczba slotow */
.podglad-makieta .rzad-slotow {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
/* bez podpisow pod ikonami slot ma juz tylko obrazek i liczbe, wiec jest nizszy,
   a na obrazek robi sie miejsce */
.podglad-makieta .slot { min-height: 64px; justify-content: center; gap: 3px; }
.podglad-makieta .slot img { width: 40px; height: 40px; object-fit: contain; }
.podglad-makieta .slot .ilosc { font-size: 14px; color: var(--akcent-jasny); font-weight: 700; }
.podglad-makieta .flanka-naglowek { color: var(--akcent); }
.makieta-dol { margin-top: 16px; border-top: 1px solid var(--kamien); padding-top: 14px; }
.makieta-dol .wiersz { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.makieta-dol .etykieta { color: var(--tekst-cichy); }
.makieta-dol .wartosc { color: var(--akcent-jasny); font-weight: 600; }

/* ---------- cennik ---------- */

.oferta { display: flex; justify-content: center; }
.plan {
  position: relative; width: 100%; padding: 32px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  border: 1px solid rgba(212, 175, 84, .5);
  box-shadow: 0 0 90px rgba(201, 162, 39, .2), 0 30px 60px rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px);
}
.plan h3 { margin: 0; font-size: 20px; color: var(--tekst); }
.cena { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 4px; }
.cena-liczba {
  font-size: 50px; font-weight: 800; letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cena-okres { font-size: 14px; color: var(--tekst-cichy); }
.plan-opis { font-size: 14.5px; color: var(--tekst-cichy); margin: 8px 0 20px; }

.kod { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--kamien); }
.kod-etykieta { display: block; font-size: 13px; color: var(--tekst-cichy); margin-bottom: 9px; }
.kod-rzad { display: flex; gap: 8px; }
.kod-rzad input {
  flex: 1; text-transform: uppercase; letter-spacing: .08em;
  padding: 11px 13px; font-size: 14px; border-radius: 10px;
  background: var(--tlo-pole); border: 1px solid var(--kamien); color: var(--tekst);
}
.kod-wynik { margin: 10px 0 0; font-size: 13px; min-height: 1em; }
.kod-wynik.dobry { color: var(--zieleń); }
.kod-wynik.zly { color: var(--czerwien); }
.uwaga { text-align: center; font-size: 13.5px; color: var(--tekst-cichy); margin-top: 20px; }

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

.faq { display: grid; gap: 10px; }
.faq-pozycja {
  border: 1px solid var(--kamien); border-radius: 14px;
  background: var(--tlo-panel); backdrop-filter: blur(8px);
  transition: border-color .18s ease, background .18s ease;
}
.faq-pozycja:hover { border-color: var(--kamien-jasny); background: var(--tlo-panel-2); }
.faq-pozycja.otwarte { border-color: rgba(212, 175, 84, .45); }
.faq-pytanie {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--tekst);
  padding: 18px 46px 18px 20px; position: relative;
}
.faq-pytanie::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--akcent); font-size: 22px; font-weight: 400; line-height: 1;
}
.faq-pozycja.otwarte .faq-pytanie::after { content: "−"; }
.faq-pytanie:hover { color: var(--akcent-jasny); }
.faq-odpowiedz {
  display: none; margin: 0; padding: 0 46px 18px 20px; font-size: 14.5px; color: var(--tekst-cichy);
  animation: rozwin .22s ease both;
}
.faq-pozycja.otwarte .faq-odpowiedz { display: block; }
@keyframes rozwin {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- stopka ---------- */

.stopka {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  max-width: 1160px; margin: 96px auto 0; padding: 26px 24px 40px;
  border-top: 1px solid var(--kamien); font-size: 13.5px; color: var(--tekst-cichy);
}
.stopka .prawa { flex-basis: 100%; font-size: 12px; opacity: .7; }

/* ---------- brama logowania ---------- */

.brama {
  min-height: calc(100vh - 120px);
  display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.karta-bramy {
  width: 470px; max-width: 100%; padding: 34px 32px 28px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  border: 1px solid var(--kamien-jasny); border-radius: 22px;
  box-shadow: 0 0 90px rgba(201, 162, 39, .18), 0 30px 60px rgba(0, 0, 0, .6);
  backdrop-filter: blur(12px);
}
.karta-bramy h1 {
  font-size: 28px;
  background: linear-gradient(150deg, #ffffff, #cbb883);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.karta-bramy .podtytul { margin: 12px 0 22px; }
.karta-bramy .przycisk-discord { display: block; margin: 0 0 4px; border-radius: 10px; }
.brama-albo {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 18px; font-size: 11.5px; color: var(--tekst-cichy);
  text-transform: uppercase; letter-spacing: 1.6px;
}
.brama-albo::before, .brama-albo::after {
  content: ""; flex: 1; height: 1px; background: var(--kamien);
}
.brama-zakladki { display: flex; gap: 6px; margin-bottom: 18px; }
.brama-zakladka {
  flex: 1; padding: 9px 10px; font-size: 13px; cursor: pointer;
  background: var(--tlo-panel); color: var(--tekst-cichy);
  border: 1px solid var(--kamien); border-radius: 10px;
  font-family: inherit;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.brama-zakladka.aktywna {
  border-color: rgba(212, 175, 84, .5); color: var(--akcent-jasny); background: var(--tlo-najazd);
}
.karta-bramy .pole { text-align: left; margin-bottom: 12px; }
.karta-bramy .pole input {
  padding: 11px 13px; margin-top: 5px; font-size: 14px; border-radius: 10px;
  background: var(--tlo-pole); border: 1px solid var(--kamien); color: var(--tekst);
}
.karta-bramy .wskazowka {
  text-align: left; font-size: 11.5px; color: var(--tekst-cichy); margin: -6px 0 10px;
}
.karta-bramy .blad { margin: 4px 0 10px; font-size: 13px; color: var(--czerwien); }
.karta-bramy .pxbtn { width: 100%; margin-top: 8px; }
.karta-bramy .uwaga { margin-top: 16px; font-size: 12.5px; }

/* ---------- wjazd sekcji przy przewijaniu ---------- */

[data-wjazd] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-wjazd].widoczny { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .nawigacja { display: none; }
  .grupy { grid-template-columns: 1fr; }
  .podglad-uklad { grid-template-columns: 1fr; }
  .hero { padding-top: 88px; }
  .winieta { top: -190px; }
  .proporce { gap: 120px; opacity: .35; }
}

@media (max-width: 560px) {
  .pasek-gorny { gap: 10px; padding: 10px 14px; }
  .marka-nazwa { font-size: 18px; }
  .marka-slogan { font-size: 9px; }
  .pasek-nick { display: none; }
  .hero { padding-left: 16px; padding-right: 16px; }
  .sekcja { padding-left: 16px; padding-right: 16px; }
  .stopka { padding-left: 16px; padding-right: 16px; }
  .liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-guziki { flex-direction: column; align-items: stretch; }
  .podglad-makieta .okno-ataku { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  [data-wjazd] { opacity: 1; transform: none; transition: none; }
  .poswiaty span { animation: none; }
  .strona::before { animation: none; }
  .grupa:hover, .podglad-makieta:hover, .liczba:hover { transform: none; }
  .mozliwosc:hover .ikona { transform: none; }
}