/* GBG brand font */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

html,
html body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif
}

.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  font-weight: normal !important;
  color: #007aff !important;
  text-decoration-color: #007aff !important;
  border-color: #007aff;
}
.prose
  :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  text-decoration-color: #007aff !important;
}
/* .prose :where(a:hover):not(:where([class~=not-prose],[class~=not-prose] *)) {
  border-bottom: 2px solid #007AFF;
} */


/* Prevent navbar transition */
#navbar-transition-willow,
#navbar-transition {
  background-color: #FFF;
}

.dark #navbar-transition-willow,
.dark #navbar-transition {
  background-color: rgb(var(--background-dark)/.75);
}

/* Add some floating elements to the dark mode backgrounds to make them more interesting */
[data-theme="dark"] .docs-container::before {
  content: "";
  position: fixed;
  /* top: 15%; */
  /* right: 10%; */
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(77, 77, 255, 0.1) 0%,
    transparent 70%
  );
  z-index: -1;
  animation: float 15s ease-in-out infinite alternate;
}

[data-theme="dark"] .docs-container::after {
  content: "";
  position: fixed;
  /* bottom: 15%; */
  /* left: 10%; */
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(110, 108, 255, 0.08) 0%,
    transparent 70%
  );
  z-index: -1;
  animation: float 20s ease-in-out infinite alternate-reverse;
}

@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(40px, 20px);
  }
} /* Home page styles for GBG GO Documentation */

:root {
  --gbg-primary: #4d4dff;
  --gbg-primary-light: #6e6cff;
  --gbg-dark-blue: #0f1023;
  --gbg-card-bg: #fff;
  --gbg-text: #333;
  --gbg-secondary-text: #666;
  --gbg-border: #eaeaea;

  /* Colors for dark mode */
  --gbg-card-bg-dark: #0F0F1A;
  --gbg-dark-bg: #0F0F1A;
  --gbg-dark-bg-gradient-start: #0F0F1A;
  --gbg-dark-bg-gradient-end: #171839;
  --gbg-text-dark: #f1f1f3;
  --gbg-secondary-text-dark: #b6b7c5;
  --gbg-border-dark: rgba(110, 108, 255, 0.2);
}

/* Dark mode adjustments */
[data-theme="dark"] {
  --gbg-card-bg: var(--gbg-card-bg-dark);
  --gbg-text: var(--gbg-text-dark);
  --gbg-secondary-text: var(--gbg-secondary-text-dark);
  --gbg-border: var(--gbg-border-dark);
}

/* Additional background color for dark mode body/container */
[data-theme="dark"] .docs-container {
  background-color: var(#0F0F1A);
}

/* Base styles */
.docs-container {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: var(--gbg-text);
  max-width: 100%;
  margin: 25px;
  padding: 0;
}

/* For dark mode, ensure the container has a dark background */
[data-theme="dark"] .docs-container {
  background: linear-gradient(
    135deg,
    var(--gbg-dark-bg-gradient-start) 0%,
    var(--gbg-dark-bg-gradient-end) 100%
  );
  color: var(--gbg-text-dark);
}

/* Hero section */
.hero-section {
  background: linear-gradient(135deg, #4d4dff 0%, #2828bd 100%);
  color: white;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: -24px -24px 32px -24px; /* Adjust based on your layout */
}

/* Add subtle background patterns/elements to hero section */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  z-index: 1;
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.6;
}

/* Grid lines for background */
.grid-lines-horizontal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 1px,
    transparent 1px
  );
  background-size: 100% 80px;
}

.grid-lines-vertical {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.15) 1px,
    transparent 1px
  );
  background-size: 80px 100%;
}

/* Decorative background elements */
.bg-decoration {
  position: absolute;
  opacity: 0.1;
}

.circle-1 {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px solid white;
  top: -150px;
  right: 10%;
}

.circle-2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid white;
  bottom: -100px;
  left: 5%;
}

.circle-3 {
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  top: 30%;
  right: 30%;
  filter: blur(30px);
}

.dot-grid {
  width: 200px;
  height: 100px;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.4) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
  top: 50%;
  left: 15%;
}

.hero-container {
  display: flex;
  padding: 64px 32px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  min-height: 250px;
}

.hero-content {
  flex: 1;
  max-width: 60%;
}

.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: white;
}

.hero-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.inline-link {
  color: white;
  text-decoration: underline;
  font-weight: 500;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background-color: white;
  color: var(--gbg-primary);
  border: none;
}

.btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.hero-graphic {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 40%;
}

