diff --git a/templates/index.html b/templates/index.html
index a177358..ad27f0a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -13,271 +13,265 @@
   <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 ────────────────────────────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+    /* ── TOKENS ───────────────────────────────── */
     :root {
-      --white:    #ffffff;
-      --off:      #f5f5f7;
-      --dark:     #1d1d1f;
-      --mid:      #424245;
-      --muted:    #6e6e73;
-      --line:     #d2d2d7;
-      --line-dark: rgba(255,255,255,0.12);
-      --blue:     #2979FF;
-      --blue-dark: #1a5ec9;
-      --blue-a:   #0071e3;   /* Apple CTA blue */
-      --orange:   #F5A623;
-      --peach:    #E8956D;
-      --sage:     #5BA99A;
+      /* 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 */
+      --ora:         #F5A623;
+      --ora-mid:     #E8956D;
+      --ora-dark:    #C97B55;
+      --ora-bg:      #FFF6EE;
+      --ora-border:  rgba(245,166,35,0.18);
+
+      /* 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;
+
+      /* 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);
+
+      /* Geometry */
+      --pill: 100px;
+      --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);
     }
 
     html { scroll-behavior: smooth; }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
       background: var(--white);
-      color: var(--dark);
+      color: var(--ink);
       overflow-x: hidden;
       -webkit-font-smoothing: antialiased;
     }
 
