/* 100 MLN+ System biznes online. Świat okładki (granat, żółty pasek, Poppins) + brandbook Oskara
   (kartka w kratkę, odręczne dopiski, rysunki kreską). Tokeny opisane w style-guide.html. */

@font-face { font-family: "Poppins"; src: url(fonty/Poppins-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(fonty/Poppins-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(fonty/Poppins-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Sen"; src: url(fonty/Sen-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sen"; src: url(fonty/Sen-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gloria"; src: url(fonty/GloriaHallelujah.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --granat: #000080;
  --granat-gleboki: #00004f;
  --granat-jasny: #2b2bb0;
  --zolty: #ffde59;
  --zolty-ciemny: #e8c43f;
  --papier: #f4f4f4;
  --kratka: rgba(0, 0, 128, .09);
  --tekst: #14142a;
  --tekst-2: #3c3c55;
  --biel: #ffffff;
  --na-granacie-2: #c9c9ee;
  --brak: #ffd6e4;

  --f-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --f-tekst: "Sen", "Helvetica Neue", Arial, sans-serif;
  --f-reka: "Gloria", "Comic Sans MS", cursive;

  --szer: 1180px;
  --waska: 720px;
  --sekcja: clamp(56px, 7vw, 92px);
  --promien: 14px;
  --cien: 0 18px 40px -18px rgba(0, 0, 60, .45);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--biel); color: var(--tekst); font: 400 19px/1.62 var(--f-tekst); text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
::selection { background: var(--zolty); color: var(--granat-gleboki); }
:focus-visible { outline: 3px solid var(--zolty); outline-offset: 3px; border-radius: 4px; }
.ciemna :focus-visible, .hero :focus-visible { outline-color: var(--zolty); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 18px; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--zolty); color: var(--granat); padding: 10px 16px; font-weight: 700; border-radius: 8px; }
.pomin:focus { top: 12px; }
mark { background: linear-gradient(transparent 12%, var(--zolty) 12%, var(--zolty) 92%, transparent 92%); color: inherit; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.brak { background: var(--brak); color: #6d0f35; border-radius: 4px; padding: 0 .3em; font-size: .9em; }
.reka { font-family: var(--f-reka); font-weight: 400; color: var(--granat); }
.lead { font-size: clamp(20px, 2vw, 23px); line-height: 1.5; color: var(--tekst-2); }

/* --- pasek u góry i menu --- */
.pasek-gora { background: var(--zolty); color: var(--granat-gleboki); text-align: center; font: 700 14px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; padding: 11px 16px; }
.gora { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 12px max(clamp(16px, 4vw, 40px), calc((100% - 1250px) / 2)); background: rgba(0, 0, 128, .96); color: var(--biel); backdrop-filter: saturate(140%) blur(8px); }
.logo { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.gora .logo { justify-self: start; border-radius: 6px; }
.gora .logo:focus-visible { outline-offset: 4px; }
.logo__mln { font: 800 19px/1 var(--f-display); background: var(--zolty); color: var(--granat-gleboki); padding: 4px 7px 2px; align-self: flex-start; }
.logo__sys { font: 700 11.5px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.menu { display: flex; gap: 28px; margin: 0 auto; font: 500 17px/1 var(--f-display); }
@media (min-width: 981px) { .gora { display: grid; grid-template-columns: 1fr auto 1fr; } .gora .przycisk--menu { justify-self: end; } }
.menu a { text-decoration: none; opacity: .85; padding: 6px 0; border-bottom: 2px solid transparent; transition: opacity .2s, border-color .2s; }
.menu a:hover, .menu a.aktywny { opacity: 1; border-color: var(--zolty); }
.menu-przycisk { display: none; }

/* --- przyciski --- */
.przycisk { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; background: var(--zolty); color: var(--granat-gleboki); font: 700 18px/1 var(--f-display); text-decoration: none; padding: 18px 26px; border-radius: 999px; border: 0; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; }
.przycisk::after { content: ""; width: 18px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h15M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h15M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .25s var(--ease); }
.przycisk:hover { transform: translateY(-2px); background: #ffe678; box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .5); }
.przycisk:hover::after { transform: translateX(3px); }
.przycisk:active { transform: translateY(0); }
.przycisk--maly { font-size: 15px; padding: 11px 18px; box-shadow: none; }
.przycisk--duzy { font-size: 21px; padding: 23px 36px; }
.przycisk--obrys { background: transparent; color: var(--granat); box-shadow: inset 0 0 0 2px var(--granat); }
.przycisk--obrys:hover { background: var(--granat); color: var(--biel); box-shadow: inset 0 0 0 2px var(--granat); }
/* --- animacje CTA --- */
.przycisk:not(.przycisk--obrys) { position: relative; overflow: hidden; isolation: isolate; }
/* błysk przejeżdżający po przycisku co kilka sekund */
.przycisk:not(.przycisk--obrys)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 48%, transparent 66%); transform: translateX(-120%); }
.ruch .przycisk:not(.przycisk--obrys)::before { animation: blysk 5.5s ease-in-out infinite; }
.ruch .przycisk--glowny::before { animation-delay: 1.8s; }
@keyframes blysk { 0%, 72% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
/* strzałka zaprasza do kliknięcia */
.ruch .przycisk::after { animation: strzalka 2.4s var(--ease) infinite; }
@keyframes strzalka { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(5px); } 85% { transform: translateX(0); } }
.przycisk:hover::after { animation: none; transform: translateX(6px); }
/* główne CTA: delikatne „oddychanie” zamiast pierścienia (pierścień na granacie wychodził szary) */
.ruch .przycisk--glowny { animation: oddech 3.2s ease-in-out infinite; }
@keyframes oddech { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.przycisk--glowny:hover { animation-play-state: paused; }
/* nacisk */
.przycisk:active { transform: translateY(1px) scale(.98); }
/* obrys: wypełnienie wjeżdża od lewej */
.przycisk--obrys { position: relative; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), transform .25s var(--ease); }
.przycisk--obrys::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--granat); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.przycisk--obrys:hover { background: transparent; }
.przycisk--obrys:hover::before { transform: scaleX(1); }
.przycisk--menu { font-size: 17px; padding: 14px 24px; }
@media (prefers-reduced-motion: reduce) { .przycisk::before, .przycisk::after, .przycisk--glowny { animation: none !important; } }

.link-strzalka { font: 700 18px/1.3 var(--f-display); color: var(--granat); }

/* --- sekcje --- */
.sekcja { padding: var(--sekcja) clamp(16px, 4vw, 40px); }
.sekcja > * { max-width: var(--szer); margin-left: auto; margin-right: auto; }
.naglowek > * { max-width: 760px; }
.waska { max-width: var(--waska) !important; }
.waska--srodek { text-align: center; }
.waska--srodek .lead { margin-left: auto; margin-right: auto; max-width: 600px; }
.kratka { background-color: var(--papier); background-image: linear-gradient(var(--kratka) 1px, transparent 1px), linear-gradient(90deg, var(--kratka) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px -1px; }
.ciemna { background: var(--granat); color: var(--biel); }
.ciemna .lead, .ciemna p { color: var(--na-granacie-2); }
.ciemna h2 { color: var(--biel); }
.ciemna .reka { color: var(--zolty); }

/* --- hero --- */
.hero { background: var(--granat); color: var(--biel); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(36px, 5vw, 64px) max(clamp(16px, 4vw, 40px), calc((100vw - var(--szer)) / 2)) clamp(48px, 6vw, 80px); overflow: hidden; }
.hero__autor { font: 700 15px/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; margin: 0 0 22px; color: var(--zolty); }
.hero h1 { font-size: calc(clamp(36px, 4.3vw, 60px) - 4px); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 24px; }
.hero__lead { font-size: clamp(19px, 1.7vw, 21px); line-height: 1.5; max-width: 32em; color: var(--na-granacie-2); max-width: 34em; }
.hero__punkty { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hero__punkty li { position: relative; padding-left: 26px; font: 600 15px/1.4 var(--f-display); color: var(--biel); }
.hero__punkty li::before { content: ""; position: absolute; left: 0; top: .1em; width: 19px; height: 19px; border-radius: 50%; background: var(--zolty) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2300004f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; background-size: 12px; }
.hero__punkty a { color: inherit; text-decoration: none; transition: color .2s; }
.hero__punkty a:hover { color: var(--zolty); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 30px 0 18px; }
.link-live { color: var(--biel); font-size: 17px; }
.hero__info { font: 500 15px/1.4 var(--f-display); color: var(--na-granacie-2); margin: 0; }
.hero__ksiazka { position: relative; justify-self: end; width: min(419px, 100%); perspective: 1600px; padding: 20px 0 40px; }
/* jaśniejsza plama granatu za książką: odcina okładkę od tła sekcji */
.hero__ksiazka::before { content: ""; position: absolute; inset: -12% -22% 0; background: radial-gradient(closest-side, #2121b8 0%, rgba(33, 33, 184, .55) 45%, rgba(0, 0, 128, 0) 100%); z-index: 0; }
.ksiazka3d { position: relative; z-index: 2; transform-style: preserve-3d; transform: rotateY(-22deg) rotateX(3deg) rotate(2deg); }
.okladka { width: 100%; border-radius: 2px 1px 1px 2px; position: relative; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .16), 18px 30px 50px -18px rgba(0, 0, 0, .6); }
/* grzbiet: cieniowany pasek na lewej krawędzi okładki */
.ksiazka3d::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5%; z-index: 3; border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .25) 70%, rgba(255, 255, 255, .06)); pointer-events: none; }
/* krawędź kartek: boczna ściana przy prawej krawędzi, pod kątem prostym do okładki, odchodzi w głąb */
.ksiazka3d__kartki { position: absolute; left: 100%; top: .6%; bottom: .6%; width: 58px; z-index: 1; transform-origin: left center; transform: rotateY(90deg);
  background: repeating-linear-gradient(0deg, #f7f7f4 0 2px, #dcdce6 2px 3px), #f2f2ee;
  box-shadow: inset 10px 0 14px -8px rgba(0, 0, 0, .35), inset -6px 0 10px -6px rgba(0, 0, 0, .2); }
.ksiazka3d__cien { position: absolute; left: 12%; right: 6%; bottom: 8px; height: 26px; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }

/* moment sygnaturowy: wejście z obrotu, potem spokojne unoszenie z cieniem na podłodze */
.ruch .ksiazka3d { animation: wejscie 1.3s var(--ease) .15s both, unos 6.5s ease-in-out 1.5s infinite; }
.ruch .ksiazka3d__cien { animation: cien 6.5s ease-in-out 1.5s infinite; }
@keyframes wejscie { from { opacity: 0; transform: rotateY(-55deg) rotateX(8deg) rotate(6deg) translateY(40px); filter: blur(6px); }
  to { opacity: 1; transform: rotateY(-22deg) rotateX(3deg) rotate(2deg); filter: blur(0); } }
@keyframes unos { 0%, 100% { transform: rotateY(-22deg) rotateX(3deg) rotate(2deg) translateY(0); }
  50% { transform: rotateY(-16deg) rotateX(2deg) rotate(1.4deg) translateY(-12px); } }
@keyframes cien { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .7; } }
.hero__ksiazka:hover .ksiazka3d { animation-play-state: paused; }

/* --- więzień --- */
.wiezien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 28px !important; margin-bottom: 28px !important; }
.kratki { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 14px; }
.kratki li { position: relative; padding-left: 38px; }
.kratki li::before { content: ""; position: absolute; left: 0; top: .32em; width: 20px; height: 20px; border: 2px solid var(--granat); border-radius: 3px; background: var(--biel); }
.reka--strzalka { font-size: 21px; position: relative; padding-left: 52px; margin: 6px 0 0; transform: rotate(-2deg); }
.reka--strzalka::before { content: ""; position: absolute; left: 4px; top: -6px; width: 40px; height: 26px; border-left: 2px solid var(--granat); border-bottom: 2px solid var(--granat); border-bottom-left-radius: 26px 22px; transform: rotate(8deg); }
.wiezien__rys img { width: 100%; mix-blend-mode: multiply; }

.problem .naglowek { text-align: center; }
.problem .naglowek > * { margin-left: auto; margin-right: auto; }
.problem .wiezien { display: block; max-width: 640px !important; }
.problem .wiezien__lista > p:first-child { text-align: center; }
.problem .kratki { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.problem .test-wynik { text-align: center; }
.problem .reka--strzalka { width: fit-content; margin-left: auto; margin-right: auto; }
.problem .wiezien__rys { margin: 26px auto 0; max-width: 560px; }
.cta-sekcji { text-align: center; margin-top: clamp(32px, 4vw, 48px) !important; }
.cta-sekcji p { font: 500 15px/1.4 var(--f-display); color: var(--tekst-2); margin: 14px 0 0; }
.cta-sekcji--lewo { text-align: left; margin-top: 28px !important; }
.hero h1 span { display: block; white-space: nowrap; }
@media (max-width: 640px) { .hero h1 span { display: inline; white-space: normal; } }

/* --- system --- */
.system { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.system__tekst p { max-width: 36em; }
.cytat { margin: clamp(36px, 5vw, 60px) auto 0 !important; max-width: 860px !important; text-align: center; }
.cytat p { font: 700 clamp(24px, 3vw, 34px)/1.3 var(--f-display); letter-spacing: -.015em; color: var(--tekst); margin-bottom: 14px; }
.cytat footer { font: 500 16px/1 var(--f-display); color: var(--tekst-2); }

/* --- autor --- */
.autor { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.autor__foto { margin: 0; position: relative; }
.autor__foto img { width: 100%; border-radius: var(--promien); filter: contrast(1.05); }
.autor__foto figcaption { position: absolute; right: -8px; bottom: -26px; font-size: 36px; line-height: 1; transform: rotate(-5deg); white-space: nowrap; }
.fakty { margin: 28px 0 0; display: grid; gap: 0; }
.fakty div { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.fakty dt { font: 700 17px/1.3 var(--f-display); color: var(--zolty); margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.fakty dt::before { content: ""; flex: none; width: 22px; height: 14px; background: var(--zolty);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M1 7.5c6-.6 12-.4 18-.5M14 2l6 5-6 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M1 7.5c6-.6 12-.4 18-.5M14 2l6 5-6 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.fakty dd { padding-left: 32px; }
.ruch .fakty div.widoczne dt::before { animation: strzalka-fakt .8s var(--ease) .3s both; }
@keyframes strzalka-fakt { from { transform: translateX(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.fakty dd { margin: 0; color: var(--biel); font-size: 18px; }

.cytat-autora { text-align: center; margin: 26px 0 0; padding: 22px 28px; border-radius: var(--promien); background: rgba(255, 255, 255, .07); }
.cytat-autora p { font: 700 21px/1.4 var(--f-display); color: var(--biel) !important; margin: 0 0 8px; }
.cytat-autora footer { font-size: 15px; color: var(--na-granacie-2); }

.autor__tekst h2 { font-size: clamp(26px, 2.1vw, 30px); letter-spacing: -.025em; }
@media (min-width: 981px) { .autor__tekst h2 { white-space: nowrap; } }
.oferta__tresc { text-align: center; }
.oferta__ksiazka { position: relative; perspective: 1600px; padding: 10px 0 10px 6%; }
.oferta__ksiazka { padding-left: 12%; }
/* lustro książki z hero: te same kąty z przeciwnym znakiem */
.oferta__ksiazka .ksiazka3d { transform: rotateY(22deg) rotateX(3deg) rotate(-2deg); }
.oferta__ksiazka .ksiazka3d__kartki { display: none; }
/* grzbiet: boczna ściana przy lewej krawędzi, pod kątem prostym, ta sama grubość co kartki w hero */
.ksiazka3d__grzbiet { position: absolute; right: 100%; top: .6%; bottom: .6%; width: 58px; z-index: 1; transform-origin: right center; transform: rotateY(-90deg);
  background: linear-gradient(90deg, #000066, #000080 50%, #00004f); display: flex; align-items: center; justify-content: center; overflow: hidden;
  writing-mode: vertical-rl; font: 700 14px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--biel); white-space: nowrap;
  box-shadow: inset -10px 0 14px -8px rgba(0, 0, 0, .45); }
.ksiazka3d__grzbiet > span { display: flex; align-items: center; gap: 8px; transform: rotate(180deg); }
.ksiazka3d__grzbiet b { background: var(--zolty); color: var(--granat-gleboki); padding: 5px 3px; font-weight: 800; }
.oferta__ksiazka .okladka { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 22px 34px 44px -20px rgba(0, 0, 60, .45), 6px 10px 18px -8px rgba(0, 0, 60, .3); }
.oferta__lista { text-align: left; width: fit-content; max-width: 480px; margin-left: auto !important; margin-right: auto !important; }

/* --- w środku --- */
.czesci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: 36px !important; }
.czesc { padding: 26px 28px 22px; border-radius: var(--promien); background: var(--biel); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 128, .18); }
.czesc h3 { font-size: 24px; margin-bottom: 14px; }
.czesc h3 span { display: inline-block; background: var(--zolty); color: var(--granat-gleboki); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px 3px; margin-right: 8px; vertical-align: 4px; }
.czesc ol { margin: 0; padding-left: 0; list-style: none; counter-reset: r calc(var(--start, 1) - 1); display: grid; gap: 10px; }
.czesc ol[start="6"] { --start: 6; } .czesc ol[start="12"] { --start: 12; } .czesc ol[start="15"] { --start: 15; }
.czesc li { counter-increment: r; position: relative; padding-left: 40px; font-size: 17px; line-height: 1.5; color: var(--tekst-2); }
.czesc li::before { content: counter(r); position: absolute; left: 0; top: -1px; font: 800 20px/1.2 var(--f-display); color: var(--granat); }
.czesc li b { color: var(--tekst); }
.czesc__pigulka { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed rgba(0, 0, 128, .3); font-size: 17px; color: var(--tekst-2); }

/* --- zajrzyj: przewijana taśma stron --- */
.zajrzyj { overflow: hidden; }
.strony { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px 4px 26px; max-width: none !important; margin: 0 calc(-1 * clamp(16px, 4vw, 40px)) !important; padding-left: max(clamp(16px, 4vw, 40px), calc((100vw - var(--szer)) / 2)); scrollbar-color: var(--granat) transparent; scroll-padding-inline: max(clamp(16px, 4vw, 40px), calc((100vw - var(--szer)) / 2)); }
.strony figure { flex: 0 0 auto; width: min(300px, 72vw); margin: 0; scroll-snap-align: start; }
.strony img { width: 100%; border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 80, .06), 0 22px 40px -22px rgba(0, 0, 80, .55); background: var(--biel); }
.strony figure:nth-child(odd) img { transform: rotate(-1deg); }
.strony figure:nth-child(even) img { transform: rotate(.8deg); }
.strony figcaption { font-size: 16px; margin-top: 16px; color: var(--tekst-2); }
.strony figcaption b { color: var(--granat); }
.dodatki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 18px !important; }
.dodatki p { font-size: 17px; color: var(--tekst-2); margin: 0; }
.dodatki b { display: block; font: 700 19px/1.3 var(--f-display); color: var(--granat); margin-bottom: 4px; }

/* --- dla kogo: dwie równe karty obok siebie --- */
.dlakogo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 30px !important; max-width: 1000px !important; }
.dlakogo__kol { padding: 28px 30px 30px; border-radius: var(--promien); }
.dlakogo h3 { margin-bottom: 18px; font-size: 22px; }
.dlakogo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dlakogo li { position: relative; padding-left: 38px; font-size: 17.5px; line-height: 1.55; }
.dlakogo li::before { content: ""; position: absolute; left: 0; top: .12em; width: 24px; height: 24px; border-radius: 50%; }
.dlakogo__kol--tak { background: var(--granat); color: var(--biel); }
.dlakogo__kol--tak h3 { color: var(--zolty); }
.dlakogo__kol--tak li::before { background: var(--zolty) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2300004f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
.dlakogo__kol--nie { background: var(--papier); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 128, .12); }
.dlakogo__kol--nie li { color: var(--tekst-2); }
.dlakogo__kol--nie li::before { background: var(--biel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' fill='none' stroke='%233c3c55' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: inset 0 0 0 1.5px #3c3c55; }

/* --- oferta --- */
.oferta__uklad { max-width: 1100px !important; }
.oferta__okladka { width: min(360px, 100%); justify-self: center; transform: rotate(-2deg); border-radius: 3px 8px 8px 3px; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .55); }
.oferta__karta { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center; background: var(--biel); color: var(--tekst); border-radius: 22px; padding: clamp(26px, 4vw, 52px); box-shadow: 0 30px 60px -30px rgba(0, 0, 20, .7); }
.oferta__karta h2 { color: var(--tekst); }
.oferta__naglowek { text-align: center; color: var(--biel); font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.02em; margin: 0 auto clamp(26px, 3.5vw, 44px); max-width: 16em; text-wrap: balance; }
.oferta__karta p { color: var(--tekst-2); }
.oferta__produkt { font: 800 26px/1.25 var(--f-display); letter-spacing: .04em; color: var(--granat-gleboki) !important; }
/* cena jak w sklepach: duże złote, grosze i waluta małe u góry */
.oferta__karta .oferta__cena { display: inline-flex; align-items: flex-start; margin: 6px 0 20px; color: var(--tekst); font-family: var(--f-display); font-variant-numeric: lining-nums tabular-nums; }
.cena__zl { font: 800 56px/1 var(--f-display); letter-spacing: -.02em; }
.cena__gr { font: 700 22px/1 var(--f-display); margin: 6px 0 0 3px; }
.oferta__cena .cena__zl { font-size: 54px; }
.oferta__cena .cena__gr { font-size: 20px; }
.oferta__lista { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.oferta__lista li { position: relative; padding-left: 36px; }
/* link do bonusów wygląda jak pozostałe pogrubienia, podkreślenie dopiero po najechaniu */
.oferta__lista a { text-decoration: none; }
.oferta__lista a:hover { text-decoration: underline; }
.oferta__lista li::before { content: ""; position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 50%; background: var(--zolty) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2300004f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
.oferta__drobne { font-size: 15px; margin: 18px 0 0; }

/* --- live --- */
.live__uklad { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 900px !important; }
.live__data { width: 190px; aspect-ratio: 1; border-radius: 22px; background: var(--biel); box-shadow: inset 0 0 0 2px var(--granat), 0 22px 40px -26px rgba(0, 0, 80, .6); display: grid; place-content: center; text-align: center; transform: rotate(-3deg); }
.live__data b { font: 800 82px/1 var(--f-display); color: var(--granat); }
.live__data span:not(.reka) { font: 700 16px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--granat); }
.live__data .reka { font-size: 22px; margin-bottom: 2px; }
.live__godzina { font: 700 18px/1.4 var(--f-display); }
.drobne { font-size: 15px; color: var(--tekst-2); margin-top: 12px; }

/* --- firmy --- */
.firmy { background: var(--zolty); padding: 40px clamp(16px, 4vw, 40px); }
.firmy__uklad { max-width: var(--szer); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; }
.firmy h2 { font-size: 28px; margin: 0; color: var(--granat-gleboki); }
.firmy p { margin: 0; color: var(--granat-gleboki); font-size: 17px; }
.firmy .brak { background: rgba(255, 255, 255, .7); }
.firmy .przycisk { justify-self: start; }

/* --- animacje CTA --- */
.przycisk { position: relative; overflow: hidden; isolation: isolate; }
/* błysk przejeżdżający po przycisku co kilka sekund (pod napisem, przycięty do kształtu) */
.przycisk:not(.przycisk--obrys)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 48%, transparent 66%); transform: translateX(-120%); }
.ruch .przycisk:not(.przycisk--obrys)::before { animation: blysk 5.5s ease-in-out infinite; }
.ruch .przycisk--glowny::before { animation-delay: 1.8s; }
@keyframes blysk { 0%, 72% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
.przycisk--granat::before { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 66%) !important; }
/* strzałka zaprasza do kliknięcia */
.ruch .przycisk::after { animation: strzalka 2.4s var(--ease) infinite; }
@keyframes strzalka { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(5px); } 85% { transform: translateX(0); } }
.przycisk:hover::after { animation: none; transform: translateX(6px); }
/* główne CTA: delikatne „oddychanie” */
.ruch .przycisk--glowny { animation: oddech 3.2s ease-in-out infinite; }
@keyframes oddech { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.przycisk--glowny:hover { animation-play-state: paused; }
.przycisk:active { transform: translateY(1px) scale(.98); }
/* obrys: wypełnienie wjeżdża od lewej */
.przycisk--obrys { transition: color .35s var(--ease), transform .25s var(--ease); }
.przycisk--obrys::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--granat); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.przycisk--obrys:hover { background: transparent; }
.przycisk--obrys:hover::before { transform: scaleX(1); }
/* granatowy (sekcja dla firm) */
.przycisk--granat { background: var(--granat); color: var(--biel); box-shadow: 0 10px 22px -12px rgba(0, 0, 60, .6); }
.przycisk--granat:hover { background: var(--granat-jasny); color: var(--biel); }
.przycisk--menu { font-size: 17px; padding: 14px 24px; }
@media (prefers-reduced-motion: reduce) { .przycisk::before, .przycisk::after, .przycisk--glowny { animation: none !important; } }

.link-strzalka { color: var(--granat-gleboki); }

/* --- FAQ --- */
.faq { margin-top: 26px; display: grid; gap: 10px; }
.faq details { border-radius: 12px; background: var(--papier); padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 19px 36px 19px 0; position: relative; font: 700 18px/1.35 var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 12px; height: 12px; border-right: 2.5px solid var(--granat); border-bottom: 2.5px solid var(--granat); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { margin: 0 0 20px; color: var(--tekst-2); }

/* --- poleć --- */
.polec h2 { text-align: center; }
.polec .waska { max-width: 960px !important; }
.polec h2 { max-width: 720px; margin-left: auto; margin-right: auto; }
.polec__lead { text-align: center; color: var(--tekst-2); margin: 0 auto 24px; }
/* okno maila jak w macOS (wzór: poprostukupuj.pl) */
.okno { background: var(--biel); border: 1px solid #dcdcec; border-radius: 12px; box-shadow: 0 24px 50px -30px rgba(0, 0, 80, .5); overflow: hidden; text-align: left; }
.okno__pasek { display: flex; gap: 8px; padding: 11px 14px; background: #f6f6f9; border-bottom: 1px solid #e6e6ef; }
.okno__pasek i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.okno__pasek i:nth-child(2) { background: #febc2e; }
.okno__pasek i:nth-child(3) { background: #28c840; }
.okno__uklad { display: grid; grid-template-columns: minmax(0, 1fr) 220px; }
.okno__mail { padding: 22px clamp(18px, 4vw, 40px) 26px; }
.okno__pole { margin: 0; padding: 10px 0; border-bottom: 1px solid #ececf3; font-size: 16px; color: var(--tekst); }
.okno__pole span { color: #8a8aa3; margin-right: 6px; }
.okno__tresc { padding-top: 18px; font-size: 17px; line-height: 1.65; }
.okno__tresc p { margin: 0 0 14px; }
.okno__tresc p:last-child { margin: 0; }
.okno__link { color: var(--granat); word-break: break-all; }
.okno__bok { background: #f6f6f9; border-left: 1px solid #e6e6ef; padding: 22px; }
.okno__kopiuj { width: 100%; justify-content: center; font-size: 16px; padding: 15px 18px; }
.okno__kopiuj::before { content: none; }
/* ikona kopiowania zamiast strzałki, po lewej */
.okno__kopiuj::after, .okno__kopiuj:hover::after { order: -1; width: 16px; height: 18px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Crect x='5' y='1' width='10' height='12' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M11 17H3a2 2 0 0 1-2-2V5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Crect x='5' y='1' width='10' height='12' rx='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M11 17H3a2 2 0 0 1-2-2V5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; animation: none; transform: none; }
@media (max-width: 760px) {
  .okno__uklad { grid-template-columns: minmax(0, 1fr); }
  .okno__bok { order: -1; border-left: 0; border-bottom: 1px solid #e6e6ef; padding: 14px 18px; }
}

/* --- koniec --- */
.koniec { text-align: center; padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }
.koniec h2 { font-size: clamp(32px, 4.6vw, 54px); }
.koniec .lead { margin-bottom: 34px; }

/* --- stopka i pasek zakupu --- */
.stopka { background: var(--granat-gleboki); color: var(--na-granacie-2); text-align: center; padding: 34px 16px 38px; font-size: 15px; }
.stopka p { margin: 4px 0; }
.stopka b { color: var(--biel); }
.stopka__imker { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; text-decoration: none; opacity: .9; transition: opacity .2s; }
.stopka__imker:hover { opacity: 1; }
.stopka__imker span { font-size: 14px; color: var(--na-granacie-2); }
.stopka__imker img { height: 32px; width: auto; }
@media (max-width: 760px) { .stopka__imker span { font-size: 13px; } }
.pasek-zakup { position: fixed; left: 50%; bottom: 16px; z-index: 40; translate: -50% 0; width: min(930px, calc(100% - 24px));
  display: flex; align-items: center; gap: 18px; padding: 20px 39px 20px 43px; border-radius: 22px; background: var(--granat-gleboki); color: var(--biel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 22px 44px -18px rgba(0, 0, 0, .6);
  transform: translateY(140%); opacity: 0; transition: transform .5s var(--ease), opacity .3s; }
.pasek-zakup.widoczny { transform: translateY(0); opacity: 1; }
.pasek-zakup__okladka { width: 52px; height: auto; border-radius: 2px 4px 4px 2px; transform: rotate(3deg); box-shadow: 4px 8px 14px -6px rgba(0, 0, 0, .6); margin: -36px 0 -8px; flex: none; }
.pasek-zakup__tekst { margin: 0; display: grid; gap: 2px; min-width: 0; }
.pasek-zakup__tekst b { font: 800 17px/1.2 var(--f-display); }
.pasek-zakup__tekst > span { font: 500 13.5px/1.3 var(--f-display); color: var(--na-granacie-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasek-zakup .przycisk { margin-left: auto; flex: none; }
.tylko-maly { display: none; }

/* --- test objawów --- */
.kratki--test li { padding-left: 0; }
.kratki--test li::before { display: none; }
.kratki--test label { display: block; position: relative; padding-left: 38px; cursor: pointer; }
.kratki--test input { position: absolute; left: 0; top: .32em; width: 22px; height: 22px; margin: 0; appearance: none; -webkit-appearance: none;
  border: 2px solid var(--granat); border-radius: 3px; background: var(--biel); cursor: pointer; transition: background .2s; }
.kratki--test input:hover { background: #fff8d6; }
.kratki--test input:checked { background: var(--zolty); }
.kratki--test input::after { content: ""; position: absolute; left: 3px; top: -9px; width: 22px; height: 24px; opacity: 0; transform: scale(.6) rotate(-8deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M3 15c2 2 4 5 6 8 3-8 8-15 13-21' fill='none' stroke='%23000080' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: opacity .2s, transform .35s var(--ease); }
.kratki--test input:checked::after { opacity: 1; transform: scale(1) rotate(0); }
.kratki--test input:checked + span { background: linear-gradient(transparent 60%, rgba(255, 222, 89, .6) 60%); }
.test-wynik { font: 700 20px/1.4 var(--f-display); color: var(--granat); margin: 6px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--biel); box-shadow: inset 0 0 0 2px var(--granat); }
.test-wynik a { display: inline-block; margin-left: 4px; }

/* --- wejścia przy przewijaniu --- */
.ruch .pojaw { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.ruch .pojaw.widoczne { opacity: 1; transform: none; }

/* --- tablet --- */
@media (max-width: 980px) {
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px max(clamp(16px, 4vw, 40px), calc((100% - 1250px) / 2)) 16px; background: var(--granat); margin: 0; }
  .menu.otwarte { display: flex; }
  .menu a { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .menu-przycisk { display: grid; gap: 5px; background: none; border: 0; padding: 10px 4px; cursor: pointer; margin-left: 4px; }
  .menu-przycisk i { display: block; width: 24px; height: 2px; background: var(--biel); border-radius: 2px; }
  .gora .przycisk--menu { margin-left: auto; font-size: 16px; padding: 12px 18px; }
  .hero { grid-template-columns: 1fr; text-align: left; }
  .wiezien, .system, .autor, .oferta__karta { grid-template-columns: 1fr; }
  .oferta__ksiazka { width: min(240px, 62%); justify-self: center; padding: 10px 0 10px 36px; }
  /* książka w hero: środek ekranu; kartki (boczna ściana) wystają w prawo, więc okładkę lekko w lewo */
  .hero__ksiazka { justify-self: center; width: min(300px, 68vw); padding-right: 34px; }
  .autor__foto { margin-bottom: 44px; }
  .autor__foto { max-width: 420px; }
  .dodatki { grid-template-columns: 1fr; }
  .firmy__uklad { grid-template-columns: 1fr; }
}
/* --- telefon --- */
@media (max-width: 640px) {
  body { font-size: 18px; }
  .pasek-gora { font-size: 11.5px; letter-spacing: .08em; }
  .gora { gap: 12px; }
  .czesci, .dlakogo { grid-template-columns: 1fr; }
  .czesc { padding: 22px 20px; }
  .live__uklad { grid-template-columns: 1fr; }
  .live__data { width: 150px; }
  .live__data b { font-size: 64px; }
  .oferta__karta { padding: 24px 20px; }
  .przycisk--duzy { font-size: 18px; padding: 19px 24px; white-space: normal; }
  .pasek-zakup__tekst > span { display: none; }
  .pasek-zakup__tekst b { font-size: 14.5px; }
  .tylko-maly { display: inline; } .tylko-duzy { display: none; }
  .pasek-zakup__tekst::after { content: 'Oskar Lipiński'; font: 500 13px/1.2 var(--f-display); color: var(--na-granacie-2); }
  .tylko-duzy-inline { display: none; }
  .pasek-zakup { gap: 12px; padding: 20px 14px 20px 18px; }
  .pasek-zakup__okladka { width: 38px; }
  .pasek-zakup .przycisk { padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ruch .pojaw { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ruch .ksiazka3d, .ruch .ksiazka3d__cien { animation: none !important; }
}

/* oferta = jedna karta (07.10): kadr pakietu na górze, pod nim zakup i lista bonusów */
.oferta__calosc { background: var(--biel); color: var(--tekst); border-radius: 22px; overflow: hidden; }
.calosc__pakiet { background: #E4E4E8; padding: clamp(12px, 2vw, 24px) clamp(8px, 2vw, 24px) 0; }
.calosc__pakiet img { display: block; width: 100%; height: auto; }
.calosc__dol { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 52px); align-items: start; }
.calosc__zakup { text-align: left; }
.calosc__zakup h2 { color: var(--tekst); }
.calosc__zakup .przycisk { margin-top: 4px; }
.calosc__zakup .oferta__drobne { color: var(--tekst-2); }
.calosc__etykieta { font: 700 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--granat) !important; margin: 6px 0 18px; }
.calosc__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.calosc__lista > li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; }
.calosc__lista .bonusy__znak { font-size: 20px; padding: 7px 0 4px; margin: 2px 0 0; text-align: center; }
.calosc__lista h3 { font: 700 18px/1.3 var(--f-display); color: var(--tekst); margin: 0 0 3px; }
.calosc__lista p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--tekst-2); }
.bonusy__znak { display: inline-block; font: 800 30px/1 var(--f-display); background: var(--zolty); color: var(--granat-gleboki); padding: 8px 12px 5px; transform: rotate(-1.5deg); }
@media (max-width: 860px) { .calosc__dol { grid-template-columns: minmax(0, 1fr); } .calosc__zakup { text-align: center; } }
.calosc__systemy { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; }
.calosc__systemy li { position: relative; padding-left: 33px; font: 600 19px/1.4 var(--f-display); color: var(--tekst); }
.calosc__systemy li::before { content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: var(--zolty) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2300004f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
@media (max-width: 520px) { .calosc__systemy { grid-template-columns: minmax(0, 1fr); } }

/* 07.10 wieczór: powrót do układu książka -> sekcja bonusów (Krzysztof: „za bardzo ściśnięte”) */
.oferta__bonusy { margin-top: clamp(40px, 5vw, 64px) !important; max-width: 1100px; }
.bonusy__panel { background: var(--biel); border-radius: 20px; padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 40px) clamp(24px, 3vw, 40px); text-align: center; color: var(--granat-gleboki); }
.bonusy__panel h3 { font: 800 clamp(22px, 2.6vw, 32px)/1.2 var(--f-display); margin: 0 0 10px; color: var(--granat-gleboki); }
.bonusy__panel > p { margin: 0 auto; max-width: 600px; color: var(--granat-gleboki) !important; opacity: .8; }
.bonusy__pakiet { display: block; width: 100%; height: auto; margin: clamp(16px, 2vw, 24px) auto 0; }
.bonusy__systemy { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 780px; margin: 22px auto 0 !important; text-align: left; gap: 12px 28px !important; }
.bonusy__karty { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: clamp(16px, 2vw, 24px) 0 0; }
.bonusy__karty li { background: var(--biel); border-radius: 16px; padding: 26px 20px 24px; text-align: center; color: var(--granat-gleboki); }
.bonusy__karty .bonusy__znak { margin-bottom: 16px; }
.bonusy__karty h4 { font: 700 18px/1.25 var(--f-display); margin: 0 0 6px; color: var(--granat-gleboki); }
.bonusy__karty p { font-size: 15px; line-height: 1.45; margin: 0; color: var(--tekst-2) !important; }
/* ten sam krój i rozmiar co .pakiety__wiecej (tekst akapitu) */
.bonusy__termin { text-align: center; margin: 22px 0 0 !important; color: var(--na-granacie-2); }
.bonusy__termin a { color: var(--zolty); }
@media (max-width: 860px) { .bonusy__karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bonusy__systemy { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .bonusy__systemy { grid-template-columns: minmax(0, 1fr) !important; } }

/* zapis na live 9.11 (07.10): formularz, docelowo do ClickFunnels -> baza „warsztat live” */
.live__zapis { margin-top: 22px; }
.live__pola { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.live__pola label { display: grid; gap: 6px; font: 600 14px/1.2 var(--f-display); color: var(--granat-gleboki); }
.live__pola input { font: 500 16px/1.2 var(--f-tekst, inherit); padding: 13px 14px; border: 2px solid var(--granat); border-radius: 12px; background: var(--biel); color: var(--tekst); min-width: 0; }
.live__pola input:focus-visible { outline: 3px solid var(--zolty); outline-offset: 1px; }
.live__pola input::placeholder { color: #8a8aa3; }
.live__zgoda { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 18px; font-size: 14px; line-height: 1.45; color: var(--tekst-2); }
.live__zgoda input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--granat); flex: none; }
.live__zgoda a { color: var(--granat); }
.live__turnstile { margin: 0 0 12px; }
.live__turnstile:empty { margin: 0; }
.live__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.live__komunikat { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font: 600 15px/1.45 var(--f-display); background: var(--biel); border: 2px solid var(--granat); color: var(--granat-gleboki); }
.kalendarz { margin: 14px 0 0; }
.kalendarz__tytul { font: 700 15px/1.3 var(--f-display); color: var(--granat-gleboki); margin: 0 0 8px; }
.kalendarz__linki { display: flex; flex-wrap: wrap; gap: 8px; }
.kalendarz__linki a { font: 600 15px/1 var(--f-display); color: var(--granat); text-decoration: none; padding: 11px 14px; border: 2px solid var(--granat); border-radius: 999px; background: var(--biel); transition: background .2s, color .2s; }
.kalendarz__linki a:hover { background: var(--granat); color: var(--biel); }
.live__komunikat.blad { border-color: #B3261E; color: #B3261E; }
@media (max-width: 760px) { .live__pola { grid-template-columns: minmax(0, 1fr); } }

/* mobile (07.10, Krzysztof): sekcje wyśrodkowane; listy, FAQ i formularz zostają do lewej */
@media (max-width: 760px) {
  .hero__tekst { text-align: center; }
  .hero__punkty { justify-content: center; }
  .hero__cta { justify-content: center; }
  .system h2, .system > div > p, .system blockquote { text-align: center; }
  .autor__tekst h2, .autor__tekst > p { text-align: center; }
  #pytania h2, #dla-kogo h2 { text-align: center; }
  .live__uklad { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .live__zapis { width: 100%; text-align: left; }
  .live__zapis .przycisk { display: flex; width: fit-content; margin: 0 auto; }
  .live__zapis .drobne { text-align: center; }
  .firmy__uklad { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .firmy__uklad .przycisk { justify-self: center; margin-left: auto; margin-right: auto; }
  .dodatki p { text-align: center; }
}

/* baner zgód (wzór: landing JZK) */
.zgody { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: end center; padding: 16px; background: rgba(0, 0, 40, .35); opacity: 0; transition: opacity .3s; }
.zgody.widoczne { opacity: 1; }
.zgody__okno { width: min(100%, 600px); background: var(--biel); color: var(--tekst); border-radius: 18px; padding: 26px 28px; box-shadow: 0 30px 70px -20px rgba(0, 0, 40, .6); transform: translateY(16px); transition: transform .3s var(--ease); margin-bottom: 2vh; }
.zgody.widoczne .zgody__okno { transform: none; }
.zgody__tytul { font: 800 20px/1.2 var(--f-display); color: var(--granat-gleboki); margin: 0 0 10px; }
.zgody__opis { font: 400 16px/1.55 var(--f-tekst); margin: 0 0 18px; }
.zgody__opis a { color: var(--granat); }
.zgody__szczegoly { display: grid; gap: 10px; margin: 0 0 18px; font: 400 15px/1.45 var(--f-tekst); }
.zgody__szczegoly[hidden] { display: none; }
.zgody__szczegoly input { accent-color: var(--granat); margin-right: 6px; }
.zgody__akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.zgody__akcje button { font: 700 16px/1 var(--f-display); border-radius: 999px; padding: 14px 22px; cursor: pointer; border: 2px solid var(--granat); min-height: 44px; }
.zgody__akceptuj, .zgody__zapisz { background: var(--granat); color: var(--biel); }
.zgody__akceptuj:hover, .zgody__zapisz:hover { background: var(--granat-gleboki); }
.zgody__dostosuj { background: transparent; color: var(--granat); }
@media (max-width: 560px) { .zgody__okno { padding: 20px 18px; } .zgody__akcje button { flex: 1 1 100%; } }

/* pakiety 3 / 5 / 10 pod kartą oferty */
.pakiety { margin-top: clamp(40px, 5vw, 64px) !important; max-width: 1100px; text-align: center; }
/* żółta kreska oddzielająca pakiety od bonusów */
.pakiety::before { content: ""; display: block; width: min(220px, 40%); height: 4px; margin: 0 auto clamp(40px, 5vw, 60px); border-radius: 4px; background: var(--zolty); }
.pakiety__tytul { font: 800 clamp(26px, 3vw, 36px)/1.15 var(--f-display); color: var(--biel); margin: 0 0 10px; }
.pakiety__lead { max-width: 620px; margin: 0 auto 30px; }
.pakiety__siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: center; }
.pakiet { position: relative; background: var(--biel); color: var(--tekst); border-radius: 20px; padding: 30px 24px 26px; display: flex; flex-direction: column; }
.pakiet__rabat { position: absolute; top: -12px; right: 18px; background: var(--zolty); color: var(--granat-gleboki); font: 800 14px/1 var(--f-display); padding: 7px 11px; border-radius: 999px; }
.pakiet__stos { display: flex; justify-content: center; height: 118px; align-items: flex-end; margin-bottom: 18px; }
.pakiet__stos img { width: 64px; height: auto; border-radius: 2px; box-shadow: 4px 8px 14px -6px rgba(0, 0, 60, .45); margin-left: -26px; transform: rotate(-4deg); }
.pakiet__stos img:first-child { margin-left: 0; }
.pakiet__stos img:nth-child(even) { transform: rotate(3deg) translateY(-4px); }
.pakiet__stos--3 img { width: 78px; margin-left: -22px; }
.pakiet__stos--10 img { width: 54px; margin-left: -36px; }
.pakiet__stos--10 img:first-child { margin-left: 0; }
.pakiet__ile { font: 700 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--granat) !important; margin: 0 0 6px; }
.pakiet h3 { font: 800 26px/1.15 var(--f-display); color: var(--granat-gleboki); margin: 0 0 8px; }
.pakiet__opis { font-size: 16px; line-height: 1.5; color: var(--tekst-2) !important; margin: 0 0 16px; min-height: 3em; }
.pakiet__cena { display: inline-flex; align-items: flex-start; justify-content: center; margin: 0; color: var(--tekst) !important; font-variant-numeric: lining-nums tabular-nums; }
.pakiet__cena .cena__zl { font-size: 48px; }
.pakiet__szt { font-size: 14px; color: var(--tekst-2) !important; margin: 6px 0 18px; }
.pakiet__lista { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; text-align: left; flex: 1; }
.pakiet__lista li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.45; }
.pakiet__lista li::before { content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: var(--zolty) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2300004f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; background-size: 13px; }
.pakiet .przycisk { justify-content: center; }
.pakiety__wiecej { margin: 26px 0 0; }
.pakiety__wiecej a { color: var(--zolty); }
@media (max-width: 900px) { .pakiety__siatka { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin: 0 auto; } .pakiet__opis { min-height: 0; } }

/* darmowa dostawa: znaczek przy cenie w ofercie (10.2026) */
.oferta__dostawa { margin: 0 0 12px; }
.dostawa-gratis { display: inline-flex; align-items: center; gap: 8px; background: var(--zolty); color: var(--granat-gleboki); font: 800 14px/1 var(--f-display); letter-spacing: .06em; padding: 9px 14px 8px; border-radius: 999px; white-space: nowrap; }
.dostawa-gratis__ikona { flex: none; }