:root{
--bg:#03070d;--bg2:#07111f;--card:#0a1524;--card2:#0d1a2b;
--gold:#f5bd3f;--gold2:#ffd866;--gold3:#c88a18;
--text:#f4f7fb;--soft:#c7d0dc;--muted:#8290a2;
--green:#35d99a;--red:#ff6875;--border:rgba(255,255,255,.085);
--shadow:0 28px 80px rgba(0,0,0,.45);--radius:24px;--max:1180px
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg);scroll-behavior:smooth}
body{
margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);
font-family:"Inter",Arial,sans-serif;-webkit-font-smoothing:antialiased;
background:
radial-gradient(circle at 8% 8%,rgba(245,189,63,.075),transparent 28%),
radial-gradient(circle at 95% 40%,rgba(30,91,145,.12),transparent 32%),
linear-gradient(145deg,#020509,#07111f 55%,#03070d)
}
body:before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.28;
background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:44px 44px
}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
button,input,select{font:inherit}
::selection{color:#07111f;background:var(--gold)}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}

/* loader */
.page-loader{
position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
background:radial-gradient(circle,rgba(245,189,63,.07),transparent 35%),#03070d;
transition:opacity .35s,visibility .35s
}
.page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-content{text-align:center}
.loader-logo{
width:210px;height:auto;max-height:150px;object-fit:contain;margin:0 auto 25px;
filter:drop-shadow(0 12px 28px rgba(0,0,0,.55))
}
.loader-spinner{
width:38px;height:38px;margin:auto;border:3px solid rgba(255,255,255,.1);
border-top-color:var(--gold);border-radius:50%;animation:spin .75s linear infinite
}
.loader-content p{margin:15px 0 0;color:var(--muted);font-size:12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* header */
.signup-header{
position:relative;z-index:20;border-bottom:1px solid rgba(255,255,255,.065);
background:rgba(3,7,13,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.header-inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand-logo{display:inline-flex;max-width:240px}
.brand-logo img{
width:190px;height:auto;max-height:72px;object-fit:contain;
filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));transition:.25s
}
.brand-logo:hover img{transform:translateY(-1px)}
.home-link{
display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;
border:1px solid var(--border);border-radius:12px;color:var(--soft);
background:rgba(255,255,255,.035);font-size:13px;font-weight:700;transition:.22s
}
.home-link:hover{color:var(--gold2);border-color:rgba(245,189,63,.28);background:rgba(245,189,63,.07);transform:translateY(-1px)}

/* main */
.signup-page{padding:54px 0 64px}
.signup-container{
width:min(calc(100% - 40px),1180px);margin:auto;
display:grid;grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr);gap:30px
}

/* information panel */
.signup-info{
position:relative;overflow:hidden;border:1px solid rgba(245,189,63,.13);
border-radius:var(--radius);background:
radial-gradient(circle at 15% 10%,rgba(245,189,63,.12),transparent 32%),
linear-gradient(145deg,rgba(11,24,40,.97),rgba(5,12,22,.98));box-shadow:var(--shadow)
}
.signup-info:after,.signup-card:before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8
}
.info-content{position:relative;z-index:2;height:100%;padding:52px 44px;display:flex;flex-direction:column;justify-content:center}
.info-badge,.form-tag{
display:inline-flex;align-items:center;width:max-content;min-height:31px;padding:0 12px;
border:1px solid rgba(245,189,63,.22);border-radius:999px;color:var(--gold2);
background:rgba(245,189,63,.075);font-size:10px;font-weight:800;letter-spacing:.15em
}
.info-content h1{
margin:22px 0 17px;font-family:"Poppins","Inter",sans-serif;
font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.035em
}
.info-content h1 span{display:block;color:var(--gold);text-shadow:0 0 26px rgba(245,189,63,.09)}
.info-content>p{max-width:530px;margin:0;color:var(--soft);font-size:15px;line-height:1.8}
.info-points{display:grid;gap:13px;margin-top:34px}
.info-point{
display:flex;gap:13px;align-items:flex-start;padding:15px;
border:1px solid rgba(255,255,255,.065);border-radius:15px;
background:rgba(255,255,255,.025);transition:.22s
}
.info-point:hover{transform:translateY(-2px);border-color:rgba(245,189,63,.18);background:rgba(245,189,63,.035)}
.point-icon{
flex:0 0 29px;width:29px;height:29px;display:grid;place-items:center;border-radius:9px;
color:#08111d;background:linear-gradient(135deg,var(--gold2),var(--gold3));
font-size:14px;font-weight:900
}
.info-point strong{display:block;margin:1px 0 4px;font-size:13px}
.info-point small{display:block;color:var(--muted);font-size:11px;line-height:1.55}

