/* ════════════════════════════════════════════════════════════════════
   targetolog.css — собственный слой страницы /ai-targetolog/.

   Зачем отдельный файл: до 06.08.2026 страница жила на дефолтных классах
   общего бандла (page-hero / works / pricing) — тот же скелет, что на 70
   других страницах. У /sayty/ свой слой есть, у рекламы не было, поэтому
   она и читалась как заготовка. Здесь тот же визуальный язык (тёмный
   navy + лайм, Geist в теле, Unbounded в заголовках), но своя пластика.

   Префикс .tg- — чтобы ничего не пересеклось с .sy- (/sayty/) и с бандлом.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --tg-l:      #CDFF4F;          /* лайм — акцент бренда */
  --tg-l2:     #a7e33f;
  --tg-mint:   #31e0b0;
  --tg-red:    #ff7a7a;
  --tg-bg:     #0A0E1A;
  --tg-surf:   rgba(255,255,255,.025);
  --tg-line:   rgba(255,255,255,.08);
  --tg-line-2: rgba(255,255,255,.14);
  --tg-txt:    #E7EAF0;
  --tg-soft:   #c2ccd9;
  --tg-mut:    #8792a3;

  --tg-fs-h1:   clamp(38px, 5.2vw, 64px);
  --tg-fs-h2:   clamp(27px, 3.5vw, 45px);
  --tg-fs-lead: clamp(16.5px, 1.45vw, 19px);
  --tg-sec-y:   clamp(76px, 9.5vw, 140px);
  --tg-head-mb: clamp(40px, 5.5vw, 72px);
}

@media (max-width: 640px) {
  :root { --tg-sec-y: 54px; --tg-head-mb: 30px; }
}

/* ─── каркас ─── */
.tg { color: var(--tg-txt); }
.tg-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tg-section { padding: var(--tg-sec-y) 0; position: relative; }
.tg-section--band {
  background: linear-gradient(180deg, rgba(255,255,255,.019), rgba(255,255,255,.004));
  border-block: 1px solid var(--tg-line);
}
#kak, #tarify, #demo, #faq, #zayavka, #pochemu, #o-kompanii { scroll-margin-top: 88px; }

/* фон: спокойная аврора, без «полотна из частиц» как было раньше */
.tg-bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--tg-bg); }
.tg-bgfx::after {
  content: ''; position: absolute; inset: -30%;
  background:
    radial-gradient(40% 36% at 78% 8%,  rgba(205,255,79,.20), transparent 60%),
    radial-gradient(36% 34% at 6% 26%,  rgba(49,224,176,.15), transparent 60%),
    radial-gradient(40% 40% at 46% 92%, rgba(126,104,255,.12), transparent 60%);
  filter: blur(34px);
  animation: tgAurora 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes tgAurora {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-3%,2.5%) scale(1.08); }
  100% { transform: translate(2.5%,-2%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .tg-bgfx::after { animation: none; } }

/* ─── reveal ─── */
.tg-rev {
  opacity: 0; transform: translateY(22px); filter: blur(6px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}
.tg-rev.in { opacity: 1; transform: none; filter: none; }
.tg-rev[data-d="1"] { transition-delay: .08s }
.tg-rev[data-d="2"] { transition-delay: .16s }
.tg-rev[data-d="3"] { transition-delay: .24s }
.tg-rev[data-d="4"] { transition-delay: .32s }
.tg-rev[data-d="5"] { transition-delay: .40s }
@media (prefers-reduced-motion: reduce) { .tg-rev { opacity: 1; transform: none; filter: none; transition: none; } }

/* Первый экран не ждёт JS: если IntersectionObserver не отработал или скрипт
   не загрузился на медленной мобилке, текст всё равно виден. */
.tg-hero .tg-rev { opacity: 1; transform: none; filter: none; animation: tgHeroIn .7s cubic-bezier(.2,.7,.2,1) both; }
.tg-hero .tg-rev[data-d="1"] { animation-delay: .05s }
.tg-hero .tg-rev[data-d="2"] { animation-delay: .11s }
.tg-hero .tg-rev[data-d="3"] { animation-delay: .17s }
.tg-hero .tg-rev[data-d="4"] { animation-delay: .23s }
.tg-hero .tg-rev[data-d="5"] { animation-delay: .29s }
@keyframes tgHeroIn { from { opacity: 0; transform: translateY(20px); filter: blur(6px) } to { opacity: 1; transform: none; filter: none } }
@media (prefers-reduced-motion: reduce) { .tg-hero .tg-rev { animation: none } }

/* ─── типографика ─── */
.tg-h1 {
  font-family: 'Unbounded', var(--font-display, sans-serif);
  font-weight: 800; font-size: var(--tg-fs-h1);
  line-height: 1.02; letter-spacing: -.035em; margin: 0;
}
.tg-h1 em { font-style: normal; color: var(--tg-l); }
.tg-h2 {
  font-family: 'Unbounded', var(--font-display, sans-serif);
  font-weight: 700; font-size: var(--tg-fs-h2);
  line-height: 1.05; letter-spacing: -.028em; margin: 0;
}
.tg-h2 em { font-style: normal; color: var(--tg-l); }
.tg-lead { color: var(--tg-soft); font-size: var(--tg-fs-lead); line-height: 1.6; margin: 22px 0 0; max-width: 52ch; }
.tg-sub  { color: var(--tg-soft); font-size: clamp(15.5px,1.35vw,18px); line-height: 1.6; max-width: 56ch; margin: 18px auto 0; }
.tg-head { margin-bottom: var(--tg-head-mb); text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }
.tg-head--left { text-align: left; margin-left: 0; max-width: 46ch; }
.tg-head--left .tg-sub { margin-left: 0; }
.tg-kicker {
  font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tg-mut); margin-bottom: 14px;
}

/* ─── кнопки ─── */
.tg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body, sans-serif); font-weight: 700; font-size: 15px;
  padding: 15px 26px; border-radius: 14px; cursor: pointer; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  transition: transform .2s cubic-bezier(.2,1,.3,1), box-shadow .3s ease, background .2s, border-color .2s;
}
.tg-btn--main {
  background: linear-gradient(135deg, var(--tg-l), var(--tg-l2)); color: #08130a;
  box-shadow: 0 10px 34px -8px rgba(205,255,79,.55), 0 1px 0 rgba(255,255,255,.35) inset;
}
.tg-btn--main:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 18px 50px -10px rgba(205,255,79,.7), 0 1px 0 rgba(255,255,255,.45) inset; }
.tg-btn--ghost { background: rgba(255,255,255,.03); color: var(--tg-txt); border-color: var(--tg-line); }
.tg-btn--ghost:hover { transform: translateY(-2px); border-color: rgba(205,255,79,.45); background: rgba(205,255,79,.05); }
.tg-btn--lg { padding: 17px 30px; font-size: 16px; border-radius: 15px; }
.tg-btn--full { width: 100%; }
.tg-btn:active { transform: translateY(0) scale(.985); }

