/* Neutral modern component layer shared by homepage and future page templates. */
.sf-site-modern {
  --sfm-ink: #061f3f;
  --sfm-muted: #526b8e;
  --sfm-line: #d7e3ef;
  --sfm-blue: #0b5ee8;
  --sfm-teal: #0b948c;
  --sfm-amber: #f6ad3d;
  --sfm-soft: #f3f6fa;
  --sfm-radius: 8px;
  --sfm-shadow: 0 18px 42px rgba(8, 40, 73, .08);
  --sfm-shadow-hover: 0 26px 58px rgba(8, 40, 73, .13);
}

.sf-site-modern .sfm-card {
  background: #fff;
  border: 1px solid var(--sfm-line);
  border-radius: var(--sfm-radius);
  box-shadow: var(--sfm-shadow);
  min-width: 0;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sf-site-modern .sfm-card:has(a):hover,
.sf-site-modern .sfm-card:focus-within {
  border-color: rgba(11, 94, 232, .22);
  box-shadow: var(--sfm-shadow-hover);
  transform: translateY(-3px);
}

.sf-site-modern .sfm-card-dark {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--sfm-radius);
  box-shadow: none;
}

.sf-site-modern .sfm-icon-badge {
  align-items: center;
  background: #eef4ff;
  border-radius: var(--sfm-radius);
  color: var(--sfm-blue);
  display: inline-flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.sf-site-modern .sf-section-dark .sfm-icon-badge {
  background: rgba(246, 173, 61, .14);
  color: var(--sfm-amber);
}

.sf-site-modern .sfm-icon-badge svg {
  height: 21px;
  width: 21px;
}

.sf-site-modern .sfm-metric-card {
  color: var(--sfm-ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px;
  position: relative;
  text-decoration: none;
}

.sf-site-modern .sfm-metric-card > * {
  position: relative;
  z-index: 1;
}

.sf-site-modern .sfm-metric-card::before {
  bottom: 22px;
  content: "";
  height: 94px;
  opacity: .34;
  position: absolute;
  right: 24px;
  width: 138px;
}

.sf-site-modern .sfm-metric-card:nth-child(2)::before {
  background:
    linear-gradient(180deg, rgba(11,94,232,.35), rgba(11,94,232,.1)) 0 100% / 16px 45% no-repeat,
    linear-gradient(180deg, rgba(22,160,133,.32), rgba(22,160,133,.1)) 30px 100% / 16px 70% no-repeat,
    linear-gradient(180deg, rgba(246,173,61,.35), rgba(246,173,61,.1)) 60px 100% / 16px 55% no-repeat,
    linear-gradient(180deg, rgba(11,94,232,.28), rgba(11,94,232,.08)) 90px 100% / 16px 82% no-repeat;
}

.sf-site-modern .sfm-metric-card:nth-child(3)::before {
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(246,173,61,.38) 43% 47%, transparent 47%),
    linear-gradient(90deg, rgba(11,94,232,.18), rgba(22,160,133,.18));
  clip-path: polygon(0 78%, 22% 58%, 42% 66%, 65% 30%, 82% 40%, 100% 8%, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .sf-site-modern .sfm-card { transition: none; }
}