.onboarding-container{background:radial-gradient(circle,#061926,#000);justify-content:space-between;align-items:center;gap:80px;min-height:100vh;padding:60px 100px;display:flex}.preview-side{flex:1.8;justify-content:flex-start;display:flex}.desktop-browser{background:#000000e6;border-radius:14px;flex-direction:column;width:1200px;height:660px;display:flex;overflow:hidden;box-shadow:0 0 110px #7c3aed59}.desktop-bar{background:#141414f2;align-items:center;gap:8px;padding:10px 18px;display:flex}.dot{border-radius:50%;width:12px;height:12px;display:inline-block}.dot.red{background:#ff5f57}.dot.yellow{background:#fdbc2e}.dot.green{background:#28c840}.browser-address{color:#aaa;margin-left:12px;font-family:Inter,sans-serif;font-size:.9rem}.desktop-preview-inner{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-position:50%;background-size:cover;flex:1;justify-content:center;align-items:center;padding:40px;display:flex}.profile-card{text-align:center;color:#fff;overflow-wrap:break-word;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1119;border-radius:18px;width:75%;max-width:850px;padding:40px;transition:background .3s;box-shadow:0 0 60px #7c3aed4d}.profile-avatar{border-radius:50%;margin-bottom:20px}.profile-name{margin-bottom:10px;font-size:1.8rem;font-weight:700}.profile-quote{color:#b7a9ff;margin-bottom:12px;font-size:1rem;font-style:italic}.profile-desc{color:#aaa;word-wrap:break-word;max-width:90%;margin-bottom:20px;margin-left:auto;margin-right:auto;font-size:1rem;line-height:1.5}.profile-socials{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.profile-socials a{color:#7c3aed;font-weight:500;text-decoration:none}.profile-socials a:hover{color:#9b5de5}.input-side{flex:.6;justify-content:flex-end;align-items:center;display:flex}.onboarding-step-box{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f0f0fd9;border:1px solid #7c3aed40;border-radius:18px;flex-direction:column;gap:20px;width:500px;padding:45px 40px;display:flex;box-shadow:0 0 50px #7c3aed59,inset 0 0 10px #7c3aed26}.onboarding-step-box h2{font-size:1.5rem;font-weight:600}.step-sub{color:#a1a1aa;margin-bottom:6px;font-size:1rem}.onboarding-step-box input{color:#fff;background:#121212;border:1px solid #2a2a2a;border-radius:10px;outline:none;width:100%;padding:10px 15px;font-size:1rem;transition:border .2s}.onboarding-step-box input:focus{border-color:#7c3aed}.onboarding-step-box button{color:#fff;cursor:pointer;background:linear-gradient(90deg,#7c3aed,#9b5de5);border:none;border-radius:10px;width:auto;min-width:140px;padding:10px 0;font-weight:600;transition:transform .2s,box-shadow .2s}.onboarding-step-box button:hover{transform:translateY(-1px);box-shadow:0 0 15px #7c3aed66}.onboarding-nav{justify-content:space-between;gap:12px;margin-top:10px;display:flex}.onboarding-nav button{color:#fff;border:none;flex:1;background:linear-gradient(90deg,#7c3aed,#9b5de5)!important}.onboarding-nav button:hover{transform:translateY(-1px);box-shadow:0 0 15px #7c3aed66}@media (max-width:900px){.preview-side{display:none}.onboarding-container{flex-direction:column;justify-content:center;align-items:center;gap:30px;padding:40px 20px}.input-side{flex:unset;justify-content:center;width:100%}.onboarding-step-box{width:100%;max-width:420px;padding:30px;box-shadow:0 0 30px #7c3aed33}.onboarding-step-box h2{font-size:1.3rem}}@media (max-width:600px){.onboarding-container{padding:25px 15px}.onboarding-step-box{padding:25px}.onboarding-step-box input,.onboarding-step-box button{font-size:.9rem}}.profile-socials{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:12px;display:flex}.profile-socials a{background:#1119;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:flex}.profile-socials a:hover{background:#7c3aed4d;transform:scale(1.08);box-shadow:0 0 15px #7c3aed66}.social-icon{filter:brightness(0)invert();opacity:.95;width:32px;height:32px;transition:opacity .2s}.profile-socials a:hover .social-icon{opacity:1}.onboarding-loading{color:#fff;background:radial-gradient(circle,#061926,#000);flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100vh;font-family:Inter,sans-serif;display:flex}.spinner{border:6px solid #ffffff1a;border-top-color:#7c3aed;border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}