/* =========================================================
   P2P USDT EXCHANGE
   LANDING PAGE DESIGN
========================================================= */

:root
{
    --bg:
        #060b12;

    --bg-soft:
        #09111c;

    --bg-card:
        #0c1521;

    --bg-card-2:
        #101a27;

    --border:
        rgba(255,255,255,.08);

    --border-soft:
        rgba(255,255,255,.05);

    --gold:
        #f7c928;

    --gold-hover:
        #ffd842;

    --green:
        #13c784;

    --green-dark:
        #083c2d;

    --red:
        #f04455;

    --red-dark:
        #40131b;

    --blue:
        #2196f3;

    --text:
        #f4f7fb;

    --muted:
        #8b98aa;

    --sidebar-width:
        245px;

    --header-height:
        72px;
}


/* =========================================================
   GLOBAL
========================================================= */

*
{
    box-sizing:
        border-box;
}


html
{
    scroll-behavior:
        smooth;
}


body
{
    margin:
        0;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow-x:
        hidden;
}


a
{
    text-decoration:
        none;
}


button,
input,
select
{
    font-family:
        inherit;
}


.landing-body
{
    min-height:
        100vh;

    background:

        radial-gradient(
            circle at 75% 10%,
            rgba(247,201,40,.08),
            transparent 28%
        ),

        radial-gradient(
            circle at 20% 40%,
            rgba(19,199,132,.05),
            transparent 25%
        ),

        var(--bg);
}


/* =========================================================
   COMMON BUTTONS
========================================================= */

.btn
{
    border-radius:
        9px;

    font-weight:
        600;

    transition:
        .2s ease;
}


.btn-gold
{
    background:
        var(--gold);

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

    color:
        #080b10;

    font-weight:
        700;
}


.btn-gold:hover
{
    background:
        var(--gold-hover);

    border-color:
        var(--gold-hover);

    color:
        #05070a;

    transform:
        translateY(-1px);
}


.btn-login
{
    color:
        #dce3ec;

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

    padding:
        8px 18px;
}


.btn-login:hover
{
    color:
        #fff;

    border-color:
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.04);
}


.btn-dark-outline
{
    color:
        #fff;

    border:
        1px solid rgba(255,255,255,.17);

    background:
        rgba(255,255,255,.02);
}


.btn-dark-outline:hover
{
    background:
        #fff;

    color:
        #080b10;
}


/* =========================================================
   TOP HEADER
========================================================= */

.public-topbar
{
    height:
        var(--header-height);

    background:
        rgba(6,11,18,.92);

    backdrop-filter:
        blur(20px);

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

    display:
        flex;

    align-items:
        center;

    position:
        sticky;

    top:
        0;

    z-index:
        1050;
}


.brand
{
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #fff;
}


.brand:hover
{
    color:
        #fff;
}


.brand-coin
{
    width:
        39px;

    height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 39px;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #22d290,
            #0aa66a
        );

    color:
        #fff;

    font-size:
        25px;

    font-weight:
        800;

    box-shadow:
        0 0 25px
        rgba(19,199,132,.22);
}


.brand-text
{
    font-size:
        17px;

    font-weight:
        700;

    line-height:
        17px;

    letter-spacing:
        .4px;
}


.brand-text strong
{
    color:
        var(--gold);
}


.brand-text small
{
    display:
        block;

    font-size:
        9px;

    margin-top:
        4px;

    letter-spacing:
        3px;

    color:
        var(--muted);
}


.public-nav
{
    align-items:
        center;

    gap:
        34px;
}


.public-nav a
{
    position:
        relative;

    color:
        #aeb9c7;

    font-size:
        14px;

    font-weight:
        600;

    padding:
        26px 0;
}


.public-nav a:hover,
.public-nav a.active
{
    color:
        #fff;
}


.public-nav a.active::after
{
    content:
        "";

    position:
        absolute;

    bottom:
        0;

    left:
        0;

    right:
        0;

    height:
        2px;

    border-radius:
        5px;

    background:
        var(--gold);
}


