:root {
  --tlo: rgb(5 5 6);
  --panel: rgb(13 13 15);
  --biel: rgb(255 255 255);
  --tekst: rgb(234 234 234);
  --szary: rgb(122 122 122);
  --jasne-tlo: rgb(234 234 234);
  --ciemny-tekst: rgb(18 18 20);
  --linia: rgb(255 255 255 / 0.15);
  --akcent: rgb(255 99 67);
  --kroj: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --brzeg: clamp(20px, 9vw, 173px);
  --szer: 1560px;
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  scrollbar-color: rgb(40 40 44) var(--tlo);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--biel);
  font-family: var(--kroj);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--biel);
  color: var(--tlo);
}

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

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 400;
  text-wrap: balance;
}

h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 1px solid var(--biel);
  outline-offset: 4px;
}

.skok {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 80;
  padding: 10px 14px;
  background: var(--biel);
  color: var(--tlo);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
}

.skok:focus {
  top: 16px;
}

.uklad {
  width: min(100%, calc(var(--szer) + 2 * var(--brzeg)));
  margin-inline: auto;
  padding-inline: var(--brzeg);
}

.ramka {
  --r: rgb(255 255 255 / 0.55);
  --d: 7px;
  background-image:
    linear-gradient(var(--r), var(--r)), linear-gradient(var(--r), var(--r)),
    linear-gradient(var(--r), var(--r)), linear-gradient(var(--r), var(--r)),
    linear-gradient(var(--r), var(--r)), linear-gradient(var(--r), var(--r)),
    linear-gradient(var(--r), var(--r)), linear-gradient(var(--r), var(--r));
  background-repeat: no-repeat;
  background-size:
    var(--d) 1px, 1px var(--d),
    var(--d) 1px, 1px var(--d),
    var(--d) 1px, 1px var(--d),
    var(--d) 1px, 1px var(--d);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid rgb(255 255 255 / 0.4);
  background: none;
  color: var(--biel);
  font-family: var(--kroj);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.przycisk:hover {
  border-color: var(--biel);
  background: rgb(255 255 255 / 0.08);
}

.przycisk--glowny {
  border-color: var(--biel);
  background: var(--biel);
  color: var(--tlo);
}

.przycisk--glowny:hover {
  border-color: rgb(220 220 220);
  background: rgb(220 220 220);
  color: var(--tlo);
}

.przycisk--maly {
  min-height: 40px;
  padding: 0 20px;
}

.przycisk--ciemny {
  border-color: var(--ciemny-tekst);
  background: var(--ciemny-tekst);
  color: var(--jasne-tlo);
}

.przycisk--ciemny:hover {
  border-color: rgb(50 50 54);
  background: rgb(50 50 54);
  color: var(--jasne-tlo);
}

.przycisk--jasny {
  border-color: rgb(18 18 20 / 0.35);
  color: var(--ciemny-tekst);
}

.przycisk--jasny:hover {
  border-color: var(--ciemny-tekst);
  background: rgb(0 0 0 / 0.05);
  color: var(--ciemny-tekst);
}

.komunikat {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 64px;
  background: var(--tlo);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.komunikat[hidden] {
  display: none;
}

.komunikat__tekst {
  font-size: 15px;
  text-align: center;
  color: var(--tekst);
}

.komunikat__zamknij {
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--szary);
  cursor: pointer;
}

.komunikat__zamknij svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.komunikat__zamknij:hover {
  color: var(--biel);
}

.naglowek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgb(5 5 6 / 0.85), rgb(5 5 6 / 0));
  transition: background-color 0.3s;
}

.naglowek.jest-pelny {
  background-color: rgb(5 5 6 / 0.96);
}

.naglowek__uklad {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 96px;
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  white-space: nowrap;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.marka img {
  width: 28px;
  height: auto;
}

.menu {
  display: flex;
  gap: 38px;
}

.menu a {
  padding-block: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tekst);
  transition: color 0.15s;
}

