/* Page-specific styles for trading-platforms-overview.html */
/* Fix: ensure fixed header is composited properly, preventing scroll ghosting in Chrome */
#mainHeader {
    will-change: transform;
}

/* Header placeholder for fixed header */
#header-placeholder {
    height: 120px !important;
}

@media only screen and (max-width: 768px) {
    #header-placeholder {
        height: 90px !important;
    }
}

.tmgm-header-wrapper {
    height: auto !important;
    max-height: 420px !important;
    overflow: visible !important;
    background-size: cover !important;
    padding-top: 80px !important;
}

/* Ensure #main doesn't clip content on this page */
body #main {
    overflow: visible !important;
    padding-bottom: 120px;
    padding-top: 120px !important;
}

@media only screen and (max-width: 768px) {
    body #main {
        padding-bottom: 160px;
        padding-top: 100px !important;
    }
}

/* Override header padding so buttons stay inside the blue area */
.tmgm-header-page-content {
    padding-top: 140px !important;
    padding-bottom: 10px !important;
}

@media only screen and (max-width: 768px) {
    .tmgm-header-wrapper {
        height: 350px !important;
        overflow: visible !important;
    }
}

/* ====== Banner Buttons ====== */
.start-trading-cta-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.start-trading-cta-container .btn.btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    border-radius: 50px;
    border: none;
    background: linear-gradient(93deg, #FFF -9.82%, #FFF 109.98%);
    box-shadow: 0px 4px 24px 0px #0CC5EB;
    font-size: 16px;
    font-weight: 700;
    color: #0d2366;
    cursor: pointer;
    transition: all .25s ease;
}
.start-trading-cta-container .btn.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 30px 0px #0CC5EB;
}

.try-demo {
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .25s ease;
}
.try-demo:hover { opacity: .8; }
.try-demo-mobile {
    display: none;
}

@media only screen and (max-width: 768px) {
    .start-trading-cta-container {
        flex-direction: column;
        gap: .75rem;
        align-items: stretch;
    }
    .try-demo { display: none; }
    .try-demo-mobile { display: block; }
    .try-demo-mobile .btn.btn-outline-light {
        width: 100%;
        padding: 12px 28px;
        border-radius: 50px;
        border: 2px solid rgba(255,255,255,.5);
        background: transparent;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all .25s ease;
    }
    .try-demo-mobile .btn.btn-outline-light:hover {
        background: rgba(255,255,255,.12);
    }
}

.btn-white-glow {
            /* border-radius: 4.422px; */
            background: linear-gradient(93deg, #FFF -9.82%, #FFF 109.98%);
            box-shadow: 0px 3.758px 36.645px 0px #0CC5EB;
        }

        .explore-button {
            background: linear-gradient(270deg, #22D1EE 0%, #3D5AF1 100%);
        }

        .platform-active-tab {
            background: linear-gradient(90deg, #26B1F2 0%, #2885C9 25%, #1C4389 75%, #26B1F2 100%);
            background-size: 200% 200%;
            color: white !important;
            -webkit-animation: AnimationName 5s ease infinite;
            -moz-animation: AnimationName 5s ease infinite;
            animation: AnimationName 5s ease infinite;
        }

        .platform-inactive-tab {
            color: #777474;
            background: #DFE7EC;
        }

        /* 面板显隐：默认隐藏，有 panel-show 类的才显示 */
        .platform-content-panel {
            display: none !important;
        }
        .platform-content-panel.panel-show {
            display: grid !important;
        }

        @-webkit-keyframes AnimationName {
            0% {
                background-position: 100% 50%
            }

            100% {
                background-position: -100% 50%
            }
        }

        @-moz-keyframes AnimationName {
            0% {
                background-position: 100% 50%
            }

            100% {
                background-position: -100% 50%
            }
        }

        @keyframes AnimationName {
            0% {
                background-position: 100% 50%
            }

            100% {
                background-position: -100% 50%
            }
        }

        .platform-mobile-title {
            color: radial-gradient(98.18% 221.55% at 0% 4.51%, #24BFFF 0%, #2960A6 59.9%, #000850 100%)
                /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
            ;
        }