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