Hero heading: animated brand mark (orbit ring, comet trail, sparks) matching the navbar; keep the mark's motion in mobile lite mode

ddiff --git a/public/css/style.css b/public/css/style.css
iindex 12a9f2f9..270fefed 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -14790,6 +14790,23 @@ a .arena-thread:hover { color: var(--text-primary); background: color-mix(in srg
  @keyframes bmCore { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.4); opacity: 1; } }
  @keyframes bmSpin { from { transform: rotate(0deg) scale(1); } 40% { transform: rotate(200deg) scale(1.2); } to { transform: rotate(360deg) scale(1); } }
  @media (prefers-reduced-motion: reduce) { .brand-mark svg, .bm-glow, .bm-edges, .bm-node, .bm-core { animation: none !important; } .bm-pk { display: none; } }
--.rs-lite .brand-mark svg, .rs-lite .bm-glow, .rs-lite .bm-node, .rs-lite .bm-core { animation: none; }
--.rs-lite .bm-pk { filter: none; }
++/* Lite mode keeps the cheap transform/opacity motion; only the drop-shadow filter goes. */
++.rs-lite .bm-pk, .rs-lite .bmh-spark { filter: none; }
++
++/* Hero version: same mark, bigger, with an orbit ring, comet trail and sparks */
++.brand-mark--hero { width: 1.05em; height: 1.05em; vertical-align: -0.16em; color: var(--accent); margin-right: 0.08em; }
++.brand-mark--hero svg { width: 100%; height: 100%; animation: bmFloat 5s ease-in-out infinite; }
++.brand-mark--hero .bm-edges { stroke: url(#bmh-grad); stroke-width: 2.4; }
++.brand-mark--hero .bm-node { stroke-width: 1.4; }
++.bmh-orbit { fill: none; stroke: currentColor; stroke-width: 0.9; stroke-dasharray: 3 5; opacity: 0.55; transform-box: fill-box; transform-origin: center; animation: bmhOrbit 9s linear infinite; }
++.bmh-trail { opacity: 0.55; } .bmh-trail2 { opacity: 0.3; }
++.bmh-spark { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; animation: bmhSpark 3.4s ease-out infinite; }
++.bmh-spark--2 { animation-delay: 1.1s; animation-name: bmhSpark2; } .bmh-spark--3 { animation-delay: 2.3s; animation-name: bmhSpark3; }
++.hero h1:hover .brand-mark--hero svg { animation: bmSpin 1s cubic-bezier(.2,1.5,.3,1) 1; }
++.hero h1:hover .bmh-orbit { animation-duration: 2s; opacity: 0.9; }
++@keyframes bmhOrbit { to { transform: rotate(360deg); } }
++@keyframes bmhSpark { 0% { opacity: 0; transform: translate(0,0) scale(0.6); } 10% { opacity: 1; } 60% { opacity: 0; transform: translate(11px,-14px) scale(1.4); } 100% { opacity: 0; } }
++@keyframes bmhSpark2 { 0% { opacity: 0; transform: translate(0,0) scale(0.6); } 10% { opacity: 1; } 60% { opacity: 0; transform: translate(-13px,-9px) scale(1.3); } 100% { opacity: 0; } }
++@keyframes bmhSpark3 { 0% { opacity: 0; transform: translate(0,0) scale(0.6); } 10% { opacity: 1; } 60% { opacity: 0; transform: translate(4px,15px) scale(1.2); } 100% { opacity: 0; } }
++@media (prefers-reduced-motion: reduce) { .bmh-orbit, .bmh-spark, .brand-mark--hero svg { animation: none !important; } .bmh-spark { display: none; } }
  @media (max-width: 600px) { .brand-mark { width: 26px; height: 26px; } .brand-mark svg { width: 25px; height: 25px; } }
ddiff --git a/public/index.html b/public/index.html
iindex e8e00361..be7b15e9 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -62,7 +62,7 @@
      </script>
  
      <!-- Stylesheets -->
--    <link rel="stylesheet" href="/css/style.css?v=161">
++    <link rel="stylesheet" href="/css/style.css?v=162">
      <link rel="stylesheet" href="/css/chat-shared.css?v=1">
      <link rel="stylesheet" href="/css/broadcast.css?v=11">
      <link rel="stylesheet" href="/css/cosmetics.css?v=2">
@@@ -224,7 +224,21 @@
              <div class="hero-collage" id="hero-collage" aria-hidden="true"></div>
              <div class="hero-scrim" aria-hidden="true"></div>
              <div class="hero-content">
--                <h1><i class="fa-solid fa-circle-nodes"></i> OpenVibe.Live</h1>
++                <h1><span class="brand-mark brand-mark--hero" aria-hidden="true"><svg viewBox="0 0 40 40">
++                    <defs><linearGradient id="bmh-grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="currentColor"/><stop offset="1" stop-color="currentColor" stop-opacity="0.5"/></linearGradient></defs>
++                    <circle class="bm-glow" cx="20" cy="22" r="18"/>
++                    <circle class="bmh-orbit" cx="20" cy="22" r="17.5"/>
++                    <path id="bmh-path" class="bm-edges" d="M20,7 L34,31 L6,31 Z"/>
++                    <circle class="bm-node bm-node--1" cx="20" cy="7" r="4.2"/>
++                    <circle class="bm-node bm-node--2" cx="34" cy="31" r="4.2"/>
++                    <circle class="bm-node bm-node--3" cx="6" cy="31" r="4.2"/>
++                    <circle class="bm-core" cx="20" cy="23" r="2.8"/>
++                    <circle class="bm-pk" r="2.1"><animateMotion dur="2.6s" repeatCount="indefinite"><mpath href="#bmh-path"/></animateMotion></circle>
++                    <circle class="bm-pk bmh-trail" r="1.6"><animateMotion dur="2.6s" begin="0.12s" repeatCount="indefinite"><mpath href="#bmh-path"/></animateMotion></circle>
++                    <circle class="bm-pk bmh-trail2" r="1.1"><animateMotion dur="2.6s" begin="0.24s" repeatCount="indefinite"><mpath href="#bmh-path"/></animateMotion></circle>
++                    <circle class="bm-pk bm-pk--2" r="1.6"><animateMotion dur="2.6s" begin="1.3s" repeatCount="indefinite"><mpath href="#bmh-path"/></animateMotion></circle>
++                    <circle class="bmh-spark" cx="20" cy="22" r="1.2"/><circle class="bmh-spark bmh-spark--2" cx="20" cy="22" r="1"/><circle class="bmh-spark bmh-spark--3" cx="20" cy="22" r="0.9"/>
++                </svg></span> OpenVibe.Live</h1>
                  <p class="hero-tagline">Live streaming for <span class="hero-rotate-wrap"><span class="hero-rotate" id="hero-rotate"></span></span></p>
                  <p class="hero-quip" id="hero-quip" aria-live="polite"></p>
                  <div class="hero-slogan-timer" id="hero-slogan-timer" hidden></div>