From 0f79808a430321583b05629a0aec543c6ef4eb75 Mon Sep 17 00:00:00 2001
From: Macky <macky@hermes.local>
Date: Thu, 4 Jun 2026 09:20:43 +0700
Subject: [PATCH] feat: replace all emojis with professional lucide-style SVG
 icon library
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/components/Footer.astro    |   8 +-
 src/components/Icon.astro      |  62 +++++
 src/components/icon-paths.ts   |  88 +++++++
 src/lib/animations.ts          | 419 +++++++++++++++++++++++++++++++++
 src/pages/about.astro          |  37 +--
 src/pages/blog/[slug].astro    |   2 +-
 src/pages/blog/index.astro     |   6 +-
 src/pages/contact.astro        |  72 ++++--
 src/pages/faq.astro            |  39 ++-
 src/pages/index.astro          |  53 +++--
 src/pages/portfolio.astro      |  55 +++--
 src/pages/services/index.astro |  38 ++-
 12 files changed, 770 insertions(+), 109 deletions(-)
 create mode 100644 src/components/Icon.astro
 create mode 100644 src/components/icon-paths.ts
 create mode 100644 src/lib/animations.ts

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index d571f11..c2de8d4 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -3,6 +3,7 @@
  * MOREMINIMORE - FOOTER COMPONENT (LIGHT THEME)
  * White bg + dark text + black-text logo (matches new light theme)
  */
+import Icon from './Icon.astro';
 
 const currentYear = new Date().getFullYear();
 
@@ -20,6 +21,7 @@ const serviceLinks = [
   { label: 'AI Automation', href: '/services/automation' },
   { label: 'Tech Consult', href: '/services/ai-consult' },
 ];
+
 ---
 
 <footer class="footer">
