@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-Black-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-Black-WebXL.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-BlackItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-BlackItalic-WebXL.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-Bold-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-Bold-WebXL.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-BoldItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-BoldItalic-WebXL.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-Book-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-Book-WebXL.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-BookItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-BookItalic-WebXL.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-Light-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-Light-WebXL.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-LightItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-LightItalic-WebXL.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-Medium-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-Medium-WebXL.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-MediumItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-MediumItalic-WebXL.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-Regular-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-Regular-WebXL.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse";
  src: url("/fonts/SuisseIntl-RegularItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntl-RegularItalic-WebXL.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse-mono";
  src: url("/fonts/SuisseIntlMono-Thin-WebXL.woff") format("woff"), url("/fonts/SuisseIntlMono-Thin-WebXL.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse-mono";
  src: url("/fonts/SuisseIntlMono-Regular-WebXL.woff") format("woff"), url("/fonts/SuisseIntlMono-Regular-WebXL.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-Light-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-Light-WebXL.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-LightItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-LightItalic-WebXL.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-Regular-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-Regular-WebXL.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-RegularItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-RegularItalic-WebXL.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-Medium-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-Medium-WebXL.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-MediumItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-MediumItalic-WebXL.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-Bold-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-Bold-WebXL.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-BoldItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-BoldItalic-WebXL.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-Black-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-Black-WebXL.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "suisse-cond";
  src: url("/fonts/SuisseIntlCond-BlackItalic-WebXL.woff") format("woff"), url("/fonts/SuisseIntlCond-BlackItalic-WebXL.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
.panel {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #292929;
  height: calc(100dvh - 100px);
  min-width: 360px;
}
.panel.large .panel-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .panel {
    height: calc(100dvh - 100px);
    min-width: 460px;
  }
  .panel.large {
    width: 60%;
    min-width: 1024px;
  }
  .panel.large .panel-container {
    padding: 64px;
    display: flex;
    flex-direction: column;
    gap: 64px;
  }
}
.panel-container__introduction {
  padding: 16px;
}
.panel-container__introduction p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.panel-container__category {
  position: sticky;
  background-color: #292929;
  border-bottom: 1px solid #131313;
  top: 46px;
  margin-top: 46px;
  z-index: 1;
  padding: 12px 16px;
}
.panel-container__category h3 {
  font-size: 16px;
  font-weight: 500;
}
.panel-container__list {
  list-style: none;
}
.panel-container__list li {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.panel-container__list li h4 {
  font-size: 16px;
  font-weight: 400;
}
.panel-container__list li h4 em {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #B3F76F;
  text-transform: uppercase;
  margin-left: 8px;
}
.panel-container__list li img {
  width: 12px;
  height: 12px;
  opacity: 0.3;
}
.panel-container__list li + li {
  border-top: 1px solid #131313;
}
.panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
}
.panel-header h1,
.panel-header h2 {
  font-size: 16px;
  color: #FFFFFF;
  background-color: #292929;
  border-bottom: 1px solid #131313;
  padding: 12px 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .panel-header h1,
  .panel-header h2 {
    font-size: 16px;
  }
}
.panel-header__filter {
  margin-top: -2px;
  background: #292929;
  padding: 8px 16px;
  border-bottom: 1px solid #131313;
  overflow-x: auto;
  white-space: nowrap;
}
.panel-header__filter button {
  all: unset;
  font-size: 12px;
  background: #393939;
  border-radius: 32px;
  width: 32px;
  height: 32px;
  text-align: center;
  cursor: pointer;
  color: #999999;
  transition: color 0.3s ease, background 0.3s ease;
}
.panel-header__filter button:hover {
  color: #FFFFFF;
  background-color: #131313;
}
.panel-stats {
  display: block;
  width: 100%;
  height: 200px;
  background: #292929;
  border-bottom: 1px solid #131313;
  white-space: nowrap;
}
.panel-stats .stats__slider {
  display: flex;
  padding: 8px 16px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  cursor: grab;
}
.panel-stats .stats__slider .statistic {
  scroll-snap-align: center;
  padding: 8px 16px 4px 8px;
  height: 100px;
  min-width: 240px;
  color: #FFFFFF;
  background-color: #191919;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 8px;
  transition: background 0.3s ease, color 0.3s ease;
}
.panel-stats .stats__slider .statistic h3 {
  font-weight: 500;
  font-size: 12px;
}
.panel-stats .stats__slider .statistic p {
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
}
.panel-stats .stats__slider .statistic:nth-of-type(odd) {
  background-color: #161616;
}
.panel-information {
  padding: 16px;
  color: #131313;
}
.panel-information h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: -webkit-linear-gradient(#B3F76F, #999999);
  background: linear-gradient(217deg, #B3F76F, #999999 100%), linear-gradient(127deg, #B3F76F, #999999 100%), linear-gradient(336deg, #B3F76F, #999999 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panel-information .products-information__footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: 32px;
}
.panel-information .products-information__footer p {
  color: #999999;
  font-size: 12px;
  font-weight: 500;
}
.panel-information .products-information__footer p strong {
  font-weight: 500;
}
@media (min-width: 768px) {
  .panel-information h2 {
    font-size: 40px;
  }
  .panel-information p {
    width: 50%;
  }
}
.panel-container + .panel-container, .panel-container + .panel-information {
  border-top: 1px solid #111111;
}

.socials {
  border-radius: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100dvh - 120px);
  min-width: 360px;
  background-color: #111111;
  padding: 16px;
  transition: opacity 1s ease;
  overflow: hidden;
}
.socials[data-state=off] {
  opacity: 0.2;
}
.socials-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.socials-container video, .socials-container img {
  border-radius: 4px;
  width: 75%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.socials p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.socials a {
  all: unset;
  font-size: 16px;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #B3F76F;
}
.socials a:hover {
  text-decoration-color: #FFFFFF;
}

button, .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  outline: none;
}
button span, .button span {
  white-space: nowrap;
}
button img, .button img {
  width: 12px;
}
button[data-type=primary], .button[data-type=primary] {
  padding: 8px 12px;
  background-color: #B3F76F;
  color: #131313;
  height: 34px;
}
button[data-type=primary] span, .button[data-type=primary] span {
  display: none;
}
@media (min-width: 768px) {
  button[data-type=primary] span, .button[data-type=primary] span {
    display: block;
  }
}
button[data-type=primary]:hover, button[data-type=primary]:focus, .button[data-type=primary]:hover, .button[data-type=primary]:focus {
  background-color: #FFFFFF;
}
button[data-type=secondary], .button[data-type=secondary] {
  padding: 8px 12px;
  background-color: #666666;
  color: #131313;
  height: 34px;
}
button[data-type=secondary] span, .button[data-type=secondary] span {
  display: none;
}
@media (min-width: 768px) {
  button[data-type=secondary] span, .button[data-type=secondary] span {
    display: block;
  }
}
button[data-type=secondary]:hover, button[data-type=secondary]:focus, .button[data-type=secondary]:hover, .button[data-type=secondary]:focus {
  background-color: #B3F76F;
}
button[data-type=icon-only], .button[data-type=icon-only] {
  padding: 8px 12px;
  background-color: #666666;
  color: #131313;
}
button[data-type=icon-only]:hover, button[data-type=icon-only]:focus, .button[data-type=icon-only]:hover, .button[data-type=icon-only]:focus {
  background-color: #B3F76F;
}
button[data-type=icon-only-youth-ai], .button[data-type=icon-only-youth-ai] {
  padding: 1px 4px;
  background: none;
  color: #131313;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
button[data-type=icon-only-youth-ai]:hover, button[data-type=icon-only-youth-ai]:focus, .button[data-type=icon-only-youth-ai]:hover, .button[data-type=icon-only-youth-ai]:focus {
  opacity: 1;
}
button[data-type=inlog], .button[data-type=inlog] {
  padding: 8px 12px;
  background-color: #B3F76F;
  color: #131313;
  height: 34px;
}
button[data-type=inlog]:hover, button[data-type=inlog]:focus, .button[data-type=inlog]:hover, .button[data-type=inlog]:focus {
  background-color: #FFFFFF;
}
button[data-type=back], .button[data-type=back] {
  padding: 8px 12px;
  background-color: #111111;
  color: #FFFFFF;
  height: 34px;
}
button[data-type=back] img, .button[data-type=back] img {
  transform: rotate(180deg);
}
button[data-type=back]:hover, button[data-type=back]:focus, .button[data-type=back]:hover, .button[data-type=back]:focus {
  background-color: #161616;
}
button[data-type=profile], .button[data-type=profile] {
  height: 34px;
  width: 34px;
  cursor: pointer;
  background-color: #666666;
  color: #131313;
}
button[data-type=profile] img, .button[data-type=profile] img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 4px;
}
button[data-type=youth-ai], .button[data-type=youth-ai] {
  font-size: 12px;
  height: 20px;
  padding: 1px 4px;
  background-color: #B3F76F;
  color: #131313;
}
button[data-type=youth-ai] span, .button[data-type=youth-ai] span {
  display: block;
}
button[data-type=tag], .button[data-type=tag] {
  font-size: 12px;
  height: 20px;
  padding: 1px 4px;
  cursor: default;
  background-color: #666666;
  color: #131313;
}
button[data-type=tag] span, .button[data-type=tag] span {
  display: block;
}

header {
  z-index: 100;
  height: 50px;
  padding: 0 8px;
  position: fixed;
  display: flex;
  justify-content: left;
  align-items: center;
  top: 0;
  width: 100%;
  transition: transform 0.3s ease;
}
header[data-state=off] {
  transform: translateY(-100%);
}
header[data-background=on] {
  background-color: rgba(19, 19, 19, 0.1);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
header h1 {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  font-size: 16px;
  mix-blend-mode: difference;
  -webkit-mix-blend-mode: difference;
}
header .cta {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translate(0%, -50%);
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}
header .cta button {
  position: relative;
}
header .back {
  position: absolute;
  z-index: 100;
  left: 8px;
  top: 50%;
  transform: translate(0%, -50%);
}
header .back + h1 {
  text-align: center;
  width: 100%;
}
@media (min-width: 768px) {
  header {
    justify-content: center;
  }
  header h1 {
    text-align: center;
  }
}

nav {
  position: fixed;
  z-index: 100;
  top: 50px;
  right: 8px;
  width: auto;
  min-width: 200px;
  height: auto;
  display: flex;
  flex-direction: row;
  gap: 16px;
  background-color: rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  border-radius: 4px;
  padding: 12px 16px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
nav[data-state=off] {
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
}
nav ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
}
nav ul h3 {
  font-size: 16px;
  font-weight: 500;
}
nav ul li a, nav ul li button {
  all: unset;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-decoration: none;
  color: #FFFFFF;
  transition: opacity 0.3s ease;
}
nav ul li a:hover, nav ul li button:hover {
  opacity: 0.5;
}
nav ul li a:hover img, nav ul li button:hover img {
  opacity: 0.8;
}
nav ul li a img, nav ul li button img {
  width: 12px;
  height: 12px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
nav ul hr {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  margin: 4px 0;
}

#contact {
  opacity: 1;
  overflow-y: auto;
  padding: 16px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100dvh;
  width: 100%;
  display: flex;
  gap: 40px;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity 0.3s ease;
}
#contact .contact-header {
  width: 100%;
}
#contact .contact-header h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  font-weight: 500;
}
#contact .contact-header h3 strong {
  font-weight: 500;
}
#contact .contact-footer {
  width: 100%;
}
#contact .contact-footer p {
  font-size: 16px;
  font-weight: 500;
}
#contact .contact-footer p a {
  color: #B3F76F;
}
@media (min-width: 768px) {
  #contact {
    margin-bottom: 0px;
  }
  #contact .contact-header, #contact .contact-footer {
    max-width: 700px;
    margin: 0 auto;
  }
}
#contact .contact-close {
  position: fixed;
  text-align: center;
  right: 12px;
  top: 12px;
  height: 34px;
  width: 34px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
