hobbi.st: Money for Humanity | Build Your Kingdom | Uni-ver-city of Happiness<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@800;900&family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tomorrow:wght@700;900&display=swap\" rel=\"stylesheet\">\r\n \r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n colors: {\r\n brand: {\r\n dark: '#0f172a',\r\n gold: '#fbbf24',\r\n teal: '#14b8a6',\r\n accent: '#f59e0b'\r\n }\r\n },\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n display: ['Montserrat', 'sans-serif'],\r\n mono: ['Tomorrow', 'monospace'],\r\n },\r\n animation: {\r\n 'float': 'float 6s ease-in-out infinite',\r\n 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',\r\n },\r\n keyframes: {\r\n float: {\r\n '0%, 100%': { transform: 'translateY(0)' },\r\n '50%': { transform: 'translateY(-20px)' },\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; transition: background-color 0.3s, color 0.3s; margin: 0; padding: 0; width: 100vw; overflow-x: hidden; }\r\n body { background-color: #0d1117; color: #e2e8f0; }\r\n .section-bg-primary { background-color: #10141c; }\r\n .text-default-light { color: #e2e8f0; }\r\n .text-default-muted { color: #94a3b8; }\r\n .card-bg { background-color: #1a202c; border: 1px solid #3b82f630; box-shadow: 0 0 15px rgba(59, 130, 246, 0.2); }\r\n body.light-mode { background-color: #f7f7f7; color: #1a202c; }\r\n body.light-mode .section-bg-primary { background-color: #ffffff; }\r\n body.light-mode .text-default-light { color: #1a202c; }\r\n body.light-mode .text-default-muted { color: #64748b; }\r\n body.light-mode .card-bg { background-color: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }\r\n body.light-mode .card-bg:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }\r\n h1, h2, h3 { font-family: 'Montserrat', sans-serif; }\r\n .font-tomorrow { font-family: 'Tomorrow', sans-serif; }\r\n .neon-title { background-image: linear-gradient(90deg, #10b981, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }\r\n body.light-mode .neon-title { text-shadow: none; }\r\n .card-bg { transition: all 0.3s ease; }\r\n .card-bg:hover { transform: translateY(-4px); }\r\n .neon-cta-button { background: linear-gradient(90deg, #10b981, #3b82f6); box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; }\r\n .neon-cta-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: rgba(255, 255, 255, 0.1); transition: all 0.6s; border-radius: 50%; transform: translate(-50%, -50%) scale(0); z-index: 0; }\r\n .neon-cta-button:hover::after { transform: translate(-50%, -50%) scale(1); opacity: 0; }\r\n .neon-cta-button span { position: relative; z-index: 2; }\r\n @keyframes typing { from { width: 0; } to { width: 100%; } }\r\n @keyframes blink-caret-dark { from, to { border-color: transparent } 50% { border-color: #3b82f6; } }\r\n @keyframes blink-caret-light { from, to { border-color: transparent } 50% { border-color: #1a202c; } }\r\n .typing-text { overflow: hidden; border-right: .15em solid #3b82f6; white-space: nowrap; margin: 0 auto; letter-spacing: .1em; animation: typing 3.5s steps(40, end) forwards, blink-caret-dark .75s step-end infinite; max-width: 100%; }\r\n body.light-mode .typing-text { border-right-color: #1a202c; animation: typing 3.5s steps(40, end) forwards, blink-caret-light .75s step-end infinite; }\r\n @media (max-width: 640px) { \r\n .typing-text { white-space: normal; border-right: none; animation: none !important; width: auto; font-size: 1.5rem !important; margin-top: 0.5rem; }\r\n .hero-title { font-size: 2.5rem !important; }\r\n #theme-toggle { top: 5.5rem !important; right: 1rem; width: 40px; height: 40px; }\r\n #login-toggle { top: 10rem !important; right: 1rem; width: 40px; height: 40px; }\r\n #urgent-toggle { top: 14.5rem !important; right: 1rem; width: 40px; height: 40px; }\r\n }\r\n .pricing-card { position: relative; transition: all 0.3s; }\r\n .pricing-card.featured { border-color: #10b981 !important; box-shadow: 0 0 30px rgba(16, 185, 129, 0.4); transform: scale(1.02); z-index: 10; }\r\n body.light-mode .pricing-card.featured { box-shadow: 0 0 30px rgba(16, 185, 129, 0.2); border-color: #059669 !important; }\r\n .footer-logo { background-image: linear-gradient(45deg, #f59e0b, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }\r\n .floating-button { position: fixed; width: 48px; height: 48px; cursor: pointer; z-index: 50; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 1; visibility: visible; transform: translateY(0); }\r\n .floating-button.hidden { opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; }\r\n #theme-toggle { top: 5.5rem; right: 1.5rem; background-color: var(--toggle-bg-color); border: 2px solid var(--toggle-border-color); color: var(--toggle-icon-color); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; }\r\n #login-toggle { top: 9.5rem; right: 1.5rem; background: linear-gradient(135deg, #8b5cf6, #3b82f6); border: 2px solid #8b5cf6; color: white; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; }\r\n #login-toggle:hover { background: linear-gradient(135deg, #7c3aed, #2563eb); transform: scale(1.1); box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); }\r\n #urgent-toggle { top: 13.5rem; right: 1.5rem; background: linear-gradient(135deg, #dc2626, #f97316, #f59e0b); border: 2px solid #dc2626; color: white; transition: all 0.3s ease; animation: pulse-fire 1.5s infinite; box-shadow: 0 4px 20px rgba(220, 38, 38, 0.6); }\r\n #urgent-toggle:hover { background: linear-gradient(135deg, #b91c1c, #ea580c, #d97706); transform: scale(1.15); box-shadow: 0 0 30px rgba(220, 38, 38, 0.8); animation: pulse-fire-hover 0.8s infinite; }\r\n @keyframes pulse-fire { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); transform: scale(1.05); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); transform: scale(1); } }\r\n @keyframes pulse-fire-hover { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.9); transform: scale(1.15); } 50% { box-shadow: 0 0 0 15px rgba(220, 38, 38, 0); transform: scale(1.2); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); transform: scale(1.15); } }\r\n body { --toggle-bg-color: #1a202c; --toggle-border-color: #3b82f6; --toggle-icon-color: #fcd34d; }\r\n body.light-mode { --toggle-bg-color: #ffffff; --toggle-border-color: #cbd5e1; --toggle-icon-color: #3b82f6; }\r\n .elementor-popup-button { cursor: pointer; transition: all 0.3s ease; }\r\n .elementor-popup-button:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(59, 130, 246, 0.6) !important; }\r\n .glass-panel { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); }\r\n .text-gradient-gold { background: linear-gradient(135deg, #fbbf24, #d97706); -webkit-background-clip: text; background-clip: text; color: transparent; }\r\n .text-gradient-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); -webkit-background-clip: text; background-clip: text; color: transparent; }\r\n .neon-glow { box-shadow: 0 0 20px rgba(20, 184, 166, 0.3); }\r\n .gold-glow { box-shadow: 0 0 25px rgba(251, 191, 36, 0.2); }\r\n input[type=range] { -webkit-appearance: none; background: transparent; }\r\n input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%; background: #fbbf24; cursor: pointer; margin-top: -10px; box-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }\r\n input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: #334155; border-radius: 2px; }\r\n .hero-bg { background-image: radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.15) 0%, rgba(15, 23, 42, 1) 70%); width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; overflow-x: hidden; }\r\n .whitepaper-section { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; color: #1F2937; }\r\n .whitepaper-section .section-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1rem; text-align: center; }\r\n .whitepaper-section .section-subtitle { font-size: 1.125rem; line-height: 1.75rem; color: #94a3b8; margin-bottom: 3rem; text-align: center; max-width: 48rem; margin-left: auto; margin-right: auto; }\r\n .whitepaper-section .whitepaper-card { background-color: #1a202c; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: box-shadow 0.3s ease-in-out; margin-bottom: 2rem; border: 1px solid #3b82f630; }\r\n .whitepaper-section .whitepaper-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }\r\n .whitepaper-section .pill-button { padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: 9999px; cursor: pointer; transition: all 0.3s ease-in-out; border: 2px solid transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }\r\n .whitepaper-section .pill-button.active { background-color: #0D9488; color: #FFFFFF; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-color: #0D9488; }\r\n .whitepaper-section .pill-button:not(.active) { background-color: #334155; color: #e2e8f0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }\r\n .whitepaper-section .pill-button:not(.active):hover { background-color: #475569; border-color: #99F6E4; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }\r\n .whitepaper-section .engine-tabs-container, .whitepaper-section .tokenization-tabs-container { display: flex; flex-direction: column; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden; background-color: #334155; height: auto; min-height: 400px; }\r\n .whitepaper-section .engine-tabs-nav-panel, .whitepaper-section .tokenization-tabs-nav-panel { width: 100%; background-color: #1e293b; padding: 1rem; flex-shrink: 0; overflow-x: auto; }\r\n .whitepaper-section .engine-content-panel, .whitepaper-section .tokenization-content-panel { flex: 1 1 0%; padding: 1rem; overflow-y: auto; }\r\n .whitepaper-section .tab-link { display: flex; align-items: center; padding: 0.75rem; border-radius: 0.5rem; font-weight: 500; color: #cbd5e1; transition: all 0.2s ease-in-out; border: 2px solid transparent; justify-content: flex-start; text-align: left; cursor: pointer; margin-bottom: 0.5rem; }\r\n .whitepaper-section .tab-link.active { background-color: #0f766e; color: #FFFFFF; font-weight: 600; border-color: #14b8a6; }\r\n .whitepaper-section .tab-link:hover { background-color: #475569; }\r\n .whitepaper-section .chart-container { position: relative; width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; height: 300px; max-height: 40vh; }\r\n .whitepaper-section .ecosystem-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }\r\n .whitepaper-section #reputation-slider { width: 100%; height: 8px; border-radius: 5px; background: #475569; outline: none; opacity: 0.7; transition: opacity .2s; }\r\n .whitepaper-section #reputation-slider:hover { opacity: 1; }\r\n .whitepaper-section #reputation-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #0D9488; cursor: pointer; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }\r\n .whitepaper-section #reputation-slider::-moz-range-thumb { width: 20px; height: 20px; background: #0D9488; cursor: pointer; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }\r\n @media (min-width: 768px) { .whitepaper-section .section-title { font-size: 2.25rem; line-height: 2.5rem; } .whitepaper-section .section-subtitle { font-size: 1.25rem; line-height: 1.75rem; } .whitepaper-section .engine-tabs-container, .whitepaper-section .tokenization-tabs-container { flex-direction: row; } .whitepaper-section .engine-tabs-nav-panel, .whitepaper-section .tokenization-tabs-nav-panel { width: 33.333333%; overflow-y: auto; } .whitepaper-section .engine-content-panel, .whitepaper-section .tokenization-content-panel { padding: 2rem; } .whitepaper-section .ecosystem-grid { grid-template-columns: repeat(3, 1fr); } }\r\n @media (max-width: 767px) { .whitepaper-section #engine-tabs, .whitepaper-section #tokenization-tabs { display: flex; flex-direction: row; overflow-x: auto; padding-bottom: 0.5rem; } .whitepaper-section .tab-link { flex-shrink: 0; margin-right: 0.5rem; margin-bottom: 0; } }\r\n :root { --inequality-bottom-color: #3498db; --inequality-middle-color: #9b59b6; --inequality-top-color: #e74c3c; --hobbist-main: #10b981; --hobbist-secondary: #3b82f6; }\r\n .inequality-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }\r\n .inequality-chart-card { background: #1a202c; border-radius: 12px; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; flex-direction: column; min-width: 0; border: 1px solid #3b82f630; }\r\n .inequality-chart-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }\r\n .inequality-chart-header h2 { font-size: 0.9rem; font-weight: 700; color: #e2e8f0; }\r\n .inequality-canvas-wrapper { position: relative; height: 200px; width: 100%; }\r\n .inequality-custom-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; background: #1a202c; padding: 12px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #e2e8f0; }\r\n .inequality-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #e2e8f0; }\r\n .inequality-dot { width: 8px; height: 8px; border-radius: 50%; }\r\n .inequality-hero-card { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: white; padding: 16px 20px; border-radius: 12px; margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1); }\r\n .hobbist-hero { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); border: 1px solid rgba(16, 185, 129, 0.3); }\r\n .inequality-stat-box { border-left: 3px solid var(--inequality-top-color); padding-left: 12px; }\r\n .hobbist-hero .inequality-stat-box { border-color: var(--hobbist-main); }\r\n .inequality-stat-box h3 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; margin-bottom: 2px; }\r\n .inequality-stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }\r\n .inequality-manifesto { grid-column: span 2; font-size: 0.8rem; background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; margin-top: 8px; line-height: 1.5; }\r\n .inequality-manifesto strong { display: block; color: var(--hobbist-main); margin-bottom: 4px; }\r\n .inequality-section-divider { margin: 40px 0 20px; border-top: 2px dashed #e2e8f0; position: relative; }\r\n .inequality-section-title { text-align: center; margin-bottom: 16px; font-size: 1.5rem; color: var(--hobbist-main); }\r\n @media (max-width: 640px) { .inequality-hero-card { padding: 12px; gap: 10px; } .inequality-stat-value { font-size: 1.1rem; } .inequality-canvas-wrapper { height: 150px; } .inequality-manifesto { font-size: 0.75rem; } .inequality-charts-grid { grid-template-columns: 1fr; } }\r\n html, body { max-width: 100%; overflow-x: hidden; }\r\n header#hero { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding-left: 0; padding-right: 0; }\r\n .hero-bg > .container { width: 100%; max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }\r\n section { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }\r\n section > .container { width: 100%; max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }\r\n @media (min-width: 640px) { .hero-bg > .container, section > .container { padding-left: 2rem; padding-right: 2rem; } }\r\n @media (min-width: 1024px) { .hero-bg > .container, section > .container { padding-left: 3rem; padding-right: 3rem; } }\r\n @media (max-width: 640px) { #theme-toggle, #login-toggle, #urgent-toggle { margin-bottom: 0.75rem !important; } }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n \r\n <button id=\"theme-toggle\" class=\"floating-button hover:scale-105\">\r\n <i id=\"theme-icon\" class=\"fa-solid fa-moon text-xl\"><\/i>\r\n <\/button>\r\n \r\n <button id=\"login-toggle\" class=\"floating-button hover:scale-105\">\r\n <i class=\"fa-solid fa-right-to-bracket text-lg\"><\/i>\r\n <\/button>\r\n \r\n <button id=\"urgent-toggle\" \r\n class=\"floating-button elementor-popup-trigger\"\r\n data-elementor-popup-id=\"13735\">\r\n <i class=\"fa-solid fa-bolt text-lg\"><\/i>\r\n <\/button>\r\n\r\n <nav class=\"fixed w-full z-50 glass-panel border-b-0 border-white\/5\" style=\"top: 0; width: 100vw;\">\r\n <div class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"fa-solid fa-crown text-brand-gold text-2xl animate-pulse-slow\"><\/i>\r\n <span class=\"font-mono text-2xl font-bold tracking-tighter\">hobbi<span class=\"text-brand-teal\">.st<\/span><\/span>\r\n <\/div>\r\n <div class=\"hidden md:flex gap-8 text-sm font-semibold tracking-wide text-slate-300\">\r\n <a href=\"#hero\" class=\"hover:text-brand-teal transition\">\u0414\u041e\u041c\u041e\u0419<\/a>\r\n <a href=\"#inequality\" class=\"hover:text-brand-teal transition\">INEQUALITY<\/a>\r\n <a href=\"#how-it-works\" class=\"hover:text-brand-teal transition\">MECHANICS<\/a>\r\n <a href=\"#kingdom\" class=\"hover:text-brand-teal transition\">KINGDOM<\/a>\r\n <a href=\"#philosophy\" class=\"hover:text-brand-teal transition\">PHILOSOPHY<\/a>\r\n <a href=\"#engine\" class=\"hover:text-brand-teal transition\">TECHNOLOGY<\/a>\r\n <a href=\"#tokenization\" class=\"hover:text-brand-teal transition\">TOKENIZATION<\/a>\r\n <a href=\"#ecosystem\" class=\"hover:text-brand-teal transition\">ECOSYSTEM<\/a>\r\n <\/div>\r\n <button class=\"bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-400 hover:to-emerald-400 text-white font-bold py-2 px-6 rounded-full shadow-lg transform hover:scale-105 transition duration-300 neon-glow elementor-popup-button\" \r\n data-elementor-popup-id=\"7363\">\r\n Start Game\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <header class=\"relative pt-20 pb-16 lg:pt-36 lg:pb-20 hero-bg overflow-hidden min-h-screen flex items-center justify-center\" id=\"hero\" style=\"margin-top: 0;\">\r\n <div class=\"absolute top-20 right-10 text-brand-gold opacity-10 text-9xl animate-float\" style=\"animation-delay: 0s;\">\u20bf<\/div>\r\n <div class=\"absolute bottom-20 left-10 text-brand-teal opacity-10 text-8xl animate-float\" style=\"animation-delay: 2s;\">\u2665<\/div>\r\n <div class=\"absolute top-40 left-1\/4 text-purple-500 opacity-10 text-6xl animate-float\" style=\"animation-delay: 1s;\">XP<\/div>\r\n\r\n <div class=\"container mx-auto px-6 text-center relative z-10\">\r\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800\/50 border border-brand-teal\/30 mb-8 backdrop-blur-sm\">\r\n <span class=\"w-2 h-2 rounded-full bg-green-500 animate-pulse\"><\/span>\r\n <span class=\"text-xs font-bold text-brand-teal tracking-widest uppercase\">Uni-ver-city of Happiness is open<\/span>\r\n <\/div>\r\n \r\n <img decoding=\"async\" \r\n id=\"unicorn-image\"\r\n src=\"https:\/\/hobbi.st\/wp-content\/uploads\/2025\/11\/hobbist-unicorn-e1762342771306.webp\" \r\n alt=\"Hobbi.st Unicorn - Symbol of University of Happiness\" \r\n class=\"w-[300px] h-[300px] object-cover mx-auto mb-8 rounded-xl shadow-2xl transition-transform duration-500 hover:scale-[1.05]\"\r\n loading=\"eager\"\r\n onerror=\"this.onerror=null; this.src='https:\/\/placehold.co\/300x300\/' + (document.body.classList.contains('light-mode') ? 'f7f7f7\/1a202c' : '0d1117\/ffffff') + '?text=Hobbi.st+Unicorn&font=inter'\"\r\n >\r\n \r\n <h1 class=\"hero-title text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-extrabold mb-6 leading-tight mt-10\">\r\n <span class=\"neon-title block text-default-light\">Money for all people<\/span>\r\n <span class=\"block typing-text text-2xl sm:text-3xl md:text-5xl lg:text-6xl mt-4 text-indigo-600\">\r\n hobbi.st 2030\r\n <\/span>\r\n <\/h1>\r\n \r\n <h2 class=\"text-5xl md:text-7xl lg:text-8xl font-display font-black leading-tight mb-8\">\r\n Turn Life <br>\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-teal-400 via-brand-teal to-emerald-500\">into a Game<\/span>, \r\n and Actions <br>\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-amber-300 via-brand-gold to-orange-500\">into Capital<\/span>\r\n <\/h2>\r\n\r\n <p class=\"text-lg md:text-xl text-default-muted max-w-3xl mx-auto mb-10\">\r\n Forget about boring lessons and courses. hobbist turns the routine of self-development into exciting quests, levels, and achievements. Your progress is the growth of your kingdom.\r\n <\/p>\r\n \r\n <p class=\"text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto mb-12 leading-relaxed\">\r\n Cover your basic needs by doing what you love. \r\n From a school student to a pensioner \u2014 hobbi.st pays for your development, sports, and helping others.\r\n <\/p>\r\n\r\n <div class=\"flex flex-col sm:flex-row justify-center gap-6\">\r\n <button onclick=\"document.getElementById('inequality').scrollIntoView({behavior: 'smooth'})\" class=\"group relative px-8 py-4 bg-brand-gold text-slate-900 font-black text-lg rounded-xl shadow-xl gold-glow hover:bg-amber-300 transition-all transform hover:-translate-y-1\">\r\n <span class=\"flex items-center gap-3\">\r\n <i class=\"fa-solid fa-chart-pie\"><\/i>\r\n Learn about Inequality\r\n <\/span>\r\n <div class=\"absolute inset-0 rounded-xl ring-2 ring-white\/50 group-hover:ring-4 transition-all\"><\/div>\r\n <\/button>\r\n <button onclick=\"document.getElementById('kingdom').scrollIntoView({behavior: 'smooth'})\" class=\"px-8 py-4 bg-slate-800 border border-slate-600 text-white font-bold text-lg rounded-xl hover:bg-slate-700 hover:border-brand-teal transition-all transform hover:-translate-y-1\">\r\n <i class=\"fa-solid fa-gamepad mr-2\"><\/i>\r\n How does it work?\r\n <\/button>\r\n <a href=\"#philosophy\" class=\"neon-cta-button inline-flex items-center justify-center text-lg md:text-xl font-bold text-white py-4 px-10 rounded-xl hover:shadow-2xl hover:shadow-indigo-500\/50\">\r\n <span>Discover the Philosophy <i class=\"fa-solid fa-arrow-right ml-2\"><\/i><\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"mt-16 flex justify-center items-center gap-8 opacity-60 grayscale hover:grayscale-0 transition-all duration-500\">\r\n <div class=\"text-slate-400 font-bold flex items-center gap-2\"><i class=\"fa-brands fa-apple text-2xl\"><\/i> Health Sync<\/div>\r\n <div class=\"text-slate-400 font-bold flex items-center gap-2\"><i class=\"fa-brands fa-google text-2xl\"><\/i> Google Fit<\/div>\r\n <div class=\"text-slate-400 font-bold flex items-center gap-2\"><i class=\"fa-solid fa-link text-2xl\"><\/i> Blockchain<\/div>\r\n <div class=\"text-slate-400 font-bold flex items-center gap-2\"><i class=\"fa-solid fa-brain text-2xl\"><\/i> AI Verified<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"inequality\" class=\"py-16 md:py-24 section-bg-primary\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold mb-4 text-default-light\">Global Inequality 2025<\/h2>\r\n <p class=\"source-inline text-default-muted\">(Source: <a href=\"https:\/\/wir2026.wid.world\" target=\"_blank\" class=\"text-blue-400 hover:text-blue-300\">WIR2026<\/a> | PPP Estimates 2025)<\/p>\r\n <\/div>\r\n\r\n <div class=\"inequality-hero-card\">\r\n <div class=\"inequality-stat-box\">\r\n <div class=\"inequality-stat-value\">Top 10% of people receive 53% of the world's income<\/div>\r\n <\/div>\r\n <div class=\"inequality-stat-box\" style=\"border-color: var(--inequality-bottom-color);\">\r\n <div class=\"inequality-stat-value\">Top 10% of people own 75% of the world's assets<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-custom-legend\">\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: var(--inequality-bottom-color);\"><\/span><span>Bottom 50%<\/span><\/div>\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: var(--inequality-middle-color);\"><\/span><span>Middle 40%<\/span><\/div>\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: var(--inequality-top-color);\"><\/span><span>Top 10%<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-charts-grid\">\r\n <div class=\"inequality-chart-card\">\r\n <div class=\"inequality-chart-header\"><i class=\"fas fa-wallet\" style=\"color: var(--inequality-bottom-color)\"><\/i><h2>Income Share<\/h2><\/div>\r\n <div class=\"inequality-canvas-wrapper\"><canvas id=\"incomeChart\"><\/canvas><\/div>\r\n <\/div>\r\n <div class=\"inequality-chart-card\">\r\n <div class=\"inequality-chart-header\"><i class=\"fas fa-gem\" style=\"color: var(--inequality-bottom-color)\"><\/i><h2>Wealth Share<\/h2><\/div>\r\n <div class=\"inequality-canvas-wrapper\"><canvas id=\"wealthChart\"><\/canvas><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-section-divider\"><\/div>\r\n <h2 class=\"inequality-section-title text-3xl md:text-4xl font-bold mb-8\">hobbi.st 2030 Proposal<\/h2>\r\n\r\n <div class=\"inequality-hero-card hobbist-hero\">\r\n <div class=\"inequality-stat-box\">\r\n <h3>Hobbi.st Income<\/h3>\r\n <div class=\"inequality-stat-value\">90% of people receive 80%<\/div>\r\n <\/div>\r\n <div class=\"inequality-stat-box\" style=\"border-color: var(--hobbist-secondary);\">\r\n <h3>Hobbi.st Capital<\/h3>\r\n <div class=\"inequality-stat-value\">90% of people own 80%<\/div>\r\n <\/div>\r\n <div class=\"inequality-manifesto\">\r\n <strong>Revolutionary Solution from hobbi.st<\/strong>\r\n Real Proof of Work. We replace machine work and the slave system with \"useful actions\". hobbi.st coin becomes the backing of human activity. Available to everyone. Requires no investments. Equal chances for a student and an investor.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-custom-legend\">\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: var(--hobbist-main);\"><\/span><span>Hobbists (90%)<\/span><\/div>\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: #1f2937;\"><\/span><span>Others (10%)<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-charts-grid\">\r\n <div class=\"inequality-chart-card\">\r\n <div class=\"inequality-chart-header\"><i class=\"fas fa-users\" style=\"color: var(--hobbist-main)\"><\/i><h2>Income Distr.<\/h2><\/div>\r\n <div class=\"inequality-canvas-wrapper\"><canvas id=\"hobbistIncomeChart\"><\/canvas><\/div>\r\n <\/div>\r\n <div class=\"inequality-chart-card\">\r\n <div class=\"inequality-chart-header\"><i class=\"fas fa-coins\" style=\"color: var(--hobbist-main)\"><\/i><h2>Wealth Distr.<\/h2><\/div>\r\n <div class=\"inequality-canvas-wrapper\"><canvas id=\"hobbistWealthChart\"><\/canvas><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"how-it-works\" class=\"py-16 bg-slate-900 relative\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"grid md:grid-cols-2 gap-16 items-center\">\r\n <div class=\"order-2 md:order-1\">\r\n <div class=\"relative\">\r\n <div class=\"absolute -inset-1 bg-gradient-to-r from-brand-teal to-brand-gold rounded-2xl blur opacity-25\"><\/div>\r\n <div class=\"relative bg-slate-800 p-8 rounded-2xl border border-slate-700\">\r\n <h3 class=\"text-xl font-bold text-white mb-6 flex items-center gap-3\">\r\n <i class=\"fa-solid fa-bolt text-brand-gold\"><\/i>\r\n Real Proof of Work\r\n <\/h3>\r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-red-500\/10 flex items-center justify-center text-red-500 shrink-0\"><i class=\"fa-solid fa-xmark\"><\/i><\/div>\r\n <div>\r\n <p class=\"font-bold text-slate-200\">Old Model<\/p>\r\n <p class=\"text-sm text-slate-400\">You spend time, energy, and money, but only your employer or bank earns.<\/p>\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-green-500\/10 flex items-center justify-center text-green-500 shrink-0\"><i class=\"fa-solid fa-check\"><\/i><\/div>\r\n <div>\r\n <p class=\"font-bold text-white\">Hobbi.st Model<\/p>\r\n <p class=\"text-sm text-slate-400\">Your <strong>useful actions<\/strong> (sports, study) are mining. You get tokens for becoming better.<\/p>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"order-1 md:order-2\">\r\n <h2 class=\"text-4xl md:text-5xl font-display font-bold mb-6\">\r\n Mining <span class=\"text-gradient-gold\">without GPUs<\/span>\r\n <\/h2>\r\n <p class=\"text-lg text-slate-400 mb-6 leading-relaxed\">\r\n Forget about complex farms. Your body, your mind, and your heart are the main mining tools.\r\n <\/p>\r\n <p class=\"text-lg text-slate-400 mb-8 leading-relaxed\">\r\n Hobbi.st uses <strong>Real PoW (Proof of Work)<\/strong>: AI and Oracles confirm that you actually ran 5 km, completed a Python lesson, or helped a neighbor. The smart contract instantly credits the reward.\r\n <\/p>\r\n <div class=\"flex gap-4\">\r\n <span class=\"px-4 py-2 bg-slate-800 rounded-lg text-sm font-mono text-brand-teal border border-brand-teal\/20\">#SportFi<\/span>\r\n <span class=\"px-4 py-2 bg-slate-800 rounded-lg text-sm font-mono text-brand-teal border border-brand-teal\/20\">#LearnFi<\/span>\r\n <span class=\"px-4 py-2 bg-slate-800 rounded-lg text-sm font-mono text-brand-teal border border-brand-teal\/20\">#SocialFi<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"philosophy\" class=\"whitepaper-section py-16 md:py-24 bg-gradient-to-b from-slate-900 to-brand-dark\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">New Paradigm: Economy of Love<\/h2>\r\n <p class=\"section-subtitle\">\r\n hobbi.st goes beyond existing economic models. The platform is based on the \"Economy of Love\" \u2014 a system where value is determined by your favorite cause and a great goal (we will help you find it), well-being, and contribution to the common cause, not just financial gain. Explore the key differences.\r\n <\/p>\r\n \r\n <div class=\"whitepaper-card max-w-4xl mx-auto\">\r\n <div class=\"p-4 sm:p-6\">\r\n <p class=\"text-center text-slate-300 mb-4 font-semibold\">Click a button to see changes on the chart:<\/p>\r\n <div class=\"flex flex-wrap justify-center gap-2 mb-6\" id=\"economy-buttons\">\r\n <button data-economy=\"love\" class=\"pill-button active\">Economy of Love<\/button>\r\n <button data-economy=\"passion\" class=\"pill-button\">Passion Economy<\/button>\r\n <button data-economy=\"gift\" class=\"pill-button\">Gift Economy<\/button>\r\n <button data-economy=\"market\" class=\"pill-button\">Market Economy<\/button>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"economyChart\"><\/canvas>\r\n <\/div>\r\n <div id=\"economy-description\" class=\"mt-6 text-center text-slate-300\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"ipo\" class=\"py-16 bg-gradient-to-b from-brand-dark to-slate-900\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-brand-teal font-mono tracking-widest uppercase text-sm font-bold\">Economy of Love<\/span>\r\n <h2 class=\"text-4xl md:text-5xl font-display font-bold mt-2 text-white\">\r\n From Hobby to <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600\">Legacy<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\r\n <div class=\"space-y-8\">\r\n <div class=\"flex gap-6\">\r\n <div class=\"flex-shrink-0 w-12 h-12 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl font-bold text-brand-teal\">1<\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Accumulate Reputation<\/h3>\r\n <p class=\"text-slate-400\">Every action is recorded on the Blockchain. This is your \"Proof of Contribution\". Your success story cannot be faked.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex gap-6\">\r\n <div class=\"flex-shrink-0 w-12 h-12 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl font-bold text-brand-gold\">2<\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Issue your Token (PUIT)<\/h3>\r\n <p class=\"text-slate-400\">When your reputation peaks, you create your personal token. This is a share of \"YOU Inc.\".<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex gap-6\">\r\n <div class=\"flex-shrink-0 w-12 h-12 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl font-bold text-purple-500\">3<\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Personal IPO<\/h3>\r\n <p class=\"text-slate-400\">The community invests in you. Get resources for a startup, education, or a dream in exchange for a share in your future success.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"relative\">\r\n <div class=\"absolute inset-0 bg-gradient-to-r from-purple-500\/20 to-pink-500\/20 rounded-3xl blur-2xl transform rotate-3\"><\/div>\r\n <div class=\"relative glass-panel rounded-3xl p-8 border border-purple-500\/30\">\r\n <div class=\"flex items-center justify-between mb-8 border-b border-white\/10 pb-4\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-12 h-12 rounded-full bg-gradient-to-r from-brand-gold to-orange-500 flex items-center justify-center text-slate-900 font-bold text-xl\">A<\/div>\r\n <div>\r\n <div class=\"text-white font-bold\">T. Anarbekov<\/div>\r\n <div class=\"text-xs text-brand-teal\">Level: King (Lvl 50)<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <div class=\"text-xs text-slate-400\">Market Cap<\/div>\r\n <div class=\"text-xl font-mono text-white\">$4,250,000<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl flex justify-between items-center\">\r\n <span class=\"text-slate-300\"><i class=\"fa-solid fa-users mr-2 text-brand-teal\"><\/i>Investors<\/span>\r\n <span class=\"font-bold text-white\">4,820<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl flex justify-between items-center\">\r\n <span class=\"text-slate-300\"><i class=\"fa-solid fa-chart-line mr-2 text-brand-gold\"><\/i>Token Growth (YTD)<\/span>\r\n <span class=\"font-bold text-green-400\">+320%<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-8 text-center\">\r\n <button class=\"w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-xl hover:shadow-[0_0_20px_rgba(168,85,247,0.5)] transition elementor-popup-button\" \r\n data-elementor-popup-id=\"13705\">\r\n Invest in Temirlan\r\n <\/button>\r\n <p class=\"text-xs text-slate-500 mt-3 italic\">\"Economy based on human potential\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"governance\" class=\"whitepaper-section py-16 md:py-24 bg-gradient-to-b from-slate-900 to-brand-dark\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">Governing the Future: Reputation-Weighted DAO<\/h2>\r\n <p class=\"section-subtitle\">\r\n hobbi.st is governed by its community through a Decentralized Autonomous Organization (DAO). Our model is unique: the weight of your vote depends not only on the number of tokens but also on your reputation and actual contribution to the ecosystem.\r\n <\/p>\r\n <div class=\"whitepaper-card max-w-4xl mx-auto\">\r\n <div class=\"p-4 sm:p-6\">\r\n <div class=\"chart-container mb-6\">\r\n <canvas id=\"daoChart\"><\/canvas>\r\n <\/div>\r\n <div class=\"px-4\">\r\n <label for=\"reputation-slider\" class=\"block text-center font-medium text-slate-300\">Reputation weight in voting: <span id=\"reputation-value\" class=\"text-teal-400 font-bold\">50%<\/span><\/label>\r\n <input id=\"reputation-slider\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer mt-2 accent-teal-600\">\r\n <div class=\"flex justify-between text-xs text-slate-500 mt-1\">\r\n <span>Tokens only<\/span>\r\n <span>Hybrid model<\/span>\r\n <span>Reputation only<\/span>\r\n <\/div>\r\n <\/div>\r\n <p id=\"dao-explanation\" class=\"mt-6 text-center text-slate-300 font-medium leading-relaxed\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 md:py-24 section-bg-primary\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\r\n How does <span class=\"neon-title\">Life Gamification<\/span> work?\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-10\">\r\n \r\n <div class=\"card-bg p-8 rounded-2xl text-center\">\r\n <i class=\"fa-solid fa-crown text-6xl text-yellow-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-3 text-default-light\">Step 1: Kingdom<\/h3>\r\n <p class=\"text-default-muted\">Your kingdom consists of buildings (Citadel, Tower of Enlightenment, Treasury of Abundance, and Gardens of Harmony) \u2014 they symbolize areas of life (Strength & Health, Knowledge & Wisdom, Wealth & Balance, Connections & Relationships).<\/p>\r\n <span class=\"block mt-4 text-sm text-teal-600 font-semibold\">Growth in one area = progress in the Kingdom.<\/span>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-8 rounded-2xl text-center\">\r\n <i class=\"fa-solid fa-scroll text-6xl text-indigo-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-3 text-default-light\">Step 2: Quests<\/h3>\r\n <p class=\"text-default-muted\">Daily tasks (running, reading, learning, socializing) turn into quests that you link to the necessary buildings.<\/p>\r\n <span class=\"block mt-4 text-sm text-teal-600 font-semibold\">Completed a quest = Gained XP for a building.<\/span>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-8 rounded-2xl text-center\">\r\n <i class=\"fa-solid fa-star-of-life text-6xl text-red-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-3 text-default-light\">Step 3: Rewards<\/h3>\r\n <p class=\"text-default-muted\">XP, Coins, upgrading buildings and Kingdom Levels. Unlock new opportunities, ranks, and monetize your progress.<\/p>\r\n <span class=\"block mt-4 text-sm text-teal-600 font-semibold\">Level grows = Opportunities expand.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"kingdom\" class=\"py-16 bg-brand-dark overflow-hidden relative\">\r\n <div class=\"absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-brand-teal to-transparent opacity-50\"><\/div>\r\n \r\n <div class=\"container mx-auto px-6 text-center mb-16\">\r\n <h2 class=\"text-4xl md:text-6xl font-display font-black mb-4 text-white\">\r\n Your Personal <span class=\"text-gradient-teal\">Kingdom<\/span>\r\n <\/h2>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\r\n Life is an RPG. Upgrade buildings, level up your character, and unlock new income streams.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"container mx-auto px-6 grid md:grid-cols-4 gap-6\">\r\n <div class=\"group relative glass-panel p-8 rounded-2xl hover:bg-slate-800\/80 transition-all cursor-default\">\r\n <div class=\"absolute -top-6 left-1\/2 transform -translate-x-1\/2 w-16 h-16 bg-slate-900 rounded-full border-2 border-red-500 flex items-center justify-center shadow-lg shadow-red-500\/20 z-10 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-heart-pulse text-2xl text-red-500\"><\/i>\r\n <\/div>\r\n <div class=\"mt-8 text-center\">\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Citadel of Strength<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">Health and Energy<\/p>\r\n <div class=\"h-2 w-full bg-slate-700 rounded-full overflow-hidden\">\r\n <div class=\"h-full w-3\/4 bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]\"><\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-500\">Quests: Running, Yoga, Sleep<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative glass-panel p-8 rounded-2xl hover:bg-slate-800\/80 transition-all cursor-default\">\r\n <div class=\"absolute -top-6 left-1\/2 transform -translate-x-1\/2 w-16 h-16 bg-slate-900 rounded-full border-2 border-blue-500 flex items-center justify-center shadow-lg shadow-blue-500\/20 z-10 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-book-open text-2xl text-blue-500\"><\/i>\r\n <\/div>\r\n <div class=\"mt-8 text-center\">\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Tower of Knowledge<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">Intellect and Skills<\/p>\r\n <div class=\"h-2 w-full bg-slate-700 rounded-full overflow-hidden\">\r\n <div class=\"h-full w-1\/2 bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]\"><\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-500\">Quests: Courses, Books, Languages<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative glass-panel p-8 rounded-2xl hover:bg-slate-800\/80 transition-all cursor-default\">\r\n <div class=\"absolute -top-6 left-1\/2 transform -translate-x-1\/2 w-16 h-16 bg-slate-900 rounded-full border-2 border-brand-gold flex items-center justify-center shadow-lg shadow-amber-500\/20 z-10 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-coins text-2xl text-brand-gold\"><\/i>\r\n <\/div>\r\n <div class=\"mt-8 text-center\">\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Treasury<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">Wealth and Resources<\/p>\r\n <div class=\"h-2 w-full bg-slate-700 rounded-full overflow-hidden\">\r\n <div class=\"h-full w-2\/3 bg-brand-gold shadow-[0_0_10px_rgba(251,191,36,0.5)]\"><\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-500\">Quests: Investments, Work<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative glass-panel p-8 rounded-2xl hover:bg-slate-800\/80 transition-all cursor-default\">\r\n <div class=\"absolute -top-6 left-1\/2 transform -translate-x-1\/2 w-16 h-16 bg-slate-900 rounded-full border-2 border-purple-500 flex items-center justify-center shadow-lg shadow-purple-500\/20 z-10 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-users text-2xl text-purple-500\"><\/i>\r\n <\/div>\r\n <div class=\"mt-8 text-center\">\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Gardens of Connections<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">Relationships and Society<\/p>\r\n <div class=\"h-2 w-full bg-slate-700 rounded-full overflow-hidden\">\r\n <div class=\"h-full w-4\/5 bg-purple-500 shadow-[0_0_10px_rgba(168,85,247,0.5)]\"><\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-500\">Quests: Volunteering, Family<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"text-center mt-12\">\r\n <p class=\"text-brand-teal font-mono text-sm animate-pulse\">Free access to the platform until February 2026<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 md:py-24\" id=\"features\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\r\n Not just a tracker, but a <span class=\"neon-title\">Whole Ecosystem<\/span>\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n \r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-medal text-4xl text-yellow-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">True Gamification<\/h3>\r\n <p class=\"text-default-muted\">Ranks, achievements, badges. Every success is noted and rewarded. No more manual point counting.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-users-line text-4xl text-teal-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Social Progress<\/h3>\r\n <p class=\"text-default-muted\">Interact with others. Share quests, create interest-based Alliances, participate in \"Spirit Wars\" (PvP quests).<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-graduation-cap text-4xl text-indigo-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Learning as a Quest<\/h3>\r\n <p class=\"text-default-muted\">Manage your courses and lessons right from your Kingdom dashboard. Completing a module gives XP to your \"Tower of Enlightenment\".<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-chart-pie text-4xl text-pink-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Real Practice & Monetization<\/h3>\r\n <p class=\"text-default-muted\">Earn Hobbist Coins for completing public quests. Some quests are practical tasks in top local and global companies. Premium plans let you monetize created courses.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-magnifying-glass-chart text-4xl text-cyan-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Advanced Analytics<\/h3>\r\n <p class=\"text-default-muted\">Track your progress via charts. See which life areas (buildings) grow faster and which need your attention.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-rocket text-4xl text-green-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Simplicity and UX<\/h3>\r\n <p class=\"text-default-muted\">Intuitive, fast, and responsive interface. Maximum useful info, minimum clicks. Focus on action, not setup.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"engine\" class=\"whitepaper-section py-16 md:py-24 section-bg-primary\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">hobbi.st Platform Engine<\/h2>\r\n <p class=\"section-subtitle\">\r\n At the core of hobbi.st are four technological pillars that together create a unique environment for development and self-realization. Each element plays a key role, turning the path to mastery into an exciting and meaningful journey.\r\n <\/p>\r\n <div class=\"max-w-5xl mx-auto engine-tabs-container\">\r\n <div class=\"engine-tabs-nav-panel\">\r\n <h3 class=\"text-xl font-bold mb-4 text-slate-200 px-2\">Growth technologies:<\/h3>\r\n <nav id=\"engine-tabs\" class=\"flex flex-col space-y-2\">\r\n <a href=\"#\" data-tab=\"gamification\" class=\"tab-link active\">\r\n <span class=\"text-2xl mr-3\">\ud83c\udfae<\/span> Gamification\r\n <\/a>\r\n <a href=\"#\" data-tab=\"ar\" class=\"tab-link\">\r\n <span class=\"text-2xl mr-3\">\ud83d\udd2e<\/span> Augmented Reality (AR)\r\n <\/a>\r\n <a href=\"#\" data-tab=\"ai\" class=\"tab-link\">\r\n <span class=\"text-2xl mr-3\">\ud83e\udde0<\/span> Neural Networks (AI)\r\n <\/a>\r\n <a href=\"#\" data-tab=\"blockchain\" class=\"tab-link\">\r\n <span class=\"text-2xl mr-3\">\ud83d\udd17<\/span> Blockchain\r\n <\/a>\r\n <\/nav>\r\n <\/div>\r\n <div class=\"engine-content-panel\">\r\n <div id=\"engine-content\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"tokenization\" class=\"whitepaper-section py-16 md:py-24 bg-gradient-to-b from-brand-dark to-slate-900\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">Your Potential is Your Asset<\/h2>\r\n <p class=\"section-subtitle\">\r\n hobbi.st allows you to turn your skills, experience, and future potential into a liquid digital asset. We call it \"Personal IPO\". Explore the step-by-step process in detail.\r\n <\/p>\r\n <div class=\"max-w-5xl mx-auto tokenization-tabs-container\">\r\n <div class=\"tokenization-tabs-nav-panel\">\r\n <h3 class=\"text-xl font-bold mb-4 text-slate-200 px-2\">Tokenization stages:<\/h3>\r\n <nav id=\"tokenization-tabs\" class=\"flex flex-col space-y-2\">\r\n <a href=\"#\" data-tab=\"contribution\" class=\"tab-link active\">\r\n <span class=\"text-xl mr-3\">1\ufe0f\u20e3<\/span> Development and Contribution\r\n <\/a>\r\n <a href=\"#\" data-tab=\"proof\" class=\"tab-link\">\r\n <span class=\"text-xl mr-3\">2\ufe0f\u20e3<\/span> Proof of Contribution\r\n <\/a>\r\n <a href=\"#\" data-tab=\"reputation\" class=\"tab-link\">\r\n <span class=\"text-xl mr-3\">3\ufe0f\u20e3<\/span> Reputation Growth\r\n <\/a>\r\n <a href=\"#\" data-tab=\"token\" class=\"tab-link\">\r\n <span class=\"text-xl mr-3\">4\ufe0f\u20e3<\/span> Personal Token\r\n <\/a>\r\n <a href=\"#\" data-tab=\"ipo\" class=\"tab-link\">\r\n <span class=\"text-xl mr-3\">5\ufe0f\u20e3<\/span> Personal IPO\r\n <\/a>\r\n <\/nav>\r\n <\/div>\r\n <div class=\"tokenization-content-panel\">\r\n <div id=\"tokenization-content\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"ecosystem\" class=\"whitepaper-section py-16 md:py-24 section-bg-primary\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">Tools for Holistic Development<\/h2>\r\n <p class=\"section-subtitle\">\r\n The platform provides a full suite of integrated tools that support you at every stage: from learning new skills to managing complex projects and getting valuable advice from mentors.\r\n <\/p>\r\n <div class=\"ecosystem-grid\">\r\n <div class=\"whitepaper-card text-center\">\r\n <div class=\"text-4xl mb-4\">\ud83c\udf93<\/div>\r\n <h3 class=\"text-xl font-bold mb-2 text-slate-200\">Adaptive LMS<\/h3>\r\n <p class=\"text-slate-400\">A learning system that adapts to you. AI analyzes your learning style and offers personalized courses, tasks, and materials for maximum efficiency.<\/p>\r\n <\/div>\r\n <div class=\"whitepaper-card text-center\">\r\n <div class=\"text-4xl mb-4\">\ud83d\ude80<\/div>\r\n <h3 class=\"text-xl font-bold mb-2 text-slate-200\">Project & Performance Management<\/h3>\r\n <p class=\"text-slate-400\">Visualize projects in AR, get AI predictions, and track your contribution on the blockchain. Your progress becomes transparent and measurable.<\/p>\r\n <\/div>\r\n <div class=\"whitepaper-card text-center\">\r\n <div class=\"text-4xl mb-4\">\ud83e\udd1d<\/div>\r\n <h3 class=\"text-xl font-bold mb-2 text-slate-200\">Network of \u00f6zgeris ustazy<\/h3>\r\n <p class=\"text-slate-400\">\"Masters of Change\" is a unique hybrid mentoring network. AI coaches help with development, while human mentors share wisdom and inspiration.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 md:py-24\" id=\"testimonials\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\r\n What Our <span class=\"neon-title\">Kings Say<\/span>\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n \r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-quote-left text-3xl text-indigo-500 mb-4\"><\/i>\r\n <p class=\"text-default-muted italic mb-6\">\"I used to just write down tasks. Now I have a goal: to level up the Tower of Enlightenment. Motivation increased manifold. This is a real breakthrough in personal growth!\"<\/p>\r\n <div class=\"flex items-center\">\r\n <div class=\"w-10 h-10 bg-teal-500 rounded-full mr-3 flex items-center justify-center text-white font-bold text-lg\">E<\/div>\r\n <div>\r\n <p class=\"font-bold text-default-light\">Edilbek<\/p>\r\n <p class=\"text-sm text-default-muted\">Kingdom Level: 14<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-quote-left text-3xl text-indigo-500 mb-4\"><\/i>\r\n <p class=\"text-default-muted italic mb-6\">\"I use Premium to create courses. Low commission and an audience already engaged in gamification is the perfect combo. Plus, tracking your progress is very convenient.\"<\/p>\r\n <div class=\"flex items-center\">\r\n <div class=\"w-10 h-10 bg-yellow-500 rounded-full mr-3 flex items-center justify-center text-white font-bold text-lg\">J<\/div>\r\n <div>\r\n <p class=\"font-bold text-default-light\">Jamilya D.<\/p>\r\n <p class=\"text-sm text-default-muted\">Rank: Officer<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-quote-left text-3xl text-indigo-500 mb-4\"><\/i>\r\n <p class=\"text-default-muted italic mb-6\">\"I like the social part. Co-op quests with friends are a powerful tool to maintain discipline. The achievement icons look amazing!\"<\/p>\r\n <div class=\"flex items-center\">\r\n <div class=\"w-10 h-10 bg-red-500 rounded-full mr-3 flex items-center justify-center text-white font-bold text-lg\">I<\/div>\r\n <div>\r\n <p class=\"font-bold text-default-light\">Igor K.<\/p>\r\n <p class=\"text-sm text-default-muted\">In Alliance \"Path of Wisdom\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 bg-slate-900\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-3xl font-bold text-center mb-12 text-white\"><span class=\"text-brand-gold\">Success<\/span> Stories<\/h2>\r\n <div class=\"grid md:grid-cols-3 gap-8\">\r\n <div class=\"glass-panel p-6 rounded-2xl\">\r\n <div class=\"flex items-center gap-4 mb-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center\">\ud83c\udfeb<\/div>\r\n <div>\r\n <p class=\"font-bold text-white\">Daniyar, 16 y.o.<\/p>\r\n <p class=\"text-xs text-brand-teal\">Rank: Fighter<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-400 text-sm\">\"I used to just learn Python. Now I upgrade the 'Tower of Knowledge' and get tokens for it. Saved up for a new laptop just by doing homework!\"<\/p>\r\n <\/div>\r\n <div class=\"glass-panel p-6 rounded-2xl border border-brand-gold\/30\">\r\n <div class=\"flex items-center gap-4 mb-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-brand-gold flex items-center justify-center text-slate-900 font-bold\">\ud83d\udcbc<\/div>\r\n <div>\r\n <p class=\"font-bold text-white\">Elena, 34 y.o.<\/p>\r\n <p class=\"text-xs text-brand-teal\">Rank: Officer<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-400 text-sm\">\"I launched a marketing course inside the platform. The system itself found students for me through their quests. My personal token grew by 40%.\"<\/p>\r\n <\/div>\r\n <div class=\"glass-panel p-6 rounded-2xl\">\r\n <div class=\"flex items-center gap-4 mb-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center\">\ud83d\udc74<\/div>\r\n <div>\r\n <p class=\"font-bold text-white\">Boris Petrovich, 65 y.o.<\/p>\r\n <p class=\"text-xs text-brand-teal\">Rank: Mentor<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-400 text-sm\">\"Sharing engineering experience with the youth. I feel needed, chat in the 'Gardens of Connections', and get a supplement to my pension. It's a new life.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 md:py-24 section-bg-primary border-t border-gray-700\" id=\"final-cta\">\r\n <div class=\"container mx-auto px-6 text-center\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6 text-default-light\">\r\n Your Kingdom Awaits.\r\n <\/h2>\r\n <p class=\"text-xl md:text-2xl text-default-muted max-w-3xl mx-auto mb-10\">\r\n Stop just dreaming about progress. Start seeing and measuring it every day. It's time to build your kingdom.\r\n <\/p>\r\n <button class=\"neon-cta-button elementor-popup-button inline-flex items-center justify-center text-2xl font-bold text-white py-4 px-12 rounded-xl hover:shadow-2xl hover:shadow-teal-500\/50\" \r\n data-elementor-popup-id=\"13705\">\r\n <span>I Am Starting to Build! <i class=\"fa-solid fa-fist-raised ml-3\"><\/i><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"border-t border-gray-700 py-10\">\r\n <div class=\"container mx-auto px-6 text-center\">\r\n <p class=\"text-3xl font-extrabold mb-4 footer-logo\">Hobbi.st<\/p>\r\n <div class=\"flex justify-center space-x-6 mb-6 text-gray-300\">\r\n <a href=\"#hero\" class=\"hover:text-teal-500 transition-colors\">\u0414\u043e\u043c\u043e\u0439<\/a>\r\n <a href=\"#inequality\" class=\"hover:text-teal-500 transition-colors\">Inequality<\/a>\r\n <a href=\"#how-it-works\" class=\"hover:text-teal-500 transition-colors\">Mechanics<\/a>\r\n <a href=\"#philosophy\" class=\"hover:text-teal-500 transition-colors\">Philosophy<\/a>\r\n <a href=\"#kingdom\" class=\"hover:text-teal-500 transition-colors\">Kingdom<\/a>\r\n <a href=\"#engine\" class=\"hover:text-teal-500 transition-colors\">Technology<\/a>\r\n <a href=\"#tokenization\" class=\"hover:text-teal-500 transition-colors\">Tokenization<\/a>\r\n <a href=\"#ecosystem\" class=\"hover:text-teal-500 transition-colors\">Ecosystem<\/a>\r\n <a href=\"#\" class=\"hover:text-teal-500 transition-colors\">Support<\/a>\r\n <\/div>\r\n <div class=\"flex justify-center space-x-6 mb-6\">\r\n <a href=\"#\" class=\"text-gray-300 hover:text-indigo-500 transition-colors\"><i class=\"fab fa-telegram-plane text-2xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"text-gray-300 hover:text-indigo-500 transition-colors\"><i class=\"fab fa-vk text-2xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"text-gray-300 hover:text-indigo-500 transition-colors\"><i class=\"fab fa-instagram text-2xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"text-gray-300 hover:text-brand-teal transition-colors\"><i class=\"fa-brands fa-discord text-2xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"text-gray-300 hover:text-brand-teal transition-colors\"><i class=\"fa-brands fa-twitter text-2xl\"><\/i><\/a>\r\n <\/div>\r\n <p class=\"text-sm text-gray-400 opacity-70\">© 2025 hobbi.st. All rights reserved. Developed with love.<\/p>\r\n <p class=\"text-slate-600 text-sm mt-2\">© 2025 Univercity of Happiness. Economy of Love.<\/p>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n const commonOptions = {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n cutout: '70%',\r\n plugins: {\r\n legend: { display: false },\r\n tooltip: { \r\n padding: 8, \r\n backgroundColor: '#1e293b',\r\n titleColor: '#f8fafc',\r\n bodyColor: '#cbd5e1'\r\n }\r\n }\r\n };\r\n\r\n function initInequalityCharts() {\r\n new Chart(document.getElementById('incomeChart'), {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Bottom 50%', 'Middle 40%', 'Top 10%'],\r\n datasets: [{\r\n data: [8, 38, 53],\r\n backgroundColor: ['#3498db', '#9b59b6', '#e74c3c'],\r\n borderWidth: 0\r\n }]\r\n },\r\n options: commonOptions\r\n });\r\n\r\n new Chart(document.getElementById('wealthChart'), {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Bottom 50%', 'Middle 40%', 'Top 10%'],\r\n datasets: [{\r\n data: [2, 23, 75],\r\n backgroundColor: ['#3498db', '#9b59b6', '#e74c3c'],\r\n borderWidth: 0\r\n }]\r\n },\r\n options: commonOptions\r\n });\r\n\r\n const hobbistColors = ['#10b981', '#1f2937'];\r\n const hobbistLabels = ['Hobbists (90%)', 'Others (10%)'];\r\n\r\n new Chart(document.getElementById('hobbistIncomeChart'), {\r\n type: 'doughnut',\r\n data: {\r\n labels: hobbistLabels,\r\n datasets: [{\r\n data: [80, 20],\r\n backgroundColor: hobbistColors,\r\n borderWidth: 0\r\n }]\r\n },\r\n options: commonOptions\r\n });\r\n\r\n new Chart(document.getElementById('hobbistWealthChart'), {\r\n type: 'doughnut',\r\n data: {\r\n labels: hobbistLabels,\r\n datasets: [{\r\n data: [80, 20],\r\n backgroundColor: hobbistColors,\r\n borderWidth: 0\r\n }]\r\n },\r\n options: commonOptions\r\n });\r\n }\r\n\r\n const themeToggle = document.getElementById('theme-toggle');\r\n const themeIcon = document.getElementById('theme-icon');\r\n const body = document.body;\r\n\r\n const savedTheme = localStorage.getItem('theme');\r\n if (savedTheme === 'light') {\r\n body.classList.add('light-mode');\r\n themeIcon.className = 'fa-solid fa-sun text-xl';\r\n }\r\n\r\n themeToggle.addEventListener('click', () => {\r\n body.classList.toggle('light-mode');\r\n const isLight = body.classList.contains('light-mode');\r\n themeIcon.className = isLight ? 'fa-solid fa-sun text-xl' : 'fa-solid fa-moon text-xl';\r\n localStorage.setItem('theme', isLight ? 'light' : 'dark');\r\n });\r\n\r\n const loginToggle = document.getElementById('login-toggle');\r\n loginToggle.addEventListener('click', () => {\r\n window.location.href = 'https:\/\/hobbi.st\/hero';\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n initInequalityCharts();\r\n \r\n function openElementorPopup(popupId) {\r\n if (typeof elementorFrontend !== 'undefined' && elementorFrontend.modules && elementorFrontend.modules.popup) {\r\n elementorFrontend.modules.popup.showPopup({ id: popupId });\r\n return true;\r\n }\r\n if (typeof elementorFrontend !== 'undefined' && elementorFrontend.documentsManager) {\r\n const popup = elementorFrontend.documentsManager.documents[popupId];\r\n if (popup) { popup.showModal(); return true; }\r\n }\r\n if (typeof ElementorPro !== 'undefined' && ElementorPro.modules && ElementorPro.modules.popup) {\r\n ElementorPro.modules.popup.showPopup({ id: parseInt(popupId) });\r\n return true;\r\n }\r\n if (typeof jQuery !== 'undefined') {\r\n try { jQuery(document).trigger('elementor\/popup\/show', [{ id: popupId }]); return true; } catch (e) { }\r\n }\r\n if (window.elementorPro && window.elementorPro.modules && window.elementorPro.modules.popup) {\r\n window.elementorPro.modules.popup.showPopup({ id: parseInt(popupId) });\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n function openPopupWithRetry(popupId, maxAttempts = 20, delay = 100) {\r\n let attempts = 0;\r\n function tryOpen() {\r\n attempts++;\r\n if (openElementorPopup(popupId)) {\r\n return true;\r\n } else if (attempts < maxAttempts) {\r\n setTimeout(tryOpen, delay);\r\n } else {\r\n alert('Registration form is temporarily unavailable. Please try again later or refresh the page.');\r\n return false;\r\n }\r\n }\r\n return tryOpen();\r\n }\r\n\r\n function handlePopupClick(event) {\r\n const trigger = event.target.closest('[data-elementor-popup-id]');\r\n if (trigger) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const popupId = trigger.getAttribute('data-elementor-popup-id');\r\n openPopupWithRetry(popupId);\r\n }\r\n }\r\n\r\n document.addEventListener('click', handlePopupClick);\r\n \r\n setTimeout(() => {\r\n const popupButtons = document.querySelectorAll('[data-elementor-popup-id]');\r\n popupButtons.forEach(button => {\r\n button.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n const popupId = this.getAttribute('data-elementor-popup-id');\r\n openPopupWithRetry(popupId);\r\n });\r\n });\r\n }, 1000);\r\n });\r\n\r\n let scrollTimer;\r\n let hideTimer;\r\n const hideDelay = 3000; \r\n \r\n function hideAllButtons() {\r\n const themeButton = document.getElementById('theme-toggle');\r\n const loginButton = document.getElementById('login-toggle');\r\n const urgentButton = document.getElementById('urgent-toggle');\r\n const buttons = [themeButton, loginButton, urgentButton];\r\n buttons.forEach(btn => { if (btn) btn.classList.add('hidden'); });\r\n }\r\n \r\n function showAllButtons() {\r\n const themeButton = document.getElementById('theme-toggle');\r\n const loginButton = document.getElementById('login-toggle');\r\n const urgentButton = document.getElementById('urgent-toggle');\r\n const buttons = [themeButton, loginButton, urgentButton];\r\n buttons.forEach(btn => { if (btn) btn.classList.remove('hidden'); });\r\n }\r\n\r\n window.addEventListener('scroll', function() {\r\n showAllButtons();\r\n clearTimeout(hideTimer);\r\n hideTimer = setTimeout(() => { hideAllButtons(); }, hideDelay);\r\n \r\n clearTimeout(scrollTimer);\r\n const buttons = [document.getElementById('theme-toggle'), document.getElementById('login-toggle'), document.getElementById('urgent-toggle')];\r\n buttons.forEach(btn => { if (btn) btn.style.opacity = \"0.5\"; });\r\n \r\n scrollTimer = setTimeout(() => {\r\n buttons.forEach(btn => { if (btn) btn.style.opacity = \"1\"; });\r\n }, 300);\r\n });\r\n\r\n document.addEventListener('mousemove', function() {\r\n showAllButtons();\r\n clearTimeout(hideTimer);\r\n hideTimer = setTimeout(() => { hideAllButtons(); }, hideDelay);\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n const href = this.getAttribute('href');\r\n if (href.length > 1 && href !== '#') {\r\n e.preventDefault();\r\n const targetElement = document.querySelector(href);\r\n if (targetElement) {\r\n window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' });\r\n }\r\n }\r\n });\r\n });\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n initWhitepaper();\r\n });\r\n\r\n function initWhitepaper() {\r\n const economyData = {\r\n love: {\r\n label: 'Economy of Love',\r\n values: [100, 70, 95, 20], \r\n description: 'Driver: Compassion and well-being. Mechanism: Decentralized currencies (potential tokens). Result: Collective prosperity. Attitude towards deficit: Creates abundance through cooperation.'\r\n },\r\n passion: {\r\n label: 'Passion Economy',\r\n values: [75, 60, 85, 30], \r\n description: 'Driver: Individual skill. Mechanism: Monetization of individuality. Result: Personal monetization. Attitude towards deficit: Bypasses deficit through nicheness.'\r\n },\r\n gift: {\r\n label: 'Gift Economy',\r\n values: [50, 90, 80, 10], \r\n description: 'Driver: Reciprocity and social connection. Mechanism: Non-monetary exchange. Result: Community building. Attitude towards deficit: Based on an abundance mentality.'\r\n },\r\n market: {\r\n label: 'Market Economy',\r\n values: [25, 80, 75, 85], \r\n description: 'Driver: Profit and price. Mechanism: Monetary exchange. Result: Wealth accumulation. Attitude towards deficit: Exploits and creates deficit.'\r\n }\r\n };\r\n\r\n const ctx = document.getElementById('economyChart');\r\n let economyChart;\r\n \r\n if (ctx) {\r\n function createEconomyChart(economyKey) {\r\n const data = economyData[economyKey];\r\n const descriptionEl = document.getElementById('economy-description');\r\n if (descriptionEl) {\r\n descriptionEl.textContent = data.description;\r\n }\r\n\r\n if (economyChart) {\r\n economyChart.data.datasets[0].data = data.values;\r\n economyChart.update();\r\n } else {\r\n economyChart = new Chart(ctx, {\r\n type: 'bar',\r\n data: {\r\n labels: ['Value Driver', 'Exchange Mechanism', 'Key Result', 'Attitude towards Deficit'],\r\n datasets: [{\r\n label: data.label,\r\n data: data.values,\r\n backgroundColor: '#14B8A6',\r\n borderColor: '#0F766E',\r\n borderWidth: 1,\r\n borderRadius: 4\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n y: { beginAtZero: true, max: 110, display: false },\r\n x: { grid: { display: false } }\r\n },\r\n plugins: { legend: { display: false } }\r\n }\r\n });\r\n }\r\n }\r\n\r\n const economyButtons = document.getElementById('economy-buttons');\r\n if (economyButtons) {\r\n economyButtons.addEventListener('click', function(e) {\r\n if (e.target.tagName === 'BUTTON') {\r\n const economyKey = e.target.dataset.economy;\r\n document.querySelectorAll('#economy-buttons .pill-button').forEach(btn => btn.classList.remove('active'));\r\n e.target.classList.add('active');\r\n createEconomyChart(economyKey);\r\n }\r\n });\r\n }\r\n\r\n createEconomyChart('love');\r\n }\r\n\r\n const engineContentData = {\r\n gamification: {\r\n title: 'Gamification for deep engagement',\r\n text: 'We reject superficial rewards. Our gamification is based on the psychology of intrinsic motivation: the pursuit of mastery, autonomy, and purpose. The \"game\" is the development process itself, not a race for points. This ensures long-term engagement and real skill development.',\r\n icon: '\ud83c\udfae'\r\n },\r\n ar: {\r\n title: 'AR for immersive experience and contribution',\r\n text: 'Augmented reality turns learning into a lived experience and lets you see the result of your contribution in the real world. Imagine pointing your camera at a park and seeing how it transformed thanks to your project \u2014 this is AR in hobbi.st. It\\'s not a simulation, but a feedback loop with reality.',\r\n icon: '\ud83d\udd2e'\r\n },\r\n ai: {\r\n title: 'AI as a partner for cognitive growth',\r\n text: 'Our AI is not just an information provider, but a \"Socratic mentor\". It does not give ready-made answers but asks the right questions, pushing you towards critical thinking and creative solutions. We use AI to make you smarter, not to think for you.',\r\n icon: '\ud83e\udde0'\r\n },\r\n blockchain: {\r\n title: 'Blockchain for transparency and value',\r\n text: 'Blockchain ensures the creation of verifiable, tamper-proof digital credentials for your skills and achievements. Your contribution, from a completed course to an implemented project, is recorded in an immutable ledger, forming your reputation and value in the ecosystem.',\r\n icon: '\ud83d\udd17'\r\n }\r\n };\r\n \r\n const engineContentContainer = document.getElementById('engine-content');\r\n const engineTabsContainer = document.getElementById('engine-tabs');\r\n\r\n function updateEngineContent(tabKey) {\r\n const content = engineContentData[tabKey];\r\n if (engineContentContainer && content) {\r\n engineContentContainer.innerHTML = `\r\n <h3 style=\"font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1rem;\">${content.title}<\/h3>\r\n <p style=\"color: #cbd5e1; font-size: 1rem; line-height: 1.5rem;\">${content.text}<\/p>\r\n `;\r\n document.querySelectorAll('#engine-tabs .tab-link').forEach(link => {\r\n link.classList.remove('active');\r\n if (link.dataset.tab === tabKey) { link.classList.add('active'); }\r\n });\r\n }\r\n }\r\n \r\n if (engineTabsContainer) {\r\n engineTabsContainer.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const link = e.target.closest('.tab-link');\r\n if (link) { updateEngineContent(link.dataset.tab); }\r\n });\r\n }\r\n\r\n updateEngineContent('gamification');\r\n\r\n const tokenizationContentData = {\r\n contribution: {\r\n title: 'Stage 1: Development and Contribution',\r\n text: 'At this stage, you actively participate in platform life: learn new skills, work on projects, help other members. Every action you take to create value for the community is recorded and serves as the foundation for your future potential. This is the most important part where your labor and passion become tangible capital.'\r\n },\r\n proof: {\r\n title: 'Stage 2: Proof of Contribution',\r\n text: 'The hobbi.st system, using AI and AR technologies, captures and verifies your contribution. This \"Proof of Contribution\" is a digital, immutable artifact on the blockchain that confirms your participation and achievements. It is not just a certificate, but a verifiable trail of your useful activity.'\r\n },\r\n reputation: {\r\n title: 'Stage 3: Reputation Growth',\r\n text: 'Your \"Proofs of Contribution\" automatically build your reputation on the network. Reputation is a dynamic indicator of your mastery, reliability, and significance to the community. It is your social capital that grows with each new contribution and distinguishes you as a valuable ecosystem member.'\r\n },\r\n token: {\r\n title: 'Stage 4: Personal Token Issuance (PUIT)',\r\n text: 'Based on your reputation, you earn the right to issue your own digital asset \u2014 the Personal Unique Individual Talent Token (PUIT). It is not just a coin, but a digital representation of your potential. You decide what this token provides: access to your exclusive materials, consultations, or future projects.'\r\n },\r\n ipo: {\r\n title: 'Stage 5: Personal IPO',\r\n text: 'Now your community can invest in you by purchasing your PUITs. We call this process \"Personal IPO\". It allows you to get support to realize your ideas and projects, and your supporters \u2014 to share in your future success. This is a mutually beneficial model based on trust, potential, and collective growth.'\r\n }\r\n };\r\n \r\n const tokenizationContentContainer = document.getElementById('tokenization-content');\r\n const tokenizationTabsContainer = document.getElementById('tokenization-tabs');\r\n\r\n function updateTokenizationContent(tabKey) {\r\n const content = tokenizationContentData[tabKey];\r\n if (tokenizationContentContainer && content) {\r\n tokenizationContentContainer.innerHTML = `\r\n <h3 style=\"font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1rem;\">${content.title}<\/h3>\r\n <p style=\"color: #cbd5e1; font-size: 1rem; line-height: 1.5rem;\">${content.text}<\/p>\r\n `;\r\n document.querySelectorAll('#tokenization-tabs .tab-link').forEach(link => {\r\n link.classList.remove('active');\r\n if (link.dataset.tab === tabKey) { link.classList.add('active'); }\r\n });\r\n }\r\n }\r\n \r\n if (tokenizationTabsContainer) {\r\n tokenizationTabsContainer.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const link = e.target.closest('.tab-link');\r\n if (link) { updateTokenizationContent(link.dataset.tab); }\r\n });\r\n }\r\n\r\n updateTokenizationContent('contribution');\r\n\r\n const daoChartCtx = document.getElementById('daoChart');\r\n const reputationSlider = document.getElementById('reputation-slider');\r\n const daoExplanation = document.getElementById('dao-explanation');\r\n const reputationValueSpan = document.getElementById('reputation-value');\r\n let daoChart;\r\n \r\n if (daoChartCtx) {\r\n const daoBaseData = {\r\n labels: ['Large Investors', 'Active Members', 'Small Holders'],\r\n tokenHoldings: [60, 25, 15],\r\n reputationScores: [10, 70, 20]\r\n };\r\n\r\n const chartColors = {\r\n whales: 'rgba(245, 158, 11, 0.8)',\r\n active: 'rgba(20, 184, 166, 0.8)',\r\n small: 'rgba(107, 114, 128, 0.8)'\r\n };\r\n\r\n function updateDaoChart(reputationWeight) {\r\n const weight = reputationWeight \/ 100;\r\n \r\n const whalePower = (daoBaseData.tokenHoldings[0] * (1 - weight)) + (daoBaseData.reputationScores[0] * weight);\r\n const activePower = (daoBaseData.tokenHoldings[1] * (1 - weight)) + (daoBaseData.reputationScores[1] * weight);\r\n const smallPower = (daoBaseData.tokenHoldings[2] * (1 - weight)) + (daoBaseData.reputationScores[2] * weight);\r\n\r\n const total = whalePower + activePower + smallPower;\r\n\r\n const chartData = [\r\n (whalePower \/ total) * 100,\r\n (activePower \/ total) * 100,\r\n (smallPower \/ total) * 100\r\n ];\r\n\r\n if (daoChart) {\r\n daoChart.data.datasets[0].data = chartData;\r\n daoChart.update();\r\n } else {\r\n daoChart = new Chart(daoChartCtx, {\r\n type: 'doughnut',\r\n data: {\r\n labels: daoBaseData.labels,\r\n datasets: [{\r\n data: chartData,\r\n backgroundColor: [chartColors.whales, chartColors.active, chartColors.small],\r\n borderColor: ['rgb(245, 158, 11)', 'rgb(20, 184, 166)', 'rgb(107, 114, 128)'],\r\n borderWidth: 1\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n cutout: '75%',\r\n plugins: {\r\n legend: { position: 'bottom', labels: { font: { size: 14 }, color: '#e2e8f0' } },\r\n title: { display: true, text: 'Voting Power Distribution in DAO', font: { size: 18, weight: 'bold' }, color: '#e2e8f0' },\r\n tooltip: {\r\n callbacks: {\r\n label: function(context) {\r\n const label = context.label || '';\r\n const value = context.parsed;\r\n return `${label}: ${value.toFixed(1)}%`;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n \r\n let explanationText = '';\r\n if (reputationWeight < 20) {\r\n explanationText = 'With a reputation weight of ' + reputationWeight + '%, voting power relies almost entirely on token holdings. This creates a risk of power concentration among large investors.';\r\n } else if (reputationWeight > 80) {\r\n explanationText = 'With a reputation weight of ' + reputationWeight + '%, voting power is determined by contribution and activity. This encourages participation and protects against plutocracy.';\r\n } else {\r\n explanationText = 'The hybrid model with a reputation weight of ' + reputationWeight + '% balances financial input and actual activity, creating a fair and sustainable governance system.';\r\n }\r\n \r\n if (daoExplanation) daoExplanation.textContent = explanationText;\r\n if (reputationValueSpan) reputationValueSpan.textContent = `${reputationWeight}%`;\r\n }\r\n\r\n if (reputationSlider) {\r\n reputationSlider.addEventListener('input', (e) => {\r\n updateDaoChart(parseInt(e.target.value, 10));\r\n });\r\n }\r\n\r\n updateDaoChart(50);\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>hobbi.st: Money for Humanity | Build Your Kingdom | Uni-ver-city of Happiness hobbi.st HOME INEQUALITY MECHANICS KINGDOM PHILOSOPHY TECHNOLOGY TOKENIZATION ECOSYSTEM Start Game \u20bf \u2665 XP Uni-ver-city of Happiness is open Money for all people hobbi.st 2030 Turn Life into a Game, and Actions into Capital Forget about boring lessons and courses. hobbist turns the […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":-8,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-13650","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/comments?post=13650"}],"version-history":[{"count":5,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13650\/revisions"}],"predecessor-version":[{"id":16669,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13650\/revisions\/16669"}],"wp:attachment":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/media?parent=13650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n hobbi.st: Money for Humanity | Build Your Kingdom | Uni-ver-city of Happiness<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@800;900&family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tomorrow:wght@700;900&display=swap\" rel=\"stylesheet\">\r\n \r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n colors: {\r\n brand: {\r\n dark: '#0f172a',\r\n gold: '#fbbf24',\r\n teal: '#14b8a6',\r\n accent: '#f59e0b'\r\n }\r\n },\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n display: ['Montserrat', 'sans-serif'],\r\n mono: ['Tomorrow', 'monospace'],\r\n },\r\n animation: {\r\n 'float': 'float 6s ease-in-out infinite',\r\n 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',\r\n },\r\n keyframes: {\r\n float: {\r\n '0%, 100%': { transform: 'translateY(0)' },\r\n '50%': { transform: 'translateY(-20px)' },\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; transition: background-color 0.3s, color 0.3s; margin: 0; padding: 0; width: 100vw; overflow-x: hidden; }\r\n body { background-color: #0d1117; color: #e2e8f0; }\r\n .section-bg-primary { background-color: #10141c; }\r\n .text-default-light { color: #e2e8f0; }\r\n .text-default-muted { color: #94a3b8; }\r\n .card-bg { background-color: #1a202c; border: 1px solid #3b82f630; box-shadow: 0 0 15px rgba(59, 130, 246, 0.2); }\r\n body.light-mode { background-color: #f7f7f7; color: #1a202c; }\r\n body.light-mode .section-bg-primary { background-color: #ffffff; }\r\n body.light-mode .text-default-light { color: #1a202c; }\r\n body.light-mode .text-default-muted { color: #64748b; }\r\n body.light-mode .card-bg { background-color: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }\r\n body.light-mode .card-bg:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }\r\n h1, h2, h3 { font-family: 'Montserrat', sans-serif; }\r\n .font-tomorrow { font-family: 'Tomorrow', sans-serif; }\r\n .neon-title { background-image: linear-gradient(90deg, #10b981, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }\r\n body.light-mode .neon-title { text-shadow: none; }\r\n .card-bg { transition: all 0.3s ease; }\r\n .card-bg:hover { transform: translateY(-4px); }\r\n .neon-cta-button { background: linear-gradient(90deg, #10b981, #3b82f6); box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; }\r\n .neon-cta-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: rgba(255, 255, 255, 0.1); transition: all 0.6s; border-radius: 50%; transform: translate(-50%, -50%) scale(0); z-index: 0; }\r\n .neon-cta-button:hover::after { transform: translate(-50%, -50%) scale(1); opacity: 0; }\r\n .neon-cta-button span { position: relative; z-index: 2; }\r\n @keyframes typing { from { width: 0; } to { width: 100%; } }\r\n @keyframes blink-caret-dark { from, to { border-color: transparent } 50% { border-color: #3b82f6; } }\r\n @keyframes blink-caret-light { from, to { border-color: transparent } 50% { border-color: #1a202c; } }\r\n .typing-text { overflow: hidden; border-right: .15em solid #3b82f6; white-space: nowrap; margin: 0 auto; letter-spacing: .1em; animation: typing 3.5s steps(40, end) forwards, blink-caret-dark .75s step-end infinite; max-width: 100%; }\r\n body.light-mode .typing-text { border-right-color: #1a202c; animation: typing 3.5s steps(40, end) forwards, blink-caret-light .75s step-end infinite; }\r\n @media (max-width: 640px) { \r\n .typing-text { white-space: normal; border-right: none; animation: none !important; width: auto; font-size: 1.5rem !important; margin-top: 0.5rem; }\r\n .hero-title { font-size: 2.5rem !important; }\r\n #theme-toggle { top: 5.5rem !important; right: 1rem; width: 40px; height: 40px; }\r\n #login-toggle { top: 10rem !important; right: 1rem; width: 40px; height: 40px; }\r\n #urgent-toggle { top: 14.5rem !important; right: 1rem; width: 40px; height: 40px; }\r\n }\r\n .pricing-card { position: relative; transition: all 0.3s; }\r\n .pricing-card.featured { border-color: #10b981 !important; box-shadow: 0 0 30px rgba(16, 185, 129, 0.4); transform: scale(1.02); z-index: 10; }\r\n body.light-mode .pricing-card.featured { box-shadow: 0 0 30px rgba(16, 185, 129, 0.2); border-color: #059669 !important; }\r\n .footer-logo { background-image: linear-gradient(45deg, #f59e0b, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }\r\n .floating-button { position: fixed; width: 48px; height: 48px; cursor: pointer; z-index: 50; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); opacity: 1; visibility: visible; transform: translateY(0); }\r\n .floating-button.hidden { opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; }\r\n #theme-toggle { top: 5.5rem; right: 1.5rem; background-color: var(--toggle-bg-color); border: 2px solid var(--toggle-border-color); color: var(--toggle-icon-color); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; }\r\n #login-toggle { top: 9.5rem; right: 1.5rem; background: linear-gradient(135deg, #8b5cf6, #3b82f6); border: 2px solid #8b5cf6; color: white; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; }\r\n #login-toggle:hover { background: linear-gradient(135deg, #7c3aed, #2563eb); transform: scale(1.1); box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); }\r\n #urgent-toggle { top: 13.5rem; right: 1.5rem; background: linear-gradient(135deg, #dc2626, #f97316, #f59e0b); border: 2px solid #dc2626; color: white; transition: all 0.3s ease; animation: pulse-fire 1.5s infinite; box-shadow: 0 4px 20px rgba(220, 38, 38, 0.6); }\r\n #urgent-toggle:hover { background: linear-gradient(135deg, #b91c1c, #ea580c, #d97706); transform: scale(1.15); box-shadow: 0 0 30px rgba(220, 38, 38, 0.8); animation: pulse-fire-hover 0.8s infinite; }\r\n @keyframes pulse-fire { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); transform: scale(1.05); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); transform: scale(1); } }\r\n @keyframes pulse-fire-hover { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.9); transform: scale(1.15); } 50% { box-shadow: 0 0 0 15px rgba(220, 38, 38, 0); transform: scale(1.2); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); transform: scale(1.15); } }\r\n body { --toggle-bg-color: #1a202c; --toggle-border-color: #3b82f6; --toggle-icon-color: #fcd34d; }\r\n body.light-mode { --toggle-bg-color: #ffffff; --toggle-border-color: #cbd5e1; --toggle-icon-color: #3b82f6; }\r\n .elementor-popup-button { cursor: pointer; transition: all 0.3s ease; }\r\n .elementor-popup-button:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(59, 130, 246, 0.6) !important; }\r\n .glass-panel { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); }\r\n .text-gradient-gold { background: linear-gradient(135deg, #fbbf24, #d97706); -webkit-background-clip: text; background-clip: text; color: transparent; }\r\n .text-gradient-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); -webkit-background-clip: text; background-clip: text; color: transparent; }\r\n .neon-glow { box-shadow: 0 0 20px rgba(20, 184, 166, 0.3); }\r\n .gold-glow { box-shadow: 0 0 25px rgba(251, 191, 36, 0.2); }\r\n input[type=range] { -webkit-appearance: none; background: transparent; }\r\n input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%; background: #fbbf24; cursor: pointer; margin-top: -10px; box-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }\r\n input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: #334155; border-radius: 2px; }\r\n .hero-bg { background-image: radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.15) 0%, rgba(15, 23, 42, 1) 70%); width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; overflow-x: hidden; }\r\n .whitepaper-section { font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; color: #1F2937; }\r\n .whitepaper-section .section-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1rem; text-align: center; }\r\n .whitepaper-section .section-subtitle { font-size: 1.125rem; line-height: 1.75rem; color: #94a3b8; margin-bottom: 3rem; text-align: center; max-width: 48rem; margin-left: auto; margin-right: auto; }\r\n .whitepaper-section .whitepaper-card { background-color: #1a202c; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: box-shadow 0.3s ease-in-out; margin-bottom: 2rem; border: 1px solid #3b82f630; }\r\n .whitepaper-section .whitepaper-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }\r\n .whitepaper-section .pill-button { padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: 9999px; cursor: pointer; transition: all 0.3s ease-in-out; border: 2px solid transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }\r\n .whitepaper-section .pill-button.active { background-color: #0D9488; color: #FFFFFF; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-color: #0D9488; }\r\n .whitepaper-section .pill-button:not(.active) { background-color: #334155; color: #e2e8f0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }\r\n .whitepaper-section .pill-button:not(.active):hover { background-color: #475569; border-color: #99F6E4; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }\r\n .whitepaper-section .engine-tabs-container, .whitepaper-section .tokenization-tabs-container { display: flex; flex-direction: column; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden; background-color: #334155; height: auto; min-height: 400px; }\r\n .whitepaper-section .engine-tabs-nav-panel, .whitepaper-section .tokenization-tabs-nav-panel { width: 100%; background-color: #1e293b; padding: 1rem; flex-shrink: 0; overflow-x: auto; }\r\n .whitepaper-section .engine-content-panel, .whitepaper-section .tokenization-content-panel { flex: 1 1 0%; padding: 1rem; overflow-y: auto; }\r\n .whitepaper-section .tab-link { display: flex; align-items: center; padding: 0.75rem; border-radius: 0.5rem; font-weight: 500; color: #cbd5e1; transition: all 0.2s ease-in-out; border: 2px solid transparent; justify-content: flex-start; text-align: left; cursor: pointer; margin-bottom: 0.5rem; }\r\n .whitepaper-section .tab-link.active { background-color: #0f766e; color: #FFFFFF; font-weight: 600; border-color: #14b8a6; }\r\n .whitepaper-section .tab-link:hover { background-color: #475569; }\r\n .whitepaper-section .chart-container { position: relative; width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; height: 300px; max-height: 40vh; }\r\n .whitepaper-section .ecosystem-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }\r\n .whitepaper-section #reputation-slider { width: 100%; height: 8px; border-radius: 5px; background: #475569; outline: none; opacity: 0.7; transition: opacity .2s; }\r\n .whitepaper-section #reputation-slider:hover { opacity: 1; }\r\n .whitepaper-section #reputation-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #0D9488; cursor: pointer; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }\r\n .whitepaper-section #reputation-slider::-moz-range-thumb { width: 20px; height: 20px; background: #0D9488; cursor: pointer; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }\r\n @media (min-width: 768px) { .whitepaper-section .section-title { font-size: 2.25rem; line-height: 2.5rem; } .whitepaper-section .section-subtitle { font-size: 1.25rem; line-height: 1.75rem; } .whitepaper-section .engine-tabs-container, .whitepaper-section .tokenization-tabs-container { flex-direction: row; } .whitepaper-section .engine-tabs-nav-panel, .whitepaper-section .tokenization-tabs-nav-panel { width: 33.333333%; overflow-y: auto; } .whitepaper-section .engine-content-panel, .whitepaper-section .tokenization-content-panel { padding: 2rem; } .whitepaper-section .ecosystem-grid { grid-template-columns: repeat(3, 1fr); } }\r\n @media (max-width: 767px) { .whitepaper-section #engine-tabs, .whitepaper-section #tokenization-tabs { display: flex; flex-direction: row; overflow-x: auto; padding-bottom: 0.5rem; } .whitepaper-section .tab-link { flex-shrink: 0; margin-right: 0.5rem; margin-bottom: 0; } }\r\n :root { --inequality-bottom-color: #3498db; --inequality-middle-color: #9b59b6; --inequality-top-color: #e74c3c; --hobbist-main: #10b981; --hobbist-secondary: #3b82f6; }\r\n .inequality-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }\r\n .inequality-chart-card { background: #1a202c; border-radius: 12px; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; flex-direction: column; min-width: 0; border: 1px solid #3b82f630; }\r\n .inequality-chart-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }\r\n .inequality-chart-header h2 { font-size: 0.9rem; font-weight: 700; color: #e2e8f0; }\r\n .inequality-canvas-wrapper { position: relative; height: 200px; width: 100%; }\r\n .inequality-custom-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; background: #1a202c; padding: 12px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #e2e8f0; }\r\n .inequality-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #e2e8f0; }\r\n .inequality-dot { width: 8px; height: 8px; border-radius: 50%; }\r\n .inequality-hero-card { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: white; padding: 16px 20px; border-radius: 12px; margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; box-shadow: 0 4px 12px -2px rgba(0,0,0,0.1); }\r\n .hobbist-hero { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); border: 1px solid rgba(16, 185, 129, 0.3); }\r\n .inequality-stat-box { border-left: 3px solid var(--inequality-top-color); padding-left: 12px; }\r\n .hobbist-hero .inequality-stat-box { border-color: var(--hobbist-main); }\r\n .inequality-stat-box h3 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; margin-bottom: 2px; }\r\n .inequality-stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }\r\n .inequality-manifesto { grid-column: span 2; font-size: 0.8rem; background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; margin-top: 8px; line-height: 1.5; }\r\n .inequality-manifesto strong { display: block; color: var(--hobbist-main); margin-bottom: 4px; }\r\n .inequality-section-divider { margin: 40px 0 20px; border-top: 2px dashed #e2e8f0; position: relative; }\r\n .inequality-section-title { text-align: center; margin-bottom: 16px; font-size: 1.5rem; color: var(--hobbist-main); }\r\n @media (max-width: 640px) { .inequality-hero-card { padding: 12px; gap: 10px; } .inequality-stat-value { font-size: 1.1rem; } .inequality-canvas-wrapper { height: 150px; } .inequality-manifesto { font-size: 0.75rem; } .inequality-charts-grid { grid-template-columns: 1fr; } }\r\n html, body { max-width: 100%; overflow-x: hidden; }\r\n header#hero { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding-left: 0; padding-right: 0; }\r\n .hero-bg > .container { width: 100%; max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }\r\n section { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }\r\n section > .container { width: 100%; max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }\r\n @media (min-width: 640px) { .hero-bg > .container, section > .container { padding-left: 2rem; padding-right: 2rem; } }\r\n @media (min-width: 1024px) { .hero-bg > .container, section > .container { padding-left: 3rem; padding-right: 3rem; } }\r\n @media (max-width: 640px) { #theme-toggle, #login-toggle, #urgent-toggle { margin-bottom: 0.75rem !important; } }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n \r\n <button id=\"theme-toggle\" class=\"floating-button hover:scale-105\">\r\n <i id=\"theme-icon\" class=\"fa-solid fa-moon text-xl\"><\/i>\r\n <\/button>\r\n \r\n <button id=\"login-toggle\" class=\"floating-button hover:scale-105\">\r\n <i class=\"fa-solid fa-right-to-bracket text-lg\"><\/i>\r\n <\/button>\r\n \r\n <button id=\"urgent-toggle\" \r\n class=\"floating-button elementor-popup-trigger\"\r\n data-elementor-popup-id=\"13735\">\r\n <i class=\"fa-solid fa-bolt text-lg\"><\/i>\r\n <\/button>\r\n\r\n <nav class=\"fixed w-full z-50 glass-panel border-b-0 border-white\/5\" style=\"top: 0; width: 100vw;\">\r\n <div class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"fa-solid fa-crown text-brand-gold text-2xl animate-pulse-slow\"><\/i>\r\n <span class=\"font-mono text-2xl font-bold tracking-tighter\">hobbi<span class=\"text-brand-teal\">.st<\/span><\/span>\r\n <\/div>\r\n <div class=\"hidden md:flex gap-8 text-sm font-semibold tracking-wide text-slate-300\">\r\n <a href=\"#hero\" class=\"hover:text-brand-teal transition\">\u0414\u041e\u041c\u041e\u0419<\/a>\r\n <a href=\"#inequality\" class=\"hover:text-brand-teal transition\">INEQUALITY<\/a>\r\n <a href=\"#how-it-works\" class=\"hover:text-brand-teal transition\">MECHANICS<\/a>\r\n <a href=\"#kingdom\" class=\"hover:text-brand-teal transition\">KINGDOM<\/a>\r\n <a href=\"#philosophy\" class=\"hover:text-brand-teal transition\">PHILOSOPHY<\/a>\r\n <a href=\"#engine\" class=\"hover:text-brand-teal transition\">TECHNOLOGY<\/a>\r\n <a href=\"#tokenization\" class=\"hover:text-brand-teal transition\">TOKENIZATION<\/a>\r\n <a href=\"#ecosystem\" class=\"hover:text-brand-teal transition\">ECOSYSTEM<\/a>\r\n <\/div>\r\n <button class=\"bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-400 hover:to-emerald-400 text-white font-bold py-2 px-6 rounded-full shadow-lg transform hover:scale-105 transition duration-300 neon-glow elementor-popup-button\" \r\n data-elementor-popup-id=\"7363\">\r\n Start Game\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <header class=\"relative pt-20 pb-16 lg:pt-36 lg:pb-20 hero-bg overflow-hidden min-h-screen flex items-center justify-center\" id=\"hero\" style=\"margin-top: 0;\">\r\n <div class=\"absolute top-20 right-10 text-brand-gold opacity-10 text-9xl animate-float\" style=\"animation-delay: 0s;\">\u20bf<\/div>\r\n <div class=\"absolute bottom-20 left-10 text-brand-teal opacity-10 text-8xl animate-float\" style=\"animation-delay: 2s;\">\u2665<\/div>\r\n <div class=\"absolute top-40 left-1\/4 text-purple-500 opacity-10 text-6xl animate-float\" style=\"animation-delay: 1s;\">XP<\/div>\r\n\r\n <div class=\"container mx-auto px-6 text-center relative z-10\">\r\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800\/50 border border-brand-teal\/30 mb-8 backdrop-blur-sm\">\r\n <span class=\"w-2 h-2 rounded-full bg-green-500 animate-pulse\"><\/span>\r\n <span class=\"text-xs font-bold text-brand-teal tracking-widest uppercase\">Uni-ver-city of Happiness is open<\/span>\r\n <\/div>\r\n \r\n <img decoding=\"async\" \r\n id=\"unicorn-image\"\r\n src=\"https:\/\/hobbi.st\/wp-content\/uploads\/2025\/11\/hobbist-unicorn-e1762342771306.webp\" \r\n alt=\"Hobbi.st Unicorn - Symbol of University of Happiness\" \r\n class=\"w-[300px] h-[300px] object-cover mx-auto mb-8 rounded-xl shadow-2xl transition-transform duration-500 hover:scale-[1.05]\"\r\n loading=\"eager\"\r\n onerror=\"this.onerror=null; this.src='https:\/\/placehold.co\/300x300\/' + (document.body.classList.contains('light-mode') ? 'f7f7f7\/1a202c' : '0d1117\/ffffff') + '?text=Hobbi.st+Unicorn&font=inter'\"\r\n >\r\n \r\n <h1 class=\"hero-title text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-extrabold mb-6 leading-tight mt-10\">\r\n <span class=\"neon-title block text-default-light\">Money for all people<\/span>\r\n <span class=\"block typing-text text-2xl sm:text-3xl md:text-5xl lg:text-6xl mt-4 text-indigo-600\">\r\n hobbi.st 2030\r\n <\/span>\r\n <\/h1>\r\n \r\n <h2 class=\"text-5xl md:text-7xl lg:text-8xl font-display font-black leading-tight mb-8\">\r\n Turn Life <br>\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-teal-400 via-brand-teal to-emerald-500\">into a Game<\/span>, \r\n and Actions <br>\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-amber-300 via-brand-gold to-orange-500\">into Capital<\/span>\r\n <\/h2>\r\n\r\n <p class=\"text-lg md:text-xl text-default-muted max-w-3xl mx-auto mb-10\">\r\n Forget about boring lessons and courses. hobbist turns the routine of self-development into exciting quests, levels, and achievements. Your progress is the growth of your kingdom.\r\n <\/p>\r\n \r\n <p class=\"text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto mb-12 leading-relaxed\">\r\n Cover your basic needs by doing what you love. \r\n From a school student to a pensioner \u2014 hobbi.st pays for your development, sports, and helping others.\r\n <\/p>\r\n\r\n <div class=\"flex flex-col sm:flex-row justify-center gap-6\">\r\n <button onclick=\"document.getElementById('inequality').scrollIntoView({behavior: 'smooth'})\" class=\"group relative px-8 py-4 bg-brand-gold text-slate-900 font-black text-lg rounded-xl shadow-xl gold-glow hover:bg-amber-300 transition-all transform hover:-translate-y-1\">\r\n <span class=\"flex items-center gap-3\">\r\n <i class=\"fa-solid fa-chart-pie\"><\/i>\r\n Learn about Inequality\r\n <\/span>\r\n <div class=\"absolute inset-0 rounded-xl ring-2 ring-white\/50 group-hover:ring-4 transition-all\"><\/div>\r\n <\/button>\r\n <button onclick=\"document.getElementById('kingdom').scrollIntoView({behavior: 'smooth'})\" class=\"px-8 py-4 bg-slate-800 border border-slate-600 text-white font-bold text-lg rounded-xl hover:bg-slate-700 hover:border-brand-teal transition-all transform hover:-translate-y-1\">\r\n <i class=\"fa-solid fa-gamepad mr-2\"><\/i>\r\n How does it work?\r\n <\/button>\r\n <a href=\"#philosophy\" class=\"neon-cta-button inline-flex items-center justify-center text-lg md:text-xl font-bold text-white py-4 px-10 rounded-xl hover:shadow-2xl hover:shadow-indigo-500\/50\">\r\n <span>Discover the Philosophy <i class=\"fa-solid fa-arrow-right ml-2\"><\/i><\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"mt-16 flex justify-center items-center gap-8 opacity-60 grayscale hover:grayscale-0 transition-all duration-500\">\r\n <div class=\"text-slate-400 font-bold flex items-center gap-2\"><i class=\"fa-brands fa-apple text-2xl\"><\/i> Health Sync<\/div>\r\n <div class=\"text-slate-400 font-bold flex items-center gap-2\"><i class=\"fa-brands fa-google text-2xl\"><\/i> Google Fit<\/div>\r\n <div class=\"text-slate-400 font-bold flex items-center gap-2\"><i class=\"fa-solid fa-link text-2xl\"><\/i> Blockchain<\/div>\r\n <div class=\"text-slate-400 font-bold flex items-center gap-2\"><i class=\"fa-solid fa-brain text-2xl\"><\/i> AI Verified<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"inequality\" class=\"py-16 md:py-24 section-bg-primary\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold mb-4 text-default-light\">Global Inequality 2025<\/h2>\r\n <p class=\"source-inline text-default-muted\">(Source: <a href=\"https:\/\/wir2026.wid.world\" target=\"_blank\" class=\"text-blue-400 hover:text-blue-300\">WIR2026<\/a> | PPP Estimates 2025)<\/p>\r\n <\/div>\r\n\r\n <div class=\"inequality-hero-card\">\r\n <div class=\"inequality-stat-box\">\r\n <div class=\"inequality-stat-value\">Top 10% of people receive 53% of the world's income<\/div>\r\n <\/div>\r\n <div class=\"inequality-stat-box\" style=\"border-color: var(--inequality-bottom-color);\">\r\n <div class=\"inequality-stat-value\">Top 10% of people own 75% of the world's assets<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-custom-legend\">\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: var(--inequality-bottom-color);\"><\/span><span>Bottom 50%<\/span><\/div>\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: var(--inequality-middle-color);\"><\/span><span>Middle 40%<\/span><\/div>\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: var(--inequality-top-color);\"><\/span><span>Top 10%<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-charts-grid\">\r\n <div class=\"inequality-chart-card\">\r\n <div class=\"inequality-chart-header\"><i class=\"fas fa-wallet\" style=\"color: var(--inequality-bottom-color)\"><\/i><h2>Income Share<\/h2><\/div>\r\n <div class=\"inequality-canvas-wrapper\"><canvas id=\"incomeChart\"><\/canvas><\/div>\r\n <\/div>\r\n <div class=\"inequality-chart-card\">\r\n <div class=\"inequality-chart-header\"><i class=\"fas fa-gem\" style=\"color: var(--inequality-bottom-color)\"><\/i><h2>Wealth Share<\/h2><\/div>\r\n <div class=\"inequality-canvas-wrapper\"><canvas id=\"wealthChart\"><\/canvas><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-section-divider\"><\/div>\r\n <h2 class=\"inequality-section-title text-3xl md:text-4xl font-bold mb-8\">hobbi.st 2030 Proposal<\/h2>\r\n\r\n <div class=\"inequality-hero-card hobbist-hero\">\r\n <div class=\"inequality-stat-box\">\r\n <h3>Hobbi.st Income<\/h3>\r\n <div class=\"inequality-stat-value\">90% of people receive 80%<\/div>\r\n <\/div>\r\n <div class=\"inequality-stat-box\" style=\"border-color: var(--hobbist-secondary);\">\r\n <h3>Hobbi.st Capital<\/h3>\r\n <div class=\"inequality-stat-value\">90% of people own 80%<\/div>\r\n <\/div>\r\n <div class=\"inequality-manifesto\">\r\n <strong>Revolutionary Solution from hobbi.st<\/strong>\r\n Real Proof of Work. We replace machine work and the slave system with \"useful actions\". hobbi.st coin becomes the backing of human activity. Available to everyone. Requires no investments. Equal chances for a student and an investor.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-custom-legend\">\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: var(--hobbist-main);\"><\/span><span>Hobbists (90%)<\/span><\/div>\r\n <div class=\"inequality-legend-item\"><span class=\"inequality-dot\" style=\"background-color: #1f2937;\"><\/span><span>Others (10%)<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"inequality-charts-grid\">\r\n <div class=\"inequality-chart-card\">\r\n <div class=\"inequality-chart-header\"><i class=\"fas fa-users\" style=\"color: var(--hobbist-main)\"><\/i><h2>Income Distr.<\/h2><\/div>\r\n <div class=\"inequality-canvas-wrapper\"><canvas id=\"hobbistIncomeChart\"><\/canvas><\/div>\r\n <\/div>\r\n <div class=\"inequality-chart-card\">\r\n <div class=\"inequality-chart-header\"><i class=\"fas fa-coins\" style=\"color: var(--hobbist-main)\"><\/i><h2>Wealth Distr.<\/h2><\/div>\r\n <div class=\"inequality-canvas-wrapper\"><canvas id=\"hobbistWealthChart\"><\/canvas><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"how-it-works\" class=\"py-16 bg-slate-900 relative\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"grid md:grid-cols-2 gap-16 items-center\">\r\n <div class=\"order-2 md:order-1\">\r\n <div class=\"relative\">\r\n <div class=\"absolute -inset-1 bg-gradient-to-r from-brand-teal to-brand-gold rounded-2xl blur opacity-25\"><\/div>\r\n <div class=\"relative bg-slate-800 p-8 rounded-2xl border border-slate-700\">\r\n <h3 class=\"text-xl font-bold text-white mb-6 flex items-center gap-3\">\r\n <i class=\"fa-solid fa-bolt text-brand-gold\"><\/i>\r\n Real Proof of Work\r\n <\/h3>\r\n <ul class=\"space-y-4\">\r\n <li class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-red-500\/10 flex items-center justify-center text-red-500 shrink-0\"><i class=\"fa-solid fa-xmark\"><\/i><\/div>\r\n <div>\r\n <p class=\"font-bold text-slate-200\">Old Model<\/p>\r\n <p class=\"text-sm text-slate-400\">You spend time, energy, and money, but only your employer or bank earns.<\/p>\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex items-start gap-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-green-500\/10 flex items-center justify-center text-green-500 shrink-0\"><i class=\"fa-solid fa-check\"><\/i><\/div>\r\n <div>\r\n <p class=\"font-bold text-white\">Hobbi.st Model<\/p>\r\n <p class=\"text-sm text-slate-400\">Your <strong>useful actions<\/strong> (sports, study) are mining. You get tokens for becoming better.<\/p>\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"order-1 md:order-2\">\r\n <h2 class=\"text-4xl md:text-5xl font-display font-bold mb-6\">\r\n Mining <span class=\"text-gradient-gold\">without GPUs<\/span>\r\n <\/h2>\r\n <p class=\"text-lg text-slate-400 mb-6 leading-relaxed\">\r\n Forget about complex farms. Your body, your mind, and your heart are the main mining tools.\r\n <\/p>\r\n <p class=\"text-lg text-slate-400 mb-8 leading-relaxed\">\r\n Hobbi.st uses <strong>Real PoW (Proof of Work)<\/strong>: AI and Oracles confirm that you actually ran 5 km, completed a Python lesson, or helped a neighbor. The smart contract instantly credits the reward.\r\n <\/p>\r\n <div class=\"flex gap-4\">\r\n <span class=\"px-4 py-2 bg-slate-800 rounded-lg text-sm font-mono text-brand-teal border border-brand-teal\/20\">#SportFi<\/span>\r\n <span class=\"px-4 py-2 bg-slate-800 rounded-lg text-sm font-mono text-brand-teal border border-brand-teal\/20\">#LearnFi<\/span>\r\n <span class=\"px-4 py-2 bg-slate-800 rounded-lg text-sm font-mono text-brand-teal border border-brand-teal\/20\">#SocialFi<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"philosophy\" class=\"whitepaper-section py-16 md:py-24 bg-gradient-to-b from-slate-900 to-brand-dark\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">New Paradigm: Economy of Love<\/h2>\r\n <p class=\"section-subtitle\">\r\n hobbi.st goes beyond existing economic models. The platform is based on the \"Economy of Love\" \u2014 a system where value is determined by your favorite cause and a great goal (we will help you find it), well-being, and contribution to the common cause, not just financial gain. Explore the key differences.\r\n <\/p>\r\n \r\n <div class=\"whitepaper-card max-w-4xl mx-auto\">\r\n <div class=\"p-4 sm:p-6\">\r\n <p class=\"text-center text-slate-300 mb-4 font-semibold\">Click a button to see changes on the chart:<\/p>\r\n <div class=\"flex flex-wrap justify-center gap-2 mb-6\" id=\"economy-buttons\">\r\n <button data-economy=\"love\" class=\"pill-button active\">Economy of Love<\/button>\r\n <button data-economy=\"passion\" class=\"pill-button\">Passion Economy<\/button>\r\n <button data-economy=\"gift\" class=\"pill-button\">Gift Economy<\/button>\r\n <button data-economy=\"market\" class=\"pill-button\">Market Economy<\/button>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"economyChart\"><\/canvas>\r\n <\/div>\r\n <div id=\"economy-description\" class=\"mt-6 text-center text-slate-300\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"ipo\" class=\"py-16 bg-gradient-to-b from-brand-dark to-slate-900\">\r\n <div class=\"container mx-auto px-6\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-brand-teal font-mono tracking-widest uppercase text-sm font-bold\">Economy of Love<\/span>\r\n <h2 class=\"text-4xl md:text-5xl font-display font-bold mt-2 text-white\">\r\n From Hobby to <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600\">Legacy<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-12 items-center\">\r\n <div class=\"space-y-8\">\r\n <div class=\"flex gap-6\">\r\n <div class=\"flex-shrink-0 w-12 h-12 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl font-bold text-brand-teal\">1<\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Accumulate Reputation<\/h3>\r\n <p class=\"text-slate-400\">Every action is recorded on the Blockchain. This is your \"Proof of Contribution\". Your success story cannot be faked.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex gap-6\">\r\n <div class=\"flex-shrink-0 w-12 h-12 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl font-bold text-brand-gold\">2<\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Issue your Token (PUIT)<\/h3>\r\n <p class=\"text-slate-400\">When your reputation peaks, you create your personal token. This is a share of \"YOU Inc.\".<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex gap-6\">\r\n <div class=\"flex-shrink-0 w-12 h-12 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl font-bold text-purple-500\">3<\/div>\r\n <div>\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Personal IPO<\/h3>\r\n <p class=\"text-slate-400\">The community invests in you. Get resources for a startup, education, or a dream in exchange for a share in your future success.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"relative\">\r\n <div class=\"absolute inset-0 bg-gradient-to-r from-purple-500\/20 to-pink-500\/20 rounded-3xl blur-2xl transform rotate-3\"><\/div>\r\n <div class=\"relative glass-panel rounded-3xl p-8 border border-purple-500\/30\">\r\n <div class=\"flex items-center justify-between mb-8 border-b border-white\/10 pb-4\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-12 h-12 rounded-full bg-gradient-to-r from-brand-gold to-orange-500 flex items-center justify-center text-slate-900 font-bold text-xl\">A<\/div>\r\n <div>\r\n <div class=\"text-white font-bold\">T. Anarbekov<\/div>\r\n <div class=\"text-xs text-brand-teal\">Level: King (Lvl 50)<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <div class=\"text-xs text-slate-400\">Market Cap<\/div>\r\n <div class=\"text-xl font-mono text-white\">$4,250,000<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl flex justify-between items-center\">\r\n <span class=\"text-slate-300\"><i class=\"fa-solid fa-users mr-2 text-brand-teal\"><\/i>Investors<\/span>\r\n <span class=\"font-bold text-white\">4,820<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl flex justify-between items-center\">\r\n <span class=\"text-slate-300\"><i class=\"fa-solid fa-chart-line mr-2 text-brand-gold\"><\/i>Token Growth (YTD)<\/span>\r\n <span class=\"font-bold text-green-400\">+320%<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-8 text-center\">\r\n <button class=\"w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-xl hover:shadow-[0_0_20px_rgba(168,85,247,0.5)] transition elementor-popup-button\" \r\n data-elementor-popup-id=\"13705\">\r\n Invest in Temirlan\r\n <\/button>\r\n <p class=\"text-xs text-slate-500 mt-3 italic\">\"Economy based on human potential\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"governance\" class=\"whitepaper-section py-16 md:py-24 bg-gradient-to-b from-slate-900 to-brand-dark\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">Governing the Future: Reputation-Weighted DAO<\/h2>\r\n <p class=\"section-subtitle\">\r\n hobbi.st is governed by its community through a Decentralized Autonomous Organization (DAO). Our model is unique: the weight of your vote depends not only on the number of tokens but also on your reputation and actual contribution to the ecosystem.\r\n <\/p>\r\n <div class=\"whitepaper-card max-w-4xl mx-auto\">\r\n <div class=\"p-4 sm:p-6\">\r\n <div class=\"chart-container mb-6\">\r\n <canvas id=\"daoChart\"><\/canvas>\r\n <\/div>\r\n <div class=\"px-4\">\r\n <label for=\"reputation-slider\" class=\"block text-center font-medium text-slate-300\">Reputation weight in voting: <span id=\"reputation-value\" class=\"text-teal-400 font-bold\">50%<\/span><\/label>\r\n <input id=\"reputation-slider\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer mt-2 accent-teal-600\">\r\n <div class=\"flex justify-between text-xs text-slate-500 mt-1\">\r\n <span>Tokens only<\/span>\r\n <span>Hybrid model<\/span>\r\n <span>Reputation only<\/span>\r\n <\/div>\r\n <\/div>\r\n <p id=\"dao-explanation\" class=\"mt-6 text-center text-slate-300 font-medium leading-relaxed\"><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 md:py-24 section-bg-primary\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\r\n How does <span class=\"neon-title\">Life Gamification<\/span> work?\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-10\">\r\n \r\n <div class=\"card-bg p-8 rounded-2xl text-center\">\r\n <i class=\"fa-solid fa-crown text-6xl text-yellow-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-3 text-default-light\">Step 1: Kingdom<\/h3>\r\n <p class=\"text-default-muted\">Your kingdom consists of buildings (Citadel, Tower of Enlightenment, Treasury of Abundance, and Gardens of Harmony) \u2014 they symbolize areas of life (Strength & Health, Knowledge & Wisdom, Wealth & Balance, Connections & Relationships).<\/p>\r\n <span class=\"block mt-4 text-sm text-teal-600 font-semibold\">Growth in one area = progress in the Kingdom.<\/span>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-8 rounded-2xl text-center\">\r\n <i class=\"fa-solid fa-scroll text-6xl text-indigo-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-3 text-default-light\">Step 2: Quests<\/h3>\r\n <p class=\"text-default-muted\">Daily tasks (running, reading, learning, socializing) turn into quests that you link to the necessary buildings.<\/p>\r\n <span class=\"block mt-4 text-sm text-teal-600 font-semibold\">Completed a quest = Gained XP for a building.<\/span>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-8 rounded-2xl text-center\">\r\n <i class=\"fa-solid fa-star-of-life text-6xl text-red-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-3 text-default-light\">Step 3: Rewards<\/h3>\r\n <p class=\"text-default-muted\">XP, Coins, upgrading buildings and Kingdom Levels. Unlock new opportunities, ranks, and monetize your progress.<\/p>\r\n <span class=\"block mt-4 text-sm text-teal-600 font-semibold\">Level grows = Opportunities expand.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"kingdom\" class=\"py-16 bg-brand-dark overflow-hidden relative\">\r\n <div class=\"absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-brand-teal to-transparent opacity-50\"><\/div>\r\n \r\n <div class=\"container mx-auto px-6 text-center mb-16\">\r\n <h2 class=\"text-4xl md:text-6xl font-display font-black mb-4 text-white\">\r\n Your Personal <span class=\"text-gradient-teal\">Kingdom<\/span>\r\n <\/h2>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\r\n Life is an RPG. Upgrade buildings, level up your character, and unlock new income streams.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"container mx-auto px-6 grid md:grid-cols-4 gap-6\">\r\n <div class=\"group relative glass-panel p-8 rounded-2xl hover:bg-slate-800\/80 transition-all cursor-default\">\r\n <div class=\"absolute -top-6 left-1\/2 transform -translate-x-1\/2 w-16 h-16 bg-slate-900 rounded-full border-2 border-red-500 flex items-center justify-center shadow-lg shadow-red-500\/20 z-10 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-heart-pulse text-2xl text-red-500\"><\/i>\r\n <\/div>\r\n <div class=\"mt-8 text-center\">\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Citadel of Strength<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">Health and Energy<\/p>\r\n <div class=\"h-2 w-full bg-slate-700 rounded-full overflow-hidden\">\r\n <div class=\"h-full w-3\/4 bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)]\"><\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-500\">Quests: Running, Yoga, Sleep<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative glass-panel p-8 rounded-2xl hover:bg-slate-800\/80 transition-all cursor-default\">\r\n <div class=\"absolute -top-6 left-1\/2 transform -translate-x-1\/2 w-16 h-16 bg-slate-900 rounded-full border-2 border-blue-500 flex items-center justify-center shadow-lg shadow-blue-500\/20 z-10 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-book-open text-2xl text-blue-500\"><\/i>\r\n <\/div>\r\n <div class=\"mt-8 text-center\">\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Tower of Knowledge<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">Intellect and Skills<\/p>\r\n <div class=\"h-2 w-full bg-slate-700 rounded-full overflow-hidden\">\r\n <div class=\"h-full w-1\/2 bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]\"><\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-500\">Quests: Courses, Books, Languages<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative glass-panel p-8 rounded-2xl hover:bg-slate-800\/80 transition-all cursor-default\">\r\n <div class=\"absolute -top-6 left-1\/2 transform -translate-x-1\/2 w-16 h-16 bg-slate-900 rounded-full border-2 border-brand-gold flex items-center justify-center shadow-lg shadow-amber-500\/20 z-10 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-coins text-2xl text-brand-gold\"><\/i>\r\n <\/div>\r\n <div class=\"mt-8 text-center\">\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Treasury<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">Wealth and Resources<\/p>\r\n <div class=\"h-2 w-full bg-slate-700 rounded-full overflow-hidden\">\r\n <div class=\"h-full w-2\/3 bg-brand-gold shadow-[0_0_10px_rgba(251,191,36,0.5)]\"><\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-500\">Quests: Investments, Work<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative glass-panel p-8 rounded-2xl hover:bg-slate-800\/80 transition-all cursor-default\">\r\n <div class=\"absolute -top-6 left-1\/2 transform -translate-x-1\/2 w-16 h-16 bg-slate-900 rounded-full border-2 border-purple-500 flex items-center justify-center shadow-lg shadow-purple-500\/20 z-10 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-users text-2xl text-purple-500\"><\/i>\r\n <\/div>\r\n <div class=\"mt-8 text-center\">\r\n <h3 class=\"text-xl font-bold text-white mb-2\">Gardens of Connections<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">Relationships and Society<\/p>\r\n <div class=\"h-2 w-full bg-slate-700 rounded-full overflow-hidden\">\r\n <div class=\"h-full w-4\/5 bg-purple-500 shadow-[0_0_10px_rgba(168,85,247,0.5)]\"><\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-500\">Quests: Volunteering, Family<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"text-center mt-12\">\r\n <p class=\"text-brand-teal font-mono text-sm animate-pulse\">Free access to the platform until February 2026<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 md:py-24\" id=\"features\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\r\n Not just a tracker, but a <span class=\"neon-title\">Whole Ecosystem<\/span>\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n \r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-medal text-4xl text-yellow-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">True Gamification<\/h3>\r\n <p class=\"text-default-muted\">Ranks, achievements, badges. Every success is noted and rewarded. No more manual point counting.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-users-line text-4xl text-teal-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Social Progress<\/h3>\r\n <p class=\"text-default-muted\">Interact with others. Share quests, create interest-based Alliances, participate in \"Spirit Wars\" (PvP quests).<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-graduation-cap text-4xl text-indigo-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Learning as a Quest<\/h3>\r\n <p class=\"text-default-muted\">Manage your courses and lessons right from your Kingdom dashboard. Completing a module gives XP to your \"Tower of Enlightenment\".<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-chart-pie text-4xl text-pink-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Real Practice & Monetization<\/h3>\r\n <p class=\"text-default-muted\">Earn Hobbist Coins for completing public quests. Some quests are practical tasks in top local and global companies. Premium plans let you monetize created courses.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-magnifying-glass-chart text-4xl text-cyan-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Advanced Analytics<\/h3>\r\n <p class=\"text-default-muted\">Track your progress via charts. See which life areas (buildings) grow faster and which need your attention.<\/p>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-rocket text-4xl text-green-500 mb-4\"><\/i>\r\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">Simplicity and UX<\/h3>\r\n <p class=\"text-default-muted\">Intuitive, fast, and responsive interface. Maximum useful info, minimum clicks. Focus on action, not setup.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"engine\" class=\"whitepaper-section py-16 md:py-24 section-bg-primary\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">hobbi.st Platform Engine<\/h2>\r\n <p class=\"section-subtitle\">\r\n At the core of hobbi.st are four technological pillars that together create a unique environment for development and self-realization. Each element plays a key role, turning the path to mastery into an exciting and meaningful journey.\r\n <\/p>\r\n <div class=\"max-w-5xl mx-auto engine-tabs-container\">\r\n <div class=\"engine-tabs-nav-panel\">\r\n <h3 class=\"text-xl font-bold mb-4 text-slate-200 px-2\">Growth technologies:<\/h3>\r\n <nav id=\"engine-tabs\" class=\"flex flex-col space-y-2\">\r\n <a href=\"#\" data-tab=\"gamification\" class=\"tab-link active\">\r\n <span class=\"text-2xl mr-3\">\ud83c\udfae<\/span> Gamification\r\n <\/a>\r\n <a href=\"#\" data-tab=\"ar\" class=\"tab-link\">\r\n <span class=\"text-2xl mr-3\">\ud83d\udd2e<\/span> Augmented Reality (AR)\r\n <\/a>\r\n <a href=\"#\" data-tab=\"ai\" class=\"tab-link\">\r\n <span class=\"text-2xl mr-3\">\ud83e\udde0<\/span> Neural Networks (AI)\r\n <\/a>\r\n <a href=\"#\" data-tab=\"blockchain\" class=\"tab-link\">\r\n <span class=\"text-2xl mr-3\">\ud83d\udd17<\/span> Blockchain\r\n <\/a>\r\n <\/nav>\r\n <\/div>\r\n <div class=\"engine-content-panel\">\r\n <div id=\"engine-content\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"tokenization\" class=\"whitepaper-section py-16 md:py-24 bg-gradient-to-b from-brand-dark to-slate-900\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">Your Potential is Your Asset<\/h2>\r\n <p class=\"section-subtitle\">\r\n hobbi.st allows you to turn your skills, experience, and future potential into a liquid digital asset. We call it \"Personal IPO\". Explore the step-by-step process in detail.\r\n <\/p>\r\n <div class=\"max-w-5xl mx-auto tokenization-tabs-container\">\r\n <div class=\"tokenization-tabs-nav-panel\">\r\n <h3 class=\"text-xl font-bold mb-4 text-slate-200 px-2\">Tokenization stages:<\/h3>\r\n <nav id=\"tokenization-tabs\" class=\"flex flex-col space-y-2\">\r\n <a href=\"#\" data-tab=\"contribution\" class=\"tab-link active\">\r\n <span class=\"text-xl mr-3\">1\ufe0f\u20e3<\/span> Development and Contribution\r\n <\/a>\r\n <a href=\"#\" data-tab=\"proof\" class=\"tab-link\">\r\n <span class=\"text-xl mr-3\">2\ufe0f\u20e3<\/span> Proof of Contribution\r\n <\/a>\r\n <a href=\"#\" data-tab=\"reputation\" class=\"tab-link\">\r\n <span class=\"text-xl mr-3\">3\ufe0f\u20e3<\/span> Reputation Growth\r\n <\/a>\r\n <a href=\"#\" data-tab=\"token\" class=\"tab-link\">\r\n <span class=\"text-xl mr-3\">4\ufe0f\u20e3<\/span> Personal Token\r\n <\/a>\r\n <a href=\"#\" data-tab=\"ipo\" class=\"tab-link\">\r\n <span class=\"text-xl mr-3\">5\ufe0f\u20e3<\/span> Personal IPO\r\n <\/a>\r\n <\/nav>\r\n <\/div>\r\n <div class=\"tokenization-content-panel\">\r\n <div id=\"tokenization-content\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"ecosystem\" class=\"whitepaper-section py-16 md:py-24 section-bg-primary\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"section-title\">Tools for Holistic Development<\/h2>\r\n <p class=\"section-subtitle\">\r\n The platform provides a full suite of integrated tools that support you at every stage: from learning new skills to managing complex projects and getting valuable advice from mentors.\r\n <\/p>\r\n <div class=\"ecosystem-grid\">\r\n <div class=\"whitepaper-card text-center\">\r\n <div class=\"text-4xl mb-4\">\ud83c\udf93<\/div>\r\n <h3 class=\"text-xl font-bold mb-2 text-slate-200\">Adaptive LMS<\/h3>\r\n <p class=\"text-slate-400\">A learning system that adapts to you. AI analyzes your learning style and offers personalized courses, tasks, and materials for maximum efficiency.<\/p>\r\n <\/div>\r\n <div class=\"whitepaper-card text-center\">\r\n <div class=\"text-4xl mb-4\">\ud83d\ude80<\/div>\r\n <h3 class=\"text-xl font-bold mb-2 text-slate-200\">Project & Performance Management<\/h3>\r\n <p class=\"text-slate-400\">Visualize projects in AR, get AI predictions, and track your contribution on the blockchain. Your progress becomes transparent and measurable.<\/p>\r\n <\/div>\r\n <div class=\"whitepaper-card text-center\">\r\n <div class=\"text-4xl mb-4\">\ud83e\udd1d<\/div>\r\n <h3 class=\"text-xl font-bold mb-2 text-slate-200\">Network of \u00f6zgeris ustazy<\/h3>\r\n <p class=\"text-slate-400\">\"Masters of Change\" is a unique hybrid mentoring network. AI coaches help with development, while human mentors share wisdom and inspiration.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 md:py-24\" id=\"testimonials\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\r\n What Our <span class=\"neon-title\">Kings Say<\/span>\r\n <\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n \r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-quote-left text-3xl text-indigo-500 mb-4\"><\/i>\r\n <p class=\"text-default-muted italic mb-6\">\"I used to just write down tasks. Now I have a goal: to level up the Tower of Enlightenment. Motivation increased manifold. This is a real breakthrough in personal growth!\"<\/p>\r\n <div class=\"flex items-center\">\r\n <div class=\"w-10 h-10 bg-teal-500 rounded-full mr-3 flex items-center justify-center text-white font-bold text-lg\">E<\/div>\r\n <div>\r\n <p class=\"font-bold text-default-light\">Edilbek<\/p>\r\n <p class=\"text-sm text-default-muted\">Kingdom Level: 14<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-quote-left text-3xl text-indigo-500 mb-4\"><\/i>\r\n <p class=\"text-default-muted italic mb-6\">\"I use Premium to create courses. Low commission and an audience already engaged in gamification is the perfect combo. Plus, tracking your progress is very convenient.\"<\/p>\r\n <div class=\"flex items-center\">\r\n <div class=\"w-10 h-10 bg-yellow-500 rounded-full mr-3 flex items-center justify-center text-white font-bold text-lg\">J<\/div>\r\n <div>\r\n <p class=\"font-bold text-default-light\">Jamilya D.<\/p>\r\n <p class=\"text-sm text-default-muted\">Rank: Officer<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-bg p-6 rounded-xl\">\r\n <i class=\"fa-solid fa-quote-left text-3xl text-indigo-500 mb-4\"><\/i>\r\n <p class=\"text-default-muted italic mb-6\">\"I like the social part. Co-op quests with friends are a powerful tool to maintain discipline. The achievement icons look amazing!\"<\/p>\r\n <div class=\"flex items-center\">\r\n <div class=\"w-10 h-10 bg-red-500 rounded-full mr-3 flex items-center justify-center text-white font-bold text-lg\">I<\/div>\r\n <div>\r\n <p class=\"font-bold text-default-light\">Igor K.<\/p>\r\n <p class=\"text-sm text-default-muted\">In Alliance \"Path of Wisdom\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 bg-slate-900\">\r\n <div class=\"container mx-auto px-6\">\r\n <h2 class=\"text-3xl font-bold text-center mb-12 text-white\"><span class=\"text-brand-gold\">Success<\/span> Stories<\/h2>\r\n <div class=\"grid md:grid-cols-3 gap-8\">\r\n <div class=\"glass-panel p-6 rounded-2xl\">\r\n <div class=\"flex items-center gap-4 mb-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center\">\ud83c\udfeb<\/div>\r\n <div>\r\n <p class=\"font-bold text-white\">Daniyar, 16 y.o.<\/p>\r\n <p class=\"text-xs text-brand-teal\">Rank: Fighter<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-400 text-sm\">\"I used to just learn Python. Now I upgrade the 'Tower of Knowledge' and get tokens for it. Saved up for a new laptop just by doing homework!\"<\/p>\r\n <\/div>\r\n <div class=\"glass-panel p-6 rounded-2xl border border-brand-gold\/30\">\r\n <div class=\"flex items-center gap-4 mb-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-brand-gold flex items-center justify-center text-slate-900 font-bold\">\ud83d\udcbc<\/div>\r\n <div>\r\n <p class=\"font-bold text-white\">Elena, 34 y.o.<\/p>\r\n <p class=\"text-xs text-brand-teal\">Rank: Officer<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-400 text-sm\">\"I launched a marketing course inside the platform. The system itself found students for me through their quests. My personal token grew by 40%.\"<\/p>\r\n <\/div>\r\n <div class=\"glass-panel p-6 rounded-2xl\">\r\n <div class=\"flex items-center gap-4 mb-4\">\r\n <div class=\"w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center\">\ud83d\udc74<\/div>\r\n <div>\r\n <p class=\"font-bold text-white\">Boris Petrovich, 65 y.o.<\/p>\r\n <p class=\"text-xs text-brand-teal\">Rank: Mentor<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-400 text-sm\">\"Sharing engineering experience with the youth. I feel needed, chat in the 'Gardens of Connections', and get a supplement to my pension. It's a new life.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"py-16 md:py-24 section-bg-primary border-t border-gray-700\" id=\"final-cta\">\r\n <div class=\"container mx-auto px-6 text-center\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6 text-default-light\">\r\n Your Kingdom Awaits.\r\n <\/h2>\r\n <p class=\"text-xl md:text-2xl text-default-muted max-w-3xl mx-auto mb-10\">\r\n Stop just dreaming about progress. Start seeing and measuring it every day. It's time to build your kingdom.\r\n <\/p>\r\n <button class=\"neon-cta-button elementor-popup-button inline-flex items-center justify-center text-2xl font-bold text-white py-4 px-12 rounded-xl hover:shadow-2xl hover:shadow-teal-500\/50\" \r\n data-elementor-popup-id=\"13705\">\r\n <span>I Am Starting to Build! <i class=\"fa-solid fa-fist-raised ml-3\"><\/i><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"border-t border-gray-700 py-10\">\r\n <div class=\"container mx-auto px-6 text-center\">\r\n <p class=\"text-3xl font-extrabold mb-4 footer-logo\">Hobbi.st<\/p>\r\n <div class=\"flex justify-center space-x-6 mb-6 text-gray-300\">\r\n <a href=\"#hero\" class=\"hover:text-teal-500 transition-colors\">\u0414\u043e\u043c\u043e\u0439<\/a>\r\n <a href=\"#inequality\" class=\"hover:text-teal-500 transition-colors\">Inequality<\/a>\r\n <a href=\"#how-it-works\" class=\"hover:text-teal-500 transition-colors\">Mechanics<\/a>\r\n <a href=\"#philosophy\" class=\"hover:text-teal-500 transition-colors\">Philosophy<\/a>\r\n <a href=\"#kingdom\" class=\"hover:text-teal-500 transition-colors\">Kingdom<\/a>\r\n <a href=\"#engine\" class=\"hover:text-teal-500 transition-colors\">Technology<\/a>\r\n <a href=\"#tokenization\" class=\"hover:text-teal-500 transition-colors\">Tokenization<\/a>\r\n <a href=\"#ecosystem\" class=\"hover:text-teal-500 transition-colors\">Ecosystem<\/a>\r\n <a href=\"#\" class=\"hover:text-teal-500 transition-colors\">Support<\/a>\r\n <\/div>\r\n <div class=\"flex justify-center space-x-6 mb-6\">\r\n <a href=\"#\" class=\"text-gray-300 hover:text-indigo-500 transition-colors\"><i class=\"fab fa-telegram-plane text-2xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"text-gray-300 hover:text-indigo-500 transition-colors\"><i class=\"fab fa-vk text-2xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"text-gray-300 hover:text-indigo-500 transition-colors\"><i class=\"fab fa-instagram text-2xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"text-gray-300 hover:text-brand-teal transition-colors\"><i class=\"fa-brands fa-discord text-2xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"text-gray-300 hover:text-brand-teal transition-colors\"><i class=\"fa-brands fa-twitter text-2xl\"><\/i><\/a>\r\n <\/div>\r\n <p class=\"text-sm text-gray-400 opacity-70\">© 2025 hobbi.st. All rights reserved. Developed with love.<\/p>\r\n <p class=\"text-slate-600 text-sm mt-2\">© 2025 Univercity of Happiness. Economy of Love.<\/p>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n const commonOptions = {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n cutout: '70%',\r\n plugins: {\r\n legend: { display: false },\r\n tooltip: { \r\n padding: 8, \r\n backgroundColor: '#1e293b',\r\n titleColor: '#f8fafc',\r\n bodyColor: '#cbd5e1'\r\n }\r\n }\r\n };\r\n\r\n function initInequalityCharts() {\r\n new Chart(document.getElementById('incomeChart'), {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Bottom 50%', 'Middle 40%', 'Top 10%'],\r\n datasets: [{\r\n data: [8, 38, 53],\r\n backgroundColor: ['#3498db', '#9b59b6', '#e74c3c'],\r\n borderWidth: 0\r\n }]\r\n },\r\n options: commonOptions\r\n });\r\n\r\n new Chart(document.getElementById('wealthChart'), {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Bottom 50%', 'Middle 40%', 'Top 10%'],\r\n datasets: [{\r\n data: [2, 23, 75],\r\n backgroundColor: ['#3498db', '#9b59b6', '#e74c3c'],\r\n borderWidth: 0\r\n }]\r\n },\r\n options: commonOptions\r\n });\r\n\r\n const hobbistColors = ['#10b981', '#1f2937'];\r\n const hobbistLabels = ['Hobbists (90%)', 'Others (10%)'];\r\n\r\n new Chart(document.getElementById('hobbistIncomeChart'), {\r\n type: 'doughnut',\r\n data: {\r\n labels: hobbistLabels,\r\n datasets: [{\r\n data: [80, 20],\r\n backgroundColor: hobbistColors,\r\n borderWidth: 0\r\n }]\r\n },\r\n options: commonOptions\r\n });\r\n\r\n new Chart(document.getElementById('hobbistWealthChart'), {\r\n type: 'doughnut',\r\n data: {\r\n labels: hobbistLabels,\r\n datasets: [{\r\n data: [80, 20],\r\n backgroundColor: hobbistColors,\r\n borderWidth: 0\r\n }]\r\n },\r\n options: commonOptions\r\n });\r\n }\r\n\r\n const themeToggle = document.getElementById('theme-toggle');\r\n const themeIcon = document.getElementById('theme-icon');\r\n const body = document.body;\r\n\r\n const savedTheme = localStorage.getItem('theme');\r\n if (savedTheme === 'light') {\r\n body.classList.add('light-mode');\r\n themeIcon.className = 'fa-solid fa-sun text-xl';\r\n }\r\n\r\n themeToggle.addEventListener('click', () => {\r\n body.classList.toggle('light-mode');\r\n const isLight = body.classList.contains('light-mode');\r\n themeIcon.className = isLight ? 'fa-solid fa-sun text-xl' : 'fa-solid fa-moon text-xl';\r\n localStorage.setItem('theme', isLight ? 'light' : 'dark');\r\n });\r\n\r\n const loginToggle = document.getElementById('login-toggle');\r\n loginToggle.addEventListener('click', () => {\r\n window.location.href = 'https:\/\/hobbi.st\/hero';\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n initInequalityCharts();\r\n \r\n function openElementorPopup(popupId) {\r\n if (typeof elementorFrontend !== 'undefined' && elementorFrontend.modules && elementorFrontend.modules.popup) {\r\n elementorFrontend.modules.popup.showPopup({ id: popupId });\r\n return true;\r\n }\r\n if (typeof elementorFrontend !== 'undefined' && elementorFrontend.documentsManager) {\r\n const popup = elementorFrontend.documentsManager.documents[popupId];\r\n if (popup) { popup.showModal(); return true; }\r\n }\r\n if (typeof ElementorPro !== 'undefined' && ElementorPro.modules && ElementorPro.modules.popup) {\r\n ElementorPro.modules.popup.showPopup({ id: parseInt(popupId) });\r\n return true;\r\n }\r\n if (typeof jQuery !== 'undefined') {\r\n try { jQuery(document).trigger('elementor\/popup\/show', [{ id: popupId }]); return true; } catch (e) { }\r\n }\r\n if (window.elementorPro && window.elementorPro.modules && window.elementorPro.modules.popup) {\r\n window.elementorPro.modules.popup.showPopup({ id: parseInt(popupId) });\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n function openPopupWithRetry(popupId, maxAttempts = 20, delay = 100) {\r\n let attempts = 0;\r\n function tryOpen() {\r\n attempts++;\r\n if (openElementorPopup(popupId)) {\r\n return true;\r\n } else if (attempts < maxAttempts) {\r\n setTimeout(tryOpen, delay);\r\n } else {\r\n alert('Registration form is temporarily unavailable. Please try again later or refresh the page.');\r\n return false;\r\n }\r\n }\r\n return tryOpen();\r\n }\r\n\r\n function handlePopupClick(event) {\r\n const trigger = event.target.closest('[data-elementor-popup-id]');\r\n if (trigger) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const popupId = trigger.getAttribute('data-elementor-popup-id');\r\n openPopupWithRetry(popupId);\r\n }\r\n }\r\n\r\n document.addEventListener('click', handlePopupClick);\r\n \r\n setTimeout(() => {\r\n const popupButtons = document.querySelectorAll('[data-elementor-popup-id]');\r\n popupButtons.forEach(button => {\r\n button.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n const popupId = this.getAttribute('data-elementor-popup-id');\r\n openPopupWithRetry(popupId);\r\n });\r\n });\r\n }, 1000);\r\n });\r\n\r\n let scrollTimer;\r\n let hideTimer;\r\n const hideDelay = 3000; \r\n \r\n function hideAllButtons() {\r\n const themeButton = document.getElementById('theme-toggle');\r\n const loginButton = document.getElementById('login-toggle');\r\n const urgentButton = document.getElementById('urgent-toggle');\r\n const buttons = [themeButton, loginButton, urgentButton];\r\n buttons.forEach(btn => { if (btn) btn.classList.add('hidden'); });\r\n }\r\n \r\n function showAllButtons() {\r\n const themeButton = document.getElementById('theme-toggle');\r\n const loginButton = document.getElementById('login-toggle');\r\n const urgentButton = document.getElementById('urgent-toggle');\r\n const buttons = [themeButton, loginButton, urgentButton];\r\n buttons.forEach(btn => { if (btn) btn.classList.remove('hidden'); });\r\n }\r\n\r\n window.addEventListener('scroll', function() {\r\n showAllButtons();\r\n clearTimeout(hideTimer);\r\n hideTimer = setTimeout(() => { hideAllButtons(); }, hideDelay);\r\n \r\n clearTimeout(scrollTimer);\r\n const buttons = [document.getElementById('theme-toggle'), document.getElementById('login-toggle'), document.getElementById('urgent-toggle')];\r\n buttons.forEach(btn => { if (btn) btn.style.opacity = \"0.5\"; });\r\n \r\n scrollTimer = setTimeout(() => {\r\n buttons.forEach(btn => { if (btn) btn.style.opacity = \"1\"; });\r\n }, 300);\r\n });\r\n\r\n document.addEventListener('mousemove', function() {\r\n showAllButtons();\r\n clearTimeout(hideTimer);\r\n hideTimer = setTimeout(() => { hideAllButtons(); }, hideDelay);\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n const href = this.getAttribute('href');\r\n if (href.length > 1 && href !== '#') {\r\n e.preventDefault();\r\n const targetElement = document.querySelector(href);\r\n if (targetElement) {\r\n window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' });\r\n }\r\n }\r\n });\r\n });\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n initWhitepaper();\r\n });\r\n\r\n function initWhitepaper() {\r\n const economyData = {\r\n love: {\r\n label: 'Economy of Love',\r\n values: [100, 70, 95, 20], \r\n description: 'Driver: Compassion and well-being. Mechanism: Decentralized currencies (potential tokens). Result: Collective prosperity. Attitude towards deficit: Creates abundance through cooperation.'\r\n },\r\n passion: {\r\n label: 'Passion Economy',\r\n values: [75, 60, 85, 30], \r\n description: 'Driver: Individual skill. Mechanism: Monetization of individuality. Result: Personal monetization. Attitude towards deficit: Bypasses deficit through nicheness.'\r\n },\r\n gift: {\r\n label: 'Gift Economy',\r\n values: [50, 90, 80, 10], \r\n description: 'Driver: Reciprocity and social connection. Mechanism: Non-monetary exchange. Result: Community building. Attitude towards deficit: Based on an abundance mentality.'\r\n },\r\n market: {\r\n label: 'Market Economy',\r\n values: [25, 80, 75, 85], \r\n description: 'Driver: Profit and price. Mechanism: Monetary exchange. Result: Wealth accumulation. Attitude towards deficit: Exploits and creates deficit.'\r\n }\r\n };\r\n\r\n const ctx = document.getElementById('economyChart');\r\n let economyChart;\r\n \r\n if (ctx) {\r\n function createEconomyChart(economyKey) {\r\n const data = economyData[economyKey];\r\n const descriptionEl = document.getElementById('economy-description');\r\n if (descriptionEl) {\r\n descriptionEl.textContent = data.description;\r\n }\r\n\r\n if (economyChart) {\r\n economyChart.data.datasets[0].data = data.values;\r\n economyChart.update();\r\n } else {\r\n economyChart = new Chart(ctx, {\r\n type: 'bar',\r\n data: {\r\n labels: ['Value Driver', 'Exchange Mechanism', 'Key Result', 'Attitude towards Deficit'],\r\n datasets: [{\r\n label: data.label,\r\n data: data.values,\r\n backgroundColor: '#14B8A6',\r\n borderColor: '#0F766E',\r\n borderWidth: 1,\r\n borderRadius: 4\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n y: { beginAtZero: true, max: 110, display: false },\r\n x: { grid: { display: false } }\r\n },\r\n plugins: { legend: { display: false } }\r\n }\r\n });\r\n }\r\n }\r\n\r\n const economyButtons = document.getElementById('economy-buttons');\r\n if (economyButtons) {\r\n economyButtons.addEventListener('click', function(e) {\r\n if (e.target.tagName === 'BUTTON') {\r\n const economyKey = e.target.dataset.economy;\r\n document.querySelectorAll('#economy-buttons .pill-button').forEach(btn => btn.classList.remove('active'));\r\n e.target.classList.add('active');\r\n createEconomyChart(economyKey);\r\n }\r\n });\r\n }\r\n\r\n createEconomyChart('love');\r\n }\r\n\r\n const engineContentData = {\r\n gamification: {\r\n title: 'Gamification for deep engagement',\r\n text: 'We reject superficial rewards. Our gamification is based on the psychology of intrinsic motivation: the pursuit of mastery, autonomy, and purpose. The \"game\" is the development process itself, not a race for points. This ensures long-term engagement and real skill development.',\r\n icon: '\ud83c\udfae'\r\n },\r\n ar: {\r\n title: 'AR for immersive experience and contribution',\r\n text: 'Augmented reality turns learning into a lived experience and lets you see the result of your contribution in the real world. Imagine pointing your camera at a park and seeing how it transformed thanks to your project \u2014 this is AR in hobbi.st. It\\'s not a simulation, but a feedback loop with reality.',\r\n icon: '\ud83d\udd2e'\r\n },\r\n ai: {\r\n title: 'AI as a partner for cognitive growth',\r\n text: 'Our AI is not just an information provider, but a \"Socratic mentor\". It does not give ready-made answers but asks the right questions, pushing you towards critical thinking and creative solutions. We use AI to make you smarter, not to think for you.',\r\n icon: '\ud83e\udde0'\r\n },\r\n blockchain: {\r\n title: 'Blockchain for transparency and value',\r\n text: 'Blockchain ensures the creation of verifiable, tamper-proof digital credentials for your skills and achievements. Your contribution, from a completed course to an implemented project, is recorded in an immutable ledger, forming your reputation and value in the ecosystem.',\r\n icon: '\ud83d\udd17'\r\n }\r\n };\r\n \r\n const engineContentContainer = document.getElementById('engine-content');\r\n const engineTabsContainer = document.getElementById('engine-tabs');\r\n\r\n function updateEngineContent(tabKey) {\r\n const content = engineContentData[tabKey];\r\n if (engineContentContainer && content) {\r\n engineContentContainer.innerHTML = `\r\n <h3 style=\"font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1rem;\">${content.title}<\/h3>\r\n <p style=\"color: #cbd5e1; font-size: 1rem; line-height: 1.5rem;\">${content.text}<\/p>\r\n `;\r\n document.querySelectorAll('#engine-tabs .tab-link').forEach(link => {\r\n link.classList.remove('active');\r\n if (link.dataset.tab === tabKey) { link.classList.add('active'); }\r\n });\r\n }\r\n }\r\n \r\n if (engineTabsContainer) {\r\n engineTabsContainer.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const link = e.target.closest('.tab-link');\r\n if (link) { updateEngineContent(link.dataset.tab); }\r\n });\r\n }\r\n\r\n updateEngineContent('gamification');\r\n\r\n const tokenizationContentData = {\r\n contribution: {\r\n title: 'Stage 1: Development and Contribution',\r\n text: 'At this stage, you actively participate in platform life: learn new skills, work on projects, help other members. Every action you take to create value for the community is recorded and serves as the foundation for your future potential. This is the most important part where your labor and passion become tangible capital.'\r\n },\r\n proof: {\r\n title: 'Stage 2: Proof of Contribution',\r\n text: 'The hobbi.st system, using AI and AR technologies, captures and verifies your contribution. This \"Proof of Contribution\" is a digital, immutable artifact on the blockchain that confirms your participation and achievements. It is not just a certificate, but a verifiable trail of your useful activity.'\r\n },\r\n reputation: {\r\n title: 'Stage 3: Reputation Growth',\r\n text: 'Your \"Proofs of Contribution\" automatically build your reputation on the network. Reputation is a dynamic indicator of your mastery, reliability, and significance to the community. It is your social capital that grows with each new contribution and distinguishes you as a valuable ecosystem member.'\r\n },\r\n token: {\r\n title: 'Stage 4: Personal Token Issuance (PUIT)',\r\n text: 'Based on your reputation, you earn the right to issue your own digital asset \u2014 the Personal Unique Individual Talent Token (PUIT). It is not just a coin, but a digital representation of your potential. You decide what this token provides: access to your exclusive materials, consultations, or future projects.'\r\n },\r\n ipo: {\r\n title: 'Stage 5: Personal IPO',\r\n text: 'Now your community can invest in you by purchasing your PUITs. We call this process \"Personal IPO\". It allows you to get support to realize your ideas and projects, and your supporters \u2014 to share in your future success. This is a mutually beneficial model based on trust, potential, and collective growth.'\r\n }\r\n };\r\n \r\n const tokenizationContentContainer = document.getElementById('tokenization-content');\r\n const tokenizationTabsContainer = document.getElementById('tokenization-tabs');\r\n\r\n function updateTokenizationContent(tabKey) {\r\n const content = tokenizationContentData[tabKey];\r\n if (tokenizationContentContainer && content) {\r\n tokenizationContentContainer.innerHTML = `\r\n <h3 style=\"font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1rem;\">${content.title}<\/h3>\r\n <p style=\"color: #cbd5e1; font-size: 1rem; line-height: 1.5rem;\">${content.text}<\/p>\r\n `;\r\n document.querySelectorAll('#tokenization-tabs .tab-link').forEach(link => {\r\n link.classList.remove('active');\r\n if (link.dataset.tab === tabKey) { link.classList.add('active'); }\r\n });\r\n }\r\n }\r\n \r\n if (tokenizationTabsContainer) {\r\n tokenizationTabsContainer.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const link = e.target.closest('.tab-link');\r\n if (link) { updateTokenizationContent(link.dataset.tab); }\r\n });\r\n }\r\n\r\n updateTokenizationContent('contribution');\r\n\r\n const daoChartCtx = document.getElementById('daoChart');\r\n const reputationSlider = document.getElementById('reputation-slider');\r\n const daoExplanation = document.getElementById('dao-explanation');\r\n const reputationValueSpan = document.getElementById('reputation-value');\r\n let daoChart;\r\n \r\n if (daoChartCtx) {\r\n const daoBaseData = {\r\n labels: ['Large Investors', 'Active Members', 'Small Holders'],\r\n tokenHoldings: [60, 25, 15],\r\n reputationScores: [10, 70, 20]\r\n };\r\n\r\n const chartColors = {\r\n whales: 'rgba(245, 158, 11, 0.8)',\r\n active: 'rgba(20, 184, 166, 0.8)',\r\n small: 'rgba(107, 114, 128, 0.8)'\r\n };\r\n\r\n function updateDaoChart(reputationWeight) {\r\n const weight = reputationWeight \/ 100;\r\n \r\n const whalePower = (daoBaseData.tokenHoldings[0] * (1 - weight)) + (daoBaseData.reputationScores[0] * weight);\r\n const activePower = (daoBaseData.tokenHoldings[1] * (1 - weight)) + (daoBaseData.reputationScores[1] * weight);\r\n const smallPower = (daoBaseData.tokenHoldings[2] * (1 - weight)) + (daoBaseData.reputationScores[2] * weight);\r\n\r\n const total = whalePower + activePower + smallPower;\r\n\r\n const chartData = [\r\n (whalePower \/ total) * 100,\r\n (activePower \/ total) * 100,\r\n (smallPower \/ total) * 100\r\n ];\r\n\r\n if (daoChart) {\r\n daoChart.data.datasets[0].data = chartData;\r\n daoChart.update();\r\n } else {\r\n daoChart = new Chart(daoChartCtx, {\r\n type: 'doughnut',\r\n data: {\r\n labels: daoBaseData.labels,\r\n datasets: [{\r\n data: chartData,\r\n backgroundColor: [chartColors.whales, chartColors.active, chartColors.small],\r\n borderColor: ['rgb(245, 158, 11)', 'rgb(20, 184, 166)', 'rgb(107, 114, 128)'],\r\n borderWidth: 1\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n cutout: '75%',\r\n plugins: {\r\n legend: { position: 'bottom', labels: { font: { size: 14 }, color: '#e2e8f0' } },\r\n title: { display: true, text: 'Voting Power Distribution in DAO', font: { size: 18, weight: 'bold' }, color: '#e2e8f0' },\r\n tooltip: {\r\n callbacks: {\r\n label: function(context) {\r\n const label = context.label || '';\r\n const value = context.parsed;\r\n return `${label}: ${value.toFixed(1)}%`;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n \r\n let explanationText = '';\r\n if (reputationWeight < 20) {\r\n explanationText = 'With a reputation weight of ' + reputationWeight + '%, voting power relies almost entirely on token holdings. This creates a risk of power concentration among large investors.';\r\n } else if (reputationWeight > 80) {\r\n explanationText = 'With a reputation weight of ' + reputationWeight + '%, voting power is determined by contribution and activity. This encourages participation and protects against plutocracy.';\r\n } else {\r\n explanationText = 'The hybrid model with a reputation weight of ' + reputationWeight + '% balances financial input and actual activity, creating a fair and sustainable governance system.';\r\n }\r\n \r\n if (daoExplanation) daoExplanation.textContent = explanationText;\r\n if (reputationValueSpan) reputationValueSpan.textContent = `${reputationWeight}%`;\r\n }\r\n\r\n if (reputationSlider) {\r\n reputationSlider.addEventListener('input', (e) => {\r\n updateDaoChart(parseInt(e.target.value, 10));\r\n });\r\n }\r\n\r\n updateDaoChart(50);\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>hobbi.st: Money for Humanity | Build Your Kingdom | Uni-ver-city of Happiness hobbi.st HOME INEQUALITY MECHANICS KINGDOM PHILOSOPHY TECHNOLOGY TOKENIZATION ECOSYSTEM Start Game \u20bf \u2665 XP Uni-ver-city of Happiness is open Money for all people hobbi.st 2030 Turn Life into a Game, and Actions into Capital Forget about boring lessons and courses. hobbist turns the […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":-8,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-13650","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/comments?post=13650"}],"version-history":[{"count":5,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13650\/revisions"}],"predecessor-version":[{"id":16669,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13650\/revisions\/16669"}],"wp:attachment":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/media?parent=13650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}