Implement Claude Design homepage redesign (preview/index_preview.html)

- theme.css: full premium design system (rotating LUNA halo, float-chip anim,
data-reveal, dashboard/tips/application styling)
- index.html: hero copy refinements to match the approved preview
- base.html: additive scroll-reveal IntersectionObserver

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

backend/static/css/theme.css

@@ -1,312 +1,570 @@
 /* =====================================================================
    Codingo — Premium design system (theme.css)
-   Single source of truth for the new look. Linked AFTER the legacy inline
-   <style> in base.html so these rules win and cascade across every page.
-   Direction: premium light product + cinematic dark hero/navbar/footer.
+   Single source of truth for the product's visual layer. Linked AFTER the
+   legacy inline <style> in base.html so these rules win and cascade across
+   every page.
+
+   Direction: premium, light & bright SaaS surface (Linear / Stripe / Vercel
+   energy) — layered color-mesh backgrounds, hairline borders, soft depth,
+   one confident brand gradient used as an accent. LUNA is the hero.
    ===================================================================== */
 
 :root {
     /* Brand */
-    --brand-1: #6366f1;      /* indigo */
-    --brand-2: #8b5cf6;      /* violet */
-    --spark:   #22d3ee;      /* cyan accent */
-    --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
-    --grad-soft: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.12));
-
-    /* Neutrals (light product surface) */
-    --bg:      #f5f6fb;
-    --surface: #ffffff;
-    --ink:     #0b1020;
-    --muted:   #5b6478;
-    --line:    #e7e9f2;
-
-    /* Night (hero / navbar / footer) */
-    --night:   #0b1020;
-    --night-2: #141a2e;
-
-    /* Radius + shadow + spacing scale */
-    --r-sm: 12px;
+    --brand-1: #6366f1;       /* indigo */
+    --brand-2: #8b5cf6;       /* violet */
+    --brand-3: #a855f7;       /* magenta-violet (deep gradient stop) */
+    --spark:   #22d3ee;       /* cyan accent — used sparingly */
+    --grad:        linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%);
+    --grad-bright: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #22d3ee 100%);
+    --grad-soft:   linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.12));
+
+    /* Neutrals — cool light product surface */
+    --bg:        #f4f5fb;
+    --bg-2:      #eef0fb;
+    --surface:   #ffffff;
+    --surface-2: #fbfbfe;
+    --ink:       #0c1124;
+    --ink-soft:  #2a3052;
+    --muted:     #5e6781;
+    --muted-2:   #8b92ab;
+    --line:      #e7e9f4;
+    --line-2:    #eef0f8;
+
+    /* Radius scale */
+    --r-xs: 10px;
+    --r-sm: 14px;
     --r:    18px;
-    --r-lg: 26px;
-    --shadow-sm: 0 2px 8px rgba(13, 20, 40, .06);
-    --shadow:    0 12px 30px rgba(13, 20, 40, .08);
-    --shadow-lg: 0 24px 60px rgba(13, 20, 40, .14);
+    --r-lg: 24px;
+    --r-xl: 30px;
+    --r-pill: 999px;
 
-    /* Legacy variable names remapped so existing rules adopt the new palette */
+    /* Shadow scale — soft, layered, low-contrast */
+    --shadow-xs: 0 1px 2px rgba(12,17,36,.05);
+    --shadow-sm: 0 2px 10px rgba(12,17,36,.06);
+    --shadow:    0 14px 34px rgba(12,17,36,.09);
+    --shadow-lg: 0 28px 64px rgba(12,17,36,.14);
+    --shadow-brand: 0 14px 30px rgba(99,102,241,.30);
+    --ring: 0 0 0 4px rgba(99,102,241,.18);
+
+    /* Status */
+    --success: #16a34a;
+    --warning: #d97706;
+    --danger:  #dc2626;
+
+    /* Legacy variable names remapped so existing inline rules adopt the new palette */
     --primary:   #6366f1;
     --secondary: #8b5cf6;
