*,
*:before,
*:after {
    margin: 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    background-position: center center;
    background-repeat: no-repeat;
    box-sizing: border-box
}

html {
    text-align: left
}

ul {
    list-style: none
}

a {
    text-decoration: none;
    color: inherit
}

button,
input,
select,
textarea {
    display: block;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    border: none
}

button,
[type=button],
[type=reset],
[type=submit],
[type=file],
[type=file]::-webkit-file-upload-button {
    appearance: none;
    cursor: pointer
}

input::placeholder,
textarea::placeholder {
    color: inherit;
    opacity: .75
}

svg {
    overflow: visible
}

label {
    display: block
}

summary {
    display: block
}

code,
kbd,
pre,
samp {
    font-family: inherit
}

address,
cite,
dfn,
var {
    font-style: inherit
}

small {
    font-size: inherit
}

mark {
    color: inherit
}

table {
    border-spacing: 0
}

th {
    font-weight: inherit
}

th:not([align]),
caption:not([align]) {
    text-align: inherit
}

[hidden] {
    display: none !important
}

:root {
    --spacing-0: 0rem;
    --spacing-px: 1px;
    --spacing-0-5: 2px;
    --spacing-1: .125rem;
    --spacing-2: .5rem;
    --spacing-3: .75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;
    --spacing-11: 2.75rem;
    --spacing-12: 3rem;
    --spacing-13: 3.25rem;
    --spacing-14: 3.5rem;
    --spacing-15: 3.75rem;
    --spacing-16: 4rem;
    --spacing-17: 4.25rem;
    --spacing-18: 4.5rem;
    --spacing-19: 4.75rem;
    --spacing-20: 5rem;
    --spacing-21: 5.25rem;
    --spacing-22: 5.5rem;
    --spacing-23: 5.75rem;
    --spacing-24: 6rem;
    --spacing-25: 6.25rem;
    --spacing-26: 6.5rem;
    --spacing-27: 6.75rem;
    --spacing-28: 7rem;
    --spacing-29: 7.25rem;
    --spacing-30: 7.5rem;
    --spacing-31: 7.75rem;
    --spacing-32: 8rem;
    --spacing-33: 8.25rem;
    --spacing-34: 8.5rem;
    --spacing-35: 8.75rem;
    --spacing-36: 9rem;
    --spacing-37: 9.25rem;
    --spacing-38: 9.5rem;
    --spacing-39: 9.75rem;
    --spacing-40: 10rem;
    --font-heading: "Onest";
    --background-default: color-mix(in srgb, var(--primary-color) 3%, #000);
    --background-elevated: #0e0f10;
    --background-highlight: color-mix(in srgb, var(--background-default) 100%, white 4%);
    --green: #184e44;
    --green-light: #ddf3ef;
    --orange: #9a3412;
    --orange-light: #fff7ed;
    --red: #ee2f65;
    --red-light: #fff1f2;
    --text-disabled: #a4acb9ff;
    --text-loud: white;
    --text-muted: #ccced3;
    --text-normal: #ccced3;
    --font-xl: 2.25rem;
    --default-spacing: 2.5rem;
    --primary-color: hsla(219, 98%, 58%, 1);
    --primary-color-20: color-mix(in srgb, var(--primary-color) 20%, transparent);
    --primary-color-light: #ffeee5;
    --transition-easeOutSin: cubic-bezier(.165, .84, .44, 1);
    --transition-easeInQuart: cubic-bezier(.5, 0, .75, 0);
    --power1-in: linear(0, .0039, .0156, .0352, .0625, .0977, .1407, .1914, .2499, .3164, .3906 62.5%, .5625, .7656, 1);
    --divider-color: rgba(45, 45, 45, .2);
    --button-primary-background: #000;
    --button-primary-textColor: #fff;
    --button-secondary-textColor: var(--primary-color);
    --border-color-default: rgba(6, 17, 31, .1);
    --container-maxWidth: 80rem;
    --container-vertical-padding: var(--spacing-4);
    --container-horizontal-padding: 80px;
    --copy-max-width: 50rem
}

@media (min-width: 768px) {
    :root {
        --default-spacing: 4.688rem
    }
}

html[data-theme=orange] {
    --base-hue: 40;
    --primary-color: hsla(var(--base-hue), 98%, 58%, 1);
    --button-text-color: #000
}

html[data-theme=blue],
html {
    --base-hue: 219;
    --primary-color: hsla(var(--base-hue), 98%, 58%, 1);
    --button-text-color: #fff
}

html[data-theme=green] {
    --base-hue: 100;
    --primary-color: hsla(var(--base-hue), 96%, 42%, 1);
    --button-text-color: #000
}

html[data-theme=sky] {
    --base-hue: 174;
    --primary-color: hsla(var(--base-hue), 96%, 47%, 1);
    --button-text-color: #000
}

html[data-theme=rose] {
    --base-hue: 340;
    --primary-color: hsla(var(--base-hue), 96%, 42%, 1);
    --button-text-color: #fff
}

html[data-theme=purple] {
    --base-hue: 264;
    --primary-color: hsla(var(--base-hue), 96%, 42%, 1);
    --button-text-color: #fff
}

img {
    min-width: 0;
    width: 100%;
    object-fit: contain
}

.container {
    padding-block: var(--default-spacing)
}

.container--no-top-padding {
    padding-block: 0 var(--default-spacing)
}

.container--no-bottom-padding {
    padding-block: var(--default-spacing) 0
}

.wrapper {
    max-width: var(--container-maxWidth);
    margin-inline: auto;
    padding-inline: var(--container-vertical-padding)
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden
}

.section {
    padding-block: var(--container-horizontal-padding)
}

.section--no-top-padding {
    padding-block: 0 var(--container-horizontal-padding)
}

.section--no-bottom-padding {
    padding-block: var(--container-horizontal-padding) 0
}

.article-typography {
    color: var(--text-muted, #36394a);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -.02rem
}

.article-typography ul {
    list-style: disc
}

.article-typography ul,
.article-typography ol {
    list-style-position: inside
}

.article-typography ul *:not(:first-child),
.article-typography ol *:not(:first-child) {
    margin-top: var(--spacing-2)
}

.article-typography *:is(h1, h2, h3, h4, h5, h6) {
    line-height: 120%;
    font-weight: 500;
    color: var(--text-loud);
    margin-block: .25rem 1rem
}

.article-typography *:is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-top: 2rem
}

.article-typography a {
    color: var(--primary-color);
    text-decoration: underline
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    background: var(--background-default)
}

.hiddenScrollbar::-webkit-scrollbar {
    display: none
}

.hiddenScrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.hidden {
    display: none
}

.flex {
    display: flex
}

.space-x-default>*:not(:first-child) {
    margin-top: var(--spacing-4)
}

.divider-h {
    width: 1px;
    height: var(--spacing-6);
    background: #2d2d2d33;
    border: none
}

.gradient-border {
    position: relative
}

.gradient-border:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    opacity: .5;
    background: linear-gradient(to bottom, #ffffff4d, #ffffff0f);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    pointer-events: none;
    transition: opacity .1s linear
}

.gradient-border:not(.no-hover):hover:before {
    opacity: 1
}

.highlight {
    color: #b3b3b3
}

.title-highlight {
    color: #555
}

.divider-v {
    width: var(--spacing-6);
    height: 1px;
    background: #2d2d2d33;
    border: none
}

html {
    scroll-behavior: smooth;
    font-family: Onest
}

@keyframes up-rotate {
    0% {
        animation-timing-function: cubic-bezier(.16, -.88, .97, .53);
        transform: translateY(0)
    }

    30% {
        transform-origin: center;
        animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
        transform: translateY(-10px)
    }

    to {
        transform-origin: center;
        transform: translateY(-10px) rotate(45deg) scale(.9)
    }
}

@keyframes down-rotate {
    0% {
        animation-timing-function: cubic-bezier(.16, -.88, .97, .53);
        transform: translateY(0)
    }

    30% {
        transform-origin: center;
        animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
        transform: translateY(10px)
    }

    to {
        transform-origin: center;
        transform: translateY(10px) rotate(-45deg) scale(.9)
    }
}

@keyframes hide {
    29% {
        opacity: 1
    }

    30% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@media (min-width: 768px) {
    #menu {
        display: none
    }
}

#menu #top-line,
#menu #bottom-line,
#menu #middle-line {
    transform-box: fill-box;
    transform-origin: center
}

#menu.active #top-line {
    animation: down-rotate .25s var(--transition-easeOutSin) both
}

#menu.active #bottom-line {
    animation: up-rotate .25s var(--transition-easeOutSin) both
}

#menu.active #middle-line {
    animation: hide .25s var(--transition-easeOutSin) forwards
}

