

:root {
  --noc:        #171126;
  --fiolet:     #201736;
  --fiolet-2:   #2A1F45;
  --fiolet-3:   #362A55;
  --orchid:     #D3C2F0;
  --orchid-cie: #A38FD0;
  
  --fuksja:     #C03A75;
  --fuksja-cie: #D01F79;
  --biel:       #FFFBF6;
  --biel-mgl:   rgba(255, 251, 246, .74);
  --biel-cien:  rgba(255, 251, 246, .46);
  --linia:      rgba(211, 194, 240, .16);
  --linia-moc:  rgba(255, 61, 158, .38);

  --display: "Cormorant Garamond", Georgia, serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --marg: clamp(18px, 3.4vw, 52px);

  
  --maks: min(1280px, 100%);
  
  --wciecie: max(var(--marg), calc((100% - var(--maks)) / 2 + var(--marg)));
  --maks-szeroki: min(1520px, 100%);
  --maks-tekst: 64ch;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--noc);
  color: var(--biel);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 96% 6%, rgba(255, 61, 158, .12), transparent 66%),
    radial-gradient(40% 30% at 2% 88%, rgba(163, 143, 208, .10), transparent 64%);
}

body > * { position: relative; z-index: 1; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--fuksja); outline-offset: 3px; }

.probka {
  background: #0C0814;
  color: var(--orchid-cie);
  font-size: 12.5px;
  letter-spacing: .05em;
  padding: 9px 22px;
  text-align: center;
}
.probka b { color: var(--fuksja); font-weight: 500; }
.probka a { color: var(--orchid); }

.szczyt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 26px var(--marg) 20px;
  max-width: var(--maks);
  margin: 0 auto;
}

.szczyt-strefa { position: relative; }

.szczyt-strefa > .szczyt {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  max-width: none;
  padding-inline: var(--wciecie);
}

.szczyt-strefa > .czolo { padding-top: clamp(118px, 15vh, 210px); }

.tylko-dla-czytnikow {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.znak {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.3vw, 28px);
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  color: var(--biel);
  white-space: nowrap;
}

.znak em { font-style: italic; color: var(--fuksja); font-weight: 400; }

.zdanie {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14.5px, 1.5vw, 19px);
  line-height: 1.4;
  color: var(--biel-mgl);
  max-width: 48ch;
  justify-self: center;
  text-align: center;
  margin: 0;
}

h1.zdanie { font-weight: 400; }

.rok { font-size: 10.5px; letter-spacing: .28em; color: var(--orchid-cie); white-space: nowrap; }

.menu {
  display: flex;
  gap: 22px;
  
  font-family: var(--sans);
  
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  justify-self: end;
}

.menu a {
  text-decoration: none;
  color: rgba(255, 251, 246, .82);
  text-shadow: 0 1px 12px rgba(12, 8, 20, .75);
  padding-bottom: 5px;
  position: relative;
  white-space: nowrap;
  transition: color .3s ease;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--fuksja);
  transition: right .5s cubic-bezier(.2,.8,.2,1);
}

.menu a:hover, .menu a:focus-visible { color: var(--biel); }
.menu a:hover::after, .menu a:focus-visible::after { right: 0; }
.menu a[aria-current="page"] { color: var(--biel); }
.menu a[aria-current="page"]::after { right: 0; }

.menu-przycisk {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  padding: 11px 9px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 20;
}

.menu-przycisk span {
  display: block;
  height: 2px;
  background: var(--biel);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}

.menu-przycisk span + span { margin-top: 5px; }

.menu-przycisk[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-przycisk[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-przycisk[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-przycisk { display: block; }

  .menu {
    position: fixed;
    inset: 0;
    
    width: 100%;
    height: 100%;
    justify-self: auto;
    z-index: 15;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(18px, 4vh, 34px);
    padding: 0 var(--marg);
    background: rgba(19, 13, 32, .97);
    backdrop-filter: blur(6px);
    font-size: 15px;
    letter-spacing: .16em;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }

  .menu.otwarte { opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu a { padding: 6px 0; }
  .menu a::after { display: none; }

  
  
  .szczyt-strefa > .szczyt, .szczyt { position: relative; z-index: 30; }
  .szczyt-strefa > .szczyt { position: absolute; }
}

.znak { flex: none; }

.znak img { display: block; height: clamp(34px, 3vw, 44px); width: auto; max-width: none; }
.stopka-znak .znak img { height: clamp(36px, 3.4vw, 48px); }

.pola {
  display: flex;
  gap: 3px;
  
  --pola-gora: clamp(8px, 1.2vw, 18px);
  --pola-dol: clamp(18px, 3vw, 40px);
  padding: var(--pola-gora) var(--marg) var(--pola-dol);
  height: clamp(430px, 70vh, 760px);
  max-width: none;
  margin: 0;
}

.pola { position: relative; }

.pola::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  bottom: calc(100% - var(--pola-gora));
  height: clamp(70px, 9vw, 150px);
  background-image:
    linear-gradient(90deg, transparent,
                    rgba(211, 194, 240, .26) 12%,
                    rgba(255, 61, 158, .34) 50%,
                    rgba(211, 194, 240, .26) 88%, transparent),
    radial-gradient(48% 100% at 50% 100%, rgba(255, 61, 158, .12), transparent 74%);
  background-position: 50% 100%, 50% 100%;
  background-size: calc(100% - 2 * var(--marg)) 1px, 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}

.pola::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  top: calc(100% - var(--pola-dol));
  height: clamp(140px, 18vw, 280px);
  background-image:
    linear-gradient(90deg, transparent,
                    rgba(211, 194, 240, .26) 12%,
                    rgba(255, 61, 158, .34) 50%,
                    rgba(211, 194, 240, .26) 88%, transparent),
    radial-gradient(58% 100% at 50% 0%, rgba(255, 61, 158, .15), transparent 76%);
  background-position: 50% 0, 50% 0;
  background-size: calc(100% - 2 * var(--marg)) 1px, 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}

.pole {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  
  --woalka: var(--tlo);
  
  --halo: rgba(12, 8, 20, .75);
  --halo-daleki: rgba(12, 8, 20, .6);
  text-decoration: none;
  background: var(--tlo);
  transition: flex-grow 1.15s cubic-bezier(.33,.9,.28,1);
  display: block;
  isolation: isolate;
}

.pole:nth-child(1) { --tlo: #2E2249;   --napis: var(--biel);     --akc: var(--orchid); }
.pole:nth-child(2) { --tlo: #C51E75;   --napis: var(--biel);     --akc: #FFE2EF; }

.pole:nth-child(3) { --tlo: #AF7BBD;   --napis: var(--biel);     --akc: #FFFBF6; }

.pole:nth-child(4) { --tlo: #390A38;   --napis: var(--biel);     --akc: #FFE2EF; }

.pola:hover .pole { flex-grow: .82; }

.pola:hover .pole:not(:hover) .pole-foto,
.pola:focus-within .pole:not(:focus-visible):not(:hover) .pole-foto {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  opacity: 0;
}
.pola .pole:hover, .pola .pole:focus-visible { flex-grow: 2.1; }

.pole-foto {
  position: absolute; inset: 0; z-index: 0;
  opacity: 1;
  
  
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 19% 100%);
  
  transition:
    clip-path 1.15s cubic-bezier(.33,.9,.28,1),
    filter 1s ease;
}

.pole-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  
  object-position: top center;
  filter: grayscale(.34) contrast(1.04);
}

.pole:hover .pole-foto, .pole:focus-visible .pole-foto {
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
}

.pole:hover .pole-foto img, .pole:focus-visible .pole-foto img { filter: none; }

.pole-foto::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(88% 62% at -4% 104%,
      var(--tlo) 0%,
      color-mix(in srgb, var(--tlo) 88%, transparent) 34%,
      color-mix(in srgb, var(--tlo) 44%, transparent) 62%,
      transparent 84%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--tlo) 72%, transparent) 0%,
      color-mix(in srgb, var(--tlo) 28%, transparent) 26%,
      transparent 52%);
}

