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/index.astro

@@ -2,6 +2,7 @@
 import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
+import Icon from '../components/Icon.astro';
 import Hero from '../components/Hero.astro';
 import { getCollection } from 'astro:content';
 import { render } from 'astro:content';
@@ -34,71 +35,77 @@ const serviceImages: Record<string, string> = {
     subtitle={home?.data.subtitle}
   />
 
-  <!-- STATS SECTION — yellow band -->
-  <section class="section section-stats">
+  <!-- STATS SECTION — yellow band (counters animate on view) -->
+  <section class="section section-stats reveal">
     <div class="container">
       <div class="stats-grid">
         <div class="stat-item">
-          <span class="stat-number">50+</span>
+          <span class="stat-number counter" data-from="0">50+</span>
           <span class="stat-label">โปรเจกต์สำเร็จ</span>
         </div>
         <div class="stat-item">
-          <span class="stat-number">40+</span>
+          <span class="stat-number counter" data-from="0">40+</span>
           <span class="stat-label">ลูกค้าที่ไว้วางใจ</span>
         </div>
         <div class="stat-item">
-          <span class="stat-number">5+</span>
+          <span class="stat-number counter" data-from="0">5+</span>
           <span class="stat-label">ปีประสบการณ์</span>
         </div>
         <div class="stat-item">
-          <span class="stat-number">24/7</span>
+          <span class="stat-number counter" data-from="0">24/7</span>
           <span class="stat-label">ให้บริการ</span>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- PROBLEM SECTION — light, 3 cards -->
+  <!-- PROBLEM SECTION — light, 3 cards (stagger-children) -->
   <section class="section section-soft">
     <div class="container">
-      <div class="section-header">
+      <div class="section-header reveal">
         <span class="section-badge">ปัญหาที่ SME ไทยเจอซ้ำทุกวัน</span>
         <h2 class="section-title">
           คุณกำลังเจอ <span class="highlight">แบบนี้อยู่</span> ใช่ไหม?
         </h2>
       </div>
 
-      <div class="problem-grid">
+      <div class="problem-grid stagger-children">
         <div class="problem-card">
-          <div class="problem-icon">😩</div>
+          <div class="problem-icon">
+            <Icon name="message" />
+          </div>
           <h3 class="problem-title">ลูกค้าทัก LINE เข้ามา แต่ตอบไม่ทัน</h3>
           <p class="problem-desc">ทีมเซลล์ 1–2 คน ตอบแชตไม่ไหว ลูกค้ารอ 5 นาทีแล้วไปซื้อที่อื่น</p>
           <span class="problem-result">→ ยอดหายก่อนที่คุณจะเห็น</span>
         </div>
         <div class="problem-card">
-          <div class="problem-icon">📉</div>
+          <div class="problem-icon">
+            <Icon name="trendingDown" />
+          </div>
           <h3 class="problem-title">ลงโฆษณา แต่ยอดขายไม่ขยับ</h3>
           <p class="problem-desc">ไม่มีระบบ Lead ไม่มี Funnel ไม่รู้ว่าใครซื้อ ใครแค่ทักมาถามเล่น</p>
           <span class="problem-result">→ เงินหายไปกับคลิกที่ไม่มีคุณภาพ</span>
         </div>
         <div class="problem-card">
-          <div class="problem-icon">🌐</div>
+          <div class="problem-icon">
+            <Icon name="globe" />
+          </div>
           <h3 class="problem-title">เว็บไซต์มีอยู่ แต่ไม่มีใครเจอใน Google</h3>
           <p class="problem-desc">อันดับหน้า 5 ไม่มีใครเปิด ขณะที่คู่แข่งติดหน้าแรกจาก SEO อย่างเดียว</p>
           <span class="problem-result">→ เสียเงินฟรีทุกเดือน</span>
         </div>
       </div>
 
-      <p class="problem-closing">
+      <p class="problem-closing reveal">
         <span class="highlight">ทุกปัญหาข้างต้นแก้ได้ด้วยระบบเดียว</span> — ดูว่าเราทำยังไง
       </p>
     </div>
   </section>
 
-  <!-- SERVICES SECTION — 4 mega cards on white -->
+  <!-- SERVICES SECTION — 4 mega cards on white (stagger-children) -->
   <section class="section services-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">โซลูชัน AI สำหรับธุรกิจไทย</span>
@@ -106,7 +113,7 @@ const serviceImages: Record<string, string> = {
         <p class="section-desc">เลือกแค่ที่คุณต้องการ หรือให้เราวางแผนทั้งระบบให้ก็ได้</p>
       </div>
 
-      <div class="services-mega-grid">
+      <div class="services-mega-grid stagger-children">
         {allServices.map(s => (
           <a href={`/services/${s.id}`} class="mega-card">
             <span class="mega-tag">{s.data.badge}</span>
@@ -128,7 +135,7 @@ const serviceImages: Record<string, string> = {
   </section>
 
   <!-- PULL QUOTE — black section, oversized white text -->
-  <section class="section section-dark-quote">
+  <section class="section section-dark-quote reveal">
     <div class="container">
       <blockquote class="pull-quote">
         <p class="quote-text">
@@ -142,7 +149,7 @@ const serviceImages: Record<string, string> = {
   <!-- PORTFOLIO PREVIEW — 3 latest on soft -->
   <section class="section section-soft">
     <div class="container">
-      <div class="section-header">
+      <div class="section-header reveal">
         <span class="section-badge">ผลงานจริง · ไม่ใช่ Mockup</span>
         <h2 class="section-title">
           ลูกค้าจริง <span class="highlight">ผลลัพธ์จริง</span>
@@ -150,9 +157,9 @@ const serviceImages: Record<string, string> = {
         <p class="section-desc">9 โปรเจกต์ที่เราภาคภูมิใจ — ตั้งแต่ร้านค้าออนไลน์ ไปจนถึงโรงงานฉีดพลาสติก</p>
       </div>
 
-      <div class="blog-editorial">
+      <div class="blog-editorial reveal">
         {sortedPosts[0] && (
-          <a href={`/blog/${sortedPosts[0].slug}`} class="blog-featured">
+          <a href={`/blog/${sortedPosts[0].id}`} class="blog-featured">
             <div class="blog-image">
               <img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="lazy" />
               <span class="blog-badge">บทความล่าสุด</span>
@@ -168,7 +175,7 @@ const serviceImages: Record<string, string> = {
 
         <div class="blog-sidebar">
           {sortedPosts.slice(1, 4).map((post) => (
-            <a href={`/blog/${post.slug}`} class="blog-card-mini">
+            <a href={`/blog/${post.id}`} class="blog-card-mini">
               <div class="blog-card-image">
                 <img src={post.data.image} alt={post.data.title} loading="lazy" />
               </div>
@@ -193,7 +200,7 @@ const serviceImages: Record<string, string> = {
   <!-- FINAL CTA — yellow section -->
   <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">ปรึกษาฟรี 30 นาที — เราจะถามคำถาม 5 ข้อ แล้วบอกคุณได้เลยว่าควรเริ่มจากตรงไหน</p>
         <div class="cta-actions">
@@ -318,7 +325,7 @@ const serviceImages: Record<string, string> = {
     box-shadow: var(--shadow-md);
     border-color: var(--color-primary);
   }
-  .problem-icon { font-size: 48px; margin-bottom: 16px; }
+  .problem-icon { margin-bottom: 16px; }
   .problem-title {
     font-family: var(--font-display);
     font-size: 20px;