:root{
  --bg:#0a0a0a; --gold:#bfa37e; --text:#e5e5e5;
  --glass:rgba(255,255,255,0.03); --border:rgba(255,255,255,0.1);

  /* P0: żeby sekcje po kliknięciu # nie chowały się pod fixed nav */
  scroll-padding-top: 80px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);color:var(--text);
  font-family:'Tenor Sans',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* P0: stabilny scrollbar przy locku menu (mniej "skoku" layoutu) */
body.menu-open{
  overflow:hidden;
  scrollbar-gutter: stable;
}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:all 1s ease-out;}
.reveal.active{opacity:1;transform:translateY(0);}

/* P0: szanuj reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{transition:none;transform:none;opacity:1;}
}

/* ===== NAV + OFFCANVAS ===== */
#nav-toggle{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;clip-path:inset(50%);
}

nav{
  position:fixed;top:0;left:0;right:0;
  padding:14px 5%;
  display:flex;align-items:center;justify-content:space-between;
  z-index:1100;
  background:rgba(10,10,10,0.86);
  backdrop-filter:blur(15px);
  border-bottom:1px solid var(--border);
}

/* LOGO (kontener) */
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  white-space:nowrap;
}

/* Logo jako obraz */
.logo-img{
  display:block;
  height:44px;   /* desktop */
  width:auto;
}

/* desktop links */
.nav-links{display:flex;align-items:center;gap:18px;}

/* linki w nav bez logo */
nav a:not(.logo){
  color:var(--text);
  text-decoration:none;
  font-size:.75rem;
  letter-spacing:2px;
  text-transform:uppercase;
  transition:.3s;
}
nav a:not(.logo):hover{color:var(--gold);}

/* social icons in nav (desktop) */
.nav-social{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:12px;
}
.nav-social a{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,0.03);
  color:var(--text);
  text-decoration:none;
  transition:.2s;
}
.nav-social a:hover{
  border-color:var(--gold);
  color:var(--gold);
}

/* ===== MENU BTN (jak social: 38x38, ale ZAWSZE złoty) ===== */
.menu-btn{
  display:none;

  width:38px;height:38px;                 /* jak social */
  border:1px solid var(--gold);           /* ZŁOTY od startu */
  border-radius:10px;                      /* jak social */
  background:rgba(255,255,255,0.03);      /* jak social */
  color:var(--gold);                      /* ZŁOTE kreski od startu */

  align-items:center;justify-content:center;
  font-size:16px;                          /* trochę mniejsze niż 18 */
  cursor:pointer;
  user-select:none;
  margin-left:10px;

  /* ważne: nie chcemy podwójnych ramek z globalnym :focus-visible */
  outline:none;
  box-shadow:none;
  transition:.2s;
}

/* hover – możesz zostawić bez zmian albo lekko wzmocnić */
.menu-btn:hover{
  border-color:var(--gold);
  color:var(--gold);
}

/* stan "X" (menu otwarte): wygląda tak samo jak start */
#nav-toggle:checked ~ nav .menu-btn{
  border-color:var(--gold);
  color:var(--gold);
}

/* focus: wyłącz outline, żeby nie było “podwójnej ramki” */
.menu-btn:focus,
.menu-btn:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  border-color:var(--gold);
  color:var(--gold);
}

.icon-close{display:none;}
#nav-toggle:checked ~ nav .icon-open{display:none;}
#nav-toggle:checked ~ nav .icon-close{display:inline-block;}

.menu-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
  z-index:1050;
}
.menu-overlay button{
  position:absolute;inset:0;
  width:100%;height:100%;
  background:transparent;border:0;cursor:pointer;
}

.side-menu{
  position:fixed;top:0;right:0;
  height:100vh;width:min(86vw, 360px);
  background:rgba(10,10,10,0.97);
  backdrop-filter:blur(16px);
  border-left:1px solid var(--border);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(0.23,1,0.32,1);
  z-index:1090;
  padding:90px 22px 22px;
  display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.side-menu a{
  color:var(--text);
  text-decoration:none;
  font-size:0.95rem;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:14px 12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  transition:.2s;
}
.side-menu a:hover{border-color:var(--gold);color:var(--gold);}

/* social w menu mobilnym (pod linkami + separator) */
.side-social{
  margin-top:10px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.10);
  display:flex;
  gap:10px;
}
.side-social a{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  color:var(--text);
  text-decoration:none;
  transition:.2s;
}
.side-social a:hover{
  border-color:var(--gold);
  color:var(--gold);
}

#nav-toggle:checked ~ .menu-overlay{opacity:1;pointer-events:auto;}
#nav-toggle:checked ~ .side-menu{transform:translateX(0);}

/* ===== NAV: wcześniejsze przejście na burger ===== */
@media (max-width:1024px){
  .nav-links{display:none;}
  .nav-social{display:none;}
  .menu-btn{display:inline-flex;}

  /* logo na tablet/laptop */
  .logo-img{height:36px;}
}

