/* Сброс базовых отступов браузера */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #1f476a; 
  font-family: 'Russo One', sans-serif;
  overflow-x: hidden; /* Обрезаем края 1920-фонов на узких мониторах */
}

/* Главный контейнер (строго 1200px, по центру) */
.page-scaler {
  position: relative;
  width: 1200px;
  height: 2840px;
  margin: 0 auto;
}

/* ================= СЛОЙ ФОНОВ (ЖЕСТКО 1920px) ================= */
.bg-layer {
  position: absolute;
  top: 0; 
  left: 50%;
  transform: translateX(-50%); /* Центрируем 1920px слой внутри 1200px контейнера */
  width: 1920px; 
  z-index: 1;
}

/* Все фоны теперь строго 1920px шириной */
.top-stripe-1 {
  position: absolute;
  top: 0; left: 0; width: 1920px; height: 16px;
  background: linear-gradient(to right, #1f476a, #457095, #1f476a);
}

.hero-bg {
  position: absolute;
  top: 16px; left: 0; width: 1920px; height: 1040px; 
  background: url('img/hero-bg.jpg') center top no-repeat;
  /* Убрали background-size: cover, теперь картинка 1 к 1 */
}

.top-stripe-2 {
  position: absolute;
  top: 1056px; left: 0; width: 1920px; height: 16px;
  background: linear-gradient(to right, #1f476a, #457095, #1f476a);
}

.who-we-are-bg {
  position: absolute;
  top: 1072px; left: 0; width: 1920px; height: 520px;
  background-color: #ffa828; 
}

.top-stripe-3 {
  position: absolute;
  top: 1592px; left: 0; width: 1920px; height: 16px;
  background: linear-gradient(to right, #1f476a, #457095, #1f476a);
}

.turbodudes-bg {
  position: absolute;
  top: 1608px; left: 0; width: 1920px; height: 520px;
  background-color: #8428ff; 
}

.top-stripe-4 {
  position: absolute;
  top: 2128px; left: 0; width: 1920px; height: 16px;
  background: linear-gradient(to right, #1f476a, #457095, #1f476a);
}

.dorfs-bg {
  position: absolute;
  top: 2144px; left: 0; width: 1920px; height: 520px;
  background-color: #ff8428; 
}

.top-stripe-5 {
  position: absolute;
  top: 2664px; left: 0; width: 1920px; height: 16px;
  background: linear-gradient(to right, #1f476a, #457095, #1f476a);
}

.footer-bg {
  position: absolute;
  top: 2680px; left: 0; width: 1920px; height: 160px;
  background-color: #1f476a; 
}


/* ================= СЛОЙ КОНТЕНТА (ОСТАЛСЯ 1200px) ================= */
.content-layer {
  position: absolute;
  top: 0; left: 0; width: 1200px;
  z-index: 10;
}

.container {
  width: 1200px;
  height: 2840px; 
  position: relative; 
}


/* --- Элементы первого экрана --- */
.logo-shield {
  position: absolute;
  top: 0; left: 40px; z-index: 20; 
}

.panel {
  position: absolute;
  top: 655px; left: 50%; transform: translateX(-50%); 
  background: url('img/panel-bg.png') center center no-repeat;
  background-size: 100% 100%; 
  width: 928px; height: 308px; 
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; 
  padding-top: 28px; 
}

.panel-text {
  width: 870px; font-size: 30px; line-height: 1.2; color: #ffffff; 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); text-align: left; 
}


/* ================= КНОПКИ (Steam и Play) ================= */
.steam-btn, .play-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: block; 
  cursor: pointer;
  transition: transform 0.2s ease;
  text-decoration: none; 
}

.steam-btn { top: 914px; }
.play-btn { top: 2011px; }

.steam-btn:hover, .play-btn:hover {
  transform: translateX(-50%) scale(1.05);
}

.steam-btn img, .play-btn img {
  display: block;
}

.btn-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%); 
  font-size: 46px;
  color: #ffffff;
  text-shadow: 2px 3px 0px rgba(0, 0, 0, 0.3);
  pointer-events: none; 
  white-space: nowrap;
}


/* --- Элементы Who We Are --- */
.section-title {
  position: absolute;
  top: 1141px; left: 50%; transform: translate(-50%, -50%); 
  font-size: 36px; color: #ffffff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap; 
}

.panel-orange {
  position: absolute;
  top: 1178px; left: 50%; transform: translateX(-50%); 
  background: url('img/panel-orange-bg.png') center center no-repeat;
  background-size: 100% 100%; 
  width: 928px; height: 308px; 
  display: flex; align-items: flex-start; justify-content: flex-start; 
  padding-left: 29px; padding-top: 28px; 
}

.panel-text-orange {
  font-size: 30px; line-height: 1.2; color: #ffffff; 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); text-align: left; 
}

.avatar-luke {
  position: absolute;
  top: 1112px; left: 994px; z-index: 5;
}

.avatar-robert {
  position: absolute;
  top: 1357px; left: 994px; z-index: 5;
}


/* --- Элементы Turbo Dudes --- */
.section-title-multiline {
  position: absolute;
  top: 1666px; left: 50%; transform: translate(-50%, -50%); 
  font-size: 36px; color: #ffffff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center; white-space: nowrap; 
}

.poster-turbodudes {
  position: absolute;
  top: 1600px; left: 15px; width: 330px; height: 501px; z-index: 20; 
}

.panel-purple {
  position: absolute;
  top: 1752px; left: 234px; 
  background: url('img/panel-purple-bg.png') center center no-repeat;
  background-size: 100% 100%; 
  width: 928px; height: 308px; 
  display: flex; align-items: flex-start; justify-content: flex-start; 
  padding-left: 138px; padding-top: 28px; 
}

.panel-text-purple {
  font-size: 30px; line-height: 1.2; color: #ffffff; 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); text-align: left; 
}


/* --- Элементы Dorf's Big Drop --- */
.poster-dorfs {
  position: absolute;
  top: 2128px; 
  left: 37px;  
  width: 308px; height: 509px; 
  z-index: 20; 
}

.panel-dorfs {
  position: absolute;
  top: 2212px; 
  left: 234px; 
  background: url('img/panel-red-bg.png') center center no-repeat;
  background-size: 100% 100%; 
  width: 928px; height: 388px; 
  display: flex; align-items: flex-start; justify-content: flex-start; 
  padding-left: 138px; 
  padding-top: 28px;   
}

.panel-text-dorfs {
  font-size: 30px; 
  line-height: 1.2; 
  color: #ffffff; 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
  text-align: left; 
}


/* --- Подвал (Footer) --- */
.footer-text {
  position: absolute;
  top: 2742px; 
  left: 40px; 
  transform: translateY(-50%); 
  font-size: 18px; 
  line-height: 1.3;
  color: #ffffff; 
  font-family: 'Russo One', sans-serif; 
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.footer-icon-steam {
  position: absolute;
  top: 2709px;
  left: 991px;
  z-index: 99999;
  display: block;
  cursor: pointer;
}

.footer-icon-steam img {
  display: block;
  width: 66px;
  height: 65px;
  transition: opacity 0.2s;
}

.footer-icon-steam img:hover {
  opacity: 0.8;
}

.footer-icon-mail {
  position: absolute;
  top: 2716px;
  left: 1087px;
  z-index: 99999;
  display: block;
  cursor: pointer;
}

.footer-icon-mail img {
  display: block;
  width: 71px;
  height: 52px;
  transition: opacity 0.2s;
}

.footer-icon-mail img:hover {
  opacity: 0.8;
}