:root {
  --border: #7E01FF;
  --bg: #0B0E1D;
}

/* Общие стили */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: #fff;
  background: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 120vw;
  height: 120vh;
  background: radial-gradient(circle, rgba(75, 0, 130, 0.6), rgba(0, 0, 0, 0));
  filter: blur(150px);
  animation: glowAnimation 30s infinite ease-in-out;
  z-index: -1;
  pointer-events: none;
}

@keyframes glowAnimation {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    transform: translate(-30%, -30%) scale(1.2);
    opacity: 0.4;
  }
  40% {
    transform: translate(30%, -30%) scale(1.4);
    opacity: 1;
  }
  60% {
    transform: translate(-30%, 30%) scale(1.2);
    opacity: 0.4;
  }
  90% {
    transform: translate(30%, 30%) scale(1.3);
    opacity: 0.2;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
}

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 18px;
  margin: 4px 4px 16px 4px;
  text-decoration: none;
  background-color: var(--bg);
  color: #fff;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  border: 2px solid var(--border);
  border-radius: 15px;
}

.button:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--border);
  box-shadow: 0 15px 45px rgba(126, 1, 255, 0.4);
}

/* Стили для хедера */
header {
  background-color: var(--bg);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  position: fixed;
  width: calc(100% - 24px);
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1000;
  flex-wrap: wrap;
  transition: background-color 0.8s;
  box-sizing: border-box;
  border: 2px solid var(--border);
  border-radius: 15px;
}

.header-left {
  display: flex;
  align-items: center;
  margin-left: 10px;
  flex-grow: 1;
}

.header-left .logo {
  width: 30px;
  margin-right: 15px;
}

.header-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  text-align: center;
}

.header-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.header-menu ul li {
  display: inline;
  margin-right: 20px;
}

.header-menu ul li a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  padding: 5px 10px;
  transition: background-color 0.3s;
}

.header-menu ul li a:hover {
  background-color: var(--border);
  border-radius: 5px;
}

.header-right {
  margin-right: 100px;
  flex-grow: 1;
  text-align: right;
}

.header-right .social-icon {
  color: #fff;
  margin-left: 15px;
  text-decoration: none;
  font-size: 30px;
}

header h1 {
  margin: 0;
  font-size: 20px;
}

/* Мобильная версия для хедера */
@media (max-width: 768px) {
  .header-center {
    order: 1;
    flex-grow: 0;
    margin: 0;
    text-align: center;
  }
  .header-right {
    order: 2;
    flex-grow: 0;
    margin: 0 0 0 20px;
    text-align: left;
  }
  .header-menu ul li {
    margin-right: 15px;
  }
  .header-right .social-icon {
    font-size: 24px;
    margin-left: 12px;
  }
}

/* Кнопка меню */
.menu-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--bg);
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

/* Иконка внутри кнопки */
.menu-button i {
  font-size: 24px;
  color: var(--text);
}

/* Скрытое мобильное меню */
.mobile-menu {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background-color: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  display: none;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.mobile-menu a {
  text-decoration: none;
  color: var(--text);
  padding: 8px 12px;
  display: block;
}

.mobile-menu a:hover {
  background-color: var(--border);
  border-radius: 5px;
}

/* Скрываем обычное меню на мобильных устройствах */
@media (max-width: 808px) {
  .header-center {
    display: none;
  }
}

/* Скрытие кнопки меню на десктопе */
@media (min-width: 809px) {
  .menu-button,
  .mobile-menu {
    display: none !important;
  }
}

/* Стили для основного контента */
main {
  flex: 1;
  padding-bottom: 20px;
  position: relative;
}

#hero-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  text-align: center;
  position: relative;
  margin-top: -20px;
  overflow: hidden;
}

.hero-image {
  margin-bottom: 20px;
}
.hero-image img {
  max-width: 30%;
  height: auto;
  border-radius: 15px;
}

.hero-text {
  max-width: 600px;
  position: relative;
  z-index: 1;
}

.hero-text h2 {
  font-size: 48px;
  margin: 20px 0;
}

.hero-text p {
  font-size: 18px;
  margin: 20px 0;
}

.arrows {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arrow {
  display: block;
  width: 20px;
  height: 20px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  margin: 5px;
  opacity: 0;
  animation: arrowAnim 2s infinite;
}

.arrow:nth-child(1) {
  animation-delay: 0s;
}
.arrow:nth-child(2) {
  animation-delay: 0.3s;
}
.arrow:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes arrowAnim {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translateY(10px) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateY(20px) rotate(45deg);
  }
}

#next-section {
  padding: 10px 20px;
  font-size: 18px;
  background-color: var(--bg);
  color: #fff;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  border: 2px solid var(--border);
  border-radius: 15px;
}

/* Контейнер с преимуществами */
#blocks-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Три карточки в ряд */
  gap: 30px;
  padding: 60px 20px;
  background: transparent;
  position: relative;
  overflow: hidden;
}

#blocks-text {
  text-align: center;
  padding: 20px;
}

.info-block {
  background: rgba(11, 14, 29, 0.8);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 25px;
  position: relative;
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  width: 90%; /* Уменьшаем ширину карточек */
  margin: 0 auto; /* Центрируем карточки */
}

