diff --git a/public/images/tools/tool-bid-elevator.jpg b/public/images/tools/tool-bid-elevator.jpg
new file mode 100644
index 0000000..2c85867
Binary files /dev/null and b/public/images/tools/tool-bid-elevator.jpg differ
diff --git a/public/images/tools/tool-campaign-builder.jpg b/public/images/tools/tool-campaign-builder.jpg
new file mode 100644
index 0000000..104e9c4
Binary files /dev/null and b/public/images/tools/tool-campaign-builder.jpg differ
diff --git a/public/images/tools/tool-keyword-research.jpg b/public/images/tools/tool-keyword-research.jpg
new file mode 100644
index 0000000..dc8ebf0
Binary files /dev/null and b/public/images/tools/tool-keyword-research.jpg differ
diff --git a/public/images/tools/tool-listing-audit.jpg b/public/images/tools/tool-listing-audit.jpg
new file mode 100644
index 0000000..3ddbaf6
Binary files /dev/null and b/public/images/tools/tool-listing-audit.jpg differ
diff --git a/public/images/tools/tool-str-triage.jpg b/public/images/tools/tool-str-triage.jpg
new file mode 100644
index 0000000..5812158
Binary files /dev/null and b/public/images/tools/tool-str-triage.jpg differ
diff --git a/src/app/home.module.css b/src/app/home.module.css
index 7c44d7c..f02a85d 100644
--- a/src/app/home.module.css
+++ b/src/app/home.module.css
@@ -4,6 +4,99 @@
   padding: var(--space-16) var(--side-pad);
 }
 
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* Section-level cascade reveal. RevealSection toggles .is-visible on scroll-in. */
+.painSection,
+.simSection,
+.accessSection,
+.pricingSection,
+.ctaSection {
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out);
+}
+
+.painSection:global(.is-visible),
+.simSection:global(.is-visible),
+.accessSection:global(.is-visible),
+.pricingSection:global(.is-visible),
+.ctaSection:global(.is-visible) {
+  opacity: 1;
+  transform: none;
+}
+
+/* Skip the reveal-on-scroll wait entirely for reduced motion, rather than
+   relying on the global transition-duration override to make it instant. */
+@media (prefers-reduced-motion: reduce) {
+  .heroEyebrow,
+  .heroTitle,
+  .heroTagline,
+  .heroSub,
+  .heroActions,
+  .heroDecorative {
+    animation: none;
+  }
+
+  .painSection,
+  .simSection,
+  .accessSection,
+  .pricingSection,
+  .ctaSection,
+  .painItem,
+  .simRow,
+  .accessItem {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ── Buttons ──────────────────────────────────────────────────── */
+.btnPrimary,
+.btnSecondary {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-3) var(--space-6);
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  transition: transform var(--duration-fast) var(--ease-out),
+    background var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+
+.btnPrimary {
+  background: var(--accent);
+  color: var(--accent-ink);
+}
+
+.btnPrimary:hover {
+  background: var(--accent-hover);
+}
+
+.btnSecondary {
+  border: 1px solid var(--border-strong);
+  color: var(--ink-900);
+}
+
+.btnSecondary:hover {
+  background: var(--surface-2);
+}
+
+.btnPrimary:active,
+.btnSecondary:active {
+  transform: translateY(-1px);
+}
+
 /* ── Hero ──────────────────────────────────────────────────────── */
 .hero {
   display: flex;
@@ -22,12 +115,22 @@
   color: var(--ink-500);
   text-transform: uppercase;
   margin-bottom: var(--space-3);
+  animation: fadeInUp var(--duration-slow) var(--ease-out) both;
 }
 
 .heroTitle {
   font-size: var(--text-3xl);
   line-height: 1.1;
   margin: 0 0 var(--space-4);
+  animation: fadeInUp var(--duration-slow) var(--ease-out) 40ms both;
+}
+
+.heroTagline {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--ink-900);
+  margin: 0 0 var(--space-4);
+  animation: fadeInUp var(--duration-slow) var(--ease-out) 120ms both;
 }
 
 .heroSub {
@@ -36,12 +139,14 @@
   margin: 0 0 var(--space-8);
   max-width: 600px;
   line-height: 1.5;
+  animation: fadeInUp var(--duration-slow) var(--ease-out) 200ms both;
 }
 
 .heroActions {
   display: flex;
   gap: var(--space-3);
   flex-wrap: wrap;
+  animation: fadeInUp var(--duration-slow) var(--ease-out) 280ms both;
 }
 
 .heroDecorative {
@@ -68,6 +173,7 @@
     padding: var(--space-8) var(--space-10);
     border-radius: var(--radius-lg);
     white-space: nowrap;
+    animation: fadeInUp var(--duration-slow) var(--ease-out) 360ms both;
   }
 
   .heroDecorativeCaption {
@@ -80,13 +186,178 @@
   }
 }
 
