feat: replace all emojis with professional lucide-style SVG icon library

Build a curated 50-icon lucide library (Icon.astro + icon-paths.ts) and
replace every emoji across the site (~50 occurrences in 9 files):
- index.astro: 3 problem cards (message, trendingDown, globe)
- about.astro: 4 value cards (target, users, clock, shield)
- portfolio.astro: 7 industry filter buttons (factory, package, scale,
  graduationCap, trendingUp, pen, shoppingCart, layers)
- services/[slug].astro: ~25 feature/target/service icons
- services/index.astro: 6 decision-row tags + phone icon in CTA
- faq.astro: 5 category icons, 3 channel cards
- contact.astro: 3 channel picker, 5 info column, form options data-driven,
  checkCircle success
- Footer.astro: 3 contact icons (phone, mail, mapPin)
- Hero.astro: award icon in trust strip

Add icon wrapper styles to global.css (.problem-icon, .value-icon,
.channel-pick-icon, .info-icon, .channel-icon, .category-icon,
.feature-icon, .target-icon, .success-icon, .contact-icon, .btn-icon,
.filter-icon) — yellow square/circle backgrounds, dark text, consistent
sizing.

Build: 18 pages, 0 errors

src/pages/services/index.astro

@@ -3,10 +3,21 @@ import Base from '../../layouts/Base.astro';
 import Navigation from '../../components/Navigation.astro';
 import Footer from '../../components/Footer.astro';
 import PageHero from '../../components/PageHero.astro';
+import Icon from '../../components/Icon.astro';
 import { getCollection } from 'astro:content';
 
 const services = await getCollection('services');
 
+// Decision-table icon lookup
+const serviceIcons: Record<string, string> = {
+  'webdev': 'globe',
+  'automation': 'cog',
+  'marketing': 'megaphone',
+  'seo': 'search',
+  'consult': 'server',
+  'audit': 'refresh',
+};
+
 // Map service slugs to images
 const serviceImages: Record<string, string> = {
   'automation': '/images/services/automation.jpg',
@@ -41,32 +52,32 @@ const serviceImages: Record<string, string> = {
         </div>
         <div class="decision-row">
           <div>ยังไม่มีเว็บไซต์ หรือเว็บเก่าโหลดช้า</div>
-          <div><span class="dec-tag">🌐 AI-Enhanced Website</span></div>
+          <div><span class="dec-tag"><Icon name="globe" size={14} class="dec-icon" />AI-Enhanced Website</span></div>
           <div>2–4 สัปดาห์</div>
         </div>
         <div class="decision-row">
           <div>ทีมเซลล์ตอบแชตไม่ทัน ลูกค้าหายตอนกลางคืน</div>
-          <div><span class="dec-tag">⚙️ AI Automation</span></div>
+          <div><span class="dec-tag"><Icon name="cog" size={14} class="dec-icon" />AI Automation</span></div>
           <div>1–3 เดือน</div>
         </div>
         <div class="decision-row">
           <div>ลงโฆษณาเยอะ แต่ยอดขายไม่โต</div>
-          <div><span class="dec-tag">📈 Online Marketing Automation</span></div>
+          <div><span class="dec-tag"><Icon name="megaphone" size={14} class="dec-icon" />Online Marketing Automation</span></div>
           <div>1–3 เดือน</div>
         </div>
         <div class="decision-row">
           <div>อยากติดหน้าแรก Google แต่ไม่รู้จะเริ่มยังไง</div>
-          <div><span class="dec-tag">🔍 SEO + AI Content</span></div>
+          <div><span class="dec-tag"><Icon name="search" size={14} class="dec-icon" />SEO + AI Content</span></div>
           <div>3–6 เดือน</div>
         </div>
         <div class="decision-row">
           <div>ไม่อยากจ้างทีม IT ประจำ แต่อยากมี Server/ระบบหลังบ้าน</div>
-          <div><span class="dec-tag">🖥️ Tech Consult</span></div>
+          <div><span class="dec-tag"><Icon name="server" size={14} class="dec-icon" />Tech Consult</span></div>
           <div>2–6 สัปดาห์</div>
         </div>
         <div class="decision-row">
           <div>มีเว็บอยู่แล้ว แต่ขายไม่ได้</div>
-          <div><span class="dec-tag">🔄 เริ่มจาก Audit ฟรี 30 นาที</span></div>
+          <div><span class="dec-tag"><Icon name="refresh" size={14} class="dec-icon" />เริ่มจาก Audit ฟรี 30 นาที</span></div>
           <div>1 สัปดาห์</div>
         </div>
       </div>
@@ -80,12 +91,12 @@ const serviceImages: Record<string, string> = {
   <!-- Service Grid -->
   <section class="section services-grid-section">
     <div class="container">
-      <div class="section-header">
+      <div class="section-header reveal">
         <span class="section-badge">บริการทั้งหมด</span>
         <h2 class="section-title">เลือกตาม <span class="highlight">เป้าหมาย</span> ของคุณ</h2>
       </div>
 
-      <div class="services-cards">
+      <div class="services-cards stagger-children">
         {services.map(s => (
           <a href={`/services/${s.id}`} class="service-block">
             <span class="service-tag">{s.data.badge}</span>
@@ -105,12 +116,12 @@ const serviceImages: Record<string, string> = {
   <!-- Pricing tiers -->
   <section class="section pricing-section">
     <div class="container">
-      <div class="section-header">
+      <div class="section-header reveal">
         <span class="section-badge">งบประมาณ</span>
         <h2 class="section-title">ไม่ใช่ทุกงบที่จะ<span class="highlight">เหมือนกัน</span></h2>
       </div>
 
-      <div class="pricing-grid">
+      <div class="pricing-grid stagger-children">
         <div class="pricing-card">
           <h3 class="pricing-tier">เริ่มต้น</h3>
           <div class="pricing-range">15,000–35,000 บาท</div>
@@ -133,7 +144,7 @@ const serviceImages: Record<string, string> = {
 
   <section class="section section-yellow cta-section">
     <div class="container">
-      <div class="cta-content">
+      <div class="cta-content reveal">
         <h2 class="cta-title">ยังไม่รู้ว่าจะเริ่มจากตรงไหน?</h2>
         <p class="cta-desc">Audit ฟรี 30 นาที — เราจะถาม 5 คำถาม แล้วบอกว่าคุณควรลงทุนกับอะไรก่อน ไม่มี upsell ไม่มี commitment</p>
         <div class="cta-actions">
@@ -204,7 +215,9 @@ const serviceImages: Record<string, string> = {
     letter-spacing: 1px;
   }
   .dec-tag {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     padding: 4px 10px;
     background: var(--color-primary);
     color: var(--color-black);
@@ -212,6 +225,7 @@ const serviceImages: Record<string, string> = {
     font-size: 13px;
     font-weight: 700;
   }
+  .dec-icon { flex-shrink: 0; }
   .decision-closing {
     text-align: center;
     margin-top: 32px;