.pole-zrzut .pole-foto img {
  object-position: 86% center;
  transform: scale(1.22);
  transform-origin: 86% top;
}

.pole-zrzut:hover .pole-foto img,
.pole-zrzut:focus-visible .pole-foto img {
  object-position: 34% top;
  transform: none;
}

.pole-pion {
  position: absolute;
  left: clamp(18px, 1.6vw, 30px);
  bottom: clamp(24px, 3vh, 44px);
  z-index: 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 7.2vh, 88px);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.012em;
  
  
  color: color-mix(in srgb, var(--napis) 92%, transparent);
  text-shadow: 0 2px 10px var(--halo), 0 4px 34px var(--halo-daleki);
  transition: opacity .35s ease, color .5s ease;
  transition: opacity .35s ease;
  white-space: nowrap;
  pointer-events: none;
}

.pole:hover .pole-pion, .pole:focus-visible .pole-pion { opacity: 0; visibility: hidden; }

.pole:hover .pole-tresc, .pole:focus-visible .pole-tresc { text-shadow: 0 2px 18px var(--halo); }

.pole:hover .pole-foto::after,
.pole:focus-visible .pole-foto::after {
  background:
    radial-gradient(96% 70% at -6% 106%,
      var(--woalka) 0%,
      color-mix(in srgb, var(--woalka) 94%, transparent) 40%,
      color-mix(in srgb, var(--woalka) 62%, transparent) 68%,
      transparent 88%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--woalka) 86%, transparent) 0%,
      color-mix(in srgb, var(--woalka) 40%, transparent) 30%,
      transparent 58%);
}

.pole-tresc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 32px clamp(24px, 2.4vw, 40px) 34px;
  color: var(--napis);
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
  transition: opacity .6s ease .3s, transform .8s cubic-bezier(.33,.9,.28,1) .3s, visibility 0s linear 1.1s;
  pointer-events: none;
}

.pole:hover .pole-tresc, .pole:focus-visible .pole-tresc {
  opacity: 1; transform: none; visibility: visible; transition-delay: .3s, .3s, 0s;
}

.pole-tresc h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 50px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  text-wrap: balance;
}

.pole-daty {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .24em;
  color: var(--akc);
  margin: -6px 0 12px;
}

.pole-tresc p {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17.5px);
  max-width: 34ch;
  color: color-mix(in srgb, var(--napis) 78%, transparent);
}

.pole-tresc .wejdz {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--akc);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

@media (max-width: 820px) {
  .pola { flex-direction: column; height: auto; gap: 8px; }
  
  .pole { flex: 0 0 auto; min-height: 0; }
  .pola:hover .pole, .pola .pole:hover { flex-grow: 1; }
  
  .pole-foto {
    opacity: 1; transform: none;
    inset: 0 0 auto 0;
    
    height: 182px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%);
  }
  .pole-foto img { filter: none; }
  
  .pole:hover .pole-foto, .pole:focus-visible .pole-foto,
  .pola:hover .pole:not(:hover) .pole-foto,
  .pola:focus-within .pole:not(:focus-visible):not(:hover) .pole-foto {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%);
    opacity: 1;
  }
  .pole-pion { display: none; }
  
  .pole-tresc {
    opacity: 1; transform: none; visibility: visible;
    
    position: relative; display: block; padding-top: 180px; padding-bottom: 20px;
  }

  
  .pola .pole .pole-foto::after,
  .pola .pole:hover .pole-foto::after {
    background: none;
  }

  
  .pole-zrzut .pole-foto img,
  .pole-zrzut:hover .pole-foto img {
    object-position: 34% top;
    transform: none;
  }

  
  
  .pole-tresc h2 { font-size: clamp(31px, 8.6vw, 41px); line-height: .96; margin-bottom: 0; }

  
  .pole-tresc h2 br.jedna-linia { display: none; }
  .pole-tresc h2 .linia2::before { content: " "; }
  .pole-daty { margin: -2px 0 1px; }
  .pole-tresc .wejdz { margin-top: 3px; padding-bottom: 2px; }
  
  .pole:hover .pole-tresc, .pole:focus-visible .pole-tresc { text-shadow: none; }
  .pole-makijaz .pole-foto img { object-position: 50% 26%; }
  .pole-archiwum .pole-foto img { object-position: 50% 20%; }
}

.pole-grafika {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: .9;
  transition: opacity .8s ease, transform 1.4s cubic-bezier(.33,.9,.28,1);
}

.pole-grafika svg { width: 78%; height: auto; overflow: visible; }
.pole-grafika .kreska { fill: none; stroke: rgba(255, 251, 246, .62); stroke-width: 1.2; }
.pole-grafika .plama { fill: rgba(255, 61, 158, .62); }
.pole-grafika .plama-2 { fill: rgba(211, 194, 240, .42); }

.pole:hover .pole-grafika, .pole:focus-visible .pole-grafika { opacity: .28; transform: scale(1.06); }

.czolo {
  position: relative;
  
  min-height: clamp(470px, 88vh, 960px);
  border-bottom: 1px solid var(--linia-moc);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.9);
  display: grid;
  align-content: end;
  padding: clamp(40px, 6vw, 90px) var(--marg) clamp(38px, 5vw, 76px);
  margin: 0;
  max-width: none;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

.czolo > .czolo-tekst {
  width: 100%;
  max-width: var(--maks);
  margin: 0 auto;
}

.czolo-tlo {
  position: absolute;
  inset: -8% 0 0;
  z-index: -2;
  will-change: transform;
}

.czolo-tlo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--kadr, 50% 18%);
  
  filter: brightness(.82) saturate(.94);
}

.czolo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  
  
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.06) 18%,
      transparent 42%,
      rgba(0,0,0,.40) 74%,
      rgba(0,0,0,.62) 100%);
}

.czolo-tekst { position: relative; max-width: none; }

.est {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--fuksja);
  margin-bottom: 18px;
}

.czolo h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(38px, 5.6vw, 86px);
  line-height: 1.0;
  max-width: 24ch;
  letter-spacing: -.022em;
  margin: 0;
  color: var(--biel);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