-    --accent:    #22d3ee;
-    --light:     #f5f6fb;
-    --dark:      #0b1020;
+    --accent:    #6366f1;
+    --light:     #f4f5fb;
+    --dark:      #0c1124;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
 }
 
 /* ---- Typography ---------------------------------------------------- */
 * { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
-h1, h2, h3, .logo, .section-title h2, .hero h1, .cta h2 {
+h1, h2, h3, h4, .logo, .section-title h2, .hero h1, .hero h2, .cta h2,
+.card-header h2, .pipe-step h4 {
     font-family: 'Space Grotesk', 'Inter', sans-serif;
-    letter-spacing: -0.02em;
+    letter-spacing: -0.025em;
+    line-height: 1.12;
 }
 body {
-    background: var(--bg);
+    background:
+        radial-gradient(900px 520px at 88% -8%, rgba(99,102,241,.06), transparent 60%),
+        radial-gradient(820px 520px at 4% 8%, rgba(34,211,238,.045), transparent 55%),
+        var(--bg);
     color: var(--ink);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }
+a { color: var(--brand-1); }
+::selection { background: rgba(99,102,241,.18); }
+
+/* Scroll-reveal utility (progressive enhancement, see base.html observer) */
+[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); will-change: opacity, transform; }
+[data-reveal].is-in { opacity: 1; transform: none; }
 
-/* ---- Glass navbar (dark, keeps white nav buttons working) --------- */
+/* =====================================================================
+   Navbar — clean light glass bar
+   ===================================================================== */
 header {
-    background: rgba(255, 255, 255, .8) !important;
-    -webkit-backdrop-filter: saturate(180%) blur(14px);
-    backdrop-filter: saturate(180%) blur(14px);
-    border-bottom: 1px solid var(--line) !important;
-    box-shadow: 0 1px 0 rgba(13, 20, 40, .04), 0 8px 24px rgba(13, 20, 40, .04) !important;
-    padding: .85rem 1rem !important;
+    background:
+        radial-gradient(560px 80px at 8% 0%, rgba(99,102,241,.10), transparent 70%),
+        radial-gradient(460px 80px at 92% 0%, rgba(34,211,238,.08), transparent 70%),
+        rgba(255,255,255,.94) !important;
+    -webkit-backdrop-filter: saturate(150%) blur(16px);
+    backdrop-filter: saturate(150%) blur(16px);
+    border-bottom: 2.5px solid transparent !important;
+    border-image: linear-gradient(90deg, #6366f1, #8b5cf6 50%, #22d3ee) 1 !important;
+    box-shadow: 0 8px 24px rgba(99,102,241,.10) !important;
+    padding: .8rem 1rem !important;
     color: var(--ink) !important;
 }
-.logo, .logo-part1 { font-weight: 700; color: var(--ink) !important; }
+.nav-container { gap: 1rem; }
+.logo { font-size: 1.7rem !important; font-weight: 700; color: var(--ink) !important; gap: .55rem; }
+.logo::before {
+    content: ""; width: 30px; height: 30px; border-radius: 9px;
+    background: var(--grad); box-shadow: var(--shadow-brand);
+    -webkit-mask: none; flex: 0 0 auto; display: inline-block;
+    position: relative;
+}
+.logo .logo-part1 { color: var(--ink) !important; }
 .logo-part2 { color: var(--brand-1) !important; font-style: normal; animation: none; text-shadow: none; }
 .logo-part3 { color: var(--brand-2) !important; }
-.welcome-message { background: rgba(99, 102, 241, .08) !important; color: var(--ink) !important; border-radius: 999px; }
+.welcome-message {
+    background: rgba(99,102,241,.08) !important; color: var(--ink-soft) !important;
+    border-radius: var(--r-pill); border: 1px solid rgba(99,102,241,.14);
+    font-weight: 600; font-size: .92rem;
+}
+.welcome-message:before { content: ''; margin-right: .15rem; }
 
-/* ---- Buttons ------------------------------------------------------- */
+/* =====================================================================
+   Buttons
+   ===================================================================== */
 .btn {
-    border-radius: 999px !important;
-    font-weight: 600;
-    letter-spacing: .01em;
-    padding: .6rem 1.4rem !important;
+    border-radius: var(--r-pill) !important;
+    font-weight: 600 !important;
+    letter-spacing: .005em;
+    padding: .62rem 1.45rem !important;
+    font-size: .96rem;
+    transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s, background-color .25s, border-color .25s, color .25s !important;
+    border: 1.5px solid transparent;
+    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
+    line-height: 1.1;
 }
+.btn::before { display: none !important; }
 .btn-primary {
     background: var(--grad) !important;
     color: #fff !important;
-    box-shadow: 0 10px 24px rgba(99, 102, 241, .35) !important;
+    box-shadow: var(--shadow-brand) !important;
+    border-color: transparent !important;
 }
-.btn-primary:hover { box-shadow: 0 14px 30px rgba(99, 102, 241, .45) !important; }
+.btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 38px rgba(99,102,241,.42) !important; }
+.btn-primary:active { transform: translateY(0) !important; }
 .btn-outline {
-    background: var(--surface) !important;
+    background: rgba(255,255,255,.7) !important;
     border: 1.5px solid var(--line) !important;
     color: var(--ink) !important;
+    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
 }
-.btn-outline:hover { background: #f0f1fb !important; border-color: rgba(99, 102, 241, .4) !important; }
+.btn-outline:hover { background: #fff !important; border-color: rgba(99,102,241,.45) !important; color: var(--brand-1) !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-sm) !important; }
 .btn-logout {
     background: transparent !important;
-    border: 1.5px solid rgba(99, 102, 241, .45) !important;
+    border: 1.5px solid rgba(99,102,241,.4) !important;
     color: var(--brand-1) !important;
-    border-radius: 999px !important;
+    border-radius: var(--r-pill) !important;
+    padding: .55rem 1.3rem !important; font-weight: 600 !important;
 }
-.btn-logout:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; }
+.btn-logout:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-brand) !important; }
+.btn:focus-visible { outline: none; box-shadow: var(--ring) !important; }
 
