:root {
    --blue: #1976d2;
    --dark: #0A0A0A;
    --muted: #6b7280;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Inter, "Helvetica Neue", Arial;
    margin: 0;
    color: #0f1724;
    overflow-x: hidden;
}
/* header */
header {
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2.08vw;
    height: 3.75vw;
}
header .left {
    display: flex;
    align-items: center;
    gap: 1.25vw;
    /* 24px */
}
header .logo {
    width: 2.08vw;
    height: auto;
}
header .logo img {
    width: 100%;
    height: auto;
}
header .nav {
    display: flex;
    gap: 2.5vw;
    /* 48px */
}
.header .nav .nav-item {
    font-size: 0.94vw;
    /* 20px */
    color: #000000;
    text-decoration: none;
    padding: 0.52vw 0;
    /* 10px 0 */
    position: relative;
}

header .right {
    display: flex;
    align-items: center;
    gap: 1.25vw;
    /* 24px */
}

header .right .auth-buttons {
    display: flex;
    align-items: center;
    gap: 0.625vw;
    /* 12px */
}

header .right .auth-buttons .user-text {
    font-size: 0.73vw;
    /* 18px */
    color: #007FFF;
    cursor: pointer;
}
header .right .auth-buttons img {
    width: 0.94vw;
    /* 18px */
    height: 0.94vw;
    /* 18px */
    cursor: pointer;
}
header .lang-switch  {
    position: relative;
}
header .lang-switch .lang-show{
   display: flex;
    align-items: center;
}

header .lang-switch .lang-show{
    border-radius: 0.208333vw;
    padding: 0.1vw 0.42vw;
    font-size: 0.63vw;
}
header .lang-switch .lang-show .lang-icon {
    border: 1px solid #000;
    border-radius: 0.208333vw;
    padding: 0.1vw;
    margin-right: 0.26vw;
}

.lang-options {
    position: absolute;
    /* 60px */
    left: 50%;
    transform: translateX(-50%);
    /* right: 0.08vw; */
    /* 40px */
    background: #fff;
    border: 0.03vw solid #E7E7E7;
    /* 6px */
    border-radius: 0.208333vw;
    box-shadow: 0 0.208333vw 0.625vw rgba(15, 23, 36, 0.1);
    /* 4px 12px */
    /* display: none; */
    z-index: 1001;
    padding: 1.04vw 1.56vw;
     display: flex;
    flex-direction: column;
     background: #fff;
     box-shadow: 0px 2px 10px 0px rgba(154, 181, 213, 0.094);
     border-radius: 6px;
     z-index: 10000;
     min-width: 140px;
     gap: 0.52vw;
}
.lang-options .lang-option {
    padding: 0.1vw 0.42vw;
    text-align: center;
    border-radius: 0.21vw;
    cursor: pointer;
}
.lang-options .lang-option.active{
    border: 1px solid #000;
}


header .right .download img, header .right .customer img {
      width: 1.35vw;
    /* 18px */
    height: 1.35vw;
    /* 18px */
    cursor: pointer;
}
header .right .msg img {
    width: 1.04vw;
    /* 18px */
    height: 1.2vw;
    /* 18px */
    cursor: pointer;
}

.wrap {
    width: 70.99vw;
    margin: 0 auto;
}

.hero {
    display: flex;
    gap: 1.666667vw;
    /* 32px */
    align-items: center;
    padding: 2.083333vw;
    /* 40px */
    height: 45.53vw;
}

.hero h1 {
    font-size: 3.33vw;
    /* 40px */
    margin: 0 0 0.729167vw;
    /* 14px */
}

.hero p {
    font-size: 1.2vw;
    /* 23px */
    margin: 0 0 1.041667vw;
    /* 20px */
}

.buttons {
    display: flex;
    gap: 0.625vw;
    /* 12px */
}

.btn {
    padding: 0.520833vw 0.9375vw;
    /* 10px 18px */
    border-radius: 0.416667vw;
    /* 8px */
    border: 1px solid rgba(25, 118, 210, .12);
    background: #fff;
    color: var(--blue);
    cursor: pointer;
}

