/* Existing styles remain... */

/* Soft fade & scale animations */
.fade-in { opacity:0; transform: translateY(20px); transition: all 0.8s ease-out; }
.fade-in.visible { opacity:1; transform: translateY(0); }

.hero-content h1, .hero-content p, .btn-primary {
    transition: all 1s ease-out;
}

/* Card hover soft highlight */
.anchor-card, .reward-card, .metric-card {
    transition: all 0.5s ease;
    border-radius: 12px;
    padding: 1rem;
}
.anchor-card.highlight, .reward-card:hover, .metric-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Responsive mobile adjustments */
@media (max-width:768px){
    .about-grid, .rewards-grid, #flowMetrics {
        display: block;
    }
    canvas { height: 300px; }
    .hero-content { text-align:center; padding:2rem 1rem; }
    .nav-links { display:none; flex-direction: column; }
    .nav-links.active { display:flex; }
}
/* Gradient backgrounds */
body { 
    background: linear-gradient(135deg, #8FB1CE 0%, #D8EFAA 50%, #F1DE67 100%);
    overflow-x: hidden;
}

/* Card glow */
.anchor-card.highlight, .reward-card:hover, .metric-card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(241,222,103,0.25);
}

/* Flow metrics glow */
#flowMetrics .metric-card { 
    transition: all 0.6s ease;
    background: linear-gradient(135deg, #DB8D69, #C54C60);
    color: #FFF;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-radius: 14px;
}
/* Gradient backgrounds */
body { 
    background: linear-gradient(135deg, #8FB1CE 0%, #D8EFAA 50%, #F1DE67 100%);
    overflow-x: hidden;
}

/* Card glow */
.anchor-card.highlight, .reward-card:hover, .metric-card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(241,222,103,0.25);
}

/* Flow metrics glow */
#flowMetrics .metric-card { 
    transition: all 0.6s ease;
    background: linear-gradient(135deg, #DB8D69, #C54C60);
    color: #FFF;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-radius: 14px;
}
/* Gradient backgrounds */
body { 
    background: linear-gradient(135deg, #8FB1CE 0%, #D8EFAA 50%, #F1DE67 100%);
    overflow-x: hidden;
}

/* Card glow */
.anchor-card.highlight, .reward-card:hover, .metric-card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(241,222,103,0.25);
}

/* Flow metrics glow */
#flowMetrics .metric-card { 
    transition: all 0.6s ease;
    background: linear-gradient(135deg, #DB8D69, #C54C60);
    color: #FFF;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border-radius: 14px;
}