:root { --navy:#0a1f3c; --navy-mid:#122b52; --navy-deep:#060f1e; --gold:#c9972b; --gold-lt:#f5d98e; --gold-dark:#a07000; --surface:#f4f6f9; --card:#fff; --border:#e3e7ef; --success:#17a362; --danger:#e03e3e; --warning:#d68910; --info:#2176ae; --txt1:#0a1f3c; --txt2:#4b5a72; --txt3:#8a97ab; --radius:14px; --radius-sm:10px; --radius-lg:18px; --sh-sm:0 2px 8px rgba(10,31,60,.07); --sh-md:0 6px 24px rgba(10,31,60,.10); --sh-lg:0 16px 48px rgba(10,31,60,.16); --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; --font-display:'Georgia','Times New Roman',serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-ui); color: var(--txt1); background: var(--surface); -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: var(--navy); } .display-serif { font-family: var(--font-display); } .au-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .au-brandside { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%); padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; } .au-orb { position: absolute; border-radius: 50%; pointer-events: none; } .au-orb.one { width: 420px; height: 420px; top: -140px; right: -120px; background: radial-gradient(circle, rgba(201,151,43,.2), transparent 70%); } .au-orb.two { width: 300px; height: 300px; bottom: -120px; left: -100px; background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%); } .au-brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; } .au-brand-mark { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #f4f6f9, #fff); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(201,151,43,.4); } .au-brand-text strong { display: block; font-size: 18px; font-weight: 800; color: #fff; line-height: 1; } .au-brand-text small { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-lt); } .au-brand-mid { position: relative; z-index: 1; } .au-brand-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 1rem; } .au-brand-mid h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.2; margin: 0 0 1rem; color: #fff; } .au-brand-mid p { color: rgba(255,255,255,.72); font-size: 1.02rem; line-height: 1.6; max-width: 400px; margin: 0; } .au-steps-rail { display: flex; flex-direction: column; gap: 16px; margin-top: 2rem; } .au-rail { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.6); font-weight: 600; transition: color .2s ease; } .au-rail .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; transition: all .2s ease; } .au-rail.active { color: #fff; } .au-rail.active .dot { border-color: var(--gold-lt); background: var(--gold-lt); color: var(--navy); } .au-rail.done .dot { border-color: var(--success); background: var(--success); color: #fff; } .au-brand-foot { position: relative; z-index: 1; font-size: 12.5px; color: rgba(255,255,255,.5); } .au-formside { display: flex; flex-direction: column; padding: 32px 40px; overflow-y: auto; } .au-topnav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; color: var(--txt2); } .au-topnav a { font-weight: 700; color: var(--navy); } .au-topnav a:hover { color: var(--gold-dark); } .au-form-center { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 420px; width: 100%; margin: 0 auto; padding: 32px 0; } .au-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 2rem; } .au-mobile-brand .au-brand-mark { width: 38px; height: 38px; } .au-form-head { margin-bottom: 1.8rem; } .au-form-head h2 { font-size: 1.7rem; color: var(--navy); margin: 0 0 .4rem; } .au-form-head p { font-size: 14px; color: var(--txt2); margin: 0; } .au-form-head p strong { color: var(--navy); } .au-field { margin-bottom: 1.1rem; } .au-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--txt2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; } .au-input-wrap { position: relative; display: flex; align-items: center; } .au-input-icon { position: absolute; left: 13px; color: var(--txt3); pointer-events: none; transition: color .2s ease; } .au-input { width: 100%; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px 12px 40px; font-size: 14px; font-family: inherit; color: var(--txt1); outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .au-input.has-toggle { padding-right: 44px; } .au-input::placeholder { color: var(--txt3); } .au-input:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px rgba(10,31,60,.07); } .au-input-wrap:focus-within .au-input-icon { color: var(--gold-dark); } .au-toggle { position: absolute; right: 10px; background: none; border: none; padding: 4px; color: var(--txt3); cursor: pointer; display: flex; } .au-toggle:hover { color: var(--navy); } .au-otp { letter-spacing: .5em; text-align: center; font-size: 20px !important; font-weight: 800; padding-left: 14px !important; } .au-btn { position: relative; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, var(--gold), #e8b840); color: #fff; border: none; border-radius: var(--radius-sm); padding: 13px; font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 4px 16px rgba(201,151,43,.35); transition: transform .15s ease, box-shadow .15s ease; }.au-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,151,43,.45); }.au-btn:disabled { opacity: .85; cursor: default; transform: none; }.au-spinner { display: none; animation: auSpin .7s linear infinite; }.au-btn.loading .au-btn-label { visibility: hidden; }.au-btn.loading .au-spinner { display: block; position: absolute; left: 50%; top: 50%; animation: auSpinC .7s linear infinite; }
    @keyframes auSpin { to { transform: rotate(360deg); } }
    @keyframes auSpinC { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } } .au-alert { display: none; align-items: center; gap: 8px; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; font-weight: 600; margin-bottom: 1.2rem; } .au-alert.show { display: flex; } .au-alert.error { background: rgba(224,62,62,.07); border: 1px solid rgba(224,62,62,.25); color: var(--danger); } .au-alert.success { background: rgba(23,163,98,.08); border: 1px solid rgba(23,163,98,.25); color: var(--success); } .au-meta-row { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: 13px; } .au-link-btn { background: none; border: none; padding: 0; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--gold-dark); cursor: pointer; } .au-link-btn:hover { color: var(--gold); } .au-link-btn:disabled { color: var(--txt3); cursor: default; } .au-back { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--txt2); } .au-back:hover { color: var(--navy); } .au-strength { height: 4px; border-radius: 4px; background: var(--border); margin-top: 8px; overflow: hidden; } .au-strength span { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .25s ease, background .25s ease; } .au-step { display: none; } .au-step.active { display: block; animation: auFade .3s ease both; }
    @keyframes auFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .au-success-wrap { text-align: center; } .au-success-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(23,163,98,.12); color: var(--success); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.4rem; } .au-alt { text-align: center; font-size: 13.5px; color: var(--txt2); margin-top: 1.6rem; } .au-alt a { font-weight: 700; color: var(--navy); }
    @media (max-width: 900px) { .au-wrap { grid-template-columns: 1fr; } .au-brandside { display: none; } .au-mobile-brand { display: flex; } .au-formside { padding: 24px 20px; min-height: 100vh; } .au-topnav { justify-content: center; }
    }