fix(home): tone down service colors — use mint · yellow · purple-soft · teal-soft

Changes:
- Added new surface variant 'teal-soft' to BentoTile (uses --color-teal-soft)
- Replaced vivid purple/coral with yellow (brand) and teal-soft (light teal)
- Colors now: mint (light green) · yellow (brand) · purple-soft (light purple) · teal-soft (light teal)
- All are light/subtle, no dark or vivid surfaces

src/pages/index.astro

@@ -164,7 +164,7 @@ const featuredPortfolio = portfolio.filter(p =>
             },
             {
               eyebrow: 'วางระบบ Automation',
-              surface: 'purple',
+              surface: 'yellow',
               subtitle: 'การออกแบบระบบ Automation สำหรับธุรกิจคุณโดยเฉพาะ',
               objective: 'ลดต้นทุนและเวลา',
               bullets: [
@@ -175,7 +175,7 @@ const featuredPortfolio = portfolio.filter(p =>
             },
             {
               eyebrow: 'ที่ปรึกษาการตลาดออนไลน์',
-              surface: 'coral',
+              surface: 'purple-soft',
               subtitle: 'ออกแบบและวางกลยุทธ์ตามสถิติ กลุ่มเป้าหมาย และการทำงานขององค์กรคุณ',
               objective: 'เพิ่มยอดขาย',
               bullets: [
@@ -186,7 +186,7 @@ const featuredPortfolio = portfolio.filter(p =>
             },
             {
               eyebrow: 'พัฒนาเว็บไซต์',
-              surface: 'purple-soft',
+              surface: 'teal-soft',
               subtitle: 'พัฒนาเว็บไซต์ที่สร้างผลลัพธ์ได้จริง สวยงาม และลูกค้าสามารถดูแลได้เอง',
               objective: 'เพิ่มยอดขาย และความน่าเชื่อถือให้ธุรกิจ',
               bullets: [
@@ -402,15 +402,7 @@ const featuredPortfolio = portfolio.filter(p =>
     opacity: 0.4;
   }
 
-  /* Light text on dark service tiles */
-  .surface-purple .mega-subtitle,
-  .surface-purple .mega-bullets,
-  .surface-purple .mega-bullets li::before,
-  .surface-coral .mega-subtitle,
-  .surface-coral .mega-bullets,
-  .surface-coral .mega-bullets li::before {
-    color: rgba(255, 255, 255, 0.95);
-  }
+  /* Light text on dark service tiles — currently none used (teal-soft is light) */
   .surface-soft .mega-subtitle { color: var(--color-gray-700); }
   .mega-objective {
     display: inline-flex;