/* HERO */

.hero_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  background:
    radial-gradient(circle at 72% 42%, rgba(0, 104, 148, 0.16) 0%, transparent 33%),
    linear-gradient(125deg, #FFFFFF 0%, rgba(0, 104, 148, 0.05) 56%, rgba(0, 104, 148, 0.1) 100%);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.hero_wrapper > .container {
  width: 100%;
  flex: 0 0 auto;
  align-self: stretch;
}

/* < MD */
@media screen and (min-width: 0px) and (max-width: 991.98px) {
  .hero_wrapper {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}

/* XS */
@media screen and (min-width: 0px) and (max-width: 575.98px) {
  .hero_wrapper {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
}

/* < LG */
@media screen and (min-width: 0px) and (max-width: 991.98px) {
  .hero_row > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

.hero_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 560px;
  position: relative;
  z-index: 2;
}

.hero_title {
  margin: 0 0 var(--space-lg) 0;
  color: #00364D;
  font-family: 'Manrope', Arial, Verdana, Tahoma;
  font-weight: 800;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  background: linear-gradient(to top left, #006894 0%, #006894 38.8235%, #00364D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* LG */
@media screen and (min-width: 991.98px) and (max-width: 1199.98px) {
  .hero_title {
    font-size: 40px;
  }
}

/* < LG */
@media screen and (min-width: 0px) and (max-width: 1199.98px) {
  .hero_content {
    max-width: none;
    width: 100%;
  }
}

/* < LG */
@media screen and (min-width: 0px) and (max-width: 991.98px) {
  .hero_content {
    align-items: stretch;
  }
}

/* < LG */
@media screen and (min-width: 0px) and (max-width: 991.98px) {
  .hero_title {
    font-size: 36px;
  }
}

/* XS */
@media screen and (min-width: 0px) and (max-width: 575.98px) {
  .hero_title {
    font-size: 30px;
  }
}

.hero_text {
  margin: 0 0 var(--space-xl) 0;
  color: #00364D;
  font-family: 'Manrope', Arial, Verdana, Tahoma;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* < MD */
@media screen and (min-width: 0px) and (max-width: 991.98px) {
  .hero_text {
    font-size: var(--text-md);
  }
}

.hero_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.hero_actions .btn {
  padding-left: 24px;
  padding-right: 24px;
}

.hero_actions .btn-primary {
  color: #FFFFFF;
  background-color: #006894;
  border-color: #006894;
}

.hero_actions .btn-primary:hover,
.hero_actions .btn-primary:focus,
.hero_actions .btn-primary:active {
  color: #FFFFFF;
  background-color: #00948A;
  border-color: #00948A;
}

.hero_actions .btn-outline-primary {
  color: #006894;
  background-color: #FFFFFF;
  border-color: #006894;
}

.hero_actions .btn-outline-primary:hover,
.hero_actions .btn-outline-primary:focus,
.hero_actions .btn-outline-primary:active {
  color: #00948A;
  background-color: #FFFFFF;
  border-color: #00948A;
}

/* < LG */
@media screen and (min-width: 0px) and (max-width: 991.98px) {
  .hero_actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero_actions .btn {
    width: 100%;
  }
}

.hero_visual {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  container-type: size;
  z-index: 1;
  perspective: 800px;
  perspective-origin: 50% 50%;
}

.hero_visual_stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  --hero_tilt_x: 0deg;
  --hero_tilt_y: 0deg;
  transform:
    rotateX(calc(-18deg + var(--hero_tilt_x)))
    rotateY(calc(-24deg + var(--hero_tilt_y)))
    skew(-4deg, 0deg)
    scale(0.94)
    translate(-11%, -5%);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  container-type: size;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero_visual_stage {
    --hero_tilt_x: 0deg;
    --hero_tilt_y: 0deg;
    will-change: auto;
  }
}

.hero_visual_item {
  position: absolute;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
  transform-style: flat;
  overflow: visible;
}

.hero_visual_cast_shadow {
  position: absolute;
  left: 4%;
  bottom: -14%;
  top: auto;
  z-index: 0;
  width: 110%;
  height: 42%;
  background: radial-gradient(
    ellipse 68% 52% at 50% 45%,
    rgba(0, 54, 77, 0.5) 0%,
    rgba(0, 54, 77, 0.28) 28%,
    rgba(0, 54, 77, 0.1) 52%,
    rgba(0, 54, 77, 0.03) 68%,
    rgba(0, 54, 77, 0) 82%
  );
  filter: blur(18px);
  transform: skewX(-28deg) scale(1.08, 1);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.hero_visual_face {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 2;
}

.hero_visual_depth {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero_visual_depth_slice {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translate(
    calc(var(--hero_depth_i) * 1.75px),
    calc(var(--hero_depth_i) * -0.9px)
  );
  filter: brightness(var(--hero_depth_brightness, 1));
}

.hero_visual_depth_slice_fill {
  height: 100%;
  background-color: #CCE4F1;
  -webkit-mask-image: var(--hero_depth_mask);
  mask-image: var(--hero_depth_mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hero_visual_layer {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.hero_visual_layer_01 {
  z-index: 1;
  width: 68%;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  transform-style: flat;
}

.hero_visual_layer_02,
.hero_visual_layer_02_needle {
  z-index: 2;
  width: 28.8%;
  left: 73.7%;
  top: 30%;
}

.hero_visual_layer_02_needle {
  z-index: 3;
  height: auto;
  overflow: visible;
  isolation: isolate;
  transform-style: flat;
  backface-visibility: hidden;
}

.hero_visual_layer_02_needle .hero_gauge_needle {
  --hero_needle_start: -134deg;
  --hero_needle_wobble: 8deg;
  transform: rotate(var(--hero_needle_start));
  transform-box: view-box;
  transform-origin: 350.56px 353.78px;
  animation: hero_gauge_needle_spin 7s infinite;
  backface-visibility: hidden;
}

@keyframes hero_gauge_needle_spin {
  0% {
    transform: rotate(var(--hero_needle_start));
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }

  32% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
  }

  36% {
    transform: rotate(calc(-1 * var(--hero_needle_wobble)));
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
  }

  40% {
    transform: rotate(var(--hero_needle_wobble));
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
  }

  44% {
    transform: rotate(calc(-1 * var(--hero_needle_wobble)));
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
  }

  48% {
    transform: rotate(var(--hero_needle_wobble));
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
  }

  52% {
    transform: rotate(calc(-1 * var(--hero_needle_wobble)));
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
  }

  56% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  100% {
    transform: rotate(var(--hero_needle_start));
  }
}

.hero_visual_layer_04,
.hero_visual_layer_04_blink {
  z-index: 4;
  width: 34%;
  left: -5.5%;
  bottom: -2%;
}

.hero_visual_layer_04_blink {
  z-index: 5;
  height: auto;
  overflow: visible;
  isolation: isolate;
  transform-style: flat;
  pointer-events: none;
}

.hero_visual_layer_04_blink .hero_code_blink_bar {
  animation: hero_code_blink 1.06s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes hero_code_blink {
  0%,
  40% {
    opacity: 1;
  }

  48%,
  90% {
    opacity: 0;
  }

  98%,
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_visual_layer_02_needle .hero_gauge_needle {
    animation: none;
    transform: rotate(0deg);
  }

  .hero_visual_layer_04_blink .hero_code_blink_bar {
    animation: none;
    opacity: 1;
  }
}

.hero_visual_layer_03 {
  z-index: 3;
  width: 44.8%;
  left: 64.5%;
  top: 63%;
  bottom: auto;
}

/* < MD */
@media screen and (min-width: 0px) and (max-width: 991.98px) {
  .hero_visual {
    margin-top: var(--space-xl);
    max-width: 480px;
  }
}

/* MD */
@media screen and (min-width: 767.98px) and (max-width: 991.98px) {
  .hero_visual {
    max-width: 528px;
  }

  .hero_visual_stage {
    transform:
      rotateX(calc(-18deg + var(--hero_tilt_x)))
      rotateY(calc(-24deg + var(--hero_tilt_y)))
      skew(-4deg, 0deg)
      scale(0.94)
      translate(-8%, -5%);
  }
}

/* SM */
@media screen and (min-width: 575.98px) and (max-width: 767.98px) {
  .hero_visual_stage {
    transform:
      rotateX(calc(-18deg + var(--hero_tilt_x)))
      rotateY(calc(-24deg + var(--hero_tilt_y)))
      skew(-4deg, 0deg)
      scale(0.94)
      translate(-9%, -5%);
  }
}

/* XS */
@media screen and (min-width: 0px) and (max-width: 575.98px) {
  .hero_visual_stage {
    transform:
      rotateX(calc(-18deg + var(--hero_tilt_x)))
      rotateY(calc(-24deg + var(--hero_tilt_y)))
      skew(-4deg, 0deg)
      scale(0.94)
      translate(-8%, -5%);
  }
}