fix(dino): two-layer Figma hero (ellipse SVG + T-Rex PNG), larger dino fill per reference

public/images/figma/dyno-hero-ellipse.svg

@@ -0,0 +1,10 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1858.1 1858.1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle id="Ellipse 91" cx="929.051" cy="929.051" r="929.051" fill="url(#paint0_linear_0_4)"/>
+<defs>
+<linearGradient id="paint0_linear_0_4" x1="0" y1="929.051" x2="1858.1" y2="929.051" gradientUnits="userSpaceOnUse">
+<stop offset="0.0288462" stop-color="#F28B4A"/>
+<stop offset="0.466346" stop-color="#FDCF54"/>
+<stop offset="1" stop-color="#F28D4B"/>
+</linearGradient>
+</defs>
+</svg>

src/components/sections/DinoPageContent.tsx

@@ -295,11 +295,19 @@ const DYNO_CSS = `
 /* HERO */
 .dino-page .hero{position:relative;overflow:hidden;padding-top:60px;}
 .dino-page .hero .wrap{position:relative;}
-.dino-page .hero-dino{
-  position:absolute;top:-20px;right:-40px;height:auto;width:min(760px,52vw);max-width:none;
+/* Figma hero composition — ellipse (SVG) + dino photo (PNG transparent) */
+.dino-page .hero-ellipse{
+  position:absolute;right:-18%;top:-5%;
+  width:72vw;max-width:1020px;
   z-index:0;pointer-events:none;
-  filter:contrast(1.08) saturate(1.12);
-  object-fit:contain;object-position:top right;
+  transform:rotate(14.64deg);transform-origin:center;
+}
+.dino-page .hero-dino{
+  position:absolute;right:-3%;top:-12%;
+  height:145%;width:auto;max-width:none;
+  z-index:1;pointer-events:none;
+  transform:scaleX(-1);
+  filter:contrast(1.05) saturate(1.1);
 }
 .dino-page .hero-text{position:relative;z-index:2;max-width:608px;padding:60px 0 40px;}
 .dino-page .hero-text h1{
@@ -516,10 +524,12 @@ const DYNO_CSS = `
   .dino-page .why-grid{grid-template-columns:1fr;}
   .dino-page .acc-side{max-width:704px;}
   .dino-page .hero-text h1{font-size:52px;}
-  .dino-page .hero-dino{width:min(580px,52vw);height:auto;right:-30px;top:10px;opacity:.8;}
+  .dino-page .hero-ellipse{width:65vw;right:-20%;}
+  .dino-page .hero-dino{height:125%;top:-8%;right:-2%;}
 }
 @media(max-width:820px){
-  .dino-page .hero-dino{width:min(520px,80vw);height:auto;max-height:75vh;right:-20px;top:0;opacity:.8;}
+  .dino-page .hero-ellipse{width:75vw;right:-25%;opacity:.85;}
+  .dino-page .hero-dino{height:105%;top:0;right:-5%;opacity:.85;}
   .dino-page .hero-text{padding-top:40px;}
   .dino-page .hero-text h1{font-size:40px;}
   .dino-page .hero-text p{font-size:18px;}
@@ -535,7 +545,8 @@ const DYNO_CSS = `
 @media(max-width:560px){
   .dino-page{--gutter:18px;}
   /* Hero dino: smaller, clipped by hero overflow:hidden */
-  .dino-page .hero-dino{width:min(320px,70vw);height:auto;max-height:60vh;right:-10px;top:20px;opacity:.7;}
+  .dino-page .hero-ellipse{display:none;}
+  .dino-page .hero-dino{height:75%;top:5px;right:-5%;opacity:.7;transform:scaleX(-1);}
   /* Video card fits within gutter */
   .dino-page .video-card{flex:0 0 calc(100vw - 36px);}
   .dino-page .hero-text h1{font-size:32px;}
@@ -1004,9 +1015,16 @@ export function DinoPageContent({
       <div className="dino-page">
         {/* ── HERO ── */}
         <section className="hero">
+          <img
+            className="hero-ellipse"
+            src="/images/figma/dyno-hero-ellipse.svg"
+            alt=""
+            aria-hidden="true"
+            loading="eager"
+          />
           <img
             className="hero-dino"
-            src={heroImageUrl ?? '/images/figma/dyno-hero-v2.png'}
+            src={heroImageUrl ?? '/images/figma/dyno-hero-photo.png'}
             alt=""
             aria-hidden="true"
             loading="eager"