/* =========================================================
   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: 78px; }
}

/* 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;
}
.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; }

@media(max-width:640px){
  .top-link{ padding: 12px 10px; }
}

.lead-form input,
.lead-form textarea{
  font-size:16px;
}

/* =========================================================
   NOTICE
   ========================================================= */

.notice-slot{
  min-height: 56px;
}
.notice-slot .notice{
  transition: opacity .35s ease, visibility .35s ease;
}
.notice-slot .notice.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================
   DESKTOP / MOBILE NAV
   ========================================================= */

.desk-nav{
  display:flex;
  gap:18px;
  align-items:center;
}

/* call button */
.site-top .btn-call{
  white-space: nowrap;
}

/* =========================================================
   MOBILE NAV (arrow toggle instead of hamburger)
   ========================================================= */

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.nav-toggle:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.35);
}

.nav-toggle:focus-visible{
  outline:2px solid rgba(255,255,255,.45);
  outline-offset:2px;
}

/* ukrywamy stare kreski jeśli jeszcze są w HTML */
.nav-toggle span{
  display:none;
}

/* chevron */
.nav-toggle::before{
  content:"";
  width:12px;
  height:12px;
  border-right:2px solid rgba(255,255,255,.92);
  border-bottom:2px solid rgba(255,255,255,.92);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s ease;
  transform-origin:center;
}

/* po otwarciu menu – strzałka do góry */
.site-top.is-menu-open .nav-toggle::before,
.nav-toggle[aria-expanded="true"]::before{
  transform: rotate(-135deg) translateY(-1px);
}

/* 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); }

/* white navbar state */
.navbar--color--white .nav-toggle{
  background: rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.12);
}
.navbar--color--white .nav-toggle:hover{
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.18);
}
.navbar--color--white .nav-toggle::before{
  border-right-color: rgba(0,0,0,.78);
  border-bottom-color: rgba(0,0,0,.78);
}
.navbar--color--white .nav-toggle:focus-visible{
  outline:2px solid rgba(0,0,0,.22);
}
.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);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

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

@media(max-width: 860px){
  .desk-nav{ display:none !important; }

  .nav-toggle{
    display:inline-flex !important;
    margin-right: 0 !important;
  }

  .navbar--size--xl{ padding: 10px 0 !important; }

  .site-top .btn-call{
    white-space: nowrap;
    font-size: 14px;
    padding: 10px 14px;
    margin-right: 0 !important;
  }
}

@media (max-width: 980px){
  .hero-grid{
    margin-top: 7vh;
  }
}

@media (max-width: 520px){
  .btn-call{
    white-space: nowrap !important;
  }
}

.top-link-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 12px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

@media (max-width: 767.98px){
  /* lepsza widoczność navbara na mobile */
  .navbar--color--transparent{
    background: rgba(0,0,0,.44) !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(10px);
  }

  .navbar--color--transparent .brand-name,
  .navbar--color--transparent .brand-sub,
  .navbar--color--transparent .top-link{
    color: rgba(255,255,255,.98) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
  }

  .navbar--color--transparent .btn-call{
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(255,255,255,.30) !important;
    color: #fff !important;
  }

  .navbar--color--transparent .nav-toggle{
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.30);
  }

  .site-top .top-inner{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    min-height: 64px;
    align-items: center;
  }

  .site-top.navbar--size--xl .top-inner,
  .site-top.navbar--size--md .top-inner{
    min-height: 64px;
  }

  .site-top .brand > a{
    gap: 8px !important;
    align-items: center;
  }

  .site-top .brand img{
    width: 30px !important;
    height: 30px !important;
  }

  .site-top .brand-text{
    line-height: 1.15;
  }

  .site-top .brand-name{
    font-size: 11px !important;
    line-height: 1.05;
    margin: 0;
  }

  .site-top .brand-sub{
    font-size: 9px !important;
    line-height: 1.15;
    margin: 0;
  }

  .site-top .top-actions{
    gap: 8px !important;
    align-items: center;
    margin-left: auto;
  }

  .site-top .btn-call{
    padding: 8px 12px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    min-height: 36px;
  }

  .site-top .nav-toggle,
  .site-top .nav-toggle--chevron{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
  }

  body:not(.home){
    padding-top: 92px;
  }

  #formularz,
  #oferta,
  #dlaczego,
  #opinie,
  #partnerzy,
  #cennik,
  #kontakt-stopka{
    scroll-margin-top: 90px;
  }

  .hero{
    padding-top: 78px !important;
  }

  .hero-inner{
    padding-top: 4px !important;
  }

  .hero-grid{
    gap: 14px !important;
  }

  .lead-card{
    margin-top: 0 !important;
  }
}

@media (max-width: 575.98px){
  .site-top{
    min-height: auto;
  }

  .site-top .brand-name{
    font-size: 11px;
  }

  .site-top .brand-sub{
    font-size: 9px;
  }

  .site-top .btn-call{
    padding: 9px 12px;
    font-size: 11px;
  }

  .site-top .nav-toggle--chevron{
    width: 42px;
    height: 42px;
  }
}

/* =========================
   Anchor offset
   ========================= */
#formularz,
#oferta,
#dlaczego,
#opinie,
#partnerzy,
#cennik,
#kontakt-stopka {
  scroll-margin-top: 110px;
}

@media (max-width: 480px){
  .site-top .top-inner{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 58px;
  }

  .site-top.navbar--size--xl .top-inner,
  .site-top.navbar--size--md .top-inner{
    min-height: 58px;
  }

  .site-top .brand img{
    width: 28px !important;
    height: 28px !important;
  }

  .site-top .btn-call{
    padding: 7px 10px !important;
    font-size: 10px !important;
    min-height: 34px;
  }

  .site-top .nav-toggle,
  .site-top .nav-toggle--chevron{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}