:root {--primary: #6C63FF;--secondary: #00D4FF;--accent: #FF2E63;--dark: #0F1527;--darker: #0A0E1A;--light: #E2F3F5;--gray: #8A8D9C;}
* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;}
body {background-color: var(--darker);color: var(--light);line-height: 1.6;overflow-x: hidden;background-image: radial-gradient(circle at 10% 20%, rgba(108, 99, 255, 0.1) 0%, transparent 20%),radial-gradient(circle at 90% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 20%),radial-gradient(circle at 50% 50%, rgba(255, 46, 99, 0.05) 0%, transparent 30%);}
.container {max-width: 1200px;margin: 0 auto;padding: 0 20px;}
header {background: rgba(15, 21, 39, 0.85);backdrop-filter: blur(15px);position: fixed;width: 100%;z-index: 1000;border-bottom: 1px solid rgba(108, 99, 255, 0.2);padding: 15px 0;}
nav {display: flex;justify-content: space-between;align-items: center;}
.logo {display: flex;align-items: center;}
.logo-icon {width: 40px;height: 40px;background: linear-gradient(135deg, var(--primary), var(--secondary));border-radius: 10px;display: flex;align-items: center;justify-content: center;margin-right: 10px;box-shadow: 0 0 15px rgba(108, 99, 255, 0.5);}
.logo h1 {font-size: 28px;font-weight: 800;background: linear-gradient(90deg, var(--primary), var(--secondary));-webkit-background-clip: text;-webkit-text-fill-color: transparent;letter-spacing: 1px;}
.nav-links {display: flex;list-style: none;}
.nav-links li {margin-left: 30px;}
.nav-links a {color: var(--light);text-decoration: none;font-weight: 500;transition: all 0.3s;position: relative;padding: 5px 0;}
.nav-links a:hover {color: var(--secondary);}
.nav-links a::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background: linear-gradient(90deg, var(--primary), var(--secondary));transition: width 0.3s;}
.nav-links a:hover::after {width: 100%;}
.cta-button {background: linear-gradient(90deg, var(--primary), var(--secondary));color: var(--darker);border: none;padding: 12px 28px;border-radius: 50px;font-weight: 700;cursor: pointer;transition: all 0.3s;box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);letter-spacing: 0.5px;}
.cta-button:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(108, 99, 255, 0.6);}
.mobile-menu {display: none;font-size: 24px;color: var(--light);cursor: pointer;}
.hero {padding: 180px 0 120px;position: relative;overflow: hidden;}
.hero-content {display: flex;align-items: center;justify-content: space-between;}
.hero-text {flex: 1;max-width: 600px;}
.hero-badge {display: inline-block;background: rgba(108, 99, 255, 0.2);color: var(--secondary);padding: 8px 20px;border-radius: 50px;font-size: 14px;font-weight: 600;margin-bottom: 20px;border: 1px solid rgba(108, 99, 255, 0.3);}
.hero h2 {font-size: 3.8rem;margin-bottom: 20px;line-height: 1.1;background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.hero p {font-size: 1.3rem;margin-bottom: 40px;color: var(--gray);max-width: 500px;}
.hero-buttons {display: flex;gap: 20px;}
.secondary-button {background: transparent;color: var(--secondary);border: 2px solid var(--secondary);padding: 12px 28px;border-radius: 50px;font-weight: 600;cursor: pointer;transition: all 0.3s;}
.secondary-button:hover {background: rgba(0, 212, 255, 0.1);transform: translateY(-3px);}
.hero-visual {flex: 1;display: flex;justify-content: center;align-items: center;position: relative;}
.floating-card {width: 300px;height: 180px;background: rgba(20, 25, 45, 0.7);border-radius: 20px;padding: 25px;box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);border: 1px solid rgba(108, 99, 255, 0.3);backdrop-filter: blur(10px);position: relative;overflow: hidden;}
.floating-card::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 5px;background: linear-gradient(90deg, var(--primary), var(--secondary));}
.card-1 {transform: rotate(-5deg) translateY(-20px);z-index: 2;animation: float 6s ease-in-out infinite;}
.card-2 {transform: rotate(5deg) translateY(20px);z-index: 1;animation: float 6s ease-in-out infinite 1s;}
@keyframes float {0%, 100% { transform: rotate(-5deg) translateY(-20px); }50% { transform: rotate(-5deg) translateY(-30px); }}
.card-title {display: flex;align-items: center;margin-bottom: 15px;}
.card-icon {width: 40px;height: 40px;background: rgba(108, 99, 255, 0.2);border-radius: 10px;display: flex;align-items: center;justify-content: center;margin-right: 15px;color: var(--primary);}
.card-content {display: flex;justify-content: space-between;align-items: center;}
.exchange-rate {font-size: 24px;font-weight: 700;color: var(--secondary);}
.features {padding: 100px 0;background: rgba(15, 21, 39, 0.5);}
.section-title {text-align: center;margin-bottom: 70px;}
.section-title h2 {font-size: 2.8rem;margin-bottom: 15px;color: var(--light);}
.section-title p {color: var(--gray);max-width: 600px;margin: 0 auto;font-size: 1.2rem;}
.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;}
.feature-card {background: rgba(20, 25, 45, 0.7);border-radius: 20px;padding: 40px 30px;transition: all 0.4s;border: 1px solid rgba(108, 99, 255, 0.2);position: relative;overflow: hidden;backdrop-filter: blur(10px);}
.feature-card::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(108, 99, 255, 0.1), rgba(0, 212, 255, 0.05));opacity: 0;transition: opacity 0.4s;}
.feature-card:hover {transform: translateY(-15px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);border-color: rgba(108, 99, 255, 0.5);}
.feature-card:hover::before {opacity: 1;}
.feature-icon {font-size: 50px;margin-bottom: 25px;color: var(--primary);}
.feature-card h3 {font-size: 1.6rem;margin-bottom: 15px;color: var(--light);}
.feature-card p {color: var(--gray);line-height: 1.7;}
.auto-process {padding: 100px 0;}
.process-container {display: flex;justify-content: space-between;align-items: center;margin-top: 50px;}
.process-visual {flex: 1;display: flex;justify-content: center;}
.process-ring {width: 300px;height: 300px;border-radius: 50%;border: 3px solid transparent;background: conic-gradient(from 0deg, var(--primary), var(--secondary), var(--accent), var(--primary));position: relative;display: flex;align-items: center;justify-content: center;animation: rotate 20s linear infinite;}
@keyframes rotate {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}
.process-ring::before {content: '';position: absolute;width: 270px;height: 270px;border-radius: 50%;background: var(--darker);}
.process-center {position: absolute;z-index: 1;text-align: center;}
.process-center i {font-size: 50px;color: var(--secondary);margin-bottom: 15px;}
.process-center h3 {font-size: 1.5rem;color: var(--light);}
.process-steps {flex: 1;max-width: 500px;}
.process-step {display: flex;margin-bottom: 40px;align-items: flex-start;}
.step-number {width: 60px;height: 60px;background: linear-gradient(135deg, var(--primary), var(--secondary));border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-right: 25px;font-size: 1.5rem;font-weight: 700;color: var(--darker);flex-shrink: 0;box-shadow: 0 5px 15px rgba(108, 99, 255, 0.4);}
.step-content h3 {font-size: 1.4rem;margin-bottom: 10px;color: var(--light);}
.step-content p {color: var(--gray);}
.security {padding: 100px 0;background: rgba(15, 21, 39, 0.5);}
.security-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;}
.security-item {text-align: center;padding: 40px 20px;background: rgba(20, 25, 45, 0.7);border-radius: 20px;transition: all 0.3s;border: 1px solid rgba(108, 99, 255, 0.2);}
.security-item:hover {transform: translateY(-10px);border-color: rgba(108, 99, 255, 0.5);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);}
.security-icon {font-size: 60px;margin-bottom: 25px;color: var(--primary);}
.security-item h3 {margin-bottom: 15px;color: var(--light);font-size: 1.4rem;}
.security-item p {color: var(--gray);}
footer {background: rgba(10, 14, 26, 0.9);padding: 80px 0 30px;border-top: 1px solid rgba(108, 99, 255, 0.2);}
.footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 40px;margin-bottom: 50px;}
.footer-column h3 {color: var(--secondary);margin-bottom: 25px;font-size: 1.4rem;}
.footer-links {list-style: none;}
.footer-links li {margin-bottom: 12px;}
.footer-links a {color: var(--gray);text-decoration: none;transition: color 0.3s;}
.footer-links a:hover {color: var(--secondary);}
.social-links {display: flex;gap: 15px;margin-top: 20px;}
.social-links a {width: 40px;height: 40px;border-radius: 50%;background: rgba(108, 99, 255, 0.2);display: flex;align-items: center;justify-content: center;color: var(--light);transition: all 0.3s;}
.social-links a:hover {background: var(--primary);transform: translateY(-5px);}
.copyright {text-align: center;padding-top: 30px;border-top: 1px solid rgba(255, 255, 255, 0.1);color: var(--gray);font-size: 0.9rem;}
@media (max-width: 1024px) {.hero-content {flex-direction: column;text-align: center;}.hero-text {margin-bottom: 60px;}.process-container {flex-direction: column;}.process-steps {margin-top: 60px;}}
@media (max-width: 768px) {.nav-links {display: none;}.mobile-menu {display: block;}.hero h2 {font-size: 2.8rem;}.hero-buttons {flex-direction: column;align-items: center;}.floating-card {width: 250px;height: 150px;}}