/* ─── хлебные крошки ─── */
.tg-crumb { padding-top: 104px; font-size: 13px; color: var(--tg-mut); }
.tg-crumb a { color: var(--tg-mut); text-decoration: none; }
.tg-crumb a:hover { color: var(--tg-l); }
.tg-crumb span { opacity: .5; margin: 0 4px; }

/* ══════════════ HERO ══════════════ */
.tg-hero { padding: 40px 0 clamp(60px,7vw,110px); }
.tg-hero__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap: clamp(30px,4vw,64px); align-items: center; }

.tg-pricebar { display: flex; align-items: flex-start; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.tg-pricepill {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 20px;
  color: var(--tg-l); border: 1px solid rgba(205,255,79,.3); background: rgba(205,255,79,.06);
  padding: 9px 17px; border-radius: 999px; white-space: nowrap;
}
.tg-pricepill b { font-weight: 800; font-size: 25px; }
.tg-pricepill i { font-style: normal; font-size: 15px; opacity: .75; }
.tg-pricepill__note { flex: 1 1 240px; min-width: 220px; color: var(--tg-mut); font-size: 13.5px; line-height: 1.55; }

.tg-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.tg-guar { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 13.5px; color: var(--tg-mut); }
.tg-guar__i { display: inline-flex; align-items: center; gap: 7px; }
.tg-guar__i svg { width: 15px; height: 15px; color: var(--tg-l); }
.tg-guar__i b { color: var(--tg-txt); font-weight: 600; }

.tg-ben { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; margin-top: 26px; }
.tg-ben__i { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--tg-soft); }
.tg-ben__i svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--tg-l); }

/* ─── мок: браузер + путь заявки ─── */
.tg-hero__right { position: relative; }
.tg-mock { position: relative; }
.tg-browser {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--tg-line-2);
  background: #0d1119; box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.tg-browser__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #131a27; border-bottom: 1px solid rgba(255,255,255,.06); }
