.reference-hero { overflow: hidden; padding: clamp(4.5rem, 9vw, 8rem) 0; background: linear-gradient(135deg, #f7fcff, #fff 60%, #e5f9ff); }.reference-hero__grid, .what-is, .benefits-reference__grid { display: grid; gap: 3rem; align-items: center; }.reference-hero h1 { max-width: 44rem; margin: 0; color: var(--bp-navy-950); font-family: var(--bp-font-display); font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; }.reference-hero p:not(.eyebrow) { max-width: 38rem; margin: 1.5rem 0; font-size: 1.1rem; line-height: 1.65; }.reference-hero__visual { position: relative; min-height: 19rem; display: grid; place-items: center; }.reference-card { position: relative; z-index: 2; width: min(100%, 23rem); padding: 1.5rem; border: 1px solid rgba(255,255,255,.8); border-radius: 1.25rem; background: rgba(255,255,255,.88); box-shadow: var(--bp-shadow-lg); backdrop-filter: blur(12px); }.reference-card__top { display: flex; align-items: center; gap: .6rem; color: var(--bp-slate-700); font-size: .84rem; font-weight: 650; }.reference-card__brand { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: .7rem; background: var(--bp-navy-900); color: var(--bp-white); font-weight: 800; }.reference-card__label { display: block; margin-top: 2rem; color: var(--bp-slate-500); font-size: .75rem; }.reference-card__code { display: block; margin-top: .35rem; color: var(--bp-navy-950); font-family: var(--bp-font-display); font-size: 1.7rem; letter-spacing: .09em; }.reference-card__status { display: flex; align-items: center; gap: .45rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--bp-slate-200); color: #087a42; font-size: .84rem; font-weight: 700; }.reference-orbit { position: absolute; z-index: 1; display: grid; width: 8rem; height: 8rem; place-items: center; border: 1px solid rgba(0,169,214,.28); border-radius: 50%; color: var(--bp-cyan-600); font-family: var(--bp-font-display); font-size: 3rem; font-weight: 800; }.reference-orbit--one { top: .4rem; left: 0; }.reference-orbit--two { right: 0; bottom: .5rem; color: var(--bp-navy-800); }.what-is { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--bp-slate-200); border-radius: var(--bp-radius-lg); background: var(--bp-white); box-shadow: var(--bp-shadow-sm); }.what-is > div:last-child { display: grid; gap: 1rem; }.what-is p { margin: 0; line-height: 1.7; }
.reference-flow { background: var(--bp-slate-100); }.reference-flow__list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }.reference-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); transition: transform var(--bp-transition), box-shadow var(--bp-transition); }.reference-flow__list li:hover { transform: translateY(-3px); box-shadow: var(--bp-shadow-md); }.reference-flow__list > li > span { color: var(--bp-cyan-600); font-size: .78rem; font-weight: 800; letter-spacing: .08em; }.reference-flow__list .icon-box { margin: 1rem 0; }.reference-flow h3, .reference-use-cases h3 { margin: 0 0 .55rem; color: var(--bp-navy-950); font-family: var(--bp-font-display); font-size: 1.15rem; font-weight: 750; }.reference-flow p, .reference-use-cases p { margin: 0; line-height: 1.55; }
.benefits-reference { background: var(--bp-navy-950); }.benefits-reference .section-heading { color: var(--bp-white); }.benefits-reference .eyebrow { color: var(--bp-cyan-500); }.benefits-reference__visual { position: relative; min-height: 20rem; display: grid; place-items: center; }.benefits-reference__circle { position: absolute; width: 15rem; height: 15rem; border: 1px solid rgba(18,199,238,.35); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(18,199,238,.05),0 0 0 4rem rgba(18,199,238,.025); }.benefits-reference__stack { position: relative; z-index: 1; display: grid; gap: .75rem; width: min(100%, 18rem); }.benefits-reference__stack span { padding: 1rem; border: 1px solid rgba(255,255,255,.13); border-radius: var(--bp-radius-md); background: rgba(255,255,255,.08); color: var(--bp-white); }.benefits-reference__stack i { margin-right: .55rem; color: var(--bp-cyan-500); }.benefits-reference__list { display: grid; gap: .8rem; margin-top: 1.75rem; }.benefits-reference__list div { display: flex; align-items: center; gap: .75rem; color: #d7e4f2; }.benefits-reference__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); }
.reference-use-cases { display: grid; gap: 1rem; }.reference-use-cases article { padding: 1.5rem; border: 1px solid var(--bp-slate-200); border-radius: var(--bp-radius-md); background: var(--bp-white); box-shadow: var(--bp-shadow-sm); transition: transform var(--bp-transition), border-color var(--bp-transition); }.reference-use-cases article:hover { transform: translateY(-3px); border-color: rgba(0,169,214,.4); }.reference-use-cases article > i { display: block; margin-bottom: 1rem; color: var(--bp-cyan-600); font-size: 1.45rem; }.reference-final { background: linear-gradient(125deg, #e4faff, #fff); }.reference-final .site-container { display: grid; gap: 1.5rem; align-items: center; }.reference-final h2 { max-width: 43rem; margin: 0; color: var(--bp-navy-950); font-family: var(--bp-font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.1; }.reference-final .button { justify-self: start; }
@media (min-width: 640px) { .reference-use-cases { grid-template-columns: repeat(2, 1fr); } }.reference-flow__list { grid-template-columns: repeat(2, 1fr); } @media (min-width: 992px) { .reference-hero__grid, .what-is, .benefits-reference__grid { grid-template-columns: 1.05fr .95fr; }.reference-hero__visual { min-height: 29rem; }.reference-flow__list { grid-template-columns: repeat(5, 1fr); }.reference-flow__list li:not(:last-child)::after { position: absolute; top: 50%; left: calc(100% + .15rem); z-index: 2; color: var(--bp-cyan-600); font-family: "bootstrap-icons"; content: "\f138"; }.reference-use-cases { grid-template-columns: repeat(5, 1fr); }.reference-final .site-container { grid-template-columns: 1fr auto; }.reference-final .button { justify-self: end; } }