/* 爱换助手引导站 - Bento Grid */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
    background:#0a0a0a;
    color:#e8e8e8;
    line-height:1.6;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.wrap{
    max-width:1200px;
    margin:0 auto;
    padding:0 28px;
}

/* ---- 顶部导航 ---- */

.site-header, main, footer{
    position:relative;
    z-index:1;
}

.site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(28,28,28,.55);
    backdrop-filter:blur(24px) saturate(1.4);
    -webkit-backdrop-filter:blur(24px) saturate(1.4);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 1px 12px rgba(0,0,0,.3);
}

.nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:68px;
}

.logo-link{display:flex;align-items:center;gap:12px}

.nav-logo{
    width:42px;height:42px;
    border-radius:10px;
    object-fit:contain;
}

.nav-brand{
    font-size:20px;
    font-weight:700;
    color:#4ade80;
    letter-spacing:1px;
}

.nav-enter{
    font-size:13px;
    color:#4ade80;
    padding:6px 18px;
    border:1px solid rgba(74,222,128,.3);
    border-radius:20px;
    transition:all .25s;
}
.nav-enter:hover{
    background:#4ade80;
    color:#000;
}

/* ---- Bento 网格 ---- */

.bento{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:auto auto auto auto;
    gap:14px;
    padding:24px 0 40px;
    /*
     * PC端布局示意 (4列):
     * A A B C
     * A A D E
     * G G H H
     * F F F F
     */
    grid-template-areas:
        "a a b c"
        "a a d e"
        "g g h h"
        "f f f f";
}

/* ---- 通用卡片 ---- */

