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

.przycisk.bialy:hover {
  background: #fff;
  color: var(--tlo);
  box-shadow: 0 16px 36px -18px rgba(255, 255, 255, .6);
}

.akcent {
  background: linear-gradient(90deg, #22c4ee 0%, #1a9cf0 55%, var(--niebieski-jasny) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.hero {
  position: relative;
  padding: calc(var(--gora) + 88px) 0 72px;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -360px;
  right: -220px;
  width: 920px;
  height: 920px;
  background: radial-gradient(circle, rgba(124, 92, 240, .17), transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
  pointer-events: none;
}

.hero-siatka {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 48px;
}

.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.06;
}

/* Na komputerze każda z dwóch linii hasła zostaje w całości. */
@media (min-width: 1081px) {
  .hero h1 span {
    white-space: nowrap;
  }
}

.hero .olowek {
  margin: 0 0 32px;
  font-size: 17px;
}

.hero-guziki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero-drobne {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: var(--tekst-3);
  font-size: 13.5px;
}

.hero-drobne li {
  position: relative;
  padding-left: 20px;
}

.hero-drobne li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--fiolet);
  border-bottom: 1.5px solid var(--fiolet);
  transform: rotate(-45deg);
}

/* ---------------- okno panelu w hero ---------------- */

/* Zapas u góry i u dołu na pigułki. Stoją NAD i POD oknem, nigdy na nim —
   pierwsza wersja zasłaniała zakładki, czyli to, co okno ma pokazywać. */
.okno-pole-wokol {
  position: relative;
  padding: 50px 18px;
}

/* Okno panelu jest niższe i szersze od kolumny: wychodzi w prawo za siatkę,
   a dół boku i treści gaśnie. Widać to, co ważne, bez całej długości menu. */
@media (min-width: 1081px) {
  .okno-pole-wokol {
    margin-right: -90px;
  }

  .okno-srodek {
    max-height: 330px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
    mask-image: linear-gradient(180deg, #000 78%, transparent);
  }
}

.rog {
  position: absolute;
  color: var(--tekst-3);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}

.rog-lg {
  top: 0;
  left: 0;
}

.rog-pd {
  right: 0;
  bottom: 0;
}

.etykieta-rogu {
  position: absolute;
  color: var(--tekst-3);
  font-size: 10.5px;
  letter-spacing: .18em;
}

.etykieta-rogu.lg {
  top: 3px;
  right: 18px;
}

.etykieta-rogu.pd {
  bottom: 3px;
  left: 18px;
}

/* Okno przechyla się za kursorem, a co kilka sekund przechodzi po nim smuga
   światła. Tyle ruchu, żeby podgląd nie wyglądał jak wklejony obrazek. */
.okno {
  position: relative;
  z-index: 2;
  transform: perspective(1100px);
  transform-style: preserve-3d;
  border: 1px solid var(--kreska-mocna);
  border-radius: var(--promien);
  background: var(--karta);
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 1), 0 0 0 1px rgba(167, 139, 250, .06);
  overflow: hidden;
}

.okno::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  content: '';
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .07) 48%, transparent 58%);
  background-size: 260% 100%;
  animation: smugaOkna 7s ease-in-out infinite;
}

@keyframes smugaOkna {
  0%, 62% { background-position: 150% 0; }
  92%, 100% { background-position: -60% 0; }
}

.okno-pasek {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--kreska);
  background: var(--tlo-2);
}

.okno-kropki {
  display: flex;
  gap: 6px;
}

.okno-kropki i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}

.okno-adres {
  flex: 1;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: var(--tekst-3);
  font-size: 11.5px;
}

.okno-srodek {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
}

.okno-boczne {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--kreska);
  background: var(--tlo-2);
}

.okno-logo {
  width: auto;
  height: 26px;
  margin: 4px 6px 14px;
  object-fit: contain;
  object-position: left;
}

.okno-strona {
  position: relative;
  margin: 0 0 8px;
  padding: 7px 22px 7px 9px;
  border: 1px solid var(--kreska);
  border-radius: 8px;
  background: var(--karta-2);
  color: var(--biel);
  font-size: 11.5px;
  font-weight: 600;
}

/* Strzałka wyboru strony, jak w prawdziwym panelu. */
.okno-strona::after {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 7px;
  height: 7px;
  content: '';
  border-right: 1.4px solid var(--tekst-3);
  border-bottom: 1.4px solid var(--tekst-3);
  transform: translateY(-70%) rotate(45deg);
}

.okno-boczne b {
  margin: 8px 8px 3px;
  color: var(--tekst-3);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.okno-boczne span:not(.okno-strona) {
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--tekst-2);
  font-size: 11.5px;
}

.okno-boczne span.tutaj {
  background: rgba(26, 176, 216, .16);
  color: var(--biel);
}

.okno-tresc {
  padding: 14px 16px 18px;
}

.okno-gorny {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.okno-pigulka {
  padding: 4px 9px;
  border: 1px solid var(--kreska);
  border-radius: 7px;
  color: var(--tekst-2);
  font-size: 10px;
}

.okno-konto {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(140deg, var(--niebieski), var(--fiolet-ciemny));
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.okno-tytul {
  margin: 0 0 12px;
  color: var(--biel);
  font-family: var(--naglowki);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.okno-kafelki {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 12px;
}

.okno-kafelki div {
  padding: 9px 10px;
  border: 1px solid var(--kreska);
  border-radius: 9px;
  background: var(--karta-2);
}

.okno-kafelki small {
  display: block;
  color: var(--tekst-3);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.okno-kafelki b {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--biel);
  font-size: 13.5px;
  font-weight: 600;
}

.kropka-okna {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4cc98a;
  box-shadow: 0 0 0 3px rgba(76, 201, 138, .16);
}

.okno-kroki {
  padding: 10px 12px;
  border: 1px solid var(--kreska);
  border-radius: 9px;
}

.okno-krok {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
}

.okno-krok span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--kreska-mocna);
  border-radius: 50%;
  color: var(--niebieski-jasny);
  font-size: 9px;
  font-weight: 600;
}

.okno-krok.gotowy span {
  border-color: rgba(76, 201, 138, .5);
  background: rgba(76, 201, 138, .12);
  color: #4cc98a;
}

.okno-krok em {
  color: var(--tekst-2);
  font-size: 11px;
  font-style: normal;
}

.okno-krok.gotowy em {
  color: var(--tekst-3);
}

.pigulka {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--kreska-mocna);
  border-radius: 30px;
  background: rgba(19, 22, 29, .92);
  backdrop-filter: blur(10px);
  color: var(--biel);
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
  animation: unoszenie 7s ease-in-out infinite;
}

.pigulka i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fiolet);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, .18);
  animation: tetno 2.6s ease-in-out infinite;
}

@keyframes tetno {
  0%, 100% { box-shadow: 0 0 0 4px rgba(167, 139, 250, .18); }
  50% { box-shadow: 0 0 0 8px rgba(167, 139, 250, .05); }
}

.pigulka.niebieska i {
  background: var(--niebieski);
  box-shadow: 0 0 0 4px rgba(26, 176, 216, .18);
}

.pigulka.lewa {
  top: 6px;
  left: 36px;
}

.pigulka.prawa {
  right: 36px;
  bottom: 6px;
  animation-delay: -3.5s;
}

@keyframes unoszenie {
  0%,
  100% {
    transform: translateY(0) rotate(-.5deg);
  }

  50% {
    transform: translateY(-11px) rotate(.5deg);
  }
}

/* ---------------- liczby ---------------- */

.liczby {
  border-top: 1px solid var(--kreska);
  border-bottom: 1px solid var(--kreska);
  background: var(--tlo-2);
}

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

.liczba {
  padding: 34px 26px;
  border-right: 1px solid var(--kreska);
}

.liczba:last-child {
  border-right: 0;
}

.liczba b {
  display: block;
  color: var(--biel);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.liczba b i {
  color: var(--niebieski-jasny);
  font-size: .5em;
  font-style: normal;
  font-weight: 500;
}

.liczba span {
  display: block;
  margin-top: 8px;
  color: var(--tekst-3);
  font-size: 13.5px;
}

/* ---------------- działy ---------------- */

.dzial {
  padding: 110px 0 0;
}

.pasmo {
  margin: 0 0 48px;
}

.pasmo h2 {
  margin: 0;
}

.pasmo-szeroko {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.pasmo-szeroko > div {
  max-width: 620px;
}

.pasmo-szeroko .olowek {
  max-width: 400px;
  margin: 0;
  color: var(--tekst-3);
  font-size: 15px;
  text-align: right;
}

.pasmo-srodek {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pasmo-srodek .olowek {
  margin: 18px auto 0;
  color: var(--tekst-3);
}

.ikona {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--kreska-mocna);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  color: var(--biel);
}

.ikona svg {
  width: 20px;
  height: 20px;
}

/* ---------------- kroki ---------------- */

.kroki-siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--kreska);
  border-bottom: 1px solid var(--kreska);
}

.krok {
  padding: 32px 30px 36px;
  border-right: 1px solid var(--kreska);
}

.krok:first-child {
  padding-left: 0;
}

.krok:last-child {
  padding-right: 0;
  border-right: 0;
}

.krok-glowa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.krok-numer {
  color: var(--tekst-3);
  font-size: 12px;
  letter-spacing: .1em;
}

.krok-kreska {
  display: block;
  width: 100%;
  height: 1px;
  margin: 26px 0 24px;
  background: linear-gradient(90deg, var(--fiolet), transparent 70%);
  opacity: .45;
}

.krok h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.krok p {
  margin: 0;
  color: var(--tekst-2);
  font-size: 14.5px;
}

/* ---------------- oferta ---------------- */

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

.oferta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kreska);
  border-radius: var(--promien);
  background: var(--karta);
  overflow: hidden;
  transition: border-color .35s ease, transform .45s var(--krzywa);
}

.oferta:hover {
  border-color: var(--kreska-mocna);
  transform: translateY(-4px);
}

.oferta-obraz {
  position: relative;
  display: grid;
  place-items: center;
  height: 200px;
  padding: 26px;
  border-bottom: 1px solid var(--kreska);
  overflow: hidden;
}

.obraz-mc {
  background: radial-gradient(circle at 30% 20%, rgba(167, 139, 250, .22), transparent 60%), var(--tlo-2);
}

.obraz-sklep {
  background: radial-gradient(circle at 70% 20%, rgba(26, 176, 216, .22), transparent 60%), var(--tlo-2);
}

.obraz-firma {
  background: radial-gradient(circle at 50% 100%, rgba(196, 181, 253, .18), transparent 60%), var(--tlo-2);
}

.mini-okno {
  width: 100%;
  max-width: 250px;
  padding: 10px;
  border: 1px solid var(--kreska-mocna);
  border-radius: 12px;
  background: rgba(19, 22, 29, .9);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  transform: rotate(-3deg);
  transition: transform .6s var(--krzywa);
}

.oferta:hover .mini-okno {
  transform: rotate(0) scale(1.03);
}

.mini-pasek {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
}

.mini-pasek i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
}

.mini-produkty,
.mini-kolumny {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mini-produkty span {
  height: 54px;
  border-radius: 7px;
  background: linear-gradient(160deg, rgba(167, 139, 250, .35), rgba(167, 139, 250, .06));
}

.mini-cel {
  height: 7px;
  margin-top: 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}

.mini-cel i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--fiolet-ciemny), var(--fiolet));
}

.mini-siatka {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.mini-siatka span {
  height: 40px;
  border-radius: 7px;
  background: linear-gradient(160deg, rgba(26, 176, 216, .35), rgba(26, 176, 216, .06));
}

.mini-koszyk {
  width: 44%;
  height: 16px;
  margin: 10px 0 0 auto;
  border-radius: 6px;
  background: var(--niebieski);
}

.mini-baner {
  display: grid;
  gap: 5px;
  margin: 0 0 10px;
  padding: 12px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(196, 181, 253, .25), rgba(26, 176, 216, .12));
}

.mini-baner b {
  width: 60%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .6);
}

.mini-baner i {
  width: 85%;
  height: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .22);
}

.mini-kolumny span {
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
}

.oferta-tresc {
  padding: 24px 24px 28px;
}

.oferta-znacznik {
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 10px;
  border: 1px solid var(--kreska-mocna);
  border-radius: 20px;
  color: var(--tekst-2);
  font-size: 11.5px;
  font-weight: 500;
}

.oferta h3 {
  margin: 0 0 10px;
  font-size: 19px;
}

.oferta p {
  margin: 0;
  color: var(--tekst-2);
  font-size: 14.5px;
}

/* ---------------- funkcje panelu ---------------- */

.funkcje {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--kreska);
  border-radius: var(--promien);
  background: var(--karta);
  overflow: hidden;
}

.funkcja {
  padding: 28px 28px 30px;
  border-right: 1px solid var(--kreska);
  border-bottom: 1px solid var(--kreska);
  transition: background .35s ease;
}

.funkcja:nth-child(3n) {
  border-right: 0;
}

.funkcja:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.funkcja:hover {
  background: rgba(255, 255, 255, .015);
}

.funkcja .ikona {
  margin: 0 0 18px;
}

.funkcja h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 16.5px;
}

.znacznik-dodatku {
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(167, 139, 250, .14);
  color: var(--niebieski-jasny);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.funkcja p {
  margin: 0;
  color: var(--tekst-2);
  font-size: 14px;
}

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

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

.cennik-ladowanie {
  grid-column: 1 / -1;
  padding: 40px;
  border: 1px dashed var(--kreska-mocna);
  border-radius: var(--promien);
  color: var(--tekst-3);
  text-align: center;
}

.pakiet {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--kreska);
  border-radius: var(--promien);
  background: var(--karta);
  transition: border-color .35s ease, transform .45s var(--krzywa);
}

.pakiet:hover {
  border-color: var(--kreska-mocna);
  transform: translateY(-4px);
}

.pakiet.wyrozniony {
  border-color: rgba(167, 139, 250, .45);
  background: linear-gradient(180deg, rgba(167, 139, 250, .1), rgba(167, 139, 250, 0) 55%), var(--karta);
}

.pakiet-glowa {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pakiet-glowa h3 {
  margin: 0;
  font-size: 16px;
}

.pakiet-glowa .ikona {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.pakiet-glowa .ikona svg {
  width: 17px;
  height: 17px;
}

.pakiet-wstazka {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(167, 139, 250, .16);
  color: var(--niebieski-jasny);
  font-size: 12px;
  font-weight: 600;
}

.pakiet .cena {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 28px 0 6px;
  color: var(--biel);
  line-height: 1;
}

.pakiet .cena b {
  font-size: 50px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.pakiet .cena sup {
  font-size: 22px;
  font-weight: 600;
  vertical-align: baseline;
}

.pakiet .cena .zl {
  margin-left: 4px;
  color: var(--tekst-3);
  font-size: 14px;
  font-weight: 500;
}

.pakiet .cena s {
  margin-left: 10px;
  color: var(--tekst-3);
  font-size: 15px;
}

.pakiet .dostep {
  margin: 0 0 22px;
  color: var(--tekst-3);
  font-size: 13.5px;
}

.pakiet .przycisk {
  justify-content: space-between;
  width: 100%;
}

.pakiet ul {
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--kreska);
  list-style: none;
}

.pakiet li {
  position: relative;
  margin: 0 0 11px;
  padding-left: 24px;
  color: var(--tekst-2);
  font-size: 14px;
}

.pakiet li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 2px;
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--tekst-3);
  border-bottom: 1.5px solid var(--tekst-3);
  transform: rotate(-45deg);
}

.pakiet .zamies {
  margin-top: auto;
  padding-top: 16px;
  color: var(--tekst-3);
  font-size: 12.5px;
}

.cennik-nota {
  max-width: 640px;
  margin: 26px auto 0;
  color: var(--tekst-3);
  font-size: 14px;
  text-align: center;
}

/* ---------------- pytania ---------------- */

.pytania-siatka {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
  gap: 64px;
  align-items: start;
}

.pytania-lewa {
  position: sticky;
  top: calc(var(--gora) + 40px);
}

.pytania-lewa h2 {
  margin: 0 0 18px;
}

.pytania-lewa .olowek {
  margin: 0 0 26px;
  color: var(--tekst-3);
  font-size: 15px;
}

.harmonijka details {
  border-top: 1px solid var(--kreska);
}

.harmonijka details:last-child {
  border-bottom: 1px solid var(--kreska);
}

.harmonijka summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  color: var(--biel);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color .25s ease;
}

.harmonijka summary::-webkit-details-marker {
  display: none;
}

.harmonijka summary > i {
  flex-shrink: 0;
  width: 22px;
  color: var(--tekst-3);
  font-size: 12px;
  font-style: normal;
  letter-spacing: .06em;
  transition: color .25s ease;
}

.harmonijka summary > span:not(.znaczek) {
  flex: 1;
}

.harmonijka summary:hover,
.harmonijka details.otwarte summary {
  color: var(--biel);
}

.harmonijka details.otwarte summary > i {
  color: var(--niebieski-jasny);
}

.znaczek {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.znaczek::before,
.znaczek::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 1.5px;
  background: var(--tekst-3);
  transition: transform .45s var(--krzywa), background .25s ease;
}

.znaczek::after {
  transform: rotate(90deg);
}

.harmonijka details.otwarte .znaczek::before,
.harmonijka details.otwarte .znaczek::after {
  background: var(--fiolet);
}

.harmonijka details.otwarte .znaczek::after {
  transform: rotate(0);
}

.harmonijka .odpowiedz {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .55s var(--krzywa), opacity .4s ease;
}

.harmonijka details.otwarte .odpowiedz {
  grid-template-rows: 1fr;
  opacity: 1;
}

.harmonijka .odpowiedz > div {
  overflow: hidden;
}

.harmonijka .odpowiedz p {
  margin: 0 0 24px 42px;
  padding-right: 34px;
  color: var(--tekst-2);
  font-size: 15px;
  line-height: 1.75;
}

/* ---------------- kontakt ---------------- */

.kontakt-siatka {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
}

.formularz,
.karta-discord {
  padding: 32px;
  border: 1px solid var(--kreska);
  border-radius: var(--promien);
  background: var(--karta);
}

.formularz h3,
.karta-discord h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.formularz .pod {
  margin: 0 0 24px;
  color: var(--tekst-3);
  font-size: 14px;
}

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

.pola .szerokie {
  grid-column: 1 / -1;
}

.pole label,
.etykieta-pola {
  display: block;
  margin: 0 0 8px;
  color: var(--tekst-2);
  font-size: 13.5px;
  font-weight: 500;
}

.pole input,
.pole textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--kreska);
  border-radius: var(--promien-maly);
  background: var(--karta-2);
  color: var(--biel);
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.pole textarea {
  min-height: 140px;
  resize: none;
}

.pole input:focus,
.pole textarea:focus {
  outline: 0;
  border-color: rgba(26, 176, 216, .7);
  box-shadow: 0 0 0 4px rgba(26, 176, 216, .13);
}

.pole input::placeholder,
.pole textarea::placeholder {
  color: var(--tekst-3);
}

.wybor-rodzaju {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.wybor-rodzaju label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.wybor-rodzaju input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wybor-rodzaju span {
  display: block;
  padding: 11px 10px;
  border: 1px solid var(--kreska);
  border-radius: var(--promien-maly);
  background: var(--karta-2);
  color: var(--tekst-2);
  font-size: 13px;
  text-align: center;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.wybor-rodzaju label:hover span {
  border-color: var(--kreska-mocna);
}

.wybor-rodzaju input:checked + span {
  border-color: rgba(26, 176, 216, .6);
  background: rgba(26, 176, 216, .12);
  color: var(--biel);
}

.wybor-rodzaju input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(26, 176, 216, .2);
}

.pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.formularz-dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

.formularz-info {
  color: var(--tekst-3);
  font-size: 13px;
}

.odpowiedz-formularza {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--promien-maly);
  font-size: 14px;
  animation: wjazdOdpowiedzi .45s var(--krzywa);
}

@keyframes wjazdOdpowiedzi {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.odpowiedz-formularza.udane {
  border: 1px solid rgba(76, 201, 138, .3);
  background: rgba(76, 201, 138, .08);
  color: #8fd8b0;
}

.odpowiedz-formularza.blad {
  border: 1px solid rgba(239, 107, 100, .3);
  background: rgba(239, 107, 100, .08);
  color: #f2a0a0;
}

.karta-discord {
  display: flex;
  flex-direction: column;
}

.znaczek-dc {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 20px;
  border: 1px solid var(--kreska-mocna);
  border-radius: 13px;
  color: var(--biel);
}

.znaczek-dc svg {
  width: 23px;
  height: 23px;
}

.karta-discord > p {
  margin: 0 0 18px;
  color: var(--tekst-2);
  font-size: 14.5px;
}

.lista-dc {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.lista-dc li {
  color: var(--tekst-2);
  font-size: 14px;
}

.lista-dc li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(88, 101, 242, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.karta-discord .przycisk {
  align-self: flex-start;
  margin-top: auto;
}

.karta-discord .albo {
  margin: 16px 0 0;
  color: var(--tekst-3);
  font-size: 13.5px;
}

.karta-discord .albo a {
  color: var(--biel);
}

/* ---------------- końcowe wezwanie ---------------- */

.dzial-cta {
  padding-bottom: 20px;
}

.karta-cta {
  position: relative;
  display: block;
  padding: clamp(40px, 6vw, 72px);
  text-decoration: none;
  color: inherit;
  transition: transform .5s var(--krzywa), border-color .3s ease, box-shadow .4s ease;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: 24px;
  background:
    radial-gradient(620px 320px at 88% 50%, rgba(167, 139, 250, .10), transparent 72%),
    radial-gradient(460px 280px at 8% 100%, rgba(26, 176, 216, .07), transparent 72%),
    var(--karta);
  overflow: hidden;
}

.karta-cta:hover {
  border-color: rgba(167, 139, 250, .38);
  box-shadow: 0 30px 70px -55px rgba(167, 139, 250, .5);
  transform: translateY(-2px);
}

.karta-cta h2 {
  max-width: 18ch;
  margin: 0 0 22px;
  font-size: clamp(30px, 4vw, 48px);
}

.cta-dalej {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--niebieski-jasny);
  font-size: 15px;
  font-weight: 600;
}

.cta-dalej svg {
  width: 18px;
  height: 18px;
  transition: transform .4s var(--krzywa);
}

.karta-cta:hover .cta-dalej svg {
  transform: translateX(5px);
}

/* Znak odświeżania: stara strona z tyłu, świeża na wierzchu i dwie iskry.
   Nic się nie kręci — nowa karta delikatnie się unosi, stara odsuwa,
   a iskry mrugają. To ma mówić „przed i po", a nie „ładowanie". */
.znak-odswiezania {
  position: absolute;
  top: 50%;
  right: clamp(24px, 7vw, 100px);
  width: clamp(120px, 17vw, 220px);
  height: clamp(120px, 17vw, 220px);
  margin-top: calc(clamp(120px, 17vw, 220px) / -2);
  color: var(--niebieski-jasny);
  opacity: .85;
}

.znak-nowa {
  animation: znakUnosi 5s ease-in-out infinite;
}

.znak-stara {
  animation: znakOdsuwa 5s ease-in-out infinite;
}

.znak-iskra {
  animation: znakMruga 3.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes znakUnosi {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2px, -5px); }
}

@keyframes znakOdsuwa {
  0%, 100% { transform: translate(0, 0); opacity: .35; }
  50% { transform: translate(3px, 4px); opacity: .22; }
}

@keyframes znakMruga {
  0%, 100% { opacity: .35; transform: scale(.94); }
  45% { opacity: 1; transform: scale(1.06); }
}

/* ---------------- responsywność ---------------- */

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

  .okno-pole-wokol {
    max-width: 640px;
  }

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

  .liczba:nth-child(2) {
    border-right: 0;
  }

  .liczba:nth-child(-n + 2) {
    border-bottom: 1px solid var(--kreska);
  }

  .oferta-siatka,
  .siatka-cennika {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

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

  .funkcja:nth-child(3n) {
    border-right: 1px solid var(--kreska);
  }

  .funkcja:nth-child(2n) {
    border-right: 0;
  }

  .funkcja:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--kreska);
  }

  .funkcja:last-child {
    border-bottom: 0;
  }

  .pytania-siatka,
  .kontakt-siatka {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pytania-lewa {
    position: static;
  }
}

