feat(audio,site): calm santoor default music + card-fan logo site redesign

- audio: default background music is now the santoor track (calm Persian),
  rebuilt as a real plucked-santoor loop — fast metallic attack, shimmer
  overtones, soft tonic drone, longer Dastgah-e-Shur phrase
- site: marketing logo is now the app's card-fan icon (Logo.tsx + icon.svg);
  hero features the big logo with gold halo, floating suit motifs, and
  polished section dividers

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

site/components/Logo.tsx

@@ -1,24 +1,67 @@
-export function Logo({ size = 36 }: { size?: number }) {
+/**
+ * Brand mark — the app's card-fan icon (mirrors public/icon.svg): three gold-edged
+ * playing cards fanned out, a spade on the face card. Scales cleanly from the nav
+ * (≈34px) to the hero (≈160px). `glow` adds a soft gold halo for hero use.
+ */
+export function Logo({ size = 36, glow = false }: { size?: number; glow?: boolean }) {
   return (
-    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" aria-hidden>
-      <rect x="6" y="6" width="88" height="88" rx="22" fill="url(#lg)" stroke="#d4af37" strokeWidth="3" />
-      <text
-        x="50"
-        y="62"
-        textAnchor="middle"
-        fontSize="46"
-        fontWeight="900"
-        fill="#d4af37"
-        fontFamily="Vazirmatn Variable, sans-serif"
-      >
-        و
-      </text>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 512 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      style={glow ? { filter: "drop-shadow(0 10px 36px rgba(212,175,55,0.35))" } : undefined}
+    >
       <defs>
-        <linearGradient id="lg" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
-          <stop stopColor="#111a33" />
-          <stop offset="1" stopColor="#070b18" />
+        <radialGradient id="frbg" cx="50%" cy="36%" r="78%">
+          <stop offset="0" stopColor="#16284f" />
+          <stop offset="0.62" stopColor="#0a142e" />
+          <stop offset="1" stopColor="#060c1f" />
+        </radialGradient>
+        <linearGradient id="frgold" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#f6e4a0" />
+          <stop offset="0.5" stopColor="#d4af37" />
+          <stop offset="1" stopColor="#b8860b" />
+        </linearGradient>
+        <linearGradient id="frface" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#fffdf7" />
+          <stop offset="1" stopColor="#f1e6cd" />
+        </linearGradient>
+        <linearGradient id="frnavy" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0" stopColor="#1d356a" />
+          <stop offset="1" stopColor="#0a142e" />
         </linearGradient>
       </defs>
+
+      <rect width="512" height="512" rx="116" fill="url(#frbg)" />
+      <circle cx="256" cy="196" r="185" fill="#2dd4bf" opacity="0.07" />
+      <rect x="30" y="30" width="452" height="452" rx="100" fill="none" stroke="url(#frgold)" strokeWidth="6" opacity="0.6" />
+
+      <g transform="rotate(-25 256 396)">
+        <rect x="182" y="180" width="148" height="210" rx="16" fill="url(#frnavy)" stroke="url(#frgold)" strokeWidth="4" />
+        <rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" strokeWidth="2" opacity="0.45" />
+        <path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75" />
+      </g>
+      <g transform="rotate(25 256 396)">
+        <rect x="182" y="180" width="148" height="210" rx="16" fill="url(#frnavy)" stroke="url(#frgold)" strokeWidth="4" />
+        <rect x="198" y="196" width="116" height="178" rx="10" fill="none" stroke="#d4af37" strokeWidth="2" opacity="0.45" />
+        <path d="M256 250 l16 35 -16 35 -16 -35 z" fill="#d4af37" opacity="0.75" />
+      </g>
+
+      <g transform="translate(0 -24)">
+        <rect x="181" y="178" width="150" height="212" rx="16" fill="url(#frface)" stroke="url(#frgold)" strokeWidth="5" />
+        <rect x="193" y="190" width="126" height="188" rx="10" fill="none" stroke="#d4af37" strokeWidth="2" />
+        <g transform="translate(256 268) scale(1.45)">
+          <path
+            d="M0,-44 C0,-44 -42,-6 -42,16 C-42,30 -31,40 -18,40 C-11,40 -5,37 0,32 C-2,44 -10,52 -20,55 L20,55 C10,52 2,44 0,32 C5,37 11,40 18,40 C31,40 42,30 42,16 C42,-6 0,-44 0,-44 Z"
+            fill="url(#frgold)"
+            stroke="#7a5a00"
+            strokeWidth="1.5"
+          />
+        </g>
+      </g>
     </svg>
   );
 }