/* Virtual Magic Studio
   Kolory z planu filmowego: 5600K (niebieskie światło LED, dzień) i 3200K (ciepłe światło żarowe, przyciski wyceny).
   Krój Saira w dwóch szerokościach jak w logo: wąskie, cienkie nagłówki (VIRTUAL) i szerokie etykiety z odstępami (MAGIC STUDIO). */
:root {
  --noc: #06090f;
  --grafit: #0c131f;
  --grafit-2: #131c2c;
  --linia: #243049;
  --stal: #97a3ba;
  --biel: #eef3fa;
  --tekst-ciemne: #c6d0e0;
  --papier: #eef1f6;
  --papier-3: #e3e8f1;   /* pas sekcji Studio: odcina się od jaśniejszych Produkcji */
  --papier-2: #f8f9fc;
  --atrament: #0b1220;
  --atrament-2: #4a566d;
  --k5600: #4aa8ff;
  --k5600-ciemny: #1565c0;
  --k3200: #ffb24a;
  --k3200-jasny: #ffc676;
  --scena: #4aa8ff;
  --szer: 90rem;
  --margines: clamp(1rem, 4vw, 3rem);
  --r: 14px;
  --lead: clamp(1.0625rem, 1.3vw, 1.15rem);   /* akapit wstępu: na telefonie jak tekst, na komputerze nieco większy */
  --naglowek: 4.25rem;
  --f-tekst: 'Instrument Sans', system-ui, 'Segoe UI', sans-serif;
  --f-disp: 'Saira', 'Arial Narrow', system-ui, sans-serif;
  --cien: 0 18px 40px -18px rgba(6, 9, 15, .45), 0 2px 6px rgba(6, 9, 15, .12);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.plynnie { scroll-behavior: smooth; }
body { margin: 0; background: var(--noc); color: var(--biel); font: 400 1.0625rem/1.65 var(--f-tekst); overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--k3200); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: calc(var(--naglowek) + 1rem); }
h1, h2, h3 { margin: 0; font-family: var(--f-disp); font-weight: 600; line-height: 1.1; }
p { margin: 0 0 1em; }
sub { font-size: .7em; }
.kolumna { width: 100%; max-width: var(--szer); margin-inline: auto; padding-inline: var(--margines); }

.pomin { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--k3200); color: var(--atrament); font-weight: 600; }
.pomin:focus { top: 1rem; }