#contact[data-state=off] {
  opacity: 0;
  pointer-events: none;
}
#contact[data-state=off] .contact-close {
  transform: translateY(100%);
}

form {
  width: 100%;
}
form[data-type=standAlone] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
form[data-type=standAlone] div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #292929;
  border-radius: 4px;
}
form[data-type=standAlone] label {
  font-size: 10px;
  padding: 8px 16px;
  color: #999999;
  opacity: 0.5;
  text-transform: uppercase;
}
form[data-type=standAlone] input[type=text], form[data-type=standAlone] input[type=email], form[data-type=standAlone] input[type=tel], form[data-type=standAlone] input[type=bedrijf], form[data-type=standAlone] input[type=password], form[data-type=standAlone] textarea, form[data-type=standAlone] select {
  width: stretch;
  padding: 0px 16px 16px;
  background: none;
  border: none;
  border-radius: 0px;
  appearance: none;
  font-size: 16px;
  color: #FFFFFF;
  outline: none;
}
form[data-type=standAlone] button {
  width: fit-content;
  margin-left: auto;
}
form[data-type=embed] {
  background: none;
  height: 50px;
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 8px;
}
form[data-type=embed] input[type=text], form[data-type=embed] input[type=email], form[data-type=embed] input[type=tel], form[data-type=embed] input[type=bedrijf], form[data-type=embed] input[type=password], form[data-type=embed] textarea, form[data-type=embed] select {
  width: 100%;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  outline: none;
  background: none;
  appearance: none;
  border: none;
}
form[data-type=embed] button {
  background: none;
}

