html, body.landing { margin: 0 !important; padding: 0 !important; background: #000; }
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background:
    linear-gradient(to top, #000 0%, rgba(0,0,0,.82) 14%, rgba(0,0,0,.1) 36%, transparent 55%),
    url("/img/hero.jpg") center top / cover no-repeat;
}
.logo {
  position: absolute;
  top: 16px; left: 22px;
  z-index: 4;
  color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 2.55rem);
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}
.topnav {
  position: absolute;
  top: 26px; right: 22px;
  z-index: 4;
  display: flex;
  gap: 1.1rem;
  align-items: center;
}
.topnav a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: .86rem;
  opacity: .55;
}
.topnav a:hover { opacity: 1; }
.topnav a.reg { color: #d4a017; opacity: .95; }
.hero-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 6% 2.2vh;
}
#wave { width: 100%; height: 68px; display: block; }
.float-wrap { position: relative; height: 5.4rem; margin: 0 0 1.15rem; overflow: hidden; }
.float-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  color: #fff;
  font-size: clamp(1.5rem, 3.1vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 2px 18px #000;
  transition: transform 2.4s ease, opacity 2.4s ease;
}
.float-line.wait { transform: translateY(5.4rem); opacity: 0; }
.float-line.on { transform: translateY(0); opacity: 1; }
.float-line.off { transform: translateY(-0.6rem); opacity: 0; transition: transform .7s ease, opacity .55s ease; }
a.btn {
  display: inline-block;
  background: #d4a017;
  color: #fff;
  text-decoration: none;
  padding: .5rem 1.05rem;
  border-radius: 8px;
  font-weight: 400;
}
.rest { min-height: 38vh; background: #000; }
footer {
  background: #000;
  color: #8a8a8a;
  padding: 2.2rem 8% 2.8rem;
  border-top: 1px solid #222;
  font-size: .88rem;
}
footer strong { color: #fff; display: block; margin-bottom: .35rem; }
footer nav { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .9rem 1.3rem; }
footer a { color: #9a9a9a; text-decoration: none; }
footer a:hover { color: #fff; }
footer .copy { margin: 0; opacity: .7; }

.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lang-wrap { position: relative; }
.lang-btn {
  background: transparent;
  color: #d4a017;
  border: 1px solid #d4a017;
  min-width: 3rem;
  padding: .28rem .55rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .8rem;
  letter-spacing: .04em;
}
.lang-box {
  display: none;
  position: absolute;
  right: 0; bottom: 2.2rem;
  width: 220px;
  max-height: 240px;
  overflow: auto;
  background: #111;
  border: 1px solid #333;
  padding: .4rem;
}
.lang-box.open { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .25rem; }
.lang-box button {
  background: transparent;
  color: #ccc;
  border: 0;
  padding: .3rem;
  cursor: pointer;
}
.lang-box button.on, .lang-box button:hover { color: #d4a017; }

.hero {
  margin: 0 !important;
  top: 0 !important;
  
  background-size: cover !important;
}

.hero {
  max-width: 1400px !important;
  margin: 0 auto !important;
  min-height: 100vh !important;
  background-position: center 20% !important;
  background-size: cover !important;
}

/* MOBILE-FIX */
@media (max-width: 800px) {
  .hero {
    max-width: none !important;
    background-position: center top !important;
    min-height: 100svh !important;
  }
  .logo { font-size: 1.45rem !important; top: 10px !important; left: 12px !important; }
  .topnav { top: 12px !important; right: 12px !important; }
  .topnav a.reg { display: none !important; }
  .hero-copy { padding: 0 5% calc(18px + env(safe-area-inset-bottom)) !important; }
  .float-wrap { height: 3.4rem !important; margin-bottom: .45rem !important; }
  .float-line { font-size: 1.15rem !important; }
  #wave { height: 48px !important; }
}
@media (min-width: 801px) {
  .hero { background-position: center 12% !important; }
}

@media (max-width: 800px) {
  .logo { font-size: 1.85rem !important; }
  #wave { height: 58px !important; }
}
@media (min-width: 801px) {
  #wave { height: 120px !important; }
}

.topshade {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 64px;
  z-index: 4;
  pointer-events: none;
  background: transparent;
  transition: background .25s ease;
}
.topshade.on { background: rgba(0,0,0,.45); }
.logo { position: fixed !important; z-index: 6; }
.topnav { position: fixed !important; z-index: 6; }
@media (max-width: 800px) {
  #wave { height: 84px !important; }
  .logo { top: 14px !important; }
  .topnav { top: 18px !important; }
}

.lang-btn {
  background: transparent;
  color: #d4a017;
  border: 1px solid #d4a017;
  min-width: 2.6rem;
  padding: .22rem .45rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .78rem;
  opacity: 1 !important;
}
.lang-dim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 20;
}
.lang-dim.open { display: block; }
.lang-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 100%);
  background: #14110d;
  color: #eee;
  z-index: 21;
  transform: translateX(100%);
  transition: transform .32s ease;
  overflow: auto;
}
.lang-panel.open { transform: translateX(0); }
.lang-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem .6rem;
  border-bottom: 1px solid #333;
}
.lang-head button { background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; }
.lang-list button {
  display: flex;
  width: 100%;
  gap: .7rem;
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid #2a2a2a;
  color: #ddd;
  padding: .7rem 1rem;
  cursor: pointer;
  text-align: left;
}
.lang-list button span { font-size: 1.15rem; }
.lang-list button b { flex: 1; font-weight: 500; }
.lang-list button i { font-style: normal; opacity: .5; font-size: .8rem; }
.lang-list button.on { color: #d4a017; }
@media (min-width: 801px) {
  .lang-panel { width: 380px; }
}

.foot-auth { display: none; gap: 1rem; align-items: center; }
.foot-auth a { color: #fff; text-decoration: none; font-size: .9rem; }
.foot-auth a.reg { color: #d4a017; }
@media (max-width: 800px) {
  .topnav a { display: none !important; }
  .topnav .lang-btn { display: inline-block !important; }
  .foot-auth { display: flex !important; }
}
@media (min-width: 801px) {
  .foot-auth { display: none !important; }
}

@media (max-width:800px){
  .only-desk{display:none !important}
  .foot-auth{display:flex !important;gap:1rem}
  .foot-auth a{color:#fff;text-decoration:none}
  .foot-auth a.reg{color:#d4a017}
}
@media (min-width:801px){
  .foot-auth{display:none !important}
}

.rest {
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
}

.rest{
  min-height:100vh;
  min-height:100svh;
  background:#0d0d0d;
  padding:28px;
  box-sizing:border-box;
}
.clip{
  position:relative;
  height:calc(100vh - 56px);
  height:calc(100svh - 56px);
  overflow:hidden;
  border-radius:12px;
  background:#000;
}
.clip video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s ease;
}
.clip video.on{opacity:1}
@media (max-width:800px){
  .rest{padding:16px}
  .clip{height:calc(100svh - 32px);border-radius:10px}
}

.rest{
  min-height:100vh;
  min-height:100svh;
  background:#0d0d0d;
  padding:24px 24px 0;
  box-sizing:border-box;
}
.clip{
  position:relative;
  height:66vh;
  height:66svh;
  overflow:hidden;
  border-radius:12px 12px 0 0;
  background:#000;
}
.clip video, .clip img {
  opacity: 0;
  transition: opacity .8s ease;
}
.clip video.on, .clip img.on { opacity: 1; }
.clip video.on,.clip img.on{opacity:1}
.clip-fade{
  position:absolute;left:0;right:0;bottom:0;
  height:42%;
  background:linear-gradient(to top,#0d0d0d 0%,rgba(13,13,13,.88) 38%,rgba(13,13,13,.2) 72%,transparent 100%);
  pointer-events:none;
}
.clip-words{
  position:absolute;left:6%;right:6%;bottom:8%;
  min-height:3rem;
  z-index:2;
  color:#fff;
  font-size:clamp(1.1rem,2.4vw,1.7rem);
  font-weight:600;
  text-shadow:0 2px 16px #000;
}
@media (max-width:800px){
  .rest{padding:16px 16px 0}
  .clip{height:62svh}
}

html,body.landing,.rest{background:#0d0d0d !important}
.hero{margin-bottom:18vh}
.rest{margin-top:8vh;padding-top:4vh}
.clip video,.clip img{
  object-fit:contain !important;
  object-position:center center !important;
  background:#0d0d0d;
}
.logo,.topnav,.topshade{transition:opacity .25s ease, transform .25s ease}
body.hide-top .logo,
body.hide-top .topnav,
body.hide-top .topshade{
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
}

body.hide-top .logo,
body.hide-top .topnav,
body.hide-top .topshade{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(-12px);
}
.logo,.topnav,.topshade{
  transition:opacity .28s ease, transform .28s ease;
}
@media (max-width:800px){
  .hero{margin-bottom:0 !important}
  .rest{margin-top:0 !important;padding:16px 16px 0 !important}
  .clip{height:62svh !important}
  .clip video,.clip img{
    object-fit:cover !important;
    object-position:center top !important;
  }
}
@media (min-width:801px){
  .hero{margin-bottom:7vh !important}
  .rest{margin-top:4vh !important}
  .clip{height:68vh !important}
  .clip video,.clip img{
    object-fit:contain !important;
    object-position:center center !important;
  }
}

@media (min-width:801px){
  .rest{padding:12px 32px 0 !important;margin-top:3vh !important}
  .clip{height:84vh !important}
  .clip video,.clip img{
    object-fit:contain !important;
    object-position:center center !important;
  }
}

@media (min-width:801px){
  .rest{
    min-height:100vh !important;
    padding:10px 20px 8vh !important;
    margin-top:2vh !important;
  }
  .clip{
    height:94vh !important;
    min-height:94vh !important;
  }
  .clip video,.clip img{
    object-fit:contain !important;
    object-position:center center !important;
  }
}

.hero{
  background-color:#0d0d0d !important;
}

.hero{
  transform:none !important;
  background-attachment:scroll !important;
}

.spk{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:8;
  width:46px;height:46px;
  display:none;
  align-items:center;justify-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  padding:0;
}
.spk.show{display:flex}
.spk svg{width:22px;height:22px}
@media (max-width:800px){
  .spk{right:16px;bottom:18px;width:42px;height:42px}
}

.wave-bar{
  position:absolute;
  left:10%;
  width:80%;
  bottom:14%;
  height:36px;
  z-index:3;
  pointer-events:none;
}

#waveBar,.wave-bar{display:none!important}

.hero,.hero *{transform:none !important}
.spk{position:fixed;right:22px;bottom:22px;z-index:20;transition:none}

#waveBar,.wave-bar{display:none!important}
.spk{
  position:sticky !important;
  top:auto !important;
  right:22px !important;
  bottom:22px !important;
  float:right;
  margin:0 22px 22px 0;
}
.rest{position:relative}

#msBoot{position:fixed;inset:0;background:#0d0d0d;z-index:9999;display:flex;align-items:center;justify-content:center}
#msBoot.off{display:none}
.ms-spin{width:42px;height:42px;border:3px solid #333;border-top-color:#d4a017;border-radius:50%;animation:msSpin .8s linear infinite}
@keyframes msSpin{to{transform:rotate(360deg)}}

body.ms-page2 .hero-copy,
body.ms-page2 .hero .btn,
body.ms-page2 .float-wrap,
body.ms-page2 #wave {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.spk{position:fixed;right:22px;bottom:22px;z-index:20;width:46px;height:46px;display:none;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#fff}
.spk.show{display:flex}
.spk svg{width:22px;height:22px}
#waveBar,.wave-bar{display:none!important}

#msBoot{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("/img/hero.jpg") center 12%/cover no-repeat;
}
#msBoot.off{display:none !important}
.ms-spin{
  position:relative;
  width:84px;height:84px;
  border:5px solid rgba(255,255,255,.2);
  border-top-color:#d4a017;
  border-radius:50%;
  animation:msSpin .8s linear infinite;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.ms-pct{
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:13px;
  font-weight:700;
  animation:msPctFix .8s linear infinite;
}
@keyframes msPctFix{to{transform:rotate(-360deg)}}
@keyframes msSpin{to{transform:rotate(360deg)}}

.hero-copy,
.hero .btn,
.float-wrap,
#wave {
  transition: opacity .2s ease;
}
body.ms-page2 .hero-copy,
body.ms-page2 .hero .btn,
body.ms-page2 .float-wrap,
body.ms-page2 #wave {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#spkBtn.spk,
.spk {
  position: fixed !important;
  right: 22px !important;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 80 !important;
  width: 46px !important;
  height: 46px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 50% !important;
  color: #fff !important;
  cursor: pointer !important;
  padding: 0 !important;
  float: none !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#spkBtn.spk.show,
body.ms-page2 #spkBtn.spk.show {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
}
#spkBtn.spk svg,
.spk svg { width: 22px; height: 22px; display: block; }
@media (max-width: 800px) {
  #spkBtn.spk, .spk {
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    width: 42px !important;
    height: 42px !important;
  }
}

#waveBar.wave-bar {
  display: block !important;
  position: fixed !important;
  left: 10%;
  width: 80%;
  height: 44px;
  bottom: 28px;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background: transparent !important;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 35%, #000 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 35%, #000 100%);
}
#waveBar.wave-bar.show,
body.ms-page2 #waveBar.wave-bar { opacity: 1; }

#waveBar,.wave-bar{display:none!important;opacity:0!important}

@media (max-width:800px){
  .clip{
    height:88svh !important;
    min-height:88svh !important;
  }
  .clip-fade{
    height:38% !important;
  }
}

#waveBar.wave-bar {
  display: none !important;
  position: fixed !important;
  left: 10%;
  width: 80%;
  height: 46px;
  bottom: 28px;
  z-index: 7;
  pointer-events: none;
  background: transparent !important;
}
#waveBar.wave-bar.show {
  display: block !important;
}

#waveBar,.wave-bar{
  opacity:1 !important;
  visibility:visible !important;
}
#waveBar.wave-bar{
  position:fixed !important;
  z-index:30 !important;
  pointer-events:none !important;
  background:transparent !important;
}

#vImg.poster.on{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 18%;
  display:block !important;opacity:1 !important;z-index:0 !important;
}
.playbtn{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,.55);
  color:#fff;padding:0;cursor:pointer;
}
.playbtn.show{display:flex}
.playbtn svg{width:22px;height:22px;margin-left:3px}