.navbar__menu {
    color: var(--text-muted, #36394a);
    font-size: .875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -.02375rem
}

@media (min-width: 768px) {
    .navbar__menu {
        display: none
    }
}

.navbar__menu .btn {
    width: 100%;
    margin-top: 14px
}

.navbar__menu__language {
    display: flex;
    padding: 10px;
    gap: .5rem
}

.navbar__menu__language:hover {
    color: var(--primary-color)
}

.navbar__menu__link {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    display: block;
    opacity: 0;
    transition: opacity .25s ease-out
}

.navbar__menu__link span svg {
    width: 1rem
}

.navbar__menu__link:hover,
.navbar__menu__link--active {
    color: var(--primary-color)
}

.navbar__menu__wrapper {
    display: grid;
    justify-content: start;
    grid-template-rows: 0fr;
    border-bottom: 1px solid rgba(0, 0, 0, .0196078431);
    overflow: hidden;
    transition: grid-template-rows .25s var(--transition-easeOutSin)
}

.navbar__menu__wrapper--open {
    grid-template-rows: 1fr
}

.navbar__menu__wrapper--open a {
    opacity: 1
}

.navbar {
    z-index: 20
}

.navbar__logo {
    display: flex
}

.navbar__logo a {
    color: #fff;
    align-items: center;
    display: flex;
    font-size: 1.5rem;
    font-weight: 500
}

.navbar__wrapper {
    display: grid;
    align-items: center;
    padding-block: 1rem;
    justify-content: space-between;
    grid-template-columns: 1fr 3fr
}

.navbar__cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: end
}

.navbar__cta .btn {
    display: none
}

@media (min-width: 768px) {
    .navbar__cta .btn {
        display: block
    }
}

.navbar__cta__lang {
    display: none
}

@media (min-width: 640px) {
    .navbar__cta__lang {
        display: flex
    }
}

.navbar__cta__burger {
    border: none
}

.navbar__cta__search {
    border-radius: 6.1875rem;
    box-shadow: 0 0 0 1px #0000000f, 0 1px #0000001f;
    display: flex;
    padding: .4rem .75rem;
    justify-content: center;
    align-items: center;
    gap: .625rem;
    color: var(--text-muted, #36394a);
    font-size: .875rem;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -.02375rem
}

.navbar__cta__divider {
    all: unset;
    height: 1rem;
    border: .5px solid var(--divider-color)
}

.navbar__links {
    margin-left: 1rem;
    align-items: center;
    display: none;
    color: var(--text-muted, #36394a);
    font-size: .875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -.02375rem
}

.navbar__links a.navbar__link {
    display: flex;
    align-items: center;
    gap: .5rem
}

.navbar__links a:hover {
    color: var(--primary-color);
    transition: color .35s ease-out
}

.navbar__links a.navbar__link--active {
    color: var(--primary-color)
}

.navbar--with-border {
    border-bottom: 1px solid rgba(0, 0, 0, .05)
}

@media (min-width: 768px) {
    .navbar__wrapper {
        grid-template-columns: 1fr 1fr 1fr
    }

    .navbar__links {
        gap: 1.25rem;
        justify-content: center;
        display: flex;
        align-items: center;
        flex: 1 0 0
    }
}

.footer-header {
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    background: linear-gradient(0deg, color-mix(in srgb, var(--background-default) 100%, white 2%) 10%, color-mix(in srgb, var(--background-default) 100%, transparent 40%));
    border-top: 1px solid #23252a;
    position: relative
}

.footer-header__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1
}

.footer-header__image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000090;
    z-index: -1
}

@media (min-width: 768px) {
    .footer-header__container {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}

.footer-header__title {
    max-width: 292px;
    color: transparent;
    background-clip: text;
    background: linear-gradient(to bottom, #f7f8f8 10%, #e3e3e3 150%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, .5));
    margin: 0;
    letter-spacing: -.03em;
    font-size: 48px;
    line-height: 52px
}

@media (min-width: 768px) {
    .footer-header__title {
        font-size: 56px;
        font-weight: 600;
        line-height: 61.6px
    }
}

.footer-header__buttons {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 2rem
}

@media (min-width: 768px) {
    .footer-header__buttons {
        margin-top: 0
    }
}

.footer-header__button {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 21.6px;
    padding: 13px 20px;
    text-align: center;
    transition: opacity .2s ease
}

@media (max-width: 768px) {
    .footer-header__button {
        width: 100%
    }
}

.footer-header__button:hover {
    opacity: .9
}

.footer-header__button--primary {
    width: 127px;
    background: #2b75fd;
    color: #fff
}

@media (max-width: 768px) {
    .footer-header__button--primary {
        width: 100%
    }
}

.footer-header__button--secondary {
    width: 137px;
    background: #fff;
    color: #020812
}

@media (max-width: 768px) {
    .footer-header__button--secondary {
        width: 100%
    }
}

.footer__wrapper {
    background: color-mix(in srgb, var(--background-default) 100%, white 2%)
}

.footer__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-bottom: 2rem
}

@media (min-width: 768px) {
    .footer__container {
        flex-direction: row
    }
}

.footer__logo {
    flex-shrink: 0
}

.footer__links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 40px;
    width: 100%
}

@media (min-width: 420px) {
    .footer__links {
        gap: 10px
    }
}

.footer__column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0
}

@media (max-width: 768px) {
    .footer__column {
        gap: 20px
    }
}

.footer__heading {
    color: #f7f8f8;
    font-size: 13.78px;
    font-weight: 600;
    line-height: 24px
}

@media (max-width: 768px) {
    .footer__heading {
        font-size: 15px
    }
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media (max-width: 768px) {
    .footer__list {
        gap: 12px
    }
}

.footer__item {
    color: #8a8f98;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-decoration: none;
    transition: color .2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (max-width: 768px) {
    .footer__item {
        font-size: 13px;
        line-height: 20px
    }
}

@media (hover: hover) {
    .footer__item:hover {
        color: #f7f8f8
    }
}

@media (hover: none) {
    .footer__item:active {
        color: #f7f8f8
    }
}

.footer__item--highlighted {
    color: #d0d6e0;
    font-weight: 600;
    font-size: 13.78px
}

@media (hover: hover) {
    .footer__item--highlighted:hover {
        color: #f7f8f8
    }
}

@media (hover: none) {
    .footer__item--highlighted:active {
        color: #f7f8f8
    }
}

.app-card {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 19px;
    display: inline-flex;
    border-radius: 12px;
    overflow: hidden;
    transition: all .3s ease
}

.app-card:hover {
    background: #ffffff10;
    transform: translateY(-1px)
}

.app-card__image-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.app-card__image {
    height: 100%;
    max-width: 100%;
    object-fit: cover
}

.app-card__content {
    padding: 0 22px 22px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 11px;
    display: flex
}

.app-card__title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    margin: 0
}

.app-card__description {
    color: #d6dbe4;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0
}

.app-card__badge {
    color: var(--primary-color);
    font-weight: 500
}

.apps {
    padding-block: 64px
}

.apps__hero {
    padding-top: 60px;
    --max-image-height: 620px
}

.apps__hero__image {
    object-fit: cover;
    position: relative;
    z-index: -99;
    display: block;
    width: 100%;
    height: 100%
}

.apps__hero__image-container {
    pointer-events: none;
    user-select: none;
    width: 100%;
    position: absolute;
    top: -73px;
    left: 0;
    height: 100%;
    max-height: var(--max-image-height)
}

.apps__hero__image-container:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(1, 4, 9, .6) 0%, var(--background-default) 100%)
}

.apps__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
}

.contact-wrapper {
    padding-block: 64px
}

.contact {
    display: grid;
    gap: 64px
}

@media (min-width: 768px) {
    .contact {
        grid-template-columns: 1fr 1fr
    }
}

.contact__content {
    display: flex;
    flex-direction: column;
    gap: 29px
}

.contact__decoration {
    z-index: -1;
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: -140px;
    left: 0;
    width: 906px
}

.contact__head :global(.text-head__title) {
    font-size: 63px;
    font-weight: 600;
    line-height: 68px;
    margin: 0;
    max-width: 416px
}

.contact__head :global(.text-head__body) {
    color: #e9e9e9;
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    margin: 0;
    max-width: 491px
}

