/*
 * Стили для лендинга Project Wave Team в стиле «liquid glass».
 * Тёмная цветовая палитра, стеклянные панели и золотые акценты.
 */

/* Цветовая палитра */
:root {
  --bg-start: #030a1a;
  --bg-end: #152a2f;
  --gradient-overlay-start: #0a1322;
  --gradient-overlay-end: #15243a;
  --primary: #d4af37; /* золотой акцент */
  --primary-light: #f1d27a; /* светлый золотой */
  --text: #e5e5e5;
  --text-muted: #9fa6b2;
  /* Заменяем фон стеклянных карточек на тёмный полупрозрачный оттенок,
     чтобы обеспечить лучший контраст поверх яркого фона.  Обводка
     чуть золотистая для сохранения фирменного стиля. */
  --glass-bg: rgba(3, 10, 26, 0.6);
  --glass-border: rgba(212, 175, 55, 0.2);
  --blur-amount: 8px;
}

/* Сброс и базовые стили */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  /* Используем единый фон по всей странице.  Изображение
     dark-hero-background.png содержит тёмные волны с золотым
     свечением и применяется как основа сайта.  Фон фиксирован для
     плавного скролла без резких переходов. */
  background: url('dark-hero-background.png') center / cover no-repeat fixed;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Анимированный фон для эффекта жидкого стекла */
/* Замена размытого градиента: оставляем лёгкую затемняющую плёнку
   поверх фонового изображения. Анимация убрана, чтобы внимание
   сосредотачивалось на контенте. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Более равномерное затемнение всего фона — используется на всех секциях,
     чтобы фон выглядел единым. Значение 0.5 даёт мягкий полупрозрачный эффект. */
  background: rgba(5, 10, 20, 0.5);
  backdrop-filter: blur(4px);
  /* Помещаем затемняющий слой ниже канваса частиц, чтобы белые точки были видны
     поверх затемнения, но всё равно оставались позади контента. */
  /* Размещаем затемняющий слой ниже канваса со звёздами */
  z-index: -1;
  pointer-events: none;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Контейнер для ограничения ширины */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: rgba(3, 10, 26, 0.6);
  border-bottom: 1px solid var(--glass-border);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
}

.logo {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}

.nav {
  position: relative;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 1.8rem;
}
.nav-list li a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: color 0.3s ease;
}
.nav-list li a:hover {
  color: var(--primary);
}

/* Burger menu */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 4px 0;
  background: var(--text);
  transition: all 0.3s ease;
}
.burger.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Responsive navigation */
@media (max-width: 880px) {
  .nav-list {
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    background: rgba(3, 10, 26, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1rem;
    gap: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: none;
  }
  .nav-list.active {
    display: flex;
  }
  .burger {
    display: flex;
  }
}

/* Hero section */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  /* Герой теперь прозрачный, так что фон наследуется от body.
     Удаляем собственный фон, чтобы избежать видимого стыка при прокрутке. */
  background: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Выравниваем затемнение героя с общим затемнением страницы.  Делим полупрозрачность
     на body::before; здесь фон прозрачный, чтобы не возникало перехода между блоками. */
  background: transparent;
  z-index: 1;
}

/* Глобальный канвас для эффекта частиц.  Установлен на всю страницу и
   фиксирован, чтобы белые точки сохранялись при прокрутке. */
#hero-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Размещаем канвас частиц между затемняющим слоем и основным контентом */
  /* Размещаем канвас со звёздами выше затемняющего слоя, но ниже контента */
  z-index: 0;
  pointer-events: none;
  /* Канвас полностью прозрачный, весь эффект создаётся с помощью JS. */
  border: none;
  background: transparent;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 0 1rem;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary-light);
}
.hero p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: var(--text);
  line-height: 1.6;
}

/* Glass card base class */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  color: #0f172a;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
  /* Trigger GPU acceleration for smoother animations */
  will-change: transform;
}
.btn-primary {
  background-image: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #0f172a;
}
.btn-secondary {
  background-image: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #0f172a;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* Лёгкое пульсирование кнопок на hover для большей динамичности */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

.btn-primary:hover,
.btn-secondary:hover {
  animation: pulse 0.8s ease-in-out infinite;
}

/* Stats section */
.stats {
  padding: 6rem 0 5rem 0;
  text-align: center;
}
.stats h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
  color: var(--primary-light);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}
.stat-card .number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
}
.stat-card .label {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--text-muted);
}

