<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>404 — G-SERVER</title>

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

        :root {
            --bg: #050505;
            --bg-deep: #090303;
            --panel: rgba(18, 5, 5, 0.82);

            --line: rgba(212, 175, 55, 0.18);
            --line-red: rgba(225, 6, 0, 0.28);

            --text: #f5f1e8;
            --muted: #81746a;

            --red: #e10600;
            --red-dark: #720000;

            --gold: #d4af37;
            --gold-light: #f3d675;

            --red-glow: rgba(225, 6, 0, 0.24);
            --gold-glow: rgba(212, 175, 55, 0.16);
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background:
                radial-gradient(
                    circle at 50% 45%,
                    rgba(100, 0, 0, 0.16),
                    transparent 35%
                ),
                var(--bg);
            color: var(--text);
            font-family: Arial, Helvetica, sans-serif;
            overflow: hidden;
        }

        /* TECHNICAL GRID */

        body::before {
            content: "";
            position: fixed;
            inset: 0;

            background-image:
                linear-gradient(
                    rgba(212, 175, 55, 0.025) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(225, 6, 0, 0.025) 1px,
                    transparent 1px
                );

            background-size: 55px 55px;

            -webkit-mask-image: linear-gradient(
                to bottom,
                transparent,
                black 18%,
                black 82%,
                transparent
            );

            mask-image: linear-gradient(
                to bottom,
                transparent,
                black 18%,
                black 82%,
                transparent
            );

            pointer-events: none;
        }

        /* SCANLINES */

        body::after {
            content: "";
            position: fixed;
            inset: 0;

            background:
                repeating-linear-gradient(
                    to bottom,
                    rgba(255, 255, 255, 0.012) 0px,
                    rgba(255, 255, 255, 0.012) 1px,
                    transparent 1px,
                    transparent 4px
                );

            pointer-events: none;
            opacity: .55;
        }

        /* NOISE */

        .noise {
            position: fixed;
            inset: 0;

            pointer-events: none;
            opacity: .035;

            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
        }

        .wrapper {
            min-height: 100vh;
            width: 100%;

            position: relative;

            display: flex;
            flex-direction: column;

            padding: 30px 45px;
        }

        /* TOP BAR */

        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;

            position: relative;
            z-index: 2;

            font-size: 11px;
            letter-spacing: 2px;

            color: var(--muted);
            text-transform: uppercase;
        }

        .brand-small {
            color: var(--gold-light);
        }

        .brand-small span {
            color: var(--red);
        }

        .status {
            display: flex;
            align-items: center;
            gap: 8px;

            color: var(--red);
        }

        .status-dot {
            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: var(--red);

            box-shadow:
                0 0 8px var(--red),
                0 0 18px var(--red-glow);

            animation: pulse 1.8s infinite;
        }

        @keyframes pulse {

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

            50% {
                opacity: .35;
                transform: scale(.72);
            }
        }

        /* MAIN */

        .main {
            flex: 1;

            display: flex;
            justify-content: center;
            align-items: center;

            position: relative;
            z-index: 2;
        }

        .content {
            width: 100%;
            max-width: 900px;

            text-align: center;
        }

        /* TERMINAL */

        .terminal {
            height: 24px;

            font-family: "Courier New", monospace;
            font-size: 11px;
            letter-spacing: 1.5px;

            color: var(--gold);

            margin-bottom: 30px;

            opacity: .85;

            text-shadow:
                0 0 14px var(--gold-glow);
        }

        .terminal::after {
            content: " █";

            animation: cursor 1s steps(1) infinite;
        }

        @keyframes cursor {
            50% {
                opacity: 0;
            }
        }

        /* 404 */

        .error-code {
            position: relative;

            display: inline-block;

            font-size: clamp(100px, 19vw, 260px);
            font-weight: 900;

            line-height: .78;
            letter-spacing: -14px;

            background:
                linear-gradient(
                    180deg,
                    #fff8dc 0%,
                    var(--gold-light) 30%,
                    var(--gold) 58%,
                    #8a6517 100%
                );

            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;

            filter:
                drop-shadow(
                    0 0 18px rgba(212, 175, 55, 0.18)
                )
                drop-shadow(
                    0 0 55px rgba(225, 6, 0, 0.12)
                );
        }

        .error-code::before {
            content: "404";

            position: absolute;
            inset: 0;

            color: transparent;

            -webkit-text-stroke: 1px rgba(225, 6, 0, 0.28);

            transform: translate(3px, 3px);

            z-index: -1;
        }

        .error-code::after {
            content: "";

            position: absolute;

            left: 8px;
            right: 8px;
            bottom: -28px;

            height: 2px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--red),
                    var(--gold),
                    var(--red),
                    transparent
                );

            box-shadow:
                0 0 12px var(--red-glow),
                0 0 22px var(--gold-glow);
        }

        /* TITLE */

        .error-title {
            margin-top: 62px;

            color: var(--text);

            font-size: 15px;
            font-weight: 700;

            letter-spacing: 5px;

            text-transform: uppercase;
        }

        .error-title span {
            color: var(--red);
        }

        /* SUBTITLE */

        .subtitle {
            margin-top: 16px;

            color: #8b7c70;

            font-size: 11px;
            line-height: 1.8;

            letter-spacing: 2.5px;

            text-transform: uppercase;
        }

        .subtitle span {
            color: var(--gold-light);
        }

        /* SYSTEM BADGE */

        .system-badge {
            margin: 27px auto 0;

            width: fit-content;

            border: 1px solid rgba(225, 6, 0, 0.38);

            background:
                linear-gradient(
                    90deg,
                    rgba(100, 0, 0, 0.22),
                    rgba(212, 175, 55, 0.05),
                    rgba(100, 0, 0, 0.22)
                );

            color: var(--red);

            padding: 10px 20px;

            font-family: "Courier New", monospace;
            font-size: 10px;

            letter-spacing: 2px;

            text-transform: uppercase;

            box-shadow:
                inset 0 0 20px rgba(225, 6, 0, 0.05),
                0 0 20px rgba(225, 6, 0, 0.04);
        }

        /* INFO PANEL */

        .info-panel {
            width: min(100%, 680px);

            margin: 45px auto 0;

            border: 1px solid var(--line);

            background:
                linear-gradient(
                    135deg,
                    rgba(32, 4, 4, 0.84),
                    rgba(5, 5, 5, 0.94)
                );

            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);

            box-shadow:
                inset 0 1px 0 rgba(212, 175, 55, 0.06),
                0 15px 70px rgba(0, 0, 0, 0.35);
        }

        .panel-header {
            padding: 12px 16px;

            border-bottom: 1px solid var(--line);

            display: flex;
            justify-content: space-between;

            font-family: "Courier New", monospace;

            font-size: 10px;
            letter-spacing: 2px;

            color: var(--muted);
        }

        .panel-header span:first-child {
            color: var(--gold);
        }

        .panel-header span:last-child {
            color: var(--red);
        }

        .info-grid {
            display: grid;

            grid-template-columns: repeat(2, 1fr);
        }

        .info-item {
            padding: 15px 20px;

            border-bottom:
                1px solid rgba(212, 175, 55, 0.10);

            text-align: left;
        }

        .info-item:nth-child(odd) {
            border-right:
                1px solid rgba(212, 175, 55, 0.10);
        }

        .info-label {
            font-size: 9px;

            color: var(--muted);

            letter-spacing: 2px;

            text-transform: uppercase;

            margin-bottom: 7px;
        }

        .info-value {
            font-family: "Courier New", monospace;

            font-size: 11px;

            color: var(--gold-light);

            letter-spacing: 1px;
        }

        .info-value.error {
            color: var(--red);

            text-shadow:
                0 0 10px rgba(225, 6, 0, 0.3);
        }

        /* FOOTER */

        .footer {
            position: relative;
            z-index: 2;

            display: flex;
            justify-content: space-between;
            align-items: center;

            font-family: "Courier New", monospace;

            font-size: 9px;

            color: #5e4b40;

            letter-spacing: 1.5px;

            text-transform: uppercase;

            padding-top: 25px;
        }

        .footer span {
            color: var(--gold);
        }

        /* MOBILE */

        @media (max-width: 650px) {

            html,
            body {
                overflow: auto;
            }

            .wrapper {
                min-height: 100svh;
                padding: 22px 20px;
            }

            .topbar {
                font-size: 9px;
                letter-spacing: 1.2px;
            }

            .error-code {
                letter-spacing: -8px;
            }

            .error-title {
                font-size: 11px;
                letter-spacing: 3px;
            }

            .subtitle {
                font-size: 8px;
                letter-spacing: 1.5px;
            }

            .info-panel {
                margin-top: 35px;
            }

            .info-grid {
                grid-template-columns: 1fr;
            }

            .info-item:nth-child(odd) {
                border-right: none;
            }

            .footer {
                font-size: 8px;
                gap: 10px;
                flex-wrap: wrap;
            }
        }
    </style>