.tg-dots { display: flex; gap: 6px; }
.tg-dots span { width: 9px; height: 9px; border-radius: 50%; background: #2b3446; }
.tg-dots span:first-child { background: #ff5f57 } .tg-dots span:nth-child(2) { background: #febc2e } .tg-dots span:nth-child(3) { background: #28c840 }
.tg-browser__url {
  flex: 1; text-align: center; font-family: var(--font-mono, monospace); font-size: 11.5px;
  color: #7d8798; background: #0d1119; border-radius: 7px; padding: 5px 12px;
}
.tg-browser__view { position: relative; aspect-ratio: 4/3.1; overflow: hidden; }

.tg-screen { position: absolute; inset: 0; padding: 18px 18px 0; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.tg-screen.is-on { opacity: 1; transform: none; }

/* поисковая выдача */
.tg-search {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px;
  background: #161d2b; border: 1px solid rgba(255,255,255,.08); font-size: 13px; color: var(--tg-txt); min-height: 40px;
}
.tg-search svg { width: 15px; height: 15px; color: #6f7a8c; flex-shrink: 0; }
.tg-caret { display: inline-block; width: 1.5px; height: 15px; background: var(--tg-l); animation: tgBlink 1s steps(2) infinite; }
@keyframes tgBlink { 50% { opacity: 0 } }

.tg-serp__ad {
  margin-top: 14px; padding: 13px 14px; border-radius: 11px;
  border: 1px solid rgba(205,255,79,.22); background: rgba(205,255,79,.05);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.tg-serp__ad.is-hot { border-color: rgba(205,255,79,.6); box-shadow: 0 0 0 3px rgba(205,255,79,.10), 0 14px 34px -18px rgba(205,255,79,.5); transform: translateY(-1px); }
.tg-serp__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tg-serp__label { font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #08130a; background: var(--tg-l); border-radius: 4px; padding: 2px 5px; }
.tg-serp__host { font-size: 11px; color: #7d8798; }
.tg-serp__title { font-size: 14px; font-weight: 700; line-height: 1.3; color: #b8d8ff; }
.tg-serp__text { font-size: 11.5px; line-height: 1.45; color: var(--tg-mut); margin-top: 5px; }
.tg-serp__ext { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tg-serp__ext span { font-size: 10px; color: var(--tg-mut); border: 1px solid var(--tg-line); border-radius: 5px; padding: 2px 6px; }

.tg-serp__org { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; opacity: .5; }
.tg-skel { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.07); }
.tg-skel--t { height: 10px; width: 62%; background: rgba(255,255,255,.11); }
.tg-skel--s { width: 44%; }

/* посадочная */
.tg-screen--land { padding: 0; background: #0f1420; }
.tg-land__nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.tg-land__logo { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13px; color: var(--tg-txt); }
.tg-land__links { display: flex; gap: 8px; }
.tg-land__links i { display: block; width: 26px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); }
.tg-land__hero { padding: 18px 16px; }
.tg-land__chip { display: inline-block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-l); background: rgba(205,255,79,.12); border-radius: 999px; padding: 4px 10px; }
.tg-land__title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 21px; line-height: 1.12; letter-spacing: -.03em; margin: 10px 0 16px; }
.tg-land__form { display: flex; flex-direction: column; gap: 8px; max-width: 240px; }
.tg-field { background: #161d2b; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 7px 11px; transition: border-color .25s ease; }
.tg-field.is-active { border-color: rgba(205,255,79,.45); }
.tg-field label { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #6f7a8c; }
.tg-field__v { display: block; font-size: 12.5px; color: var(--tg-txt); min-height: 17px; font-family: var(--font-mono, monospace); }
.tg-land__btn {
  margin-top: 3px; text-align: center; font-weight: 700; font-size: 12.5px; padding: 9px;
  border-radius: 9px; background: linear-gradient(135deg, var(--tg-l), var(--tg-l2)); color: #08130a;
  transition: transform .18s ease, filter .18s ease;
}
.tg-land__btn.is-press { transform: scale(.96); filter: brightness(.92); }
.tg-land__ok {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; font-weight: 600;
  color: var(--tg-l); opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.tg-land__ok.is-on { opacity: 1; transform: none; }
.tg-land__ok svg { width: 15px; height: 15px; }

.tg-cursor { position: absolute; width: 19px; height: 19px; left: 0; top: 0; z-index: 5; opacity: 0; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); transition: opacity .3s ease; }
.tg-cursor.is-on { opacity: 1; }

/* карточка CRM */
.tg-crm {
  position: absolute; right: -14px; bottom: -30px; width: 232px; z-index: 6;
  padding: 14px 15px; border-radius: 14px; border: 1px solid rgba(205,255,79,.26);
  background: rgba(16,22,34,.94); backdrop-filter: blur(14px);
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .45s cubic-bezier(.2,1,.3,1), transform .45s cubic-bezier(.2,1,.3,1);
  pointer-events: none;
}
.tg-crm.is-on { opacity: 1; transform: none; }
.tg-crm__top { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-l); }
.tg-crm__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tg-l); box-shadow: 0 0 8px var(--tg-l); }
.tg-crm__name { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 15px; margin: 8px 0 10px; }
.tg-crm__rows { display: flex; flex-direction: column; gap: 5px; }
.tg-crm__rows div { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.tg-crm__rows span { color: var(--tg-mut); flex-shrink: 0; }
.tg-crm__rows b { font-weight: 600; color: var(--tg-txt); text-align: right; }
.tg-crm__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--tg-line); font-size: 10px; }
.tg-crm__tg { color: var(--tg-mut); }
.tg-crm__ok { color: var(--tg-l); border: 1px solid rgba(205,255,79,.28); border-radius: 999px; padding: 2px 8px; }

/* плавающие карточки */
.tg-fcard {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 12px; border: 1px solid var(--tg-line-2);
  background: rgba(16,22,34,.9); backdrop-filter: blur(12px);
  box-shadow: 0 20px 44px -22px rgba(0,0,0,.85);
  font-size: 12px; font-weight: 600; line-height: 1.25;
  animation: tgFloat 7s ease-in-out infinite;
}
.tg-fcard small { display: block; font-weight: 400; font-size: 10.5px; color: var(--tg-mut); margin-top: 2px; }
.tg-fcard__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(205,255,79,.12); color: var(--tg-l); flex-shrink: 0; }
.tg-fcard__ic svg { width: 15px; height: 15px; }
/* карточки вынесены за габарит окна и подняты выше строки поиска —
   иначе «Цена лида по факту» садилась ровно на поисковый запрос */
.tg-fcard--a { left: -40px; top: -26px; }
.tg-fcard--b { left: -28px; bottom: 18%; animation-delay: -3.5s; }
@keyframes tgFloat { 50% { transform: translateY(-8px) } }
@media (prefers-reduced-motion: reduce) { .tg-fcard { animation: none } }

.tg-mock__note { margin-top: 42px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--tg-mut); }

/* ─── мобильный первый экран (вместо тяжёлого мока) ─── */
.tg-mfirst { display: none; margin-top: 28px; padding: 18px; border-radius: 16px; border: 1px solid var(--tg-line-2); background: rgba(255,255,255,.028); }
.tg-mfirst__cap { font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tg-mut); margin-bottom: 14px; }
.tg-mfirst__ad { padding: 12px 13px; border-radius: 11px; border: 1px solid rgba(205,255,79,.28); background: rgba(205,255,79,.06); }
.tg-mfirst__ad b { display: block; font-size: 14px; font-weight: 700; line-height: 1.32; color: #b8d8ff; margin: 7px 0 5px; }
.tg-mfirst__host { font-size: 11px; color: var(--tg-mut); }
.tg-mfirst__arrow { height: 30px; margin: 4px 0; position: relative; }
.tg-mfirst__arrow::before { content: ''; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(205,255,79,.45), rgba(205,255,79,.12)); }
.tg-mfirst__arrow::after {
  content: ''; position: absolute; left: 17px; bottom: -2px; width: 12px; height: 12px;
  border-right: 2px solid rgba(205,255,79,.55); border-bottom: 2px solid rgba(205,255,79,.55);
  transform: rotate(45deg);
}
.tg-mfirst__crm { padding: 13px 14px; border-radius: 11px; border: 1px solid var(--tg-line-2); background: rgba(16,22,34,.85); }
.tg-mfirst__crmtop { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-l); margin-bottom: 11px; }
.tg-mfirst__crmrow { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 4px 0; }
.tg-mfirst__crmrow span { color: var(--tg-mut); }
.tg-mfirst__crmrow b { font-weight: 600; text-align: right; }
.tg-mfirst__note { margin: 12px 0 0; font-size: 11.5px; color: var(--tg-mut); }