.menu a:hover {
  color: var(--biel);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.naglowek .przycisk {
  justify-self: end;
}

.start {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  min-height: clamp(560px, calc(100svh - 48px), 1000px);
  margin-top: -96px;
  padding: 96px var(--brzeg) clamp(40px, 7vh, 80px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.start__kadr {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.start__kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
}

.start__kadr::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 50%, rgb(5 5 6 / 0.35), rgb(5 5 6 / 0) 70%),
    linear-gradient(180deg, rgb(5 5 6 / 0.55) 0%, rgb(5 5 6 / 0.1) 30%, rgb(5 5 6 / 0.15) 55%, rgb(5 5 6 / 0.55) 72%, rgb(5 5 6 / 0.88) 88%, var(--tlo) 100%);
}

.start__srodek {
  align-self: center;
  display: grid;
  gap: 20px;
}

.start h1 {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 10.4vw, 176px);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.start__srodek p {
  font-size: clamp(18px, 1.4vw, 24px);
  letter-spacing: -0.04em;
  color: var(--tekst);
}

.start__akcje {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.start__akcje .przycisk {
  min-height: 52px;
  min-width: 11rem;
}

.misja {
  padding-block: clamp(96px, 12vw, 200px);
}

.misja__uklad {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 40px clamp(32px, 6vw, 120px);
  align-items: start;
  padding-top: 32px;
  border-top: 1px solid var(--linia);
}

.misja__tekst {
  max-width: 24ch;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.misja__lewa {
  display: grid;
  justify-items: start;
  gap: clamp(28px, 3vw, 40px);
}

.misja__akcje,
.sekcja__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.misja__akcje .przycisk,
.sekcja__akcje .przycisk {
  gap: 12px;
  min-height: 52px;
}

.krok__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-block: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--biel);
  border-bottom: 1px solid rgb(255 255 255 / 0.4);
  transition: border-color 0.15s;
}

.krok__link svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: translate 0.2s;
}

.krok__link:hover {
  border-bottom-color: var(--biel);
}

.krok__link:hover svg {
  translate: 3px 0;
}

.misja__dane {
  margin: 0;
  border-top: 1px solid var(--linia);
}

.misja__dane > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linia);
}

.misja__dane dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--szary);
}

.misja__dane dd {
  margin: 0;
  font-size: 16px;
}

.kroki {
  padding-bottom: clamp(96px, 12vw, 200px);
}

.sekcja__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.kroki__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 41px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.krok__ikona {
  display: grid;
  place-items: center;
  aspect-ratio: 447 / 180;
  margin-bottom: 22px;
  background: var(--panel);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.krok__ikona svg {
  width: clamp(48px, 4.4vw, 64px);
  height: auto;
  fill: none;
  stroke: var(--biel);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.krok__nr {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--szary);
}

.krok h3 {
  margin-top: 8px;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.krok__opis {
  max-width: 34ch;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.72);
}

.kroki__pomoc {
  margin-top: clamp(40px, 5vw, 64px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--szary);
}

code {
  font-family: var(--mono);
  color: var(--biel);
  text-transform: none;
}

.podanie {
  padding-bottom: clamp(96px, 12vw, 200px);
}

.podanie__uklad {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
}

.podanie__wstep {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 20px;
}

.podanie--podstrona {
  padding-top: clamp(40px, 6vw, 96px);
  min-height: calc(100svh - 144px);
}

.podanie__wstep h1 {
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.powrot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--szary);
  transition: color 0.15s;
}

.powrot svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.powrot:hover {
  color: var(--biel);
}

.podanie__kroki {
  display: grid;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etap;
  border-top: 1px solid var(--linia);
}

.podanie__kroki li {
  counter-increment: etap;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding: 12px 0;
  border-bottom: 1px solid var(--linia);
  font-size: 15px;
  color: var(--tekst);
}

.podanie__kroki li::before {
  content: "0" counter(etap);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 22px;
  color: var(--szary);
}

.menu a[aria-current="page"] {
  color: var(--biel);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.krok__opis a {
  color: var(--biel);
  text-underline-offset: 3px;
}

.podanie__wstep p {
  max-width: 42ch;
  color: rgb(255 255 255 / 0.78);
}

.podanie__wstep .podanie__uwaga {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--szary);
}

.formularz {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--panel);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.pole {
  grid-column: 1 / -1;
  display: grid;
  align-content: start;
  gap: 8px;
}

