*, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: 'Poppins', sans-serif;
      background: #f4f6fb !important;
      color: #1a2340;
      margin: 0; padding: 0;
    }


    /* =========================
   Modern Bootstrap 4.6 Modal Redesign
   Keep existing HTML structure
========================= */

/* Backdrop */
.modal-backdrop.show {
    opacity: 0.75;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Modal animation */
.modal.fade .modal-dialog {
    transform: translateY(25px) scale(0.98);
    transition: all 0.28s ease;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

/* Dialog spacing */
.modal-dialog {
    margin: 2rem auto;
}

/* Main modal */
.modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.18),
        0 8px 24px rgba(15, 23, 42, 0.08);
    position: relative;
}

/* Subtle top glow */
.modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        #2563eb 0%,
        #7c3aed 50%,
        #06b6d4 100%
    );
}

/* Header */
.modal-header {
    border-bottom: 1px solid #eef2f7;
    padding: 1.4rem 1.75rem;
    background: #ffffff;
    align-items: center;
}

/* Title */
.modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    margin: 0;
}

.modal-header .close {
    margin: 0;
    padding: 0;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px;
    background: #f3f4f6;
    opacity: 1;
    color: #4b5563;
    text-shadow: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    min-width: 42px;
}

.modal-header .close:hover {
    background: #111827;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Body */
.modal-body {
    padding: 1.75rem;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
    background: #ffffff;
}

/* Footer */
.modal-footer {
    border-top: 1px solid #eef2f7;
    padding: 1.25rem 1.75rem;
    background: #fafbfc;
}

/* Buttons */
.modal-footer .btn,
.modal-body .btn {
    border-radius: 12px;
    font-weight: 600;
    padding: 0.75rem 1.4rem;
    transition: all 0.2s ease;
    border: none;
    box-shadow: none;
}

/* Primary button */
.btn-primary {
    background: linear-gradient(
        135deg,
        #2563eb 0%,
        #7c3aed 100%
    );
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.35);
}

/* Secondary button */
.btn-secondary {
    background: #eef2f7;
    color: #374151;
}

.btn-secondary:hover {
    background: #dbe3ec;
    color: #111827;
}

/* Inputs inside modal */
.modal-content .form-control {
    height: 52px;
    border-radius: 14px;
    border: 1px solid #dbe3ec;
    background: #f9fafb;
    padding: 0 16px;
    font-size: 15px;
    transition: all 0.2s ease;
    box-shadow: none;
}

.modal-content textarea.form-control {
    min-height: 120px;
    padding-top: 14px;
}

