Hero v5 — light bg, floating image card on grey wash, soft teal glow

public/index.html

@@ -53,58 +53,90 @@
     /* ── HERO ── */
     .hero {
       padding-top: 64px;
-      height: 100vh;
-      min-height: 600px;
-      display: grid;
-      grid-template-columns: 42% 58%;
+      min-height: calc(100vh - 64px);
       background: #fff;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
       overflow: hidden;
+      position: relative;
+    }
+    /* Soft teal blob — top left, very subtle */
+    .hero::before {
+      content: '';
+      position: absolute;
+      top: -20%; left: -10%;
+      width: 50%; height: 100%;
+      background: radial-gradient(ellipse at 30% 40%, rgba(0,184,173,0.07) 0%, transparent 60%);
+      pointer-events: none;
     }
-    /* Left copy panel */
     .hero-left {
       display: flex; flex-direction: column; justify-content: center;
-      padding: 48px 48px 48px 5vw;
-      gap: 0;
+      padding: 60px 40px 60px 6vw;
+      position: relative; z-index: 1;
     }
     .hero-badge {
       display: inline-flex; align-items: center; gap: 8px;
-      padding: 5px 13px; border-radius: 100px;
+      padding: 5px 14px; border-radius: 100px;
       background: var(--accent-bg); border: 1px solid rgba(0,184,173,0.3);
       font-size: 0.72rem; font-weight: 600; color: var(--accent);
-      margin-bottom: 20px; width: fit-content;
+      margin-bottom: 28px; width: fit-content; letter-spacing: 0.04em;
     }
-    .hero-badge::before { content: '✦'; }
+    .hero-badge::before { content: '✦'; font-size: 0.6rem; }
     .hero h1 {
-      font-size: clamp(1.9rem, 2.6vw, 3rem); font-weight: 800;
-      line-height: 1.12; letter-spacing: -0.03em;
-      margin-bottom: 16px; color: var(--text);
+      font-size: clamp(2.2rem, 3vw, 3.5rem); font-weight: 800;
+      line-height: 1.1; letter-spacing: -0.03em;
+      margin-bottom: 20px; color: var(--text);
     }
     .hero h1 em { font-style: normal; color: var(--accent); }
     .hero-sub {
-      font-size: 0.95rem; color: var(--muted);
-      line-height: 1.75; margin-bottom: 28px;
+      font-size: 1rem; color: var(--muted);
+      line-height: 1.8; margin-bottom: 36px; max-width: 400px;
     }
-    .hero-ctas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; max-width: 240px; }
+    .hero-ctas { display: flex; gap: 12px; margin-bottom: 44px; flex-wrap: wrap; }
     .trust-strip {
-      display: flex; flex-wrap: wrap; gap: 4px 16px;
+      display: flex; flex-wrap: wrap; gap: 4px 20px;
       font-size: 0.73rem; color: var(--dim); font-weight: 500;
-      padding-top: 24px; border-top: 1px solid var(--border);
+      padding-top: 28px; border-top: 1px solid var(--border);
     }
     .trust-strip span::before { content: '◆ '; color: var(--accent); font-size: 0.4rem; vertical-align: middle; }
-    /* Right image panel */
+    /* Right: image as floating card on a soft grey wash */
     .hero-right {
-      position: relative; overflow: hidden;
+      padding: 40px 5vw 40px 24px;
+      display: flex; align-items: center; justify-content: center;
+      position: relative; z-index: 1;
     }
-    .hero-right img {
+    /* Soft grey shape behind the card */
+    .hero-right::before {
+      content: '';
+      position: absolute;
+      inset: 24px 3vw 24px 0;
+      background: #f0f4f4;
+      border-radius: 24px;
+      z-index: 0;
+    }
+    .hero-card {
+      width: 100%; max-width: 520px;
+      aspect-ratio: 4/5;
+      border-radius: 18px;
+      overflow: hidden;
+      position: relative; z-index: 1;
+      box-shadow:
+        0 2px 0 1px rgba(0,0,0,0.04),
+        0 12px 40px rgba(0,0,0,0.12),
+        0 32px 80px rgba(0,0,0,0.08);
+    }
+    .hero-card img {
       width: 100%; height: 100%;
-      object-fit: cover; object-position: center 20%;
+      object-fit: cover; object-position: center 15%;
       display: block;
     }
     @media (max-width: 860px) {
-      .hero { grid-template-columns: 1fr; height: auto; }
-      .hero-right { height: 56vw; min-height: 260px; }
-      .hero-left { padding: 40px 24px 36px; }
-      .hero-ctas { flex-direction: row; max-width: none; }
+      .hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 48px; }
+      .hero-right { padding: 0 24px 24px; }
+      .hero-right::before { inset: 0 0 0 0; border-radius: 18px; }
+      .hero-card { aspect-ratio: 3/2; max-width: 100%; }
+      .hero-left { padding: 48px 24px 32px; }
     }
 
     /* ── STATS BAR ── */
@@ -265,7 +297,6 @@
 
 <!-- ── HERO ── -->
 <section class="hero">
-  <!-- Left: all copy, above the fold -->
   <div class="hero-left">
     <div class="hero-badge">Free Forever — No Credit Card</div>
     <h1>Your GCC Clinic, Running on <em>WhatsApp</em> — Reminders, Leads &amp; Follow-Ups, Automated.</h1>
@@ -281,9 +312,10 @@
       <span>Jeddah</span>
     </div>
   </div>
-  <!-- Right: single strong image, full height -->
   <div class="hero-right">
-    <img src="img/hero-human.jpg" alt="Clinic owner in control, Dubai">
+    <div class="hero-card">
+      <img src="img/hero-human.jpg" alt="Clinic owner in control, Dubai">
+    </div>
   </div>
 </section>