diff --git a/front_vue/src/Core/composables/useConfirm.js b/front_vue/src/Core/composables/useConfirm.js
new file mode 100644
index 0000000..4fd9596
--- /dev/null
+++ b/front_vue/src/Core/composables/useConfirm.js
@@ -0,0 +1,70 @@
+const isOpen = ref(false)
+const config = ref({
+  icon: 'fas fa-question-circle',
+  iconColor: 'var(--accent-red)',
+  title: '',
+  message: '',
+  buttons: [],
+})
+let resolvePromise = null
+
+export function useConfirm() {
+  const open = (options = {}) => {
+    config.value = {
+      icon: options.icon || 'fas fa-exclamation-triangle',
+      iconColor: options.iconColor || 'var(--accent-red)',
+      title: options.title || '',
+      message: options.message || '',
+      buttons: options.buttons || [],
+    }
+    isOpen.value = true
+  }
+
+  const close = () => {
+    isOpen.value = false
+    if (resolvePromise) {
+      resolvePromise(false)
+      resolvePromise = null
+    }
+  }
+
+  const confirm = (options = {}) => {
+    return new Promise((resolve) => {
+      resolvePromise = resolve
+      open({
+        ...options,
+        buttons: (options.buttons || []).map(btn => ({
+          ...btn,
+          action: () => {
+            resolvePromise = null
+            isOpen.value = false
+            resolve(btn.value !== undefined ? btn.value : btn.label)
+            if (btn.action) btn.action()
+          },
+        })),
+      })
+    })
+  }
+
+  const confirmDelete = (options = {}) => {
+    return confirm({
+      icon: options.icon || 'fas fa-trash-alt',
+      iconColor: options.iconColor || 'var(--accent-red)',
+      title: options.title || '',
+      message: options.message || '',
+      buttons: [
+        { label: options.cancelText || 'Отмена', variant: 'default', value: false },
+        { label: options.confirmText || 'Удалить', variant: 'danger', icon: 'fas fa-trash', value: true },
+      ],
+    })
+  }
+
+  return {
+    isOpen: readonly(isOpen),
+    config: readonly(config),
+    open,
+    close,
+    confirm,
+    confirmDelete,
+  }
+}
diff --git a/front_vue/src/Core/constants.js b/front_vue/src/Core/constants.js
index e289591..d5a1a15 100644
--- a/front_vue/src/Core/constants.js
+++ b/front_vue/src/Core/constants.js
@@ -43,3 +43,5 @@ export const STORAGE_KEYS = {
 }
 
 export const AUTO_REFRESH_INTERVAL = 5000