.czolo h1 em { font-style: italic; color: var(--fuksja); font-weight: 400; }

.czolo h1 em.wers { display: block; }

.czolo-lead {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.5;
  color: rgba(255, 251, 246, .86);
  margin: 24px 0 0;
  
  max-width: 68ch;
  position: relative;
}

@media (max-width: 900px) { .czolo-tekst { max-width: none; } }

.czolo-sciana { --slupki: 6; }

.sciana {
  position: absolute;
  inset: -4% 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(var(--slupki), 1fr);
  gap: 10px;
  overflow: hidden;
}

.sciana-slup {
  display: block;
  animation: sciana-w-gore 76s linear infinite;
  will-change: transform;
}

.sciana-slup:nth-child(2) { animation: sciana-w-dol 92s linear infinite; }
.sciana-slup:nth-child(3) { animation-duration: 84s; }
.sciana-slup:nth-child(4) { animation: sciana-w-dol 100s linear infinite; }
.sciana-slup:nth-child(5) { animation-duration: 88s; }
.sciana-slup:nth-child(6) { animation: sciana-w-dol 96s linear infinite; }

.sciana-slup img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin-bottom: 10px;
  filter: grayscale(.6) brightness(.58) contrast(1.05);
}

@keyframes sciana-w-gore {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@keyframes sciana-w-dol {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

.czolo-sciana.czolo-sciana-www { --slupki: 4; }

.sciana-www .sciana-slup img {
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(211, 194, 240, .14);
  filter: grayscale(.42) brightness(.46) contrast(1.04);
}

.czolo-sciana::after {
  background:
    
    radial-gradient(78% 62% at 6% 92%, rgba(23, 17, 38, .93), transparent 74%),
    linear-gradient(180deg,
      rgba(23, 17, 38, .66) 0%,
      rgba(23, 17, 38, .26) 30%,
      rgba(23, 17, 38, .34) 62%,
      rgba(23, 17, 38, .84) 100%);
}

.czolo-sciana-www::after {
  background:
    radial-gradient(96% 72% at 2% 96%, rgba(23, 17, 38, .97), rgba(23, 17, 38, .55) 46%, transparent 78%),
    linear-gradient(180deg,
      rgba(23, 17, 38, .74) 0%,
      rgba(23, 17, 38, .34) 28%,
      rgba(23, 17, 38, .46) 60%,
      rgba(23, 17, 38, .90) 100%);
}

@media (max-width: 1500px) {
  .czolo-sciana { --slupki: 5; }
  .sciana:not(.sciana-www) .sciana-slup:nth-child(n + 6) { display: none; }
}
@media (max-width: 1200px) {
  .czolo-sciana { --slupki: 4; }
  .sciana:not(.sciana-www) .sciana-slup:nth-child(n + 5) { display: none; }
}
@media (max-width: 900px) {
  .czolo-sciana { --slupki: 3; }
  .sciana:not(.sciana-www) .sciana-slup:nth-child(n + 4) { display: none; }
}
@media (max-width: 620px) {
  .czolo-sciana { --slupki: 2; }
  .sciana:not(.sciana-www) .sciana-slup:nth-child(n + 3) { display: none; }
}

@media (max-width: 1200px) {
  .czolo-sciana.czolo-sciana-www { --slupki: 3; }
  .sciana-www .sciana-slup:nth-child(n + 4) { display: none; }
}
@media (max-width: 820px) {
  .czolo-sciana.czolo-sciana-www { --slupki: 2; }
  .sciana-www .sciana-slup:nth-child(n + 3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sciana-slup { animation: none !important; }
}

.czolo-bez-tla {
  min-height: clamp(340px, 52vh, 560px);
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(255,61,158,.18), transparent 62%),
    linear-gradient(168deg, #2B2049 0%, #1D1533 62%, var(--noc) 100%);
}

.czolo-bez-tla::after { display: none; }

.czolo-postac {
  position: absolute;
  right: 0; bottom: 0; top: 0;
  width: min(58%, 760px);
  z-index: -2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.czolo-postac img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom right;
}

.czolo:has(.czolo-postac) {
  background:
    radial-gradient(90% 120% at 78% 10%, rgba(255,61,158,.16), transparent 62%),
    linear-gradient(150deg, #35265A 0%, #241A3E 58%, var(--noc) 100%);
}

.czolo:has(.czolo-postac)::after {
  background: linear-gradient(90deg, rgba(23,17,38,.55) 0%, transparent 46%);
}

@media (max-width: 820px) {
  .czolo-postac { width: 70%; opacity: .5; }
}

section { max-width: var(--maks); margin: 0 auto; padding: 0 var(--marg); }

.sekcja {
  padding-top: clamp(72px, 8.5vw, 140px);
  padding-bottom: clamp(40px, 4.5vw, 76px);
  position: relative;
}

.sekcja::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--marg);
  right: var(--marg);
  height: 1px;
  background: linear-gradient(90deg,
              transparent,
              rgba(211, 194, 240, .26) 12%,
              rgba(255, 61, 158, .34) 50%,
              rgba(211, 194, 240, .26) 88%,
              transparent);
}

.czolo + .sekcja::before,
.szczyt-strefa + .sekcja::before,
.pola + .sekcja::before { display: none; }

.sekcja::after {
  content: "";
  position: absolute;
  
  left: calc(50% - 50vw);
  width: 100vw;
  top: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
}

.sekcja:nth-of-type(6n+1)::after {
  background: radial-gradient(58% 26% at 50% 0%, rgba(255, 61, 158, .15), transparent 76%);
}

.sekcja:nth-of-type(6n+2)::after {
  background:
    radial-gradient(26% 22% at 22% 0%, rgba(255, 61, 158, .15), transparent 74%),
    linear-gradient(180deg, rgba(54, 42, 85, .28), rgba(32, 23, 54, .06));
}

.sekcja:nth-of-type(6n+3)::after {
  background: radial-gradient(32% 30% at 78% 0%, rgba(255, 61, 158, .14), transparent 74%);
}

.sekcja:nth-of-type(6n+4)::after {
  background:
    radial-gradient(96% 18% at 50% 0%, rgba(255, 61, 158, .10), transparent 80%),
    linear-gradient(180deg, rgba(54, 42, 85, .26), rgba(32, 23, 54, .05));
}

.sekcja:nth-of-type(6n+5)::after {
  background: radial-gradient(30% 26% at 38% 0%, rgba(255, 61, 158, .13), transparent 74%);
}

.sekcja:nth-of-type(6n)::after {
  background: linear-gradient(180deg, rgba(54, 42, 85, .24), rgba(32, 23, 54, .05));
}

.sekcja-cicha::after { background: none !important; }

.sekcja-pasmo + .domkniecie { margin-top: 0; }
.sekcja-pasmo { padding-bottom: clamp(56px, 6vw, 96px); }

.sekcja-pasmo::before { display: none; }
.sekcja-pasmo::after {
  
  background: linear-gradient(180deg, rgba(60, 46, 94, .52), #33254F 100%) !important;
}

.pasmo {
  max-width: none;
  padding: clamp(56px, 7vw, 104px) var(--marg);
  margin-top: clamp(56px, 7vw, 104px);
  background: var(--fiolet);
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
}

.pasmo > * { max-width: var(--maks); margin-left: auto; margin-right: auto; }

.pasmo-mocne { background: linear-gradient(160deg, var(--fiolet-2), var(--fiolet)); }

.sekcja-tyt:not(:last-child) + .karty,
.sekcja-tyt + .karty { margin-top: clamp(30px, 3.4vw, 54px); }

.sekcja-tyt {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: 0 0 16px;
  color: var(--biel);
  text-wrap: balance;
}

.sekcja-tyt em { font-style: italic; color: var(--fuksja); font-weight: 400; }

.sekcja-opis { margin: 0 0 38px; max-width: 78ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.78; color: var(--biel-mgl); }

.sekcja-para {
  display: grid;
  
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: start;
  
}

.sekcja-para .tekst-blok { max-width: var(--maks-tekst); }

.sekcja-srodek {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sekcja-srodek .sekcja-tyt { max-width: 20ch; margin-bottom: clamp(18px, 2vw, 28px); }

.sekcja-srodek .tekst-blok { max-width: 68ch; }

.sekcja-srodek .tekst-blok p { text-align: center; max-width: 60ch; }

.sekcja-para .sekcja-tyt {
  margin: 0;
  max-width: 18ch;
}

.sekcja-para .tekst-blok { padding-top: .18em; }
.sekcja-para .sekcja-tyt { line-height: 1.04; }

.tekst-blok p {
  margin: 0 0 22px;
  max-width: 54ch;
  font-size: clamp(16px, 1.22vw, 18.5px);
  line-height: 1.82;
  color: var(--biel-mgl);
}

.tekst-blok p:last-child { margin-bottom: 0; }
.tekst-blok p strong { color: var(--biel); font-weight: 400; }

@media (max-width: 880px) {
  .sekcja-para { grid-template-columns: 1fr; gap: 20px; }
  .sekcja-para .sekcja-tyt { max-width: 24ch; }
}

.wyroznik {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 32px);
  line-height: 1.35;
  color: var(--biel);
  max-width: 30ch;
  margin: 0;
}

.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
  background: none;
}

.karta {
  background: linear-gradient(165deg, rgba(54,42,85,.5), rgba(32,23,54,.35));
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--linia);
  transition: border-color .35s ease, transform .35s ease, box-shadow .45s ease;
}

.karta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 58% at 8% 0%, rgba(255, 61, 158, .16), transparent 70%);
  opacity: .55;
  transition: opacity .45s ease;
  pointer-events: none;
}

