From a516870e5896a34dd3cc83ab721c57d8d5b24fa8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 19 May 2026 00:22:09 +0000
Subject: [PATCH] Overhaul waitlist landing with warm pastel CRO redesign

- Warm cream canvas (#FFFDF9, #FFF4EC) replaces stark white
- Hero gains floating pet emoji decorations and gradient glow icon with ring pulse
- Waitlist card uses glassmorphism with warm peach border and shadow
- All form inputs share identical pill geometry (height:50px) including petCount
- Added social proof strip between hero and feature sections
- Bento 1 (Care): enhanced task tiles with backdrop blur and bordered cards
- Bento 2 (Nutrition): added 5-column weight trend mini bar chart; activity tag badge
- Bento 3 (Match): Ziggy gecko card gains dedicated portrait area with floating emoji
- Bento 4 (Social/Commerce): warm-tinted panels with gradient seller header
- Final CTA: deep blue gradient with dual CTA buttons (primary + ghost)
- All JS, IDs, API constants, and fetch payload schema left 100% intact

https://claude.ai/code/session_0116rKa7kc65vJnjW7L7WyPp
---
 templates/index.html | 1060 ++++++++++++++++++++++++++----------------
 1 file changed, 664 insertions(+), 396 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index ad27f0a..d9926bf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -13,83 +13,76 @@
   <meta name="twitter:title" content="PetFolio — Your Pet's Social World">
   <meta name="twitter:description" content="Every wag, purr & pawprint — captured. Join the beta waitlist.">
   <style>
-    /* ── RESET ────────────────────────────────── */
+    /* ── RESET ───────────────────────────────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-    /* ── TOKENS ───────────────────────────────── */
+    /* ── DESIGN TOKENS ───────────────────────────── */
     :root {
-      /* Brand */
       --blue:        #2979FF;
       --blue-dark:   #1A5EC9;
       --blue-soft:   rgba(41,121,255,0.10);
       --blue-softer: rgba(41,121,255,0.06);
 
-      /* Care & Streaks – warm orange/peach */
+      --cream:       #FFFDF9;
+      --peach-soft:  #FFF4EC;
+      --peach-mid:   #FFE8D6;
+      --white:       #FFFFFF;
+
       --ora:         #F5A623;
-      --ora-mid:     #E8956D;
+      --ora-mid:     #FF9E7D;
       --ora-dark:    #C97B55;
-      --ora-bg:      #FFF6EE;
-      --ora-border:  rgba(245,166,35,0.18);
+      --ora-bg:      #FFF4EC;
 
-      /* Nutrition – sage/mint */
       --sage:        #5BA99A;
       --sage-dark:   #3D8A7D;
-      --sage-light:  #A8D5CC;
-      --sage-bg:     #F0FAF8;
-      --sage-border: rgba(91,169,154,0.18);
-
-      /* Canvas */
-      --white:    #FFFFFF;
-      --offwhite: #F7F9FF;
+      --sage-light:  #A2CBA0;
+      --sage-bg:     #EAF7F0;
 
-      /* Ink */
       --ink:     #1D1D1F;
       --ink-mid: #424245;
       --ink-lt:  #6E6E73;
       --ink-xl:  #AEAEB2;
 
-      /* Structure */
-      --border:      rgba(0,0,0,0.08);
-      --border-dark: rgba(0,0,0,0.13);
+      --border:      rgba(0,0,0,0.07);
+      --border-warm: rgba(255,158,125,0.18);
 
-      /* Geometry */
       --pill: 100px;
+      --r-xl: 32px;
       --r-lg: 24px;
       --r-md: 18px;
       --r-sm: 12px;
 
-      /* Elevation */
-      --sh-sm:     0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
-      --sh-md:     0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
-      --sh-blue:   0 10px 36px rgba(41,121,255,0.28);
-      --sh-orange: 0 16px 48px rgba(232,149,109,0.32);
-      --sh-sage:   0 16px 48px rgba(91,169,154,0.28);
+      --sh-sm:   0 2px 8px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03);
+      --sh-md:   0 8px 32px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
+      --sh-warm: 0 16px 56px rgba(255,158,125,0.30), 0 4px 16px rgba(255,158,125,0.15);
+      --sh-blue: 0 10px 36px rgba(41,121,255,0.32);
+      --sh-sage: 0 16px 48px rgba(91,169,154,0.28);
     }
 
     html { scroll-behavior: smooth; }
 
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
-      background: var(--white);
+      background: var(--cream);
       color: var(--ink);
       overflow-x: hidden;
       -webkit-font-smoothing: antialiased;
     }
 
-    /* ── NAV ──────────────────────────────────── */
+    /* ── NAV ─────────────────────────────────────── */
     nav {
       position: fixed;
       inset: 0 0 auto 0;
       z-index: 200;
-      height: 60px;
+      height: 62px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 40px;
-      background: rgba(255,255,255,0.90);
+      background: rgba(255,253,249,0.92);
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
-      border-bottom: 1px solid var(--border);
+      border-bottom: 1px solid rgba(255,158,125,0.14);
     }
 
     .nav-brand {
@@ -100,14 +93,15 @@
     }
 
     .nav-icon {
-      width: 36px;
-      height: 36px;
-      background: var(--blue);
-      border-radius: 10px;
+      width: 38px;
+      height: 38px;
+      background: linear-gradient(135deg, #FF9E7D 0%, #2979FF 100%);
+      border-radius: 11px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 18px;
+      font-size: 19px;
+      box-shadow: 0 4px 14px rgba(255,158,125,0.38);
     }
 
     .nav-name {
@@ -132,37 +126,82 @@
       font-weight: 600;
       color: white;
       background: var(--blue);
-      padding: 9px 20px;
+      padding: 9px 22px;
       border-radius: var(--pill);
       text-decoration: none;
-      transition: background 0.2s, transform 0.15s;
+      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
+      box-shadow: 0 4px 14px rgba(41,121,255,0.28);
     }
 
-    .nav-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }
+    .nav-cta:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--sh-blue); }
 
