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/blog/[slug].astro

@@ -1,9 +1,6 @@
 ---
 import Base from '../../layouts/Base.astro';
 import Hero from '../../components/Hero.astro';
-import BentoGrid from '../../components/BentoGrid.astro';
-import BentoTile from '../../components/BentoTile.astro';
-import DecoOrb from '../../components/DecoOrb.astro';
 import { getCollection, render } from 'astro:content';
 
 const { slug } = Astro.params;
@@ -51,8 +48,8 @@ function surfaceFor(i: number) {
 
   {post.data.image && (
     <section class="section section-bento article-image-section">
-      <DecoOrb color="soft" size="500px" speed={0.3} position={{ top: '-100px', right: '-150px' }} opacity={0.4} blur="80px" />
-      <DecoOrb color="yellow" size="350px" speed={0.3} position={{ bottom: '-150px', left: '-100px' }} opacity={0.2} blur="80px" />
+      
+      
       <div class="container" style="position: relative; z-index: 1;">
         <div class="article-image">
           <img src={post.data.image} alt={post.data.title} />
@@ -62,22 +59,26 @@ function surfaceFor(i: number) {
   )}
 
   <section class="section section-bento article-section">
-    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '5%', left: '-150px' }} opacity={0.2} blur="80px" />
-    <DecoOrb color="mint" size="350px" speed={0.3} position={{ bottom: '10%', right: '-100px' }} opacity={0.2} blur="80px" />
+    
+    
     <div class="container" style="position: relative; z-index: 1;">
-      <BentoGrid>
+      <div class="bento-grid">
+
         <!-- Main article body — full width bento tile -->
-        <BentoTile span={8} surface="white" eyebrow={post.data.category} title={post.data.title}>
+        <div class="bento-tile span-8 surface-white">
+
           <div class="article-meta">
             <span class="article-date">{formattedDate}</span>
           </div>
           <div class="article-body">
             <Content />
           </div>
-        </BentoTile>
+        
+</div>
 
         <!-- Sidebar tile: about + contact stack -->
-        <BentoTile span={4} surface="soft" eyebrow="เกี่ยวกับเรา" title="MoreminiMore">
+        <div class="bento-tile span-4 surface-soft">
+
           <p>ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่</p>
           <a href="/about" class="btn btn-outline-dark btn-sm">ดูเพิ่มเติม</a>
 
@@ -89,25 +90,29 @@ function surfaceFor(i: number) {
             <a href="/contact" class="btn btn-primary btn-sm">ติดต่อเรา</a>
             <a href="tel:0809955945" class="btn btn-outline-dark btn-sm">080-995-5945</a>
           </div>
-        </BentoTile>
-      </BentoGrid>
+        
+</div>
+      
+</div>
     </div>
   </section>
 
   {related.length > 0 && (
     <section class="section section-bento related-section">
-      <DecoOrb color="yellow" size="400px" speed={0.3} position={{ top: '10%', right: '-100px' }} opacity={0.25} blur="80px" />
-      <DecoOrb color="soft" size="350px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
+      
+      
       <div class="container" style="position: relative; z-index: 1;">
         <div class="section-header reveal">
           <span class="section-badge">บทความที่เกี่ยวข้อง</span>
           <h2 class="section-title">อ่านต่อ <span class="highlight">เนื้อหาใกล้เคียง</span></h2>
         </div>
 
-        <BentoGrid>
+        <div class="bento-grid">
+
           {related.map((r, i) => (
             <a href={`/blog/${r.id}`} class="related-link">
-              <BentoTile span={4} surface={surfaceFor(i)} eyebrow={r.data.category} title={r.data.title}>
+              <div class="bento-tile span-4">
+
                 <div class="related-card-body">
                   {r.data.image && (
                     <div class="related-image">
@@ -118,10 +123,12 @@ function surfaceFor(i: number) {
                     {new Date(r.data.date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
                   </span>
                 </div>
-              </BentoTile>
+              
+</div>
             </a>
           ))}
-        </BentoGrid>
+        
+</div>
       </div>
     </section>
   )}
@@ -296,15 +303,5 @@ function surfaceFor(i: number) {
 </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>