.e8ProcessMenu__background {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 90, 10, 0.14), transparent 28%),
    linear-gradient(135deg, #fffaf4, #eef8ff);
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.e8ProcessMenu__background::after {
  backdrop-filter: blur(1px);
  background: rgba(255, 255, 255, 0.72);
  content: "";
  inset: 0;
  position: absolute;
}

.e8ProcessMenu__background img,
.e8ProcessMenu__header img,
.e8ProcessItem__photo img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.e8ProcessMenu__background img {
  filter: blur(2px);
  opacity: 0.38;
  transform: scale(1.02);
}

.e8ProcessMenu__header {
  align-items: end;
  background: linear-gradient(100deg, #e7edf3 0%, #fff7ed 45%, #e7edf3 100%);
  background-size: 220% 100%;
  box-sizing: border-box;
  display: flex;
  min-height: clamp(260px, 28vw, 315px);
  overflow: hidden;
  padding: 18px 22px;
  position: relative;
  z-index: 1;
}

.e8ProcessMenu__header:not(.hasImage) {
  animation: e8ProcessShimmer 1.18s ease-in-out infinite;
}

.e8ProcessMenu__header::after {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.18));
  content: "";
  inset: 0;
  position: absolute;
}

.e8ProcessHeaderProgress {
  display: grid;
  gap: 10px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.e8ProcessHeaderBadge {
  background: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  color: #111827;
  font-size: 0.76rem;
  font-weight: 900;
  left: 22px;
  padding: 7px 11px;
  position: absolute;
  top: 18px;
  z-index: 3;
}

.e8ProcessMenu__body {
  padding: 18px 22px 26px;
  position: relative;
  z-index: 1;
}

.e8ProcessMenu__body h2,
.e8ProcessItem b {
  color: #111827;
}

.e8ProcessMenu__body h2 {
  font-size: 1.15rem;
  margin: 0 0 14px;
}

.e8ProcessCategories {
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 22px;
  position: relative;
  scrollbar-width: none;
  z-index: 1;
}

.e8ProcessCategories::-webkit-scrollbar { display: none; }

.e8ProcessCategories span {
  background: transparent;
  border-radius: 12px;
  color: #111827;
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 900;
  min-width: 78px;
  overflow: hidden;
  padding: 13px 17px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e8ProcessCategories .isActive {
  background: #0f2e50;
  box-shadow: 0 14px 34px rgba(15, 46, 80, 0.22);
  color: #fff;
}

.e8ProcessCategories--skeleton span {
  animation: e8ProcessShimmer 1.18s ease-in-out infinite;
  background: linear-gradient(100deg, #f1f5f9 0%, #fff3e8 45%, #f1f5f9 100%);
  background-size: 220% 100%;
  color: transparent;
}

.e8ProcessItems {
  display: grid;
  gap: 22px;
}

.e8ProcessItem {
  align-items: start;
  animation: e8ProcessReveal 0.32s ease forwards;
  animation-delay: var(--item-delay);
  background: rgba(255, 255, 255, 0.78);
  display: grid;
  gap: 18px;
  grid-template-columns: 156px minmax(0, 1fr);
  min-height: 156px;
  opacity: 0;
  padding: 0 18px 0 0;
  position: relative;
}

.e8ProcessItem__photo,
.e8ProcessItem--skeleton i {
  aspect-ratio: 1;
  border-radius: 14px;
  display: block;
  overflow: hidden;
  position: relative;
  width: 156px;
}

.e8ProcessItem--skeleton i,
.e8ProcessItem--skeleton b,
.e8ProcessItem--skeleton p,
.e8ProcessItem--skeleton strong,
.e8ProcessItem__photo::before {
  animation: e8ProcessShimmer 1.18s ease-in-out infinite;
  background: linear-gradient(100deg, #f1f5f9 0%, #fff3e8 45%, #f1f5f9 100%);
  background-size: 220% 100%;
  content: "";
}

.e8ProcessItem__photo::before {
  inset: 0;
  position: absolute;
}

.e8ProcessItem b {
  display: block;
  font-size: 1.16rem;
  line-height: 1.18;
  margin: 10px 0 8px;
}

.e8ProcessItem p {
  color: #6b7280;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.45;
  margin: 42px 0 0;
}

.e8ProcessItem strong {
  color: #111827;
  font-size: 0.98rem;
  left: 174px;
  position: absolute;
  top: 48px;
}

.e8ProcessItem--skeleton {
  opacity: 1;
}

.e8ProcessItem--skeleton b,
.e8ProcessItem--skeleton p,
.e8ProcessItem--skeleton strong {
  border-radius: 999px;
  display: block;
  height: 13px;
}

.e8ProcessItem--skeleton b {
  margin-top: 15px;
  width: 68%;
}

.e8ProcessItem--skeleton p {
  margin-top: 46px;
  width: 88%;
}

.e8ProcessItem--skeleton p + p {
  margin-top: 10px;
  width: 62%;
}

.e8ProcessItem--skeleton strong {
  left: 174px;
  position: absolute;
  top: 52px;
  width: 72px;
}

@media (max-width: 420px) {
  .e8ProcessCategories {
    padding-inline: 16px;
  }

  .e8ProcessMenu__body {
    padding-inline: 16px;
  }

  .e8ProcessMenu__header {
    min-height: 330px;
    padding: 56px 16px 16px;
  }

  .e8ProcessHeaderBadge {
    left: 16px;
    top: 16px;
  }

  .e8ProcessItem {
    gap: 14px;
    grid-template-columns: 126px minmax(0, 1fr);
    min-height: 126px;
  }

  .e8ProcessItem__photo,
  .e8ProcessItem--skeleton i {
    width: 126px;
  }

  .e8ProcessItem b {
    font-size: 1rem;
  }

  .e8ProcessItem p {
    font-size: 0.84rem;
    margin-top: 38px;
  }

  .e8ProcessItem strong,
  .e8ProcessItem--skeleton strong {
    left: 140px;
    top: 44px;
  }

}

@media (min-width: 421px) and (max-width: 720px) {
  .e8ProcessMenu__header {
    min-height: 340px;
    padding-top: 58px;
  }
}

@keyframes e8ProcessShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@keyframes e8ProcessReveal { 100% { opacity: 1; } }