* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } html { scroll-behavior: smooth; } body { background-color: #181a20; color: #ffffff; min-height: 100vh; overflow-x: hidden; position: relative; } img { max-width: 100%; height: auto; display: block; } .hero-section { max-width: 1440px; width: 100%; margin: 0 auto; padding: 60px 48px 100px; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; position: relative; min-height: 650px; } .hero-left { z-index: 5; max-width: 560px; } .hero-title { font-size: 54px; font-weight: 800; color: #ffffff; margin-bottom: 24px; letter-spacing: -1px; line-height: 1.15; } .hero-desc { font-size: 18px; line-height: 1.6; color: #b7bdc6; margin-bottom: 36px; font-weight: 400; } .hero-right { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; } .binance-icon-img { position: absolute; bottom: 20px; left: 20px; width: 160px; z-index: 6; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)); } .hand-bg-img { position: absolute; width: 360px; right: -30px; bottom: -20px; z-index: 3; pointer-events: none; opacity: 0.5; } .phone-img-wrapper { position: relative; z-index: 4; display: inline-block; } .phone-img { width: 290px; height: auto; border-radius: 36px; filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.6)); transition: transform 0.3s ease, filter 0.3s ease; } .hero-phone { transform: rotate(-3deg); } .hero-phone:hover { transform: rotate(0deg) scale(1.02); filter: drop-shadow(0 30px 50px rgba(240, 185, 11, 0.15)); } .big-text-bg { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: 190px; font-weight: 900; color: #21262f; letter-spacing: -4px; line-height: 0.8; z-index: 1; pointer-events: none; user-select: none; width: 100%; text-align: center; white-space: nowrap; } .swap-section { max-width: 1440px; width: 100%; margin: 0 auto; padding: 100px 48px 140px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; gap: 40px; } .swap-left { max-width: 520px; z-index: 5; } .swap-title { font-size: 38px; font-weight: 700; color: #ffffff; line-height: 1.35; margin-bottom: 40px; letter-spacing: -0.5px; } .swap-right { position: relative; display: flex; justify-content: center; align-items: center; } .swap-phone:hover { transform: scale(1.02); filter: drop-shadow(0 30px 50px rgba(240, 185, 11, 0.15)); } .coin-float { position: absolute; pointer-events: none; z-index: 6; animation: float 4s ease-in-out infinite; } .coins-top-left { width: 160px; left: 20px; top: 20px; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .ba-section.ba-news-section { padding: 100px 0; background-color: #181a20; border-top: 1px solid #2b313a; } .ba-container { max-width: 1440px; margin: 0 auto; padding: 0 48px; } .ba-section-title { font-size: 36px; font-weight: 800; color: #ffffff; margin-bottom: 40px; text-align: center; letter-spacing: -0.5px; } .ba-news-top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; } .ba-news-card-top { background: #1e2329; border: 1px solid #2b313a; border-radius: 12px; padding: 20px; transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; } .ba-news-card-top:hover { border-color: #f0b90b; transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); } .ba-news-card-top .ba-news-content h3 { font-size: 18px; font-weight: 700; color: #ffffff; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ba-news-card-top .ba-news-content p { margin: 12px 0; font-size: 0.95rem; color: #b7bdc6; line-height: 1.6; } .ba-news-list-single { display: flex; flex-direction: column; gap: 16px; } .ba-news-card-small { background: #1e2329; border: 1px solid #2b313a; border-radius: 12px; padding: 16px; transition: all 0.3s ease; display: flex; align-items: center; gap: 20px; } .ba-news-card-small:hover { border-color: #f0b90b; transform: translateX(4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .ba-news-card-small .ba-ex-thumb-small { width: 140px; height: 90px; flex-shrink: 0; border-radius: 8px; overflow: hidden; } .ba-news-card-small .ba-ex-thumb-small img { width: 100%; height: 100%; object-fit: cover; } .ba-news-card-small .ba-news-content-small { flex: 1; display: flex; flex-direction: column; justify-content: center; } .ba-news-card-small .ba-news-content-small h3 { font-size: 16px; font-weight: 600; color: #ffffff; line-height: 1.4; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .ba-news-card-small .ba-news-content-small p { font-size: 0.85rem; color: #b7bdc6; margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; } .ba-news-date { font-size: 12px; color: #848e9c; } .ba-read-more { color: #f0b90b; font-size: 13px; font-weight: 600; display: inline-block; margin-top: 2px; } .ba-more-btn-card-single { background: rgba(240, 185, 11, 0.03) !important; border: 2px dashed #f0b90b !important; border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; } .ba-more-btn-card-single:hover { background: rgba(240, 185, 11, 0.08) !important; border-color: #fcd535 !important; } .ba-more-btn-card-single h3 { color: #f0b90b !important; font-size: 16px; margin: 0; } .security-wrapper { background-color: #0b0e11; width: 100%; padding: 100px 0 140px; border-top: 1px solid #2b313a; } .security-section { max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 48px; } .security-header { text-align: center; margin-bottom: 80px; } .security-main-title { font-size: 44px; font-weight: 800; color: #ffffff; letter-spacing: -1px; } .security-content { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } .security-left { position: relative; display: flex; justify-content: center; align-items: center; } .security-bg-shape { position: absolute; width: 90%; height: 90%; background-color: #1e2329; clip-path: polygon(0 12%, 100% 0, 92% 100%, 8% 88%); z-index: 1; border: 1px solid #2b313a; } .security-img-card { position: relative; z-index: 2; width: 380px; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); transition: transform 0.3s ease; } .security-img-card:hover { transform: translateY(-5px); } .security-right { display: flex; flex-direction: column; gap: 28px; } .security-item { opacity: 0.7; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; padding-bottom: 20px; border-bottom: 1px solid #2b313a; } .security-item-title { font-size: 26px; font-weight: 700; color: #eaecef; margin-bottom: 10px; transition: color 0.3s ease; } .security-item-desc { font-size: 16px; color: #b7bdc6; line-height: 1.6; max-width: 480px; transition: color 0.3s ease; } .security-item.active { opacity: 1; transform: translateX(8px); } .security-item.active .security-item-title { color: #f0b90b; } .security-item.active .security-item-desc { color: #ffffff; } .faq-section { background-color: #ffffff; color: #1e2329; padding: 80px 0; border-top: 1px solid #e6e8ea; } .faq-header { text-align: center; margin-bottom: 40px; } .faq-header h2 { font-size: 32px; color: #1e2329; margin-bottom: 10px; font-weight: 800; } .faq-header p { font-size: 16px; color: #707a8a; } .faq-container { max-width: 800px; margin: 0 auto; padding: 0 20px; } .faq-item { border-bottom: 1px solid #e6e8ea; margin-bottom: 8px; } .faq-question { width: 100%; background: none; border: none; outline: none; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 600; color: #1e2329; text-align: left; cursor: pointer; transition: color 0.3s ease; } .faq-question:hover { color: #d9a300; } .faq-icon { font-size: 16px; color: #848e9c; transition: transform 0.3s ease; font-weight: bold; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0, 1, 0, 1); } .faq-answer-content { padding-bottom: 24px; font-size: 15px; color: #474d57; line-height: 1.7; } .faq-item.active .faq-icon { transform: rotate(45deg); color: #f0b90b; } .faq-item.active .faq-answer { max-height: 300px; transition: max-height 0.3s ease-in-out; } @media (max-width: 1024px) { .hero-section, .swap-section, .security-content { grid-template-columns: 1fr; text-align: center; gap: 60px; } .hero-left, .swap-left, .security-right { max-width: 100%; margin: 0 auto; } .security-item { text-align: left; } .big-text-bg { font-size: 110px; } .ba-news-top-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ba-container { padding: 0 16px; } .ba-news-top-grid { grid-template-columns: 1fr; } .ba-news-card-small { flex-direction: row !important; align-items: center; padding: 12px; gap: 12px; } .ba-news-card-small .ba-ex-thumb-small { width: 90px !important; height: 70px !important; flex-shrink: 0; } .ba-news-card-small .ba-news-content-small h3 { font-size: 14px; line-height: 1.3; } .ba-news-card-small .ba-news-content-small p { font-size: 12px; margin: 2px 0; -webkit-line-clamp: 2; } .btn-gold { padding: 8px 16px; font-size: 13px; } .hero-section, .swap-section, .security-section, .ba-section.ba-news-section { padding: 40px 16px; } .faq-section { padding: 50px 16px; } .hero-title, .security-main-title, .ba-section-title { font-size: 28px; } .hero-desc, .swap-title { font-size: 16px; } .big-text-bg { font-size: 55px; bottom: 0; } .binance-icon-img { width: 110px; left: 0; } .phone-img, .security-img-card { width: 240px; } .security-item-title { font-size: 20px; } } .stock-trade-section { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 80px 10%; background-color: #0b0e11; overflow: hidden; gap: 60px; width: 100%; box-sizing: border-box; } .stock-left-box { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; } .stock-left-box .stock-phone-wrapper { position: relative; z-index: 2; width: 100%; } .stock-left-box .stock-phone-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5)); } .stock-left-box .stock-float-coin { position: absolute; top: 10%; left: 5%; width: 60px; height: auto; z-index: 3; animation: stockCoinFloat 3s ease-in-out infinite; } @keyframes stockCoinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .stock-right-box { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; z-index: 2; } .stock-right-box .stock-main-title { width: 100%; font-size: 28px; font-weight: 900; color: #ffffff; line-height: 1.4; margin-bottom: 20px; } .stock-right-box .stock-desc-text { width: 100%; color: #848e9c; font-size: 15px; line-height: 1.6; margin-bottom: 25px; } .stock-right-box .stock-action-btn { display: inline-block; background-color: #f0b90b; color: #0b0e11; padding: 14px 32px; font-size: 16px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; text-decoration: none; text-align: center; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(240, 185, 11, 0.2); } .stock-right-box .stock-action-btn:hover { background-color: #fcd535; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(240, 185, 11, 0.35); } @media screen and (max-width: 960px) { .stock-trade-section { flex-direction: column; padding: 60px 20px; gap: 40px; text-align: center; } .stock-right-box { align-items: center; text-align: center; } .stock-right-box .stock-main-title { font-size: 22px; } }