/* ============================================================================
   CSS for the standalone "About Us" page. Base tokens already defined sitewide
   in theme.css: .btn-primary, .link-arrow, .ease-spring, .shadow-card,
   .noise, [data-reveal].
   ============================================================================ */
.co-value-card { background: #fff; border: 1px solid #181A1B; border-radius: 16px; padding: 1.5rem; transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease; }
.co-value-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(24,26,27,.2); }
.co-value-icon { width: 40px; height: 40px; border-radius: 10px; background: #EDF4FF; color: #0164FF; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }

/* ---- Why Bluemetrix: faint world map behind the card grid ---- */
.co-why-map { position: absolute; top: 50%; right: -6%; width: 58%; min-width: 440px; transform: translateY(-50%); opacity: .07; pointer-events: none; }

/* ---- Hero: dotted texture, same family as the reference's dark hero background ---- */
.co-hero-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.18) 1.4px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 45%, #000 40%, transparent 85%); mask-image: radial-gradient(ellipse 70% 90% at 50% 45%, #000 40%, transparent 85%); }

/* ---- Partner ecosystem band: full-bleed dark section, continuous flowing marquee -- same
   technique as the homepage/solution-page marquees. ---- */
.co-partner-band { background: #181A1B; overflow: hidden; }
.co-marquee { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.co-marquee__track { display: flex; align-items: center; width: max-content; gap: 3.5rem; animation: co-marquee-scroll 38s linear infinite; will-change: transform; }
.co-marquee__logo { height: 28px; width: auto; flex-shrink: 0; object-fit: contain; filter: brightness(0) invert(1); opacity: .75; }
@keyframes co-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .co-marquee__track { animation: none; } }