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/components/BentoTile.astro

@@ -20,7 +20,7 @@
 interface Props {
   span?: 3 | 4 | 5 | 6 | 7 | 8 | 12;
   rows?: 1 | 2 | 3;
-  surface?: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'mint' | 'dark' | 'coral';
+  surface?: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'teal-soft' | 'mint' | 'dark' | 'coral';
   minHeight?: string;
   eyebrow?: string;
   title?: string;
@@ -106,6 +106,7 @@ const revealClass = reveal ? 'reveal' : '';
   .surface-purple { background: var(--color-purple); border-color: var(--color-purple); color: var(--color-white); }
   .surface-purple-soft { background: var(--color-purple-soft); border-color: var(--color-purple-soft); }
   .surface-teal { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
+  .surface-teal-soft { background: var(--color-teal-soft); border-color: var(--color-teal-soft); }
   .surface-mint { background: var(--color-mint-soft); border-color: var(--color-mint-soft); }
   .surface-coral { background: var(--color-coral); border-color: var(--color-coral); color: var(--color-white); }
   .surface-dark { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }

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;