body.bg-darkBg,
.bg-darkBg {
    background-color: #09090b;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-width: 100%;
    padding-top: var(--fnetic-nav-height, 5rem);
}

html {
    --fnetic-nav-height: 5rem;
    scrollbar-gutter: stable;
}

body>nav,
nav[data-fnetic-nav="true"] {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    will-change: background-color, border-color, box-shadow, backdrop-filter;
    transition:
        background-color .34s ease,
        border-color .34s ease,
        box-shadow .34s ease,
        backdrop-filter .34s ease,
        -webkit-backdrop-filter .34s ease;
}

body>nav>div:first-child,
nav[data-fnetic-nav="true"]>div:first-child {
    transition: height .36s cubic-bezier(.16, 1, .3, 1);
}

html.fnetic-nav-at-top body>nav,
html.fnetic-nav-at-top nav[data-fnetic-nav="true"] {
    background: rgba(9, 9, 11, .38) !important;
    border-color: rgba(255, 255, 255, .045) !important;
    box-shadow: none;
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}

html.fnetic-nav-scrolled body>nav,
html.fnetic-nav-scrolled nav[data-fnetic-nav="true"] {
    background: rgba(9, 9, 11, .84) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
}

html.fnetic-nav-scrolled body>nav>div:first-child,
html.fnetic-nav-scrolled nav[data-fnetic-nav="true"]>div:first-child {
    height: 4.5rem;
}

@media (max-width: 1023.98px) {

    html.fnetic-nav-scrolled body>nav>div:first-child,
    html.fnetic-nav-scrolled nav[data-fnetic-nav="true"]>div:first-child {
        height: 4.75rem;
    }
}

@media (max-width: 767.98px) {
    footer {
        text-align: center;
    }

    footer>div>.grid {
        justify-items: center;
    }

    footer>div>.grid>div {
        width: 100%;
        max-width: 24rem;
    }

    footer>div>.grid>div>.flex,
    footer a.flex {
        justify-content: center;
    }

    footer p.max-w-sm {
        margin-left: auto;
        margin-right: auto;
    }

    footer ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer>div>.pt-8.flex {
        flex-direction: column !important;
        justify-content: center;
        text-align: center;
    }
}

.code-font,
.font-mono,
.font-mono-tech {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.bg-darkBg\/70 {
    background-color: rgba(9, 9, 11, 0.7);
}

.bg-darkBg\/95 {
    background-color: rgba(9, 9, 11, 0.95);
}

.bg-darkCard {
    background-color: #121214;
}

.border-darkBorder {
    border-color: #1f1f23;
}

.border-darkBorder\/30 {
    border-color: rgba(31, 31, 35, 0.3);
}

.border-darkBorder\/60 {
    border-color: rgba(31, 31, 35, 0.6);
}

.text-brand-400 {
    color: #5b9beb;
}

.text-brand-500 {
    color: #5b9beb;
}

.text-brand-600 {
    color: #2556a8;
}

.bg-brand-400 {
    background-color: #5b9beb;
}

.bg-brand-500 {
    background-color: #326dcd;
}

.bg-brand-600 {
    background-color: #2556a8;
}

.btn-primary,
.accent-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #5b9beb, #326dcd);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(50, 109, 205, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition:
        transform 0.24s ease,
        background 0.24s ease,
        border-color 0.24s ease,
        color 0.24s ease,
        box-shadow 0.24s ease;
}

.btn-primary:hover,
.accent-cta:hover {
    background: linear-gradient(135deg, #6aa8f0, #326dcd);
    box-shadow: 0 18px 42px rgba(50, 109, 205, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(24, 24, 27, 0.80);
    border: 1px solid #1f1f23;
    color: #d4d4d8;
    transition:
        transform 0.24s ease,
        background-color 0.24s ease,
        border-color 0.24s ease,
        color 0.24s ease,
        box-shadow 0.24s ease;
}

.btn-secondary:hover {
    background: rgba(50, 109, 205, 0.10);
    border-color: rgba(91, 155, 235, 0.50);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(50, 109, 205, 0.16);
    transform: translateY(-1px);
}

.btn-disabled,
.btn-disabled:hover,
.btn-disabled:disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(39, 39, 42, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #71717a;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.text-zinc-500 {
    color: #9ca3af;
}

.text-zinc-400 {
    color: #a1a1aa;
}

[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 760ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-aos="fade-up"] {
    transform: translate3d(0, 18px, 0);
}

[data-aos="fade-right"] {
    transform: translate3d(-18px, 0, 0);
}

[data-aos="fade-left"] {
    transform: translate3d(18px, 0, 0);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.bg-brand-500\/5 {
    background-color: rgba(50, 109, 205, 0.05);
}

.bg-brand-500\/10 {
    background-color: rgba(50, 109, 205, 0.1);
}

.bg-brand-500\/20 {
    background-color: rgba(50, 109, 205, 0.2);
}

.border-brand-400\/20 {
    border-color: rgba(91, 155, 235, 0.2);
}

.border-brand-400\/50 {
    border-color: rgba(91, 155, 235, 0.5);
}

.border-brand-500\/20 {
    border-color: rgba(50, 109, 205, 0.2);
}

.border-brand-500\/30 {
    border-color: rgba(50, 109, 205, 0.3);
}

.hover\:border-brand-400\/50:hover {
    border-color: rgba(91, 155, 235, 0.5);
}

.hover\:border-brand-500\/30:hover {
    border-color: rgba(50, 109, 205, 0.3);
}

.hover\:bg-brand-500:hover {
    background-color: #326dcd;
}

.hover\:bg-brand-500\/10:hover {
    background-color: rgba(50, 109, 205, 0.1);
}

.hover\:text-brand-400:hover {
    color: #5b9beb;
}

.focus\:border-brand-500:focus {
    border-color: #326dcd;
}