* {margin:0;padding:0;box-sizing:border-box;}
:root {--primary:#00d4ff;--primary-dark:#00a8cc;--secondary:#ff00ff;--accent:#7b2dff;--bg-dark:#0a0a0f;--bg-darker:#050508;--text-primary:#ffffff;--text-secondary:rgba(255,255,255,0.7);--text-muted:rgba(255,255,255,0.5);--glass-bg:rgba(15,20,35,0.6);--glass-border:rgba(0,212,255,0.2);--glow-primary:0 0 30px rgba(0,212,255,0.5);--glow-secondary:0 0 30px rgba(255,0,255,0.4);}
body {font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg-dark);min-height:100vh;overflow-x:hidden;color:var(--text-primary);position:relative;}
.bg-effects {position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden;}
.gradient-flow {position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 20% 80%,rgba(0,212,255,0.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(255,0,255,0.1) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(123,45,255,0.08) 0%,transparent 60%);animation:gradientShift 15s ease-in-out infinite;pointer-events:none;}
@keyframes gradientShift {0%,100% {opacity:1;transform:scale(1);}
50% {opacity:0.8;transform:scale(1.1);}
}
.gradient-orb {position:absolute;border-radius:50%;filter:blur(100px);opacity:0.5;animation:orbFloat 20s ease-in-out infinite;pointer-events:none;}
.orb-1 {display:none;}
.orb-2 {width:500px;height:500px;background:radial-gradient(circle,var(--secondary),transparent 70%);bottom:-150px;right:-150px;animation-delay:-7s;}
.orb-3 {width:400px;height:400px;background:radial-gradient(circle,var(--accent),transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s;}
@keyframes orbFloat {0%,100% {transform:translate(0,0) scale(1);opacity:0.5;}
25% {transform:translate(50px,-50px) scale(1.1);opacity:0.6;}
50% {transform:translate(-30px,30px) scale(0.95);opacity:0.4;}
75% {transform:translate(30px,50px) scale(1.05);opacity:0.55;}
}
.grid-lines {position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,212,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.03) 1px,transparent 1px);background-size:60px 60px;animation:gridMove 25s linear infinite;pointer-events:none;}
@keyframes gridMove {0% {transform:perspective(1000px) rotateX(60deg) translateY(0);}
100% {transform:perspective(1000px) rotateX(60deg) translateY(60px);}
}
.particles-container {position:absolute;width:100%;height:100%;overflow:hidden;pointer-events:none;}
.particle {position:absolute;background:rgba(0,212,255,0.6);border-radius:50%;animation:particleFloat 20s infinite;pointer-events:none;}
@keyframes particleFloat {0%,100% {transform:translateY(0) translateX(0);opacity:0;}
10% {opacity:1;}
90% {opacity:1;}
100% {transform:translateY(-100vh) translateX(50px);opacity:0;}
}
.connection-lines {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.3;pointer-events:none;}
.conn-line {fill:none;stroke:url(#lineGradient);stroke-width:0.3;animation:linePulse 4s ease-in-out infinite;}
.conn-line.cl-2 {animation-delay:-1.5s;}
.conn-line.cl-3 {animation-delay:-3s;}
@keyframes linePulse {0%,100% {opacity:0.2;}
50% {opacity:0.5;}
}
.header {position:fixed;top:0;left:0;right:0;z-index:100000;padding:20px 40px;background:linear-gradient(to bottom,rgba(10,10,15,0.9),transparent);pointer-events:none;}
.header * {pointer-events:auto;}
.header-inner {max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
.logo {display:flex;align-items:center;position:relative;z-index:100001;}
.fullscreen-btn {background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.3);border-radius:8px;padding:8px;color:var(--primary);cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;}
.fullscreen-btn:hover {background:rgba(0,212,255,0.2);box-shadow:0 0 15px rgba(0,212,255,0.3);}
.fullscreen-btn svg {display:block;}
.logo-text {font-weight:700;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.main-content {position:relative;z-index:10;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;}
.hero-section {width:100%;max-width:1600px;}
.orbit-system {position:relative;width:100%;height:850px;display:flex;align-items:flex-start;justify-content:center;z-index:15;}
.orbit-ring {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;overflow:visible;}
.orbit-outer {width:800px;height:800px;animation:rotate 80s linear infinite;}
.orbit-inner {width:550px;height:550px;animation:rotateReverse 60s linear infinite;}
@keyframes rotate {from {transform:translate(-50%,-50%) rotate(0deg);}
to {transform:translate(-50%,-50%) rotate(360deg);}
}
@keyframes rotateReverse {from {transform:translate(-50%,-50%) rotate(360deg);}
to {transform:translate(-50%,-50%) rotate(0deg);}
}
.orbit-item {position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform 0.3s ease;pointer-events:auto;z-index:9999;}
.orbit-outer .orbit-item {transform-origin:center center;animation:counterRotate 80s linear infinite;}
.orbit-inner .orbit-item {transform-origin:center center;animation:counterRotateReverse 60s linear infinite;}
@keyframes counterRotate {from {transform:rotate(0deg);}
to {transform:rotate(-360deg);}
}
@keyframes counterRotateReverse {from {transform:rotate(-360deg);}
to {transform:rotate(0deg);}
}
.orbit-item:hover {transform:scale(1.2) !important;z-index:99999;}
.orbit-icon {width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(0,212,255,0.5));transition:all 0.3s ease;}
.orbit-item:hover .orbit-icon {filter:drop-shadow(0 0 15px rgba(0,212,255,0.8));}
.orbit-name {font-size:11px;color:var(--text-muted);white-space:nowrap;opacity:0;transform:translateY(-5px);transition:all 0.3s ease;background:rgba(0,0,0,0.7);padding:2px 8px;border-radius:10px;backdrop-filter:blur(10px);}
.orbit-item:hover .orbit-name {opacity:1;transform:translateY(0);}
.center-content {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;text-align:center;width:380px;height:380px;background:radial-gradient(circle,rgba(15,20,35,0.9) 0%,rgba(15,20,35,0.6) 70%,transparent 100%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;border:1px solid rgba(0,212,255,0.2);box-shadow:inset 0 0 60px rgba(0,212,255,0.1),0 0 60px rgba(0,0,0,0.5);pointer-events:none;}
.center-content > * {pointer-events:auto;}
.center-content::before {content:'';position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(0,212,255,0.3),transparent,rgba(255,0,255,0.3),transparent);animation:rotate 15s linear infinite;z-index:-1;}
.center-content::after {content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(15,20,35,0.95) 0%,transparent 100%);z-index:-1;}
.center-badge {display:inline-block;padding:6px 16px;background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.3);border-radius:20px;font-size:11px;color:var(--primary);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;animation:badgeGlow 3s ease-in-out infinite;}
@keyframes badgeGlow {0%,100% {box-shadow:0 0 10px rgba(0,212,255,0.2);}
50% {box-shadow:0 0 20px rgba(0,212,255,0.4);}
}
.center-icon {width:50px;height:50px;margin-bottom:12px;animation:iconFloat 3s ease-in-out infinite;}
@keyframes iconFloat {0%,100% {transform:translateY(0);}
50% {transform:translateY(-6px);}
}
.center-title {font-size:22px;font-weight:700;margin-bottom:10px;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;min-height:28px;}
.center-desc {font-size:13px;color:var(--text-secondary);line-height:1.5;margin-bottom:16px;min-height:40px;max-width:300px;}
.center-btn {display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;text-decoration:none;border-radius:25px;font-size:13px;font-weight:600;transition:all 0.3s ease;border:none;cursor:pointer;box-shadow:0 4px 15px rgba(0,212,255,0.4);opacity:0;transform:translateY(10px);pointer-events:none;}
.center-btn.visible {opacity:1;transform:translateY(0);pointer-events:auto;}
.center-btn:hover {transform:translateY(-2px);box-shadow:0 6px 25px rgba(0,212,255,0.6);}
.typing-cursor {display:inline-block;width:2px;height:1.2em;background:var(--primary);margin-left:2px;animation:cursorBlink 0.8s infinite;vertical-align:middle;}
@keyframes cursorBlink {0%,50% {opacity:1;}
51%,100% {opacity:0;}
}
.orbit-item.flyout-active {transition:all 0.6s cubic-bezier(0.34,1.56,0.64,1);transform:scale(1.1);}
.orbit-item.flyout-active .orbit-icon {width:36px;height:36px;filter:drop-shadow(0 0 12px rgba(0,212,255,0.8));}
.orbit-item.flyout-active .orbit-name {opacity:0;}
.flyout-card {position:fixed;z-index:999998;opacity:0;transform:scale(0.8) translateY(20px);transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;}
.flyout-card.visible {opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
.flyout-card-inner {background:linear-gradient(135deg,rgba(15,20,35,0.9),rgba(25,30,50,0.9));border:1px solid rgba(0,212,255,0.3);border-radius:12px;padding:12px 16px;min-width:160px;max-width:200px;box-shadow:0 10px 30px rgba(0,0,0,0.4),0 0 20px rgba(0,212,255,0.15),inset 0 1px 0 rgba(255,255,255,0.1);backdrop-filter:blur(15px);display:flex;flex-direction:column;align-items:center;text-align:center;}
.flyout-card-icon {width:36px;height:36px;object-fit:contain;margin-bottom:8px;filter:drop-shadow(0 0 10px rgba(0,212,255,0.4));}
.flyout-card-title {font-size:13px;font-weight:600;margin-bottom:4px;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.flyout-card-desc {font-size:10px;color:rgba(255,255,255,0.6);line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.flyout-card-btn {display:inline-flex;align-items:center;gap:4px;padding:5px 12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;text-decoration:none;border-radius:15px;font-size:10px;font-weight:500;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,212,255,0.3);}
.flyout-card-btn:hover {transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,212,255,0.5);}
.side-particles {position:fixed;top:0;width:150px;height:100%;pointer-events:none;z-index:5;}
.side-particles.left {left:0;background:linear-gradient(to right,rgba(0,212,255,0.03),transparent);}
.side-particles.right {right:0;background:linear-gradient(to left,rgba(255,0,255,0.03),transparent);}
.floating-dots {position:fixed;top:0;width:200px;height:100%;pointer-events:none;z-index:4;}
.floating-dots.left {left:20px;}
.floating-dots.right {right:20px;}
.floating-dot {position:absolute;width:4px;height:4px;background:var(--primary);border-radius:50%;opacity:0.3;animation:dotFloat 8s ease-in-out infinite;}
.floating-dots.right .floating-dot {background:var(--secondary);}
@keyframes dotFloat {0%,100% {transform:translateY(0) scale(1);opacity:0.3;}
50% {transform:translateY(-30px) scale(1.5);opacity:0.6;}
}
@media (max-width:1200px) {.orbit-outer {width:650px;height:650px;}
.orbit-inner {width:450px;height:450px;}
.center-content {width:320px;height:320px;}
}
@media (max-width:768px) {.header {padding:15px 20px;}
.orbit-system {height:650px;}
.orbit-outer {width:500px;height:500px;}
.orbit-inner {width:350px;height:350px;}
.orbit-icon {width:26px;height:26px;}
.center-content {width:260px;height:260px;padding:30px;}
.center-title {font-size:18px;}
.center-desc {font-size:11px;}
}
@media (max-width:480px) {.orbit-outer {width:360px;height:360px;}
.orbit-inner {width:250px;height:250px;}
.orbit-icon {width:22px;height:22px;}
.center-content {width:200px;height:200px;padding:20px;}
.center-title {font-size:14px;}
.center-desc {font-size:10px;}
}
.modal-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:9998;display:none;align-items:center;justify-content:center;}
.modal-container {background:#0f172a;border:1px solid rgba(0,212,255,0.3);border-radius:16px;width:100%;max-width:420px;padding:32px;position:relative;box-shadow:0 0 40px rgba(0,212,255,0.15);animation:modalFade 0.3s ease;}
@keyframes modalFade {from {opacity:0;transform:translateY(20px);}
to {opacity:1;transform:translateY(0);}
}
.logo {display:flex;align-items:center;}
.logo-text {font-size:18px;font-weight:600;}
.fullscreen-btn {width:36px;height:36px;background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.3);border-radius:8px;display:grid;place-items:center;color:#fff;cursor:pointer;}
.mobile-header {display:none;}
.center-icon-wrapper {position:relative;width:80px;height:80px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}
@keyframes spin {0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.header-auth {display:flex;align-items:center;gap:16px;}
.footer {position:fixed;bottom:0;left:0;width:100%;padding:12px 0;background:rgba(15,23,42,0.8);border-top:1px solid rgba(0,212,255,0.2);text-align:center;z-index:999;color:#94a3b8;font-size:13px;}
.footer-inner {display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;}
.footer-inner a{color:#94a3b8;text-decoration:none;}
@media (max-width:768px) {
html,body {overflow-x:hidden !important;}
.mobile-header {display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(15,23,42,0.95);border-bottom:1px solid rgba(0,212,255,0.2);position:sticky;top:0;z-index:999;}
.mobile-left {display:flex;align-items:center;}
.mobile-btn {width:30px;height:30px;background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.3);border-radius:8px;display:grid;place-items:center;color:#fff;font-size:14px;cursor:pointer;}
.footer {position:fixed;bottom:0;left:0;right:0;width:100%;background:#0f172a;border-top:1px solid #1e293b;margin:0;padding:15px 0 25px;z-index:1000;text-align:center !important;}
.footer-inner {display:flex !important;flex-direction:column;justify-content:center;align-items:center !important;width:100%;box-sizing:border-box;gap:10px;margin:0 !important;padding:0 !important;}
}
@media screen and (min-width:960px) {.mobile-header {display:none;}
}