-/* ---- Light hero with soft color mesh + subtle dot texture --------- */
+/* =====================================================================
+   Hero — light color-mesh stage with LUNA as centerpiece
+   ===================================================================== */
 .hero {
     position: relative;
     background:
-        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;
+        radial-gradient(680px 380px at 12% 8%, rgba(99,102,241,.20), transparent 60%),
+        radial-gradient(620px 340px at 88% 2%, rgba(34,211,238,.16), transparent 60%),
+        radial-gradient(820px 460px at 50% 118%, rgba(168,85,247,.20), transparent 62%),
+        linear-gradient(180deg, #fcfcff 0%, #eef1fe 100%) !important;
     color: var(--ink) !important;
-    padding: 5rem 1rem 5.5rem !important;
+    padding: 4.5rem 1rem 5rem !important;
     border-bottom: 1px solid var(--line);
     overflow: hidden;
 }
-/* faint dot grid for a subtle "tech" texture, masked so it fades out */
+/* faint dot grid texture, masked so it fades out toward the edges */
 .hero::before {
-    display: block !important;
-    content: '' !important;
-    position: absolute !important;
-    top: 0 !important; left: 0 !important;
+    display: block !important; content: '' !important;
+    position: absolute !important; inset: 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 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, warm color halo (tasteful, not a light show) */
-.luna-avatar { border: 4px solid #ffffff !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 {
-    display: inline-flex; align-items: center; gap: .5rem;
-    padding: .4rem 1rem; margin-bottom: 1.25rem;
-    border-radius: 999px; font-size: .85rem; font-weight: 600;
-    color: var(--brand-1); background: var(--grad-soft);
-    border: 1px solid rgba(99, 102, 241, .2);
+    background: radial-gradient(rgba(99,102,241,.16) 1px, transparent 1.6px) !important;
+    background-size: 26px 26px !important;
+    -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 4%, #000 30%, transparent 78%);
+    mask-image: radial-gradient(ellipse 78% 70% at 50% 4%, #000 30%, transparent 78%);
+    animation: none !important; z-index: 0 !important; pointer-events: none !important; opacity: .9;
+}
+.hero .container { position: relative; z-index: 2; }
+.hero-content { position: relative; z-index: 2; gap: 0; }
+.hero h1 {
+    font-size: clamp(2.3rem, 5.4vw, 3.7rem) !important;
+    font-weight: 700; color: var(--ink) !important;
+    margin: 0 0 1.1rem !important; max-width: 16ch; text-wrap: balance;
+    text-shadow: none !important; transform: none !important;
 }
-.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-1);
-    animation: pulse 2s ease-in-out infinite alternate; }
+.hero h1 .grad-text {
+    background: var(--grad); -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent; color: transparent;
+}
+.hero p {
+    color: var(--muted) !important; font-size: clamp(1.02rem, 1.5vw, 1.2rem) !important;
+    max-width: 56ch; margin: 0 auto 2rem !important; line-height: 1.6; transform: none !important;
+}
+.hero-buttons { gap: 1rem !important; transform: none !important; }
 
-/* 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;
+/* Eyebrow chip */
+.eyebrow {
+    display: inline-flex; align-items: center; gap: .5rem;
+    padding: .4rem 1rem .4rem .7rem; margin-bottom: 1.4rem;
+    border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; letter-spacing: .01em;
+    color: var(--brand-1); background: rgba(255,255,255,.75);
+    border: 1px solid rgba(99,102,241,.22);
+    box-shadow: var(--shadow-xs); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
 }
+.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px rgba(99,102,241,.16); animation: blink 2.2s ease-in-out infinite; }
+@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
 
