<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Service Entry Landing Template</title>
  <meta name="description" content="A native static landing page template for content-led service entry pages." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" />
  <style>
    :root {
      --paper: #fffdf6;
      --ink: #080808;
      --muted: #55524c;
      --line: #080808;
      --green: #39a86b;
      --red: #e94b5b;
      --yellow: #ffd74a;
      --radius: 24px;
      --container: 1040px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 18px;
      line-height: 1.35;
    }

    a { color: inherit; text-decoration: none; }

    .pride-bar {
      display: block;
      padding: 10px 16px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      background: linear-gradient(90deg, #ff595e, #ffca3a, #8ac926, #1982c4, #6a4c93);
      color: #fff;
    }

    .container {
      width: min(var(--container), calc(100% - 40px));
      margin: 0 auto;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 0 18px;
    }

    .logo {
      width: 76px;
      height: 42px;
      border: 3px solid var(--line);
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-weight: 800;
      letter-spacing: -0.08em;
      transform: rotate(-2deg);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 18px;
      font-size: 15px;
      font-weight: 700;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 24px;
      border: 3px solid var(--line);
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink);
      font-weight: 800;
      box-shadow: none;
      transition: transform 160ms ease, background 160ms ease;
    }

    .button:hover { transform: translateY(-2px); background: #fff; }

    .button.dark { background: var(--ink); color: var(--paper); }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.96fr);
      gap: 52px;
      align-items: center;
      min-height: 640px;
      padding: 34px 0 82px;
    }

    h1, h2, h3, p { margin: 0; }

    h1 {
      max-width: 680px;
      font-size: clamp(52px, 9vw, 116px);
      line-height: 0.98;
      letter-spacing: -0.04em;
      font-weight: 800;
    }

    .lead {
      max-width: 560px;
      margin-top: 26px;
      font-size: clamp(20px, 2.2vw, 30px);
      line-height: 1.1;
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .fine-print {
      max-width: 430px;
      margin-top: 14px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }

    .comic-card {
      position: relative;
      min-height: 430px;
      border: 4px solid var(--line);
      border-radius: 36px;
      background: #fff;
      overflow: hidden;
      transform: rotate(1.5deg);
    }

    .comic-card::before {
      content: "";
      position: absolute;
      inset: 20px;
      border: 3px solid var(--line);
      border-radius: 28px;
      background:
        radial-gradient(circle at 72% 23%, var(--yellow) 0 42px, transparent 44px),
        linear-gradient(135deg, transparent 0 46%, #000 46% 47%, transparent 47% 100%);
      opacity: 0.92;
    }

    .mascot {
      position: absolute;
      right: 54px;
      top: 52px;
      width: 142px;
      height: 142px;
      border: 4px solid var(--line);
      border-radius: 48% 52% 44% 56%;
      background: var(--paper);
      transform: rotate(8deg);
    }

    .mascot::before,
    .mascot::after {
      content: "";
      position: absolute;
      top: 48px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--ink);
    }

    .mascot::before { left: 38px; }
    .mascot::after { right: 38px; }

    .desk {
      position: absolute;
      left: 52px;
      bottom: 70px;
      width: 260px;
      height: 120px;
      border: 4px solid var(--line);
      border-radius: 24px;
      background: var(--paper);
      transform: rotate(-4deg);
    }

    .desk::before {
      content: "你的事\A别再散落在聊天里";
      white-space: pre;
      position: absolute;
      left: 22px;
      top: 20px;
      font-size: 22px;
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding: 18px 0 96px;
    }

    .stat {
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    .check {
      width: 30px;
      height: 30px;
      border: 3px solid var(--line);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #fff;
      color: var(--green);
      font-size: 19px;
    }

    .section {
      padding: 96px 0;
      border-top: 3px solid var(--line);
    }

    .section.center { text-align: center; }

    h2 {
      font-size: clamp(42px, 6.5vw, 82px);
      line-height: 0.92;
      letter-spacing: -0.07em;
      font-weight: 800;
    }

    .problem-grid {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 56px;
      align-items: start;
    }

    .problem-list {
      display: grid;
      gap: 18px;
      margin-top: 8px;
      padding: 0;
      list-style: none;
    }

    .problem-list li {
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 14px;
      align-items: start;
      font-size: clamp(22px, 3vw, 34px);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.055em;
    }

    .xmark {
      width: 30px;
      height: 30px;
      border: 3px solid var(--line);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--red);
      background: #fff;
      font-size: 18px;
    }

    .testimonials {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 48px;
      text-align: left;
    }

    .quote {
      border: 3px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      background: #fff;
      min-height: 250px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transform: rotate(var(--tilt, 0deg));
    }

    .quote p {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .quote strong { display: block; margin-top: 28px; font-size: 15px; }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 34px 46px;
      margin-top: 56px;
    }

    .service {
      padding-top: 28px;
      border-top: 3px solid var(--line);
    }

    .service h3 {
      font-size: 28px;
      line-height: 1;
      letter-spacing: -0.055em;
    }

    .service ul {
      margin: 18px 0 0;
      padding-left: 1.1em;
      color: var(--muted);
      font-size: 16px;
      font-weight: 700;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 44px;
    }

    .step {
      min-height: 220px;
      border: 3px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      background: #fff;
    }

    .number {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 3px solid var(--line);
      border-radius: 50%;
      margin-bottom: 28px;
      font-weight: 800;
    }

    .step h3 {
      font-size: 30px;
      line-height: 0.98;
      letter-spacing: -0.055em;
    }

    .bottom-nudge {
      padding: 116px 0 80px;
      text-align: center;
    }

    .bottom-nudge p {
      max-width: 720px;
      margin: 22px auto 34px;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.04em;
    }

    .giant-button {
      width: min(620px, 100%);
      min-height: 108px;
      border-radius: 28px;
      padding-block: 18px;
      font-size: clamp(24px, 4vw, 42px);
      line-height: 1.08;
      letter-spacing: -0.06em;
    }

    footer {
      margin: 0 auto 36px;
      width: min(var(--container), calc(100% - 40px));
      border: 4px solid var(--line);
      border-radius: 36px;
      padding: 30px;
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      gap: 24px;
      align-items: center;
      background: #fff;
    }

    .email-form {
      display: flex;
      gap: 10px;
    }

    input {
      min-width: 0;
      width: 100%;
      border: 3px solid var(--line);
      border-radius: 999px;
      padding: 0 18px;
      font: inherit;
      font-size: 15px;
      font-weight: 700;
      background: var(--paper);
      color: var(--ink);
      outline: none;
    }

    .footer-links {
      display: flex;
      justify-content: end;
      gap: 16px;
      font-size: 14px;
      font-weight: 800;
    }

    @media (max-width: 860px) {
      .hero, .problem-grid, .service-grid, footer { grid-template-columns: 1fr; }
      .stats, .testimonials, .steps { grid-template-columns: 1fr; }
      .hero { min-height: auto; padding-top: 22px; }
      .comic-card { min-height: 340px; }
      .nav { align-items: flex-start; }
      .nav-links { flex-direction: column; align-items: flex-end; }
      footer { text-align: center; }
      .footer-links { justify-content: center; }
      .email-form { flex-direction: column; }
      input { min-height: 50px; }
    }
  </style>
</head>
<body>
  <a class="pride-bar" href="#contact">从内容平台点进来？这里负责把信任接住 →</a>

  <header class="container nav">
    <a class="logo" href="#top" aria-label="home">oh</a>
    <nav class="nav-links" aria-label="Primary navigation">
      <a href="#services">能处理什么</a>
      <a class="button" href="#contact">接入 IM</a>
    </nav>
  </header>

  <main id="top">
    <section class="container hero">
      <div>
        <h1>你的业务，不该被工具杂活拖死。</h1>
        <p class="lead">我们把 AI、网站、表单、自动化、账号权限这些乱糟糟的事，整理成能交付的工作流。</p>
        <div class="hero-actions">
          <a class="button dark" href="#contact">发到微信 / 飞书</a>
          <a class="button" href="#services">先看范围</a>
        </div>
        <p class="fine-print">这个页面不是主获客机器。它是短视频、小红书、公众号内容之后的信任入口。</p>
      </div>
      <div class="comic-card" aria-label="cartoon style service illustration">
        <div class="mascot"></div>
        <div class="desk"></div>
      </div>
    </section>

    <section class="container stats" aria-label="service promises">
      <div class="stat"><span class="check">✓</span><span>少解释几遍</span></div>
      <div class="stat"><span class="check">✓</span><span>少开几个会</span></div>
      <div class="stat"><span class="check">✓</span><span>少救几次火</span></div>
    </section>

    <section class="section">
      <div class="container problem-grid">
        <h2>日常最烦的不是大问题。</h2>
        <ul class="problem-list">
          <li><span class="xmark">×</span><span>表单又坏了，线索没进 CRM。</span></li>
          <li><span class="xmark">×</span><span>账号权限乱成一锅粥。</span></li>
          <li><span class="xmark">×</span><span>AI 工具买了一堆，没人知道怎么接进工作。</span></li>
        </ul>
      </div>
    </section>

    <section class="section center">
      <div class="container">
        <h2>别听我们吹，听现场怎么说。</h2>
        <div class="testimonials">
          <article class="quote" style="--tilt:-1.5deg"><p>“终于有人能把老板一句‘能不能自动化一下’翻译成真的流程。”</p><strong>内容团队负责人</strong></article>
          <article class="quote" style="--tilt:1deg"><p>“不是上来卖课，也不是扔一堆工具名。先把最卡的地方修掉。”</p><strong>小型服务公司主理人</strong></article>
          <article class="quote" style="--tilt:-0.5deg"><p>“页面只是入口，真正交付在群里、文档里、自动化里。这个定位是对的。”</p><strong>独立顾问</strong></article>
        </div>
      </div>
    </section>

    <section class="section" id="services">
      <div class="container">
        <h2>我们接的是工作，不是玄学转型。</h2>
        <div class="service-grid">
          <div class="service"><h3>AI 工作流落地</h3><ul><li>提示词与 SOP</li><li>内容生产流程</li><li>资料整理与知识库</li></ul></div>
          <div class="service"><h3>网站与表单</h3><ul><li>落地页改造</li><li>表单/支付/通知串联</li><li>基础监控与报错处理</li></ul></div>
          <div class="service"><h3>IM 交付中台</h3><ul><li>微信/飞书/Slack 对接</li><li>任务分发与状态回传</li><li>客户沟通模板</li></ul></div>
          <div class="service"><h3>工具与权限治理</h3><ul><li>SaaS 订阅盘点</li><li>账号权限整理</li><li>团队使用规范</li></ul></div>
        </div>
      </div>
    </section>

    <section class="section center">
      <div class="container">
        <h2>入口页只做三件事。</h2>
        <div class="steps">
          <article class="step"><div class="number">1</div><h3>承接内容流量</h3></article>
          <article class="step"><div class="number">2</div><h3>说明服务边界</h3></article>
          <article class="step"><div class="number">3</div><h3>把人送进 IM</h3></article>
        </div>
      </div>
    </section>

    <section class="bottom-nudge" id="contact">
      <div class="container">
        <h2>你都滑到这里了。</h2>
        <p>如果问题已经在脑子里转了三天，别再开第十二个收藏夹了。发过来，拆掉它。</p>
        <a class="button giant-button dark" href="https://example.com/im">接入真人对接<br />别让工具继续吃时间</a>
      </div>
    </section>
  </main>

  <footer>
    <a class="logo" href="#top">oh</a>
    <form class="email-form">
      <input type="email" placeholder="your@email.com" aria-label="Email" />
      <button class="button dark" type="submit">订阅</button>
    </form>
    <div class="footer-links">
      <a href="#services">范围</a>
      <a href="#contact">联系</a>
    </div>
  </footer>
</body>
</html>
