Update spiritual path assessment with improved UI and design tokens

app.py

@@ -224,7 +224,7 @@ def assessment():
     return render_template(
         "index.html", 
         title="Spiritual Path Finder", 
-        message=f"Welcome, {session['username']}! 🌟",
+        message=f"Welcome, {session['username']}!",
         username=session['username'],
         logged_in=True,
         questions=QUESTIONS,

static/design-tokens.css

@@ -0,0 +1,77 @@
+:root {
+    /* 🎨 Primary Colors */
+    --primary-dark: #3D3D3D;
+    --primary-black: #1A1A1A;
+    --primary-light: #6B7280;
+    
+    /* Neutral Colors */
+    --bg-gray: #F5F5F5;
+    --bg-white: #FFFFFF;
+    --bg-surface-alt: #FAFAFA;
+    --border-divider: #E9ECEF;
+    
+    /* Semantic Colors */
+    --success: #10B981;
+    --warning: #F59E0B;
+    --error: #EF4444;
+    --info: #6366F1;
+    
+    /* Result Ranking Colors */
+    --rank-1: #FEF3C7;
+    --rank-2: #DBEAFE;
+    --rank-3: #D1FAE5;
+
+    
+    /* Text Colors */
+    --text-primary: #3D3D3D;
+    --text-secondary: #6B7280;
+    --text-tertiary: #9CA3AF;
+    --text-inverse: #FFFFFF;
+    
+    /* 📏 Typography */
+    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    
+    --font-size-xs: 0.8125rem;     /* 13px */
+    --font-size-sm: 0.875rem;      /* 14px */
+    --font-size-base: 1rem;        /* 16px */
+    --font-size-lg: 1.125rem;      /* 18px */
+    --font-size-xl: 1.25rem;       /* 20px */
+    --font-size-2xl: 1.375rem;     /* 22px */
+    --font-size-3xl: 1.5rem;       /* 24px */
+    --font-size-4xl: 1.75rem;      /* 28px */
+    
+    --font-weight-regular: 400;
+    --font-weight-medium: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    
+    /* 📐 Spacing System (4px base unit) */
+    --space-xs: 0.5rem;      /* 8px */
+    --space-sm: 0.75rem;     /* 12px */
+    --space-md: 1rem;        /* 16px */
+    --space-lg: 1.25rem;     /* 20px */
+    --space-xl: 1.5rem;      /* 24px */
+    --space-2xl: 2rem;       /* 32px */
+    --space-3xl: 2.5rem;     /* 40px */
+    
+    /* 🔲 Border Radius */
+    --radius-sm: 8px;
+    --radius-md: 10px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 50%;
+    
+    /* 🎭 Shadows */
+    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
+    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --shadow-xl: 0 4px 20px rgba(0, 0, 0, 0.08);
+    
+    /* 🔄 Transitions */
+    --transition-fast: 0.2s;
+    --transition-base: 0.3s;
+    --transition-slow: 0.4s;
+    
+    /* 📱 Breakpoints */
+    --breakpoint-mobile: 768px;
+}

static/landing.css

@@ -1,455 +1,437 @@
+@import url('design-tokens.css');
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
-:root {
-    --primary: #6366f1;
-    --primary-dark: #4f46e5;
-    --secondary: #8b5cf6;
-    --accent: #ec4899;
-    --text-dark: #1e293b;
-    --text-light: #64748b;
-    --bg-white: #ffffff;
-    --bg-light: #f8fafc;
-}
-
-body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    line-height: 1.6;
-    color: var(--text-dark);
-    background: var(--bg-white);
-    overflow-x: hidden;
-}
-
-/* Animated Gradient Background */
-.gradient-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-    opacity: 0.05;
-    z-index: -1;
-    animation: gradientShift 15s ease infinite;
-}
-
-@keyframes gradientShift {
-    0%, 100% { transform: scale(1) rotate(0deg); }
-    50% { transform: scale(1.1) rotate(5deg); }
-}
-
-/* Navigation */
-.navbar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    z-index: 1000;
-    padding: 1rem 0;
-}
-
-.nav-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.logo {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: var(--text-dark);
-}
-
-.nav-cta {
-    padding: 0.625rem 1.5rem;
-    background: var(--primary);
-    color: white;
-    text-decoration: none;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 0.9rem;
-    transition: all 0.3s ease;
-}
-
-.nav-cta:hover {
-    background: var(--primary-dark);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-}
-
-/* Main Content */
-.main-content {
-    padding-top: 80px;
-}
-
-/* Hero Section */
-.hero-section {
-    padding: 6rem 2rem 4rem;
-    text-align: center;
-    position: relative;
-}
-
-.hero-container {
-    max-width: 1000px;
-    margin: 0 auto;
-}
-
-.badge {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
-    border: 1px solid rgba(99, 102, 241, 0.2);
-    border-radius: 50px;
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--primary);
-    margin-bottom: 2rem;
-    animation: fadeInUp 0.6s ease;
-}
-
-.hero-title {
-    font-size: 4.5rem;
-    font-weight: 800;
-    line-height: 1.1;
-    margin-bottom: 1.5rem;
-    color: var(--text-dark);
-    animation: fadeInUp 0.6s ease 0.1s both;
-}
-
-.gradient-text {
-    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.hero-subtitle {
-    font-size: 1.25rem;
-    color: var(--text-light);
-    max-width: 700px;
-    margin: 0 auto 3rem;
-    line-height: 1.8;
-    animation: fadeInUp 0.6s ease 0.2s both;
-}
-
-.cta-buttons {
-    animation: fadeInUp 0.6s ease 0.3s both;
-}
-
-.btn-primary, .btn-secondary {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 1rem 2.5rem;
-    font-size: 1.125rem;
-    font-weight: 600;
-    text-decoration: none;
-    border-radius: 12px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-}
-
-.btn-primary {
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
-    color: white;
-    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
-}
-
-.btn-primary:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
-}
-
-.btn-primary .arrow {
-    transition: transform 0.3s ease;
-}
-
-.btn-primary:hover .arrow {
-    transform: translateX(5px);
-}
-
-.assessment-meta {
-    display: flex;
-    justify-content: center;
-    gap: 2rem;
-    margin-top: 2rem;
-    font-size: 0.9rem;
-    color: var(--text-light);
-}
-
-/* Hero Visual */
-.hero-visual {
-    position: relative;
-    height: 400px;
-    margin-top: 5rem;
-    max-width: 900px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.floating-card {
-    position: absolute;
-    background: white;
-    padding: 1.25rem 1.75rem;
-    border-radius: 16px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    animation: float 6s ease-in-out infinite;
-    white-space: nowrap;
-}
-
-.floating-card .card-icon {
-    font-size: 1.75rem;
-    flex-shrink: 0;
-}
-
-.floating-card .card-text {
-    font-weight: 600;
-    color: var(--text-dark);
-    font-size: 0.95rem;
-}
-
-.card-1 {
-    left: 5%;
-    top: 10%;
-    animation-delay: 0s;
-}
-
-.card-2 {
-    right: 5%;
-    top: 50%;
-    animation-delay: 2s;
-}
-
-.card-3 {
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 10%;
-    animation-delay: 4s;
-}
-
-@keyframes float {
-    0%, 100% { 
-        transform: translateY(0px);
-    }
-    50% { 
-        transform: translateY(-20px);
+    body {
+        font-family: var(--font-family);
+        line-height: 1.6;
+        color: var(--text-primary);
+        background: var(--bg-white);
+        overflow-x: hidden;
     }
-}
-
-/* Fix for card-3 animation to maintain centering */
-.card-3 {
-    animation: floatCenter 6s ease-in-out infinite;
-}
-
-@keyframes floatCenter {
-    0%, 100% { 
-        transform: translate(-50%, 0px);
+    
+    /* Animated Gradient Background */
+    .gradient-bg {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100vh;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+        opacity: 0.05;
+        z-index: -1;
+        animation: gradientShift 15s ease infinite;
     }
-    50% { 
-        transform: translate(-50%, -20px);
+    
+    @keyframes gradientShift {
+        0%, 100% { transform: scale(1) rotate(0deg); }
+        50% { transform: scale(1.1) rotate(5deg); }
     }
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
+    
+    /* Navigation */
+    .navbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background: rgba(255, 255, 255, 0.8);
+        backdrop-filter: blur(10px);
+        border-bottom: 1px solid var(--border-divider);
+        z-index: 1000;
+        padding: var(--space-md) 0;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
+    
+    .nav-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 var(--space-2xl);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
     }
-}
-
-/* Features Section */
-.features-section {
-    padding: 6rem 2rem;
-    background: var(--bg-light);
-}
-
-.section-container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.section-header {
-    text-align: center;
-    margin-bottom: 4rem;
-}
-
-.section-header h2 {
-    font-size: 3rem;
-    font-weight: 800;
-    color: var(--text-dark);
-    margin-bottom: 1rem;
-}
-
-.section-header p {
-    font-size: 1.25rem;
-    color: var(--text-light);
-}
-
-.features-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 2rem;
-}
-
-.feature-card {
-    background: white;
-    padding: 2.5rem;
-    border-radius: 20px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-    transition: all 0.3s ease;
-}
-
-.feature-card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
-}
-
-.feature-icon-wrapper {
-    width: 80px;
-    height: 80px;
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 1.5rem;
-}
-
-.feature-icon {
-    font-size: 2.5rem;
-}
-
-.feature-card h3 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--text-dark);
-    margin-bottom: 1rem;
-}
-
-.feature-card p {
-    color: var(--text-light);
-    line-height: 1.8;
-}
-
-/* CTA Section */
-.cta-section {
-    padding: 6rem 2rem;
-    text-align: center;
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
-    color: white;
-}
-
-.cta-container h2 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin-bottom: 1rem;
-}
-
-.cta-container p {
-    font-size: 1.25rem;
-    margin-bottom: 2.5rem;
-    opacity: 0.9;
-}
-
-.btn-secondary {
-    background: white;
-    color: var(--primary);
-}
-
-.btn-secondary:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
-}
-
-/* Footer */
-.footer {
-    background: var(--text-dark);
-    color: white;
-    padding: 3rem 2rem;
-    text-align: center;
-}
-
-.footer-container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.footer p {
-    opacity: 0.7;
-}
-
-/* Responsive Design */
-@media (max-width: 1024px) {
-    .hero-visual {
-        height: 300px;
+    
+    .logo {
+        font-size: var(--font-size-xl);
+        font-weight: var(--font-weight-bold);
+        color: var(--text-primary);
     }
     
-    .floating-card {
-        padding: 1rem 1.5rem;
-        font-size: 0.85rem;
+    .nav-cta {
+        padding: var(--space-sm) var(--space-xl);
+        background: var(--info);
+        color: var(--text-inverse);
+        text-decoration: none;
+        border-radius: var(--radius-sm);
+        font-weight: var(--font-weight-medium);
+        font-size: var(--font-size-sm);
+        transition: all var(--transition-base);
     }
     
-    .floating-card .card-icon {
-        font-size: 1.5rem;
+    .nav-cta:hover {
+        background: var(--primary-dark);
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
     }
-}
-
-@media (max-width: 768px) {
-    .nav-container {
-        padding: 0 1rem;
+    
+    /* Main Content */
+    .main-content {
+        padding-top: 80px;
     }
     
+    /* Hero Section */
     .hero-section {
-        padding: 4rem 1rem 3rem;
+        padding: var(--space-3xl) var(--space-2xl) var(--space-2xl);
+        text-align: center;
+        position: relative;
+    }
+    
+    .hero-container {
+        max-width: 1000px;
+        margin: 0 auto;
+    }
+    
+    .badge {
+        display: inline-block;
+        padding: var(--space-xs) var(--space-md);
+        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
+        /* border: 1px solid rgba(99, 102, 241, 0.2); */
+        border-radius: var(--radius-lg);
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-medium);
+        color: var(--info);
+        margin-bottom: var(--space-2xl);
+        animation: fadeInUp 0.6s ease;
     }
     
     .hero-title {
-        font-size: 2.5rem;
+        font-size: 4.5rem;
+        font-weight: var(--font-weight-extrabold);
+        line-height: 1.1;
+        margin-bottom: var(--space-xl);
+        color: var(--text-primary);
+        animation: fadeInUp 0.6s ease 0.1s both;
+    }
+    
+    .gradient-text {
+        background: linear-gradient(135deg, var(--info), var(--success));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
     }
     
     .hero-subtitle {
-        font-size: 1.1rem;
+        font-size: var(--font-size-xl);
+        color: var(--text-secondary);
+        max-width: 700px;
+        margin: 0 auto var(--space-3xl);
+        line-height: 1.8;
+        animation: fadeInUp 0.6s ease 0.2s both;
+    }
+    
+    .cta-buttons {
+        animation: fadeInUp 0.6s ease 0.3s both;
+    }
+    
+    .btn-primary, .btn-secondary {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-sm);
+        padding: var(--space-md) var(--space-3xl);
+        font-size: var(--font-size-lg);
+        font-weight: var(--font-weight-medium);
+        text-decoration: none;
+        border-radius: var(--radius-md);
+        transition: all var(--transition-base);
+        cursor: pointer;
+    }
+    
+    .btn-primary {
+        background: linear-gradient(135deg, var(--info), var(--success));
+        color: var(--text-inverse);
+        box-shadow: var(--shadow-xl);
+    }
+    
+    .btn-primary:hover {
+        transform: translateY(-3px);
+        box-shadow: var(--shadow-xl);
+    }
+    
+    .btn-primary .arrow {
+        transition: transform var(--transition-base);
+    }
+    
+    .btn-primary:hover .arrow {
+        transform: translateX(5px);
     }
     
     .assessment-meta {
-        flex-direction: column;
-        gap: 0.5rem;
+        display: flex;
+        justify-content: center;
+        gap: var(--space-2xl);
+        margin-top: var(--space-2xl);
+        font-size: var(--font-size-sm);
+        color: var(--text-secondary);
     }
     
+    /* Hero Visual */
     .hero-visual {
-        display: none;
+        position: relative;
+        height: 400px;
+        margin-top: var(--space-3xl);
+        max-width: 900px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    
+    .floating-card {
+        position: absolute;
+        background: var(--bg-white);
+        padding: var(--space-xl) var(--space-lg);
+        border-radius: var(--radius-xl);
+        box-shadow: var(--shadow-xl);
+        display: flex;
+        align-items: center;
+        gap: var(--space-md);
+        animation: float 6s ease-in-out infinite;
+        white-space: nowrap;
+    }
+    
+    .floating-card .card-icon {
+        font-size: 1.75rem;
+        flex-shrink: 0;
+    }
+    
+    .floating-card .card-text {
+        font-weight: var(--font-weight-medium);
+        color: var(--text-primary);
+        font-size: var(--font-size-sm);
+    }
+    
+    .card-1 {
+        left: 5%;
+        top: 10%;
+        animation-delay: 0s;
+    }
+    
+    .card-2 {
+        right: 5%;
+        top: 50%;
+        animation-delay: 2s;
+    }
+    
+    .card-3 {
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 10%;
+        animation-delay: 4s;
+    }
+    
+    @keyframes float {
+        0%, 100% { transform: translateY(0px); }
+        50% { transform: translateY(-20px); }
+    }
+    
+    .card-3 {
+        animation: floatCenter 6s ease-in-out infinite;
+    }
+    
+    @keyframes floatCenter {
+        0%, 100% { transform: translate(-50%, 0px); }
+        滚动 { transform: translate(-50%, -20px); }
+    }
+    
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    
+    /* Features Section */
+    .features-section {
+        padding: var(--space-3xl) var(--space-2xl);
+        background: var(--bg-gray);
+    }
+    
+    .section-container {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    
+    .section-header {
+        text-align: center;
+        margin-bottom: var(--space-2xl);
     }
     
     .section-header h2 {
-        font-size: 2rem;
+        font-size: var(--font-size-4xl);
+        font-weight: var(--font-weight-extrabold);
+        color: var(--text-primary);
+        margin-bottom: var(--space-md);
     }
     
-    .cta-container h2 {
-        font-size: 2rem;
+    .section-header p {
+        font-size: var(--font-size-xl);
+        color: var(--text-secondary);
     }
     
     .features-grid {
-        grid-template-columns: 1fr;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+        gap: var(--space-2xl);
     }
     
-    .btn-primary, .btn-secondary {
-        padding: 0.875rem 2rem;
-        font-size: 1rem;
+    .feature-card {
+        background: var(--bg-white);
+        padding: var(--space-3xl);
+        border-radius: var(--radius-lg);
+        box-shadow: var(--shadow-md);
+        transition: all var(--transition-base);
     }
-}
+    
+    .feature-card:hover {
+        transform: translateY(-8px);
+        box-shadow: var(--shadow-xl);
+    }
+    
+    .feature-icon-wrapper {
+        width: 80px;
+        height: 80px;
+        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
+        border-radius: var(--radius-lg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: var(--space-xl);
+    }
+    
+    .feature-icon {
+        font-size: 2.5rem;
+    }
+    
+    .feature-card h3 {
+        font-size: var(--font-size-2xl);
+        font-weight: var(--font-weight-bold);
+        color: var(--text-primary);
+        margin-bottom: var(--space-md);
+    }
+    
+    .feature-card p {
+        color: var(--text-secondary);
+        line-height: 1.8;
+    }
+    
+    /* CTA Section */
+    .cta-section {
+        padding: var(--space-3xl) var(--space-2xl);
+        text-align: center;
+        background: linear-gradient(135deg, var(--info), var(--success));
+        color: var(--text-inverse);
+    }
+    
+    .cta-container h2 {
+        font-size: var(--font-size-4xl);
+        font-weight: var(--font-weight-extrabold);
+        margin-bottom: var(--space-md);
+    }
+    
+    .cta-container p {
+        font-size: var(--font-size-xl);
+        margin-bottom: var(--space-3xl);
+        opacity: 0.9;
+    }
+    
+    .btn-secondary {
+        background: var(--bg-white);
+        color: var(--info);
+    }
+    
+    .btn-secondary:hover {
+        transform: translateY(-3px);
+        box-shadow: var(--shadow-xl);
+    }
+    
+    /* Footer */
+    .footer {
+        background: var(--primary-black);
+        color: var(--text-inverse);
+        padding: var(--space-3xl) var(--space-2xl);
+        text-align: center;
+    }
+    
+    .footer-container {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    
+    .footer p {
+        opacity: 0.7;
+    }
+    
+    /* Responsive Design */
+    @media (max-width: 1024px) {
+        .hero-visual {
+            height: 300px;
+        }
+        
+        .floating-card {
+            padding: var(--space-md) var(--space-xl);
+            font-size: var(--font-size-sm);
+        }
+        
+        .floating-card .card-icon {
+            font-size: 1.5rem;
+        }
+    }
+    
+    @media (max-width: 768px) {
+        .nav-container {
+            padding: 0 var(--space-md);
+        }
+        
+        .hero-section {
+            padding: var(--space-2xl) var(--space-md) var(--space-3xl);
+        }
+        
+        .hero-title {
+            font-size: 2.5rem;
+        }
+        
+        .hero-subtitle {
+            font-size: var(--font-size-lg);
+        }
+        
+        .assessment-meta {
+            flex-direction: column;
+            gap: var(--space-sm);
+        }
+        
+        .hero-visual {
+            display: none;
+        }
+        
+        .section-header h2 {
+            font-size: var(--font-size-2xl);
+        }
+        
+        .cta-container h2 {
+            font-size: var(--font-size-2xl);
+        }
+        
+        .features-grid {
+            grid-template-columns: 1fr;
+        }
+        
+        .btn-primary, .btn-secondary {
+            padding: var(--space-md) var(--space-2xl);
+            font-size: var(--font-size-base);
+        }
+    }

static/style.css

@@ -1,3 +1,6 @@
+@import url('design-tokens.css');
+
+/* ===== RESET & BASE ===== */
 * {
     margin: 0;
     padding: 0;
@@ -5,139 +8,101 @@
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background: #F5F5F5;
+    font-family: var(--font-family);
+    background: var(--bg-gray);
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 10px;
+    padding: var(--space-sm);
 }
 
+/* ===== LAYOUT ===== */
 .container {
-    background: white;
-    border-radius: 16px;
-    padding: 20px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    background: var(--bg-white);
+    border-radius: var(--radius-xl);
+    padding: var(--space-lg);
+    box-shadow: var(--shadow-xl);
     max-width: 700px;
     width: 100%;
-    animation: slideIn 0.4s ease;
+    animation: slideIn var(--transition-slow) ease;
     max-height: 95vh;
     overflow-y: auto;
 }
 
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    .container {
-        padding: 15px;
-        border-radius: 12px;
-        margin: 5px;
-    }
-}
-
 @keyframes slideIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
+/* ===== TYPOGRAPHY ===== */
 h1 {
-    color: #3D3D3D;
-    font-size: 28px;
-    margin-bottom: 8px;
+    color: var(--text-primary);
+    font-size: var(--font-size-4xl);
+    margin-bottom: var(--space-xs);
     text-align: center;
-    font-weight: 800;
-}
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    h1 {
-        font-size: 24px;
-    }
+    font-weight: var(--font-weight-extrabold);
 }
 
 h3 {
     text-align: center;
-    color: #3D3D3D;
+    color: var(--text-primary);
 }
 
 p {
-    color: #6B7280;
+    color: var(--text-secondary);
     text-align: center;
-    margin-bottom: 30px;
-    font-size: 16px;
+    margin-bottom: var(--space-2xl);
+    font-size: var(--font-size-base);
 }
 
 .subtitle {
-    color: #9CA3AF;
-    font-size: 15px;
+    color: var(--text-secondary);
+    font-size: var(--font-size-base);
     text-align: center;
-    margin-bottom: 25px;
+    margin-bottom: var(--space-xl);
     line-height: 1.6;
+    max-width: 540px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    p {
-        font-size: 18px;
-    }
-    
-    .subtitle {
-        font-size: 16px;
-    }
-}
-
-/* Form Inputs */
+/* ===== FORM ELEMENTS ===== */
 input[type="text"], input[type="password"] {
     width: 100%;
-    padding: 14px 18px;
-    font-size: 16px;
+    padding: var(--space-sm) var(--space-lg);
+    font-size: var(--font-size-base);
     border: none;
-    background: #F5F5F5;
-    border-radius: 10px;
-    transition: all 0.2s;
+    background: var(--bg-gray);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
     outline: none;
 }
 
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    input[type="text"], input[type="password"] {
-        padding: 16px 20px;
-        font-size: 18px;
-    }
-}
-
 input:focus {
     background: #EBEBEB;
     box-shadow: 0 0 0 2px #E5E5E5;
 }
 
-/* Buttons - Consolidated styles */
+/* ===== BUTTONS ===== */
 button, .btn, .nav-btn, .submit-btn {
-    padding: 14px 28px;
-    font-size: 16px;
-    background: #3D3D3D;
-    color: white;
+    padding: var(--space-sm) var(--space-2xl);
+    font-size: var(--font-size-base);
+    background: var(--primary-dark);
+    color: var(--text-inverse);
     border: none;
-    border-radius: 10px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    transition: all 0.2s;
-    font-weight: 600;
+    transition: all var(--transition-fast);
+    font-weight: var(--font-weight-medium);
     text-decoration: none;
     display: inline-block;
 }
 
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    button, .btn, .nav-btn, .submit-btn {
-        padding: 16px 32px;
-        font-size: 18px;
-    }
-}
-
 button:hover, .btn:hover, .nav-btn:hover, .submit-btn:hover {
-    background: #1A1A1A;
+    background: var(--primary-black);
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-lg);
 }
 
 button:active, .btn:active {
@@ -157,31 +122,32 @@ button:disabled {
     transform: none;
 }
 
-/* Secondary Buttons - Consolidated */
+/* Secondary Buttons */
 .logout-btn, .reset-btn {
-    background: #6B7280;
-    padding: 8px 16px;
-    font-size: 13px;
-    margin-top: 15px;
+    background: var(--primary-light);
+    padding: var(--space-xs) var(--space-md);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-regular);
+    margin-top: var(--space-sm);
 }
 
 .logout-btn:hover, .reset-btn:hover {
     background: #4B5563;
-    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
+    box-shadow: var(--shadow-lg);
 }
 
 /* Submit Button */
 .submit-btn {
     width: 100%;
-    padding: 16px;
-    font-size: 16px;
-    margin-top: 10px;
+    padding: var(--space-md);
+    font-size: var(--font-size-base);
+    margin-top: var(--space-sm);
 }
 
 /* Auth Form */
 .auth-form input {
     width: 100%;
-    margin-bottom: 15px;
+    margin-bottom: var(--space-sm);
 }
 
 .auth-form button {
@@ -189,42 +155,34 @@ button:disabled {
 }
 
 .switch-link {
-    color: #3D3D3D;
+    color: var(--text-primary);
     text-decoration: none;
     cursor: pointer;
-    font-weight: 600;
-    margin-top: 15px;
+    font-weight: var(--font-weight-medium);
+    margin-top: var(--space-sm);
     display: inline-block;
-    transition: color 0.2s;
+    transition: color var(--transition-fast);
 }
 
 .switch-link:hover {
-    color: #1A1A1A;
+    color: var(--primary-black);
     text-decoration: underline;
 }
 
-/* Question Blocks */
+/* ===== QUESTION BLOCKS ===== */
 .question-block {
-    background: #FAFAFA;
-    padding: 25px;
-    border-radius: 12px;
-    margin-bottom: 20px;
+    background: var(--bg-surface-alt);
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-lg);
     border: none;
     display: none;
     min-height: 400px;
 }
 
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    .question-block {
-        padding: 20px;
-        min-height: 350px;
-    }
-}
-
 .question-block.active {
     display: block;
-    animation: fadeIn 0.3s ease;
+    animation: fadeIn var(--transition-base) ease;
 }
 
 @keyframes fadeIn {
@@ -233,77 +191,53 @@ button:disabled {
 }
 
 .question-block h4 {
-    color: #3D3D3D;
-    margin-bottom: 25px;
-    font-weight: 700;
-    font-size: 20px;
+    color: var(--text-primary);
+    margin-bottom: var(--space-xl);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-xl);
     line-height: 1.6;
 }
 
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    .question-block h4 {
-        font-size: 22px;
-    }
-}
-
 .question-number {
     display: inline-block;
-    background: #3D3D3D;
-    color: #fff;
+    background: var(--primary-dark);
+    color: var(--text-inverse);
     width: 32px;
     height: 32px;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     text-align: center;
     line-height: 32px;
-    margin-right: 12px;
-    font-size: 16px;
+    margin-right: var(--space-sm);
+    font-size: var(--font-size-sm);
 }
 
-/* Options */
+/* ===== OPTIONS ===== */
 .option {
-    display: block;
-    padding: 18px 22px;
-    margin-bottom: 14px;
-    background: white;
+    display: flex;
+    align-items: center;
+    padding: var(--space-lg) var(--space-xl);
+    margin-bottom: var(--space-sm);
+    background: var(--bg-white);
     border: none;
-    border-radius: 10px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    transition: all 0.2s;
-    font-size: 16px;
-    color: #3D3D3D;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    .option {
-        padding: 20px 24px;
-        margin-bottom: 16px;
-        font-size: 18px;
-    }
+    transition: all var(--transition-fast);
+    font-size: var(--font-size-base);
+    color: var(--text-primary);
+    box-shadow: var(--shadow-sm);
 }
 
 .option:hover {
-    background: #F5F5F5;
+    background: var(--bg-gray);
     transform: translateX(5px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-lg);
 }
 
 .option input[type="radio"] {
-    margin-right: 14px;
+    margin-right: var(--space-sm);
     cursor: pointer;
-    width: 20px;
-    height: 20px;
-}
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    .option input[type="radio"] {
-        width: 22px;
-        height: 22px;
-        margin-right: 16px;
-    }
+    width: 16px;
+    height: 16px;
 }
 
 .option input[type="radio"]:disabled {
@@ -317,61 +251,52 @@ button:disabled {
 }
 
 .option:has(input[type="radio"]:disabled):hover {
-    background: white;
+    background: var(--bg-white);
     transform: none;
 }
 
-/* Question Counter & Progress */
+/* ===== PROGRESS & NAVIGATION ===== */
 .question-counter {
     text-align: center;
     color: #999;
-    font-size: 16px;
-    margin-bottom: 15px;
-    font-weight: 600;
-}
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    .question-counter {
-        font-size: 18px;
-    }
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--space-sm);
+    font-weight: var(--font-weight-medium);
 }
 
 .progress-bar {
-    background: #F5F5F5;
+    background: var(--bg-gray);
     height: 8px;
     border-radius: 4px;
     overflow: hidden;
-    margin-bottom: 20px;
+    margin-bottom: var(--space-lg);
 }
 
 .progress-fill {
-    background: #3D3D3D;
+    background: var(--primary-dark);
     height: 100%;
-    transition: width 0.3s;
+    transition: width var(--transition-base);
 }
 
