:root {
  --navy: #0d3119;
  --navy2: #0d3119;
  --mint: #b5e544;
  --paper: #f3f7fa;
  --ink: #102f4d;
  --muted: #647b8f;
  --line: #cbd8e2;

  /* Is section ke green tokens (screenshot ke mutabiq) */
  --elig-bg: #f4f8f1;        /* section background */
  --elig-card: #fcfffb;      /* card background */
  --elig-border: #dfe8dc;    /* card border */
  --elig-primary: #1f4d2b;   /* heading, eyebrow, icons */
  --elig-muted: #5f6f62;     /* list text */
  --elig-shadow: rgba(18, 56, 30, .32);
}
        * {
        box-sizing: border-box
        }

        html {
        scroll-behavior: smooth
        }

        body {
        margin: 0;
        background: var(--paper);
        color: var(--ink);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px
        }

        .shell {
        width: min(1120px, calc(100% - 40px));
        margin: auto
        }

        .topbar {
        background: #072C15;
        color: #fff;
        padding: 10px 0;
        font-size: 12px
        }

        .topbar .shell,
        .nav {
        display: flex;
        align-items: center;
        justify-content: space-between
        }

        .help {
        text-align: right;
        font-size: 11px;
        line-height: 1.5
        }

        .nav {
        height: 76px
        }

        .brand {
        display: flex;
        gap: 12px;
        align-items: center;
        color: var(--navy);
        text-decoration: none
        }

        .brand-mark {
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        color: #fff;
        background: #087135;
        border: 2px solid #d7af45;
        border-radius: 4px;
        font-size: 15px
        }

        .brand-logo {
        width: 43px;
        height: 43px;
        display: block;
        object-fit: contain;
        border-radius: 4px
        }

        .brand small {
        display: block;
        font-size: 9px;
        letter-spacing: .2em
        }

        .brand strong {
        display: block;
        font: 700 18px Georgia;
        margin-top: 2px
        }

        .apply-top,
        .primary,
        .submit-btn {
        border: 0;
        background: var(--navy);
        color: #fff;
        text-decoration: none;
        padding: 14px 25px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .17em
        }

        .hero {
        position: relative;
        min-height: 585px;
        overflow: hidden;
        color: #fff;
        background: radial-gradient(circle at 78% 40%, #072c15, transparent 38%), linear-gradient(115deg, #072C15, #072C15);
        }

        .hero.hero-photo {
    background: linear-gradient(180deg, #0d3119, #0b421eab), var(--hero-image) center / cover no-repeat;
        }

        .stars {
        position: absolute;
        inset: 0;
        opacity: .18;
        background-image: radial-gradient(circle, #fff 1px, transparent 1.4px);
        background-size: 74px 72px
        }

        .hero-content {
        position: relative;
        text-align: center;
        padding: 92px 0 60px
        }

        .eyebrow {
        margin: 0 0 20px;
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .28em
        }

        .eyebrow.box {
        display: inline-block;
        border: 1px solid rgba(102, 218, 215, .4);
        padding: 7px 14px;
        color: #d2eeee
        }

        .hero h1,
        .section-title,
        .leadership h2 {
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 400
        }

        .hero h1 {
        font-size: 69px;
        line-height: .95;
        margin: 20px 0 26px
        }

        .hero h1 em,
        .leadership em {
        color: var(--mint);
        font-weight: 400
        }

        .hero-copy {
        max-width: 650px;
        margin: auto;
        font-size: 15px;
        line-height: 1.7;
        color: #dce8ed
        }

        .hero-copy span {
        color: #b5e544
        }

        .hero-actions {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 30px
        }

        .primary {
        background: var(--mint);
        color: var(--navy)
        }

        .learn {
        padding: 14px 10px;
        color: white;
        text-decoration: none;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .15em
        }

        .stats {
        width: min(620px, 88%);
        margin: 55px auto 0;
        border-top: 1px solid rgba(255, 255, 255, .18);
        display: grid;
        grid-template-columns: repeat(3, 1fr)
        }

        .stats div {
        padding: 22px 10px
        }

        .stats div+div {
        border-left: 1px solid rgba(255, 255, 255, .18)
        }

        .stats strong {
        display: block;
        color: #65cec9;
        font: 400 34px Georgia
        }

        .stats small {
        font-size: 9px;
        letter-spacing: .26em
        }

        .trust {
        padding: 84px 0 94px
        }

        .section-title {
        text-align: center;
        font-size: 45px;
        margin: 0
        }

        .section-title em {
        font-weight: 400
        }

        .features {
        margin-top: 62px;
        display: grid;
        grid-template-columns: repeat(4, 1fr)
        }

        .feature {
        padding: 5px 30px 15px;
        border-right: 1px solid var(--line)
        }

        .feature:last-child {
        border: 0
        }

        .icon {
        width: 30px;
        height: 30px;
        color: var(--navy);
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round
        }

        .feature .number {
        display: block;
        margin: 18px 0 12px;
        color: #31556f;
        font-size: 10px;
        letter-spacing: .15em
        }

        .feature h3 {
        margin: 0 0 10px;
        font: 400 21px Georgia
        }

        .feature p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55
        }

        .leadership {
        padding: 85px 0 94px;
        background: var(--navy);
        color: #fff
        }

        .leadership .eyebrow {
        text-align: left;
        color: var(--mint)
        }

        .leadership h2 {
        font-size: 46px;
        line-height: 1;
        margin: 0 0 48px
        }

        .leaders {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 45px
        }

        .portrait {
        height: 420px;
        background: #030607;
        position: relative;
        overflow: hidden
        }

        .role {
        color: var(--mint);
        font-size: 10px;
        letter-spacing: .2em;
        margin: 16px 0 7px
        }

        .leaders h3 {
        font: 400 21px Georgia;
        margin: 0 0 12px
        }

        .leaders blockquote {
        margin: 0;
        border-left: 2px solid var(--mint);
        padding-left: 15px;
        color: #dae6eb;
        font: italic 15px/1.6 Georgia
        }

        * PIN verification card */ .pin-card {
        width: min(850px, 100%);
        padding: 42px 44px 35px;
        }

        .pin-heading {
        display: flex;
        margin-bottom: 20px;
        gap: 20px;
        flex-direction: column;
        /* align-items: flex-start; */
        /* justify-content: space-between; */
        /* margin-bottom: 27px; */
        }

        .pin-heading-left {
        display: flex;
        align-items: center;
        gap: 25px;
        }

        .pin-heading-icon {
        color: #11527a;
        }

        .pin-heading-icon .icon {
        width: 34px;
        height: 34px;
        }

        .pin-heading h3 {
        margin: 0 0 7px;
        color: #052b4c;
        font: 700 28px Georgia, serif;
        }

        .pin-heading p {
        margin: 5px 0;
        color: #274967;
        font: 15px Georgia, serif;
        }

        .pin-heading strong {
        color: #0d4b72;
        font: 700 21px Georgia, serif;
        }

        .pin-tax-box {
        display: flex;
        align-items: flex-start;
        gap: 13px;
        padding: 19px 20px;
        border: 2px solid #cbd8e2;
        border-radius: 14px;
        color: #103d5d;
        }

        .pin-tax-icon {
        flex: 0 0 auto;
        padding-top: 1px;
        color: #14567d;
        }

        .pin-tax-icon .icon {
        width: 22px;
        height: 22px;
        }

        .pin-tax-content strong {
        display: block;
        margin-bottom: 7px;
        color: #082f51;
        font-size: 14px;
        }

        .pin-tax-content p {
        margin: 5px 0;
        font: 14px/1.6 Georgia, serif;
        }

        .pin-tax-content .pin-urdu {
        text-align: right;
        }

        .pin-label-row {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        margin: 31px 0 10px;
        color: #092f51;
        }

        .pin-label-row label {
        font-size: 14px;
        font-weight: 700;
        }

        .pin-label-row span {
        font: 13px Georgia, serif;
        }

        .pin-inputs {
        width: min(360px, 100%);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin: 0 auto;
        }

        .pin-inputs .pin-digit {
        height: 80px;
        padding: 0;
        border: 2px solid #cbd7e1;
        border-radius: 5px;
        background: #fff;
        color: #0b3455;
        outline: 0;
        text-align: center;
        font-size: 32px;
        font-weight: 700;
        }

        .pin-inputs .pin-digit:focus {
        border-color: #4fc7c1;
        box-shadow: 0 0 0 2px #65a7d4;
        }

        .pin-security-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 25px;
        padding: 14px 15px;
        border-radius: 4px;
        color: #1d4766;
        }

        .pin-security-note .icon {
        width: 18px;
        height: 18px;
        }

        .pin-security-note p {
        margin: 0;
        font: 13px/1.65 Georgia, serif;
        }

        .pin-security-note span {
        display: block;
        text-align: right;
        }

        .pin-actions {
        margin-top: 35px;
        padding-top: 27px;
        }

        .pin-actions .back,
        .pin-actions .pin-submit {
        height: 55px;
        font-size: 18px;
        font-weight: 700;
        width: 100%;
        }

        .pin-submit {
        background: #0d3119;
        color: #fff;
        border-radius: 12px;
        box-shadow: 0 12px 25px rgba(8, 43, 73, 0.12);
        }

        @media (max-width: 720px) {
        .pin-card {
            padding: 28px 19px 24px;
        }

        .pin-heading-left {
            gap: 14px;
        }

        .pin-heading h3 {
            font-size: 23px;
        }

        .pin-heading strong {
            font-size: 17px;
        }

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

        .verified {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 35px;
        min-height: 82px;
        padding: 18px;
        background: #e9f0f5;
        color: var(--navy);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .1em
        }

        .verified span {
        display: flex;
        align-items: center;
        gap: 7px
        }

        .verified svg {
        width: 16px;
        height: 16px
        }

        .application {
        padding: 83px 0
        }

        .application .section-title {
        font-size: 45px
        }

        .subcopy {
        text-align: center;
        color: var(--muted);
        font-size: 14px;
        margin: 12px 0 38px
        }

        .stepper {
        width: min(720px, 100%);
        margin: 0 auto 34px;
        display: grid;
        grid-template-columns: repeat(6, 1fr)
        }

        .step {
        text-align: center;
        position: relative;
        color: #61798d
        }

        .step.active .icon {
        color: white !important;
        }

        .step:not(:last-child):after {
        content: "";
        position: absolute;
        height: 1px;
        background: #b9c9d5;
        left: 62%;
        width: 76%;
        top: 23px
        }

        .step-circle {
        position: relative;
        z-index: 1;
        width: 47px;
        height: 47px;
        margin: 0 auto 10px;
        border: 1px solid #b8c8d4;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #f8fafc
        }

        .step-circle svg {
        width: 21px;
        height: 21px
        }

        .step.active .step-circle,
        .step.done .step-circle {
        background: #072C15;
        color: #fff;
        border-color: #072C15;
        box-shadow: 0 4px 12px rgba(7, 43, 70, .2)
        }
        .step.done .icon{
            color: white !important;
        }
        .step small {
        display: block;
        font-size: 11px;
        font-weight: 700
        }

        .step span {
        display: block;
        font: 12px Georgia;
        margin-top: 4px
        }

        .loan-card {
        width: min(896px, 100%);
        margin: auto;
        padding: 32px 36px 27px;
        background: #fdfdfd;
        border: 1px solid #c7d5df;
        box-shadow: 0 22px 40px rgba(8, 42, 68, .17)
        }

        .form-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 22px;
        gap: 16px
        }

        .form-head h3 {
        font: 700 21px Georgia;
        margin: 0
        }

        .form-head p {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 12px
        }

        .form-head strong {
        font: 700 17px Georgia
        }

        .fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 17px 18px
        }

        .fields label.full {
        grid-column: 1/-1
        }

        .fields label>span {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 8px
        }

        .fields b {
        color: #d64a4a;
        margin-left: 4px
        }

        .fields i {
        margin-left: auto;
        font: 400 11px Georgia
        }

        input,
        select {
        width: 100%;
        height: 45px;
        border: 1px solid #d1dbcf;
        border-radius: calc(.75rem - 2px);
        height: calc(.25rem * 9);
        /* background: #eef3f6; */
        color: #213e55;
        padding: 0 13px;
        font-size: 16px;
        -webkit-tap-highlight-color: transparent;
        appearance: none;
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        outline: 1px solid transparent;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
        }

        input:focus,
        select:focus {
        outline-color: #58bbb7;
        background: #f8fbfc
        }

        .form-actions {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #d5e0e7
        }

        .back,
        .submit-btn {
        height: 43px;
        border: 0;
        padding: 0 20px
        }

        .back {
        background: #f3f9f1;
        border: 1px solid #d1dbcf;
        color: #0d3119;
        font-size: 12px;
        cursor: pointer;
        font-weight: 900;
        border-radius: 8px;
        }

        .panel {
        display: none
        }

        .panel.active {
        display: block;
        border: 1px solid #d1dbcf;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        background: #fdfdfd;
        }

        .otp-note {
        margin: 14px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5
        }

        .otp-dev {
        margin: 12px 0 0;
        color: #087135;
        font-size: 14px;
        font-weight: 700
        }

        .resend {
        margin-top: 14px;
        border: 0;
        background: transparent;
        color: #072C15;
        font-weight: 700;
        cursor: pointer;
        padding: 0
        }

        .form-error {
        color: #b42318;
        background: #fdecec;
        border: 1px solid #f3c1c1;
        padding: 12px 14px;
        font-size: 13px;
        margin: 0 0 16px
        }

        .whatsapp-float {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 25px;
        right: 25px;
        background-color: #25D366;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 9999;
        text-decoration: none;
        transition: transform 0.3s ease;
        }

        .whatsapp-float:hover {
        transform: scale(1.1);
        background-color: #20ba5a;
        }

        @media (max-width: 768px) {
        .whatsapp-float {
            width: 54px;
            height: 54px;
            bottom: 18px;
            right: 18px;
        }
        }

        .form-error p {
        margin: 0
        }

        .form-error p+p {
        margin-top: 6px
        }

        .review {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 8px 16px;
        font-size: 14px
        }

        .review dt {
        color: var(--muted)
        }

        .review dd {
        margin: 0;
        font-weight: 700
        }

        .success {
        text-align: center;
        padding: 12px 8px 8px
        }

        .success h3 {
        font: 400 32px Georgia;
        margin: 0 0 10px
        }

        .success strong {
        color: #087135;
        font-size: 20px
        }

        .back:disabled {
        opacity: .5
        }

        .submit-btn {
        cursor: pointer;
        font-size: 11px;
        letter-spacing: .05em
        }

        .copyright {
        text-align: center;
        color: #708394;
        font-size: 11px;
        margin-top: 18px
        }

        footer {
        padding: 58px 0 24px;
        background: var(--navy);
        border-top: 3px solid var(--mint);
        color: #dce8ed
        }

        .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 65px
        }

        .footer-grid h4 {
        color: var(--mint);
        font-size: 11px;
        letter-spacing: .2em;
        margin: 0
        }

        .footer-grid p {
        font: 13px/1.8 Georgia
        }

        .footer-brand {
        color: #fff
        }

        .footer-bottom {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        border-top: 1px solid rgba(255, 255, 255, .14);
        margin-top: 38px;
        padding-top: 22px;
        font-size: 9px;
        letter-spacing: .1em
        }

        @media(max-width:720px) {
        body {
            font-size: 15px
        }

        .shell {
            width: min(100% - 28px, 560px)
        }

        .topbar {
            font-size: 10px
        }

        .help {
            display: none
        }

        .nav {
            height: 66px
        }

        .brand strong {
            font-size: 16px
        }

        .apply-top {
            padding: 11px 15px;
            font-size: 9px
        }

        .hero {
            min-height: 540px
        }

        .hero-content {
            padding-top: 75px
        }

        .hero h1 {
            font-size: 47px
        }

        .hero-copy {
            font-size: 14px
        }

        .stats {
            width: 100%;
            margin-top: 44px
        }

        .stats strong {
            font-size: 25px
        }

        .stats small {
            font-size: 8px
        }

        .trust {
            padding: 62px 0
        }

        .section-title,
        .application .section-title {
            font-size: 35px
        }

        .features {
            grid-template-columns: 1fr 1fr;
            margin-top: 42px
        }

        .feature {
            padding: 25px 22px;
            border-bottom: 1px solid var(--line)
        }

        .feature:nth-child(2) {
            border-right: 0
        }

        .feature:nth-child(3),
        .feature:nth-child(4) {
            border-bottom: 0
        }

        .feature h3 {
            font-size: 19px
        }

        .feature p {
            font-size: 12px
        }

        .leadership {
            padding: 62px 0
        }

        .leadership h2 {
            font-size: 36px
        }

        .leaders {
            grid-template-columns: 1fr
        }

        .portrait {
            height: 380px
        }

        .verified {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            font-size: 9px
        }

        .application {
            padding: 62px 0
        }

        .step-circle {
            width: 40px;
            height: 40px
        }

        .step:not(:last-child):after {
            top: 20px
        }

        .step span {
            font-size: 10px
        }

        .loan-card {
            padding: 25px 19px
        }

        .fields {
            grid-template-columns: 1fr
        }

        .fields label.full {
            grid-column: auto
        }

        .review {
            grid-template-columns: 1fr
        }

        .form-head h3 {
            font-size: 19px
        }

        .form-actions button {
            padding: 0 12px
        }

        .footer-grid {
            grid-template-columns: 1fr;
            gap: 32px
        }

        .footer-bottom {
            flex-direction: column;
            text-align: center
        }
        }

        @media(max-width:390px) {
        .hero h1 {
            font-size: 41px
        }

        .hero-actions {
            gap: 7px
        }

        .primary,
        .learn {
            font-size: 9px;
            padding: 13px 11px
        }

        .step span {
            display: none
        }

        .step small {
            font-size: 9px
        }



        .step-circle {
            width: 37px;
            height: 37px
        }

        .step:not(:last-child):after {
            top: 18px
        }

        .verified {
            grid-template-columns: 1fr
        }

        .form-head strong {
            font-size: 14px
        }

        .back {
            font-size: 10px
        }

        .submit-btn {
            font-size: 10px
        }
        }

        .portrait {
        height: 420px;
        background: #030607;
        overflow: hidden;
        }

        .portrait img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        }

        /* Application success card */
        .success-card {
        width: min(850px, 100%);
        padding: 34px 32px 29px;
        text-align: center;
        }

        .success-check {
        width: 105px;
        height: 105px;
        display: grid;
        place-items: center;
        margin: 0 auto 25px;
        border-radius: 50%;
        background: linear-gradient(145deg, #5acbc5, #2c9fad);
        color: #fff;
        box-shadow: 0 16px 35px rgba(54, 177, 179, 0.24);
        font-size: 50px;
        font-weight: 700;
        }

        .success-card h3 {
        margin: 0;
        color: #104d74;
        font-size: 34px;
        line-height: 1.25;
        }

        .success-urdu {
        margin: 10px 0 5px;
        color: #294c68;
        font: 18px Georgia, serif;
        }

        .success-ministry {
        margin: 6px 0 28px;
        color: #294c68;
        font: 15px Georgia, serif;
        }

        .tracking-box {
        padding: 23px 20px 20px;
        border: 2px dashed #45b8b5;
        border-radius: 15px;
        background: #f0f5f8;
        }

        .tracking-box small {
        display: block;
        color: #0d446a;
        font-size: 13px;
        font-weight: 700;
        }

        .tracking-id {
        margin: 11px 0 9px;
        color: #052f53;
        font: 700 31px/1.2 "Courier New", monospace;
        letter-spacing: 1px;
        }

        .tracking-box p {
        margin: 0;
        color: #46647a;
        font: 13px Georgia, serif;
        }

        .contact-card {
        margin-top: 26px;
        padding: 23px 22px 21px;
        border: 1px solid #c8d6e0;
        border-radius: 14px;
        text-align: left;
        }

        .contact-card h4 {
        margin: 0 0 15px;
        color: #0d476e;
        text-align: center;
        font-size: 18px;
        }

        .contact-card h4 span {
        color: #d63888;
        margin-right: 7px;
        }

        .contact-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 14px;
        border: 1px solid #c9d6e0;
        border-radius: 5px;
        }

        .contact-row+.contact-row {
        margin-top: 13px;
        }

        .contact-row.whatsapp {
        border-color: #8edcaf;
        background: #e5f9ec;
        }

        .contact-icon {
        width: 45px;
        height: 45px;
        flex: 0 0 45px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #1d567c;
        color: #fff;
        }

        .label {
        display: flex;
        flex-direction: column;
        }

        .label span {
        width: 100%;
        display: block;
        }

        .label i {
        margin-bottom: 10px;
        font-size: 13px;
        }

        .step_heading {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        }

        .step_heading h3 {
        width: 100%;
        }

        .step_heading p {
        margin-left: auto;
        margin-top: 20px;
        }


        /* ===== Card ===== */
        .nc-card {
        /* max-width:440px; */
        margin-bottom: 20px;
        width: 100%;
        box-sizing: border-box;
        border: 1.5px solid #f6d58f;
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(180deg, #fffaf0, #fff4dc);
        box-shadow: 0 6px 18px rgba(180, 120, 20, .12);
        color: #14181f;
        }

        .nc-card * {
        box-sizing: border-box
        }

        /* Header */
        .nc-head {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        background: linear-gradient(135deg, #fff1cf, #ffe7ae);
        border-bottom: 1.5px solid #f6d58f;
        }

        .nc-icon {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #fde4a6;
        border: 1.5px solid #f6d58f;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #b45309;
        }

        .nc-icon svg {
        width: 26px;
        height: 26px
        }

        .nc-label {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #c2570c;
        }

        .nc-label .ur {
        font-family: 'Noto Nastaliq Urdu', serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        }

        .nc-title {
        margin: 2px 0 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.25;
        }

        /* Body */
        .nc-body {
        padding: 20px 22px 22px
        }

        .nc-headline {
        margin: 0 0 10px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.45;
        }

        .nc-sub {
        margin: 0 0 14px;
        font-size: 14.5px;
        line-height: 1.5;
        color: #6b7280;
        }

        /* Urdu block */
        .nc-urdu {
        direction: rtl;
        text-align: right;
        font-family: 'Noto Nastaliq Urdu', serif;
        line-height: 2.1;
        border-top: 1px dashed #f6d58f;
        padding-top: 12px;
        }

        .nc-urdu p {
        margin: 0
        }

        .nc-urdu .ur-head {
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 4px
        }

        .nc-urdu .ur-sub {
        font-size: 14px;
        color: #6b7280
        }

        @media (max-width:420px) {
        .nc-title {
            font-size: 18px
        }

        .nc-headline {
            font-size: 16.5px
        }
        }

        /* ===== Shared row-card shell ===== */
        .nc-row {
        max-width: 760px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 16px;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 18px 22px;
        }

        .nc-row * {
        box-sizing: border-box
        }

        .nc-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        }

        .nc-icon svg {
        width: 24px;
        height: 24px
        }

        .nc-en {
        flex: 1 1 0;
        min-width: 0
        }

        .nc-title {
        margin: 0 0 4px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3
        }

        .nc-sub {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #5b6472
        }

        .nc-ur {
        flex: 1 1 0;
        min-width: 0;
        direction: rtl;
        text-align: right;
        font-family: 'Noto Nastaliq Urdu', serif;
        line-height: 2;
        }

        .nc-ur p {
        margin: 0
        }

        .nc-ur .ur-title {
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 3px
        }

        .nc-ur .ur-sub {
        font-size: 13.5px
        }

        /* ===== Variant: green / success (matches reference security card) ===== */
        .nc-green {
        background: #eef4ef;
        border: 1px solid #dbe6dc;
        }

        .nc-green .nc-icon {
        background: #dde7de;
        color: #3f5346
        }

        .nc-green .nc-title {
        color: #1e2a22
        }

        .nc-green .nc-ur .ur-title {
        color: #1e2a22
        }

        .nc-green .nc-ur .ur-sub {
        color: #5b6472
        }

        /* ===== Variant: amber / alert (matches reference tax card) ===== */
        .nc-amber {
        background: #fef8ea;
        border: 1px solid #f3dfa0;
        border-left: 5px solid #e9b949;
        }

        .nc-amber .nc-icon {
        background: #fbe8b8;
        color: #9a6a0a
        }

        .nc-amber .nc-title {
        color: #9a6a0a
        }

        .nc-amber .nc-ur .ur-title {
        color: #9a1f1f
        }

        .nc-amber .nc-ur .ur-sub {
        color: #7a4a1f
        }

        @media (max-width:560px) {
        .nc-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px
        }

        .nc-ur {
            text-align: right
        }
        }


         /* ===== Loader card ===== */
