refactor(services/webdev): restructure from 11 sections to 5 + add real content

Major restructuring of /services/webdev:

Before: 11 sections (Hero, Features, Targets, Included, Tech, Pricing, AI, WhyUs, MDX, FAQ, CTA) — content sparse, many empty cards

After: 5 main sections + inline MDX:
  1. Hero (with 4 why-us cards in right column)
  2. บริการที่คุณได้รับ — 4 service tiles with 3 bullets each
  3. เลือกระบบ + ผลงานจริง (4 real client sites with CTA links)
  4. ราคา (with 'bestFor' context for each price)
  5. FAQ (8 questions with longer answers) + MDX content card

New content (webdev only — other services unchanged):
- 4 why-us tiles (ทำเสร็จไว, แก้เองได้, ติด Google+AI, Server ฟรีปีแรก)
- 4 service tiles with 3 bullets each (แก้ไขเอง, AI, SEO+GEO, Server+SSL)
- 4 real portfolio entries (Dataroot, Baofuling, Lungfinler, ทวนทอง 99)
- 5 pricing entries with bestFor context
- 8 FAQ entries (was 6) with longer answers
- Removed old 'included', 'features', 'targets' from data

CSS additions:
- .hero-trust-grid (right column 4 cards)
- .service-bullets (✓ bullets in service tiles)
- .tile-cta-link (dark pill CTA in portfolio tiles)
- .mdx-content-card (white card for MDX content)

src/pages/services/[slug].astro