.pole--pol {
  grid-column: span 1;
}

.pole--ukryte {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pole label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tekst);
}

.pole input[type="text"],
.pole input[type="number"],
.pole select,
.pole textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 0;
  background-color: rgb(255 255 255 / 0.03);
  color: var(--biel);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.15s, background-color 0.15s;
}

.pole textarea {
  resize: vertical;
}

.pole select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tekst) 50%), linear-gradient(135deg, var(--tekst) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.pole select option {
  background: var(--panel);
  color: var(--biel);
}

.pole input:hover,
.pole select:hover,
.pole textarea:hover {
  border-color: rgb(255 255 255 / 0.35);
}

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
  outline: none;
  border-color: var(--biel);
  background-color: rgb(255 255 255 / 0.06);
}

.pole input::placeholder {
  color: rgb(255 255 255 / 0.3);
}

.pole[data-blad] input,
.pole[data-blad] textarea {
  border-color: rgb(255 120 100);
}

.pole__blad {
  font-size: 14px;
  color: rgb(255 140 120);
}

.pole__blad:empty,
.formularz__stan:empty {
  display: none;
}

.pole__podpowiedz {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--szary);
}

.pole--zgoda {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
}

.pole--zgoda input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--biel);
}

.pole--zgoda label {
  font-family: var(--kroj);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
}

.pole--zgoda .pole__blad {
  grid-column: 2;
}

.formularz__dol {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 8px;
}

.formularz__dol .przycisk {
  min-height: 52px;
  cursor: pointer;
}

.etapy button:disabled {
  cursor: default;
}

.formularz__dol .przycisk:disabled {
  opacity: 0.5;
  cursor: progress;
}

.formularz__stan {
  max-width: 46ch;
  font-size: 15px;
  color: var(--tekst);
}

.formularz__stan[data-typ="ok"] {
  color: rgb(140 220 160);
}

.formularz__stan[data-typ="blad"] {
  color: rgb(255 140 120);
}

.wyspa {
  padding-bottom: clamp(96px, 12vw, 200px);
}

.wyspa__uklad {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 120px);
  align-items: center;
}

.wyspa__tekst p {
  max-width: 44ch;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.78);
}

.dane {
  margin: 40px 0 0;
  border-top: 1px solid var(--linia);
}

.dane > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linia);
}

.dane dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--szary);
}

.dane dd {
  margin: 0;
  font-size: 16px;
}

.wyspa__mapa {
  position: relative;
}

.mapa {
  position: relative;
  aspect-ratio: 1;
  background: var(--panel);
}

.mapa img {
  width: 100%;
  height: 100%;
}

.mapa__nazwa {
  position: absolute;
  left: var(--x);
  top: var(--y);
  padding: 2px 6px;
  background: var(--tlo);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mapa__nazwa--woda {
  background: none;
  color: var(--szary);
}

.wyspa__mapa figcaption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--szary);
}

.stopka {
  overflow: hidden;
  background: var(--jasne-tlo);
  color: var(--ciemny-tekst);
}

.stopka ::selection {
  background: var(--ciemny-tekst);
  color: var(--jasne-tlo);
}

.stopka__uklad {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-top: clamp(64px, 8vw, 120px);
}

.stopka__marka {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.stopka__marka img {
  width: 30px;
  height: auto;
}

.stopka__zdanie {
  max-width: 34ch;
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.25;
  color: rgb(18 18 20 / 0.8);
}

.stopka__przyciski {
  display: flex;
  gap: 18px;
  margin-top: 28px;
}

.stopka__prawa {
  max-width: 52ch;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(18 18 20 / 0.45);
}

.stopka__kolumny {
  display: flex;
  gap: clamp(32px, 5vw, 72px);
}

.stopka__kolumny > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stopka__tytul,
.stopka__kolumny a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.stopka__tytul {
  margin-bottom: 4px;
}

.stopka__kolumny a {
  text-decoration: none;
  color: rgb(18 18 20 / 0.5);
  transition: color 0.15s;
}

.stopka__kolumny a:hover {
  color: var(--ciemny-tekst);
}

.stopka__napis {
  margin-top: clamp(64px, 8vw, 120px);
  padding: 0 0 0 0.5vw;
  font-size: 23vw;
  line-height: 0.78;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: rgb(18 18 20 / 0.07);
  user-select: none;
}

.stopka__napis span {
  display: inline-block;
}

.podanie__prawa {
  min-width: 0;
}

.etapy {
  display: grid;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linia);
}

