/* ====================== BAZA ====================== */
body{
  margin:0;
  font-family:Inter, sans-serif;
  color:#111827;
  background:#fff;
}
html, body{ overflow-x:hidden; }
body.no-scroll{ overflow:hidden; }

/* ====================== NAVBAR (desktop) ====================== */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  height:100px;
}
nav, .nav{
  max-width:1280px;
  margin:0 auto;
  height:100%;
  padding:8px 24px;
  display:flex;
  align-items:center;
  gap:24px;
  box-sizing:border-box;
}
.logo{
  position:relative;
  height:100%;
  margin-right:auto;
}
.logo img{
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  height:120px; width:auto; display:block;
  /* pointer-events:none; */
}
.nav-links{ display:flex; align-items:center; gap:18px; }
.nav-links a, nav a{ color:#fff; text-decoration:none; font-weight:600; }

/* Hamburger (wygląd) */
.menu-toggle{
  display:none; appearance:none; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.75); color:#fff;
  width:44px; height:44px; border-radius:12px;
  position:relative; cursor:pointer;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.menu-toggle:hover{ background:rgba(0,0,0,.9); border-color:rgba(255,255,255,.35); }
.menu-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.menu-toggle .bar{
  position:absolute; left:10px; right:10px;
  height:2px; background:#fff; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.menu-toggle .bar:nth-child(1){ top:14px; }
.menu-toggle .bar:nth-child(2){ top:21px; }
.menu-toggle .bar:nth-child(3){ top:28px; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){ top:21px; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* Overlay pod panel */
.nav-backdrop{
  position:fixed; inset:0; z-index:48;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.nav-backdrop.show{ opacity:1; pointer-events:auto; }

/* ====================== NAVBAR (mobile) ====================== */
@media (max-width:768px){
  header{ height:88px; }
  nav, .nav{ padding:8px 16px; gap:12px; }
  .logo img{ height:100px; }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  .nav-links{
    position:fixed;
    top:88px;                   /* dokładnie pod headerem */
    left:0; right:0; bottom:0;  /* pełny viewport */
    z-index:49;

    display:none;
    flex-direction:column; gap:12px;
    padding:16px clamp(16px,4vw,24px) calc(env(safe-area-inset-bottom, 0px) + 16px);
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(6px);
    -webkit-overflow-scrolling:touch;

    transform:translateY(-8px);
    opacity:0;
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav-links.open{ display:flex; transform:translateY(0); opacity:1; }

  .nav-links a{
    color:#fff; padding:12px 10px; width:100%;
    border-radius:10px; background:rgba(255,255,255,.06);
  }
  .nav-links a.btn{ background:#fff; color:#111827; font-weight:800; }
}
@media (min-width:1280px){ .logo img{ height:140px; }}

/* ====================== HERO (wideo) ====================== */
.hero{
  position:relative;
  height:min(100vh, 900px);
  overflow:hidden;
  background:#000;
  max-width:none; width:100%; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  flex:0 0 auto;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
  filter:brightness(.62);
}
.logo-float-wrap{ position:relative; z-index:1; }
.logo-float{ width:clamp(260px, 48vw, 880px); height:auto; filter:drop-shadow(0 8px 28px rgba(0,0,0,.45)); }

@media (prefers-reduced-motion:reduce){
  .a-orbit{ animation:none !important; }
}

/* ====================== SEKCJE / SIATKI ====================== */
section{ padding:80px 24px; }
section:not(.hero){ max-width:1280px; margin:0 auto; }
h2{ font-size:32px; margin-bottom:16px; }
.grid{ display:grid; gap:24px; }

.services{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.service{
  position:relative; overflow:hidden; border-radius:12px;
  color:#fff; height:280px; display:flex; align-items:flex-end;
}
.service img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.3s; }
.service:hover img{ transform:scale(1.05); }
.service .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.75)); }
.service .text{ position:relative; padding:20px; font-size:18px; font-weight:600; }

/* CTA */
.cta{
  background:#f97316; color:#fff; text-align:center; padding:32px 16px;
  font-size:22px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:12px 16px; flex-wrap:wrap;
}
.cta a{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#111827; padding:12px 18px; border-radius:8px;
  font-weight:800; text-decoration:none; line-height:1; white-space:nowrap;
}
@media (max-width:560px){
  .cta{ flex-direction:column; gap:12px; font-size:20px; padding:28px 16px; }
  .cta a{ width:100%; max-width:320px; }
}

/* ======= LICZNIKI ======= */
.stats{
  max-width:1280px; margin:40px auto; padding:20px 24px;
  display:flex; justify-content:center; align-items:flex-start;
  gap:90px; text-align:center;
}
.stat{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.stat svg{ width:48px; height:48px; color:#f59e0b; }
.stat .num{ font-size:42px; font-weight:800; line-height:1; color:#ef8a1f; }
.stat .label{ color:#0f172a; letter-spacing:.2px; }
@media (max-width:1024px){ .stats{ gap:48px; } }
@media (max-width:560px){
  .stats{ flex-direction:column; align-items:center; gap:24px; padding:20px 16px; }
  .stat svg{ width:40px; height:40px; }
  .stat .num{ font-size:36px; }
}

/* ====================== FOOTER ====================== */
footer{ background:#111827; color:#9ca3af; padding:40px 24px; }
.foot{ max-width:1280px; margin:0 auto; display:grid; gap:20px; grid-template-columns:2fr 1fr 1fr; }
footer a{ color:#e5e7eb; text-decoration:none; }
@media(max-width:768px){ .foot{ grid-template-columns:1fr; } }

.site-footer{ background:#17191d; color:#cbd5e1; }
.footer-wrap{
  max-width:1280px; margin:0 auto;
  padding:48px 24px 24px;
  display:grid; grid-template-columns:1.2fr 1fr 1.2fr; gap:32px;
}
.site-footer h4{
  margin:0 0 12px; font-size:20px; font-weight:700; color:#e5e7eb;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-list{ list-style:none; margin:0; padding:0; }
.footer-list li{ margin:6px 0; }
.site-footer a{ color:#d1d5db; text-decoration:none; }
.site-footer a:hover{ color:#fff; }

.footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 24px 20px;
  max-width:1280px; margin:0 auto;
  color:#9ca3af; font-size:14px;
}
.to-top{ color:#d1d5db; }
.to-top:hover{ color:#fff; }
.social{ color:#d1d5db; font-weight:700; }
.social:hover{ color:#fff; }

@media (max-width:900px){
  .footer-wrap{ grid-template-columns:1fr; gap:24px; }
  .footer-links{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-links{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .site-footer .footer-brand{ justify-self:center; text-align:center; }
  .site-footer .footer-brand img{ display:block; margin-inline:auto; max-width:min(75vw, 320px); height:auto; }
}

/* Mniejszy odstęp NAD CTA */
#statystyki{ padding-bottom:16px; }
section + .cta{ margin-top:90px; }

/* Footer: nie łam nazwy spółki */
.footer-list .no-wrap{ white-space:nowrap; }
@media (max-width:560px){ .footer-list .no-wrap{ white-space:normal; } }

/* ====================== TYPO "O nas" ====================== */
.about { max-width:980px; margin:0 auto; }
.about h2 { text-wrap:balance; }
.about .text{
  max-width:70ch; margin:8px auto 0; font-size:18px; line-height:1.75; color:#374151;
}
.about .text p{ margin:0 0 12px; text-wrap:pretty; }
@media (min-width:900px){
  .about .text{ text-align:justify; text-justify:inter-word; hyphens:auto; }
  .about .text p:last-child{ text-align-last:left; }
}

/* ====================== Przyciski ====================== */
.button{
  line-height:1; text-decoration:none; display:inline-flex; border:none; cursor:pointer;
  align-items:center; gap:.75rem; background-color:orange; color:#fff;
  border-radius:8px; font-weight:600; padding:.5rem 1rem; padding-left:20px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background-color .3s;
}
.button__icon-wrapper{
  flex-shrink:0; width:25px; height:25px; position:relative; color:var(--clr);
  background-color:#fff; border-radius:50%; display:grid; place-items:center; overflow:hidden;
}
.button:hover{ background-color:#000; }
.button:hover .button__icon-wrapper{ color:#000; }
.button__icon-svg--copy{ position:absolute; transform:translate(-150%, 150%); }
.button:hover .button__icon-svg:first-child{ transition:transform .3s ease-in-out; transform:translate(150%, -150%); }
.button:hover .button__icon-svg--copy{ transition:transform .3s ease-in-out .1s; transform:translate(0); }

/* ====================== Użyte na podstronach ====================== */
html, body{ height:100%; }
body.sticky-footer{ min-height:100svh; display:flex; flex-direction:column; }
body.sticky-footer main{ flex:1 0 auto; }
body.no-hero main{ padding-top:100px; }

/* Lista w jednej kolumnie (na podstronie Usługi) */
.list-tight{ padding-top:1px; }
.nice-list.one-col{
  display:block; list-style:disc outside; padding-left:1.25rem;
  margin:12px auto 0; max-width:70ch;
}
.nice-list.one-col li{ margin:6px 0; line-height:1.7; }

/* ===== Realizacje (podstrona) ===== */
.projects{ max-width:980px; margin:0 auto; padding:80px 24px; }
.projects-title{ margin:0 0 8px; font-size:32px; }
.project{
  display:grid; grid-template-columns:1fr min(38vw, 420px);
  gap:24px; align-items:start; padding:24px 0; border-bottom:1px solid #e5e7eb;
}
.project:last-child{ border-bottom:none; }
.project-text{ font-size:18px; line-height:1.75; color:#374151; max-width:70ch; }
.project-link{ font-weight:700; color:#111827; text-decoration:none; border-bottom:2px solid #ef8a1f; padding-bottom:2px; }
.project-link:hover{ color:#000; }
.project-media{ display:block; text-decoration:none; }
.project-img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.10); display:block;
}
@media (max-width:900px){
  .project{ grid-template-columns:1fr; gap:16px; }
  .project-media{ order:-1; }
  .projects{ padding:64px 16px; }
}

/* ===== Referencje (cards + grid) ===== */
.refs-head { padding-bottom: 24px; }

.refs{
  max-width:1280px; margin:0 auto; padding:0 24px 80px;
  display:grid; gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ref-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:12px;
  background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.06);
  border:1px solid #e5e7eb;
}

.ref-media{ display:block; position:relative; }
.ref-media img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; display:block;
  filter: contrast(1) brightness(.98);
  transition: transform .25s ease;
}
.ref-media:hover img{ transform: scale(1.02); }

.ref-body{ padding:16px 16px 18px; }
.ref-title{ margin:0 0 6px; font-size:18px; }
.ref-meta{ margin:0 0 10px; color:#6b7280; font-size:14px; }
.ref-desc{ margin:0 0 14px; color:#374151; font-size:16px; line-height:1.6; }

.ref-docs{ display:flex; gap:10px; flex-wrap:wrap; }
.ref-docs .button{ --clr:#ef8a1f; padding:.55rem .9rem; font-weight:700; }

/* Lightbox (minimal) */
.lb{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.lb-img{
  max-width:min(1200px, 92vw); max-height:90vh; width:auto; height:auto;
  border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.lb-close{
  position:absolute; top:14px; right:16px; width:42px; height:42px;
  border-radius:10px; border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.6); color:#fff; font-size:24px; line-height:1;
  cursor:pointer;
}
.lb[hidden]{ display:none; }

@media (max-width:560px){
  .refs{ padding:0 16px 64px; }
  .ref-body{ padding:14px; }
}


/* ===== GALERIA ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.gallery-item {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .25s ease;
  display: block;
}
.gallery-item:hover img {
  transform: scale(1.05);
}