Заря — ИИ-менеджер, который продаёт 24/7


<style>
/* ===== Дополнительные стили нового лендинга (поверх base.html) ===== */
.hero{
  position:relative;
  text-align:center;
  padding:90px 0 40px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:999px;font-size:14px;font-weight:600;
  background:rgba(124,108,255,.14);border:1px solid rgba(124,108,255,.35);
  color:var(--accent2);margin-bottom:22px;backdrop-filter:blur(8px);
}
.hero h1{
  font-size:clamp(2.2rem,6vw,4rem);font-weight:850;line-height:1.08;
  letter-spacing:-1px;margin:0 0 20px;
}
.hero-sub{
  max-width:680px;margin:0 auto 34px;font-size:clamp(1.05rem,2.2vw,1.3rem);
  color:var(--muted);
}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.hero-cta .btn{font-size:1.05rem;padding:15px 30px;border-radius:16px}
/* цифры */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px;margin:10px 0 20px;
}
.stat{
  background:var(--card);border:1px solid var(--card-border);border-radius:18px;
  padding:22px 12px;text-align:center;backdrop-filter:blur(10px);
}
.stat b{display:block;font-size:clamp(1.5rem,4vw,2.1rem);color:var(--accent2);line-height:1.1}
.stat span{color:var(--muted);font-size:14px}
/* иконки фич */
.feature-card{position:relative;overflow:hidden}
.feature-card .icon{
  width:58px;height:58px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;font-size:28px;
  background:linear-gradient(135deg,rgba(124,108,255,.25),rgba(34,211,238,.25));
  margin-bottom:16px;
}
/* блок безопасности */
.security{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
}
.security .card{text-align:left}
.security .card b{display:block;margin-bottom:6px;font-size:1.05rem}
.check{color:var(--accent2)}
/* как работает */
.step-card{text-align:center}
.step-card .num{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:linear-gradient(135deg,#7c6cff,#22d3ee);color:#0a0f24;font-weight:800;
  box-shadow:var(--glow);
}
/* CTA финальный */
.final-cta{padding:70px 0;text-align:center}
.final-cta .card{padding:60px 34px}
/* Форма демо */
.demo-form{max-width:560px;margin:34px auto 0;display:flex;flex-direction:column;gap:12px}
.demo-form input{
  padding:15px 18px;border-radius:14px;border:1px solid var(--card-border);
  background:var(--card);color:var(--text);font-size:1rem;
}
.demo-form input::placeholder{color:var(--muted)}
.demo-form input:focus{outline:none;border-color:var(--accent2)}
.demo-note{font-size:13px;color:var(--muted);margin-top:8px}
.section-title{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 8px}
.section-sub{margin:0 auto 34px;max-width:640px}
@media (max-width:600px){
  .hero{padding:50px 0 24px}
}
</style>

<!-- ===== ГЕРОЙ ===== -->
<section class="hero reveal on">
  <span class="hero-badge">⚡ Ваш продавец, который не спит</span>
  <h1>ИИ-менеджер, который<br><span class="grad">отвечает клиентам 24/7</span></h1>
  <p class="hero-sub">
    Виджет-чат прямо на вашем сайте. Отвечает только по вашей базе знаний,
    собирает заявки и записывает клиентов — даже ночью. Попробуйте 👉
    кнопка круглого виджета справа внизу — это живой чат.
  </p>
  <div class="hero-cta">
    <a href="https://apps.609.su/zarya/" target="_blank" rel="noopener" class="btn">🚀 Запустить Зарю</a>
    <a href="/lk/register/" class="btn ghost">Начать бесплатно →</a>
  </div>
  <form class="demo-form" id="demoForm">
    <input type="text" id="demoName" placeholder="Ваше имя" required>
    <input type="tel" id="demoPhone" placeholder="Телефон" required>
    <button class="btn" type="submit" style="width:100%">Жду демо-звонка</button>
    <div class="demo-note">🔒 Без спама. Перезвоним в течение часа в рабочее время.</div>
  </form>
</section>

<!-- ===== ЦИФРЫ ===== -->
<section class="stats reveal" style="margin:20px 0">
  
  <div class="stat">
    <b>24/7</b>
    <span>на связи ночью и днём</span>
  </div>
  
  <div class="stat">
    <b>9 из 10</b>
    <span>клиентов получают ответ</span>
  </div>
  
  <div class="stat">
    <b>&lt; 3 сек</b>
    <span>скорость первого ответа</span>
  </div>
  
  <div class="stat">
    <b>0 ₽</b>
    <span>на старте, 14 дней бесплатно</span>
  </div>
  
</section>

<!-- ===== ВОЗМОЖНОСТИ ===== -->
<section id="features" class="reveal" style="padding:54px 0">
  <h2 class="center section-title">Что умеет Заря</h2>
  <p class="center section-sub muted">Один виджет — и ни один клиент не остаётся без ответа.</p>
  <div class="grid">
    
    <div class="card feature-card">
      <div class="icon">💬</div>
      <h3 style="margin:.2em 0 .4em">Мгновенные ответы</h3>
      <p class="muted" style="margin:0">Клиент не ждёт трубки. ИИ отвечает за секунды день и ночь.</p>
    </div>
    
    <div class="card feature-card">
      <div class="icon">🧠</div>
      <h3 style="margin:.2em 0 .4em">Только ваши факты (RAG)</h3>
      <p class="muted" style="margin:0">Ответы строятся на вашей базе знаний: цены, услуги, график. Никаких выдумок.</p>
    </div>
    
    <div class="card feature-card">
      <div class="icon">📋</div>
      <h3 style="margin:.2em 0 .4em">Заявки на почту</h3>
      <p class="muted" style="margin:0">ИИ понимает, когда клиент готов оставить контакт, и сразу шлёт заявку.</p>
    </div>
    
    <div class="card feature-card">
      <div class="icon">🛡️</div>
      <h3 style="margin:.2em 0 .4em">Безопасность данных</h3>
      <p class="muted" style="margin:0">База знаний и заявки ваши. Загруженное остаётся только у вас.</p>
    </div>
    
    <div class="card feature-card">
      <div class="icon">👑</div>
      <h3 style="margin:.2em 0 .4em">PWA + удобный ЛК</h3>
      <p class="muted" style="margin:0">Заявки, логи диалогов, настройка виджета — всё в одном кабинете.</p>
    </div>
    
    <div class="card feature-card">
      <div class="icon">🎨</div>
      <h3 style="margin:.2em 0 .4em">Свой стиль</h3>
      <p class="muted" style="margin:0">Тёмная «космос» и светлая темы, цвета под ваш бренд.</p>
    </div>
    
  </div>
</section>

<!-- ===== КАК РАБОТАЕТ ===== -->
<section class="reveal" style="padding:50px 0">
  <h2 class="center section-title">Подключение за 5 минут</h2>
  <p class="center section-sub muted">Три простых шага — и ИИ начинает принимать заявки.</p>
  <div class="grid" >
    <div class="card step-card">
      <div class="num">1</div>
      <h3 style="margin:.2em 0 .4em">Регистрация</h3>
      <p class="muted" style="margin:0">Создайте аккаунт за минуту — карта не нужна.</p>
    </div>
    <div class="card step-card">
      <div class="num">2</div>
      <h3 style="margin:.2em 0 .4em">Загрузите базу знаний</h3>
      <p class="muted" style="margin:0">Расскажите ИИ о ценах, услугах и графике.</p>
    </div>
    <div class="card step-card">
      <div class="num">3</div>
      <h3 style="margin:.2em 0 .4em">Кнопка на сайт</h3>
      <p class="muted" style="margin:0">Одна строчка кода — и виджет уже принимает клиентов.</p>
    </div>
  </div>
</section>

<!-- ===== БЕЗОПАСНОСТЬ ===== -->
<section class="reveal" style="padding:50px 0">
  <h2 class="center section-title">Данные под защитой 🛡️</h2>
  <p class="center section-sub muted">Ваша база знаний и заявки — это только ваши данные.</p>
  <div class="security">
    <div class="card">
      <b><span class="check">✔</span> Своя база знаний</b>
      <p class="muted" style="margin:.3em 0 0">ИИ отвечает строго по тому, что вы загрузили. Никаких отсебятин.</p>
    </div>
    <div class="card">
      <b><span class="check">✔</span> Защита от выдумок</b>
      <p class="muted" style="margin:.3em 0 0">Если ответа в базе нет — ИИ честно предложит оставить заявку.</p>
    </div>
    <div class="card">
      <b><span class="check">✔</span> Хранение у нас, под ключом</b>
      <p class="muted" style="margin:.3em 0 0">Сервера защищены. Доступ к данным только у вас.</p>
    </div>
  </div>
</section>

<!-- ===== ТАРИФЫ ===== -->
<section id="pricing" class="reveal" style="padding:50px 0">
  <h2 class="center section-title">Доступные тарифы</h2>
  <p class="center section-sub muted">Начните бесплатно — платите, когда увидите результат.</p>
  <div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))">
    
    <div class="card" style="display:flex;flex-direction:column;">
      <h3 style="margin-top:0">Пробный</h3>
      <div style="font-size:2.3rem;font-weight:800;color:var(--accent2)">0 ₽</div>
      <div class="muted" style="margin-bottom:10px">на 14 дней</div>
      <ul style="margin:12px 0;padding-left:18px;list-style:none">
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> 1 виджет</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> база знаний до 20 фрагментов</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> почта заявок</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> тема «Космос»</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> поддержка в чате</li>
        
      </ul>
      <a href="/lk/register/" class="btn ghost" style="width:100%;text-align:center;margin-top:auto">Попробовать бесплатно</a>
    </div>
    
    <div class="card" style="display:flex;flex-direction:column;border-color:var(--accent);box-shadow:var(--glow);transform:scale(1.02)">
      <h3 style="margin-top:0">Базовый</h3>
      <div style="font-size:2.3rem;font-weight:800;color:var(--accent2)">1 500 ₽</div>
      <div class="muted" style="margin-bottom:10px">в месяц</div>
      <ul style="margin:12px 0;padding-left:18px;list-style:none">
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> Всё из пробного</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> база знаний без лимитов</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> своя модель ИИ на выбор</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> статистика и отчёты</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> 2 вида темы виджета</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> приоритетная поддержка</li>
        
      </ul>
      <a href="/lk/register/" class="btn " style="width:100%;text-align:center;margin-top:auto">Подключить бизнес</a>
    </div>
    
    <div class="card" style="display:flex;flex-direction:column;">
      <h3 style="margin-top:0">Продвинутый</h3>
      <div style="font-size:2.3rem;font-weight:800;color:var(--accent2)">3 900 ₽</div>
      <div class="muted" style="margin-bottom:10px">в месяц</div>
      <ul style="margin:12px 0;padding-left:18px;list-style:none">
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> Всё из базового</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> несколько виджетов (до 5)</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> интеграция с CRM</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> личный менеджер</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> SLA 99,9%</li>
        
        <li class="muted" style="margin:8px 0"><span class="check">✔</span> обучение команды</li>
        
      </ul>
      <a href="/lk/register/" class="btn ghost" style="width:100%;text-align:center;margin-top:auto">Обсудить проект</a>
    </div>
    
  </div>
