* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #173746;
    background: #fff;
    line-height: 1.6;
}

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

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid #e7eef1;
}

.nav-wrap {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    height: 52px;
}

.logo img {
    display: block;
    width: auto;
    height: 52px;
    max-width: 205px;
    object-fit: contain;
}

.logo.light {
    filter: brightness(0) invert(1);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 14px;
    font-weight: 700;
}

.main-nav a:hover {
    color: #00719D;
}

.nav-cta {
    background: #00719D;
    color: #fff !important;
    padding: 11px 18px;
    border-radius: 7px;
}

.menu-toggle {
    display: none;
    border: 0;
    background: none;
    font-size: 23px;
}


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

.hero {
    background: linear-gradient(
        135deg,
        #f4fbfd 0%,
        #fff 55%,
        #fff9e8 100%
    );
    padding: 82px 0 72px;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 60px;
}

.eyebrow {
    display: inline-block;
    color: #00719D;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 14px;
}

.hero h1 {
    font-size: 58px;
    line-height: 1.08;
    margin: 0 0 22px;
    color: #123745;
}

.hero h1 strong,
h2 strong {
    color: #00719D;
}

.hero-copy > p {
    font-size: 18px;
    color: #607783;
    max-width: 620px;
}

.hero-actions {
    display: flex;
    gap: 13px;
    margin: 30px 0;
}

.btn {
    padding: 14px 20px;
    border-radius: 7px;
    font-weight: 800;
    display: inline-block;
}

.btn-primary {
    background: #00719D;
    color: #fff;
}

.btn-outline {
    border: 1px solid #b8cbd2;
    color: #00719D;
    background: #fff;
}

.trust-row {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    color: #5f7480;
    font-size: 13px;
}

.trust-row i {
    color: #00719D;
    margin-right: 5px;
}


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

.phone-stage {
    display: flex;
    justify-content: center;
}

.phone {
    width: 285px;
    height: 570px;
    border: 9px solid #153d4b;
    border-radius: 38px;
    background: #fff;
    box-shadow: 0 30px 60px #00719d24;
    padding: 15px;
    position: relative;
    overflow: hidden;
}

.phone:before {
    content: "";
    position: absolute;
    top: 0;
    left: 92px;
    width: 82px;
    height: 18px;
    background: #153d4b;
    border-radius: 0 0 13px 13px;
}

.phone-top {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.app-brand {
    font-size: 24px;
    font-weight: 800;
    color: #00719D;
    margin: 12px 0;
}

.app-brand span {
    color: #FEBD01;
}

.search-box {
    background: #f1f6f8;
    border-radius: 8px;
    padding: 9px;
    color: #91a3ab;
    font-size: 10px;
}

.mini-banner {
    margin-top: 12px;
    background: #00719D;
    color: #fff;
    border-radius: 12px;
    padding: 17px;
}

.mini-banner small {
    font-size: 8px;
    letter-spacing: 1px;
}

.mini-banner b {
    display: block;
    font-size: 17px;
    line-height: 1.2;
    margin-top: 5px;
}

.mini-title {
    font-weight: 800;
    margin: 17px 0 8px;
}

.mini-cards {
    display: flex;
    gap: 8px;
}

.mini-cards div {
    flex: 1;
    background: #f6f8f9;
    border-radius: 9px;
    padding: 12px 5px;
    text-align: center;
}

.mini-cards i {
    display: block;
    color: #00719D;
    font-size: 19px;
    margin-bottom: 5px;
}

.mini-cards small {
    font-size: 8px;
}

.wallet-card {
    background: #fff6d9;
    border: 1px solid #f5dd91;
    padding: 13px;
    border-radius: 11px;
    margin-top: 13px;
}

.wallet-card span,
.wallet-card small {
    display: block;
    font-size: 9px;
    color: #776b42;
}

.wallet-card strong {
    display: block;
    font-size: 23px;
    color: #173746;
}

.bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5ecee;
    display: flex;
    justify-content: space-around;
    padding: 14px;
    color: #8aa0aa;
}

.bottom-nav i:first-child {
    color: #00719D;
}


