feat: hero profit cluster, dark text fix, footer, privacy/terms pages

- Replace hero right panel with liquid-glass profit cluster (กำไร + Marketing/AI/Business Knowledge)
- Fix dark-on-dark text visibility in all inverted sections (scene-dark, page-section)
- Add Footer component with liquid-glass design, contact info, legal links
- Add privacy and terms placeholder pages
- Update PageShell to include Footer on all pages

src/components/Footer.astro

@@ -0,0 +1,97 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+<footer class="site-footer liquid-glass liquidGlass-wrapper">
+  <div class="liquidGlass-effect" aria-hidden="true"></div>
+  <div class="liquidGlass-tint" aria-hidden="true"></div>
+  <div class="liquidGlass-shine" aria-hidden="true"></div>
+
+  <div class="footer-row">
+    <a class="footer-brand" href="/" aria-label="MoreminiMore">
+      <img src="/images/logos/logo-long-black.png" width="160" height="28" alt="MoreminiMore" />
+    </a>
+
+    <a class="footer-link" href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener">LINE @moreminimore</a>
+    <a class="footer-link" href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
+    <span class="footer-copy">&copy; {currentYear} MoreminiMore</span>
+  </div>
+
+  <div class="footer-legal">
+    <a href="/privacy/">ความเป็นส่วนตัว</a>
+    <span aria-hidden="true">·</span>
+    <a href="/terms/">เงื่อนไขการใช้งาน</a>
+  </div>
+</footer>
+
+<style>
+  .site-footer {
+    position: relative;
+    z-index: auto;
+    margin-top: 80px;
+    padding: 18px 24px 14px;
+    color: var(--ink);
+  }
+
+  .footer-row {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    flex-wrap: wrap;
+    max-width: 1100px;
+    margin: 0 auto;
+    font-size: 0.88rem;
+  }
+
+  .footer-brand img {
+    display: block;
+  }
+
+  .footer-link {
+    color: var(--ink);
+    text-decoration: none;
+    transition: opacity .2s var(--ease);
+  }
+
+  .footer-link:hover {
+    opacity: .6;
+  }
+
+  .footer-copy {
+    color: var(--muted);
+  }
+
+  .footer-legal {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    margin-top: 8px;
+    font-size: 0.75rem;
+    color: var(--muted);
+  }
+
+  .footer-legal a {
+    color: var(--muted);
+    text-decoration: none;
+    transition: opacity .2s var(--ease);
+  }
+
+  .footer-legal a:hover {
+    opacity: .6;
+  }
+
+  @media (max-width: 640px) {
+    .footer-row {
+      gap: 12px;
+      font-size: 0.8rem;
+    }
+
+    .footer-brand img {
+      width: 130px;
+      height: auto;
+    }
+  }
+</style>