.btn.primary {
    background: var(--blue);
    color: #fff;
    border: none;
}

.hero-content {
    flex: 1;
    position: relative;
    max-width: 60%;
}
.hero .buttons {
    margin-top: 1.875vw;
    /* 36px */
    z-index: 1;
     /* 新增：相对定位，方便把 QR 框定位到按钮旁 */
    display: flex;
    gap: 0.625vw;
    /* 新增：相对定位，方便把 QR 框定位到按钮旁 */
    position: relative;
    align-items: center;
    width: fit-content;
}

.hero-content .buttons  .hero-download-qr {
    position: absolute;
    /* 距离按钮右侧的间隔（按需微调） */
    left: calc(100% + 0.52vw);
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    box-shadow: 0px 2px 9px 0px #00000026;
    padding: 0.78vw 1.04vw;
    border-radius: 0.625vw;
    z-index: 1002;
    min-width: 10.42vw;
    margin: 0 auto;
}
.start-btn {
    position: relative;
}

.hero-content  .hero-download-qr .qr-text {
    font-size: 0.73vw;
    /* 18px */
    color: #00000080;
    text-align: center;
}

.hero-content .hero-download-qr img {
    width: 6.25vw;
    /* 120px */
    height: 6.25vw;
    margin-left: 1.04vw;
}

.hero-content  .hero-download-qr .qr-btn {
    margin-top: 0.83vw;
    /* 16px */
    background-color: #1976D2;
    color: #FFFFFF;
    font-size: 0.73vw;
    /* 18px */
    padding: 0.52vw 0;
    /* 10px 0 */
    border-radius: 0.3125vw;
    text-align: center;
    cursor: pointer;
}


.hero-img {
    position: absolute;
    right: 0;
    width: 50.260417vw;
    /* 965px */
}

.hero-image {
    width: 50.260417vw;
    /* 965px */
    margin-left: auto;
}

.banner-row {
    display: flex;
    justify-content: space-between;
}


.banner {
    border-radius: 0.625vw;
    /* 12px */
    color: var(--muted);
    width: 30.260417vw;
    height: 10.4vw;
    position: relative;
    
}

.banner-row  .banner-1 {
    background: url('./pc/tip_2.png') no-repeat center center;
    background-size: contain;
}
.banner-row  .banner-2 {
    background: url('./pc/tip_2.png') no-repeat center center;
    background-size: contain;
}
 .banner-row .banner-3 {
    background: url('./pc/tip_1.png') no-repeat center center;
    background-size: contain;
}

.banner-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2vw;
    /* 23px */
    margin-left: .883333vw;
    /* 20px */
    color: #000;
    font-size: 1.0vw;
    font-weight: 600;
}
.banner-text-title {
    color: #FECC42;
    font-size: 1.4vw;
}

.banner img {
    width: 21.979167vw;
    /* 422px */
    height: auto;
}

.exchange-marquee {
    overflow: hidden;
    background: #F5F5F5;
    height: 1.67vw;
    position: relative;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    border-radius: 0.42vw;
}

.marquee-icon {
    width: 3vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #F5F5F5;
    z-index: 1;
}

.marquee-track {
    margin-left: 10.42vw;
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: marqueeSlide 18s linear infinite;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 42px;
    cursor: pointer;
    font-size: 12px;
    color: #000000;
    transition: color 0.2s;
    font-weight: 400;
}

.marquee-item:hover {
    color: #fff;
}

.marquee-item img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
}

/* 动画 */
@keyframes marqueeSlide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* 悬停暂停 */
.exchange-marquee:hover .marquee-track {
    animation-play-state: paused;
}

/****** echarts ********/

.market-wrapper {
    border-radius: 0.625vw;
    /* 12px */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


.coin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 12.19vw;
}

.coin-list li {
    cursor: pointer;
    padding: 0.83vw 0.375vw;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 0.1vw;
    transition: 0.2s;
    border: 1px solid #F5F5F5;
}

.coin-list li:hover {
    transform: translateY(-1px);
}

.coin-list li.active {
    border-color: #007FFF;
}


.coin-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.416667vw;
    /* 8px */
    cursor: pointer;
}