.accent-shape {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

/* Cards section */
.cards-container {
  max-width: 1200px;
  margin: 64px auto 64px auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

[data-theme="dark"] .card-content {
  background: linear-gradient(
    to bottom,
    rgba(15, 16, 35, 0.7),
    rgba(23, 24, 57, 0.7)
  );
  border-top: 1px solid rgba(77, 77, 255, 0.1);
  border-bottom: 1px solid rgba(77, 77, 255, 0.1);
  position: relative;
  color: white;
}

.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.card {
  background-color: #1a1a1a; /* Dark background */
  border: 1px solid var(--gbg-border);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #ffffff; /* White text */
  cursor: pointer;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--gbg-primary-light);
}

/* Enhanced dark mode card styling */
[data-theme="dark"] .card {
  background: linear-gradient(
    145deg,
    rgba(23, 24, 57, 0.9) 0%,
    rgba(15, 16, 35, 0.9) 100%
  );
  border-color: rgba(77, 77, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(77, 77, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

[data-theme="dark"] .card:hover {
  border-color: var(--gbg-primary);
  box-shadow: 0 8px 32px rgba(77, 77, 255, 0.15),
    0 0 0 1px rgba(77, 77, 255, 0.4);
  background: linear-gradient(
    145deg,
    rgba(30, 31, 72, 0.9) 0%,
    rgba(23, 24, 57, 0.9) 100%
  );
  transform: translateY(-3px);
}

.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.card {
  background-color: var(--gbg-card-bg);
  border: 1px solid var(--gbg-border);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  transition: all 0.3s ease;
  text-decoration: none;
  color: var(--gbg-text);
  cursor: pointer;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--gbg-primary-light);
}

.card-content {
  flex: 1;
}

.card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--gbg-text);
}

.card p {
  font-size: 1rem;
  color: var(--gbg-secondary-text);
  margin: 0;
  line-height: 1.5;
}

.arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  transition: transform 0.2s ease;
}

.card:hover .arrow-icon {
  transform: translateX(4px);
}

/* Make arrow more visible in dark mode */
[data-theme="dark"] .arrow-icon svg path {
  stroke: var(--gbg-primary-light);
  stroke-width: 2.5;
}

/* Roles section */
.roles-container {
  background-color: #f8f9fa;
  padding: 64px 32px;
  margin: 0 -24px;
  position: relative;
  overflow: hidden;
}

/* Dark mode adjustment for roles container */
[data-theme="dark"] .roles-container {
  background: linear-gradient(
    to bottom,
    rgba(15, 16, 35, 0.7),
    rgba(23, 24, 57, 0.7)
  );
  border-top: 1px solid rgba(77, 77, 255, 0.1);
  border-bottom: 1px solid rgba(77, 77, 255, 0.1);
  position: relative;
}

[data-theme="dark"] .roles-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.344 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414 1.413 1.414-1.414 1.414-1.414-1.414zm-4.243 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm-4.242 4.243l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm-4.243 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm16.97-16.97l1.414-1.415 1.414 1.414-1.414 1.414-1.414-1.414zm-4.242 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm-4.243 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm-4.242 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm-4.243 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm16.97-16.97l1.415-1.414 1.414 1.414-1.414 1.414-1.414-1.414zM20.97 16.385l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm-4.242 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm-4.243 4.243l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm16.97-16.97l1.414-1.415 1.414 1.414-1.414 1.414-1.414-1.414zm-4.242 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zM16.727 20.97l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm-4.243 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414zm-4.242 4.242l1.414-1.414 1.414 1.414-1.414 1.414-1.414-1.414z' fill='%235551F7' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.3;
  z-index: -1;
}

.roles-container h2 {
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 40px;
  color: var(--gbg-text);
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.role-card {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  text-decoration: none;
  color: var(--gbg-text);
  transition: all 0.3s ease;
  border: 1px solid var(--gbg-border);
}

/* Dark mode role cards */
[data-theme="dark"] .role-card {
  background: linear-gradient(
    145deg,
    rgba(23, 24, 57, 0.9) 0%,
    rgba(15, 16, 35, 0.9) 100%
  );
  border-color: rgba(77, 77, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(77, 77, 255, 0.1);
}

[data-theme="dark"] .role-card:hover {
  border-color: var(--gbg-primary);
  box-shadow: 0 8px 32px rgba(77, 77, 255, 0.15),
    0 0 0 1px rgba(77, 77, 255, 0.4);
  background: linear-gradient(
    145deg,
    rgba(30, 31, 72, 0.9) 0%,
    rgba(23, 24, 57, 0.9) 100%
  );
}

.role-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--gbg-primary-light);
}

.role-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin-bottom: 16px;
  background-color: rgba(77, 77, 255, 0.1);
  position: relative;
}

