.km-wrap {
  width: 100%;
  max-width: 100%;
  padding-inline: var(--km-edge-pad, 18px);
  box-sizing: border-box;
  overflow: hidden;
}

.km-grid {
  display: grid;
  grid-template-columns: repeat(var(--km-cols, 3), minmax(0, 1fr));
  gap: var(--km-gap, 0px);
  align-items: stretch;
}

.km-tile {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.km-tile-link {
  position: relative;
  display: block;
  min-height: var(--km-height, 84px);
  text-decoration: none;
  color: var(--km-text, #fff);
  overflow: hidden;
  background: transparent;
  border-radius: var(--km-radius, 0px);
  transform: skewX(-18deg);
  transform-origin: center center;
  transition:
    transform .28s ease,
    box-shadow .32s ease,
    filter .32s ease,
    border-color .32s ease;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.08);
}

.km-has-shadow .km-tile-link {
  box-shadow: 0 10px 24px rgba(5, 18, 43, .18);
}

.km-tile-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 4;
  pointer-events: none;
}

.km-bg-layer {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--km-overlay, .18)) 100%),
    var(--km-bg-image, none),
    var(--km-tile-bg, linear-gradient(135deg, #0c3d83 0%, #0a275c 100%));
  background-size: cover, var(--km-bg-size, cover), cover;
  background-position: center center, var(--km-bg-position, center center), center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  z-index: 3;
}

.km-tile-content {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: inherit;
  height: 100%;
  padding: 16px 24px 16px 34px;
  transform: skewX(18deg);
}

.km-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--km-text, #fff);
}

.km-icon img,
.km-icon-svg,
.km-icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.km-icon img {
  object-fit: contain;
}

.km-text-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.km-title,
.km-subtitle {
  display: block;
  color: var(--km-text, #fff);
}

.km-title {
  font-size: 19px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.km-subtitle {
  font-size: 13px;
  line-height: 1.2;
  opacity: .92;
}

.km-tile-link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  background: var(--km-accent, #6dbef9);
  transform: scaleX(0);
  transform-origin: center center;
  transition: transform .32s ease;
  z-index: 6;
  border-radius: 999px 999px 0 0;
}

.km-tile.is-current .km-tile-link {
  box-shadow:
    0 14px 30px rgba(5, 18, 43, .22),
    0 0 var(--km-active-glow, 26px) rgba(109, 190, 249, .22);
  filter: brightness(1.06);
}

.km-tile.is-current .km-tile-link::before,
.km-tile-link:hover::before,
.km-tile-link:focus-visible::before {
  opacity: 1;
}

.km-tile.is-current .km-tile-link::after,
.km-tile-link:hover::after,
.km-tile-link:focus-visible::after {
  transform: scaleX(1);
}

.km-tile-link:hover,
.km-tile-link:focus-visible {
  transform: skewX(-18deg) translateY(calc(var(--km-hover-lift, 3px) * -1));
  filter: brightness(1.04);
}

.km-tile-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 2px;
}

.km-content-boxes {
  display: block;
  width: 100%;
  margin-top: 22px;
  position: relative;
  z-index: 2;
}

.km-content-box[hidden],
.km-mobile-panel[hidden] {
  display: none !important;
}

.km-mobile-panel,
.km-mobile-panel.is-active,
.km-mobile-panel.km-content-box.is-active {
  display: none !important;
}

.km-content-box {
  display: none;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid rgba(207, 217, 230, .95);
  border-radius: var(--km-box-radius, 22px);
  padding: 26px;
  box-shadow: 0 18px 40px rgba(8, 22, 49, .08);
  opacity: 0;
  transform: translateY(6px);
}

.km-content-box.is-active {
  display: block !important;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  animation: kmPanelIn calc(var(--km-switch-duration, 420ms) * 1ms) cubic-bezier(.22, 1, .36, 1) forwards;
}

.km-content-box.is-active .km-content-col {
  animation: kmColIn calc(var(--km-switch-duration, 420ms) * 1ms) cubic-bezier(.22, 1, .36, 1) both;
}

.km-content-box.is-active .km-content-col--text {
  animation-delay: 80ms;
}

.km-content-box.is-active .km-content-col--right {
  animation-delay: 120ms;
}

@keyframes kmPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kmColIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.km-content-grid {
  display: grid;
  gap: 26px;
  align-items: center;
}

.km-layout-30-40-30 { grid-template-columns: 30% 40% 30%; }
.km-layout-25-50-25 { grid-template-columns: 25% 50% 25%; }
.km-layout-35-30-35 { grid-template-columns: 35% 30% 35%; }
.km-layout-image-left-text { grid-template-columns: 38% 62%; }
.km-layout-image-left-text .km-content-col--right { display: none; }
.km-layout-text-left-image { grid-template-columns: 62% 38%; }
.km-layout-text-left-image .km-content-col--left { display: none; }
.km-layout-text-left-image .km-content-col--text { order: 1; }
.km-layout-text-left-image .km-content-col--right { order: 2; }
.km-layout-text-only { grid-template-columns: 1fr; }
.km-layout-text-only .km-content-col--image { display: none; }

.km-content-col {
  min-width: 0;
}

.km-content-col--image {
  display: flex;
  align-items: stretch;
}

.km-content-col--image.is-empty {
  opacity: .35;
}

.km-content-image-wrap {
  width: 100%;
  height: var(--km-content-image-height, 230px);
  min-height: var(--km-content-image-height, 230px);
  border-radius: calc(var(--km-box-radius, 22px) - 6px);
  overflow: hidden;
  background: linear-gradient(180deg, #edf4fb 0%, #dbe8f4 100%);
  border: 1px solid rgba(212, 224, 238, .9);
}

.km-content-image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
}

.km-content-col--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.km-content-heading {
  margin: 0 0 14px;
  font-size: 32px;
  line-height: 1.08;
  color: #0b2452;
}

.km-content-text {
  color: #24364f;
  font-size: 16px;
  line-height: 1.7;
}

.km-content-text p {
  margin: 0 0 14px;
}

.km-content-text p:last-child {
  margin-bottom: 0;
}

.km-content-actions {
  margin-top: 18px;
}

.km-content-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #0c3d83 0%, #0a275c 100%);
  box-shadow: 0 12px 28px rgba(12, 61, 131, .18);
  transition: transform .2s ease, filter .2s ease;
}

