From 4154d58e7c3ae9b3af1da9f2886c4518346dbe1c Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Fri, 13 Mar 2026 07:43:18 +0000
Subject: [PATCH] first

---
 assets/css/custom.css | 835 +++++++++++++++++++++++++-----------------
 assets/js/main.js     |  80 ++--
 index.php             | 182 +++------
 3 files changed, 597 insertions(+), 500 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 789132e..0e9f829 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,403 +1,554 @@
-body {
-    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-    background-size: 400% 400%;
-    animation: gradient 15s ease infinite;
-    color: #212529;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    margin: 0;
-    min-height: 100vh;
+:root {
+    --bg-start: #040814;
+    --bg-end: #0b1330;
+    --ink: #f6fbff;
+    --muted: rgba(219, 231, 255, 0.72);
+    --line: rgba(255, 255, 255, 0.12);
+    --glass: rgba(8, 15, 36, 0.54);
+    --glow-a: #5dd6ff;
+    --glow-b: #79ffb1;
+    --glow-c: #ffe27a;
+    --glow-d: #ff8a5b;
+    --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
+    --footer-height: 112px;
+    --pointer-x: 50vw;
+    --pointer-y: 50vh;
 }
 
-.main-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    width: 100%;
-    padding: 20px;
+* {
     box-sizing: border-box;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    min-height: 100vh;
+    margin: 0;
+    overflow: hidden;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    color: var(--ink);
+    background:
+        radial-gradient(circle at 20% 20%, rgba(93, 214, 255, 0.12), transparent 30%),
+        radial-gradient(circle at 78% 16%, rgba(121, 255, 177, 0.08), transparent 22%),
+        radial-gradient(circle at 50% 120%, rgba(255, 138, 91, 0.12), transparent 36%),
+        linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 58%, #030610 100%);
+}
+
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+        radial-gradient(circle 180px at var(--pointer-x) var(--pointer-y), rgba(93, 214, 255, 0.12), transparent 72%),
+        radial-gradient(circle 240px at calc(var(--pointer-x) + 8%) calc(var(--pointer-y) - 6%), rgba(121, 255, 177, 0.08), transparent 70%);
+    pointer-events: none;
+    mix-blend-mode: screen;
+    opacity: 0.9;
+}
+
+.space-scene,
+.error-stage,
+.footer-wrap {
     position: relative;
     z-index: 1;
 }
 
