/* waveframe.pl, wersja v2 (08.10.2026): karty na czerni jak waveframe.framer.website,
   Atipla ND wszędzie, wyższy kontrast, przyciski niebieski LED. Kolory i promienie z Figmy
   (kolekcja waveframe, tryb noc; zmienne przycisk/led-*, tekst/drugi-jasny). */
@font-face{font-family:'Atipla ND';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/fonty/atipla-vf.woff2') format('woff2')}

:root{
  --tlo:#0D0D0D; --karta:#151515; --karta2:#1B1B1B;
  --tekst:#FFFFFF; --tekst2:#BDC1C5; --linia:rgba(255,255,255,.14);
  --led:#64FFFC; --led-jasny:#64FFFC; --led-tekst:#0D0D0D; --led-hover:#9BFFFD;
  --czerwien:#FC0100;
  --r:9px; --rp:6px; --odstep:10px; --margines:15px;
  --font:'Atipla ND','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--tekst);font-family:var(--font);font-weight:350;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--led-jasny);outline-offset:3px;border-radius:4px}
.tylko-czytniki{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skok{position:absolute;left:-999px;top:8px;background:var(--led);color:#fff;padding:.6rem 1rem;border-radius:var(--rp);z-index:100}
.skok:focus{left:8px}

/* nagłówek jak na Framerze: stały, półprzezroczysty, z rozmyciem */
.naglowek{position:fixed;inset:var(--margines) var(--margines) auto var(--margines);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 19px;background:rgba(18,18,18,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:7px}
.logo{display:block;width:58px;height:48px;flex:none}
.logo img{width:100%;height:100%;object-fit:contain;animation:oddech 2.4s ease-in-out infinite alternate}
@keyframes oddech{from{transform:scale(1) rotate(0)}to{transform:scale(1.08) rotate(1deg)}}
.nav{display:flex;gap:34px;align-items:center}
.nav a{font-size:21px;font-weight:350;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;color:var(--tekst2);padding:6px 2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover,.nav a[aria-current]{color:#fff;border-color:var(--led-jasny)}
.mail{font-size:15px;font-weight:500;letter-spacing:.08em;color:var(--tekst2);text-decoration:none}
.mail:hover{color:#fff}

main{padding:calc(var(--margines) + 80px) var(--margines) var(--margines)}
.siatka{display:grid;grid-template-columns:minmax(0,685fr) minmax(0,715fr);gap:var(--odstep);margin-bottom:var(--odstep)}
.karta{background:var(--karta);border-radius:var(--r);padding:30px;overflow:hidden}
.karta.ciasna{padding:20px 22px}
.kolumna{display:flex;flex-direction:column;gap:var(--odstep);min-width:0}
.siatka>*{min-width:0}
.manifest p{font-size:24px;line-height:1.3;font-weight:350}
.manifest p+p{margin-top:20px}
.manifest .cichy{color:var(--tekst2)}
.przyciski{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.zdjecie{position:relative;border-radius:var(--r);overflow:hidden;background:var(--karta);min-height:420px}
.zdjecie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-zdjecie{min-height:760px}
.hero-zdjecie img{object-position:50% 40%}
.podpis-foto{position:absolute;left:18px;bottom:16px;font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* przycisk: niebieski LED */
.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:17px 26px;border:0;border-radius:var(--rp);background:var(--led);color:var(--led-tekst);font:inherit;font-weight:900;font-size:19px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;line-height:1.05;transition:transform .18s,background .18s}
.przycisk:hover{background:var(--led-hover);transform:translateY(-1px)}
.przycisk:active{transform:translateY(0)}
.przycisk.cichy{background:transparent;box-shadow:inset 0 0 0 2px var(--led);color:#fff}
.przycisk.cichy:hover{background:rgba(100,255,252,.14)}

.etykieta{font-size:15px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst2)}
h2{font-size:36px;line-height:1.1;font-weight:800;letter-spacing:-.01em}
.lista{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.lista li{font-size:18px;font-weight:500;color:#fff}
.lista li::before{content:'→ ';color:var(--led-jasny)}
.lista .cichy{color:var(--tekst2)}

/* ticker jak na Framerze */
.ticker{margin-top:auto;border-radius:4px;background:rgba(53,71,74,.45);overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker div{display:inline-block;padding:10px 0;font-size:17px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#EDEDED;animation:ticker 26s linear infinite}
.ticker span{display:inline-block;padding:0 24px}
.ticker span::after{content:'●';margin-left:48px;color:var(--led-jasny);font-size:.7em}
@keyframes ticker{to{transform:translateX(-50%)}}

/* sekcja SINGIEL */
.slowo{font-size:clamp(70px,9.5vw,136px);line-height:.9;font-weight:1000;letter-spacing:-.02em;color:var(--czerwien)}
.singiel .karta{min-height:430px;display:flex;flex-direction:column;justify-content:space-between}
.singiel .tytul{font-size:34px;font-weight:800}
.singiel .karta.odsluch{display:grid;align-content:center;grid-template-columns:minmax(0,380px) 1fr;gap:28px;align-items:center}
.okladka{border-radius:4px;overflow:hidden;aspect-ratio:1}
.okladka img{width:100%;height:100%;object-fit:cover}
.odsluch p{color:var(--tekst2);margin:12px 0 22px}
.oferta-teaser h3{font-size:clamp(48px,6.5vw,92px);line-height:.95;font-weight:1000;letter-spacing:-.02em;margin:14px 0 18px}
.oferta-teaser .karta{display:flex;flex-direction:column;justify-content:space-between;min-height:520px}
.oferta-teaser p.duzy{font-size:24px;line-height:1.3}

.kontakt-karta{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.kontakt-karta .duzy{font-size:clamp(26px,3.2vw,44px);font-weight:800;text-decoration:none}
.kontakt-karta .duzy:hover{color:var(--led-jasny)}
.stopka{padding:22px var(--margines) 110px;color:var(--tekst2);font-size:15px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
.stopka a{color:var(--tekst2)}
.stopka a:hover{color:#fff}

/* strona oferty */
.oferta h1{font-size:clamp(52px,7.4vw,104px);line-height:.95;font-weight:1000;letter-spacing:-.02em;margin:14px 0 24px}
.oferta .karta{padding:44px 48px;margin-bottom:var(--odstep)}
.oferta .lead{font-size:24px;line-height:1.35;font-weight:350;max-width:62ch}
.dwie{display:grid;grid-template-columns:1fr 1fr;gap:20px 56px;margin-top:20px}
.trzy{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:26px}
.trzy h3,.dwie h3{font-size:20px;font-weight:800;margin-bottom:8px}
.trzy p,.dwie p,.tekst{color:var(--tekst2);font-size:18px;line-height:1.55}
.tekst p+p,.tekst-b p+p{margin-top:12px}
.tekst-b{color:#fff;font-size:21px;line-height:1.5}
.cena{font-size:clamp(48px,6vw,80px);font-weight:1000;letter-spacing:-.02em;color:#fff;margin-top:16px;line-height:1}
.zaproszenie{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.zaproszenie .dane{font-size:18px;font-weight:500;line-height:1.7;color:var(--tekst2)}
.zaproszenie .dane a{color:#fff;text-decoration:none}
.foto{border-radius:var(--r);overflow:hidden;background:var(--karta2)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto.pelne{aspect-ratio:16/7;margin-top:2px}
.foto.duo{aspect-ratio:16/7;margin:22px 0 28px}
.trzy-foto{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.trzy-foto figure{margin:0}
.trzy-foto .foto{aspect-ratio:4/3}
.trzy-foto figcaption,.opis-wideo{font-size:15px;color:var(--tekst2);margin-top:9px}
.foto.szerokie{aspect-ratio:16/8;margin:22px 0}
.bio h3{font-size:30px;font-weight:800}
.bio .rola{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst2);font-weight:500;margin:4px 0 14px}
.bio p{color:#fff;font-size:17px;line-height:1.55}
.bio p+p{margin-top:10px}
.sekcja-kontakt dl{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;margin:22px 0;font-size:18px}
.sekcja-kontakt dt{color:var(--tekst2)}
.sekcja-kontakt dd{margin:0}

/* baner cookies (zgoda.js) */
.cookies{position:fixed;left:15px;bottom:15px;z-index:9999;width:min(27rem,calc(100vw - 30px));padding:20px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(15,15,15,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:translateY(.6rem);transition:opacity .35s,transform .35s;font-family:var(--font)}
.cookies[hidden]{display:none!important}
.cookies.jest{opacity:1;transform:none}
.cookies p{font-size:15px;line-height:1.5;color:#fff}
.cookies .akcje{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.cookies .przycisk{padding:12px 18px;font-size:15px}
.cookies a{font-size:14px;color:var(--tekst2)}

/* pojawianie jak na Framerze */
.pojaw{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.pojaw.jest{opacity:1;transform:none}

/* telefon: układ w jednej kolumnie, nawigacja na dole (strefa kciuka) */
@media (max-width:960px){
  .siatka{grid-template-columns:1fr}
  .hero-zdjecie{min-height:520px}
  .dwie,.trzy,.trzy-foto{grid-template-columns:1fr}
  .odsluch{grid-template-columns:1fr}
  .oferta .karta{padding:28px 22px}
  .foto.pelne,.foto.duo,.foto.szerokie{aspect-ratio:4/3}
}
@media (max-width:810px){
  .naglowek{padding:10px 14px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,18,18,.92)}
  .mail{display:none}
  .nav{position:fixed;left:15px;right:15px;bottom:15px;z-index:60;justify-content:space-between;gap:6px;padding:12px 16px;background:rgba(18,18,18,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:10px;border:1px solid var(--linia)}
  .nav a{font-size:13px;letter-spacing:.08em}
  .manifest p{font-size:21px}
  h2{font-size:30px}
  .cookies{bottom:84px}
  .sekcja-kontakt dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .logo img,.ticker div{animation:none}
  .pojaw{opacity:1;transform:none;transition:none}
}

/* opowieść: pokaz zdjęć i obiektów (SKRYPT), grupy rotujące */
.opowiesc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:40px;align-items:center}
.opowiesc blockquote{margin:14px 0 18px;font-size:clamp(34px,4.4vw,60px);line-height:1.04;font-weight:900;letter-spacing:-.015em}
.opowiesc p{color:var(--tekst2);font-size:20px;line-height:1.5;max-width:44ch}
.pokaz{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:1/1}
.pokaz .slajd{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.pokaz .slajd.jest{opacity:1;pointer-events:auto}
.pokaz img{width:100%;height:100%;object-fit:contain}
.pokaz.wypelnij img{object-fit:cover}
.pokaz figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;font-size:15px;font-weight:500;letter-spacing:.04em;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent)}
.pokaz-ster{position:absolute;right:12px;top:12px;display:flex;gap:8px;z-index:2}
.pokaz-ster button{width:42px;height:42px;border-radius:50%;border:2px solid var(--led);background:rgba(13,13,13,.7);color:var(--led);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.pokaz-ster button:hover{background:var(--led);color:#0D0D0D}
.pokaz-kropki{position:absolute;left:18px;top:18px;display:flex;gap:7px;z-index:2}
.pokaz-kropki i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);display:block}
.pokaz-kropki i.jest{background:var(--led)}
.karta-pokaz{padding:0;background:transparent}
.singiel .okladka{position:relative}
.stopka .symbol{width:36px;height:36px;border-radius:8px;vertical-align:middle;margin-right:10px}
.kamien-boczny{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:28px;align-items:center;margin-top:26px}
.kamien-boczny img{border-radius:var(--r);width:100%;aspect-ratio:1;object-fit:cover}
@media (max-width:960px){.opowiesc,.kamien-boczny{grid-template-columns:1fr}.pokaz{max-width:520px}}
@media (prefers-reduced-motion:reduce){.pokaz .slajd{transition:none}}
.stopka>span{display:inline-flex;align-items:center}

/* ───── v2.1 (08.10.2026): układ redakcyjny oferty, czytelność ───── */
/* miara tekstu 58–66 znaków, interlinia 1.55–1.6, nagłówek sekcji po lewej, treść po prawej */
.oferta .karta{padding:56px 64px}
.rzad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:28px 72px;align-items:start}
.rzad>header h2{font-size:clamp(32px,3.4vw,48px);line-height:1.04;font-weight:900;letter-spacing:-.02em;margin-top:12px}
.rzad>header .etykieta{max-width:30ch;line-height:1.45}
.rzad .dwie{margin-top:0;gap:22px 44px}
.rzad .tekst-b,.rzad .tekst{max-width:62ch}
.tekst-b{font-size:20px;line-height:1.6}
.tekst-b p+p,.tekst p+p{margin-top:18px}
.trzy p,.dwie p,.tekst{font-size:18px;line-height:1.6}
.oferta .lead{font-size:23px;line-height:1.45;max-width:58ch}
.bio p{max-width:58ch;font-size:17px;line-height:1.62}
.bio p+p{margin-top:14px}
.bio h3{margin-top:0}
.dwie.podziel{margin-top:36px;padding-top:30px;border-top:1px solid var(--linia)}
.cena{display:flex;align-items:baseline;gap:12px}
.cena span{font-size:20px;font-weight:500;color:var(--tekst2);letter-spacing:.04em}
.lista li{line-height:1.45}
.rzad .lista{margin-top:0}

/* hero oferty: tekst po lewej, kadr z Figmy (202:758) po prawej */
.hero-oferty{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch}
.oferta .hero-oferty .karta{margin-bottom:0}
.hero-oferty .karta{display:flex;flex-direction:column;justify-content:center}
.hero-oferty h1{font-size:clamp(46px,6vw,92px)}
.fakty{margin-top:30px;padding-top:26px;border-top:1px solid var(--linia);max-width:60ch}
.zdjecie.portret{min-height:520px;aspect-ratio:auto}
.zdjecie.portret img{object-position:50% 45%}

/* cel wydarzenia: znak i tekst obok siebie, trzy punkty pod spodem */
.cel-glowa{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:48px;align-items:stretch}
.cel-znak{margin:0;border-radius:var(--r);overflow:hidden;background:#000;min-height:320px}
.cel-znak img{width:100%;height:100%;object-fit:cover;display:block}
.cel-tekst{display:flex;flex-direction:column;justify-content:center;gap:0}
.cel-tekst h2{font-size:clamp(32px,3.4vw,48px);line-height:1.04;font-weight:900;letter-spacing:-.02em;margin:12px 0 22px}
.cel-tekst .cytat{margin-top:26px;padding-left:20px;border-left:2px solid var(--led);color:var(--tekst2);font-size:18px;line-height:1.6;max-width:56ch}
.trzy.numery{margin-top:48px;padding-top:36px;border-top:1px solid var(--linia);gap:44px}
.numery .nr{display:block;font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--led);margin-bottom:14px}
.numery h3{font-size:22px;line-height:1.2}

/* zdjęcia w sekcjach */
.trzy-foto{margin-top:14px}
.foto.szerokie{margin:44px 0 0}

/* wideo: plakat z przyciskiem play, YouTube dopiero po kliknięciu */
.wideo{position:relative;margin-top:34px;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:1314/560;transition:aspect-ratio .35s ease}
.wideo.gra{aspect-ratio:16/9}
.wideo-start{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.wideo-start img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s}
.wideo-start:hover img{transform:scale(1.025);filter:brightness(1.08)}
.wideo-play{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--led);color:var(--led-tekst);display:grid;place-items:center;transition:transform .18s,background .18s}
.wideo-play svg{margin-left:4px}
.wideo-start:hover .wideo-play{background:var(--led-hover);transform:scale(1.06)}
.wideo-start:focus-visible{outline:3px solid var(--led);outline-offset:-3px}
.wideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wideo noscript p{position:absolute;left:0;bottom:0}

@media (max-width:960px){
  .oferta .karta{padding:30px 22px}
  .rzad,.cel-glowa,.hero-oferty{grid-template-columns:1fr}
  .rzad{gap:18px}
  .cel-glowa{gap:26px}
  .cel-znak{min-height:0;aspect-ratio:16/10}
  .trzy.numery{gap:28px;margin-top:34px;padding-top:28px}
  .zdjecie.portret{aspect-ratio:4/5;min-height:0;max-height:560px}
  .foto.szerokie{margin-top:28px}
  .wideo-play{width:72px;height:72px;margin:-36px 0 0 -36px}
}
@media (prefers-reduced-motion:reduce){.wideo,.wideo-start img{transition:none}}
.stopka>span{gap:.5em}
@media (max-width:600px){.oferta .lead{font-size:20px}.tekst-b{font-size:18px}.oferta .karta{padding:26px 20px}}

/* ───── przyciski i cena wg Figmy (202:786, 203:5724), 08.10.2026 ───── */
:root{--led-ciemny:#002D31}
.przycisk{border-radius:2px;padding:18px 24px;font-size:20px;font-weight:700;letter-spacing:.08em;line-height:1.05}
.przycisk.cichy{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 3px var(--led);color:var(--led)}
.przycisk.cichy:hover{background:rgba(100,255,252,.18);color:var(--led-hover)}
.cena-h{font-size:36px;line-height:1.1;font-weight:800;margin-bottom:26px}
.cena-siatka{margin-top:0}
.cena-siatka>div{min-width:0}
.cena-blok{display:inline-block;margin-top:26px;padding:12px 24px;background:var(--led);color:var(--led-ciemny);border-radius:2px;font-weight:1000;font-size:clamp(38px,5.2vw,72px);line-height:1.12;letter-spacing:-.028em;white-space:nowrap;max-width:100%}
.zapr-w{margin:0 0 34px;padding-bottom:34px;border-bottom:1px solid var(--linia)}
.zaproszenie-w{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.zaproszenie-w h2{font-size:30px}

/* FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--linia)}
.faq-poz{border-bottom:1px solid var(--linia)}
.faq-poz summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font-size:21px;font-weight:600;line-height:1.3;color:#fff;transition:color .2s}
.faq-poz summary::-webkit-details-marker{display:none}
.faq-poz summary:hover{color:var(--led)}
.faq-poz summary i{position:relative;flex:none;width:34px;height:34px;border-radius:2px;box-shadow:inset 0 0 0 2px var(--led);transition:background .2s}
.faq-poz summary i::before,.faq-poz summary i::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--led);transition:transform .25s,background .2s}
.faq-poz summary i::after{transform:rotate(90deg)}
.faq-poz[open] summary i{background:var(--led)}
.faq-poz[open] summary i::before,.faq-poz[open] summary i::after{background:var(--led-ciemny)}
.faq-poz[open] summary i::after{transform:rotate(0)}
.faq-odp{padding:0 58px 26px 0;animation:faqOtw .35s ease}
.faq-odp p{color:var(--tekst2);font-size:18px;line-height:1.6;max-width:62ch}
@keyframes faqOtw{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:960px){.cena-h{font-size:30px}.faq-poz summary{font-size:18px}.faq-odp{padding-right:0}.zaproszenie-w{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.faq-odp{animation:none}}
.dwie .cena-blok,.cena-siatka .cena-blok{color:var(--led-ciemny);font-size:clamp(38px,5.2vw,72px);line-height:1.12}