<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    $name     = isset($_POST['name'])    ? trim(strip_tags($_POST['name']))    : '';
    $contact  = isset($_POST['contact']) ? trim(strip_tags($_POST['contact'])) : '';
    $task     = isset($_POST['task'])    ? trim(strip_tags($_POST['task']))    : '';
    $to       = "biz-impulse@yandex.ru";
    $subject  = "Новая заявка с сайта";
    $message  = "Имя: " . $name . "\r\n";
    $message .= "Контакт: " . $contact . "\r\n";
    $message .= "Сообщение: " . $task . "\r\n";
    $headers  = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-Type: text/plain; charset=utf-8" . "\r\n";
    $headers .= "From: no-reply@" . $_SERVER['HTTP_HOST'] . "\r\n";
    if (mail($to, $subject, $message, $headers))
    {
        http_response_code(200);
        echo json_encode(['success' => true]);
    }
    else
    {
        http_response_code(500);
        echo json_encode(['error' => 'Ошибка при отправке письма через сервер']);
    }
    exit;
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0b0d12">
<meta name="description" content="Импульс — создание и поддержка сайтов и мобильных приложений. Проектируем, разрабатываем и развиваем цифровые продукты.">
<link rel="stylesheet" href="/css/style.css">
<title>Импульс — создаём цифровое движение</title>
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/image/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/image/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/image/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="application-name" content="Импульс" />
</head>
<body>
<div class="cursor-glow" id="cursorGlow"></div>
<header class="topbar" id="topbar">
  <div class="wrap nav">
    <a class="brand" href="#top" aria-label="Импульс — на главную">
      <span class="brand-mark"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M13.5 2 5 13h6l-.5 9L19 10h-6l.5-8Z" fill="currentColor"/></svg></span>
      <span>импульс<small>DIGITAL STUDIO</small></span>
    </a>
    <nav class="navlinks" id="navlinks" aria-label="Основная навигация">
      <a href="#services">Услуги</a><a href="#projects">Проекты</a><a href="#process">Как работаем</a><a href="#about">О нас</a><a href="#faq">FAQ</a>
    </nav>
    <a class="btn nav-cta" href="#contact">Обсудить проект <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14m-6-6 6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
    <button class="menu-btn" id="menuBtn" aria-label="Открыть меню" aria-expanded="false">☰</button>
  </div>