/* Анимированный мок справа тяжёлый для узких экранов: прячем его и
   показываем статичную схему выше. */
@media (max-width: 900px) {
  .tg-hero__grid { grid-template-columns: 1fr; }
  .tg-hero__right { display: none; }
  .tg-mfirst { display: block; }
  .tg-ben { grid-template-columns: 1fr; }
}

/* ══════════════ TRUST ══════════════ */
.tg-trust { padding: clamp(34px,4vw,52px) 0; border-block: 1px solid var(--tg-line); background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.004)); }
.tg-trust__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.tg-trust__i { text-align: center; }
.tg-trust__n { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: clamp(20px,2.4vw,29px); letter-spacing: -.03em; color: var(--tg-l); }
.tg-trust__l { font-size: 12.5px; line-height: 1.45; color: var(--tg-mut); margin-top: 7px; }
.tg-trust__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 28px; }
.tg-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tg-soft); border: 1px solid var(--tg-line); background: var(--tg-surf); border-radius: 999px; padding: 8px 15px; }
.tg-chip svg { width: 13px; height: 13px; color: var(--tg-l); }
@media (max-width: 760px) { .tg-trust__grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; } }

/* ══════════════ ОБЫЧНО / У НАС ══════════════ */
.tg-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px,2.4vw,34px); align-items: start; }
.tg-vs__cap {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--tg-line);
}
.tg-vs__col--bad .tg-vs__cap { color: var(--tg-red); }
.tg-vs__col--good .tg-vs__cap { color: var(--tg-l); }
.tg-vs__i { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; font-size: 14.5px; line-height: 1.55; color: var(--tg-soft); border-bottom: 1px solid rgba(255,255,255,.045); }
.tg-vs__i:last-child { border-bottom: 0; }
.tg-vs__x { flex-shrink: 0; width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,90,90,.12); color: var(--tg-red); font-size: 12px; font-weight: 700; margin-top: 1px; }
.tg-vs__v { flex-shrink: 0; width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center; background: rgba(205,255,79,.12); color: var(--tg-l); margin-top: 1px; }
.tg-vs__v svg { width: 12px; height: 12px; }
.tg-vs__col--bad { opacity: .82; }