.contact__features {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.contact__feature {
    display: flex;
    align-items: center;
    gap: 10px
}

.contact__feature-icon {
    width: 17px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.contact__feature-text {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px
}

.contact__support {
    color: #ffffffb3;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    margin: 0
}

.form {
    width: 100%
}

@media (min-width: 768px) {
    .form {
        padding: 32px;
        background: color-mix(in srgb, var(--background-default) 100%, #ffffff 4%);
        border: 1px solid rgba(255, 255, 255, .031372549);
        border-radius: 12px
    }
}

.form__body {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.form__footer {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.form__support {
    color: var(--text-muted);
    font-size: 14px
}

.form__support a {
    color: var(--primary-color);
    text-decoration: none
}

.form__support a:hover {
    text-decoration: underline
}

.form__item {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.form__item.item--checkbox {
    height: auto
}

.form__label {
    color: var(--text-normal);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px
}

.form__input,
.form__textarea,
.select-wrapper,
.input-with-select {
    width: 100%;
    height: 40px;
    padding: 11.5px 13px;
    background: color-mix(in srgb, var(--background-default) 100%, white 4%);
    border-radius: 4px;
    border: 1px solid rgba(237, 237, 237, .1254901961);
    font-size: 14px;
    font-weight: 400;
    color: #fff
}

.form__input::placeholder,
.form__textarea::placeholder,
.select-wrapper::placeholder,
.input-with-select::placeholder {
    color: var(--text-muted)
}

.form__input:focus,
.form__textarea:focus,
.select-wrapper:focus,
.input-with-select:focus {
    outline: none;
    border-color: var(--primary-color)
}

.form__textarea {
    height: 111px;
    resize: none
}

.select-wrapper {
    position: relative;
    padding: 0
}

.select-wrapper .select__field {
    width: 100%;
    height: 100%;
    padding: 11.5px 13px;
    appearance: none;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-normal);
    cursor: pointer
}

.select-wrapper .select__field:focus {
    outline: none
}

.select-wrapper .select-icon {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
}

.input-with-select {
    display: flex;
    padding: 0;
    overflow: hidden
}

.input-with-select .form__input {
    border: none;
    border-radius: 0;
    flex: 1
}

.input-with-select .select-wrapper--attached {
    width: auto;
    border: none;
    border-left: 1px solid #ededed;
    border-radius: 0
}

.input-with-select .select__field--attached {
    height: 40px;
    padding: 11.5px 35px 11.5px 13px;
    font-size: 14px;
    background: transparent;
    border: none;
    cursor: pointer
}

.input-with-select .select__field--attached:focus {
    outline: none
}

.description {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px
}

.required {
    color: var(--red);
    margin-left: 4px
}

.faq {
    --section-spacing: 24px
}

.faq__container {
    width: 100%;
    height: 100%
}

@media (min-width: 768px) {
    .faq__container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px
    }
}

.faq__header {
    padding-right: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px
}

@media (min-width: 768px) {
    .faq__header {
        max-width: 600px
    }
}

.faq__title {
    color: #fff;
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
    word-wrap: break-word
}

.faq__subtitle {
    color: #a1a1aa;
    font-size: 17px;
    font-weight: 500;
    line-height: 25.5px
}

.faq__subtitle span {
    color: #fff;
    font-weight: 400
}

.faq__contact {
    color: var(--primary-color);
    font-weight: 400;
    text-decoration: none
}

.faq__contact:hover {
    text-decoration: underline
}

.faq__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--section-spacing)
}

.faq__category {
    width: 100%;
    display: grid;
    gap: var(--section-spacing);
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

@media (width >=40rem) {
    .faq__category {
        grid-template-columns: min(400px, 25%) 1fr
    }
}

.faq__category-title {
    color: var(--text-normal);
    font-weight: 500;
    line-height: 32px;
    padding-top: 12px
}

.faq__category-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: var(--section-spacing)
}

.faq__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.faq__radio:checked+.faq__question {
    background: transparent
}

.faq__radio:checked+.faq__question .faq__icon {
    transform: rotate(90deg)
}

.faq__radio:checked~.faq__answer {
    grid-template-rows: 1fr;
    margin-bottom: 8px
}

.faq__item {
    width: 100%;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 12px
}

.faq__item:has(input:checked) {
    background: #ffffff10
}

.faq__question {
    width: 100%;
    display: flex;
    gap: 8px;
    background: none;
    border: none;
    padding: 14px;
    cursor: pointer;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    line-height: 150%;
    text-align: left;
    border-radius: 12px
}

.faq__question:hover {
    background: #ffffff10
}

.faq__icon {
    width: 24px;
    height: 24px;
    position: relative;
    transition: transform .3s ease;
    flex-shrink: 0
}

.faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
    padding-left: 32px
}

.faq__answer p {
    overflow: hidden;
    color: #a1a1aa;
    font-size: 17px;
    font-weight: 400;
    line-height: 25.5px
}

.cards__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 2rem
}

@media (max-width: 768px) {
    .cards__container {
        grid-template-columns: 1fr
    }
}

.cards__stack {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.cards .card {
    border-radius: 16px;
    transition: all .3s ease;
    display: block;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.cards .card:hover {
    transform: translateY(-1px)
}

.cards .card:hover .card__background {
    transform: scale(1.05)
}

.cards .card--featured {
    padding: 30px;
    height: 100%;
    min-height: 320px
}

.cards .card:not(.card--featured) {
    min-height: 114px;
    padding: 20px;
    background: color-mix(in srgb, var(--background-default) 100%, #ffffff 3%)
}

.cards .card:not(.card--featured) .card__content {
    justify-content: center
}

.cards .card__background {
    position: absolute;
    transition: all .4s var(--transition-easeOutSin);
    pointer-events: none;
    left: 0;
    bottom: 0;
    z-index: -1;
    object-fit: cover
}

.cards .card__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--background-default) 100%, transparent 20%)
}

.cards .card__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.cards .card__icon {
    display: flex;
    align-items: center;
    gap: 12px
}

.cards .card__icon-box {
    width: 24.54px;
    height: 24.54px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.cards .card__icon span {
    color: #fff;
    font-size: 33.54px;
    font-weight: 500
}

.cards .card__text h3 {
    color: #fff;
    font-weight: 500;
    margin-bottom: 9px
}

.card--featured .cards .card__text h3 {
    font-size: 30.25px;
    line-height: 40px
}

.card:not(.card--featured) .cards .card__text h3 {
    font-size: 19.22px;
    line-height: 28px
}

.cards .card__text p {
    color: #fff;
    opacity: .8;
    font-size: 16px;
    font-weight: 300;
    line-height: 22.4px
}

.faq-page {
    padding: 80px 0;
    background: var(--background-default);
    border-top: 1px solid rgba(255, 255, 255, .1254901961)
}

.faq-page__container {
    max-width: 1024px;
    margin: 0 auto
}

.hero-line {
    z-index: -1;
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: -140px;
    width: 906px
}

.hero-wrapper {
    display: flex;
    position: static;
    flex-direction: column;
    gap: 2rem;
    padding-top: 60px
}

.hero-wrapper--centered {
    align-items: center;
    justify-content: center
}

.hero-wrapper--centered .btn__container {
    justify-content: center
}

.hero-wrapper:has(.hero-image) {
    min-height: 600px
}

.hero-wrapper .hero-image--bottom {
    width: 170%
}

@media (min-width: 768px) {
    .hero-wrapper .hero-image--bottom {
        width: auto
    }
}

.hero-wrapper .hero-image--top {
    position: absolute;
    top: -73px;
    left: 0;
    max-height: 678px;
    object-fit: cover;
    object-position: bottom;
    z-index: -99
}

@media (min-width: 768px) {
    .hero-wrapper .hero-image--top {
        width: 100%;
        height: auto
    }
}

.hero-wrapper .hero-image-overlay {
    position: absolute;
    top: -73px;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 679px;
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--background-default) 100%, transparent 50%) 0%, var(--background-default) 99%);
    z-index: -99
}

.value__cards .custom-cards__list {
    margin-top: 0rem;
    gap: 2rem
}

.value__cards .custom-card__icon {
    color: var(--primary-color)
}

@charset "UTF-8";

.integration-cards {
    padding: 80px 0;
    background: var(--background-default);
    border-top: 1px solid rgba(255, 255, 255, .1254901961)
}

.integration-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 0 auto
}

@media (min-width: 768px) {
    .integration-cards__grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width: 1024px) {
    .integration-cards__grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.integration-card {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--background-default) 100%, white 4%);
    border-radius: 12px;
    padding: 32px;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    text-decoration: none;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .0274509804)
}

.integration-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px #00000026;
    border: 1px solid rgba(255, 255, 255, .0705882353);
    filter: brightness(1.15)
}

.integration-card:hover .integration-card__cta-icon {
    transform: translate(4px)
}

.integration-card__header {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.integration-card__logo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-right: 16px;
    object-fit: contain
}

.integration-card__meta {
    display: flex;
    flex-direction: column
}

.integration-card__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-loud);
    margin: 0
}