.modal-content .form-control:focus {
    border-color: #6366f1;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

/* Labels */
.modal-content label {
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

/* Optional glass effect */
@supports (backdrop-filter: blur(10px)) {
    .modal-content {
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
}

/* Mobile optimization */
@media (max-width: 575px) {

    .modal-dialog {
        margin: 1rem;
    }

    .modal-content {
        border-radius: 20px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
}

    /* ── NAVBAR ── */
    .navbar-custom {
      background: #fff;
      padding: 14px 40px;
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
    .brand-wrap { display: flex; flex-direction: column; }
    .brand-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
    .brand-logo span.brand-reward { font-size: 22px; font-weight: 800; color: #1a2340; letter-spacing: -.3px; }
    .brand-logo span.brand-tiger  { font-size: 22px; font-weight: 800; color: #f5a623; letter-spacing: -.3px; }
    .brand-cert { font-size: 9.5px; color: #666; margin-top: 1px; }
    .nav-link-custom {
      font-size: 14.5px; font-weight: 500; color: #1a2340 !important;
      padding: 0px !important; text-decoration: none;
      margin-left: 15px;
      margin-right: 15px;
    }
    .nav-link-custom.active { color: #2b6cff !important; border-bottom: 2.5px solid #2b6cff; padding-bottom: 2px !important; }
    .btn-login {
      background: #2b6cff; color: #fff; border: none; border-radius: 8px;
      padding: 9px 22px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px;
      cursor: pointer; text-decoration: none;
    }
    .rt-navbar .navbar-nav li a.btn-login:hover { background: #1a55e0; color: #fff !important; text-decoration: none; }

    /* ── HERO ── */
    .hero-section {
      background: #f4f6fb;
      padding: 56px 40px 70px;
    }
    .hero-left { padding-right: 20px; }
    .trusted-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; border: 1.5px solid #e3e8f0;
      border-radius: 50px; padding: 6px 16px; font-size: 13px; font-weight: 500; color: #333;
      margin-bottom: 24px;
    }
    .hero-title-black { font-size: 46px; font-weight: 900; color: #1a2340; line-height: 1.1; margin: 0; }
    .hero-title-blue  { font-size: 46px; font-weight: 900; color: #2b6cff; line-height: 1.15; margin: 0 0 18px;  background: linear-gradient(90deg,#2b6cff 0%,#6a3de8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
    .hero-sub { font-size: 15.5px; color: #555; line-height: 1.65; max-width: 420px; margin-bottom: 32px; }

    /* Feature grid */
    .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin-bottom: 36px; }
    .feature-item { display: flex; align-items: flex-start; gap: 14px; }
    .feature-icon {
      width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .feature-icon.green  { background: #e6f9f0; }
    .feature-icon.purple { background: #f0eaff; }
    .feature-icon.orange { background: #fff4e5; }
    .feature-icon.blue   { background: #e8f0ff; }
    .feature-title { font-size: 14px; font-weight: 800; color: #1a2340; margin-bottom: 3px; }
    .feature-desc  { font-size: 12.5px; color: #666; line-height: 1.5; }














    
    /* Stats bar */
    .stats-bar {
        display: flex;
        gap: 10px;
        margin-top: 40px;
    }
.stat-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
}
    .stat-pill strong { font-size: 12px; font-weight: 800; color: #1a2340; display: block; }
    .stat-pill span   { color: #666; font-size: 11px; }

    /* ── SIGNUP CARD ── */
    .signup-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 40px rgba(43,108,255,.1);
      padding: 15px 36px 25px;
      max-width: 380px;
    }
    .signup-card .gift-icon { text-align: center; margin-bottom: 14px; }
    .signup-card h4 { font-size: 20px; font-weight: 800; text-align: center; color: #1a2340; margin-bottom: 4px; }
    .signup-card .sub { font-size: 13px; text-align: center; color: #888; margin-bottom: 22px; }
    .btn-google {
      width: 100%; border: 1.5px solid #e3e8f0; background: #fff; border-radius: 10px;
      padding: 12px; display: flex; align-items: center; justify-content: center;
      gap: 10px; font-size: 14px; font-weight: 500; color: #1a2340; cursor: pointer;
      margin-bottom: 8px; text-decoration: none;
    }
    .btn-google:hover { background: #f7f9ff; color: #1a2340; }
    .divider-text { text-align: center; font-size: 12.5px; color: #aaa; margin-bottom: 14px; position: relative; }
    .divider-text::before, .divider-text::after {
      content: ''; position: absolute; top: 50%; width: 26%; height: 1px; background: #e3e8f0;
    }
    .divider-text::before { left: 0; }
    .divider-text::after  { right: 0; }
    .input-group-custom { position: relative; margin-bottom: 12px; }
    .input-group-custom .input-icon {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .45;
    }
    .input-group-custom input {
      width: 100%; border: 1.5px solid #e3e8f0; border-radius: 10px;
      padding: 12px 14px 12px 42px; font-size: 14px; font-family: 'Poppins', sans-serif;
      color: #1a2340; outline: none; background: #fff;
    }
    .input-group-custom input:focus { border-color: #2b6cff; }
    .input-group-custom input::placeholder { color: #bbb; }
    .input-eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: .45; }
    .terms-row { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: #555; margin-bottom: 18px; }
    .terms-row input[type=checkbox] { margin-top: 2px; cursor: pointer; }
    .terms-row a { color: #2b6cff; font-weight: 400; text-decoration: none; }
    .btn-join {
      width: 100%; background: linear-gradient(90deg,#2b6cff 0%,#6a3de8 100%);
      color: #fff; border: none; border-radius: 12px;
      padding: 15px; font-size: 15px; font-weight: 800; cursor: pointer;
      margin-bottom: 14px; letter-spacing: .2px;
    }
    .btn-join:hover { opacity: .93; }
    .secure-note { text-align: center; font-size: 11.5px; color: #3cba6e; font-weight: 400; display: flex; align-items: center; justify-content: center; gap: 6px; }

    /* ── HERO ILLUSTRATION (right) ── */
    .hero-illustration { position: relative; }
    .phone-mockup-wrap {
      position: absolute; right: -30px; top: -20px;
      width: 260px;
    }

    /* ── BRANDS BAR ── */
    .brands-bar {
        background: #fff;
        border-top: 1px solid #edf0f7;
        padding: 8px 40px;
        display: flex;
        align-items: center;
        gap: 36px;
        flex-wrap: wrap;
        max-width: 900px;
        border-radius: 100px;
        margin: 0 auto -30px auto;
        box-shadow: 0 8px 40px rgba(43,108,255,.1);
        position: relative;
        justify-content: center;
    }
    .brands-bar .as-seen { font-size: 12.5px; color: #aaa; font-weight: 400; }
    .brand-logos { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }


        .fb-icon-wrapper {
            width: 56px;
            height: 56px;
            background-color: #e8f0fe;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .fb-icon {
            width: 28px;
            height: 28px;
        }
        .community-title {
            font-size: 12px;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 2px;
        }
        .verified-badge {
            width: 16px;
            height: 16px;
            margin-left: 6px;
        }
        .stat-number {
            font-size: 24px;
            font-weight: 700;
            color: #2563eb;
            line-height: 1;
        }
        .stat-label {
            font-size: 14px;
            color: #6b7280;
            margin-left: 6px;
        }
        .divider {
            width: 1px;
            height: 40px;
            background-color: #e5e7eb;
            margin: 0 20px;
        }
        .like-icon-wrapper {
            width: 40px;
            height: 40px;
            background-color: #eff6ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .like-icon {
            width: 20px;
            height: 20px;
        }
        .shield-icon-wrapper {
            width: 48px;
            height: 48px;
            background-color: #ecfdf5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .shield-icon {
            width: 24px;
            height: 24px;
        }
        .trust-title {
            font-size: 12px;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 2px;
        }
        .trust-subtitle {
            font-size: 11px;
            color: #6b7280;
        }
        .trust-divider {
            width: 1px;
            height: 32px;
            background-color: #e5e7eb;
            margin: 0 16px;
        }
        .trust-item-icon {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }
        .trust-item-title {
            font-size: 12px;
            font-weight: 600;
            color: #374151;
            line-height: 1.2;
        }
        .trust-item-subtitle {
            font-size: 11px;
            color: #6b7280;
            line-height: 1.2;
        }
        @media (max-width: 991px) {
            .trust-bar {
                padding: 20px;
                justify-content: center !important;
            }
            .divider, .trust-divider {
                display: none;
            }
            .community-section, .trust-section {
                margin-bottom: 20px;
            }


            section.brands-bar {
                top: 0 !important;
                border-radius: 20px;
                margin: 15px;
                margin-top: -15px;
            }

        }
    


    /* ── HOW IT WORKS ── */
    .how-section { background:#fff; padding: 110px 0 70px; }
    .section-title { font-size: 26px; font-weight: 800; color: #1a1a2e; text-align: center; }
    .section-subtitle { font-size: 13px; color: #888; text-align: center; margin-top: 4px; }
    .section-subtitle::before, .section-subtitle::after { content: '—'; margin: 0 6px; }

    .step-card {
      background: #fff;
      border-radius: 14px;
      padding: 32px 24px 28px;
      text-align: center;
      box-shadow: 0 4px 24px rgba(0,0,0,.07);
      position: relative;
      height: 100%;
    }
    .step-number {
      width: 32px; height: 32px; border-radius: 50%;
      background: linear-gradient(90deg,#2b6cff 0%,#6a3de8 100%); color: #fff; font-size: 13px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      position: absolute; top: -12px; left: -12px;
    }
    .step-icon-wrap {
      width: 120px; height: 120px; margin: 0 auto 18px;
      display: flex; align-items: center; justify-content: center;
    }
    .step-icon-wrap img { width: 100%; }
    .step-card h5 { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; }
    .step-card p { font-size: 13px; color: #777; margin: 0; }
    .step-connector {
      display: flex; align-items: center; justify-content: center;
      padding-top: 50px;
    }
    .step-connector i { color: #bbb; font-size: 20px; }


        /* --- Stats Banner --- */
        .stats-banner {
            background: linear-gradient(90deg,#2b6cff 0%,#6a3de8 100%);
            padding: 40px 0;
            color: #fff;
        }
        .stat-item {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .stat-icon {
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #16368c;
            font-size: 24px;
            margin-right: 15px;
        }
        .stat-text h3 {
            margin: 0;
            font-weight: 700;
            font-size: 24px;
        }
        .stat-text p {
            margin: 0;
            font-size: 14px;
            opacity: 0.9;
        }



    /* ── ABOUT ── */
    .about-section { padding: 70px 0;}
    .about-section .section-title { text-align: center; }
    .about-section .section-underline {
      width: 40px; height: 3px; background: #2d59d6; margin: 10px auto 30px;
    }
    .about-section p { font-size: 13px; color: #555; line-height: 1.8; }
    .iso-badge {
      display: inline-flex; align-items: center; gap: 10px;
      border: 1.5px solid #ddd; border-radius: 8px; padding: 10px 18px; margin-top: 14px;
    
    }
    .iso-badge img { height: 36px; }
    .iso-badge span { font-size: 13px; font-weight: 500; color: #000; }
    .about-img-wrap { text-align: center; }
    .about-img-wrap img { max-width: 320px; width: 100%; }


        /* --- Footer --- */
        footer {
            background-color: #0b1528;
            color: #fff;
            padding: 60px 0 20px;
        }
        footer h6 {
            font-weight: 600;
            margin-bottom: 20px;
        }
        .footer-links {
            list-style: none;
            padding: 0;
        }
        .footer-links li {
            margin-bottom: 10px;
        }
        .footer-links a {
            color: #bbb;
            text-decoration: none;
            font-size: 14px;
        }
        .footer-links a.active,
        .footer-links a:hover {
            color: #fff;
        }
        .social-icons a {
            color: #fff;
            background: rgba(255,255,255,0.1);
            width: 35px;
            height: 35px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 10px;
            text-decoration: none;
        }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-top: 40px;
            padding-top: 20px;
            text-align: center;
            font-size: 13px;
            color: #bbb;
        }



    /* responsive tweaks */
    @media (max-width: 991px) {
      .hero-section { padding: 32px 20px 28px; }
      .hero-title-black, .hero-title-blue { font-size: 32px; }
      .signup-card { margin-top: 32px; }
      .phone-mockup-wrap { display: none; }
        div#signup-new {
            margin: 20px 0;
        }
    .trusted-badge {
        /* display: inline-flex; */
        align-items: center;
        gap: 8px;
        background: #fff;
        border: 1.5px solid #e3e8f0;
        border-radius: 50px;
        padding: 6px 16px;
        font-size: 13px;
        font-weight: 500;
        color: #333;
        margin-bottom: 24px;
        /* text-align: center; */
        /* margin: 0 auto; */
        text-align: center;
        max-width: 238px;
        margin: -1px auto 10px auto;
    }


        .features-grid {
            display: grid;
            grid-template-columns: 1fr 0fr;
            gap: 20px 32px;
            margin-bottom: 36px;
            display: block !important;
        }

        .stats-bar {
            display: flex;
            gap: 10px;
            margin-top: 40px;
            flex-direction: column;
        }

        .signup-card{
          padding: 15px 25px 25px;
          margin-top: -30px;
        }

        .feature-item { 
            min-height: 60px;
         }

    }


    /*** Home Dashboard ***/
        :root {
            --primary-blue: #2563EB;
            --primary-blue-dark: #1D4ED8;
            --light-blue-bg: #EFF6FF;
            --text-dark: #1E293B;
            --text-gray: #64748B;
            --text-light: #94A3B8;
            --border-light: #E2E8F0;
            --card-bg: #FFFFFF;
            --body-bg: #F0F5FF;
            --orange-accent: #F59E0B;
            --green-accent: #22C55E;
            --purple-accent: #A855F7;
            --yellow-accent: #EAB308;
        }

    .rt-dashboard-banner .welcome-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: white;
            border: 1px solid var(--border-light);
            border-radius: 50px;
            padding: 0.4rem 1rem;
            font-size: 0.85rem;
            color: var(--text-gray);
            margin-bottom: 1.5rem;
        }

       .rt-dashboard-banner  .welcome-badge svg { width: 18px; height: 18px; }
       .rt-dashboard-banner  .welcome-badge .wave { font-size: 1rem; }

        .rt-dashboard-banner .home-hero-section { margin-bottom: 2rem; }

        .rt-dashboard-banner .hero-title {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1.2;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

      .rt-dashboard-banner   .hero-title .highlight { color: var(--primary-blue); }

       .rt-dashboard-banner  .hero-subtitle {
            color: var(--text-gray);
            font-size: 1rem;
            line-height: 1.6;
            max-width: 320px;
            margin-bottom: 2rem;
        }

      .rt-dashboard-banner   .balance-card {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            border: 1px solid var(--border-light);
        }

       .rt-dashboard-banner  .balance-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }

       .rt-dashboard-banner  .balance-icon {
            width: 56px; height: 56px;
            background: #EFF6FF;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

       .rt-dashboard-banner  .balance-icon svg { width: 28px; height: 28px; }

      .rt-dashboard-banner   .balance-info h6 {
            color: var(--text-gray);
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 0.2rem;
        }

      .rt-dashboard-banner   .balance-info .balance-amount {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--primary-blue);
            line-height: 1;
        }

       .rt-dashboard-banner  .balance-info .balance-label {
            font-size: 0.8rem;
            color: var(--text-light);
            margin-top: 0.2rem;
        }

      .rt-dashboard-banner   .balance-divider {
            border-left: 1px solid var(--border-light);
            height: 60px;
            margin: 0 0.5rem;
        }

     .rt-dashboard-banner    .balance-details { display: flex; flex-direction: column; gap: 0.8rem; }

      .rt-dashboard-banner   .detail-item { display: flex; align-items: center; gap: 0.5rem; }
      .rt-dashboard-banner   .detail-item svg { width: 18px; height: 18px; }

      .rt-dashboard-banner   .detail-item .detail-label {
            font-size: 0.8rem;
            color: var(--text-gray);
        }

      .rt-dashboard-banner   .detail-item .detail-value {
            font-size: 0.85rem;
            color: var(--text-dark);
            font-weight: 500;
        }

     .rt-dashboard-banner    .cta-button {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 0.85rem 1.5rem;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
            margin-top: 1.5rem;
            text-decoration: none;
        }

      .rt-dashboard-banner   .cta-button:hover {
            background: var(--primary-blue-dark);
            color: white;
            text-decoration: none;
        }

       .rt-dashboard-banner  .cta-button svg { width: 18px; height: 18px; }
      .rt-dashboard-banner   .cta-button .arrow { width: 14px; height: 14px; }

       .rt-dashboard-banner  .feature-card {
            background: white;
            border-radius: 16px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            border: 1px solid var(--border-light);
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

      .rt-dashboard-banner   .feature-card .card-content { flex: 1; }

      .rt-dashboard-banner   .feature-icon {
            width: 48px; height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .rt-dashboard-banner .feature-icon svg { width: 22px; height: 22px; }

      .rt-dashboard-banner   .feature-icon.blue { background: #EFF6FF; }
     .rt-dashboard-banner    .feature-icon.blue svg { stroke: var(--primary-blue); }

      .rt-dashboard-banner   .feature-icon.green { background: #F0FDF4; }
      .rt-dashboard-banner   .feature-icon.green svg { stroke: var(--green-accent); }

      .rt-dashboard-banner   .feature-icon.purple { background: #FAF5FF; }
       .rt-dashboard-banner  .feature-icon.purple svg { stroke: var(--purple-accent); }

       .rt-dashboard-banner  .feature-icon.yellow { background: #FEFCE8; }
       .rt-dashboard-banner  .feature-icon.yellow svg { stroke: var(--yellow-accent); }

       .rt-dashboard-banner  .feature-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }

       .rt-dashboard-banner  .feature-desc {
            font-size: 0.85rem;
            color: var(--text-gray);
            line-height: 1.5;
        }

       .rt-dashboard-banner  .feature-image {
            position: absolute;
            right: 1rem;
            top: 1rem;
            width: 100px;
            height: 80px;
            opacity: 0.9;
        }

       .rt-dashboard-banner  .feature-image svg { width: 100%; height: 100%; }

        .rt-dashboard-banner .feature-arrow {
            position: absolute;
            bottom: 1.5rem;
            right: 1.5rem;
            width: 36px; height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s;
        }

       .rt-dashboard-banner  .feature-arrow:hover { transform: translateX(3px); }

       .rt-dashboard-banner  .feature-arrow svg { width: 14px; height: 14px; }

      .rt-dashboard-banner   .feature-arrow.blue { background: var(--primary-blue); }
       .rt-dashboard-banner  .feature-arrow.blue svg { stroke: white; }

       .rt-dashboard-banner  .feature-arrow.green { background: #DCFCE7; }
       .rt-dashboard-banner  .feature-arrow.green svg { stroke: var(--green-accent); }

        .rt-dashboard-banner .feature-arrow.purple { background: #F3E8FF; }
       .rt-dashboard-banner  .feature-arrow.purple svg { stroke: var(--purple-accent); }

       .rt-dashboard-banner  .feature-arrow.yellow { background: #FEF9C3; }
       .rt-dashboard-banner  .feature-arrow.yellow svg { stroke: var(--yellow-accent); }

       .rt-dashboard-banner  .bottom-features { margin-top: 2rem; }

        .rt-dashboard-banner .bottom-feature {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
        }

      .rt-dashboard-banner   .bottom-feature-icon {
            width: 44px; height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .rt-dashboard-banner .bottom-feature-icon svg { width: 20px; height: 20px; }

        .rt-dashboard-banner .bottom-feature-icon.blue { background: #EFF6FF; }
       .rt-dashboard-banner  .bottom-feature-icon.blue svg { stroke: var(--primary-blue); }

       .rt-dashboard-banner  .bottom-feature-icon.green { background: #F0FDF4; }
        .rt-dashboard-banner .bottom-feature-icon.green svg { stroke: var(--green-accent); }

        .rt-dashboard-banner .bottom-feature-icon.purple { background: #FAF5FF; }
        .rt-dashboard-banner .bottom-feature-icon.purple svg { stroke: var(--purple-accent); }

        .rt-dashboard-banner .bottom-feature-icon.orange { background: #FFFBEB; }
        .rt-dashboard-banner .bottom-feature-icon.orange svg { stroke: var(--orange-accent); }

       .rt-dashboard-banner  .bottom-feature-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.3rem;
        }

      .rt-dashboard-banner   .bottom-feature-desc {
            font-size: 0.8rem;
            color: var(--text-gray);
            line-height: 1.5;
        }

        @media (max-width: 991px) {
            .rt-dashboard-banner .hero-title { font-size: 2rem; }
           .rt-dashboard-banner  .feature-image { display: none; }
        }

        @media (max-width: 767px) {
          .rt-dashboard-banner   .navbar-collapse {
                background: white;
                padding: 1rem;
                border-radius: 12px;
                margin-top: 0.5rem;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }
         .rt-dashboard-banner    .balance-divider { display: none; }
           .rt-dashboard-banner  .balance-header { flex-wrap: wrap; }


           section.rt-dashboard-banner {
                text-align: center;
            }

            .balance {
                width: 100%;
            }
            .rt-dashboard-banner .balance-icon{
                margin: 0 auto;
            }

            .rt-dashboard-banner .feature-icon{
                margin: 0 auto 1rem auto;
            }

            .rt-dashboard-banner .feature-arrow {
                position: inherit;
                margin: 0 auto;
                left: 0;
                bottom: 0;
            }

            .rt-dashboard-banner .detail-item{
                text-align: left;
            }

            .rt-dashboard-banner .balance-details{
                width: 100%;
            }




                .rt-dashboard-banner  .hero-subtitle {
                    margin: 0 auto;
                }





        }



        /*** Payout page ****/
:root {
    --primary: #2563eb;
    --primary-light: #eff6ff;
    --green: #16a34a;
    --green-light: #f0fdf4;
    --green-mid: #dcfce7;
    --border: #e5e7eb;
    --text-dark: #111827;
    --text-mid: #4b5563;
    --text-light: #9ca3af;
    --bg: #f0f4f8;
    --white: #ffffff;
    --yellow: #f59e0b;
    --badge-bg: #d1fae5;
    --badge-text: #065f46;
}
        .info-banner {
    background: var(--white);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-mid);
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.info-banner a {
    color: var(--green);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


 /* Balance Card */
    .balance-card {
      background: var(--white);
      border-radius: 16px;
      padding: 28px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 20px;
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }

    .balance-left {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .wallet-icon-wrap {
      width: 60px;
      height: 60px;
      background: #eff6ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .balance-number {
      font-size: 3rem;
      font-weight: 900;
      color: var(--primary);
      line-height: 1;
    }

    .balance-label {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-mid);
      font-weight: 700;
      margin-bottom: 4px;
    }

    .balance-sublabel {
      font-size: 0.95rem;
      color: var(--text-mid);
      font-weight: 600;
    }

    .balance-center {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 32px;
      border-left: 1px solid #e5e7eb;
      border-right: 1px solid #e5e7eb;
    }

    .balance-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .coin-stack {
      position: relative;
      width: 90px;
      height: 90px;
    }


  /* History Table */
    .history-card {
      background: var(--white);
      border-radius: 16px;
      padding: 24px 28px;
      border: 1px solid var(--border);
    }

    .history-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .history-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text-dark);
    }

    .view-all-link {
      font-size: 0.9rem;
      color: var(--primary);
      font-weight: 700;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .view-all-link:hover { text-decoration: underline; color: var(--primary); }

    .history-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    .history-table thead th {
      background: #f9fafb;
      color: var(--text-mid);
      font-weight: 700;
      padding: 12px 16px;
      text-align: left;
      font-size: 0.85rem;
      border-bottom: 1px solid var(--border);
    }

    .history-table tbody td {
      padding: 16px 16px;
      border-bottom: 1px solid #f3f4f6;
      vertical-align: middle;
    }

    @media (max-width: 768px) {
      .balance-center { border: none; padding: 0; }
      .balance-card { padding: 20px; }
      .redeem-card { padding: 20px; }
      .history-card { padding: 16px; }
      .balance-number { font-size: 2.2rem; }
      .history-table { font-size: 0.8rem; }
      .history-table thead th, .history-table tbody td { padding: 10px 8px; }
    }