/* рельса между колонками: визуально связывает боль и ответ на неё */
.tg-vs__rail { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 58px; }
.tg-vs__rail span { display: block; width: 2px; height: 58px; background: linear-gradient(180deg, transparent, rgba(205,255,79,.28), transparent); margin-bottom: 16px; position: relative; }
.tg-vs__rail span::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: rgba(205,255,79,.12) center / 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDFF4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 5px var(--tg-bg);
}

.tg-vs__after { text-align: center; margin-top: 38px; font-size: 17px; color: var(--tg-txt); }
.tg-vs__after b { color: var(--tg-l); font-weight: 700; }
@media (max-width: 860px) {
  .tg-vs { grid-template-columns: 1fr; gap: 30px; }
  .tg-vs__rail { display: none; }
}

/* ══════════════ СЦЕНЫ «ЧТО ВНУТРИ» ══════════════ */
.tg-scenes { display: flex; flex-direction: column; gap: clamp(48px,6.5vw,104px); }
.tg-scene { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(26px,4vw,64px); align-items: center; }
.tg-scene--rev .tg-scene__stage { order: 2; }
.tg-scene__num { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .16em; color: var(--tg-l); margin-bottom: 14px; }
.tg-scene__txt h3 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(19px,2.1vw,26px); line-height: 1.18; letter-spacing: -.025em; margin: 0 0 14px; }
.tg-scene__txt p { color: var(--tg-soft); font-size: 15.5px; line-height: 1.62; margin: 0; max-width: 44ch; }
.tg-scene__stage {
  border-radius: 18px; border: 1px solid var(--tg-line-2); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  box-shadow: 0 34px 76px -34px rgba(0,0,0,.85);
  padding: 20px; min-height: 268px; display: flex; align-items: center;
}
.tg-scene__stage > * { width: 100%; }
@media (max-width: 860px) {
  .tg-scene { grid-template-columns: 1fr; gap: 22px; }
  .tg-scene--rev .tg-scene__stage { order: 0; }
  .tg-scene__stage { min-height: 220px; padding: 16px; }
}

/* 01 семантика */
.tg-sem__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--tg-mut); padding-bottom: 12px; border-bottom: 1px solid var(--tg-line); margin-bottom: 14px; flex-wrap: wrap; }
.tg-sem__cnt { font-family: var(--font-mono, monospace); font-size: 11.5px; }
.tg-sem__cnt b { color: var(--tg-l); font-weight: 700; }
.tg-sem__cnt i { color: var(--tg-red); font-style: normal; font-weight: 700; }
.tg-sem__flow { display: flex; flex-wrap: wrap; gap: 7px; min-height: 160px; align-content: flex-start; }
.tg-kw {
  font-size: 12.5px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--tg-line);
  background: rgba(255,255,255,.035); color: var(--tg-soft); white-space: nowrap;
  opacity: 0; transform: translateY(-6px) scale(.96);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,1,.3,1), color .3s, border-color .3s, background .3s;
}
.tg-kw.is-in { opacity: 1; transform: none; }
.tg-kw.is-keep { border-color: rgba(205,255,79,.4); background: rgba(205,255,79,.08); color: var(--tg-l); }
.tg-kw.is-drop { border-color: rgba(255,90,90,.35); background: rgba(255,90,90,.07); color: var(--tg-red); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tg-kw.is-out { opacity: 0; transform: translateY(12px) scale(.9); }

/* 02 объявления */
.tg-adgen__head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--tg-mut); padding-bottom: 12px; border-bottom: 1px solid var(--tg-line); margin-bottom: 14px; }
.tg-adgen__note { font-family: var(--font-mono, monospace); font-size: 11px; }
.tg-adgen__list { display: flex; flex-direction: column; gap: 9px; min-height: 132px; }
.tg-adv {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--tg-line); background: rgba(255,255,255,.028);
  transition: border-color .35s ease, background .35s ease, opacity .35s ease, transform .35s ease;
}
.tg-adv__k { flex-shrink: 0; width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; background: rgba(255,255,255,.07); color: var(--tg-mut); }
.tg-adv__t { font-size: 13px; line-height: 1.4; color: var(--tg-soft); min-height: 18px; }
.tg-adv.is-win { border-color: rgba(205,255,79,.5); background: rgba(205,255,79,.07); transform: translateX(4px); }
.tg-adv.is-win .tg-adv__k { background: var(--tg-l); color: #08130a; }
.tg-adv.is-win .tg-adv__t { color: var(--tg-txt); }
.tg-adv.is-lose { opacity: .38; }
.tg-adgen__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tg-line); font-size: 12px; color: var(--tg-mut); }

