/* Leaders in Europe — rankingi liderów marketingu (leadersineurope.com). HEX-NET, 29–30.09.2026.
   Paweł: „wersja czarna jest bardziej prestiżowa”, „głównie kafelki”, „animacje, zoomowanie, wyższy poziom designu”,
   „ciekawe animacje w najechaniu”, „zdjęcia w kadrze”; ranking jak indeks, a idea i zasady jak slajdy
   z beta.innovativeleader.eu (kurtyna przejść, maska tytułów, pęczniejące filtry, slajdy z paralaksą).
   Czerń i żółty z logo, Playfair Display (nazwiska i tytuły) + Inter (reszta). Najpierw telefon. */
/* 30.09 Paweł: „zrób wersję Night and Day, jasna domyślna” — jasny motyw w :root, nocny w [data-motyw="noc"] */
:root {
  --zolty: #fbeb2a; --zolty-ciemny: #e2d300; --czern: #0b0b0c; --tlo: #f6f3ea; --tlo-2: #eeeadf; --tlo-3: #e3ded0;
  --tekst: #121214; --tekst-2: #3b3934; --tekst-3: #6e6a60; --linia: rgba(18,18,20,.12); --linia-mocna: rgba(18,18,20,.3);
  --akcent: #6f6200; --tlo-rgb: 246,243,234; --maszt-tlo: rgba(246,243,234,.88); --pasek-tlo: rgba(246,243,234,.92); --tlo-stopka: #ebe6d8;
  --szeryf: "Playfair Display", Georgia, "Times New Roman", serif; --bez: Inter, "Helvetica Neue", Arial, sans-serif;
  --kontener: min(1320px, 100% - 32px); --kontener-szeroki: min(1640px, 100% - 32px); --maszt-h: 68px;
  --wyjscie: cubic-bezier(.16, 1, .3, 1); --kadr: cubic-bezier(.075, .82, .165, 1);
  color-scheme: dark;
}
:root[data-motyw="noc"] {
  --tlo: #0b0b0c; --tlo-2: #121214; --tlo-3: #1a1a1d;
  --tekst: #f4f2ea; --tekst-2: #c3c0b6; --tekst-3: #8d8a82; --linia: rgba(244,242,234,.12); --linia-mocna: rgba(244,242,234,.3);
  --akcent: #fbeb2a; --tlo-rgb: 11,11,12; --maszt-tlo: rgba(var(--tlo-rgb),.86); --pasek-tlo: rgba(18,18,20,.8); --tlo-stopka: #060607;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 400 16px/1.6 var(--bez); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--szeryf); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
::selection { background: var(--zolty); color: var(--czern); }
:focus-visible { outline: 2px solid var(--zolty); outline-offset: 3px; }
.kontener { width: var(--kontener); margin-inline: auto; }
.kontener--szeroki { width: var(--kontener-szeroki); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 80; padding: 10px 14px; background: var(--zolty); color: var(--czern); font-weight: 700; text-decoration: none; }
.pomin:focus { top: 12px; }

/* ---------- maszt: stoi w miejscu, kurtyna przejeżdża pod nim ---------- */
.maszt { position: sticky; top: 0; z-index: 70; background: var(--maszt-tlo); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linia); }
.maszt__w { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: var(--kontener-szeroki); margin-inline: auto; min-height: var(--maszt-h); }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo svg { width: 132px; height: auto; transition: transform .5s var(--wyjscie); }
.logo:hover svg { transform: rotate(-2deg) scale(1.03); }
.logo__europa { display: none; font: 700 10.5px/1.2 var(--bez); letter-spacing: .22em; text-transform: uppercase; color: var(--tekst-3); }
.menu-przycisk { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--linia-mocna); background: none; color: var(--tekst); font: 700 12px/1 var(--bez); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 20px; background: var(--tlo); border-bottom: 1px solid var(--linia); }
.nav[data-otwarte] { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 13px 2px; border-bottom: 1px solid var(--linia); text-decoration: none; font: 700 12.5px/1.2 var(--bez); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-2); }
.nav a[aria-current="page"] { color: var(--tekst); }
.nav__nr { font-size: 10px; letter-spacing: .04em; color: var(--akcent); font-variant-numeric: tabular-nums; }
.jezyk { display: flex; gap: 6px; margin-top: 14px; }
.jezyk a { padding: 6px 10px; border: 1px solid var(--linia-mocna); font: 700 11px/1 var(--bez); letter-spacing: .12em; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.jezyk a[aria-current="true"] { background: var(--zolty); border-color: var(--zolty); color: var(--czern); }
@media (min-width: 1000px) {
  .logo__europa { display: block; }
  .menu-przycisk { display: none; }
  .nav { display: flex !important; position: static; align-items: center; gap: clamp(16px, 2vw, 32px); padding: 0; border: 0; background: none; }
  .nav ul { display: flex; gap: clamp(14px, 2vw, 30px); }
  .nav a { border: 0; padding: 6px 0; font-size: 11.5px; transition: color .2s ease; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--zolty); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--wyjscie); }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--tekst); }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .jezyk { margin: 0; }
}

