@keyframes ember-pulse {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.15);
    }
}

.hero-title-gradient {
    background: linear-gradient(135deg, #DC143C 0%, #FF6B35 50%, #DC143C 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ember-pulse 4s ease-in-out infinite;
}

.nav-brand-gradient {
    background: linear-gradient(135deg, #DC143C, #FF6B35);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-header-gradient {
    background: linear-gradient(135deg, #DC143C, #FF6B35);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(220, 20, 60, 0.4) 0%, transparent 70%);
    opacity: 0.15;
    pointer-events: none;
}