.devx-gradient-text {
    background: linear-gradient( 90deg, #00c6ff 0%, /* Blue */
    #7a5cff 50%, /* Purple */
    #ff4ecd 100% /* Pink */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /* Optional enhancements */
    letter-spacing: 0.5px;
}
.mono-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}


@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base */
body {
    @apply bg-brand-dark text-brand-text font-sans antialiased;
}

/* Selection */
::selection {
    background: #3B82F6;
    color: white;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0B0F14;
}

::-webkit-scrollbar-thumb {
    background: #1F2937;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #374151;
    }

/* Grid */
/*.bg-grid {
    background-image: linear-gradient(to right, #1F2937 1px, transparent 1px), linear-gradient(to bottom, #1F2937 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, transparent, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 40%, black 70%, transparent 95%);
}*/
.bg-grid {
    background-image: linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}


.hljs {
    background: transparent !important;
    padding: 0 !important;
}
@keyframes glowPulseGreen {
    0% {
        box-shadow: 0 0 10px rgba(34,197,94,0.25);
    }

    50% {
        box-shadow: 0 0 22px rgba(34,197,94,0.45);
    }

    100% {
        box-shadow: 0 0 10px rgba(34,197,94,0.25);
    }
}

@keyframes glowPulseBlue {
    0% {
        box-shadow: 0 0 10px rgba(59,130,246,0.25);
    }

    50% {
        box-shadow: 0 0 22px rgba(59,130,246,0.45);
    }

    100% {
        box-shadow: 0 0 10px rgba(59,130,246,0.25);
    }
}

.glow-green {
    animation: glowPulseGreen 2.2s ease-in-out infinite;
}

.glow-blue {
    animation: glowPulseBlue 2.2s ease-in-out infinite;
}
.text-accent {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.faq-content {
    transition: max-height 0.35s ease, opacity 0.3s ease;
    opacity: 0;
}

    .faq-content[style*="max-height"] {
        opacity: 1;
    }