/* Основные стили */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    background: #ffffff;
    color: #212529;
}

html {
    background-color: #ffffff;
    background: #ffffff;
}

main {
    background-color: #ffffff;
    background: #ffffff;
    color: #212529;
}

main {
    flex: 1;
}

.card {
    border: none;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.card-header {
    border-radius: 15px 15px 0 0 !important;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.navbar-brand:hover {
    transform: scale(1.05);
}

.table-responsive {
    border-radius: 10px;
    overflow: hidden;
}

.btn {
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-hover-scale:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.form-control, .form-select {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}

.alert {
    border-radius: 10px;
    animation: slideDown 0.5s ease;
}

.modal-content {
    border-radius: 15px;
    animation: fadeInScale 0.3s ease;
}

#timer {
    font-size: 1.5rem;
    font-weight: bold;
    animation: pulse 2s infinite;
}

/* Hero Section - максимальный приоритет */
.hero-section {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%) !important;
    background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%) !important;
    background-color: #6366f1 !important;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
}

/* Защита от перекрытия белым фоном */
.hero-section * {
    background-color: transparent !important;
    background: transparent !important;
}

.hero-section .container,
.hero-section .hero-content {
    background-color: transparent !important;
    background: transparent !important;
}

.hero-section::before {
    display: none !important;
    content: none !important;
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* Текст в hero-section должен быть белым */
.hero-section,
.hero-section *,
.hero-content,
.hero-content * {
    color: #ffffff !important;
}

.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6,
.hero-section p,
.hero-section span,
.hero-section div,
.hero-section a,
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content h4,
.hero-content h5,
.hero-content h6,
.hero-content p,
.hero-content span,
.hero-content div,
.hero-content a {
    color: #ffffff !important;
}

/* Анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

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

@keyframes pulse-slow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }
}

@keyframes counter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Классы анимаций */
.animate-fade-in {
    animation: fadeIn 1s ease;
}

.animate-fade-in-delay {
    animation: fadeIn 1s ease 0.3s both;
}

.animate-slide-up {
    animation: slideUp 0.8s ease;
}

.animate-slide-right {
    animation: slideRight 0.8s ease;
}

.animate-slide-left {
    animation: slideLeft 0.8s ease;
}

.animate-pulse-slow {
    animation: pulse-slow 3s infinite;
}

.animate-counter {
    animation: counter 0.8s ease;
}

/* Feature Cards */
.feature-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
}

.feature-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: #6366f1;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.feature-icon {
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.2) rotate(5deg);
}

/* Statistics Section */
.stats-section {
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 50%, #ddd6fe 100%);
    border-radius: 20px;
    padding: 3rem 0;
}

.stat-card {
    background: white;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.stat-card .counter {
    font-size: 2.5rem;
    color: #6366f1;
}

/* About Section */
.about-section .card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.about-image {
    animation: float 6s ease-in-out infinite;
}

/* CTA Section */
.cta-section .bg-gradient-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    border-radius: 20px;
}

/* Задержки для анимаций */
[data-delay="0"] {
    animation-delay: 0s;
}

[data-delay="100"] {
    animation-delay: 0.1s;
}

[data-delay="200"] {
    animation-delay: 0.2s;
}

[data-delay="300"] {
    animation-delay: 0.3s;
}

/* Адаптивность */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem !important;
    }
    
    .stat-card .counter {
        font-size: 2rem;
    }
    
    .feature-card {
        margin-bottom: 1.5rem;
    }
}

/* Стили для подписки */
.subscription-card {
    transition: all 0.3s ease;
}

.subscription-card:hover {
    transform: translateY(-10px);
}

.subscription-option {
    transition: all 0.3s ease;
    position: relative;
}

.subscription-option:hover {
    transform: scale(1.02);
}

.subscription-option.active {
    background-color: #6366f1 !important;
    color: white !important;
    border-color: #6366f1 !important;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}

.subscription-option.active.btn-outline-success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}

