Fix alignment, restore sticky menu, and fix 3D logo effect

script.js

@@ -11,17 +11,15 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
 
     // Logo 3D effect on mousemove
-    const logo = document.querySelector('.logo');
-    const hero = document.querySelector('.hero');
+    const logo = document.querySelector('.logo-small');
 
-    if(window.matchMedia("(pointer: fine)").matches) {
-        hero.addEventListener('mousemove', (e) => {
-            const rect = hero.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
+    if(logo && window.matchMedia("(pointer: fine)").matches) {
+        document.addEventListener('mousemove', (e) => {
+            const x = e.clientX;
+            const y = e.clientY;
             
-            const centerX = rect.width / 2;
-            const centerY = rect.height / 2;
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight / 2;
             
             // Calculate rotation (inverted for natural feel)
             const rotateX = ((y - centerY) / centerY) * -15;
@@ -30,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
             logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
         });
 
-        hero.addEventListener('mouseleave', () => {
+        document.addEventListener('mouseleave', () => {
             logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`;
         });
     }

styles.css

@@ -87,6 +87,7 @@ body {
     .page-layout {
         flex-direction: row;
         justify-content: center;
+        align-items: flex-start;
     }
 }
 
@@ -120,8 +121,6 @@ body {
 .hero {
     text-align: center;
     position: relative;
-    overflow: hidden;
-    padding-top: 2rem;
     padding-bottom: 4rem;
 }
 
@@ -296,13 +295,10 @@ p {
     height: fit-content;
     width: 100%;
     z-index: 100;
-    padding: 2rem;
     border-radius: 24px;
     display: flex;
     flex-direction: column;
     gap: 2rem;
-    position: relative;
-    overflow: hidden;
 }
 
 .sidebar::before {
@@ -311,6 +307,8 @@ p {
     top: 0; left: 0; right: 0; height: 3px;
     background: linear-gradient(90deg, transparent, var(--accent-green), var(--accent-blue), transparent);
     z-index: 1;
+    border-top-left-radius: 24px;
+    border-top-right-radius: 24px;
 }
 
 @media(min-width: 900px) {