feat(justine): isolate design system — verbatim CSS + (justine) route group

- Add app/styles/justine/01-homepage.css: rules from 01_homepage.html scoped to [data-justine]
- Replace app/(marketing) with app/(justine): layout wraps data-justine + Plus Jakarta
- JustineHomePage/Nav/Footer: original class names (btn-ink, hero-grid, …) + inline styles from HTML
- Remove app/justine-marketing.css; move /features /pricing /privacy /terms under (justine)

Made-with: Cursor

marketing/components/justine/JustineNav.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+
+/** Nav from justine/01_homepage.html — classes defined in app/styles/justine/01-homepage.css */
+export function JustineNav() {
+  const [open, setOpen] = useState(false);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    document.body.style.overflow = "";
+  }, []);
+
+  const toggle = useCallback(() => {
+    setOpen((o) => {
+      const next = !o;
+      document.body.style.overflow = next ? "hidden" : "";
+      return next;
+    });
+  }, []);
+
+  useEffect(() => () => {
+    document.body.style.overflow = "";
+  }, []);
+
+  return (
+    <>
+      <nav>
+        <Link href="/" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
+          <div
+            className="logo-box"
+            style={{
+              width: 30,
+              height: 30,
+              background: "linear-gradient(135deg,#2E2A5E,#4338CA)",
+              borderRadius: 7,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <span className="f" style={{ fontSize: 15, fontWeight: 700, color: "#FFFFFF" }}>
+              V
+            </span>
+          </div>
+          <span className="f" style={{ fontSize: 19, fontWeight: 700, color: "var(--ink)", letterSpacing: "-0.02em" }}>
+            vibn
+          </span>
+        </Link>
+
+        <div className="nav-links">
+          <Link href="/#how-it-works" style={{ fontSize: 14, color: "var(--muted)", textDecoration: "none" }}>
+            How it works
+          </Link>
+          <Link href="/pricing" style={{ fontSize: 14, color: "var(--muted)", textDecoration: "none" }}>
+            Pricing
+          </Link>
+          <Link href="/features" style={{ fontSize: 14, color: "var(--muted)", textDecoration: "none" }}>
+            Stories
+          </Link>
+          <span style={{ fontSize: 14, color: "var(--muted)" }}>Blog</span>
+        </div>
+
+        <div className="nav-right-btns" style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <Link href="/auth" style={{ fontSize: 14, color: "#6366F1", fontWeight: 600, textDecoration: "none" }}>
+            Log in
+          </Link>
+          <Link href="/auth">
+            <button type="button" className="btn-ink">
+              Get started free
+            </button>
+          </Link>
+        </div>
+
+        <button
+          type="button"
+          className={`hamburger ${open ? "open" : ""}`}
+          aria-label={open ? "Close menu" : "Open menu"}
+          aria-expanded={open}
+          onClick={toggle}
+        >
+          <span />
+          <span />
+          <span />
+        </button>
+      </nav>
+
+      <div className={`mobile-menu ${open ? "open" : ""}`}>
+        <Link href="/#how-it-works" onClick={close}>
+          How it works
+        </Link>
+        <Link href="/pricing" onClick={close}>
+          Pricing
+        </Link>
+        <Link href="/features" onClick={close}>
+          Stories
+        </Link>
+        <Link href="#" onClick={(e) => { e.preventDefault(); close(); }}>
+          Blog
+        </Link>
+        <Link href="/auth" style={{ color: "#6366F1", fontWeight: 600 }} onClick={close}>
+          Log in
+        </Link>
+        <div className="mobile-menu-cta">
+          <Link href="/auth" onClick={close} style={{ display: "block", width: "100%" }}>
+            <button type="button" className="btn-ink-lg" style={{ width: "100%" }}>
+              Get started free
+            </button>
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+}