.etapy li {
  border-bottom: 1px solid var(--linia);
}

.etapy button,
.etapy--statyczne li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  padding: 14px 0;
  border: 0;
  background: none;
  color: var(--szary);
  font: inherit;
  font-size: 15px;
  text-align: left;
}

.etapy button {
  cursor: default;
  transition: color 0.15s;
}

.etapy__nr {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.etapy__stan {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.etapy li[data-stan="obecny"] button {
  color: var(--biel);
}

.etapy li[data-stan="obecny"] {
  border-bottom-color: var(--biel);
}

.etapy li[data-stan="gotowy"] button {
  color: var(--tekst);
  cursor: pointer;
}

.etapy li[data-stan="gotowy"] button:hover .etapy__nazwa {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.etapy li[data-stan="gotowy"] .etapy__stan::before {
  content: "Gotowe";
}

.etapy li[data-stan="obecny"] .etapy__stan::before {
  content: "Teraz";
}

.etapy--statyczne {
  margin: 8px 0 8px;
}

.etapy--statyczne li {
  grid-template-columns: 2.75rem minmax(0, 1fr);
  color: var(--tekst);
}

.postep {
  display: none;
  height: 2px;
  margin-bottom: 0;
  background: rgb(255 255 255 / 0.1);
}

.postep span {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--biel);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .postep {
  display: block;
}

.etap {
  display: grid;
  gap: 28px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.etap + .etap {
  margin-top: 48px;
}

.etap legend {
  display: grid;
  gap: 8px;
  margin-bottom: 32px;
  padding: 0;
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.etap legend:focus {
  outline: none;
}

.etap legend span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--szary);
}

.etap__pola {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}

.formularz {
  display: block;
}

.formularz__dol {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

.pole__podpowiedz {
  font-family: var(--kroj);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--szary);
}

.licznik {
  display: flex;
  align-items: center;
  gap: 14px;
}

.licznik__pasek {
  flex: 1;
  height: 2px;
  background: rgb(255 255 255 / 0.12);
}

.licznik__pasek span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--szary);
  transition: width 0.2s, background-color 0.2s;
}

.licznik[data-gotowe] .licznik__pasek span {
  background: var(--biel);
}

.licznik__tekst {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--szary);
  white-space: nowrap;
}

.licznik[data-gotowe] .licznik__tekst {
  color: var(--tekst);
}

.etap--podsumowanie,
[data-wstecz],
[data-dalej] {
  display: none;
}

.js .etap {
  display: none;
}

.js .etap[data-aktywny] {
  display: grid;
}

.js .etap + .etap {
  margin-top: 0;
}

.js [data-wstecz]:not([hidden]),
.js [data-dalej]:not([hidden]) {
  display: inline-flex;
}

.js [data-wyslij][hidden] {
  display: none;
}

.formularz__dol [data-wstecz] {
  margin-right: auto;
}

.podsumowanie {
  margin: 0;
  border-top: 1px solid var(--linia);
}

.podsumowanie > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: 8px 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--linia);
}

.podsumowanie dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--szary);
}

.podsumowanie dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.podsumowanie button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--tekst);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.podsumowanie button:hover {
  color: var(--biel);
}

.wyslane {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--panel);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.wyslane[hidden] {
  display: none;
}

.wyslane:focus {
  outline: none;
}

.wyslane__znacznik {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgb(140 220 160);
}

.wyslane h2 {
  font-size: clamp(30px, 3vw, 44px);
}

.wyslane > p:not(.wyslane__znacznik) {
  max-width: 46ch;
  color: rgb(255 255 255 / 0.78);
}

.wyslane .etapy {
  width: 100%;
}

