*, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: 'Poppins', sans-serif;
      background: #f4f6fb;
      color: #1a2340;
      margin: 0; padding: 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;
    }
    .btn-login:hover { background: #1a55e0; color: #fff; }

    /* ── 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: 700; 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: 15px 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;
    }
    .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; }




    


    /* ── 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: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; }

    .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;
        }
    }