diff --git a/src/components/SocialProofSection/index.js b/src/components/SocialProofSection/index.js
index e393474..0d34307 100644
--- a/src/components/SocialProofSection/index.js
+++ b/src/components/SocialProofSection/index.js
@@ -1,6 +1,171 @@
-import React from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import styles from './styles.module.css';
 
+const ROTATION_INTERVAL_MS = 6500;
+const EXIT_DURATION_MS = 340;
+const TRANSITION_DURATION_MS = 1200;
+const GITHUB_REPO_URL = 'https://github.com/autobase-tech/autobase';
+const GITHUB_REPO_API = 'https://api.github.com/repos/autobase-tech/autobase';
+const GITHUB_STARS_FALLBACK = 4300;
+const GITHUB_STARS_CACHE_KEY = 'autobase-github-stars';
+const GITHUB_STARS_CACHE_TTL_MS = 15 * 60 * 1000;
+const EXTENSION_NAMES = ['postgis', 'vector', 'timescaledb', 'pg_partman', 'pg_cron', 'pgaudit'];
+// Autobase was initially released Oct 8, 2019 (JavaScript months are zero-based).
+const AUTOBASE_INITIAL_RELEASE_DATE = {year: 2019, month: 9, day: 8};
+const PRODUCTION_AGE_REFRESH_MS = 60 * 60 * 1000;
+
+const BANNERS = [
+  {
+    id: 'time-to-value',
+    before: '1 Month of Infrastructure Work',
+    after: '10 Minutes in Autobase',
+    visual: 'time-to-value',
+  },
+  {
+    id: 'production-history',
+    before: '',
+    after: 'in Production',
+    afterColor: 'text',
+    visual: 'production-history',
+  },
+  {
+    id: 'open-source',
+    before: 'Open source forever',
+    after: null,
+    subtitleAccent: 'Trusted',
+    subtitle: 'by teams worldwide',
+    visual: 'open-source',
+  },
+  {
+    id: 'extensions',
+    beforeAccent: '500+',
+    before: 'Extensions',
+    after: null,
+    subtitle: 'Go beyond vanilla PostgreSQL',
+    visual: 'extensions',
+  },
+];
+
+function getRandomBannerOrder(length) {
+  const order = Array.from({length}, (_, index) => index);
+
+  for (let index = order.length - 1; index > 0; index -= 1) {
+    const randomIndex = Math.floor(Math.random() * (index + 1));
+    [order[index], order[randomIndex]] = [order[randomIndex], order[index]];
+  }
+
+  return order;
+}
+
+function getProductionHistory(date = new Date()) {
+  const currentYear = date.getUTCFullYear();
+  const currentMonth = date.getUTCMonth();
+  const currentDay = date.getUTCDate();
+  let elapsedMonths =
+    (currentYear - AUTOBASE_INITIAL_RELEASE_DATE.year) * 12
+    + currentMonth
+    - AUTOBASE_INITIAL_RELEASE_DATE.month;
+
+  if (currentDay < AUTOBASE_INITIAL_RELEASE_DATE.day) elapsedMonths -= 1;
+
+  return {
+    currentYear,
+    years: Math.floor(elapsedMonths / 12),
+    months: elapsedMonths % 12,
+  };
+}
+
+function formatProductionAge({years, months}) {
+  const yearLabel = `${years} ${years === 1 ? 'Year' : 'Years'}`;
+  if (months === 0) return yearLabel;
+
+  return `${yearLabel} · ${months} ${months === 1 ? 'Month' : 'Months'}`;
+}
+
+function useProductionHistory() {
+  const [history, setHistory] = useState(() => getProductionHistory());
+
+  useEffect(() => {
+    const refreshTimer = window.setInterval(() => {
+      setHistory(getProductionHistory());
+    }, PRODUCTION_AGE_REFRESH_MS);
+
+    return () => window.clearInterval(refreshTimer);
+  }, []);
+
+  return history;
+}
+
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const updatePreference = () => setPrefersReducedMotion(mediaQuery.matches);
+
+    updatePreference();
+    mediaQuery.addEventListener?.('change', updatePreference);
+    return () => mediaQuery.removeEventListener?.('change', updatePreference);
+  }, []);
+
+  return prefersReducedMotion;
+}
+
+function useGithubStars() {
+  const [stars, setStars] = useState({count: GITHUB_STARS_FALLBACK, isLive: false});
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    try {
+      const cachedValue = window.sessionStorage.getItem(GITHUB_STARS_CACHE_KEY);
+      const cached = cachedValue ? JSON.parse(cachedValue) : null;
+
+      if (
+        Number.isInteger(cached?.count)
+        && Date.now() - cached.timestamp < GITHUB_STARS_CACHE_TTL_MS
+      ) {
+        setStars({count: cached.count, isLive: true});
+        return () => controller.abort();
+      }
+    } catch {
+      // Storage can be unavailable in privacy-focused browser modes.
+    }
+
+    fetch(GITHUB_REPO_API, {
+      headers: {Accept: 'application/vnd.github+json'},
+      signal: controller.signal,
+    })
+      .then((response) => {
+        if (!response.ok) throw new Error(`GitHub API responded with ${response.status}`);
+        return response.json();
+      })
+      .then((repository) => {
+        if (!Number.isInteger(repository.stargazers_count)) return;
+
+        setStars({count: repository.stargazers_count, isLive: true});
+
+        try {
+          window.sessionStorage.setItem(GITHUB_STARS_CACHE_KEY, JSON.stringify({
+            count: repository.stargazers_count,
+            timestamp: Date.now(),
+          }));
+        } catch {
+          // The live value still works even when it cannot be cached.
+        }
+      })
+      .catch((error) => {
+        if (error.name !== 'AbortError') {
+          setStars({count: GITHUB_STARS_FALLBACK, isLive: false});
+        }
+      });
+
+    return () => controller.abort();
+  }, []);
+
+  return stars;
+}
+
 function CalendarWithClockIcon() {
   return (
     <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
@@ -72,41 +237,222 @@ function StopwatchIcon() {
   );
 }
 
-export default function SocialProofSection() {
+function BannerVisual({type, githubStars, productionHistory}) {
+  if (type === 'production-history') {
+    return (
+      <div className={styles.productionTimeline} aria-hidden="true">
+        <div className={styles.timelineYears}>
+          <span>{AUTOBASE_INITIAL_RELEASE_DATE.year}</span>
+          <span>{productionHistory.currentYear}</span>
+        </div>
+        <div className={styles.timelineRail}>
+          <span className={styles.startNode} />
+          <span className={styles.currentYear} />
+        </div>
+        <div className={styles.timelineLabels}>
+          <span>INITIAL RELEASE</span>
+          <span><b>&gt;</b> PRODUCTION READY</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (type === 'open-source') {
+    const formattedStars = githubStars.count.toLocaleString('en-US');
+    const displayedStars = githubStars.isLive ? formattedStars : `${formattedStars}+`;
+
+    return (
+      <a
+        className={styles.githubProof}
+        href={GITHUB_REPO_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={`Autobase on GitHub, ${displayedStars} stars`}
+      >
+        <span className={styles.githubMetric}>
+          <strong className={styles.starCount}>{displayedStars}</strong>
+          <span className={styles.starLabel}>GitHub Stars</span>
+        </span>
+      </a>
+    );
+  }
+
+  if (type === 'extensions') {
+    return (
+      <a
+        className={styles.extensionCatalog}
+        href="/docs/extensions/list"
+        aria-label="Browse more than 500 PostgreSQL extensions"
+      >
+        <span className={styles.catalogHeader}>
+          <b>&gt;</b> EXTENSION CATALOG
+        </span>
+        <span className={styles.extensionGrid}>
+          {EXTENSION_NAMES.map((extension, index) => (
+            <span
+              key={extension}
+              className={index === 1 ? styles.featuredExtension : undefined}
+            >
+              {extension}
+            </span>
+          ))}
+        </span>
+      </a>
+    );
+  }
+
   return (
-    <section className={styles.section} aria-labelledby="time-to-value-title">
-      <div className={styles.inner}>
-        <h2 id="time-to-value-title" className="landing-sr-only">Time to value</h2>
-        <div className={styles.banner}>
-
-          {/* Left — text */}
-          <div className={styles.text}>
-            <p className={styles.before}>1 Month of Infrastructure Work</p>
-            <p className={styles.after}>10 Minutes in Autobase</p>
-            <span className={styles.underbar} />
-          </div>
+    <div className={styles.visual} aria-hidden="true">
+      <div className={styles.timeBlock}>
+        <CalendarWithClockIcon />
+        <span className={styles.timeLabel}>1 MONTH</span>
+      </div>
 
-          {/* Right — visual */}
-          <div className={styles.visual}>
+      <svg className={styles.arrow} width="48" height="24" viewBox="0 0 48 24" fill="none">
+        <line x1="0" y1="12" x2="40" y2="12" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
+        <polyline points="30,4 42,12 30,20" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
 
-            <div className={styles.timeBlock}>
-              <CalendarWithClockIcon />
-              <span className={styles.timeLabel}>1 MONTH</span>
-            </div>
+      <div className={styles.divider} />
+
+      <div className={styles.timeBlock}>
+        <StopwatchIcon />
+        <span className={`${styles.timeLabel} ${styles.accentLabel}`}>10 MINUTES</span>
+      </div>
+    </div>
+  );
+}
+
+export default function SocialProofSection() {
+  const [bannerOrder, setBannerOrder] = useState(() => BANNERS.map((_, index) => index));
+  const [activePosition, setActivePosition] = useState(0);
+  const [isExiting, setIsExiting] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [isInteractionPaused, setIsInteractionPaused] = useState(false);
+  const exitTimerRef = useRef(null);
+  const transitionTimerRef = useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const githubStars = useGithubStars();
+  const productionHistory = useProductionHistory();
+
+  useEffect(() => {
+    setBannerOrder(getRandomBannerOrder(BANNERS.length));
+  }, []);
+
+  useEffect(() => () => {
+    window.clearTimeout(exitTimerRef.current);
+    window.clearTimeout(transitionTimerRef.current);
+  }, []);
+
+  const showBanner = useCallback((nextPosition) => {
+    if (nextPosition === activePosition || isTransitioning) return;
+
+    if (prefersReducedMotion) {
+      setActivePosition(nextPosition);
+      return;
+    }
+
+    setIsTransitioning(true);
+    setIsExiting(true);
 
-            {/* Arrow */}
-            <svg className={styles.arrow} width="48" height="24" viewBox="0 0 48 24" fill="none" aria-hidden="true">
-              <line x1="0" y1="12" x2="40" y2="12" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
-              <polyline points="30,4 42,12 30,20" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-            </svg>
+    exitTimerRef.current = window.setTimeout(() => {
+      setActivePosition(nextPosition);
+      setIsExiting(false);
+    }, EXIT_DURATION_MS);
 
-            <div className={styles.divider} />
+    transitionTimerRef.current = window.setTimeout(() => {
+      setIsTransitioning(false);
+    }, TRANSITION_DURATION_MS);
+  }, [activePosition, isTransitioning, prefersReducedMotion]);
 
-            <div className={styles.timeBlock}>
-              <StopwatchIcon />
-              <span className={`${styles.timeLabel} ${styles.accentLabel}`}>10 MINUTES</span>
+  useEffect(() => {
+    if (
+      prefersReducedMotion
+      || isInteractionPaused
+      || isTransitioning
+    ) return undefined;
+
+    const rotationTimer = window.setTimeout(() => {
+      showBanner((activePosition + 1) % bannerOrder.length);
+    }, ROTATION_INTERVAL_MS);
+
+    return () => window.clearTimeout(rotationTimer);
+  }, [
+    activePosition,
+    bannerOrder.length,
+    isInteractionPaused,
+    isTransitioning,
+    prefersReducedMotion,
+    showBanner,
+  ]);
+
+  const activeBanner = BANNERS[bannerOrder[activePosition]];
+  const activeBeforeAccent = activeBanner.id === 'production-history'
+    ? formatProductionAge(productionHistory)
+    : activeBanner.beforeAccent;
+
+  return (
+    <section className={styles.section} aria-labelledby="social-proof-title">
+      <div className={styles.inner}>
+        <h2 id="social-proof-title" className="landing-sr-only">Why teams choose Autobase</h2>
+        <div
+          className={`${styles.banner} ${isTransitioning ? styles.transitioning : ''}`}
+          onMouseEnter={() => setIsInteractionPaused(true)}
+          onMouseLeave={() => setIsInteractionPaused(false)}
+          onFocusCapture={() => setIsInteractionPaused(true)}
+          onBlurCapture={(event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+              setIsInteractionPaused(false);
+            }
+          }}
+        >
+          <div
+            key={activeBanner.id}
+            className={`${styles.slide} ${isExiting ? styles.exiting : ''}`}
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            <div className={styles.text}>
+              <p className={styles.before}>
+                {activeBeforeAccent && (
+                  <span className={styles.inlineAccent}>{activeBeforeAccent} </span>
+                )}
+                {activeBanner.before}
+              </p>
+              {activeBanner.after && (
+                <p className={`${styles.after} ${activeBanner.afterColor === 'text' ? styles.afterText : ''}`}>
+                  {activeBanner.after}
+                </p>
+              )}
+              {activeBanner.subtitle && (
+                <p className={styles.subtitle}>
+                  {activeBanner.subtitleAccent && (
+                    <span className={styles.subtitleAccent}>{activeBanner.subtitleAccent} </span>
+                  )}
+                  {activeBanner.subtitle}
+                </p>
+              )}
+              <span className={styles.underbar} />
             </div>
 
+            <BannerVisual
+              type={activeBanner.visual}
+              githubStars={githubStars}
+              productionHistory={productionHistory}
+            />
+          </div>
+
+          <div className={styles.controls} aria-label="Social proof banners">
+            {bannerOrder.map((bannerIndex, position) => (
+              <button
+                key={BANNERS[bannerIndex].id}
+                type="button"
+                className={`${styles.indicator} ${position === activePosition ? styles.activeIndicator : ''}`}
+                onClick={() => showBanner(position)}
+                aria-label={`Show banner ${position + 1} of ${BANNERS.length}`}
+                aria-pressed={position === activePosition}
+              />
+            ))}
           </div>
         </div>
       </div>
diff --git a/src/components/SocialProofSection/styles.module.css b/src/components/SocialProofSection/styles.module.css
index f05e779..de07723 100644
--- a/src/components/SocialProofSection/styles.module.css
+++ b/src/components/SocialProofSection/styles.module.css
@@ -13,11 +13,11 @@
 
 /* ─── Banner card ─────────────────────────────────────────────────── */
 .banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 60px;
-  padding: 40px 52px;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  height: 196px;
+  padding: 40px 52px 46px;
   border: 1px solid var(--color-border);
   border-radius: 0;
   background: var(--color-bg);
@@ -30,6 +30,55 @@
   box-shadow: 10px 10px 0 var(--shadow-pixel-hover);
 }
 
+.banner::before {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  background-image: repeating-conic-gradient(
+    var(--color-bg) 0 25%,
+    transparent 0 50%
+  );
+  background-size: 14px 14px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.transitioning::before {
+  animation: pixelDissolve 1200ms steps(9, end) both;
+}
+
+.slide {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 60px;
+  animation: bannerEnter 520ms steps(7, end) both;
+}
+
+.exiting {
+  animation: bannerExit 340ms steps(6, end) both;
+}
+
+@keyframes pixelDissolve {
+  0% { opacity: 0; }
+  18% { opacity: 0.78; }
+  38% { opacity: 0.32; }
+  62% { opacity: 0.12; }
+  100% { opacity: 0; }
+}
+
+@keyframes bannerEnter {
+  from { opacity: 0; transform: translateY(6px); filter: blur(1px); }
+  to { opacity: 1; transform: translateY(0); filter: blur(0); }
+}
+
+@keyframes bannerExit {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-6px); }
+}
+
 /* ─── Text block ──────────────────────────────────────────────────── */
 .text {
   display: flex;
@@ -46,6 +95,11 @@
   line-height: 1.2;
 }
 
+.inlineAccent {
+  color: var(--color-primary);
+  font-weight: var(--fw-black);
+}
+
 .after {
   font-family: var(--font-base);
   font-size: clamp(22px, 2.5vw, 30px);
@@ -55,6 +109,25 @@
   line-height: 1.2;
 }
 
+.afterText {
+  color: var(--color-text);
+  font-weight: var(--fw-bold);
+}
+
+.subtitle {
+  margin: 2px 0 0;
+  font-family: var(--font-base);
+  font-size: clamp(15px, 1.6vw, 19px);
+  font-weight: var(--fw-regular);
+  line-height: 1.35;
+  color: var(--color-text-muted);
+}
+
+.subtitleAccent {
+  color: var(--color-primary);
+  font-weight: var(--fw-bold);
+}
+
 .underbar {
   display: block;
   width: 40px;
@@ -103,17 +176,268 @@
   flex-shrink: 0;
 }
 
+/* ─── Production history timeline ─────────────────────────────────── */
+.productionTimeline {
+  width: clamp(270px, 31vw, 360px);
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+.timelineYears {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-family: var(--font-base);
+  font-size: 18px;
+  font-weight: var(--fw-bold);
+  letter-spacing: 1px;
+  color: var(--color-text);
+}
+
+.timelineYears span:last-child {
+  color: var(--color-primary);
+}
+
+.timelineRail {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 24px;
+}
+
+.timelineRail::before {
+  content: '';
+  position: absolute;
+  right: 5px;
+  left: 5px;
+  height: 3px;
+  background: var(--color-text-muted);
+}
+
+.startNode,
+.currentYear {
+  position: relative;
+  z-index: 1;
+  display: block;
+}
+
+.startNode {
+  width: 10px;
+  height: 10px;
+  background: var(--color-text-muted);
+}
+
+.timelineRail .currentYear {
+  width: 13px;
+  height: 13px;
+  background: var(--color-primary);
+  box-shadow: 5px 5px 0 rgb(255 87 34 / 16%);
+}
+
+.timelineLabels {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-family: var(--font-base);
+  font-size: 10px;
+  font-weight: var(--fw-bold);
+  letter-spacing: 1.2px;
+  color: var(--color-text-muted);
+}
+
+.timelineLabels span:last-child {
+  color: var(--color-text);
+  text-align: right;
+}
+
+.timelineLabels b {
+  color: var(--color-primary);
+  font-weight: inherit;
+}
+
+/* ─── Open source / GitHub proof ──────────────────────────────────── */
+.githubProof {
+  position: relative;
+  display: flex;
+  min-width: 340px;
+  align-items: center;
+  justify-content: center;
+  padding: 14px 30px 16px;
+  overflow: hidden;
+  color: var(--color-text);
+  text-decoration: none;
+  outline: 1px solid transparent;
+}
+
+.githubProof:hover {
+  color: var(--color-text);
+  text-decoration: none;
+  outline-color: var(--color-border);
+}
+
+.githubProof:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 3px;
+}
+
+.githubMetric {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.starCount {
+  font-family: var(--font-base);
+  font-size: clamp(52px, 5.8vw, 72px);
+  font-weight: var(--fw-black);
+  line-height: 0.95;
+  letter-spacing: 2px;
+  color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='5' height='5' fill='%23ff5722'/%3E%3C/svg%3E");
+  background-size: 6px 6px;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.starLabel {
+  margin-top: 10px;
+  font-family: var(--font-base);
+  font-size: 12px;
+  font-weight: var(--fw-regular);
+  letter-spacing: 0.8px;
+  color: var(--color-text-muted);
+}
+
+/* ─── Extension catalog ───────────────────────────────────────────── */
+.extensionCatalog {
+  display: flex;
+  width: clamp(300px, 32vw, 380px);
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.extensionCatalog:hover {
+  border-color: var(--color-text-muted);
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.extensionCatalog:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 3px;
+}
+
+.catalogHeader {
+  font-family: var(--font-base);
+  font-size: 10px;
+  font-weight: var(--fw-bold);
+  letter-spacing: 1.2px;
+}
+
+.catalogHeader {
+  color: var(--color-text-muted);
+}
+
+.catalogHeader b {
+  color: var(--color-primary);
+  font-weight: inherit;
+}
+
+.extensionGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.extensionGrid > span {
+  overflow: hidden;
+  padding: 4px 6px;
+  border: 1px solid var(--color-border);
+  font-family: monospace;
+  font-size: 10px;
+  color: var(--color-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.extensionGrid > .featuredExtension {
+  border-color: var(--color-primary);
+  color: var(--color-text);
+}
+
+/* ─── Carousel controls ───────────────────────────────────────────── */
+.controls {
+  position: absolute;
+  z-index: 4;
+  left: 50%;
+  bottom: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transform: translateX(-50%);
+}
+
+.indicator {
+  appearance: none;
+  border: 1px solid var(--color-text-muted);
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+
+.indicator {
+  width: 9px;
+  height: 9px;
+  padding: 0;
+}
+
+.indicator:hover,
+.activeIndicator {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+}
+
+.indicator:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 3px;
+}
+
 /* ─── Responsive ──────────────────────────────────────────────────── */
 @media (max-width: 900px) {
   .inner { padding: 0 48px; }
-  .banner { flex-direction: column; gap: 32px; text-align: center; padding: 36px 40px; }
+  .banner { height: 320px; text-align: center; padding: 36px 40px 46px; }
+  .slide { flex-direction: column; justify-content: center; gap: 32px; }
   .underbar { margin: 10px auto 0; }
 }
 
 @media (max-width: 600px) {
   .inner { padding: 0 20px; }
-  .banner { flex-direction: column; gap: 24px; padding: 28px 24px; }
+  .banner { height: 300px; padding: 18px 20px 36px; }
+  .slide { flex-direction: column; justify-content: center; gap: 20px; }
   .visual { gap: 16px; }
   .divider { display: none; }
   .before, .after { font-size: clamp(18px, 5vw, 24px); }
+  .productionTimeline { width: min(100%, 300px); }
+  .githubProof { min-width: 0; width: min(100%, 300px); padding: 12px 14px; }
+  .extensionCatalog { width: min(100%, 300px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slide,
+  .exiting,
+  .transitioning::before {
+    animation: none;
+  }
 }