feat(frontend): landing redesign, mock/fake-data cleanup, Safari fix

Landing:
- Rewrote all landing copy (ru/en): removed the tracked-caps eyebrow
  chrome pattern everywhere, active-voice player-facing text
- ThemeStrip: full-bleed live-recolored ClickGui window instead of a
  boxed swatch panel; HudPlayground: full-size real HUD screen
- ShowcaseTeaser: dropped the fake "example" fallback cards, shows an
  honest empty state when there aren't 3 real configs yet
- Fixed VoxelScene parallax leaking outside the hero into the HUD
  section

Data accuracy: the module list/counts advertised InvisESP, BlockESP
and FakeLag — all three were removed from the mod earlier this
session as cheat modules. Corrected the catalogue and the 88/52
module-count claims to the real 86/50.

Design QOL pass: removed the same eyebrow-label chrome from the site
footer; replaced plausible-looking fake share codes (howItWorks demo
slots, the chat command typing demo) with an explicit placeholder
string so they read as illustration, not fabricated real data.

Perf: promoted .lv-lower-bg onto its own compositor layer
(will-change/translateZ) — a full-height, multi-gradient, masked,
continuously-animated background layer was repainting on every
scroll tick in Safari.

Claude-Session: https://claude.ai/code/session_01F1M1Jic1wTSn4igUENynmZ

frontend/src/features/landing/CommandHero.tsx

@@ -1,37 +1,39 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { prefersReducedMotion } from '@shared/motion/reducedMotion'
 import { ButtonLink } from '@shared/ui/Button'
 import { useSession } from '../auth/session'
+import { useInView } from './effects/useInView'
+import '@features/landing/styles/sections.css'
 
-const COMMAND = '%config load 7KQ3M9XA'
+// A placeholder code, not a plausible real one — this types out a UI demo, not live data.
+const COMMAND = '%config load ••••••••'
 const TYPE_DELAY_MS = 60
 
-
+/** Cloud configs, told through the one thing a player actually does: a command in the game chat. */
 export function CommandHero() {
   const { t } = useTranslation('landing')
   const { status } = useSession()
 
   return (
-    <section className="relative flex flex-col gap-6 pb-16 pt-20 sm:pt-28">
-      <span className="font-code text-xs uppercase tracking-[0.2em] text-ice">{t('cloud.eyebrow')}</span>
-      <h2 className="text-[2rem] leading-[1.1] sm:text-[2.8rem]">
-        {t('cloud.headlinePart1')}
-        {' '}<br className="hidden lg:inline" />
-        <span className="text-ice">{t('cloud.headlinePart2')}</span>
-      </h2>
-      <p className="max-w-[60ch] text-lg text-frost">{t('cloud.subtitle')}</p>
-      <div className="flex flex-wrap items-center gap-3">
-        {status === 'authenticated' ? (
-          <ButtonLink to="/configs" className="px-8 py-3 text-base">{t('cloud.ctaAuthenticated')}</ButtonLink>
-        ) : (
-          <ButtonLink to="/register" className="px-8 py-3 text-base">{t('cloud.ctaAnonymous')}</ButtonLink>
-        )}
-        <ButtonLink to="/showcase" variant="quiet" className="px-8 py-3 text-base">
-          {t('cloud.ctaShowcase')}
-        </ButtonLink>
-      </div>
+    <section aria-labelledby="cloud-title" className="relative flex flex-col gap-8 pb-16 pt-12 sm:pt-20">
       <ChatBar />
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] lg:gap-14">
+        <h2 id="cloud-title" className="text-[1.75rem] leading-[1.1] sm:text-[2.4rem]">{t('cloud.title')}</h2>
+        <div className="flex min-w-0 flex-col items-start gap-5">
+          <p className="max-w-[52ch] text-lg text-frost">{t('cloud.subtitle')}</p>
+          <div className="flex flex-wrap items-center gap-3">
+            {status === 'authenticated' ? (
+              <ButtonLink to="/configs" className="px-8 py-3 text-base">{t('cloud.ctaAuthenticated')}</ButtonLink>
+            ) : (
+              <ButtonLink to="/register" className="px-8 py-3 text-base">{t('cloud.ctaAnonymous')}</ButtonLink>
+            )}
+            <ButtonLink to="/showcase" variant="quiet" className="px-8 py-3 text-base">
+              {t('cloud.ctaShowcase')}
+            </ButtonLink>
+          </div>
+        </div>
+      </div>
     </section>
   )
 }
@@ -40,28 +42,30 @@ function ChatBar() {
   const { t } = useTranslation('landing')
   const [typed, setTyped] = useState(() => (prefersReducedMotion() ? COMMAND.length : 0))
   const done = typed >= COMMAND.length
+  // Typing starts once the chat is on screen, so the player actually sees the command go in.
+  const ref = useRef<HTMLDivElement>(null)
+  const inView = useInView(ref, { once: true, rootMargin: '-80px' })
 
   useEffect(() => {
-    if (done) return
+    if (done || !inView) return
     const t = setInterval(() => setTyped((n) => Math.min(n + 1, COMMAND.length)), TYPE_DELAY_MS)
     return () => clearInterval(t)
-  }, [done])
+  }, [done, inView])
 
   return (
     <div
+      ref={ref}
       role="img"
       aria-label={t('cloud.chatAriaLabel')}
-      className="mt-6 flex min-h-[4.5rem] w-full max-w-xl flex-col justify-end gap-1 rounded-md border border-white/5 bg-black/55 px-3 py-2 font-code text-base text-snow shadow-[0_0_40px_-12px_var(--page-accent-glow)]"
+      className="lv-chat flex min-h-[5.5em] w-full flex-col justify-end gap-1 px-4 py-3 font-code text-snow sm:px-6"
     >
       <p aria-hidden="true" className="whitespace-pre-wrap break-all">
         {COMMAND.slice(0, typed)}
         {done ? null : <span className="animate-pulse text-frost">▌</span>}
       </p>
-      {done ? (
-        <p aria-hidden="true" className="text-ice">
-          {t('cloud.chatConfirmation')}
-        </p>
-      ) : null}
+      <p aria-hidden="true" className={done ? 'text-ice' : 'invisible'}>
+        {t('cloud.chatConfirmation')}
+      </p>
     </div>
   )
 }