fix(homepage): improve hero abacus sizing and layout

Improvements:
- Increase hero abacus size: 2x→3x→4x scale for mobile/tablet/desktop
- Add better spacing between subtitle and abacus (mb: 16)
- Add z-index layering to prevent subtitle/abacus overlap
- Fix nav layout issue by adding spacer div when branding is hidden
- Remove emoji from hero title (redundant with actual abacus)

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

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

apps/web/src/components/AppNavBar.tsx

@@ -579,7 +579,7 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
         <div className={container({ maxW: '7xl', px: '4', py: '3' })}>
           <div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
             {/* Logo - conditionally shown based on hero visibility */}
-            {showBranding && (
+            {showBranding ? (
               <Link
                 href="/"
                 className={css({
@@ -643,6 +643,8 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                   </Tooltip.Portal>
                 </Tooltip.Root>
               </Link>
+            ) : (
+              <div />
             )}
 
             <div className={hstack({ gap: '6', alignItems: 'center' })}>

apps/web/src/components/HeroAbacus.tsx

@@ -86,10 +86,10 @@ export function HeroAbacus() {
             background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
             backgroundClip: 'text',
             color: 'transparent',
-            mb: '2',
+            mb: '4',
           })}
         >
-          🧮 Abaci One
+          Abaci One
         </h1>
 
         {/* Subtitle */}
@@ -99,7 +99,9 @@ export function HeroAbacus() {
             fontWeight: 'medium',
             color: 'purple.300',
             fontStyle: 'italic',
-            mb: '8',
+            mb: '16',
+            zIndex: 10,
+            position: 'relative',
           })}
         >
           {subtitle.text}
@@ -108,10 +110,12 @@ export function HeroAbacus() {
         {/* Large Interactive Abacus */}
         <div
           className={css({
-            transform: { base: 'scale(1.5)', md: 'scale(2)', lg: 'scale(2.5)' },
+            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