/* Single reusable Telegram promotion component across TopMoment public pages. */
.tm-telegram-card {
    box-sizing: border-box;
    min-width: 0;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(55, 171, 235, .42);
    border-radius: 15px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(38, 160, 218, .19), transparent 65%),
        linear-gradient(145deg, #142335, #101922 78%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    color: #f3f8fc;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tm-telegram-card:hover,.tm-telegram-card:focus-within {
    border-color: #41b7f0;
    box-shadow: 0 0 0 1px rgba(54,176,232,.22), 0 9px 26px rgba(8,28,53,.22);
}
.tm-telegram-heading {display:flex;align-items:center;gap:12px;min-width:0}
.tm-telegram-avatar {
    display:block;flex:0 0 68px;width:68px;height:68px;
    border-radius:50%;object-fit:cover;object-position:center center;image-rendering:auto;
    border:2px solid rgba(108,203,247,.65);
    box-shadow:0 0 0 4px rgba(31,151,209,.12);
    background:#172839;
}
.tm-telegram-identity {min-width:0;display:grid;gap:2px}
.tm-telegram-kicker {font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#7dcef9}
.tm-telegram-identity strong {font-size:20px;font-weight:850;line-height:1.15;color:#fff}
.tm-telegram-handle {font-size:12px;font-weight:700;color:#a2bbd1}
.tm-telegram-card .tm-telegram-description {
    max-width:none;margin:0;
    color:#c1d1dd;font-size:13px;line-height:1.5;
}
.tm-telegram-button {
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;min-height:42px;padding:9px 14px;
    border-radius:9px;background:linear-gradient(120deg,#1996d6,#46c5f4);
    color:#041b2b!important;text-decoration:none!important;
    font-size:13px;font-weight:850;line-height:1.25;
    transition:filter .2s ease,transform .2s ease;
}
.tm-telegram-button:hover,.tm-telegram-button:focus-visible {filter:brightness(1.12);transform:translateY(-1px)}
.tm-telegram-button:focus-visible {outline:2px solid #e8f9ff;outline-offset:3px}

/* Homepage: a small, quiet channel shortcut aligned with the brand row. */
.hero>.tm-telegram-hero {
    position:absolute;
    z-index:3;
    top:30px;
    right:34px;
    width:272px;
    max-width:calc(100% - 44px);
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 13px 10px 10px;
    border:1px solid rgba(144,185,214,.25);
    border-radius:999px;
    background:rgba(7,19,32,.68);
    box-shadow:0 6px 22px rgba(0,0,0,.16);
    backdrop-filter:blur(10px);
    text-decoration:none;
    transform:none;
}
.hero>.tm-telegram-hero:hover,.hero>.tm-telegram-hero:focus-visible {
    border-color:rgba(97,194,245,.75);
    background:rgba(12,32,50,.87);
    box-shadow:0 0 0 1px rgba(85,189,241,.12),0 7px 25px rgba(0,0,0,.20);
}
.hero>.tm-telegram-hero .tm-telegram-avatar {
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-width:1px;
    box-shadow:none;
}
.tm-telegram-hero-copy {
    display:grid;
    flex:1;
    gap:3px;
    min-width:0;
    text-align:left;
}
.tm-telegram-hero-overline {
    color:#83d3fd;
    font-size:10px;
    font-weight:800;
    letter-spacing:.025em;
    line-height:1.2;
}
.tm-telegram-hero-copy strong {
    color:#f5f9ff;
    font-size:14px;
    font-weight:800;
    line-height:1.25;
}
.tm-telegram-hero-arrow {
    flex:0 0 auto;
    color:#8ad9ff;
    font-size:19px;
    font-weight:700;
    line-height:1;
}
.hero>.tm-telegram-hero:focus-visible {outline:2px solid #e8f9ff;outline-offset:3px}

/* Below desktop width, keep it in the normal hero flow instead of covering scenery. */
@media (max-width:1120px) {
    .hero>.tm-telegram-hero {
        position:relative;
        top:auto;
        right:auto;
        width:272px;
        max-width:calc(100% - 88px);
        margin:0 44px 88px;
    }
    .hero .hero-content {padding-bottom:20px}
}
@media (max-width:760px) {
    .hero>.tm-telegram-hero {
        width:272px;
        max-width:calc(100% - 44px);
        margin:0 22px 86px;
    }
    .hero .hero-content {padding-bottom:18px}
}
@media (prefers-reduced-motion:reduce) {
    .tm-telegram-card,.tm-telegram-button {transition:none}
}