/* Strona mieszkania — demo SILERS dla deweloperów (fikcyjny ID Deweloper): zieleń, piaskowy akcent; krój Manrope */
:root{
  --niebieski:#3f8f6b; --granat:#24694f; --granat-ciemny:#163a2e; --tekst:#1c2622; --tekst-2:#56635d;
  --tlo:#ffffff; --szary:#f3f2ee; --linia:#e1e0d8; --pomarancz:#e2a33b; --pomarancz-2:#c9842a; --zielony:#2e9d5b;
  --f:"Manrope",Arial,Helvetica,sans-serif;
  --r:6px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tlo);color:var(--tekst);font-family:var(--f);font-size:16px;line-height:1.5;
  font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--granat)}
h1,h2{font-weight:800;line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(24px,3vw,32px);color:var(--granat-ciemny);margin-bottom:8px}
.kontener{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lead{font-size:17px;color:var(--tekst-2);margin:0 0 20px;max-width:60ch}
.jasny{color:#d6ecf8!important}
.info-male{font-size:13px;color:var(--tekst-2);margin:10px 0 0}
.zaznacz{user-select:all}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--pomarancz-2);outline-offset:2px}

/* pasek demo */
.demo-pasek{background:#13241d;color:#d6e4dc;font-size:13px}
.demo-pasek .kontener{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;padding-block:7px}
.demo-pasek b{color:#fff}
.demo-linki{display:flex;gap:16px}
.demo-pasek a{color:var(--pomarancz);text-decoration:none;font-weight:700}
.demo-pasek a.demo-film{background:var(--pomarancz);color:#13241d;padding:3px 12px;border-radius:999px;white-space:nowrap}
.demo-pasek a.demo-film:hover{background:#ecb75e}
.demo-linki{align-items:center;flex-wrap:wrap}

/* nagłówek */
.naglowek{border-bottom:1px solid var(--linia);background:#fff;position:sticky;top:0;z-index:20}
.naglowek .kontener{display:flex;align-items:center;gap:24px;padding-block:10px}
.logo img{height:46px;width:auto}
.menu{display:flex;gap:22px;margin-left:auto}
.menu a{color:var(--tekst);text-decoration:none;font-weight:600;font-size:15px;padding:6px 0;border-bottom:2px solid transparent}
.menu a[aria-current]{color:var(--granat);border-color:var(--niebieski)}
.tel-naglowek{font-weight:800;color:var(--granat);text-decoration:none;white-space:nowrap}
.okruszki{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--tekst-2);padding-block:14px}
.okruszki a{color:var(--tekst-2)}
.okruszki b{color:var(--tekst)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:28px;align-items:start;padding-bottom:40px}
.widok{position:relative;height:min(68vh,620px);min-height:380px;background:#eef0ea;border-radius:var(--r);overflow:hidden}
.widok-scena{position:absolute;inset:0}
.widok-scena canvas{display:block;outline:none}
.widok-rzut{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:16px}
.widok-podpowiedz{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--granat-ciemny);pointer-events:none}
.widok-pasek{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.widok-pasek button,.widok-start,.widok-zamknij{border:0;cursor:pointer;font-weight:700;font-size:14px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--granat-ciemny);box-shadow:0 1px 3px rgba(11,79,122,.18)}
.widok-pasek button[aria-pressed="true"]{background:var(--granat);color:#fff}
.widok-pasek .glowny{background:var(--niebieski);color:#fff}
.widok-start{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--niebieski);color:#fff;font-size:16px;padding:13px 22px;display:none}
.widok-zamknij{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:calc(12px + env(safe-area-inset-top,0px));z-index:3}
.widok-panel{position:absolute;right:12px;bottom:64px;width:300px;max-width:calc(100% - 24px);background:#fff;border-radius:var(--r);padding:14px;box-shadow:0 6px 24px rgba(11,79,122,.2);display:flex;flex-direction:column;gap:10px;z-index:2}
.wp-naglowek{display:flex;justify-content:space-between;align-items:center;color:var(--granat-ciemny)}
.wp-x{border:0;background:none;font-size:16px;cursor:pointer;color:var(--tekst-2)}
.wp-label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.wp-label input{accent-color:var(--niebieski)}
.wp-info{margin:0;font-size:14px;color:var(--tekst-2)}
.chipy{display:flex;flex-wrap:wrap;gap:6px}
.chipy button{border:1px solid var(--linia);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--tekst);display:flex;gap:6px;align-items:center}
.chipy button[aria-pressed="true"]{border-color:var(--niebieski);background:#e7f1eb;color:var(--granat-ciemny)}
.chipy i{width:12px;height:12px;border-radius:50%;display:inline-block}
.pad{position:absolute;left:14px;bottom:70px;display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:6px}
.pad button{border:0;border-radius:var(--r);background:rgba(255,255,255,.92);font-size:17px;color:var(--granat-ciemny);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
.pad button:active{background:var(--niebieski);color:#fff}
.pad .f{grid-column:2;grid-row:1}.pad .l{grid-column:1;grid-row:2}.pad .b{grid-column:2;grid-row:2}.pad .r{grid-column:3;grid-row:2}
.m3d-etykiety{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.m3d-et{position:absolute;transform:translate(-50%,-50%);background:rgba(255,255,255,.93);color:var(--tekst);padding:3px 9px;border-radius:4px;font-size:12px;font-weight:700;white-space:nowrap;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.m3d-et span{display:block;font-weight:500;color:var(--tekst-2);font-size:11px}
.m3d-miara{background:#ff7a00;color:#fff;font-size:20px;font-weight:800;padding:6px 14px;border:3px solid #fff;border-radius:999px;box-shadow:0 3px 12px rgba(0,0,0,.3);z-index:2}
.m3d-miara.podglad{background:rgba(255,122,0,.88)}
/* sterowanie przelotem i instrukcja miarki: pasek u góry widoku */
.przelot-ster,.miara-info{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.96);border-radius:999px;padding:5px;box-shadow:0 4px 16px rgba(11,53,80,.25);max-width:calc(100% - 24px)}
.przelot-ster[hidden],.miara-info[hidden]{display:none}
.przelot-ster button,.miara-info button{border:0;cursor:pointer;font:700 15px var(--f);padding:9px 14px;border-radius:999px;background:#eef3f7;color:var(--granat-ciemny);white-space:nowrap}
.przelot-ster button:disabled{opacity:.35;cursor:default}
.przelot-ster #p-pauza{background:var(--niebieski);color:#fff;min-width:108px}
.przelot-ster #p-wolniej,.przelot-ster #p-szybciej{width:42px;padding:9px 0;font-size:20px;line-height:1}
.przelot-ster #p-tempo{min-width:48px;text-align:center;font-weight:800;color:var(--granat-ciemny);font-size:16px}
.przelot-ster small{font-size:12px;color:var(--tekst-2);padding:0 2px 0 8px}
.miara-info{padding:6px 6px 6px 16px;gap:12px}
.miara-info b{font-size:16px;color:var(--granat-ciemny);white-space:nowrap}
.miara-info b i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#ff7a00;color:#fff;margin-right:8px;font-size:14px}
@media (max-width:600px){.przelot-ster small{display:none}.przelot-ster button{padding:8px 11px;font-size:14px}.przelot-ster #p-pauza{min-width:92px}.miara-info{padding-left:10px;gap:8px}.miara-info b{font-size:13px;white-space:normal}.miara-info button{padding:8px 10px;font-size:13px}}
/* plansza po przelocie */
.koniec{position:absolute;inset:0;z-index:4;background:rgba(19,40,32,.92);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;animation:pojaw .9s ease both}
.koniec img{height:64px;width:auto}
.koniec-wroc{position:absolute;top:12px;right:12px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff;font:700 14px var(--f);padding:9px 14px;border-radius:999px;cursor:pointer}
.koniec-wroc:hover{background:rgba(255,255,255,.25)}
.koniec-haslo{font-size:clamp(26px,4vw,40px);font-weight:800;margin:6px 0 0;text-wrap:balance}
.koniec-m{margin:0;color:#cfe6da;font-weight:600}
.koniec-tel{color:#fff;font-size:clamp(24px,3.4vw,32px);font-weight:800;text-decoration:none;letter-spacing:.02em}
.koniec-akcje{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.koniec-pod{margin:6px 0 0;font-size:13px;color:#a8c4b6}
.przycisk.jasny{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);font-family:inherit}
@keyframes pojaw{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.koniec{animation:none}}
/* w treści strony model jest tylko podglądem: narzędzia dopiero na pełnym ekranie */
.widok:not(.pelny) .widok-pasek{display:none}
.widok:not(.pelny) .widok-start{display:block}
.widok:not(.pelny) .widok-scena{cursor:pointer}
/* pełny ekran */
.widok.pelny{position:fixed;inset:0;height:auto;min-height:0;border-radius:0;z-index:60}
body.zablokuj{overflow:hidden}

/* info */
.info{position:sticky;top:90px;display:flex;flex-direction:column;gap:14px}
.info-gora{display:flex;justify-content:space-between;align-items:center}
.logo-osiedla{height:48px;width:auto}
.status{display:inline-block;background:#e3f5ea;color:var(--zielony);font-weight:800;font-size:13px;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.status.rezerwacja{background:#fff3d6;color:#9a6200}
h1{font-size:clamp(30px,4vw,42px);color:var(--granat-ciemny)}
.pod{margin:0;color:var(--tekst-2)}
.fakty{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linia);border:1px solid var(--linia);border-radius:var(--r);overflow:hidden;margin:0}
.fakty div{background:#fff;padding:10px 12px}
.fakty dt{font-size:12px;color:var(--tekst-2);font-weight:600}
.fakty dd{margin:0;font-size:19px;font-weight:800;color:var(--tekst)}
.cena-kwota{font-size:clamp(30px,4vw,38px);font-weight:800;color:var(--granat);font-variant-numeric:lining-nums tabular-nums}
.cena-pod{color:var(--tekst-2);font-size:14px}
.akcje{display:flex;flex-direction:column;gap:8px}
.przycisk{display:inline-flex;justify-content:center;align-items:center;text-align:center;text-decoration:none;font-weight:800;font-size:16px;padding:14px 18px;border-radius:var(--r);border:2px solid transparent;cursor:pointer}
.przycisk.pomarancz{background:var(--pomarancz);color:#1b2a36}
.przycisk.pomarancz:hover{background:var(--pomarancz-2)}
.przycisk.obrys{border-color:var(--granat);color:var(--granat);background:#fff}

/* sekcje */
.sekcja{padding-block:56px}
.tlo-szare{background:var(--szary)}
.tlo-granat{background:var(--granat-ciemny);color:#fff}
.tlo-granat h2{color:#fff}
.dwie{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.atuty{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.atuty li{border-top:3px solid var(--niebieski);padding-top:12px;font-weight:700;font-size:17px;line-height:1.35}
.atuty li span{display:block;font-weight:500;font-size:14px;color:var(--tekst-2);margin-top:4px}
.pomieszczenia{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pomieszczenia button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 12px;background:#fff;border-radius:4px}
.pomieszczenia button:hover,.pomieszczenia button:focus-visible{outline:2px solid var(--niebieski)}
.pomieszczenia .n{font-weight:700}
.pomieszczenia .m{font-weight:800;color:var(--granat);font-variant-numeric:tabular-nums}
.pomieszczenia .pas{grid-column:1/-1;height:5px;background:var(--szary);border-radius:3px;overflow:hidden}
.pomieszczenia .pas i{display:block;height:100%;background:var(--niebieski)}
.suma{font-weight:800;margin:12px 0 0;color:var(--granat-ciemny)}
.rzut{margin:0;background:#fff;border-radius:var(--r);padding:12px}
.rzut figcaption,.plan-pietra figcaption{font-size:12px;color:var(--tekst-2);margin-top:6px}

/* kalkulator */
.kalk{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
fieldset{border:0;padding:0;margin:0 0 20px}
legend{font-weight:800;margin-bottom:10px;color:var(--granat-ciemny)}
.radia{display:flex;flex-direction:column;gap:8px}
.radia label{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--linia);border-radius:var(--r);padding:12px 14px;cursor:pointer;font-weight:600}
.radia label:has(input:checked){border-color:var(--niebieski);background:#effafe}
.radia input{accent-color:var(--niebieski);margin-right:10px}
.radia .kw{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
select{width:100%;font:600 15px var(--f);padding:12px;border:1px solid var(--linia);border-radius:var(--r);background:#fff;color:var(--tekst)}
.kalk-wynik{background:var(--szary);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;position:sticky;top:90px}
.kalk-wynik dl{margin:0;display:flex;flex-direction:column;gap:6px}
.kalk-wynik dl div{display:flex;justify-content:space-between;gap:12px}
.kalk-wynik dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.kalk-suma{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--granat);padding-top:12px}
.kalk-suma b{font-size:28px;color:var(--granat);font-variant-numeric:tabular-nums}

/* osiedle */
.plan-pietra{margin:0;background:#fff;border-radius:var(--r);padding:10px}
.osiedle-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.osiedle-lista li{border-left:3px solid var(--pomarancz);padding-left:14px;color:#d6ecf8}
.osiedle-lista b{display:block;color:#fff;font-size:17px}
.galeria{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:10px;margin-top:32px}
.galeria figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10}
.galeria figure:first-child{grid-row:1/3;aspect-ratio:auto}
.galeria img{width:100%;height:100%;object-fit:cover}

/* podobne */
.podobne{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:16px;margin-top:16px}
.karta-m{display:flex;flex-direction:column;border:1px solid var(--linia);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;background:#fff}
.karta-m:hover{border-color:var(--niebieski);box-shadow:0 4px 16px rgba(0,119,184,.12)}
.karta-m img{aspect-ratio:4/3;object-fit:contain;background:#fff;padding:10px;border-bottom:1px solid var(--linia)}
.karta-m div{padding:14px;display:flex;flex-direction:column;gap:4px}
.karta-m b{font-size:18px;color:var(--granat-ciemny)}
.karta-m .c{font-weight:800;color:var(--granat);font-size:18px}
.karta-m .znacz{align-self:flex-start;font-size:11px;font-weight:800;color:#fff;background:var(--niebieski);padding:2px 8px;border-radius:999px}

/* dokumenty */
.dokumenty{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.dokumenty a{display:flex;justify-content:space-between;background:#fff;border-radius:var(--r);padding:14px 16px;font-weight:700;text-decoration:none}
.dokumenty span{font-size:12px;color:var(--tekst-2)}
.historia{width:100%;border-collapse:collapse;margin-top:12px;background:#fff;border-radius:var(--r);overflow:hidden}
.historia th,.historia td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linia);font-variant-numeric:tabular-nums}
.historia th{font-size:12px;color:var(--tekst-2);text-transform:uppercase;letter-spacing:.05em}
.historia td:last-child{font-weight:800}

/* kontakt */
.kontakt-biuro{display:flex;flex-direction:column;gap:4px;border-left:3px solid var(--niebieski);padding-left:14px}
.kontakt-biuro a{font-weight:800;font-size:20px;text-decoration:none}
.formularz{display:flex;flex-direction:column;gap:14px;background:var(--szary);padding:22px;border-radius:var(--r)}
.formularz label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.formularz input:not([type=radio]):not([type=checkbox]),.formularz textarea{font:500 16px var(--f);padding:12px;border:1px solid var(--linia);border-radius:var(--r);background:#fff;color:var(--tekst)}
.formularz textarea{resize:vertical}
.kiedy{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.kiedy legend{font-size:14px;margin-bottom:8px}
.kiedy label{flex-direction:row;align-items:center;gap:6px;background:#fff;border:1px solid var(--linia);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600}
.kiedy label:has(input:checked){border-color:var(--niebieski);background:#e7f1eb}
.kiedy input{accent-color:var(--niebieski)}
.zgoda{flex-direction:row!important;align-items:flex-start;font-weight:500!important}
.zgoda input{margin-top:3px;accent-color:var(--niebieski)}
.blad{margin:0;color:#b42318;font-weight:700}
.dziekujemy{background:#e3f5ea;border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px}
.dziekujemy span{font-size:13px;color:var(--tekst-2)}

/* stopka */
.stopka{background:#163a2e;color:#cfe0d6;padding-block:28px 100px;font-size:14px}
.stopka .kontener{display:flex;flex-direction:column;gap:10px}
.stopka img{height:42px;width:auto;align-self:flex-start;object-fit:contain}
.stopka a{color:#fff}
.stopka-silers{font-size:12px;color:#9dbcac}
.pasek-mobilny{display:none}

@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .info{position:static}
  .atuty{grid-template-columns:1fr 1fr}
  .dwie,.kalk{grid-template-columns:1fr}
  .kalk-wynik{position:static}
  .menu{display:none}
  .tel-naglowek{margin-left:auto}
}
@media (max-width:640px){
  body{font-size:15px}
  .demo-linki{gap:12px;font-size:12px}
  .widok{height:58vh;min-height:320px;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));border-radius:0}
  .widok.pelny .widok-pasek{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .widok.pelny .widok-pasek button{flex:none}
  .m3d-et{font-size:10.5px;padding:2px 6px}
  .m3d-et.m3d-miara{font-size:17px;padding:5px 12px}
  .m3d-et span{font-size:10px}
  .widok-panel{left:12px;right:12px;width:auto;bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .pad{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .atuty{grid-template-columns:1fr}
  .galeria{grid-template-columns:1fr 1fr}
  .galeria figure:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}
  .podobne{grid-template-columns:1fr}
  .sekcja{padding-block:40px}
  .pasek-mobilny{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--linia);
    padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .pasek-mobilny .przycisk{padding:12px}
  body.zablokuj .pasek-mobilny{display:none}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* miniaturka: statyczne zdjęcie makiety, model 3D dopiero po kliknięciu */
.widok-mini{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#eeeeec;cursor:pointer}
.widok:has(.widok-mini:not([hidden])){background:#eeeeec}
.widok-laduje{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(238,238,236,.85);color:var(--granat-ciemny);font-weight:700}
.widok-laduje span{width:38px;height:38px;border-radius:50%;border:4px solid #cfe3ef;border-top-color:var(--niebieski);animation:obrot .8s linear infinite}
@keyframes obrot{to{transform:rotate(360deg)}}

/* intro z filmem */
.intro{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 30%,#0f5f91,#0b2233 75%);display:flex;align-items:center;justify-content:center;padding:16px}
.intro-srodek{width:min(1100px,100%);display:flex;flex-direction:column;align-items:center;gap:16px}
.intro video{width:100%;max-height:72vh;aspect-ratio:16/9;background:#000;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.intro-wejdz{border:0;cursor:pointer;background:var(--pomarancz);color:#13241d;font:700 17px Manrope,Arial;padding:14px 28px;border-radius:999px;transition:transform .3s}
.intro-wejdz.duzy{transform:scale(1.15);box-shadow:0 0 0 6px rgba(255,174,0,.3)}
.intro-kadr{position:relative;width:100%;display:flex;justify-content:center}
.intro-graj{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-left:46%;gap:14px;border:0;border-radius:12px;background:rgba(9,31,48,.38);color:#fff;font:inherit;cursor:pointer}
.intro-graj[hidden]{display:none}
.intro-graj i{display:flex;align-items:center;justify-content:center;width:clamp(72px,11vw,104px);aspect-ratio:1;border-radius:50%;background:var(--pomarancz);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .15s}
.intro-graj i::after{content:"";margin-left:8%;border-style:solid;border-width:clamp(14px,2.2vw,21px) 0 clamp(14px,2.2vw,21px) clamp(23px,3.6vw,34px);border-color:transparent transparent transparent #1b2a36}
.intro-graj:hover i{transform:scale(1.06)}
.intro-graj span{background:rgba(9,31,48,.82);border-radius:999px;padding:8px 16px;font-weight:700;font-size:clamp(14px,1.8vw,17px)}
.intro-dzwiek{margin:-4px 0 0;color:#d4e6f2;font:600 15px Manrope,Arial}
.intro-akcje{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.intro-wizja{display:inline-flex;align-items:center;border:2px solid rgba(255,255,255,.7);color:#fff;font:700 17px Manrope,Arial;padding:12px 26px;border-radius:999px;text-decoration:none}
.intro-wizja:hover{background:rgba(255,255,255,.12)}
@media (max-width:560px){.intro-akcje{flex-direction:column;align-items:stretch;width:100%}.intro-wejdz,.intro-wizja{justify-content:center;text-align:center;font-size:16px}}
.intro-pomin{position:absolute;top:14px;right:14px;border:0;cursor:pointer;background:rgba(255,255,255,.15);color:#fff;font:600 14px Manrope,Arial;padding:8px 14px;border-radius:999px}
body.intro-on{overflow:hidden}

/* animowana podpowiedź gestu */
.gest{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:18px 26px 14px;border-radius:18px;background:rgba(22,58,46,.6);backdrop-filter:blur(3px);pointer-events:none;transition:opacity .4s}
.gest.znika{opacity:0}
.widok:has(.m3d-ladowanie:not(.gotowe)) .gest,.widok:has(.widok-laduje:not([hidden])) .gest{display:none}
.gest-luk{display:block}
.gest-ikona{margin-top:-26px;animation:gest-ruch 2.4s ease-in-out infinite}
.gest-dlon{display:none}
.dotyk .gest-mysz{display:none}
.dotyk .gest-dlon{display:block}
.gest-klik{animation:gest-klik 2.4s ease-in-out infinite;transform-origin:21.5px 9px}
.gest p{margin:6px 0 0;color:#fff;font-weight:700;font-size:15px;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.25)}
@keyframes gest-ruch{0%,100%{transform:translateX(-58px) rotate(-8deg)}50%{transform:translateX(58px) rotate(8deg)}}
@keyframes gest-klik{0%,100%{opacity:0;transform:scale(.4)}10%{opacity:1}40%{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.gest-ikona,.gest-klik{animation:none}}

/* ekran ładowania realistycznego wnętrza */
.m3d-ladowanie{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(240,244,247,.92);z-index:5;transition:opacity .5s}
.m3d-ladowanie.gotowe{opacity:0;pointer-events:none}
.m3d-ladowanie>div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;color:#24694f}
.m3d-pasek{display:block;width:220px;height:6px;border-radius:3px;background:#d6e6f0;overflow:hidden}
.m3d-pasek i{display:block;height:100%;width:0;background:#3f8f6b;transition:width .2s}
.m3d-ladowanie small{color:#5a6b78}

/* okolica: kafelki z najważniejszymi odległościami, mapa i lista */
.ok-kafle{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0 22px}
.ok-kafel{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:12px 14px}
.ok-kafel:hover,.ok-kafel.on,.ok-kafel:focus-visible{border-color:var(--niebieski);background:#effafe}
.ok-kafel span{font-size:13px;color:var(--tekst-2);font-weight:600}
.ok-kafel b{font-size:26px;color:var(--granat-ciemny);line-height:1.1}
.ok-kafel small{font-size:13px;color:var(--tekst-2)}
.ok-uklad{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.ok-mapa{height:470px;border-radius:var(--r);border:1px solid var(--linia);background:#eef0ea;z-index:0}
.ok-filtr{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ok-filtr button{border:1px solid var(--linia);background:#fff;border-radius:999px;padding:6px 12px;font:700 13px var(--f);cursor:pointer;color:var(--granat-ciemny)}
.ok-filtr button[aria-pressed="true"]{background:var(--granat);border-color:var(--granat);color:#fff}
.ok-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:410px;overflow:auto;padding-right:4px}
.ok-lista button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;border:1px solid var(--linia);border-radius:var(--r);padding:8px 10px;background:#fff}
.ok-lista button:hover,.ok-lista button.on,.ok-lista button:focus-visible{border-color:var(--niebieski);background:#effafe}
.ok-lista i{font-style:normal;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
.ok-lista span b{display:block;font-size:15px;color:var(--tekst)}
.ok-lista small{font-size:12px;color:var(--tekst-2)}
.ok-czas{text-align:right}
.ok-czas b{color:var(--granat-ciemny)!important;white-space:nowrap}
.ok-dom span{display:inline-block;transform:translate(-50%,-100%);background:var(--pomarancz);color:#1b2a36;font:800 13px var(--f);padding:6px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.3);border:2px solid #fff}
@media (max-width:900px){.ok-uklad{grid-template-columns:1fr}.ok-mapa{height:320px}.ok-lista{max-height:none}.ok-kafle{grid-template-columns:repeat(2,1fr)}.ok-kafel b{font-size:22px}}

/* demo SILERS: marka przykładowa, baner dla deweloperów */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--granat-ciemny);font-weight:800;font-size:19px;line-height:1.05}
.logo .znak{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--granat-ciemny);color:#fff;font-size:17px;letter-spacing:.02em}
.logo small{display:block;font-size:11px;font-weight:600;color:var(--tekst-2);letter-spacing:.02em}
.logo-osiedla{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--granat);font-size:15px;height:auto}
.logo-osiedla i{width:20px;height:20px;border-radius:50% 50% 50% 0;background:var(--niebieski);transform:rotate(-45deg)}
.koniec-logo{margin:0;font-size:22px;font-weight:800;letter-spacing:.02em}
.stopka-logo{margin:0;font-size:20px;font-weight:800;color:#fff}
.stopka-logo small{font-size:12px;font-weight:600;color:#9dbcac;margin-left:6px}
.dok-brak{display:flex;justify-content:space-between;color:var(--tekst-2);padding:12px 0}
.dok-brak span{font-size:12px}
.baner-dew{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.baner-dew>div:first-child{flex:1 1 420px}
.baner-akcje{display:flex;gap:10px;flex-wrap:wrap}
.ok-mapa svg{display:block;width:100%;height:100%}
.ok-mapa .ok-pkt{cursor:pointer}
.ok-mapa .ok-pkt.on circle{stroke:#13241d;stroke-width:3}