*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue','Microsoft YaHei',sans-serif;background:#000;color:#f5f5f7;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Top nav */
.topbar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:200;background:rgba(0,0,0,0.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.topbar .brand{font-size:14px;font-weight:600;color:#f5f5f7;letter-spacing:0.5px}
.topbar .login-btn{font-size:13px;color:#f5f5f7;background:#7c4dff;border:none;padding:6px 16px;border-radius:980px;cursor:pointer;font-weight:500;transition:background .2s}
.topbar .login-btn:hover{background:#5e35b1}

/* Page */
.page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:80px 24px 48px}

.logo{font-size:48px;font-weight:700;color:#f5f5f7;letter-spacing:-1px;margin-bottom:12px}
.tagline{color:#86868b;font-size:17px;font-weight:400;margin-bottom:64px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:56px;width:100%;max-width:980px}

.card{background:#1d1d1f;border-radius:18px;padding:44px 32px 40px;text-align:left;cursor:pointer;transition:all .4s cubic-bezier(.25,.1,.25,1);text-decoration:none;display:block;border:1px solid transparent}
.card:hover{background:#2d2d2f;transform:scale(1.02)}
.card h2{font-size:28px;font-weight:600;color:#f5f5f7;letter-spacing:-0.5px;margin-bottom:12px;line-height:1.2}
.card .desc{font-size:15px;color:#86868b;line-height:1.7;font-weight:400;margin-bottom:28px}
.card .meta{display:flex;gap:16px}
.card .meta span{font-size:12px;color:#6e6e73;font-weight:500}
.card .meta span b{color:#a1a1a6;font-weight:500}

.footer{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.footer a{font-size:14px;color:#7c4dff;padding:8px 16px;border-radius:980px;transition:all .2s;text-decoration:none;font-weight:400}
.footer a:hover{background:#1d1d1f}

/* Modal overlay */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:300;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}

.modal{background:#1d1d1f;border-radius:18px;width:100%;max-width:400px;padding:40px 36px;position:relative;animation:modalIn .3s cubic-bezier(.25,.1,.25,1)}
@keyframes modalIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}

.modal .close{position:absolute;top:16px;right:20px;background:none;border:none;color:#86868b;font-size:20px;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
.modal .close:hover{background:#2d2d2f;color:#f5f5f7}

.modal h3{font-size:24px;font-weight:600;color:#f5f5f7;margin-bottom:8px;letter-spacing:-0.3px}
.modal .modal-sub{font-size:14px;color:#86868b;margin-bottom:32px}

.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;color:#86868b;margin-bottom:8px;font-weight:500}
.form-group input{width:100%;padding:12px 16px;border-radius:12px;border:1px solid #38383a;background:#000;color:#f5f5f7;font-size:15px;outline:none;transition:border-color .2s;font-family:inherit}
.form-group input:focus{border-color:#7c4dff}
.form-group input::placeholder{color:#48484a}

.submit-btn{width:100%;padding:13px;border-radius:12px;border:none;background:#7c4dff;color:#fff;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s;font-family:inherit;margin-top:4px}
.submit-btn:hover{background:#5e35b1}

.switch-text{text-align:center;margin-top:20px;font-size:13px;color:#86868b}
.switch-text a{color:#7c4dff;text-decoration:none;cursor:pointer;font-weight:500}
.switch-text a:hover{text-decoration:underline}

.divider{display:flex;align-items:center;gap:12px;margin:24px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:#38383a}
.divider span{font-size:12px;color:#48484a;white-space:nowrap}

.social-btn{width:100%;padding:12px;border-radius:12px;border:1px solid #38383a;background:transparent;color:#f5f5f7;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:8px}
.social-btn:hover{background:#2d2d2f;border-color:#48484a}

.code-btn{padding:12px 16px;border-radius:12px;border:1px solid #38383a;background:transparent;color:#7c4dff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.code-btn:hover{background:#1d1d1f;border-color:#48484a}
.code-btn:disabled{color:#48484a;cursor:not-allowed;border-color:#2d2d2f}

.error-msg{font-size:12px;color:#ff453a;margin-top:6px;display:none}
.success-msg{text-align:center;padding:20px 0}
.success-msg .check{font-size:48px;margin-bottom:16px;display:block}
.success-msg h3{font-size:20px;color:#f5f5f7;margin-bottom:8px}
.success-msg p{font-size:14px;color:#86868b}

@media(max-width:800px){
  .cards{grid-template-columns:1fr}
  .logo{font-size:34px}
  .modal{margin:0 16px}
}