Блок «Агенты» для сайта агентства недвижимости

<section class="vbagn">
  <div class="vbagn-wrap">
    <div class="vbagn-head">
      <h2 class="vbagn-h2">Наши агенты</h2>
      <p class="vbagn-lead">Каждый ведёт свои районы и знает там дома по подъездам. Звоните напрямую — без общей линии и переадресаций.</p>
    </div>
    <div class="vbagn-grid" id="vbagn-grid"></div>
  </div>
</section>

<style>
.vbagn, .vbagn *, .vbagn *::before, .vbagn *::after { box-sizing: border-box; }
.vbagn {
  --acc: #1f6f5c; --acc-dark: #175646; --ink: #1a2320; --muted: #5c6c67; --line: #dfe6e3; --soft: #f3f7f5;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbagn-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbagn-head { max-width: 42em; margin-bottom: clamp(24px, 3vw, 40px); }
.vbagn-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbagn-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbagn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.vbagn-card { display: flex; gap: 16px; background: var(--soft); border-radius: 20px; padding: 20px;
  opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.vbagn-card.is-in { opacity: 1; transform: none; }
.vbagn-card svg.vbagn-ph { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; }
.vbagn-body { min-width: 0; flex: 1; }
.vbagn-name { font-family: var(--fh); font-size: 17px; font-weight: 700; margin: 0 0 3px; }
.vbagn-role { font-size: 13px; color: var(--acc); font-weight: 600; margin: 0 0 10px; }
.vbagn-nums { display: flex; gap: 18px; margin-bottom: 10px; }
.vbagn-nums b { display: block; font-family: var(--fh); font-size: 17px; font-weight: 700; }
.vbagn-nums span { display: block; font-size: 11.5px; color: var(--muted); }
.vbagn-areas { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; }
.vbagn-links { display: flex; flex-wrap: wrap; gap: 8px; }
.vbagn-tel, .vbagn-tel:link, .vbagn-tel:visited, .vbagn-tel:hover, .vbagn-tel:active, .vbagn-tel:focus,
.vbagn-msg, .vbagn-msg:link, .vbagn-msg:visited, .vbagn-msg:hover, .vbagn-msg:active, .vbagn-msg:focus {
  display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: .18s ease; }
.vbagn-tel { background: var(--acc); color: #fff !important; }
.vbagn-tel:hover { background: var(--acc-dark); color: #fff !important; }
.vbagn-msg { background: #fff; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--line); }
.vbagn-msg:hover { box-shadow: inset 0 0 0 1.5px var(--acc); color: var(--acc) !important; }
/* Tilda оборачивает телефон во вложенную ссылку и красит своим цветом — гасим */
.vbagn a[href^="tel:"] a, .vbagn a[href^="tel:"] a:link, .vbagn a[href^="tel:"] a:visited,
.vbagn a[href^="tel:"] a:hover, .vbagn a[href^="tel:"] a:active, .vbagn a[href^="tel:"] a:focus {
  color: inherit !important; text-decoration: inherit !important; }

@media (max-width: 400px) { .vbagn-card { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .vbagn-card { opacity: 1 !important; transform: none !important; transition: none !important; } }
</style>

<script>
(function () {
  /* ── АГЕНТЫ: msg пустой — кнопка мессенджера не появится ── */
  var AGENTS = [
    { name: 'Елена Тарасова', role: 'Ведущий эксперт', deals: 214, years: 12,
      areas: 'Центр, Северный квартал, Заречье. Новостройки и переуступки.',
      tel: '+7 (900) 000-11-01', msg: 'https://t.me/', c: '#cfe0da' },
    { name: 'Артём Логинов', role: 'Эксперт по новостройкам', deals: 168, years: 9,
      areas: 'Южный берег, Парковый, Солнечный. Ипотечные сделки и господдержка.',
      tel: '+7 (900) 000-11-02', msg: 'https://t.me/', c: '#d5dee6' },
    { name: 'Ирина Ковач', role: 'Эксперт по вторичке', deals: 301, years: 15,
      areas: 'Старый город, Академический. Сложные сделки, наследство, доли.',
      tel: '+7 (900) 000-11-03', msg: '', c: '#e2dcd2' },
    { name: 'Максим Ершов', role: 'Эксперт по загородной', deals: 96, years: 7,
      areas: 'Пригород в радиусе 30 км. Дома, участки, ИЖС.',
      tel: '+7 (900) 000-11-04', msg: 'https://t.me/', c: '#dbe2d3' },
    { name: 'Ольга Мельник', role: 'Эксперт по аренде', deals: 420, years: 8,
      areas: 'Весь город. Долгосрочная аренда, сопровождение собственников.',
      tel: '+7 (900) 000-11-05', msg: 'https://t.me/', c: '#e6d8dc' },
    { name: 'Денис Абрамов', role: 'Коммерческая недвижимость', deals: 74, years: 11,
      areas: 'Торговые помещения, офисы, склады. Инвестиционные объекты.',
      tel: '+7 (900) 000-11-06', msg: '', c: '#d4dde0' }
  ];

  var roots = document.querySelectorAll('.vbagn');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var grid = root.querySelector('#vbagn-grid');

    /* SVG-заглушка портрета: замените на <img src="..." alt="Имя агента"> */
    function portrait(c, ini) {
      return '<svg class="vbagn-ph" viewBox="0 0 84 84" role="img" aria-label="Портрет агента" focusable="false">' +
        '<circle cx="42" cy="42" r="42" fill="' + c + '"/>' +
        '<circle cx="42" cy="34" r="14" fill="#fff" opacity=".65"/>' +
        '<path d="M18 84c0-13 11-22 24-22s24 9 24 22z" fill="#fff" opacity=".65"/>' +
        '<text x="42" y="39" text-anchor="middle" font-family="inherit" font-size="15" font-weight="700" fill="#3d4a46">' + ini + '<\/text><\/svg>';
    }

    grid.innerHTML = AGENTS.map(function (a) {
      var ini = a.name.split(' ').map(function (p) { return p.charAt(0); }).join('');
      var telHref = 'tel:' + a.tel.replace(/[^\d+]/g, '');
      return '<article class="vbagn-card">' + portrait(a.c, ini) +
        '<div class="vbagn-body"><h3 class="vbagn-name">' + a.name + '<\/h3>' +
        '<p class="vbagn-role">' + a.role + '<\/p>' +
        '<div class="vbagn-nums"><span><b>' + a.deals + '<\/b><span>сделок закрыл<\/span><\/span>' +
        '<span><b>' + a.years + '<\/b><span>лет в профессии<\/span><\/span><\/div>' +
        '<p class="vbagn-areas">' + a.areas + '<\/p>' +
        '<div class="vbagn-links"><a class="vbagn-tel" href="' + telHref + '">' + a.tel + '<\/a>' +
        (a.msg ? '<a class="vbagn-msg" href="' + a.msg + '" rel="noopener">Написать<\/a>' : '') +
        '<\/div><\/div><\/article>';
    }).join('');

    var cards = grid.querySelectorAll('.vbagn-card');
    if (!('IntersectionObserver' in window)) { cards.forEach(function (c) { c.classList.add('is-in'); }); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) {
        if (!e.isIntersecting) return;
        var i = Array.prototype.indexOf.call(cards, e.target);
        e.target.style.transitionDelay = (i % 3) * 60 + 'ms';
        e.target.classList.add('is-in');
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -10% 0px' });
    cards.forEach(function (c) { io.observe(c); });
    setTimeout(function () { cards.forEach(function (c) { c.classList.add('is-in'); }); }, 2500);
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.