/* GetBit, 18.10.2026 — блок «Преимущества» платформы (exchange-advantages), вариант Б «смелее»: крупные цифры, счётчик, шкала, световые пятна.
   Подключается в <head> (nginx sub_filter '</head>'), поэтому блок с первой отрисовки в новом виде, без мелькания старого.
   Разметка платформы (iEXEChanger 10.3, is_advantage_style 0): exchange-advantages > div > .container > h2 + .grid > div(карточка: a, img, h2, p).
   gb-advantages-b.20261018a.js добавляет в карточку .gba-fx (пятна и сетка точек) и .gba-meter (шкала), крутит цифры при появлении.
   Без скрипта блок тоже в новом виде, просто без пятен, шкалы и движения.
   Иконка по заголовку карточки (alt картинки): 99% — секундомер, 100% — щит, 24/7 — гарнитура, иное — искра.
   Карточки как баннеры под формой (радиус 24, рамка-перелив, пятна); цифры 64 px с переливом белый → оранжевый.
   ПК/планшет от 768 px — 3 колонки ровно по колонкам формы (gap 12); телефон — столбик.
   Селекторы с html и !important — чтобы перебить правила темы getbit-animations (exchange-advantages … !important). */
html exchange-advantages{display:block;position:relative;font-family:Geologica,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;color:#f5f5f5}
html.tgapp exchange-advantages{display:none!important}
html exchange-advantages > div{margin:0!important;padding:12px 0 32px!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html exchange-advantages > div > .container > h2{margin:0 0 20px!important;padding:0!important;text-align:left!important;font:700 32px/1.12 Geologica,system-ui,sans-serif!important;
  letter-spacing:-.025em!important;color:#fff!important;text-wrap:balance}

html exchange-advantages > div > .container > .grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin:0!important;padding:0!important}
html exchange-advantages > div > .container > .grid > div{position:relative!important;isolation:isolate;display:grid!important;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;grid-template-areas:"ico" "num" "txt" "meter";align-items:start;justify-items:start;min-width:0;margin:0!important;
  padding:26px 26px 26px!important;border:0!important;border-radius:24px!important;color:#f5f5f5!important;text-align:left!important;
  background:radial-gradient(120% 140% at 100% 0%,rgba(124,58,237,.40) 0%,rgba(79,70,229,.14) 38%,rgba(79,70,229,0) 64%),
             radial-gradient(90% 110% at 0% 100%,rgba(253,116,1,.16) 0%,rgba(253,116,1,0) 58%),rgba(27,33,58,.74)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 0 70px -28px rgba(124,58,237,.55),0 12px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)!important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease!important}
html exchange-advantages > div > .container > .grid > div:nth-child(3n+2){
  background:radial-gradient(120% 140% at 100% 0%,rgba(34,211,238,.26) 0%,rgba(79,70,229,.16) 40%,rgba(79,70,229,0) 64%),
             radial-gradient(90% 110% at 0% 100%,rgba(124,58,237,.24) 0%,rgba(124,58,237,0) 58%),rgba(27,33,58,.74)!important;
  box-shadow:0 0 70px -28px rgba(34,211,238,.42),0 12px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)!important}
html exchange-advantages > div > .container > .grid > div:nth-child(3n){
  background:radial-gradient(120% 140% at 100% 0%,rgba(253,116,1,.30) 0%,rgba(192,38,211,.14) 40%,rgba(192,38,211,0) 64%),
             radial-gradient(90% 110% at 0% 100%,rgba(124,58,237,.26) 0%,rgba(124,58,237,0) 58%),rgba(27,33,58,.74)!important;
  box-shadow:0 0 70px -28px rgba(253,116,1,.45),0 12px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)!important}
/* рамка 1 px как у формы и баннеров */
html exchange-advantages > div > .container > .grid > div::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(150deg,rgba(167,139,250,.78) 0%,rgba(129,140,248,.32) 28%,rgba(103,232,249,.14) 55%,rgba(148,163,255,.06) 76%,rgba(253,116,1,.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover){
  html exchange-advantages > div > .container > .grid > div:hover{transform:translateY(-4px);
    box-shadow:0 0 90px -22px rgba(124,58,237,.7),0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09)!important}
  html exchange-advantages > div > .container > .grid > div:nth-child(3n+2):hover{box-shadow:0 0 90px -22px rgba(34,211,238,.55),0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09)!important}
  html exchange-advantages > div > .container > .grid > div:nth-child(3n):hover{box-shadow:0 0 90px -22px rgba(253,116,1,.6),0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09)!important}
}
/* пятна и сетка точек (span.gba-fx добавляет скрипт) */
html exchange-advantages .gba-fx{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
html exchange-advantages .gba-fx::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.3px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(70% 80% at 92% 18%,#000 0%,transparent 72%);mask-image:radial-gradient(70% 80% at 92% 18%,#000 0%,transparent 72%)}
html exchange-advantages .gba-fx::after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.5),rgba(139,92,246,0) 70%);animation:gba-drift 14s ease-in-out infinite alternate}
html exchange-advantages > div > .container > .grid > div:nth-child(3n+2) .gba-fx::after{background:radial-gradient(circle,rgba(34,211,238,.34),rgba(34,211,238,0) 70%);animation-duration:17s}
html exchange-advantages > div > .container > .grid > div:nth-child(3n) .gba-fx::after{background:radial-gradient(circle,rgba(253,116,1,.4),rgba(253,116,1,0) 70%);animation-duration:15s}
@keyframes gba-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-28px,20px,0) scale(1.12)}}