/* ---------- typografia ---------- */
.nadtytul { margin: 0 0 1rem; font: 500 .72rem/1.3 var(--f-disp); font-stretch: 125%; letter-spacing: .32em; text-transform: uppercase; color: var(--k5600); }
.jasna .nadtytul { color: var(--k5600-ciemny); }
h2, .blad h1, .tekst-prawny h1 {
  font-size: clamp(2.7rem, 6.4vw, 5.6rem); font-weight: 250; font-stretch: 55%; line-height: .9;
  text-transform: uppercase; letter-spacing: .005em; text-wrap: balance;
}
h3 { font-size: 1.2rem; font-stretch: 100%; }
.sekcja-gora { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- przyciski ---------- */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.5rem; border: 1px solid transparent; border-radius: 999px;
  font: 600 .8rem/1.2 var(--f-disp); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.przycisk-cieply { background: var(--k3200); color: #1a1206; box-shadow: 0 0 0 0 rgba(255, 178, 74, .0); }
.przycisk-cieply:hover { background: var(--k3200-jasny); box-shadow: 0 0 28px -4px rgba(255, 178, 74, .55); }
.przycisk-linia { border-color: currentColor; background: transparent; }
.przycisk-linia:hover { background: rgba(255, 255, 255, .08); }
.jasna .przycisk-linia:hover { background: rgba(11, 18, 32, .06); }
.przycisk-maly { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: .72rem; }

/* ---------- nagłówek ---------- */
.naglowek { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 1rem; height: var(--naglowek);
  padding-inline: max(var(--margines), (100% - var(--szer)) / 2 + var(--margines));
  background: rgba(6, 9, 15, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .07); transition: background .35s, border-color .35s; }
.naglowek-hero:not(.przewiniete):not(.menu-otwarte) { background: linear-gradient(rgba(6, 9, 15, .7), rgba(6, 9, 15, 0)); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.logo { display: flex; align-items: center; gap: .75rem; flex: none; text-decoration: none; }
.logo img { display: block; width: 44px; height: 44px; border-radius: 6px; }
.logo-napis { font: 400 .72rem/1.15 var(--f-disp); font-stretch: 125%; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.logo-napis b { display: block; font-weight: 500; color: var(--k5600); }
.menu { margin-left: auto; }
.menu ul { display: flex; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.menu a { display: block; padding: .55rem .45rem; font: 500 .74rem/1.2 var(--f-disp); font-stretch: 112%; letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; text-decoration: none; color: var(--tekst-ciemne); border-radius: 999px; }
.menu a:hover, .menu a[aria-current] { color: var(--biel); background: rgba(255, 255, 255, .08); }
.naglowek-akcje { display: flex; align-items: center; gap: .75rem; }
.jezyk { font: 600 .74rem/1 var(--f-disp); font-stretch: 112%; letter-spacing: .14em; text-decoration: none; padding: .6rem .5rem; color: var(--stal); }
.jezyk:hover { color: var(--biel); }
.naglowek-tel { display: flex; align-items: center; gap: .45rem; text-decoration: none; font: 500 .85rem/1 var(--f-disp); letter-spacing: .04em; color: var(--tekst-ciemne); white-space: nowrap; }
.naglowek-tel:hover { color: var(--biel); }
.menu-przycisk { display: none; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .4rem; border: 0; background: none; cursor: pointer; font: 600 .72rem/1 var(--f-disp); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; }
.menu-kreski, .menu-kreski::before, .menu-kreski::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .25s; }
.menu-kreski { position: relative; }
.menu-kreski::before, .menu-kreski::after { content: ''; position: absolute; left: 0; }
.menu-kreski::before { top: -7px; }
.menu-kreski::after { top: 7px; }
.menu-otwarte .menu-kreski { background: transparent; }
.menu-otwarte .menu-kreski::before { transform: translateY(7px) rotate(45deg); }
.menu-otwarte .menu-kreski::after { transform: translateY(-7px) rotate(-45deg); }

/* pełne menu w jednym rzędzie: numer telefonu od 92rem, menu od 83rem (niżej przycisk „Menu”) */
@media (max-width: 92rem) { .naglowek-tel span { display: none; } }
@media (max-width: 83rem) {
  .naglowek-akcje { margin-left: auto; }
  .menu-przycisk { display: inline-flex; }
  .menu { position: fixed; inset: var(--naglowek) 0 auto; max-height: calc(100dvh - var(--naglowek)); overflow-y: auto; background: rgba(6, 9, 15, .97); border-bottom: 1px solid var(--linia);
    padding: 1rem var(--margines) 2rem; transform: translateY(-.5rem); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .menu-otwarte .menu { transform: none; opacity: 1; visibility: visible; transition: opacity .25s, transform .25s; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a { padding: 1rem .25rem; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--linia); }
  .menu a:hover { background: none; }
}
@media (max-width: 40rem) {
  .logo-napis { display: none; }
  .naglowek { gap: .75rem; }
  .naglowek-akcje { gap: .35rem; margin-left: auto; }
  .naglowek-akcje .przycisk-maly { padding-inline: .8rem; letter-spacing: .08em; }
  .menu-etykieta { display: none; }
}

/* ---------- hero: wirtualne studio LED ---------- */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: max(38rem, 100svh); overflow: hidden; background: var(--noc); }
.hero-scena { position: absolute; inset: 0; z-index: -1; }
.hero-plakat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: brightness(.62) saturate(1.05); }
.studio-led { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.studio-led.gotowe { opacity: 1; }
.hero-scena::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--noc) 0%, rgba(6, 9, 15, .82) 16%, rgba(6, 9, 15, .2) 46%, transparent 62%), linear-gradient(100deg, rgba(6, 9, 15, .62) 0%, rgba(6, 9, 15, .15) 48%, transparent 70%); }
/* znaczniki kadru jak w wizjerze kamery */
.hero-kadr { position: absolute; inset: calc(var(--naglowek) + 1.25rem) var(--margines) 1.25rem; pointer-events: none; opacity: .45; }
.hero-kadr span { position: absolute; width: 26px; height: 26px; border: 0 solid var(--biel); }
.hero-kadr span:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.hero-kadr span:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.hero-kadr span:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.hero-kadr span:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.hero-tresc { align-self: end; width: 100%; max-width: var(--szer); margin-inline: auto; padding: calc(var(--naglowek) + 3rem) var(--margines) clamp(2rem, 5vh, 3.5rem); }
.hero-tresc > * { max-width: 46rem; }
.hero h1 { margin-bottom: 1.25rem; font: 400 clamp(.9rem, 1.5vw, 1.2rem)/1.4 var(--f-disp); font-stretch: 125%; letter-spacing: .3em; text-transform: uppercase; color: var(--tekst-ciemne); }
.hero h1 br { display: none; }
.hero h1 span { display: block; margin-top: .3em; font-size: clamp(3.3rem, 9.4vw, 9rem); font-weight: 200; font-stretch: 52%; line-height: .86; letter-spacing: 0; color: var(--biel); text-shadow: 0 0 60px color-mix(in srgb, var(--scena) 45%, transparent); }
.hero-lead { max-width: 36rem; font-size: var(--lead); color: var(--tekst-ciemne); }
.hero-akcje { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }
/* telefon: wycena na całą szerokość, pod nią „Zobacz studio” i „Zobacz zaplecze” obok siebie */
@media (max-width: 40rem) { .hero-akcje .przycisk-cieply { flex: 1 1 100%; } .hero-akcje .przycisk-linia { flex: 1 1 0; padding-inline: .6rem; font-size: .7rem; letter-spacing: .1em; } }

.konsola { width: 100%; max-width: var(--szer); margin: 0 auto; padding: 0 var(--margines) 2rem; }
.konsola-tytul { margin: 0 0 .6rem; font: 500 .68rem/1.3 var(--f-disp); font-stretch: 125%; letter-spacing: .3em; text-transform: uppercase; color: var(--stal); }
.presety { display: flex; gap: .6rem; margin: 0; padding: 0 0 .4rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.presety li { flex: 0 0 8.5rem; scroll-snap-align: start; }
.preset { display: grid; gap: .35rem; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--stal); }
.preset img { display: block; width: 100%; aspect-ratio: 3.2; object-fit: cover; border-radius: 6px; outline: 1px solid rgba(255, 255, 255, .14); outline-offset: 0; transition: outline-color .2s, filter .2s; filter: saturate(.8) brightness(.85); }
.preset span { font: 500 .66rem/1.2 var(--f-disp); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
.preset:hover img { filter: none; }
.preset[aria-pressed="true"] { color: var(--biel); }
.preset[aria-pressed="true"] img { filter: none; outline: 2px solid var(--scena); box-shadow: 0 0 22px -4px var(--scena); }
.konsola-dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; margin-top: .75rem; }
.przelacznik { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font: 500 .7rem/1 var(--f-disp); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-ciemne); }
.przelacznik input { appearance: none; -webkit-appearance: none; position: relative; width: 2.4rem; height: 1.35rem; margin: 0; border-radius: 999px; background: var(--linia); cursor: pointer; transition: background .2s; }
.przelacznik input::after { content: ''; position: absolute; left: 3px; top: 3px; width: calc(1.35rem - 6px); aspect-ratio: 1; border-radius: 50%; background: var(--biel); transition: transform .2s; }
.przelacznik input:checked { background: var(--scena); }
.przelacznik input:checked::after { transform: translateX(1.05rem); }
.odczyt { margin: 0; font: 400 .74rem/1 var(--f-disp); font-stretch: 70%; letter-spacing: .12em; text-transform: uppercase; color: var(--stal); font-variant-numeric: tabular-nums; }
.odczyt span { color: var(--biel); }
.odczyt::before { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; vertical-align: .05em; }
.konsola-podpowiedz { margin: .6rem 0 0; font-size: .82rem; color: var(--stal); }
@media (hover: none) { .konsola-podpowiedz { display: none; } }
@media (min-width: 75rem) {
  .hero { grid-template-rows: 1fr; }
  .hero-tresc { padding-bottom: clamp(3rem, 8vh, 5.5rem); }
  .konsola { position: absolute; right: max(var(--margines), (100% - var(--szer)) / 2 + var(--margines)); bottom: clamp(3rem, 8vh, 5.5rem); width: 25rem; padding: 1.1rem 1.2rem 1rem;
    background: rgba(8, 12, 20, .58); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r); }
  .presety { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; padding: 0; }
  .presety li:first-child { grid-column: span 3; }
  .presety li:first-child .preset img { aspect-ratio: 4.2; }
  .hero-tresc > * { max-width: calc(100% - 28rem); }
}

