* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --navy: #07064c;
    --navy-2: #101066;
    --purple: #6517ff;
    --blue: #233cff;
    --yellow: #ffe000;
    --text: #10144e;
    --muted: #62668f;
    --border: #dfe2f2;
    --bg: #f7f8ff;
}

body {
    min-height: 100vh;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 78% 20%, rgba(102, 29, 255, .07), transparent 25%),
        linear-gradient(135deg, #fafbff, #f2f3fc);
}



button, input {
    font: inherit;
}

.page-shell {
    width: min(1220px, calc(100% - 28px));
    min-height: 980px;
    margin: 12px auto;
    display: grid;
    grid-template-columns: 39% 61%;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 45px rgba(21, 24, 84, .12);
    animation: pageLaunch 0.8s ease both;
}

@keyframes  pageLaunch {

    from {
        opacity: 0;
        transform: translateY(25px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

/* LEFT PANEL */
.promo-panel {
    position: relative;
    overflow: hidden;
    color: #fff;
   /* background:
        radial-gradient(circle at 82% 13%, rgba(160, 48, 255, .5), transparent 2%),
        radial-gradient(circle at 73% 88%, rgba(111, 0, 255, .5), transparent 22%),
        linear-gradient(160deg, #05064c 0%, #07055e 58%, #170069 100%);*/
	background: radial-gradient(circle at top, #12491f 0%, #062b13 35%, #011b0b 100%);
    padding: 32px 38px 0;
}

.promo-panel::before,
.promo-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.promo-panel::before {
    width: 320px;
    height: 320px;
    left: -190px;
    top: 300px;
    background: radial-gradient(circle, rgba(75, 48, 255, .35), transparent 70%);
}

.promo-panel::after {
    width: 250px;
    height: 250px;
    right: -160px;
    top: 55px;
    background: radial-gradient(circle, rgba(245, 0, 255, .3), transparent 70%);
}
  .top-header {
            width: 100%;
            padding: 18px 5%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 215, 0, .45);
            background: rgba(0, 30, 12, .92);
        }


 .brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .brand-logo {
           /* width: 58px;*/
            height: 68px;
            /*border-radius: 50%;
            border: 2px solid #f4c400;*/
            object-fit: contain;
        }


/*.brand img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ffd400;
    box-shadow: 0 0 16px rgba(255, 215, 0, .45);
}*/

.brand span {
    color: var(--yellow);
    font-size: 31px;
    font-weight: 800;
}

.promo-copy {
    position: relative;
    z-index: 2;
    margin-top: 35px;
}

.promo-copy h1 {
    font-size: 28px;
    line-height: 1.25;
    margin-bottom: 10px;
}

.promo-copy h1 strong {
    color: var(--yellow);
}

.promo-copy p {
    max-width: 330px;
    color: #fff;
    font-size: 15px;
    line-height: 1.65;
}

.benefits {
    position: relative;
    z-index: 2;
    margin-top: 26px;
}

.benefit {
    display: flex;
    gap: 16px;
    margin-bottom: 26px;
}

.benefit-icon {
    flex: 0 0 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 25px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.network { background: linear-gradient(145deg, #6b20ff, #4611d6); }
.income { background: linear-gradient(145deg, #08c85d, #009642); }
.secure { background: linear-gradient(145deg, #ffad00, #ff5c00); }
.support { background: linear-gradient(145deg, #ff2868, #ef1454); }

.benefit h3 {
    font-size: 15px;
    margin: 3px 0 4px;
}

.benefit p {
    max-width: 255px;
    font-size: 13px;
    line-height: 1.6;
    color: #eeeefe;
}

.product-art {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /*height: 39%;*/
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.product-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 5%, rgba(20, 0, 85, .1));
}

.product-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    mix-blend-mode: normal;
}

/* RIGHT PANEL */
.register-panel {
    background:
        radial-gradient(circle at 90% 8%, rgba(112, 34, 255, .06), transparent 22%),
        #fff;
    padding: 55px 52px 40px;
}

.register-content {
    width: min(100%, 625px);
    margin: 0 auto;
}

.heading-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.heading-icon {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: 15px;
    background: linear-gradient(145deg, #fff, #f4f0ff);
    border: 1px solid #e4dcff;
    color: #4d13df;
    font-size: 38px;
    box-shadow: 0 6px 20px rgba(88, 23, 255, .08);
}

.heading-icon span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 19px;
    font-weight: 800;
}

.heading-row h2 {
    font-size: 31px;
    line-height: 1.15;
    color: #11145c;
}

.heading-row p {
    margin-top: 7px;
    color: #63678e;
    font-size: 16px;
}

.steps {
    display: flex;
    align-items: center;
    margin: 38px 0 32px;
}

.step {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: #8a8da9;
}

.step span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #b5b8ce;
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.step b {
    font-size: 14px;
    font-weight: 500;
}

.step.active {
    color: #4d0eff;
}

.step.active span {
    background: linear-gradient(135deg, #5b14f5, #4013d7);
}

.step.active b {
    font-weight: 700;
}

.step-line {
    height: 1px;
    flex: 1;
    margin: 0 14px;
    background: #dfe1ef;
}

.form-group {
    margin-bottom: 19px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #15162b;
}

.input-wrap {
    position: relative;
}

.input-wrap input {
    width: 100%;
    height: 51px;
    padding: 0 48px 0 50px;
    border: 1px solid #d9dced;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #202352;
    transition: .2s ease;
}

.input-wrap input::placeholder {
    color: #777b9d;
}

.input-wrap input:focus {
    border-color: #6d2aff;
    box-shadow: 0 0 0 3px rgba(103, 29, 255, .09);
}

.input-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: #626797;
    font-size: 21px;
    z-index: 1;
}

.password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #646b96;
    cursor: pointer;
}

.strength-bars {
    display: flex;
    gap: 5px;
    margin-top: 7px;
}

.strength-bars i {
    height: 4px;
    flex: 1;
    border-radius: 10px;
    background: #d3d5e3;
}

.strength-bars.weak i:first-child { background: #f33; }
.strength-bars.medium i:nth-child(-n+2) { background: #f5a000; }
.strength-bars.good i:nth-child(-n+3) { background: #2fbf71; }
.strength-bars.strong i { background: #18ad5e; }

.password-hint {
    display: block;
    margin-top: 7px;
    color: #ef1616;
    font-size: 12px;
}

.error {
    display: block;
    min-height: 0;
    margin-top: 5px;
    color: #ef1a1a;
    font-size: 12px;
}

.has-error input {
    border-color: #ef3333;
}

.terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: #62658b;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 2px;
}

.terms input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkmark {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2px solid #bfc3d8;
    border-radius: 3px;
    position: relative;
    margin-top: 1px;
}

.terms input:checked + .checkmark {
    background: #5c18ee;
    border-color: #5c18ee;
}

.terms input:checked + .checkmark::after {
    content: "✓";
    position: absolute;
    left: 2px;
    top: -2px;
    color: white;
    font-size: 14px;
    font-weight: 800;
}

.terms a,
.login-link a {
    color: #4d0ee9;
    text-decoration: none;
    font-weight: 700;
}

.terms-error {
    margin-left: 28px;
}

.create-btn {
    width: 100%;
    height: 51px;
    margin-top: 17px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(90deg, #7511e9, #2839f4);
    box-shadow: 0 9px 18px rgba(87, 21, 224, .22);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    transition: transform .2s, box-shadow .2s;
}

.create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(87, 21, 224, .3);
}

.create-btn.loading {
    opacity: .75;
    cursor: wait;
}

.arrow {
    font-size: 24px;
    line-height: 1;
}

.login-link {
    text-align: center;
    margin-top: 31px;
    color: #666a91;
    font-size: 14px;
}

/* Small screens */
@media (max-width: 980px) {
    .page-shell {
        grid-template-columns: 1fr;
        width: min(720px, calc(100% - 24px));
        min-height: auto;
    }

    .promo-panel {
        min-height: 470px;
        padding: 28px 30px 0;
    }

    .promo-copy {
        margin-top: 35px;
    }

    .product-art {
        /*height: 42%;*/
		opacity: .5;
    }

    .register-panel {
        padding: 42px 35px 38px;
    }
}

@media (max-width: 600px) {
    body {
        background: #f6f7ff;
    }

    .page-shell {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .promo-panel {
        min-height: 395px;
        padding: 22px 22px 0;
    }

    .brand img {
        width: 50px;
        height: 50px;
    }

    .brand span {
        font-size: 26px;
    }

    .promo-copy {
        margin-top: 25px;
    }

    .promo-copy h1 {
        font-size: 24px;
    }

    .promo-copy p {
        font-size: 14px;
    }

    .benefits {
        margin-top: 18px;
    }

    .benefit {
        margin-bottom: 13px;
        gap: 10px;
    }

    .benefit-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 20px;
    }

    .benefit h3 {
        font-size: 13px;
        margin-top: 0;
    }

    .benefit p {
        font-size: 11px;
        line-height: 1.35;
    }

    .product-art {
        /*height: 30%;*/
        opacity: .5;
    }

    .register-panel {
        padding: 32px 20px 28px;
    }

    .heading-row {
        align-items: flex-start;
        gap: 13px;
    }

    .heading-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        font-size: 29px;
    }

    .heading-row h2 {
        font-size: 25px;
    }

    .heading-row p {
        font-size: 13px;
        line-height: 1.45;
    }

    .steps {
        margin: 26px 0 24px;
    }

    .step b {
        font-size: 12px;
    }

    .step-line {
        margin: 0 8px;
    }

    .form-group {
        margin-bottom: 17px;
    }

    .input-wrap input {
        height: 50px;
        font-size: 14px;
    }

    .create-btn {
        height: 52px;
    }
}

@media (max-width: 390px) {
    .promo-panel {
        min-height: 375px;
    }

    .benefit:nth-child(4) {
        display: none;
    }

    .product-art {
        /*height: 31%;*/
		opacity: .5;
    }

    .heading-row h2 {
        font-size: 22px;
    }

    .step-line {
        margin: 0 5px;
    }
}

 .brand-name {
            font-size: 25px;
            font-weight: 700;
            color: #ffd000;
        }

        .login-link {
            color: #062b13;
            text-decoration: none;
            border: 1px solid #e6bd00;
            padding: 9px 18px;
            border-radius: 25px;
            transition: .3s;
        }

        .login-link:hover {
            background: #e5b900;
            color: #fff;
        }

        /* =========================================
           MAIN CONTAINER
        ========================================= */

        .container {
            width: min(1400px, 94%);
            margin: 25px auto 50px;
        }

        /* =========================================
           PRICE BANNER
        ========================================= */

        .hero {
            position: relative;
            text-align: center;
            padding: 25px 20px 30px;
            margin-bottom: 25px;

            border: 2px solid #e0b900;
            border-radius: 18px;

            background:
                linear-gradient(
                    135deg,
                    rgba(0, 68, 25, .95),
                    rgba(0, 32, 12, .98)
                );

            box-shadow:
                0 0 30px rgba(255, 202, 0, .15),
                inset 0 0 30px rgba(255, 200, 0, .05);
        }

        .hero-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(25px, 4vw, 48px);
            font-weight: 800;
            color: #fff;
            letter-spacing: 1px;
        }

        .hero-title span {
            color: #ffd000;
        }

        .hero-subtitle {
            margin-top: 8px;
            color: #d9f4dc;
            font-size: 15px;
        }

        .price {
            display: inline-block;
            margin-top: 12px;
            padding: 6px 25px;

            font-size: clamp(28px, 4vw, 45px);
            font-weight: 800;

            color: #5b2400;

            background: linear-gradient(
                135deg,
                #fff3a1,
                #e6af00,
                #ffd944
            );

            border: 2px solid #fff0a0;
            border-radius: 10px;

            box-shadow:
                0 4px 15px rgba(0,0,0,.4);
        }

        /* =========================================
           PRODUCT GRID
        ========================================= */

        .products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        /* =========================================
           PRODUCT CARD
        ========================================= */

        .product-card {
            position: relative;

            background:
                linear-gradient(
                    145deg,
                    #063c1a,
                    #022a12
                );

            border: 2px solid #d5ae00;
            border-radius: 16px;

            padding: 20px;

            overflow: hidden;

            box-shadow:
                0 8px 25px rgba(0,0,0,.35),
                inset 0 0 25px rgba(255,210,0,.04);

            transition:
                transform .3s ease,
                box-shadow .3s ease;
        }

        .product-card:hover {
            transform: translateY(-7px);

            box-shadow:
                0 15px 35px rgba(0,0,0,.45),
                0 0 20px rgba(255,210,0,.18);
        }

        /* NUMBER + TITLE */

        .product-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            margin-bottom: 15px;
            min-height: 50px;

            font-family: 'Cinzel', serif;
            font-size: clamp(18px, 2vw, 25px);
            font-weight: 700;

            color: #fff;
            text-align: center;
        }

        .product-number {
            width: 40px;
            height: 40px;

            flex-shrink: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            color: #fff4a3;
            font-size: 20px;

            background:
                radial-gradient(
                    circle,
                    #b40000,
                    #550000
                );

            border: 2px solid #ffd000;

            box-shadow:
                0 0 10px rgba(255,200,0,.35);
        }

        /* PRODUCT IMAGE */

        .product-image {
            height: 220px;

            display: flex;
            align-items: center;
            justify-content: center;

            margin-bottom: 12px;

            background:
                radial-gradient(
                    circle,
                    rgba(255,255,255,.07),
                    transparent 70%
                );

            border-radius: 10px;
        }

        .product-image img {
            width: 100%;
            height: 100%;

            object-fit: contain;

            transition: transform .3s ease;
        }

        .product-card:hover .product-image img {
            transform: scale(1.04);
        }

        /* PRODUCT CONTENT */

        .product-list {
            list-style: none;
            min-height: 125px;
        }

        .product-list li {
            position: relative;

            padding-left: 24px;
            margin-bottom: 8px;

            color: #f5f5f5;

            font-size: 14px;
            line-height: 1.5;
        }

        .product-list li::before {
            content: "✓";

            position: absolute;
            left: 0;

            color: #ffd000;
            font-weight: 800;
        }

        /* BUY BUTTON */

        .buy-now {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            width: 100%;

            margin-top: 18px;
            padding: 13px 15px;

            border: none;
            border-radius: 8px;

            cursor: pointer;

            font-family: 'Poppins', sans-serif;
            font-size: 15px;
            font-weight: 700;

            color: #321900;

            background:
                linear-gradient(
                    135deg,
                    #ffe66b,
                    #d9a900,
                    #ffd936
                );

            box-shadow:
                0 5px 15px rgba(0,0,0,.3);

            transition: .3s;
        }

        .buy-now:hover {
            transform: translateY(-2px);

            background:
                linear-gradient(
                    135deg,
                    #fff19a,
                    #f4c400
                );

            box-shadow:
                0 8px 20px rgba(255,210,0,.25);
        }

        /* =========================================
           FOOTER
        ========================================= */

        .footer {
            margin-top: 35px;
            padding: 20px;

            text-align: center;

            color: #b9d5bf;
            font-size: 13px;

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

        .footer strong {
            color: #ffd000;
        }

        /* =========================================
           TABLET
        ========================================= */

        @media (max-width: 1000px) {

            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .product-image {
                height: 200px;
            }

        }

        /* =========================================
           MOBILE
        ========================================= */

        @media (max-width: 650px) {

            .top-header {
                padding: 12px 18px;
            }

            .brand-logo {
                width: 45px;
                height: 45px;
            }

            .brand-name {
                font-size: 20px;
            }

            .login-link {
                font-size: 12px;
                padding: 7px 12px;
            }

            .container {
                width: 94%;
                margin-top: 15px;
            }

            .hero {
                padding: 20px 12px 22px;
                border-radius: 12px;
            }

            .hero-title {
                font-size: 25px;
            }

            .hero-subtitle {
                font-size: 12px;
            }

            .price {
                font-size: 30px;
                padding: 5px 20px;
            }

            .products-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .product-card {
                padding: 16px;
            }

            .product-title {
                font-size: 20px;
            }

            .product-image {
                height: 210px;
            }

            .product-list {
                min-height: auto;
            }

            .product-list li {
                font-size: 13px;
            }

        }

        /* SMALL MOBILE */

        @media (max-width: 400px) {

            .brand-name {
                font-size: 17px;
            }

            .login-link {
                display: none;
            }

            .product-image {
                height: 190px;
            }

            .product-title {
                font-size: 18px;
            }

        }
        .verification-panel {

    width: 100%;

    background: #ffffff;

    padding: 48px 55px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.verification-container {

    width: 100%;

    max-width: 690px;
}


/* ==========================================
   HEADER
========================================== */

.verification-header {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 45px;
}


.verification-icon {

    width: 68px;

    height: 68px;

    flex-shrink: 0;

    border-radius: 13px;

    border: 1px solid #e5e0ff;

    background:
        linear-gradient(
            135deg,
            #faf8ff,
            #f1edff
        );

    display: flex;

    align-items: center;

    justify-content: center;

    color: #4e16ec;

    font-size: 34px;

    box-shadow:
        0 8px 20px rgba(78,22,236,.07);
}


.verification-header h1 {

    font-size: 30px;

    line-height: 1.2;

    color: #10155f;

    margin-bottom: 6px;
}


.verification-header p {

    font-size: 15px;

    color: #5e638b;

    margin-bottom: 2px;
}


.verification-header strong {

    font-size: 16px;

    color: #4520ed;
}


/* ==========================================
   STEPS
========================================== */

.steps {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 40px;
}


.step {

    display: flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;
}


.step span {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    color: #ffffff;

    background: #aeb2c9;
}


.step label {

    font-size: 15px;

    color: #777b9d;
}


.step.completed span,
.step.active span {

    background:
        linear-gradient(
            135deg,
            #7214f4,
            #3828ef
        );
}


.step.active label {

    color: #4320ed;

    font-weight: 600;
}


.step-line {

    width: 110px;

    height: 1px;

    background: #d8daea;

    margin: 0 15px;
}


/* ==========================================
   OTP IMAGE
========================================== */

.otp-image {

    height: 145px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;
}


.mail-animation {

    position: relative;

    width: 120px;

    height: 100px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #f7f3ff,
            #ffffff
        );

    color: #5724ed;

    font-size: 75px;

    animation: mailFloat 2.5s ease-in-out infinite;
}


@keyframes mailFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


.mail-check {

    position: absolute;

    right: -4px;

    bottom: -7px;

    width: 43px;

    height: 43px;

    border-radius: 50%;

    background: #16d76c;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    border: 4px solid #ffffff;
}


/* ==========================================
   OTP TITLE
========================================== */

.otp-title {

    text-align: center;

    font-size: 15px;

    color: #24275e;

    margin-bottom: 20px;
}


/* ==========================================
   OTP INPUTS
========================================== */

.otp-container {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-bottom: 30px;
}


.otp-input {

    width: 57px;

    height: 65px;

    border: 1.5px solid #dfe1ef;

    border-radius: 10px;

    background: #ffffff;

    outline: none;

    text-align: center;

    font-size: 27px;

    font-weight: 600;

    color: #3516ed;

    transition: all .2s ease;
}


.otp-input:focus {

    border-color: #531cff;

    box-shadow:
        0 0 0 3px rgba(83,28,255,.10);

    transform: translateY(-2px);
}


.otp-input.filled {

    border-color: #5a24ed;

    background: #faf8ff;
}


/* ==========================================
   RESEND
========================================== */

.resend-section {

    text-align: center;

    color: #666a91;

    font-size: 15px;

    margin-bottom: 30px;
}


.resend-section p {

    margin-bottom: 5px;
}


#timer {

    color: #4216ef;

    font-weight: 600;
}


#resendBtn {

    border: none;

    background: none;

    color: #4216ef;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    margin-top: 7px;
}


#resendBtn:disabled {

    color: #a2a5ba;

    cursor: not-allowed;
}


#resendBtn:not(:disabled):hover {

    text-decoration: underline;
}


/* ==========================================
   VERIFY BUTTON
========================================== */

.verify-btn {

    width: 100%;

    height: 52px;

    border: none;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            #8311ed,
            #312ff4
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    box-shadow:
        0 10px 22px rgba(74,25,237,.20);

    transition: all .25s ease;
}


.verify-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(74,25,237,.28);
}


.verify-btn:active {

    transform: translateY(0);
}


.verify-btn i {

    font-size: 18px;
}


/* ==========================================
   BACK BUTTON
========================================== */

.back-btn {

    margin-top: 18px;

    width: 100%;

    height: 52px;

    border: 1.5px solid #5520f5;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    text-decoration: none;

    color: #4520ec;

    font-size: 15px;

    font-weight: 600;

    transition: all .2s ease;
}


.back-btn:hover {

    background: #f8f5ff;

    transform: translateY(-1px);
}


/* ==========================================
   SECURITY
========================================== */

.security-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 38px;

    color: #777b9d;

    font-size: 13px;
}


.security-note i {

    color: #646994;

    font-size: 15px;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 900px) {

    .page-wrapper {

        width: 100%;

        min-height: 100vh;

        margin: 0;

        border-radius: 0;

        display: block;
    }


    .left-panel {

        width: 100%;

        min-height: auto;

        padding: 25px 25px 30px;
    }


    .left-content {

        margin-top: 25px;
    }


    .left-description {

        margin-bottom: 20px;
    }


    .benefit {

        margin-bottom: 15px;
    }


    .benefit p {

        max-width: 100%;
    }


    .left-art {

        display: none;
    }


    .verification-panel {

        width: 100%;

        padding: 35px 25px 45px;
    }


    .verification-container {

        max-width: 600px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 600px) {

    .left-panel {

        padding: 20px;
    }


    .brand img {

        width: 48px;

        height: 48px;
    }


    .brand span {

        font-size: 25px;
    }


    .left-content h2 {

        font-size: 22px;
    }


    .left-description {

        font-size: 13px;

        line-height: 1.6;
    }


    .benefit {

        gap: 12px;
    }


    .benefit-icon {

        width: 45px;

        height: 45px;

        flex-basis: 45px;

        font-size: 19px;
    }


    .benefit h4 {

        font-size: 14px;
    }


    .benefit p {

        font-size: 11px;
    }


    .verification-panel {

        padding: 30px 18px 40px;
    }


    .verification-header {

        align-items: flex-start;

        gap: 13px;

        margin-bottom: 32px;
    }


    .verification-icon {

        width: 55px;

        height: 55px;

        font-size: 26px;
    }


    .verification-header h1 {

        font-size: 22px;
    }


    .verification-header p {

        font-size: 12px;

        line-height: 1.5;
    }


    .verification-header strong {

        font-size: 13px;

        word-break: break-all;
    }


    .steps {

        margin-bottom: 25px;
    }


    .step {

        gap: 7px;
    }


    .step span {

        width: 26px;

        height: 26px;

        font-size: 12px;
    }


    .step label {

        font-size: 12px;
    }


    .step-line {

        width: 45px;

        margin: 0 8px;
    }


    .otp-image {

        height: 115px;
    }


    .mail-animation {

        width: 95px;

        height: 80px;

        font-size: 58px;
    }


    .mail-check {

        width: 35px;

        height: 35px;

        font-size: 16px;
    }


    .otp-title {

        font-size: 13px;

        line-height: 1.5;

        margin-bottom: 16px;
    }


    .otp-container {

        gap: 7px;

        margin-bottom: 25px;
    }


    .otp-input {

        width: 45px;

        height: 54px;

        font-size: 22px;

        border-radius: 8px;
    }


    .resend-section {

        font-size: 13px;

        margin-bottom: 25px;
    }


    .verify-btn {

        height: 50px;

        font-size: 14px;

        gap: 10px;
    }


    .back-btn {

        height: 50px;

        font-size: 14px;
    }


    .security-note {

        margin-top: 28px;

        font-size: 11px;
    }

}


/* ==========================================
   VERY SMALL DEVICES
========================================== */

@media (max-width: 380px) {

    .otp-container {

        gap: 5px;
    }


    .otp-input {

        width: 40px;

        height: 50px;
    }


    .step-line {

        width: 25px;

        margin: 0 5px;
    }

}