Subscription store, paywall on locked units, profile subscription bar, Tadrisino branding

- Store opens with two choices (subscription / question packs); 3- and 6-month cards
  show per-month price and saving.
- Units that need a subscription show a crown badge and open the store; a 402 from
  the quiz goes there too. «ادامه بده» skips locked units.
- Profile: subscription card with an animated days-left bar (planDurationDays).
- BrandMark (SVG) on splash, home header and footer; copyright footer; floating math
  glyphs on splash. CSS transform/opacity only; honours reduced motion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/screens/SplashScreen.tsx

@@ -1,21 +1,35 @@
 import { motion } from 'motion/react';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
+import { BrandMark } from '@/components/BrandMark';
 
-/** تا وقتی نشستِ قبلی بررسی می‌شود نمایش داده می‌شود. */
+/** نمادهای ریاضی که آرام از پایینِ صفحه بالا می‌روند؛ فقط CSS (transform/opacity)، بی‌بارِ اضافه. */
+const GLYPHS = [
+  { c: 'π', x: 12, d: 0 }, { c: '+', x: 28, d: 2.6 }, { c: '√', x: 46, d: 1.2 },
+  { c: '÷', x: 64, d: 3.8 }, { c: '∑', x: 80, d: 0.6 }, { c: '×', x: 90, d: 4.6 },
+];
+
+/** تا وقتی نشستِ قبلی بررسی می‌شود نمایش داده می‌شود؛ عمداً تأخیرِ ساختگی ندارد. */
 export function SplashScreen() {
   return (
-    <div className="flex h-full flex-col items-center justify-center bg-rose">
+    <div className="relative flex h-full flex-col items-center justify-center overflow-hidden bg-rose">
+      <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2">
+        {GLYPHS.map((g) => (
+          <span key={g.c} className="rise absolute bottom-0 text-3xl font-black text-white/60" style={{ left: `${g.x}%`, animationDelay: `${g.d}s` }}>
+            {g.c}
+          </span>
+        ))}
+      </div>
       <motion.div
         initial={{ scale: 0.5, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
         transition={{ type: 'spring', stiffness: 220, damping: 18 }}
-        className="flex flex-col items-center gap-4"
+        className="relative flex flex-col items-center gap-4"
       >
         <div className="rounded-[32px] bg-white/15 p-6 backdrop-blur-sm">
           <SeyarMascot char="sigma" mood="happy" size={130} />
         </div>
-        <h1 className="text-3xl font-black text-white">تدریسینو</h1>
-        <p className="text-sm text-white/75">ریاضی، قدم‌به‌قدم، با همراه‌هات</p>
+        <BrandMark size={44} />
+        <p className="text-sm text-white/80">ریاضی، قدم‌به‌قدم، از روی کتابِ درسی</p>
       </motion.div>
       <motion.div
         animate={{ rotate: 360 }}