.integration-card__category {
    font-size: 14px;
    color: var(--primary-color);
    margin-top: 4px
}

.integration-card__subtitle {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-normal);
    margin-bottom: 16px
}

.integration-card__description {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 24px
}

.integration-card__features {
    margin-top: auto;
    margin-bottom: 24px
}

.integration-card__features-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-loud)
}

.integration-card__features-list {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.integration-card__feature {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-normal);
    padding: 8px 0
}

.integration-card__feature:before {
    content: "•";
    color: var(--primary-color);
    font-size: 18px;
    margin-right: 8px
}

.integration-card__cta {
    display: flex;
    align-items: center;
    margin-top: auto
}

.integration-card__cta-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color)
}

.integration-card__cta-icon {
    font-size: 18px;
    color: var(--primary-color);
    margin-left: 8px;
    transition: transform .2s ease
}

.point-section>*:not(:first-child) {
    margin-top: 1rem
}

.subtitle {
    height: 40px;
    border: 1px var(--main-color) dashed;
    padding: 12px;
    width: fit-content;
    display: inline-block;
    text-align: center;
    color: var(--main-color);
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 100%
}

.subtitle--green {
    --main-color: #55f564
}

.subtitle--purple {
    --main-color: #9286f8
}

.subtitle--blue {
    --main-color: var(--primary-color)
}

.mblock {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.slider {
    --progress-height: 3px;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 33px;
    display: inline-flex
}

.slider__image {
    max-width: 977.31px;
    border-radius: 6px;
    height: auto;
    display: none
}

@media (min-width: 640px) {
    .slider__image--active {
        display: block
    }
}

.slider__content {
    flex-direction: column;
    gap: 24px;
    display: flex
}

.slider__progress {
    display: none;
    align-self: stretch;
    height: var(--progress-height);
    position: relative
}

@media (min-width: 640px) {
    .slider__progress {
        display: flex
    }
}

.slider__progress-bg {
    width: 100%;
    height: var(--progress-height);
    background: #2f3841;
    border-radius: 99px
}

.slider__progress-bar {
    width: 152px;
    height: var(--progress-height);
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 8px;
    transition: all .3s ease-in-out;
    transform: translate(0)
}

.slider__features {
    display: inline-flex;
    flex-direction: column;
    gap: 2rem
}

@media (min-width: 640px) {
    .slider__features {
        flex-direction: row;
        gap: 1rem
    }
}

.slider__feature {
    flex-direction: column;
    gap: 10px;
    display: inline-flex
}

@media (min-width: 640px) {
    .slider__feature {
        opacity: .8
    }
}

.slider__feature--active {
    opacity: 1
}

.slider__feature-title {
    align-self: stretch;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    word-wrap: break-word
}

.slider__feature-description {
    opacity: .8;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    word-wrap: break-word
}

@media (min-width: 640px) {
    .slider__feature-image {
        display: none
    }
}

.mblocks {
    display: grid
}

@media (min-width: 768px) {
    .mblocks {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem
    }
}

.fast-to-build__image {
    max-width: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    margin-top: -1rem !important
}

@media (min-width: 1024px) {
    .fast-to-build__image {
        margin-top: -3rem !important
    }
}

.point-section__header {
    margin-block: 2rem
}

.point-section__header>*:not(:first-child) {
    margin-top: 1rem
}

.section-number {
    width: 50px;
    height: 50px;
    border: 1px var(--main-color) dashed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
    align-self: stretch;
    text-align: center;
    color: var(--main-color);
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 16px
}

.section-number--green {
    --main-color: #55f564
}

.section-number--purple {
    --main-color: #9286f8
}

.section-number--blue {
    --main-color: var(--primary-color)
}

.bento__grid {
    margin-top: 2rem;
    grid-template-columns: repeat(4, 1fr)
}

.bento__grid--uneven {
    grid-template-columns: repeat(12, 1fr)
}

@media (min-width: 768px) {
    .bento__grid--uneven .bento__card {
        padding: 2.5rem
    }
}

.bento__grid--uneven .bento__card:nth-child(1) {
    grid-column: span 8
}

.bento__grid--uneven .bento__card:nth-child(2) {
    grid-column: span 3
}

.bento__grid--uneven .bento__card:nth-child(3) {
    grid-column: span 4
}

.bento__grid--uneven .bento__card:nth-child(4) {
    grid-column: span 7
}

@media (min-width: 768px) {
    .bento__grid {
        display: grid;
        gap: 10px
    }
}

.bento__link {
    margin-top: 2rem
}

.bento__card {
    width: 100%;
    height: 100%;
    padding: 1rem;
    overflow: hidden;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    position: relative;
    border-top: 1px rgba(255, 255, 255, .062745098) solid;
    border-bottom: 1px rgba(255, 255, 255, .062745098) solid
}

.bento__card:has(img) {
    min-height: 440px
}

@media (min-width: 768px) {
    .bento__card {
        border-radius: 16px;
        border: 1px rgba(255, 255, 255, .062745098) solid;
        padding: 1.5rem
    }
}

.bento__card__content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.bento__card__header {
    position: static;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    display: flex
}

.bento__card__header h3 {
    align-self: stretch;
    padding-top: 2px;
    padding-bottom: 3px;
    color: #fff;
    font-size: 19.22px;
    font-weight: 600;
    line-height: 28px;
    word-wrap: break-word
}

.bento__card__header p {
    align-self: stretch;
    padding-top: 3px;
    padding-bottom: 4.19px;
    opacity: .8;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
    word-wrap: break-word
}

.bento__card__image {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    object-position: top left;
    object-fit: cover
}

.bento__card--large:nth-of-type(1) {
    grid-area: large-1
}

.bento__card--large:nth-of-type(2) {
    grid-area: large-2
}

.bento__card--medium:nth-of-type(1) {
    grid-area: small-1
}

.bento__card--medium:nth-of-type(2) {
    grid-area: small-2
}

.btn__container {
    display: flex;
    justify-content: left;
    width: 100%;
    gap: 1rem;
    margin-top: 1rem
}

.letsgrow .btn__container {
    justify-content: center
}

.letsgrow__features {
    margin-top: 3.5rem;
    max-width: 1000px;
    margin-inline: auto
}

.letsgrow__image {
    object-fit: cover;
    margin-top: 3.5rem;
    margin-inline: auto;
    display: block;
    max-width: 672px;
    height: auto
}

.post-card {
    width: 100%;
    padding-block: 32px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-decoration: none;
    transition: all .3s ease;
    position: relative
}

@media (min-width: 768px) {
    .post-card {
        padding: 32px
    }
}

@media (min-width: 768px) {
    .post-card:hover {
        background: #ffffff10
    }
}

.post-card:hover .post-card__content {
    transform: translateY(-14px)
}

.post-card:hover .post-card__read-more {
    opacity: 1;
    transform: translateY(26px)
}

.post-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .3s ease;
    padding-bottom: 14px
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 400
}

.post-card__date {
    position: relative;
    padding-right: 16px
}

.post-card__date:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    opacity: .5
}

.post-card__author {
    color: var(--text-muted)
}

.post-card__title {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    margin: 0
}

.post-card__description {
    color: #a1a1aa;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    margin: 0
}

.post-card__read-more {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    position: absolute;
    bottom: 40px;
    opacity: 0;
    transform: translateY(40px);
    transition: all .3s ease
}

.posts {
    padding-block: 40px;
    background: var(--background-default);
    border-top: 1px solid rgba(255, 255, 255, .1254901961)
}

.posts__grid {
    display: grid;
    gap: 24px;
    max-width: 1024px;
    margin: 0 auto
}

.caption {
    --color: hsl(var(--base-hue), 85%, 76%);
    display: inline-block;
    color: var(--color);
    font-size: 13px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: -.005em;
    position: relative;
    padding-left: 1rem
}

.caption:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--color)
}

.title {
    color: #fff;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -.02em;
    font-size: 2.5rem
}

@media (min-width: 768px) {
    .title {
        font-size: 2.5rem
    }
}

.title--gradient {
    color: transparent;
    background-clip: text;
    background: linear-gradient(to bottom, #f7f8f8 10%, #bababa);
    padding-bottom: 4px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    padding-right: 4px;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, .5))
}

