Я хочу что-бы ты сделал этот сайт намного красивее, добавил КУЧУ анимаций плавных, КУЧУ стилистики, плавных переходов, анимаций зависящих от движений человека, больше динамики, УЛУЧШИ СТИЛЬ САЙТА И ВИД НА МАКСИМУМ! Вышли полный код
index.php
```
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoGrid >> Главная</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/bew.css">
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'ru',
                autoDisplay: false
            }, 'google_translate_element');
        }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 min-h-screen overflow-x-hidden">

    <header class="bg-gradient-to-r from-blue-900 to-purple-900 text-white py-6 px-4 fixed top-0 left-0 right-0 z-50 transition-all duration-300 ease-in-out" id="header">
        <nav class="container mx-auto flex justify-between items-center">
            <a href="/" class="text-2xl font-bold hover:text-blue-300 transition-colors duration-300">CoGrid</a>
            <ul class="flex space-x-6">
                <li><a href="#services" class="hover:text-blue-300 transition-colors duration-300">Услуги</a></li>
                <li><a href="#faq" class="hover:text-blue-300 transition-colors duration-300">FAQ</a></li>
                <li><a href="plans" class="hover:text-blue-300 transition-colors duration-300">Тарифы</a></li>
            </ul>
        </nav>
    </header>

    <main class="pt-24">
        <section class="hero container mx-auto px-4 py-20 text-center">
            <h1 class="text-5xl font-bold mb-6 animate-text-gradient bg-gradient-to-r from-teal-500 via-purple-500 to-orange-500 bg-clip-text text-transparent">Добро пожаловать в будущее хостинга</h1>
            <p class="text-2xl mb-8 text-blue-300 animate-pulse">Инновационные решения для вашего цифрового успеха</p>
            <a href="plans.php" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-blue-700 transition-all duration-300 transform hover:scale-105 hover:shadow-lg">Исследовать тарифы</a>
        </section>

        <section id="services" class="container mx-auto px-4 py-20">
            <h2 class="text-4xl font-bold text-center mb-12 animate-text-gradient bg-gradient-to-r from-green-500 via-blue-500 to-purple-500 bg-clip-text text-transparent">Наши услуги</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <?php
                $services = [
                    ['icon' => 'server', 'title' => 'VPS Хостинг', 'description' => 'Мощные виртуальные серверы с полным контролем и высокой производительностью.'],
                    ['icon' => 'hard-drive', 'title' => 'Minecraft Хостинг', 'description' => 'Оптимизированные серверы для идеальной игры с минимальной задержкой.'],
                    ['icon' => 'cpu', 'title' => 'Выделенные сервера', 'description' => 'Максимальная мощность и контроль для самых требовательных проектов.']
                ];

                foreach ($services as $service) {
                    echo '<div class="bg-gray-800 rounded-xl p-6 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">';
                    echo '<div class="text-blue-500 mb-4"><i data-feather="' . $service['icon'] . '" class="w-12 h-12"></i></div>';
                    echo '<h3 class="text-2xl font-semibold mb-2">' . $service['title'] . '</h3>';
                    echo '<p class="text-gray-400">' . $service['description'] . '</p>';
                    echo '</div>';
                }
                ?>
            </div>
        </section>

        <section id="faq" class="container mx-auto px-4 py-20">
            <h2 class="text-4xl font-bold text-center mb-12 animate-text-gradient bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-clip-text text-transparent">Часто задаваемые вопросы</h2>
            <div class="space-y-6">
                <?php
                $faqItems = [
                    ['question' => 'Что такое VPS хостинг?', 'answer' => 'VPS (Virtual Private Server) хостинг предоставляет выделенные ресурсы на виртуальной машине, обеспечивая большую гибкость, производительность и контроль по сравнению с обычным хостингом.'],
                    ['question' => 'Какие преимущества у Minecraft хостинга?', 'answer' => 'Minecraft хостинг оптимизирован для игровых серверов, обеспечивая высокую производительность, низкую задержку и защиту от DDoS-атак, что гарантирует комфортный игровой процесс.'],
                    ['question' => 'Что такое выделенные сервера?', 'answer' => 'Выделенные сервера предоставляют эксклюзивный доступ к физическому серверу, обеспечивая максимальную производительность, безопасность и контроль для высоконагруженных проектов и приложений.']
                ];

                foreach ($faqItems as $item) {
                    echo '<div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">';
                    echo '<h3 class="text-xl font-semibold mb-2">' . $item['question'] . '</h3>';
                    echo '<p class="text-gray-400">' . $item['answer'] . '</p>';
                    echo '</div>';
                }
                ?>
            </div>
        </section>
    </main>

    <footer class="bg-gradient-to-r from-gray-900 to-blue-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Навигация</h3>
                    <a href="https://cogrid.cloud/" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Главная
                    </a>
                    <a href="https://cogrid.cloud/plans" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Тарифы
                    </a>
                    <a href="https://cogrid.cloud/terms" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Пользовательское соглашение
                    </a>
                    <a href="https://cogrid.cloud/privacy" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Политика конфиденциальности
                    </a>
                </div>
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Контакты</h3>
                    <p class="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">Email: <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></p>
                    <p class="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">Телефон: +7 (999) 123-45-67</p>
                </div>
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Следите за нами</h3>
                    <a href="https://t.me/cogrid" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.654-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z"/>
                        </svg>
                        Telegram канал
                    </a>
                </div>
                <div class="group">
                    <div id="google_translate_element" class="mr-6"></div>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-800 text-center">
                <p class="text-gray-400">&copy; 2024 CoGrid Hosting Services. Все права защищены.</p>
            </div>
        </div>
    </footer>

    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        feather.replace();

        const header = document.getElementById('header');
        let lastScrollTop = 0;

        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            if (scrollTop > lastScrollTop) {
                header.style.transform = 'translateY(-100%)';
            } else {
                header.style.transform = 'translateY(0)';
            }
            lastScrollTop = scrollTop;
        });
    </script>
</body>
</html>

```
plans.php
```
<?php
session_start();
function getUsdRate() {
    $url = 'https://www.cbr.ru/scripts/XML_daily.asp?date_req=' . date('d/m/Y');
    $xml = simplexml_load_file($url);
    foreach ($xml->Valute as $valute) {
        if ($valute->CharCode == 'USD') {
            return (float)str_replace(',', '.', $valute->Value);
        }
    }
    return null;
}
$usdRate = getUsdRate();
// 'paymentOptions' => ['1 месяц' => '90', '2 месяца' => '180', '3 месяца' => '270']
$vps_plans = [
    'Promo | Пермь' => [
        ['title' => 'PROMO 1', 'price' => '1300', 'price_in' => 'month', 'features' => ['32 x Ryzen™ 9 9950X', '8GB DDR5 5600 МГц', '100GB NVMe', 'Unlimited Bandwidth', '100 Mbp/s', 'Full Root access'], 'isPopular' => true, 'disadvantages' => ['L4 DDoS Protection']],
        ['title' => 'PROMO 2', 'price' => '2400', 'price_in' => 'month', 'features' => ['32 x Ryzen™ 9 9950X', '16GB DDR5 5600 МГц', '200GB NVMe', 'Unlimited Bandwidth', '100 Mbp/s', 'Full Root access'], 'isPopular' => true, 'disadvantages' => ['L4 DDoS Protection']],
        ['title' => 'PROMO 3', 'price' => '4500', 'price_in' => 'month', 'features' => ['32 x Ryzen™ 9 9950X', '32GB DDR5 5600 МГц', '400GB NVMe', 'Unlimited Bandwidth', '100 Mbp/s', 'Full Root access'], 'isPopular' => true, 'disadvantages' => ['L4 DDoS Protection']],
    ],
    'Кемерово' => [
        ['title' => 'VPS 1', 'price' => '750', 'price_in' => 'month', 'features' => ['4 x Ryzen™ 9 7950X', '2GB DDR5 5600 МГц', '25GB NVMe', 'Unlimited Bandwidth', '100 Mbp/s', 'L4 DDoS Protection', 'Full Root access'], 'disadvantages' => ['DDoS not allowed']],
        ['title' => 'VPS 2', 'price' => '1000', 'price_in' => 'month', 'features' => ['4 x Ryzen™ 9 7950X', '4GB DDR5 5600 МГц', '50GB NVMe', 'Unlimited Bandwidth', '100 Mbp/s', 'L4 DDoS Protection', 'Full Root access'], 'disadvantages' => ['DDoS not allowed']],
        ['title' => 'VPS 3', 'price' => '1300', 'price_in' => 'month', 'features' => ['16 x Ryzen™ 9 7950X', '8GB DDR5 5600 МГц', '100GB NVMe', 'Unlimited Bandwidth', '100 Mbp/s', 'L4 DDoS Protection', 'Full Root access'], 'disadvantages' => ['DDoS not allowed'], 'isPopular' => true],
        ['title' => 'VPS 4', 'price' => '2400', 'price_in' => 'month', 'features' => ['16 x Ryzen™ 9 7950X', '16GB DDR5 5600 МГц', '200GB NVMe', 'Unlimited Bandwidth', '100 Mbp/s', 'L4 DDoS Protection', 'Full Root access'], 'disadvantages' => ['DDoS not allowed']],
        ['title' => 'VPS 5', 'price' => '4550', 'price_in' => 'month', 'features' => ['16 x Ryzen™ 9 7950X', '32GB DDR5 5600 МГц', '400GB NVMe', 'Unlimited Bandwidth', '100 Mbp/s', 'L4 DDoS Protection', 'Full Root access'], 'disadvantages' => ['DDoS not allowed']],
    ],
    'Нидерланды' => [
        ['title' => 'VPS 6', 'price' => '1500', 'price_in' => 'month', 'features' => ['4 x Xeon-E5v4', '8GB DDR4 3600 МГц', '500GB HDD', 'Unlimited Bandwidth', '100 Mbp/s', 'L4 DDoS Protection', 'Full Root access'], 'disadvantages' => ['DDoS not allowed']],
        ['title' => 'VPS 7 [forever]', 'price' => '23000', 'price_in' => 'forever', 'features' => ['16 x Ryzen™ 9 7950X', '2GB DDR5 5600 МГц', '25GB NVME', 'Unlimited Bandwidth', '100 Mbp/s', 'L4 DDoS Protection', 'Full Root access'], 'disadvantages' => ['DDoS not allowed']],
        ['title' => 'VPS 8 [forever]', 'price' => '33000', 'price_in' => 'forever', 'features' => ['16 x Ryzen™ 9 7950X', '8GB DDR5 5600 МГц', '100GB NVME', 'Unlimited Bandwidth', '100 Mbp/s', 'L4 DDoS Protection', 'Full Root access'], 'disadvantages' => ['DDoS not allowed']],
        ['title' => 'VPS 9 [forever]', 'price' => '65000', 'price_in' => 'forever', 'features' => ['16 x Ryzen™ 9 7950X', '16GB DDR5 5600 МГц', '200GB NVME', 'Unlimited Bandwidth', '100 Mbp/s', 'L4 DDoS Protection', 'Full Root access'], 'disadvantages' => ['DDoS not allowed']],
    ],
    'USA – Spokane, WA' => [
        ['title' => 'VPS 10', 'price' => '700', 'price_in' => 'month', 'features' => ['2 x Xeon® E5-2680v4', '2GB RAM', '20GB NVMe', '20TB Bandwidth', '1 Gbp/s', 'L4 DDoS Protection', 'Full Root access']],
        ['title' => 'VPS 11', 'price' => '1000', 'price_in' => 'month', 'features' => ['4 x Xeon® E5-2680v4', '4GB RAM', '40GB NVMe', '20TB Bandwidth', '1 Gbp/s', 'L4 DDoS Protection', 'Full Root access']],
        ['title' => 'VPS 12', 'price' => '2050', 'price_in' => 'month', 'features' => ['6 x Xeon® E5-2680v4', '8GB RAM', '160GB NVMe', '20TB Bandwidth', '1 Gbp/s', 'L4 DDoS Protection', 'Full Root access']],
        ['title' => 'VPS 13', 'price' => '3250', 'price_in' => 'month', 'features' => ['8 x Xeon® E5-2680v4', '16GB RAM', '240GB NVMe', '20TB Bandwidth', '1 Gbp/s', 'L4 DDoS Protection', 'Full Root access']],
        ['title' => 'VPS 14', 'price' => '5550', 'price_in' => 'month', 'features' => ['16 x Xeon® E5-2698v3', '32GB RAM', '320GB NVMe', '5TB Bandwidth', '10 Gbp/s', 'L4 DDoS Protection', 'Full Root access'], 'isPopular' => true],
    ],
];

$mc_plans = [
    'For Bungee' => [
        ['title' => 'Proxy 1', 'price' => '150', 'price_in' => 'month', 'features' => ['100% x Ryzen™ 9 7950X', '2.5GB RAM', '5GB NVMe', '1 порт', '1 бекап', '1 база данных', 'Неограниченные слоты', 'DDoS защита']],
        ['title' => 'Proxy 2', 'price' => '250', 'price_in' => 'month', 'features' => ['150% x Ryzen™ 9 7950X', '3GB RAM', '10GB NVMe', '1 порт', '1 бекап', '1 база данных', 'Неограниченные слоты', 'DDoS защита'], 'isPopular' => true],
        ['title' => 'Proxy 3', 'price' => '300', 'price_in' => 'month', 'features' => ['200% x Ryzen™ 9 7950X', '4GB RAM', '10GB NVMe', '1 порт', '2 бекап', '1 база данных', 'Неограниченные слоты', 'DDoS защита']],
    ],
    'For Game' => [
        ['title' => 'Game 1', 'price' => '399', 'price_in' => 'month', 'features' => ['300% x Ryzen™ 9 7950X', '6GB RAM', '15GB NVMe', '2 порт', '5 бекап', '3 база данных', 'Неограниченные слоты', 'DDoS защита']],
        ['title' => 'Game 2', 'price' => '550', 'price_in' => 'month', 'features' => ['450% x Ryzen™ 9 7950X', '8GB RAM', '20GB NVMe', '2 порт', '5 бекап', '3 база данных', 'Неограниченные слоты', 'DDoS защита']],
        ['title' => 'Game 3', 'price' => '650', 'price_in' => 'month', 'features' => ['550% x Ryzen™ 9 7950X', '12GB RAM', '30GB NVMe', '3 порт', '5 бекап', '5 база данных', 'Неограниченные слоты', 'DDoS защита'], 'isPopular' => true],
    ],
];

$dedicated_plans = [
    'Москва' => [
        ['title' => 'Dedicated 1', 'price' => '5500', 'price_in' => 'month', 'features' => ['Ryzen 7 4750[16c/32t]', '64GB DDR4 3600 МГц', '1 ТБ NVME', 'L4 protect', 'Full Root access', '5TB Bandwidth'], 'isPopular' => true],
        ['title' => 'Dedicated 2', 'price' => '5000', 'price_in' => 'month', 'features' => ['Core i7-7700K[4c/8t]', '16GB DDR4', '240GB SSD', '1 Gbp/s', 'L4 RS Media', 'Full Root access']],
        ['title' => 'Dedicated 3', 'price' => '5600', 'price_in' => 'month', 'features' => ['Core i7-8700K[6c/12t]', '32GB DDR4', '500GB SSD', '1 Gbp/s', 'L4 RS Media', 'Full Root access']],
    ],
];

$coding_plans = [
    ['title' => 'Coding 1', 'price' => '90', 'price_in' => 'month', 'features' => ['75% x Ryzen™ 9 7950X', '300MB RAM', '5GB NVMe', '2 портов', '1 бекапов', '3 баз данных']],
    ['title' => 'Coding 2', 'price' => '170', 'price_in' => 'month', 'features' => ['125% x Ryzen™ 9 7950X', '500MB RAM', '10GB NVMe', '2 портов', '3 бекапов', '5 баз данных']],
    ['title' => 'Coding 3', 'price' => '250', 'price_in' => 'month', 'features' => ['175% x Ryzen™ 9 7950X', '1GB RAM', '10GB NVMe', '3 портов', '5 бекапов', '5 баз данных'], 'isPopular' => true],
];

$webhosting_plans = [
    'Moscow' => [
        ['title' => 'WebHosting 1', 'price' => '200', 'price_in' => 'month', 'features' => ['5GB NVMe', '1 sites', 'Panel: FastPanel', '5 Gbp/s (shared)', '10 databases', '5 FTP Accounts', '1 SFTP Accounts', 'Unlimited mail-domains'], 'disadvantages' => ['SSH']],
        ['title' => 'WebHosting 2', 'price' => '350', 'price_in' => 'month', 'features' => ['10GB NVMe', '3 sites', 'Panel: FastPanel', '5 Gbp/s (shared)', '30 databases', '10 FTP Accounts', '5 SFTP Accounts', 'Unlimited mail-domains'], 'disadvantages' => ['SSH']],
        ['title' => 'WebHosting 2', 'price' => '350', 'price_in' => 'month', 'features' => ['Unlimited NVMe', 'Unlimited sites', 'Panel: FastPanel', '5 Gbp/s (shared)', 'Unlimited databases', 'Unlimited FTP Accounts', 'Unlimited SFTP Accounts', 'Unlimited mail-domains', 'SSH'], 'isPopular' => true],
    ],
];

function renderPlanCard($plan, $usdRate) {
    $priceInUsd = $usdRate ? round($plan['price'] / $usdRate, 2) : null;
    $popularClass = isset($plan['isPopular']) && $plan['isPopular'] ? 'border-4 border-blue-500 relative popular-plan' : '';
    $planId = uniqid();
    
    echo "<div x-data=\"{ 
        selectedPrice: '{$plan['price']}',
        selectedPeriod: '{$plan['price_in']}',
        selectedPeriodText: '{$plan['price_in']}',
        usdRate: $usdRate,
        updatePricing(price, period, periodText) {
            this.selectedPrice = price;
            this.selectedPeriod = period;
            this.selectedPeriodText = periodText;
        },
        get priceInUsd() {
            return this.usdRate ? (this.selectedPrice / this.usdRate).toFixed(2) : null;
        }
    }\" class='bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 transform $popularClass'>";
    
    if (isset($plan['isPopular']) && $plan['isPopular']) {
        echo "<div class='absolute top-0 right-0 bg-blue-500 text-white text-xs px-2 py-1 rounded-bl-lg'>Популярный</div>"; 
    }
    
    echo "<div class='p-6'>";
    echo "<h3 class='text-2xl font-bold mb-2 text-blue-400'>{$plan['title']}</h3>";
    echo "<div class='flex items-baseline mb-4'>";
    echo "<span class='text-4xl font-extrabold text-blue-500' x-text='selectedPrice'></span>";
    echo "<span class='text-xl font-medium text-gray-400 ml-1' x-text=\"'₽/' + selectedPeriodText\"></span>";
    
    if (isset($plan['paymentOptions'])) {
        echo "<div x-data='{ open: false }' class='relative inline-block text-left ml-4'>";
        echo "<div>";
        echo "<button @click='open = !open' :class=\"{'rotate-180 transition-transform': open}\" class='flex items-center text-gray-400 hover:text-blue-500 focus:outline-none arrow-button'>";
        echo "<svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path></svg>";
        echo "</button>";
        echo "</div>";
        echo "<div x-show='open' @click.away='open = false' class='absolute right-0 z-10 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5' role='menu' aria-orientation='vertical' aria-labelledby='menu-button' tabindex='-1'>";
        echo "<div class='py-1' role='none'>";
        foreach ($plan['paymentOptions'] as $period => $price) {
            $periodKey = strtolower(explode(' ', $period)[1]);
            echo "<button @click=\"updatePricing('$price', '$periodKey', '$period'); open = false\" class='block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100' role='menuitem'>{$period}: {$price} ₽</button>";
        }
        echo "</div></div>";
        echo "</div>";
    }
    
    echo "</div>";
    
    echo "<p class='text-gray-500 mb-6' x-show='priceInUsd'>≈ <span x-text='priceInUsd'></span>$/<span x-text='selectedPeriodText'></span></p>";
    
    echo "<ul class='space-y-3 mb-6'>";
    foreach ($plan['features'] as $feature) {
        echo "<li class='flex items-center text-gray-400'><svg class='w-5 h-5 mr-2 text-green-500' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'></path></svg>{$feature}</li>";
    }
    if (!empty($plan['disadvantages'])) {
        foreach ($plan['disadvantages'] as $disadvantage) {
            echo "<li class='flex items-center text-gray-400'><svg class='w-5 h-5 mr-2 text-red-500' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'></path></svg>{$disadvantage}</li>";
        }
    }
    echo "</ul>";
    echo "<a href='https://t.me/dana56_callbot' class='block w-full bg-blue-600 text-white text-center py-3 rounded-lg font-semibold hover:bg-blue-700 transition duration-300'>Выбрать план</a>";
    echo "</div>";
    echo "</div>";
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoGrid >> Тарифы</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/bew.css">
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'ru',
                autoDisplay: false
            }, 'google_translate_element');
        }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 min-h-screen overflow-x-hidden" x-data="{ activeCategory: 'vps', activeSubcategory: null }">
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>

    <header class="bg-gradient-to-r from-blue-900 to-purple-900 text-white py-6 px-4 fixed top-0 left-0 right-0 z-50 transition-all duration-300 ease-in-out" id="header">
        <nav class="container mx-auto flex justify-between items-center">
            <a href="/" class="text-2xl font-bold hover:text-blue-300 transition-colors duration-300">CoGrid</a>
            <ul class="flex space-x-6">
                <li><a href="index.php#services" class="hover:text-blue-300 transition-colors duration-300">Услуги</a></li>
                <li><a href="index.php#faq" class="hover:text-blue-300 transition-colors duration-300">FAQ</a></li>
                <li><a href="plans" class="hover:text-blue-300 transition-colors duration-300">Тарифы</a></li>
            </ul>
        </nav>
    </header>

    <main class="container mx-auto px-4 py-24">
        <section  class="hero container mx-auto px-4 py-20 text-center">
            <h1 class="text-5xl font-bold mb-6 animate-text-gradient bg-gradient-to-r from-teal-500 via-purple-500 to-orange-500 bg-clip-text text-transparent">Самые лучшие тарифы для вашего проекта</h1>
            <p class="text-2xl mb-8 text-blue-300 animate-pulse">Инновационные решения для вашего цифрового успеха</p>
        </section>
        
        <div class="flex justify-center mb-12 animate-fadeIn animation-delay-500 space-x-4">
            <button @click="activeCategory = 'vps'" :class="{ 'bg-blue-600 text-white': activeCategory === 'vps', 'bg-gray-700 text-blue-300': activeCategory !== 'vps' }" class="px-6 py-3 rounded-full transform hover:scale-105 transition duration-300 shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">VPS</button>
            <button @click="activeCategory = 'dedicated'" :class="{ 'bg-blue-600 text-white': activeCategory === 'dedicated', 'bg-gray-700 text-blue-300': activeCategory !== 'dedicated' }" class="px-6 py-3 rounded-full transform hover:scale-105 transition duration-300 shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Dedicated</button>
            <button @click="activeCategory = 'webhosting'" :class="{ 'bg-blue-600 text-white': activeCategory === 'webhosting', 'bg-gray-700 text-blue-300': activeCategory !== 'webhosting' }" class="px-6 py-3 rounded-full transform hover:scale-105 transition duration-300 shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">WebHosting</button>
            <button @click="activeCategory = 'minecraft'" :class="{ 'bg-blue-600 text-white': activeCategory === 'minecraft', 'bg-gray-700 text-blue-300': activeCategory !== 'minecraft' }" class="px-6 py-3 rounded-full transform hover:scale-105 transition duration-300 shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Minecraft</button>
            <button @click="activeCategory = 'coding'" :class="{ 'bg-blue-600 text-white': activeCategory === 'coding', 'bg-gray-700 text-blue-300': activeCategory !== 'coding' }" class="px-6 py-3 rounded-full transform hover:scale-105 transition duration-300 shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Coding</button>
        </div>

        <div class="bg-gray-900 rounded-xl p-6 shadow-lg">
            <div x-show="activeCategory === 'vps'" class="animate-fadeIn">
                <?php foreach ($vps_plans as $location => $plans): ?>
                    <div class="mb-8">
                        <button @click="activeSubcategory = activeSubcategory === '<?php echo $location; ?>' ? null : '<?php echo $location; ?>'" class="w-full flex justify-between items-center bg-gray-800 text-blue-300 p-4 rounded-lg mb-4">
                            <span><?php echo $location; ?></span>
                            <svg :class="{ 'transform rotate-180': activeSubcategory === '<?php echo $location; ?>' }" class="w-5 h-5 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div x-show="activeSubcategory === '<?php echo $location; ?>'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                            <?php foreach ($plans as $plan) renderPlanCard($plan, $usdRate); ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <div x-show="activeCategory === 'minecraft'" class="animate-fadeIn">
                <?php foreach ($mc_plans as $location => $plans): ?>
                    <div class="mb-8">
                        <button @click="activeSubcategory = activeSubcategory === '<?php echo $location; ?>' ? null : '<?php echo $location; ?>'" class="w-full flex justify-between items-center bg-gray-800 text-blue-300 p-4 rounded-lg mb-4">
                            <span><?php echo $location; ?></span>
                            <svg :class="{ 'transform rotate-180': activeSubcategory === '<?php echo $location; ?>' }" class="w-5 h-5 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div x-show="activeSubcategory === '<?php echo $location; ?>'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                            <?php foreach ($plans as $plan) renderPlanCard($plan, $usdRate); ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <div x-show="activeCategory === 'dedicated'" class="animate-fadeIn">
                <?php foreach ($dedicated_plans as $location => $plans): ?>
                    <div class="mb-8">
                        <button @click="activeSubcategory = activeSubcategory === '<?php echo $location; ?>' ? null : '<?php echo $location; ?>'" class="w-full flex justify-between items-center bg-gray-800 text-blue-300 p-4 rounded-lg mb-4">
                            <span><?php echo $location; ?></span>
                            <svg :class="{ 'transform rotate-180': activeSubcategory === '<?php echo $location; ?>' }" class="w-5 h-5 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div x-show="activeSubcategory === '<?php echo $location; ?>'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                            <?php foreach ($plans as $plan) renderPlanCard($plan, $usdRate); ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <div x-show="activeCategory === 'webhosting'" class="animate-fadeIn">
                <?php foreach ($webhosting_plans as $location => $plans): ?>
                    <div class="mb-8">
                        <button @click="activeSubcategory = activeSubcategory === '<?php echo $location; ?>' ? null : '<?php echo $location; ?>'" class="w-full flex justify-between items-center bg-gray-800 text-blue-300 p-4 rounded-lg mb-4">
                            <span><?php echo $location; ?></span>
                            <svg :class="{ 'transform rotate-180': activeSubcategory === '<?php echo $location; ?>' }" class="w-5 h-5 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div x-show="activeSubcategory === '<?php echo $location; ?>'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                            <?php foreach ($plans as $plan) renderPlanCard($plan, $usdRate); ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <div x-show="activeCategory === 'coding'" class="animate-fadeIn">
                <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                    <?php foreach ($coding_plans as $plan) renderPlanCard($plan, $usdRate); ?>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-gradient-to-r from-gray-900 to-blue-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Навигация</h3>
                    <a href="https://cogrid.cloud/" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Главная
                    </a>
                    <a href="https://cogrid.cloud/plans" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Тарифы
                    </a>
                    <a href="https://cogrid.cloud/terms" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Пользовательское соглашение
                    </a>
                    <a href="https://cogrid.cloud/privacy" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Политика конфиденциальности
                    </a>
                </div>
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Контакты</h3>
                    <p class="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">Email: <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></p>
                    <p class="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">Телефон: +7 (999) 123-45-67</p>
                </div>
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Следите за нами</h3>
                    <a href="https://t.me/cogrid" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.654-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z"/>
                        </svg>
                        Telegram канал
                    </a>
                </div>
                <div class="group">
                    <div id="google_translate_element" class="mr-6"></div>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-800 text-center">
                <p class="text-gray-400">&copy; 2024 CoGrid Hosting Services. Все права защищены.</p>
            </div>
            
        </div>
    </footer>

    <script>
        const header = document.getElementById('header');
        let lastScrollTop = 0;

        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            if (scrollTop > lastScrollTop) {
                header.style.transform = 'translateY(-100%)';
            } else {
                header.style.transform = 'translateY(0)';
            }
            lastScrollTop = scrollTop;
        });
    </script>
</body>
</html>
```
css/bew.css
```
@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --secondary: #8b5cf6;
}

.popular-plan {
    position: relative;
}

.fire-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(59,130,246,1) 0%, rgba(59,130,246,0.5) 50%, rgba(59,130,246,1) 100%);
    background-size: 200% 100%;
    animation: fireMove 2s linear infinite;
}

@keyframes fireMove {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

body {
  font-family: 'Inter', sans-serif;
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-gray-50 {
  --tw-gradient-from: #f9fafb;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0));
}

.to-gray-100 {
  --tw-gradient-to: #f3f4f6;
}

.from-blue-600 {
  --tw-gradient-from: #2563eb;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}

.to-purple-600 {
  --tw-gradient-to: #9333ea;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: var(--tw-transform);
}

.hero h1 {
    line-height: 1.3;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at center, #ffffff 0.1%, transparent 0.1%), #f3f4f6;
  background-size: 50px 50px;
  z-index: -1;
}

@media (prefers-color-scheme: dark) {
  .stars {
    background: radial-gradient(circle at center, #ffffff 0.1%, transparent 0.1%), #1f2937;
  }
}

/* Animations */
.animate-gradient {
  background-size: 200% 200%;
  animation: gradientAnimation 5s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInDown {
  animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

.animation-delay-700 {
  animation-delay: 700ms;
}

.animation-delay-900 {
  animation-delay: 900ms;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.transform {
  transform: translateZ(0);
}

.hover\:scale-105:hover {
  transform: scale(1.05);
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tab-content {
  transition: opacity 0.3s ease-in-out;
}

.hidden {
  display: none;
}

.rounded-b-3xl {
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

.rounded-t-3xl {
  border-top-right-radius: 1.5rem;
  border-top-left-radius: 1.5rem;
}

/* Additional gradient animation */
.animate-text-gradient {
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Новые стили для кнопок подкатегорий */
.bg-gray-800 {
  background-color: #1f2937;
}

.text-blue-300 {
  color: #93c5fd;
}

.hover\:bg-gray-700:hover {
  background-color: #374151;
}

/* Стили для рамки категорий */
.bg-gray-900 {
  background-color: #111827;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Анимация для стрелки в кнопках подкатегорий */
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.arrow-button {
  position: relative;
  top: 4px; /* Смещение вниз */
  left: -1px; /* Смещение влево */
}

.rotate-180 {
  transform: rotate(180deg);
}

/* Анимации для появления и исчезновения подкатегорий */
.duration-200 {
  transition-duration: 200ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

/* Дополнительные стили для улучшения отзывчивости */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .text-5xl {
    font-size: 2.5rem;
  }

  .text-2xl {
    font-size: 1.5rem;
  }
}

/* Улучшение доступности */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Стили для фокуса на интерактивных элементах */
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
}

.focus\:ring-opacity-50:focus {
  --tw-ring-opacity: 0.5;
}
```
privacy/index.php
```
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoGrid >> Политика конфиденциальности</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cogrid.cloud/css/bew.css">
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'ru',
                autoDisplay: false
            }, 'google_translate_element');
        }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 min-h-screen overflow-x-hidden">

    <header class="bg-gradient-to-r from-blue-900 to-purple-900 text-white py-6 px-4 fixed top-0 left-0 right-0 z-50 transition-all duration-300 ease-in-out" id="header">
        <nav class="container mx-auto flex justify-between items-center">
            <a href="/" class="text-2xl font-bold hover:text-blue-300 transition-colors duration-300">CoGrid</a>
            <ul class="flex space-x-6">
                <li><a href="#services" class="hover:text-blue-300 transition-colors duration-300">Услуги</a></li>
                <li><a href="#faq" class="hover:text-blue-300 transition-colors duration-300">FAQ</a></li>
                <li><a href="plans" class="hover:text-blue-300 transition-colors duration-300">Тарифы</a></li>
            </ul>
        </nav>
    </header>

    <main class="pt-24">
        <section class="hero container mx-auto px-4 py-20 text-center">
            <h1 class="text-5xl font-bold mb-6 animate-text-gradient bg-gradient-to-r from-teal-500 via-purple-500 to-orange-500 bg-clip-text text-transparent">Политика конфиденциальности</h1>
            <p class="text-2xl mb-8 text-blue-300 animate-pulse">Перед использованием хостинга, прочтите.</p>
        </section>

        <section id="rules" class="container mx-auto px-4 py-20">
            <div class="space-y-6">
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">1. Общие положения</h3>
                    <p class="text-gray-400">
                        1.1. Оператор ставит своей важнейшей целью и условием осуществления своей деятельности соблюдение прав и свобод человека и гражданина при обработке его персональных данных, в том числе защиты прав на неприкосновенность частной жизни, личную и семейную тайну.<br>
                        <br>
                        1.2. Настоящая политика Оператора в отношении обработки персональных данных (далее – Политика) применяется ко всей информации, которую Оператор может получить о посетителях веб-сайта https://my.cogrid.cloud<br>
                    </p>
                </div>
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">2. Цели обработки персональных данных</h3>
                    <p class="text-gray-400">
                        2.1. Цель обработки персональных данных Пользователя — информирование Пользователя посредством отправки электронных писем; предоставление доступа Пользователю к сервисам, информации и/или материалам, содержащимся на веб-сайте; связь с Пользователем по указанным контактам; оказание услуг Пользователю; идентификация Пользователя; обеспечение безопасности Пользователя; оказание услуг Пользователю.<br>
                        <br>
                        2.2. Также Оператор имеет право направлять Пользователю уведомления о новых продуктах и услугах, специальных предложениях и различных событиях. Пользователь всегда может отказаться от получения информационных сообщений, направив Оператору письмо на адрес электронной почты info@delton.cloud с пометкой «Отказ от уведомлениях о новых продуктах и услугах и специальных предложениях».<br>
                        <br>
                        2.3. Обезличенные данные Пользователей, собираемые с помощью сервисов интернет-статистики, служат для сбора информации о действиях Пользователей на сайте, улучшения качества сайта и его содержания.<br>
                        <br>
                        2.4. Персональные данные могут использоваться для идентификации клиента и выполнения операций с применением идентификации.<br>
                    </p>
                </div>
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">3. Правовые основания обработки персональных данных</h3>
                    <p class="text-gray-400">
                        3.1. Оператор обрабатывает персональные данные Пользователя только в случае их заполнения и/или отправки Пользователем самостоятельно через специальные формы, расположенные на сайте https://my.delton.cloud. Заполняя соответствующие формы и/или отправляя свои персональные данные Оператору, Пользователь выражает свое согласие с данной Политикой.<br>
                        <br>
                        3.2. Оператор обрабатывает обезличенные данные о Пользователе в случае, если это разрешено в настройках браузера Пользователя (включено сохранение файлов «cookie» и использование технологии JavaScript).<br>
                    </p>
                </div>
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">4. Заключительные положения</h3>
                    <p class="text-gray-400">
                        4.1. Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты info@delton.cloud.<br>
                        <br>
                        4.2. В данном документе будут отражены любые изменения политики обработки персональных данных Оператором. Политика действует бессрочно до замены ее новой версией.<br>
                        <br>
                        4.3. Актуальная версия Политики в свободном доступе расположена в сети Интернет по адресу https://cogrid.cloud/privacy/
                    </p>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-gradient-to-r from-gray-900 to-blue-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Навигация</h3>
                    <a href="https://cogrid.cloud/" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Главная
                    </a>
                    <a href="https://cogrid.cloud/plans" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Тарифы
                    </a>
                    <a href="https://cogrid.cloud/terms" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Пользовательское соглашение
                    </a>
                    <a href="https://cogrid.cloud/privacy" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Политика конфиденциальности
                    </a>
                </div>
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Контакты</h3>
                    <p class="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">Email: <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></p>
                    <p class="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">Телефон: +7 (999) 123-45-67</p>
                </div>
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Следите за нами</h3>
                    <a href="https://t.me/cogrid" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.654-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z"/>
                        </svg>
                        Telegram канал
                    </a>
                </div>
                <div class="group">
                    <div id="google_translate_element" class="mr-6"></div>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-800 text-center">
                <p class="text-gray-400">&copy; 2024 CoGrid Hosting Services. Все права защищены.</p>
            </div>
        </div>
    </footer>

    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        feather.replace();

        const header = document.getElementById('header');
        let lastScrollTop = 0;

        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            if (scrollTop > lastScrollTop) {
                header.style.transform = 'translateY(-100%)';
            } else {
                header.style.transform = 'translateY(0)';
            }
            lastScrollTop = scrollTop;
        });
    </script>
</body>
</html>
```
terms/index.php
```
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoGrid >> Пользовательское соглашение</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cogrid.cloud/css/bew.css">
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'ru',
                autoDisplay: false
            }, 'google_translate_element');
        }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 min-h-screen overflow-x-hidden">

    <header class="bg-gradient-to-r from-blue-900 to-purple-900 text-white py-6 px-4 fixed top-0 left-0 right-0 z-50 transition-all duration-300 ease-in-out" id="header">
        <nav class="container mx-auto flex justify-between items-center">
            <a href="/" class="text-2xl font-bold hover:text-blue-300 transition-colors duration-300">CoGrid</a>
            <ul class="flex space-x-6">
                <li><a href="#services" class="hover:text-blue-300 transition-colors duration-300">Услуги</a></li>
                <li><a href="#faq" class="hover:text-blue-300 transition-colors duration-300">FAQ</a></li>
                <li><a href="plans" class="hover:text-blue-300 transition-colors duration-300">Тарифы</a></li>
            </ul>
        </nav>
    </header>

    <main class="pt-24">
        <section class="hero container mx-auto px-4 py-20 text-center">
            <h1 class="text-5xl font-bold mb-6 animate-text-gradient bg-gradient-to-r from-teal-500 via-purple-500 to-orange-500 bg-clip-text text-transparent">Пользовательское соглашение</h1>
            <p class="text-2xl mb-8 text-blue-300 animate-pulse">Перед использованием хостинга, прочтите.</p>
        </section>

        <section id="rules" class="container mx-auto px-4 py-20">
            <div class="space-y-6">
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">1. Зона ответственности Компании</h3>
                    <p class="text-gray-400">
                        1.1. Проблемы с хост-машинами и связью — ответственность Компании.<br>
                        <br>
                        1.2. Проблемы с операционной системой, любым программным обеспечением, установленным на виртуальном сервере Клиентом — ответственность Клиента.
                    </p>
                </div>
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">2. Порядок оплаты</h3>
                    <p class="text-gray-400">
                        2.1. Услуги предоставляются на основании 100% оплаты в течение 2 (двух) рабочих дней после оплаты.<br>
                        <br>
                        2.2. Оплата физическими лицами производится только посредством электронных платежей.<br>
                        <br>
                        2.3. Оплата Хостинга производится в рублях на основании действующих тарифов, опубликованных на официальном сайте Компании по адресу: https://cogrid.cloud<br>
                        <br>
                        2.4. К оплате может добавляться комиссия посредников и платежных систем.<br>
                        <br>
                        2.5. При подключении опции “Автоплатеж” Клиент дает разрешение Компании списывать денежные средства с привязанной банковской в сумме необходимой для активации услуг(и) с учетом имеющегося остатка денежных средств на балансе в личном кабинете.<br>
                        <br>
                        2.6. Клиент имеет право отключить автоплатежи в любой момент в личном кабинете по адресу https://my.cogrid.cloud/
                    </p>
                </div>
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">3. Возврат средств</h3>
                    <p class="text-gray-400">
                        3.1. Возврат денежных средств возможен только в случае неработоспособности сервера по вине Компания и за фактически неиспользованные дни.<br>
                        <br>
                        3.2. Возврат средств осуществляется в течение 45 (сорока пяти) рабочих дней на счет, с которого производилась оплата.<br>
                        <br>
                        3.3. Для возврата средств необходимо написать письмо запрос в поддержку с темой «Возврат средств» в личном кабинете по адресу https://my.cogrid.cloud/<br>
                        <br>
                        3.4. В случае нарушения условий предоставления услуг Компания в праве отказать Клиенту в возврате средств.<br>
                        <br>
                        3.5. Клиенту может быть отказано в возврате средств в случае, если был установлен факт мошенничества или нарушения условий предоставления услуг, описанных в настоящей оферте.<br>
                    </p>
                </div>
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">4. Права и обязанности Клиента</h3>
                    <p class="text-gray-400">
                        4.1. Клиенту предоставляется доступ (если не оговорено иное) к серверу и Клиент несет всю связанную с этим ответственность.<br>
                        <br>
                        4.2. Клиент имеет право устанавливать и использовать любое ПО на своем сервере, в случае если оно является легальным и не нарушает авторских и смежных прав, а также норм действующего законодательства Российской Федерации.<br>
                        <br>
                        4.3. Клиент обязан следить за соответствием всех размещенных материалов, используемого ПО, контентом, размещенным на сервере, и отвечать за его соответствие нормам действующего законодательства РФ.<br>
                        <br>
                        4.4. Клиент имеет право использовать свой Хостинг в любых целях, кроме целей, противоречащих законодательству Российской Федерации и законам об авторских и смежных правах.<br>
                        <br>
                        4.5. Все вопросы, связанные с работоспособностью хостинга Клиента, принимаются только в запросах в поддержку в личном кабинете по адресу https://my.cogrid.cloud<br>
                        <br>
                        4.6. В случае блокировки хостинга Клиента по жалобе и/или в следствии других причин 1 (один) или более 1 (одного) раза в месяц (скан сети, исходящие DoS-атаки и др.) и непринятия Клиентом мер по поступившей жалобе, Компания в праве досрочно остановить предоставление услуги и заблокировать Клиента без возможности возврата средств.<br>
                    </p>
                </div>
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">5. Права и обязанности Компании</h3>
                    <p class="text-gray-400">
                        5.1. Услуги Компании предоставляются «как есть», Компания оставляет за собой право пересмотреть правила предоставления услуг, в том числе ценовую политику и характеристики тарифов в любой момент, без предварительного уведомления и в одностороннем порядке, новые правила вступают в действие в момент опубликования их на официальном сайте Компании.<br>
                        <br>
                        5.2. Компания обязуется поддерживает надлежащее качество хост-машин и устранять все неисправности в кратчайщие сроки.<br>
                        <br>
                        5.3. Компания не гарантирует 100% доступность сети и хост-машин.<br>
                        <br>
                        5.4. Все плановые технические работы, обновления и тому подобные мероприятия проводятся с 4:00 до 10:00 по московскому времени. К этому пункту не относятся форс- мажорные ситуации и внеплановые работы.<br>
                        <br>
                        5.5. Компания не несет ответсвенности за невозможность доступа к сервисам по вине третьих лиц.<br>
                        <br>
                        5.6. Компания оставляет за собой право остановки сервисов и серверов Клиента для проведения: Планового обслуживания, из-за DoS- и сетевых атак, в результате стихийных бедствий и других форс-мажорных обстоятельств.<br>
                        <br>
                        5.7. Компания осуществляет услуги технической поддержки клиентов на основании запроса Клиента через личный кабинет по тарифам, опубликованным на официальном сайте Компании, расположенном по адресу https://cogrid.cloud<br>
                        <br>
                        5.8. Компания не несет ответственность за работу стороннего ПО на серверах Компании, в том числе ПО, приобретенного в Компании.<br>
                        <br>
                        5.9. Компания в праве изменять цены на услуги в большую или меньшую сторону, предварительно уведомив об этом клиента с помощью рассылки на регистрационный e-mail.<br>
                    </p>
                </div>
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">6. Запрещенный контент и ПО</h3>
                    <p class="text-gray-400">
                        6.1. На Хостинге запрещено размещение порнографии, в том числе ссылок и рекламы, содержащей порнографические сцены.<br>
                        <br>
                        6.2. Запрещено размещение информации, ПО, противоречащих и/или запрещенных законодательством РФ, законом об авторских и смежных правах.<br>
                        <br>
                        6.3. Запрещено размещение ПО для ботнетов, граббинга, фишинга, прочих целей, явно противоречащих легальной работе в сети Интернет.<br>
                        <br>
                        6.4. Осуществления массовых почтовых рассылок запрещено, кроме случаяев санкционированных самой Компанией.<br>
                        <br>
                        6.5. Запрещено размещение сервисов (в том числе с платным или приватным доступом), которые могут служить вспомогательными средствами для противоправных действий в сети Интернет.<br>
                        <br>
                        6.6. Запрещено размещение сетевых сканеров, прокси-чекеров и подобного ПО.<br>
                    </p>
                </div>
                <div class="bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:bg-gray-700">
                    <h3 class="text-2xl font-semibold mb-4">7. Компания не несет ответсвенности</h3>
                    <p class="text-gray-400">
                        7.1. За выбор Клиентом операционной системы, ПО и последствия, которые это может повлечь.<br>
                        <br>
                        7.2. Ни за какие виды прямом и косвенного ущерба, потерю информации, деловой репутации и прочие случаи ущерба.<br>
                        <br>
                        7.3. Компания не проводит проверку контента Хостинга Клиента. Исключение составляют случаи поступления мотивированной жалобы от третьей стороны.<br>
                    </p>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-gradient-to-r from-gray-900 to-blue-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Навигация</h3>
                    <a href="https://cogrid.cloud/" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Главная
                    </a>
                    <a href="https://cogrid.cloud/plans" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Тарифы
                    </a>
                    <a href="https://cogrid.cloud/terms" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Пользовательское соглашение
                    </a>
                    <a href="https://cogrid.cloud/privacy" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        Политика конфиденциальности
                    </a>
                </div>
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Контакты</h3>
                    <p class="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">Email: <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></p>
                    <p class="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">Телефон: +7 (999) 123-45-67</p>
                </div>
                <div class="group">
                    <h3 class="text-2xl font-bold mb-4 group-hover:text-blue-400 transition-colors duration-300">Следите за нами</h3>
                    <a href="https://t.me/cogrid" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center">
                        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.654-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z"/>
                        </svg>
                        Telegram канал
                    </a>
                </div>
                <div class="group">
                    <div id="google_translate_element" class="mr-6"></div>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-800 text-center">
                <p class="text-gray-400">&copy; 2024 CoGrid Hosting Services. Все права защищены.</p>
            </div>
        </div>
    </footer>

    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        feather.replace();

        const header = document.getElementById('header');
        let lastScrollTop = 0;

        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            if (scrollTop > lastScrollTop) {
                header.style.transform = 'translateY(-100%)';
            } else {
                header.style.transform = 'translateY(0)';
            }
            lastScrollTop = scrollTop;
        });
    </script>
</body>
</html>
```