From 1260f7b37c1c0f99dea4ec2f9725e43481753784 Mon Sep 17 00:00:00 2001
From: SiteAgent Bot <bot@siteagent.ai>
Date: Fri, 23 Jan 2026 15:07:12 +0800
Subject: [PATCH] manual save(2026-01-23 15:07)

---
 src/components/FlipBook.tsx |  81 +++++++++---
 src/pages/Home.tsx          | 241 +++++++++++++++++++++++-------------
 2 files changed, 217 insertions(+), 105 deletions(-)

diff --git a/src/components/FlipBook.tsx b/src/components/FlipBook.tsx
index 3556bfd..92d8ff8 100644
--- a/src/components/FlipBook.tsx
+++ b/src/components/FlipBook.tsx
@@ -41,15 +41,37 @@ const PageHalf: React.FC<{ side: 'left' | 'right'; children?: React.ReactNode }>
     >
       <div
         className={[
-          'h-full',
-          'bg-[color-mix(in_srgb,var(--tf-bg)_55%,white)]',
-          'shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]',
+          'relative h-full',
+          'bg-[color-mix(in_srgb,white_92%,var(--tf-bg))]',
+          'shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]',
           isLeft
-            ? 'shadow-[inset_-18px_0_40px_rgba(0,0,0,0.06),inset_0_1px_0_rgba(255,255,255,0.65)]'
-            : 'shadow-[inset_18px_0_40px_rgba(0,0,0,0.06),inset_0_1px_0_rgba(255,255,255,0.65)]',
+            ? 'shadow-[inset_-22px_0_50px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.9)]'
+            : 'shadow-[inset_22px_0_50px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.9)]',
         ].join(' ')}
       >
-        <div className="h-full p-[clamp(18px,2.2vw,28px)]">{children}</div>
+        <div
+          aria-hidden="true"
+          className={[
+            'pointer-events-none absolute inset-0 opacity-70',
+            'bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.95),rgba(255,255,255,0.45)_55%,rgba(255,255,255,0.25))]',
+          ].join(' ')}
+        />
+        <div
+          aria-hidden="true"
+          className={[
+            'pointer-events-none absolute inset-0 opacity-[0.18] mix-blend-multiply',
+            'bg-[repeating-linear-gradient(0deg,rgba(10,10,10,0.06)_0px,rgba(10,10,10,0.06)_1px,transparent_1px,transparent_6px)]',
+          ].join(' ')}
+        />
+        <div
+          aria-hidden="true"
+          className={[
+            'pointer-events-none absolute inset-0 opacity-[0.08]',
+            'bg-[repeating-linear-gradient(90deg,rgba(10,10,10,0.05)_0px,rgba(10,10,10,0.05)_1px,transparent_1px,transparent_10px)]',
+          ].join(' ')}
+        />
+
+        <div className="relative h-full p-[clamp(22px,2.6vw,34px)]">{children}</div>
       </div>
     </div>
   )
@@ -207,6 +229,7 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
   }, [currentIndex, sheets.length])
 
   const currentSheet = sheets[currentIndex]
+  const previousSheet = currentIndex > 0 ? sheets[currentIndex - 1] : null
 
   return (
     <section
@@ -240,14 +263,18 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
           <div
             className={[
               'absolute inset-0 rounded-[26px]',
-              'bg-[color-mix(in_srgb,var(--tf-bg)_42%,white)]',
-              'shadow-[0_26px_80px_rgba(0,0,0,0.14)]',
-              'border border-[color-mix(in_srgb,var(--tf-border)_70%,white)]',
+              'bg-[color-mix(in_srgb,white_88%,var(--tf-bg))]',
+              'shadow-[0_30px_90px_rgba(0,0,0,0.18)]',
+              'border border-[color-mix(in_srgb,var(--tf-border)_55%,white)]',
             ].join(' ')}
           />
           <div
             aria-hidden="true"
-            className="absolute inset-y-[22px] left-1/2 w-px bg-[color-mix(in_srgb,var(--tf-border)_80%,white)]"
+            className="absolute inset-y-[18px] left-1/2 w-px bg-[color-mix(in_srgb,black_22%,transparent)]"
+          />
+          <div
+            aria-hidden="true"
+            className="absolute inset-y-[18px] left-1/2 w-[22px] -translate-x-1/2 bg-[radial-gradient(ellipse_at_center,rgba(0,0,0,0.12),transparent_70%)]"
           />
 
           <div
@@ -256,7 +283,27 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
               busy ? 'opacity-0 pointer-events-none' : 'opacity-100',
             ].join(' ')}
           >