.mobile-menu-btn
{
    width:
        40px;

    height:
        40px;

    color:
        #fff;

    display:
        inline-flex;

    justify-content:
        center;

    align-items:
        center;

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


.mobile-menu-btn i
{
    font-size:
        24px;
}


/* =========================================================
   MOBILE OFFCANVAS
========================================================= */

.mobile-offcanvas
{
    width:
        285px !important;

    background:
        #080f18;

    color:
        #fff;

    border-right:
        1px solid var(--border);
}


.mobile-offcanvas .offcanvas-header
{
    min-height:
        72px;

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


.mobile-menu-label
{
    color:
        #59687b;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    margin:
        10px 10px 7px;
}


.mobile-nav-link
{
    min-height:
        48px;

    padding:
        0 14px;

    border-radius:
        9px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    color:
        #bbc5d1;

    font-size:
        14px;

    margin-bottom:
        3px;
}


.mobile-nav-link i
{
    width:
        20px;

    color:
        #8593a4;

    font-size:
        17px;
}


.mobile-nav-link:hover,
.mobile-nav-link.active
{
    background:
        rgba(247,201,40,.08);

    color:
        var(--gold);
}


.mobile-nav-link.active i
{
    color:
        var(--gold);
}


/* =========================================================
   DESKTOP SIDEBAR
========================================================= */

.landing-sidebar
{
    position:
        fixed;

    left:
        0;

    top:
        var(--header-height);

    width:
        var(--sidebar-width);

    height:
        calc(
            100vh -
            var(--header-height)
        );

    padding:
        22px 14px;

    background:
        #080e17;

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

    z-index:
        900;

    flex-direction:
        column;

    overflow-y:
        auto;
}


.sidebar-block
{
    margin-bottom:
        23px;
}


.side-label
{
    display:
        block;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.4px;

    color:
        #4f5e70;

    padding:
        0 13px;

    margin-bottom:
        7px;
}


.side-link
{
    height:
        44px;

    border-radius:
        8px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        0 13px;

    color:
        #aab5c3;

    font-size:
        13px;

    margin-bottom:
        3px;

    transition:
        .2s ease;
}


.side-link i
{
    width:
        20px;

    text-align:
        center;

    font-size:
        16px;

    color:
        #78889b;
}


.side-link:hover
{
    color:
        #fff;

    background:
        rgba(255,255,255,.04);
}


.side-link.active
{
    color:
        var(--gold);

    background:
        rgba(247,201,40,.08);

    box-shadow:
        inset 2px 0
        var(--gold);
}


.side-link.active i
{
    color:
        var(--gold);
}


.sidebar-security
{
    margin-top:
        auto;

    padding:
        15px;

    display:
        flex;

    gap:
        12px;

    align-items:
        center;

    background:
        rgba(19,199,132,.06);

    border:
        1px solid
        rgba(19,199,132,.15);

    border-radius:
        11px;
}


.sidebar-security > i
{
    color:
        var(--green);

    font-size:
        25px;
}


.sidebar-security strong,
.sidebar-security small
{
    display:
        block;
}


.sidebar-security strong
{
    font-size:
        12px;
}


.sidebar-security small
{
    color:
        var(--muted);

    font-size:
        10px;

    margin-top:
        2px;
}


/* =========================================================
   MAIN
========================================================= */

.landing-main
{
    min-height:
        100vh;
}


@media
(
    min-width:
    1200px
)
{
    .landing-main
    {
        margin-left:
            var(--sidebar-width);
    }
}


/* =========================================================
   HERO
========================================================= */

.landing-hero
{
    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

    padding:
        85px 0 70px;

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

    position:
        relative;

    overflow:
        hidden;
}


.landing-hero::after
{
    content:
        "";

    position:
        absolute;

    width:
        480px;

    height:
        480px;

    right:
        -130px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        rgba(247,201,40,.05);

    filter:
        blur(20px);

    pointer-events:
        none;
}


.hero-chip
{
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--green);

    background:
        rgba(19,199,132,.08);

    border:
        1px solid
        rgba(19,199,132,.18);

    border-radius:
        30px;

    padding:
        8px 13px;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .5px;

    margin-bottom:
        22px;
}


.landing-hero h1
{
    max-width:
        720px;

    font-size:
        clamp(
            40px,
            5vw,
            67px
        );

    line-height:
        1.06;

    font-weight:
        750;

    letter-spacing:
        -2.5px;

    margin:
        0;
}


.landing-hero h1 span
{
    color:
        var(--gold);
}


.hero-description
{
    max-width:
        640px;

    margin:
        25px 0;

    color:
        #99a6b6;

    line-height:
        1.8;

    font-size:
        16px;
}


.hero-buttons .btn
{
    min-height:
        50px;

    padding-left:
        24px;

    padding-right:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;
}


.hero-trust
{
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        23px;

    margin-top:
        27px;
}


.hero-trust div
{
    color:
        #a8b4c2;

    font-size:
        12px;
}


.hero-trust i
{
    color:
        var(--green);

    margin-right:
        5px;
}


/* =========================================================
   MARKET PREVIEW
========================================================= */

.market-preview
{
    position:
        relative;

    padding:
        28px;

    background:

        linear-gradient(
            145deg,
            rgba(16,26,39,.97),
            rgba(8,15,24,.98)
        );

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:
        18px;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.35);
}


