i18n for fido2 and index

fido2_top.html

@@ -230,6 +230,141 @@
       lang_map.set("zh-CN", "FIDO2：从 2024 年的 188.2 亿美元增至 2032 年的 603.4 亿美元");
       lang_map.set("ja", "FIDO2: 2024年の188.2億米ドルから2032年には603.4億米ドルへ");
       i18n_messages.set("top_msg", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Passkey cloud platform");
+      lang_map.set("ja", "パスキー・クラウド・プラットフォーム");
+      i18n_messages.set("hero_eyebrow", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "FIDO2 journeys people want to finish");
+      lang_map.set("ja", "最後までスムーズに完了できるFIDO2体験");
+      i18n_messages.set("hero_title", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Launch delightful, phishing-proof login experiences with a fully managed Passkey\nbackbone, open-source SDKs that drop into any stack in minutes.");
+      lang_map.set("ja", "フルマネージドなPasskey基盤と、どんなスタックにも数分で組み込める\nオープンソースSDKで、心地よくフィッシング耐性のあるログイン体験を提供します。");
+      i18n_messages.set("hero_lead", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "FIDO2 certified");
+      lang_map.set("ja", "FIDO2認証済み");
+      i18n_messages.set("hero_chip_1", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Open source server + SDK");
+      lang_map.set("ja", "オープンソースのサーバー＋SDK");
+      i18n_messages.set("hero_chip_2", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Device recovery flows");
+      lang_map.set("ja", "デバイス復旧フロー");
+      i18n_messages.set("hero_chip_3", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "FIDO certified");
+      lang_map.set("ja", "FIDO認証");
+      i18n_messages.set("stat_label_1", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Fast onboarding");
+      lang_map.set("ja", "迅速な導入");
+      i18n_messages.set("stat_label_2", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Platforms");
+      lang_map.set("ja", "対応プラットフォーム");
+      i18n_messages.set("stat_label_3", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Passkey Ready");
+      lang_map.set("ja", "Passkey対応");
+      i18n_messages.set("device_title", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Secure, phishing-resistant, privacy-first verification that works on every device.");
+      lang_map.set("ja", "あらゆるデバイスで動作する、フィッシング耐性・プライバシー重視の安全な検証。");
+      i18n_messages.set("device_desc", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Face / Touch");
+      lang_map.set("ja", "Face / Touch");
+      i18n_messages.set("device_chip_1", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Security keys");
+      lang_map.set("ja", "セキュリティキー");
+      i18n_messages.set("device_chip_2", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Recovery links");
+      lang_map.set("ja", "復旧リンク");
+      i18n_messages.set("device_chip_3", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Instant integration");
+      lang_map.set("ja", "すぐに導入");
+      i18n_messages.set("panel_title_1", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Add FIDO2 login with a few lines of JavaScript. No backend rewrites or new auth servers required.");
+      lang_map.set("ja", "数行のJavaScriptでFIDO2ログインを追加。バックエンド改修や新しい認証サーバーは不要です。");
+      i18n_messages.set("panel_desc_1", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Device lifecycle");
+      lang_map.set("ja", "デバイス管理");
+      i18n_messages.set("panel_title_2", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Allow users to add, revoke, or recover devices with guided flows powered by amiPro APIs.");
+      lang_map.set("ja", "amiPro APIで、デバイスの追加・無効化・復旧をガイド付きフローで提供できます。");
+      i18n_messages.set("panel_desc_2", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Operational visibility");
+      lang_map.set("ja", "運用の可視化");
+      i18n_messages.set("panel_title_3", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Get analytics on adoption, fraud attempts, and top devices directly from the management portal.");
+      lang_map.set("ja", "管理ポータルから、利用状況・不正兆候・主要デバイスを確認できます。");
+      i18n_messages.set("panel_desc_3", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Ready to launch your Passkey experience?");
+      lang_map.set("ja", "Passkey体験を始めませんか？");
+      i18n_messages.set("cta_title", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Spin up the portal, invite your team, and go live in days.");
+      lang_map.set("ja", "ポータルを用意し、チームを招待して、数日で公開できます。");
+      i18n_messages.set("cta_desc", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Open portal");
+      lang_map.set("ja", "ポータルを開く");
+      i18n_messages.set("cta_btn_portal", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "See integration guide");
+      lang_map.set("ja", "導入ガイドを見る");
+      i18n_messages.set("cta_btn_integration", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Company");
+      lang_map.set("ja", "会社名");
+      i18n_messages.set("tbl_company", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Founded");
+      lang_map.set("ja", "設立");
+      i18n_messages.set("tbl_founded", lang_map);
+
+      lang_map = new Map();
+      lang_map.set("en-US", "Address");
+      lang_map.set("ja", "所在地");
+      i18n_messages.set("tbl_address", lang_map);
       
 
       window.onload = async function() {
@@ -276,47 +411,47 @@
             <!-- Content -->
             <section class="hero reveal">
               <div class="hero__text" data-animate>
-                <span class="hero__eyebrow">Passkey cloud platform</span>
+                <span class="hero__eyebrow" id="hero_eyebrow">Passkey cloud platform</span>
                 <div class="ticker" style="margin: 1rem 0;">
                   <span class="ticker__dot"></span>
                   <span id="top_msg">Top message</span>
                 </div>
-                <h1 class="hero__title">FIDO2 journeys people want to finish</h1>
+                <h1 class="hero__title" id="hero_title">FIDO2 journeys people want to finish</h1>
-                <p class="hero__lead">
+                <p class="hero__lead" id="hero_lead">
                   Launch delightful, phishing-proof login experiences with a fully managed Passkey
-                  backbone, open-source core, and SDKs that drop into any stack in minutes.
+                  backbone, open-source SDKs that drop into any stack in minutes.
                 </p>
                 <div class="hero__chips">
-                  <span class="hero-chip">FIDO2 certified</span>
+                  <span class="hero-chip" id="hero_chip_1">FIDO2 certified</span>
-                  <span class="hero-chip">Open source server + SDK</span>
+                  <span class="hero-chip" id="hero_chip_2">Open source server + SDK</span>
-                  <span class="hero-chip">Device recovery flows</span>
+                  <span class="hero-chip" id="hero_chip_3">Device recovery flows</span>
                 </div>
                 <div class="hero__stats" style="margin-top: 2rem;">
                   <div class="stat-card">
                     <strong>100%</strong>
-                    <span>FIDO certified</span>
+                    <span id="stat_label_1">FIDO certified</span>
                   </div>
                   <div class="stat-card">
-                    <strong>60%</strong>
+                    <strong>1 day</strong>
-                    <span>Faster onboarding</span>
+                    <span id="stat_label_2">Fast onboarding</span>
                   </div>
                   <div class="stat-card">
-                    <strong>75%</strong>
+                    <strong>All</strong>
-                    <span>Support cost cut</span>
+                    <span id="stat_label_3">Platforms</span>
                   </div>
                 </div>
               </div>
               <div class="hero__media" data-animate>
                 <div class="hero__orb"></div>
                 <div class="hero__device">
-                  <h4>Passkey Ready</h4>
+                  <h4 id="device_title">Passkey Ready</h4>
-                  <p>
+                  <p id="device_desc">
                     Secure, phishing-resistant, privacy-first verification that works on every device.
                   </p>
                   <div class="hero__chips" style="margin-top: 1.5rem;">
-                    <span class="hero-chip">Face / Touch</span>
+                    <span class="hero-chip" id="device_chip_1">Face / Touch</span>
-                    <span class="hero-chip">Security keys</span>
+                    <span class="hero-chip" id="device_chip_2">Security keys</span>
-                    <span class="hero-chip">Recovery links</span>
+                    <span class="hero-chip" id="device_chip_3">Recovery links</span>
                   </div>
                   <div style="margin-top: 1.5rem; display: flex; gap: 0.8rem; flex-wrap: wrap;">
                     <a href="https://portal.amipro.me" target="_blank" class="btn btn-primary" id="btn_portal" style="flex: 1 0 160px;">Portal</a>
@@ -402,20 +537,20 @@
 
             <div class="info-panels" style="margin: 3rem 12px;">
               <article class="info-panel" data-animate>
-                <strong>Instant integration</strong>
+                <strong id="panel_title_1">Instant integration</strong>
-                <p style="margin-top: 0.5rem;">
+                <p style="margin-top: 0.5rem;" id="panel_desc_1">
                   Add FIDO2 login with a few lines of JavaScript. No backend rewrites or new auth servers required.
                 </p>
               </article>
               <article class="info-panel" data-animate>
-                <strong>Device lifecycle</strong>
+                <strong id="panel_title_2">Device lifecycle</strong>
-                <p style="margin-top: 0.5rem;">
+                <p style="margin-top: 0.5rem;" id="panel_desc_2">
                   Allow users to add, revoke, or recover devices with guided flows powered by amiPro APIs.
                 </p>
               </article>
               <article class="info-panel" data-animate>
-                <strong>Operational visibility</strong>
+                <strong id="panel_title_3">Operational visibility</strong>
-                <p style="margin-top: 0.5rem;">
+                <p style="margin-top: 0.5rem;" id="panel_desc_3">
                   Get analytics on adoption, fraud attempts, and top devices directly from the management portal.
                 </p>
               </article>
@@ -423,27 +558,27 @@
 
             <div class="cta-banner" data-animate>
               <div>
-                <h4>Ready to launch your Passkey experience?</h4>
+                <h4 id="cta_title">Ready to launch your Passkey experience?</h4>
-                <p style="margin: 0; color: var(--text-muted);">Spin up the portal, invite your team, and go live in days.</p>
+                <p style="margin: 0; color: var(--text-muted);" id="cta_desc">Spin up the portal, invite your team, and go live in days.</p>
               </div>
               <div style="display: flex; gap: 0.8rem;">
-                <a href="https://portal.amipro.me" target="_blank" class="btn btn-primary">Open portal</a>
+                <a href="https://portal.amipro.me" target="_blank" class="btn btn-primary" id="cta_btn_portal">Open portal</a>
-                <a href="integration.html" class="btn btn-outline-info">See integration guide</a>
+                <a href="integration.html" class="btn btn-outline-info" id="cta_btn_integration">See integration guide</a>
               </div>
             </div>
 
             <table class="table-modern" style="margin-top: 3rem;">
               <tbody>
                 <tr>
-                  <th scope="row">Company</th>
+                  <th scope="row" id="tbl_company">Company</th>
                   <td id="company_name">ａｍｉＰｒｏ合同会社</td>
                 </tr>
                 <tr>
-                  <th scope="row">Founded</th>
+                  <th scope="row" id="tbl_founded">Founded</th>
                   <td id="company_open">2023年3月3日設立</td>
                 </tr>
                 <tr>
-                  <th scope="row">Address</th>
+                  <th scope="row" id="tbl_address">Address</th>
                   <td id="company_addr">〒１５０-０００１ 東京都渋谷区神宮前六丁目２３番４号　桑野ビル２階</td>
                 </tr>
               </tbody>

files/amipro_utils.js

@@ -13,7 +13,8 @@ function setI18NText(i18n_map){
       var msg = null
       if(elem){
         msg = elem.get(lang)
-        if(!msg)msg=elem.get('en-US');
+        if(!msg && lang && lang.indexOf('-') > -1) msg = elem.get(lang.split('-')[0]);
+        if(!msg) msg = elem.get('en-US');
       }
       if(!msg)msg = key+"-"+lang
       
@@ -28,7 +29,8 @@ function getI18NText(i18n_map, key){
   var msg = null
   if(elem){
     msg = elem.get(lang)
-    if(!msg)msg=elem.get('en-US');
+    if(!msg && lang && lang.indexOf('-') > -1) msg = elem.get(lang.split('-')[0]);
+    if(!msg) msg = elem.get('en-US');
   }
   if(!msg)msg = key+"-"+lang
   

index.html

@@ -120,7 +120,202 @@
     </style>
 
     <script>
+      const i18n_messages = new Map();
+      let lang_map = new Map();
+
+      lang_map.set('en-US', 'Privacy-first identity & AI products');
+      lang_map.set('ja', 'プライバシー重視のID基盤＆AIプロダクト');
+      i18n_messages.set('nav_tagline', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Contact sales');
+      lang_map.set('ja', 'お問い合わせ');
+      i18n_messages.set('nav_contact_sales', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'amiPro, LLC');
+      lang_map.set('ja', 'amiPro, LLC');
+      i18n_messages.set('hero_eyebrow', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Secure passkey journeys and privacy tooling for modern teams.');
+      lang_map.set('ja', '現代のチームのための、安全なパスキー体験とプライバシー基盤。');
+      i18n_messages.set('hero_title', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'We build production-ready products that make passwordless authentication effortless and\nensure every AI conversation stays under your control.');
+      lang_map.set('ja', 'パスワードレス認証を手軽に導入でき、AI会話のデータも手元で管理できる――\n実運用に耐えるプロダクトを提供します。');
+      i18n_messages.set('hero_lead', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'FIDO2 certified');
+      lang_map.set('ja', 'FIDO2認証');
+      i18n_messages.set('hero_chip_1', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Open source SDKs');
+      lang_map.set('ja', 'SDKはオープンソース');
+      i18n_messages.set('hero_chip_2', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Local-first privacy');
+      lang_map.set('ja', 'ローカルファースト・プライバシー');
+      i18n_messages.set('hero_chip_3', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Explore Passkey Platform');
+      lang_map.set('ja', 'Passkeyプラットフォームを見る');
+      i18n_messages.set('hero_btn_passkey', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Discover ContextWizard');
+      lang_map.set('ja', 'ContextWizardを見る');
+      i18n_messages.set('hero_btn_contextwizard', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Built in Tokyo · Shipping globally');
+      lang_map.set('ja', 'Tokyo発 · 世界へ');
+      i18n_messages.set('hero_device_title', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Founded in 2023, amiPro delivers reliable identity infrastructure, open SDKs, and\nprivacy-first extensions that enterprises can audit and trust.');
+      lang_map.set('ja', '2023年設立。企業が監査でき、信頼して使えるID基盤・オープンSDK・\nプライバシー重視の拡張機能を提供します。');
+      i18n_messages.set('hero_device_desc', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'FIDO2 server + SDKs (open source)');
+      lang_map.set('ja', 'FIDO2サーバー＋SDK（オープンソース）');
+      i18n_messages.set('hero_device_li_1', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Device lifecycle tooling');
+      lang_map.set('ja', 'デバイス管理ツール');
+      i18n_messages.set('hero_device_li_2', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Local-first AI knowledge capture');
+      lang_map.set('ja', 'ローカルでAIナレッジを蓄積');
+      i18n_messages.set('hero_device_li_3', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'What we build');
+      lang_map.set('ja', '提供プロダクト');
+      i18n_messages.set('section_build_title', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Two flagship products solve the hardest trust problems teams face today—passwordless authentication\nand safe AI adoption.');
+      lang_map.set('ja', '2つの主力プロダクトで、パスワードレス認証と安全なAI活用という\n「信頼」の課題を解決します。');
+      i18n_messages.set('section_build_desc', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Enterprise Passkeys');
+      lang_map.set('ja', 'エンタープライズPasskeys');
+      i18n_messages.set('badge_passkeys', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'amiPro Passkey Cloud');
+      lang_map.set('ja', 'amiPro Passkey Cloud');
+      i18n_messages.set('product_passkey_title', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Launch phishing-resistant login backed by our FIDO2-certified cloud, open server, and drop-in SDKs.\nManage registration, recovery, and analytics from one portal.');
+      lang_map.set('ja', 'FIDO2認証済みクラウド、オープンサーバー、導入しやすいSDKで\nフィッシング耐性のあるログインを提供。登録・復旧・分析を1つのポータルで管理できます。');
+      i18n_messages.set('product_passkey_desc', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Go to Passkey hub →');
+      lang_map.set('ja', 'Passkeyの詳細へ →');
+      i18n_messages.set('product_passkey_link', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'AI Conversation OS');
+      lang_map.set('ja', 'AI会話のOS');
+      i18n_messages.set('badge_ai', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'ContextWizard');
+      lang_map.set('ja', 'ContextWizard');
+      i18n_messages.set('product_cw_title', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Keep every AI conversation searchable, portable, and private. Automatically capture threads across assistants\nwith encryption that never leaves your machine.');
+      lang_map.set('ja', 'AI会話を検索可能・持ち運び可能・プライベートに。\n端末外に出ない暗号化で、複数アシスタントのスレッドを自動収集します。');
+      i18n_messages.set('product_cw_desc', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'See ContextWizard →');
+      lang_map.set('ja', 'ContextWizardの詳細へ →');
+      i18n_messages.set('product_cw_link', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Built on verifiable foundations');
+      lang_map.set('ja', '検証できる基盤の上に');
+      i18n_messages.set('section_foundation_title', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Open standards, published code, and transparent pricing keep vendors accountable. amiPro blends\nJapanese craftsmanship with global security best practices so you can ship faster without compromising trust.');
+      lang_map.set('ja', 'オープン標準、公開されたコード、透明な価格。ベンダーの説明責任を支えます。\namiProは日本の丁寧なものづくりと世界のセキュリティベストプラクティスを融合し、\n信頼を損なわずにスピーディーな提供を実現します。');
+      i18n_messages.set('section_foundation_desc', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'FIDO2 Certified Stack');
+      lang_map.set('ja', 'FIDO2認証スタック');
+      i18n_messages.set('value_1', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Open Source SDKs');
+      lang_map.set('ja', 'SDKはオープンソース');
+      i18n_messages.set('value_2', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Local-first Privacy');
+      lang_map.set('ja', 'ローカルファースト・プライバシー');
+      i18n_messages.set('value_3', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Enterprise Support');
+      lang_map.set('ja', 'エンタープライズサポート');
+      i18n_messages.set('value_4', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'Company quick facts');
+      lang_map.set('ja', '会社概要');
+      i18n_messages.set('company_facts_title', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', '<strong>Founded:</strong> March 3, 2023');
+      lang_map.set('ja', '<strong>設立:</strong> 2023年3月3日');
+      i18n_messages.set('fact_founded', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', '<strong>Location:</strong> 2F Kuwano Building, 6-23-4 Jingumae, Shibuya-ku, Tokyo 150-0001');
+      lang_map.set('ja', '<strong>所在地:</strong> 〒150-0001 東京都渋谷区神宮前6-23-4 桑野ビル2F');
+      i18n_messages.set('fact_location', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', '<strong>Focus:</strong> FIDO2 Infrastructure · AI Privacy Tooling');
+      lang_map.set('ja', '<strong>事業:</strong> FIDO2基盤 · AIプライバシーツール');
+      i18n_messages.set('fact_focus', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', '<strong>Contact:</strong> <a href="mailto:sales@amipro.me">sales@amipro.me</a>');
+      lang_map.set('ja', '<strong>連絡先:</strong> <a href="mailto:sales@amipro.me">sales@amipro.me</a>');
+      i18n_messages.set('fact_contact', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'FIDO2 Platform');
+      lang_map.set('ja', 'FIDO2プラットフォーム');
+      i18n_messages.set('footer_fido2', lang_map);
+
+      lang_map = new Map();
+      lang_map.set('en-US', 'ContextWizard');
+      lang_map.set('ja', 'ContextWizard');
+      i18n_messages.set('footer_cw', lang_map);
+
       window.onload = function() {
+        if (typeof setI18NText === 'function') {
+          setI18NText(i18n_messages);
+        }
         if (typeof initRevealAnimations === 'function') {
           initRevealAnimations();
         }
@@ -149,11 +344,11 @@
                   />
                   <div>
                     <div style="font-weight: 700; font-size: 1.25rem; color: #0f172a;">amiPro, LLC</div>
-                    <small style="color: #64748b;">Privacy-first identity & AI products</small>
+                    <small style="color: #64748b;" id="nav_tagline">Privacy-first identity & AI products</small>
                   </div>
                 </div>
               </div>
-              <a href="mailto:sales@amipro.me?subject=Contact%20amiPro" class="btn btn-outline-primary ms-auto">Contact sales</a>
+              <a href="mailto:sales@amipro.me?subject=Contact%20amiPro" class="btn btn-outline-primary ms-auto" id="nav_contact_sales">Contact sales</a>
             </div>
           </nav>
 
@@ -161,44 +356,44 @@
             <div class="container-xxl" style="padding: 32px 24px 72px;">
               <section class="hero reveal">
                 <div class="hero__text" data-animate>
-                  <span class="hero__eyebrow">amiPro, LLC</span>
+                  <span class="hero__eyebrow" id="hero_eyebrow">amiPro, LLC</span>
                   <h1 class="hero__title">
-                    Secure passkey journeys and privacy tooling for modern teams.
+                    <span id="hero_title">Secure passkey journeys and privacy tooling for modern teams.</span>
                   </h1>
-                  <p class="hero__lead">
+                  <p class="hero__lead" id="hero_lead">
                     We build production-ready products that make passwordless authentication effortless and
                     ensure every AI conversation stays under your control.
                   </p>
                   <div class="hero__chips" style="margin-top: 1.5rem;">
-                    <span class="hero-chip">FIDO2 certified</span>
+                    <span class="hero-chip" id="hero_chip_1">FIDO2 certified</span>
-                    <span class="hero-chip">Open source core</span>
+                    <span class="hero-chip" id="hero_chip_2">Open source core</span>
-                    <span class="hero-chip">Local-first privacy</span>
+                    <span class="hero-chip" id="hero_chip_3">Local-first privacy</span>
                   </div>
                   <div style="margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem;">
-                    <a href="fido2_top.html" class="btn btn-primary" style="flex: 1 0 220px;">Explore Passkey Platform</a>
+                    <a href="fido2_top.html" class="btn btn-primary" style="flex: 1 0 220px;" id="hero_btn_passkey">Explore Passkey Platform</a>
-                    <a href="contextwizard_top.html" class="btn btn-outline-info" style="flex: 1 0 220px;">Discover ContextWizard</a>
+                    <a href="contextwizard_top.html" class="btn btn-outline-info" style="flex: 1 0 220px;" id="hero_btn_contextwizard">Discover ContextWizard</a>
                   </div>
                 </div>
                 <div class="hero__media" data-animate>
                   <div class="hero__orb"></div>
                   <div class="hero__device">
-                    <h4>Built in Tokyo · Shipping globally</h4>
+                    <h4 id="hero_device_title">Built in Tokyo · Shipping globally</h4>
-                    <p>
+                    <p id="hero_device_desc">
                       Founded in 2023, amiPro delivers reliable identity infrastructure, open SDKs, and
                       privacy-first extensions that enterprises can audit and trust.
                     </p>
                     <ul class="list-unstyled" style="margin-top: 1rem; color: #0f172a;">
-                      <li><i class="bx bx-check-circle me-1"></i>FIDO2 server + SDKs (open source)</li>
+                      <li><i class="bx bx-check-circle me-1"></i><span id="hero_device_li_1">FIDO2 server + SDKs (open source)</span></li>
-                      <li><i class="bx bx-check-circle me-1"></i>Device lifecycle tooling</li>
+                      <li><i class="bx bx-check-circle me-1"></i><span id="hero_device_li_2">Device lifecycle tooling</span></li>
-                      <li><i class="bx bx-check-circle me-1"></i>Local-first AI knowledge capture</li>
+                      <li><i class="bx bx-check-circle me-1"></i><span id="hero_device_li_3">Local-first AI knowledge capture</span></li>
                     </ul>
                   </div>
                 </div>
               </section>
 
               <section class="reveal" data-animate style="margin-top: 56px;">
-                <h2 style="font-weight: 600; color: #0f172a;">What we build</h2>
+                <h2 style="font-weight: 600; color: #0f172a;" id="section_build_title">What we build</h2>
-                <p style="color: #475569; max-width: 720px;">
+                <p style="color: #475569; max-width: 720px;" id="section_build_desc">
                   Two flagship products solve the hardest trust problems teams face today—passwordless authentication
                   and safe AI adoption.
                 </p>
@@ -209,14 +404,14 @@
                       <div class="card-body">
                         <div class="d-flex align-items-center mb-3">
                           <i class="bx bx-shield me-2"></i>
-                          <span class="badge bg-label-primary">Enterprise Passkeys</span>
+                          <span class="badge bg-label-primary" id="badge_passkeys">Enterprise Passkeys</span>
                         </div>
-                        <h3 style="font-size: 1.5rem;">amiPro Passkey Cloud</h3>
+                        <h3 style="font-size: 1.5rem;" id="product_passkey_title">amiPro Passkey Cloud</h3>
-                        <p>
+                        <p id="product_passkey_desc">
                           Launch phishing-resistant login backed by our FIDO2-certified cloud, open server, and drop-in SDKs.
                           Manage registration, recovery, and analytics from one portal.
                         </p>
-                        <a href="fido2_top.html" class="btn btn-link px-0">Go to Passkey hub →</a>
+                        <a href="fido2_top.html" class="btn btn-link px-0" id="product_passkey_link">Go to Passkey hub →</a>
                       </div>
                     </article>
                   </div>
@@ -225,14 +420,14 @@
                       <div class="card-body">
                         <div class="d-flex align-items-center mb-3">
                           <i class="bx bx-archive me-2"></i>
-                          <span class="badge bg-label-info">AI Conversation OS</span>
+                          <span class="badge bg-label-info" id="badge_ai">AI Conversation OS</span>
                         </div>
-                        <h3 style="font-size: 1.5rem;">ContextWizard</h3>
+                        <h3 style="font-size: 1.5rem;" id="product_cw_title">ContextWizard</h3>
-                        <p>
+                        <p id="product_cw_desc">
                           Keep every AI conversation searchable, portable, and private. Automatically capture threads across assistants
                           with encryption that never leaves your machine.
                         </p>
-                        <a href="contextwizard_top.html" class="btn btn-link px-0">See ContextWizard →</a>
+                        <a href="contextwizard_top.html" class="btn btn-link px-0" id="product_cw_link">See ContextWizard →</a>
                       </div>
                     </article>
                   </div>
@@ -242,27 +437,27 @@
               <section class="reveal" data-animate style="margin-top: 56px;">
                 <div class="row g-4 align-items-center">
                   <div class="col-lg-6">
-                    <h2 style="font-weight: 600; color: #0f172a;">Built on verifiable foundations</h2>
+                    <h2 style="font-weight: 600; color: #0f172a;" id="section_foundation_title">Built on verifiable foundations</h2>
-                    <p style="color: #475569;">
+                    <p style="color: #475569;" id="section_foundation_desc">
                       Open standards, published code, and transparent pricing keep vendors accountable. amiPro blends
                       Japanese craftsmanship with global security best practices so you can ship faster without compromising trust.
                     </p>
                     <div class="values-grid" style="margin-top: 1.5rem;">
-                      <div class="value-pill">FIDO2 Certified Stack</div>
+                      <div class="value-pill" id="value_1">FIDO2 Certified Stack</div>
-                      <div class="value-pill">Open Source Core</div>
+                      <div class="value-pill" id="value_2">Open Source Core</div>
-                      <div class="value-pill">Local-first Privacy</div>
+                      <div class="value-pill" id="value_3">Local-first Privacy</div>
-                      <div class="value-pill">Enterprise Support</div>
+                      <div class="value-pill" id="value_4">Enterprise Support</div>
                     </div>
                   </div>
                   <div class="col-lg-6">
                     <article class="card h-100" style="border-radius: 1.25rem; box-shadow: 0 16px 50px rgba(15, 23, 42, 0.08);">
                       <div class="card-body">
-                        <h3 style="font-size: 1.25rem; margin-bottom: 1rem;">Company quick facts</h3>
+                        <h3 style="font-size: 1.25rem; margin-bottom: 1rem;" id="company_facts_title">Company quick facts</h3>
                         <ul class="list-unstyled" style="color: #0f172a;">
-                          <li><strong>Founded:</strong> March 3, 2023</li>
+                          <li id="fact_founded"><strong>Founded:</strong> March 3, 2023</li>
-                          <li><strong>Location:</strong> 2F Kuwano Building, 6-23-4 Jingumae, Shibuya-ku, Tokyo 150-0001</li>
+                          <li id="fact_location"><strong>Location:</strong> 2F Kuwano Building, 6-23-4 Jingumae, Shibuya-ku, Tokyo 150-0001</li>
-                          <li><strong>Focus:</strong> FIDO2 Infrastructure · AI Privacy Tooling</li>
+                          <li id="fact_focus"><strong>Focus:</strong> FIDO2 Infrastructure · AI Privacy Tooling</li>
-                          <li><strong>Contact:</strong> <a href="mailto:sales@amipro.me">sales@amipro.me</a></li>
+                          <li id="fact_contact"><strong>Contact:</strong> <a href="mailto:sales@amipro.me">sales@amipro.me</a></li>
                         </ul>
                       </div>
                     </article>
@@ -281,8 +476,8 @@
                   <a href="https://www.amipro.me" target="_blank" class="footer-link fw-bolder">amiPro, LLC</a>
                 </div>
                 <div>
-                  <a href="fido2_top.html" class="footer-link me-4">FIDO2 Platform</a>
+                  <a href="fido2_top.html" class="footer-link me-4" id="footer_fido2">FIDO2 Platform</a>
-                  <a href="contextwizard_top.html" class="footer-link">ContextWizard</a>
+                  <a href="contextwizard_top.html" class="footer-link" id="footer_cw">ContextWizard</a>
                 </div>
               </div>
             </footer>