/* ---------- kurtyna przejścia między stronami (żółty brzeg + czarny panel z numerem i nazwą celu) ---------- */
.kurtyna { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.kurtyna__pas, .kurtyna__panel { position: absolute; inset: 0; transform: translateY(100%); }
.kurtyna__pas { background: var(--zolty); }
.kurtyna__panel { display: flex; align-items: flex-end; gap: .6em; padding: clamp(20px, 4vw, 56px); background: var(--czern); border-top: 6px solid var(--zolty); }
.kurtyna__nr { margin-bottom: .9em; font: 700 clamp(13px, 1.3vw, 17px)/1 var(--bez); letter-spacing: .1em; color: var(--zolty); }
.kurtyna__nazwa { font: 800 clamp(3rem, 9vw, 8.5rem)/.92 var(--szeryf); letter-spacing: -.02em; color: var(--tekst); }
.kurtyna-zakryta .kurtyna__pas, .kurtyna-zakryta .kurtyna__panel { transform: none; }

/* ---------- typografia wspólna ---------- */
.maska { display: block; overflow: hidden; padding-bottom: .08em; }
.tytul-hero .maska { padding-bottom: .14em; margin-bottom: -.08em; }
.tytul__linia { display: block; }
.kicker { display: flex; align-items: center; gap: .75rem; margin: 0 0 16px; font: 700 11px/1.3 var(--bez); letter-spacing: .2em; text-transform: uppercase; color: var(--tekst-2); }
.kicker__nr { color: var(--akcent); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.kicker__kreska { flex: none; width: 1.6rem; height: 2px; background: var(--zolty); }
.ukos { margin: 0 .25em; color: var(--akcent); }
.h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem); }
.lede { max-width: 36rem; font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); line-height: 1.55; color: var(--tekst-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 1px solid var(--linia-mocna); color: var(--tekst); font: 700 12.5px/1 var(--bez); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s var(--wyjscie); }
.btn:hover { border-color: var(--tekst); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--zolty { background: var(--zolty); border-color: var(--zolty); color: var(--czern); }
.btn--zolty:hover { background: var(--tekst); border-color: var(--tekst); color: var(--tlo); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.link-strzalka { display: inline-flex; gap: 8px; padding-bottom: 3px; border-bottom: 2px solid var(--zolty); font: 700 12.5px/1.2 var(--bez); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.link-strzalka span { transition: transform .35s var(--wyjscie); }
.link-strzalka:hover span { transform: translateX(6px); }

/* ---------- start: hero z poświatą ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: calc(100svh - var(--maszt-h)); display: flex; border-bottom: 1px solid var(--linia); }
.hero__plotno { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; filter: blur(28px) saturate(1.1); opacity: .85; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 120%, rgba(var(--tlo-rgb),.9), transparent 60%), linear-gradient(90deg, rgba(var(--tlo-rgb),.75), rgba(var(--tlo-rgb),.15) 70%); pointer-events: none; }
.hero__w { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(36px, 7vh, 80px) 0 28px; }
.hero__srodek { display: flex; flex-direction: column; gap: 26px; margin: auto 0; }
.tytul-hero { font-size: clamp(3.4rem, 1rem + 11vw, 11.5rem); font-weight: 800; line-height: .9; letter-spacing: -.035em; }
.tytul-hero em { font-style: italic; font-weight: 600; color: var(--akcent); }
.hero__dane { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 620px; }
.hero__dane div { padding-top: 12px; border-top: 2px solid var(--zolty); }
.hero__dane b { display: block; font: 800 clamp(1.8rem, 1.1rem + 2vw, 3rem)/1 var(--szeryf); font-variant-numeric: tabular-nums; }
.hero__dane span { font-size: 12.5px; color: var(--tekst-3); }
.hero__indeks { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--linia-mocna); list-style: none; }
.hero__indeks a { font: 700 12px/1.3 var(--bez); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--tekst-2); transition: color .2s; }
.hero__indeks a:hover { color: var(--akcent); }
.nr { margin-right: .5em; color: var(--akcent); font-variant-numeric: tabular-nums; }

/* ---------- sekcje lat na starcie ---------- */
.rok { padding: clamp(64px, 9vw, 130px) 0; }
.rok--2 { background: var(--tlo-2); border-block: 1px solid var(--linia); }
.rok__gora { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; margin-bottom: clamp(28px, 4vw, 48px); }
.siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1080px) { .siatka { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } }

/* ---------- karta lidera: kadr 4:5, czerń-biel → kolor, zoom, przechył, błysk, złote narożniki ---------- */
.os { position: relative; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--kadr); will-change: transform; }
.os[hidden] { display: none; }
.os__kadr { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tlo-3); isolation: isolate; }
/* 30.09 Paweł: „daj od razu kolorowe zdjęcia, a nie czarno-białe — wyglądają, jakby umarli” — kolor zawsze, bez przyciemniania */
.os__kadr img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transform: scale(1.001); transition: filter .6s ease, transform 1.1s var(--kadr); }
.os__kadr::before, .os__kadr::after { content: ""; position: absolute; z-index: 3; width: 34px; height: 34px; border: 2px solid var(--zolty); opacity: 0; transition: opacity .35s ease, transform .55s var(--wyjscie); pointer-events: none; }
.os__kadr::before { right: 10px; bottom: 10px; border-left: 0; border-top: 0; transform: translate(8px, 8px); }
.os__kadr::after { left: 10px; top: 10px; border-right: 0; border-bottom: 0; transform: translate(-8px, -8px); }
.os__blysk { position: absolute; inset: 0; z-index: 2; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(251,235,42,.22), transparent 42%), linear-gradient(115deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%); background-size: 100% 100%, 250% 100%; background-position: 0 0, 120% 0; opacity: 0; transition: opacity .4s ease, background-position .9s var(--wyjscie); pointer-events: none; mix-blend-mode: screen; }
.os__nr { position: absolute; left: 0; top: 12px; z-index: 4; padding: 6px 16px 6px 11px; background: var(--zolty); color: var(--czern); font: 800 clamp(1.05rem, .9rem + .6vw, 1.45rem)/1 var(--szeryf); font-variant-numeric: tabular-nums; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); transition: padding .45s var(--wyjscie); }
.os__tresc { padding: 12px 2px 4px; }
.os__imie { font: 700 clamp(1rem, .92rem + .35vw, 1.22rem)/1.18 var(--szeryf); transition: color .3s; }
.os__firma { margin: 4px 0 0; font: 700 10.5px/1.35 var(--bez); letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3); }
.inicjaly { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(80% 80% at 30% 20%, var(--tlo-3), var(--tlo-2)); font: 700 clamp(2rem, 6vw, 3.4rem)/1 var(--szeryf); color: var(--akcent); letter-spacing: .04em; }
@media (hover: hover) {
  .os:hover .os__kadr img { filter: brightness(1.04) saturate(1.06); transform: scale(1.09); }
  .os:hover .os__kadr::before, .os:hover .os__kadr::after { opacity: 1; transform: none; }
  .os:hover .os__blysk { opacity: 1; background-position: 0 0, -20% 0; }
  .os:hover .os__nr { padding-right: 26px; }
  .os:hover .os__imie { color: var(--akcent); }
}