-@keyframes gradient {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
-}
-
-.chat-container {
-    width: 100%;
-    max-width: 600px;
-    background: rgba(255, 255, 255, 0.85);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 20px;
-    display: flex;
-    flex-direction: column;
-    height: 85vh;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    overflow: hidden;
-}
-
-.chat-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    background: rgba(255, 255, 255, 0.5);
-    font-weight: 700;
-    font-size: 1.1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-}
-
-/* Custom Scrollbar */
-::-webkit-scrollbar {
-    width: 6px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
-}
-
-.message {
-    max-width: 85%;
-    padding: 0.85rem 1.1rem;
-    border-radius: 16px;
-    line-height: 1.5;
-    font-size: 0.95rem;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-    animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-.message.visitor {
-    align-self: flex-end;
-    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
-    color: #fff;
-    border-bottom-right-radius: 4px;
-}
-
-.message.bot {
-    align-self: flex-start;
-    background: #ffffff;
-    color: #212529;
-    border-bottom-left-radius: 4px;
-}
-
-.chat-input-area {
-    padding: 1.25rem;
-    background: rgba(255, 255, 255, 0.5);
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.chat-input-area form {
-    display: flex;
-    gap: 0.75rem;
-}
-
-.chat-input-area input {
-    flex: 1;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    padding: 0.75rem 1rem;
-    outline: none;
-    background: rgba(255, 255, 255, 0.9);
-    transition: all 0.3s ease;
-}
-
-.chat-input-area input:focus {
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
-}
-
-.chat-input-area button {
-    background: #212529;
-    color: #fff;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: all 0.3s ease;
-}
-
-.chat-input-area button:hover {
-    background: #000;
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-}
-
-/* Background Animations */
-.bg-animations {
+.space-scene {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
+    inset: 0;
     overflow: hidden;
     pointer-events: none;
 }
 
-.blob {
+.starfield,
+.nebula,
+.orbit,
+.planet,
+.comet,
+.dust-glow,
+.stellar-wave {
     position: absolute;
-    width: 500px;
-    height: 500px;
-    background: rgba(255, 255, 255, 0.2);
+}
+
+.starfield {
+    inset: -10%;
+    background-repeat: repeat;
+    animation: drift linear infinite;
+    opacity: 0.85;
+}
+
+.starfield-far {
+    background-image:
+        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.4px),
+        radial-gradient(circle at 44% 72%, rgba(162, 214, 255, 0.55) 0 1px, transparent 1.6px),
+        radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.5px),
+        radial-gradient(circle at 72% 82%, rgba(121, 255, 177, 0.42) 0 1px, transparent 1.6px),
+        radial-gradient(circle at 24% 86%, rgba(255, 226, 122, 0.35) 0 1px, transparent 1.5px);
+    background-size: 340px 340px;
+    animation-duration: 180s;
+    opacity: 0.4;
+}
+
+.starfield-mid {
+    background-image:
+        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.82) 0 1.2px, transparent 1.9px),
+        radial-gradient(circle at 54% 68%, rgba(93, 214, 255, 0.8) 0 1.1px, transparent 1.7px),
+        radial-gradient(circle at 86% 42%, rgba(255, 255, 255, 0.72) 0 1.2px, transparent 1.8px),
+        radial-gradient(circle at 66% 14%, rgba(121, 255, 177, 0.6) 0 1.1px, transparent 1.8px),
+        radial-gradient(circle at 28% 76%, rgba(255, 226, 122, 0.5) 0 1.1px, transparent 1.7px);
+    background-size: 240px 240px;
+    animation-duration: 110s;
+    opacity: 0.65;
+}
+
+.starfield-near {
+    background-image:
+        radial-gradient(circle at 22% 16%, rgba(255, 255, 255, 0.98) 0 1.8px, transparent 2.4px),
+        radial-gradient(circle at 50% 58%, rgba(93, 214, 255, 0.95) 0 1.7px, transparent 2.4px),
+        radial-gradient(circle at 84% 34%, rgba(255, 255, 255, 0.92) 0 1.9px, transparent 2.5px),
+        radial-gradient(circle at 76% 78%, rgba(121, 255, 177, 0.72) 0 1.7px, transparent 2.3px),
+        radial-gradient(circle at 14% 70%, rgba(255, 226, 122, 0.82) 0 1.7px, transparent 2.3px);
+    background-size: 170px 170px;
+    animation-duration: 70s;
+    opacity: 0.8;
+}
+
+.nebula {
+    width: 46vw;
+    height: 46vw;
+    filter: blur(22px);
+    opacity: 0.48;
     border-radius: 50%;
-    filter: blur(80px);
-    animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
+    mix-blend-mode: screen;
+    animation: pulseNebula 18s ease-in-out infinite;
 }
 