.market-preview::before
{
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        35px;

    right:
        35px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(247,201,40,.55),
            transparent
        );
}


.preview-label
{
    display:
        block;

    color:
        var(--muted);

    font-size:
        12px;

    margin-bottom:
        3px;
}


.preview-price
{
    font-size:
        34px;

    font-weight:
        750;

    letter-spacing:
        -.8px;
}


.live-badge
{
    height:
        29px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(19,199,132,.18);

    background:
        rgba(19,199,132,.06);

    border-radius:
        30px;

    color:
        var(--green);

    font-size:
        9px;

    font-weight:
        700;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;
}


.live-badge span
{
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 12px
        var(--green);
}


.preview-stats
{
    margin:
        27px 0;

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        10px;
}


.preview-stats > div
{
    min-height:
        110px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        15px;

    background:
        rgba(255,255,255,.025);

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

    border-radius:
        11px;
}


.preview-stats i
{
    color:
        var(--gold);

    font-size:
        18px;

    margin-bottom:
        11px;
}


.preview-stats span
{
    color:
        var(--muted);

    font-size:
        10px;
}


.preview-stats strong
{
    margin-top:
        3px;

    font-size:
        18px;
}


.quick-trade-title
{
    color:
        #e7edf5;

    font-size:
        13px;

    font-weight:
        650;

    margin-bottom:
        11px;
}


.quick-actions
{
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        11px;
}


.quick-actions > a
{
    min-height:
        76px;

    border-radius:
        11px;

    padding:
        13px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        #fff;
}


.quick-actions > a > div
{
    width:
        39px;

    height:
        39px;

    border-radius:
        50%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex:
        0 0 39px;
}


.quick-actions strong,
.quick-actions small
{
    display:
        block;
}


.quick-actions strong
{
    font-size:
        13px;
}


.quick-actions small
{
    font-size:
        10px;

    margin-top:
        2px;

    opacity:
        .72;
}


.quick-buy
{
    border:
        1px solid
        rgba(19,199,132,.2);

    background:
        rgba(19,199,132,.08);
}


.quick-buy > div
{
    background:
        var(--green);
}


.quick-sell
{
    border:
        1px solid
        rgba(240,68,85,.2);

    background:
        rgba(240,68,85,.08);
}


.quick-sell > div
{
    background:
        var(--red);
}


/* =========================================================
   TRUST STRIP
========================================================= */

.trust-strip
{
    padding:
        18px 0;

    background:
        #080f18;

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


.trust-strip-grid
{
    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);
}


.trust-strip-grid > div
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        55px;

    border-right:
        1px solid var(--border);
}


.trust-strip-grid > div:last-child
{
    border-right:
        0;
}


.trust-strip-grid i
{
    color:
        var(--gold);

    font-size:
        23px;
}


.trust-strip-grid strong,
.trust-strip-grid small
{
    display:
        block;
}


.trust-strip-grid strong
{
    font-size:
        12px;
}


.trust-strip-grid small
{
    font-size:
        10px;

    color:
        var(--muted);

    margin-top:
        2px;
}


/* =========================================================
   SECTIONS
========================================================= */

.landing-section
{
    padding:
        85px 0;
}


