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/terms.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';
 ---
 
 <Base title="เงื่อนไขการให้บริการ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
@@ -14,11 +11,13 @@ import DecoOrb from '../components/DecoOrb.astro';
    showStats={false} />
 
   <section class="section section-bento legal-section">
-    <DecoOrb color="yellow" size="450px" speed={0.3} position={{ top: '-100px', right: '-150px' }} opacity={0.25} blur="80px" />
-    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-150px', left: '-100px' }} opacity={0.4} blur="80px" />
+    
+    
     <div class="container" style="position: relative; z-index: 1;">
-      <BentoGrid>
-        <BentoTile span={8} surface="white" eyebrow="กฎหมาย" title="เงื่อนไขการให้บริการ">
+      <div class="bento-grid">
+
+        <div class="bento-tile span-8 surface-white">
+
           <div class="legal-body">
             <p class="legal-intro">ชื่อเว็บไซต์: MoreminiMore | เว็บไซต์: https://www.moreminimore.com | บริษัท: MoreminiMore Co.,Ltd.</p>
 
@@ -57,9 +56,11 @@ import DecoOrb from '../components/DecoOrb.astro';
               <p>หากมีคำถามเกี่ยวกับเงื่อนไขการให้บริการ กรุณาติดต่อเราที่ contact@moreminimore.com หรือ 080-995-5945</p>
             </div>
           </div>
-        </BentoTile>
+        
+</div>
+
+        <div class="bento-tile span-4 surface-yellow">
 
-        <BentoTile span={4} surface="yellow" eyebrow="ข้อมูลเอกสาร" title="สรุปฉบับย่อ">
           <div class="aside-body">
             <p><strong>ชื่อเอกสาร:</strong> เงื่อนไขการให้บริการ</p>
             <p><strong>มีผลบังคับใช้:</strong> 5 พฤษภาคม 2569</p>
@@ -75,8 +76,10 @@ import DecoOrb from '../components/DecoOrb.astro';
               <li>ติดต่อเรา</li>
             </ol>
           </div>
-        </BentoTile>
-      </BentoGrid>
+        
+</div>
+      
+</div>
     </div>
   </section>
 </Base>
@@ -151,15 +154,5 @@ import DecoOrb from '../components/DecoOrb.astro';
 </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>