:root{
  --max-width:980px;
  --bg: #f7f6f4;           /* delikatne złamane biele */
  --header-bg: rgba(247,246,244,0.9);
  --footer-bg: #ecebea;    /* nieco ciemniejsze niż tło */
  --label-bg: #e9e9ea;     /* jasnoszary plakietka */
  --text: #000;
}

/* Reset prosty */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Nunito Sans",system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

/* Header fixed */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:var(--header-bg);
  backdrop-filter: blur(4px);
  z-index:50;
  border-bottom:1px solid rgba(0,0,0,0.04);
}

.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}

/* Brand left */
.brand{
  font-family:"Megrim", cursive;
  font-size:27px;
  color:#000;
  line-height:1;
}

/* Center nav */
.main-nav{
  display:flex;
  gap:28px;
  justify-content:center;
  align-items:center;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.nav-link{
  font-family:"Radley", serif;
  font-size:18px;
  color:#000;
  text-decoration:none;
  letter-spacing:0.2px;
}

/* Search right */
.search-wrap input[type="search"]{
  width:220px;
  max-width:40vw;
  padding:10px 14px;
  border-radius:24px;
  border:1px solid rgba(0,0,0,0.08);
  outline:none;
  font-size:15px;
  background:rgba(255,255,255,0.85);
}

/* Main page content offset for header */
.page{
  padding-top:92px; /* header height + spacing */
}

/* central column width */
.content-inner{
  max-width:var(--max-width);
  margin:0 auto;
  position:relative;
}

/* Full-bleed sections */
.showcase{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

/* Different heights and gentle palette for premium look */
.s1{height:640px;background:#f8f3ef;}
.s2{height:520px;background:#efeef9;}
.s3{height:780px;background:#f3f6f4;}
.s4{height:600px;background:#f7f3f2;}
.s5{height:900px;background:#f6f7fb;}
.s6{height:500px;background:#f7f5f2;}
.s7{height:860px;background:#f8faf6;}
.s8{height:720px;background:#f9f6f7;}
.s9{height:560px;background:#f4f7f6;}
.s10{height:1000px;background:#faf8f6;}

/* Image centered and responsive; only scales down */
.show-img{
  max-width:100%;
  height:auto;
  width:auto;
  display:block;
  max-height:90%;
  object-fit:contain;
}

/* Ensure a column within the central 980px for label alignment */
.showcase .label{
  position:absolute;
  right:calc( (100vw - var(--max-width)) / 2 ); /* align to right edge of central column */
  bottom:37px;
  width:271px;
  height:126px;
  background:var(--label-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

/* Label text */
.label-text{
  font-family:"Nunito Sans",sans-serif;
  font-weight:200;
  font-size:16px;
  color:#0b0b0b;
  line-height:1.3;
  text-align:left;
  padding:12px;
}

/* Footer */
.site-footer{
  background:var(--footer-bg);
  width:100%;
  margin-top:40px;
  border-top:1px solid rgba(0,0,0,0.03);
  position:relative;
  bottom:0;
  left:0;
}

.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:36px 20px;
}

/* Socials */
.socials{
  display:flex;
  gap:14px;
  margin-bottom:18px;
}

.social-icon{
  display:inline-flex;
  width:40px;
  height:40px;
  border-radius:10px;
  background:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.8);
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}

/* Footer columns */
.footer-columns{
  display:flex;
  gap:40px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.col h4{font-size:15px;margin-bottom:8px}
.col p{font-size:14px;color:rgba(0,0,0,0.7);max-width:300px}

/* Responsive adjustments */
@media (max-width:1100px){
  .main-nav{gap:18px}
  .header-inner{padding:0 16px}
  .search-wrap input[type="search"]{width:180px}
  .showcase .label{right:12px} /* keep label inside viewport */
}

@media (max-width:700px){
  .header-inner{height:64px;padding:0 12px}
  .brand{font-size:22px}
  .main-nav{display:none}
  .search-wrap input[type="search"]{width:120px}
  .footer-columns{flex-direction:column;gap:18px}
  .showcase{align-items:flex-start;padding-top:20px}
  .showcase .label{position:static;transform:none;margin:24px auto 0;width:271px}
  .content-inner{padding:0 16px}
  .page{padding-top:84px}
}

/* Make sure body doesn't create horizontal scroll due to full-bleed transformation */
html,body{overflow-x:hidden}