:root{
  --bg:#0a0a0a;
  --panel:#0f0f11;
  --muted:#9aa4ad;
  --accent:#00ffd1;
  --accent-2:#7c5cff;
  --glass: rgba(255,255,255,0.04);
  --radius:12px;
  --container:1200px;
  --mono: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--mono);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:#fff;line-height:1.45;overflow-y:overlay;position:relative;}

.container{max-width:var(--container);margin:0 auto;padding:0 20px;}

#particles-js{position:fixed;inset:0;z-index:0;pointer-events:none}

/* Hero */
.section-hero{position:relative;min-height:78vh;display:flex;align-items:center;z-index:5;padding-top:36px;padding-bottom:36px}
.hero-inner{display:flex;gap:48px;align-items:center;justify-content:space-between;width:100%}
.hero-left{flex:1;max-width:680px}
.hero-right{flex:0 0 420px;display:flex;justify-content:center;align-items:center}

/* Brand heading */
.brand{font-size:2.4rem;margin:0 0 12px 0;line-height:1.02;font-weight:800;letter-spacing:-0.02em}
.brand .accent{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Lead */
.lead{color:var(--muted);font-size:1.05rem;margin-bottom:20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;border:0;font-weight:700;cursor:pointer;transition:all 0.3s ease}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#020202;box-shadow:0 10px 30px rgba(0,255,209,0.06)}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff}
.ghost{color:var(--muted);text-decoration:none;margin-left:8px;font-weight:600}

/* Hero notes */
.hero-notes{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.pill{background:var(--glass);padding:6px 10px;border-radius:999px;font-weight:600;color:var(--muted);font-size:0.9rem}

/* Device mock */
.device-mock{width:320px;background:linear-gradient(180deg,#0b0b0b,#0f0f12);border-radius:18px;padding:12px;box-shadow:0 15px 50px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.02)}
.device-topbar{height:10px;border-radius:6px;background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));margin-bottom:10px}
.device-screen{background:#050506;border-radius:10px;padding:12px;min-height:260px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.msg{padding:8px 12px;border-radius:12px;max-width:85%;font-size:0.95rem}
.from-bot{align-self:flex-start;background:linear-gradient(90deg,#0b0f12,#082a2a);color:#dff8f0}
.from-user{align-self:flex-end;background:#101112;color:#fff}
.device-footer{font-size:0.8rem;color:var(--muted);text-align:center;margin-top:10px}

/* Sidebar */
.sidebar{position:fixed;left:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:30}
.side-btn{background:#0f1011;border:1px solid rgba(255,255,255,0.03);color:var(--muted);padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;min-width:120px;text-align:left;transition:all .22s}
.side-btn:hover{transform:translateX(6px);color:#fff;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01))}
.side-btn.active{background:linear-gradient(90deg, rgba(0,255,209,0.12), rgba(124,92,255,0.06));color:#fff;box-shadow:0 8px 30px rgba(0,255,209,0.04)}

/* Sections / Tabs */
.sections{margin-left:200px;padding-top:30px; position:relative; z-index:1; padding-bottom: 80px;}
.tab-section{padding:40px 0;display:none}
.tab-section.active{display:block}
.tab-section h2{margin:0 0 20px 0;font-size:1.4rem;color:#fff}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:linear-gradient(180deg,#0d0d0e,#0b0b0b);border-radius:12px;padding:16px;border:1px solid rgba(255,255,255,0.02);box-shadow:0 6px 18px rgba(2,6,10,0.6);transition:transform .22s,box-shadow .22s}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(2,6,10,0.8)}
.card img{width:100%;border-radius:8px;height:140px;object-fit:cover;margin-bottom:12px}
.card h3{margin:0 0 8px 0;font-size:1.05rem}
.card p{margin:0 0 14px 0;color:var(--muted);font-size:0.95rem}
.card .card-actions{
  display: flex;
  justify-content: center;   /* центрируем кнопки */
  align-items: center;
  gap: 10px;
  margin-top: 10px;          /* небольшой отступ от текста */
}
.card .btn{padding:8px 12px;font-size:0.95rem;border-radius:8px}
.btn.small{padding:8px 10px}
/* Карточка — сетка, чтобы actions всегда были внизу и по центру */
.cards .card{
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* img, h3, p(растяг), actions */
}
/* Картинка-логотип: не обрезаем, вписываем, с рамкой */
.cards .card img.card-cover{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;                        /* перекрывает старое height:140px */
  object-fit: contain !important;      /* логотип целиком */
  margin-bottom: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* Строгая кнопка «Скоро…» */
.btn.soon{
  cursor: not-allowed;
  color: #c9cfd6;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: .2px;
}
.btn.soon[disabled]:hover{
  filter: none;
  transform: none;
  box-shadow: none;
}
/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,6,9,0.6);z-index:60}
.modal-panel{background:#0b0b0b;padding:22px;border-radius:14px;max-width:720px;width:94%;box-shadow:0 30px 60px rgba(0,0,0,0.6)}
.modal-close{position:absolute;right:18px;top:14px;border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer}

/* Footer */
.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,0.04);margin-top:40px}
.site-footer .container{display:flex;justify-content:space-between;align-items:center}
.site-footer a{color:var(--muted);margin-left:12px;text-decoration:none}

/* Responsive */
@media (max-width:1000px){ .hero-inner{flex-direction:column-reverse;gap:24px} .hero-right{flex-basis:100%;max-width:460px} .sections{margin-left:0;padding-top:10px} .sidebar{display:none} }
@media (max-width:480px){ .brand{font-size:1.6rem} .device-mock{width:260px} .cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }

/* Background blobs */
body::before, body::after { content: ""; position: fixed; z-index: -3; pointer-events: none; width: 80vmax; height: 80vmax; top: 50%; left: 50%; filter: blur(120px); opacity: 0.65; mix-blend-mode: screen; }
body::before{ background: radial-gradient(circle at 30% 30%, rgba(0,255,213,0.25) 0%, rgba(0,255,213,0.12) 20%, rgba(0,255,213,0.06) 35%, transparent 60%); transform: translate(-40%, -30%); animation: blobMove1 30s infinite alternate ease-in-out; }
body::after{ background: radial-gradient(circle at 70% 70%, rgba(124,92,255,0.22) 0%, rgba(124,92,255,0.10) 20%, rgba(124,92,255,0.04) 35%, transparent 60%); transform: translate(40%, 30%); animation: blobMove2 34s infinite alternate ease-in-out; }
@keyframes blobMove1 { from { transform: translate(-45%, -35%) scale(1); } to { transform: translate(-30%, -20%) scale(1.05); } }
@keyframes blobMove2 { from { transform: translate(35%, 25%) scale(1); } to { transform: translate(50%, 40%) scale(1.03); } }

/* Основной текст */
.hero-left .lead {
  font-size: 1.1rem;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  line-height: 1.5;
  margin-bottom: 24px;
}

/* Кнопки */
.hero-left .hero-ctas .btn {
  font-weight: 700;
  border-radius: 12px;
  padding: 14px 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-left .hero-ctas .btn.primary {
  background: linear-gradient(90deg, #00ffd1, #7c5cff);
  color: #020202;
  box-shadow: 0 8px 20px rgba(0,255,209,0.3);
}

.hero-left .hero-ctas .btn.primary:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 32px rgba(0,255,209,0.5);
}

.hero-left .hero-ctas .btn.outline {
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
}

.hero-left .hero-ctas .btn.outline:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(124,92,255,0.3);
}

/* Ссылки */
.hero-left .hero-ctas .ghost {
  color: #fff;
  font-weight: 600;
  margin-left: 10px;
  text-decoration: underline;
  text-decoration-color: rgba(124,92,255,0.4);
}

/* Подписи */
.hero-left .hero-notes .pill {
  background: linear-gradient(135deg, rgba(0,255,209,0.15), rgba(124,92,255,0.15));
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 0.9rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  margin-right: 6px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
/* Слой с блюром на весь экран */
/* Вуаль без затемнения и без backdrop-blur (прозрачная, только для анимации, если нужна) */
#blur-layer {
  position: fixed;
  inset: 0;
  background: transparent;             /* НИЧЕГО не затемняем */
  backdrop-filter: none !important;    /* критично — без backdrop-blur */
  -webkit-backdrop-filter: none !important;
  z-index: 0;
  pointer-events: none;
  animation: pulseBlur 12s ease-in-out infinite alternate; /* можно оставить или убрать */
}
/* Реальный блюр — на фоновых слоях, чтобы он был виден и под скроллбаром */
#vanta-bg,
#particles-js {
  filter: blur(4px) saturate(125%);
  -webkit-filter: blur(4px) saturate(125%);
  will-change: filter;
  transform: translateZ(0); /* помогает GPU */
}
/* VANTA фон */
#vanta-bg {
  position: fixed;
  inset: 0;
  z-index: -1;          /* слой на заднем плане */
}
/* Контент hero поверх слоя с блюром */
.section-hero, .section-hero * {
  position: relative;
  z-index: 1;
}
/* ===== Фон для "окна диалога" на главной ===== */
/* ===== FIRE GLASS SPARKS — хаотичные искры + плавный градиент + внутренний glass ===== */

/* экран (премиум glass) */
.hero-right .device-screen{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(14,18,22,.34) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.22);
}

/* === РЕГИСТРАЦИЯ переменных (для гладкой анимации по X/Y) */
@property --x1 { syntax:'<percentage>'; inherits:false; initial-value:20%; } @property --y1 { syntax:'<percentage>'; inherits:false; initial-value:110%; }
@property --x2 { syntax:'<percentage>'; inherits:false; initial-value:70%; } @property --y2 { syntax:'<percentage>'; inherits:false; initial-value:110%; }
@property --x3 { syntax:'<percentage>'; inherits:false; initial-value:40%; } @property --y3 { syntax:'<percentage>'; inherits:false; initial-value:110%; }
@property --x4 { syntax:'<percentage>'; inherits:false; initial-value:10%; } @property --y4 { syntax:'<percentage>'; inherits:false; initial-value:110%; }
@property --x5 { syntax:'<percentage>'; inherits:false; initial-value:55%; } @property --y5 { syntax:'<percentage>'; inherits:false; initial-value:110%; }
@property --x6 { syntax:'<percentage>'; inherits:false; initial-value:85%; } @property --y6 { syntax:'<percentage>'; inherits:false; initial-value:110%; }

/* СЦЕНА: градиент + искры (позади стеклянной вуали) */
.hero-right .device-screen::before{
  content:"";
  position:absolute; inset:-10%;
  border-radius: inherit;
  z-index: 0; pointer-events: none;

  /* 6 слоёв искр + плавный тёплый градиент снизу (в 3× мягче) */
  background-image:
    radial-gradient(1.8px 1.8px at 8px 12px,  rgba(255,225,175,.95) 0 80%, transparent 81%),
    radial-gradient(1.6px 1.6px at 14px 6px,   rgba(255,210,150,.92) 0 80%, transparent 81%),
    radial-gradient(1.4px 1.4px at 6px 14px,   rgba(255,200,140,.90) 0 80%, transparent 81%),
    radial-gradient(1.2px 1.2px at 10px 8px,   rgba(255,190,130,.86) 0 80%, transparent 81%),
    radial-gradient(1.1px 1.1px at 4px 10px,   rgba(255,180,120,.84) 0 80%, transparent 81%),
    radial-gradient(1.0px 1.0px at 12px 16px,  rgba(255,170,110,.82) 0 80%, transparent 81%),

    /* тёплый огонь снизу */
    radial-gradient(180% 90% at 50% 115%,
      rgba(255,156,40,.48) 0%,
      rgba(255,136,28,.32) 24%,
      rgba(255,120,20,.20) 40%,
      rgba(255,120,20,0) 60%),
    linear-gradient(to top,
      rgba(255,140,28,.34) 0%,
      rgba(140,70,26,.24) 36%,
      rgba(40,26,20,.16) 52%,
      rgba(18,20,24,.06) 64%,
      rgba(14,18,22,0) 72%);

  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;

  /* плотность искр по слоям */
  background-size:
    80px 160px, 110px 210px, 140px 260px, 95px 180px, 125px 240px, 160px 300px,
    100% 100%, 100% 100%;

  /* старт снизу; по X/Y управляют var'ы (см. анимацию ниже) */
  background-position:
    var(--x1) var(--y1), var(--x2) var(--y2), var(--x3) var(--y3),
    var(--x4) var(--y4), var(--x5) var(--y5), var(--x6) var(--y6),
    center, center;

  /* лёгкое свечение точек + общий мягкий blur сцены */
  filter:
    drop-shadow(0 0 6px rgba(255,150,60,.35))
    drop-shadow(0 0 12px rgba(255,120,0,.24))
    blur(.3px);
  mix-blend-mode: screen;

  animation:
    sparkPath1 18s linear infinite,
    sparkPath2 22s linear infinite,
    sparkPath3 26s linear infinite,
    sparkPath4 16s linear infinite,
    sparkPath5 24s linear infinite,
    sparkPath6 30s linear infinite;
  will-change: background-position, filter;
}

/* Вуаль-СТЕКЛО поверх сцены: размывает ГРАДИЕНТ+ИСКРЫ, но не контент */
.hero-right .device-screen::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  z-index: 1; pointer-events:none;
  background: rgba(255,255,255,.045);                  /* тонкая «молочная» плёнка */
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);     /* верхний hairline */
}

/* контент чата поверх всего */
.hero-right .device-screen > *{ position: relative; z-index: 2; }

/* ——— хаотичные траектории (дрейф по X, подъём по Y всегда вверх) ——— */
@keyframes sparkPath1{
  0% { --x1:18%; --y1:110%; } 20%{ --x1:30%; } 40%{ --x1:12%; }
  60%{ --x1:42%; } 80%{ --x1:22%; } 100%{ --x1:10%; --y1:-12%; }
}
@keyframes sparkPath2{
  0% { --x2:72%; --y2:110%; } 25%{ --x2:44%; } 50%{ --x2:78%; }
  75%{ --x2:32%; } 100%{ --x2:68%; --y2:-12%; }
}
@keyframes sparkPath3{
  0% { --x3:40%; --y3:110%; } 15%{ --x3:58%; } 45%{ --x3:26%; }
  70%{ --x3:62%; } 100%{ --x3:46%; --y3:-12%; }
}
@keyframes sparkPath4{
  0% { --x4:8%;  --y4:110%; } 30%{ --x4:20%; } 55%{ --x4:12%; }
  85%{ --x4:34%; } 100%{ --x4:16%; --y4:-12%; }
}
@keyframes sparkPath5{
  0% { --x5:54%; --y5:110%; } 22%{ --x5:62%; } 48%{ --x5:44%; }
  76%{ --x5:70%; } 100%{ --x5:52%; --y5:-12%; }
}
@keyframes sparkPath6{
  0% { --x6:86%; --y6:110%; } 28%{ --x6:70%; } 58%{ --x6:90%; }
  82%{ --x6:64%; } 100%{ --x6:84%; --y6:-12%; }
}

/* уважение к снижению анимаций */
@media (prefers-reduced-motion: reduce){
  .hero-right .device-screen::before{
    animation: none;
    filter: blur(.4px) drop-shadow(0 0 8px rgba(255,140,0,.28));
    background-position:
      20% 90%, 70% 88%, 40% 86%, 10% 92%, 55% 90%, 85% 88%, center, center;
  }
}
/* ===== МЕНЮ Header: стеклянная «таблетка», которая сжимается в кнопку ===== */
#site-header{
  position: relative;
  z-index: 2000;
}

#site-logo{
  position: fixed;
  top: 24px; left: 0; right: 0;
  margin: 0 auto;
  width: 86px; height: 86px;
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease, top .35s ease;
}

/* сама «таблетка» */
#site-header .glass-nav{
  position: fixed;
  left: 0; right: 0;
  top: 72px;
  width: min(480px, 92vw);
  height: 56px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transition: all .45s cubic-bezier(.2,.8,.2,1);
}