.title--gradient.to-right {
    background: linear-gradient(to right, #f7f8f8, #e3e3e3);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.title--large {
    font-size: 2.5rem;
    letter-spacing: -.04em
}

@media (min-width: 1024px) {
    .title--large {
        font-size: 3.25rem
    }
}

.title--xlarge {
    font-size: 3.25rem;
    letter-spacing: -.06em
}

@media (min-width: 1024px) {
    .title--xlarge {
        font-size: 4rem
    }
}

.copy>*:not(:first-child) {
    margin-top: var(--spacing-4)
}

.body {
    color: var(--text-normal);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -.03rem;
    max-width: var(--copy-max-width)
}

.body a {
    color: var(--primary-color)
}

.body--large,
.body--xlarge {
    font-size: 1rem
}

@media (min-width: 768px) {
    .copy--centered {
        margin-inline: auto;
        text-align: center
    }
}

.copy--centered .body {
    margin-inline: auto
}

.copy--centered .title {
    max-width: calc(var(--copy-max-width) + 13rem)
}

@media (min-width: 768px) {
    .copy--centered .title {
        margin-inline: auto
    }
}

.cta {
    overflow: hidden;
    min-height: 600px;
    position: relative;
    margin-top: var(--container-horizontal-padding);
    padding-top: 40px;
    gap: 19px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: radial-gradient(50% 50% at 100% 50%, color-mix(in srgb, #1d2023 98%, #ffffff 2%), color-mix(in srgb, var(--background-default) 98%, #ffffff 3%))
}

@media (min-width: 768px) {
    .cta {
        padding: 40px
    }
}

@media (min-width: 768px) {
    .cta {
        border-radius: 20px
    }
}

@media (min-width: 768px) {
    .cta {
        min-height: 412px
    }
}

.cta__image {
    pointer-events: none;
    user-select: none;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, .02) 50%);
    height: 100%;
    object-fit: cover
}

@media (min-width: 768px) {
    .cta__image {
        -webkit-mask-image: linear-gradient(to left, rgb(0, 0, 0) 60%, rgba(0, 0, 0, .02) 95%);
        left: unset;
        right: 0;
        bottom: 0;
        width: 50%
    }
}

.cta__text {
    max-width: 400px
}

.cta__link {
    color: var(--primary-color);
    font-weight: 600
}

.integration {
    padding-block: 2rem;
    background: var(--background-default);
    border-top: 1px solid rgba(255, 255, 255, .1254901961)
}

@media (min-width: 768px) {
    .integration {
        padding-block: 80px
    }
}

.integration__container {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: flex-start
}

@media (min-width: 768px) {
    .integration__container {
        display: flex
    }
}

.integration__sidebar {
    min-width: 300px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    display: flex
}

.integration__info {
    align-self: stretch;
    height: 56px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex
}

.integration__label {
    align-self: stretch;
    color: #d5d5d8;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px
}

.integration__link {
    color: #2b64f6;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none
}

.integration__category {
    color: #2b64f6;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.integration__content {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    display: flex;
    margin-top: 1.5rem
}

@media (min-width: 768px) {
    .integration__content {
        margin-top: 0
    }
}

.integration__section {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.integration__title {
    align-self: stretch;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px
}

.integration__description {
    align-self: stretch;
    color: var(--text-normal);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px
}

.integration__features {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.integration__features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.integration__feature {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    display: flex
}

.integration__feature-title {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px
}

.integration__feature-description {
    color: var(--text-normal);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px
}

@charset "UTF-8";

.hero[data-astro-cid-uc5bzcip] {
    padding-block: 80px 40px;
    background: var(--background-default)
}

.hero__content[data-astro-cid-uc5bzcip] {
    text-align: center;
    max-width: 800px;
    margin: 0 auto
}

.hero__title[data-astro-cid-uc5bzcip] {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-loud);
    margin-bottom: 16px
}

.hero__subtitle[data-astro-cid-uc5bzcip] {
    font-size: 20px;
    color: var(--text-normal);
    line-height: 1.5
}

.integration-cards[data-astro-cid-uc5bzcip] {
    padding-block: 40px 80px;
    background: var(--background-default)
}

.integration-cards__grid[data-astro-cid-uc5bzcip] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px
}

@media (min-width: 768px) {
    .integration-cards__grid[data-astro-cid-uc5bzcip] {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width: 1024px) {
    .integration-cards__grid[data-astro-cid-uc5bzcip] {
        grid-template-columns: repeat(3, 1fr)
    }
}

.integration-card[data-astro-cid-uc5bzcip] {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--background-default) 100%, white 4%);
    border-radius: 12px;
    padding: 32px;
    transition: transform .3s ease, box-shadow .3s ease;
    text-decoration: none;
    height: 100%
}

.integration-card[data-astro-cid-uc5bzcip]:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px #00000026
}

.integration-card[data-astro-cid-uc5bzcip]:hover .integration-card__cta-icon[data-astro-cid-uc5bzcip] {
    transform: translate(4px)
}

.integration-card__header[data-astro-cid-uc5bzcip] {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.integration-card__logo[data-astro-cid-uc5bzcip] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-right: 16px;
    object-fit: contain
}

.integration-card__meta[data-astro-cid-uc5bzcip] {
    display: flex;
    flex-direction: column
}

.integration-card__title[data-astro-cid-uc5bzcip] {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-loud);
    margin: 0
}

.integration-card__category[data-astro-cid-uc5bzcip] {
    font-size: 14px;
    color: var(--primary-color);
    margin-top: 4px
}

.integration-card__subtitle[data-astro-cid-uc5bzcip] {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-normal);
    margin-bottom: 16px
}

.integration-card__description[data-astro-cid-uc5bzcip] {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 24px
}

.integration-card__features[data-astro-cid-uc5bzcip] {
    margin-top: auto;
    margin-bottom: 24px
}

.integration-card__features-title[data-astro-cid-uc5bzcip] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-loud)
}

.integration-card__features-list[data-astro-cid-uc5bzcip] {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.integration-card__feature[data-astro-cid-uc5bzcip] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-normal);
    padding: 8px 0
}

.integration-card__feature[data-astro-cid-uc5bzcip]:before {
    content: "•";
    color: var(--primary-color);
    font-size: 18px;
    margin-right: 8px
}

.integration-card__cta[data-astro-cid-uc5bzcip] {
    display: flex;
    align-items: center;
    margin-top: auto
}

.integration-card__cta-text[data-astro-cid-uc5bzcip] {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color)
}

.integration-card__cta-icon[data-astro-cid-uc5bzcip] {
    font-size: 18px;
    color: var(--primary-color);
    margin-left: 8px;
    transition: transform .2s ease
}