/* HERO (zostawione bez zmian) */
.hero{
  height:100vh; min-height:560px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:0 6%;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url('/img/background/tlo.jpg') no-repeat;
  background-size: cover;
  background-position: 35% center;
}
.hero-title{
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.6rem,10vw,7rem);
  color:var(--gold);
  line-height:.95;
  margin-bottom:18px;
  text-transform:uppercase;
}
.hero-sub{
  letter-spacing:6px;
  text-transform:uppercase;
  font-size:.95rem;
  opacity:.85;
  margin-bottom:22px;
}

/* P1.1: opis pod hero */
.hero-desc{
  max-width:900px;
  margin-top:6px;
  opacity:.88;
  line-height:1.8;
  font-size:1rem;
  letter-spacing:1px;
}
.hero-desc strong{color:var(--text);}

/* sekcje */
.process-section,.contact-section{padding:90px 5%;text-align:center;}
.section-title{
  font-family:'DM Serif Display',serif;
  font-size:3rem;
  color:var(--gold);
  margin-bottom:10px;
}

/* ===== INFO / LOCAL ===== */
.local-section{padding:80px 5%;}
.local-section--full{
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
}
.local-inner{
  max-width:1100px;
  margin:0 auto;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  padding:34px;
  text-align:left;
}
.local-inner .section-title{
  text-align:left;
  margin-bottom:14px;
}
.local-lead,.local-note{
  opacity:.88;
  line-height:1.85;
}
.local-note{
  margin-top:14px;
  opacity:.78;
}
.local-inner strong{color:var(--text);}

/* proces */
.process-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
  margin-top:40px;
}
.step{
  padding:28px;
  background:var(--glass);
  border:1px solid var(--border);
  position:relative;
  border-radius:14px;
}
.step-num{
  font-family:'DM Serif Display',serif;
  font-size:3rem;
  color:var(--gold);
  opacity:.3;
  position:absolute;
  top:10px;left:20px;
  pointer-events:none;
}
.step h3{
  font-family:'DM Serif Display',serif;
  font-size:1.7rem;
  margin-bottom:10px;
  color:var(--gold);
}
.step p{opacity:.85;line-height:1.6;}

/* ===== USŁUGI (P1.2) ===== */
.services-section{
  padding:90px 5%;
  text-align:center;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
  margin-top:34px;
}
.service-card{
  text-align:left;
  padding:24px;
  border:1px solid var(--border);
  background:var(--glass);
  border-radius:14px;
}
.service-card h3{
  font-family:'DM Serif Display',serif;
  color:var(--gold);
  font-size:1.55rem;
  margin-bottom:10px;
  letter-spacing:0.08em;
  line-height:1.15;
}
.service-card p{
  opacity:.86;
  line-height:1.75;
}
.service-card ul{
  margin:14px 0 0 18px;
  padding:0;
}
.service-card li{
  margin:8px 0;
  line-height:1.7;
  opacity:.86;
}

/* ===== WHY ===== */
.why-section{padding:90px 5%;text-align:center;}
.section-subtitle{
  max-width:900px;
  margin:10px auto 0;
  opacity:.75;
  line-height:1.7;
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
  margin-top:34px;
}
.why-card{
  padding:24px;
  border:1px solid var(--border);
  background:var(--glass);
  border-radius:14px;
  text-align:left;
}
.why-card i{
  font-size:1.6rem;
  color:var(--gold);
  margin-bottom:12px;
}
.why-card h3{
  font-family:'DM Serif Display',serif;
  color:var(--gold);
  font-size:1.55rem;
  margin-bottom:8px;
}
.why-card p{
  opacity:.85;
  line-height:1.7;
}

/* galeria */
.gallery-header{padding:90px 5% 30px;text-align:center;}
.gallery-header h2{
  font-family:'DM Serif Display',serif;
  font-size:3.2rem;
  color:var(--gold);
  margin-bottom:14px;
}
.gallery-header p{opacity:.65;margin-bottom:22px;}

