Bloom AI

为“Bloom”创建一个全屏 hero landing page——这是一个由 AI 驱动的植物/花艺设计平台。设计采用液态玻璃拟态美学，并以循环视频作为背景。

背景
全屏自动播放、循环、静音视频背景：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4
视频使用 object-cover 覆盖整个 viewport，位于 z-0。所有内容悬浮于其上方的 z-10。

字体
展示/正文：Poppins (Google Fonts)——用于标题和正文文本
衬线强调字体：Source Serif 4 (Google Fonts)——仅用于标题内的斜体/强调文本（例如 h1-h3 内的 <em>、<i>、.italic）
标题使用 font-weight: 500

配色方案
严格仅使用灰度——所有 CSS variables 均为 0 0% X% HSL values
文本按层级使用 text-white、text-white/80、text-white/60、text-white/50
不得使用任何彩色强调色

液态玻璃 CSS（两个层级）
在 @layer components 下定义：

.liquid-glass（轻量）
background: rgba(255,255,255,0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
position: relative; overflow: hidden;
::before pseudo-element：使用 linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%) 创建渐变边框，设置 padding: 1.4px，并通过 -webkit-mask-composite: xor; mask-composite: exclude; 进行遮罩；

.liquid-glass-strong（厚重，用于 CTA/panels）
结构相同，但 backdrop-filter: blur(50px)，box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15)，且 ::before 使用 0.5/0.2 alpha，而不是 0.45/0.15。

布局——双面板拆分
Flex row，min-h-screen。左侧面板 w-[52%]，右侧面板 w-[48%]（移动端隐藏，lg:flex）。

左侧面板
带有 liquid-glass-strong overlay（absolute inset-4 lg:inset-6 rounded-3xl）
Nav：左侧为 Logo image（/logo.png，32×32）+“bloom”文本（semibold、2xl、tracking-tighter、white）。右侧为带 Menu icon 的“Menu”按钮，采用 liquid-glass pill。
Hero 中心区域（flex-1、居中）：
再次显示 Logo image（80×80）
h1：“Innovating the / spirit of bloom AI”——text-6xl lg:text-7xl、tracking-[-0.05em]、white。斜体部分使用 font-serif text-white/80
CTA button：“Explore Now”，带有一个位于 w-7 h-7 rounded-full bg-white/15 圆形内的 Download icon。按钮使用 liquid-glass-strong、rounded-full、hover:scale-105 active:scale-95
三个 pills：“Artistic Gallery”“AI Generation”“3D Structures”——liquid-glass、rounded-full、text-xs text-white/80
底部引语：
“VISIONARY DESIGN”label（text-xs tracking-widest uppercase text-white/50）
引语：“We imagined a realm with no ending.”——混合使用 font-display/font-serif italic spans
作者：“MARCUS AURELIO”，两侧各有一条水平线

右侧面板（仅桌面端）
顶部栏：Social icons（Twitter、LinkedIn、Instagram）放在带 ArrowRight 的 liquid-glass pill 中。Account button 与 Sparkles icon button，二者均使用 liquid-glass。
社区卡片：小型 liquid-glass card（w-56），包含“Enter our ecosystem”标题 + 描述
底部功能区（mt-auto）：外层为带 rounded-[2.5rem] 的 liquid-glass container
两个并排 cards：“Processing”（Wand2 icon）和“Growth Archive”（BookOpen icon），均使用 liquid-glass rounded-3xl
底部 card：花朵图片 thumbnail（来自 @/assets/hero-flowers.png，96×64）、“Advanced Plant Sculpting”标题 + 描述，以及一个“+”按钮。全部使用 liquid-glass。

图标
全部来自 lucide-react：Sparkles、Download、Wand2、BookOpen、ArrowRight、Twitter、Linkedin、Instagram、Menu

关键细节
所有 interactive elements：hover:scale-105 transition-transform
Social icon links：text-white hover:text-white/80 transition-colors
Icon containers：w-8 h-8 rounded-full bg-white/10 flex items-center justify-center
任何位置均不得使用 border classes——玻璃效果通过 ::before 处理所有边框
border-radius token：--radius: 1rem