.error-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #dbeafe
    );
}

.error-card{

    position:relative;

    overflow:hidden;

    max-width:500px;

    width:100%;

    background:#fff;

    border-radius:30px;

    padding:50px 30px;

    text-align:center;

    box-shadow:
    0 20px 50px rgba(37,99,235,.15);
}

.error-icon{

    font-size:60px;

    margin-bottom:15px;

    animation:
    bounce 2s infinite;
}

.error-code{

    font-size:90px;

    font-weight:900;

    line-height:1;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #60a5fa
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.error-card h1{

    margin:20px 0 10px;

    font-size:28px;
}

.error-card p{

    color:#64748b;

    line-height:1.7;

    margin-bottom:30px;
}

.error-actions{

    display:flex;

    gap:12px;

    justify-content:center;

    flex-wrap:wrap;
}

.btn-home{

    background:#2563eb;

    color:#fff;

    padding:14px 24px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;
}

.btn-back{

    border:none;

    background:#f1f5f9;

    padding:14px 24px;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;
}

@keyframes bounce{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}

.error-image{

    margin-bottom:20px;
}

.error-image img{

    width:220px;

    max-width:100%;

    animation:
    floatImage 4s ease-in-out infinite;
}

@keyframes floatImage{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }
}

.error-image{
    margin-bottom:20px;
}

.error-image img{
    width:250px;
    max-width:100%;
}