/* Zakład Kamieniarski Lewicki – granit, światło i złoto */
@font-face{font-family:"Cormorant";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/cg-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/cg-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/cg-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/cg-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/cg-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/cg-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/cg-latin-ext-400i.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/cg-latin-400i.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --czern:#0f0f0f; --grafit:#171716; --grafit2:#1f1e1c; --kamien:#f4f1ec; --kamien2:#e9e4dc;
  --tekst:#2a2826; --tekst-jasny:#d9d4cc; --szary:#5f5952;
  --zloto:#c5a165; --zloto-jasne:#e0c48f; --zloto-ciemne:#9c7a42; --zloto-tekst:#7a5c2a;
  --zloto-intarsja:linear-gradient(90deg,#8a6a35,#c5a165 25%,#f1dca5 50%,#c5a165 75%,#8a6a35);
  --intarsja-cien:0 1px 0 rgba(255,255,255,.25),0 -1px 0 rgba(0,0,0,.55);
  --intarsja-cien-ciemny:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.8);
  --e:cubic-bezier(.2,.7,.2,1);
  --serif:"Cormorant",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --szer:1200px; --rad:2px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kamien) url(../img/ziarno-jasne.webp);color:var(--tekst);font:400 16.5px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0 0 .5em;letter-spacing:.005em;font-variant-numeric:lining-nums}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,3.6vw,2.9rem)}