</section>

<!-- ===== ОТЗЫВЫ ===== -->
<section class="reveal" style="padding:44px 0">
  <h2 class="center section-title">Клиенты довольны</h2>
  <p class="center section-sub muted">Нас уже выбирают сервисы, салоны и клиники.</p>
  <div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))">
    
    <div class="card">
      <div class="stars"></div>
      <p style="margin:.5em 0">Клиент пишет ночью — ИИ отвечает и сразу заносит заявку. Утром только перезваниваю. Продажи выросли.</p>
      <b class="muted">— Сергей, автосервис</b>
    </div>
    
    <div class="card">
      <div class="stars"></div>
      <p style="margin:.5em 0">Раньше пропускали звонки, теперь бот записывает на приём 24/7. Очень удобно и недорого.</p>
      <b class="muted">— Марина, салон красоты</b>
    </div>
    
    <div class="card">
      <div class="stars"></div>
      <p style="margin:.5em 0">ИИ отвечает только по нашей базе знаний, ничего не выдумывает. Это важно. Рекомендую!</p>
      <b class="muted">— Игорь, юристы</b>
    </div>
    
    <div class="card">
      <div class="stars"></div>
      <p style="margin:.5em 0">Пациенты записываются сами в любое время. Администраторы разгружены, а план приёма всегда полный.</p>
      <b class="muted">— Ольга, клиника</b>
    </div>
    
  </div>
