.cta {
  justify-content: center;
  align-items: center;
  padding: 22rem 12rem;
  display: flex;
  position: relative;
}

.cta .cta-container {
  z-index: 1;
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.cta .cta-meta {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.cta .cta-meta__img {
  opacity: .5;
  width: 220vmin;
  height: 220vmin;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 4%);
}

.cta-lines {
  pointer-events: none;
  width: 100%;
  height: auto;
  position: absolute;
  top: 20rem;
  left: 0;
}

.cta .cta-heading {
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 80rem;
  display: flex;
}

.cta .cta-heading .cta-title {
  color: var(--black);
  text-align: center;
  letter-spacing: -3.2px;
  font-size: max(40px, min(7.5rem + 5px, 140px));
  font-weight: 500;
  line-height: 100%;
}

.cta .cta-heading .cta-desc {
  color: var(--gray-secondary);
  text-align: center;
  letter-spacing: -.18px;
  width: 90%;
  font-size: max(12px, min(1.7rem + 2px, 40px));
  font-weight: 500;
  line-height: 150%;
}

.cta .cta-actions {
  width: 20rem;
  height: 4rem;
  margin-top: 1rem;
}

@media (orientation: portrait) {
  .cta {
    padding: 12rem 3rem 23rem;
  }

  .cta .cta-heading {
    gap: 1rem;
    width: 100%;
  }

  .cta .cta-heading .cta-title {
    letter-spacing: -1.2px;
    font-size: 3.5rem;
  }

  .cta .cta-heading .cta-desc {
    letter-spacing: 0;
    width: 100%;
    font-size: 1.2rem;
  }

  .cta .cta-actions {
    width: auto;
    height: auto;
    margin-top: 1.5rem;
  }

  .cta-lines {
    top: 6rem;
  }

  .cta .cta-meta__img {
    opacity: 1;
    width: 85rem;
    height: 85rem;
    transform: translate(-50%, 20rem);
  }

  .cta .cta-meta {
    width: 100%;
    height: 100%;
    top: 0;
  }
}

.footer {
  background: #0f172a;
  padding: 12rem 12rem 7rem;
  position: relative;
  overflow: hidden;
}

.footer .footer-container {
  flex-direction: column;
  gap: 22rem;
  width: 100%;
  display: flex;
}

.footer .footer-top {
  grid-template-columns: 50rem repeat(4, auto);
  align-items: start;
  gap: 12rem;
  width: 100%;
  display: grid;
}

.footer .footer-brand {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.footer .footer-brand .footer-logo {
  width: auto;
  height: 6rem;
}

.footer .footer-brand .footer-tagline {
  color: #fff;
  letter-spacing: -.18px;
  margin-top: 3.5rem;
  font-size: max(12px, min(1.6rem + 2px, 30px));
  font-weight: 400;
  line-height: 150%;
}

.footer .footer-brand .footer-line {
  background: #ffffff81;
  width: 16rem;
  height: 1px;
  margin-top: 5rem;
}

.footer .footer-brand .footer-mail {
  align-items: center;
  gap: 2rem;
  margin-top: 4rem;
  text-decoration: none;
  display: flex;
}

.footer .footer-brand .footer-mail__icon {
  flex-shrink: 0;
  width: 3rem;
  height: auto;
}

.footer .footer-brand .footer-mail__text {
  color: #fff;
  letter-spacing: -.14px;
  font-size: max(10px, min(1.3rem + 4px, 30px));
  font-weight: 500;
  line-height: 1;
  position: relative;
  top: -.08em;
}

.footer .footer-brand .footer-mail__text:after {
  transition: transform .6s var(--smooth-ease);
  content: "";
  transform-origin: 0;
  background: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -.35em;
  left: 0;
  transform: scaleX(1);
}

.footer .footer-col {
  flex-direction: column;
  gap: 2.5rem;
  display: flex;
}

.footer .footer-col .footer-col__title {
  color: #fff;
  letter-spacing: -.3px;
  font-size: max(14px, min(2.2rem + 4px, 40px));
  font-weight: 500;
  line-height: 120%;
}

.footer .footer-col .footer-col__list {
  flex-direction: column;
  gap: 2rem;
  list-style: none;
  display: flex;
}

.footer .footer-col .footer-col__list a {
  color: #fff;
  letter-spacing: -.14px;
  font-size: max(12px, min(1.6rem + 2px, 30px));
  font-weight: 400;
  line-height: 130%;
  text-decoration: none;
}

.footer .footer-socials {
  align-items: center;
  gap: 2rem;
  display: flex;
}

.footer .footer-socials .footer-social {
  flex-shrink: 0;
  width: auto;
  height: 2.4rem;
  display: flex;
}

.footer .footer-social__stroke {
  stroke: #fff;
}

.footer .footer-social__fill {
  fill: #fff;
}

.footer .footer-bottom {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  display: grid;
}

.footer .footer-bottom .footer-legal {
  align-items: center;
  gap: 3rem;
  display: flex;
}

.footer .footer-bottom .footer-legal a {
  color: #fff;
  letter-spacing: -.16px;
  font-size: max(12px, min(1.6rem + 2px, 32px));
  font-weight: 400;
  text-decoration: none;
}

.footer .footer-bottom .footer-scroll {
  --scroll-arrow: 1.8rem;
  --scroll-lift: 1.6em;
  cursor: pointer;
  background: none;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  width: -moz-fit-content;
  width: fit-content;
  padding: 1.5rem 3rem;
  display: flex;
  position: relative;
}

.footer .footer-bottom .footer-scroll .footer-scroll__bg {
  transition: transform .6s var(--smooth-ease);
  z-index: 0;
  background: #fff;
  border-radius: 100px;
  position: absolute;
  inset: 0;
}

.footer .footer-bottom .footer-scroll .footer-scroll__text {
  z-index: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

.footer .footer-bottom .footer-scroll .footer-scroll__text-inner {
  transition: transform .6s var(--smooth-ease);
  white-space: nowrap;
  color: #3b82f6;
  letter-spacing: -.16px;
  text-shadow: 0 var(--scroll-lift) currentColor;
  font-size: max(12px, min(1.6rem + 4px, 32px));
  font-weight: 400;
  line-height: normal;
  display: inline-block;
  transform: translateY(0) rotate(.001deg);
}

.footer .footer-bottom .footer-scroll .footer-scroll__icon {
  z-index: 1;
  flex-shrink: 0;
  width: 1.2rem;
  height: auto;
  position: relative;
  overflow: hidden;
}

.footer .footer-bottom .footer-scroll .footer-scroll__icon svg {
  transition: transform .6s var(--smooth-ease);
  width: 100%;
  height: 100%;
  filter: drop-shadow(#3b82f6 0 var(--scroll-arrow) 0);
}

.footer .footer-bottom .footer-copy {
  color: #fff;
  text-align: right;
  letter-spacing: -.16px;
  font-size: max(12px, min(1.6rem + 2px, 32px));
  font-weight: 400;
}

.footer .footer-col .footer-col__list a.is--active, .footer .footer-bottom .footer-legal a.is--active {
  color: #6ba8ff;
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .footer a {
    transition: opacity .3s ease-out;
  }

  .footer a:hover {
    opacity: .6;
  }

  .footer .footer-brand .footer-mail:hover .footer-mail__text:after {
    transform-origin: 100%;
    transform: scaleX(0);
  }

  .footer .footer-bottom .footer-scroll:hover .footer-scroll__bg {
    transform: scale(.95);
  }

  .footer .footer-bottom .footer-scroll:hover .footer-scroll__text-inner {
    transform: translateY(calc(var(--scroll-lift) * -1)) rotate(.001deg);
  }

  .footer .footer-bottom .footer-scroll:hover .footer-scroll__icon svg {
    transform: translateY(calc(var(--scroll-arrow) * -1));
  }
}

.footer .footer-lines {
  pointer-events: none;
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 8rem;
  left: 0;
}

@media (orientation: portrait) {
  .footer {
    padding: 5rem 3rem 4rem;
  }

  .footer .footer-container {
    gap: 12rem;
  }

  .footer .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 6rem 2rem;
  }

  .footer .footer-top > div:first-child {
    grid-column: 1 / -1;
  }

  .footer .footer-top > div:nth-child(2) {
    grid-area: 3 / 1;
    width: 16rem;
  }

  .footer .footer-top > div:nth-child(3) {
    grid-area: 2 / 2;
  }

  .footer .footer-top > div:nth-child(4) {
    grid-area: 2 / 1;
  }

  .footer .footer-top > div:nth-child(5) {
    grid-area: 3 / 2;
  }

  .footer .footer-brand .footer-logo {
    height: 6rem;
  }

  .footer .footer-brand .footer-tagline {
    letter-spacing: 0;
    margin-top: 3rem;
    font-size: 1.8rem;
  }

  .footer .footer-brand .footer-line {
    margin-top: 3rem;
  }

  .footer .footer-brand .footer-mail {
    gap: 1.5rem;
  }

  .footer .footer-brand .footer-mail__icon {
    width: 2.2rem;
  }

  .footer .footer-brand .footer-mail__text {
    letter-spacing: 0;
    font-size: 1.8rem;
  }

  .footer .footer-col {
    gap: 1.5rem;
  }

  .footer .footer-col .footer-col__title {
    letter-spacing: -.2px;
    font-size: 1.8rem;
  }

  .footer .footer-col .footer-col__list {
    gap: 1rem;
  }

  .footer .footer-col .footer-col__list a {
    letter-spacing: 0;
    font-size: 1.2rem;
  }

  .footer .footer-socials {
    gap: 2rem;
  }

  .footer .footer-socials .footer-social {
    height: 2.2rem;
  }

  .footer .footer-bottom {
    grid-template-columns: 1fr auto;
    align-items: end;
    row-gap: 2rem;
  }

  .footer .footer-bottom .footer-legal {
    flex-direction: column;
    grid-area: 1 / 1 / auto / -1;
    align-items: flex-start;
    gap: 2rem;
  }

  .footer .footer-bottom .footer-legal a {
    letter-spacing: 0;
    font-size: 1.2rem;
  }

  .footer .footer-bottom .footer-copy {
    text-align: left;
    letter-spacing: 0;
    grid-area: 2 / 1;
    width: 18rem;
    font-size: 1.1rem;
  }

  .footer .footer-bottom .footer-scroll {
    --scroll-arrow: 1.2rem;
    grid-area: 2 / 2;
    gap: 1rem;
    padding: 1rem 1.8rem;
  }

  .footer .footer-bottom .footer-scroll .footer-scroll__text-inner {
    letter-spacing: 0;
    font-size: 1.2rem;
  }

  .footer .footer-bottom .footer-scroll .footer-scroll__icon {
    width: 1rem;
  }

  .footer .footer-lines {
    bottom: 16rem;
  }
}