{"id":13487,"date":"2025-10-27T11:45:44","date_gmt":"2025-10-27T05:45:44","guid":{"rendered":"http:\/\/hobbi.st\/?page_id=13487"},"modified":"2025-10-27T11:54:16","modified_gmt":"2025-10-27T05:54:16","slug":"ard","status":"publish","type":"page","link":"https:\/\/hobbi.st\/ru\/ard\/","title":{"rendered":"\u0421\u0432\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e."},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\n \n \n hobbi.st: \u041f\u043e\u0441\u0442\u0440\u043e\u0439 \u0441\u0432\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/title>\n <!-- \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 Tailwind CSS --><script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <!-- \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 Font Awesome \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a --><link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <!-- \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 Inter (\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439) \u0438 Montserrat (\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438) --><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@800;900&family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n \/\/ \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f Tailwind \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b\n tailwind.config = {\n darkMode: 'class', \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c 'class' \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b\n }\n <\/script>\n\n <style>\n \/* ========================================================= *\/\n \/* 1. \u0411\u0410\u0417\u041e\u0412\u042b\u0415 \u0422\u0415\u041c\u042b *\/\n \/* ========================================================= *\/\n\n body {\n font-family: 'Inter', sans-serif;\n scroll-behavior: smooth;\n transition: background-color 0.3s, color 0.3s;\n }\n\n \/* --- DARK MODE (\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) --- *\/\n body {\n background-color: #0d1117; \/* GitHub Dark Theme Background *\/\n color: #e2e8f0; \/* Light Text *\/\n }\n .section-bg-primary {\n background-color: #10141c;\n }\n .text-default-light {\n color: #e2e8f0;\n }\n .text-default-muted {\n color: #94a3b8;\n }\n .card-bg {\n background-color: #1a202c; \/* Slightly lighter dark *\/\n border: 1px solid #3b82f630;\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);\n }\n\n \/* --- LIGHT MODE (\u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u0430\u0441\u0441 'light-mode') --- *\/\n .light-mode {\n background-color: #f7f7f7; \/* Very Light BG *\/\n color: #1a202c; \/* Dark Text *\/\n }\n .light-mode .section-bg-primary {\n background-color: #ffffff;\n }\n .light-mode .text-default-light {\n color: #1a202c; \/* Dark text for primary elements *\/\n }\n .light-mode .text-default-muted {\n color: #64748b; \/* Gray text for secondary elements *\/\n }\n .light-mode .card-bg {\n background-color: #ffffff;\n border: 1px solid #e2e8f0;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); \/* Soft standard shadow *\/\n }\n .light-mode .card-bg:hover {\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);\n }\n\n \/* ========================================================= *\/\n \/* 2. \u0410\u041a\u0426\u0415\u041d\u0422\u042b (\u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u043e\u0442 \u0444\u043e\u043d\u0430) *\/\n \/* ========================================================= *\/\n\n h1, h2, h3 {\n font-family: 'Montserrat', sans-serif;\n }\n\n \/* \u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 *\/\n .neon-title {\n background-image: linear-gradient(90deg, #10b981, #3b82f6); \/* Teal to Blue *\/\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n \/* \u0421\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u0435\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u0435 *\/\n text-shadow: 0 0 10px rgba(59, 130, 246, 0.4);\n }\n .light-mode .neon-title {\n text-shadow: none; \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u043d\u0435\u043e\u043d\u043e\u0432\u043e\u0435 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u0432 \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0442\u0435\u043c\u0435 *\/\n }\n\n \/* \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a (\u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u044b \u043a card-bg) *\/\n .card-bg {\n transition: all 0.3s ease;\n }\n .card-bg:hover {\n transform: translateY(-4px);\n }\n\n \/* \u0421\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u0438 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435\u043c (\u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c) *\/\n .neon-cta-button {\n background: linear-gradient(90deg, #10b981, #3b82f6);\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n .neon-cta-button::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 300%;\n height: 300%;\n background: rgba(255, 255, 255, 0.1);\n transition: all 0.6s;\n border-radius: 50%;\n transform: translate(-50%, -50%) scale(0);\n z-index: 0;\n }\n .neon-cta-button:hover::after {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0;\n }\n .neon-cta-button span {\n position: relative;\n z-index: 2;\n }\n\n \/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043c\u0438\u0433\u0430\u044e\u0449\u0435\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 *\/\n @keyframes typing {\n from { width: 0; }\n to { width: 100%; }\n }\n @keyframes blink-caret-dark {\n from, to { border-color: transparent }\n 50% { border-color: #3b82f6; }\n }\n @keyframes blink-caret-light {\n from, to { border-color: transparent }\n 50% { border-color: #1a202c; }\n }\n .typing-text {\n overflow: hidden; \n border-right: .15em solid #3b82f6; \n white-space: nowrap; \n margin: 0 auto; \n letter-spacing: .1em; \n animation: \n typing 3.5s steps(40, end) forwards,\n blink-caret-dark .75s step-end infinite;\n max-width: 100%;\n }\n .light-mode .typing-text {\n border-right-color: #1a202c;\n animation: \n typing 3.5s steps(40, end) forwards,\n blink-caret-light .75s step-end infinite;\n }\n\n \/* ========================================================= *\/\n \/* 3. \u0410\u0414\u0410\u041f\u0422\u0418\u0412\u041d\u041e\u0421\u0422\u042c (FIXED) *\/\n \/* ========================================================= *\/\n\n @media (max-width: 640px) { \/* \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u043e\u0432 <= 640px (\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435) *\/\n \/* \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c animation \u0438 white-space: nowrap \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 *\/\n .typing-text {\n white-space: normal; \/* \u0420\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0442\u0435\u043a\u0441\u0442\u0430 *\/\n border-right: none; \/* \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u043a\u0443\u0440\u0441\u043e\u0440 *\/\n animation: none !important; \/* \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e *\/\n width: auto; \/* \u0421\u043d\u0438\u043c\u0430\u0435\u043c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b *\/\n font-size: 1.5rem !important; \/* text-3xl (24px) \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 *\/\n }\n \n \/* \u041e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 *\/\n .hero-title {\n font-size: 2.5rem !important; \/* text-4xl (36px) \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 *\/\n }\n\n \/* \u0424\u0438\u043a\u0441 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u043b\u0430 \u0432\u0430\u0436\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 \u0441\u043e\u0432\u0441\u0435\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 *\/\n #theme-toggle {\n top: 1rem;\n right: 1rem;\n width: 40px;\n height: 40px;\n }\n }\n\n \/* \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0446\u0435\u043d \u0441 \u0444\u043e\u043a\u0443\u0441\u043e\u043c *\/\n .pricing-card {\n position: relative;\n transition: all 0.3s;\n }\n .pricing-card.featured {\n border-color: #10b981 !important; \/* \u0423\u0441\u0438\u043b\u0438\u0432\u0430\u0435\u043c \u0433\u0440\u0430\u043d\u0438\u0446\u0443 *\/\n box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);\n transform: scale(1.05);\n z-index: 10;\n }\n .light-mode .pricing-card.featured {\n box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);\n border-color: #059669 !important;\n }\n\n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0432 \u0444\u0443\u0442\u0435\u0440\u0435 *\/\n .footer-logo {\n background-image: linear-gradient(45deg, #f59e0b, #3b82f6);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044f \u0442\u0435\u043c\u044b *\/\n #theme-toggle {\n position: fixed;\n top: 1.5rem;\n right: 1.5rem;\n width: 48px;\n height: 48px;\n background-color: var(--toggle-bg-color);\n border: 2px solid var(--toggle-border-color);\n color: var(--toggle-icon-color);\n cursor: pointer;\n z-index: 50;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n }\n\n \/* \u0426\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043c\u044b *\/\n body {\n --toggle-bg-color: #1a202c;\n --toggle-border-color: #3b82f6;\n --toggle-icon-color: #fcd34d; \/* Yellow for sun\/moon *\/\n }\n .light-mode {\n --toggle-bg-color: #ffffff;\n --toggle-border-color: #cbd5e1;\n --toggle-icon-color: #3b82f6; \/* Blue for sun\/moon *\/\n }\n\n <\/style>\n<\/head>\n\n<body class=\"light-mode\"> \n \n <!-- \u041a\u041d\u041e\u041f\u041a\u0410 \u041f\u0415\u0420\u0415\u041a\u041b\u042e\u0427\u0415\u041d\u0418\u042f \u0422\u0415\u041c\u042b --><button id=\"theme-toggle\" class=\"rounded-full shadow-lg hover:scale-105\">\n <i id=\"theme-icon\" class=\"fa-solid fa-moon text-xl\"><\/i>\n <\/button>\n \n <!-- HEADER & HERO SECTION --><header class=\"min-h-screen flex items-center justify-center p-6 md:p-12\" id=\"hero\">\n <div class=\"text-center max-w-5xl\">\n <p class=\"text-xl md:text-2xl text-teal-600 light-mode:text-teal-600 mb-4 font-semibold\">hobbi.st \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442<\/p>\n <h1 class=\"hero-title text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-extrabold mb-6 leading-tight\">\n <span class=\"neon-title block text-default-light\">\u041f\u043e\u0441\u0442\u0440\u043e\u0439 \u0441\u0432\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e.<\/span>\n <span class=\"block typing-text text-2xl sm:text-3xl md:text-5xl lg:text-6xl mt-4 text-indigo-600 light-mode:text-indigo-600\">\n \u0420\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u043b\u0435\u0433\u043a\u043e \u043a\u0430\u043a \u0438\u0433\u0440\u0430.\n <\/span>\n <\/h1>\n <p class=\"text-lg md:text-xl text-default-muted max-w-3xl mx-auto mb-10\">\n \u0417\u0430\u0431\u0443\u0434\u044c \u043e \u0441\u043a\u0443\u0447\u043d\u044b\u0445 \u0443\u0440\u043e\u043a\u0430\u0445 \u0438 \u043a\u0443\u0440\u0441\u0430\u0445. hobbist \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0443\u0442\u0438\u043d\u0443 \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0432 \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0432\u0435\u0441\u0442\u044b, \u0443\u0440\u043e\u0432\u043d\u0438 \u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f. \u0422\u0432\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u2014 \u044d\u0442\u043e \u0440\u043e\u0441\u0442 \u0442\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430.\n <\/p>\n <a href=\"#\" 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\">\n <span>\u041d\u0430\u0447\u0438\u043d\u0430\u044e \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 <i class=\"fa-solid fa-arrow-right ml-2\"><\/i><\/span>\n <\/a>\n <\/div>\n <\/header>\n\n <!-- VALUE PROPOSITION \/ HOW IT WORKS --><section class=\"py-20 md:py-32 section-bg-primary\" id=\"how-it-works\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\n \u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <span class=\"neon-title\">\u0413\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0416\u0438\u0437\u043d\u0438?<\/span>\n <\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-10\">\n \n <!-- STEP 1: Kingdom (Buildings) --><div class=\"card-bg p-6 rounded-2xl text-center\">\n <i class=\"fa-solid fa-castle text-6xl text-yellow-500 mb-4\"><\/i>\n <h3 class=\"text-2xl font-bold mb-3 text-default-light\">\u0428\u0430\u0433 1: \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/h3>\n <p class=\"text-default-muted\">\u0422\u0432\u043e\u0435 \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0437\u0434\u0430\u043d\u0438\u0439 (\u0417\u0430\u043c\u043e\u043a, \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0420\u044b\u043d\u043e\u043a) \u2014 \u043e\u043d\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442 \u0441\u0444\u0435\u0440\u044b \u0436\u0438\u0437\u043d\u0438 (\u0417\u0434\u043e\u0440\u043e\u0432\u044c\u0435, \u0417\u043d\u0430\u043d\u0438\u044f, \u0424\u0438\u043d\u0430\u043d\u0441\u044b).<\/p>\n <span class=\"block mt-4 text-sm text-teal-600 light-mode:text-teal-600\">\u0420\u043e\u0441\u0442 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0444\u0435\u0440\u0435 = \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0432 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0435.<\/span>\n <\/div>\n\n <!-- STEP 2: Quests (Tasks) --><div class=\"card-bg p-6 rounded-2xl text-center\">\n <i class=\"fa-solid fa-scroll text-6xl text-indigo-500 mb-4\"><\/i>\n <h3 class=\"text-2xl font-bold mb-3 text-default-light\">\u0428\u0430\u0433 2: \u041a\u0432\u0435\u0441\u0442\u044b<\/h3>\n <p class=\"text-default-muted\">\u0415\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 (\u043f\u0440\u043e\u0431\u0435\u0436\u043a\u0430, \u0447\u0442\u0435\u043d\u0438\u0435, \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435) \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0432\u0435\u0441\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0448\u044c \u043a \u043d\u0443\u0436\u043d\u044b\u043c \u0437\u0434\u0430\u043d\u0438\u044f\u043c.<\/p>\n <span class=\"block mt-4 text-sm text-teal-600 light-mode:text-teal-600\">\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043b \u043a\u0432\u0435\u0441\u0442 = \u041f\u043e\u043b\u0443\u0447\u0438\u043b XP.<\/span>\n <\/div>\n\n <!-- STEP 3: Rewards (XP, Coins, Level) --><div class=\"card-bg p-6 rounded-2xl text-center\">\n <i class=\"fa-solid fa-star-of-life text-6xl text-red-500 mb-4\"><\/i>\n <h3 class=\"text-2xl font-bold mb-3 text-default-light\">\u0428\u0430\u0433 3: \u041d\u0430\u0433\u0440\u0430\u0434\u044b<\/h3>\n <p class=\"text-default-muted\">XP, Coins, \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u0423\u0440\u043e\u0432\u043d\u044f \u0437\u0434\u0430\u043d\u0438\u0439 \u0438 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0439 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0440\u0430\u043d\u0433\u0438 \u0438 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0438\u0440\u0443\u0439 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441.<\/p>\n <span class=\"block mt-4 text-sm text-teal-600 light-mode:text-teal-600\">\u0423\u0440\u043e\u0432\u0435\u043d\u044c \u0440\u0430\u0441\u0442\u0435\u0442 = \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0442\u0441\u044f.<\/span>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <!-- KEY FEATURES --><section class=\"py-20 md:py-32\" id=\"features\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\n \u041d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0440\u0435\u043a\u0435\u0440, \u0430 <span class=\"neon-title\">\u0426\u0435\u043b\u0430\u044f \u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/span>\n <\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <!-- Feature 1: GamiPress Integration --><div class=\"card-bg p-6 rounded-xl\">\n <i class=\"fa-solid fa-medal text-4xl text-yellow-500 mb-4\"><\/i>\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">\u0418\u0441\u0442\u0438\u043d\u043d\u0430\u044f \u0413\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/h3>\n <p class=\"text-default-muted\">\u0420\u0430\u043d\u0433\u0438, \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f, \u0437\u043d\u0430\u0447\u043a\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u0442\u0432\u043e\u0439 \u0443\u0441\u043f\u0435\u0445 \u043e\u0442\u043c\u0435\u0447\u0435\u043d \u0438 \u043d\u0430\u0433\u0440\u0430\u0436\u0434\u0435\u043d. \u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u043e\u0447\u043a\u043e\u0432. \u0411\u0435\u0440\u0443 \u0441\u0432\u043e\u0439 1\u044b\u0439 \u0437\u043d\u0430\u0447\u043e\u043a.<\/p>\n <\/div>\n\n <!-- Feature 2: Community & BuddyPress --><div class=\"card-bg p-6 rounded-xl\">\n <i class=\"fa-solid fa-users-line text-4xl text-teal-500 mb-4\"><\/i>\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">\u0421\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441<\/h3>\n <p class=\"text-default-muted\">\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0439 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438. \u0414\u0435\u043b\u0438\u0441\u044c \u043a\u0432\u0435\u0441\u0442\u0430\u043c\u0438, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0439 \u0441\u0438\u043d\u0434\u0438\u043a\u0430\u0442\u044b \u043f\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0430\u043c, \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0439 \u0432 \"\u0412\u043e\u0439\u043d\u0430\u0445 \u0414\u0443\u0445\u043e\u0432\" (PvP-\u043a\u0432\u0435\u0441\u0442\u0430\u0445). \u0421\u043e\u0431\u0438\u0440\u0430\u044e \u0441\u0432\u043e\u0439 \u0441\u0438\u043d\u0434\u0438\u043a\u0430\u0442.<\/p>\n <\/div>\n\n <!-- Feature 3: Tutor LMS --><div class=\"card-bg p-6 rounded-xl\">\n <i class=\"fa-solid fa-graduation-cap text-4xl text-indigo-500 mb-4\"><\/i>\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u043a \u041a\u0432\u0435\u0441\u0442<\/h3>\n <p class=\"text-default-muted\">\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0439 \u0441\u0432\u043e\u0438\u043c\u0438 \u043a\u0443\u0440\u0441\u0430\u043c\u0438 \u0438 \u0443\u0440\u043e\u043a\u0430\u043c\u0438 \u043f\u0440\u044f\u043c\u043e \u0441 \u043f\u0430\u043d\u0435\u043b\u0438 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430. \u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0434\u0430\u0435\u0442 XP \u0442\u0432\u043e\u0435\u043c\u0443 \u0437\u0434\u0430\u043d\u0438\u044e \"\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\". \u0421\u0442\u0440\u043e\u044e \u0441\u0432\u043e\u044e \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430.<\/p>\n <\/div>\n\n <!-- Feature 4: Financial Growth --><div class=\"card-bg p-6 rounded-xl\">\n <i class=\"fa-solid fa-chart-pie text-4xl text-pink-500 mb-4\"><\/i>\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">\u0420\u0435\u0430\u043b\u044c\u043d\u0430\u044f \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0438 \u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430<\/h3>\n <p class=\"text-default-muted\">\u0417\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0439 Hobbist Coins \u0437\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u0432\u0435\u0441\u0442\u043e\u0432. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0432\u0435\u0441\u0442\u044b \u044d\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u0445 \u0441\u0442\u0440\u0430\u043d\u044b \u0438 \u043c\u0438\u0440\u0430. \u041f\u0440\u0435\u043c\u0438\u0443\u043c-\u043f\u043b\u0430\u043d\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u0443\u0440\u0441\u044b.<\/p>\n <\/div>\n\n <!-- Feature 5: Advanced Analytics --><div class=\"card-bg p-6 rounded-xl\">\n <i class=\"fa-solid fa-magnifying-glass-chart text-4xl text-cyan-500 mb-4\"><\/i>\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">\u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430<\/h3>\n <p class=\"text-default-muted\">\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0439 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0432 \u0432\u0438\u0434\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432. \u0421\u043c\u043e\u0442\u0440\u0438, \u043a\u0430\u043a\u0438\u0435 \u0441\u0444\u0435\u0440\u044b \u0436\u0438\u0437\u043d\u0438 (\u0437\u0434\u0430\u043d\u0438\u0439) \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0430 \u043a\u0430\u043a\u0438\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0442\u0432\u043e\u0435\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f.<\/p>\n <\/div>\n\n <!-- Feature 6: Simplicity --><div class=\"card-bg p-6 rounded-xl\">\n <i class=\"fa-solid fa-rocket text-4xl text-green-500 mb-4\"><\/i>\n <h3 class=\"text-2xl font-bold mb-2 text-default-light\">\u041f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0438 UX<\/h3>\n <p class=\"text-default-muted\">\u0418\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439, \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043a\u043b\u0438\u043a\u043e\u0432. \u0424\u043e\u043a\u0443\u0441 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438, \u0430 \u043d\u0435 \u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- PRICING SECTION --><section class=\"py-20 md:py-32 section-bg-primary\" id=\"pricing\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\n \u0412\u044b\u0431\u0435\u0440\u0438 \u0441\u0432\u043e\u0439 <span class=\"neon-title\">\u041f\u043b\u0430\u043d \u0420\u0430\u0437\u0432\u0438\u0442\u0438\u044f<\/span>\n <\/h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-6 max-w-6xl mx-auto\">\n \n <!-- Plan 1: Free --><div class=\"pricing-card card-bg p-8 rounded-2xl flex flex-col\">\n <h3 class=\"text-3xl font-bold mb-4 text-default-light\">\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e<\/h3>\n <p class=\"text-5xl font-extrabold mb-6 text-teal-500\">0 <span class=\"text-xl text-default-muted\">KZT\/\u043c\u0435\u0441<\/span><\/p>\n <p class=\"text-default-muted mb-6 flex-grow\">\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f. \u0418\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 \u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430 \u0441 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439.<\/p>\n <ul class=\"space-y-3 text-sm flex-grow mb-8\">\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> 3 \u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u041a\u0432\u0435\u0441\u0442\u0430<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u041f\u0430\u043d\u0435\u043b\u044c \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> 1 \u041f\u0440\u043e\u0431\u043d\u044b\u0439 \u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u041a\u0432\u0435\u0441\u0442 (Coins)<\/li>\n <li class=\"flex items-center text-red-500\"><i class=\"fa-solid fa-xmark text-red-500 mr-3\"><\/i> \u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u041a\u0443\u0440\u0441\u043e\u0432<\/li>\n <li class=\"flex items-center text-red-500\"><i class=\"fa-solid fa-xmark text-red-500 mr-3\"><\/i> \u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430<\/li>\n <\/ul>\n <button class=\"neon-cta-button py-3 px-6 rounded-xl text-white font-semibold\">\u041d\u0430\u0447\u0438\u043d\u0430\u044e<\/button>\n <\/div>\n \n <!-- Plan 2: Basic --><div class=\"pricing-card card-bg p-8 rounded-2xl flex flex-col\">\n <h3 class=\"text-3xl font-bold mb-4 text-default-light\">\u0411\u0430\u0437\u043e\u0432\u044b\u0439<\/h3>\n <p class=\"text-5xl font-extrabold mb-6 text-teal-500\">1500 <span class=\"text-xl text-default-muted\">KZT\/\u043c\u0435\u0441<\/span><\/p>\n <p class=\"text-default-muted mb-6 flex-grow\">\u0414\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432 \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u0421\u043d\u0438\u043c\u0430\u0435\u0442 \u043b\u0438\u043c\u0438\u0442\u044b \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u0438\u044f.<\/p>\n <ul class=\"space-y-3 text-sm flex-grow mb-8\">\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u041d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e \u041a\u0432\u0435\u0441\u0442\u043e\u0432<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u0420\u0430\u043d\u0433 \"\u0411\u043e\u0435\u0446\" \u0432 \u0412\u043e\u0439\u043d\u0430\u0445 \u0414\u0443\u0445\u043e\u0432<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u041a\u0432\u0435\u0441\u0442\u044b (+Coins & Energy)<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u041a\u0443\u0440\u0441\u043e\u0432 (20%)<\/li>\n <li class=\"flex items-center text-red-500\"><i class=\"fa-solid fa-xmark text-red-500 mr-3\"><\/i> \u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430<\/li>\n <\/ul>\n <button class=\"neon-cta-button py-3 px-6 rounded-xl text-white font-semibold\">\u0412\u044b\u0431\u0438\u0440\u0430\u044e Basic<\/button>\n <\/div>\n\n <!-- Plan 3: Premium (Featured) --><div class=\"pricing-card featured card-bg p-8 rounded-2xl flex flex-col ring-4 ring-offset-4 ring-teal-500\/50 ring-offset-transparent\">\n <div class=\"absolute top-0 right-0 bg-yellow-500 text-gray-900 text-xs font-bold py-1 px-3 rounded-bl-lg rounded-tr-xl\">\u0420\u0415\u041a\u041e\u041c\u0415\u041d\u0414\u0423\u0415\u041c<\/div>\n <h3 class=\"text-3xl font-bold mb-4 text-default-light\">\u041f\u0440\u0435\u043c\u0438\u0443\u043c<\/h3>\n <p class=\"text-5xl font-extrabold mb-6 text-teal-500\">4500 <span class=\"text-xl text-default-muted\">KZT\/\u043c\u0435\u0441<\/span><\/p>\n <p class=\"text-default-muted mb-6 flex-grow\">\u0414\u043b\u044f \u043b\u0438\u0434\u0435\u0440\u043e\u0432 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0435\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u0440\u043e\u0441\u0442\u0430 \u0438 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0430.<\/p>\n <ul class=\"space-y-3 text-sm flex-grow mb-8\">\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u0412\u0441\u0451 \u0438\u0437 Basic +<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u0420\u0430\u043d\u0433 \"\u041e\u0444\u0438\u0446\u0435\u0440\" (\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0417\u0430\u0434\u0430\u043d\u0438\u0439)<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u041a\u0443\u0440\u0441\u043e\u0432 (10% \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u044f)<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u041f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u0430\u044f \u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430 \u0438 \u0413\u0440\u0430\u0444\u0438\u043a\u0438<\/li>\n <li class=\"flex items-center text-red-500\"><i class=\"fa-solid fa-xmark text-red-500 mr-3\"><\/i> DAO-\u0413\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043d\u0438\u0435<\/li>\n <\/ul>\n <button class=\"neon-cta-button py-3 px-6 rounded-xl text-white font-semibold\">\u041f\u0435\u0440\u0435\u0445\u043e\u0436\u0443 \u043d\u0430 Premium<\/button>\n <\/div>\n\n <!-- Plan 4: VIP --><div class=\"pricing-card card-bg p-8 rounded-2xl flex flex-col\">\n <h3 class=\"text-3xl font-bold mb-4 text-default-light\">VIP<\/h3>\n <p class=\"text-5xl font-extrabold mb-6 text-teal-500\">15000 <span class=\"text-xl text-default-muted\">KZT\/\u043c\u0435\u0441<\/span><\/p>\n <p class=\"text-default-muted mb-6 flex-grow\">\u042d\u043a\u0441\u043a\u043b\u044e\u0437\u0438\u0432\u043d\u044b\u0439 \u043f\u043b\u0430\u043d. \u0422\u043e\u043b\u044c\u043a\u043e 13 \"\u0413\u0435\u043d\u0435\u0440\u0430\u043b\u043e\u0432\" \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0443. \u0412\u043b\u0438\u044f\u043d\u0438\u0435 \u0438 \u0434\u043e\u0445\u043e\u0434.<\/p>\n <ul class=\"space-y-3 text-sm flex-grow mb-8\">\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u0412\u0441\u0451 \u0438\u0437 Premium +<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u0420\u0430\u043d\u0433 \"\u041a\u043e\u0440\u043e\u043b\u044c\" (\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u041c\u0438\u0441\u0441\u0438\u0438)<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u041a\u0443\u0440\u0441\u043e\u0432 (5% \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u044f)<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> DAO: 1 Coin = 1 \u0413\u043e\u043b\u043e\u0441<\/li>\n <li class=\"flex items-center text-default-muted\"><i class=\"fa-solid fa-check text-green-500 mr-3\"><\/i> \u0414\u043e\u0445\u043e\u0434 \u043e\u0442 \u0414\u043e\u0445\u043e\u0434\u043e\u0432 \u0421\u0442\u0440\u0430\u043d\u044b<\/li>\n <\/ul>\n <button class=\"neon-cta-button py-3 px-6 rounded-xl text-white font-semibold\">\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u0443\u044e \u0432 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e<\/button>\n <\/div>\n \n <\/div>\n <p class=\"text-center text-default-muted mt-10 text-sm\">\u0426\u0435\u043d\u044b \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432 \u0442\u0435\u043d\u0433\u0435 (KZT). \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u043e\u043f\u043b\u0430\u0442\u0430 \u0432 USD (3, 10, 30 USD).<\/p>\n <\/div>\n <\/section>\n\n <!-- TESTIMONIALS\/SOCIAL PROOF --><section class=\"py-20 md:py-32\" id=\"testimonials\">\n <div class=\"container mx-auto px-6\">\n <h2 class=\"text-4xl md:text-5xl font-bold text-center mb-16 text-default-light\">\n \u0427\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u044f\u0442 <span class=\"neon-title\">\u041d\u0430\u0448\u0438 \u041a\u043e\u0440\u043e\u043b\u0438<\/span>\n <\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n \n <div class=\"card-bg p-6 rounded-xl\">\n <i class=\"fa-solid fa-quote-left text-3xl text-indigo-500 mb-4\"><\/i>\n <p class=\"text-default-muted italic mb-4\">\"\u0420\u0430\u043d\u044c\u0448\u0435 \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u043b \u0434\u0435\u043b\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0446\u0435\u043b\u044c: \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u0432\u044b\u0440\u043e\u0441\u043b\u0430 \u0432 \u0440\u0430\u0437\u044b. \u042d\u0442\u043e \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043f\u0440\u043e\u0440\u044b\u0432 \u0432 \u043b\u0438\u0447\u043d\u043e\u043c \u0440\u043e\u0441\u0442\u0435!\"<\/p>\n <div class=\"flex items-center\">\n <div class=\"w-10 h-10 bg-teal-500 rounded-full mr-3 flex items-center justify-center text-white font-bold\">\u0410\u041b<\/div>\n <div>\n <p class=\"font-bold text-default-light\">\u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u041b.<\/p>\n <p class=\"text-sm text-default-muted\">\u0423\u0440\u043e\u0432\u0435\u043d\u044c \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430: 14<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-bg p-6 rounded-xl\">\n <i class=\"fa-solid fa-quote-left text-3xl text-indigo-500 mb-4\"><\/i>\n <p class=\"text-default-muted italic mb-4\">\"\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e Premium \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0432. \u041d\u0438\u0437\u043a\u0430\u044f \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u044f \u0438 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044f, \u0443\u0436\u0435 \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u0430\u044f \u0432 \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e, \u2014 \u044d\u0442\u043e \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u043a\u0430. \u041f\u043b\u044e\u0441, \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441.\"<\/p>\n <div class=\"flex items-center\">\n <div class=\"w-10 h-10 bg-yellow-500 rounded-full mr-3 flex items-center justify-center text-white font-bold\">\u041c\u0413<\/div>\n <div>\n <p class=\"font-bold text-default-light\">\u041c\u0430\u0440\u0438\u044f \u0413.<\/p>\n <p class=\"text-sm text-default-muted\">\u0420\u0430\u043d\u0433: \u041e\u0444\u0438\u0446\u0435\u0440<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-bg p-6 rounded-xl\">\n <i class=\"fa-solid fa-quote-left text-3xl text-indigo-500 mb-4\"><\/i>\n <p class=\"text-default-muted italic mb-4\">\"\u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c. \u0421\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u044b\u0435 \u043a\u0432\u0435\u0441\u0442\u044b \u0441 \u0434\u0440\u0443\u0437\u044c\u044f\u043c\u0438 \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u044b. \u0418\u043a\u043e\u043d\u043a\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0435!\"<\/p>\n <div class=\"flex items-center\">\n <div class=\"w-10 h-10 bg-red-500 rounded-full mr-3 flex items-center justify-center text-white font-bold\">\u0418\u041a<\/div>\n <div>\n <p class=\"font-bold text-default-light\">\u0418\u0433\u043e\u0440\u044c \u041a.<\/p>\n <p class=\"text-sm text-default-muted\">\u0412 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435 2 \u0433\u043e\u0434\u0430<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <!-- FINAL CTA --><section class=\"py-20 md:py-32 section-bg-primary border-t border-default-muted light-mode:border-gray-300\" id=\"final-cta\">\n <div class=\"container mx-auto px-6 text-center\">\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6 text-default-light\">\n \u0422\u0432\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u0416\u0434\u0451\u0442.\n <\/h2>\n <p class=\"text-xl md:text-2xl text-default-muted max-w-3xl mx-auto mb-10\">\n \u0425\u0432\u0430\u0442\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u0435\u0447\u0442\u0430\u0442\u044c \u043e \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0435. \u041d\u0430\u0447\u043d\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u0440\u044f\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0435\u043d\u044c. \u0412\u0440\u0435\u043c\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0432\u043e\u0451 \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e.\n <\/p>\n <a href=\"#hero\" class=\"neon-cta-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\">\n <span>\u042f \u041d\u0430\u0447\u0438\u043d\u0430\u044e \u0421\u0442\u0440\u043e\u0438\u0442\u044c! <i class=\"fa-solid fa-fist-raised ml-3\"><\/i><\/span>\n <\/a>\n <\/div>\n <\/section>\n\n <!-- FOOTER --><footer class=\"bg-default-light light-mode:bg-white border-t border-default-muted light-mode:border-gray-200 py-10\">\n <div class=\"container mx-auto px-6 text-center\">\n <p class=\"text-3xl font-extrabold mb-4 footer-logo\">Hobbi.st<\/p>\n <div class=\"flex justify-center space-x-6 mb-6 text-default-muted\">\n <a href=\"#hero\" class=\"hover:text-teal-500\">\u0413\u043b\u0430\u0432\u043d\u0430\u044f<\/a>\n <a href=\"#how-it-works\" class=\"hover:text-teal-500\">\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/a>\n <a href=\"#pricing\" class=\"hover:text-teal-500\">\u0422\u0430\u0440\u0438\u0444\u044b<\/a>\n <a href=\"#\" class=\"hover:text-teal-500\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/a>\n <\/div>\n <div class=\"flex justify-center space-x-6 mb-6\">\n <a href=\"#\" class=\"text-default-muted hover:text-indigo-500\"><i class=\"fab fa-telegram-plane text-2xl\"><\/i><\/a>\n <a href=\"#\" class=\"text-default-muted hover:text-indigo-500\"><i class=\"fab fa-vk text-2xl\"><\/i><\/a>\n <a href=\"#\" class=\"text-default-muted hover:text-indigo-500\"><i class=\"fab fa-instagram text-2xl\"><\/i><\/a>\n <\/div>\n <p class=\"text-sm text-default-muted opacity-70\">© 2025 hobbi.st. \u0412\u0441\u0435 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043e \u0441 \u043b\u044e\u0431\u043e\u0432\u044c\u044e \u043a \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n <\/div>\n <\/footer>\n\n <!-- JAVASCRIPT FOR THEME TOGGLE AND SMOOTH SCROLL --><script>\n const themeToggle = document.getElementById('theme-toggle');\n const themeIcon = document.getElementById('theme-icon');\n const body = document.body;\n\n \/\/ 1. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u044b\n function toggleTheme() {\n if (body.classList.contains('light-mode')) {\n \/\/ \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043d\u0430 Dark Mode\n body.classList.remove('light-mode');\n themeIcon.classList.remove('fa-sun');\n themeIcon.classList.add('fa-moon');\n localStorage.setItem('theme', 'dark');\n } else {\n \/\/ \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043d\u0430 Light Mode\n body.classList.add('light-mode');\n themeIcon.classList.remove('fa-moon');\n themeIcon.classList.add('fa-sun');\n localStorage.setItem('theme', 'light');\n }\n }\n\n \/\/ 2. \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u043c\u044b \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\n function initializeTheme() {\n const savedTheme = localStorage.getItem('theme');\n \n \/\/ \u0415\u0441\u043b\u0438 \u0442\u0435\u043c\u0430 \u043d\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0430 \u0438\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0430 \u043a\u0430\u043a 'light', \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c Light Mode (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e)\n if (savedTheme === 'light' || !savedTheme) {\n body.classList.add('light-mode');\n themeIcon.classList.remove('fa-moon');\n themeIcon.classList.add('fa-sun');\n } else {\n \/\/ \u0415\u0441\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0430 \u043a\u0430\u043a 'dark', \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c Dark Mode\n body.classList.remove('light-mode');\n themeIcon.classList.remove('fa-sun');\n themeIcon.classList.add('fa-moon');\n }\n }\n\n \/\/ 3. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439\n document.addEventListener('DOMContentLoaded', () => {\n initializeTheme();\n themeToggle.addEventListener('click', toggleTheme);\n \n \/\/ \u041f\u043b\u0430\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n const href = this.getAttribute('href');\n if (href.length > 1 && href !== '#') {\n e.preventDefault();\n const targetElement = document.querySelector(href);\n if (targetElement) {\n window.scrollTo({\n top: targetElement.offsetTop,\n behavior: 'smooth'\n });\n }\n }\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n<!-- end ard -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>hobbi.st: \u041f\u043e\u0441\u0442\u0440\u043e\u0439 \u0441\u0432\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e hobbi.st \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u041f\u043e\u0441\u0442\u0440\u043e\u0439 \u0441\u0432\u043e\u0451 \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e. \u0420\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u043b\u0435\u0433\u043a\u043e \u043a\u0430\u043a \u0438\u0433\u0440\u0430. \u0417\u0430\u0431\u0443\u0434\u044c \u043e \u0441\u043a\u0443\u0447\u043d\u044b\u0445 \u0443\u0440\u043e\u043a\u0430\u0445 \u0438 \u043a\u0443\u0440\u0441\u0430\u0445. hobbist \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0443\u0442\u0438\u043d\u0443 \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0432 \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0432\u0435\u0441\u0442\u044b, \u0443\u0440\u043e\u0432\u043d\u0438 \u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f. \u0422\u0432\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u2014 \u044d\u0442\u043e \u0440\u043e\u0441\u0442 \u0442\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u0430. \u041d\u0430\u0447\u0438\u043d\u0430\u044e \u0441\u0430\u043c\u043e\u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0413\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0416\u0438\u0437\u043d\u0438? \u0428\u0430\u0433 1: \u041a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u0422\u0432\u043e\u0435 \u043a\u043e\u0440\u043e\u043b\u0435\u0432\u0441\u0442\u0432\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0437\u0434\u0430\u043d\u0438\u0439 (\u0417\u0430\u043c\u043e\u043a, \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0420\u044b\u043d\u043e\u043a) \u2014 \u043e\u043d\u0438 […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":-3,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","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-13487","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13487","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=13487"}],"version-history":[{"count":0,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/13487\/revisions"}],"wp:attachment":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/media?parent=13487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}