.section-dark
{
    background:
        #080f18;

    border-top:
        1px solid var(--border-soft);

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


.section-heading
{
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        25px;

    margin-bottom:
        30px;
}


.section-eyebrow
{
    display:
        block;

    color:
        var(--gold);

    font-size:
        11px;

    font-weight:
        750;

    letter-spacing:
        1.4px;

    margin-bottom:
        7px;
}


.section-heading h2,
.section-center-title h2
{
    font-size:
        clamp(
            28px,
            4vw,
            39px
        );

    font-weight:
        700;

    letter-spacing:
        -1px;

    margin:
        0 0 9px;
}


.section-heading p,
.section-center-title p
{
    color:
        var(--muted);

    margin:
        0;

    max-width:
        660px;

    line-height:
        1.7;
}


.section-center-title
{
    max-width:
        700px;

    margin:
        0 auto 25px;
}


/* =========================================================
   MARKET
========================================================= */

.btn-market-all
{
    color:
        var(--gold);

    border:
        1px solid
        rgba(247,201,40,.3);

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;
}


.btn-market-all:hover
{
    background:
        var(--gold);

    color:
        #090b0f;
}


.market-container
{
    background:
        #0a121d;

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

    border-radius:
        15px;

    overflow:
        hidden;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.17);
}


.market-topbar
{
    padding:
        18px;

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

    background:
        #0c1521;
}


.market-tabs
{
    gap:
        5px;

    margin-bottom:
        16px;
}


.market-tabs button
{
    min-width:
        110px;

    height:
        38px;

    border:
        0;

    background:
        rgba(255,255,255,.025);

    color:
        #9ba7b6;

    border-radius:
        7px;

    font-size:
        13px;

    font-weight:
        650;
}


.market-tabs button.active
{
    color:
        #07100b;

    background:
        var(--green);
}


.market-filter-row
{
    display:
        grid;

    grid-template-columns:
        1.2fr 1fr .7fr;

    gap:
        10px;
}


.market-filter
{
    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 14px;

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

    border-radius:
        8px;

    background:
        #080f18;
}


.market-filter span
{
    display:
        none;
}


.market-filter strong
{
    color:
        #9ba8b8;

    font-size:
        12px;

    font-weight:
        500;
}


.market-filter small,
.market-filter i
{
    margin-left:
        auto;

    color:
        #718095;

    font-size:
        11px;
}


.ad-table-head
{
    grid-template-columns:
        2fr
        .8fr
        1.35fr
        1.4fr
        .75fr;

    gap:
        20px;

    align-items:
        center;

    padding:
        13px 20px;

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

    background:
        rgba(255,255,255,.015);

    color:
        #647387;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .4px;
}


.market-ad
{
    display:
        grid;

    grid-template-columns:
        2fr
        .8fr
        1.35fr
        1.4fr
        .75fr;

    align-items:
        center;

    gap:
        20px;

    padding:
        20px;

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

    transition:
        .2s ease;
}


.market-ad:last-child
{
    border-bottom:
        0;
}


.market-ad:hover
{
    background:
        rgba(255,255,255,.018);
}


.merchant-column
{
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        0;
}


.merchant-avatar
{
    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    justify-content:
        center;

    align-items:
        center;

    flex:
        0 0 42px;

    border-radius:
        50%;

    color:
        #07140e;

    background:
        linear-gradient(
            145deg,
            #37e3a2,
            #0fa66c
        );

    font-weight:
        750;

    font-size:
        13px;
}


.sell-avatar
{
    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            #ff6d7b,
            #d92c42
        );
}