/* 03 путь заявки */
.tg-rail__row { display: flex; align-items: flex-start; gap: 8px; }
.tg-rail__step { flex: 1 1 0; min-width: 0; text-align: center; opacity: .4; transition: opacity .35s ease, transform .35s ease; }
.tg-rail__step.is-on { opacity: 1; transform: translateY(-2px); }
.tg-rail__ic { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 9px; border-radius: 12px; border: 1px solid var(--tg-line); background: rgba(255,255,255,.04); color: var(--tg-mut); transition: border-color .35s, color .35s, background .35s, box-shadow .35s; }
.tg-rail__ic svg { width: 19px; height: 19px; }
.tg-rail__step.is-on .tg-rail__ic { border-color: rgba(205,255,79,.5); color: var(--tg-l); background: rgba(205,255,79,.09); box-shadow: 0 0 26px -10px rgba(205,255,79,.8); }
.tg-rail__step b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.tg-rail__step i { display: block; font-style: normal; font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--tg-mut); margin-top: 4px; }
.tg-rail__line { flex: 0 0 auto; width: clamp(24px,7%,64px); height: 2px; margin-top: 19px; border-radius: 2px; background: rgba(255,255,255,.09); overflow: hidden; }
.tg-rail__line span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--tg-l), var(--tg-l2)); transition: width .5s ease; }
.tg-rail__lost { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--tg-line); font-size: 12.5px; color: var(--tg-mut); flex-wrap: wrap; }
.tg-rail__lost b { font-family: var(--font-mono, monospace); color: var(--tg-red); font-weight: 700; }

/* 04 отчёт */
.tg-rep__head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--tg-mut); padding-bottom: 12px; border-bottom: 1px solid var(--tg-line); margin-bottom: 16px; }
.tg-rep__tag { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-l); border: 1px solid rgba(205,255,79,.28); border-radius: 999px; padding: 3px 9px; }
.tg-rep__bars { display: flex; align-items: flex-end; gap: 6px; height: 84px; margin-bottom: 18px; }
.tg-rep__bars i { flex: 1; display: block; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, rgba(205,255,79,.75), rgba(205,255,79,.16)); height: 4px; transition: height .7s cubic-bezier(.2,1,.3,1); }
.tg-rep__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.tg-rep__grid > div { padding: 12px 13px; border-radius: 11px; border: 1px solid var(--tg-line); background: rgba(255,255,255,.028); }
.tg-rep__grid span { display: block; font-size: 11px; color: var(--tg-mut); }
.tg-rep__grid b { display: block; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(15px,1.6vw,19px); letter-spacing: -.03em; margin-top: 5px; }
.tg-rep__foot { margin-top: 14px; font-size: 11.5px; color: var(--tg-mut); }

/* ══════════════ ЖИВЫЕ ДЕМО ══════════════ */
.tg-demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tg-demo {
  display: block; text-decoration: none; color: inherit; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--tg-line); background: rgba(255,255,255,.02);
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
}
.tg-demo:hover { transform: translateY(-7px); border-color: rgba(205,255,79,.35); box-shadow: 0 34px 66px -28px rgba(0,0,0,.75); }
.tg-demo__shot { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #0d1119; }
.tg-demo__frame { position: absolute; inset: 0; }
.tg-demo__frame iframe { position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(.5); transform-origin: top left; border: 0; pointer-events: none; }
.tg-demo__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(10,14,26,.6)); pointer-events: none; }
.tg-demo__live {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: #08130a; background: var(--tg-l); padding: 4px 9px; border-radius: 999px;
}
.tg-demo__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #08130a; animation: tgLive 1.4s infinite; }
@keyframes tgLive { 0%,100% { opacity: .3 } 50% { opacity: 1 } }
.tg-demo__b { padding: 18px 22px 24px; }
.tg-demo__tag { font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-l); }
.tg-demo__name { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.025em; margin: 7px 0 8px; }
.tg-demo__d { color: var(--tg-mut); font-size: 13.5px; line-height: 1.55; }
.tg-demo__go { margin-top: 14px; color: var(--tg-l); font-weight: 600; font-size: 14px; }
.tg-demo__note { text-align: center; color: var(--tg-mut); font-size: 13.5px; line-height: 1.6; max-width: 62ch; margin: 30px auto 0; }
@media (max-width: 760px) { .tg-demo__grid { grid-template-columns: 1fr; } }

/* ══════════════ ПРОЦЕСС ══════════════ */
.tg-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.tg-step { padding: 26px 24px 28px; border-radius: 16px; border: 1px solid var(--tg-line); background: rgba(255,255,255,.022); transition: border-color .3s, transform .3s; }
.tg-step:hover { border-color: rgba(205,255,79,.3); transform: translateY(-4px); }
.tg-step__n { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .16em; color: var(--tg-l); margin-bottom: 14px; }
.tg-step h3 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.02em; margin: 0 0 10px; }
.tg-step p { color: var(--tg-mut); font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.tg-step__t { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--tg-soft); border: 1px solid var(--tg-line); border-radius: 999px; padding: 4px 10px; display: inline-block; }
@media (max-width: 980px) { .tg-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tg-steps { grid-template-columns: 1fr; } }

