feat: oversized H1 hero for all inner pages + portfolio refinements

- Add hero-oversized class (Option B) to global.css
- Apply oversized H1 to: about, services, blog, contact, faq, privacy, terms
- Portfolio page: oversized hero, new text, portfolio-design-note in section-heading
- Clean up duplicate styles from portfolio.astro scoped block

src/pages/about.astro

@@ -7,16 +7,12 @@ import { process } from '../data/site.js';
   title="เกี่ยวกับเรา | MoreminiMore"
   description="รู้จัก MoreminiMore ที่ปรึกษาเว็บไซต์ การตลาด และ AI สำหรับ SME ที่เริ่มจากข้อมูลจริงก่อนเลือกสิ่งที่ควรทำ"
 >
-  <section class="page-hero scene scene-light" data-scene="light">
-    <div class="page-hero-grid">
-      <div>
-        <p class="eyebrow">เกี่ยวกับเรา</p>
-        <h1>ที่ปรึกษาที่เริ่มจากคำถาม ไม่ใช่เริ่มจากขายแพ็กเกจ</h1>
-      </div>
-      <p class="hero-lead">
-        MoreminiMore ทำงานกับ SME ที่อยากใช้เว็บ การตลาด ระบบอัตโนมัติ และ AI ให้คุ้มขึ้น โดยดูข้อมูลและบริบทของธุรกิจก่อนตัดสินใจลงมือ
-      </p>
-    </div>
+  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
+    <p class="eyebrow">เกี่ยวกับเรา</p>
+    <h1>ที่ปรึกษาที่เริ่มจากคำถาม ไม่ใช่เริ่มจากขายแพ็กเกจ</h1>
+    <p class="hero-lead">
+      MoreminiMore ทำงานกับ SME ที่อยากใช้เว็บ การตลาด ระบบอัตโนมัติ และ AI ให้คุ้มขึ้น โดยดูข้อมูลและบริบทของธุรกิจก่อนตัดสินใจลงมือ
+    </p>
   </section>
 
   <section class="page-section">

src/pages/blog.astro

