* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

body {
  background: #000;
  color: #fff;
  overflow-x: hidden;
  
}

/* ---------- Hero Section ---------- */
.hero {
  position: relative;
  height: 100vh;
  background: url("bg.png") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* чтобы контент был левее */
  text-align: left;
  padding: 0 3vw;
}



/*.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}*/


.overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background 0.3s ease;
}

.modal-active .overlay {
  background: rgba(0, 0, 0, 0.6);
}


.content {
  position: relative;
  z-index: 2; 
  max-width: min(66.88vw);
  text-align: left;
  /*margin-left: 8%; /* смещает левее */
}

.logos {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* не позволяй логотипам переноситься */
}

.logo {
  flex-shrink: 0; /* не сжимай логотип при расширении экрана */
  height: min(10vh);
  width: auto; /* сохраняет пропорции */
  margin-right: 2.08vw;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4vw; 
  transform-origin: top left;
  zoom: 1 !important;
}

.event-info {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1.52vw;
  padding: 0.42vw 0.83vw;
  font-size: 1.73vw;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap; /* не переносит строку */
  display: inline-block;
  margin-left: 2.08vw;
  transform: scale(1);
}

.event-info span {
  display: block;
  margin-top: 0.21vw; /* лёгкий отступ, чтобы выглядело как в макете */
}

h1 {
  font-size: 4.2vw;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.83vw;
  letter-spacing: 0.03vw;
}

h1 span {
  display: block;
  margin-top: 1.21vw; /* лёгкий отступ, чтобы выглядело как в макете */
}



.subtitle {
  font-family: Arial;
  font-size: 1.5vw;
  letter-spacing: 0.05vw;
  margin-top: 1.5vw;
  margin-bottom: 2.56vw;
  color: #ffffff;
}


.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  /* размеры */
  width: min(24vw, 100%);  /* 372px = 19.38vw при ширине макета 1920px */
  height: min(5.5vw);   /* 95px = 4.95vw */
  min-width: 2.9vw;

  /* стиль */
  border-radius: 0.31vw;       /* 6px = 0.31vw */
  border: 0.1vw solid transparent;
  background: #0055ff;
  box-shadow: 0 0.21vw 4.4vw 0 #00B1F8;
  backdrop-filter: blur(0.31vw);

  /* текст */
  color: #fff;
  font-size: 2.3vw;
  font-weight: 0.94vw;;
  letter-spacing: 0.05vw;

  /* анимация */
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

.cta:hover {
  background: linear-gradient(90deg, #0099ff, #00ccff);
  box-shadow: 0 0.31vw 5vw 0 #00ccff;
  transform: scale(1.02);
}


.hero, .modal-content {
  opacity: 0;
  transition: opacity 0.6s ease;
  background-size: cover;
  background-position: center;
}

.hero.loaded, .modal-content.loaded {
  opacity: 1;
}



/* ---------- Modal ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); 
  backdrop-filter: blur(0.4vw);
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.modal-content {
  background: url("bg-modal.png") center/cover no-repeat;
  /* background: url("bg-form.png") center/cover no-repeat;*/
  border-radius: 1vw;
  padding: 2.2vw;
  width: 90%;
  max-width: 40vw;
  max-height: 45vw;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  position: relative;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* безопасная анимация */
}

.modal-content.show {
  transform: scale(1);
  opacity: 1;
}

.close {
  position: absolute;
  top: 1vw;  
  right: 1.5vw;
  font-size: 2.1vw;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.3s ease;
}

.close:hover {
  color: #00bfff;
  transform: scale(1.2);
}

h2 {
  font-size: 2.5vw;
}





form {
  display: flex;
  flex-direction: column;
  gap: 0.9vw;
  margin: 1.9vw;
}

input {
  padding: 0.8vw 1vw;
  border: none;
  border-radius: 0.6vw;
  font-size: 0.9vw;
  outline: none;
  height: 3.2vw;
}


input[type="text"], input[type="tel"], input[type="email"],
textarea {
    font-size: 2.8vh; 
    line-height: 1.5;
    padding: 1vh 1vw; 
}


input::-webkit-input-placeholder { font-size: 1.1vw; } /* Chrome, Safari */
input::-moz-placeholder { font-size: 1.1vw; }          /* Firefox */
input:-ms-input-placeholder { font-size: 1.1vw; }      /* IE */
input::placeholder { font-size: 1.1vw; }               /* Современные браузеры */


.submit-btn {
  background: linear-gradient(90deg, #05F, #0099ff);
  border: none;
  color: white;
  padding: 0.8vw 1vw;
  margin: 0.1vw 7.5vw 0;
  border-radius: 0.5vw;
  font-size: 1.2vw;  
  height: 3.2vw;
  cursor: pointer;
  transition: 0.3s;
  justify-content: center;
  align-items: center;
}

.submit-btn:hover {
  background: linear-gradient(90deg, #0099ff, #00ccff);
  box-shadow: 0 0 1vw rgba(0, 191, 255, 0.5);
  transform: scale(1.03);
}


#notification {
  text-align: center;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 500;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#notification.show {
  opacity: 1;
}

#notification.success {
  background-color: #0099ff;
  box-shadow: 0 0 15px #6f9df9;
}

#notification.error {
  background-color: #e763e4;
  box-shadow: 0 0 15px #f484f6;
}



