:root {
  --gt-paper: #f8f7f3;
}

.home-page {
  background: #f8f7f3;
}

.home-header {
  background: rgba(248, 247, 243, .92);
}

.home-brand-logo {
  display: block;
  width: 181px;
  height: 36px;
}

.portal-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.portal-hero::before,
.portal-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.portal-hero::before {
  width: 400px;
  height: 360px;
  top: -126px;
  left: -150px;
  background:
    linear-gradient(128deg, rgba(49, 92, 255, .15) 0%, rgba(49, 92, 255, .08) 42%, rgba(49, 92, 255, 0) 74%),
    radial-gradient(ellipse at 12% 54%, rgba(49, 92, 255, .13) 0%, rgba(49, 92, 255, 0) 69%);
  border-radius: 44% 62% 58% 42%;
  filter: blur(52px);
  transform: rotate(-6deg) skewX(-7deg);
}

.portal-hero::after {
  width: 520px;
  height: 430px;
  top: -252px;
  right: -126px;
  border-radius: 18% 0 0 82%;
  background:
    radial-gradient(ellipse at 72% 18%, rgba(184, 242, 61, .34) 0%, rgba(184, 242, 61, .22) 46%, rgba(184, 242, 61, 0) 76%),
    linear-gradient(145deg, rgba(184, 242, 61, .16) 8%, rgba(184, 242, 61, 0) 72%);
  filter: blur(38px);
  transform: rotate(-13deg);
}

@media (max-width: 520px) {
  .home-brand-logo {
    width: 171px;
    height: 34px;
  }

  .portal-hero::before {
    width: 185px;
    height: 235px;
    top: -98px;
    left: -126px;
    background:
      linear-gradient(128deg, rgba(49, 92, 255, .12) 0%, rgba(49, 92, 255, .06) 44%, rgba(49, 92, 255, 0) 76%),
      radial-gradient(ellipse at 12% 54%, rgba(49, 92, 255, .1) 0%, rgba(49, 92, 255, 0) 69%);
    border-radius: 44% 62% 58% 42%;
    filter: blur(42px);
    transform: rotate(-7deg) skewX(-7deg);
  }

  .portal-hero::after {
    width: 230px;
    height: 240px;
    top: -132px;
    right: -92px;
    border-radius: 20% 0 0 84%;
    background:
      radial-gradient(ellipse at 74% 18%, rgba(184, 242, 61, .25) 0%, rgba(184, 242, 61, .14) 48%, rgba(184, 242, 61, 0) 76%),
      linear-gradient(145deg, rgba(184, 242, 61, .1) 8%, rgba(184, 242, 61, 0) 72%);
    filter: blur(28px);
    transform: rotate(-14deg);
  }
}