diff --git a/oneinai.html b/oneinai.html
index 5c01fbf..0986f06 100644
--- a/oneinai.html
+++ b/oneinai.html
@@ -463,6 +463,75 @@
     text-transform: uppercase;
   }
 
+  .workflow-list {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    border-top: 1px solid var(--ink);
+    border-bottom: 1px solid var(--line);
+  }
+
+  .workflow-step {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 272px;
+    padding: 28px 26px 26px;
+    border-right: 1px solid var(--line);
+    transition: background 220ms ease, border-color 220ms ease;
+  }
+
+  .workflow-step:last-child {
+    border-right: 0;
+  }
+
+  .workflow-step::before {
+    content: '';
+    width: 42px;
+    height: 2px;
+    margin-bottom: 28px;
+    background: var(--red);
+  }
+
+  .workflow-step:hover {
+    background: linear-gradient(135deg, rgba(0, 163, 170, 0.07), rgba(144, 149, 232, 0.09));
+    border-color: rgba(62, 164, 236, 0.28);
+  }
+
+  .workflow-index {
+    position: absolute;
+    top: 28px;
+    right: 26px;
+    color: var(--faint);
+    font-size: 12px;
+    font-weight: 900;
+    letter-spacing: 0.12em;
+  }
+
+  .workflow-title {
+    margin: 0 0 14px;
+    color: var(--ink);
+    font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
+    font-size: 26px;
+    font-weight: 900;
+    line-height: 1.15;
+  }
+
+  .workflow-detail {
+    max-width: 300px;
+    margin: 0;
+    color: var(--muted);
+    font-size: 14px;
+    line-height: 1.8;
+  }
+
+  .workflow-meta {
+    margin-top: auto;
+    color: var(--red-dark);
+    font-size: 10px;
+    font-weight: 900;
+    letter-spacing: 0.14em;
+  }
+
   .pricing-section {
     padding-top: clamp(80px, 10vw, 126px);
   }
@@ -644,6 +713,26 @@
     }
   }
 
