<!DOCTYPE html>
<html lang="en" data-lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TJ PRO - Production Domain Gateway</title>
  <meta name="description" content="TJ PRO is the production gateway for verified TJ NOVA web projects, domain routing, and public legal pages.">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png" href="/favicon.png">
  <meta name="theme-color" content="#f7f4ee">
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    :root {
      color-scheme: light;
      --ink: #171717;
      --muted: #65625b;
      --line: #ded8cd;
      --paper: #fbfaf6;
      --wash: #f0ece3;
      --green: #1f7a56;
      --blue: #3158a7;
      --gold: #b7822d;
      --white: #ffffff;
    }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 15% 18%, rgba(49, 88, 167, .14), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(183, 130, 45, .18), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, var(--paper) 48%, #f4efe4 100%);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      line-height: 1.5;
    }
    body.lang-zh .en { display: none; }
    body:not(.lang-zh) .zh { display: none; }
    a { color: inherit; }
    .shell {
      width: min(1180px, calc(100% - 36px));
      margin: 0 auto;
    }
    header {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(222, 216, 205, .72);
      background: rgba(251, 250, 246, .84);
      backdrop-filter: blur(18px);
    }
    .nav {
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: .06em;
    }
    .mark {
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, #ffffff, #e8dfcf);
      box-shadow: 0 10px 25px rgba(23, 23, 23, .08);
      font-size: 12px;
    }
    nav {
      display: flex;
      align-items: center;
      gap: 20px;
      color: var(--muted);
      font-size: 14px;
    }
    nav a {
      text-decoration: none;
    }
    .lang-toggle {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      color: var(--ink);
      height: 36px;
      padding: 0 12px;
      cursor: pointer;
      font-weight: 700;
    }
    .hero {
      min-height: calc(100vh - 68px);
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr);
      align-items: center;
      gap: 56px;
      padding: 72px 0 64px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 7px 12px;
      border: 1px solid rgba(31, 122, 86, .18);
      border-radius: 999px;
      background: rgba(31, 122, 86, .08);
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .11em;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
    }
    h1 {
      margin: 24px 0 18px;
      max-width: 760px;
      font-size: clamp(46px, 7vw, 88px);
      line-height: .95;
      letter-spacing: 0;
    }
    .lead {
      max-width: 650px;
      margin: 0 0 30px;
      color: var(--muted);
      font-size: clamp(17px, 2vw, 21px);
    }
    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }
    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      padding: 0 18px;
      font-weight: 800;
      text-decoration: none;
      border: 1px solid var(--line);
      background: var(--white);
    }
    .button.primary {
      background: var(--ink);
      color: var(--white);
      border-color: var(--ink);
    }
    .status-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 34px;
      max-width: 660px;
    }
    .status {
      border: 1px solid rgba(222, 216, 205, .86);
      border-radius: 8px;
      background: rgba(255, 255, 255, .78);
      padding: 16px;
      min-height: 96px;
    }
    .status b {
      display: block;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--green);
      margin-bottom: 8px;
    }
    .status span {
      color: var(--muted);
      font-size: 14px;
    }
    .visual {
      min-height: 520px;
      position: relative;
      display: grid;
      place-items: center;
      perspective: 1100px;
    }
    .glass {
      position: absolute;
      inset: 8% 4%;
      border: 1px solid rgba(222, 216, 205, .82);
      border-radius: 8px;
      background: rgba(255, 255, 255, .62);
      box-shadow: 0 30px 90px rgba(23, 23, 23, .12);
      transform: rotateX(58deg) rotateZ(-22deg);
    }
    .cube {
      width: min(72vw, 420px);
      aspect-ratio: 1;
      position: relative;
      transform-style: preserve-3d;
      animation: floatCube 7s ease-in-out infinite;
    }
    .plane {
      position: absolute;
      inset: 12%;
      border: 1px solid rgba(23, 23, 23, .12);
      border-radius: 8px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(240, 236, 227, .5));
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    }
    .p1 { transform: rotateY(0deg) translateZ(88px); }
    .p2 { transform: rotateY(90deg) translateZ(88px); }
    .p3 { transform: rotateX(90deg) translateZ(88px); }
    .node {
      position: absolute;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 12px rgba(49, 88, 167, .12);
    }
    .n1 { width: 16px; height: 16px; left: 24%; top: 28%; }
    .n2 { width: 12px; height: 12px; right: 18%; top: 44%; background: var(--gold); }
    .n3 { width: 10px; height: 10px; left: 46%; bottom: 18%; background: var(--green); }
    .visual-label {
      position: absolute;
      right: 4%;
      bottom: 8%;
      width: min(320px, 72vw);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .86);
      padding: 18px;
      box-shadow: 0 18px 40px rgba(23, 23, 23, .08);
    }
    .visual-label b {
      display: block;
      margin-bottom: 6px;
    }
    .visual-label p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }
    @keyframes floatCube {
      0%, 100% { transform: translateY(0) rotateX(62deg) rotateZ(42deg); }
      50% { transform: translateY(-18px) rotateX(62deg) rotateZ(50deg); }
    }
    section.band {
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, .68);
      padding: 72px 0;
    }
    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 26px;
      margin-bottom: 24px;
    }
    h2 {
      margin: 0;
      font-size: clamp(28px, 3.5vw, 46px);
      line-height: 1.05;
      letter-spacing: 0;
    }
    .section-head p {
      max-width: 520px;
      margin: 0;
      color: var(--muted);
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .card {
      min-height: 220px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      padding: 22px;
      box-shadow: 0 16px 38px rgba(23, 23, 23, .05);
    }
    .card .num {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      color: var(--blue);
      font-weight: 900;
      margin-bottom: 28px;
    }
    .card h3 {
      margin: 0 0 10px;
      font-size: 19px;
    }
    .card p {
      margin: 0;
      color: var(--muted);
    }
    footer.local {
      border-top: 1px solid var(--line);
      padding: 26px 0;
      color: var(--muted);
      font-size: 13px;
    }
    footer.local .shell {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; scroll-behavior: auto !important; }
    }
    @media (max-width: 880px) {
      .nav { height: auto; padding: 14px 0; align-items: flex-start; }
      nav { flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
      .hero { grid-template-columns: 1fr; padding-top: 48px; }
      .visual { min-height: 390px; }
      .status-row, .grid { grid-template-columns: 1fr; }
      .section-head { display: block; }
      .section-head p { margin-top: 12px; }
    }
    @media (max-width: 560px) {
      .shell { width: min(100% - 24px, 1180px); }
      h1 { font-size: 42px; }
      .actions .button { width: 100%; }
      nav a { display: none; }
    }
  </style>
</head>
<body>
  <header>
    <div class="shell nav">
      <a class="brand" href="/" aria-label="TJ PRO home">
        <span class="mark">TJ</span>
        <span>TJ PRO</span>
      </a>
      <nav aria-label="Primary navigation">
        <a href="#coverage"><span class="en">Coverage</span><span class="zh">覆盖范围</span></a>
        <a href="/company/"><span class="en">Company</span><span class="zh">公司</span></a>
        <a href="/contact/"><span class="en">Contact</span><span class="zh">联系</span></a>
        <button class="lang-toggle" type="button" id="langToggle" aria-label="Switch language">中文</button>
      </nav>
    </div>
  </header>

  <main>
    <section class="shell hero" aria-labelledby="hero-title">
      <div>
        <span class="eyebrow"><span class="dot"></span><span class="en">Verified domain gateway</span><span class="zh">已校验域名入口</span></span>
        <h1 id="hero-title">
          <span class="en">Clean production routing for TJ NOVA sites.</span>
          <span class="zh">TJ NOVA 站点的干净生产路由入口。</span>
        </h1>
        <p class="lead">
          <span class="en">TJ PRO is now a verified TJ NOVA production gateway for current sites, company information, and legal pages.</span>
          <span class="zh">TJ PRO 现在是 TJ NOVA 已校验的生产入口，用于当前站点、公司信息和法律页面。</span>
        </p>
        <div class="actions">
          <a class="button primary" href="#coverage"><span class="en">View current status</span><span class="zh">查看当前状态</span></a>
          <a class="button" href="/legal/terms/"><span class="en">Legal pages</span><span class="zh">法律页面</span></a>
        </div>
        <div class="status-row" aria-label="Deployment status">
          <div class="status">
            <b>English first</b>
            <span class="en">Default language is English with Chinese available.</span>
            <span class="zh">默认英文，中文并存可切换。</span>
          </div>
          <div class="status">
            <b>Footer live</b>
            <span class="en">Shared TJ NOVA footer and legal links are attached.</span>
            <span class="zh">已接入 TJ NOVA 统一页脚与法律链接。</span>
          </div>
          <div class="status">
            <b>Verified contact</b>
            <span class="en">Only the official company and contact pages are linked from this domain.</span>
            <span class="zh">此域名只保留官方公司页和联系页入口。</span>
          </div>
        </div>
      </div>

      <div class="visual" aria-label="Layered routing visual">
        <div class="glass"></div>
        <div class="cube" aria-hidden="true">
          <div class="plane p1"></div>
          <div class="plane p2"></div>
          <div class="plane p3"></div>
          <span class="node n1"></span>
          <span class="node n2"></span>
          <span class="node n3"></span>
        </div>
        <div class="visual-label">
          <b><span class="en">Verified production gateway</span><span class="zh">已校验生产入口</span></b>
          <p><span class="en">Only verified TJ NOVA identity, routing, and legal information are shown here.</span><span class="zh">这里只展示已确认的 TJ NOVA 身份、路由和法律信息。</span></p>
        </div>
      </div>
    </section>

    <section class="band" id="coverage">
      <div class="shell">
        <div class="section-head">
          <h2><span class="en">Current domain status</span><span class="zh">当前域名状态</span></h2>
          <p><span class="en">The visible page now shows only verified TJ NOVA identity, routing, company, contact, and legal information.</span><span class="zh">当前可见页面只展示已校验的 TJ NOVA 身份、路由、公司、联系和法律信息。</span></p>
        </div>
        <div class="grid">
          <article class="card">
            <div class="num">01</div>
            <h3><span class="en">Clean homepage restored</span><span class="zh">干净首页已恢复</span></h3>
            <p><span class="en">The homepage is limited to confirmed TJ NOVA routing and business context.</span><span class="zh">首页仅保留已确认的 TJ NOVA 路由和业务上下文。</span></p>
          </article>
          <article class="card">
            <div class="num">02</div>
            <h3><span class="en">Legal surface kept intact</span><span class="zh">法律入口保留</span></h3>
            <p><span class="en">Terms, privacy, cookies, refund, acceptable use, company, and contact pages remain available.</span><span class="zh">服务条款、隐私、Cookie、退款、可接受使用、公司与联系页面继续可用。</span></p>
          </article>
          <article class="card">
            <div class="num">03</div>
            <h3><span class="en">Ready for the final build</span><span class="zh">等待最终正式版</span></h3>
            <p><span class="en">This neutral gateway can be replaced by the real TJ PRO product when the final content is approved.</span><span class="zh">最终内容确认后，可以用真正的 TJ PRO 产品页替换这个中性入口。</span></p>
          </article>
        </div>
      </div>
    </section>
  </main>

  <footer class="local">
    <div class="shell">
      <span>TJ PRO - TJ NOVA LTD</span>
      <span><span class="en">Production domain gateway</span><span class="zh">生产域名入口</span></span>
    </div>
  </footer>

  <site-footer base="/" data-lang="en"></site-footer>
  <script src="/lib/site-footer.js"></script>
  <script>
    const html = document.documentElement;
    const body = document.body;
    const button = document.getElementById('langToggle');
    const applyLang = (lang) => {
      const next = lang === 'zh' ? 'zh' : 'en';
      html.dataset.lang = next;
      html.lang = next === 'zh' ? 'zh-CN' : 'en';
      body.classList.toggle('lang-zh', next === 'zh');
      button.textContent = next === 'zh' ? 'English' : '中文';
      document.querySelector('site-footer')?.setAttribute('data-lang', next);
    };
    button.addEventListener('click', () => applyLang(html.dataset.lang === 'zh' ? 'en' : 'zh'));
    applyLang('en');
  </script>
</body>
</html>
