@font-face {
  font-family: 'GNF';
  src: url('../fonts/GNF.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@keyframes onLoad {
  0% {
    top: 50em;
    opacity: 0;
  }
  100% {
    top: 30em;
    opacity: 1;
  }
}

:root {
  --bg-root: #000000;

  --accent: #00CA58;
  --accent-dark: #009742;
  --accent-darker: #00471f;

  --section: #161616;

  --text-main: #f2f7f4;
  --text-muted: #c9ccca;

  --radius-xl: 26px;
  --radius-lg: 20px;

  --shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.85);
}

html, body
{
  background: var(--bg-root);
  margin: 0;
  width: 100vw!important;
  overflow-x: hidden;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scroll-behavior: smooth;
}

html, body, a, button {
  color: var(--text-main);
  text-decoration: none;
}

section > h1 {
  font-family: "GNF";
}

header {
  position: fixed;
  width: inherit;
  background-color: #00000070;
  backdrop-filter: blur(30px);
  z-index: 99;
  transition: transform 0.3s ease;
}

header.hide {
  transform: translateY(-100%);
}

header > .nav {
  padding: 1em 2em;
  font-family: "GNF";
  font-size: 1.5em;
  display: flex;
  justify-content: space-between;
}

.logo-text > span {
  color: var(--accent);
}

.nav-buttons > a {
  margin: 0 1em;
}

.nav-buttons > a:hover {
  color: var(--accent);
}

.banner {
  width: 100%;
  background: var(--section);
  overflow: hidden;
}
.banner-content {
  width: 60%;
  height: 60%;
  display: grid;
  grid-template-columns: 1fr 3fr;
  margin: 0 auto;
  gap: 3em;
}
.banner-phone > img {
  width: 20em;
  position: relative;
  top: 30em;
  left: 3em;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 30px #00ca581c);
  animation: onLoad 1s ease;
}
.banner-text {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  padding: 5vw 5vw 0 5vw;
}

.banner-text > .banner-text-primary {
  font-size: 2rem;
}

.banner-text > .banner-text-primary > span {
  color: var(--accent);
  font-family: "GNF";
}
.banner-text > .banner-text-secondary {
  font-size: 1.5em;
}
.banner-text > .banner-button {
  width: 10em;
  height: 2em;
  background: var(--accent-darker);
  margin: 2em 0;
  border: 2px solid #00CA58;
  font-size: 1.5em;
  padding: 0 2em 0 2em;
  font-family: 'GNF';
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-text > .banner-button:hover {
  background: var(--accent);
  color: var(--accent-darker)
}

.banner-app-markets {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: 1fr;
  gap: 1em;
}

.howto, .faq, .advantages {
  display: flex;
  align-items: center;
  flex-direction: column;
}

/*FAQ SECTION START*/

.faq-item {
  border-bottom: 1px solid #333333;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 1rem;
  font-size: 1em;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.faq-answer {
  max-height: 0;
  overflow-y: scroll;
  transition: max-height 0.3s ease;
}

.faq-answer p {
  padding: 0 1rem 1rem;
  color: #ccc;
}

.faq-item.active .faq-answer {
  max-height: 200px; /* adjust if content is longer */
}

.icon {
  transition: transform 0.25s ease;
}

.faq-item.active .icon {
  transform: rotate(45deg);
}

/*FAQ SECTION END*/

.fade-in-section {
  margin: 3em 0;
  opacity: 0;
  transform: translateX(-100px); /* Start off by positioning the element off-screen */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateX(0);
}

.howto > h1, .faq > h1 {
  margin: 2em;
}

.howtoCard {
  width: 60%;
  background: var(--section);
  padding: 2em;
  border-radius: 30px;
  box-shadow: 0 0 60px var(--section);
  margin: 2em 3em!important;
}

.howto-num, .howto-install > p > span, .howto-addkey-text > p > span, .howto-addkey-text > p > a {
  color: var(--accent);
  font-family: 'GNF';
}

.howto-num {
  font-size: 2em;
}

.howto > .howto-install > p, .howto-addkey-text > p {
  font-size: 1.5em;
  text-align: center;
}
.howto-install-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  margin: 3em 0;
}
.howto-install-badges-android > img {
  width: 11em;
}
.howto-install-badges-apple > img {
  width: 10em;
}

.howto-addkey {
  overflow: hidden;
}

.howto-addkey > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.howto-addkey-phone {
  display: flexbox;
  justify-content: center;
  height: 20em;
}

.howto-addkey-text {
  display: flex;
  align-items: center;
  justify-content: right;
  padding: 2em;
}

.howto-addkey-phone > img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 20em;
}

