{"id":371,"date":"2025-05-22T16:59:14","date_gmt":"2025-05-22T16:59:14","guid":{"rendered":"https:\/\/theexchain.com\/?page_id=371"},"modified":"2025-06-26T11:14:52","modified_gmt":"2025-06-26T03:14:52","slug":"%e3%83%87%e3%82%af%e3%82%b9","status":"publish","type":"page","link":"https:\/\/theexchain.com\/ja\/%e3%83%87%e3%82%af%e3%82%b9\/","title":{"rendered":"\u5206\u6563\u578b\u53d6\u5f15\u6240"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"371\" class=\"elementor elementor-371\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5a392ecc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5a392ecc\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-58c2fc1c\" data-id=\"58c2fc1c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-505a9149 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"505a9149\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">DEX (\u5206\u6563\u578b\u53d6\u5f15\u6240) - \u3042\u306a\u305f\u306e\u3084\u308a\u65b9\u3067\u3001\u5236\u9650\u306a\u304f\u53d6\u5f15\u3067\u304d\u307e\u3059\u3002<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36f80366 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"36f80366\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u3042\u306a\u305f\u306e\u8cc7\u7523\u3092\u5b8c\u5168\u306b\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3059\u308b\u5206\u6563\u578b\u53d6\u5f15\u306e\u30d1\u30ef\u30fc\u3092\u4f53\u9a13\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u4ef2\u4ecb\u8005\u306a\u3057\u3002\u5236\u9650\u306a\u3057\u3002\u305f\u3060\u7d14\u7c8b\u306a\u7d4c\u6e08\u7684\u81ea\u7531\u3002<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-33c6cc2 e-flex e-con-boxed elementor-invisible e-con e-child\" data-id=\"33c6cc2\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed8f061 elementor-align-center elementor-invisible elementor-widget elementor-widget-button\" data-id=\"ed8f061\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#demo\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u3055\u3089\u306b\u8a73\u3057\u304f<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e43f147 elementor-align-center elementor-invisible elementor-widget elementor-widget-button\" data-id=\"e43f147\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"\/ja\/%e3%82%b3%e3%83%b3%e3%82%bf%e3%82%af%e3%83%88\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u9023\u7d61\u5148<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-4da8949f\" data-id=\"4da8949f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-185dd626 elementor-invisible elementor-widget elementor-widget-image\" data-id=\"185dd626\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;motion_fx_mouseTrack_effect&quot;:&quot;yes&quot;,&quot;motion_fx_mouseTrack_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.7,&quot;sizes&quot;:[]},&quot;motion_fx_tilt_effect&quot;:&quot;yes&quot;,&quot;motion_fx_tilt_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.9,&quot;sizes&quot;:[]}}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/theexchain.com\/wp-content\/uploads\/2025\/05\/DEX-1-1024x1024.png\" class=\"attachment-large size-large wp-image-471\" alt=\"\" srcset=\"https:\/\/theexchain.com\/wp-content\/uploads\/2025\/05\/DEX-1-1024x1024.png 1024w, https:\/\/theexchain.com\/wp-content\/uploads\/2025\/05\/DEX-1-300x300.png 300w, https:\/\/theexchain.com\/wp-content\/uploads\/2025\/05\/DEX-1-150x150.png 150w, https:\/\/theexchain.com\/wp-content\/uploads\/2025\/05\/DEX-1-768x768.png 768w, https:\/\/theexchain.com\/wp-content\/uploads\/2025\/05\/DEX-1.png 1080w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-20491b9 e-con-full e-flex e-con e-parent\" data-id=\"20491b9\" data-element_type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1da738c elementor-widget elementor-widget-html\" data-id=\"1da738c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        primary: '#6366f1',\n                        secondary: '#8b5cf6',\n                        dark: '#111827',\n                        light: '#f9fafb',\n                    },\n                    animation: {\n                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n                    }\n                }\n            }\n        }\n\n\n        \/**\n * Initializes and renders the audit logos\n *\/\nfunction initAuditLogos() {\n    const auditLogosContainer = document.querySelector('.audit-logos');\n    if (!auditLogosContainer) return;\n    \n    \/\/ Define audit companies with colored logos\n    const auditCompanies = [\n        { name: 'CertiK', color: '#1162FF' },\n        { name: 'ConsenSys Diligence', color: '#3259A5' },\n        { name: 'Trail of Bits', color: '#F95738' },\n        { name: 'Quantstamp', color: '#0E003D' },\n        { name: 'PeckShield', color: '#2E8BC0' }\n    ];\n    \n    \/\/ Create logo elements\n    auditCompanies.forEach(company => {\n        const logoDiv = document.createElement('div');\n        logoDiv.className = 'flex flex-col items-center';\n        \n        const logoCircle = document.createElement('div');\n        logoCircle.className = 'w-16 h-16 rounded-full border-2 border-gray-200 flex items-center justify-center mb-2';\n        logoCircle.style.backgroundColor = hexToRgba(company.color, 0.1);\n        logoCircle.style.borderColor = hexToRgba(company.color, 0.3);\n        \n        \/\/ Create logo text (first letter or acronym)\n        const logoText = document.createElement('span');\n        logoText.className = 'font-bold text-xl';\n        logoText.style.color = company.color;\n        logoText.textContent = getAcronym(company.name);\n        \n        \/\/ Create company name text\n        const companyName = document.createElement('span');\n        companyName.className = 'text-sm font-medium text-gray-700';\n        companyName.textContent = company.name;\n        \n        logoCircle.appendChild(logoText);\n        logoDiv.appendChild(logoCircle);\n        logoDiv.appendChild(companyName);\n        \n        auditLogosContainer.appendChild(logoDiv);\n    });\n    \n    \/\/ Add a \"View All\" button\n    const viewAllDiv = document.createElement('div');\n    viewAllDiv.className = 'flex flex-col items-center';\n    \n    const viewAllCircle = document.createElement('div');\n    viewAllCircle.className = 'w-16 h-16 rounded-full border-2 border-gray-200 flex items-center justify-center mb-2 bg-gray-100';\n    \n    const viewAllIcon = document.createElement('span');\n    viewAllIcon.className = 'text-gray-500 font-bold';\n    viewAllIcon.textContent = '+3';\n    \n    const viewAllText = document.createElement('span');\n    viewAllText.className = 'text-sm font-medium text-indigo-600';\n    viewAllText.textContent = 'View All';\n    \n    viewAllCircle.appendChild(viewAllIcon);\n    viewAllDiv.appendChild(viewAllCircle);\n    viewAllDiv.appendChild(viewAllText);\n    \n    auditLogosContainer.appendChild(viewAllDiv);\n}\n\n\/**\n * Converts a hex color to rgba format with specified opacity\n *\/\nfunction hexToRgba(hex, opacity) {\n    hex = hex.replace('#', '');\n    const r = parseInt(hex.substring(0, 2), 16);\n    const g = parseInt(hex.substring(2, 4), 16);\n    const b = parseInt(hex.substring(4, 6), 16);\n    \n    return `rgba(${r}, ${g}, ${b}, ${opacity})`;\n}\n\n\/**\n * Generates an acronym from a company name\n *\/\nfunction getAcronym(name) {\n    \/\/ Special case handling\n    if (name === 'ConsenSys Diligence') return 'CD';\n    if (name === 'Trail of Bits') return 'TB';\n    \n    \/\/ Default: first letter or first letters of multiple words\n    return name.split(' ').map(word => word[0]).join('');\n}\n\n\/**\n * Initializes the feature demo section\n *\/\nfunction initFeatureDemo() {\n    \/\/ Set initial demo content\n    updateFeatureDemo(1);\n}\n\n\/**\n * Updates the feature demo content based on the selected step\n * @param {number} step - The step number (1-4)\n *\/\nfunction updateFeatureDemo(step) {\n    const demoContent = document.querySelector('.demo-feature-content');\n    if (!demoContent) return;\n    \n    \/\/ Clear previous content\n    demoContent.innerHTML = '';\n    \n    \/\/ Create content based on step\n    switch(step) {\n        case 1:\n            createConnectWalletStep(demoContent);\n            break;\n        case 2:\n            createSelectTokensStep(demoContent);\n            break;\n        case 3:\n            createReviewSwapStep(demoContent);\n            break;\n        case 4:\n            createConfirmationStep(demoContent);\n            break;\n        default:\n            createConnectWalletStep(demoContent);\n    }\n}\n\n\/**\n * Creates the connect wallet step content\n *\/\nfunction createConnectWalletStep(container) {\n    const content = document.createElement('div');\n    content.className = 'text-center py-8';\n    \n    content.innerHTML = `\n        <div class=\"max-w-md mx-auto\">\n            <div class=\"mb-8\">\n                <div class=\"w-20 h-20 mx-auto rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-10 w-10 text-indigo-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\" \/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"text-2xl font-bold mb-2\">Connect Your Wallet<\/h3>\n                <p class=\"text-gray-600 mb-6\">\n                    Connect your preferred wallet to access the NexusSwap platform.\n                    Your wallet remains in your control at all times.\n                <\/p>\n            <\/div>\n            \n            <div class=\"space-y-3\">\n                <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left\">\n                    <div class=\"w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center mr-3\">\n                        <span class=\"text-orange-600 font-bold\">M<\/span>\n                    <\/div>\n                    <span class=\"font-medium\">MetaMask<\/span>\n                 \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                    <\/svg>\n                <\/button>\n                \n                <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left\">\n                    <div class=\"w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3\">\n                        <span class=\"text-blue-600 font-bold\">WC<\/span>\n                    <\/div>\n                    <span class=\"font-medium\">WalletConnect<\/span>\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                    <\/svg>\n                <\/button>\n                \n                <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left\">\n                    <div class=\"w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3\">\n                        <span class=\"text-purple-600 font-bold\">CB<\/span>\n                    <\/div>\n                    <span class=\"font-medium\">Coinbase Wallet<\/span>\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                    <\/svg>\n                <\/button>\n            <\/div>\n            \n            <div class=\"mt-6 p-4 bg-blue-50 rounded-lg\">\n                <div class=\"flex\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-blue-600 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                    <\/svg>\n                    <div class=\"text-sm text-blue-700\">\n                        <span class=\"font-medium\">Privacy First:<\/span> We never store your private keys or personal information. Your wallet connects directly with our smart contracts.\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    `;\n    \n    \/\/ Add wallet option click event to advance to next step\n    const walletOptions = content.querySelectorAll('.wallet-option');\n    walletOptions.forEach(option => {\n        option.addEventListener('click', () => {\n            \/\/ Find and activate the next step\n            const nextStepButton = document.querySelector('.demo-step[data-step=\"2\"]');\n            if (nextStepButton) {\n                nextStepButton.click();\n            }\n        });\n    });\n    \n    container.appendChild(content);\n}\n\n\/**\n * Creates the select tokens step content\n *\/\nfunction createSelectTokensStep(container) {\n    const content = document.createElement('div');\n    \n    content.innerHTML = `\n        <div class=\"max-w-lg mx-auto\">\n            <h3 class=\"text-xl font-bold mb-4 text-center\">Select Tokens to Swap<\/h3>\n            \n            <div class=\"mb-4\">\n                <div class=\"flex justify-between mb-2\">\n                    <span class=\"text-sm font-medium\">You Pay<\/span>\n                    <span class=\"text-sm text-gray-500\">Balance: 1.45 ETH<\/span>\n                <\/div>\n                <div class=\"bg-white rounded-lg p-3 border border-gray-200 flex justify-between items-center\">\n                    <span class=\"flex items-center px-3 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors\">\n                        <div class=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2\">\n                            <span class=\"font-bold text-blue-600\">\u039e<\/span>\n                        <\/div>\n                        <span class=\"font-medium\">ETH<\/span>\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-2 text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/>\n                        <\/svg>\n                    <\/span>\n                    <input type=\"text\" value=\"0.5\" class=\"text-right w-24 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded\">\n                <\/div>\n            <\/div>\n            \n            <div class=\"flex justify-center my-2\">\n                <a class=\"swap-direction-btn w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition-colors\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-gray-600 !text-white !fill=\"white\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" \/>\n                    <\/svg>\n                <\/a>\n            <\/div>\n            \n            <div class=\"mb-4\">\n                <div class=\"flex justify-between mb-2\">\n                    <span class=\"text-sm font-medium\">You Receive<\/span>\n                    <span class=\"text-sm text-gray-500\">Balance: 542.75 USDC<\/span>\n                <\/div>\n               \n            <\/div>\n            \n            <div class=\"bg-gray-50 rounded-lg p-3 mb-4\">\n                <div class=\"flex justify-between text-sm\">\n                    <span>Exchange Rate<\/span>\n                    <span>1 ETH = 1,800 USDC<\/span>\n                <\/div>\n                <div class=\"flex justify-between text-sm mt-1\">\n                    <span>Price Impact<\/span>\n                    <span class=\"text-green-600\">0.05%<\/span>\n                <\/div>\n            <\/div>\n            \n            <button class=\"w-full py-3 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium shadow-md hover:shadow-lg transition-all next-step-btn\">\n                Review Swap\n            <\/button>\n        <\/div>\n    `;\n    \n    \/\/ Add click event to advance to next step\n    content.querySelector('.next-step-btn').addEventListener('click', () => {\n        const nextStepButton = document.querySelector('.demo-step[data-step=\"3\"]');\n        if (nextStepButton) {\n            nextStepButton.click();\n        }\n    });\n    \n    container.appendChild(content);\n    \n    \/\/ Add token dropdown toggle functionality (for demo purposes)\n    const tokenButtons = content.querySelectorAll('button:has(.w-8.h-8)');\n    const tokenDropdown = content.querySelector('.token-dropdown');\n    \n    if (tokenButtons.length > 0 && tokenDropdown) {\n        tokenButtons.forEach(button => {\n            button.addEventListener('click', () => {\n                \/\/ This is just for demo purposes, in a real app would toggle visibility\n                if (tokenDropdown.style.display === 'block') {\n                    tokenDropdown.style.display = 'none';\n                } else {\n                    tokenDropdown.style.display = 'block';\n                    \n                    \/\/ Auto-hide after a short delay for demo purposes\n                    setTimeout(() => {\n                        tokenDropdown.style.display = 'none';\n                    }, 3000);\n                }\n            });\n        });\n    }\n}\n\n\/**\n * Creates the review swap step content\n *\/\nfunction createReviewSwapStep(container) {\n    const content = document.createElement('div');\n    \n    content.innerHTML = `\n        <div class=\"max-w-lg mx-auto\">\n            <h3 class=\"text-xl font-bold mb-4 text-center\">Review Your Swap<\/h3>\n            \n            <div class=\"bg-white rounded-lg border border-gray-200 p-5 mb-6\">\n                <div class=\"flex justify-between items-center mb-6\">\n                    <div class=\"flex items-center\">\n                        <div class=\"w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-2\">\n                            <span class=\"font-bold text-blue-600\">\u039e<\/span>\n                        <\/div>\n                        <div>\n                            <div class=\"text-sm text-gray-500\">You Pay<\/div>\n                            <div class=\"font-bold\">0.5 ETH<\/div>\n                        <\/div>\n                    <\/div>\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\" \/>\n                    <\/svg>\n                    <div class=\"flex items-center\">\n                        <div class=\"w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-2\">\n                            <span class=\"font-bold text-blue-600\">$<\/span>\n                        <\/div>\n                        <div>\n                            <div class=\"text-sm text-gray-500\">You Receive<\/div>\n                            <div class=\"font-bold\">900 USDC<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"border-t border-gray-200 pt-4 mb-4\">\n                    <h4 class=\"font-medium mb-2\">Transaction Details<\/h4>\n                    <div class=\"space-y-2 text-sm\">\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Exchange Rate<\/span>\n                            <span>1 ETH = 1,800 USDC<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Price Impact<\/span>\n                            <span class=\"text-green-600\">0.05%<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Liquidity Provider Fee<\/span>\n                            <span>2.7 USDC<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Network Fee (Est.)<\/span>\n                            <span>$1.24<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Route<\/span>\n                            <span>ETH \u2192 USDC<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"bg-indigo-50 rounded-lg p-3\">\n                    <div class=\"flex\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-indigo-600 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                        <\/svg>\n                        <div class=\"text-sm text-indigo-700\">\n                            Output is estimated. You will receive at least <span class=\"font-medium\">891.45 USDC<\/span> or the transaction will revert.\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"flex flex-col space-y-3\">\n                <button class=\"w-full py-3 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium shadow-md hover:shadow-lg transition-all next-step-btn\">\n                    Confirm Swap\n                <\/button>\n                <button class=\"w-full py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-all\">\n                    Edit Settings\n                <\/button>\n            <\/div>\n        <\/div>\n    `;\n    \n    \/\/ Add click event to advance to next step\n    content.querySelector('.next-step-btn').addEventListener('click', () => {\n        const nextStepButton = document.querySelector('.demo-step[data-step=\"4\"]');\n        if (nextStepButton) {\n            nextStepButton.click();\n        }\n    });\n    \n    container.appendChild(content);\n}\n\n\/**\n * Creates the confirmation step content\n *\/\nfunction createConfirmationStep(container) {\n    const content = document.createElement('div');\n    \n    content.innerHTML = `\n        <div class=\"max-w-lg mx-auto text-center\">\n            <div class=\"mb-6\">\n                <div class=\"w-20 h-20 mx-auto rounded-full bg-green-100 flex items-center justify-center mb-4\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-10 w-10 text-green-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" \/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"text-2xl font-bold mb-2\">Transaction Successful!<\/h3>\n                <p class=\"text-gray-600 mb-6\">\n                    Your swap has been completed successfully. You have received 900 USDC in your wallet.\n                <\/p>\n            <\/div>\n            \n            <div class=\"bg-white rounded-lg border border-gray-200 p-5 mb-6\">\n                <div class=\"flex justify-between items-center\">\n                    <div>\n                        <div class=\"text-sm text-gray-500\">Transaction Hash<\/div>\n                        <div class=\"font-mono text-sm text-left truncate max-w-xs\">0x7d21...e8f9<\/div>\n                    <\/div>\n                    <button class=\"text-indigo-600 hover:text-indigo-800\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path d=\"M8 2a1 1 0 000 2h2a1 1 0 100-2H8z\" \/>\n                            <path d=\"M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z\" \/>\n                        <\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n            \n            <div class=\"bg-indigo-50 rounded-lg p-4 mb-6\">\n                <h4 class=\"font-medium mb-2\">Transaction Summary<\/h4>\n                <div class=\"flex justify-between items-center mb-2\">\n                    <span class=\"text-gray-600\">You Paid<\/span>\n                    <span class=\"font-medium\">0.5 ETH<\/span>\n                <\/div>\n                <div class=\"flex justify-between items-center\">\n                    <span class=\"text-gray-600\">You Received<\/span>\n                    <span class=\"font-medium\">900 USDC<\/span>\n                <\/div>\n            <\/div>\n            \n            <div class=\"flex flex-col space-y-3\">\n                <button class=\"w-full py-3 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium shadow-md hover:shadow-lg transition-all\">\n                    New Swap\n                <\/button>\n                <button class=\"w-full py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-all\">\n                    View on Block Explorer\n                <\/button>\n            <\/div>\n        <\/div>\n    `;\n    \n    container.appendChild(content);\n}\n\n\/**\n * Initializes the feature demo section\n *\/\n function initFeatureDemo() {\n    \/\/ Set initial demo content\n    updateFeatureDemo(1);\n}\n\n\/**\n * Updates the feature demo content based on the selected step\n * @param {number} step - The step number (1-4)\n *\/\nfunction updateFeatureDemo(step) {\n    const demoContent = document.querySelector('.demo-feature-content');\n    if (!demoContent) return;\n    \n    \/\/ Clear previous content\n    demoContent.innerHTML = '';\n    \n    \/\/ Create content based on step\n    switch(step) {\n        case 1:\n            createConnectWalletStep(demoContent);\n            break;\n        case 2:\n            createSelectTokensStep(demoContent);\n            break;\n        case 3:\n            createReviewSwapStep(demoContent);\n            break;\n        case 4:\n            createConfirmationStep(demoContent);\n            break;\n        default:\n            createConnectWalletStep(demoContent);\n    }\n}\n\n\/**\n * Creates the connect wallet step content\n *\/\nfunction createConnectWalletStep(container) {\n    const content = document.createElement('div');\n    content.className = 'text-center py-8';\n    \n    content.innerHTML = `\n        <div class=\"max-w-md mx-auto\">\n            <div class=\"mb-8\">\n                <div class=\"w-20 h-20 mx-auto rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-10 w-10 text-indigo-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\" \/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"text-2xl font-bold mb-2\">Connect Your Wallet<\/h3>\n                <p class=\"text-gray-600 mb-6\">\n                    Connect your preferred wallet to access the NexusSwap platform.\n                    Your wallet remains in your control at all times.\n                <\/p>\n            <\/div>\n            \n            <div class=\"space-y-3\">\n                <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left\">\n                    <div class=\"w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center mr-3\">\n                        <span class=\"text-orange-600 font-bold\">M<\/span>\n                    <\/div>\n                    <span class=\"font-medium\">MetaMask<\/span>\n                    \n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                    <\/svg>\n                <\/button>\n                \n                <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left\">\n                    <div class=\"w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3\">\n                        <span class=\"text-blue-600 font-bold\">WC<\/span>\n                    <\/div>\n                    <span class=\"font-medium\">WalletConnect<\/span>\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                    <\/svg>\n                <\/button>\n                \n                <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left\">\n                    <div class=\"w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3\">\n                        <span class=\"text-purple-600 font-bold\">CB<\/span>\n                    <\/div>\n                    <span class=\"font-medium\">Coinbase Wallet<\/span>\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                    <\/svg>\n                <\/button>\n            <\/div>\n            \n            <div class=\"mt-6 p-4 bg-blue-50 rounded-lg\">\n                <div class=\"flex\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-blue-600 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                    <\/svg>\n                    <div class=\"text-sm text-blue-700\">\n                        <span class=\"font-medium\">Privacy First:<\/span> We never store your private keys or personal information. Your wallet connects directly with our smart contracts.\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    `;\n    \n    \/\/ Add wallet option click event to advance to next step\n    const walletOptions = content.querySelectorAll('.wallet-option');\n    walletOptions.forEach(option => {\n        option.addEventListener('click', () => {\n            \/\/ Find and activate the next step\n            const nextStepButton = document.querySelector('.demo-step[data-step=\"2\"]');\n            if (nextStepButton) {\n                nextStepButton.click();\n            }\n        });\n    });\n    \n    container.appendChild(content);\n}\n\n\/**\n * Creates the select tokens step content\n *\/\nfunction createSelectTokensStep(container) {\n    const content = document.createElement('div');\n    \n    content.innerHTML = `\n        <div class=\"max-w-lg mx-auto\">\n            <h3 class=\"text-xl font-bold mb-4 text-center\">Select Tokens to Swap<\/h3>\n            \n            <div class=\"mb-4\">\n                <div class=\"flex justify-between mb-2\">\n                    <span class=\"text-sm font-medium\">You Pay<\/span>\n                    <span class=\"text-sm text-gray-500\">Balance: 1.45 ETH<\/span>\n                <\/div>\n                <div class=\"bg-white rounded-lg p-3 border border-gray-200 flex justify-between items-center\">\n                    <span class=\"flex items-center px-3 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors\">\n                        <div class=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2\">\n                            <span class=\"font-bold text-blue-600\">\u039e<\/span>\n                        <\/div>\n                        <span class=\"font-medium\">ETH<\/span>\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-2 text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/>\n                        <\/svg>\n                    <\/span>\n                    <input type=\"text\" value=\"0.5\" class=\"text-right w-24 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded\">\n                <\/div>\n            <\/div>\n            \n            <div class=\"flex justify-center my-2\">\n                <span class=\"swap-direction-btn w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition-colors\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-gray-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" \/>\n                    <\/svg>\n                <\/span>\n            <\/div>\n            \n            <div class=\"mb-4\">\n                <div class=\"flex justify-between mb-2\">\n                    <span class=\"text-sm font-medium\">You Receive<\/span>\n                    <span class=\"text-sm text-gray-500\">Balance: 542.75 USDC<\/span>\n                <\/div>\n                <div class=\"relative\">\n                    <div class=\"bg-white rounded-lg p-3 border border-gray-200 flex justify-between items-center\">\n                        <span class=\"flex items-center px-3 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors\">\n                            <div class=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2\">\n                                <span class=\"font-bold text-blue-600\">$<\/span>\n                            <\/div>\n                            <span class=\"font-medium\">USDC<\/span>\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-2 text-gray-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/>\n                            <\/svg>\n                        <\/span>\n                        <div class=\"text-right font-medium\">900.00<\/div>\n                    <\/div>\n                    \n                <\/div>\n            <\/div>\n            \n            <div class=\"bg-gray-50 rounded-lg p-3 mb-4\">\n                <div class=\"flex justify-between text-sm\">\n                    <span>Exchange Rate<\/span>\n                    <span>1 ETH = 1,800 USDC<\/span>\n                <\/div>\n                <div class=\"flex justify-between text-sm mt-1\">\n                    <span>Price Impact<\/span>\n                    <span class=\"text-green-600\">0.05%<\/span>\n                <\/div>\n            <\/div>\n            \n            <button class=\"w-full py-3 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium shadow-md hover:shadow-lg transition-all next-step-btn\">\n                Review Swap\n            <\/button>\n        <\/div>\n    `;\n    \n    \/\/ Add click event to advance to next step\n    content.querySelector('.next-step-btn').addEventListener('click', () => {\n        const nextStepButton = document.querySelector('.demo-step[data-step=\"3\"]');\n        if (nextStepButton) {\n            nextStepButton.click();\n        }\n    });\n    \n    container.appendChild(content);\n    \n    \/\/ Add token dropdown toggle functionality (for demo purposes)\n    const tokenButtons = content.querySelectorAll('button:has(.w-8.h-8)');\n    const tokenDropdown = content.querySelector('.token-dropdown');\n    \n    if (tokenButtons.length > 0 && tokenDropdown) {\n        tokenButtons.forEach(button => {\n            button.addEventListener('click', () => {\n                \/\/ This is just for demo purposes, in a real app would toggle visibility\n                if (tokenDropdown.style.display === 'block') {\n                    tokenDropdown.style.display = 'none';\n                } else {\n                    tokenDropdown.style.display = 'block';\n                    \n                    \/\/ Auto-hide after a short delay for demo purposes\n                    setTimeout(() => {\n                        tokenDropdown.style.display = 'none';\n                    }, 3000);\n                }\n            });\n        });\n    }\n}\n\n\/**\n * Creates the review swap step content\n *\/\nfunction createReviewSwapStep(container) {\n    const content = document.createElement('div');\n    \n    content.innerHTML = `\n        <div class=\"max-w-lg mx-auto\">\n            <h3 class=\"text-xl font-bold mb-4 text-center\">Review Your Swap<\/h3>\n            \n            <div class=\"bg-white rounded-lg border border-gray-200 p-5 mb-6\">\n                <div class=\"flex justify-between items-center mb-6\">\n                    <div class=\"flex items-center\">\n                        <div class=\"w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-2\">\n                            <span class=\"font-bold text-blue-600\">\u039e<\/span>\n                        <\/div>\n                        <div>\n                            <div class=\"text-sm text-gray-500\">You Pay<\/div>\n                            <div class=\"font-bold\">0.5 ETH<\/div>\n                        <\/div>\n                    <\/div>\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\" \/>\n                    <\/svg>\n                    <div class=\"flex items-center\">\n                        <div class=\"w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-2\">\n                            <span class=\"font-bold text-blue-600\">$<\/span>\n                        <\/div>\n                        <div>\n                            <div class=\"text-sm text-gray-500\">You Receive<\/div>\n                            <div class=\"font-bold\">900 USDC<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"border-t border-gray-200 pt-4 mb-4\">\n                    <h4 class=\"font-medium mb-2\">Transaction Details<\/h4>\n                    <div class=\"space-y-2 text-sm\">\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Exchange Rate<\/span>\n                            <span>1 ETH = 1,800 USDC<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Price Impact<\/span>\n                            <span class=\"text-green-600\">0.05%<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Liquidity Provider Fee<\/span>\n                            <span>2.7 USDC<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Network Fee (Est.)<\/span>\n                            <span>$1.24<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between\">\n                            <span class=\"text-gray-500\">Route<\/span>\n                            <span>ETH \u2192 USDC<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"bg-indigo-50 rounded-lg p-3\">\n                    <div class=\"flex\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-indigo-600 mr-2 flex-shrink-0 mt-0.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                        <\/svg>\n                        <div class=\"text-sm text-indigo-700\">\n                            Output is estimated. You will receive at least <span class=\"font-medium\">891.45 USDC<\/span> or the transaction will revert.\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"flex flex-col space-y-3\">\n                <button class=\"w-full py-3 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium shadow-md hover:shadow-lg transition-all next-step-btn\">\n                    Confirm Swap\n                <\/button>\n                <button class=\"w-full py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-all\">\n                    Edit Settings\n                <\/button>\n            <\/div>\n        <\/div>\n    `;\n    \n    \/\/ Add click event to advance to next step\n    content.querySelector('.next-step-btn').addEventListener('click', () => {\n        const nextStepButton = document.querySelector('.demo-step[data-step=\"4\"]');\n        if (nextStepButton) {\n            nextStepButton.click();\n        }\n    });\n    \n    container.appendChild(content);\n}\n\n\/**\n * Creates the confirmation step content\n *\/\nfunction createConfirmationStep(container) {\n    const content = document.createElement('div');\n    \n    content.innerHTML = `\n        <div class=\"max-w-lg mx-auto text-center\">\n            <div class=\"mb-6\">\n                <div class=\"w-20 h-20 mx-auto rounded-full bg-green-100 flex items-center justify-center mb-4\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-10 w-10 text-green-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" \/>\n                    <\/svg>\n                <\/div>\n                <h3 class=\"text-2xl font-bold mb-2\">Transaction Successful!<\/h3>\n                <p class=\"text-gray-600 mb-6\">\n                    Your swap has been completed successfully. You have received 900 USDC in your wallet.\n                <\/p>\n            <\/div>\n            \n            <div class=\"bg-white rounded-lg border border-gray-200 p-5 mb-6\">\n                <div class=\"flex justify-between items-center\">\n                    <div>\n                        <div class=\"text-sm text-gray-500\">Transaction Hash<\/div>\n                        <div class=\"font-mono text-sm text-left truncate max-w-xs\">0x7d21...e8f9<\/div>\n                    <\/div>\n                    <button class=\"text-indigo-600 hover:text-indigo-800\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path d=\"M8 2a1 1 0 000 2h2a1 1 0 100-2H8z\" \/>\n                            <path d=\"M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z\" \/>\n                        <\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n            \n            <div class=\"bg-indigo-50 rounded-lg p-4 mb-6\">\n                <h4 class=\"font-medium mb-2\">Transaction Summary<\/h4>\n                <div class=\"flex justify-between items-center mb-2\">\n                    <span class=\"text-gray-600\">You Paid<\/span>\n                    <span class=\"font-medium\">0.5 ETH<\/span>\n                <\/div>\n                <div class=\"flex justify-between items-center\">\n                    <span class=\"text-gray-600\">You Received<\/span>\n                    <span class=\"font-medium\">900 USDC<\/span>\n                <\/div>\n            <\/div>\n            \n            <div class=\"flex flex-col space-y-3\">\n                <button class=\"w-full py-3 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium shadow-md hover:shadow-lg transition-all\">\n                    New Swap\n                <\/button>\n                <button class=\"w-full py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-all\">\n                    View on Block Explorer\n                <\/button>\n            <\/div>\n        <\/div>\n    `;\n    \n    container.appendChild(content);\n}\n\n\/**\n * Initializes and renders the blockchain background\n *\/\n function initBlockchainBackground() {\n    const backgroundDiv = document.getElementById('blockchain-background');\n    if (!backgroundDiv) return;\n    \n    \/\/ Create SVG element\n    const svgNS = \"http:\/\/www.w3.org\/2000\/svg\";\n    const svg = document.createElementNS(svgNS, \"svg\");\n    svg.setAttribute(\"width\", \"100%\");\n    svg.setAttribute(\"height\", \"100%\");\n    svg.setAttribute(\"viewBox\", \"0 0 1000 1000\");\n    svg.setAttribute(\"preserveAspectRatio\", \"xMidYMid slice\");\n    \n    \/\/ Create linear gradient\n    const defs = document.createElementNS(svgNS, \"defs\");\n    const gradient = document.createElementNS(svgNS, \"linearGradient\");\n    gradient.setAttribute(\"id\", \"bg-gradient\");\n    gradient.setAttribute(\"x1\", \"0%\");\n    gradient.setAttribute(\"y1\", \"0%\");\n    gradient.setAttribute(\"x2\", \"100%\");\n    gradient.setAttribute(\"y2\", \"100%\");\n    \n    const stop1 = document.createElementNS(svgNS, \"stop\");\n    stop1.setAttribute(\"offset\", \"0%\");\n    stop1.setAttribute(\"stop-color\", \"#6366f1\");\n    stop1.setAttribute(\"stop-opacity\", \"0.2\");\n    \n    const stop2 = document.createElementNS(svgNS, \"stop\");\n    stop2.setAttribute(\"offset\", \"100%\");\n    stop2.setAttribute(\"stop-color\", \"#8b5cf6\");\n    stop2.setAttribute(\"stop-opacity\", \"0.2\");\n    \n    gradient.appendChild(stop1);\n    gradient.appendChild(stop2);\n    defs.appendChild(gradient);\n    svg.appendChild(defs);\n    \n    \/\/ Add base rectangle with gradient\n    const baseRect = document.createElementNS(svgNS, \"rect\");\n    baseRect.setAttribute(\"width\", \"100%\");\n    baseRect.setAttribute(\"height\", \"100%\");\n    baseRect.setAttribute(\"fill\", \"url(#bg-gradient)\");\n    svg.appendChild(baseRect);\n    \n    \/\/ Create hexagon pattern\n    for (let i = 0; i < 40; i++) {\n        const x = Math.random() * 1000;\n        const y = Math.random() * 1000;\n        const size = Math.random() * 40 + 10;\n        \n        const hexagon = document.createElementNS(svgNS, \"path\");\n        hexagon.setAttribute(\"d\", createHexagonPath(x, y, size));\n        hexagon.setAttribute(\"fill\", \"none\");\n        hexagon.setAttribute(\"stroke\", \"rgba(99, 102, 241, 0.15)\");\n        hexagon.setAttribute(\"stroke-width\", \"1\");\n        svg.appendChild(hexagon);\n        \n        \/\/ Animate some hexagons\n        if (Math.random() > 0.7) {\n            const anim = document.createElementNS(svgNS, \"animate\");\n            anim.setAttribute(\"attributeName\", \"opacity\");\n            anim.setAttribute(\"values\", \"0.15;0.3;0.15\");\n            anim.setAttribute(\"dur\", (Math.random() * 5 + 3) + \"s\");\n            anim.setAttribute(\"repeatCount\", \"indefinite\");\n            hexagon.appendChild(anim);\n        }\n    }\n    \n    \/\/ Add connection lines\n    for (let i = 0; i < 30; i++) {\n        const x1 = Math.random() * 1000;\n        const y1 = Math.random() * 1000;\n        const x2 = Math.random() * 1000;\n        const y2 = Math.random() * 1000;\n        \n        const line = document.createElementNS(svgNS, \"line\");\n        line.setAttribute(\"x1\", x1);\n        line.setAttribute(\"y1\", y1);\n        line.setAttribute(\"x2\", x2);\n        line.setAttribute(\"y2\", y2);\n        line.setAttribute(\"stroke\", \"rgba(99, 102, 241, 0.1)\");\n        line.setAttribute(\"stroke-width\", \"1\");\n        svg.appendChild(line);\n    }\n    \n    \/\/ Add dots at intersections\n    for (let i = 0; i < 50; i++) {\n        const x = Math.random() * 1000;\n        const y = Math.random() * 1000;\n        const size = Math.random() * 3 + 1;\n        \n        const circle = document.createElementNS(svgNS, \"circle\");\n        circle.setAttribute(\"cx\", x);\n        circle.setAttribute(\"cy\", y);\n        circle.setAttribute(\"r\", size);\n        \n        \/\/ Randomize between blue and purple\n        const color = Math.random() > 0.5 ? \"rgba(99, 102, 241, 0.3)\" : \"rgba(139, 92, 246, 0.3)\";\n        circle.setAttribute(\"fill\", color);\n        \n        \/\/ Add pulse animation to some dots\n        if (Math.random() > 0.7) {\n            const anim = document.createElementNS(svgNS, \"animate\");\n            anim.setAttribute(\"attributeName\", \"r\");\n            anim.setAttribute(\"values\", size + \";\" + (size * 2) + \";\" + size);\n            anim.setAttribute(\"dur\", (Math.random() * 4 + 2) + \"s\");\n            anim.setAttribute(\"repeatCount\", \"indefinite\");\n            circle.appendChild(anim);\n        }\n        \n        svg.appendChild(circle);\n    }\n    \n    \/\/ Append SVG to background div\n    backgroundDiv.appendChild(svg);\n}\n\n\/**\n * Creates a hexagon path at the specified position and size\n *\/\nfunction createHexagonPath(x, y, size) {\n    const points = [];\n    for (let i = 0; i < 6; i++) {\n        const angle = (i * 60) * Math.PI \/ 180;\n        const pointX = x + size * Math.cos(angle);\n        const pointY = y + size * Math.sin(angle);\n        points.push(pointX + ',' + pointY);\n    }\n    return 'M' + points.join(' L') + ' Z';\n}\n\n\/**\n * Initializes and renders the partner logos\n *\/\n function initPartnerLogos() {\n    const partnerLogosContainer = document.querySelector('.partner-logos');\n    if (!partnerLogosContainer) return;\n    \n    \/\/ Define partner companies with colored logos\n    const partnerCompanies = [\n        { name: 'Ethereum', color: '#627EEA' },\n        { name: 'Polygon', color: '#8247E5' },\n        { name: 'Arbitrum', color: '#2D374B' },\n        { name: 'Optimism', color: '#FF0420' },\n        { name: 'Binance', color: '#F0B90B' },\n        { name: 'Chainlink', color: '#2A5ADA' }\n    ];\n    \n    \/\/ Create logo elements\n    partnerCompanies.forEach(company => {\n        const logoDiv = document.createElement('div');\n        logoDiv.className = 'flex flex-col items-center';\n        \n        const logoCircle = document.createElement('div');\n        logoCircle.className = 'w-16 h-16 rounded-full border-2 border-gray-200 flex items-center justify-center mb-2';\n        logoCircle.style.backgroundColor = hexToRgba(company.color, 0.1);\n        logoCircle.style.borderColor = hexToRgba(company.color, 0.3);\n        \n        \/\/ Create logo text (first letter or acronym)\n        const logoText = document.createElement('span');\n        logoText.className = 'font-bold text-xl';\n        logoText.style.color = company.color;\n        logoText.textContent = company.name.substring(0, 2);\n        \n        \/\/ Create company name text\n        const companyName = document.createElement('span');\n        companyName.className = 'text-sm font-medium text-gray-700';\n        companyName.textContent = company.name;\n        \n        logoCircle.appendChild(logoText);\n        logoDiv.appendChild(logoCircle);\n        logoDiv.appendChild(companyName);\n        \n        partnerLogosContainer.appendChild(logoDiv);\n    });\n    \n    \/\/ Add a \"View All\" button\n    const viewAllDiv = document.createElement('div');\n    viewAllDiv.className = 'flex flex-col items-center';\n    \n    const viewAllCircle = document.createElement('div');\n    viewAllCircle.className = 'w-16 h-16 rounded-full border-2 border-gray-200 flex items-center justify-center mb-2 bg-gray-100';\n    \n    const viewAllIcon = document.createElement('span');\n    viewAllIcon.className = 'text-gray-500 font-bold';\n    viewAllIcon.textContent = '+8';\n    \n    const viewAllText = document.createElement('span');\n    viewAllText.className = 'text-sm font-medium text-indigo-600';\n    viewAllText.textContent = 'View All';\n    \n    viewAllCircle.appendChild(viewAllIcon);\n    viewAllDiv.appendChild(viewAllCircle);\n    viewAllDiv.appendChild(viewAllText);\n    \n    partnerLogosContainer.appendChild(viewAllDiv);\n}\n\n\/**\n * Initializes all animations on the page\n *\/\n function initAnimations() {\n    \/\/ Initialize hero section animations\n    initHeroAnimations();\n    \n    \/\/ Initialize scroll-based animations\n    initScrollAnimations();\n    \n    \/\/ Initialize other interactive elements\n    initInteractiveElements();\n}\n\n\/**\n * Initializes animations for the hero section\n *\/\nfunction initHeroAnimations() {\n    \/\/ Animate headline\n    setTimeout(() => {\n        document.querySelector('.headline').classList.add('opacity-100');\n    }, 100);\n    \n    \/\/ Animate subheadline\n    setTimeout(() => {\n        const subheadline = document.querySelector('.subheadline');\n        subheadline.classList.add('opacity-100');\n        subheadline.classList.add('slide-up');\n    }, 800);\n    \n    \/\/ Animate CTA buttons\n    setTimeout(() => {\n        const heroCta = document.querySelector('.hero-cta');\n        heroCta.classList.add('opacity-100');\n        heroCta.classList.add('slide-up');\n    }, 1200);\n}\n\n\/**\n * Initializes animations triggered by scrolling\n *\/\nfunction initScrollAnimations() {\n    \/\/ Create intersection observer for scroll animations\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            \/\/ Animate when element is in view\n            if (entry.isIntersecting) {\n                if (entry.target.classList.contains('benefit-card')) {\n                    \/\/ Animate value proposition cards with delay based on index\n                    const index = Array.from(entry.target.parentNode.children).indexOf(entry.target);\n                    setTimeout(() => {\n                        entry.target.classList.add('opacity-100');\n                        entry.target.classList.add('slide-up');\n                    }, index * 150);\n                } \n                else if (entry.target.classList.contains('service-card')) {\n                    \/\/ Animate service cards with delay based on index\n                    const index = Array.from(entry.target.parentNode.children).indexOf(entry.target);\n                    setTimeout(() => {\n                        entry.target.classList.add('opacity-100');\n                        entry.target.classList.add('slide-up');\n                    }, index * 150);\n                }\n                else if (entry.target.classList.contains('why-choose-point')) {\n                    \/\/ Animate \"why choose us\" points\n                    entry.target.classList.add('opacity-100');\n                    entry.target.classList.remove('translate-x-4');\n                }\n                else if (entry.target.classList.contains('metrics-card')) {\n                    \/\/ Animate metrics cards\n                    entry.target.classList.add('opacity-100');\n                    entry.target.classList.add('scale-in');\n                }\n                else if (entry.target.classList.contains('audit-logos') || entry.target.classList.contains('partner-logos')) {\n                    \/\/ Animate logo sections\n                    entry.target.classList.add('opacity-100');\n                    entry.target.classList.add('fade-in');\n                }\n                else if (entry.target.classList.contains('unique-feature')) {\n                    \/\/ Animate unique features with delay based on index\n                    const index = Array.from(entry.target.parentNode.children).indexOf(entry.target);\n                    setTimeout(() => {\n                        entry.target.classList.add('opacity-100');\n                        entry.target.classList.add('scale-in');\n                    }, index * 200);\n                }\n                \n                \/\/ Stop observing after animation is triggered\n                observer.unobserve(entry.target);\n            }\n        });\n    }, { threshold: 0.1 });\n    \n    \/\/ Observe elements for animation\n    document.querySelectorAll('.benefit-card, .service-card, .why-choose-point, .metrics-card, .audit-logos, .partner-logos, .unique-feature').forEach(element => {\n        observer.observe(element);\n    });\n}\n\n\/**\n * Initializes other interactive elements on the page\n *\/\nfunction initInteractiveElements() {\n    \/\/ Swap direction button animation\n    const swapButton = document.querySelector('.swap-direction-btn');\n    if (swapButton) {\n        swapButton.addEventListener('click', function() {\n            this.classList.add('rotate-180');\n            setTimeout(() => {\n                this.classList.remove('rotate-180');\n            }, 300);\n        });\n    }\n    \n    \/\/ Start trading button highlight effect\n    const startTradingBtn = document.querySelector('.start-trading-btn');\n    if (startTradingBtn) {\n        setInterval(() => {\n            startTradingBtn.classList.add('relative', 'overflow-hidden');\n            startTradingBtn.classList.add('pulse');\n            setTimeout(() => {\n                startTradingBtn.classList.remove('pulse');\n            }, 1000);\n        }, 5000);\n    }\n}\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize the blockchain background\n    if (typeof initBlockchainBackground === 'function') {\n        initBlockchainBackground();\n    }\n    \n    \/\/ Initialize all animations\n    if (typeof initAnimations === 'function') {\n        initAnimations();\n    }\n    \n    \/\/ Initialize feature demo\n    if (typeof initFeatureDemo === 'function') {\n        initFeatureDemo();\n    }\n    \n    \/\/ Initialize audit and partner logos\n    if (typeof initAuditLogos === 'function') {\n        initAuditLogos();\n    }\n    \n    if (typeof initPartnerLogos === 'function') {\n        initPartnerLogos();\n    }\n    \n    \/\/ FAQ Accordion functionality\n    const faqQuestions = document.querySelectorAll('.faq-question');\n    \n    faqQuestions.forEach(question => {\n        question.addEventListener('click', () => {\n            \/\/ Toggle active class on the question\n            question.classList.toggle('active');\n            \n            \/\/ Find the associated answer\n            const answer = question.nextElementSibling;\n            \n            \/\/ Toggle the active class on the answer\n            answer.classList.toggle('active');\n            \n            \/\/ Toggle the hidden class on the answer\n            answer.classList.toggle('hidden');\n        });\n    });\n    \n    \/\/ Tooltip functionality\n    const tooltips = document.querySelectorAll('.tooltip');\n    const tooltipElement = document.getElementById('tooltip');\n    \n    tooltips.forEach(tooltip => {\n        tooltip.addEventListener('mouseenter', (e) => {\n            const tooltipText = e.target.getAttribute('data-tooltip');\n            tooltipElement.textContent = tooltipText;\n            tooltipElement.style.left = e.pageX + 'px';\n            tooltipElement.style.top = (e.pageY - 40) + 'px';\n            tooltipElement.classList.remove('hidden');\n        });\n        \n        tooltip.addEventListener('mouseleave', () => {\n            tooltipElement.classList.add('hidden');\n        });\n    });\n    \n    \/\/ Testimonial slider functionality\n    let currentSlide = 0;\n    const testimonialsTrack = document.querySelector('.testimonial-track');\n    const testimonialSlides = document.querySelectorAll('.testimonial-slide');\n    const prevButton = document.querySelector('.testimonial-nav-prev');\n    const nextButton = document.querySelector('.testimonial-nav-next');\n    \n    function updateTestimonialPosition() {\n        const slideWidth = testimonialSlides[0].offsetWidth;\n        const translateValue = -currentSlide * slideWidth;\n        testimonialsTrack.style.transform = `translateX(${translateValue}px)`;\n    }\n    \n    \/\/ Set the initial position\n    window.addEventListener('resize', updateTestimonialPosition);\n    updateTestimonialPosition();\n    \n    \/\/ Previous button event listener\n    prevButton.addEventListener('click', () => {\n        if (currentSlide > 0) {\n            currentSlide--;\n            updateTestimonialPosition();\n        }\n    });\n    \n    \/\/ Next button event listener\n    nextButton.addEventListener('click', () => {\n        if (currentSlide < testimonialSlides.length - 1) {\n            currentSlide++;\n            updateTestimonialPosition();\n        }\n    });\n    \n    \/\/ Demo steps functionality\n    const demoSteps = document.querySelectorAll('.demo-step');\n    const stepLines = document.querySelectorAll('.step-line');\n    \n    demoSteps.forEach((step, index) => {\n        step.addEventListener('click', () => {\n            \/\/ Remove active class from all steps\n            demoSteps.forEach(s => s.classList.remove('active'));\n            \n            \/\/ Add active class to current step and all previous steps\n            for (let i = 0; i <= index; i++) {\n                demoSteps[i].classList.add('active');\n                demoSteps[i].querySelector('.step-indicator').classList.add('bg-indigo-600');\n                demoSteps[i].querySelector('.step-indicator').classList.add('text-white');\n                demoSteps[i].querySelector('.step-indicator').classList.remove('bg-gray-300');\n                demoSteps[i].querySelector('.step-indicator').classList.remove('text-gray-600');\n                \n                \/\/ Update step lines\n                if (i < index) {\n                    stepLines[i].classList.add('bg-indigo-600');\n                    stepLines[i].classList.add('active');\n                }\n            }\n            \n            \/\/ Reset steps after the current one\n            for (let i = index + 1; i < demoSteps.length; i++) {\n                demoSteps[i].classList.remove('active');\n                demoSteps[i].querySelector('.step-indicator').classList.remove('bg-indigo-600');\n                demoSteps[i].querySelector('.step-indicator').classList.remove('text-white');\n                demoSteps[i].querySelector('.step-indicator').classList.add('bg-gray-300');\n                demoSteps[i].querySelector('.step-indicator').classList.add('text-gray-600');\n                \n                \/\/ Update step lines\n                if (i - 1 >= index) {\n                    stepLines[i - 1].classList.remove('bg-indigo-600');\n                    stepLines[i - 1].classList.remove('active');\n                }\n            }\n            \n            \/\/ Update the feature demo content based on step\n            if (typeof updateFeatureDemo === 'function') {\n                updateFeatureDemo(parseInt(step.getAttribute('data-step')));\n            }\n        });\n    });\n    \n    \/\/ Compare button functionality\n    const compareBtn = document.querySelector('.compare-btn');\n    \n    if (compareBtn) {\n        compareBtn.addEventListener('click', () => {\n            \/\/ Create modal with comparison table\n            const modal = document.createElement('div');\n            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';\n            \n            const modalContent = document.createElement('div');\n            modalContent.className = 'bg-white rounded-xl p-6 max-w-3xl w-full max-h-[90vh] overflow-auto';\n            \n            \/\/ Close button\n            const closeButton = document.createElement('button');\n            closeButton.className = 'absolute top-4 right-4 text-gray-500 hover:text-gray-700';\n            closeButton.innerHTML = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n            <\/svg>`;\n            \n            closeButton.addEventListener('click', () => {\n                document.body.removeChild(modal);\n            });\n            \n            \/\/ Comparison table content\n            const tableContent = `\n                <div class=\"text-center mb-6\">\n                    <h3 class=\"text-2xl font-bold mb-2\">DEX vs. CEX Comparison<\/h3>\n                    <p class=\"text-gray-600\">Understanding the key differences between decentralized and centralized exchanges<\/p>\n                <\/div>\n                \n                <div class=\"overflow-x-auto\">\n                    <table class=\"w-full border-collapse\">\n                        <thead>\n                            <tr class=\"bg-gray-100\">\n                                <th class=\"border border-gray-200 px-4 py-2 text-left\">Feature<\/th>\n                                <th class=\"border border-gray-200 px-4 py-2 text-center\">Decentralized Exchange (DEX)<\/th>\n                                <th class=\"border border-gray-200 px-4 py-2 text-center\">Centralized Exchange (CEX)<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">Custody of Funds<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-green-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-green-600 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        Self-custody (you control your keys)\n                                    <\/div>\n                                <\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-red-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-red-500 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        Exchange holds your funds\n                                    <\/div>\n                                <\/td>\n                            <\/tr>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">KYC Requirements<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-green-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-green-600 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        No KYC required\n                                    <\/div>\n                                <\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-red-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-red-500 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        KYC & identity verification\n                                    <\/div>\n                                <\/td>\n                            <\/tr>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">Transaction Transparency<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-green-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-green-600 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        All transactions visible on-chain\n                                    <\/div>\n                                <\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-red-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-red-500 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        Private database, limited transparency\n                                    <\/div>\n                                <\/td>\n                            <\/tr>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">Access Control<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-green-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-green-600 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        Permissionless, anyone can access\n                                    <\/div>\n                                <\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-red-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-red-500 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        Can restrict users\/regions\n                                    <\/div>\n                                <\/td>\n                            <\/tr>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">Asset Freezing<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-green-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-green-600 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        Impossible to freeze user assets\n                                    <\/div>\n                                <\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-red-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-red-500 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        Exchange can freeze funds\n                                    <\/div>\n                                <\/td>\n                            <\/tr>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">Trading Pairs<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3\">Limited but growing<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3\">Extensive selection<\/td>\n                            <\/tr>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">Liquidity<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3\">Can be lower for some pairs<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3\">Generally higher<\/td>\n                            <\/tr>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">Fees<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3\">Protocol fee + network gas fee<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3\">Trading, withdrawal, deposit fees<\/td>\n                            <\/tr>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">Smart Contract Risk<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-red-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-red-500 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        Present (mitigated by audits)\n                                    <\/div>\n                                <\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-green-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-green-600 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        None\n                                    <\/div>\n                                <\/td>\n                            <\/tr>\n                            <tr>\n                                <td class=\"border border-gray-200 px-4 py-3 font-medium\">Counterparty Risk<\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-green-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-green-600 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        None\n                                    <\/div>\n                                <\/td>\n                                <td class=\"border border-gray-200 px-4 py-3 bg-red-50\">\n                                    <div class=\"flex items-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-red-500 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" \/>\n                                        <\/svg>\n                                        Trust in exchange required\n                                    <\/div>\n                                <\/td>\n                            <\/tr>\n                        <\/tbody>\n                    <\/table>\n                <\/div>\n            `;\n            \n            modalContent.innerHTML = tableContent;\n            modalContent.appendChild(closeButton);\n            modal.appendChild(modalContent);\n            document.body.appendChild(modal);\n            \n            \/\/ Close modal when clicking outside\n            modal.addEventListener('click', (e) => {\n                if (e.target === modal) {\n                    document.body.removeChild(modal);\n                }\n            });\n        });\n    }\n    \n    \/\/ Connect wallet button functionality\n    const connectWalletButtons = document.querySelectorAll('.connect-wallet-btn');\n    \n    connectWalletButtons.forEach(button => {\n        button.addEventListener('click', () => {\n            \/\/ Create a modal for wallet connection\n            const modal = document.createElement('div');\n            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';\n            \n            const modalContent = document.createElement('div');\n            modalContent.className = 'bg-white rounded-xl p-6 max-w-md w-full';\n            \n            \/\/ Close button\n            const closeButton = document.createElement('button');\n            closeButton.className = 'absolute top-4 right-4 text-gray-500 hover:text-gray-700';\n            closeButton.innerHTML = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n            <\/svg>`;\n            \n            closeButton.addEventListener('click', () => {\n                document.body.removeChild(modal);\n            });\n            \n            \/\/ Wallet options content\n            const walletContent = `\n                <div class=\"text-center mb-6\">\n                    <h3 class=\"text-2xl font-bold mb-2\">Connect Your Wallet<\/h3>\n                    <p class=\"text-gray-600\">Choose your preferred wallet to connect to NexusSwap<\/p>\n                <\/div>\n                \n                <div class=\"space-y-3\">\n                    <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors\">\n                        <div class=\"w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center mr-3\">\n                            <span class=\"text-orange-600 font-bold\">M<\/span>\n                        <\/div>\n                        <span class=\"font-medium\">MetaMask<\/span>\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                        <\/svg>\n                    <\/button>\n                    \n                    <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors\">\n                        <div class=\"w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3\">\n                            <span class=\"text-blue-600 font-bold\">WC<\/span>\n                        <\/div>\n                        <span class=\"font-medium\">WalletConnect<\/span>\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                        <\/svg>\n                    <\/button>\n                    \n                    <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors\">\n                        <div class=\"w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3\">\n                            <span class=\"text-purple-600 font-bold\">CB<\/span>\n                        <\/div>\n                        <span class=\"font-medium\">Coinbase Wallet<\/span>\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                        <\/svg>\n                    <\/button>\n                    \n                    <button class=\"wallet-option w-full flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors\">\n                        <div class=\"w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3\">\n                            <span class=\"text-green-600 font-bold\">L<\/span>\n                        <\/div>\n                        <span class=\"font-medium\">Ledger<\/span>\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 ml-auto text-gray-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" \/>\n                        <\/svg>\n                    <\/button>\n                <\/div>\n                \n                <div class=\"mt-6 text-center text-sm text-gray-500\">\n                    New to crypto wallets? <a href=\"#\" class=\"text-indigo-600 hover:underline\">Learn more<\/a>\n                <\/div>\n            `;\n            \n            modalContent.innerHTML = walletContent;\n            modalContent.appendChild(closeButton);\n            modal.appendChild(modalContent);\n            document.body.appendChild(modal);\n            \n            \/\/ Close modal when clicking outside\n            modal.addEventListener('click', (e) => {\n                if (e.target === modal) {\n                    document.body.removeChild(modal);\n                }\n            });\n            \n            \/\/ Wallet option click handlers\n            const walletOptions = modalContent.querySelectorAll('.wallet-option');\n            \n            walletOptions.forEach(option => {\n                option.addEventListener('click', () => {\n                    \/\/ Show connecting state\n                    const walletName = option.querySelector('span').textContent;\n                    modalContent.innerHTML = `\n                        <div class=\"text-center py-8\">\n                            <div class=\"inline-block w-16 h-16 rounded-full border-4 border-indigo-600 border-t-transparent animate-spin mb-4\"><\/div>\n                            <h3 class=\"text-xl font-bold mb-2\">Connecting to ${walletName}...<\/h3>\n                            <p class=\"text-gray-600\">Please check your wallet for connection request<\/p>\n                        <\/div>\n                    `;\n                    \n                    \/\/ Simulate connection after delay\n                    setTimeout(() => {\n                        \/\/ Update button text to show connected state\n                        connectWalletButtons.forEach(btn => {\n                            btn.textContent = 'Connected';\n                            btn.classList.add('bg-green-600');\n                            btn.classList.remove('bg-gradient-to-r', 'from-indigo-500', 'to-purple-600');\n                        });\n                        \n                        \/\/ Close modal\n                        document.body.removeChild(modal);\n                    }, 2000);\n                });\n            });\n        });\n    });\n    \n    \/\/ Counters animation for metrics\n    function animateCounter(element, targetValue, duration = 2000) {\n        const start = 0;\n        const increment = targetValue \/ (duration \/ 16); \/\/ 60fps\n        let current = start;\n        \n        const timer = setInterval(() => {\n            current += increment;\n            if (current >= targetValue) {\n                clearInterval(timer);\n                element.textContent = '$' + targetValue;\n            } else {\n                element.textContent = '$' + Math.floor(current);\n            }\n        }, 16);\n    }\n    \n    const numbersObserver = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                \/\/ Animate TVL counter\n                if (entry.target.classList.contains('tvl-counter')) {\n                    const targetValue = parseInt(entry.target.getAttribute('data-value'));\n                    animateCounter(entry.target, targetValue);\n                    \/\/ Animate progress bar\n                    document.querySelector('.tvl-progress').style.width = '75%';\n                }\n                \n                \/\/ Animate volume counter\n                if (entry.target.classList.contains('volume-counter')) {\n                    const targetValue = parseInt(entry.target.getAttribute('data-value'));\n                    animateCounter(entry.target, targetValue);\n                }\n                \n                \/\/ Animate users counter\n                if (entry.target.classList.contains('users-counter')) {\n                    const targetValue = parseInt(entry.target.getAttribute('data-value'));\n                    const start = 0;\n                    const increment = targetValue \/ (2000 \/ 16); \/\/ 60fps\n                    let current = start;\n                    \n                    const timer = setInterval(() => {\n                        current += increment;\n                        if (current >= targetValue) {\n                            clearInterval(timer);\n                            entry.target.textContent = targetValue;\n                        } else {\n                            entry.target.textContent = Math.floor(current);\n                        }\n                    }, 16);\n                }\n                \n                \/\/ Stop observing after animation\n                numbersObserver.unobserve(entry.target);\n            }\n        });\n    }, { threshold: 0.5 });\n    \n    \/\/ Observe counter elements\n    document.querySelectorAll('.tvl-counter, .volume-counter, .users-counter').forEach(counter => {\n        numbersObserver.observe(counter);\n    });\n});\n\n    <\/script>\n  \n  \n<\/head>\n\n<style>\n    \/* Base styles *\/\nbody {\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n    scroll-behavior: smooth;\n}\n\n\/* Tooltip styles *\/\n.tooltip {\n    position: relative;\n    border-bottom: 1px dashed #6366f1;\n    cursor: help;\n}\n\n\/* Animation utilities *\/\n.fade-in {\n    animation: fadeIn 0.8s ease forwards;\n}\n\n.slide-up {\n    animation: slideUp 0.8s ease forwards;\n}\n\n.slide-in-right {\n    animation: slideInRight 0.8s ease forwards;\n}\n\n.slide-in-left {\n    animation: slideInLeft 0.8s ease forwards;\n}\n\n.scale-in {\n    animation: scaleIn 0.6s ease forwards;\n}\n\n.pulse {\n    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n\/* AMM Animation *\/\n.amm-inner-circle {\n    animation: rotate 20s linear infinite;\n}\n\n.token-a, .token-b {\n    animation: pulse-slow 3s infinite;\n}\n\n@keyframes pulse-slow {\n    0%, 100% {\n        transform: translateY(-50%) translateX(-50%) scale(1);\n    }\n    50% {\n        transform: translateY(-50%) translateX(-50%) scale(1.05);\n    }\n}\n\n\/* FAQ Accordion *\/\n.faq-answer {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease, padding 0.3s ease;\n}\n\n.faq-answer.active {\n    max-height: 500px;\n    padding: 1rem;\n}\n\n.faq-question svg {\n    transition: transform 0.3s ease;\n}\n\n.faq-question.active svg {\n    transform: rotate(180deg);\n}\n\n\/* Compare Table Styles *\/\n.compare-table-container {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.5s ease;\n}\n\n.compare-table-container.show {\n    max-height: 500px;\n}\n\n\/* Animation Keyframes *\/\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes slideUp {\n    from {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@keyframes slideInRight {\n    from {\n        opacity: 0;\n        transform: translateX(30px);\n    }\n    to {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n@keyframes slideInLeft {\n    from {\n        opacity: 0;\n        transform: translateX(-30px);\n    }\n    to {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n@keyframes scaleIn {\n    from {\n        opacity: 0;\n        transform: scale(0.95);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n@keyframes pulse {\n    0%, 100% {\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.8;\n    }\n}\n\n@keyframes rotate {\n    from {\n        transform: rotate(0deg);\n    }\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n\/* Feature Demo Step Indicators *\/\n.step-indicator {\n    transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n.step-line {\n    position: relative;\n    transition: background-color 0.3s ease;\n}\n\n.step-line.active {\n    background-color: #6366f1;\n}\n\n\/* Testimonial Slider *\/\n.testimonial-track {\n    transition: transform 0.5s ease;\n}\n\n\/* Service Cards *\/\n.service-card {\n    transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n\/* Value Proposition Cards *\/\n.benefit-card {\n    transition: opacity 0.5s ease, transform 0.3s ease;\n}\n\n\/* Why Choose Us Points *\/\n.why-choose-point {\n    transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n\/* Metrics Cards *\/\n.metrics-card {\n    transition: opacity 0.5s ease;\n}\n\n.tvl-progress, .volume-progress, .users-progress {\n    transition: width 1.5s ease;\n}\n\n\n\n\/* Swap Interface Animation *\/\n.interface-preview {\n    position: relative;\n    overflow: hidden;\n}\n\n.swap-direction-btn {\n    transition: transform 0.3s ease, background-color 0.3s ease;\n}\n\n.swap-direction-btn:hover {\n    transform: rotate(180deg);\n}\n\n\/* Risk Card Animations *\/\n.risk-card {\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n\/* CTA Button Animation *\/\n.start-trading-btn {\n    position: relative;\n    overflow: hidden;\n}\n\n.start-trading-btn::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n        90deg,\n        rgba(255, 255, 255, 0) 0%,\n        rgba(255, 255, 255, 0.2) 50%,\n        rgba(255, 255, 255, 0) 100%\n    );\n    transition: left 0.5s ease;\n}\n\n.start-trading-btn:hover::after {\n    left: 100%;\n}\n\n\/* Headline Animation *\/\n.headline span {\n    display: inline-block;\n    opacity: 0;\n    transform: translateY(20px);\n    animation: fadeUpIn 0.5s ease forwards;\n}\n\n.headline span:nth-child(1) { animation-delay: 0.1s; }\n.headline span:nth-child(2) { animation-delay: 0.2s; }\n.headline span:nth-child(3) { animation-delay: 0.3s; }\n.headline span:nth-child(4) { animation-delay: 0.4s; }\n.headline span:nth-child(5) { animation-delay: 0.5s; }\n\n@keyframes fadeUpIn {\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\/* Platform Stats Counter *\/\n.platform-stats div {\n    opacity: 0;\n    transform: translateY(20px);\n    animation: statsAppear 0.5s ease forwards;\n}\n\n.platform-stats div:nth-child(1) { animation-delay: 0.1s; }\n.platform-stats div:nth-child(2) { animation-delay: 0.2s; }\n.platform-stats div:nth-child(3) { animation-delay: 0.3s; }\n.platform-stats div:nth-child(4) { animation-delay: 0.4s; }\n\n@keyframes statsAppear {\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\/* Custom Animations for AMM Diagram *\/\n@keyframes tokenFlow {\n    0% {\n        transform: translate(0, 0);\n        opacity: 1;\n    }\n    50% {\n        transform: translate(40px, 0);\n        opacity: 0.7;\n    }\n    100% {\n        transform: translate(80px, 0);\n        opacity: 0;\n    }\n}\n\n.token-flow {\n    animation: tokenFlow 2s ease-in-out infinite;\n}\n\n\/* Animated background *\/\n#blockchain-background {\n    background-size: 400% 400%;\n    animation: gradientAnimation 15s ease infinite;\n}\n\n@keyframes gradientAnimation {\n    0% {\n        background-position: 0% 50%;\n    }\n    50% {\n        background-position: 100% 50%;\n    }\n    100% {\n        background-position: 0% 50%;\n    }\n}\n\n\/* Audit and Partner Logos *\/\n.audit-logos, .partner-logos {\n    transition: opacity 1s ease;\n}\n\n\/* Unique Features Section *\/\n.unique-feature {\n    transition: opacity 0.5s ease, transform 0.3s ease;\n}\n\n<\/style>\n\n<body class=\"bg-gray-50 text-gray-900\">\n  \n      <!-- Feature Demo -->\n      <section id=\"demo\" class=\"py-16 bg-gray-50\">\n        <div class=\"container mx-auto px-4\">\n            <div class=\"max-w-3xl mx-auto text-center mb-12\">\n                <h2 class=\"text-3xl md:text-4xl font-bold mb-4\">TheExchain\u306e\u52d5\u304d\u3092\u898b\u308b<\/h2>\n                <p class=\"text-xl text-gray-600\">\u5206\u6563\u578b\u53d6\u5f15\u306e\u30b7\u30f3\u30d7\u30eb\u3055\u3068\u30d1\u30ef\u30fc\u3092\u4f53\u9a13\u3057\u3088\u3046<\/p>\n            <\/div>\n            <div class=\"demo-steps flex justify-between max-w-3xl mx-auto mt-8\">\n                <a class=\"demo-step active flex flex-col items-center\" data-step=\"1\">\n                    <div class=\"w-8 h-8 rounded-full bg-indigo-600 text-white flex items-center justify-center mb-2 step-indicator\">1<\/div>\n                    <span class=\"text-sm font-medium\">\u30b3\u30cd\u30af\u30c8\u30a6\u30a9\u30ec\u30c3\u30c8<\/span>\n                <\/a>\n                <div class=\"step-line flex-1 h-0.5 bg-gray-300 self-center mx-2\"><\/div>\n                <a class=\"demo-step flex flex-col items-center\" data-step=\"2\">\n                    <div class=\"w-8 h-8 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center mb-2 step-indicator\">2<\/div>\n                    <span class=\"text-sm font-medium\">\u30c8\u30fc\u30af\u30f3\u3092\u9078\u629e<\/span>\n                <\/a>\n                <div class=\"step-line flex-1 h-0.5 bg-gray-300 self-center mx-2\"><\/div>\n                <a class=\"demo-step flex flex-col items-center\" data-step=\"3\">\n                    <div class=\"w-8 h-8 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center mb-2 step-indicator\">3<\/div>\n                    <span class=\"text-sm font-medium\">\u30ec\u30d3\u30e5\u30fc\uff06\u30b9\u30ef\u30c3\u30d7<\/span>\n                <\/a>\n                <div class=\"step-line flex-1 h-0.5 bg-gray-300 self-center mx-2\"><\/div>\n                <a class=\"demo-step flex flex-col items-center\" data-step=\"4\">\n                    <div class=\"w-8 h-8 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center mb-2 step-indicator\">4<\/div>\n                    <span class=\"text-sm font-medium\">\u78ba\u8a8d<\/span>\n                <\/a>\n            <\/div>\n            <div class=\"demo-interface\">\n                <div class=\"max-w-4xl mx-auto\">\n                    <div class=\"bg-white rounded-2xl shadow-lg overflow-hidden demo-container\">\n                        <div class=\"border-b border-gray-200 p-4 flex justify-between items-center bg-gray-50\">\n                            <div class=\"flex items-center\">\n                                <div class=\"w-3 h-3 rounded-full bg-red-500 mr-2\"><\/div>\n                                <div class=\"w-3 h-3 rounded-full bg-yellow-500 mr-2\"><\/div>\n                                <div class=\"w-3 h-3 rounded-full bg-green-500\"><\/div>\n                            <\/div>\n                            <div class=\"font-medium\">\u30a8\u30af\u30b9\u30c1\u30a7\u30fc\u30f3\u30fb\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9<\/div>\n                            <div class=\"flex items-center\">\n                                <div class=\"h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"p-6 demo-feature-content\">\n                            <!-- Feature demo content will be inserted here by JavaScript -->\n                        <\/div>\n                    <\/div>\n                    \n                   \n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n\n\n    <!-- Value Proposition -->\n    <section id=\"value-proposition\" class=\"py-16 bg-white\">\n        <div class=\"container mx-auto px-4\">\n            <div class=\"max-w-3xl mx-auto text-center mb-12\">\n                <h2 class=\"text-3xl md:text-4xl font-bold mb-4\">\u5206\u6563\u578b\u53d6\u5f15\u304c\u91cd\u8981\u306a\u7406\u7531<\/h2>\n                <p class=\"text-xl text-gray-600\">\u91d1\u878d\u30b7\u30b9\u30c6\u30e0\u3068\u306e\u95a2\u308f\u308a\u65b9\u306e\u6839\u672c\u7684\u306a\u5909\u5316\u3092\u4f53\u9a13\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n            <\/div>\n            \n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 value-props\">\n                <div class=\"benefit-card opacity-0 bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"icon-wrapper w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"text-xl font-semibold mb-2\">\u81ea\u5df1\u62d8\u675f<\/h3>\n                    <p class=\"text-gray-600\">\u9375\u3092\u7ba1\u7406\u3057\u3001\u8cc7\u91d1\u3092\u7ba1\u7406\u3059\u308b\u306e\u306f\u3042\u306a\u305f\u3067\u3059\u3002\u7b2c\u4e09\u8005\u304c\u3042\u306a\u305f\u306e\u8cc7\u7523\u3092\u51cd\u7d50\u3057\u305f\u308a\u5dee\u3057\u62bc\u3055\u3048\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n                <\/div>\n                \n                <div class=\"benefit-card opacity-0 bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"icon-wrapper w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"text-xl font-semibold mb-2\">\u30d1\u30fc\u30df\u30c3\u30b7\u30e7\u30f3\u30ec\u30b9\u30fb\u30a2\u30af\u30bb\u30b9<\/h3>\n                    <p class=\"text-gray-600\">\u3044\u3064\u3067\u3082\u3001\u3069\u3053\u3067\u3082\u3001\u5236\u9650\u3084KYC\u306e\u969c\u58c1\u306a\u3057\u306b\u53d6\u5f15\u3002\u3059\u3079\u3066\u306e\u4eba\u306b\u958b\u304b\u308c\u305f\u91d1\u878d\u3092\u3002<\/p>\n                <\/div>\n                \n                <div class=\"benefit-card opacity-0 bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"icon-wrapper w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"text-xl font-semibold mb-2\">\u900f\u660e\u6027<\/h3>\n                    <p class=\"text-gray-600\">\u3059\u3079\u3066\u306e\u53d6\u5f15\u306f\u30aa\u30f3\u30c1\u30a7\u30fc\u30f3\u3067\u3042\u308a\u3001\u76e3\u67fb\u53ef\u80fd\u3067\u691c\u8a3c\u53ef\u80fd\u3067\u3042\u308b\u3002\u96a0\u3055\u308c\u305f\u64cd\u4f5c\u3084\u30d6\u30e9\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n                <\/div>\n                \n                <div class=\"benefit-card opacity-0 bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"icon-wrapper w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"text-xl font-semibold mb-2\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3<\/h3>\n                    <p class=\"text-gray-600\">\u30b9\u30de\u30fc\u30c8\u30fb\u30b3\u30f3\u30c8\u30e9\u30af\u30c8\u4e3b\u5c0e\u3067\u30ab\u30a6\u30f3\u30bf\u30fc\u30d1\u30fc\u30c6\u30a3\u30fb\u30ea\u30b9\u30af\u3092\u8efd\u6e1b\u3002\u304a\u5ba2\u69d8\u306e\u8cc7\u91d1\u306f\u4e2d\u592e\u96c6\u6a29\u7684\u306a\u56e3\u4f53\u306b\u4fdd\u6709\u3055\u308c\u308b\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n                <\/div>\n            <\/div>\n            \n           \n        <\/div>\n    <\/section>\n\n    <!-- About DEX -->\n    <section id=\"about\" class=\"py-16 bg-gray-50 relative overflow-hidden\">\n        <div class=\"container mx-auto px-4\">\n            <div class=\"max-w-3xl mx-auto text-center mb-12\">\n                <h2 class=\"text-3xl md:text-4xl font-bold mb-4\">\u30a8\u30af\u30b9\u30c1\u30a7\u30fc\u30f3\u3092\u7406\u89e3\u3059\u308b<\/h2>\n                <p class=\"text-xl text-gray-600\">\u91d1\u878d\u306e\u672a\u6765\u306e\u305f\u3081\u306b\u69cb\u7bc9\u3055\u308c\u305f\u5206\u6563\u578b\u53d6\u5f15\u6240<\/p>\n            <\/div>\n            \n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\n                <div class=\"about-text\">\n                    <h3 class=\"text-2xl font-bold mb-4\">\u5206\u6563\u578b\u53d6\u5f15\u6240\u3068\u306f\u4f55\u304b\uff1f<\/h3>\n                    <p class=\"text-gray-700 mb-4\">\n                        \u304a\u5ba2\u69d8\u306e\u8cc7\u91d1\u3092\u9810\u304b\u308b\u4ef2\u4ecb\u5f79\u3068\u3057\u3066\u6a5f\u80fd\u3059\u308b\u5f93\u6765\u306e\u53d6\u5f15\u6240\u3068\u306f\u7570\u306a\u308a\u307e\u3059\u3001\n                        TheExchain\u306f\u30d6\u30ed\u30c3\u30af\u30c1\u30a7\u30fc\u30f3\u4e0a\u3067\u76f4\u63a5 <span class=\"tooltip\" data-tooltip=\"Smart contracts are self-executing programs that run on the blockchain\">\u30b9\u30de\u30fc\u30c8\u30b3\u30f3\u30c8\u30e9\u30af\u30c8<\/span>.\n                        \u3064\u307e\u308a\u3001\u53d6\u5f15\u306e\u77ac\u9593\u307e\u3067\u3001\u5e38\u306b\u8cc7\u7523\u3092\u7ba1\u7406\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u306e\u3067\u3059\u3002\n                    <\/p>\n                    <p class=\"text-gray-700 mb-6\">\n                        \u79c1\u305f\u3061\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u4ee5\u4e0b\u3092\u6d3b\u7528\u3057\u3066\u3044\u307e\u3059\u3002 <span class=\"tooltip\" data-tooltip=\"Automated Market Makers use liquidity pools and mathematical formulas to determine prices\">\u30aa\u30fc\u30c8\u30e1\u30fc\u30c6\u30c3\u30c9\u30fb\u30de\u30fc\u30b1\u30c3\u30c8\u30fb\u30e1\u30fc\u30ab\u30fc(AMM)<\/span>\n                        \u5f93\u6765\u306e\u30aa\u30fc\u30c0\u30fc\u30d6\u30c3\u30af\u3092\u5fc5\u8981\u3068\u3057\u306a\u3044\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u53d6\u5f15\u4f53\u9a13\u3092\u63d0\u4f9b\u3059\u308b\u3001\n                        \u3059\u3079\u3066\u306e\u53c2\u52a0\u8005\u306b\u77ac\u6642\u306e\u6d41\u52d5\u6027\u3068\u516c\u6b63\u306a\u4fa1\u683c\u8a2d\u5b9a\u3092\u53ef\u80fd\u306b\u3057\u307e\u3059\u3002\n                    <\/p>\n                    <div class=\"flex items-center space-x-4\">\n                        <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-green-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" \/>\n                            <\/svg>\n                        <\/div>\n                        <p class=\"font-medium\">\u30a2\u30ab\u30a6\u30f3\u30c8\u767b\u9332\u4e0d\u8981<\/p>\n                    <\/div>\n                    <div class=\"flex items-center space-x-4 mt-3\">\n                        <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-green-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" \/>\n                            <\/svg>\n                        <\/div>\n                        <p class=\"font-medium\">\u540c\u696d\u8005\u9593\u76f4\u63a5\u53d6\u5f15<\/p>\n                    <\/div>\n                    <div class=\"flex items-center space-x-4 mt-3\">\n                        <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-green-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" \/>\n                            <\/svg>\n                        <\/div>\n                        <p class=\"font-medium\">\u3059\u3079\u3066\u306e\u696d\u52d9\u306e\u5b8c\u5168\u306a\u900f\u660e\u6027<\/p>\n                    <\/div>\n                 \n                <\/div>\n                \n                <div class=\"amm-diagram relative\">\n                    <div class=\"bg-white rounded-2xl shadow-lg p-6 transform hover:scale-105 transition-transform duration-500\">\n                        <h3 class=\"text-xl font-bold text-center mb-6\">\u81ea\u52d5\u30de\u30fc\u30b1\u30c3\u30c8\u30fb\u30e1\u30fc\u30ab\u30fc\u306e\u4ed5\u7d44\u307f<\/h3>\n                        <div id=\"amm-animation\" class=\"w-full h-64 relative\">\n                            <!-- AMM animation will be inserted here by JS -->\n                            <div class=\"absolute inset-0 flex items-center justify-center\">\n                                <div class=\"w-40 h-40 rounded-full border-4 border-indigo-200 flex items-center justify-center\">\n                                    <div class=\"w-32 h-32 rounded-full border-4 border-purple-200 flex items-center justify-center amm-inner-circle\">\n                                        <div class=\"text-center\">\n                                            <div class=\"font-bold text-indigo-600\">\u6d41\u52d5\u6027<\/div>\n                                            <div class=\"font-bold text-purple-600\">\u30d7\u30fc\u30eb<\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                \n                                <div class=\"token-a absolute top-4 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 bg-indigo-500 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold shadow-lg\">\n                                    \u6771\u5317\u5927\u5b66\n                                <\/div>\n                                \n                                <div class=\"token-b absolute bottom-4 left-1\/2 transform -translate-x-1\/2 translate-y-1\/2 bg-purple-500 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold shadow-lg\">\n                                    \u7c73\u30c9\u30eb\u30bb\u30f3\u30bf\u30fc\n                                <\/div>\n                                \n                                <div class=\"user-a absolute left-0 top-1\/2 transform -translate-y-1\/2\">\n                                    <div class=\"w-16 h-16 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-gray-700\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" \/>\n                                        <\/svg>\n                                    <\/div>\n                                <\/div>\n                                \n                                <div class=\"user-b absolute right-0 top-1\/2 transform -translate-y-1\/2\">\n                                    <div class=\"w-16 h-16 rounded-full bg-gray-100 border border-gray-200 flex items-center justify-center\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-gray-700\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" \/>\n                                        <\/svg>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"flex justify-between mt-6\">\n                            <div class=\"text-center\">\n                                <div class=\"text-sm text-gray-500\">\u4fa1\u683c\u30d5\u30a9\u30fc\u30df\u30e5\u30e9<\/div>\n                                <div class=\"font-mono text-sm bg-gray-100 rounded px-2 py-1 mt-1\">x * y = k<\/div>\n                            <\/div>\n                            <div class=\"text-center\">\n                                <div class=\"text-sm text-gray-500\">\u6d41\u52d5\u6bd4\u7387<\/div>\n                                <div class=\"font-mono text-sm bg-gray-100 rounded px-2 py-1 mt-1\">1\u30a8\u30b9\uff1d1,800\u7c73\u30c9\u30eb<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Services -->\n    <section id=\"services\" class=\"py-16 bg-white\">\n        <div class=\"container mx-auto px-4\">\n            <div class=\"max-w-3xl mx-auto text-center mb-12\">\n                <h2 class=\"text-3xl md:text-4xl font-bold mb-4\">\u30b5\u30fc\u30d3\u30b9<\/h2>\n                <p class=\"text-xl text-gray-600\">\u5206\u6563\u578b\u91d1\u878d\u30c4\u30fc\u30eb\u306e\u5168\u88fd\u54c1\u3092\u898b\u308b<\/p>\n            <\/div>\n            \n            <div class=\"service-cards grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n                <div class=\"service-card opacity-0 bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"h-3 bg-gradient-to-r from-indigo-500 to-purple-600\"><\/div>\n                    <div class=\"p-6\">\n                        <div class=\"w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4\" \/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"text-xl font-bold mb-2\"> \u6d41\u52d5\u6027\u306e\u9ad8\u3044\u30b9\u30dd\u30c3\u30c8\u53d6\u5f15<\/h3>\n                        <p class=\"text-gray-600 mb-4\">\n                            \u30a2\u30f3\u30c1MEV\u30e1\u30ab\u30cb\u30ba\u30e0\u306b\u3088\u308a\u6307\u5024\/\u6210\u884c\u6ce8\u6587\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u5805\u7262\u306a\u6ce8\u6587\u30de\u30c3\u30c1\u30f3\u30b0\u30a8\u30f3\u30b8\u30f3\u3002\u5206\u6563\u578b\u6d41\u52d5\u6027\u30d7\u30fc\u30eb\u3068\u30b7\u30fc\u30e0\u30ec\u30b9\u306b\u7d71\u5408\u3055\u308c\u3001\u4e3b\u8981\u306a\u6697\u53f7\u30da\u30a2\u3067\u30b9\u30ea\u30c3\u30da\u30fc\u30b8\u306e\u5c11\u306a\u3044\u53d6\u5f15\u304c\u53ef\u80fd\u3002\n\n\n                        <\/p>\n                      \n                    <\/div>\n                <\/div>\n                \n                <div class=\"service-card opacity-0 bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"h-3 bg-gradient-to-r from-indigo-500 to-purple-600\"><\/div>\n                    <div class=\"p-6\">\n                        <div class=\"w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" \/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\u30e2\u30b8\u30e5\u30fc\u30eb\u5f0f\u30b9\u30de\u30fc\u30c8\u30b3\u30f3\u30c8\u30e9\u30af\u30c8\u30fb\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3<\/h3>\n                        <p class=\"text-gray-600 mb-4\">\n                            \u30b9\u30ef\u30c3\u30d7\u3001\u30ec\u30f3\u30c7\u30a3\u30f3\u30b0\u3001\u30c7\u30ea\u30d0\u30c6\u30a3\u30d6\u7528\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u306aDeFi\u30b3\u30f3\u30c8\u30e9\u30af\u30c8\u3092\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u7b2c\u4e00\u306e\u8a2d\u8a08\u3067\u69cb\u7bc9\u3002\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u53ef\u80fd\u306a\u30ed\u30b8\u30c3\u30af\u3067\u3001EVM\u4e92\u63db\u30c1\u30a7\u30fc\u30f3\u3078\u306e\u30d1\u30fc\u30df\u30c3\u30b7\u30e7\u30f3\u30ec\u30b9\u5c55\u958b\u3092\u30b5\u30dd\u30fc\u30c8\u3002\n                        <\/p>\n                     \n                  \n                    <\/div>\n                <\/div>\n                \n                <div class=\"service-card opacity-0 bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"h-3 bg-gradient-to-r from-indigo-500 to-purple-600\"><\/div>\n                    <div class=\"p-6\">\n                        <div class=\"w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\u67d4\u8edf\u306a\u30ec\u30d0\u30ec\u30c3\u30b8\u53d6\u5f15<\/h3>\n                        <p class=\"text-gray-600 mb-4\">\n                            \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u30ea\u30b9\u30af\u7ba1\u7406\u3092\u5099\u3048\u305f\u5206\u96e2\u8a3c\u62e0\u91d1\u304a\u3088\u3073\u30af\u30ed\u30b9\u8a3c\u62e0\u91d1\u30b7\u30b9\u30c6\u30e0\u3002\u9023\u9396\u7684\u306a\u6e05\u7b97\u304b\u3089\u30c8\u30ec\u30fc\u30c0\u30fc\u3092\u4fdd\u8b77\u3057\u306a\u304c\u3089\u3001\u7af6\u4e89\u529b\u306e\u3042\u308b\u30ec\u30d0\u30ec\u30c3\u30b8\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3002\n                        <\/p>\n                     \n                  \n                    <\/div>\n                <\/div>\n                \n                <div class=\"service-card opacity-0 bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"h-3 bg-gradient-to-r from-indigo-500 to-purple-600\"><\/div>\n                    <div class=\"p-6\">\n                        <div class=\"w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\u5408\u6210\u8cc7\u7523\u5e02\u5834<\/h3>\n                        <p class=\"text-gray-600 mb-4\">\n                            \u30c8\u30fc\u30af\u30f3\u5316\u3055\u308c\u305f\u4f1d\u7d71\u7684\u8cc7\u7523\uff08ETF\u3001\u30b3\u30e2\u30c7\u30a3\u30c6\u30a3\uff09\u3092\u81ea\u52d5\u30ea\u30d0\u30e9\u30f3\u30b9\u3002\u30e6\u30fc\u30b6\u30fc\u306f\u3001DeFi\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3092\u96e2\u308c\u308b\u3053\u3068\u306a\u304f\u3001\u5206\u6563\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u3078\u306e\u30a8\u30af\u30b9\u30dd\u30fc\u30b8\u30e3\u30fc\u3092\u5f97\u308b\u3002\n                        <\/p>\n                       \n                      \n                    <\/div>\n                <\/div>\n                \n                <div class=\"service-card opacity-0 bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"h-3 bg-gradient-to-r from-indigo-500 to-purple-600\"><\/div>\n                    <div class=\"p-6\">\n                        <div class=\"w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9CEX-DEX\u6d41\u52d5\u6027<\/h3>\n                        <p class=\"text-gray-600 mb-4\">\n                            \u96c6\u4e2d\u578b\u3068\u5206\u6563\u578b\u306e\u30aa\u30fc\u30c0\u30fc\u30d6\u30c3\u30af\u3092\u96c6\u7d04\u3057\u3001\u6700\u9069\u306a\u4fa1\u683c\u57f7\u884c\u3092\u5b9f\u73fe\u3002CEX\u306e\u30b9\u30d4\u30fc\u30c9\u3068DEX\u306e\u30bb\u30eb\u30d5\u30fb\u30ab\u30b9\u30c8\u30c7\u30a3\u306e\u5229\u70b9\u3092\u7d44\u307f\u5408\u308f\u305b\u307e\u3059\u3002\n                        <\/p>\n                      \n                    <\/div>\n                <\/div>\n                \n                <div class=\"service-card opacity-0 bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1 border border-gray-100\">\n                    <div class=\"h-3 bg-gradient-to-r from-indigo-500 to-purple-600\"><\/div>\n                    <div class=\"p-6\">\n                        <div class=\"w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\u6469\u64e6\u306e\u306a\u3044\u30d5\u30a3\u30a2\u30c3\u30c8\u7d71\u5408<\/h3>\n                        <p class=\"text-gray-600 mb-4\">\n                            \u4fe1\u983c\u3067\u304d\u308b\u6c7a\u6e08\u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u306b\u3088\u308b\u30b0\u30ed\u30fc\u30d0\u30eb\u901a\u8ca8\u306e\u30aa\u30f3\u30e9\u30f3\u30d7\u30b5\u30dd\u30fc\u30c8\u3002\u30e6\u30fc\u30b6\u30fc\u306f\u3001KYC\u306e\u6469\u64e6\u3092\u6700\u5c0f\u9650\u306b\u6291\u3048\u306a\u304c\u3089\u3001\u73fe\u5730\u306e\u652f\u6255\u3044\u65b9\u6cd5\u3092\u4ecb\u3057\u3066\u30a6\u30a9\u30ec\u30c3\u30c8\u306b\u76f4\u63a5\u8cc7\u91d1\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\n                        <\/p>\n                        <div class=\"mt-4 flex flex-wrap gap-2\">\n                            <div class=\"px-3 py-1 rounded-full bg-gray-100 text-xs font-medium text-gray-600\">\u7c73\u30c9\u30eb<\/div>\n                            <div class=\"px-3 py-1 rounded-full bg-gray-100 text-xs font-medium text-gray-600\">\u9999\u6e2f\u30c9\u30eb<\/div>\n                            <div class=\"px-3 py-1 rounded-full bg-gray-100 text-xs font-medium text-gray-600\">AED<\/div>\n                            <div class=\"px-3 py-1 rounded-full bg-gray-100 text-xs font-medium text-gray-600\">SGD<\/div>\n                        <\/div>\n                   \n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Why Choose Us -->\n    <section id=\"why-choose-us\" class=\"py-16 bg-gray-50\">\n        <div class=\"container mx-auto px-4\">\n            <div class=\"max-w-3xl mx-auto text-center mb-12\">\n                <h2 class=\"text-3xl md:text-4xl font-bold mb-4\">TheExchain\u3092\u9078\u3076\u7406\u7531<\/h2>\n                <p class=\"text-xl text-gray-600\">\u79c1\u305f\u3061\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u3001\u6700\u5148\u7aef\u306e\u6a5f\u80fd\u3068\u30e6\u30fc\u30b6\u30fc\u7b2c\u4e00\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u3067\u969b\u7acb\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n            <\/div>\n            \n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20\">\n                <div class=\"order-2 md:order-1\">\n                    <div class=\"why-choose-point opacity-0 mb-8 transform translate-x-4\">\n                        <div class=\"flex\">\n                            <div class=\"flex-shrink-0\">\n                                <div class=\"w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\" \/>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                            <div>\n                                <h3 class=\"text-xl font-bold mb-2\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u76e3\u67fb<\/h3>\n                                <p class=\"text-gray-700\">\n                                    \u5f53\u793e\u306e\u30b9\u30de\u30fc\u30c8\u30b3\u30f3\u30c8\u30e9\u30af\u30c8\u306f\u3001\u4e00\u6d41\u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u4f01\u696d\u306b\u3088\u3063\u3066\u53b3\u683c\u306b\u76e3\u67fb\u3055\u308c\u3066\u3044\u307e\u3059\u3002\n                                    \u304a\u5ba2\u69d8\u306e\u8cc7\u7523\u306e\u5b89\u5168\u3092\u78ba\u4fdd\u3059\u308b\u305f\u3081\u3001\u3042\u3089\u3086\u308b\u30ec\u30d9\u30eb\u3067\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3092\u512a\u5148\u3057\u3066\u3044\u307e\u3059\u3002\n                                <\/p>\n                            \n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"why-choose-point opacity-0 mb-8 transform translate-x-4\">\n                        <div class=\"flex\">\n                            <div class=\"flex-shrink-0\">\n                                <div class=\"w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\" \/>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                            <div>\n                                <h3 class=\"text-xl font-bold mb-2\">\u5b89\u3044\u30ac\u30b9\u6599\u91d1<\/h3>\n                                <p class=\"text-gray-700\">\n                                    \u5f53\u793e\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u3001\u30ec\u30a4\u30e4\u30fc2\u7d71\u5408\u306b\u3088\u308b\u52b9\u7387\u6027\u306e\u6700\u9069\u5316\n                                    \u6700\u9069\u5316\u3055\u308c\u305f\u30c8\u30e9\u30f3\u30b6\u30af\u30b7\u30e7\u30f3\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306b\u3088\u308a\u3001\u30ac\u30b9\u30b3\u30b9\u30c8\u3092\u6700\u5c0f\u9650\u306b\u6291\u3048\u307e\u3059\u3002\n                                <\/p>\n                                <div class=\"mt-3 bg-white rounded-lg p-3 shadow-sm\">\n                                    <div class=\"flex items-center justify-between\">\n                                        <span class=\"text-sm font-medium\">\u5e73\u5747\u30b9\u30ef\u30c3\u30d7\u30fb\u30b3\u30b9\u30c8<\/span>\n                                        <span class=\"text-green-600 font-bold\">$1.24<\/span>\n                                    <\/div>\n                                    <div class=\"mt-1 h-2 w-full bg-gray-200 rounded-full overflow-hidden\">\n                                        <div class=\"h-full bg-green-500 rounded-full\" style=\"width: 32%\"><\/div>\n                                    <\/div>\n                                    <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n                                        <span>\u30a8\u30af\u30b9\u30c1\u30a7\u30fc\u30f3<\/span>\n                                        <span>\u696d\u754c\u5e73\u5747<\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"why-choose-point opacity-0 transform translate-x-4\">\n                        <div class=\"flex\">\n                            <div class=\"flex-shrink-0\">\n                                <div class=\"w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                            <div>\n                                <h3 class=\"text-xl font-bold mb-2\">\u30a4\u30f3\u30b9\u30bf\u30f3\u30c8\u30fb\u30c8\u30e9\u30f3\u30b6\u30af\u30b7\u30e7\u30f3<\/h3>\n                                <p class=\"text-gray-700\">\n                                    \u6700\u9069\u5316\u3055\u308c\u305f\u30d7\u30ed\u30c8\u30b3\u30eb\u3067\u3001\u307b\u307c\u77ac\u6642\u306b\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002\n                                    \u53d6\u5f15\u5b8c\u4e86\u307e\u3067\u306e\u30d6\u30ed\u30c3\u30af\u78ba\u8a8d\u3092\u5f85\u3064\u5fc5\u8981\u306f\u3082\u3046\u3042\u308a\u307e\u305b\u3093\u3002\n                                <\/p>\n                                <div class=\"mt-3 flex items-center space-x-2\">\n                                    <div class=\"flex items-center space-x-1\">\n                                        <div class=\"w-3 h-3 rounded-full bg-green-500\"><\/div>\n                                        <span class=\"text-sm\">\u30b9\u30ef\u30c3\u30d7<\/span>\n                                    <\/div>\n                                    <span class=\"text-sm text-gray-400\">\u2192<\/span>\n                                    <div class=\"flex items-center space-x-1\">\n                                        <div class=\"w-3 h-3 rounded-full bg-indigo-500\"><\/div>\n                                        <span class=\"text-sm\">\u78ba\u8a8d<\/span>\n                                    <\/div>\n                                    <span class=\"text-sm text-gray-400\">\u2192<\/span>\n                                    <div class=\"flex items-center space-x-1\">\n                                        <div class=\"w-3 h-3 rounded-full bg-purple-500\"><\/div>\n                                        <span class=\"text-sm\">\u5b8c\u5168<\/span>\n                                    <\/div>\n                                    <span class=\"text-xs text-gray-500\">~ 3\u79d2<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"order-1 md:order-2\">\n                    <div class=\"bg-white rounded-2xl shadow-lg p-6 interface-preview\">\n                        <div class=\"flex items-center justify-between mb-6\">\n                            <h3 class=\"text-lg font-bold\">\u76f4\u611f\u7684\u306a\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9<\/h3>\n                            <div class=\"flex space-x-1\">\n                                <div class=\"w-3 h-3 rounded-full bg-red-500\"><\/div>\n                                <div class=\"w-3 h-3 rounded-full bg-yellow-500\"><\/div>\n                                <div class=\"w-3 h-3 rounded-full bg-green-500\"><\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"bg-gray-50 rounded-xl p-5 border border-gray-100\">\n                            <div class=\"mb-4\">\n                                <div class=\"flex justify-between mb-2\">\n                                    <span class=\"text-sm font-medium\">\u3042\u306a\u305f\u304c\u652f\u6255\u3046<\/span>\n                                    <span class=\"text-sm text-gray-500\">\u6b8b\u9ad8\uff1a1.45ETH<\/span>\n                                <\/div>\n                                <div class=\"bg-white rounded-lg p-3 border border-gray-200 flex justify-between items-center\">\n                                    <div class=\"flex items-center\">\n                                        <div class=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2\">\n                                            <span class=\"font-bold text-blue-600\">\u039e<\/span>\n                                        <\/div>\n                                        <span class=\"font-medium\">\u6771\u5317\u5927\u5b66<\/span>\n                                    <\/div>\n                                    <input type=\"text\" value=\"0.5\" class=\"text-right w-24 font-medium focus:outline-none\" readonly>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"flex justify-center my-2\">\n                                <span class=\"swap-direction-btn w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition-colors\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-gray-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" \/>\n                                    <\/svg>\n                                <\/span>\n                            <\/div>\n                            \n                            <div class=\"mb-6\">\n                                <div class=\"flex justify-between mb-2\">\n                                    <span class=\"text-sm font-medium\">\u53d7\u3051\u53d6\u308b<\/span>\n                                    <span class=\"text-sm text-gray-500\">\u6b8b\u9ad8542.75 USDC<\/span>\n                                <\/div>\n                                <div class=\"bg-white rounded-lg p-3 border border-gray-200 flex justify-between items-center\">\n                                    <div class=\"flex items-center\">\n                                        <div class=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2\">\n                                            <span class=\"font-bold text-blue-600\">$<\/span>\n                                        <\/div>\n                                        <span class=\"font-medium\">\u7c73\u30c9\u30eb\u30bb\u30f3\u30bf\u30fc<\/span>\n                                    <\/div>\n                                    <div class=\"text-right font-medium\">900.00<\/div>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"bg-gray-100 rounded-lg p-3 mb-4\">\n                                <div class=\"flex justify-between text-sm\">\n                                    <span>\u70ba\u66ff\u30ec\u30fc\u30c8<\/span>\n                                    <span>1\u30a8\u30b9\uff1d1,800\u7c73\u30c9\u30eb<\/span>\n                                <\/div>\n                                <div class=\"flex justify-between text-sm mt-1\">\n                                    <span>\u6599\u91d1 (0.3%)<\/span>\n                                    <span>2.7 USDC<\/span>\n                                <\/div>\n                                <div class=\"flex justify-between text-sm mt-1\">\n                                    <span>\u30b9\u30ea\u30c3\u30da\u30fc\u30b8\u8a31\u5bb9\u5dee<\/span>\n                                    <span>0.5%<\/span>\n                                <\/div>\n                            <\/div>\n                            \n                            <button class=\"w-full py-3 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium shadow-md hover:shadow-lg transition-all\">\n                                \u30b9\u30ef\u30c3\u30d7\u30fb\u30ca\u30a6\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"unique-features grid grid-cols-1 md:grid-cols-3 gap-6\">\n                <div class=\"unique-feature opacity-0 bg-white rounded-xl p-6 shadow-md border border-gray-100 transform hover:scale-105 transition-all\">\n                    <div class=\"w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-7 w-7 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"text-xl font-bold mb-2\">\u975e\u89aa\u6a29\u8005<\/h3>\n                    <p class=\"text-gray-600\">\n                        \u3042\u306a\u305f\u306e\u9375\u3001\u3042\u306a\u305f\u306e\u6697\u53f7\u3002\u5f53\u793e\u306f\u304a\u5ba2\u69d8\u306e\u8cc7\u7523\u3092\u4fdd\u6709\u3059\u308b\u3053\u3068\u306f\u306a\u304f\u3001\u304a\u5ba2\u69d8\u306f\u53d6\u5f15\u30d7\u30ed\u30bb\u30b9\u3092\u901a\u3058\u3066\u5b8c\u5168\u306b\u7ba1\u7406\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\n                    <\/p>\n                <\/div>\n                \n                <div class=\"unique-feature opacity-0 bg-white rounded-xl p-6 shadow-md border border-gray-100 transform hover:scale-105 transition-all\">\n                    <div class=\"w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-7 w-7 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"text-xl font-bold mb-2\">\u30de\u30eb\u30c1\u30c1\u30a7\u30fc\u30f3\u30fb\u30b5\u30dd\u30fc\u30c8<\/h3>\n                    <p class=\"text-gray-600\">\n                        \u7d71\u4e00\u3055\u308c\u305f\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3067\u8907\u6570\u306e\u30d6\u30ed\u30c3\u30af\u30c1\u30a7\u30fc\u30f3\u3067\u53d6\u5f15\u3002\u7570\u306a\u308b\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u306e\u305f\u3081\u306b\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3092\u5207\u308a\u66ff\u3048\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n                    <\/p>\n                <\/div>\n                \n                <div class=\"unique-feature opacity-0 bg-white rounded-xl p-6 shadow-md border border-gray-100 transform hover:scale-105 transition-all\">\n                    <div class=\"w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-4\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-7 w-7 text-indigo-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"text-xl font-bold mb-2\">\u30d5\u30e9\u30c3\u30b7\u30e5\u30b9\u30ef\u30c3\u30d7<\/h3>\n                    <p class=\"text-gray-600\">\n                        \u30d5\u30e9\u30c3\u30b7\u30e5\u30b9\u30ef\u30c3\u30d7\u306e\u3088\u3046\u306a\u5148\u9032\u7684\u306aDeFi\u6a5f\u80fd\u3092\u6d3b\u7528\u3057\u3001\u8cc7\u672c\u52b9\u7387\u3092\u6700\u5927\u5316\u3057\u3001\u88c1\u5b9a\u53d6\u5f15\u306e\u6a5f\u4f1a\u3092\u63a2\u308b\u3002\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Social Proof -->\n    <section id=\"social-proof\" class=\"py-16 bg-white\">\n        <div class=\"container mx-auto px-4\">\n            <div class=\"max-w-3xl mx-auto text-center mb-12\">\n                <h2 class=\"text-3xl md:text-4xl font-bold mb-4\">\u5730\u57df\u793e\u4f1a\u304b\u3089\u306e\u4fe1\u983c<\/h2>\n                <p class=\"text-xl text-gray-600\">TheExchain\u3092\u4fe1\u983c\u3059\u308b\u6570\u5343\u4eba\u306e\u30e6\u30fc\u30b6\u30fc\u306b\u52a0\u308f\u308a\u3001\u5206\u6563\u578b\u53d6\u5f15\u306e\u30cb\u30fc\u30ba\u3092\u6e80\u305f\u3059<\/p>\n            <\/div>\n            \n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 mb-12\">\n                <div class=\"bg-white rounded-xl p-6 shadow-md border border-gray-100 metrics-card opacity-0\">\n                    <h3 class=\"text-lg font-medium text-gray-500 mb-2\">\u30c8\u30fc\u30bf\u30eb\u30fb\u30d0\u30ea\u30e5\u30fc\u30fb\u30ed\u30c3\u30af\uff08TVL\uff09<\/h3>\n                    <div class=\"flex items-baseline\">\n                        <span class=\"text-4xl font-bold text-gray-900 tvl-counter\" data-value=\"127\">$0<\/span>\n                        <span class=\"text-2xl font-bold text-gray-900 ml-1\">\u767e\u4e07\u30c9\u30eb<\/span>\n                    <\/div>\n                    <div class=\"mt-2 h-2 w-full bg-gray-100 rounded-full overflow-hidden\">\n                        <div class=\"tvl-progress h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full\" style=\"width: 0%\"><\/div>\n                    <\/div>\n                    <div class=\"flex justify-between text-sm text-gray-500 mt-1\">\n                        <span>\u5148\u6708$98M<\/span>\n                        <span>+29.6%<\/span>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"bg-white rounded-xl p-6 shadow-md border border-gray-100 metrics-card opacity-0\">\n                    <h3 class=\"text-lg font-medium text-gray-500 mb-2\">24\u6642\u9593\u53d6\u5f15\u9ad8<\/h3>\n                    <div class=\"flex items-baseline\">\n                        <span class=\"text-4xl font-bold text-gray-900 volume-counter\" data-value=\"42\">$0<\/span>\n                        <span class=\"text-2xl font-bold text-gray-900 ml-1\">\u767e\u4e07\u30c9\u30eb<\/span>\n                    <\/div>\n                    <div class=\"mt-4 flex items-center\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-green-500\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fill-rule=\"evenodd\" d=\"M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z\" clip-rule=\"evenodd\" \/>\n                        <\/svg>\n                        <span class=\"ml-1 text-sm font-medium text-green-500\">\u5148\u9031\u6bd4+12.8%<\/span>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"bg-white rounded-xl p-6 shadow-md border border-gray-100 metrics-card opacity-0\">\n                    <h3 class=\"text-lg font-medium text-gray-500 mb-2\">\u30a2\u30af\u30c6\u30a3\u30d6\u30e6\u30fc\u30b6\u30fc<\/h3>\n                    <div class=\"flex items-baseline\">\n                        <span class=\"text-4xl font-bold text-gray-900 users-counter\" data-value=\"28\">0<\/span>\n                        <span class=\"text-2xl font-bold text-gray-900 ml-1\">K+<\/span>\n                    <\/div>\n                    <div class=\"mt-4\">\n                        <div class=\"flex -space-x-2\">\n                            <div class=\"w-8 h-8 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center text-xs font-bold text-blue-600\">\u30b8\u30a7\u30fc\u30c7\u30a3\u30fc<\/div>\n                            <div class=\"w-8 h-8 rounded-full bg-green-100 border-2 border-white flex items-center justify-center text-xs font-bold text-green-600\">MK<\/div>\n                            <div class=\"w-8 h-8 rounded-full bg-yellow-100 border-2 border-white flex items-center justify-center text-xs font-bold text-yellow-600\">AS<\/div>\n                            <div class=\"w-8 h-8 rounded-full bg-red-100 border-2 border-white flex items-center justify-center text-xs font-bold text-red-600\">TW<\/div>\n                            <div class=\"w-8 h-8 rounded-full bg-purple-100 border-2 border-white flex items-center justify-center text-xs font-bold text-purple-600\">BL<\/div>\n                            <div class=\"w-8 h-8 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-xs font-bold text-gray-600\">+23K<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n         \n            \n            <div class=\"testimonials\">\n                <h3 class=\"text-2xl font-bold text-center mb-8\">\u30e6\u30fc\u30b6\u30fc\u306e\u58f0<\/h3>\n                \n                <div class=\"testimonial-slider relative\">\n                    <div class=\"overflow-hidden\">\n                        <div class=\"testimonial-track flex transition-transform duration-500\" style=\"transform: translateX(0);\">\n                            <div class=\"testimonial-slide flex-shrink-0 w-full md:w-1\/2 lg:w-1\/3 px-4\">\n                                <div class=\"bg-white rounded-xl p-6 shadow-md border border-gray-100 h-full\">\n                                    <div class=\"flex items-center mb-4\">\n                                        <div class=\"w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4 text-lg font-bold text-indigo-600\">\n                                            AR\n                                        <\/div>\n                                        <div>\n                                            <h4 class=\"font-bold\">\u30a2\u30ec\u30c3\u30af\u30b9\u30fb\u30ed\u30c9\u30ea\u30b2\u30b9<\/h4>\n                                            <div class=\"flex text-yellow-400\">\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <p class=\"text-gray-600\">\n                                        \u300cTheExchain\u306f\u79c1\u306e\u53d6\u5f15\u306b\u5bfe\u3059\u308b\u8003\u3048\u65b9\u3092\u5b8c\u5168\u306b\u5909\u3048\u3066\u304f\u308c\u307e\u3057\u305f\u3002\u81ea\u5206\u306e\u8cc7\u7523\u306b\u5bfe\u3059\u308b\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3068\u4f7f\u3044\u3084\u3059\u3055\u306f\u3001\u4ed6\u306e\u8ffd\u968f\u3092\u8a31\u3057\u307e\u305b\u3093\u3002\n                                        \u6d41\u52d5\u6027\u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u3068\u3057\u3066\u3082\u3001\u304b\u306a\u308a\u306e\u624b\u6570\u6599\u3092\u5f97\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002\"\n                                    <\/p>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"testimonial-slide flex-shrink-0 w-full md:w-1\/2 lg:w-1\/3 px-4\">\n                                <div class=\"bg-white rounded-xl p-6 shadow-md border border-gray-100 h-full\">\n                                    <div class=\"flex items-center mb-4\">\n                                        <div class=\"w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4 text-lg font-bold text-purple-600\">\n                                            SC\n                                        <\/div>\n                                        <div>\n                                            <h4 class=\"font-bold\">\u30b5\u30e9\u30fb\u30c1\u30a7\u30f3<\/h4>\n                                            <div class=\"flex text-yellow-400\">\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <p class=\"text-gray-600\">\n                                        \"TheExchain\u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u76e3\u67fb\u3068\u900f\u660e\u6027\u306f\u3001\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306e\u5229\u7528\u306b\u81ea\u4fe1\u3092\u4e0e\u3048\u3066\u304f\u308c\u307e\u3059\u3002\n                                        DeFi\u306b\u61d0\u7591\u7684\u3060\u3063\u305f\u79c1\u306b\u3068\u3063\u3066\u3001\u3053\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u305d\u306e\u4fe1\u983c\u6027\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3067\u79c1\u3092\u865c\u306b\u3057\u307e\u3057\u305f\u3002\"\n                                    <\/p>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"testimonial-slide flex-shrink-0 w-full md:w-1\/2 lg:w-1\/3 px-4\">\n                                <div class=\"bg-white rounded-xl p-6 shadow-md border border-gray-100 h-full\">\n                                    <div class=\"flex items-center mb-4\">\n                                        <div class=\"w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4 text-lg font-bold text-green-600\">\n                                            JM\n                                        <\/div>\n                                        <div>\n                                            <h4 class=\"font-bold\">\u30b8\u30a7\u30fc\u30e0\u30ba\u30fb\u30df\u30e9\u30fc<\/h4>\n                                            <div class=\"flex text-yellow-400\">\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewbox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n                                                <\/svg>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <p class=\"text-gray-600\">\n                                        \u300c\u30ac\u30b9\u4ee3\u304c\u5b89\u304f\u3001\u53d6\u5f15\u30b9\u30d4\u30fc\u30c9\u304c\u901f\u3044\u306e\u3067\u3001TheExchain\u306f\u79c1\u306e\u304a\u6c17\u306b\u5165\u308a\u306eDEX\u3067\u3059\u3002\n                                        \u4ed6\u306eDEX\u3082\u305f\u304f\u3055\u3093\u8a66\u3057\u307e\u3057\u305f\u304c\u3001\u3053\u3053\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u306f\u3068\u3066\u3082\u76f4\u611f\u7684\u3067\u3001\u30a4\u30fc\u30eb\u30c9\u30d5\u30a1\u30fc\u30df\u30f3\u30b0\u306e\u6a5f\u4f1a\u304c\u3068\u3066\u3082\u6c17\u306b\u5165\u3063\u3066\u3044\u307e\u3059\u3002\"\n                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <a class=\"!display-none testimonial-nav-prev absolute top-1\/2 left-0 transform -translate-y-1\/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors focus:outline-none\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-gray-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\n                        <\/svg>\n                    <\/a>\n                    <a class=\"!display-none testimonial-nav-next absolute top-1\/2 right-0 transform -translate-y-1\/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center hover:bg-gray-100 transition-colors focus:outline-none\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-gray-600\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            <\/div>\n            \n        \n        <\/div>\n    <\/section>\n\n \n\n\n \n   \n    <!-- Floating CTA -->\n    <div class=\"fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 md:hidden z-40 floating-cta\">\n        <button class=\"w-full py-3 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium shadow-md\">\n            \u53d6\u5f15\u958b\u59cb\n        <\/button>\n    <\/div>\n\n\n\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>DEX (Decentralized Exchange)- Trade Your Way, Without Limits Experience the power of decentralized trading with full control over your assets. No intermediaries. No restrictions. Just pure financial freedom. Learn More Contact See TheExchain in Action Experience the simplicity and power of decentralized trading 1 Connect Wallet 2 Select Tokens 3 Review &#038; Swap 4 Confirmation TheExchain Interface Why Decentralized Trading Matters Experience the fundamental shift in how you interact with financial systems Self-Custody You control your keys, you control your funds. No third party can freeze or seize your assets. Permissionless Access Trade anytime, anywhere, without restrictions or KYC barriers. Open finance for everyone. Transparency All transactions are on-chain, auditable [&hellip;]<\/p>","protected":false},"author":1,"featured_media":3461,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-371","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/pages\/371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/comments?post=371"}],"version-history":[{"count":154,"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/pages\/371\/revisions"}],"predecessor-version":[{"id":3499,"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/pages\/371\/revisions\/3499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/media\/3461"}],"wp:attachment":[{"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/media?parent=371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}