@@ -85,15 +87,15 @@ const serviceLinks = [
       <div class="footer-col footer-contact">
         <h4 class="footer-title">ติดต่อเรา</h4>
         <div class="contact-item">
-          <span class="contact-icon">📞</span>
+          <span class="contact-icon"><Icon name="phone" size={14} /></span>
           <a href="tel:0809955945">080-995-5945</a>
         </div>
         <div class="contact-item">
-          <span class="contact-icon">✉️</span>
+          <span class="contact-icon"><Icon name="mail" size={14} /></span>
           <a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
         </div>
         <div class="contact-item">
-          <span class="contact-icon">📍</span>
+          <span class="contact-icon"><Icon name="mapPin" size={14} /></span>
           <span>สมุทรสาคร, ประเทศไทย</span>
         </div>
 
diff --git a/src/components/Icon.astro b/src/components/Icon.astro
new file mode 100644
index 0000000..58770d5
--- /dev/null
+++ b/src/components/Icon.astro
@@ -0,0 +1,62 @@
+---
+/**
+ * MOREMINIMORE - ICON COMPONENT
+ * Lucide-style line icons. Use:
+ *   <Icon name="phone" size={24} />
+ *   <Icon name="message" color="yellow" size={32} />
+ *
+ * Icon catalog: ../icon-paths.ts
+ * Add new icons by appending to ICON_PATHS in that file.
+ */
+
+import { ICON_PATHS, type IconName } from './icon-paths';
+
+interface Props {
+  name: IconName;
+  size?: number;
+  class?: string;
+  /** Brand tint: 'default' = currentColor, 'yellow' = brand yellow, 'dark' = black */
+  color?: 'default' | 'yellow' | 'dark';
+  strokeWidth?: number;
+}
+
+const {
+  name,
+  size = 24,
+  class: className = '',
+  color = 'default',
+  strokeWidth = 2,
+} = Astro.props;
+
+const colorMap = {
+  default: 'currentColor',
+  yellow: 'var(--color-primary)',
+  dark: 'var(--color-black)',
+};
+
+const paths = ICON_PATHS[name];
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke={colorMap[color]}
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={`icon icon-${name} ${className}`}
+  aria-hidden="true"
+>
+  <Fragment set:html={paths} />
+</svg>
+
+<style>
+  .icon {
+    display: inline-block;
+    flex-shrink: 0;
+    vertical-align: middle;
+  }
+</style>
diff --git a/src/components/icon-paths.ts b/src/components/icon-paths.ts
new file mode 100644
index 0000000..cfa7b61
--- /dev/null
+++ b/src/components/icon-paths.ts
@@ -0,0 +1,88 @@
+/**
+ * Lucide-style SVG icon paths for MoreminiMore.
+ * All paths use a 24x24 viewBox, stroke-width 2, rounded caps/joins.
+ * Source: adapted from lucide.dev (ISC licensed).
+ *
+ * Naming convention: semantic over visual (e.g. "message" not "speech-bubble").
+ * Add new icons by appending to ICON_PATHS.
+ */
+
+export const ICON_PATHS = {
+  // ===== Communication =====
+  message: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
+  phone: '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>',
+  mail: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/>',
+  mapPin: '<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>',
+  clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+  send: '<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',
+  smartphone: '<rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/>',
+  clipboard: '<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>',
+  wrench: '<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>',
+  megaphone: '<path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>',
+
+  // ===== Trust & success =====
+  check: '<polyline points="20 6 9 17 4 12"/>',
+  checkCircle: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
+  star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
+  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
+  award: '<circle cx="12" cy="8" r="6"/><polyline points="8.21 13.89 7 22 12 19 17 22 15.79 13.88"/>',
+
+  // ===== Problems / issues =====
+  alertTriangle: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
+  trendingDown: '<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/>',
+  trendingUp: '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
+  globe: '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>',
+  search: '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
+  eye: '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>',
+  help: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
+
+  // ===== Business =====
+  briefcase: '<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>',
+  building: '<rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01"/><path d="M16 6h.01"/><path d="M12 6h.01"/><path d="M12 10h.01"/><path d="M12 14h.01"/><path d="M16 10h.01"/><path d="M16 14h.01"/><path d="M8 10h.01"/><path d="M8 14h.01"/>',
+  factory: '<path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M17 18h1"/><path d="M12 18h1"/><path d="M7 18h1"/>',
+  store: '<path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"/>',
+  shoppingCart: '<circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>',
+
+  // ===== Services =====
+  cog: '<path d="M12 20a1 1 0 0 0 .553-1.832l-1.215-.811a1 1 0 0 1 0-1.714l1.215-.811A1 1 0 0 0 12 13a8 8 0 1 1 0 6"/><circle cx="12" cy="12" r="3"/>',
+  layers: '<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>',
+  link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
+  server: '<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>',
+  monitor: '<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>',
+  box: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>',
+
+  // ===== Money / pricing =====
+  dollarSign: '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
+  creditCard: '<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/>',
+  package: '<line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>',
+
+  // ===== Marketing / data =====
+  megaphone: '<path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>',
+  barChart: '<line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>',
+  pieChart: '<path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/>',
+  users: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  user: '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
+  target: '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
+  zap: '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
+
+  // ===== Legal / education =====
+  scale: '<path d="M16 16h6"/><path d="M2 16h6"/><path d="M5 8c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8z"/><path d="M12 6V2"/><path d="m3 9 3 7"/><path d="M21 9l-3 7"/><path d="M12 18v4"/>',
+  book: '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>',
+  graduationCap: '<path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c0 1.1 2.7 3 6 3s6-1.9 6-3v-5"/>',
+  pen: '<path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/>',
+
+  // ===== AI / tech =====
+  bot: '<rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/>',
+  brain: '<path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/>',
+  cpu: '<rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/>',
+  workflow: '<rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><path d="M9 6h6a3 3 0 0 1 3 3v6"/>',
+  bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+
+  // ===== Misc =====
+  refresh: '<polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>',
+  arrowRight: '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
+  sparkles: '<path d="M12 3l1.9 5.8 5.8 1.9-5.8 1.9L12 18.4l-1.9-5.8L4.3 10.7l5.8-1.9L12 3z"/><path d="M19 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z"/>',
+  rocket: '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>',
+} as const;
+
+export type IconName = keyof typeof ICON_PATHS;
diff --git a/src/lib/animations.ts b/src/lib/animations.ts
new file mode 100644
index 0000000..256d48d
--- /dev/null
+++ b/src/lib/animations.ts
@@ -0,0 +1,419 @@
+/**
+ * MoreminiMore - Animation Library
+ * Reusable scroll/load animations. Lightweight, no dependencies.
+ *
+ * Usage in any .astro file:
+ *   <script>import { initAnimations } from '../lib/animations';
+ *   document.addEventListener('DOMContentLoaded', initAnimations);</script>
+ *
+ * Or for per-page targeted init:
+ *   <script>import { revealOnScroll, counterUp } from '../lib/animations';
+ *   revealOnScroll('.reveal');</script>
+ */
+
+/* ------------------------------------------------------------------ */
+/*  TYPES                                                              */
+/* ------------------------------------------------------------------ */
+
+interface RevealOptions {
+  threshold?: number;
+  rootMargin?: string;
+  once?: boolean;
+  delayMs?: number;
+}
+
+interface CounterOptions {
+  duration?: number;
+  easing?: (t: number) => number;
+}
+
+/* ------------------------------------------------------------------ */
+/*  ENTRANCE ANIMATIONS                                                */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Add .reveal class to any element you want to fade-in-up on scroll.
+ * Default: trigger at 15% visibility, slide up 30px, 700ms.
+ */
+export function revealOnScroll(
+  selector: string | string[] = '.reveal',
+  options: RevealOptions = {}
+): void {
+  if (typeof window === 'undefined') return;
+  const els = collectElements(selector);
+  if (els.length === 0) return;
+
+  const opts: Required<RevealOptions> = {
+    threshold: options.threshold ?? 0,
+    rootMargin: options.rootMargin ?? '0px 0px 100px 0px',
+    once: options.once ?? true,
+    delayMs: options.delayMs ?? 0,
+  };
+
+  // SSR-safe fallback: if IntersectionObserver is unavailable, show everything.
+  if (typeof IntersectionObserver === 'undefined') {
+    els.forEach((el) => el.classList.add('revealed'));
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const el = entry.target as HTMLElement;
+          setTimeout(() => el.classList.add('revealed'), opts.delayMs);
+          if (opts.once) observer.unobserve(el);
+        } else if (!opts.once) {
+          entry.target.classList.remove('revealed');
+        }
+      });
+    },
+    { threshold: opts.threshold, rootMargin: opts.rootMargin }
+  );
+
+  const vh = window.innerHeight || document.documentElement.clientHeight;
+  els.forEach((el) => {
+    // FALLBACK: if already in view on load, apply immediately.
+    const r = el.getBoundingClientRect();
+    if (r.top < vh && r.bottom > 0) {
+      setTimeout(() => el.classList.add('revealed'), opts.delayMs);
+      if (opts.once) return; // don't observe
+    }
+    observer.observe(el);
+  });
+}
+
+/**
+ * Stagger-children reveal — children of the matched container fade in sequentially.
+ * Reads --stagger CSS var (in ms) from each child, or uses 100ms default.
+ */
+export function staggerReveal(
+  containerSelector: string,
+  childSelector: string = ':scope > *',
+  baseDelayMs: number = 0
+): void {
+  if (typeof window === 'undefined') return;
+  const containers = collectElements(containerSelector);
+  if (containers.length === 0) return;
+
+  // Helper: apply reveal to one container's children.
+  const apply = (container: HTMLElement) => {
+    const children = container.querySelectorAll<HTMLElement>(childSelector);
+    children.forEach((child, i) => {
+      const stagger = Number(child.dataset.stagger) || i * 100;
+      setTimeout(() => child.classList.add('revealed'), baseDelayMs + stagger);
+    });
+  };
+
+  if (typeof IntersectionObserver === 'undefined') {
+    containers.forEach(apply);
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          apply(entry.target as HTMLElement);
+          observer.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0, rootMargin: '0px 0px 100px 0px' }
+  );
+
+  containers.forEach((c) => {
+    // FALLBACK: if the container is already in view on load, apply immediately.
+    // IO can miss elements that are in viewport at registration time on some browsers.
+    const r = c.getBoundingClientRect();
+    const vh = window.innerHeight || document.documentElement.clientHeight;
+    if (r.top < vh && r.bottom > 0) {
+      apply(c);
+      return; // do not observe — already revealed
+    }
+    observer.observe(c);
+  });
+}
+
+/* ------------------------------------------------------------------ */
+/*  KINETIC TYPOGRAPHY                                                 */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Reveal each word of the matched headline with a staggered translate-up.
+ * Wraps each word in a .word-wrapper if not already, then animates.
+ */
+export function kineticHeadline(selector: string = '.kinetic-title'): void {
+  if (typeof window === 'undefined') return;
+  const headings = collectElements(selector);
+  if (headings.length === 0) return;
+
+  headings.forEach((heading) => {
+    // Skip if already processed
+    if (heading.dataset.kineticReady === 'true') return;
+    heading.dataset.kineticReady = 'true';
+
+    // Skip if text is empty / pure whitespace
+    if (!heading.textContent?.trim()) return;
+
+    const text = heading.textContent;
+    const words = text.split(/(\s+)/); // keep whitespace
+    heading.innerHTML = '';
+
+    let wordIndex = 0;
+    words.forEach((segment) => {
+      if (/^\s+$/.test(segment)) {
+        heading.appendChild(document.createTextNode(segment));
+      } else {
+        const wrapper = document.createElement('span');
+        wrapper.className = 'word-wrapper';
+        const inner = document.createElement('span');
+        inner.className = 'word';
+        inner.textContent = segment;
+        inner.style.setProperty('--delay', `${0.3 + wordIndex * 0.08}s`);
+        wrapper.appendChild(inner);
+        heading.appendChild(wrapper);
+        wordIndex++;
+      }
+    });
+  });
+}
+
+/* ------------------------------------------------------------------ */
+/*  COUNTER ANIMATION                                                  */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Animate any element with a number to count up from 0 (or data-from) to the
+ * number in its text. Triggered when the element scrolls into view.
+ *
+ * Element: <span class="counter" data-from="0" data-suffix="+">50+</span>
+ */
+export function counterUp(
+  selector: string = '.counter',
+  options: CounterOptions = {}
+): void {
+  if (typeof window === 'undefined') return;
+  const els = collectElements(selector);
+  if (els.length === 0) return;
+
+  const duration = options.duration ?? 1600;
+  const ease = options.easing ?? easeOutCubic;
+
+  if (typeof IntersectionObserver === 'undefined') {
+    els.forEach((el) => animateCounter(el as HTMLElement, duration, ease));
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          animateCounter(entry.target as HTMLElement, duration, ease);
+          observer.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0, rootMargin: '0px 0px 100px 0px' }
+  );
+
+  els.forEach((el) => {
+    // FALLBACK: if already in view on load, animate immediately.
+    const r = el.getBoundingClientRect();
+    const vh = window.innerHeight || document.documentElement.clientHeight;
+    if (r.top < vh && r.bottom > 0) {
+      animateCounter(el as HTMLElement, duration, ease);
+      return;
+    }
+    observer.observe(el);
+  });
+}
+
+function animateCounter(
+  el: HTMLElement,
+  duration: number,
+  ease: (t: number) => number
+): void {
+  const raw = el.textContent?.trim() ?? '0';
+  const fromStr = el.dataset.from;
+  const from = fromStr ? parseFloat(fromStr) : 0;
+  // Extract leading number, ignore trailing chars (e.g. "50+", "5+", "5 ปี", "24/7")
+  const match = raw.match(/^([\d,.]+)(.*)$/);
+  if (!match) return;
+  const targetStr = match[1].replace(/,/g, '');
+  const target = parseFloat(targetStr);
+  const suffix = match[2] || '';
+  const prefix = el.dataset.prefix || '';
+  if (Number.isNaN(target)) return;
+
+  const start = performance.now();
+  const tick = (now: number) => {
+    const elapsed = now - start;
+    const progress = Math.min(elapsed / duration, 1);
+    const value = from + (target - from) * ease(progress);
+    // Preserve any decimal formatting from original
+    const decimals = (targetStr.split('.')[1] || '').length;
+    el.textContent = `${prefix}${formatNumber(value, decimals)}${suffix}`;
+    if (progress < 1) requestAnimationFrame(tick);
+  };
+  requestAnimationFrame(tick);
+}
+
+function formatNumber(n: number, decimals: number): string {
+  return n.toFixed(decimals);
+}
+
+function easeOutCubic(t: number): number {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+/* ------------------------------------------------------------------ */
+/*  MAGNETIC BUTTON                                                    */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Subtle hover-tracking effect for CTAs. Btn slightly tracks cursor position.
+ * Add `data-magnetic` attribute to any button.
+ */
+export function magneticButtons(selector: string = '[data-magnetic]'): void {
+  if (typeof window === 'undefined') return;
+  const btns = collectElements(selector);
+  if (btns.length === 0) return;
+
+  btns.forEach((btn) => {
+    if ((btn as HTMLElement).dataset.magneticReady === 'true') return;
+    (btn as HTMLElement).dataset.magneticReady = 'true';
+
+    const strength = 0.25;
+    btn.addEventListener('mousemove', (e: MouseEvent) => {
+      const rect = btn.getBoundingClientRect();
+      const x = e.clientX - rect.left - rect.width / 2;
+      const y = e.clientY - rect.top - rect.height / 2;
+      (btn as HTMLElement).style.transform = `translate(${x * strength}px, ${y * strength}px)`;
+    });
+    btn.addEventListener('mouseleave', () => {
+      (btn as HTMLElement).style.transform = '';
+    });
+  });
+}
+
+/* ------------------------------------------------------------------ */
+/*  PARALLAX BACKGROUND                                                 */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Apply a subtle parallax translateY to elements based on scroll position.
+ * Add `data-parallax="0.3"` (0-1) to set speed (default 0.3).
+ * Uses requestAnimationFrame + transform for 60fps.
+ */
+export function parallaxBackgrounds(selector: string = '[data-parallax]'): void {
+  if (typeof window === 'undefined') return;
+  const els = Array.from(document.querySelectorAll<HTMLElement>(selector));
+  if (els.length === 0) return;
+
+  // Use rAF for smooth 60fps
+  let ticking = false;
+  const update = () => {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => {
+      const scrollY = window.scrollY;
+      els.forEach((el) => {
+        const rect = el.getBoundingClientRect();
+        const speed = parseFloat(el.dataset.parallax || '0.3');
+        // Only update if visible
+        if (rect.bottom > -200 && rect.top < window.innerHeight + 200) {
+          const offset = (rect.top - window.innerHeight) * speed;
+          el.style.transform = `translate3d(0, ${offset}px, 0)`;
+        }
+      });
+      ticking = false;
+    });
+  };
+  window.addEventListener('scroll', update, { passive: true });
+  update(); // initial
+}
+
+/* ------------------------------------------------------------------ */
+/*  PARALLAX SCROLL PROGRESS                                           */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Update CSS var --scroll-progress (0-100) on the document.
+ * Pair with a CSS rule like:
+ *   .scroll-indicator { height: calc(var(--scroll-progress) * 1px); }
+ */
+export function scrollProgress(selector: string = '.scroll-indicator'): void {
+  if (typeof window === 'undefined') return;
+  const els = collectElements(selector);
+  if (els.length === 0) return;
+  const update = () => {
+    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+    const progress = docHeight > 0 ? (window.scrollY / docHeight) * 100 : 0;
+    els.forEach((el) => {
+      el.style.setProperty('--scroll-progress', `${Math.min(progress, 100)}%`);
+    });
+  };
+  window.addEventListener('scroll', update, { passive: true });
+  update();
+}
+
+/* ------------------------------------------------------------------ */
+/*  ENTRY POINT — call from page script                                */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Initialize all animations on the current page. Pass an options object
+ * to opt-out of any animation.
+ */
+export interface AnimationOptions {
+  reveal?: boolean;
+  stagger?: boolean;
+  kinetic?: boolean;
+  counters?: boolean;
+  magnetic?: boolean;
+  parallax?: boolean;
+  scrollProgress?: boolean;
+}
+
+export function initAnimations(
+  options: AnimationOptions = {}
+): void {
+  const opts: Required<AnimationOptions> = {
+    reveal: true,
+    stagger: true,
+    kinetic: true,
+    counters: true,
+    magnetic: true,
+    parallax: true,
+    scrollProgress: true,
+    ...options,
+  };
+
+  // Wait for next tick so the DOM is fully painted
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => initAnimations(options));
+    return;
+  }
+
+  if (opts.reveal) revealOnScroll();
+  if (opts.stagger) staggerReveal('.stagger-children');
+  if (opts.kinetic) kineticHeadline();
+  if (opts.counters) counterUp();
+  if (opts.magnetic) magneticButtons();
+  if (opts.parallax) parallaxBackgrounds();
+  if (opts.scrollProgress) scrollProgress();
+}
+
+/* ------------------------------------------------------------------ */
+/*  HELPERS                                                            */
+/* ------------------------------------------------------------------ */
+
+function collectElements(selector: string | string[]): HTMLElement[] {
+  const sels = Array.isArray(selector) ? selector : [selector];
+  const out: HTMLElement[] = [];
+  sels.forEach((s) => {
+    document.querySelectorAll<HTMLElement>(s).forEach((el) => out.push(el));
+  });
+  return out;
+}
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 4932f92..bf5db9a 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -3,6 +3,7 @@ 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';
 ---
 
 <Base title="เกี่ยวกับเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
