feat(coming-soon): premium themed redesign with launch countdown

Full refactor of the maintenance/coming-soon page for all locales (de/en/ar,
RTL-aware) with a refined, theme-aware (light + dark) premium composition:
glass panel, live status indicator, hero title, description, launch countdown
and CTAs. Reuses the existing hero/motion system; no new dependencies.

- Add components/site/launch-countdown.tsx: hydration-safe client countdown
  (days/hours/minutes/seconds), localized labels, Arabic-aware typography,
  "launched" fallback when the target passes.
- Rewrite app/[locale]/coming-soon/page.tsx around the countdown and a single
  easy-to-edit LAUNCH_DATE_ISO constant (default ~45 days out).
- Add comingSoon i18n keys (status, countdownLabel, unit labels, launched)
  to en/de/ar.

components/site/launch-countdown.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+type CountdownLabels = {
+  days: string;
+  hours: string;
+  minutes: string;
+  seconds: string;
+};
+
+type LaunchCountdownProps = {
+  /** Target launch date as an ISO string. */
+  targetIso: string;
+  labels: CountdownLabels;
+  /** Shown once the target date has passed. */
+  launchedLabel: string;
+  /** Arabic script: drop uppercase/letter-spacing on labels. */
+  arabic?: boolean;
+  className?: string;
+};
+
+type Remaining = {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  done: boolean;
+};
+
+function computeRemaining(target: number): Remaining {
+  const diff = target - Date.now();
+
+  if (diff <= 0) {
+    return { days: 0, hours: 0, minutes: 0, seconds: 0, done: true };
+  }
+
+  const totalSeconds = Math.floor(diff / 1000);
+
+  return {
+    days: Math.floor(totalSeconds / 86400),
+    hours: Math.floor((totalSeconds % 86400) / 3600),
+    minutes: Math.floor((totalSeconds % 3600) / 60),
+    seconds: totalSeconds % 60,
+    done: false,
+  };
+}
+
+function pad(value: number): string {
+  return value.toString().padStart(2, "0");
+}
+
+export function LaunchCountdown({
+  targetIso,
+  labels,
+  launchedLabel,
+  arabic = false,
+  className,
+}: LaunchCountdownProps) {
+  // Start null so the server and first client render match (no hydration
+  // mismatch); the real value is filled in on mount and every second after.
+  const [remaining, setRemaining] = useState<Remaining | null>(null);
+
+  useEffect(() => {
+    const target = new Date(targetIso).getTime();
+
+    if (Number.isNaN(target)) {
+      return;
+    }
+
+    setRemaining(computeRemaining(target));
+
+    const interval = window.setInterval(() => {
+      setRemaining(computeRemaining(target));
+    }, 1000);
+
+    return () => window.clearInterval(interval);
+  }, [targetIso]);
+
+  if (remaining?.done) {
+    return (
+      <p
+        className={cn(
+          "text-sm font-medium tracking-[0.02em] text-[hsl(var(--hero-ink))]",
+          className,
+        )}
+      >
+        {launchedLabel}
+      </p>
+    );
+  }
+
+  const units = [
+    { key: "days", label: labels.days, value: remaining?.days },
+    { key: "hours", label: labels.hours, value: remaining?.hours },
+    { key: "minutes", label: labels.minutes, value: remaining?.minutes },
+    { key: "seconds", label: labels.seconds, value: remaining?.seconds },
+  ];
+
+  return (
+    <div
+      className={cn("flex items-start justify-center gap-2.5 sm:gap-3.5", className)}
+      role="timer"
+      aria-live="off"
+    >
+      {units.map((unit) => (
+        <div key={unit.key} className="flex flex-col items-center gap-2.5">
+          <div className="group relative flex h-[4.5rem] w-[4.5rem] items-center justify-center overflow-hidden rounded-[calc(var(--radius-nested)+2px)] border border-foreground/10 bg-background/55 shadow-[var(--shadow-sm)] backdrop-blur-[18px] dark:border-foreground/12 dark:bg-background/20 sm:h-24 sm:w-24">
+            <span
+              aria-hidden
+              className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-foreground/25 to-transparent"
+            />
+            <span className="text-3xl font-semibold tabular-nums text-[hsl(var(--hero-ink))] sm:text-[2.6rem]">
+              {unit.value === undefined ? "--" : pad(unit.value)}
+            </span>
+          </div>
+          <span
+            className={cn(
+              "text-[0.68rem] font-medium text-foreground/55 sm:text-xs",
+              arabic ? "tracking-normal" : "uppercase tracking-[0.16em]",
+            )}
+          >
+            {unit.label}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}