body[data-setup=b2c] #marketing-intro h1, body[data-setup=b2c] #marketing-intro h2 {
  font-size: 50px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  line-height: 1;
}

body[data-setup=b2b] #marketing-intro h1, body[data-setup=b2b] #marketing-intro h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  line-height: 1.2;
}

main#marketing {
  transition: filter 0.3s ease, opacity 0.3s ease;
}
main#marketing[data-state=off] {
  filter: blur(50px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
main#marketing #marketing-intro {
  position: fixed;
  width: 100%;
  height: 100dvh;
  text-align: center;
}
main#marketing #marketing-intro h1, main#marketing #marketing-intro h2 {
  width: 90%;
  max-width: 680px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
main#marketing #marketing-intro #launching-partners {
  position: fixed;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  bottom: 16px;
}
main#marketing #marketing-intro #launching-partners h3 {
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #666666;
}
main#marketing #marketing-intro #launching-partners .partners {
  display: flex;
  gap: 16px;
  margin: 0 auto;
}
main#marketing #marketing-intro #launching-partners figure {
  width: 70px;
}
@media screen and (min-width: 768px) {
  main#marketing #marketing-intro #launching-partners figure {
    width: 100px;
  }
}
main#marketing #marketing-intro #launching-partners figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#marketing-footer {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 8px;
  bottom: 0;
  width: 100%;
  padding: 0 0 16px 0;
  transition: transform 0.3s ease-out;
  background-color: rgba(17, 17, 17, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media screen and (min-width: 768px) {
  #marketing-footer {
    gap: 64px;
  }
}
#marketing-footer[data-state=off] {
  transform: translateY(100%);
}
#marketing-footer[data-state=off] #usp-overview article, #marketing-footer[data-state=off] #usp-overview button {
  transform: translateY(100%);
  opacity: 0;
}
#marketing-footer #usp-overview {
  width: 100dvw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}
