@layer base {
    body {
        background-color: #0a0a0a;
        color: #e5e7eb;
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
    }
}

@layer components {
    .gold-gradient {
        background: linear-gradient(135deg, #d4af37 0%, #f2d06b 50%, #aa8439 100%);
    }
    
    .gold-text-gradient {
        background: linear-gradient(135deg, #d4af37 0%, #f2d06b 50%, #aa8439 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    
    .btn-gold {
        background: linear-gradient(135deg, #d4af37 0%, #f2d06b 50%, #aa8439 100%);
        padding: 0.75rem 1.5rem;
        color: black;
        font-weight: 700;
        border-radius: 0.125rem;
        transition: all 0.3s;
        display: inline-block;
        text-align: center;
    }
    
    .btn-gold:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    }
    
    .card-dark {
        background-color: #1a1a1a;
        border: 1px solid #2a2a2a;
        border-radius: 0.5rem;
        overflow: hidden;
        transition: all 0.3s;
    }
    
    .card-dark:hover {
        border-color: rgba(212, 175, 55, 0.5);
    }
    
    .nav-link {
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.875rem;
        font-weight: 500;
        transition: color 0.2s;
        cursor: pointer;
    }
    
    .nav-link:hover, .nav-link.active {
        color: #d4af37;
    }
}

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

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

::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.5);
}

/* Animations */
.section-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.section-visible {
    opacity: 1;
    transform: translateY(0);
}

.dynamic-item {
    border-left: 4px solid #d4af37;
    background: #1a1a1a;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.2s;
}

.dynamic-item:hover {
    transform: translateX(10px);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}