{"id":1131,"date":"2025-03-15T00:30:51","date_gmt":"2025-03-14T21:30:51","guid":{"rendered":"https:\/\/fichi.ai\/wordpress\/?page_id=1131"},"modified":"2025-08-14T16:26:03","modified_gmt":"2025-08-14T13:26:03","slug":"blog","status":"publish","type":"page","link":"https:\/\/fichi.ai\/home\/blog\/","title":{"rendered":"\u0411\u043b\u043e\u0433"},"content":{"rendered":"\n<template>\n    <div class=\"subscription-flow-overlay\" v-if=\"isVisible\">\n      <div class=\"subscription-flow-modal dark\">\n        <!-- Removing step indicator -->\n        <!-- <div class=\"step-indicator\">\n          <div \n            v-for=\"(step, index) in steps\" \n            :key=\"index\"\n            :class=\"['step', { 'active': currentStep === index, 'completed': currentStep > index }]\"\n          >\n            <div class=\"step-number\">{{ index + 1 }}<\/div>\n            <div class=\"step-name\">{{ step.name }}<\/div>\n          <\/div>\n        <\/div> -->\n        \n        <!-- Close button -->\n        <button class=\"close-button\" @click=\"close\">\u00d7<\/button>\n        \n        <!-- Step 1: Tariff Selection -->\n        <div v-if=\"currentStep === 0\" class=\"step-content\">\n          <h2>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0430\u0440\u0438\u0444<\/h2>\n          \n          <div class=\"tariff-cards\">\n            <div \n              v-for=\"(tariff, index) in tariffs\" \n              :key=\"index\" \n              :class=\"[\n                'bg-white rounded-xl p-5 border shadow-sm hover:shadow-md transition-all relative group overflow-hidden certificate-card', \n                selectedTariff === tariff.id ? (\n                  tariff.name === 'PRO' ? 'border-indigo-500 ring-4 ring-indigo-100 shadow-lg' : \n                  tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'border-purple-500 ring-4 ring-purple-100 shadow-lg' : \n                  'border-gray-500 ring-4 ring-gray-100 shadow-lg'\n                ) : (\n                  tariff.name === 'PRO' ? 'border-indigo-200' : \n                  tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'border-purple-200' : \n                  'border-gray-200'\n                )\n              ]\"\n              @click=\"selectTariff(tariff.id)\"\n            >\n              <!-- Decoration element -->\n              <div :class=\"['absolute -right-12 -top-12 w-24 h-24 rounded-full transition-colors',\n                tariff.name === 'PRO' ? 'bg-indigo-100 group-hover:bg-indigo-200' : \n                tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'bg-purple-100 group-hover:bg-purple-200' : \n                'bg-gray-100 group-hover:bg-gray-200']\"><\/div>\n              \n              <div class=\"relative z-10\">\n                <div class=\"badge-container\">\n                  <div v-if=\"tariff.isBestValue\" class=\"bg-yellow-100 text-yellow-600 text-xs font-medium rounded-full px-3 py-1 inline-block\">\n                    \u041b\u0443\u0447\u0448\u0430\u044f \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c\n                  <\/div>\n                  <div v-if=\"tariff.isPopular\" class=\"bg-purple-600 text-white text-xs font-medium rounded-full px-3 py-1 inline-block\">\n                    \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439\n                  <\/div>\n                  <div :class=\"['text-xs font-medium rounded-full px-3 py-1 inline-block',\n                    tariff.name === 'PRO' ? 'bg-indigo-100 text-indigo-600' : \n                    tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'bg-purple-100 text-purple-600' : \n                    'bg-gray-100 text-gray-600']\">\n                    {{ tariff.label }}\n                  <\/div>\n                <\/div>\n                \n                <h3 class=\"text-xl font-bold text-gray-800 mb-1\">{{ tariff.name }}<\/h3>\n                \n                <!-- Period selection -->\n                <div class=\"period-selector mb-4\">\n                  <div class=\"flex gap-2\" :class=\"{ 'justify-start': tariff.price === 0 }\">\n                    <button \n                      v-for=\"period in (tariff.price === 0 ? tariff.periods.slice(0,1) : tariff.periods)\" \n                      :key=\"period.duration\"\n                      :class=\"[\n                        'py-2 px-3 rounded-lg text-sm font-medium transition-all',\n                        tariff.price === 0 ? 'w-1\/4' : 'flex-1',\n                        selectedPeriods[tariff.id] === period.duration ? \n                          (tariff.name === 'PRO' ? 'bg-indigo-600 text-white' : \n                          tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'bg-purple-600 text-white' : \n                          'bg-gray-600 text-white') : \n                          'bg-gray-100 text-gray-600 hover:bg-gray-200'\n                      ]\"\n                      @click=\"selectPeriod(tariff.id, period.duration)\"\n                    >\n                      {{ period.label }}\n                      <span v-if=\"period.discount\" class=\"text-xs ml-1\">(\u2212{{ period.discount }}%)<\/span>\n                    <\/button>\n                  <\/div>\n                <\/div>\n                \n                <!-- Price display -->\n                <div :class=\"['text-2xl font-bold mb-3',\n                  tariff.name === 'PRO' ? 'text-indigo-600' : \n                  tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'text-purple-600' : \n                  'text-gray-600']\">\n                  {{ tariff.price === 0 ? &#8216;0 \u20bd&#8217; : calculatePrice(tariff) + &#8216; \u20bd&#8217; }}\n                <\/div>\n                \n                <div class=\"mb-2\">\n                  <div class=\"flex items-center\">\n                    <p class=\"text-gray-500 text-sm\">\n                      {{ selectedPeriods[tariff.id] || 1 + &#8216; &#8216; + \n                        getPeriodLabel(selectedPeriods[tariff.id] || 1) + &#8216; &#8216; +\n                        (tariff.name === &#8216;PRO&#8217; ? &#8216;PRO-\u0442\u0430\u0440\u0438\u0444\u0430&#8217; : &#8216;\u0442\u0430\u0440\u0438\u0444\u0430&#8217;) }}\n                    <\/p>\n                    <div v-if=\"getDiscount(tariff)\" class=\"savings-badge ml-2\">\n                      \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u044f {{ getDiscount(tariff) }}%\n                    <\/div>\n                  <\/div>\n                  <p :class=\"['text-xs font-medium',\n                    tariff.name === 'PRO' ? 'text-indigo-600' : \n                    tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'text-purple-600' : \n                    'text-gray-600']\">\n                    {{ tariff.price === 0 ? &#8216;\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u043d\u0430\u0432\u0441\u0435\u0433\u0434\u0430&#8217; : &#8216;\u0412\u0441\u0435\u0433\u043e &#8216; + getMonthlyPrice(tariff) + &#8216; \u20bd\/\u043c\u0435\u0441\u044f\u0446 \u0432\u043c\u0435\u0441\u0442\u043e &#8216; + tariff.basePrice + &#8216; \u20bd&#8217; }}\n                  <\/p>\n                <\/div>\n\n                <!-- Token visualization -->\n                <div class=\"mb-4\">\n                  <div class=\"flex justify-between items-center mb-1\">\n                    <span class=\"text-sm font-medium text-gray-700\">{{ tariff.tokens.toLocaleString() }} \u0442\u043e\u043a\u0435\u043d\u043e\u0432\/\u043c\u0435\u0441\u044f\u0446<\/span>\n                    <span class=\"text-xs text-gray-500\">\u2248 {{ tariff.requestsCount }} \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/span>\n                  <\/div>\n                  <div class=\"w-full bg-gray-200 rounded-full h-2 overflow-hidden\">\n                    <div :class=\"['h-2 rounded-full',\n                      tariff.name === 'PRO' ? 'bg-indigo-600' : \n                      tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'bg-purple-600' : \n                      'bg-gray-600']\"\n                      :style=\"{ width: tariff.tokenPercentage + '%' }\"><\/div>\n                  <\/div>\n                <\/div>\n\n                <!-- Button container -->\n                <div class=\"button-container mb-4\">\n                  <button \n                    :class=\"['w-full text-white rounded-lg px-5 py-2.5 font-medium transition-colors text-sm',\n                      tariff.name === 'PRO' ? 'bg-indigo-600 hover:bg-indigo-700' : \n                      tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'bg-purple-600 hover:bg-purple-700' : \n                      'bg-gray-600 hover:bg-gray-700']\"\n                    @click=\"tariff.price === 0 ? navigateToRegistration() : startPayment(tariff.id)\"\n                  >\n                    {{ tariff.price === 0 ? &#8216;\u041d\u0430\u0447\u0430\u0442\u044c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e&#8217; : &#8216;\u0412\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u0430\u0440\u0438\u0444&#8217; }}\n                  <\/button>\n                <\/div>\n\n                <!-- Models visualization -->\n                <div class=\"flex space-x-4 md:space-x-6\">\n                  <div class=\"flex-1\">\n                    <div class=\"text-center\">\n                      <div class=\"tooltip\">\n                        <span class=\"text-2xl font-bold text-blue-500\">{{ tariff.textModels }}<\/span>\n                        <div class=\"question-circle\">?<\/div>\n                        <div class=\"tooltip-content\">\n                          <p>\u0422\u0435\u043a\u0441\u0442 \u0418\u0418 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043f\u043e \u0442\u0430\u0440\u0438\u0444\u0443:<\/p>\n                          <p>{{ tariff.textModelsList }}<\/p>\n                        <\/div>\n                      <\/div>\n                      <p class=\"text-xs text-gray-500\">\u0422\u0435\u043a\u0441\u0442 \u0418\u0418<\/p>\n                    <\/div>\n                  <\/div>\n                  <div class=\"flex-1\">\n                    <div class=\"text-center\">\n                      <div class=\"tooltip\">\n                        <span class=\"text-2xl font-bold text-purple-500\">{{ tariff.imageModels }}<\/span>\n                        <div class=\"question-circle\">?<\/div>\n                        <div class=\"tooltip-content\">\n                          <p>\u0424\u043e\u0442\u043e \u0418\u0418 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043f\u043e \u0442\u0430\u0440\u0438\u0444\u0443:<\/p>\n                          <p>{{ tariff.imageModelsList }}<\/p>\n                        <\/div>\n                      <\/div>\n                      <p class=\"text-xs text-gray-500\">\u0424\u043e\u0442\u043e \u0418\u0418<\/p>\n                    <\/div>\n                  <\/div>\n                  <div class=\"flex-1\">\n                    <div class=\"text-center\">\n                      <div class=\"tooltip\">\n                        <span class=\"text-2xl font-bold text-pink-500\">{{ tariff.videoModels }}<\/span>\n                        <div class=\"question-circle\">?<\/div>\n                        <div class=\"tooltip-content\">\n                          <p>\u0412\u0438\u0434\u0435\u043e \u0418\u0418 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043f\u043e \u0442\u0430\u0440\u0438\u0444\u0443:<\/p>\n                          <p>{{ tariff.videoAudioModelsList }}<\/p>\n                        <\/div>\n                      <\/div>\n                      <p class=\"text-xs text-gray-500\">\u0412\u0438\u0434\u0435\u043e \u0418\u0418<\/p>\n                    <\/div>\n                  <\/div>\n                  <div class=\"flex-1\">\n                    <div class=\"text-center\">\n                      <div class=\"tooltip\">\n                        <span class=\"text-2xl font-bold text-green-500\">{{ tariff.audioModels }}<\/span>\n                        <div class=\"question-circle\">?<\/div>\n                        <div class=\"tooltip-content\">\n                          <p>\u0410\u0443\u0434\u0438\u043e \u0418\u0418 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043f\u043e \u0442\u0430\u0440\u0438\u0444\u0443:<\/p>\n                          <p>{{ tariff.videoAudioModelsList }}<\/p>\n                        <\/div>\n                      <\/div>\n                      <p class=\"text-xs text-gray-500\">\u0410\u0443\u0434\u0438\u043e \u0418\u0418<\/p>\n                    <\/div>\n                  <\/div>\n                <\/div>\n\n                <!-- Features list -->\n                <ul class=\"space-y-2 mt-4\">\n                  <li v-if=\"tariff.name === 'PRO'\" class=\"flex items-center gap-2\">\n                    <svg class=\"w-4 h-4 flex-shrink-0 text-indigo-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n                    <\/svg>\n                    <span class=\"text-gray-600 text-sm\">\u0421\u043a\u0438\u0434\u043a\u0430 20% \u043d\u0430 \u0434\u043e\u043a\u0443\u043f\u043a\u0443 \u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/span>\n                  <\/li>\n                  <li class=\"flex items-center gap-2\">\n                    <svg class=\"w-4 h-4 flex-shrink-0\" :class=\"tariff.name === 'PRO' ? 'text-indigo-500' : \n                      tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'text-purple-500' : 'text-gray-500'\" \n                      fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n                    <\/svg>\n                    <span class=\"text-gray-600 text-sm\">{{ tariff.storage }}<\/span>\n                  <\/li>\n                  <li v-for=\"feature in tariff.features\" :key=\"feature\" class=\"flex items-center gap-2\">\n                    <svg class=\"w-4 h-4 flex-shrink-0\" :class=\"tariff.name === 'PRO' ? 'text-indigo-500' : \n                      tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'text-purple-500' : 'text-gray-500'\" \n                      fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n                    <\/svg>\n                    <span class=\"text-gray-600 text-sm\">{{ feature }}<\/span>\n                  <\/li>\n                  <li class=\"flex items-center gap-2\">\n                    <svg class=\"w-4 h-4 flex-shrink-0\" :class=\"tariff.name === 'PRO' ? 'text-indigo-500' : \n                      tariff.name === '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439' ? 'text-purple-500' : 'text-gray-500'\" \n                      fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/>\n                    <\/svg>\n                    <div class=\"tooltip\">\n                      <span class=\"text-gray-600 text-sm underline cursor-help\">\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438<\/span>\n                      <div class=\"question-circle\">?<\/div>\n                      <div class=\"tooltip-content\">\n                        <div v-if=\"tariff.textModelsList\" class=\"mb-2\">\n                          <p class=\"font-medium\">\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 ({{ tariff.textModels }}):<\/p>\n                          <p>{{ tariff.textModelsList }}<\/p>\n                        <\/div>\n                        <div v-if=\"tariff.imageModelsList\" class=\"mb-2\">\n                          <p class=\"font-medium\">\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f ({{ tariff.imageModels }}):<\/p>\n                          <p>{{ tariff.imageModelsList }}<\/p>\n                        <\/div>\n                        <div v-if=\"tariff.videoAudioModelsList\">\n                          <p class=\"font-medium\">\u0412\u0438\u0434\u0435\u043e \u0438 \u0430\u0443\u0434\u0438\u043e ({{ tariff.videoModels + tariff.audioModels }}):<\/p>\n                          <p>{{ tariff.videoAudioModelsList }}<\/p>\n                        <\/div>\n                      <\/div>\n                    <\/div>\n                  <\/li>\n                  <li v-if=\"tariff.name === 'PRO'\" class=\"mt-4\">\n                    <div class=\"text-yellow-500 font-medium text-xs mb-2\">\u2b50\ufe0f \u041f\u0440\u0435\u043c\u0438\u0443\u043c \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 \u0442\u0430\u0440\u0438\u0444\u0435:<\/div>\n                    <ul class=\"space-y-1 pl-6\">\n                      <li class=\"text-gray-400 text-xs\">\u2022 MidJourney (3x)<\/li>\n                      <li class=\"text-gray-400 text-xs\">\u2022 FLUX.1 PRO<\/li>\n                      <li class=\"text-gray-400 text-xs\">\u2022 FLUX 1.1 PRO<\/li>\n                      <li class=\"text-gray-400 text-xs\">\u2022 GPT 4.5<\/li>\n                      <li class=\"text-gray-400 text-xs\">\u2022 GPT o1<\/li>\n                      <li class=\"text-gray-400 text-xs\">\u2022 Claude Opus<\/li>\n                      <li class=\"text-gray-400 text-xs\">\u2022 Grok 2<\/li>\n                    <\/ul>\n                  <\/li>\n                <\/ul>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"additional-actions\">\n            <div class=\"action-buttons-row\">\n              <button class=\"secondary-button\" @click=\"showPromoInput = !showPromoInput\">\n                <svg class=\"w-4 h-4 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z\"\/>\n                <\/svg>\n                \u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434\n              <\/button>\n              <button class=\"secondary-button\" @click=\"openPriceList\">\n                <svg class=\"w-4 h-4 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\/>\n                <\/svg>\n                \u041f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442 \u043c\u043e\u0434\u0435\u043b\u0435\u0439\n              <\/button>\n              <button class=\"secondary-button gift-button\" @click=\"openGiftCertificate\">\n                <svg class=\"w-4 h-4 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7\"\/>\n                <\/svg>\n                \u041f\u043e\u0434\u0430\u0440\u043e\u0447\u043d\u044b\u0439 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442\n              <\/button>\n              <button class=\"secondary-button tokens-button\" @click=\"openTokenPurchaseModal\">\n                <svg class=\"w-4 h-4 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\/>\n                <\/svg>\n                \u0414\u043e\u043a\u0443\u043f\u0438\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u044b\n              <\/button>\n            <\/div>\n            \n            <div v-if=\"showPromoInput\" class=\"promo-input\">\n              <input type=\"text\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434\" v-model=\"promoCode\">\n              <button @click=\"applyPromoCode\">\u041f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- Step 2: Payment Method -->\n        <div v-if=\"currentStep === 1\" class=\"step-content\">\n          <h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u043b\u0430\u0442\u044b<\/h2>\n          \n          <div class=\"payment-methods\">\n            <div \n              v-for=\"(method, index) in paymentMethods\" \n              :key=\"index\"\n              :class=\"['payment-method', selectedPayment === method.id ? 'selected' : '']\"\n              @click=\"selectPayment(method.id)\"\n            >\n              <img :src=\"method.icon\" :alt=\"method.name\">\n              <span>{{ method.name }}<\/span>\n            <\/div>\n          <\/div>\n          \n          <div class=\"payment-form\" v-if=\"selectedPayment === 2\">\n            <div class=\"form-group\">\n              <label>\u041d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b<\/label>\n              <input type=\"text\" placeholder=\"0000 0000 0000 0000\" v-model=\"cardNumber\">\n            <\/div>\n            <div class=\"form-row\">\n              <div class=\"form-group\">\n                <label>\u0421\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/label>\n                <input type=\"text\" placeholder=\"\u041c\u041c\/\u0413\u0413\" v-model=\"cardExpiry\">\n              <\/div>\n              <div class=\"form-group\">\n                <label>CVV<\/label>\n                <input type=\"password\" placeholder=\"***\" v-model=\"cardCvv\">\n              <\/div>\n            <\/div>\n            <div class=\"form-group\">\n              <label>\u0418\u043c\u044f \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0430 \u043a\u0430\u0440\u0442\u044b<\/label>\n              <input type=\"text\" placeholder=\"IVAN IVANOV\" v-model=\"cardHolder\">\n            <\/div>\n          <\/div>\n          \n          <div class=\"sberbank-pay\" v-if=\"selectedPayment === 1\">\n            <p>\u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u043f\u043b\u0430\u0442\u044b \u0421\u0431\u0435\u0440\u0431\u0430\u043d\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f.<\/p>\n          <\/div>\n          \n          <div class=\"yoomoney-pay\" v-if=\"selectedPayment === 3\">\n            <p>\u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u043f\u043b\u0430\u0442\u044b \u042eMoney \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f.<\/p>\n          <\/div>\n          \n          <div class=\"token-purchase-summary\">\n            <div class=\"summary-row\">\n              <span>\u0422\u0430\u0440\u0438\u0444:<\/span>\n              <span>{{ selectedTariffDetails.name }}<\/span>\n            <\/div>\n            <div class=\"summary-row\">\n              <span>\u0422\u043e\u043a\u0435\u043d\u043e\u0432 \u0432 \u043c\u0435\u0441\u044f\u0446:<\/span>\n              <span>{{ selectedTariffDetails.tokens.toLocaleString() }}<\/span>\n            <\/div>\n            <div class=\"summary-row total\">\n              <span>\u0418\u0442\u043e\u0433\u043e \u043a \u043e\u043f\u043b\u0430\u0442\u0435:<\/span>\n              <span>{{ finalPrice }} \u20bd<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- Step 3: Confirmation and Summary -->\n        <div v-if=\"currentStep === 2\" class=\"step-content\">\n          <h2>\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0443\u043f\u043a\u0438<\/h2>\n          \n          <div class=\"confirmation-summary\">\n            <div class=\"summary-icon\">\n              <span class=\"processing-icon\"><\/span>\n            <\/div>\n            <div class=\"processing-message\">\n              \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0432\u0430\u0448 \u043f\u043b\u0430\u0442\u0435\u0436&#8230;\n            <\/div>\n            \n            <div class=\"order-details\">\n              <div class=\"detail-row\">\n                <span>\u0417\u0430\u043a\u0430\u0437 \u2116:<\/span>\n                <span>{{ orderId }}<\/span>\n              <\/div>\n              <div class=\"detail-row\">\n                <span>\u0422\u0430\u0440\u0438\u0444:<\/span>\n                <span>{{ selectedTariffDetails.name }}<\/span>\n              <\/div>\n              <div class=\"detail-row\">\n                <span>\u0422\u043e\u043a\u0435\u043d\u043e\u0432:<\/span>\n                <span>{{ selectedTariffDetails.tokens.toLocaleString() }}<\/span>\n              <\/div>\n              <div class=\"detail-row\">\n                <span>\u0421\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u043b\u0430\u0442\u044b:<\/span>\n                <span>{{ selectedPaymentMethod.name }}<\/span>\n              <\/div>\n              <div class=\"detail-row\">\n                <span>\u0421\u0443\u043c\u043c\u0430:<\/span>\n                <span>{{ finalPrice }} \u20bd<\/span>\n              <\/div>\n            <\/div>\n            \n            <div class=\"processing-note\">\n              <p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u043e\u043a\u043d\u043e. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c \u0434\u043e 30 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n            <\/div>\n          <\/div>\n          \n          <!-- Simulating payment process -->\n          <div class=\"payment-simulation\" v-if=\"!paymentComplete\">\n            <div class=\"progress-bar\">\n              <div class=\"progress\" :style=\"{ width: progressPercent + '%' }\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- Step 4: Success Confirmation -->\n        <div v-if=\"currentStep === 3\" class=\"step-content success\">\n          <div class=\"success-icon\">\u2713<\/div>\n          <h2>\u041e\u043f\u043b\u0430\u0442\u0430 \u043f\u0440\u043e\u0448\u043b\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u043e!<\/h2>\n          \n          <div class=\"account-status\">\n            <h3>\u0412\u0430\u0448\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u0430<\/h3>\n            <div class=\"status-details\">\n              <div class=\"status-row\">\n                <span>\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0442\u0430\u0440\u0438\u0444:<\/span>\n                <span class=\"highlight\">{{ selectedTariffDetails.name }}<\/span>\n              <\/div>\n              <div class=\"status-row\">\n                <span>\u0422\u043e\u043a\u0435\u043d\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e:<\/span>\n                <span class=\"highlight\">{{ selectedTariffDetails.tokens.toLocaleString() }}<\/span>\n              <\/div>\n              <div class=\"status-row\">\n                <span>\u0421\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043e:<\/span>\n                <span class=\"highlight\">{{ subscriptionEndDate }}<\/span>\n              <\/div>\n              <div class=\"status-row\">\n                <span>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435:<\/span>\n                <span class=\"highlight\">{{ nextPaymentDate }}<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"recommended-actions\">\n            <h3>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435?<\/h3>\n            <div class=\"action-tiles\">\n              <div class=\"action-tile\">\n                <div class=\"tile-icon\">\ud83d\udcac<\/div>\n                <div class=\"tile-title\">\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0447\u0430\u0442<\/div>\n                <button @click=\"navigateTo('chat')\">\u041d\u0430\u0447\u0430\u0442\u044c<\/button>\n              <\/div>\n              <div class=\"action-tile\">\n                <div class=\"tile-icon\">\ud83d\udd27<\/div>\n                <div class=\"tile-title\">\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044c<\/div>\n                <button @click=\"navigateTo('profile')\">\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c<\/button>\n              <\/div>\n              <div class=\"action-tile\">\n                <div class=\"tile-icon\">\ud83d\udcdd<\/div>\n                <div class=\"tile-title\">\u0418\u0437\u0443\u0447\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/div>\n                <button @click=\"navigateTo('tutorial')\">\u0418\u0437\u0443\u0447\u0438\u0442\u044c<\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/template>\n  \n  <script>\n  export default {\n    data() {\n      return {\n        isVisible: true,\n        currentStep: 0,\n        steps: [\n          { name: '\u0412\u044b\u0431\u043e\u0440 \u0442\u0430\u0440\u0438\u0444\u0430' },\n          { name: '\u0421\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u043b\u0430\u0442\u044b' },\n          { name: '\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435' },\n          { name: '\u0413\u043e\u0442\u043e\u0432\u043e' }\n        ],\n        tariffs: [\n          { \n            id: 2,\n            name: 'PRO',\n            label: '\u0414\u043b\u044f \u0442\u0435\u0445 \u043a\u0442\u043e \u0432 \u0442\u0435\u043c\u0435',\n            basePrice: 1890,\n            periods: [\n              { duration: 1, label: '1 \u043c\u0435\u0441\u044f\u0446', discount: 0 },\n              { duration: 3, label: '3 \u043c\u0435\u0441\u044f\u0446\u0430', discount: 10 },\n              { duration: 6, label: '6 \u043c\u0435\u0441\u044f\u0446\u0435\u0432', discount: 15 },\n              { duration: 12, label: '1 \u0433\u043e\u0434', discount: 25 }\n            ],\n            tokens: 15000000,\n            textModels: 21,\n            maxTextModels: 21,\n            imageModels: 19,\n            maxImageModels: 19,\n            videoModels: 7,\n            maxVideoModels: 7,\n            audioModels: 2,\n            maxAudioModels: 2,\n            storage: 'Telegram \u0431\u043e\u0442 + TG Mini App',\n            price: 9990,\n            period: '6 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 PRO-\u0442\u0430\u0440\u0438\u0444\u0430',\n            savings: 12,\n            monthlyPrice: '1665',\n            originalPrice: '1890',\n            requestsCount: '5000',\n            tokenPercentage: 100,\n            isBestValue: true,\n            apiKeys: true,\n            streamingChat: true,\n            features: [\n              '\u0421\u043a\u0438\u0434\u043a\u0430 20% \u043d\u0430 \u0434\u043e\u043a\u0443\u043f\u043a\u0443 \u0442\u043e\u043a\u0435\u043d\u043e\u0432',\n              '\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u0418\u0418',\n              '\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0431\u043e\u0442\u0430\u043c \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c',\n              '\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0435 \u043e\u0431\u0449\u0435\u043d\u0438\u0435',\n              '\u041f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u043c',\n              '\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 API-\u043a\u043b\u044e\u0447\u0435\u0439',\n              '\u0412\u0435\u0431-\u043f\u043e\u0438\u0441\u043a',\n              '\u0411\u0430\u0437\u0430 \u043f\u0440\u043e\u043c\u043f\u0442\u043e\u0432'\n            ],\n            textModelsList: 'GPT 4o Mini, GPT 4o, \u2b50\ufe0f GPT o1, GPT o1 Mini, GPT o3 Mini, \u2b50\ufe0f GPT 4.5, Claude Haiku, Claude Sonnet 3.5, Claude Sonnet (22.10), \u2b50\ufe0f Claude Opus, Claude Sonnet 3.7, Perplexity, Llama 3.1-405b, Llama 3.2-90b-vision, Gemini-1.5-flash, Gemini-1.5-flash 8B, Gemini 1.5 Pro, Yandex GPT Lite, Yandex GPT Pro, \u2b50\ufe0f Grok 2, DeepSeek V3, DeepSeek R1',\n            imageModelsList: 'DALL-E 3, DALL-E 2, \u2b50\ufe0f FLUX.1 PRO, FLUX.1 LoRA, \u2b50\ufe0f MidJourney , \u2b50\ufe0f FLUX 1.1 PRO, FLUX Realism LoRA, Stable Diffusion V3, \u0423\u0434\u0430\u043b\u0438\u0442\u044c \u0444\u043e\u043d, Stable Diffusion XL, Stable Cascade, AuraFlow, Red Panda',\n            videoAudioModelsList: 'CogVideoX-5B, Luma Dream Machine, AnimateDiff, AnimateDiff Turbo, Mochi v1, Minimax Video, Kling 1.0, Suno (chirp-v3-0), Suno (chirp-v3-5)'\n          },\n          { \n            id: 1,\n            name: '\u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439',\n            label: '\u0414\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439',\n            basePrice: 790,\n            periods: [\n              { duration: 1, label: '1 \u043c\u0435\u0441\u044f\u0446', discount: 0 },\n              { duration: 3, label: '3 \u043c\u0435\u0441\u044f\u0446\u0430', discount: 10 },\n              { duration: 6, label: '6 \u043c\u0435\u0441\u044f\u0446\u0435\u0432', discount: 15 },\n              { duration: 12, label: '1 \u0433\u043e\u0434', discount: 25 }\n            ],\n            tokens: 5000000,\n            textModels: 18,\n            maxTextModels: 18,\n            imageModels: 15,\n            maxImageModels: 15,\n            videoModels: 7,\n            maxVideoModels: 7,\n            audioModels: 2,\n            maxAudioModels: 2,\n            storage: 'Telegram \u0431\u043e\u0442 + TG Mini App',\n            price: 3990,\n            period: '6 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u0442\u0430\u0440\u0438\u0444\u0430',\n            savings: 16,\n            monthlyPrice: '665',\n            originalPrice: '790',\n            requestsCount: '1700',\n            tokenPercentage: 50,\n            isPopular: true,\n            apiKeys: false,\n            streamingChat: false,\n            features: [\n              '\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u0418\u0418',\n              '\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0431\u043e\u0442\u0430\u043c \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c',\n              '\u041f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u043c',\n              '\u0412\u0435\u0431-\u043f\u043e\u0438\u0441\u043a',\n              '\u0411\u0430\u0437\u0430 \u043f\u0440\u043e\u043c\u043f\u0442\u043e\u0432'\n            ],\n            textModelsList: 'GPT 4o Mini, GPT 4o, GPT o1 Mini, GPT o3 Mini, Claude Haiku, Claude Sonnet 3.5, Claude Sonnet (22.10), Claude Sonnet 3.7, Perplexity, Llama 3.1-405b, Llama 3.2-90b-vision, Gemini-1.5-flash, Gemini-1.5-flash 8B, Gemini 1.5 Pro, Yandex GPT Lite, Yandex GPT Pro, DeepSeek V3, DeepSeek R1',\n            imageModelsList: 'DALL-E 3 (4x), DALL-E 2 (3x), FLUX.1 LoRA, FLUX Realism LoRA, Stable Diffusion V3, \u0423\u0434\u0430\u043b\u0438\u0442\u044c \u0444\u043e\u043d, Stable Diffusion XL, Stable Cascade, AuraFlow, Red Panda',\n            videoAudioModelsList: 'CogVideoX-5B, Luma Dream Machine, AnimateDiff, AnimateDiff Turbo, Mochi v1, Minimax Video, Kling 1.0, Suno (chirp-v3-0), Suno (chirp-v3-5)'\n          },\n          {\n            id: 0,\n            name: '\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439',\n            label: '\u0414\u043b\u044f \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430',\n            basePrice: 0,\n            periods: [\n              { duration: 1, label: ' 1 \u043c\u0435\u0441\u044f\u0446 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444', discount: 0 }\n            ],\n            tokens: 40000,\n            textModels: 2,\n            maxTextModels: 19,\n            imageModels: 0,\n            maxImageModels: 12,\n            videoModels: 0,\n            maxVideoModels: 7,\n            audioModels: 0,\n            maxAudioModels: 2,\n            storage: 'Telegram \u0431\u043e\u0442 + TG Mini App',\n            price: 0,\n            period: '\u041d\u0430\u0432\u0441\u0435\u0433\u0434\u0430',\n            savings: 0,\n            monthlyPrice: '0',\n            originalPrice: '0',\n            requestsCount: ' 100',\n            tokenPercentage: 10,\n            isPopular: false,\n            isBestValue: false,\n            apiKeys: false,\n            streamingChat: true,\n            features: [],\n            textModelsList: 'GPT 4o Mini, Claude Haiku',\n            imageModelsList: '',\n            videoAudioModelsList: ''\n          }\n        ],\n        selectedTariff: 3, \/\/ Default to PRO plan\n        paymentMethods: [\n          { id: 1, name: '\u0421\u0431\u0435\u0440\u0431\u0430\u043d\u043a', icon: 'sberbank-icon.svg' },\n          { id: 2, name: '\u0411\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0430', icon: 'card-icon.svg' },\n          { id: 3, name: '\u042eMoney', icon: 'yoomoney-icon.svg' }\n        ],\n        selectedPayment: 1,\n        showPromoInput: false,\n        promoCode: '',\n        discountPercent: 0,\n        \n        \/\/ Payment form\n        cardNumber: '',\n        cardExpiry: '',\n        cardCvv: '',\n        cardHolder: '',\n        \n        \/\/ Order details\n        orderId: 'ORD-' + Math.floor(Math.random() * 1000000),\n        paymentComplete: false,\n        progressPercent: 0,\n        \n        \/\/ Token purchase modal\n        showTokenPurchaseModal: false,\n        tokenPurchaseAmount: 100,\n        tokensPurchased: 793700,\n        selectedPeriods: {}\n      }\n    },\n    computed: {\n      selectedTariffDetails() {\n        return this.tariffs.find(t => t.id === this.selectedTariff)\n      },\n      finalPrice() {\n        if (this.discountPercent > 0) {\n          return Math.round(this.selectedTariffDetails.price * (1 - this.discountPercent \/ 100))\n        }\n        return this.selectedTariffDetails.price\n      },\n      selectedPaymentMethod() {\n        return this.paymentMethods.find(m => m.id === this.selectedPayment)\n      },\n      subscriptionEndDate() {\n        const date = new Date()\n        date.setMonth(date.getMonth() + 1)\n        return date.toLocaleDateString('ru-RU')\n      },\n      nextPaymentDate() {\n        const date = new Date()\n        date.setMonth(date.getMonth() + 1)\n        return date.toLocaleDateString('ru-RU')\n      }\n    },\n    methods: {\n      selectTariff(id) {\n        this.selectedTariff = id\n      },\n      selectPayment(id) {\n        this.selectedPayment = id\n      },\n      applyPromoCode() {\n        \/\/ Simulating promo code validation\n        if (this.promoCode.toUpperCase() === 'WELCOME') {\n          this.discountPercent = 10\n          alert('\u041f\u0440\u043e\u043c\u043e\u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d. \u0421\u043a\u0438\u0434\u043a\u0430 10%')\n        } else {\n          alert('\u041d\u0435\u0432\u0435\u0440\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u043e\u043a\u043e\u0434')\n        }\n      },\n      nextStep() {\n        if (this.currentStep < this.steps.length - 1) {\n          this.currentStep++\n          \n          \/\/ If we're on the confirmation step, simulate payment process\n          if (this.currentStep === 2) {\n            this.simulatePaymentProcess()\n          }\n        }\n      },\n      prevStep() {\n        if (this.currentStep > 0) {\n          this.currentStep--\n        }\n      },\n      simulatePaymentProcess() {\n        this.progressPercent = 0\n        const interval = setInterval(() => {\n          this.progressPercent += 5\n          if (this.progressPercent >= 100) {\n            clearInterval(interval)\n            setTimeout(() => {\n              this.paymentComplete = true\n              this.nextStep() \/\/ Move to success screen\n            }, 500)\n          }\n        }, 200)\n      },\n      close() {\n        this.isVisible = false\n        this.$emit('close')\n      },\n      navigateTo(destination) {\n        \/\/ Handle navigation to different sections\n        this.close()\n        this.$emit('navigate', destination)\n      },\n      \n      \/\/ Token purchase methods\n      openTokenPurchaseModal() {\n        this.showTokenPurchaseModal = true\n      },\n      closeTokenPurchaseModal() {\n        this.showTokenPurchaseModal = false\n      },\n      increaseTokenPurchaseAmount() {\n        this.tokenPurchaseAmount += 100\n        this.updateTokensPurchased()\n      },\n      decreaseTokenPurchaseAmount() {\n        if (this.tokenPurchaseAmount > 100) {\n          this.tokenPurchaseAmount -= 100\n          this.updateTokensPurchased()\n        }\n      },\n      updateTokensPurchased() {\n        \/\/ Simulating token conversion rate\n        this.tokensPurchased = Math.round(this.tokenPurchaseAmount * 7937)\n      },\n      openPriceList() {\n        \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0430\u0439\u0441-\u043b\u0438\u0441\u0442 \u0432 \u043d\u043e\u0432\u043e\u043c \u043e\u043a\u043d\u0435\n        window.open('\/price-list', '_blank', 'noopener,noreferrer')\n      },\n      \n      openGiftCertificate() {\n        \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u043e\u0434\u0430\u0440\u043e\u0447\u043d\u044b\u0445 \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0432 \u0432 \u043d\u043e\u0432\u043e\u043c \u043e\u043a\u043d\u0435\n        window.open('\/gift-certificates', '_blank', 'noopener,noreferrer')\n      },\n      selectPeriod(tariffId, duration) {\n        this.selectedPeriods[tariffId] = duration;\n      },\n      calculatePrice(tariff) {\n        if (tariff.price === 0) return 0;\n        \n        const period = this.selectedPeriods[tariff.id] || 1;\n        const selectedPeriodOption = tariff.periods.find(p => p.duration === period);\n        const discount = selectedPeriodOption ? selectedPeriodOption.discount : 0;\n        \n        const monthlyPrice = tariff.basePrice;\n        const totalPrice = monthlyPrice * period;\n        return Math.round(totalPrice * (1 - discount \/ 100));\n      },\n      getMonthlyPrice(tariff) {\n        if (tariff.price === 0) return 0;\n        \n        const period = this.selectedPeriods[tariff.id] || 1;\n        const totalPrice = this.calculatePrice(tariff);\n        return Math.round(totalPrice \/ period);\n      },\n      getPeriodLabel(months) {\n        if (months === 1) return '\u043c\u0435\u0441\u044f\u0446';\n        if (months === 6) return '\u043c\u0435\u0441\u044f\u0446\u0435\u0432';\n        if (months === 12) return '\u043c\u0435\u0441\u044f\u0446\u0435\u0432';\n        return '\u043c\u0435\u0441\u044f\u0446\u0435\u0432';\n      },\n      getDiscount(tariff) {\n        if (tariff.price === 0) return 0;\n        const period = this.selectedPeriods[tariff.id] || 1;\n        const selectedPeriodOption = tariff.periods.find(p => p.duration === period);\n        return selectedPeriodOption ? selectedPeriodOption.discount : 0;\n      },\n      navigateToRegistration() {\n        \/\/ \u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438\n        window.location.href = '\/registration';\n      },\n      \n      startPayment(tariffId) {\n        this.selectedTariff = tariffId;\n        this.currentStep = 1; \/\/ \u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043a \u0448\u0430\u0433\u0443 \u043e\u043f\u043b\u0430\u0442\u044b\n      }\n    },\n    mounted() {\n      \/\/ Set default period for paid tariffs\n      this.tariffs.forEach(tariff => {\n        if (tariff.price !== 0) {\n          this.selectedPeriods[tariff.id] = 1;\n        }\n      });\n    }\n  }\n  <\/script>\n  \n  <style scoped>\n  .subscription-flow-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.75);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 1000;\n  }\n  \n  .subscription-flow-modal {\n    background: #fff;\n    border-radius: 12px;\n    width: 1200px;\n    max-height: 90vh;\n    overflow-y: auto;\n    padding: 30px;\n    position: relative;\n  }\n  \n  .close-button {\n    position: absolute;\n    top: 20px;\n    left: 20px;\n    width: 32px;\n    height: 32px;\n    background: #333;\n    border: none;\n    border-radius: 50%;\n    color: #fff;\n    font-size: 20px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .step-content {\n    margin-top: 20px;\n  }\n  \n  .step-content h2 {\n    font-size: 24px;\n    margin-bottom: 24px;\n    text-align: center;\n  }\n  \n  \/* Tariff Cards *\/\n  .tariff-cards {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 16px;\n    margin-bottom: 30px;\n  }\n  \n  .certificate-card {\n    transition: all 0.3s ease;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    cursor: pointer;\n    padding: 1.25rem;\n  }\n  \n  .certificate-card > div {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  \n  .button-container {\n    margin: 1rem 0;\n  }\n  \n  .certificate-card .mb-4 {\n    margin-bottom: 1rem;\n  }\n  \n  .certificate-card .mb-2 {\n    margin-bottom: 0.5rem;\n  }\n  \n  .certificate-card .space-y-2 {\n    margin-top: 1rem;\n  }\n  \n  .certificate-card:hover {\n    transform: translateY(-4px);\n  }\n  \n  .certificate-card.ring-4 {\n    transform: scale(1.02);\n  }\n  \n  .certificate-card h3 {\n    font-size: 1.1rem;\n  }\n  \n  .certificate-card .text-2xl {\n    font-size: 1.4rem;\n  }\n  \n  .certificate-card .text-sm {\n    font-size: 0.8rem;\n  }\n  \n  .certificate-card .text-xs {\n    font-size: 0.7rem;\n  }\n  \n  .certificate-card .h-20 {\n    height: 60px;\n  }\n  \n  .certificate-card .mb-3 {\n    margin-bottom: 0.5rem;\n  }\n  \n  .tariff-header {\n    font-size: 20px;\n    font-weight: bold;\n    text-align: center;\n    margin-bottom: 15px;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #444;\n  }\n  \n  .tariff-header.pro {\n    color: #8e44ff;\n  }\n  \n  .tariff-tokens {\n    font-size: 18px;\n    margin-bottom: 15px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  \n  .tariff-features {\n    margin-bottom: 20px;\n  }\n  \n  .feature {\n    margin-bottom: 8px;\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  \n  .checkmark {\n    color: #4CAF50;\n  }\n  \n  .tariff-price {\n    font-size: 24px;\n    font-weight: bold;\n    text-align: center;\n    margin-top: 20px;\n  }\n  \n  \/* Payment Methods *\/\n  .payment-methods {\n    display: flex;\n    gap: 15px;\n    margin-bottom: 30px;\n  }\n  \n  .payment-method {\n    flex: 1;\n    background: #2a2a2a;\n    border-radius: 8px;\n    padding: 15px;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n    border: 2px solid transparent;\n  }\n  \n  .payment-method.selected {\n    border-color: #8e44ff;\n    background: #34294a;\n  }\n  \n  .payment-method img {\n    height: 40px;\n    width: auto;\n  }\n  \n  \/* Payment Form *\/\n  .payment-form {\n    background: #2a2a2a;\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 30px;\n  }\n  \n  .form-group {\n    margin-bottom: 15px;\n  }\n  \n  .form-row {\n    display: flex;\n    gap: 15px;\n  }\n  \n  .form-row .form-group {\n    flex: 1;\n  }\n  \n  label {\n    display: block;\n    margin-bottom: 8px;\n    color: #ccc;\n  }\n  \n  input[type=\"text\"], input[type=\"password\"] {\n    width: 100%;\n    padding: 12px;\n    background: #333;\n    border: 1px solid #444;\n    border-radius: 6px;\n    color: #fff;\n    font-size: 16px;\n  }\n  \n  \/* Token Purchase Summary *\/\n  .token-purchase-summary {\n    background: #2a2a2a;\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 30px;\n  }\n  \n  .summary-row {\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 10px;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #444;\n  }\n  \n  .summary-row.total {\n    border-bottom: none;\n    font-size: 20px;\n    font-weight: bold;\n    margin-top: 15px;\n  }\n  \n  \/* Confirmation Screen *\/\n  .confirmation-summary {\n    text-align: center;\n    margin-bottom: 30px;\n  }\n  \n  .summary-icon {\n    margin-bottom: 20px;\n  }\n  \n  .processing-icon {\n    display: inline-block;\n    width: 60px;\n    height: 60px;\n    border: 4px solid #8e44ff;\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: spin 1s linear infinite;\n  }\n  \n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n  \n  .processing-message {\n    font-size: 20px;\n    margin-bottom: 30px;\n  }\n  \n  .order-details {\n    background: #2a2a2a;\n    border-radius: 12px;\n    padding: 20px;\n    max-width: 500px;\n    margin: 0 auto 30px;\n  }\n  \n  .detail-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px 0;\n    border-bottom: 1px solid #444;\n  }\n  \n  .detail-row:last-child {\n    border-bottom: none;\n  }\n  \n  .processing-note {\n    color: #999;\n    font-size: 14px;\n  }\n  \n  .progress-bar {\n    height: 6px;\n    background: #333;\n    border-radius: 3px;\n    overflow: hidden;\n    margin-top: 30px;\n  }\n  \n  .progress {\n    height: 100%;\n    background: #8e44ff;\n    transition: width 0.2s;\n  }\n  \n  \/* Success Screen *\/\n  .step-content.success {\n    text-align: center;\n  }\n  \n  .success-icon {\n    width: 80px;\n    height: 80px;\n    background: #4CAF50;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 20px;\n    font-size: 40px;\n    color: white;\n  }\n  \n  .account-status {\n    background: #2a2a2a;\n    border-radius: 12px;\n    padding: 20px;\n    max-width: 500px;\n    margin: 30px auto;\n  }\n  \n  .status-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 12px 0;\n    border-bottom: 1px solid #444;\n  }\n  \n  .status-row:last-child {\n    border-bottom: none;\n  }\n  \n  .highlight {\n    color: #8e44ff;\n    font-weight: bold;\n  }\n  \n  .recommended-actions {\n    margin-top: 40px;\n  }\n  \n  .action-tiles {\n    display: flex;\n    gap: 20px;\n    margin-top: 20px;\n  }\n  \n  .action-tile {\n    flex: 1;\n    background: #2a2a2a;\n    border-radius: 12px;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  }\n  \n  .tile-icon {\n    font-size: 30px;\n    margin-bottom: 15px;\n  }\n  \n  .tile-title {\n    margin-bottom: 15px;\n    font-weight: bold;\n  }\n  \n  .action-tile button {\n    background: #8e44ff;\n    border: none;\n    color: white;\n    padding: 10px 20px;\n    border-radius: 6px;\n    cursor: pointer;\n    margin-top: 10px;\n  }\n  \n  .close-button-big {\n    background: #8e44ff;\n    border: none;\n    color: white;\n    padding: 14px 30px;\n    border-radius: 8px;\n    cursor: pointer;\n    font-size: 16px;\n    margin-top: 30px;\n  }\n  \n  \/* Token Purchase Modal *\/\n  .token-purchase-modal {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: #2a2a2a;\n    border-radius: 12px;\n    padding: 24px;\n    width: 400px;\n    color: white;\n    z-index: 1100;\n  }\n  \n  .modal-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 24px;\n    padding-bottom: 12px;\n    border-bottom: 1px solid #444;\n  }\n  \n  .amount-input, .tokens-result {\n    margin-bottom: 24px;\n  }\n  \n  .input-label {\n    margin-bottom: 12px;\n    color: #ccc;\n  }\n  \n  .input-group {\n    display: flex;\n    align-items: center;\n    background: #333;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  \n  .input-group button {\n    width: 44px;\n    height: 44px;\n    background: #444;\n    border: none;\n    color: white;\n    font-size: 20px;\n    cursor: pointer;\n  }\n  \n  .input-group .amount {\n    flex: 1;\n    text-align: center;\n    font-size: 18px;\n    padding: 12px;\n  }\n  \n  .buy-button {\n    width: 100%;\n    background: #8e44ff;\n    border: none;\n    color: white;\n    padding: 14px;\n    border-radius: 8px;\n    cursor: pointer;\n    font-size: 16px;\n    font-weight: bold;\n  }\n  \n  .savings-badge {\n    background: #dcfce7;\n    color: #15803d;\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n  }\n  \n  .tooltip {\n    position: static;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .question-circle {\n    width: 18px;\n    height: 18px;\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: #e5e5e5;\n    margin-left: 4px;\n    cursor: help;\n  }\n  \n  .tooltip-content {\n    display: none;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    background: #333;\n    border-radius: 8px;\n    padding: 12px;\n    font-size: 0.75rem;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n    z-index: 30;\n    color: #e5e5e5;\n    width: 90%;\n    max-width: 300px;\n    white-space: pre-wrap;\n    word-break: break-word;\n    text-align: center;\n    margin-top: -120px;\n  }\n  \n  .tooltip:hover .tooltip-content {\n    display: block;\n  }\n  \n  .dark .tooltip-content {\n    background: #333;\n    color: #e5e5e5;\n  }\n  \n  .dark .tooltip-content::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border-width: 8px;\n    border-style: solid;\n    border-color: #333 transparent transparent transparent;\n  }\n  \n  .text-center .tooltip {\n    width: 100%;\n  }\n  \n  .text-center .tooltip-content {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  \n  .additional-actions {\n    margin-top: 20px;\n    padding: 20px;\n    background: #f8fafc;\n    border-radius: 12px;\n  }\n  \n  .action-buttons-row {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n  \n  .secondary-button {\n    display: flex;\n    align-items: center;\n    padding: 10px 16px;\n    background: white;\n    border: 1px solid #e2e8f0;\n    border-radius: 8px;\n    color: #475569;\n    font-size: 14px;\n    font-weight: 500;\n    transition: all 0.2s;\n    cursor: pointer;\n  }\n  \n  .secondary-button:hover {\n    background: #f1f5f9;\n    border-color: #cbd5e1;\n  }\n  \n  .secondary-button svg {\n    width: 16px;\n    height: 16px;\n    margin-right: 8px;\n  }\n  \n  .gift-button {\n    color: #e11d48;\n    border-color: #fecdd3;\n  }\n  \n  .gift-button:hover {\n    background: #fff1f2;\n    border-color: #fda4af;\n  }\n  \n  .promo-input {\n    margin-top: 12px;\n    display: flex;\n    gap: 8px;\n    padding: 12px;\n    background: white;\n    border-radius: 8px;\n    border: 1px solid #e2e8f0;\n  }\n  \n  .promo-input input {\n    flex: 1;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n  }\n  \n  .promo-input button {\n    padding: 8px 16px;\n    background: #8e44ff;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n  \n  .promo-input button:hover {\n    background: #7c3aff;\n  }\n  \n  .button-container {\n    margin-top: auto;\n  }\n  \n  .button-container button {\n    width: 100%;\n    padding: 10px 0;\n    transition: all 0.3s ease;\n  }\n  \n  .certificate-card.ring-4 .button-container button {\n    transform: scale(1.05);\n  }\n  \n  .badge-container {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: nowrap;\n    margin-bottom: 12px;\n    min-height: 24px;\n    position: relative;\n  }\n  \n  .badge-container > div {\n    white-space: nowrap;\n    font-size: 12px;\n  }\n  \n  .absolute.top-5.right-5 {\n    top: 12px;\n    right: 12px;\n  }\n  \n  .period-selector {\n    margin-top: 12px;\n  }\n  \n  .period-selector button {\n    border: 1px solid #e2e8f0;\n    transition: all 0.2s ease;\n  }\n  \n  .period-selector button:hover {\n    transform: translateY(-1px);\n  }\n  \n  \/* Dark Theme Styles *\/\n  .subscription-flow-modal.dark {\n    background: #1a1a1a;\n    color: #fff;\n  }\n  \n  .dark .step-indicator {\n    border-bottom-color: #333;\n  }\n  \n  .dark .certificate-card {\n    background: #262626;\n    border-color: #404040;\n  }\n  \n  .dark .certificate-card:hover {\n    border-color: #525252;\n  }\n  \n  .dark .certificate-card.ring-4 {\n    box-shadow: 0 8px 16px -1px rgba(0, 0, 0, 0.5);\n    transform: scale(1.03);\n  }\n  \n  .dark .certificate-card.ring-4[class*=\"border-indigo\"] {\n    box-shadow: 0 8px 16px -1px rgba(99, 102, 241, 0.3);\n  }\n  \n  .dark .certificate-card.ring-4[class*=\"border-purple\"] {\n    box-shadow: 0 8px 16px -1px rgba(147, 51, 234, 0.3);\n  }\n  \n  .dark .certificate-card.ring-4[class*=\"border-gray\"] {\n    box-shadow: 0 8px 16px -1px rgba(156, 163, 175, 0.3);\n  }\n  \n  .dark h2, \n  .dark h3 {\n    color: #fff;\n  }\n  \n  .dark .text-gray-800 {\n    color: #fff;\n  }\n  \n  .dark .text-gray-600,\n  .dark .text-gray-500 {\n    color: #a3a3a3;\n  }\n  \n  .dark .bg-gray-100 {\n    background: #333;\n  }\n  \n  .dark .bg-gray-200 {\n    background: #404040;\n  }\n  \n  .dark .bg-white {\n    background: #262626;\n  }\n  \n  .dark .border-gray-200 {\n    border-color: #404040;\n  }\n  \n  .dark .additional-actions {\n    background: #262626;\n  }\n  \n  .dark .secondary-button {\n    background: #333;\n    border-color: #404040;\n    color: #e5e5e5;\n  }\n  \n  .dark .secondary-button:hover {\n    background: #404040;\n    border-color: #525252;\n  }\n  \n  .dark .gift-button {\n    color: #f43f5e;\n    border-color: #881337;\n  }\n  \n  .dark .gift-button:hover {\n    background: #881337;\n    color: #fecdd3;\n  }\n  \n  .dark .promo-input {\n    background: #333;\n    border-color: #404040;\n  }\n  \n  .dark .promo-input input {\n    background: #262626;\n    border-color: #404040;\n    color: #fff;\n  }\n  \n  .dark .period-selector button {\n    border-color: #404040;\n  }\n  \n  .dark .period-selector button:not(.bg-indigo-600):not(.bg-purple-600) {\n    background: #333;\n    color: #e5e5e5;\n  }\n  \n  .dark .period-selector button:hover:not(.bg-indigo-600):not(.bg-purple-600) {\n    background: #404040;\n  }\n  \n  .dark .tooltip-content {\n    background: #333;\n    border-color: #404040;\n    color: #e5e5e5;\n  }\n  \n  .dark .tooltip-content::after {\n    border-color: #333 transparent transparent transparent;\n  }\n  \n  .dark .question-circle {\n    background: #404040;\n    color: #a3a3a3;\n  }\n  \n  .dark .savings-badge {\n    background: #064e3b;\n    color: #6ee7b7;\n  }\n  \n  \/* Progress bars in dark theme *\/\n  .dark .bg-blue-100 {\n    background: rgba(59, 130, 246, 0.2);\n  }\n  \n  .dark .bg-purple-100 {\n    background: rgba(147, 51, 234, 0.2);\n  }\n  \n  .dark .bg-pink-100 {\n    background: rgba(236, 72, 153, 0.2);\n  }\n  \n  .dark .bg-green-100 {\n    background: rgba(34, 197, 94, 0.2);\n  }\n  \n  .dark .bg-blue-200 {\n    background: rgba(59, 130, 246, 0.3);\n  }\n  \n  .dark .bg-purple-200 {\n    background: rgba(147, 51, 234, 0.3);\n  }\n  \n  .dark .bg-pink-200 {\n    background: rgba(236, 72, 153, 0.3);\n  }\n  \n  .dark .bg-green-200 {\n    background: rgba(34, 197, 94, 0.3);\n  }\n  \n  \/* Text colors in dark theme *\/\n  .dark .text-blue-500 {\n    color: #60a5fa;\n  }\n  \n  .dark .text-purple-500 {\n    color: #a855f7;\n  }\n  \n  .dark .text-pink-500 {\n    color: #ec4899;\n  }\n  \n  .dark .text-green-500 {\n    color: #22c55e;\n  }\n  \n  .dark .text-blue-700 {\n    color: #93c5fd;\n  }\n  \n  .dark .text-purple-700 {\n    color: #c084fc;\n  }\n  \n  .dark .text-pink-700 {\n    color: #f472b6;\n  }\n  \n  .dark .text-green-700 {\n    color: #86efac;\n  }\n  \n  \/* Badge colors in dark theme *\/\n  .dark .bg-yellow-100 {\n    background: #422006;\n  }\n  \n  .dark .text-yellow-600 {\n    color: #fbbf24;\n  }\n  \n  .dark .bg-indigo-100 {\n    background: #312e81;\n  }\n  \n  .dark .text-indigo-600 {\n    color: #818cf8;\n  }\n  \n  .dark .bg-purple-100 {\n    background: #3b0764;\n  }\n  \n  .dark .text-purple-600 {\n    color: #c084fc;\n  }\n  \n  .w-full.bg-gray-200.rounded-full {\n    background: #333;\n    position: relative;\n    overflow: hidden;\n  }\n  \n  .w-full.bg-gray-200.rounded-full .h-2 {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    transition: width 0.3s ease;\n  }\n  \n  \/* Dark Theme Styles *\/\n  .dark .w-full.bg-gray-200.rounded-full {\n    background: #404040;\n  }\n  \n  .dark .bg-indigo-600 {\n    background: #818cf8;\n  }\n  \n  .dark .bg-purple-600 {\n    background: #c084fc;\n  }\n  \n  .dark .bg-gray-600 {\n    background: #6b7280;\n  }\n  \n  \/* \u0423\u043b\u0443\u0447\u0448\u0430\u0435\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0430 \u0441 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 *\/\n  .dark .text-sm.font-medium.text-gray-700 {\n    color: #e5e5e5;\n    font-weight: 600;\n  }\n  \n  .dark .text-xs.text-gray-500 {\n    color: #d1d5db;\n  }\n  \n  \/* \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442 \u0434\u043b\u044f \u043a\u043e\u043b\u044c\u0446\u0430 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f *\/\n  .dark .ring-indigo-100 {\n    --tw-ring-color: rgba(99, 102, 241, 0.3);\n  }\n  \n  .dark .ring-purple-100 {\n    --tw-ring-color: rgba(147, 51, 234, 0.3);\n  }\n  \n  .dark .ring-gray-100 {\n    --tw-ring-color: rgba(156, 163, 175, 0.3);\n  }\n  \n  .tokens-button {\n    color: #8b5cf6;\n    border-color: #8b5cf6;\n  }\n  \n  .dark .tokens-button {\n    color: #c084fc;\n    border-color: #c084fc;\n  }\n  \n  .dark .tokens-button:hover {\n    background: rgba(192, 132, 252, 0.1);\n  }\n  \n  .tooltip-content p strong {\n    color: #fff;\n    font-weight: 700;\n  }\n  \n  .tooltip-content .premium-model {\n    color: #fef08a;\n    font-weight: 700;\n    padding: 1px 4px;\n    border-radius: 4px;\n    background: rgba(254, 240, 138, 0.1);\n  }\n  \n  .dark .tooltip-content .premium-model {\n    color: #fef08a;\n    background: rgba(254, 240, 138, 0.1);\n  }\n\n  \/* \u041c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 *\/\n  @media (max-width: 768px) {\n    .subscription-flow-modal {\n      width: 100%;\n      height: 100%;\n      max-height: 100%;\n      border-radius: 0;\n      padding: 16px;\n      margin: 0;\n    }\n\n    .tariff-cards {\n      grid-template-columns: 1fr;\n      gap: 12px;\n    }\n\n    .certificate-card {\n      padding: 16px;\n    }\n\n    .action-buttons-row {\n      flex-direction: column;\n    }\n\n    .secondary-button {\n      width: 100%;\n      justify-content: center;\n    }\n\n    .period-selector .flex {\n      flex-wrap: wrap;\n    }\n\n    .period-selector button {\n      flex: 1 1 calc(50% - 4px);\n      min-width: calc(50% - 4px);\n      padding: 8px;\n      font-size: 12px;\n    }\n\n    .badge-container {\n      flex-wrap: wrap;\n      gap: 4px;\n    }\n\n    .badge-container > div {\n      font-size: 10px;\n    }\n\n    .text-2xl {\n      font-size: 1.25rem;\n    }\n\n    .action-tiles {\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .action-tile {\n      width: 100%;\n    }\n\n    .payment-methods {\n      flex-direction: column;\n    }\n\n    .payment-method {\n      width: 100%;\n    }\n\n    .form-row {\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .close-button {\n      top: 12px;\n      right: 12px;\n      width: 28px;\n      height: 28px;\n      font-size: 16px;\n    }\n\n    .tooltip-content {\n      width: calc(100% - 32px);\n      left: 16px;\n      transform: none;\n      margin-top: -80px;\n    }\n\n    h2 {\n      font-size: 20px;\n      margin-bottom: 16px;\n    }\n\n    .additional-actions {\n      padding: 12px;\n      margin-top: 12px;\n    }\n\n    .promo-input {\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .promo-input button {\n      width: 100%;\n    }\n  }\n\n  \/* \u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 *\/\n  @media (min-width: 769px) and (max-width: 1024px) {\n    .subscription-flow-modal {\n      width: 90%;\n      padding: 24px;\n    }\n\n    .tariff-cards {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  \/* \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 *\/\n  @media (max-width: 360px) {\n    .certificate-card {\n      padding: 12px;\n    }\n\n    .text-2xl {\n      font-size: 1.1rem;\n    }\n\n    .text-xl {\n      font-size: 1rem;\n    }\n\n    .text-sm {\n      font-size: 0.75rem;\n    }\n\n    .text-xs {\n      font-size: 0.7rem;\n    }\n  }\n\n  \/* \u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043b\u0430\u043d\u0434\u0448\u0430\u0444\u0442\u043d\u043e\u0439 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n  @media (max-width: 768px) and (orientation: landscape) {\n    .subscription-flow-modal {\n      height: auto;\n      max-height: 90vh;\n    }\n\n    .tariff-cards {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .certificate-card .token-discount {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: rgba(254, 240, 138, 0.1);\n    color: #fbbf24;\n    padding: 4px 8px;\n    border-radius: 6px;\n    font-size: 0.875rem;\n    font-weight: 500;\n    margin-bottom: 8px;\n  }\n\n  .certificate-card .token-discount svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  @media (max-width: 768px) {\n    .certificate-card .token-discount {\n      font-size: 0.75rem;\n      padding: 3px 6px;\n    }\n  }\n  <\/style>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"\u00d7 \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0430\u0440\u0438\u0444 \u041b\u0443\u0447\u0448\u0430\u044f \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 {{ tariff.label }} {{ tariff.name }} {{ period.label }} (\u2212{{ period.discount }}%)&hellip;","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"csco_singular_sidebar":"disabled","csco_page_header_type":"none","csco_page_load_nextpost":"","footnotes":""},"class_list":["post-1131","page","type-page","status-publish","cs-entry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.7.1 (Yoast SEO v25.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u0411\u043b\u043e\u0433 - FICHI.AI<\/title>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"ru_RU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0411\u043b\u043e\u0433\" \/>\n<meta property=\"og:description\" content=\"\u00d7 \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0430\u0440\u0438\u0444 \u041b\u0443\u0447\u0448\u0430\u044f \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 {{ tariff.label }} {{ tariff.name }} {{ period.label }} (\u2212{{ period.discount }}%)&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fichi.ai\/home\/blog\/\" \/>\n<meta property=\"og:site_name\" content=\"FICHI.AI\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-14T13:26:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fichi.ai\/home\/wp-content\/uploads\/2025\/06\/photo_2025-06-06_20-16-29.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 \u043c\u0438\u043d\u0443\u0442\u044b\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fichi.ai\/home\/blog\/\",\"url\":\"https:\/\/fichi.ai\/home\/blog\/\",\"name\":\"\u0411\u043b\u043e\u0433 - FICHI.AI\",\"isPartOf\":{\"@id\":\"https:\/\/fichi.ai\/home\/#website\"},\"datePublished\":\"2025-03-14T21:30:51+00:00\",\"dateModified\":\"2025-08-14T13:26:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fichi.ai\/home\/blog\/#breadcrumb\"},\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fichi.ai\/home\/blog\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fichi.ai\/home\/blog\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\/\/fichi.ai\/home\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0411\u043b\u043e\u0433\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fichi.ai\/home\/#website\",\"url\":\"https:\/\/fichi.ai\/home\/\",\"name\":\"FICHI.AI\",\"description\":\"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439\",\"publisher\":{\"@id\":\"https:\/\/fichi.ai\/home\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fichi.ai\/home\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ru-RU\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fichi.ai\/home\/#organization\",\"name\":\"FICHI.AI\",\"url\":\"https:\/\/fichi.ai\/home\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\/\/fichi.ai\/home\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fichi.ai\/home\/wp-content\/uploads\/2025\/06\/photo_2025-06-06_20-16-29.jpg\",\"contentUrl\":\"https:\/\/fichi.ai\/home\/wp-content\/uploads\/2025\/06\/photo_2025-06-06_20-16-29.jpg\",\"width\":640,\"height\":640,\"caption\":\"FICHI.AI\"},\"image\":{\"@id\":\"https:\/\/fichi.ai\/home\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.youtube.com\/@Fichiai\",\"http:\/\/t.me\/fichi_ai\"],\"description\":\"FICHI.AI \u2014 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0430, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0435\u0434\u0438\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c 50 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u043c AI-\u043c\u043e\u0434\u0435\u043b\u044f\u043c. \u041d\u0430\u0448\u0430 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 ChatGPT, Claude, Midjourney, DALL-E, Stable Diffusion, Suno \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.\",\"email\":\"info@fichi.ai\",\"legalName\":\"\u041e\u041e\u041e \\\"X10\\\"\",\"foundingDate\":\"2025-01-01\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"11\",\"maxValue\":\"50\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u0411\u043b\u043e\u0433 - FICHI.AI","robots":{"index":"noindex","follow":"follow"},"og_locale":"ru_RU","og_type":"article","og_title":"\u0411\u043b\u043e\u0433","og_description":"\u00d7 \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0430\u0440\u0438\u0444 \u041b\u0443\u0447\u0448\u0430\u044f \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 {{ tariff.label }} {{ tariff.name }} {{ period.label }} (\u2212{{ period.discount }}%)&hellip;","og_url":"https:\/\/fichi.ai\/home\/blog\/","og_site_name":"FICHI.AI","article_modified_time":"2025-08-14T13:26:03+00:00","og_image":[{"width":640,"height":640,"url":"https:\/\/fichi.ai\/home\/wp-content\/uploads\/2025\/06\/photo_2025-06-06_20-16-29.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f":"2 \u043c\u0438\u043d\u0443\u0442\u044b"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/fichi.ai\/home\/blog\/","url":"https:\/\/fichi.ai\/home\/blog\/","name":"\u0411\u043b\u043e\u0433 - FICHI.AI","isPartOf":{"@id":"https:\/\/fichi.ai\/home\/#website"},"datePublished":"2025-03-14T21:30:51+00:00","dateModified":"2025-08-14T13:26:03+00:00","breadcrumb":{"@id":"https:\/\/fichi.ai\/home\/blog\/#breadcrumb"},"inLanguage":"ru-RU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fichi.ai\/home\/blog\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fichi.ai\/home\/blog\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/fichi.ai\/home\/"},{"@type":"ListItem","position":2,"name":"\u0411\u043b\u043e\u0433"}]},{"@type":"WebSite","@id":"https:\/\/fichi.ai\/home\/#website","url":"https:\/\/fichi.ai\/home\/","name":"FICHI.AI","description":"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439","publisher":{"@id":"https:\/\/fichi.ai\/home\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fichi.ai\/home\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ru-RU"},{"@type":"Organization","@id":"https:\/\/fichi.ai\/home\/#organization","name":"FICHI.AI","url":"https:\/\/fichi.ai\/home\/","logo":{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/fichi.ai\/home\/#\/schema\/logo\/image\/","url":"https:\/\/fichi.ai\/home\/wp-content\/uploads\/2025\/06\/photo_2025-06-06_20-16-29.jpg","contentUrl":"https:\/\/fichi.ai\/home\/wp-content\/uploads\/2025\/06\/photo_2025-06-06_20-16-29.jpg","width":640,"height":640,"caption":"FICHI.AI"},"image":{"@id":"https:\/\/fichi.ai\/home\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.youtube.com\/@Fichiai","http:\/\/t.me\/fichi_ai"],"description":"FICHI.AI \u2014 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0430, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0435\u0434\u0438\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c 50 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u043c AI-\u043c\u043e\u0434\u0435\u043b\u044f\u043c. \u041d\u0430\u0448\u0430 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 ChatGPT, Claude, Midjourney, DALL-E, Stable Diffusion, Suno \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435.","email":"info@fichi.ai","legalName":"\u041e\u041e\u041e \"X10\"","foundingDate":"2025-01-01","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"11","maxValue":"50"}}]}},"_links":{"self":[{"href":"https:\/\/fichi.ai\/home\/wp-json\/wp\/v2\/pages\/1131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fichi.ai\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fichi.ai\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fichi.ai\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fichi.ai\/home\/wp-json\/wp\/v2\/comments?post=1131"}],"version-history":[{"count":92,"href":"https:\/\/fichi.ai\/home\/wp-json\/wp\/v2\/pages\/1131\/revisions"}],"predecessor-version":[{"id":4794,"href":"https:\/\/fichi.ai\/home\/wp-json\/wp\/v2\/pages\/1131\/revisions\/4794"}],"wp:attachment":[{"href":"https:\/\/fichi.ai\/home\/wp-json\/wp\/v2\/media?parent=1131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}