refactor(legacy): apply v6 design to all inner pages (delete bento components)

Per user: 'เราไม่ต้องการ legacy design น่ะ เพราะมีดีไชน์ใหม่แล้วไง'
- New v6 design must apply to EVERY page, not just index

PHASE A — Add CSS compatibility aliases (~600 lines)
==================================================
fx-system.css grew from 0.05MB → 0.12MB with 3 new alias blocks
for legacy class names that pages still use:

1. LEGACY → v6 ALIASES
   .section, .section-bento, .section-soft, .section-yellow
   .section-header, .section-badge, .section-title, .section-desc
   .reveal, .hero-content, .hero-badge, .hero-grid
   .service-stack + .service-stack-{item,num,icon,body,title,bullets}
   .portfolio-card-{grid,top,badge,arrow,name,industry,highlight}
   .contact-form, .form-{group,label,input,row,success}, .btn, .btn-{primary,outline-dark}
   .filter-section, .filter-bar, .filter-btn
   .info-icon, .checklist
   All styled with v6 design tokens (--ink, --paper, --coral,
   --brand-yellow, --line-2, --paper-2, etc.)

2. BENTO COMPONENT ALIASES
   .bento-grid, .bento-tile, .span-{3,4,5,6,7,8,12}, .rows-{2,3}
   .surface-{white,soft,yellow,purple,purple-soft,teal,teal-soft,mint,dark,coral}
   .tile-{eyebrow,title,body,link}, .mega-cta
   All render via CSS Grid 12-col + v6 surface treatments
   Children (.tile-eyebrow, .tile-title, .tile-body) get v6
   typography (Kanit 800 for titles, JetBrains Mono 700 for
   eyebrows, Itim for em accents).

3. DARK MODE OVERRIDES
   html.dark .section-soft/.filter-section: var(--paper-2)
   html.dark .section-badge/.filter-btn.active: yellow
   html.dark .contact-form .form-input: dark inputs
   html.dark .bento-tile.surface-{soft,purple-soft,yellow}: dark variants

PHASE B — Replace legacy components with inline divs
==================================================
Deleted components (no longer imported by anyone):
- src/components/BentoGrid.astro
- src/components/BentoTile.astro
- src/components/DecoOrb.astro
- src/components/PageHero.astro

Replaced in 7 pages (mechanical regex sweep):
- services/[slug].astro
- contact.astro
- faq.astro
- blog/index.astro
- blog/[slug].astro
- privacy.astro
- terms.astro

JSX transforms:
- <BentoGrid>...</BentoGrid> → <div class='bento-grid'>...</div>
- <BentoTile span={6} surface='yellow' /> → <div class='bento-tile span-6 surface-yellow' />
- <DecoOrb .../> → (deleted, was decorative empty)
- Removed unused BentoGrid/BentoTile/DecoOrb imports

Cleaned orphan comments referencing deleted components:
- // use data-parallax-speed from DecoOrb
- <!-- mail, line, hours as separate BentoTiles -->
- /* FAQ inside BentoTile */

FINAL AUDIT
===========
- 0 legacy component refs in src/
- Build: 22 pages, 1.98s, 0 errors
- All 11 pages have v6 styling (via direct fx-* or via aliases)

Result: every page now uses the v6 design system consistently.
No more yellow DecorativeOrbs, no more BentoTile grid overlap,
no more PageHero/KineticHero mixing. Visual continuity across
all 11 pages.

src/pages/services/[slug].astro

@@ -1,8 +1,5 @@
 ---
 import Base from '../../layouts/Base.astro';
-import BentoGrid from '../../components/BentoGrid.astro';
-import BentoTile from '../../components/BentoTile.astro';
-import DecoOrb from '../../components/DecoOrb.astro';
 import Icon from '../../components/Icon.astro';
 import { getCollection, render } from 'astro:content';
 
@@ -325,8 +322,8 @@ const featureList = data.features || data.services || [];
 <Base title={`${service.data.title} | MoreminiMore`}>
   <!-- HERO -->
   <section class="service-hero section-bento">
-    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.3} 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;">
       <div class="hero-grid">
         <div class="hero-content">
@@ -374,8 +371,8 @@ const featureList = data.features || data.services || [];
   <!-- SECTION 2: SERVICES (vertical card stack) -->
   {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">บริการที่คุณได้รับ</span>
@@ -408,8 +405,8 @@ const featureList = data.features || data.services || [];
   <!-- SECTION 3: TECH COMPARISON + PORTFOLIO -->
   {(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 && (
@@ -471,8 +468,8 @@ const featureList = data.features || data.services || [];
   <!-- SECTION 3B: TARGETS (เหมาะกับใคร) -->
   {data.targets && (
     <section class="section section-bento">
-      <DecoOrb color="soft" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.4} 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">เหมาะกับใคร</span>
@@ -495,8 +492,8 @@ const featureList = data.features || data.services || [];
 
   <!-- SECTION 4: PRICING (dynamic: 3-tier OR consult CTA) -->
   <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;">
       {data.pricing ? (
         <>
@@ -561,8 +558,8 @@ const featureList = data.features || data.services || [];
 
   <!-- SECTION 5: FAQ + MDX content -->
   <section class="section section-soft 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>
@@ -1589,15 +1586,5 @@ const featureList = data.features || data.services || [];
 </style>
 
 <script>
-  // Parallax orbs (use data-parallax-speed from DecoOrb)
-  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
-  function updateParallax() {
-    const scrolled = window.scrollY;
-    parallaxEls.forEach(el => {
-      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
-      const ty = scrolled * speed * -0.3;
-      el.style.transform = `translate3d(0, ${ty}px, 0)`;
-    });
-  }
-  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+
 </script>