.container {
  display: flex;
  flex-direction: column;
  width: 1280px;
  align-items: flex-start;
  gap: var(--www-octavehq-com-item-spacing-80);
  position: relative;
}

.container .heading {
  position: relative;
  width: 608px;
  height: 48px;
}

.container .div {
  display: flex;
  align-items: flex-start;
  gap: var(--www-octavehq-com-font-size-16);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.container .div-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--www-octavehq-com-font-size-16);
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.container .background-border {
  display: flex;
  height: 247.36px;
  align-items: flex-start;
  justify-content: center;
  padding: 1px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: #080724;
  gap: var(--www-octavehq-com-item-spacing-0);
}

.container .container-wrapper {
  display: flex;
  flex-direction: column;
  width: 293.16px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  align-self: stretch;
}

.container .div-wrapper {
  display: flex;
  flex-direction: column;
  max-width: var(--www-octavehq-com-width-620);
  align-items: flex-start;
  gap: var(--www-octavehq-com-font-size-16);
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.container .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Zen Dots-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 40px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.container .div-wrapper-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 11.72px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  margin-left: -5.68e-14px;
}

.container .div-3 {
  position: relative;
  flex: 1;
  max-width: var(--www-octavehq-com-width-293-16);
  width: 269.72px;
  flex-grow: 1;
  border-radius: 12px;
  background-image: url(./img/67ea78f2e19f31a8e000fadc-group-2027060-402x-png.png);
  background-size: cover;
  background-position: 50% 50%;
}

.container .background-border-2 {
  display: flex;
  height: 290px;
  align-items: center;
  padding: 1px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #1b1a35;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: #080724;
  min-height: var(--www-octavehq-com-height-290);
}

.container .div-wrapper-3 {
  display: inline-flex;
  min-width: var(--www-octavehq-com-width-240);
  height: 288px;
  align-items: flex-end;
  padding: 11.72px 0px 0px 11.72px;
  position: relative;
  flex: 0 0 auto;
}

.container .div-4 {
  position: relative;
  max-width: var(--www-octavehq-com-width-240);
  width: 228.28px;
  height: 251.22px;
  background-image: url(./img/681b8eab2e446e057b551630-mask-20group-20-4-png.png);
  background-size: cover;
  background-position: 50% 50%;
}

.container .div-wrapper-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  flex: 0 0 auto;
}

.container .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Zen Dots-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 36px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.container .div-5 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--www-octavehq-com-item-spacing-16-01);
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
  margin-right: -10.69px;
}

.container .overlay-border {
  display: flex;
  flex-direction: column;
  min-width: var(--www-octavehq-com-font-weight-300);
  align-items: flex-start;
  justify-content: center;
  padding: 1px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: #ffffff1a;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: #080724;
}

.container .div-wrapper-5 {
  display: flex;
  flex-direction: column;
  height: 335px;
  align-items: center;
  gap: var(--www-octavehq-com-item-spacing-50-76);
  padding: 24px 0px 32px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.container .div-6 {
  position: relative;
  max-width: var(--www-octavehq-com-width-327-84);
  width: 312px;
  height: 229px;
  margin-left: -0.08px;
  margin-right: -0.08px;
  border-radius: 8px;
  background-image: url(./img/67ea7696e41f8ba816e4f8c8-mask-20group-402x-avif.png);
  background-size: cover;
  background-position: 50% 50%;
}

.container .text-wrapper-3 {
  position: relative;
  width: 308px;
  font-family: "Zen Dots-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 34px;
  letter-spacing: 0;
  line-height: 21.6px;
}

.container .overlay-border-2 {
  display: flex;
  flex-direction: column;
  min-width: var(--www-octavehq-com-font-weight-300);
  align-items: flex-start;
  gap: 1.71e-13px;
  padding: 1px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: #ffffff1a;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: #080724;
}

.container .div-wrapper-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0px 0px 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.container .div-7 {
  position: relative;
  max-width: var(--www-octavehq-com-width-327-84);
  width: 319.84px;
  height: 319.84px;
  border-radius: var(--www-octavehq-com-radius-8) 0px 0px
    var(--www-octavehq-com-radius-8);
  background-image: url(./img/67c822386b5698c0d524c005-ask-20octave-png.png);
  background-size: cover;
  background-position: 50% 50%;
}

.container .div-8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 32px 32px 16px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.container .DATA-analytics {
  position: relative;
  width: 324px;
  height: 22px;
  margin-left: -22.08px;
  margin-right: -22.08px;
}

.container .text-wrapper-4 {
  position: absolute;
  width: 324px;
  height: 22px;
  top: -1px;
  left: 0;
  font-family: "Zen Dots-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 34px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.container .div-9 {
  display: flex;
  flex-direction: column;
  width: 251.86px;
  align-items: flex-start;
  gap: var(--www-octavehq-com-font-size-16);
  position: relative;
  flex: 0 0 auto;
}

.container .div-10 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 24px;
}

