diff --git a/apps/shoploop-studio-site/app/globals.css b/apps/shoploop-studio-site/app/globals.css
index f7004e8..cb04f83 100644
--- a/apps/shoploop-studio-site/app/globals.css
+++ b/apps/shoploop-studio-site/app/globals.css
@@ -4,54 +4,61 @@
 
 :root {
   --font-deva: 'Noto Serif Devanagari', serif;
-  --font-display: 'IBM Plex Serif', Georgia, serif;
-  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
+  --font-display: 'Instrument Serif', 'IBM Plex Serif', Georgia, serif;
+  --font-body: 'Satoshi', 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
   --ease: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 html {
   scroll-behavior: smooth;
-  background: #0b2523;
+  background: #F5F3EE;
 }
 
 body {
-  background: #0b2523;
-  color: #f7f2e7;
+  background: #F5F3EE;
+  color: #0A0A0A;
   font-family: var(--font-body);
+  font-feature-settings: 'ss01', 'cv11';
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }
 
 ::selection {
-  background: #e8a33d;
-  color: #0b2523;
+  background: #F5F369;
+  color: #0A0A0A;
 }
 
 *:focus-visible {
-  outline: 2px solid #e8a33d;
+  outline: 2px solid #0A0A0A;
   outline-offset: 3px;
   border-radius: 2px;
 }
 
-.sec-label {
-  font-family: ui-monospace, SFMono-Regular, monospace;
-  font-size: 0.7rem;
-  letter-spacing: 0.22em;
+/* Label caps — Grip nav / eyebrow pattern */
+.label-caps {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: #e8a33d;
 }
 
-.grain::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0.05;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
+/* Isometric shadow used under illustrations inside color panels */
+.iso-shadow {
+  filter: drop-shadow(3px 4px 0 #0A0A0A);
+}
+
+/* Buttercream / lavender / coral panels get the 32px signature radius */
+.panel {
+  border-radius: 32px;
+  padding: 48px;
 }
 
-.hairline {
-  border-color: rgba(247, 242, 231, 0.12);
+@media (max-width: 640px) {
+  .panel {
+    padding: 28px;
+    border-radius: 24px;
+  }
 }
 
 @keyframes marquee {
@@ -63,10 +70,6 @@ body {
 }
 .marquee-track:hover { animation-play-state: paused; }
 
-@keyframes dashflow {
-  to { stroke-dashoffset: -1000; }
-}
-
 @media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   .marquee-track { animation: none; }
diff --git a/apps/shoploop-studio-site/app/layout.tsx b/apps/shoploop-studio-site/app/layout.tsx
index f2b062a..1eafead 100644
--- a/apps/shoploop-studio-site/app/layout.tsx
+++ b/apps/shoploop-studio-site/app/layout.tsx
@@ -98,7 +98,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
           rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+Devanagari:wght@400;600;700&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=IBM+Plex+Serif:wght@400;500;600&family=Noto+Serif+Devanagari:wght@400;600;700&display=swap"
+        />
+        <link
+          rel="stylesheet"
+          href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap"
         />
         <script
           type="application/ld+json"
diff --git a/apps/shoploop-studio-site/app/page.tsx b/apps/shoploop-studio-site/app/page.tsx
index 6787a3a..fa1f3b2 100644
--- a/apps/shoploop-studio-site/app/page.tsx
+++ b/apps/shoploop-studio-site/app/page.tsx
@@ -1,25 +1,24 @@
 'use client';
 
-import dynamic from 'next/dynamic';
 import { useState } from 'react';
 import { COPY, LangProvider, LangToggle, useLang } from '@/components/lang';
 import { ToastProvider, useToast } from '@/components/toast';
-import { useDeviceTier } from '@/components/useDevice';
-import { JarPoster, Logo, Reveal, SectionLabel } from '@/components/bits';
-import LoopDiagram from '@/components/LoopDiagram';
-import StackStrip from '@/components/StackStrip';
-
-const JarScene = dynamic(() => import('@/components/three/JarScene'), { ssr: false });
-const MoatOrbit = dynamic(() => import('@/components/three/MoatOrbit'), { ssr: false });
-const MoleculeAtlas = dynamic(() => import('@/components/three/MoleculeAtlas'), { ssr: false });
-const ParticleField = dynamic(() => import('@/components/three/ParticleField'), { ssr: false });
+import { Logo } from '@/components/bits';
+import {
+  IsoJar,
+  IsoFlower,
+  IsoLoop,
+  IsoBottle,
+  IsoBox,
+  IsoTube,
+} from '@/components/GripIllustrations';
 
 const GH = 'https://github.com/ninan-versioning/shoploop';
-/** In-memory wishlist store for v0. */
 const WISHLIST: { email: string; at: string }[] = [];
 
-const MOAT_SENTENCE =
-  'Vagon.io + grip.tools + Postiz + PostHog + Google Ads feedback + NVIDIA Omniverse + Blender with materials — Hindi/Marathi/English support — targeting Ayurvedic tabletop category.';
+// ─────────────────────────────────────────────────────────────
+// HEADER — Grip pattern: black wordmark left, pill nav center-right, dark CTA
+// ─────────────────────────────────────────────────────────────
 
 function GitHubIcon({ className = 'h-5 w-5' }: { className?: string }) {
   return (
@@ -31,42 +30,61 @@ function GitHubIcon({ className = 'h-5 w-5' }: { className?: string }) {
 
 function Header() {
   return (
-    <header className="fixed inset-x-0 top-0 z-40 border-b border-cream/10 bg-teal-900/80 backdrop-blur-md">
+    <header className="fixed inset-x-0 top-0 z-40">
       <nav
         aria-label="Primary"
-        className="mx-auto flex max-w-7xl items-center justify-between px-5 py-3.5 sm:px-8"
+        className="mx-auto mt-3 flex max-w-[1400px] items-center justify-between rounded-full border border-ink/8 bg-cream/90 px-5 py-2.5 backdrop-blur-md sm:mx-4"
       >
         <a
           href="#hero"
           id="brand-home"
           data-a2ui-action="go-home"
-          className="flex items-center gap-2.5 text-amber-400"
+          className="flex items-center gap-2 text-ink"
         >
-          <Logo className="h-6 w-6" />
-          <span className="font-display text-xl italic tracking-tight text-cream">Shoploop</span>
+          <Logo className="h-5 w-5" />
+          <span className="font-display text-[22px] italic tracking-tight text-ink">
+            Shoploop
+          </span>
         </a>
-        <div className="flex items-center gap-3 sm:gap-4">
+        <div className="hidden items-center gap-6 md:flex">
+          <a href="#loop" className="label-caps text-ink/70 hover:text-ink">
+            Product
+          </a>
+          <a href="#integrations" className="label-caps text-ink/70 hover:text-ink">
+            Integrations
+          </a>
+          <a href="#pricing" className="label-caps text-ink/70 hover:text-ink">
+            Pricing
+          </a>
+          <a
+            href={`${GH}#readme`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="label-caps text-ink/70 hover:text-ink"
+          >
+            Docs
+          </a>
+        </div>
+        <div className="flex items-center gap-2.5">
           <LangToggle id="lang-toggle-header" />
           <a
             href={GH}
             target="_blank"
             rel="noopener noreferrer"
             id="header-github"
-            aria-label="Shoploop source code on GitHub"
+            aria-label="Shoploop source"
             data-a2ui-action="view-github"
-            className="text-cream/70 transition-colors hover:text-amber-400"
+            className="rounded-full border border-ink/15 p-2 text-ink/70 hover:text-ink"
           >
-            <GitHubIcon />
+            <GitHubIcon className="h-4 w-4" />
           </a>
           <a
-            href={`${GH}#readme`}
-            target="_blank"
-            rel="noopener noreferrer"
-            id="header-docs"
-            data-a2ui-action="open-docs"
-            className="font-mono text-[11px] uppercase tracking-[0.16em] text-cream/70 transition-colors hover:text-amber-400"
+            href="#cta"
+            id="header-cta"
+            data-a2ui-action="get-started"
+            className="rounded-full bg-ink px-4 py-2 text-[13px] font-semibold text-cream transition-transform hover:-translate-y-0.5"
           >
-            Docs
+            Get started
           </a>
         </div>
       </nav>
@@ -74,568 +92,501 @@ function Header() {
   );
 }
 
+// ─────────────────────────────────────────────────────────────
+// HERO — cream, huge Instrument Serif, buttercream CTA, one image right
+// ─────────────────────────────────────────────────────────────
+
 function Hero() {
   const { lang } = useLang();
   const toast = useToast();
-  const { reduced, lowPower, ready } = useDeviceTier();
   const [url, setUrl] = useState('');
-  const use3d = ready && !reduced && !lowPower;
   const copy = COPY[lang];
 
   return (
     <section
       id="hero"
-      className="grain relative overflow-hidden border-b border-cream/10 pb-16 pt-28 sm:pb-24 sm:pt-32"
+      className="relative bg-cream pt-32 sm:pt-40"
       aria-labelledby="hero-h1"
     >
-      <div
-        aria-hidden="true"
-        className="absolute -left-40 top-0 h-[520px] w-[520px] rounded-full bg-amber-500/12 blur-[120px]"
-      />
-      <div className="relative mx-auto grid max-w-7xl items-center gap-12 px-5 sm:px-8 lg:grid-cols-[1.05fr_0.95fr] lg:gap-8">
-        <div>
-          <p className="sec-label mb-6">Ayurveda-first · AGPL-3.0 · Seattle</p>
-          <h1
-            id="hero-h1"
-            key={lang}
-            className={`text-balance text-[2.15rem] leading-[1.08] tracking-tight text-cream sm:text-[3.1rem] lg:text-[3.5rem] ${copy.font}`}
-          >
-            {copy.h1}
-          </h1>
-          <p className="mt-6 max-w-xl text-[15px] leading-relaxed text-cream/70 sm:text-[17px]">
-            grip.tools serves LVMH. We serve every Ayurvedic, nutraceutical, and OTC wellness
-            brand who cannot afford $500k/yr.
-          </p>
+      <div className="mx-auto max-w-[1400px] px-5 sm:px-8">
+        <p className="label-caps text-ink/50">Powered by NVIDIA · AGPL-3.0 · Seattle</p>
 
-          <article
-            className="mt-9 rounded-2xl border border-cream/15 bg-teal-800/50 p-4 backdrop-blur sm:p-5"
-            aria-labelledby="embed-gen-title"
-            data-a2ui-state="embed.generator"
-          >
-            <h2
-              id="embed-gen-title"
-              className="mb-3 font-mono text-[10px] uppercase tracking-[0.2em] text-amber-400"
-            >
-              Embed generator
-            </h2>
-            <form
-              className="flex flex-col gap-2.5 sm:flex-row"
-              onSubmit={(e) => {
-                e.preventDefault();
-                toast('Coming soon — join wishlist below');
-              }}
-            >
-              <label htmlFor="embed-url" className="sr-only">
-                Your product page URL
-              </label>
-              <input
-                id="embed-url"
-                name="url"
-                type="url"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-                placeholder="https://yourbrand.com/products/ashwagandha"
-                className="min-w-0 flex-1 rounded-xl border border-cream/15 bg-teal-900/70 px-4 py-3 text-sm text-cream placeholder:text-cream/35"
-              />
-              <button
-                type="submit"
-                id="preview-embed-cta"
-                data-a2ui-action="preview-embed"
-                className={`rounded-xl bg-amber-400 px-6 py-3 text-sm font-semibold text-teal-900 transition-transform duration-300 hover:-translate-y-0.5 hover:bg-amber-300 ${copy.font === 'font-deva' ? 'font-deva' : ''}`}
-              >
-                {copy.cta}
-              </button>
-            </form>
-            <p className="mt-3 text-[11px] text-cream/45">
-              Paste a Shopify product URL — we return a 3D embed snippet. Trilingual output.
-            </p>
-          </article>
+        <h1
+          id="hero-h1"
+          key={lang}
+          className={`mt-6 max-w-[1100px] text-balance text-[3.5rem] leading-[0.98] tracking-[-0.02em] text-ink sm:text-[5.5rem] lg:text-[7rem] ${copy.font}`}
+        >
+          {copy.h1}
+        </h1>
 
-          <ul
-            id="hero-pricing-pill"
-            className="mt-7 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-full border border-amber-400/25 bg-amber-400/8 px-4 py-2.5 font-mono text-[11px] uppercase tracking-[0.14em] text-cream/80 sm:text-[12px]"
+        <div className="mt-10 grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-end">
+          <p className={`max-w-2xl text-[19px] leading-[1.55] text-ink/70 sm:text-[21px] ${copy.font === 'font-deva' ? 'font-deva leading-[1.7]' : ''}`}>
+            {copy.sub}
+          </p>
+          <form
+            className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-end"
+            onSubmit={(e) => {
+              e.preventDefault();
+              toast('Coming soon — join the wishlist below');
+            }}
           >
-            <li>$0 OSS forever</li>
-            <li aria-hidden="true" className="text-amber-400">·</li>
-            <li>$0 trial 30 days</li>
-            <li aria-hidden="true" className="text-amber-400">·</li>
-            <li className="text-amber-400">$299/mo managed</li>
-          </ul>
+            <label htmlFor="embed-url" className="sr-only">
+              Your product page URL
+            </label>
+            <input
+              id="embed-url"
+              type="url"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="yourbrand.com/products/…"
+              className="min-w-0 flex-1 rounded-full border border-ink/15 bg-white px-5 py-3.5 text-[14px] text-ink placeholder:text-ink/35 sm:w-[280px]"
+            />
+            <button
+              type="submit"
+              id="preview-embed-cta"
+              data-a2ui-action="preview-embed"
+              className={`rounded-full bg-butter px-6 py-3.5 text-[14px] font-bold text-ink shadow-[3px_3px_0_#0A0A0A] transition-transform hover:-translate-y-0.5 ${copy.font === 'font-deva' ? 'font-deva' : ''}`}
+            >
+              {copy.cta}
+            </button>
+          </form>
         </div>
 
-        <div className="relative h-[360px] w-full sm:h-[480px] lg:h-[560px]">
-          <div
-            aria-hidden="true"
-            className="absolute inset-8 rounded-full bg-amber-400/10 blur-[70px]"
-          />
-          {use3d ? (
-            <JarScene className="relative h-full w-full" />
-          ) : (
-            <JarPoster className="relative h-full w-full" />
-          )}
-          <p className="absolute bottom-0 left-1/2 -translate-x-1/2 text-center font-mono text-[10px] uppercase tracking-[0.18em] text-cream/40">
-            Curcumin · rendered, not stock
-          </p>
+        {/* Hero image band — split render tile */}
+        <div className="mt-14 grid gap-4 sm:grid-cols-[1fr_0.8fr]">
+          <div className="relative aspect-[16/10] overflow-hidden rounded-panel bg-butter">
+            <div className="absolute inset-0 flex items-center justify-center">
+              <IsoBottle className="h-64 w-64 sm:h-80 sm:w-80" />
+            </div>
+            <p className="absolute bottom-5 left-5 label-caps text-ink">
+              rendered, not stock
+            </p>
+          </div>
+          <div className="relative aspect-[16/10] overflow-hidden rounded-panel bg-night">
+            <div className="absolute inset-0 flex items-center justify-center opacity-90">
+              <IsoJar className="h-56 w-56 sm:h-64 sm:w-64" />
+            </div>
+            <p className="absolute bottom-5 left-5 label-caps text-cream">
+              curcumin · nvidia omniverse
+            </p>
+          </div>
         </div>
       </div>
     </section>
   );
 }
 
-function Moat() {
-  const { reduced, lowPower, ready } = useDeviceTier();
-  const spin = ready && !reduced && !lowPower;
+// ─────────────────────────────────────────────────────────────
+// BUTTERCREAM PANEL — the loop, the moat sentence
+// ─────────────────────────────────────────────────────────────
+
+function LoopPanel() {
   return (
     <section
-      id="moat"
-      className="relative border-b border-cream/10 py-20 sm:py-28"
-      aria-labelledby="moat-h2"
+      id="loop"
+      className="bg-cream px-4 py-14 sm:py-20"
+      aria-labelledby="loop-h2"
     >
-      <div className="mx-auto max-w-7xl px-5 sm:px-8">
-        <Reveal>
-          <SectionLabel>01 The moat</SectionLabel>
-          <h2
-            id="moat-h2"
-            className="font-display text-[2rem] leading-tight tracking-tight text-cream sm:text-[2.9rem]"
-          >
-            The composition is the moat.
-          </h2>
-        </Reveal>
-        <div className="mt-10 grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
-          <Reveal delay={0.1}>
-            <p className="font-display text-[1.05rem] leading-[1.6] text-cream/85 sm:text-[1.4rem]">
-              {MOAT_SENTENCE}
-            </p>
-            <p className="mt-6 text-sm text-cream/55">
-              No single piece is defensible. The assembly is.
-            </p>
-            <a
-              href="#loop"
-              id="moat-cta"
-              data-a2ui-action="see-the-loop"
-              className="mt-7 inline-flex items-center gap-2 border-b border-amber-400/50 pb-1 font-mono text-[11px] uppercase tracking-[0.18em] text-amber-400 transition-colors hover:border-amber-400"
-            >
-              See how it compounds →
-            </a>
-          </Reveal>
-          <Reveal delay={0.15}>
-            {spin ? (
-              <MoatOrbit spin />
-            ) : (
-              <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-                {[
-                  'Vagon',
-                  'grip.tools',
-                  'Postiz',
-                  'PostHog',
-                  'Google Ads',
-                  'Omniverse',
-                  'Blender',
-                  'hi / en / mr',
-                  'Ayurveda',
-                ].map((n) => (
-                  <li
-                    key={n}
-                    className="rounded-xl border border-amber-400/25 bg-teal-800/40 px-3 py-4 text-center font-mono text-[10px] uppercase tracking-[0.14em] text-cream/80"
-                  >
-                    {n}
-                  </li>
-                ))}
-              </ul>
-            )}
-          </Reveal>
+      <div className="mx-auto max-w-[1400px]">
+        <div className="panel bg-butter">
+          <div className="grid gap-10 lg:grid-cols-[1fr_0.7fr] lg:items-center">
+            <div>
+              <p className="label-caps text-ink/60">01 · The loop</p>
+              <h2
+                id="loop-h2"
+                className="mt-4 font-display text-[2.6rem] leading-[1.02] tracking-tight text-ink sm:text-[4.2rem]"
+              >
+                One page. One pixel. One purchase.
+              </h2>
+              <p className="mt-6 max-w-xl text-[17px] leading-[1.55] text-ink/75">
+                Connect Shopify, PostHog, Google Ads, Meta, Klaviyo. Shoploop reads the
+                reverse-feedback signal, mutates 3D creative — angle × material × copy — publishes
+                to your storefront and every ad surface, and compounds nightly.
+              </p>
+              <p className="mt-4 max-w-xl text-[14px] text-ink/55">
+                No single piece is defensible. The composition is.
+              </p>
+            </div>
+            <div className="relative flex items-center justify-center">
+              <IsoLoop className="h-64 w-64 sm:h-72 sm:w-72" />
+            </div>
+          </div>
+
+          {/* 4-step ribbon */}
+          <div className="mt-12 grid gap-3 sm:grid-cols-4">
+            {[
+              { n: '01', t: 'Ingest', b: 'Nango connects Shopify + Ads + PostHog' },
+              { n: '02', t: 'Mutate', b: 'Angle × material × copy variants' },
+              { n: '03', t: 'Render', b: 'Blender + Omniverse on g5.xlarge spot' },
+              { n: '04', t: 'Publish', b: 'Postiz to storefront + every network' },
+            ].map((s) => (
+              <div
+                key={s.n}
+                className="rounded-2xl border-2 border-ink/85 bg-cream p-5"
+              >
+                <p className="label-caps text-ink/50">{s.n}</p>
+                <p className="mt-2 font-display text-2xl text-ink">{s.t}</p>
+                <p className="mt-2 text-[13px] leading-[1.4] text-ink/65">{s.b}</p>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </section>
   );
 }
 
-function Loop() {
-  const { reduced, lowPower, ready } = useDeviceTier();
-  const animate = ready && !reduced && !lowPower;
+// ─────────────────────────────────────────────────────────────
+// WHITE BREATHER — SKU categories with isometric illustrations
+// ─────────────────────────────────────────────────────────────
+
+function Categories() {
+  const cats = [
+    { t: 'Bottles', s: 'Ayurvedic tinctures. Cold-pressed oils.', I: IsoBottle },
+    { t: 'Jars', s: 'Balms. Ghees. Nutrient powders.', I: IsoJar },
+    { t: 'Tubes', s: 'Creams. Salves. Ointments.', I: IsoTube },
+    { t: 'Boxes', s: 'Teas. Tablets. Sachets. Kits.', I: IsoBox },
+  ];
   return (
     <section
-      id="loop"
-      className="relative border-b border-cream/10 bg-teal-800/25 py-20 sm:py-28"
-      aria-labelledby="loop-h2"
+      id="categories"
+      className="bg-paper py-20 sm:py-28"
+      aria-labelledby="cat-h2"
     >
-      <div className="mx-auto max-w-7xl px-5 sm:px-8">
-        <Reveal>
-          <SectionLabel>02 The loop</SectionLabel>
-          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+      <div className="mx-auto max-w-[1400px] px-5 sm:px-8">
+        <div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <p className="label-caps text-ink/50">02 · Tabletop</p>
             <h2
-              id="loop-h2"
-              className="font-display text-[2rem] leading-tight tracking-tight text-cream sm:text-[2.9rem]"
+              id="cat-h2"
+              className="mt-3 max-w-3xl font-display text-[2.4rem] leading-[1.02] tracking-tight text-ink sm:text-[3.8rem]"
             >
-              One agent. One loop. One graph.
+              Any SKU a customer can grip, rotate, inspect.
             </h2>
-            <p className="max-w-sm text-[15px] text-cream/70">
-              From ad impression to reorder — nightly compounding.
-            </p>
           </div>
-        </Reveal>
-        <Reveal delay={0.12} className="mt-12">
-          <LoopDiagram animate={animate} />
-        </Reveal>
-        <Reveal delay={0.2}>
-          <a
-            href="#molecules"
-            id="loop-cta"
-            data-a2ui-action="open-molecular-atlas"
-            className="mx-auto mt-12 block w-fit border-b border-amber-400/50 pb-1 font-mono text-[11px] uppercase tracking-[0.18em] text-amber-400 hover:border-amber-400"
-          >
-            Open the molecular atlas →
-          </a>
-        </Reveal>
+          <p className="max-w-sm text-[15px] text-ink/60">
+            Wedge one: Ayurvedic supplements, nutraceuticals, OTC wellness.<br />
+            Wedge two: skincare, spirits, coffee, sauces, candles.<br />
+            Never: injectables, devices, cold-chain biologics.
+          </p>
+        </div>
+
+        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {cats.map((c) => (
+            <article
+              key={c.t}
+              className="group relative flex flex-col overflow-hidden rounded-panel border-2 border-ink/85 bg-cream p-6"
+            >
+              <div className="flex h-48 items-center justify-center">
+                <c.I className="h-36 w-36 transition-transform group-hover:-translate-y-1" />
+              </div>
+              <h3 className="mt-4 font-display text-3xl text-ink">{c.t}</h3>
+              <p className="mt-2 text-[14px] text-ink/60">{c.s}</p>
+            </article>
+          ))}
+        </div>
       </div>
     </section>
   );
 }
 
-function Molecules() {
-  const { reduced, lowPower, ready } = useDeviceTier();
-  const spin = ready && !reduced && !lowPower;
+// ─────────────────────────────────────────────────────────────
+// LAVENDER PANEL — integrations grid, Grip-style
+// ─────────────────────────────────────────────────────────────
+
+const INTEGRATIONS = [
+  'Shopify',
+  'PostHog',
+  'Google Ads',
+  'Meta',
+  'Klaviyo',
+  'GitHub',
+  'Nango',
+  'Postiz',
+  'NVIDIA Omniverse',
+  'Blender',
+  'MolecularNodes',
+  'Stripe',
+  'Cloudflare',
+  'Supabase',
+  'Vercel',
+  'Temporal',
+];
+
+function IntegrationsPanel() {
   return (
     <section
-      id="molecules"
-      className="relative overflow-hidden border-b border-cream/10 py-20 sm:py-28"
-      aria-labelledby="mol-h2"
+      id="integrations"
+      className="bg-cream px-4 py-14 sm:py-20"
+      aria-labelledby="int-h2"
     >
-      <div
-        aria-hidden="true"
-        className="absolute right-0 top-1/3 h-[420px] w-[420px] rounded-full bg-teal-500/15 blur-[110px]"
-      />
-      <div className="relative mx-auto max-w-7xl px-5 sm:px-8">
-        <Reveal>
-          <SectionLabel>03 Molecules</SectionLabel>
-          <h2
-            id="mol-h2"
-            className="max-w-3xl font-display text-[2rem] leading-tight tracking-tight text-cream sm:text-[2.9rem]"
-          >
-            Every Ayurvedic herb has a molecule. We render the molecule.
-          </h2>
-          <p className="mt-5 max-w-2xl text-[15px] text-cream/70">
-            Curcumin, withaferin A, piperine, bacoside A, ashwagandha, brahmi, tulsi, and more.
-          </p>
-        </Reveal>
-        <Reveal delay={0.12} className="mt-8">
-          {spin ? (
-            <MoleculeAtlas spin />
-          ) : (
-            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-              {[
-                'Curcumin',
-                'Withaferin A',
-                'Piperine',
-                'Bacoside A',
-                'Eugenol',
-                'Gingerol',
-                'Andrographolide',
-                'Glycyrrhizin',
-                'Guggulsterone',
-                'Boswellic acid',
-                'Berberine',
-                'Asiaticoside',
-              ].map((m) => (
+      <div className="mx-auto max-w-[1400px]">
+        <div className="panel bg-lavender">
+          <div className="grid gap-10 lg:grid-cols-[0.7fr_1fr] lg:items-start">
+            <div>
+              <p className="label-caps text-ink/60">03 · Integrations</p>
+              <h2
+                id="int-h2"
+                className="mt-4 font-display text-[2.4rem] leading-[1.02] tracking-tight text-ink sm:text-[3.4rem]"
+              >
+                Plugs into every surface a Shopify brand already runs.
+              </h2>
+              <p className="mt-6 max-w-md text-[16px] leading-[1.55] text-ink/75">
+                Read from your storefront and ad accounts. Write back to product pages, ad sets,
+                email flows, and GitHub PRs — audited every night.
+              </p>
+              <div className="mt-8 flex items-center gap-4">
+                <IsoFlower className="h-24 w-24" />
+                <p className="max-w-[200px] text-[13px] text-ink/60">
+                  Every herb has a molecule. We render the molecule.
+                </p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-4">
+              {INTEGRATIONS.map((n) => (
                 <div
-                  key={m}
-                  className="rounded-xl border border-cream/12 bg-teal-800/40 p-4 text-center"
+                  key={n}
+                  className="rounded-2xl border-2 border-ink/85 bg-cream px-3 py-4 text-center"
                 >
-                  <JarPoster className="h-20" />
-                  <p className="mt-2 font-mono text-[10px] uppercase tracking-[0.14em] text-cream/75">
-                    {m}
-                  </p>
+                  <p className="font-display text-[15px] text-ink">{n}</p>
                 </div>
               ))}
             </div>
-          )}
-          <p className="mt-4 text-center font-mono text-[10px] uppercase tracking-[0.18em] text-cream/40">
-            Drag to reorient · sphere-and-stick v0 · PDB via MolecularNodes next
-          </p>
-        </Reveal>
+          </div>
+        </div>
       </div>
     </section>
   );
 }
 
-const TIERS = [
-  {
-    id: 'oss',
-    name: 'OSS',
-    price: '$0',
-    unit: 'forever',
-    body: 'Self-host AGPL-3.0. Everything above, in your infra.',
-    cta: 'View on GitHub →',
-    action: 'view-github',
-    angle: 0.6,
-    href: GH,
-  },
-  {
-    id: 'trial',
-    name: 'Trial',
-    price: '$0',
-    unit: 'for 30 days',
-    body: 'Managed hosting. No card required. Full features.',
-    cta: 'Start trial →',
-    action: 'start-trial',
-    angle: 2.1,
-    href: null,
-    toast: 'Trial launching August — join waitlist',
-  },
-  {
-    id: 'managed',
-    name: 'Managed',
-    price: '$299',
-    unit: '/mo',
-    body: 'Hosted embed CDN + Nango + Studio + Postiz + 10 loops on your data.',
-    cta: 'Talk to us →',
-    action: 'talk-to-founders',
-    angle: 4.0,
-    href: 'mailto:hello@shoploop.studio',
-    featured: true,
-  },
-];
-
-function Pricing() {
-  const toast = useToast();
-  const { reduced, lowPower, ready } = useDeviceTier();
-  const use3d = ready && !reduced && !lowPower;
+// ─────────────────────────────────────────────────────────────
+// CORAL PANEL — wedge / pricing / positioning
+// ─────────────────────────────────────────────────────────────
 
+function WedgePanel() {
   return (
     <section
       id="pricing"
-      className="relative border-b border-cream/10 bg-teal-800/25 py-20 sm:py-28"
-      aria-labelledby="pricing-h2"
+      className="bg-cream px-4 py-14 sm:py-20"
+      aria-labelledby="wedge-h2"
     >
-      <div className="mx-auto max-w-7xl px-5 sm:px-8">
-        <Reveal>
-          <SectionLabel>04 Pricing</SectionLabel>
-          <h2
-            id="pricing-h2"
-            className="font-display text-[2rem] leading-tight tracking-tight text-cream sm:text-[2.9rem]"
-          >
-            Pick your tier.
-          </h2>
-          <p className="mt-4 font-mono text-[11px] uppercase tracking-[0.16em] text-cream/50">
-            Checkout via Web Payments + AP2 mandate · BYOK Stripe adapter, open code
-          </p>
-        </Reveal>
-
-        <div className="mt-12 grid gap-5 lg:grid-cols-3">
-          {TIERS.map((t, i) => (
-            <Reveal key={t.id} delay={0.08 * i}>
-              <article
-                id={`pricing-${t.id}`}
-                data-a2ui-state={`pricing.tier.${t.id}`}
-                className={`group relative flex h-full flex-col overflow-hidden rounded-2xl border p-6 backdrop-blur transition-colors sm:p-7 ${
-                  t.featured
-                    ? 'border-amber-400/45 bg-amber-400/8'
-                    : 'border-cream/12 bg-teal-900/50 hover:border-cream/25'
-                }`}
+      <div className="mx-auto max-w-[1400px]">
+        <div className="panel bg-blush">
+          <div className="grid gap-10 lg:grid-cols-[1fr_0.9fr] lg:items-center">
+            <div>
+              <p className="label-caps text-ink/60">04 · Positioning</p>
+              <h2
+                id="wedge-h2"
+                className="mt-4 font-display text-[2.6rem] leading-[1.02] tracking-tight text-ink sm:text-[4rem]"
               >
-                <div
-                  aria-hidden="true"
-                  className="pointer-events-none absolute -right-4 -top-4 h-40 w-40 opacity-40"
+                grip.tools, democratized.
+              </h2>
+              <p className="mt-6 max-w-xl text-[17px] leading-[1.55] text-ink/80">
+                Grip serves LVMH and L'Oréal at $500k a year. Shoploop serves every Shopify
+                tabletop brand at zero — because the render kernel, the ad-ops loop, and the
+                storefront hooks are all open-source.
+              </p>
+              <div className="mt-8 flex flex-wrap gap-3">
+                <a
+                  href={GH}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  data-a2ui-action="view-github"
+                  className="rounded-full border-2 border-ink bg-cream px-5 py-3 text-[13px] font-bold text-ink hover:bg-butter"
                 >
-                  {use3d ? (
-                    <JarScene
-                      spin={false}
-                      angle={t.angle}
-                      zoom={6.6}
-                      molScale={0.38}
-                      className="h-full w-full"
-                      label=""
-                    />
-                  ) : (
-                    <JarPoster className="h-full w-full" />
-                  )}
-                </div>
+                  Fork it on GitHub
+                </a>
+                <a
+                  href="mailto:hello@shoploop.studio"
+                  data-a2ui-action="talk-to-founders"
+                  className="rounded-full bg-ink px-5 py-3 text-[13px] font-bold text-cream hover:-translate-y-0.5"
+                >
+                  Book a design partner call
+                </a>
+              </div>
+            </div>
 
-                <h3 className="font-mono text-[11px] uppercase tracking-[0.2em] text-amber-400">
-                  {t.name}
-                </h3>
-                <p className="mt-4 flex items-baseline gap-2">
-                  <span className="font-display text-[2.6rem] leading-none text-cream">
-                    {t.price}
-                  </span>
-                  <span className="text-sm text-cream/55">{t.unit}</span>
-                </p>
-                <p className="mt-4 flex-1 text-[14px] leading-relaxed text-cream/70">{t.body}</p>
-                {t.href ? (
-                  <a
-                    href={t.href}
-                    target={t.href.startsWith('mailto') ? undefined : '_blank'}
-                    rel="noopener noreferrer"
-                    id={`pricing-${t.id}-cta`}
-                    data-a2ui-action={t.action}
-                    className={`mt-7 inline-flex items-center justify-center rounded-xl px-5 py-3 text-sm font-semibold transition-transform duration-300 hover:-translate-y-0.5 ${
-                      t.featured
-                        ? 'bg-amber-400 text-teal-900 hover:bg-amber-300'
-                        : 'border border-cream/25 text-cream hover:border-amber-400 hover:text-amber-400'
-                    }`}
-                  >
-                    {t.cta}
-                  </a>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={() => toast(t.toast!)}
-                    id={`pricing-${t.id}-cta`}
-                    data-a2ui-action={t.action}
-                    className="mt-7 inline-flex items-center justify-center rounded-xl border border-cream/25 px-5 py-3 text-sm font-semibold text-cream transition-transform duration-300 hover:-translate-y-0.5 hover:border-amber-400 hover:text-amber-400"
-                  >
-                    {t.cta}
-                  </button>
-                )}
-              </article>
-            </Reveal>
-          ))}
+            {/* Price ladder */}
+            <div className="grid gap-3">
+              {[
+                { n: 'OSS', p: '$0', u: 'forever', b: 'Self-host AGPL-3.0. Every loop, every renderer.' },
+                { n: 'Trial', p: '$0', u: 'for 30 days', b: 'Managed hosting. Full feature set. No card.' },
+                { n: 'Managed', p: '$299', u: '/ month', b: 'Hosted embed CDN + Nango + Studio + 10 loops.', star: true },
+              ].map((t) => (
+                <article
+                  key={t.n}
+                  className={`rounded-2xl border-2 border-ink/85 p-5 ${
+                    t.star ? 'bg-ink text-cream' : 'bg-cream text-ink'
+                  }`}
+                >
+                  <div className="flex items-baseline justify-between">
+                    <p className={`label-caps ${t.star ? 'text-butter' : 'text-ink/60'}`}>
+                      {t.n}
+                    </p>
+                    <p className="font-display text-3xl">
+                      {t.p}
+                      <span className={`ml-1 text-[13px] font-normal ${t.star ? 'text-cream/60' : 'text-ink/50'}`}>
+                        {t.u}
+                      </span>
+                    </p>
+                  </div>
+                  <p className={`mt-2 text-[13px] leading-[1.45] ${t.star ? 'text-cream/75' : 'text-ink/65'}`}>
+                    {t.b}
+                  </p>
+                </article>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </section>
   );
 }
 
-function Stack() {
+// ─────────────────────────────────────────────────────────────
+// DARK STRIP — sample brand renders (photo band on Grip)
+// ─────────────────────────────────────────────────────────────
+
+function DarkStrip() {
   return (
-    <section
-      id="stack"
-      className="border-b border-cream/10 py-20 sm:py-24"
-      aria-labelledby="stack-h2"
-    >
-      <div className="mx-auto max-w-7xl px-5 sm:px-8">
-        <Reveal>
-          <SectionLabel>05 Stack</SectionLabel>
-          <h2
-            id="stack-h2"
-            className="max-w-2xl font-display text-[2rem] leading-tight tracking-tight text-cream sm:text-[2.9rem]"
-          >
-            Nothing closed-source. Nothing you can&apos;t fork.
-          </h2>
-        </Reveal>
-      </div>
-      <div className="mt-10">
-        <StackStrip />
-      </div>
-      <div className="mx-auto max-w-7xl px-5 sm:px-8">
-        <a
-          href={GH}
-          target="_blank"
-          rel="noopener noreferrer"
-          id="stack-cta"
-          data-a2ui-action="view-source"
-          className="mt-6 inline-block border-b border-amber-400/50 pb-1 font-mono text-[11px] uppercase tracking-[0.18em] text-amber-400 hover:border-amber-400"
+    <section className="bg-night py-20 sm:py-28" aria-labelledby="cases-h2">
+      <div className="mx-auto max-w-[1400px] px-5 sm:px-8">
+        <p className="label-caps text-cream/50">05 · The reference implementations</p>
+        <h2
+          id="cases-h2"
+          className="mt-3 max-w-3xl font-display text-[2.4rem] leading-[1.02] tracking-tight text-cream sm:text-[3.6rem]"
         >
-          Fork the render kernel →
-        </a>
+          Three sites. Dogfooded. Open-source.
+        </h2>
+        <div className="mt-12 grid gap-4 lg:grid-cols-3">
+          {[
+            {
+              t: 'shoploop.studio',
+              s: 'Marketing + embed generator hero. This site.',
+              c: '#F5F369',
+              I: IsoBox,
+            },
+            {
+              t: 'ashwagandha.shoploop.studio',
+              s: 'Brand-neutral Ayurveda 3D shopping demo. Molecular atlas.',
+              c: '#D9C6F0',
+              I: IsoJar,
+            },
+            {
+              t: 'studio.shoploop.studio',
+              s: 'Advertiser Studio. Polotno + R3F + Omniverse Kit + Postiz + Nango.',
+              c: '#F7C9BE',
+              I: IsoLoop,
+            },
+          ].map((r) => (
+            <article
+              key={r.t}
+              className="group relative overflow-hidden rounded-panel bg-cream/5 p-6"
+              style={{ borderColor: r.c }}
+            >
+              <div
+                className="mb-6 flex h-48 items-center justify-center rounded-2xl"
+                style={{ background: r.c }}
+              >
+                <r.I className="h-32 w-32" />
+              </div>
+              <p className="font-mono text-[13px] text-cream/80">{r.t}</p>
+              <p className="mt-2 text-[14px] leading-[1.5] text-cream/60">{r.s}</p>
+            </article>
+          ))}
+        </div>
       </div>
     </section>
   );
 }
 
-function Wishlist() {
+// ─────────────────────────────────────────────────────────────
+// CTA CLOSE — cream, big serif "Get started."
+// ─────────────────────────────────────────────────────────────
+
+function CTAClose() {
   const toast = useToast();
   const [email, setEmail] = useState('');
-  const { reduced, lowPower, ready } = useDeviceTier();
-  const use3d = ready && !reduced && !lowPower;
-
   return (
-    <section
-      id="wishlist"
-      className="relative overflow-hidden py-24 sm:py-32"
-      aria-labelledby="wishlist-h2"
-    >
-      {use3d ? (
-        <ParticleField spin />
-      ) : (
-        <div
-          aria-hidden="true"
-          className="absolute inset-0 bg-[radial-gradient(circle_at_50%_40%,rgba(232,163,61,0.18),transparent_60%)]"
-        />
-      )}
-      <div className="relative mx-auto max-w-3xl px-5 text-center sm:px-8">
-        <Reveal>
-          <div className="mx-auto mb-5 w-fit">
-            <SectionLabel>06 Design partners</SectionLabel>
-          </div>
-          <h2
-            id="wishlist-h2"
-            className="font-display text-[1.8rem] leading-tight tracking-tight text-cream sm:text-[2.6rem]"
-          >
-            We&apos;re onboarding 5 Ayurvedic + nutraceutical brands as design partners in Q3
-            2026.
-          </h2>
-          <p className="mx-auto mt-5 max-w-xl text-[15px] leading-relaxed text-cream/70">
-            If you&apos;re a founder or CMO at one — reach out. If you want the OSS, everything is
-            on GitHub.
-          </p>
-        </Reveal>
-
-        <Reveal delay={0.1}>
-          <form
-            className="mx-auto mt-9 flex max-w-lg flex-col gap-2.5 sm:flex-row"
-            onSubmit={(e) => {
-              e.preventDefault();
-              // v0: held in memory (preview frames block web storage); swap for
-              // the Nango-backed wishlist endpoint at launch.
-              WISHLIST.push({ email, at: new Date().toISOString() });
-              setEmail('');
-              toast("Thanks — we'll reach out");
-            }}
-          >
-            <label htmlFor="wishlist-email" className="sr-only">
-              Your email address
-            </label>
-            <input
-              id="wishlist-email"
-              name="email"
-              type="email"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="founder@yourbrand.in"
-              className="min-w-0 flex-1 rounded-xl border border-cream/20 bg-teal-900/80 px-4 py-3 text-sm text-cream placeholder:text-cream/35"
-            />
-            <button
-              type="submit"
-              id="join-wishlist-cta"
-              data-a2ui-action="join-wishlist"
-              className="rounded-xl bg-amber-400 px-6 py-3 text-sm font-semibold text-teal-900 transition-transform duration-300 hover:-translate-y-0.5 hover:bg-amber-300"
-            >
-              Join wishlist
-            </button>
-          </form>
-          <a
-            href={GH}
-            target="_blank"
-            rel="noopener noreferrer"
-            id="wishlist-source-cta"
-            data-a2ui-action="view-source"
-            className="mt-7 inline-block border-b border-amber-400/50 pb-1 font-mono text-[11px] uppercase tracking-[0.18em] text-amber-400 hover:border-amber-400"
+    <section id="cta" className="bg-cream py-24 sm:py-40" aria-labelledby="cta-h2">
+      <div className="mx-auto max-w-[1200px] px-5 text-center sm:px-8">
+        <p className="label-caps text-ink/50">Design partners · Q3 2026</p>
+        <h2
+          id="cta-h2"
+          className="mx-auto mt-6 max-w-4xl font-display text-[3rem] leading-[1] tracking-[-0.02em] text-ink sm:text-[6rem]"
+        >
+          Ship a 3D SKU today.
+        </h2>
+        <p className="mx-auto mt-6 max-w-xl text-[17px] leading-[1.55] text-ink/65">
+          Onboarding five Ayurvedic + nutraceutical brands as design partners. Or fork the whole
+          kernel — it's AGPL-3.0.
+        </p>
+        <form
+          className="mx-auto mt-10 flex max-w-lg flex-col gap-2 sm:flex-row"
+          onSubmit={(e) => {
+            e.preventDefault();
+            WISHLIST.push({ email, at: new Date().toISOString() });
+            setEmail('');
+            toast("Thanks — we'll reach out");
+          }}
+        >
+          <label htmlFor="wishlist-email" className="sr-only">
+            Your email address
+          </label>
+          <input
+            id="wishlist-email"
+            type="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="founder@yourbrand.in"
+            className="min-w-0 flex-1 rounded-full border border-ink/20 bg-white px-5 py-3.5 text-[14px] text-ink placeholder:text-ink/35"
+          />
+          <button
+            type="submit"
+            id="join-wishlist-cta"
+            data-a2ui-action="join-wishlist"
+            className="rounded-full bg-ink px-6 py-3.5 text-[14px] font-bold text-cream transition-transform hover:-translate-y-0.5"
           >
-            See the code →
-          </a>
-        </Reveal>
+            Join wishlist
+          </button>
+        </form>
+        <a
+          href={GH}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-a2ui-action="view-source"
+          className="mt-8 inline-block label-caps text-ink/70 underline decoration-butter decoration-4 underline-offset-4 hover:text-ink"
+        >
+          See the code →
+        </a>
       </div>
     </section>
   );
 }
 
+// ─────────────────────────────────────────────────────────────
+// FOOTER
+// ─────────────────────────────────────────────────────────────
+
 function Footer() {
   const links = [
-    { n: 'Discord', h: 'https://discord.gg/', a: 'open-discord' },
     { n: 'GitHub', h: GH, a: 'view-github' },
     { n: 'Docs', h: `${GH}#readme`, a: 'open-docs' },
-    { n: 'Careers', h: `${GH}/issues`, a: 'open-careers' },
+    { n: 'Issues', h: `${GH}/issues`, a: 'open-issues' },
     { n: 'Privacy', h: `${GH}/blob/main/PRIVACY.md`, a: 'open-privacy' },
+    { n: 'License', h: `${GH}/blob/main/LICENSE`, a: 'open-license' },
   ];
   return (
-    <footer className="border-t border-cream/10 bg-teal-900 py-10">
-      <div className="mx-auto flex max-w-7xl flex-col items-center gap-6 px-5 sm:px-8 lg:flex-row lg:justify-between">
-        <p className="font-mono text-[11px] uppercase tracking-[0.14em] text-cream/55">
-          Shoploop — AGPL-3.0 — Made in Seattle
-        </p>
-        <nav aria-label="Footer" className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
+    <footer className="border-t border-ink/8 bg-cream py-10">
+      <div className="mx-auto flex max-w-[1400px] flex-col items-center gap-5 px-5 sm:px-8 lg:flex-row lg:justify-between">
+        <div className="flex items-center gap-2">
+          <Logo className="h-5 w-5 text-ink" />
+          <span className="font-display text-lg italic text-ink">Shoploop</span>
+          <span className="label-caps ml-3 text-ink/45">AGPL-3.0 · Seattle</span>
+        </div>
+        <nav aria-label="Footer" className="flex flex-wrap items-center justify-center gap-x-5">
           {links.map((l) => (
             <a
               key={l.n}
@@ -643,7 +594,7 @@ function Footer() {
               target="_blank"
               rel="noopener noreferrer"
               data-a2ui-action={l.a}
-              className="text-[13px] text-cream/65 transition-colors hover:text-amber-400"
+              className="text-[13px] text-ink/65 hover:text-ink"
             >
               {l.n}
             </a>
@@ -651,27 +602,27 @@ function Footer() {
         </nav>
         <LangToggle id="lang-toggle-footer" />
       </div>
-      <p className="mt-8 text-center font-display text-lg italic text-amber-400/80">
-        The composition is the moat.
-      </p>
     </footer>
   );
 }
 
+// ─────────────────────────────────────────────────────────────
+// PAGE
+// ─────────────────────────────────────────────────────────────
+
 export default function Page() {
   return (
     <LangProvider>
       <ToastProvider>
-        {/* Journey: curious operator → convinced of the composition → design partner / forker */}
         <Header />
         <main>
           <Hero />
-          <Moat />
-          <Loop />
-          <Molecules />
-          <Pricing />
-          <Stack />
-          <Wishlist />
+          <LoopPanel />
+          <Categories />
+          <IntegrationsPanel />
+          <WedgePanel />
+          <DarkStrip />
+          <CTAClose />
         </main>
         <Footer />
       </ToastProvider>
diff --git a/apps/shoploop-studio-site/components/GripIllustrations.tsx b/apps/shoploop-studio-site/components/GripIllustrations.tsx
new file mode 100644
index 0000000..3f17739
--- /dev/null
+++ b/apps/shoploop-studio-site/components/GripIllustrations.tsx
@@ -0,0 +1,108 @@
+// Isometric line illustrations — Grip.tools mood.
+// Black 2.5-stroke on transparent, ~180×180 viewBox, sit inside color panels.
+
+export function IsoJar({ className = 'h-40 w-40' }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 200 200" fill="none" className={className} aria-hidden="true">
+      <g stroke="#0A0A0A" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+        {/* jar body — isometric cylinder */}
+        <path d="M60 70 L60 150 Q60 165 100 168 Q140 165 140 150 L140 70" />
+        <ellipse cx="100" cy="70" rx="40" ry="10" />
+        {/* liquid line */}
+        <path d="M62 110 Q100 118 138 110" strokeDasharray="3 4" />
+        {/* lid */}
+        <path d="M55 62 L55 50 Q55 42 100 40 Q145 42 145 50 L145 62" fill="#F5F369" />
+        <ellipse cx="100" cy="40" rx="45" ry="8" fill="#F5F369" />
+        {/* molecule inside */}
+        <circle cx="90" cy="130" r="5" fill="#0A0A0A" />
+        <circle cx="108" cy="140" r="4" fill="#0A0A0A" />
+        <circle cx="98" cy="120" r="3" fill="#0A0A0A" />
+        <path d="M90 130 L108 140 M90 130 L98 120" />
+      </g>
+    </svg>
+  );
+}
+
+export function IsoFlower({ className = 'h-40 w-40' }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 200 200" fill="none" className={className} aria-hidden="true">
+      <g stroke="#0A0A0A" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+        {/* petals */}
+        <ellipse cx="100" cy="70" rx="16" ry="26" fill="#F7C9BE" />
+        <ellipse cx="100" cy="70" rx="16" ry="26" transform="rotate(60 100 70)" fill="#F7C9BE" />
+        <ellipse cx="100" cy="70" rx="16" ry="26" transform="rotate(-60 100 70)" fill="#F7C9BE" />
+        <ellipse cx="100" cy="70" rx="16" ry="26" transform="rotate(120 100 70)" fill="#F7C9BE" />
+        <ellipse cx="100" cy="70" rx="16" ry="26" transform="rotate(-120 100 70)" fill="#F7C9BE" />
+        <circle cx="100" cy="70" r="10" fill="#F5F369" />
+        {/* stem */}
+        <path d="M100 90 Q98 130 105 165" />
+        {/* leaf */}
+        <path d="M100 120 Q75 118 70 100 Q90 105 100 120" fill="#C8F135" />
+      </g>
+    </svg>
+  );
+}
+
+export function IsoLoop({ className = 'h-40 w-40' }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 200 200" fill="none" className={className} aria-hidden="true">
+      <g stroke="#0A0A0A" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+        {/* isometric infinity / loop */}
+        <path d="M40 100 Q40 60 80 60 Q120 60 100 100 Q80 140 120 140 Q160 140 160 100 Q160 60 120 60 Q80 60 100 100 Q120 140 80 140 Q40 140 40 100 Z" fill="#D9C6F0" />
+        {/* nodes */}
+        <circle cx="40" cy="100" r="8" fill="#F5F369" />
+        <circle cx="160" cy="100" r="8" fill="#F5F369" />
+        <circle cx="100" cy="100" r="7" fill="#0A0A0A" />
+        {/* arrow tip */}
+        <path d="M155 92 L162 100 L155 108" fill="none" />
+      </g>
+    </svg>
+  );
+}
+
+export function IsoBottle({ className = 'h-40 w-40' }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 200 200" fill="none" className={className} aria-hidden="true">
+      <g stroke="#0A0A0A" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+        {/* pump-cap bottle */}
+        <path d="M85 30 L115 30 L115 42 L85 42 Z" fill="#0A0A0A" />
+        <path d="M100 42 L100 55" />
+        <ellipse cx="100" cy="60" rx="10" ry="4" fill="#0A0A0A" />
+        <path d="M70 75 L70 165 Q70 175 100 176 Q130 175 130 165 L130 75 Q130 68 100 66 Q70 68 70 75 Z" fill="#F7C9BE" />
+        <ellipse cx="100" cy="75" rx="30" ry="6" />
+        {/* label */}
+        <rect x="75" y="105" width="50" height="40" fill="#F5F3EE" />
+        <path d="M82 120 L118 120 M82 128 L110 128 M82 136 L104 136" strokeWidth="1.5" />
+      </g>
+    </svg>
+  );
+}
+
+export function IsoBox({ className = 'h-40 w-40' }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 200 200" fill="none" className={className} aria-hidden="true">
+      <g stroke="#0A0A0A" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+        {/* isometric cube box */}
+        <path d="M100 50 L160 80 L160 140 L100 170 L40 140 L40 80 Z" fill="#F5F369" />
+        <path d="M100 50 L100 110 M100 110 L40 80 M100 110 L160 80" />
+        {/* label patch */}
+        <path d="M60 100 L100 120 L100 150 L60 130 Z" fill="#F5F3EE" />
+        <path d="M68 115 L92 127 M68 122 L88 132" strokeWidth="1.5" />
+      </g>
+    </svg>
+  );
+}
+
+export function IsoTube({ className = 'h-40 w-40' }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 200 200" fill="none" className={className} aria-hidden="true">
+      <g stroke="#0A0A0A" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+        {/* squeeze tube tilted */}
+        <path d="M50 60 L155 90 L150 110 L45 80 Z" fill="#D9C6F0" />
+        <path d="M155 90 L170 96 L170 104 L150 110" fill="#0A0A0A" />
+        <path d="M45 80 L40 82 L38 88 L38 92 L45 80" fill="#F5F369" />
+        <path d="M70 72 L140 92" strokeWidth="1.5" strokeDasharray="2 3" />
+      </g>
+    </svg>
+  );
+}
diff --git a/apps/shoploop-studio-site/components/lang.tsx b/apps/shoploop-studio-site/components/lang.tsx
index 1b0ca65..e4679eb 100644
--- a/apps/shoploop-studio-site/components/lang.tsx
+++ b/apps/shoploop-studio-site/components/lang.tsx
@@ -4,20 +4,23 @@ import { createContext, useContext, useEffect, useState } from 'react';
 
 export type Lang = 'hi' | 'en' | 'mr';
 
-export const COPY: Record<Lang, { h1: string; cta: string; font: string }> = {
+export const COPY: Record<Lang, { h1: string; sub: string; cta: string; font: string }> = {
   en: {
-    h1: 'Full-funnel positionless AI marketing for tabletop products.',
-    cta: 'Preview',
+    h1: 'Positionless marketing, for every tabletop SKU.',
+    sub: 'Shoploop is the content configuration engine for Shopify tabletop brands. Any product a customer can grip, rotate, and inspect — bottles, jars, tubes, tins, boxes — rendered in 3D, mutated by an ad-ops loop, published to your storefront and every ad network.',
+    cta: 'Get started',
     font: 'font-display',
   },
   hi: {
-    h1: 'टेबलटॉप उत्पादों के लिए पूर्ण-फ़नल पोज़िशनलेस AI मार्केटिंग।',
-    cta: 'पूर्वावलोकन',
+    h1: 'हर टेबलटॉप SKU के लिए पोज़िशनलेस मार्केटिंग।',
+    sub: 'शॉपिफाई टेबलटॉप ब्रांडों के लिए कंटेंट कॉन्फ़िगरेशन इंजन। कोई भी उत्पाद जिसे ग्राहक पकड़ सके, घुमा सके और परख सके — बोतलें, जार, ट्यूब, टिन, डिब्बे — 3D में रेंडर, ऐड-ऑप्स लूप से म्यूटेट, आपके स्टोर और हर ऐड नेटवर्क पर प्रकाशित।',
+    cta: 'शुरू करें',
     font: 'font-deva',
   },
   mr: {
-    h1: 'टेबलटॉप उत्पादनांसाठी संपूर्ण-फनेल पोझिशनलेस AI मार्केटिंग।',
-    cta: 'पूर्वावलोकन',
+    h1: 'प्रत्येक टेबलटॉप SKU साठी पोझिशनलेस मार्केटिंग।',
+    sub: 'शॉपिफाय टेबलटॉप ब्रँड्ससाठी कंटेंट कॉन्फिगरेशन इंजिन। कोणतेही उत्पादन जे ग्राहक पकडू, फिरवू आणि तपासू शकतो — बाटल्या, बरण्या, ट्यूब, डबे, खोकी — 3D मध्ये रेंडर, ॲड-ऑप्स लूपने म्युटेट, तुमच्या स्टोअरवर आणि प्रत्येक ॲड नेटवर्कवर प्रकाशित।',
+    cta: 'सुरुवात करा',
     font: 'font-deva',
   },
 };
@@ -49,7 +52,7 @@ export function LangToggle({ id }: { id: string }) {
       id={id}
       role="group"
       aria-label="Language selector"
-      className="flex items-center rounded-full border border-cream/20 bg-teal-900/60 p-0.5 backdrop-blur"
+      className="flex items-center rounded-full border border-ink/10 bg-white p-0.5"
     >
       {items.map((it) => (
         <button
@@ -59,10 +62,10 @@ export function LangToggle({ id }: { id: string }) {
           aria-label={it.aria}
           aria-pressed={lang === it.k}
           data-a2ui-action={`set-language-${it.k}`}
-          className={`min-w-[34px] rounded-full px-2.5 py-1 text-xs transition-colors duration-300 ${
+          className={`min-w-[38px] rounded-full px-3 py-1.5 text-[13px] transition-colors duration-200 ${
             lang === it.k
-              ? 'bg-amber-400 font-semibold text-teal-900'
-              : 'text-cream/70 hover:text-cream'
+              ? 'bg-butter font-bold text-ink'
+              : 'text-ink/60 hover:text-ink'
           } ${it.k === 'en' ? '' : 'font-deva'}`}
         >
           {it.label}
diff --git a/apps/shoploop-studio-site/tailwind.config.ts b/apps/shoploop-studio-site/tailwind.config.ts
index 9a96c60..ce07263 100644
--- a/apps/shoploop-studio-site/tailwind.config.ts
+++ b/apps/shoploop-studio-site/tailwind.config.ts
@@ -4,12 +4,23 @@ export default {
   theme: {
     extend: {
       colors: {
-        ink: '#12201f',
-        teal: { 900: '#0b2523', 800: '#0f322f', 700: '#144440', 500: '#1d6b64' },
-        amber: { 400: '#e8a33d', 500: '#d98c1f', 300: '#f0c274' },
-        gold: '#c98a2b',
-        cream: '#f7f2e7',
-        paper: '#fbf8f0',
+        // ─── surfaces ─────────────────────────────
+        cream: '#F5F3EE',       // warm off-white base (Grip)
+        paper: '#FAFAF8',       // near-white cards
+        butter: '#F5F369',      // Grip buttercream panel
+        lavender: '#D9C6F0',    // Grip lavender panel
+        lavenderTint: '#EDEDF5',
+        blush: '#F7C9BE',       // Grip coral/pink panel
+        night: '#0D0D0F',       // dark hero
+        sky: '#B8D4E8',         // GrowthLoop hero
+        // ─── text ─────────────────────────────────
+        ink: '#0A0A0A',
+        inkMuted: '#4A4A4A',
+        // ─── accents ──────────────────────────────
+        chartreuse: '#C8F135',
+        electric: '#2563EB',
+        indigo: '#6366F1',
+        coral: '#E14B3C',
       },
       fontFamily: {
         deva: ['var(--font-deva)', 'serif'],
@@ -17,6 +28,9 @@ export default {
         sans: ['var(--font-body)', 'system-ui', 'sans-serif'],
         mono: ['ui-monospace', 'SFMono-Regular', 'monospace'],
       },
+      borderRadius: {
+        panel: '32px',
+      },
     },
   },
   plugins: [],