#site-header .glass-nav a{
  color:#fff; text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .4px;
  text-transform: none;
  padding: 8px 12px;
  border-radius: 12px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
  white-space: nowrap;
}
#site-header .glass-nav a:hover{
  background: rgba(0,255,209,.12);
  color: var(--accent);
  transform: translateY(-1px);
}

/* центральная круглая кнопка (появляется в «липком» режиме) */
#openmenu{
  -webkit-appearance: none; appearance: none;
  position: absolute;
  inset: 0;
  width: 52px; height: 52px;
  margin: auto; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  cursor: pointer; outline: 0;
  transform: scale(0); /* скрыта по умолчанию */
  transition: transform .35s ease .1s, border-color .2s ease;
}
#openmenu:hover{ border-color: rgba(255,255,255,.35); }
#openmenu span{
  display:block; width:40%; height:2px; margin:6px auto;
  background:#fff; transform: scaleX(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1) .25s, margin .2s ease;
}
#openmenu:hover span{ margin:10px auto; }

/* Sticky-состояние: таблетка сжимается, показываем круглую кнопку */
#site-header.sticky #site-logo{
  top: 10px; transform: scale(.8); opacity: 0;
}
#site-header.sticky .glass-nav{
  top: 12px; width: 56px; height: 56px; padding: 0;
}
#site-header.sticky .glass-nav a{
  opacity: 0; transform: scale(.9);
  padding: 0; pointer-events: none;
}
#site-header.sticky #openmenu{
  width: 28px;                 /* было 52px — в 2 раза меньше */
  height: 28px;
  transform: scale(1);         /* фиксированный размер (не увеличиваем) */
  border-radius: 999px;
}