.integration-card {
    width: 100%;
    padding: 32px 24px;
    background: linear-gradient(0deg, #0b0e13 0% 100%), radial-gradient(48.9% 44.13% at 75.07% 9.07%, #ffffff03, #0000);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 32px;
    transition: transform .2s ease
}

.integration-card:hover {
    transform: translateY(-1px)
}

.integration-card__logo {
    height: 32px;
    display: flex;
    align-items: center
}

.integration-card__logo svg {
    max-width: 116px;
    max-height: 32px
}

.integration-card__content {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.integration-card__title {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    margin: 0
}

.integration-card__description {
    color: #a1a1aa;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: .25px;
    margin: 0
}

.integrations {
    padding: 80px 0;
    background: var(--background-default);
    border-top: 1px solid rgba(255, 255, 255, .1254901961)
}

.integrations__grid {
    display: grid;
    gap: 10px;
    max-width: 1024px;
    margin: 0 auto
}

@media (min-width: 768px) {
    .integrations__grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
    }
}

.callout {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

.callout__inner {
    flex: 1 1 0;
    height: 68px;
    padding: 14px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.callout__text {
    flex: 1 1 0;
    opacity: .8;
    color: color-mix(in srgb, var(--primary-color) 80%, white);
    font-size: 14px;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 19.6px;
    word-wrap: break-word
}

.hero__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 2rem;
    width: 100%
}

.hero__card {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.hero__card-title {
    color: #f7f8f8;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1
}

.hero__card-description {
    color: #d7d7d7;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6
}

.six-stage {
    --gap: 32px
}

.six-stage__grid {
    display: grid;
    margin-top: 64px;
    gap: var(--gap);
    grid-template-columns: repeat(1, 1fr)
}

@media (min-width: 768px) {
    .six-stage__grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.six-stage__link {
    margin-top: 1.5rem
}

.six-stage__item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 30px;
    position: relative
}

@media (min-width: 768px) {
    .six-stage__item {
        flex-direction: column
    }
}

.six-stage__item__icon {
    animation: rotateIcon 9s var(--power1-in) infinite;
    transform-origin: center
}

.six-stage__item__icon--0 {
    animation: none
}

.six-stage__item__icon--1 {
    animation-delay: 0s
}

.six-stage__item__icon--2 {
    animation-delay: 1.5s
}

.six-stage__item__icon--3 {
    animation-delay: 3s
}

.six-stage__item__icon--4 {
    animation-delay: 4.5s
}

.six-stage__item__icon--5 {
    animation-delay: 6s
}

.six-stage__item__line {
    position: absolute;
    z-index: -1;
    display: none;
    top: 24px;
    width: calc(100% + var(--gap));
    height: 1px;
    border: none
}

@media (min-width: 768px) {
    .six-stage__item__line {
        display: block
    }
}

.six-stage__content {
    height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px
}

.six-stage__title {
    color: #fff;
    font-size: 16px;
    font-family: Onest;
    font-weight: 500;
    line-height: 24px;
    word-wrap: break-word
}

.six-stage__description {
    color: #fff;
    font-size: 14px;
    font-family: Onest;
    font-weight: 400;
    line-height: 19.6px;
    word-wrap: break-word
}

@keyframes flowLine {
    0% {
        opacity: 1;
        transform: translate(0)
    }

    15% {
        opacity: 1;
        transform: translate(90%)
    }

    20% {
        opacity: 0;
        transform: translate(100%)
    }

    25% {
        transform: translate(0)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes rotateIcon {
    0% {
        transform: scale(1) rotate(0) translateY(0);
        filter: brightness(1)
    }

    14.4% {
        transform: scale(1) rotate(0) translateY(0);
        filter: brightness(1)
    }

    14.7% {
        transform: scale(.9) rotate(-3deg) translateY(2px);
        filter: brightness(1.2)
    }

    15% {
        transform: scale(1.2) rotate(6deg) translateY(-4px)
    }

    16% {
        transform: scale(1.1) rotate(4deg) translateY(-2px);
        filter: brightness(1.3)
    }

    17% {
        transform: scale(1.05) rotate(-2deg) translateY(1px);
        filter: brightness(1.2)
    }

    19% {
        transform: scale(1.02) rotate(1deg) translateY(-.5px);
        filter: brightness(1.1)
    }

    20% {
        transform: scale(1) rotate(0) translateY(0);
        filter: brightness(1)
    }

    to {
        transform: scale(1) rotate(0) translateY(0);
        filter: brightness(1)
    }
}

.pos-feature {
    margin-top: .5rem;
    display: flex;
    gap: 14px
}

.pos-feature:first-of-type {
    margin-top: 1rem
}

.pos-feature:last-of-type {
    margin-bottom: 1rem
}

.pos-feature svg {
    flex-shrink: 0
}

.image-text {
    overflow: hidden
}

.image-text--image-left .image-text__wrapper {
    grid-template-areas: "img img img img img img content content content content"
}

.image-text--image-left img {
    float: right
}

@media (min-width: 768px) {
    .image-text__wrapper {
        gap: 2rem;
        display: grid;
        grid-template-columns: img content;
        grid-template-areas: " content content content content content img img img img img img"
    }
    .image-text__inner { 
        max-width: 600px;
      
    }
}

@media (min-width: 1280px) {
    .image-text__wrapper {
        gap: 5rem
    }
}

.image-text__text-box {
    display: flex;
    padding: .75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .875rem;
    align-self: stretch;
    border-radius: .375rem;
    background: #fafafa;
    margin-top: 2rem
}

.image-text__text-box__head {
    display: flex;
    gap: .62rem
}

.image-text__text-box__title {
    color: var(--text-loud);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -.0625rem
}

.image-text__text-box__body {
    color: var(--text-normal);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -.03rem
}

.image-text__content {
    color: #fff;
    letter-spacing: -.03rem
}

.image-text__content h2,
.image-text__content h3,
.image-text__content h4,
.image-text__content h5,
.image-text__content h6 {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 110%
}

.image-text__content p {
    margin-top: .69rem;
    color: var(--text-normal);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%
}

.image-text__highlight {
    display: flex;
    justify-content: center;
    width: fit-content;
    padding: .625rem 2.625rem;
    align-items: center;
    gap: .57663rem;
    border-radius: .57663rem;
    background: linear-gradient(180deg, #f0f6fe, #e7f1fd);
    box-shadow: 0 0 0 1px var(--primary-color), 0 0 0 2px #fff, 0 0 0 3px #096df24d
}

.image-text__highlight span {
    display: block;
    color: var(--primary-color);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%
}

.image-text__image {
    border-radius: 1rem;
    padding-block: 2.5rem 0;
    grid-area: img;
    max-height: 400px;
}

.image-text__image--background {
    background: var(--background-highlight)
}

@media screen and (min-width: 768px) {
    .image-text__image {
        padding-block: 0
    }
}

.image-text__image img {
    width: 100%;
    height: 100%
}

@media (min-width: 768px) {
    .image-text__image {
        margin-top: none
    }
}

.image-text__inner {
    grid-area: content
}

.image-text__inner>*:not(:first-child) {
    margin-top: 1rem
}

.image-text__title {
    color: #031732;
    font-size: 3.4375rem;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -.17188rem
}

.image-text__body {
    color: var(--text-normal);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 137.5%;
    letter-spacing: -.0225rem
}

.image-text__content .migration__cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 2fr))
}

.image-text__content .migration__card-title {
    margin-top: 1rem;
    font-size: 1rem
}

.image-text__content .migration__card-description {
    font-size: .875rem
}

.image-text__content .migration__card-icon {
    color: var(--primary-color)
}

.image-text__content .migration__card-icon svg {
    width: 28px;
    height: 28px
}

.image-text__content .post-support-card {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.85rem
}

.image-text__content .post-support-card__title {
    color: #fff;
    font-size: 1rem;
    font-weight: 500
}

.image-text__content .post-support-card__description {
    color: var(--text-normal);
    font-size: .875rem;
    font-style: normal;
    margin-top: .75rem
}

.team__title {
    margin-top: 5rem
}

.team__grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24.375rem), 500px));
    gap: 1.5rem;
    width: 100%
}

.team__roles {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 2rem;
    width: 100%
}

.team__role-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8125rem;
    width: 100%
}

.team__role-icon {
    width: 2.5rem;
    height: 2.5rem;
    position: relative
}

.team__role-title {
    color: #f7f8f8;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1
}

.team__role-description {
    color: #d7d7d7;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6
}

.team__card {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    aspect-ratio: 3/4;
    border: 1px solid rgba(255, 255, 255, .062745098)
}

.team__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.team__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--background-default) 75%);
    pointer-events: none
}

.team__card-wrapper {
    position: absolute;
    inset: 0;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.5rem
}

.team__card-content {
    padding: .0625rem 0;
    display: flex;
    align-items: center
}

.team__card-role {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5
}

.team__card-footer {
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .1)
}

.team__card-name {
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5
}

.team__card-title {
    color: var(--text-normal);
    font-size: .875rem;
    margin-top: .1rem;
    line-height: 1.5
}

.custom-cards__list {
    margin-top: 3.5rem;
    color: #fff;
    gap: 3rem;
    margin-inline: auto
}

.custom-cards__list--column,
.custom-cards__list--row {
    flex-direction: column
}

@media (min-width: 768px) {
    .custom-cards__list--row {
        flex-direction: row
    }
}

.custom-card {
    flex: 1
}

.custom-card>*:not(:first-child) {
    margin-top: .5rem
}

.custom-card__title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    word-wrap: break-word
}

.custom-card__description {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 150%;
    word-wrap: break-word
}

.mblocks {
    display: grid
}

@media (min-width: 768px) {
    .mblocks {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem
    }
}

.offline-mode__features {
    display: inline-flex;
    flex-direction: column;
    gap: 2rem
}

@media (min-width: 640px) {
    .offline-mode__features {
        flex-direction: row;
        gap: 3rem
    }
}

.offline-mode__features-description {
    margin-top: 2rem;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    line-height: 130%;
    font-weight: 500;
    color: var(--text-muted);
    word-wrap: break-word
}

.offline-mode__feature {
    flex-direction: column;
    gap: 10px;
    display: inline-flex
}

.offline-mode__feature-title {
    align-self: stretch;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    word-wrap: break-word
}

.offline-mode__feature-description {
    opacity: .8;
    font-size: 1rem;
    line-height: 130%;
    font-weight: 400;
    word-wrap: break-word
}

@media (min-width: 640px) {
    .offline-mode__feature-image {
        display: none
    }
}

.fast-to-build__image {
    max-width: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    margin-top: -1rem !important
}

@media (min-width: 1024px) {
    .fast-to-build__image {
        margin-top: -3rem !important
    }
}

.icon {
    --base-hue: 336;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: conic-gradient(from 180deg at 50% 50%, hsl(var(--base-hue), 100%, 70%), hsl(var(--base-hue), 71%, 54%) 360deg), linear-gradient(180deg, #0000 33%, #0000001a);
    box-shadow: 0 0 0 1px hsl(var(--base-hue), 55%, 44%);
    border-radius: 9.6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .3137254902);
    justify-content: center;
    align-items: center;
    display: flex
}