-/* Hero stage — holds the avatar plus floating "live" status chips */
-.hero-stage {
+/* ---- LUNA portrait stage — bigger, crisper, refined halo --------- */
+.luna-avatar-container {
     position: relative;
-    display: inline-flex;
-    justify-content: center;
-    margin-bottom: 1.75rem;
+    width: clamp(280px, 40vw, 400px) !important;
+    height: clamp(280px, 40vw, 400px) !important;
+    margin: 0 auto 2.2rem !important;
+    perspective: 1000px;
 }
-.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;
+/* rotating conic gradient ring behind the portrait */
+.luna-avatar-container::before {
+    content: ""; position: absolute; inset: -16px; border-radius: 50%;
+    background: conic-gradient(from 0deg, #6366f1, #22d3ee, #a855f7, #8b5cf6, #6366f1);
+    filter: blur(2px); opacity: .9; z-index: 0;
+    -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
+    mask: radial-gradient(circle, transparent 60%, #000 61%);
+    animation: spin 14s linear 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); }
+.luna-avatar-container::after {
+    content: ""; position: absolute; inset: 8px; border-radius: 50%;
+    box-shadow: inset 0 0 0 8px rgba(255,255,255,.9); z-index: 1; pointer-events: none;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.luna-glow {
+    position: absolute; inset: -6%; border-radius: 50%; z-index: 0 !important;
+    background: radial-gradient(circle, rgba(139,92,246,.45) 0%, rgba(34,211,238,.20) 45%, transparent 72%) !important;
+    opacity: .9 !important; filter: blur(26px) !important;
+    animation: pulse 4.5s ease-in-out infinite alternate;
 }
+@keyframes pulse { 0% { transform: scale(.92); opacity: .55; } 100% { transform: scale(1.08); opacity: .9; } }
+.luna-avatar {
+    width: 100% !important; height: 100% !important; border-radius: 50% !important;
+    border: 5px solid #ffffff !important;
+    box-shadow: 0 26px 60px rgba(12,17,36,.22), 0 0 0 1px rgba(99,102,241,.10) !important;
+    overflow: hidden; position: relative; z-index: 2 !important;
+    background: #eef1fe !important; animation: float 6s ease-in-out infinite;
+}
+@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
+.luna-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
 
-@media (max-width: 560px) {
-    .float-chip.tl { left: -8px; }
-    .float-chip.br { right: -8px; }
+/* Floating accent chips around the portrait (added in index.html hero) */
+.hero-stage { position: relative; display: inline-block; }
+.float-chip {
+    position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: .5rem;
+    padding: .55rem .9rem; border-radius: var(--r-pill);
+    background: rgba(255,255,255,.92); border: 1px solid var(--line);
+    box-shadow: var(--shadow); font-size: .85rem; font-weight: 600; color: var(--ink-soft);
+    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
+    animation: floatChip 5s ease-in-out infinite;
+    white-space: nowrap;
 }
+.float-chip .ico {
+    width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
+    background: var(--grad-soft); font-size: .95rem;
+}
+.float-chip.tl { top: -7%; left: -11%; animation-delay: .4s; }
+.float-chip.br { bottom: 6%; right: -12%; animation-delay: 1.4s; }
+@keyframes floatChip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
 
-/* ---- Sections / titles -------------------------------------------- */
+/* =====================================================================
+   Sections / titles
+   ===================================================================== */
 .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;
+        radial-gradient(760px 340px at 90% 0%, rgba(99,102,241,.06), transparent 60%),
+        radial-gradient(680px 320px at 4% 100%, rgba(34,211,238,.05), transparent 60%),
+        transparent !important;
+    padding: 4.5rem 1rem !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; }
+.section-title { margin-bottom: 3rem !important; }
+.section-title h2 { color: var(--ink) !important; font-size: clamp(1.85rem, 3.2vw, 2.55rem) !important; }
+.section-title h2::after { background: var(--grad) !important; height: 4px !important; width: 64px !important; border-radius: 4px; bottom: -14px !important; }
+.section-title p { color: var(--muted) !important; font-size: 1.08rem !important; margin-top: 1.5rem; line-height: 1.6; }
 
-/* ---- Cards (premium light) ---------------------------------------- */
+/* =====================================================================
+   Cards — premium light
+   ===================================================================== */
 .feature-card, .card, .job-card {
     background: var(--surface) !important;
     border: 1px solid var(--line) !important;
-    border-radius: var(--r) !important;
+    border-radius: var(--r-lg) !important;
     box-shadow: var(--shadow-sm) !important;
-    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
+    overflow: hidden;
+    transition: transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s, border-color .4s !important;
 }
-.feature-card:hover, .card:hover, .job-card:hover {
+.feature-card:hover, .job-card:hover {
     transform: translateY(-8px) !important;
     box-shadow: var(--shadow-lg) !important;
-    border-color: rgba(99, 102, 241, .35) !important;
+    border-color: rgba(99,102,241,.30) !important;
 }
+.card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow) !important; border-color: rgba(99,102,241,.22) !important; }
+
+/* Feature card */
+.feature-card { display: flex; flex-direction: column; }
 .feature-icon {
     background: var(--grad-soft) !important;
-    font-size: 2.2rem !important;
-    color: var(--brand-1) !important;
+    font-size: 1.6rem !important; color: var(--brand-1) !important;
+    padding: 1.6rem !important; justify-content: flex-start !important;
+}
+.feature-icon span {
+    width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
+    background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
 }
-.feature-content h3 { color: var(--ink) !important; }
-.feature-content h3::after { background: var(--grad) !important; }
+.feature-card:hover .feature-icon { color: var(--brand-1) !important; transform: none !important; }
+.feature-content { padding: 0 1.6rem 1.7rem !important; }
+.feature-content h3 { color: var(--ink) !important; font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem !important; }
+.feature-content h3::after { background: var(--grad) !important; height: 3px !important; }
+.feature-content p { color: var(--muted) !important; line-height: 1.6; }
 
-/* Job card headers adopt the brand gradient */
-.job-header, .card-header { background: var(--grad) !important; }
+/* Generic card + headers */
+.card { box-shadow: var(--shadow-sm) !important; }
+.card-header { background: var(--grad) !important; color: #fff; padding: 1.6rem 1.8rem !important; position: relative; }
+.card-header h2, .card-header h3 { color: #fff !important; }
+.card-header p { color: rgba(255,255,255,.88) !important; margin-top: .35rem; }
+.card-body { padding: 1.8rem !important; }
+
+/* Job cards */
+.job-card { display: flex; flex-direction: column; }
+.job-header { background: var(--grad) !important; color: #fff; padding: 1.35rem 1.5rem !important; }
+.job-header h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem !important; color: #fff; }
+.job-info { color: rgba(255,255,255,.9); margin-top: .6rem !important; gap: .5rem; }
+.job-info span {
+    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.22);
+    padding: .22rem .7rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600;
+}
+.job-body { padding: 1.4rem 1.5rem !important; }
+.job-body .job-description p { color: var(--muted) !important; line-height: 1.55; }
+.job-body > div:last-child { color: var(--muted-2); font-size: .85rem; font-weight: 500; }
+.job-footer { padding: 0 1.5rem 1.4rem !important; }
 
-/* ---- CTA band — the single, tasteful gradient moment -------------- */
+/* =====================================================================
+   Forms — unified, premium (applies across login/signup/apply/post_job)
+   ===================================================================== */
+.form-group { margin-bottom: 1.25rem; }
+label, .form-label, .form-group label {
+    display: block !important; margin-bottom: .5rem !important;
+    font-weight: 600 !important; font-size: .9rem !important; color: var(--ink-soft) !important;
+    letter-spacing: .005em;
+}
+.form-control,
+input[type="text"], input[type="email"], input[type="password"],
+input[type="number"], input[type="file"], textarea, select {
+    width: 100% !important; box-sizing: border-box;
+    padding: .8rem 1rem !important; font-size: 1rem !important;
+    color: var(--ink) !important;
+    background: var(--surface-2) !important;
+    border: 1.5px solid var(--line) !important;
+    border-radius: var(--r-sm) !important;
+    transition: border-color .25s, box-shadow .25s, background-color .25s !important;
+    font-family: 'Inter', sans-serif !important;
+}
+textarea.form-control, textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
+.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--muted-2) !important; }
+.form-control:focus,
+input:focus, textarea:focus, select:focus {
+    outline: none !important;
+    border-color: var(--brand-1) !important;
+    background: #fff !important;
+    box-shadow: var(--ring) !important;
+}
+/* File input — custom button look */
+input[type="file"] { padding: .55rem 1rem !important; cursor: pointer; }
+input[type="file"]::file-selector-button {
+    margin-right: 1rem; padding: .5rem 1rem; border: none; cursor: pointer;
+    border-radius: var(--r-pill); font-weight: 600; font-size: .88rem;
+    background: var(--grad-soft); color: var(--brand-1);
+    transition: background-color .2s;
+}
+input[type="file"]::file-selector-button:hover { background: rgba(99,102,241,.18); }
+select { -webkit-appearance: none; appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235e6781' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem !important; }
+
+/* Password strength bar */
+.password-strength { height: 6px !important; background: var(--line) !important; border-radius: var(--r-pill) !important; margin-top: .6rem !important; overflow: hidden; }
+.password-strength-bar { border-radius: var(--r-pill) !important; }
+
+/* Auth pages: card sits on a quiet mesh, override legacy radii from inline <style> */
+.auth-form .form-control { border-radius: var(--r-sm) !important; padding: .8rem 1rem !important; border: 1.5px solid var(--line) !important; }
+.auth-form .form-control:focus { border-color: var(--brand-1) !important; box-shadow: var(--ring) !important; }
+.auth-form .btn-primary, .application-actions .btn-primary, form .btn-primary {
+    background: var(--grad) !important; border-radius: var(--r-pill) !important;
+    box-shadow: var(--shadow-brand) !important; padding: .8rem 1.6rem !important;
+}
+.auth-form .btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 38px rgba(99,102,241,.42) !important; }
+.btn-secondary {
+    background: rgba(99,102,241,.08) !important; color: var(--brand-1) !important;
+    border: 1.5px solid rgba(99,102,241,.22) !important; border-radius: var(--r-pill) !important;
+    padding: .8rem 1.4rem !important; font-weight: 600;
+}
+.btn-secondary:hover { background: rgba(99,102,241,.14) !important; transform: translateY(-2px); }
+
+/* =====================================================================
+   Dashboard table
+   ===================================================================== */
+.dashboard-table { border-collapse: separate !important; border-spacing: 0; width: 100%; }
+.dashboard-table thead tr { background: transparent !important; }
+.dashboard-table th {
+    background: var(--bg-2) !important; color: var(--ink-soft) !important;
+    font-weight: 700 !important; font-size: .78rem !important; text-transform: uppercase; letter-spacing: .06em;
+    padding: .95rem 1rem !important; border-bottom: 1px solid var(--line) !important; text-align: left;
+}
+.dashboard-table th:first-child { border-top-left-radius: var(--r-sm); }
+.dashboard-table th:last-child { border-top-right-radius: var(--r-sm); }
+.dashboard-table td { padding: .95rem 1rem !important; border-bottom: 1px solid var(--line-2) !important; color: var(--ink-soft); font-size: .95rem; }
+.dashboard-table tbody tr { background: #fff !important; transition: background-color .2s; }
+.dashboard-table tbody tr:nth-child(even) { background: var(--surface-2) !important; }
+.dashboard-table tbody tr:hover { background: rgba(99,102,241,.05) !important; }
+.dashboard-table td:nth-child(4) { font-weight: 700 !important; color: var(--brand-2) !important; }
+.download-report-btn {
+    display: inline-flex !important; align-items: center; gap: .4rem;
+    padding: .5rem 1rem !important; border-radius: var(--r-pill) !important;
+    border: 1.5px solid rgba(99,102,241,.3) !important; color: var(--brand-1) !important;
+    background: rgba(99,102,241,.06) !important; text-decoration: none; font-size: .85rem; font-weight: 600;
+    transition: all .2s ease;
+}
+.download-report-btn:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--shadow-brand); transform: translateY(-1px); }
+
+/* =====================================================================
+   My Applications — cards + tips
+   ===================================================================== */
+.application-card {
+    background: var(--surface) !important; border: 1px solid var(--line) !important;
+    border-radius: var(--r-lg) !important; box-shadow: var(--shadow-sm) !important;
+    padding: 0 !important; overflow: hidden;
+    transition: transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s, border-color .4s;
+}
+.application-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg) !important; border-color: rgba(99,102,241,.3) !important; }
+.application-header { background: var(--grad) !important; padding: 1.25rem 1.4rem !important; }
+.application-header h3 { color: #fff !important; font-family: 'Space Grotesk', sans-serif; margin-bottom: .5rem !important; }
+.application-info span { color: rgba(255,255,255,.92) !important; font-size: .85rem; }
+.application-body { padding: 1.3rem 1.4rem !important; color: var(--muted); }
+.application-body p { color: var(--muted) !important; line-height: 1.55; margin-bottom: .5rem; }
+.application-footer { padding: 0 1.4rem 1.3rem !important; }
+.application-footer .btn-outline { border: 1.5px solid rgba(99,102,241,.4) !important; color: var(--brand-1) !important; background: #fff !important; }
+.application-footer .btn-outline:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; }
+.tips-section {
+    background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(34,211,238,.05)) !important;
+    border: 1px solid rgba(99,102,241,.18) !important; border-left: 4px solid var(--brand-1) !important;
+    border-radius: var(--r-lg) !important; padding: 1.8rem 2rem !important; box-shadow: var(--shadow-xs);
+}
+.tips-section h3 { color: var(--ink) !important; font-family: 'Space Grotesk', sans-serif; }
+.tips-section li { color: var(--ink-soft); margin-bottom: .35rem; }
+.tips-section li::marker { color: var(--brand-1); }
+
+/* =====================================================================
+   CTA band — the single, confident gradient moment
+   ===================================================================== */
 .cta {
-    background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
+    background: var(--grad) !important; position: relative; overflow: hidden;
+    padding: 4.5rem 1rem !important;
+}
+.cta::before {
+    content: ''; position: absolute; inset: 0;
+    background: radial-gradient(600px 300px at 15% 10%, rgba(255,255,255,.18), transparent 60%),
+                radial-gradient(500px 280px at 90% 100%, rgba(34,211,238,.25), transparent 60%) !important;
+    animation: none !important; top: 0; left: 0; width: 100%; height: 100%; transform: none;
 }
