.header-steam-btn {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 101;
  pointer-events: auto;
}
.header-steam-img {
  height: 4vw;
  width: auto;
  display: block;
  transition: transform 0.2s;
}

.header-block {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5vw;
  z-index: 100;
  background: url('../pic/header_block.png') no-repeat center center;
  background-size: cover;
  pointer-events: none;
}
.header-logo-left {
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  height: 90%;
  width: auto;
  display: block;
  pointer-events: none;
  z-index: 101;
}

.header-social-box {
  position: absolute;
  top: 50%;
  right: 70px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8vw;
  z-index: 101;
  pointer-events: auto;
}

.header-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-social-btn img {
  height: 3vw;
  width: auto;
  display: block;
  transition: transform .2s;
}

.s5-steam-btn {
  position: absolute;
  right: 5vw;
  bottom: 2vw;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 12;
}
.s5-steam-img {
  width: 17vw;
  height: auto;
  display: block;
  transition: transform 0.2s;
}

.s5-info-box {
  position: absolute;
  top: 2.3vw;
  left: 20vw;
  display: flex;
  flex-direction: row;
  gap: 2vw;
  align-items: flex-end;
  z-index: 11;
  max-width: 71vw;
}
.s5-info-box {
  position: absolute;
  top: 2.3vw;
  left: 20vw;
  display: flex;
  flex-direction: row;
  gap: 2vw;
  align-items: start;
  z-index: 11;
  max-width: 71vw;
}