</section>

<!-- ===== FAQ ===== -->
<section id="faq" class="reveal" style="padding:44px 0">
  <h2 class="center section-title">Частые вопросы</h2>
  <div style="max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px">
    
    <div class="card" style="padding:18px 24px;margin:0">
      <b>❓ ИИ не будет выдумывать факты?</b>
      <p class="muted" style="margin:8px 0 0">Нет. Ответы строятся только на вашей базе знаний. Чего в ней нет — честно предложит оставить заявку.</p>
    </div>
    
    <div class="card" style="padding:18px 24px;margin:0">
      <b>❓ Как быстро подключить?</b>
      <p class="muted" style="margin:8px 0 0">Достаточно добавить одну строчку кода на ваш сайт. Весь остальной процесс занимает пару минут.</p>
    </div>
    
    <div class="card" style="padding:18px 24px;margin:0">
      <b>❓ Сколько стоит?</b>
      <p class="muted" style="margin:8px 0 0">Есть бесплатный пробный период 14 дней. Далее — от 1 500 ₽ в месяц за виджет.</p>
    </div>
    
    <div class="card" style="padding:18px 24px;margin:0">
      <b>❓ Какая модель ИИ используется?</b>
      <p class="muted" style="margin:8px 0 0">Заря использует надёжную собственную модель, которую легко заменить или подключить свою вплоть до локальной.</p>
    </div>
    
    <div class="card" style="padding:18px 24px;margin:0">
      <b>❓ Куда попадают данные клиентов?</b>
      <p class="muted" style="margin:8px 0 0">Заявки и база знаний хранятся на наших серверах под защитой. Настройки и данные ваши.</p>
    </div>
    
    <div class="card" style="padding:18px 24px;margin:0">
      <b>❓ Можно ли поменять дизайн виджета?</b>
      <p class="muted" style="margin:8px 0 0">Да, есть тёмная «космос» и светлая темы, а цвета можно подобрать под стиль бренда.</p>
    </div>
    
  </div>