.karta { position: relative; overflow: hidden; }
.karta:hover::before { opacity: 1; }
.karta:hover { box-shadow: 0 26px 60px -34px rgba(255, 61, 158, .45); }
.karta > * { position: relative; }

.karta:hover { border-color: var(--linia-moc); transform: translateY(-3px); }

.karta h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 27px);
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--biel);
}

.karta p { margin: 0 0 18px; font-size: 15.5px; color: var(--biel-mgl); }
.karta ul { list-style: none; margin: 0; padding: 0; font-size: 15px; color: var(--biel-mgl); }

.karta li { position: relative; padding: 7px 0 7px 20px; line-height: 1.6; }
.karta li::before {
  content: "";
  position: absolute;
  left: 0; top: .82em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fuksja);
}

.karty-jedna { grid-template-columns: minmax(0, 1fr); }

.karty-jedna .karta { padding: clamp(28px, 3vw, 46px); }

.karty-jedna .karta ul {
  column-count: 2;
  column-gap: clamp(24px, 3vw, 48px);
}

.karty-jedna .karta li { break-inside: avoid; }

@media (max-width: 700px) { .karty-jedna .karta ul { column-count: 1; } }

.galeria-rozowe { grid-template-columns: repeat(auto-fill, minmax(clamp(196px, 19.5vw, 252px), 1fr)); }

.galeria-rozowe figure {
  padding: 6px;
  border: 1px solid var(--linia-moc);
  background: linear-gradient(160deg, rgba(255, 61, 158, .12), rgba(42, 31, 69, .55));
  transition: border-color .45s ease, box-shadow .5s ease, transform .5s ease;
}

.galeria-rozowe figure:hover {
  border-color: var(--fuksja);
  box-shadow: 0 22px 52px -26px rgba(255, 61, 158, .55);
  transform: translateY(-3px);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: clamp(8px, 1vw, 14px);
}

.galeria figure { margin: 0; overflow: hidden; background: var(--fiolet-2); cursor: zoom-in; }

.galeria img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.33,.9,.28,1);
}

.galeria figure:hover img { transform: scale(1.045); }
.galeria .poziom img { aspect-ratio: 3 / 2; }
.galeria .kwadrat img { aspect-ratio: 1 / 1; }

.galeria-male { grid-template-columns: repeat(9, minmax(0, 1fr)); }
@media (max-width: 1100px) { .galeria-male { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .galeria-male { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.galeria-szesc { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .galeria-szesc { grid-template-columns: repeat(3, 1fr); } }

.galeria-ramki { grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 17vw, 250px), 1fr)); }

.galeria-ramki figure, .galeria figure.w-ramce {
  border: 1px solid var(--linia);
  background: #0F0B1A;
  padding: 8px;
}

.wiecej-pas { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 28px; flex-wrap: wrap; }

.wiecej {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--biel);
  background: transparent;
  border: 1px solid var(--linia-moc);
  padding: 15px 32px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.wiecej:hover, .wiecej:focus-visible { background: var(--fuksja); border-color: var(--fuksja); color: var(--noc); }

.licznik { font-size: 12px; letter-spacing: .16em; color: var(--biel-cien); }

.oferta {
  display: flex;
  flex-direction: column;
  
  align-items: flex-start;
  gap: clamp(24px, 3vw, 38px);
}

.oferta-zawiera { order: 1; }
.oferta-ceny { order: 2; }

.przycisk-oferta { order: 3; align-self: flex-start; }

.oferta-ceny .cena-dodatek { padding-top: 0; }

.oferta-ceny { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(22px, 4vw, 64px); }

.cena { position: relative; padding-left: 16px; }

.cena::before {
  content: "";
  position: absolute;
  left: 0; top: .35em; bottom: .35em;
  width: 2px;
  background: var(--fuksja);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.widoczny .cena::before { transform: scaleY(1); }
.widoczny .cena:nth-child(2)::before { transition-delay: .12s; }
.widoczny .cena:nth-child(3)::before { transition-delay: .24s; }

.cena-kto {
  display: block;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--biel-cien);
  margin-bottom: 6px;
}

.cena-kwota {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--biel);
}

.cena-kwota i {
  font-style: normal;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .28em;
  letter-spacing: .12em;
  color: var(--fuksja);
  margin-left: .4em;
  vertical-align: .38em;
}

.cena-dodatek { padding-top: clamp(10px, 1.2vw, 16px); }
.cena-dodatek .cena-kwota { font-size: clamp(26px, 2.6vw, 36px); color: var(--biel-mgl); }
.cena-dodatek .cena-kto { max-width: 22ch; }