</head>

<body>

    <div class="noise"></div>

    <div class="wrapper">

        <!-- TOP BAR -->

        <header class="topbar">

            <div class="brand-small">
                G-SERVER <span>/ NODE-01</span>
            </div>

            <div class="status">
                <div class="status-dot"></div>
                NODE ERROR
            </div>

        </header>


        <!-- MAIN -->

        <main class="main">

            <div class="content">

                <div class="terminal" id="terminal">
                    SCANNING REQUEST...
                </div>


                <!-- ERROR CODE -->

                <div class="error-code">
                    404
                </div>


                <div class="error-title">
                    <span>NODE</span> NOT FOUND
                </div>


                <div class="subtitle">
                    The requested resource could not be located
                    <br>
                    on the <span>G-SERVER</span> infrastructure.
                </div>


                <div class="system-badge">
                    [ ERROR // RESOURCE UNAVAILABLE ]
                </div>


                <!-- INFO PANEL -->

                <section class="info-panel">

                    <div class="panel-header">
                        <span>REQUEST INFORMATION</span>
                        <span>ERROR 404</span>
                    </div>


                    <div class="info-grid">

                        <div class="info-item">

                            <div class="info-label">
                                Request Status
                            </div>

                            <div class="info-value error">
                                ● NOT FOUND
                            </div>

                        </div>


                        <div class="info-item">

                            <div class="info-label">
                                Response Code
                            </div>

                            <div class="info-value">
                                HTTP 404
                            </div>

                        </div>


                        <div class="info-item">

                            <div class="info-label">
                                Infrastructure
                            </div>

                            <div class="info-value">
                                G-SERVER
                            </div>

                        </div>


                        <div class="info-item">

                            <div class="info-label">
                                Connection
                            </div>

                            <div class="info-value error">
                                RESOURCE LOST
                            </div>

                        </div>

                    </div>

                </section>

            </div>

        </main>


        <!-- FOOTER -->

        <footer class="footer">

            <div>
                © 2026 <span>G-SERVER</span>
            </div>

            <div>
                HTTP 404 // RESOURCE NOT FOUND
            </div>

        </footer>

    </div>


    <script>

        const terminal =
            document.getElementById("terminal");

        const messages = [
            "SCANNING REQUEST...",
            "RESOLVING RESOURCE...",
            "CHECKING NODE...",
            "RESOURCE NOT FOUND.",
            "HTTP 404 // REQUEST TERMINATED."
        ];

        let index = 0;

        function updateTerminal() {

            if (index < messages.length) {

                terminal.textContent =
                    "> " + messages[index];

                index++;

                setTimeout(
                    updateTerminal,
                    index === messages.length
                        ? 900
                        : 450
                );
            }
        }

        setTimeout(updateTerminal, 400);

    </script>

</body>
</html>