/* =========================================================
   欧易 / 币安 黑金落地页
   PC 双栏 + 手机真正双栏适配
   适配现有 index.html 结构，不需要改 HTML
   ========================================================= */

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    background:#020202;
    color:#fff;
    font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
    overflow-x:hidden;
}

body{
    position:relative;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

.page-bg{
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 7%,rgba(255,190,50,.24),transparent 18%),
        radial-gradient(circle at 50% 35%,rgba(255,170,30,.10),transparent 30%),
        linear-gradient(180deg,#030303 0%,#070707 48%,#020202 100%);
}

.page-glow{
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 30%,rgba(255,194,77,.10),transparent 24%),
        radial-gradient(circle at 50% 95%,rgba(255,170,30,.08),transparent 30%);
}

.wrapper{
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:14px;
}

/* ================= 顶部 ================= */

.hero{
    text-align:center;
}

.hero-top{
    display:none;
}

.hero-light{
    width:100%;
    height:26px;
    position:relative;
    margin-top:0;
}

.hero-light:before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:170px;
    height:2px;
    transform:translate(-50%,-50%);
    background:linear-gradient(90deg,transparent,#ffc85d,transparent);
    box-shadow:0 0 18px rgba(255,205,92,.55);
}

.hero-light:after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:18px;
    height:18px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,#ffe39c 0%,#ffba34 48%,rgba(255,186,52,0) 72%);
    box-shadow:0 0 22px rgba(255,189,65,.85);
}

.hero-title{
    margin:0;
    font-size:64px;
    line-height:1.08;
    font-weight:900;
    letter-spacing:2px;
    color:#f4cf73;
    text-shadow:
        0 0 2px #fff0b6,
        0 0 10px rgba(255,194,80,.45),
        0 2px 0 #8e5b0c,
        0 4px 0 #5c3706,
        0 0 24px rgba(255,186,58,.32);
}

.hero-sub-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:14px;
}

.sub-line{
    width:90px;
    height:1px;
    background:linear-gradient(90deg,transparent,#c89228,transparent);
}

.hero-sub{
    margin:0;
    color:#e8c870;
    font-size:17px;
    letter-spacing:3px;
}

.earth-line{
    position:relative;
    width:100%;
    height:65px;
    margin:12px auto 8px;
    overflow:hidden;
}

.earth-line:before{
    content:"";
    position:absolute;
    left:50%;
    top:24px;
    width:150%;
    height:220px;
    transform:translateX(-50%);
    border-top:2px solid rgba(255,201,90,.95);
    border-radius:50%;
    box-shadow:0 0 22px rgba(255,193,72,.45);
}

.earth-line:after{
    content:"";
    position:absolute;
    left:50%;
    top:8px;
    width:100%;
    height:62px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center,rgba(255,201,90,.15),transparent 68%);
}

.feature-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:nowrap;
    margin-bottom:16px;
    color:#e3b94c;
    font-size:16px;
}

.feature-item{
    white-space:nowrap;
}

.divider{
    width:1px;
    height:25px;
    background:rgba(228,185,76,.45);
    flex:0 0 auto;
}

/* ================= 卡片 ================= */

.cards-wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:16px;
    align-items:stretch;
}

.exchange-card{
    position:relative;
    min-width:0;
    padding:1px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(255,213,104,.88),rgba(120,74,10,.42));
    box-shadow:0 0 28px rgba(255,190,70,.14);
    overflow:hidden;
}

.exchange-card:before{
    content:"";
    position:absolute;
    left:50%;
    top:-11px;
    width:20px;
    height:20px;
    transform:translateX(-50%) rotate(45deg);
    background:#090909;
    border-top:1px solid rgba(255,196,81,.6);
    border-left:1px solid rgba(255,196,81,.6);
}

