diff --git a/apps/api/prisma/schema.prisma b/apps/api/prisma/schema.prisma
index c317b08..22174aa 100644
--- a/apps/api/prisma/schema.prisma
+++ b/apps/api/prisma/schema.prisma
@@ -15,7 +15,8 @@ model Organization {
   id           String   @id @default(cuid())
   username     String   @unique // 账号名，如 YPJKKJ
   name         String // 组织展示名，如 一品健康空间
-  passwordHash String
+  passwordHash String   @default("") // 手机号注册的访客无密码
+  phone        String?  @unique // 手机号（访客注册）
   createdAt    DateTime @default(now())
 
   materials Material[]
diff --git a/apps/api/src/auth/auth.controller.ts b/apps/api/src/auth/auth.controller.ts
index 404e224..a481b2c 100644
--- a/apps/api/src/auth/auth.controller.ts
+++ b/apps/api/src/auth/auth.controller.ts
@@ -1,18 +1,33 @@
 import { Body, Controller, Get, Post, UseGuards } from '@nestjs/common';
 import { AuthService } from './auth.service';
+import { SmsService } from './sms.service';
 import { LoginDto } from './dto/login.dto';
+import { SendSmsDto, VerifySmsDto } from './dto/sms.dto';
 import { JwtAuthGuard } from './jwt-auth.guard';
 import { CurrentOrg, OrgPayload } from './current-org.decorator';
 
 @Controller('auth')
 export class AuthController {
-  constructor(private auth: AuthService) {}
+  constructor(
+    private auth: AuthService,
+    private sms: SmsService,
+  ) {}
 
   @Post('login')
   login(@Body() dto: LoginDto) {
     return this.auth.login(dto.username, dto.password);
   }
 
+  @Post('sms/send')
+  sendSms(@Body() dto: SendSmsDto) {
+    return this.sms.send(dto.phone);
+  }
+
+  @Post('sms/verify')
+  verifySms(@Body() dto: VerifySmsDto) {
+    return this.sms.verify(dto.phone, dto.code);
+  }
+
   @UseGuards(JwtAuthGuard)
   @Get('me')
   me(@CurrentOrg() org: OrgPayload) {
diff --git a/apps/api/src/auth/auth.module.ts b/apps/api/src/auth/auth.module.ts
index f06d7ca..5a424df 100644
--- a/apps/api/src/auth/auth.module.ts
+++ b/apps/api/src/auth/auth.module.ts
@@ -2,6 +2,7 @@ import { Module } from '@nestjs/common';
 import { JwtModule } from '@nestjs/jwt';
 import { PassportModule } from '@nestjs/passport';
 import { AuthService } from './auth.service';
+import { SmsService } from './sms.service';
 import { AuthController } from './auth.controller';
 import { JwtStrategy } from './jwt.strategy';
 
@@ -13,7 +14,7 @@ import { JwtStrategy } from './jwt.strategy';
       signOptions: { expiresIn: process.env.JWT_EXPIRES_IN || '7d' },
     }),
   ],
-  providers: [AuthService, JwtStrategy],
+  providers: [AuthService, SmsService, JwtStrategy],
   controllers: [AuthController],
 })
 export class AuthModule {}
