<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <meta name="description"
          content="EMI CREDITS – Manage your EMI card, loans, EMI repayments and payments securely online.">

    <title>EMI CREDITS — Making Finance Simple, Flexible & Accessible.</title>

    <link rel="icon"
          type="image/png"
          href="{{ asset('favicon.png') }}">

    <style>

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Inter, Arial, Helvetica, sans-serif;
            background: #080808;
            color: #ffffff;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        button {
            font-family: inherit;
        }

        .container {
            width: min(1120px, 92%);
            margin: auto;
        }


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

        header {
            background: rgba(255, 255, 255, 0.94);
            border-bottom: 1px solid #2a2a2a;

            position: sticky;
            top: 0;

            z-index: 1000;

            backdrop-filter: blur(14px);
        }

        nav {
            height: 76px;

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

            position: relative;
        }


        /* LOGO */

        .logo {
            display: flex;
            align-items: center;

            flex-shrink: 0;
        }

        .logo img {
            height: 43px;
            width: auto;

            max-width: 190px;

            display: block;

            object-fit: contain;
        }


        /* NAV LINKS */

        .nav-links {
            display: flex;
            align-items: center;

            gap: 30px;

            color: #999999;

            font-size: 14px;
        }

        .nav-links a {
            transition: 0.2s ease;
        }

        .nav-links a:hover {
            color: #ffd21c;
        }


        /* NAV ACTIONS */

        .nav-actions {
            display: flex;
            align-items: center;

            gap: 10px;
        }

        .login-btn {
            padding: 10px 19px;

            color: #ffffff;

            font-size: 14px;
            font-weight: 600;

            transition: 0.2s ease;
        }

        .login-btn:hover {
            color: #ffd21c;
        }


        .signup-btn,
        .primary-btn {
            background: #ffd21c;

            color: white;

            padding: 11px 20px;

            border-radius: 9px;

            font-size: 14px;
            font-weight: 700;

            box-shadow:
                0 8px 20px rgba(255, 210, 28, 0.18);

            transition: 0.2s ease;
        }

        .signup-btn:hover,
        .primary-btn:hover {
            background: #e9b900;

            transform: translateY(-1px);
        }


        /* ========================================
           MOBILE MENU BUTTON
        ======================================== */

        .mobile-menu-btn {
            display: none;

            border: none;

            background: #191919;

            color: #ffd21c;

            width: 42px;
            height: 42px;

            border-radius: 10px;

            font-size: 22px;

            cursor: pointer;

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

            transition: 0.2s ease;
        }

        .mobile-menu-btn:hover {
            background: #222222;
        }


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

        .hero {
            position: relative;

            overflow: hidden;

            padding: 95px 0 105px;

            background:
                radial-gradient(
                    circle at 85% 25%,
                    rgba(255,210,28, 0.10),
                    transparent 30%
                ),
                linear-gradient(
                    180deg,
                    #fffffffff 0%,
                    #f6f9ff 100%
                );
        }


        .hero-content {
            width: 53%;

            position: relative;

            z-index: 2;
        }


        .hero-badge {
            display: inline-flex;

            align-items: center;

            gap: 7px;

            padding: 7px 13px;

            border-radius: 50px;

            background: #191919;

            color: #ffd21c;

            border: 1px solid #3a3a3a;

            font-size: 12px;

            font-weight: 700;

            margin-bottom: 22px;
        }


        .hero h1 {
            font-size: clamp(42px, 5vw, 66px);

            line-height: 1.04;

            letter-spacing: -3px;

            color: #ffffff;

            margin-bottom: 23px;
        }


        .hero h1 span {
            color: #ffd21c;
        }


        .hero-description {
            max-width: 560px;

            font-size: 17px;

            color: #999999;

            margin-bottom: 31px;
        }


        .hero-buttons {
            display: flex;

            align-items: center;

            gap: 13px;
        }


        .secondary-btn {
            padding: 11px 20px;

            border: 1px solid #3a3a3a;

            border-radius: 9px;

            color: #ffffff;

            background: white;

            font-size: 14px;

            font-weight: 600;

            transition: 0.2s ease;
        }


        .secondary-btn:hover {
            border-color: #555555;
        }


        .hero-note {
            margin-top: 22px;

            font-size: 12px;

            color: #888888;
        }


        /* ========================================
           EMI CARD
        ======================================== */

        .card-area {
            position: absolute;

            right: 4%;

            top: 105px;

            width: 430px;
        }


        .emi-card {
            width: 420px;

            height: 260px;

            border-radius: 22px;

            padding: 28px;

            color: white;

            position: relative;

            overflow: hidden;

            background:
                linear-gradient(
                    135deg,
                    #0d3570,
                    #ffd21c 65%,
                    #2a2a2a
                );

            box-shadow:
                0 30px 65px rgba(0,0,0, 0.28);

            transform: rotate(5deg);
        }


        .emi-card::before {
            content: "";

            position: absolute;

            width: 260px;
            height: 260px;

            border: 1px solid rgba(255,255,255,0.18);

            border-radius: 50%;

            right: -70px;
            top: -110px;
        }


        .emi-card::after {
            content: "";

            position: absolute;

            width: 220px;
            height: 220px;

            border: 1px solid rgba(255,255,255,0.12);

            border-radius: 50%;

            right: -30px;
            bottom: -140px;
        }


        .card-top {
            display: flex;

            align-items: center;

            justify-content: space-between;

            position: relative;

            z-index: 2;
        }


        .card-brand {
            font-size: 20px;

            font-weight: 800;

            letter-spacing: -0.5px;
        }


        .card-type {
            font-size: 10px;

            padding: 5px 8px;

            border: 1px solid rgba(255,255,255,0.25);

            border-radius: 5px;
        }


        .chip {
            width: 46px;
            height: 34px;

            border-radius: 6px;

            margin-top: 38px;

            background:
                linear-gradient(
                    135deg,
                    #f1d992,
                    #ffffff2bd
                );
        }


        .card-number {
            margin-top: 22px;

            font-size: 18px;

            letter-spacing: 3px;
        }


        .card-bottom {
            display: flex;

            justify-content: space-between;

            margin-top: 17px;

            font-size: 10px;

            opacity: 0.82;
        }


        /* FLOATING OFFER */

        .floating-offer {
            position: absolute;

            right: -20px;

            bottom: -35px;

            background: white;

            border: 1px solid #2d2d2d;

            box-shadow:
                0 18px 40px rgba(25, 55, 95, 0.13);

            border-radius: 14px;

            padding: 14px 18px;

            min-width: 165px;
        }


        .floating-offer small {
            color: #888888;

            display: block;

            font-size: 10px;
        }


        .floating-offer strong {
            display: block;

            color: #ffd21c;

            font-size: 24px;

            line-height: 1.2;
        }


        /* ========================================
           TRUST BAR
        ======================================== */

        .trust-bar {
            background: white;

            border-top: 1px solid #2a2a2a;

            border-bottom: 1px solid #2a2a2a;
        }


        .trust-content {
            min-height: 90px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 25px;
        }


        .trust-item {
            display: flex;

            align-items: center;

            gap: 10px;

            color: #999999;

            font-size: 13px;

            font-weight: 600;
        }


        .trust-icon {
            width: 34px;
            height: 34px;

            border-radius: 9px;

            background: #191919;

            display: flex;

            align-items: center;

            justify-content: center;
        }


        /* ========================================
           SECTIONS
        ======================================== */

        .section {
            padding: 95px 0;
        }


        .section-header {
            text-align: center;

            max-width: 620px;

            margin: 0 auto 45px;
        }


        .section-label {
            color: #ffd21c;

            font-size: 12px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 1.3px;

            margin-bottom: 9px;
        }


        .section-header h2 {
            font-size: 38px;

            line-height: 1.15;

            letter-spacing: -1.5px;

            margin-bottom: 12px;
        }


        .section-header p {
            color: #999999;

            font-size: 15px;
        }


        /* ========================================
           ZERO COST EMI
        ======================================== */

        .hero-zero-emi {
            margin-top: 18px;
            display: inline-flex;
            align-items: center;
            gap: 11px;
            padding: 9px 13px;
            border-radius: 13px;
            background: #151515;
            border: 1px solid #3a3a3a;
            color: #1d6b3d;
        }

        .zero-emi-icon {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            background: #ffd21c;
            color: #fffffffff;
            font-size: 11px;
            font-weight: 900;
        }

        .hero-zero-emi strong {
            display: block;
            color: #080808;
            font-size: 12px;
            font-weight: 900;
        }

        .hero-zero-emi span {
            display: block;
            margin-top: 2px;
            color: #6b8c78;
            font-size: 9px;
        }

        .zero-emi-section {
            padding: 25px 0 0;
            background: #080808;
        }

        .zero-emi-card {
            position: relative;
            overflow: hidden;
            min-height: 330px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            padding: 48px 55px;
            border-radius: 25px;
            background: linear-gradient(
                135deg,
                #080808 0%,
                #171717 48%,
                #ffd21c 100%
            );
            color: white;
            box-shadow: 0 25px 60px rgba(18, 77, 52, 0.18);
        }

        .zero-emi-card::before {
            content: "";
            position: absolute;
            width: 360px;
            height: 360px;
            right: -110px;
            top: -150px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.12);
        }

        .zero-emi-card::after {
            content: "";
            position: absolute;
            width: 250px;
            height: 250px;
            right: 80px;
            bottom: -180px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.08);
        }

        .zero-emi-content {
            position: relative;
            z-index: 2;
            max-width: 650px;
        }

        .zero-emi-label {
            display: inline-block;
            margin-bottom: 12px;
            padding: 6px 10px;
            border-radius: 50px;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.15);
            color: #ffd21c;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 1px;
        }

        .zero-emi-content h2 {
            font-size: 38px;
            line-height: 1.12;
            letter-spacing: -1.3px;
            margin-bottom: 13px;
        }

        .zero-emi-content h2 span {
            color: #ffd21c;
        }

        .zero-emi-content p {
            max-width: 580px;
            color: #dddddd;
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 22px;
        }

        .zero-emi-points {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 25px;
        }

        .zero-emi-points div {
            padding: 8px 11px;
            border-radius: 9px;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.12);
            color: #fffffffff;
            font-size: 10px;
            font-weight: 700;
        }

        .zero-emi-points span {
            color: #ffd21c;
            margin-right: 4px;
        }

        .zero-emi-btn {
            display: inline-block;
            padding: 12px 19px;
            border-radius: 9px;
            background: #fffffffff;
            color: #ffd21c;
            font-size: 12px;
            font-weight: 900;
            box-shadow: 0 10px 25px rgba(0,0,0,.12);
            transition: .2s ease;
        }

        .zero-emi-btn:hover {
            transform: translateY(-2px);
        }

        .zero-emi-visual {
            position: relative;
            z-index: 2;
            min-width: 210px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .zero-circle {
            width: 165px;
            height: 165px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.22);
            box-shadow:
                inset 0 0 40px rgba(255,255,255,.05),
                0 20px 45px rgba(0,0,0,.12);
        }

        .zero-circle strong {
            font-size: 56px;
            line-height: .9;
            letter-spacing: -3px;
        }

        .zero-circle span {
            margin-top: 8px;
            color: #ffd21c;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 1.5px;
        }

        .zero-badge {
            margin-top: -12px;
            padding: 8px 13px;
            border-radius: 50px;
            background: #fffffffff;
            color: #080808;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: .8px;
            box-shadow: 0 10px 25px rgba(0,0,0,.16);
        }


        /* ========================================
           PREMIUM ZERO COST EMI
        ======================================== */

        .hero h1 span {
            background:
                linear-gradient(
                    90deg,
                    #ffd21c,
                    #ffd21c
                );

            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;
        }

        .hero-zero-emi {
            box-shadow:
                0 10px 28px
                rgba(255,210,28,.08);
        }

        .zero-emi-section {
            padding: 30px 0 0;
        }

        .zero-emi-card {
            background:
                linear-gradient(
                    135deg,
                    #080808 0%,
                    #0d3f79 55%,
                    #ffd21c 100%
                );
        }

        .zero-feature-section {
            padding-top: 65px;
        }

        .zero-feature {
            position: relative;
            overflow: hidden;

            min-height: 360px;

            display: grid;
            grid-template-columns: 1.25fr .75fr;

            align-items: center;

            gap: 30px;

            padding: 52px 58px;

            border-radius: 28px;

            background:
                radial-gradient(
                    circle at 80% 50%,
                    rgba(255,210,28,.38),
                    transparent 35%
                ),
                linear-gradient(
                    135deg,
                    #080808,
                    #111111
                );

            color: #ffffff;

            box-shadow:
                0 28px 70px
                rgba(0,0,0,.18);
        }

        .zero-feature::before {
            content: "";

            position: absolute;

            width: 420px;
            height: 420px;

            right: -120px;
            top: -150px;

            border-radius: 50%;

            border: 1px solid
                rgba(255,255,255,.09);
        }

        .zero-feature-copy {
            position: relative;
            z-index: 2;
        }

        .zero-feature-copy .section-label {
            color: #ffd21c;
        }

        .zero-feature-copy h2 {
            margin: 0 0 14px;

            max-width: 620px;

            font-size: 44px;
            line-height: 1.08;

            letter-spacing: -1.8px;
        }

        .zero-feature-copy h2 span {
            display: block;

            color: #ffd21c;
        }

        .zero-feature-copy p {
            max-width: 570px;

            margin-bottom: 22px;

            color: #dddddd;

            font-size: 15px;
            line-height: 1.7;
        }

        .zero-pills {
            display: flex;
            flex-wrap: wrap;

            gap: 8px;

            margin-bottom: 25px;
        }

        .zero-pills span {
            padding: 8px 11px;

            border-radius: 50px;

            background:
                rgba(255,255,255,.09);

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

            color: #ffffff;

            font-size: 10px;
            font-weight: 800;
        }

        .zero-feature .primary-btn {
            background: #ffffff;
            color: #ffd21c;
        }

        .zero-feature-visual {
            position: relative;

            min-height: 270px;

            display: flex;

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

        .zero-percent-card {
            position: relative;
            z-index: 5;

            width: 190px;
            height: 190px;

            display: flex;
            flex-direction: column;

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

            border-radius: 42px;

            background:
                linear-gradient(
                    145deg,
                    #fffffffff,
                    #e9e9e9
                );

            color: #080808;

            transform: rotate(-7deg);

            box-shadow:
                0 28px 55px
                rgba(0,0,0,.20);
        }

        .zero-percent-card::after {
            content: "";

            position: absolute;

            inset: 9px;

            border-radius: 34px;

            border: 1px solid
                rgba(255,210,28,.12);
        }

        .zero-percent-card small {
            position: relative;
            z-index: 2;

            color: #6e819d;

            font-size: 9px;
            font-weight: 900;

            letter-spacing: 2px;
        }

        .zero-percent-card strong {
            position: relative;
            z-index: 2;

            margin: 3px 0;

            font-size: 70px;

            line-height: .95;

            letter-spacing: -5px;

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

            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;
        }

        .zero-percent-card span {
            position: relative;
            z-index: 2;

            color: #ffd21c;

            font-size: 9px;
            font-weight: 900;

            letter-spacing: 1px;
        }

        .zero-orbit {
            position: absolute;

            border-radius: 50%;

            border: 1px solid
                rgba(255,255,255,.15);
        }

        .zero-orbit-one {
            width: 260px;
            height: 260px;
        }

        .zero-orbit-two {
            width: 330px;
            height: 330px;

            border-color:
                rgba(255,210,28,.10);
        }

        .smart-section {
            background: #101010;
        }

        .smart-grid {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 18px;
        }

        .smart-card {
            position: relative;

            padding: 30px;

            border-radius: 20px;

            background: #ffffff;

            border:
                1px solid #2d2d2d;

            box-shadow:
                0 12px 32px
                rgba(0,0,0,.055);

            transition: .2s ease;
        }

        .smart-card:hover {
            transform: translateY(-5px);

            box-shadow:
                0 20px 40px
                rgba(0,0,0,.09);
        }

        .smart-card.featured {
            background:
                linear-gradient(
                    145deg,
                    #eff7ff,
                    #171717
                );

            border-color:
                #333333;
        }

        .smart-number {
            position: absolute;

            top: 18px;
            right: 20px;

            color: #777777;

            font-size: 11px;
            font-weight: 900;
        }

        .smart-icon {
            width: 50px;
            height: 50px;

            display: flex;

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

            margin-bottom: 20px;

            border-radius: 14px;

            background: #191919;

            color: #ffd21c;

            font-size: 18px;
            font-weight: 900;
        }

        .smart-card.featured .smart-icon {
            background: #191919;
            color: #ffd21c;
        }

        .smart-card h3 {
            margin-bottom: 8px;

            font-size: 18px;
        }

        .smart-card p {
            color: #999999;

            font-size: 13px;

            line-height: 1.7;
        }


        /* ========================================
           OFFER
        ======================================== */

        .offer-card {
            max-width: 780px;

            margin: auto;

            padding: 42px;

            border-radius: 22px;

            background: white;

            border: 1px solid #2d2d2d;

            box-shadow:
                0 20px 55px rgba(0,0,0,0.08);

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 35px;
        }


        .offer-info h3 {
            font-size: 23px;

            margin-bottom: 8px;
        }


        .offer-info p {
            color: #999999;

            font-size: 14px;
        }


        .price-area {
            text-align: right;

            min-width: 160px;
        }


        .old-price {
            color: #777777;

            text-decoration: line-through;

            font-size: 17px;
        }


        .new-price {
            color: #ffd21c;

            font-size: 52px;

            font-weight: 800;

            line-height: 1;

            margin: 4px 0 10px;
        }


        .limited {
            color: #3d8255;

            font-size: 11px;

            font-weight: 700;
        }


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

        .features-section {
            background: #101010;
        }


        .feature-grid {
            display: grid;

            grid-template-columns:
                repeat(4, 1fr);

            gap: 20px;
        }


        .feature-card {
            padding: 30px;

            background: white;

            border: 1px solid #2d2d2d;

            border-radius: 16px;

            transition: 0.2s ease;
        }


        .feature-card:hover {
            transform: translateY(-4px);

            box-shadow:
                0 15px 35px rgba(0,0,0,0.08);
        }


        .feature-icon {
            width: 48px;
            height: 48px;

            border-radius: 12px;

            background: #191919;

            color: #ffd21c;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 21px;

            margin-bottom: 20px;
        }


        .feature-card h3 {
            font-size: 18px;

            margin-bottom: 8px;
        }


        .feature-card p {
            color: #999999;

            font-size: 13px;
        }


        /* ========================================
           HOW IT WORKS
        ======================================== */

        .step-grid {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 30px;
        }


        .step {
            text-align: center;

            padding: 15px;
        }


        .step-number {
            width: 54px;
            height: 54px;

            margin: 0 auto 18px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            background: #ffd21c;

            color: white;

            font-weight: 800;

            box-shadow:
                0 10px 22px rgba(255,210,28,0.20);
        }


        .step h3 {
            font-size: 17px;

            margin-bottom: 7px;
        }


        .step p {
            color: #999999;

            font-size: 13px;
        }


        /* ========================================
           CTA
        ======================================== */

        .cta-section {
            padding: 35px 0 95px;
        }


        .cta {
            background:
                linear-gradient(
                    135deg,
                    #111111,
                    #ffd21c
                );

            color: white;

            border-radius: 22px;

            padding: 55px;

            text-align: center;

            box-shadow:
                0 25px 55px rgba(0,0,0,0.18);
        }


        .cta h2 {
            font-size: 35px;

            margin-bottom: 10px;
        }


        .cta p {
            color: #dddddd;

            font-size: 14px;

            margin-bottom: 25px;
        }


        .cta .primary-btn {
            background: white;

            color: #ffd21c;

            box-shadow: none;
        }


        .emi-terms-note {
            padding: 14px 0;

            background: #101010;

            color: #888888;

            font-size: 10px;

            text-align: center;

            border-top:
                1px solid #2d2d2d;
        }


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

        footer {
            background: #050505;

            color: #999999;

            padding: 30px 0;

            font-size: 12px;

            text-align: center;
        }


        @media (max-width: 950px) {

            .zero-emi-card {
                padding: 40px 35px;
            }

            .zero-emi-visual {
                min-width: 175px;
            }

            .zero-circle {
                width: 145px;
                height: 145px;
            }

            .zero-circle strong {
                font-size: 48px;
            }

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

        }


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

        @media (max-width: 950px) {

            .nav-links {
                display: none;

                position: absolute;

                top: 76px;

                left: 0;
                right: 0;

                background: white;

                padding: 20px;

                border-radius: 0 0 16px 16px;

                border: 1px solid #2d2d2d;

                box-shadow:
                    0 15px 35px rgba(30,60,100,0.12);

                flex-direction: column;

                align-items: stretch;

                gap: 4px;
            }


            .nav-links.active {
                display: flex;
            }


            .nav-links a {
                padding: 13px 10px;

                border-radius: 8px;
            }


            .nav-links a:hover {
                background: #151515;
            }


            .mobile-menu-btn {
                display: flex;
            }


            .nav-actions {
                margin-left: auto;

                margin-right: 10px;
            }


            .hero {
                padding: 70px 0 100px;
            }


            .hero-content {
                width: 100%;

                text-align: center;
            }


            .hero-description {
                margin-left: auto;

                margin-right: auto;
            }


            .hero-buttons {
                justify-content: center;
            }


            .card-area {
                position: relative;

                top: auto;

                right: auto;

                width: 100%;

                margin: 80px auto 0;

                display: flex;

                justify-content: center;
            }


            .feature-grid,
            .step-grid {
                grid-template-columns: 1fr;
            }


            .feature-card {
                text-align: center;
            }


            .feature-icon {
                margin-left: auto;

                margin-right: auto;
            }
        }


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

        @media (max-width: 650px) {

            .zero-feature-section {
                padding-top: 35px;
            }

            .zero-feature {
                min-height: auto;

                grid-template-columns: 1fr;

                padding: 34px 24px;

                text-align: center;
            }

            .zero-feature-copy h2 {
                font-size: 33px;
            }

            .zero-feature-copy p {
                font-size: 13px;
            }

            .zero-pills {
                justify-content: center;
            }

            .zero-feature .primary-btn {
                width: 100%;
                text-align: center;
            }

            .zero-feature-visual {
                min-height: 230px;
                margin-top: 5px;
            }

            .zero-percent-card {
                width: 160px;
                height: 160px;
            }

            .zero-percent-card strong {
                font-size: 58px;
            }

            .zero-orbit-one {
                width: 220px;
                height: 220px;
            }

            .zero-orbit-two {
                width: 275px;
                height: 275px;
            }

            .smart-grid {
                grid-template-columns: 1fr;
            }

            .smart-card {
                padding: 25px;
            }

            .zero-emi-section {
                padding-top: 15px;
            }

            .zero-emi-card {
                min-height: auto;
                padding: 32px 24px;
                flex-direction: column;
                align-items: flex-start;
            }

            .zero-emi-content h2 {
                font-size: 30px;
            }

            .zero-emi-content p {
                font-size: 13px;
            }

            .zero-emi-points {
                flex-direction: column;
                align-items: stretch;
            }

            .zero-emi-points div {
                width: 100%;
            }

            .zero-emi-btn {
                width: 100%;
                text-align: center;
            }

            .zero-emi-visual {
                width: 100%;
                min-width: 0;
                margin-top: 8px;
            }

            .hero-zero-emi {
                width: 100%;
                justify-content: flex-start;
            }

            .feature-grid {
                grid-template-columns: 1fr;
            }

            nav {
                height: 68px;
            }


            .logo img {
                height: 36px;

                max-width: 150px;
            }


            .nav-actions {
                display: none;
            }


            .mobile-menu-btn {
                width: 40px;
                height: 40px;

                font-size: 21px;
            }


            .nav-links {
                top: 68px;
            }


            .hero {
                padding: 60px 0 80px;
            }


            .hero h1 {
                font-size: 42px;

                letter-spacing: -2px;
            }


            .hero-description {
                font-size: 15px;
            }


            .hero-buttons {
                flex-direction: column;
            }


            .primary-btn,
            .secondary-btn {
                width: 100%;

                text-align: center;
            }


            .emi-card {
                width: 100%;

                max-width: 390px;

                height: 235px;

                padding: 23px;
            }


            .floating-offer {
                right: 0;

                bottom: -35px;
            }


            .trust-content {
                flex-wrap: wrap;

                justify-content: center;

                padding: 20px 0;
            }


            .trust-item {
                font-size: 11px;
            }


            .section {
                padding: 70px 0;
            }


            .section-header h2 {
                font-size: 30px;
            }


            .offer-card {
                padding: 28px;

                flex-direction: column;

                text-align: center;
            }


            .price-area {
                text-align: center;
            }


            .new-price {
                font-size: 48px;
            }


            .cta {
                padding: 40px 22px;
            }


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

    

        /* =====================================================
           EMI CREDITS HOMEPAGE — PREMIUM V2 OVERRIDES
        ===================================================== */

        :root {
            --pg-navy: #080808;
            --pg-yellow: #ffd21c;
            --pg-yellow-dark: #e9b900;
            --pg-yellow: #ffd21c;
            --pg-yellow-light: #ffd21c;
            --pg-text: #ffffff;
            --pg-muted: #999999;
            --pg-border: #2d2d2d;
            --pg-bg: #080808;
        }

        body {
            background:
                linear-gradient(
                    180deg,
                    #fffffffff 0%,
                    #080808 45%,
                    #0b0b0b 100%
                );
        }

        /* ---------- Header ---------- */

        header,
        .navbar,
        nav {
            backdrop-filter: blur(14px);
        }

        /* ---------- Hero ---------- */

        .hero {
            position: relative;
            overflow: hidden;

            background:
                radial-gradient(
                    circle at 78% 35%,
                    rgba(255,210,28,.11),
                    transparent 32%
                ),
                radial-gradient(
                    circle at 8% 20%,
                    rgba(255,210,28,.07),
                    transparent 27%
                );
        }

        .hero::before {
            content: "";

            position: absolute;

            width: 520px;
            height: 520px;

            right: -250px;
            top: -250px;

            border-radius: 50%;

            border: 1px solid
                rgba(255,210,28,.08);
        }

        .hero h1 {
            max-width: 760px;

            font-size: clamp(
                48px,
                6vw,
                78px
            );

            line-height: .98;

            letter-spacing: -3.4px;

            color: var(--pg-navy);
        }

        .hero h1 span {
            display: block;

            background:
                linear-gradient(
                    100deg,
                    #ffd21c 5%,
                    #ffd21c 45%,
                    #ffd21c 100%
                );

            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p {
            max-width: 600px;

            color: #999999;

            font-size: 16px;

            line-height: 1.8;
        }

        .hero-note {
            color: #49617d !important;

            font-weight: 700;
        }

        .hero-zero-emi {
            background:
                rgba(240,251,245,.92);

            border:
                1px solid #3a3a3a;

            box-shadow:
                0 14px 35px
                rgba(255,210,28,.08);
        }

        .hero-trust-row {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;

            margin-top: 18px;
        }

        .hero-trust-row span {
            padding: 7px 10px;

            border-radius: 50px;

            background: #151515;

            border: 1px solid #2d2d2d;

            color: #999999;

            font-size: 9px;
            font-weight: 800;
        }

        /* ---------- Hero visual / EMI card ---------- */

        .hero-visual {
            filter:
                drop-shadow(
                    0 28px 55px
                    rgba(0,0,0,.15)
                );
        }

        .emi-card {
            background:
                linear-gradient(
                    145deg,
                    #080808 0%,
                    #171717 50%,
                    #ffd21c 100%
                );

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

            box-shadow:
                0 30px 70px
                rgba(0,0,0,.22);
        }

        .emi-card::after {
            background:
                linear-gradient(
                    135deg,
                    rgba(255,255,255,.08),
                    transparent
                );
        }

        .floating-offer {
            background:
                linear-gradient(
                    135deg,
                    #fffffffff,
                    #171717
                );

            border:
                1px solid #dbe7f5;

            box-shadow:
                0 18px 45px
                rgba(0,0,0,.16);
        }

        /* ---------- Section rhythm ---------- */

        .section {
            position: relative;
        }

        .section-header h2 {
            color: var(--pg-navy);

            letter-spacing: -1px;
        }

        .section-header p {
            color: var(--pg-muted);
        }

        .section-label {
            color: var(--pg-yellow);
            letter-spacing: 1.7px;
            font-weight: 900;
        }

        /* ---------- Zero Cost EMI ---------- */

        .zero-feature-section {
            padding-top: 82px;
        }

        .zero-feature {
            min-height: 410px;

            grid-template-columns:
                minmax(0, 1.2fr)
                minmax(250px, .8fr);

            padding:
                64px 68px;

            border-radius: 32px;

            background:
                radial-gradient(
                    circle at 86% 45%,
                    rgba(42,139,255,.30),
                    transparent 27%
                ),
                radial-gradient(
                    circle at 12% 100%,
                    rgba(255,210,28,.13),
                    transparent 31%
                ),
                linear-gradient(
                    135deg,
                    #080808 0%,
                    #111111 52%,
                    #171717 100%
                );

            box-shadow:
                0 35px 80px
                rgba(0,0,0,.18);
        }

        .zero-feature-copy h2 {
            font-size: clamp(
                38px,
                4.5vw,
                58px
            );

            letter-spacing: -2.4px;
        }

        .zero-feature-copy h2 span {
            color: var(--pg-yellow-light);
        }

        .zero-feature-copy p {
            max-width: 610px;
            color: #dddddd;
        }

        .zero-pills span {
            background:
                rgba(255,255,255,.08);

            border-color:
                rgba(255,255,255,.13);
        }

        .zero-feature .primary-btn {
            padding:
                13px 20px;

            border-radius: 10px;

            box-shadow:
                0 12px 30px
                rgba(0,0,0,.14);
        }

        .zero-percent-card {
            width: 210px;
            height: 210px;

            border-radius: 48px;

            transform: rotate(-5deg);

            box-shadow:
                0 32px 65px
                rgba(0,0,0,.24);
        }

        .zero-percent-card strong {
            font-size: 78px;
        }

        /* ---------- Smart cards ---------- */

        .smart-section {
            padding-top: 75px;
            padding-bottom: 75px;

            background:
                linear-gradient(
                    180deg,
                    #0b0b0b,
                    #101010
                );
        }

        .smart-grid {
            gap: 20px;
        }

        .smart-card {
            min-height: 245px;

            padding: 32px;

            border-radius: 22px;

            border-color:
                #e0e8f2;

            box-shadow:
                0 14px 38px
                rgba(0,0,0,.055);
        }

        .smart-card.featured {
            background:
                linear-gradient(
                    145deg,
                    #171717,
                    #151515
                );

            border:
                1px solid #333333;
        }

        /* ---------- Trust strip ---------- */

        .trust-strip {
            padding: 0 0 20px;

            background: #0b0b0b;
        }

        .trust-strip-inner {
            display: grid;

            grid-template-columns:
                1fr auto 1fr auto 1fr;

            align-items: center;

            padding: 23px 28px;

            border:
                1px solid #dfe8f2;

            border-radius: 20px;

            background:
                rgba(255,255,255,.92);

            box-shadow:
                0 12px 32px
                rgba(0,0,0,.045);
        }

        .trust-item {
            display: flex;
            flex-direction: column;

            gap: 3px;

            text-align: center;
        }

        .trust-item strong {
            color: var(--pg-yellow);

            font-size: 22px;
            font-weight: 950;

            letter-spacing: -.7px;
        }

        .trust-item span {
            color: #75869b;

            font-size: 9px;
            font-weight: 700;
        }

        .trust-divider {
            width: 1px;
            height: 35px;

            background: #2d2d2d;
        }

        /* ---------- Terms ---------- */

        .emi-terms-note {
            background:
                #101010;

            color:
                #999999;

            font-size: 9px;
        }

        /* ---------- Buttons ---------- */

        .primary-btn,
        .zero-emi-btn {
            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

        .primary-btn:hover,
        .zero-emi-btn:hover {
            transform:
                translateY(-2px);

            box-shadow:
                0 15px 32px
                rgba(255,210,28,.16);
        }

        /* ---------- Mobile ---------- */

        @media (max-width: 800px) {

            .hero h1 {
                font-size: 48px;
                letter-spacing: -2.2px;
            }

            .zero-feature {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .zero-feature-copy p {
                margin-left: auto;
                margin-right: auto;
            }

            .zero-pills {
                justify-content: center;
            }

            .zero-feature-visual {
                margin-top: 12px;
            }

            .trust-strip-inner {
                grid-template-columns: 1fr;

                gap: 17px;

                padding: 22px 18px;
            }

            .trust-divider {
                width: 70px;
                height: 1px;

                margin: 0 auto;
            }

        }

        @media (max-width: 650px) {

            .hero h1 {
                font-size: 40px;
                letter-spacing: -1.7px;
            }

            .hero p {
                font-size: 14px;
            }

            .hero-trust-row {
                display: grid;
                grid-template-columns: 1fr;
            }

            .hero-trust-row span {
                text-align: center;
            }

            .zero-feature-section {
                padding-top: 45px;
            }

            .zero-feature {
                padding: 34px 22px;
                border-radius: 24px;
            }

            .zero-feature-copy h2 {
                font-size: 35px;
            }

            .zero-percent-card {
                width: 170px;
                height: 170px;
                border-radius: 38px;
            }

            .zero-percent-card strong {
                font-size: 62px;
            }

            .smart-section {
                padding-top: 55px;
                padding-bottom: 55px;
            }

            .smart-card {
                min-height: auto;
                padding: 27px;
            }

        }

</style>

<style>
/* ============================================================
   EMI CREDITS — MODERN BLACK / YELLOW / WHITE MOTION LAYER
   No additional accent colours.
============================================================ */

:root{
    --mc-black:#050505;
    --mc-black-2:#0b0b0b;
    --mc-panel:#111111;
    --mc-panel-2:#171717;
    --mc-yellow:#ffd21c;
    --mc-yellow-2:#ffbf00;
    --mc-white:#ffffff;
    --mc-muted:#9b9b9b;
    --mc-line:#2a2a2a;
}

body{
    background:var(--mc-black)!important;
    color:var(--mc-white)!important;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        radial-gradient(circle at 15% 10%,rgba(255,210,28,.055),transparent 24%),
        radial-gradient(circle at 90% 35%,rgba(255,210,28,.035),transparent 28%);
}

/* ---------- Header ---------- */
header{
    background:rgba(5,5,5,.88)!important;
    border-bottom:1px solid rgba(255,210,28,.14)!important;
    box-shadow:0 8px 30px rgba(0,0,0,.28);
}

.nav-links,
.nav-actions{
    color:#fff!important;
}

.nav-links a,
.login-btn{
    color:#ddd!important;
}

.nav-links a:hover,
.login-btn:hover{
    color:var(--mc-yellow)!important;
}

.signup-btn,
.primary-btn{
    background:var(--mc-yellow)!important;
    color:#050505!important;
    border-color:var(--mc-yellow)!important;
    box-shadow:0 12px 30px rgba(255,210,28,.12);
}

.signup-btn:hover,
.primary-btn:hover{
    background:#fff!important;
    color:#050505!important;
    box-shadow:0 16px 36px rgba(255,210,28,.18);
}

.mobile-menu-btn{
    background:#151515!important;
    color:var(--mc-yellow)!important;
    border:1px solid #303030!important;
}

/* ---------- Hero ---------- */
.hero{
    background:
        radial-gradient(circle at 78% 38%,rgba(255,210,28,.11),transparent 28%),
        radial-gradient(circle at 12% 85%,rgba(255,210,28,.045),transparent 25%),
        #050505!important;
}

.hero h1{
    color:#fff!important;
    text-shadow:0 4px 30px rgba(255,210,28,.04);
}

.hero h1 span{
    color:var(--mc-yellow)!important;
    background:none!important;
    -webkit-text-fill-color:var(--mc-yellow)!important;
}

.hero-description,
.hero p{
    color:#b5b5b5!important;
}

.hero-badge{
    background:#151515!important;
    color:var(--mc-yellow)!important;
    border-color:rgba(255,210,28,.28)!important;
    box-shadow:0 0 25px rgba(255,210,28,.04);
}

.secondary-btn{
    background:#0b0b0b!important;
    color:#fff!important;
    border-color:#3a3a3a!important;
}

.secondary-btn:hover{
    border-color:var(--mc-yellow)!important;
    color:var(--mc-yellow)!important;
}

.hero-note{
    color:#999!important;
}

.hero-zero-emi{
    background:#111!important;
    border-color:rgba(255,210,28,.24)!important;
    color:#fff!important;
}

.zero-emi-icon{
    background:var(--mc-yellow)!important;
    color:#050505!important;
}

.hero-zero-emi strong{
    color:#fff!important;
}

.hero-zero-emi span{
    color:#999!important;
}

/* ---------- Hero card ---------- */
.card-area{
    perspective:1200px;
}

.emi-card{
    background:
        linear-gradient(145deg,#1b1b1b,#070707 72%)!important;
    border:1px solid rgba(255,210,28,.42)!important;
    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 55px rgba(255,210,28,.08)!important;
    transform:rotate(5deg) rotateX(2deg);
    animation:emiCardFloat 5s ease-in-out infinite;
}

.emi-card::before,
.emi-card::after{
    border-color:rgba(255,210,28,.22)!important;
}

.card-type{
    color:var(--mc-yellow)!important;
    border-color:rgba(255,210,28,.38)!important;
}

.chip{
    background:linear-gradient(135deg,#ffd21c,#fff)!important;
}

.floating-offer{
    background:#111!important;
    border-color:rgba(255,210,28,.28)!important;
    box-shadow:0 20px 50px rgba(0,0,0,.45)!important;
}

.floating-offer strong{
    color:var(--mc-yellow)!important;
}

@keyframes emiCardFloat{
    0%,100%{transform:rotate(5deg) translateY(0) rotateX(2deg)}
    50%{transform:rotate(3.5deg) translateY(-13px) rotateX(2deg)}
}

/* ---------- Trust ---------- */
.trust-bar,
.trust-strip{
    background:#0b0b0b!important;
    border-color:#292929!important;
}

.trust-item{
    color:#ccc!important;
}

.trust-icon{
    background:#151515!important;
    color:var(--mc-yellow)!important;
    border:1px solid #292929;
}

/* ---------- Sections ---------- */
.section,
.features-section,
.smart-section,
.investors-section{
    background:#080808!important;
}

.section-header h2,
.section-title,
.section-heading{
    color:#fff!important;
}

.section-header p{
    color:#999!important;
}

.section-label{
    color:var(--mc-yellow)!important;
}

/* ---------- Zero cost ---------- */
.zero-feature-section{
    background:#080808!important;
}

.zero-feature{
    background:
        radial-gradient(circle at 82% 42%,rgba(255,210,28,.12),transparent 25%),
        linear-gradient(135deg,#090909,#141414 65%,#0b0b0b)!important;
    border:1px solid rgba(255,210,28,.22);
    box-shadow:0 35px 80px rgba(0,0,0,.4);
}

.zero-feature::before{
    border-color:rgba(255,210,28,.12);
}

.zero-feature-copy h2{
    color:#fff!important;
}

.zero-feature-copy h2 span{
    color:var(--mc-yellow)!important;
}

.zero-feature-copy p{
    color:#aaa!important;
}

.zero-pills span{
    background:#151515!important;
    border-color:#303030!important;
    color:#ddd!important;
}

.zero-feature .primary-btn{
    background:var(--mc-yellow)!important;
    color:#050505!important;
}

.zero-feature-visual{
    animation:visualFloat 6s ease-in-out infinite;
}

.zero-percent-card{
    background:linear-gradient(145deg,#fff,#e9e9e9)!important;
    color:#050505!important;
    border:2px solid var(--mc-yellow);
    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 45px rgba(255,210,28,.12)!important;
}

.zero-percent-card strong{
    color:#050505!important;
    background:none!important;
    -webkit-text-fill-color:#050505!important;
}

.zero-percent-card span{
    color:#050505!important;
}

.zero-orbit{
    border-color:rgba(255,210,28,.2)!important;
    animation:orbitPulse 4s ease-in-out infinite;
}

.zero-orbit-two{
    animation-delay:1.2s;
}

@keyframes visualFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

@keyframes orbitPulse{
    0%,100%{transform:scale(1);opacity:.55}
    50%{transform:scale(1.04);opacity:1}
}

/* ---------- Moving strip ---------- */
.nx-feature-strip{
    background:var(--mc-yellow)!important;
    color:#050505!important;
    border-top:1px solid #050505;
    border-bottom:1px solid #050505;
}

.nx-feature-track{
    animation:nxMarquee 22s linear infinite!important;
}

@keyframes nxMarquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* ---------- Loans ---------- */
.loan-products-section{
    background:
        radial-gradient(circle at 10% 15%,rgba(255,210,28,.07),transparent 24%),
        radial-gradient(circle at 90% 80%,rgba(255,210,28,.05),transparent 24%),
        #080808!important;
}

.loan-product-card{
    background:linear-gradient(145deg,#151515,#0d0d0d)!important;
    border-color:#2c2c2c!important;
    box-shadow:0 20px 50px rgba(0,0,0,.32)!important;
}

.loan-product-card:hover{
    border-color:rgba(255,210,28,.62)!important;
    transform:translateY(-8px)!important;
    box-shadow:
        0 28px 65px rgba(0,0,0,.48),
        0 0 35px rgba(255,210,28,.06)!important;
}

.loan-product-card.featured{
    background:linear-gradient(145deg,#19180f,#0d0d0d)!important;
    border-color:rgba(255,210,28,.42)!important;
}

.loan-product-card.featured::before{
    background:var(--mc-yellow)!important;
    color:#050505!important;
}

.loan-product-icon{
    background:#191919!important;
    color:var(--mc-yellow)!important;
    border-color:rgba(255,210,28,.22)!important;
}

.loan-product-card h3{
    color:#fff!important;
}

.loan-product-card p{
    color:#999!important;
}

.loan-product-tag{
    color:var(--mc-yellow)!important;
}

.loan-product-points span{
    background:#191919!important;
    border-color:#2d2d2d!important;
    color:#aaa!important;
}

.loan-product-btn{
    background:var(--mc-yellow)!important;
    color:#050505!important;
}

.loan-product-btn:hover{
    background:#fff!important;
}

/* ---------- Investors ---------- */
.investors-section{
    background:#080808!important;
}

.investor-card{
    background:
        radial-gradient(circle at 82% 42%,rgba(255,210,28,.11),transparent 27%),
        linear-gradient(135deg,#080808,#151515)!important;
    border-color:rgba(255,210,28,.22)!important;
    box-shadow:0 35px 80px rgba(0,0,0,.42)!important;
}

.investor-content h2{
    color:#fff!important;
}

.investor-content h2 span{
    color:var(--mc-yellow)!important;
}

.investor-content p{
    color:#aaa!important;
}

.investor-points div{
    background:#151515!important;
    border-color:#2d2d2d!important;
}

.investor-points strong{
    color:var(--mc-yellow)!important;
}

.investor-points span{
    color:#fff!important;
}

.investor-btn{
    background:var(--mc-yellow)!important;
    color:#050505!important;
}

.investor-btn:hover{
    background:#fff!important;
}

.investor-panel{
    background:linear-gradient(145deg,#fff,#dedede)!important;
    border:2px solid var(--mc-yellow)!important;
}

.investor-panel-icon{
    background:var(--mc-yellow)!important;
    color:#050505!important;
}

.investor-panel strong{
    color:#050505!important;
}

.investor-panel span,
.investor-panel small{
    color:#444!important;
}

.investor-orbit{
    border-color:rgba(255,210,28,.2)!important;
}

/* ---------- Benefits ---------- */
.feature-card,
.benefit-card,
.benefits-card{
    background:linear-gradient(145deg,#151515,#0d0d0d)!important;
    border-color:#292929!important;
    color:#fff!important;
}

.feature-card:hover,
.benefit-card:hover,
.benefits-card:hover{
    border-color:rgba(255,210,28,.48)!important;
    box-shadow:
        0 22px 50px rgba(0,0,0,.38),
        0 0 30px rgba(255,210,28,.05)!important;
}

.feature-icon,
.benefit-icon{
    background:#191919!important;
    color:var(--mc-yellow)!important;
    border-color:rgba(255,210,28,.2)!important;
}

.feature-card h3,
.benefit-card h3,
.benefits-card h3{
    color:#fff!important;
}

.feature-card p,
.benefit-card p,
.benefits-card p{
    color:#999!important;
}

/* ---------- How it works ---------- */
.step{
    position:relative;
}

.step-number,
.process-number{
    background:var(--mc-yellow)!important;
    color:#050505!important;
    box-shadow:0 0 0 7px rgba(255,210,28,.06),0 12px 28px rgba(255,210,28,.14)!important;
    animation:stepPulse 3s ease-in-out infinite;
}

.step:nth-child(2) .step-number{animation-delay:.5s}
.step:nth-child(3) .step-number{animation-delay:1s}

.step h3{
    color:#fff!important;
}

.step p{
    color:#999!important;
}

@keyframes stepPulse{
    0%,100%{transform:translateY(0);box-shadow:0 0 0 7px rgba(255,210,28,.04),0 12px 28px rgba(255,210,28,.10)}
    50%{transform:translateY(-5px);box-shadow:0 0 0 12px rgba(255,210,28,.02),0 16px 32px rgba(255,210,28,.16)}
}

/* ---------- Smart EMI ---------- */
.smart-card,
.smart-emi-card{
    background:linear-gradient(145deg,#151515,#0d0d0d)!important;
    border-color:#292929!important;
    color:#fff!important;
}

.smart-card.featured{
    background:linear-gradient(145deg,#1a190f,#101010)!important;
    border-color:rgba(255,210,28,.32)!important;
}

.smart-icon{
    background:#191919!important;
    color:var(--mc-yellow)!important;
    border:1px solid rgba(255,210,28,.18);
}

.smart-card h3,
.smart-emi-card h3{
    color:#fff!important;
}

.smart-card p,
.smart-emi-card p{
    color:#999!important;
}

.smart-number{
    color:#666!important;
}

/* ---------- Trust stats ---------- */
.trust-strip-inner{
    background:#111!important;
    border-color:#2b2b2b!important;
    box-shadow:0 18px 45px rgba(0,0,0,.28)!important;
}

.trust-item strong{
    color:var(--mc-yellow)!important;
}

.trust-item span{
    color:#999!important;
}

.trust-divider{
    background:#303030!important;
}

/* ---------- CTA ---------- */
.cta-section{
    background:#080808!important;
}

.cta{
    background:
        radial-gradient(circle at 80% 40%,rgba(255,210,28,.10),transparent 25%),
        linear-gradient(135deg,#0a0a0a,#171717)!important;
    border:1px solid rgba(255,210,28,.2);
    box-shadow:0 30px 70px rgba(0,0,0,.42)!important;
}

.cta h2{
    color:#fff!important;
}

.cta p{
    color:#999!important;
}

.cta .primary-btn{
    background:var(--mc-yellow)!important;
    color:#050505!important;
}

/* ---------- Terms ---------- */
.emi-terms-note,
.terms-note,
.disclaimer,
.terms-section{
    background:#0d0d0d!important;
    color:#777!important;
    border-color:#222!important;
}

/* ---------- Footer ---------- */
.site-footer,
footer{
    background:#050505!important;
    color:#999!important;
    border-top:1px solid #252525!important;
}

.site-footer h3,
.site-footer h4,
footer h3,
footer h4{
    color:#fff!important;
}

.site-footer a,
footer a{
    color:#999!important;
}

.site-footer a:hover,
footer a:hover{
    color:var(--mc-yellow)!important;
}

.contact-icon{
    background:#191919!important;
    color:var(--mc-yellow)!important;
    border:1px solid rgba(255,210,28,.15);
}

/* ---------- Global premium details ---------- */
::selection{
    background:var(--mc-yellow);
    color:#050505;
}

a{
    transition:color .2s ease,transform .2s ease;
}

button,
.primary-btn,
.secondary-btn,
.loan-product-btn,
.investor-btn{
    cursor:pointer;
}

section{
    scroll-margin-top:80px;
}

/* Moving ambient grid */
.hero,
.loan-products-section,
.investors-section,
.cta-section{
    isolation:isolate;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.16;
    background-image:
        linear-gradient(rgba(255,210,28,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,210,28,.045) 1px,transparent 1px);
    background-size:58px 58px;
    mask-image:linear-gradient(to bottom,black,transparent 78%);
    z-index:-1;
}

/* Floating particles */
.hero::before{
    animation:ambientFloat 7s ease-in-out infinite!important;
}

@keyframes ambientFloat{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(-18px,14px,0) scale(1.05)}
}

/* Subtle shine on buttons/cards */
.primary-btn,
.loan-product-btn,
.investor-btn{
    position:relative;
    overflow:hidden;
}

.primary-btn::after,
.loan-product-btn::after,
.investor-btn::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-100%;
    width:55%;
    height:180%;
    transform:skewX(-20deg);
    background:rgba(255,255,255,.35);
    animation:buttonShine 4.5s ease-in-out infinite;
}

@keyframes buttonShine{
    0%,65%,100%{left:-100%}
    78%{left:140%}
}

/* Card hover lift */
.emi-card,
.loan-product-card,
.feature-card,
.smart-card,
.investor-card,
.cta{
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

/* Mobile motion kept subtle */
@media(max-width:650px){
    .hero::after{
        background-size:42px 42px;
        opacity:.10;
    }

    .emi-card{
        animation:emiCardFloatMobile 5s ease-in-out infinite;
    }

    @keyframes emiCardFloatMobile{
        0%,100%{transform:rotate(2deg) translateY(0)}
        50%{transform:rotate(1deg) translateY(-7px)}
    }

    .zero-feature,
    .investor-card,
    .cta{
        box-shadow:0 20px 45px rgba(0,0,0,.36)!important;
    }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
    }
}
</style>

</head>


<body>


<!-- ==========================================
     HEADER
========================================== -->

<header>

    <div class="container">

        <nav>


            <!-- LOGO -->

            <a href="/" class="logo">

                <img
                    src="{{ asset('images/logo.png') }}"
                    alt="EMI CREDITS"
                >

            </a>


            <!-- NAV LINKS -->

            <div class="nav-links" id="navLinks">

                <a href="#benefits">
                    Benefits
                </a>

                <a href="#loans">
                    Loans
                </a>

                <a href="#investors">
                    Investors
                </a>

                <a href="#how-it-works">
                    How It Works
                </a>

                <a href="#offer">
                    Offer
                </a>


                @auth

                    <a href="{{ route('client.dashboard') }}">
                        My Application
                    </a>

                @else

                    <a href="{{ route('login') }}">
                        Login
                    </a>

                    <a href="{{ route('register') }}">
                        Get Started
                    </a>

                @endauth

            </div>


            <!-- DESKTOP ACTIONS -->

            <div class="nav-actions">

                @auth

                    <a
                        href="{{ route('client.dashboard') }}"
                        class="signup-btn"
                    >
                        My Application
                    </a>

                @else

                    <a
                        href="{{ route('login') }}"
                        class="login-btn"
                    >
                        Login
                    </a>

                    <a
                        href="{{ route('register') }}"
                        class="signup-btn"
                    >
                        Get Started
                    </a>

                @endauth

            </div>


            <!-- MOBILE BUTTON -->

            <button
                class="mobile-menu-btn"
                id="mobileMenuBtn"
                aria-label="Open menu"
                aria-expanded="false"
            >
                ☰
            </button>


        </nav>

    </div>

</header>



<!-- ==========================================
     HERO
========================================== -->

<section class="hero">

    <div class="container">


        <div class="hero-content">


            <div class="hero-badge">

                ✦ Smart EMI Solutions

            </div>


            <h1>
                Zero Cost EMI.
                <span>0% Interest.</span>
                </h1>


            <p class="hero-description">

                Get your EMI CREDITS EMI Card and enjoy
                eligible purchases with Zero Cost EMI
                and 0% interest.

                Simple digital application, transparent
                process and convenient instalments.

            </p>


            <div class="hero-buttons">

                @auth

                    <a
                        href="{{ route('client.dashboard') }}"
                        class="primary-btn"
                    >
                        My Application →
                    </a>

                @else

                    <a
                        href="{{ route('register') }}"
                        class="primary-btn"
                    >
                        Get Your Card →
                    </a>

                @endauth


                <a
                    href="#how-it-works"
                    class="secondary-btn"
                >
                    How It Works
                </a>

            </div>


            <div class="hero-note">

                ✓ Simple application
                &nbsp;&nbsp;
                ✓ Digital process

            </div>

            <div class="hero-zero-emi">

                <div class="zero-emi-icon">0%</div>

                <div>
                    <strong>Zero Cost EMI</strong>
                    <span>No Interest • 0% Interest</span>
                </div>

            </div>


        </div>



        <!-- EMI CARD -->

        <div class="card-area">


            <div class="emi-card">


                <div class="card-top">


                    <div class="card-brand">

                        EMI CREDITS

                    </div>


                    <div class="card-type">

                        EMI CARD

                    </div>


                </div>


                <div class="chip"></div>


                <div class="card-number">

                    •••• &nbsp;
                    •••• &nbsp;
                    •••• &nbsp;
                    4582

                </div>


                <div class="card-bottom">

                    <span>
                        EMI CREDITS CARD
                    </span>

                    <span>
                        DIGITAL
                    </span>

                </div>


            </div>


            <!-- OFFER FLOATING -->

            <div class="floating-offer">

                <small>
                    ZERO COST EMI
                </small>

                <strong>
                    0% EMI
                </strong>

                <small>
                    No Interest • Zero Cost
                </small>

            </div>


        </div>

    </div>

</section>



<!-- ==========================================
     TRUST BAR
========================================== -->

<section class="trust-bar">

    <div class="container">


        <div class="trust-content">


            <div class="trust-item">

                <div class="trust-icon">
                    🔒
                </div>

                Secure Process

            </div>


            <div class="trust-item">

                <div class="trust-icon">
                    ⚡
                </div>

                Quick Application

            </div>


            <div class="trust-item">

                <div class="trust-icon">
                    📱
                </div>

                100% Online

            </div>


            <div class="trust-item">

                <div class="trust-icon">
                    💳
                </div>

                Digital Card

            </div>


        </div>

    </div>

</section>



<!-- ==========================================
     ZERO COST EMI HIGHLIGHT
========================================== -->

<section class="section zero-feature-section">

    <div class="container">

        <div class="zero-feature">

            <div class="zero-feature-copy">

                <div class="section-label">
                    ZERO COST EMI
                </div>

                <h2>
                    0% Interest.
                    <span>Zero Cost EMI.</span>
                </h2>

                <p>
                    Make eligible purchases today and pay in
                    simple EMI instalments without additional
                    interest.
                </p>

                <div class="zero-pills">
                    <span>✓ No Interest</span>
                    <span>✓ Zero Cost EMI</span>
                    <span>✓ Easy Instalments</span>
                </div>

                @auth
                    <a
                        href="{{ route('client.dashboard') }}"
                        class="primary-btn"
                    >
                        Open My Dashboard →
                    </a>
                @else
                    <a
                        href="{{ route('register') }}"
                        class="primary-btn"
                    >
                        Apply for 0% EMI →
                    </a>
                @endauth

            </div>

            <div class="zero-feature-visual">

                <div class="zero-orbit zero-orbit-one"></div>
                <div class="zero-orbit zero-orbit-two"></div>

                <div class="zero-percent-card">

                    <small>
                        INTEREST
                    </small>

                    <strong>
                        0%
                    </strong>

                    <span>
                        ZERO COST EMI
                    </span>

                </div>

            </div>

        </div>

    </div>

</section>




<!-- ==========================================
     NEX MOVING FEATURE STRIP
========================================== -->
<div class="nx-feature-strip" aria-label="Nex Finserv highlights">

    <div class="nx-feature-track">

        <span><i></i> Digital Finance</span>
        <span><i></i> Flexible EMI</span>
        <span><i></i> Simple Process</span>
        <span><i></i> Transparent Financing</span>
        <span><i></i> Multiple Loan Solutions</span>
        <span><i></i> Customer Focused</span>

        <span><i></i> Digital Finance</span>
        <span><i></i> Flexible EMI</span>
        <span><i></i> Simple Process</span>
        <span><i></i> Transparent Financing</span>
        <span><i></i> Multiple Loan Solutions</span>
        <span><i></i> Customer Focused</span>

    </div>

</div>

<!-- ==========================================
     LOAN PRODUCTS
========================================== -->

<section
    class="section loan-products-section"
    id="loans"
>

    <div class="container">

        <div class="section-header">

            <div class="section-label">
                LOAN SOLUTIONS
            </div>

            <h2>
                Financing for every need
            </h2>

            <p>
                Flexible financing solutions designed for
                personal, business and everyday financial needs.
            </p>

        </div>

        <div class="loan-products-grid">

            <div class="loan-product-card">

                <div class="loan-product-icon">
                    👤
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        PERSONAL
                    </span>

                    <h3>
                        Personal Loan
                    </h3>

                    <p>
                        Manage planned expenses with a simple
                        digital application and flexible repayment options.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Flexible Amount</span>
                        <span>✓ Easy EMI</span>
                        <span>✓ Digital Process</span>
                    </div>

                </div>

                @auth
                    <a
                        href="{{ route('client.loans') }}"
                        class="loan-product-btn"
                    >
                        Apply Now →
                    </a>
                @else
                    <a
                        href="{{ route('register') }}"
                        class="loan-product-btn"
                    >
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card featured">

                <div class="loan-product-icon">
                    🏢
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        BUSINESS
                    </span>

                    <h3>
                        Business Loan
                    </h3>

                    <p>
                        Financing support for business requirements,
                        working capital and planned expansion.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Business Support</span>
                        <span>✓ Flexible EMI</span>
                        <span>✓ Digital Application</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card">

                <div class="loan-product-icon">
                    🏥
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        MEDICAL
                    </span>

                    <h3>
                        Medical Loan
                    </h3>

                    <p>
                        Financial assistance for eligible medical
                        and treatment-related expenses.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Treatment Support</span>
                        <span>✓ Easy EMI</span>
                        <span>✓ Simple Process</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card">

                <div class="loan-product-icon">
                    ⚡
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        EMERGENCY
                    </span>

                    <h3>
                        Emergency Loan
                    </h3>

                    <p>
                        Quick access to financing for eligible
                        unexpected financial requirements.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Quick Application</span>
                        <span>✓ Flexible Repayment</span>
                        <span>✓ Digital Process</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card">

                <div class="loan-product-icon">
                    🏠
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        HOME
                    </span>

                    <h3>
                        Home Loan
                    </h3>

                    <p>
                        Financing solutions for eligible home
                        purchase and related requirements.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Flexible Tenure</span>
                        <span>✓ Structured EMI</span>
                        <span>✓ Digital Journey</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>


            <div class="loan-product-card">

                <div class="loan-product-icon">
                    🚗
                </div>

                <div class="loan-product-content">

                    <span class="loan-product-tag">
                        VEHICLE
                    </span>

                    <h3>
                        Vehicle Loan
                    </h3>

                    <p>
                        Financing options for eligible vehicle
                        purchase and transportation requirements.
                    </p>

                    <div class="loan-product-points">
                        <span>✓ Vehicle Financing</span>
                        <span>✓ Easy EMI</span>
                        <span>✓ Digital Application</span>
                    </div>

                </div>

                @auth
                    <a href="{{ route('client.loans') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @else
                    <a href="{{ route('register') }}" class="loan-product-btn">
                        Apply Now →
                    </a>
                @endauth

            </div>

        </div>

    </div>

</section>


<!-- ==========================================
     INVESTORS
========================================== -->

<section
    class="section investors-section"
    id="investors"
>

    <div class="container">

        <div class="investor-card">

            <div class="investor-content">

                <div class="section-label">
                    FOR INVESTORS
                </div>

                <h2>
                    Be part of the
                    <span>digital finance ecosystem.</span>
                </h2>

                <p>
                    Explore opportunities to participate in a
                    technology-driven financial platform focused
                    on simple, transparent and structured financing.
                </p>

                <div class="investor-points">

                    <div>
                        <strong>01</strong>
                        <span>Digital-first platform</span>
                    </div>

                    <div>
                        <strong>02</strong>
                        <span>Structured financing</span>
                    </div>

                    <div>
                        <strong>03</strong>
                        <span>Transparent processes</span>
                    </div>

                </div>

                <a
                    href="#investor-contact"
                    class="investor-btn"
                >
                    Investor Enquiry →
                </a>

            </div>

            <div class="investor-visual">

                <div class="investor-orbit investor-orbit-one"></div>
                <div class="investor-orbit investor-orbit-two"></div>

                <div class="investor-panel">

                    <div class="investor-panel-icon">
                        ↗
                    </div>

                    <small>
                        INVESTOR
                    </small>

                    <strong>
                        Digital Finance
                    </strong>

                    <span>
                        Structured • Transparent • Technology Driven
                    </span>

                </div>

            </div>

        </div>

    </div>

</section>



<!-- ==========================================
     BENEFITS
========================================== -->

<section
    class="section features-section"
    id="benefits"
>

    <div class="container">


        <div class="section-header">


            <div class="section-label">
                Benefits
            </div>


            <h2>
                Everything made simple
            </h2>


            <p>

                A simple digital experience
                designed around your application.

            </p>


        </div>



        <div class="feature-grid">


            <div class="feature-card">


                <div class="feature-icon">
                    ⚡
                </div>


                <h3>
                    Quick Application
                </h3>


                <p>

                    Complete your application online
                    through a simple step-by-step process.

                </p>


            </div>



            <div class="feature-card">


                <div class="feature-icon">
                    🔐
                </div>


                <h3>
                    Secure Process
                </h3>


                <p>

                    Your application information is
                    handled through a secure digital process.

                </p>


            </div>



            <div class="feature-card">


                <div class="feature-icon">
                    💳
                </div>


                <h3>
                    Digital Card
                </h3>


                <p>

                    View your personalised card once
                    your application process is completed.

                </p>


            </div>



            <div class="feature-card">

                <div class="feature-icon">
                    0%
                </div>

                <h3>
                    Zero Cost EMI
                </h3>

                <p>
                    Eligible purchases can be converted
                    into EMI with 0% interest.
                </p>

            </div>


        </div>

    </div>

</section>



<!-- ==========================================
     HOW IT WORKS
========================================== -->

<section
    class="section"
    id="how-it-works"
>

    <div class="container">


        <div class="section-header">


            <div class="section-label">
                Simple Process
            </div>


            <h2>
                How EMI CREDITS works
            </h2>


            <p>
                From application to card management, everything stays simple and digital.
            </p>


        </div>



        <div class="step-grid">


            <div class="step">


                <div class="step-number">
                    01
                </div>


                <h3>
                    Create Account
                </h3>


                <p>

                    Sign up and start your application
                    with your basic information.

                </p>


            </div>



            <div class="step">


                <div class="step-number">
                    02
                </div>


                <h3>
                    Complete Details
                </h3>


                <p>

                    Submit your personal, KYC and
                    employment information.

                </p>


            </div>



            <div class="step">


                <div class="step-number">
                    03
                </div>


                <h3>
                    Unlock Your Card
                </h3>


                <p>

                    Complete the required payment
                    and access your personalised card.

                </p>


            </div>


        </div>

    </div>

</section>



<!-- ==========================================
     SMART EMI EXPERIENCE
========================================== -->

<section class="section smart-section">

    <div class="container">

        <div class="section-header">

            <div class="section-label">
                SMART EMI EXPERIENCE
            </div>

            <h2>
                One card. Simple digital finance.
            </h2>

            <p>
                Apply online, complete verification and
                manage your EMI card from one place.
            </p>

        </div>

        <div class="smart-grid">

            <div class="smart-card">

                <div class="smart-number">
                    01
                </div>

                <div class="smart-icon">🛍️</div>

                <h3>
                    Choose what you need
                </h3>

                <p>
                    Use your eligible EMI facility for
                    planned purchases.
                </p>

            </div>

            <div class="smart-card featured">

                <div class="smart-number">
                    02
                </div>

                <div class="smart-icon">0%</div>

                <h3>
                    Pay with 0% Interest
                </h3>

                <p>
                    Eligible Zero Cost EMI plans help
                    you spread the purchase into instalments.
                </p>

            </div>

            <div class="smart-card">

                <div class="smart-number">
                    03
                </div>

                <div class="smart-icon">📱</div>

                <h3>
                    Manage digitally
                </h3>

                <p>
                    Track your application, card and
                    payment information from your dashboard.
                </p>

            </div>

        </div>

    </div>

</section>


<!-- ==========================================
     TRUST STRIP
========================================== -->

<section class="trust-strip">

    <div class="container">

        <div class="trust-strip-inner">

            <div class="trust-item">
                <strong>0%</strong>
                <span>Interest on eligible Zero Cost EMI plans</span>
            </div>

            <div class="trust-divider"></div>

            <div class="trust-item">
                <strong>100%</strong>
                <span>Digital application journey</span>
            </div>

            <div class="trust-divider"></div>

            <div class="trust-item">
                <strong>1</strong>
                <span>Dashboard to manage your EMI journey</span>
            </div>

        </div>

    </div>

</section>


<div id="investor-contact" style="position:relative; top:-20px;"></div>

<!-- ==========================================
     CTA
========================================== -->

<section class="cta-section">

    <div class="container">


        <div class="cta">


            <h2>
                Ready to get started?
            </h2>


            <p>

                Apply online and begin your
                EMI CREDITS journey.

            </p>


            @auth

                <a
                    href="{{ route('client.dashboard') }}"
                    class="primary-btn"
                >
                    My Application →
                </a>

            @else

                <a
                    href="{{ route('register') }}"
                    class="primary-btn"
                >
                    Start Application →
                </a>

            @endauth


        </div>

    </div>

</section>



<!-- ==========================================
     EMI TERMS NOTE
========================================== -->

<div class="emi-terms-note">

    <div class="container">

        * Zero Cost EMI / 0% interest is subject to applicable products,
        plans, eligibility and terms.

    </div>

</div>


<!-- ==========================================
     FOOTER
========================================== -->

<footer class="site-footer">

    <div class="footer-container">

        {{-- =====================================================
             COMPANY
        ====================================================== --}}
        <div class="footer-column footer-company">

            <h3>EMI CREDITS</h3>

         <p class="footer-description">
    EMI CREDITS is a technology-driven financial services platform dedicated
    to delivering simple, transparent, and flexible financing solutions for
    individuals and businesses.<br><br>

    Our platform is designed to make access to structured EMI and financing
    solutions more convenient through a seamless digital experience. By
    combining technology, efficient processes, and customer-focused service,
    EMI CREDITS aims to simplify the financing journey from application and
    eligibility to approval and repayment.
</p>
        </div>


        {{-- =====================================================
             QUICK LINKS
        ====================================================== --}}
        <div class="footer-column">

            <h4>Quick Links</h4>

            <ul class="footer-links">
                
                <li>
                    <a href="https://loan.eduintx.shop/admin/login">
                        Admin
                    </a>
                </li>
                <li>
                    <a href="{{ route('client.dashboard') }}">
                        Home
                    </a>
                </li>

                <li>
                    <a href="{{ route('client.emi-card') }}">
                        EMI Card
                    </a>
                </li>

                <li>
                    <a href="{{ route('client.loans') }}">
                        Loans
                    </a>
                </li>

                <li>
                    <a href="{{ route('client.payments') }}">
                        Payments
                    </a>
                </li>

                <li>
                    <a href="{{ route('client.support.index') }}">
                        Support
                    </a>
                </li>

            </ul>

        </div>


        {{-- =====================================================
             CORPORATE OFFICE
        ====================================================== --}}
        <div class="footer-column footer-contact">

            <h4>Corporate Office</h4>

            {{-- ADDRESS --}}
            <div class="contact-item">

                <div class="contact-icon">
                    <svg viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="1.8">

                        <path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z"/>
                        <circle cx="12" cy="10" r="2.5"/>

                    </svg>
                </div>

                <div class="contact-content">

                    <span class="contact-label">
                        Registered Office
                    </span>

                    <p>
                        Hi-Tech Info Park,<br>
                        Phase-2, D-188/98,<br>
                        Koramangala,<br>
                        Bangalore – 560100
                    </p>

                </div>

            </div>


            {{-- EMAIL --}}
            <div class="contact-item">

                <div class="contact-icon">

                    <svg viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="1.8">

                        <rect x="3" y="5" width="18" height="14" rx="2"/>
                        <path d="m3 7 9 6 9-6"/>

                    </svg>

                </div>

                <div class="contact-content">

                    <span class="contact-label">
                        Email
                    </span>

                    <a href="mailto:info@nexfinserv.com">
                        info@emicredits.com
                    </a>

                    <a href="mailto:mail@nexfinserv.com">
                        mail@emicredits.com
                    </a>

                </div>

            </div>

        </div>


        {{-- =====================================================
             LEGAL
        ====================================================== --}}
        <div class="footer-column">

            <h4>Legal</h4>

            <ul class="footer-links">

                <li>
                    <a href="#">
                        Terms &amp; Conditions
                    </a>
                </li>

                <li>
                    <a href="#">
                        Privacy Policy
                    </a>
                </li>

                <li>
                    <a href="#">
                        Return Policy
                    </a>
                </li>

                <li>
                    <a href="#">
                        Refund Policy
                    </a>
                </li>

            </ul>

        </div>

    </div>


    {{-- =========================================================
         FOOTER BOTTOM
    ========================================================== --}}
    <div class="footer-bottom">

        <div class="footer-bottom-inner">

            <div class="footer-copyright">
                © {{ date('Y') }} EMI CREDITS.
                All rights reserved.
            </div>

            <div class="footer-category">
                Financial Services
            </div>

        </div>

    </div>

</footer>


<style>


        /* ============================================================
           LOAN PRODUCTS
        ============================================================ */

        .loan-products-section {
            background: linear-gradient(180deg, #fffffffff 0%, #0b0b0b 100%);
        }

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

        .loan-product-card {
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 28px;
            min-height: 315px;
            border-radius: 22px;
            background: #fffffffff;
            border: 1px solid #e1e9f3;
            box-shadow: 0 14px 38px rgba(0,0,0,.055);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .loan-product-card:hover {
            transform: translateY(-5px);
            border-color: #c9dced;
            box-shadow: 0 22px 48px rgba(0,0,0,.10);
        }

        .loan-product-card.featured {
            background: linear-gradient(145deg, #171717, #171717);
            border-color: #333333;
        }

        .loan-product-icon {
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            border-radius: 15px;
            background: #191919;
            color: #ffd21c;
            font-size: 21px;
        }

        .loan-product-card.featured .loan-product-icon {
            background: #191919;
        }

        .loan-product-content {
            flex: 1;
        }

        .loan-product-tag {
            display: inline-block;
            margin-bottom: 7px;
            color: #ffd21c;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 1.1px;
        }

        .loan-product-card h3 {
            margin: 0 0 9px;
            color: #ffffff;
            font-size: 20px;
            line-height: 1.2;
            letter-spacing: -.4px;
        }

        .loan-product-card p {
            margin: 0;
            color: #999999;
            font-size: 13px;
            line-height: 1.7;
        }

        .loan-product-points {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 17px;
        }

        .loan-product-points span {
            padding: 6px 8px;
            border-radius: 7px;
            background: #151515;
            border: 1px solid #2d2d2d;
            color: #999999;
            font-size: 9px;
            font-weight: 700;
        }

        .loan-product-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 22px;
            width: fit-content;
            padding: 10px 14px;
            border-radius: 9px;
            background: #ffd21c;
            color: #fffffffff;
            font-size: 11px;
            font-weight: 800;
            transition: .2s ease;
        }

        .loan-product-btn:hover {
            background: #e9b900;
            transform: translateY(-1px);
        }

        @media (max-width: 950px) {
            .loan-products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 650px) {
            .loan-products-section {
                padding-top: 55px;
                padding-bottom: 55px;
            }

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

            .loan-product-card {
                min-height: auto;
                padding: 25px;
            }

            .loan-product-card h3 {
                font-size: 19px;
            }

            .loan-product-btn {
                width: 100%;
            }
        }


        /* ============================================================
           INVESTORS
        ============================================================ */

        .investors-section {
            background: #101010;
        }

        .investor-card {
            position: relative;
            overflow: hidden;
            min-height: 390px;
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
            align-items: center;
            gap: 35px;
            padding: 58px 65px;
            border-radius: 30px;
            background:
                radial-gradient(circle at 82% 45%, rgba(42,139,255,.27), transparent 30%),
                linear-gradient(135deg, #080808, #111111 60%, #ffd21c);
            color: #fffffffff;
            box-shadow: 0 30px 70px rgba(0,0,0,.16);
        }

        .investor-card::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            right: -170px;
            top: -190px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.10);
        }

        .investor-content {
            position: relative;
            z-index: 2;
        }

        .investor-content .section-label {
            color: #ffd21c;
        }

        .investor-content h2 {
            max-width: 650px;
            margin: 0 0 15px;
            font-size: clamp(38px, 4.5vw, 55px);
            line-height: 1.08;
            letter-spacing: -2px;
        }

        .investor-content h2 span {
            display: block;
            color: #ffd21c;
        }

        .investor-content p {
            max-width: 590px;
            margin-bottom: 24px;
            color: #dddddd;
            font-size: 14px;
            line-height: 1.75;
        }

        .investor-points {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 26px;
        }

        .investor-points div {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 11px;
            border-radius: 10px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.12);
        }

        .investor-points strong {
            color: #ffd21c;
            font-size: 9px;
        }

        .investor-points span {
            color: #fffffffff;
            font-size: 9px;
            font-weight: 700;
        }

        .investor-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 18px;
            border-radius: 9px;
            background: #fffffffff;
            color: #ffd21c;
            font-size: 11px;
            font-weight: 900;
            transition: .2s ease;
        }

        .investor-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(0,0,0,.15);
        }

        .investor-visual {
            position: relative;
            min-height: 270px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .investor-panel {
            position: relative;
            z-index: 5;
            width: 235px;
            min-height: 210px;
            padding: 30px 25px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 25px;
            background: linear-gradient(145deg, #fffffffff, #e9e9e9);
            color: #080808;
            transform: rotate(-5deg);
            box-shadow: 0 30px 65px rgba(0,0,0,.22);
        }

        .investor-panel-icon {
            width: 43px;
            height: 43px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            border-radius: 12px;
            background: #191919;
            color: #ffd21c;
            font-size: 18px;
            font-weight: 900;
        }

        .investor-panel small {
            color: #999999;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 1.5px;
        }

        .investor-panel strong {
            margin: 5px 0 7px;
            color: #ffffff;
            font-size: 22px;
            line-height: 1.2;
        }

        .investor-panel span {
            color: #999999;
            font-size: 9px;
            line-height: 1.5;
        }

        .investor-orbit {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.14);
        }

        .investor-orbit-one {
            width: 260px;
            height: 260px;
        }

        .investor-orbit-two {
            width: 340px;
            height: 340px;
            border-color: rgba(255,210,28,.10);
        }

        @media (max-width: 800px) {
            .investor-card {
                grid-template-columns: 1fr;
                text-align: center;
                padding: 42px 28px;
            }

            .investor-content p {
                margin-left: auto;
                margin-right: auto;
            }

            .investor-points {
                justify-content: center;
            }

            .investor-btn {
                width: 100%;
            }

            .investor-visual {
                min-height: 240px;
            }
        }

        @media (max-width: 650px) {
            .investor-card {
                padding: 35px 22px;
                border-radius: 24px;
            }

            .investor-content h2 {
                font-size: 34px;
            }

            .investor-content p {
                font-size: 13px;
            }

            .investor-points {
                flex-direction: column;
                align-items: stretch;
            }

            .investor-points div {
                justify-content: center;
            }

            .investor-panel {
                width: 210px;
                min-height: 190px;
            }
        }


/* ============================================================
   EMI CREDITS — PROFESSIONAL FOOTER
   ============================================================ */

.site-footer {
    width: 100%;
    margin-top: 45px;

    background: #080808;
    color: #dddddd;

    text-align: left;
}


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

.footer-container {

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 52px 30px 48px;

    display: grid;

    grid-template-columns:
        1.35fr
        0.85fr
        1.45fr
        0.9fr;

    column-gap: 55px;

    row-gap: 35px;

    align-items: start;

}


/* ============================================================
   COLUMN
   ============================================================ */

.footer-column {

    min-width: 0;

    width: 100%;

    text-align: left;

}


/* ============================================================
   COMPANY
   ============================================================ */

.footer-company h3 {

    margin: 0 0 15px;

    color: #fffffffff;

    font-size: 23px;

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -0.3px;

}


.footer-description {

    max-width: 315px;

    margin: 0;

    color: #999999;

    font-size: 14px;

    line-height: 1.75;

    font-weight: 500;

    text-align: left;

}


/* ============================================================
   COLUMN HEADINGS
   ============================================================ */

.footer-column h4 {

    margin: 1px 0 18px;

    padding: 0;

    color: #fffffffff;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: 0.1px;

    text-align: left;

}


/* ============================================================
   LINKS
   ============================================================ */

.footer-links {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;

}


.footer-links li {

    margin: 0;

    padding: 0;

    width: 100%;

}


.footer-links a {

    display: inline-block;

    color: #999999;

    font-size: 13.5px;

    line-height: 1.5;

    font-weight: 500;

    text-decoration: none;

    text-align: left;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.footer-links a:hover {

    color: #fffffffff;

    transform: translateX(4px);

}


/* ============================================================
   CONTACT
   ============================================================ */

.footer-contact {

    max-width: 330px;

}


.contact-item {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 12px;

    margin: 0 0 21px;

}


.contact-item:last-child {

    margin-bottom: 0;

}


/* ============================================================
   CONTACT ICON
   ============================================================ */

.contact-icon {

    width: 31px;

    height: 31px;

    min-width: 31px;

    flex: 0 0 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 1px;

    border-radius: 8px;

    background: rgba(255, 210, 28, 0.16);

    color: #ffd21c;

}


.contact-icon svg {

    width: 17px;

    height: 17px;

    display: block;

}


/* ============================================================
   CONTACT CONTENT
   ============================================================ */

.contact-content {

    min-width: 0;

    flex: 1;

    text-align: left;

}


.contact-label {

    display: block;

    margin: 0 0 5px;

    color: #fffffffff;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}


.contact-content p {

    margin: 0;

    padding: 0;

    color: #999999;

    font-size: 13.5px;

    line-height: 1.7;

    font-weight: 500;

    text-align: left;

}


.contact-content a {

    display: block;

    width: fit-content;

    max-width: 100%;

    margin: 0 0 6px;

    padding: 0;

    color: #999999;

    font-size: 13.5px;

    line-height: 1.5;

    font-weight: 500;

    text-decoration: none;

    text-align: left;

    overflow-wrap: anywhere;

}


.contact-content a:last-child {

    margin-bottom: 0;

}


.contact-content a:hover {

    color: #fffffffff;

}


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

.footer-bottom {

    width: 100%;

    border-top: 1px solid rgba(255,255,255,0.09);

}


.footer-bottom-inner {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding: 18px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.footer-copyright,
.footer-category {

    color: #888888;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 500;

    text-align: left;

}


.footer-category {

    text-align: right;

}


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

@media (max-width: 950px) {

    .footer-container {

        grid-template-columns:
            1.2fr
            1fr;

        column-gap: 45px;

        row-gap: 38px;

        padding:
            45px 28px 42px;

    }


    .footer-description {

        max-width: 380px;

    }


    .footer-contact {

        max-width: 380px;

    }

}


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

@media (max-width: 600px) {

    .site-footer {

        margin-top: 35px;

    }


    .footer-container {

        width: 100%;

        grid-template-columns: 1fr;

        column-gap: 0;

        row-gap: 32px;

        padding:
            38px 22px 36px;

    }


    .footer-column {

        width: 100%;

        max-width: none;

        text-align: left;

    }


    .footer-company h3 {

        font-size: 22px;

        margin-bottom: 13px;

    }


    .footer-description {

        max-width: 100%;

        font-size: 14px;

        line-height: 1.7;

    }


    .footer-column h4 {

        margin-bottom: 15px;

        font-size: 15px;

    }


    .footer-links {

        gap: 10px;

        align-items: flex-start;

    }


    .footer-links a {

        font-size: 13.5px;

    }


    .footer-contact {

        max-width: none;

    }


    .contact-item {

        gap: 11px;

        margin-bottom: 19px;

    }


    .contact-icon {

        width: 30px;

        height: 30px;

        min-width: 30px;

        flex-basis: 30px;

    }


    .contact-content p,
    .contact-content a {

        font-size: 13.5px;

    }


    .footer-bottom-inner {

        padding:
            16px 22px 18px;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        gap: 6px;

    }


    .footer-copyright,
    .footer-category {

        width: 100%;

        text-align: left;

        font-size: 11.5px;

    }

}


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

@media (max-width: 380px) {

    .footer-container {

        padding-left: 18px;
        padding-right: 18px;

    }


    .footer-bottom-inner {

        padding-left: 18px;
        padding-right: 18px;

    }


    .footer-company h3 {

        font-size: 21px;

    }


    .footer-description,
    .footer-links a,
    .contact-content p,
    .contact-content a {

        font-size: 13px;

    }

}


/* ============================================================
   NEX FINSERV — BLACK & YELLOW FEATURED VISUAL SYSTEM
   Added without removing existing homepage functionality.
============================================================ */

:root {
    --nx-black: #080808;
    --nx-black-2: #111111;
    --nx-yellow: #ffd21c;
    --nx-yellow-2: #ffbf00;
    --nx-white: #fffffffff;
    --nx-muted: #999999;
    --nx-border: rgba(255,210,28,.18);
}

/* Smooth page feel */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Header */
header,
.site-header,
.main-header {
    transition: background .25s ease, box-shadow .25s ease;
}

header a:hover,
.site-header a:hover,
.main-header a:hover {
    color: var(--nx-yellow) !important;
}

/* Section headings */
.section-label {
    color: var(--nx-yellow) !important;
}

.section-header h2 {
    letter-spacing: -1.5px;
}

/* ============================================================
   FLOATING ACCENT MOTION
============================================================ */

@keyframes nxFloat {
    0%,100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-12px,0); }
}

@keyframes nxPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,210,28,.0); }
    50% { box-shadow: 0 0 0 12px rgba(255,210,28,.07); }
}

@keyframes nxShimmer {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@keyframes nxMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes nxGlow {
    0%,100% { opacity: .35; }
    50% { opacity: .85; }
}

/* ============================================================
   HERO ENHANCEMENT
============================================================ */

.hero,
.hero-section {
    position: relative;
    isolation: isolate;
}

.hero::before,
.hero-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -170px;
    top: 30px;
    border-radius: 50%;
    background: rgba(255,210,28,.08);
    filter: blur(2px);
    z-index: -1;
    animation: nxFloat 5s ease-in-out infinite;
}

.hero::after,
.hero-section::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    left: -100px;
    bottom: -70px;
    border: 1px solid rgba(255,210,28,.13);
    border-radius: 50%;
    z-index: -1;
    animation: nxGlow 4s ease-in-out infinite;
}

/* Yellow premium buttons */
.btn-primary,
.primary-btn,
.hero .btn,
.hero-section .btn,
.cta-btn,
button[type="submit"] {
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn-primary:hover,
.primary-btn:hover,
.hero .btn:hover,
.hero-section .btn:hover,
.cta-btn:hover {
    background: var(--nx-yellow) !important;
    color: #080808 !important;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(255,210,28,.22);
}

/* ============================================================
   BLACK/YELLOW LOAN SECTION
============================================================ */

.loan-products-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(255,210,28,.08), transparent 26%),
        radial-gradient(circle at 90% 85%, rgba(255,210,28,.06), transparent 24%),
        #080808 !important;
}

.loan-products-section .section-header h2 {
    color: #ffffff !important;
}

.loan-products-section .section-header p {
    color: #999 !important;
}

.loan-products-section::before {
    content: "NEX";
    position: absolute;
    right: -40px;
    top: 40px;
    color: rgba(255,210,28,.025);
    font-size: 170px;
    font-weight: 1000;
    letter-spacing: -12px;
    pointer-events: none;
}

.loan-products-grid {
    position: relative;
    z-index: 2;
}

.loan-product-card {
    background: linear-gradient(145deg, #151515, #0d0d0d) !important;
    border: 1px solid #272727 !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.25) !important;
}

.loan-product-card:hover {
    border-color: rgba(255,210,28,.65) !important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.4),
        0 0 0 1px rgba(255,210,28,.08) !important;
}

.loan-product-card.featured {
    background:
        linear-gradient(145deg, #1b1a12, #0e0e0e) !important;
    border-color: rgba(255,210,28,.42) !important;
}

.loan-product-card.featured::before {
    content: "POPULAR";
    position: absolute;
    top: 14px;
    right: -34px;
    width: 120px;
    padding: 5px 0;
    transform: rotate(45deg);
    text-align: center;
    background: var(--nx-yellow);
    color: #080808;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: 1px;
}

.loan-product-icon {
    background: rgba(255,210,28,.10) !important;
    color: var(--nx-yellow) !important;
    border: 1px solid rgba(255,210,28,.16);
    animation: nxPulse 3s ease-in-out infinite;
}

.loan-product-card h3 {
    color: #ffffff !important;
}

.loan-product-card p {
    color: #999 !important;
}

.loan-product-tag {
    color: var(--nx-yellow) !important;
}

.loan-product-points span {
    background: #191919 !important;
    border-color: #292929 !important;
    color: #aaa !important;
}

.loan-product-btn {
    background: var(--nx-yellow) !important;
    color: #080808 !important;
}

.loan-product-btn:hover {
    background: #ffffff !important;
    color: #080808 !important;
}

/* ============================================================
   INVESTOR SECTION
============================================================ */

.investors-section {
    position: relative;
    overflow: hidden;
    background: #f4f4f2 !important;
}

.investor-card {
    background:
        radial-gradient(circle at 80% 30%, rgba(255,210,28,.19), transparent 25%),
        linear-gradient(135deg, #080808 0%, #111111 55%, #171717 100%) !important;
    border: 1px solid rgba(255,210,28,.18);
}

.investor-content .section-label {
    color: var(--nx-yellow) !important;
}

.investor-content h2 span {
    color: var(--nx-yellow) !important;
}

.investor-panel {
    background: linear-gradient(145deg, #ffffff, #f8f3d7) !important;
    border: 2px solid rgba(255,210,28,.35);
}

.investor-panel-icon {
    background: var(--nx-yellow) !important;
    color: #080808 !important;
}

.investor-btn {
    background: var(--nx-yellow) !important;
    color: #080808 !important;
}

.investor-btn:hover {
    background: #ffffff !important;
    color: #080808 !important;
}

.investor-orbit {
    border-color: rgba(255,210,28,.18) !important;
    animation: nxFloat 6s ease-in-out infinite;
}

/* ============================================================
   BLACK FEATURE STRIP
============================================================ */

.nx-feature-strip {
    position: relative;
    overflow: hidden;
    background: var(--nx-yellow);
    color: #080808;
    padding: 12px 0;
    white-space: nowrap;
}

.nx-feature-track {
    width: max-content;
    display: flex;
    animation: nxMarquee 24s linear infinite;
}

.nx-feature-track span {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-right: 55px;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.nx-feature-track i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #080808;
}

/* ============================================================
   CARDS / BENEFITS — subtle hover
============================================================ */

.benefit-card,
.benefits-card,
.feature-card,
.step-card {
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.benefit-card:hover,
.benefits-card:hover,
.feature-card:hover,
.step-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,210,28,.35) !important;
}

/* ============================================================
   TRUST / STAT ELEMENTS
============================================================ */

.trust-strip,
.trust-bar {
    position: relative;
}

.trust-strip strong,
.trust-bar strong {
    color: #111;
}

/* ============================================================
   CTA — premium black/yellow finish
============================================================ */

.cta,
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta::before,
.cta-section::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -100px;
    top: -150px;
    border-radius: 50%;
    background: rgba(255,210,28,.10);
    animation: nxFloat 5s ease-in-out infinite;
}

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

footer {
    position: relative;
}

footer a {
    transition: color .2s ease, transform .2s ease;
}

footer a:hover {
    color: var(--nx-yellow) !important;
}

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

@media (max-width: 650px) {

    .hero::before,
    .hero-section::before {
        width: 280px;
        height: 280px;
        right: -150px;
    }

    .loan-products-section::before {
        font-size: 100px;
        right: -25px;
    }

    .nx-feature-track span {
        margin-right: 35px;
        font-size: 8px;
    }

}

/* Respect reduced-motion accessibility preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* ============================================================
   FULL PAGE BLACK + YELLOW FINTECH THEME
   Applies the visual language across the COMPLETE homepage.
============================================================ */

:root {
    --nx-black: #070707;
    --nx-black-2: #101010;
    --nx-yellow: #ffd21c;
    --nx-yellow-dark: #e9b900;
    --nx-white: #fffffffff;
    --nx-text: #f3f3f3;
    --nx-muted: #999999;
    --nx-line: #292929;
}

/* Main page */
body {
    background: var(--nx-black) !important;
    color: var(--nx-text);
}

/* Header / navigation */
header,
.site-header,
.main-header {
    background: rgba(7,7,7,.96) !important;
    border-bottom: 1px solid rgba(255,210,28,.12) !important;
    backdrop-filter: blur(14px);
}

header a,
.site-header a,
.main-header a {
    color: #d7d7d7 !important;
}

header a:hover,
.site-header a:hover,
.main-header a:hover {
    color: var(--nx-yellow) !important;
}

/* Generic white sections become dark */
section,
.section {
    color: var(--nx-text);
}

/* Common section backgrounds */
.benefits-section,
.benefits,
.how-it-works-section,
.how-it-works,
.smart-emi-section,
.smart-emi,
.trust-section,
.trust-strip-section {
    background: #0b0b0b !important;
}

.zero-cost-section,
.zero-cost-emi,
.offer-section {
    background:
        radial-gradient(circle at 10% 50%, rgba(255,210,28,.08), transparent 28%),
        #101010 !important;
}

/* Section headings */
.section-header h2,
.section-title,
.section-heading,
.benefits-section h2,
.how-it-works-section h2,
.smart-emi-section h2 {
    color: #ffffff !important;
}

.section-header p,
.section-description,
.benefits-section p,
.how-it-works-section p,
.smart-emi-section p {
    color: #999 !important;
}

.section-label {
    color: var(--nx-yellow) !important;
}

/* ============================================================
   HERO — BLACK / YELLOW
============================================================ */

.hero,
.hero-section {
    background:
        radial-gradient(circle at 78% 38%, rgba(255,210,28,.13), transparent 27%),
        radial-gradient(circle at 12% 90%, rgba(255,210,28,.06), transparent 25%),
        #070707 !important;
    color: #ffffff !important;
}

.hero h1,
.hero-section h1 {
    color: #ffffff !important;
}

.hero h1 span,
.hero-section h1 span {
    color: var(--nx-yellow) !important;
}

.hero p,
.hero-section p {
    color: #a7a7a7 !important;
}

/* Yellow accents for primary actions */
.hero .btn,
.hero-section .btn,
.btn-primary,
.primary-btn,
.cta-btn {
    background: var(--nx-yellow) !important;
    color: #070707 !important;
    border-color: var(--nx-yellow) !important;
}

.hero .btn:hover,
.hero-section .btn:hover,
.btn-primary:hover,
.primary-btn:hover,
.cta-btn:hover {
    background: #ffffff !important;
    color: #070707 !important;
}

/* Secondary buttons */
.hero .btn-secondary,
.hero-section .btn-secondary,
.btn-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

.hero .btn-secondary:hover,
.hero-section .btn-secondary:hover,
.btn-secondary:hover {
    border-color: var(--nx-yellow) !important;
    color: var(--nx-yellow) !important;
}

/* ============================================================
   EMI CARD / HERO VISUAL
============================================================ */

.emi-card,
.card-visual,
.hero-card,
.credit-card,
.emi-card-visual {
    background:
        linear-gradient(135deg, #1a1a1a, #090909) !important;
    border-color: rgba(255,210,28,.28) !important;
    box-shadow:
        0 30px 70px rgba(0,0,0,.45),
        0 0 45px rgba(255,210,28,.06) !important;
}

.emi-card *,
.card-visual *,
.hero-card *,
.credit-card * {
    color: inherit;
}

/* ============================================================
   TRUST BAR
============================================================ */

.trust-bar,
.trust-strip {
    background: #111 !important;
    border-top: 1px solid #242424 !important;
    border-bottom: 1px solid #242424 !important;
}

.trust-bar strong,
.trust-strip strong {
    color: var(--nx-yellow) !important;
}

.trust-bar span,
.trust-strip span,
.trust-bar p,
.trust-strip p {
    color: #999 !important;
}

/* ============================================================
   ZERO COST EMI / OFFER CARDS
============================================================ */

.zero-cost-section .card,
.zero-cost-section .feature,
.zero-cost-emi .card,
.offer-section .card,
.offer-card {
    background: #121212 !important;
    border-color: #292929 !important;
    color: #ffffff !important;
}

.zero-cost-section h3,
.zero-cost-emi h3,
.offer-section h3,
.offer-card h3 {
    color: #ffffff !important;
}

.zero-cost-section p,
.zero-cost-emi p,
.offer-section p,
.offer-card p {
    color: #999 !important;
}

.zero-cost-section strong,
.zero-cost-emi strong,
.offer-section strong,
.offer-card strong {
    color: var(--nx-yellow) !important;
}

/* ============================================================
   BENEFITS
============================================================ */

.benefit-card,
.benefits-card,
.feature-card {
    background: linear-gradient(145deg, #151515, #0d0d0d) !important;
    border: 1px solid #282828 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}

.benefit-card:hover,
.benefits-card:hover,
.feature-card:hover {
    border-color: rgba(255,210,28,.55) !important;
    box-shadow:
        0 22px 48px rgba(0,0,0,.35),
        0 0 30px rgba(255,210,28,.05) !important;
}

.benefit-card h3,
.benefits-card h3,
.feature-card h3 {
    color: #ffffff !important;
}

.benefit-card p,
.benefits-card p,
.feature-card p {
    color: #999999 !important;
}

.benefit-icon,
.feature-icon {
    background: rgba(255,210,28,.10) !important;
    color: var(--nx-yellow) !important;
    border-color: rgba(255,210,28,.18) !important;
}

/* ============================================================
   HOW IT WORKS
============================================================ */

.step-card,
.how-it-works-card,
.process-card {
    background: #121212 !important;
    border: 1px solid #292929 !important;
    color: #ffffff !important;
}

.step-card:hover,
.how-it-works-card:hover,
.process-card:hover {
    border-color: rgba(255,210,28,.45) !important;
}

.step-number,
.process-number {
    background: var(--nx-yellow) !important;
    color: #070707 !important;
}

.step-card h3,
.how-it-works-card h3,
.process-card h3 {
    color: #ffffff !important;
}

.step-card p,
.how-it-works-card p,
.process-card p {
    color: #999 !important;
}

/* ============================================================
   SMART EMI
============================================================ */

.smart-emi-section .panel,
.smart-emi-section .card,
.smart-emi-card,
.smart-card {
    background: #111 !important;
    border-color: #292929 !important;
    color: #ffffff !important;
}

.smart-emi-section h3,
.smart-emi-card h3,
.smart-card h3 {
    color: #ffffff !important;
}

.smart-emi-section p,
.smart-emi-card p,
.smart-card p {
    color: #999 !important;
}

.smart-emi-section strong,
.smart-emi-card strong,
.smart-card strong {
    color: var(--nx-yellow) !important;
}

/* ============================================================
   LOANS
============================================================ */

.loan-products-section {
    background:
        radial-gradient(circle at 8% 15%, rgba(255,210,28,.08), transparent 25%),
        radial-gradient(circle at 92% 85%, rgba(255,210,28,.05), transparent 25%),
        #080808 !important;
}

/* ============================================================
   INVESTORS
============================================================ */

.investors-section {
    background: #0b0b0b !important;
}

/* ============================================================
   CTA
============================================================ */

.cta,
.cta-section {
    background:
        radial-gradient(circle at 80% 40%, rgba(255,210,28,.14), transparent 28%),
        #0a0a0a !important;
    color: #ffffff !important;
}

.cta h2,
.cta-section h2 {
    color: #ffffff !important;
}

.cta p,
.cta-section p {
    color: #999 !important;
}

.cta .btn,
.cta-section .btn {
    background: var(--nx-yellow) !important;
    color: #070707 !important;
}

/* ============================================================
   TERMS / DISCLAIMER
============================================================ */

.terms-note,
.disclaimer,
.terms-section {
    background: #080808 !important;
    color: #777 !important;
    border-color: #222 !important;
}

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

footer {
    background: #050505 !important;
    color: #aaa !important;
    border-top: 1px solid #222 !important;
}

footer h3,
footer h4,
footer strong {
    color: #ffffff !important;
}

footer p,
footer span {
    color: #777 !important;
}

footer a {
    color: #aaa !important;
}

footer a:hover {
    color: var(--nx-yellow) !important;
}

/* ============================================================
   GLOBAL YELLOW ACCENTS
============================================================ */

a:hover {
    transition: color .2s ease;
}

::selection {
    background: var(--nx-yellow);
    color: #070707;
}

/* Inputs if any */
input,
select,
textarea {
    background: #111 !important;
    color: #ffffff !important;
    border-color: #303030 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--nx-yellow) !important;
    box-shadow: 0 0 0 3px rgba(255,210,28,.08) !important;
}

label {
    color: #bbb !important;
}

/* ============================================================
   EXTRA MOTION
============================================================ */

@keyframes nxYellowGlow {
    0%,100% { box-shadow: 0 0 0 rgba(255,210,28,0); }
    50% { box-shadow: 0 0 35px rgba(255,210,28,.08); }
}

.hero .emi-card,
.hero-section .emi-card,
.hero-card {
    animation: nxYellowGlow 4s ease-in-out infinite;
}

/* Keep motion elegant on mobile */
@media (max-width: 650px) {
    .hero,
    .hero-section {
        background:
            radial-gradient(circle at 90% 20%, rgba(255,210,28,.10), transparent 32%),
            #070707 !important;
    }
}

</style>



<!-- ==========================================
     MOBILE MENU JAVASCRIPT
========================================== -->

<script>

    const mobileMenuBtn =
        document.getElementById('mobileMenuBtn');

    const navLinks =
        document.getElementById('navLinks');


    mobileMenuBtn.addEventListener('click', function () {

        navLinks.classList.toggle('active');


        const isOpen =
            navLinks.classList.contains('active');


        mobileMenuBtn.setAttribute(
            'aria-expanded',
            isOpen
        );


        if (isOpen) {

            mobileMenuBtn.innerHTML = '✕';

        } else {

            mobileMenuBtn.innerHTML = '☰';

        }

    });


    /*
     * Close menu after clicking a link
     */

    document
        .querySelectorAll('.nav-links a')
        .forEach(function (link) {

            link.addEventListener(
                'click',
                function () {

                    navLinks.classList.remove(
                        'active'
                    );

                    mobileMenuBtn.innerHTML = '☰';

                    mobileMenuBtn.setAttribute(
                        'aria-expanded',
                        'false'
                    );

                }
            );

        });

</script>


</body>
</html>