@font-face {
  font-family: "Freckle Face";
  src:
    url("../fonts/FreckleFace-Regular.woff2") format("woff2"),
    url("../fonts/FreckleFace-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@property --oct-f {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.35;
}

@property --rotate-transform {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

@keyframes kf_1_11288_rotate_0 {
  0% {
    --rotate-transform: -1.011rad;
  }

  0.9% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    --rotate-transform: -1.011rad;
  }

  32.5% {
    --rotate-transform: -0.764rad;
  }

  100% {
    --rotate-transform: -0.764rad;
  }
}

@keyframes kf_1_11288_translate_0 {
  0% {
    translate: 573.752px 39.752px;
  }

  0.9% {
    translate: 573.752px 39.752px;
  }

  32.5% {
    translate: 390.678px -20.322px;
  }

  69.153% {
    translate: 209.752px -166.248px;
  }

  100% {
    translate: 209.752px -166.248px;
  }
}

#oct-hero .spider {
  z-index: 9;
  left: 71px;
  top: 0;
  transform: rotate(var(--rotate-transform, -1.011rad));
  animation:
    kf_1_11288_rotate_0 2.998507s linear,
    kf_1_11288_translate_0 2.998507s linear;
  animation-iteration-count: infinite;
  width: 115px;
  height: 115px;
  aspect-ratio: 1/1;
}

@media (prefers-reduced-motion: reduce) {
  #oct-hero .spider {
    animation: none;
    transform: none;
    translate: none;
  }
}

#oct-hero .freckle {
  font-family: "Freckle Face", cursive;
  font-weight: 400;
}

.text-decoration-none {
  text-decoration: none;
}

#oct-hero .oct-inner .button:hover {
  text-decoration: none;
}

#oct-hero {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/hero/back.webp);
  background-image: -webkit-image-set(url("../images/hero/back.webp") 1x, url("../images/hero/back@2x.webp") 2x);
}

#form-bundle {
  z-index: 9;
  position: relative;
}

#oct-hero .oct-right {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/hero/form-back.jpg);
  background-image: image-set(url("../images/hero/form-back.webp") 1x, url("../images/hero/form-back@2x.webp") 2x);
  background-image: -webkit-image-set(url("../images/hero/form-back.webp") 1x, url("../images/hero/form-back@2x.webp") 2x);
  width: 100%;
  padding-bottom: 0;
  padding-top: 0;
}

#oct-hero .oct-inner {
  width: 1350px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  padding-top: 107px;
  padding-bottom: 123px;
}

#oct-hero .oct-left {
  font-size: 25px;
  line-height: 1.6em;
  font-family: "Roboto";
}

#oct-hero .oct-right {
  max-width: 630px;
}

#oct-hero .oct-left strong {
  font-size: 1.88em;
  line-height: 1.25em;
  font-weight: 900;
  margin-bottom: 28px;
}

#oct-hero .left-inner {
  max-width: 25.4em;
}

#oct-hero .button {
  width: 11.75em;
  height: 2.25em;
  border-radius: 54px;
  font-size: 1.25rem;
  margin-top: 0;
  padding: 0.13em 0 0 0;
  line-height: 1;
  background-color: #00FE00;
  top: 22px;
  z-index: 4;
  border: none;
}

#oct-hero .oct-left .button {
  background-color: var(--orange);
  margin-top: 30px;
}

#oct-hero p {
  margin-bottom: 0;
}

#form-bundle form {
  max-width: 100%;
  width: 100%;
  padding: 0 30px;
}

#form-bundle .form-action {
  text-align: center;
}

#oct-hero .form-text {
  color: #00FE00;
  text-align: center;
  font-size: 27px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%;
  /* 27px */
  letter-spacing: 0.54px;
  margin-top: 4px;
}

#oct-hero .text-top {
  color: #FFF;
  font-size: 32.341px;
  font-style: normal;
  font-weight: 500;
  line-height: 132%;
}

#oct-hero .text-top span {
  color: #00FE00;
  text-align: center;
  font-size: 32.341px;
  font-style: normal;
  font-weight: 400;
  line-height: 132%;
  /* 42.69px */
  text-transform: uppercase;
  -webkit-text-stroke: 5.94px #090;
  paint-order: stroke fill;
}

#hero-form {
  margin-top: 20px;
}

#oct-hero .oh-stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
}

