{"id":13717,"date":"2026-01-12T10:08:13","date_gmt":"2026-01-12T05:08:13","guid":{"rendered":"https:\/\/test.hobbi.st\/?page_id=13717"},"modified":"2026-01-12T10:08:57","modified_gmt":"2026-01-12T05:08:57","slug":"habbiness","status":"publish","type":"page","link":"https:\/\/khatm.hobbi.st\/ru\/habbiness\/","title":{"rendered":"uni-ver-city of happiness – Copy"},"content":{"rendered":"
\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 | \u0418\u0433\u0440\u0430\u0439. \u0417\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0439. \u0416\u0438\u0432\u0438.<\/title>\r\n \r\n <!-- Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <!-- Chart.js -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <!-- Font Awesome -->\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 <!-- Google Fonts -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700;900&family=Inter:wght@300;400;600&family=Tomorrow:wght@600;800&display=swap\" rel=\"stylesheet\">\r\n\r\n <script>\r\n tailwind.config = {\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 \/* Custom Styles for Glossy\/Neon effects *\/\r\n body {\r\n background-color: #0f172a;\r\n color: #f8fafc;\r\n overflow-x: hidden;\r\n }\r\n\r\n .glass-panel {\r\n background: rgba(30, 41, 59, 0.7);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);\r\n }\r\n\r\n .text-gradient-gold {\r\n background: linear-gradient(135deg, #fbbf24, #d97706);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n }\r\n\r\n .text-gradient-teal {\r\n background: linear-gradient(135deg, #2dd4bf, #0d9488);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n }\r\n\r\n .neon-glow {\r\n box-shadow: 0 0 20px rgba(20, 184, 166, 0.3);\r\n }\r\n\r\n .gold-glow {\r\n box-shadow: 0 0 25px rgba(251, 191, 36, 0.2);\r\n }\r\n\r\n \/* Range Slider Styling *\/\r\n input[type=range] {\r\n -webkit-appearance: none;\r\n background: transparent;\r\n }\r\n input[type=range]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n height: 24px;\r\n width: 24px;\r\n border-radius: 50%;\r\n background: #fbbf24;\r\n cursor: pointer;\r\n margin-top: -10px;\r\n box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);\r\n }\r\n input[type=range]::-webkit-slider-runnable-track {\r\n width: 100%;\r\n height: 4px;\r\n background: #334155;\r\n border-radius: 2px;\r\n }\r\n\r\n .hero-bg {\r\n background-image: radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.15) 0%, rgba(15, 23, 42, 1) 70%);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n <!-- NAVIGATION -->\r\n <nav class=\"fixed w-full z-50 glass-panel border-b-0 border-white\/5\">\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=\"#how-it-works\" class=\"hover:text-brand-teal transition\">\u041c\u0415\u0425\u0410\u041d\u0418\u041a\u0410<\/a>\r\n <a href=\"#kingdom\" class=\"hover:text-brand-teal transition\">\u041a\u041e\u0420\u041e\u041b\u0415\u0412\u0421\u0422\u0412\u041e<\/a>\r\n <a href=\"#calculator\" class=\"hover:text-brand-gold transition text-brand-gold\">\u0414\u041e\u0425\u041e\u0414<\/a>\r\n <a href=\"#ipo\" class=\"hover:text-brand-teal transition\">\u041b\u0418\u0427\u041d\u041e\u0415 IPO<\/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\">\r\n \u041d\u0430\u0447\u0430\u0442\u044c \u0418\u0433\u0440\u0443\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- HERO SECTION -->\r\n <header class=\"relative pt-32 pb-20 lg:pt-48 lg:pb-32 hero-bg overflow-hidden\">\r\n <!-- Floating Elements Background -->\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 \u0421\u0447\u0430\u0441\u0442\u044c\u044f \u043e\u0442\u043a\u0440\u044b\u0442<\/span>\r\n <\/div>\r\n \r\n <h1 class=\"text-5xl md:text-7xl lg:text-8xl font-display font-black leading-tight mb-8\">\r\n \u041f\u0440\u0435\u0432\u0440\u0430\u0442\u0438 \u0416\u0438\u0437\u043d\u044c <br>\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-teal-400 via-brand-teal to-emerald-500\">\u0432 \u0418\u0433\u0440\u0443<\/span>, \r\n \u0430 \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f <br>\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-amber-300 via-brand-gold to-orange-500\">\u0432 \u041a\u0430\u043f\u0438\u0442\u0430\u043b<\/span>\r\n <\/h1>\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 \u0417\u0430\u043a\u0440\u043e\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438, \u0437\u0430\u043d\u0438\u043c\u0430\u044f\u0441\u044c \u043b\u044e\u0431\u0438\u043c\u044b\u043c \u0434\u0435\u043b\u043e\u043c. \r\n \u041e\u0442 \u0448\u043a\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0434\u043e \u043f\u0435\u043d\u0441\u0438\u043e\u043d\u0435\u0440\u0430 \u2014 hobbi.st \u043f\u043b\u0430\u0442\u0438\u0442 \u0437\u0430 \u0442\u0432\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435, \u0441\u043f\u043e\u0440\u0442 \u0438 \u043f\u043e\u043c\u043e\u0449\u044c \u0434\u0440\u0443\u0433\u0438\u043c.\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('calculator').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-coins\"><\/i>\r\n \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u041c\u043e\u0439 \u0414\u043e\u0445\u043e\u0434\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 \u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442?\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Social Proof -->\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 2: THE PROBLEM\/SOLUTION (Quick Context) -->\r\n <section id=\"how-it-works\" class=\"py-20 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\">\u0421\u0442\u0430\u0440\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c<\/p>\r\n <p class=\"text-sm text-slate-400\">\u0422\u044b \u0442\u0440\u0430\u0442\u0438\u0448\u044c \u0432\u0440\u0435\u043c\u044f, \u044d\u043d\u0435\u0440\u0433\u0438\u044e \u0438 \u0434\u0435\u043d\u044c\u0433\u0438, \u0430 \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u043e\u0434\u0430\u0442\u0435\u043b\u044c \u0438\u043b\u0438 \u0431\u0430\u043d\u043a.<\/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\">\u041c\u043e\u0434\u0435\u043b\u044c Hobbi.st<\/p>\r\n <p class=\"text-sm text-slate-400\">\u0422\u0432\u043e\u0438 <strong>\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/strong> (\u0441\u043f\u043e\u0440\u0442, \u0443\u0447\u0435\u0431\u0430) \u2014 \u044d\u0442\u043e \u043c\u0430\u0439\u043d\u0438\u043d\u0433. \u0422\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0448\u044c \u0442\u043e\u043a\u0435\u043d\u044b \u0437\u0430 \u0442\u043e, \u0447\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0448\u044c\u0441\u044f \u043b\u0443\u0447\u0448\u0435.<\/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 \u041c\u0430\u0439\u043d\u0438\u043d\u0433 <span class=\"text-gradient-gold\">\u0431\u0435\u0437 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442<\/span>\r\n <\/h2>\r\n <p class=\"text-lg text-slate-400 mb-6 leading-relaxed\">\r\n \u0417\u0430\u0431\u0443\u0434\u044c \u043f\u0440\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0444\u0435\u0440\u043c\u044b. \u0422\u0432\u043e\u0435 \u0442\u0435\u043b\u043e, \u0442\u0432\u043e\u0439 \u0440\u0430\u0437\u0443\u043c \u0438 \u0442\u0432\u043e\u0435 \u0441\u0435\u0440\u0434\u0446\u0435 \u2014 \u0432\u043e\u0442 \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u0431\u044b\u0447\u0438.\r\n <\/p>\r\n <p class=\"text-lg text-slate-400 mb-8 leading-relaxed\">\r\n Hobbi.st \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <strong>Real PoW (Proof of Work)<\/strong>: \u0418\u0418 \u0438 \u041e\u0440\u0430\u043a\u0443\u043b\u044b \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0442, \u0447\u0442\u043e \u0442\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0431\u0435\u0436\u0430\u043b 5 \u043a\u043c, \u043f\u0440\u043e\u0448\u0435\u043b \u0443\u0440\u043e\u043a Python \u0438\u043b\u0438 \u043f\u043e\u043c\u043e\u0433 \u0441\u043e\u0441\u0435\u0434\u0443. \u0421\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043d\u0430\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u043d\u0430\u0433\u0440\u0430\u0434\u0443.\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 3: THE KINGDOM (Gamification) -->\r\n <section id=\"kingdom\" class=\"py-24 bg-brand-dark overflow-hidden relative\">\r\n <!-- Decor -->\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 \u0422\u0432\u043e\u0435 \u041b\u0438\u0447\u043d\u043e\u0435 <span class=\"text-gradient-teal\">\u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/span>\r\n <\/h2>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\r\n \u0416\u0438\u0437\u043d\u044c \u2014 \u044d\u0442\u043e RPG. \u041f\u0440\u043e\u043a\u0430\u0447\u0438\u0432\u0430\u0439 \u0437\u0434\u0430\u043d\u0438\u044f, \u043f\u043e\u0432\u044b\u0448\u0430\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0439 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0445\u043e\u0434\u0430.\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 <!-- Card 1 -->\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\">\u0426\u0438\u0442\u0430\u0434\u0435\u043b\u044c \u0421\u0438\u043b\u044b<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">\u0417\u0434\u043e\u0440\u043e\u0432\u044c\u0435 \u0438 \u042d\u043d\u0435\u0440\u0433\u0438\u044f<\/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\">\u041a\u0432\u0435\u0441\u0442\u044b: \u0411\u0435\u0433, \u0419\u043e\u0433\u0430, \u0421\u043e\u043d<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card 2 -->\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\">\u0411\u0430\u0448\u043d\u044f \u0417\u043d\u0430\u043d\u0438\u0439<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">\u0418\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442 \u0438 \u041d\u0430\u0432\u044b\u043a\u0438<\/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\">\u041a\u0432\u0435\u0441\u0442\u044b: \u041a\u0443\u0440\u0441\u044b, \u041a\u043d\u0438\u0433\u0438, \u042f\u0437\u044b\u043a\u0438<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card 3 -->\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\">\u0421\u043e\u043a\u0440\u043e\u0432\u0438\u0449\u043d\u0438\u0446\u0430<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">\u0411\u043e\u0433\u0430\u0442\u0441\u0442\u0432\u043e \u0438 \u0420\u0435\u0441\u0443\u0440\u0441\u044b<\/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\">\u041a\u0432\u0435\u0441\u0442\u044b: \u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u0438, \u0420\u0430\u0431\u043e\u0442\u0430<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card 4 -->\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\">\u0421\u0430\u0434\u044b \u0421\u0432\u044f\u0437\u0435\u0439<\/h3>\r\n <p class=\"text-sm text-slate-400 mb-4\">\u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0438 \u0421\u043e\u0446\u0438\u0443\u043c<\/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\">\u041a\u0432\u0435\u0441\u0442\u044b: \u0412\u043e\u043b\u043e\u043d\u0442\u0435\u0440\u0441\u0442\u0432\u043e, \u0421\u0435\u043c\u044c\u044f<\/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\">\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u0434\u043e \u0424\u0435\u0432\u0440\u0430\u043b\u044f 2026<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 4: CALCULATOR (The Hook) -->\r\n <section id=\"calculator\" class=\"py-24 bg-slate-900 relative\">\r\n <div class=\"container mx-auto px-6 max-w-6xl\">\r\n <div class=\"mb-12 text-center\">\r\n <h2 class=\"text-4xl md:text-5xl font-display font-bold mb-4\">\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u043e\u0438\u0442 \u0442\u0432\u043e\u0439 <span class=\"text-gradient-gold\">\u041f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b?<\/span><\/h2>\r\n <p class=\"text-slate-400\">\u0414\u0432\u0438\u0433\u0430\u0439 \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0438 \u0438 \u0443\u0437\u043d\u0430\u0439, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u043a\u0435\u043d\u043e\u0432 HOB \u0442\u044b \u043c\u043e\u0436\u0435\u0448\u044c \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0437\u0430 \u043c\u0435\u0441\u044f\u0446.<\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-panel rounded-3xl p-8 md:p-12 shadow-2xl border border-brand-gold\/20\">\r\n <div class=\"grid lg:grid-cols-12 gap-12\">\r\n \r\n <!-- INPUTS -->\r\n <div class=\"lg:col-span-5 space-y-10\">\r\n <!-- Hours Slider -->\r\n <div>\r\n <div class=\"flex justify-between items-end mb-4\">\r\n <label class=\"text-slate-300 font-bold\">\u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432 \u043d\u0435\u0434\u0435\u043b\u044e<\/label>\r\n <span class=\"text-2xl font-mono text-brand-teal font-bold\" id=\"disp-hours\">5 \u0447<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"input-hours\" min=\"0\" max=\"40\" value=\"5\" step=\"1\">\r\n <div class=\"flex justify-between text-xs text-slate-500 mt-2 font-mono\">\r\n <span>\u041b\u0435\u043d\u0438\u0432\u043e (0)<\/span>\r\n <span>\u0425\u0430\u0440\u0434\u043a\u043e\u0440 (40)<\/span>\r\n <\/div>\r\n <p class=\"text-xs text-slate-500 mt-2\">\u0421\u043f\u043e\u0440\u0442, \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435, \u043c\u0435\u043d\u0442\u043e\u0440\u0441\u0442\u0432\u043e, \u0432\u043e\u043b\u043e\u043d\u0442\u0435\u0440\u0441\u0442\u0432\u043e.<\/p>\r\n <\/div>\r\n\r\n <!-- Investment Slider -->\r\n <div>\r\n <div class=\"flex justify-between items-end mb-4\">\r\n <label class=\"text-slate-300 font-bold\">\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0441\u0442\u0435\u0439\u043a\u0438\u043d\u0433<\/label>\r\n <span class=\"text-2xl font-mono text-brand-gold font-bold\" id=\"disp-invest\">$0<\/span>\r\n <\/div>\r\n <input type=\"range\" id=\"input-invest\" min=\"0\" max=\"10000\" value=\"0\" step=\"100\">\r\n <div class=\"flex justify-between text-xs text-slate-500 mt-2 font-mono\">\r\n <span>$0<\/span>\r\n <span>$10,000<\/span>\r\n <\/div>\r\n <p class=\"text-xs text-slate-500 mt-2\">\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u0438 \u0432 \u0442\u043e\u043a\u0435\u043d HOB (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e) \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u0434\u043e\u0445\u043e\u0434.<\/p>\r\n <\/div>\r\n\r\n <!-- Result Box -->\r\n <div class=\"bg-slate-800\/50 rounded-xl p-6 border border-slate-700\">\r\n <div class=\"text-xs font-bold text-slate-400 uppercase tracking-widest mb-2\">\u0422\u0432\u043e\u0439 \u0434\u043e\u0445\u043e\u0434 \u0432 \u043c\u0435\u0441\u044f\u0446<\/div>\r\n <div class=\"flex items-end gap-3\">\r\n <span class=\"text-5xl font-black text-brand-gold\" id=\"result-tokens\">200<\/span>\r\n <span class=\"text-xl font-bold text-slate-500 mb-2\">HOB<\/span>\r\n <\/div>\r\n <div class=\"text-sm text-slate-400 mt-2\">\u2248 <span id=\"result-usd\" class=\"text-white font-bold\">200<\/span> USD (\u043f\u0440\u0438 \u043a\u0443\u0440\u0441\u0435 $1)<\/div>\r\n <button class=\"w-full mt-4 py-3 bg-brand-gold\/10 text-brand-gold border border-brand-gold\/50 rounded-lg hover:bg-brand-gold hover:text-slate-900 transition font-bold\">\r\n \u041d\u0430\u0447\u0430\u0442\u044c \u041c\u0430\u0439\u043d\u0438\u043d\u0433\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CHART -->\r\n <div class=\"lg:col-span-7 flex flex-col justify-center\">\r\n <h4 class=\"text-white font-bold mb-6 text-center lg:text-left\">\u0420\u043e\u0441\u0442 \u0442\u0432\u043e\u0435\u0433\u043e \u043a\u0430\u043f\u0438\u0442\u0430\u043b\u0430 (4 \u043d\u0435\u0434\u0435\u043b\u0438)<\/h4>\r\n <div class=\"relative w-full h-80\">\r\n <canvas id=\"simChart\"><\/canvas>\r\n <\/div>\r\n <div class=\"mt-6 flex justify-center gap-6 text-sm\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-slate-600\"><\/span>\r\n <span class=\"text-slate-400\">\u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u0431\u0430\u043d\u043a<\/span>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"w-3 h-3 rounded-full bg-brand-gold shadow-[0_0_10px_#fbbf24]\"><\/span>\r\n <span class=\"text-brand-gold font-bold\">Hobbi.st<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 5: PERSONAL IPO & PHILOSOPHY -->\r\n <section id=\"ipo\" class=\"py-24 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\">\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438<\/span>\r\n <h2 class=\"text-4xl md:text-5xl font-display font-bold mt-2 text-white\">\r\n \u041e\u0442 \u0425\u043e\u0431\u0431\u0438 \u043a <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600\">\u041d\u0430\u0441\u043b\u0435\u0434\u0438\u044e<\/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\">\u041d\u0430\u043a\u043e\u043f\u0438 \u0420\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u044e<\/h3>\r\n <p class=\"text-slate-400\">\u041a\u0430\u0436\u0434\u043e\u0435 \u0442\u0432\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0411\u043b\u043e\u043a\u0447\u0435\u0439\u043d. \u042d\u0442\u043e \u0442\u0432\u043e\u0435 \"Proof of Contribution\". \u0422\u0432\u043e\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0443\u0441\u043f\u0435\u0445\u0430 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u043b\u0430\u0442\u044c.<\/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\">\u0412\u044b\u043f\u0443\u0441\u0442\u0438 \u0441\u0432\u043e\u0439 \u0422\u043e\u043a\u0435\u043d (PUIT)<\/h3>\r\n <p class=\"text-slate-400\">\u041a\u043e\u0433\u0434\u0430 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u044f \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u0442 \u043f\u0438\u043a\u0430, \u0442\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0448\u044c \u0441\u0432\u043e\u0439 \u043b\u0438\u0447\u043d\u044b\u0439 \u0442\u043e\u043a\u0435\u043d. \u042d\u0442\u043e \u0430\u043a\u0446\u0438\u044f \"\u0422\u042b 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\">\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 IPO<\/h3>\r\n <p class=\"text-slate-400\">\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u0442 \u0432 \u0442\u0435\u0431\u044f. \u041f\u043e\u043b\u0443\u0447\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0430\u043f, \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043c\u0435\u0447\u0442\u0443 \u0432 \u043e\u0431\u043c\u0435\u043d \u043d\u0430 \u0434\u043e\u043b\u044e \u0432 \u0442\u0432\u043e\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0443\u0441\u043f\u0435\u0445\u0435.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"relative\">\r\n <!-- AR\/Tech Visual representation -->\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\">\u0410<\/div>\r\n <div>\r\n <div class=\"text-white font-bold\">\u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u041f.<\/div>\r\n <div class=\"text-xs text-brand-teal\">\u0423\u0440\u043e\u0432\u0435\u043d\u044c: \u041a\u043e\u0440\u043e\u043b\u044c (Lvl 50)<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <div class=\"text-xs text-slate-400\">\u041a\u0430\u043f\u0438\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/div>\r\n <div class=\"text-xl font-mono text-white\">$1,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>\u0418\u043d\u0432\u0435\u0441\u0442\u043e\u0440\u043e\u0432<\/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>\u0420\u043e\u0441\u0442 \u0442\u043e\u043a\u0435\u043d\u0430 (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\">\r\n \u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0410\u043b\u0435\u043a\u0441\u0435\u044f\r\n <\/button>\r\n <p class=\"text-xs text-slate-500 mt-3 italic\">\"\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u0435\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- TESTIMONIALS -->\r\n <section class=\"py-20 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\">\u0418\u0441\u0442\u043e\u0440\u0438\u0438 <span class=\"text-brand-gold\">\u0423\u0441\u043f\u0435\u0445\u0430<\/span><\/h2>\r\n <div class=\"grid md:grid-cols-3 gap-8\">\r\n <!-- User 1 -->\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\">\u0414\u0430\u043d\u0438\u044f\u0440, 16 \u043b\u0435\u0442<\/p>\r\n <p class=\"text-xs text-brand-teal\">\u0420\u0430\u043d\u0433: \u0411\u043e\u0435\u0446<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-400 text-sm\">\"\u0420\u0430\u043d\u044c\u0448\u0435 \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0447\u0438\u043b Python. \u0422\u0435\u043f\u0435\u0440\u044c \u044f \u043a\u0430\u0447\u0430\u044e '\u0411\u0430\u0448\u043d\u044e \u0417\u043d\u0430\u043d\u0438\u0439' \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u0437\u0430 \u044d\u0442\u043e \u0442\u043e\u043a\u0435\u043d\u044b. \u041d\u0430\u043a\u043e\u043f\u0438\u043b \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u043d\u043e\u0443\u0442\u0431\u0443\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u044f \u0434\u043e\u043c\u0430\u0448\u043a\u0443!\"<\/p>\r\n <\/div>\r\n <!-- User 2 -->\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\">\u0415\u043b\u0435\u043d\u0430, 34 \u0433\u043e\u0434\u0430<\/p>\r\n <p class=\"text-xs text-brand-teal\">\u0420\u0430\u043d\u0433: \u041e\u0444\u0438\u0446\u0435\u0440<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-400 text-sm\">\"\u042f \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0430 \u043a\u0443\u0440\u0441 \u043f\u043e \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0430\u043c\u0430 \u043d\u0430\u0448\u043b\u0430 \u043c\u043d\u0435 \u0443\u0447\u0435\u043d\u0438\u043a\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0438\u0445 \u043a\u0432\u0435\u0441\u0442\u044b. \u041c\u043e\u0439 \u043b\u0438\u0447\u043d\u044b\u0439 \u0442\u043e\u043a\u0435\u043d \u0432\u044b\u0440\u043e\u0441 \u043d\u0430 40%.\"<\/p>\r\n <\/div>\r\n <!-- User 3 -->\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\">\u0411\u043e\u0440\u0438\u0441 \u041f\u0435\u0442\u0440\u043e\u0432\u0438\u0447, 65 \u043b\u0435\u0442<\/p>\r\n <p class=\"text-xs text-brand-teal\">\u0420\u0430\u043d\u0433: \u041c\u0435\u043d\u0442\u043e\u0440<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-400 text-sm\">\"\u0414\u0435\u043b\u044e\u0441\u044c \u043e\u043f\u044b\u0442\u043e\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u0438 \u0441 \u043c\u043e\u043b\u043e\u0434\u0435\u0436\u044c\u044e. \u0427\u0443\u0432\u0441\u0442\u0432\u0443\u044e \u0441\u0435\u0431\u044f \u043d\u0443\u0436\u043d\u044b\u043c, \u043e\u0431\u0449\u0430\u044e\u0441\u044c \u0432 '\u0421\u0430\u0434\u0430\u0445 \u0421\u0432\u044f\u0437\u0435\u0439' \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u043f\u0440\u0438\u0431\u0430\u0432\u043a\u0443 \u043a \u043f\u0435\u043d\u0441\u0438\u0438. \u042d\u0442\u043e \u043d\u043e\u0432\u0430\u044f \u0436\u0438\u0437\u043d\u044c.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FINAL CTA -->\r\n <section class=\"py-24 relative overflow-hidden\">\r\n <div class=\"absolute inset-0 bg-brand-teal\/10\"><\/div>\r\n <div class=\"container mx-auto px-6 text-center relative z-10\">\r\n <h2 class=\"text-5xl md:text-7xl font-display font-black text-white mb-8\">\r\n \u0422\u0432\u043e\u0435 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u0416\u0434\u0435\u0442\r\n <\/h2>\r\n <p class=\"text-xl text-slate-300 mb-10 max-w-2xl mx-auto\">\r\n \u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u044b. \u0426\u0435\u043b\u0438 \u044f\u0441\u043d\u044b. \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0433\u043e\u0442\u043e\u0432\u044b.\r\n <br>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443.\r\n <\/p>\r\n <button class=\"px-12 py-6 bg-gradient-to-r from-brand-gold to-orange-500 text-slate-900 font-black text-2xl rounded-2xl shadow-[0_0_40px_rgba(251,191,36,0.6)] hover:scale-105 transition-transform duration-300 animate-pulse-slow\">\r\n \u041d\u0410\u0427\u0410\u0422\u042c \u0421\u0422\u0420\u041e\u0418\u0422\u0415\u041b\u042c\u0421\u0422\u0412\u041e <i class=\"fa-solid fa-arrow-right ml-4\"><\/i>\r\n <\/button>\r\n <p class=\"mt-6 text-sm text-slate-500 font-mono\">\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0432\u0445\u043e\u0434 \u0434\u043e 2026 \u0433\u043e\u0434\u0430<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FOOTER -->\r\n <footer class=\"bg-black py-12 border-t border-slate-800\">\r\n <div class=\"container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6\">\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"fa-solid fa-crown text-slate-600 text-xl\"><\/i>\r\n <span class=\"font-mono text-xl font-bold text-slate-500\">hobbi.st<\/span>\r\n <\/div>\r\n <div class=\"text-slate-600 text-sm\">\r\n © 2025 Univercity of Happiness. \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438.\r\n <\/div>\r\n <div class=\"flex gap-6 text-slate-500\">\r\n <a href=\"#\" class=\"hover:text-brand-teal transition\"><i class=\"fa-brands fa-telegram text-xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"hover:text-brand-teal transition\"><i class=\"fa-brands fa-discord text-xl\"><\/i><\/a>\r\n <a href=\"#\" class=\"hover:text-brand-teal transition\"><i class=\"fa-brands fa-twitter text-xl\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- LOGIC -->\r\n <script>\r\n \/\/ --- Calculator Logic (Adapted from moneyall.txt.php) ---\r\n const state = {\r\n hours: 5,\r\n investment: 0,\r\n ratePerHour: 10, \/\/ Tokens per hour\r\n miningYield: 0.005 \/\/ 0.5% weekly yield\r\n };\r\n\r\n let simChart = null;\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n initChart();\r\n setupListeners();\r\n updateSimulation();\r\n });\r\n\r\n function initChart() {\r\n const ctx = document.getElementById('simChart').getContext('2d');\r\n \r\n \/\/ Gradient for Hobbist line\r\n const gradient = ctx.createLinearGradient(0, 0, 0, 400);\r\n gradient.addColorStop(0, 'rgba(251, 191, 36, 0.5)'); \/\/ Gold\r\n gradient.addColorStop(1, 'rgba(251, 191, 36, 0.0)');\r\n\r\n simChart = new Chart(ctx, {\r\n type: 'line',\r\n data: {\r\n labels: ['\u041d\u0435\u0434\u0435\u043b\u044f 1', '\u041d\u0435\u0434\u0435\u043b\u044f 2', '\u041d\u0435\u0434\u0435\u043b\u044f 3', '\u041d\u0435\u0434\u0435\u043b\u044f 4'],\r\n datasets: [\r\n {\r\n label: '\u041e\u0431\u044b\u0447\u043d\u044b\u0439 \u043f\u0443\u0442\u044c',\r\n data: [0, 0, 0, 0],\r\n borderColor: '#475569', \/\/ Slate 600\r\n borderDash: [5, 5],\r\n tension: 0.4,\r\n pointRadius: 0\r\n },\r\n {\r\n label: '\u041f\u0443\u0442\u044c Hobbi.st',\r\n data: [0, 0, 0, 0],\r\n borderColor: '#fbbf24', \/\/ Brand Gold\r\n backgroundColor: gradient,\r\n fill: true,\r\n tension: 0.4,\r\n pointBackgroundColor: '#fbbf24',\r\n pointRadius: 4\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: { display: false },\r\n tooltip: { \r\n mode: 'index', \r\n intersect: false,\r\n backgroundColor: 'rgba(15, 23, 42, 0.9)',\r\n titleColor: '#f8fafc',\r\n bodyColor: '#cbd5e1',\r\n borderColor: 'rgba(255,255,255,0.1)',\r\n borderWidth: 1\r\n }\r\n },\r\n scales: {\r\n y: { \r\n beginAtZero: true, \r\n grid: { color: 'rgba(255,255,255,0.05)' },\r\n ticks: { color: '#64748b' }\r\n },\r\n x: { \r\n grid: { display: false },\r\n ticks: { color: '#64748b' }\r\n }\r\n },\r\n interaction: {\r\n mode: 'nearest',\r\n axis: 'x',\r\n intersect: false\r\n }\r\n }\r\n });\r\n }\r\n\r\n function setupListeners() {\r\n const hInput = document.getElementById('input-hours');\r\n const iInput = document.getElementById('input-invest');\r\n \r\n hInput.addEventListener('input', (e) => {\r\n state.hours = parseInt(e.target.value);\r\n document.getElementById('disp-hours').textContent = state.hours + ' \u0447';\r\n updateSimulation();\r\n });\r\n\r\n iInput.addEventListener('input', (e) => {\r\n state.investment = parseInt(e.target.value);\r\n document.getElementById('disp-invest').textContent = '$' + state.investment;\r\n updateSimulation();\r\n });\r\n }\r\n\r\n function updateSimulation() {\r\n const weeklyHours = state.hours;\r\n const invest = state.investment;\r\n const hobbistWeeklyBase = weeklyHours * state.ratePerHour;\r\n \r\n const classicData = [];\r\n const hobbistData = [];\r\n \r\n let classicAcc = 0;\r\n let hobbistAcc = 0;\r\n\r\n for(let i=1; i<=4; i++) {\r\n \/\/ Classic: Just bank interest (simplified low yield)\r\n const wYield = invest * (state.miningYield \/ 5); \/\/ Banks pay less\r\n classicAcc += wYield; \r\n classicData.push(classicAcc);\r\n\r\n \/\/ Hobbist: Activity + Staking yield\r\n const stakingYield = invest * state.miningYield;\r\n hobbistAcc += (hobbistWeeklyBase + stakingYield);\r\n hobbistData.push(hobbistAcc);\r\n }\r\n\r\n \/\/ Update Chart\r\n simChart.data.datasets[0].data = classicData;\r\n simChart.data.datasets[1].data = hobbistData;\r\n simChart.update();\r\n\r\n \/\/ Update Text Stats (Monthly Total)\r\n const totalMonthly = Math.round(hobbistAcc);\r\n \r\n \/\/ Animation for numbers\r\n animateValue(document.getElementById('result-tokens'), parseInt(document.getElementById('result-tokens').textContent), totalMonthly, 500);\r\n animateValue(document.getElementById('result-usd'), parseInt(document.getElementById('result-usd').textContent), totalMonthly, 500);\r\n }\r\n\r\n function animateValue(obj, start, end, duration) {\r\n let startTimestamp = null;\r\n const step = (timestamp) => {\r\n if (!startTimestamp) startTimestamp = timestamp;\r\n const progress = Math.min((timestamp - startTimestamp) \/ duration, 1);\r\n obj.innerHTML = Math.floor(progress * (end - start) + start);\r\n if (progress < 1) {\r\n window.requestAnimationFrame(step);\r\n }\r\n };\r\n window.requestAnimationFrame(step);\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 | \u0418\u0433\u0440\u0430\u0439. \u0417\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0439. \u0416\u0438\u0432\u0438. hobbi.st \u041c\u0415\u0425\u0410\u041d\u0418\u041a\u0410 \u041a\u041e\u0420\u041e\u041b\u0415\u0412\u0421\u0422\u0412\u041e \u0414\u041e\u0425\u041e\u0414 \u041b\u0418\u0427\u041d\u041e\u0415 IPO \u041d\u0430\u0447\u0430\u0442\u044c \u0418\u0433\u0440\u0443 \u20bf \u2665 XP Uni-ver-city \u0421\u0447\u0430\u0441\u0442\u044c\u044f \u043e\u0442\u043a\u0440\u044b\u0442 \u041f\u0440\u0435\u0432\u0440\u0430\u0442\u0438 \u0416\u0438\u0437\u043d\u044c \u0432 \u0418\u0433\u0440\u0443, \u0430 \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432 \u041a\u0430\u043f\u0438\u0442\u0430\u043b \u0417\u0430\u043a\u0440\u043e\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438, \u0437\u0430\u043d\u0438\u043c\u0430\u044f\u0441\u044c \u043b\u044e\u0431\u0438\u043c\u044b\u043c \u0434\u0435\u043b\u043e\u043c. \u041e\u0442 \u0448\u043a\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0434\u043e \u043f\u0435\u043d\u0441\u0438\u043e\u043d\u0435\u0440\u0430 \u2014 hobbi.st \u043f\u043b\u0430\u0442\u0438\u0442 \u0437\u0430 \u0442\u0432\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435, \u0441\u043f\u043e\u0440\u0442 \u0438 \u043f\u043e\u043c\u043e\u0449\u044c \u0434\u0440\u0443\u0433\u0438\u043c. \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u041c\u043e\u0439 \u0414\u043e\u0445\u043e\u0434 \u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442? Health Sync […]<\/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,"pmpro_default_level":"","footnotes":""},"class_list":["post-13717","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/comments?post=13717"}],"version-history":[{"count":4,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13717\/revisions"}],"predecessor-version":[{"id":13771,"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13717\/revisions\/13771"}],"wp:attachment":[{"href":"https:\/\/khatm.hobbi.st\/ru\/wp-json\/wp\/v2\/media?parent=13717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}