.s5-info-block {
  color: #202646;
  font-family: Arial, sans-serif;
  font-size: 1.5vw;
  line-height: 1.1;
  padding: 0.3vw 1vw;
  min-width: 10vw;
  max-width: 34vw;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.s5 {
  position: relative;
}
.s5-logo {
  position: absolute;
  left: -0.5vw;
  bottom: 1.5vw;
  width: 22vw;
  height: auto;
  z-index: 10;
  pointer-events: none;
}
.s4 {
  position: relative;
}
.s4-buttons {
  position: absolute;
  left: 25%;
  bottom: -2vw;
  transform: translateX(-50%);
  width: auto;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.s4-buttons {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}

.s4-steam-btn {
  width: 30vw;
  height: auto;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.s4-steam-btn:hover {
  transform: scale(1.12);
  z-index: 4;
}
.s3-title-line--bottom {
  white-space: nowrap;
  word-break: normal;
}
.s3-title-text{
  position:absolute;
  left:27vw;
  bottom:7vw;
  z-index:10;
  --top-size: 10vw;
  --bot-size: 7vw;
  --gap: .5vw;
  height: calc(var(--top-size) + var(--gap) + var(--bot-size));
  width: max-content;
  font-family:'Burlesk', Arial, sans-serif;
  font-weight:400;
  color:#fff;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000,
    -2px  2px 0 #000, 2px  2px 0 #000,
     0    2px 8px rgba(0,0,0,.7);
  letter-spacing:.04em;
  user-select:none;
  pointer-events:none;
  text-align:center;
  line-height:1;
}

.s3-title-line{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  margin:0; padding:0;
  pointer-events:none;
}

.s3-title-line--top{
  font-size: var(--top-size);
  top: calc(50% - (var(--gap)/2) - var(--top-size));
  z-index:1;
}

.s3-title-line--bottom{
  font-size: var(--bot-size);
  top: calc(50% + (var(--gap)/2) - 3vw);
  z-index:2;
}

@font-face {
  font-family: 'Burlesk';
  src: url('../fonts/Burlesk-Regular.ttf') format('truetype');
  font-weight: normal; 
   font-style: normal;
}

.accent {
  font-size: 2vw;
  font-weight: 400;
  line-height: 1;
  vertical-align: baseline;
}

.upper-block-text__sub {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 1.5vw;
  color: #202646;
  font-weight: 400;
  font-family: Arial, sans-serif;
  text-align: left;
  padding: 0.5vw 5vw 0 3vw;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;  
}

.dotted-list{
    font-size: 1.7vw;
    line-height: 2.5vw;
}

.parag-simple-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 1.1vw;
  color: #202646;
  font-weight: 400;
  font-family: Arial, sans-serif;
  text-align: left;
  padding: 0.5vw 13vw 0 3vw;
  margin-top: 0.5vw;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;  
}

.parag-title-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 2.5vw; 
  font-weight: 400;
  font-family: 'Burlesk', Arial, sans-serif;
  text-align: left;
  padding: 0vw 10vw 0 3vw;
  margin-top: 1vw;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;  
}

.upper-block-text__content {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 1.2vw;
  font-weight: 400;
  text-align: center;
  padding: 1vw;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  pointer-events: auto;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;  
}
.s1-video-prev {
  position: absolute;
  top: 50%;
  left: 4%;
  height: auto;
  display: flex;
  align-items: flex-start;
  z-index: 3;
}
.s1-video-prev .video-prev-img {
  width: 100%;
  height: auto;
  display: block;
}
.s1-buttons {
  position: absolute;
  right: 19%;
  top: 90%;
  width: 50vw;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2vw;
  z-index: 3;
}
.s1-buttons .button-img {
  width: 14vw;
  height: auto;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.s1-buttons .button-img:hover {
  transform: scale(1.12);
  z-index: 4;
}
.upper-block-text {
  position: absolute;
  top: 50%;
  right: 0;
  width: 60vw;
  height: 40%;
  background: url('../pic/upper_block_text.png') no-repeat right top;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.s2-block-text{
  position: absolute;
  top: 5%;
  right: 0;
  width: 50vw;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.s1 {
  position: relative;
  width: 100%;
  height: 18vh;
  margin: 0;
  padding: 0;
}
.logo-center {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 40vw;
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

.lulu-logo {
  position: absolute;
  top: 11vw;
  left: 10vw;
  width: 13vw;
  z-index: 5;
}

.header-block {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
}
.header-img {
  height: auto;
  display: block;
}
.hero {
  margin-top: 12vw;
}
body, .hero {
  margin: 0;
  padding: 0;
  background-color: rgb(253, 237, 207);
}
:root{
  --bg-w: 1920;
  --bg-h: 4443;
  --max-w: 5000px;
}

.hero{
  position: relative;
  width: min(100%, var(--max-w));
  margin-inline: auto;
  aspect-ratio: var(--bg-w) / var(--bg-h);
  overflow: hidden;
}

.hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.slice{
  position: absolute;
  left: 0;
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.s1{ top: 0%;   height: 22%; }
.s2{ top: 22%;  height: 23%; }
.s3{ top: 45%;  height: 22%; }
.s4{ top: 67%;  height: 22.5%; }
.s5{ top: 99%;  height: 47%; }

.s4 .buttons{
  display: flex;
  gap: clamp(8px, 2vw, 20px);
  padding-inline: clamp(12px, 4vw, 40px);
}
.s4 .buttons img{
  width: clamp(140px, 14vw, 220px);
  height: auto;
}

.link-text {
  color: rgb(36, 36, 196);
  cursor: pointer;
  pointer-events: auto;
  display: inline-block;
  text-decoration: none;
}

.link-text:hover {
  color: rgb(94, 94, 186);
  text-decoration: none;
}

.s1-video-prev .video-prev-img {
  display: block;
  width: 36vw;
  height: auto;
  z-index: 0;
}

.video-prev-img{
  left: -5vh;
}

.s1-video-prev .video-prev-vid {
  position: absolute;
  inset: 5px;
  width: 34vw;
  top: 1vw;
  left: 1vw;
  object-fit: cover;
  z-index: 1;
  pointer-events: auto;
  background: #000;
}

.lang-switch {
  position: fixed;
  top: 50px;
  right: 300px;
  z-index: 9999;
  display: flex;
  gap: 8px
}

.lang-switch button {
  padding: 6px 10px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  border-radius: 6px
}

.lang-switch button[aria-current="true"] {
  border-color: #333;
  font-weight: 700
}