Redesign splash screen for better mobile experience

- Created new splash-mobile.css with mobile-optimized styles
- Redesigned hero section with better mobile typography and spacing
- Optimized feature cards to stack properly on mobile
- Enhanced CTA buttons with proper touch targets (min 48px height)
- Improved animations and performance for mobile devices
- Added landscape mobile layout support
- Simplified backgrounds and animations for better performance
- Better responsive typography using clamp() for fluid scaling
- Added touch device optimizations

templates/index.html

@@ -70,8 +70,12 @@
             <h1 class="hero-title">Transform Your Productivity</h1>
             <p class="hero-subtitle">Experience the future of time management with {{ g.branding.app_name if g.branding else 'TimeTrack' }}'s intelligent tracking system</p>
             <div class="cta-buttons">
-                <a href="{{ url_for('register') }}" class="btn-primary">Get Started Free</a>
-                <a href="{{ url_for('login') }}" class="btn-secondary">Sign In</a>
+                <a href="{{ url_for('register') }}" class="btn-primary">
+                    <span>Get Started Free</span>
+                </a>
+                <a href="{{ url_for('login') }}" class="btn-secondary">
+                    <span>Sign In</span>
+                </a>
             </div>
         </div>
         <div class="hero-visual">

templates/layout.html

@@ -50,6 +50,7 @@
     {% endif %}
     {% if not g.user %}
     <link rel="stylesheet" href="{{ url_for('static', filename='css/splash.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/splash-mobile.css') }}">
     {% endif %}
     {% if g.branding and g.branding.favicon_filename %}
         <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='uploads/branding/' + g.branding.favicon_filename) }}">