/* Bamboo Pay visual foundation — shared tokens and reusable components */
:root {
  --bp-navy-950: #071b35;
  --bp-navy-900: #0a2850;
  --bp-navy-800: #113b70;
  --bp-cyan-600: #00a9d6;
  --bp-cyan-500: #12c7ee;
  --bp-cyan-100: #dff8ff;
  --bp-white: #ffffff;
  --bp-slate-900: #162336;
  --bp-slate-700: #46566c;
  --bp-slate-500: #718096;
  --bp-slate-200: #dce4ed;
  --bp-slate-100: #f4f7fa;
  --bp-font-sans: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bp-font-display: "Raleway", var(--bp-font-sans);
  --bp-space-1: .25rem;
  --bp-space-2: .5rem;
  --bp-space-3: .75rem;
  --bp-space-4: 1rem;
  --bp-space-5: 1.5rem;
  --bp-space-6: 2rem;
  --bp-space-8: 3rem;
  --bp-space-10: 4rem;
  --bp-space-12: 5rem;
  --bp-radius-sm: .5rem;
  --bp-radius-md: .875rem;
  --bp-radius-lg: 1.25rem;
  --bp-radius-pill: 999px;
  --bp-shadow-sm: 0 2px 8px rgba(7, 27, 53, .08);
  --bp-shadow-md: 0 14px 34px rgba(7, 27, 53, .12);
  --bp-shadow-lg: 0 24px 56px rgba(7, 27, 53, .16);
  --bp-container: 1200px;
  --bp-transition: 180ms ease;
}

html { scroll-behavior: smooth; }
body { background: var(--bp-white); color: var(--bp-slate-700); font-family: var(--bp-font-sans); }
body.menu-open { overflow: hidden; }
a { color: var(--bp-navy-800); }
a:hover { color: var(--bp-cyan-600); }
:focus-visible { outline: 3px solid var(--bp-cyan-500); outline-offset: 3px; }

.skip-link { position: fixed; z-index: 2000; top: 1rem; left: 1rem; padding: .75rem 1rem; border-radius: var(--bp-radius-sm); background: var(--bp-white); color: var(--bp-navy-900); box-shadow: var(--bp-shadow-md); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-container { width: min(calc(100% - 2rem), var(--bp-container)); margin-inline: auto; }
.section { padding: var(--bp-space-10) 0; }
.section--muted, .light-background { background: var(--bp-slate-100); }
.eyebrow, .section-title > span { display: inline-flex; align-items: center; gap: var(--bp-space-2); margin: 0 0 var(--bp-space-3); color: var(--bp-cyan-600); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.section-heading, .section-title h2 { color: var(--bp-navy-950); font-family: var(--bp-font-display); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.section-title { margin-bottom: var(--bp-space-8); }
.section-title p { max-width: 44rem; margin: var(--bp-space-4) auto 0; color: var(--bp-slate-700); }

.site-header { position: sticky; z-index: 1000; top: 0; border-bottom: 1px solid rgba(220, 228, 237, .8); background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); }
.site-header__inner { display: flex; min-height: 4.75rem; align-items: center; justify-content: flex-start; gap: var(--bp-space-4); }
.site-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .65rem; margin-right: auto; color: var(--bp-navy-950); font-family: var(--bp-font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.site-brand:hover { color: var(--bp-navy-950); }
.site-brand img { width: 2rem; height: 2rem; border-radius: .65rem; }
.site-brand__pay { color: var(--bp-cyan-600); }
.site-nav { display: flex; align-items: center; gap: var(--bp-space-4); }
.site-nav > .site-nav__list { display: flex !important; flex-flow: row nowrap; align-items: center; gap: var(--bp-space-5); margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.site-nav > .site-nav__list > li { flex: 0 0 auto; }
.site-nav__link { display: block; padding: .5rem 0; color: var(--bp-slate-700); font-size: .94rem; font-weight: 650; text-decoration: none; transition: color var(--bp-transition); }
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--bp-navy-900); }
.site-nav__link[aria-current="page"]::after { display: block; width: .35rem; height: .35rem; margin: .35rem auto 0; border-radius: 50%; background: var(--bp-cyan-500); content: ""; }
.site-header__cta { margin-left: var(--bp-space-2); }
.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--bp-slate-200); border-radius: var(--bp-radius-sm); background: var(--bp-white); color: var(--bp-navy-900); font-size: 1.2rem; }

