.animated-gradient-text {
    background-image: linear-gradient(to right, #fbbf24, #d97706, #fbbf24);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.5 !important;
    animation: gradient-flow 3s ease-in-out infinite;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.h3-gradient {
    background-image: linear-gradient(to right, #fbbf24, #d97706, #fbbf24);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.hero-gradient {
    background: radial-gradient(circle at center, rgba(15, 23, 42, 1) 0%, rgba(30, 41, 59, 1) 50%, rgba(2, 0, 36, 1) 100%);
    background-size: 200% 200%;
    animation: radial-pulse 10s ease-in-out infinite;
}

@keyframes radial-pulse {
    0% { background-size: 100% 100%; }
    50% { background-size: 150% 150%; }
    100% { background-size: 100% 100%; }
}

.dark-gradient {
    background: linear-gradient(to right, #1E293B, #0F172A);
}

.mission-gradient {
    background: linear-gradient(to right, #ffffff, #f3f4f6); /* from-white to gray-100 */
}