.merchant-name
{
    font-size:
        13px;

    font-weight:
        650;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.merchant-name i
{
    color:
        var(--gold);

    margin-left:
        3px;

    font-size:
        12px;
}


.merchant-meta
{
    margin-top:
        4px;

    color:
        #69788b;

    font-size:
        10px;
}


.merchant-meta span
{
    margin:
        0 3px;
}


.price-column small
{
    display:
        none;
}


.price-column strong
{
    color:
        var(--green);

    font-size:
        17px;

    font-weight:
        700;
}


.price-column.sell-price strong
{
    color:
        var(--red);
}


.limit-column span,
.limit-column small
{
    display:
        block;
}


.limit-column span
{
    color:
        #e7edf5;

    font-size:
        12px;

    font-weight:
        550;
}


.limit-column small
{
    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        10px;
}


.payment-column
{
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;
}


.payment-tag
{
    padding:
        4px 7px;

    border:
        1px solid
        rgba(33,150,243,.2);

    background:
        rgba(33,150,243,.06);

    color:
        #7dbfff;

    border-radius:
        4px;

    font-size:
        9px;
}


.trade-column
{
    text-align:
        right;
}


.btn-buy-usdt,
.btn-sell-usdt
{
    min-width:
        100px;

    font-size:
        12px;

    font-weight:
        700;

    border:
        0;
}


.btn-buy-usdt
{
    color:
        #fff;

    background:
        var(--green);
}


.btn-buy-usdt:hover
{
    color:
        #fff;

    background:
        #0eb475;
}


.btn-sell-usdt
{
    color:
        #fff;

    background:
        var(--red);
}


.btn-sell-usdt:hover
{
    color:
        #fff;

    background:
        #dc394a;
}


.market-empty
{
    padding:
        55px 20px;

    text-align:
        center;
}


.market-empty i
{
    font-size:
        34px;

    color:
        #4d5c6e;
}


.market-empty h5
{
    margin:
        12px 0 5px;
}


.market-empty p
{
    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.step-card
{
    position:
        relative;

    min-height:
        270px;

    padding:
        25px;

    background:
        #0c1521;

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

    border-radius:
        14px;

    transition:
        .25s ease;
}


.step-card:hover
{
    transform:
        translateY(-5px);

    border-color:
        rgba(247,201,40,.2);
}


.step-number
{
    position:
        absolute;

    right:
        18px;

    top:
        15px;

    color:
        rgba(247,201,40,.12);

    font-size:
        42px;

    font-weight:
        800;
}


.step-icon
{
    width:
        48px;

    height:
        48px;

    border-radius:
        11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--gold);

    background:
        rgba(247,201,40,.08);

    border:
        1px solid
        rgba(247,201,40,.14);

    font-size:
        21px;

    margin-bottom:
        37px;
}


.step-card h4
{
    font-size:
        17px;

    margin-bottom:
        10px;
}


.step-card p
{
    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.7;

    margin:
        0;
}


/* =========================================================
   STAKING
========================================================= */

.staking-card
{
    height:
        100%;

    padding:
        23px;

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

    border-radius:
        14px;

    background:

        linear-gradient(
            145deg,
            #0d1723,
            #09111b
        );

    position:
        relative;

    overflow:
        hidden;

    transition:
        .25s ease;
}


.staking-card::before
{
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    opacity:
        .7;
}


.staking-card:hover
{
    transform:
        translateY(-5px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.2);
}


.staking-top
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        20px;
}


.staking-icon
{
    width:
        43px;

    height:
        43px;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(247,201,40,.08);

    color:
        var(--gold);

    font-size:
        19px;
}


.staking-duration
{
    padding:
        5px 9px;

    border-radius:
        20px;

    font-size:
        9px;

    font-weight:
        700;

    color:
        var(--green);

    background:
        rgba(19,199,132,.07);
}


.staking-card h4
{
    font-size:
        17px;

    margin-bottom:
        9px;
}


.staking-apr
{
    color:
        var(--gold);

    font-size:
        36px;

    font-weight:
        750;

    letter-spacing:
        -1px;

    margin-bottom:
        20px;
}


.staking-apr small
{
    font-size:
        11px;

    color:
        var(--muted);

    letter-spacing:
        0;
}


.staking-details
{
    border-top:
        1px solid var(--border);

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

    padding:
        13px 0;

    margin-bottom:
        18px;
}


.staking-details > div
{
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    min-height:
        31px;

    font-size:
        11px;
}


.staking-details span
{
    color:
        var(--muted);
}


.staking-details strong
{
    font-weight:
        600;

    color:
        #dbe3ec;
}


.btn-stake
{
    width:
        100%;

    min-height:
        42px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--gold);

    border:
        1px solid
        rgba(247,201,40,.3);

    background:
        rgba(247,201,40,.02);
}


.btn-stake:hover
{
    background:
        var(--gold);

    color:
        #080b10;
}


