/* В вашем файле стилей (например, style.css) */

/* 1. Сбрасываем отступы и задаём минимальную высоту */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: 100%;
}
* {
  box-sizing: border-box;
}
/* 2. Фон для всей страницы */
html {
  background: linear-gradient(180deg, #002220 0%, #001716 100%);
  background-attachment: fixed; /* чтобы фон не скроллился */
}
/* 3. Тело страницы прозрачное */
body {
  background: transparent;
  font-family: Roboto Flex, Arial, sans-serif;
  font-size: 16px;
}


h1, h2, h3 {margin: 0;}
.container {
  max-width: 1700px;
}
header {
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 2;
  left: 50%;
}
header>div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px 12px 32px;
  gap: 128px;
  position: absolute;
  width: 674px;
  max-height: 78px;
  top: 60px;
  background: #000000;
  box-shadow: inset 0px 0px 50px rgba(255, 255, 255, 0.2);
  border-radius: 100px;
}
header>div>span {
  font-family: 'Roboto Flex';
  font-style: italic;
  font-weight: 880;
  font-size: 36px;
  line-height: 42px;
  text-transform: uppercase;
  color: #FFFFFF;
  font-stretch: 151%;
  font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 83, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 510, 'YTUC' 718, 'slnt' -10, 'opsz' 144;
}
.appstore-link, .appstore-link>svg {cursor: pointer}
.appstore-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  background: #222222;
  border-radius: 10000px;
}
.appstore-link:hover {
  background: radial-gradient(50% 100% at 50% 100%, #01EDDF 0%, #BDFFFA 100%), radial-gradient(96.64% 320.35% at 0.5% 82.8%, #A5FEF9 0%, #E2FFFD 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
.appstore-link:hover>svg>path {fill: #000;}
.video-banner {
  height: 1080px;
  position: relative;
  background-image: url('/img/video-banner-bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.video-banner h1 {
  position: absolute;
  bottom: 64px;
  font-family: 'Roboto Flex';
  font-style: italic;
  left: 50%;
  transform: translate(-50%);
  white-space: nowrap;
  font-weight: 880;
  font-size: 100px;
  line-height: 100px;
  text-align: center;
  text-transform: uppercase;
  background: radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-stretch: 151%;
  font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 83, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 510, 'YTUC' 718, 'slnt' -10, 'opsz' 144;
}
.medium-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 128px;
  margin: auto;
  margin-top: 128px;
}
.medium-block h2 {
  width: 700px;
  font-family: 'Roboto Flex';
  font-style: italic;
  font-weight: 880;
  font-size: 48px;
  line-height: 64px;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(0deg, #FFFFFF, #FFFFFF), radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-stretch: 151%;
  font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 83, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 510, 'YTUC' 718, 'slnt' 0, 'opsz' 144;
}
.item-medium-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 24px;
  width: 540px;
}
.item-medium-block span {
  font-family: 'Roboto Flex';
  font-style: italic;
  font-weight: 719;
  font-size: 32px;
  line-height: 42px;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(0deg, #FFFFFF, #FFFFFF), radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-stretch: 151%;
  font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 83, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 510, 'YTUC' 718, 'slnt' 0, 'opsz' 144;
}
.light-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 128px;
  border-radius: 64px;
  gap: 64px;
  padding: 128px 0px;
  background: #C7FFFB;
}
.light-block h3 {
  width: 792px;
  font-family: 'Roboto Flex';
  font-style: italic;
  font-weight: 880;
  font-size: 48px;
  line-height: 64px;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(0deg, #000000, #000000), radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-stretch: 151%;
  font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 83, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 510, 'YTUC' 718, 'slnt' 0, 'opsz' 144;
}
.light-block img {width: 706px;}
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding-bottom: 268px;
}
.footer-container {
  margin-top: 185px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  background: #001110;
  border-radius: 64px;
}
.footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 64px;
  gap: 128px;
}
.footer-info-bottom {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 15px;
}
.footer-info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.footer-info-item:nth-child(2) {gap: 18px;}
.footer-info-item p {
  font-family: 'SF Pro Display';
  font-style: medium;
  font-weight: 400;
  font-size: 22px;
  line-height: 100%;
  background: linear-gradient(0deg, #00857D, #00857D), radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

}
.footer-info-item a, .footer-info-item span {
  font-family: 'SF Pro Display';
  font-style: medium;
  font-weight: 400;
  font-size: 28px;
  white-space: nowrap;
  line-height: 100%;
  text-align: right;
  background: linear-gradient(0deg, #00857D, #00857D), radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.footer-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  gap: 10px;
  width: 100%;
}
.footer-button button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 24px 0px;
  gap: 10px;
  width: 100%;
  height: 88px;
  border: none;
  background: #00322F;
  box-shadow: inset 0px 0px 25px #005752;
  border-radius: 46px;
  font-family: 'Roboto Flex';
  font-style: italic;
  font-weight: 880;
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  font-stretch: 151%;
  font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 83, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 510, 'YTUC' 718, 'slnt' 0, 'opsz' 144;
}
button:hover {
  background: #FFFFFF;
  color: #00322F;
}
.footer-info-item a:hover {
  color:#FFFFFF;
}
.footer-info-item > a {
  position: relative;
  display: inline-block;
  color: #00857d; /* цвет текста и иконки по умолчанию */
  text-decoration: none;
  padding-right: 40px; /* отступ для иконки */
}

.footer-info-item > a::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M25.5386 22.2375C25.5694 22.2375 26.1587 21.8845 26.8479 21.4529C27.5371 21.0213 28.0874 20.6423 28.071 20.611C28.0544 20.5796 27.7234 20.1326 27.3353 19.6177C26.5561 18.5837 25.8059 17.2167 25.4734 16.2252C24.4374 13.1347 24.9142 9.92563 26.7944 7.33527L27.2732 6.67562L26.3618 5.76419L25.4503 4.85268L24.8478 5.28203C20.9007 8.095 16.1698 7.77134 11.9755 4.40148C11.7016 4.18141 11.4675 4.01158 11.4551 4.02396C11.3411 4.13796 9.90744 6.48204 9.90778 6.55383C9.90802 6.60573 10.1588 6.81804 10.465 7.02547C13.8552 9.3226 17.7343 10.0716 20.7327 9.00821L21.452 8.75314L11.4522 18.7892L5.12909 25.1354L6.9737 26.9801L13.3362 20.6406L23.3488 10.6646L23.0453 11.5912C22.2581 13.9951 22.5806 16.844 23.9651 19.7163C24.3594 20.5347 25.4219 22.2369 25.5386 22.2375Z' fill='%2300857d'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.3s ease;
}

/* При наведении меняем цвет иконки на белый */
.footer-info-item > a:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M25.5386 22.2375C25.5694 22.2375 26.1587 21.8845 26.8479 21.4529C27.5371 21.0213 28.0874 20.6423 28.071 20.611C28.0544 20.5796 27.7234 20.1326 27.3353 19.6177C26.5561 18.5837 25.8059 17.2167 25.4734 16.2252C24.4374 13.1347 24.9142 9.92563 26.7944 7.33527L27.2732 6.67562L26.3618 5.76419L25.4503 4.85268L24.8478 5.28203C20.9007 8.095 16.1698 7.77134 11.9755 4.40148C11.7016 4.18141 11.4675 4.01158 11.4551 4.02396C11.3411 4.13796 9.90744 6.48204 9.90778 6.55383C9.90802 6.60573 10.1588 6.81804 10.465 7.02547C13.8552 9.3226 17.7343 10.0716 20.7327 9.00821L21.452 8.75314L11.4522 18.7892L5.12909 25.1354L6.9737 26.9801L13.3362 20.6406L23.3488 10.6646L23.0453 11.5912C22.2581 13.9951 22.5806 16.844 23.9651 19.7163C24.3594 20.5347 25.4219 22.2369 25.5386 22.2375Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.footer-info>img {width: 100%;}
/* === Видео в .video-banner === */
.video-banner {
  position: relative;
  overflow: hidden;
  height: 100vh; /* оставляем высоту, как было */
  background: #001716; /* фон на случай, если видео не загрузится */
}
.video-banner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.video-banner h1 {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
  /* остальные стили остаются без изменений */
}

/* === Видео в .light-block === */
.light-block video {
  width: 706px;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 20px; /* для эстетики, можно убрать */
}

/* === Модальное окно (ФОС) === */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
}
.modal-overlay.active {
  display: flex;
}
.modal-window {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  max-width: 494px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 32px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  position: relative;
  border: 1px solid rgba(1, 237, 223, 0.2);
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  background: #00322F;
  border-radius: 42px;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.modal-close:hover {
  color: #FFFFFF;
}
.modal-close:hover>svg>path {
  fill: #00322F;
}
.modal-window h2 {
  font-family: 'Roboto Flex';
  font-style: italic;
  font-weight: 880;
  font-size: 32px;
  line-height: 36px;
  text-transform: uppercase;
  background: radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-stretch: 151%;
  font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 83, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 510, 'YTUC' 718, 'slnt' -10, 'opsz' 144;
}
.modal-window p {
  font-family: 'SF Pro Display';
  font-style: normal;
  font-weight: 510;
  font-size: 24px;
  line-height: 29px;
  color: #FFFFFF;
}
.modal-window-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  row-gap: 30px;
  flex-wrap: wrap;
}
.modal-window-button a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: #fff;
  font-family: 'SF Pro Display';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 29px;
  color: #939393;
  white-space: nowrap;
}
.modal-window-button .button-email {
  display: flex;
  text-decoration: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 24px 32px;
  gap: 10px;
  background: radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #00322F;
  box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.65);
  border-radius: 46px;
  font-family: 'Roboto Flex';
  font-style: italic;
  font-weight: 880;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
  color: #000000;
  font-stretch: 151%;
  font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 83, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 510, 'YTUC' 718, 'slnt' 0, 'opsz' 144;
}
.modal-window-button .button-email:hover {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #00322F;
  box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.65);
}
@media (max-width: 1920px) {
  .container {
    max-width: 980px;
  }
}
@media (max-width: 1200px) {
  .container {
    max-width: 774px;
  }
  .header>div>span {
    font-size: 36px;
    line-height: 100%;
  }
  .footer-info-bottom {
    flex-direction: column;
  }
  .footer-info-item a, .footer-info-item span {
    text-align: left;
    width: fit-content;
  }
  .video-banner h1 {
    font-family: 'Roboto Flex';
    font-style: italic;
    font-weight: 880;
    font-size: 64px;
    line-height: 64px;
    /* or 100% */
    text-align: center;
    text-transform: uppercase;
  }
  .medium-block h2 {
    font-size: 42px;
    line-height: 54px;
  }
  .light-block h3 {
    font-size: 42px;
    line-height: 58px;
  }
  .footer-info {gap: 64px;}
}
@media (max-width: 992px) {
  .container {
    max-width: 698px;
  }
  header>div {
    max-height: 78px;
    top: 32px;
  }
  .medium-block h2 {
    width: 595px;
  }
  .light-block h3 {
    font-size: 32px;
    line-height: 48px;
    width: 528px;
  }
  footer {padding-bottom: 120px;}
}
@media (max-width: 762px) {
  .modal-window-button .button-email {padding: 20px 16px;}
  .modal-window-button a {font-size: 14px;}
  .container, .medium-block h2, {
    max-width: 544px;
  }
  header>div {width: 547px;}
  .video-banner h1 {
    font-size: 48px;
    line-height: 48px;
  }
  .medium-block h2 {
      font-size: 28px;
      line-height: 42px;
  }
  .light-block h3 {
    width: 512px;
    font-size: 28px;
    line-height: 42px;
  }
  .light-block img {width: 512px;}
  .footer-button button {
    height: 64px;
    font-size: 24px;
    line-height: 32px;
  }
}
@media (max-width: 576px) {
  .container, .medium-block h2, .item-medium-block {
    max-width: 391px;
  }
  header>div {
    width: 403px;
    max-height: 52px;
  }
  .header>div>span {
    font-size: 24px;
    line-height: 100%;
  }
  .video-banner h1 {
    font-size: 36px;
    line-height: 48px;
  }
  .medium-block h2 {
      font-size: 24px;
      line-height: 32px;
  }
  .item-medium-block>img {width: 100%}
  .light-block h3 {
    width: 391px;
    font-size: 24px;
    line-height: 42px;
  }
  .light-block img {width: 391px;}
  .footer-button button {
    height: 64px;
    font-size: 20px;
    line-height: 24px;
  }
  .footer-container {border-radius: 32px;}
  .footer-info {
    padding: 32px 16px;
    gap: 64px;
  }
  .footer-button {padding: 32px 16px;}
  .footer-info-item p {
    font-style: normal;
    font-weight: 510;
    font-size: 16px;
    line-height: 19px;
    background: linear-gradient(0deg, #00857D, #00857D), radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  .footer-info-item a, .footer-info-item span {
    font-style: normal;
    font-weight: 510;
    font-size: 16px;
    line-height: 19px;
    background: linear-gradient(0deg, #00857D, #00857D), radial-gradient(64.02% 68.07% at 49.44% 85.73%, #01EDDF 0%, #BDFFFA 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
}


/* Адаптив для модалки */
@media (max-width: 576px) {
  .container, .video-banner h1 {
    max-width: 100%;
    padding: 0px 15px;
  }
  .medium-block h2, .item-medium-block {max-width: 100%;}
  .light-block h3 {width: 100%;}
  header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    left: 0px;
    width: 100%;
  }
  header>div {gap: 0px; width: 90%;}
  .logo {
    font-family: 'Roboto Flex';
    font-style: italic;
    font-weight: 880;
    font-size: 24px;
    line-height: 28px;
    text-transform: uppercase;
  }
  .item-medium-block {
    padding: 0px 16px;
  }
  .appstore-link {
    width: 36px;
    height: 36px;
  }
  .modal-window {
    padding: 32px 20px;
    border-radius: 32px;
  }
  .modal-window h2 {
    font-size: 24px;
    line-height: 32px;
  }
  .modal-window .submit-btn {
    font-size: 20px;
    line-height: 28px;
  }
}
@media (max-width: 400px) {
    .video-banner h1 {
        font-size: 30px;
        line-height: 38px;
    }
    .modal-close {
      top: 0px;
      right: 0px;
    }

}