diff --git a/apps/api/src/auth/dto/sms.dto.ts b/apps/api/src/auth/dto/sms.dto.ts
new file mode 100644
index 0000000..6fc1c5a
--- /dev/null
+++ b/apps/api/src/auth/dto/sms.dto.ts
@@ -0,0 +1,15 @@
+import { IsString, Matches, Length } from 'class-validator';
+
+export class SendSmsDto {
+  @Matches(/^1\d{10}$/, { message: '手机号格式不正确' })
+  phone!: string;
+}
+
+export class VerifySmsDto {
+  @Matches(/^1\d{10}$/, { message: '手机号格式不正确' })
+  phone!: string;
+
+  @IsString()
+  @Length(4, 6)
+  code!: string;
+}
diff --git a/apps/api/src/auth/sms.service.ts b/apps/api/src/auth/sms.service.ts
new file mode 100644
index 0000000..8883eed
--- /dev/null
+++ b/apps/api/src/auth/sms.service.ts
@@ -0,0 +1,54 @@
+import { BadRequestException, Injectable } from '@nestjs/common';
+import { JwtService } from '@nestjs/jwt';
+import { PrismaService } from '../prisma/prisma.service';
+
+interface CodeEntry {
+  code: string;
+  expireAt: number;
+}
+
+/**
+ * 手机号验证码（开发模式）。验证码存内存、5 分钟有效。
+ * 生产环境应接入真实短信网关并改为持久化存储。
+ */
+@Injectable()
+export class SmsService {
+  private store = new Map<string, CodeEntry>();
+  private readonly DEV = true; // 开发模式：发送接口直接返回验证码
+
+  constructor(
+    private prisma: PrismaService,
+    private jwt: JwtService,
+  ) {}
+
+  send(phone: string) {
+    if (!/^1\d{10}$/.test(phone)) throw new BadRequestException('手机号格式不正确');
+    // 6 位验证码（开发模式固定算法，便于测试可读）
+    const code = String(Math.floor(100000 + (Date.now() % 900000)));
+    this.store.set(phone, { code, expireAt: Date.now() + 5 * 60 * 1000 });
+    // 真实环境此处调用短信网关；开发模式直接回传
+    return this.DEV ? { sent: true, devCode: code } : { sent: true };
+  }
+
+  async verify(phone: string, code: string) {
+    const entry = this.store.get(phone);
+    if (!entry || entry.expireAt < Date.now()) throw new BadRequestException('验证码已过期，请重新获取');
+    if (entry.code !== code) throw new BadRequestException('验证码不正确');
+    this.store.delete(phone);
+
+    // 找到或创建该手机号对应的访客组织
+    let org = await this.prisma.organization.findUnique({ where: { phone } });
+    if (!org) {
+      org = await this.prisma.organization.create({
+        data: {
+          username: 'U' + phone,
+          name: phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
+          phone,
+          passwordHash: '',
+        },
+      });
+    }
+    const token = await this.jwt.signAsync({ sub: org.id, username: org.username });
+    return { token, org: { id: org.id, username: org.username, name: org.name, phone } };
+  }
+}
diff --git a/apps/web/src/api/sms.ts b/apps/web/src/api/sms.ts
new file mode 100644
index 0000000..f9817e0
--- /dev/null
+++ b/apps/web/src/api/sms.ts
@@ -0,0 +1,10 @@
+import { http } from './http';
+import type { Org } from '../stores/auth';
+
+export function sendSms(phone: string) {
+  return http.post<any, { sent: boolean; devCode?: string }>('/auth/sms/send', { phone });
+}
+
+export function verifySms(phone: string, code: string) {
+  return http.post<any, { token: string; org: Org & { phone: string } }>('/auth/sms/verify', { phone, code });
+}
diff --git a/apps/web/src/components/PhoneAuthModal.vue b/apps/web/src/components/PhoneAuthModal.vue
new file mode 100644
index 0000000..86b1377
--- /dev/null
+++ b/apps/web/src/components/PhoneAuthModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <a-config-provider :theme="{ token: { colorPrimary: '#1f7a5a' } }">
+    <a-modal :open="open" title="手机号快速预测" :footer="null" width="400px" @cancel="emit('cancel')">
+      <p class="tip">登录后即可免费预测甲醛 / TVOC,无需密码,验证码登录</p>
+      <a-form layout="vertical" @submit.prevent="onVerify">
+        <a-form-item label="手机号">
+          <a-input v-model:value="phone" size="large" placeholder="请输入手机号" :maxlength="11" />
+        </a-form-item>
+        <a-form-item label="验证码">
+          <div class="code-row">
+            <a-input v-model:value="code" size="large" placeholder="6 位验证码" :maxlength="6" />
+            <a-button size="large" :disabled="countdown > 0 || !validPhone" :loading="sending" @click="onSend">
+              {{ countdown > 0 ? countdown + 's' : '发送验证码' }}
+            </a-button>
+          </div>
+        </a-form-item>
+        <a-alert v-if="devCode" type="info" show-icon :message="`开发模式验证码：${devCode}`" style="margin-bottom: 12px" />
+        <a-button type="primary" size="large" block :loading="verifying" :disabled="!validPhone || !code" @click="onVerify">
+          验证并开始预测
+        </a-button>
+      </a-form>
+    </a-modal>
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { sendSms, verifySms } from '../api/sms';
+import { useAuthStore } from '../stores/auth';
+
+defineProps<{ open: boolean }>();
+const emit = defineEmits<{ (e: 'ok'): void; (e: 'cancel'): void }>();
+
+const auth = useAuthStore();
+const phone = ref('');
+const code = ref('');
+const devCode = ref('');
+const sending = ref(false);
+const verifying = ref(false);
+const countdown = ref(0);
+
+const validPhone = computed(() => /^1\d{10}$/.test(phone.value));
+
+async function onSend() {
+  sending.value = true;
+  try {
+    const res = await sendSms(phone.value);
+    if (res.devCode) {
+      devCode.value = res.devCode;
+      code.value = res.devCode; // 开发模式自动填充，方便测试
+    }
+    message.success('验证码已发送');
+    countdown.value = 60;
+    const t = setInterval(() => {
+      countdown.value--;
+      if (countdown.value <= 0) clearInterval(t);
+    }, 1000);
+  } finally {
+    sending.value = false;
+  }
+}
+
+async function onVerify() {
+  if (!validPhone.value || !code.value) return;
+  verifying.value = true;
+  try {
+    const res = await verifySms(phone.value, code.value);
+    auth.setSession(res.token, res.org);
+    message.success('登录成功');
+    emit('ok');
+  } finally {
+    verifying.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.tip { color: #888; font-size: 13px; margin: 0 0 16px; }
+.code-row { display: flex; gap: 10px; }
+.code-row .ant-input { flex: 1; }
+</style>
diff --git a/apps/web/src/pages/Landing.vue b/apps/web/src/pages/Landing.vue
new file mode 100644
index 0000000..5b0ffa0
--- /dev/null
+++ b/apps/web/src/pages/Landing.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="lp">
+    <!-- NAV -->
+    <header class="nav">
+      <div class="nav-in">
+        <a class="brand" @click="scrollTop">
+          <span class="brand-logo"><LeafIcon /></span>
+          <span><span class="brand-tt">污染物预测系统</span><br><span class="brand-sub">INDOOR AIR · 装修污染</span></span>
+        </a>
+        <nav class="nav-links">
+          <a @click="scrollTo('news')">资讯科普</a>
+          <a @click="scrollTo('cases')">治理案例</a>
+          <a @click="scrollTo('how')">如何使用</a>
+          <a @click="openPredict">污染源识别</a>
+          <a @click="goPro">专业看板</a>
+        </nav>
+        <span class="nav-sp"></span>
+        <a class="btn btn-primary" @click="openPredict">免费试算<ArrowIcon /></a>
+      </div>
+    </header>
+
+    <!-- HERO -->
+    <section class="hero">
+      <div class="wrap hero-grid">
+        <div>
+          <span class="eyebrow"><span class="pip"></span>对照 GB/T 18883-2022 与 GB 50325-2020 双国标</span>
+          <h1>装修住得安心,<br>从一次<em>污染预测</em>开始</h1>
+          <p class="hero-lead">输入房间、环境与所用材料,系统用稳态质量平衡公式预测甲醛、苯、TVOC 等 6 项污染物浓度,判定是否超标,并溯源到具体污染材料,给出整改建议。</p>
+          <div class="hero-cta">
+            <a class="btn btn-primary btn-lg" @click="openPredict">免费预测甲醛 · TVOC<ArrowIcon /></a>
+            <a class="btn btn-lg" @click="scrollTo('cases')">查看治理案例</a>
+          </div>
+          <div class="hero-tags">
+            <span class="hero-tag"><CheckIcon />无需上门,先估后测</span>
+            <span class="hero-tag"><CheckIcon />公式可溯源</span>
+            <span class="hero-tag"><CheckIcon />材料数据库支撑</span>
+          </div>
+        </div>
+        <div class="hero-visual">
+          <div class="img-ph hero-img">室内 / 装修实景照片</div>
+          <div class="hero-badge"><b>6 项</b><span>污染物预测</span></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- STATS -->
+    <section class="stats">
+      <div class="stats-in">
+        <div class="stat" v-for="s in stats" :key="s.t"><b>{{ s.n }}</b><span>{{ s.t }}</span></div>
+      </div>
+    </section>
+
+    <!-- NEWS CAROUSEL -->
+    <section class="sec" id="news">
+      <div class="wrap">
+        <div class="sec-head">
+          <div><div class="sec-tag">资讯 · 科普</div><h2 class="sec-h">读懂装修污染,先把知识装进脑子</h2></div>
+          <a class="btn" @click="openPredict">全部文章</a>
+        </div>
+        <div class="carousel" @mouseenter="stop" @mouseleave="start">
+          <div class="cviewport">
+            <div class="ctrack" :style="{ transform: `translateX(${-cur * 100}%)` }">
+              <article class="cslide" v-for="(n, i) in news" :key="i">
+                <div class="cslide-img"><span class="cslide-tag">{{ n.tag }}</span><div class="img-ph">资讯配图</div></div>
+                <div class="cslide-body">
+                  <div class="cslide-date">{{ n.date }}</div>
+                  <h3>{{ n.title }}</h3>
+                  <p>{{ n.desc }}</p>
+                  <span class="cslide-more">阅读全文<ArrowIcon /></span>
+                </div>
+              </article>
+            </div>
+          </div>
+          <button class="cnav prev" @click="prev"><ChevronIcon dir="left" /></button>
+          <button class="cnav next" @click="next"><ChevronIcon dir="right" /></button>
+        </div>
+        <div class="cdots">
+          <button v-for="(n, i) in news" :key="i" class="cdot" :class="{ on: i === cur }" @click="go(i)"></button>
+        </div>
+      </div>
+    </section>
+
+    <!-- CASES -->
+    <section class="sec" id="cases" style="background:var(--bg2);">
+      <div class="wrap">
+        <div class="sec-head">
+          <div><div class="sec-tag">治理案例</div><h2 class="sec-h">预测 → 溯源 → 整改,看得见的下降</h2><p class="sec-sub">真实流程演示:从预测超标,到锁定主要污染材料,再到整改复测达标。</p></div>
+        </div>
+        <div class="cases-grid">
+          <article class="case" v-for="(c, i) in cases" :key="i">
+            <div class="img-ph">案例实景图</div>
+            <div class="case-b">
+              <div class="case-type">{{ c.type }}</div>
+              <h4>{{ c.name }}</h4>
+              <div class="case-meta">{{ c.meta }}</div>
+              <div class="ba">
+                <div class="ba-row"><span class="k">治理前</span><div class="ba-track"><div class="ba-fill" :style="{ width: c.w1 + '%', background: 'var(--bad)' }"></div></div><span class="v" style="color:var(--bad)">{{ c.v1 }}</span></div>
+                <div class="ba-row"><span class="k">治理后</span><div class="ba-track"><div class="ba-fill" :style="{ width: c.w2 + '%', background: 'var(--good)' }"></div></div><span class="v" style="color:var(--good)">{{ c.v2 }}</span></div>
+              </div>
+              <div class="case-foot"><span class="chip chip-good">{{ c.chip }}</span><span class="lk">查看溯源<ArrowIcon small /></span></div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <!-- HOW -->
+    <section class="sec" id="how">
+      <div class="wrap">
+        <div class="sec-head"><div><div class="sec-tag">如何使用</div><h2 class="sec-h">三步,得到一份可溯源的预测报告</h2></div></div>
+        <div class="steps">
+          <div class="step" v-for="(s, i) in steps" :key="i">
+            <div class="step-n">{{ i + 1 }}</div><h4>{{ s.h }}</h4><p>{{ s.p }}</p>
+            <div class="step-ar" v-if="i < steps.length - 1"><ArrowIcon /></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="sec" style="padding-top:0;">
+      <div class="wrap">
+        <div class="ctaband">
+          <div style="position:relative;z-index:2;">
+            <h2>现在就免费预测<br>你家会不会甲醛超标</h2>
+            <p>无需上门,输入材料即可估算。先估后测,把检测的钱花在刀刃上。</p>
+          </div>
+          <div style="display:flex;gap:14px;position:relative;z-index:2;">
+            <a class="btn btn-primary btn-lg" @click="openPredict">免费开始预测</a>
+            <a class="btn btn-lg" @click="goPro">查看专业看板</a>
+          </div>
+          <div class="deco"></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- FOOTER -->
+    <footer class="footer">
+      <div class="footer-in">
+        <div class="brand">
+          <span class="brand-logo"><LeafIcon /></span>
+          <span class="brand-tt">室内装修工程污染物预测系统</span>
+        </div>
+        <div>依据 GB/T 18883-2022 · GB 50325-2020 · 预测结果仅供参考,以 CMA 检测为准</div>
+      </div>
+    </footer>
+
+    <PhoneAuthModal :open="authOpen" @ok="onAuthed" @cancel="authOpen = false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import PhoneAuthModal from '../components/PhoneAuthModal.vue';
+
+const router = useRouter();
+
+// 内联图标
+const LeafIcon = () => h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('path', { d: 'M4 20c10 2 16-4 16-14 0 0-8-2-12 2-3 3-3 7-1 9 3-4 6-6 9-7' })]);
+const ArrowIcon = (props: any) => h('svg', { viewBox: '0 0 24 24', width: props.small ? 15 : undefined, height: props.small ? 15 : undefined, fill: 'none', stroke: 'currentColor', 'stroke-width': '2.2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('path', { d: 'M5 12h14M13 6l6 6-6 6' })]);
+const CheckIcon = () => h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('path', { d: 'M20 6L9 17l-5-5' })]);
+const ChevronIcon = (props: any) => h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2.4', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('path', { d: props.dir === 'left' ? 'M15 5l-7 7 7 7' : 'M9 5l7 7-7 7' })]);
+
+const stats = [
+  { n: '28+', t: '在管装修项目' },
+  { n: '2,400+', t: '累计预测次数' },
+  { n: '6 项', t: '污染物 · 甲醛/苯/TVOC/氨/氡/VOC' },
+  { n: '2 部', t: '国标依据 · 18883 / 50325' },
+];
+const news = [
+  { tag: '政策解读', date: '专栏 · 2026.05', title: '两大国标怎么读?GB/T 18883 与 GB 50325 的差别', desc: '一个是"住进去后"的室内空气质量标准,一个是"交工验收时"的工程控制标准——限值与采样条件并不相同,看懂它们才能判断房子到底达不达标。' },
+  { tag: '科普', date: '专栏 · 2026.04', title: '新装住宅的甲醛,为什么能持续释放 3–15 年?', desc: '人造板里的脲醛树脂胶会缓慢分解释放甲醛,释放周期长、受温湿度影响大。短期通风只能降一时浓度,真正的关键在源头材料的选择。' },
+  { tag: '指南', date: '专栏 · 2026.03', title: '夏天为什么更容易超标?温度与释放速率', desc: '温度每升高若干度,材料的甲醛释放速率会明显增大。这也是"冬天测达标、夏天又超标"的原因。预测时把环境温湿度纳入计算,结果才靠谱。' },
+  { tag: '方法', date: '专栏 · 2026.02', title: '先预测,再决定要不要做 CMA 检测', desc: '上门检测有成本。用本系统先做一次免费预测、定位高风险房间与主要污染材料,再有针对性地安排第三方 CMA 检测,省钱也更有的放矢。' },
+];
+const cases = [
+  { type: '住宅 · I类民用建筑', name: '锦绣华庭 · 主卧', meta: '主源:多层实木复合地板 · 人造板衣柜', w1: 82, v1: '0.18', w2: 36, v2: '0.08', chip: '甲醛达标' },
+  { type: '住宅 · I类民用建筑', name: '翠湖天地 · 儿童房', meta: '主源:人造板衣柜 · 壁纸基膜', w1: 95, v1: '0.21', w2: 32, v2: '0.07', chip: '甲醛达标' },
+  { type: '酒店客房 · II类民用建筑', name: '云栖精选酒店 · 标准间', meta: '主源:木器漆饰面 · 软包', w1: 90, v1: '0.72', w2: 58, v2: '0.46', chip: 'TVOC达标' },
+];
+const steps = [
+  { h: '录入房间与材料', p: '选择房间、填写面积层高与通风换气率,勾选所用装修材料及用量。' },
+  { h: '公式计算浓度', p: '按稳态质量平衡 C = Σ(EFᵢ·Aᵢ)/(n·V) 计算 6 项污染物浓度,对照国标判定达标。' },
+  { h: '溯源与整改建议', p: '若超标,公式溯源出贡献最大的材料并排序,给出通风或换材的可行整改方案。' },
+];
+
+// 轮播
+const cur = ref(0);
+let timer: any = null;
+function go(n: number) { cur.value = (n + news.length) % news.length; }
+function next() { go(cur.value + 1); start(); }
+function prev() { go(cur.value - 1); start(); }
+function start() { stop(); timer = setInterval(() => go(cur.value + 1), 5500); }
+function stop() { if (timer) clearInterval(timer); timer = null; }
+onMounted(start);
+onBeforeUnmount(stop);
+
+function scrollTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }
+function scrollTo(id: string) { document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); }
+function goPro() { router.push('/login'); }
+
+// 预测入口 → 手机注册
+const authOpen = ref(false);
+function openPredict() {
+  if (localStorage.getItem('token')) router.push('/source');
+  else authOpen.value = true;
+}
+function onAuthed() {
+  authOpen.value = false;
+  router.push('/source');
+}
+</script>
+
+<style src="../styles/landing.css"></style>
diff --git a/apps/web/src/pages/SourceTracing.vue b/apps/web/src/pages/SourceTracing.vue
new file mode 100644
index 0000000..849a3a2
--- /dev/null
+++ b/apps/web/src/pages/SourceTracing.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="s-app">
+    <div class="s-top">
+      <a class="s-back" @click="router.push('/landing')"><ChevronL />返回首页</a>
+      <div class="s-logo"><SourceIcon /></div>
+      <div class="s-tt">污染源识别<small>SOURCE TRACING · 甲醛</small></div>
+      <div class="s-spacer" />
+      <span class="muted">{{ auth.org?.name || '访客' }}</span>
+    </div>
+
+    <div class="s-body">
+      <div class="s-grid">
+        <!-- 输入 -->
+        <div class="card">
+          <div class="card-h"><div class="card-t"><span class="bar" />房间与材料输入</div><span class="card-step">输入</span></div>
+
+          <div class="fld">
+            <div class="fld-lab">选择房间</div>
+            <div class="rooms">
+              <div v-for="(r, id) in ROOMS" :key="id" class="room-b" :class="{ on: st.roomId === id }" @click="setRoom(id)">{{ r.name }}</div>
+            </div>
+          </div>
+
+          <div class="fld">
+            <div class="row2">
+              <div><div class="fld-lab">房间面积</div><div class="num"><input type="number" :value="st.area" @input="set('area', +($event.target as HTMLInputElement).value)" /><span class="unit">m²</span></div></div>
+              <div><div class="fld-lab">层高</div><div class="num"><input type="number" step="0.1" :value="st.h" @input="set('h', +($event.target as HTMLInputElement).value)" /><span class="unit">m</span></div></div>
+            </div>
+          </div>
+
+          <div class="fld">
+            <div class="fld-lab">通风换气率 <span class="v">{{ (+st.n).toFixed(1) }} 次/h</span></div>
+            <input class="slider" type="range" min="0.3" max="3" step="0.1" :value="st.n" @input="set('n', +($event.target as HTMLInputElement).value)" />
+            <div class="slider-scale"><span>0.3 密闭</span><span>1.0 一般</span><span>3.0 强通风</span></div>
+          </div>
+
+          <div class="fld" style="margin-bottom:0">
+            <div class="fld-lab">装修材料清单 <span class="muted">勾选计入 · 填写用量(m²)</span></div>
+            <div class="mats">
+              <div v-for="(m, id) in st.mats" :key="id" class="mat" :class="{ off: !m.on }">
+                <div class="mat-chk" :class="{ on: m.on }" @click="toggleMat(id)"><CheckIcon v-if="m.on" /></div>
+                <div class="mat-main">
+                  <div class="mat-nm">{{ MATS[id].name }}<span v-if="st.upg[id]" style="color:var(--accent);font-weight:700"> · 已换E0</span></div>
+                  <div class="mat-cat">{{ MATS[id].cat }} · EF {{ MATS[id].ef }}</div>
+                </div>
+                <div class="mat-qty"><input type="number" :value="m.A" @input="setQty(id, +($event.target as HTMLInputElement).value)" /><span class="u">m²</span></div>
+              </div>
+              <button v-if="addable" class="add-mat" @click="addMat"><PlusIcon />添加材料 · {{ MATS[addable].name }}</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 结果 -->
+        <div class="stack">
+          <div class="card">
+            <div class="card-h"><div class="card-t"><span class="bar" />识别结论</div><span class="card-step">结果</span></div>
+            <div class="verdict">
+              <div class="verd-num"><span class="big" :style="{ color: `var(--${r.level})` }">{{ fmt(r.C) }}</span><span class="u">mg/m³</span></div>
+              <div class="verd-meta">
+                <span class="chip" :class="'chip-' + r.level">甲醛 {{ LEVELTXT[r.level] }}</span>
+                <div class="verd-sub" v-if="r.level === 'good'">低于 GB/T 18883 限值 <b>{{ LIMIT }}</b>,余量 <b>{{ Math.round((1 - r.ratio) * 100) }}%</b></div>
+                <div class="verd-sub" v-else>超出 GB/T 18883 限值 <b>{{ LIMIT }}</b> 约 <b style="color:var(--bad)">{{ Math.round((r.ratio - 1) * 100) }}%</b>(GB 50325-I 限值 {{ LIMIT2 }})</div>
+              </div>
+            </div>
+            <div class="gate">
+              <div class="gate-step act">计算预测浓度</div>
+              <span class="gate-arrow"><ArrowS /></span>
+              <div class="gate-step" :class="r.level === 'good' ? 'act' : 'bad'">{{ r.level === 'good' ? '判定达标' : '判定超标' }}</div>
+              <span class="gate-arrow"><ArrowS /></span>
+              <div class="gate-step" :class="{ bad: r.level !== 'good' }">公式溯源污染材料</div>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-h"><div class="card-t"><span class="bar" />溯源公式 · 稳态质量平衡</div><span class="card-step">公式</span></div>
+            <div class="formula">
+              <div class="eq">C = <span class="frac"><span class="top">Σ ( EFᵢ · Aᵢ )</span><span class="bot">n · V</span></span></div>
+              <div class="plug">
+                房间体积 V = 面积 × 层高 = <code>{{ fmt(st.area, 0) }} × {{ (+st.h).toFixed(1) }} = {{ fmt(r.V, 1) }} m³</code> ·
+                通风量 n·V = <code>{{ (+st.n).toFixed(1) }} × {{ fmt(r.V, 1) }} = {{ fmt(r.nV, 1) }} m³/h</code><br />
+                总释放速率 Σ(EF·A) = <code>{{ fmt(r.totalEmis, 2) }} mg/h</code> ⇒
+                C = <code>{{ fmt(r.totalEmis, 2) }} ÷ {{ fmt(r.nV, 1) }} = {{ fmt(r.C) }} mg/m³</code>
+              </div>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-h"><div><div class="card-t"><span class="bar" />公式溯源 · 各材料甲醛浓度贡献</div><div class="muted" style="margin-top:3px">贡献ᵢ = EFᵢ·Aᵢ /(n·V) · 已按贡献排序</div></div></div>
+            <div class="contrib">
+              <div class="cb" v-for="(x, i) in r.items" :key="x.id">
+                <div class="cb-nm"><span class="rk" :style="{ background: col(i) }">{{ i + 1 }}</span>{{ x.name }}</div>
+                <div class="cb-track"><div class="cb-fill" :style="{ width: Math.max(3, x.c / maxC * 100) + '%', background: col(i) }" /></div>
+                <div class="cb-val"><span class="c" :style="{ color: col(i) }">{{ fmt(x.c) }}</span> <span class="p">{{ Math.round(x.pct * 100) }}%</span></div>
+              </div>
+              <div v-if="!r.items.length" class="muted">未选择任何材料</div>
+            </div>
+          </div>
+
+          <div class="card" v-if="r.items.length">
+            <div class="card-h"><div class="card-t"><span class="bar" />整改建议</div></div>
+            <div class="sugg">
+              <div class="sugg-ic"><BulbIcon /></div>
+              <div style="flex:1">
+                <div class="sugg-tt">{{ r.level === 'good' ? '当前方案达标 ✓' : `主要污染源:${r.items[0].name}` }}</div>
+                <div class="sugg-tx" v-if="r.level === 'good'">预测甲醛 <b>{{ fmt(r.C) }} mg/m³</b> 已低于国标限值。建议入住前仍保持 <b>{{ (+st.n).toFixed(1) }} 次/h</b> 以上通风,并复测确认。</div>
+                <div class="sugg-tx" v-else>该材料贡献 <b>{{ Math.round(r.items[0].pct * 100) }}%</b>({{ fmt(r.items[0].c) }} mg/m³)。将通风提升至 <b>{{ r.requiredN.toFixed(1) }} 次/h</b> 或更换主源材料即可达标。</div>
+                <div class="sugg-act" v-if="r.level !== 'good'">
+                  <button class="s-btn s-btn-primary" @click="applyVent">应用:通风至 {{ Math.min(3, r.requiredN).toFixed(1) }} 次/h</button>
+                  <button class="s-btn" @click="upgrade">{{ st.upg[r.items[0].id] ? '还原板材' : '更换为 E0 级板材' }}</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <transition name="fade">
+      <div class="toast" v-if="toast"><SparkIcon />{{ toast }}</div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAuthStore } from '../stores/auth';
+
+const router = useRouter();
+const auth = useAuthStore();
+
+// 图标
+const ChevronL = () => h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2.2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('path', { d: 'M15 5l-7 7 7 7' })]);
+const SourceIcon = () => h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('circle', { cx: 12, cy: 12, r: 3 }), h('path', { d: 'M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1' })]);
+const CheckIcon = () => h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '3', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('path', { d: 'M5 12l5 5L20 6' })]);
+const PlusIcon = () => h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2.4', 'stroke-linecap': 'round' }, [h('path', { d: 'M12 5v14M5 12h14' })]);
+const ArrowS = () => h('svg', { viewBox: '0 0 24 24', width: 18, height: 18, fill: 'none', stroke: 'currentColor', 'stroke-width': '2.2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('path', { d: 'M5 12h14M13 6l6 6-6 6' })]);
+const BulbIcon = () => h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('path', { d: 'M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z' })]);
+const SparkIcon = () => h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, [h('path', { d: 'M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M18 6l-2.5 2.5M8.5 15.5L6 18' })]);
+
+// 甲醛释放因子 EF [mg/(m²·h)]
+const MATS: Record<string, { name: string; cat: string; ef: number }> = {
+  floor: { name: '多层实木复合地板', cat: '地板 · 人造板基材', ef: 0.07 },
+  wardrobe: { name: '人造板衣柜', cat: '板材 · 颗粒板(展开面积)', ef: 0.04 },
+  woodpaint: { name: '木器漆 · 饰面', cat: '涂料 · 溶剂型', ef: 0.015 },
+  wallpaper: { name: '壁纸及基膜', cat: '墙面 · 胶粘剂', ef: 0.0073 },
+  sofa: { name: '布艺沙发软装', cat: '软装 · 纺织/海绵', ef: 0.032 },
+  latex: { name: '乳胶漆墙面', cat: '墙面 · 水性漆', ef: 0.006 },
+  ceiling: { name: '石膏板吊顶', cat: '顶面 · 板材', ef: 0.004 },
+  door: { name: '免漆木门', cat: '门窗 · 人造板', ef: 0.022 },
+};
+const LIMIT = 0.1, LIMIT2 = 0.07;
+const ROOMS: Record<string, { name: string; area: number; h: number; mats: Record<string, number> }> = {
+  zw: { name: '主卧', area: 18, h: 2.7, mats: { floor: 18, wardrobe: 25, woodpaint: 30, wallpaper: 40, sofa: 6 } },
+  etf: { name: '儿童房', area: 14, h: 2.7, mats: { floor: 14, wardrobe: 32, woodpaint: 24, wallpaper: 30, sofa: 4 } },
+  sf: { name: '书房', area: 12, h: 2.7, mats: { floor: 12, wardrobe: 24, woodpaint: 20, door: 8, wallpaper: 16 } },
+  kt: { name: '客厅', area: 30, h: 2.85, mats: { floor: 30, woodpaint: 38, latex: 55, sofa: 14, ceiling: 30 } },
+  wsj: { name: '卫生间', area: 6, h: 2.6, mats: { latex: 16, ceiling: 6, door: 4 } },
+};
+const LEVELTXT: Record<string, string> = { bad: '超标', warn: '临界', good: '达标' };
+const fmt = (n: number, d = 3) => Number(n).toFixed(d);
+
+function freshRoom(id: string) {
+  const r = ROOMS[id];
+  const mats: Record<string, { on: boolean; A: number }> = {};
+  Object.entries(r.mats).forEach(([k, A]) => { mats[k] = { on: true, A }; });
+  return { roomId: id, area: r.area, h: r.h, n: 0.5, mats, upg: {} as Record<string, boolean> };
+}
+
+const st = reactive(freshRoom('zw'));
+
+function compute() {
+  const V = Math.max(0.1, st.area * st.h);
+  const nV = Math.max(0.01, st.n * V);
+  const items: any[] = [];
+  Object.entries(st.mats).forEach(([id, m]: any) => {
+    if (!m.on) return;
+    const ef = MATS[id].ef * (st.upg[id] ? 0.35 : 1);
+    const emis = ef * m.A;
+    items.push({ id, name: MATS[id].name, emis, c: emis / nV });
+  });
+  const C = items.reduce((s, x) => s + x.c, 0);
+  const totalEmis = items.reduce((s, x) => s + x.emis, 0);
+  items.sort((a, b) => b.c - a.c).forEach((x, i) => { x.rank = i; x.pct = C ? x.c / C : 0; });
+  const ratio = C / LIMIT;
+  const level = ratio >= 1 ? 'bad' : ratio >= 0.85 ? 'warn' : 'good';
+  const requiredN = Math.min(3, Math.max(0.3, Math.ceil((C * st.n) / (LIMIT * 0.9) * 10) / 10));
+  return { V, nV, C, totalEmis, items, ratio, level, requiredN };
+}
+const r = computed(compute);
+const maxC = computed(() => (r.value.items.length ? r.value.items[0].c : 1));
+const addable = computed(() => Object.keys(MATS).find((k) => !st.mats[k]) || '');
+const col = (i: number) => (i === 0 ? 'var(--bad)' : i === 1 ? 'var(--warn)' : 'var(--accent)');
+
+function set(k: 'area' | 'h' | 'n', v: number) { (st as any)[k] = v; }
+function setRoom(id: string) { Object.assign(st, freshRoom(id)); }
+function toggleMat(id: string) { st.mats[id].on = !st.mats[id].on; }
+function setQty(id: string, A: number) { st.mats[id].A = A || 0; }
+function addMat() { const k = addable.value; if (k) st.mats[k] = { on: true, A: 10 }; }
+
+const toast = ref('');
+let tt: any = null;
+function fireToast(msg: string) { toast.value = msg; if (tt) clearTimeout(tt); tt = setTimeout(() => (toast.value = ''), 2600); }
+function applyVent() { st.n = Math.min(3, Math.max(st.n, r.value.requiredN)); fireToast(`已将通风换气率调整至 ${Math.min(3, r.value.requiredN).toFixed(1)} 次/h`); }
+function upgrade() {
+  const top = r.value.items[0];
+  const was = st.upg[top.id];
+  st.upg = { ...st.upg, [top.id]: !was };
+  fireToast(was ? `已还原 ${top.name}` : `已将 ${top.name} 替换为 E0 级低释放材料`);
+}
+</script>
+
+<style src="../styles/source.css"></style>
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>
diff --git a/apps/web/src/router/index.ts b/apps/web/src/router/index.ts
index 630c821..00ca2bc 100644
--- a/apps/web/src/router/index.ts
+++ b/apps/web/src/router/index.ts
@@ -2,10 +2,12 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 
 const routes = [
   { path: '/login', component: () => import('../pages/Login.vue') },
+  { path: '/landing', name: 'landing', component: () => import('../pages/Landing.vue') },
+  { path: '/source', name: 'source', component: () => import('../pages/SourceTracing.vue') },
   {
     path: '/',
     component: () => import('../layouts/AppLayout.vue'),
-    redirect: '/home',
+    redirect: '/landing',
     children: [
       { path: 'home', name: 'home', component: () => import('../pages/Home.vue') },
       { path: 'template', name: 'template', component: () => import('../pages/TemplateLibrary.vue') },
@@ -22,9 +24,16 @@ export const router = createRouter({
   routes,
 });
 
+// 公开页面（游客可访问，无需登录）
+const PUBLIC = new Set(['/landing', '/login']);
+
 router.beforeEach((to) => {
   const token = localStorage.getItem('token');
-  if (to.path !== '/login' && !token) return '/login';
-  if (to.path === '/login' && token) return '/home';
+  if (PUBLIC.has(to.path)) {
+    if (to.path === '/login' && token) return '/home';
+    return true;
+  }
+  // 预测页未登录 → 回落地页（去注册手机号）；其它受保护页 → 登录页
+  if (!token) return to.path === '/source' ? '/landing' : '/login';
   return true;
 });
diff --git a/apps/web/src/stores/auth.ts b/apps/web/src/stores/auth.ts
index 8525859..b5caa16 100644
--- a/apps/web/src/stores/auth.ts
+++ b/apps/web/src/stores/auth.ts
@@ -19,11 +19,17 @@ export const useAuthStore = defineStore('auth', () => {
     localStorage.setItem('token', res.token);
   }
 
+  function setSession(t: string, o: Org) {
+    token.value = t;
+    org.value = o;
+    localStorage.setItem('token', t);
+  }
+
   function logout() {
     token.value = null;
     org.value = null;
     localStorage.removeItem('token');
   }
 
-  return { org, token, login, logout };
+  return { org, token, login, setSession, logout };
 });
diff --git a/apps/web/src/styles/landing.css b/apps/web/src/styles/landing.css
new file mode 100644
index 0000000..2a3da6a
--- /dev/null
+++ b/apps/web/src/styles/landing.css
@@ -0,0 +1,142 @@
+/* landing.css — 引流版主界面（面向游客）。暖色环保杂志风。变量挂在 .lp 上以隔离 Ant 主题。 */
+.lp{
+  --bg:#f4f0e7; --bg2:#efe9dd; --panel:#fffdf8; --panel2:#f4efe3;
+  --border:#e9e1d2; --border2:#ded3bf;
+  --ink:#221d15; --sub:#6c6353; --faint:#a89c86;
+  --accent:#1f7a5a; --accent2:#2f9e74; --accent-deep:#165c43; --accent-soft:rgba(31,122,90,.12);
+  --good:#2f8f5b; --warn:#ca8326; --bad:#bf4a30;
+  --good-soft:rgba(47,143,91,.14); --bad-soft:rgba(191,74,48,.13);
+  --serif:'Songti SC','STSong',Georgia,'Times New Roman',serif;
+  --maxw:1180px;
+  background:var(--bg);color:var(--ink);
+  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
+  font-size:15px;line-height:1.6;letter-spacing:.1px;min-height:100vh;
+}
+.lp *{box-sizing:border-box;}
+.lp a{color:inherit;text-decoration:none;cursor:pointer;}
+.lp .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
+.lp .img-ph{display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,var(--panel2),var(--bg2));color:var(--faint);font-size:13px;border-radius:14px;padding:12px;}
+
+/* nav */
+.lp .nav{position:sticky;top:0;z-index:50;background:rgba(244,240,231,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
+.lp .nav-in{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;gap:30px;}
+.lp .brand{display:flex;align-items:center;gap:11px;}
+.lp .brand-logo{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;}
+.lp .brand-logo svg{width:21px;height:21px;}
+.lp .brand-tt{font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.1;}
+.lp .brand-sub{font-size:10px;letter-spacing:1.6px;color:var(--faint);text-transform:uppercase;}
+.lp .nav-links{display:flex;gap:26px;margin-left:14px;}
+.lp .nav-links a{font-size:14px;font-weight:500;color:var(--sub);}
+.lp .nav-links a:hover{color:var(--accent);}
+.lp .nav-sp{flex:1;}
+.lp .btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border-radius:11px;padding:11px 20px;cursor:pointer;border:1px solid var(--border2);background:var(--panel);color:var(--ink);transition:.15s;white-space:nowrap;}
+.lp .btn:hover{border-color:var(--accent);color:var(--accent);}
+.lp .btn svg{width:16px;height:16px;}
+.lp .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(31,122,90,.22);}
+.lp .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;}
+.lp .btn-lg{padding:14px 26px;font-size:15px;border-radius:13px;}
+
+/* hero */
+.lp .hero{padding:64px 0 52px;}
+.lp .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;}
+.lp .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.5px;color:var(--accent-deep);background:var(--accent-soft);border-radius:30px;padding:6px 14px;}
+.lp .eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--accent);}
+.lp .hero h1{font-family:var(--serif);font-size:52px;line-height:1.18;font-weight:800;letter-spacing:-.5px;margin:20px 0 0;}
+.lp .hero h1 em{font-style:normal;color:var(--accent);}
+.lp .hero-lead{font-size:17px;color:var(--sub);margin:20px 0 0;max-width:30em;}
+.lp .hero-cta{display:flex;gap:14px;margin-top:30px;}
+.lp .hero-tags{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap;}
+.lp .hero-tag{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub);}
+.lp .hero-tag svg{width:17px;height:17px;color:var(--accent);}
+.lp .hero-visual{position:relative;}
+.lp .hero-img{width:100%;height:420px;border-radius:22px;border:1px solid var(--border);}
+.lp .hero-badge{position:absolute;right:-14px;top:26px;background:var(--ink);color:#fff;border-radius:13px;padding:11px 15px;box-shadow:0 14px 34px rgba(0,0,0,.22);}
+.lp .hero-badge b{font-family:var(--serif);font-size:20px;display:block;}
+.lp .hero-badge span{font-size:11px;opacity:.8;}
+
+/* stats */
+.lp .stats{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
+.lp .stats-in{max-width:var(--maxw);margin:0 auto;padding:30px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
+.lp .stat{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--accent-soft);padding-left:18px;}
+.lp .stat b{font-family:var(--serif);font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1;}
+.lp .stat span{font-size:13px;color:var(--sub);}
+
+/* section */
+.lp .sec{padding:62px 0;}
+.lp .sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px;gap:20px;}
+.lp .sec-tag{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--accent);text-transform:uppercase;}
+.lp .sec-h{font-family:var(--serif);font-size:32px;font-weight:800;letter-spacing:-.4px;margin:8px 0 0;}
+.lp .sec-sub{font-size:14.5px;color:var(--sub);margin-top:8px;max-width:34em;}
+
+/* news carousel */
+.lp .carousel{position:relative;}
+.lp .cviewport{overflow:hidden;border-radius:20px;border:1px solid var(--border);background:var(--panel);}
+.lp .ctrack{display:flex;transition:transform .55s cubic-bezier(.4,.8,.2,1);}
+.lp .cslide{flex:0 0 100%;display:grid;grid-template-columns:46% 1fr;min-width:0;}
+.lp .cslide-img{position:relative;min-height:340px;}
+.lp .cslide-img .img-ph{position:absolute;inset:0;border-radius:0;}
+.lp .cslide-tag{position:absolute;top:18px;left:18px;z-index:2;font-size:11.5px;font-weight:700;color:#fff;background:rgba(31,122,90,.92);border-radius:8px;padding:5px 12px;}
+.lp .cslide-body{padding:42px 44px;display:flex;flex-direction:column;justify-content:center;}
+.lp .cslide-date{font-size:12.5px;color:var(--faint);letter-spacing:.5px;}
+.lp .cslide-body h3{font-family:var(--serif);font-size:27px;line-height:1.3;font-weight:800;margin:12px 0 0;letter-spacing:-.3px;}
+.lp .cslide-body p{font-size:15px;color:var(--sub);margin:16px 0 0;}
+.lp .cslide-more{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--accent);margin-top:24px;}
+.lp .cslide-more svg{width:16px;height:16px;}
+.lp .cnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(60,45,20,.12);z-index:5;}
+.lp .cnav:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
+.lp .cnav svg{width:20px;height:20px;}
+.lp .cnav.prev{left:-23px;} .lp .cnav.next{right:-23px;}
+.lp .cdots{display:flex;gap:9px;justify-content:center;margin-top:22px;}
+.lp .cdot{width:9px;height:9px;border-radius:50%;border:none;background:var(--border2);cursor:pointer;padding:0;transition:.2s;}
+.lp .cdot.on{background:var(--accent);width:26px;border-radius:5px;}
+
+/* cases */
+.lp .cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
+.lp .case{background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:.18s;}
+.lp .case:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(60,45,20,.12);}
+.lp .case .img-ph{width:100%;height:172px;border-radius:0;}
+.lp .case-b{padding:18px 19px 20px;}
+.lp .case-type{font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.5px;}
+.lp .case h4{font-family:var(--serif);font-size:18px;font-weight:700;margin:7px 0 0;}
+.lp .case-meta{font-size:12.5px;color:var(--faint);margin-top:3px;}
+.lp .ba{margin-top:16px;display:flex;flex-direction:column;gap:9px;}
+.lp .ba-row{display:grid;grid-template-columns:42px 1fr 62px;align-items:center;gap:10px;font-size:12px;}
+.lp .ba-row .k{color:var(--sub);font-weight:600;}
+.lp .ba-track{height:9px;background:var(--panel2);border-radius:5px;overflow:hidden;}
+.lp .ba-fill{height:100%;border-radius:5px;}
+.lp .ba-row .v{text-align:right;font-family:var(--serif);font-weight:800;font-variant-numeric:tabular-nums;}
+.lp .case-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
+.lp .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:8px;padding:4px 11px;}
+.lp .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
+.lp .chip-good{color:var(--good);background:var(--good-soft);}
+.lp .case-foot .lk{font-size:13px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;}
+
+/* steps */
+.lp .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
+.lp .step{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:26px 24px;position:relative;}
+.lp .step-n{font-family:var(--serif);font-size:14px;font-weight:800;color:var(--accent);width:34px;height:34px;border-radius:10px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;}
+.lp .step h4{font-family:var(--serif);font-size:19px;font-weight:700;margin:16px 0 0;}
+.lp .step p{font-size:14px;color:var(--sub);margin:9px 0 0;}
+.lp .step-ar{position:absolute;right:-22px;top:50%;transform:translateY(-50%);color:var(--border2);z-index:2;}
+.lp .step-ar svg{width:24px;height:24px;}
+
+/* cta band */
+.lp .ctaband{background:linear-gradient(135deg,var(--accent-deep),var(--accent));color:#fff;border-radius:24px;padding:52px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px;overflow:hidden;position:relative;}
+.lp .ctaband h2{font-family:var(--serif);font-size:34px;font-weight:800;letter-spacing:-.4px;margin:0;line-height:1.25;}
+.lp .ctaband p{margin:12px 0 0;font-size:15.5px;opacity:.85;max-width:30em;}
+.lp .ctaband .btn-primary{background:#fff;color:var(--accent-deep);border-color:#fff;}
+.lp .ctaband .btn-primary:hover{background:#f4f0e7;color:var(--accent-deep);border-color:#f4f0e7;}
+.lp .ctaband .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;}
+.lp .ctaband .deco{position:absolute;right:-40px;top:-40px;width:220px;height:220px;border:32px solid rgba(255,255,255,.07);border-radius:50%;}
+
+/* footer */
+.lp .footer{border-top:1px solid var(--border);margin-top:62px;}
+.lp .footer-in{max-width:var(--maxw);margin:0 auto;padding:34px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--faint);font-size:13px;}
+.lp .footer .brand-tt{font-size:15px;}
+
+@media(max-width:900px){
+  .lp .hero-grid,.lp .cslide{grid-template-columns:1fr;}
+  .lp .stats-in,.lp .cases-grid,.lp .steps{grid-template-columns:1fr 1fr;}
+  .lp .nav-links{display:none;}
+  .lp .hero h1{font-size:38px;}
+}
diff --git a/apps/web/src/styles/source.css b/apps/web/src/styles/source.css
new file mode 100644
index 0000000..9092bb8
--- /dev/null
+++ b/apps/web/src/styles/source.css
@@ -0,0 +1,122 @@
+/* source.css — 污染源识别工具（暖绿杂志风），变量挂在 .s-app 上。 */
+.s-app {
+  --bg: #f4f0e7; --panel: #fffdf8; --panel2: #f4efe3; --panel3: #ede6d8;
+  --border: #e9e1d2; --border2: #ded3bf;
+  --ink: #221d15; --sub: #6c6353; --faint: #a89c86;
+  --accent: #1f7a5a; --accent2: #2f9e74; --accent-soft: rgba(31,122,90,.12); --accent-deep: #165c43;
+  --good: #2f8f5b; --good-soft: rgba(47,143,91,.14);
+  --warn: #ca8326; --warn-soft: rgba(202,131,38,.16);
+  --bad: #bf4a30; --bad-soft: rgba(191,74,48,.13);
+  --track: #ebe3d4; --radius: 16px;
+  --serif: 'Songti SC','STSong',Georgia,'Times New Roman',serif;
+  background: var(--bg); color: var(--ink);
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
+  font-size: 14px; letter-spacing: .1px;
+  height: 100vh; display: flex; flex-direction: column;
+}
+.s-app * { box-sizing: border-box; }
+
+.s-top { flex: 0 0 64px; display: flex; align-items: center; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--border); background: rgba(255,253,248,.85); }
+.s-back { display: flex; align-items: center; gap: 7px; color: var(--sub); font-size: 13px; font-weight: 500; cursor: pointer; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel); white-space: nowrap; }
+.s-back:hover { background: var(--panel2); }
+.s-back svg { width: 15px; height: 15px; }
+.s-logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
+.s-logo svg { width: 19px; height: 19px; }
+.s-tt { font-family: var(--serif); font-size: 18px; font-weight: 700; }
+.s-tt small { font-size: 11px; color: var(--faint); font-weight: 500; letter-spacing: 1px; margin-left: 8px; }
+.s-spacer { flex: 1; }
+
+.s-body { flex: 1; overflow-y: auto; padding: 22px 28px 30px; }
+.s-grid { display: grid; gap: 18px; align-items: start; grid-template-columns: 400px 1fr; }
+
+.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
+.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+.card-t { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
+.card-t .bar { width: 3px; height: 14px; border-radius: 2px; background: var(--accent); }
+.card-step { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; }
+.muted { color: var(--faint); font-size: 11px; font-weight: 500; }
+
+.fld { margin-bottom: 16px; }
+.fld-lab { font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; }
+.fld-lab .v { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 14px; }
+.rooms { display: flex; flex-wrap: wrap; gap: 7px; }
+.room-b { font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--border2); background: var(--panel); color: var(--sub); cursor: pointer; transition: .12s; white-space: nowrap; }
+.room-b:hover { border-color: var(--accent); color: var(--accent); }
+.room-b.on { background: var(--accent); border-color: var(--accent); color: #fff; }
+.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.num { display: flex; align-items: center; background: var(--panel2); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
+.num input { flex: 1; min-width: 0; border: none; background: transparent; padding: 9px 11px; font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink); outline: none; }
+.num .unit { font-size: 11px; color: var(--faint); padding: 0 11px; font-weight: 600; }
+.slider { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px; background: var(--track); outline: none; }
+.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); border: 3px solid #fff; }
+.slider-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); margin-top: 4px; }
+
+.mats { display: flex; flex-direction: column; gap: 8px; }
+.mat { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel2); }
+.mat.off { opacity: .42; }
+.mat-chk { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border2); flex: 0 0 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--panel); }
+.mat-chk.on { background: var(--accent); border-color: var(--accent); }
+.mat-chk svg { width: 12px; height: 12px; color: #fff; }
+.mat-main { flex: 1; min-width: 0; }
+.mat-nm { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mat-cat { font-size: 10px; color: var(--faint); }
+.mat-qty { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
+.mat-qty input { width: 52px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); padding: 5px 7px; font-family: var(--serif); font-weight: 700; font-size: 13px; text-align: right; color: var(--ink); outline: none; }
+.mat-qty .u { font-size: 10px; color: var(--faint); }
+.add-mat { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent); border: 1px dashed var(--border2); border-radius: 11px; padding: 9px; cursor: pointer; background: transparent; width: 100%; }
+.add-mat:hover { background: var(--accent-soft); }
+.add-mat svg { width: 15px; height: 15px; flex: 0 0 15px; }
+
+.verdict { display: flex; align-items: center; gap: 22px; }
+.verd-num { font-family: var(--serif); font-weight: 800; letter-spacing: -1px; line-height: .9; }
+.verd-num .big { font-size: 56px; }
+.verd-num .u { font-size: 16px; color: var(--faint); margin-left: 4px; }
+.verd-meta { display: flex; flex-direction: column; gap: 8px; }
+.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; border-radius: 9px; padding: 6px 13px; width: fit-content; }
+.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
+.chip-bad { color: var(--bad); background: var(--bad-soft); }
+.chip-warn { color: var(--warn); background: var(--warn-soft); }
+.chip-good { color: var(--good); background: var(--good-soft); }
+.verd-sub { font-size: 12.5px; color: var(--sub); }
+.verd-sub b { color: var(--ink); }
+
+.gate { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; font-size: 12px; margin: 14px 0 0; }
+.gate-step { text-align: center; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--sub); font-weight: 600; white-space: nowrap; font-size: 12px; }
+.gate-step.act { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
+.gate-step.bad { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
+.gate-arrow { color: var(--faint); flex: 0 0 auto; display: flex; align-items: center; }
+
+.formula { background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-family: var(--serif); }
+.formula .eq { font-size: 17px; font-weight: 700; letter-spacing: .3px; }
+.formula .frac { display: inline-block; vertical-align: middle; }
+.formula .frac .top { display: block; border-bottom: 2px solid currentColor; padding: 0 8px; font-size: 14px; }
+.formula .frac .bot { display: block; padding: 2px 8px 0; font-size: 14px; text-align: center; }
+.formula .plug { font-family: var(--sans, sans-serif); font-size: 12px; color: var(--sub); margin-top: 8px; line-height: 1.7; }
+.formula .plug code { font-family: var(--serif); font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); border-radius: 5px; padding: 1px 6px; }
+
+.contrib { display: flex; flex-direction: column; gap: 11px; }
+.cb { display: grid; grid-template-columns: 140px 1fr 92px; align-items: center; gap: 12px; }
+.cb-nm { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cb-nm .rk { display: inline-block; width: 17px; height: 17px; border-radius: 5px; font-size: 10px; font-weight: 800; text-align: center; line-height: 17px; margin-right: 7px; color: #fff; }
+.cb-track { height: 18px; background: var(--track); border-radius: 6px; overflow: hidden; }
+.cb-fill { height: 100%; border-radius: 6px; transition: width .35s cubic-bezier(.3,.8,.3,1); }
+.cb-val { text-align: right; font-size: 12px; }
+.cb-val .c { font-family: var(--serif); font-weight: 800; }
+.cb-val .p { font-size: 10.5px; color: var(--faint); }
+
+.sugg { display: flex; gap: 13px; padding: 15px 17px; border-radius: 13px; background: linear-gradient(180deg, var(--accent-soft), rgba(31,122,90,.04)); border: 1px solid rgba(31,122,90,.18); }
+.sugg-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
+.sugg-ic svg { width: 19px; height: 19px; }
+.sugg-tt { font-size: 13px; font-weight: 700; font-family: var(--serif); margin-bottom: 4px; }
+.sugg-tx { font-size: 12.5px; color: var(--sub); line-height: 1.6; }
+.sugg-tx b { color: var(--accent-deep); }
+.sugg-act { display: flex; gap: 9px; margin-top: 11px; }
+.s-btn { font-size: 12.5px; font-weight: 600; border-radius: 9px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--border2); background: var(--panel); color: var(--ink); white-space: nowrap; }
+.s-btn:hover { border-color: var(--accent); }
+.s-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+.s-btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
+.stack { display: flex; flex-direction: column; gap: 18px; }
+.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 12px 20px; border-radius: 11px; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 80; display: flex; align-items: center; gap: 9px; }
+.toast svg { width: 16px; height: 16px; color: var(--accent2); }
+
+@media(max-width:880px){ .s-grid { grid-template-columns: 1fr; } }