Simplify About page CSS: remove conflicting selectors and unused styles

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

Author: congwang-mk

assets/css/about.css

@@ -1,6 +1,7 @@
 /* ===== ABOUT PAGE STYLES ===== */
 
-.mission-vision, .values, .founder, .technology-overview, .architecture, .performance {
+/* Section backgrounds */
+.mission-vision, .values, .founder {
     padding: var(--space-20) 0;
     background: white;
 }
@@ -11,26 +12,10 @@
     background: var(--gray-50);
 }
 
-.values h2, .founder h2, .technology-overview h2, .architecture h2, .performance h2 {
-    font-size: var(--text-4xl);
-    font-weight: 700;
-    line-height: var(--leading-tight);
-    color: var(--gray-900);
-    margin-bottom: var(--space-4);
-    text-align: center;
-    letter-spacing: -0.02em;
-}
-
-.values p, .founder p, .technology-overview p, .architecture p, .performance p {
-    font-size: var(--text-base);
-    line-height: var(--leading-relaxed);
-    color: var(--gray-600);
-    margin-bottom: var(--space-5);
-}
-
+/* Mission & Vision */
 .mv-block {
     text-align: center;
-    max-width: 720px;
+    max-width: 640px;
     margin: 0 auto;
 }
 
@@ -41,52 +26,67 @@
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--gray-400);
-    margin-bottom: var(--space-4);
+    margin-bottom: var(--space-3);
 }
 
 .mv-statement {
     font-family: var(--font-display);
-    font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
-    font-weight: 700;
-    line-height: var(--leading-tight);
+    font-size: var(--text-lg);
+    font-weight: 600;
+    line-height: var(--leading-relaxed);
     color: var(--gray-900);
-    letter-spacing: -0.02em;
-    margin-bottom: var(--space-4);
+    letter-spacing: -0.01em;
+    margin-bottom: var(--space-2);
 }
 
 .mv-detail {
-    font-size: var(--text-base);
+    font-size: var(--text-sm);
     line-height: var(--leading-relaxed);
     color: var(--gray-500);
     margin: 0;
 }
 
 .mv-divider {
-    width: 48px;
+    width: 40px;
     height: 1px;
     background: var(--gray-300);
-    margin: var(--space-12) auto;
+    margin: var(--space-6) auto;
 }
 
-.mission-vision-grid {
+/* Values grid */
+.values-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-6);
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-5);
+    margin-top: var(--space-10);
 }
 
-.value-card, .tech-card {
-    background: white;
-    border-radius: var(--radius-xl);
-    padding: var(--space-8);
-    border: 1px solid var(--gray-200);
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+.values-item {
+    text-align: center;
+}
+
+.values-item i {
+    width: 24px;
+    height: 24px;
+    color: var(--gray-900);
+    margin-bottom: var(--space-3);
 }
 
-.value-card:hover, .tech-card:hover {
-    border-color: var(--gray-300);
-    box-shadow: var(--shadow-md);
+.values-item h3 {
+    font-size: var(--text-sm);
+    font-weight: 700;
+    color: var(--gray-900);
+    margin-bottom: var(--space-2);
 }
 
+.values-item p {
+    font-size: var(--text-xs);
+    line-height: var(--leading-relaxed);
+    color: var(--gray-500);
+    margin: 0;
+}
+
+/* Founder */
 .founder-profile {
     max-width: 800px;
     margin: 0 auto;
@@ -130,45 +130,6 @@
     font-size: var(--text-sm);
 }
 
-/* Values grid - compact 4-column layout */
-.values-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--space-5);
-    margin-top: var(--space-10);
-}
-
-.values-item {
-    text-align: center;
-}
-
-.values-item i {
-    width: 24px;
-    height: 24px;
-    color: var(--gray-900);
-    margin-bottom: var(--space-3);
-}
-
-.values-item h3 {
-    font-size: var(--text-sm);
-    font-weight: 700;
-    color: var(--gray-900);
-    margin-bottom: var(--space-2);
-}
-
-.values-item p {
-    font-size: var(--text-xs);
-    line-height: var(--leading-relaxed);
-    color: var(--gray-500);
-    margin: 0;
-}
-
-@media (max-width: 640px) {
-    .values-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
 /* Contact Form */
 .contact-form {
     background: white;
@@ -201,7 +162,7 @@
 .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
     outline: none;
     border-color: var(--gray-900);
-    box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.08);
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
 }
 
 /* Responsive */
@@ -211,8 +172,10 @@
         gap: var(--space-5);
         text-align: center;
     }
+}
 
-    .values h2, .founder h2, .technology-overview h2, .architecture h2, .performance h2 {
-        font-size: var(--text-3xl);
+@media (max-width: 640px) {
+    .values-grid {
+        grid-template-columns: repeat(2, 1fr);
     }
 }