diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx
index 93308e803..ebb0abf69 100644
--- a/client/src/pages/LoginPage.tsx
+++ b/client/src/pages/LoginPage.tsx
@@ -1,28 +1,41 @@
 import {
-  BookMarked,
-  CheckSquare,
   ChevronDown,
   Eye,
   EyeOff,
   Fingerprint,
-  FolderOpen,
   Globe,
   KeyRound,
   Lock,
   Mail,
-  Map,
   Plane,
-  Route,
   Shield,
   User,
-  Users,
-  Wallet,
-  Zap,
 } from 'lucide-react';
 import React from 'react';
 import ToggleSwitch from '../components/Settings/ToggleSwitch';
 import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n';
 import { useLogin } from './login/useLogin';
+import LoginWorld from './login/LoginWorld';
+
+/** Fixed so the sky does not reshuffle on every render. */
+const STARFIELD = [
+  { top: 6, left: 12, size: 1, opacity: 0.3, delay: 0 },
+  { top: 11, left: 68, size: 2, opacity: 0.22, delay: 1.4 },
+  { top: 17, left: 34, size: 1, opacity: 0.35, delay: 2.6 },
+  { top: 22, left: 84, size: 1, opacity: 0.25, delay: 0.7 },
+  { top: 28, left: 19, size: 2, opacity: 0.2, delay: 3.1 },
+  { top: 33, left: 57, size: 1, opacity: 0.32, delay: 1.9 },
+  { top: 39, left: 91, size: 1, opacity: 0.24, delay: 2.2 },
+  { top: 46, left: 8, size: 1, opacity: 0.28, delay: 0.4 },
+  { top: 52, left: 73, size: 2, opacity: 0.18, delay: 3.6 },
+  { top: 58, left: 42, size: 1, opacity: 0.3, delay: 1.1 },
+  { top: 64, left: 88, size: 1, opacity: 0.26, delay: 2.9 },
+  { top: 71, left: 26, size: 1, opacity: 0.22, delay: 0.9 },
+  { top: 77, left: 63, size: 1, opacity: 0.3, delay: 3.3 },
+  { top: 83, left: 15, size: 2, opacity: 0.2, delay: 1.7 },
+  { top: 88, left: 79, size: 1, opacity: 0.27, delay: 2.4 },
+  { top: 93, left: 48, size: 1, opacity: 0.23, delay: 0.2 },
+];
 
 export default function LoginPage(): React.ReactElement {
   const { t, language } = useTranslation();
@@ -96,190 +109,110 @@ export default function LoginPage(): React.ReactElement {
 
   if (showTakeoff) {
     return (
-      <div className="takeoff-overlay" style={{ position: 'fixed', inset: 0, zIndex: 99999, overflow: 'hidden' }}>
-        {/* Sky gradient */}
-        <div className="takeoff-sky" style={{ position: 'absolute', inset: 0 }} />
-
-        {/* Stars */}
-        {Array.from({ length: 60 }, (_, i) => (
-          <div
-            key={i}
-            className="takeoff-star"
-            style={{
-              position: 'absolute',
-              width: Math.random() > 0.7 ? 3 : 1.5,
-              height: Math.random() > 0.7 ? 3 : 1.5,
-              borderRadius: '50%',
-              background: 'white',
-              top: `${Math.random() * 100}%`,
-              left: `${Math.random() * 100}%`,
-              animationDelay: `${0.3 + Math.random() * 0.5}s, ${Math.random() * 1}s`,
-            }}
-          />
-        ))}
-
-        {/* Clouds rushing past */}
-        {[0, 1, 2, 3, 4].map((i) => (
-          <div
-            key={i}
-            className="takeoff-cloud"
-            style={{
-              position: 'absolute',
-              width: 120 + i * 40,
-              height: 40 + i * 10,
-              borderRadius: '50%',
-              background: 'rgba(255,255,255,0.15)',
-              filter: 'blur(8px)',
-              right: -200,
-              top: `${25 + i * 12}%`,
-              animationDelay: `${0.3 + i * 0.25}s`,
-            }}
-          />
-        ))}
-
-        {/* Speed lines */}
-        {Array.from({ length: 12 }, (_, i) => (
-          <div
-            key={i}
-            className="takeoff-speedline"
-            style={{
-              position: 'absolute',
-              width: 80 + Math.random() * 120,
-              height: 1.5,
-              background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
-              top: `${10 + Math.random() * 80}%`,
-              right: -200,
-              animationDelay: `${0.5 + i * 0.12}s`,
-            }}
-          />
-        ))}
-
-        {/* Plane */}
-        <div
-          className="takeoff-plane"
-          style={{ position: 'absolute', left: '50%', bottom: '10%', transform: 'translate(-50%, 0)' }}
-        >
-          <svg viewBox="0 0 480 120" style={{ width: 200, filter: 'drop-shadow(0 0 20px rgba(255,255,255,0.3))' }}>
-            <g fill="white" transform="translate(240,60) rotate(-12)">
-              <ellipse cx="0" cy="0" rx="120" ry="12" />
-              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
-              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
-              <path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
-              <path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
-              <ellipse cx="60" cy="0" rx="18" ry="8" />
-            </g>
-          </svg>
+      <div
+        className="takeoff-overlay"
+        style={{ position: 'fixed', inset: 0, zIndex: 99999, overflow: 'hidden', background: '#070c1a' }}
+      >
+        {/* Signing in picks up exactly where the login panel left off: the same dot
+            map, except now every route departs at once. The network finishing is
+            the moment — no separate imagery, no plane flying off alone. */}
+        <div className="takeoff-world">
+          <LoginWorld variant="takeoff" />
         </div>
 
-        {/* Contrail */}
-        <div
-          className="takeoff-trail"
-          style={{
-            position: 'absolute',
-            left: '50%',
-            bottom: '8%',
-            width: 3,
-            height: 0,
-            background: 'linear-gradient(to top, transparent, rgba(255,255,255,0.5))',
-            transformOrigin: 'bottom center',
-          }}
-        />
+        {/* The colour rises with the departures rather than sitting there from the start. */}
+        <div className="takeoff-aurora takeoff-aurora-a" />
+        <div className="takeoff-aurora takeoff-aurora-b" />
 
-        {/* Logo fade in + burst */}
-        <div
-          className="takeoff-logo"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 8,
-          }}
-        >
-          <img src="/logo-light.svg" alt="TREK" style={{ height: 72 }} />
+        <div className="takeoff-mark">
+          <img src="/logo-light.svg" alt="TREK" style={{ height: 'clamp(58px, 5.2vw, 84px)' }} />
           <p
             style={{
-              margin: 0,
-              fontSize: 'calc(20px * var(--fs-scale-title, 1))',
-              color: 'rgba(255,255,255,0.6)',
+              margin: '12px 0 0',
+              fontSize: 'calc(clamp(15px, 1.35vw, 21px) * var(--fs-scale-title, 1))',
+              color: 'rgba(255,255,255,0.62)',
               fontFamily: "'MuseoModerno', sans-serif",
               textTransform: 'lowercase',
               whiteSpace: 'nowrap',
+              textShadow: '0 2px 10px rgba(4,8,20,0.6)',
             }}
           >
             {t('login.tagline')}
           </p>
         </div>
 
+        {/* Hands over to the app instead of cutting to it. */}
+        <div className="takeoff-veil" />
+
         <style>{`
-          .takeoff-sky {
-            background: linear-gradient(to top, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #0a0a23 100%);
-            animation: skyShift 2.6s ease-in-out forwards;
-          }
-          @keyframes skyShift {
-            0%   { background: linear-gradient(to top, #0a0a23 0%, #0f172a 40%, #111827 100%); }
-            100% { background: linear-gradient(to top, #000011 0%, #000016 50%, #000011 100%); }
-          }
-
-          .takeoff-star {
+          .takeoff-world {
+            position: absolute;
+            inset: 0;
             opacity: 0;
-            animation: starAppear 0.5s ease-out forwards, starTwinkle 2s ease-in-out infinite alternate;
+            animation: takeoffWorld 2600ms cubic-bezier(0.22,1,0.36,1) forwards;
           }
-          @keyframes starAppear {
-            0%   { opacity: 0; transform: scale(0); }
-            100% { opacity: 0.7; transform: scale(1); }
-          }
-          @keyframes starTwinkle {
-            0%   { opacity: 0.3; }
-            100% { opacity: 0.9; }
+          @keyframes takeoffWorld {
+            0%   { opacity: 0; transform: scale(1.14); }
+            18%  { opacity: 1; }
+            100% { opacity: 1; transform: scale(1); }
           }
 
-          .takeoff-cloud {
-            animation: cloudRush 0.6s ease-in forwards;
-          }
-          @keyframes cloudRush {
-            0%   { right: -200px; opacity: 0; }
-            20%  { opacity: 0.4; }
-            100% { right: 120%; opacity: 0; }
-          }
-
-          .takeoff-speedline {
-            animation: speedRush 0.4s ease-in forwards;
-          }
-          @keyframes speedRush {
-            0%   { right: -200px; opacity: 0; }
-            30%  { opacity: 0.6; }
-            100% { right: 120%; opacity: 0; }
-          }
-
-          .takeoff-plane {
-            animation: planeUp 1s ease-in forwards;
-          }
-          @keyframes planeUp {
-            0%   { transform: translate(-50%, 0) rotate(0deg) scale(1); bottom: 8%; left: 50%; opacity: 1; }
-            100% { transform: translate(-50%, 0) rotate(-22deg) scale(0.15); bottom: 120%; left: 58%; opacity: 0; }
-          }
-
-          .takeoff-trail {
-            animation: trailGrow 0.9s ease-out 0.15s forwards;
-          }
-          @keyframes trailGrow {
-            0%   { height: 0; opacity: 0; transform: translateX(-50%) rotate(-5deg); }
-            30%  { height: 150px; opacity: 0.6; }
-            60%  { height: 350px; opacity: 0.4; }
-            100% { height: 600px; opacity: 0; transform: translateX(-50%) rotate(-8deg); }
-          }
-
-          .takeoff-logo {
+          .takeoff-aurora {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(110px);
             opacity: 0;
-            animation: logoReveal 0.5s ease-out 0.9s forwards;
           }
-          @keyframes logoReveal {
-            0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
-            100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+          .takeoff-aurora-a {
+            width: 46vw; height: 46vw; top: -8%; left: 4%;
+            background: radial-gradient(circle, rgba(79,70,229,0.55) 0%, rgba(79,70,229,0) 70%);
+            animation: takeoffGlow 2600ms ease-out forwards;
+          }
+          .takeoff-aurora-b {
+            width: 38vw; height: 38vw; bottom: -10%; right: 6%;
+            background: radial-gradient(circle, rgba(6,182,212,0.4) 0%, rgba(6,182,212,0) 72%);
+            animation: takeoffGlow 2600ms ease-out 220ms forwards;
+          }
+          @keyframes takeoffGlow {
+            0%   { opacity: 0; }
+            55%  { opacity: 1; }
+            100% { opacity: 0.75; }
+          }
+
+          .takeoff-mark {
+            position: absolute;
+            top: 50%; left: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            filter: drop-shadow(0 2px 12px rgba(4,8,20,0.6)) drop-shadow(0 0 40px rgba(4,8,20,0.5));
+            animation: takeoffMark 2600ms cubic-bezier(0.22,1,0.36,1) forwards;
+          }
+          @keyframes takeoffMark {
+            0%, 22% { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
+            48%     { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+            88%     { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+            100%    { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
+          }
+
+          .takeoff-veil {
+            position: absolute;
+            inset: 0;
+            background: #f9fafb;
+            opacity: 0;
+            animation: takeoffVeil 2600ms ease-in forwards;
+          }
+          @keyframes takeoffVeil {
+            0%, 82% { opacity: 0; }
+            100%    { opacity: 1; }
+          }
+
+          @media (prefers-reduced-motion: reduce) {
+            .takeoff-world, .takeoff-aurora, .takeoff-mark { animation: none; opacity: 1; transform: none; }
+            .takeoff-mark { transform: translate(-50%, -50%); }
+            .takeoff-veil { animation: takeoffVeil 2600ms linear forwards; }
           }
         `}</style>
       </div>
@@ -389,7 +322,7 @@ export default function LoginPage(): React.ReactElement {
         style={{
           display: 'none',
           width: '55%',
-          background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)',
+          background: '#070c1a',
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
@@ -401,240 +334,87 @@ export default function LoginPage(): React.ReactElement {
       >
         <style>{`@media(min-width:1024px){.lg-panel{display:flex!important}}`}</style>
 
-        {/* Stars */}
+        {/* Aurora — three drifting colour fields. They are the whole background:
+            deep indigo, a cold cyan and a warm violet, blurred past recognition so
+            what is left is the gradient, not the shapes. */}
+        <div className="login-aurora login-aurora-a" />
+        <div className="login-aurora login-aurora-b" />
+        <div className="login-aurora login-aurora-c" />
+
+        {/* Depth: a handful of pinpricks, far enough back to read as distance. */}
         <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
-          {Array.from({ length: 40 }, (_, i) => (
+          {STARFIELD.map((s, i) => (
             <div
               key={i}
               className="login-star"
               style={{
                 position: 'absolute',
-                width: Math.random() > 0.7 ? 2 : 1,
-                height: Math.random() > 0.7 ? 2 : 1,
+                width: s.size,
+                height: s.size,
                 borderRadius: '50%',
                 background: 'white',
-                opacity: 0.15 + Math.random() * 0.25,
-                top: `${Math.random() * 70}%`,
-                left: `${Math.random() * 100}%`,
-                animationDelay: `${Math.random() * 4}s`,
+                opacity: s.opacity,
+                top: `${s.top}%`,
+                left: `${s.left}%`,
+                animationDelay: `${s.delay}s`,
               }}
             />
           ))}
         </div>
 
-        {/* Animated glow orbs */}
-        <div
-          className="login-orb1"
-          style={{
-            position: 'absolute',
-            width: 500,
-            height: 500,
-            borderRadius: '50%',
-            background: 'radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%)',
-            filter: 'blur(80px)',
-          }}
-        />
-        <div
-          className="login-orb2"
-          style={{
-            position: 'absolute',
-            width: 350,
-            height: 350,
-            borderRadius: '50%',
-            background: 'radial-gradient(circle, rgba(14,165,233,0.08) 0%, transparent 70%)',
-            filter: 'blur(60px)',
-          }}
-        />
+        {/* Coastlines as a dot map, with routes lighting up between cities across
+            it. The geometry is TREK's own Atlas bundle, baked in at build time
+            because this screen is unauthenticated. */}
+        <LoginWorld />
 
-        {/* Animated planes — realistic silhouettes at different sizes/speeds */}
-        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
-          {/* Plane 1 — large, slow, foreground */}
-          <svg
-            className="login-plane1"
-            viewBox="0 0 480 120"
-            style={{ position: 'absolute', width: 48, opacity: 0.12 }}
-          >
-            <g fill="white" transform="translate(240,60) rotate(-12)">
-              <ellipse cx="0" cy="0" rx="120" ry="12" />
-              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
-              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
-              <path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
-              <path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
-              <ellipse cx="60" cy="0" rx="18" ry="8" />
-            </g>
-          </svg>
-
-          {/* Plane 2 — small, faster, higher */}
-          <svg
-            className="login-plane2"
-            viewBox="0 0 480 120"
-            style={{ position: 'absolute', width: 24, opacity: 0.08 }}
-          >
-            <g fill="white" transform="translate(240,60) rotate(-12)">
-              <ellipse cx="0" cy="0" rx="120" ry="12" />
-              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
-              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
-              <ellipse cx="60" cy="0" rx="18" ry="8" />
-            </g>
-          </svg>
-
-          {/* Plane 3 — medium, mid-speed */}
-          <svg
-            className="login-plane3"
-            viewBox="0 0 480 120"
-            style={{ position: 'absolute', width: 32, opacity: 0.06 }}
-          >
-            <g fill="white" transform="translate(240,60) rotate(-5)">
-              <ellipse cx="0" cy="0" rx="120" ry="12" />
-              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
-              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
-              <path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
-              <path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
-              <ellipse cx="60" cy="0" rx="18" ry="8" />
-            </g>
-          </svg>
-
-          {/* Plane 4 — tiny, fast, high */}
-          <svg
-            className="login-plane4"
-            viewBox="0 0 480 120"
-            style={{ position: 'absolute', width: 16, opacity: 0.07 }}
-          >
-            <g fill="white" transform="translate(240,60) rotate(-10)">
-              <ellipse cx="0" cy="0" rx="120" ry="12" />
-              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
-              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
-              <ellipse cx="60" cy="0" rx="18" ry="8" />
-            </g>
-          </svg>
-
-          {/* Plane 5 — medium, right to left, lower */}
-          <svg
-            className="login-plane5"
-            viewBox="0 0 480 120"
-            style={{ position: 'absolute', width: 28, opacity: 0.05 }}
-          >
-            <g fill="white" transform="translate(240,60) rotate(8) scale(-1,1)">
-              <ellipse cx="0" cy="0" rx="120" ry="12" />
-              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
-              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
-              <path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
-              <path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
-              <ellipse cx="60" cy="0" rx="18" ry="8" />
-            </g>
-          </svg>
-
-          {/* Plane 6 — tiny distant */}
-          <svg
-            className="login-plane6"
-            viewBox="0 0 480 120"
-            style={{ position: 'absolute', width: 12, opacity: 0.04 }}
-          >
-            <g fill="white" transform="translate(240,60) rotate(-15)">
-              <ellipse cx="0" cy="0" rx="120" ry="12" />
-              <path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
-              <path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
-              <ellipse cx="60" cy="0" rx="18" ry="8" />
-            </g>
-          </svg>
-        </div>
-
-        <div style={{ position: 'relative', zIndex: 1, maxWidth: 560, textAlign: 'center' }}>
-          {/* Logo */}
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 48 }}>
-            <img src="/logo-light.svg" alt="TREK" style={{ height: 64 }} />
+        {/* No max-width: the tagline stays on one line, so the block is allowed to
+            use the whole panel rather than wrapping inside it. */}
+        <div style={{ position: 'relative', zIndex: 1, maxWidth: '100%', textAlign: 'center' }}>
+          {/* Logo. The soft dark halo is what separates it from the dot map behind —
+              wide and low-opacity rather than a hard drop shadow, so it reads as the
+              map dimming around the mark instead of an outline. */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
+            <img
+              src="/logo-light.svg"
+              alt="TREK"
+              style={{
+                height: 'clamp(58px, 5.2vw, 84px)',
+                filter: 'drop-shadow(0 2px 10px rgba(4,8,20,0.55)) drop-shadow(0 0 34px rgba(4,8,20,0.45))',
+              }}
+            />
           </div>
 
           <h2
             style={{
-              margin: '0 0 12px',
-              fontSize: 'calc(36px * var(--fs-scale-title, 1))',
+              margin: 0,
+              // Scales with the panel so it stays on one line in every language.
+              fontSize: 'calc(clamp(32px, 2.95vw, 46px) * var(--fs-scale-title, 1))',
               fontWeight: 700,
               color: 'white',
               lineHeight: 1.15,
               letterSpacing: '-0.02em',
               fontFamily: "'MuseoModerno', sans-serif",
               textTransform: 'lowercase',
+              whiteSpace: 'nowrap',
+              textShadow: '0 2px 10px rgba(4,8,20,0.55), 0 0 34px rgba(4,8,20,0.5)',
             }}
           >
             {t('login.tagline')}
           </h2>
           <p
             style={{
-              margin: '0 0 44px',
-              fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))',
-              color: 'rgba(255,255,255,0.5)',
+              margin: '10px 0 0',
+              // Must never wrap: the panel is a fixed share of the viewport, so the
+              // size follows it and a long translation shrinks instead of breaking.
+              fontSize: 'calc(clamp(11px, 1.05vw, 16px) * var(--fs-scale-subtitle, 1))',
+              whiteSpace: 'nowrap',
+              color: 'rgba(255,255,255,0.62)',
               lineHeight: 1.7,
+              textShadow: '0 1px 8px rgba(4,8,20,0.6), 0 0 24px rgba(4,8,20,0.45)',
             }}
           >
             {t('login.description')}
           </p>
-
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
-            {[
-              { Icon: Map, label: t('login.features.maps'), desc: t('login.features.mapsDesc') },
-              { Icon: Zap, label: t('login.features.realtime'), desc: t('login.features.realtimeDesc') },
-              { Icon: Wallet, label: t('login.features.budget'), desc: t('login.features.budgetDesc') },
-              { Icon: Users, label: t('login.features.collab'), desc: t('login.features.collabDesc') },
-              { Icon: CheckSquare, label: t('login.features.packing'), desc: t('login.features.packingDesc') },
-              { Icon: BookMarked, label: t('login.features.bookings'), desc: t('login.features.bookingsDesc') },
-              { Icon: FolderOpen, label: t('login.features.files'), desc: t('login.features.filesDesc') },
-              { Icon: Route, label: t('login.features.routes'), desc: t('login.features.routesDesc') },
-            ].map(({ Icon, label, desc }) => (
-              <div
-                key={label}
-                style={{
-                  background: 'rgba(255,255,255,0.04)',
-                  borderRadius: 14,
-                  padding: '14px 12px',
-                  border: '1px solid rgba(255,255,255,0.06)',
-                  textAlign: 'left',
-                  transition:
-                    'background 200ms cubic-bezier(0.23,1,0.32,1), border-color 200ms cubic-bezier(0.23,1,0.32,1)',
-                }}
-                onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
-                  e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
-                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)';
-                }}
-                onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
-                  e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
-                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)';
-                }}
-              >
-                <Icon size={17} style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 7 }} />
-                <div
-                  style={{
-                    fontSize: 'calc(12.5px * var(--fs-scale-body, 1))',
-                    color: 'white',
-                    fontWeight: 600,
-                    marginBottom: 2,
-                  }}
-                >
-                  {label}
-                </div>
-                <div
-                  style={{
-                    fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
-                    color: 'rgba(255,255,255,0.35)',
-                    lineHeight: 1.4,
-                  }}
-                >
-                  {desc}
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <p
-            style={{
-              marginTop: 36,
-              fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))',
-              color: 'rgba(255,255,255,0.25)',
-              letterSpacing: '0.03em',
-            }}
-          >
-            {t('login.selfHosted')}
-          </p>
         </div>
       </div>
 
