diff --git a/src/components/sections/DinoHero.tsx b/src/components/sections/DinoHero.tsx
index 6890dc7..723dd42 100644
--- a/src/components/sections/DinoHero.tsx
+++ b/src/components/sections/DinoHero.tsx
@@ -1,10 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
+'use client'
+
 import { BtnPrimary } from '@/components/ui/BtnPrimary'
 
+// ─── Figma tokens ─────────────────────────────────────────────────────────────
+// hero-main: bg #F2F5E8, 1920×1187
+// left text block: x=358, w=608  →  at 1920: occupies 358–966px (~50%)
+// hero-img frame: x=692 (relative), w=1228 (~63% of 1920 from center-right)
+// Ellipse 91: 2267×2267 amber #F0A050, behind T-Rex in right half
+// T-Rex: 1001×2152 (aspect ~0.465), right side, bleeds top, stays right of left-col
+// ─────────────────────────────────────────────────────────────────────────────
+
 const FONT_MONT = { fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }
 const FONT_INTER = { fontFamily: 'Inter, sans-serif' }
 
-const DEFAULT_FEATURES = ['Повнорозмірні анімовані динозавра', 'Реалістичні рухи та звуки']
+const DEFAULT_FEATURES = ['Повнорозмірні анімовані динозаври', 'Реалістичні рухи та звуки']
 
 interface DinoHeroProps {
   title?: string
@@ -23,61 +33,135 @@ export function DinoHero({
   features = DEFAULT_FEATURES,
   heroImageUrl,
 }: DinoHeroProps) {
-  return (
-    <section className="relative overflow-hidden" style={{ background: '#1e1e1e' }}>
-      {/* Left column */}
-      <div className="mx-auto max-w-[1440px] px-6">
-        <div className="min-h-[580px] pt-12 pb-16 lg:min-h-[780px] lg:pt-[80px] lg:pb-[60px]">
-          <div className="relative z-10 flex flex-col gap-10 lg:w-[600px] lg:gap-[48px]">
-            {/* Text */}
-            <div className="flex flex-col gap-5 lg:gap-8">
-              <h1
-                className="text-[36px] leading-[1.1] font-bold text-white uppercase lg:text-[64px]"
-                style={FONT_MONT}
-              >
-                {title}
-              </h1>
-              <p
-                className="text-[16px] leading-[1.6] font-medium text-white/80 lg:text-[24px]"
-                style={FONT_MONT}
-              >
-                {description}
-              </p>
-              <BtnPrimary href="/kvytky?category=dyno" className="self-start">
-                Купити квиток
-              </BtnPrimary>
-            </div>
+  // Figma breakpoint for this layout: 1440px (--breakpoint-lg)
+  // left column: 640px wide (≈44% of 1440)
+  // right column: 1440-640 = 800px
+  // T-Rex at 1440: height = 900px (section height ≈ 780px + bleed), width = 900 * 0.465 = ~418px
+  // 418px < 800px → T-Rex fits fully within right column at any viewport ≥ 1440px ✓
+  // For smaller desktops (1024–1440): scale proportionally
 
-            {/* Stat badge + feature list */}
-            <div className="flex flex-col gap-4 lg:gap-[32px]">
-              {/* "26 унікальних експонатів" pill */}
+  return (
+    <section className="relative overflow-hidden" style={{ background: '#F2F5E8' }}>
+      {/* Outer container limits max-width to 1920px, content left-aligned */}
+      <div className="relative mx-auto max-w-[1920px]">
+        {/* ────────────────────────────────────────────────────────────────
+            DESKTOP: absolute positioned right image area (left=640px)
+            overflow:hidden clips ellipse; separate img tag bleeds via section overflow:hidden
+        ──────────────────────────────────────────────────────────────── */}
+
+        {/* AMBER ELLIPSE — clipped strictly to right of 640px */}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-y-0 hidden overflow-hidden lg:block"
+          style={{ left: '640px', right: 0, zIndex: 1 }}
+        >
+          <div
+            className="absolute rounded-full"
+            style={{
+              /* At 1440: right-col = 800px, ellipse should fill most of it.
+                 Figma 1920: right-col=1280, ellipse=2267 → ratio=1.77.
+                 Use 1.8× right-col width */
+              width: 'calc((100vw - 640px) * 1.8)',
+              aspectRatio: '1 / 1',
+              background: '#F0A050',
+              /* Anchor: right side, bottom */
+              right: '-15%',
+              bottom: '-40%',
+            }}
+          />
+        </div>
+
+        {/* T-REX IMAGE — sits in right column, max-width prevents left overflow
+            Section overflow:hidden clips any top/bottom bleed */}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute top-0 bottom-0 hidden lg:flex lg:items-end lg:justify-end"
+          style={{
+            left: '640px',
+            right: 0,
+            zIndex: 10,
+            /* overflow:visible here so T-Rex can bleed TOP past section (section clips it) */
+            overflow: 'visible',
+          }}
+        >
+          <img
+            src={heroImageUrl ?? '/dynopark/T-Rex_2_1.jpg'}
+            alt="Тиранозавр Рекс у Динопарку"
+            style={{
+              /* T-Rex: full height, right-anchored, bleeds top via section overflow:hidden.
+                 At 1440: section h≈780px, height=115%≈897px, aspect=0.465 → width≈417px.
+                 Right-col = 800px, so T-Rex (417px) fits without touching left text area. */
+              position: 'absolute',
+              right: 0,
+              bottom: 0,
+              /* T-Rex tall (1001×2152 aspect 0.465): at section 780px, height=100% → width=362px.
+                 Make taller so it fills right col and head bleeds past section top */
+              height: '150%',
+              width: 'auto',
+              objectFit: 'contain',
+              objectPosition: 'right bottom',
+            }}
+            loading="eager"
+          />
+        </div>
+
+        {/* ────────────────────────────────────────────────────────────────
+            TEXT CONTENT — always on top
+        ──────────────────────────────────────────────────────────────── */}
+        <div className="relative" style={{ zIndex: 20 }}>
+          {/* Left column: fixed 640px on desktop */}
+          <div className="flex flex-col justify-start gap-6 px-6 py-10 lg:w-[640px] lg:gap-8 lg:px-[120px] lg:pt-[80px] lg:pb-[80px]">
+            {/* Title — Montserrat 64px 700 uppercase #272727 */}
+            <h1
+              className="text-[36px] leading-[1.1] font-bold text-[#272727] uppercase lg:text-[64px]"
+              style={FONT_MONT}
+            >
+              {title}
+            </h1>
+
+            {/* Subtitle — Montserrat 24px 500 #272727 */}
+            <p
+              className="text-[16px] leading-[1.6] font-medium text-[#272727] lg:text-[24px]"
+              style={FONT_MONT}
+            >
+              {description}
+            </p>
+
+            {/* CTA button */}
+            <BtnPrimary href="/kvytky?category=dyno" className="self-start">
+              Купити квиток
+            </BtnPrimary>
+
+            {/* info-tips ── */}
+            <div className="flex flex-col gap-3 lg:gap-5">
+              {/* stat: green circle "26" overlapping green pill */}
               <div className="relative flex items-center">
                 <div
                   className="relative z-10 flex flex-none items-center justify-center rounded-full text-white"
                   style={{
-                    width: 'clamp(72px, 8.33vw, 120px)',
-                    height: 'clamp(72px, 8.33vw, 120px)',
+                    width: 'clamp(72px, 8.33vw, 160px)',
+                    height: 'clamp(72px, 8.33vw, 160px)',
                     background: '#396817',
-                    border: 'clamp(8px, 1.04vw, 15px) solid rgba(253,242,232,0.15)',
-                    marginRight: 'clamp(-80px, -5.21vw, -30px)',
+                    flexShrink: 0,
                     ...FONT_INTER,
                     fontWeight: 800,
+                    fontSize: 'clamp(28px, 5vw, 96px)',
                     lineHeight: 1,
-                    fontSize: 'clamp(22px, 3.13vw, 45px)',
                   }}
                 >
                   {stat}
                 </div>
                 <div
-                  className="flex-1 rounded-[16px] text-[15px] leading-[1.3] font-medium text-white lg:text-[20px]"
+                  className="flex flex-1 items-center rounded-[16px] text-white"
                   style={{
                     background: '#396817',
+                    marginLeft: 'clamp(-20px, -2vw, -36px)',
+                    paddingLeft: 'clamp(28px, 4vw, 56px)',
+                    paddingRight: '20px',
+                    height: 'clamp(56px, 5.9vw, 113px)',
                     ...FONT_INTER,
                     fontWeight: 500,
-                    paddingTop: 'clamp(18px, 2.08vw, 30px)',
-                    paddingBottom: 'clamp(18px, 2.08vw, 30px)',
-                    paddingLeft: 'clamp(48px, 7.81vw, 112px)',
-                    paddingRight: '20px',
+                    fontSize: 'clamp(14px, 1.25vw, 24px)',
                   }}
                 >
                   {statLabel}
@@ -87,12 +171,14 @@ export function DinoHero({
               {features.map((f, i) => (
                 <div
                   key={i}
-                  className="rounded-[16px] text-[15px] leading-[1.3] font-medium text-white lg:text-[20px]"
+                  className="flex items-center rounded-[16px] text-white"
                   style={{
                     background: '#396817',
+                    height: 'clamp(52px, 5.9vw, 113px)',
+                    padding: '0 clamp(20px, 2.08vw, 40px)',
                     ...FONT_INTER,
                     fontWeight: 500,
-                    padding: 'clamp(18px, 2.08vw, 30px) clamp(24px, 2.08vw, 30px)',
+                    fontSize: 'clamp(14px, 1.25vw, 24px)',
                   }}
                 >
                   {f}
@@ -101,54 +187,20 @@ export function DinoHero({
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Right panel — hero image on orange circle */}
-      <div
-        className="pointer-events-none absolute top-0 right-0 hidden h-full overflow-visible lg:flex lg:items-end"
-        aria-hidden="true"
-        style={{ width: '52vw' }}
-      >
-        {/* Orange-amber circle background */}
-        <div
-          className="absolute rounded-full"
-          style={{
-            width: '115%',
-            aspectRatio: '1',
-            background: 'radial-gradient(circle at 38% 38%, #fdcf54 0%, #f28b4a 55%, #e06d2a 100%)',
-            right: '-10%',
-            bottom: '-10%',
-          }}
-        />
-        {/* Hero dino image */}
-        <img
-          src={heroImageUrl ?? '/dynopark/T-Rex_2_1.jpg'}
-          alt="Динозавр динопарку"
-          className="relative z-10 w-full"
-          style={{
-            objectFit: 'contain',
-            objectPosition: 'bottom center',
-            maxHeight: '110%',
-          }}
-          loading="eager"
-        />
-      </div>
-
-      {/* Mobile hero */}
-      <div className="relative mx-auto max-w-[400px] px-6 pb-8 lg:hidden" aria-hidden="true">
-        <div
-          className="mx-auto flex aspect-square items-end justify-center overflow-hidden rounded-full"
-          style={{
-            background: 'radial-gradient(circle at 38% 38%, #fdcf54 0%, #f28b4a 55%, #e06d2a 100%)',
-          }}
-        >
-          <img
-            src={heroImageUrl ?? '/dynopark/T-Rex_2_1.jpg'}
-            alt=""
-            className="w-full object-contain object-bottom"
-            style={{ maxHeight: '100%' }}
-            loading="eager"
-          />
+        {/* MOBILE: simple stacked image */}
+        <div className="relative px-6 pb-8 lg:hidden" aria-hidden="true">
+          <div
+            className="mx-auto flex aspect-[3/2] max-w-sm items-end justify-center overflow-hidden rounded-3xl"
+            style={{ background: '#F0A050' }}
+          >
+            <img
+              src={heroImageUrl ?? '/dynopark/T-Rex_2_1.jpg'}
+              alt=""
+              className="h-full w-auto object-contain object-bottom"
+              loading="eager"
+            />
+          </div>
         </div>
       </div>
     </section>