@@ -32,36 +32,76 @@ const serviceData: Record<string, any> = {
     titleAccent: 'เปลี่ยนแปลงเองได้',
     titleAccent2: 'ด้วย AI',
     desc: 'เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ไม่ต้องรอเราทุกครั้ง พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที + GEO ติด ChatGPT, Perplexity, AI Search',
-    features: [
+    whyUs: [
-      { icon: 'pen', title: 'แก้ไขเองได้ง่าย', desc: 'ระบบหลังบ้านใช้ง่าย' },
+      { num: '01', title: 'ทำเสร็จไว', desc: 'เว็บ Astro 14-30 วัน · WordPress 1-3 เดือน' },
-      { icon: 'bot', title: 'AI ช่วยสร้างเนื้อหา', desc: 'สั่ง AI เขียนบทความได้ทันที' },
+      { num: '02', title: 'แก้เองได้', desc: 'ลูกค้าดูแลเนื้อหาเอง ไม่ต้องพึ่งเราทุกครั้ง' },
-      { icon: 'search', title: 'GEO ติด AI Search', desc: 'ติด ChatGPT, Perplexity' },
+      { num: '03', title: 'ติด Google + AI', desc: 'SEO + GEO ติด ChatGPT, Perplexity, Google AI' },
-      { icon: 'shield', title: 'Server คุณภาพสูง', desc: 'เว็บโหลดเร็ว ปลอดภัย' },
+      { num: '04', title: 'Server ฟรีปีแรก', desc: 'พร้อม SSL และ Domain .com ปีแรก' },
     ],
-    included: ['เว็บไซต์พร้อมใช้งาน', 'SSL ฟรี', 'โดเมน', 'Analytics'],
+    services: [
-    targets: [
+      {
-      { icon: 'building', title: 'SME / ธุรกิจขนาดเล็ก', desc: 'ธุรกิจท้องถิ่น ร้านค้าปลีก บริการต่าง ๆ ที่ต้องการเว็บไซต์ในราคาที่เข้าถึงได้' },
+        icon: 'pen', span: 6, surface: 'mint',
-      { icon: 'shoppingCart', title: 'ร้านค้าออนไลน์', desc: 'ธุรกิจ E-commerce ที่ต้องการขายสินค้าออนไลน์ พร้อมระบบตะกร้าและชำระเงินครบวงจร' },
+        title: 'แก้ไขเนื้อหาง่าย ไม่ต้องมีความรู้เทคนิค',
-      { icon: 'briefcase', title: 'บริษัท / องค์กร', desc: 'บริษัทที่ต้องการเว็บไซต์องค์กร เว็บไซต์แนะนำบริษัท หรือเว็บไซต์ในระบบ Intranet' },
+        bullets: [
+          'ระบบหลังบ้านใช้ง่าย เปลี่ยนข้อความ รูปภาพ สินค้า ได้เอง',
+          'อบรมการใช้งานให้ทีมของคุณ ใช้งานได้ทันที',
+          'มีคู่มือ + วิดีโอประกอบ ทบทวนได้ทุกเมื่อ',
+        ],
+      },
+      {
+        icon: 'bot', span: 6, surface: 'yellow',
+        title: 'AI ช่วยสร้างเนื้อหา + แนะนำการปรับปรุง',
+        bullets: [
+          'สั่ง AI เขียนบทความ SEO + GEO ได้ทันที',
+          'AI แนะนำหัวข้อบทความใหม่ที่ตรงกับลูกค้าของคุณ',
+          'AI วิเคราะห์เนื้อหาเดิม บอกจุดที่ควรปรับ',
+        ],
+      },
+      {
+        icon: 'search', span: 6, surface: 'purple-soft',
+        title: 'SEO + GEO ติด Google และ AI Search',
+        bullets: [
+          'ติด ChatGPT, Perplexity, Google AI Overviews',
+          'ถูกอ้างอิงเมื่อลูกค้าถาม AI เกี่ยวกับสินค้าของคุณ',
+          'โครงสร้างเว็บไซต์ออกแบบมาเพื่อ AI อ่านเข้าใจ',
+        ],
+      },
+      {
+        icon: 'shield', span: 6, surface: 'teal-soft',
+        title: 'Server + SSL + Backup ครบ ดูแลให้',
+        bullets: [
+          'Server เร็ว โหลดไว ไม่มี downtime บ่อย',
+          'SSL ฟรี เว็บปลอดภัย + Google จัดอันดับดี',
+          'Backup อัตโนมัติทุกวัน ไม่ต้องกลัวข้อมูลหาย',
+        ],
+      },
     ],
     techOptions: [
-      { badge: 'A', name: 'Astro', desc: 'เหมาะสำหรับเว็บไซต์ทั่วไป / Corporate เน้น AI และ SEO โหลดเร็ว ประสิทธิภาพสูง บล็อก / เว็บบริษัท', duration: '14-30 วัน' },
+      { badge: 'A', name: 'Astro', surface: 'yellow', desc: 'เหมาะสำหรับเว็บไซต์ทั่วไป / Corporate เน้น AI และ SEO โหลดเร็ว ประสิทธิภาพสูง บล็อก / เว็บบริษัท', duration: '14-30 วัน', best: 'ธุรกิจที่ต้องการเว็บเร็ว ติด Google + AI Search' },
-      { badge: 'WP', name: 'WordPress', desc: 'เหมาะสำหรับเว็บขายของ (E-commerce) เว็บไซต์ที่ซับซ้อน มีระบบหลังบ้านซับซ้อน ต้องการ Plugin เยอะ', duration: '2-4 เดือน' },
+      { badge: 'WP', name: 'WordPress', surface: 'soft', desc: 'เหมาะสำหรับเว็บขายของ (E-commerce) เว็บไซต์ที่ซับซ้อน มีระบบหลังบ้านซับซ้อน ต้องการ Plugin เยอะ', duration: '2-4 เดือน', best: 'ร้านค้าออนไลน์ เว็บที่ต้องการ Plugin หลากหลาย' },
     ],
     pricing: [
-      { label: 'เว็บไซต์ Astro (AI Ready)', price: 'เริ่มต้น ฿10,000' },
+      { label: 'เว็บไซต์ Astro (AI Ready)', price: 'เริ่มต้น ฿10,000', surface: 'mint', bestFor: 'เว็บบริษัท เว็บ Landing Page เน้น SEO + AI' },
-      { label: 'เว็บไซต์ WordPress', price: 'เริ่มต้น ฿15,000' },
+      { label: 'เว็บไซต์ WordPress', price: 'เริ่มต้น ฿15,000', surface: 'yellow', bestFor: 'ร้านค้าออนไลน์ เว็บ E-commerce ที่ต้องการ Plugin' },
-      { label: 'Landing Page', price: 'เริ่มต้น ฿5,000' },
+      { label: 'Landing Page', price: 'เริ่มต้น ฿5,000', surface: 'purple-soft', bestFor: 'หน้าเดียวจบ ใช้ยิงแอดหรือทดสอบตลาด' },
-      { label: 'Server Hosting', price: '฿5,000/ปี' },
+      { label: 'Server Hosting', price: '฿5,000/ปี', surface: 'teal-soft', bestFor: 'Server คุณภาพสูง ดูแลให้' },
-      { label: 'Domain .com', price: '฿500/ปี' },
+      { label: 'Domain .com', price: '฿500/ปี', surface: 'soft', bestFor: 'ต่ออายุโดเมน .com / .co.th' },
+    ],
+    realPortfolio: [
+      { name: 'Dataroot', url: 'https://erp.dataroot.asia', industry: 'ตัวแทนจำหน่าย Odoo ERP', highlight: 'หน้าแรกโหลดไว + ติด Google ได้ผลดี' },
+      { name: 'Baofuling Shop', url: 'https://baofulingshop.com', industry: 'E-commerce สินค้า Skincare', highlight: 'หน้าเดียวจบ สั่งซื้อง่าย ดูแลเองได้' },
+      { name: 'Lungfinler', url: 'https://lungfinler.com', industry: 'Digital Agency', highlight: 'แสดงผลงาน + บล็อก ใช้ CMS ได้' },
+      { name: 'ทวนทอง 99', url: 'https://tuanthong99.com', industry: 'สมุนไพรไทย', highlight: 'ระบบสั่งซื้อ + จัดการสินค้า ดูแลเองได้' },
     ],
     faqs: [
-      { q: 'แก้ไขเว็บเองยากไหม?', a: 'ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค' },
+      { q: 'แก้ไขเว็บเองยากไหม?', a: 'ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา คุณพิมพ์สั่ง AI ได้เลยว่าอยากได้เนื้อหาแบบไหน ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย เหมือนใช้ Word คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค และทีมเราจะอบรมการใช้งานให้ก่อนส่งมอบ' },
-      { q: 'มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?', a: 'ค่าบริการ Server และโดเมนจะฟรีในปีแรก และจะมีค่าใช้จ่ายในปีถัดไป ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม' },
+      { q: 'มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?', a: 'ค่าบริการ Server และโดเมนจะฟรีในปีแรก คุณจ่ายเฉพาะค่าทำเว็บไซต์ และจะมีค่าใช้จ่ายในปีถัดไป: ค่า Server ประมาณ 5,000 บาท/ปี + ค่าโดเมน 500 บาท/ปี ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม ถ้าเว็บมีคนเข้าน้อยกว่า 100,000 คน/เดือน ค่า Server ไม่เพิ่ม' },
-      { q: 'Server ดูแลให้ไหม?', a: 'เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป' },
+      { q: 'Server ดูแลให้ไหม?', a: 'เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด อัปเดตความปลอดภัย และแก้ไขปัญหาเบื้องต้น ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือถ้าเว็บมีฟีเจอร์ที่ต้องใช้ทรัพยากร Server สูง เช่น AI Chatbot ที่คุยกับลูกค้าจำนวนมาก' },
-      { q: 'ทำเว็บขายของ (E-commerce) ได้ไหม?', a: 'ทำได้แน่นอน เราใช้ WordPress เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร' },
+      { q: 'ทำเว็บขายของ (E-commerce) ได้ไหม?', a: 'ทำได้แน่นอน เราใช้ WordPress + WooCommerce เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน (PromptPay / โอนผ่านธนาคาร / บัตรเครดิต) ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร คุณสามารถเพิ่มสินค้า ลดราคา จัดโปรโมชั่น ได้ด้วยตัวเอง' },
-      { q: 'ต้องมีความรู้ทางเทคนิคไหม?', a: 'ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ' },
+      { q: 'ต้องมีความรู้ทางเทคนิคไหม?', a: 'ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ ถ้าเจอปัญหาการใช้งาน ทีมซัพพอร์ตพร้อมช่วยทันที' },
-      { q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI' },
+      { q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI เมื่อมีคนถามเกี่ยวกับสินค้าหรือบริการในกลุ่มของคุณ เป็นอีกช่องทางที่จะดึงลูกค้าเข้ามา' },
+      { q: 'เว็บจะติด Google ในกี่เดือน?', a: 'ขึ้นอยู่กับคีย์เวิร์ดและการแข่งขัน สำหรับคีย์เวิร์ดที่มีการแข่งขันปานกลาง ประมาณ 2-3 เดือนจะเริ่มเห็นผล ส่วนคีย์เวิร์ดที่แข่งขันสูงอาจใช้เวลา 6 เดือนขึ้นไป เราจะวิเคราะห์คีย์เวิร์ดที่เหมาะสมก่อนเริ่มทำ SEO' },
+      { q: 'ถ้าอยากเพิ่มฟีเจอร์ทีหลัง ทำได้ไหม?', a: 'ได้แน่นอน เว็บไซต์ที่เราทำออกแบบมาให้ขยายได้ คุณสามารถเพิ่มฟีเจอร์ เช่น ระบบจองคิว ระบบสมาชิก ระบบชำระเงินเพิ่ม หรือเชื่อมต่อกับ API ภายนอก ทีมเราจะประเมินราคาเพิ่มเติมตามฟีเจอร์ที่ต้องการ แจ้งราคาก่อนเริ่มงานทุกครั้ง' },
     ],
   },
   'marketing': {
@@ -178,132 +218,93 @@ const featureList = data.features || data.services || [];
               ทัก LINE
             </a>
           </div>
-
-          <div class="hero-trust">
-            <span class="trust-item">✓ ปรึกษาฟรี</span>
-            {isWebDev && <span class="trust-item">✓ Server ฟรีปีแรก</span>}
-            {isAutomation && <span class="trust-item">✓ เชื่อมต่อระบบได้ทุกที่</span>}
-            {isMarketing && <span class="trust-item">✓ AI วิเคราะห์</span>}
-            {isTechConsult && <span class="trust-item">✓ ทีมงานมืออาชีพ</span>}
-            <span class="trust-item">✓ ราคาเหมาะสม</span>
-          </div>
         </div>
 
-        <!-- Side card — first 4 features as a single tile -->
+        <!-- Hero side — 4 why-us tiles stacked -->
         <div class="hero-visual">
-          <BentoGrid>
+          <div class="hero-trust-title">ทำไมต้องเลือกเรา</div>
-            <BentoTile span={12} surface="yellow" eyebrow="บริการหลัก" title={`${featureList.length} ความสามารถหลัก`}>
+          <div class="hero-trust-grid">
-              <ul class="hero-feature-list">
+            {data.whyUs && data.whyUs.map((w: any) => (
-                {featureList.slice(0, 4).map((f) => (
+              <div class="hero-trust-card">
-                  <li class="hero-feature-item">
+                <div class="hero-trust-num">{w.num}</div>
-                    <div class="hero-feature-index">{String(featureList.indexOf(f) + 1).padStart(2, '0')}</div>
+                <div class="hero-trust-body">
-                    <div class="hero-feature-content">
+                  <div class="hero-trust-name">{w.title}</div>
-                      <span class="hero-feature-title">{f.title}</span>
+                  <div class="hero-trust-desc">{w.desc}</div>
-                      <span class="hero-feature-desc">{f.desc || f.items?.[0]}</span>
+                </div>
               </div>
-                  </li>
             ))}
-              </ul>
+          </div>
-            </BentoTile>
-          </BentoGrid>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- FEATURES (BENTO) -->
+  <!-- SECTION 2: SERVICES (with bullets) -->
+  {data.services && (
     <section class="section section-bento">
       <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '10%' }} opacity={0.2} blur="80px" />
       <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', right: '5%' }} opacity={0.25} blur="80px" />
       <div class="container" style="position: relative; z-index: 1;">
         <div class="section-header reveal">
-        <span class="section-badge">{isTechConsult ? 'บริการของเรา' : 'ความสามารถ'}</span>
+          <span class="section-badge">บริการที่คุณได้รับ</span>
           <h2 class="section-title">
-          {data.title} <span class="highlight">{data.titleAccent}</span>
+            ทุกบริการ<span class="highlight">ที่เว็บไซต์ต้องมี</span>
           </h2>
+          <p class="section-desc">ครบทุกฟีเจอร์ที่เว็บสมัยใหม่ต้องมี — ไม่ต้องจ้างเพิ่มทีหลัง</p>
         </div>
 
         <BentoGrid>
-        {featureList.map((f: any, i: number) => {
+          {data.services.map((s: any) => (
-          // Asymmetric span + surface rotation per the bento design system
+            <BentoTile span={s.span} surface={s.surface} eyebrow={s.icon} title={s.title}>
-          const span = i % 3 === 0 ? 8 : 4;
+              <ul class="service-bullets">
-          const surfaces = ['yellow', 'purple-soft', 'mint', 'soft', 'teal', 'soft'] as const;
+                {s.bullets.map((b: string) => <li>{b}</li>)}
-          const surface = surfaces[i % surfaces.length];
+              </ul>
-          return (
-            <BentoTile span={span} surface={surface} eyebrow={`0${i + 1}`} title={f.title}>
-              <p>{f.desc || f.items?.join(' · ')}</p>
-            </BentoTile>
-          );
-        })}
-      </BentoGrid>
-    </div>
-  </section>
-
-  <!-- TARGET AUDIENCE (BENTO) -->
-  {data.targets && (
-    <section class="section section-soft section-bento">
-      <DecoOrb color="teal" size="400px" speed={0.3} position={{ top: '-100px', right: '-100px' }} opacity={0.2} blur="80px" />
-      <DecoOrb color="soft" size="300px" speed={0.4} position={{ bottom: '-100px', left: '-50px' }} opacity={0.35} blur="80px" />
-      <div class="container" style="position: relative; z-index: 1;">
-        <div class="section-header reveal">
-          <span class="section-badge">เหมาะกับใคร?</span>
-          <h2 class="section-title">ธุรกิจ<span class="highlight">ทุกประเภท</span></h2>
-        </div>
-
-        <BentoGrid>
-          {data.targets.map((t: any, i: number) => {
-            // First target takes 12 to lead, then 6+6 for remaining pair
-            const span = i === 0 ? 12 : 6;
-            const surfaces = ['yellow', 'soft', 'purple-soft'] as const;
-            const surface = surfaces[i % surfaces.length];
-            return (
-              <BentoTile span={span} surface={surface} eyebrow={`0${i + 1}`} title={t.title}>
-                <p>{t.desc}</p>
-              </BentoTile>
-            );
-          })}
-        </BentoGrid>
-      </div>
-    </section>
-  )}
-
-  <!-- INCLUDED + TECH OPTIONS (BENTO) -->
-  {(data.included || data.techOptions) && (
-    <section class="section section-bento">
-      <DecoOrb color="mint" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
-      <DecoOrb color="soft" size="300px" speed={0.4} position={{ bottom: '-100px', right: '10%' }} opacity={0.35} blur="80px" />
-      <div class="container" style="position: relative; z-index: 1;">
-        {data.included && (
-          <>
-            <div class="section-header reveal">
-              <span class="section-badge">สิ่งที่ได้รับ</span>
-              <h2 class="section-title">ทุกเว็บไซต์มาพร้อม<span class="highlight">ให้ครบ</span></h2>
-            </div>
-            <BentoGrid>
-              {data.included.map((item: string, i: number) => (
-                <BentoTile span={4} surface="white" eyebrow="✓" title={item}>
-                  <p class="tile-meta">รวมอยู่ในแพ็คเกจ — ไม่มีค่าใช้จ่ายเพิ่ม</p>
             </BentoTile>
           ))}
-              <BentoTile span={12} surface="yellow" eyebrow="ราคารวม" title="เว็บไซต์ + Server 1 ปี + Domain .com">
-                <p>เริ่มต้น <strong>฿15,500*</strong></p>
-                <p class="tile-meta-dark">*ราคาขึ้นอยู่กับความซับซ้อนของเว็บไซต์</p>
-              </BentoTile>
         </BentoGrid>
-          </>
+      </div>
+    </section>
   )}
 
+  <!-- SECTION 3: REAL PORTFOLIO + TECH OPTIONS -->
+  {(data.realPortfolio || data.techOptions) && (
+    <section class="section section-soft section-bento">
+      <DecoOrb color="mint" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
+      <DecoOrb color="teal" size="300px" speed={0.4} position={{ bottom: '-100px', right: '10%' }} opacity={0.3} blur="80px" />
+      <div class="container" style="position: relative; z-index: 1;">
+
         {data.techOptions && (
           <>
-            <div class="section-header reveal" style="margin-top: 64px;">
+            <div class="section-header reveal">
               <span class="section-badge">เลือกระบบ</span>
               <h2 class="section-title">เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span></h2>
+              <p class="section-desc">แนะนำให้เลือกตามลักษณะธุรกิจ ไม่ใช่เลือกของแพง</p>
             </div>
             <BentoGrid>
-              {data.techOptions.map((t: any, i: number) => (
+              {data.techOptions.map((t: any) => (
-                <BentoTile span={6} surface={i === 0 ? 'yellow' : 'soft'} eyebrow={t.badge} title={t.name}>
+                <BentoTile span={6} surface={t.surface} eyebrow={t.badge} title={t.name}>
                   <p>{t.desc}</p>
                   <p class="tile-meta-strong">{t.duration}</p>
+                  <p class="tile-meta">✓ เหมาะกับ: {t.best}</p>
+                </BentoTile>
+              ))}
+            </BentoGrid>
+          </>
+        )}
+
+        {data.realPortfolio && (
+          <>
+            <div class="section-header reveal" style="margin-top: 80px;">
+              <span class="section-badge">ผลงานจริง</span>
+              <h2 class="section-title">เว็บไซต์ที่<span class="highlight">ใช้งานจริง</span></h2>
+              <p class="section-desc">เว็บที่เราทำ ยังใช้งานอยู่ทุกวัน — คลิกเข้าไปดูได้เลย</p>
+            </div>
+            <BentoGrid>
+              {data.realPortfolio.map((p: any) => (
+                <BentoTile span={6} surface="white" eyebrow="✓ ใช้งานจริง" title={p.name}>
+                  <p class="tile-meta">{p.industry}</p>
+                  <p class="tile-body-detail">{p.highlight}</p>
+                  <a href={p.url} target="_blank" rel="noopener" class="tile-cta-link">เยี่ยมชมเว็บไซต์ →</a>
                 </BentoTile>
               ))}
             </BentoGrid>
@@ -313,9 +314,9 @@ const featureList = data.features || data.services || [];
     </section>
   )}
 
-  <!-- PRICING (BENTO) -->
+  <!-- SECTION 4: PRICING (with bestFor context) -->
   {data.pricing && (
-    <section class="section section-soft section-bento">
+    <section class="section section-bento">
       <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.25} blur="80px" />
       <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
       <div class="container" style="position: relative; z-index: 1;">
@@ -326,106 +327,35 @@ const featureList = data.features || data.services || [];
         </div>
 
         <BentoGrid>
-          {data.pricing.map((p: any, i: number) => {
+          {data.pricing.map((p: any) => (
-            const surfaces = ['white', 'soft', 'yellow', 'mint', 'purple-soft'] as const;
+            <BentoTile span={4} surface={p.surface} eyebrow={p.label} title={p.price}>
-            const surface = surfaces[i % surfaces.length];
+              <p class="tile-meta">✓ {p.bestFor}</p>
-            return (
-              <BentoTile span={4} surface={surface} eyebrow={p.label} title={p.price}>
             </BentoTile>
-            );
+          ))}
-          })}
         </BentoGrid>
       </div>
     </section>
   )}
 
-  <!-- AI FEATURES (BENTO) -->
+  <!-- SECTION 5: FAQ + MDX content -->
-  {data.aiFeatures && (
-    <section class="section section-bento">
-      <DecoOrb color="purple" size="500px" speed={0.3} position={{ top: '-100px', left: '10%' }} opacity={0.2} blur="100px" />
-      <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '10%', right: '-50px' }} opacity={0.25} blur="80px" />
-      <div class="container" style="position: relative; z-index: 1;">
-        <div class="section-header reveal">
-          <span class="section-badge">AI Analytics</span>
-          <h2 class="section-title">AI วิเคราะห์<span class="highlight">ทุกความเคลื่อนไหว</span></h2>
-        </div>
-
-        <BentoGrid>
-          {data.aiFeatures.map((f: string, i: number) => {
-            // Asymmetric: first item 12, then 6+6 paired
-            const span = i === 0 ? 12 : 6;
-            const surfaces = ['yellow', 'soft', 'mint', 'purple-soft'] as const;
-            const surface = surfaces[i % surfaces.length];
-            return (
-              <BentoTile span={span} surface={surface} eyebrow={`✓ 0${i + 1}`} title={f}>
-              </BentoTile>
-            );
-          })}
-        </BentoGrid>
-      </div>
-    </section>
-  )}
-
-  <!-- WHY US (BENTO) -->
-  {data.whyUs && (
-    <section class="section section-bento">
-      <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.25} blur="80px" />
-      <DecoOrb color="teal" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-50px' }} opacity={0.2} blur="80px" />
-      <div class="container" style="position: relative; z-index: 1;">
-        <div class="section-header reveal">
-          <span class="section-badge">ทำไมต้องเลือกเรา?</span>
-          <h2 class="section-title">ความเชี่ยวชาญ<span class="highlight">ที่คุณไว้วางใจได้</span></h2>
-        </div>
-
-        <BentoGrid>
-          {data.whyUs.map((w: any, i: number) => {
-            const surfaces = ['yellow', 'soft', 'purple-soft'] as const;
-            const surface = surfaces[i % surfaces.length];
-            return (
-              <BentoTile span={4} surface={surface} eyebrow={`0${i + 1}`} title={w.title}>
-                <p>{w.desc}</p>
-              </BentoTile>
-            );
-          })}
-        </BentoGrid>
-      </div>
-    </section>
-  )}
-
-  <!-- DYNAMIC CONTENT FROM MDX (full-width bento tile) -->
   <section class="section section-soft section-bento">
-    <DecoOrb color="soft" size="500px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.4} blur="80px" />
-    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-50px', right: '-50px' }} opacity={0.2} blur="80px" />
-    <div class="container" style="position: relative; z-index: 1;">
-      <BentoGrid>
-        <BentoTile span={12} surface="white" eyebrow="รายละเอียดเพิ่มเติม" title="เนื้อหาจากเอกสารบริการ">
-          <div class="mdx-content">
-            <Content />
-          </div>
-        </BentoTile>
-      </BentoGrid>
-    </div>
-  </section>
-
-  <!-- FAQ (BENTO) -->
-  <section class="section section-bento">
     <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
     <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-50px', right: '-50px' }} opacity={0.25} blur="80px" />
     <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">FAQ</span>
         <h2 class="section-title">คำถาม<span class="highlight">ที่พบบ่อย</span></h2>
+        <p class="section-desc">รวมคำถามที่ลูกค้าถามบ่อยที่สุด</p>
       </div>
 
       <BentoGrid>
         {data.faqs.map((faq: any, i: number) => {
-          // Hero: first question 12-span, then alternating 8+4 for visual tension
           let span: 12 | 8 | 4 = 6;
           if (i === 0) span = 12;
           else if (i % 3 === 1) span = 8;
           else if (i % 3 === 2) span = 4;
           else span = 6;
-          const surfaces = ['yellow', 'soft', 'purple-soft', 'mint', 'teal', 'soft'] as const;
+          const surfaces = ['yellow', 'soft', 'purple-soft', 'mint', 'teal-soft', 'soft'] as const;
           const surface = surfaces[i % surfaces.length];
           return (
             <BentoTile span={span} surface={surface} eyebrow={`Q${i + 1}`} title={faq.q}>
@@ -436,6 +366,16 @@ const featureList = data.features || data.services || [];
           );
         })}
       </BentoGrid>
+
+      <div class="mdx-section">
+        <div class="section-header reveal" style="margin-top: 64px;">
+          <span class="section-badge">รายละเอียดเพิ่มเติม</span>
+          <h2 class="section-title">เนื้อหา<span class="highlight">จากเอกสารบริการ</span></h2>
+        </div>
+        <div class="mdx-content-card">
+          <Content />
+        </div>
+      </div>
     </div>
   </section>
 
@@ -624,6 +564,123 @@ const featureList = data.features || data.services || [];
   .mdx-content :global(li) { margin-bottom: 4px; }
   .mdx-content :global(strong) { color: var(--color-black); }
 
+  /* MDX card (new) */
+  .mdx-content-card {
+    background: var(--color-white);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-xl);
+    padding: 40px;
+    font-size: 16px;
+    line-height: 1.7;
+    color: var(--color-gray-700);
+  }
+  .mdx-content-card :global(h2) { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin: 24px 0 12px; color: var(--color-black); }
+  .mdx-content-card :global(h3) { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--color-black); }
+  .mdx-content-card :global(p) { margin-bottom: 12px; }
+  .mdx-content-card :global(ul) { padding-left: 20px; margin-bottom: 12px; }
+  .mdx-content-card :global(li) { margin-bottom: 4px; }
+  .mdx-content-card :global(strong) { color: var(--color-black); }
+
+  /* Hero trust grid (right column) */
+  .hero-trust-title {
+    font-size: 14px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--color-gray-600);
+    margin-bottom: 20px;
+  }
+  .hero-trust-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  .hero-trust-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 20px 24px;
+    background: var(--color-white);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-lg);
+    transition: all 0.3s var(--ease-out-expo);
+  }
+  .hero-trust-card:hover {
+    border-color: var(--color-primary);
+    transform: translateX(4px);
+  }
+  .hero-trust-num {
+    font-family: var(--font-display);
+    font-size: 24px;
+    font-weight: 900;
+    color: var(--color-primary);
+    line-height: 1;
+    flex-shrink: 0;
+  }
+  .hero-trust-name {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 800;
+    color: var(--color-black);
+    margin-bottom: 4px;
+  }
+  .hero-trust-desc {
+    font-size: 14px;
+    color: var(--color-gray-600);
+    line-height: 1.5;
+  }
+
+  /* Service bullets inside bento tiles */
+  .service-bullets {
+    list-style: none;
+    padding: 0;
+    margin-top: 8px;
+  }
+  .service-bullets li {
+    position: relative;
+    padding-left: 20px;
+    font-size: 15px;
+    line-height: 1.6;
+    margin-bottom: 10px;
+    color: inherit;
+  }
+  .service-bullets li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: currentColor;
+    font-weight: 800;
+    opacity: 0.7;
+  }
+
+  /* Tile CTA link (used in real portfolio tiles) */
+  .tile-cta-link {
+    display: inline-block;
+    margin-top: 16px;
+    padding: 8px 16px;
+    background: var(--color-black);
+    color: var(--color-white);
+    border-radius: var(--radius-full);
+    font-size: 14px;
+    font-weight: 700;
+    text-decoration: none;
+    transition: all 0.2s var(--ease-out-expo);
+  }
+  .tile-cta-link:hover {
+    background: var(--color-primary);
+    color: var(--color-black);
+    transform: translateX(4px);
+  }
+
+  /* Tile body detail (highlighted text in portfolio tile) */
+  .tile-body-detail {
+    font-size: 15px;
+    line-height: 1.6;
+    color: var(--color-gray-700);
+    margin: 8px 0;
+  }
+
   /* CTA */
   .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
   .cta-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: var(--color-black); margin-bottom: 16px; }