</header>
<main id="top">
<section class="hero">
  <div class="wrap">
      <div class="eyebrow reveal">Цифровая студия полного цикла</div>
      <div class="reveal delay-1"><svg class="ib__svg-logo" xmlns="http://www.w3.org/2000/svg" viewBox="-50 55 2515 355" role="img" aria-label="Импульс" focusable="false">
            <defs><filter id="ib-glow" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="5" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
            <g stroke="#00f3ff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#ib-glow)">
                <path style="--len:400;--del:0s;--dur:.5s" d="M-49.59 250.63 L80 250 L95 200 L105 310 L115 240 L130 240"/>
                <path style="--len:1450;--del:.4s;--dur:1s" d="M130 240 L150.21 93.4 L148.77 370.84 L255 60 L251.75 402.31 L285 210 L295 270 L310 250 L340 250"/>
                <path style="--len:360;--del:1.3s;--dur:.4s" d="M360 305 L360 195 L395 250 L430 195 L430 305"/>
                <path style="--len:280;--del:1.65s;--dur:.35s" d="M480 305 L480 195 L530 195 L530 305"/>
                <path style="--len:200;--del:1.95s;--dur:.3s" d="M580 195 L605 250 L630 195 M605 250 L585.57 302.71"/>
                <path style="--len:270;--del:2.2s;--dur:.35s" d="M680 305 L702.17 194.41 L735 195 L735 305"/>
                <path style="--len:270;--del:2.5s;--dur:.35s" d="M790 305 L790 195 M790 250 L820 250 A27.5 27.5 0 0 1 820 305 L790 305"/>
                <path style="--len:175;--del:2.75s;--dur:.3s" d="M912.76 198.47 A45 45 0 0 0 863.85 245.32 A45 45 0 0 0 917.91 294.23"/>
                <path style="--len:2800;--del:3s;--dur:2.5s" d="M925 250 L945 250 L960 200 L970 310 L980 240 L995 250 L1096.98 250 L1108.01 236 L1119.04 250 L1139.27 250 L1150.3 285.65 L1164.09 193.71 L1174.2 304.95 L1184.32 250 L1208.22 250 L1222.93 223.13 L1239.48 250 L1746.05 250 L1755.63 180.46 L1766.89 304.35 L1782.98 225.51 L1795.85 250 L1902.68 250 L1916.84 227.44 L1933.57 250 L1947.73 250 L1961.89 294.37 L1973.47 161.8 L1995.35 317.54 L2005.65 250 L2035.25 250 L2049.41 230.02 L2066.15 250 L2460.01 250"/>
            </g>
        </svg></div>
  </div>

  <div class="wrap hero-grid">
    <div>
      <h1 class="reveal delay-2">Создаём сайты и приложения, которые <span class="accent">двигают бизнес.</span></h1>
      <p class="hero-copy reveal delay-2">Разрабатываем сайты и мобильные приложения, которые помогают бизнесу расти. От первой идеи до запуска — и дальше, на каждом этапе.</p>
      <div class="hero-actions reveal delay-3">
        <a class="btn magnetic" href="#contact">Обсудить задачу <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14m-6-6 6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
        <a class="btn btn-ghost" href="#projects">Смотреть проекты <span>↘</span></a>
      </div>
      <div class="hero-meta reveal delay-3"><div class="avatars"><span>И</span><span>М</span><span>+</span></div><span>Разработка · Дизайн · Поддержка<br>Одна команда — весь цифровой продукт</span></div>
    </div>
    <div class="hero-art" aria-label="Абстрактная анимация импульса">
      <div class="orbit"></div><div class="orbit two"></div>
      <div class="orb-core"><div class="pulse-symbol">↗</div></div>
      <div class="float-card fc-one"><small>Запуск проекта</small><b>Без хаоса<span class="accent">.</span></b><span class="tiny">План → Разработка → Результат</span></div>
      <div class="float-card fc-two"><small>Ваш бизнес онлайн</small><b>24/7 <span class="accent">↗</span></b></div>
      <div class="float-card fc-three"><b><span class="accent">01</span> / 03</b><small>Идея становится продуктом</small></div>
    </div>
  </div>
  <div class="scroll-cue">ЛИСТАЙТЕ НИЖЕ</div>
