/* Stable product colors, including when the catalog is filtered. */
.system-card {
  --tile-accent: #2862c6;
  --tile-ink: #23456f;
  --tile-body: #eef5ff;
  --tile-art-start: #669cef;
  --tile-art-end: #bcdfff;
  --tile-border: #c9dcf7;
  display: flex; flex-direction: column;
  background: var(--tile-body);
  border: 1px solid var(--tile-border);
  box-shadow: 0 7px 24px #345b8708;
}
.system-card[data-category=health] {
  --tile-accent: #16796f;
  --tile-ink: #245951;
  --tile-body: #edf9f6;
  --tile-art-start: #58bcad;
  --tile-art-end: #b8ecdb;
  --tile-border: #c4e6dc;
}
.system-card[data-category=mobile] {
  --tile-accent: #7845b5;
  --tile-ink: #553477;
  --tile-body: #f6effd;
  --tile-art-start: #b292e8;
  --tile-art-end: #eed0fb;
  --tile-border: #e0cef2;
}
.system-card[data-system=ultimx-hospital] { --tile-art-start: #53bac4; --tile-art-end: #b5eee9; --tile-accent: #137580; --tile-ink: #24505a; --tile-body: #ecf8fa; --tile-border: #bce5e9; }
.system-card[data-system=lifeex-8] { --tile-art-start: #879be9; --tile-art-end: #d0dcff; --tile-body: #f0f3ff; --tile-accent: #5263c2; --tile-border: #d3dcf7; }
.system-card[data-system=ultimx-labs] { --tile-art-start: #81b5e6; --tile-art-end: #c9e9f8; --tile-accent: #3268a6; --tile-ink: #2a527c; --tile-body: #eef7fd; --tile-border: #cadfed; }
.system-card[data-system=ultimx-medical-centers] { --tile-art-start: #79c7c2; --tile-art-end: #c8efe9; }
.system-card[data-system=lifeex-7] { --tile-art-start: #a0a9e7; --tile-art-end: #e0d7fa; --tile-accent: #6c58ac; --tile-ink: #4c3c73; --tile-body: #f4f1fc; --tile-border: #ddd4f0; }
.system-card[data-system=pharmacy-management] { --tile-art-start: #8bc5aa; --tile-art-end: #d4efda; }
.system-card:hover, .system-card:focus-within { border-color: var(--tile-accent); box-shadow: 0 18px 36px color-mix(in srgb,var(--tile-accent) 15%,transparent); }
.system-card::before { background: radial-gradient(350px circle at var(--mx,50%) var(--my,30%), #ffffff25, transparent 70%); }
.system-card .card-art { flex-shrink: 0; margin: 10px 10px 22px; background: radial-gradient(ellipse at 15% 12%, #ffffff32, transparent 50%), linear-gradient(135deg,var(--tile-art-start),var(--tile-art-end)); border: 1px solid #ffffff6b; isolation: isolate; }
.system-card .card-art::after { inset: auto -100px -210px auto; width: 360px; height: 360px; border: 1px solid #ffffff6b; border-radius: 50%; background: none; opacity: 1; box-shadow: 0 0 0 28px #ffffff0d,0 0 0 56px #ffffff0d; z-index: -1; }
.system-card .card-grid { background-image: linear-gradient(#fff3 1px,transparent 1px),linear-gradient(90deg,#fff3 1px,transparent 1px); opacity: .5; }
.system-card .card-art-label { color: color-mix(in srgb,var(--tile-ink) 86%,#fff); font-size: 8px; letter-spacing: 1.8px; z-index: 2; }
.system-card .card-number { color: var(--tile-ink); background: #ffffff50; border: 1px solid #ffffff66; border-radius: 7px; min-width: 25px; height: 25px; display: grid; place-items: center; font-size: 10px; top: 14px; left: 15px; }
.system-card .product-symbol { filter: drop-shadow(-8px 17px 15px color-mix(in srgb,var(--tile-accent) 22%,transparent)); }
.system-card .product-symbol::before, .system-card .product-symbol::after { background: linear-gradient(140deg,#ffffff70,#ffffff29); border: 1px solid #ffffffb0; }
.system-card .product-symbol::before { opacity: .7; }
.system-card .product-symbol::after { opacity: .9; }
.system-card .product-symbol > span { color: var(--tile-accent); background: linear-gradient(145deg,#fff,#ffffffa6); border: 1px solid #fff; box-shadow: inset 0 1px 10px #ffffffa0; }
.system-card .card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 0 25px 25px; }
.system-card .card-category { display: inline-block; padding: 4px 10px; margin-bottom: 12px; border-radius: 7px; background: #ffffff8c; color: var(--tile-accent); font-size: 11px; }
.system-card .card-copy h3 { color: var(--tile-ink); font-weight: 700; }
.system-card .card-copy p { color: color-mix(in srgb,var(--tile-ink) 82%,#fff); margin-bottom: 22px; }
.system-card .card-footer { width: 100%; margin-top: auto; padding-top: 17px; border-color: color-mix(in srgb,var(--tile-accent) 16%,transparent); }
.system-card .card-footer button { min-height: 42px; gap: 22px; padding: 9px 14px; border-radius: 11px; background: var(--tile-accent); color: #fff; font-size: 12px; transition: box-shadow .2s, background .2s; }
.system-card .card-footer button:hover { background: color-mix(in srgb,var(--tile-accent) 90%,#14243b); color: #fff; box-shadow: 0 5px 13px color-mix(in srgb,var(--tile-accent) 22%,transparent); }
.system-card .card-footer .card-pdf { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 11px; border: 1px solid color-mix(in srgb,var(--tile-accent) 20%,transparent); border-radius: 11px; background: #ffffff82; color: var(--tile-accent); font-size: 10px; letter-spacing: .3px; }
.system-card .card-footer .card-pdf:hover { color: var(--tile-accent); background: #fff; border-color: var(--tile-accent); }
.system-card :is(button,a):focus-visible { outline: 2px solid var(--tile-accent); outline-offset: 4px; }
@media (min-width:641px) and (max-width:1100px) {
  .system-card .card-copy { padding-inline: 19px; }
  .system-card .card-footer button { gap: 14px; padding-inline: 12px; }
}
@media (max-width:640px) {
  .system-card .card-copy { padding: 0 22px 22px; }
  .system-card .card-copy p { font-size: 14px; }
  .system-card .card-art { margin-bottom: 19px; }
  .system-card .card-category { font-size: 11px; }
  .system-card .card-footer button { min-height: 44px; font-size: 12px; gap: 20px; }
  .system-card .card-footer .card-pdf { min-height: 44px; }
}
@media (prefers-reduced-motion:reduce) { .system-card:hover { transform: none; } }

/* One CMS image follows each system from its card to the detail page. */
.system-card .system-image-art { height: auto; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px; background: #f4f7fb; }
.system-card .system-image-art::after { display: none; }
.system-card-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.system-card:hover .system-card-image, .system-card:focus-within .system-card-image { transform: scale(1.035); }
.system-card .system-image-art .card-number { z-index: 1; background: #ffffffb8; border-color: #ffffffd9; backdrop-filter: blur(8px); }
.system-image-art.is-fallback .system-card-image { object-fit: contain; padding: 20px; }
.orbit-product-icon.has-image { overflow: hidden; padding: 0; }
.orbit-product-icon.has-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.product-page-grid:has(.product-image-stage) { grid-template-columns: 1fr 1fr; gap: 54px; }
.product-cover-stage.product-image-stage { height: auto; min-height: 0; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid #fff; border-radius: 30px; background: #f4f7fb; box-shadow: 0 22px 60px color-mix(in srgb,var(--product-accent,#7194c6) 15%,transparent); }
.product-cover-stage.product-image-stage > .system-hero-image { display: block; height: 100%; width: 100%; max-width: 100%; object-fit: cover; transform: none; border-radius: 0; box-shadow: none; transition: none; }
.product-cover-stage.product-image-stage.is-fallback > .system-hero-image { object-fit: contain; padding: 28px; }
.detail-cover.detail-system-image { width: 100%; height: auto; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; transform: none; }
@media (max-width:900px) { .product-page-grid:has(.product-image-stage) { gap: 28px; } }
@media (max-width:600px) {
  .product-page-grid:has(.product-image-stage) { grid-template-columns: 1fr; gap: 30px; }
  .product-cover-stage.product-image-stage { border-radius: 22px; }
}
@media (prefers-reduced-motion:reduce) { .system-card .system-card-image { transition: none; transform: none; } }
.motion-off .system-card .system-card-image { transition: none; transform: none; }

/* The original logo accompanies the illustration instead of being baked into it. */
.system-logo-badge,.product-logo-badge { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 78px; height: 72px; display: grid; place-items: center; padding: 8px; border: 1px solid #fff; border-radius: 19px; background: linear-gradient(145deg,#fffffffa,#ffffffec); box-shadow: 0 8px 24px #294b7521,inset 0 1px 2px #fff; backdrop-filter: blur(10px); transform: rotate(-4deg); transition: transform .35s,box-shadow .35s; }
.system-logo-badge::before,.product-logo-badge::before { content: ''; position: absolute; inset: -5px; z-index: -1; border: 1px solid #ffffff8c; border-radius: 24px; transform: rotate(7deg); pointer-events: none; }
.system-logo-badge img,.product-logo-badge img { width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 0; }
.system-card:is(:hover,:focus-within) .system-logo-badge { transform: rotate(0) translateY(-3px); box-shadow: 0 11px 27px #294b7529; }
.product-cover-stage.product-image-stage { position: relative; }
.product-logo-badge { width: 118px; height: 110px; right: 24px; bottom: 24px; padding: 12px; border-radius: 25px; }
.product-logo-badge::before { border-radius: 29px; }
@media(max-width:640px) { .product-logo-badge { width: 84px; height: 78px; right: 15px; bottom: 15px; padding: 8px; border-radius: 19px; } .product-logo-badge::before { border-radius: 23px; } }
.motion-off .system-logo-badge,.motion-off .product-logo-badge { transition: none; }
@media(prefers-reduced-motion:reduce) { .system-logo-badge,.product-logo-badge { transition: none; } }

.system-card .system-image-art.is-logo-art,.product-image-stage.is-logo-art { display: grid; place-items: center; background: radial-gradient(circle at 25% 15%,#ffffffdd,transparent 60%),linear-gradient(135deg,#e6f4fd,#ecedfc); }
.system-card .system-image-art.is-logo-art .system-card-image { width: min(48%,155px); height: 64%; padding: 0; object-fit: contain; filter: drop-shadow(0 13px 12px #345c9a24); }
.product-cover-stage.product-image-stage.is-logo-art > .system-hero-image { width: min(45%,180px); height: 62%; padding: 0; object-fit: contain; filter: drop-shadow(0 17px 16px #345c9a26); }
.suite-membership { display: table; margin-bottom: 16px; padding: 7px 14px; border: 1px solid #bdd6f0; border-radius: 24px; background: #edf7ff; color: #315b8c; font-size: 13px; font-weight: 700; }
.suite-family { margin-block: 48px; }
.suite-family > p { color: #536b85; margin: 12px 0 24px; }
.suite-family-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.suite-family-grid > a { display: flex; gap: 12px; align-items: center; min-height: 102px; padding: 15px; border: 1px solid #d5e4f0; border-radius: 20px; background: linear-gradient(125deg,#f2faff,#f7f4ff); color: #2e5078; transition: border-color .2s,box-shadow .2s; }
.suite-family-grid > a:hover { border-color: #7eabe3; box-shadow: 0 8px 24px #6494cb20; }
.suite-family-grid img { width: 68px; height: 65px; object-fit: contain; }
.suite-family-grid strong { font-size: 13px; line-height: 1.8; flex: 1; }
@media(max-width:1000px) { .suite-family-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .suite-family-grid { grid-template-columns: 1fr; } }
.health-sector-solutions { margin-top: 36px; padding: 26px; border: 1px solid #d9e7f1; border-radius: 24px; background: linear-gradient(120deg,#edf8fc,#f3f0ff); }
.health-sector-solutions h3 { color: #325674; font-size: 18px; margin-bottom: 16px; }
.sector-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.sector-links > a { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid #e2ebf5; border-radius: 18px; background: #ffffffc9; }
.sector-links img { width: 96px; height: 70px; border-radius: 12px; object-fit: cover; }
.sector-links strong,.sector-links small { display: block; }
.sector-links strong { color: #315477; font-size: 16px; }
.sector-links small { color: #52729b; font-size: 12px; margin-top: 8px; }
.sector-links > a:hover { border-color: #8fb5d5; }
@media(max-width:640px) { .health-sector-solutions { padding: 18px; } .sector-links { grid-template-columns: 1fr; gap: 12px; } .sector-links img { width: 70px; height: 60px; } .sector-links strong { font-size: 14px; } }