Onboarding: use ocean background image, show full expertise tag names

- Replace blue gradient with ocean.png background (matches email templates)
- Display expertise tags one per line with full names (no truncation)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(auth)/onboarding/page.tsx

@@ -221,7 +221,7 @@ export default function OnboardingPage() {
   // Show loading while session hydrates or fetching user data
   if (sessionStatus === 'loading' || userLoading || !initialized) {
     return (
-      <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
+      <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-[#053d57] bg-[url('https://s3.monaco-opc.com/public/ocean.png')] bg-cover bg-center bg-no-repeat">
         <AnimatedCard>
         <Card className="w-full max-w-lg shadow-2xl overflow-hidden">
           <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
@@ -236,7 +236,7 @@ export default function OnboardingPage() {
   }
 
   return (
-    <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
+    <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-[#053d57] bg-[url('https://s3.monaco-opc.com/public/ocean.png')] bg-cover bg-center bg-no-repeat">
       <AnimatedCard>
       <Card className="w-full max-w-lg max-h-[85vh] overflow-y-auto overflow-hidden shadow-2xl">
         <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />