docs: update screenshots to reflect current UI state

Replace old screenshots with new ones showing updated dashboard design and weather widget. Update README to display mobile + desktop side-by-side, regenerate social preview images with new dashboard screenshot.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

docs/index.html

@@ -651,35 +651,35 @@
     </div>
     <div class="screenshots-track" role="region" aria-label="Screenshots" tabindex="0">
       <div class="screenshot-item reveal">
-        <img class="screenshot-img" data-light="screenshots/mobile-light/mobile-light-dashboard-2.png" data-dark="screenshots/mobile-dark/mobile-dark-dashboard-2.png" src="screenshots/mobile-light/mobile-light-dashboard-2.png" alt="Oikos Dashboard" width="270" height="480" loading="lazy">
+        <img class="screenshot-img" data-light="screenshots/01-mobile-light.png" data-dark="screenshots/01-mobile-dark.png" src="screenshots/01-mobile-light.png" alt="Oikos Dashboard" width="270" height="480" loading="lazy">
         <p class="screenshot-label">Dashboard</p>
       </div>
       <div class="screenshot-item reveal reveal-delay-1">
-        <img class="screenshot-img" data-light="screenshots/mobile-light/mobile-light-tasks-2.png" data-dark="screenshots/mobile-dark/mobile-dark-tasks-2.png" src="screenshots/mobile-light/mobile-light-tasks-2.png" alt="Task Management" width="270" height="480" loading="lazy">
+        <img class="screenshot-img" data-light="screenshots/02-mobile-light.png" data-dark="screenshots/02-mobile-dark.png" src="screenshots/02-mobile-light.png" alt="Task Management" width="270" height="480" loading="lazy">
         <p class="screenshot-label" data-i18n="feat_tasks_title">Tasks</p>
       </div>
       <div class="screenshot-item reveal reveal-delay-2">
-        <img class="screenshot-img" data-light="screenshots/mobile-light/mobile-light-meal.png" data-dark="screenshots/mobile-dark/mobile-dark-meal.png" src="screenshots/mobile-light/mobile-light-meal.png" alt="Meal Planning" width="270" height="480" loading="lazy">
+        <img class="screenshot-img" data-light="screenshots/03-mobile-light.png" data-dark="screenshots/03-mobile-dark.png" src="screenshots/03-mobile-light.png" alt="Meal Planning" width="270" height="480" loading="lazy">
         <p class="screenshot-label" data-i18n="feat_meals_title">Meals</p>
       </div>
       <div class="screenshot-item reveal reveal-delay-3">
-        <img class="screenshot-img" data-light="screenshots/mobile-light/mobile-light-shopping.png" data-dark="screenshots/mobile-dark/mobile-dark-shopping.png" src="screenshots/mobile-light/mobile-light-shopping.png" alt="Shopping Lists" width="270" height="480" loading="lazy">
+        <img class="screenshot-img" data-light="screenshots/04-mobile-light.png" data-dark="screenshots/04-mobile-dark.png" src="screenshots/04-mobile-light.png" alt="Shopping Lists" width="270" height="480" loading="lazy">
         <p class="screenshot-label" data-i18n="feat_shopping_title">Shopping</p>
       </div>
       <div class="screenshot-item reveal">
-        <img class="screenshot-img" data-light="screenshots/mobile-light/mobile-light-calendar.png" data-dark="screenshots/mobile-dark/mobile-dark-calendar.png" src="screenshots/mobile-light/mobile-light-calendar.png" alt="Calendar" width="270" height="480" loading="lazy">
+        <img class="screenshot-img" data-light="screenshots/05-mobile-light.png" data-dark="screenshots/05-mobile-dark.png" src="screenshots/05-mobile-light.png" alt="Calendar" width="270" height="480" loading="lazy">
         <p class="screenshot-label" data-i18n="feat_calendar_title">Calendar</p>
       </div>
       <div class="screenshot-item reveal reveal-delay-1">
-        <img class="screenshot-img" data-light="screenshots/mobile-light/mobile-light-budget-2.png" data-dark="screenshots/mobile-dark/mobile-dark-budget-2.png" src="screenshots/mobile-light/mobile-light-budget-2.png" alt="Budget Tracking" width="270" height="480" loading="lazy">
+        <img class="screenshot-img" data-light="screenshots/06-mobile-light.png" data-dark="screenshots/06-mobile-dark.png" src="screenshots/06-mobile-light.png" alt="Budget Tracking" width="270" height="480" loading="lazy">
         <p class="screenshot-label" data-i18n="feat_budget_title">Budget</p>
       </div>
       <div class="screenshot-item reveal reveal-delay-2">
-        <img class="screenshot-img" data-light="screenshots/mobile-light/mobile-light-notes-2.png" data-dark="screenshots/mobile-dark/mobile-dark-notes-2.png" src="screenshots/mobile-light/mobile-light-notes-2.png" alt="Notes" width="270" height="480" loading="lazy">
+        <img class="screenshot-img" data-light="screenshots/07-mobile-light.png" data-dark="screenshots/07-mobile-dark.png" src="screenshots/07-mobile-light.png" alt="Notes" width="270" height="480" loading="lazy">
         <p class="screenshot-label" data-i18n="feat_notes_title">Notes</p>
       </div>
       <div class="screenshot-item reveal reveal-delay-3">
-        <img class="screenshot-img" data-light="screenshots/mobile-light/mobile-light-contacts-2.png" data-dark="screenshots/mobile-dark/mobile-dark-contacts-2.png" src="screenshots/mobile-light/mobile-light-contacts-2.png" alt="Contacts" width="270" height="480" loading="lazy">
+        <img class="screenshot-img" data-light="screenshots/08-mobile-light.png" data-dark="screenshots/08-mobile-dark.png" src="screenshots/08-mobile-light.png" alt="Contacts" width="270" height="480" loading="lazy">
         <p class="screenshot-label" data-i18n="feat_contacts_title">Contacts</p>
       </div>
     </div>