@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700&family=Raleway:wght@400;500&display=swap");

.category-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.75rem;
  row-gap: 1.15rem;
}

.category-card {
  --sec: #2563eb;
  --sec-soft: color-mix(in srgb, var(--sec) 18%, #fff);
  --sec-mid: color-mix(in srgb, var(--sec) 9%, #fff);
  position: relative;
  display: block;
  isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--sec) 28%, #fff) 0%, transparent 58%),
    linear-gradient(165deg, var(--sec-soft) 0%, var(--sec-mid) 42%, #ffffff 100%);
  border: 2px solid var(--sec);
  border-radius: 1.15rem;
  padding: 1.5rem 0.7rem 0.95rem;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 70%, var(--sec)),
    0 1px 2px rgb(15 23 42 / 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(80% 55% at 50% 38%, rgb(255 255 255 / 0.55) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.category-card > :not(.category-sec-label) {
  position: relative;
  z-index: 1;
}

.category-card:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 80%, var(--sec)),
    0 10px 20px color-mix(in srgb, var(--sec) 16%, transparent);
}

.category-card:active {
  transform: scale(0.97);
}

.category-sec-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 0.2rem 0.62rem;
  border-radius: 999px;
  font-family: "Raleway", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--sec);
  border: 0;
  box-shadow: none;
}

.category-card .category-icon {
  background:
    radial-gradient(circle at 35% 30%, #fff 0%, color-mix(in srgb, var(--sec) 16%, #fff) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 14%, transparent);
}

.category-card .category-name {
  display: block;
  font-family: "Nunito", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  color: #111827;
}

html.dark .category-card {
  --sec-soft: color-mix(in srgb, var(--sec) 28%, #151c2c);
  --sec-mid: color-mix(in srgb, var(--sec) 14%, #151c2c);
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--sec) 34%, #151c2c) 0%, transparent 58%),
    linear-gradient(165deg, var(--sec-soft) 0%, var(--sec-mid) 42%, #151c2c 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, var(--sec)),
    0 1px 2px rgb(0 0 0 / 0.25);
}

html.dark .category-card::before {
  background: radial-gradient(80% 55% at 50% 38%, rgb(255 255 255 / 0.08) 0%, transparent 70%);
}

html.dark .category-card .category-name {
  color: #e8eef7;
}

html.dark .category-card .category-icon {
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 18%, #1c2436) 0%, color-mix(in srgb, var(--sec) 22%, #1c2436) 100%);
}