.container {
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bar {
  width: 48px;
  height: 6px;
  border-radius: 999px;
  background: rgba(6, 32, 36, 0.2);
}

.barWide {
  width: 96px;
  height: 6px;
  border-radius: 999px;
  background: rgba(6, 32, 36, 0.2);
}

.caption {
  margin: 0;
  font-size: 14px;
  color: rgba(6, 32, 36, 0.7);
}

.header {
  min-height: var(--header-height, 120px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(6, 32, 36, 0.04);
  border-bottom: 1px solid rgba(6, 32, 36, 0.08);
  gap: 32px;
}

.logo {
  width: 180px;
  height: 20px;
  border-radius: 999px;
  background: rgba(6, 32, 36, 0.12);
  flex-shrink: 0;
}

.navigation {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 1 auto;
}

.navItem {
  height: 14px;
  border-radius: 999px;
  background: rgba(6, 32, 36, 0.12);
  flex-shrink: 0;
}

.cta {
  width: 140px;
  height: 38px;
  border-radius: 12px;
  background: rgba(6, 32, 36, 0.12);
  flex-shrink: 0;
}

.page {
  margin-top: var(--header-height);
  padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 5vw, 4rem);
  display: flex;
  justify-content: center;
}

.shell {
  --sk-surface: #e1e6ef;
  --sk-card-width: clamp(180px, 28vw, 240px);
  --sk-card-gap: clamp(12px, 2vw, 20px);
  --sk-card-height: clamp(120px, 18vw, 150px);
  width: min(960px, 100%);
  min-height: clamp(320px, 52vh, 520px);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: 32px;
  background: linear-gradient(180deg, #f9fbfe 0%, #edf2f7 100%);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 40px rgba(9, 30, 66, 0.08);
  isolation: isolate;
}

.shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 35%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 2.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.heroSurface,
.cardsSurface {
  display: block;
  width: 100%;
  border-radius: 28px;
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.heroSurface {
  height: clamp(110px, 22vh, 160px);
  background-image: linear-gradient(var(--sk-surface) 0 0), linear-gradient(var(--sk-surface) 0 0);
  background-size: 140px 14px, min(420px, 60vw) 32px;
  background-position: left clamp(0.4rem, 1vw, 0.75rem), left calc(clamp(0.4rem, 1vw, 0.75rem) + 26px);
  background-repeat: no-repeat;
}

.heroSurface::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: shimmer 2.4s linear infinite;
}

.cardsSurface {
  --sk-card-width: clamp(180px, 28vw, 230px);
  min-height: clamp(220px, 50vh, 360px);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.65) 0, rgba(255, 255, 255, 0.65) var(--sk-card-width), transparent var(--sk-card-width), transparent calc(var(--sk-card-width) + var(--sk-card-gap))), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0, rgba(255, 255, 255, 0.65) var(--sk-card-height), transparent var(--sk-card-height), transparent calc(var(--sk-card-height) + var(--sk-card-gap)));
  background-blend-mode: multiply;
}

.cardsSurface::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: shimmer 2s linear infinite;
}

.cardsSurface[data-variant=service] {
  --sk-card-width: clamp(160px, 24vw, 200px);
  --sk-card-gap: clamp(10px, 1.5vw, 18px);
  --sk-card-height: clamp(110px, 16vw, 140px);
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(120%);
  }
}