/* полоски внутри «гамбургера» под маленький размер */
#site-header.sticky #openmenu span{
  height: 2px;
  width: 60%;
  margin: 4px auto;            /* было 6px */
}
#site-header.sticky #openmenu:hover span{
  margin: 6px auto;
}

/* Открытие меню: разворачиваем таблетку обратно и блюрим фон */
#page{
  transition: .6s transform cubic-bezier(.2,.8,.2,1), .6s filter cubic-bezier(.2,.8,.2,1), .4s opacity;
}
#page.menuopen{
  opacity: .7; filter: blur(14px); transform: scale(1.06);
}

body.menuopen #site-header{ z-index: 3000; }
body.menuopen #site-header .glass-nav{
  top: 72px; width: min(520px, 94vw); height: 64px; padding: 0 18px;
}
body.menuopen #site-header .glass-nav a{
  opacity: 1; transform: scale(1); pointer-events: auto;
}
body.menuopen #openmenu{
  border-color: rgba(255,255,255,.25);
}

/* мобилка: таблетка ниже и шире */
@media (max-width: 600px){
  #site-header .glass-nav{ top: 64px; height: 52px; width: min(360px, 96vw); }
  #site-header.sticky .glass-nav{ width: 50px; height: 50px; top: 10px; }
  #openmenu{ width: 48px; height: 48px; }
  #site-header .glass-nav a{ font-size: 12px; padding: 8px 10px; }
}
/* когда меню сжато — не перехватываем клики */
#site-header.sticky .glass-nav{ pointer-events: none; }
#site-header.sticky #openmenu{ width: 24px; height: 24px; }