-/* Navigation */
 .nav-buttons {
     display: flex;
-    gap: 12px;
+    gap: var(--space-sm);
     justify-content: flex-start;
-    margin-top: 20px;
+    margin-top: var(--space-lg);
 }
 
-/* Previous button - styled like "Back to Home" */
 .nav-btn.prev {
     background: transparent;
     color: #999;
     border: none;
     padding: 0;
-    font-weight: 600;
-    font-size: 14px;
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-sm);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    transition: all 0.3s ease;
+    transition: all var(--transition-base) ease;
     box-shadow: none;
 }
 
@@ -384,150 +309,155 @@ button:disabled {
 
 .buttons-row {
     display: flex;
-    gap: 10px;
+    gap: var(--space-sm);
     justify-content: center;
-    margin-top: 20px;
+    margin-top: var(--space-lg);
 }
 
-/* Results */
+/* ===== RESULTS ===== */
 .result-card {
-    padding: 25px;
-    border-radius: 12px;
-    margin-bottom: 20px;
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-lg);
     border: none;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--shadow-md);
 }
 
 .result-card.rank-1 {
-    background: #FFFACD;
+    background: var(--rank-1);
 }
 
 .result-card.rank-2 {
-    background: #B4C7E7;
+    background: var(--rank-2);
 }
 
 .result-card.rank-3 {
-    background: #a6e9a6;
+    background: var(--rank-3);
 }
 
 .result-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 15px;
