diff --git a/css/style_min.css b/css/style-min.css
similarity index 74%
rename from css/style_min.css
rename to css/style-min.css
index c5330a1..945e935 100644
--- a/css/style_min.css
+++ b/css/style-min.css
@@ -7,10 +7,13 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-teal-300: oklch(85.5% 0.138 181.071);
     --color-teal-400: oklch(77.7% 0.152 181.912);
     --color-teal-500: oklch(70.4% 0.14 182.503);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-white: #fff;
@@ -26,6 +29,8 @@
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
@@ -33,9 +38,12 @@
     --text-5xl: 3rem;
     --text-5xl--line-height: 1;
     --font-weight-medium: 500;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
     --leading-relaxed: 1.625;
+    --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -195,9 +203,15 @@
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -210,9 +224,36 @@
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .z-1 {
+    z-index: 1;
+  }
+  .z-2 {
+    z-index: 2;
+  }
   .z-10 {
     z-index: 10;
   }
+  .z-50 {
+    z-index: 50;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -222,9 +263,18 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -237,6 +287,9 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
@@ -258,15 +311,30 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -290,12 +358,21 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .list-inside {
+    list-style-position: inside;
+  }
   .list-decimal {
     list-style-type: decimal;
   }
+  .list-disc {
+    list-style-type: disc;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .flex-col {
+    flex-direction: column;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -308,12 +385,36 @@
   .justify-center {
     justify-content: center;
   }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .self-center {
     align-self: center;
   }
@@ -326,18 +427,43 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
+  .bg-gray-900 {
+    background-color: var(--color-gray-900);
+  }
   .bg-gray-900\/20 {
     background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-gray-900) 20%, transparent);
     }
   }
+  .bg-gray-900\/80 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
+    }
+  }
+  .bg-gray-900\/98 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 98%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 98%, transparent);
+    }
+  }
+  .bg-teal-400 {
+    background-color: var(--color-teal-400);
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -379,18 +505,36 @@
   .bg-clip-text {
     background-clip: text;
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
   .px-7 {
     padding-inline: calc(var(--spacing) * 7);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
   .py-3\.5 {
     padding-block: calc(var(--spacing) * 3.5);
   }
@@ -403,9 +547,19 @@
   .pb-16 {
     padding-bottom: calc(var(--spacing) * 16);
   }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
   .text-center {
     text-align: center;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
@@ -446,10 +600,27 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
+  .text-teal-300 {
+    color: var(--color-teal-300);
+  }
   .text-teal-400 {
     color: var(--color-teal-400);
   }
@@ -472,6 +643,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .backdrop-blur-xl {
     --tw-backdrop-blur: blur(var(--blur-xl));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -551,6 +726,30 @@
       }
     }
   }
+  .hover\:bg-gradient-to-r {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-position: to right in oklab;
+        background-image: linear-gradient(var(--tw-gradient-stops));
+      }
+    }
+  }
+  .hover\:from-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-from: var(--color-blue-500);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
+  .hover\:to-teal-400 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-teal-400);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
   .hover\:text-blue-400 {
     &:hover {
       @media (hover: hover) {
@@ -566,26 +765,102 @@
       }
     }
   }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .sm\:mb-8 {
+    @media (width >= 40rem) {
+      margin-bottom: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .sm\:p-8 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:p-10 {
     @media (width >= 40rem) {
       padding: calc(var(--spacing) * 10);
     }
   }
+  .sm\:p-12 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 12);
+    }
+  }
   .sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 6);
     }
   }
