feat(home): service tiles new colors + expanded content with bullets

Changes:
- Colors changed from yellow/purple-soft/mint/soft (same as problem section)
  → teal / coral / dark / purple (visually distinct from problems)
- Each tile now has 3 bullet points under subtitle to fill tile height
- Bullet styles: dot markers with currentColor at 0.4 opacity
- Text light (white) on dark surfaces (teal, coral, dark, purple)
- bullet list: mega-bullets class with proper spacing

src/pages/index.astro

@@ -153,32 +153,59 @@ const featuredPortfolio = portfolio.filter(p =>
           const tileCopy = [
             {
               eyebrow: 'ที่ปรึกษาด้าน AI',
+              surface: 'teal',
               subtitle: 'การนำ AI มาปรับใช้ในองค์กร เพื่อลดต้นทุนและเวลา รวมถึงการรักษาความรู้จากพนักงานที่เชี่ยวชาญ',
               objective: 'รักษาความรู้ขององค์กร ลดต้นทุนและเวลาการทำงาน',
+              bullets: [
+                'วิเคราะห์ workflow ที่เหมาะกับ AI ก่อนลงทุน',
+                'เลือก AI Model ที่คุ้มค่า ไม่ใช่แพงสุด',
+                'วางระบบ AI Agent ที่พนักงานใช้จริง',
+              ],
             },
             {
               eyebrow: 'วางระบบ Automation',
+              surface: 'coral',
               subtitle: 'การออกแบบระบบ Automation สำหรับธุรกิจคุณโดยเฉพาะ',
               objective: 'ลดต้นทุนและเวลา',
+              bullets: [
+                'ดู Workflow ก่อน เลือกเครื่องมือที่เหมาะสม',
+                'ลดเวลางานซ้ำจากชั่วโมงเป็นนาที',
+                'ระบบทำงานอัตโนมัติ พนักงานไม่เสียเวลาทำ Manual',
+              ],
             },
             {
               eyebrow: 'ที่ปรึกษาการตลาดออนไลน์',
+              surface: 'dark',
               subtitle: 'ออกแบบและวางกลยุทธ์ตามสถิติ กลุ่มเป้าหมาย และการทำงานขององค์กรคุณ',
               objective: 'เพิ่มยอดขาย',
+              bullets: [
+                'วางกลยุทธ์จากสถิติกลุ่มเป้าหมาย ไม่ใช่เดา',
+                'ดู Platform ที่ Convert ดี ตัดอันที่เสียเงินเปล่า',
+                'ระบบเก็บข้อมูล + วิเคราะห์ผล ค่อย ๆ ปรับ',
+              ],
             },
             {
               eyebrow: 'พัฒนาเว็บไซต์',
+              surface: 'purple',
               subtitle: 'พัฒนาเว็บไซต์ที่สร้างผลลัพธ์ได้จริง สวยงาม และลูกค้าสามารถดูแลได้เอง',
               objective: 'เพิ่มยอดขาย และความน่าเชื่อถือให้ธุรกิจ',
+              bullets: [
+                'เว็บที่ขายได้ + ลูกค้าดูแลเอง ไม่ต้องพึ่งเราทุกครั้ง',
+                'ออกแบบ SEO + GEO ให้ติดทั้ง Google และ AI Search',
+                'เลือก Tech Stack ที่เหมาะกับธุรกิจ ไม่ใช่ของถูกแต่พังบ่อย',
+              ],
             },
           ];
           // 2x2 layout — each tile span 6 (6+6 per row, 2 rows)
           const span = 6;
-          const surface = (['yellow', 'purple-soft', 'mint', 'soft'] as const)[i];
           const copy = tileCopy[i];
+          const surface = copy.surface;
           return (
             <BentoTile span={span} surface={surface} eyebrow={copy.eyebrow} title={s.data.title}>
               <p class="mega-subtitle">{copy.subtitle}</p>
+              <ul class="mega-bullets">
+                {copy.bullets.map(b => <li>{b}</li>)}
+              </ul>
               <div class="mega-objective">
                 <span class="objective-label">เป้าหมาย:</span>
                 <span class="objective-value">{copy.objective}</span>
@@ -348,8 +375,49 @@ const featuredPortfolio = portfolio.filter(p =>
     margin-bottom: 16px;
   }
   .surface-yellow .mega-subtitle { color: var(--color-black); opacity: 0.85; }
-  .surface-purple-soft .mega-subtitle,
+  .surface-purple-soft .mega-subtitle { color: var(--color-black); }
-  .surface-mint .mega-subtitle,
+  .surface-soft .mega-subtitle { color: var(--color-gray-700); }
+
+  /* Bullet list for service tiles */
+  .mega-bullets {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 20px;
+  }
+  .mega-bullets li {
+    position: relative;
+    padding-left: 20px;
+    font-size: 14px;
+    line-height: 1.6;
+    margin-bottom: 8px;
+  }
+  .mega-bullets li::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 9px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.4;
+  }
+
+  /* Light text on dark service tiles */
+  .surface-teal .mega-subtitle,
+  .surface-teal .mega-bullets,
+  .surface-teal .mega-bullets li::before,
+  .surface-coral .mega-subtitle,
+  .surface-coral .mega-bullets,
+  .surface-coral .mega-bullets li::before,
+  .surface-dark .mega-subtitle,
+  .surface-dark .mega-bullets,
+  .surface-dark .mega-bullets li::before,
+  .surface-purple .mega-subtitle,
+  .surface-purple .mega-bullets,
+  .surface-purple .mega-bullets li::before {
+    color: rgba(255, 255, 255, 0.95);
+  }
   .surface-soft .mega-subtitle { color: var(--color-gray-700); }
   .mega-objective {
     display: inline-flex;