@media screen and (min-width: 1400px) {
  #marketing-footer #usp-overview {
    width: 1400px;
  }
}
#marketing-footer #usp-overview a, #marketing-footer #usp-overview article, #marketing-footer #usp-overview button {
  all: unset;
  scroll-snap-align: start;
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  flex-flow: row-reverse;
  transition: transform 0.3s 0.3s ease-out, opacity 0.3s 0.3s ease-out;
  transform: translateY(0%);
  opacity: 1;
  width: 300px;
  padding: 16px;
}
#marketing-footer #usp-overview a .usp-header, #marketing-footer #usp-overview article .usp-header, #marketing-footer #usp-overview button .usp-header {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 4px;
}
#marketing-footer #usp-overview a .usp-header h3, #marketing-footer #usp-overview article .usp-header h3, #marketing-footer #usp-overview button .usp-header h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
#marketing-footer #usp-overview a .usp-header p, #marketing-footer #usp-overview article .usp-header p, #marketing-footer #usp-overview button .usp-header p {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #666666;
}
#marketing-footer #usp-overview a figure, #marketing-footer #usp-overview article figure, #marketing-footer #usp-overview button figure {
  position: relative;
  width: 80px;
  height: 80px;
  aspect-ratio: 1/1;
}
#marketing-footer #usp-overview a figure img, #marketing-footer #usp-overview article figure img, #marketing-footer #usp-overview button figure img {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
#marketing-footer #usp-overview article:nth-of-type(1) {
  transition: transform 0.3s 0.15s ease-out, opacity 0.3s 0.15s ease-out;
}
#marketing-footer #usp-overview article:nth-of-type(2) {
  transition: transform 0.3s 0.3s ease-out, opacity 0.3s 0.3s ease-out;
}
#marketing-footer #usp-overview article:nth-of-type(3) {
  transition: transform 0.3s 0.45s ease-out, opacity 0.3s 0.45s ease-out;
}
#marketing-footer #usp-overview a {
  cursor: pointer;
  transition: transform 0.3s 0.6s ease-out, opacity 0.3s 0.6s ease-out;
}
#marketing-footer #usp-overview a .usp-header h3 {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #B3F76F;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.3s ease;
}
#marketing-footer #usp-overview a:hover .usp-header h3 {
  text-decoration-color: #FFFFFF;
}
#marketing-footer #usp-overview button {
  cursor: pointer;
  transition: transform 0.3s 0.6s ease-out, opacity 0.3s 0.6s ease-out;
}
#marketing-footer #usp-overview button .usp-header h3 {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #B3F76F;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.3s ease;
}
#marketing-footer #usp-overview button:hover .usp-header h3 {
  text-decoration-color: #FFFFFF;
}
#marketing-footer #usp-overview[data-setup=steps] a p, #marketing-footer #usp-overview[data-setup=steps] article p, #marketing-footer #usp-overview[data-setup=steps] button p {
  color: #B3F76F;
}
#marketing-footer #footer-content {
  padding: 0 16px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#marketing-footer p {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #666666;
}
#marketing-footer p.off-mobile {
  display: none;
}
@media screen and (min-width: 768px) {
  #marketing-footer p.off-mobile {
    display: block;
  }
}
#marketing-footer p a {
  color: #666666;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}