</section>
<div class="ticker" aria-label="Наши направления"><div class="ticker-track"><span>Сайты под ключ <i>✳</i> Мобильные приложения <i>✳</i> UX/UI дизайн <i>✳</i> Техническая поддержка <i>✳</i> Интеграции и автоматизация <i>✳</i> Сайты под ключ <i>✳</i> Мобильные приложения <i>✳</i> UX/UI дизайн <i>✳</i> Техническая поддержка <i>✳</i> Интеграции и автоматизация <i>✳</i></span></div></div>
<section class="section" id="services">
  <div class="wrap">
    <div class="section-head reveal"><div><div class="eyebrow">Что мы делаем</div><h2>Технологии, которые<br><span class="accent">работают на вас.</span></h2></div><p>Не просто пишем код. Решаем задачи бизнеса, продумываем пользовательский опыт и создаём продукты, которыми удобно пользоваться.</p></div>
    <div class="services-grid">
      <article class="service-card reveal" style="--glow:#00f3ff"><div class="service-top"><div class="service-icon"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M3 9h18M8 6.5h.01M11 6.5h.01" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><path d="m8 14 2 2 5-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div><span class="service-num">01 / WEB</span></div><h3>Сайты и веб-сервисы</h3><p>От стильного лендинга до сложной платформы. Быстрые, адаптивные и готовые к росту.</p><div class="service-tags"><span>Лендинги</span><span>Корпоративные</span><span>Веб-сервисы</span></div></article>
      <article class="service-card reveal delay-1" style="--glow:#00aaff"><div class="service-top"><div class="service-icon" style="color:#a8afff;background:#00aaff18;border-color:#00aaff44"><svg viewBox="0 0 24 24" fill="none"><rect x="6" y="2.5" width="12" height="19" rx="2.5" stroke="currentColor" stroke-width="1.7"/><path d="M10 5h4M11 18.5h2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></div><span class="service-num">02 / APP</span></div><h3>Мобильные приложения</h3><p>Приложения для iOS и Android с понятным интерфейсом и продуманной логикой.</p><div class="service-tags"><span>Android</span><span>iOS</span><span>API</span></div></article>
      <article class="service-card reveal delay-2" style="--glow:#ff8a65"><div class="service-top"><div class="service-icon" style="color:#ffab8f;background:#ff8a6518;border-color:#ff8a6544"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3 14.5 9.5 21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5L12 3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m19 2 .8 2.2L22 5l-2.2.8L19 8l-.8-2.2L16 5l2.2-.8L19 2Z" fill="currentColor"/></svg></div><span class="service-num">03 / DESIGN</span></div><h3>UX/UI и дизайн</h3><p>Визуальные системы и интерфейсы, в которых эстетика усиливает удобство.</p><div class="service-tags"><span>Прототипы</span><span>UI-kit</span><span>Анимация</span></div></article>
      <article class="service-card reveal" style="--glow:#00aaff"><div class="service-top"><div class="service-icon" style="color:#a8afff;background:#00aaff18;border-color:#00aaff44"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1m-8.6 8.6-2.1 2.1" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="1.7"/></svg></div><span class="service-num">04 / CARE</span></div><h3>Поддержка и развитие</h3><p>Следим за стабильностью, обновляем функциональность и помогаем продукту развиваться.</p><div class="service-tags"><span>Мониторинг</span><span>Обновления</span><span>Безопасность</span></div></article>
      <article class="service-card reveal delay-1" style="--glow:#00f3ff"><div class="service-top"><div class="service-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M4 5h16v14H4zM8 9h8M8 12h5M8 15h7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/><path d="m16 3 2 2-2 2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div><span class="service-num">05 / INTEGRATION</span></div><h3>Интеграции и автоматизация</h3><p>Связываем сайт с CRM, платежами, аналитикой и внутренними системами.</p><div class="service-tags"><span>CRM</span><span>Платежи</span><span>API</span></div></article>
      <article class="service-card reveal delay-2" style="--glow:#ff8a65"><div class="service-top"><div class="service-icon" style="color:#ffab8f;background:#ff8a6518;border-color:#ff8a6544"><svg viewBox="0 0 24 24" fill="none"><path d="M4 18V6m0 12h16M7 15l4-4 3 2 5-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 7h4v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div><span class="service-num">06 / GROWTH</span></div><h3>Оптимизация и рост</h3><p>Улучшаем скорость, доступность и конверсию на основе данных и обратной связи.</p><div class="service-tags"><span>Аудит</span><span>SEO-база</span><span>Аналитика</span></div></article>
    </div>
  </div>
