diff --git a/css/global.css b/css/global.css
index 94c7e0b..5438667 100644
--- a/css/global.css
+++ b/css/global.css
@@ -827,10 +827,13 @@ position: relative;
 }
 
 /* =========================
- *  2. BASE SCALE SYSTEM (1920 reference)
+ *  2. SCALE SYSTEM (1920 LOCKED)
+ *  - 1920 = 1
+ *  - smaller screens = <1
+ *  - larger screens = >1
  = *======================== */
 :root {
-  --banner-scale: calc(100vw / 1920);
+  --scale: clamp(0.6, calc(100vw / 1920), 1.4);
 }
 
 /* =========================
@@ -842,11 +845,8 @@ position: relative;
   top: 50%;
   transform: translateY(-50%);
 
-  /* Base size at 1920px */
-  width: calc(320px * var(--banner-scale));
-  max-width: 380px;
-  min-width: 140px;
-
+  /* IMPORTANT: base size = your original design */
+  width: calc(320px * var(--scale));
   aspect-ratio: 383 / 626;
 
   background-size: contain;
@@ -860,20 +860,21 @@ position: relative;
 }
 
 /* =========================
- *  4. Positioning (also scaled from 1920 reference)
+ *  4. Positioning (NO scaling math here)
+ *  This keeps them EXACTLY where they “started”
  = *======================== */
 .left_banner {
-  left: calc(((100vw - 980px) / 2) - (360px * var(--banner-scale)));
+  left: calc((100vw - 980px) / 2 - 360px);
   background-image: url("https://www.veltron.net/images/dragon.png");
 }
 
 .right_banner {
-  right: calc(((100vw - 980px) / 2) - (360px * var(--banner-scale)));
+  right: calc((100vw - 980px) / 2 - 360px);
   background-image: url("https://www.veltron.net/images/digimon.png");
 }
 
 /* =========================
- *  5. Float animation
+ *  5. Float animation (FIXED transform layering)
  = *======================== */
 @keyframes float {
   0% {
@@ -888,7 +889,7 @@ position: relative;
 }
 
 /* =========================
- *  6. Tablet safety fallback
+ *  6. Tablet safety
  = *======================== */
 @media (max-width: 1100px) {
   .left_banner,