/* pojawianie się kart przy przewijaniu (tylko z JS — bez JS wszystko widać od razu) */
.js [data-odslona] .os, .js [data-lista] .os { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .9s var(--wyjscie); transition-delay: calc(var(--i, 0) * 55ms); }
.js [data-odslona] .os.widoczna, .js [data-lista] .os.widoczna { opacity: 1; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }
.js .os.widoczna { transition: opacity .7s ease, transform .5s var(--kadr); transition-delay: 0s; }

/* ---------- ranking = indeks (jak beta.innovativeleader.eu/#/indeks) ---------- */
.indeks { padding: clamp(36px, 6vw, 80px) 0 clamp(60px, 8vw, 110px); }
.indeks__glowa { max-width: 900px; margin-bottom: clamp(28px, 5vw, 56px); }
.tytul { font-size: clamp(2.8rem, 1rem + 7vw, 7.4rem); font-weight: 800; line-height: .92; letter-spacing: -.03em; }
.indeks__lead { max-width: 44rem; margin-top: 22px; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); color: var(--tekst-2); }
.lata { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lata a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--linia-mocna); font: 700 13px/1 var(--bez); letter-spacing: .08em; text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.lata a:hover { border-color: var(--tekst); }
.lata a[aria-current="page"] { background: var(--zolty); border-color: var(--zolty); color: var(--czern); }
.indeks__karty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin: 0; padding: 0; list-style: none; transition: opacity .3s; }
.indeks__filtry { position: sticky; bottom: 10px; z-index: 5; display: flex; justify-content: center; gap: 6px; margin-top: 24px; padding: 6px; background: var(--pasek-tlo); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--linia); }
.indeks__filtr { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 12px; border: 0; background: none; color: var(--tekst-2); font: 700 13px/1 var(--bez); letter-spacing: .06em; cursor: pointer; transition: color .25s, background .25s; }
.indeks__filtr.is-aktywny { background: var(--zolty); color: var(--czern); }
.indeks__ile { order: 3; font-size: 11px; font-weight: 600; opacity: .7; }
.indeks__nazwa span { display: inline-block; }
/* 30.09: cyfry liczby nie mogą się zawijać (przy wąskim pasku „100” pokazywało samo „1”), przyciski się nie ściskają */
.indeks__nazwa { white-space: nowrap; }
.indeks__filtr { flex: 0 0 auto; }
@media (max-width: 480px) {
  .indeks__filtry { justify-content: space-between; gap: 2px; padding: 4px; }
  .indeks__filtr { padding: 9px 8px; gap: 4px; letter-spacing: .03em; }
  .indeks__ile { display: none; }
}
.uwaga { max-width: 52rem; margin-top: 36px; padding: 14px 16px; border-left: 4px solid var(--zolty); background: var(--tlo-2); font-size: 14.5px; color: var(--tekst-2); }
.uwaga a { color: var(--akcent); }
@media (min-width: 1000px) {
  .indeks__uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 34%); gap: clamp(24px, 4vw, 72px); align-items: start; }
  .indeks__karty { gap: 26px 28px; padding-bottom: 9em; }
  .indeks__karty .os.os--prawa { top: 9em; }
  .indeks__filtry { position: sticky; top: var(--maszt-h); bottom: auto; flex-direction: column; align-items: flex-end; justify-content: flex-end; height: calc(100svh - var(--maszt-h) - 24px); margin: 0; padding: 0 0 12px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; }
  .indeks__filtr { position: relative; flex-direction: row; align-items: flex-end; gap: 10px; padding: 14px 0 4px; background: none; color: var(--tekst); }
  .indeks__filtr.is-aktywny { padding-top: 26px; background: none; color: var(--tekst); }
  .indeks__top { align-self: flex-start; margin-top: .6em; font-size: 12px; letter-spacing: .24em; color: var(--tekst-3); }
  .indeks__ile { order: 0; align-self: flex-end; margin-bottom: 1.1em; font-size: 15px; font-weight: 500; }
  .indeks__nazwa span { font: 800 64px/.8 var(--szeryf); letter-spacing: -.02em; color: var(--tekst-3); transition: color .35s ease; }
  .indeks__filtr:hover .indeks__nazwa span { color: var(--tekst-2); }
  .indeks__filtr.is-aktywny .indeks__nazwa span { color: var(--akcent); }
}
.indeks__karty .os { position: relative; }


