<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    
    <!-- Security Headers -->
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Mobility Age — How Old Does Your Body Move? Free 60-Second Test</title>
    <meta name="description" content="Find out how old your body moves. A free 60-second test scores your mobility age from 4 quick phone photos against peer-reviewed clinical norms." />
    <link rel="canonical" href="https://mobilityage.co.uk/landing" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1" />
    <meta name="author" content="Mobility Age (Morfit Innovation)" />
    <meta name="keywords" content="mobility age, mobility age test, how old does my body move, movement age test, mobility assessment, flexibility test online, joint mobility test, functional movement screening, mobility test at home, metabolic age vs mobility age, healthy ageing, healthspan, longevity, UK" />

    <!-- Open Graph (static so link previews and AI crawlers work without JS) -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Mobility Age" />
    <meta property="og:title" content="Mobility Age — How Old Does Your Body Move?" />
    <meta property="og:description" content="A free 60-second test reveals if your body moves like someone younger or older than your actual age. Four simple phone photos, scored against peer-reviewed clinical norms." />
    <meta property="og:url" content="https://mobilityage.co.uk/landing" />
    <meta property="og:image" content="https://mobilityage.co.uk/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Mobility Age — how old does your body move? A free 60-second test." />
    <meta property="og:locale" content="en_GB" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Mobility Age — What's Your Body's True Age?" />
    <meta name="twitter:description" content="A free 60-second test reveals your mobility age. For everyone, not just athletes." />
    <meta name="twitter:image" content="https://mobilityage.co.uk/og-image.png" />

    <!-- Structured data (static): describes Mobility Age to search and AI answer engines -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "Organization",
          "@id": "https://mobilityage.co.uk/#organization",
          "name": "Mobility Age",
          "alternateName": "Morfit Innovation",
          "url": "https://mobilityage.co.uk",
          "logo": "https://mobilityage.co.uk/icons/512.png",
          "email": "josh@mobilityage.co.uk",
          "description": "Mobility Age calculates how old your body moves from four short phone-camera pose tests, scored against peer-reviewed clinical norms."
        },
        {
          "@type": "WebSite",
          "@id": "https://mobilityage.co.uk/#website",
          "url": "https://mobilityage.co.uk",
          "name": "Mobility Age",
          "publisher": { "@id": "https://mobilityage.co.uk/#organization" },
          "inLanguage": "en-GB"
        },
        {
          "@type": "WebApplication",
          "@id": "https://mobilityage.co.uk/#webapp",
          "name": "Mobility Age",
          "url": "https://mobilityage.co.uk",
          "applicationCategory": "HealthApplication",
          "operatingSystem": "Web browser (Progressive Web App)",
          "browserRequirements": "Requires a modern browser with a camera; no app store download needed.",
          "description": "A free web app that measures how old your body moves. Take four simple poses with your phone camera and get your mobility age, a joint-by-joint breakdown, and personalised exercises, all scored against peer-reviewed clinical norms.",
          "offers": [
            { "@type": "Offer", "price": "0", "priceCurrency": "GBP", "description": "Free mobility assessment" },
            { "@type": "Offer", "price": "3.99", "priceCurrency": "GBP", "description": "Premium monthly: progress tracking, detailed analytics and personalised exercises (7-day free trial)" },
            { "@type": "Offer", "price": "30", "priceCurrency": "GBP", "description": "Premium annual" }
          ],
          "publisher": { "@id": "https://mobilityage.co.uk/#organization" }
        },
        {
          "@type": "FAQPage",
          "@id": "https://mobilityage.co.uk/#faq",
          "mainEntity": [
            {
              "@type": "Question",
              "name": "What is mobility age?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Your mobility age is the age your movement patterns most resemble, based on joint range of motion and movement quality. If you are 35 but move like a typical 45-year-old, your mobility age is 45. It is calculated by measuring joint angles and reach distances from photos of four standardised poses and comparing them against age-stratified clinical reference data."
              }
            },
            {
              "@type": "Question",
              "name": "How do I test my mobility age at home?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Use the free Mobility Age web app on your phone. You take four photos of simple poses (deep squat, forward fold, overhead reach, and weight-bearing lunge), which takes about 60 seconds. AI measures the relevant joint angles and gives you your mobility age with a joint-by-joint breakdown. No equipment or app store download is needed."
              }
            },
            {
              "@type": "Question",
              "name": "Is the mobility age test free?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Yes. The assessment is completely free with no credit card required. Premium, which adds progress tracking, detailed analytics and personalised exercises, is £3.99/month or £30/year with a 7-day free trial."
              }
            },
            {
              "@type": "Question",
              "name": "Do I need to be fit or flexible to use it?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "No. Mobility Age is designed for ordinary people, not just athletes or yoga practitioners. Whether you are stiff from desk work or just starting to think about your health, the test meets you where you are."
              }
            },
            {
              "@type": "Question",
              "name": "What is the difference between flexibility and mobility?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Flexibility is how far a muscle can passively stretch. Mobility is how well you can actively control a joint through its range of motion. Mobility matters more for healthy ageing and everyday function, which is why Mobility Age scores movement quality rather than stretch alone."
              }
            }
          ]
        },
        {
          "@type": "HowTo",
          "@id": "https://mobilityage.co.uk/#howto",
          "name": "How to find out your mobility age",
          "image": "https://mobilityage.co.uk/og-image.png",
          "totalTime": "PT1M",
          "step": [
            { "@type": "HowToStep", "position": 1, "name": "Take four photos", "text": "Photograph four simple poses with your phone: a deep squat, forward fold, overhead reach and weight-bearing lunge." },
            { "@type": "HowToStep", "position": 2, "name": "Get your score", "text": "AI measures your joint angles and distances and matches them to age-specific clinical norms to calculate your mobility age." },
            { "@type": "HowToStep", "position": 3, "name": "Improve over time", "text": "Follow personalised exercises and re-test to track how your mobility age changes." }
          ]
        }
      ]
    }
    </script>

    <!-- Preconnect to external domains for faster model loading -->
    <link rel="preconnect" href="https://www.kaggle.com" crossorigin>
    <link rel="preconnect" href="https://storage.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    
    <!-- PWA Basic Metadata -->
    <link rel="icon" href="/logo-icon.svg" type="image/svg+xml" />
    <link rel="icon" href="/icons/32.png" type="image/png" sizes="32x32" />
    <link rel="icon" href="/icons/192.png" type="image/png" sizes="192x192" />
    <link rel="icon" href="/icons/512.png" type="image/png" sizes="512x512" />
    
    <!-- iOS PWA specific tags -->
    <link rel="apple-touch-icon" href="/icons/180.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Mobility Age" />
    
    <!-- iOS splash screens -->
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    <link rel="apple-touch-startup-image" href="/splash/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
    
    <!-- Web App Manifest -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#fdfcfb" />
    
    <!-- PWA installation related meta tags -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="Mobility Age" />
    
    <!-- Critical CSS -->
    <style>
      /* Essential styles with vendor prefixes */
      html {
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter var', system-ui, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #fdfcfb; /* bg-primary */
        color: #1a1918; /* text-primary */
        overflow-x: hidden;
      }
      
      #root {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      
      /* Light theme splash screen */
      .splash-screen {
        background: #fdfcfb; /* Solid light background matching app */
        /* Alternative: subtle gradient
        background: linear-gradient(135deg, #fdfcfb 0%, #f9f8f7 40%, #faf8ff 70%, #fdfcfb 100%);
        */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Optional logo with subtle shadow */
      .splash-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 2rem;
        -webkit-filter: drop-shadow(0 4px 12px rgba(168, 85, 247, 0.15));
                filter: drop-shadow(0 4px 12px rgba(168, 85, 247, 0.15));
        -webkit-animation: float 6s ease-in-out infinite;
                animation: float 6s ease-in-out infinite;
      }
      
      .splash-title {
        font-size: 3.5rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 0.5rem;
        letter-spacing: -0.025em;
        font-family: 'Clash Display', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
        /* Purple gradient text */
        background: linear-gradient(135deg, #9333ea 0%, #a855f7 50%, #c084fc 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /* Alternative: solid dark text
        color: #1a1918;
        */
      }
      
      .splash-subtitle {
        font-size: 1.25rem;
        color: #545250; /* text-secondary */
        text-align: center;
        max-width: 80%;
        margin-bottom: 3rem;
        font-weight: 400;
        line-height: 1.625;
      }
      
      /* Light theme spinner */
      .loading-spinner {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 4px solid #e5e3e1; /* neutral-300 - light gray */
        border-top-color: #a855f7; /* primary-500 - purple */
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
      }
      
      /* Add subtle decoration */
      .splash-decoration {
        position: absolute;
        top: -10%;
        right: -10%;
        width: 40%;
        height: 40%;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        -webkit-filter: blur(60px);
                filter: blur(60px);
        pointer-events: none;
      }
      
      /* Animations */
      @-webkit-keyframes spin {
        to { -webkit-transform: rotate(360deg); }
      }
      
      @keyframes spin {
        to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
      }
      
      @-webkit-keyframes float {
        0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
        50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
      }
      
      @keyframes float {
        0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
        50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
      }
      
      /* Mobile optimizations */
      @media (max-width: 640px) {
        .splash-logo {
          width: 60px;
          height: 60px;
          margin-bottom: 1.5rem;
        }
        
        .splash-title {
          font-size: 2.5rem;
          margin-bottom: 0.375rem;
        }
        
        .splash-subtitle {
          font-size: 1.125rem;
          margin-bottom: 2rem;
          max-width: 90%;
        }
        
        .loading-spinner {
          width: 40px;
          height: 40px;
          border-width: 3px;
        }
        
        .splash-decoration {
          width: 60%;
          height: 60%;
          top: -20%;
          right: -20%;
        }
      }
      
      @media (max-width: 375px) {
        .splash-title {
          font-size: 2rem;
        }
        
        .splash-subtitle {
          font-size: 1rem;
        }
      }
    </style>
    
    <!-- Initialize theme early to prevent flashes -->
    <script>
      // Initialize theme object before React loads
      window.__THEME_INITIALIZED__ = false;
      window.__THEME__ = null;
    </script>
    
    <!-- Main stylesheet -->
    <link rel="stylesheet" href="/tailwind.css" />
    <script type="module" crossorigin src="/assets/index.-RuVpvaw.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor.DHKCnajs.js">
    <link rel="modulepreload" crossorigin href="/assets/firebase.aJTe29cV.js">
    <link rel="modulepreload" crossorigin href="/assets/ui.SfjecAt4.js">
    <link rel="stylesheet" crossorigin href="/assets/index.DPjx0fR4.css">
  <link rel="manifest" href="/manifest.webmanifest"></head>
  <body>
    <div id="root">
      <!-- Light theme splash screen -->
      <div id="splash-screen" class="splash-screen">
        <!-- Subtle background decoration -->
        <div class="splash-decoration"></div>
        
        <!-- Logo: inline SVG of the M mark in circle (exact source geometry) -->
        <svg width="64" height="64" viewBox="0 0 1152 1152" fill="none" xmlns="http://www.w3.org/2000/svg" class="splash-logo" style="margin-bottom: 16px;">
          <circle cx="576" cy="576" r="576" fill="#a855f7"/>
          <g transform="translate(225,224) scale(1.05)" fill="#ffffff">
            <path d="M111.37 282.79 111.37 670 172.127 670 497.998 670 558.76 670 558.76 282.79 335.062 506.82ZM669 0 669 670 669 670 0 670 0 670 0 0 334.5 335Z" fill-rule="evenodd"/>
            <path d="M422.038 594.242 346.28 670 422.038 670ZM524 371 524 670 225 670Z" fill-rule="evenodd"/>
          </g>
        </svg>
        
        <h1 class="splash-title">Mobility Age</h1>
        <p class="splash-subtitle">Discover your mobility age with AI-powered movement analysis</p>
        <div class="loading-spinner"></div>
      </div>
    </div>
    
    <!-- Scripts -->
    
    <!-- Stripe.js for payment processing -->
    <script src="https://js.stripe.com/v3/"></script>
    
    <!-- Fallback for browsers that don't support JavaScript -->
    <noscript>
      <div style="max-width: 720px; margin: 0 auto; padding: 2rem; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: #fdfcfb; color: #1a1918; line-height: 1.6;">
        <h1 style="font-size: 2rem; margin-bottom: 0.5rem; color: #1a1918;">Mobility Age — how old does your body move?</h1>
        <p style="font-size: 1.125rem; color: #545250;">
          Mobility Age is a free test that reveals how old your body <em>moves</em>. Take four quick photos
          with your phone and get your mobility age — a single number scored against peer-reviewed clinical norms.
          It works like the "metabolic age" on a smart scale, but for movement.
        </p>

        <h2 style="font-size: 1.25rem; margin-top: 1.5rem;">What is mobility age?</h2>
        <p style="color: #545250;">
          Your mobility age is the age your movement patterns most resemble, based on joint range of motion and
          movement quality. If you are 35 but move like a typical 45-year-old, your mobility age is 45. We measure
          joint angles and reach distances from four standardised poses and compare them against age-specific
          clinical reference data.
        </p>

        <h2 style="font-size: 1.25rem; margin-top: 1.5rem;">How it works</h2>
        <ol style="color: #545250;">
          <li>Take four photos of simple poses with your phone (about 60 seconds).</li>
          <li>AI measures your joint angles and matches them to age-specific clinical norms.</li>
          <li>Get your mobility age, a joint-by-joint breakdown and personalised exercises.</li>
        </ol>

        <h2 style="font-size: 1.25rem; margin-top: 1.5rem;">The four movements</h2>
        <p style="color: #545250;">Deep squat, forward fold, overhead reach, and weight-bearing lunge. Nothing complicated, no equipment, and no app store download — it runs in your browser.</p>

        <p style="font-size: 1.125rem; margin-top: 1.5rem;">
          The full experience is interactive and needs JavaScript enabled. Learn more at
          <a href="https://mobilityage.co.uk/how-it-works" style="color: #9333ea;">how it works</a>,
          the <a href="https://mobilityage.co.uk/mobility-test-guide" style="color: #9333ea;">mobility test guide</a>,
          or <a href="https://mobilityage.co.uk/flexibility-vs-mobility" style="color: #9333ea;">flexibility vs mobility</a>.
        </p>
      </div>
    </noscript>
    
    <!-- Enhanced splash screen hiding with smooth transition -->
    <script>
      // Function to hide splash screen
      function hideSplashScreen() {
        const splashScreen = document.getElementById('splash-screen');
        if (splashScreen && splashScreen.style.display !== 'none') {
          splashScreen.style.opacity = '0';
          setTimeout(function() {
            splashScreen.style.display = 'none';
          }, 500);
        }
      }
      
      // Hide splash screen once window is loaded
      window.addEventListener('load', function() {
        // Give React a moment to initialize
        setTimeout(hideSplashScreen, 800);
      });
      
      // Backup: Hide splash screen after max 3 seconds
      setTimeout(hideSplashScreen, 3000);
      
      // Also hide when React app signals it's ready (optional)
      window.addEventListener('app-ready', hideSplashScreen);
    </script>
  </body>
</html>