/* Дополнительные эффекты */
.shadow-lg {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

.text-primary {
    color: #6366f1 !important;
}

/* Плавная прокрутка */
html {
    scroll-behavior: smooth;
}

/* Улучшение читаемости */
p {
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
}

/* Белый фон для основных элементов (без !important для навбара) */
body, html {
    background-color: #ffffff;
    background: #ffffff;
}

/* Навбар должен оставаться цветным - максимальный приоритет */
nav.navbar, 
nav.navbar.navbar-dark, 
nav.navbar.bg-primary, 
nav.navbar.navbar-dark.bg-primary,
body nav.navbar,
body nav.navbar.navbar-dark,
body nav.navbar.bg-primary,
body nav.navbar.navbar-dark.bg-primary,
.navbar, 
.navbar-dark, 
.navbar.bg-primary, 
.navbar-dark.bg-primary {
    background-color: #6366f1 !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
    background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
}

/* Защита от перекрытия белым фоном */
nav.navbar *,
nav.navbar.navbar-dark *,
nav.navbar.bg-primary *,
nav.navbar.navbar-dark.bg-primary * {
    background-color: transparent !important;
    background: transparent !important;
}

nav.navbar .container,
nav.navbar .navbar-nav,
nav.navbar .navbar-collapse {
    background-color: transparent !important;
    background: transparent !important;
}

/* Текст в навбаре должен быть белым и видимым - максимальная специфичность */
nav.navbar .navbar-brand,
nav.navbar .nav-link,
nav.navbar .navbar-nav .nav-link,
nav.navbar .navbar-nav .nav-item .nav-link,
.navbar-dark .navbar-brand,
.navbar-dark .nav-link,
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-item .nav-link,
.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .nav-link,
.navbar.bg-primary .navbar-nav .nav-link,
.navbar.bg-primary .navbar-nav .nav-item .nav-link,
.navbar-dark.bg-primary .navbar-brand,
.navbar-dark.bg-primary .nav-link,
.navbar-dark.bg-primary .navbar-nav .nav-link,
.navbar-dark.bg-primary .navbar-nav .nav-item .nav-link {
    color: #ffffff !important;
}

/* Иконки в навбаре тоже белые */
nav.navbar .nav-link i,
nav.navbar .navbar-brand i,
.navbar-dark .nav-link i,
.navbar-dark .navbar-brand i,
.navbar.bg-primary .nav-link i,
.navbar.bg-primary .navbar-brand i {
    color: #ffffff !important;
}

.navbar-dark .navbar-brand:hover,
.navbar-dark .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar.bg-primary .navbar-brand:hover,
.navbar.bg-primary .nav-link:hover,
.navbar.bg-primary .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Кнопки в навбаре */
.navbar-dark .btn-outline-light,
.navbar.bg-primary .btn-outline-light {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.navbar-dark .btn-outline-light:hover,
.navbar.bg-primary .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Иконка бургер-меню */
.navbar-dark .navbar-toggler-icon,
.navbar.bg-primary .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-dark .navbar-toggler,
.navbar.bg-primary .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

main, .container, .container-fluid {
    background-color: #ffffff;
    background: #ffffff;
    color: #212529;
}

.card, .card-body, .card-header {
    background-color: #ffffff;
    color: #212529;
}

/* Модальные окна - белый фон и темный текст */
.modal-content, .modal-body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.modal-header {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.modal-header.bg-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
    color: #ffffff !important;
}

.modal-title {
    color: inherit !important;
}

.modal-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #dee2e6 !important;
}

/* Алерты - правильные цвета фона и текста */
.alert {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

.alert-info {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

.alert-success {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.alert-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeaa7 !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

.alert-primary {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: #4f46e5 !important;
    border-color: #6366f1 !important;
}

/* Списки и таблицы */
.list-group-item {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

.table {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.table th {
    color: #212529 !important;
}

.table td {
    color: #212529 !important;
}

/* Формы */
.form-control, .form-select {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}

.form-control:focus, .form-select:focus {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.form-label {
    color: #212529 !important;
}

/* Заголовки и текст */
h1, h2, h3, h4, h5, h6 {
    color: #212529 !important;
}

p, span, div, li, td, th, label {
    color: #212529 !important;
}

/* Исключения для элементов с белым текстом */
.text-white, .text-white *,
.hero-section, .hero-section *,
.hero-content, .hero-content *,
.bg-gradient-primary, .bg-gradient-primary *,
.card.bg-gradient-primary, .card.bg-gradient-primary *,
.card.bg-gradient-primary *,
.modal-header.bg-primary, .modal-header.bg-primary * {
    color: #ffffff !important;
}

/* CTA секция с градиентом */
.cta-section .bg-gradient-primary,
.cta-section .bg-gradient-primary *,
.cta-section .card.bg-gradient-primary,
.cta-section .card.bg-gradient-primary * {
    color: #ffffff !important;
}

/* Карточки - темный текст на белом фоне */
.card,
.card-body,
.card-header,
.card-title,
.card-text {
    color: #212529 !important;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card p,
.card span,
.card li,
.card ul,
.card ol {
    color: #212529 !important;
}

/* text-muted должен быть виден */
.text-muted {
    color: #6c757d !important;
}

/* Заголовки секций */
.features-section h2,
.features-section h3,
.features-section h4,
.about-section h2,
.about-section h3,
.about-section h4,
.stats-section h2,
.stats-section h3,
.stats-section h4,
.additional-features h2,
.additional-features h3,
.additional-features h4 {
    color: #212529 !important;
}

/* Списки в карточках */
.card ul,
.card ol,
.card li {
    color: #212529 !important;
}