/* ================================
   VALUE STRIP
================================ */

.value-strip {
    background: #00719D;
    color: #fff;
}

.four-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 24px 0;
}

.four-cols div {
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    column-gap: 9px;
}

.four-cols i {
    grid-row: 1 / 3;
    font-size: 25px;
    color: #FEBD01;
}

.four-cols b {
    font-size: 14px;
}

.four-cols span {
    font-size: 11px;
    color: #d2e8ee;
}


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

.section {
    padding: 86px 0;
}

.soft {
    background: #f7fafb;
}

.section-heading {
    max-width: 720px;
    margin-bottom: 42px;
}

.section-heading.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-heading h2 {
    font-size: 38px;
    line-height: 1.2;
    margin: 0 0 13px;
}

.section-heading p {
    color: #6c8089;
    margin: 0;
}


/* ================================
   JOURNEY
================================ */

.journey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.journey-card {
    border-radius: 18px;
    padding: 34px;
    border: 1px solid #dce8ec;
    box-shadow: 0 14px 35px #183e4b0c;
}

.prime-card {
    background: #fffdf5;
    border-top: 5px solid #FEBD01;
}

.vendor-card {
    background: #f5fbfd;
    border-top: 5px solid #00719D;
}

.journey-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #00719D;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 21px;
    margin-bottom: 17px;
}

.prime-card .journey-icon {
    background: #FEBD01;
    color: #173746;
}

.card-kicker {
    font-size: 11px;
    letter-spacing: 1.6px;
    font-weight: 800;
    color: #79909a;
}

.journey-card h3 {
    font-size: 25px;
    margin: 8px 0;
}

.journey-card p {
    color: #657a84;
}

.journey-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 25px 0;
    color: #00719D;
    font-size: 11px;
    font-weight: 800;
}

.journey-flow span {
    background: #fff;
    border: 1px solid #dce8ec;
    border-radius: 20px;
    padding: 7px 10px;
}

.text-link {
    color: #00719D;
    font-weight: 800;
    font-size: 13px;
}


/* ================================
   FEATURE GRID
================================ */

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

.feature {
    padding: 25px;
    background: #fff;
    border: 1px solid #e0eaed;
    border-radius: 13px;
}

.feature i {
    font-size: 22px;
    color: #00719D;
}

.feature h3 {
    margin: 13px 0 5px;
    font-size: 18px;
}

.feature p {
    font-size: 13px;
    color: #71858e;
    margin: 0;
}


/* ================================
   PRIME SECTION
================================ */

.prime-section {
    background: #fffdf3;
}

.prime-highlight {
    display: grid;
    grid-template-columns: 1fr 50px 1fr;
    align-items: center;
    max-width: 850px;
    margin: 0 auto 42px;
}

.price-box,
.cashback-box {
    padding: 28px;
    border-radius: 16px;
    text-align: center;
    background: #fff;
    border: 1px solid #eadfb8;
}

.price-box {
    border-top: 5px solid #00719D;
}

.cashback-box {
    border-top: 5px solid #FEBD01;
}

.price-box small,
.cashback-box small {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #74848a;
}

.price-box strong,
.cashback-box strong {
    display: block;
    font-size: 38px;
    color: #173746;
}

.price-box span,
.cashback-box span {
    font-size: 11px;
    color: #7b6e4a;
}

.plus {
    text-align: center;
    font-size: 27px;
    color: #00719D;
}

.prime-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.prime-step {
    background: #fff;
    border: 1px solid #eadfb8;
    border-radius: 14px;
    padding: 23px;
    position: relative;
}

.prime-step > b {
    position: absolute;
    right: 16px;
    top: 12px;
    color: #d5c68d;
}

.prime-step i {
    color: #00719D;
    font-size: 22px;
}

.prime-step h3 {
    margin: 12px 0 5px;
    font-size: 17px;
}

.prime-step p {
    font-size: 12px;
    color: #6f7e82;
    margin: 0;
}

.prime-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.prime-details > div {
    padding: 22px;
    background: #fff;
    border: 1px solid #eadfb8;
    border-radius: 13px;
}