/* ---------- Responsive ---------- 
@media (max-width: 768px) {
  h1 {
    font-size: 36px;
  }
  .top-bar {
    flex-direction: column;
    gap: 10px;
  }
}
*/






/* ---------- Планшеты (iPad, ширина 768–1024px) ---------- */
@media (min-width: 769px) and (max-width: 1024px) {

  html, body {
    overflow-x: hidden; /* чтобы фон не уходил вправо */
  }

  .hero {
    min-height: 100vh;
    background: url("bg.png") center / cover no-repeat;
    padding: 10vh 5vw 8vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  }

  .content {
    max-width: 85%;
  }

    /* ---------- Логотипы ---------- */
  .top-bar {
    flex-direction: column;
    gap: 3vw;
    margin-bottom: 8vw;
  }

  .logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6vw;
    flex-wrap: nowrap;
  }

  .logo {
    height: 6.6vh;
    width: auto;
    margin-right: 0;
    margin-bottom: 2.5vh;
  }



  .event-info {
    font-size: 3.7vw;
    padding: 1vw 2vw;
  }

  /* Заголовок и текст */
  h1 {
    font-size: 9vw;
    line-height: 1.1;
    margin-top: 6vh;
    margin-bottom: 4vh;
  }

  h1 span {
    display: block;
    margin-top: 3vw;
  }

  .subtitle {
    font-size: 2.5vw;
    margin-top: 2vh;
    margin-bottom: 4.5vh;
  }

  /* Кнопка */
  .cta {
    width: 50vw;
    height: 7vh;
    font-size: 4vw;
    margin-bottom: 6vh;
    border-radius: 1.5vw;
    box-shadow: 0 0 2vw rgba(0, 170, 255, 0.6);
  }

/* ---------- Модалка ---------- */
.modal-content {
    width: 80%;
    max-width: 90vw; 
    padding: 6vh 6vw; 
    border-radius: 3vw;
    margin: 5vw auto; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2vh; 
    max-height: 90vh; 
    overflow-y: auto; 
}

h2 {
  font-size: 3.5vh; /* заголовок масштабируется по высоте экрана */
}


  .close {
    top: 3vw;
    right: 4vw;
    font-size: 5vw;
  }

  
  input {
    font-size: 2vw;
    padding: 3vw 4vw;
    border-radius: 2vw;
    height: auto;
    margin: 0.2vw;
  }

  input::placeholder {
    font-size: 2vw;
  }

  .submit-btn {
    font-size: 2.5vw;
    padding: 3vw;
    border-radius: 2vw;
    margin: 3vw 0 0;
    height: auto;
  }



}











/* ---------- Responsive (мобильная адаптация улучшенная) ---------- */
@media (max-width: 768px) {


    html, body {
    overflow: hidden;
    height: 100%;
  }
  
  /* Общие правки */
  body {
    background: black;
  }

  .hero {
    min-height: 100vh;
    background: url("bg.png") center bottom / cover no-repeat;
    padding: 12vh 5vw 8vh;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  }

  .content {
    max-width: 90%;
    text-align: center;
  }

  /* ---------- Логотипы ---------- */
  .top-bar {
    flex-direction: column;
    gap: 3vw;
    margin-bottom: 8vw;
  }

  .logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6vw;
    flex-wrap: nowrap;
  }

  .logo {
    height: 6vh;
    width: auto;
    margin-right: 0;
    margin-bottom: 2.5vh;
  }

  /* ---------- Инфо и текст ---------- */
  .event-info {
    font-size: 4vw;
    margin: 0 auto;
    padding: 2vw 4vw;
    border-radius: 3vw;
    display: inline-block;
  }

  h1 {
    font-size: 10vw;  
    line-height: 1.15;
    margin-bottom: 3.5vh;
    margin-top: 5vh;
  }

  h1 span {
    margin-top: 2vw;
  }

  .subtitle {
    font-size: 4.2vw;
    margin-top: 4vw;
    margin-bottom: 6vh;
    color: #ffffff;
  }

  /* ---------- Кнопка ---------- */
  .cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70vw;
    height: 8vh;
    font-size: 5vw;
    border-radius: 3vw;
    margin: 0 auto 11vh;
    background: linear-gradient(90deg, #0077ff, #00aaff);
    box-shadow: 0 0 5vw rgba(0, 170, 255, 0.6);
  }

  .cta:hover {
    background: linear-gradient(90deg, #0099ff, #00ccff);
    transform: scale(1.03);
  }

/* ---------- Модалка ---------- */
  .modal {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
 } 

.modal-content {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 90vw; 
    padding: 6vh 6vw; 
    border-radius: 3vw;
    margin: 5vw auto; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2vh; 
    max-height: 90vh; 
    overflow-y: auto; 
}


  .close {
    top: 3vw;
    right: 4vw;
    font-size: 5vw;
  }

  h2 {
    font-size: 5vw;
  }

  input {
    font-size: 3.8vw;
    padding: 3vw 4vw;
    border-radius: 2vw;
    height: auto;
    margin: 0.2vw;
  }

  input::placeholder {
    font-size: 3.5vw;
  }

  .submit-btn {
    font-size: 3.8vw;
    padding: 3vw;
    border-radius: 2vw;
    margin: 3vw 0 0;
    height: auto;
  }
}