est-sayt-telecom-kz-ya-hochu/index.html

717 lines
32 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Казахтелеком — Цифровое будущее Казахстана</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📡</text></svg>">
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
<link rel="stylesheet" href="design-system/kt-ai-components.css">
<link rel="stylesheet" href="design-system/kt-ai-page.css">
<style>
a.kt-ai-btn { text-decoration: none; }
/* Hero-фон: градиентная сетка */
.hero-bg {
position: relative;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,130,246,0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139,92,246,0.1), transparent);
overflow: hidden;
}
.hero-bg::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--kt-ai-divider) 1px, transparent 1px),
linear-gradient(90deg, var(--kt-ai-divider) 1px, transparent 1px);
background-size: 60px 60px;
opacity: 0.3;
mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black, transparent);
}
/* Анимированная строка статуса */
.status-bar {
display: flex;
gap: var(--kt-ai-space-4);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--kt-ai-space-8);
font-size: var(--kt-ai-text-sm);
color: var(--kt-ai-fg-muted);
}
.status-dot {
display: inline-flex;
align-items: center;
gap: var(--kt-ai-space-2);
}
.status-dot::before {
content: '';
width: 8px;
height: 8px;
border-radius: var(--kt-ai-radius-full);
background: var(--kt-ai-primary);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Секция с иконкой-спрайтом */
.tile-icon-wrap {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--kt-ai-radius-xl);
background: var(--kt-ai-bg-soft);
margin-bottom: var(--kt-ai-space-4);
color: var(--kt-ai-primary);
}
.tile-icon-wrap svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Числа-метрики */
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--kt-ai-space-6);
text-align: center;
}
.metric-num {
font-size: clamp(36px, 5vw, 56px);
font-weight: var(--kt-ai-weight-bold);
color: var(--kt-ai-fg);
line-height: 1;
letter-spacing: -0.03em;
}
.metric-label {
margin-top: var(--kt-ai-space-2);
font-size: var(--kt-ai-text-sm);
color: var(--kt-ai-fg-muted);
}
/* Новости — горизонтальные карточки */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--kt-ai-space-6);
}
.news-card {
background: var(--kt-ai-card-bg);
border: 1px solid var(--kt-ai-card-border);
border-radius: var(--kt-ai-radius-2xl);
padding: var(--kt-ai-space-6);
display: flex;
flex-direction: column;
gap: var(--kt-ai-space-3);
transition: border-color 0.2s;
}
.news-card:hover { border-color: var(--kt-ai-primary); }
.news-date {
font-size: var(--kt-ai-text-xs);
color: var(--kt-ai-fg-faint);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.news-card h3 {
margin: 0;
font-size: var(--kt-ai-text-lg);
font-weight: var(--kt-ai-weight-semibold);
color: var(--kt-ai-fg);
}
.news-card p {
margin: 0;
font-size: var(--kt-ai-text-sm);
color: var(--kt-ai-fg-muted);
line-height: var(--kt-ai-leading-normal);
}
/* Тарифы — карточки */
.tariff-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--kt-ai-space-6);
}
.tariff-card {
background: var(--kt-ai-card-bg);
border: 1px solid var(--kt-ai-card-border);
border-radius: var(--kt-ai-radius-2xl);
padding: var(--kt-ai-space-8);
text-align: center;
transition: border-color 0.2s, transform 0.2s;
}
.tariff-card:hover {
border-color: var(--kt-ai-primary);
transform: translateY(-2px);
}
.tariff-card[data-featured="true"] {
border-color: var(--kt-ai-primary);
position: relative;
}
.tariff-card[data-featured="true"]::before {
content: 'Популярный';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--kt-ai-primary);
color: var(--kt-ai-bg);
font-size: var(--kt-ai-text-xs);
font-weight: var(--kt-ai-weight-semibold);
padding: 2px 16px;
border-radius: var(--kt-ai-radius-full);
}
.tariff-speed {
font-size: clamp(32px, 4vw, 48px);
font-weight: var(--kt-ai-weight-bold);
color: var(--kt-ai-fg);
line-height: 1;
}
.tariff-speed span {
font-size: var(--kt-ai-text-lg);
font-weight: var(--kt-ai-weight-regular);
color: var(--kt-ai-fg-muted);
}
.tariff-name {
margin-top: var(--kt-ai-space-2);
font-size: var(--kt-ai-text-sm);
color: var(--kt-ai-fg-muted);
}
.tariff-features {
list-style: none;
padding: 0;
margin: var(--kt-ai-space-6) 0;
text-align: left;
display: flex;
flex-direction: column;
gap: var(--kt-ai-space-3);
}
.tariff-features li {
font-size: var(--kt-ai-text-sm);
color: var(--kt-ai-fg-muted);
display: flex;
align-items: center;
gap: var(--kt-ai-space-3);
}
.tariff-features li::before {
content: '✓';
color: var(--kt-ai-primary);
font-weight: var(--kt-ai-weight-bold);
flex-shrink: 0;
}
/* Контактная сетка */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--kt-ai-space-6);
}
.contact-item {
background: var(--kt-ai-card-bg);
border: 1px solid var(--kt-ai-card-border);
border-radius: var(--kt-ai-radius-xl);
padding: var(--kt-ai-space-6);
}
.contact-item h3 {
margin: 0 0 var(--kt-ai-space-2);
font-size: var(--kt-ai-text-md);
font-weight: var(--kt-ai-weight-semibold);
color: var(--kt-ai-fg);
}
.contact-item p {
margin: 0;
font-size: var(--kt-ai-text-sm);
color: var(--kt-ai-fg-muted);
}
.contact-item a {
color: var(--kt-ai-link);
text-decoration: none;
}
.contact-item a:hover { text-decoration: underline; }
/* Навигация: скролл-ссылки */
.nav-link {
color: var(--kt-ai-fg-muted);
text-decoration: none;
font-size: var(--kt-ai-text-sm);
font-weight: var(--kt-ai-weight-medium);
transition: color 0.15s;
}
.nav-link:hover { color: var(--kt-ai-fg); }
/* Секция «О компании» — два столбца */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--kt-ai-space-8);
align-items: center;
}
@media (max-width: 720px) {
.about-grid { grid-template-columns: 1fr; }
}
/* Reveal-анимации */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
opacity: 1;
transform: none;
}
/* Mobile nav toggle */
.nav-toggle {
display: none;
background: none;
border: none;
color: var(--kt-ai-fg);
cursor: pointer;
padding: var(--kt-ai-space-2);
}
@media (max-width: 640px) {
.nav-toggle { display: flex; }
.nav-links {
display: none;
position: absolute;
top: 56px;
left: 0;
right: 0;
background: var(--kt-ai-bg-glass);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--kt-ai-border);
padding: var(--kt-ai-space-4) var(--kt-ai-space-6);
flex-direction: column;
gap: var(--kt-ai-space-4);
}
.nav-links.open { display: flex; }
}
</style>
</head>
<body>
<!-- ===== HEADER ===== -->
<header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in" data-width="wide">
<strong style="font-size:var(--kt-ai-text-lg);letter-spacing:-0.02em">
Казахтелеком
</strong>
<span class="kt-ai-spacer"></span>
<nav class="nav-links" style="display:flex;gap:var(--kt-ai-space-6);align-items:center">
<a class="nav-link" href="#services">Услуги</a>
<a class="nav-link" href="#infrastructure">Инфраструктура</a>
<a class="nav-link" href="#ai">ИИ</a>
<a class="nav-link" href="#tariffs">Тарифы</a>
<a class="nav-link" href="#about">О компании</a>
<a class="nav-link" href="#news">Новости</a>
<a class="nav-link" href="#contacts">Контакты</a>
</nav>
<a class="kt-ai-btn" data-variant="primary" data-size="sm" href="#contacts" style="margin-left:var(--kt-ai-space-4)">Подключиться</a>
<button class="nav-toggle" aria-label="Меню" onclick="document.querySelector('.nav-links').classList.toggle('open')">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
</div>
</header>
<!-- ===== HERO ===== -->
<section class="kt-ai-hero hero-bg" data-align="center">
<div class="kt-ai-wrap" data-width="wide">
<p class="kt-ai-hero-sub" style="max-width:100%;margin-bottom:var(--kt-ai-space-4)">
<span style="color:var(--kt-ai-primary);font-weight:var(--kt-ai-weight-semibold)">Национальный оператор связи</span>
</p>
<h1>Строим цифровое<br>будущее Казахстана</h1>
<p class="kt-ai-hero-sub">
Прокладываем оптику по всей стране. Создаём ИИ-инфраструктуру мирового уровня.
Соединяем миллионы людей с возможностями завтрашнего дня.
</p>
<div class="kt-ai-hero-actions">
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#tariffs">Выбрать тариф</a>
<a class="kt-ai-btn" data-size="lg" href="#infrastructure">Наша сеть</a>
</div>
<div class="status-bar">
<span class="status-dot">Сеть онлайн</span>
<span class="status-dot">14 000+ км оптики</span>
<span class="status-dot">200+ городов</span>
</div>
</div>
</section>
<!-- ===== МЕТРИКИ ===== -->
<section class="kt-ai-section">
<div class="kt-ai-wrap" data-width="wide">
<div class="metric-grid reveal">
<div>
<div class="metric-num">14 000+</div>
<div class="metric-label">км волоконно-оптических линий</div>
</div>
<div>
<div class="metric-num">3.5 млн</div>
<div class="metric-label">абонентов по стране</div>
</div>
<div>
<div class="metric-num">200+</div>
<div class="metric-label">городов и населённых пунктов</div>
</div>
<div>
<div class="metric-num">99.9%</div>
<div class="metric-label">время безотказной работы</div>
</div>
</div>
</div>
</section>
<!-- ===== УСЛУГИ ===== -->
<section id="services" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="wide">
<div class="kt-ai-section-head">
<h2>Услуги</h2>
<p>Полный спектр телекоммуникационных решений для дома и бизнеса.</p>
</div>
<div class="kt-ai-grid" data-cols="3" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile reveal">
<div class="tile-icon-wrap">
<svg><use href="#sparkles"/></svg>
</div>
<h3>Домашний интернет</h3>
<p>Оптический интернет до 1 Гбит/с. Стабильное соединение для стриминга, игр и удалённой работы.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="tile-icon-wrap">
<svg><use href="#play"/></svg>
</div>
<h3>Интерактивное ТВ</h3>
<p>Более 200 каналов в HD и 4K. Архив передач, пауза, перемотка. Смотрите когда удобно.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="tile-icon-wrap">
<svg><use href="#chat"/></svg>
</div>
<h3>Мобильная связь</h3>
<p>4G/LTE покрытие по всему Казахстану. Выгодные тарифы с безлимитным интернетом.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="tile-icon-wrap">
<svg><use href="#lock"/></svg>
</div>
<h3>Кибербезопасность</h3>
<p>Защита бизнес-инфраструктуры от DDoS-атак, вирусов и утечек данных. Мониторинг 24/7.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="tile-icon-wrap">
<svg><use href="#database"/></svg>
</div>
<h3>Облачные решения</h3>
<p>IaaS, PaaS, SaaS — вычислительные мощности и платформы для цифровой трансформации бизнеса.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="tile-icon-wrap">
<svg><use href="#building"/></svg>
</div>
<h3>Корпоративная связь</h3>
<p>Выделенные линии, MPLS-сети, центры обработки данных. Решения для крупного бизнеса и госсектора.</p>
</article>
</div>
</div>
</section>
<!-- ===== ИНФРАСТРУКТУРА ===== -->
<section id="infrastructure" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="wide">
<div class="kt-ai-section-head">
<h2>Инфраструктура</h2>
<p>Мы строим backbone новой экономики Казахстана — от оптических магистралей до дата-центров мирового класса.</p>
</div>
<div class="kt-ai-grid" data-cols="2" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-card reveal" style="padding:var(--kt-ai-space-8)">
<div class="tile-icon-wrap">
<svg><use href="#rocket"/></svg>
</div>
<h3 style="margin:0 0 var(--kt-ai-space-3);font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-semibold)">Волоконно-оптическая сеть</h3>
<p style="margin:0;color:var(--kt-ai-fg-muted)">Более 14 000 км оптических магистралей соединяют все регионы Казахстана. Скорость передачи данных — до 400 Гбит/с на одном канале. Сеть построена по стандартам Tier III с резервированием каждого участка.</p>
</article>
<article class="kt-ai-card reveal" style="padding:var(--kt-ai-space-8)">
<div class="tile-icon-wrap">
<svg><use href="#dashboard"/></svg>
</div>
<h3 style="margin:0 0 var(--kt-ai-space-3);font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-semibold)">Дата-центры</h3>
<p style="margin:0;color:var(--kt-ai-fg-muted)">Современные ЦОДы в Астане, Алматы и регионах. Отказоустойчивость 99.98%, системы бесперебойного питания, многоуровневая физическая и кибер-защита. Подключение к международным хабам через несколько точек обмена трафиком.</p>
</article>
<article class="kt-ai-card reveal" style="padding:var(--kt-ai-space-8)">
<div class="tile-icon-wrap">
<svg><use href="#model"/></svg>
</div>
<h3 style="margin:0 0 var(--kt-ai-space-3);font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-semibold)">5G и мобильные сети</h3>
<p style="margin:0;color:var(--kt-ai-fg-muted)">Развёртывание сети 5G в крупнейших городах страны. Низкая задержка, высокая пропускная способность — основа для IoT, телемедицины и беспилотного транспорта.</p>
</article>
<article class="kt-ai-card reveal" style="padding:var(--kt-ai-space-8)">
<div class="tile-icon-wrap">
<svg><use href="#pin"/></svg>
</div>
<h3 style="margin:0 0 var(--kt-ai-space-3);font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-semibold)">Международное подключение</h3>
<p style="margin:0;color:var(--kt-ai-fg-muted)">Транзитные каналы через Россию, Китай, Центральную Азию и Европу. Казахстан — цифровой мост между Востоком и Западом. Пиринги с крупнейшими мировыми CDN и облачными провайдерами.</p>
</article>
</div>
</div>
</section>
<!-- ===== ИИ ===== -->
<section id="ai" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="wide">
<div class="kt-ai-section-head">
<h2>Искусственный интеллект</h2>
<p>Мы не просто подключаем интернет — мы строим ИИ-инфраструктуру, которая изменит Казахстан.</p>
</div>
<div class="kt-ai-grid" data-cols="3" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile reveal">
<div class="tile-icon-wrap">
<svg><use href="#lightbulb"/></svg>
</div>
<h3>GPU-кластеры</h3>
<p>Высокопроизводительные вычислительные кластеры для обучения ИИ-моделей. Доступ к мощностям мирового уровня из Казахстана.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="tile-icon-wrap">
<svg><use href="#model"/></svg>
</div>
<h3>Платформа ИИ</h3>
<p>Готовые API для компьютерного зрения, обработки естественного языка и предиктивной аналитики. Интеграция за часы, не месяцы.</p>
</article>
<article class="kt-ai-tile reveal">
<div class="tile-icon-wrap">
<svg><use href="#users"/></svg>
</div>
<h3>Цифровая трансформация</h3>
<p>Помогаем бизнесу и госсектору внедрять ИИ-решения. От концепции до промышленного внедрения — мы рядом на каждом этапе.</p>
</article>
</div>
<div style="margin-top:var(--kt-ai-space-9);text-align:center" class="reveal">
<div class="kt-ai-card" style="display:inline-block;padding:var(--kt-ai-space-6) var(--kt-ai-space-8);border-radius:var(--kt-ai-radius-2xl)">
<p style="margin:0;font-size:var(--kt-ai-text-lg);color:var(--kt-ai-fg-muted)">
<strong style="color:var(--kt-ai-fg)">Kazakhstan AI Hub</strong> — первый в Центральной Азии центр компетенций искусственного интеллекта
</p>
</div>
</div>
</div>
</section>
<!-- ===== ТАРИФЫ ===== -->
<section id="tariffs" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="wide">
<div class="kt-ai-section-head">
<h2>Тарифы</h2>
<p>Прозрачные тарифы без скрытых условий. Подключение бесплатно.</p>
</div>
<div class="tariff-grid" style="margin-top:var(--kt-ai-space-9)">
<div class="tariff-card reveal">
<div class="tariff-speed">100 <span>Мбит/с</span></div>
<div class="tariff-name">Оптимальный</div>
<ul class="tariff-features">
<li>Безлимитный трафик</li>
<li>Wi-Fi роутер в аренду</li>
<li>Техподдержка 24/7</li>
<li>Статический IP по запросу</li>
</ul>
<a class="kt-ai-btn" data-variant="ghost" href="#contacts">Подробнее</a>
</div>
<div class="tariff-card reveal" data-featured="true">
<div class="tariff-speed">500 <span>Мбит/с</span></div>
<div class="tariff-name">Оптимальный+</div>
<ul class="tariff-features">
<li>Безлимитный трафик</li>
<li>Wi-Fi 6 роутер в аренду</li>
<li>Техподдержка 24/7</li>
<li>Статический IP</li>
<li>Интерактивное ТВ — 100 каналов</li>
</ul>
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Подключить</a>
</div>
<div class="tariff-card reveal">
<div class="tariff-speed">1 <span>Гбит/с</span></div>
<div class="tariff-name">Максимальный</div>
<ul class="tariff-features">
<li>Безлимитный трафик</li>
<li>Wi-Fi 6E Mesh-система</li>
<li>Приоритетная поддержка</li>
<li>Статический IP</li>
<li>Интерактивное ТВ — 200+ каналов</li>
<li>Облачное хранилище 1 ТБ</li>
</ul>
<a class="kt-ai-btn" data-variant="ghost" href="#contacts">Подробнее</a>
</div>
</div>
</div>
</section>
<!-- ===== О КОМПАНИИ ===== -->
<section id="about" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="wide">
<div class="about-grid">
<div class="reveal">
<div class="kt-ai-section-head" style="max-width:100%">
<h2>О Казахтелеком</h2>
<p>Национальный оператор связи с более чем 25-летней историей. Мы начинали с телефонных линий — сегодня мы строим цифровую инфраструктуру будущего.</p>
</div>
<div style="margin-top:var(--kt-ai-space-6);display:flex;flex-direction:column;gap:var(--kt-ai-space-4)">
<div style="display:flex;gap:var(--kt-ai-space-3);align-items:flex-start">
<span style="color:var(--kt-ai-primary);font-weight:var(--kt-ai-weight-bold);flex-shrink:0">01</span>
<p style="margin:0;font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Ремонтируем и модернизируем целые здания, чтобы улучшить условия работы наших монтеров и инженеров.</p>
</div>
<div style="display:flex;gap:var(--kt-ai-space-3);align-items:flex-start">
<span style="color:var(--kt-ai-primary);font-weight:var(--kt-ai-weight-bold);flex-shrink:0">02</span>
<p style="margin:0;font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Прокладываем оптику в отдалённые аулы — каждый казахстанец заслуживает скоростного интернета.</p>
</div>
<div style="display:flex;gap:var(--kt-ai-space-3);align-items:flex-start">
<span style="color:var(--kt-ai-primary);font-weight:var(--kt-ai-weight-bold);flex-shrink:0">03</span>
<p style="margin:0;font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Инвестируем в ИИ и облачные технологии — Казахстан станет цифровым хабом Центральной Азии.</p>
</div>
</div>
</div>
<div class="reveal" style="display:flex;flex-direction:column;gap:var(--kt-ai-space-4)">
<div class="kt-ai-card" style="padding:var(--kt-ai-space-6);text-align:center">
<div style="font-size:var(--kt-ai-text-3xl);font-weight:var(--kt-ai-weight-bold);color:var(--kt-ai-primary)">25+</div>
<div style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2)">лет на рынке телекоммуникаций</div>
</div>
<div class="kt-ai-card" style="padding:var(--kt-ai-space-6);text-align:center">
<div style="font-size:var(--kt-ai-text-3xl);font-weight:var(--kt-ai-weight-bold);color:var(--kt-ai-primary)">12 000+</div>
<div style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2)">сотрудников по всей стране</div>
</div>
<div class="kt-ai-card" style="padding:var(--kt-ai-space-6);text-align:center">
<div style="font-size:var(--kt-ai-text-3xl);font-weight:var(--kt-ai-weight-bold);color:var(--kt-ai-primary)">Top 3</div>
<div style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted);margin-top:var(--kt-ai-space-2)">работодатель в IT-сфере Казахстана</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== НОВОСТИ ===== -->
<section id="news" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="wide">
<div class="kt-ai-section-head">
<h2>Новости</h2>
<p>Последние события и достижения компании.</p>
</div>
<div class="news-grid" style="margin-top:var(--kt-ai-space-9)">
<article class="news-card reveal">
<span class="news-date">12 сентября 2026</span>
<h3>Запуск GPU-кластера для ИИ в Астане</h3>
<p>Казахтелеком запустил крупнейший в Центральной Азии вычислительный кластер на базе NVIDIA H100 для обучения ИИ-моделей.</p>
</article>
<article class="news-card reveal">
<span class="news-date">5 сентября 2026</span>
<h3>Оптический интернет в 50 новых сёлах</h3>
<p>Программа «Цифровой аул»: высокоскоростной интернет теперь доступен жителям ещё 50 отдалённых населённых пунктов.</p>
</article>
<article class="news-card reveal">
<span class="news-date">28 августа 2026</span>
<h3>Партнёрство с глобальным облачным провайдером</h3>
<p>Подписано соглашение о размещении edge-узла крупнейшей мировой облачной платформы в казахстанском дата-центре.</p>
</article>
</div>
</div>
</section>
<!-- ===== КОНТАКТЫ ===== -->
<section id="contacts" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" data-width="wide">
<div class="kt-ai-section-head" style="text-align:center;max-width:100%">
<h2>Свяжитесь с нами</h2>
<p>Подключите интернет, задайте вопрос или оставьте заявку — мы ответим в течение часа.</p>
</div>
<div class="contact-grid" style="margin-top:var(--kt-ai-space-9)">
<div class="contact-item reveal">
<h3>Горячая линия</h3>
<p><a href="tel:177" style="font-size:var(--kt-ai-text-xl);font-weight:var(--kt-ai-weight-bold)">177</a></p>
<p style="margin-top:var(--kt-ai-space-2)">Бесплатно с любого номера, 24/7</p>
</div>
<div class="contact-item reveal">
<h3>Для бизнеса</h3>
<p><a href="tel:+77273311111">+7 (727) 331-11-11</a></p>
<p style="margin-top:var(--kt-ai-space-2)">Корпоративные решения и тендеры</p>
</div>
<div class="contact-item reveal">
<h3>Email</h3>
<p><a href="mailto:info@telecom.kz">info@telecom.kz</a></p>
<p style="margin-top:var(--kt-ai-space-2)">Для обращений и предложений</p>
</div>
<div class="contact-item reveal">
<h3>Главный офис</h3>
<p>г. Астана, пр. Мәңгілік Ел, 40</p>
<p style="margin-top:var(--kt-ai-space-2)">Пн–Пт 9:00–18:00</p>
</div>
</div>
<div style="text-align:center;margin-top:var(--kt-ai-space-8)" class="reveal">
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="tel:177">Позвонить 177</a>
</div>
</div>
</section>
<!-- ===== FOOTER ===== -->
<footer class="kt-ai-wrap kt-ai-pagefoot" data-width="wide" style="padding-block:var(--kt-ai-space-8)">
<div style="display:flex;flex-wrap:wrap;gap:var(--kt-ai-space-8);margin-bottom:var(--kt-ai-space-6)">
<div style="flex:1;min-width:200px">
<strong style="font-size:var(--kt-ai-text-lg)">Казахтелеком</strong>
<p style="margin:var(--kt-ai-space-3) 0 0;font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Национальный оператор связи Республики Казахстан</p>
</div>
<div style="flex:1;min-width:140px">
<h4 style="margin:0 0 var(--kt-ai-space-3);font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-semibold);color:var(--kt-ai-fg)">Услуги</h4>
<nav style="display:flex;flex-direction:column;gap:var(--kt-ai-space-2)">
<a class="nav-link" href="#services">Домашний интернет</a>
<a class="nav-link" href="#services">Интерактивное ТВ</a>
<a class="nav-link" href="#services">Мобильная связь</a>
</nav>
</div>
<div style="flex:1;min-width:140px">
<h4 style="margin:0 0 var(--kt-ai-space-3);font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-semibold);color:var(--kt-ai-fg)">Компания</h4>
<nav style="display:flex;flex-direction:column;gap:var(--kt-ai-space-2)">
<a class="nav-link" href="#about">О нас</a>
<a class="nav-link" href="#news">Новости</a>
<a class="nav-link" href="#contacts">Контакты</a>
</nav>
</div>
<div style="flex:1;min-width:140px">
<h4 style="margin:0 0 var(--kt-ai-space-3);font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-semibold);color:var(--kt-ai-fg)">Поддержка</h4>
<nav style="display:flex;flex-direction:column;gap:var(--kt-ai-space-2)">
<a class="nav-link" href="tel:177">Линия 177</a>
<a class="nav-link" href="mailto:info@telecom.kz">info@telecom.kz</a>
</nav>
</div>
</div>
<div style="border-top:1px solid var(--kt-ai-divider);padding-top:var(--kt-ai-space-6);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--kt-ai-space-4)">
<span style="font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-faint)">© 2026 АО «Казахтелеком». Все права защищены.</span>
<span style="font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-faint)">Лицензия на оказание телекоммуникационных услуг</span>
</div>
</footer>
<!-- ===== СКРИПТ: плавные появления ===== -->
<script>
var io = new IntersectionObserver(function(entries) {
entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('in'); });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(function(el) { io.observe(el); });
document.querySelectorAll('a[href^="#"]').forEach(function(a) {
a.addEventListener('click', function(e) {
var t = document.querySelector(a.getAttribute('href'));
if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
document.querySelector('.nav-links').classList.remove('open');
});
});
</script>
</body>
</html>