.prime-details i {
    font-size: 20px;
    color: #00719D;
}

.prime-details h3 {
    font-size: 16px;
    margin: 9px 0 5px;
}

.prime-details p {
    font-size: 12px;
    color: #6f7e82;
    margin: 0;
}

.compliance-note {
    margin-top: 24px;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid #eadfb8;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    color: #6b5d32;
    font-size: 12px;
}

.compliance-note i {
    color: #d29b00;
    margin-top: 4px;
}

.compliance-note p {
    margin: 0;
}


/* ================================
   VENDOR SECTION
================================ */

.vendor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
    align-items: center;
}

.vendor-item {
    display: flex;
    gap: 17px;
    padding: 19px 0;
    border-bottom: 1px solid #e5edef;
}

.vendor-item > span {
    font-size: 12px;
    color: #FEBD01;
    background: #00719D;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    flex: none;
}

.vendor-item h3 {
    margin: 0 0 3px;
    font-size: 17px;
}

.vendor-item p {
    margin: 0;
    color: #71838b;
    font-size: 12px;
}


/* ================================
   SHOP PANEL
================================ */

.shop-panel {
    background: #f6fafb;
    border-radius: 18px;
    padding: 24px;
    border: 1px solid #dce9ed;
}

.shop-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    color: #00719D;
    margin-bottom: 12px;
}

.shop-head i {
    font-size: 18px;
}

.shop-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2eaed;
    padding: 15px;
    border-radius: 10px;
    margin-top: 10px;
}

.shop-row > i {
    font-size: 21px;
    color: #00719D;
}

.shop-row div {
    flex: 1;
}

.shop-row b,
.shop-row small {
    display: block;
}

.shop-row small {
    font-size: 10px;
    color: #7a8b92;
}

.shop-row em {
    font-style: normal;
    font-size: 8px;
    font-weight: 800;
    color: #087a61;
    background: #e7f7f1;
    padding: 5px 7px;
    border-radius: 12px;
}

.shop-row em.off {
    color: #9a6400;
    background: #fff3d2;
}

.shop-note {
    font-size: 10px;
    color: #71828a;
    margin-top: 14px;
    line-height: 1.5;
}

.shop-note i {
    color: #00719D;
    margin-right: 5px;
}


/* ================================
   ORDER SECTION
================================ */

.order-section {
    margin-top: 72px;
}

.order-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    flex-wrap: wrap;
}

.order-flow > div {
    width: 150px;
    text-align: center;
}

.order-flow > div i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #eef7f9;
    color: #00719D;
    margin: 0 auto 10px;
    font-size: 20px;
}

.order-flow b,
.order-flow small {
    display: block;
}

.order-flow b {
    font-size: 12px;
}

.order-flow small {
    font-size: 9px;
    color: #7b8d94;
}

.order-flow > i {
    color: #a8bdc4;
}


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

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.two-col h2 {
    font-size: 38px;
    line-height: 1.2;
}

.two-col p {
    color: #687d86;
}

.narrow {
    max-width: 850px;
}


/* ================================
   FAQ
================================ */

.faq-list details {
    border-bottom: 1px solid #dfe9ec;
    padding: 19px 0;
}

.faq-list summary {
    font-weight: 800;
    cursor: pointer;
    color: #173746;
}

.faq-list p {
    color: #6e8189;
    font-size: 13px;
    margin: 12px 0 0;
}


/* ================================
   DOWNLOAD SECTION
================================ */

.download-section {
    background: #00719D;
    color: #fff;
    padding: 65px 0;
}

.download-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.download-inner .eyebrow {
    color: #FEBD01;
}

.download-inner h2 {
    font-size: 36px;
    margin: 0;
}

.download-inner h2 strong {
    color: #FEBD01;
}

.download-inner p {
    color: #d6e9ee;
}

.store-buttons {
    display: flex;
    gap: 12px;
}

.store {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #173746;
    border-radius: 9px;
    padding: 11px 17px;
    min-width: 170px;
}

.store i {
    font-size: 28px;
}

.store small,
.store b {
    display: block;
    line-height: 1.2;
}

.store small {
    font-size: 9px;
    color: #c5d8dd;
}

