<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Not Found · {{ config('app.name') }}</title>

        <link
            href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Outfit:wght@300;400;500;600&display=swap"
            rel="stylesheet">

        <style>
            *,
            *::before,
            *::after {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            :root {
                --navy: #080F1E;
                --navy-2: #0E1A30;
                --navy-3: #152240;
                --gold: #C8A84B;
                --gold-lt: #E8CC80;
                --gold-dk: #8A6A20;
                --cream: #F2EDE3;
                --muted: #6E7D94;
                --muted-lt: #9BAABB;
                --border: rgba(200, 168, 75, .18);
                --border-lt: rgba(200, 168, 75, .08);
            }

            html,
            body {
                height: 100%;
                background: var(--navy);
                font-family: 'Outfit', sans-serif;
                color: #fff;
                overflow: hidden;
            }

            /* ── Layered background ── */
            .bg-layer {
                position: fixed;
                inset: 0;
                pointer-events: none;
                z-index: 0;
            }

            /* Fine grid */
            .bg-grid {
                background-image:
                    linear-gradient(var(--border-lt) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border-lt) 1px, transparent 1px);
                background-size: 40px 40px;
                opacity: 1;
            }

            /* Radial glow centre */
            .bg-glow {
                background: radial-gradient(ellipse 80% 60% at 50% 50%,
                        rgba(200, 168, 75, .07) 0%,
                        rgba(200, 168, 75, .02) 40%,
                        transparent 70%);
            }

            /* Vignette */
            .bg-vignette {
                background: radial-gradient(ellipse 100% 100% at 50% 50%,
                        transparent 50%,
                        rgba(8, 15, 30, .9) 100%);
            }

            /* Corner ornaments */
            .corner {
                position: fixed;
                width: 120px;
                height: 120px;
                pointer-events: none;
                z-index: 0;
                opacity: .4;
            }

            .corner svg {
                stroke: var(--gold);
                fill: none;
                stroke-width: .8;
            }

            .corner--tl {
                top: 0;
                left: 0;
            }

            .corner--tr {
                top: 0;
                right: 0;
                transform: scaleX(-1);
            }

            .corner--bl {
                bottom: 0;
                left: 0;
                transform: scaleY(-1);
            }

            .corner--br {
                bottom: 0;
                right: 0;
                transform: scale(-1, -1);
            }

            /* ── Page shell ── */
            .page {
                position: relative;
                z-index: 1;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }

            /* ── Header ── */
            header {
                padding: 1.4rem 2.5rem;
                border-bottom: 1px solid var(--border);
                display: flex;
                align-items: center;
                gap: .85rem;
                animation: slideDown .7s cubic-bezier(.16, 1, .3, 1) both;
            }

            .logo-mark {
                width: 38px;
                height: 38px;
                border: 1px solid var(--gold);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(200, 168, 75, .06);
                flex-shrink: 0;
            }

            .logo-mark svg {
                width: 19px;
                height: 19px;
                stroke: var(--gold);
                fill: none;
                stroke-width: 1.75;
            }

            .brand-name {
                font-family: 'Cormorant Garamond', serif;
                font-size: 1.15rem;
                font-weight: 600;
                letter-spacing: .06em;
                color: var(--cream);
            }

            .header-right {
                margin-left: auto;
                display: flex;
                align-items: center;
                gap: 1.25rem;
            }

            .secure-tag {
                font-size: .65rem;
                letter-spacing: .18em;
                text-transform: uppercase;
                color: var(--muted);
                border: 1px solid rgba(110, 125, 148, .25);
                padding: .28rem .8rem;
                border-radius: 20px;
                display: flex;
                align-items: center;
                gap: .4rem;
            }

            .secure-dot {
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: var(--gold);
                animation: pulse 2s ease-in-out infinite;
            }

            /* ── Main ── */
            main {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 2rem 1.5rem;
            }

            /* ── Card ── */
            .card {
                width: 100%;
                max-width: 540px;
                background: rgba(14, 26, 48, .7);
                border: 1px solid var(--border);
                border-radius: 20px;
                padding: 3.5rem 3.5rem 3rem;
                text-align: center;
                backdrop-filter: blur(20px);
                box-shadow:
                    0 0 0 1px rgba(200, 168, 75, .06),
                    0 40px 80px rgba(0, 0, 0, .55),
                    inset 0 1px 0 rgba(200, 168, 75, .12);
                animation: riseUp .8s cubic-bezier(.16, 1, .3, 1) .15s both;
                position: relative;
                overflow: hidden;
            }

            /* Card inner shimmer line */
            .card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 10%;
                right: 10%;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(200, 168, 75, .5), transparent);
            }

            /* ── 404 Display ── */
            .error-wrap {
                position: relative;
                margin-bottom: .5rem;
            }

            .error-number {
                font-family: 'Cormorant Garamond', serif;
                font-size: clamp(5.5rem, 15vw, 8.5rem);
                font-weight: 700;
                line-height: 1;
                letter-spacing: -.04em;
                background: linear-gradient(160deg, var(--gold-lt) 0%, var(--gold) 45%, var(--gold-dk) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                position: relative;
            }

            /* Ghost echo behind the number */
            .error-number-ghost {
                font-family: 'Cormorant Garamond', serif;
                font-size: clamp(5.5rem, 15vw, 8.5rem);
                font-weight: 700;
                line-height: 1;
                letter-spacing: -.04em;
                position: absolute;
                inset: 0;
                color: transparent;
                -webkit-text-stroke: 1px rgba(200, 168, 75, .1);
                transform: translate(4px, 4px);
                pointer-events: none;
                z-index: -1;
            }

            .error-divider {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: .75rem;
                margin: .6rem 0 1.4rem;
            }

            .error-divider-line {
                height: 1px;
                width: 48px;
                background: linear-gradient(90deg, transparent, var(--gold));
            }

            .error-divider-line:last-child {
                background: linear-gradient(90deg, var(--gold), transparent);
            }

            .error-divider-dot {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: var(--gold);
                opacity: .7;
            }

            .error-label {
                font-size: .62rem;
                letter-spacing: .28em;
                text-transform: uppercase;
                color: var(--gold);
                opacity: .8;
                font-weight: 500;
            }

            /* ── Text ── */
            h1 {
                font-family: 'Cormorant Garamond', serif;
                font-size: clamp(1.25rem, 3.5vw, 1.6rem);
                font-weight: 600;
                color: var(--cream);
                line-height: 1.4;
                margin-bottom: .75rem;
            }

            .subtitle {
                font-size: .875rem;
                font-weight: 300;
                color: var(--muted-lt);
                line-height: 1.8;
                margin-bottom: 2.25rem;
            }

            /* ── Buttons ── */
            .actions {
                display: flex;
                gap: .85rem;
                justify-content: center;
                flex-wrap: wrap;
            }

            .btn-gold {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                background: linear-gradient(135deg, var(--gold) 0%, #A0751A 100%);
                color: var(--navy);
                font-family: 'Outfit', sans-serif;
                font-weight: 600;
                font-size: .82rem;
                letter-spacing: .06em;
                text-transform: uppercase;
                padding: .72rem 1.6rem;
                border-radius: 8px;
                text-decoration: none;
                border: none;
                cursor: pointer;
                transition: transform .2s, box-shadow .2s, filter .2s;
                box-shadow: 0 4px 24px rgba(200, 168, 75, .28);
            }

            .btn-gold:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 32px rgba(200, 168, 75, .4);
                filter: brightness(1.08);
            }

            .btn-gold svg {
                flex-shrink: 0;
            }

            .btn-ghost {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                background: transparent;
                color: var(--muted-lt);
                font-family: 'Outfit', sans-serif;
                font-weight: 400;
                font-size: .82rem;
                letter-spacing: .06em;
                text-transform: uppercase;
                padding: .72rem 1.6rem;
                border-radius: 8px;
                text-decoration: none;
                border: 1px solid rgba(110, 125, 148, .22);
                cursor: pointer;
                transition: border-color .2s, color .2s, background .2s, transform .2s;
            }

            .btn-ghost:hover {
                border-color: var(--gold);
                color: var(--cream);
                background: rgba(200, 168, 75, .06);
                transform: translateY(-2px);
            }

            /* ── Reference box ── */
            .ref-box {
                margin-top: 2rem;
                padding: .75rem 1.25rem;
                background: rgba(0, 0, 0, .25);
                border: 1px solid rgba(200, 168, 75, .1);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
            }

            .ref-label {
                font-size: .62rem;
                letter-spacing: .14em;
                text-transform: uppercase;
                color: var(--muted);
            }

            .ref-code {
                font-family: 'Courier New', monospace;
                font-size: .75rem;
                color: var(--gold);
                letter-spacing: .1em;
                opacity: .85;
            }

            /* ── Footer ── */
            footer {
                padding: 1.1rem 2.5rem;
                border-top: 1px solid var(--border);
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: .68rem;
                color: var(--muted);
                letter-spacing: .04em;
                animation: slideUp .7s cubic-bezier(.16, 1, .3, 1) .4s both;
            }

            footer a {
                color: var(--muted);
                text-decoration: none;
                transition: color .2s;
            }

            footer a:hover {
                color: var(--gold);
            }

            .footer-links {
                display: flex;
                gap: 2rem;
            }

            /* ── Keyframes ── */
            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateY(-20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes slideUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes riseUp {
                from {
                    opacity: 0;
                    transform: translateY(30px) scale(.97);
                }

                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

            @keyframes pulse {

                0%,
                100% {
                    opacity: 1;
                    transform: scale(1);
                }

                50% {
                    opacity: .4;
                    transform: scale(.7);
                }
            }

            /* ── Responsive ── */
            @media (max-width: 540px) {
                header {
                    padding: 1.1rem 1.25rem;
                }

                .secure-tag {
                    display: none;
                }

                .card {
                    padding: 2.5rem 1.75rem 2rem;
                    border-radius: 16px;
                }

                .corner {
                    width: 80px;
                    height: 80px;
                }

                footer {
                    flex-direction: column;
                    gap: .6rem;
                    text-align: center;
                    padding: 1rem 1.25rem;
                }

                .footer-links {
                    gap: 1.25rem;
                }
            }
        </style>
    </head>

    <body>

        {{-- Background layers --}}
        <div class="bg-layer bg-grid"></div>
        <div class="bg-layer bg-glow"></div>
        <div class="bg-layer bg-vignette"></div>

        {{-- Corner ornaments --}}
        <div class="corner corner--tl">
            <svg viewBox="0 0 120 120">
                <path d="M 0 60 L 0 8 Q 0 0 8 0 L 60 0" />
                <path d="M 0 80 L 0 20 Q 0 8 12 8 L 80 8" opacity=".4" />
            </svg>
        </div>
        <div class="corner corner--tr">
            <svg viewBox="0 0 120 120">
                <path d="M 0 60 L 0 8 Q 0 0 8 0 L 60 0" />
                <path d="M 0 80 L 0 20 Q 0 8 12 8 L 80 8" opacity=".4" />
            </svg>
        </div>
        <div class="corner corner--bl">
            <svg viewBox="0 0 120 120">
                <path d="M 0 60 L 0 8 Q 0 0 8 0 L 60 0" />
                <path d="M 0 80 L 0 20 Q 0 8 12 8 L 80 8" opacity=".4" />
            </svg>
        </div>
        <div class="corner corner--br">
            <svg viewBox="0 0 120 120">
                <path d="M 0 60 L 0 8 Q 0 0 8 0 L 60 0" />
                <path d="M 0 80 L 0 20 Q 0 8 12 8 L 80 8" opacity=".4" />
            </svg>
        </div>

        <div class="page">

            {{-- Header --}}
            <header>
                <div class="logo-mark">
                    <svg viewBox="0 0 24 24">
                        <rect x="3" y="6" width="18" height="13" rx="2" />
                        <path d="M3 10h18" />
                        <path d="M7 15h2" />
                        <path d="M13 15h4" />
                    </svg>
                </div>
                <span class="brand-name">{{ config('app.name') }}</span>
                <div class="header-right">
                    <span class="secure-tag">
                        <span class="secure-dot"></span>
                        Secure Banking
                    </span>
                </div>
            </header>

            {{-- Main --}}
            <main>
                <div class="card">

                    {{-- 404 --}}
                    <div class="error-wrap">
                        <div class="error-number-ghost" aria-hidden="true">404</div>
                        <div class="error-number">404</div>
                    </div>

                    <div class="error-divider">
                        <div class="error-divider-line"></div>
                        <span class="error-label">Page Not Found</span>
                        <div class="error-divider-line"></div>
                    </div>

                    <h1>This page doesn't exist in our system</h1>
                    <p class="subtitle">
                        The page you're looking for may have been moved, deleted, or the link may be incorrect.
                        Return to your dashboard or contact support if you need assistance.
                    </p>

                    <div class="actions">
                        <a href="/" class="btn-gold">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 12L12 3l9 9" />
                                <path d="M9 21V12h6v9" />
                            </svg>
                            Return to Dashboard
                        </a>
                        <a href="javascript:history.back()" class="btn-ghost">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M19 12H5" />
                                <path d="M12 19l-7-7 7-7" />
                            </svg>
                            Go Back
                        </a>
                    </div>

                    <div class="ref-box">
                        <span class="ref-label">Error Reference</span>
                        <span class="ref-code">ERR-404 · {{ date('Ymd') }}</span>
                    </div>

                </div>
            </main>

            {{-- Footer --}}
            <footer>
                <span>© {{ date('Y') }} {{ config('app.name') }}. All rights reserved.</span>
                {{-- <div class="footer-links">
                <a href="#">Help Center</a>
                <a href="#">Privacy Policy</a>
                <a href="#">Contact Support</a>
            </div> --}}
            </footer>

        </div>

    </body>

</html>
