🎨 Complete redesign: Premium research platform landing page

✨ Features:
- Dark gradient hero section with subtle animations
- Research paper-inspired content and terminology
- Four feature highlights (Interactive Graphs, Failure Detection, Robustness Testing, Causal Analysis)
- Professional institutions credit (Holistic AI × UCL)
- Premium glass-morphism design elements

🎨 Visual Design:
- Dark theme with gradient background (#0f172a → #334155)
- Inter font family for modern typography
- Gradient text effects and backdrop blur
- Floating video container with 'Live Demo' badge
- Hover effects and smooth transitions
- Mobile-responsive two-column layout

📝 Content Updates:
- Full research paper subtitle
- Academic-style feature descriptions
- Professional 'Research Platform' badge
- Institutional collaboration credits
- Research-focused authentication messaging

🚀 User Experience:
- Hero section spans full viewport
- Clean information hierarchy
- Call-to-action: 'Access Research Platform'
- Embedded demo video with enhanced styling
- Responsive design for all devices

backend/routers/auth.py

@@ -293,7 +293,7 @@ async def login_page(request: Request):
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>AgentGraph - Login Required</title>
+        <title>AgentGraph - Interactive Analysis Platform for Agentic AI Systems</title>
         <meta http-equiv="Permissions-Policy" content="payment=(), microphone=(), camera=(), geolocation=()">
         <style>
             * {
@@ -303,88 +303,195 @@ async def login_page(request: Request):
             }
             
             body {
-                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-                background: #f8fafc;
+                font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
+                min-height: 100vh;
+                color: #f8fafc;
+                overflow-x: hidden;
+            }
+            
+            .hero-section {
                 min-height: 100vh;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                padding: 20px;
-                color: #2d3748;
+                padding: 40px 20px;
+                position: relative;
             }
             
-            .login-container {
-                background: white;
-                padding: 48px;
-                border-radius: 12px;
-                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
-                max-width: 800px;
+            .hero-section::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: 
+                    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                    radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.2) 0%, transparent 50%),
+                    radial-gradient(circle at 40% 80%, rgba(34, 197, 94, 0.2) 0%, transparent 50%);
+                pointer-events: none;
+            }
+            
+            .container {
+                max-width: 1200px;
                 width: 100%;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 80px;
+                align-items: center;
+                position: relative;
+                z-index: 1;
             }
             
