add client photos and telecom styling

index.html

@@ -27,10 +27,13 @@ nav a:hover{color:var(--green)}
 @media(max-width:768px){nav{display:none}.mobile-toggle{display:block}}
 
 /* Hero */
-.hero{background:var(--white);color:var(--ink);padding:160px 24px 100px;text-align:center}
+.hero{background:linear-gradient(135deg,var(--white) 0%,var(--green-light) 100%);color:var(--ink);padding:160px 24px 100px;text-align:center;position:relative;overflow:hidden}
-.hero h1{font:800 clamp(36px,6vw,56px)/1.05 'Unbounded',sans-serif;margin-bottom:24px;color:var(--green-dark)}
+.hero::before{content:"";position:absolute;top:-50%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,var(--green) 0%,transparent 70%);opacity:0.1;border-radius:50%;animation:pulse 4s ease-in-out infinite}
-.hero p{font-size:20px;color:var(--gray-500);max-width:600px;margin:0 auto 40px}
+@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
-.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
+.hero h1{font:800 clamp(36px,6vw,56px)/1.05 'Unbounded',sans-serif;margin-bottom:24px;color:var(--green-dark);position:relative;z-index:1}
+.hero p{font-size:20px;color:var(--gray-500);max-width:600px;margin:0 auto 40px;position:relative;z-index:1}
+.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
+.hero-image{max-width:800px;margin:60px auto 0;border-radius:16px;box-shadow:0 20px 60px rgba(34,197,94,0.2);position:relative;z-index:1}
 .btn{display:inline-block;padding:16px 32px;border-radius:8px;font-weight:700;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s}
 .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,197,94,0.3)}
 .btn-primary{background:var(--green);color:var(--white)}
@@ -38,12 +41,16 @@ nav a:hover{color:var(--green)}
 
 /* Tariffs */
 .tariffs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:48px}
-.tariff-card{background:var(--gray-100);border-radius:16px;padding:40px 32px;position:relative;transition:transform 0.3s,box-shadow 0.3s}
+.tariff-card{background:#fff;border-radius:16px;padding:40px 32px;position:relative;transition:transform 0.3s,box-shadow 0.3s;border:1px solid var(--gray-100);overflow:hidden}
-.tariff-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(0,0,0,0.1)}
+.tariff-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green),var(--cyan));opacity:0;transition:opacity 0.3s}
+.tariff-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(34,197,94,0.15)}
+.tariff-card:hover::before{opacity:1}
 .tariff-card.popular{border:2px solid var(--green);background:var(--green-light)}
 .tariff-card.popular::before{content:"Популярный";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green);color:var(--white);padding:6px 16px;border-radius:20px;font-size:13px;font-weight:700}
-.tariff-name{font:700 24px/1.3 'Unbounded',sans-serif;margin-bottom:8px}
+.tariff-name{font:700 24px/1.3 'Unbounded',sans-serif;margin-bottom:8px;display:flex;align-items:center;gap:12px}
-.tariff-speed{font-size:48px;font-weight:800;color:var(--green);line-height:1;margin-bottom:8px}
+.tariff-icon{font-size:32px}
+.tariff-speed{font-size:48px;font-weight:800;color:var(--green);line-height:1;margin-bottom:8px;position:relative;display:inline-block}
+.tariff-speed::after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),transparent);border-radius:2px}
 .tariff-speed span{font-size:18px;color:var(--gray-500)}
 .tariff-price{font-size:28px;font-weight:700;margin-bottom:24px;color:var(--ink)}
 .tariff-features{list-style:none;margin-bottom:32px}
@@ -129,6 +136,7 @@ footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
 <a href="#tariffs-b2c" class="btn btn-primary">Выбрать тариф</a>
 <a href="#form" class="btn btn-secondary">Оставить заявку</a>
 </div>
+<img src="https://picsum.photos/seed/telecom/800/450" alt="Telecom technology" class="hero-image reveal">
 </section>
 
 <section id="tariffs-b2c" class="section">
@@ -138,7 +146,7 @@ footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
 
 <div class="tariffs-grid">
 <div class="tariff-card reveal">
