/* ============ 创建链上身份 · 首页 ============ */
/* 设计稿 750 宽，1rem = 100px（见 basic.css 的 html font-size 断点） */
#app{position: relative; max-width: 750px; min-height: 100vh; margin: 0 auto; background-color: #06131b; color: #fff; font-size: 14px; overflow: hidden;}

/* 背景与遮罩 */
#app .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background: url(../images/bg.png) no-repeat center top; background-size: cover;}
#app .mask{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(to top, RGBA(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);}
/* #app .mask::after{content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(4,13,19,0.5) 0%, rgba(4,13,19,0.1) 55%, rgba(4,13,19,0.28) 100%);} */

#content{position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; padding: .8rem 0.4rem 0.5rem; box-sizing: border-box; user-select: none;}

/* 品牌区 */
.brand{display: flex; align-items: center; flex: 0 0 auto; margin-left:-20px;}
.brand-logo{width: 1.8rem; height: 1.8rem; border-radius: 50%; display: block;}
.brand-txt{margin-left: -.2rem;}
.brand-txt .bn{font-size: 0.3rem; font-weight: bold; letter-spacing: 0.01rem; line-height: 1.2;}
.brand-txt .bt{margin-top: 0.08rem; font-size: 0.14rem;  color: rgba(255,255,255,0.62);}

/* 顶部留白：屏幕更高时间距自动变大，屏幕较矮时最小保留 3.4rem */
.gap-top{flex: 1 1 auto; min-height: 3.4rem;}

/* 特性标签 */
.tags{display: flex; align-items: center; flex: 0 0 auto;}
.tags .tag{display: flex; align-items: center; height: 0.55rem; padding: 0 0.14rem; margin-right: 0.14rem; border-radius: 0.35rem; background: rgba(9,26,36,0.55); border: 1px solid rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 0.2rem; color: #fff; white-space: nowrap;}
.tags .tag i{display: block; width: 0.11rem; height: 0.11rem; border-radius: 50%; background: #00e6e8; box-shadow: 0 0 0.1rem rgba(0,230,232,0.9); margin-right: 0.14rem;}

/* 主文案 */
.intro{margin-top: 1.7rem; flex: 0 0 auto;}
.intro .sub{font-size: 0.2rem; font-weight: bold; color: #4deeea; letter-spacing: 0.01rem;}
.intro .tit{margin-top: 0.18rem; font-size: 0.66rem; font-weight: bold; line-height: 1.16; letter-spacing: 0.01rem; text-shadow: 0 0.02rem 0.12rem rgba(0,0,0,0.4);}
.intro .p{margin-top: 0.3rem; font-size: 0.28rem; line-height: 1.6; color: rgba(226,236,246,0.82);}

/* 支持的网络 */
.nets{display: flex; align-items: center; margin-top: 0.3rem;}
.nets .net-ico{position: relative; display: flex; align-items: center; justify-content: center; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #fff; box-shadow: 0 0.02rem 0.08rem rgba(0,0,0,0.3); margin-right: -0.06rem; border:2px solid #333}
.nets .net-ico img{display: block; width: 80%; padding:2px;}
.nets .net-ico.full img{width: 100%;}
.nets .net-txt{margin-left: 0.26rem; font-size: 0.2rem; color: rgba(255,255,255,0.7);}

/* 按钮 */
.btns{margin-top: 0.32rem; flex: 0 0 auto;}
.btns .btn1{display: flex; align-items: center; justify-content: center; width: 100%; height: 0.94rem; border-radius: 0.28rem; background: #00e6e8; color: #06222b; font-size: 0.31rem; font-weight: bold; letter-spacing: 0.02rem; cursor: pointer; box-shadow: 0 0.06rem 0.28rem rgba(0,230,232,0.28);}
.btns .btn2{display: flex; align-items: center; justify-content: center; width: 100%; height: 0.94rem; margin-top: 0.18rem; border-radius: 0.28rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 0.3rem; font-weight: bold; letter-spacing: 0.02rem; cursor: pointer;}
.btns .btn1:active{background: #00cdd0;}
.btns .btn2:active{background: rgba(255,255,255,0.12);}

/* 底部提示 */
.footer-tip{display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 0.38rem; font-size: 0.22rem; color: rgba(255,255,255,0.62);}
.footer-tip img{display: block; width: 0.3rem; height: 0.3rem; margin-right: 0.12rem;}

@media only screen and (max-height:640px) {
  .gap-top{min-height: 2.6rem;}
}
