<div class="text-center max-w-md mx-auto animate-[fadeIn_0.5s_ease-out]">
    <div class="relative">
        <div class="text-[150px] font-black text-slate-200 leading-none select-none drop-shadow-sm tracking-tighter">
            403
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-xl border border-slate-100 text-orange-500">
                <i class="fa-solid fa-shield-halved text-4xl"></i>
            </div>
        </div>
    </div>
    
    <div class="mt-8">
        <h1 class="text-3xl md:text-4xl font-black text-slate-900 tracking-tight mb-3">{{!empty($title) ? $title : 'Restricted Area'}}</h1>
        <p class="text-slate-500 font-medium mb-10 text-lg">
            {{!empty($content) ? $content : 'You do not have the required security clearance to access this sector of the GlobalXpress system.'}}
        </p>
        
        <div class="flex flex-col items-center justify-center gap-4">
            <a href="{{APP_URL}}/dashboard" class="w-full sm:w-auto px-10 py-4 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-2xl transition-all shadow-lg flex items-center justify-center gap-2 active:scale-95">
                <i class="fa-solid fa-arrow-left"></i> Go Back
            </a>
            <a href="{{APP_URL}}/login" class="text-sm font-bold text-app-primary hover:text-app-primaryHover transition-colors mt-2">
                Sign in with a different account
            </a>
        </div>
    </div>
</div>