@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap";
:root{--primary:#3496cb;--primary-dark:#1d4ed8;--primary-light:#60a5fa;--secondary:#7c3aed;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--dark:#0f172a;--light:#f8fafc;--gray:#64748b;--gray-light:#cbd5e1;--gradient-1:linear-gradient(135deg, #3496cb 0%, #7c3aed 100%);--gradient-2:linear-gradient(135deg, #10b981 0%, #3496cb 100%);--shadow-sm:0 1px 3px #0000001f;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 25px #0000001a;--shadow-xl:0 20px 40px #0003;--border-radius:24px;--transition:all .3s cubic-bezier(.4, 0, .2, 1)}.modern-auth{background:#fff;min-height:100vh}.split-container{min-height:100vh;display:flex}.split-container.reverse{flex-direction:row-reverse}.brand-side{background:var(--gradient-1);flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative;overflow:hidden}.brand-side:before{content:"";background:radial-gradient(circle,#ffffff1a 0%,#0000 70%);width:150%;height:150%;animation:30s linear infinite rotate;position:absolute}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.brand-content{z-index:2;text-align:center;color:#fff;max-width:500px;position:relative}.floating-logo{margin-bottom:30px;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.logo-circle{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin:0 auto;animation:2s infinite pulse;display:flex}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.floating-elements{height:200px;margin-bottom:30px;position:relative}.floating-card{box-shadow:var(--shadow-lg);color:var(--dark);background:#fff;border-radius:50px;align-items:center;gap:10px;padding:12px 20px;font-weight:500;animation:6s ease-in-out infinite floatCard;display:flex;position:absolute}.floating-card i{color:var(--primary);font-size:20px}.card1{animation-delay:0s;top:0;left:0}.card2{animation-delay:2s;top:50%;right:0}.card3{animation-delay:4s;bottom:0;left:30%}@keyframes floatCard{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-10px)rotate(2deg)}75%{transform:translateY(10px)rotate(-2deg)}}.brand-title{margin-bottom:15px;font-size:42px;font-weight:800;animation:.8s slideInLeft}.brand-subtitle{opacity:.9;margin-bottom:30px;font-size:18px;animation:.8s slideInRight}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.testimonial-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;background:#ffffff1a;border:1px solid #fff3;border-radius:20px;padding:30px;animation:1s fadeInUp}.testimonial-avatar{border:3px solid #fff;border-radius:50%;width:60px;height:60px;margin-bottom:15px;overflow:hidden}.testimonial-avatar img{object-fit:cover;width:100%;height:100%}.testimonial-text{margin-bottom:15px;font-size:16px;font-style:italic;line-height:1.6}.testimonial-name{margin-bottom:5px;font-weight:600}.testimonial-role{opacity:.8;font-size:14px}.stats-container{justify-content:center;gap:40px;margin-top:40px;animation:1s .3s both fadeInUp;display:flex}.stat-item{text-align:center}.stat-number{margin-bottom:5px;font-size:28px;font-weight:800;display:block}.stat-label{opacity:.8;font-size:14px}.form-side{background:#fff;flex:1;justify-content:center;align-items:center;padding:40px;display:flex}.form-container{width:100%;max-width:400px;animation:.8s fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.progress-steps{justify-content:center;align-items:center;margin-bottom:40px;display:flex}.step{flex-direction:column;align-items:center;gap:8px;display:flex}.step-number{background:var(--gray-light);width:40px;height:40px;color:var(--gray);transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;font-weight:600;display:flex}.step.active .step-number{background:var(--gradient-1);color:#fff;animation:.5s pop}@keyframes pop{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.step-label{color:var(--gray);font-size:12px}.step.active .step-label{color:var(--primary)}.step-line{background:var(--gray-light);width:60px;height:2px;transition:var(--transition);margin:0 10px}.step-line.active{background:var(--gradient-1);animation:.5s lineGrow}@keyframes lineGrow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.form-header{text-align:center;margin-bottom:30px}.form-header h2{color:var(--dark);margin-bottom:8px;font-size:28px;font-weight:700}.form-header p{color:var(--gray);font-size:15px}.input-field{margin-bottom:25px;position:relative}.input-field input{border:2px solid var(--gray-light);width:100%;height:56px;transition:var(--transition);background:#fff;border-radius:16px;padding:16px 16px 16px 48px;font-family:inherit;font-size:15px}.input-field input:focus{border-color:var(--primary);outline:none;transform:translateY(-2px);box-shadow:0 0 0 4px #2563eb1a}.input-field input.error{border-color:var(--danger)}.input-field label{color:var(--gray);pointer-events:none;transition:var(--transition);background:#fff;padding:0 4px;font-size:15px;position:absolute;top:50%;left:48px;transform:translateY(-50%)}.input-field input:focus~label,.input-field input:not(:placeholder-shown)~label{color:var(--primary);top:0;transform:translateY(-50%)scale(.85)}.input-field input.error~label{color:var(--danger)}.input-icon{color:var(--gray);transition:var(--transition);font-size:18px;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.input-field input:focus~.input-icon{color:var(--primary)}.error-hint{color:var(--danger);align-items:center;gap:4px;font-size:12px;animation:.3s slideDown;display:flex;position:absolute;bottom:-20px;left:16px}@keyframes slideDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.form-actions{justify-content:space-between;align-items:center;margin-bottom:25px;display:flex}.checkbox{cursor:pointer;color:var(--gray);align-items:center;gap:8px;font-size:14px;display:flex;position:relative}.checkbox input{opacity:0;cursor:pointer;position:absolute}.checkmark{border:2px solid var(--gray-light);width:20px;height:20px;transition:var(--transition);border-radius:6px}.checkbox:hover .checkmark{border-color:var(--primary)}.checkbox input:checked~.checkmark{background:var(--gradient-1);border-color:#0000;animation:.3s checkPop}@keyframes checkPop{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.checkmark:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:10px;display:none;position:absolute;top:3px;left:7px;transform:rotate(45deg)}.checkbox input:checked~.checkmark:after{display:block}.forgot-link{color:var(--primary);transition:var(--transition);font-size:14px;font-weight:500;text-decoration:none;position:relative}.forgot-link:after{content:"";background:var(--gradient-1);width:0;height:2px;transition:var(--transition);position:absolute;bottom:-2px;left:0}.forgot-link:hover:after{width:100%}.submit-btn{background:var(--gradient-1);color:#fff;cursor:pointer;width:100%;height:56px;transition:var(--transition);border:none;border-radius:16px;justify-content:center;align-items:center;gap:10px;font-size:16px;font-weight:600;display:flex;position:relative;overflow:hidden}.submit-btn:before{content:"";background:#fff3;border-radius:50%;width:0;height:0;transition:width .6s,height .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.submit-btn:hover:before{width:400px;height:400px}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #2563eb4d}.submit-btn i{transition:var(--transition)}.submit-btn:hover i{transform:translate(5px)}.spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.alert{border-radius:12px;align-items:center;gap:10px;margin-bottom:20px;padding:12px 16px;font-size:14px;animation:.3s slideIn;display:flex}.alert.error{color:#991b1b;background:#fee2e2}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.social-section{margin:25px 0}.or-text{text-align:center;color:var(--gray);margin-bottom:15px;font-size:14px;position:relative}.or-text:before,.or-text:after{content:"";background:var(--gray-light);width:calc(50% - 70px);height:1px;position:absolute;top:50%}.or-text:before{left:0}.or-text:after{right:0}.social-buttons{gap:12px;display:flex}.social-btn{border:2px solid var(--gray-light);cursor:pointer;height:48px;transition:var(--transition);background:#fff;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}.social-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.social-btn.google:hover{background:#f8f9fa;border-color:#4285f4}.social-btn.facebook:hover{color:#1877f2;border-color:#1877f2}.social-btn.github:hover{color:#333;border-color:#333}.signup-link{text-align:center;color:var(--gray);font-size:14px}.signup-link a{color:var(--primary);transition:var(--transition);margin-left:5px;font-weight:600;text-decoration:none;position:relative}.signup-link a:after{content:"";background:var(--gradient-1);width:0;height:2px;transition:var(--transition);position:absolute;bottom:-2px;left:0}.signup-link a:hover:after{width:100%}@media (max-width:1024px){.brand-title{font-size:36px}.stats-container{gap:20px}}@media (max-width:768px){.split-container,.split-container.reverse{flex-direction:column}.brand-side{padding:60px 20px}.form-side{padding:40px 20px}.brand-title{font-size:32px}.floating-card{display:none}.stats-container{flex-wrap:wrap}}@media (max-width:480px){.form-actions{flex-direction:column;align-items:flex-start;gap:10px}.social-buttons{flex-direction:column}.brand-title{font-size:28px}.form-header h2{font-size:24px}}@media (hover:none) and (pointer:coarse){.submit-btn:active,.social-btn:active{transform:scale(.98)}}
