@layer fonts {
  /* space-mono-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/space-mono-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* lexend-deca-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/lexend-deca-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  :root {
    --ff-mono: 'Space Mono', 'Courier New', Courier, monospace;
    --fs-56: calc(56 / 16 * 1rem);
    --fs-48: calc(48 / 16 * 1rem);
    --fs-40: calc(40 / 16 * 1rem);
    --fs-32: calc(32 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-20: calc(20 / 16 * 1rem);
    --fs-15: calc(15 / 16 * 1rem);
  }

  h1 {
    font-size: var(--fs-40);
    letter-spacing: -1.79px;

    @media (width >= calc(700 / 16 * 1rem)) {
      font-size: var(--fs-56);
      letter-spacing: -2.5px;
    }
  }

  h2 {
    font-size: var(--fs-32);
    letter-spacing: -1.43px;

    @media (width >= calc(700 / 16 * 1rem)) {
      font-size: var(--fs-48);
      letter-spacing: -2.14px;
    }
  }

  h3 {
    font-size: var(--fs-20);
    letter-spacing: -0.89px;

    @media (width >= calc(700 / 16 * 1rem)) {
      font-size: var(--fs-24);
      letter-spacing: -1.07px;
    }
  }
}

@layer colors {
  :root {
    --c-white: hsl(0, 0%, 100%);
    --c-yellow: hsl(40, 97%, 58%);
    --c-xdark-navy: hsl(215, 14%, 23%);
    --c-dark-navy: hsl(216, 17%, 35%);
    --c-dim-grey: hsl(217, 12%, 62%);
    --c-light-grey: hsl(212, 41%, 93%);
    --c-snow: hsl(214, 37%, 96%);
    --c-light-yellow: hsl(39, 100%, 94%);
    --c-black-overlay: hsla(0, 0%, 0%, 0.75);
  }
}

@layer global {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: 'Lexend Deca', Arial, Helvetica, sans-serif;
    font-size: var(--fs-15);
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  h1,
  h2,
  h3,
  p {
    text-wrap: balance;
  }

  h1,
  h2,
  h3 {
    font-family: var(--ff-mono);
    margin: 0;
    line-height: 1.1;
  }

  p {
    line-height: 1.6;
    margin: 0;
  }

  a {
    text-decoration: none;
  }

  header ul,
  footer ul {
    margin: 0;
    padding: 0;

    li {
      list-style-type: none;
    }
  }

  .visually-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

@layer layout {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr calc(100% - 64px) 1fr;

    @media (width >= calc(700 / 16 * 1rem)) {
      grid-template-columns: 1fr min(calc(100% - 80px), calc(1110 / 16 * 1rem)) 1fr;
    }

    &.fb-col {
      display: grid;
      grid-template-columns: 1fr repeat(3, calc(calc(100% - 64px) / 3)) 1fr;

      @media (width >= calc(700 / 16 * 1rem)) {
        grid-template-columns: 1fr repeat(6, calc(calc(100% - 80px) / 6)) 1fr;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-template-columns: 1fr repeat(12, calc(calc(1110 / 16 * 1rem) / 12)) 1fr;
      }
    }

    &.small {
      @media (width >= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)) {
        grid-template-columns: 1fr min(calc(100% - 200px), calc(1110 / 16 * 1rem)) 1fr;
      }
    }

    > * {
      grid-column: 2;
    }

    > .fullbleed {
      grid-column: 1 / -1;
    }
  }
}

@layer button {
  .button {
    display: block;
    background: var(--c-yellow);
    width: fit-content;
    padding: 12px 38px;
    color: var(--c-xdark-navy);
    font-family: var(--ff-mono);
    border: 3px solid var(--c-yellow);
    transition: 150ms ease-in-out;
    transition-property: color, border-color, background-color;

    &:hover {
      background: transparent;
      border: 3px solid var(--c-xdark-navy);
    }

    &.hover-white:hover {
      background: transparent;
      border: 3px solid var(--c-white);
      color: var(--c-white);
    }
  }
}

@layer header {
  .header {
    padding-block: 20px;
    align-items: center;

    .header-logo-link,
    .header-links {
      grid-row: 1;
    }

    .header-logo-link {
      z-index: 12;
      justify-self: center;
      width: calc(75 / 16 * 1rem);

      @media (width >= calc(700 / 16 * 1rem)) {
        justify-self: start;
        width: calc(108 / 16 * 1rem);
      }

      &:hover path {
        fill: var(--c-xdark-navy);
      }
    }

    .header-links {
      justify-self: start;
      display: grid;
      align-items: center;

      @media (width >= calc(700 / 16 * 1rem)) {
        padding-left: 167px;
        width: 100%;
      }
    }
  }
}

@layer topnav {
  .topnav {
    z-index: 10;

    &::before {
      content: '';
      position: fixed;
      inset: 64px 0 0 0;
      background: var(--c-black-overlay);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease-in-out;
    }

    &:has(.topnav__open[aria-expanded='true'])::before {
      opacity: 1;
    }
  }

  .topnav button {
    translate: 0 2px;
    background: none;
    border: none;
    padding: 0;

    @media (width >= calc(700 / 16 * 1rem)) {
      display: none;
    }
  }

  .topnav__open[aria-expanded='true'] {
    display: none;

    + .topnav__menu .topnav__menu-content {
      opacity: 1;
      translate: 0;

      @media (prefers-reduced-motion) {
        opacity: 1;
      }
    }

    + .topnav__menu-content::before {
      opacity: 1;
    }

    + .topnav__menu .topnav__close {
      display: block;
    }
  }

  .topnav__close {
    display: none;
    margin-inline-start: auto;
    margin-block-end: 8rem;
    position: absolute;
    top: 18px;
  }

  .topnav__menu-content {
    display: flex;
    justify-content: space-between;

    @media (width < calc(700 / 16 * 1rem)) {
      opacity: 0;
      flex-direction: column;
      position: fixed;
      inset: 64px 120px 0 0;
      padding: 64px 32px 24px;
      background-color: var(--c-xdark-navy);
      translate: -100vw 0;
      transition: translate 0.5s ease-in-out;
      transition-property: opacity;
    }

    @media (width < calc(700 / 16 * 1rem)) and (prefers-reduced-motion) {
      translate: 0;
      opacity: 0;
      transition: opacity 500ms ease-in-out;
    }
  }

  .topnav__links {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;

    @media (width < calc(700 / 16 * 1rem)) {
      flex-direction: column;
      align-items: stretch;
    }
  }

  .topnav__item {
    list-style-type: none;
  }

  .topnav__link {
    font-family: var(--ff-mono);
    font-weight: 700;
    color: var(--c-light-grey);
    transition: color 150ms ease-in-out;

    @media (width >= calc(700 / 16 * 1rem)) {
      color: var(--c-dim-grey);
    }

    &:hover {
      color: var(--c-dark-navy);
    }
  }
}

@layer hero {
  .hero {
    overflow-x: clip;

    > * {
      grid-row: 1;
    }

    .hero-picture {
      max-height: 100vh;
      overflow: clip;
    }

    .hero-img {
      width: 100%;
    }

    .hero-content {
      align-self: center;
      justify-self: center;
      display: grid;
      justify-items: center;
      color: var(--c-white);
      translate: 0 -24px;
      text-align: center;

      @media (width >= calc(700 / 16 * 1rem)) {
        max-width: 70%;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        justify-self: start;
        justify-items: start;
        text-align: left;
        max-width: 57ch;
        translate: 0;
      }
    }

    p,
    .button {
      @media (width >= calc(1000 / 16 * 1rem)) {
        margin-inline-start: 95px;
      }
    }

    p {
      margin-block: 24px 32px;
    }

    .hero-l-arrow {
      display: none;

      @media (width >= calc(1000 / 16 * 1rem)) {
        display: block;
        align-self: center;
        translate: -140px 30px;
      }
    }

    .hero-r-arrow {
      justify-self: start;
      align-self: end;
      translate: -245px -34px;
      grid-column: 1 / -1;

      @media (width >= calc(700 / 16 * 1rem)) {
        translate: -100px -34px;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        translate: 530px 100px;
        grid-column: 2;
        align-self: center;
      }
    }

    .hero-circles {
      display: none;

      @media (width >= calc(700 / 16 * 1rem)) {
        display: block;
        justify-self: end;
        align-self: end;
        translate: 30px -45px;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        display: none;
      }

      @media (width >= calc(1300 / 16 * 1rem)) {
        display: block;
        align-self: center;
        translate: 30px 130px;
      }
    }
  }
}

@layer features-sm {
  .features-sm {
    .gray-line {
      display: none;
      position: relative;
      background: var(--c-light-grey);
      z-index: -1;

      &.tablet {
        @media (width >= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)) {
          display: block;
          left: calc(96px / 2);
          translate: -50% 0;
          width: 15px;
          height: calc(100% + 20px);
          grid-column: 1 / -1;
          grid-row: 1 / 4;
        }
      }

      &.desktop-small {
        @media (width >= calc(1000 / 16 * 1rem)) {
          position: absolute;
          display: block;
          width: 100%;
          height: 15px;
          grid-column: 2 / 3;
          translate: 45px calc(120px + 96px / 2 - 50%);
        }
      }

      &.desktop-large {
        grid-row: 1;

        @media (width >= calc(1000 / 16 * 1rem)) {
          display: block;
          height: 15px;
          grid-column: 1 / -2;
          width: calc(100% - 320px);
          translate: 0 calc(120px + 96px / 2 + 50%);
        }
      }
    }

    .features-sm-grid {
      position: relative;
      display: grid;
      gap: 48px;
      padding-block: 120px;

      @media (width >= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)) {
        grid-template-rows: 120px repeat(3, auto);
        gap: 0;
        padding-block: 0 145px;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
      }
    }

    .feature-sm {
      display: grid;

      @media (width < calc(700 / 16 * 1rem)) {
        gap: 24px;
        justify-items: center;
        text-align: center;
      }

      @media (width >= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)) {
        grid-column: 1 / -1;
        margin-block-end: 48px;
        gap: 24px;
        text-align: center;
        justify-items: center;
        grid-template-columns: 96px 1fr;
        grid-template-rows: auto auto;
        gap: 28px 80px;
        text-align: left;
        justify-items: start;
        grid-row-end: span 1;

        &:nth-child(3) {
          grid-row-start: 2;
        }

        &:nth-child(4) {
          grid-row-start: 3;
        }

        &:nth-child(5) {
          grid-row-start: 4;
        }

        &:last-child {
          margin-block-end: 0;
        }
      }
    }

    .feature-sm-img {
      width: 56px;
      height: 56px;

      @media (width >= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)) {
        width: 96px;
        height: 96px;
        grid-column: 1;
        grid-row: 1 / -1;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        width: 96px;
        height: 96px;
        margin-block-end: 40px;
      }
    }

    .feature-sm-title {
      color: var(--c-dark-navy);

      @media (width >= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)) {
        grid-column: 2;
        grid-row: 1;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        margin-block-end: 27px;
      }
    }

    .feature-sm-descr {
      color: var(--c-dim-grey);

      @media (width >= calc(700 / 16 * 1rem)) and (width < calc(1000 / 16 * 1rem)) {
        grid-column: 2;
        grid-row: 2;
      }
    }
  }
}

@layer features-lg {
  .features-lg {
    display: grid;
    row-gap: 120px;
    padding-block-end: 120px;

    @media (width >= calc(1000 / 16 * 1rem)) {
      row-gap: 160px;
    }

    .feature-lg {
      row-gap: 56px;
      overflow-x: clip;
    }

    .feature-lg-img {
      border-radius: 50%;
      grid-column: 2 / 5;
      grid-row: 1 / 2;
      justify-self: center;

      @media (width >= calc(700 / 16 * 1rem)) {
        grid-column: 3 / span 4;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-column: span 5 / -2;
      }
    }

    .feature-lg-text {
      grid-column: 2 / 5;
      display: grid;
      row-gap: 32px;
      justify-items: center;
      text-align: center;

      @media (width >= calc(700 / 16 * 1rem)) {
        grid-column: 2 / -2;
        padding-inline: 80px;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        max-width: calc(473 / 16 * 1rem);
        padding-inline: 0px;
        grid-column: 2 / span 5;
        grid-row: 1 / span 1;
        justify-self: start;
        align-self: center;
        justify-items: start;
        text-align: start;
      }
    }

    .feature-lg-title {
      color: var(--c-dark-navy);
      font-size: var(--fs-32);

      @media (width >= calc(700 / 16 * 1rem)) {
        font-size: var(--fs-48);
      }
    }

    .feature-lg-descr {
      color: var(--c-dim-grey);
    }

    .feature-lg-arrow-l,
    .feature-lg-arrow-r {
      min-height: 138px;
      object-fit: cover;
      grid-row: 1 / 2;
      z-index: 1;
    }

    .feature-lg-arrow-l {
      grid-column: 2 / -1;
      align-self: end;
      object-position: left bottom;

      @media (width >= calc(700 / 16 * 1rem)) {
        width: 100%;
        object-fit: cover;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-column: 8 / -2;
      }
    }

    .feature-lg-arrow-r {
      grid-column: 1 / 5;
      object-position: right bottom;
      translate: -80px 0;

      @media (width >= calc(700 / 16 * 1rem)) {
        translate: -40px 0;
      }
    }

    .feature-lg-circle {
      display: none;

      @media (width >= calc(700 / 16 * 1rem)) {
        display: block;
        grid-row: 1 / span 1;
        grid-column: 3 / span 4;
        justify-self: center;
        translate: calc(100% + 80px) 0;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-column: span 5 / -2;
        translate: calc(100% + 64px) 0;
      }
    }

    .feature-lg:nth-child(1),
    .feature-lg:nth-child(3) {
      .feature-lg-arrow-r {
        display: none;
      }
    }

    .feature-lg:nth-child(2) {
      .feature-lg-img {
        @media (width >= calc(1000 / 16 * 1rem)) {
          grid-column: 2 / span 5;
        }
      }

      .feature-lg-text {
        @media (width >= calc(1000 / 16 * 1rem)) {
          grid-column: span 5 / -2;
        }
      }

      .feature-lg-arrow-l {
        display: none;
      }

      .feature-lg-arrow-r {
        @media (width >= calc(1000 / 16 * 1rem)) {
          grid-column-end: 4;
          translate: 0;
        }
      }

      .feature-lg-circle {
        grid-column: 3 / span 4;
        translate: calc(-100% - 64px) 0;
        justify-self: center;

        @media (width >= calc(1000 / 16 * 1rem)) {
          grid-column: 2 / span 5;
        }
      }
    }

    .feature-lg:nth-child(3) {
      .feature-lg-arrow-l {
        grid-column: 3 / -1;
        align-self: start;
        translate: 20px 0;

        @media (width >= calc(700 / 16 * 1rem)) {
          grid-column: 5 / -1;
          translate: 40px 80px;
        }

        @media (width >= calc(1000 / 16 * 1rem)) {
          grid-column: -4 / -1;
          translate: -20px 80px;
        }
      }
    }
  }
}

@layer cta {
  .cta {
    background-color: var(--c-dark-navy);
    background-image: url('/assets/patterns/semi-circles.svg');
    background-repeat: no-repeat;
    background-position: 75% 100%;
    background-size: 320%;
    color: var(--c-white);
    justify-items: center;
    text-align: center;

    @media (width >= calc(700 / 16 * 1rem)) {
      background-position: 50% 110%;
      background-size: 160%;
    }

    @media (width >= calc(1000 / 16 * 1rem)) {
      justify-items: stretch;
      text-align: start;
      background-position: 170% 110%;
      background-size: 82%;
    }

    .cta-content {
      display: grid;
      row-gap: 40px;
      padding-block: 88px;

      @media (width >= calc(700 / 16 * 1rem)) {
        padding-block: 62px;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        padding-block: 100px;
        align-items: center;
      }
    }

    .cta-title {
      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-row: 1 / span 1;
        max-width: calc(415 / 16 * 1rem);
      }
    }

    .cta-buttons {
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 16px;

      :first-child {
        text-align: end;
      }

      :last-child {
        text-align: start;
      }

      @media (width >= calc(1000 / 16 * 1rem)) {
        grid-row: 1 / span 1;
        justify-self: end;
      }
    }
  }
}

@layer footer {
  .footer {
    padding-block: 64px 88px;
    background: var(--c-xdark-navy);
    color: var(--c-white);

    @media (width >= calc(700 / 16 * 1rem)) {
      padding-block: 32px;
    }

    .footer-content {
      display: grid;
      justify-items: center;
      align-items: center;
      text-align: center;

      @media (width >= calc(700 / 16 * 1rem)) {
        grid-template-columns: auto auto 1fr;
      }
    }

    .footer-logo-link {
      .footer-logo path {
        transition: fill 150ms ease-in-out;
      }

      &:hover {
        .footer-logo path {
          fill: var(--c-yellow);
        }
      }
    }

    .footer-nav {
      margin-block: 40px 85px;

      @media (width >= calc(700 / 16 * 1rem)) {
        margin: 0 0 0 60px;
      }
    }

    .footer-links {
      display: flex;
      gap: 16px;
      flex-direction: column;

      @media (width >= calc(700 / 16 * 1rem)) {
        flex-direction: row;
        gap: 32px;
      }
    }

    .footer-link {
      font-family: var(--ff-mono);
      font-weight: 700;
      color: var(--c-dim-grey);
      transition: color 150ms ease-in-out;

      &:hover {
        color: var(--c-yellow);
      }
    }

    .footer-social {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      gap: 24px;

      @media (width >= calc(700 / 16 * 1rem)) {
        justify-self: end;
      }
    }

    .footer-social-link {
      path {
        transition: fill 150ms ease-in-out;
      }

      &:hover path {
        fill: var(--c-white);
      }
    }
  }
}