diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index d7622eb300..b7c486d005 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -81,7 +81,7 @@
             <enhanced:img src="./blur-2.png" alt="" />
         </div>
 
-        <section class="aw-hero is-align-start u-position-relative">
+        <section class="aw-hero is-align-start u-position-relative e-hero-docs">
             <h1 class="aw-display aw-u-color-text-primary u-max-width-600">
                 Learn how to build like a team of hundreds<span class="aw-u-color-text-accent"
                     >_
@@ -104,12 +104,11 @@
             <a href="/docs/sdks" class="aw-button is-secondary" style:align-self="start">
                 <span class="aw-sub-body-500">Explore all technologies</span>
             </a>
-
             <div class="u-position-absolute aw-is-not-mobile spline-wrapper">
                 <Spline url="/images/animations/dark-scene.splinecode" width={660} height={660}>
                     <img
                         class="u-only-dark"
-                        src="/images/animations/tech-dark.png"
+                        src="/images/animations/tech-dark-transparent.png"
                         width="660"
                         height="660"
                         alt=""
@@ -117,7 +116,7 @@
                     />
                     <img
                         class="u-only-light"
-                        src="/images/animations/tech-light.png"
+                        src="/images/animations/tech-light-transparent.png"
                         width="660"
                         height="660"
                         alt=""
@@ -408,6 +407,12 @@
 </Docs>
 
 <style lang="scss">
+
+    .e-hero-docs {
+      @media (min-width:1280px) {
+        margin-block-start:5rem;
+      }
+    }
     .aw-main-section {
         max-inline-size: unset;
         margin-inline: unset;
diff --git a/src/scss/9-grids/_grid-side-nav.scss b/src/scss/9-grids/_grid-side-nav.scss
index 86a6e08377..947e886ea9 100644
--- a/src/scss/9-grids/_grid-side-nav.scss
+++ b/src/scss/9-grids/_grid-side-nav.scss
@@ -33,7 +33,7 @@
       .#{$p}-hero:first-child {
         margin-block-start:pxToRem(100); margin-block-end:pxToRem(80);
       }
-      > *:not(:first-child) { margin-block-start:pxToRem(160); }
+      > *:not(:first-child):where(:not(.u-position-absolute)) { margin-block-start:pxToRem(160); }
     }
   }
   @media #{$break3open} {
diff --git a/static/images/animations/tech-dark-transparent.png b/static/images/animations/tech-dark-transparent.png
new file mode 100644
index 0000000000..b75d81f23a
Binary files /dev/null and b/static/images/animations/tech-dark-transparent.png differ
diff --git a/static/images/animations/tech-dark.png b/static/images/animations/tech-dark.png
index 9a7de2fd32..af2b4b7ffd 100644
Binary files a/static/images/animations/tech-dark.png and b/static/images/animations/tech-dark.png differ
diff --git a/static/images/animations/tech-light-transparent.png b/static/images/animations/tech-light-transparent.png
new file mode 100644
index 0000000000..f82045b8d5
Binary files /dev/null and b/static/images/animations/tech-light-transparent.png differ
diff --git a/static/images/animations/tech-light.png b/static/images/animations/tech-light.png
index 4c5fc28d56..0e4bb67539 100644
Binary files a/static/images/animations/tech-light.png and b/static/images/animations/tech-light.png differ
diff --git a/static/images/bgs/diagonal-lines.png b/static/images/bgs/diagonal-lines.png
index a99fd33580..75d538f8c3 100644
Binary files a/static/images/bgs/diagonal-lines.png and b/static/images/bgs/diagonal-lines.png differ