:root{--primary-bg: #0a0b14;--secondary-bg: #151622;--tertiary-bg: #1a1b2e;--card-bg: rgba(26, 27, 46, .7);--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--accent-primary: #00d4ff;--accent-secondary: #7c3aed;--accent-success: #00ff94;--accent-warning: #ffb800;--accent-danger: #ff4757;--text-primary: #ffffff;--text-secondary: #b8c5d1;--text-muted: #6b7688;--shadow-glow: 0 0 40px rgba(0, 212, 255, .15);--shadow-card: 0 8px 32px rgba(0, 0, 0, .3);--gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);--gradient-success: linear-gradient(135deg, #00ff94 0%, #00d4ff 100%);--gradient-danger: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);--gradient-card: linear-gradient(135deg, rgba(26, 27, 46, .9) 0%, rgba(21, 22, 34, .8) 100%)}*{box-sizing:border-box}html,body{background:var(--primary-bg);background-image:radial-gradient(circle at 25% 25%,rgba(0,212,255,.05) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(124,58,237,.05) 0%,transparent 50%);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh;margin:0;padding:0;overflow-x:hidden}#particles-js{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--shadow-card)}.glass-card{background:var(--gradient-card);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--shadow-card);transition:all .4s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}.glass-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gradient-primary);opacity:0;transition:opacity .4s ease}.glass-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px #0006,var(--shadow-glow);border-color:#00d4ff4d}.glass-card:hover:before{opacity:1}.nav-glass{background:#151622f2;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--glass-border);padding:12px 0}.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}.gradient-text-success{background:var(--gradient-success);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}.gradient-text-blue{background:linear-gradient(135deg,#93c5fd,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}.gradient-text-green{background:linear-gradient(135deg,#86efac,#4ade80);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}.btn-primary{background:var(--gradient-primary);color:#fff;border:none;border-radius:16px;padding:14px 28px;font-weight:600;font-size:14px;transition:all .3s ease;position:relative;overflow:hidden;cursor:pointer;box-shadow:0 4px 20px #00d4ff4d;text-decoration:none;display:inline-block}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px #00d4ff66;text-decoration:none;color:#fff}.btn-primary:hover:before{left:100%}.btn-secondary{background:#7c3aed33;color:#a78bfa;border:2px solid rgba(124,58,237,.3);border-radius:16px;padding:12px 24px;font-weight:600;transition:all .3s ease;cursor:pointer;text-decoration:none;display:inline-block}.btn-secondary:hover{background:#7c3aed4d;border-color:#7c3aed;color:#fff;transform:translateY(-1px);text-decoration:none}.btn-success{background:var(--gradient-success);color:#fff;border:none;border-radius:16px;padding:14px 28px;font-weight:600;transition:all .3s ease;cursor:pointer;box-shadow:0 4px 20px #00ff944d;text-decoration:none;display:inline-block}.btn-success:hover{transform:translateY(-2px);box-shadow:0 8px 30px #00ff9466;text-decoration:none;color:#fff}.feature-card{background:var(--gradient-card);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--shadow-card);transition:all .4s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden;padding:2rem}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gradient-primary);opacity:0;transition:opacity .4s ease}.feature-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px #0006,var(--shadow-glow);border-color:#00d4ff4d}.feature-card:hover:before{opacity:1}.form-input{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 20px;color:#fff;font-size:14px;transition:all .3s ease;width:100%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-input:focus{outline:none;border-color:var(--accent-primary);background:#ffffff14;box-shadow:0 0 0 4px #00d4ff1a}.form-input::placeholder{color:var(--text-muted)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:all .3s ease}.modal-overlay.active{opacity:1;visibility:visible}.modal{background:var(--gradient-card);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border-radius:24px;padding:32px;max-width:90vw;max-height:90vh;overflow-y:auto;border:1px solid var(--glass-border);transform:scale(.9);transition:transform .3s ease;box-shadow:var(--shadow-glow);width:400px}.modal-overlay.active .modal{transform:scale(1)}.login-btn{background:#00ff9426;border:1px solid rgba(0,255,148,.3);color:var(--accent-success);padding:12px 20px;border-radius:16px;font-weight:600;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px}.login-btn:hover{background:#00ff9440;border-color:var(--accent-success);color:#fff;transform:translateY(-2px);text-decoration:none}.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:all .3s ease;padding:8px 16px;border-radius:12px}.nav-link:hover{color:var(--accent-primary);background:#00d4ff1a;text-decoration:none}.status-indicator{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;font-size:12px;font-weight:500}.status-connected{background:#00ff9426;border:1px solid rgba(0,255,148,.3);color:var(--accent-success)}.status-disconnected{background:#ff475726;border:1px solid rgba(255,71,87,.3);color:#ff6b7a}.status-loading{background:#ffb80026;border:1px solid rgba(255,184,0,.3);color:var(--accent-warning)}.pulse-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 currentColor}70%{transform:scale(1);box-shadow:0 0 0 10px #0000}to{transform:scale(.95);box-shadow:0 0 #0000}}.fade-in{animation:fadeIn .8s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:slideIn .8s cubic-bezier(.25,.46,.45,.94)}@keyframes slideIn{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}.hero-title{font-size:clamp(2.5rem,5vw,4rem);line-height:1.1;margin-bottom:1.5rem}.hero-subtitle{font-size:clamp(1rem,2vw,1.25rem);line-height:1.6;margin-bottom:2rem}.section{margin-bottom:6rem}.logo-container{display:flex;align-items:center;gap:16px;background:#ffffff08;border:1px solid rgba(255,255,255,.05);padding:8px 24px 8px 8px;border-radius:40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 20px #0003}.logo-icon{width:60px;height:60px;border-radius:25px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px #00d4ff33;transition:all .3s cubic-bezier(.175,.885,.32,1.275);overflow:hidden;border:none;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(#fff,#000);position:relative}.logo-icon:hover{transform:scale(1.05) rotate(2deg);box-shadow:0 0 35px #7c3aed66}.logo-icon img{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;filter:brightness(1) contrast(1);transform:translate(-50%,-46%) scale(1.45)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}::-webkit-scrollbar-thumb{background:var(--gradient-primary);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.error-message{background:#ff475726;border:1px solid rgba(255,71,87,.3);color:#ff6b7a;padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px}.success-message{background:#00ff9426;border:1px solid rgba(0,255,148,.3);color:var(--accent-success);padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px}.info-message{background:#00d4ff26;border:1px solid rgba(0,212,255,.3);color:var(--accent-primary);padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px}@media (max-width: 768px){.glass-card,.feature-card{border-radius:16px;padding:1.5rem}.nav-glass{padding:1rem}.section{margin-bottom:4rem}}body.modal-open{overflow:hidden}