-.blob-1 { 
-    top: -10%; 
-    left: -10%; 
-    background: rgba(238, 119, 82, 0.4); 
+.nebula-left {
+    top: -8vw;
+    left: -10vw;
+    background: radial-gradient(circle, rgba(93, 214, 255, 0.24), rgba(93, 214, 255, 0.06) 42%, transparent 68%);
 }
 
-.blob-2 { 
-    bottom: -10%; 
-    right: -10%; 
-    background: rgba(35, 166, 213, 0.4); 
-    animation-delay: -7s; 
-    width: 600px;
-    height: 600px;
+.nebula-right {
+    right: -12vw;
+    bottom: -16vw;
+    background: radial-gradient(circle, rgba(255, 138, 91, 0.2), rgba(121, 255, 177, 0.06) 38%, transparent 70%);
+    animation-delay: -9s;
 }
 
-.blob-3 { 
-    top: 40%; 
-    left: 30%; 
-    background: rgba(231, 60, 126, 0.3); 
-    animation-delay: -14s; 
-    width: 450px;
-    height: 450px;
+.orbit {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 999px;
+    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.02);
 }
 
-@keyframes move {
-    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
-    33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
-    66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
-    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
+.orbit-one {
+    width: min(80vw, 1200px);
+    height: min(80vw, 1200px);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(8deg);
 }
 
-.header-link {
-    font-size: 14px;
-    color: #fff;
-    text-decoration: none;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    transition: all 0.3s ease;
+.orbit-two {
+    width: min(56vw, 860px);
+    height: min(56vw, 860px);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-12deg);
 }
 
-.header-link:hover {
-    background: rgba(0, 0, 0, 0.4);
-    text-decoration: none;
+.planet {
+    border-radius: 50%;
+    box-shadow: var(--shadow);
+    animation: floatPlanet 22s ease-in-out infinite;
+    will-change: transform;
 }
 
-/* Admin Styles */
-.admin-container {
-    max-width: 900px;
-    margin: 3rem auto;
-    padding: 2.5rem;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-radius: 24px;
-    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    position: relative;
-    z-index: 1;
+.planet::before,
+.planet::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
 }
 
-.admin-container h1 {
-    margin-top: 0;
-    color: #212529;
-    font-weight: 800;
+.planet::before {
+    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.6), transparent 24%);
+    mix-blend-mode: screen;
 }
 
-.table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0 8px;
-    margin-top: 1.5rem;
+.planet::after {
+    inset: auto;
+    width: 140%;
+    height: 18%;
+    left: -20%;
+    top: 42%;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    transform: rotate(-18deg);
+    opacity: 0.7;
 }
 
-.table th {
-    background: transparent;
-    border: none;
-    padding: 1rem;
-    color: #6c757d;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 1px;
+.planet-one {
+    width: clamp(160px, 18vw, 260px);
+    height: clamp(160px, 18vw, 260px);
+    top: 12%;
+    right: 10%;
+    background:
+        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.92), transparent 18%),
+        radial-gradient(circle at 42% 40%, rgba(93, 214, 255, 0.95), rgba(44, 93, 255, 0.62) 58%, rgba(13, 19, 55, 0.9) 100%);
 }
 
-.table td {
-    background: #fff;
-    padding: 1rem;
-    border: none;
+.planet-two {
+    width: clamp(92px, 10vw, 150px);
+    height: clamp(92px, 10vw, 150px);
+    left: 8%;
+    top: 18%;
+    background:
+        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.8), transparent 16%),
+        radial-gradient(circle at 42% 42%, rgba(121, 255, 177, 0.96), rgba(29, 125, 101, 0.74) 58%, rgba(8, 24, 30, 0.94) 100%);
+    animation-duration: 26s;
+    animation-delay: -8s;
 }
 
-.table tr td:first-child { border-radius: 12px 0 0 12px; }
-.table tr td:last-child { border-radius: 0 12px 12px 0; }
-
-.form-group {
-    margin-bottom: 1.25rem;
+.planet-three {
+    width: clamp(200px, 24vw, 360px);
+    height: clamp(200px, 24vw, 360px);
+    left: -4%;
+    bottom: -8%;
+    background:
+        radial-gradient(circle at 36% 20%, rgba(255, 255, 255, 0.84), transparent 14%),
+        radial-gradient(circle at 44% 38%, rgba(255, 226, 122, 0.95), rgba(255, 138, 91, 0.78) 52%, rgba(73, 22, 15, 0.95) 100%);
+    animation-duration: 28s;
 }
 
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-    font-size: 0.9rem;
+.planet-four {
+    width: clamp(72px, 8vw, 122px);
+    height: clamp(72px, 8vw, 122px);
+    right: 18%;
+    bottom: 20%;
+    background:
+        radial-gradient(circle at 38% 20%, rgba(255, 255, 255, 0.76), transparent 16%),
+        radial-gradient(circle at 44% 42%, rgba(255, 170, 109, 0.95), rgba(169, 74, 224, 0.64) 56%, rgba(20, 12, 46, 0.95) 100%);
+    animation-duration: 24s;
+    animation-delay: -12s;
 }
 
-.form-control {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    background: #fff;
-    transition: all 0.3s ease;
-    box-sizing: border-box;
+.comet {
+    top: -18vh;
+    left: -24vw;
+    width: clamp(120px, 16vw, 220px);
+    height: 2px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 40%, rgba(93, 214, 255, 0.25) 100%);
+    box-shadow: 0 0 14px rgba(93, 214, 255, 0.35);
+    opacity: 0;
+    transform: rotate(-24deg);
 }
 
-.form-control:focus {
-    outline: none;
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
+.comet::before {
+    content: '';
+    position: absolute;
+    right: -6px;
+    top: 50%;
+    width: 12px;
+    height: 12px;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(93, 214, 255, 0.7) 48%, rgba(93, 214, 255, 0) 100%);
 }
 
-.header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.comet-one {
+    animation: cometFly 14s linear infinite;
 }
 
-.header-links {
-    display: flex;
-    gap: 1rem;
+.comet-two {
+    animation: cometFly 18s linear infinite;
+    animation-delay: 5s;
 }
 
-.admin-card {
-    background: rgba(255, 255, 255, 0.6);
-    padding: 2rem;
-    border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.5);
-    margin-bottom: 2.5rem;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+.comet-three {
+    animation: cometFly 22s linear infinite;
+    animation-delay: 11s;
 }
 
-.admin-card h3 {
-    margin-top: 0;
-    margin-bottom: 1.5rem;
-    font-weight: 700;
+.dust-glow {
+    width: 22vw;
+    height: 22vw;
+    border-radius: 50%;
+    filter: blur(48px);
+    opacity: 0.18;
+    animation: glowFloat 20s ease-in-out infinite;
 }
 
-.btn-delete {
-    background: #dc3545;
-    color: white;
-    border: none;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    cursor: pointer;
+.dust-glow-one {
+    top: 20%;
+    left: 18%;
+    background: radial-gradient(circle, rgba(93, 214, 255, 0.8), transparent 65%);
 }
 
-.btn-add {
-    background: #212529;
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-top: 1rem;
+.dust-glow-two {
+    right: 22%;
+    bottom: 14%;
+    background: radial-gradient(circle, rgba(121, 255, 177, 0.75), transparent 65%);
+    animation-delay: -10s;
 }
 
-.btn-save {
-    background: #0088cc;
-    color: white;
-    border: none;
-    padding: 0.8rem 1.5rem;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: 600;
-    width: 100%;
-    transition: all 0.3s ease;
+.error-stage {
+    min-height: calc(100vh - var(--footer-height));
+    display: grid;
+    place-items: center;
+    padding: 5vh 5vw calc(var(--footer-height) + 2vh);
 }
 
-.webhook-url {
-    font-size: 0.85em;
-    color: #555;
-    margin-top: 0.5rem;
-}
-
-.history-table-container {
-    overflow-x: auto;
-    background: rgba(255, 255, 255, 0.4);
-    padding: 1rem;
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.history-table {
-    width: 100%;
-}
-
-.history-table-time {
-    width: 15%;
-    white-space: nowrap;
-    font-size: 0.85em;
-    color: #555;
-}
-
-.history-table-user {
-    width: 35%;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 8px;
-    padding: 8px;
-}
-
-.history-table-ai {
-    width: 50%;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 8px;
-    padding: 8px;
-}
-
-.no-messages {
+.error-hero {
     text-align: center;
-    color: #777;
-}
\ No newline at end of file
+    max-width: 980px;
+}
+
+.error-kicker {
+    margin: 0 0 1.25rem;
+    letter-spacing: 0.44em;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.error-code {
+    position: relative;
+    margin: 0;
+    font-size: clamp(9rem, 34vw, 28rem);
+    line-height: 0.88;
+    font-weight: 900;
+    letter-spacing: -0.08em;
+    color: #f8fdff;
+    text-shadow:
+        0 0 22px rgba(93, 214, 255, 0.32),
+        0 0 80px rgba(93, 214, 255, 0.18),
+        0 26px 120px rgba(0, 0, 0, 0.62);
+    animation: codeFloat 10s ease-in-out infinite;
+    will-change: transform;
+}
+
+.error-code::before,
+.error-code::after {
+    content: attr(data-text);
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.error-code::before {
+    color: rgba(93, 214, 255, 0.38);
+    transform: translate(-6px, 2px);
+}
+
+.error-code::after {
+    color: rgba(255, 138, 91, 0.28);
+    transform: translate(6px, -2px);
+}
+
+.error-subtitle {
+    margin: 1rem auto 0;
+    max-width: 560px;
+    font-size: clamp(1rem, 1.8vw, 1.25rem);
+    line-height: 1.7;
+    color: var(--muted);
+}
+
+.footer-wrap {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    padding: 0 1rem 1.25rem;
+    pointer-events: none;
+}
+
+.footer-nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    padding: 0.8rem;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    background: linear-gradient(180deg, rgba(10, 18, 42, 0.88), rgba(6, 10, 24, 0.76));
+    backdrop-filter: blur(16px);
+    box-shadow: var(--shadow);
+    pointer-events: auto;
+    flex-wrap: wrap;
+}
+
+.footer-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 46px;
+    padding: 0.8rem 1.1rem;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    color: var(--ink);
+    text-decoration: none;
+    font-size: 0.95rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
+}
+
+.footer-link:hover,
+.footer-link:focus-visible {
+    color: var(--ink);
+    border-color: rgba(93, 214, 255, 0.45);
+    background: rgba(93, 214, 255, 0.1);
+    transform: translateY(-2px);
+    outline: none;
+}
+
+.stellar-wave {
+    width: 16px;
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 18px rgba(93, 214, 255, 0.24);
+    animation: waveExpand 1.6s ease-out forwards;
+    pointer-events: none;
+}
+
+@keyframes drift {
+    from { transform: translate3d(0, 0, 0); }
+    to { transform: translate3d(-140px, 180px, 0); }
+}
+
+@keyframes pulseNebula {
+    0%, 100% { transform: scale(1) translate3d(0, 0, 0); }
+    50% { transform: scale(1.08) translate3d(3vw, -2vw, 0); }
+}
+
+@keyframes floatPlanet {
+    0%, 100% { transform: translate3d(0, 0, 0); }
+    50% { transform: translate3d(0, -18px, 0); }
+}
+
+@keyframes cometFly {
+    0% {
+        transform: translate3d(0, 0, 0) rotate(-24deg) scaleX(0.7);
+        opacity: 0;
+    }
+    8% {
+        opacity: 1;
+    }
+    62% {
+        opacity: 0.95;
+    }
+    100% {
+        transform: translate3d(140vw, 85vh, 0) rotate(-24deg) scaleX(1.08);
+        opacity: 0;
+    }
+}
+
+@keyframes glowFloat {
+    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+    50% { transform: translate3d(24px, -18px, 0) scale(1.08); }
+}
+
+@keyframes codeFloat {
+    0%, 100% { transform: translate3d(0, 0, 0); }
+    50% { transform: translate3d(0, -10px, 0); }
+}
+
+@keyframes waveExpand {
+    from {
+        transform: scale(0.2);
+        opacity: 0.86;
+    }
+    to {
+        transform: scale(24);
+        opacity: 0;
+    }
+}
+
+@media (max-width: 991px) {
+    :root {
+        --footer-height: 132px;
+    }
+
+    .orbit-one {
+        width: 110vw;
+        height: 110vw;
+    }
+
+    .orbit-two {
+        width: 82vw;
+        height: 82vw;
+    }
+
+    .planet-one {
+        top: 10%;
+        right: 2%;
+    }
+
+    .planet-three {
+        left: -14%;
+        bottom: -6%;
+    }
+}
+
+@media (max-width: 767px) {
+    :root {
+        --footer-height: 168px;
+    }
+
+    .error-stage {
+        padding-top: 9vh;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+    }
+
+    .error-kicker {
+        letter-spacing: 0.28em;
+        font-size: 0.72rem;
+    }
+
+    .error-subtitle {
+        max-width: 320px;
+        font-size: 0.98rem;
+    }
+
+    .footer-nav {
+        width: min(100%, 560px);
+        border-radius: 28px;
+    }
+
+    .footer-link {
+        flex: 1 1 calc(50% - 0.6rem);
+    }
+
+    .planet-two {
+        left: 0;
+        top: 12%;
+    }
+
+    .planet-four {
+        right: 6%;
+        bottom: 24%;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index d349598..5e60d61 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,39 +1,57 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const chatForm = document.getElementById('chat-form');
-    const chatInput = document.getElementById('chat-input');
-    const chatMessages = document.getElementById('chat-messages');
+    const root = document.documentElement;
+    const scene = document.getElementById('space-scene');
+    const stage = document.getElementById('error-stage');
+    const parallaxItems = Array.from(document.querySelectorAll('.parallax-item'));
+    const backLink = document.querySelector('[data-action="back"]');
 
-    const appendMessage = (text, sender) => {
-        const msgDiv = document.createElement('div');
-        msgDiv.classList.add('message', sender);
-        msgDiv.textContent = text;
-        chatMessages.appendChild(msgDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
+    const moveScene = (clientX, clientY) => {
+        const xRatio = clientX / window.innerWidth - 0.5;
+        const yRatio = clientY / window.innerHeight - 0.5;
+
+        root.style.setProperty('--pointer-x', `${clientX}px`);
+        root.style.setProperty('--pointer-y', `${clientY}px`);
+
+        parallaxItems.forEach((item) => {
+            const depth = Number.parseFloat(item.dataset.depth || '0');
+            const moveX = xRatio * depth;
+            const moveY = yRatio * depth;
+            item.style.transform = `translate3d(${moveX}px, ${moveY}px, 0)`;
+        });
     };
 
-    chatForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const message = chatInput.value.trim();
-        if (!message) return;
+    document.addEventListener('pointermove', (event) => {
+        moveScene(event.clientX, event.clientY);
+    }, { passive: true });
 
-        appendMessage(message, 'visitor');
-        chatInput.value = '';
+    const spawnWave = (clientX, clientY) => {
+        if (!scene) return;
+        const wave = document.createElement('span');
+        wave.className = 'stellar-wave';
+        wave.style.left = `${clientX}px`;
+        wave.style.top = `${clientY}px`;
+        scene.appendChild(wave);
+        window.setTimeout(() => wave.remove(), 1600);
+    };
 
-        try {
-            const response = await fetch('api/chat.php', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message })
-            });
-            const data = await response.json();
-            
-            // Artificial delay for realism
-            setTimeout(() => {
-                appendMessage(data.reply, 'bot');
-            }, 500);
-        } catch (error) {
-            console.error('Error:', error);
-            appendMessage("Sorry, something went wrong. Please try again.", 'bot');
-        }
+    stage?.addEventListener('click', (event) => {
+        spawnWave(event.clientX, event.clientY);
     });
+
+    backLink?.addEventListener('click', (event) => {
+        event.preventDefault();
+        if (window.history.length > 1) {
+            window.history.back();
+            return;
+        }
+        window.location.href = '/';
+    });
+
+    window.addEventListener('blur', () => {
+        parallaxItems.forEach((item) => {
+            item.style.transform = 'translate3d(0, 0, 0)';
+        });
+    });
+
+    moveScene(window.innerWidth / 2, window.innerHeight / 2);
 });
diff --git a/index.php b/index.php
index 7205f3d..1dada17 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,78 @@
 <?php
 declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
+
 @date_default_timezone_set('UTC');
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+$siteName = $_SERVER['PROJECT_NAME'] ?? ($_SERVER['HTTP_HOST'] ?? 'Your Site');
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Минималистичная космическая 404-страница с огромной цифрой 404, медленно парящими планетами и летящими кометами.';
+$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+$currentPath = $_SERVER['REQUEST_URI'] ?? '/';
+$footerLinks = [
+    ['label' => 'На главную', 'href' => '/'],
+    ['label' => 'Обновить сигнал', 'href' => $currentPath],
+    ['label' => 'К старту', 'href' => '/'],
+    ['label' => 'Назад', 'href' => '#back', 'action' => 'back'],
+];
 ?>
 <!doctype html>
-<html lang="en">
+<html lang="ru">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
+  <title>404 — Потерянная страница в космосе | <?= htmlspecialchars($siteName) ?></title>
+  <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
+  <meta name="robots" content="noindex, nofollow" />
   <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
   <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
 <?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
   <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
   <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
 <?php endif; ?>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="assets/css/custom.css?v=<?= htmlspecialchars((string)filemtime(__DIR__ . '/assets/css/custom.css')) ?>">
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
-    </div>
+  <div class="space-scene" id="space-scene" aria-hidden="true">
+    <div class="starfield starfield-far"></div>
+    <div class="starfield starfield-mid"></div>
+    <div class="starfield starfield-near"></div>
+    <div class="nebula nebula-left"></div>
+    <div class="nebula nebula-right"></div>
+    <div class="orbit orbit-one"></div>
+    <div class="orbit orbit-two"></div>
+    <div class="planet planet-one parallax-item" data-depth="26"></div>
+    <div class="planet planet-two parallax-item" data-depth="-18"></div>
+    <div class="planet planet-three parallax-item" data-depth="12"></div>
+    <div class="planet planet-four parallax-item" data-depth="-10"></div>
+    <div class="comet comet-one"></div>
+    <div class="comet comet-two"></div>
+    <div class="comet comet-three"></div>
+    <div class="dust-glow dust-glow-one"></div>
+    <div class="dust-glow dust-glow-two"></div>
+  </div>
+
+  <main class="error-stage" id="error-stage">
+    <section class="error-hero" aria-labelledby="error-title">
+      <p class="error-kicker">lost transmission • deep space</p>
+      <h1 class="error-code parallax-item" id="error-title" data-text="404" data-depth="8">404</h1>
+      <p class="error-subtitle">Потерянная страница дрейфует где-то между орбитами.</p>
+    </section>
   </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+
+  <footer class="footer-wrap">
+    <nav class="footer-nav" aria-label="Footer navigation">
+<?php foreach ($footerLinks as $link): ?>
+      <a
+        class="footer-link"
+        href="<?= htmlspecialchars($link['href']) ?>"
+<?php if (!empty($link['action'])): ?> data-action="<?= htmlspecialchars($link['action']) ?>"<?php endif; ?>
+      ><?= htmlspecialchars($link['label']) ?></a>
+<?php endforeach; ?>
+    </nav>
   </footer>
+
+  <script src="assets/js/main.js?v=<?= htmlspecialchars((string)filemtime(__DIR__ . '/assets/js/main.js')) ?>" defer></script>
 </body>
 </html>