.floating-icon {
    animation: float 3s ease-in-out infinite;
    object-fit: contain;
    opacity: 0.2;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 768px) {
    .floating-icon {
        width: 20px;
        height: 20px;
    }
    .floating-icon:nth-child(1) { top: 10px; left: 10px; }
    .floating-icon:nth-child(2) { top: 20px; right: 10px; }
}

.gradient-text {
    background: linear-gradient(135deg, #ec4899, #f472b6, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.DMCA-color {
    background: linear-gradient(135deg, #F74C8E, #DF4DD2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: Montserrat, sans-serif;
    font-size: 1.2rem; 
}

.protected-color {
    background: linear-gradient(135deg, #2AA2BA, #00C2FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: Montserrat, sans-serif;
    font-size: 1.2rem;
}

.backdrop-blur {
    backdrop-filter: blur(12px);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.accordion-content.open {
    max-height: 400px;
}

/* Logo styles */
.logo {
    height: 2.5rem;
    width: auto;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .logo {
        height: 3rem;
    }
}

/* Typing effect styles */
#typing-text {
    font-family: Montserrat, sans-serif;
    font-size: 36px;
    background: linear-gradient(135deg, #ec4899, #f472b6, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
    min-height: 60px;
    line-height: 60px;
}

@media (min-width: 768px) {
    #typing-text {
        font-size: 60px;
        min-height: 80px;
        line-height: 80px;
    }
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 40px;
    background: linear-gradient(135deg, #ec4899, #f472b6, #a855f7);
    margin-left: 4px;
    animation: blink 0.8s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.typing-container {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative;
    overflow: hidden;
}

#typing-text {
    display: inline-block;
    min-width: 250px;
    min-height: 70px;
    line-height: 60px;
    white-space: nowrap;
}

.menu {
    text-align: center;
}

/* Dark theme styles */
.dark body {
    background: linear-gradient(to bottom right, #111827, #1f2937);
    color: #e5e7eb;
}

.dark header {
    background-color: rgba(17, 24, 39, 0.8) !important;
    border-bottom-color: #374151 !important;
}

.dark .text-gray-800 {
    color: #f3f4f6;
}

.dark .text-gray-600 {
    color: #d1d5db;
}

.dark .text-gray-500 {
    color: #9ca3af;
}

.dark .border-pink-100 {
    border-color: #4b5563;
}

.dark .bg-white {
    background-color: #18212f !important;
}

.dark .bg-pink-50 {
    background-color: #2AA2BA !important;
}

.dark .bg-gradient-to-r.from-pink-50.to-rose-50 {
    background: linear-gradient(to right, #1a2332, #1b2432) !important;
}

.dark .bg-gradient-to-b.from-white.to-pink-50 {
    background: linear-gradient(to bottom, #1f2937, #171717) !important;
}

.dark .bg-gradient-to-b.from-pink-50.to-white {
    background: linear-gradient(to bottom, #171717, #1f2937) !important;
}

.dark .bg-white\/70 {
    background-color: rgba(31, 41, 55, 0.7) !important;
}

.dark .bg-white\/60 {
    background-color: rgba(31, 41, 55, 0.6) !important;
}

.dark .bg-pink-100 {
    background-color: #ed478f !important;
}

.dark .text-pink-700 {
    color: #e9d5ff !important;
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.2s;
    margin-right: -0.5rem;
		background-color: transparent;
}

.theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dark .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.theme-toggle .dark-icon {
    display: none;
}

.theme-toggle .light-icon {
    display: block;
}

.dark .theme-toggle .dark-icon {
    display: block;
}

.dark .theme-toggle .light-icon {
    display: none;
}

/* Сохраняем оригинальные цвета флагов */
.dark #currentFlag .bg-white,
.dark #languageDropdown .bg-white {
    background-color: white !important;
}
.dark #currentFlag .bg-blue-500,
.dark #languageDropdown .bg-blue-500 {
    background-color: #3b82f6 !important;
}
.dark #currentFlag .bg-red-500,
.dark #languageDropdown .bg-red-500 {
    background-color: #ef4444 !important;
}
.dark #currentFlag .bg-red-600,
.dark #languageDropdown .bg-red-600 {
    background-color: #dc2626 !important;
}
.dark #currentFlag .bg-blue-800,
.dark #languageDropdown .bg-blue-800 {
    background-color: #1e40af !important;
}

/* Иконка шеврона в переключателе языка */
.dark #languageBtn .fa-chevron-down {
    color: #6b7280 !important;
}

/* Ховер-эффекты для переключателя языка */
.dark #languageBtn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.dark #languageDropdown a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
/* Logo styles */
.logo {
    height: 3rem; /* Увеличил с 2.5rem */
    width: auto;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .logo {
        height: 3.5rem; /* Увеличил с 3rem */
    }
}

.bg-white\/50{
	background-color: rgb(30 40 54);
}

/* Темная тема для FAQ */
.dark .faq-item {
    background-color: #1e2836; /* Указанный цвет фона */
    border-color: #4b5563; /* Серый цвет границы */
    border-radius: 0.5rem; /* Сохранение скругленных углов */
}

.dark .faq-item button {
    color: #f3f4f6; /* Светлый цвет текста */
    background: transparent; /* Прозрачный фон кнопки */
    padding: 1.5rem; /* Соответствует p-6 */
    font-weight: 600; /* font-semibold */
}

.dark .faq-item button:hover {
    color: #ec4899; /* Розовый при наведении */
}

.dark .faq-content {
    color: #d1d5db; /* Светло-серый цвет текста */
    padding: 0 1.5rem 1.5rem; /* Соответствует px-6 с добавлением отступа снизу */
}

/* Улучшаем контрастность текста в темной теме */
.dark .text-pink-700 {
    color: #ffffff !important; /* Более яркий розовый */
}

.dark .border-pink-200 {
    border-color: #6b7280 !important; /* Серый вместо розового */
}

.dark .hover\:bg-pink-50:hover {
    background-color: rgba(236, 72, 153, 0.1) !important; /* Полупрозрачный розовый при наведении */
}

/* Дополнительные стили для согласованности */
.dark .faq-item button i {
    color: #f3f4f6; /* Цвет иконки в темной теме */
    transition: transform 0.3s ease; /* Плавный переход для иконки */
}

.dark .faq-item button:hover i {
    color: #ec4899; /* Цвет иконки при наведении */
}

/* Светлая тема (для совместимости, если используется) */
.faq-item {
    background-color: rgba(255, 255, 255, 0.5); /* Исходный bg-white/50 */
    border: 1px solid #fce7f3; /* Соответствует border-pink-100 */
    border-radius: 0.5rem;
}

.faq-item button {
    color: #1f2937; /* Соответствует text-gray-800 */
    padding: 1.5rem;
    font-weight: 600;
}

.faq-item button:hover {
    color: #db2777; /* Соответствует hover:text-pink-600 */
}

.faq-content {
    color: #4b5563; /* Соответствует text-gray-600 */
}
.container {
      position: relative;
      z-index: 10;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .text-center.mb-8 h2 {
      font-size: 1.5rem;
      font-size: 1.875rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--accent-green);
      text-align: center;
    }

    .text-center.mb-8 p {
      color: var(--dark-navy-200);
      font-size: 1.125rem;
      text-align: center;
    }

    .rfm-marquee-container {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      overflow: hidden;
      position: relative;
    }

    .rfm-marquee {
      display: flex;
      justify-content: center;
      animation: marquee 30s linear infinite;
      white-space: nowrap;
    }

    .rfm-marquee:hover {
      animation-play-state: paused;
    }

    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

 
    .relative.px-3.py-2.mx-3 {
      position: relative;
      padding: 0.5rem 0.75rem;
      margin: 0 0.75rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      border-radius: 9999px;
      background-color: rgba(42, 46, 68, 0.1);
      border: 1px solid rgba(159, 232, 112, 0.3);
      transition: all 0.3s ease;
      backdrop-filter: blur(4px);
    }

    .relative.px-3.py-2.mx-3:hover {
      background-color: rgba(159, 232, 112, 0.05);
      border-color: rgba(159, 232, 112, 0.5);
    }

    .relative.w-10.h-10 {
      position: relative;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 9999px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      background-color: #ffffff;
    }

    img.object-contain {
      object-fit: contain;
      z-index: 10;
      max-width: 70%;
      max-height: 70%;
      color: transparent;
      width: auto;
      height: 125px;
    }



    .text-\[var\(--dark-navy-100\)\].text-sm.font-medium {
      color: var(--dark-navy-100);
      font-size: 0.875rem;
      font-weight: 500;
      white-space: nowrap;
    }

    .mt-8.flex.justify-center a div {
      background-color: rgba(159, 232, 112, 0.1);
      backdrop-filter: blur(0.5rem);
      border: 1px solid rgba(159, 232, 112, 0.3);
      border-radius: 9999px;
      padding: 0.5rem 1.5rem;
      font-size: 0.875rem;
      color: var(--accent-green);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: background-color 0.3s ease;
      text-decoration: none;
    }

    .mt-8.flex.justify-center a div:hover {
      background-color: rgba(159, 232, 112, 0.2);
    }

    .w-2.h-2.bg-accent-green {
      width: 0.5rem;
      height: 0.5rem;
      background-color: var(--accent-green);
      border-radius: 9999px;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }

	/* Добавьте это в styles.css */
.platforms-section {
  position: relative;
  overflow: hidden;
  background: rgba(30, 32, 50, 0.3);
  padding: 4rem 0;
}

.platforms-marquee {
  display: flex;
  width: fit-content;
  animation: scroll 30s linear infinite;
}

.platforms-marquee:hover {
  animation-play-state: paused;
}

.platform-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  margin: 0 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  min-width: 250px;
}

.platform-item:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.platform-logo {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.platform-name {
  color: white;
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}