/* ══════════════ ТАРИФЫ ══════════════ */
.tg-curwrap { display: flex; justify-content: center; margin-bottom: 34px; }
.tg-plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; }
.tg-plan {
  position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px;
  border-radius: 18px; border: 1px solid var(--tg-line); background: rgba(255,255,255,.022);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.tg-plan:hover { border-color: rgba(255,255,255,.16); transform: translateY(-4px); }
.tg-plan--hit {
  border-color: rgba(205,255,79,.34);
  background: linear-gradient(180deg, rgba(205,255,79,.07), rgba(255,255,255,.015));
  box-shadow: 0 30px 70px -34px rgba(205,255,79,.4);
}
.tg-plan--hit:hover { border-color: rgba(205,255,79,.55); }
.tg-plan__badge {
  position: absolute; top: -11px; left: 26px; font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #08130a;
  background: var(--tg-l); border-radius: 999px; padding: 4px 11px;
}
.tg-plan__cap { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tg-mut); }
.tg-plan__price { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -.03em; margin: 12px 0 0; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.tg-plan__price b { font-weight: 800; font-size: 34px; color: var(--tg-l); }
.tg-plan__price i { font-style: normal; font-family: var(--font-body, sans-serif); font-weight: 400; font-size: 14px; color: var(--tg-mut); }
.tg-plan__d { color: var(--tg-mut); font-size: 13.5px; line-height: 1.6; margin: 14px 0 18px; }
.tg-plan__list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.tg-plan__list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: var(--tg-soft); }
.tg-plan__list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--tg-l); border-bottom: 2px solid var(--tg-l); transform: rotate(-45deg); }
@media (max-width: 980px) { .tg-plans { grid-template-columns: 1fr; } .tg-plan__badge { left: 24px; } }

.tg-budget { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.tg-budget__i { padding: 20px 22px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.13); background: rgba(255,255,255,.016); }
.tg-budget__i b { display: block; font-size: 14.5px; margin-bottom: 7px; }
.tg-budget__i span { color: var(--tg-mut); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 760px) { .tg-budget { grid-template-columns: 1fr; } }

/* ══════════════ ЧТО ВХОДИТ ══════════════ */
.tg-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tg-scope__col { padding: 26px 26px 28px; border-radius: 18px; border: 1px solid var(--tg-line); background: rgba(255,255,255,.022); }
.tg-scope__cap { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--tg-line); }
.tg-scope__cap--in { color: var(--tg-l); }
.tg-scope__cap--out { color: var(--tg-mut); }
.tg-scope__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.tg-scope__col li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.55; color: var(--tg-soft); }
.tg-scope__col li b { color: var(--tg-txt); font-weight: 600; }
.tg-scope__cap--in ~ ul li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--tg-l); border-bottom: 2px solid var(--tg-l); transform: rotate(-45deg); }
.tg-scope__cap--out ~ ul li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 12px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.28); }
.tg-scope__note { text-align: center; color: var(--tg-mut); font-size: 13.5px; line-height: 1.6; max-width: 66ch; margin: 26px auto 0; }
@media (max-width: 760px) { .tg-scope { grid-template-columns: 1fr; } }

/* ══════════════ MID-CTA ══════════════ */
.tg-midcta { padding: clamp(40px,5vw,70px) 0; }
.tg-midcta__in {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  padding: clamp(28px,3.4vw,46px); border-radius: 22px;
  border: 1px solid rgba(205,255,79,.22);
  background: linear-gradient(120deg, rgba(205,255,79,.09), rgba(255,255,255,.015) 62%);
}
.tg-midcta__in h2 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(21px,2.5vw,31px); line-height: 1.14; letter-spacing: -.028em; margin: 0; max-width: 22ch; }
.tg-midcta__in p { color: var(--tg-soft); font-size: 15px; line-height: 1.6; margin: 14px 0 0; max-width: 54ch; }
@media (max-width: 800px) { .tg-midcta__in { grid-template-columns: 1fr; } }

/* ══════════════ FAQ ══════════════ */
.tg-faq { display: grid; grid-template-columns: 320px 1fr; gap: clamp(28px,4vw,64px); align-items: start; }
.tg-faq__side { position: sticky; top: 100px; }
.tg-faq__side-note { color: var(--tg-mut); font-size: 14px; line-height: 1.6; margin: 18px 0 22px; }
.tg-faq__list { display: flex; flex-direction: column; }
.tg-fq { border-bottom: 1px solid var(--tg-line); }
.tg-fq:first-child { border-top: 1px solid var(--tg-line); }
.tg-fq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 21px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--tg-txt);
  transition: color .2s ease;
}
.tg-fq__q:hover { color: var(--tg-l); }
.tg-fq__i { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.tg-fq__i::before, .tg-fq__i::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--tg-l);
  transform: translate(-50%,-50%); transition: transform .3s cubic-bezier(.2,1,.3,1), opacity .3s;
}
.tg-fq__i::before { width: 14px; height: 2px; }
.tg-fq__i::after  { width: 2px; height: 14px; }
.tg-fq__q[aria-expanded="true"] .tg-fq__i::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.tg-fq__a { padding: 0 4px 22px; }
.tg-fq__a p { color: var(--tg-mut); font-size: 14.5px; line-height: 1.68; margin: 0; max-width: 66ch; }
.tg-fq__a a { color: var(--tg-l); }
@media (max-width: 860px) { .tg-faq { grid-template-columns: 1fr; } .tg-faq__side { position: static; } }

