:root{
  --bg:#ffff;
  --surface:#fff;
  --text:#141821;
  --muted:#5b6572;
  --nav:#ffffff;
  --stroke:#e7ebf0;
  --brand:#2f6df6;
  --brand2:#7a5cff;
  --fb:#1877f2;
  --radius-lg:22px;
  --container:1120px;

  --nav-h:80px;
  --logo-h:56px;
  --logo-h-sm:36px;

  --section-gap:56px;
  --section-gap-sm:40px;

  --star:#f5b301;

  --field:#e8ecfb;

  /* oddech pod sticky nav */
  --breathe:24px;
}

@media (max-width:900px){
  :root{ --breathe:16px; }
}

*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; }

/* JEDNA wspólna definicja container */
.container{ width:min(100%, var(--container)); margin-inline:auto; padding-inline:22px }

/* NAVBAR */
.site-header{position:sticky; top:0; z-index:40; background:var(--nav); border-bottom:1px solid var(--stroke)}
.nav{height:var(--nav-h); display:flex; align-items:center; justify-content:flex-end; gap:16px}
.brand{margin-right:auto; display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand-logo{height:var(--logo-h); width:auto; display:block}
.main-nav{display:flex; gap:28px}
.main-nav a{color:#2a3240; text-decoration:none; font:500 15px/1.2 Inter}
.main-nav a:hover{color:var(--brand)}
.nav-actions{display:flex; align-items:center; gap:12px}
.btn-grad{--pad-x:16px; --h:36px; display:inline-flex; align-items:center; justify-content:center; height:var(--h); padding:0 var(--pad-x); border-radius:999px; text-decoration:none; color:#fff; font:600 14px/1 Inter; background:linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); box-shadow:0 8px 22px rgba(47,109,246,.25); white-space:nowrap}
.btn-grad:hover{transform:translateY(-1px)}
.fb{width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:#1877f2; border:1px solid var(--stroke); background:#fff}

/* HAMBURGER (SVG ikony) */
.menu-toggle{display:none; width:42px; height:42px; padding:8px; border:1px solid var(--stroke); border-radius:10px; background:#fff; cursor:pointer; appearance:none; outline:none; color:#2a3240}
.menu-toggle .i{width:100%; height:100%; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; fill:none; display:none}
.menu-toggle .i-menu{display:block}
.menu-toggle[aria-expanded="true"] .i-menu{display:none}
.menu-toggle[aria-expanded="true"] .i-close{display:block}

/* PANEL MOBILNY */
.mobile-menu{position:fixed; left:0; right:0; top:var(--nav-h); background:#fff; border-top:1px solid var(--stroke); box-shadow:0 10px 30px rgba(21,35,70,.06); padding:10px 20px 16px}
.mobile-menu nav{display:flex; flex-direction:column}
.mobile-menu a{color:#2a3240; text-decoration:none; font:600 15px/1.2 Inter; padding:12px 2px}
.mobile-menu .fb-row{color:#1877f2}

/* HERO — padding-top zamiast margin-top (unikamy collapsing margins) */
.hero{
  padding-top: calc(var(--section-gap) + var(--breathe));
  padding-bottom: var(--section-gap);
}
.hero-box{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; background:#dbe1e8; box-shadow:0 10px 30px rgba(21,35,70,.12)}
.hero-box img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92)}
.hero-overlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:44px; background:linear-gradient(115deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%); color:#fff}
.hero-overlay h1{margin:0 0 10px 0; font:700 clamp(30px,4.6vw,56px)/1.1 Poppins, Inter, sans-serif; letter-spacing:.2px; text-shadow:0 2px 6px rgba(0,0,0,.35)}
.hero-overlay p{margin:0; max-width:740px; color:#eef2f6; font:500 clamp(14px,1.6vw,18px)/1.5 Inter}

/* OFERTA — również padding-top */
.offer{
  padding-top: calc(var(--section-gap) + var(--breathe));
  padding-bottom: var(--section-gap);
}
.offer h2{font:700 clamp(22px,3.2vw,32px)/1.2 Poppins, Inter, sans-serif; margin:0 0 18px 0}
.offer-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px 28px}
.offer-list li{display:flex; align-items:center; gap:10px; font:500 15px/1.2 Inter; color:#2a3240}
.offer-list .ico{width:26px; height:26px; display:inline-flex; color:#2d3a8c}
.offer-list .ico svg{width:100%; height:100%; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none}
.offer-list .ico svg circle,.offer-list .ico svg rect,.offer-list .ico svg path{vector-effect:non-scaling-stroke}
.lead{margin:26px 0 0 0; color:var(--muted); font-size:1.02rem}

/* PARTNERZY */
.partners{
  padding-top: calc(var(--section-gap) + var(--breathe));
  padding-bottom: var(--section-gap);
}
.partners h2{font:700 clamp(22px,3vw,28px)/1.2 Poppins, Inter, sans-serif; margin:0 0 14px 0}
.partners-logos{
  display:flex; align-items:center; justify-content:center;
  gap:32px; flex-wrap:wrap;
}
.partners-logos img{
  height:80px; width:auto; object-fit:contain; display:block;
  background:#fff; padding:10px 16px; border-radius:14px;
  border:1px solid var(--stroke);
  box-shadow:0 8px 24px rgba(21,35,70,.06);
  filter:none; opacity:1;
  transition:.2s ease;
}
.partners-logos img:hover{ transform:translateY(-2px) }
@media (max-width:900px){
  .partners-logos img{ height:40px; padding:8px 12px; border-radius:12px; }
}

/* OPINIE */
.testimonials{
  padding-top: calc(var(--section-gap) + var(--breathe));
  padding-bottom: var(--section-gap);
}
.testimonials h2{font:700 clamp(22px,3vw,28px)/1.2 Poppins, Inter, sans-serif; margin:0 0 14px 0}
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.cols article h3{margin:0 0 6px 0; font:700 14px/1.2 Inter}
.cols .quote{margin:8px 0 0 0; color:#445164; font-style:italic}
.stars{display:flex; gap:4px; color:var(--star)}
.stars svg{width:18px; height:18px}
.stars svg path{fill:currentColor}

/* RWD */
@media (max-width:1024px){ .offer-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .hero{padding-top: calc(var(--section-gap-sm) + var(--breathe)); padding-bottom:var(--section-gap-sm)}
  .offer{padding-top: calc(var(--section-gap-sm) + var(--breathe)); padding-bottom:var(--section-gap-sm)}
  .partners{padding-top: calc(var(--section-gap-sm) + var(--breathe)); padding-bottom:var(--section-gap-sm)}
  .testimonials{padding-top: calc(var(--section-gap-sm) + var(--breathe)); padding-bottom:var(--section-gap-sm)}
  .cols{grid-template-columns:1fr; gap:16px}
}
@media (max-width:720px){
  .main-nav{display:none}
  .nav-actions{display:flex; order:2}
  .nav-actions .fb{display:none}
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center; order:3}
  .brand-logo{height:var(--logo-h-sm)}
  .btn-grad{--pad-x:12px; --h:34px; font-size:13px}
  body.menu-open{overflow:hidden}
}
@media (min-width:721px){ .mobile-menu{display:none !important} }

/* FOOTER */
.site-footer{border-top:1px solid var(--stroke); background:#fff}
.site-footer .container{padding-block: calc(22px + var(--breathe)); text-align:center}
.site-footer p{margin:0; color:#6b7684; font-size:.95rem}

/* --------------------------- O nas -------------------------------- */
html, body { height: 100%; }
body {
  min-height: 100dvh; 
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111;
  margin: 0;
}
main { flex: 1 0 auto; }
.footer { margin-top: auto; }  

.about .container { max-width: 1100px; margin-inline: auto; padding-inline: 16px; }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
  margin-top: clamp(18px, 3vw, 28px);
}

.about__media {
  display: flex;
  justify-content: center;
}
.about__media figure { margin: 0; }
.about__media img {
  width: 80%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.why-card {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.why-card h2 {     
  margin: 0 0 12px 0;
  font-size: clamp(20px, 2.2vw, 26px);
}

.why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 28px;
}
.why-list li {
  position: relative;
  padding-left: 18px;
  break-inside: avoid;
  margin: 6px 0;
}
.why-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #111;
}

@media (max-width: 920px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media img { width: 100%; }
  .why-list { columns: 1; }
}

/* --------------------------- Oferta -------------------------------- */
.offer-section {
  flex: 1;
  padding: 60px 80px;
}

.offer-section h2 {
  font-size: 28px;
  margin-bottom: 40px;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.offer-item img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.offer-item h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

.offer-item p {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

@media (max-width: 1024px) {
  .offer-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 kolumny na tablet */
  }
}

@media (max-width: 600px) {
  .offer-grid {
    grid-template-columns: 1fr; /* 1 kolumna na telefon */
  }
}

/* --------------------------- Realizacje -------------------------------- */
.page--realizacje { background: #fff; } /* tło białe */
.section-title { font-size: 28px; font-weight: 700; margin: 24px 0 16px; }

/* Siatka: desktop 3 kolumny, tablet 2, mobile 1 – jak w Figma */
.gallery {
  list-style: none; padding: 0; margin: 16px 0 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 1024px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .gallery { grid-template-columns: 1fr; } }

.gallery__item { display: block; }
.gallery__link { display: block; text-decoration: none; color: inherit; outline: none; }

.tile {
  position: relative; overflow: hidden; border-radius: 14px; margin: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  background: #f6f7f8;
}
.tile img {
  display: block; width: 100%; height: 260px; object-fit: cover;
  transform: scale(1); transition: transform .35s ease, filter .35s ease;
  will-change: transform;
  filter: saturate(1);
}

/* Overlay z nazwą realizacji */
.tile__caption{
  position: absolute; inset: auto 0 0 0; padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color: #fff; font-weight: 700; font-size: 18px; letter-spacing:.2px;
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

/* Hover / focus: powiększenie i podpis */
.gallery__link:focus .tile img,
.gallery__link:hover .tile img { transform: scale(1.05); filter: saturate(1.05); }
.gallery__link:focus .tile__caption,
.gallery__link:hover .tile__caption { opacity: 1; transform: translateY(0); }

/* Widoczny focus dla dostępności */
.gallery__link:focus { box-shadow: 0 0 0 3px #3b82f6; border-radius: 16px; }

/* Lightbox */
.lightbox[hidden]{ display:none; }
.lightbox{
  position: fixed; inset:0; background: rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; padding:24px; z-index:9999;
}
.lightbox img{ max-width: min(1100px, 92vw); max-height: 76vh; border-radius: 10px; }
.lightbox__caption{ color:#fff; font-weight:600; text-align:center; }
.lightbox__close{
  position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%;
  border:none; background:#ffffff; cursor:pointer; font-size:24px; line-height:40px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.lightbox__close:focus{ outline:2px solid #3b82f6; }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:none; border-radius:50%;
  background:#fff; cursor:pointer; font-size:26px; line-height:44px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.lightbox__nav--prev{ left:18px; }
.lightbox__nav--next{ right:18px; }
.lightbox__nav:focus{ outline:2px solid #3b82f6; }

.lightbox__counter{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:#fff; font-weight:600; background:rgba(0,0,0,.35);
  padding:6px 10px; border-radius:8px;
}

/* --------------------------- KONTAKT -------------------------------- */
.contact { margin-top: var(--section-gap); margin-bottom: var(--section-gap); }
.contact .container{
  display:grid; grid-template-columns: 1fr 1fr; gap:48px;
}
@media (max-width: 900px){
  .contact .container{ grid-template-columns:1fr; gap:32px; }
}

/* Formularz */
.contact form{ display:grid; gap:16px; }
.contact .field{ display:grid; gap:8px; }
.contact .field label{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;
}
.contact input[type="text"],
.contact input[type="email"],
.contact input[type="tel"],
.contact textarea{
  width:100%; border:0; border-radius:14px; background:var(--field);
  padding:18px 20px; font-size:16px; outline:none;
  transition: box-shadow .15s ease;
}
.contact textarea{ resize:vertical; min-height:140px; }
.contact input:focus, .contact textarea:focus{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);
}

/* Błędy / komunikaty */
.contact .error{ color:#dc2626; font-size:13px; min-height:1em; margin:4px 2px 0; }
.contact #formAlert{ margin-top:4px; font-size:14px; }
.contact .hp{ display:none !important; } /* honeypot */

/* Przycisk wysyłki spójny z przyciskiem gradientowym */
.contact .btn-submit{
  justify-self:start; border:0; border-radius:12px; padding:12px 22px; font:600 14px/1 Inter;
  color:#fff; background:linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  box-shadow:0 8px 22px rgba(47,109,246,.25); cursor:pointer;
}
.contact .btn-submit:hover{ transform:translateY(-1px); }
.contact .btn-submit[disabled]{ opacity:.7; cursor:progress; }

/* Dane kontaktowe (prawa kolumna) */
.contact-data{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:14px; }
.contact-data .label{ display:block; font-weight:700; font-size:18px; margin-bottom:4px; }
.contact-data .value{ color:var(--text); font-size:18px; text-decoration:none; }

/* Mapa */
.map-wrap{
  width:100%; aspect-ratio:16/11; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.map-wrap iframe{ width:100%; height:100%; border:0; }