*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0b0e0c;color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
body{overflow-x:hidden}

.hero-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#111;
}
.hero-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .38s ease;
  pointer-events:none;
}
.hero-frame.is-visible{opacity:1}

.brand{
  position:absolute;z-index:20;right:1.2%;top:1.2%;
  padding:8px 14px;border-radius:999px;
  background:rgba(20,30,38,.72);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(7px);
  font-weight:900;font-size:clamp(10px,1vw,16px);
  letter-spacing:.04em
}
.brand b{color:#ffc400}

/* Jedynym widocznym menu jest drewniane menu w grafice.
   Poniższe elementy są wyłącznie niewidzialnymi obszarami kliknięć. */
.wood-hit{
  position:absolute;
  z-index:10;
  left:8.6%;
  width:23.6%;
  border-radius:8px;
  overflow:hidden;
  text-indent:-9999px;
  background:transparent;
  cursor:pointer;
}
.wood-hit:focus-visible{
  outline:3px solid #ffc400;
  outline-offset:3px;
}
.hit-home{top:8.3%;height:9.1%}
.hit-rowery{top:18.0%;height:9.0%}
.hit-wycieczki{top:27.5%;height:9.0%}
.hit-okolica{top:37.1%;height:9.0%}
.hit-noclegi{top:46.6%;height:9.0%}
.hit-restauracja{top:56.2%;height:9.0%}
.hit-kontakt{top:65.7%;height:9.0%}

/* Existing subpages from v4 */
.page{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  background:#111;
}
.page picture,.page picture img{position:absolute;inset:0;width:100%;height:100%}
.page picture img{object-fit:cover}
.page::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.02) 60%,rgba(0,0,0,.12));
  pointer-events:none
}
.back{
  position:absolute;z-index:20;left:18px;top:18px;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:999px;
  text-decoration:none;font-weight:900;
  background:rgba(10,13,11,.68);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(7px)
}
.card{
  position:absolute;z-index:15;width:min(460px,34vw);
  padding:20px 22px;border-radius:18px;
  background:rgba(12,15,14,.76);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 44px rgba(0,0,0,.32);
  backdrop-filter:blur(10px)
}
.card h1{font-size:clamp(30px,4vw,52px);line-height:.98;margin:5px 0 10px}
.card p{font-size:clamp(14px,1.15vw,18px);line-height:1.5;margin:0}
.eyebrow{font-size:12px;color:#ffc400;font-weight:950;letter-spacing:.13em;text-transform:uppercase}
.badge{
  display:inline-flex;margin:0 0 10px;padding:7px 11px;border-radius:999px;
  background:#ffc400;color:#18120b;font-size:12px;font-weight:950;letter-spacing:.1em;text-transform:uppercase
}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.btn{display:inline-flex;padding:9px 13px;border-radius:999px;background:#ffc400;color:#17120a;font-weight:900;text-decoration:none}
.btn.alt{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.phone{display:block;margin-top:9px;font-size:clamp(29px,4vw,54px);font-weight:950;text-decoration:none;color:#fff}
.phone:hover{color:#ffc400}
.page-rowery .card{right:3vw;top:11vh}
.page-okolica .card{right:3vw;top:11vh}
.page-kontakt .card{left:4vw;top:14vh}
.page-wycieczki .card{right:3vw;top:5vh;width:min(430px,30vw)}

@media(max-width:900px){
  .brand{font-size:9px;padding:5px 8px}
  .wood-hit{left:8.2%;width:24.5%}

  .page{min-height:auto;padding-top:62svh;overflow:visible}
  .page picture{height:62svh;bottom:auto}
  .page::after{height:62svh;bottom:auto}
  .card,.page-rowery .card,.page-okolica .card,.page-kontakt .card,.page-wycieczki .card{
    position:relative;left:auto;right:auto;top:auto;width:100%;
    border-radius:0;padding:22px 18px 28px;background:#111511;
    backdrop-filter:none;box-shadow:none
  }
  .card h1{font-size:35px}
  .card p{font-size:16px}
}