.coin-item .coin-icon img {
    width: 2.19vw;
    /* 24px */
    height: 2.19vw;
    /* 24px */
}

.coin-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.208333vw;
    /* 4px */
    flex: 1;
}

.coin-content .coin-name {
    font-size: 0.94vw;
    font-weight: 500;
    color: #0F1724;
}

.coin-content .coin-price {
    width: 100%;
    font-size: 0.78vw;
    /* 18px */
    font-weight: 600;
    color: #0F1724;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.coin-price-change {
    font-size: 0.729167vw;
    /* 14px */
    color: #16A34A;
}

.coin-info {
    position: absolute;
    top: 0;
    left: 14.25vw;
    width: 11.67vw;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #E0E0E0;
    background-color: #fff;
    z-index: 10;
}

.coin--info-name {
    font-size: 0.94vw;
    font-weight: 600;
    color: #0F1724;
}

.coin-info-price {
    margin-top: 1.04vw;
    display: flex;
    align-items: center;
    gap: 8px;
}

.coin-info-price .coin-price-value {
    font-size: 1.2vw;
    font-weight: 500;
    color: #0F1724;
}

.coin-info-price .coin-price-change {
    font-size: 0.83vw;
    color: #16A34A;
}

.coin-info-stats {
    font-size: 0.729167vw;
    /* 14px */
    color: #00000099;
}

.coin-btn {
    /* width: 9.58vw; */
    width: 100%;
    height: 1.88vw;
    margin-top: 0.26vw;
    padding: 0.42vw 2.08vw;
    background-color: #1976D2;
    color: #FFFFFF;
    font-size: 0.83vw;
    border: none;
    border-radius: 0.57vw;
    cursor: pointer;
    text-align: center;
}

.chart-note {
    display: flex;
    align-items: center;
    height: 2.4vw;
    gap: 0.52vw;
    /* 10px */
    margin-top: 0.83vw;
}

.chart-note .chart-note-btn button {
    width: 7.97vw;
    height: 2.4vw;
    background-color: #007FFF;
    border-radius: 0.57vw;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.729167vw;
    /* 14px */
    color: #fff;
    cursor: pointer;
}

.chart-note .chart-note-content {
    margin-left: 0.52vw;
    color: #000;
    font-size: 0.94vw;
    font-weight: 500;
}

/****** 一键下载、开启 ********/

.download-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.download-content {
    flex: 1;
}

.download-content h2 {
    font-size: 2.5vw;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
}

.download-content .highlight {
    color: #1976ff;
    font-size: 2.5vw;
    font-family: PingFang SC;
    font-weight: 500;
    font-style: Medium;
}

.download-section .desc {
    font-size: 1.04vw;
    color: #333;
    margin-bottom: 8px;
}

.download-section .qr-box {
    margin-top: 48px;

}

.download-section .qr-box .qr-image {
    width: 9.64vw;
    height: 9.64vw;
    background: url('./pc/qr_bg.png') no-repeat center;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-section .qr-box .qr-image img{
    width: 8.42vw;
    height: 8.42vw;
}

.download-section .qr-box img {
    width: 12.42vw;
    height: 12.42vw;
}

.download-section .qr-text {
    margin-top: 12px;
    font-size: 0.83vw;
    color: #666;
}

.hero-content .qr-btn {
    margin-top: 12px;
    font-size: 0.83vw;
    color: #666;
}

.download-section .download-image {
    flex: 1;
    text-align: right;
}

.download-section .download-image img {
    width: 92%;
    max-width: 620px;
    object-fit: contain;
}


/****** 特色功能 ********/
.highlight-section {
    margin: 4.166667vw 0;
    /* 80px 0 */
}

.highlight-section h2 {
    font-size: 2.71vw;
    /* 40px */
    font-weight: 600;
    color: #000000;
}

.highlight-section span.highlight {
    padding-left: 1.04vw;
    color: var(--blue);
}

.features-pc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9375vw;
    /* 18px */
    display: flex;
    justify-content: space-between;
}

