@layer global, component, utility;

@layer global {
  /* source-sans-3-300 - cyrillic_cyrillic-ext_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: "Source Sans 3";
    font-style: normal;
    font-weight: 300;
    src: url("/fonts/source-sans-3-v19-cyrillic_cyrillic-ext_latin-300.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-sans-3-regular - cyrillic_cyrillic-ext_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: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/source-sans-3-v19-cyrillic_cyrillic-ext_latin-regular.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-sans-3-500 - cyrillic_cyrillic-ext_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: "Source Sans 3";
    font-style: normal;
    font-weight: 500;
    src: url("/fonts/source-sans-3-v19-cyrillic_cyrillic-ext_latin-500.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-sans-3-600 - cyrillic_cyrillic-ext_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: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    src: url("/fonts/source-sans-3-v19-cyrillic_cyrillic-ext_latin-600.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* source-sans-3-700 - cyrillic_cyrillic-ext_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: "Source Sans 3";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/source-sans-3-v19-cyrillic_cyrillic-ext_latin-700.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* Fonts */
  :root {
    --fs-16: calc(16 / 16 * 1rem);
    --fs-18: calc(18 / 16 * 1rem);
    --fs-20: calc(20 / 16 * 1rem);
    --fs-22: calc(24 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-32: calc(32 / 16 * 1rem);
    --fs-36: calc(36 / 16 * 1rem);
    --fs-40: calc(40 / 16 * 1rem);

    --font-size-topnav: var(--fs-32);
    --font-size-language: var(--fs-24);
    --font-size-h1: var(--fs-40);
    --font-size-h2: var(--fs-32);
    --font-size-h3: var(--fs-24);
    --font-size-h4: var(--fs-22);
    --font-size-p: var(--fs-20);
    --font-size-button: var(--fs-18);
    --font-size-features-status: var(--fs-32);
    --font-size-footer-homelink: var(--fs-32);
    --font-size-copyright: var(--fs-18);
    --font-size-footer: var(--fs-36);
    --font-size-waitlist-inputs: var(--fs-20);

    @media (width < calc(800 / 16 * 1rem)) {
      --font-size-topnav: var(--fs-24);
      --font-size-features-status: var(--fs-24);
      --font-size-language: var(--fs-16);
    }

    @media (width < calc(1000 / 16 * 1rem)) {
      --font-size-footer: var(--fs-24);
    }
  }

  /* Colors */
  :root {
    --c-dark: hsl(0, 0%, 0%);
    --c-gray-dark: hsl(0, 0%, 29%);
    --c-light: hsl(100, 100%, 100%);
    --c-electric-cyan: hsl(188, 86%, 53%, 0.8);
    --c-blue-400: hsl(213, 94%, 68%, 0.8);
    --c-emerald-500: hsl(160, 84%, 39%, 0.7);
    --c-emerald-500-dim: hsl(160, 84%, 39%, 0.3);

    --color-topnav-bg: var(--c-light);

    --color-text-dark: var(--c-dark);
    --color-text-gray-dark: var(--c-gray-dark);
    --color-text-light: var(--c-light);
    --color-selected-language-bg: var(--c-gray-dark);
    --color-selected-language-border: var(--c-dark);
    --color-homelink-gradient-1: var(--c-electric-cyan);
    --color-homelink-gradient-2: var(--c-blue-400);
    --color-contact-link: var(--c-emerald-500);

    --color-button-primary-bg: var(--c-blue-400);
    --color-button-secondary-bg: var(--c-emerald-500);
    --color-button-border: var(--c-light);
    --color-button-text: var(--c-light);

    --color-text-feature-status-live: var(--c-emerald-500-dim);
    --color-text-feature-status-in-development: var(--c-gray-dark);
  }

  /*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
  START
*/

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

  *:not(dialog) {
    margin: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  #root,
  #__next {
    isolation: isolate;
  }

  /*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
  END
*/

  h1,
  h2,
  h3,
  h4 {
    font-weight: 600;
  }

  h1 {
    font-size: var(--font-size-h1);
    color: var(--color-text-gray-dark);
  }

  h2 {
    font-size: var(--font-size-h2);
  }

  h3 {
    font-size: var(--font-size-h3);
  }

  h4 {
    font-size: var(--font-size-h4);
  }

  p {
    font-size: var(--font-size-p);
    font-weight: 500;
  }

  body {
    font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  a {
    text-decoration: none;
    color: var(--color-text-dark);
    display: inline-block;
    transition: transform 0.2s ease;
  }

  a:hover,
  a:focus-visible {
    transform: scale(1.05);
  }

  button:hover,
  button:focus-visible {
    transform: scale(1.05);
  }

  .wrapper {
    width: min(100% - 48px, calc(1200 / 16 * 1rem));
    margin-inline: auto;
    padding-block: 60px;

    @media (width < calc(800 / 16 * 1rem)) {
      padding-block: 30px;
    }
  }
}

@layer component {
  .topnav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-topnav-bg);

    .topnav__wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-block: 12px;
      font-size: var(--font-size-topnav);
      font-weight: 600;
      line-height: 1;
    }

    .topnav__phone {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }

    .topnav__call-icon {
      width: calc(40 / 16 * 1rem);
      height: auto;
    }

    .topnav__whatsapp-icon {
      width: calc(40 / 16 * 1rem);
      height: auto;
    }

    .topnav__list {
      display: flex;
      gap: 8px;
    }

    .topnav__item {
      display: flex;
      padding: 5px;
    }

    .topnav__language-link {
      font-size: var(--font-size-language);
      font-weight: 300;
      color: var(--color-text-dark);
    }

    .topnav__lang-short {
      display: none;
    }

    @media (width < calc(800 / 16 * 1rem)) {
      .topnav__list {
        gap: 3px;
      }
      .topnav__lang-short {
        display: inline;
      }
      .topnav__lang-full {
        display: none;
      }
      .topnav__call-icon {
        width: calc(20 / 16 * 1rem);
        height: auto;
      }
      .topnav__whatsapp-icon {
        width: calc(20 / 16 * 1rem);
        height: auto;
      }
    }

    @media (width < calc(600 / 16 * 1rem)) {
      .topnav__wrapper {
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        gap: 5px;
      }
      .topnav__lang-short {
        display: none;
      }
      .topnav__lang-full {
        display: inline;
      }
    }

    .topnav__selected-language-item {
      background-color: var(--color-selected-language-bg);
      border: 2px solid var(--color-selected-language-border);
      display: flex;
      padding: 5px;
    }

    .topnav__selected-language-link {
      font-size: var(--font-size-language);
      font-weight: 300;
      color: var(--color-text-light);
    }
  }

  .hero {
    background-image: url(./img/two-waves.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .hero__wrapper {
      display: grid;
      grid-template-columns: 5fr 2fr;
      place-items: center;
      gap: 40px;
    }

    .hero__text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      text-align: center;
    }

    .hero__content {
      width: 50ch;
    }

    .hero__image {
      width: calc(200 / 16 * 1rem);
    }

    @media (width < calc(800 / 16 * 1rem)) {
      .hero__wrapper {
        grid-template-columns: 1fr;
        padding: 0;
      }
      .hero__content {
        width: 100%;
      }
      .hero__text {
        gap: 10px;
      }
    }

    .hero__buttons {
      display: flex;
      gap: 20px;
    }
  }

  .button {
    display: inline-block;
    padding: 13px 20px;
    border-radius: 16px;
    border: 2px solid var(--color-button-border);
    line-height: 1;
    font-size: var(--font-size-button);
    font-weight: 600;
    color: var(--color-button-text);
    text-transform: uppercase;

    &.primary {
      background-color: var(--color-button-primary-bg);
    }

    &.secondary {
      background-color: var(--color-button-secondary-bg);
    }
  }

  .homelink {
    background-image: linear-gradient(
      to right,
      var(--color-homelink-gradient-1) -50%,
      var(--color-homelink-gradient-2) 150%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .features-live {
    background-image: url(./img/two-waves-light.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .features-live__main-content {
      display: grid;
      grid-template-columns: 5fr 5fr;
      place-items: center;
      gap: 40px;
    }

    .features-live__img {
      display: flex;
      flex-direction: row;
      gap: 20px;
    }

    @media (width < calc(1050 / 16 * 1rem)) {
      .features-live__main-content {
        grid-template-columns: 1fr;
        text-align: center;
      }
    }

    .features-live__screenshot {
      width: calc(150 / 16 * 1rem);
      height: auto;
    }

    @media (width < calc(600 / 16 * 1rem)) {
      .features-live__img {
        display: flex;
        flex-direction: column;
      }
      .features-live__screenshot {
        width: calc(300 / 16 * 1rem);
      }
    }
  }

  .features-in-development {
    background-image: url(./img/two-waves-light.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .features-in-development__main-content {
      display: grid;
      grid-template-columns: 5fr 5fr;
      align-items: center;
      gap: 40px;
    }

    .features-in-development__img {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }

    .features-in-development__scheme {
      width: calc(290 / 16 * 1rem);
      height: auto;
    }

    @media (width < calc(800 / 16 * 1rem)) {
      .features-in-development__main-content {
        grid-template-columns: 1fr;
        text-align: center;
      }
    }
  }

  .features-status {
    font-size: var(--font-size-features-status);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;

    &.live {
      color: var(--color-text-feature-status-live);
    }

    &.in-development {
      color: var(--color-text-feature-status-in-development);
    }
  }

  .footer {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background: var(--color-topnav-bg);

    @media (width < calc(1000 / 16 * 1rem)) {
      position: static;
    }

    .footer__wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-block: 12px;
      font-size: var(--font-size-footer);
    }

    .footer__homelink {
      font-size: var(--font-size-footer-homelink);
      font-weight: 700;
    }

    .footer__copyright {
      font-size: var(--font-size-copyright);
    }

    .footer__e-mail {
      display: flex;
      align-items: center;
    }

    .footer__phone {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }

    .footer__mail-icon {
      width: calc(80 / 16 * 1rem);
      height: auto;
    }
    .footer__call-icon {
      width: calc(60 / 16 * 1rem);
      height: auto;
    }
    .footer__whatsapp-icon {
      width: calc(60 / 16 * 1rem);
      height: auto;
    }

    @media (width < calc(800 / 16 * 1rem)) {
      .footer__wrapper {
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        gap: 5px;
      }
      .footer__homelink-copyright {
        text-align: center;
        order: 1;
      }
      .footer__mail-icon {
        width: calc(40 / 16 * 1rem);
        height: auto;
      }
      .footer__call-icon {
        width: calc(30 / 16 * 1rem);
        height: auto;
      }
      .footer__whatsapp-icon {
        width: calc(30 / 16 * 1rem);
        height: auto;
      }
    }
  }

  .waitlist {
    .waitlist__wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
      padding-block-start: 0;
      padding-block-end: 20px;
    }

    .waitlist__inputs {
      display: flex;
      gap: 10px;
      font-size: var(--font-size-waitlist-inputs);
    }

    @media (width < calc(600 / 16 * 1rem)) {
      .waitlist__wrapper {
        gap: 10px;
      }
      .waitlist__inputs {
        flex-direction: column;
      }
    }
  }

  .confirmation {
    .confirmation__wrapper {
      align-items: center;
      text-align: center;
    }
  }

  .business-overview {
    background-image: url(./img/stars-planets.svg);
    background-repeat: repeat;
    background-position: center;
    background-size: contain;

    .business-overview__wrapper {
      display: flex;
      flex-direction: column;
      text-align: left;
      gap: 10px;
    }

    .business-overview__grid {
      display: flex;
      flex-direction: column;
      text-align: left;
      gap: 5px;
    }

    @media (width < calc(800 / 16 * 1rem)) {
      .business-overview__wrapper {
        text-align: center;
      }
      .business-overview__grid {
        text-align: center;
      }
    }
  }

  .products-overview {
    background-image: url(./img/stars-planets-2.svg);
    background-repeat: repeat;
    background-position: center;
    background-size: contain;

    .products-overview__wrapper {
      display: flex;
      flex-direction: column;
      text-align: left;
      gap: 10px;
    }

    .product-status {
      display: flex;
      flex-direction: column;
      text-align: left;
      gap: 5px;
    }

    .product-features {
      display: flex;
      flex-direction: column;
      text-align: left;
      gap: 5px;
    }

    .product-expansion {
      display: flex;
      flex-direction: column;
      text-align: left;
      gap: 5px;
    }

    @media (width < calc(800 / 16 * 1rem)) {
      .products-overview__wrapper {
        text-align: center;
      }
      .product-status {
        text-align: center;
      }
      .product-features {
        text-align: center;
      }
      .product-expansion {
        text-align: center;
      }
    }
  }

  .team {
    .team__wrapper {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }

    .team__content {
      display: flex;
      flex-direction: row;
      gap: 20px;
    }

    .team__member {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      text-align: center;
    }

    .team__member-description {
      max-width: 40ch;
    }

    @media (width < calc(1050 / 16 * 1rem)) {
      .team__content {
        flex-direction: column;
      }
    }
  }

  .audience-list {
    font-size: var(--font-size-p);
    font-weight: 500;
  }

  .product-features-list {
    font-size: var(--font-size-p);
    font-weight: 500;
  }
}

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

    &.skip:focus {
      left: 0;
      width: auto;
      height: auto;
      background: white;
      padding: 10px;
      border: 1px solid;
    }
  }
}