-.cta h2, .cta p { color: #fff !important; }
+.cta h2, .cta p { color: #fff !important; text-shadow: none !important; }
+.cta h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem) !important; }
+.cta p { color: rgba(255,255,255,.9) !important; }
+.cta .btn-primary { background: #fff !important; color: var(--brand-1) !important; box-shadow: 0 14px 30px rgba(12,17,36,.22) !important; }
+.cta .btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 20px 40px rgba(12,17,36,.28) !important; }
 
-/* ---- Footer (light) ----------------------------------------------- */
-footer { background: var(--surface) !important; color: var(--muted) !important; border-top: 1px solid var(--line); }
-.footer-col p { color: var(--muted) !important; }
-.footer-col h3 { color: var(--ink) !important; }
+/* =====================================================================
+   Footer — tidy, light, branded
+   ===================================================================== */
+footer { background: var(--surface) !important; color: var(--muted) !important; border-top: 1px solid var(--line); padding: 3.5rem 1rem 2.5rem !important; }
+.footer-col p { color: var(--muted) !important; line-height: 1.6; }
+.footer-col h3 { color: var(--ink) !important; font-family: 'Space Grotesk', sans-serif; }
 .footer-col h3::after { background: var(--grad) !important; }
-.footer-col a { color: var(--muted) !important; }
+.footer-col a { color: var(--muted) !important; text-decoration: none; transition: color .2s; }
 .footer-col a:hover { color: var(--brand-1) !important; }
