diff --git a/css/style.css b/css/style.css
index 9080767..9618d4a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -316,15 +316,15 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: calc(var(--nav-height) + 40px + 2rem) 2rem 2rem;
+    padding: calc(var(--nav-height) + 40px + 2rem) 1rem 2rem;
     position: relative;
 }
 
 .hero-hud-grid {
     width: 100%;
-    max-width: 1400px;
+    max-width: 96vw;
     display: grid;
-    grid-template-columns: 320px 1fr 380px;
+    grid-template-columns: 400px 1fr 420px;
     grid-template-rows: auto;
     gap: 1.5rem;
     align-items: start;
@@ -1531,7 +1531,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
 
 /* === RESPONSIVE === */
 @media (max-width: 1024px) {
-    .hero-hud-grid { grid-template-columns: 280px 1fr 340px; gap: 1rem; max-width: 1000px; }
+    .hero-hud-grid { grid-template-columns: 340px 1fr 360px; gap: 1rem; max-width: 96vw; }
     .blog-grid, .dev-grid { grid-template-columns: repeat(2, 1fr); }
     .panels-grid { grid-template-columns: 1fr; }
     .contact-grid { grid-template-columns: 1fr; }