:root {
  --accent-yellow: #e7b93f;
  --accent-yellow-soft: #fff6d9;
  --accent-green: #2f7d61;
  --accent-green-soft: #e9f6f0;
  --accent-red: #ad4e49;
  --accent-red-soft: #faecea;
  --accent-peach: #d69b82;
  --accent-peach-soft: #faeee8;
}

/* A restrained colour marker extends the existing blue logo without redrawing it. */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
}

.logo::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: conic-gradient(
    from 0deg,
    var(--accent-yellow) 0 25%,
    var(--accent-green) 25% 50%,
    var(--accent-red) 50% 75%,
    var(--accent-peach) 75% 100%
  );
  box-shadow: 0 0 0 1px rgba(22,48,71,.1);
}

/* A tiny four-colour signature on the sample procurement document. */
.doc-head {
  position: relative;
  padding-top: 24px;
}

.doc-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-yellow);
  box-shadow:
    11px 0 0 var(--accent-green),
    22px 0 0 var(--accent-red),
    33px 0 0 var(--accent-peach);
}

/* Category colours are muted and meaningful; the cards themselves stay neutral. */
.cat {
  position: relative;
}

.cat::after {
  content: "";
  position: absolute;
  top: 21px;
  right: 21px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: .75;
}

.cat .icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 11px;
  border: 1px solid transparent;
  transition: transform .2s ease;
}

.cat:hover .icon {
  transform: translateY(-1px);
}

.cat:nth-child(1) .icon {
  color: #8b6508;
  background: var(--accent-yellow-soft);
  border-color: #f1dda0;
}
.cat:nth-child(1)::after { background: var(--accent-yellow); }

.cat:nth-child(2) .icon {
  color: #9a5c43;
  background: var(--accent-peach-soft);
  border-color: #edcbbb;
}
.cat:nth-child(2)::after { background: var(--accent-peach); }

.cat:nth-child(3) .icon {
  color: #267357;
  background: var(--accent-green-soft);
  border-color: #bee1d2;
}
.cat:nth-child(3)::after { background: var(--accent-green); }

.cat:nth-child(4) .icon {
  color: #a24a45;
  background: var(--accent-red-soft);
  border-color: #efc8c5;
}
.cat:nth-child(4)::after { background: var(--accent-red); }

.cat:nth-child(5) .icon {
  color: #267357;
  background: var(--accent-green-soft);
  border-color: #bee1d2;
}
.cat:nth-child(5)::after { background: var(--accent-green); }

.cat:nth-child(6) .icon {
  color: #9a5c43;
  background: var(--accent-peach-soft);
  border-color: #edcbbb;
}
.cat:nth-child(6)::after { background: var(--accent-peach); }

/* The process keeps its professional dark background; only numbered markers change. */
.step b {
  width: 29px;
  height: 29px;
  margin-bottom: 9px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #173147;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

.step:nth-child(1) b { background: var(--accent-yellow); }
.step:nth-child(2) b { background: var(--accent-green); color: #fff; }
.step:nth-child(3) b { background: var(--accent-peach); }
.step:nth-child(4) b { background: var(--accent-red); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cat .icon { transition: none; }
}

@media (max-width: 640px) {
  .logo { gap: 6px; }
  .logo::after {
    width: 9px;
    height: 9px;
    border-radius: 2px;
  }
}