pages: deploy landing + calculator + checklist

Static site for Gitea Pages. Includes: - index.html — main landing with TCO calculator - checklist.html — lead magnet (23 DC questions) - styles.css — shared styles - calculator.js — TCO calc + lead form capture Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-19 11:33:25 +05:00 · 2026-05-19 11:33:25 +05:00 · 4c36bb660c
commit 4c36bb660c
4 changed files with 912 additions and 0 deletions
--- a/calculator.js
+++ b/calculator.js
@ -0,0 +1,123 @@
+(function () {
+  "use strict";
+
+  // Pricing model (USD). Tune later from real tariffs.
+  const PRICE = {
+    unitPerMonth: 89,            // 1U per month
+    kwPerMonth: 180,             // 1 kW per month (power + cooling)
+    ipPerMonth: 3,               // public IPv4
+    trafficPer1TB: 0,            // included up to 10 TB
+    crossConnect: 50,
+    ourSlaUptime: 99.982
+  };
+
+  // Office / DIY assumptions per 1U-equivalent
+  const OFFICE = {
+    powerCostPerKWh: 0.12,       // USD per kWh (office power tariff avg)
+    coolingMultiplier: 1.6,      // cooling adds 60% to power
+    rentPerUnitPerMonth: 25,     // attributable office rent per 1U
+    adminCostShare: 90,          // share of sysadmin salary per server / mo
+    avgDowntimeHoursPerYear: 4.3, // industry avg for office serverrooms
+    downtimeCostPerHour: 800     // default; user can override
+  };
+
+  const $ = (id) => document.getElementById(id);
+  const fmt = (n) => new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 }).format(Math.round(n));
+  const usd = (n) => "$" + fmt(n);
+
+  function calc() {
+    const servers = Math.max(0, +$("servers").value || 0);
+    const avgU = Math.max(1, +$("avgU").value || 1);
+    const kw = Math.max(0, +$("kw").value || 0);
+    const ips = Math.max(0, +$("ips").value || 0);
+    const currentSpend = Math.max(0, +$("currentSpend").value || 0);
+    const downtimeCost = Math.max(0, +$("downtimeCost").value || OFFICE.downtimeCostPerHour);
+    const where = $("where").value;
+
+    const totalUnits = servers * avgU;
+
+    // Our colocation monthly cost
+    const ourMonthly =
+      totalUnits * PRICE.unitPerMonth +
+      kw * PRICE.kwPerMonth +
+      ips * PRICE.ipPerMonth;
+
+    // Current monthly cost
+    let currentMonthly = currentSpend;
+    if (currentSpend === 0) {
+      if (where === "office") {
+        // Estimate office TCO if user didn't provide spend
+        const powerKWh = kw * 24 * 30; // monthly kWh
+        const power = powerKWh * OFFICE.powerCostPerKWh * OFFICE.coolingMultiplier;
+        const rent = totalUnits * OFFICE.rentPerUnitPerMonth;
+        const admin = servers * OFFICE.adminCostShare;
+        currentMonthly = power + rent + admin;
+      } else if (where === "cloud") {
+        // Cloud rough proxy: $120/mo per "server equivalent" (compute-only)
+        currentMonthly = servers * 120 + kw * 60;
+      } else {
+        currentMonthly = ourMonthly * 1.25;
+      }
+    }
+
+    const monthlyDelta = currentMonthly - ourMonthly;
+    const yearlyDelta = monthlyDelta * 12;
+    const threeYearDelta = monthlyDelta * 36;
+
+    // Downtime hidden cost (office only by default)
+    const downtimeAnnual = where === "office"
+      ? OFFICE.avgDowntimeHoursPerYear * downtimeCost
+      : 0;
+    const threeYearSavingsWithDowntime = threeYearDelta + downtimeAnnual * 3;
+
+    $("rOur").textContent = usd(ourMonthly) + " / мес";
+    $("rCurrent").textContent = usd(currentMonthly) + " / мес";
+    $("rDeltaMonth").textContent = (monthlyDelta >= 0 ? "−" : "+") + usd(Math.abs(monthlyDelta)) + " / мес";
+    $("rDowntime").textContent = downtimeAnnual > 0 ? usd(downtimeAnnual) + " / год" : "—";
+    $("rSavings").textContent = usd(Math.max(0, threeYearSavingsWithDowntime));
+
+    // Color result if no savings
+    const savingsEl = document.querySelector(".savings");
+    if (threeYearSavingsWithDowntime <= 0) {
+      savingsEl.style.opacity = "0.6";
+    } else {
+      savingsEl.style.opacity = "1";
+    }
+  }
+
+  function init() {
+    const ids = ["servers", "avgU", "kw", "ips", "currentSpend", "downtimeCost", "where"];
+    ids.forEach((id) => {
+      const el = $(id);
+      if (el) el.addEventListener("input", calc);
+      if (el && el.tagName === "SELECT") el.addEventListener("change", calc);
+    });
+    calc();
+  }
+
+  // Lead form: capture, persist to localStorage as a stub. Hook real CRM later.
+  function initLeadForm(formId) {
+    const form = document.getElementById(formId);
+    if (!form) return;
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const data = Object.fromEntries(new FormData(form).entries());
+      data.ts = new Date().toISOString();
+      data.calc = {
+        servers: $("servers")?.value,
+        kw: $("kw")?.value,
+        savings3y: $("rSavings")?.textContent
+      };
+      const stored = JSON.parse(localStorage.getItem("leads") || "[]");
+      stored.push(data);
+      localStorage.setItem("leads", JSON.stringify(stored));
+      form.innerHTML = '<div style="padding:18px;color:#4cc38a;font-weight:600;">Заявка принята. Позвоним в течение 60 минут в рабочее время.</div>';
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", () => {
+    init();
+    initLeadForm("leadForm");
+    initLeadForm("leadFormBottom");
+  });
+})();
--- a/checklist.html
+++ b/checklist.html
@ -0,0 +1,180 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Чек-лист: 23 вопроса вашему ДЦ перед подписанием договора</title>
+  <meta name="description" content="Бесплатный чек-лист из 23 вопросов, которые надо задать дата-центру перед подписанием договора на colocation. PDF-готовая версия для печати." />
+  <link rel="stylesheet" href="styles.css" />
+  <style>
+    .doc { max-width: 820px; margin: 0 auto; padding: 48px 24px 96px; }
+    .doc h1 { font-size: 2rem; margin-bottom: 6px; }
+    .doc .sub { color: var(--text-muted); margin-bottom: 28px; }
+    .doc h2 { margin-top: 36px; margin-bottom: 10px; font-size: 1.25rem; color: var(--accent); }
+    .doc ol { padding-left: 22px; }
+    .doc li { margin-bottom: 10px; }
+    .doc li b { color: #fff; }
+    .doc .hint { color: var(--text-muted); font-size: 0.92rem; display: block; margin-top: 4px; }
+    .doc .footer-cta { margin-top: 48px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
+    .toolbar { display: flex; gap: 10px; margin-bottom: 24px; }
+
+    @media print {
+      .doc { padding: 0; max-width: none; }
+      .toolbar, .no-print { display: none !important; }
+      h2 { color: #000 !important; }
+      .doc li b { color: #000 !important; }
+      .hint { color: #444 !important; }
+      .footer-cta { background: #f5f5f5 !important; color: #111 !important; }
+      a { color: #000 !important; text-decoration: underline; }
+    }
+  </style>
+</head>
+<body>
+
+<header class="nav no-print">
+  <div class="container nav-inner">
+    <a class="logo" href="index.html">KZ<span>DC</span></a>
+    <nav class="nav-links">
+      <a href="index.html">На главную</a>
+      <a href="index.html#calc">Калькулятор</a>
+      <a href="index.html#lead">Бесплатный аудит</a>
+    </nav>
+  </div>
+</header>
+
+<main class="doc">
+  <div class="toolbar no-print">
+    <button class="btn btn-primary" onclick="window.print()">Скачать PDF / Распечатать</button>
+    <a class="btn btn-ghost" href="index.html#lead">Получить аудит инфраструктуры</a>
+  </div>
+
+  <h1>23 вопроса вашему дата-центру перед подписанием договора</h1>
+  <p class="sub">Используйте этот чек-лист при общении с любым ДЦ. Если на 3+ вопроса нет внятного ответа — ищите другого провайдера.</p>
+
+  <h2>Питание</h2>
+  <ol>
+    <li>
+      <b>Схема резервирования питания — N, N+1, 2N, 2N+1?</b>
+      <span class="hint">Для прода ниже 2N не рассматривать. Запросите PUE и однолинейную схему.</span>
+    </li>
+    <li>
+      <b>Сколько вводов от разных подстанций?</b>
+      <span class="hint">Минимум два независимых ввода. Один ввод = единая точка отказа.</span>
+    </li>
+    <li>
+      <b>Сколько времени работает ДГУ автономно? Когда последний раз тестировали под нагрузкой?</b>
+      <span class="hint">Стандарт — 72 часа автономии. Тест под нагрузкой — еженедельно, лог должен быть.</span>
+    </li>
+    <li>
+      <b>Какая фактическая загрузка стоек по питанию?</b>
+      <span class="hint">Если ДЦ выше 70% утилизации — резерв N+1 уже работает на пределе.</span>
+    </li>
+  </ol>
+
+  <h2>Охлаждение</h2>
+  <ol start="5">
+    <li>
+      <b>Тип охлаждения: фреон, чиллер, фрикулинг?</b>
+      <span class="hint">Чиллер с фрикулингом — экономичный и надёжный вариант для климата Казахстана.</span>
+    </li>
+    <li>
+      <b>Резервирование кондиционеров (N+1 / N+2)?</b>
+      <span class="hint">Кондеи ломаются чаще питания. N+1 — минимум.</span>
+    </li>
+    <li>
+      <b>Какая температура и влажность в холодном коридоре?</b>
+      <span class="hint">Норма — 18–24°C, 40–55% влажности. Стабильность важнее абсолютного значения.</span>
+    </li>
+  </ol>
+
+  <h2>Сеть</h2>
+  <ol start="8">
+    <li>
+      <b>Сколько аплинков и каких? Есть ли BGP, своя AS?</b>
+      <span class="hint">Минимум 2 независимых аплинка, поддержка BGP. Доступ к KZ-IX, MSK-IX.</span>
+    </li>
+    <li>
+      <b>Какая базовая защита от DDoS? L3/L4? L7 за отдельную плату?</b>
+      <span class="hint">L3/L4 (volumetric) должны быть бесплатно. L7 — нормально брать денег.</span>
+    </li>
+    <li>
+      <b>Дают ли кросс-коннект до других операторов, в т.ч. до конкурентов?</b>
+      <span class="hint">Критерий зрелости ДЦ. Если только «через нашу сеть» — это lock-in.</span>
+    </li>
+    <li>
+      <b>Какой latency до ключевых точек: KZ-IX, MSK-IX, Frankfurt, Singapore?</b>
+      <span class="hint">Запросите traceroute и ping-логи. Цифры на маркетинговой странице — не аргумент.</span>
+    </li>
+  </ol>
+
+  <h2>SLA и договор</h2>
+  <ol start="12">
+    <li>
+      <b>Какой uptime в SLA — для питания и для сети отдельно?</b>
+      <span class="hint">Минимум 99.95% для питания, 99.9% для сети. «Общий uptime» без разбивки — красный флаг.</span>
+    </li>
+    <li>
+      <b>Какая компенсация при нарушении SLA? Прописана ли цифрой в договоре?</b>
+      <span class="hint">«По соглашению сторон» = ноль. Должен быть множитель к стоимости простоя.</span>
+    </li>
+    <li>
+      <b>Как и кем фиксируется факт инцидента?</b>
+      <span class="hint">Должен быть публичный статус-пейдж и автоматическая фиксация. Не «напишите письмо».</span>
+    </li>
+    <li>
+      <b>Срок реакции NOC на ваш тикет?</b>
+      <span class="hint">5 минут — отлично. 15 минут — приемлемо. Час — несерьёзно для прода.</span>
+    </li>
+    <li>
+      <b>Условия расторжения и штрафы за ранний выход?</b>
+      <span class="hint">Норма — уведомление за 30 дней без штрафов после окончания минимального срока.</span>
+    </li>
+  </ol>
+
+  <h2>Безопасность и compliance</h2>
+  <ol start="17">
+    <li>
+      <b>Какие сертификации: Uptime Institute Tier, ISO 27001, PCI DSS?</b>
+      <span class="hint">Запросите копии сертификатов. «Соответствуем» без документа — не считается.</span>
+    </li>
+    <li>
+      <b>Соответствие 152-ФЗ, КЗ-ПДн, отраслевым требованиям (НБ РК для финтеха)?</b>
+      <span class="hint">Если работаете с ПДн или платёжными данными — обязательный пункт.</span>
+    </li>
+    <li>
+      <b>Какие меры физической безопасности: СКУД, биометрия, видео, охрана?</b>
+      <span class="hint">Минимум: двухфакторный доступ, видео с хранением 90+ дней, охрана 24/7.</span>
+    </li>
+    <li>
+      <b>Кто имеет физический доступ к моему железу?</b>
+      <span class="hint">Только сотрудники ДЦ из вашего списка + ваши представители. Не «любой инженер».</span>
+    </li>
+  </ol>
+
+  <h2>Эксплуатация и операции</h2>
+  <ol start="21">
+    <li>
+      <b>Что включено в «руки-ноги», какой лимит и тариф сверх?</b>
+      <span class="hint">Норма — 2–4 часа в месяц включено. Сверх — $30–50/час.</span>
+    </li>
+    <li>
+      <b>Кто платит за миграцию железа из офиса?</b>
+      <span class="hint">При контракте от 12 мес миграция должна быть бесплатна. Иначе — повод торговаться.</span>
+    </li>
+    <li>
+      <b>Какие есть смежные сервисы: managed backup, бэкап в другой регион, мониторинг, IPMI/KVM?</b>
+      <span class="hint">Хороший ДЦ продаёт не только стойку, но экосистему вокруг.</span>
+    </li>
+  </ol>
+
+  <div class="footer-cta">
+    <h3 style="margin-top:0;">Хотите проверить наш ДЦ по этому чек-листу?</h3>
+    <p style="color:var(--text-muted);">Запишитесь на бесплатный аудит. Инженер ответит на все 23 вопроса, покажет машзал и посчитает TCO под вашу инфраструктуру.</p>
+    <a href="index.html#lead" class="btn btn-primary">Записаться на аудит</a>
+  </div>
+
+  <p class="muted" style="margin-top:32px; text-align:center;">© 2026 KZDC · noc@kzdc.kz · +7 727 000 00 00</p>
+</main>
+
+</body>
+</html>
--- a/index.html
+++ b/index.html
@ -0,0 +1,360 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Colocation в Tier III ДЦ Алматы — SLA 99.982% с финансовой ответственностью</title>
+  <meta name="description" content="Размещение серверов в Tier III ДЦ Казахстана. SLA с деньгами в договоре. Миграция бесплатно. Цена фиксируется на 36 месяцев. Рассчитайте TCO за 60 секунд." />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+
+<!-- Nav -->
+<header class="nav">
+  <div class="container nav-inner">
+    <div class="logo">KZ<span>DC</span></div>
+    <nav class="nav-links">
+      <a href="#calc">Калькулятор</a>
+      <a href="#sla">SLA</a>
+      <a href="#cases">Кейсы</a>
+      <a href="#compare">Сравнение</a>
+      <a href="#faq">FAQ</a>
+      <a href="checklist.html">Чек-лист</a>
+    </nav>
+    <a href="#lead" class="btn btn-primary" style="padding:10px 16px;font-size:0.9rem;">Бесплатный аудит</a>
+  </div>
+</header>
+
+<!-- Hero -->
+<section class="hero">
+  <div class="container">
+    <h1>Colocation в&nbsp;Tier III ДЦ Алматы.<br/>SLA&nbsp;99.982% с&nbsp;деньгами в&nbsp;договоре.</h1>
+    <p class="lead">
+      Размещаем ваши серверы в&nbsp;дата-центре уровня Tier III. Миграция за&nbsp;наш счёт.
+      Цена фиксируется на&nbsp;36&nbsp;месяцев. Падение свыше SLA — компенсация 10× от&nbsp;стоимости простоя.
+    </p>
+    <div class="hero-cta">
+      <a href="#calc" class="btn btn-primary">Рассчитать стоимость за 60 секунд</a>
+      <a href="#lead" class="btn btn-ghost">Заказать тур по ДЦ</a>
+    </div>
+    <div class="hero-meta">
+      <div><b>200+</b> компаний в&nbsp;ДЦ</div>
+      <div><b>1 247</b> дней без даунтайма</div>
+      <div><b>≤ 5 мин</b> реакция NOC</div>
+      <div><b>Tier III</b> Uptime Institute</div>
+    </div>
+  </div>
+</section>
+
+<!-- Logos -->
+<section style="padding:24px 0;border-bottom:1px solid var(--border);">
+  <div class="container">
+    <div class="logos-bar">
+      <div class="item">FINTECH KZ</div>
+      <div class="item">CLOUDOPS</div>
+      <div class="item">SAAS.KZ</div>
+      <div class="item">PAYHUB</div>
+      <div class="item">DATA.LAB</div>
+      <div class="item">RETAIL.IO</div>
+    </div>
+  </div>
+</section>
+
+<!-- Pains -->
+<section>
+  <div class="container">
+    <div class="section-head">
+      <div class="eyebrow">Почему уходят из&nbsp;офисной серверной</div>
+      <h2>4 причины перевезти инфраструктуру в&nbsp;ДЦ</h2>
+    </div>
+    <div class="grid cols-4">
+      <div class="card pain-card">
+        <div class="icon">⚡</div>
+        <h3>Электричество дорожает</h3>
+        <p>Тариф в&nbsp;офисе 2× от&nbsp;тарифа ДЦ. Плюс кондиционирование добавляет 60% к&nbsp;счёту.</p>
+      </div>
+      <div class="card pain-card">
+        <div class="icon">🌡️</div>
+        <h3>Кондей умирает в&nbsp;выходные</h3>
+        <p>Средний простой офисной серверной — 4.3 часа в&nbsp;год. SaaS теряет клиентов и&nbsp;NPS.</p>
+      </div>
+      <div class="card pain-card">
+        <div class="icon">👤</div>
+        <h3>Админ уволился</h3>
+        <p>Серверная без присмотра. Бэкапы не&nbsp;проверяются. RAID в&nbsp;degraded неделями.</p>
+      </div>
+      <div class="card pain-card">
+        <div class="icon">📈</div>
+        <h3>Масштабирование боль</h3>
+        <p>Нужна стойка — ремонт, кабели, согласования. У&nbsp;нас — 48 часов от&nbsp;заявки.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Solution -->
+<section>
+  <div class="container">
+    <div class="section-head">
+      <div class="eyebrow">Что входит</div>
+      <h2>Всё для боевого прода в&nbsp;одном тарифе</h2>
+    </div>
+    <div class="grid cols-3">
+      <div class="card feat-card">
+        <div class="icon">🔌</div>
+        <h3>Питание 2N</h3>
+        <p>Два независимых ввода, ИБП, дизель на&nbsp;72 часа автономии. Тест&nbsp;ДГУ еженедельно.</p>
+      </div>
+      <div class="card feat-card">
+        <div class="icon">❄️</div>
+        <h3>Охлаждение N+1</h3>
+        <p>Прецизионные кондиционеры, hot/cold aisle. Температура 22±2°C круглосуточно.</p>
+      </div>
+      <div class="card feat-card">
+        <div class="icon">🌐</div>
+        <h3>Сеть до&nbsp;100 Гбит/с</h3>
+        <p>3 независимых аплинка, BGP, поддержка собственной AS. DDoS&nbsp;L3/L4/L7 опционально.</p>
+      </div>
+      <div class="card feat-card">
+        <div class="icon">🔒</div>
+        <h3>Охрана 24/7</h3>
+        <p>СКУД, биометрия, видео 90 дней. Доступ к&nbsp;вашей стойке только по&nbsp;вашему списку.</p>
+      </div>
+      <div class="card feat-card">
+        <div class="icon">🛠️</div>
+        <h3>Руки-ноги 24/7</h3>
+        <p>4 часа в&nbsp;месяц включено. Перезагрузка, замена дисков, монтаж — по&nbsp;тикету ≤ 30 мин.</p>
+      </div>
+      <div class="card feat-card">
+        <div class="icon">📜</div>
+        <h3>Compliance</h3>
+        <p>ISO 27001, PCI DSS-ready, 152-ФЗ, КЗ-ПДн. Помогаем с&nbsp;аудитами.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Calculator -->
+<section id="calc">
+  <div class="container">
+    <div class="section-head">
+      <div class="eyebrow">Калькулятор TCO</div>
+      <h2>Сколько вы&nbsp;сэкономите за&nbsp;3 года</h2>
+      <p>Сравним вашу текущую инфраструктуру с&nbsp;colocation у&nbsp;нас. Без регистрации, результат сразу.</p>
+    </div>
+
+    <div class="calc">
+      <div class="calc-form">
+        <div class="field">
+          <label for="where">Где сейчас живут серверы</label>
+          <select id="where">
+            <option value="office">В&nbsp;офисе / своя серверная</option>
+            <option value="cloud">В&nbsp;облаке (AWS / GCP / Azure / VK Cloud)</option>
+            <option value="dc">У&nbsp;другого ДЦ / хостера</option>
+          </select>
+        </div>
+        <div class="field">
+          <label for="servers">Количество серверов</label>
+          <input id="servers" type="number" min="1" value="10" />
+        </div>
+        <div class="field">
+          <label for="avgU">Средний размер сервера (U)</label>
+          <input id="avgU" type="number" min="1" max="10" value="2" />
+        </div>
+        <div class="field">
+          <label for="kw">Суммарная мощность, кВт</label>
+          <input id="kw" type="number" min="0" step="0.5" value="6" />
+        </div>
+        <div class="field">
+          <label for="ips">Публичные IPv4-адреса</label>
+          <input id="ips" type="number" min="0" value="4" />
+        </div>
+        <div class="field">
+          <label for="currentSpend">Текущие расходы, $/мес (0 = посчитать автоматически)</label>
+          <input id="currentSpend" type="number" min="0" value="0" />
+        </div>
+        <div class="field">
+          <label for="downtimeCost">Стоимость 1 часа простоя, $</label>
+          <input id="downtimeCost" type="number" min="0" value="800" />
+        </div>
+      </div>
+
+      <div class="calc-result">
+        <div class="row"><span class="k">Текущие расходы</span><span class="v" id="rCurrent">—</span></div>
+        <div class="row"><span class="k">Размещение у&nbsp;нас</span><span class="v" id="rOur">—</span></div>
+        <div class="row"><span class="k">Разница в&nbsp;месяц</span><span class="v" id="rDeltaMonth">—</span></div>
+        <div class="row"><span class="k">Скрытая стоимость простоев</span><span class="v" id="rDowntime">—</span></div>
+        <div class="savings">
+          <div class="label">Экономия за&nbsp;3 года</div>
+          <div class="value" id="rSavings">—</div>
+          <div class="sub">Включая прямые расходы и&nbsp;стоимость прогнозного простоя.</div>
+        </div>
+        <a href="#lead" class="btn btn-primary btn-block">Получить персональный расчёт PDF</a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Trust / SLA -->
+<section id="sla">
+  <div class="container">
+    <div class="section-head">
+      <div class="eyebrow">SLA с&nbsp;деньгами</div>
+      <h2>Не&nbsp;слова, а&nbsp;цифры в&nbsp;договоре</h2>
+      <p>Если падаем ниже заявленного — кредитуем следующий счёт. Без переписок, без юристов.</p>
+    </div>
+    <table class="sla-table">
+      <thead>
+        <tr><th>Параметр</th><th>Значение</th><th>Компенсация</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Доступность питания</td><td><b>99.982%</b></td><td>10× стоимости простоя</td></tr>
+        <tr><td>Доступность сети (3&nbsp;аплинка, BGP)</td><td><b>99.95%</b></td><td>5× стоимости простоя</td></tr>
+        <tr><td>Реакция NOC на&nbsp;инцидент</td><td><b>≤ 5 мин</b></td><td>—</td></tr>
+        <tr><td>Замена железа руками инженера</td><td><b>≤ 30 мин</b></td><td>возврат месяца при&nbsp;нарушении</td></tr>
+        <tr><td>Температура в&nbsp;холодном коридоре</td><td><b>22 ± 2 °C</b></td><td>—</td></tr>
+      </tbody>
+    </table>
+
+    <div style="margin-top:28px;" class="badges">
+      <div class="badge"><b>Uptime Institute</b> Tier&nbsp;III</div>
+      <div class="badge"><b>ISO 27001</b></div>
+      <div class="badge"><b>ISO 9001</b></div>
+      <div class="badge"><b>PCI&nbsp;DSS</b>-ready</div>
+      <div class="badge"><b>КЗ-ПДн</b> / 152-ФЗ</div>
+    </div>
+  </div>
+</section>
+
+<!-- Cases -->
+<section id="cases">
+  <div class="container">
+    <div class="section-head">
+      <div class="eyebrow">Кейсы</div>
+      <h2>Что получили клиенты</h2>
+    </div>
+    <div class="grid cols-3">
+      <div class="card">
+        <h3>Финтех, 24 сервера</h3>
+        <p style="color:var(--text);"><b style="color:var(--accent);">−38%</b> TCO за&nbsp;год. Latency до&nbsp;KASE сократился с&nbsp;48 мс до&nbsp;7 мс. Прошли аудит PCI DSS с&nbsp;первого раза.</p>
+      </div>
+      <div class="card">
+        <h3>SaaS B2B, 12 серверов</h3>
+        <p style="color:var(--text);">Переезжали из&nbsp;офисной серверной за&nbsp;1 ночь. Простой по&nbsp;каждому серверу <b style="color:var(--accent);">≤ 90 мин</b>. Год спустя — 0 даунтайма.</p>
+      </div>
+      <div class="card">
+        <h3>E-commerce, 40 серверов</h3>
+        <p style="color:var(--text);">Ушли с&nbsp;AWS Frankfurt в&nbsp;наш ДЦ. <b style="color:var(--accent);">−62%</b> расходов на&nbsp;инфраструктуру, цена в&nbsp;тенге фиксирована.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Compare -->
+<section id="compare">
+  <div class="container">
+    <div class="section-head">
+      <div class="eyebrow">Сравнение</div>
+      <h2>Облако vs Офис vs Colocation</h2>
+    </div>
+    <table class="compare">
+      <thead>
+        <tr><th>Параметр</th><th>Облако</th><th>Свой офис</th><th>Colocation у&nbsp;нас</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Стоимость при&nbsp;стабильной нагрузке</td><td class="bad">Высокая</td><td class="mid">Средняя</td><td class="ok">Низкая</td></tr>
+        <tr><td>Uptime</td><td class="ok">99.95%</td><td class="bad">~99.5%</td><td class="ok">99.982%</td></tr>
+        <tr><td>Полный контроль над&nbsp;железом</td><td class="bad">Нет</td><td class="ok">Да</td><td class="ok">Да</td></tr>
+        <tr><td>Compliance из&nbsp;коробки</td><td class="mid">Частично</td><td class="bad">Сами</td><td class="ok">Да</td></tr>
+        <tr><td>Скорость масштабирования</td><td class="ok">Минуты</td><td class="bad">Недели</td><td class="mid">48 часов</td></tr>
+        <tr><td>Зависимость от&nbsp;курса валют</td><td class="bad">Высокая</td><td class="ok">Низкая</td><td class="ok">Низкая (тенге)</td></tr>
+      </tbody>
+    </table>
+  </div>
+</section>
+
+<!-- Magnet -->
+<section>
+  <div class="container">
+    <div class="magnet">
+      <div>
+        <div class="eyebrow" style="color:var(--accent);font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;">Лид-магнит</div>
+        <h3>Чек-лист: 23 вопроса вашему ДЦ перед подписанием договора</h3>
+        <p>Бесплатный PDF. Закрывает SLA, питание, сеть, безопасность, юридические нюансы. Сэкономит 2 часа на&nbsp;тендере.</p>
+      </div>
+      <a href="checklist.html" class="btn btn-primary">Открыть чек-лист</a>
+    </div>
+  </div>
+</section>
+
+<!-- FAQ -->
+<section id="faq">
+  <div class="container">
+    <div class="section-head">
+      <div class="eyebrow">FAQ</div>
+      <h2>Частые вопросы</h2>
+    </div>
+    <div class="faq">
+      <details>
+        <summary>Какой минимальный срок контракта?</summary>
+        <p>3 месяца. Дальше — помесячно. Скидка 12% начинается с&nbsp;контракта от&nbsp;12 месяцев, 18% — от&nbsp;36 месяцев с&nbsp;фиксацией цены.</p>
+      </details>
+      <details>
+        <summary>Кто перевозит серверы из&nbsp;офиса?</summary>
+        <p>Мы. Включено бесплатно при&nbsp;контракте от&nbsp;12 мес. Инженер приезжает, описывает каждый сервер, планирует окна миграции, монтирует в&nbsp;стойку, проверяет подключение и&nbsp;нагрузку.</p>
+      </details>
+      <details>
+        <summary>Что если решим уйти?</summary>
+        <p>За&nbsp;30 дней до&nbsp;окончания контракта пишете заявление. Помогаем демонтировать, упаковать и&nbsp;вынести. Никаких санкций за&nbsp;уход.</p>
+      </details>
+      <details>
+        <summary>Можно ли&nbsp;приехать и&nbsp;потрогать своё железо?</summary>
+        <p>Да. Доступ в&nbsp;ДЦ круглосуточно по&nbsp;вашему списку лиц. Проход через СКУД + биометрию. Сопровождение инженера по&nbsp;запросу.</p>
+      </details>
+      <details>
+        <summary>Делаете ли&nbsp;кросс-коннекты с&nbsp;другими операторами?</summary>
+        <p>Да. Прямые соединения с&nbsp;KazakhTelecom, TransTelecom, Beeline, Kcell, локальными ISP, точкой обмена трафиком KZ-IX. Срок установки 1–5 рабочих дней.</p>
+      </details>
+      <details>
+        <summary>Что с&nbsp;DDoS-защитой?</summary>
+        <p>Базовая L3/L4 фильтрация бесплатно. L7 + поведенческий анализ — отдельный тариф от&nbsp;$199/мес.</p>
+      </details>
+      <details>
+        <summary>Можно ли&nbsp;своё IP-пространство и&nbsp;свою AS?</summary>
+        <p>Да. Поднимаем BGP-сессии, анонсируем ваши префиксы, помогаем с&nbsp;настройкой коммьюнити аплинков.</p>
+      </details>
+      <details>
+        <summary>Что включено в&nbsp;«руки-ноги»?</summary>
+        <p>4 часа работ инженера в&nbsp;месяц — перезагрузка, замена дисков, переключение кабелей, инвентаризация, монтаж нового оборудования. Сверх лимита — $40/час.</p>
+      </details>
+    </div>
+  </div>
+</section>
+
+<!-- Lead form -->
+<section id="lead">
+  <div class="container">
+    <div class="section-head">
+      <div class="eyebrow">Бесплатный аудит</div>
+      <h2>Расчёт TCO под&nbsp;вашу инфраструктуру за&nbsp;48 часов</h2>
+      <p>Оставьте контакты — инженер позвонит в&nbsp;течение 60 минут в&nbsp;рабочее время и&nbsp;соберёт вводные. Через 48 часов получите PDF с&nbsp;расчётом и&nbsp;сравнением с&nbsp;двумя другими ДЦ.</p>
+    </div>
+    <form class="lead-form" id="leadForm">
+      <input type="text" name="name" placeholder="Имя" required />
+      <input type="text" name="company" placeholder="Компания" required />
+      <input type="text" name="contact" placeholder="Телефон или email" required />
+      <button type="submit" class="btn btn-primary">Получить расчёт</button>
+    </form>
+    <p class="muted" style="margin-top:14px;">Никакого спама. Ваши данные не&nbsp;передаются третьим лицам.</p>
+  </div>
+</section>
+
+<footer>
+  <div class="container">
+    KZDC · Алматы · NOC 24/7: +7 727 000 00 00 · noc@kzdc.kz · © 2026
+  </div>
+</footer>
+
+<script src="calculator.js"></script>
+</body>
+</html>
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,249 @@
+:root {
+  --bg: #0b0d12;
+  --bg-card: #12151c;
+  --bg-elev: #1a1f29;
+  --border: #232a36;
+  --text: #e6e9ef;
+  --text-muted: #8a93a6;
+  --accent: #4cc38a;
+  --accent-2: #ffb84d;
+  --danger: #ff6b6b;
+  --radius: 10px;
+  --maxw: 1120px;
+  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 16px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+h1, h2, h3, h4 { color: #fff; line-height: 1.2; margin: 0 0 0.6em; font-weight: 700; }
+h1 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.02em; }
+h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.01em; }
+h3 { font-size: 1.2rem; }
+
+p { margin: 0 0 1em; color: var(--text); }
+small, .muted { color: var(--text-muted); font-size: 0.9rem; }
+
+.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
+
+/* Header */
+.nav {
+  position: sticky; top: 0; z-index: 50;
+  background: rgba(11,13,18,0.85);
+  backdrop-filter: saturate(180%) blur(10px);
+  border-bottom: 1px solid var(--border);
+}
+.nav-inner {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 0;
+}
+.logo { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: #fff; }
+.logo span { color: var(--accent); }
+.nav-links { display: flex; gap: 22px; }
+.nav-links a { color: var(--text-muted); font-size: 0.95rem; }
+.nav-links a:hover { color: #fff; text-decoration: none; }
+@media (max-width: 720px) { .nav-links { display: none; } }
+
+/* Buttons */
+.btn {
+  display: inline-block;
+  padding: 14px 22px;
+  border-radius: var(--radius);
+  font-weight: 600;
+  font-size: 1rem;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: transform .08s ease, background .15s ease, border-color .15s ease;
+  text-align: center;
+  font-family: inherit;
+}
+.btn:active { transform: translateY(1px); }
+.btn-primary { background: var(--accent); color: #0a0f0b; }
+.btn-primary:hover { background: #5fd49a; text-decoration: none; }
+.btn-ghost { background: transparent; color: #fff; border-color: var(--border); }
+.btn-ghost:hover { border-color: var(--accent); text-decoration: none; }
+.btn-block { display: block; width: 100%; }
+
+/* Sections */
+section { padding: 72px 0; border-bottom: 1px solid var(--border); }
+section:last-child { border-bottom: none; }
+
+/* Hero */
+.hero { padding: 96px 0 80px; }
+.hero h1 { margin-bottom: 18px; }
+.hero p.lead { font-size: 1.2rem; color: var(--text-muted); max-width: 720px; margin-bottom: 28px; }
+.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
+.hero-meta {
+  display: flex; gap: 28px; flex-wrap: wrap; margin-top: 36px;
+  color: var(--text-muted); font-size: 0.95rem;
+}
+.hero-meta b { color: var(--accent); font-weight: 700; }
+
+/* Logos */
+.logos-bar {
+  display: flex; flex-wrap: wrap; gap: 32px; align-items: center;
+  padding: 32px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
+}
+.logos-bar .item { font-weight: 700; opacity: 0.7; font-size: 0.95rem; letter-spacing: 0.05em; }
+
+/* Grid cards */
+.grid { display: grid; gap: 18px; }
+.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
+@media (max-width: 900px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 600px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 22px;
+}
+.card h3 { margin-bottom: 8px; }
+.card p { color: var(--text-muted); margin: 0; }
+
+.pain-card .icon, .feat-card .icon {
+  width: 36px; height: 36px; border-radius: 8px;
+  background: var(--bg-elev); display: flex; align-items: center; justify-content: center;
+  font-size: 18px; margin-bottom: 14px;
+}
+
+/* Calculator */
+.calc {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 28px;
+}
+@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }
+
+.calc-form .field { margin-bottom: 16px; }
+.calc-form label { display: block; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 6px; }
+.calc-form input, .calc-form select {
+  width: 100%; padding: 12px 14px;
+  background: var(--bg-elev); color: var(--text);
+  border: 1px solid var(--border); border-radius: 8px;
+  font-size: 1rem; font-family: inherit;
+}
+.calc-form input:focus, .calc-form select:focus { outline: none; border-color: var(--accent); }
+
+.calc-result {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 22px;
+  display: flex; flex-direction: column; gap: 14px;
+}
+.calc-result .row { display: flex; justify-content: space-between; align-items: baseline; }
+.calc-result .row .k { color: var(--text-muted); font-size: 0.95rem; }
+.calc-result .row .v { color: #fff; font-weight: 700; font-size: 1.1rem; }
+.calc-result .savings {
+  margin-top: 6px; padding: 14px; border-radius: 8px;
+  background: rgba(76, 195, 138, 0.1); border: 1px solid rgba(76, 195, 138, 0.3);
+}
+.calc-result .savings .label { color: var(--accent); font-size: 0.9rem; margin-bottom: 4px; }
+.calc-result .savings .value { color: #fff; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.01em; }
+.calc-result .savings .sub { color: var(--text-muted); font-size: 0.85rem; }
+
+/* SLA table */
+.sla-table {
+  width: 100%; border-collapse: collapse;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
+}
+.sla-table th, .sla-table td {
+  padding: 14px 18px; text-align: left;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.95rem;
+}
+.sla-table th { background: var(--bg-elev); color: var(--text-muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
+.sla-table tr:last-child td { border-bottom: none; }
+.sla-table td b { color: var(--accent); }
+
+/* Compare table */
+.compare {
+  width: 100%; border-collapse: collapse;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
+}
+.compare th, .compare td {
+  padding: 14px 16px; text-align: left;
+  border-bottom: 1px solid var(--border); font-size: 0.93rem;
+}
+.compare th { background: var(--bg-elev); color: var(--text-muted); font-weight: 600; }
+.compare td.ok { color: var(--accent); }
+.compare td.bad { color: var(--danger); }
+.compare td.mid { color: var(--accent-2); }
+
+/* Trust badges */
+.badges { display: flex; flex-wrap: wrap; gap: 12px; }
+.badge {
+  padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
+  color: var(--text); font-size: 0.9rem; font-weight: 600;
+}
+.badge b { color: var(--accent); }
+
+/* FAQ */
+.faq details {
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 16px 20px; margin-bottom: 10px;
+}
+.faq summary { cursor: pointer; font-weight: 600; color: #fff; list-style: none; }
+.faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 700; }
+.faq details[open] summary::after { content: "−"; }
+.faq p { margin-top: 10px; color: var(--text-muted); }
+
+/* Lead form */
+.lead-form {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 28px;
+  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px;
+}
+@media (max-width: 820px) { .lead-form { grid-template-columns: 1fr; } }
+.lead-form input {
+  padding: 14px 16px; background: var(--bg-elev); color: var(--text);
+  border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; font-family: inherit;
+}
+.lead-form input:focus { outline: none; border-color: var(--accent); }
+
+/* Magnet block */
+.magnet {
+  background: linear-gradient(135deg, rgba(76,195,138,0.08), rgba(255,184,77,0.05));
+  border: 1px solid rgba(76,195,138,0.3);
+  border-radius: var(--radius);
+  padding: 32px;
+  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
+}
+@media (max-width: 720px) { .magnet { grid-template-columns: 1fr; } }
+.magnet h3 { margin-bottom: 8px; }
+.magnet p { color: var(--text-muted); margin: 0; }
+
+/* Footer */
+footer { padding: 40px 0; color: var(--text-muted); font-size: 0.9rem; text-align: center; border-top: 1px solid var(--border); }
+
+/* Utility */
+.section-head { margin-bottom: 36px; }
+.section-head .eyebrow { color: var(--accent); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
+.section-head p { color: var(--text-muted); max-width: 720px; }
+
+/* Print (checklist) */
+@media print {
+  body { background: #fff; color: #111; }
+  .nav, .no-print { display: none !important; }
+}