/* ADD beautiful gradients and colors to sections and cards */

/* Beautiful gradient backgrounds for main sections */
.vision-section {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #0f3460 100%) !important;
    position: relative;
}

.manifesto-section {
    background: linear-gradient(135deg, #16213e 0%, #533483 50%, #1a1a2e 100%) !important;
    position: relative;
}

.revolutionary-features {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%) !important;
    position: relative;
}

.revolution-cta {
    background: linear-gradient(135deg, #533483 0%, #16213e 50%, #0f3460 100%) !important;
    position: relative;
}

/* Beautiful gradient cards */
.vision-card {
    background: linear-gradient(135deg, rgba(12, 192, 223, 0.1) 0%, rgba(50, 205, 50, 0.1) 100%) !important;
    border: 1px solid rgba(12, 192, 223, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
}

.vision-card:hover {
    background: linear-gradient(135deg, rgba(12, 192, 223, 0.2) 0%, rgba(50, 205, 50, 0.2) 100%) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(12, 192, 223, 0.3) !important;
}

.timeline-item {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(50, 205, 50, 0.1) 100%) !important;
    border: 1px solid rgba(255, 107, 53, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
}

.timeline-item:hover {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(50, 205, 50, 0.2) 100%) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3) !important;
}

/* Beautiful gradient buttons */
.btn,
button,
[class*="btn"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
}

.btn:hover,
button:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
}

.btn-epic {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4) !important;
}

.btn-epic:hover {
    background: linear-gradient(135deg, #ee5a24 0%, #ff6b6b 100%) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6) !important;
}

.btn-wisdom {
    background: linear-gradient(135deg, #4ecdc4 0%, #45b7d1 100%) !important;
    box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4) !important;
}

.btn-wisdom:hover {
    background: linear-gradient(135deg, #45b7d1 0%, #4ecdc4 100%) !important;
    box-shadow: 0 8px 25px rgba(78, 205, 196, 0.6) !important;
}

/* Keep the main hero background enhanced */
.epic-hero {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%) !important;
    position: relative;
}

/* Add subtle animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.vision-card,
.timeline-item {
    animation: float 6s ease-in-out infinite !important;
}

.vision-card:nth-child(2) {
    animation-delay: -2s !important;
}

.vision-card:nth-child(3) {
    animation-delay: -4s !important;
}

/* DO NOT TOUCH TEXT GRADIENTS - only background elements */
