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

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


        html,
        body {
            width: 100%;
            min-height: 100%;
        }


        body {
            font-family: "Inter", sans-serif;
            background: #ffffff;
            color: #111827;
            overflow: hidden;
        }


        button,
        input {
            font-family: inherit;
        }


        /* =========================================================
           VARIABLES
        ========================================================= */

        :root {

            --navy: #001329;
            --navy-light: #00223d;

            --green: #16d887;
            --green-light: #65e7aa;
            --green-dark: #006650;

            --white: #ffffff;

            --text: #111827;
            --muted: #6d747b;

            --border: #d9dde1;

            --panel-width: 40%;
        }


        /* =========================================================
           PAGE
        ========================================================= */

        .page {
            width: 100%;
            min-height: 100vh;

            display: grid;

            grid-template-columns:
                calc(100% - var(--panel-width))
                var(--panel-width);
        }


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

        .hero {
            position: relative;

            min-height: 100vh;

            overflow: hidden;

            color: #ffffff;

            padding:
                64px
                5vw
                45px;

            background:

                radial-gradient(
                    circle at 72% 48%,
                    rgba(12, 220, 139, 0.13),
                    transparent 28%
                ),

                radial-gradient(
                    circle at 47% 55%,
                    rgba(0, 112, 180, 0.12),
                    transparent 34%
                ),

                linear-gradient(
                    135deg,
                    #001025 0%,
                    #00172e 48%,
                    #00243e 100%
                );
        }


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

        .hero::before {

            content: "";

            position: absolute;

            width: 600px;
            height: 600px;

            right: -180px;
            top: 50%;

            transform: translateY(-50%);

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(15, 216, 135, .08),
                    transparent 65%
                );

            filter: blur(10px);

            animation: backgroundGlow 6s ease-in-out infinite;
        }


        @keyframes backgroundGlow {

            0%,
            100% {
                transform:
                    translateY(-50%)
                    scale(.9);
            }

            50% {
                transform:
                    translateY(-50%)
                    scale(1.1);
            }
        }


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

        .world-map {
    position: absolute;
    z-index: 1;

    width: 65%;
    height: 55%;

    right: 2%;
    top: 8%;

    opacity: .22;

    pointer-events: none;

    animation: mapFloat 12s ease-in-out infinite;
}

.world-map img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        brightness(.8)
        saturate(.7)
        drop-shadow(
            0 0 8px
            rgba(40, 220, 145, .12)
        );
}