+
+export const APP_VERSION = __APP_VERSION__
diff --git a/front_vue/src/Core/i18n/en.json b/front_vue/src/Core/i18n/en.json
index f8aca1d..ff994ad 100644
--- a/front_vue/src/Core/i18n/en.json
+++ b/front_vue/src/Core/i18n/en.json
@@ -1,7 +1,7 @@
 {
   "app": {
     "title": "vServer Admin Panel",
-    "logo": "vServer",
+    "logo": "vServer v1.0",
     "footerAuthor": "Author: Sumaneev Roman",
     "loading": "Starting vServer..."
   },
@@ -21,7 +21,9 @@
     "stop": "Stop",
     "starting": "Starting...",
     "stopping": "Stopping...",
-    "wait": "Please wait..."
+    "wait": "Please wait...",
+    "stopConfirmTitle": "Stop server?",
+    "stopConfirmMessage": "All services will be stopped"
   },
   "services": {
     "title": "Services Status",
diff --git a/front_vue/src/Core/i18n/ru.json b/front_vue/src/Core/i18n/ru.json
index 4c48389..3a9af22 100644
--- a/front_vue/src/Core/i18n/ru.json
+++ b/front_vue/src/Core/i18n/ru.json
@@ -21,7 +21,9 @@
     "stop": "Остановить",
     "starting": "Запускается...",
     "stopping": "Выключается...",
-    "wait": "Ожидайте..."
+    "wait": "Ожидайте...",
+    "stopConfirmTitle": "Остановить сервер?",
+    "stopConfirmMessage": "Все сервисы будут остановлены"
   },
   "services": {
     "title": "Статус сервисов",
@@ -176,7 +178,6 @@
     "errorPrefix": "Ошибка"
   },
   "notify": {
-    "settingsSaved": "Настройки сохранены и сервисы перезапущены!",
     "settingsSaved": "Настройки сохранены",
     "dataSaved": "Данные сохранены",
     "siteCreated": "Сайт успешно создан!",
diff --git a/front_vue/src/Core/stores/certs.js b/front_vue/src/Core/stores/certs.js
index 592517d..f3b916e 100644
--- a/front_vue/src/Core/stores/certs.js
+++ b/front_vue/src/Core/stores/certs.js
@@ -1,5 +1,4 @@
-import { defineStore } from 'pinia'
-import { api } from '@core/api/index.js'
+import { defineStore } from 'pinia'
 
 export const useCertsStore = defineStore('certs', {
   state: () => ({
diff --git a/front_vue/src/Core/stores/config.js b/front_vue/src/Core/stores/config.js
index 007af75..83b0e47 100644
--- a/front_vue/src/Core/stores/config.js
+++ b/front_vue/src/Core/stores/config.js
@@ -1,5 +1,4 @@
-import { defineStore } from 'pinia'
-import { api } from '@core/api/index.js'
+import { defineStore } from 'pinia'
 
 export const useConfigStore = defineStore('config', {
   state: () => ({
diff --git a/front_vue/src/Core/stores/proxies.js b/front_vue/src/Core/stores/proxies.js
index b06b041..78504df 100644
--- a/front_vue/src/Core/stores/proxies.js
+++ b/front_vue/src/Core/stores/proxies.js
@@ -1,5 +1,4 @@
-import { defineStore } from 'pinia'
-import { api } from '@core/api/index.js'
+import { defineStore } from 'pinia'
 
 export const useProxiesStore = defineStore('proxies', {
   state: () => ({
diff --git a/front_vue/src/Core/stores/services.js b/front_vue/src/Core/stores/services.js
index 8fdfa53..34c125c 100644
--- a/front_vue/src/Core/stores/services.js
+++ b/front_vue/src/Core/stores/services.js
@@ -1,5 +1,4 @@
-import { defineStore } from 'pinia'
-import { api } from '@core/api/index.js'
+import { defineStore } from 'pinia'
 
 export const useServicesStore = defineStore('services', {
   state: () => ({
diff --git a/front_vue/src/Core/stores/sites.js b/front_vue/src/Core/stores/sites.js
index 7137ee8..5649465 100644
--- a/front_vue/src/Core/stores/sites.js
+++ b/front_vue/src/Core/stores/sites.js
@@ -1,5 +1,4 @@
-import { defineStore } from 'pinia'
-import { api } from '@core/api/index.js'
+import { defineStore } from 'pinia'
 
 export const useSitesStore = defineStore('sites', {
   state: () => ({
diff --git a/front_vue/src/Design/assets/css/tables.css b/front_vue/src/Design/assets/css/tables.css
index 3c0967d..1d1b89e 100644
--- a/front_vue/src/Design/assets/css/tables.css
+++ b/front_vue/src/Design/assets/css/tables.css
@@ -1,100 +1,91 @@
 /* ============================================
-   Общие стили таблиц
+   Общие стили таблиц — Modern Clean
    ============================================ */
 
-.section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--space-lg);
-}
-
-.section-title {
-    font-size: var(--text-md);
-    font-weight: var(--font-bold);
-    color: var(--text-primary);
-    margin: 0;
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    display: flex;
-    align-items: center;
-    gap: var(--space-lg);
-}
-
-.section-title::before {
-    content: '';
-    width: 4px;
-    height: 16px;
-    background: linear-gradient(180deg, var(--accent-purple), var(--accent-purple-light));
-    border-radius: 2px;
-    flex-shrink: 0;
-}
 
+/* Table Container */
 .table-container {
-    background: var(--glass-bg-light);
-    backdrop-filter: var(--backdrop-blur);
-    border: 1px solid var(--glass-border);
-    border-radius: var(--radius);
     overflow: hidden;
-    box-shadow: var(--shadow-md);
 }
 
+/* Table */
 .data-table {
     width: 100%;
-    border-collapse: collapse;
-}
-
-.data-table thead {
-    background: var(--table-header-bg);
+    border-collapse: separate;
+    border-spacing: 0 8px;
 }
 
+/* Header */
 .data-table thead tr {
-    border-bottom: 1px solid var(--table-border);
+    border: none;
 }
 
 .data-table th {
-    padding: 18px 20px;
+    padding: 8px 20px;
     text-align: left;
-    font-size: var(--text-sm);
-    font-weight: var(--font-bold);
-    color: var(--text-secondary);
+    font-size: 11px;
+    font-weight: var(--font-semibold);
+    color: var(--text-muted);
     text-transform: uppercase;
-    letter-spacing: 1.2px;
+    letter-spacing: 1.5px;
+    border: none;
+    background: none;
 }
 
-.data-table th:last-child {
-    width: 160px;
-    text-align: center;
+.th-icon {
+    opacity: 0.4;
+    font-size: 10px;
+    margin-right: 2px;
 }
 
+.th-actions {
+    text-align: right !important;
+    padding-right: 20px !important;
+}
+
+/* Rows */
 .data-table tbody tr {
-    border-bottom: 1px solid var(--table-border);
     transition: all var(--transition-base);
+    background: var(--glass-bg-light);
 }
 
 .data-table tbody tr:hover {
-    background: var(--table-hover-bg);
+    background: rgba(var(--accent-rgb), 0.06);
 }
 
 .data-table td {
-    padding: 16px 20px;
+    padding: 14px 20px;
     font-size: var(--text-base);
     color: var(--text-primary);
+    border-top: 1px solid var(--glass-border);
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.data-table td:first-child {
+    border-left: 1px solid var(--glass-border);
+    border-radius: var(--radius) 0 0 var(--radius);
 }
 
 .data-table td:last-child {
-    text-align: center;
+    border-right: 1px solid var(--glass-border);
+    border-radius: 0 var(--radius) var(--radius) 0;
     display: flex;
     gap: var(--space-xs);
-    justify-content: center;
     align-items: center;
+    justify-content: flex-end;
 }
 
+.data-table tbody tr:hover td {
+    border-color: rgba(var(--accent-rgb), 0.15);
+}
+
+/* Code */
 .data-table code {
     font-family: var(--font-mono);
     font-size: var(--text-sm);
 }
 
+/* Links */
 .clickable-link {
     color: var(--link-color);
     cursor: pointer;
@@ -117,59 +108,82 @@
 .cert-icon {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    margin-right: 8px;
-    border-radius: var(--radius);
+    margin-right: 6px;
     font-size: 12px;
 }
 
 .cert-valid {
-    background: rgba(var(--success-rgb), 0.2);
     color: var(--accent-green);
-    border: 1px solid rgba(var(--success-rgb), 0.4);
 }
 
 .cert-expired {
-    background: rgba(var(--danger-rgb), 0.2);
     color: var(--accent-red);
-    border: 1px solid rgba(var(--danger-rgb), 0.4);
 }
 
 .cert-none {
-    background: rgba(var(--muted-rgb), 0.15);
     color: var(--text-muted);
-    border: 1px solid rgba(var(--muted-rgb), 0.3);
-    opacity: 0.5;
+    opacity: 0.25;
 }
 
 /* Icon buttons */
 .icon-btn {
-    width: 32px;
-    height: 32px;
+    width: 30px;
+    height: 30px;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background: var(--btn-icon-bg);
-    border: 1px solid var(--btn-icon-border);
+    background: transparent;
+    border: none;
     border-radius: var(--radius);
-    color: var(--btn-icon-color);
-    font-size: var(--text-md);
+    color: var(--text-muted);
+    font-size: var(--text-sm);
     cursor: pointer;
     transition: all var(--transition-base);
 }
 
 .icon-btn:hover {
-    background: var(--btn-icon-hover-bg);
-    border-color: var(--btn-icon-hover-border);
-    transform: translateY(-1px);
+    background: rgba(var(--accent-rgb), 0.1);
+    color: var(--accent-purple-light);
 }
 
 .icon-btn:disabled {
     opacity: 0.6;
     cursor: wait;
-    transform: none;
 }
 
+.status-toggle {
+    cursor: pointer;
+    transition: opacity var(--transition-fast);
+}
+
+.status-toggle:hover {
+    opacity: 0.7;
+}
+
+/* Drag and drop */
+.drag-grip {
+    color: var(--text-muted);
+    opacity: 0.15;
+    cursor: grab;
+    font-size: 11px;
+    margin-right: 8px;
+    transition: all var(--transition-fast);
+}
+
+.data-table tbody tr:hover .drag-grip {
+    opacity: 0.4;
+}
+
+.drag-grip:hover {
+    opacity: 1 !important;
+    color: var(--accent-purple-light);
+}
+
+.data-table tbody tr.dragging {
+    opacity: 0.3;
+}
+
+.data-table tbody tr.drag-over td {
+    border-top-color: var(--accent-purple) !important;
+}
diff --git a/front_vue/src/Design/components/layout/TitleBar.vue b/front_vue/src/Design/components/layout/TitleBar.vue
index 1da07f3..69ec85c 100644
--- a/front_vue/src/Design/components/layout/TitleBar.vue
+++ b/front_vue/src/Design/components/layout/TitleBar.vue
@@ -1,5 +1,4 @@
-<script setup>
-import { api } from '@core/api/index.js'
+<script setup>
 
 const { t, locale } = useI18n()
 const appStore = useAppStore()
@@ -7,6 +6,7 @@ const servicesStore = useServicesStore()
 const { isDark, toggleTheme } = useTheme()
 
 const isWails = typeof window !== 'undefined' && window?.runtime
+const { confirm } = useConfirm()
 const operating = ref(false)
 const statusLabel = ref('')
 
@@ -22,6 +22,18 @@ const serverToggle = async () => {
   if (operating.value) return
 
   if (appStore.serverRunning) {
+    const result = await confirm({
+      icon: 'fas fa-power-off',
+      iconColor: 'var(--accent-red)',
+      title: t('server.stopConfirmTitle'),
+      message: t('server.stopConfirmMessage'),
+      buttons: [
+        { label: t('common.cancel'), variant: 'default', value: false },
+        { label: t('server.stop'), variant: 'danger', icon: 'fas fa-power-off', value: true },
+      ],
+    })
+    if (!result) return
+
     operating.value = true
     statusLabel.value = t('server.stopping')
     servicesStore.setPending(t('server.stopping'))
@@ -63,6 +75,7 @@ const windowClose = () => { if (isWails) window.runtime.Quit() }
       <div class="app-logo">
         <span class="logo-icon">🚀</span>
         <span class="logo-text">{{ t('app.logo') }}</span>
+        <span class="logo-version">v{{ APP_VERSION }}</span>
       </div>
       <div class="server-status">
         <span class="status-indicator" :class="[operating ? 'status-pending' : (appStore.serverRunning ? 'status-online' : 'status-offline')]"></span>
@@ -126,6 +139,12 @@ const windowClose = () => { if (isWails) window.runtime.Quit() }
   color: var(--text-primary);
 }
 
+.logo-version {
+  font-size: 10px;
+  color: var(--text-muted);
+  opacity: 0.5;
+}
+
 .server-status {
   display: flex;
   align-items: center;
diff --git a/front_vue/src/Design/components/proxies/ProxiesTable.vue b/front_vue/src/Design/components/proxies/ProxiesTable.vue
index 33360e9..4903ed5 100644
--- a/front_vue/src/Design/components/proxies/ProxiesTable.vue
+++ b/front_vue/src/Design/components/proxies/ProxiesTable.vue
@@ -1,9 +1,45 @@
-<script setup>
+<script setup>
+
 const { t } = useI18n()
 const router = useRouter()
 const proxiesStore = useProxiesStore()
 const certsStore = useCertsStore()
 
+const togglingStatus = ref('')
+const dragIdx = ref(null)
+const overIdx = ref(null)
+
+const onDragStart = (i, e) => { dragIdx.value = i; e.dataTransfer.effectAllowed = 'move' }
+const onDragOver = (i, e) => { e.preventDefault(); overIdx.value = i }
+const onDragLeave = () => { overIdx.value = null }
+const onDragEnd = () => { dragIdx.value = null; overIdx.value = null }
+
+const onDrop = async (i) => {
+  if (dragIdx.value === null || dragIdx.value === i) { dragIdx.value = null; overIdx.value = null; return }
+  const items = [...proxiesStore.list]
+  const [moved] = items.splice(dragIdx.value, 1)
+  items.splice(i, 0, moved)
+  proxiesStore.list = items
+  dragIdx.value = null
+  overIdx.value = null
+  const config = await api.getConfig()
+  config.Proxy_Service = items.map(p => config.Proxy_Service.find(c => c.ExternalDomain === p.ExternalDomain)).filter(Boolean)
+  await api.saveConfig(JSON.stringify(config))
+}
+
+const toggleStatus = async (proxy) => {
+  togglingStatus.value = proxy.ExternalDomain
+  const config = await api.getConfig()
+  const idx = config.Proxy_Service.findIndex(p => p.ExternalDomain === proxy.ExternalDomain)
+  if (idx >= 0) {
+    config.Proxy_Service[idx].Enable = !proxy.Enable
+    await api.saveConfig(JSON.stringify(config))
+    await api.reloadConfig()
+    await proxiesStore.load()
+  }
+  togglingStatus.value = ''
+}
+
 const openUrl = (host) => {
   if (window.runtime?.BrowserOpenURL) {
     window.runtime.BrowserOpenURL('http://' + host)
@@ -41,27 +77,33 @@ const findCertForDomain = (domain) => {
 
 <template>
   <section class="section">
-    <div class="section-header">
-      <h2 class="section-title">{{ t('proxies.title') }}</h2>
-      <VButton variant="primary" icon="fas fa-plus" @click="router.push('/proxies/create')">
-        {{ t('proxies.add') }}
-      </VButton>
-    </div>
+    <VSectionHeader :title="t('proxies.title')" addable @add="router.push('/proxies/create')" />
     <div class="table-container">
       <table class="data-table">
         <thead>
           <tr>
-            <th>{{ t('sites.name') }}</th>
-            <th>{{ t('proxies.externalDomain') }}</th>
-            <th>{{ t('proxies.localAddress') }}</th>
-            <th>HTTPS</th>
-            <th>{{ t('proxies.status') }}</th>
-            <th>{{ t('proxies.actions') }}</th>
+            <th><i class="fas fa-tag th-icon"></i> {{ t('sites.name') }}</th>
+            <th><i class="fas fa-globe th-icon"></i> {{ t('proxies.externalDomain') }}</th>
+            <th><i class="fas fa-server th-icon"></i> {{ t('proxies.localAddress') }}</th>
+            <th><i class="fas fa-lock th-icon"></i> HTTPS</th>
+            <th><i class="fas fa-circle-check th-icon"></i> {{ t('proxies.status') }}</th>
+            <th class="th-actions">{{ t('proxies.actions') }}</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="proxy in proxiesStore.list" :key="proxy.ExternalDomain">
+          <tr
+            v-for="(proxy, i) in proxiesStore.list"
+            :key="proxy.ExternalDomain"
+            draggable="true"
+            :class="{ 'drag-over': overIdx === i, 'dragging': dragIdx === i }"
+            @dragstart="onDragStart(i, $event)"
+            @dragover="onDragOver(i, $event)"
+            @dragleave="onDragLeave"
+            @drop="onDrop(i)"
+            @dragend="onDragEnd"
+          >
             <td>
+              <i class="fas fa-grip-vertical drag-grip"></i>
               <span class="cert-icon" :class="findCertForDomain(proxy.ExternalDomain) ? (findCertForDomain(proxy.ExternalDomain).is_expired ? 'cert-expired' : 'cert-valid') : 'cert-none'">
                 <i class="fas fa-shield-alt"></i>
               </span>
@@ -77,8 +119,12 @@ const findCertForDomain = (domain) => {
               </VBadge>
             </td>
             <td>
-              <VBadge :variant="proxy.Enable ? 'online' : 'offline'">
-                {{ proxy.Enable ? 'active' : 'disabled' }}
+              <VBadge
+                class="status-toggle"
+                :variant="togglingStatus === proxy.ExternalDomain ? 'pending' : (proxy.Enable ? 'online' : 'offline')"
+                @click="toggleStatus(proxy)"
+              >
+                {{ togglingStatus === proxy.ExternalDomain ? '...' : (proxy.Enable ? 'active' : 'disabled') }}
               </VBadge>
             </td>
             <td>
diff --git a/front_vue/src/Design/components/services/ServiceCard.vue b/front_vue/src/Design/components/services/ServiceCard.vue
index 8a349ac..cb2b02e 100644
--- a/front_vue/src/Design/components/services/ServiceCard.vue
+++ b/front_vue/src/Design/components/services/ServiceCard.vue
@@ -12,117 +12,80 @@ const serviceIcons = {
   PHP: 'fab fa-php',
   Proxy: 'fas fa-exchange-alt',
 }
-
-const serviceInfoLabel = {
-  HTTP: 'services.port',
-  HTTPS: 'services.port',
-  MySQL: 'services.port',
-  PHP: 'services.ports',
-  Proxy: 'services.rules',
-}
 </script>
 
 <template>
-  <div class="service-card">
-    <div class="service-header">
-      <h3 class="service-name">
-        <i :class="serviceIcons[service.name] || 'fas fa-server'"></i>
-        {{ service.name }}
-      </h3>
-      <VBadge :variant="service.pending ? 'pending' : (service.status ? 'online' : 'offline')">
-        {{ service.pending || (service.status ? t('common.enabled') : t('common.disabled')) }}
-      </VBadge>
-    </div>
-    <div class="service-info">
-      <div class="info-row">
-        <span class="info-label">{{ t(serviceInfoLabel[service.name] || 'services.port') }}:</span>
-        <span class="info-value">{{ service.port || service.info || '—' }}</span>
-      </div>
-      <div v-if="service.info && service.port" class="info-row">
-        <span class="info-label">{{ t('services.rules') }}:</span>
-        <span class="info-value">{{ service.info }}</span>
-      </div>
-    </div>
+  <div class="service-item" :class="{ 'service-active': service.status, 'service-pending': service.pending }">
+    <span class="service-dot"></span>
+    <i :class="serviceIcons[service.name] || 'fas fa-server'" class="service-icon"></i>
+    <span class="service-label">{{ service.name }}</span>
+    <span v-if="service.pending" class="service-status-text pending">{{ service.pending }}</span>
   </div>
 </template>
 
 <style scoped>
-.service-card {
-  background: var(--glass-bg-light);
-  backdrop-filter: var(--backdrop-blur);
-  border: 1px solid var(--glass-border);
+.service-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 18px;
   border-radius: var(--radius);
-  padding: var(--space-lg);
-  transition: all var(--transition-bounce);
-  position: relative;
-  overflow: hidden;
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg-light);
+  transition: all var(--transition-base);
+  cursor: default;
 }
 
-.service-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: var(--service-card-gradient);
-  opacity: 0;
-  transition: opacity var(--transition-slow);
-}
-
-.service-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--card-hover-shadow);
+.service-item:hover {
   border-color: var(--card-border-hover);
 }
 
-.service-card:hover::before {
-  opacity: 1;
+.service-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--accent-red);
+  flex-shrink: 0;
+  transition: all var(--transition-base);
 }
 
-.service-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 18px;
+.service-active .service-dot {
+  background: var(--accent-green);
+  box-shadow: 0 0 8px var(--accent-green);
 }
 
-.service-name {
+.service-pending .service-dot {
+  background: var(--accent-yellow, #f0ad4e);
+  box-shadow: 0 0 8px var(--accent-yellow, #f0ad4e);
+  animation: dot-blink 1s ease-in-out infinite;
+}
+
+.service-icon {
+  font-size: var(--text-md);
+  color: var(--text-muted);
+  width: 18px;
+  text-align: center;
+  transition: color var(--transition-base);
+}
+
+.service-active .service-icon {
+  color: var(--accent-purple-light);
+}
+
+.service-label {
   font-size: var(--text-md);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin: 0;
 }
 
-.service-name i {
-  color: var(--accent-purple-light);
-  font-size: var(--text-lg);
-}
-
-.service-info {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.info-label {
+.service-status-text.pending {
+  margin-left: auto;
   font-size: var(--text-sm);
-  color: var(--text-secondary);
-  font-weight: var(--font-medium);
+  color: var(--accent-yellow, #f0ad4e);
 }
 
-.info-value {
-  font-size: 12px;
-  color: var(--text-primary);
-  font-weight: var(--font-semibold);
+@keyframes dot-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
 }
 </style>
diff --git a/front_vue/src/Design/components/services/ServicesGrid.vue b/front_vue/src/Design/components/services/ServicesGrid.vue
index 53cf8e8..a6a9894 100644
--- a/front_vue/src/Design/components/services/ServicesGrid.vue
+++ b/front_vue/src/Design/components/services/ServicesGrid.vue
@@ -5,7 +5,7 @@ const servicesStore = useServicesStore()
 
 <template>
   <section class="section">
-    <div class="services-grid">
+    <div class="services-row">
       <ServiceCard
         v-for="service in servicesStore.list"
         :key="service.name"
@@ -16,21 +16,14 @@ const servicesStore = useServicesStore()
 </template>
 
 <style>
-.services-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: var(--space-lg);
+.services-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
-@media (max-width: 1200px) {
-  .services-grid { grid-template-columns: repeat(3, 1fr); }
-}
-
-@media (max-width: 900px) {
-  .services-grid { grid-template-columns: repeat(2, 1fr); }
-}
-
-@media (max-width: 600px) {
-  .services-grid { grid-template-columns: 1fr; }
+.services-row > * {
+  flex: 1;
+  min-width: 140px;
 }
 </style>
diff --git a/front_vue/src/Design/components/sites/SitesTable.vue b/front_vue/src/Design/components/sites/SitesTable.vue
index 45ec735..c4cf4e9 100644
--- a/front_vue/src/Design/components/sites/SitesTable.vue
+++ b/front_vue/src/Design/components/sites/SitesTable.vue
@@ -1,12 +1,49 @@
-<script setup>
+<script setup>
 const { t } = useI18n()
 const router = useRouter()
 const sitesStore = useSitesStore()
 const certsStore = useCertsStore()
 const { success, error } = useNotification()
-const modal = useModal()
+const { confirmDelete: showConfirm } = useConfirm()
+
+
+const dragIdx = ref(null)
+const overIdx = ref(null)
+
+const onDragStart = (i, e) => { dragIdx.value = i; e.dataTransfer.effectAllowed = 'move' }
+const onDragOver = (i, e) => { e.preventDefault(); overIdx.value = i }
+const onDragLeave = () => { overIdx.value = null }
+const onDragEnd = () => { dragIdx.value = null; overIdx.value = null }
+
+const onDrop = async (i) => {
+  if (dragIdx.value === null || dragIdx.value === i) { dragIdx.value = null; overIdx.value = null; return }
+  const items = [...sitesStore.list]
+  const [moved] = items.splice(dragIdx.value, 1)
+  items.splice(i, 0, moved)
+  sitesStore.list = items
+  dragIdx.value = null
+  overIdx.value = null
+  const config = await api.getConfig()
+  config.Site_www = items.map(s => config.Site_www.find(c => c.host === s.host)).filter(Boolean)
+  await api.saveConfig(JSON.stringify(config))
+}
 
 const openingFolder = ref('')
+const togglingStatus = ref('')
+
+const toggleStatus = async (site) => {
+  togglingStatus.value = site.host
+  const newStatus = site.status === 'active' ? 'inactive' : 'active'
+  const config = await api.getConfig()
+  const idx = config.Site_www.findIndex(s => s.host === site.host)
+  if (idx >= 0) {
+    config.Site_www[idx].status = newStatus
+    await api.saveConfig(JSON.stringify(config))
+    await api.updateSiteCache()
+    await sitesStore.load()
+  }
+  togglingStatus.value = ''
+}
 
 const openUrl = (host) => {
   if (window.runtime?.BrowserOpenURL) {
@@ -51,44 +88,48 @@ const findCertForDomain = (domain, aliases = []) => {
   return null
 }
 
-const confirmDelete = (site) => {
-  modal.open({
+const confirmDelete = async (site) => {
+  const result = await showConfirm({
     title: t('sites.deleteTitle'),
-    message: t('sites.deleteConfirm', { name: site.name, host: site.host }),
-    warning: t('sites.deleteWarning'),
-    onConfirm: async () => {
-      const result = await sitesStore.remove(site.host)
-      if (result && !String(result).startsWith('Error')) success(t('notify.siteDeleted'))
-      else error(String(result))
-      modal.close()
-    },
+    message: `${site.name} (${site.host})`,
   })
+  if (result) {
+    const res = await sitesStore.remove(site.host)
+    if (res && !String(res).startsWith('Error')) success(t('notify.siteDeleted'))
+    else error(String(res))
+  }
 }
 </script>
 
 <template>
   <section class="section">
-    <div class="section-header">
-      <h2 class="section-title">{{ t('sites.title') }}</h2>
-      <VButton variant="primary" icon="fas fa-plus" @click="router.push('/sites/create')">
-        {{ t('sites.add') }}
-      </VButton>
-    </div>
+    <VSectionHeader :title="t('sites.title')" addable @add="router.push('/sites/create')" />
     <div class="table-container">
       <table class="data-table">
         <thead>
           <tr>
-            <th>{{ t('sites.name') }}</th>
-            <th>{{ t('sites.host') }}</th>
-            <th>{{ t('sites.alias') }}</th>
-            <th>{{ t('sites.status') }}</th>
-            <th>{{ t('sites.rootFile') }}</th>
-            <th>{{ t('sites.actions') }}</th>
+            <th><i class="fas fa-tag th-icon"></i> {{ t('sites.name') }}</th>
+            <th><i class="fas fa-globe th-icon"></i> {{ t('sites.host') }}</th>
+            <th><i class="fas fa-link th-icon"></i> {{ t('sites.alias') }}</th>
+            <th><i class="fas fa-circle-check th-icon"></i> {{ t('sites.status') }}</th>
+            <th><i class="fas fa-file th-icon"></i> {{ t('sites.rootFile') }}</th>
+            <th class="th-actions">{{ t('sites.actions') }}</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="site in sitesStore.list" :key="site.host">
+          <tr
+            v-for="(site, i) in sitesStore.list"
+            :key="site.host"
+            draggable="true"
+            :class="{ 'drag-over': overIdx === i, 'dragging': dragIdx === i }"
+            @dragstart="onDragStart(i, $event)"
+            @dragover="onDragOver(i, $event)"
+            @dragleave="onDragLeave"
+            @drop="onDrop(i)"
+            @dragend="onDragEnd"
+          >
             <td>
+              <i class="fas fa-grip-vertical drag-grip"></i>
               <span class="cert-icon" :class="findCertForDomain(site.host, site.alias) ? (findCertForDomain(site.host, site.alias).is_expired ? 'cert-expired' : 'cert-valid') : 'cert-none'" :title="findCertForDomain(site.host, site.alias) ? (findCertForDomain(site.host, site.alias).is_expired ? 'SSL истёк' : `SSL (${findCertForDomain(site.host, site.alias).days_left} дн.)`) : 'Нет сертификата'">
                 <i class="fas fa-shield-alt"></i>
               </span>
@@ -99,8 +140,12 @@ const confirmDelete = (site) => {
             </td>
             <td><code>{{ site.alias?.join(', ') || '—' }}</code></td>
             <td>
-              <VBadge :variant="site.status === 'active' ? 'online' : 'offline'">
-                {{ site.status }}
+              <VBadge
+                class="status-toggle"
+                :variant="togglingStatus === site.host ? 'pending' : (site.status === 'active' ? 'online' : 'offline')"
+                @click="toggleStatus(site)"
+              >
+                {{ togglingStatus === site.host ? '...' : site.status }}
               </VBadge>
             </td>
             <td><code>{{ site.root_file }}</code></td>
diff --git a/front_vue/src/Design/components/ui/VConfirmDialog.vue b/front_vue/src/Design/components/ui/VConfirmDialog.vue
new file mode 100644
index 0000000..76ddf4a
--- /dev/null
+++ b/front_vue/src/Design/components/ui/VConfirmDialog.vue
@@ -0,0 +1,142 @@
+<script setup>
+
+const { isOpen, config, close } = useConfirm()
+</script>
+
+<template>
+  <Teleport to="body">
+    <transition name="fade">
+      <div v-if="isOpen" class="confirm-overlay" @click.self="close()">
+        <transition name="scale">
+          <div v-if="isOpen" class="confirm-dialog">
+            <div class="confirm-icon" :style="{ color: config.iconColor }">
+              <i :class="config.icon"></i>
+            </div>
+            <h3 class="confirm-title">{{ config.title }}</h3>
+            <p v-if="config.message" class="confirm-message">{{ config.message }}</p>
+            <div class="confirm-buttons">
+              <button
+                v-for="(btn, i) in config.buttons"
+                :key="i"
+                class="confirm-btn"
+                :class="`confirm-btn--${btn.variant || 'default'}`"
+                @click="btn.action?.()"
+              >
+                <i v-if="btn.icon" :class="btn.icon"></i>
+                {{ btn.label }}
+              </button>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+  backdrop-filter: blur(6px);
+}
+
+.confirm-dialog {
+  background: transparent;
+  border: none;
+  padding: 40px;
+  max-width: 420px;
+  width: 90%;
+  text-align: center;
+}
+
+.confirm-icon {
+  font-size: 42px;
+  margin-bottom: 16px;
+  filter: drop-shadow(0 0 16px currentColor);
+}
+
+.confirm-title {
+  font-size: var(--text-xl);
+  font-weight: var(--font-bold);
+  color: var(--text-primary);
+  margin: 0 0 8px 0;
+}
+
+.confirm-message {
+  font-size: var(--text-md);
+  color: var(--text-muted);
+  margin: 0 0 28px 0;
+  line-height: 1.5;
+}
+
+.confirm-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.confirm-btn {
+  width: 100%;
+  padding: 12px 20px;
+  border-radius: var(--radius);
+  font-size: var(--text-md);
+  font-weight: var(--font-semibold);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid transparent;
+}
+
+.confirm-btn--default {
+  background: rgba(var(--muted-rgb), 0.15);
+  border-color: rgba(var(--muted-rgb), 0.3);
+  color: var(--text-secondary);
+}
+
+.confirm-btn--default:hover {
+  background: rgba(var(--muted-rgb), 0.25);
+}
+
+.confirm-btn--primary {
+  background: rgba(var(--accent-rgb), 0.2);
+  border-color: rgba(var(--accent-rgb), 0.4);
+  color: var(--accent-purple-light);
+}
+
+.confirm-btn--primary:hover {
+  background: rgba(var(--accent-rgb), 0.3);
+}
+
+.confirm-btn--danger {
+  background: rgba(var(--danger-rgb), 0.2);
+  border-color: rgba(var(--danger-rgb), 0.4);
+  color: var(--accent-red);
+}
+
+.confirm-btn--danger:hover {
+  background: rgba(var(--danger-rgb), 0.3);
+}
+
+.confirm-btn--success {
+  background: rgba(var(--success-rgb), 0.2);
+  border-color: rgba(var(--success-rgb), 0.4);
+  color: var(--accent-green);
+}
+
+.confirm-btn--success:hover {
+  background: rgba(var(--success-rgb), 0.3);
+}
+
+.scale-enter-active { transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.scale-leave-active { transition: all 0.15s ease-in; }
+.scale-enter-from { opacity: 0; transform: scale(0.9); }
+.scale-leave-to { opacity: 0; transform: scale(0.95); }
+</style>
diff --git a/front_vue/src/Design/components/ui/VSectionHeader.vue b/front_vue/src/Design/components/ui/VSectionHeader.vue
new file mode 100644
index 0000000..a515552
--- /dev/null
+++ b/front_vue/src/Design/components/ui/VSectionHeader.vue
@@ -0,0 +1,72 @@
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  addable: { type: Boolean, default: false },
+})
+
+defineEmits(['add'])
+</script>
+
+<template>
+  <div class="v-section-header">
+    <span class="v-section-bar"></span>
+    <h2 class="v-section-title">{{ title }}</h2>
+    <button v-if="addable" class="v-section-add" @click="$emit('add')">
+      <svg width="10" height="10" viewBox="0 0 10 10">
+        <line x1="5" y1="0" x2="5" y2="10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        <line x1="0" y1="5" x2="10" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.v-section-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: var(--space-md);
+}
+
+.v-section-bar {
+  width: 3px;
+  height: 14px;
+  background: var(--accent-purple);
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.v-section-title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--text-muted);
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+}
+
+.v-section-add {
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+  background: rgba(var(--accent-rgb), 0.1);
+  border: 1px solid rgba(var(--accent-rgb), 0.2);
+  border-radius: var(--radius-full);
+  color: var(--accent-purple-light);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  padding: 0;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.v-section-add:hover {
+  background: rgba(var(--accent-rgb), 0.2);
+  border-color: rgba(var(--accent-rgb), 0.4);
+}
+
+.v-section-add svg {
+  display: block;
+}
+</style>
diff --git a/front_vue/src/Design/layouts/MainLayout.vue b/front_vue/src/Design/layouts/MainLayout.vue
index 7158c7e..3318ff7 100644
--- a/front_vue/src/Design/layouts/MainLayout.vue
+++ b/front_vue/src/Design/layouts/MainLayout.vue
@@ -47,6 +47,7 @@ onUnmounted(() => {
     </div>
     <VNotification />
     <VModal />
+    <VConfirmDialog />
   </div>
 </template>
 
@@ -56,7 +57,15 @@ onUnmounted(() => {
   flex-direction: column;
   height: 100vh;
   width: 100vw;
-  background: var(--bg-primary);
+  
+  /* Красивый грандиент */
+  background:
+    /*
+    radial-gradient(circle at 100% 30%, rgba(53, 55, 126, 0.089) 0%, transparent 50%),
+    radial-gradient(circle at 45% 100%, rgba(126, 53, 98, 0.082) 0%, transparent 50%),
+    radial-gradient(circle at 0% 100%, rgba(53, 55, 126, 0.089) 0%, transparent 50%),
+    */
+    var(--bg-primary);
 }
 
 .app-body {
@@ -73,8 +82,9 @@ onUnmounted(() => {
 }
 
 .main-content {
+  --page-padding: 50px;
   flex: 1;
   overflow-y: auto;
-  padding: 40px var(--space-3xl);
+  padding: var(--page-padding) var(--page-padding) var(--page-padding) var(--page-padding);
 }
 </style>
diff --git a/front_vue/src/Design/views/DashboardView.vue b/front_vue/src/Design/views/DashboardView.vue
index b42e4ba..8c608e4 100644
--- a/front_vue/src/Design/views/DashboardView.vue
+++ b/front_vue/src/Design/views/DashboardView.vue
@@ -19,8 +19,10 @@ onMounted(async () => {
 <template>
   <div class="dashboard-view">
     <ServicesGrid />
-    <SitesTable />
-    <ProxiesTable />
+    <div class="dashboard-tables">
+      <SitesTable />
+      <ProxiesTable />
+    </div>
   </div>
 </template>
 
@@ -30,4 +32,22 @@ onMounted(async () => {
   flex-direction: column;
   gap: var(--space-xl);
 }
+
+.dashboard-tables {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
+}
+
+@media (min-width: 2200px) {
+  .dashboard-tables {
+    flex-direction: row;
+    gap: var(--space-xl);
+  }
+
+  .dashboard-tables > * {
+    flex: 1;
+    min-width: 0;
+  }
+}
 </style>
diff --git a/front_vue/src/Design/views/ProxyEditView.vue b/front_vue/src/Design/views/ProxyEditView.vue
index d6d4ed4..de224a8 100644
--- a/front_vue/src/Design/views/ProxyEditView.vue
+++ b/front_vue/src/Design/views/ProxyEditView.vue
@@ -1,9 +1,9 @@
-<script setup>
+<script setup>
 const { t } = useI18n()
 const router = useRouter()
 const proxiesStore = useProxiesStore()
 const { success, error } = useNotification()
-const modal = useModal()
+const { confirmDelete: showConfirm } = useConfirm()
 
 const props = defineProps({
   domain: { type: String, required: true },
@@ -20,7 +20,6 @@ const form = reactive({
   autoSSL: false,
 })
 
-import { api } from '@core/api/index.js'
 
 const saving = ref(false)
 
@@ -66,21 +65,20 @@ const saveProxy = async () => {
   saving.value = false
 }
 
-const confirmDelete = () => {
-  modal.open({
+const confirmDelete = async () => {
+  const result = await showConfirm({
     title: t('proxies.deleteTitle'),
-    message: t('proxies.deleteConfirm', { domain: form.domain }),
-    onConfirm: async () => {
-      const result = await proxiesStore.remove(form.domain)
-      if (result && !String(result).startsWith('Error')) {
-        success(t('notify.proxyDeleted'))
-        router.push('/')
-      } else {
-        error(String(result))
-      }
-      modal.close()
-    },
+    message: form.domain,
   })
+  if (result) {
+    const res = await proxiesStore.remove(form.domain)
+    if (res && !String(res).startsWith('Error')) {
+      success(t('notify.proxyDeleted'))
+      router.push('/')
+    } else {
+      error(String(res))
+    }
+  }
 }
 </script>
 
diff --git a/front_vue/src/Design/views/SettingsView.vue b/front_vue/src/Design/views/SettingsView.vue
index 2b33dea..febf1a9 100644
--- a/front_vue/src/Design/views/SettingsView.vue
+++ b/front_vue/src/Design/views/SettingsView.vue
@@ -62,7 +62,7 @@ const toggleAcme = async () => {
 <template>
   <div class="settings-view">
     <div class="settings-header">
-      <h2 class="section-title">{{ t('settings.title') }}</h2>
+      <VSectionHeader :title="t('settings.title')" />
       <VButton variant="success" icon="fas fa-save" :loading="saving" @click="saveSettings">
         {{ saving ? t('settings.saving') : t('settings.save') }}
       </VButton>
@@ -127,20 +127,25 @@ const toggleAcme = async () => {
 }
 
 .settings-card {
-  background: var(--glass-bg-light);
-  backdrop-filter: var(--backdrop-blur);
+  background: rgba(var(--accent-rgb), 0.02);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius);
   padding: var(--space-lg);
+  transition: all var(--transition-base);
+}
+
+.settings-card:hover {
+  background: rgba(var(--accent-rgb), 0.04);
+  border-color: rgba(var(--accent-rgb), 0.2);
 }
 
 .settings-card-title {
-  font-size: var(--text-lg);
+  font-size: var(--text-md);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   margin: 0 0 20px 0;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--divider-subtle);
+  border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
   display: flex;
   align-items: center;
   gap: var(--space-sm);
diff --git a/front_vue/src/Design/views/SiteEditView.vue b/front_vue/src/Design/views/SiteEditView.vue
index 0542f50..508d731 100644
--- a/front_vue/src/Design/views/SiteEditView.vue
+++ b/front_vue/src/Design/views/SiteEditView.vue
@@ -1,9 +1,9 @@
-<script setup>
+<script setup>
 const { t } = useI18n()
 const router = useRouter()
 const sitesStore = useSitesStore()
 const { success, error } = useNotification()
-const modal = useModal()
+const { confirmDelete: showConfirm } = useConfirm()
 
 const props = defineProps({
   host: { type: String, required: true },
@@ -19,7 +19,6 @@ const form = reactive({
   autoSSL: false,
 })
 
-import { api } from '@core/api/index.js'
 
 const saving = ref(false)
 const aliasInput = ref('')
@@ -81,22 +80,20 @@ const saveSite = async () => {
   saving.value = false
 }
 
-const confirmDelete = () => {
-  modal.open({
+const confirmDelete = async () => {
+  const result = await showConfirm({
     title: t('sites.deleteTitle'),
-    message: t('sites.deleteConfirm', { name: form.name, host: form.host }),
-    warning: t('sites.deleteWarning'),
-    onConfirm: async () => {
-      const result = await sitesStore.remove(form.host)
-      if (result && !String(result).startsWith('Error')) {
-        success(t('notify.siteDeleted'))
-        router.push('/')
-      } else {
-        error(String(result))
-      }
-      modal.close()
-    },
+    message: `${form.name} (${form.host})`,
   })
+  if (result) {
+    const res = await sitesStore.remove(form.host)
+    if (res && !String(res).startsWith('Error')) {
+      success(t('notify.siteDeleted'))
+      router.push('/')
+    } else {
+      error(String(res))
+    }
+  }
 }
 </script>
 
diff --git a/front_vue/src/Design/views/VAccessView.vue b/front_vue/src/Design/views/VAccessView.vue
index 8f696f9..f29ef11 100644
--- a/front_vue/src/Design/views/VAccessView.vue
+++ b/front_vue/src/Design/views/VAccessView.vue
@@ -1,6 +1,4 @@
-<script setup>
-import { api } from '@core/api/index.js'
-import { useDraggable } from '@core/composables/useDraggable.js'
+<script setup>
 
 const { t } = useI18n()
 const route = useRoute()
diff --git a/front_vue/vite.config.js b/front_vue/vite.config.js
index 20eccca..c3ea0c9 100644
--- a/front_vue/vite.config.js
+++ b/front_vue/vite.config.js
@@ -3,6 +3,9 @@ import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { resolve } from 'path'
+import { readFileSync } from 'fs'
+
+const wailsConfig = JSON.parse(readFileSync(resolve(__dirname, '../wails.json'), 'utf-8'))
 
 export default defineConfig({
   plugins: [
@@ -14,6 +17,13 @@ export default defineConfig({
         'vue-router',
         'vue-i18n',
         'pinia',
+        {
+          '@core/api/index.js': ['api'],
+          '@core/constants.js': [
+            'SERVICE_NAMES', 'SITE_STATUS', 'PROXY_STATUS', 'VACCESS_TYPE',
+            'CERT_MODE', 'THEME', 'LOCALE', 'STORAGE_KEYS', 'AUTO_REFRESH_INTERVAL', 'APP_VERSION',
+          ],
+        },
       ],
       dirs: [
         'src/Core/composables',
@@ -41,6 +51,10 @@ export default defineConfig({
     port: 4444,
   },
 
+  define: {
+    __APP_VERSION__: JSON.stringify(wailsConfig.info.productVersion),
+  },
+
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src'),
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..45bc132
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,959 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="vServer - Мощный функциональный веб-сервер на Go с поддержкой HTTP/HTTPS, MySQL, PHP и веб-админкой">
+    <title>vServer - Функциональный веб-сервер на Go</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<!-- Yandex.Metrika counter -->
+<script type="text/javascript">
+    (function(m,e,t,r,i,k,a){
+        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+        m[i].l=1*new Date();
+        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
+    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=104391783', 'ym');
+
+    ym(104391783, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", accurateTrackBounce:true, trackLinks:true});
+</script>
+<noscript><div><img src="https://mc.yandex.ru/watch/104391783" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
+<!-- /Yandex.Metrika counter -->
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="container">
+            <div class="nav">
+                <div class="logo">
+                    <span class="logo-icon">🚀</span>
+                    <span class="logo-text">vServer</span>
+                </div>
+                <nav class="menu">
+                    <a href="#features">Возможности</a>
+                    <a href="#vaccess">vAccess</a>
+                    <!-- <a href="#benefits">Преимущества</a> -->
+                    <a href="#install">Установка</a>
+                    <a href="#ssl">SSL</a>
+                </nav>
+                <a href="https://github.com/Falknat/vServer" class="btn-github" target="_blank">
+                    <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+                    </svg>
+                    GitHub
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-bg"></div>
+        <div class="container">
+            <div class="hero-content">
+                <div class="badge">Open Source</div>
+                <h1 class="hero-title">
+                    vSerf веб-сервер <br>
+                    <span class="gradient-text">нового поколения</span>
+                </h1>
+                <p class="hero-description">
+                    vServer - функциональный веб-сервер на Go с поддержкой HTTP/HTTPS, MySQL, PHP и встроенной веб-админкой (web-admin в разработке). 
+                </p>
+                <div class="hero-buttons">
+                    <a href="https://github.com/Falknat/vServer" class="btn btn-primary" target="_blank">
+                        <span>Скачать vServer</span>
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">
+                            <path d="M10 3v10m0 0l4-4m-4 4l-4-4m11 7v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </a>
+                    <a href="#docs" class="btn btn-secondary">
+                        Документация
+                    </a>
+                </div>
+                <div class="hero-stats">
+                    <div class="stat">
+                        <div class="stat-value">v1.0.0</div>
+                        <div class="stat-label">Версия</div>
+                    </div>
+                    <div class="stat">
+                        <div class="stat-value">Go</div>
+                        <div class="stat-label">Язык</div>
+                    </div>
+                    <div class="stat">
+                        <div class="stat-value">MIT</div>
+                        <div class="stat-label">Лицензия</div>
+                    </div>
+                </div>
+            </div>
+            <div class="hero-visual">
+                <div class="code-window terminal">
+                    <div class="code-header">
+                        <div class="code-dots">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                        <div class="code-title">🚀 vServer Console</div>
+                    </div>
+                    <div class="code-content terminal-content">
+                        <pre><code><span class="terminal-title">vServer 1.0.0</span>
+                            
+<span class="terminal-rocket">🚀</span> <span class="terminal-text">Запуск vServer...</span>
+<span class="terminal-folder">📁</span> <span class="terminal-text">Файлы сайта будут обслуживаться из папки 'www'</span>
+
+<span class="terminal-gear">⚙️</span> <span class="terminal-text">Запуск сервисов...</span>
+
+<span class="terminal-tag">[JSON]</span> <span class="terminal-success">config.json успешно загружен</span>
+<span class="terminal-tag">[JSON]</span> <span class="terminal-success">config.json успешно прочитан</span>
+
+<span class="terminal-tag">[HTTPS]</span> <span class="terminal-success">✅ Загрузили сертификат для: example.ru</span>
+<span class="terminal-tag">[HTTPS]</span> <span class="terminal-success">✅ HTTPS сервер запущен на порту 443</span>
+<span class="terminal-tag">[HTTP ]</span> <span class="terminal-success">🌐 HTTP сервер запущен на порту 80</span>
+<span class="terminal-tag">[PHP  ]</span> <span class="terminal-success">🌐 PHP FastCGI пул запущен (на портах 8000-8003)</span>
+<span class="terminal-tag">[MySQL]</span> <span class="terminal-success">Сервер MySQL запущен на 192.168.1.9:3306</span>
+
+<span class="terminal-success">Введите help для получения списка команд</span>
+
+<span class="terminal-prompt">&gt;</span> <span class="terminal-cursor">_</span></code></pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section id="features" class="features">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Всё что нужно <span class="gradient-text">в одном месте</span></h2>
+                <p class="section-description">vServer объединяет мощные инструменты для веб-разработки</p>
+            </div>
+            
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">🌐</div>
+                    <h3>HTTP/HTTPS сервер</h3>
+                    <p>Полная поддержка SSL сертификатов с автоматической загрузкой. Wildcard сертификаты для поддоменов.</p>
+                    <ul class="feature-list">
+                        <li>SSL/TLS шифрование</li>
+                        <li>Wildcard сертификаты</li>
+                        <li>Автоматический HTTPS редирект</li>
+                    </ul>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🔄</div>
+                    <h3>Proxy сервер</h3>
+                    <p>Мощный обратный прокси для перенаправления внешних запросов на локальные сервисы.</p>
+                    <ul class="feature-list">
+                        <li>Множественные прокси</li>
+                        <li>HTTP/HTTPS поддержка</li>
+                        <li>Гибкая маршрутизация</li>
+                    </ul>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🐘</div>
+                    <h3>PHP 8 сервер</h3>
+                    <p>Встроенная поддержка PHP 8 для запуска динамических веб-приложений без дополнительной настройки.</p>
+                    <ul class="feature-list">
+                        <li>PHP 8 из коробки</li>
+                        <li>Готов к работе</li>
+                        <li>Логирование ошибок</li>
+                    </ul>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon">🗄️</div>
+                    <h3>MySQL база данных</h3>
+                    <p>Полноценный MySQL сервер со всеми возможностями для хранения и управления данными.</p>
+                    <ul class="feature-list">
+                        <li>Полная поддержка MySQL</li>
+                        <li>Простая настройка</li>
+                        <li>Детальные логи</li>
+                    </ul>
+                </div>
+
+                <!-- <div class="feature-card">
+                    <div class="feature-icon">🎛️</div>
+                    <h3>Веб-админка (разработка)</h3>
+                    <p>Удобная веб-панель управления на порту 5555 с мониторингом всех сервисов в реальном времени.</p>
+                    <ul class="feature-list">
+                        <li>Мониторинг в реальном времени</li>
+                        <li>Управление сервисами</li>
+                        <li>Удобный интерфейс</li>
+                    </ul>
+                </div> -->
+
+                <div class="feature-card">
+                    <div class="feature-icon">📊</div>
+                    <h3>Логирование</h3>
+                    <p>Подробное логирование всех операций с разделением по типам для удобного анализа.</p>
+                    <ul class="feature-list">
+                        <li>HTTP/HTTPS логи</li>
+                        <li>Логи базы данных</li>
+                        <li>Системные логи</li>
+                    </ul>
+                </div>
+
+                <div class="feature-card highlight">
+                    <div class="feature-icon">🔒</div>
+                    <h3>vAccess Control</h3>
+                    <p>Продвинутая система контроля доступа с гибкими правилами для защиты ваших веб-приложений.</p>
+                    <ul class="feature-list">
+                        <li>IP-фильтрация</li>
+                        <li>Контроль по типам файлов</li>
+                        <li>Гибкие правила доступа</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- vAccess Section -->
+    <section id="vaccess" class="vaccess">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">
+                    <span class="gradient-text">vAccess</span> - Система контроля доступа
+                </h2>
+                <p class="section-description">Защитите ваш веб-сервер с помощью гибкой системы правил доступа</p>
+            </div>
+
+            <div class="vaccess-content">
+                <div class="vaccess-features">
+                    <div class="vaccess-feature">
+                        <div class="vaccess-feature-icon">🛡️</div>
+                        <h3>Многоуровневая защита</h3>
+                        <p>Комбинируйте правила по IP-адресам, типам файлов и путям для создания сложных политик безопасности.</p>
+                    </div>
+
+                    <div class="vaccess-feature">
+                        <div class="vaccess-feature-icon">⚡</div>
+                        <h3>Быстрая проверка</h3>
+                        <p>Правила проверяются последовательно. Первое совпадение срабатывает мгновенно, обеспечивая высокую производительность.</p>
+                    </div>
+
+                    <div class="vaccess-feature">
+                        <div class="vaccess-feature-icon">🎯</div>
+                        <h3>Гибкие исключения</h3>
+                        <p>Создавайте исключения для определённых путей, чтобы точно настроить политику доступа.</p>
+                    </div>
+
+                    <div class="vaccess-feature">
+                        <div class="vaccess-feature-icon">📝</div>
+                        <h3>Простая конфигурация</h3>
+                        <p>Текстовый формат конфигурации с подробными комментариями. Легко читать и редактировать.</p>
+                    </div>
+                </div>
+
+                <div class="vaccess-examples">
+                    <h3 class="vaccess-examples-title">Примеры использования</h3>
+                    
+                    <div class="vaccess-examples-grid">
+                    <div class="vaccess-example">
+                        <div class="example-header">
+                            <div class="example-number">01</div>
+                            <h4>Защита от выполнения PHP в загрузках</h4>
+                        </div>
+                        <div class="example-description">
+                            Запрещаем выполнение PHP файлов в папках с пользовательским контентом
+                        </div>
+                        <div class="code-window">
+                            <div class="code-header">
+                                <div class="code-dots">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </div>
+                                <div class="code-title">vaccess.conf</div>
+                            </div>
+                            <div class="code-content">
+<pre><code><span class="comment"># Блокируем PHP в папках uploads и templates</span>
+<span class="key">type:</span> <span class="error">Disable</span>
+<span class="key">type_file:</span> <span class="string">*.php, *.phtml</span>
+<span class="key">path_access:</span> <span class="string">/uploads/*, /templates/*</span>
+<span class="key">url_error:</span> <span class="number">404</span></code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="vaccess-example">
+                        <div class="example-header">
+                            <div class="example-number">02</div>
+                            <h4>Доступ к админке только с разрешённых IP</h4>
+                        </div>
+                        <div class="example-description">
+                            Ограничиваем доступ к административной панели списком доверенных IP
+                        </div>
+                        <div class="code-window">
+                            <div class="code-header">
+                                <div class="code-dots">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </div>
+                                <div class="code-title">vaccess.conf</div>
+                            </div>
+                            <div class="code-content">
+<pre><code><span class="comment"># Разрешаем админку только с офисных IP</span>
+<span class="key">type:</span> <span class="success">Allow</span>
+<span class="key">path_access:</span> <span class="string">/admin/*, /dashboard/*</span>
+<span class="key">ip_list:</span> <span class="string">192.168.1.100, 10.0.0.5, 127.0.0.1</span>
+<span class="key">url_error:</span> <span class="number">404</span></code></pre>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="vaccess-example">
+                        <div class="example-header">
+                            <div class="example-number">03</div>
+                            <h4>Блокировка вредоносных IP</h4>
+                        </div>
+                        <div class="example-description">
+                            Запрещаем доступ для подозрительных или вредоносных IP-адресов
+                        </div>
+                        <div class="code-window">
+                            <div class="code-header">
+                                <div class="code-dots">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </div>
+                                <div class="code-title">vaccess.conf</div>
+                            </div>
+                            <div class="code-content">
+<pre><code><span class="comment"># Полная блокировка для списка IP</span>
+<span class="key">type:</span> <span class="error">Disable</span>
+<span class="key">ip_list:</span> <span class="string">192.168.1.50, 10.0.0.99, 203.0.113.0</span>
+<span class="key">url_error:</span> <span class="string">https://example.com/blocked</span></code></pre>
+<br>
+ 
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="vaccess-example">
+                        <div class="example-header">
+                            <div class="example-number">04</div>
+                            <h4>Правила с исключениями</h4>
+                        </div>
+                        <div class="example-description">
+                            Ограничиваем доступ по IP, но делаем исключения для публичных API и ботов
+                        </div>
+                        <div class="code-window">
+                            <div class="code-header">
+                                <div class="code-dots">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </div>
+                                <div class="code-title">vaccess.conf</div>
+                            </div>
+                            <div class="code-content">
+<pre><code><span class="comment"># Доступ только с локальных IP, кроме /bot/ и /api/</span>
+<span class="key">type:</span> <span class="success">Allow</span>
+<span class="key">ip_list:</span> <span class="string">127.0.0.1, 192.168.0.1</span>
+<span class="key">exceptions_dir:</span> <span class="string">/bot/*, /api/public/*</span>
+<span class="key">url_error:</span> <span class="string">https://voxsel.ru</span></code></pre>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+
+                <div class="vaccess-params">
+                    <h3 class="vaccess-params-title">Параметры правил</h3>
+                    <div class="params-grid">
+                        <div class="param-card">
+                            <div class="param-name">type</div>
+                            <div class="param-required">ОБЯЗАТЕЛЬНЫЙ</div>
+                            <div class="param-description">
+                                <code>Allow</code> - разрешить доступ<br>
+                                <code>Disable</code> - запретить доступ
+                            </div>
+                        </div>
+
+                        <div class="param-card">
+                            <div class="param-name">type_file</div>
+                            <div class="param-optional">Опционально</div>
+                            <div class="param-description">
+                                Расширения файлов через запятую<br>
+                                Пример: <code>*.php, *.exe, *.sh</code>
+                            </div>
+                        </div>
+
+                        <div class="param-card">
+                            <div class="param-name">path_access</div>
+                            <div class="param-optional">Опционально</div>
+                            <div class="param-description">
+                                Пути через запятую<br>
+                                Пример: <code>/admin/*, /api/*, /private/*</code>
+                            </div>
+                        </div>
+
+                        <div class="param-card">
+                            <div class="param-name">ip_list</div>
+                            <div class="param-optional">Опционально</div>
+                            <div class="param-description">
+                                IP адреса через запятую<br>
+                                Пример: <code>192.168.1.1, 10.0.0.5</code>
+                            </div>
+                        </div>
+
+                        <div class="param-card">
+                            <div class="param-name">exceptions_dir</div>
+                            <div class="param-optional">Опционально</div>
+                            <div class="param-description">
+                                Пути-исключения через запятую<br>
+                                Правило НЕ применяется к этим путям
+                            </div>
+                        </div>
+
+                        <div class="param-card">
+                            <div class="param-name">url_error</div>
+                            <div class="param-optional">Опционально</div>
+                            <div class="param-description">
+                                Куда перенаправить при блокировке<br>
+                                <code>404</code>, URL или путь к файлу
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="vaccess-how-it-works">
+                    <h3 class="vaccess-how-title">Как это работает?</h3>
+                    <div class="how-it-works-steps">
+                        <div class="work-step">
+                            <div class="work-step-num">1</div>
+                            <div class="work-step-content">
+                                <h4>Запрос поступает</h4>
+                                <p>Клиент отправляет запрос на сервер. vServer получает реальный IP и путь запроса.</p>
+                            </div>
+                        </div>
+                        <div class="work-arrow">→</div>
+                        <div class="work-step">
+                            <div class="work-step-num">2</div>
+                            <div class="work-step-content">
+                                <h4>Проверка правил</h4>
+                                <p>Правила проверяются сверху вниз. Первое подходящее правило срабатывает.</p>
+                            </div>
+                        </div>
+                        <div class="work-arrow">→</div>
+                        <div class="work-step">
+                            <div class="work-step-num">3</div>
+                            <div class="work-step-content">
+                                <h4>Действие</h4>
+                                <p>Если правило разрешает - запрос обрабатывается. Если запрещает - возвращается ошибка.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="vaccess-note">
+                    <div class="note-icon">💡</div>
+                    <div class="note-content">
+                        <strong>Важно:</strong> Порядок правил имеет значение! Специфичные правила размещайте выше общих. 
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Benefits Section -->
+    <!-- <section id="benefits" class="benefits">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Почему <span class="gradient-text">vServer</span>?</h2>
+                <p class="section-description">Преимущества, которые делают vServer идеальным выбором</p>
+            </div>
+
+            <div class="benefits-grid">
+                <div class="benefit-card">
+                    <div class="benefit-number">01</div>
+                    <h3>Всё в одном</h3>
+                    <p>Не нужно устанавливать и настраивать отдельно веб-сервер, MySQL, PHP. Всё уже включено и готово к работе.</p>
+                </div>
+
+                <div class="benefit-card">
+                    <div class="benefit-number">02</div>
+                    <h3>Простота настройки</h3>
+                    <p>Вся конфигурация в одном JSON файле. Изменения применяются без перезапуска через команду config_reload.</p>
+                </div>
+
+                <div class="benefit-card">
+                    <div class="benefit-number">03</div>
+                    <h3>Производительность Go</h3>
+                    <p>Написан на Go для максимальной производительности и эффективного использования ресурсов системы.</p>
+                </div>
+
+                <div class="benefit-card">
+                    <div class="benefit-number">04</div>
+                    <h3>Open Source</h3>
+                    <p>Полностью открытый исходный код. Вы можете изучить, модифицировать и улучшить vServer под свои нужды.</p>
+                </div>
+
+                <div class="benefit-card">
+                    <div class="benefit-number">05</div>
+                    <h3>Портативность</h3>
+                    <p>Всего два файла для запуска: исполняемый файл и папка WebServer. Легко переносить между системами.</p>
+                </div>
+
+                <div class="benefit-card">
+                    <div class="benefit-number">06</div>
+                    <h3>Консольное управление</h3>
+                    <p>Мощный консольный интерфейс для управления сервером и всеми его компонентами из командной строки.</p>
+                </div>
+            </div>
+        </div>
+    </section> -->
+
+    <!-- Installation Section -->
+    <section id="install" class="installation">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Быстрый <span class="gradient-text">старт</span></h2>
+                <p class="section-description">Начните работу с vServer за несколько минут</p>
+            </div>
+
+            <div class="install-steps">
+                <div class="install-step">
+                    <div class="step-number">1</div>
+                    <div class="step-content">
+                        <h3>Скачайте vServer</h3>
+                        <p>Загрузите последний релиз vServer с готовыми компонентами</p>
+                        <a href="https://github.com/Falknat/vServer" class="download-btn" target="_blank">
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor">
+                                <path d="M10 3v10m0 0l4-4m-4 4l-4-4m11 7v3a2 2 0 01-2 2H5a2 2 0 01-2-2v-3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                            Скачать последний релиз
+                        </a>
+                    </div>
+                </div>
+
+                <div class="install-step">
+                    <div class="step-number">2</div>
+                    <div class="step-content">
+                        <h3>Распакуйте архив</h3>
+                        <p>Извлеките содержимое в удобную папку на вашем компьютере</p>
+                        <div class="step-info">
+                            Архив содержит готовый исполняемый файл и все необходимые компоненты
+                        </div>
+                    </div>
+                </div>
+
+                <div class="install-step">
+                    <div class="step-number">3</div>
+                    <div class="step-content">
+                        <h3>Создайте ваш сайт</h3>
+                        <p>Структура для размещения веб-сайта</p>
+                        <div class="code-block">
+                            <code>WebServer/www/example.com/public_www/index.html</code>
+                        </div>
+                        <div class="step-substeps">
+                            <div class="substep">
+                                <span class="substep-num">→</span>
+                                <div class="substep-content">
+                                    <strong>www/</strong> - корневая папка для сайтов
+                                </div>
+                            </div>
+                            <div class="substep">
+                                <span class="substep-num">→</span>
+                                <div class="substep-content">
+                                    <strong>example.com/</strong> - папка с именем вашего домена
+                                </div>
+                            </div>
+                            <div class="substep">
+                                <span class="substep-num">→</span>
+                                <div class="substep-content">
+                                    <strong>public_www/</strong> - публичная папка с файлами сайта
+                                </div>
+                            </div>
+                            <div class="substep">
+                                <span class="substep-num">→</span>
+                                <div class="substep-content">
+                                    <strong>public_www/index.html</strong> - файлы вашего сайта
+                                </div>
+                            </div>
+                            <div class="substep">
+                                <span class="substep-num">→</span>
+                                <div class="substep-content">
+                                    <strong>vAccess.conf</strong> - Система контроля доступа
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="install-step">
+                    <div class="step-number">4</div>
+                    <div class="step-content">
+                        <h3>Настройте конфигурацию</h3>
+                        <p>Добавьте ваш сайт в конфигурационный файл</p>
+                        <div class="code-block">
+                            <code>WebServer/config.json</code>
+                        </div>
+                        <div class="code-example">
+                            <pre><code>{
+  <span class="key">"Site_www"</span>: [{
+    <span class="key">"alias"</span>: [<span class="string">"www.example.com"</span>],
+    <span class="key">"host"</span>: <span class="string">"example.com"</span>,
+    <span class="key">"name"</span>: <span class="string">"Мой сайт"</span>,
+    <span class="key">"root_file"</span>: <span class="string">"index.html"</span>,
+    <span class="key">"root_file_routing"</span>: <span class="boolean">true</span>,
+    <span class="key">"status"</span>: <span class="string">"active"</span>
+  }]
+}</code></pre>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="install-step">
+                    <div class="step-number">5</div>
+                    <div class="step-content">
+                        <h3>Запустите сервер</h3>
+                        <p>Готово! Запустите исполняемый файл и откройте ваш сайт</p>
+                        <div class="code-block">
+                            <code>vServer.exe</code>
+                            <button class="copy-btn" onclick="copyCode(this)">
+                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
+                                    <rect x="5" y="5" width="9" height="9" rx="1" stroke-width="1.5"/>
+                                    <path d="M2 11V3a1 1 0 011-1h8" stroke-width="1.5"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="install-notes">
+                <div class="install-note">
+                    <div class="note-icon">💡</div>
+                    <div class="note-content">
+                        <strong>Совет:</strong> Для локальной разработки используйте <code>127.0.0.1</code> или <code>localhost</code> в качестве домена.
+                    </div>
+                </div>
+
+                <div class="install-note note-warning">
+                    <div class="note-icon">⚙️</div>
+                    <div class="note-content">
+                        <strong>Параметры по умолчанию:</strong> MySQL пароль - <code>root</code>, веб-админка - <code>localhost:5555</code>
+                    </div>
+                </div>
+                
+            </div>
+        </div>
+    </section>
+
+    <!-- SSL Certificates Section -->
+    <section id="ssl" class="ssl-section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">🔐 SSL <span class="gradient-text">Сертификаты</span></h2>
+                <p class="section-description">Безопасное HTTPS соединение для ваших сайтов</p>
+            </div>
+
+            <div class="ssl-content">
+                <div class="ssl-steps">
+                    <h3>Установка сертификата</h3>
+                    
+                    <div class="ssl-steps-grid">
+                    <div class="ssl-step">
+                        <div class="ssl-step-num">1</div>
+                        <div class="ssl-step-content">
+                            Откройте каталог <code>WebServer/</code> и создайте папку <code>cert/</code> (если её нет)
+                        </div>
+                    </div>
+
+                    <div class="ssl-step">
+                        <div class="ssl-step-num">2</div>
+                        <div class="ssl-step-content">
+                            Создайте папку с именем вашего домена или IP-адреса
+                        </div>
+                    </div>
+
+                    <div class="ssl-step">
+                        <div class="ssl-step-num">3</div>
+                        <div class="ssl-step-content">
+                            Поместите в неё файлы сертификатов с <strong>точными</strong> именами:
+                            <div class="ssl-files">
+                                <div class="ssl-file">📄 certificate.crt</div>
+                                <div class="ssl-file">🔑 private.key</div>
+                                <div class="ssl-file">📦 ca_bundle.crt</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="ssl-step">
+                        <div class="ssl-step-num">4</div>
+                        <div class="ssl-step-content">
+                            Сертификат будет автоматически загружен при запуске сервера ✅
+                        </div>
+                    </div>
+                    </div>
+                </div>
+
+                <div class="ssl-structure">
+                    <h3>📁 Структура сертификатов</h3>
+                    <div class="code-window">
+                        <div class="code-header">
+                            <div class="code-dots">
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                            </div>
+                            <div class="code-title">Структура папок</div>
+                        </div>
+                        <div class="code-content">
+<pre><code>WebServer/
+└── cert/
+    ├── example.com/          <span class="comment"># Основной домен</span>
+    │   ├── certificate.crt
+    │   ├── private.key
+    │   └── ca_bundle.crt
+    │
+    └── sub.example.com/      <span class="comment"># Поддомен (опционально)</span>
+        ├── certificate.crt
+        ├── private.key
+        └── ca_bundle.crt</code></pre>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="ssl-wildcard">
+                    <h3>🎯 Работа с поддоменами</h3>
+                    <div class="wildcard-info">
+                        <div class="wildcard-icon">💡</div>
+                        <div class="wildcard-text">
+                            <strong>Важно:</strong> Если для поддомена не создана отдельная папка в <code>cert/</code>, 
+                            то автоматически будет использоваться сертификат родительского домена.
+                        </div>
+                    </div>
+
+                    <div class="wildcard-examples">
+                        <div class="wildcard-example">
+                            <span class="wildcard-icon-check">✅</span>
+                            <div>
+                                <strong>example.com</strong>
+                                <p>→ использует сертификат из <code>cert/example.com/</code></p>
+                            </div>
+                        </div>
+                        <div class="wildcard-example">
+                            <span class="wildcard-icon-check">✅</span>
+                            <div>
+                                <strong>sub.example.com</strong> (папка существует)
+                                <p>→ использует <code>cert/sub.example.com/</code></p>
+                            </div>
+                        </div>
+                        <div class="wildcard-example">
+                            <span class="wildcard-icon-check">✅</span>
+                            <div>
+                                <strong>sub.example.com</strong> (папка НЕ существует)
+                                <p>→ использует <code>cert/example.com/</code></p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="wildcard-note">
+                        <div class="note-icon">🌟</div>
+                        <div class="note-content">
+                            <strong>Wildcard-сертификаты:</strong> Достаточно одного сертификата в папке основного домена для всех поддоменов!
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Documentation Section -->
+    <section id="docs" class="documentation">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Архитектура <span class="gradient-text">проекта</span></h2>
+                <p class="section-description">Простая и понятная структура vServer</p>
+            </div>
+
+            <div class="architecture">
+                <div class="arch-visual">
+                    <pre class="arch-tree">vServer/
+├── 🎯 main.go              <span class="comment"># Точка входа</span>
+│
+├── 🔧 Backend/             <span class="comment"># Основная логика</span>
+│   ├── admin/              <span class="comment"># Веб-админка</span>
+│   ├── config/             <span class="comment"># Конфиг Go</span>
+│   ├── tools/              <span class="comment"># Утилиты</span>
+│   └── WebServer/          <span class="comment"># Модули</span>
+│
+├── 🌐 WebServer/           <span class="comment"># Веб-контент</span>
+│   ├── cert/               <span class="comment"># SSL сертификаты</span>
+│   ├── soft/               <span class="comment"># MySQL и PHP</span>
+│   ├── tools/              <span class="comment"># Логи</span>
+│   └── www/                <span class="comment"># Сайты</span>
+│
+└── 📄 go.mod               <span class="comment"># Go модули</span></pre>
+                </div>
+
+                <div class="arch-details">
+                    <div class="arch-card">
+                        <h4>🔧 Backend</h4>
+                        <p>Основная логика сервера, написанная на Go. Включает модули для веб-сервера, прокси, админки и конфигурации.</p>
+                    </div>
+                    <div class="arch-card">
+                        <h4>🌐 WebServer</h4>
+                        <p>Содержит все ресурсы для работы: сайты, сертификаты, MySQL, PHP и логи. Единственная папка нужная для деплоя.</p>
+                    </div>
+                    <div class="arch-card">
+                        <h4>📊 Логирование</h4>
+                        <p>Все логи сохраняются в WebServer/tools/logs/ с разделением по типам: HTTP, HTTPS, MySQL, PHP, Config.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta">
+        <div class="container">
+            <div class="cta-content">
+                <h2>Готовы начать?</h2>
+                <p>Присоединяйтесь к open source проекту и создавайте веб-приложения быстрее</p>
+                <div class="cta-buttons">
+                    <a href="https://github.com/Falknat/vServer" class="btn btn-primary" target="_blank">
+                        <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+                        </svg>
+                        Посмотреть на GitHub
+                    </a>
+                    <a href="https://voxsel.ru" class="btn btn-secondary" target="_blank">Сайт автора</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-about">
+                    <div class="logo">
+                        <span class="logo-icon">🚀</span>
+                        <span class="logo-text">vServer</span>
+                    </div>
+                    <p>Функциональный веб-сервер на Go с поддержкой HTTP/HTTPS, MySQL, PHP и веб-админкой</p>
+                    <div class="social-links">
+                        <a href="https://github.com/Falknat/vServer" target="_blank" title="GitHub">
+                            <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
+                                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+                            </svg>
+                        </a>
+                        <a href="https://vk.com/felias" target="_blank" title="VK">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M15.07 2H8.93C3.33 2 2 3.33 2 8.93v6.14C2 20.67 3.33 22 8.93 22h6.14c5.6 0 6.93-1.33 6.93-6.93V8.93C22 3.33 20.67 2 15.07 2zm3.65 14.5h-1.52c-.66 0-.86-.53-2.04-1.71-1.03-1.02-1.49-1.15-1.75-1.15-.36 0-.46.1-.46.58v1.56c0 .42-.13.67-1.24.67-1.85 0-3.89-1.12-5.33-3.21-2.17-3.07-2.76-5.4-2.76-5.88 0-.26.1-.5.58-.5h1.52c.43 0 .6.2.76.65.85 2.37 2.26 4.45 2.85 4.45.22 0 .32-.1.32-.65v-2.54c-.07-1.17-.69-1.27-.69-1.68 0-.21.17-.42.44-.42h2.39c.37 0 .51.2.51.63v3.44c0 .37.17.51.27.51.22 0 .4-.14.81-.55 1.24-1.4 2.13-3.56 2.13-3.56.12-.26.32-.5.75-.5h1.52c.45 0 .55.23.45.63-.18.93-2.13 3.74-2.13 3.74-.19.3-.26.44 0 .77.19.25.82.8 1.24 1.29.77.88 1.36 1.62 1.52 2.13.15.51-.08.77-.59.77z"/>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="footer-links">
+                    <div class="footer-column">
+                        <h4>Проект</h4>
+                        <ul>
+                            <li><a href="#features">Возможности</a></li>
+                            <li><a href="#vaccess">vAccess</a></li>
+                            <li><a href="#install">Установка</a></li>
+                            <li><a href="#ssl">SSL_Сертификаты</a></li>
+                        </ul>
+                    </div>
+
+                    <div class="footer-column">
+                        <h4>Ресурсы</h4>
+                        <ul>
+                            <li><a href="https://github.com/Falknat/vServer" target="_blank">Исходный код</a></li>
+                            <li><a href="https://github.com/Falknat/vServer" target="_blank">Релизы</a></li>
+                        </ul>
+                    </div>
+
+                    <div class="footer-column">
+                        <h4>Контакты</h4>
+                        <ul>
+                            <li><a href="https://voxsel.ru" target="_blank">voxsel.ru</a></li>
+                            <li><a href="https://vk.com/felias" target="_blank">VK</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="footer-bottom">
+                <p>&copy; 2025 vServer. Open Source Project. Разработано с ❤️ на Go</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Smooth scroll
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+            });
+        });
+
+        // Copy code to clipboard
+        function copyCode(btn) {
+            const code = btn.previousElementSibling.textContent;
+            navigator.clipboard.writeText(code).then(() => {
+                btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M13.5 3.5L6 11l-3.5-3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+                setTimeout(() => {
+                    btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor"><rect x="5" y="5" width="9" height="9" rx="1" stroke-width="1.5"/><path d="M2 11V3a1 1 0 011-1h8" stroke-width="1.5"/></svg>';
+                }, 2000);
+            });
+        }
+
+        // Scroll animations
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }
+            });
+        }, observerOptions);
+
+        document.querySelectorAll('.feature-card, .benefit-card, .install-step, .arch-card').forEach(el => {
+            el.style.opacity = '0';
+            el.style.transform = 'translateY(30px)';
+            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+            observer.observe(el);
+        });
+
+        // Header scroll effect
+        let lastScroll = 0;
+        const header = document.querySelector('.header');
+
+        window.addEventListener('scroll', () => {
+            const currentScroll = window.pageYOffset;
+            
+            if (currentScroll > 100) {
+                header.style.background = 'rgba(10, 10, 15, 0.95)';
+                header.style.backdropFilter = 'blur(10px)';
+                header.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
+            } else {
+                header.style.background = 'transparent';
+                header.style.backdropFilter = 'none';
+                header.style.boxShadow = 'none';
+            }
+            
+            lastScroll = currentScroll;
+        });
+    </script>
+</body>
+</html>
diff --git a/test/style.css b/test/style.css
new file mode 100644
index 0000000..a606b9c
--- /dev/null
+++ b/test/style.css
@@ -0,0 +1,1593 @@
+/* ===== Reset & Base Styles ===== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary: #6366f1;
+    --primary-dark: #4f46e5;
+    --secondary: #8b5cf6;
+    --accent: #ec4899;
+    --success: #10b981;
+    --bg-dark: #0a0a0f;
+    --bg-card: #1a1a24;
+    --bg-light: #2a2a38;
+    --text-primary: #ffffff;
+    --text-secondary: #a0a0b8;
+    --text-muted: #6b6b8a;
+    --gradient-1: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
+    --gradient-2: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --gradient-3: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    --shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: var(--bg-dark);
+    color: var(--text-primary);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* ===== Header ===== */
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    padding: 20px 0;
+    transition: all 0.3s ease;
+}
+
+.nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 40px;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 24px;
+    font-weight: bold;
+    color: var(--text-primary);
+    text-decoration: none;
+}
+
+.logo-icon {
+    font-size: 28px;
+}
+
+.menu {
+    display: flex;
+    gap: 30px;
+    flex: 1;
+    justify-content: center;
+}
+
+.menu a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+}
+
+.menu a:hover {
+    color: var(--text-primary);
+}
+
+.menu a::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--gradient-1);
+    transition: width 0.3s ease;
+}
+
+.menu a:hover::after {
+    width: 100%;
+}
+
+.btn-github {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background: var(--bg-card);
+    color: var(--text-primary);
+    text-decoration: none;
+    border-radius: 10px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-github:hover {
+    background: var(--bg-light);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.3);
+}
+
+/* ===== Buttons ===== */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 30px;
+    border-radius: 12px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border: none;
+    font-size: 16px;
+}
+
+.btn-primary {
+    background: var(--gradient-1);
+    color: white;
+    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
+}
+
+.btn-primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.6);
+}
+
+.btn-secondary {
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-secondary:hover {
+    background: var(--bg-light);
+    border-color: var(--primary);
+    transform: translateY(-3px);
+}
+
+/* ===== Hero Section ===== */
+.hero {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    padding: 120px 0 80px;
+    overflow: hidden;
+}
+
+.hero-bg {
+    position: absolute;
+    inset: 0;
+    background: 
+        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 40% 90%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
+    animation: pulse 10s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.8; }
+}
+
+.hero .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+}
+
+.badge {
+    display: inline-block;
+    padding: 8px 16px;
+    background: rgba(99, 102, 241, 0.2);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: 20px;
+    color: var(--primary);
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    animation: fadeInDown 0.8s ease;
+}
+
+.hero-title {
+    font-size: 56px;
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: 20px;
+    animation: fadeInUp 0.8s ease 0.2s backwards;
+}
+
+.gradient-text {
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-description {
+    font-size: 18px;
+    color: var(--text-secondary);
+    margin-bottom: 30px;
+    max-width: 500px;
+    animation: fadeInUp 0.8s ease 0.4s backwards;
+}
+
+.hero-buttons {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 40px;
+    animation: fadeInUp 0.8s ease 0.6s backwards;
+}
+
+.hero-stats {
+    display: flex;
+    gap: 40px;
+    animation: fadeInUp 0.8s ease 0.8s backwards;
+}
+
+.stat {
+    text-align: center;
+}
+
+.stat-value {
+    font-size: 32px;
+    font-weight: 700;
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.stat-label {
+    font-size: 14px;
+    color: var(--text-muted);
+    margin-top: 5px;
+}
+
+/* Code Window */
+.hero-visual {
+    animation: fadeInRight 0.8s ease 0.4s backwards;
+}
+
+.code-window {
+    background: var(--bg-card);
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.code-header {
+    display: flex;
+    align-items: center;
+    padding: 15px 20px;
+    background: rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.code-dots {
+    display: flex;
+    gap: 8px;
+    margin-right: 15px;
+}
+
+.code-dots span {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.code-dots span:nth-child(1) { background: #ff5f56; }
+.code-dots span:nth-child(2) { background: #ffbd2e; }
+.code-dots span:nth-child(3) { background: #27c93f; }
+
+.code-title {
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+
+.code-content {
+    padding: 20px;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    overflow-x: auto;
+}
+
+.code-content .key { color: #8b5cf6; }
+.code-content .string { color: #10b981; }
+.code-content .number { color: #f59e0b; }
+.code-content .boolean { color: #ec4899; }
+
+/* Terminal Styles */
+.code-window.terminal {
+    background: #1e1e2e;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+}
+
+.terminal-content {
+    background: #1e1e2e;
+    color: #e0e0e0;
+}
+
+.terminal-title {
+    color: #00ff00;
+    font-weight: 700;
+    font-size: 16px;
+}
+
+.terminal-author {
+    color: #00ff00;
+}
+
+.terminal-site {
+    color: #00ff00;
+}
+
+.terminal-link {
+    color: #00bfff;
+    text-decoration: underline;
+}
+
+.terminal-rocket,
+.terminal-folder,
+.terminal-gear {
+    font-style: normal;
+}
+
+.terminal-text {
+    color: #e0e0e0;
+}
+
+.terminal-timestamp {
+    color: #00ff00;
+}
+
+.terminal-info {
+    color: #00bfff;
+}
+
+.terminal-tag {
+    color: #ffa500;
+}
+
+.terminal-success {
+    color: #e0e0e0;
+}
+
+.terminal-prompt {
+    color: #00ff00;
+    font-weight: 700;
+}
+
+.terminal-cursor {
+    color: #00ff00;
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
+/* ===== Features Section ===== */
+.features {
+    padding: 100px 0;
+    position: relative;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.section-title {
+    font-size: 48px;
+    font-weight: 800;
+    margin-bottom: 15px;
+}
+
+.section-description {
+    font-size: 18px;
+    color: var(--text-secondary);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 30px;
+}
+
+.feature-card {
+    background: var(--bg-card);
+    padding: 35px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.4s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-1);
+    transform: scaleX(0);
+    transition: transform 0.4s ease;
+}
+
+.feature-card:hover::before {
+    transform: scaleX(1);
+}
+
+.feature-card:hover {
+    transform: translateY(-10px);
+    box-shadow: var(--shadow);
+    border-color: rgba(99, 102, 241, 0.3);
+}
+
+.feature-icon {
+    font-size: 48px;
+    margin-bottom: 20px;
+    display: inline-block;
+}
+
+.feature-card h3 {
+    font-size: 24px;
+    margin-bottom: 12px;
+    color: var(--text-primary);
+}
+
+.feature-card p {
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+    line-height: 1.7;
+}
+
+.feature-list {
+    list-style: none;
+    padding: 0;
+}
+
+.feature-list li {
+    padding: 8px 0;
+    color: var(--text-secondary);
+    position: relative;
+    padding-left: 25px;
+}
+
+.feature-list li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--success);
+    font-weight: bold;
+}
+
+/* ===== Highlighted Feature Card ===== */
+.feature-card.highlight {
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
+    border: 2px solid rgba(99, 102, 241, 0.3);
+    position: relative;
+}
+
+.feature-card.highlight::after {
+    content: 'NEW';
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: var(--gradient-1);
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+/* ===== vAccess Section ===== */
+.vaccess {
+    padding: 100px 0;
+    background: linear-gradient(180deg, rgba(99, 102, 241, 0.05) 0%, transparent 50%, rgba(139, 92, 246, 0.05) 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+.vaccess::before {
+    content: '🔒';
+    position: absolute;
+    font-size: 400px;
+    opacity: 0.02;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-15deg);
+    pointer-events: none;
+}
+
+.vaccess-content {
+    position: relative;
+    z-index: 1;
+}
+
+.vaccess-features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 25px;
+    margin-bottom: 60px;
+}
+
+.vaccess-feature {
+    text-align: center;
+    padding: 30px 20px;
+    background: var(--bg-card);
+    border-radius: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.vaccess-feature:hover {
+    transform: translateY(-5px);
+    border-color: rgba(99, 102, 241, 0.3);
+}
+
+.vaccess-feature-icon {
+    font-size: 48px;
+    margin-bottom: 15px;
+}
+
+.vaccess-feature h3 {
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.vaccess-feature p {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.vaccess-examples {
+    margin-bottom: 60px;
+}
+
+.vaccess-examples-title {
+    text-align: center;
+    font-size: 32px;
+    margin-bottom: 40px;
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.vaccess-examples-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 30px;
+}
+
+.vaccess-example {
+    margin-bottom: 0;
+}
+
+.example-header {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 10px;
+}
+
+.example-number {
+    width: 50px;
+    height: 50px;
+    background: var(--gradient-1);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+
+.example-header h4 {
+    font-size: 22px;
+    margin: 0;
+}
+
+.example-description {
+    color: var(--text-secondary);
+    margin-bottom: 15px;
+    font-size: 15px;
+}
+
+.code-content .comment {
+    color: var(--text-muted);
+}
+
+.code-content .error {
+    color: #ef4444;
+    font-weight: 600;
+}
+
+.code-content .success {
+    color: #10b981;
+    font-weight: 600;
+}
+
+.vaccess-params {
+    margin-bottom: 60px;
+}
+
+.vaccess-params-title {
+    text-align: center;
+    font-size: 32px;
+    margin-bottom: 40px;
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.params-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+.param-card {
+    background: var(--bg-card);
+    padding: 25px;
+    border-radius: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.param-card:hover {
+    border-color: rgba(99, 102, 241, 0.3);
+    transform: translateY(-3px);
+}
+
+.param-name {
+    font-size: 20px;
+    font-weight: 700;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    color: var(--primary);
+    margin-bottom: 8px;
+}
+
+.param-required {
+    display: inline-block;
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+    padding: 3px 10px;
+    border-radius: 8px;
+    font-size: 11px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.param-optional {
+    display: inline-block;
+    background: rgba(99, 102, 241, 0.2);
+    color: var(--primary);
+    padding: 3px 10px;
+    border-radius: 8px;
+    font-size: 11px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.param-description {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.7;
+}
+
+.param-description code {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 2px 6px;
+    border-radius: 4px;
+    color: var(--primary);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 13px;
+}
+
+.vaccess-how-it-works {
+    margin-bottom: 40px;
+    background: var(--bg-card);
+    padding: 40px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.vaccess-how-title {
+    text-align: center;
+    font-size: 32px;
+    margin-bottom: 40px;
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.how-it-works-steps {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.work-step {
+    flex: 1;
+    text-align: center;
+}
+
+.work-step-num {
+    width: 60px;
+    height: 60px;
+    background: var(--gradient-1);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0 auto 20px;
+    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
+}
+
+.work-step-content h4 {
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.work-step-content p {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.work-arrow {
+    font-size: 32px;
+    color: var(--primary);
+    flex-shrink: 0;
+}
+
+.vaccess-note {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 25px 30px;
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: 15px;
+}
+
+/* ===== Benefits Section ===== */
+.benefits {
+    padding: 100px 0;
+    background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 50%, transparent 100%);
+}
+
+.benefits-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 30px;
+}
+
+.benefit-card {
+    background: var(--bg-card);
+    padding: 40px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.4s ease;
+    position: relative;
+}
+
+.benefit-card:hover {
+    transform: translateY(-10px);
+    box-shadow: var(--shadow);
+    border-color: rgba(139, 92, 246, 0.3);
+}
+
+.benefit-number {
+    font-size: 48px;
+    font-weight: 800;
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 20px;
+    opacity: 0.7;
+}
+
+.benefit-card h3 {
+    font-size: 24px;
+    margin-bottom: 12px;
+}
+
+.benefit-card p {
+    color: var(--text-secondary);
+    line-height: 1.7;
+}
+
+/* ===== Installation Section ===== */
+.installation {
+    padding: 100px 0;
+}
+
+.install-steps {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.install-step {
+    display: flex;
+    gap: 30px;
+    margin-bottom: 40px;
+    position: relative;
+}
+
+.install-step:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    left: 30px;
+    top: 70px;
+    bottom: -40px;
+    width: 2px;
+    background: linear-gradient(180deg, var(--primary) 0%, transparent 100%);
+}
+
+.step-number {
+    flex-shrink: 0;
+    width: 60px;
+    height: 60px;
+    background: var(--gradient-1);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    font-weight: 700;
+    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
+}
+
+.step-content {
+    flex: 1;
+}
+
+.step-content h3 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.step-content p {
+    color: var(--text-secondary);
+    margin-bottom: 15px;
+}
+
+.code-block {
+    position: relative;
+    background: var(--bg-card);
+    padding: 15px 20px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.code-block code {
+    color: var(--success);
+}
+
+.copy-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    padding: 8px;
+    border-radius: 6px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+}
+
+.copy-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: var(--text-primary);
+}
+
+.download-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 28px;
+    background: var(--gradient-1);
+    color: white;
+    text-decoration: none;
+    border-radius: 12px;
+    font-weight: 600;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
+    margin-top: 10px;
+}
+
+.download-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.6);
+}
+
+.step-info {
+    background: var(--bg-light);
+    padding: 12px 18px;
+    border-radius: 10px;
+    color: var(--text-secondary);
+    font-size: 14px;
+    margin-top: 10px;
+    border-left: 3px solid var(--primary);
+}
+
+.step-substeps {
+    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.substep {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.substep-num {
+    color: var(--primary);
+    font-size: 18px;
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.substep-content {
+    flex: 1;
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.substep-content strong {
+    color: var(--primary);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+}
+
+.code-example {
+    background: var(--bg-card);
+    padding: 15px 20px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-top: 10px;
+    overflow-x: auto;
+}
+
+.code-example pre {
+    margin: 0;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.code-example code {
+    color: var(--text-primary);
+}
+
+.install-notes {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-top: 40px;
+}
+
+.install-note {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 20px 25px;
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: 15px;
+}
+
+.install-note.note-warning {
+    background: rgba(139, 92, 246, 0.1);
+    border-color: rgba(139, 92, 246, 0.3);
+}
+
+.note-icon {
+    font-size: 28px;
+    flex-shrink: 0;
+}
+
+.note-content {
+    color: var(--text-secondary);
+    line-height: 1.7;
+    font-size: 14px;
+}
+
+.note-content strong {
+    color: var(--text-primary);
+    font-size: 15px;
+}
+
+.note-content code {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 3px 8px;
+    border-radius: 5px;
+    color: var(--primary);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+}
+
+/* ===== SSL Certificates Section ===== */
+.ssl-section {
+    padding: 100px 0;
+    background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, transparent 50%, rgba(99, 102, 241, 0.05) 100%);
+}
+
+.ssl-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+    margin-bottom: 40px;
+}
+
+.ssl-steps {
+    grid-column: 1 / -1;
+}
+
+.ssl-steps h3,
+.ssl-structure h3,
+.ssl-wildcard h3 {
+    font-size: 24px;
+    margin-bottom: 25px;
+    color: var(--text-primary);
+}
+
+.ssl-steps-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+}
+
+.ssl-step {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    padding: 20px;
+    background: var(--bg-card);
+    border-radius: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.ssl-step:hover {
+    border-color: rgba(16, 185, 129, 0.3);
+    transform: translateX(5px);
+}
+
+.ssl-step-num {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 700;
+    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
+}
+
+.ssl-step-content {
+    flex: 1;
+    color: var(--text-secondary);
+    line-height: 1.7;
+}
+
+.ssl-step-content code {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 3px 8px;
+    border-radius: 5px;
+    color: var(--success);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 13px;
+}
+
+.ssl-step-content strong {
+    color: var(--text-primary);
+}
+
+.ssl-files {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 12px;
+}
+
+.ssl-file {
+    background: rgba(16, 185, 129, 0.1);
+    padding: 8px 12px;
+    border-radius: 8px;
+    border-left: 3px solid var(--success);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 13px;
+    white-space: nowrap;
+}
+
+.ssl-structure {
+    grid-column: 1 / -1;
+}
+
+.ssl-wildcard {
+    grid-column: 1 / -1;
+}
+
+.wildcard-info {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 20px 25px;
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: 15px;
+    margin-bottom: 30px;
+}
+
+.wildcard-icon {
+    font-size: 32px;
+    flex-shrink: 0;
+}
+
+.wildcard-text {
+    color: var(--text-secondary);
+    line-height: 1.7;
+}
+
+.wildcard-text strong {
+    color: var(--text-primary);
+}
+
+.wildcard-text code {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 3px 8px;
+    border-radius: 5px;
+    color: var(--primary);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 13px;
+}
+
+.wildcard-examples {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.wildcard-example {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    padding: 20px;
+    background: var(--bg-card);
+    border-radius: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.wildcard-example:hover {
+    border-color: rgba(16, 185, 129, 0.3);
+    transform: translateY(-3px);
+}
+
+.wildcard-icon-check {
+    font-size: 24px;
+    flex-shrink: 0;
+}
+
+.wildcard-example strong {
+    color: var(--text-primary);
+    display: block;
+    margin-bottom: 5px;
+}
+
+.wildcard-example p {
+    color: var(--text-secondary);
+    font-size: 14px;
+    margin: 0;
+}
+
+.wildcard-example code {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 2px 6px;
+    border-radius: 4px;
+    color: var(--success);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 12px;
+}
+
+.wildcard-note {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 25px 30px;
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
+    border: 2px solid rgba(16, 185, 129, 0.3);
+    border-radius: 15px;
+}
+
+/* ===== Documentation Section ===== */
+.documentation {
+    padding: 100px 0;
+    background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.05) 50%, transparent 100%);
+}
+
+.architecture {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+    align-items: start;
+}
+
+.arch-visual {
+    background: var(--bg-card);
+    padding: 30px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    position: sticky;
+    top: 100px;
+}
+
+.arch-tree {
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 14px;
+    line-height: 1.8;
+    color: var(--text-primary);
+    overflow-x: auto;
+}
+
+.arch-tree .comment {
+    color: var(--text-muted);
+}
+
+.arch-details {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.arch-card {
+    background: var(--bg-card);
+    padding: 30px;
+    border-radius: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.arch-card:hover {
+    transform: translateX(10px);
+    border-color: rgba(139, 92, 246, 0.3);
+}
+
+.arch-card h4 {
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.arch-card p {
+    color: var(--text-secondary);
+    line-height: 1.7;
+}
+
+/* ===== CTA Section ===== */
+.cta {
+    padding: 100px 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.cta::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: 
+        radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
+        radial-gradient(circle at 70% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
+}
+
+.cta-content {
+    text-align: center;
+    position: relative;
+    z-index: 1;
+}
+
+.cta-content h2 {
+    font-size: 48px;
+    font-weight: 800;
+    margin-bottom: 15px;
+}
+
+.cta-content p {
+    font-size: 20px;
+    color: var(--text-secondary);
+    margin-bottom: 40px;
+}
+
+.cta-buttons {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+/* ===== Footer ===== */
+.footer {
+    padding: 80px 0 30px;
+    background: var(--bg-card);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr;
+    gap: 60px;
+    margin-bottom: 40px;
+}
+
+.footer-about {
+    max-width: 400px;
+}
+
+.footer-about .logo {
+    margin-bottom: 20px;
+}
+
+.footer-about p {
+    color: var(--text-secondary);
+    line-height: 1.7;
+    margin-bottom: 20px;
+}
+
+.social-links {
+    display: flex;
+    gap: 15px;
+}
+
+.social-links a {
+    width: 40px;
+    height: 40px;
+    background: var(--bg-light);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    transition: all 0.3s ease;
+}
+
+.social-links a:hover {
+    background: var(--primary);
+    color: white;
+    transform: translateY(-3px);
+}
+
+.footer-links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px;
+}
+
+.footer-column h4 {
+    margin-bottom: 15px;
+    font-size: 16px;
+}
+
+.footer-column ul {
+    list-style: none;
+}
+
+.footer-column ul li {
+    margin-bottom: 10px;
+}
+
+.footer-column ul li a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-column ul li a:hover {
+    color: var(--primary);
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: 30px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-muted);
+}
+
+/* ===== Animations ===== */
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* ===== Responsive Design ===== */
+@media (max-width: 768px) {
+    .hero .container {
+        grid-template-columns: 1fr;
+    }
+
+    .hero-visual {
+        order: -1;
+    }
+
+    .hero-title {
+        font-size: 36px;
+    }
+
+    .section-title {
+        font-size: 32px;
+    }
+
+    .features-grid,
+    .benefits-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .ssl-content {
+        grid-template-columns: 1fr;
+    }
+
+    .ssl-steps-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .wildcard-examples {
+        grid-template-columns: 1fr;
+    }
+
+    .architecture {
+        grid-template-columns: 1fr;
+    }
+
+    .arch-visual {
+        position: static;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+    }
+
+    .footer-links {
+        grid-template-columns: 1fr;
+    }
+
+    .menu {
+        display: none;
+    }
+
+    .cta-content h2 {
+        font-size: 32px;
+    }
+
+    .hero-buttons {
+        flex-direction: column;
+    }
+
+    .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .download-btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .step-substeps {
+        margin-left: 0;
+    }
+
+    /* vAccess responsive */
+    .vaccess-features {
+        grid-template-columns: 1fr;
+    }
+
+    .vaccess-examples-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .example-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .params-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .how-it-works-steps {
+        flex-direction: column;
+    }
+
+    .work-arrow {
+        transform: rotate(90deg);
+    }
+}