src/components/PageShell.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/global.css';
+import Footer from './Footer.astro';
 import { formEndpoint, problems, services } from '../data/site.js';
 
 const {
@@ -111,6 +112,8 @@ const {
       <slot />
     </main>
 
+    <Footer />
+
     <button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
     <div class="panel-backdrop" data-panel-backdrop data-close-lead></div>
     <aside class="lead-panel liquid-glass liquidGlass-wrapper" aria-labelledby="lead-title" aria-hidden="true" data-lead-panel data-endpoint={formEndpoint}>

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/global.css';
+import Footer from '../components/Footer.astro';
 
 const formEndpoint = '';
 
@@ -219,27 +220,49 @@ const process = [
             </div>
           </div>
 
-          <div class="hero-panel glass-panel liquid-glass liquidGlass-wrapper" data-depth-card>
-            <div class="liquidGlass-effect" aria-hidden="true"></div>
-            <div class="liquidGlass-tint" aria-hidden="true"></div>
-            <div class="liquidGlass-shine" aria-hidden="true"></div>
-            <p class="panel-kicker">Decision snapshot</p>
-            <h2>หลังคุยกัน คุณจะเห็นภาพว่าอะไรควรทำก่อน</h2>
-            <div class="decision-preview" aria-label="ตัวอย่างสรุปหลังดูโจทย์">
-              <article>
-                <span>Do first</span>
-                <strong>แก้จุดที่ทำให้ลูกค้าไม่ทัก</strong>
-              </article>
-              <article>
-                <span>Hold</span>
-                <strong>ชะลอสิ่งที่ยังวัดผลไม่ได้</strong>
-              </article>
-              <article>
-                <span>Measure</span>
-                <strong>ตั้งสัญญาณว่าควรไปต่อหรือหยุด</strong>
-              </article>
+          <div class="hero-profit-cluster" data-depth-card>
+            <!-- Center: กำไร -->
+            <div class="profit-card profit-center liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
+              <span class="profit-label">กำไร</span>
+              <span class="profit-sub">เป้าหมายของทุกธุรกิจ</span>
             </div>
-            <button class="text-link" type="button" data-open-lead>ขอให้ช่วยดูโจทย์</button>
+
+            <!-- Top: Marketing -->
+            <div class="profit-card profit-marketing liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
+              <span class="profit-tag">Marketing</span>
+              <span class="profit-desc">เพิ่มรายได้</span>
+            </div>
+
+            <!-- Bottom-left: AI -->
+            <div class="profit-card profit-ai liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
+              <span class="profit-tag">AI</span>
+              <span class="profit-desc">ลดต้นทุนและเวลา</span>
+            </div>
+
+            <!-- Bottom-right: Business Knowledge -->
+            <div class="profit-card profit-biz liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
+              <span class="profit-tag">Business Knowledge</span>
+              <span class="profit-desc">ลดความเสี่ยง</span>
+            </div>
+
+            <!-- Connector lines -->
+            <svg class="profit-connectors" viewBox="0 0 400 400" fill="none" aria-hidden="true">
+              <line x1="200" y1="200" x2="200" y2="70" stroke="var(--yellow)" stroke-width="1.5" stroke-dasharray="6 4" opacity=".45" />
+              <line x1="200" y1="200" x2="90" y2="310" stroke="var(--yellow)" stroke-width="1.5" stroke-dasharray="6 4" opacity=".45" />
+              <line x1="200" y1="200" x2="310" y2="310" stroke="var(--yellow)" stroke-width="1.5" stroke-dasharray="6 4" opacity=".45" />
+            </svg>
           </div>
         </div>
       </section>
@@ -249,9 +272,16 @@ const process = [
           <p class="eyebrow">Problem first</p>
           <h2>คุณเล่าปัญหา เราช่วยหา service ที่เหมาะสม</h2>
         </div>
-        <p>
-          เว็บนี้ไม่เริ่มจากแพ็กเกจ เพราะธุรกิจแต่ละเจอปัญหาไม่เหมือนกัน ส่งโจทย์สั้น ๆ มาได้เลย แล้วเราจะช่วยดูว่าควรเริ่มจากเว็บ แอด ระบบทำงาน หรือ AI
-        </p>
+        <div class="problem-strip-content">
+          <p>
+            เว็บนี้ไม่เริ่มจากแพ็กเกจ เพราะธุรกิจแต่ละเจอปัญหาไม่เหมือนกัน ส่งโจทย์สั้น ๆ มาได้เลย แล้วเราจะช่วยดูว่าควรเริ่มจากเว็บ แอด ระบบทำงาน หรือ AI
+          </p>
+          <ul class="problem-list">
+            <li>เว็บมีอยู่แล้ว แต่ไม่ค่อยมีลูกค้าทัก</li>
+            <li>ยิงแอดอยู่ แต่ยอดขายไม่คุ้ม</li>
+            <li>ทีมงานทำงานช้า หรือผิดพลาดบ่อย</li>
+          </ul>
+        </div>
       </section>
 
       <section id="dataroot" class="case-section scene scene-dark" data-scene="dark">
@@ -324,7 +354,6 @@ const process = [
         <div class="section-heading">
           <p class="eyebrow">Portfolio</p>
           <h2>งานเว็บที่ต้องดูน่าเชื่อถือก่อน แล้วค่อยสวยแบบมีเหตุผล</h2>
-          <a class="section-link" href="/portfolio/">ดูผลงานทั้งหมด</a>
         </div>
 
         <div class="portfolio-grid">
@@ -340,7 +369,7 @@ const process = [
           ))}
         </div>
         <div class="portfolio-more">
-          <a class="button button-secondary" href="/portfolio/">ไปหน้า ผลงาน</a>
+          <a class="button button-primary" href="/portfolio/">ไปหน้า ผลงาน</a>
         </div>
       </section>
 
@@ -351,7 +380,10 @@ const process = [
         </div>
         <div class="process-grid">
           {process.map(([title, copy], index) => (
-            <article>
+            <article class="liquid-glass liquidGlass-wrapper">
+              <div class="liquidGlass-effect" aria-hidden="true"></div>
+              <div class="liquidGlass-tint" aria-hidden="true"></div>
+              <div class="liquidGlass-shine" aria-hidden="true"></div>
               <span class="step-number">{String(index + 1).padStart(2, '0')}</span>
               <h3>{title}</h3>
               <p>{copy}</p>
@@ -372,6 +404,8 @@ const process = [
       </section>
     </main>
 
+    <Footer />
+
     <button class="floating-cta" type="button" data-floating-cta data-open-lead>ส่งโจทย์ให้เราดู</button>
 
     <div class="panel-backdrop" data-panel-backdrop></div>

src/pages/privacy.astro

@@ -0,0 +1,25 @@
+---
+import PageShell from '../components/PageShell.astro';
+---
+
+<PageShell
+  title="นโยบายความเป็นส่วนตัว | MoreminiMore"
+  description="นโยบายความเป็นส่วนตัวของ MoreminiMore"
+>
+  <section class="page-hero scene scene-light" data-scene="light">
+    <div class="page-hero-grid">
+      <div>
+        <h1>นโยบายความเป็นส่วนตัว</h1>
+      </div>
+    </div>
+  </section>
+
+  <section class="page-section">
+    <div class="glass-panel liquid-glass liquidGlass-wrapper">
+      <div class="liquidGlass-effect" aria-hidden="true"></div>
+      <div class="liquidGlass-tint" aria-hidden="true"></div>
+      <div class="liquidGlass-shine" aria-hidden="true"></div>
+      <p>หน้านี้กำลังอัพเดท กรุณาติดต่อเราหากมีคำถามเกี่ยวกับนโยบายความเป็นส่วนตัว</p>
+    </div>
+  </section>
+</PageShell>

src/pages/terms.astro

@@ -0,0 +1,25 @@
+---
+import PageShell from '../components/PageShell.astro';
+---
+
+<PageShell
+  title="เงื่อนไขการใช้งาน | MoreminiMore"
+  description="เงื่อนไขการใช้งานของ MoreminiMore"
+>
+  <section class="page-hero scene scene-light" data-scene="light">
+    <div class="page-hero-grid">
+      <div>
+        <h1>เงื่อนไขการใช้งาน</h1>
+      </div>
+    </div>
+  </section>
+
+  <section class="page-section">
+    <div class="glass-panel liquid-glass liquidGlass-wrapper">
+      <div class="liquidGlass-effect" aria-hidden="true"></div>
+      <div class="liquidGlass-tint" aria-hidden="true"></div>
+      <div class="liquidGlass-shine" aria-hidden="true"></div>
+      <p>หน้านี้กำลังอัพเดท กรุณาติดต่อเราหากมีคำถามเกี่ยวกับเงื่อนไขการใช้งาน</p>
+    </div>
+  </section>
+</PageShell>

src/styles/global.css

@@ -448,6 +448,28 @@ background: rgb(255 255 255 / .10);
 color: rgb(255 255 255 / .72);
 }
 
+/* Links inside inverted page sections */
+.page-section a,
+.page-section-tight a,
+.page-section button,
+.page-section-tight button,
+.page-section .text-link,
+.page-section-tight .text-link {
+  color: white;
+}
+.page-section a:hover,
+.page-section-tight a:hover,
+.page-section button:hover,
+.page-section-tight button:hover,
+.page-section .text-link:hover,
+.page-section-tight .text-link:hover {
+  color: var(--yellow);
+}
+.page-section li,
+.page-section-tight li {
+  color: rgb(255 255 255 / .72);
+}
+
 .service-detail-grid,
 .about-grid,
 .contact-layout,
@@ -508,6 +530,37 @@ margin-top: 14px;
 color: var(--muted);
 }
 
+/* Override muted colors inside inverted sections */
+.page-section .detail-card p,
+.page-section .about-grid p,
+.page-section .contact-info p,
+.page-section .faq-item p,
+.page-section .blog-card p,
+.page-section-tight .detail-card p,
+.page-section-tight .about-grid p,
+.page-section-tight .faq-item p,
+.page-section-tight .blog-card p,
+.page-section .related-service-card p,
+.page-section-tight .related-service-card p {
+  color: rgb(255 255 255 / .72);
+}
+
+.page-section .detail-card span,
+.page-section .faq-item span,
+.page-section .blog-card span,
+.page-section .related-service-card span,
+.page-section-tight .detail-card span,
+.page-section-tight .faq-item span,
+.page-section-tight .blog-card span,
+.page-section-tight .related-service-card span {
+  color: rgb(255 255 255 / .60);
+}
+
+.page-section .detail-objective,
+.page-section-tight .detail-objective {
+  color: rgb(255 255 255 / .72);
+}
+
 .faq-list {
 grid-template-columns: 1fr;
 }
@@ -554,6 +607,12 @@ font-size: 14px;
 font-weight: 700;
 }
 
+/* Override for dark sections */
+.page-section .contact-problem-list span,
+.page-section-tight .contact-problem-list span {
+  color: rgb(255 255 255 / .72);
+}
+
 .contact-info {
 padding: clamp(12px, 3vw, 28px);
 }
@@ -565,12 +624,13 @@ margin: 24px 0;
 }
 
 .contact-info dt {
-color: var(--muted);
+  color: rgb(255 255 255 / .60);
 font-size: 13px;
 font-weight: 800;
 }
 
 .contact-info dd {
+  color: white;
 margin: 4px 0 0;
 font-size: clamp(1.3rem, 2.4vw, 2rem);
 font-weight: 900;
@@ -596,6 +656,12 @@ font-size: 13px;
 font-weight: 900;
 }
 
+/* Override for dark sections */
+.page-section .service-story-grid h3,
+.page-section-tight .service-story-grid h3 {
+  color: rgb(255 255 255 / .60);
+}
+
 .service-hero-panel p {
 margin: 12px 0 24px;
 color: var(--muted);
@@ -648,7 +714,7 @@ grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .related-service-card {
-color: var(--ink);
+  color: white;
 }
 
 .related-service-card h3 {
@@ -682,7 +748,7 @@ color: var(--muted);
 
 .hero h1 {
   max-width: 15ch;
-  font-size: clamp(3rem, 5.4vw, 5.45rem);
+  font-size: clamp(2.55rem, 4.6vw, 4.63rem);
   font-weight: 900;
 }
 
@@ -698,6 +764,30 @@ color: var(--muted);
   display: none;
 }
 
+.hero-result-metrics {
+display: flex;
+gap: 16px;
+margin: 20px 0;
+}
+
+.hero-metric {
+text-align: center;
+}
+
+.hero-metric strong {
+display: block;
+font-size: 1.6rem;
+font-weight: 900;
+color: var(--ink);
+}
+
+.hero-metric span {
+font-size: 0.82rem;
+color: var(--muted);
+text-transform: uppercase;
+letter-spacing: 0.04em;
+}
+
 .hero-lead {
   max-width: 62ch;
   margin-top: 24px;
@@ -741,6 +831,12 @@ transition: all .4s cubic-bezier(.175, .885, .32, 2.2);
 display: none;
 }
 
+/* Restore process-grid arrows (override liquid-glass ::after) */
+.process-grid.liquid-glass article::after,
+.process-grid article.liquid-glass::after {
+display: grid;
+}
+
 .liquidGlass-effect,
 .liquidGlass-tint,
 .liquidGlass-shine {
@@ -829,6 +925,124 @@ inset -1px -1px 1px 1px var(--nav-shine-b);
   font-size: clamp(1.7rem, 3vw, 2.8rem);
 }
 
+/* ── Hero Profit Cluster ── */
+.hero-profit-cluster {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 14px;
+  width: 100%;
+  max-width: 420px;
+  aspect-ratio: 1;
+  margin-inline: auto;
+}
+
+/* Center card spans the middle */
+.profit-center {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  align-self: center;
+  justify-self: center;
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  border: 2px solid var(--yellow);
+  box-shadow:
+    0 0 0 6px rgb(254 212 0 / .12),
+    0 20px 60px rgb(254 212 0 / .18),
+    0 4px 16px rgb(0 0 0 / .06);
+}
+
+.profit-label {
+  font-size: clamp(2rem, 4vw, 2.8rem);
+  font-weight: 900;
+  color: var(--ink);
+  line-height: 1;
+}
+
+.profit-sub {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  text-align: center;
+  line-height: 1.3;
+}
+
+/* Outer cards */
+.profit-card {
+  border-radius: 20px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
+}
+
+.profit-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 16px 40px rgb(0 0 0 / .10);
+}
+
+.profit-tag {
+  font-size: 14px;
+  font-weight: 900;
+  color: var(--ink);
+  letter-spacing: .02em;
+  text-transform: uppercase;
+}
+
+.profit-desc {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+/* Position outer cards in the grid */
+.profit-marketing {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  justify-self: center;
+  width: 160px;
+  z-index: 1;
+}
+
+.profit-ai {
+  grid-column: 1;
+  grid-row: 2;
+  justify-self: end;
+  width: 150px;
+  z-index: 1;
+}
+
+.profit-biz {
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: start;
+  width: 150px;
+  z-index: 1;
+}
+
+/* Connector SVG */
+.profit-connectors {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+
 .problem-preview,
 .decision-preview {
   display: grid;
@@ -908,6 +1122,36 @@ line-height: 1.32;
   color: var(--muted);
 }
 
+.problem-strip-content {
+display: flex;
+flex-direction: column;
+gap: 16px;
+}
+
+.problem-list {
+list-style: none;
+padding: 0;
+margin: 0;
+display: flex;
+flex-direction: column;
+gap: 8px;
+}
+
+.problem-list li {
+position: relative;
+padding-left: 20px;
+font-size: 0.95rem;
+color: var(--ink);
+}
+
+.problem-list li::before {
+content: "→";
+position: absolute;
+left: 0;
+color: var(--yellow);
+font-weight: 700;
+}
+
 .case-section,
 .portfolio-section {
   width: 100%;
@@ -935,6 +1179,26 @@ position: relative;
 z-index: 1;
 }
 
+
+/* White text on inverted dark backgrounds */
+.scene-dark h2,
+.scene-dark h3 {
+  color: white;
+}
+.scene-dark p {
+  color: rgb(255 255 255 / .72);
+}
+/* Links inside dark scenes */
+.scene-dark a,
+.scene-dark button,
+.scene-dark .text-link {
+  color: white;
+}
+.scene-dark a:hover,
+.scene-dark button:hover,
+.scene-dark .text-link:hover {
+  color: var(--yellow);
+}
 .case-section .eyebrow,
 .portfolio-section .eyebrow {
   border-color: var(--dark-line);
@@ -1167,6 +1431,11 @@ justify-content: center;
 margin-top: 28px;
 }
 
+.portfolio-more .button:hover {
+transform: none;
+box-shadow: 0 14px 34px rgb(254 212 0 / .30), inset 1px 1px 0 rgb(255 255 255 / .48);
+}
+
 .process-grid {
   position: relative;
   display: grid;
@@ -1175,14 +1444,7 @@ margin-top: 28px;
 }
 
 .process-grid::before {
-position: absolute;
-top: 42px;
-right: 10%;
-left: 10%;
-height: 2px;
-z-index: 0;
-content: "";
-background: linear-gradient(90deg, rgb(254 212 0 / .08), rgb(254 212 0 / .62), rgb(254 212 0 / .08));
+display: none;
 }
 
 .process-grid article {
@@ -1191,17 +1453,14 @@ background: linear-gradient(90deg, rgb(254 212 0 / .08), rgb(254 212 0 / .62), r
   min-height: 250px;
   display: flex;
   flex-direction: column;
-  border: 1px solid rgb(19 18 13 / .12);
   border-radius: 24px;
-  background: rgb(255 255 255 / .32);
-  box-shadow: 0 22px 60px rgb(42 36 18 / .10), inset 1px 1px 0 rgb(255 255 255 / .68);
   padding: 18px;
+  overflow: visible;
   transition: transform .25s var(--ease), box-shadow .25s var(--ease);
 }
 
 .process-grid article:hover {
 transform: translateY(-5px);
-box-shadow: 0 30px 76px rgb(42 36 18 / .16), inset 1px 1px 0 rgb(255 255 255 / .78);
 }
 
 .process-grid article::after {
@@ -1232,9 +1491,9 @@ display: grid;
 place-items: center;
 border: 1px solid rgb(19 18 13 / .12);
 border-radius: 22px;
-background: var(--yellow);
+background: rgb(255 255 255 / .5);
 color: var(--ink);
-box-shadow: 0 16px 38px rgb(254 212 0 / .28);
+box-shadow: 0 16px 38px rgb(42 36 18 / .10);
 font-size: 1.25rem;
 }
 
@@ -1636,6 +1895,31 @@ max-width: calc(100% - 32px);
     max-width: 9ch;
   }
 
+  /* Profit cluster mobile */
+  .hero-profit-cluster {
+    max-width: 340px;
+    gap: 10px;
+  }
+  .profit-center {
+    width: 140px;
+    height: 140px;
+  }
+  .profit-label {
+    font-size: 1.8rem;
+  }
+  .profit-marketing,
+  .profit-ai,
+  .profit-biz {
+    width: 130px;
+    padding: 14px;
+  }
+  .profit-tag {
+    font-size: 12px;
+  }
+  .profit-desc {
+    font-size: 11px;
+  }
+
 .problem-strip h2,
 .section-heading h2,
 .final-cta h2,