/*==========================
RESET
==========================*/

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body{

    font-family:"Segoe UI",sans-serif;

    background:#090909;

    color:white;

    overflow-x:hidden;

    overflow-y:auto;

    min-height:100vh;

    position:relative;

}

/*==========================
BACKGROUND
==========================*/

.bg-glow {

    position:fixed;

    border-radius: 50%;

    filter: blur(170px);

    opacity: .12;

    animation: moveGlow 10s ease-in-out infinite alternate;

}

.glow1 {

    width: 550px;

    height: 550px;

    background: #FFD700;

    left: -180px;

    top: -150px;

}

.glow2 {

    width: 450px;

    height: 450px;

    background: #F4B400;

    right: -150px;

    bottom: -150px;

}

.bg-grid {

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background-image:

        linear-gradient(rgba(255, 215, 0, .03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 215, 0, .03) 1px, transparent 1px);

    background-size: 70px 70px;

}

/*==========================
LOGO
==========================*/

.logo{

    position:fixed;

    top:35px;

    left:45px;

    display:flex;

    align-items:center;

    gap:18px;

    z-index:1000;

}

.logo-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    background:linear-gradient(135deg,#FFD54A,#F4B400);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    font-weight:900;

    color:#111;

    box-shadow:

        0 0 35px rgba(255,215,0,.35);

}

.logo span{

    font-size:32px;

    font-weight:800;

    letter-spacing:4px;

}

/*==========================
LAYOUT
==========================*/

.register-container{

    width:1300px;

    max-width:92%;

    margin:130px auto 80px;

    display:grid;

    grid-template-columns:420px 1fr;

    border-radius:35px;

    overflow:hidden;

    background:#121212;

    border:1px solid rgba(255,215,0,.08);

    box-shadow:

        0 30px 90px rgba(0,0,0,.45);

}

/*==========================
LEFT
==========================*/