-    /* ── HERO ─────────────────────────────────── */
+    /* ── HERO ────────────────────────────────────── */
     .hero {
-      padding: 120px 24px 80px;
+      position: relative;
+      padding: 132px 24px 100px;
       text-align: center;
-      background: var(--white);
+      background: linear-gradient(175deg, var(--cream) 0%, var(--peach-soft) 55%, var(--peach-mid) 100%);
+      overflow: hidden;
+    }
+
+    .hero-deco {
+      position: absolute;
+      pointer-events: none;
+      user-select: none;
+      line-height: 1;
+    }
+
+    .hd1 { top: 15%; left: 7%;  font-size: 54px; opacity: 0.16; transform: rotate(-14deg); animation: floatA 6s   ease-in-out infinite; }
+    .hd2 { top: 20%; right: 8%; font-size: 46px; opacity: 0.13; transform: rotate(9deg);   animation: floatB 7s   ease-in-out infinite; }
+    .hd3 { bottom: 20%; left: 12%;  font-size: 40px; opacity: 0.12; transform: rotate(-8deg);  animation: floatA 8s   ease-in-out infinite 1s; }
+    .hd4 { bottom: 18%; right: 10%; font-size: 48px; opacity: 0.12; transform: rotate(12deg);  animation: floatB 6.5s ease-in-out infinite 0.5s; }
+    .hd5 { top: 55%; left: 3%;  font-size: 32px; opacity: 0.09; animation: floatA 9s ease-in-out infinite 2s; }
+    .hd6 { top: 38%; right: 3%; font-size: 30px; opacity: 0.09; animation: floatB 8s ease-in-out infinite 1.5s; }
+
+    @keyframes floatA {
+      0%,100% { transform: rotate(-14deg) translateY(0); }
+      50%      { transform: rotate(-14deg) translateY(-13px); }
+    }
+    @keyframes floatB {
+      0%,100% { transform: rotate(9deg) translateY(0); }
+      50%      { transform: rotate(9deg) translateY(-10px); }
+    }
+
+    .hero-icon-wrap {
+      display: inline-block;
+      margin-bottom: 28px;
+      animation: popIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
+      position: relative;
     }
 
     .hero-icon {
-      width: 88px;
-      height: 88px;
-      background: var(--blue);
-      border-radius: 22px;
+      width: 96px;
+      height: 96px;
+      background: linear-gradient(145deg, #FF9E7D 0%, #2979FF 100%);
+      border-radius: 26px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 44px;
-      margin: 0 auto 24px;
-      box-shadow: var(--sh-blue);
-      animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
+      font-size: 48px;
+      margin: 0 auto;
+      box-shadow: 0 20px 56px rgba(255,158,125,0.42), 0 8px 24px rgba(41,121,255,0.28);
+    }
+
+    .hero-icon-ring {
+      position: absolute;
+      inset: -9px;
+      border-radius: 35px;
+      border: 2px solid rgba(255,158,125,0.28);
+      animation: ringPulse 2.6s ease-in-out infinite;
+    }
+
+    @keyframes ringPulse {
+      0%,100% { opacity: 1;  transform: scale(1); }
+      50%      { opacity: 0.3; transform: scale(1.05); }
     }
 
     @keyframes popIn {
-      from { opacity: 0; transform: scale(0.7); }
+      from { opacity: 0; transform: scale(0.65); }
       to   { opacity: 1; transform: scale(1); }
     }
 
@@ -172,64 +211,74 @@
       gap: 7px;
       font-size: 13px;
       font-weight: 600;
-      color: var(--blue);
-      background: var(--blue-softer);
-      border: 1px solid rgba(41,121,255,0.15);
-      padding: 5px 14px;
+      color: #C97B55;
+      background: rgba(255,158,125,0.14);
+      border: 1px solid rgba(255,158,125,0.32);
+      padding: 6px 16px;
       border-radius: var(--pill);
-      margin-bottom: 20px;
+      margin-bottom: 22px;
       animation: fadeUp 0.5s 0.1s ease both;
     }
 
     .eyebrow-dot {
       width: 6px;
       height: 6px;
-      background: var(--blue);
+      background: var(--ora-mid);
       border-radius: 50%;
       animation: pulse 2s infinite;
     }
 
     @keyframes pulse {
-      0%,100% { opacity:1; transform:scale(1); }
-      50%      { opacity:.4; transform:scale(.6); }
+      0%,100% { opacity: 1; transform: scale(1); }
+      50%      { opacity: .4; transform: scale(.6); }
     }
 
     .hero-headline {
-      font-size: clamp(38px, 6vw, 68px);
+      font-size: clamp(40px, 6.2vw, 72px);
       font-weight: 800;
-      letter-spacing: -1.5px;
-      line-height: 1.06;
+      letter-spacing: -2px;
+      line-height: 1.04;
       color: var(--ink);
-      margin-bottom: 18px;
+      margin-bottom: 20px;
       animation: fadeUp 0.5s 0.15s ease both;
       max-width: 700px;
       margin-left: auto;
       margin-right: auto;
     }
 
+    .hero-headline em {
+      font-style: normal;
+      background: linear-gradient(135deg, #FF9E7D 0%, #2979FF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
     .hero-sub {
       font-size: clamp(16px, 2vw, 18px);
       color: var(--ink-lt);
-      line-height: 1.7;
-      max-width: 500px;
-      margin: 0 auto 44px;
+      line-height: 1.72;
+      max-width: 460px;
+      margin: 0 auto 48px;
       animation: fadeUp 0.5s 0.2s ease both;
     }
 
     @keyframes fadeUp {
-      from { opacity:0; transform:translateY(18px); }
-      to   { opacity:1; transform:none; }
+      from { opacity: 0; transform: translateY(18px); }
+      to   { opacity: 1; transform: none; }
     }
 
-    /* ── WAITLIST CARD ────────────────────────── */
+    /* ── WAITLIST CARD ───────────────────────────── */
     .wl-card {
-      background: var(--white);
-      border: 1px solid var(--border-dark);
-      border-radius: var(--r-lg);
-      padding: 36px;
-      max-width: 480px;
+      background: rgba(255,255,255,0.93);
+      border: 1.5px solid rgba(255,158,125,0.22);
+      border-radius: var(--r-xl);
+      padding: 40px;
+      max-width: 492px;
       margin: 0 auto;
-      box-shadow: var(--sh-md);
+      box-shadow: 0 28px 72px rgba(255,158,125,0.18), 0 8px 24px rgba(0,0,0,0.06);
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
       animation: fadeUp 0.5s 0.25s ease both;
     }
 
@@ -240,30 +289,27 @@
       gap: 10px;
       margin-bottom: 28px;
       padding-bottom: 24px;
-      border-bottom: 1px solid var(--border);
+      border-bottom: 1px solid rgba(255,158,125,0.14);
     }
 
     .counter-avatars { display: flex; }
 
     .c-av {
-      width: 28px;
-      height: 28px;
+      width: 30px;
+      height: 30px;
       border-radius: 50%;
       border: 2px solid var(--white);
-      margin-left: -6px;
+      margin-left: -7px;
       font-size: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--offwhite);
+      background: var(--peach-soft);
     }
 
     .c-av:first-child { margin-left: 0; }
 
-    .wl-count-text {
-      font-size: 13px;
-      color: var(--ink-lt);
-    }
+    .wl-count-text { font-size: 13px; color: var(--ink-lt); }
 
     .wl-count-text strong {
       color: var(--ink);
@@ -271,7 +317,7 @@
       font-variant-numeric: tabular-nums;
     }
 
-    /* Pill inputs */
+    /* ── PILL INPUTS — all share identical geometry ── */
     .form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -282,17 +328,19 @@
     .form-input,
     .form-select {
       width: 100%;
-      padding: 14px 20px;
+      height: 50px;
+      padding: 0 20px;
       font-size: 15px;
       font-family: inherit;
       color: var(--ink);
-      background: var(--offwhite);
-      border: 1.5px solid transparent;
+      background: var(--peach-soft);
+      border: 1.5px solid rgba(255,158,125,0.22);
       border-radius: var(--pill);
       outline: none;
       transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
       -webkit-appearance: none;
       appearance: none;
+      line-height: 50px;
     }
 
     .form-input::placeholder { color: var(--ink-xl); }
@@ -301,7 +349,8 @@
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aeaeb2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 18px center;
-      padding-right: 42px;
+      background-color: var(--peach-soft);
+      padding-right: 44px;
       color: var(--ink-xl);
       cursor: pointer;
     }
@@ -312,7 +361,7 @@
     .form-select:focus {
       border-color: var(--blue);
       background: var(--white);
-      box-shadow: 0 0 0 3px rgba(41,121,255,0.15);
+      box-shadow: 0 0 0 3px rgba(41,121,255,0.14);
     }
 
     input[type="number"]::-webkit-inner-spin-button,
@@ -321,7 +370,7 @@
 
     .btn-join {
       width: 100%;
-      padding: 15px;
+      height: 52px;
       margin-top: 10px;
       font-size: 16px;
       font-weight: 700;
@@ -333,6 +382,7 @@
       cursor: pointer;
       letter-spacing: -0.2px;
       transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
+      box-shadow: 0 6px 22px rgba(41,121,255,0.34);
     }
 
     .btn-join:hover    { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--sh-blue); }
@@ -350,15 +400,16 @@
     .success-state { display: none; text-align: center; }
 
     .success-ico {
-      width: 64px;
-      height: 64px;
-      background: var(--blue-soft);
+      width: 68px;
+      height: 68px;
+      background: linear-gradient(135deg, rgba(255,158,125,0.18), rgba(41,121,255,0.1));
       border-radius: 50%;
+      border: 2px solid rgba(255,158,125,0.22);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 28px;
-      margin: 0 auto 16px;
+      font-size: 30px;
+      margin: 0 auto 18px;
     }
 
     .success-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); margin-bottom: 8px; }
@@ -381,41 +432,75 @@
     .share-btn {
       font-size: 13px;
       font-weight: 600;
-      padding: 8px 18px;
+      padding: 9px 20px;
       border-radius: var(--pill);
-      border: 1.5px solid var(--border-dark);
+      border: 1.5px solid rgba(255,158,125,0.28);
       background: var(--white);
       color: var(--blue);
       text-decoration: none;
       cursor: pointer;
       font-family: inherit;
-      transition: background 0.15s;
+      transition: background 0.15s, border-color 0.15s;
     }
 
-    .share-btn:hover { background: var(--offwhite); }
+    .share-btn:hover { background: var(--peach-soft); border-color: rgba(255,158,125,0.5); }
 
