#hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 3em;

  text-align: center;

  color: light-dark(#000, #fff);
}

.hey {
  margin-top: 3em;
  font-weight: 400;
  font-size: 2.75em;
  padding: 0 2em;
  .heyfirstname {
    text-transform: capitalize;
  }
}

#hub-nav {
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.hub-card {
  position: relative;
  cursor: pointer;
  color: #fff;
  --bc: oklch(0.48 0.21 290.13);
  --ic: oklch(100% 0.00011 271.152);
  text-align: left;
  padding: 1.1em 1.5em 1.25em 1.5em;
  width: 18em;
  aspect-ratio: 1.4;
  background-color: var(--bc);
  border-radius: calc(var(--grid-corners-radius) * 2);

  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: start;
  box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.082);
  transform: scale(1);
  transition:
    box-shadow 700ms ease,
    transform 500ms ease;

  &:hover {
    transform: scale(1.025);
    box-shadow: 0.2em 0.8em 2em rgba(0, 0, 0, 0.33);
  }

  .cta {
    justify-self: end;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.75em;

    .icon {
      font-size: 1.5em;
      color: var(--ic);
    }
    small {
      font-size: 0.8em;
    }
  }

  h3 {
    font-size: 1.5em;
    font-weight: 500;
  }
  h4 {
    font-size: 1em;
    font-weight: 400;
    margin-top: 1em;
  }
  h5 {
    font-size: 0.8em;
    font-weight: 400;
    margin-top: 0.25em;
  }

  &.flow {
    --bc: oklch(0.98 0.016 73.684);
    --ic: oklch(53.528% 0.19269 32.42);
    color: #000;
  }
  &.analyticscard {
    --bc: oklch(0.882 0.059 254.128);
    --ic: oklch(48.161% 0.15711 256.692);
    color: #000;
  }
  &.optimizercard {
    --bc: oklch(0.31 0.08 235.96);
    --ic: oklch(100% 0.00011 271.152);
    color: #ffffff;

    &:hover .svgbck {
      animation: optimizer-hue-rotate 1800ms ease-in-out infinite alternate;
    }

    &::after {
      background: #1b1a1a
        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZTNlM2UzIj48cGF0aCBkPSJNMjAwLTEyMHEtMzMgMC01Ni41LTIzLjVUMTIwLTIwMHYtNTYwcTAtMzMgMjMuNS01Ni41VDIwMC04NDBoMjgwdjgwSDIwMHY1NjBoNTYwdi0yODBoODB2MjgwcTAgMzMtMjMuNSA1Ni41VDc2MC0xMjBIMjAwWm0xODgtMjEyLTU2LTU2IDM3Mi0zNzJINTYwdi04MGgyODB2MjgwaC04MHYtMTQ0TDM4OC0zMzJaIi8+PC9zdmc+')
        no-repeat center center;
      background-size: 40%;
    }
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 1.25em;
    right: 1.25em;
    width: 2.75em;
    aspect-ratio: 1;
    border-radius: calc(var(--grid-corners-radius) * 1.5);
    background: #1b1a1a
      url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1hcnJvdy1yaWdodCB0ZXh0LXdoaXRlIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTUgMTJoMTQiPjwvcGF0aD48cGF0aCBkPSJtMTIgNSA3IDctNyA3Ij48L3BhdGg+PC9zdmc+')
      no-repeat center center;
    background-size: 12px 12px;
  }
}

.svgbck {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: 0;
  transform: translateX(-50%) translateY(-50%) scale(0.8);
}

@keyframes optimizer-hue-rotate {
  from {
    filter: hue-rotate(0deg);
  }

  to {
    filter: hue-rotate(90deg);
  }
}