/* чуть мягче наезжает на контент на маленьких экранах */
@media (max-width: 600px){
  #site-header .glass-nav{ top: 96px; }
  #site-header.sticky .glass-nav{ top: 14px; }
}
/* ↑ поднимаем иконку и ставим поверх */
#site-logo{
  position: fixed;
  top: 6px;                 /* было 24px */
  left: 0; right: 0;
  margin: 0 auto;
  width: 64px;              /* было 86px */
  height: 64px;             /* было 86px */
  z-index: 2101;            /* выше .glass-nav */
  pointer-events: none;     /* не ловит клики */
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease, top .35s ease;
}
/* === FIX: кликабельность маленькой кнопки и анимации линий === */

/* когда таблетка сжата — клики ловит только круглая кнопка */
#site-header.sticky .glass-nav{ pointer-events: none; }
#site-header.sticky #openmenu{
  pointer-events: auto;
  width: 40px;                 /* фиксируем размер, чтобы не перебивалось старыми правилами */
  height: 40px;
}

/* базовое состояние линий: "рисуются" из нуля */
#site-header #openmenu span{
  transform-origin: center;
  transform: scaleX(0);
  opacity: 0.95;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease,
    margin .2s ease;
}

/* при появлении sticky — линии вырастают (знак "=") */
#site-header.sticky #openmenu span{
  transform: scaleX(1);
}

/* ховер — лёгкое расхождение */
#site-header.sticky #openmenu:hover span{ margin: 6px auto; }

/* открытое меню: превращаем две линии в крестик */
body.menuopen #site-header #openmenu span:nth-child(1){
  transform: translateY(5px) rotate(45deg);
}
body.menuopen #site-header #openmenu span:nth-child(2){
  transform: translateY(-5px) rotate(-45deg);
}
/* Чуть поднять меню во всех состояниях (включая sticky/open) */
/*  сдвиг меню вверх */
#site-header .glass-nav{ transform: translateY(-30px); }

/* но в sticky кнопка — без сдвига */
#site-header.sticky .glass-nav{ transform: translateY(0); }

/* (опционально) когда меню открыто и не sticky — оставляем сдвиг */
body.menuopen #site-header .glass-nav{ transform: translateY(-30px); }
/* Секция "Что такое Telegram-боты?" */
/* Заголовок */
.glow-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 28px;
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.glow-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  opacity: 0.8;
}

/* Акцентные слова */
.ai-text {
  color: var(--accent);
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Сетка */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin: 60px 0;
}

.ai-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  text-align: center;
  backdrop-filter: blur(6px);
}

.ai-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.75);
}

.ai-card h3 {
  margin-top: 12px;
  font-size: 1.25rem;
  font-weight: 600;
}

.ai-card p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-top: 6px;
}

.ai-icon {
  font-size: 2.4rem;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
}
/* Прогресс-блок */
.ai-progress {
  margin: 60px auto;
  max-width: 720px;
  text-align: left;
}

.ai-progress h3 {
  margin-bottom: 28px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.progress-item {
  margin-bottom: 20px;
}

.progress-item span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
}

.progress-item .bar {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.progress-item .bar div {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px rgba(0,255,209,0.35);
  transition: width 1.4s cubic-bezier(.4,0,.2,1);
}

/* CTA */
.cta-ai {
  margin-top: 80px;
  padding: 40px 30px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,255,209,0.05), rgba(124,92,255,0.05));
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  box-shadow: 0 28px 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
}

.cta-ai h3 {
  margin-bottom: 16px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.cta-ai p {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}
/* 📌 Секция "Что такое Telegram-боты?" */
/* Заголовок */
.glow-title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 32px;
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.glow-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  opacity: 0.85;
}

/* Подзаголовок */
#about-bots .lead {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--muted);
}

.ai-text {
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 🔲 Карточки в сетке */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin: 50px auto 70px;
}

.ai-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 32px 26px;
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.55);
  text-align: center;
  backdrop-filter: blur(8px);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ai-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.75);
}

.ai-icon {
  font-size: 2.6rem;
  margin-bottom: 14px;
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-card h3 {
  margin-top: 12px;
  font-size: 1.25rem;
  font-weight: 600;
}

.ai-card p {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

/* 📊 Прогресс-блок */
.ai-progress {
  margin: 70px auto;
  max-width: 800px;
  padding: 0 10px;
}

.ai-progress h3 {
  margin-bottom: 28px;
  font-size: 1.45rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  letter-spacing: -0.01em;
}

.progress-item {
  margin-bottom: 22px;
}

.progress-item span {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}

.progress-item .bar {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  overflow: hidden;
}

.progress-item .bar div {
  width: 0; /* старт */
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px rgba(0,255,209,0.35);
  transition: width 1.4s cubic-bezier(.4,0,.2,1);
}

/* 🚀 CTA */
.cta-ai {
  margin-top: 90px;
  padding: 50px 40px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0,255,209,0.07), rgba(124,92,255,0.07));
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
}

