@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* 🔹 Общий стиль для всех браузеров на основе WebKit */
::-webkit-scrollbar {
  width: 12px;             /* ширина скроллбара */
}

::-webkit-scrollbar-track {
  background: #0a0a0f;     /* фон трека */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00fff0, #a0f0ff);
  border-radius: 10px;
  border: 2px solid #0a0a0f; /* рамка вокруг thumb */
  transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00fff0, #00ffff, #a0f0ff);
}

/* 🔹 Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #00fff0 #0a0a0f;
}

/* 🔹 Адаптив: чуть тоньше на мобильных */
@media (max-width: 480px) {
  ::-webkit-scrollbar {
    width: 8px;
  }
}

@media (hover:hover) {
  .btn:hover {
  box-shadow: 0 0 25px #00fff0,0 0 50px #00fff0,0 0 80px #00fff0;
  transform: scale(1.08);
}
.btn:hover::after { opacity: 1; }
.card:hover, .testimonial:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 0 40px #00fff0, 0 0 70px #00fff0, 0 0 100px #00fff0;
}
a:hover { color: #a0f0ff; }

}

/* 🔹 Сброс стилей */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Orbitron', sans-serif;
  background: #164e47;
  color: #e0f7ff;
  overflow-x: hidden;
  line-height: 1.6;
}

main {
  max-height: 95vh;
  background: #0a0a0f;
  margin: 20px;
  border-radius: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Canvas для анимации звезд, солнца, луны, Земли */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 🔹 Hero */
header {
  padding: 40px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  height: 100vh;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #001122, #0a0a0f 80%);
}
.screenshot figure {
  position: relative;
  display: inline-block;
  margin: 20px auto;
  padding: 15px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,255,255,0.05), rgba(0,0,0,0.6));
  border: 2px solid rgba(0,255,255,0.5);
  box-shadow: 0 0 25px rgba(0,255,255,0.2), inset 0 0 15px rgba(0,255,255,0.15);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  max-width: 600px;
}

.screenshot figure img {
  width: 100%;
  border-radius: 15px;
  display: block;
  transition: transform 0.5s ease;
}

.screenshot figure::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0,255,255,0.4) 90deg,
    transparent 180deg,
    rgba(0,255,255,0.4) 270deg,
    transparent 360deg
  );
  animation: rotateGlow 6s linear infinite;
  pointer-events: none;
}

.screenshot figure:hover {
  transform: scale(1.05);
  box-shadow: 0 0 35px rgba(0,255,255,0.5), inset 0 0 25px rgba(0,255,255,0.2);
}

.screenshot figure:hover img {
  transform: scale(1.08);
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


header h1 {
  font-size: 3rem;
  color: #00fff0;
  text-shadow: 0 0 10px #00ffee3f, 0 0 20px #00ffee3f, 0 0 30px #00ffee3f;
  z-index: 1;
  animation: glowText 3s ease-in-out infinite alternate;
}

header p {
  font-size: clamp(1.5rem, 4vw, 1.5rem); /* гибкий размер текста */
  margin: 2.5rem 0; /* заменил фиксированные px на rem для адаптивности */
  color: #a0f0ff;
  text-shadow: 0 0 2px #00fff0, 0 0 4px rgba(0, 255, 240, 0.6);
  z-index: 1;
  line-height: 1.6; /* улучшенная читаемость */
  max-width: 60ch; /* ограничение длины строки для комфортного чтения */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


@keyframes glowText {
  from { text-shadow: 0 0 4px #00ffee3f,0 0 8px #00ffee3f,0 0 16px #00ffee3f; }
  to { text-shadow: 0 0 8px #00ffee3f,0 0 16px #00ffee3f,0 0 32px #00ffee3f; }
}

/* 🔹 Кнопки с космическим сиянием */
.btn-container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 1;
}

.btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 30px;
  background: rgba(0, 255, 255, 0.08);
  border: 2px solid #00fff0;
  color: #00fff0;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: 0.4s ease;
}

.btn i { font-size: 1.3em; }
.btn span { display: inline-block; }

.btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(0,255,255,0.2) 0%, transparent 70%);
  opacity: 0;
  transition: 0.5s ease;
  pointer-events: none;
  transform: rotate(45deg);
}

/* 🔹 Секции и заголовки */
section {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(50px) scale(0.97);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

section.visible { opacity: 1; transform: translateY(0) scale(1); }

section h2 {
  text-align: center;
  font-size: 2rem;
  color: #00fff0;
  margin-bottom: 40px;
  text-shadow: 0 0 8px #00fff0;
}

/* 🔹 Карточки и отзывы */
.features, .standards, .testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.card, .testimonial {
  background: rgba(0, 255, 255, 0.07);
  border: 1px solid #00fff0;
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.15);
  transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}