.info-block:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--border); /* Анимация границы при наведении */
  box-shadow: 0 15px 45px rgba(126, 1, 255, 0.4);
}

.info-block:hover::before {
  opacity: 1;
}

.info-block img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 6px rgba(126, 1, 255, 0.3));
  transition: transform 0.3s;
}

.info-block:hover img {
  transform: scale(1.1) rotate(-5deg);
}

.info-block h3 {
  font-size: 1.4em;
  margin-bottom: 12px;
  background: linear-gradient(45deg, #fff 30%, #b79ced 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3);
}

.info-block p {
  font-size: 1em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 1;
}

/* Адаптация для планшетов */
@media (max-width: 1024px) {
  #blocks-section {
    grid-template-columns: repeat(2, 1fr); /* Две карточки в ряд на планшетах */
  }
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  #blocks-section {
    grid-template-columns: 1fr; /* Одна карточка в ряд на мобильных */
    padding: 40px 15px;
  }

  .info-block {
    padding: 20px;
  }

  .info-block h3 {
    font-size: 1.2em;
  }
}

/* Блок с карточками */
.variants-text {
  text-align: center;
  padding: 20px;
}
.variants-text ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.variants-text li {
  margin: 10px 0;
}

/* Блок карточек */
.cards-section {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.card {
  width: 24%;
  min-width: 280px;
  background-color: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card img {
  width: 100%;
  height: auto;
}

.card-text h3 {
  font-size: 1.4em;
  margin-bottom: 12px;
  background: linear-gradient(45deg, #fff 30%, #b79ced 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3);
}

.card-text p {
  padding: 15px;
}

.download-text-block {
  text-align: center;
  padding: 20px;
  background: transparent;
}

/* Адаптация карточек для мобильных устройств */
@media (max-width: 768px) {
  .cards-section {
    flex-direction: column;
    align-items: center;
  }
  .card {
    width: 90%;
  }
}

/* Стили для футера */
footer {
  background-color: var(--bg);
  padding: 10px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  margin: 12px;
  box-sizing: border-box;
  border: 2px solid var(--border);
  border-radius: 15px;
  width: calc(100% - 24px);
}

.footer-left, .footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.footer-left .social-icon, .footer-right .social-icon {
  color: #fff;
  margin-right: 15px;
  text-decoration: none;
  font-size: 30px;
}

.footer-right .logo {
  width: 180px;
}

.footer-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

#contact-info {
  font-size: 12px;
}

/* Респонсив для экранов менее 768px */
@media (max-width: 768px) {
  footer {
    flex-direction: column;
    padding: 15px;
  }

  .footer-left, .footer-right {
    margin: 10px 0;
    justify-content: center;
    width: 100%;
  }

  .footer-left .social-icon, .footer-right .social-icon {
    font-size: 25px;
    margin-right: 10px;
  }

  #contact-info {
    font-size: 14px;
    text-align: center;
    margin-top: 15px;
  }
}

/* Для экранов от 770px до 1100px */
@media (min-width: 770px) and (max-width: 1100px) {
  footer {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 15px;
  }

  .footer-left, .footer-right {
    justify-content: flex-start;
    margin: 0;
  }

  .footer-center {
    width: auto;
    text-align: center;
    margin-top: 10px;
  }

  .footer-left .social-icon, .footer-right .social-icon {
    font-size: 28px;
    margin-right: 15px;
  }

  #contact-info {
    font-size: 14px;
    text-align: center;
    margin-top: 0;
  }
}

/* Для десктопа, если нужно */
@media (min-width: 1024px) {
  .footer-left, .footer-right {
    margin-left: 100px;
    margin-right: 100px;
  }

  .footer-center {
    width: auto;
  }
}


/* Стили для шариков – их позиционирование обновляется через JS */
.circle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
}