-/* ── What You Learn ────────────────────────────────────────────── */
-.learnSection {
+/* ── Pain Points ──────────────────────────────────────────────── */
+.painSection {
+  padding: var(--space-12) 0;
+  border-top: 1px solid var(--border);
+}
+
+.painList {
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-4);
+  margin: var(--space-6) 0 0;
+  padding: 0;
+  max-width: 720px;
+}
+
+@media (min-width: 768px) {
+  .painList {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.painItem {
+  position: relative;
+  padding: var(--space-3) 0 var(--space-3) var(--space-6);
+  color: var(--ink-700);
+  line-height: 1.5;
+  border-top: 1px solid var(--border);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out);
+}
+
+.painItem::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: calc(var(--space-3) + 0.4em);
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--accent);
+}
+
+.painSection:global(.is-visible) .painItem {
+  opacity: 1;
+  transform: none;
+}
+
+.painSection:global(.is-visible) .painItem:nth-child(1) { transition-delay: 0ms; }
+.painSection:global(.is-visible) .painItem:nth-child(2) { transition-delay: 60ms; }
+.painSection:global(.is-visible) .painItem:nth-child(3) { transition-delay: 120ms; }
+.painSection:global(.is-visible) .painItem:nth-child(4) { transition-delay: 180ms; }
+
+/* ── Simulators (zig-zag) ─────────────────────────────────────── */
+.simSection {
+  padding: var(--space-12) 0;
+  border-top: 1px solid var(--border);
+}
+
+.simSub {
+  color: var(--ink-700);
+  margin: var(--space-2) 0 0;
+  max-width: 640px;
+  line-height: 1.5;
+}
+
+.simList {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-10);
+  margin: var(--space-8) 0 0;
+  padding: 0;
+}
+
+.simRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out);
+}
+
+.simSection:global(.is-visible) .simRow {
+  opacity: 1;
+  transform: none;
+}
+
+.simSection:global(.is-visible) .simRow:nth-child(1) { transition-delay: 0ms; }
+.simSection:global(.is-visible) .simRow:nth-child(2) { transition-delay: 70ms; }
+.simSection:global(.is-visible) .simRow:nth-child(3) { transition-delay: 140ms; }
+.simSection:global(.is-visible) .simRow:nth-child(4) { transition-delay: 210ms; }
+.simSection:global(.is-visible) .simRow:nth-child(5) { transition-delay: 280ms; }
+
+@media (min-width: 768px) {
+  .simRow {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .simRow:nth-child(even) {
+    flex-direction: row-reverse;
+  }
+
+  .simScreenshot,
+  .simRowBody {
+    flex: 1 1 50%;
+    min-width: 0;
+  }
+}
+
+.simScreenshot {
+  position: relative;
+  line-height: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--surface-2);
+  transition: transform var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+
+.simScreenshot:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.simScreenshot img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.simRowBody h3 {
+  margin: var(--space-3) 0 var(--space-2);
+  font-size: var(--text-xl);
+}
+
+.simRowBody p {
+  color: var(--ink-700);
+  margin: 0;
+  line-height: 1.5;
+  max-width: 480px;
+}
+
+.simClose {
+  margin: var(--space-10) 0 0;
+  font-size: var(--text-lg);
+  font-weight: 600;
+  color: var(--ink-900);
+  max-width: 720px;
+  line-height: 1.5;
+}
+
+/* ── Coming Soon ──────────────────────────────────────────────── */
+.accessSection {
   padding: var(--space-12) 0;
   border-top: 1px solid var(--border);
 }
 
-.learnGrid {
+.accessSub {
+  color: var(--ink-700);
+  margin: var(--space-2) 0 0;
+  max-width: 640px;
+  line-height: 1.5;
+}
+
+.accessGrid {
   list-style: none;
   display: grid;
   grid-template-columns: 1fr;
@@ -96,27 +367,63 @@
 }
 
 @media (min-width: 768px) {
-  .learnGrid {
-    grid-template-columns: repeat(3, 1fr);
+  .accessGrid {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
-.learnItem h3 {
+.accessItem {
+  padding: var(--space-6);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+
+.accessItem:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.accessSection:global(.is-visible) .accessItem {
+  opacity: 1;
+  transform: none;
+}
+
+.accessSection:global(.is-visible) .accessItem:hover {
+  transform: translateY(-1px);
+}
+
+.accessSection:global(.is-visible) .accessItem:nth-child(1) { transition-delay: 0ms; }
+.accessSection:global(.is-visible) .accessItem:nth-child(2) { transition-delay: 60ms; }
+
+.accessItemHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
   margin: 0 0 var(--space-2);
+}
+
+.accessItemHeader h3 {
+  margin: 0;
   font-size: var(--text-lg);
 }
 
-.learnItem p {
+.accessItem p {
   color: var(--ink-700);
   margin: 0;
   line-height: 1.5;
 }
 
-/* ── Pricing Preview ───────────────────────────────────────────── */
+/* ── Pricing Preview ──────────────────────────────────────────── */
 .pricingSection {
   padding: var(--space-12) 0;
   border-top: 1px solid var(--border);
-  text-align: center;
 }
 
 .pricingSection h2 {
@@ -125,25 +432,28 @@
 
 .pricingSub {
   color: var(--ink-700);
-  margin: 0 auto var(--space-8);
+  margin: 0 0 var(--space-8);
   max-width: 600px;
 }
 
-/* ── CTA ───────────────────────────────────────────────────────── */
+/* ── CTA ──────────────────────────────────────────────────────── */
 .ctaSection {
-  padding: var(--space-12) 0;
-  border-top: 1px solid var(--border);
-  text-align: center;
+  padding: var(--space-12);
+  background: var(--surface-3);
+  border-radius: var(--radius-lg);
 }
 
 .ctaSection h2 {
+  color: var(--ink-inverse);
   margin-bottom: var(--space-4);
+  max-width: 640px;
 }
 
 .ctaSection p {
-  color: var(--ink-700);
-  margin: 0 auto var(--space-6);
-  max-width: 600px;
+  color: var(--ink-inverse);
+  opacity: 0.75;
+  margin: 0 0 var(--space-6);
+  max-width: 560px;
 }
 
 /* ── Footer ────────────────────────────────────────────────────── */
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b390262..4b3d1c4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,62 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { BRAND_NAME, BRAND_NAME_UPPER } from '@/lib/brand';
+import { Badge } from '@/components/ui';
+import { Icon, type PhosphorIconName } from '@/components/ui/Icon';
+import { RevealSection } from '@/components/RevealSection';
 import styles from './home.module.css';
 
+interface SimMeta {
+  id: 'campaign-builder' | 'bid-elevator' | 'str-triage' | 'listing-audit' | 'keyword-research';
+  name: string;
+  description: string;
+  icon: PhosphorIconName;
+  screenshot: string;
+}
+
+const SIMULATORS: SimMeta[] = [
+  {
+    id: 'campaign-builder',
+    name: 'Campaign Builder',
+    description:
+      'Build Sponsored Products, Sponsored Brands, Sponsored Display, and Sponsored TV campaigns. Practice the full Amazon Ads Console campaign wizard, start to finish.',
+    icon: 'Rocket',
+    screenshot: '/images/tools/tool-campaign-builder.jpg',
+  },
+  {
+    id: 'bid-elevator',
+    name: 'Bid Elevator',
+    description:
+      'Adjust keyword bids against real performance data. Cut waste, raise your converters, defend ACoS at target.',
+    icon: 'ChartLine',
+    screenshot: '/images/tools/tool-bid-elevator.jpg',
+  },
+  {
+    id: 'str-triage',
+    name: 'Search Term Triage',
+    description:
+      'Keep, pause, negate, or re-bid search terms. Practice the weekly triage workflow every PPC specialist runs.',
+    icon: 'List',
+    screenshot: '/images/tools/tool-str-triage.jpg',
+  },
+  {
+    id: 'listing-audit',
+    name: 'Listing Audit',
+    description:
+      "Score a product listing on title, bullets, images, and A+ content. Find what's actually hurting conversion.",
+    icon: 'BookOpen',
+    screenshot: '/images/tools/tool-listing-audit.jpg',
+  },
+  {
+    id: 'keyword-research',
+    name: 'Keyword Research',
+    description:
+      'Categorize keywords as primary, secondary, or negative. Build the keyword list that drives every Sponsored Products campaign.',
+    icon: 'MagnifyingGlass',
+    screenshot: '/images/tools/tool-keyword-research.jpg',
+  },
+];
+
 export default function HomePage() {
   return (
     <main id="main-content" className={styles.page}>
@@ -9,40 +64,18 @@ export default function HomePage() {
       <section className={styles.hero}>
         <div className={styles.heroContent}>
           <p className={styles.heroEyebrow}>{BRAND_NAME_UPPER}</p>
-          <h1 className={styles.heroTitle}>
-            Three courses. One outcome: become the Amazon ads specialist clients retain.
-          </h1>
+          <h1 className={styles.heroTitle}>Learn Amazon PPC the right way</h1>
+          <p className={styles.heroTagline}>We turn the theoretical into the practical.</p>
           <p className={styles.heroSub}>
-            {`${BRAND_NAME} teaches the Amazon advertising skills Filipino VAs are charging `}
-            ₱60,000–₱80,000/month for. Practice with real campaign tools, not just theory.
+            Not only do you learn Amazon PPC from scratch. You turn that knowledge into
+            workflows you can actually run on the job, before a client ever hands you
+            their account.
           </p>
           <div className={styles.heroActions}>
-            <Link
-              href="/pricing"
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                padding: 'var(--space-3) var(--space-6)',
-                background: 'var(--accent)',
-                color: 'var(--accent-ink)',
-                borderRadius: 'var(--radius-md)',
-                fontWeight: 600,
-              }}
-            >
+            <Link href="/pricing" className={styles.btnPrimary}>
               See pricing
             </Link>
-            <Link
-              href="/tools/campaign-builder"
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                padding: 'var(--space-3) var(--space-6)',
-                border: '1px solid var(--border-strong)',
-                color: 'var(--ink-900)',
-                borderRadius: 'var(--radius-md)',
-                fontWeight: 600,
-              }}
-            >
+            <Link href="/tools/campaign-builder" className={styles.btnSecondary}>
               Try a tool
             </Link>
           </div>
@@ -53,78 +86,115 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ── What You Learn ───────────────────────────────────── */}
-      <section className={styles.learnSection}>
-        <h2>What you learn</h2>
-        <ul className={styles.learnGrid}>
-          <li className={styles.learnItem}>
-            <h3>Campaign structure</h3>
-            <p>
-              How to build Sponsored Products campaigns that Amazon&apos;s
-              algorithm actually rewards.
-            </p>
+      {/* ── Pain Points ──────────────────────────────────────── */}
+      <RevealSection className={styles.painSection}>
+        <h2>Where most Amazon PPC training falls apart</h2>
+        <ul className={styles.painList}>
+          <li className={styles.painItem}>
+            You finish the lessons, but you&apos;ve never actually touched a campaign.
           </li>
-          <li className={styles.learnItem}>
-            <h3>Bid optimization</h3>
+          <li className={styles.painItem}>
+            You know the vocabulary (ACoS, ROAS, CPC) but freeze the first time you have
+            to act on it.
+          </li>
+          <li className={styles.painItem}>
+            Clients want proof you&apos;ve used Seller Central. Nobody lets you practice
+            on one first.
+          </li>
+          <li className={styles.painItem}>
+            One mistake in a live account costs a client real money, so you never get to
+            make the mistakes that actually teach you something.
+          </li>
+        </ul>
+      </RevealSection>
+
+      {/* ── Simulators (zig-zag) ─────────────────────────────── */}
+      <RevealSection className={styles.simSection}>
+        <h2>Five simulators. Five real Amazon Ads Console workflows.</h2>
+        <p className={styles.simSub}>
+          Each one mirrors what you&apos;d actually do inside Seller Central. No client
+          account required.
+        </p>
+        <ul className={styles.simList}>
+          {SIMULATORS.map((sim) => (
+            <li key={sim.id} className={styles.simRow}>
+              <div className={styles.simScreenshot}>
+                <Image
+                  src={sim.screenshot}
+                  alt={`${sim.name} simulator screenshot`}
+                  width={1000}
+                  height={389}
+                  sizes="(min-width: 768px) 50vw, 100vw"
+                />
+              </div>
+              <div className={styles.simRowBody}>
+                <Icon name={sim.icon} size="lg" />
+                <h3>{sim.name}</h3>
+                <p>{sim.description}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+        <p className={styles.simClose}>
+          Not only do you learn Amazon PPC from scratch. You turn that knowledge into
+          practical workflows you can apply the moment you&apos;re on the job.
+        </p>
+      </RevealSection>
+
+      {/* ── Coming Soon ──────────────────────────────────────── */}
+      <RevealSection className={styles.accessSection}>
+        <h2>Two more tools, only for enrolled students</h2>
+        <p className={styles.accessSub}>
+          Still in development. Enroll now to get access the moment they launch.
+        </p>
+        <ul className={styles.accessGrid}>
+          <li className={styles.accessItem}>
+            <div className={styles.accessItemHeader}>
+              <h3>Amazon Ads Console simulator</h3>
+              <Badge variant="default">Coming soon · Enrollees only</Badge>
+            </div>
             <p>
-              When to raise bids, when to lower them, and when to leave the
-              campaign alone.
+              A full replica of the Amazon Ads Console: build campaigns, manage keywords
+              and bids, run reports, and get graded on scenario missions. The closest thing
+              to Seller Central access without a client account.
             </p>
           </li>
-          <li className={styles.learnItem}>
-            <h3>Search term triage</h3>
+          <li className={styles.accessItem}>
+            <div className={styles.accessItemHeader}>
+              <h3>Interview Lab</h3>
+              <Badge variant="default">Coming soon · Enrollees only</Badge>
+            </div>
             <p>
-              Cut the wasted spend on irrelevant clicks without killing the
-              keywords that convert.
+              AI mock interviews, resume review, and cover letter drafts built for the
+              Amazon VA roles agencies actually hire for. Practice the interview, not just
+              the skill.
             </p>
           </li>
         </ul>
-      </section>
+      </RevealSection>
 
       {/* ── Pricing Preview ──────────────────────────────────── */}
-      <section className={styles.pricingSection}>
+      <RevealSection className={styles.pricingSection}>
         <h2>Simple, one-time pricing</h2>
         <p className={styles.pricingSub}>
           No subscriptions. No hidden fees. Pay once, learn forever.
         </p>
-        <Link
-          href="/pricing"
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            padding: 'var(--space-3) var(--space-6)',
-            background: 'var(--accent)',
-            color: 'var(--accent-ink)',
-            borderRadius: 'var(--radius-md)',
-            fontWeight: 600,
-          }}
-        >
+        <Link href="/pricing" className={styles.btnPrimary}>
           Compare tiers
         </Link>
-      </section>
+      </RevealSection>
 
       {/* ── CTA ──────────────────────────────────────────────── */}
-      <section className={styles.ctaSection}>
+      <RevealSection className={styles.ctaSection}>
         <h2>Ready to learn the Amazon PPC work that&apos;s in demand right now?</h2>
         <p>
-          Structured courses, real campaign tools, and a certificate that&apos;s part of the
+          A structured course, real campaign tools, and a certificate that&apos;s part of the
           ProjectAmazonPH hiring pipeline.
         </p>
-        <Link
-          href="/auth/signup"
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            padding: 'var(--space-3) var(--space-6)',
-            background: 'var(--accent)',
-            color: 'var(--accent-ink)',
-            borderRadius: 'var(--radius-md)',
-            fontWeight: 600,
-          }}
-        >
+        <Link href="/auth/signup" className={styles.btnPrimary}>
           Create your account
         </Link>
-      </section>
+      </RevealSection>
 
       {/* ── Footer ───────────────────────────────────────────── */}
       <footer className={styles.footer}>
diff --git a/src/components/RevealSection.tsx b/src/components/RevealSection.tsx
new file mode 100644
index 0000000..f46c79d
--- /dev/null
+++ b/src/components/RevealSection.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+interface RevealSectionProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Reveals once and stays revealed. Unobserving after the first match
+ * (instead of toggling visibility on every crossing) keeps the section
+ * from re-hiding if a user scrolls back up past it.
+ */
+export function RevealSection({ children, className }: RevealSectionProps) {
+  const ref = useRef<HTMLElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry) return;
+        // Also reveal if the element is already above the viewport (e.g. a
+        // hash link landed past it). Without this, content scrolled past
+        // before ever intersecting would stay permanently invisible.
+        if (entry.isIntersecting || entry.boundingClientRect.top < 0) {
+          setVisible(true);
+          observer.unobserve(el);
+        }
+      },
+      { threshold: 0.15, rootMargin: '0px 0px -40px 0px' },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section ref={ref} className={`${className ?? ''}${visible ? ' is-visible' : ''}`}>
+      {children}
+    </section>
+  );
+}
diff --git a/src/components/ui/Badge.module.css b/src/components/ui/Badge.module.css
index 8c0d73e..b2d7ff9 100644
--- a/src/components/ui/Badge.module.css
+++ b/src/components/ui/Badge.module.css
@@ -1,6 +1,7 @@
 .badge {
   display: inline-flex;
   align-items: center;
+  align-self: flex-start;
   gap: var(--space-1);
   height: 22px;
   padding: 0 var(--space-2);