/* How it works */
.how-it-works {
  padding: 6rem 0;
  text-align: center;
}
.how-it-works h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
  color: var(--primary-light);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.step-card {
  text-align: center;
}
.step-card ion-icon {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.step-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--primary-light);
}
.step-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Features */
.features {
  padding: 6rem 0;
  text-align: center;
}
.features h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
  color: var(--primary-light);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.feature-card {
  text-align: center;
}
.feature-card ion-icon {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.feature-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--primary-light);
}
.feature-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Pricing */
.pricing {
  padding: 6rem 0;
  text-align: center;
}
.pricing h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
  color: var(--primary-light);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.price-card {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.price-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.price-card .price {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary-light);
}
.price-card .price-features {
  list-style: none;
  margin-bottom: 1.5rem;
  text-align: left;
  padding-left: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.price-card .price-features li {
  padding: 0.3rem 0;
  position: relative;
  padding-left: 1.5rem;
}
.price-card .price-features li::before {
  content: '✔';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
}
.price-card.recommended {
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

/* === Тарифы (динамически загружаемые) === */
.tariffs {
  padding: 6rem 0;
  text-align: center;
}
.tariffs h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
  color: var(--primary-light);
}
.tariff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.tariff-card {
  position: relative;
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(var(--blur-amount));
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Increase minimum height of tariff cards to allow longer descriptions
     without cutting off content prematurely.  This helps maintain
     consistent card sizes even when descriptions span multiple lines. */
  min-height: 360px;
  overflow: hidden;
}
.tariff-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.tariff-card.special::before {
  content: 'Скидка';
  position: absolute;
  top: 1rem;
  left: -3rem;
  transform: rotate(-45deg);
  background: var(--primary);
  color: #01060e;
  padding: 0.3rem 3rem;
  font-size: 0.65rem;
  letter-spacing: 0.05rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.tariff-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.tariff-card .tariff-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
  flex-grow: 1;

  /*
   * Ограничиваем высоту описания для карт тарифов.  Увеличено до 5 строк,
   * чтобы тексты не обрезались слишком рано.  Если содержание длиннее,
   * оно всё ещё будет обрезано с многоточием, но теперь пользователи
   * увидят больше информации.  Свойства display и line‑clamp работают
   * только в браузерах на базе WebKit.
   */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Allow up to 8 lines of description before clipping.  Each of our
     custom descriptions contains three sentences that may wrap to
     multiple lines on narrow screens.  Eight lines provide
     sufficient room for the entire text while keeping cards
     reasonably compact. */
  -webkit-line-clamp: 8;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tariff-card .tariff-price {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--primary-light);
}
.tariff-card .old-price {
  font-size: 0.9rem;
  text-decoration: line-through;
  color: var(--text-muted);
  margin-left: 0.5rem;
}
.tariff-card ul {
  list-style: none;
  margin-bottom: 1.5rem;
  padding-left: 0;
  text-align: left;
}
.tariff-card ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.tariff-card ul li::before {
  content: '✔';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
}

/* === Страны === */
.countries {
  padding: 6rem 0;
  text-align: center;
}
.countries h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
  color: var(--primary-light);
}
.countries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
}
.country-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  backdrop-filter: blur(var(--blur-amount));
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.country-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.country-card .flag {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.country-card .name {
  font-size: 0.95rem;
  color: var(--primary-light);
  margin-bottom: 0.25rem;
}
.country-card.fastest {
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}
.country-card.disabled {
  opacity: 0.5;
}

/* === Секция поддержки / CTA === */
.support-section {
  padding: 6rem 0;
  text-align: center;
}
.support-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.support-content {
  max-width: 640px;
  padding: 2rem 2.5rem;
  text-align: center;
}
.support-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary);
}
.support-content p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.support-content .support-contacts {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.support-content .support-contacts a {
  color: var(--primary);
  text-decoration: none;
  margin: 0 0.25rem;
}
.support-content .support-contacts a:hover {
  color: var(--primary-light);
}

/* CTA / Contact section */
.cta-section {
  padding: 6rem 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(241, 210, 122, 0.2));
  text-align: center;
}
.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--primary-light);
}
.cta-section p {
  font-size: 1rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-muted);
  line-height: 1.6;
}
.cta-container .btn {
  margin-top: 0;
}

/* Footer */
.footer {
  padding: 2rem 0;
  background: rgba(3, 10, 26, 0.9);
  text-align: center;
  border-top: 1px solid var(--glass-border);
}
.footer p {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.footer a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer a:hover {
  color: var(--primary-light);
}

/* === Кастомный стиль полосы прокрутки === */
/* Для браузеров на движке WebKit (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Для Firefox (тонкая полоса и цвета) */
body {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

/* Анимации для появления элементов */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
[data-animate].animate {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive layouts */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-grid,
  .features-grid,
  .steps-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 2.2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .nav-list {
    width: 180px;
  }
  .btn {
    width: 100%;
  }
}