.wl-naglowek {
  position: relative;
  display: grid;
  align-content: end;
  gap: clamp(36px, 5vw, 64px);
  min-height: clamp(380px, 52vh, 520px);
  margin-top: -96px;
  padding-top: 132px;
  overflow: hidden;
  isolation: isolate;
}

.wl-naglowek__kadr {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.wl-naglowek__kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 38%;
}

.wl-naglowek__kadr::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(5 5 6 / 0.7) 0%, rgb(5 5 6 / 0.35) 35%, rgb(5 5 6 / 0.75) 75%, var(--tlo) 100%),
    linear-gradient(90deg, rgb(5 5 6 / 0.75) 0%, rgb(5 5 6 / 0.1) 60%);
}

.wl-naglowek__tresc {
  display: grid;
  justify-items: start;
  gap: 18px;
}

.wl-naglowek h1 {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 7.2vw, 116px);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.wl-naglowek__tresc p {
  max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.45;
  color: var(--tekst);
}

.krokownik {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.krokownik li {
  position: relative;
  border-top: 2px solid rgb(255 255 255 / 0.18);
}

.krokownik li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 0;
  height: 2px;
  background: var(--biel);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.krokownik li[data-stan="obecny"]::before,
.krokownik li[data-stan="gotowy"]::before {
  width: 100%;
}

.krokownik li[data-stan="gotowy"]::before {
  background: rgb(255 255 255 / 0.55);
}

.krokownik button {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 16px 0 20px;
  border: 0;
  background: none;
  color: var(--szary);
  font: inherit;
  font-size: 15px;
  text-align: left;
  transition: color 0.15s;
}

.krokownik__nr {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.krokownik li[data-stan="obecny"] button {
  color: var(--biel);
}

.krokownik li[data-stan="gotowy"] button {
  color: var(--tekst);
  cursor: pointer;
}

.krokownik li[data-stan="gotowy"] button:hover .krokownik__nazwa {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.krokownik button:disabled {
  cursor: default;
}

.podanie--podstrona {
  min-height: 0;
  padding-top: clamp(32px, 4vw, 56px);
}

.podanie__siatka {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.podanie__glowna {
  min-width: 0;
}

.podanie--podstrona .postep {
  height: 2px;
  background: rgb(255 255 255 / 0.08);
}

.podanie--podstrona .formularz {
  padding: clamp(28px, 4vw, 56px);
  background: rgb(12 12 14);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-top: 0;
}

.podanie--podstrona .etap legend {
  gap: 10px;
  margin-bottom: 36px;
  font-size: clamp(30px, 2.8vw, 42px);
  letter-spacing: -0.035em;
}

.podanie--podstrona .etap__pola {
  gap: 32px 24px;
}

.podanie--podstrona .pole label {
  font-size: 12px;
  color: rgb(255 255 255 / 0.7);
}

.podanie--podstrona .pole input[type="text"],
.podanie--podstrona .pole input[type="number"],
.podanie--podstrona .pole select,
.podanie--podstrona .pole textarea {
  min-height: 56px;
  padding: 15px 18px;
  border-color: rgb(255 255 255 / 0.12);
  background-color: rgb(255 255 255 / 0.035);
  font-size: 17px;
}

.podanie--podstrona .pole select {
  background-position: calc(100% - 22px) 25px, calc(100% - 17px) 25px;
}

.podanie--podstrona .pole input:focus,
.podanie--podstrona .pole select:focus,
.podanie--podstrona .pole textarea:focus {
  border-color: rgb(255 255 255 / 0.85);
  background-color: rgb(255 255 255 / 0.06);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.06);
}

.pole input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.pole input[type="number"]::-webkit-outer-spin-button,
.pole input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.podanie--podstrona .formularz__dol {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 28px;
}

.podanie--podstrona .formularz__dol [data-wstecz] {
  margin-right: 0;
}

.podanie--podstrona .formularz__stan {
  flex: 1;
  min-width: 0;
}

.formularz__dol .przycisk,
.wyslane .przycisk {
  gap: 12px;
  min-height: 56px;
  padding: 0 26px;
}

.przycisk svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: translate 0.2s;
}

.przycisk:hover svg {
  translate: 3px 0;
}

.przycisk--cichy {
  border-color: transparent;
  padding-left: 0;
  color: var(--tekst);
}

.przycisk--cichy:hover {
  border-color: transparent;
  background: none;
  color: var(--biel);
}

.przycisk--cichy:hover svg {
  translate: -3px 0;
}

.podanie--podstrona .podsumowanie > div {
  grid-template-columns: 12rem minmax(0, 1fr) auto;
  padding: 18px 0;
}

.podanie--podstrona .podsumowanie dd {
  font-size: 16px;
}

.podanie__bok {
  position: sticky;
  top: 120px;
}

.bok {
  display: grid;
  gap: 20px;
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.bok h2 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.bok__lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bok;
  border-top: 1px solid var(--linia);
}

.bok__lista li {
  counter-increment: bok;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  padding: 12px 0;
  border-bottom: 1px solid var(--linia);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tekst);
}

.bok__lista li::before {
  content: "0" counter(bok);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 22px;
  color: var(--szary);
}

.bok .przycisk {
  width: 100%;
}

.bok__uwaga {
  font-size: 13px;
  line-height: 1.55;
  color: var(--szary);
}

.podanie--podstrona .wyslane {
  padding: clamp(28px, 4vw, 56px);
  border-top: 0;
}

@media (max-width: 1100px) {
  .podanie__siatka {
    grid-template-columns: minmax(0, 1fr);
  }

  .podanie__bok {
    position: static;
  }
}

@media (max-width: 760px) {
  .wl-naglowek {
    min-height: 0;
    margin-top: -72px;
    padding-top: 108px;
    gap: 32px;
  }

  .krokownik {
    gap: 6px;
  }

  .krokownik__nazwa {
    display: none;
  }

  .krokownik li[data-stan="obecny"] .krokownik__nazwa {
    display: inline;
  }

  .krokownik li[data-stan="obecny"] {
    grid-column: span 1;
  }

  .krokownik button {
    padding: 12px 0 14px;
    white-space: nowrap;
  }

  .podanie--podstrona .formularz {
    padding: 24px 18px;
  }

  .podanie--podstrona .formularz__dol {
    flex-wrap: wrap;
  }

  .podanie--podstrona .formularz__stan {
    flex-basis: 100%;
    order: 3;
  }

  .podanie--podstrona .formularz__dol [data-dalej],
  .podanie--podstrona .formularz__dol [data-wyslij] {
    flex: 1;
    justify-content: space-between;
  }

  .podanie--podstrona .podsumowanie > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@view-transition {
  navigation: auto;
}

.komunikat {
  view-transition-name: komunikat;
}

.naglowek {
  view-transition-name: naglowek;
}

::view-transition-old(root) {
  animation: 220ms cubic-bezier(0.4, 0, 1, 1) both strona-wyjscie;
}

::view-transition-new(root) {
  animation: 520ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both strona-wejscie;
}

@keyframes strona-wyjscie {
  to {
    opacity: 0;
    transform: translateY(-16px);
  }
}

@keyframes strona-wejscie {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

.formularz[data-kierunek] .etap[data-aktywny] {
  animation: 460ms cubic-bezier(0.16, 1, 0.3, 1) both etap-dalej;
}

.formularz[data-kierunek="wstecz"] .etap[data-aktywny] {
  animation-name: etap-wstecz;
}

.wyslane:not([hidden]) {
  animation: 520ms cubic-bezier(0.16, 1, 0.3, 1) both etap-dalej;
}

@keyframes etap-dalej {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}

@keyframes etap-wstecz {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}

@media (max-width: 1280px) {
  .menu {
    gap: 24px;
  }
}

@media (max-width: 1180px) {
  .marka {
    font-size: 22px;
  }

  .menu {
    gap: 18px;
  }
}

@media (max-width: 1100px) {

  .kroki__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }

  .wyspa__uklad,
  .podanie__uklad,
  .misja__uklad {
    grid-template-columns: minmax(0, 1fr);
  }

  .podanie__wstep {
    position: static;
  }
}

@media (max-width: 760px) {
  .komunikat {
    justify-content: flex-start;
    padding: 8px 56px 8px 16px;
  }

  .komunikat__tekst {
    font-size: 14px;
    text-align: left;
  }

  .naglowek__uklad {
    grid-template-columns: 1fr auto;
    height: 72px;
  }

  .menu {
    display: none;
  }

  .marka {
    font-size: 22px;
  }

  .start {
    margin-top: -72px;
    padding-top: 72px;
  }

  .start__kadr img {
    object-position: 66% 45%;
  }

  .sekcja__gora {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .dane > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .formularz {
    padding: 20px;
  }

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

  .podsumowanie > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .podsumowanie dd {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .formularz__dol .przycisk {
    flex: 1 1 auto;
  }

  .pole--pol {
    grid-column: 1 / -1;
  }

  .stopka__uklad {
    flex-direction: column;
  }

  .stopka__przyciski .przycisk,
  .misja__akcje .przycisk,
  .sekcja__akcje .przycisk {
    flex: 1;
  }

  .sekcja__akcje {
    width: 100%;
  }

  .start__akcje {
    width: 100%;
  }

  .start__akcje .przycisk {
    flex: 1 1 100%;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

.logowanie {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: clamp(28px, 4vw, 56px);
  background: var(--panel);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.logowanie[hidden],
.formularz[hidden],
.postep[hidden] {
  display: none;
}

.logowanie__znacznik {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--szary);
}

.logowanie h2 {
  font-size: clamp(30px, 3vw, 44px);
}

.logowanie > p:not(.logowanie__znacznik):not(.logowanie__stan) {
  max-width: 52ch;
  color: rgb(255 255 255 / 0.78);
}

.logowanie__stan {
  font-size: 15px;
  color: rgb(255 140 120);
}

.logowanie__stan:empty {
  display: none;
}

.konto__etykieta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tekst);
}

.konto__wiersz {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--linia);
  background: rgb(255 255 255 / 0.03);
}

.konto__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.konto__dane {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.konto__nazwa {
  font-size: 16px;
  color: var(--biel);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.konto__login {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--szary);
}

.konto__zmien {
  margin-left: auto;
  font-size: 13px;
  color: var(--szary);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.konto__zmien:hover {
  color: var(--biel);
}

.wl-naglowek--niski {
  min-height: clamp(320px, 42vh, 440px);
}

.regulamin {
  padding: clamp(48px, 6vw, 96px) 0 clamp(96px, 12vw, 180px);
}

.regulamin__siatka {
  display: grid;
  grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr);
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
}

.regulamin__spis {
  position: sticky;
  top: 120px;
}

.regulamin__spis-tytul {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--szary);
}

.regulamin__spis ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linia);
}

.regulamin__spis a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  padding: 11px 0;
  border-bottom: 1px solid var(--linia);
  font-size: 15px;
  color: var(--tekst);
  text-decoration: none;
}