</section>
<section class="section projects" id="projects">
  <div class="wrap">
    <div class="section-head reveal"><div><div class="eyebrow">Избранные концепции</div><h2>Цифровые продукты<br>с <span class="accent">характером.</span></h2></div><p>Несколько визуальных направлений, показывающих наш подход к интерфейсам и цифровым решениям.</p></div>
    <div class="project-grid">
        <article class="project-card reveal">
            <img src="/image/003.png">
            <div class="project-info">
                <div><h3>Знакомства в Санкт-Петербурге</h3><p>Дизайн · Разработка Android</p></div>
                <span class="project-arrow">↗</span>
            </div>
        </article>
        <a href="https://dating-spb.ru/" class="project-card reveal delay-1">
            <div class="project-visual">
                <div class="mock-browser">
                    <div class="browser-bar"><i></i><i></i><i></i></div>
                    <div class="mock-content" style="background-image:url(/image/002.png);"></div>
                </div>
            </div>
            <div class="project-info">
                <div>
                    <h3>Знакомства в Санкт-Петербурге</h3>
                    <p>Взяли и сделали</p>
                </div>
                <span class="project-arrow">↗</span>
            </div>
        </a>
        <a href="https://dating-spb.ru/" class="project-card reveal">
            <div class="project-visual">
                <div class="mock-browser">
                    <div class="browser-bar"><i></i><i></i><i></i></div>
                    <div class="mock-content" style="background-image:url(/image/001.png);">
                    </div>
                </div>
            </div>
            <div class="project-info">
                <div>
                    <h3>Знакомства в Санкт-Петербурге</h3>
                    <p>Под ключ — от идеи до реализации</p>
                </div>
                <span class="project-arrow">↗</span>
            </div>
        </a>
    </div>
    <div class="stats reveal">
      <div class="stat"><strong><span class="count" data-count="40">0</span><em>+</em></strong><span>экранов и интерфейсов</span></div>
      <div class="stat"><strong><span class="count" data-count="12">0</span><em>+</em></strong><span>направлений экспертизы</span></div>
      <div class="stat"><strong><span class="count" data-count="100">0</span><em>%</em></strong><span>внимания к деталям</span></div>
      <div class="stat"><strong><span class="count" data-count="1">0</span><em> команда</em></strong><span>от идеи до поддержки</span></div>
    </div>
    <p class="muted" style="font-size:10px;margin:12px 0 0">* Проекты и цифры на этой странице — демонстрационные примеры дизайна. Замените их реальными кейсами компании.</p>
  </div>
</section>
<section class="section" id="process">
  <div class="wrap">
    <div class="section-head reveal"><div><div class="eyebrow">Понятный процесс</div><h2>Двигаемся по шагам.<br><span class="accent">Без сюрпризов.</span></h2></div><p>Вы всегда понимаете, что происходит с проектом, на каком мы этапе и что будет дальше.</p></div>
    <div class="process-grid">
      <article class="step reveal"><span class="step-no">01 — ПОГРУЖЕНИЕ</span><h3>Слушаем и изучаем</h3><p>Разбираемся в целях, аудитории и задачах. Формируем понятный план работ.</p></article>
      <article class="step reveal delay-1"><span class="step-no">02 — ПРОЕКТИРОВАНИЕ</span><h3>Продумываем решение</h3><p>Создаём структуру, пользовательские сценарии и визуальную концепцию.</p></article>
      <article class="step reveal delay-2"><span class="step-no">03 — РАЗРАБОТКА</span><h3>Собираем продукт</h3><p>Разрабатываем, тестируем на устройствах и показываем промежуточный результат.</p></article>
      <article class="step reveal delay-3"><span class="step-no">04 — ЗАПУСК</span><h3>Запускаем и растём</h3><p>Публикуем продукт, следим за стабильностью и развиваем его вместе с вами.</p></article>
    </div>
  </div>
</section>
<section class="section" id="about">
  <div class="wrap why-grid">
    <div class="why-visual reveal"><div class="grid-lines"></div><div class="why-orb"><span>↗</span></div><div class="why-badge"><b>IMPULSE</b> / DIGITAL PARTNER</div></div>
    <div class="why-copy reveal delay-1"><div class="eyebrow">Почему Импульс</div><h2>Не усложняем.<br><span class="accent">Усиливаем.</span></h2><p>Хорошая технология незаметна: она помогает клиентам быстрее решать задачи, а бизнесу — двигаться вперёд. Мы соединяем продуманный дизайн, надёжную разработку и человеческую коммуникацию.</p>
      <div class="benefits">
        <div class="benefit"><span class="check">✓</span><div><b>Прозрачная работа</b><small>Понятные этапы, сроки и договорённости.</small></div></div>
        <div class="benefit"><span class="check">✓</span><div><b>Сначала смысл</b><small>Решения под задачу, а не ради моды.</small></div></div>
        <div class="benefit"><span class="check">✓</span><div><b>Думаем о будущем</b><small>Архитектура, которую можно развивать.</small></div></div>
        <div class="benefit"><span class="check">✓</span><div><b>Остаёмся рядом</b><small>Поддержка после запуска — не опция на словах.</small></div></div>
      </div>
    </div>
  </div>
