/* =========================================================
   NAVBAR – start/into z klasami
   ========================================================= */

header.site-top{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  transition: .35s ease;
  will-change: background, box-shadow, border-color;
}

/* start: transparent (baner pod nav) */
.navbar--color--transparent{
  background: rgba(0,0,0,.10) !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
}
.navbar--color--transparent .top-link,
.navbar--color--transparent .brand-name,
.navbar--color--transparent .brand-sub{
  color: rgba(255,255,255,.92) !important;
}
.navbar--color--transparent .top-link:hover{ color:#fff !important; }
.navbar--color--transparent .btn-call{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
}

/* into: white (po scrollu) */
.navbar--color--white{
  background: rgba(255,255,255,.98) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
  backdrop-filter: saturate(160%) blur(10px) !important;
}
.navbar--color--white .top-link,
.navbar--color--white .brand-name,
.navbar--color--white .brand-sub{
  color: rgba(10,10,10,.86) !important;
}
.navbar--color--white .btn-call{
  background: #111 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  color: #fff !important;
}

/* rozmiary (opcjonalne) */
.navbar--size--xl{ padding: 18px 0 !important; }
.navbar--size--md{ padding: 10px 0 !important; }
@media(max-width: 640px){
  .navbar--size--xl{ padding: 14px 0 !important; }
  .navbar--size--md{ padding: 10px 0 !important; }
}

/* hero offset pod fixed navbar */
.hero{ padding-top: 86px; }
@media(max-width: 640px){
  .hero{ padding-top: 92px; }
}

/* anchor offset pod fixed nav */
:target{ scroll-margin-top: 120px; }
@media(max-width: 640px){ :target{ scroll-margin-top: 130px; } }

/* =========================================================
   Opinie – facelift
   ========================================================= */
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top: 10px;
  margin-bottom: 16px;
}
.review-card{
  position:relative;
  border-radius:18px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 42px rgba(0,0,0,.20);
  overflow: visible;
}
.review-quote{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px;
  border-radius:12px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  opacity:.9;
}
.review-top{
  display:flex; gap:12px; align-items:center;
  margin-bottom:12px;
}
.review-avatar{
  width:44px; height:44px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  flex: 0 0 auto;
}
.review-name{ font-weight:900; }
.review-meta{ opacity:.78; font-size:12px; margin-top:1px; }
.review-stars{ font-size:12px; letter-spacing:.06em; opacity:.92; margin-top:3px; }
.review-text{ margin:0; font-size:14px; line-height:1.55; opacity:.92; }
.review-tag{
  display:inline-flex; gap:8px; align-items:center;
  margin-top:12px; font-size:12px; opacity:.8;
}
.review-tag i{
  width:8px; height:8px;
  border-radius:99px;
  background: rgba(255,255,255,.55);
  display:inline-block;
}

/* =========================================================
   Footer map + kontakt
   ========================================================= */
.footer-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
  align-items:stretch;
  margin-top: 16px;
  margin-bottom: 10px;
}
@media(max-width: 860px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-map, .footer-nap{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  overflow: hidden;
}
.footer-map{ min-height:260px; }
.footer-map iframe{ width:100%; height:100%; border:0; display:block; }
.footer-nap{ padding:14px 14px 12px; overflow: visible; }
.footer-nap h3{ margin:0 0 8px; font-size:16px; letter-spacing:.01em; }

/* kontakt footer – przeniesione inline style */
.contact-footer-title{ margin: 18px 0 6px; }
.contact-footer-lead{ margin: 0 0 10px; }
.contact-footer-cta{ margin: 10px 0 6px; }
.contact-footer-ghost{ color:#5a5a5a; }

/* =========================================================
   Anti-clipping + większe marginesy kafli
   ========================================================= */
.section, .container, .cards, .why-grid, .reviews-grid, .footer-grid{ overflow: visible !important; }
.cards, .reviews-grid, .footer-grid{ padding-top: 14px; padding-bottom: 14px; }
.card, .review-card, .footer-map, .footer-nap{ margin-top: 12px; margin-bottom: 12px; }
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0; /* pod overlay */
}
.hero-bg img{ display:block; }
.hero-overlay{ position:absolute; inset:0; z-index:1; }
.hero-inner{ position:relative; z-index:2; }
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.top-link{ padding: 10px 10px; } /* powiększa tap area */
@media(max-width:640px){
  .top-link{ padding: 12px 10px; }
}
.lead-form input,
.lead-form textarea{
  font-size:16px;
}
/* ==========================
   MOBILE NAV (hamburger)
   ========================== */

/* hamburger button */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background: rgba(255,255,255,.92);
}

/* mobile dropdown panel */
.mobile-nav{
  display:none;
  position:absolute;
  left:12px;
  right:12px;
  top:100%;
  margin-top:10px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(20,20,20,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 42px rgba(0,0,0,.30);
}
.mobile-nav a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
}
.mobile-nav a:hover{
  background: rgba(255,255,255,.10);
}

/* aktywne menu */
.site-top.is-menu-open .mobile-nav{ display:block; }
.site-top.is-menu-open .nav-toggle{ border-color: rgba(255,255,255,.35); }

/* MOBILE: chowamy linki z desktopowego menu, zostaje call + burger */

@media(min-width: 861px){
  .top-actions .top-link{ display:inline-block !important; }
}
@media(max-width: 860px){

  .nav-toggle{ display:inline-flex; }

  /* na mobile zmniejszamy padding navbara */
  .navbar--size--xl{ padding: 10px 0 !important; }
}
.navbar--color--white .nav-toggle{
  background: rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.12);
}
.navbar--color--white .nav-toggle span{ background: rgba(0,0,0,.75); }
.navbar--color--white .mobile-nav{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.10);
}
.navbar--color--white .mobile-nav a{ color: rgba(10,10,10,.88); }
.navbar--color--white .mobile-nav a:hover{ background: rgba(0,0,0,.06); }
/* Desktop menu visible */
.desk-nav{
  display:flex;
  gap: 18px;
  align-items:center;
}

/* hamburger hidden on desktop */
.nav-toggle{ display:none; }

/* Mobile: ukryj desk-nav, pokaż hamburger */
@media(max-width: 860px){
  .desk-nav{ display:none !important; }
  .nav-toggle{ display:inline-flex !important; }
}

@media (max-width: 980px) {
.hero-grid {
        margin-top: 7vh;
}
@media (max-width: 520px) {
    .btn-call {
        font-size: 8px !important;
        
    }}
}