+    margin-bottom: var(--space-sm);
 }
 
 .result-rank {
-    color: #fff;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
+    color: var(--text-inverse);
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-full);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 20px;
-    font-weight: 800;
-    background: #3D3D3D;
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-extrabold);
+    background: var(--primary-dark);
 }
 
 .result-title {
     flex: 1;
-    margin-left: 15px;
+    margin-left: var(--space-sm);
 }
 
 .result-title h3 {
-    font-size: 22px;
+    font-size: var(--font-size-3xl);
     margin-bottom: 5px;
-    color: #3D3D3D;
+    color: var(--text-primary);
+}
+
+.result-details h5 i {
+    font-size: var(--font-size-sm);
+    margin-right: var(--space-xs);
 }
 
 .result-percentage {
-    font-size: 24px;
-    font-weight: 800;
-    color: #3D3D3D;
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-bold);
+    color: var(--text-secondary);
 }
 
 .result-description {
     color: #666;
     line-height: 1.6;
-    margin-bottom: 12px;
-    font-size: 14px;
+    margin-bottom: var(--space-sm);
+    font-size: var(--font-size-base);
 }
 
 .result-details {
     background: rgba(255, 255, 255, 0.6);
     border: none;
-    padding: 15px;
-    border-radius: 8px;
-    margin-top: 15px;
+    padding: var(--space-sm);
+    border-radius: var(--radius-sm);
+    margin-top: var(--space-sm);
 }
 
 .result-details h5 {
-    color: #3D3D3D;
-    font-size: 13px;
-    margin-bottom: 8px;
-    font-weight: 700;
+    color: var(--text-primary);
+    font-size: var(--font-size-base);
+    margin-bottom: var(--space-xs);
+    font-weight: var(--font-weight-medium);
 }
 
 .result-details p {
     color: #666;
-    font-size: 13px;
-    margin-bottom: 10px;
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--space-sm);
     text-align: left;
 }
 