@keyframes mapFloat {

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

    50% {
        transform: translateY(-8px);
        opacity: .27;
    }
}


        /* =========================================================
           PARTICLES
        ========================================================= */

        .particles {

            position: absolute;

            inset: 0;

            overflow: hidden;

            pointer-events: none;
        }


        .particle {

            position: absolute;

            width: 13px;
            height: 13px;

            object-fit: contain;

            opacity: 0;

            filter:
                drop-shadow(
                    0 0 8px
                    rgba(30, 238, 150, .8)
                );

            animation:
                particleFloat 5s
                ease-in-out
                infinite;
        }


        .particle-1 {
            left: 42%;
            top: 20%;
            animation-delay: .3s;
        }


        .particle-2 {
            left: 53%;
            top: 38%;
            animation-delay: 1.4s;
        }


        .particle-3 {
            left: 68%;
            top: 18%;
            animation-delay: 2.6s;
        }


        .particle-4 {
            left: 77%;
            top: 58%;
            animation-delay: .8s;
        }


        .particle-5 {
            left: 58%;
            top: 76%;
            animation-delay: 3.2s;
        }


        .particle-6 {
            left: 36%;
            top: 67%;
            animation-delay: 1.9s;
        }


        .particle-7 {
            left: 82%;
            top: 35%;
            animation-delay: 4s;
        }


        .particle-8 {
            left: 48%;
            top: 12%;
            animation-delay: 2.1s;
        }


        @keyframes particleFloat {

            0% {
                opacity: 0;

                transform:
                    translateY(25px)
                    scale(.35);
            }

            30% {
                opacity: .5;
            }

            50% {
                opacity: 1;

                transform:
                    translateY(-8px)
                    scale(1);
            }

            75% {
                opacity: .5;
            }

            100% {
                opacity: 0;

                transform:
                    translateY(-30px)
                    scale(.45);
            }
        }


        /* =========================================================
           HERO CONTENT
        ========================================================= */

        .hero-content {

            position: relative;

            z-index: 10;

            max-width: 500px;
        }


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

        .security-label {

            display: flex;

            align-items: center;

            gap: 12px;

            color: #65dc9e;

            font-size: 14px;

            font-weight: 500;

            margin-bottom: 38px;

            animation:
                fadeDown .8s
                ease both;
        }


        .secure-icon {

            width: 30px;
            height: 34px;

            object-fit: contain;

            filter:
                drop-shadow(
                    0 0 7px
                    rgba(42, 231, 150, .35)
                );

            animation:
                securePulse 3s
                ease-in-out
                infinite;
        }


        @keyframes securePulse {

            0%,
            100% {
                filter:
                    drop-shadow(
                        0 0 5px
                        rgba(42, 231, 150, .2)
                    );
            }

            50% {
                filter:
                    drop-shadow(
                        0 0 14px
                        rgba(42, 231, 150, .7)
                    );
            }
        }


        /* =========================================================
           HERO TITLE
        ========================================================= */

        .hero h1 {

            font-size:
                clamp(
                    35px,
                    3.25vw,
                    51px
                );

            line-height: 1.12;

            font-weight: 700;

            letter-spacing: -1.8px;

            margin-bottom: 23px;

            animation:
                fadeUp .9s
                ease .15s
                both;
        }


        .hero h1 .green {
            color: #18d987;
        }


        /* =========================================================
           GREEN LINE
        ========================================================= */

        .green-line {

            width: 41px;

            height: 2px;

            background: #20d989;

            margin:
                0 0 22px;

            box-shadow:
                0 0 10px
                rgba(32, 217, 137, .25);

            animation:
                lineGrow .8s
                ease .5s
                both;
        }


        @keyframes lineGrow {

            from {
                width: 0;
            }

            to {
                width: 41px;
            }
        }


        /* =========================================================
           DESCRIPTION
        ========================================================= */

        .hero-description {

            max-width: 390px;

            color: #b7c3ce;

            font-size: 15px;

            line-height: 1.75;

            animation:
                fadeUp .9s
                ease .3s
                both;
        }


        /* =========================================================
           PHONE SCENE
        ========================================================= */

        .phone-scene {

            position: absolute;

            width: 480px;
            height: 560px;

            right: 1.5%;
            top: 16%;

            z-index: 4;

            perspective: 1200px;

            animation:
                phoneSceneIn 1.2s
                cubic-bezier(.2,.8,.2,1)
                both;
        }


        @keyframes phoneSceneIn {

            from {

                opacity: 0;

                transform:
                    translateX(90px)
                    scale(.92);
            }

            to {

                opacity: 1;

                transform:
                    translateX(0)
                    scale(1);
            }
        }


        /* =========================================================
           PHONE
        ========================================================= */

        .phone {

            position: absolute;

            width: 198px;
            height: 400px;

            left: 112px;
            top: 18px;

            border:
                2px solid
                rgba(40, 228, 148, .8);

            border-radius: 40px;

            transform: rotate(8deg);

            background:

                linear-gradient(
                    145deg,
                    rgba(8, 50, 63, .95),
                    rgba(0, 19, 33, .98)
                );

            box-shadow:

                0 0 8px
                rgba(25, 223, 138, .7),

                0 0 55px
                rgba(25, 223, 138, .13),

                inset 0 0 35px
                rgba(25, 255, 150, .04);

            overflow: hidden;

            animation:
                phoneFloat 5s
                ease-in-out
                infinite;
        }


        @keyframes phoneFloat {

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

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


        /* PHONE NOTCH */

        .phone::before {

            content: "";

            position: absolute;

            z-index: 5;

            width: 74px;
            height: 17px;

            top: 9px;
            left: 50%;

            transform:
                translateX(-50%);

            border-radius:
                0 0 13px 13px;

            background: #00152a;
        }


        /* PHONE SCREEN */

        .phone-screen {

            position: absolute;

            inset:
                27px
                8px
                9px;

            border-radius: 31px;

            background:

                radial-gradient(
                    circle at 50% 20%,
                    rgba(5, 77, 91, .9),
                    transparent 30%
                ),

                linear-gradient(
                    #03283b,
                    #001622
                );

            overflow: hidden;
        }


        

        /* =========================================================
           WHATSAPP PNG
        ========================================================= */

        .whatsapp {

            position: absolute;

            z-index: 8;

            left: 50%;
            top: 26%;

            width: 93px;
            height: 62px;

            transform:
                translateX(-50%);

            animation:
                whatsappPulse 2.6s
                ease-in-out
                infinite;
        }


        .whatsapp img {

            width: 100%;
            height: 100%;

            object-fit: contain;

            filter:
                drop-shadow(
                    0 0 16px
                    rgba(30, 224, 137, .5)
                );
        }


        @keyframes whatsappPulse {

            0%,
            100% {
                transform:
                    translateX(-50%)
                    scale(1);
            }

            50% {
                transform:
                    translateX(-50%)
                    scale(1.08);
            }
        }


        /* =========================================================
           MESSAGE BUBBLES
        ========================================================= */

        .message {

            position: absolute;

            z-index: 15;

            border-radius: 12px;

            backdrop-filter:
                blur(12px);

            font-size: 10px;

            line-height: 1.55;

            animation:
                messageFloat 4s
                ease-in-out
                infinite;
        }


        .message-otp {

            left: 12px;
            top: 160px;

            width: 180px;

            padding:
                14px
                17px;

            color: #b8e7d0;

            background:
                rgba(5, 67, 65, .86);

            border:
                1px solid
                rgba(38, 222, 146, .32);

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


        .message-otp strong {

            color: #ffffff;

            font-weight: 600;
        }


        .message-statement {

            left: 0;
            top: 256px;

            width: 174px;

            padding:
                14px
                17px;

            color: #9baab4;

            background:
                rgba(16, 39, 54, .88);

            border:
                1px solid
                rgba(130,160,170,.13);

            transform: rotate(8deg);

            animation:
                messageFloat2 4s
                ease-in-out
                .8s
                infinite;
        }


        .message-icon {

            width: 17px;
            height: 17px;

            object-fit: contain;

            vertical-align: middle;

            margin-right: 7px;
        }


        .message-time {

            text-align: right;

            color: #6fc8a5;

            font-size: 8px;

            margin-top: 5px;
        }


        .message-statement .message-time {

            color: #788890;
        }


        @keyframes messageFloat {

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

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


        @keyframes messageFloat2 {

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

            50% {
                transform:
                    translateY(-8px)
                    rotate(9deg);
            }
        }


        /* =========================================================
           SECURITY SHIELD PNG
        ========================================================= */

        .shield {

            position: absolute;

            z-index: 20;

            width: 165px;
            height: 60%;

            right: 22%;
            bottom: 60px;

            animation:
                shieldFloat 4s
                ease-in-out
                infinite;
        }


        .shield img {

            width: 100%;
            height: 100%;

            object-fit: contain;

            filter:

                drop-shadow(
                    0 0 12px
                    rgba(30, 229, 145, .4)
                )

                drop-shadow(
                    0 18px 20px
                    rgba(0,0,0,.28)
                );
        }


        @keyframes shieldFloat {

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

            50% {
                transform:
                    translateY(-11px)
                    rotate(.8deg);
            }
        }


        /* =========================================================
           GROUND GLOW
        ========================================================= */

        .ground {

            position: absolute;

            width: 440px;
            height: 95px;

            left: 12px;
            bottom: 20px;

            border-radius: 50%;

            background:
                radial-gradient(
                    ellipse,
                    rgba(32, 230, 147, .38),
                    transparent 68%
                );

            filter: blur(6px);

            animation:
                groundPulse 4s
                ease-in-out
                infinite;
        }


        @keyframes groundPulse {

            0%,
            100% {
                opacity: .4;
                transform: scaleX(.85);
            }

            50% {
                opacity: .8;
                transform: scaleX(1.1);
            }
        }


        /* =========================================================
           FEATURES
        ========================================================= */

        .features {

            position: absolute;

            z-index: 10;

            left: 5vw;
            bottom: 62px;

            display: flex;

            animation:
                fadeUp 1s
                ease .6s
                both;
        }


        .feature {

            width: 135px;

            padding:
                0 25px;

            text-align: center;

            border-right:
                1px solid
                rgba(255,255,255,.14);
        }


        .feature:first-child {
            padding-left: 0;
        }


        .feature:last-child {
            border-right: none;
        }


        .feature-icon {

            width: 34px;
            height: 34px;

            object-fit: contain;

            margin-bottom: 12px;

            filter:
                drop-shadow(
                    0 0 6px
                    rgba(55, 230, 150, .4)
                );

            transition:
                transform .3s ease,
                filter .3s ease;
        }


        .feature:hover .feature-icon {

            transform:
                translateY(-5px)
                scale(1.08);

            filter:
                drop-shadow(
                    0 0 14px
                    rgba(55,230,150,.8)
                );
        }


        .feature p {

            color: #c5cdd5;

            font-size: 10px;

            line-height: 1.7;
        }


        /* =========================================================
           RIGHT LOGIN PANEL
        ========================================================= */

        .login-panel {

            position: relative;

            min-height: 100vh;

            background: #ffffff;

            display: flex;

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

            padding: 45px;

            animation:
                panelReveal .8s
                ease both;
        }


        @keyframes panelReveal {

            from {
                opacity: 0;
                transform:
                    translateX(35px);
            }

            to {
                opacity: 1;
                transform:
                    translateX(0);
            }
        }


        .login-box {

            width: min(
                100%,
                430px
            );
        }


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

        .bank-logo {

            text-align: center;

            margin-bottom: 30px;
        }


        .bank-logo-image {

            display: block;

            /*width: 58px;*/
            height: 52px;

            object-fit: contain;

            margin:
                0 auto 7px;
        }


        .bank-name {

            color: #10223d;

            font-size: 15px;

            font-weight: 700;

            letter-spacing: .5px;
        }


        .bank-tagline {

            color: #999999;

            font-size: 8px;

            letter-spacing: .7px;

            margin-top: 4px;
        }


        /* =========================================================
           LOGIN TITLES
        ========================================================= */

        .login-title {

            text-align: center;

            color: #0c1119;

            font-size: 27px;

            line-height: 1.2;

            font-weight: 700;

            letter-spacing: -.7px;

            margin-bottom: 9px;
        }


        .welcome {
  text-align: center;
  color: #087653;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-bottom: 9px;
  position: relative;
  animation: welcomeReveal .8s ease .2s both;
}

.welcome::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: 10px auto 0;
  background: #19d886;
  border-radius: 10px;
  opacity: .8;
}

@keyframes welcomeReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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


        .subtitle {

            text-align: center;

            color: #697078;

            font-size: 13px;

            margin-bottom: 30px;
        }


        /* =========================================================
           FORM
        ========================================================= */

        .form-group {

            margin-bottom: 17px;
        }


        label {

            display: block;

            color: #1f252b;

            font-size: 12px;

            font-weight: 500;

            margin-bottom: 8px;
        }


        .input-wrap {

            position: relative;
        }


        .input-icon {

            position: absolute;

            left: 14px;
            top: 50%;

            transform:
                translateY(-50%);

            width: 18px;
            height: 18px;

            object-fit: contain;

            opacity: .65;

            pointer-events: none;
        }


        input[type="email"],
        input[type="password"],
        input[type="text"] {

            width: 100%;

            height: 42px;

            border:
                1px solid
                #d5d9dd;

            border-radius: 5px;

            outline: none;

            padding:
                0 43px;

            color: #1b2228;

            font-size: 13px;

            background: #ffffff;

            transition:
                border-color .25s,
                box-shadow .25s;
        }


        input:focus {

            border-color:
                #00885f;

            box-shadow:
                0 0 0 3px
                rgba(0,136,95,.09);
        }


        input:hover {

            border-color:
                #aeb7bd;
        }


        /* =========================================================
           PASSWORD BUTTON
        ========================================================= */

        .toggle-password {

            position: absolute;

            right: 13px;
            top: 50%;

            transform:
                translateY(-50%);

            width: 25px;
            height: 25px;

            border: none;

            background: transparent;

            cursor: pointer;

            padding: 4px;
        }


        .toggle-password img {

            width: 100%;
            height: 100%;

            object-fit: contain;

            opacity: .65;
        }


        /* =========================================================
           FORM OPTIONS
        ========================================================= */

        .form-options {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin:
                2px 0 21px;

            font-size: 11px;
        }


        .remember {

            display: flex;

            align-items: center;

            gap: 7px;

            color: #656b72;

            margin: 0;

            cursor: pointer;
        }


        .remember input {

            width: 14px;
            height: 14px;

            accent-color:
                #006e55;

            cursor: pointer;
        }


        .forgot {

            color: #246b58;

            text-decoration: none;
        }


        .forgot:hover {

            text-decoration:
                underline;
        }


        /* =========================================================
           SIGN IN BUTTON
        ========================================================= */

        .signin {

            position: relative;

            width: 100%;
            height: 41px;

            border: none;

            border-radius: 5px;

            background:
                #00654f;

            color: #ffffff;

            font-size: 13px;

            font-weight: 700;

            cursor: pointer;

            overflow: hidden;

            box-shadow:
                0 5px 15px
                rgba(0,101,79,.14);

            transition:
                background .25s,
                transform .25s,
                box-shadow .25s;
        }


        .signin::before {

            content: "";

            position: absolute;

            top: 0;

            left: -100%;

            width: 70%;
            height: 100%;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255,255,255,.2),
                    transparent
                );

            transform:
                skewX(-20deg);

            animation:
                buttonShine 3.5s
                infinite;
        }


        @keyframes buttonShine {

            0%,
            65% {
                left: -100%;
            }

            100% {
                left: 150%;
            }
        }


        .signin:hover {

            background:
                #00775d;

            transform:
                translateY(-1px);

            box-shadow:
                0 8px 20px
                rgba(0,101,79,.22);
        }


        .signin:active {

            transform:
                translateY(0);
        }


        /* =========================================================
           OR
        ========================================================= */

        .or {

            display: flex;

            align-items: center;

            gap: 13px;

            margin:
                20px 0 17px;

            color: #6d7379;

            font-size: 12px;
        }


        .or::before,
        .or::after {

            content: "";

            flex: 1;

            height: 1px;

            background:
                #dedede;
        }


        /* =========================================================
           MICROSOFT BUTTON
        ========================================================= */

        .microsoft {

            width: 100%;

            height: 42px;

            border:
                1px solid
                #d8dadd;

            border-radius: 5px;

            background:
                #ffffff;

            color: #222222;

            display: flex;

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

            gap: 13px;

            font-size: 13px;

            font-weight: 500;

            cursor: pointer;

            transition:
                background .25s,
                border-color .25s,
                transform .25s;
        }


        .microsoft:hover {

            background:
                #f8f8f8;

            border-color:
                #c5c8cb;

            transform:
                translateY(-1px);
        }


        .microsoft-logo {

            width: 19px;
            height: 19px;

            object-fit: contain;
        }


        /* =========================================================
           AUTHORIZED MESSAGE
        ========================================================= */

        .authorized {

            margin-top: 20px;

            min-height: 48px;

            padding:
                10px 17px;

            border:
                1px solid
                #d6ede3;

            border-radius: 6px;

            background:
                #edf8f3;

            color: #4b5854;

            display: flex;

            align-items: center;

            gap: 11px;

            font-size: 11px;
        }


        .authorized-icon {

            width: 21px;
            height: 21px;

            object-fit: contain;

            flex-shrink: 0;
        }


        /* =========================================================
           SUCCESS MESSAGE
        ========================================================= */

        .form-message {

            display: none;

            margin-top: 12px;

            padding: 10px;

            border-radius: 5px;

            background:
                #edf8f3;

            border:
                1px solid
                #d6ede3;

            color:
                #087653;

            font-size: 11px;

            text-align: center;
        }


        .form-message.show {
            display: block;
        }


        /* =========================================================
           ANIMATIONS
        ========================================================= */

        @keyframes fadeUp {

            from {
                opacity: 0;

                transform:
                    translateY(25px);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0);
            }
        }


        @keyframes fadeDown {

            from {
                opacity: 0;

                transform:
                    translateY(-15px);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0);
            }
        }


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

        @media (max-width: 1200px) {

            :root {
                --panel-width: 43%;
            }


            .phone-scene {

                right: -50px;

                transform:
                    scale(.85);
            }


            .hero h1 {

                font-size: 40px;
            }


            .features {

                transform:
                    scale(.9);

                transform-origin:
                    left bottom;
            }
        }


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

        @media (max-width: 900px) {

            body {
                overflow: auto;
            }


            .page {

                display: block;
            }


            .hero {

                min-height: 560px;

                padding:
                    45px 35px;
            }


            .phone-scene {

                right: -100px;

                top: 125px;

                transform:
                    scale(.72);

                opacity: .7;
            }


            .features {

                left: 35px;

                bottom: 30px;

                transform:
                    none;
            }


            .login-panel {

                min-height: auto;

                padding:
                    60px 30px;
            }
        }


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

        @media (max-width: 600px) {

            .hero {

                min-height: 500px;

                padding:
                    40px 25px;
            }


            .security-label {

                font-size: 12px;

                margin-bottom: 28px;
            }


            .hero h1 {

                font-size: 32px;

                letter-spacing:
                    -1.2px;
            }


            .hero-description {

                font-size: 13px;

                max-width: 300px;
            }


            .phone-scene {

                display: none;
            }


            .features {

                left: 25px;
                right: 25px;

                bottom: 25px;

                justify-content:
                    space-between;
            }


            .feature {

                width: auto;

                padding:
                    0 12px;
            }


            .feature:first-child {
                padding-left: 0;
            }


            .feature-icon {

                width: 28px;
                height: 28px;
            }


            .feature p {

                font-size: 9px;
            }


            .login-panel {

                padding:
                    45px 20px;
            }


            .login-title {

                font-size: 24px;
            }


            .welcome {

                font-size: 18px;
            }
        }


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

        @media (max-width: 380px) {

            .hero {

                min-height: 470px;
            }


            .hero h1 {

                font-size: 29px;
            }


            .feature {

                padding:
                    0 7px;
            }


            .feature p {

                font-size: 8px;
            }


            .feature-icon {

                width: 25px;
                height: 25px;
            }
        }