/* =========================================================
   SECURITY
========================================================= */

.security-card
{
    min-height:
        175px;

    padding:
        25px 18px;

    text-align:
        center;

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

    background:
        #0c1521;

    border-radius:
        13px;
}


.security-card > span
{
    width:
        48px;

    height:
        48px;

    margin:
        0 auto 15px;

    border-radius:
        50%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:
        rgba(247,201,40,.08);

    color:
        var(--gold);

    font-size:
        21px;
}


.security-card strong,
.security-card small
{
    display:
        block;
}


.security-card strong
{
    font-size:
        13px;
}


.security-card small
{
    color:
        var(--muted);

    margin-top:
        6px;

    font-size:
        10px;
}


/* =========================================================
   CTA
========================================================= */

.landing-cta
{
    padding:
        70px 0;
}


.cta-box
{
    border-radius:
        18px;

    padding:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    background:

        linear-gradient(
            110deg,
            #f5c72b,
            #d9a900
        );

    color:
        #080b10;

    box-shadow:
        0 25px 70px
        rgba(247,201,40,.09);
}


.cta-box span
{
    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.4px;
}


.cta-box h2
{
    font-size:
        31px;

    font-weight:
        750;

    margin:
        6px 0;
}


.cta-box p
{
    margin:
        0;

    font-size:
        13px;

    opacity:
        .75;
}


/* =========================================================
   FOOTER
========================================================= */

.public-footer
{
    padding:
        65px 0 100px;

    background:
        #050a10;

    border-top:
        1px solid var(--border);
}


.footer-description
{
    max-width:
        450px;

    margin-top:
        15px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.8;
}


.public-footer h6
{
    font-size:
        13px;

    margin-bottom:
        17px;
}


.public-footer .col-lg-2 > a
{
    display:
        block;

    color:
        var(--muted);

    font-size:
        12px;

    margin-bottom:
        11px;
}


.public-footer .col-lg-2 > a:hover
{
    color:
        var(--gold);
}


.footer-risk
{
    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.7;
}


.footer-bottom
{
    margin-top:
        42px;

    padding-top:
        20px;

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

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #5d6b7d;

    font-size:
        10px;
}


/* =========================================================
   MOBILE BOTTOM NAV
========================================================= */

.mobile-bottom-nav
{
    position:
        fixed;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        64px;

    background:
        rgba(7,13,21,.97);

    backdrop-filter:
        blur(20px);

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

    display:
        grid;

    grid-template-columns:
        repeat(5,1fr);

    z-index:
        1040;
}


.mobile-bottom-nav a
{
    color:
        #707f92;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        3px;

    font-size:
        9px;
}


.mobile-bottom-nav a i
{
    font-size:
        17px;
}


.mobile-bottom-nav a:hover,
.mobile-bottom-nav a.active
{
    color:
        var(--gold);
}


/* =========================================================
   TABLET
========================================================= */

@media
(
    max-width:
    991.98px
)
{

    .landing-hero
    {
        padding:
            65px 0;
    }


    .landing-hero h1
    {
        font-size:
            47px;
    }


    .market-preview
    {
        max-width:
            650px;

        margin:
            0 auto;
    }


    .trust-strip-grid
    {
        grid-template-columns:
            1fr 1fr;
    }


    .trust-strip-grid > div
    {
        justify-content:
            flex-start;

        padding:
            10px 20px;
    }


    .trust-strip-grid > div:nth-child(2)
    {
        border-right:
            0;
    }


    .market-ad
    {
        grid-template-columns:
            1.6fr
            .8fr
            1fr
            .7fr;

        gap:
            14px;
    }


    .payment-column
    {
        display:
            none;
    }

}


/* =========================================================
   MOBILE MARKET CARDS
========================================================= */