-            <PageHalf side="left">{currentSheet?.back ?? currentSheet?.front}</PageHalf>
+            <div
+              className={[
+                'absolute inset-y-0 left-0 w-1/2 overflow-hidden rounded-l-[22px]',
+                'opacity-60',
+                '[filter:blur(2.2px)_contrast(0.92)_saturate(0.9)]',
+              ].join(' ')}
+              aria-hidden="true"
+            >
+              <div className="h-full bg-transparent">
+                <div className="h-full p-[clamp(22px,2.6vw,34px)]">{previousSheet?.front ?? currentSheet?.front}</div>
+              </div>
+              <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.92),rgba(255,255,255,0.4)_55%,rgba(255,255,255,0))]" />
+            </div>
+
+            <div className="pointer-events-none absolute bottom-4 left-6 z-[65] text-[10px] font-[var(--tf-font-ui)] tracking-[0.18em] text-[color-mix(in_srgb,var(--tf-text)_45%,white)]">
+              {String(Math.max(1, currentIndex * 2)).padStart(2, '0')}
+            </div>
+            <div className="pointer-events-none absolute bottom-4 right-6 z-[65] text-[10px] font-[var(--tf-font-ui)] tracking-[0.18em] text-[color-mix(in_srgb,var(--tf-text)_45%,white)]">
+              {String(Math.max(2, currentIndex * 2 + 1)).padStart(2, '0')}
+            </div>
+
             <PageHalf side="right">{currentSheet?.front}</PageHalf>
           </div>
 
@@ -293,9 +340,9 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
           disabled={!canPrev}
           className={[
             'inline-flex items-center justify-center rounded-full border px-4 py-2 text-sm transition',
-            'border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_50%,white)]',
+            'border-[color-mix(in_srgb,var(--tf-border)_70%,white)] bg-[color-mix(in_srgb,white_76%,var(--tf-bg))]',
             canPrev
-              ? 'text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,var(--tf-bg)_34%,white)]'
+              ? 'text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,white_64%,var(--tf-bg))]'
               : 'text-[var(--tf-text-subtle)] opacity-60 cursor-not-allowed',
           ].join(' ')}
           aria-label="上一页"
@@ -303,8 +350,8 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
           ← Prev
         </button>
 
-        <div className="min-w-[88px] text-center text-xs font-[var(--tf-font-ui)] tracking-wide text-[var(--tf-text-subtle)]">
-          {progressLabel}
+        <div className="min-w-[120px] text-center text-xs font-[var(--tf-font-ui)] tracking-[0.16em] text-[var(--tf-text-subtle)]">
+          ISSUE 01 · {progressLabel}
         </div>
 
         <button
@@ -313,9 +360,9 @@ export const FlipBook: React.FC<FlipBookProps> = ({ title, sheets, className })
           disabled={!canNext}
           className={[
             'inline-flex items-center justify-center rounded-full border px-4 py-2 text-sm transition',
-            'border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_50%,white)]',
+            'border-[color-mix(in_srgb,var(--tf-border)_70%,white)] bg-[color-mix(in_srgb,white_76%,var(--tf-bg))]',
             canNext
-              ? 'text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,var(--tf-bg)_34%,white)]'
+              ? 'text-[var(--tf-text)] hover:bg-[color-mix(in_srgb,white_64%,var(--tf-bg))]'
               : 'text-[var(--tf-text-subtle)] opacity-60 cursor-not-allowed',
           ].join(' ')}
           aria-label="下一页"
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 4eec9dc..31ac233 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -14,11 +14,18 @@ const BookPage: React.FC<{ children: React.ReactNode; align?: 'center' | 'top' }
       className={[
         'h-full',
         'w-full',
-        'px-[clamp(6px,1vw,10px)]',
-        align === 'top' ? 'pt-[clamp(6px,1.4vw,18px)]' : 'flex items-center',
+        align === 'top' ? 'pt-[clamp(8px,1.6vw,22px)]' : 'flex items-center',
       ].join(' ')}
     >
