/* TELECAT TABS */

.telecat-tabs {

    display: flex;

    padding: 10px 16px;

    gap: 6px;

    background: var(--surface);

    border-bottom: 1px solid var(--border);

}

.telecat-tab {

    padding: 8px 18px;

    border-radius: 24px;

    background: transparent;

    border: none;

    color: var(--text2);

    cursor: pointer;

    font-size: 13px;

    font-weight: 500;

    transition: all .2s ease;

    display: flex;

    align-items: center;

    gap: 6px;

}

.telecat-tab.active {

    background: var(--primary);

    color: white;

    box-shadow: 0 2px 12px var(--primary-glow);

}

.telecat-tab:hover:not(.active) {

    background: var(--surface2);

    color: var(--text);

}

/* TELECAT BANNER */

.telecat-banner {

    background: linear-gradient(135deg, var(--primary), var(--accent));

    padding: 44px 24px;

    text-align: center;

    position: relative;

    overflow: hidden;

}

.telecat-banner::before {

    content: "";

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%);

    animation: bannerPulse 4s infinite;

}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@keyframes bannerPulse {

    0%, 100% { transform: scale(1); opacity: 0.5; }

    50% { transform: scale(1.1); opacity: 0.8; }

}

.telecat-banner h2 {

    font-size: 22px;

    margin-bottom: 8px;

    position: relative;

    font-weight: 700;

}

.telecat-banner p {

    opacity: 0.85;

    font-size: 14px;

    position: relative;

}