.text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-border-card {
    position: relative;
    background: #161b28;
    border-radius: 1rem;
    z-index: 1;
}

.gradient-border-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 1.05rem;
    padding: 1px;
    background: linear-gradient(45deg, rgba(16, 185, 129, 0.5), rgba(251, 191, 36, 0.3), rgba(16, 185, 129, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.neural-bg {
    background-image: radial-gradient(#2a3447 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 90%);
}

/* Loader Styles */
#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #101622;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-svg path {
    fill: #10b981;
    fill-opacity: 0;
    stroke: #10b981;
    stroke-width: 2;
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: draw 1.5s ease-in-out forwards, fill 0.5s ease-in-out 1.25s forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill {
    to {
        fill-opacity: 1;
        stroke-opacity: 0;
    }
}