.features-pc .card {
    width: 16.35vw;
    background: #fff;
    border-radius: 0.625vw;
    /* 12px */
    padding: 0.9375vw;
    /* 18px */
    /* 6px 18px */
    border: 0.03vw solid #E7E7E7;
    position: relative;
    height: 23.23vw;
}

.features-pc .card img {
    width: 4.166667vw;
    /* 80px */
    height: auto;
    margin-bottom: 0.625vw;
    /* 12px */
    margin-top: 1.04vw;
}

.features-pc .card .title {
    font-size: 1.46vw;
    /* 20px */
    font-weight: 500;
    color: #000000;
    margin-bottom: 0.520833vw;
    /* 10px */
}

.features-pc .card .desc {
    font-size: 0.94vw;
    /* 16px */
    color: #00000080;
}

.features-pc .card .btn {
    margin-top: 2.08vw;
    /* 20px */
    color: #007FFF;
    padding: 0.520833vw 0;
    /* 10px 0 */
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 1.25vw;
}
.features-pc .card .btn .btn-text {
    font-size: 0.94vw;
    /* 16px */
    font-weight: 500;
}

/* 让图片和文字保持一致大小 在一条线上 */
.features-pc .card .btn img {
    width: 0.83vw;
    /* 14px */
    height: auto;
    margin-left: 0.3125vw;
}


/*********立即开启********/
.contact-section {
    margin-top: 2.08vw;
    background: #19223E;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.98vw;
    text-align: center;
    padding: 5.083333vw;
}
.contact-desc {
    font-size: 0.94vw;
    /* 40px */
}

footer {
    background: var(--dark);
    color: #fff;
}
footer .wrap {
    padding: 1.25vw 0;
    /* 24px 0 */
}
.footer .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer .footer-top .footer-logo {
    display: flex;
    align-items: center;
    gap: 0.625vw;
    /* 12px */
    padding-bottom: 1.25vw;
    /* 24px */
}
.footer .footer-top .footer-logo img {
    width: 1.88vw;
    height: 1.88vw;
}
.footer .footer-top .footer-logo span {
    font-size: 1.35vw;
    font-weight: 700;
}

.footer .footer-top .footer-lang {
    display: flex;
    align-items: center;
    gap: 0.3125vw;
    /* 6px */
    cursor: pointer;
    border: 1px solid #FFFFFF;
    border-radius: 0.208333vw;
    padding: 0.26vw 1.04vw;
}
.footer .footer-top .footer-lang .en{
    border: 1px solid #FFFFFF;
    border-radius: 0.208333vw;
    font-size: 0.52vw;
    padding: 0.1vw;
}

.footer .footer-top .footer-lang .zh {
    font-size: 0.63vw;
}


.footer .footer-center {
    display: flex;
    justify-content: space-between;
    padding: 2.083333vw 0;
    /* 40px 0 */
}
.footer .footer-center-item h4 {
    color: #FFFFFF;
    font-size: 0.83vw;
    margin-bottom: 1.041667vw;
    /* 20px */
}
.footer .footer-center-item .footer-link {
    color: #FFFFFFB2;
    font-size: 0.73vw;
    padding: 0.520833vw 0;
}
.footer .footer-center-item.tips .footer-link {
    color: #fff;
    font-size: 0.83vw;
}

.footer-bottom {
    border-top: 1px solid #fff;
    padding-top: 1.25vw;
    text-align: center;
    padding: 1.25vw 0;
}


/* 订阅输入框样式：与页面风格一致，移动端降级显示 */
.subscribe-wrap{
  display:inline-flex;
  align-items:center;
  width:456px;
  height:56px;
  background:#fff;
  border-radius:0.52vw;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  margin-top: 1.56vw;
}

.subscribe-wrap input{
  flex:1;
  border:0;
  outline:none;
  padding:0 20px;
  font-size:16px;
  color:#6b7280;
  height:56px;
  background:transparent;
}

.subscribe-wrap button{
  border:0;
  background:#1e6cff;
  color:#fff;
  padding:0 24px;
  height:56px;
  border-radius:0 0.52vw 0.52vw 0;
  cursor:pointer;
  font-weight:600;
}