/* card */
.signup-card{
position:relative;overflow:hidden;padding:38px;border:1px solid var(--border);
border-radius:var(--radius);background:linear-gradient(145deg,rgba(12,25,42,.985),rgba(5,12,21,.99));
box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.025)
}
.signup-card:after{
content:"";position:absolute;width:220px;height:220px;right:-95px;top:-145px;border-radius:50%;
background:rgba(245,189,63,.055);filter:blur(25px);pointer-events:none
}
.signup-card-header{position:relative;z-index:1;margin-bottom:25px}
.signup-card-header h2{
margin:15px 0 8px;font-family:"Poppins","Inter",sans-serif;
font-size:clamp(24px,3vw,31px);line-height:1.2;letter-spacing:-.025em
}
.signup-card-header p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}

/* messages */
.form-message{display:none;margin:0 0 18px;padding:12px 14px;border:1px solid transparent;border-radius:12px;font-size:12px;line-height:1.55}
.form-message.show{display:block}
.form-message.info{color:#bcdcff;border-color:rgba(76,168,255,.18);background:rgba(76,168,255,.07)}
.form-message.error{color:#ffb7bf;border-color:rgba(255,104,117,.2);background:rgba(255,104,117,.07)}
.form-message.success{color:#aaf0d2;border-color:rgba(53,217,154,.2);background:rgba(53,217,154,.07)}

/* fields */
.form-group{position:relative;margin-bottom:17px}
.form-group>label{display:flex;gap:7px;margin:0 0 8px 2px;color:#e7edf5;font-size:12px;font-weight:700}
.optional{color:var(--muted);font-size:10px;font-weight:500}
.input-wrapper{
position:relative;display:flex;align-items:center;min-height:51px;
border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(2,7,13,.62);
transition:.2s
}
.input-wrapper:focus-within{
border-color:rgba(245,189,63,.55);background:rgba(2,7,13,.82);
box-shadow:0 0 0 3px rgba(245,189,63,.075),0 10px 25px rgba(0,0,0,.18)
}
.input-icon{flex:0 0 45px;width:45px;display:grid;place-items:center;color:var(--gold);font-size:14px}
.input-wrapper input,.input-wrapper select{
width:100%;min-width:0;height:49px;padding:0 14px 0 0;border:0;outline:0;color:var(--text);
background:transparent;font-size:13px;font-weight:500
}
.input-wrapper input::placeholder{color:#647287}
.input-wrapper select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:40px}
.input-wrapper select option,.country-code-wrapper select option{color:#111;background:#fff}
.form-group.has-success .input-wrapper{border-color:rgba(53,217,154,.34)}
.form-group.has-error .input-wrapper{border-color:rgba(255,104,117,.45)}
.field-error{display:none;margin:7px 2px 0;color:#ff8e99;font-size:10px;line-height:1.45}
.field-error.show{display:block}
.phone-hint,.referral-hint{display:block;margin:7px 2px 0;color:#68768a;font-size:10px;line-height:1.5}

/* phone */
.phone-row{display:grid;grid-template-columns:148px minmax(0,1fr);gap:9px}
.country-code-wrapper{min-width:0}
.country-code-wrapper select{
width:100%;height:51px;padding:0 9px;border:1px solid rgba(255,255,255,.09);
outline:0;border-radius:13px;color:var(--text);background:#02070d;font-size:12px;font-weight:600
}
.country-code-wrapper select:focus{border-color:rgba(245,189,63,.55);box-shadow:0 0 0 3px rgba(245,189,63,.075)}

/* password */
.password-toggle{
flex:0 0 auto;min-width:47px;height:30px;margin-right:9px;padding:0 8px;
border:1px solid rgba(255,255,255,.09);border-radius:8px;color:#aab5c3;
background:rgba(255,255,255,.035);cursor:pointer;font-size:10px;font-weight:700
}
.password-toggle:hover{color:var(--gold2);border-color:rgba(245,189,63,.24);background:rgba(245,189,63,.06)}
.password-strength{margin-top:8px}
.strength-bar{width:100%;height:4px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07)}
.strength-bar span{display:block;width:0;height:100%;border-radius:inherit;background:var(--gold);transition:.25s}
.password-strength small{display:block;margin-top:5px;color:#68768a;font-size:9px}

/* referral */
.referral-status{display:none;flex:0 0 auto;max-width:190px;margin-right:10px;font-size:9px;line-height:1.3;text-align:right}
.referral-status.show{display:block}.referral-status.valid{color:#65e4ad}.referral-status.invalid{color:#ff8e99}
.referral-note{
display:flex;gap:10px;align-items:flex-start;margin:3px 0 19px;padding:12px 13px;
border:1px solid rgba(245,189,63,.12);border-radius:12px;background:rgba(245,189,63,.045)
}
.referral-note>span{color:var(--gold);font-size:13px;font-weight:800}
.referral-note p{margin:0;color:#9ba8b8;font-size:10px;line-height:1.6}
.referral-note strong{color:#e5edf6}

/* terms */
.terms-row{margin:2px 0 19px}
.checkbox-label{position:relative;display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.checkbox-label input{position:absolute;opacity:0;pointer-events:none}
.custom-checkbox{
position:relative;flex:0 0 19px;width:19px;height:19px;margin-top:1px;border:1px solid rgba(255,255,255,.18);
border-radius:6px;background:rgba(255,255,255,.035);transition:.2s
}
.checkbox-label input:checked+.custom-checkbox{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 3px rgba(245,189,63,.08)}
.checkbox-label input:checked+.custom-checkbox:after{
content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #07111f;
border-width:0 2px 2px 0;transform:rotate(45deg)
}
.terms-text{color:#8e9bab;font-size:10px;line-height:1.65}
.terms-text a{color:var(--gold2);font-weight:700}.terms-text a:hover{text-decoration:underline}
.terms-row>.field-error{margin-left:29px}

/* submit */
.signup-submit{
position:relative;width:100%;min-height:55px;display:flex;align-items:center;justify-content:center;gap:10px;
overflow:hidden;border:1px solid rgba(255,216,102,.42);border-radius:14px;color:#07111f;
background:linear-gradient(135deg,#ffd866,#f5bd3f 52%,#d89420);
box-shadow:0 14px 30px rgba(245,189,63,.13),inset 0 1px 0 rgba(255,255,255,.42);
cursor:pointer;font-family:"Poppins","Inter",sans-serif;font-size:13px;font-weight:800;transition:.22s
}
.signup-submit:before{
content:"";position:absolute;inset:0;transform:translateX(-110%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:.55s
}
.signup-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(245,189,63,.19)}
.signup-submit:hover:before{transform:translateX(110%)}
.signup-submit:active{transform:translateY(0)}
.signup-submit:disabled{cursor:not-allowed;opacity:.72;transform:none}
.button-text,.button-arrow{position:relative;z-index:2}.button-arrow{font-size:17px;transition:.2s}
.signup-submit:hover .button-arrow{transform:translateX(3px)}
.button-loader{
display:none;position:relative;z-index:2;width:17px;height:17px;border:2px solid rgba(7,17,31,.25);
border-top-color:#07111f;border-radius:50%;animation:spin .65s linear infinite
}
.signup-submit.loading .button-loader{display:block}.signup-submit.loading .button-arrow{display:none}

/* login */
.login-prompt{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:19px;color:#69778a;font-size:11px;text-align:center}
.login-prompt a{color:var(--gold2);font-weight:800}.login-prompt a:hover{text-decoration:underline}

/* footer */
.signup-footer{border-top:1px solid rgba(255,255,255,.06);background:rgba(1,5,10,.64)}
.footer-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-inner p{margin:0;color:#667486;font-size:10px}
.footer-tagline{color:#8995a5!important;font-size:9px!important;font-weight:700;letter-spacing:.18em}
.risk-note{padding:0 0 24px;color:#4f5c6d;font-size:9px;line-height:1.7;text-align:center}

/* modal */
.success-modal{
position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;
opacity:0;visibility:hidden;pointer-events:none;background:rgba(0,0,0,.72);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:.25s
}
.success-modal.show{opacity:1;visibility:visible;pointer-events:auto}
.success-modal-box{
width:min(100%,430px);padding:38px 30px 30px;border:1px solid rgba(245,189,63,.2);
border-radius:22px;background:radial-gradient(circle at 50% 0,rgba(245,189,63,.1),transparent 38%),#081321;
box-shadow:0 35px 100px rgba(0,0,0,.6);text-align:center;transform:translateY(12px) scale(.98);transition:.28s
}
.success-modal.show .success-modal-box{transform:none}
.success-icon{
width:58px;height:58px;display:grid;place-items:center;margin:0 auto 18px;border:1px solid rgba(53,217,154,.25);
border-radius:50%;color:#07111f;background:linear-gradient(135deg,#70edbb,#35d99a);font-size:25px;font-weight:900
}
.success-modal-box h2{margin:0 0 9px;font-family:"Poppins","Inter",sans-serif;font-size:23px}
.success-modal-box p{margin:0 auto;max-width:340px;color:#9ba8b8;font-size:12px;line-height:1.7}
.modal-button{
width:100%;min-height:48px;margin-top:23px;border:1px solid rgba(255,216,102,.35);border-radius:12px;
color:#07111f;background:linear-gradient(135deg,#ffd866,#e8aa2e);cursor:pointer;font-size:12px;font-weight:800
}
.modal-button:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(245,189,63,.14)}

/* responsive */
@media(max-width:980px){
.signup-container{grid-template-columns:1fr;max-width:720px}
.info-content{padding:38px}
.info-points{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-point{display:block}.point-icon{margin-bottom:10px}.signup-card{padding:34px}
}
@media(max-width:680px){
.container,.signup-container{width:min(calc(100% - 24px),100%)}
.header-inner{min-height:70px}.brand-logo img{width:145px;max-height:58px}
.home-link{min-height:38px;padding:0 13px;font-size:11px}
.signup-page{padding:28px 0 38px}.signup-container{gap:17px}
.signup-info,.signup-card{border-radius:20px}
.info-content{padding:30px 23px}.info-content h1{margin-top:17px;font-size:34px}
.info-content>p{font-size:13px;line-height:1.7}
.info-points{grid-template-columns:1fr;gap:9px;margin-top:23px}.info-point{display:flex;padding:12px}.point-icon{margin-bottom:0}
.signup-card{padding:25px 18px 22px}.signup-card-header h2{font-size:24px}.signup-card-header p{font-size:11px}
.phone-row{grid-template-columns:116px minmax(0,1fr);gap:7px}
.country-code-wrapper select{padding:0 7px;font-size:10px}
.input-wrapper{min-height:49px}.input-wrapper input,.input-wrapper select{height:47px;font-size:12px}
.input-icon{flex-basis:39px;width:39px;font-size:13px}
.referral-status{max-width:145px;font-size:8px}
.footer-inner{min-height:68px;flex-direction:column;justify-content:center;gap:5px;padding:14px 0}
.risk-note{padding-bottom:19px;font-size:8px}
}
@media(max-width:420px){
.brand-logo img{width:132px;max-height:54px}.home-link{min-height:36px;padding:0 11px;font-size:10px}
.signup-page{padding-top:20px}.info-content{padding:25px 18px}.info-content h1{font-size:30px}
.signup-card{padding:22px 14px 19px}.signup-card-header h2{font-size:22px}
.form-group{margin-bottom:15px}.phone-row{grid-template-columns:105px minmax(0,1fr)}
.input-icon{flex-basis:35px;width:35px}.input-wrapper input,.input-wrapper select{font-size:11px}
.password-toggle{min-width:42px;padding:0 6px;margin-right:7px;font-size:9px}
.referral-status{display:none!important}.signup-submit{min-height:52px;font-size:12px}
.success-modal-box{padding:31px 21px 23px;border-radius:19px}
}
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}
:focus-visible{outline:2px solid rgba(245,189,63,.75);outline-offset:3px}