diff --git a/frontend/src/pages/front/LandingPage.css b/frontend/src/pages/front/LandingPage.css
index 4a6eb09..291f6c8 100644
--- a/frontend/src/pages/front/LandingPage.css
+++ b/frontend/src/pages/front/LandingPage.css
@@ -1,704 +1,967 @@
-/* ===== Landing Page Styles ===== */
+/* ===== Landing Page V5 - Personal AI Workspace Positioning ===== */
 
-.landing-page {
+/* === Landing Page Container === */
+.landing-page-v2 {
+  min-height: 100vh;
+  background: var(--lp-bg);
+  color: var(--lp-text);
+  font-family: var(--font-sans);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* === Dark Theme Variables (scoped to landing page) === */
+.landing-page-v2 {
+  --lp-bg: #0A0E1A;
+  --lp-bg-secondary: #111627;
+  --lp-bg-card: #161B2E;
+  --lp-bg-card-hover: #1C2240;
+  --lp-bg-glass: rgba(22, 27, 46, 0.7);
+  --lp-border: rgba(255, 255, 255, 0.06);
+  --lp-border-light: rgba(255, 255, 255, 0.04);
+  --lp-text: #E8ECF4;
+  --lp-text-secondary: #8892B0;
+  --lp-text-tertiary: #5A6480;
+  --lp-accent: #6C63FF;
+  --lp-accent-light: #8B85FF;
+  --lp-accent-glow: rgba(108, 99, 255, 0.3);
+  --lp-gradient-1: linear-gradient(135deg, #6C63FF 0%, #A78BFA 50%, #C084FC 100%);
+  --lp-gradient-2: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
+  --lp-gradient-3: linear-gradient(135deg, #10B981 0%, #34D399 100%);
+  --lp-gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(108, 99, 255, 0.15), transparent 70%);
+  --lp-shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
+  --lp-shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
+  --lp-radius: 12px;
+  --lp-radius-sm: 8px;
+  --lp-radius-lg: 16px;
+}
+
+/* Toast */
+.landing-toast-v2 {
+  position: fixed;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(22, 27, 46, 0.95);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(108, 99, 255, 0.3);
+  color: var(--lp-text);
+  padding: 12px 24px;
+  border-radius: var(--lp-radius);
+  font-size: 14px;
+  z-index: 1000;
+  animation: toastSlideIn 0.3s ease;
+  box-shadow: 0 4px 24px rgba(108, 99, 255, 0.2);
+}
+
+@keyframes toastSlideIn {
+  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+/* === Header === */
+.landing-header-v2 {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: var(--color-bg-primary);
-  z-index: var(--z-base);
-  -webkit-overflow-scrolling: touch;
-}
-
-/* Toast notification */
-.landing-toast {
-  position: fixed;
-  top: 76px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: var(--z-toast);
-  padding: 10px 24px;
-  background: var(--color-text-primary);
-  color: #FFFFFF;
-  border-radius: var(--radius-lg);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  box-shadow: var(--shadow-lg);
-  animation: slideDown var(--transition-normal);
-  white-space: nowrap;
-}
-
-.landing-section-inner {
-  max-width: 1120px;
-  margin: 0 auto;
-  padding: 0 var(--space-2xl);
-}
-
-/* ===== Header ===== */
-.landing-header {
-  position: sticky;
-  top: 0;
   z-index: 100;
-  background: rgba(255, 255, 255, 0.92);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--color-border);
+  padding: 16px 0;
+  transition: all 0.3s ease;
 }
 
-.landing-header-inner {
-  max-width: 1120px;
+.landing-header-v2.scrolled {
+  background: rgba(10, 14, 26, 0.85);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--lp-border);
+  padding: 10px 0;
+}
+
+.landing-header-inner-v2 {
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 0 var(--space-2xl);
-  height: 60px;
+  padding: 0 24px;
   display: flex;
   align-items: center;
-  gap: var(--space-2xl);
+  justify-content: space-between;
 }
 
-.landing-brand {
+.landing-brand-v2 {
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
+  gap: 10px;
 }
 
-.brand-name {
-  font-size: var(--text-lg);
+.landing-brand-text {
+  font-size: 20px;
   font-weight: 700;
-  color: var(--color-text-primary);
+  color: var(--lp-text);
   letter-spacing: -0.02em;
 }
 
-.landing-nav-links {
+.landing-nav-v2 {
   display: flex;
-  gap: var(--space-xl);
+  gap: 32px;
 }
 
-.landing-nav-links a {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
+.landing-nav-v2 a {
+  color: var(--lp-text-secondary);
   text-decoration: none;
-  transition: color var(--transition-fast);
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.landing-nav-v2 a:hover {
+  color: var(--lp-text);
+}
+
+.landing-actions-v2 {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.btn-ghost-v2 {
+  padding: 8px 20px;
+  border-radius: var(--lp-radius-sm);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--lp-text-secondary);
+  background: transparent;
   cursor: pointer;
+  transition: all 0.2s;
+  border: none;
 }
 
-.landing-nav-links a:hover {
-  color: var(--color-accent);
+.btn-ghost-v2:hover {
+  color: var(--lp-text);
+  background: rgba(255,255,255,0.05);
 }
 
-.landing-header-actions {
-  margin-left: auto;
+.btn-primary-v2 {
+  padding: 8px 20px;
+  border-radius: var(--lp-radius-sm);
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
+  background: var(--lp-accent);
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+
+.btn-primary-v2:hover {
+  background: var(--lp-accent-light);
+  box-shadow: 0 4px 16px var(--lp-accent-glow);
+}
+
+/* === Hero Section === */
+.hero-section-v2 {
+  position: relative;
+  min-height: 100vh;
   display: flex;
   align-items: center;
-  gap: var(--space-md);
+  justify-content: center;
+  padding: 120px 24px 80px;
+  overflow: hidden;
+  background: var(--lp-gradient-hero);
 }
 
-/* ===== Buttons ===== */
-.landing-btn {
+.hero-bg-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.15;
+  pointer-events: none;
+}
+
+.orb-1 {
+  width: 600px;
+  height: 600px;
+  background: #6C63FF;
+  top: -200px;
+  right: -100px;
+  animation: orbFloat 8s ease-in-out infinite;
+}
+
+.orb-2 {
+  width: 400px;
+  height: 400px;
+  background: #06B6D4;
+  bottom: -100px;
+  left: -50px;
+  animation: orbFloat 10s ease-in-out infinite reverse;
+}
+
+.orb-3 {
+  width: 300px;
+  height: 300px;
+  background: #A78BFA;
+  top: 50%;
+  left: 40%;
+  animation: orbFloat 12s ease-in-out infinite;
+}
+
+@keyframes orbFloat {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, -30px) scale(1.05); }
+  66% { transform: translate(-20px, 20px) scale(0.95); }
+}
+
+.hero-content-v2 {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  max-width: 800px;
+  animation: fadeInUp 0.8s ease;
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.hero-badge-v2 {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-xs);
-  padding: 8px 20px;
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  font-weight: 600;
-  cursor: pointer;
-  border: none;
-  transition: all var(--transition-fast);
-  font-family: inherit;
-  text-decoration: none;
+  gap: 8px;
+  padding: 6px 16px;
+  border-radius: 100px;
+  background: rgba(108, 99, 255, 0.1);
+  border: 1px solid rgba(108, 99, 255, 0.2);
+  font-size: 13px;
+  color: var(--lp-accent-light);
+  margin-bottom: 24px;
 }
 
-.landing-btn-primary {
-  background: var(--color-accent);
-  color: #FFFFFF;
+.hero-badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--lp-accent);
+  animation: pulse 2s ease infinite;
 }
 
-.landing-btn-primary:hover {
-  background: var(--color-accent-hover);
-  box-shadow: 0 2px 12px rgba(91, 95, 237, 0.35);
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 }
 
-.landing-btn-outline {
-  background: transparent;
-  color: var(--color-accent);
-  border: 1.5px solid var(--color-accent);
-}
-
-.landing-btn-outline:hover {
-  background: var(--color-accent-subtle);
-}
-
-.landing-btn-lg {
-  padding: 12px 28px;
-  font-size: var(--text-base);
-}
-
-/* ===== Hero ===== */
-.landing-hero {
-  padding: 80px 0 72px;
-  background: linear-gradient(180deg, #F8F7FF 0%, #FFFFFF 100%);
-}
-
-.landing-hero-content {
-  max-width: 1120px;
-  margin: 0 auto;
-  padding: 0 var(--space-2xl);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.hero-title {
-  font-size: 48px;
+.hero-title-v2 {
+  font-size: 52px;
   font-weight: 800;
-  color: var(--color-text-primary);
-  line-height: 1.2;
+  line-height: 1.15;
+  color: var(--lp-text);
+  margin-bottom: 20px;
   letter-spacing: -0.03em;
-  margin: 0 0 var(--space-xl);
 }
 
-.hero-accent {
-  background: linear-gradient(135deg, #5B5FED 0%, #A78BFA 100%);
+.hero-gradient-text {
+  background: var(--lp-gradient-1);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-.hero-desc {
-  font-size: var(--text-lg);
-  color: var(--color-text-secondary);
-  max-width: 640px;
+.hero-subtitle-v2 {
+  font-size: 17px;
+  color: var(--lp-text-secondary);
   line-height: 1.7;
-  margin: 0 0 var(--space-2xl);
+  margin-bottom: 36px;
+  max-width: 640px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.hero-actions {
+.hero-cta-v2 {
   display: flex;
-  gap: var(--space-lg);
-  margin-bottom: var(--space-3xl);
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 48px;
 }
 
-.hero-stats {
-  display: flex;
-  gap: var(--space-3xl);
-}
-
-.hero-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-xs);
-}
-
-.stat-number {
-  font-size: 28px;
-  font-weight: 700;
-  color: var(--color-accent);
-}
-
-.stat-label {
-  font-size: var(--text-sm);
-  color: var(--color-text-tertiary);
-}
-
-/* ===== Carousel ===== */
-.landing-banners {
-  padding: var(--space-3xl) 0;
-}
-
-.section-title {
-  font-size: var(--text-xl);
-  font-weight: 700;
-  color: var(--color-text-primary);
-  margin: 0 0 var(--space-xl);
-}
-
-.section-header {
-  text-align: center;
-  margin-bottom: var(--space-2xl);
-}
-
-.section-desc {
-  font-size: var(--text-base);
-  color: var(--color-text-tertiary);
-  margin: var(--space-sm) 0 0;
-}
-
-.carousel-container {
-  position: relative;
-  overflow: hidden;
-  border-radius: var(--radius-xl);
-}
-
-.carousel-track {
-  display: flex;
-  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.carousel-slide {
-  min-width: 100%;
-  box-sizing: border-box;
-}
-
-.carousel-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-3xl) var(--space-3xl);
-  border-radius: var(--radius-xl);
-  min-height: 200px;
-  color: #FFFFFF;
-  overflow: hidden;
-  position: relative;
-}
-
-.carousel-card-content {
-  z-index: 1;
-}
-
-.carousel-badge {
-  display: inline-block;
-  padding: 4px 12px;
-  background: rgba(255,255,255,0.25);
-  backdrop-filter: blur(4px);
-  border-radius: var(--radius-full);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  margin-bottom: var(--space-md);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.carousel-title {
-  font-size: 28px;
-  font-weight: 700;
-  margin: 0 0 var(--space-sm);
-  line-height: 1.3;
-}
-
-.carousel-subtitle {
-  font-size: var(--text-base);
-  opacity: 0.9;
-  margin: 0 0 var(--space-xl);
-}
-
-.carousel-cta {
+.btn-hero-primary {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-xs);
-  padding: 8px 20px;
-  background: rgba(255,255,255,0.2);
-  border: 1px solid rgba(255,255,255,0.4);
-  border-radius: var(--radius-md);
-  color: #FFFFFF;
-  font-size: var(--text-sm);
+  gap: 8px;
+  padding: 14px 32px;
+  border-radius: var(--lp-radius);
+  font-size: 16px;
   font-weight: 600;
+  color: white;
+  background: var(--lp-gradient-1);
+  border: none;
   cursor: pointer;
-  transition: background var(--transition-fast), border-color var(--transition-fast);
-  font-family: inherit;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 20px rgba(108, 99, 255, 0.3);
 }
 
-.carousel-cta:hover {
-  background: rgba(255,255,255,0.35);
-  border-color: rgba(255,255,255,0.6);
+.btn-hero-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(108, 99, 255, 0.4);
 }
 
-.carousel-card-visual {
+.btn-hero-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 32px;
+  border-radius: var(--lp-radius);
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--lp-text-secondary);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--lp-border);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-hero-secondary:hover {
+  color: var(--lp-text);
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.hero-stats-v2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  padding: 20px 40px;
+  background: var(--lp-bg-glass);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--lp-border);
+  border-radius: var(--lp-radius-lg);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.hero-stat-item {
+  text-align: center;
+}
+
+.hero-stat-num {
+  display: block;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--lp-text);
+  letter-spacing: -0.02em;
+}
+
+.hero-stat-label {
+  font-size: 13px;
+  color: var(--lp-text-secondary);
+}
+
+.hero-stat-divider {
+  width: 1px;
+  height: 36px;
+  background: var(--lp-border);
+}
+
+/* === Banner Carousel === */
+.banner-section-v2 {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px 60px;
+}
+
+.banner-carousel-v2 {
   position: relative;
-  width: 160px;
-  height: 160px;
+  border-radius: var(--lp-radius-lg);
+  overflow: hidden;
+  background: var(--lp-bg-card);
+  border: 1px solid var(--lp-border);
+}
+
+.banner-track-v2 {
+  display: flex;
+  transition: transform 0.5s ease;
+}
+
+.banner-slide-v2 {
+  min-width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 40px 48px;
+  gap: 48px;
+}
+
+.banner-content-v2 {
+  flex: 1;
+}
+
+.banner-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 100px;
+  background: rgba(108, 99, 255, 0.15);
+  color: var(--lp-accent-light);
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.banner-content-v2 h2 {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--lp-text);
+  margin-bottom: 8px;
+}
+
+.banner-content-v2 p {
+  font-size: 14px;
+  color: var(--lp-text-secondary);
+  line-height: 1.6;
+}
+
+.banner-visual-v2 {
   flex-shrink: 0;
 }
 
-.visual-circle {
+.banner-shape {
+  width: 180px;
+  height: 180px;
+  border-radius: var(--lp-radius-lg);
+  background: var(--lp-gradient-1);
+  opacity: 0.15;
+}
+
+.banner-dots-v2 {
   position: absolute;
-  border-radius: 50%;
-  background: rgba(255,255,255,0.15);
-}
-
-.visual-circle.c1 {
-  width: 140px;
-  height: 140px;
-  top: 10px;
-  right: 0;
-}
-
-.visual-circle.c2 {
-  width: 90px;
-  height: 90px;
-  top: 50px;
-  right: 50px;
-  background: rgba(255,255,255,0.2);
-}
-
-.visual-circle.c3 {
-  width: 50px;
-  height: 50px;
-  top: 20px;
-  right: 20px;
-  background: rgba(255,255,255,0.25);
-}
-
-/* Dots */
-.carousel-dots {
-  position: absolute;
-  bottom: var(--space-lg);
+  bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
-  gap: var(--space-sm);
-  z-index: 2;
+  gap: 8px;
 }
 
-.carousel-dot {
+.banner-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
   border: none;
-  background: rgba(255,255,255,0.4);
   cursor: pointer;
-  transition: all var(--transition-fast);
-  padding: 0;
+  transition: all 0.3s;
 }
 
-.carousel-dot.active {
-  background: #FFFFFF;
+.banner-dot.active {
+  background: var(--lp-accent);
   width: 24px;
   border-radius: 4px;
 }
 
-/* Arrows */
-.carousel-arrow {
+/* === Section Common === */
+.section-header-v2 {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.section-badge-v2 {
+  display: inline-block;
+  padding: 4px 14px;
+  border-radius: 100px;
+  background: rgba(108, 99, 255, 0.1);
+  border: 1px solid rgba(108, 99, 255, 0.2);
+  color: var(--lp-accent-light);
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.section-header-v2 h2 {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--lp-text);
+  margin-bottom: 12px;
+  letter-spacing: -0.02em;
+}
+
+.section-header-v2 p {
+  font-size: 16px;
+  color: var(--lp-text-secondary);
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+/* ============================================= */
+/* === WHAT IS — Platform Introduction === */
+/* ============================================= */
+.whatis-section-v2 {
+  padding: 80px 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.whatis-cards-v2 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.whatis-card {
+  padding: 32px 24px;
+  background: var(--lp-bg-card);
+  border: 1px solid var(--lp-border);
+  border-radius: var(--lp-radius);
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.whatis-card:hover {
+  background: var(--lp-bg-card-hover);
+  border-color: rgba(108, 99, 255, 0.25);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.1);
+}
+
+.whatis-card-icon {
+  font-size: 40px;
+  margin-bottom: 16px;
+}
+
+.whatis-card h3 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--lp-text);
+  margin-bottom: 8px;
+}
+
+.whatis-card p {
+  font-size: 14px;
+  color: var(--lp-text-secondary);
+  line-height: 1.6;
+}
+
+/* ============================================= */
+/* === PLATFORM ARCHITECTURE === */
+/* ============================================= */
+.architecture-section-v2 {
+  padding: 80px 24px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.arch-layers-v2 {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.arch-layer {
+  position: relative;
+  padding: 24px 28px;
+  background: var(--lp-bg-card);
+  border: 1px solid var(--lp-border);
+  border-radius: var(--lp-radius);
+  transition: all 0.3s ease;
+  margin-bottom: 16px;
+}
+
+.arch-layer:last-child {
+  margin-bottom: 0;
+}
+
+.arch-layer:hover {
+  background: var(--lp-bg-card-hover);
+  border-color: rgba(108, 99, 255, 0.2);
+}
+
+/* Downward connector between layers */
+.arch-layer:not(:last-child)::after {
+  content: '';
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 40px;
-  height: 40px;
+  bottom: -17px;
+  left: 40px;
+  width: 2px;
+  height: 18px;
+  background: var(--layer-color, rgba(108, 99, 255, 0.3));
+  z-index: 1;
+}
+
+.arch-layer-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.arch-layer-dot {
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
-  border: none;
-  background: rgba(255,255,255,0.9);
-  color: var(--color-text-primary);
-  cursor: pointer;
+  flex-shrink: 0;
+  box-shadow: 0 0 10px var(--layer-color, rgba(108, 99, 255, 0.4));
+}
+
+.arch-layer-label {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--lp-text);
+  flex-shrink: 0;
+}
+
+.arch-layer-line {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(to right, var(--layer-color, rgba(108, 99, 255, 0.3)), transparent);
+}
+
+.arch-layer-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding-left: 24px;
+}
+
+.arch-layer-chip {
+  padding: 5px 14px;
+  border-radius: 100px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--lp-text-secondary);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.arch-layer-chip:hover {
+  color: var(--lp-text);
+  border-color: var(--layer-color, rgba(108, 99, 255, 0.3));
+  background: rgba(108, 99, 255, 0.08);
+}
+
+/* ============================================= */
+/* === CAPABILITIES === */
+/* ============================================= */
+.capabilities-section-v2 {
+  padding: 80px 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.capabilities-grid-v2 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.capability-card-v2 {
+  padding: 28px;
+  background: var(--lp-bg-card);
+  border: 1px solid var(--lp-border);
+  border-radius: var(--lp-radius);
+  transition: all 0.3s ease;
+}
+
+.capability-card-v2:hover {
+  background: var(--lp-bg-card-hover);
+  border-color: rgba(108, 99, 255, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.1);
+}
+
+.capability-icon-v2 {
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--shadow-md);
-  transition: all var(--transition-fast);
-  z-index: 2;
+  border-radius: var(--lp-radius-sm);
+  background: rgba(108, 99, 255, 0.1);
+  color: var(--lp-accent-light);
+  margin-bottom: 16px;
 }
 
-.carousel-arrow:hover {
-  background: #FFFFFF;
-  box-shadow: var(--shadow-lg);
+.capability-card-v2 h3 {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--lp-text);
+  margin-bottom: 8px;
 }
 
-.carousel-arrow-left {
-  left: var(--space-md);
+.capability-card-v2 p {
+  font-size: 14px;
+  color: var(--lp-text-secondary);
+  line-height: 1.6;
 }
 
-.carousel-arrow-right {
-  right: var(--space-md);
+/* === Scenarios === */
+.scenarios-section-v2 {
+  padding: 80px 24px;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
-/* ===== Market ===== */
-.landing-market {
-  padding: var(--space-3xl) 0 var(--space-4xl);
-  background: var(--color-bg-secondary);
-}
-
-.market-filter-tabs {
-  display: flex;
-  justify-content: center;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-2xl);
-}
-
-.filter-tab {
-  padding: 6px 16px;
-  border-radius: var(--radius-full);
-  border: 1px solid var(--color-border);
-  background: #FFFFFF;
-  color: var(--color-text-secondary);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  font-family: inherit;
-}
-
-.filter-tab:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.filter-tab.active {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: #FFFFFF;
-}
-
-.market-app-grid {
+.scenarios-grid-v2 {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: var(--space-xl);
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
 }
 
-.market-app-card {
-  background: #FFFFFF;
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  cursor: pointer;
-  transition: all var(--transition-fast);
+.scenario-card-v2 {
+  padding: 28px;
+  background: var(--lp-bg-card);
+  border: 1px solid var(--lp-border);
+  border-radius: var(--lp-radius);
+  text-align: center;
+  transition: all 0.3s ease;
 }
 
-.market-app-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
-  border-color: var(--color-accent-light);
+.scenario-card-v2:hover {
+  background: var(--lp-bg-card-hover);
+  border-color: var(--lp-border-light);
+  transform: translateY(-2px);
 }
 
-.app-card-cover {
-  height: 120px;
-  position: relative;
+.scenario-emoji {
+  font-size: 36px;
+  margin-bottom: 16px;
+}
+
+.scenario-card-v2 h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--lp-text);
+  margin-bottom: 8px;
+}
+
+.scenario-card-v2 p {
+  font-size: 13px;
+  color: var(--lp-text-secondary);
+  line-height: 1.5;
+}
+
+/* === Market Preview === */
+.market-section-v2 {
+  padding: 80px 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.market-filter-v2 {
   display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
-  padding: var(--space-md);
-  gap: var(--space-sm);
+  gap: 8px;
+  justify-content: center;
+  margin-top: 20px;
 }
 
-.app-card-type-badge {
+.filter-chip {
+  padding: 6px 16px;
+  border-radius: 100px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--lp-text-secondary);
+  background: var(--lp-bg-card);
+  border: 1px solid var(--lp-border);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.filter-chip:hover {
+  color: var(--lp-text);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.filter-chip.active {
+  color: white;
+  background: var(--lp-accent);
+  border-color: var(--lp-accent);
+}
+
+.market-grid-v2 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 24px;
+}
+
+.market-card-v2 {
+  background: var(--lp-bg-card);
+  border: 1px solid var(--lp-border);
+  border-radius: var(--lp-radius);
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.market-card-v2:hover {
+  border-color: rgba(108, 99, 255, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.1);
+}
+
+.market-card-icon-v2 {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  font-weight: 700;
+  color: white;
+}
+
+.market-card-body-v2 {
+  padding: 16px;
+}
+
+.market-card-header-v2 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.market-card-header-v2 h4 {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--lp-text);
+}
+
+.type-badge {
+  padding: 2px 8px;
+  border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
-  color: #FFFFFF;
-  padding: 2px 8px;
-  border-radius: var(--radius-full);
-  letter-spacing: 0.03em;
 }
 
-.app-card-price {
-  position: absolute;
-  top: var(--space-md);
-  left: var(--space-md);
-  font-size: var(--text-sm);
-  font-weight: 700;
-  color: #FFFFFF;
-  background: rgba(0,0,0,0.3);
-  padding: 2px 10px;
-  border-radius: var(--radius-full);
-}
-
-.app-card-body {
-  padding: var(--space-lg);
-}
-
-.app-card-name {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0 0 var(--space-xs);
-}
-
-.app-card-desc {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  margin: 0 0 var(--space-md);
+.market-card-desc-v2 {
+  font-size: 13px;
+  color: var(--lp-text-secondary);
+  line-height: 1.5;
+  margin-bottom: 12px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  line-height: 1.5;
 }
 
-.app-card-meta {
+.market-card-meta-v2 {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: var(--lp-text-tertiary);
+}
+
+/* === CTA === */
+.cta-section-v2 {
+  position: relative;
+  text-align: center;
+  padding: 80px 24px;
+  overflow: hidden;
+}
+
+.cta-bg-glow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 600px;
+  height: 300px;
+  background: var(--lp-accent-glow);
+  border-radius: 50%;
+  filter: blur(120px);
+  pointer-events: none;
+}
+
+.cta-section-v2 h2 {
+  position: relative;
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--lp-text);
+  margin-bottom: 12px;
+}
+
+.cta-section-v2 p {
+  position: relative;
+  font-size: 16px;
+  color: var(--lp-text-secondary);
+  margin-bottom: 32px;
+}
+
+/* === Footer === */
+.landing-footer-v2 {
+  padding: 48px 24px 24px;
+  border-top: 1px solid var(--lp-border);
+}
+
+.footer-inner-v2 {
+  max-width: 1200px;
+  margin: 0 auto;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
+  margin-bottom: 32px;
 }
 
-.app-card-rating {
+.footer-brand-v2 {
   display: flex;
   align-items: center;
-  gap: 2px;
-  color: #F59E0B;
+  gap: 10px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--lp-text);
 }
 
-.app-card-rating svg {
-  fill: #F59E0B;
-}
-
-.market-more {
+.footer-links-v2 {
   display: flex;
-  justify-content: center;
-  margin-top: var(--space-2xl);
+  gap: 64px;
 }
 
-/* ===== Features ===== */
-.landing-features {
-  padding: var(--space-4xl) 0;
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: var(--space-xl);
-}
-
-.feature-card {
-  padding: var(--space-2xl);
-  background: #FFFFFF;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  transition: all var(--transition-fast);
-}
-
-.feature-card:hover {
-  border-color: var(--color-accent-light);
-  box-shadow: var(--shadow-md);
-}
-
-.feature-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: var(--radius-lg);
-  background: var(--color-accent-subtle);
-  color: var(--color-accent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: var(--space-lg);
-}
-
-.feature-title {
-  font-size: var(--text-base);
+.footer-col-v2 h4 {
+  font-size: 13px;
   font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0 0 var(--space-sm);
+  color: var(--lp-text);
+  margin-bottom: 12px;
 }
 
-.feature-desc {
-  font-size: var(--text-sm);
-  color: var(--color-text-tertiary);
-  line-height: 1.6;
-  margin: 0;
+.footer-col-v2 a {
+  display: block;
+  font-size: 13px;
+  color: var(--lp-text-secondary);
+  text-decoration: none;
+  padding: 4px 0;
+  transition: color 0.2s;
 }
 
-/* ===== CTA ===== */
-.landing-cta {
-  padding: var(--space-4xl) 0;
-  background: linear-gradient(135deg, #5B5FED 0%, #A78BFA 100%);
+.footer-col-v2 a:hover {
+  color: var(--lp-accent-light);
+}
+
+.footer-bottom-v2 {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding-top: 20px;
+  border-top: 1px solid var(--lp-border);
   text-align: center;
 }
 
-.cta-title {
-  font-size: 32px;
-  font-weight: 700;
-  color: #FFFFFF;
-  margin: 0 0 var(--space-md);
+.footer-bottom-v2 p {
+  font-size: 12px;
+  color: var(--lp-text-tertiary);
 }
 
-.cta-desc {
-  font-size: var(--text-lg);
-  color: rgba(255,255,255,0.85);
-  margin: 0 0 var(--space-2xl);
-}
-
-.landing-cta .landing-btn-primary {
-  background: #FFFFFF;
-  color: var(--color-accent);
-}
-
-.landing-cta .landing-btn-primary:hover {
-  background: #F0EEFF;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
-}
-
-/* ===== Footer ===== */
-.landing-footer {
-  padding: var(--space-3xl) 0 var(--space-xl);
-  background: var(--color-bg-tertiary);
-  border-top: 1px solid var(--color-border);
-}
-
-.footer-content {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-2xl);
-  margin-bottom: var(--space-2xl);
-}
-
-.footer-links {
-  display: flex;
-  gap: var(--space-4xl);
-}
-
-.footer-col h4 {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0 0 var(--space-md);
-}
-
-.footer-col a {
-  display: block;
-  font-size: var(--text-sm);
-  color: var(--color-text-tertiary);
-  margin-bottom: var(--space-sm);
-  cursor: pointer;
-  transition: color var(--transition-fast);
-}
-
-.footer-col a:hover {
-  color: var(--color-accent);
-}
-
-.footer-bottom {
-  padding-top: var(--space-xl);
-  border-top: 1px solid var(--color-border);
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-}
-
-/* ===== Responsive ===== */
+/* === Responsive === */
 @media (max-width: 768px) {
-  .landing-nav-links {
-    display: none;
-  }
+  .hero-title-v2 { font-size: 30px; }
+  .hero-stats-v2 { flex-wrap: wrap; gap: 16px; padding: 16px; }
+  .hero-stat-divider { display: none; }
+  .hero-cta-v2 { flex-direction: column; }
 
-  .hero-title {
-    font-size: 32px;
-  }
+  .whatis-cards-v2 { grid-template-columns: 1fr 1fr; }
 
-  .hero-stats {
-    flex-direction: column;
-    gap: var(--space-lg);
-  }
+  .arch-layer { padding: 16px 20px; }
+  .arch-layer-items { padding-left: 0; }
 
-  .carousel-card {
-    flex-direction: column;
-    text-align: center;
-    min-height: 240px;
-  }
+  .capabilities-grid-v2 { grid-template-columns: 1fr; }
+  .scenarios-grid-v2 { grid-template-columns: 1fr 1fr; }
+  .market-grid-v2 { grid-template-columns: 1fr; }
 
-  .carousel-card-visual {
-    display: none;
-  }
-
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .market-app-grid {
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  }
-
-  .footer-content {
-    flex-direction: column;
-  }
+  .landing-nav-v2 { display: none; }
+  .footer-inner-v2 { flex-direction: column; gap: 32px; }
+  .footer-links-v2 { gap: 32px; }
+  .banner-slide-v2 { flex-direction: column; padding: 24px; }
 }
diff --git a/frontend/src/pages/front/LandingPage.tsx b/frontend/src/pages/front/LandingPage.tsx
index 0c75749..fde9d95 100644
--- a/frontend/src/pages/front/LandingPage.tsx
+++ b/frontend/src/pages/front/LandingPage.tsx
@@ -21,11 +21,18 @@ const LandingPage: React.FC = () => {
   const publishedApps = mockApps.filter(a => a.status === 'published');
   const [appTypeFilter, setAppTypeFilter] = useState<'' | 'skill' | 'agent' | 'mcp'>('');
   const [toastMsg, setToastMsg] = useState('');
+  const [scrolled, setScrolled] = useState(false);
 
   const filteredApps = appTypeFilter
     ? publishedApps.filter(a => a.type === appTypeFilter)
     : publishedApps;
 
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 60);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const showToast = (msg: string) => {
     setToastMsg(msg);
     setTimeout(() => setToastMsg(''), 2000);
@@ -36,7 +43,6 @@ const LandingPage: React.FC = () => {
     setTimeout(() => navigate('/login'), 800);
   };
 
-  // Auto rotate carousel
   const nextSlide = useCallback(() => {
     if (banners.length === 0) return;
     setCurrentSlide(prev => (prev + 1) % banners.length);
@@ -63,304 +69,379 @@ const LandingPage: React.FC = () => {
     return gradients[app.id] || 'linear-gradient(135deg, #5B5FED 0%, #A78BFA 100%)';
   };
 
-  return (
-    <div className="landing-page">
-      {/* Toast notification */}
-      {toastMsg && (
-        <div className="landing-toast">{toastMsg}</div>
-      )}
+  // Platform Architecture - layers from bottom to top
+  const archLayers = [
+    {
+      label: '应用层',
+      color: '#6C63FF',
+      items: ['AI 对话工作台', '知识库问答', '自动化流程', 'IM Bot 接入', 'API 集成'],
+    },
+    {
+      label: '能力层',
+      color: '#10B981',
+      items: ['技能市场 (Skill)', '智能体 (Agent)', 'MCP 协议', 'RAG 检索增强', '工具链编排'],
+    },
+    {
+      label: '模型层',
+      color: '#F59E0B',
+      items: ['DeepSeek', 'GPT-4o', 'Claude', 'Qwen', '多模态模型'],
+    },
+    {
+      label: '基础设施',
+      color: '#3B82F6',
+      items: ['向量数据库', '对象存储', '任务调度', 'API 网关', '监控告警'],
+    },
+  ];
 
-      {/* Hero / Nav bar */}
-      <header className="landing-header">
-        <div className="landing-header-inner">
-          <div className="landing-brand">
-            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-              <rect width="32" height="32" rx="8" fill="#5B5FED"/>
+  // Capability groups
+  const capabilities = [
+    {
+      icon: <SVGIcon size={28}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></SVGIcon>,
+      title: 'AI 对话',
+      desc: '接入 50+ 主流大模型，支持流式输出、多轮对话、Function Calling，你的专属 AI 助手',
+    },
+    {
+      icon: <SVGIcon size={28}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></SVGIcon>,
+      title: '知识库',
+      desc: '上传文档、网页、代码构建个人知识库，RAG 增强检索让 AI 回答更精准可靠',
+    },
+    {
+      icon: <SVGIcon size={28}><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></SVGIcon>,
+      title: '技能市场',
+      desc: '100+ 预制 AI 技能，一键安装即用。支持 Skill、Agent、MCP 三种形态，持续扩展',
+    },
+    {
+      icon: <SVGIcon size={28}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></SVGIcon>,
+      title: 'IM Bot',
+      desc: '将 AI 能力接入飞书、微信、钉钉，在聊天中调用 AI，无缝融入日常工作流',
+    },
+    {
+      icon: <SVGIcon size={28}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon>,
+      title: 'AI 自进化',
+      desc: '从每次对话中持续学习，自动沉淀知识图谱，你的 AI 越用越懂你',
+    },
+    {
+      icon: <SVGIcon size={28}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></SVGIcon>,
+      title: 'Token 驾驶舱',
+      desc: '实时监控调用量、Token 消耗与成本，精细化管理你的 AI 使用预算',
+    },
+  ];
+
+  // Scenarios - individual practitioner focused
+  const scenarios = [
+    { icon: '📚', title: '学习助手', desc: '构建课程知识库，AI 辅助理解复杂概念、整理笔记、解答疑问' },
+    { icon: '💼', title: '工作效率', desc: '自动化重复任务、智能撰写文档邮件、快速检索信息，效率翻倍' },
+    { icon: '🤖', title: 'AI Agent 开发', desc: '用 Skill + Agent + MCP 搭建专属 AI 助手，从原型到生产一站完成' },
+    { icon: '📊', title: '数据分析', desc: '自然语言查询数据库，自动生成可视化报告，让数据说话更简单' },
+    { icon: '✍️', title: '内容创作', desc: 'AI 辅助写文章、做翻译、润色文案，让创作更有灵感' },
+    { icon: '🔬', title: '技术探索', desc: '接入最新模型做实验，对比不同 LLM 效果，探索 AI 的前沿能力' },
+  ];
+
+  return (
+    <div className="landing-page-v2">
+      {/* Toast */}
+      {toastMsg && <div className="landing-toast-v2">{toastMsg}</div>}
+
+      {/* Header */}
+      <header className={`landing-header-v2 ${scrolled ? 'scrolled' : ''}`}>
+        <div className="landing-header-inner-v2">
+          <div className="landing-brand-v2">
+            <svg width="36" height="36" viewBox="0 0 32 32" fill="none">
+              <defs>
+                <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stopColor="#5B5FED"/>
+                  <stop offset="100%" stopColor="#A78BFA"/>
+                </linearGradient>
+              </defs>
+              <rect width="32" height="32" rx="8" fill="url(#logoGrad)"/>
               <path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
               <path d="M6 22h20" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
             </svg>
-            <span className="brand-name">Qihu-AIFlow</span>
+            <span className="landing-brand-text">Qihu-AIFlow</span>
           </div>
-          <nav className="landing-nav-links">
-            <a href="#market">应用市场</a>
-            <a href="#features">平台能力</a>
+          <nav className="landing-nav-v2">
+            <a href="#what-is">平台介绍</a>
+            <a href="#architecture">平台架构</a>
+            <a href="#capabilities">能力体系</a>
+            <a href="#scenarios">应用场景</a>
+            <a href="#market">技能生态</a>
           </nav>
-          <div className="landing-header-actions">
-            <button className="landing-btn landing-btn-outline" onClick={() => navigate('/login')}>登录</button>
-            <button className="landing-btn landing-btn-primary" onClick={() => navigate('/login')}>免费注册</button>
+          <div className="landing-actions-v2">
+            <button className="btn-ghost-v2" onClick={() => navigate('/login')}>登录</button>
+            <button className="btn-primary-v2" onClick={() => navigate('/login')}>免费注册</button>
           </div>
         </div>
       </header>
 
-      {/* Hero Section */}
-      <section className="landing-hero">
-        <div className="landing-hero-content">
-          <h1 className="hero-title">
-            用 <span className="hero-accent">AI</span> 构建你的<br/>智能自动化工作流
+      {/* Hero Section — What is Qihu-AIFlow */}
+      <section className="hero-section-v2">
+        <div className="hero-bg-orb orb-1" />
+        <div className="hero-bg-orb orb-2" />
+        <div className="hero-bg-orb orb-3" />
+        <div className="hero-content-v2">
+          <div className="hero-badge-v2">
+            <span className="hero-badge-dot" />
+            AI 个人工作台 · 为创造者而生
+          </div>
+          <h1 className="hero-title-v2">
+            每一个 AI 创造者
+            <span className="hero-gradient-text"> 的超级工作台</span>
           </h1>
-          <p className="hero-desc">
-            Qihu-AIFlow 是一站式AI智能自动化PaaS平台，集成多模态大模型、知识库管理、应用市场，
-            让每个人都能轻松搭建属于自己的AI自动化SOP。
+          <p className="hero-subtitle-v2">
+            Qihu-AIFlow 是一站式 AI 能力集成平台，让你在一个地方完成对话、知识库、技能编排、模型切换、自动化搭建<br/>
+            无需拼接多个工具，从想法到落地，一个平台就够了
           </p>
-          <div className="hero-actions">
-            <button className="landing-btn landing-btn-primary landing-btn-lg" onClick={() => navigate('/login')}>
+          <div className="hero-cta-v2">
+            <button className="btn-hero-primary" onClick={() => navigate('/login')}>
               免费开始使用
+              <SVGIcon size={18}><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></SVGIcon>
             </button>
-            <button className="landing-btn landing-btn-outline landing-btn-lg" onClick={() => { document.getElementById('market')?.scrollIntoView({ behavior: 'smooth' }); }}>
-              浏览应用市场
+            <button className="btn-hero-secondary" onClick={() => document.getElementById('what-is')?.scrollIntoView({ behavior: 'smooth' })}>
+              了解平台
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
             </button>
           </div>
-          <div className="hero-stats">
-            <div className="hero-stat">
-              <span className="stat-number">3,500+</span>
-              <span className="stat-label">活跃用户</span>
+          {/* Stats */}
+          <div className="hero-stats-v2">
+            <div className="hero-stat-item">
+              <span className="hero-stat-num">100+</span>
+              <span className="hero-stat-label">AI 技能</span>
             </div>
-            <div className="hero-stat">
-              <span className="stat-number">120+</span>
-              <span className="stat-label">应用/Skills</span>
+            <div className="hero-stat-divider" />
+            <div className="hero-stat-item">
+              <span className="hero-stat-num">50+</span>
+              <span className="hero-stat-label">大模型接入</span>
             </div>
-            <div className="hero-stat">
-              <span className="stat-number">99.8%</span>
-              <span className="stat-label">服务可用率</span>
+            <div className="hero-stat-divider" />
+            <div className="hero-stat-item">
+              <span className="hero-stat-num">6</span>
+              <span className="hero-stat-label">IM 平台</span>
+            </div>
+            <div className="hero-stat-divider" />
+            <div className="hero-stat-item">
+              <span className="hero-stat-num">99.9%</span>
+              <span className="hero-stat-label">可用性</span>
             </div>
           </div>
         </div>
       </section>
 
-      {/* Carousel Section */}
-      {banners.length > 0 && (
-        <section className="landing-banners">
-          <div className="landing-section-inner">
-            <h2 className="section-title">推荐应用</h2>
-            <div
-              className="carousel-container"
-              onMouseEnter={() => setIsPaused(true)}
-              onMouseLeave={() => setIsPaused(false)}
-            >
-              <div className="carousel-track" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
-                {banners.map(banner => (
-                  <div key={banner.id} className="carousel-slide">
-                    <div className="carousel-card" style={{ background: banner.linkAppId ? getGradient({ id: banner.linkAppId } as MarketApp) : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
-                      <div className="carousel-card-content">
-                        <div className="carousel-badge">推荐</div>
-                        <h3 className="carousel-title">{banner.title}</h3>
-                        {banner.linkAppName && (
-                          <p className="carousel-subtitle">立即体验 {banner.linkAppName}</p>
-                        )}
-                        <button
-                          className="carousel-cta"
-                          onClick={() => navigate('/login')}
-                        >
-                          查看详情
-                          <SVGIcon size={14}><polyline points="9 18 15 12 9 6"/></SVGIcon>
-                        </button>
-                      </div>
-                      <div className="carousel-card-visual">
-                        <div className="visual-circle c1"/>
-                        <div className="visual-circle c2"/>
-                        <div className="visual-circle c3"/>
-                      </div>
-                    </div>
-                  </div>
+      {/* What is Qihu-AIFlow  — Platform Introduction */}
+      <section id="what-is" className="whatis-section-v2">
+        <div className="section-header-v2">
+          <span className="section-badge-v2">平台介绍</span>
+          <h2>Qihu-AIFlow 是什么？</h2>
+          <p>一个面向 AI 爱好者和从业者的个人 AI 能力集成平台</p>
+        </div>
+        <div className="whatis-cards-v2">
+          <div className="whatis-card">
+            <div className="whatis-card-icon">🎯</div>
+            <h3>能力聚合</h3>
+            <p>将大模型对话、知识库、技能编排、自动化、IM Bot 等能力整合在一个平台，告别工具碎片化</p>
+          </div>
+          <div className="whatis-card">
+            <div className="whatis-card-icon">⚡</div>
+            <h3>开箱即用</h3>
+            <p>预设 100+ AI 技能模板，50+ 大模型即配即用，无需从零搭建，注册即可上手</p>
+          </div>
+          <div className="whatis-card">
+            <div className="whatis-card-icon">🔌</div>
+            <h3>开放扩展</h3>
+            <p>支持 MCP 协议、Skill 插件、Agent 编排、API 开放，你可以自由扩展和定制</p>
+          </div>
+          <div className="whatis-card">
+            <div className="whatis-card-icon">🚀</div>
+            <h3>持续进化</h3>
+            <p>AI 自进化引擎从使用中持续学习，知识库自动更新，模型热切换，你的工作台越来越强</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Platform Architecture */}
+      <section id="architecture" className="architecture-section-v2">
+        <div className="section-header-v2">
+          <span className="section-badge-v2">平台架构</span>
+          <h2>四层架构 · 层层赋能</h2>
+          <p>从基础设施到上层应用，理解 Qihu-AIFlow 的技术全貌</p>
+        </div>
+        <div className="arch-layers-v2">
+          {archLayers.map((layer, idx) => (
+            <div key={idx} className="arch-layer" style={{ '--layer-color': layer.color } as React.CSSProperties}>
+              <div className="arch-layer-header">
+                <div className="arch-layer-dot" style={{ background: layer.color }} />
+                <span className="arch-layer-label">{layer.label}</span>
+                <div className="arch-layer-line" />
+              </div>
+              <div className="arch-layer-items">
+                {layer.items.map((item, i) => (
+                  <span key={i} className="arch-layer-chip">{item}</span>
                 ))}
               </div>
-              {/* Dots */}
-              {banners.length > 1 && (
-                <div className="carousel-dots">
-                  {banners.map((_, idx) => (
-                    <button
-                      key={idx}
-                      className={`carousel-dot ${idx === currentSlide ? 'active' : ''}`}
-                      onClick={() => goToSlide(idx)}
-                    />
-                  ))}
+            </div>
+          ))}
+          {/* Downward arrows between layers */}
+        </div>
+      </section>
+
+      {/* Banner Carousel */}
+      {banners.length > 0 && (
+        <section className="banner-section-v2">
+          <div
+            className="banner-carousel-v2"
+            onMouseEnter={() => setIsPaused(true)}
+            onMouseLeave={() => setIsPaused(false)}
+          >
+            <div className="banner-track-v2" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
+              {banners.map((banner, idx) => (
+                <div key={idx} className="banner-slide-v2">
+                  <div className="banner-content-v2">
+                    <span className="banner-tag">AI 精选</span>
+                    <h2>{banner.title}</h2>
+                    <p>{banner.title}</p>
+                  </div>
+                  <div className="banner-visual-v2">
+                    <div className="banner-shape" />
+                  </div>
                 </div>
-              )}
-              {/* Arrows */}
-              {banners.length > 1 && (
-                <>
-                  <button
-                    className="carousel-arrow carousel-arrow-left"
-                    onClick={() => setCurrentSlide(prev => (prev - 1 + banners.length) % banners.length)}
-                  >
-                    <SVGIcon size={20}><polyline points="15 18 9 12 15 6"/></SVGIcon>
-                  </button>
-                  <button
-                    className="carousel-arrow carousel-arrow-right"
-                    onClick={() => nextSlide()}
-                  >
-                    <SVGIcon size={20}><polyline points="9 18 15 12 9 6"/></SVGIcon>
-                  </button>
-                </>
-              )}
+              ))}
+            </div>
+            <div className="banner-dots-v2">
+              {banners.map((_, idx) => (
+                <button
+                  key={idx}
+                  className={`banner-dot ${idx === currentSlide ? 'active' : ''}`}
+                  onClick={() => goToSlide(idx)}
+                />
+              ))}
             </div>
           </div>
         </section>
       )}
 
-      {/* Market Preview Section */}
-      <section className="landing-market" id="market">
-        <div className="landing-section-inner">
-          <div className="section-header">
-            <h2 className="section-title">应用市场</h2>
-            <p className="section-desc">丰富的 Skills、Agent、MCP 应用，一键接入你的工作流</p>
-          </div>
+      {/* Capabilities Section */}
+      <section id="capabilities" className="capabilities-section-v2">
+        <div className="section-header-v2">
+          <span className="section-badge-v2">能力体系</span>
+          <h2>六大核心能力</h2>
+          <p>从对话到自动化，覆盖 AI 从业者的全部工作流</p>
+        </div>
+        <div className="capabilities-grid-v2">
+          {capabilities.map((c, idx) => (
+            <div key={idx} className="capability-card-v2">
+              <div className="capability-icon-v2">{c.icon}</div>
+              <h3>{c.title}</h3>
+              <p>{c.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
 
-          {/* Type Filter */}
-          <div className="market-filter-tabs">
-            <button
-              className={`filter-tab ${appTypeFilter === '' ? 'active' : ''}`}
-              onClick={() => setAppTypeFilter('')}
-            >全部</button>
-            <button
-              className={`filter-tab ${appTypeFilter === 'skill' ? 'active' : ''}`}
-              onClick={() => setAppTypeFilter('skill')}
-            >Skills</button>
-            <button
-              className={`filter-tab ${appTypeFilter === 'agent' ? 'active' : ''}`}
-              onClick={() => setAppTypeFilter('agent')}
-            >Agent</button>
-            <button
-              className={`filter-tab ${appTypeFilter === 'mcp' ? 'active' : ''}`}
-              onClick={() => setAppTypeFilter('mcp')}
-            >MCP</button>
-          </div>
+      {/* Scenarios Section */}
+      <section id="scenarios" className="scenarios-section-v2">
+        <div className="section-header-v2">
+          <span className="section-badge-v2">应用场景</span>
+          <h2>每个 AI 创作者都用得上</h2>
+          <p>无论你是学习者、开发者、还是内容创作者，都能找到属于你的打开方式</p>
+        </div>
+        <div className="scenarios-grid-v2">
+          {scenarios.map((s, idx) => (
+            <div key={idx} className="scenario-card-v2">
+              <div className="scenario-emoji">{s.icon}</div>
+              <h3>{s.title}</h3>
+              <p>{s.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
 
-          {/* App Grid */}
-          <div className="market-app-grid">
-            {filteredApps.map(app => (
-              <div key={app.id} className="market-app-card" onClick={() => handleAppClick(app.name)}>
-                <div className="app-card-cover" style={{ background: getGradient(app) }}>
-                  <span className="app-card-type-badge" style={{ background: typeColors[app.type] }}>
-                    {typeLabels[app.type]}
-                  </span>
-                  {app.price > 0 && (
-                    <span className="app-card-price">{app.price} 元</span>
-                  )}
-                </div>
-                <div className="app-card-body">
-                  <h4 className="app-card-name">{app.name}</h4>
-                  <p className="app-card-desc">{app.description}</p>
-                  <div className="app-card-meta">
-                    <span className="app-card-rating">
-                      <SVGIcon size={12}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></SVGIcon>
-                      {app.ratingAvg > 0 ? app.ratingAvg : '-'}
-                    </span>
-                    <span className="app-card-installs">{app.installCount.toLocaleString()} 次安装</span>
-                  </div>
-                </div>
-              </div>
+      {/* Market Preview */}
+      <section id="market" className="market-section-v2">
+        <div className="section-header-v2">
+          <span className="section-badge-v2">技能生态</span>
+          <h2>丰富的 AI 技能生态</h2>
+          <p>Skills、Agent、MCP 工具一键安装，持续扩展你的 AI 能力边界</p>
+          <div className="market-filter-v2">
+            {(['', 'skill', 'agent', 'mcp'] as const).map(t => (
+              <button
+                key={t || 'all'}
+                className={`filter-chip ${appTypeFilter === t ? 'active' : ''}`}
+                onClick={() => setAppTypeFilter(t)}
+              >
+                {t === '' ? '全部' : typeLabels[t]}
+              </button>
             ))}
           </div>
-
-          <div className="market-more">
-            <button className="landing-btn landing-btn-outline" onClick={() => navigate('/login')}>
-              登录查看更多应用
-              <SVGIcon size={14}><polyline points="9 18 15 12 9 6"/></SVGIcon>
-            </button>
-          </div>
+        </div>
+        <div className="market-grid-v2">
+          {filteredApps.slice(0, 6).map(app => (
+            <div key={app.id} className="market-card-v2" onClick={() => handleAppClick(app.name)}>
+              <div className="market-card-icon-v2" style={{ background: getGradient(app) }}>
+                {app.name.charAt(0)}
+              </div>
+              <div className="market-card-body-v2">
+                <div className="market-card-header-v2">
+                  <h4>{app.name}</h4>
+                  <span className="type-badge" style={{ background: typeColors[app.type], color: '#fff' }}>
+                    {typeLabels[app.type]}
+                  </span>
+                </div>
+                <p className="market-card-desc-v2">{app.description}</p>
+                <div className="market-card-meta-v2">
+                  <span>⭐ 4.8</span>
+                  <span>📥 1.2k</span>
+                  <span>{app.price === 0 ? '免费' : `¥${app.price}`}</span>
+                </div>
+              </div>
+            </div>
+          ))}
         </div>
       </section>
 
-      {/* Features Section */}
-      <section className="landing-features" id="features">
-        <div className="landing-section-inner">
-          <div className="section-header">
-            <h2 className="section-title">平台核心能力</h2>
-            <p className="section-desc">从对话到自动化，Qihu-AIFlow 为你提供完整的 AI 工作流解决方案</p>
-          </div>
-          <div className="features-grid">
-            <div className="feature-card">
-              <div className="feature-icon">
-                <SVGIcon size={28}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></SVGIcon>
-              </div>
-              <h3 className="feature-title">多模型AI对话</h3>
-              <p className="feature-desc">支持GPT-4o、DeepSeek-R1、Qwen-Max等多种大模型自由切换，按需使用最优模型</p>
-            </div>
-            <div className="feature-card">
-              <div className="feature-icon">
-                <SVGIcon size={28}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></SVGIcon>
-              </div>
-              <h3 className="feature-title">私有知识库</h3>
-              <p className="feature-desc">上传文档构建专属知识库，AI回答基于你的内容，更精准可靠</p>
-            </div>
-            <div className="feature-card">
-              <div className="feature-icon">
-                <SVGIcon size={28}><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></SVGIcon>
-              </div>
-              <h3 className="feature-title">应用市场</h3>
-              <p className="feature-desc">丰富的Skills、Agent、MCP应用，一站式接入工作流，即装即用</p>
-            </div>
-            <div className="feature-card">
-              <div className="feature-icon">
-                <SVGIcon size={28}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></SVGIcon>
-              </div>
-              <h3 className="feature-title">Token驾驶舱</h3>
-              <p className="feature-desc">实时监控Token消耗，费用透明可控，每一笔都有据可查</p>
-            </div>
-            <div className="feature-card">
-              <div className="feature-icon">
-                <SVGIcon size={28}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></SVGIcon>
-              </div>
-              <h3 className="feature-title">IM频道绑定</h3>
-              <p className="feature-desc">支持飞书、钉钉、微信等多平台绑定，AI助手融入日常工作流</p>
-            </div>
-            <div className="feature-card">
-              <div className="feature-icon">
-                <SVGIcon size={28}><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></SVGIcon>
-              </div>
-              <h3 className="feature-title">自动化任务编排</h3>
-              <p className="feature-desc">创建关键词触发、定时执行等自动化任务，让AI按你的节奏工作</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="landing-cta">
-        <div className="landing-section-inner">
-          <h2 className="cta-title">准备好开始了吗？</h2>
-          <p className="cta-desc">免费注册即可体验全部功能，无需任何技术背景</p>
-          <button className="landing-btn landing-btn-primary landing-btn-lg" onClick={() => navigate('/login')}>
-            免费注册，立即体验
-          </button>
-        </div>
+      {/* CTA */}
+      <section className="cta-section-v2">
+        <div className="cta-bg-glow" />
+        <h2>准备好开始你的 AI 之旅了吗？</h2>
+        <p>免费注册，即刻拥有属于你自己的 AI 超级工作台</p>
+        <button className="btn-hero-primary" onClick={() => navigate('/login')}>
+          免费注册
+          <SVGIcon size={18}><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></SVGIcon>
+        </button>
       </section>
 
       {/* Footer */}
-      <footer className="landing-footer">
-        <div className="landing-section-inner">
-          <div className="footer-content">
-            <div className="footer-brand">
-              <div className="landing-brand">
-                <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
-                  <rect width="32" height="32" rx="8" fill="#5B5FED"/>
-                  <path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
-                </svg>
-                <span className="brand-name" style={{ color: 'var(--color-text-primary)' }}>Qihu-AIFlow</span>
-              </div>
-              <p style={{ color: 'var(--color-text-tertiary)', fontSize: 'var(--text-sm)', marginTop: 'var(--space-md)' }}>
-                AI智能自动化PaaS平台
-              </p>
+      <footer className="landing-footer-v2">
+        <div className="footer-inner-v2">
+          <div className="footer-brand-v2">
+            <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
+              <rect width="32" height="32" rx="8" fill="#5B5FED"/>
+              <path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+              <path d="M6 22h20" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
+            </svg>
+            <span>Qihu-AIFlow</span>
+          </div>
+          <div className="footer-links-v2">
+            <div className="footer-col-v2">
+              <h4>平台</h4>
+              <a href="#what-is">平台介绍</a>
+              <a href="#architecture">平台架构</a>
+              <a href="#capabilities">能力体系</a>
             </div>
-            <div className="footer-links">
-              <div className="footer-col">
-                <h4>产品</h4>
-                <a>AI聊天</a>
-                <a>知识库</a>
-                <a>应用市场</a>
-              </div>
-              <div className="footer-col">
-                <h4>支持</h4>
-                <a>帮助文档</a>
-                <a>API参考</a>
-                <a>联系我们</a>
-              </div>
+            <div className="footer-col-v2">
+              <h4>资源</h4>
+              <a href="#">API 文档</a>
+              <a href="#">开发者指南</a>
+              <a href="#">更新日志</a>
+            </div>
+            <div className="footer-col-v2">
+              <h4>支持</h4>
+              <a href="#">帮助中心</a>
+              <a href="#">联系我们</a>
+              <a href="#">社区论坛</a>
             </div>
           </div>
-          <div className="footer-bottom">
-            <span>Qihu-AIFlow 2026. All rights reserved.</span>
-          </div>
+        </div>
+        <div className="footer-bottom-v2">
+          <p>&copy; 2026 Qihu-AIFlow. All rights reserved.</p>
         </div>
       </footer>
     </div>