</section>
<section class="section" id="faq">
  <div class="wrap"><div class="section-head reveal"><div><div class="eyebrow">Вопросы и ответы</div><h2>До старта — <span class="accent">коротко.</span></h2></div><p>Если не нашли нужный ответ — расскажите о задаче, обсудим её лично.</p></div>
    <div class="faq-list reveal">
      <div class="faq-item"><button class="faq-q" aria-expanded="false"><span>Сколько стоит разработка сайта или приложения?</span><span>＋</span></button><div class="faq-a"><p>Стоимость зависит от объёма, функциональности и сроков. После короткого обсуждения подготовим состав работ и оценку — без обязательств с вашей стороны.</p></div></div>
      <div class="faq-item"><button class="faq-q" aria-expanded="false"><span>Вы работаете с уже существующими проектами?</span><span>＋</span></button><div class="faq-a"><p>Да. Можем провести аудит, исправить ошибки, ускорить сайт, добавить функции или взять продукт на регулярную техническую поддержку.</p></div></div>
      <div class="faq-item"><button class="faq-q" aria-expanded="false"><span>Можно ли начать с небольшой задачи?</span><span>＋</span></button><div class="faq-a"><p>Конечно. Начинаем с конкретной задачи и при необходимости расширяем сотрудничество по мере роста проекта.</p></div></div>
      <div class="faq-item"><button class="faq-q" aria-expanded="false"><span>Что нужно подготовить перед обращением?</span><span>＋</span></button><div class="faq-a"><p>Достаточно идеи или описания проблемы. Если есть примеры, материалы, техническое задание или существующий сайт — отлично, но это не обязательное условие.</p></div></div>
    </div>
  </div>
</section>
<section class="contact" id="contact">
  <div class="wrap"><div class="contact-panel reveal">
    <div><div class="eyebrow">Есть идея? Давайте обсудим</div><h2>Пора дать<br>ей <span style="color:#006a72">импульс.</span></h2><p>Расскажите, что хотите создать или улучшить. Мы поможем определить следующий шаг.</p></div>
    <form class="contact-form" id="contactForm">
      <input name="name" placeholder="Как к вам обращаться" autocomplete="name" required aria-label="Ваше имя">
      <input name="contact" id="phone" placeholder="Телефон, email или Telegram" required aria-label="Контакт для связи">
      <textarea name="task" placeholder="Пара слов о проекте (необязательно)" aria-label="Описание проекта"></textarea>
      <button class="btn" type="submit">Отправить заявку <span>↗</span></button>
      <div class="form-note">Нажимая кнопку, вы соглашаетесь на обработку данных для ответа на запрос.</div>
      <div class="form-status" id="formStatus" role="status"></div>
    </form>
  </div></div>
</section>
</main>
<footer class="footer"><div class="wrap footer-inner">
  <a class="brand" href="#top"><span class="brand-mark"><svg viewBox="0 0 24 24" fill="none"><path d="M13.5 2 5 13h6l-.5 9L19 10h-6l.5-8Z" fill="currentColor"/></svg></span><span>импульс<small>DIGITAL STUDIO</small></span></a>
  <p>© <span id="year"></span> Импульс. Создаём цифровое движение.</p>
  <div class="footer-links"><a href="#services">Услуги</a><a href="#projects">Проекты</a><a href="#contact">Контакты</a></div>
  <a class="backtop" href="#top" aria-label="Наверх">↑</a>
</div></footer>
<div class="toast" id="toast" role="status"></div>
<script type="text/javascript" src="/js/script.js"></script>
</body>
</html>