.km-content-button:hover,
.km-content-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

@media (max-width: 1024px) {
  .km-wrap {
    padding-inline: 14px;
  }

  .km-grid {
    grid-template-columns: repeat(var(--km-cols-tablet, 3), minmax(0, 1fr));
  }

  .km-tile-link {
    min-height: var(--km-height-tablet, 76px);
  }

  .km-tile-content {
    padding: 14px 18px 14px 28px;
    gap: 12px;
  }

  .km-icon {
    width: 32px;
    height: 32px;
  }

  .km-title {
    font-size: 17px;
  }

  .km-content-grid,
  .km-layout-30-40-30,
  .km-layout-25-50-25,
  .km-layout-35-30-35,
  .km-layout-image-left-text,
  .km-layout-text-left-image {
    grid-template-columns: 1fr 1fr;
  }

  .km-layout-30-40-30 .km-content-col--text,
  .km-layout-25-50-25 .km-content-col--text,
  .km-layout-35-30-35 .km-content-col--text,
  .km-layout-image-left-text .km-content-col--text,
  .km-layout-text-left-image .km-content-col--text {
    grid-column: 1 / -1;
  }

  .km-content-image-wrap {
    height: var(--km-content-image-height-tablet, 210px);
    min-height: var(--km-content-image-height-tablet, 210px);
  }

  .km-content-heading {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .km-wrap {
    padding-inline: 10px;
  }

  .km-grid {
    grid-template-columns: repeat(var(--km-cols-mobile, 1), minmax(0, 1fr));
    gap: var(--km-mobile-content-gap, 12px);
  }

  .km-content-boxes {
    display: none !important;
  }

  .km-tile-link {
    min-height: var(--km-height-mobile, 68px);
    transform: none;
    border-radius: max(var(--km-radius, 0px), 18px);
  }

  .km-tile-link:hover,
  .km-tile-link:focus-visible,
  .km-tile.is-current .km-tile-link {
    transform: none;
  }

  .km-tile-content {
    transform: none;
    padding: var(--km-mobile-pad-y, 16px) var(--km-mobile-pad-x, 22px);
    gap: 12px;
  }

  .km-title {
    font-size: var(--km-mobile-title-size, 17px);
  }

  .km-icon {
    width: 28px;
    height: 28px;
  }

  .km-mobile-panel.is-active,
  .km-mobile-panel.km-content-box.is-active {
    display: block !important;
    margin-top: var(--km-mobile-content-gap, 12px);
    padding: var(--km-mobile-content-padding, 18px);
    animation: kmPanelIn calc(var(--km-switch-duration, 420ms) * 1ms) cubic-bezier(.22, 1, .36, 1) forwards;
  }

  .km-mobile-panel .km-content-grid,
  .km-mobile-panel .km-layout-30-40-30,
  .km-mobile-panel .km-layout-25-50-25,
  .km-mobile-panel .km-layout-35-30-35,
  .km-mobile-panel .km-layout-image-left-text,
  .km-mobile-panel .km-layout-text-left-image {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .km-mobile-panel .km-content-col--left,
  .km-mobile-panel .km-content-col--right,
  .km-mobile-panel .km-content-col--text {
    order: initial;
    display: block;
  }

  .km-mobile-panel .km-content-col--image.is-empty {
    display: none;
  }

  .km-mobile-panel .km-content-image-wrap {
    height: var(--km-content-image-height-mobile, 180px);
    min-height: var(--km-content-image-height-mobile, 180px);
  }

  .km-mobile-panel .km-content-heading {
    font-size: 26px;
    margin-bottom: 10px;
  }

  .km-mobile-panel .km-content-text {
    font-size: 15px;
    line-height: 1.65;
  }
}