.ms-ctl, #spkBtn.ms-ctl, .playbtn, #playBtn, #pauseBtn, #stopBtn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(0,0,0,.28) !important;
  color: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.ms-ctl.show, #spkBtn.ms-ctl.show, .playbtn.show {
  display: flex !important;
}
.ms-ctl svg, #spkBtn svg, .playbtn svg {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 !important;
}
#playBtn svg { margin-left: 2px !important; }

.clip video,
.clip img,
#vImg.poster.on {
  object-fit: contain !important;
  object-position: center 18% !important;
  width: 80% !important;
  height: 80% !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  position: absolute !important;
}
@media (max-width: 800px) {
  .clip video,
  .clip img,
  #vImg.poster.on {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
  }
}

.clip video,
.clip img,
#vImg.poster.on {
  object-fit: cover !important;
  object-position: center 18% !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  position: absolute !important;
}

#waveBar,.wave-bar,#wave{
  left:5% !important;
  width:90% !important;
}

#msEnd{
  position:absolute;
  inset:0;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transform:scale(.92);
}
#msEnd.play{
  animation:msEndIn 4.3s cubic-bezier(.22,.61,.36,1) forwards;
}
.ms-end-brand{
  color:#fff;
  font-weight:700;
  font-size:clamp(2rem, 6.2vw, 4.4rem);
  letter-spacing:.04em;
  line-height:1.05;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.ms-end-soon{
  margin-top:.35rem;
  color:#fff;
  font-weight:500;
  font-size:clamp(.95rem, 2.4vw, 1.35rem);
  letter-spacing:.18em;
  text-transform:lowercase;
  opacity:.9;
}
#msEnd.rainbow .ms-end-brand,
#msEnd.rainbow .ms-end-soon{
  background:linear-gradient(90deg,#ff4d6d,#ffc107,#2ecc71,#4aa3ff,#b14aff,#ff4d6d);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:msRain 2.8s linear infinite;
}
@keyframes msEndIn{
  0%{opacity:0;transform:scale(.97)}
  16%{opacity:1;transform:scale(1)}
  58%{opacity:1;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.02)}
}
@keyframes msRain{
  to{background-position:220% 0}
}