#marketing-footer p a:hover {
  color: #FFFFFF;
}
#marketing-footer p:nth-of-type(2) {
  text-align: center;
}
#marketing-footer p:nth-of-type(3) {
  text-align: right;
}

#marketing-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100dvh;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
#marketing-canvas[data-state=off] {
  filter: blur(50px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

main#login {
  padding: 16px;
  height: auto;
  background-color: #111111;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  width: 100%;
  max-width: 400px;
}
main#login form {
  margin-bottom: 32px;
}
main#login a {
  color: #666666;
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  transition: color 0.3s ease;
  outline: none;
}
main#login a:hover, main#login a:focus {
  color: #FFFFFF;
}

main[data-state=off] {
  filter: blur(50px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
main[data-type=dashboard] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100vw;
  height: calc(100dvh - 100px);
  padding: 0 16px;
  transition: filter 0.3s ease, opacity 0.3s ease;
  -ms-overflow-style: none;
  scrollbar-width: none;
  pointer-events: none;
}
main[data-type=dashboard][data-active=on] {
  pointer-events: auto;
  scroll-snap-type: x mandatory;
}
main[data-type=dashboard][data-active=on] section {
  scroll-snap-align: center;
}
@media (min-width: 768px) {
  main[data-type=dashboard] {
    padding: 0 64px;
    gap: 16px;
  }
}

main#faq {
  padding: 50px 16px 96px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 100px;
}
@media (min-width: 768px) {
  main#faq {
    max-width: 700px;
  }
}
main#faq .faq-header h2 {
  font-size: 24px;
  font-weight: 500;
}
@media (min-width: 768px) {
  main#faq .faq-header h2 {
    font-size: 32px;
    text-align: center;
  }
}
main#faq .faq-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main#faq .faq-container figure {
  width: 100%;
  top: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
main#faq .faq-container figure img, main#faq .faq-container figure video {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 8px;
  background-color: black;
}
main#faq .faq-container__content header {
  all: unset;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #393939;
  gap: 8px;
}
main#faq .faq-container__content header h2 {
  font-size: 24px;
  font-weight: 500;
}
@media (min-width: 768px) {
  main#faq .faq-container__content header h2 {
    font-size: 32px;
  }
}
main#faq .faq-container__content header p {
  font-size: 16px;
  font-weight: 400;
}
@media (min-width: 768px) {
  main#faq .faq-container__content header p {
    font-size: 16px;
    line-height: 1.5;
  }
}
main#faq .faq-container__content header p a {
  color: #B3F76F;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}
main#faq .faq-container__content header p a:hover {
  text-decoration-color: rgba(179, 247, 111, 0.5);
}
main#faq .faq-container__content .faq-item {
  position: relative;
  cursor: pointer;
  padding: 16px 0;
  border-bottom: 1px solid #393939;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) {
  main#faq .faq-container__content .faq-item:hover {
    opacity: 1;
  }
}
main#faq .faq-container__content .faq-item h3 {
  font-size: 16px;
  font-weight: 400;
}
main#faq .faq-container__content .faq-item p {
  display: none;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  padding: 16px 32px 16px 0;
  font-style: italic;
}
main#faq .faq-container__content .faq-item img {
  margin: 20px 0;
  width: 12px;
  height: 12px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.3s ease;
  transform: rotate(45deg);
  opacity: 0.5;
}
main#faq .faq-container__content .faq-item[data-open=true] {
  opacity: 1;
}
main#faq .faq-container__content .faq-item[data-open=true] p {
  display: block;
}
main#faq .faq-container__content .faq-item[data-open=true] img {
  transform: rotate(0deg);
}

footer#faq .faq-information {
  padding: 16px;
  color: #131313;
}
footer#faq .faq-information h2 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: -webkit-linear-gradient(#B3F76F, #999999);
  background: linear-gradient(217deg, #B3F76F, #999999 100%), linear-gradient(127deg, #B3F76F, #999999 100%), linear-gradient(336deg, #B3F76F, #999999 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
footer#faq .faq-information h2 a {
  text-transform: lowercase;
  color: #B3F76F;
  text-decoration: underline;
  text-underline-offset: 2px;
}
footer#faq .faq-information .faq-information__footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: 32px;
}
footer#faq .faq-information .faq-information__footer p {
  color: #999999;
  font-size: 12px;
  font-weight: 500;
}
footer#faq .faq-information .faq-information__footer p strong {
  font-weight: 500;
}
@media (min-width: 768px) {
  footer#faq .faq-information h2 {
    font-size: 6vw;
    line-height: 0.95;
  }
  footer#faq .faq-information h2 a {
    text-underline-offset: 9px;
  }
  footer#faq .faq-information p {
    width: 50%;
  }
}

#youth-ai {
  transition: transform 0.3s ease;
}
#youth-ai[data-state=off] {
  transform: translateY(100%);
}
@media (min-width: 768px) {
  #youth-ai form {
    padding: 0 16px 0 64px;
  }
}

#youth-ai-suggestions {
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.5) 25%, #111111 100%);
  position: fixed;
  padding-top: 64px;
  bottom: 60px;
  left: 16px;
  width: 100%;
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (min-width: 768px) {
  #youth-ai-suggestions {
    left: 64px;
  }
}
#youth-ai-suggestions[data-state=off] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(60px);
}
#youth-ai-suggestions h3 {
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 8px;
}
#youth-ai-suggestions ul {
  list-style: none;
}
#youth-ai-suggestions ul li button {
  color: #131313;
  padding: 8px 12px;
  background-color: #666666;
}
#youth-ai-suggestions ul li button:hover {
  background-color: #FFFFFF;
}
#youth-ai-suggestions ul li + li {
  margin-top: 4px;
}

#youth-ai-results {
  position: fixed;
  height: calc(100dvh - 60px);
  width: 100%;
  z-index: 100;
  top: 0;
  left: 0;
  color: #FFFFFF;
  padding: 32px 16px 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: opacity 0.3s ease;
  overflow-y: auto;
}
#youth-ai-results[data-state=off] {
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  #youth-ai-results {
    padding: 32px 16px 0 64px;
  }
}
#youth-ai-results .youth-ai__results-close {
  position: fixed;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
#youth-ai-results[data-state=off] .youth-ai__results-close {
  transform: translateY(100%);
}
#youth-ai-results .youth-ai-card__details {
  max-width: 600px;
  border-radius: 5px;
  background-color: #131313;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
#youth-ai-results .youth-ai-card__details * {
  font-size: 12px;
}
#youth-ai-results .youth-ai-card__details h3 {
  color: #999999;
  margin-bottom: 8px;
  font-weight: 400;
}
#youth-ai-results .youth-ai-card__details p {
  color: #FFFFFF;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
#youth-ai-results .youth-ai-card__details p span {
  color: #B3F76F;
  margin-right: 8px;
}
#youth-ai-results .youth-ai-card__details button {
  all: unset;
  cursor: pointer;
  text-align: right;
  opacity: 0.2;
  transition: opacity 0.3s ease;
}
#youth-ai-results .youth-ai-card__details button:hover {
  opacity: 1;
}
#youth-ai-results .youth-ai-card__details button::before {
  content: "Copy";
  font-family: "suisse-mono", monospace;
  text-transform: uppercase;
  margin-right: 4px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: -0.02em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#youth-ai-results .youth-ai-card__details button[data-state=copied]::before {
  content: "Copied";
}
#youth-ai-results .youth-ai-card__details button:hover::before {
  opacity: 1;
}
#youth-ai-results .youth-ai-card__details + .youth-ai-card__details {
  margin-top: 8px;
}

