/* Custom Styles for MLM Landing Page */

* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Navigation Links */
.nav-link {
    @apply text-gray-300 hover:text-blue-400 transition-colors duration-300 font-medium;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Buttons */
.btn-primary {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply border-2 border-blue-500 text-blue-400 px-6 py-3 rounded-lg font-semibold hover:bg-blue-500 hover:text-white transition-all duration-300;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* Stat Cards */
.stat-card {
    @apply p-6 rounded-xl bg-gray-800/50 backdrop-blur-sm border border-gray-700 hover:border-blue-500/50 transition-all duration-300 transform hover:scale-105;
}

/* Feature Cards */
.feature-card {
    @apply p-8 rounded-2xl bg-gray-800/50 backdrop-blur-sm border border-gray-700 hover:border-blue-500/50 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl;
}

.feature-icon {
    @apply w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4;
}

/* Steps */
.step-container {
    @apply flex items-start space-x-6 mb-12 last:mb-0;
}

.step-number {
    @apply w-16 h-16 flex-shrink-0 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-2xl font-bold shadow-lg;
}

.step-content {
    @apply flex-1 pt-3;
}

/* Download Buttons */
.download-btn {
    @apply flex items-center space-x-4 bg-gray-800 hover:bg-gray-700 border border-gray-700 hover:border-blue-500 px-8 py-4 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg;
}

/* Form Inputs */
.input-field {
    @apply w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 transition-all duration-300;
}

/* Social Icons */
.social-icon {
    @apply w-10 h-10 rounded-lg bg-gray-700 hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-600 flex items-center justify-center text-gray-300 hover:text-white transition-all duration-300 transform hover:scale-110;
}

/* Scroll to Top Button */
.scroll-top-btn {
    @apply fixed bottom-8 right-8 w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 opacity-0 invisible;
    z-index: 9999;
}

.scroll-top-btn.visible {
    @apply opacity-100 visible;
}

/* Stars Background */
.stars-bg {
    background-image:
        radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 60px 70px, #ddd, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 50px 50px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 130px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 10px, #fff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: stars 20s linear infinite;
    opacity: 0.3;
}

@keyframes stars {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 200px;
    }
}

/* Counter Animation */
.counter {
    font-variant-numeric: tabular-nums;
}

/* Gradient Text Animation */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* Loading Animation */
.loading {
    @apply animate-pulse;
}

/* Form Message */
#form-message {
    @apply p-4 rounded-lg mt-4 text-center font-medium;
}

#form-message.success {
    @apply bg-green-500/20 text-green-400 border border-green-500/50;
}

#form-message.error {
    @apply bg-red-500/20 text-red-400 border border-red-500/50;
}

/* Mobile Menu Animation */
#mobile-menu {
    animation: slideDown 0.3s ease-out;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #2563eb, #7c3aed);
}

/* Responsive Design */
@media (max-width: 768px) {
    .step-container {
        @apply flex-col text-center;
    }

    .step-number {
        @apply mx-auto mb-4;
    }

    .download-btn {
        @apply w-full;
    }
}

/* Smooth Transitions */
* {
    transition-property: transform, box-shadow, border-color, background-color;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}