/* Warm Theme with Darker Colors for XCryptoSignal Bot Website */

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

:root {
    --primary-color: #b388ff;
    --secondary-color: #f5f5f7;
    --dark-color: #2c143d;
    --light-color: #ffffff;
    --gradient-start: #7b38c7;
    --gradient-end: #9e55c9;
    --light-section-bg: rgba(245, 245, 250, 0.95);
    --dark-section-bg: rgba(30, 15, 50, 0.8);
}

/* Enable smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Apply nice font to everything */
body, button, input, select, textarea {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Override Gradient Background */
.gradient-bg {
    background: linear-gradient(135deg, #7b38c7 0%, #9e55c9 100%);
}

/* Make pattern overlay more visible */
.gradient-bg::before {
    opacity: 0.4;
}

/* Section styling consistency */
.features {
    background: var(--light-section-bg) !important;
}

.exchanges {
    background: var(--light-section-bg) !important;
}

.how-it-works, .pricing {
    background: var(--dark-section-bg) !important;
}

/* Fix exchange logos */
.exchange-logo {
    width: 80px !important;
    text-align: center !important;
}

.exchange-logo img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    margin-bottom: 0.5rem !important;
    border-radius: 8px !important;
    background-color: white !important;
    padding: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.exchange-logo p {
    color: var(--dark-color) !important;
    font-weight: 300 !important;
}

.exchange-note {
    color: var(--dark-color) !important;
}

/* Features Section */
.feature-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(200, 200, 220, 0.3) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
}

.feature-card i {
    color: var(--primary-color) !important;
}

.feature-card h3 {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--dark-color) !important;
}

.feature-card p {
    color: rgba(44, 20, 61, 0.85) !important;
    font-weight: 300 !important;
}

/* Section Header styling based on background */
.features h2, .exchanges h2 {
    color: var(--dark-color) !important;
}

.how-it-works h2, .pricing h2 {
    color: var(--light-color) !important;
}

/* How It Works Section */
.how-it-works {
    background: var(--dark-section-bg) !important;
}

.step {
    background: rgba(90, 40, 120, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.step-number {
    background: var(--secondary-color) !important;
    color: #3a2048 !important;
    font-weight: 600 !important;
}

.step h3 {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--light-color) !important;
}

.step p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 300 !important;
}

/* Pricing Section */
.pricing {
    background: var(--dark-section-bg) !important;
}

.price-card {
    background: rgba(90, 40, 120, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.price-header {
    background: linear-gradient(135deg, rgba(120, 60, 150, 0.7) 0%, rgba(100, 50, 130, 0.7) 100%) !important;
}

.price-header h3 {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--light-color) !important;
}

.features-list li {
    font-weight: 300 !important;
    color: var(--light-color) !important;
}

/* Footer */
footer {
    background: rgba(30, 15, 50, 0.9) !important;
}

.footer-bottom {
    background: rgba(25, 10, 40, 0.95) !important;
}

.footer-section h4 {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

/* Hero section */
.hero-content h1 {
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

.subtitle {
    font-weight: 300 !important;
    font-size: 1.2rem !important;
}

.stat-box {
    background: rgba(90, 40, 120, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.stat-number {
    font-weight: 700 !important;
}

.stat-label {
    font-weight: 300 !important;
}

/* Navigation */
.nav-links a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
}

.nav-links a:hover {
    color: var(--secondary-color) !important;
}

.cta-button {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
}

/* Headings */
h2 {
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

h2::after {
    background: var(--primary-color) !important;
}