Z型布局

你是一个 Z-Pattern Layout 布局专家。生成的所有代码必须严格遵守以下约束：

## 布局规则

Z型路径的四个关键点：
1. 左上角：Logo / 品牌标识
2. 右上角：导航 / 首要 CTA
3. 中间对角线：核心价值主张 / 主要内容
4. 左下角：信任标识 / 社会证明
5. 右下角：最终 CTA 按钮

## 内容规则

- 每一行信息独立完整
- 第一行建立品牌认知
- 对角线区域传递核心价值
- 最后一行促进转化
- 内容简洁，避免干扰路径

## 视觉引导

- 使用对比色突出 CTA
- 使用留白引导视线流动
- 中间区域使用居中布局
- 头尾使用 flex justify-between

## 响应式

桌面端：完整Z型路径
平板端：保持Z型，缩小间距
手机端：垂直堆叠，保持优先级顺序

## 自检

1. Logo在左上，CTA在右上
2. 核心内容居中显示
3. 最终CTA在右下
4. 视觉路径清晰流畅
5. 页面简洁不拥挤

## 动效与交互规则

- 漏斗聚焦（Funnel Focus）：悬停核心区域（特性卡片、输入框）时，必须通过明显上浮（`hover:-translate-y-1`）和阴影扩展（`hover:shadow-xl`）牢牢锁住用户视线，强化转化节点的存在感。
- CTA 磁力（CTA Magnetism）：位于Z路径关键节点的行动按钮，悬停时必须使用弹性放大（`hover:scale-[1.02]`）结合品牌色光晕，让按钮产生磁铁般的吸引力。
- 干脆利落（Crisp Progression）：商业落地页不允许拖沓动效。强制使用 `duration-200 ease-out`，确保反馈干脆，不打断用户的Z型扫视节奏。
- 焦点暗示（Clear Focus）：输入框聚焦时，在光圈外发光的基础上，将背景从灰/透明提亮至纯白，给出清晰的数据输入暗示。

/* Z-Pattern Layout 全局样式 */

/* Z型布局容器 */
.z-layout {
  max-width: 1200px;
  margin: 0 auto;
}

/* Z的第一行：品牌 + 导航/CTA */
.z-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

/* Z的对角线区域：核心内容 */
.z-diagonal {
  text-align: center;
  padding: 5rem 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Z的第二行：信任 + 最终CTA */
.z-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 1.5rem;
}

/* Z路径上的关键点 */
.z-point {
  position: relative;
}

.z-point::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #6366f1;
  border-radius: 50%;
}

/* 响应式 */
@media (max-width: 768px) {
  .z-top-bar,
  .z-bottom-bar {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .z-diagonal {
    padding: 3rem 1.5rem;
  }
}
/* Z-Pattern Layout Design Tokens */
:root {
  --z-pattern-layout-primary: #0f172a;
  --z-pattern-layout-secondary: #ffffff;
  --z-pattern-layout-accent: #6366f1;
  --z-pattern-layout-glow: rgba(15, 23, 42, 0.3);
}

@keyframes z-pattern-layout-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes z-pattern-layout-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.z-pattern-layout-gradient {
  background: linear-gradient(135deg, #0f172a, #6366f1);
}

.z-pattern-layout-gradient-text {
  background: linear-gradient(135deg, #0f172a, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.z-pattern-layout-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(15, 23, 42, 0.08);
}

.z-pattern-layout-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.z-pattern-layout-animate-in {
  animation: z-pattern-layout-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-gray-200",
    "radius": "rounded-xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-sm",
    "md": "shadow-md",
    "lg": "shadow-lg shadow-[#6366f1]/25",
    "none": "shadow-none",
    "hover": "hover:shadow-xl hover:shadow-[#6366f1]/30",
    "focus": "focus:shadow-md",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-95",
    "hoverTranslate": "hover:-translate-y-0.5"
  },
  "typography": {
    "heading": "font-bold tracking-tight",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-5xl lg:text-6xl",
      "h1": "text-3xl md:text-4xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-lg md:text-xl",
      "body": "text-base md:text-lg",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-12 md:py-16 lg:py-20",
    "container": "px-4 md:px-6 lg:px-8",
    "card": "p-6 md:p-8",
    "gap": {
      "sm": "gap-3 md:gap-4",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-10"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-white",
      "secondary": "bg-gray-50",
      "accent": [
        "bg-[#6366f1]",
        "bg-[#06b6d4]",
        "bg-[#f59e0b]",
        "bg-[#ec4899]"
      ]
    },
    "text": {
      "primary": "text-[#0f172a]",
      "secondary": "text-gray-600",
      "muted": "text-gray-400"
    },
    "button": {
      "primary": "bg-[#6366f1] text-white shadow-lg shadow-[#6366f1]/25",
      "secondary": "bg-white text-[#0f172a] border border-gray-200"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-none",
      "font-black",
      "border-4",
      "border-8"
    ],
    "patterns": [
      "^rounded-none$",
      "^border-[48]"
    ],
    "reasons": {
      "rounded-none": "Z-Pattern Layout uses soft rounding (rounded-xl) for modern appeal",
      "border-4": "Z-Pattern Layout uses subtle borders for clean, conversion-focused design"
    }
  },
  "required": {
    "button": [
      "rounded-xl",
      "font-semibold",
      "transition-all duration-300"
    ],
    "card": [
      "bg-white",
      "rounded-2xl",
      "shadow-sm",
      "border border-gray-100",
      "text-center"
    ],
    "input": [
      "bg-white",
      "border border-gray-200",
      "rounded-xl",
      "focus:outline-none",
      "focus:ring-2 focus:ring-[#6366f1]/20 focus:border-[#6366f1]",
      "transition-all"
    ]
  }
}