/* ---------- dokumenty: konkursy, kontakt, prywatność ---------- */
.dok { padding: clamp(40px, 7vw, 96px) 0 clamp(60px, 8vw, 120px); }
.dok__glowa { margin-bottom: clamp(24px, 4vw, 48px); }
.dok__tresc { max-width: 860px; }
.dok__tresc h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin: 40px 0 12px; }
.dok__tresc a { color: var(--akcent); }
.dok__tresc .btn { color: var(--czern); }
.dok__tresc .cta { margin: 8px 0 32px; }
.kontakt__mail { display: inline-block; padding-bottom: 4px; border-bottom: 3px solid var(--zolty); font: 800 clamp(1.5rem, 1rem + 3.4vw, 3.6rem)/1.1 var(--szeryf); color: var(--tekst) !important; text-decoration: none; overflow-wrap: anywhere; transition: color .2s; }
.kontakt__mail:hover { color: var(--akcent) !important; }
.dok__foto { margin: 32px 0; overflow: hidden; }
.dok__foto img { width: 100%; transition: transform 1.4s var(--kadr); }
.dok__foto:hover img { transform: scale(1.05); }
.kafle { display: grid; gap: 16px; }
@media (min-width: 760px) { .kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kafel { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--linia); background: var(--tlo-2); text-decoration: none; color: var(--tekst) !important; transition: border-color .3s, transform .4s var(--wyjscie); }
.kafel:hover { border-color: var(--akcent); transform: translateY(-4px); }
.kafel b { font: 700 1.35rem/1.2 var(--szeryf); }
.kafel span { font-size: 15px; color: var(--tekst-2); }
.kafel em { margin-top: auto; font-style: normal; font-weight: 700; color: var(--akcent); }

