body {
  height: 100%;
  background-color: black;
  margin: 0;
  overflow: hidden;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  position: relative;
}

/* ✨ Звездочки на фоне */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.star {
  position: absolute;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 50%, transparent 70%);
  border-radius: 50% 50% 50% 0;
  animation: twinkle 3s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(255,255,255,0.6);
}

.star::before,
.star::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 50% 50% 50% 0;
}

.star:nth-child(1) { top: 10%; left: 15%; width: 4px; height: 4px; animation-delay: 0s; animation-duration: 2.5s; }
.star:nth-child(2) { top: 20%; left: 80%; width: 3px; height: 3px; animation-delay: -0.5s; animation-duration: 3s; }
.star:nth-child(3) { top: 35%; left: 25%; width: 5px; height: 5px; animation-delay: -1s; animation-duration: 2.8s; }
.star:nth-child(4) { top: 50%; left: 90%; width: 2px; height: 2px; animation-delay: -1.5s; animation-duration: 3.2s; }
.star:nth-child(5) { top: 60%; left: 10%; width: 4px; height: 4px; animation-delay: -2s; animation-duration: 2.7s; }
.star:nth-child(6) { top: 75%; left: 60%; width: 3px; height: 3px; animation-delay: -2.5s; animation-duration: 3.1s; }
.star:nth-child(7) { top: 85%; left: 35%; width: 6px; height: 6px; animation-delay: -0.8s; animation-duration: 2.9s; }
.star:nth-child(8) { top: 5%; left: 60%; width: 3px; height: 3px; animation-delay: -1.8s; animation-duration: 3.3s; }
.star:nth-child(9) { top: 45%; left: 5%; width: 4px; height: 4px; animation-delay: -2.2s; animation-duration: 2.6s; }
.star:nth-child(10) { top: 90%; left: 75%; width: 2px; height: 2px; animation-delay: -0.3s; animation-duration: 3s; }

@keyframes twinkle {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.4) rotate(180deg);
  }
}



#logo {
  font-size: 48px; /* Чуть уменьшили шрифт, чтобы фраза смотрелась изящнее */
  width: 100%; /* Разрешаем тексту занимать всю доступную ширину экрана */
  text-align: center; /* Центрируем текст, раз ширина теперь 100% */
  height: 100px;
  color: rgba(255, 255, 255, 0.807);
  font-weight: 800;
  margin: auto;
  z-index: 10;
}

#links {
  left: 50%;
  opacity: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.28);
  z-index: 10;
}

.link {
  cursor: pointer;
  display: inline-block;
  font-size: 32px;
  margin: 0 20px;
  padding: 8px 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  transition: all 0.4s ease;
}

.link:hover {
  color: rgba(255, 255, 255, 0.807);
  border-color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.05);
}

.cv {
  cursor: pointer;
  display: inline-block;
  font-size: 32px;
  margin: 0 20px 10px;
  padding: 8px 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  transition: all 0.4s ease;
}

.cv:hover {
  color: rgba(255, 255, 255, 0.807);
  border-color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.05);
}

.cv-menu {
  background-color:rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}

.cv-menu :hover{
  background-color:rgba(0, 0, 0, 0);
  color: rgba(255, 255, 255, 0.28);
}

.cv-item {
  color: rgba(255, 255, 255, 0.807);
}

.drop-title {
  background-color: rgba(0, 0, 0, 0);
  color: rgba(255, 255, 255, 0.28);
}

.drop-title:hover {
  color: rgba(255, 255, 255, 0.807);
}

a {
  text-decoration: none;
}

.triggers{
  bottom: 20px;
  left: 50%;
  position: absolute;
  text-align: center;
  width: 100%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.807);
}

span{
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  margin: 0 20px;
  padding: 2px 4px;
  transition: all 1s;
}

span[data-disabled="true"]{
  opacity: 0.3;
  pointer-events: none;
}

span:hover{
  color: rgba(255, 255, 255, 0.28);
}

img {
  filter: sepia(100%) saturate(20%);
  z-index: 2;
}


/* ========================================= */
/* МОБИЛЬНАЯ АДАПТАЦИЯ (ДОЛЖНА БЫТЬ В САМОМ НИЗУ) */
/* ========================================= */
@media (max-width: 768px) {
  /* Звезды */
  .star { box-shadow: 0 0 8px rgba(255,255,255,0.5); }
  .star:nth-child(1) { width: 3px; height: 3px; }
  .star:nth-child(3) { width: 4px; height: 4px; }
  .star:nth-child(7) { width: 5px; height: 5px; }

  /* Текст: добавляем тень для читаемости поверх 3D-моделей */
  #logo {
    font-size: 36px;
    height: auto; 
    margin-bottom: 30px; 
    line-height: 1.2;
    padding: 0 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); /* Тень отрывает текст от фона */
  }

  /* Контейнер кнопок: включаем Flexbox для вертикального стека */
  #links {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column; /* Ставим кнопки в столбик */
    align-items: center; /* Центрируем по горизонтали */
    gap: 15px; /* Расстояние между кнопками */
  }

  /* Сами кнопки: делаем их широкими, яркими и "стеклянными" */
  .link, .cv {
    width: 70%; /* Занимают 70% ширины экрана */
    max-width: 280px; /* Но не больше 280px */
    font-size: 20px;
    padding: 14px 20px; 
    margin: 0; /* Убираем старые отступы, так как работает gap */
    
    /* Делаем их всегда яркими на телефоне */
    color: rgba(255, 255, 255, 0.95); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
    
    /* Эффект матового стекла */
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); /* Для Safari (iPhone) */
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Легкая тень кнопки */
  }

  /* Анимация при нажатии пальцем (вместо hover) */
  .link:active, .cv:active {
    transform: scale(0.96); /* Кнопка слегка "вдавливается" */
    background-color: rgba(255, 255, 255, 0.2); /* И чуть светлеет */
  }
}