diff --git a/docs/assets/banner3m.png b/docs/assets/banner3m.png
new file mode 100644
index 0000000..226bf45
Binary files /dev/null and b/docs/assets/banner3m.png differ
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 5827a98..9175929 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -49,13 +49,12 @@ body:not(.has-hero) .md-content__inner {
   margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw);
   
-  /* Background setup */
+/* DEFAULT (DESKTOP) BACKGROUND */
   background:
     linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
     url('../assets/banner3.png') no-repeat center center;
   background-size: cover;
-  background-attachment: fixed; /* Optional: parallax effect */
-
+  background-attachment: fixed;
   /* Content centering */
   display: flex;
   flex-direction: column;
@@ -214,6 +213,11 @@ body:not(.has-hero) .md-content__inner {
 @media screen and (max-width: 76.25em) {
   .hero-banner {
     min-height: 70vh;
+    /* MOBILE BACKGROUND - Override the desktop image */
+    background-image: 
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
+      url('../assets/banner3m.png');
+    background-attachment: scroll; /* Disable parallax on mobile for performance */
   }
 
   body:not(.has-hero) .md-content__inner {