+  .sm\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .sm\:text-3xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .sm\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .sm\:text-lg {
+    @media (width >= 40rem) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
+  .md\:p-10 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
+  .md\:text-4xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .lg\:grid-cols-4 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .lg\:p-16 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 16);
+    }
+  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);
@@ -611,27 +886,33 @@ body {
 .minecraft-font {
   font-family: 'Minecraft', sans-serif;
   letter-spacing: 0.8px;
-  text-shadow: 0 0 12px rgba(20, 184, 166, 0.7);
+  text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transform: translateZ(0);
 }
 .section-bg {
   background: rgba(10, 17, 40, 0.75);
-  backdrop-filter: blur(20px);
   border-radius: 24px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
-  transition: transform 0.4s ease, box-shadow 0.4s ease;
+  transition: box-shadow 0.4s ease;
   animation: floatSection 4s ease-in-out infinite;
+  z-index: 2;
+}
+.section-bg h1, .section-bg h2, .section-bg h3, .section-bg h4, .section-bg p {
+  transform: translateZ(0);
+  color: #14b8a6;
 }
 .section-bg:hover {
-  transform: translateY(-8px);
   box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
 }
 @keyframes floatSection {
   0%, 100% {
-    transform: translateY(0);
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
   }
   50% {
-    transform: translateY(-4px);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 255, 255, 0.1);
   }
 }
 .btn-minecraft {
@@ -639,7 +920,7 @@ body {
   background-size: 300% 300%;
   border: none;
   color: #fff;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
   border-radius: 14px;
   padding: 14px 30px;
   font-weight: 700;
@@ -701,7 +982,8 @@ body {
   align-items: center;
   justify-content: center;
   border-radius: 24px;
-  will-change: transform;
+  background: rgba(10, 17, 40, 0.75);
+  z-index: 2;
 }
 .hero-bg iframe {
   position: absolute;
@@ -715,7 +997,6 @@ body {
   z-index: 1;
   border: none;
   pointer-events: none;
-  will-change: transform;
   backface-visibility: hidden;
 }
 .hero-bg img {
@@ -745,6 +1026,10 @@ body {
   padding: 4rem;
   animation: scaleIn 1.2s ease-out;
 }
+.hero-content h2, .hero-content p {
+  transform: translateZ(0);
+  color: #14b8a6;
+}
 .header-content {
   animation: scaleIn 1s ease-out;
 }
@@ -760,7 +1045,6 @@ body {
 }
 .feature-card {
   background: rgba(15, 23, 50, 0.85);
-  backdrop-filter: blur(15px);
   border-radius: 18px;
   padding: 2rem;
   border: 1px solid rgba(255, 255, 255, 0.06);
@@ -794,7 +1078,7 @@ body {
   background: linear-gradient(45deg, #14b8a6, #60a5fa);
   border-radius: 50%;
   animation: float 12s infinite ease-in-out;
-  z-index: 0;
+  z-index: -1;
   pointer-events: none;
   box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
 }
@@ -818,6 +1102,15 @@ body {
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   position: relative;
   overflow: hidden;
+  z-index: 2;
+}
+.header-bg h1, .header-bg p {
+  transform: translateZ(0);
+  color: #14b8a6;
+}
+footer {
+  z-index: 2;
+  background: rgba(10, 17, 40, 0.75);
 }
 footer a {
   color: #2dd4bf;
@@ -825,7 +1118,68 @@ footer a {
 }
 footer a:hover {
   color: #60a5fa;
-  text-shadow: 0 0 12px rgba(96, 165, 250, 0.7);
+  text-shadow: 0 0 8px rgba(96, 165, 250, 0.7);
+}
+.nav-btn {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(to right, #14b8a6, #3b82f6);
+  color: white;
+  text-decoration: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: transform 0.2s, box-shadow 0.2s;
+  min-width: 100px;
+  text-align: center;
+}
+.nav-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.hamburger {
+  display: none;
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 20001;
+}
+.hamburger.active .bar:nth-child(1) {
+  transform: translateY(8px) rotate(45deg);
+}
+.hamburger.active .bar:nth-child(2) {
+  opacity: 0;
+}
+.hamburger.active .bar:nth-child(3) {
+  transform: translateY(-8px) rotate(-45deg);
+}
+.mobile-nav-container {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
+  backdrop-filter: blur(5px);
+  z-index: 20000;
+  padding: 4rem 2rem;
+  pointer-events: auto;
+}
+.mobile-nav-container.active {
+  display: flex;
+  opacity: 1;
+  visibility: visible;
+}
+.mobile-nav-container ul li a {
+  display: block;
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  transition: background 0.3s ease;
+  font-size: 1.25rem;
+  text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  transform: translateZ(0);
+}
+.mobile-nav-container ul li a:hover {
+  transform: translateX(10px);
 }
 @media (max-width: 768px) {
   .hero-bg {
@@ -850,6 +1204,12 @@ footer a:hover {
   .feature-card {
     padding: 1.5rem;
   }
+  .nav-btn {
+    display: none;
+  }
+  .hamburger {
+    display: flex;
+  }
 }
 @media (max-width: 640px) {
   .hero-bg {
@@ -858,14 +1218,9 @@ footer a:hover {
   .hero-bg iframe {
     min-height: 400px;
   }
-  .minecraft-font.text-5xl {
-    font-size: 2rem;
-  }
-  .minecraft-font.text-4xl {
-    font-size: 1.75rem;
-  }
-  .minecraft-font.text-3xl {
-    font-size: 1.5rem;
+  .mobile-nav-container ul li a {
+    font-size: 1rem;
+    padding: 0.75rem 1.5rem;
   }
 }
 @property --tw-translate-x {
@@ -903,6 +1258,16 @@ footer a:hover {
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-gradient-position {
   syntax: "*";
   inherits: false;
@@ -1092,6 +1457,8 @@ footer a:hover {
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
+      --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
       --tw-gradient-via: #0000;
diff --git a/css/style.css b/css/style.css
index c23bddb..27cddf4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,10 +2,11 @@
 
 @font-face {
     font-family: 'Minecraft';
-    src: url('https://my-mc.link/font/minecraft_font.ttf') format('truetype');
+    src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
 }
+
 body {
     background: linear-gradient(135deg, #0b0f2b, #1a2249);
     font-family: 'Roboto', 'Verdana', sans-serif;
@@ -16,34 +17,63 @@ body {
     min-height: 100vh;
     scroll-behavior: smooth;
 }
+
 .minecraft-font {
     font-family: 'Minecraft', sans-serif;
     letter-spacing: 0.8px;
-    text-shadow: 0 0 12px rgba(20, 184, 166, 0.7);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background: linear-gradient(to right, #14b8a6, #3b82f6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    transform: translateZ(0);
 }
+
 .section-bg {
     background: rgba(10, 17, 40, 0.75);
-    backdrop-filter: blur(20px);
     border-radius: 24px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
-    transition: transform 0.4s ease, box-shadow 0.4s ease;
+    transition: box-shadow 0.4s ease;
     animation: floatSection 4s ease-in-out infinite;
+    z-index: 2;
 }
+
+.section-bg h1,
+.section-bg h2,
+.section-bg h3,
+.section-bg h4 {
+    transform: translateZ(0);
+}
+
+.section-bg p,
+.section-bg a:not(.btn-minecraft) {
+    font-family: 'Roboto', 'Verdana', sans-serif;
+    color: #e0e7ff;
+    transform: translateZ(0);
+}
+
 .section-bg:hover {
-    transform: translateY(-8px);
     box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
 }
+
 @keyframes floatSection {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-4px); }
+    0%, 100% {
+        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
+    }
+    50% {
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 255, 255, 0.1);
+    }
 }
+
 .btn-minecraft {
     background: linear-gradient(45deg, #14b8a6, #3b82f6);
     background-size: 300% 300%;
     border: none;
     color: #fff;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
     border-radius: 14px;
     padding: 14px 30px;
     font-weight: 700;
@@ -52,6 +82,7 @@ body {
     transition: transform 0.3s, box-shadow 0.3s;
     animation: gradientShift 5s ease infinite;
 }
+
 .btn-minecraft::before {
     content: '';
     position: absolute;
@@ -62,13 +93,16 @@ body {
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: left 0.5s;
 }
+
 .btn-minecraft:hover::before {
     left: 100%;
 }
+
 .btn-minecraft:hover {
     transform: scale(1.1);
     box-shadow: 0 8px 30px rgba(20, 184, 166, 0.7);
 }
+
 .btn-minecraft::after {
     content: '';
     position: absolute;
@@ -81,16 +115,25 @@ body {
     transition: width 0.3s, height 0.3s, opacity 0.3s;
     transform: translate(-50%, -50%);
 }
+
 .btn-minecraft:hover::after {
     width: 200px;
     height: 200px;
     opacity: 1;
 }
+
 @keyframes gradientShift {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
 }
+
 .hero-bg {
     position: relative;
     overflow: hidden;
@@ -99,8 +142,10 @@ body {
     align-items: center;
     justify-content: center;
     border-radius: 24px;
-    will-change: transform;
+    background: rgba(10, 17, 40, 0.75);
+    z-index: 2;
 }
+
 .hero-bg iframe {
     position: absolute;
     top: 50%;
@@ -113,9 +158,9 @@ body {
     z-index: 1;
     border: none;
     pointer-events: none;
-    will-change: transform;
     backface-visibility: hidden;
 }
+
 .hero-bg img {
     position: absolute;
     top: 0;
@@ -126,6 +171,7 @@ body {
     z-index: 0;
     display: none;
 }
+
 .hero-bg::before {
     content: '';
     position: absolute;
@@ -136,6 +182,7 @@ body {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
     z-index: 2;
 }
+
 .hero-content {
     position: relative;
     z-index: 3;
@@ -143,16 +190,44 @@ body {
     padding: 4rem;
     animation: scaleIn 1.2s ease-out;
 }
+
+.hero-content h2 {
+    transform: translateZ(0);
+}
+
+.hero-content p {
+    font-family: 'Roboto', 'Verdana', sans-serif;
+    color: #e0e7ff;
+    transform: translateZ(0);
+}
+
 .header-content {
     animation: scaleIn 1s ease-out;
 }
-@keyframes scaleIn {
-    from { opacity: 0; transform: scale(0.95); }
-    to { opacity: 1; transform: scale(1); }
+
+.header-content h1 {
+    transform: translateZ(0);
 }
+
+.header-content p {
+    font-family: 'Roboto', 'Verdana', sans-serif;
+    color: #e0e7ff;
+    transform: translateZ(0);
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
 .feature-card {
     background: rgba(15, 23, 50, 0.85);
-    backdrop-filter: blur(15px);
     border-radius: 18px;
     padding: 2rem;
     border: 1px solid rgba(255, 255, 255, 0.06);
@@ -161,10 +236,12 @@ body {
     overflow: hidden;
     animation: floatSection 5s ease-in-out infinite;
 }
+
 .feature-card:hover {
     transform: translateY(-12px) scale(1.03);
     box-shadow: 0 12px 35px rgba(20, 184, 166, 0.5);
 }
+
 .feature-card::before {
     content: '';
     position: absolute;
@@ -176,9 +253,22 @@ body {
     opacity: 0;
     transition: opacity 0.4s;
 }
+
 .feature-card:hover::before {
     opacity: 1;
 }
+
+.feature-card h3,
+.feature-card h4 {
+    transform: translateZ(0);
+}
+
+.feature-card p {
+    font-family: 'Roboto', 'Verdana', sans-serif;
+    color: #e0e7ff;
+    transform: translateZ(0);
+}
+
 .particle {
     position: absolute;
     width: 5px;
@@ -186,33 +276,123 @@ body {
     background: linear-gradient(45deg, #14b8a6, #60a5fa);
     border-radius: 50%;
     animation: float 12s infinite ease-in-out;
-    z-index: 0;
+    z-index: -1;
     pointer-events: none;
     box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
 }
+
 .particle.large {
     width: 8px;
     height: 8px;
     animation-duration: 14s;
 }
+
 @keyframes float {
-    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }
-    50% { transform: translateY(-60px) translateX(25px); opacity: 0.8; }
+    0%, 100% {
+        transform: translateY(0) translateX(0);
+        opacity: 0.2;
+    }
+    50% {
+        transform: translateY(-60px) translateX(25px);
+        opacity: 0.8;
+    }
 }
+
 .header-bg {
     background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
     border-bottom: 1px solid rgba(255, 255, 255, 0.12);
     position: relative;
     overflow: hidden;
+    z-index: 2;
 }
+
+footer {
+    z-index: 2;
+    background: rgba(10, 17, 40, 0.75);
+}
+
 footer a {
     color: #2dd4bf;
     transition: color 0.3s, text-shadow 0.3s;
 }
+
 footer a:hover {
     color: #60a5fa;
-    text-shadow: 0 0 12px rgba(96, 165, 250, 0.7);
+    text-shadow: 0 0 8px rgba(96, 165, 250, 0.7);
 }
+
+.nav-btn {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: linear-gradient(to right, #14b8a6, #3b82f6);
+    color: white;
+    text-decoration: none;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: transform 0.2s, box-shadow 0.2s;
+    min-width: 100px;
+    text-align: center;
+}
+
+.nav-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Hamburger Menu Styles */
+.hamburger {
+    display: none;
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 20001;
+}
+
+.hamburger.active .bar:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+}
+
+.hamburger.active .bar:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger.active .bar:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+}
+
+.mobile-nav-container {
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
+    backdrop-filter: blur(5px);
+    z-index: 20000;
+    padding: 4rem 2rem;
+    pointer-events: auto;
+}
+
+.mobile-nav-container.active {
+    display: flex;
+    opacity: 1;
+    visibility: visible;
+}
+
+.mobile-nav-container ul li a {
+    display: block;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    transition: background 0.3s ease;
+    font-size: 1.25rem;
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+    transform: translateZ(0);
+}
+
+.mobile-nav-container ul li a:hover {
+    transform: translateX(10px);
+}
+
 @media (max-width: 768px) {
     .hero-bg {
         min-height: 500px;
@@ -236,7 +416,14 @@ footer a:hover {
     .feature-card {
         padding: 1.5rem;
     }
+    .nav-btn {
+        display: none;
+    }
+    .hamburger {
+        display: flex;
+    }
 }
+
 @media (max-width: 640px) {
     .hero-bg {
         min-height: 400px;
@@ -253,4 +440,8 @@ footer a:hover {
     .minecraft-font.text-3xl {
         font-size: 1.5rem;
     }
-}
+    .mobile-nav-container ul li a {
+        font-size: 1rem;
+        padding: 0.75rem 1.5rem;
+    }
+}
\ No newline at end of file
diff --git a/css/style.min.css b/css/style.min.css
new file mode 100644
index 0000000..2f4fc3f
--- /dev/null
+++ b/css/style.min.css
@@ -0,0 +1,1537 @@
+/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-teal-300: oklch(85.5% 0.138 181.071);
+    --color-teal-400: oklch(77.7% 0.152 181.912);
+    --color-teal-500: oklch(70.4% 0.14 182.503);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-7xl: 80rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
+    --tracking-wide: 0.025em;
+    --leading-relaxed: 1.625;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --blur-xl: 24px;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
+  .-left-full {
+    left: -100%;
+  }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
+  .z-1 {
+    z-index: 1;
+  }
+  .z-2 {
+    z-index: 2;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-50 {
+    z-index: 50;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+  .mb-12 {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .w-0 {
+    width: calc(var(--spacing) * 0);
+  }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .list-inside {
+    list-style-position: inside;
+  }
+  .list-decimal {
+    list-style-type: decimal;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .self-center {
+    align-self: center;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .bg-gray-800 {
+    background-color: var(--color-gray-800);
+  }
+  .bg-gray-900 {
+    background-color: var(--color-gray-900);
+  }
+  .bg-gray-900\/20 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 20%, transparent);
+    }
+  }
+  .bg-gray-900\/80 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
+    }
+  }
+  .bg-gray-900\/98 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 98%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 98%, transparent);
+    }
+  }
+  .bg-teal-400 {
+    background-color: var(--color-teal-400);
+  }
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-\[radial-gradient\(circle\,rgba\(20\,184\,166\,0\.5\)\,transparent\)\] {
+    background-image: radial-gradient(circle,rgba(20,184,166,0.5),transparent);
+  }
+  .from-teal-400 {
+    --tw-gradient-from: var(--color-teal-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .from-teal-500 {
+    --tw-gradient-from: var(--color-teal-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .from-transparent {
+    --tw-gradient-from: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .via-white\/40 {
+    --tw-gradient-via: color-mix(in srgb, #fff 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 40%, transparent);
+    }
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+  .to-blue-500 {
+    --tw-gradient-to: var(--color-blue-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .bg-\[length\:300\%_300\%\] {
+    background-size: 300% 300%;
+  }
+  .bg-clip-text {
+    background-clip: text;
+  }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
+  .pb-16 {
+    padding-bottom: calc(var(--spacing) * 16);
+  }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
+  .text-teal-300 {
+    color: var(--color-teal-300);
+  }
+  .text-teal-400 {
+    color: var(--color-teal-400);
+  }
+  .text-transparent {
+    color: transparent;
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-90 {
+    opacity: 90%;
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .backdrop-blur-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[left\] {
+    transition-property: left;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .group-hover\:left-full {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        left: 100%;
+      }
+    }
+  }
+  .group-hover\:h-\[200px\] {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        height: 200px;
+      }
+    }
+  }
+  .group-hover\:w-\[200px\] {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        width: 200px;
+      }
+    }
+  }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .hover\:scale-110 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .hover\:bg-gradient-to-r {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-position: to right in oklab;
+        background-image: linear-gradient(var(--tw-gradient-stops));
+      }
+    }
+  }
+  .hover\:from-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-from: var(--color-blue-500);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
+  .hover\:to-teal-400 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-teal-400);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
+  .hover\:text-blue-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-blue-400);
+      }
+    }
+  }
+  .hover\:shadow-\[0_8px_30px_rgba\(20\,184\,166\,0\.7\)\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(20,184,166,0.7));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .sm\:mb-8 {
+    @media (width >= 40rem) {
+      margin-bottom: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .sm\:p-8 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:p-10 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
+  .sm\:p-12 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 12);
+    }
+  }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .sm\:text-3xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .sm\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .sm\:text-lg {
+    @media (width >= 40rem) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
+  .md\:p-10 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
+  .md\:text-4xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .lg\:p-16 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 16);
+    }
+  }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+}
+@font-face {
+  font-family: 'Minecraft';
+  src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+body {
+  background: linear-gradient(135deg, #0b0f2b, #1a2249);
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+  overflow-x: hidden;
+  position: relative;
+  margin: 0;
+  min-height: 100vh;
+  scroll-behavior: smooth;
+}
+.minecraft-font {
+  font-family: 'Minecraft', sans-serif;
+  letter-spacing: 0.8px;
+  text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(to right, #14b8a6, #3b82f6);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  transform: translateZ(0);
+}
+.section-bg {
+  background: rgba(10, 17, 40, 0.75);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
+  transition: box-shadow 0.4s ease;
+  animation: floatSection 4s ease-in-out infinite;
+  z-index: 2;
+}
+.section-bg h1, .section-bg h2, .section-bg h3, .section-bg h4 {
+  transform: translateZ(0);
+}
+.section-bg p, .section-bg a:not(.btn-minecraft) {
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+  transform: translateZ(0);
+}
+.section-bg:hover {
+  box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
+}
+@keyframes floatSection {
+  0%, 100% {
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
+  }
+  50% {
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 255, 255, 0.1);
+  }
+}
+.btn-minecraft {
+  background: linear-gradient(45deg, #14b8a6, #3b82f6);
+  background-size: 300% 300%;
+  border: none;
+  color: #fff;
+  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  border-radius: 14px;
+  padding: 14px 30px;
+  font-weight: 700;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s, box-shadow 0.3s;
+  animation: gradientShift 5s ease infinite;
+}
+.btn-minecraft::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  transition: left 0.5s;
+}
+.btn-minecraft:hover::before {
+  left: 100%;
+}
+.btn-minecraft:hover {
+  transform: scale(1.1);
+  box-shadow: 0 8px 30px rgba(20, 184, 166, 0.7);
+}
+.btn-minecraft::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: radial-gradient(circle, rgba(20, 184, 166, 0.5), transparent);
+  opacity: 0;
+  transition: width 0.3s, height 0.3s, opacity 0.3s;
+  transform: translate(-50%, -50%);
+}
+.btn-minecraft:hover::after {
+  width: 200px;
+  height: 200px;
+  opacity: 1;
+}
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.hero-bg {
+  position: relative;
+  overflow: hidden;
+  min-height: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 24px;
+  background: rgba(10, 17, 40, 0.75);
+  z-index: 2;
+}
+.hero-bg iframe {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 120%;
+  height: 120%;
+  min-height: 600px;
+  transform: translate(-50%, -50%) scale(1.2);
+  object-fit: cover;
+  z-index: 1;
+  border: none;
+  pointer-events: none;
+  backface-visibility: hidden;
+}
+.hero-bg img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+  display: none;
+}
+.hero-bg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
+  z-index: 2;
+}
+.hero-content {
+  position: relative;
+  z-index: 3;
+  text-align: center;
+  padding: 4rem;
+  animation: scaleIn 1.2s ease-out;
+}
+.hero-content h2 {
+  transform: translateZ(0);
+}
+.hero-content p {
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+  transform: translateZ(0);
+}
+.header-content {
+  animation: scaleIn 1s ease-out;
+}
+.header-content h1 {
+  transform: translateZ(0);
+}
+.header-content p {
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+  transform: translateZ(0);
+}
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.feature-card {
+  background: rgba(15, 23, 50, 0.85);
+  border-radius: 18px;
+  padding: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  transition: transform 0.4s ease, box-shadow 0.4s ease;
+  position: relative;
+  overflow: hidden;
+  animation: floatSection 5s ease-in-out infinite;
+}
+.feature-card:hover {
+  transform: translateY(-12px) scale(1.03);
+  box-shadow: 0 12px 35px rgba(20, 184, 166, 0.5);
+}
+.feature-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 30% 30%, rgba(20, 184, 166, 0.3), transparent);
+  opacity: 0;
+  transition: opacity 0.4s;
+}
+.feature-card:hover::before {
+  opacity: 1;
+}
+.feature-card h3, .feature-card h4 {
+  transform: translateZ(0);
+}
+.feature-card p {
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+  transform: translateZ(0);
+}
+.particle {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background: linear-gradient(45deg, #14b8a6, #60a5fa);
+  border-radius: 50%;
+  animation: float 12s infinite ease-in-out;
+  z-index: -1;
+  pointer-events: none;
+  box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
+}
+.particle.large {
+  width: 8px;
+  height: 8px;
+  animation-duration: 14s;
+}
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) translateX(0);
+    opacity: 0.2;
+  }
+  50% {
+    transform: translateY(-60px) translateX(25px);
+    opacity: 0.8;
+  }
+}
+.header-bg {
+  background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+}
+footer {
+  z-index: 2;
+  background: rgba(10, 17, 40, 0.75);
+}
+footer a {
+  color: #2dd4bf;
+  transition: color 0.3s, text-shadow 0.3s;
+}
+footer a:hover {
+  color: #60a5fa;
+  text-shadow: 0 0 8px rgba(96, 165, 250, 0.7);
+}
+.nav-btn {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(to right, #14b8a6, #3b82f6);
+  color: white;
+  text-decoration: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: transform 0.2s, box-shadow 0.2s;
+  min-width: 100px;
+  text-align: center;
+}
+.nav-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.hamburger {
+  display: none;
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 20001;
+}
+.hamburger.active .bar:nth-child(1) {
+  transform: translateY(8px) rotate(45deg);
+}
+.hamburger.active .bar:nth-child(2) {
+  opacity: 0;
+}
+.hamburger.active .bar:nth-child(3) {
+  transform: translateY(-8px) rotate(-45deg);
+}
+.mobile-nav-container {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
+  backdrop-filter: blur(5px);
+  z-index: 20000;
+  padding: 4rem 2rem;
+  pointer-events: auto;
+}
+.mobile-nav-container.active {
+  display: flex;
+  opacity: 1;
+  visibility: visible;
+}
+.mobile-nav-container ul li a {
+  display: block;
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  transition: background 0.3s ease;
+  font-size: 1.25rem;
+  text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  transform: translateZ(0);
+}
+.mobile-nav-container ul li a:hover {
+  transform: translateX(10px);
+}
+@media (max-width: 768px) {
+  .hero-bg {
+    min-height: 500px;
+  }
+  .hero-bg iframe {
+    min-height: 500px;
+  }
+  .btn-minecraft {
+    padding: 12px 26px;
+    font-size: 0.9rem;
+  }
+  .minecraft-font.text-5xl {
+    font-size: 2.5rem;
+  }
+  .minecraft-font.text-4xl {
+    font-size: 2rem;
+  }
+  .minecraft-font.text-3xl {
+    font-size: 1.75rem;
+  }
+  .feature-card {
+    padding: 1.5rem;
+  }
+  .nav-btn {
+    display: none;
+  }
+  .hamburger {
+    display: flex;
+  }
+}
+@media (max-width: 640px) {
+  .hero-bg {
+    min-height: 400px;
+  }
+  .hero-bg iframe {
+    min-height: 400px;
+  }
+  .minecraft-font.text-5xl {
+    font-size: 2rem;
+  }
+  .minecraft-font.text-4xl {
+    font-size: 1.75rem;
+  }
+  .minecraft-font.text-3xl {
+    font-size: 1.5rem;
+  }
+  .mobile-nav-container ul li a {
+    font-size: 1rem;
+    padding: 0.75rem 1.5rem;
+  }
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+    }
+  }
+}
diff --git a/index.html b/index.html
index 1c3e147..894ba0c 100644
--- a/index.html
+++ b/index.html
@@ -7,42 +7,65 @@
     <title>My-MC.Link</title>
     <link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
-    <link href="css/style_min.css?p=4" rel="stylesheet">
+    <link href="css/style.min.css?p=" rel="stylesheet">
     <link href="favicon.ico" rel="icon" type="image/x-icon">
 </head>
 
 <body>
+    <!-- Hamburger Menu Icon (visible on mobile) -->
+    <button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none" style="z-index: 99999; position: fixed; top: 1rem; right: 1rem; pointer-events: auto;">
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
+    </button>
+    <!-- Mobile Navigation Menu -->
+    <nav class="mobile-nav mobile-nav-container hidden fixed inset-0 bg-gray-900/98 flex-col items-center justify-center md:hidden" data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto;">
+        <ul class="text-center">
+            <li class="mb-6">
+                <a href="https://panel.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Panel</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://stats.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">System Stats</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://status.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Check MC Status</a>
+            </li>
+        </ul>
+    </nav>
     <!-- Particle Effects -->
-    <div class="particle" style="left: 10%; top: 20%; animation-delay: 0s;"></div>
-    <div class="particle large" style="left: 30%; top: 50%; animation-delay: 2s;"></div>
-    <div class="particle" style="left: 50%; top: 30%; animation-delay: 4s;"></div>
-    <div class="particle large" style="left: 70%; top: 60%; animation-delay: 6s;"></div>
-    <div class="particle" style="left: 20%; top: 80%; animation-delay: 8s;"></div>
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
 
-    <header class="header-bg py-16 text-center relative z-10">
+    <header class="header-bg py-16 text-center relative z-2">
         <div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div>
-                <h1
-                    class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+                <h1 class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
                     My-MC.Link</h1>
                 <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Futuristic Free Minecraft Hosting</p>
             </div>
-            <a href="https://panel.my-mc.link" class="btn-minecraft text-base self-center" target="_blank">Panel</a>
+            <!-- Navigation Buttons (hidden on mobile) -->
+            <nav class="flex items-center gap-2 hidden md:flex">
+                <a href="https://panel.my-mc.link" class="nav-btn" target="_blank">Panel</a>
+                <a href="https://stats.my-mc.link" class="nav-btn">System Stats</a>
+                <a href="https://status.my-mc.link" class="nav-btn" target="_blank">Check MC Status</a>
+            </nav>
         </div>
     </header>
 
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-10">
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-2">
         <section class="hero-bg mb-12">
             <iframe id="ytplayer"
                 src="https://www.youtube.com/embed/qLuc8kZty1A?autoplay=1&loop=1&mute=1&controls=0&showinfo=0&rel=0&iv_load_policy=3&playlist=qLuc8kZty1A"
                 frameborder="0" allow="autoplay;" allowfullscreen></iframe>
             <img src="https://minecraft.wiki/images/Panorama_4.png" alt="Minecraft Panorama">
             <div class="hero-content">
-                <h2
-                    class="text-4xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+                <h2 class="text-4xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
                     Craft Your Ultimate Fabric Server</h2>
                 <p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
-                    Host your Minecraft server for free with secure, low-latency P2P connections.<BR>Enjoy encrypted
+                    Host your Minecraft server for free with secure, low-latency P2P connections.<br>Enjoy encrypted
                     networking, effortless mod management, and cross-platform play.
                 </p>
                 <a href="https://join.my-mc.link" class="btn-minecraft inline-block text-lg" target="_blank">Start Your
@@ -51,8 +74,7 @@
         </section>
 
         <section class="section-bg p-8 sm:p-10 mb-12">
-            <h2
-                class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+            <h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
                 What Sets Us Apart</h2>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                 <div class="feature-card tilt-card">
@@ -79,37 +101,34 @@
         </section>
 
         <section class="section-bg p-8 sm:p-10 mb-12">
-            <h2
-                class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+            <h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
                 My-MC Realms</h2>
             <p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
-                My-MC Realms is a seamless alternative to Minecraft Realms, allowing you to connect to your Minecraft server directly from the Realms menu without needing the server address<BR><BR>Simply install the MyMcRealms mod within your client, run the <code class="bg-gray-800 text-teal-400 px-1 rounded">/my-mc-link</code> command to register a slot, and access your server with ease.
+                My-MC Realms is a seamless alternative to Minecraft Realms, allowing you to connect to your Minecraft server directly from the Realms menu without needing the server address<br><br>Simply install the MyMcRealms mod within your client, run the <code class="bg-gray-800 text-teal-400 px-1 rounded">/my-mc-link</code> command to register a slot, and access your server with ease.
             </p>
             <div class="flex justify-center mb-8">
-                <img src="img/my-mc-realms.webp"
-                    alt="MyMcRealms in action" class="max-w-full rounded-lg shadow-lg">
+                <img src="img/my-mc-realms.webp" alt="MyMcRealms in action" class="max-w-full rounded-lg shadow-lg">
             </div>
             <p class="text-lg max-w-3xl mx-auto opacity-90 leading-relaxed">
-                <strong>Give the mod to your friends</strong><BR>Once installed on your friends clients, they can access your server via the Realms menu.<BR>No More Need For IPs or Ports!
+                <strong>Give the mod to your friends</strong><br>Once installed on your friends clients, they can access your server via the Realms menu.<br>No More Need For IPs or Ports!
             </p>
         </section>
 
         <section class="section-bg p-8 sm:p-10 mb-12">
-            <h2
-                class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+            <h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
                 Holesail - Reverse Tunnels</h2>
             <p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
-                <strong>Peer to Peer Tunnels for Instant Access</strong><BR>Create P2P tunnels instantly that bypass any network, firewall, or NAT restrictions and expose your local network to the internet securely—no Dynamic DNS required.<BR>It’s 100% free and open source!
+                <strong>Peer to Peer Tunnels for Instant Access</strong><br>Create P2P tunnels instantly that bypass any network, firewall, or NAT restrictions and expose your local network to the internet securely—no Dynamic DNS required.<br>It’s 100% free and open source!
             </p>
             <p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
-                It’s as easy as running <code class="bg-gray-800 text-teal-400 px-1 rounded">/connection-details</code> within our bot and then on your PC:<BR>
-                <code class="bg-gray-800 text-teal-400 px-1 rounded">holesail hs://s0006d08fe790479cb210dc3a2</code><BR>
+                It’s as easy as running <code class="bg-gray-800 text-teal-400 px-1 rounded">/connection-details</code> within our bot and then on your PC:<br>
+                <code class="bg-gray-800 text-teal-400 px-1 rounded">holesail hs://s0006d08fe790479cb210dc3a2</code><br>
                 Within Minecraft<code class="bg-gray-800 text-teal-400 px-1 rounded">127.0.0.1:25565</code>.
             </p>
             <div class="flex justify-center mb-8">
-                <a href="https://docs.holesail.io/overview/what-can-holesail-do" class="btn-minecraft text-base" target="_blank">Get Started with Holesail</a>
+                <a href="https://docs.holesail.io-overview/what-can-holesail-do" class="btn-minecraft text-base" target="_blank">Get Started with Holesail</a>
             </div>
-            <h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">⛵ What Can Holesail Do?</h3>
+            <h3 class="text-xl minecraft-font mb-6 text-center text-teal-400">⛵ What Can Holesail Do?</h3>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                 <div class="feature-card tilt-card">
                     <h4 class="text-lg minecraft-font mb-2 text-teal-400">Access Anywhere</h4>
@@ -137,13 +156,12 @@
                 </div>
             </div>
             <p class="text-lg max-w-3xl mx-auto opacity-90 leading-relaxed">
-                <CENTER>It’s always <code class="bg-gray-800 text-teal-400 px-1 rounded">127.0.0.1</code>—say goodbye to the internet and hello to localhost!</CENTER>
+                <center>It’s always <code class="bg-gray-800 text-teal-400 px-1 rounded">127.0.0.1</code>—say goodbye to the internet and hello to localhost!</center>
             </p>
         </section>
 
         <section class="section-bg p-8 sm:p-10 mb-12">
-            <h2
-                class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+            <h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
                 Power Up with Our API & Libraries</h2>
             <p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
                 Take control of your Minecraft server like never before with our powerful REST API and MyMCLib libraries! Automate server management, install mods, ban players, send messages, and more with just a few lines of code. Available in JavaScript and Java, our tools make it easy to integrate and customize your server experience.
@@ -159,16 +177,15 @@
                 </div>
             </div>
             <p class="text-lg max-w-3xl mx-auto opacity-90 leading-relaxed">
-                <strong>Ready to code?</strong><BR>Dive into our <a href="https://info.my-mc.link/api/" class="underline text-teal-400 hover:text-blue-400">API documentation</a> and <a href="https://info.my-mc.link/mymc-lib/" class="underline text-teal-400 hover:text-blue-400">MyMCLib guide</a> to start building today!
+                <strong>Ready to code?</strong><br>Dive into our <a href="https://info.my-mc.link/api/" class="underline text-teal-400 hover:text-blue-400">API documentation</a> and <a href="https://info.my-mc.link/mymc-lib/" class="underline text-teal-400 hover:text-blue-400">MyMCLib guide</a> to start building today!
             </p>
         </section>
 
         <section id="get-started" class="section-bg p-8 sm:p-10 text-center mb-12">
-            <h2
-                class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+            <h2 class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
                 Begin Your Adventure</h2>
             <p class="text-lg mb-8 max-w-2xl mx-auto opacity-90 leading-relaxed">
-                Join our vibrant community, set up your server in minutes, and play with friends across platforms.<BR>Free,
+                Join our vibrant community, set up your server in minutes, and play with friends across platforms.<br>Free,
                 secure, and crafted for Minecraft fans.
             </p>
             <div class="flex justify-center gap-4 flex-wrap">
@@ -178,11 +195,10 @@
         </section>
 
         <section class="section-bg p-8 sm:p-10 text-center">
-            <h2
-                class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+            <h2 class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
                 Beta Phase Notice</h2>
             <p class="text-lg max-w-3xl mx-auto opacity-90 leading-relaxed">
-                My-MC.Link is in beta, so minor issues may arise.<BR>Please review our
+                My-MC.Link is in beta, so minor issues may arise.<br>Please review our
                 <a href="https://my-mc.link/terms.html" class="underline text-teal-400 hover:text-blue-400">Terms of
                     Service</a> and
                 <a href="https://discord.com/guidelines" class="underline text-teal-400 hover:text-blue-400">Discord
@@ -190,7 +206,7 @@
             </p>
         </section>
     </main>
-    <footer class="bg-gray-900/20 backdrop-filter backdrop-blur-xl py-8 text-center relative z-10">
+    <footer class="bg-gray-900/20 backdrop-filter backdrop-blur-xl py-8 text-center relative z-2">
         <p class="text-sm opacity-90">© 2025 My-MC.Link. All rights reserved.</p>
         <p class="text-sm opacity-90 mt-3">
             Powered by <a href="https://holesail.io" class="underline" target="_blank">Holesail</a> with services
diff --git a/js/main.js b/js/main.js
index 42459dd..cc502c5 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,16 +1,20 @@
-// Handle video playback error
-const iframe = document.getElementById('ytplayer');
-iframe.onerror = () => {
-    iframe.style.display = 'none';
-    document.querySelector('.hero-bg img').style.display = 'block';
-};
+if (window.location.href === 'https://my-mc.link' || window.location.href === 'https://my-mc.link/') {
+    const iframe = document.getElementById('ytplayer');
+    if (iframe) {
+        iframe.onerror = () => {
+            iframe.style.display = 'none';
+            const img = document.querySelector('.hero-bg img');
+            if (img) {
+                img.style.display = 'block';
+            }
+        };
+    }
+}
 
-// Ensure page loads at the top
 window.addEventListener('load', () => {
     window.scrollTo(0, 0);
 });
 
-// Scroll animations for sections
 const sections = document.querySelectorAll('.section-bg');
 const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry, index) => {
@@ -29,7 +33,6 @@ sections.forEach(section => {
     observer.observe(section);
 });
 
-// Dynamic particle spawning
 function createParticle() {
     const particle = document.createElement('div');
     particle.classList.add('particle');
@@ -44,7 +47,6 @@ function createParticle() {
 
 setInterval(createParticle, 500);
 
-// Throttle function to limit scroll event frequency
 function throttle(fn, wait) {
     let lastTime = 0;
     return function (...args) {
@@ -56,21 +58,24 @@ function throttle(fn, wait) {
     };
 }
 
-// Parallax effect for fallback image only
-const hero = document.querySelector('.hero-bg');
-const heroImg = hero.querySelector('img');
-window.addEventListener(
-    'scroll',
-    throttle(() => {
-        const scrollPosition = window.pageYOffset;
-        // Apply parallax only to fallback image if iframe is hidden
-        if (heroImg.style.display === 'block') {
-            heroImg.style.transform = `translate(-50%, calc(-50% + ${scrollPosition * 0.3}px)) scale(1.2)`;
+if (window.location.href === 'https://my-mc.link' || window.location.href === 'https://my-mc.link/') {
+    const hero = document.querySelector('.hero-bg');
+    if (hero) {
+        const heroImg = hero.querySelector('img');
+        if (heroImg) {
+            window.addEventListener(
+                'scroll',
+                throttle(() => {
+                    const scrollPosition = window.pageYOffset;
+                    if (heroImg.style.display === 'block') {
+                        heroImg.style.transform = `translate(-50%, calc(-50% + ${scrollPosition * 0.3}px)) scale(1.2)`;
+                    }
+                }, 16)
+            );
         }
-    }, 16) // ~60fps
-);
+    }
+}
 
-// Tilt effect for feature cards
 const tiltCards = document.querySelectorAll('.tilt-card');
 tiltCards.forEach(card => {
     card.addEventListener('mousemove', (e) => {
@@ -88,7 +93,6 @@ tiltCards.forEach(card => {
     });
 });
 
-// Cursor glow effect for buttons
 const buttons = document.querySelectorAll('.btn-minecraft');
 buttons.forEach(button => {
     button.addEventListener('mousemove', (e) => {
@@ -98,4 +102,40 @@ buttons.forEach(button => {
         button.style.setProperty('--x', `${x}px`);
         button.style.setProperty('--y', `${y}px`);
     });
+});
+
+// Hamburger Menu Toggle
+const hamburger = document.querySelector('.hamburger');
+const mobileNav = document.querySelector('[data-mobile-nav]');
+const navLinks = mobileNav.querySelectorAll('a');
+
+// Debounce function to prevent rapid clicks
+function debounce(fn, wait) {
+    let timeout;
+    return function (...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => fn.apply(this, args), wait);
+    };
+}
+
+hamburger.addEventListener('click', debounce(() => {
+    console.log('Hamburger clicked, toggling menu');
+    mobileNav.classList.toggle('active');
+    hamburger.classList.toggle('active');
+}, 100));
+
+navLinks.forEach(link => {
+    link.addEventListener('click', () => {
+        console.log('Nav link clicked, closing menu');
+        mobileNav.classList.remove('active');
+        hamburger.classList.remove('active');
+    });
+});
+
+document.addEventListener('click', (e) => {
+    if (!mobileNav.contains(e.target) && !hamburger.contains(e.target) && mobileNav.classList.contains('active')) {
+        console.log('Clicked outside, closing menu');
+        mobileNav.classList.remove('active');
+        hamburger.classList.remove('active');
+    }
 });
\ No newline at end of file
diff --git a/wiki/api/index.html b/wiki/api/index.html
index f5a48c2..817b835 100644
--- a/wiki/api/index.html
+++ b/wiki/api/index.html
@@ -7,7 +7,7 @@
     <title>My-MC.Link API Wiki</title>
     <link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
-    <link href="https://my-mc.link/css/style_min.css?p=5" rel="stylesheet">
+    <link href="https://my-mc.link/css/style.min.css?p=5" rel="stylesheet">
     <link href="https://my-mc.link/favicon.ico" rel="icon" type="image/x-icon">
     <!-- Prism.js for syntax highlighting -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet">
@@ -89,6 +89,25 @@
             transform: translateX(10px);
             background: rgba(255, 255, 255, 0.05);
         }
+        /* Ensure endpoint cards are visible */
+        .feature-card {
+            display: block !important;
+            opacity: 1 !important;
+            visibility: visible !important;
+            position: relative;
+            z-index: 10;
+            background: rgba(17, 24, 39, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        }
+        .tilt-card {
+            display: block !important;
+            opacity: 1 !important;
+            visibility: visible !important;
+            transform: none !important;
+        }
         @media (max-width: 640px) {
             .toc {
                 padding: 1rem;
@@ -108,21 +127,44 @@
 </head>
 
 <body>
+    <!-- Hamburger Menu Icon (visible on mobile) -->
+    <button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none" style="z-index: 99999; position: fixed; top: 1rem; right: 1rem; pointer-events: auto; background: transparent;">
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
+    </button>
+    <!-- Mobile Navigation Menu -->
+    <nav class="mobile-nav mobile-nav-container hidden fixed inset-0 flex-col items-center justify-center md:hidden" data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto; background: rgba(17, 24, 39, 0.98); backdrop-filter: blur(10px);">
+        <ul class="text-center">
+            <li class="mb-6">
+                <a href="https://panel.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Panel</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://stats.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">System Stats</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://status.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Check MC Status</a>
+            </li>
+        </ul>
+    </nav>
     <!-- Particle Effects -->
-    <div class="particle" style="left: 10%; top: 20%; animation-delay: 0s;"></div>
-    <div class="particle large" style="left: 30%; top: 50%; animation-delay: 2s;"></div>
-    <div class="particle" style="left: 50%; top: 30%; animation-delay: 4s;"></div>
-    <div class="particle large" style="left: 70%; top: 60%; animation-delay: 6s;"></div>
-    <div class="particle" style="left: 20%; top: 80%; animation-delay: 8s;"></div>
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
 
-    <header class="header-bg py-16 text-center relative z-10">
+    <header class="header-bg py-16 text-center relative z-1">
         <div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div>
                 <h1 class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
-                    <a href="https://info.my-mc.link/">My-MC.Link API Wiki</a></h1>
-                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Documentation for My-MC.Link REST API</p>
+                    My-MC.Link</h1>
+                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Futuristic Free Minecraft Hosting</p>
             </div>
-            <a href="https://my-mc.link" class="btn-minecraft text-base self-center" target="_blank">Home</a>
+            <!-- Navigation Buttons (hidden on mobile) -->
+            <nav class="flex items-center gap-2 hidden md:flex">
+                <a href="https://my-mc.link" class="nav-btn" target="_blank">Go Home</a>
+            </nav>
         </div>
     </header>
 
@@ -481,63 +523,60 @@ unirest
 }</code></pre>
                 </div>
 
-                                <!-- GET /status/{type} -->
-                                <div class="feature-card tilt-card">
-                                  <h3 id="get-status-type" class="text-xl minecraft-font mb-3 text-teal-400">GET /status/{type}</h3>
-                                  <p class="text-sm opacity-90 leading-relaxed mb-4">Retrieve the status and connection details for your server. Type can be 'Minecraft', 'Bedrock', or 'SFTP'.</p>
-                                  <div class="code-block-wrapper">
-                                      <pre class="language-javascript"><code>var unirest = require('unirest');
-              
-              const type = 'Minecraft'; // Can be 'Minecraft', 'Bedrock', or 'SFTP';
-              
-              unirest
-                .get(`https://api.my-mc.link/status/${type}`)
-                .headers({
-                  'Accept': 'application/json',
-                  'Content-Type': 'application/json',
-                  'x-my-mc-auth': 'TokenHere'
-                })
-                .then((response) => {
-                  if (response.body.success) {
-                    console.log('Connection Details:', response.body.connection);
-                    console.log('Status:', response.body.status);
-                  } else {
-                    console.error('Error:', response.body.message);
-                  }
-                })
-                .catch((err) => {
-                  console.error('Request Failed:', err.message);
-                });</code></pre>
-                                      <button class="copy-button" onclick="copyCode(this)">Copy</button>
-                                  </div>
-                                  <p class="text-sm opacity-90 leading-relaxed mt-4"><strong>Response:</strong></p>
-                                  <pre class="language-json"><code>{
-                success: true,
-                connection: {
-                  hostname: 'my-mc.link',
-                  port: '37505',
-                  connect: 'my-mc.link:37505'
-                },
-                status: {
-                  isOnline: true,
-                  data: {
-                    version: { name: {}, protocol: 770 },
-                    players: { max: 5, online: 0, sample: [] },
-                    motd: {
-                      raw: 'My Test Server',
-                      clean: 'My Test Server',
-                      html: '<span><span>My Test Server</span></span>'
-                    },
-                    favicon: null,
-                    srv_record: null,
-                    mods: null
-                  }
-                }
-              }</code></pre>
-                              </div>
-                          </div>
-                      </section>
-              
+                <!-- GET /status/{type} -->
+                <div class="feature-card tilt-card">
+                    <h3 id="get-status-type" class="text-xl minecraft-font mb-3 text-teal-400">GET /status/{type}</h3>
+                    <p class="text-sm opacity-90 leading-relaxed mb-4">Retrieve the status and connection details for your server. Type can be 'Minecraft', 'Bedrock', or 'SFTP'.</p>
+                    <div class="code-block-wrapper">
+                        <pre class="language-javascript"><code>var unirest = require('unirest');
+
+const type = 'Minecraft'; // Can be 'Minecraft', 'Bedrock', or 'SFTP';
+
+unirest
+  .get(`https://api.my-mc.link/status/${type}`)
+  .headers({
+    'Accept': 'application/json',
+    'Content-Type': 'application/json',
+    'x-my-mc-auth': 'TokenHere'
+  })
+  .then((response) => {
+    if (response.body.success) {
+      console.log('Connection Details:', response.body.connection);
+      console.log('Status:', response.body.status);
+    } else {
+      console.error('Error:', response.body.message);
+    }
+  })
+  .catch((err) => {
+    console.error('Request Failed:', err.message);
+  });</code></pre>
+                        <button class="copy-button" onclick="copyCode(this)">Copy</button>
+                    </div>
+                    <p class="text-sm opacity-90 leading-relaxed mt-4"><strong>Response:</strong></p>
+                    <pre class="language-json"><code>{
+  success: true,
+  connection: {
+    hostname: 'my-mc.link',
+    port: '37505',
+    connect: 'my-mc.link:37505'
+  },
+  status: {
+    isOnline: true,
+    data: {
+      version: { name: {}, protocol: 770 },
+      players: { max: 5, online: 0, sample: [] },
+      motd: {
+        raw: 'My Test Server',
+        clean: 'My Test Server',
+        html: '<span><span>My Test Server</span></span>'
+      },
+      favicon: null,
+      srv_record: null,
+      mods: null
+    }
+  }
+}</code></pre>
+                </div>
 
                 <!-- GET /list-players -->
                 <div class="feature-card tilt-card">
@@ -745,7 +784,7 @@ unirest
                     <p class="text-sm opacity-90 leading-relaxed mb-4">Give items to a specific user.</p>
                     <p class="text-sm opacity-90 leading-relaxed mb-2"><strong>Payload:</strong></p>
                     <div class="code-block-wrapper">
-                        <pre class="language-json"><code>{"username": "snxravenmc", item: "torch", amount: 1}</code></pre>
+                        <pre class="language-json"><code>{"username": "snxravenmc", "item": "torch", "amount": 1}</code></pre>
                         <button class="copy-button" onclick="copyCode(this)">Copy</button>
                     </div>
                     <div class="code-block-wrapper">
@@ -754,7 +793,7 @@ unirest
 unirest
   .post('https://api.my-mc.link/give')
   .headers({'Accept': 'application/json', 'Content-Type': 'application/json', 'x-my-mc-auth': 'TokenHere'})
-  .send({"username": "snxravenmc", item: "torch", amount: 1})
+  .send({"username": "snxravenmc", "item": "torch", "amount": 1})
   .then((response) => {
     console.log(response.body)
   })</code></pre>
@@ -907,6 +946,8 @@ unirest
   ]
 }</code></pre>
                 </div>
+            </div>
+        </section>
 
         <section id="explore-more" class="section-bg p-8 sm:p-10 text-center mb-12">
             <h2 class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
@@ -947,7 +988,44 @@ unirest
             });
         }
     </script>
-    <script src="../../mc/js/main.js"></script>
+    <!-- <script src="https://my-mc.link/js/main.js"></script> -->
+     <script>
+      // Hamburger Menu Toggle
+const hamburger = document.querySelector('.hamburger');
+const mobileNav = document.querySelector('[data-mobile-nav]');
+const navLinks = mobileNav.querySelectorAll('a');
+
+// Debounce function to prevent rapid clicks
+function debounce(fn, wait) {
+    let timeout;
+    return function (...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => fn.apply(this, args), wait);
+    };
+}
+
+hamburger.addEventListener('click', debounce(() => {
+    console.log('Hamburger clicked, toggling menu');
+    mobileNav.classList.toggle('active');
+    hamburger.classList.toggle('active');
+}, 100));
+
+navLinks.forEach(link => {
+    link.addEventListener('click', () => {
+        console.log('Nav link clicked, closing menu');
+        mobileNav.classList.remove('active');
+        hamburger.classList.remove('active');
+    });
+});
+
+document.addEventListener('click', (e) => {
+    if (!mobileNav.contains(e.target) && !hamburger.contains(e.target) && mobileNav.classList.contains('active')) {
+        console.log('Clicked outside, closing menu');
+        mobileNav.classList.remove('active');
+        hamburger.classList.remove('active');
+    }
+});
+     </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/wiki/index.html b/wiki/index.html
index f283e15..2c42721 100644
--- a/wiki/index.html
+++ b/wiki/index.html
@@ -7,7 +7,7 @@
     <title>My-MC.Link Wiki</title>
     <link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
-    <link href="https://my-mc.link/css/style_min.css?p=5" rel="stylesheet">
+    <link href="https://my-mc.link/css/style.min.css?p=5" rel="stylesheet">
     <link href="https://my-mc.link/favicon.ico" rel="icon" type="image/x-icon">
     <style>
         /* Table of Contents Styles */
@@ -75,17 +75,38 @@
     <div class="particle large" style="left: 70%; top: 60%; animation-delay: 6s;"></div>
     <div class="particle" style="left: 20%; top: 80%; animation-delay: 8s;"></div>
 
-    <header class="header-bg py-16 text-center relative z-10">
+    <header class="header-bg py-16 text-center relative z-1">
         <div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div>
-                <h1
-                    class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
-                    <a href="https://info.my-mc.link/">My-MC.Link Wiki</a></h1>
-
-                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Your Guide to Free Minecraft Hosting</p>
+                <h1 class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+                    My-MC.Link</h1>
+                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Futuristic Free Minecraft Hosting</p>
             </div>
-            <a href="https://my-mc.link" class="btn-minecraft text-base self-center" target="_blank">Home</a>
+            <!-- Hamburger Menu Icon (visible on mobile) -->
+            <button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none">
+                <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+                <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+                <span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
+            </button>
+            <!-- Navigation Buttons (hidden on mobile) -->
+            <nav class="flex items-center gap-2 hidden md:flex">
+                <a href="https://my-mc.link" class="nav-btn" target="_blank">Go Home</a>
+            </nav>
         </div>
+        <!-- Mobile Navigation Menu -->
+        <nav class="mobile-nav mobile-nav-container hidden fixed inset-0 bg-gray-900/98 backdrop-filter backdrop-blur-xl z-50 flex-col items-center justify-center md:hidden" data-mobile-nav>
+            <ul class="text-center">
+                <li class="mb-6">
+                    <a href="https://panel.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Panel</a>
+                </li>
+                <li class="mb-6">
+                    <a href="https://stats.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">System Stats</a>
+                </li>
+                <li class="mb-6">
+                    <a href="https://status.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Check MC Status</a>
+                </li>
+            </ul>
+        </nav>
     </header>
 
     <!-- Table of Contents -->
@@ -96,6 +117,7 @@
             <li><a href="#limitations">Limitations</a></li>
             <li><a href="#getting-started">Getting Started</a></li>
             <li><a href="#connecting-to-your-server">Connecting to Your Server</a></li>
+            <li><a href="https://status.my-mc.link/" target="_blank">My-MC Server Status Checker</a></li>
             <li><a href="#geyser-support">Geyser Support</a></li>
             <li><a href="#mod-management">Mod Management</a></li>
             <li><a href="#remote-console-access">Remote Console Access</a></li>
diff --git a/wiki/mymc-java/index.html b/wiki/mymc-java/index.html
index d6a7026..45a225a 100644
--- a/wiki/mymc-java/index.html
+++ b/wiki/mymc-java/index.html
@@ -7,7 +7,7 @@
     <title>MyMCLib Library Documentation</title>
     <link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
-    <link href="https://my-mc.link/css/style_min.css?p=5" rel="stylesheet">
+    <link href="https://my-mc.link/css/style.min.css?p=5" rel="stylesheet">
     <link href="https://my-mc.link/favicon.ico" rel="icon" type="image/x-icon">
     <!-- Prism.js for syntax highlighting -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet">
@@ -99,21 +99,44 @@
 </head>
 
 <body>
+    <!-- Hamburger Menu Icon (visible on mobile) -->
+    <button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none" style="z-index: 99999; position: fixed; top: 1rem; right: 1rem; pointer-events: auto; background: transparent;">
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
+    </button>
+    <!-- Mobile Navigation Menu -->
+    <nav class="mobile-nav mobile-nav-container hidden fixed inset-0 flex-col items-center justify-center md:hidden" data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto; background: rgba(17, 24, 39, 0.98); backdrop-filter: blur(10px);">
+        <ul class="text-center">
+            <li class="mb-6">
+                <a href="https://panel.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Panel</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://stats.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">System Stats</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://status.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Check MC Status</a>
+            </li>
+        </ul>
+    </nav>
     <!-- Particle Effects -->
-    <div class="particle" style="left: 10%; top: 20%; animation-delay: 0s;"></div>
-    <div class="particle large" style="left: 30%; top: 50%; animation-delay: 2s;"></div>
-    <div class="particle" style="left: 50%; top: 30%; animation-delay: 4s;"></div>
-    <div class="particle large" style="left: 70%; top: 60%; animation-delay: 6s;"></div>
-    <div class="particle" style="left: 20%; top: 80%; animation-delay: 8s;"></div>
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
 
-    <header class="header-bg py-16 text-center relative z-10">
+    <header class="header-bg py-16 text-center relative z-1">
         <div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div>
                 <h1 class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
-                    <a href="https://info.my-mc.link/">MyMCLib Library Documentation</a></h1>
-                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Java Library for My-MC.Link API</p>
+                    My-MC.Link</h1>
+                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Futuristic Free Minecraft Hosting</p>
             </div>
-            <a href="https://my-mc.link" class="btn-minecraft text-base self-center" target="_blank">Home</a>
+            <!-- Navigation Buttons (hidden on mobile) -->
+            <nav class="flex items-center gap-2 hidden md:flex">
+                <a href="https://my-mc.link" class="nav-btn" target="_blank">Go Home</a>
+            </nav>
         </div>
     </header>
 
@@ -170,11 +193,11 @@
                 To use the <code class="bg-gray-800 text-teal-400 px-1 rounded">MyMCLib</code> library in your project, install it via Maven:
             </p>
             <div class="code-block-wrapper">
-                <pre class="language-xml"><code>&lt;dependency&gt;
-    &lt;groupId&gt;io.github.mrmasrozytlive&lt;/groupId&gt;
-    &lt;artifactId&gt;mymc-java-lib&lt;/artifactId&gt;
-    &lt;version&gt;1.2.0&lt;/version&gt;
-&lt;/dependency&gt;</code></pre>
+                <pre class="language-xml"><code><dependency>
+    <groupId>io.github.mrmasrozytlive</groupId>
+    <artifactId>mymc-java-lib</artifactId>
+    <version>1.2.0</version>
+</dependency></code></pre>
                 <button class="copy-button" onclick="copyCode(this)">Copy</button>
             </div>
             <p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
@@ -223,7 +246,7 @@ public class YourClass {
             <p class="text-sm opacity-90 leading-relaxed mt-4"><strong>Output:</strong></p>
             <div class="code-block-wrapper">
                 <pre class="language-json"><code>{
-  success: true,
+ (success: true,
   keyexpireString: 'Tue Apr 15 2025 06:14:59 GMT-0400 (Eastern Daylight Time)',
   expireDate: '2025-04-15T10:14:59.000Z',
   expireEpoch: 1744712099000
diff --git a/wiki/mymc-lib/index.html b/wiki/mymc-lib/index.html
index 8ba94fe..2a41427 100644
--- a/wiki/mymc-lib/index.html
+++ b/wiki/mymc-lib/index.html
@@ -7,7 +7,7 @@
     <title>MyMCLib Library Documentation</title>
     <link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
-    <link href="https://my-mc.link/css/style_min.css?p=5" rel="stylesheet">
+    <link href="https://my-mc.link/css/style.min.css?p=5" rel="stylesheet">
     <link href="https://my-mc.link/favicon.ico" rel="icon" type="image/x-icon">
     <!-- Prism.js for syntax highlighting -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet">
@@ -83,6 +83,25 @@
             transform: translateX(10px);
             background: rgba(255, 255, 255, 0.05);
         }
+        /* Ensure code example cards are visible */
+        .feature-card {
+            display: block !important;
+            opacity: 1 !important;
+            visibility: visible !important;
+            position: relative;
+            z-index: 10;
+            background: rgba(17, 24, 39, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        }
+        .tilt-card {
+            display: block !important;
+            opacity: 1 !important;
+            visibility: visible !important;
+            transform: none !important;
+        }
         @media (max-width: 640px) {
             .toc {
                 padding: 1rem;
@@ -99,21 +118,44 @@
 </head>
 
 <body>
+    <!-- Hamburger Menu Icon (visible on mobile) -->
+    <button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none" style="z-index: 99999; position: fixed; top: 1rem; right: 1rem; pointer-events: auto; background: transparent;">
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
+    </button>
+    <!-- Mobile Navigation Menu -->
+    <nav class="mobile-nav mobile-nav-container hidden fixed inset-0 flex-col items-center justify-center md:hidden" data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto; background: rgba(17, 24, 39, 0.98); backdrop-filter: blur(10px);">
+        <ul class="text-center">
+            <li class="mb-6">
+                <a href="https://panel.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Panel</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://stats.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">System Stats</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://status.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Check MC Status</a>
+            </li>
+        </ul>
+    </nav>
     <!-- Particle Effects -->
-    <div class="particle" style="left: 10%; top: 20%; animation-delay: 0s;"></div>
-    <div class="particle large" style="left: 30%; top: 50%; animation-delay: 2s;"></div>
-    <div class="particle" style="left: 50%; top: 30%; animation-delay: 4s;"></div>
-    <div class="particle large" style="left: 70%; top: 60%; animation-delay: 6s;"></div>
-    <div class="particle" style="left: 20%; top: 80%; animation-delay: 8s;"></div>
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
 
-    <header class="header-bg py-16 text-center relative z-10">
+    <header class="header-bg py-16 text-center relative z-1">
         <div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div>
                 <h1 class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
-                    <a href="https://info.my-mc.link/"> MyMCLib Library Documentation</a></h1>
-                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">A JavaScript library for interacting with the My-MC.Link API</p>
+                    My-MC.Link</h1>
+                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Futuristic Free Minecraft Hosting</p>
             </div>
-            <a href="https://my-mc.link" class="btn-minecraft text-base self-center" target="_blank">Home</a>
+            <!-- Navigation Buttons (hidden on mobile) -->
+            <nav class="flex items-center gap-2 hidden md:flex">
+                <a href="https://my-mc.link" class="nav-btn" target="_blank">Go Home</a>
+            </nav>
         </div>
     </header>
 
@@ -571,7 +613,7 @@ console.log(installedMods);</code></pre>
             });
         }
     </script>
-    <script src="../../mc/js/main.js"></script>
+    <script src="https://my-mc.link/js/main.js"></script>
 </body>
 
 </html>
\ No newline at end of file