feat: update overlay positioning and styles for improved CTA visibility

src/app/configure/page.tsx

@@ -12,7 +12,7 @@ export default function ConfigurePage() {
         style={{
           position: 'fixed',
           top: '1rem',
-          left: '1rem',
+          right: '1rem',
           zIndex: 100,
           display: 'inline-flex',
           alignItems: 'center',

src/app/globals.css

@@ -468,6 +468,16 @@ html {
   .overlay-scroll-hint {
     bottom: 1.5rem !important;
   }
+
+  .overlay-cta-section {
+    bottom: 3vh !important;
+    top: auto !important;
+  }
+
+  .overlay-cta-btn {
+    padding: 0.85rem 2rem !important;
+    font-size: 0.85rem !important;
+  }
 }
 
 /* Small phones */

src/components/ScrollOverlays.tsx

@@ -126,7 +126,7 @@ const SECTION_CONFIGS = [
   { id: 'hero', startAt: 0.10, peakAt: 0.22, endAt: 0.35, align: 'left' as const, verticalAlign: 'center' as const },
   { id: 'headReveal', startAt: 0.35, peakAt: 0.46, endAt: 0.53, align: 'right' as const, verticalAlign: 'center' as const },
   { id: 'customization', startAt: 0.55, peakAt: 0.66, endAt: 0.77, align: 'left' as const, verticalAlign: 'center' as const },
-  { id: 'mobility', startAt: 0.80, peakAt: 0.90, endAt: 1.0, align: 'right' as const, verticalAlign: 'center' as const },
+  { id: 'mobility', startAt: 0.75, peakAt: 0.82, endAt: 0.90, align: 'right' as const, verticalAlign: 'center' as const },
 ];
 
 export function ScrollOverlays() {
@@ -255,49 +255,46 @@ export function ScrollOverlays() {
       </OverlaySection>
 
       {/* Configure CTA — appears at the very end of scroll */}
-      <motion.div
+      <OverlaySection
-        style={{
+        progress={scrollYProgress}
-          position: 'absolute',
+        startAt={0.90}
-          bottom: '8vh',
+        peakAt={0.95}
-          left: '50%',
+        endAt={1.0}
-          transform: 'translateX(-50%)',
+        align="center"
-          display: 'flex',
+        verticalAlign="center"
-          flexDirection: 'column',
+        className="overlay-cta-section"
-          alignItems: 'center',
-          gap: '1rem',
-          opacity: useTransform(scrollYProgress, [0.88, 0.95], [0, 1]),
-          pointerEvents: 'auto',
-          zIndex: 20,
-        }}
       >
-        <Link
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.75rem', pointerEvents: 'auto' }}>
-          href="/configure/"
+          <Link
-          style={{
+            href="/configure/"
-            display: 'inline-flex',
+            className="overlay-cta-btn"
-            alignItems: 'center',
+            style={{
-            gap: '0.75rem',
+              display: 'inline-flex',
-            padding: '1rem 2.5rem',
+              alignItems: 'center',
-            borderRadius: '3rem',
+              gap: '0.75rem',
-            background: 'linear-gradient(135deg, #c4a265, #d4b47a)',
+              padding: '1rem 2.5rem',
-            color: '#ffffff',
+              borderRadius: '3rem',
-            fontSize: '0.95rem',
+              background: 'linear-gradient(135deg, #c4a265, #d4b47a)',
-            fontWeight: 600,
+              color: '#ffffff',
-            letterSpacing: '0.1em',
+              fontSize: '0.95rem',
-            textTransform: 'uppercase',
+              fontWeight: 600,
-            textDecoration: 'none',
+              letterSpacing: '0.1em',
-            boxShadow: '0 8px 32px rgba(196, 162, 101, 0.3)',
+              textTransform: 'uppercase',
-            transition: 'all 0.3s ease',
+              textDecoration: 'none',
-          }}
+              boxShadow: '0 8px 32px rgba(196, 162, 101, 0.3)',
-        >
+              transition: 'all 0.3s ease',
-          Configure Your G1
+            }}
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          >
-            <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
+            Configure Your G1
-          </svg>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        </Link>
+              <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
-        <span style={{ fontSize: '0.7rem', color: '#94a3b8', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
+            </svg>
-          Build &amp; Order Your Robot
+          </Link>
-        </span>
+          <span style={{ fontSize: '0.7rem', color: '#94a3b8', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
-      </motion.div>
+            Build &amp; Order Your Robot
+          </span>
+        </div>
+      </OverlaySection>
 
       {/* Scroll indicator mapped to vanish rapidly when scrolled */}
       <motion.div