.button, .btn-getstarted, .btn-get-started, .cta-btn { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.1rem; border: 1px solid transparent; border-radius: var(--bp-radius-pill); background: var(--bp-navy-900); box-shadow: 0 6px 16px rgba(10, 40, 80, .18); color: var(--bp-white); font-size: .92rem; font-weight: 750; line-height: 1; text-decoration: none; transition: transform var(--bp-transition), background var(--bp-transition), box-shadow var(--bp-transition); }
.button:hover, .btn-getstarted:hover, .btn-get-started:hover, .cta-btn:hover { transform: translateY(-2px); background: var(--bp-navy-800); box-shadow: var(--bp-shadow-md); color: var(--bp-white); }
.button--primary, .site-header .btn-getstarted { background: var(--bp-cyan-600); }
.button--primary:hover, .site-header .btn-getstarted:hover { background: #008db8; }
.button--secondary { border-color: var(--bp-navy-900); background: transparent; box-shadow: none; color: var(--bp-navy-900); }
.button--secondary:hover { background: var(--bp-navy-900); color: var(--bp-white); }

.card, .service-item { height: 100%; padding: var(--bp-space-6); border: 1px solid var(--bp-slate-200); border-radius: var(--bp-radius-lg); background: var(--bp-white); box-shadow: var(--bp-shadow-sm); transition: transform var(--bp-transition), border-color var(--bp-transition), box-shadow var(--bp-transition); }
.card:hover, .service-item:hover { transform: translateY(-4px); border-color: rgba(0, 169, 214, .45); box-shadow: var(--bp-shadow-md); }
.icon-box, .service-item .icon { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; margin-bottom: var(--bp-space-5); border-radius: var(--bp-radius-md); background: var(--bp-cyan-100); color: var(--bp-navy-900); font-size: 1.35rem; }
.service-item .icon i { color: inherit; font-size: inherit; }
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .65rem; border-radius: var(--bp-radius-pill); background: var(--bp-cyan-100); color: var(--bp-navy-900); font-size: .78rem; font-weight: 750; }
.cta-panel, .call-to-action { position: relative; overflow: hidden; border-radius: var(--bp-radius-lg); background: linear-gradient(125deg, var(--bp-navy-950), var(--bp-navy-800)); color: var(--bp-white); }
.call-to-action::before { position: absolute; inset: auto -8rem -10rem auto; width: 24rem; height: 24rem; border: 3rem solid rgba(18, 199, 238, .16); border-radius: 50%; background: none; content: ""; }
.call-to-action h3, .call-to-action p { position: relative; color: var(--bp-white); }
.call-to-action .cta-btn { position: relative; background: var(--bp-cyan-500); color: var(--bp-navy-950); }

.footer { margin-top: 0; padding: var(--bp-space-10) 0 var(--bp-space-5); background: var(--bp-navy-950); color: #bfccdd; }
.footer h2, .footer h3, .footer h4, .footer .sitename { color: var(--bp-white); font-family: var(--bp-font-display); font-weight: 750; }
.footer a { color: #d7e4f2; }
.footer a:hover { color: var(--bp-cyan-500); }
.footer__grid { display: grid; gap: var(--bp-space-8); grid-template-columns: repeat(1, minmax(0, 1fr)); }
.footer__brand { max-width: 22rem; }
.footer__links { margin: var(--bp-space-4) 0 0; padding: 0; list-style: none; }
.footer__links li + li { margin-top: .65rem; }
.footer__bottom { display: flex; flex-direction: column; gap: var(--bp-space-3); margin-top: var(--bp-space-8); padding-top: var(--bp-space-5); border-top: 1px solid rgba(220, 228, 237, .18); font-size: .86rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--bp-space-4); }

.scroll-top { right: 1.25rem; bottom: 1.25rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--bp-cyan-600); box-shadow: var(--bp-shadow-md); color: var(--bp-navy-950); }
.scroll-top:hover { transform: translateY(-2px); background: var(--bp-cyan-500); color: var(--bp-navy-950); }

@media (min-width: 768px) { .section { padding: var(--bp-space-12) 0; } .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (max-width: 991px) { .menu-toggle { display: grid; } .site-nav { position: fixed; z-index: 1001; top: 4.75rem; right: 1rem; left: 1rem; display: none; padding: var(--bp-space-3); border: 1px solid var(--bp-slate-200); border-radius: var(--bp-radius-md); background: var(--bp-white); box-shadow: var(--bp-shadow-lg); } .site-nav.is-open { display: block; } .site-nav__list { gap: .25rem; max-width: 100%; overflow-x: auto; scrollbar-width: thin; } .site-nav__link { padding: .75rem; border-radius: var(--bp-radius-sm); } .site-nav__link:hover { background: var(--bp-slate-100); } .site-nav__link[aria-current="page"]::after { display: none; } .site-header__cta { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }