/* Warianty banera "Autorska strona od 799 zl" (Kacper 08.10.2026, ?bn=1..5): jasne tla, inne uklady. Okna z animacja zostaja (.kai__ok). */

/* wspolne dla jasnych wariantow: ciemny tekst, ciemny przycisk, lzejsze cienie okien */
.bn799 { color: var(--ink); }
.bn799 p { color: var(--soft); }
.bn799 .kai__nasza-btn { background: var(--ink); color: #fff; }
.bn799 .kai__nasza-btn:hover { background: var(--accent); }
.bn799 .kai__nasza-link { color: var(--ink); }
.bn799 .kai__nasza-link:hover { color: var(--accent); }
.bn799 .kai__ok { box-shadow: 0 30px 60px -28px rgba(17, 24, 39, .4), 0 0 0 1px rgba(17, 24, 39, .06); }
.bn799__lista { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink); }
.bn799__lista li { display: flex; align-items: center; gap: 10px; }
.bn799__lista .ico { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #eef3ff; color: var(--accent); }
.bn799__cena { display: none; align-items: baseline; gap: 8px; font-size: 15px; color: var(--muted); }
.bn799__cena b { font-family: 'Fraunces', Georgia, serif; font-size: clamp(44px, 4.6vw, 68px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--accent); }

/* 1. Biala karta: bialy box z cienka ramka, duza cena nad naglowkiem, lista */
.bn799--1 { background: #fff; border: 1px solid var(--line); }
.bn799--1 .bn799__cena { display: inline-flex; }
.bn799--1 .bn799__h-cena { display: none; } /* cena duza nad naglowkiem, w naglowku bez ceny */
.bn799--1 .bn799__lista { display: grid; }
.bn799--1 h3 { margin-top: 10px; }

/* 2. Odwrocony: jasnoniebieskie tlo, okna z lewej, tekst z prawej */
.bn799--2 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: #eef3ff; }
.bn799--2 .kai__nasza-t { order: 2; }
.bn799--2 .kai__nasza-foto { order: 1; perspective-origin: 80% 30%; }
.bn799--2 .kai__ok { right: auto; }
.bn799--2 .kai__ok:nth-child(1) { left: 10%; transform: rotateX(12deg) rotateY(30deg) rotateZ(-4deg) translateZ(-110px); }
.bn799--2 .kai__ok:nth-child(2) { left: 18%; transform: rotateX(12deg) rotateY(30deg) rotateZ(-4deg) translateZ(-40px); }
.bn799--2 .kai__ok:nth-child(3) { left: 26%; transform: rotateX(12deg) rotateY(30deg) rotateZ(-4deg) translateZ(30px); }
.bn799--2 .kai__nasza-foto .kai__ok:hover, .bn799--2 .kai__nasza-foto .kai__ok.is-auto { transform: rotateX(4deg) rotateY(12deg) rotateZ(-1deg) translateZ(90px); }
.bn799--2 .bn799__lista { display: grid; }

/* 3. Bez boxa: tlo strony, siatka kropek za oknami, lista */
.bn799--3 { padding-left: 0; padding-right: 0; background: none; border-radius: 0; }
.bn799--3 .kai__nasza-foto::before { content: ""; position: absolute; inset: -40px -20px -50px 0; border-radius: 24px; background-image: radial-gradient(#c9d4ea 1.2px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse at 55% 50%, #000 40%, transparent 75%); mask-image: radial-gradient(ellipse at 55% 50%, #000 40%, transparent 75%); }
.bn799--3 .bn799__lista { display: grid; }
.bn799--3 h3 { font-size: clamp(32px, 3.4vw, 50px); }

/* 4. Wachlarz: tekst wysrodkowany na gorze, okna pod spodem w rzedzie, lekko przechylone */
.bn799--4 { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-bottom: 0; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #eef3ff 100%); border: 1px solid var(--line); text-align: center; }
.bn799--4 .kai__nasza-t { max-width: 640px; }
.bn799--4 p { margin-left: auto; margin-right: auto; }
.bn799--4 .kai__nasza-btns { justify-content: center; }
.bn799--4 .kai__nasza-foto { width: 100%; min-height: 0; height: clamp(240px, 26vw, 360px); margin-top: 28px; perspective: 1800px; perspective-origin: 50% 0%; }
.bn799--4 .kai__ok { width: 44%; top: 0; }
.bn799--4 .kai__ok:nth-child(1) { left: 2%; top: 40px; z-index: 1; transform: rotateZ(-6deg); }
.bn799--4 .kai__ok:nth-child(2) { left: 28%; top: 0; z-index: 3; transform: none; }
.bn799--4 .kai__ok:nth-child(3) { left: 54%; top: 40px; z-index: 2; transform: rotateZ(6deg); }
.bn799--4 .kai__nasza-foto .kai__ok:hover, .bn799--4 .kai__nasza-foto .kai__ok.is-auto { z-index: 5; transform: translateY(-14px) rotateZ(0); }

/* 5. Podzielony: lewa biala karta z tekstem, prawa cieply jasny panel z oknami */
.bn799--5 { gap: 0; padding: 0; overflow: hidden; background: #f3eee7; border: 1px solid var(--line); }
.bn799--5 .kai__nasza-t { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 52px); background: #fff; }
.bn799--5 .kai__nasza-foto { min-height: 380px; margin: 0 0 0 4%; }
.bn799--5 .bn799__lista { display: grid; }
.bn799--5 .kai__ok:nth-child(1) { top: 20px; }
.bn799--5 .kai__ok:nth-child(2) { top: 70px; }
.bn799--5 .kai__ok:nth-child(3) { top: 120px; }

@media (max-width: 800px) {
  .bn799--2 { grid-template-columns: minmax(0, 1fr); }
  .bn799--2 .kai__nasza-t { order: 2; }
  .bn799--4 .kai__ok { width: 60%; }
  .bn799--4 .kai__ok:nth-child(1) { left: -6%; }
  .bn799--4 .kai__ok:nth-child(2) { left: 20%; }
  .bn799--4 .kai__ok:nth-child(3) { left: 46%; }
  .bn799--5 .kai__nasza-foto { min-height: 260px; margin: 0; }
}

/* 6. Pelna szerokosc (Kacper 08.10.2026, domyslny): tresc na srodku z czarnym logo, okna realizacji po bokach (wychodza za krawedz),
   tlo: gladki liliowo-niebieski gradient jak we wzorze (mocniejszy kolor przy lewej krawedzi i w prawym dolnym rogu). */
.bn6 { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: center; margin: 70px calc(50% - 50vw) 0; padding: clamp(72px, 8vw, 120px) 16px;
  background: radial-gradient(ellipse 38% 140% at 0% 30%, #c3c9fb 0%, rgba(195, 201, 251, .6) 35%, transparent 72%), radial-gradient(ellipse 34% 100% at 100% 100%, #d4d6fb 0%, rgba(212, 214, 251, .5) 40%, transparent 75%), linear-gradient(100deg, #e3e6fc 0%, #eeeffc 35%, #f1f1fc 65%, #ecebfc 100%); }
.bn6__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 640px; text-align: center; }
.bn6__logo { width: 34px; height: 34px; filter: brightness(0); }
.bn6__h { margin: 22px 0 0; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 40; font-size: clamp(30px, 3.2vw, 48px); font-weight: 300; line-height: 1.14; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.bn6__h span { color: var(--accent); }
.bn6__p { max-width: 520px; margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--soft); }
.bn6__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; margin-top: 26px; }
.bn6__btn { background: var(--ink); color: #fff; }
.bn6__btn:hover { background: var(--accent); }
/* okna po bokach: po dwa z kazdej strony, przekrzywione, czesciowo za krawedzia */
.bn6 .bn6__ok { position: absolute !important; z-index: 1; width: clamp(240px, 21vw, 360px) !important; box-shadow: 0 30px 60px -28px rgba(40, 40, 120, .45), 0 0 0 1px rgba(40, 40, 120, .06) !important; }
.bn6 .bn6__ok--l { top: 8% !important; right: auto !important; left: -3vw !important; transform: rotate(-8deg) !important; }
.bn6 .bn6__ok--l2 { top: auto !important; bottom: 4% !important; right: auto !important; left: 7vw !important; transform: rotate(5deg) !important; width: clamp(200px, 16vw, 280px) !important; }
.bn6 .bn6__ok--p { top: 6% !important; left: auto !important; right: -3vw !important; transform: rotate(7deg) !important; }
.bn6 .bn6__ok--p2 { top: auto !important; bottom: 3% !important; left: auto !important; right: 8vw !important; transform: rotate(-5deg) !important; width: clamp(200px, 16vw, 280px) !important; }
.bn6 .bn6__ok.is-auto, .bn6 .bn6__ok:hover { z-index: 3; box-shadow: 0 40px 70px -26px rgba(40, 40, 120, .55) !important; }
@media (max-width: 1100px) { .bn6 .bn6__ok { display: none !important; } }