* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Segoe UI", "Microsoft YaHei", sans-serif;}
html {scroll-behavior: smooth;}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(30,41,59,0.6);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(56,189,248,0.25);}
::-webkit-scrollbar-track{background:linear-gradient(135deg,#1a2347,#0f172a,#1e293b);}
body {background: #05070E;color: #fff;overflow-x: hidden;}
.bg-particles {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;background: radial-gradient(circle at 50% 50%, #101a33 0%, #05070E 60%);}
.container {max-width: 1200px;margin: 0 auto;padding: 0 20px;width:100%;}
.nav {position: fixed;top: 0;width: 100%;padding: 20px 0;background: rgba(9,14,23,0.8);backdrop-filter: blur(15px);border-bottom: 1px solid rgba(0,216,255,0.1);z-index: 999;}
.nav-wrap {display: flex;justify-content: space-between;align-items: center;}
.logo {font-size: 26px;font-weight: 700;background: linear-gradient(90deg, #00d8ff, #7000ff);-webkit-background-clip: text;color: transparent;white-space:nowrap;}
.nav-menu {display: flex;gap: 28px;align-items: center;}
.nav-menu a {color: #e0e0e0;text-decoration: none;font-weight: 500;transition: 0.3s;white-space:nowrap;}
.nav-menu a:hover {color: #00d8ff;}
.nav-btn {display: flex;gap: 12px;}
.nav-btn a {padding: 10px 24px;border-radius: 8px;text-decoration: none;font-weight: 500;transition: 0.3s;white-space:nowrap;}
.btn-login {border: 1px solid rgba(0,216,255,0.3);color: #00d8ff;}
.btn-reg {background: linear-gradient(90deg, #00d8ff, #7000ff);color: #fff;border: none;}
.btn-login:hover {border-color: #00d8ff;}
.btn-reg:hover {transform: translateY(-2px);box-shadow: 0 5px 20px rgba(0,216,255,0.3);}
.section {padding: 100px 0 0px;}
.title {text-align: center;margin-bottom: 40px;}
.title h2 {font-size: 32px;background: linear-gradient(90deg, #00d8ff, #7000ff);-webkit-background-clip: text;color: transparent;margin-bottom: 10px;white-space:nowrap;}
.title p {color: #a0b0c8;}
.grid {display: grid;grid-template-columns: repeat(3,1fr);gap: 24px;margin-bottom: 40px;}
.card {background: rgba(16,26,51,0.4);border: 1px solid rgba(0,216,255,0.1);border-radius: 16px;padding: 30px;text-align: center;transition: 0.3s;}
.card:hover {transform: translateY(-5px);border-color: rgba(0,216,255,0.4);box-shadow: 0 8px 25px rgba(0,216,255,0.1);}
.card i {font-size: 42px;background: linear-gradient(90deg, #00d8ff, #7000ff);-webkit-background-clip: text;color: transparent;margin-bottom: 18px;}
.card h3 {font-size: 20px;margin-bottom: 12px;color: #fff;white-space:nowrap;}
.card p {color: #90a0b8;line-height: 1.6;}
.pay-grid {display: grid;grid-template-columns: repeat(2,1fr);gap: 30px;}
.pay-item {background: rgba(16,26,51,0.4);border: 1px solid rgba(0,216,255,0.1);border-radius: 16px;padding: 30px;text-align: center;}
.pay-item i {font-size: 44px;background: linear-gradient(90deg, #00d8ff, #7000ff);-webkit-background-clip: text;color: transparent;margin-bottom:15px;}
.pay-item h4 {font-size: 20px;margin: 15px 0;color: #fff;white-space:nowrap;}
.pay-item p {color: #a0b0c8;line-height: 1.6;}
.step a {display: inline-block;margin-top: 15px;padding: 10px 20px;background: linear-gradient(90deg, #00d8ff, #7000ff);color: #fff;border-radius: 8px;text-decoration: none;white-space:nowrap;}
@media(max-width:768px){
.nav-menu{display:none;}
.grid{grid-template-columns:1fr;}
.pay-grid{grid-template-columns:1fr;}
}