:root{
  --bg:#0b0b0c;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10);
  --text:#eef0f2;
  --muted:#b7bcc3;
  --accent:#d21b1b;
  --lux:#d6b25e;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(214,178,94,.12), transparent 60%),
              radial-gradient(900px 700px at 85% 10%, rgba(210,27,27,.10), transparent 55%),
              var(--bg);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
code{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:.92em}

.container{max-width:1040px;margin:0 auto;padding:0 16px}

.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(11,11,12,.70);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  height:54px; display:flex; align-items:center; gap:12px;
  justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__dot{
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(135deg, var(--lux), rgba(214,178,94,.35));
  box-shadow:0 0 0 4px rgba(214,178,94,.12);
}
.brand__text{font-weight:700; letter-spacing:.2px}
.phone{opacity:.92; font-weight:600}
.phone:hover{opacity:1}

.menuBtn{
  width:42px;height:42px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  display:grid; place-items:center; cursor:pointer;
}
.menuBtn span{
  display:block; width:18px; height:2px; background:rgba(255,255,255,.88);
  margin:2px 0; border-radius:3px;
}

.menu{
  display:none;
  padding:10px 16px 16px;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.menu a:hover{background:rgba(255,255,255,.07)}
.menu__cta{
  background:linear-gradient(135deg, rgba(214,178,94,.22), rgba(214,178,94,.08));
  border-color: rgba(214,178,94,.28);
}

.menu.open{display:grid}

.hero{
  position:relative;
  min-height: 86vh;
  display:grid;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero__bg{
  position:absolute; inset:0;
  background-image: url("assets/images/hero.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: brightness(1.14) contrast(1.06) saturate(1.10);
  will-change: transform;
  animation: heroParallax 10s ease-in-out infinite alternate;
}
body.premium .hero__bg{
  position:absolute; inset:0;
  background-image: url("assets/images/hero.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: brightness(1.14) contrast(1.06) saturate(1.10);
  will-change: transform;
  animation: heroParallax 10s ease-in-out infinite alternate;
}
  to{ background-position: 55% 60%; }
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 700px at 70% 70%, rgba(0,0,0,.12), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.45));
}
.hero__content{
  position:relative;
  padding: 84px 16px 56px;
  text-align:center;
  max-width:780px;
  margin: 0 auto;
  animation: heroIntro 900ms cubic-bezier(.2,.8,.2,1) both;
}

.hero h1{
  margin:0;
  font-size: clamp(40px, 8vw, 78px);
  letter-spacing: .8px;
  text-shadow: 0 18px 55px rgba(0,0,0,.65);
}
.hero p{
  margin:12px 0 0;
  font-size: clamp(16px, 3.4vw, 22px);
  color: rgba(255,255,255,.78);
}
.hero__actions{
  margin-top: 22px;
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:700;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform: translateY(1px) scale(.99)}
.btn--primary{
  background: linear-gradient(180deg, #e11f1f, #b91313);
  border-color: rgba(255,255,255,.12);
}
.btn--primary:hover{filter: brightness(1.05)}
.btn--ghost:hover{background: rgba(255,255,255,.10)}
.btn--full{width:100%}

.hero__badges{
  margin-top: 22px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.badge{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  font-weight:600;
  backdrop-filter: blur(10px);
}

.scrollHint{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:30px;height:46px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  display:grid; place-items:center;
}
.scrollHint span{
  width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.8);
  animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{transform: translateY(-8px); opacity:.4}
  50%{transform: translateY(8px); opacity:1}
  100%{transform: translateY(-8px); opacity:.4}
}

.section{padding: 56px 0}
.section h2{
  margin:0 0 16px;
  font-size: 36px;
  letter-spacing:.2px;
}
.lead{font-size:18px; line-height:1.6; color: rgba(255,255,255,.82)}

.twoCol{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
}
@media(min-width:860px){
  .menu{display:flex !important; align-items:center; padding:0; border:0}
  .menu a{background:transparent;border:0;padding:0 10px; opacity:.9}
  .menu a:hover{opacity:1; background:transparent}
  .menu__cta{padding:10px 14px; border:1px solid rgba(214,178,94,.28); border-radius:999px; background:rgba(214,178,94,.10)}
  .menuBtn{display:none}
  .twoCol{grid-template-columns: 1.2fr .8fr; align-items:start}
}

.aboutCard{
  margin:0;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.aboutCard img{width:100%;display:block; aspect-ratio: 4/3; object-fit:contain}
.aboutCard figcaption{
  padding:12px 14px;
  color: rgba(255,255,255,.72);
  border-top:1px solid rgba(255,255,255,.06);
    /* nowe ustawienia, żeby było widać całą wizytówkę */
  max-width: 300px;       /* ogranicza szerokość */
  height: auto;           /* zachowuje proporcje */
  object-fit: contain;    /* pokazuje cały obrazek bez przycinania */
  margin: 0 auto;         /* centrowanie */
}

@media (min-width: 768px) {
  .about-card img {
    max-width: 400px;     /* większy obrazek na komputerze */
  }
}


.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.chip{
  padding:8px 12px;
  border-radius:999px;
  background: rgba(214,178,94,.10);
  border:1px solid rgba(214,178,94,.22);
  color: rgba(255,255,255,.88);
  font-weight:600;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media(min-width:760px){
  .grid{grid-template-columns: repeat(2, 1fr)}
}
.service{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.service:hover{
  transform: translateY(-2px);
  border-color: rgba(214,178,94,.26);
  background: linear-gradient(180deg, rgba(214,178,94,.08), rgba(255,255,255,.03));
}
.service__icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:20px;
}
.service__body h3{margin:2px 0 6px; font-size:18px}
.service__body p{margin:0; color: rgba(255,255,255,.72); line-height:1.45}

.note{
  margin-top:14px;
  padding:12px 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
}

.sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}
.toggle{display:flex; align-items:center; gap:10px}
.toggle__label{color: rgba(255,255,255,.68)}
.pill{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(214,178,94,.30);
  background: rgba(214,178,94,.10);
  color: rgba(255,255,255,.92);
  font-weight:700;
  cursor:pointer;
}

.muted{color: rgba(255,255,255,.68)}
.small{font-size:12px}

.gallery{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
@media(min-width:720px){
  .gallery{grid-template-columns: repeat(3, 1fr)}
}
.thumb{
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  overflow:hidden;
  cursor:pointer;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  transition: transform .18s ease, border-color .18s ease;
}
.thumb:hover{transform: translateY(-2px); border-color: rgba(214,178,94,.26)}
.thumb img{width:100%;height:100%;aspect-ratio: 1/1;object-fit:cover;display:block}

.videos{margin-top:22px}
.videoCard{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.videoCard__ratio{position:relative;padding-top:56.25%}
.videoCard__ratio iframe{position:absolute;inset:0;width:100%;height:100%}

.contactGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media(min-width:900px){
  .contactGrid{grid-template-columns: .95fr 1.05fr}
}
.contactCard,.formCard{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  padding:16px;
}
.contactActions{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0}
.contactLine{margin-top:8px; color: rgba(255,255,255,.78)}
.contactLine span{color: rgba(255,255,255,.62)}

.field{display:grid; gap:8px; margin-top:12px}
label{color: rgba(255,255,255,.75); font-weight:600}
input,textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
  padding:12px 12px;
  outline:none;
}
input:focus,textarea:focus{border-color: rgba(214,178,94,.35); box-shadow:0 0 0 4px rgba(214,178,94,.10)}
.hidden{display:none}

.footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:18px 0;
  color: rgba(255,255,255,.72);
}
.footer__inner{display:flex; justify-content:space-between; align-items:center; gap:10px}
.footer__links{display:flex; gap:12px}
.footer__links a{opacity:.85}
.footer__links a:hover{opacity:1}

.lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,.80);
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  z-index:50;
}
.lightbox.open{display:flex}
.lightbox img{
  max-width:min(980px, 95vw);
  max-height: 86vh;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.lightbox__close{
  position:absolute; top:14px; right:14px;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size:26px; line-height:1;
  cursor:pointer;
}

.thanks{
  min-height:100vh; display:grid; place-items:center; padding:18px;
}
.thanksCard{
  max-width:520px; width:100%;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  padding:18px;
  text-align:center;
}
.thanksCard h1{margin:0 0 10px}


/* Premium subtle animations */
@keyframes heroIntro{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes heroParallax{
  from{ transform: scale(1.03) translateY(0); }
  to{ transform: scale(1.06) translateY(-10px); }
}

/* --- Contact meta: address + hours --- */
.contactMeta{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 720px){
  .contactMeta{grid-template-columns: 1fr 1fr;}
}
.contactMeta__title{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,.72);
}
.contactMeta__text{color: rgba(255,255,255,.92); margin-bottom:8px;}

.hoursList{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
.hoursItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.hoursDay{font-weight:800;}
.hoursTime{color: rgba(255,255,255,.88);}
.hoursItem.is-today{
  border-color: rgba(214,178,94,.55);
  background: rgba(214,178,94,.10);
  box-shadow: 0 0 0 4px rgba(214,178,94,.10);
}