.home-page { overflow-x: hidden; }
.hero-home { position: relative; overflow: hidden; padding: clamp(4.5rem, 9vw, 8rem) 0; background: linear-gradient(135deg, #f8fcff 0%, #fff 56%, #eafaff 100%); }
.hero-home::before { position: absolute; width: 38rem; height: 38rem; top: -18rem; right: -14rem; border-radius: 50%; background: radial-gradient(circle, rgba(18, 199, 238, .22), transparent 68%); content: ""; }
.hero-home__grid, .control-section__grid, .integration-section__grid { display: grid; gap: 3rem; align-items: center; }
.hero-home__copy { position: relative; max-width: 44rem; }
.hero-home h1 { margin: 0; color: var(--bp-navy-950); font-family: var(--bp-font-display); font-size: clamp(2.65rem, 6.4vw, 5.25rem); font-weight: 800; letter-spacing: -.065em; line-height: .98; }
.hero-home h1 span { color: var(--bp-cyan-600); }
.hero-home__lead { max-width: 38rem; margin: 1.5rem 0 0; color: var(--bp-slate-700); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.65; }
.hero-home__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-home__signature { margin: 1.5rem 0 0; color: var(--bp-slate-500); font-size: .82rem; font-weight: 650; }
.payment-visual { position: relative; min-height: 22rem; display: grid; place-items: center; }
.payment-visual__panel { position: relative; z-index: 2; width: min(100%, 24rem); padding: 1.5rem; border: 1px solid rgba(255,255,255,.8); border-radius: 1.4rem; background: rgba(255,255,255,.88); box-shadow: 0 30px 60px rgba(7, 27, 53, .16); backdrop-filter: blur(12px); }
.payment-visual__glow { position: absolute; width: 17rem; height: 17rem; border-radius: 50%; background: var(--bp-cyan-500); filter: blur(70px); opacity: .32; }
.payment-visual__top, .payment-visual__transaction { display: flex; align-items: center; justify-content: space-between; }
.payment-visual__mark { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .75rem; background: var(--bp-navy-900); color: var(--bp-white); font-weight: 800; }
.payment-visual__status { padding: .38rem .65rem; border-radius: var(--bp-radius-pill); background: #e5faef; color: #087a42; font-size: .75rem; font-weight: 750; }
.payment-visual__label { margin: 1.75rem 0 .25rem; color: var(--bp-slate-500); font-size: .82rem; }
.payment-visual__amount { margin: 0; color: var(--bp-navy-950); font-size: 1.35rem; font-weight: 750; }
.payment-visual__line { display: flex; align-items: end; gap: .42rem; height: 4.5rem; margin: 1.5rem 0; border-bottom: 1px solid var(--bp-slate-200); }
.payment-visual__line span { flex: 1; border-radius: .25rem .25rem 0 0; background: var(--bp-cyan-100); } .payment-visual__line span:nth-child(1){height:32%}.payment-visual__line span:nth-child(2){height:48%}.payment-visual__line span:nth-child(3){height:40%}.payment-visual__line span:nth-child(4){height:73%;background:var(--bp-cyan-500)}.payment-visual__line span:nth-child(5){height:60%}
.payment-visual__transaction { gap: .75rem; justify-content: flex-start; } .payment-visual__transaction .icon-box { width: 2.5rem; height: 2.5rem; margin: 0; font-size: 1rem; } .payment-visual__transaction div { display: grid; gap: .15rem; margin-right: auto; } .payment-visual__transaction strong { color: var(--bp-navy-950); font-size: .82rem; }.payment-visual__transaction small{color:var(--bp-slate-500);font-size:.72rem}.payment-visual__transaction > .bi{color:#15985d}
.payment-visual__orbit { position: absolute; z-index: 1; display: grid; width: 7.5rem; height: 7.5rem; place-items: center; border: 1px solid rgba(0,169,214,.3); border-radius: 50%; color: var(--bp-cyan-600); font-family: var(--bp-font-display); font-size: 3rem; font-weight: 800; }.payment-visual__orbit--one{top:1rem;left:0}.payment-visual__orbit--two{right:0;bottom:1rem;color:var(--bp-navy-800)}
.section-intro { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }.section-intro > p { max-width: 29rem; margin: 0; line-height: 1.65; }
.solutions-grid, .use-cases__grid { display: grid; gap: 1rem; }.solution-card { padding: 2rem; }.solution-card--accent { border-color: rgba(0,169,214,.25); background: linear-gradient(145deg, #fff, #effbff); }.solution-card h3, .flow-list h3, .use-cases h3 { margin: 1rem 0 .75rem; color: var(--bp-navy-950); font-family: var(--bp-font-display); font-size: 1.4rem; font-weight: 750; }.solution-card > p:not(.badge), .use-cases p { line-height: 1.6; }.solution-card__benefit { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1.5rem; color: var(--bp-navy-900); font-weight: 650; }.solution-card__benefit i { color: var(--bp-cyan-600); }.solution-card__link { display: inline-flex; gap: .5rem; align-items: center; margin-top: 1.5rem; font-weight: 750; }.solution-card__link i { transition: transform var(--bp-transition); }.solution-card__link:hover i { transform: translateX(.25rem); }
.control-section { background: var(--bp-navy-950); }.control-section .section-heading { color: var(--bp-white); }.control-section .eyebrow { color: var(--bp-cyan-500); }.control-section__visual { position: relative; min-height: 20rem; display: grid; place-items: center; }.control-ring { position: absolute; width: 16rem; height: 16rem; border: 1px solid rgba(18,199,238,.36); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(18,199,238,.05), 0 0 0 4rem rgba(18,199,238,.03); }.control-list { position: relative; z-index: 1; display: grid; gap: .75rem; width: min(100%, 18rem); }.control-list span { padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--bp-radius-md); background: rgba(255,255,255,.08); color: var(--bp-white); box-shadow: var(--bp-shadow-sm); }.control-list i { margin-right: .5rem; color: var(--bp-cyan-500); }.benefit-list { display: grid; gap: .8rem; margin-top: 1.8rem; }.benefit-list div { display: flex; align-items: center; gap: .8rem; color: #dbe9f7; }.benefit-list i { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .65rem; background: rgba(18,199,238,.14); color: var(--bp-cyan-500); }
.how-section { background: var(--bp-slate-100); }.flow-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: flow; }.flow-list li { position: relative; padding: 1.5rem; border: 1px solid var(--bp-slate-200); border-radius: var(--bp-radius-lg); background: var(--bp-white); }.flow-list__number { color: var(--bp-cyan-600); font-size: .78rem; font-weight: 800; letter-spacing: .08em; }.flow-list .icon-box { margin: 1rem 0 0; }.flow-list p { margin: 0; line-height: 1.55; }
.integration-section__grid { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--bp-slate-200); border-radius: var(--bp-radius-lg); background: linear-gradient(130deg, #fff, #f0fbff); }.integration-section p:not(.eyebrow) { max-width: 36rem; line-height: 1.65; }.integration-section .button { margin-top: .8rem; }.integration-code { display: grid; gap: .75rem; justify-items: center; padding: 1.5rem; border-radius: var(--bp-radius-md); background: var(--bp-navy-950); color: var(--bp-white); }.integration-code div { width: 100%; padding: 1rem; border-radius: .7rem; background: rgba(255,255,255,.08); }.integration-code span { display: block; margin-bottom: .35rem; color: var(--bp-cyan-500); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }.integration-code strong { font-size: .92rem; }.integration-code > i { color: var(--bp-cyan-500); }
.use-cases { background: var(--bp-slate-100); }.use-cases__grid article { padding: 1.5rem; border-radius: var(--bp-radius-md); background: var(--bp-white); }.use-cases__grid article > i { color: var(--bp-cyan-600); font-size: 1.5rem; }.institutional-strip { padding: 1.5rem 0; background: var(--bp-cyan-100); }.institutional-strip .site-container { display: flex; align-items: center; justify-content: center; gap: .75rem; color: var(--bp-navy-900); text-align: center; }.institutional-strip i { font-size: 1.2rem; }.institutional-strip p { margin: 0; }
.final-cta { background: var(--bp-navy-950); }.final-cta .site-container { display: grid; gap: 1.5rem; align-items: center; }.final-cta .eyebrow { color: var(--bp-cyan-500); }.final-cta h2 { max-width: 45rem; margin: 0; color: var(--bp-white); font-family: var(--bp-font-display); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.1; }.final-cta .button { justify-self: start; }
@media (min-width: 640px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); }.use-cases__grid { grid-template-columns: repeat(2, 1fr); }.flow-list { grid-template-columns: repeat(2, 1fr); }.section-intro { grid-template-columns: 1.4fr 1fr; align-items: end; } }
@media (min-width: 992px) { .hero-home__grid, .control-section__grid, .integration-section__grid { grid-template-columns: 1.05fr .95fr; }.hero-home__grid { min-height: 34rem; }.payment-visual { min-height: 29rem; }.flow-list { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }.flow-list li:not(:last-child)::after { position: absolute; top: 50%; left: calc(100% + .15rem); color: var(--bp-cyan-600); font-family: "bootstrap-icons"; font-size: 1.1rem; content: "\f138"; }.use-cases__grid { grid-template-columns: repeat(4, 1fr); }.final-cta .site-container { grid-template-columns: 1fr auto; }.final-cta .button { justify-self: end; } }