<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!--
      Dark from the first frame, so no white page shows before the styles and the app load. The loading
      screen below is replaced when the app starts; App.tsx shows the same one while a page's code loads.
    -->
    <style>
      html, body { margin: 0; background: #070707; }
      .mec-splash { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #070707; }
      /* A glint of light crosses the crown, masked to its shape (SVG units: the crown spans x 8 to 56). */
      .mec-splash__glint { transform: skewX(-18deg) translateX(0); animation: mec-splash-glint 2.4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
      @keyframes mec-splash-glint { 0% { transform: skewX(-18deg) translateX(0); } 60%, 100% { transform: skewX(-18deg) translateX(86px); } }
      @media (prefers-reduced-motion: reduce) { .mec-splash__glint { animation: none; } }
    </style>

    <!-- Favicon and app icons: the crown (src/components/ui/BrandMark.tsx draws the same mark) -->
    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <!-- Mobile Optimized Viewport with Safe Area Support -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <!-- Server-delivered homepage SEO and social metadata. Build emits route-specific copies for static pages. -->
    <!-- SEO_META_START -->
    <title>MyEliteCard</title>
    <meta name="description" content="Create and share digital business cards." />
    <meta name="theme-color" content="#d4af37" />
    <link rel="canonical" href="https://myelitecard.com/404" />
    <meta name="robots" content="noindex, nofollow" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://myelitecard.com/404" />
    <meta property="og:title" content="MyEliteCard" />
    <meta property="og:description" content="Create and share digital business cards." />
    <meta property="og:image" content="https://myelitecard.com/social-preview.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="MyEliteCard digital business card designs" />
    <meta property="og:site_name" content="MyEliteCard" />
    <meta property="og:locale" content="en_US" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://myelitecard.com/404" />
    <meta name="twitter:title" content="MyEliteCard" />
    <meta name="twitter:description" content="Create and share digital business cards." />
    <meta name="twitter:image" content="https://myelitecard.com/social-preview.png" />
    <meta name="twitter:image:alt" content="MyEliteCard digital business card designs" />
    <!-- SEO_META_END -->

    <!-- Performance: Preload Critical Assets -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

    <!-- Premium Google Fonts for Elite Aesthetic -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
    <script type="module" crossorigin src="/assets/index.DoS98_ua.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/runtime-helpers.lGe4XDVY.js">
    <link rel="modulepreload" crossorigin href="/assets/react-vendor.CTqVj1Bu.js">
    <link rel="modulepreload" crossorigin href="/assets/framer-vendor.Q1TVeTIR.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-vendor.DU8XqIsK.js">
    <link rel="stylesheet" crossorigin href="/assets/index.DSLpZKLj.css">
  </head>
  <body>
    <!-- APP_HTML_START --><div id="root"><div class="mec-splash" role="status" aria-label="Loading MyEliteCard"><svg viewBox="8 7 48 44" width="70" height="64" aria-hidden="true"><defs><linearGradient id="mec-splash-gold" x1="0" y1="8" x2="0" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3dc9b"/><stop offset="0.55" stop-color="#d4af37"/><stop offset="1" stop-color="#a8822a"/></linearGradient><linearGradient id="mec-splash-light" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fff8e1" stop-opacity="0"/><stop offset="0.5" stop-color="#fff8e1" stop-opacity="0.9"/><stop offset="1" stop-color="#fff8e1" stop-opacity="0"/></linearGradient><mask id="mec-splash-shape" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="64"><path d="M15 40L12.2 22.5L23.6 31.4L32 17.6L40.4 31.4L51.8 22.5L49 40Z" fill="none" stroke="#fff" stroke-width="3.2" stroke-linejoin="miter" stroke-miterlimit="6"/><path d="M12.2 14.5L14.92 17.9L12.2 21.3L9.48 17.9ZM32 8.7L35.12 12.6L32 16.5L28.88 12.6ZM51.8 14.5L54.52 17.9L51.8 21.3L49.08 17.9Z" fill="#fff"/><rect x="10.5" y="44.4" width="43" height="4.6" rx="2.3" fill="#fff"/></mask></defs><path d="M15 40L12.2 22.5L23.6 31.4L32 17.6L40.4 31.4L51.8 22.5L49 40Z" fill="none" stroke="url(#mec-splash-gold)" stroke-width="3.2" stroke-linejoin="miter" stroke-miterlimit="6"/><path d="M12.2 14.5L14.92 17.9L12.2 21.3L9.48 17.9ZM32 8.7L35.12 12.6L32 16.5L28.88 12.6ZM51.8 14.5L54.52 17.9L51.8 21.3L49.08 17.9Z" fill="url(#mec-splash-gold)"/><rect x="10.5" y="44.4" width="43" height="4.6" rx="2.3" fill="url(#mec-splash-gold)"/><g mask="url(#mec-splash-shape)"><rect class="mec-splash__glint" x="-10" y="0" width="12" height="64" fill="url(#mec-splash-light)"/></g></svg></div></div><!-- APP_HTML_END -->
  </body>
</html>