/* иконка: плитка с переливом и свечением, линейная иконка белым */
html exchange-advantages > div > .container > .grid > div{--gba-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3.2 13.9 9l5.9 2-5.9 2L12 18.8 10.1 13l-5.9-2 5.9-2z%22/%3E%3C/svg%3E")}
html exchange-advantages > div > .container > .grid > div:has(> img[alt="99%"]){--gba-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2213.5%22 r=%227.5%22/%3E%3Cpath d=%22M12 9.6v3.9l2.6 2.1M9.4 2.8h5.2M12 2.8v3.1M18.3 6.7l1.4-1.4%22/%3E%3C/svg%3E")}
html exchange-advantages > div > .container > .grid > div:has(> img[alt="100%"]){--gba-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.9 19.2 5.7v5.1c0 4.6-3 8.5-7.2 10.3-4.2-1.8-7.2-5.7-7.2-10.3V5.7z%22/%3E%3Cpath d=%22m8.7 12.1 2.3 2.3 4.4-4.6%22/%3E%3C/svg%3E")}
html exchange-advantages > div > .container > .grid > div:has(> img[alt="24/7"]){--gba-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.6 14.4v-2.1a7.4 7.4 0 0 1 14.8 0v2.1%22/%3E%3Crect x=%223.4%22 y=%2212.9%22 width=%224.1%22 height=%226.6%22 rx=%221.7%22/%3E%3Crect x=%2216.5%22 y=%2212.9%22 width=%224.1%22 height=%226.6%22 rx=%221.7%22/%3E%3Cpath d=%22M18.6 19.5c0 1.4-1.7 2.2-4.3 2.2h-1.6%22/%3E%3C/svg%3E")}
html exchange-advantages > div > .container > .grid > div::after{content:"";grid-area:ico;display:block;width:54px;height:54px;border-radius:16px;
  background:var(--gba-ico) center/28px 28px no-repeat,linear-gradient(135deg,#7c3aed 0%,#a855f7 40%,#fb923c 80%,#fd7401 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 0 5px rgba(139,92,246,.12),0 10px 28px -8px rgba(253,116,1,.6),0 0 40px -10px rgba(139,92,246,.7)}
html exchange-advantages > div > .container > .grid > div:nth-child(3n+2)::after{background:var(--gba-ico) center/28px 28px no-repeat,linear-gradient(150deg,#0e7490 0%,#4f46e5 45%,#9333ea 80%,#c026d3 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 0 5px rgba(34,211,238,.10),0 10px 28px -8px rgba(34,211,238,.5),0 0 40px -10px rgba(79,70,229,.7)}
html exchange-advantages > div > .container > .grid > div:nth-child(3n)::after{background:var(--gba-ico) center/28px 28px no-repeat,linear-gradient(120deg,#fd7401 0%,#f97316 22%,#c026d3 68%,#7c3aed 100%)}
html exchange-advantages > div > .container > .grid > div > img,
html exchange-advantages > div > .container > .grid > div > a[href="null"]{display:none!important}
/* цифра: 64 px, перелив белый → оранжевый, моноширинные цифры для счётчика */
html exchange-advantages > div > .container > .grid > div > h2{grid-area:num;margin:26px 0 0!important;padding:0 0 .06em!important;text-align:left!important;
  font:800 64px/1 Geologica,system-ui,sans-serif!important;letter-spacing:-.035em!important;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:linear-gradient(100deg,#ffffff 0%,#ffe1c4 34%,#ff9a3c 70%,#fd7401 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(253,116,1,.32))}
html exchange-advantages > div > .container > .grid > div > p{grid-area:txt;margin:10px 0 0!important;padding:0!important;text-align:left!important;
  font:500 16px/1.45 Geologica,system-ui,sans-serif!important;color:rgba(226,232,240,.84)!important;text-wrap:pretty}
/* шкала: N % — полоса до N % со светящимся концом; 24/7 — 24 деления (часы суток) */
html exchange-advantages .gba-meter{grid-area:meter;justify-self:stretch;display:block;position:relative;height:6px;margin-top:22px;border-radius:99px;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
html exchange-advantages .gba-meter b{position:relative;display:block;height:100%;width:calc(var(--to,1) * 100%);border-radius:inherit;
  background:linear-gradient(90deg,#7c3aed 0%,#a855f7 45%,#fb923c 85%,#fd7401 100%);box-shadow:0 0 14px -2px rgba(253,116,1,.6)}
html exchange-advantages .gba-meter b::after{content:"";position:absolute;right:-4px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(253,116,1,.35),0 0 14px 2px rgba(253,116,1,.85)}
html exchange-advantages .gba-meter.gba-ticks{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;background:none;box-shadow:none}
html exchange-advantages .gba-meter.gba-ticks b{width:auto;border-radius:2px;background:linear-gradient(90deg,#7c3aed 0%,#a855f7 45%,#fb923c 85%,#fd7401 100%);
  background-size:2400% 100%;background-position:calc(var(--k,0) * 100% / 23) 0;box-shadow:none}
html exchange-advantages .gba-meter.gba-ticks b::after{content:none}
/* без скрипта шкалы нет — место под неё не держим */
html exchange-advantages > div > .container > .grid > div:not(.gba-has-meter){grid-template-areas:"ico" "num" "txt" "."}

/* планшет: цифры чуть меньше */
@media (max-width:1023px){
  html exchange-advantages > div > .container > .grid > div{padding:22px 20px 22px!important}
  html exchange-advantages > div > .container > .grid > div > h2{font-size:50px!important}
  html exchange-advantages > div > .container > .grid > div > p{font-size:15px!important}
}
/* телефон: столбик; иконка и цифра в строку, ниже текст и шкала */
@media (max-width:767px){
  html exchange-advantages > div{padding:10px 0 22px!important}
  html exchange-advantages > div > .container > h2{margin-bottom:14px!important;font-size:24px!important;line-height:1.16!important}
  html exchange-advantages > div > .container > .grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  html exchange-advantages > div > .container > .grid > div,
  html exchange-advantages > div > .container > .grid > div:not(.gba-has-meter){grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto auto;
    grid-template-areas:"ico num" "txt txt" "meter meter";align-items:center;column-gap:14px;padding:18px 18px 20px!important;border-radius:20px!important}
  html exchange-advantages > div > .container > .grid > div::after{width:46px;height:46px;border-radius:14px;background-size:22px 22px,auto}
  html exchange-advantages > div > .container > .grid > div > h2{margin:0!important;font-size:44px!important}
  html exchange-advantages > div > .container > .grid > div > p{margin-top:12px!important;font-size:15px!important;max-width:none}
  html exchange-advantages .gba-meter{margin-top:16px}
  html exchange-advantages .gba-fx::after{width:200px;height:200px;right:-70px;top:-100px}
}
@media (max-width:379px){
  html exchange-advantages > div > .container > h2{font-size:22px!important}
  html exchange-advantages > div > .container > .grid > div{padding:16px 16px 18px!important;column-gap:12px}
  html exchange-advantages > div > .container > .grid > div > h2{font-size:40px!important}
}

/* появление: карточки по очереди снизу, шкала заполняется, деления загораются по одному (классы ставит и снимает скрипт) */
html exchange-advantages.gba-anim > div > .container > .grid > div{opacity:0;transform:translateY(20px)}
html exchange-advantages.gba-anim.gba-in > div > .container > .grid > div{animation:gba-up .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 90ms)}
html exchange-advantages.gba-anim .gba-meter b{width:0}
html exchange-advantages.gba-anim.gba-in .gba-meter b{width:calc(var(--to,1) * 100%);animation:gba-fill 1.4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
html exchange-advantages.gba-anim .gba-meter.gba-ticks b{width:auto;opacity:.14}
html exchange-advantages.gba-anim.gba-in .gba-meter.gba-ticks b{opacity:1;animation:gba-tick .35s ease-out both;animation-delay:calc(var(--i,0) * 90ms + 120ms + var(--k,0) * 45ms)}
@keyframes gba-up{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:none}}
@keyframes gba-fill{0%{width:0}}
@keyframes gba-tick{0%{opacity:.14;transform:scaleY(.4)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html exchange-advantages.gba-anim > div > .container > .grid > div,
  html exchange-advantages.gba-anim .gba-meter b{opacity:1!important;transform:none!important;animation:none!important}
  html exchange-advantages.gba-anim .gba-meter:not(.gba-ticks) b{width:calc(var(--to,1) * 100%)!important}
  html exchange-advantages .gba-fx::after{animation:none!important}
  html exchange-advantages > div > .container > .grid > div{transition:none!important}
}