.filter-nav{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.filter-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 18px;
  font-size:.7rem;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s;
  border-radius:999px;
}
.filter-btn:hover{border-color:var(--gold);color:var(--gold);}
.filter-btn.active{background:var(--gold);color:#000;border-color:var(--gold);}

.gallery-container{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
  padding:0 5% 90px;
}
.gallery-item{
  aspect-ratio: 4 / 3;
  height:auto;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:#111;
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.9s;
  display:block;
}
.gallery-item:hover img{transform:scale(1.05);}

/* social */
.social-cta{
  padding:80px 5%;
  background:var(--glass);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.social-cta h2{
  font-family:'DM Serif Display',serif;
  font-size:2.4rem;
  margin-bottom:14px;
  color:var(--gold);
}
.social-cta p{
  max-width:900px;
  opacity:.85;
  line-height:1.7;
}
.social-links{
  display:flex;
  gap:14px;
  margin-top:22px;
  flex-wrap:wrap;
  justify-content:center;
}
.social-btn{
  padding:14px 26px;
  border:1px solid var(--gold);
  color:var(--gold);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  transition:.25s;
  border-radius:999px;
  display:inline-flex;
  gap:10px;
  align-items:center;
}
.social-btn:hover{background:var(--gold);color:#000;}

/* ===== FAQ (P1.5) ===== */
.faq-section{
  padding:90px 5%;
  text-align:center;
}
.faq-list{
  max-width:1100px;
  margin:34px auto 0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  border:1px solid var(--border);
  background:var(--glass);
  border-radius:14px;
  padding:0;
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;
  padding:18px 18px;
  list-style:none;
  font-size:1rem;
  letter-spacing:1px;
  text-transform:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--gold);}
.faq-item[open] summary{
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.faq-item p{
  padding:14px 18px 18px;
  opacity:.86;
  line-height:1.75;
}

/* kontakt */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
  margin-top:28px;
}
.contact-card{
  padding:26px;
  border:1px solid var(--border);
  background:var(--glass);
  border-radius:14px;
}
.contact-card i{font-size:2rem;color:var(--gold);margin-bottom:16px;}
.contact-card h4{margin-bottom:8px;letter-spacing:1px;}
.contact-card p{opacity:.85;}

/* linki inline */
.inline-link{
  color:inherit;
  text-decoration:none;
}
.inline-link:hover{color:var(--gold);}

/* ===== PODSTRONY: POLITYKA / TEKST ===== */
.page-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:120px 5% 90px;
}
.page-title{
  font-family:'DM Serif Display',serif;
  color:var(--gold);
  font-size:clamp(2.2rem, 5vw, 3.2rem);
  margin:0 0 10px;
  letter-spacing:1px;
}
.page-subtitle{
  max-width:900px;
  opacity:.78;
  line-height:1.8;
  margin:0 0 28px;
}
.page-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  padding:26px;
  margin:14px 0;
}
.page-card h2{
  font-family:'DM Serif Display',serif;
  color:var(--gold);
  font-size:1.9rem;
  margin:0 0 10px;
}
.page-card p{
  opacity:.88;
  line-height:1.85;
  margin:10px 0;
}
.page-card ul{
  margin:10px 0 0 18px;
  padding:0;
}
.page-card li{
  margin:8px 0;
  line-height:1.8;
  opacity:.88;
}

/* footer */
footer{
  border-top:1px solid var(--border);
  padding:42px 18px;
  text-align:center;
}
.footer-inner{max-width:1100px;margin:0 auto;}
.footer-brand{
  font-family:'Tenor Sans',sans-serif;
  color:var(--gold);
  letter-spacing:10px;
  font-size:1.5rem;
  margin-bottom:14px;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,0.35);
}
.footer-line{opacity:.78;margin:6px 0;line-height:1.7;}

.footer-link{
  color:inherit;
  text-decoration:none;
}
.footer-link:hover{color:var(--gold);}

.footer-sep{opacity:.45;padding:0 8px;}
.footer-copy{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:.8rem;
  opacity:.55;
  line-height:1.6;
}

/* ===== Nagłówki: więcej oddechu (widoczny efekt) ===== */
.hero-title,
.section-title,
.gallery-header h2,
.social-cta h2,
.page-title{
  letter-spacing:0.1em;
  line-height:1.12;
}

.step h3,
.why-card h3,
.page-card h2{
  letter-spacing:0.1em;
  line-height:1.15;
}

.step-num{
  letter-spacing:0.04em;
  line-height:1;
}

/* MOBILE (layout/typografia — bez reguł NAV, bo NAV jest od 1024px) */
@media (max-width:768px){
  .hero-sub{letter-spacing:5px;font-size:.9rem;}
  .hero-desc{font-size:.95rem;line-height:1.75;}
  .section-title{font-size:2.4rem;}
  .gallery-header h2{font-size:2.6rem;}
  .gallery-container{grid-template-columns:1fr;}
  .gallery-item{aspect-ratio: 4 / 3;}
  .process-section,.contact-section{padding:70px 5%;}
  .why-section{padding:70px 5%;}
  .services-section{padding:70px 5%;}
  .faq-section{padding:70px 5%;}
  .gallery-header{padding:70px 5% 24px;}

  .local-section{padding:60px 5%;}
  .local-inner{padding:18px;border-radius:16px;}
  .local-inner .section-title{margin-bottom:10px;}

  .footer-brand{letter-spacing:8px;}

  .page-wrap{padding:110px 5% 70px;}
  .page-card{padding:18px;}
  .page-card h2{font-size:1.6rem;}
}

@media (max-width:420px){
  .filter-btn{width:100%;max-width:340px;}
  .logo-img{height:32px;}
}