@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Outfit:wght@100;400;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --neon-purple: #d946ef;
    --neon-blue: #3b82f6;
    --neon-cyan: #22d3ee;
    --prism-bg: #08080c;
    --prism-surface: #101016;
    --prism-border: rgba(255, 255, 255, 0.04);
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--prism-bg);
    background-image:
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(217, 70, 239, 0.05) 0%, transparent 40%);
    color: #f8fafc;
    overflow-x: hidden;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

.font-heading { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.glass-panel {
    background: rgba(16, 16, 22, 0.85);
    backdrop-filter: blur(24px);
    border: 1px solid var(--prism-border);
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.5rem;
    border-radius: 0.75rem;
    transition: all 300ms;
    position: relative;
    width: 100%;
    color: #64748b;
    text-decoration: none;
}
.nav-link:hover {
    color: var(--neon-cyan);
}
.nav-link.active {
    color: white;
}

@media (min-width: 768px) {
    .nav-link {
        flex-direction: row;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
    }

    .nav-link.active {
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-link.active::before {
        content: '';
        position: absolute;
        left: 0;
        width: 3px;
        height: 20px;
        background: var(--neon-cyan);
        border-radius: 0 4px 4px 0;
        box-shadow: 0 0 10px var(--neon-cyan);
    }
}

.featured-gradient {
    background: linear-gradient(145deg, #0f0f1a 0%, #050508 100%);
    position: relative;
}
.featured-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 8, 12, 1) 0%, transparent 80%);
    z-index: 1;
}

.chip-active {
    background: white;
    color: black !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e1e26; border-radius: 10px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

@keyframes slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.animate-slide-up { animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

@media (max-width: 400px) {
    .xs\:inline { display: inline; }
    .xs\:block { display: block; }
    .xs\:hidden { display: none; }
    .xs\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .xs\:min-h-\[280px\] { min-height: 280px; }
    .xs\:grid-cols-3 { grid-cols: 3; }
}