-/* Icons & Messages */
+/* ===== MESSAGES & ICONS ===== */
 .icon {
-    font-size: 24px;
-    margin-right: 8px;
+    font-size: var(--font-size-3xl);
+    margin-right: var(--space-xs);
 }
 
 .success-msg {
-    color: #3D3D3D;
-    font-weight: 600;
+    color: var(--text-primary);
+    font-weight: var(--font-weight-medium);
 }
 
 .error-msg {
     color: #666;
-    font-weight: 600;
+    font-weight: var(--font-weight-medium);
     text-align: center;
-    padding: 10px;
+    padding: var(--space-sm);
 }
 
-/* Chat Interface */
+/* ===== CHAT INTERFACE ===== */
 .chat-toggle-btn {
     background: rgba(255, 255, 255, 0.8);
-    color: #3D3D3D;
+    color: var(--text-primary);
     border: none;
-    padding: 10px 20px;
-    border-radius: 8px;
+    padding: var(--space-sm) var(--space-lg);
+    border-radius: var(--radius-sm);
     cursor: pointer;
-    font-size: 14px;
-    font-weight: 600;
-    margin-top: 15px;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    margin-top: var(--space-sm);
     width: 100%;
-    transition: background 0.2s, color 0.2s;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    transition: background var(--transition-fast), color var(--transition-fast);
+    box-shadow: var(--shadow-md);
 }
 
 .chat-toggle-btn:hover {
-    background: #3D3D3D;
-    color: #fff;
+    background: var(--primary-dark);
+    color: var(--text-inverse);
 }
 
 .chat-window {
     display: none;
     background: rgba(255, 255, 255, 0.9);
     border: none;
-    border-radius: 10px;
-    margin-top: 15px;
+    border-radius: var(--radius-md);
+    margin-top: var(--space-sm);
     overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-lg);
 }
 
 .chat-window.open {
     display: block;
-    animation: slideDown 0.3s ease;
+    animation: slideDown var(--transition-base) ease;
 }
 
 @keyframes slideDown {
@@ -538,37 +468,37 @@ button:disabled {
 .chat-messages {
     height: 250px;
     overflow-y: auto;
-    padding: 15px;
+    padding: var(--space-sm);
     background: transparent;
 }
 
 .chat-message {
-    margin-bottom: 12px;
-    padding: 10px 14px;
-    border-radius: 8px;
+    margin-bottom: var(--space-sm);
+    padding: var(--space-sm) var(--space-sm);
+    border-radius: var(--radius-sm);
     max-width: 85%;
     line-height: 1.5;
-    font-size: 14px;
+    font-size: var(--font-size-base);
 }
 
 .chat-message.user {
-    background: #3D3D3D;
-    color: #fff;
+    background: var(--primary-dark);
+    color: var(--text-inverse);
     margin-left: auto;
     text-align: right;
 }
 
 .chat-message.bot {
-    background: white;
-    color: #3D3D3D;
+    background: var(--bg-white);
+    color: var(--text-primary);
     border: none;
     text-align: left;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--shadow-sm);
 }
 
 .chat-message.bot ul {
-    margin: 8px 0 0 0;
-    padding-left: 20px;
+    margin: var(--space-sm) 0 0 0;
+    padding-left: var(--space-lg);
 }
 
 .chat-message.bot li {
@@ -578,67 +508,67 @@ button:disabled {
 
 .chat-input-area {
     display: flex;
-    gap: 8px;
-    padding: 12px;
+    gap: var(--space-xs);
+    padding: var(--space-sm);
     background: transparent;
     border-top: none;
 }
 
 .chat-input {
     flex: 1;
-    padding: 10px 14px;
+    padding: var(--space-sm) var(--space-sm);
     border: none;
-    background: white;
-    border-radius: 8px;
-    font-size: 14px;
+    background: var(--bg-white);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
     outline: none;
-    color: #3D3D3D;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+    color: var(--text-primary);
+    box-shadow: var(--shadow-sm);
 }
 
 .chat-input:focus {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-md);
 }
 
 .chat-send-btn {
-    padding: 10px 20px;
-    background: #3D3D3D;
-    color: #fff;
+    padding: var(--space-sm) var(--space-lg);
+    background: var(--primary-dark);
+    color: var(--text-inverse);
     border: none;
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
     cursor: pointer;
-    font-weight: 600;
-    font-size: 14px;
-    transition: background 0.2s;
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-sm);
+    transition: background var(--transition-fast);
 }
 
 .chat-send-btn:hover {
-    background: #1A1A1A;
-    color: #fff;
+    background: var(--primary-black);
+    color: var(--text-inverse);
 }
 
 .chat-send-btn:disabled {
-    background: #F5F5F5;
+    background: var(--bg-gray);
     color: #999;
 }
 
 .voice-btn {
-    padding: 10px 14px;
-    background: #6366F1;
-    color: white;
+    padding: var(--space-sm) var(--space-sm);
+    background: var(--primary-dark);
+    color: var(--text-inverse);
     border: none;
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
     cursor: pointer;
-    font-size: 18px;
-    transition: all 0.2s;
+    font-size: var(--font-size-lg);
+    transition: all var(--transition-fast);
 }
 
 .voice-btn:hover {
-    background: #4F46E5;
+    background: var(--info);
 }
 
 .voice-btn.recording {
-    background: #EF4444;
+    background: var(--error);
     animation: pulse 1s infinite;
 }
 
@@ -650,23 +580,23 @@ button:disabled {
 .chat-typing {
     color: #999;
     font-style: italic;
-    font-size: 13px;
-    padding: 10px 14px;
+    font-size: var(--font-size-sm);
+    padding: var(--space-sm) var(--space-sm);
 }
 
-/* Navigation Header */
+/* ===== NAVIGATION & UTILITIES ===== */
 .nav-header {
-    padding: 0 0 20px 0;
-    margin-bottom: 20px;
-    border-bottom: 1px solid #e9ecef;
+    padding: 0 0 var(--space-lg) 0;
+    margin-bottom: var(--space-lg);
+    border-bottom: 1px solid var(--border-divider);
 }
 
 .back-link {
     color: #667eea;
     text-decoration: none;
-    font-weight: 600;
-    font-size: 14px;
-    transition: all 0.3s ease;
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-sm);
+    transition: all var(--transition-base) ease;
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -677,13 +607,59 @@ button:disabled {
     transform: translateX(-3px);
 }
 
-/* Results description max-width */
-.subtitle {
-    max-width: 500px;
-    margin: 0 auto;
-    margin-bottom: 20px;
+.results-spacing {
+    margin-top: var(--space-3xl);
 }
 
-.results-spacing {
-    margin-top: 40px;
+/* ===== MOBILE RESPONSIVE ===== */
+@media (max-width: 768px) {
+    .container {
+        padding: var(--space-sm);
+        border-radius: var(--radius-lg);
+        margin: 5px;
+    }
+    
+    h1 {
+        font-size: var(--font-size-3xl);
+    }
+    
+    p {
+        font-size: var(--font-size-lg);
+    }
+    
+    .subtitle {
+        font-size: var(--font-size-base);
+    }
+    
+    input[type="text"], input[type="password"] {
+        padding: var(--space-md) var(--space-lg);
+        font-size: var(--font-size-lg);
+    }
+    
+    button, .btn, .nav-btn, .submit-btn {
+        padding: var(--space-md) var(--space-2xl);
+        font-size: var(--font-size-lg);
+    }
+    
+    .question-block {
+        padding: var(--space-lg);
+        min-height: 350px;
+    }
+    
+    .question-block h4 {
+        font-size: var(--font-size-2xl);
+    }
+    
+    .option {
+        padding: var(--space-lg) var(--space-xl);
+        margin-bottom: var(--space-md);
+        font-size: var(--font-size-lg);
+    }
+    
+    .option input[type="radio"] {
+        width: 22px;
+        height: 22px;
+        margin-right: var(--space-md);
+    }
+    
 }

templates/index.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title if logged_in else 'Spiritual Path Finder - Login' }}</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <!-- Add Font Awesome here -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 </head>
 <body>
     <div class="container">
@@ -13,7 +15,7 @@
         </div>
         {% if not logged_in %}
             <!-- Login/Signup Form -->
-            <h1><span class="icon">🌟</span>Spiritual Path Finder</h1>
+            <h1><span class="icon"></span>Spiritual Path Finder</h1>
             <p>{{ 'Begin your journey of self-discovery' if is_signup else 'Welcome back, seeker!' }}</p>
             
             <div class="auth-form">
@@ -28,13 +30,9 @@
         {% else %}
             <!-- Assessment Interface -->
             <h1>{{ title }}</h1>
-            <p>{{ message }}</p>
+            <p>{{ message }} <i class="fas fa-heart"></i> </p>
             
             {% if not has_results %}
-                <p class="subtitle">
-                    Discover which spiritual or religious path aligns with your beliefs, values, and lifestyle. 
-                    Answer 8 thoughtful questions about your worldview.
-                </p>
                 
                 <div class="question-counter" id="questionCounter">Question 1 of {{ questions|length }}</div>
                 
@@ -98,14 +96,14 @@
                         </div>
                         <p class="result-description">{{ result.description }}</p>
                         <div class="result-details">
-                            <h5>📿 Common Practices:</h5>
+                            <h5><i class="fa-solid fa-grip"></i> Common Practices:</h5>
                             <p>{{ result.practices }}</p>
-                            <h5>💭 Core Beliefs:</h5>
+                            <h5><i class="fa-solid fa-rainbow"></i> Core Beliefs:</h5>
                             <p>{{ result.core_beliefs }}</p>
                         </div>
                         
                         <button class="chat-toggle-btn" onclick="toggleChat('{{ result.name }}')">
-                            💬 Ask Questions About {{ result.name }}
+                            <i class="fa-solid fa-comment-dots"></i> Ask Questions About {{ result.name }}
                         </button>
                         
                         <div class="chat-window" id="chat-{{ result.name|replace(' ', '-') }}">
@@ -130,7 +128,7 @@
                                         ontouchstart="startVoiceInput('{{ result.name }}')"
                                         ontouchend="stopVoiceInput('{{ result.name }}')"
                                         title="Hold to record with live transcription">
-                                    🎤
+                                        <i class="fa-solid fa-microphone"></i>
                                 </button>
                                 <button class="chat-send-btn" 
                                         id="send-{{ result.name|replace(' ', '-') }}"
@@ -144,8 +142,12 @@
                 </div>
                 
                 <div class="buttons-row">
-                    <button class="btn reset-btn" onclick="resetAssessment()">🔄 Retake Assessment</button>
-                    <a href="/logout" class="btn logout-btn">🚪 Sign Out</a>
+                    <button class="btn reset-btn" onclick="resetAssessment()"> 
+                        <i class="fa-solid fa-arrow-rotate-right"></i> Retake Assessment
+                    </button>
+                    <a href="/logout" class="btn logout-btn">
+                        <i class="fa-solid fa-arrow-right-from-bracket"></i> Sign Out
+                    </a>
                 </div>
             {% endif %}
         {% endif %}

templates/landing.html

@@ -6,13 +6,15 @@
     <title>Spiritual Path Assessment</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='landing.css') }}">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Add Font Awesome here -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 </head>
 <body>
     <div class="gradient-bg"></div>
     
     <nav class="navbar">
         <div class="nav-container">