.oferta-zawiera h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  margin: 0 0 clamp(18px, 2vw, 26px);
  color: var(--biel);
}

.ptaszki { list-style: none; margin: 0 0 clamp(26px, 3vw, 36px); padding: 0; }

.ptaszki li {
  position: relative;
  padding: 9px 0 9px 34px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--biel-mgl);
}

.ptaszki li::before {
  content: "";
  position: absolute;
  left: 2px; top: 1.05em;
  width: 14px; height: 7px;
  border-left: 1.5px solid var(--fuksja);
  border-bottom: 1.5px solid var(--fuksja);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .5s cubic-bezier(.34,1.4,.5,1);
}

.widoczny .ptaszki li::before { transform: rotate(-45deg) scale(1); }
.widoczny .ptaszki li:nth-child(1)::before { transition-delay: .10s; }
.widoczny .ptaszki li:nth-child(2)::before { transition-delay: .18s; }
.widoczny .ptaszki li:nth-child(3)::before { transition-delay: .26s; }
.widoczny .ptaszki li:nth-child(4)::before { transition-delay: .34s; }
.widoczny .ptaszki li:nth-child(5)::before { transition-delay: .42s; }
.widoczny .ptaszki li:nth-child(6)::before { transition-delay: .50s; }

.przycisk-oferta { padding-inline: 46px; text-align: center; }

.faq { max-width: 60rem; }

.faq details { border-bottom: 1px solid var(--linia); }

.faq details:last-child { border-bottom: none; }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(16px, 1.8vw, 24px) 44px clamp(16px, 1.8vw, 24px) 0;
  position: relative;
  font-family: var(--display);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 500;
  color: var(--biel);
  transition: color .3s ease;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--fuksja); }

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  background: var(--fuksja);
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}

.faq summary::before {
  right: 8px;
  width: 18px; height: 2px;
  margin-top: -1px;
}

.faq summary::after {
  right: 16px;
  width: 2px; height: 18px;
  margin-top: -9px;
}

.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }

.faq-tresc { padding: 0 44px clamp(18px, 2.2vw, 26px) 0; }
.faq-tresc p { margin: 0; color: var(--biel-mgl); font-size: 16px; line-height: 1.75; }

@supports selector(::details-content) {
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .45s cubic-bezier(.22,1,.36,1), content-visibility .45s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

.wtracenie {
  position: relative;
  max-width: 54ch;
  margin: clamp(38px, 4vw, 58px) auto 0;
  padding: clamp(18px, 2vw, 26px) clamp(24px, 2.6vw, 34px);
  background: linear-gradient(150deg, rgba(255, 61, 158, .12), rgba(54, 42, 85, .42));
  border: 1px solid var(--linia);
  border-radius: 26px;
  text-align: center;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--biel-mgl);
}

.wtracenie::after {
  content: "";
  position: absolute;
  left: 50%; top: -7px;
  width: 12px; height: 12px;
  margin-left: -6px;
  background: rgba(255, 61, 158, .12);
  border-left: 1px solid var(--linia);
  border-top: 1px solid var(--linia);
  transform: rotate(45deg);
}

.wtracenie strong { color: var(--biel); font-weight: 500; }

.przycisk-lekki {
  background: transparent;
  color: var(--biel);
  border-color: var(--linia-moc);
  box-shadow: none;
  margin-top: 8px;
}

.przycisk-lekki:hover, .przycisk-lekki:focus-visible {
  background: var(--fuksja);
  border-color: var(--fuksja);
  color: var(--biel);
}

.podpis-autorki {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 24px);
  color: var(--biel);
  margin-top: clamp(18px, 2vw, 26px);
}

.widelki-ceny {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(16px, 2.2vw, 36px);
}

.widelki-ceny .cena { display: flex; flex-direction: column; }
.widelki-ceny .cena-kwota { margin-top: 0; }

.widelki-ceny .cena-kto {
  max-width: none;
  font-size: 12.5px;
  letter-spacing: .13em;
  line-height: 1.55;
  color: var(--biel-cien);
  margin-bottom: 10px;
}

.cena-kwota .cena-od {
  margin-left: 0;
  margin-right: .38em;
  color: var(--biel-cien);
}

.widelki-nota { font-size: 13px; color: var(--biel-cien); margin: 0 0 6px; }

.oferta-nota { order: 2; margin: 0; }

.sekcja-opis-waski { max-width: 52ch; }

.cytaty {
  display: grid;
  
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
  margin-top: clamp(24px, 2.6vw, 36px);
}

.cytat {
  margin: 0;
  padding: clamp(16px, 1.7vw, 24px);
  background: linear-gradient(165deg, rgba(54, 42, 85, .5), rgba(32, 23, 54, .34));
  border: 1px solid var(--linia);
  transition: border-color .35s ease, transform .35s ease;
}

.cytat:hover { border-color: var(--linia-moc); transform: translateY(-3px); }

.cytat blockquote {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--biel-mgl);
}

.cytat blockquote::before { content: "„"; color: var(--fuksja); margin-right: 2px; }
.cytat blockquote::after { content: "”"; color: var(--fuksja); margin-left: 2px; }

.cytat figcaption {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--biel-cien);
}

.oceny {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 44px);
  margin: 0 0 clamp(24px, 2.6vw, 34px);
}

.ocena {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
}

.gwiazdki { color: var(--fuksja); font-size: clamp(19px, 1.7vw, 24px); letter-spacing: .12em; }

.gwiazdka-polowa {
  background: linear-gradient(90deg, var(--fuksja) 0 50%, rgba(255, 251, 246, .22) 50% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ocena-liczba {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(21px, 1.9vw, 27px);
  color: var(--biel);
}

.ocena-zrodlo {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--biel-cien);
}

.marki {
  position: relative;
  overflow: hidden;
  margin: 0 0 clamp(30px, 3.4vw, 48px);
  padding: clamp(14px, 1.6vw, 20px) 0;
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
  
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marki-tasma {
  display: flex;
  width: max-content;
  gap: clamp(28px, 3.2vw, 54px);
  animation: marki-jada 46s linear infinite;
}

@keyframes marki-jada {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marki-tasma span {
  font-family: var(--display);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 251, 246, .52);
  white-space: nowrap;
  transition: color .3s ease;
}

.marki:hover .marki-tasma { animation-play-state: paused; }
.marki-tasma span:hover { color: var(--fuksja); }

@media (prefers-reduced-motion: reduce) {
  .marki-tasma { animation: none; flex-wrap: wrap; width: auto; }
}

.kontakt {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(28px, 3.4vw, 52px);
  background: linear-gradient(168deg, rgba(54, 42, 85, .58), rgba(32, 23, 54, .46));
  border: 1px solid var(--linia);
  position: relative;
  overflow: hidden;
}

.kontakt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(64% 48% at 88% 0%, rgba(255, 61, 158, .16), transparent 68%);
  pointer-events: none;
}

.kontakt > * { position: relative; }

.formularz p { margin: 0 0 clamp(16px, 1.8vw, 22px); }

.pole-para { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.8vw, 22px); }
@media (max-width: 560px) { .pole-para { grid-template-columns: 1fr; } }