h3{font-size:1.55rem}
p{margin:0 0 1.1em}
.kontener{width:100%;max-width:var(--szer);margin:0 auto;padding:0 24px}
.waski-kontener{max-width:820px}
.srodek{text-align:center}
.waski{max-width:640px;margin-left:auto;margin-right:auto}
.pomin{position:absolute;left:-999px;top:8px;background:var(--zloto);color:#000;padding:8px 14px;z-index:100}
.pomin:focus{left:8px}
:focus-visible{outline:2px solid var(--zloto);outline-offset:3px}

/* ---------- logo (chromowany owal jak na banerze) */
.logo{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:#fff;gap:0}
.logo-svg{width:150px;height:auto;display:block}
.logo-stopka .logo-svg{width:170px}
.logo-pod{font:italic 400 1.02rem/1 var(--serif);color:var(--zloto-jasne);letter-spacing:.03em;margin-top:-6px}

/* ---------- nagłówek */
.naglowek{position:fixed;inset:0 0 auto;z-index:50;transition:box-shadow .35s,padding .35s;padding:14px 0}
.naglowek::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,15,15,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .35s}
.naglowek.przewiniety,body:not(.strona-start) .naglowek{box-shadow:0 1px 0 rgba(197,161,101,.25);padding:6px 0}
.naglowek.przewiniety::before,body:not(.strona-start) .naglowek::before{opacity:1}
.naglowek.przewiniety .logo-svg,body:not(.strona-start) .naglowek .logo-svg{width:120px}
.naglowek.przewiniety .logo-pod,body:not(.strona-start) .naglowek .logo-pod{font-size:.9rem}
.naglowek-wew{display:flex;align-items:center;justify-content:space-between;gap:24px}
.menu{display:flex;align-items:center;gap:30px}
.menu a{color:#eee;text-decoration:none;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 0;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--zloto-intarsja);transform:scaleX(0);transition:transform .3s}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu a[aria-current]{color:var(--zloto-jasne)}
.menu .menu-tel{border:1px solid var(--zloto);background:rgba(10,10,10,.55);padding:9px 16px;color:var(--zloto-jasne);letter-spacing:.08em}
.menu .menu-tel::after{display:none}
.menu .menu-tel:hover{background:var(--zloto);color:#111}
.menu-przycisk{display:none;background:none;border:0;padding:10px;cursor:pointer}
.menu-przycisk span{display:block;width:26px;height:1.5px;background:#fff;margin:6px 0;transition:.3s}

/* ---------- hero „Cztery kamienie” */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;color:#fff;background:var(--czern) url(../img/ziarno-ciemne.webp);overflow:hidden}
.hero-slaby{position:absolute;top:-6%;bottom:-6%;right:-4%;width:54%;display:flex;gap:7px;transform:skewX(-7deg) translate3d(0,calc(var(--sy,0)*.18px),0);transform-origin:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%);will-change:transform}
.slab{position:relative;flex:1 1 0;overflow:hidden;background:#1a1a19;transition:flex .7s var(--e),filter .5s;filter:brightness(.92);text-decoration:none;color:#fff}
.slab::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(197,161,101,.4);pointer-events:none}
.slab img{position:absolute;top:0;height:100%;left:-140px;width:calc(100% + 280px);object-fit:cover;object-position:center 40%;transform:skewX(7deg);max-width:none}
.slab span{position:absolute;left:0;right:0;bottom:0;padding:120px 30px 46px;transform:skewX(7deg);background:linear-gradient(transparent,rgba(0,0,0,.75));font:italic 400 1.5rem var(--serif);opacity:0;transition:opacity .4s}
.slab small{display:block;font:500 .66rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--zloto-jasne);font-style:normal;margin-top:4px}
@media (hover:hover){
  .hero-slaby:hover .slab{filter:brightness(.6)}
  .slab:hover{flex:2.3 1 0;filter:none}
  .slab:hover span{opacity:1}
}
.hero-wew{position:relative;z-index:2;padding-top:140px;padding-bottom:150px;transform:translate3d(0,calc(var(--sy,0)*-.1px),0);opacity:calc(1 - var(--sy,0)/700)}
.hero-wew>*{max-width:48%}
.hero h1{font-size:clamp(3rem,5.4vw,5.4rem);max-width:none;line-height:1;letter-spacing:-.01em;margin-bottom:.3em;font-weight:500}
.hero h1 em{font-style:italic}
.hero-lead{max-width:34rem;font-size:1.08rem;color:#ddd8cf}
.hero-bok{position:absolute;left:24px;bottom:120px;transform-origin:left bottom;transform:rotate(-90deg);font:500 .62rem var(--sans);letter-spacing:.32em;text-transform:uppercase;color:rgba(197,161,101,.6);white-space:nowrap;z-index:2}
.nadtytul{font:500 .76rem/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--zloto);margin-bottom:1.1em}
.hero-pasek{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(197,161,101,.35);background:rgba(10,10,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-pasek-wew{display:flex;justify-content:center;align-items:center;gap:28px;padding-top:18px;padding-bottom:18px;font:500 .74rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--zloto-jasne)}
.hero-pasek i{width:5px;height:5px;transform:rotate(45deg);background:var(--zloto)}
.wiersz{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .08em .12em;margin:0 -.08em -.12em}
.wiersz>span{display:inline-block}

/* ---------- złocone litery + światło na polerowanej powierzchni */
.zloto-tekst{background:linear-gradient(100deg,#8a6a35 0%,#c5a165 30%,#f1dca5 48%,#c5a165 62%,#8a6a35 100%);background-size:220% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.15)) drop-shadow(0 -1px 0 rgba(0,0,0,.6))}
.btn,.kafel,.g-otworz,.probka-kamien{position:relative;overflow:hidden}
.btn-zloty::before,.kafel::before,.g-otworz::before,.probka-kamien::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);transform:translateX(-130%)}
.btn-zloty:hover::before,.kafel:hover::before,.g-otworz:hover::before,.probka:hover .probka-kamien::before{transition:transform .9s var(--e);transform:translateX(130%)}

/* ---------- przyciski */
.przyciski{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:50px;padding:0 28px;text-decoration:none;font:600 .78rem/1.35 var(--sans);letter-spacing:.18em;text-transform:uppercase;border-radius:var(--rad);transition:background .25s,color .25s,border-color .25s;cursor:pointer;border:1px solid transparent}
.btn-zloty{background:linear-gradient(135deg,var(--zloto-jasne),var(--zloto) 55%,var(--zloto-ciemne));color:#111;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.35)}
.btn-zloty:hover{background:var(--zloto-jasne)}
.btn-obrys{border-color:var(--zloto);color:var(--zloto)}
.sekcja:not(.sekcja-ciemna) .btn-obrys{color:var(--zloto-tekst);border-color:var(--zloto-tekst)}
.sekcja:not(.sekcja-ciemna) .nadtytul{color:var(--zloto-tekst)}
.btn-obrys:hover{background:var(--zloto);color:#111!important}

/* ---------- sekcje i powierzchnie z granitu */
.sekcja{padding:110px 0}
.sekcja-ciemna,.cta,.stopka{position:relative;background-color:var(--grafit);background-image:url(../img/ziarno-ciemne.webp);color:var(--tekst-jasny)}
.cta,.stopka{background-color:var(--czern)}
.sekcja-ciemna::before,.cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(197,161,101,.09),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.5),transparent 60%)}
.sekcja-ciemna>.kontener,.cta>.kontener,.stopka>.kontener{position:relative;z-index:1}
.sekcja-ciemna h2,.sekcja-ciemna h3{color:#fff}
.tytul-sekcji{text-align:center;margin-bottom:60px}
.ozdobnik{width:90px;height:1px;margin:18px auto 0;background:var(--zloto-intarsja);box-shadow:var(--intarsja-cien);position:relative}
.sekcja-ciemna .ozdobnik{box-shadow:var(--intarsja-cien-ciemny)}
.ozdobnik::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:var(--zloto);transform:translate(-50%,-50%) rotate(45deg)}
.ozdobnik-lewo{margin-left:0;margin-bottom:28px}
.podtytul{position:relative;overflow:hidden;background:var(--czern) url(../img/ziarno-ciemne.webp);color:#fff;padding:190px 0 90px;text-align:center;border-bottom:1px solid rgba(197,161,101,.3)}
.podtytul::before{content:"";position:absolute;inset:-20% 0;background:url(../img/pasmo.webp) center/cover;opacity:.6;transform:translate3d(0,calc(var(--sy,0)*.3px),0);will-change:transform}
.podtytul::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.45),rgba(15,15,15,.9)),radial-gradient(ellipse at 70% 0%,rgba(197,161,101,.16),transparent 60%)}
.podtytul .kontener{position:relative;z-index:1}
.podtytul h1{font-size:clamp(2.4rem,5vw,3.8rem)}
.wstep{font-family:var(--serif);font-size:1.55rem;line-height:1.45;color:#3b3631}
.uwaga{color:var(--szary);font-size:.92rem;margin-top:2rem}
.sekcja-ciemna .uwaga{color:#a59f95}
.link-strzalka{color:var(--zloto-tekst);text-decoration:none;font-weight:600;letter-spacing:.06em}
.link-strzalka::after{content:" →";transition:margin .2s}
.link-strzalka:hover::after{margin-left:6px}

/* manifest „Dlaczego my” */
.manifest-sekcja{background-color:#121211;border-top:1px solid rgba(197,161,101,.25)}
.manifest{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start}
.manifest-tekst{font:400 clamp(1.7rem,3vw,2.6rem)/1.3 var(--serif);color:#fff;margin:0}
.manifest-tekst em{font-style:italic;color:var(--zloto-jasne)}

/* taśma realizacji */
.tasma-obudowa{position:relative}
.tasma{--bok:max(24px,calc((100vw - var(--szer))/2 + 24px));display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--bok);scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 var(--bok);margin:0 calc(-1 * var(--bok))}
.tasma::-webkit-scrollbar{display:none}
.kafel{display:block;flex:0 0 min(78vw,440px);scroll-snap-align:start;aspect-ratio:4/5;background:#222;text-decoration:none;color:#fff;-webkit-user-drag:none}
.kafel img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e),filter .5s;user-select:none;-webkit-user-drag:none}
.kafel:hover img{transform:scale(1.03)}
.kafel-nr{position:absolute;top:18px;left:20px;z-index:2;font:500 1.1rem var(--serif);color:var(--zloto-jasne);letter-spacing:.2em;font-style:normal;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.kafel::after{content:"";position:absolute;inset:14px;border:1px solid var(--zloto);opacity:0;transform:scale(1.04);transition:opacity .6s,transform .6s;pointer-events:none;z-index:2}
.kafel:hover::after{opacity:1;transform:none}
.kafel-opis{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:50px 24px 24px;background:linear-gradient(transparent,rgba(0,0,0,.8));font:500 1.3rem var(--serif);display:flex;justify-content:space-between;align-items:flex-end;gap:10px;transform:translateY(12px);opacity:.85;transition:transform .5s var(--e),opacity .5s}
.kafel:hover .kafel-opis{transform:none;opacity:1}
.kafel-opis b{font:600 .85rem var(--sans);color:var(--zloto-jasne);white-space:nowrap}
.tasma-strzalka{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border:1px solid var(--zloto-ciemne);background:rgba(244,241,236,.9);color:var(--zloto-ciemne);font:300 2rem/1 var(--sans);cursor:pointer;transition:opacity .3s}
.tasma-strzalka:hover{background:var(--zloto);color:#111}
.tasma-wstecz{left:-8px}
.tasma-dalej{right:-8px}
.tasma-strzalka[disabled]{opacity:0;pointer-events:none}
.tasma-pasek{height:1px;background:var(--kamien2);margin:28px 0 44px;position:relative}
.tasma-pasek i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--zloto-intarsja);transition:width .2s linear}
.tasma.ciagnie{cursor:grabbing;scroll-snap-type:none}

/* próbnik kamienia */
.probnik{background-color:#121211}
.probki{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px}
.probka{display:block;text-decoration:none;color:inherit}
.probka-kamien{display:block;position:relative;aspect-ratio:3/2;background:var(--tex) center/cover;box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),inset -1px -1px 0 rgba(0,0,0,.6),0 30px 50px -30px rgba(0,0,0,.6);transition:transform .6s var(--e)}
.probka:hover .probka-kamien{transform:translateY(-4px)}
.probka b{display:block;font:500 1.3rem var(--serif);margin-top:16px;color:#fff}
.probka small{font:500 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#a59f95}
.probki-mala{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.probki-mala .probka-kamien{box-shadow:inset 1px 1px 0 rgba(255,255,255,.25),inset -1px -1px 0 rgba(0,0,0,.4),0 14px 24px -18px rgba(0,0,0,.5)}
.probki-mala b{font-size:1rem;margin-top:8px;color:var(--tekst)}

/* dwie kolumny + kroki */
.dwie-kolumny{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.kroki{list-style:none;margin:0;padding:0;counter-reset:k}
.kroki li{counter-increment:k;display:grid;grid-template-columns:64px 1fr;padding:22px 0;border-bottom:1px solid var(--kamien2)}
.kroki li::before{content:"0" counter(k);grid-row:span 2;font:500 2.2rem/1 var(--serif);color:var(--zloto);font-variant-numeric:lining-nums}
.kroki b{font:500 1.45rem var(--serif)}
.kroki span{color:#68625b}
.kroki-ciemne li{grid-template-columns:64px 52px 1fr;gap:0 10px;padding:24px 0;border-bottom:1px solid rgba(197,161,101,.22)}
.kroki-ciemne svg{grid-row:span 2;width:30px;height:30px;fill:none;stroke:var(--zloto);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.kroki-ciemne b{color:#fff}
.kroki-ciemne span{color:#a59f95}

/* CTA */
.cta{color:#fff;padding:80px 0;border-top:1px solid rgba(197,161,101,.3)}
.cta-wew{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.cta h2{margin-bottom:.2em}
.cta p{color:#bdb7ad;margin:0}
.cta .przyciski{margin-top:0}

/* o firmie */
.tekst p{color:#4a453f}
.cytat{font:italic 400 2rem/1.3 var(--serif);color:var(--zloto-ciemne);border-left:2px solid var(--zloto);margin:2rem 0 0;padding:.2em 0 .2em 1.2em}
.kolaz{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kolaz .odslona{aspect-ratio:3/4}
.kolaz .odslona:first-child{grid-row:span 2;aspect-ratio:auto}
.kolaz img{width:100%;height:100%;object-fit:cover}
.liczby{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.liczby div{padding:10px 20px;border-left:1px solid rgba(197,161,101,.25)}
.liczby div:first-child{border-left:0}
.liczby b{display:block;font:500 clamp(2.8rem,5vw,4rem)/1 var(--serif);color:var(--zloto-jasne);font-variant-numeric:tabular-nums lining-nums}
.liczby span{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.wartosci{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;text-align:center}
.wartosci p{color:#5d5852}

/* oferta */
.oferta-lista{display:grid;gap:70px}
.oferta-poz{display:grid;grid-template-columns:5fr 6fr;gap:60px;align-items:center}
.oferta-poz:nth-child(even) > :first-child{order:2}
.oferta-poz .odslona{aspect-ratio:4/3;box-shadow:0 30px 60px -35px rgba(0,0,0,.5)}
.oferta-poz img{width:100%;height:100%;object-fit:cover}
.oferta-znak{aspect-ratio:4/3;background:var(--grafit) url(../img/ziarno-ciemne.webp);position:relative;display:grid;place-items:center}
.oferta-znak::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(197,161,101,.18),transparent 60%)}
.oferta-znak svg{width:96px;fill:none;stroke:var(--zloto);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;position:relative}
.numer{font:500 1rem var(--sans);letter-spacing:.2em;color:var(--zloto-tekst)}
.oferta-poz p{color:#5d5852}

/* galeria */
.filtry{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.filtry + .galeria{margin-top:40px}
.filtry + .uwaga{margin-top:0;margin-bottom:28px}
.filtry button{background:none;border:1px solid #cdc5b8;padding:10px 20px;font:500 .76rem var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;color:#57514a}
.filtry button.aktywny,.filtry button:hover{background:var(--czern);color:var(--zloto-jasne);border-color:var(--czern)}
.filtry-mat button{border-radius:999px;padding:8px 18px;letter-spacing:.1em;text-transform:none;font-size:.85rem}
.galeria{columns:3 300px;column-gap:18px}
.g-el{break-inside:avoid;margin:0 0 18px;background:#fff;box-shadow:0 14px 30px -24px rgba(0,0,0,.4)}
.g-el[hidden]{display:none}
.g-otworz{display:block;width:100%;padding:0;border:0;cursor:zoom-in;background:#ddd}
.g-otworz img{width:100%;transition:transform .7s var(--e)}
.g-otworz:hover img{transform:scale(1.03)}
.g-el figcaption{padding:14px 18px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.g-tytul{font:500 1.25rem var(--serif);flex:1 1 100%}
.g-mat{font-size:.85rem;color:var(--szary)}
.g-cena{font-weight:600;color:var(--zloto-tekst);margin-left:auto}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s}
.lightbox.otwarty{opacity:1}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center}
.lightbox img{max-height:calc(100vh - 160px);max-height:calc(100svh - 160px);width:auto;object-fit:contain;transform:scale(.96);transition:transform .35s var(--e),opacity .18s}
.lightbox.otwarty img{transform:none}
.lightbox img.zmiana{opacity:0}
.lightbox figcaption{color:#ddd;text-align:center;padding-top:14px;display:flex;flex-direction:column;gap:2px;transform:translateY(8px);opacity:0;transition:transform .3s .1s,opacity .3s .1s}
.lightbox.otwarty figcaption{transform:none;opacity:1}
.lb-licznik{color:var(--zloto);font:500 .72rem var(--sans);letter-spacing:.2em;margin-bottom:6px}
.lb-tytul{font:500 1.5rem var(--serif);color:#fff}
.lb-mat{color:#aaa;font-size:.9rem}
.lb-cena{color:var(--zloto-jasne);font-weight:600}
.lb-zamknij,.lb-nawig{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font:300 3rem/1 var(--sans);padding:10px 18px;opacity:.75;z-index:2}
.lb-zamknij:hover,.lb-nawig:hover{opacity:1;color:var(--zloto-jasne)}
.lb-zamknij{top:10px;right:14px}
.lb-wstecz{left:6px;top:50%;transform:translateY(-50%)}
.lb-dalej{right:6px;top:50%;transform:translateY(-50%)}

/* cennik */
.cennik{list-style:none;padding:0;margin:0 0 30px}
.cennik li{display:flex;align-items:baseline;gap:14px;padding:20px 0;border-bottom:1px solid var(--kamien2)}
.cennik li div{display:flex;flex-direction:column}
.cennik li b{font:500 1.45rem var(--serif)}
.cennik li span{color:var(--szary);font-size:.92rem}
.cennik li i{flex:1;background:var(--zloto-intarsja) bottom/100% 1px no-repeat;opacity:.5;height:1em;transform:translateY(-6px);min-width:20px}
.cennik strong{font-weight:600;color:var(--zloto-tekst);white-space:nowrap}
.info-admin{background:#fff6e0;border:1px solid #e6cf98;padding:12px 16px;font-size:.92rem}

/* kontakt */
.kontakt-siatka{display:grid;grid-template-columns:5fr 6fr;gap:60px;align-items:start}
.kontakt-dane{display:grid;gap:14px}
.kontakt-karta{position:relative;display:flex;gap:18px;align-items:center;text-decoration:none;background:#fff;padding:20px 24px;box-shadow:0 14px 30px -26px rgba(0,0,0,.45);transition:transform .25s}
.kontakt-karta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#8a6a35,#f1dca5 50%,#8a6a35)}
a.kontakt-karta:hover{transform:translateX(4px)}
.kontakt-karta svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--zloto-ciemne);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.kontakt-karta span{display:flex;flex-direction:column;font:500 1.3rem/1.3 var(--serif);word-break:break-word;font-variant-numeric:lining-nums}
.kontakt-karta small{font:500 .7rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--szary);margin-bottom:4px}
.mapa iframe{width:100%;aspect-ratio:4/3;border:0;filter:grayscale(.6) contrast(1.05);box-shadow:0 30px 60px -35px rgba(0,0,0,.5)}

/* stopka */
.stopka{color:#aaa49a;padding:80px 0 0;font-size:.93rem}
.stopka-siatka{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.stopka h3{font:500 .72rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--zloto);margin-bottom:18px}
.stopka a{text-decoration:none}
.stopka a:hover{color:var(--zloto-jasne)}
.logo-stopka{margin-bottom:20px;align-items:flex-start}
.stopka-motto{font:italic 400 1.25rem var(--serif);color:#ddd}
.stopka-est{font:500 .72rem var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--zloto)}
.stopka-linki{display:flex;flex-direction:column;gap:6px}
.fb-link{display:inline-flex;align-items:center;gap:8px}
.stopka-dol{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid #2a2a2a;margin-top:60px;padding-top:22px;padding-bottom:26px;font-size:.82rem;color:#8f8980}

/* ---------- odsłonięcie przy przewijaniu */
.pokaz{opacity:0;transform:translateY(34px);transition:opacity 1s var(--e),transform 1s var(--e);transition-delay:calc(min(var(--i,0),5)*90ms)}
.pokaz.widoczny{opacity:1;transform:none}
h2.pokaz{clip-path:inset(-.2em 0 100% 0);transform:translateY(.3em);transition-property:opacity,transform,clip-path}
h2.pokaz.widoczny{clip-path:inset(-.2em 0 -.2em 0)}
.ozdobnik.pokaz{opacity:1;transform:scaleX(0);transition:transform 1.1s var(--e) .25s}
.ozdobnik.widoczny{transform:scaleX(1)}
.ozdobnik.pokaz::after{transform:translate(-50%,-50%) rotate(45deg) scale(0);transition:transform .5s .9s}
.ozdobnik.widoczny::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)}
.odslona{position:relative;overflow:hidden}
.odslona.pokaz::after{content:"";position:absolute;inset:0;background:var(--kamien);z-index:2;transition:transform 1.1s var(--e) calc(min(var(--i,0),5)*90ms)}
.sekcja-ciemna .odslona::after{background:var(--grafit)}
.odslona.widoczny::after{transform:translateY(-101%)}
.odslona.pokaz img{transform:scale(1.08);transition:transform 1.4s var(--e)}
.odslona.widoczny img{transform:none}
.odslona.pokaz{opacity:1;transform:none}

/* ---------- wejścia (tylko bez ograniczenia ruchu) */
@media (prefers-reduced-motion:no-preference){
  .wiersz>span{transform:translateY(108%);animation:wejscie 1s var(--e) forwards}
  .w1>span{animation-delay:.25s}
  .w2>span{animation-delay:.4s}
  .podtytul .wiersz>span{animation-delay:.2s}
  @keyframes wejscie{to{transform:none}}
  .hero .nadtytul{opacity:0;letter-spacing:.5em;animation:nad .9s var(--e) .15s forwards}
  .podtytul .nadtytul{opacity:0;animation:miekko .8s .1s forwards}
  @keyframes nad{to{opacity:1;letter-spacing:.28em}}
  .hero h1 em{position:relative;display:inline-block}
  .hero h1 em::after{content:"";position:absolute;left:.05em;right:.05em;bottom:-.02em;height:1px;background:var(--zloto);transform:scaleX(0);transform-origin:left;animation:kreska .9s var(--e) 1s forwards}
  @keyframes kreska{to{transform:none}}
  .hero-lead{opacity:0;animation:miekko .8s .7s forwards}
  .hero .btn{opacity:0;animation:miekko .8s .9s forwards}
  .hero-pasek span{opacity:0;animation:miekko .8s 1.2s forwards}
  @keyframes miekko{to{opacity:1}}
  .slab{opacity:0;transform:translateY(30px);animation:slab 1.1s var(--e) forwards}
  .slab:nth-child(1){animation-delay:.1s}
  .slab:nth-child(2){animation-delay:.22s}
  .slab:nth-child(3){animation-delay:.34s}
  .slab:nth-child(4){animation-delay:.46s}
  @keyframes slab{to{opacity:1;transform:none}}
  .zloto-tekst{background-position:120% 0}
  @keyframes polysk{to{background-position:0 0}}
  .hero .zloto-tekst{animation:polysk 1.8s ease-out 1s forwards}
  .zloto-tekst.widoczny{animation:polysk 1.8s ease-out .2s forwards}
  @keyframes blysk{0%,80%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
  .hero .btn-zloty::before{animation:blysk 7s 2.5s ease-in-out infinite}
  @media (hover:none){
    .kafel.widoczny::before,.probka.widoczny .probka-kamien::before{animation:blysk-raz 1.1s .4s var(--e) forwards}
    @keyframes blysk-raz{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .pokaz,.wiersz>span{opacity:1;transform:none}
  .odslona::after{display:none}
  .odslona.pokaz img{transform:none}
  h2.pokaz{clip-path:none;transform:none}
  .ozdobnik.pokaz{transform:scaleX(1)}
  .ozdobnik.pokaz::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)}
  .zloto-tekst{background-position:0 0}
  .hero-wew{transform:none;opacity:1}
  .podtytul::before{transform:none}
}

/* ---------- przejścia między stronami */
@view-transition{navigation:auto}
::view-transition-old(root){animation:zanik .25s ease both}
::view-transition-new(root){animation:pojaw .4s ease both}
@keyframes zanik{to{opacity:0}}
@keyframes pojaw{from{opacity:0}}
.naglowek{view-transition-name:naglowek}
::view-transition-group(naglowek){animation-duration:0s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- responsywność */
@media (max-width:1020px){
  .stopka-siatka{grid-template-columns:1fr 1fr}
  .menu{gap:20px}
}
@media (max-width:900px){
  .menu-przycisk{display:block;position:relative;z-index:60}
  .menu{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;background:rgba(12,12,12,.98);flex-direction:column;justify-content:center;gap:26px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .menu a{font-size:1rem}
  .menu.otwarte{opacity:1;visibility:visible}
  .menu-przycisk[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .menu-przycisk[aria-expanded=true] span:nth-child(2){opacity:0}
  .menu-przycisk[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .hero{justify-content:flex-start;padding-top:104px}
  .hero-slaby{position:relative;inset:auto;width:112%;margin-left:-6%;height:40vh;transform:skewX(-5deg);-webkit-mask-image:none;mask-image:none;gap:5px;margin-bottom:44px}
  .slab img{left:-60px;width:calc(100% + 120px);transform:skewX(5deg)}
  .slab span{display:none}
  .hero-wew{padding-top:0;padding-bottom:30px;transform:none;opacity:1}
  .hero-wew>*{max-width:none}
  .hero h1{font-size:clamp(2.6rem,11vw,3.6rem)}
  .hero .nadtytul{letter-spacing:.36em}
  .hero-bok{display:none}
  .dwie-kolumny,.kontakt-siatka,.oferta-poz,.manifest{grid-template-columns:1fr;gap:40px}
  .oferta-poz:nth-child(even) > :first-child{order:0}
  .probki:not(.probki-mala){grid-template-columns:1fr 1fr}
  .wartosci{grid-template-columns:1fr;gap:30px}
}
@media (max-width:700px){
  .podtytul::before{background-image:url(../img/pasmo-m.webp)}
  .podtytul{padding:140px 0 60px}
}
@media (max-width:600px){
  body{font-size:16px}
  .kontener{padding:0 16px}
  .sekcja{padding:72px 0}
  .logo-svg{width:124px}
  .hero-pasek{display:none}
  .hero-wew{padding-bottom:70px}
  .hero-slaby{height:28vh;margin-bottom:24px}
  .hero-wew{display:flex;flex-direction:column}
  .hero-lead{order:1;margin:1.4rem 0 0}
  .hero .przyciski{margin-top:1.4rem}
  .tasma{--bok:16px;gap:12px}
  .tasma-strzalka{display:none}
  .kafel-opis{font-size:1.1rem;padding:36px 16px 16px}
  .btn{width:100%;padding:0 16px;letter-spacing:.12em}
  .liczby{grid-template-columns:1fr;gap:26px}
  .liczby div{border-left:0}
  .probki{gap:12px}
  .probki-mala{grid-template-columns:repeat(4,1fr);gap:6px}
  .probki-mala b{font-size:.8rem}
  .stopka-siatka{grid-template-columns:1fr}
  .cennik li{flex-wrap:wrap}
  .cennik li i{display:none}
  .cennik strong{width:100%}
  .kroki li{grid-template-columns:52px 1fr}
  .kroki-ciemne li{grid-template-columns:44px 40px 1fr}
  .lb-nawig{font-size:2.2rem;padding:8px}
}
