*{box-sizing:border-box}
:root{
  --bg:#020812;
  --bg2:#02070d;
  --line:#10324d;
  --blue:#078cff;
  --text:#fff;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* ===== HEADER / MENU — w pełni edytowalne ===== */
.site-header{
  background:var(--bg2);
  border-bottom:1px solid var(--line);
}
.header-inner{
  width:min(100%,1536px);
  min-height:78px;
  margin:0 auto;
  padding:0 56px;
  display:flex;
  align-items:center;
  gap:28px;
}
.logo,.footer-brand{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.logo{margin-right:auto}
.logo-main{
  font-size:39px;
  font-weight:910;
  font-style:italic;
  letter-spacing:-1.2px;
  white-space:nowrap;
}
.logo-main strong{color:var(--blue)}
.logo-sub{
  margin-top:8px;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}
.main-nav{
  height:80px;
  display:flex;
  align-items:center;
  gap:34px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.main-nav a{
  height:100%;
  display:flex;
  align-items:center;
  border-bottom:2px solid transparent;
}
.main-nav a:hover,.main-nav a.active{
  color:#0b9cff;
  border-bottom-color:#0b9cff;
}
.call-btn{
  flex:0 0 auto;
  padding:15px 20px;
  border-radius:7px;
  background:linear-gradient(135deg,#078cff,#0755f5);
  font-size:12px;
  font-weight:900;
  box-shadow:0 0 22px rgba(0,112,255,.24);
}
.menu-toggle{
  display:none;
  background:transparent;
  color:#fff;
  border:1px solid #0b78d0;
  border-radius:6px;
  font-size:23px;
  padding:5px 10px;
}

/* ===== GŁÓWNA GRAFIKA ===== */
.visual-section{
  width:100%;
  background:
    radial-gradient(circle at 50% 20%,rgba(0,89,170,.08),transparent 40%),
    var(--bg);
}
.visual-shell{
  width:min(100%,1536px);
  margin:0 auto;
  position:relative;
  line-height:0;
  overflow:hidden;
  background:var(--bg);
}
.visual-shell img{
  display:block;
  width:100%;
  height:auto;
}

/* Miękkie wtopienie krawędzi grafiki w tło */
.visual-shell::before,
.visual-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.visual-shell::before{
  background:
    linear-gradient(to right,
      var(--bg) 0%,
      rgba(2,8,18,.88) .5%,
      rgba(2,8,18,.55) 1.2%,
      rgba(2,8,18,.18) 2.5%,
      transparent 4.8%,
      transparent 95.2%,
      rgba(2,8,18,.18) 97.5%,
      rgba(2,8,18,.55) 98.8%,
      rgba(2,8,18,.88) 99.5%,
      var(--bg) 100%);
}
.visual-shell::after{
  background:
    linear-gradient(to bottom,
      var(--bg) 0%,
      rgba(2,8,18,.72) .7%,
      rgba(2,8,18,.20) 1.8%,
      transparent 3%,
      transparent 96.8%,
      rgba(2,8,18,.20) 98.2%,
      rgba(2,8,18,.72) 99.3%,
      var(--bg) 100%);
}

/* klikalny przycisk WhatsApp w grafice */
.booking-hotspot{
  position:absolute;
  z-index:3;
  left:64.4%;
  top:62.4%;
  width:20.8%;
  height:8.2%;
  border-radius:10px;
}

/* ===== FOOTER — w pełni edytowalny ===== */
.site-footer{
  background:var(--bg2);
  border-top:1px solid var(--line);
}
.footer-inner{
  width:min(100%,1536px);
  min-height:82px;
  margin:0 auto;
  padding:16px 56px;
  display:flex;
  align-items:center;
  gap:48px;
}
.footer-brand{margin-right:auto}
.footer-links{
  display:flex;
  align-items:center;
  gap:42px;
}
.footer-links a{
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.socials{
  display:flex;
  gap:12px;
}
.socials a{
  width:37px;
  height:37px;
  border:1px solid #0a7ed9;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#078cff;
  font-size:19px;
  font-weight:800;
}
.copyright{
  border-top:1px solid #102a40;
  text-align:center;
  padding:11px 15px 14px;
  font-size:15px;
  color:#dce6ee;
}

@media(max-width:1000px){
  .header-inner{
    min-height:76px;
    padding:0 18px;
  }
  .main-nav{
    display:none;
    position:absolute;
    z-index:20;
    left:0;
    right:0;
    top:76px;
    height:auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#02070d;
    border-top:1px solid var(--line);
  }
  .main-nav.open{display:flex}
  .main-nav a{
    height:auto;
    padding:15px 22px;
    border-bottom:1px solid #102a40;
  }
  .menu-toggle{
    display:block;
    margin-left:auto;
  }
  .call-btn{padding:13px 14px}
  .footer-inner{
    padding:20px;
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-brand{
    width:100%;
    margin:0;
  }
  .footer-links{
    flex-wrap:wrap;
    gap:22px 28px;
  }
}
@media(max-width:560px){
  .logo-main{font-size:19px}
  .logo-sub{display:none}
  .call-btn{
    font-size:0;
    padding:12px;
  }
  .call-btn::after{
    content:"☎";
    font-size:18px;
  }
  .footer-inner{
    display:grid;
    grid-template-columns:1fr;
  }
  .footer-links{
    display:grid;
    gap:12px;
  }
}