.container .div-11 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 65px;
}

/* --- Section Styles --- */
.section {
  position: relative;
  width: 1312px;
  height: 667px;
}

.section .link {
  position: absolute;
  width: 87px;
  height: 24px;
  top: 0;
  left: 0;
}

.section .text-wrapper {
  position: absolute;
  width: 166px;
  height: 24px;
  top: 43px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14.8px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section .twitter-x-wrapper {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 88px;
  left: 0;
}

.section .twitter-x {
  height: 24px;
  opacity: 0.6;
  background-image: url(./img/twitter-x-62a44e965e-svg.svg);
  background-size: 100% 100%;
}

.section .github-wrapper {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 88px;
  left: 40px;
}

.section .github {
  height: 24px;
  opacity: 0.6;
  background-image: url(./img/github-e1f217d7a3-b9a271324f-svg.svg);
  background-size: 100% 100%;
}

.section .discord-wrapper {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 88px;
  left: 80px;
}

.section .div {
  height: 24px;
  opacity: 0.6;
}

.section .img-wrapper {
  position: relative;
  width: 24px;
  height: 24px;
}

.section .discord {
  position: absolute;
  width: 24px;
  height: 19px;
  top: 2px;
  left: 0;
}

.section .linkedin-wrapper {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 88px;
  left: 120px;
}

.section .linkedin {
  height: 24px;
  opacity: 0.6;
  background-image: url(./img/linkedin-d710e84d63-6ed0dc28aa-svg.svg);
  background-size: 100% 100%;
}

.section .youtube-wrapper {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 88px;
  left: 160px;
}

.section .youtube {
  position: absolute;
  width: 24px;
  height: 17px;
  top: 4px;
  left: 0;
}

.section .div-wrapper {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 0;
  left: 531px;
}

.section .text-wrapper-2 {
  position: absolute;
  width: 54px;
  height: 20px;
  top: 1px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #c4bbd3;
  font-size: 14.4px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section .link-2 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 32px;
  left: 531px;
}

.section .text-wrapper-3 {
  width: 55px;
  color: #c4bbd3;
  font-size: 14.6px;
  position: absolute;
  height: 20px;
  top: 1px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section .link-3 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 64px;
  left: 531px;
}

.section .text-wrapper-4 {
  position: absolute;
  width: 45px;
  height: 20px;
  top: 1px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #c4bbd3;
  font-size: 15.1px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section .link-4 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 96px;
  left: 531px;
}

.section .text-wrapper-5 {
  position: absolute;
  width: 36px;
  height: 20px;
  top: 1px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #c4bbd3;
  font-size: 13.5px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section .link-5 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 128px;
  left: 531px;
}

.section .text-wrapper-6 {
  position: absolute;
  width: 56px;
  height: 20px;
  top: 1px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #c4bbd3;
  font-size: 14.4px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section .link-6 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 0;
  left: 797px;
}

.section .text-wrapper-7 {
  position: absolute;
  width: 89px;
  height: 20px;
  top: 1px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #c4bbd3;
  font-size: 14.2px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section .link-7 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 32px;
  left: 797px;
}

.section .text-wrapper-8 {
  position: absolute;
  width: 94px;
  height: 20px;
  top: 1px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #c4bbd3;
  font-size: 14.6px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section .link-8 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 64px;
  left: 797px;
}

.section .text-wrapper-9 {
  width: 88px;
  height: 20px;
  top: 1px;
  color: #c4bbd3;
  font-size: 14.6px;
  line-height: 24px;
  position: absolute;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.section .link-9 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 96px;
  left: 797px;
}

.section .text-wrapper-10 {
  position: absolute;
  width: 37px;
  height: 20px;
  top: 1px;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #c4bbd3;
  font-size: 14.6px;
  letter-spacing: 0;
  line-height: 24px;
  white-space: nowrap;
}

.section .link-10 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 128px;
  left: 797px;
}

.section .text-wrapper-11 {
  width: 106px;
  height: 20px;
  top: 1px;
  color: #c4bbd3;
  font-size: 14.9px;
  line-height: 24px;
  position: absolute;
  left: 0;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.section .link-11 {
  position: absolute;
  width: 250px;
  height: 24px;
  top: 160px;
  left: 797px;
}