/* Solution cards, shared by the home page (.product-card) and the Solutions page (#portfolio .portfolio-card).
   One frame for every solution: the BlueLink navy band carries the light logo and the industry tag, the white
   body carries the copy, and a single accent per solution colours the band's glow and rule, the tag's dot,
   the eyebrow, the meta line and the action. Logo boxes are sized per lockup so the wordmarks read at one weight. */
.product-card,
#portfolio .portfolio-card {
  --card-accent: #2b519f;
  --card-glow: #6fb6f0;
  --card-line: color-mix(in srgb, var(--card-accent) 24%, #e6eaf0);
  --card-logo-w: 230px;
  --card-logo-h: 50px;
  color: inherit;
  text-decoration: none;
  border-width: 1px;
  border-color: #e4e9f0;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s;
}
.product-card--propertypro,
#portfolio .portfolio-card--propertypro { --card-accent: #207553; --card-glow: #43b982; --card-logo-w: 214px; --card-logo-h: 38px; }
.product-card--dynamic-government,
#portfolio .portfolio-card--government { --card-accent: #0b91bd; --card-glow: #3cc0ec; --card-logo-w: 262px; --card-logo-h: 88px; }
.product-card--edumax,
#portfolio .portfolio-card--edumax { --card-accent: #9b142b; --card-glow: #ec4259; --card-logo-w: 196px; --card-logo-h: 68px; }
#portfolio .portfolio-card--eraffle { --card-accent: #765fae; --card-glow: #b096f3; --card-logo-w: 204px; --card-logo-h: 58px; }
#portfolio .portfolio-card--xdesk { --card-accent: #c4601c; --card-glow: #f79a4b; --card-logo-w: 192px; --card-logo-h: 40px; }
#portfolio .portfolio-card--1me { --card-accent: #226fc1; --card-glow: #62b1ff; --card-logo-w: 100px; --card-logo-h: 70px; }
#portfolio .portfolio-card--waypass { --card-accent: #a07d2a; --card-glow: #dcc27a; --card-logo-w: 150px; --card-logo-h: 80px; }
#portfolio .portfolio-card--1wap { --card-accent: #127c8a; --card-glow: #3bc9d4; --card-logo-w: 224px; --card-logo-h: 57px; }

/* The band */
.product-card .product-logo,
#portfolio .portfolio-card-brand {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  height: 150px;
  min-height: 0;
  padding: 30px 24px 20px;
  border-bottom: 2px solid var(--card-glow);
  background:
    radial-gradient(ellipse 62% 95% at 100% 0%, color-mix(in srgb, var(--card-glow) 40%, transparent), transparent 70%),
    radial-gradient(ellipse 48% 70% at 0% 100%, color-mix(in srgb, var(--card-glow) 15%, transparent), transparent 70%),
    linear-gradient(135deg, #08162e 0%, #0d2245 58%, #123060 100%);
}
.product-card .product-logo img,
#portfolio .portfolio-card-brand img {
  display: block;
  width: var(--card-logo-w);
  max-width: 100%;
  height: var(--card-logo-h);
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 6px 16px #02091a66);
}
.product-card .product-logo .type-pill,
#portfolio .portfolio-card-brand .type-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 11px 6px 9px;
  border: 1px solid #ffffff26;
  border-radius: 20px;
  background: #ffffff14;
  color: #e9f0f9;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2px;
  line-height: 1.2;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.product-card .product-logo .type-pill::before,
#portfolio .portfolio-card-brand .type-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-glow);
  box-shadow: 0 0 8px var(--card-glow);
}

/* The body */
.product-card .product-category,
#portfolio .portfolio-card-body > .eyebrow { color: var(--card-accent); }
#portfolio .portfolio-scope { color: color-mix(in srgb, var(--card-accent) 84%, #6e7a8a); }
.product-card .product-link,
#portfolio .portfolio-link { color: var(--card-accent); border-top-color: var(--card-line); }
.product-card .product-link > span,
#portfolio .portfolio-link > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--card-accent);
  color: #fff;
  transition: background .2s, transform .2s;
}
.product-card .product-link .icon,
#portfolio .portfolio-link .icon { width: 16px; height: 16px; color: #fff; }

/* The Solutions page grid and card metrics follow the home page: three cards across, the same body
   spacing and type sizes, so the two pages read as one set. */
#portfolio .portfolio-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
#portfolio .portfolio-card { border-radius: 20px; }
#portfolio .portfolio-card-body { padding: 24px 27px 27px; }
#portfolio .portfolio-card-body > .eyebrow { font-size: 8px; letter-spacing: 1.1px; margin-bottom: 11px; }
#portfolio .portfolio-card-body h3 { font-size: 21px; line-height: 1.4; letter-spacing: -.8px; }
#portfolio .portfolio-card-body > p { margin: 16px 0 22px; color: #727d8d; font-size: 13px; line-height: 1.8; }
#portfolio .portfolio-scope { margin-bottom: 18px; font-size: 9px; }
#portfolio .portfolio-link { padding-top: 20px; font-size: 11px; }
@media (max-width: 900px) {
  #portfolio .portfolio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  #portfolio .portfolio-card-body { padding: 22px; }
  #portfolio .portfolio-card-body h3 { font-size: 19px; }
  #portfolio .portfolio-card-body > p { font-size: 12px; }
}
@media (max-width: 640px) {
  #portfolio .portfolio-cards { grid-template-columns: 1fr; gap: 19px; }
  #portfolio .portfolio-card-body { padding: 23px; }
  #portfolio .portfolio-card-body h3 { font-size: 22px; }
  #portfolio .portfolio-card-body > p { font-size: 13px; }
}

/* Hover and focus */
.product-card:hover,
.product-card:focus-visible,
#portfolio .portfolio-card:hover,
#portfolio .portfolio-card:focus-visible {
  border-color: color-mix(in srgb, var(--card-accent) 42%, #e6eaf0);
  transform: translateY(-5px);
  box-shadow: 0 22px 50px color-mix(in srgb, var(--card-accent) 14%, transparent);
}
.product-card:focus-visible,
#portfolio .portfolio-card:focus-visible { outline: 3px solid var(--card-accent); outline-offset: 4px; }
.product-card:hover .product-link > span,
.product-card:focus-visible .product-link > span,
#portfolio .portfolio-card:hover .portfolio-link > span,
#portfolio .portfolio-card:focus-visible .portfolio-link > span {
  background: color-mix(in srgb, var(--card-accent) 84%, #061024);
  transform: translate(2px, -2px);
}

@media (max-width: 900px) {
  .product-card .product-logo,
  #portfolio .portfolio-card-brand { height: 138px; padding: 28px 20px 18px; }
  .product-card .product-logo img,
  #portfolio .portfolio-card-brand img { width: calc(var(--card-logo-w) * .9); height: calc(var(--card-logo-h) * .9); }
}
@media (prefers-reduced-motion: reduce) {
  .product-card, #portfolio .portfolio-card, .product-card .product-link > span, #portfolio .portfolio-link > span { transition: none; }
  .product-card:hover .product-link > span, #portfolio .portfolio-card:hover .portfolio-link > span { transform: none; }
}