content(home): X1+X2 hero text + 2-col hero with pain stack + 2x2 services

Per user spec, restructured home page:

1. Hero copy (X1 + X2):
   - badge: "เราจะช่วยคุณเพิ่มกำไร"
   - title: "เราช่วยวางระบบงาน และใช้สถิติวางกลยุทธ์ทางการตลาด"
   - subtitle unchanged
   - replaced old "เว็บขายไม่ได้ โฆษณาเปลือง..." headline

2. Hero 2-column layout (text | pain stack):
   - Left 50%: badge, title, accent line, subtitle, CTA
   - Right 50%: 4 pain cards in vertical stack with colored
     surfaces (yellow, purple-soft, mint, teal) — staggered
     fade-in animation, each card has eyebrow "คุณกำลังเจอปัญหา"
     + pain question
   - Pain cards on right: "ยิ่งขาย กำไรยิ่งลด?", "มีเว็บไซต์
     เหมือนไม่มี?", "พนักงานทำงานได้น้อยกว่าที่ต้องการ?",
     "เอา AI มาให้ใช้ แต่งานไม่ได้มากขึ้นตามที่คิด?"
   - Responsive: stacks vertically on mobile (<1024px)
   - Pain card surfaces match bento tile vocabulary

3. Services section: 4x1 → 2x2 layout:
   - Each tile now span 6 (6+6 per row, 2 rows)
   - 4 tiles total: AI Consult (yellow), Automation (purple-soft),
     Marketing (mint), Web (soft)

4. Section title (X2):
   - "เริ่มจากอันที่ปวดที่สุด ค่อยขยายไปอันอื่น"
     → "เลือกบริการที่ตรงกับปัญหาของคุณ"

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

src/pages/index.astro

@@ -76,8 +76,8 @@ const featuredPortfolio = portfolio.filter(p => p.data.featured).slice(0, 4);
   <Navigation />
 
   <Hero
-    badge="ที่ปรึกษาที่วางกลยุทธ์จากข้อมูล ไม่ใช่จากประสบการณ์ล้วน ๆ"
-    title="เว็บขายไม่ได้ โฆษณาเปลือง งานซ้ำเติมคน — เราแก้ให้ตรงจุด"
+    badge="เราจะช่วยคุณเพิ่มกำไร"
+    title="เราช่วยวางระบบงาน และใช้สถิติวางกลยุทธ์ทางการตลาด"
     subtitle="รับทำเว็บ ที่ปรึกษาการตลาด และวางระบบ AI ในองค์กร เริ่มจากดูสถิติของคุณก่อน ไม่ใช่เดาว่าควรทำอะไร"
   >
     <a slot="hero-cta-secondary" href="/portfolio" class="btn btn-outline-dark">
@@ -137,7 +137,7 @@ const featuredPortfolio = portfolio.filter(p => p.data.featured).slice(0, 4);
       <div class="section-header reveal">
         <span class="section-badge">บริการของเรา</span>
         <h2 class="section-title">
-          เริ่มจากอันที่ปวดที่สุด <span class="highlight">ค่อยขยายไปอันอื่น</span>
+          เลือกบริการที่<span class="highlight">ตรงกับปัญหาของคุณ</span>
         </h2>
         <p class="section-desc">ไม่จำเป็นต้องทำทุกอย่างพร้อมกัน</p>
       </div>
@@ -167,8 +167,8 @@ const featuredPortfolio = portfolio.filter(p => p.data.featured).slice(0, 4);
               objective: 'เพิ่มยอดขาย และความน่าเชื่อถือให้ธุรกิจ',
             },
           ];
-          // Equal 4x3 tiles (full width, 1 row)
-          const span = 3;
+          // 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];
           return (