.store b {
    font-size: 14px;
}


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

.site-footer {
    background: #12303b;
    color: #c7d8dd;
    padding: 55px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 35px;
}

.footer-grid h4 {
    color: #fff;
    margin: 0 0 12px;
}

.footer-grid a:not(.logo) {
    display: block;
    font-size: 12px;
    margin: 7px 0;
    color: #c7d8dd;
}

.footer-grid p {
    font-size: 12px;
    max-width: 240px;
}

.footer-bottom {
    border-top: 1px solid #31505a;
    margin-top: 35px;
    padding-top: 17px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #89a1aa;
}


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

@media (max-width: 900px) {

    .main-nav {
        gap: 13px;
    }

    .hero-grid,
    .vendor-layout,
    .two-col {
        grid-template-columns: 1fr;
    }

    .phone-stage {
        order: -1;
    }

    .hero h1 {
        font-size: 46px;
    }

    .four-cols {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .prime-steps {
        grid-template-columns: 1fr 1fr;
    }

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

    .download-inner {
        display: block;
    }

    .store-buttons {
        margin-top: 25px;
    }
}


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

@media (max-width: 680px) {

    .nav-wrap {
        height: 66px;
    }

    .menu-toggle {
        display: block;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 66px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 15px 5%;
        box-shadow: 0 8px 20px #00000012;
        flex-direction: column;
        align-items: stretch;
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav a {
        padding: 9px;
    }

    .hero {
        padding: 55px 0;
    }

    .hero h1 {
        font-size: 38px;
    }

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

    .btn {
        text-align: center;
    }

    .trust-row {
        gap: 10px;
        display: grid;
    }

    .phone {
        transform: scale(0.9);
    }

    .section {
        padding: 62px 0;
    }

    .section-heading h2,
    .two-col h2 {
        font-size: 30px;
    }

    .journey-grid,
    .feature-grid,
    .prime-steps,
    .prime-details {
        grid-template-columns: 1fr;
    }

    .prime-highlight {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .plus {
        transform: rotate(90deg);
    }

    .four-cols {
        grid-template-columns: 1fr;
    }

    .order-flow {
        display: grid;
        grid-template-columns: 1fr;
    }

    .order-flow > i {
        transform: rotate(90deg);
        margin: auto;
    }

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

    .footer-bottom {
        display: block;
    }

    .footer-bottom span {
        display: block;
        margin: 5px 0;
    }

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

    .store {
        max-width: 230px;
    }

    .shop-row em {
        display: none;
    }
}
/* =========================================================
   BasisPe Form Elements / UI Components
   Reusable samples for admin, vendor and customer screens.
   ========================================================= */
.form-section{padding:32px 0}
.form-card{background:#fff;border:1px solid #dfe9ec;border-radius:14px;padding:28px;margin-bottom:22px;box-shadow:0 8px 24px rgba(23,55,70,.06)}
.form-card h3{margin:0 0 6px;color:#173746;font-size:21px}
.form-card .form-help{margin:0 0 22px;color:#71858e;font-size:12px}
.form-grid{display:flex;flex-wrap:wrap;margin:0 -9px}
.form-group{width:50%;padding:0 9px;margin-bottom:18px}
.form-group.full{width:100%}
.form-group.third{width:33.333%}
.form-label{display:block;font-weight:700;font-size:13px;color:#355360;margin-bottom:7px}
.required{color:#d9534f}
.form-control,.form-select,.form-textarea{display:block;width:100%;height:42px;padding:9px 12px;border:1px solid #cbdce1;border-radius:7px;background:#fff;color:#294653;font:inherit;font-size:13px;outline:none}
.form-control:focus,.form-select:focus,.form-textarea:focus{border-color:#00719D;box-shadow:0 0 0 2px rgba(0,113,157,.10)}
.form-control[readonly]{background:#f5f8f9}
.form-control:disabled,.form-select:disabled,.form-textarea:disabled{background:#eef3f5;color:#8da0a7;cursor:not-allowed}
.form-textarea{height:105px;resize:vertical}
.form-select{cursor:pointer}
.form-help-inline{font-size:11px;color:#84969d;margin-top:5px;display:block}
.input-group{display:flex;width:100%}
.input-addon{background:#eef6f8;border:1px solid #cbdce1;padding:9px 12px;font-size:13px;color:#48636e;white-space:nowrap}
.input-group .input-addon:first-child{border-radius:7px 0 0 7px;border-right:0}
.input-group .input-addon:last-child{border-radius:0 7px 7px 0;border-left:0}
.input-group .form-control{border-radius:0}
.input-group .form-control:first-child{border-radius:7px 0 0 7px}
.input-group .form-control:last-child{border-radius:0 7px 7px 0}
.choice-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.choice{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#405c68;cursor:pointer}
.choice input{width:16px;height:16px;accent-color:#00719D}
.check-card{display:block;border:1px solid #dce7ea;border-radius:9px;padding:12px 14px;margin-bottom:9px;background:#fff}
.check-card:hover{border-color:#00719D;background:#f8fcfd}
.switch{position:relative;display:inline-block;width:46px;height:24px;vertical-align:middle}
.switch input{display:none}
.switch-slider{position:absolute;cursor:pointer;inset:0;background:#b9c9ce;border-radius:24px;transition:.2s}
.switch-slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.switch-slider{background:#00719D}
.switch input:checked+.switch-slider:before{transform:translateX(22px)}
.switch-label{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#355360}
.custom-multi{position:relative;width:100%}
.multi-trigger{height:42px;border:1px solid #cbdce1;border-radius:7px;background:#fff;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:13px;color:#536c76}
.multi-trigger i{font-size:12px;color:#00719D}
.multi-panel{display:none;position:absolute;z-index:30;left:0;right:0;top:47px;background:#fff;border:1px solid #cbdce1;border-radius:8px;padding:8px;box-shadow:0 12px 30px rgba(23,55,70,.15);max-height:230px;overflow:auto}
.custom-multi.open .multi-panel{display:block}
.multi-option{display:block;padding:8px;border-radius:5px;font-size:12px;cursor:pointer}
.multi-option:hover{background:#f2f8fa}
.multi-option input{margin-right:7px}
.multi-actions{border-top:1px solid #e5edef;margin-top:6px;padding:7px 2px 2px;text-align:right}
.multi-actions button{border:0;background:none;color:#00719D;font-size:11px;font-weight:700;cursor:pointer;margin-left:10px}
.tag-list{margin-top:7px}
.tag{display:inline-block;background:#eaf6f8;color:#00719D;border-radius:15px;padding:4px 9px;font-size:10px;margin:3px}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.btn-secondary{background:#eef4f6;color:#355360}
.btn-danger{background:#d9534f;color:#fff}
.btn-sm{padding:9px 14px;font-size:12px}
.validation-error{border-color:#d9534f!important}
.error-text{color:#d9534f;font-size:11px;margin-top:5px;display:block}
.success-text{color:#087a61;font-size:11px;margin-top:5px;display:block}
.progress{height:8px;background:#e7eff1;border-radius:8px;overflow:hidden}
.progress-bar{height:100%;width:65%;background:#00719D}
.badge{display:inline-block;border-radius:12px;padding:4px 9px;font-size:10px;font-weight:700;background:#eaf6f8;color:#00719D}
.badge-orange{background:#fff3d2;color:#8b6800}
.badge-green{background:#e7f7f1;color:#087a61}
.ui-table{width:100%;border-collapse:collapse;font-size:12px}
.ui-table th,.ui-table td{border-bottom:1px solid #e3ecef;text-align:left;padding:11px}
.ui-table th{background:#f5f9fa;color:#355360}
@media(max-width:900px){.form-group.third{width:50%}}
@media(max-width:680px){.form-group,.form-group.third{width:100%}.form-card{padding:20px}.form-actions{flex-wrap:wrap}}


.danger-text {
    display: none;
    color: #dc3545;
    font-size: 12px;
    margin-top: 6px;
}

.place-right
{
	float:right!important;
}
.place-left
{
	float:left!important;
}

.btn:hover
{
	cursor:pointer!important;
}