.card-inner{
    height:100%;
    min-width:0;
    padding:20px 16px 16px;
    border-radius:23px;
    background:
        radial-gradient(circle at 50% 0%,rgba(255,197,74,.12),transparent 24%),
        linear-gradient(180deg,#0a0a0a 0%,#070707 100%);
    overflow:visible;
}

.logo-block{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
}

.logo-img{
    width:auto;
    max-width:260px;
    max-height:76px;
    object-fit:contain;
    margin:0 auto;
}

.exchange-desc{
    margin:4px 0 16px;
    color:#e5c770;
    font-size:17px;
    line-height:1.5;
    text-align:center;
}

/* ================= 3D 手机 ================= */

.phone-shell{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:4px 0 -24px;
    overflow:visible;
    position:relative;
    z-index:1;
}

.phone-frame{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.phone-frame:before{
    display:none !important;
    content:none !important;
}

.screen-img{
    width:100%;
    max-width:370px;
    height:auto;
    object-fit:contain;
    margin:0 auto;
    border:0;
    border-radius:0;
    background:transparent;
    transform:scale(1.14);
    transform-origin:center top;
    filter:
        drop-shadow(0 22px 32px rgba(0,0,0,.65))
        drop-shadow(0 0 18px rgba(255,190,70,.16));
}

/* ================= 按钮 ================= */

.btn-group{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:relative;
    z-index:5;
    margin-top:-28px;
}

.action-btn{
    position:relative;
    min-width:0;
    min-height:96px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:16px 18px;
    border:1.5px solid rgba(255,210,98,.85);
    border-radius:21px;
    color:#fff;
    background:
        linear-gradient(90deg,rgba(20,16,8,.99) 0%,rgba(75,50,14,.97) 28%,rgba(193,137,39,.95) 100%);
    box-shadow:
        inset 0 0 22px rgba(255,221,130,.10),
        0 0 22px rgba(255,185,45,.22);
}

.btn-left{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
}

.btn-left img{
    width:44px;
    height:44px;
    object-fit:contain;
    flex:0 0 44px;
    margin-left:12px;
}

.btn-text-wrap{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:62%;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    text-align:center;
    pointer-events:none;
}

.btn-text-wrap strong{
    color:#fff5d2;
    font-size:23px;
    line-height:1.15;
    font-weight:800;
}

.btn-text-wrap small{
    color:#d4b167;
    font-size:13px;
    line-height:1.25;
}

.btn-arrow{
    flex:0 0 auto;
    color:#f0d58a;
    font-size:38px;
    line-height:1;
}

/* ================= 底部 ================= */

.bottom-bar{
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    padding:12px 9px;
    border:1px solid rgba(255,195,69,.55);
    border-radius:22px;
    background:#0b0b0b;
    box-shadow:0 0 20px rgba(255,182,50,.10);
}

.bottom-item{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.bottom-item img{
    width:38px;
    height:38px;
    object-fit:contain;
    flex:0 0 38px;
}

.bottom-item strong{
    display:block;
    color:#f0d27f;
    font-size:15px;
    line-height:1.2;
    font-weight:700;
}

.bottom-item small{
    display:block;
    margin-top:2px;
    color:#c3a15d;
    font-size:11px;
    line-height:1.2;
}

.copyright{
    padding:14px 0 5px;
    color:#cda957;
    font-size:14px;
    text-align:center;
}

.lock-icon{
    margin-right:6px;
}

/* =========================================================
   手机真正双栏版：375 / 390 / 430 宽度重点适配
   ========================================================= */

/* =========================================================
   手机端专用双栏布局
   重点：不是把 PC 整体缩小，而是单独重排手机端尺寸
   ========================================================= */
@media (max-width:768px){

    html{
        -webkit-text-size-adjust:100%;
        text-size-adjust:100%;
    }

    body{
        width:100%;
        min-width:0;
        overflow-x:hidden;
    }

    .wrapper{
        width:100%;
        max-width:none;
        margin:0;
        padding:8px 7px 10px;
    }

    /* 顶部：减少空白，标题保持手机端可读尺寸 */
    .hero{
        width:100%;
        padding:0;
    }

    .hero-top,
    .hero-light,
    .earth-line,
    .sub-line{
        display:none !important;
    }

    .hero-title{
        margin:6px 0 4px;
        font-size:32px;
        line-height:1.08;
        letter-spacing:0;
        white-space:nowrap;
        text-align:center;
    }

    .hero-sub-wrap{
        display:block;
        margin:7px 0 9px;
    }

    .hero-sub{
        margin:0;
        font-size:12px;
        line-height:1.3;
        letter-spacing:.5px;
        white-space:nowrap;
        text-align:center;
    }

    .feature-row{
        width:100%;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:0;
        margin:0 0 8px;
        padding:0 2px;
        font-size:10.5px;
        line-height:1.2;
        color:#e3b94c;
        overflow:visible;
    }

    .feature-item{
        min-width:0;
        text-align:center;
        white-space:nowrap;
    }

    .divider{
        display:none;
    }

    /* 核心：两个平台在手机端仍然左右并排 */
    .cards-wrap{
        width:100%;
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:8px;
        align-items:stretch;
    }

    .exchange-card{
        width:100%;
        min-width:0;
        margin:0;
        padding:1px;
        border-radius:18px;
        overflow:hidden;
    }

    .exchange-card:before{
        display:none;
    }

    .card-inner{
        width:100%;
        height:100%;
        min-width:0;
        padding:10px 8px 8px;
        border-radius:17px;
        overflow:hidden;
    }

    .logo-block{
        min-height:48px;
        height:48px;
        margin-bottom:4px;
        justify-content:center;
    }

    .logo-img{
        width:auto;
        max-width:142px;
        max-height:46px;
        margin:0 auto;
    }

    .exchange-desc{
        min-height:24px;
        margin:2px 0 7px;
        font-size:10.5px;
        line-height:1.3;
        text-align:center;
    }

    /* 3D 手机：比之前明显放大 */
    .phone-shell{
        position:relative;
        z-index:1;
        width:100%;
        height:175px;
        margin:0 0 -12px;
        display:flex;
        justify-content:center;
        align-items:flex-start;
        overflow:visible;
    }

    .phone-frame{
        width:100%;
        height:100%;
        padding:0;
        margin:0;
        display:flex;
        justify-content:center;
        align-items:flex-start;
        background:transparent;
        box-shadow:none;
    }

    .phone-frame:before{
        display:none !important;
        content:none !important;
    }

    .screen-img{
        width:auto;
        height:auto;
        max-width:118%;
        max-height:185px;
        margin:0 auto;
        object-fit:contain;
        transform:none;
        transform-origin:center top;
        filter:
            drop-shadow(0 9px 14px rgba(0,0,0,.58))
            drop-shadow(0 0 9px rgba(255,190,70,.14));
    }

    /* 按钮压住手机底部，接近效果图 */
    .btn-group{
        position:relative;
        z-index:5;
        display:flex;
        flex-direction:column;
        gap:7px;
        margin-top:-15px;
    }

    .action-btn{
        width:100%;
        min-width:0;
        min-height:58px;
        padding:9px 8px;
        gap:4px;
        border:1.5px solid rgba(255,210,98,.88);
        border-radius:14px;
        background:
            linear-gradient(90deg,rgba(20,16,8,.99) 0%,rgba(82,54,14,.98) 30%,rgba(201,143,40,.96) 100%);
        box-shadow:
            inset 0 0 18px rgba(255,220,120,.10),
            0 0 16px rgba(255,183,45,.20);
    }

    .btn-left{
        width:100%;
        min-width:0;
        gap:7px;
    }

    .btn-left img{
        width:34px;
        height:34px;
        flex:0 0 34px;
        object-fit:contain;
        margin-left:7px;
    }

    .btn-text-wrap{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        width:68%;
        min-width:0;
        align-items:center;
        text-align:center;
        gap:0;
    }

    .btn-text-wrap strong{
        font-size:18px;
        line-height:1.05;
        font-weight:800;
        white-space:nowrap;
    }

    /* 手机双栏里隐藏第二行说明，避免像 PC 缩小版 */
    .btn-text-wrap small{
        display:none;
    }

    .btn-arrow{
        flex:0 0 auto;
        margin:0;
        font-size:28px;
        line-height:1;
    }

    /* 底部服务手机端继续四个一排，但字体单独适配 */
    .bottom-bar{
        width:100%;
        margin-top:10px;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:3px;
        padding:8px 4px;
        border-radius:14px;
    }

    .bottom-item{
        min-width:0;
        min-height:50px;
        padding:2px 1px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:3px;
        text-align:center;
    }

    .bottom-item img{
        width:22px;
        height:22px;
        flex:0 0 22px;
        object-fit:contain;
    }

    .bottom-item strong{
        display:block;
        font-size:10.5px;
        line-height:1.1;
        white-space:nowrap;
    }

    .bottom-item small{
        display:none;
    }

    .copyright{
        padding:8px 0 3px;
        font-size:10px;
        line-height:1.2;
    }
}

/* iPhone / 常见 390~430px 宽度：再放大一点 */
@media (min-width:390px) and (max-width:430px){

    .wrapper{
        padding-left:8px;
        padding-right:8px;
    }

    .hero-title{
        font-size:34px;
    }

    .hero-sub{
        font-size:12.5px;
    }

    .feature-row{
        font-size:11px;
    }

    .cards-wrap{
        gap:9px;
    }

    .logo-img{
        max-width:150px;
        max-height:48px;
    }

    .exchange-desc{
        font-size:10.5px;
    }

    .phone-shell{
        height:185px;
    }

    .screen-img{
        max-height:195px;
    }

    .action-btn{
        min-height:60px;
    }

    .btn-left img{
        width:35px;
        height:35px;
        flex-basis:35px;
        margin-left:8px;
    }

    .btn-text-wrap strong{
        font-size:18.5px;
    }
}

/* 超窄屏 */
@media (max-width:360px){

    .wrapper{
        padding-left:5px;
        padding-right:5px;
    }

    .hero-title{
        font-size:28px;
    }

    .hero-sub{
        font-size:10.5px;
    }

    .feature-row{
        font-size:9.5px;
    }

    .cards-wrap{
        gap:5px;
    }

    .card-inner{
        padding-left:6px;
        padding-right:6px;
    }

    .logo-img{
        max-width:128px;
        max-height:42px;
    }

    .exchange-desc{
        font-size:9px;
    }

    .phone-shell{
        height:158px;
    }

    .screen-img{
        max-height:166px;
    }

    .action-btn{
        min-height:54px;
        padding:8px 6px;
    }

    .btn-left{
        gap:5px;
    }

    .btn-left img{
        width:31px;
        height:31px;
        flex-basis:31px;
        margin-left:5px;
    }

    .btn-text-wrap strong{
        font-size:16px;
    }

    .btn-arrow{
        font-size:22px;
    }
}


/* ===== 三步流程 ===== */
.steps-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:12px;
    margin-bottom:16px;
    color:#e8c870;
    font-weight:700;
}

.steps-row .feature-item{
    white-space:nowrap;
}

.step-arrow{
    color:#d7a83d;
    font-size:18px;
    line-height:1;
}

/* 按钮现在只有主标题，垂直居中更明显 */
.btn-text-wrap{
    justify-content:center;
}

.btn-text-wrap strong{
    line-height:1.1;
}

@media (max-width:768px){

    .steps-row{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:5px;
        margin-top:7px;
        margin-bottom:8px;
        font-size:10px;
    }

    .steps-row .feature-item{
        white-space:nowrap;
    }

    .step-arrow{
        font-size:12px;
    }

    .btn-text-wrap strong{
        font-size:18px;
    }
}

@media (min-width:390px) and (max-width:430px){
    .steps-row{
        font-size:10.5px;
        gap:6px;
    }

    .btn-text-wrap strong{
        font-size:18.5px;
    }
}

@media (max-width:360px){
    .steps-row{
        font-size:9px;
        gap:4px;
    }

    .step-arrow{
        font-size:11px;
    }

    .btn-text-wrap strong{
        font-size:16px;
    }
}

/* =========================================================
   移动端按钮视觉优化 V2
   目标：更高级、更紧凑、不遮字，黑金而不是大块土黄色
   ========================================================= */
@media (max-width:768px){

    .btn-group{
        gap:7px;
        margin-top:-14px;
        position:relative;
        z-index:8;
    }

    .action-btn{
        position:relative;
        width:100%;
        min-width:0;
        min-height:56px;
        display:grid;
        grid-template-columns:minmax(0,1fr) 18px;
        align-items:center;
        gap:3px;
        padding:6px 8px;
        overflow:hidden;

        border:1px solid rgba(244,190,66,.76);
        border-radius:14px;

        background:
            linear-gradient(
                135deg,
                rgba(15,15,14,.99) 0%,
                rgba(28,23,13,.98) 45%,
                rgba(76,51,13,.94) 100%
            );

        box-shadow:
            inset 0 1px 0 rgba(255,232,164,.13),
            inset 0 0 16px rgba(255,194,64,.05),
            0 5px 14px rgba(0,0,0,.34),
            0 0 10px rgba(232,165,35,.10);

        color:#fff;
    }

    /* 第一颗“立即注册”稍微突出，但不要整块亮黄 */
    .btn-group .action-btn:first-child{
        border-color:rgba(255,205,86,.92);
        background:
            linear-gradient(
                135deg,
                rgba(20,18,13,.99) 0%,
                rgba(50,37,14,.98) 55%,
                rgba(118,78,16,.96) 100%
            );
        box-shadow:
            inset 0 1px 0 rgba(255,237,182,.18),
            inset 0 0 20px rgba(255,194,64,.07),
            0 5px 15px rgba(0,0,0,.36),
            0 0 13px rgba(241,176,39,.16);
    }

    /* 轻微金色高光 */
    .action-btn:before{
        content:"";
        position:absolute;
        left:8%;
        right:8%;
        top:0;
        height:1px;
        background:linear-gradient(
            90deg,
            transparent,
            rgba(255,225,147,.52),
            transparent
        );
        pointer-events:none;
    }

    .btn-left{
        width:100%;
        min-width:0;
        display:grid;
        grid-template-columns:28px minmax(0,1fr);
        align-items:center;
        gap:5px;
    }

    .btn-left img{
        width:28px;
        height:28px;
        min-width:28px;
        margin:0;
        object-fit:contain;
        justify-self:center;

        filter:
            drop-shadow(0 2px 3px rgba(0,0,0,.5))
            drop-shadow(0 0 4px rgba(255,190,55,.16));
    }

    .btn-text-wrap{
        position:static;
        left:auto;
        transform:none;
        width:auto;
        min-width:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:0;
        pointer-events:auto;
    }

    .btn-text-wrap strong{
        display:block;
        width:100%;
        color:#fff4d2;
        font-size:15.5px;
        line-height:1.08;
        font-weight:800;
        letter-spacing:0;
        white-space:nowrap;
        text-shadow:0 1px 4px rgba(0,0,0,.7);
    }

    .btn-text-wrap small{
        display:none;
    }

    .btn-arrow{
        width:18px;
        margin:0;
        color:#f7d77e;
        font-size:22px;
        line-height:1;
        text-align:right;
        opacity:.95;
    }
}

/* 常见 390-430px 手机稍微再放大一点 */
@media (min-width:390px) and (max-width:430px){

    .action-btn{
        min-height:58px;
        padding:7px 9px;
        border-radius:15px;
    }

    .btn-left{
        grid-template-columns:30px minmax(0,1fr);
        gap:6px;
    }

    .btn-left img{
        width:30px;
        height:30px;
        min-width:30px;
    }

    .btn-text-wrap strong{
        font-size:16.5px;
    }

    .btn-arrow{
        font-size:23px;
    }
}

/* 360px 以下避免文字和图标打架 */
@media (max-width:360px){

    .action-btn{
        min-height:52px;
        padding:5px 6px;
        border-radius:12px;
    }

    .btn-left{
        grid-template-columns:25px minmax(0,1fr);
        gap:4px;
    }

    .btn-left img{
        width:25px;
        height:25px;
        min-width:25px;
    }

    .btn-text-wrap strong{
        font-size:13.5px;
    }

    .btn-arrow{
        width:15px;
        font-size:19px;
    }
}