/* ---------- zapowiedź idei na starcie ---------- */
.zapowiedz { padding: clamp(40px, 7vw, 100px) 0; }
.zapowiedz__karta { position: relative; display: block; overflow: hidden; min-height: clamp(260px, 40vw, 520px); text-decoration: none; }
.zapowiedz__karta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); transition: transform 1.4s var(--kadr), filter .6s; }
.zapowiedz__karta:hover img { transform: scale(1.06); filter: brightness(.75); }
.zapowiedz__karta > span { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 56px); right: 20px; }
.zapowiedz__karta b { display: block; font: 800 clamp(2rem, 1rem + 4vw, 5rem)/.95 var(--szeryf); letter-spacing: -.02em; }

/* ---------- stopka ---------- */
.stopka { padding: 56px 0 34px; background: var(--tlo-stopka); border-top: 1px solid var(--linia); color: var(--tekst-2); }
.stopka a { color: var(--tekst); }
.stopka__siatka { display: grid; gap: 28px; }
@media (min-width: 760px) { .stopka__siatka { grid-template-columns: 1.4fr 1fr 1fr; } }
.stopka__marka { font: 800 1.6rem/1.1 var(--szeryf); color: var(--tekst); }
.stopka h3 { margin-bottom: 10px; font: 700 11px/1.3 var(--bez); letter-spacing: .18em; text-transform: uppercase; color: var(--akcent); }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { margin: 7px 0; }
.stopka li a { text-decoration: none; transition: color .2s; }
.stopka li a:hover { color: var(--akcent); }
.stopka__dol { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--linia); font-size: 13px; color: var(--tekst-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-odslona] .os, .js [data-lista] .os { opacity: 1; transform: none; }
  .os { transform: none; }
}

