feat: mobile layout - hide Learn More button, show Mainnet card after hero

Mobile users now see ChainSpecs (Mainnet card) right below the hero
section instead of scrolling far down. "Learn More" button hidden on
mobile since Mainnet card replaces its function.

web/src/components/AppLayout.tsx

@@ -548,15 +548,20 @@ const AppLayout: React.FC = () => {
         ) : (
           <>
             <HeroSection />
+            {/* ChainSpecs (Mainnet card) - show right after hero on mobile */}
+            <div id="chain-specs" className="block sm:hidden">
+              <ChainSpecs />
+            </div>
             <NetworkStats key="network-stats-live" />
             <PalletsGrid />
             <TokenomicsSection />
-            
-            
+
+
             <div id="trust-calculator">
               <TrustScoreCalculator />
             </div>
-            <div id="chain-specs">
+            {/* ChainSpecs - original position for desktop */}
+            <div id="chain-specs-desktop" className="hidden sm:block">
               <ChainSpecs />
             </div>
             <div id="governance">

web/src/components/HeroSection.tsx

@@ -156,7 +156,7 @@ const HeroSection: React.FC = () => {
           </button>
           <button
             onClick={() => document.getElementById('governance')?.scrollIntoView({ behavior: 'smooth' })}
-            className="px-5 py-3 sm:px-8 sm:py-4 bg-gray-900/80 backdrop-blur-sm text-white font-semibold rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-gray-600 transition-all"
+            className="hidden sm:inline-flex px-5 py-3 sm:px-8 sm:py-4 bg-gray-900/80 backdrop-blur-sm text-white font-semibold rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-gray-600 transition-all"
           >
             {t('hero.learnMore', 'Learn More')}
           </button>