/* Начальные размеры, позиции и цвета для 50 шариков */
.circle:nth-child(1)  { width: 30px;  height: 30px;  background: #ff4d4d;  left: 10%; top: 5%; }
.circle:nth-child(2)  { width: 40px;  height: 40px;  background: #4da6ff;  left: 80%; top: 15%; }
.circle:nth-child(3)  { width: 35px;  height: 35px;  background: #4dff4d;  left: 20%; top: 25%; }
.circle:nth-child(4)  { width: 45px;  height: 45px;  background: #ffd24d;  left: 60%; top: 35%; }
.circle:nth-child(5)  { width: 50px;  height: 50px;  background: #b84dff;  left: 30%; top: 45%; }
.circle:nth-child(6)  { width: 25px;  height: 25px;  background: #ff944d;  left: 70%; top: 55%; }
.circle:nth-child(7)  { width: 55px;  height: 55px;  background: #4dffea;  left: 15%; top: 65%; }
.circle:nth-child(8)  { width: 60px;  height: 60px;  background: #ff4da6;  left: 85%; top: 75%; }
.circle:nth-child(9)  { width: 30px;  height: 30px;  background: #fffa4d;  left: 40%; top: 85%; }
.circle:nth-child(10) { width: 45px;  height: 45px;  background: #ff4d4d;  left: 60%; top: 95%; }
.circle:nth-child(11) { width: 35px;  height: 35px;  background: #4da6ff;  left: 25%; top: 8%; }
.circle:nth-child(12) { width: 40px;  height: 40px;  background: #4dff4d;  left: 55%; top: 18%; }
.circle:nth-child(13) { width: 50px;  height: 50px;  background: #ffd24d;  left: 15%; top: 28%; }
.circle:nth-child(14) { width: 30px;  height: 30px;  background: #b84dff;  left: 75%; top: 38%; }
.circle:nth-child(15) { width: 55px;  height: 55px;  background: #ff944d;  left: 35%; top: 48%; }
.circle:nth-child(16) { width: 60px;  height: 60px;  background: #4dffea;  left: 85%; top: 58%; }
.circle:nth-child(17) { width: 25px;  height: 25px;  background: #ff4da6;  left: 20%; top: 68%; }
.circle:nth-child(18) { width: 45px;  height: 45px;  background: #fffa4d;  left: 50%; top: 78%; }
.circle:nth-child(19) { width: 35px;  height: 35px;  background: #ff4d4d;  left: 70%; top: 88%; }
.circle:nth-child(20) { width: 40px;  height: 40px;  background: #4da6ff;  left: 30%; top: 98%; }
.circle:nth-child(21) { width: 50px;  height: 50px;  background: #4dff4d;  left: 40%; top: 12%; }
.circle:nth-child(22) { width: 30px;  height: 30px;  background: #ffd24d;  left: 60%; top: 22%; }
.circle:nth-child(23) { width: 45px;  height: 45px;  background: #b84dff;  left: 20%; top: 32%; }
.circle:nth-child(24) { width: 55px;  height: 55px;  background: #ff944d;  left: 80%; top: 42%; }
.circle:nth-child(25) { width: 60px;  height: 60px;  background: #4dffea;  left: 50%; top: 52%; }
.circle:nth-child(26) { width: 25px;  height: 25px;  background: #ff4da6;  left: 10%; top: 62%; }
.circle:nth-child(27) { width: 35px;  height: 35px;  background: #fffa4d;  left: 90%; top: 72%; }
.circle:nth-child(28) { width: 40px;  height: 40px;  background: #ff4d4d;  left: 40%; top: 82%; }
.circle:nth-child(29) { width: 50px;  height: 50px;  background: #4da6ff;  left: 70%; top: 92%; }
.circle:nth-child(30) { width: 45px;  height: 45px;  background: #4dff4d;  left: 60%; top: 5%; }
.circle:nth-child(31) { width: 30px;  height: 30px;  background: #ffd24d;  left: 15%; top: 15%; }
.circle:nth-child(32) { width: 55px;  height: 55px;  background: #b84dff;  left: 85%; top: 25%; }
.circle:nth-child(33) { width: 60px;  height: 60px;  background: #ff944d;  left: 45%; top: 35%; }
.circle:nth-child(34) { width: 25px;  height: 25px;  background: #4dffea;  left: 25%; top: 45%; }
.circle:nth-child(35) { width: 35px;  height: 35px;  background: #ff4da6;  left: 75%; top: 55%; }
.circle:nth-child(36) { width: 40px;  height: 40px;  background: #fffa4d;  left: 35%; top: 65%; }
.circle:nth-child(37) { width: 50px;  height: 50px;  background: #ff4d4d;  left: 55%; top: 75%; }
.circle:nth-child(38) { width: 45px;  height: 45px;  background: #4da6ff;  left: 20%; top: 85%; }
.circle:nth-child(39) { width: 30px;  height: 30px;  background: #4dff4d;  left: 80%; top: 95%; }
.circle:nth-child(40) { width: 55px;  height: 55px;  background: #ffd24d;  left: 50%; top: 10%; }
.circle:nth-child(41) { width: 60px;  height: 60px;  background: #b84dff;  left: 70%; top: 20%; }
.circle:nth-child(42) { width: 25px;  height: 25px;  background: #ff944d;  left: 30%; top: 30%; }
.circle:nth-child(43) { width: 35px;  height: 35px;  background: #4dffea;  left: 90%; top: 40%; }
.circle:nth-child(44) { width: 40px;  height: 40px;  background: #ff4da6;  left: 40%; top: 50%; }
.circle:nth-child(45) { width: 50px;  height: 50px;  background: #fffa4d;  left: 60%; top: 60%; }
.circle:nth-child(46) { width: 45px;  height: 45px;  background: #ff4d4d;  left: 10%; top: 70%; }
.circle:nth-child(47) { width: 30px;  height: 30px;  background: #4da6ff;  left: 80%; top: 80%; }
.circle:nth-child(48) { width: 55px;  height: 55px;  background: #4dff4d;  left: 40%; top: 90%; }
.circle:nth-child(49) { width: 60px;  height: 60px;  background: #ffd24d;  left: 90%; top: 5%; }
.circle:nth-child(50) { width: 35px;  height: 35px;  background: #b84dff;  left: 60%; top: 15%; }
