:root { --purple: #6d35d4; --purple-dark: #32186b; --ink: #241c31; --muted: #746d7e; --line: #e7e1ee; }
* { box-sizing: border-box; }
body.signup-body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 5% 20%, rgba(126,73,220,.1), transparent 27%), #f7f5fa; font-family: 'DM Sans', sans-serif; }
.signup-body h1, .signup-body h2, .signup-body strong { font-family: 'Manrope', sans-serif; }
.signup-container { max-width: 1160px; }
.signup-header { min-height: 74px; color: rgba(255,255,255,.72); background: rgba(47,21,99,.98); }
.signup-header .signup-container { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 1rem; }
.signup-header img { display: block; width: 205px; height: auto; }
.signup-header span { font-size: .8rem; }
.signup-header span a { margin-left: .3rem; color: #fff; font-weight: 800; text-decoration: none; }
.signup-main { padding: 4.5rem 0 5rem; }
.signup-intro { position: sticky; top: 2rem; padding-top: 2rem; }
.signup-kicker { display: inline-flex; padding: .45rem .7rem; color: #6230bd; border: 1px solid #dcd0ee; border-radius: 999px; background: #fff; font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.signup-intro h1 { margin: 1rem 0; font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 800; letter-spacing: -.06em; line-height: 1.04; }
.signup-intro > p { max-width: 470px; color: var(--muted); font-size: 1.03rem; line-height: 1.7; }
.signup-benefits { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.signup-benefits > div { display: flex; gap: .75rem; }
.signup-benefits > div > span { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; color: #fff; border-radius: 9px; background: linear-gradient(135deg, #6330c4, #9161e5); font-size: .7rem; }
.signup-benefits p { display: flex; margin: 0; flex-direction: column; }
.signup-benefits strong { font-size: .86rem; }
.signup-benefits small { color: var(--muted); font-size: .75rem; }
.signup-security { max-width: 450px; margin-top: 2rem; padding: .8rem 1rem; color: #6c6575; border: 1px solid #e3dced; border-radius: 12px; background: rgba(255,255,255,.65); font-size: .7rem; line-height: 1.55; }
.signup-security span { margin-right: .4rem; color: #43a67b; }
.signup-card { padding: clamp(1.4rem, 3.5vw, 2.4rem); border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 28px 70px rgba(49,25,84,.12); }
.signup-card-head { display: flex; margin-bottom: 1.5rem; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.3rem; border-bottom: 1px solid #eee9f3; }
.signup-card-head div > span { color: var(--purple); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.signup-card-head h2 { margin: .2rem 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.04em; }
.signup-card-head p { margin: 0; color: var(--muted); font-size: .78rem; }
.signup-card-head > strong { flex: 0 0 auto; padding: .45rem .65rem; color: #fff; border-radius: 9px; background: #6c35ce; font-size: .7rem; }
.signup-body .form-label { margin-bottom: .38rem; color: #4c4455; font-size: .74rem; font-weight: 700; }
.signup-body .form-control, .signup-body .form-select { min-height: 46px; border-color: #ded8e5; border-radius: 10px; font-size: .86rem; }
.signup-body .form-control:focus, .signup-body .form-select:focus { border-color: #8b5ee0; box-shadow: 0 0 0 .2rem rgba(109,53,212,.11); }
.signup-body .form-text { color: #8a8392; font-size: .65rem; }
.password-field { position: relative; }
.password-field .form-control { padding-right: 3.2rem; }
.password-field button { position: absolute; top: 50%; right: .55rem; padding: .3rem .45rem; color: #6b35cc; border: 0; border-radius: 6px; background: #f1ebfb; font-size: .62rem; font-weight: 800; transform: translateY(-50%); }
.signup-terms { padding: .85rem 1rem .85rem 2.5rem; border: 1px solid #e3ddeb; border-radius: 11px; background: #faf9fc; }
.signup-terms .form-check-input { margin-left: -1.55rem; }
.signup-terms .form-check-label { color: #665e70; font-size: .7rem; line-height: 1.5; }
.signup-submit { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; flex-direction: column; color: #fff; border: 0; border-radius: 11px; background: linear-gradient(135deg, #5522b3, #7d45db); box-shadow: 0 13px 28px rgba(91,38,186,.23); }
.signup-submit:hover, .signup-submit:focus { color: #fff; background: linear-gradient(135deg, #481a9e, #6f36cf); transform: translateY(-1px); }
.signup-submit span { font-family: 'Manrope', sans-serif; font-size: .86rem; font-weight: 800; }
.signup-submit small { color: rgba(255,255,255,.65); font-size: .62rem; }
.signup-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.alert { border-radius: 12px; font-size: .78rem; }
@media (max-width: 991.98px) { .signup-main { padding-top: 2rem; } .signup-intro { position: static; padding-top: 0; text-align: center; } .signup-intro > p, .signup-security { margin-right: auto; margin-left: auto; } .signup-benefits { max-width: 500px; margin-right: auto; margin-left: auto; text-align: left; } }
@media (max-width: 575.98px) { .signup-header span { font-size: 0; } .signup-header span a { font-size: .78rem; } .signup-header img { width: 180px; } .signup-main { padding: 2rem 0 3rem; } .signup-container { padding-right: 20px; padding-left: 20px; } .signup-intro h1 { font-size: 2.55rem; } .signup-card { padding: 1.2rem; border-radius: 18px; } .signup-card-head > strong { display: none; } }