.business-icon::before,
.developer-icon::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: 12px;
  left: 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.business-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D4DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18.4 9l-1.2 1.3L13 7.2l-3.2 3.2-3.5-3.6'/%3E%3C/svg%3E");
}

.developer-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D4DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

.role-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.role-card p {
  color: var(--gbg-secondary-text);
  margin: 0;
  line-height: 1.5;
}

/* Resources section */
.resources-container {
  padding: 64px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.resources-container h2 {
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 40px;
  color: var(--gbg-text);
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.resource-card {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  text-decoration: none;
  color: var(--gbg-text);
  transition: all 0.3s ease;
  border: 1px solid var(--gbg-border);
}

/* Dark mode resource cards */
[data-theme="dark"] .resource-card {
  background: linear-gradient(
    145deg,
    rgba(23, 24, 57, 0.9) 0%,
    rgba(15, 16, 35, 0.9) 100%
  );
  border-color: rgba(77, 77, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(77, 77, 255, 0.1);
}

[data-theme="dark"] .resource-card:hover {
  border-color: var(--gbg-primary);
  box-shadow: 0 8px 32px rgba(77, 77, 255, 0.15),
    0 0 0 1px rgba(77, 77, 255, 0.4);
  background: linear-gradient(
    145deg,
    rgba(30, 31, 72, 0.9) 0%,
    rgba(23, 24, 57, 0.9) 100%
  );
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--gbg-primary-light);
}

.resource-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-bottom: 16px;
  background-color: rgba(77, 77, 255, 0.1);
  position: relative;
}

.intro-icon::before,
.api-icon::before,
.glossary-icon::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 10px;
  left: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.intro-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D4DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.api-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D4DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.glossary-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D4DFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
}

.resource-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.resource-card p {
  color: var(--gbg-secondary-text);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hero-container {
    flex-direction: column;
    padding: 48px 24px;
  }

  .hero-content {
    margin-bottom: 32px;
    max-width: 100%;
  }

  .hero-graphic {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  .cards-row {
    grid-template-columns: 1fr;
  }

  .roles-grid,
  .resources-grid {
    grid-template-columns: 1fr;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    text-align: center;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .cards-container {
    padding-left: 0;
    padding-right: 0;
  }
}


Document camera component

Face camera component

Key components

Technical implementation

Key events

Technical features

Smart capture web SDK

GBG Documentation

Home

Quickstart

Key concepts

Glossary of terms

Support

Overview

Audit log

Best practices to follow when integrating GBG Go

Best Practices

Error handling

Troubleshooting

GBG Go endpoints, making a request and receiving a response

This section contains an explanation of the schema for passing customer data

User Data Schema

Response Codes

Get an access token to authenticate API requests. If you're unfamiliar with the authentication process, check out the [authentication guide](/docs/developer-integration/execute-customer-journeys/authenticate) for more details.

Generate access token

Start a customer verification journey using a journey ID. You can also prefill customer data. For more details, see the [start journey guide](/docs/api-integration/execute-journeys#step-2%3A-start-a-journey).

Start journey

Fetch tasks assigned to a customer during an active journey. If you're unsure how tasks work, the [retrieve tasks guide](/docs/api-integration/execute-journeys#step-3%3A-retrieve-tasks) can help.

Retrieve tasks

Fetch all currently active tasks along with their corresponding JSON schema. This allows you to see the expected input fields for each task in a single API call.

Retrieve tasks with their schema

Fetch the schema for a specific task to see the required fields and expected data structure. This schema defines the format of data required to complete the task.

Retrieve task schema

Send data to complete a task in a customer’s journey. See the [submit data guide](/docs/api-integration/execute-journeys#step-5%3A-submit-task-data) for details.

Submit task data

Check the status and progress of a journey. The [fetch journey state guide](/docs/api-integration/execute-journeys#step-6%3A-fetch-journey-state) explains more.

Fetch journey state

All notable changes related to GBG GO functionalities will be documented in this page

Release notes

All notable changes to GBG GO APIs will be documented in this page


`OpenEventName`	When camera feed starts
`CloseEventName`	When camera feed stops
`FailureEventName`	When errors occur
`CaptureEventName`	When image is successfully captured

Get Started

Platform

Developer Integration

Developer tools

Guides

Smart capture web SDK

Key components

Document camera component

Face camera component

Technical implementation

Key events

Technical features

Get Started

Platform

Developer Integration

Developer tools

Guides

​Key components

​Document camera component

​Face camera component

​Technical implementation

​Key events

​Technical features

Key components

Document camera component

Face camera component

Technical implementation

Key events

Technical features