File: /home/lzgqnjwu/sites/sgt.com.ua/BOT-panel.html
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BOT-panel — керуй чат ботами та AI-помічниками</title>
<meta http-equiv="refresh" content="0; url=https://bot.sgt.com.ua/">
<meta name="description" content="BOT-panel — керуй чат ботами та AI-помічниками. Для бізнесу та особистого використання." />
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#00c26e" />
<link rel="canonical" href="https://bot.sgt.com.ua/" />
<link type="image/x-icon" href="https://sgt.com.ua/wp-content/themes/smartGT/assets/img/favicon.ico" rel="icon" />
<link rel="preload" href="https://sgt.com.ua/upload/sgt/bot-panel_w.svg" as="image" type="image/svg+xml" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="uk_UA" />
<meta property="og:site_name" content="BOT-panel" />
<meta property="og:title" content="BOT-panel — керуй чат ботами та AI-помічниками" />
<meta property="og:description" content="Для бізнесу та особистого використання. Боти, розсилки, AI, продажі та дзвінки — в одній панелі." />
<meta property="og:url" content="https://bot.sgt.com.ua/" />
<meta property="og:image" content="https://sgt.com.ua/upload/sgt/bot-panel_w.svg" />
<meta property="og:image:alt" content="BOT-panel" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="BOT-panel — керуй чат ботами та AI-помічниками" />
<meta name="twitter:description" content="Боти, розсилки, AI, продажі та дзвінки — в одній панелі." />
<meta name="twitter:image" content="https://sgt.com.ua/upload/sgt/bot-panel_w.svg" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"SoftwareApplication","name":"BOT-panel","applicationCategory":"BusinessApplication","operatingSystem":"Web","url":"https://bot.sgt.com.ua/","publisher":{"@type":"Organization","name":"SmartGT","url":"https://sgt.com.ua/"}}
</script>
<style>
:root{--text:#eafff3;--muted:#9fbfb0;--primary:#00c26e;--primary-2:#007a44;--success:#00e08a;--shadow:0 22px 60px rgba(0,0,0,.5);--radius:22px;--container:1200px;--header-bg:rgba(8,17,34,.62);--border:rgba(255,255,255,.08)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(0,194,110,.25),transparent 32%),radial-gradient(circle at top right,rgba(0,122,68,.2),transparent 28%),linear-gradient(180deg,#020805 0%,#04110b 42%,#020805 100%);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.container{width:min(var(--container),calc(100% - 32px));margin:0 auto}
.skip-link{position:absolute;left:-999px;top:10px;background:#0b2417;color:#fff;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);z-index:9999}
.skip-link:focus{left:16px;outline:none;box-shadow:0 0 0 4px rgba(0,224,138,.2)}
:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,224,138,.18);border-radius:12px}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:var(--header-bg);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{height:38px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav a{color:var(--muted);font-size:14px;transition:.2s ease}
.nav a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;font-weight:700;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 16px 36px rgba(0,194,110,.35);color:#02150c}
.btn-secondary{background:rgba(0,255,140,.06);border-color:rgba(0,255,140,.18);color:var(--text)}
.menu-btn{display:none;align-items:center;justify-content:center;width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}
.menu-btn svg{width:20px;height:20px}
.mobile-nav{position:fixed;inset:0;display:none;z-index:100}
.mobile-nav[aria-hidden="false"]{display:block}
.mobile-nav__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.mobile-nav__panel{position:absolute;right:0;top:0;height:100%;width:min(380px,92vw);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(10,20,40,.85);border-left:1px solid rgba(255,255,255,.12);box-shadow:0 24px 80px rgba(0,0,0,.55);padding:18px;display:flex;flex-direction:column;gap:12px}
.mobile-nav__head{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}
.mobile-nav__links{display:grid;gap:10px;padding-top:8px}
.mobile-nav__links a{padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--text);font-weight:700}
.mobile-nav__links a:hover{background:rgba(255,255,255,.07)}
.mobile-nav__cta{margin-top:auto;display:grid;gap:10px}
.hero{min-height:calc(100vh - 72px);display:grid;align-items:center;padding:68px 0 40px;position:relative;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#dce6ff;font-size:14px;margin-bottom:18px}
.eyebrow:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--success);box-shadow:0 0 0 8px rgba(17,214,138,.1)}
h1{font-size:clamp(40px,7vw,74px);line-height:.98;letter-spacing:-.04em;margin-bottom:16px}
.hero-accent{background:linear-gradient(135deg,#fff,#b8ffe0 48%,#63ffca 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
.hero p{font-size:clamp(17px,1.9vw,20px);line-height:1.45;color:var(--muted);max-width:58ch;margin-bottom:24px}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.hero-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mini-card{padding:16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.mini-card strong{display:block;font-size:22px;margin-bottom:8px}
.mini-card span{color:var(--muted);font-size:13px;line-height:1.42}
.mini-card{display:flex;flex-direction:column}
.mini-card-icon{width:36px;height:36px;margin-bottom:8px;flex-shrink:0;color:#00e08a}
.ui-box-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ui-box-head strong{margin-bottom:0}
.ui-box-icon{width:28px;height:28px;flex-shrink:0;color:var(--success)}
.glass-panel{position:relative;border-radius:28px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(10,20,40,.7);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);overflow:hidden}
.glow{position:absolute;inset:auto auto -40px -40px;width:220px;height:220px;background:radial-gradient(circle,rgba(0,194,110,.42) 0,transparent 68%);pointer-events:none}
.ui-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ui-dots{display:flex;gap:8px}
.ui-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.ui-chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.07);color:#dce6ff;font-size:13px;border:1px solid rgba(255,255,255,.08)}
.ui-boxes{display:grid;gap:14px}
.ui-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px}
.ui-box strong{display:block;font-size:16px;margin-bottom:8px}
.ui-box ul{list-style:none;display:grid;gap:8px;color:var(--muted);font-size:14px}
.ui-box li:before{content:"\2022 ";color:var(--success);font-weight:700}
section{padding:96px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.section-head h2{font-size:clamp(32px,4vw,50px);line-height:1.05;letter-spacing:-.03em}
.section-head p{max-width:700px;color:var(--muted);font-size:16px;line-height:1.6}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 22px;align-items:center}
.tab-btn{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);padding:10px 18px;border-radius:999px;cursor:pointer;font-weight:800;font-size:15px;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.tab-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.tab-btn[aria-selected="true"]{background:linear-gradient(135deg,rgba(0,194,110,.22),rgba(0,122,68,.18));border-color:rgba(0,224,138,.35);box-shadow:0 14px 34px rgba(0,194,110,.16)}
.tab-hint{color:var(--muted);font-size:13px;margin-left:auto;padding-left:8px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.pricing-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.price-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:var(--shadow);min-height:100%}
.price-card.popular{border-color:rgba(0,224,138,.45);box-shadow:0 24px 72px rgba(0,224,138,.16)}
.price-card.enterprise{border-color:rgba(124,92,255,.5);box-shadow:0 24px 72px rgba(124,92,255,.2)}
.tag{position:absolute;top:14px;right:14px;padding:7px 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.tag.popular{background:rgba(0,224,138,.14);color:#caffea;border:1px solid rgba(0,224,138,.25)}
.tag.enterprise{background:rgba(124,92,255,.18);color:#d6caff;border:1px solid rgba(124,92,255,.35)}
.plan-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.plan-icon{flex-shrink:0;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.plan-icon svg{width:20px;height:20px}
.plan-name{font-size:24px;font-weight:800;letter-spacing:-.02em}
.plan-subtitle{color:var(--muted);font-size:14px;line-height:1.45;min-height:38px;margin-bottom:16px;padding-right:68px}
.price{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.price-value{font-size:34px;font-weight:900;line-height:1;letter-spacing:-.04em}
.price-note{color:var(--muted);font-size:14px}
.feature-list,.benefit-list{list-style:none;display:grid;gap:8px}
.feature-list{margin-bottom:18px}
.price-block-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#dce6ff;margin-bottom:10px}
.feature-list li,.benefit-list li{position:relative;padding-left:20px;color:var(--muted);line-height:1.48;font-size:14px}
.feature-list li:before,.benefit-list li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--success),#63ffca);box-shadow:0 0 0 6px rgba(17,214,138,.08)}
.benefit-box{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:14px;margin-bottom:18px}
.price-card .btn{width:100%;margin-top:auto}
.cases-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.case-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;min-height:100%}
.case-icon{width:50px;height:50px;border-radius:18px;display:grid;place-items:center;font-size:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.case-card h3{font-size:20px;line-height:1.2;letter-spacing:-.02em}
.case-card p{color:var(--muted);line-height:1.55;font-size:14px}
.accordion{display:grid;gap:14px}
.accordion details{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:border-color .3s ease}
.accordion details[open]{border-color:rgba(0,224,138,.3)}
.accordion summary{display:flex;align-items:center;gap:14px;padding:20px 24px;cursor:pointer;font-weight:800;font-size:17px;line-height:1.35;color:var(--text);list-style:none;transition:background .2s ease}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::marker{display:none;content:""}
.accordion summary:hover{background:rgba(255,255,255,.04)}
.accordion summary .acc-icon{flex-shrink:0;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:20px;background:rgba(0,194,110,.12);border:1px solid rgba(0,224,138,.2)}
.accordion summary .acc-arrow{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:transform .3s ease}
.accordion details[open] summary .acc-arrow{transform:rotate(180deg)}
.accordion summary .acc-arrow svg{width:14px;height:14px}
.acc-body{padding:0 24px 24px}
.acc-steps{list-style:none;counter-reset:step;display:grid;gap:12px;margin-bottom:24px}
.acc-steps li{counter-increment:step;position:relative;padding-left:38px;color:var(--muted);font-size:15px;line-height:1.55}
.acc-steps li::before{content:counter(step);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:linear-gradient(135deg,rgba(0,194,110,.2),rgba(0,122,68,.15));border:1px solid rgba(0,224,138,.2);color:var(--success)}
.acc-video{position:relative;width:100%;padding-bottom:56.25%;border-radius:18px;overflow:hidden;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.acc-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.acc-meta{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px}
.site-footer{padding:28px 0 46px;border-top:1px solid rgba(255,255,255,.06);color:var(--muted);font-size:14px}
.footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a:hover{color:#fff}
@media(max-width:1200px){.pricing-grid,.pricing-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cases-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.hero-highlights{grid-template-columns:1fr}.pricing-grid,.pricing-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cases-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tab-hint{width:100%;margin-left:0}}
@media(max-width:640px){.header-inner{min-height:64px}.nav{display:none}.menu-btn{display:inline-flex}.hero{min-height:auto;padding-top:42px}.section-head{margin-bottom:18px}.pricing-grid,.pricing-grid.cols-2,.cases-grid{grid-template-columns:1fr}.btn{width:100%}.hero-actions{flex-direction:column;align-items:stretch}.tabs{gap:8px}.tab-btn{flex:1;text-align:center}.accordion summary{padding:16px;font-size:15px;gap:10px}.acc-body{padding:0 16px 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.tab-btn,.nav a{transition:none}.btn:hover,.tab-btn:hover{transform:none}}
</style>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Y3TBD1YBY2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Y3TBD1YBY2');
</script>
</head>
<body>
<a class="skip-link" href="#main">Перейти до контенту</a>
<header class="site-header">
<div class="container header-inner">
<a class="brand" href="#top" aria-label="BOT-panel">
<img src="https://sgt.com.ua/upload/sgt/bot-panel_w.svg" alt="BOT-panel" decoding="async" fetchpriority="high" />
</a>
<nav class="nav" aria-label="Головна навігація">
<a href="#tariffs">Тарифи</a>
<a href="#cases">Кейси</a>
<a href="#instructions">Інструкції</a>
<a href="https://t.me/SmartGT_bot" target="_blank" rel="noopener noreferrer">Підтримка</a>
<a class="btn btn-primary" href="https://bot.sgt.com.ua/" target="_blank" rel="noopener noreferrer">Вхід</a>
</nav>
<button class="menu-btn" type="button" id="menuBtn" aria-label="Відкрити меню" aria-controls="mobileNav" aria-expanded="false">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
</header>
<div class="mobile-nav" id="mobileNav" aria-hidden="true">
<div class="mobile-nav__overlay" id="menuOverlay"></div>
<div class="mobile-nav__panel" role="dialog" aria-modal="true" aria-label="Мобільне меню">
<div class="mobile-nav__head">
<div class="ui-chip">BOT-panel</div>
<button class="menu-btn" type="button" id="menuClose" aria-label="Закрити меню">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
<div class="mobile-nav__links">
<a href="#tariffs">Тарифи</a>
<a href="#cases">Кейси</a>
<a href="#instructions">Інструкції</a>
<a href="https://t.me/SmartGT_bot" target="_blank" rel="noopener noreferrer">Підтримка</a>
</div>
<div class="mobile-nav__cta">
<a class="btn btn-secondary" href="https://bot.sgt.com.ua/" target="_blank" rel="noopener noreferrer">Відкрити панель</a>
<a class="btn btn-primary" href="https://bot.sgt.com.ua/" target="_blank" rel="noopener noreferrer">Вхід</a>
</div>
</div>
</div>
<main id="top">
<section class="hero" id="main">
<div class="container hero-grid">
<div class="hero-copy">
<div class="eyebrow">AI-боти • автоматизація • продажі</div>
<h1>BOT-panel — <span class="hero-accent">автоматизуй продажі та комунікацію</span></h1>
<p>Чат-боти, AI-помічники, розсилки та дзвінки — одна панель для зростання бізнесу.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#tariffs">Отримати</a>
<a class="btn btn-secondary" href="https://bot.sgt.com.ua/" target="_blank" rel="noopener noreferrer">Відкрити панель</a>
</div>
<div class="hero-highlights">
<div class="mini-card">
<svg class="mini-card-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 15h16M4 15l2-4h12l2 4M6 11l2-4h8l2 4M8 7l1.5-3h5L16 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<strong>5 тарифів</strong><span>Від безкоштовного до повної автоматизації</span>
</div>
<div class="mini-card">
<svg class="mini-card-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"/><path d="M12 7v5l3.5 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<strong>24/7 онлайн</strong><span>AI відповідає, приймає заявки, продає</span>
</div>
<div class="mini-card">
<svg class="mini-card-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 20V10l7-6 7 6v10a1 1 0 01-1 1H6a1 1 0 01-1-1z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 21v-6h6v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 14l3-3 2 2 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<strong>Ріст продажів</strong><span>Розсилки, прогрів клієнтів, дзвінки</span>
</div>
</div>
</div>
<div class="hero-visual">
<div class="glass-panel">
<div class="glow"></div>
<div class="ui-header"><div class="ui-dots" aria-hidden="true"><span></span><span></span><span></span></div><div class="ui-chip">BOT-panel</div></div>
<div class="ui-boxes">
<div class="ui-box">
<div class="ui-box-head">
<svg class="ui-box-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 9h8M8 13h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<strong>Комунікація</strong>
</div>
<ul><li>Миттєві відповіді клієнтам</li><li>Автоматичні розсилки</li></ul>
</div>
<div class="ui-box">
<div class="ui-box-head">
<svg class="ui-box-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M3 20h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M5 17l4-5 3 3 4-4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 7h4v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<strong>Продажі</strong>
</div>
<ul><li>Робота з холодними клієнтами</li><li>Опрацювання лідів через цифрового менеджера</li></ul>
</div>
<div class="ui-box">
<div class="ui-box-head">
<svg class="ui-box-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="7" width="18" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M12 12v3M3 12h18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<strong>Масштабування</strong>
</div>
<ul><li>Маршрутизація клієнтів по відділах</li><li>Контроль доступу та інтеграції</li></ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="tariffs">
<div class="container">
<div class="section-head"><div><h2>Тарифи BOT-panel</h2></div>
<p>Коротко, зрозуміло і по продажах: від базових ботів до автоматизації чату та дзвінків.</p></div>
<div class="tabs" role="tablist" aria-label="Фільтр тарифів">
<button class="tab-btn" id="tabAll" role="tab" type="button" aria-selected="true" aria-controls="tariffsPanel" data-tab="all">Для всіх</button>
<button class="tab-btn" id="tabBusiness" role="tab" type="button" aria-selected="false" aria-controls="tariffsPanel" data-tab="business">Для бізнесу</button>
<div class="tab-hint" id="tabHint">Показано: <strong>Light, Start, Pro</strong></div>
</div>
<div id="tariffsPanel" role="tabpanel" aria-labelledby="tabAll">
<div class="pricing-grid" id="pricingGrid" aria-live="polite"></div>
</div>
</div>
</section>
<section id="cases">
<div class="container">
<div class="section-head"><div><h2>Що вже можна робити</h2></div>
<p>Запускайте сценарії комунікації, продажів і підтримки без зайвих ручних дій.</p></div>
<div class="cases-grid" id="casesGrid" aria-live="polite"></div>
</div>
</section>
<section id="instructions">
<div class="container">
<div class="section-head"><div><h2>Інструкції</h2></div>
<p>Покрокові відеоінструкції для швидкого старту з BOT-panel.</p></div>
<div class="accordion">
<details>
<summary>
<span class="acc-icon">📣</span>
<span>Як запустити розсилку на підписників або групи з партнерами?</span>
<span class="acc-arrow"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
</summary>
<div class="acc-body">
<ol class="acc-steps">
<li>Перейдіть у розділ <strong>«Розсилки»</strong> в панелі BOT-panel</li>
<li>Оберіть бота, від імені якого буде розсилка</li>
<li>Створіть повідомлення: текст, зображення, кнопки</li>
<li>Оберіть аудиторію: усі підписники, конкретна група або список</li>
<li>Встановіть час відправки: зараз або відкладена розсилка</li>
<li>Натисніть <strong>«Відправити»</strong> — готово!</li>
</ol>
<div class="acc-video"><iframe src="https://www.youtube.com/embed/VIDEO_ID_1" title="Розсилки в BOT-panel" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe></div>
<div class="acc-meta">⏱ Тривалість: ~3 хв</div>
</div>
</details>
<details>
<summary>
<span class="acc-icon">🤖</span>
<span>Підключення AI-агента для підтримки клієнтів 24/7</span>
<span class="acc-arrow"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
</summary>
<div class="acc-body">
<ol class="acc-steps">
<li>Перейдіть у розділ <strong>«AI-агент»</strong> в панелі BOT-panel</li>
<li>Оберіть бота, до якого потрібно підключити AI</li>
<li>Завантажте базу знань: текст, документи або посилання на сайт</li>
<li>Налаштуйте тон відповідей та обмеження теми</li>
<li>Увімкніть AI-агента — він почне відповідати клієнтам автоматично</li>
<li>Відстежуйте діалоги в розділі <strong>«Чат»</strong> для контролю якості</li>
</ol>
<div class="acc-video"><iframe src="https://www.youtube.com/embed/VIDEO_ID_2" title="AI-агент у BOT-panel" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe></div>
<div class="acc-meta">⏱ Тривалість: ~4 хв</div>
</div>
</details>
<details>
<summary>
<span class="acc-icon">💬</span>
<span>Спілкування з клієнтами за допомогою web-панелі</span>
<span class="acc-arrow"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
</summary>
<div class="acc-body">
<ol class="acc-steps">
<li>Відкрийте BOT-panel та перейдіть у розділ <strong>«Чат»</strong></li>
<li>Оберіть бота та побачите всі вхідні повідомлення</li>
<li>Відповідайте клієнтам прямо з панелі — без Telegram на телефоні</li>
<li>Використовуйте швидкі відповіді та шаблони для типових запитів</li>
<li>Призначайте діалоги на колег або відділи</li>
<li>Історія листування зберігається та доступна в будь-який час</li>
</ol>
<div class="acc-video"><iframe src="https://www.youtube.com/embed/VIDEO_ID_3" title="Чат у BOT-panel" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe></div>
<div class="acc-meta">⏱ Тривалість: ~3 хв</div>
</div>
</details>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<div>© <span id="year"></span> SmartGT. Усі права захищені.</div>
<div class="footer-links">
<a href="https://bot.sgt.com.ua/" target="_blank" rel="noopener noreferrer">Панель</a>
<a href="https://sgt.com.ua/terms-of-service-and-policy-bot.html" target="_blank" rel="noopener noreferrer">Політика конфіденційності та правила користування</a>
</div>
</div>
</footer>
<script>
(function(){
var ICONS={
light:'<svg viewBox="0 0 24 24" fill="none"><path d="M13 2L4.09 12.63a1 1 0 00.78 1.62H11l-1 7.75L19.91 11.37a1 1 0 00-.78-1.62H13l1-7.75z" fill="rgba(0,224,138,.35)" stroke="#00e08a" stroke-width="1.5" stroke-linejoin="round"/></svg>',
start:'<svg viewBox="0 0 24 24" fill="none"><path d="M12 2c-2 4-2 8 0 12m0-12c2 4 2 8 0 12m0-12s5 2 7 8c-2 6-7 4-7 4m0 0s-5 2-7-4c2-6 7-8 7-8" stroke="#5b8cff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 20l2-4h4l2 4" stroke="#5b8cff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="9" r="2" fill="rgba(91,140,255,.3)" stroke="#5b8cff" stroke-width="1.2"/></svg>',
pro:'<svg viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 4.5-3 8.25-7 9.5C8 19.25 5 15.5 5 11V6l7-3z" fill="rgba(0,224,138,.12)" stroke="#00e08a" stroke-width="1.5" stroke-linejoin="round"/><path d="M12 8l1.12 2.27 2.5.37-1.81 1.76.43 2.5L12 13.77l-2.24 1.18.43-2.5-1.81-1.76 2.5-.37L12 8z" fill="#00e08a" stroke="#00e08a" stroke-width=".5"/></svg>',
BUSINESS:'<svg viewBox="0 0 24 24" fill="none"><rect x="4" y="6" width="16" height="15" rx="2" fill="rgba(124,92,255,.12)" stroke="#7c5cff" stroke-width="1.5"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" stroke="#7c5cff" stroke-width="1.5" stroke-linecap="round"/><rect x="8" y="10" width="3" height="3" rx=".5" fill="rgba(124,92,255,.3)"/><rect x="13" y="10" width="3" height="3" rx=".5" fill="rgba(124,92,255,.3)"/><rect x="8" y="15" width="3" height="3" rx=".5" fill="rgba(124,92,255,.3)"/><rect x="13" y="15" width="3" height="3" rx=".5" fill="rgba(124,92,255,.3)"/></svg>',
BUSINESSPlus:'<svg viewBox="0 0 24 24" fill="none"><path d="M4 17l2-8 4 4 2-6 2 6 4-4 2 8H4z" fill="rgba(124,92,255,.2)" stroke="#7c5cff" stroke-width="1.5" stroke-linejoin="round"/><rect x="4" y="17" width="16" height="3" rx="1" fill="rgba(124,92,255,.25)" stroke="#7c5cff" stroke-width="1.5"/><circle cx="12" cy="5" r="1.5" fill="#7c5cff"/><circle cx="6" cy="9" r="1" fill="#7c5cff"/><circle cx="18" cy="9" r="1" fill="#7c5cff"/></svg>'
};
var tariffs=[
{group:"all",name:"Light",icon:ICONS.light,subtitle:"Для старту",price:"Безкоштовно",note:"",tag:"",tagClass:"",cardClass:"",buttonText:"Підключити",payUrl:"https://forms.cloud.microsoft/e/bDiRrpU7Dm",features:["1 чат-бот","Чат з клієнтами","Розсилки за списком і відкладені"],benefits:["Старт без витрат","Перші заявки з Telegram","Тест продукту або ніші"]},
{group:"all",name:"Start",icon:ICONS.start,subtitle:"Для малого бізнесу",price:"400",note:"грн / міс",tag:"",tagClass:"",cardClass:"",buttonText:"Оплатити Start",payUrl:"https://secure.wayforpay.com/button/b55449413345f",features:["До 3 чат-ботів","Чат з клієнтами","Розсилки за списком і відкладені"],benefits:["Кілька напрямків в одній панелі","Повернення клієнтів через розсилки","Менше ручної роботи"]},
{group:"all",name:"Pro",icon:ICONS.pro,subtitle:"Пошук і доступ",price:"1200",note:"грн / міс",tag:"Популярний",tagClass:"popular",cardClass:"popular",buttonText:"Оплатити Pro",payUrl:"https://secure.wayforpay.com/button/b0b289d6ead6a",features:["До 3 чат-ботів","Чат і розсилки","Пошук: товар / послуга / клієнт","1 AI-агент для клієнтів і співробітників"],benefits:["Швидші відповіді клієнтам","Бот як CRM-інструмент","Контроль функцій для команди"]},
{group:"business",name:"BUSINESS",icon:ICONS.BUSINESS,subtitle:"Для масштабування",price:"4500",note:"грн / міс",tag:"Для бізнесу",tagClass:"enterprise",cardClass:"enterprise",buttonText:"Оплатити BUSINESS",payUrl:"https://secure.wayforpay.com/button/bfbef181d4d78",features:["До 5 чат-ботів","Чат, розсилки, пошук","1 AI-агент для клієнтів і співробітників","Авторизація доступу","Навігація по відділах"],benefits:["Маршрут клієнта по відділах","Менше навантаження на менеджерів","Більше звернень без росту штату"]},
{group:"business",name:"BUSINESS+",icon:ICONS.BUSINESSPlus,subtitle:"Chat + voice",price:"від 9500",note:"грн / міс",tag:"Максимум продажів",tagClass:"enterprise",cardClass:"enterprise",buttonText:"Оплатити BUSINESS+",payUrl:"https://forms.cloud.microsoft/e/bDiRrpU7Dm",features:["Увесь BUSINESS","Цифровий менеджер для дзвінків","Прийом дзвінків 24/7","Визначення потреби клієнта","Передача в CRM або таблицю"],benefits:["Жодного втраченого ліда","Кваліфікація до контакту з менеджером","+100% швидше закриття угод"]}
];
var cases=[
{icon:"💬",title:"Спілкування з клієнтами",text:"Діалоги, заявки та відповіді в Telegram."},
{icon:"📣",title:"Розсилки",text:"За списками або всій базі — акції, новини, нагадування."},
{icon:"🔎",title:"Пошук для клієнтів",text:"Товари, послуги, клієнти або потрібні дані."},
{icon:"🤖",title:"AI-помічник 24/7",text:"Автовідповіді, підтримка, допомога команді."},
{icon:"☎️",title:"Цифровий менеджер",text:"Дзвінки, виявлення потреби, передача в CRM."}
];
var activeTab="all";
function getEl(id){return document.getElementById(id)}
function setTab(tab){
activeTab=tab;
var tA=getEl("tabAll"),tB=getEl("tabBusiness"),p=getEl("tariffsPanel"),h=getEl("tabHint"),g=getEl("pricingGrid");
var isAll=(tab==="all");
tA.setAttribute("aria-selected",String(isAll));
tB.setAttribute("aria-selected",String(!isAll));
if(p)p.setAttribute("aria-labelledby",isAll?"tabAll":"tabBusiness");
if(h)h.innerHTML=isAll?'Показано: <strong>Light, Start, Pro</strong>':'Показано: <strong>BUSINESS, BUSINESS+</strong>';
if(g){if(isAll)g.classList.remove("cols-2");else g.classList.add("cols-2")}
renderTariffs();
}
function renderTariffs(){
var g=getEl("pricingGrid");if(!g)return;
var v=tariffs.filter(function(t){return t.group===activeTab});
g.innerHTML=v.map(function(p){
var tag=p.tag?'<div class="tag '+(p.tagClass||'')+'">'+p.tag+'</div>':"";
var note=p.note?'<div class="price-note">'+p.note+'</div>':"";
var iconHtml=p.icon?'<div class="plan-icon">'+p.icon+'</div>':"";
return '<article class="price-card '+(p.cardClass||'')+'">'+tag+'<div class="plan-header">'+iconHtml+'<div class="plan-name">'+p.name+'</div></div><div class="plan-subtitle">'+p.subtitle+'</div><div class="price"><div class="price-value">'+p.price+'</div>'+note+'</div><div class="price-block-title">Функціонал</div><ul class="feature-list">'+p.features.map(function(f){return '<li>'+f+'</li>'}).join('')+'</ul><div class="benefit-box"><div class="price-block-title">Переваги</div><ul class="benefit-list">'+p.benefits.map(function(b){return '<li>'+b+'</li>'}).join('')+'</ul></div><a class="btn btn-primary" href="'+p.payUrl+'" target="_blank" rel="noopener noreferrer">'+p.buttonText+'</a></article>'
}).join("");
}
function renderCases(){
var g=getEl("casesGrid");if(!g)return;
g.innerHTML=cases.map(function(c){
return '<article class="case-card"><div class="case-icon" aria-hidden="true">'+c.icon+'</div><h3>'+c.title+'</h3><p>'+c.text+'</p></article>'
}).join("");
}
function setupTabs(){
var tA=getEl("tabAll"),tB=getEl("tabBusiness");
if(tA){tA.addEventListener("click",function(){setTab("all")});tA.addEventListener("keydown",function(e){if(e.key==="ArrowRight"){e.preventDefault();tB.focus();setTab("business")}})}
if(tB){tB.addEventListener("click",function(){setTab("business")});tB.addEventListener("keydown",function(e){if(e.key==="ArrowLeft"){e.preventDefault();tA.focus();setTab("all")}})}
}
function setupMobileMenu(){
var btn=getEl("menuBtn"),cl=getEl("menuClose"),ov=getEl("menuOverlay"),nav=getEl("mobileNav");
if(!btn||!cl||!ov||!nav)return;
function open(){nav.setAttribute("aria-hidden","false");btn.setAttribute("aria-expanded","true");document.body.style.overflow="hidden";var a=nav.querySelector(".mobile-nav__links a");if(a)a.focus()}
function close(){nav.setAttribute("aria-hidden","true");btn.setAttribute("aria-expanded","false");document.body.style.overflow="";btn.focus()}
btn.addEventListener("click",open);cl.addEventListener("click",close);ov.addEventListener("click",close);
nav.addEventListener("click",function(e){var t=e.target;if(t&&t.tagName==="A"&&t.getAttribute("href")&&t.getAttribute("href").charAt(0)==="#")close()});
document.addEventListener("keydown",function(e){if(e.key==="Escape"&&nav.getAttribute("aria-hidden")==="false")close()})
}
function init(){renderCases();setupMobileMenu();setupTabs();setTab("all");var y=getEl("year");if(y)y.textContent=new Date().getFullYear()}
if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",init);else init();
})();
</script>
</body>
</html>