@@ -1441,20 +1221,45 @@ export default function LoginPage(): React.ReactElement {
 
       <style>{`
         @keyframes spin { to { transform: rotate(360deg) } }
-        @keyframes orbFloat1 {
-          0%, 100% { top: 15%; left: 30%; }
-          25% { top: 25%; left: 55%; }
-          50% { top: 45%; left: 40%; }
-          75% { top: 20%; left: 20%; }
+
+        /* ── Branding panel ──────────────────────────────────────────────────
+           Aurora: three colour fields, blurred far past their own shape, drifting
+           on different periods so the gradient never repeats a frame exactly. */
+        .login-aurora {
+          position: absolute;
+          border-radius: 50%;
+          filter: blur(90px);
+          will-change: transform;
         }
-        @keyframes orbFloat2 {
-          0%, 100% { bottom: 20%; right: 15%; }
-          25% { bottom: 35%; right: 35%; }
-          50% { bottom: 15%; right: 45%; }
-          75% { bottom: 40%; right: 20%; }
+        .login-aurora-a {
+          width: 620px; height: 620px; top: -12%; left: -14%;
+          background: radial-gradient(circle, rgba(79,70,229,0.55) 0%, rgba(79,70,229,0) 68%);
+          animation: auroraA 34s ease-in-out infinite;
+        }
+        .login-aurora-b {
+          width: 520px; height: 520px; bottom: -16%; right: -10%;
+          background: radial-gradient(circle, rgba(6,182,212,0.4) 0%, rgba(6,182,212,0) 70%);
+          animation: auroraB 44s ease-in-out infinite;
+        }
+        .login-aurora-c {
+          width: 460px; height: 460px; top: 42%; left: 34%;
+          background: radial-gradient(circle, rgba(168,85,247,0.32) 0%, rgba(168,85,247,0) 72%);
+          animation: auroraC 52s ease-in-out infinite;
+        }
+        @keyframes auroraA {
+          0%, 100% { transform: translate3d(0,0,0) scale(1); }
+          33%      { transform: translate3d(14%, 18%, 0) scale(1.14); }
+          66%      { transform: translate3d(26%, 4%, 0) scale(0.94); }
+        }
+        @keyframes auroraB {
+          0%, 100% { transform: translate3d(0,0,0) scale(1.05); }
+          40%      { transform: translate3d(-22%, -14%, 0) scale(0.9); }
+          70%      { transform: translate3d(-8%, -28%, 0) scale(1.2); }
+        }
+        @keyframes auroraC {
+          0%, 100% { transform: translate3d(0,0,0) scale(0.95); }
+          50%      { transform: translate3d(-18%, 12%, 0) scale(1.25); }
         }
-        .login-orb1 { animation: orbFloat1 20s ease-in-out infinite; }
-        .login-orb2 { animation: orbFloat2 25s ease-in-out infinite; }
 
         @keyframes twinkle {
           0%, 100% { opacity: 0.15; }
@@ -1462,36 +1267,11 @@ export default function LoginPage(): React.ReactElement {
         }
         .login-star { animation: twinkle 3s ease-in-out infinite; }
 
-        @keyframes plane1Move {
-          0%   { left: -8%; top: 30%; transform: rotate(-8deg); }
-          100% { left: 108%; top: 10%; transform: rotate(-12deg); }
+
+        /* Ambient only — the world map holds still. */
+        @media (prefers-reduced-motion: reduce) {
+          .login-aurora, .login-star { animation: none; }
         }
-        @keyframes plane2Move {
-          0%   { right: -5%; top: 18%; transform: rotate(5deg); }
-          100% { right: 110%; top: 8%; transform: rotate(3deg); }
-        }
-        @keyframes plane3Move {
-          0%   { left: -6%; top: 55%; transform: rotate(-10deg); }
-          100% { left: 110%; top: 35%; transform: rotate(-6deg); }
-        }
-        @keyframes plane4Move {
-          0%   { left: -4%; top: 8%; transform: rotate(-3deg); }
-          100% { left: 110%; top: 5%; transform: rotate(-5deg); }
-        }
-        @keyframes plane5Move {
-          0%   { right: -6%; top: 65%; transform: rotate(3deg); }
-          100% { right: 110%; top: 50%; transform: rotate(-2deg); }
-        }
-        @keyframes plane6Move {
-          0%   { left: -3%; top: 75%; transform: rotate(-7deg); }
-          100% { left: 110%; top: 58%; transform: rotate(-5deg); }
-        }
-        .login-plane1 { animation: plane1Move 24s ease-in-out infinite; }
-        .login-plane2 { animation: plane2Move 18s ease-in-out infinite; animation-delay: 6s; }
-        .login-plane3 { animation: plane3Move 30s ease-in-out infinite; animation-delay: 12s; }
-        .login-plane4 { animation: plane4Move 14s ease-in-out infinite; animation-delay: 3s; }
-        .login-plane5 { animation: plane5Move 22s ease-in-out infinite; animation-delay: 9s; }
-        .login-plane6 { animation: plane6Move 32s ease-in-out infinite; animation-delay: 16s; }
 
       `}</style>
     </div>