/* ---------------------------------------------------------
   Real screenshot of each live-demo landing page (solution-preview),
   framed as a small browser window.
   --------------------------------------------------------- */

.pv { display: block; overflow: hidden; background: #111; pointer-events: none; }

.pv__bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: #26262a; }
.pv__bar i { width: 7px; height: 7px; border-radius: 50%; background: #55555b; }
.pv__bar i:first-child { background: #ff5f57; }
.pv__bar i:nth-child(2) { background: #febc2e; }
.pv__bar i:nth-child(3) { background: #28c840; }
.pv__url { flex: 1; min-width: 0; margin-left: 8px; padding: 2px 10px; border-radius: 6px; background: #17171a; color: #9a9aa0; font: 10.5px/1.5 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* Wide banner above each solution's write-up */
.solution-hero-preview {
    display: block;
    max-width: 760px;
    margin: 0 auto 26px;
    border: 1px solid var(--red-line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

/* Trust strip under the Solutions lead */
.solutions-assurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.solutions-assurance li {
    padding: 8px 16px;
    border: 1px solid var(--red-line-soft);
    border-radius: 999px;
    background: rgba(226, 18, 26, .08);
    font-size: 13px;
    color: var(--text-dim);
}

.solutions-assurance strong { color: #fff; }

.solutions-choose { padding-top: clamp(32px, 5vw, 56px); }


/* ---------------------------------------------------------
   Solution cards: accent per solution, audience label, chips
   --------------------------------------------------------- */

.solution-card { --sc: #e2121a; position: relative; border-color: rgba(255, 255, 255, .09); background: linear-gradient(180deg, #0d0d0e, #080808); }
.solution-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: var(--sc); }
.solution-card--supplier-registration { --sc: #ff2a24; }
.solution-card--supplier-hub { --sc: #ff2a24; }
.solution-card--enterprise-workspace { --sc: #ff2a24; }
.solution-card--lending-suite { --sc: #ff2a24; }
.solution-card--commercecore { --sc: #ff2a24; }
.solution-card--connectcore { --sc: #ff2a24; }
.solution-card--customized-web { --sc: #ff2a24; }

.solution-card:hover { border-color: var(--sc); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 30px color-mix(in srgb, var(--sc) 28%, transparent); }
.solution-card__preview { overflow: hidden; }
.solution-card__preview .pv { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.solution-card:hover .solution-card__preview .pv { transform: scale(1.06); }

.solution-card__live {
    position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; backdrop-filter: blur(4px);
}
.solution-card__live i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); animation: sc-pulse 1.8s infinite; }
@keyframes sc-pulse { 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
@media (prefers-reduced-motion: reduce) { .solution-card__live i { animation: none; } .solution-card__preview .pv { transition: none; } .solution-card:hover .solution-card__preview .pv { transform: none; } }

.solution-card__body { gap: 10px; }
.solution-card__audience { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #f5a400; }
.solution-card__name { font-size: 20px; line-height: 1.25; }
.solution-card__tagline { margin: 0; color: var(--sc); }
.solution-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; padding: 0; list-style: none; }
.solution-card__chips li { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font-size: 12px; color: #d4d4d8; }
.solution-card__actions { align-items: center; gap: 16px; width: 100%; padding-top: 6px; }
.solution-card__more { font-size: 13px; font-weight: 700; color: #d4d4d8; text-decoration: none; }
.solution-card__more:hover { color: var(--sc); }
.solution-card__more:focus-visible { outline: 2px solid var(--sc); outline-offset: 3px; border-radius: 3px; }