.icon--blue {
    --base-hue: 228
}

.icon--teal {
    --base-hue: 156
}

.icon--orange {
    --base-hue: 39
}

.icon--purple {
    --base-hue: 256
}

.icon--sky {
    --base-hue: 200
}

.icon__inner {
    display: flex
}

.icon__inner svg {
    width: 28px;
    height: 28px
}

.statistics__content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 2rem 0;
    margin-top: 2rem
}

@media (min-width: 768px) {
    .statistics__content {
        flex-direction: row;
        align-items: center;
        gap: 7.5rem
    }
}

.statistics__title {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 500;
    font-family: var(--font-heading), sans-serif;
    max-width: 518px
}

@media (min-width: 768px) {
    .statistics__title {
        font-size: 2.5rem
    }
}

.statistics__grid {
    display: grid;
    gap: 2rem
}

@media (min-width: 768px) {
    .statistics__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem
    }
}

.statistics__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    margin-top: 2rem
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.stat-card__value {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: flex-end;
    gap: .125rem;
    color: transparent;
    background-clip: text;
    background: linear-gradient(to right, #f7f8f8 10%, #fff9);
    padding-bottom: 2px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    padding-right: 2px;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, .5))
}

.stat-card__suffix {
    font-size: 1.3125rem;
    font-weight: 600
}

.stat-card__description {
    color: var(--text-loud);
    font-size: .875rem;
    line-height: 1.8;
    font-weight: 400;
    font-family: var(--font-heading), sans-serif
}

.text-white {
    color: var(--text-loud)
}

.text-gray {
    color: var(--text-muted)
}

.migration-two__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    margin-top: 2rem
}

.seamless-solutions__img {
    width: 100%;
    margin-top: 2rem;
    height: 100%;
    border-radius: 1rem
}

.seamless-solutions__cards {
    margin-top: 2rem
}

.seamless-solutions__cards .custom-cards__list {
    color: var(--primary-color)
}

@media (min-width: 768px) {
    .seamless-solutions__cards .custom-cards__list {
        grid-template-columns: repeat(3, 1fr);
        display: grid
    }
}

.ai-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem
}

.ai-feature {
    --color: var(--primary-color)
}

.ai-feature__title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--color), transparent 90%);
    border-radius: 12px;
    border: 1px color-mix(in srgb, var(--color), transparent 85%) solid;
    color: var(--color)
}

.ai-feature__title span {
    font-size: 16px;
    font-weight: 600;
    line-height: 20.8px
}

.ai-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.ai-feature__description {
    color: #f0f0f0;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    margin-top: 1rem
}

.mblocks {
    display: grid
}

@media (min-width: 768px) {
    .mblocks {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem
    }
}

.offline-mode__features {
    display: inline-flex;
    flex-direction: column;
    gap: 2rem
}

@media (min-width: 640px) {
    .offline-mode__features {
        flex-direction: row;
        gap: 3rem
    }
}

.offline-mode__features-description {
    margin-top: 2rem;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    line-height: 130%;
    font-weight: 500;
    color: var(--text-muted);
    word-wrap: break-word
}

.offline-mode__feature {
    flex-direction: column;
    gap: 10px;
    display: inline-flex
}

.offline-mode__feature-title {
    align-self: stretch;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    word-wrap: break-word
}

.offline-mode__feature-description {
    opacity: .8;
    font-size: 1rem;
    line-height: 130%;
    font-weight: 400;
    word-wrap: break-word
}

@media (min-width: 640px) {
    .offline-mode__feature-image {
        display: none
    }
}

.fast-to-build__image {
    max-width: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    margin-top: -1rem !important
}

@media (min-width: 1024px) {
    .fast-to-build__image {
        margin-top: -3rem !important
    }
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #fff;
    text-align: center;
    word-wrap: break-word;
    box-shadow: 0 2px 2px #0000000a;
    text-decoration: none;
    width: 100%;
    transition: background .2s ease
}

@media (min-width: 768px) {
    .btn {
        width: auto
    }
}

.btn--ghost {
    background: transparent;
    border: 1px solid white;
    transition: background .2s ease, color .2s ease
}

.btn--ghost:hover {
    background: #fff;
    color: #000
}

.btn--small {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 14px
}

.btn--primary {
    background: var(--primary-color);
    color: var(--button-text-color)
}

.btn--primary:hover {
    filter: brightness(1.1)
}

.btn--none {
    background: none;
    padding: 0;
    color: var(--primary-color)
}

.btn--gray {
    background: #f3f3f3;
    color: #000
}

.btn--gray:hover {
    background: #e6e6e6
}

.btn--secondary {
    background: #000
}

.wrapper {
    width: 100%;
    max-width: var(--container-maxWidth);
    margin-inline: auto
}