@@ -12,16 +12,12 @@ const posts = (await getCollection('blog', ({ data }) => !data.draft)).sort(
   title="บทความ | MoreminiMore"
   description="บทความจาก MoreminiMore เกี่ยวกับเว็บไซต์ การตลาดออนไลน์ ระบบอัตโนมัติ และ AI สำหรับ SME"
 >
-  <section class="page-hero scene scene-light" data-scene="light">
-    <div class="page-hero-grid">
-      <div>
-        <p class="eyebrow">บทความ</p>
-        <h1>บทความสำหรับธุรกิจที่อยากตัดสินใจจากข้อมูล</h1>
-      </div>
-      <p class="hero-lead">
-        รวมมุมมองเรื่องเว็บ การตลาด ระบบอัตโนมัติ และ AI แบบที่เน้นใช้งานจริงในธุรกิจ ไม่ใช่แค่ตามกระแส
-      </p>
-    </div>
+  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
+    <p class="eyebrow">บทความ</p>
+    <h1>บทความสำหรับธุรกิจที่อยากตัดสินใจจากข้อมูล</h1>
+    <p class="hero-lead">
+      รวมมุมมองเรื่องเว็บ การตลาด ระบบอัตโนมัติ และ AI แบบที่เน้นใช้งานจริงในธุรกิจ ไม่ใช่แค่ตามกระแส
+    </p>
   </section>
 
 	  <section class="page-section">

src/pages/contact.astro

@@ -7,16 +7,12 @@ import { problems } from '../data/site.js';
   title="ติดต่อ | MoreminiMore"
   description="ติดต่อ MoreminiMore เพื่อส่งโจทย์เว็บไซต์ การตลาด ระบบอัตโนมัติ หรือ AI ให้เราช่วยดูว่าควรเริ่มตรงไหน"
 >
-  <section class="page-hero scene scene-light" data-scene="light">
-    <div class="page-hero-grid">
-      <div>
-        <p class="eyebrow">ติดต่อ</p>
-        <h1>ส่งโจทย์ให้เราดู แล้วค่อยตัดสินใจว่าจะทำอะไร</h1>
-      </div>
-      <p class="hero-lead">
-        ไม่ต้องเตรียม brief สมบูรณ์ แค่เล่าว่าตอนนี้ธุรกิจติดตรงไหน เราจะช่วยดูว่าควรถามอะไรต่อและควรเริ่มจากจุดไหน
-      </p>
-    </div>
+  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
+    <p class="eyebrow">ติดต่อ</p>
+    <h1>ส่งโจทย์ให้เราดู แล้วค่อยตัดสินใจว่าจะทำอะไร</h1>
+    <p class="hero-lead">
+      ไม่ต้องเตรียม brief สมบูรณ์ แค่เล่าว่าตอนนี้ธุรกิจติดตรงไหน เราจะช่วยดูว่าควรถามอะไรต่อและควรเริ่มจากจุดไหน
+    </p>
   </section>
 
   <section class="page-section contact-layout">

src/pages/faq.astro

@@ -7,16 +7,12 @@ import { faqs } from '../data/site.js';
   title="คำถามที่พบบ่อย | MoreminiMore"
   description="คำถามที่พบบ่อยเกี่ยวกับบริการ เว็บไซต์ การตลาด ระบบอัตโนมัติ AI ราคา และวิธีทำงานของ MoreminiMore"
 >
-  <section class="page-hero scene scene-light" data-scene="light">
-    <div class="page-hero-grid">
-      <div>
-        <p class="eyebrow">คำถามที่พบบ่อย</p>
-        <h1>คำถามที่ควรถามก่อนเริ่มทำอะไรเพิ่ม</h1>
-      </div>
-      <p class="hero-lead">
-        ถ้ายังไม่แน่ใจว่าควรทำเว็บ ยิงแอด วางระบบ หรือใช้ AI ก่อน คำตอบเหล่านี้จะช่วยให้เห็นภาพเบื้องต้น
-      </p>
-    </div>
+  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
+    <p class="eyebrow">คำถามที่พบบ่อย</p>
+    <h1>คำถามที่ควรถามก่อนเริ่มทำอะไรเพิ่ม</h1>
+    <p class="hero-lead">
+      ถ้ายังไม่แน่ใจว่าควรทำเว็บ ยิงแอด วางระบบ หรือใช้ AI ก่อน คำตอบเหล่านี้จะช่วยให้เห็นภาพเบื้องต้น
+    </p>
   </section>
 
   <section class="page-section">

src/pages/portfolio.astro

@@ -7,22 +7,19 @@ import { portfolio } from '../data/site.js';
   title="ผลงาน | MoreminiMore"
   description="ผลงานเว็บไซต์และเคสธุรกิจจริงของ MoreminiMore สำหรับ SME ที่ต้องการตัดสินใจจากงานจริง"
 >
-  <section class="page-hero scene scene-light" data-scene="light">
-    <div class="page-hero-grid">
-      <div>
-        <p class="eyebrow">ผลงาน</p>
-        <h1>ผลงานจริงที่เปิดดูเว็บจริงได้</h1>
-      </div>
-      <p class="hero-lead">
-        เราเลือกโชว์งานที่ช่วยเล่าโจทย์ธุรกิจ ไม่ใช่แค่ภาพสวย เพราะงานที่ดีควรช่วยให้ลูกค้าตัดสินใจง่ายขึ้น
-      </p>
-    </div>
+  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
+    <p class="eyebrow">ผลงาน</p>
+    <h1>ผลงานจริงของเรา</h1>
+    <p class="hero-lead">
+      ผลงานที่แสดงเป็นส่วนที่เปิดเผยได้ — บางโปรเจกต์มีข้อมูลลับของลูกค้า จึงไม่สามารถนำมาโชว์ได้
+    </p>
   </section>
 
   <section class="portfolio-section scene scene-light portfolio-page" data-scene="light">
     <div class="section-heading">
       <p class="eyebrow">ผลงานทั้งหมด</p>
-      <h2>เว็บที่มีโจทย์ต่างกัน จึงต้องออกแบบต่างกัน</h2>
+      <h2>ผลงานเน้นการตอบโจทย์ธุรกิจ</h2>
+      <p class="portfolio-design-note">เราออกแบบตามวัตถุประสงค์ของลูกค้า ไม่ใช่แค่ความสวยหรือเทคโนโลยี — เพราะกลุ่มเป้าหมายต่างกัน ประสบการณ์ที่ดีสำคัญกว่าเทคนิคที่หวือหวา</p>
     </div>
     <div class="portfolio-grid">
       {portfolio.map((item) => (
@@ -47,6 +44,14 @@ import { portfolio } from '../data/site.js';
     color: var(--ink);
   }
 
+  .portfolio-hero-lead {
+    max-width: 52ch;
+    margin: 16px auto 0;
+    color: var(--muted);
+    font-size: 1.1rem;
+    line-height: 1.6;
+  }
+
   .portfolio-page .eyebrow {
     color: var(--muted);
     border-color: rgb(19 18 13 / .10);
@@ -61,6 +66,14 @@ import { portfolio } from '../data/site.js';
     color: var(--ink);
   }
 
+  .section-heading .portfolio-design-note {
+    grid-column: 2;
+    margin: 6px 0 0;
+    color: var(--muted);
+    font-size: 1.05rem;
+    line-height: 1.6;
+  }
+
   .portfolio-page .portfolio-card,
   .portfolio-page .portfolio-card.featured {
     grid-column: span 4;

src/pages/privacy.astro

@@ -7,16 +7,12 @@ import LegalPageShell from '../components/LegalPageShell.astro';
   title="นโยบายความเป็นส่วนตัว | MoreminiMore"
   description="นโยบายความเป็นส่วนตัวของ MoreminiMore — อธิบายข้อมูลที่เราเก็บ วิธีใช้ และสิทธิของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562"
 >
-  <section class="page-hero scene scene-light" data-scene="light">
-    <div class="page-hero-grid">
-      <div>
-        <p class="eyebrow">นโยบาย</p>
-        <h1>นโยบายความเป็นส่วนตัว</h1>
-      </div>
-      <p class="hero-lead">
-        เราให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน หน้านี้อธิบายข้อมูลที่เราเก็บ วิธีใช้ และสิทธิของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562
-      </p>
-    </div>
+  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
+    <p class="eyebrow">นโยบาย</p>
+    <h1>นโยบายความเป็นส่วนตัว</h1>
+    <p class="hero-lead">
+      เราให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน หน้านี้อธิบายข้อมูลที่เราเก็บ วิธีใช้ และสิทธิของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562
+    </p>
   </section>
 
   <section class="page-section legal-section">

src/pages/services.astro

@@ -7,16 +7,12 @@ import { services, process } from '../data/site.js';
   title="บริการ | MoreminiMore"
   description="บริการของ MoreminiMore สำหรับ SME ที่ต้องการทำเว็บ การตลาด ระบบอัตโนมัติ และ AI โดยเริ่มจากข้อมูลจริงก่อนเลือกวิธีทำ"
 >
-  <section class="page-hero scene scene-light" data-scene="light">
-    <div class="page-hero-grid">
-      <div>
-        <p class="eyebrow">บริการ</p>
-        <h1>เลือกบริการจากปัญหา ไม่ใช่จากชื่อแพ็กเกจ</h1>
-      </div>
-      <p class="hero-lead">
-        เราช่วยดูโจทย์ธุรกิจก่อน แล้วเลือกว่าควรเริ่มจากเว็บ การตลาด ระบบทำงาน หรือ AI จุดไหนคุ้มที่สุดสำหรับตอนนี้
-      </p>
-    </div>
+  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
+    <p class="eyebrow">บริการ</p>
+    <h1>เลือกบริการจากปัญหา ไม่ใช่จากชื่อแพ็กเกจ</h1>
+    <p class="hero-lead">
+      เราช่วยดูโจทย์ธุรกิจก่อน แล้วเลือกว่าควรเริ่มจากเว็บ การตลาด ระบบทำงาน หรือ AI จุดไหนคุ้มที่สุดสำหรับตอนนี้
+    </p>
   </section>
 
   <section class="page-section">

src/pages/terms.astro

@@ -7,16 +7,12 @@ import LegalPageShell from '../components/LegalPageShell.astro';
   title="เงื่อนไขการใช้งาน | MoreminiMore"
   description="เงื่อนไขการใช้งานเว็บไซต์ MoreminiMore — การยอมรับเงื่อนไข ทรัพย์สินทางปัญญา ข้อห้าม และข้อจำกัดความรับผิด"
 >
-  <section class="page-hero scene scene-light" data-scene="light">
-    <div class="page-hero-grid">
-      <div>
-        <p class="eyebrow">เงื่อนไข</p>
-        <h1>เงื่อนไขการใช้งาน</h1>
-      </div>
-      <p class="hero-lead">
-        การเข้าใช้งานเว็บไซต์นี้ถือว่าท่านยอมรับเงื่อนไขด้านล่าง กรุณาอ่านก่อนใช้งานหรือส่งข้อมูลผ่านเว็บไซต์
-      </p>
-    </div>
+  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
+    <p class="eyebrow">เงื่อนไข</p>
+    <h1>เงื่อนไขการใช้งาน</h1>
+    <p class="hero-lead">
+      การเข้าใช้งานเว็บไซต์นี้ถือว่าท่านยอมรับเงื่อนไขด้านล่าง กรุณาอ่านก่อนใช้งานหรือส่งข้อมูลผ่านเว็บไซต์
+    </p>
   </section>
 
   <section class="page-section legal-section">

src/styles/global.css

@@ -402,6 +402,34 @@ font-size: clamp(3rem, 6vw, 6rem);
 font-weight: 900;
 }
 
+/* ── Oversized Hero (Option B) ── */
+.hero-oversized {
+  display: flex;
+  flex-direction: column;
+  width: var(--container);
+  margin-inline: auto;
+  padding: clamp(108px, 16vw, 180px) 0 clamp(56px, 8vw, 96px);
+}
+
+.hero-oversized h1 {
+  max-width: 14ch;
+  margin: clamp(12px, 2vw, 24px) 0 0;
+  font-size: clamp(3.2rem, 8vw, 6.8rem);
+  font-weight: 950;
+  line-height: .92;
+  letter-spacing: -.02em;
+}
+
+.hero-oversized .hero-lead {
+  max-width: 56ch;
+  margin: clamp(20px, 3vw, 32px) 0 0;
+  padding: clamp(14px, 2vw, 22px) 0 0;
+  border-top: 3px solid var(--yellow);
+  color: var(--muted);
+  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
+  line-height: 1.7;
+}
+
 .page-section {
 padding: clamp(54px, 8vw, 104px) 0;
 }