@@ -42,21 +43,21 @@ import PageHero from '../components/PageHero.astro';
           </div>
         </div>
 
-        <div class="story-stats">
+        <div class="story-stats stagger-children">
           <div class="stat-card">
-            <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-card">
-            <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-card">
-            <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-card">
-            <span class="stat-number">100%</span>
+            <span class="stat-number counter" data-from="0">100%</span>
             <span class="stat-label">โค้ดโดยทีมเรา ไม่ Outsource</span>
           </div>
         </div>
@@ -67,31 +68,39 @@ import PageHero from '../components/PageHero.astro';
   <!-- VALUES SECTION (yellow accent cards on soft) -->
   <section class="section section-soft values-section">
     <div class="container">
-      <div class="section-header">
+      <div class="section-header reveal">
         <span class="section-badge">ค่านิยมของเรา</span>
         <h2 class="section-title">
           4 สิ่งที่เรา <span class="highlight">ไม่เคยเปลี่ยน</span>
         </h2>
       </div>
 
-      <div class="values-grid">
+      <div class="values-grid stagger-children">
         <div class="value-card">
-          <div class="value-icon">🎯</div>
+          <div class="value-icon">
+            <Icon name="target" />
+          </div>
           <h3 class="value-title">เข้าใจธุรกิจก่อนเขียนโค้ด</h3>
           <p class="value-desc">30 นาทีแรกของทุกโปรเจกต์คือการถาม ไม่ใช่การ present เราถามจนเข้าใจว่าคุณขายให้ใคร กำไรเท่าไหร่ ปวดหัวตรงไหน แล้วค่อยแนะนำ solution</p>
         </div>
         <div class="value-card">