@media (max-width: 860px) {
  .pasmo-szeroko {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .pasmo-szeroko .olowek {
    text-align: left;
  }

  .kroki-siatka {
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 0;
  }

  .krok,
  .krok:first-child,
  .krok:last-child {
    padding: 26px 0;
    border-right: 0;
    border-bottom: 1px solid var(--kreska);
  }

  .wybor-rodzaju {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dzial {
    padding-top: 84px;
  }
}

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

  .okno-boczne {
    display: none;
  }

  .pigulka.lewa {
    left: 10px;
  }

  .pigulka.prawa {
    right: 10px;
  }

  .etykieta-rogu {
    display: none;
  }

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

  .liczba,
  .liczba:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--kreska);
  }

  .liczba:last-child {
    border-bottom: 0;
  }

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

  .funkcja,
  .funkcja:nth-child(3n),
  .funkcja:nth-child(2n) {
    border-right: 0;
  }

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

  .formularz,
  .karta-discord {
    padding: 24px 20px;
  }

  .harmonijka .odpowiedz p {
    margin-left: 0;
    padding-right: 0;
  }

  /* Na telefonie znak nie mieści się obok tytułu, więc staje pod przyciskiem. */
  .znak-odswiezania {
    position: static;
    display: block;
    width: 96px;
    height: 96px;
    margin: 30px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pigulka,
  .znak-odswiezania {
    animation-duration: 60s;
  }

  .oferta:hover,
  .pakiet:hover {
    transform: none;
  }
}

/* ---------------- poprawki po przeglądzie Kuby ---------------- */

/* Zmiana języka nie może przesuwać strony: miejsce na cztery linie opisu
   i drobne pod sobą, zawsze w trzech liniach. Sam przycisk logowania trzyma
   stałą szerokość w motywie, bo ten sam nagłówek mają dokumenty. */
.hero-tekst .olowek {
  min-height: calc(1.75em * 4);
}

.hero-drobne {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
}

.hero-drobne li {
  white-space: nowrap;
}

/* Makieta panelu: białe logo na środku, konto na dole bocznego menu,
   okruszki po lewej i język z licencją w prawym rogu. */
.okno-logo {
  align-self: center;
  height: 18px;
  margin: 2px 0 12px;
  object-position: center;
  animation: oddechLogo 4.8s ease-in-out infinite;
}

@keyframes oddechLogo {
  0%, 100% {
    opacity: .85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.okno-konto-bok {
  display: flex;
  flex-direction: column;
  margin: auto 0 0;
  padding: 9px 8px 2px;
  border-top: 1px solid var(--kreska);
  font-style: normal;
}

.okno-konto-bok strong {
  color: var(--biel);
  font-size: 10.5px;
  font-weight: 600;
}

.okno-konto-bok small {
  color: var(--tekst-3);
  font-size: 9px;
}

.okno-gorny {
  justify-content: flex-start;
}

.okno-okruchy {
  margin-right: auto;
  color: var(--tekst-3);
  font-size: 10px;
}

.okno-okruchy b {
  color: var(--biel);
  font-weight: 600;
}

.okno-jezyk {
  padding: 3px 7px;
  border: 1px solid var(--kreska);
  border-radius: 6px;
  color: var(--biel);
  font-size: 9.5px;
  font-weight: 600;
}

/* Pytania: pod przyciskiem trzy konkretne liczby zamiast pustego miejsca. */
.pytania-guziki {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Znak Discorda jak w ich materiałach: biały Clyde na blurple i napis obok. */
.marka-dc {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--biel);
  line-height: 1;
}

.marka-dc svg {
  width: 30px;
  height: 30px;
  color: var(--biel);
}

.marka-dc span {
  font-family: var(--naglowki);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.lista-dc {
  flex: 1;
}

.lista-dc li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--kreska);
  line-height: 1.4;
}

.lista-dc li:last-child {
  border-bottom: 0;
}

.karta-discord .przycisk {
  align-self: stretch;
  justify-content: center;
}


@media (max-width: 560px) {
  .hero-drobne li {
    white-space: normal;
  }

}