/* ---------- dane studia ---------- */
.dane { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0 max(var(--margines), (100% - var(--szer)) / 2 + var(--margines)); list-style: none; background: var(--noc);
  border-top: 1px solid color-mix(in srgb, var(--scena) 55%, transparent); box-shadow: 0 -24px 60px -30px var(--scena); transition: border-color 1s, box-shadow 1s; }
.dane li { display: grid; gap: .35rem; align-content: start; padding: 1.5rem 1rem 1.6rem 0; border-bottom: 1px solid var(--linia); }
.dane strong { font: 200 clamp(2.3rem, 4.2vw, 3.4rem)/.9 var(--f-disp); font-stretch: 55%; letter-spacing: .01em; }
.dane span { font: 600 .68rem/1.35 var(--f-disp); font-stretch: 118%; letter-spacing: .18em; text-transform: uppercase; color: var(--stal); }
@media (min-width: 40rem) { .dane { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) {
  .dane { grid-template-columns: repeat(6, 1fr); }
  .dane li { padding: 2rem 1.25rem 2.2rem; border-bottom: 0; border-left: 1px solid var(--linia); }
  .dane li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- sekcje ---------- */
.sekcja { --pad-sekcja: clamp(2.75rem, 5vw, 4.5rem); padding-block: var(--pad-sekcja); }
.jasna { background: var(--papier); color: var(--atrament); color-scheme: light; }
.jasna p { color: #1d2638; }
.ciemna { background: var(--grafit); }
.ciemna + .ciemna { padding-top: 0; }
.ciemna p, .kino p, .wycena p { color: var(--tekst-ciemne); }
.kino { background: var(--noc); }
.lb { display: block; overflow: hidden; border-radius: var(--r); background: var(--grafit-2); }
.lb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lb:hover img { transform: scale(1.035); }
.znaczniki { margin: 0; padding: 0; list-style: none; }
.znaczniki li { position: relative; padding: .45rem 0 .45rem 1.4rem; }
.znaczniki li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 7px; height: 7px; border-radius: 1.5px; background: var(--k5600); box-shadow: 0 0 10px var(--k5600); }

/* studio i zastosowanie */
.studio-uklad { display: grid; gap: 2.5rem; align-items: center; }
.studio-tekst p { max-width: 38rem; }
.mozaika { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mozaika .lb { aspect-ratio: 4 / 3; box-shadow: var(--cien); }
.studio-pasek { margin-top: calc(-1 * var(--pad-sekcja)); padding-block: var(--pad-sekcja) clamp(2rem, 3.5vw, 3rem); background: var(--papier-3); }
.studio-film { grid-column: span 2; aspect-ratio: 1280 / 558; overflow: hidden; border-radius: var(--r); background: var(--grafit-2); box-shadow: var(--cien); }
.studio-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64rem) { .studio-uklad { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.zastosowanie { margin-top: clamp(3rem, 5vw, 4.5rem); }
/* dwie równe kolumny: tekst płynie z lewej do prawej, ostatnie zdanie pogrubione na całą szerokość */
.zastosowanie-tekst { max-width: 72rem; margin-bottom: 2.5rem; }
@media (min-width: 64rem) { .zastosowanie-tekst { columns: 2; column-gap: 2.5rem; orphans: 1; widows: 1; } .zastosowanie-tekst p { margin-bottom: .4em; } .zastosowanie-tekst p:last-child { column-span: all; margin: .5rem 0 0; font-weight: 600; } }
.kafle { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.kafel { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--noc); color: var(--biel); text-decoration: none; box-shadow: var(--cien); }
.kafel img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.kafel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 9, 15, .88), rgba(6, 9, 15, 0) 58%); }
.kafel span { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; font: 600 .8rem/1.35 var(--f-disp); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; }
.kafel span::after { content: ''; display: block; width: 1.8rem; height: 2px; margin-top: .6rem; background: var(--k5600); box-shadow: 0 0 10px var(--k5600); transition: width .35s; }
.kafel:hover img { transform: scale(1.05); opacity: 1; }
.kafel:hover span::after { width: 4rem; }
@media (min-width: 40rem) { .kafle { grid-template-columns: 1fr 1fr; } .kafle li:last-child { grid-column: span 2; } .kafle li:last-child .kafel { aspect-ratio: 8 / 3; } }
@media (min-width: 64rem) { .kafle { grid-template-columns: repeat(4, 1fr); } .kafle li:last-child .kafel { aspect-ratio: auto; height: 100%; } }

/* tła AI */
.tla-uklad { display: grid; gap: 1.25rem 4rem; margin-bottom: 2.5rem; }
.tla-uklad .sekcja-gora, .tla-uklad > p, .tla-lokalnie p { margin: 0; }
@media (min-width: 64rem) {
  .tla-uklad { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .tla-uklad > :nth-child(-n+2) { align-self: end; }
}
.tla-lokalnie h3 { margin: .5rem 0 .5rem; font: 500 .72rem/1.3 var(--f-disp); font-stretch: 125%; letter-spacing: .32em; text-transform: uppercase; color: var(--k5600); }
.panoramy { display: grid; grid-template-columns: 1fr; gap: .75rem; max-width: var(--szer); margin: 0 auto; padding: 0 var(--margines); list-style: none; }
.panorama { position: relative; display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 3.2; text-decoration: none; background: var(--noc); }
.panorama img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.panorama-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.panorama.gra .panorama-film { opacity: 1; }
/* znaczek odtwarzania (ozdoba, bez reakcji na kursor): jak dawna etykieta z nazwą tła, sam niebieski trójkącik
   (FE0E wymusza znak tekstowy, a nie kolorowe emoji) */
.panorama-play { position: absolute; left: 1rem; bottom: .9rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(6, 9, 15, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 500 .68rem/1.2 var(--f-disp); }
.panorama-play::before { content: '\25B6\FE0E'; font-size: .6rem; color: var(--k5600); }
.panorama:hover img { transform: scale(1.04); }
@media (min-width: 48rem) { .panoramy { grid-template-columns: 1fr 1fr; } .panoramy li:first-child { grid-column: span 2; } .panoramy li:first-child .panorama { aspect-ratio: 4.6; } }

/* technologia */
.tech-uklad { display: grid; gap: 2.5rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.tech-tekst p { max-width: 40rem; }
.tech-zdjecia { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-content: start; }
.tech-zdjecia .pokoj-male { aspect-ratio: 4 / 3; }
.tech-zdjecia .pokoj-duze { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (min-width: 64rem) { .tech-uklad { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.rider-tytul { margin-bottom: 1rem; font: 500 .72rem/1.3 var(--f-disp); font-stretch: 125%; letter-spacing: .32em; text-transform: uppercase; color: var(--k5600); }
.rider { display: grid; gap: 0 3rem; margin: 0; }
.rider div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--linia); }
.rider dt { padding-top: .2rem; font: 600 .68rem/1.35 var(--f-disp); font-stretch: 118%; letter-spacing: .18em; text-transform: uppercase; color: var(--k5600); }
.rider dd { margin: 0; color: var(--tekst-ciemne); }
@media (min-width: 64rem) { .rider { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .rider div { grid-template-columns: 1fr; gap: .25rem; } }

/* zaplecze: rzut z punktami */
#zaplecze { padding-top: clamp(2rem, 3.5vw, 3rem); }
.zaplecze-gora { display: grid; gap: 1.25rem 4rem; margin-bottom: 2rem; }
.zaplecze-gora .sekcja-gora { margin: 0; }
.zaplecze-listy { display: grid; gap: 0 3rem; }
@media (min-width: 48rem) { .zaplecze-listy { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .zaplecze-gora { grid-template-columns: 1fr 1.1fr; align-items: end; } }
@media (min-width: 68rem) and (max-width: 89.99rem) { .zaplecze-gora { grid-template-columns: auto 1fr; column-gap: clamp(2rem, 4vw, 4rem); } .zaplecze-listy { gap: 0 clamp(1.25rem, 2.5vw, 2rem); } }
.plan-uklad { display: grid; gap: 1.5rem; }
/* komputer: wysokość wyznacza rzut; prawa kolumna ma jego wysokość: napisy u góry, trzy zdjęcia wypełniają resztę do dolnej krawędzi rzutu */
@media (min-width: 64rem) {
  .plan-uklad { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
  .pokoje { display: flex; flex-direction: column; height: 0; min-height: 100%; }
  .plan-uklad .pokoj-zdjecia { flex: 1; min-height: 0; grid-template-rows: 1.9fr 1fr; }
  .plan-uklad :is(.pokoj-duze, .pokoj-male) { aspect-ratio: auto; min-height: 0; }
}
.rzut { position: relative; border-radius: calc(var(--r) + 4px); overflow: hidden; background: #070a12; box-shadow: var(--cien); }
.rzut > img { display: block; width: 100%; height: auto; }
.punkty { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.punkty li { position: absolute; transform: translate(-50%, -50%); }
.punkt { position: relative; display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(74, 168, 255, .25); border: 2px solid var(--biel); box-shadow: 0 0 0 4px rgba(6, 9, 15, .35), 0 0 18px var(--k5600); color: var(--biel); text-decoration: none; }
.punkt::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--k5600); }
.punkt::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--k5600); animation: puls 2.4s ease-out infinite; }
.punkt[aria-current="true"] { border-color: var(--k3200); box-shadow: 0 0 0 4px rgba(6, 9, 15, .35), 0 0 22px var(--k3200); }
.punkt[aria-current="true"]::before { background: var(--k3200); }
.punkt[aria-current="true"]::after { border-color: var(--k3200); }
.punkt-nazwa { position: absolute; left: 50%; bottom: calc(100% + .5rem); transform: translateX(-50%); padding: .35rem .65rem; border-radius: 6px; background: rgba(6, 9, 15, .9); white-space: nowrap;
  font: 600 .64rem/1.2 var(--f-disp); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .2s; }
.punkt:hover .punkt-nazwa, .punkt:focus-visible .punkt-nazwa, .punkt[aria-current="true"] .punkt-nazwa { opacity: 1; }
@keyframes puls { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
@media (max-width: 40rem) { .punkt { width: 1.2rem; height: 1.2rem; } .punkt-nazwa { display: none; } }
.pokoje-podpowiedz { margin: 0 0 1rem; font-size: .82rem; color: var(--atrament-2) !important; }
.pokoj { margin-bottom: 2rem; }
/* komputer: rzut z punktami i jedno pomieszczenie obok; telefon i tablet: rzut jako ilustracja, pod nim wszystkie pomieszczenia */
@media (min-width: 64rem) {
  .js .pokoj { display: none; margin: 0; }
  .js .pokoj.aktywny { display: flex; flex-direction: column; flex: 1; min-height: 0; animation: wejscie .45s ease both; }
}
@media (max-width: 63.99rem) {
  .punkty, .pokoje-podpowiedz, .pokoj-pusty { display: none; }
  .pokoj { margin-bottom: 2.25rem; }
}
@keyframes wejscie { from { opacity: 0; transform: translateY(8px); } }
.pokoj h3 { margin-bottom: 1rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 300; font-stretch: 62%; text-transform: uppercase; line-height: 1; }
.pokoj h3 span { display: block; margin-top: .45rem; font: 600 .68rem/1.35 var(--f-disp); font-stretch: 118%; letter-spacing: .18em; color: var(--atrament-2); }
/* podgląd pomieszczenia: duże zdjęcie i dwa małe; kliknięte małe zamienia się miejscami z dużym */
.pokoj-zdjecia { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pokoj-duze { grid-column: span 2; }
.pokoj-duze, .pokoj-male { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r); background: var(--grafit-2); box-shadow: var(--cien); }
:is(.pokoj-zdjecia, .eventy-zdjecia, .tech-zdjecia) img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pokoj-male { padding: 0; border: 0; cursor: pointer; }
.pokoj-male img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.pokoj-male:hover img { transform: scale(1.04); }
.pokoj-duze img.zmiana { animation: zmiana .45s ease both; }
@keyframes zmiana { from { opacity: .25; } }
.pokoj-brak { color: var(--atrament-2) !important; }
.hotel { display: grid; gap: 1.5rem 3rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 2rem; border-top: 1px solid #d3d9e4; }
.hotel-tekst { display: grid; gap: .75rem; align-content: start; }
.hotel-zdjecia { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.hotel-zdjecia img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); box-shadow: var(--cien); }
.hotel h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 300; font-stretch: 62%; text-transform: uppercase; line-height: 1; }
.hotel a, .link-www { font-weight: 600; color: var(--k5600-ciemny); white-space: nowrap; }
.hotel a { justify-self: start; }
@media (min-width: 64rem) { .hotel { grid-template-columns: 1fr 1.25fr; align-items: center; } }

/* realizacje: kadr i plan zdjęciowy */
.realizacje-gora { display: grid; gap: 1rem 3rem; margin-bottom: 2rem; }
.tasma-okno { position: relative; }
@media (min-width: 64rem) { .realizacje-gora .sekcja-gora { margin: 0; } }
/* taśma ma szerokość kolumny strony, więc z lewej i prawej zostaje ten sam margines; w kadrze zawsze całe karty (1 na telefonie, 2 na komputerze) */
/* taśma: jedna karta na środku, sąsiednie widać po bokach (wygaszone przy krawędziach), pod spodem pasek przewijania */
.tasma { --karta: 74vw; display: flex; gap: 1.25rem; width: 100%; margin: 0 auto; padding: .5rem calc((100% - var(--karta)) / 2) .5rem; list-style: none; overflow-x: auto;
  overscroll-behavior-x: contain; cursor: grab; }   /* bez przyciągania: taśmę przesuwa się swobodnie, a strzałki i kliknięcie w sąsiedni kadr ją wyśrodkowują */
.tasma.ciagniecie { cursor: grabbing; user-select: none; }
.tasma li { flex: 0 0 var(--karta); }
@media (min-width: 64rem) { .tasma { --karta: min(66vw, 56rem); } }
.tasma { scrollbar-width: none; }
.tasma::-webkit-scrollbar { display: none; }
.tasma-strzalki { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }
.tasma-strzalki button { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0 0 .15rem; border: 1px solid var(--linia); border-radius: 50%; background: rgba(6, 9, 15, .72); cursor: pointer; font: 1.6rem/1 var(--f-tekst); color: var(--biel); }
.tasma-strzalki button:hover { border-color: var(--k5600); }
/* wygaszenie sąsiednich kart przy krawędziach (nad paskiem przewijania) */
.tasma-okno::before, .tasma-okno::after { content: ''; position: absolute; top: 0; bottom: 4rem;   /* dół taśmy: nad strzałkami (1rem odstępu + 3rem przycisk) */ width: clamp(3rem, 13vw, 13rem); z-index: 1; pointer-events: none; }
.tasma-okno::before { left: 0; background: linear-gradient(to right, var(--noc), rgba(6, 9, 15, 0)); }
.tasma-okno::after { right: 0; background: linear-gradient(to left, var(--noc), rgba(6, 9, 15, 0)); }
.filmy { margin-top: clamp(2rem, 4vw, 3rem); }
.filmy-info { margin: .75rem auto 0; font-size: .82rem; color: var(--stal); }
.kp { margin: 0; }
.kp-obraz { position: relative; aspect-ratio: 2.35; overflow: hidden; border-radius: var(--r); background: var(--grafit); }
.kp-obraz img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.kp-obraz:focus-visible { outline-offset: 4px; }
.kp-plan { clip-path: inset(0 0 0 100%); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1); }
.kp.plan .kp-plan { clip-path: inset(0 0 0 0); }
/* najechanie kursorem obsługuje skrypt (czeka na wczytanie zdjęcia planu); klawiatura: fokus na karcie */
.kp-obraz:focus-visible .kp-plan { clip-path: inset(0 0 0 0); }
.kp-obraz:focus-visible .kp-etykieta-kadr { opacity: 0; }
.kp-obraz:focus-visible .kp-etykieta-plan { opacity: 1; }
@media (hover: none) { .kp:not(.kp-sam) .kp-obraz { cursor: pointer; } }
.kp-etykieta { position: absolute; left: .9rem; top: .9rem; z-index: 2; padding: .3rem .6rem; border-radius: 4px; background: rgba(6, 9, 15, .72); pointer-events: none;
  font: 600 .64rem/1.2 var(--f-disp); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; transition: opacity .3s; }
.kp-etykieta::before { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: var(--k5600); vertical-align: .02em; }
.kp-etykieta-plan { opacity: 0; }
.kp-sam .kp-etykieta { display: none; }
.kp-etykieta-plan::before { background: var(--k3200); }
.kp.plan .kp-etykieta-kadr { opacity: 0; }
.kp.plan .kp-etykieta-plan { opacity: 1; }
.kp figcaption { padding-top: .75rem; }
.kp-nazwa { font: 600 .8rem/1.3 var(--f-disp); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
.realizacje-dol { margin-top: 1rem; }
.film-uklad { margin-top: clamp(2.5rem, 4.5vw, 4rem); }
.film { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--r) + 4px); background: #000; color: var(--biel); text-decoration: none; }
.film img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .3s, transform .8s; }
.film::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent 45%); }
.film:hover img { opacity: 1; transform: scale(1.02); }
.film-play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: clamp(4.5rem, 9vw, 6.5rem); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(6, 9, 15, .55); border: 1.5px solid rgba(255, 255, 255, .8); backdrop-filter: blur(6px); transition: background .25s; }
.film:hover .film-play { background: var(--k3200); color: #1a1206; border-color: var(--k3200); }
.film-tytul { position: absolute; left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 2.5vw, 1.6rem); z-index: 1; font: 250 clamp(1.3rem, 2.4vw, 2rem)/1 var(--f-disp); font-stretch: 55%; text-transform: uppercase; }
.film-info { position: absolute; left: clamp(1rem, 3vw, 2rem); right: 1rem; bottom: clamp(.8rem, 2vw, 1.3rem); z-index: 1; font-size: .82rem; color: var(--tekst-ciemne); }
.film iframe, .film-ramka iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-ramka { position: relative; aspect-ratio: 16 / 9;   /* kadr odtwarzacza YouTube */ overflow: hidden; border-radius: calc(var(--r) + 4px); background: #000; }

/* eventy */
.eventy-uklad { display: grid; gap: 2.5rem; align-items: center; }
.eventy-tekst p { max-width: 36rem; }
.eventy-zdjecia { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.eventy-zdjecia .pokoj-male { aspect-ratio: 4 / 3; }
.eventy-zdjecia .pokoj-duze { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 64rem) { .eventy-uklad { grid-template-columns: 5fr 7fr; gap: 4rem; } .eventy-zdjecia { grid-template-columns: repeat(4, 1fr); } }

/* zalety */
.zalety { display: grid; gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; counter-reset: z; }
.zalety li { position: relative; padding: 1.05rem 0 1.05rem 1.6rem; border-top: 1px solid var(--linia); color: var(--biel); }
.zalety li::before { content: ''; position: absolute; left: 0; top: 1.6rem; width: 8px; height: 8px; border-radius: 1.5px; background: var(--scena); box-shadow: 0 0 12px var(--scena); transition: background 1s, box-shadow 1s; }
@media (min-width: 48rem) { .zalety { grid-template-columns: 1fr 1fr; } }
@media (min-width: 75rem) { .zalety { grid-template-columns: repeat(3, 1fr); } }

/* grupa */
.grupa-lead { max-width: 40rem; font-size: var(--lead); }
.grupa { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.grupa-karta { display: grid; height: 100%; overflow: hidden; border-radius: var(--r); background: #fff; box-shadow: var(--cien); text-decoration: none; color: var(--atrament); }
.grupa-karta > img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; transition: transform .7s; }
.grupa-karta:hover > img { transform: scale(1.03); }
.grupa-tresc { display: grid; gap: .9rem; padding: 1.4rem 1.5rem 1.6rem; color: #1d2638; }
/* logotyp firmy z grupy: na telefonie nad opisem, szerzej obok. Zaokrąglenie 5% jak w oryginale logo VM,
   większe ścinało narożniki białej ramki (zaczyna się ok. 6,6% od krawędzi); Decor ma kwadratowe rogi, więc dostaje to samo */
.grupa-logo { width: 3.4rem; height: 3.4rem; border-radius: 5%; }
@media (min-width: 40rem) { .grupa-tresc { grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; } }
@media (min-width: 64rem) { .grupa-logo { width: 5rem; height: 5rem; } }
.grupa-tresc strong { color: var(--k5600-ciemny); }
@media (min-width: 64rem) { .grupa { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* pytania */
.faq-sekcja { background: var(--papier-2); }
.faq-uklad { display: grid; gap: 2rem 4rem; }
@media (min-width: 64rem) { .faq-uklad { grid-template-columns: 1fr 1.6fr; align-items: start; } .faq-uklad .sekcja-gora { position: sticky; top: calc(var(--naglowek) + 2rem); } }
.faq details { border-bottom: 1px solid #d3d9e4; }
.faq summary { position: relative; padding: 1.2rem 3rem 1.2rem 0; cursor: pointer; list-style: none; font: 600 1.12rem/1.35 var(--f-tekst); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font: 300 2rem/1 var(--f-disp); color: var(--k5600-ciemny); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { max-width: 44rem; margin: 0 0 1.4rem; }

/* wycena */
.wycena { background: radial-gradient(70rem 36rem at 88% -10%, rgba(255, 178, 74, .17), transparent 62%), radial-gradient(50rem 30rem at -10% 110%, rgba(74, 168, 255, .1), transparent 60%), var(--noc); }
.wycena-uklad { display: grid; gap: 2.5rem 5rem; }
@media (min-width: 64rem) { .wycena-uklad { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.wycena .nadtytul { color: var(--k3200); }
.wycena-lead { font-size: var(--lead); max-width: 34rem; }
.wycena-kontakt a { font: 300 1.5rem/1.2 var(--f-disp); font-stretch: 80%; letter-spacing: .03em; color: var(--biel); text-decoration: none; white-space: nowrap; }
.formularz { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgba(255, 255, 255, .1); border-radius: calc(var(--r) + 4px); background: rgba(12, 19, 31, .72); }
.rodzaje { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; border: 0; }
.rodzaje legend, .pole > span { margin-bottom: .55rem; padding: 0; font: 600 .68rem/1.35 var(--f-disp); font-stretch: 118%; letter-spacing: .18em; text-transform: uppercase; color: var(--stal); }
.rodzaje label { position: relative; }
.rodzaje input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rodzaje span { display: inline-block; padding: .5rem .95rem; border: 1px solid var(--linia); border-radius: 999px; font-size: .88rem; color: var(--tekst-ciemne); transition: background .15s, border-color .15s, color .15s; }
.rodzaje input:checked + span { background: var(--k3200); border-color: var(--k3200); color: #1a1206; font-weight: 600; }
.rodzaje input:focus-visible + span { outline: 3px solid var(--k3200); outline-offset: 2px; }
.pola { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .pola { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .pola-kontakt { grid-template-columns: 1.1fr 1fr; } .pola-projekt { grid-template-columns: .85fr 1.15fr .6fr 1fr; } }
.pole { display: grid; align-content: end; }   /* dwuliniowy podpis nie obniża pola względem sąsiednich */
.pole input, .pole textarea { width: 100%; padding: .75rem .9rem; border: 1px solid var(--linia); border-radius: 10px; background: var(--noc); color: var(--biel); }
.pole textarea { resize: vertical; min-height: 7rem; }
.pole input:focus, .pole textarea:focus { outline: none; border-color: var(--k3200); box-shadow: 0 0 0 3px rgba(255, 178, 74, .25); }
::placeholder { color: #66728a; }
.formularz .przycisk { justify-self: start; }
.formularz .przycisk:disabled { opacity: .6; cursor: wait; }
.pole-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formularz { position: relative; }
.formularz-stan { margin: 0; font-weight: 600; color: var(--tekst-ciemne) !important; }
.formularz-stan:empty { display: none; }
.formularz-stan.ok { color: #7ee2a8 !important; }
.formularz-stan.blad { color: #ff9d8a !important; }
.formularz-info { margin: 0; font-size: .82rem; color: var(--stal) !important; }
.formularz-info a { color: var(--tekst-ciemne); }

/* ---------- stopka ---------- */
.stopka { padding: clamp(2.75rem, 5vw, 4.5rem) 0 1.5rem; background: var(--noc); border-top: 1px solid var(--linia); color: var(--tekst-ciemne); }
.stopka-siatka { display: grid; gap: 2.5rem 5rem; max-width: var(--szer); margin: 0 auto; padding: 0 var(--margines); }
@media (min-width: 64rem) { .stopka-siatka { grid-template-columns: 1.2fr 1fr; } }
.stopka-h2 { margin-bottom: 1.5rem; color: var(--biel); }
.stopka-duze { font: 300 clamp(1.5rem, 3vw, 2.2rem)/1.3 var(--f-disp); font-stretch: 78%; letter-spacing: .02em; }
.stopka-duze a { color: var(--biel); text-decoration: none; overflow-wrap: anywhere; }
.stopka-duze a:hover { color: var(--k3200); }
.stopka address { margin-bottom: 1.25rem; font-style: normal; }
.stopka address strong { font-family: var(--f-disp); font-stretch: 118%; letter-spacing: .14em; color: var(--biel); }
.stopka-lokalizacja { align-self: end; }
.stopka-spolka span { font: 600 .68rem/1.35 var(--f-disp); font-stretch: 118%; letter-spacing: .18em; text-transform: uppercase; color: var(--stal); }
.stopka-social { display: flex; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.stopka-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--linia); border-radius: 50%; color: var(--biel); }
.stopka-social a:hover { border-color: var(--k5600); color: var(--k5600); }
.partnerzy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; max-width: var(--szer); margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding: 1.75rem var(--margines) 0; border-top: 1px solid var(--linia); }
.partnerzy > p { margin: 0; font: 600 .68rem/1.35 var(--f-disp); font-stretch: 118%; letter-spacing: .18em; text-transform: uppercase; color: var(--stal); }
.partnerzy ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.partner { display: block; }
.partner img { display: block; height: 26px; width: auto; mix-blend-mode: lighten; filter: grayscale(1) brightness(1.25); opacity: .75; transition: filter .25s, opacity .25s; }
.partner-glowny img { height: 44px; filter: brightness(1.3); opacity: .9; }
.partner:hover img { filter: none; opacity: 1; }
.stopka-prawa { max-width: var(--szer); margin: 2.5rem auto 0; padding: 0 var(--margines); font-size: .82rem; color: var(--stal); }
.stopka-prawa a { color: var(--tekst-ciemne); }

/* ---------- pasek prywatności ---------- */
.prywatnosc { position: fixed; left: 50%; bottom: 1rem; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; width: min(40rem, calc(100% - 2rem)); padding: .9rem 1.1rem;
  transform: translateX(-50%); border: 1px solid var(--linia); border-radius: var(--r); background: rgba(12, 19, 31, .96); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); font-size: .88rem; }
.prywatnosc[hidden] { display: none; }
.prywatnosc p { flex: 1 1 18rem; margin: 0; color: var(--tekst-ciemne); }
.prywatnosc .przycisk { background: var(--biel); color: var(--atrament); }

/* ---------- powiększone zdjęcie ---------- */
.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3, 5, 9, .96); color: var(--biel); }
.lightbox::backdrop { background: rgba(3, 5, 9, .9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 6rem); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lb-podpis { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; margin: 0; text-align: center; font-size: .88rem; color: var(--tekst-ciemne); }
.lightbox button { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(6, 9, 15, .7); cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--biel); }
.lightbox button:hover { border-color: var(--k3200); }
.lb-zamknij { right: 1rem; top: 1rem; }
.lb-poprz { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-nast { right: 1rem; top: 50%; transform: translateY(-50%); }

/* kafle i tła delikatnie pojawiają się przy przewijaniu (tylko tam, gdzie przeglądarka to umie) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kafle li, .panoramy li { animation: pojaw linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes pojaw { from { opacity: 0; transform: translateY(1.2rem); } }
.s-galeria main, .s-polityka main, .s-404 main { padding-top: var(--naglowek); }

/* ---------- teksty prawne i 404 ---------- */
.tekst-prawny { max-width: 50rem; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: 5rem; }
.tekst-prawny h1 { margin-bottom: 2rem; }
.tekst-prawny h2 { margin: 2.2rem 0 .8rem; font-size: 1.3rem; font-weight: 600; font-stretch: 100%; text-transform: none; line-height: 1.2; }
.tekst-prawny p { color: var(--tekst-ciemne); }
.blad { padding-block: clamp(5rem, 14vw, 10rem); }
.blad h1 { margin-bottom: 1.5rem; }
.blad p:not(.nadtytul) { color: var(--tekst-ciemne); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.plynnie { scroll-behavior: auto; }
}