/* ---------- przełącznik dzień / noc ---------- */
.menu-przycisk { margin-left: auto; }
.motyw-przycisk { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 0; padding: 0; border: 1px solid var(--linia-mocna); background: none; color: var(--tekst); cursor: pointer; transition: border-color .25s ease, color .25s ease, transform .35s var(--wyjscie); }
.motyw-przycisk:hover, .motyw-przycisk:focus-visible { border-color: var(--akcent); color: var(--akcent); }
.motyw-przycisk:active { transform: scale(.94); }
.motyw-przycisk svg { width: 18px; height: 18px; }
.ikona-slonce { display: none; }
:root[data-motyw="noc"] .ikona-slonce { display: block; }
:root[data-motyw="noc"] .ikona-ksiezyc { display: none; }
@media (min-width: 1000px) { .nav { margin-left: auto; } .motyw-przycisk { margin-left: 0; } }
:root:not([data-motyw="noc"]) .tytul-hero em { color: var(--tekst); background: linear-gradient(transparent 66%, var(--zolty) 66% 92%, transparent 92%); padding: 0 .08em; }
:root:not([data-motyw="noc"]) .hero__plotno { opacity: .7; }

/* ---------- idea i zasady: sekcje pół na pół zamiast zapętlonych slajdów (Paweł 30.09: „ciągnie się i zapętla”) ---------- */
.opowiesc__glowa { padding: clamp(36px, 7vw, 96px) 0 clamp(12px, 3vw, 36px); }
.opowiesc__lead { max-width: 44em; margin: 18px 0 0; font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); color: var(--tekst-2); }
.opowiesc { padding: clamp(36px, 6vw, 96px) 0; border-top: 1px solid var(--linia); }
.opowiesc__w { display: grid; gap: clamp(20px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .opowiesc__w { grid-template-columns: 1.1fr 1fr; } .opowiesc--prawa .opowiesc__foto { order: 2; } }
.opowiesc__foto { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tlo-3); }
.opowiesc__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.6s var(--kadr); }
.js .opowiesc__foto { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--wyjscie); }
.js .opowiesc.widoczna .opowiesc__foto { clip-path: inset(0 0 0 0); }
.opowiesc.widoczna .opowiesc__foto img, .opowiesc__foto:hover img { transform: scale(1); }
.opowiesc__nr { font: 700 13px/1 var(--bez); letter-spacing: .14em; color: var(--akcent); font-variant-numeric: tabular-nums; }
.opowiesc h2 { margin: 12px 0 14px; font: 700 clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem)/1.04 var(--szeryf); letter-spacing: -.01em; }
.opowiesc p { max-width: 36em; margin: 0; font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem); color: var(--tekst-2); }
.js .opowiesc__tekst { opacity: 0; transform: translateY(26px); transition: opacity .8s ease .15s, transform 1s var(--wyjscie) .15s; }
.js .opowiesc.widoczna .opowiesc__tekst { opacity: 1; transform: none; }

/* ---------- mozaika zdjęć z emocjami ---------- */
.emocje { padding: clamp(48px, 8vw, 120px) 0; background: var(--tlo-2); border-top: 1px solid var(--linia); }
.emocje h2 { margin: 12px 0 0; font: 700 clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem)/1.04 var(--szeryf); }
.emocje__siatka { columns: 2; column-gap: 10px; margin-top: clamp(22px, 3vw, 40px); }
@media (min-width: 700px) { .emocje__siatka { columns: 3; column-gap: 14px; } }
@media (min-width: 1100px) { .emocje__siatka { columns: 4; } }
.emocje__el { break-inside: avoid; margin: 0 0 10px; overflow: hidden; background: var(--tlo-3); }
@media (min-width: 700px) { .emocje__el { margin-bottom: 14px; } }
.emocje__el img { display: block; width: 100%; height: auto; transition: transform 1s var(--kadr); }
.emocje__el:hover img { transform: scale(1.05); }
.js .emocje__el { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform 1s var(--wyjscie); }
.js .emocje__el.widoczna { opacity: 1; transform: none; }
.emocje__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
@media (prefers-reduced-motion: reduce) { .js .opowiesc__foto, .js .opowiesc__tekst, .js .emocje__el { clip-path: none; opacity: 1; transform: none; transition: none; } }