diff --git a/Reflect/Localizable.xcstrings b/Reflect/Localizable.xcstrings
index 164fccd..7a8e6f5 100644
--- a/Reflect/Localizable.xcstrings
+++ b/Reflect/Localizable.xcstrings
@@ -1122,7 +1122,6 @@
       }
     },
     "%lld day streak" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -2595,7 +2594,6 @@
     },
     "AI insights in light & dark mode" : {
       "comment" : "A description of the feature that allows users to export insights from the app.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -2638,7 +2636,6 @@
     },
     "All sizes & theme variations" : {
       "comment" : "A description of what the \"Export Voting Layouts\" button does.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -2681,7 +2678,6 @@
     },
     "All styles & complications" : {
       "comment" : "A description of the feature that allows users to export all watch view screenshots.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -3266,7 +3262,6 @@
     },
     "Bypass Subscription" : {
       "comment" : "A label displayed next to a toggle switch in the \"Debug\" section.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -3771,7 +3766,6 @@
     },
     "Clear All Data" : {
       "comment" : "A button label that clears all user data.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -4915,7 +4909,6 @@
     },
     "Current Parameters" : {
       "comment" : "A section header that lists various current parameters related to the app.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -4958,7 +4951,6 @@
     },
     "Current Streak" : {
       "comment" : "A label describing the user's current streak of using the app.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -5570,7 +5562,6 @@
     },
     "Days Using App" : {
       "comment" : "A label describing the number of days the app has been used.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -5613,7 +5604,6 @@
     },
     "Debug" : {
       "comment" : "A section header in the settings view, hidden in release builds.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -6257,7 +6247,6 @@
     },
     "Delete all mood entries" : {
       "comment" : "A description of what happens when the \"Clear All Data\" button is tapped.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -6342,7 +6331,6 @@
     },
     "Delete HealthKit Data" : {
       "comment" : "A button label that deletes all State of Mind records from HealthKit.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -7014,7 +7002,6 @@
       }
     },
     "Elevate Your\nEmotional Life" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -7724,7 +7711,6 @@
     },
     "Export Insights Screenshots" : {
       "comment" : "A button label that allows users to export insights screenshots.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -7809,7 +7795,6 @@
     },
     "Export Voting Layouts" : {
       "comment" : "A button label that allows users to export all of their voting layout configurations.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -7852,7 +7837,6 @@
     },
     "Export Watch Screenshots" : {
       "comment" : "A button label that allows users to export watch view screenshots.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -7895,7 +7879,6 @@
     },
     "Export Widget Screenshots" : {
       "comment" : "A button label that prompts the user to download their light and dark mode widget screenshots.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -8147,7 +8130,6 @@
       }
     },
     "Feel With\nAll Your Heart" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -8189,7 +8171,6 @@
     },
     "Fill 2 years data + export PNGs" : {
       "comment" : "A description of the feature that generates and exports sharing screenshots.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -8273,7 +8254,6 @@
       }
     },
     "Find Your\nInner Peace" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -8439,7 +8419,6 @@
     },
     "Generate & Export Sharing" : {
       "comment" : "A button label that allows users to generate and export all sharing screenshots.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -8692,7 +8671,6 @@
     },
     "Green dot = eligible to show. Tips only show once per session when eligible." : {
       "comment" : "A footer label explaining that tips are only shown once per session and that the green dot indicates whether a tip is currently eligible to be shown.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -8735,7 +8713,6 @@
     },
     "Has Seen Settings" : {
       "comment" : "A label for whether the user has seen the settings section in the app.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -8820,7 +8797,6 @@
     },
     "Hide trial banner & grant full access" : {
       "comment" : "A description of the feature that allows users to bypass the trial period and access all features without ads.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -8902,7 +8878,6 @@
       }
     },
     "How do you feel?" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -9543,7 +9518,6 @@
     },
     "Light & dark mode PNGs" : {
       "comment" : "A description of what the \"Export Widget Screenshots\" button does.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -9669,7 +9643,6 @@
       }
     },
     "Log" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -9710,7 +9683,6 @@
       }
     },
     "Log mood" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -9915,7 +9887,6 @@
       }
     },
     "Log your mood" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -10078,7 +10049,6 @@
       }
     },
     "Make Tracking\nFun Again!" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -10372,7 +10342,6 @@
     },
     "Mood Log Count" : {
       "comment" : "The title of a label displaying the count of mood logs.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -12496,7 +12465,6 @@
       }
     },
     "Paywall Styles" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -12537,7 +12505,6 @@
       }
     },
     "Paywall Theme Lab" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -13080,7 +13047,6 @@
       }
     },
     "Preview" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -13121,7 +13087,6 @@
       }
     },
     "Preview and test different subscription paywall designs" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -13163,7 +13128,6 @@
     },
     "Preview subscription themes" : {
       "comment" : "A description of what the paywall preview button does.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -14222,7 +14186,6 @@
     },
     "Remove all State of Mind records" : {
       "comment" : "A description of what happens when the \"Delete HealthKit Data\" button is pressed.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -14433,7 +14396,6 @@
     },
     "Reset All Tips" : {
       "comment" : "A button that resets all tips to their default state.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -15077,7 +15039,6 @@
     },
     "Saved to Documents/InsightsExports" : {
       "comment" : "A description of where the insights export file will be saved.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -15120,7 +15081,6 @@
     },
     "Saved to Documents/SharingExports" : {
       "comment" : "A description of where the generated sharing screenshots are saved on a user's device.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -15163,7 +15123,6 @@
     },
     "Saved to Documents/VotingLayoutExports" : {
       "comment" : "A description of where the voting layouts are saved when exported.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -15206,7 +15165,6 @@
     },
     "Saved to Documents/WatchExports" : {
       "comment" : "A description of where the exported watch views are saved.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -15249,7 +15207,6 @@
     },
     "Saved to Documents/WidgetExports" : {
       "comment" : "A description of where the exported widget screenshots are saved.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -15415,7 +15372,6 @@
       }
     },
     "Select Style" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -15541,7 +15497,6 @@
     },
     "Send 5 personality pack notifications" : {
       "comment" : "A description of the action that can be performed when tapping the \"Test All Notifications\" button in the Settings app.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -16364,7 +16319,6 @@
     },
     "Shown This Session" : {
       "comment" : "A label displaying whether they have seen a tip during the current session.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -17256,7 +17210,6 @@
       }
     },
     "Tap to log mood" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -17424,7 +17377,6 @@
     },
     "Tap to preview" : {
       "comment" : "A text label displayed above a list of tips, instructing the user to tap on an item to view more details.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -17633,7 +17585,6 @@
     },
     "Test All Notifications" : {
       "comment" : "A button label that tests sending notifications.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -17676,7 +17627,6 @@
     },
     "Test builds only" : {
       "comment" : "A section header that indicates that the settings view contains only test data.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -17760,7 +17710,6 @@
       }
     },
     "THE ART\nOF FEELING" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -17967,7 +17916,6 @@
     },
     "Tips Enabled" : {
       "comment" : "A toggle that enables or disables tips in the app.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -18010,7 +17958,6 @@
     },
     "Tips Preview" : {
       "comment" : "A label for a view that previews all tip modals.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -19099,7 +19046,6 @@
     },
     "View all tip modals" : {
       "comment" : "A description of what the \"Tips Preview\" button does.",
-      "extractionState" : "stale",
       "isCommentAutoGenerated" : true,
       "localizations" : {
         "de" : {
@@ -19141,7 +19087,6 @@
       }
     },
     "View Full Paywall" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
@@ -19733,7 +19678,6 @@
       }
     },
     "Write Your\nEmotional Story" : {
-      "extractionState" : "stale",
       "localizations" : {
         "de" : {
           "stringUnit" : {
diff --git a/landing_page/index.html b/landing_page/index.html
index 45dc5a6..c29ef1e 100644
--- a/landing_page/index.html
+++ b/landing_page/index.html
@@ -1,1162 +1,748 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Feels — Track Your Emotional Journey</title>
-    <link rel="icon" type="image/png" href="app-icon.png">
-    <link rel="apple-touch-icon" href="app-icon.png">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --great: #4ADE80;
-            --great-glow: rgba(74, 222, 128, 0.4);
-            --good: #FBBF24;
-            --good-glow: rgba(251, 191, 36, 0.4);
-            --average: #94A3B8;
-            --average-glow: rgba(148, 163, 184, 0.3);
-            --bad: #60A5FA;
-            --bad-glow: rgba(96, 165, 250, 0.4);
-            --horrible: #F87171;
-            --horrible-glow: rgba(248, 113, 113, 0.4);
-
-            --bg-primary: #0A0A0B;
-            --bg-secondary: #111113;
-            --bg-card: rgba(255, 255, 255, 0.03);
-            --bg-glass: rgba(255, 255, 255, 0.05);
-            --border-subtle: rgba(255, 255, 255, 0.06);
-            --text-primary: #FAFAFA;
-            --text-secondary: rgba(255, 255, 255, 0.6);
-            --text-tertiary: rgba(255, 255, 255, 0.4);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        html {
-            scroll-behavior: smooth;
-        }
-
-        body {
-            font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-
-        .serif {
-            font-family: 'Instrument Serif', Georgia, serif;
-        }
-
-        /* Noise texture overlay */
-        body::before {
-            content: '';
-            position: fixed;
-            inset: 0;
-            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-            opacity: 0.03;
-            pointer-events: none;
-            z-index: 1000;
-        }
-
-        /* Navigation */
-        nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 100;
-            padding: 1.5rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            backdrop-filter: blur(20px);
-            background: rgba(10, 10, 11, 0.8);
-            border-bottom: 1px solid var(--border-subtle);
-        }
-
-        .logo {
-            font-family: 'Instrument Serif', serif;
-            font-size: 1.5rem;
-            font-weight: 400;
-            letter-spacing: -0.02em;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .logo-icon {
-            width: 32px;
-            height: 32px;
-            border-radius: 8px;
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 2.5rem;
-            list-style: none;
-        }
-
-        .nav-links a {
-            color: var(--text-secondary);
-            text-decoration: none;
-            font-size: 0.875rem;
-            font-weight: 400;
-            transition: color 0.3s ease;
-        }
-
-        .nav-links a:hover {
-            color: var(--text-primary);
-        }
-
-        .nav-cta {
-            background: var(--text-primary);
-            color: var(--bg-primary);
-            padding: 0.625rem 1.25rem;
-            border-radius: 100px;
-            text-decoration: none;
-            font-size: 0.875rem;
-            font-weight: 500;
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-
-        .nav-cta:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 40px rgba(255, 255, 255, 0.15);
-        }
-
-        /* Hero Section */
-        .hero {
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            padding: 8rem 2rem 4rem;
-            position: relative;
-            overflow: hidden;
-        }
-
-        /* Floating mood orbs */
-        .orb {
-            position: absolute;
-            border-radius: 50%;
-            filter: blur(80px);
-            opacity: 0.6;
-            animation: float 20s ease-in-out infinite;
-        }
-
-        .orb-1 {
-            width: 400px;
-            height: 400px;
-            background: var(--great);
-            top: 10%;
-            left: 10%;
-            animation-delay: 0s;
-        }
-
-        .orb-2 {
-            width: 300px;
-            height: 300px;
-            background: var(--good);
-            top: 60%;
-            right: 15%;
-            animation-delay: -5s;
-        }
-
-        .orb-3 {
-            width: 250px;
-            height: 250px;
-            background: var(--bad);
-            bottom: 20%;
-            left: 20%;
-            animation-delay: -10s;
-        }
-
-        .orb-4 {
-            width: 200px;
-            height: 200px;
-            background: var(--horrible);
-            top: 30%;
-            right: 10%;
-            animation-delay: -15s;
-        }
-
-        @keyframes float {
-            0%, 100% { transform: translate(0, 0) scale(1); }
-            25% { transform: translate(30px, -30px) scale(1.05); }
-            50% { transform: translate(-20px, 20px) scale(0.95); }
-            75% { transform: translate(20px, 30px) scale(1.02); }
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 10;
-            max-width: 900px;
-        }
-
-        .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            background: var(--bg-glass);
-            border: 1px solid var(--border-subtle);
-            padding: 0.5rem 1rem;
-            border-radius: 100px;
-            font-size: 0.8125rem;
-            color: var(--text-secondary);
-            margin-bottom: 2rem;
-            backdrop-filter: blur(10px);
-        }
-
-        .hero-badge::before {
-            content: '';
-            width: 6px;
-            height: 6px;
-            background: var(--great);
-            border-radius: 50%;
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.5; transform: scale(1.2); }
-        }
-
-        .hero h1 {
-            font-family: 'Instrument Serif', serif;
-            font-size: clamp(3rem, 8vw, 6rem);
-            font-weight: 400;
-            line-height: 1.1;
-            letter-spacing: -0.03em;
-            margin-bottom: 1.5rem;
-        }
-
-        .hero h1 em {
-            font-style: italic;
-            background: linear-gradient(135deg, var(--great), var(--good));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .hero-description {
-            font-size: 1.25rem;
-            color: var(--text-secondary);
-            max-width: 540px;
-            margin: 0 auto 3rem;
-            font-weight: 300;
-        }
-
-        .hero-cta-group {
-            display: flex;
-            gap: 1rem;
-            justify-content: center;
-            flex-wrap: wrap;
-        }
-
-        .btn-primary {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.75rem;
-            background: var(--text-primary);
-            color: var(--bg-primary);
-            padding: 1rem 2rem;
-            border-radius: 100px;
-            text-decoration: none;
-            font-weight: 500;
-            font-size: 1rem;
-            transition: all 0.3s ease;
-        }
-
-        .btn-primary:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 20px 60px rgba(255, 255, 255, 0.2);
-        }
-
-        .btn-primary svg {
-            width: 20px;
-            height: 20px;
-        }
-
-        .btn-secondary {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            background: var(--bg-glass);
-            border: 1px solid var(--border-subtle);
-            color: var(--text-primary);
-            padding: 1rem 2rem;
-            border-radius: 100px;
-            text-decoration: none;
-            font-weight: 500;
-            font-size: 1rem;
-            backdrop-filter: blur(10px);
-            transition: all 0.3s ease;
-        }
-
-        .btn-secondary:hover {
-            background: rgba(255, 255, 255, 0.1);
-            border-color: rgba(255, 255, 255, 0.15);
-        }
-
-        /* Phone Mockup */
-        .hero-mockup {
-            margin-top: 4rem;
-            position: relative;
-            z-index: 10;
-        }
-
-        .phone-frame {
-            width: 280px;
-            height: 580px;
-            background: linear-gradient(145deg, #1a1a1c, #0d0d0e);
-            border-radius: 45px;
-            padding: 12px;
-            box-shadow:
-                0 50px 100px rgba(0, 0, 0, 0.5),
-                inset 0 1px 1px rgba(255, 255, 255, 0.1);
-            position: relative;
-        }
-
-        .phone-screen {
-            width: 100%;
-            height: 100%;
-            background: var(--bg-secondary);
-            border-radius: 35px;
-            overflow: hidden;
-            position: relative;
-        }
-
-        .phone-notch {
-            position: absolute;
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 120px;
-            height: 30px;
-            background: #000;
-            border-radius: 0 0 20px 20px;
-            z-index: 10;
-        }
-
-        .phone-content {
-            padding: 50px 20px 20px;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .phone-header {
-            text-align: center;
-            margin-bottom: 1.5rem;
-        }
-
-        .phone-header h3 {
-            font-family: 'Instrument Serif', serif;
-            font-size: 1.5rem;
-            font-weight: 400;
-        }
-
-        .phone-header p {
-            font-size: 0.75rem;
-            color: var(--text-tertiary);
-            margin-top: 0.25rem;
-        }
-
-        /* Year Grid Visualization */
-        .year-grid {
-            display: grid;
-            grid-template-columns: repeat(12, 1fr);
-            gap: 3px;
-            flex: 1;
-            align-content: start;
-        }
-
-        .year-grid .day {
-            aspect-ratio: 1;
-            border-radius: 2px;
-            opacity: 0;
-            animation: fadeInDay 0.5s ease forwards;
-        }
-
-        .year-grid .day.great { background: var(--great); }
-        .year-grid .day.good { background: var(--good); }
-        .year-grid .day.average { background: var(--average); }
-        .year-grid .day.bad { background: var(--bad); }
-        .year-grid .day.horrible { background: var(--horrible); }
-        .year-grid .day.empty { background: rgba(255, 255, 255, 0.05); }
-
-        @keyframes fadeInDay {
-            to { opacity: 1; }
-        }
-
-        /* Section styling */
-        section {
-            padding: 8rem 2rem;
-            position: relative;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .section-label {
-            font-size: 0.75rem;
-            text-transform: uppercase;
-            letter-spacing: 0.15em;
-            color: var(--text-tertiary);
-            margin-bottom: 1rem;
-        }
-
-        .section-title {
-            font-family: 'Instrument Serif', serif;
-            font-size: clamp(2rem, 5vw, 3.5rem);
-            font-weight: 400;
-            line-height: 1.2;
-            letter-spacing: -0.02em;
-            margin-bottom: 1rem;
-        }
-
-        .section-description {
-            font-size: 1.125rem;
-            color: var(--text-secondary);
-            max-width: 500px;
-            font-weight: 300;
-        }
-
-        /* Features Section */
-        .features {
-            background: var(--bg-secondary);
-        }
-
-        .features-header {
-            text-align: center;
-            margin-bottom: 5rem;
-        }
-
-        .features-header .section-description {
-            margin: 0 auto;
-        }
-
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-            gap: 1.5rem;
-        }
-
-        .feature-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border-subtle);
-            border-radius: 24px;
-            padding: 2rem;
-            transition: all 0.4s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .feature-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-            opacity: 0;
-            transition: opacity 0.4s ease;
-        }
-
-        .feature-card:hover {
-            transform: translateY(-4px);
-            border-color: rgba(255, 255, 255, 0.1);
-            background: rgba(255, 255, 255, 0.04);
-        }
-
-        .feature-card:hover::before {
-            opacity: 1;
-        }
-
-        .feature-icon {
-            width: 48px;
-            height: 48px;
-            border-radius: 14px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 1.5rem;
-            font-size: 1.5rem;
-        }
-
-        .feature-icon.green { background: rgba(74, 222, 128, 0.15); }
-        .feature-icon.yellow { background: rgba(251, 191, 36, 0.15); }
-        .feature-icon.blue { background: rgba(96, 165, 250, 0.15); }
-        .feature-icon.purple { background: rgba(168, 85, 247, 0.15); }
-        .feature-icon.red { background: rgba(248, 113, 113, 0.15); }
-        .feature-icon.gray { background: rgba(148, 163, 184, 0.15); }
-        .feature-icon.cyan { background: rgba(34, 211, 238, 0.15); }
-
-        .feature-card h3 {
-            font-size: 1.125rem;
-            font-weight: 600;
-            margin-bottom: 0.75rem;
-        }
-
-        .feature-card p {
-            font-size: 0.9375rem;
-            color: var(--text-secondary);
-            line-height: 1.6;
-        }
-
-        /* Devices Section */
-        .devices {
-            overflow: hidden;
-        }
-
-        .devices-content {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 4rem;
-            align-items: center;
-        }
-
-        .devices-visual {
-            display: flex;
-            justify-content: center;
-            align-items: flex-end;
-            gap: 2rem;
-            position: relative;
-        }
-
-        /* Watch mockup */
-        .watch-frame {
-            width: 160px;
-            height: 190px;
-            background: linear-gradient(145deg, #2a2a2c, #1a1a1c);
-            border-radius: 40px;
-            padding: 8px;
-            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
-        }
-
-        .watch-screen {
-            width: 100%;
-            height: 100%;
-            background: var(--bg-primary);
-            border-radius: 34px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 0.75rem;
-            padding: 1rem;
-        }
-
-        .watch-mood-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 6px;
-        }
-
-        .watch-mood {
-            width: 32px;
-            height: 32px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1rem;
-        }
-
-        .watch-mood.great { background: rgba(74, 222, 128, 0.2); }
-        .watch-mood.good { background: rgba(251, 191, 36, 0.2); }
-        .watch-mood.average { background: rgba(148, 163, 184, 0.2); }
-        .watch-mood.bad { background: rgba(96, 165, 250, 0.2); }
-        .watch-mood.horrible { background: rgba(248, 113, 113, 0.2); }
-
-        .watch-label {
-            font-size: 0.625rem;
-            color: var(--text-tertiary);
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-        }
-
-        /* Widget mockup */
-        .widget-frame {
-            width: 170px;
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--border-subtle);
-            border-radius: 24px;
-            padding: 1rem;
-        }
-
-        .widget-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 0.75rem;
-        }
-
-        .widget-title {
-            font-size: 0.75rem;
-            font-weight: 600;
-        }
-
-        .widget-streak {
-            font-size: 0.625rem;
-            color: var(--good);
-            display: flex;
-            align-items: center;
-            gap: 0.25rem;
-        }
-
-        .widget-moods {
-            display: flex;
-            gap: 0.5rem;
-            justify-content: space-between;
-        }
-
-        .widget-mood {
-            width: 28px;
-            height: 28px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 0.875rem;
-            cursor: pointer;
-            transition: transform 0.2s ease;
-        }
-
-        .widget-mood:hover {
-            transform: scale(1.15);
-        }
-
-        .widget-mood.great { background: rgba(74, 222, 128, 0.2); }
-        .widget-mood.good { background: rgba(251, 191, 36, 0.2); }
-        .widget-mood.average { background: rgba(148, 163, 184, 0.2); }
-        .widget-mood.bad { background: rgba(96, 165, 250, 0.2); }
-        .widget-mood.horrible { background: rgba(248, 113, 113, 0.2); }
-
-        .devices-text ul {
-            list-style: none;
-            margin-top: 2rem;
-        }
-
-        .devices-text li {
-            display: flex;
-            align-items: flex-start;
-            gap: 1rem;
-            margin-bottom: 1.25rem;
-            font-size: 1rem;
-            color: var(--text-secondary);
-        }
-
-        .devices-text li::before {
-            content: '→';
-            color: var(--great);
-            font-weight: 600;
-        }
-
-        /* Testimonials */
-        .testimonials {
-            background: var(--bg-secondary);
-        }
-
-        .testimonials-header {
-            text-align: center;
-            margin-bottom: 4rem;
-        }
-
-        .testimonials-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 1.5rem;
-        }
-
-        .testimonial-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border-subtle);
-            border-radius: 20px;
-            padding: 2rem;
-        }
-
-        .testimonial-stars {
-            color: var(--good);
-            font-size: 0.875rem;
-            letter-spacing: 0.1em;
-            margin-bottom: 1rem;
-        }
-
-        .testimonial-text {
-            font-size: 1rem;
-            line-height: 1.7;
-            margin-bottom: 1.5rem;
-            font-style: italic;
-            color: var(--text-secondary);
-        }
-
-        .testimonial-author {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-
-        .testimonial-avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--great), var(--good));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 600;
-            font-size: 0.875rem;
-        }
-
-        .testimonial-name {
-            font-weight: 500;
-            font-size: 0.9375rem;
-        }
-
-        .testimonial-handle {
-            font-size: 0.8125rem;
-            color: var(--text-tertiary);
-        }
-
-        /* CTA Section */
-        .cta {
-            text-align: center;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .cta::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 600px;
-            height: 600px;
-            background: radial-gradient(circle, var(--great-glow) 0%, transparent 70%);
-            opacity: 0.3;
-            pointer-events: none;
-        }
-
-        .cta-content {
-            position: relative;
-            z-index: 10;
-        }
-
-        .cta .section-title {
-            margin-bottom: 1.5rem;
-        }
-
-        .cta .section-description {
-            margin: 0 auto 2.5rem;
-        }
-
-        .app-store-badge {
-            display: inline-block;
-            transition: transform 0.3s ease;
-        }
-
-        .app-store-badge:hover {
-            transform: scale(1.05);
-        }
-
-        .app-store-badge img {
-            height: 54px;
-        }
-
-        /* Footer */
-        footer {
-            padding: 3rem 2rem;
-            border-top: 1px solid var(--border-subtle);
-        }
-
-        .footer-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-
-        .footer-logo {
-            font-family: 'Instrument Serif', serif;
-            font-size: 1.25rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .footer-links {
-            display: flex;
-            gap: 2rem;
-            list-style: none;
-        }
-
-        .footer-links a {
-            color: var(--text-tertiary);
-            text-decoration: none;
-            font-size: 0.875rem;
-            transition: color 0.3s ease;
-        }
-
-        .footer-links a:hover {
-            color: var(--text-primary);
-        }
-
-        .footer-copy {
-            font-size: 0.8125rem;
-            color: var(--text-tertiary);
-        }
-
-        /* Scroll animations */
-        .reveal {
-            opacity: 0;
-            transform: translateY(30px);
-            transition: opacity 0.8s ease, transform 0.8s ease;
-        }
-
-        .reveal.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        /* Mobile responsiveness */
-        @media (max-width: 768px) {
-            nav {
-                padding: 1rem;
-            }
-
-            .nav-links {
-                display: none;
-            }
-
-            .hero {
-                padding: 7rem 1.5rem 3rem;
-            }
-
-            .hero-description {
-                font-size: 1.125rem;
-            }
-
-            .hero-cta-group {
-                flex-direction: column;
-                align-items: center;
-            }
-
-            .phone-frame {
-                width: 240px;
-                height: 500px;
-            }
-
-            section {
-                padding: 5rem 1.5rem;
-            }
-
-            .devices-content {
-                grid-template-columns: 1fr;
-                gap: 3rem;
-            }
-
-            .devices-visual {
-                order: -1;
-            }
-
-            .footer-content {
-                flex-direction: column;
-                text-align: center;
-            }
-        }
-    </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>reflect — a quiet space for your inner world</title>
+  <meta name="description" content="Track your feelings, discover patterns, and understand yourself with reflect — a beautifully designed mood journal for iOS.">
+  <meta name="theme-color" content="#f5f1eb">
+  <meta property="og:title" content="reflect — a quiet space for your inner world">
+  <meta property="og:description" content="A beautifully designed mood journal for iOS. Track your feelings, discover patterns, understand yourself.">
+  <meta property="og:type" content="website">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <style>
+    /* ────────────────────────────────────
+       VARIABLES
+    ──────────────────────────────────── */
+    :root {
+      --bg: #f5f1eb;
+      --bg-alt: #eae5dd;
+      --text: #1a1816;
+      --text-muted: #887f75;
+      --accent: #3d5a4c;
+      --accent-hover: #2c4639;
+      --warm: #c4956b;
+      --dark: #141210;
+      --dark-muted: rgba(245,241,235,0.55);
+      --serif: 'Cormorant Garamond', 'Georgia', serif;
+      --sans: 'Outfit', 'Helvetica Neue', sans-serif;
+      --gap: clamp(100px, 12vw, 180px);
+    }
+
+    /* ────────────────────────────────────
+       RESET
+    ──────────────────────────────────── */
+    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    body {
+      font-family: var(--sans);
+      font-weight: 400;
+      font-size: 1rem;
+      line-height: 1.7;
+      color: var(--text);
+      background: var(--bg);
+      overflow-x: hidden;
+    }
+    img { display: block; max-width: 100%; height: auto; }
+    a { color: inherit; text-decoration: none; }
+
+    /* ────────────────────────────────────
+       LAYOUT
+    ──────────────────────────────────── */
+    .container {
+      max-width: 1080px;
+      margin: 0 auto;
+      padding: 0 clamp(24px, 5vw, 56px);
+    }
+    section { padding: var(--gap) 0; }
+
+    /* ────────────────────────────────────
+       TYPOGRAPHY
+    ──────────────────────────────────── */
+    h1, h2 {
+      font-family: var(--serif);
+      font-weight: 400;
+      font-style: italic;
+      line-height: 1.25;
+      color: var(--text);
+    }
+    .label {
+      font-family: var(--sans);
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: var(--accent);
+      display: inline-flex;
+      align-items: center;
+      gap: 14px;
+      margin-bottom: 20px;
+    }
+    .label::before {
+      content: '';
+      width: 28px;
+      height: 1px;
+      background: currentColor;
+    }
+
+    /* ────────────────────────────────────
+       BUTTON
+    ──────────────────────────────────── */
+    .btn {
+      display: inline-block;
+      padding: 15px 44px;
+      background: var(--accent);
+      color: var(--bg);
+      font-family: var(--sans);
+      font-weight: 500;
+      font-size: 0.92rem;
+      letter-spacing: 0.05em;
+      border-radius: 100px;
+      border: none;
+      cursor: pointer;
+      transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    @media (hover: hover) {
+      .btn:hover {
+        background: var(--accent-hover);
+        transform: translateY(-2px);
+        box-shadow: 0 14px 40px rgba(61,90,76,0.22);
+      }
+    }
+    .btn:active { transform: translateY(0); box-shadow: none; }
+
+    /* ────────────────────────────────────
+       PHONE FRAME (phone.png overlay)
+    ──────────────────────────────────── */
+    .phone {
+      position: relative;
+      display: inline-block;
+      filter:
+        drop-shadow(0 24px 64px rgba(0,0,0,0.2))
+        drop-shadow(0 8px 20px rgba(0,0,0,0.06));
+    }
+    .phone-frame {
+      display: block;
+      width: 100%;
+      position: relative;
+      z-index: 2;
+      pointer-events: none;
+    }
+    .phone-screen {
+      position: absolute;
+      top: 2.6%;
+      left: 4.4%;
+      width: 91.2%;
+      height: 95.6%;
+      border-radius: clamp(22px, 10%, 42px);
+      object-fit: cover;
+      z-index: 1;
+    }
+
+    /* ────────────────────────────────────
+       WATCH FRAME (watch.png overlay)
+    ──────────────────────────────────── */
+    .watch {
+      position: relative;
+      display: inline-block;
+      overflow: hidden;
+      filter:
+        drop-shadow(0 16px 40px rgba(0,0,0,0.14))
+        drop-shadow(0 6px 14px rgba(0,0,0,0.05));
+    }
+    .watch-frame {
+      display: block;
+      width: 100%;
+      position: relative;
+      z-index: 2;
+      pointer-events: none;
+    }
+    .watch-screen {
+      position: absolute;
+      top: 23.2%;
+      left: 14.8%;
+      width: 70.3%;
+      height: 53.5%;
+      border-radius: 14.5%;
+      object-fit: cover;
+      object-position: center;
+      background: #000;
+      z-index: 1;
+    }
+
+    /* ────────────────────────────────────
+       NAVIGATION
+    ──────────────────────────────────── */
+    .nav {
+      position: fixed;
+      top: 0; left: 0; right: 0;
+      z-index: 100;
+      padding: 22px 0;
+      transition: background 0.4s, padding 0.4s, box-shadow 0.4s;
+    }
+    .nav.scrolled {
+      background: rgba(245,241,235,0.92);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      padding: 14px 0;
+      box-shadow: 0 1px 0 rgba(26,24,22,0.06);
+    }
+    .nav .container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .nav-logo {
+      font-family: var(--serif);
+      font-weight: 500;
+      font-style: italic;
+      font-size: 1.55rem;
+      letter-spacing: 0.01em;
+    }
+    .nav .btn { padding: 10px 30px; font-size: 0.82rem; }
+
+    /* ────────────────────────────────────
+       HERO
+    ──────────────────────────────────── */
+    .hero {
+      text-align: center;
+      padding: 160px 24px 80px;
+      position: relative;
+      overflow: hidden;
+    }
+    .hero-watermark {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -62%);
+      font-family: var(--serif);
+      font-weight: 300;
+      font-style: italic;
+      font-size: clamp(6rem, 14vw, 17rem);
+      letter-spacing: 0.06em;
+      color: transparent;
+      -webkit-text-stroke: 1.2px rgba(26,24,22,0.045);
+      white-space: nowrap;
+      pointer-events: none;
+      user-select: none;
+      will-change: transform;
+    }
+    .hero-orb {
+      position: absolute;
+      border-radius: 50%;
+      pointer-events: none;
+    }
+    .hero-orb--sage {
+      width: clamp(280px, 38vw, 550px);
+      height: clamp(280px, 38vw, 550px);
+      background: radial-gradient(circle, rgba(141,167,143,0.13), transparent 70%);
+      filter: blur(80px);
+      top: 10%;
+      right: -8%;
+    }
+    .hero-orb--warm {
+      width: clamp(220px, 28vw, 420px);
+      height: clamp(220px, 28vw, 420px);
+      background: radial-gradient(circle, rgba(196,149,107,0.1), transparent 70%);
+      filter: blur(60px);
+      bottom: 15%;
+      left: -6%;
+    }
+    .hero-inner {
+      position: relative;
+      z-index: 1;
+      max-width: 740px;
+      margin: 0 auto;
+    }
+    .hero h1 {
+      font-size: clamp(2.4rem, 5.5vw, 4.4rem);
+      font-weight: 300;
+      margin-bottom: 24px;
+      line-height: 1.15;
+    }
+    .hero-sub {
+      color: var(--text-muted);
+      font-size: clamp(0.92rem, 1.2vw, 1.08rem);
+      max-width: 540px;
+      margin: 0 auto 32px;
+      line-height: 1.7;
+    }
+    .hero-features {
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-bottom: 36px;
+    }
+    .hero-pill {
+      padding: 8px 20px;
+      background: rgba(61,90,76,0.07);
+      border: 1px solid rgba(61,90,76,0.1);
+      border-radius: 100px;
+      font-size: 0.8rem;
+      font-weight: 500;
+      color: var(--accent);
+      letter-spacing: 0.02em;
+    }
+    .hero-phone-wrap {
+      width: min(300px, 68vw);
+      margin: 56px auto 0;
+    }
+    .hero-phone-wrap .phone { animation: float 7s ease-in-out infinite; }
+
+    /* ────────────────────────────────────
+       EDITORIAL STATEMENT
+    ──────────────────────────────────── */
+    .editorial {
+      text-align: center;
+      padding: clamp(60px, 8vw, 120px) 24px;
+    }
+    .editorial-rule {
+      width: 44px;
+      height: 1px;
+      background: var(--accent);
+      opacity: 0.25;
+      margin: 0 auto 48px;
+    }
+    .editorial p {
+      font-family: var(--serif);
+      font-weight: 400;
+      font-style: italic;
+      font-size: clamp(1.3rem, 2.8vw, 2.1rem);
+      line-height: 1.5;
+      max-width: 540px;
+      margin: 0 auto;
+    }
+
+    /* ────────────────────────────────────
+       FEATURE SPREAD
+    ──────────────────────────────────── */
+    .spread {
+      display: flex;
+      align-items: center;
+      gap: clamp(40px, 7vw, 96px);
+    }
+    .spread-img { flex: 0 0 auto; }
+    .spread-img .phone { width: min(300px, 58vw); }
+    .spread-body { flex: 1; }
+    .spread-body h2 {
+      font-size: clamp(1.45rem, 2.8vw, 2.1rem);
+      margin-bottom: 18px;
+    }
+    .spread-body p {
+      color: var(--text-muted);
+      font-size: clamp(0.88rem, 1vw, 0.98rem);
+      line-height: 1.8;
+      max-width: 400px;
+    }
+
+    /* ────────────────────────────────────
+       DARK SECTION — UNDERSTAND
+    ──────────────────────────────────── */
+    .dark-section {
+      background: var(--dark);
+      background-image: radial-gradient(ellipse at 50% 0%, rgba(61,90,76,0.1), transparent 50%);
+      color: var(--bg);
+      text-align: center;
+    }
+    .dark-section .label { color: var(--warm); }
+    .dark-section .label::before { background: var(--warm); }
+    .dark-section h2 {
+      color: var(--bg);
+      font-size: clamp(1.45rem, 2.8vw, 2.1rem);
+      margin-bottom: 18px;
+    }
+    .dark-section .dark-body {
+      color: var(--dark-muted);
+      max-width: 440px;
+      margin: 0 auto 56px;
+      font-size: clamp(0.88rem, 1vw, 0.98rem);
+      line-height: 1.75;
+    }
+    .dark-section .phone {
+      width: min(320px, 68vw);
+      margin: 0 auto;
+      filter:
+        drop-shadow(0 0 100px rgba(61,90,76,0.08))
+        drop-shadow(0 36px 80px rgba(0,0,0,0.5));
+    }
+
+    /* ────────────────────────────────────
+       DUALITY — LIGHT & DARK
+    ──────────────────────────────────── */
+    .duality { text-align: center; }
+    .duality h2 {
+      font-size: clamp(1.45rem, 2.8vw, 2.1rem);
+      margin-bottom: 18px;
+    }
+    .duality-sub {
+      color: var(--text-muted);
+      max-width: 420px;
+      margin: 0 auto 56px;
+      font-size: clamp(0.88rem, 1vw, 0.98rem);
+      line-height: 1.7;
+    }
+    .duality-cards {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .duality-card {
+      width: min(260px, 38vw);
+      border-radius: 28px;
+      overflow: hidden;
+      box-shadow: 0 24px 68px -8px rgba(0,0,0,0.15);
+      transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);
+    }
+    .duality-card img { display: block; width: 100%; }
+    .duality-card:first-child {
+      transform: rotate(-5deg) translateX(16px);
+      z-index: 2;
+    }
+    .duality-card:last-child {
+      transform: rotate(5deg) translateX(-16px);
+      z-index: 1;
+    }
+
+    /* ────────────────────────────────────
+       EVERYWHERE — BENTO
+    ──────────────────────────────────── */
+    .everywhere { text-align: center; }
+    .everywhere h2 {
+      font-size: clamp(1.45rem, 2.8vw, 2.1rem);
+      margin-bottom: 18px;
+    }
+    .everywhere-sub {
+      color: var(--text-muted);
+      max-width: 420px;
+      margin: 0 auto 52px;
+      font-size: clamp(0.88rem, 1vw, 0.98rem);
+      line-height: 1.7;
+    }
+    .bento {
+      display: grid;
+      grid-template-columns: 1.5fr 1fr;
+      gap: 20px;
+      max-width: 700px;
+      margin: 0 auto;
+    }
+    .bento-item {
+      background: var(--bg-alt);
+      border-radius: 24px;
+      padding: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .bento-item > img { border-radius: 16px; width: 100%; }
+    .bento-item--watch { background: transparent; padding: 0; }
+    .bento-item--watch .watch { width: 100%; }
+
+    /* ────────────────────────────────────
+       CTA
+    ──────────────────────────────────── */
+    .cta {
+      text-align: center;
+      padding-top: var(--gap);
+      padding-bottom: clamp(80px, 10vw, 140px);
+    }
+    .cta h2 {
+      font-weight: 300;
+      font-size: clamp(1.8rem, 4vw, 3.2rem);
+      margin-bottom: 40px;
+    }
+
+    /* ────────────────────────────────────
+       FOOTER
+    ──────────────────────────────────── */
+    footer {
+      text-align: center;
+      padding: 44px 24px;
+      color: var(--text-muted);
+      font-size: 0.82rem;
+    }
+    .f-logo {
+      font-family: var(--serif);
+      font-style: italic;
+      font-weight: 500;
+      font-size: 1.15rem;
+      color: var(--text);
+      margin-bottom: 6px;
+    }
+
+    /* ────────────────────────────────────
+       GRAIN OVERLAY
+    ──────────────────────────────────── */
+    .grain {
+      position: fixed;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+      opacity: 0.026;
+    }
+
+    /* ────────────────────────────────────
+       ANIMATIONS
+    ──────────────────────────────────── */
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+
+    .reveal {
+      opacity: 0;
+      transform: translateY(28px);
+      transition:
+        opacity 0.9s cubic-bezier(.25,.46,.45,.94),
+        transform 0.9s cubic-bezier(.25,.46,.45,.94);
+    }
+    .reveal.pop {
+      transform: translateY(28px) scale(0.97);
+    }
+    .reveal.vis {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .reveal.pop.vis {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    .d1 { transition-delay: .12s; }
+    .d2 { transition-delay: .24s; }
+    .d3 { transition-delay: .36s; }
+
+    /* ────────────────────────────────────
+       RESPONSIVE
+    ──────────────────────────────────── */
+    @media (max-width: 880px) {
+      .spread {
+        flex-direction: column;
+        text-align: center;
+      }
+      .spread-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .spread-body p { max-width: 480px; }
+    }
+
+    @media (max-width: 600px) {
+      .hero-phone-wrap { width: min(260px, 72vw); }
+      .duality-card {
+        width: min(190px, 44vw);
+        border-radius: 20px;
+      }
+      .duality-card:first-child { transform: rotate(-3deg) translateX(10px); }
+      .duality-card:last-child { transform: rotate(3deg) translateX(-10px); }
+      .bento { grid-template-columns: 1fr; max-width: 340px; }
+      .phone-screen { border-radius: clamp(20px, 9%, 36px); }
+      .bento-item { padding: 20px; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .reveal { opacity: 1; transform: none; transition: none; }
+      .hero-phone-wrap .phone { animation: none; }
+      html { scroll-behavior: auto; }
+    }
+  </style>
 </head>
+
 <body>
-    <nav>
-        <div class="logo"><img src="app-icon.png" alt="Feels" class="logo-icon">Feels</div>
-        <ul class="nav-links">
-            <li><a href="#features">Features</a></li>
-            <li><a href="#devices">Devices</a></li>
-            <li><a href="#testimonials">Reviews</a></li>
-        </ul>
-        <a href="#download" class="nav-cta">Download</a>
-    </nav>
+  <!-- Grain texture -->
+  <svg class="grain" aria-hidden="true">
+    <filter id="grain-noise">
+      <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
+    </filter>
+    <rect width="100%" height="100%" filter="url(#grain-noise)"/>
+  </svg>
 
-    <section class="hero">
-        <div class="orb orb-1"></div>
-        <div class="orb orb-2"></div>
-        <div class="orb orb-3"></div>
-        <div class="orb orb-4"></div>
+  <!-- Navigation -->
+  <nav class="nav" role="navigation" aria-label="Main">
+    <div class="container">
+      <a href="#" class="nav-logo">reflect</a>
+      <a href="https://example.com/reflect-download" class="btn">download</a>
+    </div>
+  </nav>
 
-        <div class="hero-content">
-            <div class="hero-badge">Now available for Apple Watch</div>
-            <h1>Understand your <em>emotional</em> patterns</h1>
-            <p class="hero-description">Track your daily mood in seconds. See your year at a glance. Build awareness that lasts a lifetime.</p>
-            <div class="hero-cta-group">
-                <a href="#download" class="btn-primary">
-                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
-                    Download for iOS
-                </a>
-                <a href="#features" class="btn-secondary">
-                    Learn more
-                </a>
-            </div>
+  <!-- ═══════════════════════════════════
+       HERO
+  ════════════════════════════════════ -->
+  <section class="hero" aria-label="Introduction">
+    <span class="hero-watermark" aria-hidden="true">reflect</span>
+    <div class="hero-orb hero-orb--sage" aria-hidden="true"></div>
+    <div class="hero-orb hero-orb--warm" aria-hidden="true"></div>
+
+    <div class="hero-inner">
+      <h1 class="reveal">a quiet space for<br>your inner world</h1>
+      <p class="hero-sub reveal d1">A beautifully designed mood journal for iOS. Check in each day, watch patterns emerge over time, and let AI-powered insights illuminate your emotional journey.</p>
+      <div class="hero-features reveal d2">
+        <span class="hero-pill">daily check-ins</span>
+        <span class="hero-pill">mood patterns</span>
+        <span class="hero-pill">AI insights</span>
+        <span class="hero-pill">Apple Watch</span>
+        <span class="hero-pill">widgets</span>
+      </div>
+      <a href="https://example.com/reflect-download" class="btn reveal d2">download</a>
+      <div class="hero-phone-wrap reveal d3 pop">
+        <div class="phone">
+          <img class="phone-screen"
+            src="../screens/Simulator Screenshot - iPhone 17 Pro - 2026-02-15 at 10.45.32.png"
+            alt="reflect app showing a colorful monthly mood grid with emoji entries"
+            loading="eager"
+          >
+          <img class="phone-frame" src="../screens/phone.png" alt="" aria-hidden="true" loading="eager">
         </div>
+      </div>
+    </div>
+  </section>
 
-        <div class="hero-mockup">
-            <div class="phone-frame">
-                <div class="phone-screen">
-                    <div class="phone-notch"></div>
-                    <div class="phone-content">
-                        <div class="phone-header">
-                            <h3>2026</h3>
-                            <p>Your year in feelings</p>
-                        </div>
-                        <div class="year-grid" id="yearGrid"></div>
-                    </div>
-                </div>
-            </div>
+  <!-- ═══════════════════════════════════
+       EDITORIAL STATEMENT
+  ════════════════════════════════════ -->
+  <div class="editorial">
+    <div class="editorial-rule reveal" aria-hidden="true"></div>
+    <p class="reveal d1">Every day tells a story worth remembering.</p>
+  </div>
+
+  <!-- ═══════════════════════════════════
+       FEATURE — YOUR JOURNEY
+  ════════════════════════════════════ -->
+  <section aria-label="Track your journey">
+    <div class="container">
+      <div class="spread">
+        <div class="spread-img reveal pop">
+          <div class="phone">
+            <img class="phone-screen"
+              src="../screens/Simulator Screenshot - iPhone 17 Pro - 2026-02-15 at 10.45.03.png"
+              alt="Daily mood timeline showing entries for each day with mood colors"
+              loading="lazy"
+            >
+            <img class="phone-frame" src="../screens/phone.png" alt="" aria-hidden="true" loading="lazy">
+          </div>
         </div>
-    </section>
-
-    <section class="features" id="features">
-        <div class="container">
-            <div class="features-header reveal">
-                <p class="section-label">Features</p>
-                <h2 class="section-title">Everything you need to<br>know yourself better</h2>
-                <p class="section-description">Simple enough for daily use. Powerful enough for real insights.</p>
-            </div>
-
-            <div class="features-grid">
-                <div class="feature-card reveal">
-                    <div class="feature-icon green">😊</div>
-                    <h3>Five Simple Moods</h3>
-                    <p>Great, Good, Average, Bad, or Horrible. No complicated scales—just honest, quick reflection.</p>
-                </div>
-                <div class="feature-card reveal">
-                    <div class="feature-icon yellow">📊</div>
-                    <h3>Year Visualization</h3>
-                    <p>See 365 days of emotions in one beautiful view. Spot patterns you never knew existed.</p>
-                </div>
-                <div class="feature-card reveal">
-                    <div class="feature-icon blue">⌚</div>
-                    <h3>Apple Watch App</h3>
-                    <p>Log your mood from your wrist. Complications keep your streak visible all day.</p>
-                </div>
-                <div class="feature-card reveal">
-                    <div class="feature-icon purple">🔮</div>
-                    <h3>Interactive Widgets</h3>
-                    <p>Vote directly from your home screen. No need to open the app.</p>
-                </div>
-                <div class="feature-card reveal">
-                    <div class="feature-icon red">🔥</div>
-                    <h3>Streak Tracking</h3>
-                    <p>Build the habit of self-awareness. Your streak shows on Dynamic Island.</p>
-                </div>
-                <div class="feature-card reveal">
-                    <div class="feature-icon gray">🔒</div>
-                    <h3>Privacy First</h3>
-                    <p>Your feelings stay yours. All data lives on your devices with iCloud sync.</p>
-                </div>
-                <div class="feature-card reveal">
-                    <div class="feature-icon cyan">♿</div>
-                    <h3>WCAG 2.1 AA Accessible</h3>
-                    <p>Built for everyone. Full VoiceOver support, Dynamic Type, and high contrast ensure no one is left behind.</p>
-                </div>
-            </div>
+        <div class="spread-body">
+          <span class="label reveal">your journey</span>
+          <h2 class="reveal d1">check in. look back.<br>see the whole picture.</h2>
+          <p class="reveal d2">A simple daily check-in captures how you're feeling — building a colorful mosaic of your emotional life. Days become weeks. Weeks become months. Patterns you'd never notice begin to emerge.</p>
         </div>
-    </section>
+      </div>
+    </div>
+  </section>
 
-    <section class="devices" id="devices">
-        <div class="container">
-            <div class="devices-content">
-                <div class="devices-text reveal">
-                    <p class="section-label">Ecosystem</p>
-                    <h2 class="section-title">Your mood,<br>everywhere you are</h2>
-                    <p class="section-description">iPhone, Apple Watch, widgets, Siri—log however feels natural in the moment.</p>
-                    <ul>
-                        <li>Watch complications show today's mood & streak</li>
-                        <li>"Hey Siri, log my mood as great"</li>
-                        <li>HealthKit integration for deeper insights</li>
-                        <li>iCloud keeps everything in sync</li>
-                    </ul>
-                </div>
-                <div class="devices-visual reveal">
-                    <div class="watch-frame">
-                        <div class="watch-screen">
-                            <span class="watch-label">How do you feel?</span>
-                            <div class="watch-mood-grid">
-                                <div class="watch-mood great">😀</div>
-                                <div class="watch-mood good">🙂</div>
-                                <div class="watch-mood average">😐</div>
-                                <div class="watch-mood bad">😕</div>
-                                <div class="watch-mood horrible">💩</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="widget-frame">
-                        <div class="widget-header">
-                            <span class="widget-title">Feels</span>
-                            <span class="widget-streak">🔥 12 days</span>
-                        </div>
-                        <div class="widget-moods">
-                            <div class="widget-mood great">😀</div>
-                            <div class="widget-mood good">🙂</div>
-                            <div class="widget-mood average">😐</div>
-                            <div class="widget-mood bad">😕</div>
-                            <div class="widget-mood horrible">💩</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <!-- ═══════════════════════════════════
+       DARK SECTION — UNDERSTAND
+  ════════════════════════════════════ -->
+  <section class="dark-section" aria-label="AI-powered insights">
+    <div class="container">
+      <span class="label reveal">understand</span>
+      <h2 class="reveal d1">your personal reflection</h2>
+      <p class="dark-body reveal d2">Powered by Apple Intelligence, reflect offers thoughtful observations about your emotional journey — helping you see what the numbers alone can't show.</p>
+      <div class="reveal d3 pop">
+        <div class="phone">
+          <img class="phone-screen"
+            src="../screens/insights_dark.png"
+            alt="AI-powered mood insights showing weekly and yearly patterns"
+            loading="lazy"
+          >
+          <img class="phone-frame" src="../screens/phone.png" alt="" aria-hidden="true" loading="lazy">
         </div>
-    </section>
+      </div>
+    </div>
+  </section>
 
-    <section class="testimonials" id="testimonials">
-        <div class="container">
-            <div class="testimonials-header reveal">
-                <p class="section-label">Reviews</p>
-                <h2 class="section-title">Loved by people who<br>care about their wellbeing</h2>
-            </div>
-
-            <div class="testimonials-grid">
-                <div class="testimonial-card reveal">
-                    <div class="testimonial-stars">★★★★★</div>
-                    <p class="testimonial-text">"I've tried so many mood trackers but this is the only one that stuck. The year view is incredibly motivating—I can actually see my progress."</p>
-                    <div class="testimonial-author">
-                        <div class="testimonial-avatar">SK</div>
-                        <div>
-                            <div class="testimonial-name">Sarah K.</div>
-                            <div class="testimonial-handle">Using Feels for 8 months</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="testimonial-card reveal">
-                    <div class="testimonial-stars">★★★★★</div>
-                    <p class="testimonial-text">"The Watch app changed everything. I log my mood 3x more consistently now. The complication showing my streak keeps me accountable."</p>
-                    <div class="testimonial-author">
-                        <div class="testimonial-avatar">MR</div>
-                        <div>
-                            <div class="testimonial-name">Marcus R.</div>
-                            <div class="testimonial-handle">142 day streak</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="testimonial-card reveal">
-                    <div class="testimonial-stars">★★★★★</div>
-                    <p class="testimonial-text">"Finally, a mood tracker that respects my privacy. No account needed, no data harvesting—just a beautiful app that helps me understand myself."</p>
-                    <div class="testimonial-author">
-                        <div class="testimonial-avatar">JL</div>
-                        <div>
-                            <div class="testimonial-name">Jamie L.</div>
-                            <div class="testimonial-handle">App Store review</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <!-- ═══════════════════════════════════
+       DUALITY — LIGHT & DARK
+  ════════════════════════════════════ -->
+  <section class="duality" aria-label="Light and dark modes">
+    <div class="container">
+      <h2 class="reveal">designed for every moment</h2>
+      <p class="duality-sub reveal d1">Whether you're winding down at night or greeting the morning, reflect adapts to you.</p>
+      <div class="duality-cards reveal d2">
+        <div class="duality-card">
+          <img src="../screens/voting_light_large.png" alt="Mood check-in in light mode" loading="lazy">
         </div>
-    </section>
-
-    <section class="cta" id="download">
-        <div class="container">
-            <div class="cta-content reveal">
-                <p class="section-label">Get started</p>
-                <h2 class="section-title">Begin your journey<br>of self-awareness</h2>
-                <p class="section-description">Free to download. No account required. Your feelings, your data, your insights.</p>
-                <a href="https://apps.apple.com" class="app-store-badge">
-                    <img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="Download on the App Store">
-                </a>
-            </div>
+        <div class="duality-card">
+          <img src="../screens/voting_dark_large.png" alt="Mood check-in in dark mode" loading="lazy">
         </div>
-    </section>
+      </div>
+    </div>
+  </section>
 
-    <footer>
-        <div class="footer-content">
-            <div class="footer-logo"><img src="app-icon.png" alt="Feels" class="logo-icon">Feels</div>
-            <ul class="footer-links">
-                <li><a href="privacy.html">Privacy Policy</a></li>
-                <li><a href="eula.html">Terms of Service</a></li>
-                <li><a href="mailto:support@88oakapps.com">Support</a></li>
-                <li><a href="#">Press Kit</a></li>
-            </ul>
-            <p class="footer-copy">© 2026 Feels. Made with 💚 for your wellbeing.</p>
+  <!-- ═══════════════════════════════════
+       EVERYWHERE — BENTO
+  ════════════════════════════════════ -->
+  <section class="everywhere" aria-label="Available everywhere">
+    <div class="container">
+      <span class="label reveal">everywhere</span>
+      <h2 class="reveal d1">your companion, always</h2>
+      <p class="everywhere-sub reveal d1">iPhone. Apple Watch. Widgets. Live Activities.<br>reflect is always within reach.</p>
+      <div class="bento reveal d2">
+        <div class="bento-item">
+          <img src="../screens/WidgetExports/timeline_light_large_logged.png" alt="Home screen widget showing a 10-day mood timeline" loading="lazy">
         </div>
-    </footer>
+        <div class="bento-item bento-item--watch">
+          <div class="watch">
+            <img class="watch-screen" src="../screens/watch_voting_light.png" alt="reflect mood check-in on Apple Watch" loading="lazy">
+            <img class="watch-frame" src="../screens/watch.png" alt="" aria-hidden="true" loading="lazy">
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-    <script>
-        // Generate year grid with random moods
-        function generateYearGrid() {
-            const grid = document.getElementById('yearGrid');
-            const moods = ['great', 'good', 'average', 'bad', 'horrible', 'empty'];
-            const weights = [0.25, 0.30, 0.20, 0.10, 0.05, 0.10]; // Probability distribution
+  <!-- ═══════════════════════════════════
+       CTA
+  ════════════════════════════════════ -->
+  <section class="cta" aria-label="Download">
+    <div class="container">
+      <h2 class="reveal">begin reflecting</h2>
+      <a href="https://example.com/reflect-download" class="btn reveal d1">download</a>
+    </div>
+  </section>
 
-            for (let i = 0; i < 180; i++) { // ~6 months of data shown
-                const day = document.createElement('div');
-                day.className = 'day';
+  <!-- Footer -->
+  <footer>
+    <div class="container">
+      <div class="f-logo">reflect</div>
+      <p>&copy; 2026 reflect. all rights reserved.</p>
+    </div>
+  </footer>
 
-                // Weighted random selection
-                const rand = Math.random();
-                let cumulative = 0;
-                for (let j = 0; j < moods.length; j++) {
-                    cumulative += weights[j];
-                    if (rand <= cumulative) {
-                        day.classList.add(moods[j]);
-                        break;
-                    }
-                }
-
-                // Staggered animation delay
-                day.style.animationDelay = `${i * 10}ms`;
-                grid.appendChild(day);
-            }
-        }
-
-        // Scroll reveal animation
-        function reveal() {
-            const reveals = document.querySelectorAll('.reveal');
-
-            reveals.forEach(element => {
-                const windowHeight = window.innerHeight;
-                const elementTop = element.getBoundingClientRect().top;
-                const elementVisible = 100;
-
-                if (elementTop < windowHeight - elementVisible) {
-                    element.classList.add('visible');
-                }
-            });
-        }
-
-        // Smooth scroll for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function(e) {
-                e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                }
-            });
+  <script>
+    /* Scroll-reveal observer */
+    const obs = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            e.target.classList.add('vis');
+            obs.unobserve(e.target);
+          }
         });
+      },
+      { threshold: 0.12, rootMargin: '0px 0px -30px 0px' }
+    );
+    document.querySelectorAll('.reveal').forEach((el) => obs.observe(el));
 
-        // Initialize
-        document.addEventListener('DOMContentLoaded', () => {
-            generateYearGrid();
-            reveal();
-        });
+    /* Nav scroll effect */
+    const nav = document.querySelector('.nav');
+    window.addEventListener('scroll', () => {
+      nav.classList.toggle('scrolled', window.scrollY > 50);
+    }, { passive: true });
 
-        window.addEventListener('scroll', reveal);
-    </script>
+    /* Hero watermark parallax */
+    const wm = document.querySelector('.hero-watermark');
+    const vh = window.innerHeight;
+    window.addEventListener('scroll', () => {
+      if (window.scrollY < vh && wm) {
+        wm.style.transform =
+          'translate(-50%, calc(-62% + ' + (window.scrollY * 0.1) + 'px))';
+      }
+    }, { passive: true });
+  </script>
 </body>
 </html>