-      <div className="w-full max-w-[40ch]">{children}</div>
+      <div className="w-full max-w-[46ch]">{children}</div>
+    </div>
+  )
+}
+
+const Kicker: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
+      {children}
     </div>
   )
 }
@@ -33,8 +40,8 @@ const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; cente
       className={[
         serif ? 'font-[var(--tf-font-serif)]' : 'font-medium',
         center ? 'text-center' : 'text-left',
-        'text-[clamp(22px,2.4vw,34px)]',
-        'leading-[1.18]',
+        'text-[clamp(22px,2.5vw,36px)]',
+        'leading-[1.14]',
         'tracking-tight',
         'text-[var(--tf-text)]',
       ].join(' ')}
@@ -44,6 +51,12 @@ const SectionTitle: React.FC<{ children: React.ReactNode; serif?: boolean; cente
   )
 }
 
+const BodyText: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{children}</p>
+  )
+}
+
 const LastPage: React.FC<{ entries: Entry[] }> = ({ entries }) => {
   return (
     <div className="flex h-full flex-col justify-between">
@@ -107,19 +120,22 @@ export const Home: React.FC = () => {
         id: 'section-01',
         front: (
           <BookPage>
-            <h1 className="font-[var(--tf-font-serif)] font-medium text-[clamp(36px,4.2vw,52px)] leading-[1.06] tracking-tight text-[var(--tf-text)]">
+            <Kicker>SECTION 01 · WORLDVIEW</Kicker>
+            <h1 className="mt-4 font-[var(--tf-font-serif)] font-medium text-[clamp(38px,4.4vw,56px)] leading-[1.04] tracking-tight text-[var(--tf-text)]">
               全球化，正在进入高不确定性时代
             </h1>
-            <p className="mt-8 text-[clamp(16px,1.5vw,18px)] leading-[1.85] text-[var(--tf-text-muted)]">
-              市场、政策、数据与地缘风险同时叠加，
-              <br />
-              任何一次跨境决策的失误，代价都在被放大。
-            </p>
-            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-subtle)]">
-              对中国企业而言，出海不再只是机会判断，
-              <br />
-              而是一项系统性能力挑战。
-            </p>
+            <div className="mt-10 max-w-[40ch]">
+              <p className="text-[clamp(16px,1.5vw,18px)] leading-[1.9] text-[var(--tf-text-muted)]">
+                市场、政策、数据与地缘风险同时叠加，
+                <br />
+                任何一次跨境决策的失误，代价都在被放大。
+              </p>
+              <p className="mt-8 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
+                对中国企业而言，出海不再只是机会判断，
+                <br />
+                而是一项系统性能力挑战。
+              </p>
+            </div>
           </BookPage>
         ),
       },