#oct-hero .oh-headline {
  width: 100%;
  height: 195.064px;
  padding-top: 27px;
}

#oct-hero .oh-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-text-stroke: 1cqw #009900;
  paint-order: stroke fill;
}

#oct-hero .oh-chars {
  position: relative;
}

#oct-hero .oh-line1 {
  width: auto;
  font-size: 11.8cqw;
  line-height: 11.8cqw;
}

#oct-hero .oh-line1::before {
  -webkit-text-stroke: 0.265cqw #009900;
}

#oct-hero .oh-line1 .oh-ch {
  text-shadow: 1cqw 1.1cqw 0 rgb(0 153 0 / var(--oct-f));
}

#oct-hero .oh-line1::after {
  -webkit-text-stroke: 0.133cqw #009900;
  translate: 1cqw 1.1cqw;
}

#oct-hero .oh-line2 {
  width: auto;
  font-size: 15cqw;
  line-height: 13cqw;
  top: 106px;
}

#oct-hero .oh-line2::before {
  -webkit-text-stroke: 0.333cqw #009900;
}

#oct-hero .oh-line2 .oh-ch {
  text-shadow: 1cqw 1.1cqw 0 rgb(0 153 0 / var(--oct-f));
}

#oct-hero .oh-line2::after {
  -webkit-text-stroke: 0.167cqw #009900;
  translate: 1cqw 1.1cqw;
}

#oct-hero .oh-ch {
  --oct-f: 0.35;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#oct-hero .oh-chars .oh-ch {
  color: rgb(calc(79 - 79 * var(--oct-f)) calc(254 * var(--oct-f)) calc(149 - 149 * var(--oct-f)));
}

#oct-hero .oh-line1 .oh-ch:nth-child(1) {
  animation-name: oct-flick-1;
}

#oct-hero .oh-line1 .oh-ch:nth-child(2) {
  animation-name: oct-flick-2;
}

#oct-hero .oh-line1 .oh-ch:nth-child(3) {
  animation-name: oct-flick-3;
}

#oct-hero .oh-line1 .oh-ch:nth-child(4) {
  animation-name: oct-flick-4;
}

#oct-hero .oh-line1 .oh-ch:nth-child(5) {
  animation-name: oct-flick-5;
}

#oct-hero .oh-line1 .oh-ch:nth-child(6) {
  animation-name: oct-flick-6;
}

#oct-hero .oh-line2 .oh-ch:nth-child(1) {
  animation-name: oct-flick-7;
}

#oct-hero .oh-line2 .oh-ch:nth-child(2) {
  animation-name: oct-flick-8;
}

#oct-hero .oh-line2 .oh-ch:nth-child(3) {
  animation-name: oct-flick-9;
}

#oct-hero .oh-line2 .oh-ch:nth-child(4) {
  animation-name: oct-flick-10;
}

#oct-hero .oh-line2 .oh-ch:nth-child(5) {
  animation-name: oct-flick-11;
}

#oct-hero .oh-line2 .oh-ch:nth-child(6) {
  animation-name: oct-flick-12;
}

#oct-hero .oh-line2 .oh-ch:nth-child(7) {
  animation-name: oct-flick-13;
}

#oct-hero .oh-line2 .oh-ch:nth-child(8) {
  animation-name: oct-flick-14;
}