/* ══════════════ РЕАЛЬНАЯ КОМПАНИЯ ══════════════ */
.tg-real__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.tg-real__card { padding: 26px 26px 28px; border-radius: 18px; border: 1px solid var(--tg-line); background: rgba(255,255,255,.022); }
.tg-real__cap { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tg-mut); margin-bottom: 16px; }
.tg-real__addr { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.4; letter-spacing: -.02em; }
.tg-real__addr span { display: inline-block; font-family: var(--font-body, sans-serif); font-weight: 400; font-size: 13.5px; color: var(--tg-mut); letter-spacing: 0; margin-top: 5px; }
.tg-real__tel { display: block; margin-top: 16px; font-size: 16px; font-weight: 600; color: var(--tg-txt); text-decoration: none; }
.tg-real__tel:hover { color: var(--tg-l); }
.tg-real__map { display: inline-block; margin-top: 10px; font-size: 13.5px; color: var(--tg-l); text-decoration: none; }
.tg-real__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tg-real__list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.55; color: var(--tg-soft); }
.tg-real__list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 11px; height: 6px; border-left: 2px solid var(--tg-l); border-bottom: 2px solid var(--tg-l); transform: rotate(-45deg); }
.tg-real__req { display: flex; gap: 22px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--tg-line); flex-wrap: wrap; }
.tg-real__req span { font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-mut); }
.tg-real__req b { display: block; font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--tg-txt); margin-top: 4px; }
.tg-real__p { color: var(--tg-mut); font-size: 13.5px; line-height: 1.62; margin: 0 0 18px; }
.tg-real__links { display: flex; flex-direction: column; gap: 8px; }
.tg-real__links a { color: var(--tg-l); font-size: 14px; font-weight: 600; text-decoration: none; }
.tg-real__links a:hover { text-decoration: underline; }
@media (max-width: 980px) { .tg-real__grid { grid-template-columns: 1fr; } }

/* ══════════════ ФОРМА ══════════════ */
.tg-formsec { padding-bottom: clamp(80px,9vw,130px); }
.tg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,60px); align-items: start; }
.tg-form__lead { color: var(--tg-soft); font-size: 16px; line-height: 1.62; margin: 20px 0 26px; max-width: 46ch; }
.tg-form__facts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.tg-form__fact { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--tg-soft); }
.tg-form__fact > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(205,255,79,.1); color: var(--tg-l); flex-shrink: 0; }
.tg-form__fact svg { width: 14px; height: 14px; }
.tg-form__free { padding: 22px 24px; border-radius: 16px; border: 1px solid rgba(205,255,79,.2); background: rgba(205,255,79,.04); }
.tg-form__free-cap { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tg-l); margin-bottom: 14px; }
.tg-form__free ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tg-form__free li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--tg-soft); }
.tg-form__free li::before { content: ''; position: absolute; left: 0; top: 6px; width: 11px; height: 6px; border-left: 2px solid var(--tg-l); border-bottom: 2px solid var(--tg-l); transform: rotate(-45deg); }
.tg-form { padding: clamp(24px,2.6vw,34px); border-radius: 20px; border: 1px solid var(--tg-line-2); background: rgba(255,255,255,.028); }
@media (max-width: 860px) { .tg-form__grid { grid-template-columns: 1fr; } }

/* ══════════════ STICKY CTA (мобилка) ══════════════ */
.tg-sticky {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px 11px 16px; border-radius: 16px;
  border: 1px solid rgba(205,255,79,.28); background: rgba(13,17,26,.94); backdrop-filter: blur(14px);
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.9);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2,1,.3,1);
}
.tg-sticky.is-on { transform: none; }
.tg-sticky__t { font-size: 14px; font-weight: 700; }
.tg-sticky__s { font-size: 11.5px; color: var(--tg-mut); margin-top: 2px; }
.tg-sticky .tg-btn { padding: 12px 18px; font-size: 14px; }
@media (max-width: 768px) {
  .tg-sticky { display: flex; }
  .tg-formsec { padding-bottom: 110px; }
  .nav__cta { display: none; }
  /* form.js вешает на все страницы круглую плавашку #uq-float-cta (fixed,
     bottom-right, z-index 900). На мобилке она садится ровно на нашу
     панель с ценой — а панель информативнее, в ней сумма и «бесплатно».
     На десктопе плавашку оставляем: там наша панель скрыта. */
  #uq-float-cta { display: none !important; }
}