:root {
    --han-purple: #5438f6;
    --chinese-black: #0b1019;
}

.hero-bg {
    background-color: transparent;
    background-image: radial-gradient(at bottom center, var(--han-purple) -30%, var(--chinese-black) 50%);
}

.max-w-1280px {
    max-width: 1280px !important;
}

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp {
    opacity: 0;
    transform: translateY(40px);
    transition: none;
}
.animate-fadeInUp.animate-in {
    animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.animate-fadeInUp[style*="animation-delay:100ms"] { animation-delay: 0.1s; }
.animate-fadeInUp[style*="animation-delay:200ms"] { animation-delay: 0.2s; }
.animate-fadeInUp[style*="animation-delay:300ms"] { animation-delay: 0.3s; }
.animate-fadeInUp[style*="animation-delay:400ms"] { animation-delay: 0.4s; }
.animate-fadeInUp[style*="animation-delay:500ms"] { animation-delay: 0.5s; }
@keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fadeInDown {
    opacity: 0;
    transform: translateY(-40px);
    transition: none;
}
.animate-fadeInDown.animate-in {
    animation: fadeInDown 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}
.animate-fadeInRight {
    opacity: 0;
    transform: translateX(40px);
    transition: none;
}
.animate-fadeInRight.animate-in {
    animation: fadeInRight 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}
.animate-fadeInLeft {
    opacity: 0;
    transform: translateX(-40px);
    transition: none;
}
.animate-fadeInLeft.animate-in {
    animation: fadeInLeft 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp {
    opacity: 0;
    transform: translateY(40px);
    transition: none;
}
.animate-fadeInUp.animate-in {
    animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.animate-fadeInUp[style*="animation-delay:100ms"] { animation-delay: 0.1s; }
.animate-fadeInUp[style*="animation-delay:200ms"] { animation-delay: 0.2s; }
.animate-fadeInUp[style*="animation-delay:300ms"] { animation-delay: 0.3s; }
.animate-fadeInUp[style*="animation-delay:400ms"] { animation-delay: 0.4s; }
.animate-fadeInUp[style*="animation-delay:500ms"] { animation-delay: 0.5s; }
@keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fadeInDown {
    opacity: 0;
    transform: translateY(-40px);
    transition: none;
}
.animate-fadeInDown.animate-in {
    animation: fadeInDown 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}
.animate-fadeInRight {
    opacity: 0;
    transform: translateX(40px);
    transition: none;
}
.animate-fadeInRight.animate-in {
    animation: fadeInRight 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}
.animate-fadeInLeft {
    opacity: 0;
    transform: translateX(-40px);
    transition: none;
}
.animate-fadeInLeft.animate-in {
    animation: fadeInLeft 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}