---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Footer from '../../components/Footer.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';

export async function getStaticPaths() {
  const services = await getCollection('services');
  return services.map(service => ({
    params: { slug: service.id },
    props: { service },
  }));
}

const { service } = Astro.props;
const { Content } = await render(service);

const slug = service.id;
const isWebDev = slug === 'webdev';
const isMarketing = slug === 'marketing';
const isAutomation = slug === 'automation';
const isTechConsult = slug === 'ai-consult';

// Service-specific data — keyed by slug, with safe fallback to webdev.
const serviceData: Record<string, any> = {
  'webdev': {
    badge: 'บริการรับทำเว็บไซต์สำหรับ SME ไทย',
    title: 'สร้างเว็บไซต์',
    titleAccent: 'เปลี่ยนแปลงเองได้',
    titleAccent2: 'ด้วย AI',
    desc: 'เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ไม่ต้องรอเราทุกครั้ง พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที + GEO ติด ChatGPT, Perplexity, AI Search',
    whyUs: [
      { num: '01', title: 'ทำเสร็จไว', desc: 'เว็บ Astro 14-30 วัน · WordPress 1-3 เดือน' },
      { num: '02', title: 'แก้เองได้', desc: 'ลูกค้าดูแลเนื้อหาเอง ไม่ต้องพึ่งเราทุกครั้ง' },
      { num: '03', title: 'ติด Google + AI', desc: 'SEO + GEO ติด ChatGPT, Perplexity, Google AI' },
      { num: '04', title: 'Server ฟรีปีแรก', desc: 'พร้อม SSL และ Domain .com ปีแรก' },
    ],
    services: [
      {
        icon: 'pen', span: 6, surface: 'mint',
        title: 'แก้ไขเนื้อหาง่าย ไม่ต้องมีความรู้เทคนิค',
        bullets: [
          'ระบบหลังบ้านใช้ง่าย เปลี่ยนข้อความ รูปภาพ สินค้า ได้เอง',
          'อบรมการใช้งานให้ทีมของคุณ ใช้งานได้ทันที',
          'มีคู่มือ + วิดีโอประกอบ ทบทวนได้ทุกเมื่อ',
        ],
      },
      {
        icon: 'bot', span: 6, surface: 'yellow',
        title: 'AI ช่วยสร้างเนื้อหา + แนะนำการปรับปรุง',
        bullets: [
          'สั่ง AI เขียนบทความ SEO + GEO ได้ทันที',
          'AI แนะนำหัวข้อบทความใหม่ที่ตรงกับลูกค้าของคุณ',
          'AI วิเคราะห์เนื้อหาเดิม บอกจุดที่ควรปรับ',
        ],
      },
      {
        icon: 'search', span: 6, surface: 'purple-soft',
        title: 'SEO + GEO ติด Google และ AI Search',
        bullets: [
          'ติด ChatGPT, Perplexity, Google AI Overviews',
          'ถูกอ้างอิงเมื่อลูกค้าถาม AI เกี่ยวกับสินค้าของคุณ',
          'โครงสร้างเว็บไซต์ออกแบบมาเพื่อ AI อ่านเข้าใจ',
        ],
      },
      {
        icon: 'shield', span: 6, surface: 'teal-soft',
        title: 'Server + SSL + Backup ครบ ดูแลให้',
        bullets: [
          'Server เร็ว โหลดไว ไม่มี downtime บ่อย',
          'SSL ฟรี เว็บปลอดภัย + Google จัดอันดับดี',
          'Backup อัตโนมัติทุกวัน ไม่ต้องกลัวข้อมูลหาย',
        ],
      },
    ],
    techOptions: [
      { badge: 'A', name: 'Astro', surface: 'yellow', desc: 'เหมาะสำหรับเว็บไซต์ทั่วไป / Corporate เน้น AI และ SEO โหลดเร็ว ประสิทธิภาพสูง บล็อก / เว็บบริษัท', duration: '14-30 วัน', best: 'ธุรกิจที่ต้องการเว็บเร็ว ติด Google + AI Search' },
      { badge: 'WP', name: 'WordPress', surface: 'soft', desc: 'เหมาะสำหรับเว็บขายของ (E-commerce) เว็บไซต์ที่ซับซ้อน มีระบบหลังบ้านซับซ้อน ต้องการ Plugin เยอะ', duration: '2-4 เดือน', best: 'ร้านค้าออนไลน์ เว็บที่ต้องการ Plugin หลากหลาย' },
    ],
    pricing: [
      { label: 'เว็บไซต์ Astro (AI Ready)', price: 'เริ่มต้น ฿10,000', surface: 'mint', bestFor: 'เว็บบริษัท เว็บ Landing Page เน้น SEO + AI' },
      { label: 'เว็บไซต์ WordPress', price: 'เริ่มต้น ฿15,000', surface: 'yellow', bestFor: 'ร้านค้าออนไลน์ เว็บ E-commerce ที่ต้องการ Plugin' },
      { label: 'Landing Page', price: 'เริ่มต้น ฿5,000', surface: 'purple-soft', bestFor: 'หน้าเดียวจบ ใช้ยิงแอดหรือทดสอบตลาด' },
      { label: 'Server Hosting', price: '฿5,000/ปี', surface: 'teal-soft', bestFor: 'Server คุณภาพสูง ดูแลให้' },
      { label: 'Domain .com', price: '฿500/ปี', surface: 'soft', bestFor: 'ต่ออายุโดเมน .com / .co.th' },
    ],
    realPortfolio: [
      { name: 'Dataroot', url: 'https://erp.dataroot.asia', industry: 'ตัวแทนจำหน่าย Odoo ERP', highlight: 'หน้าแรกโหลดไว + ติด Google ได้ผลดี' },
      { name: 'Baofuling Shop', url: 'https://baofulingshop.com', industry: 'E-commerce สินค้า Skincare', highlight: 'หน้าเดียวจบ สั่งซื้อง่าย ดูแลเองได้' },
      { name: 'Lungfinler', url: 'https://lungfinler.com', industry: 'Digital Agency', highlight: 'แสดงผลงาน + บล็อก ใช้ CMS ได้' },
      { name: 'ทวนทอง 99', url: 'https://tuanthong99.com', industry: 'สมุนไพรไทย', highlight: 'ระบบสั่งซื้อ + จัดการสินค้า ดูแลเองได้' },
    ],
    faqs: [
      { q: 'แก้ไขเว็บเองยากไหม?', a: 'ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา คุณพิมพ์สั่ง AI ได้เลยว่าอยากได้เนื้อหาแบบไหน ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย เหมือนใช้ Word คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค และทีมเราจะอบรมการใช้งานให้ก่อนส่งมอบ' },
      { q: 'มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?', a: 'ค่าบริการ Server และโดเมนจะฟรีในปีแรก คุณจ่ายเฉพาะค่าทำเว็บไซต์ และจะมีค่าใช้จ่ายในปีถัดไป: ค่า Server ประมาณ 5,000 บาท/ปี + ค่าโดเมน 500 บาท/ปี ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม ถ้าเว็บมีคนเข้าน้อยกว่า 100,000 คน/เดือน ค่า Server ไม่เพิ่ม' },
      { q: 'Server ดูแลให้ไหม?', a: 'เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด อัปเดตความปลอดภัย และแก้ไขปัญหาเบื้องต้น ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือถ้าเว็บมีฟีเจอร์ที่ต้องใช้ทรัพยากร Server สูง เช่น AI Chatbot ที่คุยกับลูกค้าจำนวนมาก' },
      { q: 'ทำเว็บขายของ (E-commerce) ได้ไหม?', a: 'ทำได้แน่นอน เราใช้ WordPress + WooCommerce เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน (PromptPay / โอนผ่านธนาคาร / บัตรเครดิต) ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร คุณสามารถเพิ่มสินค้า ลดราคา จัดโปรโมชั่น ได้ด้วยตัวเอง' },
      { q: 'ต้องมีความรู้ทางเทคนิคไหม?', a: 'ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ ถ้าเจอปัญหาการใช้งาน ทีมซัพพอร์ตพร้อมช่วยทันที' },
      { q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI เมื่อมีคนถามเกี่ยวกับสินค้าหรือบริการในกลุ่มของคุณ เป็นอีกช่องทางที่จะดึงลูกค้าเข้ามา' },
      { q: 'เว็บจะติด Google ในกี่เดือน?', a: 'ขึ้นอยู่กับคีย์เวิร์ดและการแข่งขัน สำหรับคีย์เวิร์ดที่มีการแข่งขันปานกลาง ประมาณ 2-3 เดือนจะเริ่มเห็นผล ส่วนคีย์เวิร์ดที่แข่งขันสูงอาจใช้เวลา 6 เดือนขึ้นไป เราจะวิเคราะห์คีย์เวิร์ดที่เหมาะสมก่อนเริ่มทำ SEO' },
      { q: 'ถ้าอยากเพิ่มฟีเจอร์ทีหลัง ทำได้ไหม?', a: 'ได้แน่นอน เว็บไซต์ที่เราทำออกแบบมาให้ขยายได้ คุณสามารถเพิ่มฟีเจอร์ เช่น ระบบจองคิว ระบบสมาชิก ระบบชำระเงินเพิ่ม หรือเชื่อมต่อกับ API ภายนอก ทีมเราจะประเมินราคาเพิ่มเติมตามฟีเจอร์ที่ต้องการ แจ้งราคาก่อนเริ่มงานทุกครั้ง' },
    ],
  },
  'marketing': {
    badge: 'บริการ Marketing Automation ครบวงจร',
    title: 'การตลาดอัตโนมัติ',
    titleAccent: 'ทุกช่องทาง',
    titleAccent2: 'พร้อม AI วิเคราะห์',
    desc: 'ส่งข้อความอัตโนมัติ วิเคราะห์ข้อมูล SEO ติด Google ครอบคลุม Website, Social Media, Ads และ Email + GEO ติด ChatGPT, Perplexity, AI Search',
    features: [
      { icon: 'globe', title: 'Website + SEO', desc: 'เว็บไซต์ที่ติด Google และ AI Search พร้อมระบบจัดการเนื้อหา' },
      { icon: 'smartphone', title: 'Social Media', desc: 'Facebook, LINE, IG อัตโนมัติ ส่งข้อความตรงกลุ่มเป้าหมาย' },
      { icon: 'barChart', title: 'Google Ads', desc: 'ควบคุมงบโฆษณา วิเคราะห์ผล เพิ่มประสิทธิภาพ ROI' },
      { icon: 'mail', title: 'Email Marketing', desc: 'ส่งอีเมลอัตโนมัติ ติดตามลูกค้า ส่งโปรโมชั่นตรงเวลา' },
    ],
    targets: [
      { icon: 'building', title: 'SME / ร้านค้าปลีก', desc: 'ธุรกิจท้องถิ่นที่ต้องการเพิ่มยอดขายออนไลน์' },
      { icon: 'shoppingCart', title: 'ร้านค้าออนไลน์', desc: 'E-commerce ที่ต้องการบริหารการตลาดอัตโนมัติ' },
      { icon: 'briefcase', title: 'บริษัท / องค์กร', desc: 'บริษัทที่ต้องการระบบการตลาดที่มีประสิทธิภาพ' },
    ],
    aiFeatures: [
      'วิเคราะห์พฤติกรรมลูกค้าแต่ละ Touchpoint',
      'หาช่องว่างทางการตลาดที่ยังไม่ถูกใช้',
      'เสนอวิธีปรับปรุงอย่างต่อเนื่อง',
      'รายงานผลเข้าใจง่าย วัดผลได้จริง',
    ],
    faqs: [
      { q: 'Marketing Automation ต่างจาก AI Automation อย่างไร?', a: 'AI Automation เน้นการทำ automation ภายในองค์กร เช่น ระบบตอบคำถาม การประมวลผลข้อมูล Marketing Automation เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email' },
      { q: 'ราคารวมค่าโฆษณาด้วยไหม?', a: 'ไม่รวมค่าโฆษณา ลูกค้าเป็นเจ้าของบัญชีโฆษณาเองและจ่ายค่าโฆษณาแยกต่างหาก เราเป็นเพียง Agency ที่เข้าไปบริหารจัดการให้' },
      { q: 'ต้องมีความรู้ด้านเทคนิคไหม?', a: 'ไม่ต้องมีความรู้ด้านเทคนิคเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลและดูผลลัพธ์' },
      { q: 'AI วิเคราะห์อะไรบ้าง?', a: 'AI วิเคราะห์พฤติกรรมลูกค้า หาช่องว่างทางการตลาด และนำเสนอวิธีปรับปรุง วิเคราะห์ผลแคมเปญ และอื่น ๆ ตามความเหมาะสม' },
      { q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI' },
    ],
  },
  'automation': {
    badge: 'บริการ AI Automation ครบวงจร',
    title: 'ระบบเชื่อมข้อมูล',
    titleAccent: 'วิเคราะห์ด้วย AI',
    desc: 'เชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร',
    features: [
      { icon: 'package', title: 'เชื่อมข้อมูล', desc: 'Excel, Google Sheets, CRM, ERP ได้ทุกระบบ' },
      { icon: 'brain', title: 'AI วิเคราะห์', desc: 'หาความผิดปกติ หาแนวโน้ม และเสนอวิธีปรับปรุง' },
      { icon: 'barChart', title: 'สร้างรายงานอัตโนมัติ', desc: 'ส่งอีเมลรายวัน รายสัปดาห์ รายเดือน' },
      { icon: 'bell', title: 'แจ้งเตือนอัตโนมัติ', desc: 'LINE, Email, SMS เมื่อมีเหตุการณ์สำคัญ' },
      { icon: 'message', title: 'Enterprise Chatbot', desc: 'ตอบคำถามพนักงาน ค้นหาข้อมูลอัตโนมัติ' },
      { icon: 'cog', title: 'Process Automation', desc: 'ทำให้กระบวนการทำงานเป็นอัตโนมัติ ลดงานซ้ำซ้อน' },
    ],
    targets: [
      { icon: 'building', title: 'SME / ธุรกิจขนาดเล็ก', desc: 'ต้องการเชื่อมข้อมูลจากหลายแหล่งเข้าด้วยกัน ลดงาน manual' },
      { icon: 'users', title: 'ทีมขาย / การตลาด', desc: 'ต้องการวิเคราะห์ข้อมูลลูกค้า สร้างรายงานอัตโนมัติ' },
      { icon: 'clipboard', title: 'ฝ่ายบัญชี / การเงิน', desc: 'ต้องการเชื่อมข้อมูลบัญชี สร้างรายงานทางการเงินอัตโนมัติ' },
    ],
    faqs: [
      { q: 'AI Automation ต่างจาก Marketing Automation อย่างไร?', a: 'AI Automation เน้นการทำ automation ภายในองค์กร เช่น ระบบเชื่อมข้อมูล วิเคราะห์ข้อมูล สร้างรายงาน ตอบคำถามภายใน ส่วน Marketing Automation เน้นการทำ automation ภายนอก เช่น การตลาดผ่าน Website, Social Media, Ads' },
      { q: 'ต้องมีความรู้ด้านเทคนิคไหม?', a: 'ไม่ต้องมีความรู้ด้านเทคนิคเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ' },
      { q: 'ระบบที่มีอยู่แล้วเชื่อมได้ไหม?', a: 'ได้ เราสามารถเชื่อมต่อระบบที่มีอยู่เข้ากับ AI ได้ ไม่ว่าจะเป็น Excel, Google Sheets, CRM, ERP หรือระบบอื่น ๆ' },
    ],
  },
  'ai-consult': {
    badge: 'ที่ปรึกษา AI ครบวงจร',
    title: 'ที่ปรึกษา AI',
    titleAccent: 'ครบวงจร',
    titleAccent2: 'สำหรับธุรกิจไทย',
    desc: 'ที่ปรึกษาด้าน Marketing Automation, AI Automation และ AI Hardware สำหรับธุรกิจของคุณ',
    services: [
      { icon: 'megaphone', title: 'Marketing Automation', items: ['ระบบการตลาดอัตโนมัติ', 'Email Marketing อัตโนมัติ', 'Chatbot ตอบคำถาม'] },
      { icon: 'brain', title: 'AI Automation', items: ['ระบบ AI ตอบคำถาม', 'ประมวลผลเอกสาร', 'วิเคราะห์ข้อมูล'] },
      { icon: 'server', title: 'AI Hardware', items: ['ที่ปรึกษาซื้อ Server', 'แนะนำ GPU/สเปค', 'ติดตั้ง On-premise'] },
      { icon: 'link', title: 'รวมระบบ', items: ['รวมระบบที่มีอยู่', 'เชื่อมต่อ API', 'สร้าง Workflow'] },
    ],
    whyUs: [
      { title: 'ครบวงจร', desc: 'ให้คำปรึกษาครบทุกด้าน ทั้ง Marketing, AI และ Hardware คุณไม่ต้องไปหาหลายที่' },
      { title: 'ประหยัด', desc: 'ปรึกษาฟรีในเบื้องต้น แนะนำแนวทางที่เหมาะสมกับงบประมาณ ไม่ต้องซื้อของที่ไม่จำเป็น' },
      { title: 'ทำงานด้วยกัน', desc: 'เราทำงานร่วมกับคุณตลอดกระบวนการ ตั้งแต่วางแผน จนถึง Implementation และดูแลต่อเนื่อง' },
    ],
    faqs: [
      { q: 'ที่ปรึกษา AI ช่วยอะไรได้บ้าง?', a: 'เราช่วยวิเคราะห์ความต้องการของธุรกิจ แนะนำเทคโนโลยีที่เหมาะสม วางแผนการใช้งาน และดูแลการ implement จนถึงการใช้งานจริง' },
      { q: 'มีค่าใช้จ่ายอะไรบ้าง?', a: 'เริ่มต้นจากการปรึกษาฟรี ค่าบริการจะขึ้นอยู่กับความซับซ้อนของโปรเจกต์และระยะเวลาที่ใช้' },
      { q: 'ต้องมีความรู้เทคนิคไหม?', a: 'ไม่จำเป็น เราอธิบายให้เข้าใจง่าย และดูแลทุกอย่างให้' },
    ],
  },
};

const data = serviceData[slug] || serviceData['webdev'];
const featureList = data.features || data.services || [];
---

<Base title={`${service.data.title} | MoreminiMore`}>
  <Navigation />

  <!-- 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">
          <span class="hero-badge">{data.badge}</span>
          <h1 class="hero-title">
            <span class="hero-line">{data.title}</span>
            <span class="hero-line hero-accent">{data.titleAccent}</span>
            {data.titleAccent2 && <span class="hero-line">{data.titleAccent2}</span>}
          </h1>
          <p class="hero-desc">{data.desc}</p>

          <div class="hero-actions">
            <a href="tel:0809955945" class="btn btn-primary">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
              </svg>
              โทรหาเรา
            </a>
            <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-9.491.371-.661.56-1.388.56-2.159"/></svg>
              ทัก LINE
            </a>
          </div>
        </div>

        <!-- Hero side — 4 why-us tiles stacked -->
        <div class="hero-visual">
          <div class="hero-trust-title">ทำไมต้องเลือกเรา</div>
          <div class="hero-trust-grid">
            {data.whyUs && data.whyUs.map((w: any) => (
              <div class="hero-trust-card">
                <div class="hero-trust-num">{w.num}</div>
                <div class="hero-trust-body">
                  <div class="hero-trust-name">{w.title}</div>
                  <div class="hero-trust-desc">{w.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 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>
          <h2 class="section-title">
            ทุกบริการ<span class="highlight">ที่เว็บไซต์ต้องมี</span>
          </h2>
          <p class="section-desc">ครบทุกฟีเจอร์ที่เว็บสมัยใหม่ต้องมี — ไม่ต้องจ้างเพิ่มทีหลัง</p>
        </div>

        <div class="service-stack">
          {data.services.map((s: any, idx: number) => (
            <div class="service-stack-item" data-surface={s.surface}>
              <div class="service-stack-num">0{idx + 1}</div>
              <div class="service-stack-icon">
                <Icon name={s.icon as any} size={32} />
              </div>
              <div class="service-stack-body">
                <h3 class="service-stack-title">{s.title}</h3>
                <ul class="service-stack-bullets">
                  {s.bullets.map((b: string) => <li>{b}</li>)}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )}

  <!-- 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 && (
          <>
            <div class="section-header reveal">
              <span class="section-badge">เลือกระบบ</span>
              <h2 class="section-title">เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span></h2>
              <p class="section-desc">แนะนำให้เลือกตามลักษณะธุรกิจ ไม่ใช่เลือกของแพง</p>
            </div>

            <div class="tech-comparison">
              {data.techOptions.map((t: any) => (
                <div class={`tech-col tech-col-${t.badge.toLowerCase()}`}>
                  <div class="tech-col-header">
                    <span class="tech-col-badge">{t.badge}</span>
                    <h3 class="tech-col-name">{t.name}</h3>
                    <p class="tech-col-duration">{t.duration}</p>
                  </div>
                  <div class="tech-col-body">
                    <p class="tech-col-desc">{t.desc}</p>
                    <div class="tech-col-best">
                      <span class="tech-col-label">✓ เหมาะกับ:</span>
                      <span class="tech-col-value">{t.best}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}

        {data.realPortfolio && (
          <>
            <div class="section-header reveal" style="margin-top: 80px;">
              <span class="section-badge">ผลงานจริง</span>
              <h2 class="section-title">เว็บไซต์ที่<span class="highlight">ใช้งานจริง</span></h2>
              <p class="section-desc">เว็บที่เราทำ ยังใช้งานอยู่ทุกวัน — คลิกเข้าไปดูได้เลย</p>
            </div>

            <div class="portfolio-grid-2x2">
              {data.realPortfolio.map((p: any) => (
                <a href={p.url} target="_blank" rel="noopener" class="portfolio-card-grid">
                  <div class="portfolio-card-top">
                    <span class="portfolio-card-badge">✓ ใช้งานจริง</span>
                    <span class="portfolio-card-arrow">→</span>
                  </div>
                  <h3 class="portfolio-card-name">{p.name}</h3>
                  <p class="portfolio-card-industry">{p.industry}</p>
                  <p class="portfolio-card-highlight">{p.highlight}</p>
                </a>
              ))}
            </div>
          </>
        )}
      </div>
    </section>
  )}

  <!-- SECTION 4: PRICING (3-tier) -->
  {data.pricing && (
    <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;">
        <div class="section-header reveal">
          <span class="section-badge">ราคา</span>
          <h2 class="section-title">ราคาค่า<span class="highlight">บริการ</span></h2>
          <p class="section-desc">เลือกแพ็คเกจที่ตรงกับความต้องการ — จ่ายเท่าที่ใช้</p>
        </div>

        <div class="pricing-tiers">
          <div class="pricing-tier pricing-tier-basic">
            <div class="pricing-tier-header">
              <span class="pricing-tier-badge">เริ่มต้น</span>
              <h3 class="pricing-tier-name">Landing Page</h3>
              <p class="pricing-tier-desc">หน้าเดียวจบ เหมาะทดสอบตลาด</p>
            </div>
            <div class="pricing-tier-price">
              <span class="pricing-tier-currency">฿</span>
              <span class="pricing-tier-amount">5,000</span>
              <span class="pricing-tier-period">/ เริ่มต้น</span>
            </div>
            <ul class="pricing-tier-features">
              <li>✓ เว็บ 1 หน้า</li>
              <li>✓ Responsive ทุกหน้าจอ</li>
              <li>✓ SSL + Domain .com 1 ปี</li>
              <li>✓ แก้ไขเองได้</li>
              <li>✗ ระบบหลังบ้าน</li>
            </ul>
            <a href="/contact" class="pricing-tier-cta">เริ่มต้น</a>
          </div>

          <div class="pricing-tier pricing-tier-standard">
            <div class="pricing-tier-recommended">⭐ แนะนำ</div>
            <div class="pricing-tier-header">
              <span class="pricing-tier-badge">มาตรฐาน</span>
              <h3 class="pricing-tier-name">Website Astro</h3>
              <p class="pricing-tier-desc">เว็บบริษัท เน้น SEO + AI</p>
            </div>
            <div class="pricing-tier-price">
              <span class="pricing-tier-currency">฿</span>
              <span class="pricing-tier-amount">10,000</span>
              <span class="pricing-tier-period">/ เริ่มต้น</span>
            </div>
            <ul class="pricing-tier-features">
              <li>✓ เว็บ 5-15 หน้า</li>
              <li>✓ SEO + GEO (ติด ChatGPT)</li>
              <li>✓ AI ช่วยสร้างเนื้อหา</li>
              <li>✓ Server + SSL + Domain 1 ปี</li>
              <li>✓ แก้ไขเองได้ + AI ช่วย</li>
            </ul>
            <a href="/contact" class="pricing-tier-cta pricing-tier-cta-primary">เลือกแพ็คเกจนี้</a>
          </div>

          <div class="pricing-tier pricing-tier-pro">
            <div class="pricing-tier-header">
              <span class="pricing-tier-badge">ขั้นสูง</span>
              <h3 class="pricing-tier-name">Website WordPress</h3>
              <p class="pricing-tier-desc">E-commerce + Plugin ครบ</p>
            </div>
            <div class="pricing-tier-price">
              <span class="pricing-tier-currency">฿</span>
              <span class="pricing-tier-amount">15,000</span>
              <span class="pricing-tier-period">/ เริ่มต้น</span>
            </div>
            <ul class="pricing-tier-features">
              <li>✓ เว็บไม่จำกัดหน้า</li>
              <li>✓ E-commerce + ตะกร้า + ชำระเงิน</li>
              <li>✓ Plugin ตามต้องการ</li>
              <li>✓ Server + SSL + Domain 1 ปี</li>
              <li>✓ แก้ไขเองได้ + อบรม</li>
            </ul>
            <a href="/contact" class="pricing-tier-cta">เริ่มต้น</a>
          </div>
        </div>

        <div class="pricing-extras">
          <h4 class="pricing-extras-title">ค่าใช้จ่ายเพิ่มเติม (รายปี)</h4>
          <div class="pricing-extras-list">
            <div class="pricing-extra">
              <span class="pricing-extra-name">Server Hosting</span>
              <span class="pricing-extra-price">฿5,000 / ปี</span>
            </div>
            <div class="pricing-extra">
              <span class="pricing-extra-name">Domain .com / .co.th</span>
              <span class="pricing-extra-price">฿500 / ปี</span>
            </div>
            <div class="pricing-extra">
              <span class="pricing-extra-name">Maintenance (optional)</span>
              <span class="pricing-extra-price">฿1,500 / เดือน</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )}

  <!-- 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>
        <h2 class="section-title">คำถาม<span class="highlight">ที่พบบ่อย</span></h2>
        <p class="section-desc">รวมคำถามที่ลูกค้าถามบ่อยที่สุด — คลิกเพื่อดูคำตอบ</p>
      </div>

      <div class="faq-accordion">
        {data.faqs.map((faq: any, i: number) => (
          <details class="faq-item" name="webdev-faq">
            <summary class="faq-summary">
              <span class="faq-q-num">Q{i + 1}</span>
              <span class="faq-q-text">{faq.q}</span>
              <span class="faq-icon">+</span>
            </summary>
            <div class="faq-answer">
              <p>{faq.a}</p>
            </div>
          </details>
        ))}
      </div>

      <div class="mdx-section">
        <div class="section-header reveal" style="margin-top: 64px;">
          <span class="section-badge">รายละเอียดเพิ่มเติม</span>
          <h2 class="section-title">เนื้อหา<span class="highlight">จากเอกสารบริการ</span></h2>
        </div>
        <div class="mdx-content-card">
          <Content />
        </div>
      </div>
    </div>
  </section>

  <!-- FINAL CTA -->
  <section class="section section-yellow cta-section">
    <div class="container">
      <div class="cta-content reveal">
        <h2 class="cta-title">ต้องการ{data.titleAccent}?</h2>
        <p class="cta-desc">ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้าง{data.title}ที่ตอบโจทย์ธุรกิจ</p>
        <div class="cta-actions">
          <a href="tel:0809955945" class="btn btn-dark btn-lg">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
              <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
            </svg>
            080-995-5945
          </a>
          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark btn-lg">สอบถามราคา</a>
        </div>
      </div>
    </div>
  </section>

  <Footer />
</Base>

<style>
  /* Section wrappers */
  .section-bento {
    position: relative;
    overflow: hidden;
  }
  .section-soft { background: var(--color-bg-alt); }
  .section-yellow { background: var(--color-primary); }

  /* HERO */
  .service-hero {
    background: var(--color-white);
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
  }
  .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .hero-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
  }
  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900;
    line-height: 1.3;
    color: var(--color-black);
    margin-bottom: 20px;
  }
  .hero-line { display: block; }
  .hero-accent { color: var(--color-primary-dark); }
  .hero-desc {
    font-size: 18px;
    color: var(--color-gray-700);
    margin-bottom: 32px;
    line-height: 1.7;
  }
  .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  .hero-actions .btn svg { width: 18px; height: 18px; }
  .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--color-gray-700);
  }
  .trust-item { font-weight: 600; }

  /* Hero feature list (inside yellow tile) — uses numeral index, no icons */
  .hero-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hero-feature-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
  }
  .hero-feature-item + .hero-feature-item { border-top: 1px solid rgba(0, 0, 0, 0.1); }
  .hero-feature-index {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 2px solid var(--color-black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 900;
    color: var(--color-black);
    letter-spacing: -0.5px;
  }
  .hero-feature-content { display: flex; flex-direction: column; }
  .hero-feature-title { font-size: 15px; font-weight: 700; color: var(--color-black); }
  .hero-feature-desc { font-size: 13px; color: rgba(0, 0, 0, 0.7); }

  /* Section header */
  .section-header { text-align: center; margin-bottom: 48px; }
  .section-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    color: var(--color-black);
    line-height: 1.2;
  }
  .section-title .highlight { color: var(--color-primary-dark); }
  .section-desc { font-size: 16px; color: var(--color-gray-600); margin-top: 8px; }

  /* Inline meta paragraphs inside tiles */
  .tile-meta {
    font-size: 14px;
    color: var(--color-gray-600);
  }
  .tile-meta-strong {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 700;
  }
  .tile-meta-dark {
    font-size: 14px;
    opacity: 0.7;
  }

  /* Inline FAQ (single answer per tile) */
  .faq-answer-inline p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-gray-700);
  }
  .surface-yellow .faq-answer-inline p { color: rgba(0, 0, 0, 0.85); }
  .surface-purple .faq-answer-inline p,
  .surface-teal .faq-answer-inline p,
  .surface-coral .faq-answer-inline p,
  .surface-dark .faq-answer-inline p { color: rgba(255, 255, 255, 0.95); }

  /* MDX content wrapper */
  .mdx-content { font-size: 16px; line-height: 1.7; color: var(--color-gray-700); }
  .mdx-content :global(h2) { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 24px 0 12px; color: var(--color-black); }
  .mdx-content :global(h3) { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--color-black); }
  .mdx-content :global(p) { margin-bottom: 12px; }
  .mdx-content :global(ul) { padding-left: 20px; margin-bottom: 12px; }
  .mdx-content :global(li) { margin-bottom: 4px; }
  .mdx-content :global(strong) { color: var(--color-black); }

  /* MDX card (new) */
  .mdx-content-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 40px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-700);
  }
  .mdx-content-card :global(h2) { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin: 24px 0 12px; color: var(--color-black); }
  .mdx-content-card :global(h3) { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--color-black); }
  .mdx-content-card :global(p) { margin-bottom: 12px; }
  .mdx-content-card :global(ul) { padding-left: 20px; margin-bottom: 12px; }
  .mdx-content-card :global(li) { margin-bottom: 4px; }
  .mdx-content-card :global(strong) { color: var(--color-black); }

  /* Hero trust grid (right column) */
  .hero-trust-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-gray-600);
    margin-bottom: 20px;
  }
  .hero-trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-trust-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s var(--ease-out-expo);
  }
  .hero-trust-card:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
  }
  .hero-trust-num {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    flex-shrink: 0;
  }
  .hero-trust-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 4px;
  }
  .hero-trust-desc {
    font-size: 14px;
    color: var(--color-gray-600);
    line-height: 1.5;
  }

  /* Service bullets inside bento tiles */
  .service-bullets {
    list-style: none;
    padding: 0;
    margin-top: 8px;
  }
  .service-bullets li {
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: inherit;
  }
  .service-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: currentColor;
    font-weight: 800;
    opacity: 0.7;
  }

  /* Tile CTA link (used in real portfolio tiles) */
  .tile-cta-link {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 16px;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s var(--ease-out-expo);
  }
  .tile-cta-link:hover {
    background: var(--color-primary);
    color: var(--color-black);
    transform: translateX(4px);
  }

  /* Tile body detail (highlighted text in portfolio tile) */
  .tile-body-detail {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-gray-700);
    margin: 8px 0;
  }

  /* ============================================
     SERVICE STACK (vertical card list)
     ============================================ */
  .service-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
  }
  .service-stack-item {
    display: grid;
    grid-template-columns: 60px 60px 1fr;
    gap: 24px;
    align-items: flex-start;
    padding: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    transition: all 0.3s var(--ease-out-expo);
  }
  .service-stack-item:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  }
  .service-stack-num {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
  }
  .service-stack-icon {
    width: 60px;
    height: 60px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
  }
  .service-stack-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 12px;
  }
  .service-stack-bullets {
    list-style: none;
    padding: 0;
  }
  .service-stack-bullets li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 6px;
    color: var(--color-gray-700);
  }
  .service-stack-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: 800;
  }

  /* ============================================
     TECH COMPARISON (2-column table)
     ============================================ */
  .tech-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .tech-col {
    padding: 40px;
    border-right: 1px solid var(--color-gray-200);
  }
  .tech-col:last-child {
    border-right: none;
  }
  .tech-col-a {
    background: var(--color-primary);
    background: rgba(254, 212, 0, 0.08);
  }
  .tech-col-wp {
    background: var(--color-bg-soft);
  }
  .tech-col-header {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-gray-200);
  }
  .tech-col-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
  }
  .tech-col-name {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--color-black);
    margin-bottom: 8px;
  }
  .tech-col-duration {
    font-size: 14px;
    color: var(--color-gray-600);
    font-weight: 600;
  }
  .tech-col-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-gray-700);
    margin-bottom: 20px;
  }
  .tech-col-best {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-primary);
    background: rgba(254, 212, 0, 0.15);
    border-radius: var(--radius-md);
  }
  .tech-col-wp .tech-col-best {
    background: rgba(13, 148, 136, 0.1);
  }
  .tech-col-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-black);
    flex-shrink: 0;
  }
  .tech-col-value {
    font-size: 14px;
    color: var(--color-gray-700);
    line-height: 1.5;
  }

  /* ============================================
     PORTFOLIO GRID 2x2
     ============================================ */
  .portfolio-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .portfolio-card-grid {
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s var(--ease-out-expo);
    min-height: 200px;
  }
  .portfolio-card-grid:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  }
  .portfolio-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  .portfolio-card-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-primary);
    color: var(--color-black);
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .portfolio-card-arrow {
    font-size: 24px;
    color: var(--color-black);
    transition: transform 0.2s;
  }
  .portfolio-card-grid:hover .portfolio-card-arrow {
    transform: translateX(4px);
  }
  .portfolio-card-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 4px;
  }
  .portfolio-card-industry {
    font-size: 13px;
    color: var(--color-gray-600);
    margin-bottom: 12px;
  }
  .portfolio-card-highlight {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-gray-700);
  }

  /* ============================================
     PRICING 3-TIER
     ============================================ */
  .pricing-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .pricing-tier {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    transition: all 0.3s var(--ease-out-expo);
  }
  .pricing-tier:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  }
  .pricing-tier-standard {
    border-color: var(--color-primary);
    border-width: 2px;
    transform: scale(1.04);
  }
  .pricing-tier-standard:hover {
    transform: scale(1.04) translateY(-4px);
  }
  .pricing-tier-recommended {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-black);
    color: var(--color-white);
    padding: 4px 16px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
  }
  .pricing-tier-header {
    text-align: center;
    margin-bottom: 24px;
  }
  .pricing-tier-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-bg-soft);
    color: var(--color-gray-600);
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
  }
  .pricing-tier-standard .pricing-tier-badge {
    background: var(--color-primary);
    color: var(--color-black);
  }
  .pricing-tier-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    color: var(--color-black);
    margin-bottom: 4px;
  }
  .pricing-tier-desc {
    font-size: 14px;
    color: var(--color-gray-600);
  }
  .pricing-tier-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 24px 0;
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 24px;
  }
  .pricing-tier-currency {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
  }
  .pricing-tier-amount {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 900;
    color: var(--color-black);
    line-height: 1;
  }
  .pricing-tier-period {
    font-size: 14px;
    color: var(--color-gray-600);
  }
  .pricing-tier-features {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
  }
  .pricing-tier-features li {
    padding: 8px 0;
    font-size: 15px;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);
  }
  .pricing-tier-features li:last-child {
    border-bottom: none;
  }
  .pricing-tier-cta {
    display: block;
    text-align: center;
    padding: 12px 24px;
    background: var(--color-white);
    color: var(--color-black);
    border: 1.5px solid var(--color-black);
    border-radius: var(--radius-full);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
  }
  .pricing-tier-cta:hover {
    background: var(--color-black);
    color: var(--color-white);
  }
  .pricing-tier-cta-primary {
    background: var(--color-primary);
    color: var(--color-black);
    border-color: var(--color-primary);
  }
  .pricing-tier-cta-primary:hover {
    background: var(--color-black);
    color: var(--color-primary);
    border-color: var(--color-black);
  }

  /* Pricing extras (small list) */
  .pricing-extras {
    max-width: 700px;
    margin: 60px auto 0;
    padding: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
  }
  .pricing-extras-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 16px;
    text-align: center;
  }
  .pricing-extras-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pricing-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-gray-100);
  }
  .pricing-extra:last-child {
    border-bottom: none;
  }
  .pricing-extra-name {
    font-size: 15px;
    color: var(--color-gray-700);
  }
  .pricing-extra-price {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-black);
  }

  /* ============================================
     FAQ ACCORDION
     ============================================ */
  .faq-accordion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
  }
  .faq-item[open] {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(254, 212, 0, 0.15);
  }
  .faq-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .faq-summary::-webkit-details-marker {
    display: none;
  }
  .faq-q-num {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
    background: var(--color-black);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }
  .faq-q-text {
    flex: 1;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
  }
  .faq-icon {
    font-size: 28px;
    font-weight: 300;
    color: var(--color-gray-600);
    flex-shrink: 0;
    transition: transform 0.2s;
    line-height: 1;
  }
  .faq-item[open] .faq-icon {
    transform: rotate(45deg);
    color: var(--color-primary);
  }
  .faq-answer {
    padding: 0 24px 24px 56px;
  }
  .faq-answer p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-gray-700);
  }

  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .tech-comparison { grid-template-columns: 1fr; }
    .tech-col { border-right: none; border-bottom: 1px solid var(--color-gray-200); }
    .tech-col:last-child { border-bottom: none; }
    .portfolio-grid-2x2 { grid-template-columns: 1fr; }
    .pricing-tiers { grid-template-columns: 1fr; max-width: 480px; }
    .pricing-tier-standard { transform: none; }
    .pricing-tier-standard:hover { transform: translateY(-4px); }
  }
  @media (max-width: 640px) {
    .service-stack-item { grid-template-columns: 1fr; gap: 16px; }
    .service-stack-num { font-size: 28px; }
    .hero-actions, .cta-actions { flex-direction: column; }
    .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
    .faq-summary { padding: 16px; gap: 12px; }
    .faq-q-text { font-size: 16px; }
    .faq-answer { padding: 0 16px 16px 16px; }
  }

  /* CTA */
  .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
  .cta-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: var(--color-black); margin-bottom: 16px; }
  .cta-desc { font-size: 18px; color: rgba(0, 0, 0, 0.7); margin-bottom: 32px; }
  .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .cta-actions .btn svg { display: inline-block; vertical-align: middle; margin-right: 6px; }

  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  }
  @media (max-width: 640px) {
    .hero-actions, .cta-actions { flex-direction: column; }
    .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
  }
</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>
