:root {
     --teal: #2dd4bf;
     --teal-dark: #14b8a6;
     --dark: #0f1f2e;
     --darker: #0a1825;
     --light-bg: #f4f7f8;
     --muted: #6b7c8a;
     --muted-secondry: #676869;
 }

 body {
     font-family: 'Inter', sans-serif;
     color: #0f1f2e;
     background: #fff;
     font-size: clamp(.95rem, 1vw, 1rem);
     padding-top: "90px" !important
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     overflow-wrap: anywhere;
 }

 h2 {
     font-size: clamp(1.55rem, 3.4vw, 2rem);
 }

 h4 {
     font-size: clamp(1.15rem, 2.4vw, 1.5rem);
 }

 h5 {
     font-size: clamp(1rem, 2vw, 1.25rem);
 }

 h6 {
     font-size: clamp(.92rem, 1.7vw, 1rem);
 }

 p,
 a,
 span,
 small,
 div {
     overflow-wrap: break-word;
 }

 .text-teal {
     color: var(--teal-dark) !important;
     font-weight: 700;
 }

 .bg-teal {
     background: var(--teal) !important;
 }

 .bg-dark-navy {
     background: var(--darker) !important;
     color: #fff;
 }

 .btn-teal {
     background: var(--teal);
     border: none;
     color: #fff;
     font-weight: 600;
     border-radius: 8px;
 }

 .btn-teal:hover {
     background: var(--teal-dark);
     color: #fff;
 }

 .btn-dark-navy {
     background: var(--darker);
     color: #fff;
     border-radius: 10px;
     font-weight: 600;
 }

 .btn-dark-navy:hover {
     background: #000;
     color: #fff;
 }

 /* Navbar */
 .navbar-brand {
     font-weight: 800;
     font-style: italic;
     letter-spacing: 1px;
 }

 .brand-logo {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: var(--teal);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-weight: 800;
     margin-right: 8px;
     font-size: clamp(.62rem, 1.4vw, .7rem);
 }

 /* Hero */
 .hero {
     background-image: url('/assets/images/bg1.jpg');
     background-size: cover;
     background-position: bottom;
     background-repeat: no-repeat;
     padding: 60px 0;
     position: relative;
     overflow: hidden;

 }


 .bg-image {
     background-image: url('/assets/images/bg2.png');
     background-size: cover;
     background-position: bottom;
     background-repeat: no-repeat;
     padding: 60px 0;
     position: relative;
     overflow: hidden;

 }




 .hero h1 {
     font-weight: 800;
     font-size: clamp(2.15rem, 6.5vw, 4rem);
     line-height: 1.1;
 }

 .feature-icon {
     width: 65px;
     height: 65px;
     border-radius: 10px;
     background: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
     color: var(--teal-dark);
     font-size: clamp(1rem, 2.2vw, 1.2rem);
     margin-bottom: 16px;
 }

 .store-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 6px 24px;
     border-radius: 10px;
     font-weight: 600;
     text-decoration: none;
 }

 .store-btn .small {
     font-size: clamp(.58rem, 1.5vw, .65rem);
     display: block;
     font-weight: 400;
     opacity: .8;
 }

 .store-btn .big {
     font-size: clamp(.82rem, 2vw, .95rem);
     display: block;
     line-height: 1;
 }

 .store-dark {
     background: #0a1825;
     color: #fff;
 }

 .store-light {
     background: #fff;
     color: #0a1825;
     /* border: 1px solid #e2e8f0; */
     border: 2px solid var(--teal);
 }

 .qr-card {
     background: #fff;
     border-radius: 16px;
     padding: 24px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
 }

 .qr-box {
     border: 2px solid var(--teal);
     padding: 8px;
     border-radius: 8px;
     display: inline-block;
 }

 .qr-box img {
     width: 160px;
     height: 160px;
     display: block;
 }

 .stat-num {
     font-size: clamp(1.45rem, 4.2vw, 1.8rem);
     font-weight: 500;
     color: var(--teal-dark);
     line-height: 1.2;
 }

 .stat-label {
     font-size: clamp(.85rem, 1.7vw, 1rem);
     color: var(--darker);
 }

 /* CTA banner */
 .cta-banner {
     background: var(--darker);
     color: #fff;
     border-radius: 20px;
     padding: 50px 30px;
     text-align: center;
 }

 .cta-banner h2 {
     font-weight: 800;
     font-size: clamp(1.55rem, 4.2vw, 2.5rem);
 }

 .eyebrow {
     color: var(--teal);
     font-weight: 700;
     letter-spacing: .5px;
     font-size: clamp(1.05rem, 3vw, 1.875rem);
 }

 /* Download cards */
 .dl-card {
     border-radius: 16px;
     padding: 42px 30px 30px;
     text-align: center;
     height: 100%;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .dl-card.light {
     background: #fff;
     border: 1px solid #eef2f3;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
 }

 .dl-card.dark {
     background: var(--darker);
     color: #fff;
 }

 .fs-3 {
     font-size: 1.75rem;
 }

 .dl-icon {
     width: 70px;
     height: 70px;
     border-radius: 19%;
     background: #eaf7f5;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--teal-dark);
     font-size: clamp(1.1rem, 2.6vw, 1.4rem);
     margin: 0;
     position: absolute;
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
     box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
 }

 .dl-card.dark .dl-icon {
     background: #1a2a3a;
 }

 /* Vision card */
 .vision-card {
     background: var(--darker);
     color: #fff;
     border: 2px solid var(--teal);
     border-radius: 20px;
     padding: 36px;
     overflow: hidden;
 }

 .vision-eyebrow {
     color: var(--teal);
     font-weight: 600;
     flex-wrap: wrap;
 }

 .vision-card blockquote {
     font-size: clamp(1.75rem, 4.2vw, 2.3rem);
     font-weight: 700;
     border: none;
     padding: 0;
     margin: 16px 0;
 }

 .vision-divider {
     border-top: 1px solid rgba(255, 255, 255, .1);
     margin: 24px 0;
 }

 .badge-soft {
     background: rgba(45, 212, 191, .15);
     color: var(--teal);
     padding: 8px 14px;
     border-radius: 8px;
     font-size: clamp(.78rem, 1.6vw, .85rem);
     font-weight: 500;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .vision-feature-bar {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) 1px auto;
     align-items: center;
     gap: clamp(14px, 2.5vw, 20px);
     padding: 20px 22px;
     border-top: 1px solid rgba(134, 134, 134, 0.842);
     width: 100%;
     min-width: 0;
     margin-top: 30px;
 }

 .vision-feature-icon {
     width: clamp(58px, 7vw, 60px);
     height: clamp(58px, 7vw, 60px);
     border-radius: 14px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, rgba(45, 212, 191, .28), rgba(20, 184, 166, .08));
     color: var(--teal);
     font-size: clamp(2rem, 5vw, 2rem);
     box-shadow: inset 0 0 24px rgba(45, 212, 191, .15);
 }

 .vision-feature-copy {
     color: var(--teal);
     font-size: clamp(1rem, 2.1vw, 1.1rem);
     line-height: 1.2;
     min-width: 0;
     overflow-wrap: anywhere;
 }

 .vision-feature-copy strong {
     display: block;
     margin-top: 4px;
     color: #fff;
     font-size: 1.2rem;
     line-height: 1.1;
     overflow-wrap: anywhere;
 }

 .vision-feature-divider {
     width: 1px;
     height: clamp(52px, 7vw, 66px);
     background: rgba(255, 255, 255, .45);
 }

 .vision-feature-globe {
     width: clamp(54px, 7vw, 70px);
     height: clamp(54px, 7vw, 70px);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--teal);
     font-size: clamp(2.4rem, 5vw, 2.3rem);
 }

 .check-icon {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: #eaf7f5;
     color: var(--teal-dark);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 @media (max-width: 1199.98px) {
     .vision-card {
         padding: 28px;
     }

     .vision-feature-bar {
         grid-template-columns: auto minmax(0, 1fr);
         padding: 18px;
     }

     .vision-feature-divider,
     .vision-feature-globe {
         display: none;
     }
 }

 /* Big CTA */
 .big-cta {
     background: var(--teal);
     border-radius: 20px;
     padding: 60px 30px;
     text-align: center;
     color: #fff;
 }

 .big-cta h2 {
     font-weight: 800;
     font-size: clamp(1.55rem, 4vw, 2.4rem);
 }

 /* Footer */
 footer {
     background: #0a1825;
     color: #fff;
     padding: 50px 0 24px;
 }

 footer a {
     color: #cbd5e0;
     text-decoration: none;
 }

 .social-icon {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: #1a2a3a;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     margin-left: 6px;
 }

 @media(max-width:768px) {
     .hero h1 {
         font-size: clamp(2.15rem, 6.5vw, 4rem);
     }

     .cta-banner h2,
     .big-cta h2 {
         font-size: clamp(1.55rem, 4.2vw, 2.5rem);
     }
 }

 /* Scroll reveal animations */
 .reveal {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity .8s ease, transform .8s ease;
 }

 .reveal.from-left {
     transform: translateX(-50px);
 }

 .reveal.from-right {
     transform: translateX(50px);
 }

 .reveal.zoom-in {
     transform: scale(.9);
 }

 .reveal.visible {
     opacity: 1;
     transform: translate(0, 0) scale(1);
 }

 /* Hero pulse on feature icons */
 .feature-icon {
     transition: transform .3s ease;
 }

 .feature-icon:hover {
     transform: translateY(-4px) scale(1.05);
 }

 /* Floating animation for QR card */
 @keyframes floaty {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 .qr-card {
     animation: floaty 4s ease-in-out infinite;
 }

 /* Store buttons hover */
 .store-btn {
     transition: transform .25s ease, box-shadow .25s ease;
 }

 .store-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
 }

 /* Download cards hover */
 .dl-card {
     transition: transform .3s ease, box-shadow .3s ease;
 }

 .dl-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
 }

 /* Navbar scroll state */
 .navbar.scrolled {
     box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
     backdrop-filter: blur(10px);
     background: rgba(255, 255, 255, .95) !important;
 }

 /* Scroll-to-top button */
 .scroll-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: var(--teal);
     color: #fff;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: clamp(1.1rem, 3vw, 1.4rem);
     box-shadow: 0 8px 24px rgba(45, 212, 191, .5);
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     transition: all .35s ease;
     z-index: 1000;
 }

 .scroll-top.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .scroll-top:hover {
     background: var(--teal-dark);
     transform: translateY(-4px);
 }

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


 .start-border {
     border-left: 1px solid 1px solid #a6a7a966
 }

 .end-border {
     border-right: 1px solid #a6a7a966
 }


 .start-border-funding {
     border-left: 2px solid var(--teal-dark);
 }

 .border-word {
     border-bottom: 3px solid var(--teal-dark);
     /* padding-bottom: 4px; */
 }


 .fs-23 {
     font-size: clamp(1rem, 2vw, 1.4375rem);
 }


 .feature-icon.icon-fast-funding {
     background: url('/assets/icons/Fast Funding.svg') no-repeat center;
     background-size: contain;
 }

 .feature-icon.icon-trusted-partner {
     background: url('/assets/icons/Trusted Partner.svg') no-repeat center;
     background-size: contain;
 }

 .feature-icon.icon-growth-focused {
     background: url('/assets/icons/Growth Focused.svg') no-repeat center;
     background-size: contain;
 }

 .fs-50 {
     font-size: clamp(2rem, 5vw, 3.5rem);
 }



 .quote-text {
     color: #fff;
     font-size: clamp(1.75rem, 4.7vw, 3rem);
     line-height: 1.1;
     position: relative;
 }

 .quote-open {
     color: #00d4d4;
     vertical-align: top;
 }

 .quote-close {
     color: #00d4d4;
     line-height: 0;
     vertical-align: middle;
 }

 @media (max-width: 768px) {
     .quote-text {
         font-size: clamp(1.75rem, 4.7vw, 3rem);
     }

     .quote-close {
         font-size: clamp(1.75rem, 4.7vw, 3rem);
     }
 }


 @font-face {
     font-family: "FasterOne";
     src: url("../assets/fonts/FasterOne-eKem.ttf") format("truetype");
     font-style: normal;
     font-weight: 400;
 }

 .logo-title {
     font-family: "FasterOne", cursive;
     font-weight: 400;
     font-size: clamp(.8rem, 3.2vw, 2.1875rem);
 }


 /* ── Navbar ─────────────────────────────────────── */
 #mainNavbar {
     min-height: 90px;
     padding-top: 0;
     padding-bottom: 0;
     transition: box-shadow 0.25s ease;
 }

 /* Logo image */
 .nav-logo {
     height: 66px;
     /* scaled up from 44px to suit 90px bar */
     width: auto;
     display: block;
 }

 /* Logo text */
 .logo-title {
     font-size: clamp(.8rem, 3.2vw, 2.1875rem);
     /* slightly larger to match taller bar */
     font-weight: 400;
     letter-spacing: 0.05em;
     color: #0d1b3e;
     white-space: nowrap;
 }

 /* Nav link hover underline */
 .navbar-nav .nav-link {
     position: relative;
     padding-bottom: 4px;
 }

 .navbar-nav .nav-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--teal-dark);
     ;
     border-radius: 2px;
     transition: width 0.25s ease;
 }

 .navbar-nav .nav-link:hover::after,
 .navbar-nav .nav-link:focus::after {
     width: 100%;
 }

 /* Toggler */
 .navbar-toggler {
     border: 1.5px solid #d1d5db;
     border-radius: 8px;
     padding: 5px 10px;
 }

 .navbar-toggler:focus {
     box-shadow: 0 0 0 3px rgba(6, 222, 230, 0.2);
 }

 /* ── Mobile collapsed menu ──────────────────────── */
 @media (max-width: 991.98px) {
     #mainNavbar {
         min-height: 70px;
         /* reduced from 90px for mobile comfort */
     }

     .navbar-brand {
         min-width: 0;
         max-width: calc(100% - 54px);
     }

     .nav-logo {
         height: 42px;
         /* scaled down from 60px */
     }

     .logo-title {
         font-size: clamp(.72rem, 3.4vw, .95rem);
         letter-spacing: 0.03em;
         min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
     }

     .navbar-collapse {
         /* background: #ffffff; */
         border-top: 1px solid #e5e7eb;
         border-radius: 0 0 12px 12px;
         padding: 12px 8px 16px;
         margin-top: 8px;
         /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); */
     }

     .navbar-nav .nav-link {
         padding: 10px 12px;
         border-radius: 8px;
     }

     .navbar-nav .nav-link:hover {
         background: #f0f5ff;
     }

     .navbar-nav .nav-link::after {
         display: none;
     }

     .navbar-nav .nav-item:last-child {
         padding: 8px 4px 0;
     }

     .navbar-nav .nav-item:last-child .btn {
         width: 100%;
         text-align: center;
     }
 }

 /* ── Tiny phones ≤ 360px ────────────────────────── */
 @media (max-width: 360px) {
     #mainNavbar {
         min-height: 60px;
     }

     .nav-logo {
         height: 32px;
     }

     .logo-title {
         font-size: clamp(.64rem, 3.2vw, .76rem);
     }
 }

 /* ── Body offset for fixed navbar ───────────────── */
 body {
     padding-top: 90px;
     /* matches desktop navbar height */
 }

 @media (max-width: 991.98px) {
     body {
         padding-top: 70px;
         /* matches mobile navbar height */
     }
 }

 @media (max-width: 360px) {
     body {
         padding-top: 60px;
         /* matches tiny phone navbar height */
     }
 }








 /* ── QR Scanner Box ─────────────────────────────── */
 .qr-box {
     position: relative;
     display: inline-block;
     padding: 10px;
     border-radius: 12px;
     background: #f8f9fa;
     overflow: hidden;
 }

 .qr-box img {
     display: block;
     width: 180px;
     height: 180px;
     border-radius: 8px;
 }

 /* Top-left bracket corner */
 .qr-box .corner-tl,
 .qr-box .corner-tr {
     position: absolute;
     width: 18px;
     height: 14px;
     border-color: #2de0c8;
     border-style: solid;
     top: 6px;
     z-index: 4;
 }

 .qr-box .corner-tl {
     left: 6px;
     border-width: 2px 0 0 2px;
     border-radius: 3px 0 0 0;
 }

 .qr-box .corner-tr {
     right: 6px;
     border-width: 2px 2px 0 0;
     border-radius: 0 3px 0 0;
 }

 /* Full-width scan bar */
 .qr-box .scan-bar {
     position: absolute;
     left: 0;
     right: 0;
     height: 3px;
     z-index: 3;
     animation: sweep 2.2s ease-in-out infinite;
     pointer-events: none;
 }

 /* Teal glowing line */
 .qr-box .scan-bar::before {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 2.5px;
     background: #2de0c8;
     box-shadow: 0 0 6px 2px rgba(45, 224, 200, 0.7),
         0 0 14px 4px rgba(45, 224, 200, 0.35);
     border-radius: 2px;
 }

 /* Soft teal glow spread below the line */
 .qr-box .scan-bar::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     height: 18px;
     background: linear-gradient(to bottom,
             rgba(45, 224, 200, 0.18),
             transparent);
 }

 @keyframes sweep {
     0% {
         top: 10px;
         opacity: 0;
     }

     8% {
         opacity: 1;
     }

     92% {
         opacity: 1;
     }

     100% {
         top: calc(100% - 14px);
         opacity: 0;
     }
 }

 @media (max-width: 767.98px) {

     html,
     body {
         overflow-x: hidden;
     }

     .hero {
         padding: 40px 0;
         text-align: center;
     }

     .hero .row {
         --bs-gutter-y: 2rem;
     }

     .hero p,
     .hero .row.g-3,
     .hero .border-top {
         margin-left: auto;
         margin-right: auto;
     }

     .hero .row.g-3 {
         --bs-gutter-y: 1.25rem;
     }

     .hero .row.g-3>.col-4 {
         width: 100%;
     }

     .feature-icon {
         width: 54px;
         height: 54px;
         margin-bottom: 10px;
     }

     .fs-3 {
         font-size: 2rem !important
     }

     .fs-23 {
         font-size: clamp(1rem, 2vw, 1.4375rem);
     }

     .store-btn {
         width: 100%;
         max-width: 170px;
         justify-content: center;
         padding: 9px 24px;
     }

     .mt {
         margin-top: 10px;
     }

     .mt-20 {
         margin-top: 20px;
     }

     .hero .d-flex.flex-wrap.gap-5 {
         gap: 1rem !important;
         justify-content: center;
     }

     .stat-num {
         font-size: clamp(1.45rem, 4.2vw, 1.8rem);
         line-height: 1.2;
     }

     .stat-label {
         font-size: clamp(.85rem, 1.7vw, 1rem);
     }

     .end-border {
         border-right: 0;
     }

     .hero .border-top {
         justify-content: center;
     }

     .qr-card .text-start {
         text-align: center !important;
     }

     .vision-feature-bar {
         grid-template-columns: auto minmax(0, 1fr);
         gap: 14px;
         padding: 18px 14px;
         text-align: left;
     }

     .vision-feature-icon {
         width: 60px;
         height: 60px;
     }

     .vision-feature-divider {
         display: none;
     }

     .vision-feature-globe {
         display: none;
     }

     .qr-card,
     .vision-card {
         padding: 24px 18px;
     }

     .vision-card .quote-text {
         margin-top: 1.75rem !important;
     }

     .vision-card p {
         line-height: 1.55;
     }

     .dl-card {
         padding: 44px 18px 24px;
     }

     .cta-banner,
     .big-cta {
         border-radius: 16px;
         padding: 36px 18px;
     }

     .eyebrow {
         font-size: clamp(1.05rem, 3vw, 1.875rem);
     }

     .reveal.from-left,
     .reveal.from-right {
         transform: translateY(30px);
     }

     .reveal.from-left.visible,
     .reveal.from-right.visible {
         transform: translate(0, 0) scale(1);
     }
 }

 @media (max-width: 380px) {
     .navbar-brand {
         gap: .35rem !important;
     }

     .navbar-toggler {
         padding: 4px 7px;
     }

     .quote-text {
         font-size: clamp(1.65rem, 4.7vw, 3rem);
     }
 }


 @media (min-width: 992px) and (max-width: 1399px) {
     .stat-num {
         font-size: 24px;
     }

     .quote-text-box {
         font-size: 40px;
         line-height: 50px;
     }

     .vision-feature-bar {

         gap: clamp(14px, 2.5vw, 0px);
         padding: 21px 0px;
     }

     .vision-feature-copy {
         font-size: 1rem !important;
     }

     .vision-feature-copy strong {
         font-size: 1rem;
     }

     .nav-logo {
         width: 60px;
         height: auto;
     }



 }










 .nav-logo {
     width: 65px;
     height: auto;
 }

 /* .logo-title {
     font-weight: 700;
     color: #0f172a;
 } */

 .btn-teal {
     background: #14b8a6;
     color: #fff;
     border: none;
 }

 .btn-teal:hover {
     background: #0f9b8b;
     color: #fff;
 }

 .menu-icon {
     color: #14b8a6;
     transition: .3s;
 }

 .navbar-toggler:focus {
     box-shadow: none;
 }

 @media(max-width:991px) {

     .navbar-collapse {
         padding-top: 15px;
     }

     .navbar-nav {
         text-align: center;
     }

     .btn-teal {
         width: 100%;
     }

     .logo-title {
         font-size: 1rem;
     }

     .nav-logo {
         width: 60px;
     }

 }