-<h3 class="tariff-name">Стартовый</h3>
+<h3 class="tariff-name"><span class="tariff-icon">🏠</span>Стартовый</h3>
 <div class="tariff-speed">300 <span>Мбит/с</span></div>
 <div class="tariff-price">450 ₸/мес</div>
 <ul class="tariff-features">
@@ -152,7 +160,7 @@ footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
 </div>
 
 <div class="tariff-card popular reveal">
-<h3 class="tariff-name">Оптимальный</h3>
+<h3 class="tariff-name"><span class="tariff-icon">⭐</span>Оптимальный</h3>
 <div class="tariff-speed">500 <span>Мбит/с</span></div>
 <div class="tariff-price">650 ₸/мес</div>
 <ul class="tariff-features">
@@ -167,7 +175,7 @@ footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
 </div>
 
 <div class="tariff-card reveal">
-<h3 class="tariff-name">Максимальный</h3>
+<h3 class="tariff-name"><span class="tariff-icon">🚀</span>Максимальный</h3>
 <div class="tariff-speed">1000 <span>Мбит/с</span></div>
 <div class="tariff-price">950 ₸/мес</div>
 <ul class="tariff-features">
@@ -192,7 +200,7 @@ footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
 
 <div class="tariffs-grid">
 <div class="tariff-card b2b-card reveal">
-<h3 class="tariff-name">Офис</h3>
+<h3 class="tariff-name"><span class="tariff-icon">🏢</span>Офис</h3>
 <div class="tariff-speed">100 <span>Мбит/с</span></div>
 <div class="tariff-price">15 000 ₸/мес</div>
 <ul class="tariff-features">
@@ -207,7 +215,7 @@ footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
 </div>
 
 <div class="tariff-card b2b-card popular reveal">
-<h3 class="tariff-name">Корпоративный</h3>
+<h3 class="tariff-name"><span class="tariff-icon">💼</span>Корпоративный</h3>
 <div class="tariff-speed">500 <span>Мбит/с</span></div>
 <div class="tariff-price">45 000 ₸/мес</div>
 <ul class="tariff-features">
@@ -223,7 +231,7 @@ footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
 </div>
 
 <div class="tariff-card b2b-card reveal">
-<h3 class="tariff-name">Премиум</h3>
+<h3 class="tariff-name"><span class="tariff-icon">👑</span>Премиум</h3>
 <div class="tariff-speed">1000 <span>Мбит/с</span></div>
 <div class="tariff-price">85 000 ₸/мес</div>
 <ul class="tariff-features">
@@ -249,31 +257,37 @@ footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
 
 <div class="features-grid">
 <div class="feature-card reveal">
+<img src="https://picsum.photos/seed/speed/120/120" alt="Скорость" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
 <div class="feature-icon">🚀</div>
 <h3>Высокая скорость</h3>
 <p>Современное оборудование и оптоволокно до квартиры. Реальная скорость соответствует заявленной.</p>
 </div>
 <div class="feature-card reveal">
+<img src="https://picsum.photos/seed/security/120/120" alt="Надёжность" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
 <div class="feature-icon">🛡</div>
 <h3>Надёжность</h3>
 <p>Резервные каналы связи и гарантия доступности сети до 99.95% по договору SLA.</p>
 </div>
 <div class="feature-card reveal">
+<img src="https://picsum.photos/seed/support/120/120" alt="Поддержка" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
 <div class="feature-icon">💬</div>
 <h3>Поддержка 24/7</h3>
 <p>Операторы на связи круглосуточно. Среднее время решения проблемы — 15 минут.</p>
 </div>
 <div class="feature-card reveal">
+<img src="https://picsum.photos/seed/savings/120/120" alt="Выгода" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
 <div class="feature-icon">💰</div>
 <h3>Выгодные цены</h3>
 <p>Пакетные предложения экономят до 35%. Скидки пенсионерам и многодетным семьям.</p>
 </div>
 <div class="feature-card reveal">
+<img src="https://picsum.photos/seed/installation/120/120" alt="Подключение" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
 <div class="feature-icon">⚡</div>
 <h3>Быстрое подключение</h3>
 <p>Заявка обрабатывается за 1 час. Мастер подключит в удобное время, даже в выходные.</p>
 </div>
 <div class="feature-card reveal">
