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/faq.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 } from 'astro:content';
 
 const faqItems = await getCollection('faq');
@@ -71,16 +68,14 @@ groupedFaq.forEach((group, gIdx) => {
 
   <!-- FAQ CATEGORIES (BENTO) -->
   <section class="section section-bento">
-    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', left: '-100px' }} opacity={0.25} blur="80px" />
-    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', right: '-100px' }} opacity={0.4} blur="80px" />
+    
+    
     <div class="container" style="position: relative; z-index: 1;">
-      <BentoGrid>
+      <div class="bento-grid">
+
         {faqTiles.map((tile) => (
-          <BentoTile
-            span={tile.span}
-            surface={tile.surface}
-            eyebrow={tile.isFirst ? tile.category : `${tile.category} · ต่อ`}
-          >
+          <div class="bento-tile">
+
             <div class="faq-list">
               {tile.items.map((item) => (
                 <details class="faq-item">
@@ -94,11 +89,13 @@ groupedFaq.forEach((group, gIdx) => {
                 </details>
               ))}
             </div>
-          </BentoTile>
+          
+</div>
         ))}
 
         <!-- OTHER TOPICS — full-width tile with tag cloud -->
-        <BentoTile span={12} surface="soft" eyebrow="เรื่องอื่น ๆ" title="คำถามอื่น ๆ ที่ลูกค้าถามบ่อย">
+        <div class="bento-tile span-12 surface-soft">
+
           <div class="tag-cloud">
             <span class="topic-tag">โฮสติ้ง</span>
             <span class="topic-tag">โดเมน</span>
@@ -115,37 +112,47 @@ groupedFaq.forEach((group, gIdx) => {
             <span class="topic-tag">ขอดูเว็บจริง</span>
             <span class="topic-tag">นัดคุยนอกสถานที่</span>
           </div>
-        </BentoTile>
-      </BentoGrid>
+        
+</div>
+      
+</div>
     </div>
   </section>
 
   <!-- QUICK CHANNELS (BENTO) -->
   <section class="section section-bento">
-    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', right: '20%' }} opacity={0.2} blur="80px" />
-    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', left: '-100px' }} opacity={0.3} 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>
-        <BentoTile span={4} surface="yellow" eyebrow="LINE" title="@moreminimore">
+      <div class="bento-grid">
+
+        <div class="bento-tile span-4 surface-yellow">
+
           <p>คนที่อยากคุยเร็ว ๆ แบบเป็นกันเอง</p>
           <p><strong>ตอบใน 30 นาที (เวลาทำการ)</strong></p>
           <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-dark" style="margin-top: 16px;">ทักเลย →</a>
-        </BentoTile>
-        <BentoTile span={4} surface="soft" eyebrow="โทร" title="080-995-5945">
+        
+</div>
+        <div class="bento-tile span-4 surface-soft">
+
           <p>คนที่อยากคุยยาว ๆ 5–10 นาที ถามตอบสด</p>
           <p><strong>จ-ศ 09:00-18:00</strong></p>
           <a href="tel:0809955945" class="btn btn-dark" style="margin-top: 16px;">โทรเลย →</a>
-        </BentoTile>
-        <BentoTile span={4} surface="purple-soft" eyebrow="Email" title="contact@moreminimore.com">
+        
+</div>
+        <div class="bento-tile span-4 surface-purple-soft">
+
           <p>คนที่อยากส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
           <p><strong>ตอบภายใน 1 วัน</strong></p>
           <a href="mailto:contact@moreminimore.com" class="btn btn-dark" style="margin-top: 16px;">ส่งอีเมล →</a>
-        </BentoTile>
-      </BentoGrid>
+        
+</div>
+      
+</div>
     </div>
   </section>
 
@@ -169,7 +176,6 @@ groupedFaq.forEach((group, gIdx) => {
     overflow: hidden;
   }
 
-  /* FAQ inside BentoTile */
   .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
 
   .faq-item {
@@ -304,15 +310,5 @@ groupedFaq.forEach((group, gIdx) => {
 </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>