.research-card {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #393939;
  transition: background-color 0.3s ease;
}
.research-card .research-card__download {
  position: absolute;
  top: 8px;
  right: 8px;
}
.research-card__header-image {
  cursor: pointer;
  padding: 16px;
  margin-bottom: -24px;
}
.research-card__header-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.research-card__header-image ~ .research-card__download {
  top: 20px;
  right: 20px;
}
.research-card__header {
  cursor: pointer;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.research-card__header h3 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.research-card__header h3 span {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #999999;
}
.research-card__header p {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #999999;
}
.research-card__summery {
  cursor: pointer;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.research-card__summery p {
  font-size: 32px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .research-card__summery p {
    font-size: 40px;
  }
}
.research-card__summery img {
  width: 100%;
  height: auto;
}
.research-card__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.research-card__details__detail {
  margin: 0 16px;
  border-radius: 4px;
  background-color: #111111;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.research-card__details__detail-part {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.research-card__details__detail-part h4 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #999999;
}
.research-card__details__detail-part .description, .research-card__details__detail-part .amount {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.research-card__details__detail-part .description a, .research-card__details__detail-part .amount a {
  color: #FFFFFF;
}
.research-card__details__detail-part .description em, .research-card__details__detail-part .amount em {
  font-style: normal;
  color: #B3F76F;
}
.research-card__details__detail-part .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.research-card__details__detail-part button.copy {
  all: unset;
  cursor: pointer;
  text-align: right;
  opacity: 0.2;
  transition: opacity 0.3s ease;
}
.research-card__details__detail-part button.copy:hover {
  opacity: 1;
}
.research-card__details__detail-part button.copy::before {
  content: "Copy";
  font-family: "suisse-mono", monospace;
  text-transform: uppercase;
  margin-right: 4px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: -0.02em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.research-card__details__detail-part button.copy[data-state=copied]::before {
  content: "Copied";
}
.research-card__details__detail-part button.copy:hover::before {
  opacity: 1;
}
.research-card__details__detail .container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  justify-content: space-between;
}
.research-card__details__detail .container.sides {
  display: flex;
  flex-direction: row;
}
.research-card__details__detail .container.sides .research-card__details__detail-part:nth-of-type(2) {
  text-align: right;
}
.research-card__details__detail-thinking {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.research-card__details__detail-thinking h4 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #999999;
}
.research-card__details__detail[data-state=thinking] .research-card__details__detail-part {
  display: none;
}
.research-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.research-card__footer p {
  font-family: "suisse-mono", monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #131313;
}
.research-card__footer a {
  all: unset;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #131313;
}
.research-card__footer button {
  all: unset;
  font-family: "suisse-mono", monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #131313;
  cursor: pointer;
}
.research-card[data-state=closed] {
  background-color: #292929;
}
.research-card[data-state=closed] form, .research-card[data-state=closed] .research-card__details {
  display: none;
}
.research-card[data-state=closed][data-type=client] .research-card__footer, .research-card[data-state=closed][data-type=respondent] .research-card__footer {
  display: none;
}
.research-card:hover {
  background-color: #393939;
}

.research-card + .research-card {
  border-top: 1px solid #131313;
}

.product-card {
  background-color: #161616;
  border-radius: 5px;
}
@media (min-width: 1024px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.product-card__cover figure {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  border-radius: 5px 5px 0px 0px;
}
@media (min-width: 768px) {
  .product-card__cover figure {
    border-radius: 5px 0px 0px 5px;
  }
}
.product-card__cover figure img,
.product-card__cover figure video {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: 5%;
}
.product-card__info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.product-card__info h3 {
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.product-card__info p {
  font-size: 14px;
  line-height: 1.5;
}
.product-card__info p:nth-of-type(2) {
  font-size: 24px;
  color: #B3F76F;
}
.product-card__info .product-card__footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.product-card__info .product-card__footer p {
  font-size: 12px;
  color: #666666;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "suisse", sans-serif, arial;
  text-rendering: optimizeLegibility;
  text-decoration: none;
  font-feature-settings: "ss01" on;
  -webkit-text-size-adjust: 100%;
  appearance: none;
  -webkit-appearance: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
*::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #111111;
  color: #FFFFFF;
  font-size: 16px;
}
body[data-scroll=off] {
  overflow: hidden;
}