fix(hero-abacus): restructure layout to prevent visual overlap

Problem: Title, subtitle, and scaled abacus were stacking too tightly,
creating visual overlap and a messy appearance.

Solution: Reorganize with space-between flexbox layout:
- Group title + subtitle together at top with compact spacing
- Give abacus its own centered flex container with generous padding
- Separate scroll hint at bottom
- Use vertical padding and flex: 1 to ensure proper spacing

This creates clear visual separation between all sections.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/components/HeroAbacus.tsx

@@ -89,10 +89,20 @@ export function HeroAbacus() {
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          gap: '8',
+          justifyContent: 'space-between',
+          height: '100%',
+          py: '12',
+        })}
+      >
+        {/* Title and Subtitle Section */}
+        <div
+          className={css({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '4',
           })}
         >
-        {/* Title */}
           <h1
             className={css({
               fontSize: { base: '4xl', md: '6xl', lg: '7xl' },
@@ -100,36 +110,38 @@ export function HeroAbacus() {
               background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
               backgroundClip: 'text',
               color: 'transparent',
-            mb: '4',
             })}
           >
             Abaci One
           </h1>
-
-        {/* Subtitle */}
           <p
             className={css({
               fontSize: { base: 'xl', md: '2xl' },
               fontWeight: 'medium',
               color: 'purple.300',
               fontStyle: 'italic',
-            mb: '16',
-            zIndex: 10,
-            position: 'relative',
             })}
           >
             {subtitle.text}
           </p>
+        </div>
 
-        {/* Large Interactive Abacus */}
+        {/* Large Interactive Abacus - centered in remaining space */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: '1',
+            width: '100%',
+            py: { base: '12', md: '16', lg: '20' },
+          })}
+        >
           <div
             className={css({
               transform: { base: 'scale(2)', md: 'scale(3)', lg: 'scale(4)' },
               transformOrigin: 'center center',
-            mb: { base: '12', md: '16', lg: '20' },
               transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
-            position: 'relative',
-            zIndex: 1,
             })}
           >
             <AbacusReact
@@ -140,6 +152,7 @@ export function HeroAbacus() {
               customStyles={darkStyles}
             />
           </div>
+        </div>
 
         {/* Subtle hint to scroll */}
         <div