/*ADVANTAGES*/

.advantages {
  margin-top: 2em;
}
.advantages-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: none;
}
.advantages-list > div {
  max-width: 30vw;
  background: var(--section);
  padding: 2em;
  border-radius: 30px;
  box-shadow: 0 0 60px var(--section);
  margin: 2em;
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

}
.advantage-title {
  font-size: 1.5rem;
  font-family: "GNF";
  margin-bottom: 2em;
  gap: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.advantage-title-fast {
  -webkit-mask: url("/assets/icons/Fast.svg") no-repeat center / contain;
  mask: url("/assets/icons/Fast.svg") no-repeat center / contain;
}
.advantage-title-easy {
  -webkit-mask: url("/assets/icons/Easy.svg") no-repeat center / contain;
  mask: url("/assets/icons/Easy.svg") no-repeat center / contain;
}
.advantage-title-sup {
  -webkit-mask: url("/assets/icons/Support.svg") no-repeat center / contain;
  mask: url("/assets/icons/Support.svg") no-repeat center / contain;
}
.advantage-title-multiple {
  -webkit-mask: url("/assets/icons/Multiple.svg") no-repeat center / contain;
  mask: url("/assets/icons/Multiple.svg") no-repeat center / contain;
}

.advantage-title-fast, .advantage-title-easy, .advantage-title-sup, .advantage-title-multiple {
  background: var(--accent);
  width: 2rem;
  height: 2rem;
  margin: 0 1rem;
}

.advantage-desc {
  color: #aaaaaa;
}

.site-footer {
  margin-top: 3em;
  padding: 2em;
  background: var(--section);
}

.site-footer-brand {
  font-family: "GNF";
}

.site-footer-brand > span {
  color: var(--accent);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-footer-outer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
}
.site-footer-outer > a, .company-info > *, .site-footer-copy {
  color: #aaa;
}

@media (max-width: 1264px) {

  .banner-phone {
    display: none;
  }
  .banner-content {
    grid-template-columns: 1fr;
    padding: 7.5em 0 0 0;
  }
  .banner-text {
    padding: 0;
  }
  .banner-app-markets {
    margin-bottom: 2rem;
  }

  .banner-text {
    align-items: center;
    text-align: center;
  }

  .site-footer-outer {
    flex-direction: column;
    align-items: flex-end;
  }

}
@media (max-width: 960px) {

  .howto-addkey > div {
    grid-template-columns: 1fr;
  }
  .howto-addkey-phone {
    display: none;
  }
  .nav-buttons {
    display: none;
  }

  .howto-addkey-phone > img {
    left: 60%;
  }

  .site-footer-outer {
    flex-direction: row;
    align-items: flex-start;
  }

  .footer-content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  @media (max-width: 960px) {
    .advantages-list {
      grid-template-columns: 1fr;
    }
    .advantages-list > div {
      max-width: none;
    }
    .banner-content {
      width: 90%;
    }
    .howto-install-badges-android > img {
      width: 9em;
    }
    .howto-install-badges-apple > img {
      width: 8em;
    }
    .howto-install-badges {
      flex-direction: column;
      gap: 1em;
    }
    .howto-install-badges > .howto-install-badges-apple > img {
      width: 9em;
    }
    .howto-addkey-text {
      padding: 0;
    }
    .banner-text > .banner-button {
      width: 8em;
    }
  }

}