-          <div class="value-icon">🤝</div>
+          <div class="value-icon">
+            <Icon name="users" />
+          </div>
           <h3 class="value-title">เป็น Partner ไม่ใช่ Vendor</h3>
           <p class="value-desc">เราแชร์ progress ทุกสัปดาห์ผ่าน LINE Group เดียวกับที่ลูกค้าใช้ คุณเห็นทุก decision ไม่มี hidden cost ไม่มี "อันนี้เพิ่มเงินนะ" ตอนใกล้ deliver</p>
         </div>
         <div class="value-card">
-          <div class="value-icon">⏱️</div>
+          <div class="value-icon">
+            <Icon name="clock" />
+          </div>
           <h3 class="value-title">Deliver ตรงเวลา หรือบอกล่วงหน้า</h3>
           <p class="value-desc">เราไม่สัญญา deadline แบบเลื่อนได้ ถ้าจะติด เราจะบอกก่อน 7 วัน ไม่ใช่บอกตอนส่งงาน เคสไหนที่เคยส่งช้า เราคืนเงิน Pro-rata</p>
         </div>
         <div class="value-card">
-          <div class="value-icon">💚</div>
+          <div class="value-icon">
+            <Icon name="shield" />
+          </div>
           <h3 class="value-title">ดูแลหลังส่งมอบ</h3>
           <p class="value-desc">เว็บไซต์ที่ส่งแล้วทิ้งเป็นเว็บตาย เราเลยมีแพ็คเกจดูแลรายเดือนเริ่ม 2,000 บาท รวมอัปเดตเนื้อหา ปรับ SEO แก้บั๊ก ตอบคำถามผ่าน LINE</p>
         </div>
