.kobe-case-study {
  --kobe-purple: #8b32c6;
  --kobe-violet: #571477;
  --kobe-black: #120e17;
  --orange: var(--kobe-purple);
}

.kobe-case-study .project-intro {
  background: radial-gradient(circle at 50% 48%, rgba(139, 50, 198, .62), transparent 45%), var(--kobe-black);
}

.kobe-case-study .project-intro span,
.kobe-case-study .project-brand { color: #a44adb; }

.kobe-case-study .project-heading > span,
.kobe-case-study .project-back b,
.kobe-case-study .case-progress > strong { color: var(--kobe-violet); }

.kobe-case-study .case-progress i span { background: var(--kobe-purple); }

.kobe-case-study .case-comparison::before {
  background: radial-gradient(circle at 75% 30%, rgba(139, 50, 198, .24), transparent 38%), linear-gradient(115deg, rgba(18, 14, 23, .98), rgba(56, 29, 69, .96));
}

.kobe-case-study .case-comparison > header,
.kobe-case-study .case-comparison > header > span,
.kobe-case-study .case-comparison small,
.kobe-case-study .case-comparison h2 { color: #fff; }

.kobe-case-study .compare-shell { box-shadow: 0 32px 90px rgba(21, 7, 29, .42); }
.kobe-case-study .compare-handle i,
.kobe-case-study .case-next > b { background: var(--kobe-purple); }
.kobe-case-study .case-next::before { color: rgba(139, 50, 198, .08); }
.kobe-case-study .case-next:hover > strong { color: var(--kobe-violet); }

@media (max-width: 520px) {
  .kobe-case-study .case-comparison h2 { font-size: clamp(36px, 10.5vw, 48px); }
}