@media
(
    max-width:
    767.98px
)
{

    body
    {
        padding-bottom:
            64px;
    }


    .public-topbar
    {
        height:
            64px;
    }


    .brand-coin
    {
        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;

        font-size:
            21px;
    }


    .brand-text
    {
        font-size:
            14px;

        line-height:
            14px;
    }


    .brand-text small
    {
        font-size:
            7px;

        letter-spacing:
            2px;
    }


    .landing-hero
    {
        min-height:
            auto;

        padding:
            55px 0 50px;
    }


    .landing-hero h1
    {
        font-size:
            38px;

        letter-spacing:
            -1.5px;
    }


    .hero-description
    {
        font-size:
            14px;

        line-height:
            1.7;
    }


    .hero-buttons
    {
        display:
            grid !important;

        grid-template-columns:
            1fr 1fr;
    }


    .hero-buttons .btn
    {
        justify-content:
            center;

        padding:
            12px;

        font-size:
            12px;
    }


    .hero-trust
    {
        gap:
            14px;

        margin-top:
            20px;
    }


    .hero-trust div
    {
        font-size:
            10px;
    }


    .market-preview
    {
        padding:
            19px;

        border-radius:
            14px;
    }


    .preview-price
    {
        font-size:
            27px;
    }


    .preview-stats
    {
        gap:
            6px;
    }


    .preview-stats > div
    {
        min-height:
            90px;

        padding:
            10px;
    }


    .preview-stats span
    {
        font-size:
            8px;
    }


    .preview-stats strong
    {
        font-size:
            14px;
    }


    .quick-actions
    {
        grid-template-columns:
            1fr;
    }


    .trust-strip
    {
        display:
            none;
    }


    .landing-section
    {
        padding:
            55px 0;
    }


    .section-heading
    {
        align-items:
            flex-start;

        flex-direction:
            column;

        margin-bottom:
            22px;
    }


    .section-heading h2,
    .section-center-title h2
    {
        font-size:
            29px;
    }


    .section-heading p,
    .section-center-title p
    {
        font-size:
            13px;
    }


    .market-container
    {
        border-radius:
            11px;

        overflow:
            visible;

        border:
            0;

        background:
            transparent;
    }


    .market-topbar
    {
        padding:
            12px;

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

        border-radius:
            11px;

        margin-bottom:
            10px;
    }


    .market-tabs
    {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;
    }


    .market-tabs button
    {
        width:
            100%;
    }


    .market-filter-row
    {
        grid-template-columns:
            1fr 1fr;
    }


    .market-filter
    {
        min-width:
            0;

        min-height:
            46px;

        padding:
            0 10px;
    }


    .market-filter strong
    {
        white-space:
            nowrap;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }


    .market-ad
    {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            15px;

        margin-bottom:
            10px;

        padding:
            16px;

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

        border-radius:
            11px;

        background:
            #0a121d;
    }


    .merchant-column
    {
        grid-column:
            1 / 3;
    }


    .merchant-avatar
    {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;

        font-size:
            11px;
    }


    .merchant-name
    {
        font-size:
            12px;
    }


    .price-column small
    {
        display:
            block;

        color:
            var(--muted);

        font-size:
            9px;

        margin-bottom:
            3px;
    }


    .price-column strong
    {
        font-size:
            17px;
    }


    .limit-column
    {
        text-align:
            right;
    }


    .limit-column span
    {
        font-size:
            11px;
    }


    .payment-column
    {
        display:
            flex;

        grid-column:

            1 / 3;
    }


    .trade-column
    {
        grid-column:
            1 / 3;
    }


    .btn-buy-usdt,
    .btn-sell-usdt
    {
        width:
            100%;

        min-height:
            42px;
    }


    .step-card
    {
        min-height:
            220px;
    }


    .cta-box
    {
        padding:
            27px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .cta-box h2
    {
        font-size:
            25px;
    }


    .cta-box .btn
    {
        width:
            100%;
    }


    .public-footer
    {
        padding:
            50px 0 90px;
    }


    .footer-bottom
    {
        flex-direction:
            column;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media
(
    max-width:
    420px
)
{

    .landing-hero h1
    {
        font-size:
            34px;
    }


    .hero-buttons
    {
        grid-template-columns:
            1fr;
    }


    .preview-stats
    {
        grid-template-columns:
            1fr 1fr 1fr;
    }


    .preview-stats > div
    {
        padding:
            8px;
    }


    .preview-stats i
    {
        font-size:
            15px;
    }


    .preview-stats strong
    {
        font-size:
            12px;
    }


    .section-heading h2,
    .section-center-title h2
    {
        font-size:
            26px;
    }

}