-.social-links a { background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line); }
-.social-links a:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent; }
-.copyright { color: var(--muted) !important; border-top: 1px solid var(--line) !important; }
+.social-links a { background: var(--bg) !important; color: var(--ink-soft) !important; border: 1px solid var(--line); font-weight: 600; transition: all .25s; }
+.social-links a:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent; transform: translateY(-3px); box-shadow: var(--shadow-brand); }
+.copyright { color: var(--muted-2) !important; border-top: 1px solid var(--line) !important; }
 
-/* ---- Floating chatbot button -------------------------------------- */
-#chatbot-nav { background: var(--grad) !important; box-shadow: 0 10px 26px rgba(99, 102, 241, .5) !important; }
-#chatbot-nav:hover { transform: scale(1.08) !important; }
-#chat-messages .user-bubble { background: var(--grad) !important; }
+/* =====================================================================
+   Flash alerts
+   ===================================================================== */
+.flash-messages .alert { border-radius: var(--r-sm) !important; box-shadow: var(--shadow-xs) !important; border-left-width: 4px !important; font-weight: 500; }
+.alert-success { background: rgba(22,163,74,.10) !important; color: #15803d !important; border-left-color: var(--success) !important; }
+.alert-warning { background: rgba(217,119,6,.10) !important; color: #b45309 !important; border-left-color: var(--warning) !important; }
+.alert-danger  { background: rgba(220,38,38,.10) !important; color: #b91c1c !important; border-left-color: var(--danger) !important; }
+.alert-info    { background: rgba(99,102,241,.10) !important; color: var(--brand-1) !important; border-left-color: var(--brand-1) !important; }
 
 /* =====================================================================
-   "How it works" animated pipeline (used on the landing page)
-   Pure CSS reveal — auto-plays on load, films beautifully.
+   Floating chatbot button + window
    ===================================================================== */
-.pipeline { background: linear-gradient(180deg, #fff, var(--bg)); padding: 5rem 1rem; }
-.pipe-track {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 1rem;
-    max-width: 1100px;
-    margin: 0 auto;
-    position: relative;
+#chatbot-nav { background: var(--grad) !important; box-shadow: 0 12px 30px rgba(99,102,241,.5) !important; }
+#chatbot-nav:hover { transform: scale(1.08) translateY(-2px) !important; }
+#chatbot-box { border-radius: var(--r-lg) !important; border: 1px solid var(--line); box-shadow: var(--shadow-lg) !important; overflow: hidden; }
+#chatbot-box #chat-input { border-top: 1px solid var(--line) !important; }
+#chat-messages .user-bubble { background: var(--grad) !important; color: #fff !important; }
+
+/* =====================================================================
+   "How it works" animated pipeline
+   ===================================================================== */
+.pipeline {
+    background:
+        radial-gradient(700px 340px at 50% -10%, rgba(99,102,241,.07), transparent 60%),
+        linear-gradient(180deg, var(--surface), var(--bg)) !important;
+    padding: 4.5rem 1rem !important;
+    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
 }
+.pipe-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; max-width: 1120px; margin: 0 auto; position: relative; }
 .pipe-track::before {
-    content: ''; position: absolute; top: 46px; left: 8%; right: 8%; height: 3px;
-    background: linear-gradient(90deg, rgba(99,102,241,.15), rgba(139,92,246,.5), rgba(34,211,238,.15));
+    content: ''; position: absolute; top: 50px; left: 9%; right: 9%; height: 3px;
+    background: linear-gradient(90deg, rgba(99,102,241,.18), rgba(139,92,246,.6), rgba(34,211,238,.18));
     border-radius: 3px; z-index: 0;
 }
-.pipe-step {
-    position: relative; z-index: 1; text-align: center; padding: 0 .5rem;
-    opacity: 0; transform: translateY(18px);
-    animation: pipeReveal .7s ease forwards;
-}
+.pipe-step { position: relative; z-index: 1; text-align: center; padding: 0 .5rem; opacity: 0; transform: translateY(18px); animation: pipeReveal .7s ease forwards; }
 .pipe-step:nth-child(1) { animation-delay: .15s; }
 .pipe-step:nth-child(2) { animation-delay: .40s; }
 .pipe-step:nth-child(3) { animation-delay: .65s; }
 .pipe-step:nth-child(4) { animation-delay: .90s; }
 .pipe-step:nth-child(5) { animation-delay: 1.15s; }
 .pipe-node {
-    width: 92px; height: 92px; margin: 0 auto 1.1rem; border-radius: 24px;
-    display: grid; place-items: center; font-size: 2.1rem;
-    color: #fff; background: var(--grad);
-    box-shadow: 0 14px 30px rgba(99, 102, 241, .35);
-    position: relative;
+    width: 100px; height: 100px; margin: 0 auto 1.2rem; border-radius: 26px;
+    display: grid; place-items: center; font-size: 2.2rem; color: #fff; background: var(--grad);
+    box-shadow: 0 16px 32px rgba(99,102,241,.35); position: relative;
+    border: 4px solid #fff;
 }
-.pipe-node::after {
-    content: ''; position: absolute; inset: -6px; border-radius: 28px;
-    border: 2px solid rgba(139, 92, 246, .4);
-    animation: pipeHalo 2.4s ease-in-out infinite;
-}
-.pipe-step:nth-child(even) .pipe-node::after { animation-delay: 1.2s; }
-.pipe-step h4 { font-family: 'Space Grotesk', sans-serif; color: var(--ink); margin-bottom: .4rem; font-size: 1.05rem; }
-.pipe-step p { color: var(--muted); font-size: .92rem; line-height: 1.45; }
-.pipe-num {
-    display: inline-block; font-size: .75rem; font-weight: 700; color: var(--brand-1);
-    background: var(--grad-soft); border-radius: 999px; padding: .15rem .7rem; margin-bottom: .8rem;
-}
-
+.pipe-node::after { content: ''; position: absolute; inset: -8px; border-radius: 30px; border: 2px solid rgba(139,92,246,.45); animation: pipeHalo 2.6s ease-in-out infinite; }
+.pipe-step:nth-child(even) .pipe-node::after { animation-delay: 1.3s; }
+.pipe-step h4 { color: var(--ink); margin-bottom: .45rem; font-size: 1.08rem; }
+.pipe-step p { color: var(--muted); font-size: .92rem; line-height: 1.5; }
+.pipe-num { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--brand-1); background: var(--grad-soft); border: 1px solid rgba(99,102,241,.18); border-radius: var(--r-pill); padding: .18rem .75rem; margin-bottom: .8rem; }
 @keyframes pipeReveal { to { opacity: 1; transform: translateY(0); } }
-@keyframes pipeHalo {
-    0%, 100% { transform: scale(1); opacity: .5; }
-    50%      { transform: scale(1.08); opacity: 0; }
-}
+@keyframes pipeHalo { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.08); opacity: 0; } }
 
+/* =====================================================================
+   Responsive
+   ===================================================================== */
+@media (max-width: 900px) {
+    .float-chip { display: none; }
+}
 @media (max-width: 860px) {
-    .pipe-track { grid-template-columns: 1fr 1fr; }
+    .pipe-track { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
     .pipe-track::before { display: none; }
 }
+@media (max-width: 768px) {
+    .hero { padding: 3.2rem 1rem 3.6rem !important; }
+    .section-title { margin-bottom: 2rem !important; }
+    .content-section, .features, .pipeline, .cta { padding: 3rem 1rem !important; }
+    .nav-container { flex-wrap: wrap; }
+}
 @media (max-width: 480px) {
     .pipe-track { grid-template-columns: 1fr; }
+    .logo { font-size: 1.45rem !important; }
 }

backend/templates/base.html

@@ -1014,5 +1014,24 @@
         word-wrap: break-word;
       }
     </style>
+    <!-- Cosmetic scroll-reveal (additive, no functional impact; degrades gracefully without JS) -->
+    <script>
+      (function () {
+        if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+        if (!('IntersectionObserver' in window)) return;
+        var sel = '.feature-card, .job-card, .application-card, .section-title, .cta .container, .tips-section, .card';
+        var els = Array.prototype.slice.call(document.querySelectorAll(sel));
+        els.forEach(function (el, i) {
+          el.setAttribute('data-reveal', '');
+          el.style.transitionDelay = (Math.min(i, 6) * 60) + 'ms';
+        });
+        var io = new IntersectionObserver(function (entries) {
+          entries.forEach(function (e) {
+            if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
+          });
+        }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
+        els.forEach(function (el) { io.observe(el); });
+      })();
+    </script>
 </body>
 </html>

backend/templates/index.html

@@ -11,18 +11,18 @@
                 <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">
+                        <img src="{{ url_for('static', filename='images/LUNA.png') }}" alt="LUNA — your AI recruiter">
                     </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>
-            <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
+            <h1>Meet <span class="grad-text">LUNA</span>, your AI recruiter</h1>
+            <p>She screens CVs, runs real voice interviews, and scores every answer against a live question
                 database — so you find the right technical talent faster, and fairer.</p>
             <div class="hero-buttons">
                 <a href="{{ url_for('jobs') }}" class="btn btn-primary">Find Jobs</a>
-                <a href="https://www.youtube.com/watch?v=P6HG27fsJgU" class="btn btn-outline">Watch Demo</a>
+                <a href="https://www.youtube.com/watch?v=P6HG27fsJgU" class="btn btn-outline">▶  Watch Demo</a>
             </div>
         </div>
     </div>