Evan
/
DoTouchAI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DoTouch.AI — Affordable Chinese AI for the World</title>
<style>
  :root {
    --bg: #0B1020;
    --bg2: #0E1428;
    --card: #121831;
    --card2: #161D3C;
    --border: rgba(255,255,255,0.08);
    --purple: #7C5CFF;
    --purple-l: #9B7BFF;
    --green: #00E5A0;
    --green-l: #5FF5C3;
    --text: #E8ECF8;
    --muted: #9AA3C0;
    --gold: #FFC24D;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.65; overflow-x:hidden; }
  a { color:inherit; text-decoration:none; }
  .wrap { max-width:1160px; margin:0 auto; padding:0 24px; }

  /* ── Header ── */
  header { position:sticky; top:0; z-index:100; background:rgba(11,16,32,0.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
  .nav { display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
  .nav-logo { display:flex; align-items:center; gap:12px; font-weight:700; font-size:17px; letter-spacing:.5px; }
  .nav-logo svg { height:30px; width:auto; }
  .nav-links { display:flex; gap:26px; font-size:14px; color:var(--muted); }
  .nav-links a:hover { color:var(--text); }
  .nav-right { display:flex; align-items:center; gap:12px; }
  .lang-switch { display:flex; gap:4px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:3px; }
  .lang-btn { border:none; background:transparent; color:var(--muted); font-size:12px; padding:4px 9px; border-radius:999px; cursor:pointer; font-family:inherit; }
  .lang-btn.active { background:var(--purple); color:#fff; }
  .btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:9px 20px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; transition:all .18s ease; font-family:inherit; }
  .btn:hover { border-color:var(--purple); }
  .btn-primary { background:linear-gradient(120deg, var(--purple), #5C3DF0); border:none; color:#fff; box-shadow:0 4px 20px rgba(124,92,255,.35); }
  .btn-primary:hover { box-shadow:0 6px 28px rgba(124,92,255,.5); transform:translateY(-1px); }
  .btn-ghost { background:transparent; }

  /* ── Hero ── */
  .hero { position:relative; padding:84px 0 64px; text-align:center; overflow:hidden; }
  .hero::before { content:""; position:absolute; top:-220px; left:50%; transform:translateX(-50%); width:900px; height:500px; background:radial-gradient(50% 60% at 50% 50%, rgba(124,92,255,.28), transparent 70%); pointer-events:none; }
  .hero-badge { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--green-l); border:1px solid rgba(0,229,160,.3); background:rgba(0,229,160,.07); padding:5px 14px; border-radius:999px; margin-bottom:26px; }
  .hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
  .hero h1 { font-size:clamp(38px, 6vw, 62px); font-weight:800; letter-spacing:-1px; line-height:1.12; }
  .hero h1 .grad { background:linear-gradient(120deg, var(--purple-l), var(--green-l)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .hero p.sub { max-width:640px; margin:22px auto 0; color:var(--muted); font-size:17px; }
  .hero-cta { display:flex; justify-content:center; gap:14px; margin-top:34px; flex-wrap:wrap; }
  .hero-stats { display:flex; justify-content:center; gap:44px; margin-top:54px; flex-wrap:wrap; }
  .stat b { display:block; font-size:26px; font-weight:800; }
  .stat b em { font-style:normal; color:var(--green-l); }
  .stat span { font-size:13px; color:var(--muted); }

  /* ── Logo 视觉 ── */
  .hero-visual { display:flex; justify-content:center; margin-top:44px; }
  .hub-svg { width:220px; height:220px; filter:drop-shadow(0 0 40px rgba(124,92,255,.35)); animation:float 6s ease-in-out infinite; }
  @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
  .pulse-dot { animation:grow 3.2s ease-in-out infinite; transform-origin:center; }
  @keyframes grow { 0%,100% { opacity:.55; r:13; } 50% { opacity:1; r:17; } }

  /* ── Sections ── */
  section { padding:76px 0; }
  section.alt { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .sec-head { text-align:center; max-width:640px; margin:0 auto 48px; }
  .sec-head .kicker { font-size:12.5px; font-weight:700; letter-spacing:2.5px; color:var(--purple-l); text-transform:uppercase; }
  .sec-head h2 { font-size:clamp(26px,3.5vw,36px); font-weight:800; margin-top:10px; letter-spacing:-.5px; }
  .sec-head p { color:var(--muted); margin-top:12px; font-size:15.5px; }

  /* ── Models ── */
  .model-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
  .model-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px; transition:all .2s ease; }
  .model-card:hover { transform:translateY(-3px); border-color:rgba(124,92,255,.5); box-shadow:0 10px 34px rgba(11,16,32,.6); }
  .model-head { display:flex; justify-content:space-between; align-items:center; }
  .model-head h3 { font-size:17px; font-weight:700; }
  .model-head .tag { font-size:11px; color:var(--green-l); background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.3); padding:2px 9px; border-radius:999px; }
  .model-desc { font-size:13px; color:var(--muted); margin-top:8px; min-height:40px; }
  .model-price { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); }
  .model-price b { color:var(--text); }
  .model-price .cut { text-decoration:line-through; color:var(--muted); opacity:.6; margin-left:6px; font-size:11.5px; }

  /* ── Pricing table ── */
  .price-table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
  .price-table th { background:rgba(124,92,255,.12); text-align:left; padding:14px 18px; font-size:12.5px; letter-spacing:.5px; color:var(--purple-l); }
  .price-table td { padding:14px 18px; border-top:1px solid var(--border); font-size:14px; }
  .price-table td.model-name { font-weight:700; }
  .price-table .price { font-family:var(--mono); font-size:13.5px; }
  .price-table .save { color:var(--green-l); font-size:12px; margin-left:8px; }
  .price-note { text-align:center; color:var(--muted); font-size:13px; margin-top:18px; }

  /* ── Features ── */
  .feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
  .feat { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:26px; transition:border-color .2s; }
  .feat:hover { border-color:rgba(124,92,255,.45); }
  .feat .icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:20px; background:rgba(124,92,255,.14); border:1px solid rgba(124,92,255,.3); margin-bottom:16px; }
  .feat h3 { font-size:16px; font-weight:700; }
  .feat p { font-size:13.5px; color:var(--muted); margin-top:8px; }

  /* ── Payments ── */
  .pay-row { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
  .pay-item { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 22px; font-size:14px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:10px; }
  .pay-item:hover { color:var(--text); border-color:rgba(124,92,255,.4); }
  .pay-item .mini { font-size:17px; }

  /* ── Steps ── */
  .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; counter-reset:step; }
  .step { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:26px; position:relative; }
  .step::before { counter-increment:step; content:"0" counter(step); position:absolute; top:20px; right:22px; font-size:30px; font-weight:800; color:rgba(124,92,255,.22); }
  .step h3 { font-size:16px; font-weight:700; }
  .step p { font-size:13.5px; color:var(--muted); margin-top:8px; }

  /* ── Code ── */
  .code-block { background:#0D1426; border:1px solid var(--border); border-radius:14px; overflow:hidden; max-width:720px; margin:0 auto; }
  .code-head { display:flex; justify-content:space-between; padding:10px 18px; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); }
  .code-head .dots { display:flex; gap:6px; }
  .code-head .dots i { width:10px; height:10px; border-radius:50%; display:block; }
  .code-head .dots i:nth-child(1){ background:#FF6B6B; } .code-head .dots i:nth-child(2){ background:#FFC24D; } .code-head .dots i:nth-child(3){ background:#00E5A0; }
  pre { padding:18px; overflow-x:auto; font-size:13px; line-height:1.7; }
  pre code { font-family:var(--mono); }
  .c-k { color:#9B7BFF; } .c-s { color:#5FF5C3; } .c-c { color:#5A6B9E; } .c-p { color:#FFC24D; }

  /* ── FAQ ── */
  .faq-list { max-width:760px; margin:0 auto; }
  .faq-item { background:var(--card); border:1px solid var(--border); border-radius:13px; margin-bottom:10px; overflow:hidden; }
  .faq-q { padding:18px 22px; font-size:15px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
  .faq-q .plus { font-size:20px; color:var(--purple-l); transition:transform .2s; }
  .faq-item.open .plus { transform:rotate(45deg); }
  .faq-a { max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .faq-item.open .faq-a { max-height:220px; }
  .faq-a p { padding:0 22px 18px; color:var(--muted); font-size:14px; }

  /* ── CTA ── */
  .cta-box { background:linear-gradient(130deg, rgba(124,92,255,.2), rgba(0,229,160,.08)), var(--card); border:1px solid rgba(124,92,255,.4); border-radius:22px; padding:52px 40px; text-align:center; position:relative; overflow:hidden; }
  .cta-box::before { content:""; position:absolute; top:-80px; right:-60px; width:300px; height:300px; background:radial-gradient(circle, rgba(124,92,255,.25), transparent 70%); }
  .cta-box h2 { font-size:clamp(24px,3vw,32px); font-weight:800; }
  .cta-box p { color:var(--muted); margin-top:10px; }
  .cta-box .btn { margin-top:26px; }

  /* ── Footer ── */
  footer { border-top:1px solid var(--border); padding:48px 0 34px; }
  .foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:34px; }
  .foot-brand p { color:var(--muted); font-size:13px; margin-top:12px; max-width:280px; }
  .foot-col h4 { font-size:13px; letter-spacing:1px; color:var(--muted); margin-bottom:14px; }
  .foot-col a { display:block; font-size:13.5px; color:var(--text); opacity:.8; margin-bottom:9px; }
  .foot-col a:hover { opacity:1; color:var(--purple-l); }
  .foot-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:40px; padding-top:22px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); flex-wrap:wrap; gap:10px; }

  .dev-note { position:fixed; bottom:16px; left:16px; z-index:200; background:rgba(255,194,77,.12); border:1px solid rgba(255,194,77,.4); color:var(--gold); font-size:12px; padding:8px 14px; border-radius:999px; backdrop-filter:blur(8px); }
  @media (max-width:860px){ .nav-links{display:none;} .foot-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} }
</style>
</head>
<body>

<div class="dev-note">v1.0.0 · 2026-08-08 02:54 CST · 静态审阅稿（点击语言按钮可切换 4 语言）</div>

<!-- ================= HEADER ================= -->
<header>
  <div class="wrap nav">
    <a class="nav-logo" href="#">
      <svg viewBox="0 0 460 120" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="nav-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#9B7BFF"/><stop offset="1" stop-color="#5C3DF0"/>
          </linearGradient>
        </defs>
        <g transform="translate(0,6) scale(0.92)">
          <circle cx="50" cy="50" r="33" stroke="rgba(124,92,255,.3)" stroke-width="1.5" stroke-dasharray="2 7" fill="none"/>
          <g stroke="#00E5A0" stroke-width="1.8" opacity=".55">
            <line x1="50" y1="50" x2="76" y2="26"/><line x1="50" y1="50" x2="26" y2="76"/><line x1="50" y1="50" x2="78" y2="75"/>
          </g>
          <circle cx="50" cy="50" r="12" stroke="rgba(124,92,255,.4)" fill="none"/>
          <circle cx="50" cy="50" r="7.5" fill="url(#nav-grad)"/>
          <g>
            <circle cx="76" cy="26" r="4" fill="#00E5A0"/><circle cx="26" cy="76" r="4" fill="#00E5A0"/><circle cx="78" cy="75" r="4" fill="#00E5A0"/>
          </g>
        </g>
        <text x="128" y="78" font-size="50" font-weight="700" fill="#E8ECF8" font-family="inherit">DoTouch</text>
        <text x="348" y="78" font-size="50" font-weight="700" fill="url(#nav-grad)" font-family="inherit">.AI</text>
      </svg>
    </a>
    <nav class="nav-links">
      <a href="#models" data-i18n="nav_models">Models</a>
      <a href="#pricing" data-i18n="nav_pricing">Pricing</a>
      <a href="#faq" data-i18n="nav_faq">FAQ</a>
    </nav>
    <div class="nav-right">
      <div class="lang-switch">
        <button class="lang-btn active" data-lang="en">EN</button>
        <button class="lang-btn" data-lang="vi">VI</button>
        <button class="lang-btn" data-lang="zh-CN">简</button>
        <button class="lang-btn" data-lang="zh-TW">繁</button>
      </div>
      <a class="btn btn-ghost" href="#" data-i18n="nav_login">Log in</a>
      <a class="btn btn-primary" href="#" data-i18n="nav_signup">Get Started</a>
    </div>
  </div>
</header>

<!-- ================= HERO ================= -->
<div class="hero wrap">
  <span class="hero-badge"><span class="dot"></span><span data-i18n="hero_badge">OpenAI Compatible · From 70% of China Price · Vietnam-First</span></span>
  <h1 data-i18n="hero_h1">One Touch.<br><span class="grad" data-i18n="hero_h1_grad">All AI.</span></h1>
  <p class="sub" data-i18n="hero_sub">DoTouch.AI brings the power of Chinese frontier models — GLM 5.2, DeepSeek V4 and more — to developers and small businesses worldwide at unbelievably low prices. Same OpenAI API. 30% cheaper. Zero migration.</p>
  <div class="hero-cta">
    <a class="btn btn-primary" href="#" data-i18n="hero_cta1">Start for Free</a>
    <a class="btn" href="#pricing" data-i18n="hero_cta2">View Pricing</a>
  </div>
  <div class="hero-visual">
    <svg class="hub-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="hub-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stop-color="#9B7BFF"/><stop offset="1" stop-color="#5C3DF0"/>
        </linearGradient>
      </defs>
      <circle cx="100" cy="100" r="66" stroke="rgba(124,92,255,.3)" stroke-width="2" stroke-dasharray="3 9" fill="none"/>
      <g stroke="#00E5A0" stroke-width="2.5" opacity=".55">
        <line x1="100" y1="100" x2="152" y2="52"/><line x1="100" y1="100" x2="52" y2="152"/><line x1="100" y1="100" x2="156" y2="150"/>
      </g>
      <circle cx="100" cy="100" r="24" stroke="rgba(124,92,255,.4)" fill="none"/>
      <circle cx="100" cy="100" r="15" fill="url(#hub-grad)"/>
      <circle cx="94" cy="94" r="4.5" fill="#fff" opacity=".5"/>
      <g>
        <circle cx="152" cy="52" r="8" fill="#00E5A0"/><circle cx="152" cy="52" r="3" fill="#0B1020"/>
        <circle class="pulse-dot" cx="52" cy="152" r="8" fill="#00E5A0"/>
        <circle cx="156" cy="150" r="8" fill="#00E5A0"/><circle cx="156" cy="150" r="3" fill="#0B1020"/>
      </g>
    </svg>
  </div>
  <div class="hero-stats">
    <div class="stat"><b><em data-i18n="stat_models">4+</em></b><span data-i18n="stat_models_l">Frontier models</span></div>
    <div class="stat"><b><em data-i18n="stat_save">30%</em></b><span data-i18n="stat_save_l">Cheaper than China price</span></div>
    <div class="stat"><b><em data-i18n="stat_api">100%</em></b><span data-i18n="stat_api_l">OpenAI API compatible</span></div>
    <div class="stat"><b><em data-i18n="stat_pay">6+</em></b><span data-i18n="stat_pay_l">Payment methods</span></div>
  </div>
</div>

<!-- ================= MODELS ================= -->
<section id="models" class="alt">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker" data-i18n="models_kicker">Models</div>
      <h2 data-i18n="models_h2">Chinese Frontier Models, One API</h2>
      <p data-i18n="models_p">All models are served through Alibaba Cloud DashScope, fully OpenAI-compatible. Switch between models with a single line change.</p>
    </div>
    <div class="model-grid">
      <div class="model-card">
        <div class="model-head"><h3>GLM 5.2</h3><span class="tag" data-i18n="tag_flagship">Flagship</span></div>
        <p class="model-desc" data-i18n="m_glm_desc">Zhipu's flagship multimodal model. Reasoning, coding and agentic tasks at a fraction of the cost.</p>
        <div class="model-price"><span data-i18n="price_in">Input</span> <b>$0.98</b>/1M <span class="cut">$1.40</span><br><span data-i18n="price_out">Output</span> <b>$3.08</b>/1M <span class="cut">$4.40</span></div>
      </div>
      <div class="model-card">
        <div class="model-head"><h3>DeepSeek V4</h3><span class="tag" data-i18n="tag_best">Best Value</span></div>
        <p class="model-desc" data-i18n="m_dsv4_desc">Open-weight reasoning powerhouse. Ideal for high-volume chat, coding and RAG pipelines.</p>
        <div class="model-price"><span data-i18n="price_in">Input</span> <b>$0.14</b>/1M <span class="cut">$0.20</span><br><span data-i18n="price_out">Output</span> <b>$0.28</b>/1M <span class="cut">$0.40</span></div>
      </div>
      <div class="model-card">
        <div class="model-head"><h3>DeepSeek V4 Pro</h3><span class="tag" data-i18n="tag_reasoning">Reasoning</span></div>
        <p class="model-desc" data-i18n="m_dsv4p_desc">Deep reasoning mode for complex math, logic and long-horizon agent planning.</p>
        <div class="model-price"><span data-i18n="price_in">Input</span> <b>$0.30</b>/1M <span class="cut">$0.43</span><br><span data-i18n="price_out">Output</span> <b>$0.60</b>/1M <span class="cut">$0.86</span></div>
      </div>
      <div class="model-card">
        <div class="model-head"><h3>Qwen Max</h3><span class="tag" data-i18n="tag_enterprise">Enterprise</span></div>
        <p class="model-desc" data-i18n="m_qwen_desc">Alibaba's strongest general model. Multilingual, tool-calling and structured output ready.</p>
        <div class="model-price"><span data-i18n="price_in">Input</span> <b>$1.96</b>/1M <span class="cut">$2.80</span><br><span data-i18n="price_out">Output</span> <b>$7.84</b>/1M <span class="cut">$11.20</span></div>
      </div>
    </div>
  </div>
</section>

<!-- ================= PRICING ================= -->
<section id="pricing">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker" data-i18n="pricing_kicker">Pricing</div>
      <h2 data-i18n="pricing_h2">Pay Only for What You Use</h2>
      <p data-i18n="pricing_p">Prepaid credits, metered per token. No subscription, no commitment — top up whenever, use however much you need. All prices are 70% of the China domestic price.</p>
    </div>
    <div class="wrap" style="max-width:820px">
      <table class="price-table">
        <tr><th data-i18n="pt_model">Model</th><th data-i18n="pt_in">Input / 1M tokens</th><th data-i18n="pt_out">Output / 1M tokens</th><th data-i18n="pt_save">You save</th></tr>
        <tr><td class="model-name">GLM 5.2</td><td class="price">$0.98</td><td class="price">$3.08</td><td class="save">-30%</td></tr>
        <tr><td class="model-name">DeepSeek V4</td><td class="price">$0.14</td><td class="price">$0.28</td><td class="save">-30%</td></tr>
        <tr><td class="model-name">DeepSeek V4 Pro</td><td class="price">$0.30</td><td class="price">$0.60</td><td class="save">-30%</td></tr>
        <tr><td class="model-name">Qwen Max</td><td class="price">$1.96</td><td class="price">$7.84</td><td class="save">-30%</td></tr>
      </table>
      <p class="price-note" data-i18n="pricing_note">* Prices shown in USD. Local currency display (VND and more) available in the console. Prices are placeholders pending DashScope × 0.7 confirmation.</p>
    </div>
  </div>
</section>

<!-- ================= FEATURES ================= -->
<section class="alt">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker" data-i18n="feat_kicker">Why DoTouch</div>
      <h2 data-i18n="feat_h2">Built for Developers, Priced for Everyone</h2>
    </div>
    <div class="feat-grid">
      <div class="feat"><div class="icon">🔌</div><h3 data-i18n="f1_t">Drop-in OpenAI Compatible</h3><p data-i18n="f1_d">Change one line in your OpenAI SDK config and everything just works. /v1/chat/completions, /v1/models — same shapes, same errors.</p></div>
      <div class="feat"><div class="icon">💎</div><h3 data-i18n="f2_t">70% of China Price</h3><p data-i18n="f2_d">Chinese models at Chinese prices, paid in USD or VND. Your API budget goes 40%+ further than Western equivalents.</p></div>
      <div class="feat"><div class="icon">💳</div><h3 data-i18n="f3_t">Local Payments</h3><p data-i18n="f3_d">MoMo, ZaloPay, Stripe, PayPal, Alipay and bank cards. Pay the way you already pay.</p></div>
      <div class="feat"><div class="icon">🌏</div><h3 data-i18n="f4_t">Vietnam-First Support</h3><p data-i18n="f4_d">Vietnamese-language console, docs and support — plus English, 简体中文 and 繁體中文.</p></div>
      <div class="feat"><div class="icon">⚡</div><h3 data-i18n="f5_t">Low Latency, High Uptime</h3><p data-i18n="f5_d">Hong Kong edge nodes with a direct line to upstream capacity. Rate limits that protect you, not throttle you.</p></div>
      <div class="feat"><div class="icon">📊</div><h3 data-i18n="f6_t">Transparent Usage</h3><p data-i18n="f6_d">Per-request token & cost records, daily summaries, and instant balance updates in the console.</p></div>
    </div>
  </div>
</section>

<!-- ================= PAYMENTS ================= -->
<section>
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker" data-i18n="pay_kicker">Payments</div>
      <h2 data-i18n="pay_h2">Pay Your Way</h2>
    </div>
    <div class="pay-row">
      <div class="pay-item"><span class="mini">🟢</span> MoMo</div>
      <div class="pay-item"><span class="mini">🔵</span> ZaloPay</div>
      <div class="pay-item"><span class="mini">⚡</span> Stripe</div>
      <div class="pay-item"><span class="mini">🅿️</span> PayPal</div>
      <div class="pay-item"><span class="mini">🅰️</span> Alipay</div>
      <div class="pay-item"><span class="mini">💳</span> <span data-i18n="pay_card">Bank Card</span></div>
    </div>
  </div>
</section>

<!-- ================= HOW IT WORKS ================= -->
<section class="alt">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker" data-i18n="how_kicker">Quickstart</div>
      <h2 data-i18n="how_h2">Live in 3 Steps</h2>
    </div>
    <div class="steps">
      <div class="step"><h3 data-i18n="s1_t">Create your account</h3><p data-i18n="s1_d">Sign up with email, top up any amount. No subscription, no card required to start.</p></div>
      <div class="step"><h3 data-i18n="s2_t">Generate an API key</h3><p data-i18n="s2_d">One click in the console. Keys start with dt_ and are shown exactly once.</p></div>
      <div class="step"><h3 data-i18n="s3_t">Call the API</h3><p data-i18n="s3_d">Point your OpenAI SDK at api.dotouch.ai. That's it. Usage is metered and billed per token.</p></div>
    </div>
    <div class="code-block" style="margin-top:34px">
      <div class="code-head"><span class="dots"><i></i><i></i><i></i></span><span>terminal · api.dotouch.ai</span></div>
      <pre><code><span class="c-c"># OpenAI-compatible — just swap the base URL and key</span>
<span class="c-k">curl</span> https://api.dotouch.ai/v1/chat/completions \
  -H <span class="c-s">"Authorization: Bearer dt_your_key_here"</span> \
  -H <span class="c-s">"Content-Type: application/json"</span> \
  -d <span class="c-s">'{
    "model": "deepseek-v4",
    "messages": [{"role": "user", "content": "Xin chào!"}]
  }'</span></code></pre>
    </div>
  </div>
</section>

<!-- ================= FAQ ================= -->
<section id="faq">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker" data-i18n="faq_kicker">FAQ</div>
      <h2 data-i18n="faq_h2">Questions, Answered</h2>
    </div>
    <div class="faq-list">
      <div class="faq-item open">
        <div class="faq-q" data-i18n="q1">How does billing work?<span class="plus">+</span></div>
        <div class="faq-a"><p data-i18n="a1">Prepaid only. Top up credits, then each request is metered per token and deducted from your balance. No subscription, no surprise invoices.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q" data-i18n="q2">Is it really OpenAI-compatible?<span class="plus">+</span></div>
        <div class="faq-a"><p data-i18n="a2">Yes. Same endpoints, request shapes, streaming (SSE) and error format. Point your existing OpenAI SDK at our base URL and you're done.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q" data-i18n="q3">Which currencies can I pay in?<span class="plus">+</span></div>
        <div class="faq-a"><p data-i18n="a3">USD and VND display in console. Payments via MoMo, ZaloPay, Stripe, PayPal, Alipay and bank cards. Exchange rates are applied at top-up.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q" data-i18n="q4">What models are available?<span class="plus">+</span></div>
        <div class="faq-a"><p data-i18n="a4">GLM 5.2, DeepSeek V4, DeepSeek V4 Pro, Qwen Max — with more Chinese frontier models being added continuously.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q" data-i18n="q5">Is there a minimum top-up?<span class="plus">+</span></div>
        <div class="faq-a"><p data-i18n="a5">No. Start with any amount — even $1. Designed for individuals and small businesses first.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q" data-i18n="q6">What about data privacy?<span class="plus">+</span></div>
        <div class="faq-a"><p data-i18n="a6">Your API calls are processed through Alibaba Cloud DashScope under applicable terms. We never train on your data. See our Privacy Policy for details.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- ================= CTA ================= -->
<section>
  <div class="wrap">
    <div class="cta-box">
      <h2 data-i18n="cta_h2">One touch. All AI. 30% less.</h2>
      <p data-i18n="cta_p">Join developers across Vietnam and the world building on DoTouch.AI.</p>
      <a class="btn btn-primary" href="#" data-i18n="cta_btn">Create Free Account</a>
    </div>
  </div>
</section>

<!-- ================= FOOTER ================= -->
<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div class="foot-brand">
        <svg viewBox="0 0 460 120" width="150" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="f-grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#9B7BFF"/><stop offset="1" stop-color="#5C3DF0"/></linearGradient></defs>
          <g transform="translate(0,6) scale(0.92)">
            <circle cx="50" cy="50" r="33" stroke="rgba(124,92,255,.3)" stroke-width="1.5" stroke-dasharray="2 7" fill="none"/>
            <g stroke="#00E5A0" stroke-width="1.8" opacity=".55"><line x1="50" y1="50" x2="76" y2="26"/><line x1="50" y1="50" x2="26" y2="76"/><line x1="50" y1="50" x2="78" y2="75"/></g>
            <circle cx="50" cy="50" r="7.5" fill="url(#f-grad)"/>
            <circle cx="76" cy="26" r="4" fill="#00E5A0"/><circle cx="26" cy="76" r="4" fill="#00E5A0"/><circle cx="78" cy="75" r="4" fill="#00E5A0"/>
          </g>
          <text x="128" y="78" font-size="50" font-weight="700" fill="#E8ECF8" font-family="inherit">DoTouch</text>
          <text x="348" y="78" font-size="50" font-weight="700" fill="url(#f-grad)" font-family="inherit">.AI</text>
        </svg>
        <p data-i18n="foot_p">Affordable Chinese frontier AI for developers and small businesses worldwide.</p>
      </div>
      <div class="foot-col">
        <h4 data-i18n="foot_product">Product</h4>
        <a href="#models" data-i18n="nav_models">Models</a>
        <a href="#pricing" data-i18n="nav_pricing">Pricing</a>
        <a href="#" data-i18n="foot_console">Console</a>
        <a href="#" data-i18n="foot_status">Status</a>
      </div>
      <div class="foot-col">
        <h4 data-i18n="foot_dev">Developers</h4>
        <a href="#" data-i18n="foot_docs">Documentation</a>
        <a href="#" data-i18n="foot_quickstart">Quickstart</a>
        <a href="#" data-i18n="foot_support">Support</a>
      </div>
      <div class="foot-col">
        <h4 data-i18n="foot_legal">Legal</h4>
        <a href="#" data-i18n="foot_tos">Terms of Service</a>
        <a href="#" data-i18n="foot_privacy">Privacy Policy</a>
        <a href="#" data-i18n="foot_refund">Refund Policy</a>
      </div>
    </div>
    <div class="foot-bottom">
      <span>© 2026 DoTouch.AI — doTouch.ai</span>
      <span data-i18n="foot_made">Made for Vietnam & the world · 算力普惠</span>
    </div>
  </div>
</footer>

<!-- ================= I18N ================= -->
<script>
const I18N = {
  en: {
    nav_models:"Models", nav_pricing:"Pricing", nav_faq:"FAQ", nav_login:"Log in", nav_signup:"Get Started",
    hero_badge:"OpenAI Compatible · From 70% of China Price · Vietnam-First",
    hero_h1:"One Touch.", hero_h1_grad:"All AI.",
    hero_sub:"DoTouch.AI brings the power of Chinese frontier models — GLM 5.2, DeepSeek V4 and more — to developers and small businesses worldwide at unbelievably low prices. Same OpenAI API. 30% cheaper. Zero migration.",
    hero_cta1:"Start for Free", hero_cta2:"View Pricing",
    stat_models:"4+", stat_models_l:"Frontier models", stat_save:"30%", stat_save_l:"Cheaper than China price",
    stat_api:"100%", stat_api_l:"OpenAI API compatible", stat_pay:"6+", stat_pay_l:"Payment methods",
    models_kicker:"Models", models_h2:"Chinese Frontier Models, One API",
    models_p:"All models are served through Alibaba Cloud DashScope, fully OpenAI-compatible. Switch between models with a single line change.",
    tag_flagship:"Flagship", tag_best:"Best Value", tag_reasoning:"Reasoning", tag_enterprise:"Enterprise",
    m_glm_desc:"Zhipu's flagship multimodal model. Reasoning, coding and agentic tasks at a fraction of the cost.",
    m_dsv4_desc:"Open-weight reasoning powerhouse. Ideal for high-volume chat, coding and RAG pipelines.",
    m_dsv4p_desc:"Deep reasoning mode for complex math, logic and long-horizon agent planning.",
    m_qwen_desc:"Alibaba's strongest general model. Multilingual, tool-calling and structured output ready.",
    price_in:"Input", price_out:"Output",
    pricing_kicker:"Pricing", pricing_h2:"Pay Only for What You Use",
    pricing_p:"Prepaid credits, metered per token. No subscription, no commitment — top up whenever, use however much you need. All prices are 70% of the China domestic price.",
    pt_model:"Model", pt_in:"Input / 1M tokens", pt_out:"Output / 1M tokens", pt_save:"You save",
    pricing_note:"* Prices shown in USD. Local currency display (VND and more) available in the console. Prices are placeholders pending DashScope × 0.7 confirmation.",
    feat_kicker:"Why DoTouch", feat_h2:"Built for Developers, Priced for Everyone",
    f1_t:"Drop-in OpenAI Compatible", f1_d:"Change one line in your OpenAI SDK config and everything just works. /v1/chat/completions, /v1/models — same shapes, same errors.",
    f2_t:"70% of China Price", f2_d:"Chinese models at Chinese prices, paid in USD or VND. Your API budget goes 40%+ further than Western equivalents.",
    f3_t:"Local Payments", f3_d:"MoMo, ZaloPay, Stripe, PayPal, Alipay and bank cards. Pay the way you already pay.",
    f4_t:"Vietnam-First Support", f4_d:"Vietnamese-language console, docs and support — plus English, 简体中文 and 繁體中文.",
    f5_t:"Low Latency, High Uptime", f5_d:"Hong Kong edge nodes with a direct line to upstream capacity. Rate limits that protect you, not throttle you.",
    f6_t:"Transparent Usage", f6_d:"Per-request token & cost records, daily summaries, and instant balance updates in the console.",
    pay_kicker:"Payments", pay_h2:"Pay Your Way", pay_card:"Bank Card",
    how_kicker:"Quickstart", how_h2:"Live in 3 Steps",
    s1_t:"Create your account", s1_d:"Sign up with email, top up any amount. No subscription, no card required to start.",
    s2_t:"Generate an API key", s2_d:"One click in the console. Keys start with dt_ and are shown exactly once.",
    s3_t:"Call the API", s3_d:"Point your OpenAI SDK at api.dotouch.ai. That's it. Usage is metered and billed per token.",
    faq_kicker:"FAQ", faq_h2:"Questions, Answered",
    q1:"How does billing work?", a1:"Prepaid only. Top up credits, then each request is metered per token and deducted from your balance. No subscription, no surprise invoices.",
    q2:"Is it really OpenAI-compatible?", a2:"Yes. Same endpoints, request shapes, streaming (SSE) and error format. Point your existing OpenAI SDK at our base URL and you're done.",
    q3:"Which currencies can I pay in?", a3:"USD and VND display in console. Payments via MoMo, ZaloPay, Stripe, PayPal, Alipay and bank cards. Exchange rates are applied at top-up.",
    q4:"What models are available?", a4:"GLM 5.2, DeepSeek V4, DeepSeek V4 Pro, Qwen Max — with more Chinese frontier models being added continuously.",
    q5:"Is there a minimum top-up?", a5:"No. Start with any amount — even $1. Designed for individuals and small businesses first.",
    q6:"What about data privacy?", a6:"Your API calls are processed through Alibaba Cloud DashScope under applicable terms. We never train on your data. See our Privacy Policy for details.",
    cta_h2:"One touch. All AI. 30% less.", cta_p:"Join developers across Vietnam and the world building on DoTouch.AI.", cta_btn:"Create Free Account",
    foot_p:"Affordable Chinese frontier AI for developers and small businesses worldwide.",
    foot_product:"Product", foot_console:"Console", foot_status:"Status", foot_dev:"Developers",
    foot_docs:"Documentation", foot_quickstart:"Quickstart", foot_support:"Support", foot_legal:"Legal",
    foot_tos:"Terms of Service", foot_privacy:"Privacy Policy", foot_refund:"Refund Policy",
    foot_made:"Made for Vietnam & the world · 算力普惠"
  },
  vi: {
    nav_models:"Mô hình", nav_pricing:"Bảng giá", nav_faq:"FAQ", nav_login:"Đăng nhập", nav_signup:"Bắt đầu",
    hero_badge:"Tương thích OpenAI · Bằng 70% giá Trung Quốc · Ưu tiên Việt Nam",
    hero_h1:"Một chạm.", hero_h1_grad:"Mọi AI.",
    hero_sub:"DoTouch.AI mang sức mạnh của các mô hình AI tiên phong Trung Quốc — GLM 5.2, DeepSeek V4 và hơn thế nữa — đến với nhà phát triển và doanh nghiệp nhỏ trên toàn thế giới với giá cực rẻ. API OpenAI tương thích. Rẻ hơn 30%. Không cần di chuyển.",
    hero_cta1:"Bắt đầu miễn phí", hero_cta2:"Xem bảng giá",
    stat_models:"4+", stat_models_l:"Mô hình tiên phong", stat_save:"30%", stat_save_l:"Rẻ hơn giá Trung Quốc",
    stat_api:"100%", stat_api_l:"Tương thích API OpenAI", stat_pay:"6+", stat_pay_l:"Phương thức thanh toán",
    models_kicker:"Mô hình", models_h2:"Mô hình AI Trung Quốc, một API duy nhất",
    models_p:"Tất cả mô hình được phục vụ qua Alibaba Cloud DashScope, tương thích hoàn toàn OpenAI. Đổi mô hình chỉ với một dòng code.",
    tag_flagship:"Cao cấp", tag_best:"Đáng giá nhất", tag_reasoning:"Suy luận", tag_enterprise:"Doanh nghiệp",
    m_glm_desc:"Mô hình đa phương thức hàng đầu của Zhipu. Suy luận, lập trình và tác vụ agent với chi phí rẻ hơn nhiều.",
    m_dsv4_desc:"Cỗ máy suy luận mã nguồn mở. Lý tưởng cho chat, lập trình và pipeline RAG khối lượng lớn.",
    m_dsv4p_desc:"Chế độ suy luận sâu cho toán học, logic và lập kế hoạch agent dài hạn.",
    m_qwen_desc:"Mô hình tổng quát mạnh nhất của Alibaba. Đa ngôn ngữ, gọi công cụ và xuất có cấu trúc.",
    price_in:"Đầu vào", price_out:"Đầu ra",
    pricing_kicker:"Bảng giá", pricing_h2:"Chỉ trả cho những gì bạn dùng",
    pricing_p:"Trả trước, tính theo token. Không thuê bao, không cam kết — nạp tiền bất cứ lúc nào, dùng bao nhiêu tùy nhu cầu. Mọi giá bằng 70% giá nội địa Trung Quốc.",
    pt_model:"Mô hình", pt_in:"Đầu vào / 1M token", pt_out:"Đầu ra / 1M token", pt_save:"Tiết kiệm",
    pricing_note:"* Giá hiển thị bằng USD. Hiển thị ngoại tệ (VND...) có trong console. Giá đang là tạm tính chờ xác nhận DashScope × 0.7.",
    feat_kicker:"Vì sao DoTouch", feat_h2:"Dành cho lập trình viên, giá cho mọi người",
    f1_t:"Tương thích OpenAI tức thì", f1_d:"Đổi một dòng cấu hình SDK OpenAI là mọi thứ hoạt động. /v1/chat/completions, /v1/models — cùng định dạng, cùng lỗi.",
    f2_t:"Bằng 70% giá Trung Quốc", f2_d:"Mô hình Trung Quốc với giá Trung Quốc, thanh toán bằng USD hoặc VND. Ngân sách API của bạn đi xa hơn 40% so với phương Tây.",
    f3_t:"Thanh toán nội địa", f3_d:"MoMo, ZaloPay, Stripe, PayPal, Alipay và thẻ ngân hàng. Thanh toán theo cách bạn vẫn dùng.",
    f4_t:"Hỗ trợ ưu tiên Việt Nam", f4_d:"Console, tài liệu và hỗ trợ tiếng Việt — thêm tiếng Anh, 简体中文 và 繁體中文.",
    f5_t:"Độ trễ thấp, uptime cao", f5_d:"Edge node tại Hồng Kông kết nối trực tiếp nguồn cấp. Giới hạn tốc độ bảo vệ bạn, không bóp nghẹt bạn.",
    f6_t:"Sử dụng minh bạch", f6_d:"Bản ghi token & chi phí từng request, tổng kết theo ngày, cập nhật số dư tức thì trong console.",
    pay_kicker:"Thanh toán", pay_h2:"Thanh toán theo cách của bạn", pay_card:"Thẻ ngân hàng",
    how_kicker:"Bắt đầu nhanh", how_h2:"Hoạt động sau 3 bước",
    s1_t:"Tạo tài khoản", s1_d:"Đăng ký email, nạp tiền bao nhiêu tùy ý. Không thuê bao, không cần thẻ để bắt đầu.",
    s2_t:"Tạo API key", s2_d:"Một cú click trong console. Key bắt đầu bằng dt_ và chỉ hiển thị một lần.",
    s3_t:"Gọi API", s3_d:"Trỏ OpenAI SDK của bạn vào api.dotouch.ai. Xong. Sử dụng được đo và tính phí theo token.",
    faq_kicker:"FAQ", faq_h2:"Câu hỏi thường gặp",
    q1:"Hóa đơn hoạt động thế nào?", a1:"Chỉ trả trước. Nạp tín dụng, mỗi request được đo theo token và trừ từ số dư. Không thuê bao, không hóa đơn bất ngờ.",
    q2:"Có thực sự tương thích OpenAI không?", a2:"Có. Cùng endpoint, định dạng request, streaming (SSE) và lỗi. Trỏ OpenAI SDK hiện có vào base URL của chúng tôi là xong.",
    q3:"Có thể thanh toán bằng loại tiền nào?", a3:"Hiển thị USD và VND trong console. Thanh toán qua MoMo, ZaloPay, Stripe, PayPal, Alipay và thẻ ngân hàng. Tỷ giá áp dụng khi nạp tiền.",
    q4:"Có những mô hình nào?", a4:"GLM 5.2, DeepSeek V4, DeepSeek V4 Pro, Qwen Max — và nhiều mô hình tiên phong Trung Quốc đang được bổ sung liên tục.",
    q5:"Có mức nạp tối thiểu không?", a5:"Không. Bắt đầu với bất kỳ số tiền nào — thậm chí $1. Thiết kế cho cá nhân và doanh nghiệp nhỏ trước.",
    q6:"Quyền riêng tư dữ liệu thế nào?", a6:"API của bạn được xử lý qua Alibaba Cloud DashScope theo điều khoản áp dụng. Chúng tôi không bao giờ huấn luyện trên dữ liệu của bạn. Xem Chính sách bảo mật để biết chi tiết.",
    cta_h2:"Một chạm. Mọi AI. Rẻ hơn 30%.", cta_p:"Tham gia cùng lập trình viên khắp Việt Nam và thế giới đang xây dựng trên DoTouch.AI.", cta_btn:"Tạo tài khoản miễn phí",
    foot_p:"AI Trung Quốc giá rẻ cho lập trình viên và doanh nghiệp nhỏ trên toàn thế giới.",
    foot_product:"Sản phẩm", foot_console:"Console", foot_status:"Trạng thái", foot_dev:"Nhà phát triển",
    foot_docs:"Tài liệu", foot_quickstart:"Bắt đầu nhanh", foot_support:"Hỗ trợ", foot_legal:"Pháp lý",
    foot_tos:"Điều khoản dịch vụ", foot_privacy:"Chính sách bảo mật", foot_refund:"Chính sách hoàn tiền",
    foot_made:"Tạo cho Việt Nam & thế giới · 算力普惠"
  },
  "zh-CN": {
    nav_models:"模型", nav_pricing:"定价", nav_faq:"常见问题", nav_login:"登录", nav_signup:"立即开始",
    hero_badge:"OpenAI 兼容 · 国内价 7 折 · 越南优先",
    hero_h1:"一点触达", hero_h1_grad:"全部 AI。",
    hero_sub:"DoTouch.AI 将中国前沿大模型——GLM 5.2、DeepSeek V4 等——以难以置信的低价带给全球开发者与中小企业。同样的 OpenAI API，便宜 30%，零迁移成本。",
    hero_cta1:"免费开始", hero_cta2:"查看定价",
    stat_models:"4+", stat_models_l:"前沿模型", stat_save:"30%", stat_save_l:"低于国内价格",
    stat_api:"100%", stat_api_l:"OpenAI API 兼容", stat_pay:"6+", stat_pay_l:"支付方式",
    models_kicker:"模型", models_h2:"中国前沿模型，一个 API",
    models_p:"所有模型经由阿里云百炼提供服务，完全兼容 OpenAI 格式。一行代码即可切换模型。",
    tag_flagship:"旗舰", tag_best:"性价比之王", tag_reasoning:"深度推理", tag_enterprise:"企业级",
    m_glm_desc:"智谱旗舰多模态模型。推理、编程与智能体任务，成本只是零头。",
    m_dsv4_desc:"开源推理引擎。适合高并发对话、编程与 RAG 管线。",
    m_dsv4p_desc:"深度推理模式，擅长复杂数学、逻辑与长程智能体规划。",
    m_qwen_desc:"阿里最强通用模型。多语言、工具调用与结构化输出就绪。",
    price_in:"输入", price_out:"输出",
    pricing_kicker:"定价", pricing_h2:"按用量付费",
    pricing_p:"预充值，按 token 计量。无订阅、无承诺——随时充值，用多少算多少。所有价格为国内价格的 7 折。",
    pt_model:"模型", pt_in:"输入 / 1M tokens", pt_out:"输出 / 1M tokens", pt_save:"节省",
    pricing_note:"* 价格以美元显示，控制台支持越南盾等本地货币。价格为占位值，待百炼 × 0.7 确认。",
    feat_kicker:"为什么选择 DoTouch", feat_h2:"为开发者而生，人人用得起",
    f1_t:"无缝兼容 OpenAI", f1_d:"改一行 OpenAI SDK 配置即可使用。/v1/chat/completions、/v1/models——同样的格式，同样的错误。",
    f2_t:"国内价 7 折", f2_d:"中国模型、中国价格，美元或越南盾支付。API 预算比西方方案多走 40% 以上。",
    f3_t:"本地化支付", f3_d:"MoMo、ZaloPay、Stripe、PayPal、Alipay 与银行卡，用你习惯的方式付款。",
    f4_t:"越南优先支持", f4_d:"越南语控制台、文档与客服——另有英文、简体中文与繁体中文。",
    f5_t:"低延迟高可用", f5_d:"香港边缘节点直连上游容量。限流保护你，而不是掐你。",
    f6_t:"用量透明", f6_d:"每次请求的 token 与费用记录、按日汇总、控制台实时余额。",
    pay_kicker:"支付", pay_h2:"按你的方式付款", pay_card:"银行卡",
    how_kicker:"快速开始", how_h2:"三步上线",
    s1_t:"创建账号", s1_d:"邮箱注册，任意金额充值。无订阅，无需绑卡即可开始。",
    s2_t:"生成 API Key", s2_d:"控制台一键生成，dt_ 前缀，仅显示一次。",
    s3_t:"调用 API", s3_d:"把 OpenAI SDK 指向 api.dotouch.ai，完成。按 token 计量扣费。",
    faq_kicker:"常见问题", faq_h2:"常见问题解答",
    q1:"计费方式是什么？", a1:"仅预充值。充值后每次请求按 token 计量并从余额扣除。无订阅、无意外账单。",
    q2:"真的兼容 OpenAI 吗？", a2:"是的。相同的端点、请求结构、流式（SSE）与错误格式。现有 OpenAI SDK 只需换 base URL。",
    q3:"支持哪些币种？", a3:"控制台支持美元与越南盾显示。支付支持 MoMo、ZaloPay、Stripe、PayPal、Alipay 与银行卡，按充值时的汇率结算。",
    q4:"有哪些模型？", a4:"GLM 5.2、DeepSeek V4、DeepSeek V4 Pro、Qwen Max——更多中国前沿模型持续上架中。",
    q5:"有最低充值限制吗？", a5:"没有。任意金额起步——哪怕 $1。为个人与中小企业优先设计。",
    q6:"数据隐私如何保障？", a6:"你的 API 调用经由阿里云百炼处理并遵守适用条款。我们绝不用你的数据训练模型。详见隐私政策。",
    cta_h2:"一点触达。全部 AI。省 30%。", cta_p:"加入越南及全球开发者的 DoTouch.AI 社区。", cta_btn:"免费创建账号",
    foot_p:"为全球开发者与中小企业提供平价中国前沿 AI。",
    foot_product:"产品", foot_console:"控制台", foot_status:"状态", foot_dev:"开发者",
    foot_docs:"文档", foot_quickstart:"快速开始", foot_support:"支持", foot_legal:"法律",
    foot_tos:"服务条款", foot_privacy:"隐私政策", foot_refund:"退款政策",
    foot_made:"为越南与世界打造 · 算力普惠"
  },
  "zh-TW": {
    nav_models:"模型", nav_pricing:"定價", nav_faq:"常見問題", nav_login:"登入", nav_signup:"立即開始",
    hero_badge:"OpenAI 相容 · 中國國內價 7 折 · 越南優先",
    hero_h1:"一點觸達", hero_h1_grad:"所有 AI。",
    hero_sub:"DoTouch.AI 將中國前沿大模型——GLM 5.2、DeepSeek V4 等——以難以置信的低價帶給全球開發者與中小企業。同樣的 OpenAI API，便宜 30%，零遷移成本。",
    hero_cta1:"免費開始", hero_cta2:"查看定價",
    stat_models:"4+", stat_models_l:"前沿模型", stat_save:"30%", stat_save_l:"低於中國國內價格",
    stat_api:"100%", stat_api_l:"OpenAI API 相容", stat_pay:"6+", stat_pay_l:"支付方式",
    models_kicker:"模型", models_h2:"中國前沿模型，一個 API",
    models_p:"所有模型經由阿里雲百煉提供服務，完全相容 OpenAI 格式。一行代碼即可切換模型。",
    tag_flagship:"旗艦", tag_best:"性價比之王", tag_reasoning:"深度推理", tag_enterprise:"企業級",
    m_glm_desc:"智譜旗艦多模態模型。推理、程式設計與智慧體任務，成本只是零頭。",
    m_dsv4_desc:"開源推理引擎。適合高並發對話、程式設計與 RAG 管線。",
    m_dsv4p_desc:"深度推理模式，擅長複雜數學、邏輯與長程智慧體規劃。",
    m_qwen_desc:"阿里最強通用模型。多語言、工具呼叫與結構化輸出就緒。",
    price_in:"輸入", price_out:"輸出",
    pricing_kicker:"定價", pricing_h2:"按用量付費",
    pricing_p:"預儲值，按 token 計量。無訂閱、無承諾——隨時儲值，用多少算多少。所有價格為中國國內價格的 7 折。",
    pt_model:"模型", pt_in:"輸入 / 1M tokens", pt_out:"輸出 / 1M tokens", pt_save:"節省",
    pricing_note:"* 價格以美元顯示，控制台支援越南盾等本地貨幣。價格為佔位值，待百煉 × 0.7 確認。",
    feat_kicker:"為什麼選擇 DoTouch", feat_h2:"為開發者而生，人人用得起",
    f1_t:"無縫相容 OpenAI", f1_d:"改一行 OpenAI SDK 設定即可使用。/v1/chat/completions、/v1/models——同樣的格式，同樣的錯誤。",
    f2_t:"中國國內價 7 折", f2_d:"中國模型、中國價格，美元或越南盾支付。API 預算比西方方案多走 40% 以上。",
    f3_t:"本地化支付", f3_d:"MoMo、ZaloPay、Stripe、PayPal、Alipay 與銀行卡，用你習慣的方式付款。",
    f4_t:"越南優先支援", f4_d:"越南語控制台、文件與客服——另有英文、簡體中文與繁體中文。",
    f5_t:"低延遲高可用", f5_d:"香港邊緣節點直連上游容量。限流保護你，而不是掐你。",
    f6_t:"用量透明", f6_d:"每次請求的 token 與費用記錄、按日彙總、控制台即時餘額。",
    pay_kicker:"支付", pay_h2:"按你的方式付款", pay_card:"銀行卡",
    how_kicker:"快速開始", how_h2:"三步上線",
    s1_t:"建立帳號", s1_d:"信箱註冊，任意金額儲值。無訂閱，無需綁卡即可開始。",
    s2_t:"產生 API Key", s2_d:"控制台一鍵產生，dt_ 前綴，僅顯示一次。",
    s3_t:"呼叫 API", s3_d:"把 OpenAI SDK 指向 api.dotouch.ai，完成。按 token 計量扣費。",
    faq_kicker:"常見問題", faq_h2:"常見問題解答",
    q1:"計費方式是什麼？", a1:"僅預儲值。儲值後每次請求按 token 計量並從餘額扣除。無訂閱、無意外帳單。",
    q2:"真的相容 OpenAI 嗎？", a2:"是的。相同的端點、請求結構、串流（SSE）與錯誤格式。現有 OpenAI SDK 只需更換 base URL。",
    q3:"支援哪些幣種？", a3:"控制台支援美元與越南盾顯示。支付支援 MoMo、ZaloPay、Stripe、PayPal、Alipay 與銀行卡，按儲值時的匯率結算。",
    q4:"有哪些模型？", a4:"GLM 5.2、DeepSeek V4、DeepSeek V4 Pro、Qwen Max——更多中國前沿模型持續上架中。",
    q5:"有最低儲值限制嗎？", a5:"沒有。任意金額起步——哪怕 $1。為個人與中小企業優先設計。",
    q6:"資料隱私如何保障？", a6:"你的 API 呼叫經由阿里雲百煉處理並遵守適用條款。我們絕不用你的資料訓練模型。詳見隱私政策。",
    cta_h2:"一點觸達。所有 AI。省 30%。", cta_p:"加入越南及全球開發者的 DoTouch.AI 社群。", cta_btn:"免費建立帳號",
    foot_p:"為全球開發者與中小企業提供平價中國前沿 AI。",
    foot_product:"產品", foot_console:"控制台", foot_status:"狀態", foot_dev:"開發者",
    foot_docs:"文件", foot_quickstart:"快速開始", foot_support:"支援", foot_legal:"法律",
    foot_tos:"服務條款", foot_privacy:"隱私政策", foot_refund:"退款政策",
    foot_made:"為越南與世界打造 · 算力普惠"
  }
};
const langBtns = document.querySelectorAll('.lang-btn');
const setLang = (lang) => {
  const dict = I18N[lang];
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.dataset.i18n;
    if (dict && dict[key] !== undefined) el.textContent = dict[key];
  });
  langBtns.forEach(b => b.classList.toggle('active', b.dataset.lang === lang));
  document.documentElement.lang = lang;
};
langBtns.forEach(b => b.addEventListener('click', () => setLang(b.dataset.lang)));
document.querySelectorAll('.faq-q').forEach(q => q.addEventListener('click', () => {
  q.parentElement.classList.toggle('open');
}));
</script>
</body>
</html>