.card{
    background:linear-gradient(145deg,#1c1c1c 0%,#171717 50%,#1a1a1a 100%);
    border:1px solid rgba(255,255,255,.06);
    border-radius:22px;
    padding:28px;
    transition:border-color .3s, box-shadow .3s;
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.2);
}
.card:hover{
    border-color:rgba(255,255,255,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 32px rgba(0,0,0,.35);
}

.card h3{
    font-size:16px;
    font-weight:700;
    margin-bottom:16px;
    color:#ddd;
}

/* ---- A: 品牌主卡片 ---- */

.card-a{
    grid-area:a;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(170deg,#1e1e1e 0%,#161616 40%,#1a1a1a 100%);
    border-color:rgba(255,255,255,.07);
    padding:44px 32px 38px;
}

.card-a::before{
    content:'';
    position:absolute;
    top:-100px;left:50%;
    transform:translateX(-50%);
    width:320px;height:220px;
    background:radial-gradient(ellipse,rgba(74,222,128,.06) 0%,transparent 70%);
    pointer-events:none;
}

.logo-box{
    width:110px;height:110px;
    border-radius:26px;
    background:linear-gradient(135deg,#1a2e1a 0%,#111 100%);
    border:1.5px solid rgba(74,222,128,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
}
.logo-box img{
    width:76px;height:76px;
    border-radius:16px;
    object-fit:contain;
}

.card-a h1{
    font-size:30px;
    font-weight:800;
    letter-spacing:3px;
    margin-bottom:14px;
}

.desc{
    font-size:14px;
    color:#4ade80;
    line-height:1.9;
    margin-bottom:20px;
    max-width:380px;
    opacity:.9;
}

.links{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:22px;
}
.links a{
    font-size:13px;
    color:#777;
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color .2s;
}
.links a:hover{color:#4ade80}

.slogan{
    font-size:17px;
    font-weight:600;
    letter-spacing:5px;
    color:#bbb;
    margin-bottom:20px;
}

/* 信任徽章 */
.trust-bar{
    display:flex;
    gap:16px;
    margin-bottom:24px;
    justify-content:center;
}
.trust-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:#888;
}
.t-dot{
    width:5px;height:5px;
    border-radius:50%;
    background:#4ade80;
    box-shadow:0 0 6px rgba(74,222,128,.4);
}

.btns{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:320px;
}

.btn{
    display:block;
    text-align:center;
    padding:13px 0;
    font-size:14px;
    font-weight:600;
    border-radius:48px;
    transition:all .25s;
    letter-spacing:.5px;
}

.btn-g{
    background:#4ade80;
    color:#000;
}
.btn-g:hover{
    background:#22c55e;
    color:#000;
    box-shadow:0 0 28px rgba(74,222,128,.28);
}

.btn-o{
    background:transparent;
    border:1px solid #2a2a2a;
    color:#bbb;
}
.btn-o:hover{
    border-color:#4ade80;
    color:#4ade80;
}

/* ---- B: 展示卡片 ---- */

.card-b{
    grid-area:b;
    display:flex;
    align-items:stretch;
    justify-content:stretch;
    background:linear-gradient(135deg,#1a221a 0%,#181818 100%);
    border-color:rgba(74,222,128,.08);
    min-height:180px;
    padding:0;
    overflow:hidden;
}

.showcase-img{
    width:100%;
    height:100%;
    overflow:hidden;
}
.showcase-img img{
    width:100%;height:100%;
    object-fit:contain;
    border-radius:22px;
}

/* ---- C: 优势卡片 ---- */

.card-c{
    grid-area:c;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.info-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    margin-bottom:8px;
    border-radius:12px;
    background:linear-gradient(135deg,#1f1f1f,#1a1a1a);
    border:1px solid rgba(255,255,255,.05);
    transition:border-color .25s;
}
.info-row:last-child{margin-bottom:0}
.info-row:hover{border-color:#333}

.info-icon{
    font-size:20px;
    flex-shrink:0;
}

.info-label{
    font-size:12px;
    color:#666;
}

.info-row strong{
    font-size:18px;
    color:#4ade80;
    font-weight:700;
}

/* ---- D: 服务特色 ---- */

.card-d{
    grid-area:d;
}

.feat-list{
    list-style:none;
    padding:0;margin:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.feat-list li{
    font-size:13px;
    color:#999;
    padding:10px 14px;
    border-radius:10px;
    background:linear-gradient(135deg,#1f1f1f,#1a1a1a);
    border:1px solid rgba(255,255,255,.04);
    transition:all .25s;
    line-height:1.5;
}
.feat-list li:hover{
    border-color:#2a2a2a;
    color:#ccc;
}
.feat-list li span{
    margin-right:4px;
}

/* ---- E: 支持兑换 ---- */

.card-e{
    grid-area:e;
}

.tag-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.tag{
    display:inline-block;
    padding:6px 14px;
    font-size:12px;
    color:#999;
    background:linear-gradient(135deg,#1f1f1f,#1a1a1a);
    border:1px solid rgba(255,255,255,.05);
    border-radius:20px;
    transition:all .25s;
    white-space:nowrap;
}
.tag:hover{
    border-color:#4ade80;
    color:#4ade80;
    background:rgba(74,222,128,.05);
}

/* ---- G: 关于我们 ---- */

.card-g{
    grid-area:g;
}

.about-text{
    font-size:13px;
    color:#999;
    line-height:1.8;
    margin-bottom:16px;
}

.about-info{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.about-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 14px;
    border-radius:10px;
    background:linear-gradient(135deg,#1f1f1f,#1a1a1a);
    border:1px solid rgba(255,255,255,.04);
    font-size:13px;
    color:#bbb;
}

.about-label{
    color:#666;
    font-size:12px;
}

.about-row a{
    color:#4ade80;
    text-decoration:underline;
    text-underline-offset:3px;
}

/* ---- H: 备案信息 ---- */

.card-h{
    grid-area:h;
}

.filing-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.filing-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 14px;
    border-radius:10px;
    background:linear-gradient(135deg,#1f1f1f,#1a1a1a);
    border:1px solid rgba(255,255,255,.04);
    font-size:13px;
    color:#bbb;
}

.filing-label{
    color:#666;
    font-size:12px;
}

.filing-row a{
    color:#4ade80;
    text-decoration:underline;
    text-underline-offset:3px;
}

.filing-code{
    font-family:"Comic Sans MS","PingFang SC","Microsoft YaHei",cursive;
    color:#d0d0d0 !important;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    text-decoration:underline !important;
    text-underline-offset:3px;
    transition:color .2s;
}
.filing-code:hover{
    color:#4ade80 !important;
}

/* ---- F: 底部联系卡片 ---- */

.card-f{
    grid-area:f;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 28px;
}

.arrow-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;height:34px;
    border-radius:50%;
    background:#4ade80;
    color:#000;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    transition:all .25s;
    flex-shrink:0;
}
.arrow-btn:hover{
    background:#22c55e;
    transform:scale(1.1);
}

.icp-info{
    display:flex;
    align-items:center;
    gap:10px;
}
.icp-info svg{
    color:#555;
    flex-shrink:0;
}
.icp-info a{
    font-size:12px;
    color:#555;
    transition:color .2s;
}
.icp-info a:hover{color:#4ade80}

/* ---- 底部 ---- */

footer{
    padding:20px 0;
    text-align:center;
    border-top:1px solid #1a1a1a;
}
footer p{
    font-size:11px;
    color:#444;
    margin:0;
}

/* ---- 入场动画 ---- */

.card-a{animation:fadeUp .5s ease both}
.card-b{animation:fadeUp .5s .1s ease both}
.card-c{animation:fadeUp .5s .2s ease both}
.card-d{animation:fadeUp .5s .3s ease both}
.card-e{animation:fadeUp .5s .35s ease both}
.card-g{animation:fadeUp .5s .4s ease both}
.card-h{animation:fadeUp .5s .45s ease both}
.card-f{animation:fadeUp .5s .5s ease both}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
}

/* ---- 响应式：平板 ---- */

@media(max-width:960px){
    .wrap{padding:0 18px}

    .bento{
        grid-template-columns:1fr 1fr;
        grid-template-areas:
            "a a"
            "b c"
            "d e"
            "g g"
            "h h"
            "f f";
        gap:12px;
        padding:20px 0 36px;
    }

    .card{border-radius:18px;padding:24px}
    .card-a{padding:36px 24px 32px}
    .feat-list{display:grid;grid-template-columns:1fr 1fr}
}

/* ---- 响应式：手机 ---- */

@media(max-width:480px){
    .bento{
        grid-template-columns:1fr;
        grid-template-areas:
            "a"
            "b"
            "c"
            "d"
            "e"
            "g"
            "h"
            "f";
        gap:10px;
        padding:16px 0 32px;
    }

    .card{border-radius:16px;padding:20px}
    .card-a{padding:32px 20px 28px}
    .card-a h1{font-size:26px;letter-spacing:2px}
    .slogan{font-size:15px;letter-spacing:4px}
    .logo-box{width:96px;height:96px}
    .logo-box img{width:66px;height:66px}
    .desc{font-size:13px}
    .btns{max-width:100%}
    .feat-list{grid-template-columns:1fr}
    .card-b{min-height:140px}
}

/* ---- 流星文字动画 ---- */

.meteor-bg{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}

.meteor{
    position:absolute;
    font-size:14px;
    font-weight:700;
    color:rgba(74,222,128,.25);
    white-space:nowrap;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    letter-spacing:4px;
    animation:meteorFall linear infinite;
    text-shadow:0 0 8px rgba(74,222,128,.3);
    opacity:0;
    transform:translateY(-100%);
}

/* 流星下坠后拖尾渐隐效果 */
.meteor::after{
    content:attr(data-text);
    position:absolute;
    top:-100%;left:0;
    width:100%;height:100%;
    background:linear-gradient(to bottom,transparent 0%,rgba(74,222,128,.03) 50%,transparent 100%);
    pointer-events:none;
}

@keyframes meteorFall{
    0%{
        transform:translateY(-100%) translateX(0);
        opacity:0;
    }
    5%{opacity:1}
    85%{opacity:1}
    100%{
        transform:translateY(calc(100vh + 100%)) translateX(20px);
        opacity:0;
    }
}

/* 每条流星不同位置、速度、延迟 */
.m1{left:1%;font-size:18px;color:rgba(74,222,128,.30);animation-duration:7s;animation-delay:0s}
.m2{left:4%;font-size:13px;color:rgba(74,222,128,.20);animation-duration:11s;animation-delay:2s}
.m3{left:8%;font-size:15px;color:rgba(74,222,128,.25);animation-duration:9s;animation-delay:4s}
.m4{left:11%;font-size:12px;color:rgba(74,222,128,.15);animation-duration:13s;animation-delay:1s}
.m5{right:1%;font-size:14px;color:rgba(74,222,128,.22);animation-duration:10s;animation-delay:3s}
.m6{right:4%;font-size:11px;color:rgba(74,222,128,.16);animation-duration:12s;animation-delay:5s}
.m7{right:8%;font-size:16px;color:rgba(74,222,128,.25);animation-duration:8s;animation-delay:6s}
.m8{right:11%;font-size:12px;color:rgba(74,222,128,.15);animation-duration:14s;animation-delay:0.5s}

/* 平板和手机隐藏流星（没有左右空白） */
@media(max-width:960px){
    .meteor-bg{display:none}
}

/* ---- 焦点与选择 ---- */

a:focus-visible{outline:2px solid #4ade80;outline-offset:2px}
::selection{background:#4ade80;color:#000}