Rebuild the site to the Claude Design drafts

Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the
project's own design system: tier-2 tokens, the published type roles, logical
properties throughout, and both locales.

Surfaces
- The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts
  do; the body previously painted the band colour, so every band was a step
  too light.
- A card is drawn one step off whatever it stands on (#1D1D1B on the ground,
  #141413 inside a band). Components paint --surface-card and a band re-points
  it for its subtree, so a card can never come out the same colour as its band.

Shell
- Nav: translucent ground with a blur, chevrons on group triggers, an accent
  rule under the current section, the drafts' compact dropdown card, and an
  EN | AR toggle in place of the globe menu.
- Footer: the drafts' four-column grid, one-line brand text, Facebook as a
  bordered button, the EU lockup, the implemented-by row and the funding
  disclaimer.

Pages
- Home: hero with counting figures, launch band, three areas of change,
  newsroom, FAQ accordion and the consortium band.
- The nine interior pages rebuilt and then audited section by section against
  their drafts.
- Applications: the three-step application form now posts real submissions to
  the Strapi `application` type, validated server-side and working without
  JavaScript.

Motion
- Every animation in the drafts, as classes in _page-kit/motion.css: staggered
  entrances, scroll-driven reveals, the drifting washes (each page carries its
  own geometry), the sheen, the counting figures and the accordion. The
  drafts' coloured hover glow is deliberately not shipped.

CMS
- New `faq` collection type behind the home page's accordion.
- `role` added to the consortium member component so an editor can supply the
  chip and the deliverable separately.

Content
- No invented figure, date, name or commitment ships: the five-working-day
  reply, the placeholder email and Facebook handle, the sample news, events,
  publications and FAQs, the invented application rules and the TBD counters
  are all withheld pending real content. Figures that survived (3 consortium
  partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec
  2027) are verified against docs/ and the bundled draft copy.

Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20
page/locale URLs render 200 through the built SSR handler, including with the
CMS unreachable; no raw hex or physical-direction utility in components or
routes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

apps/web/app/components/ui/EuBadge/EuBadge.tsx

@@ -0,0 +1,112 @@
+import { getDirection, type Locale } from "../LanguageSwitcher";
+
+/* Exported from Figma assets/eu-en (224:11275) and assets/eu-en - darkBg
+   (238:2325). The source files are downscaled copies of the Figma exports. */
+const EMBLEM_SRC = {
+  light: "/assets/eu-flag.png",
+  dark: "/assets/eu-flag-dark.png",
+} as const;
+
+const EMBLEM_INTRINSIC_WIDTH = 192;
+const EMBLEM_INTRINSIC_HEIGHT = 128;
+
+/**
+ * Drawn emblem box per size. "md" is the 48x32 the navigation and the drawer
+ * use; "sm" is the 36x24 the home hero draws above the wordmark (478:15951).
+ * Only the emblem changes - see the note on the statement below.
+ */
+const EMBLEM_BOX = {
+  md: "h-[32px] w-[48px]",
+  sm: "h-[24px] w-[36px]",
+} as const;
+
+export type EuBadgeSize = keyof typeof EMBLEM_BOX;
+
+/** Which tier-2 surface the badge is sitting on. `:root` is the dark one. */
+export type EuBadgeSurface = keyof typeof EMBLEM_SRC;
+
+export interface EuBadgeProps {
+  /** "Funded by the European Union", already in the reader's language. */
+  statement: string;
+  /** Alt text for the emblem. Empty when the statement is rendered beside it. */
+  emblemAlt?: string;
+  /** Language of `statement` - drives the font switch and the text direction. */
+  locale: Locale;
+  surface: EuBadgeSurface;
+  /** "md" (48x32) by default; "sm" (36x24) for the hero lockup. */
+  size?: EuBadgeSize;
+  className?: string;
+}
+
+/**
+ * The mandatory EU visibility lockup: emblem + funding statement.
+ *
+ * The lockup itself is pinned to `dir="ltr"` so the emblem always leads, which
+ * is how the Arabic navigation frame (334:526) draws it; only the statement
+ * carries the reader's own direction. A mirroring ancestor still moves the
+ * whole badge from the inline start to the inline end in Arabic.
+ *
+ * DEVIATION FROM FIGMA (colour): the design sets the statement in EU reflex
+ * blue (hex 0f2a8e). A raw hex is not permitted in a component here, and there
+ * is no semantic token for a third-party brand colour, so the statement uses
+ * --text-primary. It stays legible on both surfaces and the emblem still
+ * carries the EU colours. Add a tier-2 token if the blue has to come back.
+ *
+ * DEVIATION FROM FIGMA (type): the hero badge sets the statement at 10px. The
+ * type scale has no 10px role and a raw font-size is not permitted, so both
+ * sizes render the statement at `label-md` (12px). The lockup is then a little
+ * taller than the 24px emblem at "sm"; it is also more legible, which EU
+ * visibility guidance asks for. Add a tier-2 role if 10px is required.
+ */
+export function EuBadge({
+  statement,
+  emblemAlt = "",
+  locale,
+  surface,
+  size = "md",
+  className,
+}: EuBadgeProps) {
+  return (
+    <div
+      dir="ltr"
+      className={["flex shrink-0 items-center gap-2xs", className]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <img
+        src={EMBLEM_SRC[surface]}
+        alt={emblemAlt}
+        width={EMBLEM_INTRINSIC_WIDTH}
+        height={EMBLEM_INTRINSIC_HEIGHT}
+        loading="eager"
+        decoding="async"
+        draggable={false}
+        className={`block shrink-0 ${EMBLEM_BOX[size]}`}
+      />
+      <span
+        lang={locale}
+        dir={getDirection(locale)}
+        className="label-md block w-[96px] text-[var(--text-primary)]"
+      >
+        {statement}
+      </span>
+    </div>
+  );
+}
+
+export default EuBadge;
+
+/* ---------------------------------------------------------------------------
+   USAGE
+   ---------------------------------------------------------------------------
+   // In the mobile drawer, on the dark surface:
+   <EuBadge statement={t("site.euStatement")} locale="en" surface="dark" />
+
+   // Above the home hero wordmark, at the smaller emblem size:
+   <EuBadge
+     size="sm"
+     statement={t("site.euStatement")}
+     locale={locale}
+     surface="dark"
+   />
+   ------------------------------------------------------------------------ */

apps/web/app/components/ui/EuBadge/index.ts

@@ -0,0 +1,2 @@
+export { EuBadge, default } from "./EuBadge";
+export type { EuBadgeProps, EuBadgeSize, EuBadgeSurface } from "./EuBadge";