/* Футер: карточка «Наш Telegram». Префикс tgx-, ничего не задевает в footer_fx.css. */
.tgx { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; box-sizing: border-box; overflow: hidden; border-radius: 16px; text-decoration: none !important;
    background: radial-gradient(120% 140% at 0% 0%, rgba(42,171,238,.28), transparent 60%), linear-gradient(135deg, #12202b 0%, #0d161c 100%);
    border: 1px solid rgba(42,171,238,.5); box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 18px rgba(42,171,238,.12); -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tgx::before { content: ""; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; transform: skewX(-20deg); pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); animation: tgxShine 5s ease-in-out infinite; }
.tgx:hover, .tgx:focus-visible { transform: translateY(-2px); border-color: rgba(78,196,255,.85); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 26px rgba(42,171,238,.32); }
.tgx:active { transform: translateY(0) scale(.99); }
.tgx:focus-visible { outline: 2px solid #4ec4ff; outline-offset: 2px; }
.tgx-ico { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #37b7f5, #1b8fd0); box-shadow: 0 0 14px rgba(42,171,238,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.tgx-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 17px; border: 1px solid rgba(42,171,238,.6); animation: tgxPulse 2.6s ease-out infinite; }
.tgx-ico img { width: 24px; height: 24px; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); transition: transform .25s ease; }
.tgx:hover .tgx-ico img { transform: translate(2px, -2px) rotate(-8deg); }
.tgx-tx { flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.25; }
.tgx-tx b { display: block; font-size: 14px; font-weight: 800; letter-spacing: .2px; color: #e9f6fd; }
.tgx-tx small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: #84aabf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgx-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 10px; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #fff !important;
    background: linear-gradient(135deg, #2aabee, #1a86c4); box-shadow: 0 0 12px rgba(42,171,238,.45); }
.tgx-go i { font-style: normal; font-size: 15px; line-height: 1; transition: transform .18s ease; }
.tgx:hover .tgx-go i { transform: translateX(3px); }
@keyframes tgxShine { 0%, 55% { left: -70%; } 100% { left: 150%; } }
@keyframes tgxPulse { 0% { transform: scale(.92); opacity: .85; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
@media (max-width: 340px) { .tgx { gap: 9px; padding: 9px 10px; } .tgx-tx small { display: none; } .tgx-go { padding: 7px 10px; } }
@media (prefers-reduced-motion: reduce) { .tgx::before, .tgx-ico::after { animation: none; } .tgx, .tgx-ico img, .tgx-go i { transition: none; } }