.loader_bg {
  display: none;                 /* JS flex karega */
  position: fixed;               /* absolute nahi, fixed */
  inset: 0;                      /* top/right/bottom/left = 0 */
  z-index: 99999;
  background: rgb(255, 255, 255);
  align-items: center;           /* vertical center */
  justify-content: center;       /* horizontal center */
  padding: 24px;
}

.loader-card {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 44px 50px 36px;
  box-shadow: 0 1px 2px rgba(16, 47, 77, .05), 0 12px 32px rgba(16, 47, 77, .08);
  /* position, top, left, transform sab hata dein, flex center kar raha hai */
}

  /* Spinner */
  .spinner {
    width: 52px;
    height: 52px;
    margin: 0 auto 38px;
    border-radius: 50%;
    border: 5px solid var(--navy);
    border-right-color: transparent;
    animation: spin 1s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
 
  /* English left, Urdu right */
  .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }
 
  .en h1 {
    font-family: "Libre Baskerville", Georgia, serif;
    color: #030607;
    font-size: 26px;
    line-height: 1.3;
    margin: 0 0 12px;
  }
  .en p {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--muted);
  }
 
  .ur { direction: rtl; text-align: right; }
  .ur h1 {
    font-family: "Noto Naskh Arabic", "Noto Sans Arabic", serif;
    font-size: 24px;
    line-height: 1.7;
    color: #030607;
    margin: 0 0 6px;
  }
  .ur p {
    font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
    font-size: 15px;
    line-height: 2.2;
    margin: 0;
    color: var(--muted);
  }
 
  /* ===== Progress bar ===== */
  .progress {
    margin-top: 38px;
    height: 8px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    position: relative;
  }
  .progress-fill {
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 0%;
    border-radius: 999px;
    background: var(--mint);
    transition: width .5s ease;
  }
  /* indeterminate mode (default) */
  .progress.indeterminate .progress-fill {
    width: 35%;
    animation: slide 1.6s ease-in-out infinite;
  }
  @keyframes slide {
    0%   { left: -35%; }
    100% { left: 100%; }
  }
 
  /* ===== Status labels ===== */
  .status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    font-size: 15px;
    color: var(--muted);
  }
  .status .ur-label {
    direction: rtl;
    font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
    font-size: 15px;
  }
 
  @media (max-width: 560px) {
    .loader-card { padding: 32px 24px 28px; }
    .content { grid-template-columns: 1fr; gap: 20px; }
    .ur { order: -1; }
  }
 
  @media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 3s; }
    .progress.indeterminate .progress-fill { animation-duration: 4s; }
  }

  .resend:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.elig,
.elig *,
.elig *::before,
.elig *::after { box-sizing: border-box; }

.elig {
  background: var(--elig-bg);
  padding: 80px 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.elig__grid {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.elig__card {
  background: var(--elig-card);
  border: 1px solid var(--elig-border);
  padding: 32px;
  transition: box-shadow .3s ease;
}
.elig__card:hover {
  box-shadow: 0 14px 34px -24px var(--elig-shadow);
}

.elig__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--elig-primary);
}

.elig__title {
  margin: 20px 0 0;
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: var(--elig-primary);
}

.elig__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.elig__list li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 24px;
  color: var(--elig-muted);
}
.elig__list li + li { margin-top: 16px; }

.elig__icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--elig-primary);
}

@media (min-width: 640px) {
  .elig { padding: 96px 0; }
  .elig__grid { grid-template-columns: 1fr 1fr; }
}