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

@@ -4,9 +4,23 @@ import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
 import PageHero from '../components/PageHero.astro';
 import PortfolioCard from '../components/PortfolioCard.astro';
+import Icon from '../components/Icon.astro';
 import { getCollection } from 'astro:content';
 
 const portfolio = await getCollection('portfolio');
+
+// Industry filter metadata: id -> { label, icon }
+// Icons are lucide-style SVGs; emoji-free.
+const industryFilters = [
+  { id: 'all', label: 'ทั้งหมด', icon: 'layers' },
+  { id: '🏭 โรงงาน', label: 'โรงงาน', icon: 'factory' },
+  { id: '💊 สินค้าอุปโภค', label: 'สินค้าอุปโภค', icon: 'package' },
+  { id: '⚖️ สำนักงานกฎหมาย', label: 'สำนักงานกฎหมาย', icon: 'scale' },
+  { id: '📚 สถาบัน / การศึกษา', label: 'สถาบัน / การศึกษา', icon: 'graduationCap' },
+  { id: '📈 ที่ปรึกษาธุรกิจ', label: 'ที่ปรึกษาธุรกิจ', icon: 'trendingUp' },
+  { id: '🎨 Digital Agency', label: 'Digital Agency', icon: 'pen' },
+  { id: '🛒 E-commerce', label: 'E-commerce', icon: 'shoppingCart' },
+];
 ---
 
 <Base title="ผลงาน | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
@@ -22,21 +36,24 @@ const portfolio = await getCollection('portfolio');
   <section class="filter-section">
     <div class="container">
       <div class="filter-bar">
-        <button class="filter-btn active" data-filter="all">ทั้งหมด ({portfolio.length})</button>
-        <button class="filter-btn" data-filter="🏭 โรงงาน">🏭 โรงงาน</button>
-        <button class="filter-btn" data-filter="💊 สินค้าอุปโภค">💊 สินค้าอุปโภค</button>
-        <button class="filter-btn" data-filter="⚖️ สำนักงานกฎหมาย">⚖️ สำนักงานกฎหมาย</button>
-        <button class="filter-btn" data-filter="📚 สถาบัน / การศึกษา">📚 สถาบัน / การศึกษา</button>
-        <button class="filter-btn" data-filter="📈 ที่ปรึกษาธุรกิจ">📈 ที่ปรึกษาธุรกิจ</button>
-        <button class="filter-btn" data-filter="🎨 Digital Agency">🎨 Digital Agency</button>
-        <button class="filter-btn" data-filter="🛒 E-commerce">🛒 E-commerce</button>
+        {industryFilters.map(f => (
+          <button
+            class="filter-btn"
+            class:list={[{ active: f.id === 'all' }]}
+            data-filter={f.id}
+          >
+            {f.id !== 'all' && <Icon name={f.icon as any} size={16} class="filter-icon" />}
+            {f.id === 'all' && <Icon name={f.icon as any} size={16} class="filter-icon" />}
+            <span>{f.id === 'all' ? `ทั้งหมด (${portfolio.length})` : f.label}</span>
+          </button>
+        ))}
       </div>
     </div>
   </section>
 
   <section class="section portfolio-section">
     <div class="container">
-      <div class="portfolio-grid">
+      <div class="portfolio-grid stagger-children">
         {portfolio.map(item => (
           <PortfolioCard
             name={item.data.name}
@@ -57,14 +74,14 @@ const portfolio = await getCollection('portfolio');
   <!-- "ดีลที่เราเลือก" Section -->
   <section class="section section-soft">
     <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="reasons-grid">
+      <div class="reasons-grid stagger-children">
         <div class="reason-card">
           <div class="reason-num">1</div>
           <h3 class="reason-title">ธุรกิจที่พร้อมจริง ๆ</h3>
@@ -86,7 +103,7 @@ const portfolio = await getCollection('portfolio');
 
   <section class="section section-yellow cta-section">
     <div class="container">
-      <div class="cta-content">
+      <div class="cta-content reveal">
         <h2 class="cta-title">อยากเป็น <span class="highlight">ผลงานชิ้นต่อไป</span> ของเรา?</h2>
         <p class="cta-desc">ถ้าธุรกิจคุณพร้อม เราพร้อม — คุยกันก่อน 30 นาที แล้วตัดสินใจเอง</p>
         <div class="cta-actions">
@@ -139,16 +156,19 @@ const portfolio = await getCollection('portfolio');
     padding: 4px 0;
   }
   .filter-btn {
-    flex-shrink: 0;
-    padding: 8px 16px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
     background: var(--color-white);
-    color: var(--color-gray-700);
+    color: var(--color-black);
     border: 1px solid var(--color-gray-200);
     border-radius: var(--radius-full);
-    font-size: 13px;
+    font-family: var(--font-display);
+    font-size: 14px;
     font-weight: 600;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.2s var(--ease-out-expo);
     white-space: nowrap;
   }
   .filter-btn:hover {
@@ -160,6 +180,7 @@ const portfolio = await getCollection('portfolio');
     color: var(--color-black);
     border-color: var(--color-primary);
   }
+  .filter-icon { color: currentColor; }
 
   .portfolio-section { background: var(--color-white); }
   .section-soft { background: var(--color-bg-alt); }