+<img src="https://picsum.photos/seed/app/120/120" alt="Приложение" style="width:80px;height:80px;border-radius:16px;margin-bottom:16px;object-fit:cover">
 <div class="feature-icon">📱</div>
 <h3>Удобный кабинет</h3>
 <p>Управляйте услугами онлайн: баланс, тариф, детализация, приостановка связи.</p>
@@ -282,6 +296,65 @@ footer{background:var(--ink);color:#9aa3b2;padding:40px 24px;text-align:center}
 </div>
 </section>
 
+<section class="section" style="background:linear-gradient(135deg,var(--green-light) 0%,#fff 100%)">
+<div class="container">
+<h2 class="reveal">Наши клиенты довольны</h2>
+<p class="lead reveal">Более 50 000 абонентов уже пользуются нашими услугами. Вот что они говорят о нас.</p>
+
+<div class="tariffs-grid">
+<div class="tariff-card reveal" style="text-align:center">
+<img src="https://picsum.photos/seed/family1/400/300" alt="Семья Ивановых" style="width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:20px">
+<h3 style="margin-bottom:8px">Семья Ивановых</h3>
+<p style="color:var(--gray-500);margin-bottom:16px">г. Алматы, тариф "Оптимальный"</p>
+<p style="font-style:italic">"Подключили интернет 6 месяцев назад — ни разу не подвёл! Дети смотрят мультики, я работаю из дома, муж играет онлайн — всё летает!"</p>
+<div style="margin-top:16px;font-size:24px">⭐⭐⭐⭐⭐</div>
+</div>
+
+<div class="tariff-card reveal" style="text-align:center">
+<img src="https://picsum.photos/seed/business1/400/300" alt="Директор компании" style="width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:20px">
+<h3 style="margin-bottom:8px">Алексей Петров</h3>
+<p style="color:var(--gray-500);margin-bottom:16px">Директор ТОО "TechStart"</p>
+<p style="font-style:italic">"Перевёл весь офис на тариф 'Корпоративный'. Стабильная связь, резервный канал спасал уже дважды. Рекомендую!"</p>
+<div style="margin-top:16px;font-size:24px">⭐⭐⭐⭐⭐</div>
+</div>
+
+<div class="tariff-card reveal" style="text-align:center">
+<img src="https://picsum.photos/seed/student1/400/300" alt="Студентка" style="width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:20px">
+<h3 style="margin-bottom:8px">Алия Керимова</h3>
+<p style="color:var(--gray-500);margin-bottom:16px">Студентка, тариф "Стартовый"</p>
+<p style="font-style:italic">"Для учёбы и сериалов идеально! Цена доступная, скорость отличная. Подругам уже посоветовала."</p>
+<div style="margin-top:16px;font-size:24px">⭐⭐⭐⭐⭐</div>
+</div>
+</div>
+</div>
+</section>
+
+<section class="section" style="background:var(--ink);color:var(--white);text-align:center">
+<div class="container">
+<h2 class="reveal" style="color:var(--white)">TeleConnect в цифрах</h2>
+<p class="lead reveal" style="color:#9aa3b2">Наши достижения за 10 лет работы</p>
+
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;margin-top:48px">
+<div class="reveal">
+<div style="font:800 64px/1 'Unbounded',sans-serif;color:var(--green);margin-bottom:8px">50K+</div>
+<div style="color:#9aa3b2;font-size:18px">Довольных клиентов</div>
+</div>
+<div class="reveal">
+<div style="font:800 64px/1 'Unbounded',sans-serif;color:var(--green);margin-bottom:8px">99.9%</div>
+<div style="color:#9aa3b2;font-size:18px">Доступность сети</div>
+</div>
+<div class="reveal">
+<div style="font:800 64px/1 'Unbounded',sans-serif;color:var(--green);margin-bottom:8px">24/7</div>
+<div style="color:#9aa3b2;font-size:18px">Поддержка</div>
+</div>
+<div class="reveal">
+<div style="font:800 64px/1 'Unbounded',sans-serif;color:var(--green);margin-bottom:8px">15 мин</div>
+<div style="color:#9aa3b2;font-size:18px">Среднее время решения</div>
+</div>
+</div>
+</div>
+</section>
+
 <section id="form" class="section form-section">
 <div class="container">
 <h2 class="reveal">Оставить заявку на подключение</h2>