@@ -127,20 +143,24 @@ export const Home: React.FC = () => {
         id: 'section-02',
         front: (
           <BookPage align="top">
-            <SectionTitle>困难的不是走向全球，而是如何在不确定中做出可控决策</SectionTitle>
-            <div className="mt-8 grid gap-4">
+            <Kicker>SECTION 02 · DECISION UNCERTAINTY</Kicker>
+            <div className="mt-4">
+              <SectionTitle>困难的不是走向全球，而是如何在不确定中做出可控决策</SectionTitle>
+            </div>
+
+            <div className="mt-10 grid gap-4">
               {[
                 '现在是否适合进入这个国家或区域？',
                 '合规风险会不会在后期集中爆发？',
                 '当前的增长模式，是否能复制到下一个市场？',
                 '如果业务受挫，是战略判断错误，还是信息不足？',
                 '是否存在尚未被识别的关键风险？',
-              ].map((item) => (
-                <div
-                  key={item}
-                  className="rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)] p-4"
-                >
-                  <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">{item}</p>
+              ].map((item, index) => (
+                <div key={item} className="border-l-2 border-[color-mix(in_srgb,var(--tf-border)_75%,white)] pl-4">
+                  <div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
+                    Q{String(index + 1).padStart(2, '0')}
+                  </div>
+                  <p className="mt-2 text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{item}</p>
                 </div>
               ))}
             </div>
@@ -152,13 +172,14 @@ export const Home: React.FC = () => {
         front: (
           <BookPage>
             <div className="text-center">
-              <div className="mx-auto max-w-[34ch]">
-                <p className="font-[var(--tf-font-serif)] text-[clamp(28px,3.2vw,40px)] leading-[1.42] tracking-tight text-[var(--tf-text)]">
+              <Kicker>SECTION 03 · CORE THESIS</Kicker>
+              <div className="mx-auto mt-8 max-w-[34ch]">
+                <p className="font-[var(--tf-font-serif)] text-[clamp(30px,3.4vw,44px)] leading-[1.4] tracking-tight text-[var(--tf-text)]">
                   合规，不是成本。
                   <br />
                   它是增长的结构性杠杆。
                 </p>
-                <p className="mt-8 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
+                <p className="mt-10 text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-subtle)]">
                   当合规被前置并系统化，它决定的不是“能否避免风险”，
                   <br />
                   而是企业能否更快进入市场、建立信任，并实现可复制的增长。
@@ -172,21 +193,29 @@ export const Home: React.FC = () => {
         id: 'section-04',
         front: (
           <BookPage align="top">
-            <SectionTitle>这是在复杂现实中被反复验证的方法论</SectionTitle>
-            <div className="mt-8 space-y-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
-              <p>
+            <Kicker>SECTION 04 · METHODOLOGY</Kicker>
+            <div className="mt-4">
+              <SectionTitle>这是在复杂现实中被反复验证的方法论</SectionTitle>
+            </div>
+
+            <div className="mt-10 space-y-7">
+              <BodyText>
                 这一判断，来自长期服务中国企业全球化过程中的真实实践，
                 <br />
                 也来自高度复杂、强监管与多变量环境下的系统性经验。
-              </p>
-              <p>
+              </BodyText>
+              <BodyText>
                 我们逐渐意识到：
                 <br />
                 合规并非增长的对立面，而是增长的前置条件。
-              </p>
+              </BodyText>
             </div>
-            <div className="mt-10 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6">
-              <p className="font-[var(--tf-font-serif)] text-[clamp(16px,1.5vw,18px)] tracking-tight text-[var(--tf-text)]">
+
+            <div className="mt-12 border-t border-[color-mix(in_srgb,var(--tf-border)_60%,white)] pt-6">
+              <div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
+                METHOD
+              </div>
+              <p className="mt-2 font-[var(--tf-font-serif)] text-[clamp(16px,1.5vw,18px)] tracking-tight text-[var(--tf-text)]">
                 Compliance as Growth —— 合规即增长
               </p>
             </div>
@@ -197,14 +226,20 @@ export const Home: React.FC = () => {
         id: 'section-05',
         front: (
           <BookPage align="top">
-            <SectionTitle>当问题复杂到无法依赖个人经验时，必须用系统解决</SectionTitle>
-            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
-              图灵环流（TuringFlow），致力于将复杂的全球化问题，
-              <br />
-              转化为可执行、可验证、可规模化的系统能力。
-            </p>
+            <Kicker>SECTION 05 · SYSTEM OVERVIEW</Kicker>
+            <div className="mt-4">
+              <SectionTitle>当问题复杂到无法依赖个人经验时，必须用系统解决</SectionTitle>
+            </div>
 
-            <div className="mt-8 grid gap-3 sm:grid-cols-2">
+            <div className="mt-8">
+              <BodyText>
+                图灵环流（TuringFlow），致力于将复杂的全球化问题，
+                <br />
+                转化为可执行、可验证、可规模化的系统能力。
+              </BodyText>
+            </div>
+
+            <div className="mt-10 grid gap-4 sm:grid-cols-2">
               {[
                 { title: 'G-Comply', desc: '我如何合法进入并持续运营一个海外市场？' },
                 { title: 'G-Growth', desc: '我如何在合规前提下，实现可持续且可复制的增长？' },
@@ -214,38 +249,50 @@ export const Home: React.FC = () => {
                 <div
                   key={item.title}
                   className={[
-                    'rounded-2xl border border-[var(--tf-border)]',
-                    'bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)]',
+                    'rounded-2xl border border-[color-mix(in_srgb,var(--tf-border)_70%,white)]',
+                    'bg-[color-mix(in_srgb,white_82%,var(--tf-bg))]',
                     'p-4',
                   ].join(' ')}
                 >
-                  <div className="text-sm font-[var(--tf-font-ui)] font-semibold tracking-tight text-[var(--tf-text)]">
+                  <div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
+                    MODULE
+                  </div>
+                  <div className="mt-2 text-sm font-[var(--tf-font-ui)] font-semibold tracking-tight text-[var(--tf-text)]">
                     {item.title}
                   </div>
-                  <p className="mt-2 text-xs leading-[1.75] text-[var(--tf-text-muted)]">{item.desc}</p>
+                  <p className="mt-2 text-xs leading-[1.85] text-[var(--tf-text-muted)]">{item.desc}</p>
                 </div>
               ))}
             </div>
           </BookPage>
         ),
+
       },
       {
         id: 'section-06',
         front: (
           <BookPage align="top">
-            <SectionTitle serif>Discovery，是我们的全球决策雷达</SectionTitle>
-            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">
-              我们持续追踪全球政策、市场、行业与地缘变化，
-              <br />
-              并将大量碎片化信息，深度加工为可用于决策的判断。
-            </p>
+            <Kicker>SECTION 06 · DISCOVERY</Kicker>
+            <div className="mt-4">
+              <SectionTitle serif>Discovery，是我们的全球决策雷达</SectionTitle>
+            </div>
+            <div className="mt-8">
+              <BodyText>
+                我们持续追踪全球政策、市场、行业与地缘变化，
+                <br />
+                并将大量碎片化信息，深度加工为可用于决策的判断。
+              </BodyText>
+            </div>
 
-            <div className="mt-8 flex flex-wrap items-center gap-2 text-xs font-[var(--tf-font-ui)] text-[var(--tf-accent-link)]">
-              {['每日晨报', '政策研究', '行业趋势', '深度报告'].map((tag) => (
-                <span key={tag} className="rounded-full bg-[var(--tf-accent-soft)] px-3 py-1">
-                  {tag}
-                </span>
-              ))}
+            <div className="mt-10">
+              <div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">CONTENT</div>
+              <div className="mt-3 flex flex-wrap items-center gap-2 text-xs font-[var(--tf-font-ui)] text-[var(--tf-accent-link)]">
+                {['每日晨报', '政策研究', '行业趋势', '深度报告'].map((tag) => (
+                  <span key={tag} className="rounded-full bg-[var(--tf-accent-soft)] px-3 py-1">
+                    {tag}
+                  </span>
+                ))}
+              </div>
             </div>
           </BookPage>
         ),
@@ -254,17 +301,23 @@ export const Home: React.FC = () => {
         id: 'section-07',
         front: (
           <BookPage align="top">
-            <SectionTitle>系统带来的，是可以被度量的确定性</SectionTitle>
-            <div className="mt-8 grid gap-4">
+            <Kicker>SECTION 07 · MEASURABLE OUTCOME</Kicker>
+            <div className="mt-4">
+              <SectionTitle>系统带来的，是可以被度量的确定性</SectionTitle>
+            </div>
+
+            <div className="mt-10 grid gap-5">
               {[
                 '全球合规与市场进入决策周期显著缩短',
                 '关键风险提前识别与预警',
                 '增长路径的可复制性明显提升',
                 '跨市场决策一致性持续增强',
-              ].map((point) => (
-                <div key={point} className="flex items-start gap-3">
-                  <span aria-hidden="true" className="mt-2 h-2 w-2 rounded-full bg-[var(--tf-border)]" />
-                  <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-muted)]">{point}</p>
+              ].map((point, index) => (
+                <div key={point} className="grid grid-cols-[32px_1fr] gap-3">
+                  <div className="text-[10px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">
+                    {String(index + 1).padStart(2, '0')}
+                  </div>
+                  <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{point}</p>
                 </div>
               ))}
             </div>
@@ -275,21 +328,27 @@ export const Home: React.FC = () => {
         id: 'section-08',
         front: (
           <BookPage align="top">
-            <SectionTitle>被用于复杂场景，才有价值</SectionTitle>
-            <p className="mt-6 text-[clamp(14px,1.3vw,16px)] leading-[1.9] text-[var(--tf-text-subtle)]">
-              图灵环流的能力，已在政府级项目及多行业实践中得到验证。
-            </p>
+            <Kicker>SECTION 08 · TRUST</Kicker>
+            <div className="mt-4">
+              <SectionTitle>被用于复杂场景，才有价值</SectionTitle>
+            </div>
+            <div className="mt-8">
+              <BodyText>图灵环流的能力，已在政府级项目及多行业实践中得到验证。</BodyText>
+            </div>
 
-            <div className="mt-8 grid grid-cols-3 gap-3">
-              {['Gov', 'Enterprise', 'Consortium', 'ThinkTank', 'Academia', 'Partner'].map((label) => (
-                <div
-                  key={label}
-                  className="rounded-xl border border-[color-mix(in_srgb,var(--tf-border)_65%,white)] bg-[color-mix(in_srgb,var(--tf-bg)_62%,white)] px-3 py-3 text-center text-[10px] font-[var(--tf-font-ui)] tracking-wide text-[var(--tf-text-subtle)] grayscale"
-                  aria-label="Logo 占位"
-                >
-                  {label}
-                </div>
-              ))}
+            <div className="mt-10">
+              <div className="text-[11px] font-[var(--tf-font-ui)] tracking-[0.22em] text-[var(--tf-text-subtle)]">SELECTED</div>
+              <div className="mt-4 grid grid-cols-3 gap-3">
+                {['Gov', 'Enterprise', 'Consortium', 'ThinkTank', 'Academia', 'Partner'].map((label) => (
+                  <div
+                    key={label}
+                    className="rounded-xl border border-[color-mix(in_srgb,var(--tf-border)_65%,white)] bg-[color-mix(in_srgb,white_86%,var(--tf-bg))] px-3 py-3 text-center text-[10px] font-[var(--tf-font-ui)] tracking-wide text-[var(--tf-text-subtle)] grayscale"
+                    aria-label="Logo 占位"
+                  >
+                    {label}
+                  </div>
+                ))}
+              </div>
             </div>
           </BookPage>
         ),
@@ -298,14 +357,20 @@ export const Home: React.FC = () => {
         id: 'section-09',
         front: (
           <BookPage align="top">
-            <SectionTitle serif>探讨你的全球化路径</SectionTitle>
-            <div className="mt-8 grid gap-3">
-              <div className="rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)] p-4">
-                <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-muted)]">查看一份真实的全球决策示例</p>
-              </div>
-              <div className="rounded-2xl border border-[var(--tf-border)] bg-[color-mix(in_srgb,var(--tf-bg)_58%,white)] p-4">
-                <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.85] text-[var(--tf-text-muted)]">与我们交流一个具体市场或业务场景</p>
-              </div>
+            <Kicker>SECTION 09 · NEXT STEP</Kicker>
+            <div className="mt-4">
+              <SectionTitle serif>探讨你的全球化路径</SectionTitle>
+            </div>
+
+            <div className="mt-10 grid gap-4">
+              {['查看一份真实的全球决策示例', '与我们交流一个具体市场或业务场景'].map((line) => (
+                <div
+                  key={line}
+                  className="rounded-2xl border border-[color-mix(in_srgb,var(--tf-border)_70%,white)] bg-[color-mix(in_srgb,white_86%,var(--tf-bg))] p-4"
+                >
+                  <p className="text-[clamp(14px,1.3vw,16px)] leading-[1.95] text-[var(--tf-text-muted)]">{line}</p>
+                </div>
+              ))}
             </div>
           </BookPage>
         ),
@@ -322,10 +387,10 @@ export const Home: React.FC = () => {
     <div className="relative overflow-hidden">
       <div
         aria-hidden="true"
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(30,91,176,0.12),transparent_55%)]"
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(30,91,176,0.10),transparent_58%),radial-gradient(circle_at_bottom,rgba(17,17,17,0.06),transparent_55%)]"
       />
       <div className="mx-auto flex min-h-[calc(100vh-0px)] max-w-[1200px] items-center px-[clamp(18px,4vw,56px)] py-[clamp(28px,6vh,64px)]">
-        <FlipBook title="TuringFlow" sheets={sheets} className="w-full" />
+        <FlipBook title="TuringFlow Magazine" sheets={sheets} className="w-full" />
       </div>
     </div>
   )