-            <div class="logo">✨ Spiritual Path</div>
+            <div class="logo"> <i class="fa-solid fa-compass"></i> Spiritual Path</div>
             <a href="/login" class="nav-cta">Start Assessment</a>
         </div>
     </nav>
@@ -20,12 +22,13 @@
     <main class="main-content">
         <section class="hero-section">
             <div class="hero-container">
-                <div class="badge">🌟 Discover Your Path</div>
+                <div class="badge"> <i class="fa-solid fa-compass"></i> Discover Your Path</div>
                 <h1 class="hero-title">
                     Find Your <span class="gradient-text">Spiritual Journey</span>
                 </h1>
                 <p class="hero-subtitle">
-                    A personalized assessment designed to help you explore and understand your unique spiritual path through thoughtful questions and AI-powered insights.
+                    Discover which spiritual or religious path aligns with your beliefs, values, and lifestyle. 
+                    Answer 8 thoughtful questions about your worldview.
                 </p>
                 
                 <div class="cta-buttons">
@@ -34,9 +37,9 @@
                         <span class="arrow">→</span>
                     </a>
                     <div class="assessment-meta">
-                        <span>⏱️ 5-10 minutes</span>
-                        <span>🆓 Completely free</span>
-                        <span>🧘 Personalized insights</span>
+                        <span><i class="fa-solid fa-clock"></i> 5-10 minutes</span>
+                        <span><i class="fa-solid fa-heart"></i> Completely free</span>
+                        <span><i class="fa-solid fa-lightbulb"></i> Personalized insights</span>
                     </div>
                 </div>