.invite-panel {

    padding: 55px;

    background: linear-gradient(180deg, #1a1a1a, #101010);

    border-right: 1px solid rgba(255, 215, 0, .08);

    text-align: center;

}

.premium {

    display: inline-flex;

    gap: 10px;

    padding: 10px 18px;

    background: #222;

    border-radius: 50px;

    color: #FFD54A;

    margin-bottom: 35px;

}

.avatar {

    width: 130px;

    height: 130px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid #FFD54A;

    margin-bottom: 25px;

}

.referral-box {

    margin: 35px 0;

    padding: 20px;

    border-radius: 20px;

    background: #181818;

    border: 1px solid rgba(255, 215, 0, .12);

}

.referral-box h3 {

    margin-top: 10px;

    color: #FFD54A;

    font-size: 30px;

}

.benefits {

    margin-top: 35px;

    text-align: left;

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.benefits i {

    color: #FFD54A;

    margin-right: 12px;

}

/*==========================
RIGHT
==========================*/

.register-panel {

    padding: 70px;

}

.small-title {

    color: #FFD54A;

    letter-spacing: 2px;

    font-size: 13px;

}

.register-panel h1 {

    font-size: 52px;

    margin: 15px 0;

}

.register-panel p {

    color: #999;

    margin-bottom: 45px;

}

.input-group {

    display: flex;

    align-items: center;

    background: #181818;

    border: 1px solid rgba(255, 215, 0, .08);

    border-radius: 16px;

    margin-bottom: 22px;

    padding: 0 20px;

    transition: .35s;

}

.input-group:hover {

    border-color: #FFD54A;

}

.input-group i {

    color: #FFD54A;

    margin-right: 15px;

}

.input-group input {

    width: 100%;

    background: none;

    border: none;

    outline: none;

    padding: 20px 0;

    font-size: 16px;

    color: white;

}

button {

    width: 100%;

    margin-top: 15px;

    padding: 20px;

    border: none;

    border-radius: 16px;

    font-size: 18px;

    font-weight: bold;

    background: linear-gradient(135deg, #FFD54A, #F4B400);

    cursor: pointer;

    transition: .35s;
    position: relative;

    overflow: hidden;


}

button::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 100%;

    height: 100%;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    transition: .7s;

}

button:hover::before {

    left: 120%;

}

button:hover {

    transform: translateY(-4px);

    box-shadow: 0 20px 45px rgba(255, 215, 0, .35);

}

.login {

    margin-top: 30px;

    text-align: center;

    color: #999;

}

.login a {

    color: #FFD54A;

    text-decoration: none;

}

/*==========================
ANIMATION
==========================*/

@keyframes moveGlow {

    from {

        transform: translate(0, 0);

    }

    to {

        transform: translate(60px, -40px);

    }

}

.password-strength {

    margin-top: -8px;

    margin-bottom: 22px;

}

.strength-bar {

    height: 7px;

    background: #222;

    border-radius: 50px;

    overflow: hidden;

}

.strength-fill {

    width: 10%;

    height: 100%;

    background: #ff3b30;

    border-radius: 50px;

    transition: .35s;

}

.password-strength small {

    display: block;

    margin-top: 8px;

    color: #888;

}

.agree {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 25px 0;

    color: #aaa;

    cursor: pointer;

}

.agree input {

    width: 18px;

    height: 18px;

    accent-color: #FFD54A;

}

.agree a {

    color: #FFD54A;

    text-decoration: none;

}

.input-group:hover,

.input-group:focus-within {

    border-color: #FFD54A;

    box-shadow:

        0 0 0 4px rgba(255, 215, 0, .08),

        0 10px 25px rgba(255, 215, 0, .08);

}

.stats {

    display: flex;

    justify-content: space-between;

    margin-top: 45px;

    padding-top: 30px;

    border-top: 1px solid rgba(255, 215, 0, .08);

}

.stat {

    text-align: center;

    flex: 1;

}

.stat h2 {

    color: #FFD54A;

    font-size: 34px;

    margin-bottom: 8px;

}

.stat span {

    color: #888;

    font-size: 14px;

}

.trust {

    position: absolute;

    top: 105px;

    left: 50px;

    background: #171717;

    border: 1px solid rgba(255, 215, 0, .12);

    padding: 12px 20px;

    border-radius: 40px;

    color: #FFD54A;

    font-size: 14px;

}

.trust i {

    margin-right: 10px;

}

.invite-panel {

    transition: .45s;

}

.invite-panel:hover {

    transform: translateY(-6px);

}

.register-panel {

    transition: .45s;

}

.register-panel:hover {

    transform: translateY(-6px);

}

.avatar {

    box-shadow:

        0 0 35px rgba(255, 215, 0, .30);

}

.avatar:hover {

    transform: scale(1.05);

    transition: .35s;

}
/*==================================================
RESPONSIVE TABLET
==================================================*/
@media (max-width: 1100px) {

    .logo {
        position: relative;
        top: auto;
        left: auto;
        width: 92%;
        max-width: 900px;
        margin: 28px auto 0;
    }

    .register-container {
        width: 92%;
        max-width: 900px;
        margin: 35px auto 60px;
        grid-template-columns: 340px 1fr;
    }

    .invite-panel {
        padding: 40px 30px;
    }

    .register-panel {
        padding: 50px 40px;
    }

    .register-panel h1 {
        font-size: 42px;
    }

    .stats {
        gap: 8px;
    }

    .stat h2 {
        font-size: 28px;
    }
}

/*==================================================
RESPONSIVE MOBILE
==================================================*/
@media (max-width: 768px) {

    body {
        min-height: 100vh;
        overflow-x: hidden;
    }

    .bg-glow {
        filter: blur(110px);
        opacity: .1;
    }

    .glow1 {
        width: 320px;
        height: 320px;
        left: -160px;
        top: -80px;
    }

    .glow2 {
        width: 300px;
        height: 300px;
        right: -150px;
        bottom: -80px;
    }

    .bg-grid {
        background-size: 45px 45px;
    }

    .logo {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 32px);
        margin: 18px auto 0;
        gap: 11px;
    }

    .logo-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 26px;
    }

    .logo span {
        font-size: 23px;
        letter-spacing: 2.5px;
    }

    .register-container {
        width: calc(100% - 24px);
        max-width: none;
        margin: 20px auto 35px;
        display: flex;
        flex-direction: column;
        border-radius: 24px;
        overflow: hidden;
    }

    .invite-panel {
        order: 2;
        padding: 32px 22px;
        border-right: none;
        border-top: 1px solid rgba(255, 215, 0, .08);
    }

    .register-panel {
        order: 1;
        padding: 34px 20px 38px;
    }

    .register-panel:hover,
    .invite-panel:hover {
        transform: none;
    }

    .small-title {
        font-size: 11px;
        letter-spacing: 1.6px;
    }

    .register-panel h1 {
        font-size: 32px;
        line-height: 1.18;
        margin: 12px 0;
    }

    .register-panel p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 28px;
    }

    .input-group {
        min-height: 56px;
        border-radius: 14px;
        margin-bottom: 16px;
        padding: 0 15px;
    }

    .input-group i {
        flex-shrink: 0;
        margin-right: 12px;
    }

    .input-group input {
        min-width: 0;
        padding: 17px 0;
        font-size: 16px;
    }

    .input-group .toggle-password {
        margin-right: 0;
        margin-left: 10px;
        cursor: pointer;
    }

    .password-strength {
        margin-top: -3px;
        margin-bottom: 17px;
    }

    .password-strength small {
        font-size: 12px;
    }

    .agree {
        align-items: flex-start;
        gap: 10px;
        margin: 20px 0;
        font-size: 13px;
        line-height: 1.5;
    }

    .agree input {
        flex: 0 0 18px;
        margin-top: 2px;
    }

    button {
        min-height: 56px;
        margin-top: 5px;
        padding: 16px;
        border-radius: 14px;
        font-size: 16px;
    }

    button:hover {
        transform: none;
    }

    .login {
        margin-top: 23px;
        font-size: 14px;
    }

    .premium {
        margin-bottom: 22px;
        padding: 9px 15px;
        font-size: 13px;
    }

    .avatar {
        width: 96px;
        height: 96px;
        margin-bottom: 17px;
    }

    .invite-panel h2 {
        font-size: 24px;
        overflow-wrap: anywhere;
    }

    .invite-panel > p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: #aaa;
    }

    .referral-box {
        margin: 25px 0;
        padding: 17px 14px;
        border-radius: 16px;
    }

    .referral-box h3 {
        font-size: 22px;
        overflow-wrap: anywhere;
    }

    .benefits {
        margin-top: 25px;
        gap: 15px;
        font-size: 14px;
    }

    .benefits div {
        display: flex;
        align-items: flex-start;
        line-height: 1.45;
    }

    .benefits i {
        flex-shrink: 0;
        margin-top: 3px;
    }

    .stats {
        margin-top: 28px;
        padding-top: 22px;
        gap: 4px;
    }

    .stat h2 {
        font-size: 25px;
    }

    .stat span {
        font-size: 11px;
    }
}

/*==================================================
SMALL MOBILE
==================================================*/
@media (max-width: 420px) {

    .logo {
        width: calc(100% - 24px);
    }

    .logo-icon {
        width: 42px;
        height: 42px;
        font-size: 23px;
    }

    .logo span {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .register-container {
        width: calc(100% - 16px);
        border-radius: 20px;
    }

    .register-panel {
        padding: 30px 16px 34px;
    }

    .invite-panel {
        padding: 30px 17px;
    }

    .register-panel h1 {
        font-size: 28px;
    }

    .input-group {
        padding: 0 13px;
    }

    .stats {
        flex-wrap: wrap;
        row-gap: 18px;
    }

    .stat {
        min-width: 30%;
    }
}