#msEnd.out{
  opacity:0 !important;
  transform:scale(1.02);
  transition:opacity .9s ease;
}

#waveBar,.wave-bar{display:block !important}

@media (max-width:800px){
  .ms-end-brand{font-size:clamp(2.35rem, 9vw, 3.4rem) !important}
  .ms-end-soon{font-size:clamp(1.15rem, 4.2vw, 1.55rem) !important}
}

@media (min-width:801px){
  .hero{margin-bottom:0 !important}
  .rest{margin-top:0 !important}
  .hero::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:22vh;
    background:linear-gradient(to bottom,transparent 0%,rgba(13,13,13,.55) 45%,#0d0d0d 100%);
    pointer-events:none;
    z-index:2;
  }
  .rest::before{
    content:"";
    display:block;
    height:8vh;
    margin:0;
    background:#0d0d0d;
  }
}
body.ms-page2 .hero-copy,
body.ms-page2 .hero .btn,
body.ms-page2 .float-wrap,
body.ms-page2 #wave {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.hero-copy,.hero .btn,.float-wrap{
  transition:opacity .35s ease, visibility .35s ease;
}

@media (min-width:801px){
  .hero::after{
    height:10vh !important;
    background:linear-gradient(to bottom,transparent 0%,#0d0d0d 100%) !important;
  }
  .hero-copy, .float-wrap, .hero .btn {
    position:relative;
    z-index:3 !important;
  }
  .hero-copy{padding-bottom:3.2vh !important}
}

@media (min-width:801px){
  .rest::before{display:none !important;height:0 !important;content:none !important}
  .hero{margin-bottom:0 !important}
  .rest{margin-top:0 !important;padding-top:0 !important}
  .hero::after{
    top:auto !important;
    bottom:0 !important;
    height:12vh !important;
    background:linear-gradient(to bottom,transparent,#0d0d0d) !important;
  }
}

.hero-copy{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  z-index:3 !important;
  padding:0 6% 2.4vh !important;
}
.float-wrap,.hero .btn{position:relative !important;z-index:3 !important}

body.ms-hide-copy .hero-copy,
body.ms-hide-copy .hero .btn,
body.ms-hide-copy .float-wrap {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (max-width:480px){
  #waveBar,.wave-bar{height:72px !important}
}

.page3{
  min-height:100vh;
  min-height:100svh;
  background:#000;
}

body.ms-page3 #waveBar,
body.ms-page3 .wave-bar,
body.ms-page3 #spkBtn,
body.ms-page3 .spk {
  display:none !important;
}

.rest{position:relative !important}
#spkBtn,.spk{
  position:absolute !important;
  right:22px !important;
  bottom:22px !important;
  left:auto !important;
  top:auto !important;
}
#waveBar,.wave-bar{
  position:absolute !important;
}

/* === PAGE 2/3 FIX === */
#waveBar,
#waveBar.wave-bar,
.wave-bar {
  display: none !important;
  opacity: 0 !important;
}

body.ms-page2 #waveBar,
body.ms-page2 #waveBar.wave-bar,
body.ms-page2 .wave-bar {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: fixed !important;
  left: 8% !important;
  width: 84% !important;
  height: 72px !important;
  bottom: 18px !important;
  top: auto !important;
  z-index: 40 !important;
  pointer-events: none !important;
  background: transparent !important;
}

body.ms-page3 #waveBar,
body.ms-page3 #waveBar.wave-bar,
body.ms-page3 .wave-bar {
  display: none !important;
  opacity: 0 !important;
}

#spkBtn,
#spkBtn.spk,
#spkBtn.ms-ctl,
.spk {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ms-page2 #spkBtn,
body.ms-page2 #spkBtn.spk,
body.ms-page2 #spkBtn.spk.show,
body.ms-page2 #spkBtn.ms-ctl.show,
body.ms-page2 .spk.show {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  right: 18px !important;
  bottom: 22px !important;
  top: auto !important;
  left: auto !important;
  z-index: 50 !important;
}

body.ms-page3 #spkBtn,
body.ms-page3 #spkBtn.spk,
body.ms-page3 #spkBtn.spk.show,
body.ms-page3 #spkBtn.ms-ctl.show,
body.ms-page3 .spk,
body.ms-page3 .spk.show {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === PAGE2 ONLY, BOTTOM OF .rest === */
.rest { position: relative !important; }

#waveBar, #waveBar.wave-bar, .wave-bar,
#spkBtn, #spkBtn.spk, #spkBtn.ms-ctl, .spk {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ms-page2 #waveBar,
body.ms-page2 #waveBar.wave-bar,
body.ms-page2 .wave-bar {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 56px !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 20 !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* glosnik TYLKO page2 i TYLKO gdy JS da .show (odtwarzanie) */
body.ms-page2 #spkBtn.spk.show,
body.ms-page2 #spkBtn.ms-ctl.show,
body.ms-page2 .spk.show {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  right: 16px !important;
  bottom: 8px !important;
  top: auto !important;
  left: auto !important;
  z-index: 30 !important;
}

body.ms-page3 #waveBar,
body.ms-page3 #waveBar.wave-bar,
body.ms-page3 .wave-bar,
body.ms-page3 #spkBtn,
body.ms-page3 #spkBtn.spk,
body.ms-page3 #spkBtn.spk.show,
body.ms-page3 #spkBtn.ms-ctl.show,
body.ms-page3 .spk,
body.ms-page3 .spk.show {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === nie forsuj glosnika; tylko page2 wave na dole === */
body.ms-page2 #spkBtn,
body.ms-page2 #spkBtn.spk,
body.ms-page2 #spkBtn.spk.show,
body.ms-page2 #spkBtn.ms-ctl.show,
body.ms-page2 .spk,
body.ms-page2 .spk.show {
  /* nic nie pokazuj na sile — zostaw JS od ikony i */
}

#spkBtn,
#spkBtn.spk,
#spkBtn.ms-ctl,
.spk {
  display: none !important;
}

body.ms-page3 #spkBtn,
body.ms-page3 #spkBtn.spk.show,
body.ms-page3 .spk.show {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* === IKONY TYLKO PAGE 2 === */
.rest { position: relative !important; }

body.ms-page3 #spkBtn,
body.ms-page3 #spkBtn.spk,
body.ms-page3 #spkBtn.spk.show,
body.ms-page3 #spkBtn.ms-ctl,
body.ms-page3 #spkBtn.ms-ctl.show,
body.ms-page3 .spk,
body.ms-page3 .spk.show,
body.ms-page3 .playbtn,
body.ms-page3 .playbtn.show,
body.ms-page3 #playBtn,
body.ms-page3 #pauseBtn,
body.ms-page3 #stopBtn,
body.ms-page3 .ms-ctl,
body.ms-page3 .ms-ctl.show,
body.ms-page3 #waveBar,
body.ms-page3 #waveBar.wave-bar,
body.ms-page3 .wave-bar {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.ms-page2 #waveBar,
body.ms-page2 #waveBar.wave-bar {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  bottom: 0 !important;
  top: auto !important;
  height: 56px !important;
}

body.ms-page2 #playBtn,
body.ms-page2 #pauseBtn,
body.ms-page2 #stopBtn,
body.ms-page2 #spkBtn,
body.ms-page2 .playbtn,
body.ms-page2 .ms-ctl,
body.ms-page2 .spk {
  position: absolute !important;
  bottom: 10px !important;
  top: auto !important;
}

/* === PANEL STEROWANIA TYLKO PAGE 2 === */
.rest { position: relative !important; }

body.ms-page3 #playBtn,
body.ms-page3 #pauseBtn,
body.ms-page3 #stopBtn,
body.ms-page3 #spkBtn,
body.ms-page3 .playbtn,
body.ms-page3 .ms-ctl,
body.ms-page3 .ms-panel,
body.ms-page3 #msPanel,
body.ms-page3 #ctlBox,
body.ms-page3 #msCtl {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.ms-page2 #playBtn,
body.ms-page2 #pauseBtn,
body.ms-page2 #stopBtn,
body.ms-page2 #spkBtn,
body.ms-page2 .playbtn,
body.ms-page2 .ms-ctl,
body.ms-page2 .ms-panel,
body.ms-page2 #msPanel,
body.ms-page2 #ctlBox,
body.ms-page2 #msCtl {
  position: absolute !important;
  top: auto !important;
}

/* glosnik nie na play */
#spkBtn,
#spkBtn.spk,
#spkBtn.spk.show,
#spkBtn.ms-ctl,
#spkBtn.ms-ctl.show {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* play: bez glosnika; po "i": glosnik z powrotem */
#spkBtn,
#spkBtn.spk,
#spkBtn.ms-ctl {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.ms-page2:has(#pauseBtn.show) #spkBtn,
body.ms-page2:has(#stopBtn.show) #spkBtn,
body.ms-page2:has(#pauseBtn.show) #spkBtn.spk,
body.ms-page2:has(#stopBtn.show) #spkBtn.spk,
body.ms-page2:has(#pauseBtn.show) #spkBtn.ms-ctl,
body.ms-page2:has(#stopBtn.show) #spkBtn.ms-ctl {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* wave na dolnej krawedzi page 2 */
.rest { position: relative !important; }

body.ms-page2 #waveBar,
body.ms-page2 #waveBar.wave-bar {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 52px !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
  z-index: 15 !important;
}

/* wave wraca — dolna krawedz page 2 */
body.ms-page2 #waveBar,
body.ms-page2 #waveBar.wave-bar,
body.ms-page2 canvas#waveBar {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 64px !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 80 !important;
  pointer-events: none !important;
  background: transparent !important;
}
.rest { position: relative !important; overflow: visible !important; }

/* DEBUG: wave ma byc widoczny na page 2 */
#waveBar,
#waveBar.wave-bar,
canvas#waveBar {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  left: 0 !important;
  width: 100% !important;
  height: 80px !important;
  min-height: 80px !important;
  bottom: auto !important;
  z-index: 999 !important;
  pointer-events: none !important;
  outline: 2px solid #d4a017 !important;
  background: rgba(212,160,23,.12) !important;
}
body.ms-page3 #waveBar,
body.ms-page3 canvas#waveBar {
  display: none !important;
}
body.ms-page2 #waveBar,
body.ms-page2 #waveBar.wave-bar {
  bottom: 20px !important;
  top: auto !important;
}
body.ms-page2 #waveBar,
body.ms-page2 #waveBar.wave-bar {
  bottom: 4px !important;
  top: auto !important;
}
@media (max-width: 800px) {
  body.ms-page2 #waveBar,
  body.ms-page2 #waveBar.wave-bar,
  #waveBar, #waveBar.wave-bar {
    height: 40px !important;
    min-height: 40px !important;
  }
}

#msEnd.play{animation:msEndIn 3.2s ease forwards}
#msEnd.hold{opacity:1 !important;transform:none;animation:none}
@keyframes msEndIn{
  0%{opacity:0}
  35%{opacity:1}
  100%{opacity:1}
}

#msEnd.play{opacity:1;animation:msEndIn 2.2s ease forwards}
#msEnd.out{opacity:0 !important;transition:opacity 1.1s ease}
@keyframes msEndIn{0%{opacity:0}100%{opacity:1}}

#msEnd{
  z-index:40 !important;
  -webkit-transform:translateZ(0);
}
.clip video, .clip img, #vImg, .clip-fade{z-index:1 !important}
@media (max-width:800px){
  #msEnd{z-index:40 !important}
  #msEnd.play,#msEnd.hold{opacity:1 !important;animation:none}
}

/* równy odstęp page1-page2 = page2-page3 */
.hero,.rest,.page3{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.rest{
  padding-bottom:0 !important;
  min-height:100svh;
}
.page3{
  padding-top:0 !important;
  margin-top:0 !important;
  min-height:100svh;
}


.lang-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #222;color:#eee;padding:10px 14px;cursor:pointer}
.lang-item.on{color:#e8c547}
.lang-flag{width:22px;height:16px;object-fit:cover;border-radius:2px;flex:none}


section.rest .wave-bar,
#waveBar.wave-bar{
  position:absolute;
  left:6%;
  width:88%;
  bottom:7%;
  height:86px;
  z-index:4;
  pointer-events:none;
}
@media (max-width:800px){
  #waveBar.wave-bar{height:84px;bottom:7%}
}

.clip{position:relative}
#waveBar.wave-bar{
  position:absolute !important;
  left:5% !important;
  width:90% !important;
  bottom:6% !important;
  height:94px !important;
  z-index:5 !important;
}