Implement Codingo SaaS hero redesign on landing page

Add hero-stage with floating live-status chips and a gradient LUNA
wordmark, ported from the Claude Design "Codingo SaaS redesign" preview.

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

backend/static/css/theme.css

@@ -95,24 +95,42 @@ header {
 }
 .btn-logout:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; }
 
-/* ---- Clean, professional light hero ------------------------------- */
+/* ---- Light hero with soft color mesh + subtle dot texture --------- */
 .hero {
+    position: relative;
     background:
-        radial-gradient(900px 420px at 50% -10%, rgba(99, 102, 241, .10), transparent 70%),
-        linear-gradient(180deg, #ffffff 0%, #f5f6ff 60%, var(--bg) 100%) !important;
+        radial-gradient(620px 320px at 14% 12%, rgba(99, 102, 241, .18), transparent 60%),
+        radial-gradient(560px 300px at 86% 6%, rgba(34, 211, 238, .16), transparent 60%),
+        radial-gradient(720px 400px at 50% 120%, rgba(139, 92, 246, .18), transparent 60%),
+        linear-gradient(180deg, #fbfbff 0%, #edf0fe 100%) !important;
     color: var(--ink) !important;
     padding: 5rem 1rem 5.5rem !important;
     border-bottom: 1px solid var(--line);
+    overflow: hidden;
+}
+/* faint dot grid for a subtle "tech" texture, masked so it fades out */
+.hero::before {
+    display: block !important;
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important; left: 0 !important;
+    width: 100% !important; height: 100% !important;
+    background: radial-gradient(rgba(99, 102, 241, .14) 1px, transparent 1.5px) !important;
+    background-size: 24px 24px !important;
+    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 5%, #000 35%, transparent 80%);
+    mask-image: radial-gradient(ellipse 75% 65% at 50% 5%, #000 35%, transparent 80%);
+    animation: none !important;
+    z-index: 0 !important;
+    pointer-events: none !important;
 }
-.hero::before { display: none !important; }
 .hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem) !important; font-weight: 700; color: var(--ink) !important; }
 .hero p { color: var(--muted) !important; font-size: 1.15rem !important; }
 
-/* LUNA avatar — soft, restrained ring (no light show) */
+/* LUNA avatar — soft, warm color halo (tasteful, not a light show) */
 .luna-avatar { border: 4px solid #ffffff !important;
-    box-shadow: 0 18px 45px rgba(13, 20, 40, .14), 0 0 0 1px var(--line) !important; }
-.luna-glow { background: radial-gradient(circle, rgba(99, 102, 241, .28) 0%, rgba(99, 102, 241, 0) 70%) !important;
-    opacity: .5 !important; }
+    box-shadow: 0 18px 45px rgba(13, 20, 40, .16), 0 0 0 1px var(--line) !important; }
+.luna-glow { background: radial-gradient(circle, rgba(139, 92, 246, .42) 0%, rgba(34, 211, 238, .16) 45%, transparent 72%) !important;
+    opacity: .85 !important; filter: blur(20px) !important; }
 
 /* Eyebrow chip — tasteful brand accent on light */
 .eyebrow {
@@ -125,8 +143,62 @@ header {
 .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-1);
     animation: pulse 2s ease-in-out infinite alternate; }
 
+/* Gradient accent for the LUNA wordmark in the hero headline */
+.grad-text {
+    background: var(--grad);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+}
+
+/* Hero stage — holds the avatar plus floating "live" status chips */
+.hero-stage {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    margin-bottom: 1.75rem;
+}
+.float-chip {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    gap: .45rem;
+    padding: .5rem .9rem;
+    border-radius: 999px;
+    font-size: .82rem;
+    font-weight: 600;
+    color: var(--ink);
+    background: rgba(255, 255, 255, .85);
+    -webkit-backdrop-filter: saturate(160%) blur(10px);
+    backdrop-filter: saturate(160%) blur(10px);
+    border: 1px solid var(--line);
+    box-shadow: var(--shadow);
+    white-space: nowrap;
+    z-index: 3;
+    animation: chipFloat 4s ease-in-out infinite;
+}
+.float-chip .ico { font-size: 1rem; line-height: 1; }
+.float-chip.tl { top: 8px; left: -36px; }
+.float-chip.br { bottom: 8px; right: -44px; animation-delay: 2s; }
+
+@keyframes chipFloat {
+    0%, 100% { transform: translateY(0); }
+    50%      { transform: translateY(-9px); }
+}
+
+@media (max-width: 560px) {
+    .float-chip.tl { left: -8px; }
+    .float-chip.br { right: -8px; }
+}
+
 /* ---- Sections / titles -------------------------------------------- */
-.content-section, .features { background: var(--bg) !important; }
+.content-section, .features {
+    background:
+        radial-gradient(700px 320px at 88% 0%, rgba(99, 102, 241, .07), transparent 60%),
+        radial-gradient(620px 300px at 6% 100%, rgba(34, 211, 238, .06), transparent 60%),
+        var(--bg) !important;
+}
 .section-title h2 { color: var(--ink) !important; font-size: 2.3rem !important; }
 .section-title h2::after { background: var(--grad) !important; height: 4px !important; border-radius: 4px; }
 .section-title p { color: var(--muted) !important; font-size: 1.05rem; }

backend/templates/index.html

@@ -6,14 +6,18 @@
 <section class="hero">
     <div class="container">
         <div class="hero-content">
-            <div class="luna-avatar-container">
-                <div class="luna-glow"></div>
-                <div class="luna-avatar">
-                    <img src="{{ url_for('static', filename='images/LUNA.png') }}" alt="LUNA AI Assistant">
+            <span class="eyebrow"><span class="dot"></span> AI-Powered Recruitment</span>
+            <div class="hero-stage">
+                <div class="luna-avatar-container">
+                    <div class="luna-glow"></div>
+                    <div class="luna-avatar">
+                        <img src="{{ url_for('static', filename='images/LUNA.png') }}" alt="LUNA AI Assistant">
+                    </div>
                 </div>
+                <span class="float-chip tl"><span class="ico">🎙️</span> Live voice interview</span>
+                <span class="float-chip br"><span class="ico">⚡</span> Scored instantly</span>
             </div>
-            <span class="eyebrow"><span class="dot"></span> AI-Powered Recruitment</span>
-            <h1>Meet LUNA, Your AI Recruiter</h1>
+            <h1>Meet <span class="grad-text">LUNA</span>, Your AI Recruiter</h1>
             <p>Screen CVs, run real voice interviews, and score every answer against a live question
                 database — so you find the right technical talent faster, and fairer.</p>
             <div class="hero-buttons">