-    /* ── GLOBAL NAV ─────────────────────────────── */
-    .gnav {
+    /* ── NAV ──────────────────────────────────── */
+    nav {
       position: fixed;
       inset: 0 0 auto 0;
-      z-index: 300;
-      height: 44px;
-      background: rgba(255,255,255,0.85);
-      backdrop-filter: saturate(180%) blur(20px);
-      -webkit-backdrop-filter: saturate(180%) blur(20px);
-      border-bottom: 1px solid rgba(0,0,0,0.07);
+      z-index: 200;
+      height: 60px;
       display: flex;
       align-items: center;
-      justify-content: center;
-      gap: 28px;
+      justify-content: space-between;
+      padding: 0 40px;
+      background: rgba(255,255,255,0.90);
+      backdrop-filter: blur(20px) saturate(180%);
+      -webkit-backdrop-filter: blur(20px) saturate(180%);
+      border-bottom: 1px solid var(--border);
     }
 
-    .gnav-logo {
-      font-size: 20px;
-      font-weight: 600;
-      color: var(--dark);
-      text-decoration: none;
-      letter-spacing: -0.3px;
+    .nav-brand {
       display: flex;
       align-items: center;
-      gap: 7px;
+      gap: 10px;
+      text-decoration: none;
     }
 
-    .gnav-logo-icon {
-      width: 26px;
-      height: 26px;
+    .nav-icon {
+      width: 36px;
+      height: 36px;
       background: var(--blue);
-      border-radius: 6px;
+      border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 13px;
+      font-size: 18px;
     }
 
-    /* ── LOCAL / SUB-NAV ────────────────────────── */
-    .lnav {
-      position: fixed;
-      top: 44px;
-      left: 0; right: 0;
-      z-index: 299;
-      height: 52px;
-      background: rgba(255,255,255,0.9);
-      backdrop-filter: saturate(180%) blur(20px);
-      -webkit-backdrop-filter: saturate(180%) blur(20px);
-      border-bottom: 1px solid rgba(0,0,0,0.07);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0;
+    .nav-name {
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--ink);
+      letter-spacing: -0.3px;
     }
 
-    .lnav-title {
-      font-size: 17px;
+    .nav-badge {
+      font-size: 11px;
       font-weight: 600;
-      color: var(--dark);
-      letter-spacing: -0.2px;
-      padding: 0 20px;
-      border-right: 1px solid var(--line);
-    }
-
-    .lnav-links {
-      display: flex;
-      list-style: none;
-    }
-
-    .lnav-links a {
-      display: block;
-      font-size: 12px;
-      font-weight: 400;
-      color: var(--muted);
-      text-decoration: none;
-      padding: 0 14px;
-      height: 52px;
-      line-height: 52px;
-      border-right: 1px solid var(--line);
-      transition: color 0.2s;
+      color: var(--blue);
+      background: var(--blue-soft);
+      border: 1px solid rgba(41,121,255,0.2);
+      padding: 2px 9px;
+      border-radius: var(--pill);
     }
 
-    .lnav-links a:hover { color: var(--dark); }
-
-    .lnav-cta {
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--blue-a);
+    .nav-cta {
+      font-size: 14px;
+      font-weight: 600;
+      color: white;
+      background: var(--blue);
+      padding: 9px 20px;
+      border-radius: var(--pill);
       text-decoration: none;
-      padding: 0 20px;
+      transition: background 0.2s, transform 0.15s;
     }
 
-    .lnav-cta:hover { text-decoration: underline; }
+    .nav-cta:hover { background: var(--blue-dark); transform: translateY(-1px); }
 
-    /* ── HERO ───────────────────────────────────── */
+    /* ── HERO ─────────────────────────────────── */
     .hero {
-      background: var(--white);
-      padding: 160px 24px 100px;
+      padding: 120px 24px 80px;
       text-align: center;
+      background: var(--white);
     }
 
-    .hero-product {
-      font-size: 19px;
-      font-weight: 600;
-      color: var(--muted);
-      letter-spacing: -0.2px;
-      margin-bottom: 8px;
-    }
-
-    .hero-headline {
-      font-size: clamp(48px, 8vw, 96px);
-      font-weight: 700;
-      letter-spacing: -2px;
-      line-height: 1.04;
-      color: var(--dark);
-      margin-bottom: 20px;
-    }
-
-    .hero-sub {
-      font-size: clamp(17px, 2.2vw, 21px);
-      font-weight: 400;
-      color: var(--muted);
-      line-height: 1.6;
-      margin-bottom: 36px;
-    }
-
-    .hero-ctas {
+    .hero-icon {
+      width: 88px;
+      height: 88px;
+      background: var(--blue);
+      border-radius: 22px;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 20px;
-      flex-wrap: wrap;
+      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;
     }
 
-    .btn-primary {
-      display: inline-block;
-      font-size: 17px;
-      font-weight: 400;
-      color: var(--white);
-      background: var(--blue-a);
-      padding: 12px 22px;
-      border-radius: 980px;
-      text-decoration: none;
-      transition: background 0.2s;
+    @keyframes popIn {
+      from { opacity: 0; transform: scale(0.7); }
+      to   { opacity: 1; transform: scale(1); }
     }
 
-    .btn-primary:hover { background: #0077ed; }
-
-    .btn-link {
-      font-size: 17px;
-      font-weight: 400;
-      color: var(--blue-a);
-      text-decoration: none;
+    .hero-eyebrow {
+      display: inline-flex;
+      align-items: center;
+      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;
+      border-radius: var(--pill);
+      margin-bottom: 20px;
+      animation: fadeUp 0.5s 0.1s ease both;
     }
 
-    .btn-link:hover { text-decoration: underline; }
+    .eyebrow-dot {
+      width: 6px;
+      height: 6px;
+      background: var(--blue);
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
 
-    /* ── WAITLIST SECTION ───────────────────────── */
-    .waitlist-sec {
-      background: var(--off);
-      padding: 80px 24px;
+    @keyframes pulse {
+      0%,100% { opacity:1; transform:scale(1); }
+      50%      { opacity:.4; transform:scale(.6); }
     }
 
-    .waitlist-inner {
-      max-width: 500px;
-      margin: 0 auto;
-      text-align: center;
+    .hero-headline {
+      font-size: clamp(38px, 6vw, 68px);
+      font-weight: 800;
+      letter-spacing: -1.5px;
+      line-height: 1.06;
+      color: var(--ink);
+      margin-bottom: 18px;
+      animation: fadeUp 0.5s 0.15s ease both;
+      max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
     }
 
-    .wl-eyebrow {
-      font-size: 12px;
-      font-weight: 600;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      color: var(--muted);
-      margin-bottom: 8px;
+    .hero-sub {
+      font-size: clamp(16px, 2vw, 18px);
+      color: var(--ink-lt);
+      line-height: 1.7;
+      max-width: 500px;
+      margin: 0 auto 44px;
+      animation: fadeUp 0.5s 0.2s ease both;
     }
 
-    .wl-title {
-      font-size: clamp(28px, 4vw, 40px);
-      font-weight: 700;
-      letter-spacing: -0.8px;
-      color: var(--dark);
-      margin-bottom: 8px;
+    @keyframes fadeUp {
+      from { opacity:0; transform:translateY(18px); }
+      to   { opacity:1; transform:none; }
     }
 
-    .wl-sub {
-      font-size: 15px;
-      color: var(--muted);
-      margin-bottom: 32px;
-      line-height: 1.6;
+    /* ── WAITLIST CARD ────────────────────────── */
+    .wl-card {
+      background: var(--white);
+      border: 1px solid var(--border-dark);
+      border-radius: var(--r-lg);
+      padding: 36px;
+      max-width: 480px;
+      margin: 0 auto;
+      box-shadow: var(--sh-md);
+      animation: fadeUp 0.5s 0.25s ease both;
     }
 
-    .wl-counter-row {
+    .wl-counter {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       margin-bottom: 28px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid var(--border);
     }
 
     .counter-avatars { display: flex; }
 
     .c-av {
-      width: 26px;
-      height: 26px;
+      width: 28px;
+      height: 28px;
       border-radius: 50%;
-      border: 2px solid var(--off);
-      margin-left: -5px;
-      font-size: 13px;
+      border: 2px solid var(--white);
+      margin-left: -6px;
+      font-size: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: rgba(41,121,255,0.07);
+      background: var(--offwhite);
     }
 
     .c-av:first-child { margin-left: 0; }
 
-    .wl-count-label {
+    .wl-count-text {
       font-size: 13px;
-      color: var(--muted);
+      color: var(--ink-lt);
     }
 
-    .wl-count-label strong {
-      color: var(--dark);
-      font-weight: 600;
+    .wl-count-text strong {
+      color: var(--ink);
+      font-weight: 700;
       font-variant-numeric: tabular-nums;
     }
 
-    .wl-card {
-      background: var(--white);
-      border: 1px solid var(--line);
-      border-radius: 18px;
-      padding: 32px;
-      text-align: left;
-    }
-
+    /* Pill inputs */
     .form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -288,35 +282,37 @@
     .form-input,
     .form-select {
       width: 100%;
-      padding: 12px 14px;
+      padding: 14px 20px;
       font-size: 15px;
       font-family: inherit;
-      color: var(--dark);
-      background: var(--white);
-      border: 1px solid var(--line);
-      border-radius: 12px;
+      color: var(--ink);
+      background: var(--offwhite);
+      border: 1.5px solid transparent;
+      border-radius: var(--pill);
       outline: none;
-      transition: border-color 0.2s, box-shadow 0.2s;
+      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
       -webkit-appearance: none;
       appearance: none;
     }
 
-    .form-input::placeholder { color: var(--muted); }
+    .form-input::placeholder { color: var(--ink-xl); }
 
     .form-select {
-      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='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      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 14px center;
-      padding-right: 36px;
-      color: var(--muted);
+      background-position: right 18px center;
+      padding-right: 42px;
+      color: var(--ink-xl);
+      cursor: pointer;
     }
 
-    .form-select.sel-val { color: var(--dark); }
+    .form-select.has-val { color: var(--ink); }
 
     .form-input:focus,
     .form-select:focus {
-      border-color: var(--blue-a);
-      box-shadow: 0 0 0 3px rgba(0,113,227,0.2);
+      border-color: var(--blue);
+      background: var(--white);
+      box-shadow: 0 0 0 3px rgba(41,121,255,0.15);
     }
 
     input[type="number"]::-webkit-inner-spin-button,
@@ -325,506 +321,486 @@
 
     .btn-join {
       width: 100%;
-      padding: 14px;
+      padding: 15px;
       margin-top: 10px;
-      font-size: 17px;
-      font-weight: 400;
+      font-size: 16px;
+      font-weight: 700;
       font-family: inherit;
-      color: var(--white);
-      background: var(--blue-a);
+      color: white;
+      background: var(--blue);
       border: none;
-      border-radius: 980px;
+      border-radius: var(--pill);
       cursor: pointer;
-      transition: background 0.2s;
-      letter-spacing: -0.1px;
+      letter-spacing: -0.2px;
+      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
     }
 
-    .btn-join:hover    { background: #0077ed; }
-    .btn-join:active   { background: #006edb; }
-    .btn-join:disabled { opacity: .55; cursor: not-allowed; }
+    .btn-join:hover    { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--sh-blue); }
+    .btn-join:active   { transform: none; }
+    .btn-join:disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
     .form-fine {
       font-size: 12px;
-      color: var(--muted);
+      color: var(--ink-xl);
       text-align: center;
       margin-top: 14px;
-      line-height: 1.5;
     }
 
     /* Success state */
-    .success-state {
-      display: none;
-      text-align: center;
-      padding: 8px 0;
-    }
+    .success-state { display: none; text-align: center; }
 
-    .success-icon {
-      width: 60px;
-      height: 60px;
-      background: rgba(41,121,255,0.09);
+    .success-ico {
+      width: 64px;
+      height: 64px;
+      background: var(--blue-soft);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 26px;
+      font-size: 28px;
       margin: 0 auto 16px;
     }
 
-    .success-title {
-      font-size: 24px;
-      font-weight: 700;
-      letter-spacing: -0.4px;
-      color: var(--dark);
-      margin-bottom: 8px;
-    }
-
-    .success-sub {
-      font-size: 15px;
-      color: var(--muted);
-      line-height: 1.65;
-      margin-bottom: 20px;
-    }
+    .success-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); margin-bottom: 8px; }
+    .success-sub   { font-size: 14px; color: var(--ink-lt); line-height: 1.65; margin-bottom: 18px; }
 
     .success-pos {
       display: inline-block;
       font-size: 13px;
-      font-weight: 500;
-      color: var(--blue-a);
-      margin-bottom: 24px;
+      font-weight: 600;
+      color: var(--blue);
+      background: var(--blue-softer);
+      border: 1px solid rgba(41,121,255,0.15);
+      padding: 6px 16px;
+      border-radius: var(--pill);
+      margin-bottom: 22px;
     }
 
-    .share-btns {
-      display: flex;
-      gap: 8px;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
+    .share-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
 
     .share-btn {
       font-size: 13px;
-      font-weight: 400;
+      font-weight: 600;
       padding: 8px 18px;
-      border-radius: 980px;
-      border: 1px solid var(--line);
+      border-radius: var(--pill);
+      border: 1.5px solid var(--border-dark);
       background: var(--white);
-      color: var(--blue-a);
+      color: var(--blue);
       text-decoration: none;
       cursor: pointer;
-      transition: background 0.15s;
       font-family: inherit;
+      transition: background 0.15s;
     }
 
-    .share-btn:hover { background: var(--off); }
+    .share-btn:hover { background: var(--offwhite); }
 
-    /* ── 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); }
     }
 
-    /* ── SCROLL REVEAL ──────────────────────────── */
+    /* ── REVEAL ───────────────────────────────── */
     .reveal {
       opacity: 0;
-      transform: translateY(20px);
-      transition: opacity 0.7s ease, transform 0.7s ease;
+      transform: translateY(22px);
+      transition: opacity 0.65s ease, transform 0.65s ease;
     }
     .reveal.visible { opacity: 1; transform: none; }
 
-    /* ── SHARED SECTION TOKENS ──────────────────── */
+    /* ── SHARED SECTION LAYOUT ────────────────── */
+    .section {
+      padding: 96px 48px;
+    }
+
+    .section-inner {
+      max-width: 1080px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 72px;
+      align-items: center;
+    }
+
     .sec-eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
       font-size: 12px;
-      font-weight: 600;
-      letter-spacing: 0.06em;
+      font-weight: 700;
+      letter-spacing: 0.07em;
       text-transform: uppercase;
-      color: var(--muted);
-      margin-bottom: 10px;
-      display: block;
+      padding: 5px 13px;
+      border-radius: var(--pill);
+      margin-bottom: 16px;
     }
 
     .sec-headline {
-      font-size: clamp(32px, 5vw, 56px);
-      font-weight: 700;
-      letter-spacing: -1px;
-      line-height: 1.07;
-      color: var(--dark);
-      margin-bottom: 18px;
+      font-size: clamp(28px, 3.8vw, 44px);
+      font-weight: 800;
+      letter-spacing: -0.8px;
+      line-height: 1.1;
+      color: var(--ink);
+      margin-bottom: 14px;
     }
 
     .sec-body {
-      font-size: 17px;
-      font-weight: 400;
-      color: var(--muted);
-      line-height: 1.7;
+      font-size: 16px;
+      color: var(--ink-lt);
+      line-height: 1.72;
       max-width: 440px;
     }
 
-    .sec-link {
-      display: inline-block;
-      font-size: 17px;
-      color: var(--blue-a);
-      text-decoration: none;
-      margin-top: 18px;
-    }
-
-    .sec-link:hover { text-decoration: underline; }
+    /* ── SECTION 1: CARE DASHBOARD ────────────── */
+    .care-section { background: var(--ora-bg); }
 
-    /* ── SECTION: HIGHLIGHTS BENTO ──────────────── */
-    .highlights-sec {
-      background: var(--white);
-      padding: 100px 48px;
+    .care-card {
+      background: linear-gradient(145deg, #F5A623 0%, #E8956D 55%, #C97B55 100%);
+      border-radius: var(--r-lg);
+      padding: 28px;
+      box-shadow: var(--sh-orange);
+      color: white;
     }
 
-    .highlights-header {
-      text-align: center;
-      margin-bottom: 56px;
+    .care-card-top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 22px;
     }
 
-    .highlights-title {
-      font-size: clamp(32px, 4.5vw, 52px);
+    .care-label {
+      font-size: 10px;
       font-weight: 700;
-      letter-spacing: -1px;
-      color: var(--dark);
-    }
-
-    .bento {
-      max-width: 1040px;
-      margin: 0 auto;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 16px;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: rgba(255,255,255,0.75);
+      margin-bottom: 4px;
     }
 
-    .bento-tile {
-      background: var(--off);
-      border-radius: 20px;
-      padding: 40px 40px 44px;
-      overflow: hidden;
-      position: relative;
+    .care-live {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 11px;
+      font-weight: 600;
+      color: white;
+      background: rgba(255,255,255,0.22);
+      padding: 3px 10px;
+      border-radius: var(--pill);
     }
 
-    .bento-tile.dark {
-      background: var(--dark);
+    .care-live-dot {
+      width: 5px;
+      height: 5px;
+      background: #7dffca;
+      border-radius: 50%;
+      animation: pulse 1.5s infinite;
     }
 
-    .bento-tile.blue {
-      background: var(--blue);
+    .today-badge {
+      background: rgba(255,255,255,0.22);
+      border-radius: var(--r-sm);
+      padding: 8px 14px;
+      text-align: center;
     }
 
-    .bento-tile-icon {
-      font-size: 36px;
-      margin-bottom: 20px;
-      display: block;
-    }
+    .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; }
 
-    .bento-tile-name {
-      font-size: 21px;
-      font-weight: 700;
-      letter-spacing: -0.3px;
-      color: var(--dark);
-      margin-bottom: 8px;
+    /* Ring */
+    .ring-row {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      margin-bottom: 18px;
     }
 
-    .bento-tile.dark .bento-tile-name,
-    .bento-tile.blue .bento-tile-name { color: white; }
-
-    .bento-tile-desc {
-      font-size: 15px;
-      color: var(--muted);
-      line-height: 1.6;
+    .ring-wrap {
+      position: relative;
+      width: 80px;
+      height: 80px;
+      flex-shrink: 0;
     }
 
-    .bento-tile.dark .bento-tile-desc { color: rgba(255,255,255,0.62); }
-    .bento-tile.blue .bento-tile-desc { color: rgba(255,255,255,0.75); }
+    .ring-wrap svg { transform: rotate(-90deg); }
 
-    .bento-tile-stat {
+    .ring-center {
       position: absolute;
-      right: 36px;
-      bottom: 36px;
-      font-size: 64px;
-      font-weight: 700;
-      letter-spacing: -2px;
-      line-height: 1;
-      opacity: 0.12;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
     }
 
-    .bento-tile.dark .bento-tile-stat,
-    .bento-tile.blue .bento-tile-stat { color: white; opacity: 0.15; }
+    .ring-big { font-size: 22px; font-weight: 800; color: white; line-height: 1; }
+    .ring-sm  { font-size: 10px; color: rgba(255,255,255,.7); }
 
-    /* ── SECTION: HEALTH VAULT ──────────────────── */
-    .health-sec {
-      background: var(--off);
-      padding: 100px 48px;
+    .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); }
+
+    /* Streak dots */
+    .streak-dots {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 22px;
     }
 
-    .split-inner {
-      max-width: 1040px;
-      margin: 0 auto;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 80px;
+    .s-dot {
+      flex: 1;
+      height: 28px;
+      border-radius: var(--pill);
+      display: flex;
       align-items: center;
+      justify-content: center;
+      font-size: 9.5px;
+      font-weight: 700;
     }
 
-    /* Health mockup */
-    .hm {
-      background: var(--white);
-      border: 1px solid var(--line);
-      border-radius: 20px;
-      padding: 28px;
-    }
+    .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; }
 
-    .hm-hdr {
+    /* Task tiles */
+    .task-tiles { display: flex; flex-direction: column; gap: 8px; }
+
+    .task-tile {
+      background: rgba(255,255,255,0.18);
+      border-radius: var(--r-md);
+      padding: 12px 14px;
       display: flex;
       align-items: center;
-      gap: 12px;
-      margin-bottom: 20px;
+      gap: 11px;
+      backdrop-filter: blur(4px);
     }
 
-    .hm-av {
-      width: 44px;
-      height: 44px;
-      background: linear-gradient(135deg, #e0eaff, #b8d0ff);
-      border-radius: 50%;
+    .task-icon {
+      width: 34px;
+      height: 34px;
+      border-radius: 10px;
+      background: rgba(255,255,255,0.25);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 22px;
+      font-size: 16px;
       flex-shrink: 0;
     }
 
-    .hm-name  { font-size: 15px; font-weight: 600; color: var(--dark); }
-    .hm-breed { font-size: 12px; color: var(--muted); margin-top: 2px; }
+    .task-name { font-size: 13px; font-weight: 600; color: white; }
+    .task-meta { font-size: 11px; color: rgba(255,255,255,.72); margin-top: 2px; }
 
-    .hm-stats {
-      display: grid;
-      grid-template-columns: repeat(4,1fr);
-      gap: 8px;
-      margin-bottom: 16px;
+    .task-btn {
+      margin-left: auto;
+      font-size: 11px;
+      font-weight: 700;
+      padding: 6px 14px;
+      border-radius: var(--pill);
+      border: none;
+      cursor: pointer;
+      white-space: nowrap;
+      font-family: inherit;
+      flex-shrink: 0;
     }
 
-    .hm-stat {
-      background: var(--off);
-      border-radius: 10px;
-      padding: 10px 8px;
-      text-align: center;
-    }
+    .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; }
 
-    .hm-stat-lbl { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
-    .hm-stat-val { font-size: 13px; font-weight: 600; color: var(--dark); }
+    /* ── SECTION 2: NUTRITION ─────────────────── */
+    .nutrition-section { background: var(--sage-bg); }
 
-    .hm-rows { display: flex; flex-direction: column; gap: 8px; }
-
-    .hm-row {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 11px 14px;
-      background: var(--off);
-      border-radius: 12px;
+    .nutrition-card {
+      background: linear-gradient(145deg, #5BA99A 0%, #4A9087 55%, #357A6E 100%);
+      border-radius: var(--r-lg);
+      padding: 28px;
+      box-shadow: var(--sh-sage);
+      color: white;
+      position: relative;
+      overflow: hidden;
     }
 
-    .hm-row-icon {
-      width: 30px;
-      height: 30px;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 14px;
-      flex-shrink: 0;
+    .nutrition-card::before {
+      content: '';
+      position: absolute;
+      top: -40px; right: -40px;
+      width: 180px;
+      height: 180px;
+      background: rgba(255,255,255,0.07);
+      border-radius: 50%;
     }
 
-    .ic-b { background: rgba(41,121,255,0.1); }
-    .ic-g { background: rgba(91,169,154,0.1); }
-    .ic-o { background: rgba(245,166,35,0.1); }
-
-    .hm-row-title { font-size: 13px; font-weight: 600; color: var(--dark); }
-    .hm-row-meta  { font-size: 11px; color: var(--muted); margin-top: 1px; }
-
-    .pill {
-      font-size: 10px;
-      font-weight: 600;
-      padding: 3px 8px;
-      border-radius: 980px;
-      margin-left: auto;
-      white-space: nowrap;
+    .nutrition-card::after {
+      content: '';
+      position: absolute;
+      bottom: -60px; left: -30px;
+      width: 220px;
+      height: 220px;
+      background: rgba(255,255,255,0.05);
+      border-radius: 50%;
     }
 
-    .p-g { background: rgba(91,169,154,0.12); color: #3d8a7d; }
-    .p-o { background: rgba(245,166,35,0.12);  color: #a8640a; }
-    .p-b { background: rgba(41,121,255,0.09);  color: var(--blue-dark); }
+    .nut-inner { position: relative; z-index: 1; }
 
-    /* ── SECTION: CARE STAT ─────────────────────── */
-    .care-sec {
-      background: var(--white);
-      padding: 100px 48px;
-      text-align: center;
+    .nut-top-row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 20px;
     }
 
-    .care-stat-inner {
-      max-width: 820px;
-      margin: 0 auto;
-    }
+    .nut-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 3px; }
 
-    .stat-giant {
-      font-size: clamp(120px, 20vw, 200px);
-      font-weight: 700;
-      letter-spacing: -6px;
-      line-height: 0.88;
-      color: var(--dark);
-      margin: 16px 0 4px;
+    .nut-kcal-big {
+      font-size: clamp(52px, 8vw, 72px);
+      font-weight: 800;
+      color: white;
+      letter-spacing: -2px;
+      line-height: 1;
     }
 
-    .stat-unit {
-      font-size: clamp(24px, 3.5vw, 36px);
-      font-weight: 400;
-      color: var(--muted);
-      letter-spacing: -0.5px;
-      margin-bottom: 32px;
-    }
+    .nut-kcal-unit { font-size: 14px; font-weight: 400; color: rgba(255,255,255,.75); margin-top: 4px; }
 
-    /* streak ring + tasks row */
-    .care-visuals {
+    .nut-stats-row {
       display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 40px;
-      align-items: center;
-      background: var(--off);
-      border-radius: 24px;
-      padding: 36px 40px;
-      margin-top: 64px;
-      text-align: left;
-      max-width: 700px;
-      margin-left: auto;
-      margin-right: auto;
+      grid-template-columns: repeat(3,1fr);
+      gap: 8px;
+      margin-bottom: 24px;
+      padding: 14px;
+      background: rgba(0,0,0,0.14);
+      border-radius: var(--r-md);
     }
 
-    .ring-wrap {
-      position: relative;
-      width: 88px;
-      height: 88px;
-      flex-shrink: 0;
-    }
+    .nut-stat { text-align: center; }
+    .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; }
 
-    .ring-wrap svg { transform: rotate(-90deg); }
+    .nut-divider {
+      border: none;
+      border-top: 1px solid rgba(255,255,255,.15);
+      margin-bottom: 18px;
+    }
 
-    .ring-center {
-      position: absolute;
-      inset: 0;
+    .nut-log-title {
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: rgba(255,255,255,.65);
+      margin-bottom: 12px;
       display: flex;
-      flex-direction: column;
       align-items: center;
-      justify-content: center;
+      gap: 6px;
     }
 
-    .ring-num   { font-size: 24px; font-weight: 700; color: var(--dark); line-height: 1; }
-    .ring-denom { font-size: 11px; color: var(--muted); }
+    .log-entries { display: flex; flex-direction: column; gap: 6px; }
 
-    .care-tasks-col { display: flex; flex-direction: column; gap: 10px; }
-
-    .care-task {
+    .log-entry {
       display: flex;
       align-items: center;
       gap: 10px;
+      padding: 9px 12px;
+      background: rgba(255,255,255,0.12);
+      border-radius: var(--r-sm);
     }
 
-    .ct-icon {
-      width: 30px;
-      height: 30px;
-      border-radius: 8px;
-      background: rgba(245,166,35,0.1);
+    .log-entry-icon {
+      width: 26px;
+      height: 26px;
+      border-radius: 7px;
+      background: rgba(255,255,255,0.2);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 13px;
+      font-size: 12px;
       flex-shrink: 0;
     }
 
-    .ct-icon.g { background: rgba(91,169,154,0.1); }
-
-    .ct-name { font-size: 13px; font-weight: 600; color: var(--dark); flex: 1; }
-    .ct-meta { font-size: 11px; color: var(--muted); }
+    .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); }
 
-    .ct-chk {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 10px;
-    }
-
-    .chk-y { background: var(--sage); color: white; }
-    .chk-n { background: var(--white); border: 1.5px solid var(--line); }
-
-    .streak-days {
+    .log-fab {
       display: flex;
-      gap: 6px;
+      justify-content: flex-end;
       margin-top: 16px;
     }
 
-    .s-dot {
-      width: 28px;
-      height: 28px;
-      border-radius: 50%;
+    .log-fab-btn {
       display: flex;
       align-items: center;
-      justify-content: center;
-      font-size: 9.5px;
-      font-weight: 600;
+      gap: 7px;
+      background: white;
+      color: var(--sage-dark);
+      font-size: 13px;
+      font-weight: 700;
+      padding: 10px 18px;
+      border-radius: var(--pill);
+      border: none;
+      cursor: pointer;
+      font-family: inherit;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+      transition: transform 0.15s;
     }
 
-    .sd-on    { background: var(--dark); color: white; }
-    .sd-off   { background: var(--off);  color: var(--muted); border: 1px solid var(--line); }
-    .sd-today { background: var(--blue); color: white; }
+    .log-fab-btn:hover { transform: translateY(-1px); }
+
+    /* ── SECTION 3: MATCH ─────────────────────── */
+    .match-section { background: var(--white); }
 
-    /* ── SECTION: MATCH (DARK) ──────────────────── */
-    .match-sec {
-      background: var(--dark);
-      padding: 100px 48px;
+    .match-section-inner {
+      max-width: 1080px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 72px;
+      align-items: center;
     }
 
-    .match-sec .sec-eyebrow { color: rgba(255,255,255,0.5); }
-    .match-sec .sec-headline { color: white; }
-    .match-sec .sec-body     { color: rgba(255,255,255,0.62); }
-    .match-sec .sec-link     { color: #69b0ff; }
+    .match-card-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 20px;
+    }
 
     .match-card {
       position: relative;
       width: 100%;
       max-width: 280px;
-      height: 390px;
-      border-radius: 24px;
+      height: 380px;
+      border-radius: var(--r-lg);
       overflow: hidden;
-      background: linear-gradient(160deg, #F5A623 0%, #E8956D 60%, #C97B55 100%);
-      box-shadow: 0 32px 80px rgba(0,0,0,0.5);
+      background: linear-gradient(160deg, #F5A623 0%, #E8956D 55%, #C97B55 100%);
+      box-shadow: var(--sh-orange);
     }
 
     .mc-topbar {
       position: absolute;
-      top: 20px; left: 20px; right: 20px;
+      top: 18px; left: 18px; right: 18px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
 
     .mc-dist {
-      display: inline-block;
       font-size: 11.5px;
-      font-weight: 600;
-      color: rgba(255,255,255,0.95);
-      background: rgba(0,0,0,0.22);
+      font-weight: 700;
+      color: rgba(255,255,255,.95);
+      background: rgba(0,0,0,.22);
       backdrop-filter: blur(8px);
-      padding: 4px 10px;
-      border-radius: 980px;
+      padding: 4px 11px;
+      border-radius: var(--pill);
     }
 
     .mc-pet {
       position: absolute;
-      top: 50%; left: 50%;
-      transform: translate(-50%, -62%);
-      font-size: 88px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -60%);
+      font-size: 92px;
       line-height: 1;
     }
 
@@ -832,503 +808,614 @@
       position: absolute;
       bottom: 0; left: 0; right: 0;
       padding: 20px;
-      background: linear-gradient(to top, rgba(0,0,0,0.42) 0%, transparent 100%);
+      background: linear-gradient(to top, rgba(0,0,0,.42) 0%, transparent 100%);
     }
 
     .mc-name {
       font-size: 24px;
-      font-weight: 700;
+      font-weight: 800;
       color: white;
       letter-spacing: -0.3px;
       margin-bottom: 3px;
     }
 
-    .mc-name span { font-size: 15px; font-weight: 400; opacity: .85; }
-
-    .mc-loc  { font-size: 12px; color: rgba(255,255,255,0.8); margin-bottom: 8px; }
+    .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-tags { display: flex; flex-wrap: wrap; gap: 5px; }
 
     .mc-tag {
       font-size: 11px;
       font-weight: 600;
       padding: 3px 9px;
-      border-radius: 980px;
-      backdrop-filter: blur(6px);
+      border-radius: var(--pill);
     }
 
-    .tag-dk { background: rgba(0,0,0,0.28); color: rgba(255,255,255,0.95); }
-    .tag-lt { background: rgba(255,255,255,0.22); color: rgba(255,255,255,0.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); }
 
-    .match-actions {
+    /* Swipe dock */
+    .match-dock {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
-      margin-top: 20px;
     }
 
-    .ma {
-      width: 48px;
-      height: 48px;
+    .dock-btn {
+      width: 50px;
+      height: 50px;
       border-radius: 50%;
-      border: 1px solid rgba(255,255,255,0.15);
-      background: rgba(255,255,255,0.1);
-      backdrop-filter: blur(8px);
+      border: 1.5px solid var(--border-dark);
+      background: var(--white);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 17px;
+      font-size: 18px;
       cursor: pointer;
-      transition: background 0.15s;
-      color: white;
+      box-shadow: var(--sh-sm);
+      transition: transform 0.15s, box-shadow 0.15s;
     }
 
-    .ma:hover  { background: rgba(255,255,255,0.2); }
-    .ma.ma-hi  { width: 58px; height: 58px; background: var(--blue); border-color: var(--blue); font-size: 22px; }
+    .dock-btn:hover { transform: scale(1.08); box-shadow: var(--sh-md); }
+
+    .dock-btn.primary {
+      width: 62px;
+      height: 62px;
+      background: linear-gradient(135deg, var(--ora), var(--ora-mid));
+      border-color: transparent;
+      font-size: 24px;
+      box-shadow: var(--sh-orange);
+    }
 
-    .filter-pills {
+    /* Filter chips */
+    .filter-chips {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
-      margin-top: 28px;
+      margin-top: 24px;
     }
 
-    .fp {
-      font-size: 13px;
-      font-weight: 400;
+    .fchip {
+      font-size: 12.5px;
+      font-weight: 600;
       padding: 6px 14px;
-      border-radius: 980px;
-      border: 1px solid rgba(255,255,255,0.15);
-      color: rgba(255,255,255,0.7);
+      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); }
+
+    /* ── SECTION 4: SOCIAL + SHOP ─────────────── */
+    .shop-section { background: var(--offwhite); }
+
+    .shop-inner {
+      max-width: 1080px;
+      margin: 0 auto;
     }
 
-    /* ── SECTION: CHAT ──────────────────────────── */
-    .chat-sec {
-      background: var(--off);
-      padding: 100px 48px;
+    .shop-header {
+      text-align: center;
+      margin-bottom: 48px;
+    }
+
+    .shop-panels {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
     }
 
-    .chat-mockup {
+    /* Social profile panel */
+    .panel-social {
       background: var(--white);
-      border: 1px solid var(--line);
-      border-radius: 20px;
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
       overflow: hidden;
-      box-shadow: 0 4px 24px rgba(0,0,0,0.07);
+      box-shadow: var(--sh-sm);
     }
 
-    .ch-hdr {
-      padding: 16px 20px;
-      border-bottom: 1px solid var(--line);
+    .social-banner {
+      background: linear-gradient(135deg, var(--blue) 0%, #5B9BFF 100%);
+      padding: 24px;
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 14px;
     }
 
-    .ch-av {
-      width: 36px;
-      height: 36px;
+    .social-av {
+      width: 54px;
+      height: 54px;
       border-radius: 50%;
-      background: linear-gradient(135deg, #e0eaff, #b8d0ff);
+      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: 17px;
+      font-size: 26px;
       flex-shrink: 0;
     }
 
-    .ch-name   { font-size: 14px; font-weight: 600; color: var(--dark); }
-    .ch-status { font-size: 11.5px; color: var(--sage); font-weight: 500; }
+    .social-name  { font-size: 17px; font-weight: 700; color: white; letter-spacing: -0.2px; }
+    .social-breed { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
 
-    .ch-body {
-      padding: 20px;
+    .social-verified {
+      margin-left: auto;
+      width: 28px;
+      height: 28px;
+      background: rgba(255,255,255,0.2);
+      border-radius: 50%;
       display: flex;
-      flex-direction: column;
-      gap: 10px;
-      min-height: 240px;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
     }
 
-    .bub {
-      max-width: 80%;
-      padding: 10px 14px;
-      font-size: 14px;
-      line-height: 1.5;
-      border-radius: 18px;
+    .social-body { padding: 20px; }
+
+    .social-stats {
+      display: grid;
+      grid-template-columns: repeat(3,1fr);
+      gap: 1px;
+      background: var(--border);
+      border: 1px solid var(--border);
+      border-radius: var(--r-sm);
+      overflow: hidden;
+      margin-bottom: 16px;
+    }
+
+    .social-stat {
+      background: var(--white);
+      padding: 12px;
+      text-align: center;
     }
 
-    .bub.them { background: var(--off); color: var(--dark); border-radius: 4px 18px 18px 18px; align-self: flex-start; }
-    .bub.me   { background: var(--blue-a); color: white; border-radius: 18px 4px 18px 18px; align-self: flex-end; }
+    .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; }
 
-    .ch-pet-card {
+    .social-btn {
       display: flex;
       align-items: center;
-      gap: 10px;
-      background: var(--white);
-      border: 1px solid var(--line);
-      border-radius: 14px;
-      padding: 10px 13px;
-      align-self: flex-start;
-      max-width: 85%;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 12px;
+      background: var(--blue);
+      color: white;
+      font-size: 14px;
+      font-weight: 700;
+      font-family: inherit;
+      border: none;
+      border-radius: var(--pill);
+      cursor: pointer;
+      transition: background 0.2s;
     }
 
-    .ch-pet-av {
-      width: 36px;
-      height: 36px;
-      background: rgba(245,166,35,0.1);
-      border-radius: 10px;
+    .social-btn:hover { background: var(--blue-dark); }
+
+    .social-feed-preview {
+      margin-top: 14px;
+      display: grid;
+      grid-template-columns: repeat(3,1fr);
+      gap: 3px;
+    }
+
+    .feed-thumb {
+      aspect-ratio: 1;
+      border-radius: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 18px;
-      flex-shrink: 0;
+      font-size: 22px;
     }
 
-    .ch-pet-name   { font-size: 13px; font-weight: 600; color: var(--dark); }
-    .ch-pet-detail { font-size: 11px; color: var(--muted); margin-top: 2px; }
+    .ft-1 { background: linear-gradient(135deg, #FFE4CC, #F5C0A0); }
+    .ft-2 { background: linear-gradient(135deg, #E0EAFF, #C0CFFF); }
+    .ft-3 { background: linear-gradient(135deg, #D5F0EA, #A8D5CC); }
+    .ft-4 { background: linear-gradient(135deg, #FFF3E0, #FFD9A0); }
+    .ft-5 { background: linear-gradient(135deg, #E8F0FF, #C5D8FF); }
+    .ft-6 { background: linear-gradient(135deg, #F5D5E0, #EAAAC0); }
 
-    .ch-pet-pill {
-      margin-left: auto;
-      font-size: 10px;
-      font-weight: 500;
-      color: var(--blue-a);
-      white-space: nowrap;
+    /* Seller dashboard panel */
+    .panel-seller {
+      background: var(--white);
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
+      overflow: hidden;
+      box-shadow: var(--sh-sm);
     }
 
-    .ch-input-row {
-      padding: 12px 16px;
-      border-top: 1px solid var(--line);
+    .seller-header {
+      padding: 20px 24px;
+      border-bottom: 1px solid var(--border);
       display: flex;
-      gap: 10px;
       align-items: center;
+      gap: 12px;
     }
 
-    .ch-fake {
-      flex: 1;
-      background: var(--off);
-      border-radius: 980px;
-      padding: 9px 14px;
-      font-size: 13px;
-      color: var(--muted);
+    .seller-icon {
+      width: 42px;
+      height: 42px;
+      background: linear-gradient(135deg, #E8F5F3, #C5E8E3);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
     }
 
-    .ch-send {
-      width: 32px;
-      height: 32px;
-      background: var(--blue-a);
+    .seller-title    { font-size: 16px; font-weight: 700; color: var(--ink); }
+    .seller-subtitle { font-size: 12px; color: var(--ink-lt); margin-top: 2px; }
+
+    .seller-arrow {
+      margin-left: auto;
+      width: 28px;
+      height: 28px;
+      background: var(--offwhite);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 13px;
-      color: white;
-      flex-shrink: 0;
+      font-size: 14px;
+      color: var(--ink-lt);
     }
 
-    /* ── SECTION: FINAL CTA ─────────────────────── */
-    .final-sec {
-      background: var(--white);
-      padding: 100px 48px;
+    .seller-stats {
+      display: grid;
+      grid-template-columns: repeat(3,1fr);
+      padding: 18px 24px;
+      gap: 12px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .sel-stat {
+      background: var(--offwhite);
+      border-radius: var(--r-sm);
+      padding: 12px;
       text-align: center;
     }
 
-    .final-headline {
-      font-size: clamp(36px, 6vw, 64px);
+    .sel-stat-num { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.4px; }
+    .sel-stat-lbl { font-size: 10px; color: var(--ink-lt); margin-top: 2px; }
+
+    .seller-products { padding: 18px 24px; }
+
+    .seller-products-title {
+      font-size: 11px;
       font-weight: 700;
-      letter-spacing: -1.5px;
-      line-height: 1.07;
-      color: var(--dark);
-      margin-bottom: 16px;
+      letter-spacing: 0.07em;
+      text-transform: uppercase;
+      color: var(--ink-lt);
+      margin-bottom: 12px;
     }
 
-    .final-sub {
-      font-size: 19px;
-      font-weight: 400;
-      color: var(--muted);
-      line-height: 1.6;
-      margin-bottom: 36px;
+    .product-row {
+      display: flex;
+      align-items: center;
+      gap: 11px;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--border);
     }
 
-    /* ── FOOTER ─────────────────────────────────── */
-    footer {
-      background: var(--off);
-      border-top: 1px solid var(--line);
-    }
+    .product-row:last-child { border-bottom: none; }
 
-    .footer-tagline {
-      padding: 24px 48px;
-      font-size: 12px;
-      color: var(--muted);
-      border-bottom: 1px solid var(--line);
-      line-height: 1.6;
-      max-width: 900px;
+    .product-thumb {
+      width: 38px;
+      height: 38px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      flex-shrink: 0;
     }
 
-    .footer-cols {
-      display: grid;
-      grid-template-columns: repeat(4,1fr);
-      gap: 24px;
-      padding: 32px 48px;
-      max-width: 1040px;
-      border-bottom: 1px solid var(--line);
+    .pt-1 { background: rgba(245,166,35,.12); }
+    .pt-2 { background: rgba(41,121,255,.09); }
+    .pt-3 { background: rgba(91,169,154,.1);  }
+
+    .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);
     }
 
-    .footer-col-title {
-      font-size: 12px;
+    .product-status {
+      font-size: 10.5px;
       font-weight: 600;
-      color: var(--dark);
-      margin-bottom: 12px;
+      padding: 3px 9px;
+      border-radius: var(--pill);
     }
 
-    .footer-col-links { list-style: none; }
-    .footer-col-links li { margin-bottom: 8px; }
-    .footer-col-links a { font-size: 12px; color: var(--muted); text-decoration: none; }
-    .footer-col-links a:hover { text-decoration: underline; }
+    .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-section {
+      background: var(--blue);
+      padding: 96px 48px;
+      text-align: center;
+    }
 
-    .footer-bottom {
+    .final-headline {
+      font-size: clamp(32px, 5vw, 56px);
+      font-weight: 800;
+      letter-spacing: -1px;
+      line-height: 1.08;
+      color: white;
+      margin-bottom: 16px;
+    }
+
+    .final-sub {
+      font-size: 18px;
+      color: rgba(255,255,255,.78);
+      line-height: 1.65;
+      margin-bottom: 36px;
+      max-width: 480px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .final-btn {
+      display: inline-block;
+      font-size: 17px;
+      font-weight: 700;
+      color: var(--blue);
+      background: white;
+      padding: 14px 32px;
+      border-radius: var(--pill);
+      text-decoration: none;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+      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); }
+
+    /* ── FOOTER ───────────────────────────────── */
+    footer {
+      background: var(--offwhite);
+      border-top: 1px solid var(--border);
+      padding: 40px 48px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
-      gap: 12px;
-      padding: 16px 48px;
+      gap: 16px;
     }
 
-    .footer-copy { font-size: 12px; color: var(--muted); }
+    .footer-brand {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      text-decoration: none;
+    }
 
-    .footer-legal {
+    .footer-icon {
+      width: 30px;
+      height: 30px;
+      background: var(--blue);
+      border-radius: 8px;
       display: flex;
-      gap: 18px;
-      list-style: none;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
     }
 
-    .footer-legal a { font-size: 12px; color: var(--muted); text-decoration: none; }
-    .footer-legal a:hover { text-decoration: underline; }
+    .footer-name { font-size: 15px; font-weight: 700; color: var(--ink); }
 
-    /* ── ANIMATIONS ─────────────────────────────── */
-    @keyframes fadeUp {
-      from { opacity: 0; transform: translateY(16px); }
-      to   { opacity: 1; transform: none; }
-    }
+    .footer-links { display: flex; gap: 22px; list-style: none; }
+    .footer-links a { font-size: 13px; color: var(--ink-lt); text-decoration: none; transition: color 0.2s; }
+    .footer-links a:hover { color: var(--ink); }
+
+    .footer-copy { font-size: 12px; color: var(--ink-xl); }
 
-    /* ── RESPONSIVE ─────────────────────────────── */
+    /* ── RESPONSIVE ───────────────────────────── */
     @media (max-width: 960px) {
-      .lnav-title { display: none; }
-      .lnav-links a { padding: 0 10px; font-size: 11px; }
+      nav { padding: 0 20px; }
 
-      .split-inner {
-        grid-template-columns: 1fr;
-        gap: 48px;
-        padding: 0;
-      }
+      .section          { padding: 72px 24px; }
+      .section-inner,
+      .match-section-inner { grid-template-columns: 1fr; gap: 48px; }
 
-      .health-sec, .chat-sec { padding: 72px 24px; }
-      .match-sec { padding: 72px 24px; }
-      .care-sec  { padding: 72px 24px; }
-      .highlights-sec { padding: 72px 24px; }
-      .final-sec { padding: 72px 24px; }
+      .shop-panels { grid-template-columns: 1fr; }
 
-      .bento { grid-template-columns: 1fr; }
-      .care-visuals { grid-template-columns: 1fr; }
+      .nutrition-section .section-inner { grid-template-columns: 1fr; }
 
-      .match-card { max-width: 100%; }
-      .split-inner .match-card { max-width: 280px; }
+      .final-section { padding: 72px 24px; }
+
+      footer {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 28px 24px;
+      }
 
-      .footer-cols { grid-template-columns: repeat(2,1fr); padding: 24px; }
-      .footer-bottom, .footer-tagline { padding: 16px 24px; }
+      .footer-links { flex-wrap: wrap; gap: 14px; }
     }
 
     @media (max-width: 600px) {
-      .gnav-logo span:not(.gnav-logo-icon) { display: none; }
-      .lnav { display: none; }
-      .hero { padding: 110px 20px 80px; }
+      .hero { padding: 100px 20px 64px; }
       .wl-card { padding: 24px 18px; }
       .form-row { grid-template-columns: 1fr; }
-      .hm-stats { grid-template-columns: repeat(2,1fr); }
-      .highlights-sec { padding: 56px 20px; }
-      .waitlist-sec { padding: 60px 20px; }
-      .footer-cols { grid-template-columns: 1fr; }
+
+      .care-card, .nutrition-card { padding: 22px; }
+      .match-card { max-width: 100%; }
+
+      .shop-section { padding: 64px 20px; }
+      .shop-inner { padding: 0; }
+
+      .social-stats,
+      .nut-stats-row { grid-template-columns: repeat(3,1fr); }
     }
   </style>
 </head>
 <body>
 
-<!-- ── GLOBAL NAV ─────────────────────────────────── -->
-<nav class="gnav">
-  <a class="gnav-logo" href="#">
-    <span class="gnav-logo-icon">🐾</span>
-    <span>PetFolio</span>
+<!-- ── NAV ──────────────────────────────────────── -->
+<nav>
+  <a class="nav-brand" href="#">
+    <div class="nav-icon">🐾</div>
+    <span class="nav-name">PetFolio</span>
+    <span class="nav-badge">Beta</span>
   </a>
+  <a class="nav-cta" href="#waitlist">Join Waitlist</a>
 </nav>
 
-<!-- ── LOCAL NAV ──────────────────────────────────── -->
-<nav class="lnav">
-  <span class="lnav-title">PetFolio</span>
-  <ul class="lnav-links">
-    <li><a href="#features">Overview</a></li>
-    <li><a href="#health">Health</a></li>
-    <li><a href="#care">Care</a></li>
-    <li><a href="#match">Match</a></li>
-    <li><a href="#chat">Chat</a></li>
-  </ul>
-  <a class="lnav-cta" href="#waitlist">Join Waitlist</a>
-</nav>
+<!-- ── HERO ─────────────────────────────────────── -->
+<section class="hero" id="waitlist">
+  <div class="hero-icon">🐾</div>
+
+  <div class="hero-eyebrow">
+    <span class="eyebrow-dot"></span>
+    Now accepting beta testers
+  </div>
 
-<!-- ── HERO ───────────────────────────────────────── -->
-<section class="hero">
-  <p class="hero-product" style="animation:fadeUp .5s ease both">PetFolio</p>
-  <h1 class="hero-headline" style="animation:fadeUp .5s .1s ease both">
+  <h1 class="hero-headline">
     Your pet's world,<br>beautifully organized.
   </h1>
-  <p class="hero-sub" style="animation:fadeUp .5s .2s ease both">
+
+  <p class="hero-sub">
     Track health. Build routines. Find friends.<br>
     The all-in-one app for modern pet parents.
   </p>
-  <div class="hero-ctas" style="animation:fadeUp .5s .3s ease both">
-    <a class="btn-primary" href="#waitlist">Join the waitlist</a>
-    <a class="btn-link" href="#features">See what's inside ↓</a>
-  </div>
-</section>
-
-<!-- ── WAITLIST ────────────────────────────────────── -->
-<section class="waitlist-sec" id="waitlist">
-  <div class="waitlist-inner reveal">
-    <div class="wl-eyebrow">Beta Waitlist</div>
-    <h2 class="wl-title">Be first. Free forever.</h2>
-    <p class="wl-sub">
-      Reserve your spot now. Beta users get premium<br>features unlocked — for life.
-    </p>
 
-    <div class="wl-counter-row">
+  <div class="wl-card">
+    <div class="wl-counter">
       <div class="counter-avatars">
         <div class="c-av">🐕</div>
         <div class="c-av">🐈</div>
         <div class="c-av">🐇</div>
         <div class="c-av">🦜</div>
       </div>
-      <span class="wl-count-label">
+      <span class="wl-count-text">
         <strong id="counter">847</strong> pet parents already signed up
       </span>
     </div>
 
-    <div class="wl-card">
-      <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" />
-        </div>
-        <div class="form-row">
-          <select class="form-select" id="petType" onchange="this.classList.add('sel-val')">
-            <option value="" disabled selected>Pet type</option>
-            <option value="dog">🐕 Dog</option>
-            <option value="cat">🐈 Cat</option>
-            <option value="bird">🦜 Bird</option>
-            <option value="rabbit">🐇 Rabbit</option>
-            <option value="reptile">🦎 Reptile</option>
-            <option value="fish">🐠 Fish</option>
-            <option value="other">🐾 Other</option>
-          </select>
-          <input class="form-input" type="number" id="petCount" placeholder="Number of pets" min="1" max="99" />
-        </div>
-        <button class="btn-join" onclick="handleJoin()">Join the Waitlist</button>
-        <p class="form-fine">Free during beta &nbsp;·&nbsp; No spam, ever.</p>
+    <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" />
       </div>
-
-      <div class="success-state" id="success-state">
-        <div class="success-icon">🐾</div>
-        <div class="success-title">You're on the list.</div>
-        <p class="success-sub">
-          A welcome note is heading to your inbox.<br>
-          Your pet's profile is waiting — you're <strong>#<span id="spot-number">848</span></strong> in line.
-        </p>
-        <div class="success-pos">Early access · Wave 1 invitation</div>
-        <div class="share-btns">
-          <a class="share-btn" href="https://twitter.com/intent/tweet?text=Just+joined+the+%40PetFolio+beta+waitlist+%F0%9F%90%BE+petfolio.social" target="_blank" rel="noopener">Share on X</a>
-          <button class="share-btn" onclick="copyLink()">Copy link</button>
-        </div>
+      <div class="form-row">
+        <select class="form-select" id="petType" onchange="this.classList.add('has-val')">
+          <option value="" disabled selected>Pet type</option>
+          <option value="dog">🐕 Dog</option>
+          <option value="cat">🐈 Cat</option>
+          <option value="bird">🦜 Bird</option>
+          <option value="rabbit">🐇 Rabbit</option>
+          <option value="reptile">🦎 Reptile</option>
+          <option value="fish">🐠 Fish</option>
+          <option value="other">🐾 Other</option>
+        </select>
+        <input class="form-input" type="number" id="petCount" placeholder="Number of pets" min="1" max="99" />
       </div>
+      <button class="btn-join" onclick="handleJoin()">Join the Waitlist &nbsp;→</button>
+      <p class="form-fine">Free forever for beta users &nbsp;·&nbsp; No spam, ever.</p>
     </div>
-  </div>
-</section>
 
-<!-- ── HIGHLIGHTS BENTO ───────────────────────────── -->
-<section class="highlights-sec" id="features">
-  <div class="highlights-header reveal">
-    <h2 class="highlights-title">Get the highlights.</h2>
-  </div>
-  <div class="bento reveal">
-    <div class="bento-tile dark">
-      <span class="bento-tile-icon">🏥</span>
-      <div class="bento-tile-name">Medical Vault</div>
-      <div class="bento-tile-desc">Every vet visit, vaccine, medication, and allergy — stored and searchable in one secure place.</div>
-      <span class="bento-tile-stat">+</span>
-    </div>
-    <div class="bento-tile blue">
-      <span class="bento-tile-icon">🔥</span>
-      <div class="bento-tile-name">Care Streaks</div>
-      <div class="bento-tile-desc">Log meals, walks, and grooming daily. Build streaks, unlock badges, and stay consistent.</div>
-      <span class="bento-tile-stat">7</span>
-    </div>
-    <div class="bento-tile">
-      <span class="bento-tile-icon">🐾</span>
-      <div class="bento-tile-name">Discover & Match</div>
-      <div class="bento-tile-desc">Find nearby pets that match your animal's energy and play style. Swipe, match, connect.</div>
-      <span class="bento-tile-stat">↔</span>
-    </div>
-    <div class="bento-tile">
-      <span class="bento-tile-icon">💬</span>
-      <div class="bento-tile-name">Pet-First Chat</div>
-      <div class="bento-tile-desc">Private threads with pet profiles embedded. Plan playdates without ever leaving the app.</div>
-      <span class="bento-tile-stat">→</span>
+    <div class="success-state" id="success-state">
+      <div class="success-ico">🐾</div>
+      <div class="success-title">You're on the list!</div>
+      <p class="success-sub">
+        Check your inbox for a welcome note.<br>
+        Your pet's profile is waiting — you're <strong>#<span id="spot-number">848</span></strong> in line.
+      </p>
+      <div class="success-pos">Early access · Wave 1</div>
+      <div class="share-btns">
+        <a class="share-btn" href="https://twitter.com/intent/tweet?text=Just+joined+the+%40PetFolio+beta+waitlist+%F0%9F%90%BE+petfolio.social" target="_blank" rel="noopener">Share on X</a>
+        <button class="share-btn" onclick="copyLink()">Copy link</button>
+      </div>
     </div>
   </div>
 </section>
 
-<!-- ── HEALTH VAULT ────────────────────────────────── -->
-<section class="health-sec" id="health">
-  <div class="split-inner">
+<!-- ── SECTION 1: CARE DASHBOARD ─────────────────── -->
+<section class="section care-section" id="care">
+  <div class="section-inner">
 
     <div class="reveal">
-      <span class="sec-eyebrow">Health Records</span>
-      <h2 class="sec-headline">Every record,<br>within reach.</h2>
+      <span class="sec-eyebrow" style="background:rgba(245,166,35,.12);color:#9e6800;border:1px solid rgba(245,166,35,.2)">
+        🔥 Care &amp; Streaks
+      </span>
+      <h2 class="sec-headline">Build daily habits.<br>Earn your streak.</h2>
       <p class="sec-body">
-        Say goodbye to lost paperwork before every vet visit. PetFolio stores vaccinations, active prescriptions, allergy flags, and clinical notes — organized, private, and always up to date.
+        Turn routine pet care into a rewarding daily practice. Log meals, walks, and grooming — then watch your streak grow. PetFolio celebrates every day you show up for your pet.
       </p>
-      <a class="sec-link" href="#waitlist">Get early access →</a>
     </div>
 
-    <div class="hm reveal">
-      <div class="hm-hdr">
-        <div class="hm-av">🐱</div>
+    <div class="care-card reveal">
+      <div class="care-card-top">
         <div>
-          <div class="hm-name">Montu</div>
-          <div class="hm-breed">Persian · 2 yrs · Male</div>
+          <div class="care-label">Care Streak</div>
+          <div class="care-live">
+            <span class="care-live-dot"></span>
+            on a walk
+          </div>
+        </div>
+        <div class="today-badge">
+          <div class="today-lbl">Today</div>
+          <div class="today-val">3 / 3</div>
         </div>
       </div>
-      <div class="hm-stats">
-        <div class="hm-stat"><div class="hm-stat-lbl">Breed</div><div class="hm-stat-val">Persian</div></div>
-        <div class="hm-stat"><div class="hm-stat-lbl">Age</div><div class="hm-stat-val">2 yrs</div></div>
-        <div class="hm-stat"><div class="hm-stat-lbl">Weight</div><div class="hm-stat-val">2.0 kg</div></div>
-        <div class="hm-stat"><div class="hm-stat-lbl">Sex</div><div class="hm-stat-val">Male</div></div>
-      </div>
-      <div class="hm-rows">
-        <div class="hm-row">
-          <div class="hm-row-icon ic-b">💊</div>
-          <div><div class="hm-row-title">Heartworm tablet</div><div class="hm-row-meta">Daily · 9:00 AM</div></div>
-          <div class="pill p-g">Active</div>
+
+      <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>
+          <div class="ring-center">
+            <span class="ring-big">3</span>
+            <span class="ring-sm">of 3</span>
+          </div>
         </div>
-        <div class="hm-row">
-          <div class="hm-row-icon ic-g">💉</div>
-          <div><div class="hm-row-title">Rabies vaccination</div><div class="hm-row-meta">Due in 42 days</div></div>
-          <div class="pill p-o">Upcoming</div>
+        <div>
+          <div class="ring-info-title">7 day streak 🔥</div>
+          <div class="ring-info-sub">3 of 3 tasks complete today</div>
+        </div>
+      </div>
+
+      <div class="streak-dots">
+        <div class="s-dot sd-fill">M</div>
+        <div class="s-dot sd-fill">T</div>
+        <div class="s-dot sd-fill">W</div>
+        <div class="s-dot sd-fill">T</div>
+        <div class="s-dot sd-fill">F</div>
+        <div class="s-dot sd-empty">S</div>
+        <div class="s-dot sd-today">S</div>
+      </div>
+
+      <div class="task-tiles">
+        <div class="task-tile">
+          <div class="task-icon">🍗</div>
+          <div>
+            <div class="task-name">Heartworm tablet</div>
+            <div class="task-meta">9:00 AM · Daily</div>
+          </div>
+          <button class="task-btn tbtn-dark">Mark done</button>
         </div>
-        <div class="hm-row">
-          <div class="hm-row-icon ic-o">⚠️</div>
-          <div><div class="hm-row-title">Dairy allergy</div><div class="hm-row-meta">Logged 2024-03-12</div></div>
-          <div class="pill p-b">Flagged</div>
+        <div class="task-tile">
+          <div class="task-icon">✂️</div>
+          <div>
+            <div class="task-name">Grooming session</div>
+            <div class="task-meta">Every 2 weeks · +10 pts</div>
+          </div>
+          <button class="task-btn tbtn-check">✓ Done</button>
         </div>
-        <div class="hm-row">
-          <div class="hm-row-icon ic-b">📋</div>
-          <div><div class="hm-row-title">Annual checkup</div><div class="hm-row-meta">Dr. Priya Mehta · 2025-01-08</div></div>
-          <div class="pill p-g">Complete</div>
+        <div class="task-tile">
+          <div class="task-icon">🚶</div>
+          <div>
+            <div class="task-name">Evening walk with Montu</div>
+            <div class="task-meta">2 / 3 walks today</div>
+          </div>
+          <button class="task-btn tbtn-green">Start walk</button>
         </div>
       </div>
     </div>
@@ -1336,83 +1423,109 @@ <h2 class="sec-headline">Every record,<br>within reach.</h2>
   </div>
 </section>
 
-<!-- ── CARE STREAK (STAT CALLOUT) ────────────────── -->
-<section class="care-sec" id="care">
-  <div class="care-stat-inner reveal">
-    <span class="sec-eyebrow">Care Streak</span>
-    <div class="stat-giant">7</div>
-    <p class="stat-unit">days on track.</p>
-    <p class="sec-body" style="margin:0 auto;text-align:center;max-width:520px">
-      Build daily routines for feeding, walking, and grooming. PetFolio tracks every habit and rewards consistency — for you and your pet.
-    </p>
-    <a class="sec-link" href="#waitlist">Start your streak →</a>
-
-    <div class="care-visuals reveal">
-      <div class="ring-wrap">
-        <svg width="88" height="88" viewBox="0 0 88 88">
-          <circle cx="44" cy="44" r="36" fill="none" stroke="#e5e5ea" stroke-width="8"/>
-          <!-- 3/3 = full ring: circumference = 2π×36 ≈ 226.2 -->
-          <circle cx="44" cy="44" r="36" fill="none" stroke="#1d1d1f" stroke-width="8"
-            stroke-dasharray="226.2" stroke-dashoffset="0" stroke-linecap="round"/>
-        </svg>
-        <div class="ring-center">
-          <span class="ring-num">3</span>
-          <span class="ring-denom">of 3</span>
+<!-- ── SECTION 2: NUTRITION ───────────────────────── -->
+<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)">
+        🥩 Smart Nutrition
+      </span>
+      <h2 class="sec-headline">Science-backed<br>nutrition tracking.</h2>
+      <p class="sec-body">
+        PetFolio calculates ideal daily intake using NRC metabolic energy requirements — calibrated to your pet's exact weight, species, and activity level. Every gram logged, every trend visible.
+      </p>
+    </div>
+
+    <div class="nutrition-card reveal" style="direction:ltr">
+      <div class="nut-inner">
+        <div class="nut-top-row">
+          <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>
+        </div>
+
+        <div class="nut-stats-row">
+          <div class="nut-stat">
+            <div class="nut-stat-lbl">Weight</div>
+            <div class="nut-stat-val">30.0 kg</div>
+          </div>
+          <div class="nut-stat">
+            <div class="nut-stat-lbl">Activity</div>
+            <div class="nut-stat-val">Moderate</div>
+          </div>
+          <div class="nut-stat">
+            <div class="nut-stat-lbl">Species</div>
+            <div class="nut-stat-val">Cat</div>
+          </div>
         </div>
-      </div>
 
-      <div>
-        <div class="care-tasks-col">
-          <div class="care-task">
-            <div class="ct-icon">🍗</div>
-            <div style="flex:1"><div class="ct-name">Feeding time</div><div class="ct-meta">Daily · +10 pts</div></div>
-            <div class="ct-chk chk-y">✓</div>
+        <hr class="nut-divider">
+
+        <div class="nut-log-title">
+          🕐 Log History
+        </div>
+
+        <div class="log-entries">
+          <div class="log-entry">
+            <div class="log-entry-icon">📊</div>
+            <span class="log-entry-val">0.90 kg</span>
+            <span class="log-entry-date">2026/05/12</span>
+          </div>
+          <div class="log-entry">
+            <div class="log-entry-icon">📊</div>
+            <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="care-task">
-            <div class="ct-icon">✂️</div>
-            <div style="flex:1"><div class="ct-name">Grooming session</div><div class="ct-meta">Every 2 weeks</div></div>
-            <div class="ct-chk chk-y">✓</div>
+          <div class="log-entry">
+            <div class="log-entry-icon">📊</div>
+            <span class="log-entry-val">1.20 kg</span>
+            <span class="log-entry-date">2026/05/15</span>
           </div>
-          <div class="care-task">
-            <div class="ct-icon g">🚶</div>
-            <div style="flex:1"><div class="ct-name">Evening walk</div><div class="ct-meta">2 / 3 today</div></div>
-            <div class="ct-chk chk-n"></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>
           </div>
         </div>
-        <div class="streak-days" style="margin-top:18px">
-          <div class="s-dot sd-on">T</div>
-          <div class="s-dot sd-on">W</div>
-          <div class="s-dot sd-on">T</div>
-          <div class="s-dot sd-on">F</div>
-          <div class="s-dot sd-on">S</div>
-          <div class="s-dot sd-off">S</div>
-          <div class="s-dot sd-today">M</div>
+
+        <div class="log-fab">
+          <button class="log-fab-btn">📊 Log Weight</button>
         </div>
       </div>
     </div>
+
   </div>
 </section>
 
-<!-- ── MATCH (DARK) ───────────────────────────────── -->
-<section class="match-sec" id="match">
-  <div class="split-inner">
+<!-- ── SECTION 3: MATCH ───────────────────────────── -->
+<section class="section match-section" id="match">
+  <div class="match-section-inner">
 
     <div class="reveal">
-      <span class="sec-eyebrow">Nearby Pets</span>
-      <h2 class="sec-headline">Meet your<br>match.</h2>
+      <span class="sec-eyebrow" style="background:rgba(245,166,35,.12);color:#9e6800;border:1px solid rgba(245,166,35,.2)">
+        🐾 Discover &amp; Match
+      </span>
+      <h2 class="sec-headline">Find the perfect<br>playdate match.</h2>
       <p class="sec-body">
-        Discover nearby pets that fit your animal's energy and play style. Filter by distance, breed, and activity level — then swipe to connect.
+        Explore nearby pets that fit your animal's energy and personality. Filter by distance, breed, and activity level — then swipe to connect with like-minded pet parents in your neighborhood.
       </p>
-      <div class="filter-pills">
-        <span class="fp">📍 Distance</span>
-        <span class="fp">⚡ Energy</span>
-        <span class="fp">🎾 Play style</span>
-        <span class="fp">🐾 Breed</span>
+      <div class="filter-chips">
+        <span class="fchip fc-ora">📍 Distance</span>
+        <span class="fchip fc-blue">⚡ Energy level</span>
+        <span class="fchip fc-sage">🎾 Play style</span>
+        <span class="fchip fc-gray">🐾 Breed type</span>
       </div>
-      <a class="sec-link" href="#waitlist">Find friends for your pet →</a>
     </div>
 
-    <div class="reveal" style="display:flex;flex-direction:column;align-items:center;gap:20px">
+    <div class="match-card-wrap reveal">
       <div class="match-card">
         <div class="mc-topbar">
           <span class="mc-dist">📍 Within 2 miles</span>
@@ -1420,136 +1533,170 @@ <h2 class="sec-headline">Meet your<br>match.</h2>
         <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</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-dk">Leopard Gecko</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-dk">Playful</span>
             <span class="mc-tag tag-dk">Good on lead</span>
           </div>
         </div>
       </div>
-      <div class="match-actions">
-        <div class="ma">✕</div>
-        <div class="ma">👋</div>
-        <div class="ma ma-hi">🐾</div>
-        <div class="ma">⭐</div>
-        <div class="ma">⚡</div>
+
+      <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" title="Boost">⚡</div>
       </div>
     </div>
 
   </div>
 </section>
 
-<!-- ── CHAT ───────────────────────────────────────── -->
-<section class="chat-sec" id="chat">
-  <div class="split-inner">
+<!-- ── SECTION 4: SOCIAL + SHOP ──────────────────── -->
+<section class="section shop-section" id="shop">
+  <div class="shop-inner reveal">
+    <div class="shop-header">
+      <span class="sec-eyebrow" style="background:var(--blue-soft);color:var(--blue-dark);border:1px solid rgba(41,121,255,.15);display:inline-flex;align-items:center;gap:7px">
+        ✦ Social &amp; Market
+      </span>
+      <h2 class="sec-headline" style="margin-top:10px">Your pet's public profile<br>&amp; your seller dashboard.</h2>
+      <p class="sec-body" style="margin:12px auto 0;text-align:center;max-width:520px">
+        Share Montu's journey with the community and run your own pet-goods shop — all from one unified platform.
+      </p>
+    </div>
 
-    <div class="chat-mockup reveal">
-      <div class="ch-hdr">
-        <div class="ch-av">🐕</div>
-        <div>
-          <div class="ch-name">Max's owner — Sara</div>
-          <div class="ch-status">● Online</div>
+    <div class="shop-panels">
+      <!-- Social Profile -->
+      <div class="panel-social">
+        <div class="social-banner">
+          <div class="social-av">🐱</div>
+          <div>
+            <div class="social-name">Montu</div>
+            <div class="social-breed">Persian · 2 yrs · Male</div>
+          </div>
+          <div class="social-verified">🔵</div>
+        </div>
+        <div class="social-body">
+          <div class="social-stats">
+            <div class="social-stat">
+              <div class="ss-num">47</div>
+              <div class="ss-lbl">Posts</div>
+            </div>
+            <div class="social-stat">
+              <div class="ss-num">231</div>
+              <div class="ss-lbl">Followers</div>
+            </div>
+            <div class="social-stat">
+              <div class="ss-num">89</div>
+              <div class="ss-lbl">Following</div>
+            </div>
+          </div>
+          <button class="social-btn">🔗 View Social Profile</button>
+          <div class="social-feed-preview" style="margin-top:14px">
+            <div class="feed-thumb ft-1">🐱</div>
+            <div class="feed-thumb ft-2">🌳</div>
+            <div class="feed-thumb ft-3">🐾</div>
+            <div class="feed-thumb ft-4">🎾</div>
+            <div class="feed-thumb ft-5">🏥</div>
+            <div class="feed-thumb ft-6">🛁</div>
+          </div>
         </div>
       </div>
-      <div class="ch-body">
-        <div class="bub them">Hey! Ziggy's been looking for a playdate buddy 🐾</div>
-        <div class="bub me">Montu would love that! Saturday morning?</div>
-        <div class="ch-pet-card">
-          <div class="ch-pet-av">🐱</div>
+
+      <!-- Seller Dashboard -->
+      <div class="panel-seller">
+        <div class="seller-header">
+          <div class="seller-icon">🏪</div>
           <div>
-            <div class="ch-pet-name">Montu</div>
-            <div class="ch-pet-detail">Persian · 2 yrs · Friendly · Low energy</div>
+            <div class="seller-title">Seller Dashboard</div>
+            <div class="seller-subtitle">Manage your shop, products &amp; orders</div>
           </div>
-          <div class="ch-pet-pill">View →</div>
+          <div class="seller-arrow">›</div>
         </div>
-        <div class="bub them">Saturday works! Riverside Park at 9am? 🌳</div>
-        <div class="bub me">Perfect — see you at the east entrance! 🎾</div>
-      </div>
-      <div class="ch-input-row">
-        <div class="ch-fake">Message Sara...</div>
-        <div class="ch-send">➤</div>
-      </div>
-    </div>
 
-    <div class="reveal">
-      <span class="sec-eyebrow">Messaging</span>
-      <h2 class="sec-headline">Your next playdate<br>is one message away.</h2>
-      <p class="sec-body">
-        When you match, a private thread opens instantly. Pet profiles are embedded right in the chat so you always know who's who — and the park meetup plans itself.
-      </p>
-      <a class="sec-link" href="#waitlist">Join the community →</a>
-    </div>
+        <div class="seller-stats">
+          <div class="sel-stat">
+            <div class="sel-stat-num">12</div>
+            <div class="sel-stat-lbl">Products</div>
+          </div>
+          <div class="sel-stat">
+            <div class="sel-stat-num">38</div>
+            <div class="sel-stat-lbl">Orders</div>
+          </div>
+          <div class="sel-stat">
+            <div class="sel-stat-num">$284</div>
+            <div class="sel-stat-lbl">Revenue</div>
+          </div>
+        </div>
 
+        <div class="seller-products">
+          <div class="seller-products-title">Your listings</div>
+          <div class="product-row">
+            <div class="product-thumb pt-1">🦴</div>
+            <div>
+              <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-status ps-live">Live</div>
+          </div>
+          <div class="product-row">
+            <div class="product-thumb pt-2">🎾</div>
+            <div>
+              <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-status ps-draft">Draft</div>
+          </div>
+          <div class="product-row">
+            <div class="product-thumb pt-3">🛁</div>
+            <div>
+              <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-status ps-sold">Sold out</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </section>
 
 <!-- ── FINAL CTA ──────────────────────────────────── -->
-<section class="final-sec">
-  <div class="reveal" style="max-width:600px;margin:0 auto">
-    <h2 class="final-headline">Give your pet the<br>life they deserve.</h2>
-    <p class="final-sub">
-      Join thousands of pet parents on the waitlist.<br>
-      Free for beta users — forever.
-    </p>
-    <a class="btn-primary" href="#waitlist" style="font-size:17px;padding:14px 26px">Join the waitlist</a>
-  </div>
+<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>
 </section>
 
 <!-- ── FOOTER ─────────────────────────────────────── -->
 <footer>
-  <div class="footer-tagline">
-    PetFolio is currently in beta. Features are subject to change.
-    Waitlist spots are limited — early access users receive premium features at no cost, forever.
-  </div>
-  <div class="footer-cols">
-    <div>
-      <div class="footer-col-title">Features</div>
-      <ul class="footer-col-links">
-        <li><a href="#health">Medical Vault</a></li>
-        <li><a href="#care">Care Streaks</a></li>
-        <li><a href="#match">Discover & Match</a></li>
-        <li><a href="#chat">Pet-First Chat</a></li>
-      </ul>
-    </div>
-    <div>
-      <div class="footer-col-title">Company</div>
-      <ul class="footer-col-links">
-        <li><a href="#">About</a></li>
-        <li><a href="#">Blog</a></li>
-        <li><a href="#">Press</a></li>
-        <li><a href="#">Careers</a></li>
-      </ul>
-    </div>
-    <div>
-      <div class="footer-col-title">Support</div>
-      <ul class="footer-col-links">
-        <li><a href="#">Help Center</a></li>
-        <li><a href="#">Contact</a></li>
-        <li><a href="#">Community</a></li>
-        <li><a href="#">petfolio.social</a></li>
-      </ul>
-    </div>
-    <div>
-      <div class="footer-col-title">Legal</div>
-      <ul class="footer-col-links">
-        <li><a href="#">Privacy Policy</a></li>
-        <li><a href="#">Terms of Service</a></li>
-        <li><a href="#">Cookie Policy</a></li>
-        <li><a href="#">Unsubscribe</a></li>
-      </ul>
-    </div>
-  </div>
-  <div class="footer-bottom">
-    <div class="footer-copy">Copyright © 2025 PetFolio. All rights reserved.</div>
-    <ul class="footer-legal">
-      <li><a href="#">Privacy Policy</a></li>
-      <li><a href="#">Terms of Use</a></li>
-      <li><a href="#">Contact</a></li>
-    </ul>
-  </div>
+  <a class="footer-brand" href="#">
+    <div class="footer-icon">🐾</div>
+    <span class="footer-name">PetFolio</span>
+  </a>
+  <ul class="footer-links">
+    <li><a href="#">Privacy Policy</a></li>
+    <li><a href="#">Terms of Service</a></li>
+    <li><a href="#">Contact</a></li>
+    <li><a href="#">petfolio.social</a></li>
+  </ul>
+  <div class="footer-copy">© 2025 PetFolio. Made with 🐾 for pet parents everywhere.</div>
 </footer>
 
 <script>
@@ -1563,13 +1710,13 @@ <h2 class="final-headline">Give your pet the<br>life they deserve.</h2>
   const referralCode = urlParams.get('ref');
 
   // Scroll reveal
-  const observer = new IntersectionObserver(
+  const revealObs = new IntersectionObserver(
     (entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }); },
     { threshold: 0.1 }
   );
-  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+  document.querySelectorAll('.reveal').forEach(el => revealObs.observe(el));
 
-  // Waitlist count
+  // ── Waitlist count ──────────────────────────────
   let count = 847;
 
   async function fetchWaitlistCount() {
@@ -1587,29 +1734,29 @@ <h2 class="final-headline">Give your pet the<br>life they deserve.</h2>
     const el = document.getElementById('counter');
     if (!el) return;
     let start = Math.max(count - 20, 0);
-    const interval = setInterval(() => {
+    const iv = setInterval(() => {
       start++;
       el.textContent = start.toLocaleString();
-      if (start >= count) clearInterval(interval);
+      if (start >= count) clearInterval(iv);
     }, 60);
   }
 
   setTimeout(fetchWaitlistCount, 500);
 
-  // Form submission
+  // ── Form submission ─────────────────────────────
   async function handleJoin() {
-    const name    = document.getElementById('firstName').value.trim();
-    const email   = document.getElementById('email').value.trim();
-    const petType = document.getElementById('petType').value;
-    const petCount= document.getElementById('petCount').value;
-    const btn     = document.querySelector('.btn-join');
+    const name     = document.getElementById('firstName').value.trim();
+    const email    = document.getElementById('email').value.trim();
+    const petType  = document.getElementById('petType').value;
+    const petCount = document.getElementById('petCount').value;
+    const btn      = document.querySelector('.btn-join');
 
     if (!name)  { shake('firstName'); return; }
     if (!email || !email.includes('@') || !email.includes('.')) { shake('email'); return; }
     if (!petType) { shake('petType'); return; }
 
     const originalText = btn.innerHTML;
-    btn.innerHTML = 'Joining...';
+    btn.innerHTML = '⏳ Joining...';
     btn.disabled  = true;
 
     try {
@@ -1671,12 +1818,12 @@ <h2 class="final-headline">Give your pet the<br>life they deserve.</h2>
     navigator.clipboard.writeText(linkToCopy).then(() => {
       const btn  = event.target;
       const orig = btn.textContent;
-      btn.textContent = '✓ Copied';
+      btn.textContent = '✓ Copied!';
       setTimeout(() => btn.textContent = orig, 2000);
     });
   }
 
-  // Hamburger menu (preserved for compatibility)
+  // Hamburger (preserved for compatibility)
   const ham = document.getElementById('hamburger');
   const mob = document.getElementById('mobileMenu');
   function closeMenu() {