.card i, .testimonial i {
  font-size: 2.5rem;
  color: #00fff0;
  text-shadow: 0 0 5px #00fff0,0 0 15px #00fff0;
}

.card strong, .testimonial strong { color: #00fff0; }
.card span, .testimonial span { color: #a0f0ff; }

/* 🔹 Текст с мерцающим сиянием */
h1, h2, p, span, strong {
  text-shadow: 0 0 5px #00ffee3f, 0 0 15px #00ffee3f, 0 0 25px #00ffee3f;
  transition: text-shadow 0.5s ease-in-out;
}

/* Секции */
.fade-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Карточки внутри секций */
.fade-section .card, .fade-section .testimonial {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Эффект появления с небольшой задержкой для каскада */
.fade-section.visible .card, .fade-section.visible .testimonial {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fade-section.visible .card:nth-child(1) { transition-delay: 0.1s; }
.fade-section.visible .card:nth-child(2) { transition-delay: 0.2s; }
.fade-section.visible .card:nth-child(3) { transition-delay: 0.3s; }
.fade-section.visible .card:nth-child(4) { transition-delay: 0.4s; }
.fade-section.visible .card:nth-child(5) { transition-delay: 0.5s; }
.fade-section.visible .card:nth-child(6) { transition-delay: 0.6s; }

.fade-section.visible .testimonial:nth-child(1) { transition-delay: 0.1s; }
.fade-section.visible .testimonial:nth-child(2) { transition-delay: 0.2s; }
.fade-section.visible .testimonial:nth-child(3) { transition-delay: 0.3s; }

/* 🔹 Эффекты ссылок */
a {
  color: #00fff0;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* ============================= */
/* Стили для блока с интеграцией и плюсами */
.integration-details {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: left;
  margin-top: 30px;
  animation: fadeIn 1s ease-in-out;
}

.integration-details h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #00fff0;
  text-shadow: 0 0 8px #00ffee3f, 0 0 15px #00ffee3f;
}

.price-box {
  background: rgba(10, 10, 20, 0.95);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(3, 20, 20, 0.192);
  color: #fff;
  font-size: 1.2rem;
}

.price-box p {
  margin-top: 10px;
}

.benefits ul {
  list-style-type: none;
  padding: 0;
  color: #a0f0ff;
  font-size: 1rem;
}

.benefits ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.benefits ul li i {
  color: #4caf50;
}

/* Плавное появление для секции */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Адаптивность */
@media (max-width: 768px) {
  .integration-details {
    padding: 20px;
  }
  .price-box p {
    font-size: 1rem;
  }
  .benefits ul li {
    font-size: 0.95rem;
  }
}


/* 🔹 Footer */
footer {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg,#0a0a0f 0%,#001122 100%);
  color: #00fff0;
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 5px #00fff0,0 0 10px #00fff0,0 0 15px #00fff0;
  border-top: 1px solid rgba(0,255,255,0.3);
  position: relative;
  z-index: 10;
}

footer::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 120%; height: 100%;
  background: linear-gradient(90deg, rgba(0,255,255,0.05) 0%, rgba(0,255,255,0.3) 50%, rgba(0,255,255,0.05) 100%);
  transform: translateX(-50%) skewX(-20deg);
  pointer-events: none;
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(150%) skewX(-20deg); }
}

/* 🔹 Адаптив для мобильных */
@media(max-width:768px){

  header {
    flex-direction: column;
    justify-content: flex-start;
    max-height: 100%;
    padding-top: 50px;
  }

  header h1{font-size:2rem;}
  header p{font-size:1rem;}
  .btn{padding:12px 22px;font-size:0.95rem;}
  .btn i{font-size:1.2em;}
  .card{padding:20px 15px;}
}

@media(max-width:480px){
  header h1{font-size:1.6rem;}
  header p{font-size:0.95rem;}
  .btn{width:100%;justify-content:center;padding:10px;font-size:0.9rem;}
  .btn i{font-size:1.1em;}
  .card{padding:15px 10px;gap:10px;}
  .standards .card{flex-direction:column;text-align:center;gap:10px;}
  footer{font-size:0.9rem;padding:20px 15px;}

  /* 🔹 Отключаем анимацию shimmer на мобильных */
  footer::after{
    display: none;
  }
}