:root{--bg:#0b0b0b;--text:#eaeaea;--muted:#bdbdbd;--gold:#d4af37;--card:#0f0f0f;--shadow:0 10px 25px rgba(0,0,0,.35)}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px,92%);margin:0 auto}
.center{text-align:center}

/* header nad overlayami */
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:12px 4%;background:rgba(0,0,0,.5);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(212,175,55,.15)}
.logo{display:flex;align-items:center;gap:10px;font-weight:600}
.logo img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.nav{display:flex;gap:22px}
.nav a{opacity:.9}
.nav a:hover,.nav a.active{color:var(--gold);opacity:1}
.burger{display:none;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}

/* sections */
.section{position:relative;min-height:60vh;display:flex;align-items:center;padding:70px 0;overflow:hidden}
#hero{min-height:72vh}
.section h1,.section h2{font-family:'Playfair Display',serif;letter-spacing:.5px}
.brand{font-size:clamp(38px,6vw,68px);margin:0 0 8px}
.tagline{color:var(--muted);margin:0 0 22px}
.section > .container{position:relative;z-index:2}

/* tła proste */
.bg-hero{background:url('../img/bg-hero.jpg') center/cover no-repeat}
.bg-about{background:url('../img/bg-about.jpg') center/cover no-repeat}
.bg-cta{background:url('../img/bg-cta.jpg') center/cover no-repeat}

/* 30% przyciemnienie */
.bg-hero::after,.bg-about::after,.bg-cta::after,.bg-offers::after,.bg-opinions::after,.bg-contact::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.30);z-index:1
}

/* oferty: blur tła */
.bg-offers{position:relative}
.bg-offers::before{
  content:"";position:absolute;inset:-20px;z-index:0;
  background:url('../img/bg-offers.jpg') center/cover no-repeat;
  filter:blur(3px);transform:scale(1.04)
}
.bg-offers > .container{position:relative;z-index:2}

/* blur pod "O mnie" */
.bg-about{position:relative}
.bg-about::before{
  content:"";position:absolute;inset:-20px;z-index:0;
  background:url('../img/bg-about.jpg') center/cover no-repeat;
  filter:blur(3px);transform:scale(1.04)
}
.bg-about > .container{position:relative;z-index:2}

/* Opinie (podstrona) */
.bg-opinions{position:relative;background:url('../img/bg-opinions.jpg') center/cover no-repeat}
.bg-opinions::before{
  content:"";position:absolute;inset:-20px;z-index:0;
  background:url('../img/bg-opinions.jpg') center/cover no-repeat;
  filter:blur(3px);transform:scale(1.04)
}
.bg-opinions > .container{position:relative;z-index:2}

/* Kontakt (podstrona) */
.bg-contact{position:relative;background:url('../img/bg-contact.jpg') center/cover no-repeat}
.bg-contact::before{
  content:"";position:absolute;inset:-20px;z-index:0;
  background:url('../img/bg-contact.jpg') center/cover no-repeat;
  filter:blur(3px);transform:scale(1.04)
}
.bg-contact > .container{position:relative;z-index:2}

/* przyciski */
.btn{display:inline-block;padding:12px 20px;border-radius:999px;border:1.5px solid var(--gold);transition:transform .15s ease, background .2s ease, color .2s ease;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--gold);color:#111;border-color:var(--gold)}
.btn-outline{background:transparent;color:var(--text)}
.btn-outline:hover{background:rgba(212,175,55,.1)}
.btn.lg{padding:14px 26px;font-size:18px}