-            .header {
-                text-align: center;
-                margin-bottom: 40px;
+            .content-section {
+                padding: 0 20px;
+            }
+            
+            .badge {
+                display: inline-flex;
+                align-items: center;
+                background: rgba(255, 255, 255, 0.1);
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                padding: 8px 16px;
+                border-radius: 24px;
+                font-size: 14px;
+                font-weight: 500;
+                margin-bottom: 24px;
+                color: #f1f5f9;
+            }
+            
+            .badge::before {
+                content: '🎓';
+                margin-right: 8px;
             }
             
             h1 {
-                font-size: 32px;
-                font-weight: 700;
-                margin-bottom: 8px;
-                color: #1a202c;
+                font-size: clamp(2.5rem, 5vw, 4rem);
+                font-weight: 800;
+                line-height: 1.1;
+                margin-bottom: 16px;
+                background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
             }
             
             .subtitle {
-                color: #718096;
-                font-size: 18px;
+                font-size: 20px;
+                color: #94a3b8;
                 font-weight: 400;
+                line-height: 1.5;
+                margin-bottom: 32px;
             }
             
-            .content {
+            .description {
+                font-size: 16px;
+                line-height: 1.7;
+                color: #cbd5e1;
+                margin-bottom: 40px;
+            }
+            
+            .features-grid {
                 display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 40px;
-                align-items: center;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 16px;
+                margin-bottom: 40px;
             }
             
-            .left-section {
-                text-align: left;
+            .feature-item {
+                background: rgba(255, 255, 255, 0.05);
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                padding: 16px;
+                border-radius: 12px;
+                transition: all 0.3s ease;
             }
             
-            .description {
-                color: #4a5568;
-                line-height: 1.6;
-                margin-bottom: 32px;
-                font-size: 16px;
+            .feature-item:hover {
+                background: rgba(255, 255, 255, 0.08);
+                border-color: rgba(255, 255, 255, 0.2);
+            }
+            
+            .feature-title {
+                font-weight: 600;
+                font-size: 14px;
+                color: #f1f5f9;
+                margin-bottom: 4px;
+            }
+            
+            .feature-desc {
+                font-size: 12px;
+                color: #94a3b8;
+                line-height: 1.4;
+            }
+            
+            .cta-section {
+                display: flex;
+                flex-direction: column;
+                gap: 16px;
             }
             
             .login-btn {
-                background: #3182ce;
+                background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
                 color: white;
-                padding: 16px 32px;
-                border-radius: 8px;
+                padding: 18px 32px;
+                border-radius: 12px;
                 text-decoration: none;
                 font-weight: 600;
                 font-size: 16px;
-                display: inline-block;
-                transition: all 0.2s ease;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                gap: 8px;
+                transition: all 0.3s ease;
                 border: none;
                 cursor: pointer;
+                box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
             }
             
             .login-btn:hover {
-                background: #2c5282;
-                transform: translateY(-1px);
+                transform: translateY(-2px);
+                box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+            }
+            
+            .login-btn::after {
+                content: '→';
+                transition: transform 0.3s ease;
+            }
+            
+            .login-btn:hover::after {
+                transform: translateX(4px);
+            }
+            
+            .research-info {
+                background: rgba(255, 255, 255, 0.05);
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                padding: 16px;
+                border-radius: 12px;
+                font-size: 14px;
+                color: #94a3b8;
+            }
+            
+            .video-section {
+                position: relative;
+                padding: 20px;
             }
             
             .video-container {
                 position: relative;
                 width: 100%;
                 height: 0;
-                padding-bottom: 56.25%; /* 16:9 aspect ratio */
-                border-radius: 8px;
+                padding-bottom: 56.25%;
+                border-radius: 16px;
                 overflow: hidden;
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+                box-shadow: 
+                    0 20px 40px rgba(0, 0, 0, 0.3),
+                    0 0 0 1px rgba(255, 255, 255, 0.1);
+                background: rgba(255, 255, 255, 0.05);
+                backdrop-filter: blur(10px);
             }
             
             .video-container iframe {
@@ -394,67 +501,150 @@ async def login_page(request: Request):
                 width: 100%;
                 height: 100%;
                 border: 0;
+                border-radius: 16px;
             }
             
-            .notice {
-                text-align: center;
+            .video-overlay {
+                position: absolute;
+                top: -20px;
+                right: -20px;
+                background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+                color: white;
+                padding: 8px 16px;
+                border-radius: 8px;
+                font-size: 12px;
+                font-weight: 600;
+                box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
+            }
+            
+            .institutions {
                 margin-top: 32px;
                 padding-top: 24px;
-                border-top: 1px solid #e2e8f0;
-                color: #718096;
+                border-top: 1px solid rgba(255, 255, 255, 0.1);
+            }
+            
+            .institutions-title {
+                font-size: 12px;
+                color: #64748b;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                margin-bottom: 12px;
+            }
+            
+            .institutions-list {
                 font-size: 14px;
+                color: #94a3b8;
+                line-height: 1.6;
             }
             
             @media (max-width: 768px) {
-                .login-container {
-                    padding: 32px 24px;
+                .container {
+                    grid-template-columns: 1fr;
+                    gap: 40px;
+                    padding: 20px;
                 }
                 
-                .content {
+                .content-section {
+                    padding: 0;
+                    order: 2;
+                }
+                
+                .video-section {
+                    order: 1;
+                    padding: 0;
+                }
+                
+                .features-grid {
                     grid-template-columns: 1fr;
-                    gap: 32px;
                 }
                 
                 h1 {
-                    font-size: 28px;
+                    font-size: 2.5rem;
                 }
                 
                 .subtitle {
-                    font-size: 16px;
+                    font-size: 18px;
+                }
+            }
+            
+            @media (max-width: 480px) {
+                .hero-section {
+                    padding: 20px 10px;
+                }
+                
+                .video-overlay {
+                    display: none;
                 }
             }
         </style>
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     </head>
     <body>
-        <div class="login-container">
-            <div class="header">
-                <h1>AgentGraph</h1>
-                <div class="subtitle">AI-Powered Knowledge Graph Analysis</div>
-            </div>
-            
-            <div class="content">
-                <div class="left-section">
+        <div class="hero-section">
+            <div class="container">
+                <div class="content-section">
+                    <div class="badge">Research Platform</div>
+                    
+                    <h1>AgentGraph</h1>
+                    <div class="subtitle">
+                        Trace-to-Graph Platform for Interactive Analysis and Robustness Testing in Agentic AI Systems
+                    </div>
+                    
                     <p class="description">
-                        AgentGraph uses advanced AI models to extract and analyze knowledge graphs from conversational data. 
-                        Authentication is required to ensure responsible usage of AI resources and prevent abuse.
+                        Convert execution logs into interactive knowledge graphs with actionable insights. 
+                        Enable qualitative failure detection and quantitative robustness evaluation through 
+                        perturbation testing and causal attribution.
                     </p>
                     
-                    <a href="/auth/login" class="login-btn">Continue with Hugging Face</a>
+                    <div class="features-grid">
+                        <div class="feature-item">
+                            <div class="feature-title">Interactive Graphs</div>
+                            <div class="feature-desc">Transform traces into knowledge graphs with nodes for agents, tasks, and tools</div>
+                        </div>
+                        <div class="feature-item">
+                            <div class="feature-title">Failure Detection</div>
+                            <div class="feature-desc">Identify agent errors, planning issues, and hallucinations automatically</div>
+                        </div>
+                        <div class="feature-item">
+                            <div class="feature-title">Robustness Testing</div>
+                            <div class="feature-desc">Jailbreak attempts and counterfactual fairness evaluation</div>
+                        </div>
+                        <div class="feature-item">
+                            <div class="feature-title">Causal Analysis</div>
+                            <div class="feature-desc">Attribution of behavioral changes to specific components</div>
+                        </div>
+                    </div>
+                    
+                    <div class="cta-section">
+                        <a href="/auth/login" class="login-btn">
+                            Access Research Platform
+                        </a>
+                        
+                        <div class="research-info">
+                            Authentication required to ensure responsible usage of OpenAI models and prevent abuse of research resources.
+                        </div>
+                    </div>
+                    
+                    <div class="institutions">
+                        <div class="institutions-title">Research Collaboration</div>
+                        <div class="institutions-list">
+                            Holistic AI × Centre for Artificial Intelligence, UCL
+                        </div>
+                    </div>
                 </div>
                 
-                <div class="video-container">
-                    <iframe 
-                        src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p" 
-                        title="AgentGraph Demo" 
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-                        allowfullscreen>
-                    </iframe>
+                <div class="video-section">
+                    <div class="video-container">
+                        <div class="video-overlay">Live Demo</div>
+                        <iframe 
+                            src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p" 
+                            title="AgentGraph: Interactive Analysis Platform Demo" 
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                            allowfullscreen>
+                        </iframe>
+                    </div>
                 </div>
             </div>
-            
-            <div class="notice">
-                By continuing, you agree to use this service responsibly and in accordance with our usage policies.
-            </div>
         </div>
     </body>
     </html>