.cta-ai h3 {
  margin-bottom: 18px;
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff;
}

.cta-ai p {
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.progress-item .bar div {
  width: 0; /* всегда 0 при старте анимация в js */
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(0,255,209,0.3);
  transition: width 1.6s cubic-bezier(.4,0,.2,1);
}
/* Вспыхивание баров в этом разделе */
.progress-item .bar div::after {
  content: "";
  display: block;
  height: 100%;
  width: 20px;
  background: rgba(255,255,255,0.8);
  filter: blur(8px);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  animation: shine 2s infinite;
}

@keyframes shine {
  0%   { transform: translateX(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateX(300%); opacity: 0; }
}
/* Анимация эмодзи в этой секции */
.ai-icon {
  font-size: 2.6rem;
  position: relative;
  display: inline-block;
  color: transparent; 
  -webkit-text-stroke: 1.4px var(--accent); /* контур */
  text-shadow: 0 0 8px rgba(0,255,209,0.5), 0 0 14px rgba(124,92,255,0.4);
  animation: iconFloat 6s ease-in-out infinite, iconGlow 4s ease-in-out infinite alternate;
}

/* «аура» позади */
.ai-icon::after {
  content: attr(data-emoji);
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: inherit;
  opacity: 0.15;
  filter: blur(10px);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: iconAura 7s ease-in-out infinite alternate;
}
/* Иконка в заголовке */
.hero-icon {
  font-size: 2.8rem;
  margin-right: 8px;
  vertical-align: middle;
  -webkit-text-stroke: 1.5px var(--accent);
  text-shadow: 0 0 10px rgba(0,255,209,0.5), 0 0 18px rgba(124,92,255,0.4);
  animation: iconFloat 7s ease-in-out infinite, iconGlow 5s ease-in-out infinite alternate;
}

.hero-icon::after {
  opacity: 0.2;
  filter: blur(12px);
}
/* Плавное покачивание вверх-вниз */
@keyframes iconFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Свечение */
@keyframes iconGlow {
  0% { text-shadow: 0 0 6px rgba(0,255,209,0.4), 0 0 12px rgba(124,92,255,0.3); }
  100% { text-shadow: 0 0 12px rgba(0,255,209,0.7), 0 0 22px rgba(124,92,255,0.6); }
}

/* Аура */
@keyframes iconAura {
  0% { opacity: 0.1; transform: scale(1); }
  100% { opacity: 0.25; transform: scale(1.15); }
}
/* Заголовок перед карточками "Что такое Telegram боты?" */
:root{
  --oai-ink: #eef6f4;
  --oai-accent-1: #10a37f;
  --oai-accent-2: #22d3ee;
}

.oai-title{
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  isolation: isolate;
}

.oai-icon{
  position: relative;
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  /* мягкое свечение за иконкой */
}
.oai-icon::before{
  content:"";
  position:absolute; inset:-18%;
  background:
    radial-gradient(60% 60% at 30% 25%, rgba(34,211,238,.18), transparent 65%),
    radial-gradient(60% 60% at 70% 75%, rgba(16,163,127,.22), transparent 65%);
  filter: blur(10px);
  opacity: .8;
  border-radius: inherit;
}
.oai-icon-sv{ width:100%; height:100%; display:block; }

.oai-stroke{
  fill: none;
  stroke: url(#oaiGrad);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .95;
  filter: drop-shadow(0 8px 24px rgba(16,163,127,.22));
  transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1);
}
.oai-stroke.d2{ transition-duration: 1.05s; transition-delay: .12s; }

.oai-spark circle{
  fill: url(#oaiGrad);
  opacity: 0;
  transform-origin: center;
  animation: oaiSpark 2.6s ease-out infinite;
}
.oai-spark circle:nth-child(2){ animation-delay: 1.2s; }

@keyframes oaiSpark{
  0%   { opacity: 0; transform: scale(.6); }
  20%  { opacity: .9; }
  60%  { opacity: .25; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.9); }
}

.oai-text{
  margin: 0;
  color: var(--oai-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(28px, 3.8vw, 48px);
}
.oai-text span{
  background: linear-gradient(90deg, var(--oai-accent-1), var(--oai-accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: oaiShimmer 10s linear infinite;
}
@keyframes oaiShimmer{ from{ background-position: 0 0; } to{ background-position: 200% 0; } }

/* подчёркивание с появлением */
.oai-text::after{
  content:"";
  display:block;
  height: 2px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--oai-accent-1), var(--oai-accent-2));
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  opacity: .95;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}

/* включаем отрисовку при попадании в вьюпорт */
.oai-title.is-live .oai-stroke{ stroke-dashoffset: 0; }
.oai-title.is-live .oai-text::after{ transform: scaleX(1); }

/* hover: лёгкий поворот узла */
.oai-title:hover .oai-icon-sv{ transform: rotate(6deg); transition: transform .6s ease; }

@media (prefers-reduced-motion: reduce){
  .oai-stroke,
  .oai-text::after,
  .oai-spark circle,
  .oai-icon-sv{ transition: none !important; animation: none !important; }
}
/* Центрируем Заголовок */
#about-bots .oai-title{
  justify-content: center;  /* центрируем иконку+текст внутри строки */
  width: 100%;
}
#about-bots .oai-text{ text-align: center; } /* чтобы подчеркивание шло по центру */
/* Чуть приподнять иконку относительно текста */
#about-bots .oai-icon{
  transform: translateY(-10px);
}
/* === Карусель «Что такое Telegram-боты?» */
.bots-carousel{
  --bc-accent:#00ffd1;
  --bc-bg: rgba(255,255,255,0.06);
  --bc-bg-hover: rgba(255,255,255,0.10);
  --bc-text: #e8f7f4;
  position: relative;
  margin-top: 24px;
  padding: 8px 56px;
}
.bots-carousel .bc-viewport{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.bots-carousel .bc-slide[hidden]{ display:none !important; }
.bots-carousel .bc-slide{ display: contents; }

.bc-card{
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  background: var(--bc-bg);
  color: var(--bc-text);
  padding: 22px 18px 20px;
  min-height: 160px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .35s ease, filter .35s ease, background .35s ease, opacity .35s ease;
  filter: grayscale(.8) saturate(.6) brightness(.95) opacity(.9);
  transform: translateY(2px) scale(.98);
}
.bc-card:hover{
  background: var(--bc-bg-hover);
  filter: none;
  transform: translateY(0) scale(1);
}
/* === SVG-эмодзи: отрисовка при ховере === */
.bc-emoji{
  position: relative;
  width: 56px; height: 56px;
  display: inline-grid; place-items: center;
  margin-bottom: 6px;
  transition: transform .35s ease, filter .35s ease, text-shadow .35s ease;
  filter: grayscale(1) opacity(.9);
}
.bc-card:hover .bc-emoji{
  filter: none;
  transform: translateY(-2px) rotate(-2deg) scale(1.05);
  text-shadow: 0 6px 18px rgba(0,255,209,.35);
}
.emoji-draw{ width: 56px; height: 56px; display:block; }
.emoji-draw *{ vector-effect: non-scaling-stroke; }

/* Кольцо вокруг эмодзи — рисуем штрихом */
.emoji-draw .ring{
  fill: none;
  stroke: var(--bc-accent);
  stroke-width: 2.1;
  opacity: .45;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s ease;
}

/* Контуры эмодзи */
.emoji-draw .stroke{
  fill: none;
  stroke: var(--bc-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .55s ease;
}
/* Только контуры — без заливки */
.emoji-draw .fill{
  fill: none !important;       /* ключевое: никакой заливки */
  fill-opacity: 0 !important;  /* на всякий случай */
  stroke: none;                 /* чтобы этот слой не рисовал контур */
  transition: none;             /* анимация заливки не нужна */
  pointer-events: none;         /* не ловит курсор */
}

/* Ступенчатая задержка для штрихов (мягкая "прорисовка") */
.emoji-draw .d1{ transition-delay: .00s; }
.emoji-draw .d2{ transition-delay: .05s; }
.emoji-draw .d3{ transition-delay: .10s; }
.emoji-draw .d4{ transition-delay: .15s; }
.emoji-draw .d5{ transition-delay: .20s; }
.emoji-draw .d6{ transition-delay: .25s; }

/* Активное состояние карточки */
.bc-card:hover .emoji-draw .ring,
.bc-card:hover .emoji-draw .stroke{
  stroke-dashoffset: 0;
}
.bc-card:hover .emoji-draw .fill{
  fill-opacity: 1;
}

.bc-title{
  margin: 10px 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}
.bc-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  opacity: .9;
}

/* "Отрисовка" контура карточки при ховере */
.stroke{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.stroke svg{ width: 100%; height: 100%; display:block; }
.stroke rect{
  fill: none;
  stroke: var(--bc-accent);
  stroke-width: 1.6;
  opacity: .45;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .6s ease;
}
.bc-card:hover .stroke rect{ stroke-dashoffset: 0; }

/* Стрелки */
.bc-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(15,15,20,.45);
  color: #f1fff9;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .25s ease, transform .2s ease, opacity .2s ease;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.bc-arrow:hover{ background: rgba(15,15,20,.7); transform: translateY(-50%) scale(1.05); }
.bc-left{ left: 6px; }
.bc-right{ right: 6px; }
.bc-arrow[disabled]{ opacity: .4; cursor: not-allowed; }

/* Частицы (эффект улёта) */
.bc-particle{
  position: absolute;
  border-radius: 999px;
  background: var(--bc-accent);
  opacity: .8;
  pointer-events: none;
  mix-blend-mode: screen;
}

@media (max-width: 960px){
  .bots-carousel{ padding: 8px 46px; }
  .bots-carousel .bc-viewport{ grid-template-columns: 1fr; }
}
@media (min-width: 961px) and (max-width: 1280px){
  .bots-carousel .bc-viewport{ grid-template-columns: repeat(2,1fr); }
}
/* ── Одна «внимательная» точка в правом верхнем углу карточек */
.bots-carousel .bc-card{ position: relative; }

.bots-carousel .bc-card::after{
  /* настраиваемые переменные */
  --dot: var(--bc-accent);      /* цвет точки */
  --dot-rgb: 0,255,209;         /* тот же цвет в RGB для теней */
  --offset-top: 22px;           /* отступ сверху */
  --offset-right: 22px;         /* отступ справа */
  --size: 8px;                  /* размер точки */

  content: "";
  position: absolute;
  top: var(--offset-top);
  right: var(--offset-right);
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: var(--dot);
  box-shadow:
    0 0 0 0 rgba(var(--dot-rgb), 0),      /* «волна» будет расширяться из этого */
    0 0 12px rgba(var(--dot-rgb), .30);   /* мягкое свечение вокруг точки */
  pointer-events: none;
  z-index: 2;
  animation: bcDotPulse 2.8s ease-out infinite; /* мягкий пульс для привлечения внимания */
  will-change: transform, box-shadow;
}

/* Чуть быстрее пульс при ховере карточки */
.bots-carousel .bc-card:hover::after{
  animation-duration: 1.6s;
}

@keyframes bcDotPulse{
  0%{
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(var(--dot-rgb), .55),  /* стартовая волна видна */
      0 0 12px rgba(var(--dot-rgb), .35);
  }
  70%{
    transform: scale(1.08);               /* лёгкое «дыхание» точки */
    box-shadow:
      0 0 0 12px rgba(var(--dot-rgb), 0), /* волна расширилась и растворилась */
      0 0 18px rgba(var(--dot-rgb), .32);
  }
  100%{
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(var(--dot-rgb), 0),
      0 0 12px rgba(var(--dot-rgb), .30);
  }
}
/* Показывать наши стрелки только внутри карусели */
.bc-arrow { display: none !important; }
.bots-carousel .bc-arrow { display: grid !important; }

/* На всякий случай гасим стрелки Swiper в этой секции */
#about-bots .swiper-button-next,
#about-bots .swiper-button-prev {
  display: none !important;
}
/* Уважение к настройкам системы: без анимации, если пользователь выключил движения */
@media (prefers-reduced-motion: reduce){
  .bots-carousel .bc-card::after{ animation: none; }
}
/* НИЖНИЙ БЛОК НА ВКЛАДКЕ "Что такое телеграмм боты?" - "Включите ИИ в свой бизнес уже сегодня" */
.cta-ai{
  /* Тонкая настройка тематики */
  --cta-r: 22px;
  --cta-ac1: #10a37f;   /* тёплый изумруд */
  --cta-ac2: #22d3ee;   /* холодный бирюзовый */
  --cta-ink: #f3f7f6;   /* основной текст */
  --cta-ink-sub: rgba(243,247,246,.85);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--cta-r);
  padding: clamp(22px, 2.6vw, 34px);
  color: var(--cta-ink);
  text-align: center;
  max-width: 980px;
  margin-inline: auto;

  /* Премиум-«стекло» с мягкой глубиной (без лишних эффектов) */
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(16,163,127,.14), transparent 62%),
    radial-gradient(120% 100% at 100% 0%, rgba(34,211,238,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 42%, rgba(0,0,0,.06)),
    rgba(10,14,15,.55);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    0 28px 68px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Статичная тонкая градиентная рамка по контуру — без вращений */
.cta-ai::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1.2px; /* толщина рамки */
  background: conic-gradient(from 0deg, var(--cta-ac1), var(--cta-ac2), var(--cta-ac1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Деликатная «сеточка» и отблески внутри, еле заметные */
.cta-ai::before{
  content:"";
  position:absolute; inset:1px;
  border-radius: calc(var(--cta-r) - 1px);
  background:
    radial-gradient(80% 60% at 18% 0%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(70% 60% at 84% 30%, rgba(16,163,127,.14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 28px);
  opacity: .6;
  pointer-events: none;
}

/* Типографика: благородно и читабельно */
.cta-ai h3{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.15;
  background: linear-gradient(90deg, var(--cta-ac1), var(--cta-ac2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.cta-ai p{
  margin: 0 0 22px;
  color: var(--cta-ink-sub);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Кнопка: плотная, дорогая, без бликов и «цирка» */
.cta-ai .btn.primary{
  --btn-r: 12px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--btn-r);
  border: 0;
  background: linear-gradient(90deg, var(--cta-ac1), var(--cta-ac2));
  background-size: 200% 100%;
  color: #041311;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow:
    0 16px 38px rgba(16,163,127,.34),
    0 0 0 1px rgba(255,255,255,.16) inset,
    inset 0 -8px 16px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, background-position .38s ease, filter .18s ease;
  cursor: pointer;
  will-change: transform, background-position, box-shadow;
}
.cta-ai .btn.primary:hover{
  transform: translateY(-1px);
  background-position: 100% 0;          /* лёгкий перелив вместо бликов */
  box-shadow:
    0 22px 50px rgba(34,211,238,.28),
    0 0 0 1px rgba(255,255,255,.20) inset,
    inset 0 -8px 16px rgba(0,0,0,.20);
  filter: saturate(1.02);
}
.cta-ai .btn.primary:active{
  transform: translateY(0);
  box-shadow:
    0 12px 24px rgba(16,163,127,.28),
    0 0 0 1px rgba(255,255,255,.18) inset,
    inset 0 -6px 12px rgba(0,0,0,.24);
}
.cta-ai .btn.primary:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(34,211,238,.25),
    0 0 0 1px rgba(255,255,255,.22) inset,
    inset 0 -8px 16px rgba(0,0,0,.2);
}

/* Лёгкая стрелка на кнопке — без доп. HTML */
.cta-ai .btn.primary::after{
  content: "→";
  font-weight: 900;
  opacity: .9;
  transform: translateX(0);
  transition: transform .18s ease, opacity .18s ease;
}
.cta-ai .btn.primary:hover::after{
  transform: translateX(2px);
  opacity: 1;
}

/* Компактное поведение на узких экранах */
@media (max-width: 560px){
  .cta-ai{ padding: 18px; }
  .cta-ai .btn.primary{ width: 100%; }
}

/* Уважение к reduce motion */
@media (prefers-reduced-motion: reduce){
  .cta-ai, .cta-ai .btn.primary{ transition: none !important; }
}
/* ЭМОДЗИ РАКЕТЫ В ЭТОМ БЛОКЕ */
.cta-rocket-title{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-weight: 800;
}

.rk-icon{
  width: 1.25em; height: 1.25em;
  display: inline-grid; place-items: center;
  translate: 0 .02em;          /* тонкая выравниловка по базовой линии */
}
.rk-svg{ width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

/* Контур “рисуется” */
.rk-stroke{
  fill: none;
  stroke: rgba(255,255,255,.95);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .65s ease;
}
.rk-stroke.d2{ transition-delay: .06s; }
.rk-stroke.d3{ transition-delay: .12s; }
.rk-stroke.d4{ transition-delay: .18s; }

/* Заливка проявляется после контура */
.rk-fill{ opacity: 0; transition: opacity .35s ease .25s; }

/* Активируем при появлении (см. JS) */
.cta-rocket-title.is-rocket-live .rk-stroke{ stroke-dashoffset: 0; }
.cta-rocket-title.is-rocket-live .rk-fill{ opacity: 1; }

/* Еле заметная “жизнь” в пламени — без дешёвых бликов */
.cta-rocket-title.is-rocket-live .rk-flame{
  animation: rkFlicker 1.6s ease-in-out infinite alternate;
}
@keyframes rkFlicker{
  from{ filter: drop-shadow(0 3px 8px rgba(255,140,0,.35)); }
  to  { filter: drop-shadow(0 6px 14px rgba(255,80,0,.5)); }
}

/* Уважение к reduce motion */
@media (prefers-reduced-motion: reduce){
  .rk-stroke, .rk-fill{ transition: none !important; }
  .rk-flame{ animation: none !important; }
}
/* по центру этот блок и ограничить ширину */
.cta-ai{ max-width: 860px; margin-inline: auto; }

/* СЕКЦИЯ АВТОМАТИЧЕСКОЕ ДОБАВЛЕНИЕ ОТЗЫВОВ ИЗ ТГ НА САЙТ */
.review {
  padding: 12px;
  margin: 8px 0;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  color: #fff;
}
/* ========== СКРОЛЛБАР premium ========== */
/* ========== Split Capsule — high-contrast minimal ========== */
::-webkit-scrollbar{
  width: 12px;               /* чуть толще = лучше видимость */
  height: 12px;
}

::-webkit-scrollbar-track{
  background: transparent;
  /* тонкий внутренний «желоб», чтобы отделить от фона */
  box-shadow: inset 1px 0 0 rgba(255,255,255,.06);
}

::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 3px solid transparent;     /* оптический зазор от трека */
  background-clip: padding-box;

  /* тело бегунка + центральный hairline-разрез */
  background:
    linear-gradient(180deg, #343a40, #1b2127),                                  /* светлее графит */
    linear-gradient(180deg, transparent 0 46%, rgba(255,255,255,.20) 46% 54%, transparent 54% 100%);
  background-blend-mode: overlay;

  /* контур для контраста + лёгкие внутренние тени */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.14);       /* внешний hairline-обводка */
  transition: box-shadow .2s ease, filter .2s ease, transform .12s ease;
}

::-webkit-scrollbar-thumb:hover{
  /* без неона — только аккуратный акцент-кольцо */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.18),
    0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
  filter: saturate(1.03);
}

::-webkit-scrollbar-thumb:active{
  transform: scale(.985);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.68),
    0 0 0 1px rgba(255,255,255,.18),
    0 0 0 2px color-mix(in srgb, var(--accent-2) 16%, transparent);
}

::-webkit-scrollbar-corner{ background: transparent; }

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: #2b3238 transparent; /* бегунок / трек */
}

/* компактнее на узких экранах */
@media (max-width: 560px){
  ::-webkit-scrollbar{ width: 10px; height: 10px; }
}
/* ссылки-кнопки без подчёркиваний В ЗАГОЛОВКЕ И В ЧТО ТАКОЕ БОТЫ */
a.btn { text-decoration: none; }
a.btn:hover, a.btn:focus { text-decoration: none; }

/* === MOBILE STABILITY KIT — append-only ПАТЧ НА МОБИЛЬНЫЕ УСТРОЙСТВА === */
/* === MOBILE HOTFIX v2 (≤600px) — blur оставляем, меню не наезжает, якоря, TG === */
@media (max-width: 600px){
  /* таблетка зафиксирована, не «ныряет» и не перекрывает контент */
  #site-header .glass-nav{
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    transform: none !important;
    width: min(92vw, 420px) !important;
    height: 52px !important;
    z-index: 3000 !important;
  }
  #site-header.sticky .glass-nav{
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    transform: none !important;
  }
  #openmenu{ width: 40px !important; height: 40px !important; }

  /* запас сверху под фикс-меню */
  .section-hero{
    padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
  }

  /* якоря не попадают под меню */
  #hero,
  .tab-section{
    scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px) + 10px) !important;
  }

  /* карточки/макет под узкие экраны */
  .cards{ grid-template-columns: 1fr; }
  .hero-right{ flex-basis: auto; max-width: 92vw; }
  .device-mock{ width: 92vw; }

  /* CTA: «Узнать больше →» в одну строку */
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .hero-ctas .ghost{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

  /* 🔙 вернули мягкий блюр фона (без тяжёлых эффектов) */
  #vanta-bg, #particles-js{
    filter: blur(4px) saturate(125%) !important;
    -webkit-filter: blur(4px) saturate(125%) !important;
    max-width: 100vw; overflow: hidden;   /* страховка от гориз. скролла */
  }
  /* анимации «искр» внутри макапа — off ради FPS */
  .hero-right .device-screen::before,
  .hero-right .device-screen::after{ animation: none !important; }

  /* меню/модалка — без масштабов/блюров контента, чтобы не дёргалось */
  #page.menuopen{ transform:none !important; filter:none !important; opacity:1 !important; }
  body.menuopen, body.modalopen{ overflow:hidden; touch-action:none; }

  /* виджет Telegram: растягиваем на всю ширину и задаём минимальную высоту-каркас */
  #reviews #tg-reviews{ width:100% !important; min-height:260px; }
  #reviews iframe{ width:100% !important; max-width:100% !important; }

  /* кликабельные кнопки без подчёркиваний */
  a.btn, .btn a{ text-decoration:none !important; }
}

/* Жестко возвращаем десктопное поведение */
@media (min-width: 601px){
  #hero, .tab-section{ scroll-margin-top: 0 !important; }
  #page.menuopen{ transform: scale(1.06) !important; filter: blur(14px) !important; opacity: .7 !important; }
  body.menuopen, body.modalopen{ overflow:auto !important; }
}
/* === MOBILE TWEAKS (≤600px) — стрелки карусели, секция отзывов скрыта === */
@media (max-width: 600px){
  /* на всякий случай, чтобы SVG-стрелки всегда рисовались на iOS */
  .bots-carousel .bc-arrow svg path{
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* секцию отзывов на телефонах прячем (кнопка в меню ведёт в канал) */
  #reviews{ display: none !important; }
}
/* гарант отображения активной вкладки на телефонах */
@media (max-width: 600px){
  .tab-section.active{ display: block !important; }
}
/* AOS иногда держит блоки невидимыми — на мобилке форсим видимость только у топ-продаж */
@media (max-width: 600px){
  #top-sales[data-aos],
  #top-sales [data-aos]{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}