</section>

<!-- ===== ФИНАЛЬНЫЙ CTA ===== -->
<section class="final-cta reveal">
  <div class="card">
    <h2 style="margin-top:0;font-size:clamp(1.6rem,4vw,2.4rem)">Готовы продавать ночью? 🌌</h2>
    <p class="sub" style="margin:12px auto 26px">14 дней бесплатно. Без карты. Настройка — за 5 минут.</p>
    <a href="https://apps.609.su/zarya/" target="_blank" rel="noopener" class="btn" style="padding:15px 34px;font-size:1.05rem">Запустить Зарю →</a>
  </div>
</section>




<!-- =========================================================
     ✨ Чат-виджет в ПРАВОМ НИЖНЕМ УГЛУ
     Одна и та же логика, что и на странице /chat/
     ========================================================= -->
<div class="zaria-widget" id="zariaWidget">
  <!-- кнопка-планета -->
  <button class="zaria-fab" id="zariaFab" onclick="zariaOpen()" aria-label="Чат">
    🛸
  </button>
  <!-- окно чата -->
  <div class="zaria-panel" id="zariaPanel">
    <div class="zaria-head">
      <div class="zaria-head-title">⚡ Заря · «Автосервис 24»</div>
      <button class="zaria-close" onclick="zariaClose()">✕</button>
    </div>
    <div class="zaria-body" id="zariaBody">
      <div class="zaria-msg ai">Привет! 👋 Я ИИ-менеджер. Напишите про услуги, цены или запишитесь на приём 💜</div>
    </div>
    <div class="zaria-lead" id="zariaLead" style="display:none">
      <b>Оставьте контакты — перезвоним 😊</b>
      <input id="leadName" placeholder="Ваше имя">
      <input id="leadPhone" placeholder="Телефон *">
      <button class="btn small" style="width:100%" onclick="zariaSendLead()">Отправить заявку</button>
    </div>
    <div class="zaria-input">
      <input id="zariaText" placeholder="Ваше сообщение..." onkeydown="if(event.key==='Enter')zariaSend()">
      <button class="zaria-send" onclick="zariaSend()">➤</button>
    </div>
  </div>