@@ -102,7 +111,7 @@ import PageHero from '../components/PageHero.astro';
   <!-- PROCESS SECTION (4 steps, white) -->
   <section class="section process-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>
@@ -110,7 +119,7 @@ import PageHero from '../components/PageHero.astro';
         <p class="section-desc">4 ขั้น โปร่งใสทุกข้อ</p>
       </div>
 
-      <div class="process-grid">
+      <div class="process-grid stagger-children">
         <div class="process-step">
           <span class="step-num">01</span>
           <h3 class="step-title">ปรึกษาฟรี</h3>
@@ -138,7 +147,7 @@ import PageHero from '../components/PageHero.astro';
   <!-- FINAL CTA (yellow) -->
   <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 นาที ไม่มี script sales ไม่มี upsell จะบอกตรง ๆ ว่าทำได้หรือไม่ควรทำ</p>
         <div class="cta-actions">
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index 451d001..21c81d2 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -54,7 +54,7 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
 
   <section class="section article-section">
     <div class="container">
-      <div class="article-grid">
+      <div class="article-grid reveal">
         <article class="article-content">
           <div class="article-body">
             <Content />
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 36c8365..6ca8579 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -21,7 +21,7 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
   {sortedPosts.length > 0 && (
     <section class="featured-section section-soft">
       <div class="container">
-        <a href={`/blog/${sortedPosts[0].slug}`} class="featured-card">
+        <a href={`/blog/${sortedPosts[0].id}`} class="featured-card">
           <div class="featured-image">
             {sortedPosts[0].data.image && (
               <img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="eager" />
@@ -53,7 +53,7 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
 
       <div class="blog-grid">
         {sortedPosts.slice(1).map((post, i) => (
-          <a href={`/blog/${post.slug}`} class="blog-card" style={`--delay: ${i * 0.1}s`}>
+          <a href={`/blog/${post.id}`} class="blog-card" style={`--delay: ${i * 0.1}s`}>
             <div class="blog-image">
               {post.data.image && (
                 <img src={post.data.image} alt={post.data.title} loading="lazy" />
@@ -75,7 +75,7 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
 
   <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">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และให้คำแนะนำ</p>
         <div class="cta-actions">
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index f64652a..dcf03f8 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -3,6 +3,18 @@ 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';
+
+// Service options for the form — with lucide icon names
+const serviceOptions = [
+  { value: 'webdev', label: 'AI-Enhanced Website (เว็บ + Chatbot + SEO)', icon: 'globe' },
+  { value: 'automation', label: 'AI Automation (Workflow + Chatbot)', icon: 'cog' },
+  { value: 'marketing', label: 'Online Marketing Automation (Email + LINE + Facebook)', icon: 'megaphone' },
+  { value: 'seo', label: 'SEO + AI Content System', icon: 'search' },
+  { value: 'consult', label: 'Tech Consult (Server / Data Pipeline)', icon: 'server' },
+  { value: 'audit', label: 'Audit เว็บไซต์เดิมฟรี 30 นาที', icon: 'briefcase' },
+  { value: 'unsure', label: 'ยังไม่แน่ใจ — ช่วยแนะนำ', icon: 'help' },
+];
 ---
 
 <Base title="ติดต่อเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
@@ -17,23 +29,29 @@ import PageHero from '../components/PageHero.astro';
   <!-- Quick Channel Picker -->
   <section class="section channels-pick-section">
     <div class="container">
-      <div class="channels-pick-grid">
+      <div class="channels-pick-grid stagger-children">
         <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="channel-pick-card">
-          <div class="channel-pick-icon">💬</div>
+          <div class="channel-pick-icon">
+            <Icon name="message" size={32} />
+          </div>
           <h3 class="channel-pick-name">LINE Official</h3>
           <p class="channel-pick-best">คนที่อยากคุยเร็ว ๆ แบบเป็นกันเอง</p>
           <p class="channel-pick-time">ตอบใน 30 นาที (เวลาทำการ)</p>
           <span class="channel-pick-cta">ทักเลย →</span>
         </a>
         <a href="tel:0809955945" class="channel-pick-card">
-          <div class="channel-pick-icon">📞</div>
+          <div class="channel-pick-icon">
+            <Icon name="phone" size={32} />
+          </div>
           <h3 class="channel-pick-name">โทรศัพท์</h3>
           <p class="channel-pick-best">คนที่อยากคุยยาว ๆ 5–10 นาที ถามตอบสด</p>
           <p class="channel-pick-time">รับสายทันที หรือโทรกลับภายใน 2 ชม.</p>
           <span class="channel-pick-cta">080-995-5945</span>
         </a>
         <a href="mailto:contact@moreminimore.com" class="channel-pick-card">
-          <div class="channel-pick-icon">📧</div>
+          <div class="channel-pick-icon">
+            <Icon name="mail" size={32} />
+          </div>
           <h3 class="channel-pick-name">Email</h3>
           <p class="channel-pick-best">คนที่อยากส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
           <p class="channel-pick-time">ตอบภายใน 1 วันทำการ</p>
@@ -46,13 +64,15 @@ import PageHero from '../components/PageHero.astro';
   <!-- Contact Form Section -->
   <section class="section form-section">
     <div class="container">
-      <div class="form-grid">
+      <div class="form-grid reveal">
         <!-- Info column -->
         <div class="info-column">
           <h2 class="info-title">ข้อมูลติดต่อ</h2>
 
           <div class="info-item">
-            <div class="info-icon">📞</div>
+            <div class="info-icon">
+              <Icon name="phone" size={22} />
+            </div>
             <div>
               <h3>โทรศัพท์</h3>
               <a href="tel:0809955945">080-995-5945</a>
@@ -60,7 +80,9 @@ import PageHero from '../components/PageHero.astro';
             </div>
           </div>
           <div class="info-item">
-            <div class="info-icon">✉️</div>
+            <div class="info-icon">
+              <Icon name="mail" size={22} />
+            </div>
             <div>
               <h3>อีเมล</h3>
               <a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
@@ -68,7 +90,9 @@ import PageHero from '../components/PageHero.astro';
             </div>
           </div>
           <div class="info-item">
-            <div class="info-icon">💬</div>
+            <div class="info-icon">
+              <Icon name="message" size={22} />
+            </div>
             <div>
               <h3>LINE</h3>
               <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener">@moreminimore</a>
@@ -76,7 +100,9 @@ import PageHero from '../components/PageHero.astro';
             </div>
           </div>
           <div class="info-item">
-            <div class="info-icon">📍</div>
+            <div class="info-icon">
+              <Icon name="mapPin" size={22} />
+            </div>
             <div>
               <h3>ออฟฟิศ</h3>
               <p>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
@@ -84,7 +110,9 @@ import PageHero from '../components/PageHero.astro';
             </div>
           </div>
           <div class="info-item">
-            <div class="info-icon">🕐</div>
+            <div class="info-icon">
+              <Icon name="clock" size={22} />
+            </div>
             <div>
               <h3>เวลาทำการ</h3>
               <p>จันทร์ - ศุกร์ 09:00 - 18:00 น.</p>
@@ -133,13 +161,9 @@ import PageHero from '../components/PageHero.astro';
               <label for="service" class="form-label">บริการที่สนใจ</label>
               <select id="service" name="service" class="form-input">
                 <option value="">เลือกบริการ (ไม่บังคับ)</option>
-                <option value="webdev">🌐 AI-Enhanced Website (เว็บ + Chatbot + SEO)</option>
-                <option value="automation">⚙️ AI Automation (Workflow + Chatbot)</option>
-                <option value="marketing">📈 Online Marketing Automation (Email + LINE + Facebook)</option>
-                <option value="seo">🔍 SEO + AI Content System</option>
-                <option value="consult">🖥️ Tech Consult (Server / Data Pipeline)</option>
-                <option value="audit">💼 Audit เว็บไซต์เดิมฟรี 30 นาที</option>
-                <option value="unsure">❓ ยังไม่แน่ใจ — ช่วยแนะนำ</option>
+                {serviceOptions.map(opt => (
+                  <option value={opt.value}>{opt.label}</option>
+                ))}
               </select>
             </div>
 
@@ -159,7 +183,9 @@ import PageHero from '../components/PageHero.astro';
 
           <!-- Success message (hidden by default) -->
           <div class="form-success" id="form-success" hidden>
-            <div class="success-icon">✅</div>
+            <div class="success-icon">
+              <Icon name="checkCircle" size={44} />
+            </div>
             <h3>ส่งแล้ว!</h3>
             <p>เราจะตอบกลับภายใน 2 ชั่วโมง (ในเวลาทำการ) ถ้าเร่งด่วน ทัก LINE @moreminimore ครับ</p>
           </div>
@@ -171,12 +197,12 @@ import PageHero from '../components/PageHero.astro';
   <!-- What Happens Next -->
   <section class="section section-soft next-section">
     <div class="container">
-      <div class="section-header">
+      <div class="section-header reveal">
         <span class="section-badge">หลังส่งฟอร์ม</span>
         <h2 class="section-title">3 ขั้นตอนถัดไป — <span class="highlight">ไม่มีอะไรซับซ้อน</span></h2>
       </div>
 
-      <div class="next-grid">
+      <div class="next-grid stagger-children">
         <div class="next-step">
           <div class="next-num">1</div>
           <h3>ตอบกลับภายใน 2 ชั่วโมง</h3>
@@ -200,12 +226,12 @@ import PageHero from '../components/PageHero.astro';
   <!-- Pre-submit FAQ -->
   <section class="section pre-faq-section">
     <div class="container">
-      <div class="section-header">
+      <div class="section-header reveal">
         <span class="section-badge">ก่อนกดส่ง</span>
         <h2 class="section-title">4 คำถามที่คนถาม <span class="highlight">ก่อน</span> กดส่งฟอร์ม</h2>
       </div>
 
-      <div class="pre-faq-list">
+      <div class="pre-faq-list stagger-children">
         <div class="pre-faq-item">
           <h3>คุยกัน 30 นาทีแล้วจะถูกบังคับซื้อไหม?</h3>
           <p>ไม่ คุยแล้วคุณไม่ชอบก็ไม่เป็นไร ไม่มี follow-up ไม่มีขายของเพิ่ม</p>
@@ -228,7 +254,7 @@ import PageHero from '../components/PageHero.astro';
 
   <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">ไม่มี commitment ไม่มี pressure ไม่มีใครตาม</p>
         <div class="cta-actions">
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
index e990e3a..4fef79b 100644
--- a/src/pages/faq.astro
+++ b/src/pages/faq.astro
@@ -3,16 +3,19 @@ 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 faqItems = await getCollection('faq');
 const categories = ['บริการ', 'ราคา', 'ระยะเวลา', 'AI & เทคนิค', 'หลังการขาย'];
+
+// Map categories to lucide icon names (semantic match, not visual emoji)
 const categoryIcons: Record<string, string> = {
-  'บริการ': '💼',
-  'ราคา': '💰',
-  'ระยะเวลา': '⏱️',
-  'AI & เทคนิค': '🤖',
-  'หลังการขาย': '🛠️',
+  'บริการ': 'briefcase',
+  'ราคา': 'dollarSign',
+  'ระยะเวลา': 'clock',
+  'AI & เทคนิค': 'bot',
+  'หลังการขาย': 'wrench',
 };
 ---
 
@@ -31,9 +34,11 @@ const categoryIcons: Record<string, string> = {
         const items = faqItems.filter(f => f.data.category === cat);
         if (items.length === 0) return null;
         return (
-          <div class="faq-category">
+          <div class="faq-category reveal">
             <h2 class="category-title">
-              <span class="category-icon">{categoryIcons[cat]}</span>
+              <span class="category-icon">
+                <Icon name={categoryIcons[cat] as any} size={18} />
+              </span>
               {cat}
             </h2>
             <div class="faq-list">
@@ -56,7 +61,9 @@ const categoryIcons: Record<string, string> = {
       <!-- Other Topics -->
       <div class="faq-category">
         <h2 class="category-title">
-          <span class="category-icon">📚</span>
+          <span class="category-icon">
+            <Icon name="book" size={18} />
+          </span>
           เรื่องอื่น ๆ ที่ลูกค้าถามบ่อย
         </h2>
         <div class="tag-cloud">
@@ -78,23 +85,29 @@ const categoryIcons: Record<string, string> = {
       </div>
 
       <!-- Quick Channels -->
-      <div class="channels-section">
+      <div class="channels-section reveal">
         <h2 class="channels-title">ไม่เจอคำตอบ? ถามตรง ๆ เลย</h2>
-        <div class="channels-grid">
+        <div class="channels-grid stagger-children">
           <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="channel-card">
-            <div class="channel-icon">💬</div>
+            <div class="channel-icon">
+              <Icon name="message" size={28} />
+            </div>
             <h3 class="channel-name">LINE</h3>
             <p class="channel-handle">@moreminimore</p>
             <p class="channel-time">ตอบใน 30 นาที (เวลาทำการ)</p>
           </a>
           <a href="tel:0809955945" class="channel-card">
-            <div class="channel-icon">📞</div>
+            <div class="channel-icon">
+              <Icon name="phone" size={28} />
+            </div>
             <h3 class="channel-name">โทร</h3>
             <p class="channel-handle">080-995-5945</p>
             <p class="channel-time">จ-ศ 09:00-18:00</p>
           </a>
           <a href="mailto:contact@moreminimore.com" class="channel-card">
-            <div class="channel-icon">📧</div>
+            <div class="channel-icon">
+              <Icon name="mail" size={28} />
+            </div>
             <h3 class="channel-name">Email</h3>
             <p class="channel-handle">contact@moreminimore.com</p>
             <p class="channel-time">ตอบภายใน 1 วัน</p>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 95b2077..28484f6 100644
--- a/src/pages/index.astro
+++ b/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;
diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro
index 9352785..186107c 100644
--- a/src/pages/portfolio.astro
+++ b/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); }
diff --git a/src/pages/services/index.astro b/src/pages/services/index.astro
index e3cfd20..c99fdd6 100644
--- a/src/pages/services/index.astro
+++ b/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;