@keyframes oct-flick-1 {
  0% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  4% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  8% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  12% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  16.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-2 {

  0%,
  3.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  7.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  11.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  15.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  20%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-3 {

  0%,
  6.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  10.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  14.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  18.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  23.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-4 {

  0%,
  10% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  14% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  18% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  22% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  26.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-5 {

  0%,
  13.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  17.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  21.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  25.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  30%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-6 {

  0%,
  16.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  20.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  24.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  28.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  33.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-7 {

  0%,
  20% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  24% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  28% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  32% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  36.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-8 {

  0%,
  23.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  27.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  31.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  35.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  40%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-9 {

  0%,
  26.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  30.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  34.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  38.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  43.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-10 {

  0%,
  30% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  34% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  38% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  42% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  46.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-11 {

  0%,
  33.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  37.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  41.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  45.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  50%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-12 {

  0%,
  36.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  40.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  44.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  48.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  53.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-13 {

  0%,
  40% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  44% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  48% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  52% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  56.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-14 {

  0%,
  43.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  47.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  51.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  55.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  60%,
  100% {
    --oct-f: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #oct-hero .oh-ch {
    animation: none;
    --oct-f: 1;
  }
}

#oct-hero .spider-web {
  width: 100%;
  top: 0;
  clip-path: inset(0 0 24px 0);
  z-index: 1;
}

@supports (background: -webkit-named-image(i)) {
  #oct-hero .button {
    padding-top: 2px;
  }

  #oct-hero .oh-line1 .oh-ch {
    text-shadow: 0.5cqw 0.6cqw 0 rgb(0 153 0 / var(--oct-f));
  }

  #oct-hero .oh-line2 .oh-ch {
    text-shadow: 0.5cqw 0.6cqw 0 rgb(0 153 0 / var(--oct-f));
  }
}

@media screen and (max-width: 1300px) {
  #oct-hero .oct-left {
    font-size: 20px;
  }

  #oct-hero .oct-inner {
    justify-content: center;
    gap: 30px;
  }
}

@media screen and (max-width: 1200px) {
  #oct-hero .oct-left {
    font-size: 18px;
  }
}

@media screen and (max-width: 992px) {
  #oct-hero .oct-inner {
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 70px;
    gap: 50px;
  }

  #oct-hero .oct-right {
    max-width: 90%;
  }
}

@media screen and (max-width: 767px) {
  #oct-hero {
    background-image: url(../images/hero/back-m.webp);
    background-image: -webkit-image-set(url("../images/hero/back-m.webp") 1x, url("../images/hero/back-m@2x.webp") 2x);
    background-position: top left;
    background-size: 100% auto;
  }

  #oct-hero .oct-inner {
    width: 100% !important;
    padding-top: 80px;
    padding-bottom: 0;
    gap: 87px;
  }

  #oct-hero .oct-right {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/hero/form-back-m.jpg);
    background-image: image-set(url("../images/hero/form-back-m.webp") 1x, url("../images/hero/form-back-m@2x.webp") 2x);
    background-image: -webkit-image-set(url("../images/hero/form-back-m.webp") 1x, url("../images/hero/form-back-m@2x.webp") 2x);
    width: 100%;
    padding-bottom: 44px;
    padding-top: 0;
    max-width: 100%;
  }

  #oct-hero .button {
    margin-top: 21px;
  }

  #oct-hero .oct-right .button {
    margin: 0 auto;
    margin-top: 21px;
  }

  #oct-hero .oct-left {
    font-size: 14px;
    line-height: 1.77em;
  }

  #oct-hero .left-inner {
    max-width: 24.43em;
  }

  #oct-hero .oct-left strong {
    font-size: 1.65em;
    line-height: 1.35em;
    margin-bottom: 13px;
  }

  #oct-hero .oct-left .button {
    margin-top: 20px;
  }

  #oct-hero .text-top,
  #oct-hero .text-top span {
    font-size: 8.5cqw;
    line-height: 10cqw;
    margin-top: 1cqw;
  }

  #oct-hero .oh-line2 .oh-ch {
    text-shadow: 1.417cqw 2cqw 0 rgb(0 153 0 / var(--oct-f));
  }

  #oct-hero .oh-line {
    -webkit-text-stroke: 1.265cqw #009900;
  }

  #oct-hero .oh-line2 {
    font-size: 23cqw;
    top: 41cqw;
  }

  #oct-hero .oh-line1 {
    font-size: 17.8cqw;
    line-height: 19.8cqw;
  }

  #oct-hero .oh-headline {
    height: 59cqw;
    padding-top: 16cqw;
  }

  #oct-hero .spider {
    width: 86px;
    height: 86px;
    left: unset;
    right: 507px;
  }

  #oct-hero .spider-web {
    clip-path: unset;
  }
}

@media screen and (max-width: 567px) {
  #oct-hero {
    z-index: 9;
  }

  #preapproved {
    margin-top: 258px;
  }


  @supports (background: -webkit-named-image(i)) {

    #oct-hero .oh-line1 .oh-ch {
      text-shadow: 0.85cqw 0.95cqw 0 rgb(0 153 0 / var(--oct-f));
    }

    #oct-hero .oh-line2 .oh-ch {
      text-shadow: 0.85cqw 0.95cqw 0 rgb(0 153 0 / var(--oct-f));
    }
  }
}

@media screen and (max-width: 400px) {
  #oct-hero {
    background-size: auto 56%;
  }
}