.formularz label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--biel-cien);
  margin-bottom: 8px;
}

.formularz label span { text-transform: none; letter-spacing: .04em; opacity: .7; }

.formularz input[type="text"],
.formularz input[type="email"],
.formularz input[type="tel"],
.formularz textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--biel);
  background: rgba(23, 17, 38, .55);
  border: 1px solid var(--linia);
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color .3s ease, background .3s ease;
}

.formularz textarea { resize: vertical; min-height: 130px; line-height: 1.65; }

.formularz input:focus,
.formularz textarea:focus {
  outline: none;
  border-color: var(--fuksja);
  background: rgba(23, 17, 38, .8);
}

.formularz input::placeholder,
.formularz textarea::placeholder { color: rgba(255, 251, 246, .32); }

.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zgoda label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--biel-mgl);
  line-height: 1.6;
}

.zgoda input { margin-top: .3em; accent-color: var(--fuksja); width: 16px; height: 16px; }
.zgoda a { color: var(--fuksja); }

.formularz .przycisk {
  border: 1px solid var(--fuksja);
  cursor: pointer;
  font-family: var(--sans);
  display: block;
  margin-inline: auto;
}

.kontakt-obok {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--linia);
}

.kontakt-obok ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px clamp(14px, 1.8vw, 26px);
  font-size: 14.5px;
}

.kontakt-obok li { padding: 0; }
.kontakt-obok li + li::before { content: "·"; margin-right: clamp(14px, 1.8vw, 26px); color: var(--linia-moc); }
.kontakt-obok h3 { text-align: center; }

.kontakt-obok h3 {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fuksja);
  margin: 0 0 16px;
  font-weight: 500;
}

.kontakt-obok ul { list-style: none; margin: 0; padding: 0; }
.kontakt-obok li { padding: 7px 0; color: var(--biel-mgl); font-size: 15.5px; }
.kontakt-obok a { text-decoration: none; border-bottom: 1px solid var(--linia-moc); }
.kontakt-obok a:hover { border-color: var(--fuksja); color: var(--biel); }

.sekcja-kontakt { text-align: center; }
.sekcja-kontakt::after { background: none; }
.sekcja-kontakt { padding-bottom: clamp(20px, 2.6vw, 40px); }
.sekcja-kontakt .sekcja-tyt { max-width: none; }
.sekcja-kontakt .sekcja-opis { max-width: 60ch; margin-inline: auto; }
.sekcja-kontakt .kontakt { text-align: left; }

.dokument { max-width: 78ch; }
.dokument h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 28px);
  margin: clamp(34px, 3.4vw, 48px) 0 12px;
  color: var(--biel);
}
.dokument h3 { font-size: 17px; margin: 24px 0 8px; color: var(--biel); font-weight: 500; }
.dokument p, .dokument li { color: var(--biel-mgl); font-size: 16px; line-height: 1.8; }
.dokument ul, .dokument ol { padding-left: 20px; }
.dokument li { padding: 4px 0; }
.dokument a { color: var(--fuksja); }
.dokument table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.dokument th, .dokument td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linia); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(12, 8, 20, .96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}

.lightbox.otwarty { display: flex; }

.lightbox img { max-width: 100%; max-height: 86vh; width: auto; object-fit: contain; }

.lightbox-zamknij, .lightbox-strzalka {
  position: absolute;
  background: none;
  border: 1px solid var(--linia);
  color: var(--biel);
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1;
  width: 48px; height: 48px;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}

.lightbox-zamknij:hover, .lightbox-strzalka:hover { border-color: var(--fuksja); background: rgba(255,61,158,.16); }

.lightbox-zamknij { top: 22px; right: 22px; }
.lightbox-strzalka.wstecz { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-strzalka.dalej  { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-licznik { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .2em; color: var(--biel-cien); }

.portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 25vw, 360px), 1fr)); gap: clamp(14px, 1.6vw, 26px); }

.praca { display: block; text-decoration: none; }

.praca-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(54, 42, 85, .5), rgba(32, 23, 54, .38));
  border: 1px solid var(--linia);
  display: grid;
  place-items: center;
  padding: 6px;
}

.praca-foto img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 1.1s cubic-bezier(.33,.9,.28,1);
}

.praca:hover .praca-foto img { transform: scale(1.04); }

.praca h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  margin: 15px 0 6px;
  color: var(--biel);
}

.praca p { margin: 0; font-size: 14.5px; color: var(--biel-cien); max-width: 42ch; }

.stos-para {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  gap: clamp(30px, 3.4vw, 64px);
  align-items: center;
  justify-items: center;
}

.stos-para > *:last-child { width: 100%; }

.stos-para .tekst-blok { max-width: var(--maks-tekst); justify-self: start; }

.stos {
  position: relative;
  aspect-ratio: 1070 / 1520;
  cursor: pointer;
  perspective: 1000px;
  
  margin: 0 auto;
  max-width: 340px;
}

.stos-karta {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--fiolet-2);
  border: 1px solid var(--linia-moc);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .95);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}

.stos-karta img { width: 100%; height: 100%; object-fit: cover; }

.stos-karta:nth-child(1) { transform: rotate(-7deg) translate(-14px, 8px); }
.stos-karta:nth-child(2) { transform: rotate(-3.5deg) translate(-6px, 4px); }
.stos-karta:nth-child(3) { transform: rotate(0deg); }

.stos:hover .stos-karta:nth-child(1) { transform: rotate(-11deg) translate(-30px, 4px); }
.stos:hover .stos-karta:nth-child(2) { transform: rotate(-5.5deg) translate(-14px, 2px); }
.stos:hover .stos-karta:nth-child(3) { transform: rotate(1.5deg) translate(8px, -6px); }

.stos-ile {
  position: absolute;
  right: -8px; bottom: -14px;
  z-index: 5;
  background: var(--fuksja);
  color: var(--noc);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 14px;
}

.stos-podpis { font-size: 12.5px; letter-spacing: .08em; color: var(--biel-cien); margin: 22px 0 0; text-align: center; }

@media (max-width: 880px) {
  .stos-para { grid-template-columns: 1fr; }
  .stos { max-width: 300px; }
}

.stos-szeroki { aspect-ratio: 16 / 11; max-width: 560px; width: 100%; }

.proces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: clamp(24px, 2.8vw, 44px);
  counter-reset: etap;
}

.krok {
  position: relative;
  counter-increment: etap;
  padding: clamp(30px, 3vw, 44px) clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 32px);
  isolation: isolate;
}

.krok::before {
  content: counter(etap, decimal-leading-zero);
  position: absolute;
  top: -.18em;
  left: -.04em;
  z-index: -1;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(92px, 9vw, 150px);
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(255, 61, 158, .16);
  transition: color .6s ease, transform .8s cubic-bezier(.22,1,.36,1);
}

.krok:hover::before { color: rgba(255, 61, 158, .3); transform: translateY(-4px); }

.krok h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 28px);
  margin: 0 0 10px;
  color: var(--biel);
}