/* pills */
.pill-list{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.pill-list li{list-style:none;border:1px solid rgba(212,175,55,.3);padding:8px 12px;border-radius:999px;opacity:.9}

/* oferty */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.offer-card{background:var(--card);border:1px solid rgba(212,175,55,.35);border-radius:18px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.offer-card img{border-radius:14px;aspect-ratio:4/5;object-fit:cover}
.offer-card .lead{color:var(--muted)}
.offer-card .bullets{margin:0 0 6px 18px}
.offer-card .meta{display:flex;justify-content:space-between;font-size:14px;color:#cfcfcf;margin:6px 0}
.offer-card .price{font-weight:600;color:var(--gold);margin-bottom:8px}
.featured{border-width:2px}
.ribbon{position:absolute;top:12px;right:-40px;background:var(--gold);color:#111;padding:6px 60px;transform:rotate(35deg);font-weight:600;box-shadow:var(--shadow)}

/* opinie siatka */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.review-card{aspect-ratio:1/1;background:var(--card);border:1px solid rgba(212,175,55,.35);border-radius:16px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}
.review-card .stars{color:var(--gold);font-size:20px}
.review-card .name{font-weight:600}

/* stopka + social */
.site-footer{padding:32px 0;border-top:1px solid rgba(212,175,55,.15);background:#0a0a0a}
.socials{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.social svg{width:28px;height:28px;display:block;fill:var(--gold);transition:opacity .2s ease, transform .1s ease}
.social.white svg{fill:#fff}
.social:hover svg{opacity:.85;transform:translateY(-1px)}

/* FAB i klik-przez overlaye */
.fab{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold);color:#111;border:1px solid var(--gold);box-shadow:var(--shadow);z-index:99999}
.section::before,.section::after{pointer-events:none}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.reveal.in-view{opacity:1;transform:none}

/* małe wyskakujące opinie */
.toast-review{position:fixed;z-index:70;max-width:280px;background:rgba(18,18,18,.96);border:1px solid rgba(212,175,55,.35);color:var(--text);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(10px);transition:opacity .25s ease, transform .25s ease}
.toast-review.show{opacity:1;transform:none}
.toast-review .star{color:var(--gold);font-size:14px}
.toast-review .name{font-weight:600;font-size:14px}
.toast-review .txt{font-size:14px;color:#d7d7d7}

/* responsive */
@media (max-width:960px){
  .offers{grid-template-columns:1fr 1fr}
  .reviews-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav{display:none;position:absolute;top:64px;right:4%;flex-direction:column;background:#0a0a0a;border:1px solid rgba(212,175,55,.25);border-radius:12px;padding:10px;box-shadow:var(--shadow)}
  .burger{display:block}
  .offers{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
}

/* parallax */
.bg-hero,.bg-cta{background-position:center calc(var(--py,0px));will-change:background-position}
.bg-offers::before,.bg-about::before,.bg-opinions::before,.bg-contact::before{
  transform:translateY(var(--py,0px)) scale(1.04); will-change:transform
}

/* tilt */
.offer-card{transform-style:preserve-3d;will-change:transform;transition:transform .12s ease}

/* particles canvas */
#hero{position:relative}
#hero canvas.particles{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35}

/* rating badge */
.rating-badge{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--gold);margin-left:10px;font-size:14px}
.rating-badge .stars{letter-spacing:2px}

/* pasek postępu */
.scrollbar{position:fixed;left:0;top:0;height:3px;background:var(--gold);width:0%;z-index:1000}

/* 8) gradientowy obrys nagłówków */
.brand, .section h2{
  background:linear-gradient(90deg,#fff,#f5e6a1 35%,#d4af37 65%,#8c6b1f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.6px rgba(212,175,55,.6);paint-order:stroke fill
}

/* 5) złoty glow na zdjęciach ofert */
.offer-card{transition:box-shadow .2s ease}
.offer-card:hover{box-shadow:var(--shadow),0 0 30px rgba(212,175,55,.25)}
.offer-card img{transition:filter .25s ease, outline-color .2s ease}
.offer-card:hover img{outline:2px solid rgba(212,175,55,.5);outline-offset:-2px;filter:saturate(1.05) contrast(1.03)}

/* 13) QR modal */
.qr-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1200}
.qr-modal.show{display:flex}
.qr-box{background:#111;border:1px solid rgba(212,175,55,.35);border-radius:16px;padding:14px;box-shadow:var(--shadow);text-align:center}
.qr-box img{width:220px;height:220px;display:block;margin:8px auto 6px;border-radius:12px}
.qr-close{margin-top:6px}

/* kontakt modal */
.contact-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1300}
.contact-modal.show{display:flex}
.contact-box{background:#111;border:1px solid rgba(212,175,55,.35);border-radius:16px;padding:18px;box-shadow:var(--shadow);width:min(420px,92%);text-align:center}
.contact-box h3{margin:0 0 8px;font-family:'Playfair Display',serif}
.contact-box p{margin:0 0 14px;color:var(--muted)}
.contact-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}
body.modal-open{overflow:hidden}

/* kontakt modal — większe okno, bez QR, bez skoków layoutu */
.contact-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1300}
.contact-modal.show{display:flex}
.contact-box{
  background:#111;border:1px solid rgba(212,175,55,.35);border-radius:16px;
  padding:24px 26px 20px;box-shadow:var(--shadow);
  width:min(720px,94%);max-width:720px;text-align:center
}
.contact-box h3{margin:0 0 10px;font-family:'Playfair Display',serif;font-size:28px}
.contact-box p{margin:0 0 16px;color:var(--muted)}
.contact-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}
body.modal-open{overflow:hidden}

/* modal Opinie – większe okno, bez kurczenia tła */
.opinions-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1300}
.opinions-modal.show{display:flex}
.opinions-box{
  background:#111;border:1px solid rgba(212,175,55,.35);border-radius:16px;
  padding:24px 26px 20px;box-shadow:var(--shadow);
  width:min(900px,96%);max-width:900px
}
.opinions-box h3{margin:0 0 12px;font-family:'Playfair Display',serif;font-size:28px;text-align:center}
.opinions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.opinions-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
@media (max-width:960px){ .opinions-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .opinions-grid{grid-template-columns:1fr} }

/* === MODALE (kontakt + opinie) === */
.contact-modal,
.opinions-modal{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); z-index:1300;
}
.contact-modal.show,
.opinions-modal.show{ display:flex; }

.contact-box,
.opinions-box{
  position:relative;
  background:#111;
  border:1px solid rgba(212,175,55,.35);
  border-radius:16px;
  box-shadow:var(--shadow);
  width:min(900px,94%);          /* szerokie, ale responsywne */
  max-height:90vh;               /* ograniczenie wysokości */
  overflow:auto;                 /* przewijanie w środku */
  -webkit-overflow-scrolling:touch;
  padding:26px 26px 20px;        /* miejsce na treść i dół z przyciskami */
}

/* nagłówki w modalach */
.contact-box h3,
.opinions-box h3{
  margin:0 0 12px;
  font-family:'Playfair Display',serif;
  font-size:28px; text-align:center;
}

/* grid opinii w modalach */
.opinions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:960px){ .opinions-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .opinions-grid{ grid-template-columns:1fr; } }

/* dół modalów – przyciski */
.contact-actions,
.opinions-actions{
  display:flex; gap:10px; justify-content:center; margin-top:14px;
}

/* X w prawym górnym rogu */
.modal-x{
  position:absolute; top:10px; right:12px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(212,175,55,.35);
  background:transparent; color:#fff; cursor:pointer;
}
.modal-x:hover{ background:rgba(212,175,55,.1); }

/* gdy modal otwarty – tło nie scrolluje */
body.modal-open{ overflow:hidden; }

/* === ŁADNY SCROLLBAR TYLKO W MODALU OPINIE (i opcjonalnie kontakt) === */
/* Firefox */
.opinions-box/*, .contact-box*/{
  scrollbar-width: thin; /* thin | auto */
  scrollbar-color: rgba(212,175,55,.75) rgba(255,255,255,.06);
  scrollbar-gutter: stable; /* bez „skakania” szerokości przy pojawieniu się scrolla */
}

/* Chrome / Edge / Safari (WebKit) */
.opinions-box/*, .contact-box*/::-webkit-scrollbar{
  width: 12px;            /* grubość paska */
}
.opinions-box/*, .contact-box*/::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 999px;
}
.opinions-box/*, .contact-box*/::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#d4af37,#8c6b1f);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
}
.opinions-box/*, .contact-box*/::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,#e7cc62,#9a7526);
}
.opinions-box/*, .contact-box*/::-webkit-scrollbar-corner{
  background: transparent;
}
/* Opinie — kompaktowe karty + ciaśniejsza siatka */
.reviews-grid,
.opinions-grid{
  gap:12px; /* było 16/18 */
}

/* mniejsze „kwadraty” */
.review-card{
  padding:12px;          /* było 16px */
  border-radius:12px;    /* było 16px */
  aspect-ratio:1/1;      /* zostają kwadraty, ale będą mniejsze przez 4 kolumny */
}

/* subtelnie mniejsze fonty w kartach */
.review-card .stars{ font-size:16px; } /* było 20px */
.review-card .name{  font-size:14px; }
.review-card p{      font-size:13px; line-height:1.35; }

/* na dużym ekranie pokaż 4 mniejsze karty w rzędzie (zamiast 3) */
@media (min-width: 1100px){
  .reviews-grid,
  .opinions-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* nadal responsywnie niżej */
@media (max-width: 960px){
  .reviews-grid,
  .opinions-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .reviews-grid,
  .opinions-grid{ grid-template-columns: 1fr; }
}
/* Opinie PRO */
.opinions-box{ position:relative; }
.opinions-note{margin-top:10px;color:var(--muted);font-size:12px;text-align:center}

.review-pro{
  background:var(--card);
  border:1px solid rgba(212,175,55,.28);
  border-radius:14px;
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--shadow);
}
.review-pro .rp-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.review-pro .rp-name{font-weight:600}
.review-pro .rp-verified{
  font-size:12px; padding:2px 8px; border-radius:999px;
  border:1px solid rgba(212,175,55,.45); color:var(--gold);
}
.review-pro .rp-meta{display:flex;gap:8px;color:#cfcfcf;font-size:13px}
.review-pro .rp-title{font-weight:600;font-size:15px}
.review-pro .rp-text{color:#d7d7d7;margin:0}
.review-pro .rp-sub{display:grid;grid-template-columns:1fr;gap:6px;margin-top:2px}
.review-pro .rp-sub > div{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.review-pro .stars{color:var(--gold);letter-spacing:1px}
.review-pro .rp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.review-pro .rp-report{font-size:12px;color:#bbb;text-decoration:underline dotted;opacity:.9}
.review-pro .rp-report:hover{opacity:1}

.opinions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){ .opinions-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .opinions-grid{grid-template-columns:1fr} }

/* X w rogu + układ modala */
.modal-x{
  position:absolute; top:10px; right:12px; width:34px; height:34px;
  border-radius:50%; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(212,175,55,.35); background:transparent; color:#fff;
}
.modal-x:hover{ background:rgba(212,175,55,.1); }

/* przewijanie w środku modala (ładny scrollbar tylko w modalach) */
.opinions-box{ max-height:90vh; overflow:auto; -webkit-overflow-scrolling:touch; }
.opinions-box::-webkit-scrollbar{ width:10px }
.opinions-box::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:8px }
.opinions-box::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(212,175,55,.9), rgba(140,107,31,.9));
  border-radius:8px; border:1px solid rgba(0,0,0,.25)
}
.opinions-box{ scrollbar-width:thin; scrollbar-color:#c9a84b rgba(255,255,255,.06) }

/* drugi FAB – Opinie (po lewej od kontaktu) */
.fab-opinie{
  right: 84px;   /* 18px odstępu + 54px szerokość kółka + ~12px przerwy */
  bottom: 18px;
}

/* na bardzo wąskich ekranach ułóż je w kolumnie */
@media (max-width: 420px){
  .fab-opinie{
    right: 18px;
    bottom: 82px; /* 54px wysokość + ~10–12px przerwy */
  }
}