*, *::before, *::after { 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: #050505 !important; color: #ffffff !important; min-height: 100vh; overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } .pro-hero-section { max-width: 1440px; width: 100%; margin: 0 auto; padding: 80px 48px 100px; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; position: relative; min-height: 650px; } .pro-hero-left { z-index: 5; max-width: 560px; } .pro-hero-title { font-size: 50px; font-weight: 800; color: #ffffff; margin-bottom: 24px; letter-spacing: -1px; line-height: 1.15; } .pro-hero-desc { font-size: 18px; line-height: 1.6; color: #a6a6a6; margin-bottom: 36px; font-weight: 400; } .pro-btn-primary { display: inline-block; background-color: #9EFF00; color: #050505; font-weight: 700; text-decoration: none; border-radius: 8px; transition: all 0.2s ease; border: none; cursor: pointer; } .pro-btn-primary:hover { opacity: 0.9; transform: translateY(-2px); } .pro-hero-right { position: relative; display: flex; justify-content: center; align-items: center; } .pro-badge-img { position: absolute; top: 20px; left: 40px; width: 60px; z-index: 4; } .pro-shape-bg { position: absolute; width: 380px; height: 380px; opacity: 0.15; z-index: 1; } .pro-phone-container { position: relative; z-index: 3; } .pro-device-img { width: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); } .pro-watermark-text { text-align: center; position: relative; font-size: 32px; font-weight: 900; color: rgba(255, 255, 255, 0.5); z-index: 0; pointer-events: none; letter-spacing: 2px; } .pro-feature-section { max-width: 1440px; margin: 0 auto; padding: 80px 48px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } .pro-feature-phone-wrap { max-width: 450px; margin: 0 auto; } .pro-feature-phone-img { width: 100%; border-radius: 16px; } .pro-feature-main-title { font-size: 38px; font-weight: 800; color: #ffffff; line-height: 1.3; margin-bottom: 24px; } .pro-feature-desc-text { font-size: 16px; line-height: 1.7; color: #a6a6a6; margin-bottom: 32px; } .pro-action-btn { display: inline-block; padding: 14px 32px; background-color: rgba(255, 255, 255, 0.06); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 8px; transition: all 0.2s; } .pro-action-btn:hover { background-color: #9EFF00; color: #050505; border-color: #9EFF00; } .pro-web3-section { max-width: 1440px; margin: 0 auto; padding: 80px 48px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } .pro-web3-title { font-size: 36px; font-weight: 900; color: #FFFFFF; line-height: 1.4; margin-bottom: 24px; } .pro-web3-right { position: relative; display: flex; justify-content: center; align-items: center; } .pro-coin-float { position: absolute; width: 80px; animation: floatAnim 4s ease-in-out infinite; } .pro-coin-top-left { top: 10%; left: 10%; } @keyframes floatAnim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .pro-news-section { padding: 80px 0; background-color: rgba(255, 255, 255, 0.01); } .pro-container { max-width: 1440px; margin: 0 auto; padding: 0 48px; } .pro-section-title { font-size: 36px; font-weight: 800; text-align: center; margin-bottom: 50px; color: #ffffff; } .pro-news-top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; } .pro-news-card-top, .pro-news-card-small { background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; transition: all 0.3s ease; display: flex; flex-direction: column; } .pro-news-card-top:hover, .pro-news-card-small:hover { border-color: rgba(158, 255, 0, 0.4); transform: translateY(-4px); background-color: rgba(255, 255, 255, 0.05); } .pro-news-date { font-size: 13px; color: #888888; } .pro-news-body h3 { font-size: 18px; color: #ffffff; margin: 10px 0; line-height: 1.4; } .pro-news-body p { font-size: 14px; color: #a6a6a6; line-height: 1.6; margin-bottom: 15px; } .pro-read-more { font-size: 14px; color: #9EFF00; font-weight: 600; margin-top: auto; } .pro-news-list-single { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .pro-news-card-small { flex-direction: row; align-items: center; gap: 20px; } .pro-thumb-box-small { width: 120px; height: 90px; border-radius: 8px; overflow: hidden; flex-shrink: 0; } .pro-thumb-box-small img { width: 100%; height: 100%; object-fit: cover; } .pro-news-body-small h3 { font-size: 16px; color: #ffffff; margin: 6px 0; } .pro-news-body-small p { font-size: 13px; color: #a6a6a6; margin-bottom: 10px; } .pro-more-btn-card { background-color: rgba(158, 255, 0, 0.05); border: 1px dashed rgba(158, 255, 0, 0.3); border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; min-height: 120px; } .pro-more-btn-card:hover { background-color: rgba(158, 255, 0, 0.1); } .pro-more-btn-card h3 { color: #9EFF00; font-size: 18px; } .pro-security-wrapper { padding: 100px 0; } .pro-security-section { max-width: 1440px; margin: 0 auto; padding: 0 12px; } .pro-security-header { text-align: center; margin-bottom: 60px; } .pro-security-main-title { font-size: 38px; font-weight: 800; color: #ffffff; } .pro-security-content { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } .pro-security-left { position: relative; display: flex; justify-content: center; } .pro-security-bg-shape { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(158,255,0,0.1) 0%, rgba(0,0,0,0) 70%); z-index: 1; } .pro-security-img-card { position: relative; z-index: 2; border-radius: 20px; } .pro-security-right { display: flex; flex-direction: column; gap: 20px; } .pro-security-item { background-color: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); padding: 24px; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; } .pro-security-item.active { background-color: rgba(255, 255, 255, 0.06); border-color: #9EFF00; box-shadow: 0 8px 24px rgba(158, 255, 0, 0.1); } .pro-security-item-title { font-size: 18px; font-weight: 700; color: #ffffff; margin-bottom: 8px; } .pro-security-item.active .pro-security-item-title { color: #9EFF00; } .pro-security-item-desc { font-size: 14px; color: #a6a6a6; line-height: 1.6; } .pro-faq-section { padding: 80px 0 120px; background-color: rgba(255, 255, 255, 0.01); } .pro-faq-container { max-width: 900px; margin: 0 auto; padding: 0 6px; } .pro-faq-header { text-align: center; margin-bottom: 50px; } .pro-faq-header h2 { font-size: 36px; font-weight: 800; color: #ffffff; margin-bottom: 12px; } .pro-faq-header p { color: #a6a6a6; font-size: 16px; } .pro-faq-item { background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; margin-bottom: 16px; overflow: hidden; transition: all 0.3s; } .pro-faq-item.active { border-color: #9EFF00; } .pro-faq-question { width: 100%; background: none; border: none; padding: 20px 24px; text-align: left; font-size: 16px; font-weight: 600; color: #ffffff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .pro-faq-icon { font-size: 20px; color: #9EFF00; transition: transform 0.3s; } .pro-faq-item.active .pro-faq-icon { transform: rotate(45deg); } .pro-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .pro-faq-item.active .pro-faq-answer { max-height: 200px; } .pro-faq-answer-content { padding: 0 24px 20px; font-size: 14px; color: #a6a6a6; line-height: 1.7; } @media (max-width: 992px) { .pro-hero-section, .pro-feature-section, .pro-web3-section, .pro-security-content { grid-template-columns: 1fr; gap: 40px; padding: 60px 24px; } .pro-news-top-grid, .pro-news-list-single { grid-template-columns: 1fr; } .pro-hero-title { font-size: 38px; } }