.krok p { margin: 0; font-size: 15.5px; color: var(--biel-mgl); }

.dowody { position: relative; padding-top: clamp(78px, 9vw, 136px); padding-bottom: clamp(56px, 6vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(24px, 3vw, 48px); }

.dowody::before {
  content: "";
  position: absolute;
  top: 0; left: var(--marg); right: var(--marg);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211, 194, 240, .26) 12%,
              rgba(255, 61, 158, .34) 50%, rgba(211, 194, 240, .26) 88%, transparent);
}

.dowod .liczba {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--biel);
  display: block;
}

.dowod .liczba em { font-style: italic; color: var(--fuksja); font-weight: 400; }
.dowod p { margin: 12px 0 0; font-size: 15.5px; color: var(--biel-mgl); max-width: 26ch; }

.omnie {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(300px, 540px) minmax(0, 1fr);
  gap: clamp(36px, 4.5vw, 76px);
  align-items: end;
  
  padding-top: clamp(80px, 11vw, 170px);
  padding-bottom: clamp(20px, 3vw, 50px);
  
}

.omnie-tekst p { max-width: var(--maks-tekst); }

.omnie { align-items: end; }

.omnie-foto {
  position: relative;
  margin: 0;
  align-self: end;
  
  margin-bottom: calc(-1 * clamp(20px, 3vw, 50px));
}

.omnie-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  display: block;
  
  filter: saturate(.94);
}

.omnie-foto::before {
  content: "";
  position: absolute;
  left: -20%; bottom: 0;
  width: 140%; height: 112%;
  
  background:
    radial-gradient(50% 88% at 50% 100%, rgba(146, 92, 226, .22), transparent 82%),
    radial-gradient(32% 58% at 50% 100%, rgba(255, 61, 158, .12), transparent 78%),
    radial-gradient(66% 120% at 50% 100%, rgba(132, 84, 208, .15), transparent 86%);
  z-index: -1;
}

.omnie-foto::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 0;
  height: 34px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(12, 8, 20, .45), transparent 74%);
  z-index: -1;
}

.omnie-tekst .omnie-wstep {
  font-family: var(--display);
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 400;
  font-style: italic;
  color: var(--biel-mgl);
  margin: 0 0 14px;
  line-height: 1.3;
}

.omnie-tekst h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 50px);
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0 0 10px;
  color: var(--biel);
}

.omnie-tekst .rola {
  
  font-size: clamp(12px, 1vw, 14px);
  
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fuksja);
  margin: 0 0 24px;
  text-wrap: balance;
  line-height: 1.7;
}
.omnie-tekst p { margin: 0 0 16px; font-size: clamp(15.5px, 1.2vw, 17.5px); max-width: 60ch; color: var(--biel-mgl); }
.omnie-tekst p strong { color: var(--biel); font-weight: 400; }

.omnie-podpis {
  font-family: var(--display);
  font-style: italic;
  
  font-weight: 500;
  font-size: clamp(20px, 2vw, 27px) !important;
  color: var(--fuksja) !important;
  margin-top: 24px !important;
}

@media (max-width: 760px) { .omnie, .omnie-bez-foto { grid-template-columns: 1fr; } .omnie-foto { max-width: 300px; } }

.brama {
  display: grid;
  
  grid-template-columns: minmax(0, 1.62fr) minmax(275px, .42fr);
  gap: clamp(26px, 3.6vw, 60px);
  align-items: center;
  text-decoration: none;
  padding: 0;
  background: none;
  border: none;
}

.brama-foto {
  display: block;
  overflow: hidden;
  background: #0F0B1A;
  border: 1px solid var(--linia);
  transition: border-color .45s ease, box-shadow .5s ease;
}

.brama:hover .brama-foto,
.brama:focus-visible .brama-foto {
  border-color: var(--linia-moc);
  box-shadow: 0 30px 70px -34px rgba(255, 61, 158, .45);
}

.brama-foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.2s cubic-bezier(.33,.9,.28,1);
}

.brama:hover .brama-foto img { transform: scale(1.03); }

.brama-opis { display: block; }

.brama-tyt {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.06;
  color: var(--biel);
  margin-bottom: 12px;
  text-decoration: none;
}

.brama-linki {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: clamp(34px, 3.8vw, 54px);
}

.brama-txt { display: block; font-size: 15.5px; line-height: 1.7; color: var(--biel-mgl); margin-bottom: 20px; max-width: 34ch; }

.brama-akcja {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fuksja);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 7px;
  transition: border-color .3s ease, color .3s ease;
}

.brama-akcja:hover, .brama-akcja:focus-visible {
  border-color: currentColor;
  color: var(--biel);
}

.brama-duza { padding: 0; }
.brama-duza .brama-tyt { font-size: clamp(30px, 3.6vw, 50px); }
.brama-duza .brama-txt { font-size: clamp(15.5px, 1.2vw, 17.5px); max-width: 38ch; margin-bottom: 0; }

.brama-data {
  display: block;
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--linia);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--biel-cien);
}

.brama-data b {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--biel);
  margin-bottom: 4px;
  white-space: nowrap;
}

@media (max-width: 820px) { .brama { grid-template-columns: 1fr; } }

.opinie {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(16px, 1.8vw, 26px);
  align-items: start;
  max-width: 78rem;
}

.opinie-slup { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 26px); }

.opinie img {
  width: 100%;
  height: auto;
  border: 1px solid var(--linia-moc);
  border-radius: 2px;
  cursor: zoom-in;
  transition: border-color .3s ease, transform .4s ease;
}

.opinie img:hover { border-color: var(--fuksja); transform: translateY(-3px); }

.opinia-fb {
  margin: 0;
  padding: clamp(15px, 1.4vw, 20px);
  
  background: #1F2125;
  border: 1px solid var(--linia-moc);
  border-radius: 2px;
  transition: border-color .3s ease, transform .4s ease;
}

.opinia-fb:hover { border-color: var(--fuksja); transform: translateY(-3px); }

.opinia-fb blockquote {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--biel-mgl);
}

.opinia-fb blockquote::before { content: "„"; color: var(--fuksja); margin-right: 2px; }
.opinia-fb blockquote::after  { content: "”"; color: var(--fuksja); margin-left: 2px; }

.opinia-fb figcaption {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--biel-cien);
}

@media (max-width: 1000px) { .opinie { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .opinie { grid-template-columns: 1fr; } }

.domkniecie {
  position: relative;
  margin: clamp(76px, 10vw, 150px) 0 0;
  max-width: none;
  width: 100%;
}

.wezwanie {
  position: relative;
  margin: 0;
  
  padding-block: clamp(56px, 7vw, 110px);
  padding-inline: var(--wciecie);
  
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(26px, 3vw, 40px);
  overflow: hidden;
  background:
    radial-gradient(115% 130% at 84% 6%, rgba(255, 61, 158, .22), transparent 60%),
    radial-gradient(100% 110% at 6% 92%, rgba(142, 118, 200, .18), transparent 62%),
    linear-gradient(166deg, #33254F 0%, #2A1F45 46%, #241B3B 100%);
}

.wezwanie::before,
.wezwanie::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fuksja) 20%, var(--fuksja) 80%, transparent);
  z-index: 2;
}