.cta-blog {
    width: 100%;
    min-width: 320px;
    height: 100%;
    padding: 24px;
    background: linear-gradient(0deg, #ffffff05 0% 100%), radial-gradient(49.97% 18.86% at 100.26% 9.63%, #ffffff05, #fff0);
    border-radius: 6px;
    border: 1px solid #232326;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px
}

.cta-blog__title {
    align-self: stretch;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin: 0
}

.cta-blog__divider {
    width: 262.78px;
    height: 0;
    border: 1px solid #232326
}

.cta-blog__content {
    align-self: stretch;
    height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px
}

.cta-blog__buttons {
    align-self: stretch;
    height: 94px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.cta-blog__button {
    padding: 8px 12px;
    height: 40px;
    font-size: 14px;
    line-height: 14px;
    border-radius: 4px
}

.cta-blog__contact {
    display: flex;
    gap: 4px
}

.cta-blog__text {
    color: #d5d5d8;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.2px
}

.cta-blog__email {
    color: #2b75fd;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.2px;
    text-decoration: none
}

.cta-blog__email:hover {
    text-decoration: underline
}

.blog-post {
    padding-block: 2rem;
    background: var(--background-default);
    border-top: 1px solid rgba(255, 255, 255, .1254901961)
}

@media (min-width: 768px) {
    .blog-post {
        padding-block: 80px
    }
}

.blog-post__container {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
    gap: 2rem;
    flex-direction: column
}

@media (min-width: 768px) {
    .blog-post__container {
        flex-direction: row
    }
}

.blog-post__sidebar {
    min-width: 300px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    display: flex
}

.blog-post__info {
    align-self: stretch;
    height: 56px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex
}

.blog-post__label {
    align-self: stretch;
    color: #d5d5d8;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px
}

.blog-post__link {
    color: #2b64f6;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none
}

.blog-post__category {
    color: #2b64f6;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.blog-post__content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    display: flex;
    margin-top: 1.5rem
}

@media (min-width: 768px) {
    .blog-post__content {
        margin-top: 0
    }
}

.blog-post__section {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.blog-post__title {
    align-self: stretch;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px
}

.blog-post__description {
    align-self: stretch;
    color: var(--text-normal);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px
}

.blog-post__features {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.blog-post__features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.blog-post__feature {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    display: flex
}

.blog-post__feature-title {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px
}

.blog-post__feature-description {
    color: var(--text-normal);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px
}

.custom-hero {
    padding-block: 4.25rem;
    gap: 1.5rem;
    display: flex
}

@media (min-width: 640px) {
    .custom-hero {
        gap: 2rem;
        justify-content: flex-start;
        align-items: center
    }
}

.custom-hero__line {
    z-index: -1;
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: -140px;
    width: 906px
}

.custom-hero__image {
    width: 72px;
    height: 72px;
    border-radius: 14px
}

.custom-hero__content {
    flex: 1 1 0;
    max-width: 920px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex
}

.custom-hero__title {
    color: transparent;
    background-clip: text;
    background: linear-gradient(to bottom, #f7f8f8 10%, #e3e3e3 150%);
    padding-bottom: 4px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, .5));
    font-size: 44px;
    font-weight: 600;
    line-height: 52.8px;
    letter-spacing: -.025em;
    word-wrap: break-word;
    margin: 0
}

.custom-hero__subtitle-wrapper {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex
}

.custom-hero__subtitle {
    flex: 1 1 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 33px;
    word-wrap: break-word
}

.pricing {
    --border-color: hsl(210, 3%, 16%);
    --background-color: hsl(210, 8%, 9%);
    --highlighted-color: color-mix(in hsl, var(--background-color) 100%, white 5%)
}

.pricing-line {
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.pricing__cards {
    margin-top: 3rem;
    display: flex;
    position: relative;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(1, 1fr)
}

.pricing__cards .pricing__card:not(:first-child) {
    border-top: 1px solid var(--border-color)
}

@media (min-width: 640px) {
    .pricing__cards {
        grid-template-columns: repeat(2, 1fr)
    }

    .pricing__cards .pricing__card:not(:first-child) {
        border-top: none
    }

    .pricing__cards .pricing__card:last-child {
        border-top: 1px solid var(--border-color)
    }
}

@media (min-width: 768px) {
    .pricing__cards {
        grid-template-columns: repeat(4, 1fr)
    }

    .pricing__cards .pricing__card:last-child {
        border-top: none
    }
}

.pricing__card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    padding-bottom: 24px
}

.pricing__card:first-child {
    border-right: 1px solid var(--border-color)
}

.pricing__card--highlighted {
    background-color: var(--highlighted-color)
}

@media (min-width: 640px) {
    .pricing__card--highlighted {
        border-top: 1px solid var(--border-color)
    }
}

@media (min-width: 768px) {
    .pricing__card--highlighted {
        border: 1px solid var(--border-color);
        border-top: 1px solid var(--border-color) !important;
        margin-block: -16px -34px;
        border-radius: 12px;
        box-shadow: 0 4px 24px #0003
    }
}

.pricing__header {
    align-self: stretch;
    min-height: 104px;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px
}

.pricing__title {
    color: var(--text-loud);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 32px
}

.pricing__price {
    min-height: 24px;
    padding: 4px 0;
    display: flex;
    align-items: center
}

.pricing__currency {
    color: var(--text-loud);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px
}

.pricing__amount--monthly,
.pricing__amount--annual {
    color: var(--text-loud);
    font-size: 16px;
    font-weight: 600;
    line-height: 16px
}

.pricing__amount--annual {
    display: none
}

.pricing__period {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    margin-left: 4px
}

.pricing__features {
    align-self: stretch;
    flex: 1;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.pricing__feature {
    display: flex;
    align-items: center;
    gap: 12px
}

.pricing__feature-icon {
    width: 16px;
    height: 16px;
    position: relative
}

.pricing__feature-text {
    color: var(--text-loud);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px
}

.pricing__cta {
    padding-inline: 1.5rem;
    width: 100%
}

.pricing__button {
    width: 100%;
    display: block;
    background: #28282c;
    box-shadow: 0 0 1px #00000014;
    border: 1px solid #3e3e44;
    color: #f7f8f8;
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
    transition: filter .1s ease-out
}

.pricing__button:hover {
    filter: brightness(1.5)
}

.pricing__secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 21px
}

.pricing__secondary a {
    color: inherit;
    text-decoration: underline
}

.pricing__comparison {
    margin-top: 64px;
    position: relative
}

@media (max-width: 767px) {
    .pricing__comparison {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-inline: -16px;
        padding-inline: 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 16px
    }

    .pricing__comparison::-webkit-scrollbar {
        display: none
    }
}

.pricing__comparison-header {
    position: relative;
    z-index: 4;
    align-self: stretch;
    border-bottom: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 78px;
    min-width: 768px
}

@media (min-width: 768px) {
    .pricing__comparison-header {
        position: sticky;
        top: 0;
        min-width: auto
    }
}

.pricing__comparison-title {
    padding: 27.5px 25px;
    color: var(--text-loud);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    background: var(--background-default)
}

.pricing__comparison-title--active {
    background: var(--highlighted-color);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border: 1px solid var(--border-color);
    border-bottom: none
}

.pricing__comparison-features {
    min-width: 768px;
    width: 100%
}

@media (min-width: 768px) {
    .pricing__comparison-features {
        min-width: auto
    }
}

.pricing__comparison-row {
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.pricing__comparison-cell {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: max(.25vw, 6px);
    flex-wrap: wrap
}

.pricing__comparison-cell--business {
    background: var(--highlighted-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color)
}

.pricing__comparison-check {
    width: 16px;
    height: 16px;
    position: relative;
    color: var(--primary-color)
}

.pricing__comparison-check--disabled {
    color: var(--text-muted);
    opacity: .4
}

.pricing__comparison-icon {
    width: 14px;
    height: 14px;
    position: absolute;
    left: 1px;
    top: 1px;
    background: var(--primary-color)
}

.pricing__comparison-check--disabled .pricing__comparison-icon {
    background: #62666d
}

.pricing__comparison-value {
    color: var(--text-loud);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px
}

.pricing__comparison-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px
}

.pricing__billing {
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center
}

.pricing__billing-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.pricing__billing-input:checked~.pricing__billing-label .pricing__billing-toggle {
    background: var(--primary-color)
}

.pricing__billing-input:checked~.pricing__billing-label .pricing__billing-toggle .pricing__billing-handle {
    transform: translate(12px)
}

.pricing__billing-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer
}

.pricing__billing-text {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px
}

.pricing__billing-toggle {
    width: 32px;
    height: 20px;
    padding: 3px 4px 3px 3px;
    background: #28282c;
    border-radius: 9999px;
    transition: background-color .3s ease
}

.pricing__billing-handle {
    width: 14px;
    height: 14px;
    background: #fff;
    box-shadow: 0 4px 24px #0003;
    border-radius: 9999px;
    transition: transform .3s ease
}

.pricing:has(.pricing__billing-input:checked) .pricing__amount--monthly {
    display: none
}

.pricing:has(.pricing__billing-input:checked) .pricing__amount--annual {
    display: inline
}

.signup-wrapper {
    margin-top: 1rem;
    display: flex;
    gap: 2.625rem;
    margin-top: 3.875rem;
    flex-direction: column
}

@media (min-width: 768px) {
    .signup-wrapper {
        flex-direction: row
    }
}

.signup-image {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1254901961);
    order: 2;
    width: 100%;
    object-fit: cover
}

@media (min-width: 768px) {
    .signup-image {
        order: 1
    }
}

.form {
    width: 100%;
    gap: 2rem
}

.form__header {
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    text-align: center
}

.form button {
    background-color: var(--primary-color);
    padding: 14px 20px;
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    width: 100%;
    text-align: center;
    transition: background-color .2s ease
}

@media (min-width: 768px) {
    .form button {
        width: auto
    }
}

.form button:hover {
    background-color: color-mix(in srgb, var(--primary-color) 100%, var(--background-default) 40%)
}

.form__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem
}

.form__footer {
    margin-top: 1rem;
    display: flex
}

.integration {
    padding-block: 2rem;
    background: var(--background-default);
    border-top: 1px solid rgba(255, 255, 255, .1254901961)
}

@media (min-width: 768px) {
    .integration {
        padding-block: 80px
    }
}

.integration__container {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: flex-start
}

@media (min-width: 768px) {
    .integration__container {
        display: flex
    }
}

.integration__sidebar {
    min-width: 300px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    display: flex;
    top: 140px
}

.integration__info {
    align-self: stretch;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex;
    margin-bottom: 16px
}

.integration__label {
    align-self: stretch;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px
}

.integration__link {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none
}

.integration__link:hover {
    text-decoration: underline
}

.integration__category {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.integration__nav {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex;
    margin-top: 16px
}

.integration__nav-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%
}

.integration__nav-item {
    color: var(--text-normal);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    padding: 4px 0;
    transition: all .2s ease
}

.integration__nav-item:hover {
    color: var(--primary-color)
}

.integration__content {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    display: flex;
    margin-top: 1.5rem
}

@media (min-width: 768px) {
    .integration__content {
        margin-top: 0;
        margin-left: 60px
    }
}

.integration__section {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: flex;
    padding-top: 16px
}

.integration__section:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, .05);
    margin-top: 16px;
    padding-top: 32px
}

.integration__title {
    align-self: stretch;
    color: var(--text-loud);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 8px
}

.integration__description {
    align-self: stretch;
    color: var(--text-normal);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

.integration__description p {
    margin-bottom: 16px
}

.integration__description h4 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-loud);
    margin: 24px 0 8px
}

.integration__description strong {
    font-weight: 600
}

.integration__table-wrapper {
    width: 100%;
    margin: 24px 0
}

.integration__table-wrapper h4 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-loud);
    margin-bottom: 12px
}

.integration__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px
}

.integration__table th {
    background: color-mix(in srgb, var(--background-default) 100%, white 8%);
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-loud);
    border: 1px solid rgba(255, 255, 255, .1)
}

.integration__table td {
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--text-normal)
}

.integration__table tr:nth-child(2n) td {
    background: color-mix(in srgb, var(--background-default) 100%, white 3%)
}

.integration__note {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
    margin: 8px 0
}

.integration__list {
    list-style-type: disc;
    padding-left: 24px;
    margin: 8px 0 16px
}

.integration__list li {
    margin-bottom: 8px;
    color: var(--text-normal)
}