/* ============================================================
   AGI — 專案自訂覆蓋（不要動外掛 CSS，改這裡）
   ============================================================ */

:root {
    --max-width: 540px;
}

#app-header, #bottom-nav, .stake-sheet-wrap {
    width: 100%;
    max-width: var(--max-width);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin-right: auto !important;
    margin-left: auto !important;
}

/* header / bottom-nav 固定在 540px 中間 */
#app-header {
    padding: 10px;
}

#bottom-nav {
    display: flex;
}

/* Bootstrap 把所有 .modal 設成 display:none，
   自訂 modal-wrapper 裡的 .modal 要覆蓋回來 */
.modal-wrapper .modal {
    display: block;
    position: initial;
}

/* components.css 的 .modal { opacity:0; transform:scale(.92) } 會干擾 Bootstrap modal，
   用更高優先度的選擇器在最後載入的 CSS 覆蓋回來 */
.modal.fade {
    transform: none;
    max-width: 100vw;
    max-height: 100vh;
}

    .modal.fade.show {
        opacity: 1;
    }

#wallet-modal {
    height: auto;
}

.page-wrapper {
    padding-top: calc(var(--header-h) + var(--sp-4));
}

.page-hero {
    padding: initial !important;
}

.features-scroll {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    width: var(--max-width);
}

.feature-card {
    flex-shrink: 0;
    width: 240px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    scroll-snap-align: start;
    transition: var(--t-base);
    animation: featureCardEnter 0.55s ease both;
}

.home-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.home-step {
    flex-direction: initial;
    padding: var(--sp-5) 0;
    background: var(--sp-5) 0;
    border: initial;
    border-radius: initial;
}

    .home-step:not(:last-child)::after {
        display: block;
        content: '';
        position: absolute;
        left: 19px;
        top: calc(var(--sp-5) + 40px);
        width: 2px;
        height: calc(100% - 40px);
        background: linear-gradient(to bottom, rgba(255, 107, 43, 0.40), rgba(255, 107, 43, 0.08));
    }

.wp-stats {
    grid-template-columns: repeat(2, 1fr) !important;
}

.wp-case-cards {
    grid-template-columns: 1fr;
}

.buy-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}

.staking-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}