.regulamin__spis a span {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 22px;
  color: var(--szary);
}

.regulamin__spis a:hover {
  color: var(--biel);
}

.regulamin__tresc {
  display: grid;
  gap: clamp(56px, 6vw, 88px);
  max-width: 820px;
}

.regulamin__dzial {
  scroll-margin-top: 110px;
}

.regulamin__dzial h2 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.regulamin__dzial h2 span {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.07em;
  color: var(--szary);
}

.regulamin__punkty,
.regulamin__slowa {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linia);
}

.regulamin__punkty li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linia);
  scroll-margin-top: 110px;
}

.regulamin__nr {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 26px;
  color: var(--szary);
}

.regulamin__punkty p,
.regulamin__slowa dd {
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst);
}

.regulamin__slowa div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linia);
}

.regulamin__slowa dt {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 26px;
  color: var(--biel);
}

.regulamin__slowa dd {
  margin: 0;
}

.regulamin__koniec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--panel);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.regulamin__koniec p {
  max-width: 44ch;
  color: rgb(255 255 255 / 0.78);
}

@media (max-width: 1100px) {
  .regulamin__siatka {
    grid-template-columns: minmax(0, 1fr);
  }

  .regulamin__spis {
    position: static;
  }

  .regulamin__spis ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

@media (max-width: 760px) {
  .regulamin__spis ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .regulamin__punkty li {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  .regulamin__slowa div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}