refactor(services/webdev): 5 different layout patterns (no more BentoGrid)

Before: all 5 sections used BentoGrid + BentoTile — repetitive look

After: 5 distinct layouts:
  1. Hero: 2-column grid (text + 4 why-us cards stacked)
  2. Services: vertical card stack (4 items, icon+num+bullets)
  3. Tech options: 2-column comparison table (Astro vs WordPress)
  3b. Portfolio: 2x2 card grid (4 real client sites, hover effect)
  4. Pricing: 3-tier card layout (Landing/Astro/WP) + extras list
  5. FAQ: accordion (native details/summary) + MDX content card

New CSS classes added:
- .service-stack-item, .service-stack-num, .service-stack-bullets
- .tech-comparison, .tech-col, .tech-col-header
- .portfolio-grid-2x2, .portfolio-card-grid
- .pricing-tiers, .pricing-tier, .pricing-tier-recommended
- .faq-accordion, .faq-item, .faq-summary, .faq-icon

Imports fixed: added Icon from Icon.astro (was missing → Astro error)

src/pages/services/[slug].astro

@@ -5,6 +5,7 @@ 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() {
@@ -239,7 +240,7 @@ const featureList = data.features || data.services || [];
     </div>
   </section>
 
-  <!-- SECTION 2: SERVICES (with bullets) -->
+  <!-- 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" />
@@ -253,20 +254,27 @@ const featureList = data.features || data.services || [];
           <p class="section-desc">ครบทุกฟีเจอร์ที่เว็บสมัยใหม่ต้องมี — ไม่ต้องจ้างเพิ่มทีหลัง</p>
         </div>
 
-        <BentoGrid>
+        <div class="service-stack">
-          {data.services.map((s: any) => (
+          {data.services.map((s: any, idx: number) => (
-            <BentoTile span={s.span} surface={s.surface} eyebrow={s.icon} title={s.title}>
+            <div class="service-stack-item" data-surface={s.surface}>
-              <ul class="service-bullets">
+              <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>
-            </BentoTile>
+              </div>
+            </div>
           ))}
-        </BentoGrid>
+        </div>
       </div>
     </section>
   )}
 
-  <!-- SECTION 3: REAL PORTFOLIO + TECH OPTIONS -->
+  <!-- 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" />
@@ -280,15 +288,25 @@ const featureList = data.features || data.services || [];
               <h2 class="section-title">เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span></h2>
               <p class="section-desc">แนะนำให้เลือกตามลักษณะธุรกิจ ไม่ใช่เลือกของแพง</p>
             </div>
-            <BentoGrid>
+
+            <div class="tech-comparison">
               {data.techOptions.map((t: any) => (
-                <BentoTile span={6} surface={t.surface} eyebrow={t.badge} title={t.name}>
+                <div class={`tech-col tech-col-${t.badge.toLowerCase()}`}>
-                  <p>{t.desc}</p>
+                  <div class="tech-col-header">
-                  <p class="tile-meta-strong">{t.duration}</p>
+                    <span class="tech-col-badge">{t.badge}</span>
-                  <p class="tile-meta">✓ เหมาะกับ: {t.best}</p>
+                    <h3 class="tech-col-name">{t.name}</h3>
-                </BentoTile>
+                    <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>
               ))}
-            </BentoGrid>
+            </div>
           </>
         )}
 
@@ -299,22 +317,27 @@ const featureList = data.features || data.services || [];
               <h2 class="section-title">เว็บไซต์ที่<span class="highlight">ใช้งานจริง</span></h2>
               <p class="section-desc">เว็บที่เราทำ ยังใช้งานอยู่ทุกวัน — คลิกเข้าไปดูได้เลย</p>
             </div>
-            <BentoGrid>
+
+            <div class="portfolio-grid-2x2">
               {data.realPortfolio.map((p: any) => (
-                <BentoTile span={6} surface="white" eyebrow="✓ ใช้งานจริง" title={p.name}>
+                <a href={p.url} target="_blank" rel="noopener" class="portfolio-card-grid">
-                  <p class="tile-meta">{p.industry}</p>
+                  <div class="portfolio-card-top">
-                  <p class="tile-body-detail">{p.highlight}</p>
+                    <span class="portfolio-card-badge">✓ ใช้งานจริง</span>
-                  <a href={p.url} target="_blank" rel="noopener" class="tile-cta-link">เยี่ยมชมเว็บไซต์ →</a>
+                    <span class="portfolio-card-arrow">→</span>
-                </BentoTile>
+                  </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>
               ))}
-            </BentoGrid>
+            </div>
           </>
         )}
       </div>
     </section>
   )}
 
-  <!-- SECTION 4: PRICING (with bestFor context) -->
+  <!-- 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" />
@@ -323,16 +346,92 @@ const featureList = data.features || data.services || [];
         <div class="section-header reveal">
           <span class="section-badge">ราคา</span>
           <h2 class="section-title">ราคาค่า<span class="highlight">บริการ</span></h2>
-          <p class="section-desc">ชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น</p>
+          <p class="section-desc">เลือกแพ็คเกจที่ตรงกับความต้องการ — จ่ายเท่าที่ใช้</p>
         </div>
 
-        <BentoGrid>
+        <div class="pricing-tiers">
-          {data.pricing.map((p: any) => (
+          <div class="pricing-tier pricing-tier-basic">
-            <BentoTile span={4} surface={p.surface} eyebrow={p.label} title={p.price}>
+            <div class="pricing-tier-header">
-              <p class="tile-meta">✓ {p.bestFor}</p>
+              <span class="pricing-tier-badge">เริ่มต้น</span>
-            </BentoTile>
+              <h3 class="pricing-tier-name">Landing Page</h3>
-          ))}
+              <p class="pricing-tier-desc">หน้าเดียวจบ เหมาะทดสอบตลาด</p>
-        </BentoGrid>
+            </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>
   )}
@@ -345,27 +444,23 @@ const featureList = data.features || data.services || [];
       <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>
+        <p class="section-desc">รวมคำถามที่ลูกค้าถามบ่อยที่สุด — คลิกเพื่อดูคำตอบ</p>
       </div>
 
-      <BentoGrid>
+      <div class="faq-accordion">
-        {data.faqs.map((faq: any, i: number) => {
+        {data.faqs.map((faq: any, i: number) => (
-          let span: 12 | 8 | 4 = 6;
+          <details class="faq-item" name="webdev-faq">
-          if (i === 0) span = 12;
+            <summary class="faq-summary">
-          else if (i % 3 === 1) span = 8;
+              <span class="faq-q-num">Q{i + 1}</span>
-          else if (i % 3 === 2) span = 4;
+              <span class="faq-q-text">{faq.q}</span>
-          else span = 6;
+              <span class="faq-icon">+</span>
-          const surfaces = ['yellow', 'soft', 'purple-soft', 'mint', 'teal-soft', 'soft'] as const;
+            </summary>
-          const surface = surfaces[i % surfaces.length];
+            <div class="faq-answer">
-          return (
-            <BentoTile span={span} surface={surface} eyebrow={`Q${i + 1}`} title={faq.q}>
-              <div class="faq-answer-inline">
               <p>{faq.a}</p>
             </div>
-            </BentoTile>
+          </details>
-          );
+        ))}
-        })}
+      </div>
-      </BentoGrid>
 
       <div class="mdx-section">
         <div class="section-header reveal" style="margin-top: 64px;">
@@ -681,6 +776,504 @@ const featureList = data.features || data.services || [];
     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; }