.wezwanie::before { top: 0; }
.wezwanie::after { bottom: 0; }

.wezwanie h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.03;
  letter-spacing: -.024em;
  margin: 0 0 14px;
  color: var(--biel);
  text-wrap: balance;
  max-width: 24ch;
}

.wezwanie p { margin: 0 auto; color: var(--biel-mgl); max-width: 46ch; font-size: clamp(16px, 1.2vw, 18px); }
.wezwanie h2 { margin-inline: auto; }
.wezwanie > div { max-width: 46rem; }

.przycisk {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--biel);
  background: var(--fuksja);
  padding: 22px 46px;
  border: 1px solid var(--fuksja);
  box-shadow: 0 18px 44px -20px rgba(255, 61, 158, .8);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
  white-space: nowrap;
  display: inline-block;
}

.wezwanie .przycisk { justify-self: center; margin-right: 0; }

@media (max-width: 620px) {
  .przycisk {
    padding: 18px 22px;
    letter-spacing: .12em;
    font-size: 13px;
    white-space: normal;
    max-width: 100%;
  }
}

.przycisk:hover, .przycisk:focus-visible {
  background: var(--biel);
  color: var(--noc);
  border-color: var(--biel);
  transform: translateY(-2px);
  box-shadow: 0 22px 50px -20px rgba(255, 251, 246, .5);
}

@media (max-width: 760px) { .wezwanie { grid-template-columns: 1fr; align-items: start; } }

.stopka {
  max-width: none;
  margin: 0;
  padding-block: clamp(50px, 5.5vw, 86px) clamp(26px, 3vw, 38px);
  padding-inline: var(--wciecie);
  font-size: 14.5px;
  color: var(--biel-mgl);
  background: #14102080;
  
  position: relative;
  border-top: 1px solid var(--linia);
  box-shadow: inset 0 1px 0 rgba(255, 61, 158, .20);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stopka::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: clamp(90px, 10vw, 150px);
  background: radial-gradient(58% 100% at 50% 100%, rgba(255, 61, 158, .15), transparent 72%);
  pointer-events: none;
}

.stopka > * { width: 100%; text-align: left; position: relative; }

.stopka-kolumny {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(28px, 3.4vw, 56px);
}

.stopka-kolumny > div { flex: 0 1 auto; min-width: 150px; }

@media (max-width: 900px) { .stopka-kolumny { justify-content: flex-start; } }

.stopka-znak { flex: 0 1 260px; }
.stopka-znak .znak { font-size: clamp(21px, 1.9vw, 27px); display: inline-block; margin-bottom: 10px; }
.stopka-znak p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--biel-cien); }

.stopka > .stopka-dol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px clamp(20px, 2.6vw, 40px);
  text-align: center;
  margin-top: clamp(30px, 3.4vw, 48px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid var(--linia);
  font-size: 12.5px;
  color: var(--biel-cien);
}

.stopka-dol nav { display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2.4vw, 34px); }

.stopka h3 { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--fuksja); margin: 0 0 14px; font-weight: 500; font-family: var(--sans); }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { padding: 3px 0; }
.stopka a { text-decoration: none; border-bottom: 1px solid transparent; }
.stopka a:hover, .stopka a:focus-visible { border-color: var(--fuksja); }
.stopka-dane { font-size: 12.5px; color: var(--biel-cien); }

.wejdz-w-kadr {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
.wejdz-w-kadr.widoczny { opacity: 1; transform: none; }

.kaskada > * {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1),
    transform .85s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(min(var(--i, 0) * 70ms, 700ms));
}

.widoczny.kaskada > *,
.widoczny .kaskada > * { opacity: 1; transform: none; }

.praca-foto img, .brama-foto img { clip-path: inset(0 0 0 0); }

.kaskada > .praca .praca-foto img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.33,.9,.28,1);
  transition-delay: calc(min(var(--i, 0) * 70ms, 700ms) + 120ms);
}

.widoczny.kaskada > .praca .praca-foto img,
.widoczny .kaskada > .praca .praca-foto img { clip-path: inset(0 0 0 0); }

.praca-foto { transition: border-color .5s ease, box-shadow .5s ease; }
.praca:hover .praca-foto {
  border-color: var(--linia-moc);
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.9);
}
.praca:hover .praca-foto img { transform: scale(1.07); }
.praca h3 { transition: color .35s ease; }
.praca:hover h3 { color: var(--fuksja); }

.galeria figure { transition: box-shadow .5s ease; }
.galeria figure:hover { box-shadow: 0 20px 46px -28px rgba(0,0,0,.9); }
.galeria figure:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .wejdz-w-kadr { opacity: 1; transform: none; }
  .kaskada > * { opacity: 1; transform: none; }
  .kaskada > .praca .praca-foto img { clip-path: inset(0 0 0 0); }
}

@media (max-width: 1100px) { .cytaty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cytaty { grid-template-columns: 1fr; } }

@media (max-width: 620px) {
  
  .galeria.galeria-rozowe { grid-template-columns: 1fr 1fr; }
  .galeria.galeria-ramki { grid-template-columns: 1fr 1fr; }
}

.zgoda-baner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  padding: 16px var(--wciecie) 18px;
  background: rgba(19, 13, 32, .97);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--linia);
  font-family: var(--sans);
}

.zgoda-baner p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--biel-mgl); max-width: 72ch; }
.zgoda-baner a { color: var(--biel); }

.zgoda-przyciski { display: flex; gap: 10px; flex: none; }

.zgoda-baner button {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid var(--fuksja);
  background: var(--fuksja);
  color: var(--biel);
}

.zgoda-baner .zgoda-nie { background: none; border-color: var(--linia); color: var(--biel-mgl); }
.zgoda-baner button:hover { filter: brightness(1.08); }

@media (max-width: 620px) {
  .oferta-ceny { flex-wrap: nowrap; gap: 14px; width: 100%; justify-content: space-between; }
  .cena { padding-left: 10px; }
  .cena-kto { font-size: 9.5px; letter-spacing: .14em; margin-bottom: 4px; }
  .cena-kwota { font-size: clamp(22px, 6.6vw, 28px); }
  .cena-dodatek .cena-kwota { font-size: clamp(18px, 5.2vw, 22px); }

  
  .widelki-ceny { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 28px); }
  .widelki-ceny .cena-kto { font-size: 11.5px; margin-bottom: 8px; }
  .widelki-ceny .cena-kwota { font-size: clamp(26px, 8vw, 34px); }
}

body.strona-dokument::before { display: none; }

.pola {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 821px) and (max-width: 1200px) {
  
  
  .pole-zrzut .pole-foto img {
    object-position: 86% center;
    transform: scale(1.22);
    transform-origin: 86% top;
  }
  .pole-zrzut:hover .pole-foto img,
  .pole-zrzut:focus-visible .pole-foto img {
    object-fit: cover;
    object-position: 50% top;
    
    transform: scale(1.2);
    transform-origin: left top;
  }

}