+  @keyframes scroll-reveal {
+    from {
+      opacity: 0;
+      transform: translateY(34px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @supports (animation-timeline: view()) {
+    .reveal-on-scroll {
+      animation: scroll-reveal linear both;
+      animation-timeline: view();
+      animation-range: entry 8% cover 34%;
+      will-change: opacity, transform;
+    }
+  }
+
   @media (max-width: 920px) {
     .page {
       width: min(100% - 40px, 720px);
@@ -687,6 +776,20 @@
       padding: 22px;
     }
 
+    .workflow-list {
+      grid-template-columns: 1fr;
+    }
+
+    .workflow-step {
+      min-height: 0;
+      border-right: 0;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .workflow-step:last-child {
+      border-bottom: 0;
+    }
+
     .docs-panel {
       grid-template-columns: 1fr;
       gap: 34px;
@@ -784,6 +887,10 @@
       gap: 12px;
     }
 
+    .workflow-step {
+      padding: 24px 22px;
+    }
+
     .row-title {
       font-size: 19px;
     }
@@ -897,7 +1004,7 @@
     </section>
 
     <section class='section' id='capability'>
-      <div class='section-heading'>
+      <div class='section-heading reveal-on-scroll'>
         <div>
           <div class='section-kicker'>&#x80fd;&#x529b; / 01</div>
           <h2 class='section-title'>&#x628a;&#x590d;&#x6742;&#x8c03;&#x7528;&#xff0c;&#x538b;&#x7f29;&#x6210;&#x4e00;&#x4e2a;&#x5165;&#x53e3;&#x3002;</h2>
@@ -906,19 +1013,19 @@
       </div>
 
       <div class='capability-list'>
-        <article class='capability-row'>
+        <article class='capability-row reveal-on-scroll'>
           <span class='row-index'>01</span>
           <h3 class='row-title'>&#x5168;&#x7403;&#x8fb9;&#x7f18;&#x52a0;&#x901f;</h3>
           <p class='row-detail'>&#x5c06;&#x8bf7;&#x6c42;&#x8def;&#x7531;&#x81f3;&#x66f4;&#x8fd1;&#x3001;&#x66f4;&#x7a33;&#x7684;&#x7ebf;&#x8def;&#xff0c;&#x964d;&#x4f4e;&#x8de8;&#x5883;&#x8c03;&#x7528;&#x4e2d;&#x7684;&#x6296;&#x52a8;&#xff0c;&#x8ba9;&#x5173;&#x952e;&#x4e1a;&#x52a1;&#x4fdd;&#x6301;&#x8fde;&#x7eed;&#x54cd;&#x5e94;&#x3002;</p>
           <span class='row-tag'>ROUTING</span>
         </article>
-        <article class='capability-row'>
+        <article class='capability-row reveal-on-scroll'>
           <span class='row-index'>02</span>
           <h3 class='row-title'>&#x900f;&#x660e;&#x6210;&#x672c;&#x63a7;&#x5236;</h3>
           <p class='row-detail'>&#x7edf;&#x4e00;&#x8ba1;&#x4ef7;&#x89c4;&#x5219;&#x3001;&#x6e05;&#x6670;&#x8d26;&#x5355;&#x4e0e;&#x7528;&#x91cf;&#x8bb0;&#x5f55;&#xff0c;&#x8ba9;&#x6a21;&#x578b;&#x9884;&#x7b97;&#x53ef;&#x4ee5;&#x88ab;&#x770b;&#x89c1;&#x3001;&#x88ab;&#x6838;&#x5bf9;&#xff0c;&#x4e5f;&#x88ab;&#x6301;&#x7eed;&#x89c4;&#x5212;&#x3002;</p>
           <span class='row-tag'>BILLING</span>
         </article>
-        <article class='capability-row'>
+        <article class='capability-row reveal-on-scroll'>
           <span class='row-index'>03</span>
           <h3 class='row-title'>&#x4f01;&#x4e1a;&#x7ea7;&#x5b89;&#x5168;</h3>
           <p class='row-detail'>&#x5bc6;&#x94a5;&#x5206;&#x5c42;&#x7ba1;&#x7406;&#x3001;&#x8bf7;&#x6c42;&#x94fe;&#x8def;&#x52a0;&#x5bc6;&#x4e0e;&#x670d;&#x52a1;&#x72b6;&#x6001;&#x76d1;&#x63a7;&#xff0c;&#x51cf;&#x5c11;&#x96c6;&#x6210;&#x98ce;&#x9669;&#xff0c;&#x652f;&#x6491;&#x7a33;&#x5b9a;&#x4e0a;&#x7ebf;&#x3002;</p>
@@ -927,8 +1034,39 @@
       </div>
     </section>
 
+    <section class='section workflow-section' id='workflow'>
+      <div class='section-heading reveal-on-scroll'>
+        <div>
+          <div class='section-kicker'>&#x5de5;&#x4f5c;&#x6d41; / 02</div>
+          <h2 class='section-title'>&#x4ece;&#x8bf7;&#x6c42;&#x5230;&#x7ed3;&#x679c;&#xff0c;<br>&#x6bcf;&#x4e00;&#x6b65;&#x90fd;&#x6e05;&#x695a;&#x3002;</h2>
+        </div>
+        <p class='section-description'>&#x628a;&#x63a5;&#x5165;&#x3001;&#x8def;&#x7531;&#x548c;&#x5bf9;&#x8d26;&#x62c6;&#x6210;&#x4e09;&#x6b65;&#xff0c;&#x8ba9;&#x56e2;&#x961f;&#x4ece;&#x7b2c;&#x4e00;&#x6b21;&#x8c03;&#x7528;&#x5f00;&#x59cb;&#xff0c;&#x5c31;&#x77e5;&#x9053;&#x8bf7;&#x6c42;&#x53d1;&#x751f;&#x5728;&#x54ea;&#x91cc;&#x3001;&#x989d;&#x5ea6;&#x82b1;&#x5728;&#x54ea;&#x91cc;&#x3002;</p>
+      </div>
+
+      <div class='workflow-list'>
+        <article class='workflow-step reveal-on-scroll'>
+          <span class='workflow-index'>01</span>
+          <h3 class='workflow-title'>&#x7edf;&#x4e00;&#x63a5;&#x5165;</h3>
+          <p class='workflow-detail'>&#x5c06;&#x73b0;&#x6709; OpenAI &#x517c;&#x5bb9;&#x5ba2;&#x6237;&#x7aef;&#x6307;&#x5411;&#x7edf;&#x4e00;&#x5165;&#x53e3;&#xff0c;&#x4e0d;&#x91cd;&#x590d;&#x6539;&#x9020;&#x4e1a;&#x52a1;&#x4ee3;&#x7801;&#x3002;</p>
+          <span class='workflow-meta'>ONE ENDPOINT</span>
+        </article>
+        <article class='workflow-step reveal-on-scroll'>
+          <span class='workflow-index'>02</span>
+          <h3 class='workflow-title'>&#x667a;&#x80fd;&#x8def;&#x7531;</h3>
+          <p class='workflow-detail'>&#x6839;&#x636e;&#x7ebf;&#x8def;&#x4e0e;&#x6a21;&#x578b;&#x72b6;&#x6001;&#x8f6c;&#x53d1;&#x8bf7;&#x6c42;&#xff0c;&#x628a;&#x7a33;&#x5b9a;&#x6027;&#x653e;&#x5728;&#x6bcf;&#x4e00;&#x6b21;&#x8c03;&#x7528;&#x4e4b;&#x524d;&#x3002;</p>
+          <span class='workflow-meta'>SMART ROUTING</span>
+        </article>
+        <article class='workflow-step reveal-on-scroll'>
+          <span class='workflow-index'>03</span>
+          <h3 class='workflow-title'>&#x7528;&#x91cf;&#x53ef;&#x89c1;</h3>
+          <p class='workflow-detail'>&#x5145;&#x503c;&#x3001;&#x989d;&#x5ea6;&#x3001;&#x8bf7;&#x6c42;&#x8bb0;&#x5f55;&#x5728;&#x540c;&#x4e00;&#x6761;&#x94fe;&#x8def;&#x91cc;&#xff0c;&#x65b9;&#x4fbf;&#x9884;&#x7b97;&#x548c;&#x8fd0;&#x8425;&#x590d;&#x76d8;&#x3002;</p>
+          <span class='workflow-meta'>CLEAR USAGE</span>
+        </article>
+      </div>
+    </section>
+
     <section class='section pricing-section' id='pricing'>
-      <div class='pricing-layout'>
+      <div class='pricing-layout reveal-on-scroll'>
         <div>
           <div class='price-label'>&#x8ba1;&#x4ef7;&#x89c4;&#x5219; / &#x6e05;&#x6670;&#x53ef;&#x6838;&#x5bf9;</div>
           <div class='price-main'>1 CNY = 1 USD</div>
@@ -952,7 +1090,7 @@
     </section>
 
     <section class='section docs-section' id='docs'>
-      <div class='docs-panel'>
+      <div class='docs-panel reveal-on-scroll'>
         <div>
           <div class='section-kicker'>&#x6587;&#x6863; / &#x4e0b;&#x4e00;&#x6b65;</div>
           <h2 class='section-title'>&#x4ece;&#x6587;&#x6863;&#x5f00;&#x59cb;&#xff0c;<br>&#x8ba9;&#x7cfb;&#x7edf;&#x5f00;&#x59cb;&#x5de5;&#x4f5c;&#x3002;</h2>