</div>
<style>
/* ===== Чат-виджет: ПРАВЫЙ НИЖНИЙ УГОЛ ===== */
.zaria-widget{position:fixed;left:24px;bottom:24px;z-index:9999;font-family:inherit;display:flex;flex-direction:column;align-items:flex-start}
.zaria-fab{
  width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;font-size:30px;
  background:linear-gradient(135deg,#7c6cff,#22d3ee);color:#fff;
  box-shadow:0 10px 30px rgba(124,108,255,.55);
  transition:transform .2s, box-shadow .2s;
  animation:zariaPulse 3s infinite;
}
.zaria-fab:hover{transform:scale(1.12) rotate(8deg)}
@keyframes zariaPulse{
  0%,100%{box-shadow:0 10px 30px rgba(124,108,255,.55)}
  50%{box-shadow:0 10px 42px rgba(34,211,238,.65)}
}
.zaria-panel{
  display:none;width:360px;max-width:94vw;background:rgba(13,21,48,.96);color:#eef1ff;
  border:1px solid rgba(255,255,255,.16);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.6);flex-direction:column;margin-bottom:14px;
  backdrop-filter:blur(12px);
}
.zaria-panel.show{display:flex;animation:zariaIn .25s ease}
@keyframes zariaIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.zaria-head{background:linear-gradient(135deg,#7c6cff,#22d3ee);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.zaria-head-title{font-weight:700}
.zaria-close{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;opacity:.9}
.zaria-close:hover{opacity:1;transform:scale(1.2)}
.zaria-body{padding:14px;height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.zaria-msg{max-width:82%;padding:10px 13px;border-radius:14px;line-height:1.45;font-size:14px}
.zaria-msg.ai{background:rgba(255,255,255,.09);align-self:flex-start;border-bottom-left-radius:4px}
.zaria-msg.user{background:linear-gradient(135deg,#7c6cff,#22d3ee);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.zaria-msg.think{color:#9aa3c7;font-style:italic;font-size:13px}
.zaria-lead{padding:10px 14px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:8px}
.zaria-lead input{padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#eef1ff}
.zaria-input{display:flex;gap:8px;padding:11px;border-top:1px solid rgba(255,255,255,.12)}
.zaria-input input{flex:1;padding:11px 13px;border-radius:11px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#eef1ff}
.zaria-input input::placeholder{color:#9aa3c7}
.zaria-input input:focus{outline:none;border-color:#22d3ee}
.zaria-send{width:46px;border:0;border-radius:11px;background:linear-gradient(135deg,#7c6cff,#22d3ee);color:#fff;cursor:pointer;font-size:18px;transition:transform .15s}
.zaria-send:hover{transform:scale(1.05)}
</style>
<script>
/* ===== Виджет Заря: подача лендинга ===== */
const Z_SLUG="";
let zBusy=false;
let zHistory=[];

function zariaOpen(){document.getElementById('zariaPanel').classList.add('show')}
function zariaClose(){document.getElementById('zariaPanel').classList.remove('show')}

function zariaAdd(text, who){
  var body=document.getElementById('zariaBody');
  var d=document.createElement('div');
  d.className='zaria-msg '+who;
  d.textContent=text;
  body.appendChild(d);
  body.scrollTop=body.scrollHeight;
  return d;
}

function zariaSend(){
  var inp=document.getElementById('zariaText');
  var text=inp.value.trim();
  if(!text||zBusy)return;
  inp.value='';
  zariaAdd(text,'user');
  zHistory.push({role:'user',content:text});
  var think=zariaAdd('печатает… 🤔','think');
  zBusy=true;
  var url='/chat/api/message/'+(Z_SLUG?Z_SLUG+'/':'');
  fetch(url,{
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken':getCookie('csrftoken')},
    body:JSON.stringify({message:text,history:zHistory.slice(0,-1)})
  }).then(r=>r.json()).then(function(d){
    think.remove();
    zariaAdd(d.reply||'😅 Не получилось. Попробуйте ещё раз.','ai');
    zHistory.push({role:'assistant',content:d.reply||''});
    if(d.want_lead){document.getElementById('zariaLead').style.display='flex'}
    zBusy=false;
  }).catch(function(){think.remove();zariaAdd('😢 Ой, сеть моргнула. Попробуйте снова.','ai');zBusy=false;});
}

function zariaSendLead(){
  var name=document.getElementById('leadName').value.trim();
  var phone=document.getElementById('leadPhone').value.trim();
  if(!phone){document.getElementById('leadPhone').focus();return}
  fetch('/chat/api/lead/',{
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken':getCookie('csrftoken')},
    body:JSON.stringify({name:name,phone:phone,message:'',business_id:null})
  }).then(r=>r.json()).then(function(d){
    document.getElementById('zariaLead').innerHTML='<b style="color:#22d3ee">✅ Заявка отправлена! Перезвоним скоро.</b>';
  });
}

function getCookie(n){
  var m=document.cookie.match('(^|;)\\s*'+n+'\\s*=\\s*([^;]+)');
  return m?m.pop():'';
}

/* ===== AJAX-форма демо с лендинга ===== */
(function(){
  var form=document.getElementById('demoForm');
  if(!form)return;
  form.addEventListener('submit',function(e){
    e.preventDefault();
    var name=document.getElementById('demoName').value.trim();
    var phone=document.getElementById('demoPhone').value.trim();
    var fd=new FormData();fd.append('name',name);fd.append('phone',phone);
    var btn=form.querySelector('button');
    var old=btn.textContent;
    btn.textContent='⏳ Отправляем…';
    fetch('/api/demo/',{method:'POST',body:fd,headers:{'X-CSRFToken':getCookie('csrftoken')}})
      .then(r=>r.json()).then(function(){
        form.innerHTML='<div style="padding:18px;border-radius:14px;border:1px solid var(--accent2);color:var(--accent2)">✅ Заявка принята! Перезвоним в ближайшее время.</div>';
      }).catch(function(){btn.textContent=old; alert('😢 Не вышло, попробуйте ещё раз.');});
  });
})();
</script>