-    /* ── SHAKE ────────────────────────────────── */
+    /* ── SHAKE ───────────────────────────────────── */
     @keyframes shake {
-      0%,100% { transform:translateX(0); }
-      20%      { transform:translateX(-6px); }
-      40%      { transform:translateX(6px); }
-      60%      { transform:translateX(-4px); }
-      80%      { transform:translateX(4px); }
+      0%,100% { transform: translateX(0); }
+      20%      { transform: translateX(-6px); }
+      40%      { transform: translateX(6px); }
+      60%      { transform: translateX(-4px); }
+      80%      { transform: translateX(4px); }
     }
 
-    /* ── REVEAL ───────────────────────────────── */
+    /* ── SCROLL REVEAL ───────────────────────────── */
     .reveal {
       opacity: 0;
-      transform: translateY(22px);
-      transition: opacity 0.65s ease, transform 0.65s ease;
+      transform: translateY(24px);
+      transition: opacity 0.7s ease, transform 0.7s ease;
     }
     .reveal.visible { opacity: 1; transform: none; }
 
-    /* ── SHARED SECTION LAYOUT ────────────────── */
-    .section {
-      padding: 96px 48px;
+    /* ── PROOF STRIP ─────────────────────────────── */
+    .proof-strip {
+      background: var(--white);
+      border-top: 1px solid rgba(255,158,125,0.12);
+      border-bottom: 1px solid rgba(255,158,125,0.12);
+      padding: 22px 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 44px;
+      flex-wrap: wrap;
     }
 
+    .proof-item { display: flex; align-items: center; gap: 11px; }
+
+    .proof-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 11px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 19px;
+      flex-shrink: 0;
+    }
+
+    .pi-ora  { background: var(--peach-soft); }
+    .pi-sage { background: var(--sage-bg); }
+    .pi-blue { background: var(--blue-soft); }
+    .pi-pink { background: rgba(255,158,125,0.1); }
+
+    .proof-text-num { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
+    .proof-text-lbl { font-size: 12px; color: var(--ink-lt); margin-top: 1px; }
+
+    .proof-div { width: 1px; height: 34px; background: rgba(255,158,125,0.18); flex-shrink: 0; }
+
+    /* ── SHARED SECTION LAYOUT ───────────────────── */
+    .section { padding: 96px 48px; }
+
     .section-inner {
       max-width: 1080px;
       margin: 0 auto;
@@ -433,9 +518,9 @@
       font-weight: 700;
       letter-spacing: 0.07em;
       text-transform: uppercase;
-      padding: 5px 13px;
+      padding: 5px 14px;
       border-radius: var(--pill);
-      margin-bottom: 16px;
+      margin-bottom: 18px;
     }
 
     .sec-headline {
@@ -444,32 +529,47 @@
       letter-spacing: -0.8px;
       line-height: 1.1;
       color: var(--ink);
-      margin-bottom: 14px;
+      margin-bottom: 16px;
     }
 
     .sec-body {
       font-size: 16px;
       color: var(--ink-lt);
-      line-height: 1.72;
-      max-width: 440px;
+      line-height: 1.76;
+      max-width: 420px;
     }
 
-    /* ── SECTION 1: CARE DASHBOARD ────────────── */
+    /* ──────────────────────────────────────────────
+       BENTO 1 — CARE STREAKS & DAILY DASHBOARD
+    ────────────────────────────────────────────── */
     .care-section { background: var(--ora-bg); }
 
     .care-card {
-      background: linear-gradient(145deg, #F5A623 0%, #E8956D 55%, #C97B55 100%);
-      border-radius: var(--r-lg);
+      background: linear-gradient(145deg, #F5A623 0%, #FF9E7D 52%, #C97B55 100%);
+      border-radius: var(--r-xl);
       padding: 28px;
-      box-shadow: var(--sh-orange);
+      box-shadow: var(--sh-warm);
       color: white;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .care-card::before {
+      content: '';
+      position: absolute;
+      top: -36px; right: -36px;
+      width: 170px; height: 170px;
+      background: rgba(255,255,255,0.08);
+      border-radius: 50%;
+      pointer-events: none;
     }
 
     .care-card-top {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
-      margin-bottom: 22px;
+      margin-bottom: 20px;
+      position: relative; z-index: 1;
     }
 
     .care-label {
@@ -494,8 +594,7 @@
     }
 
     .care-live-dot {
-      width: 5px;
-      height: 5px;
+      width: 5px; height: 5px;
       background: #7dffca;
       border-radius: 50%;
       animation: pulse 1.5s infinite;
@@ -504,28 +603,23 @@
     .today-badge {
       background: rgba(255,255,255,0.22);
       border-radius: var(--r-sm);
-      padding: 8px 14px;
+      padding: 9px 16px;
       text-align: center;
+      backdrop-filter: blur(4px);
     }
 
     .today-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
-    .today-val { font-size: 20px; font-weight: 800; color: white; }
+    .today-val { font-size: 22px; font-weight: 800; color: white; }
 
-    /* Ring */
     .ring-row {
       display: flex;
       align-items: center;
       gap: 18px;
       margin-bottom: 18px;
+      position: relative; z-index: 1;
     }
 
-    .ring-wrap {
-      position: relative;
-      width: 80px;
-      height: 80px;
-      flex-shrink: 0;
-    }
-
+    .ring-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
     .ring-wrap svg { transform: rotate(-90deg); }
 
     .ring-center {
@@ -537,22 +631,22 @@
       justify-content: center;
     }
 
-    .ring-big { font-size: 22px; font-weight: 800; color: white; line-height: 1; }
-    .ring-sm  { font-size: 10px; color: rgba(255,255,255,.7); }
+    .ring-big { font-size: 24px; font-weight: 800; color: white; line-height: 1; }
+    .ring-sm  { font-size: 10px; color: rgba(255,255,255,.72); }
 
-    .ring-info-title { font-size: 16px; font-weight: 700; color: white; margin-bottom: 4px; }
-    .ring-info-sub   { font-size: 13px; color: rgba(255,255,255,.75); }
+    .ring-info-title { font-size: 16px; font-weight: 700; color: white; margin-bottom: 5px; }
+    .ring-info-sub   { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.5; }
 
-    /* Streak dots */
     .streak-dots {
       display: flex;
       gap: 6px;
-      margin-bottom: 22px;
+      margin-bottom: 20px;
+      position: relative; z-index: 1;
     }
 
     .s-dot {
       flex: 1;
-      height: 28px;
+      height: 30px;
       border-radius: var(--pill);
       display: flex;
       align-items: center;
@@ -561,32 +655,31 @@
       font-weight: 700;
     }
 
-    .sd-fill   { background: rgba(255,255,255,0.88); color: var(--ora-dark); }
-    .sd-empty  { background: rgba(255,255,255,0.22); color: rgba(255,255,255,0.6); }
-    .sd-today  { background: white; color: var(--ora-dark); outline: 2px solid rgba(255,255,255,0.4); outline-offset: 2px; }
+    .sd-fill  { background: rgba(255,255,255,0.88); color: var(--ora-dark); }
+    .sd-empty { background: rgba(255,255,255,0.22); color: rgba(255,255,255,0.6); }
+    .sd-today { background: white; color: var(--ora-dark); box-shadow: 0 0 0 3px rgba(255,255,255,0.3); }
 
-    /* Task tiles */
-    .task-tiles { display: flex; flex-direction: column; gap: 8px; }
+    .task-tiles { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
 
     .task-tile {
       background: rgba(255,255,255,0.18);
       border-radius: var(--r-md);
-      padding: 12px 14px;
+      padding: 13px 15px;
       display: flex;
       align-items: center;
-      gap: 11px;
-      backdrop-filter: blur(4px);
+      gap: 12px;
+      backdrop-filter: blur(6px);
+      border: 1px solid rgba(255,255,255,0.14);
     }
 
     .task-icon {
-      width: 34px;
-      height: 34px;
-      border-radius: 10px;
-      background: rgba(255,255,255,0.25);
+      width: 36px; height: 36px;
+      border-radius: 11px;
+      background: rgba(255,255,255,0.28);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 16px;
+      font-size: 17px;
       flex-shrink: 0;
     }
 
@@ -608,14 +701,16 @@
 
     .tbtn-dark  { background: rgba(0,0,0,0.28); color: white; }
     .tbtn-green { background: #5BA99A; color: white; }
-    .tbtn-check { background: rgba(255,255,255,0.9); color: var(--ora-dark); padding: 6px 10px; }
+    .tbtn-check { background: rgba(255,255,255,0.92); color: var(--ora-dark); }
 
-    /* ── SECTION 2: NUTRITION ─────────────────── */
+    /* ──────────────────────────────────────────────
+       BENTO 2 — SMART NUTRITION & MEDICAL VAULT
+    ────────────────────────────────────────────── */
     .nutrition-section { background: var(--sage-bg); }
 
     .nutrition-card {
       background: linear-gradient(145deg, #5BA99A 0%, #4A9087 55%, #357A6E 100%);
-      border-radius: var(--r-lg);
+      border-radius: var(--r-xl);
       padding: 28px;
       box-shadow: var(--sh-sage);
       color: white;
@@ -626,20 +721,18 @@
     .nutrition-card::before {
       content: '';
       position: absolute;
-      top: -40px; right: -40px;
-      width: 180px;
-      height: 180px;
-      background: rgba(255,255,255,0.07);
+      top: -44px; right: -44px;
+      width: 200px; height: 200px;
+      background: rgba(255,255,255,0.06);
       border-radius: 50%;
     }
 
     .nutrition-card::after {
       content: '';
       position: absolute;
-      bottom: -60px; left: -30px;
-      width: 220px;
-      height: 220px;
-      background: rgba(255,255,255,0.05);
+      bottom: -64px; left: -32px;
+      width: 240px; height: 240px;
+      background: rgba(255,255,255,0.04);
       border-radius: 50%;
     }
 
@@ -649,26 +742,40 @@
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
-      margin-bottom: 20px;
+      margin-bottom: 18px;
+      gap: 12px;
     }
 
     .nut-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 3px; }
 
     .nut-kcal-big {
-      font-size: clamp(52px, 8vw, 72px);
+      font-size: clamp(48px, 7vw, 66px);
       font-weight: 800;
       color: white;
       letter-spacing: -2px;
       line-height: 1;
     }
 
-    .nut-kcal-unit { font-size: 14px; font-weight: 400; color: rgba(255,255,255,.75); margin-top: 4px; }
+    .nut-kcal-unit { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 5px; line-height: 1.5; }
+
+    .nut-activity-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 11px;
+      font-weight: 600;
+      background: rgba(255,255,255,0.18);
+      border: 1px solid rgba(255,255,255,0.15);
+      padding: 5px 12px;
+      border-radius: var(--pill);
+      white-space: nowrap;
+    }
 
     .nut-stats-row {
       display: grid;
       grid-template-columns: repeat(3,1fr);
       gap: 8px;
-      margin-bottom: 24px;
+      margin-bottom: 20px;
       padding: 14px;
       background: rgba(0,0,0,0.14);
       border-radius: var(--r-md);
@@ -678,11 +785,7 @@
     .nut-stat-lbl { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 4px; }
     .nut-stat-val { font-size: 14px; font-weight: 700; color: white; }
 
-    .nut-divider {
-      border: none;
-      border-top: 1px solid rgba(255,255,255,.15);
-      margin-bottom: 18px;
-    }
+    .nut-divider { border: none; border-top: 1px solid rgba(255,255,255,.15); margin-bottom: 16px; }
 
     .nut-log-title {
       font-size: 11px;
@@ -691,12 +794,40 @@
       text-transform: uppercase;
       color: rgba(255,255,255,.65);
       margin-bottom: 12px;
+    }
+
+    /* Weight trend mini-chart */
+    .weight-trend {
+      display: flex;
+      align-items: flex-end;
+      gap: 5px;
+      height: 58px;
+      margin-bottom: 14px;
+      padding: 0 2px;
+    }
+
+    .wt-col {
+      flex: 1;
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: 6px;
+      justify-content: flex-end;
+      gap: 4px;
+      height: 100%;
     }
 
-    .log-entries { display: flex; flex-direction: column; gap: 6px; }
+    .wt-bar {
+      width: 100%;
+      border-radius: 4px 4px 0 0;
+      background: rgba(255,255,255,0.32);
+      transition: opacity 0.3s;
+    }
+
+    .wt-bar.current { background: white; }
+
+    .wt-day { font-size: 9px; color: rgba(255,255,255,.6); font-weight: 600; }
+
+    .log-entries { display: flex; flex-direction: column; gap: 5px; }
 
     .log-entry {
       display: flex;
@@ -708,8 +839,7 @@
     }
 
     .log-entry-icon {
-      width: 26px;
-      height: 26px;
+      width: 26px; height: 26px;
       border-radius: 7px;
       background: rgba(255,255,255,0.2);
       display: flex;
@@ -719,14 +849,10 @@
       flex-shrink: 0;
     }
 
-    .log-entry-val { font-size: 14px; font-weight: 700; color: white; flex: 1; }
+    .log-entry-val  { font-size: 14px; font-weight: 700; color: white; flex: 1; }
     .log-entry-date { font-size: 11px; color: rgba(255,255,255,.6); }
 
-    .log-fab {
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 16px;
-    }
+    .log-fab { display: flex; justify-content: flex-end; margin-top: 14px; }
 
     .log-fab-btn {
       display: flex;
@@ -736,7 +862,7 @@
       color: var(--sage-dark);
       font-size: 13px;
       font-weight: 700;
-      padding: 10px 18px;
+      padding: 10px 20px;
       border-radius: var(--pill);
       border: none;
       cursor: pointer;
@@ -747,8 +873,10 @@
 
     .log-fab-btn:hover { transform: translateY(-1px); }
 
-    /* ── SECTION 3: MATCH ─────────────────────── */
-    .match-section { background: var(--white); }
+    /* ──────────────────────────────────────────────
+       BENTO 3 — DISCOVERY & SOCIAL MATCHING ENGINE
+    ────────────────────────────────────────────── */
+    .match-section { background: var(--cream); }
 
     .match-section-inner {
       max-width: 1080px;
@@ -763,26 +891,43 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 20px;
+      gap: 24px;
     }
 
     .match-card {
       position: relative;
       width: 100%;
-      max-width: 280px;
-      height: 380px;
-      border-radius: var(--r-lg);
+      max-width: 292px;
+      border-radius: var(--r-xl);
       overflow: hidden;
-      background: linear-gradient(160deg, #F5A623 0%, #E8956D 55%, #C97B55 100%);
-      box-shadow: var(--sh-orange);
+      background: linear-gradient(160deg, #FFD4B8 0%, #FF9E7D 45%, #C97B55 100%);
+      box-shadow: var(--sh-warm);
+    }
+
+    .mc-portrait {
+      width: 100%;
+      height: 218px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      background: radial-gradient(ellipse at 50% 38%, rgba(255,255,255,0.2) 0%, transparent 70%);
+    }
+
+    .mc-portrait-emoji {
+      font-size: 110px;
+      line-height: 1;
+      filter: drop-shadow(0 10px 28px rgba(0,0,0,0.18));
+      animation: floatA 5.5s ease-in-out infinite;
     }
 
     .mc-topbar {
       position: absolute;
-      top: 18px; left: 18px; right: 18px;
+      top: 14px; left: 14px; right: 14px;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      z-index: 2;
     }
 
     .mc-dist {
@@ -790,50 +935,51 @@
       font-weight: 700;
       color: rgba(255,255,255,.95);
       background: rgba(0,0,0,.22);
-      backdrop-filter: blur(8px);
-      padding: 4px 11px;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      padding: 4px 12px;
       border-radius: var(--pill);
     }
 
-    .mc-pet {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -60%);
-      font-size: 92px;
-      line-height: 1;
+    .mc-heart {
+      width: 32px; height: 32px;
+      background: rgba(255,255,255,.22);
+      backdrop-filter: blur(8px);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
     }
 
     .mc-bottom {
-      position: absolute;
-      bottom: 0; left: 0; right: 0;
-      padding: 20px;
-      background: linear-gradient(to top, rgba(0,0,0,.42) 0%, transparent 100%);
+      padding: 18px 20px 20px;
+      background: linear-gradient(to top, rgba(0,0,0,.38) 0%, transparent 100%);
     }
 
     .mc-name {
-      font-size: 24px;
+      font-size: 26px;
       font-weight: 800;
       color: white;
-      letter-spacing: -0.3px;
+      letter-spacing: -0.4px;
       margin-bottom: 3px;
     }
 
     .mc-name span { font-size: 15px; font-weight: 500; opacity: .85; }
-    .mc-loc { font-size: 12px; color: rgba(255,255,255,.82); margin-bottom: 9px; }
+    .mc-loc { font-size: 12px; color: rgba(255,255,255,.82); margin-bottom: 10px; }
     .mc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
 
     .mc-tag {
       font-size: 11px;
       font-weight: 600;
-      padding: 3px 9px;
+      padding: 4px 10px;
       border-radius: var(--pill);
     }
 
-    .tag-dk { background: rgba(0,0,0,.28); color: rgba(255,255,255,.95); }
-    .tag-lt { background: rgba(255,255,255,.22); color: rgba(255,255,255,.95); }
+    .tag-dk    { background: rgba(0,0,0,.28); color: rgba(255,255,255,.95); }
+    .tag-lt    { background: rgba(255,255,255,.22); color: rgba(255,255,255,.95); }
+    .tag-green { background: rgba(91,169,154,.6); color: white; }
 
-    /* Swipe dock */
     .match-dock {
       display: flex;
       align-items: center;
@@ -842,116 +988,115 @@
     }
 
     .dock-btn {
-      width: 50px;
-      height: 50px;
+      width: 52px; height: 52px;
       border-radius: 50%;
-      border: 1.5px solid var(--border-dark);
+      border: 1.5px solid rgba(255,158,125,0.24);
       background: var(--white);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 18px;
+      font-size: 19px;
       cursor: pointer;
       box-shadow: var(--sh-sm);
       transition: transform 0.15s, box-shadow 0.15s;
     }
 
-    .dock-btn:hover { transform: scale(1.08); box-shadow: var(--sh-md); }
+    .dock-btn:hover { transform: scale(1.1); box-shadow: var(--sh-md); }
 
     .dock-btn.primary {
-      width: 62px;
-      height: 62px;
+      width: 64px; height: 64px;
       background: linear-gradient(135deg, var(--ora), var(--ora-mid));
       border-color: transparent;
-      font-size: 24px;
-      box-shadow: var(--sh-orange);
+      font-size: 26px;
+      box-shadow: var(--sh-warm);
     }
 
-    /* Filter chips */
-    .filter-chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin-top: 24px;
-    }
+    .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
 
     .fchip {
       font-size: 12.5px;
       font-weight: 600;
-      padding: 6px 14px;
+      padding: 6px 15px;
       border-radius: var(--pill);
     }
 
-    .fc-blue   { background: var(--blue-soft);  color: var(--blue-dark); border: 1px solid rgba(41,121,255,.15); }
-    .fc-ora    { background: rgba(245,166,35,.1); color: #9e6800;          border: 1px solid rgba(245,166,35,.2); }
-    .fc-sage   { background: rgba(91,169,154,.1); color: var(--sage-dark); border: 1px solid rgba(91,169,154,.2); }
-    .fc-gray   { background: rgba(0,0,0,.05);     color: var(--ink-mid);   border: 1px solid var(--border); }
+    .fc-blue { background: var(--blue-soft);           color: var(--blue-dark); border: 1px solid rgba(41,121,255,.15); }
+    .fc-ora  { background: rgba(255,158,125,.12);       color: var(--ora-dark);  border: 1px solid rgba(255,158,125,.25); }
+    .fc-sage { background: rgba(91,169,154,.1);         color: var(--sage-dark); border: 1px solid rgba(91,169,154,.2); }
+    .fc-gray { background: rgba(0,0,0,.05);             color: var(--ink-mid);   border: 1px solid var(--border); }
 
-    /* ── SECTION 4: SOCIAL + SHOP ─────────────── */
-    .shop-section { background: var(--offwhite); }
+    /* ──────────────────────────────────────────────
+       BENTO 4 — SOCIAL-COMMERCE & SPLIT DASHBOARDS
+    ────────────────────────────────────────────── */
+    .shop-section { background: #FFF8F4; }
 
-    .shop-inner {
-      max-width: 1080px;
-      margin: 0 auto;
-    }
+    .shop-inner { max-width: 1080px; margin: 0 auto; }
 
-    .shop-header {
-      text-align: center;
-      margin-bottom: 48px;
-    }
+    .shop-header { text-align: center; margin-bottom: 52px; }
 
     .shop-panels {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 20px;
+      gap: 22px;
     }
 
-    /* Social profile panel */
     .panel-social {
       background: var(--white);
-      border: 1px solid var(--border);
-      border-radius: var(--r-lg);
+      border: 1px solid rgba(255,158,125,0.15);
+      border-radius: var(--r-xl);
       overflow: hidden;
       box-shadow: var(--sh-sm);
     }
 
     .social-banner {
       background: linear-gradient(135deg, var(--blue) 0%, #5B9BFF 100%);
-      padding: 24px;
+      padding: 26px;
       display: flex;
       align-items: center;
       gap: 14px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .social-banner::after {
+      content: '';
+      position: absolute;
+      top: -20px; right: -20px;
+      width: 110px; height: 110px;
+      background: rgba(255,255,255,0.08);
+      border-radius: 50%;
     }
 
     .social-av {
-      width: 54px;
-      height: 54px;
+      width: 58px; height: 58px;
       border-radius: 50%;
       background: rgba(255,255,255,0.25);
       border: 2.5px solid rgba(255,255,255,0.5);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 26px;
+      font-size: 28px;
       flex-shrink: 0;
+      position: relative; z-index: 1;
     }
 
-    .social-name  { font-size: 17px; font-weight: 700; color: white; letter-spacing: -0.2px; }
+    .social-info { position: relative; z-index: 1; }
+    .social-name  { font-size: 18px; font-weight: 700; color: white; letter-spacing: -0.2px; }
     .social-breed { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
 
     .social-verified {
       margin-left: auto;
-      width: 28px;
-      height: 28px;
-      background: rgba(255,255,255,0.2);
+      width: 30px; height: 30px;
+      background: rgba(255,255,255,0.22);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 14px;
+      font-size: 15px;
+      position: relative; z-index: 1;
     }
 
-    .social-body { padding: 20px; }
+    .social-body { padding: 22px; }
 
     .social-stats {
       display: grid;
@@ -964,14 +1109,10 @@
       margin-bottom: 16px;
     }
 
-    .social-stat {
-      background: var(--white);
-      padding: 12px;
-      text-align: center;
-    }
+    .social-stat { background: var(--white); padding: 13px; text-align: center; }
 
-    .ss-num  { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
-    .ss-lbl  { font-size: 10.5px; color: var(--ink-lt); margin-top: 2px; }
+    .ss-num { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
+    .ss-lbl { font-size: 10.5px; color: var(--ink-lt); margin-top: 2px; }
 
     .social-btn {
       display: flex;
@@ -989,24 +1130,25 @@
       border-radius: var(--pill);
       cursor: pointer;
       transition: background 0.2s;
+      box-shadow: 0 4px 14px rgba(41,121,255,0.24);
     }
 
     .social-btn:hover { background: var(--blue-dark); }
 
     .social-feed-preview {
-      margin-top: 14px;
+      margin-top: 16px;
       display: grid;
       grid-template-columns: repeat(3,1fr);
-      gap: 3px;
+      gap: 4px;
     }
 
     .feed-thumb {
       aspect-ratio: 1;
-      border-radius: 6px;
+      border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 22px;
+      font-size: 24px;
     }
 
     .ft-1 { background: linear-gradient(135deg, #FFE4CC, #F5C0A0); }
@@ -1016,11 +1158,10 @@
     .ft-5 { background: linear-gradient(135deg, #E8F0FF, #C5D8FF); }
     .ft-6 { background: linear-gradient(135deg, #F5D5E0, #EAAAC0); }
 
-    /* Seller dashboard panel */
     .panel-seller {
       background: var(--white);
-      border: 1px solid var(--border);
-      border-radius: var(--r-lg);
+      border: 1px solid rgba(255,158,125,0.15);
+      border-radius: var(--r-xl);
       overflow: hidden;
       box-shadow: var(--sh-sm);
     }
@@ -1031,17 +1172,17 @@
       display: flex;
       align-items: center;
       gap: 12px;
+      background: linear-gradient(90deg, rgba(91,169,154,0.06) 0%, transparent 100%);
     }
 
     .seller-icon {
-      width: 42px;
-      height: 42px;
-      background: linear-gradient(135deg, #E8F5F3, #C5E8E3);
-      border-radius: 12px;
+      width: 44px; height: 44px;
+      background: linear-gradient(135deg, var(--sage-bg), #C5E8E3);
+      border-radius: 13px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 20px;
+      font-size: 21px;
     }
 
     .seller-title    { font-size: 16px; font-weight: 700; color: var(--ink); }
@@ -1049,14 +1190,13 @@
 
     .seller-arrow {
       margin-left: auto;
-      width: 28px;
-      height: 28px;
-      background: var(--offwhite);
+      width: 28px; height: 28px;
+      background: var(--peach-soft);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 14px;
+      font-size: 15px;
       color: var(--ink-lt);
     }
 
@@ -1069,9 +1209,9 @@
     }
 
     .sel-stat {
-      background: var(--offwhite);
+      background: var(--peach-soft);
       border-radius: var(--r-sm);
-      padding: 12px;
+      padding: 13px;
       text-align: center;
     }
 
@@ -1100,13 +1240,12 @@
     .product-row:last-child { border-bottom: none; }
 
     .product-thumb {
-      width: 38px;
-      height: 38px;
-      border-radius: 10px;
+      width: 40px; height: 40px;
+      border-radius: 11px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 18px;
+      font-size: 19px;
       flex-shrink: 0;
     }
 
@@ -1117,12 +1256,7 @@
     .product-name  { font-size: 13px; font-weight: 600; color: var(--ink); }
     .product-stock { font-size: 11px; color: var(--ink-lt); margin-top: 1px; }
 
-    .product-price {
-      margin-left: auto;
-      font-size: 14px;
-      font-weight: 700;
-      color: var(--ink);
-    }
+    .product-price { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--ink); }
 
     .product-status {
       font-size: 10.5px;
@@ -1131,55 +1265,117 @@
       border-radius: var(--pill);
     }
 
-    .ps-live    { background: rgba(91,169,154,.12); color: var(--sage-dark); }
-    .ps-draft   { background: rgba(245,166,35,.12); color: #9e6800; }
-    .ps-sold    { background: rgba(41,121,255,.1);  color: var(--blue-dark); }
+    .ps-live  { background: rgba(91,169,154,.12); color: var(--sage-dark); }
+    .ps-draft { background: rgba(245,166,35,.12); color: #9e6800; }
+    .ps-sold  { background: rgba(41,121,255,.1);  color: var(--blue-dark); }
 
-    /* ── FINAL CTA ────────────────────────────── */
+    /* ── FINAL CTA ───────────────────────────────── */
     .final-section {
-      background: var(--blue);
-      padding: 96px 48px;
+      background: linear-gradient(135deg, #2979FF 0%, #1A5EC9 60%, #0D3D8A 100%);
+      padding: 108px 48px;
       text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .final-section::before {
+      content: '';
+      position: absolute;
+      top: -80px; left: -80px;
+      width: 420px; height: 420px;
+      background: rgba(255,255,255,0.05);
+      border-radius: 50%;
+    }
+
+    .final-section::after {
+      content: '';
+      position: absolute;
+      bottom: -100px; right: -60px;
+      width: 380px; height: 380px;
+      background: rgba(255,255,255,0.04);
+      border-radius: 50%;
+    }
+
+    .final-inner { position: relative; z-index: 1; }
+
+    .final-eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      font-size: 12px;
+      font-weight: 600;
+      color: rgba(255,255,255,.8);
+      background: rgba(255,255,255,0.12);
+      border: 1px solid rgba(255,255,255,0.22);
+      padding: 5px 14px;
+      border-radius: var(--pill);
+      margin-bottom: 20px;
     }
 
     .final-headline {
-      font-size: clamp(32px, 5vw, 56px);
+      font-size: clamp(32px, 5vw, 58px);
       font-weight: 800;
-      letter-spacing: -1px;
-      line-height: 1.08;
+      letter-spacing: -1.2px;
+      line-height: 1.07;
       color: white;
-      margin-bottom: 16px;
+      margin-bottom: 18px;
     }
 
     .final-sub {
       font-size: 18px;
       color: rgba(255,255,255,.78);
       line-height: 1.65;
-      margin-bottom: 36px;
-      max-width: 480px;
+      margin-bottom: 38px;
+      max-width: 460px;
       margin-left: auto;
       margin-right: auto;
     }
 
+    .final-btns {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
     .final-btn {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
       font-size: 17px;
       font-weight: 700;
       color: var(--blue);
       background: white;
-      padding: 14px 32px;
+      padding: 14px 34px;
       border-radius: var(--pill);
       text-decoration: none;
-      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+      box-shadow: 0 8px 32px rgba(0,0,0,0.22);
       transition: transform 0.15s, box-shadow 0.15s;
     }
 
-    .final-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,0.22); }
+    .final-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 42px rgba(0,0,0,0.28); }
 
-    /* ── FOOTER ───────────────────────────────── */
+    .final-btn-ghost {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 17px;
+      font-weight: 600;
+      color: rgba(255,255,255,.88);
+      background: rgba(255,255,255,0.12);
+      border: 1.5px solid rgba(255,255,255,.26);
+      padding: 14px 34px;
+      border-radius: var(--pill);
+      text-decoration: none;
+      transition: background 0.2s, transform 0.15s;
+    }
+
+    .final-btn-ghost:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
+
+    /* ── FOOTER ──────────────────────────────────── */
     footer {
-      background: var(--offwhite);
-      border-top: 1px solid var(--border);
+      background: var(--cream);
+      border-top: 1px solid rgba(255,158,125,0.14);
       padding: 40px 48px;
       display: flex;
       align-items: center;
@@ -1188,18 +1384,12 @@
       gap: 16px;
     }
 
-    .footer-brand {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      text-decoration: none;
-    }
+    .footer-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
 
     .footer-icon {
-      width: 30px;
-      height: 30px;
-      background: var(--blue);
-      border-radius: 8px;
+      width: 32px; height: 32px;
+      background: linear-gradient(135deg, var(--ora-mid), var(--blue));
+      border-radius: 9px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -1214,48 +1404,54 @@
 
     .footer-copy { font-size: 12px; color: var(--ink-xl); }
 
-    /* ── RESPONSIVE ───────────────────────────── */
+    /* ── RESPONSIVE ──────────────────────────────── */
     @media (max-width: 960px) {
       nav { padding: 0 20px; }
 
-      .section          { padding: 72px 24px; }
-      .section-inner,
-      .match-section-inner { grid-template-columns: 1fr; gap: 48px; }
+      .proof-strip { padding: 18px 24px; gap: 24px; }
+      .proof-div   { display: none; }
 
-      .shop-panels { grid-template-columns: 1fr; }
+      .section { padding: 72px 24px; }
+
+      .section-inner,
+      .match-section-inner { grid-template-columns: 1fr; gap: 44px; }
 
       .nutrition-section .section-inner { grid-template-columns: 1fr; }
 
-      .final-section { padding: 72px 24px; }
+      .shop-panels { grid-template-columns: 1fr; }
 
-      footer {
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 28px 24px;
-      }
+      .final-section { padding: 80px 24px; }
 
+      footer { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
       .footer-links { flex-wrap: wrap; gap: 14px; }
     }
 
     @media (max-width: 600px) {
-      .hero { padding: 100px 20px 64px; }
-      .wl-card { padding: 24px 18px; }
+      .hero { padding: 112px 20px 76px; }
+      .hd1,.hd2,.hd3,.hd4,.hd5,.hd6 { display: none; }
+
+      .wl-card { padding: 24px 20px; }
       .form-row { grid-template-columns: 1fr; }
 
-      .care-card, .nutrition-card { padding: 22px; }
-      .match-card { max-width: 100%; }
+      .care-card,
+      .nutrition-card { padding: 22px; }
+
+      .match-card  { max-width: 100%; }
+      .mc-portrait { height: 180px; }
+      .mc-portrait-emoji { font-size: 86px; }
 
       .shop-section { padding: 64px 20px; }
-      .shop-inner { padding: 0; }
+      .final-section { padding: 72px 20px; }
 
-      .social-stats,
-      .nut-stats-row { grid-template-columns: repeat(3,1fr); }
+      .final-btns { flex-direction: column; align-items: center; }
+      .final-btn,
+      .final-btn-ghost { width: 100%; max-width: 300px; justify-content: center; }
     }
   </style>
 </head>
 <body>
 
-<!-- ── NAV ──────────────────────────────────────── -->
+<!-- ── NAV ──────────────────────────────────────────── -->
 <nav>
   <a class="nav-brand" href="#">
     <div class="nav-icon">🐾</div>
@@ -1265,9 +1461,20 @@
   <a class="nav-cta" href="#waitlist">Join Waitlist</a>
 </nav>
 
-<!-- ── HERO ─────────────────────────────────────── -->
+<!-- ── HERO ─────────────────────────────────────────── -->
 <section class="hero" id="waitlist">
-  <div class="hero-icon">🐾</div>
+  <!-- Floating decorative pets -->
+  <div class="hero-deco hd1">🐕</div>
+  <div class="hero-deco hd2">🐈</div>
+  <div class="hero-deco hd3">🦜</div>
+  <div class="hero-deco hd4">🐇</div>
+  <div class="hero-deco hd5">🐠</div>
+  <div class="hero-deco hd6">🦎</div>
+
+  <div class="hero-icon-wrap">
+    <div class="hero-icon">🐾</div>
+    <div class="hero-icon-ring"></div>
+  </div>
 
   <div class="hero-eyebrow">
     <span class="eyebrow-dot"></span>
@@ -1275,7 +1482,7 @@
   </div>
 
   <h1 class="hero-headline">
-    Your pet's world,<br>beautifully organized.
+    Your pet's world,<br><em>beautifully organized.</em>
   </h1>
 
   <p class="hero-sub">
@@ -1283,6 +1490,7 @@ <h1 class="hero-headline">
     The all-in-one app for modern pet parents.
   </p>
 
+  <!-- Waitlist Card -->
   <div class="wl-card">
     <div class="wl-counter">
       <div class="counter-avatars">
@@ -1298,8 +1506,8 @@ <h1 class="hero-headline">
 
     <div id="form-state">
       <div class="form-row">
-        <input class="form-input" type="text"  id="firstName" placeholder="Your name"     autocomplete="given-name" />
-        <input class="form-input" type="email" id="email"     placeholder="Email address" autocomplete="email" />
+        <input class="form-input" type="text"   id="firstName" placeholder="Your name"       autocomplete="given-name" />
+        <input class="form-input" type="email"  id="email"     placeholder="Email address"   autocomplete="email" />
       </div>
       <div class="form-row">
         <select class="form-select" id="petType" onchange="this.classList.add('has-val')">
@@ -1334,12 +1542,47 @@ <h1 class="hero-headline">
   </div>
 </section>
 
-<!-- ── SECTION 1: CARE DASHBOARD ─────────────────── -->
+<!-- ── SOCIAL PROOF STRIP ────────────────────────────── -->
+<div class="proof-strip">
+  <div class="proof-item">
+    <div class="proof-icon pi-ora">🐾</div>
+    <div>
+      <div class="proof-text-num">847+</div>
+      <div class="proof-text-lbl">Pet parents joined</div>
+    </div>
+  </div>
+  <div class="proof-div"></div>
+  <div class="proof-item">
+    <div class="proof-icon pi-sage">🏥</div>
+    <div>
+      <div class="proof-text-num">NRC-based</div>
+      <div class="proof-text-lbl">Nutrition engine</div>
+    </div>
+  </div>
+  <div class="proof-div"></div>
+  <div class="proof-item">
+    <div class="proof-icon pi-blue">🤝</div>
+    <div>
+      <div class="proof-text-num">Geo-social</div>
+      <div class="proof-text-lbl">Playdate matching</div>
+    </div>
+  </div>
+  <div class="proof-div"></div>
+  <div class="proof-item">
+    <div class="proof-icon pi-pink">🛍️</div>
+    <div>
+      <div class="proof-text-num">Built-in</div>
+      <div class="proof-text-lbl">Pet marketplace</div>
+    </div>
+  </div>
+</div>
+
+<!-- ── BENTO 1: CARE STREAKS & DASHBOARD ─────────────── -->
 <section class="section care-section" id="care">
   <div class="section-inner">
 
     <div class="reveal">
-      <span class="sec-eyebrow" style="background:rgba(245,166,35,.12);color:#9e6800;border:1px solid rgba(245,166,35,.2)">
+      <span class="sec-eyebrow" style="background:rgba(255,158,125,.14);color:#C97B55;border:1px solid rgba(255,158,125,.28)">
         🔥 Care &amp; Streaks
       </span>
       <h2 class="sec-headline">Build daily habits.<br>Earn your streak.</h2>
@@ -1365,11 +1608,10 @@ <h2 class="sec-headline">Build daily habits.<br>Earn your streak.</h2>
 
       <div class="ring-row">
         <div class="ring-wrap">
-          <!-- r=34, circumference ≈ 213.6 -->
-          <svg width="80" height="80" viewBox="0 0 80 80">
-            <circle cx="40" cy="40" r="34" fill="none" stroke="rgba(255,255,255,.25)" stroke-width="7"/>
-            <circle cx="40" cy="40" r="34" fill="none" stroke="white" stroke-width="7"
-              stroke-dasharray="213.6" stroke-dashoffset="0" stroke-linecap="round"/>
+          <svg width="84" height="84" viewBox="0 0 84 84">
+            <circle cx="42" cy="42" r="35" fill="none" stroke="rgba(255,255,255,.25)" stroke-width="7"/>
+            <circle cx="42" cy="42" r="35" fill="none" stroke="white" stroke-width="7"
+              stroke-dasharray="219.9" stroke-dashoffset="0" stroke-linecap="round"/>
           </svg>
           <div class="ring-center">
             <span class="ring-big">3</span>
@@ -1378,7 +1620,7 @@ <h2 class="sec-headline">Build daily habits.<br>Earn your streak.</h2>
         </div>
         <div>
           <div class="ring-info-title">7 day streak 🔥</div>
-          <div class="ring-info-sub">3 of 3 tasks complete today</div>
+          <div class="ring-info-sub">3 of 3 tasks complete today<br>Keep the momentum going!</div>
         </div>
       </div>
 
@@ -1423,12 +1665,12 @@ <h2 class="sec-headline">Build daily habits.<br>Earn your streak.</h2>
   </div>
 </section>
 
-<!-- ── SECTION 2: NUTRITION ───────────────────────── -->
+<!-- ── BENTO 2: SMART NUTRITION & MEDICAL VAULT ───────── -->
 <section class="section nutrition-section" id="nutrition">
   <div class="section-inner" style="direction:rtl">
 
     <div class="reveal" style="direction:ltr">
-      <span class="sec-eyebrow" style="background:rgba(91,169,154,.12);color:#3D8A7D;border:1px solid rgba(91,169,154,.2)">
+      <span class="sec-eyebrow" style="background:rgba(91,169,154,.12);color:#3D8A7D;border:1px solid rgba(91,169,154,.22)">
         🥩 Smart Nutrition
       </span>
       <h2 class="sec-headline">Science-backed<br>nutrition tracking.</h2>
@@ -1443,7 +1685,10 @@ <h2 class="sec-headline">Science-backed<br>nutrition tracking.</h2>
           <div>
             <div class="nut-label">Smart Nutrition</div>
             <div class="nut-kcal-big">1292</div>
-            <div class="nut-kcal-unit">kcal / day recommended</div>
+            <div class="nut-kcal-unit">kcal / day recommended<br>based on activity factor</div>
+          </div>
+          <div style="flex-shrink:0;text-align:right">
+            <div class="nut-activity-tag">🏃 Moderate</div>
           </div>
         </div>
 
@@ -1464,8 +1709,30 @@ <h2 class="sec-headline">Science-backed<br>nutrition tracking.</h2>
 
         <hr class="nut-divider">
 
-        <div class="nut-log-title">
-          🕐 Log History
+        <div class="nut-log-title">📊 Weight Trend · Last 5 logs</div>
+
+        <!-- Mini bar chart -->
+        <div class="weight-trend">
+          <div class="wt-col">
+            <div class="wt-bar" style="height:45%"></div>
+            <div class="wt-day">12</div>
+          </div>
+          <div class="wt-col">
+            <div class="wt-bar" style="height:50%"></div>
+            <div class="wt-day">13</div>
+          </div>
+          <div class="wt-col">
+            <div class="wt-bar" style="height:55%"></div>
+            <div class="wt-day">14</div>
+          </div>
+          <div class="wt-col">
+            <div class="wt-bar" style="height:60%"></div>
+            <div class="wt-day">15</div>
+          </div>
+          <div class="wt-col">
+            <div class="wt-bar current" style="height:100%"></div>
+            <div class="wt-day">16</div>
+          </div>
         </div>
 
         <div class="log-entries">
@@ -1479,11 +1746,6 @@ <h2 class="sec-headline">Science-backed<br>nutrition tracking.</h2>
             <span class="log-entry-val">1.00 kg</span>
             <span class="log-entry-date">2026/05/13</span>
           </div>
-          <div class="log-entry">
-            <div class="log-entry-icon">📊</div>
-            <span class="log-entry-val">1.10 kg</span>
-            <span class="log-entry-date">2026/05/14</span>
-          </div>
           <div class="log-entry">
             <div class="log-entry-icon">📊</div>
             <span class="log-entry-val">1.20 kg</span>
@@ -1491,8 +1753,8 @@ <h2 class="sec-headline">Science-backed<br>nutrition tracking.</h2>
           </div>
           <div class="log-entry">
             <div class="log-entry-icon">📊</div>
-            <span class="log-entry-val">2.00 kg</span>
-            <span class="log-entry-date">2026/05/16</span>
+            <span class="log-entry-val" style="color:#7dffca">2.00 kg</span>
+            <span class="log-entry-date">2026/05/16 · Latest</span>
           </div>
         </div>
 
@@ -1505,12 +1767,12 @@ <h2 class="sec-headline">Science-backed<br>nutrition tracking.</h2>
   </div>
 </section>
 
-<!-- ── SECTION 3: MATCH ───────────────────────────── -->
+<!-- ── BENTO 3: DISCOVERY & SOCIAL MATCHING ENGINE ───── -->
 <section class="section match-section" id="match">
   <div class="match-section-inner">
 
     <div class="reveal">
-      <span class="sec-eyebrow" style="background:rgba(245,166,35,.12);color:#9e6800;border:1px solid rgba(245,166,35,.2)">
+      <span class="sec-eyebrow" style="background:rgba(255,158,125,.12);color:#C97B55;border:1px solid rgba(255,158,125,.26)">
         🐾 Discover &amp; Match
       </span>
       <h2 class="sec-headline">Find the perfect<br>playdate match.</h2>
@@ -1527,17 +1789,20 @@ <h2 class="sec-headline">Find the perfect<br>playdate match.</h2>
 
     <div class="match-card-wrap reveal">
       <div class="match-card">
+        <div class="mc-portrait">
+          <div class="mc-portrait-emoji">🦎</div>
+        </div>
         <div class="mc-topbar">
           <span class="mc-dist">📍 Within 2 miles</span>
+          <div class="mc-heart">🤍</div>
         </div>
-        <div class="mc-pet">🐕</div>
         <div class="mc-bottom">
           <div class="mc-name">Ziggy <span>4yr</span></div>
           <div class="mc-loc">📍 Within 2 miles · Leopard Gecko</div>
           <div class="mc-tags">
             <span class="mc-tag tag-dk">Reptile</span>
-            <span class="mc-tag tag-lt">Medium · 45–60 min daily</span>
-            <span class="mc-tag tag-dk">Friendly</span>
+            <span class="mc-tag tag-lt">45–60 min daily</span>
+            <span class="mc-tag tag-green">Friendly</span>
             <span class="mc-tag tag-dk">Playful</span>
             <span class="mc-tag tag-dk">Good on lead</span>
           </div>
@@ -1547,8 +1812,8 @@ <h2 class="sec-headline">Find the perfect<br>playdate match.</h2>
       <div class="match-dock">
         <div class="dock-btn" title="Pass">✕</div>
         <div class="dock-btn" title="Wave">👋</div>
-        <div class="dock-btn primary" title="Match">🐾</div>
-        <div class="dock-btn" title="Super-like">⭐</div>
+        <div class="dock-btn primary" title="Like">🐾</div>
+        <div class="dock-btn" title="Super-star">⭐</div>
         <div class="dock-btn" title="Boost">⚡</div>
       </div>
     </div>
@@ -1556,7 +1821,7 @@ <h2 class="sec-headline">Find the perfect<br>playdate match.</h2>
   </div>
 </section>
 
-<!-- ── SECTION 4: SOCIAL + SHOP ──────────────────── -->
+<!-- ── BENTO 4: SOCIAL-COMMERCE & SPLIT DASHBOARDS ───── -->
 <section class="section shop-section" id="shop">
   <div class="shop-inner reveal">
     <div class="shop-header">
@@ -1570,11 +1835,11 @@ <h2 class="sec-headline" style="margin-top:10px">Your pet's public profile<br>&a
     </div>
 
     <div class="shop-panels">
-      <!-- Social Profile -->
+      <!-- Social Profile Panel -->
       <div class="panel-social">
         <div class="social-banner">
           <div class="social-av">🐱</div>
-          <div>
+          <div class="social-info">
             <div class="social-name">Montu</div>
             <div class="social-breed">Persian · 2 yrs · Male</div>
           </div>
@@ -1596,7 +1861,7 @@ <h2 class="sec-headline" style="margin-top:10px">Your pet's public profile<br>&a
             </div>
           </div>
           <button class="social-btn">🔗 View Social Profile</button>
-          <div class="social-feed-preview" style="margin-top:14px">
+          <div class="social-feed-preview">
             <div class="feed-thumb ft-1">🐱</div>
             <div class="feed-thumb ft-2">🌳</div>
             <div class="feed-thumb ft-3">🐾</div>
@@ -1607,7 +1872,7 @@ <h2 class="sec-headline" style="margin-top:10px">Your pet's public profile<br>&a
         </div>
       </div>
 
-      <!-- Seller Dashboard -->
+      <!-- Seller Dashboard Panel -->
       <div class="panel-seller">
         <div class="seller-header">
           <div class="seller-icon">🏪</div>
@@ -1641,9 +1906,7 @@ <h2 class="sec-headline" style="margin-top:10px">Your pet's public profile<br>&a
               <div class="product-name">Organic Dog Treats</div>
               <div class="product-stock">24 in stock</div>
             </div>
-            <div>
-              <div class="product-price">$12.99</div>
-            </div>
+            <div class="product-price">$12.99</div>
             <div class="product-status ps-live">Live</div>
           </div>
           <div class="product-row">
@@ -1652,9 +1915,7 @@ <h2 class="sec-headline" style="margin-top:10px">Your pet's public profile<br>&a
               <div class="product-name">Interactive Fetch Toy</div>
               <div class="product-stock">8 in stock</div>
             </div>
-            <div>
-              <div class="product-price">$24.50</div>
-            </div>
+            <div class="product-price">$24.50</div>
             <div class="product-status ps-draft">Draft</div>
           </div>
           <div class="product-row">
@@ -1663,9 +1924,7 @@ <h2 class="sec-headline" style="margin-top:10px">Your pet's public profile<br>&a
               <div class="product-name">Grooming Shampoo Set</div>
               <div class="product-stock">Sold out</div>
             </div>
-            <div>
-              <div class="product-price">$18.00</div>
-            </div>
+            <div class="product-price">$18.00</div>
             <div class="product-status ps-sold">Sold out</div>
           </div>
         </div>
@@ -1674,17 +1933,26 @@ <h2 class="sec-headline" style="margin-top:10px">Your pet's public profile<br>&a
   </div>
 </section>
 
-<!-- ── FINAL CTA ──────────────────────────────────── -->
+<!-- ── FINAL CTA ──────────────────────────────────────── -->
 <section class="final-section reveal">
-  <h2 class="final-headline">Give your pet the life<br>they deserve.</h2>
-  <p class="final-sub">
-    Join thousands of pet parents on the waitlist.<br>
-    Beta users get premium features — free, forever.
-  </p>
-  <a class="final-btn" href="#waitlist">🐾 &nbsp;Join the waitlist</a>
+  <div class="final-inner">
+    <div class="final-eyebrow">
+      <span class="eyebrow-dot" style="background:rgba(255,255,255,.7)"></span>
+      Limited beta spots remaining
+    </div>
+    <h2 class="final-headline">Give your pet the life<br>they deserve.</h2>
+    <p class="final-sub">
+      Join thousands of pet parents on the waitlist.<br>
+      Beta users get premium features — free, forever.
+    </p>
+    <div class="final-btns">
+      <a class="final-btn" href="#waitlist">🐾 &nbsp;Join the waitlist</a>
+      <a class="final-btn-ghost" href="#care">See features →</a>
+    </div>
+  </div>
 </section>
 
-<!-- ── FOOTER ─────────────────────────────────────── -->
+<!-- ── FOOTER ─────────────────────────────────────────── -->
 <footer>
   <a class="footer-brand" href="#">
     <div class="footer-icon">🐾</div>