Metallic Hero Display

<div class="w-full flex items-center justify-center min-h-screen bg-gray-900 p-4">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');</style>
  <div class="relative w-full max-w-6xl aspect-[2131/489] overflow-hidden
    rounded-lg shadow-2xl bg-gradient-to-b from-gray-900
    to-gray-800" style="box-shadow: 0 30px 60px rgba(2, 6, 12, 0.6); background: radial-gradient(1200px 600px at 50% 40%, rgba(255,255,255,0.02), transparent 8%), radial-gradient(900px 400px at 30% 50%, rgba(0,120,255,0.02), transparent 6%), linear-gradient(180deg, rgba(10,12,15,1) 0%, rgba(21,23,27,1) 100%);" role="img" aria-label="A plus metallic artwork">
    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
      <img src="https://i.imgur.com/Bmg72zs.png" alt="A+ metallic artwork" class="block w-auto h-5/6 select-none" style="filter: drop-shadow(0 40px 60px rgba(0,0,0,0.7)); -webkit-user-drag: none;" />
    </div>
    <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2
      -translate-y-1/2 pointer-events-none opacity-90
      mix-blend-screen" style="width: 1100px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(120,140,255,0.06), rgba(120,70,180,0.02) 35%, transparent 60%); filter: blur(30px);"></div>
    <div class="absolute right-3 bottom-2 text-xs text-white text-opacity-45
      bg-black bg-opacity-18 px-2 py-1 rounded backdrop-blur-sm" style="font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">Fixed desktop layout — A+ metallic image visible.</div>
  </div>
</div>