/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-tracking: initial
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: "Google Sans Flex", system-ui, -apple-system, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --font-weight-semibold: 600;
        --tracking-widest: .1em;
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 16px;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --color-brand: #0064e0;
        --color-brand-deep: #001e43;
        --color-heading: #001e43;
        --color-text: #2d3748;
        --color-text-muted: #898989;
        --color-bg: #fff;
        --color-surface: #f7f7f7;
        --color-page-bg: #f5f5f5;
        --color-footer-bg: #001e43;
        --color-border: #222a3514;
        --radius-pill: 9999px
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

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

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }

    [data-theme=dark] {
        --color-heading: #d8eeff;
        --color-text: #c0d8f0;
        --color-text-muted: #e6f0fc;
        --color-bg: #060c18;
        --color-surface: #0c1625;
        --color-border: #ffffff12;
        --color-footer-bg: #020810;
        --color-page-bg: #04070f;
        --shadow-card: #0000008c 0px 1px 5px -4px, #ffffff0f 0px 0px 0px 1px, #0000004d 0px 4px 8px 0px;
        --shadow-card-hover: #000000a6 0px 4px 12px -4px, #ffffff14 0px 0px 0px 1px, #0006 0px 8px 20px 0px
    }

    :root {
        --shadow-card: #131316b3 0px 1px 5px -4px, #222a3514 0px 0px 0px 1px, #222a350d 0px 4px 8px 0px;
        --shadow-card-hover: #131316cc 0px 4px 12px -4px, #222a351a 0px 0px 0px 1px, #222a3514 0px 8px 20px 0px;
        --shadow-btn-inset: #fff3 0px 2px 0px inset;
        --nav-height: 68px;
        --container: 1200px;
        --transition-fast: .15s ease;
        --transition-base: .25s ease;
        --transition-slow: .4s ease
    }

    @font-face {
        font-family: Google Sans Flex;
        src: url(/fonts/google-sans-flex-100.woff2)format("woff2");
        font-weight: 100;
        font-display: swap
    }

    @font-face {
        font-family: Google Sans Flex;
        src: url(/fonts/google-sans-flex-200.woff2)format("woff2");
        font-weight: 200;
        font-display: swap
    }

    @font-face {
        font-family: Google Sans Flex;
        src: url(/fonts/google-sans-flex-300.woff2)format("woff2");
        font-weight: 300;
        font-display: swap
    }

    @font-face {
        font-family: Google Sans Flex;
        src: url(/fonts/google-sans-flex-400.woff2)format("woff2");
        font-weight: 400;
        font-display: swap
    }

    @font-face {
        font-family: Google Sans Flex;
        src: url(/fonts/google-sans-flex-500.woff2)format("woff2");
        font-weight: 500;
        font-display: swap
    }

    @font-face {
        font-family: Google Sans Flex;
        src: url(/fonts/google-sans-flex-600.woff2)format("woff2");
        font-weight: 600;
        font-display: swap
    }

    @font-face {
        font-family: Google Sans Flex;
        src: url(/fonts/google-sans-flex-700.woff2)format("woff2");
        font-weight: 700;
        font-display: swap
    }

    @font-face {
        font-family: Google Sans Flex;
        src: url(/fonts/google-sans-flex-800.woff2)format("woff2");
        font-weight: 800;
        font-display: swap
    }

    @font-face {
        font-family: Google Sans Flex;
        src: url(/fonts/google-sans-flex-900.woff2)format("woff2");
        font-weight: 900;
        font-display: swap
    }

    html {
        scroll-behavior: auto;
        -webkit-text-size-adjust: 100%;
        color-scheme: light dark;
        text-wrap: pretty;
        font-size: 16.5px
    }

    body {
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: var(--color-text);
        background: var(--color-page-bg);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.65;
        transition: background-color .3s, color .3s
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        letter-spacing: -.05em;
        color: var(--color-heading);
        font-weight: 600;
        line-height: 1.1
    }

    p {
        color: var(--color-text-muted)
    }

    strong {
        color: var(--color-heading);
        font-weight: 600
    }

    .no-js .reveal-tag,
    .no-js .reveal-title,
    .no-js .reveal-subtitle,
    .no-js .reveal-actions,
    .no-js .reveal-card,
    .no-js .reveal-section {
        opacity: 1 !important;
        transform: none !important
    }
}

@layer components {
    .container {
        width: 100%;
        padding-inline: calc(var(--spacing) * 6);
        max-width: var(--container);
        margin-inline: auto
    }

    .section {
        padding-block: calc(var(--spacing) * 24)
    }

    .btn {
        cursor: pointer;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        --tw-leading: 1;
        --tw-font-weight: var(--font-weight-semibold);
        line-height: 1;
        font-weight: var(--font-weight-semibold);
        white-space: nowrap;
        border-radius: var(--radius-md);
        border: none;
        padding: 16px 32px;
        font-size: 1rem;
        text-decoration-line: none;
        transition: transform .2s cubic-bezier(.25, .46, .45, .94), box-shadow .2s;
        display: inline-flex
    }

    .btn__content {
        align-items: center;
        gap: calc(var(--spacing) * 2);
        z-index: 3;
        display: flex;
        position: relative
    }

    .btn__content svg {
        transition: transform .3s
    }

    .btn--dark {
        --_bg: #001e43;
        --_star: white;
        background: var(--_bg);
        color: #fff;
        isolation: isolate;
        position: relative;
        overflow: hidden;
        box-shadow: 0 6px 22px -6px #0064e059
    }

    [data-theme=dark] .btn--dark {
        --_bg: #def;
        --_star: #0040a0;
        color: #001e43;
        box-shadow: 0 6px 22px -6px #0064e040
    }

    .btn--dark:focus-visible {
        outline: 2px solid var(--color-brand);
        outline-offset: 4px
    }

    .btn--dark:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 28px -6px #0064e073
    }

    [data-theme=dark] .btn--dark:hover {
        box-shadow: 0 10px 28px -6px #0064e04d
    }

    .btn--dark:active {
        transform: scale(.97)
    }

    .btn--dark:before {
        content: "";
        z-index: 0;
        background: conic-gradient(from 0deg, var(--_bg) 0deg, #0064e0 60deg, #38bdf8 120deg, var(--_bg) 180deg, #818cf8 240deg, #0064e0 300deg, var(--_bg) 360deg);
        border-radius: calc(var(--radius-md) + 3px);
        filter: blur(3px);
        opacity: .45;
        transition: opacity .35s, filter .35s;
        animation: 5s linear infinite btn-nebula;
        position: absolute;
        inset: -3px
    }

    .btn--dark:hover:before {
        opacity: .7;
        filter: blur(2.5px);
        animation-duration: 2.5s
    }

    .btn--dark:after {
        content: "";
        background: var(--_bg);
        border-radius: calc(var(--radius-md) - 1.5px);
        z-index: 1;
        position: absolute;
        inset: 1.5px
    }

    .btn__stars {
        z-index: 2;
        pointer-events: none;
        background-image: radial-gradient(circle at 18% 28%, var(--_star) 1px, transparent 1.5px), radial-gradient(circle at 78% 68%, var(--_star) 1px, transparent 1.5px), radial-gradient(circle at 52% 82%, var(--_star) .5px, transparent 1px), radial-gradient(circle at 66% 18%, var(--_star) .5px, transparent 1px), radial-gradient(circle at 35% 55%, var(--_star) .5px, transparent 1px);
        opacity: .15;
        transition: opacity .35s;
        position: absolute;
        inset: 0
    }

    .btn--dark:hover .btn__stars {
        opacity: .5;
        animation: 5s linear infinite alternate btn-stars
    }

    .btn--dark:hover .btn__content svg {
        transform: translate(3px)
    }

    @keyframes btn-nebula {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    @keyframes btn-stars {
        0% {
            transform: scale(1)
        }

        to {
            transform: scale(1.1)translate(-2%, -2%)
        }
    }

    .btn--secondary {
        color: var(--color-brand);
        box-shadow: 0 0 0 1.5px var(--color-brand);
        background-color: #0000
    }

    .btn--secondary:hover {
        background: #0064e012
    }

    .btn--tertiary {
        color: var(--color-brand);
        box-shadow: none;
        background-color: #0000;
        padding-inline: 4px
    }

    .btn--tertiary:hover {
        text-decoration-line: underline
    }

    .btn--ghost {
        background: var(--color-bg);
        color: var(--color-heading);
        box-shadow: var(--shadow-card)
    }

    .btn--ghost:hover {
        box-shadow: var(--shadow-card-hover)
    }

    .btn--ghost-white {
        color: #fff;
        background-color: #0000;
        box-shadow: 0 0 0 1px #ffffff59
    }

    .btn--ghost-white:hover {
        background: #ffffff1a
    }

    .btn--lg {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
        padding: 14px 28px
    }

    .btn--sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        padding: 7px 14px
    }

    .btn--full {
        justify-content: center;
        width: 100%
    }

    .btn--submit {
        justify-content: center;
        min-width: 180px
    }

    .btn--full-mobile {
        display: none
    }

    .nav__cta {
        padding: 9px 18px;
        font-size: .875rem
    }

    .btn__loading {
        align-items: center;
        gap: calc(var(--spacing) * 2);
        display: inline-flex
    }

    @keyframes spin {
        to {
            transform: rotate(360deg)
        }
    }

    .spin {
        animation: .8s linear infinite spin
    }

    .theme-toggle {
        cursor: pointer;
        background: var(--color-surface);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-pill);
        flex-shrink: 0;
        width: 44px;
        height: 24px;
        padding: 0;
        transition: background .3s, border-color .3s;
        position: relative
    }

    .theme-toggle:after {
        content: "";
        background: var(--color-heading);
        border-radius: 3.40282e38px;
        width: 14px;
        height: 14px;
        transition: transform .3s, background .3s;
        position: absolute;
        top: 3px;
        left: 3px
    }

    [data-theme=dark] .theme-toggle {
        background: var(--color-brand);
        border-color: #0000
    }

    [data-theme=dark] .theme-toggle:after {
        background: #fff;
        transform: translate(20px)
    }

    .theme-toggle__icon {
        pointer-events: none;
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        color: var(--color-text);
        align-items: center;
        transition: opacity .2s;
        display: flex;
        position: absolute;
        top: 50%;
        z-index: 1
    }

    .theme-toggle__icon--light {
        left: 4px;
        color: #fff
    }

    .theme-toggle__icon--dark {
        right: 4px;
        color: #001e43
    }

    [data-theme=light] .theme-toggle__icon--light,
    [data-theme=dark] .theme-toggle__icon--dark {
        opacity: 0
    }

    .nav {
        top: calc(var(--spacing) * 0);
        right: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        z-index: 100;
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--color-border);
        height: var(--nav-height);
        background: #ffffffeb;
        transition: transform .3s, box-shadow .3s, background .3s;
        position: fixed
    }

    [data-theme=dark] .nav {
        background: #060c18f0
    }

    .nav--scrolled {
        box-shadow: var(--shadow-card)
    }

    .nav--hidden {
        transform: translateY(-100%)
    }

    .nav__inner {
        align-items: center;
        gap: 24px;
        height: 100%;
        display: flex
    }

    .nav__logo {
        flex-shrink: 0;
        align-items: center;
        display: flex
    }

    .nav__logo img {
        width: auto;
        height: 32px
    }

    [data-theme=dark] .nav__logo img {
        filter: brightness(0)invert()
    }

    .nav__menu {
        flex: 1;
        align-items: center;
        gap: 4px;
        display: flex
    }

    .nav__link {
        border-radius: var(--radius-md);
        color: var(--color-heading);
        transition: background var(--transition-fast), color var(--transition-fast);
        opacity: .8;
        padding: 6px 12px;
        font-size: .875rem;
        font-weight: 500
    }

    .nav__link:hover {
        background: var(--color-surface);
        opacity: 1
    }

    .nav__link--active {
        opacity: 1;
        font-weight: 600
    }

    .nav__right {
        align-items: center;
        gap: 12px;
        margin-left: auto;
        display: flex
    }

    .nav__hamburger {
        border-style: var(--tw-border-style);
        border-radius: var(--radius-sm);
        background-color: #0000;
        border-width: 0;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 36px;
        height: 36px;
        padding: 4px;
        display: none
    }

    .nav__hamburger span {
        background: var(--color-heading);
        border-radius: 3.40282e38px;
        height: 2px;
        transition: transform .3s, opacity .2s;
        display: block
    }

    .nav__hamburger[aria-expanded=true] span:first-child {
        transform: translateY(7px)rotate(45deg)
    }

    .nav__hamburger[aria-expanded=true] span:nth-child(2) {
        opacity: 0
    }

    .nav__hamburger[aria-expanded=true] span:nth-child(3) {
        transform: translateY(-7px)rotate(-45deg)
    }

    .nav__mobile {
        right: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        padding: 16px 24px 24px;
        position: absolute;
        top: 100%;
        box-shadow: 0 8px 24px #00000014
    }

    .nav__mobile[hidden] {
        display: none
    }

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

    .nav__mobile-menu .nav__link {
        padding: 10px 14px;
        font-size: 1rem;
        display: block
    }

    .btn--full-mobile {
        justify-content: center;
        width: 100%;
        margin-top: 16px
    }

    .section__label {
        --tw-tracking: var(--tracking-widest);
        letter-spacing: var(--tracking-widest);
        text-transform: uppercase;
        color: var(--color-brand);
        letter-spacing: .08em;
        margin-bottom: 12px;
        font-size: .8rem;
        font-weight: 600
    }

    .section__title {
        letter-spacing: -.02em;
        color: var(--color-heading);
        margin-bottom: 16px;
        font-size: clamp(1.75rem, 3.5vw, 2.75rem);
        font-weight: 600;
        line-height: 1.1
    }

    .section__subtitle {
        max-width: 680px;
        color: var(--color-text-muted);
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.7
    }

    .section__header {
        text-align: center;
        margin-inline: auto;
        max-width: 780px;
        margin-bottom: 64px
    }

    .section__header .section__subtitle {
        margin-inline: auto
    }

    .hero {
        min-height: 100vh;
        padding-top: calc(var(--nav-height) + 40px);
        align-items: center;
        padding-bottom: 40px;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .hero__canvas {
        pointer-events: none;
        inset: calc(var(--spacing) * 0);
        z-index: 0;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute
    }

    .hero__inner {
        z-index: 1;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: clamp(32px, 6vw, 80px);
        width: 100%;
        display: grid;
        position: relative
    }

    .hero__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        display: flex
    }

    .hero__tag {
        --tw-tracking: var(--tracking-widest);
        letter-spacing: var(--tracking-widest);
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--color-brand);
        align-items: center;
        gap: 12px;
        font-size: .8rem;
        font-weight: 600;
        display: inline-flex
    }

    .hero__tag-line {
        background: var(--color-brand);
        border-radius: 3.40282e38px;
        width: 24px;
        height: 1.5px;
        display: block
    }

    .hero__title {
        letter-spacing: -.02em;
        color: var(--color-heading);
        font-size: clamp(1.875rem, 4vw, 3.375rem);
        font-weight: 700;
        line-height: 1.08
    }

    .hero__subtitle {
        color: var(--color-text-muted);
        font-size: clamp(1rem, 1.4vw, 1.25rem);
        font-weight: 400;
        line-height: 1.7
    }

    .hero__actions {
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        margin-top: 4px;
        display: flex
    }

    .hero__trust {
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
        display: flex
    }

    .hero__trust-item {
        color: var(--color-text-muted);
        align-items: center;
        gap: 6px;
        font-size: .8rem;
        font-weight: 500;
        display: inline-flex
    }

    .hero__trust-item svg {
        color: var(--color-brand);
        flex-shrink: 0
    }

    .hero__visual {
        position: relative
    }

    .hero__photo-wrap {
        max-width: 420px;
        margin-inline: auto;
        position: relative
    }

    .hero__photo-bg {
        background: var(--color-brand);
        border-radius: var(--radius-xl);
        z-index: 0;
        position: absolute;
        inset: 6% -6% -5% 12%
    }

    .hero__photo,
    .hero__video {
        object-fit: cover;
        aspect-ratio: 3/4;
        object-position: center;
        border-radius: var(--radius-xl);
        z-index: 1;
        width: 100%;
        display: block;
        position: relative
    }

    .hero__float-card {
        z-index: 3;
        background: var(--color-bg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card-hover);
        white-space: nowrap;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        display: flex;
        position: absolute
    }

    [data-theme=dark] .hero__float-card {
        background: var(--color-surface)
    }

    .hero__float-card__icon {
        border-radius: var(--radius-md);
        width: 34px;
        height: 34px;
        color: var(--color-brand);
        background: #0064e01f;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .hero__float-card__label {
        color: var(--color-text-muted);
        font-size: .8rem;
        font-weight: 500;
        line-height: 1.2;
        display: block
    }

    .hero__float-card__value {
        color: var(--color-heading);
        font-size: .875rem;
        font-weight: 700;
        line-height: 1.3;
        display: block
    }

    .hero__float-card--1 {
        animation: 3.5s ease-in-out infinite hero-float;
        top: 4%;
        left: -5%
    }

    .hero__float-card--2 {
        animation: 4s ease-in-out .6s infinite hero-float;
        bottom: 10%;
        right: -6%
    }

    @keyframes hero-float {

        0%,
        to {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-8px)
        }
    }

    .card {
        background: var(--color-bg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        transition: box-shadow var(--transition-base), transform var(--transition-base);
        padding: 32px
    }

    .card:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-2px)
    }

    .tag {
        color: var(--color-text-muted);
        background: var(--color-surface);
        border-radius: var(--radius-pill);
        box-shadow: 0 0 0 1px var(--color-border);
        transition: background var(--transition-fast);
        padding: 4px 10px;
        font-size: .8rem;
        font-weight: 500;
        display: inline-block
    }

    [data-theme=dark] .tag {
        color: #ffffff73;
        background: #ffffff0d
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        display: grid
    }

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

    .service-card__icon {
        background: var(--color-surface);
        border-radius: var(--radius-md);
        width: 52px;
        height: 52px;
        color: var(--color-brand);
        justify-content: center;
        align-items: center;
        display: flex
    }

    [data-theme=dark] .service-card__icon {
        background: #0064e01f
    }

    .service-card__title {
        font-size: 1.375rem;
        font-weight: 600
    }

    .service-card__text {
        flex: 1;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.7
    }

    .service-card__tags {
        flex-wrap: wrap;
        gap: 8px;
        display: flex
    }

    .service-card__link {
        color: var(--color-brand);
        transition: gap var(--transition-fast);
        align-items: center;
        gap: 6px;
        margin-top: auto;
        padding-top: 8px;
        font-size: .875rem;
        font-weight: 600;
        display: inline-flex
    }

    .service-card__link:hover {
        gap: 10px
    }

    .about {
        padding: 0;
        overflow: hidden
    }

    .about__inner {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        min-height: 620px;
        display: grid
    }

    .about__content {
        padding: 96px 48px 96px clamp(24px, calc((100vw - var(--container)) / 2 + 24px), 96px);
        background: var(--color-bg);
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        display: flex
    }

    .about__content .section__label,
    .about__content .section__title {
        margin-bottom: 0
    }

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

    .about__text p {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.8
    }

    .about__content .btn {
        align-self: flex-start
    }

    .about__photo {
        overflow: hidden
    }

    .about__photo img {
        object-fit: cover;
        object-position: center top;
        width: 100%;
        height: 100%;
        display: block
    }

    .clients__title {
        text-align: center;
        margin-bottom: 48px
    }

    .clients-grid {
        background: var(--color-border);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        grid-template-columns: repeat(5, 1fr);
        gap: 1px;
        display: grid;
        overflow: hidden
    }

    .clients-logo {
        background: var(--color-bg);
        transition: background var(--transition-base), opacity var(--transition-base);
        opacity: .55;
        justify-content: center;
        align-items: center;
        padding: 32px 24px;
        display: flex
    }

    .clients-logo:hover {
        background: var(--color-surface);
        opacity: 1
    }

    .clients-logo img {
        object-fit: contain;
        width: auto;
        height: 60px
    }

    .clients-logo--cta {
        cursor: pointer;
        opacity: 1;
        background: var(--color-bg);
        outline: 2px dashed var(--color-border);
        outline-offset: -8px;
        transition: background var(--transition-base), outline-color var(--transition-base);
        border: none;
        border-radius: 0;
        flex-direction: column;
        grid-column: span 3;
        gap: 8px;
        text-decoration: none
    }

    .clients-logo--cta:hover {
        outline-color: var(--color-brand);
        background: #0064e00a
    }

    .clients-cta__label {
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--color-brand);
        font-size: .8rem;
        font-weight: 600
    }

    .clients-cta__text {
        text-align: center;
        color: var(--color-heading);
        font-size: clamp(.875rem, 1.2vw, 1.063rem);
        font-weight: 700;
        line-height: 1.3
    }

    .clients-cta__arrow {
        background: var(--color-brand);
        color: #fff;
        width: 32px;
        height: 32px;
        transition: transform var(--transition-base);
        border-radius: 3.40282e38px;
        justify-content: center;
        align-items: center;
        margin-top: 8px;
        display: flex
    }

    .clients-logo--cta:hover .clients-cta__arrow {
        transform: translate(4px)
    }

    .logo--dark,
    [data-theme=dark] .logo--light {
        display: none
    }

    [data-theme=dark] .logo--dark {
        display: block
    }

    .portfolio__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 40px;
        display: grid
    }

    .portfolio-cta-card {
        background: var(--color-brand-deep);
        border-radius: var(--radius-xl);
        min-height: 300px;
        transition: transform var(--transition-base), box-shadow var(--transition-base);
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 12px;
        padding: 40px 32px;
        display: flex;
        position: relative;
        overflow: hidden
    }

    [data-theme=dark] .portfolio-cta-card {
        background: #0b1a33
    }

    .portfolio-cta-card:before {
        content: "";
        inset: calc(var(--spacing) * 0);
        background: radial-gradient(circle at 25% 25%, #0064e02e 0%, #0000 65%);
        position: absolute
    }

    .portfolio-cta-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px #00000040
    }

    .portfolio-cta-card__icon {
        color: #ffffff4d;
        position: absolute;
        top: 24px;
        left: 24px
    }

    .portfolio-cta-card__title {
        color: #fff;
        letter-spacing: -.01em;
        font-size: 1.25rem;
        font-weight: 600
    }

    .portfolio-cta-card__text {
        color: #fff9;
        margin-bottom: 8px;
        font-size: .875rem;
        font-weight: 300
    }

    .portfolio-card {
        background: var(--color-bg);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-card);
        transition: box-shadow var(--transition-base), transform var(--transition-base);
        flex-direction: column;
        display: flex;
        overflow: hidden
    }

    .portfolio-card:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-3px)
    }

    .portfolio-card__image {
        aspect-ratio: 16/10;
        background: var(--color-surface);
        overflow: hidden
    }

    .portfolio-card__image img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        transition: transform .4s
    }

    .portfolio-card:hover .portfolio-card__image img {
        transform: scale(1.04)
    }

    .portfolio-card__image--placeholder {
        aspect-ratio: 16/10;
        background: repeating-linear-gradient(45deg, var(--color-surface) 0, var(--color-surface) 10px, #00000008 10px, #00000008 20px)
    }

    .portfolio-card__body {
        flex-direction: column;
        flex: 1;
        gap: 8px;
        padding: 20px 24px;
        display: flex
    }

    .portfolio-card__title {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.3
    }

    .portfolio-card__desc {
        font-size: .8rem;
        font-weight: 300;
        line-height: 1.5
    }

    .portfolio-card__link {
        color: var(--color-brand);
        transition: gap var(--transition-fast);
        align-items: center;
        gap: 5px;
        margin-top: auto;
        padding-top: 8px;
        font-size: .8rem;
        font-weight: 600;
        display: inline-flex
    }

    .portfolio-card__link:hover {
        gap: 8px
    }

    .portfolio__more {
        text-align: center
    }

    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        display: grid
    }

    .feature-item {
        background: var(--color-bg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        transition: box-shadow var(--transition-base), transform var(--transition-base);
        flex-direction: column;
        gap: 16px;
        padding: 32px 24px;
        display: flex
    }

    .feature-item:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-2px)
    }

    .feature-item__icon {
        background: var(--color-surface);
        border-radius: var(--radius-md);
        width: 48px;
        height: 48px;
        color: var(--color-brand);
        justify-content: center;
        align-items: center;
        display: flex
    }

    [data-theme=dark] .feature-item__icon {
        background: #0064e01f
    }

    .feature-item__title {
        font-size: 1rem;
        font-weight: 600
    }

    .feature-item__text {
        font-size: .875rem;
        font-weight: 300;
        line-height: 1.65
    }

    .solutions-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        display: grid
    }

    .solution-card {
        background: var(--color-bg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        transition: box-shadow var(--transition-base), transform var(--transition-base);
        flex-direction: column;
        gap: 12px;
        padding: 32px 24px;
        display: flex
    }

    .solution-card:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-2px)
    }

    .solution-card__badge {
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--color-brand);
        border-radius: var(--radius-pill);
        background: #0064e014;
        align-self: flex-start;
        padding: 3px 10px;
        font-size: .8rem;
        font-weight: 600;
        display: inline-block
    }

    [data-theme=dark] .solution-card__badge {
        background: #0064e026
    }

    .solution-card__title {
        font-size: 1.063rem;
        font-weight: 600
    }

    .solution-card__text {
        font-size: .875rem;
        font-weight: 300;
        line-height: 1.65
    }

    .solutions__note {
        text-align: center;
        background: var(--color-surface);
        border-radius: var(--radius-md);
        width: 100%;
        box-shadow: 0 0 0 1px var(--color-border);
        margin-top: 40px;
        padding: 16px 24px;
        font-size: .875rem;
        display: block
    }

    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        display: grid
    }

    .benefit-card {
        background: var(--color-bg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        transition: box-shadow var(--transition-base), transform var(--transition-base);
        flex-direction: column;
        gap: 16px;
        padding: 32px;
        display: flex
    }

    .benefit-card:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-2px)
    }

    .benefit-card__icon {
        background: var(--color-surface);
        border-radius: var(--radius-md);
        width: 52px;
        height: 52px;
        color: var(--color-brand);
        justify-content: center;
        align-items: center;
        display: flex
    }

    [data-theme=dark] .benefit-card__icon {
        background: #0064e01f
    }

    .benefit-card__title {
        font-size: 1.25rem;
        font-weight: 600
    }

    .benefit-card__text {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.7
    }

    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        display: grid
    }

    .pillar-item {
        background: var(--color-bg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        transition: box-shadow var(--transition-base), transform var(--transition-base);
        flex-direction: column;
        gap: 12px;
        padding: 32px;
        display: flex
    }

    .pillar-item:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-2px)
    }

    .pillar-item__number {
        color: var(--color-brand);
        letter-spacing: .05em;
        font-size: .8rem;
        font-weight: 600
    }

    .pillar-item__title {
        font-size: 1.125rem;
        font-weight: 600
    }

    .pillar-item__text {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.7
    }

    .disclaimer {
        background: var(--color-surface)
    }

    .disclaimer__inner {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 64px;
        display: grid
    }

    .disclaimer__content {
        flex-direction: column;
        gap: 20px;
        display: flex
    }

    .disclaimer__content .section__title {
        margin-bottom: 0
    }

    .disclaimer__text {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.8
    }

    .disclaimer__card {
        background: var(--color-bg);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-card);
        flex-direction: column;
        gap: 12px;
        padding: 32px;
        display: flex
    }

    .disclaimer__card-item {
        border-bottom: 1px solid var(--color-border);
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        font-size: 1rem;
        display: flex
    }

    .disclaimer__card-item:last-child {
        border-bottom: none
    }

    .disclaimer__card-item--yes {
        color: var(--color-heading)
    }

    .disclaimer__card-item--yes svg {
        color: var(--color-brand)
    }

    .disclaimer__card-item--no,
    .disclaimer__card-item--no svg {
        color: var(--color-text-muted)
    }

    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        display: grid
    }

    .testimonial-placeholder {
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-card);
        aspect-ratio: 4/3;
        background: var(--color-surface);
        overflow: hidden
    }

    .testimonial-placeholder__inner {
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        height: 100%;
        padding: 32px;
        display: flex
    }

    .testimonial-placeholder__icon {
        color: var(--color-text-muted);
        opacity: .35
    }

    .testimonial-placeholder__inner p {
        font-size: .875rem;
        line-height: 1.5
    }

    .testimonial-placeholder__inner span {
        opacity: .7;
        font-size: .8rem;
        font-style: italic
    }

    .contact__inner {
        grid-template-columns: 1fr 2fr;
        align-items: flex-start;
        gap: 64px;
        display: grid
    }

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

    .contact__header .section__title {
        margin-bottom: 0
    }

    .contact__subtitle {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.7
    }

    .contact-form {
        flex-direction: column;
        gap: 20px;
        display: flex
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        display: grid
    }

    .form-group {
        flex-direction: column;
        gap: 8px;
        display: flex
    }

    .form-label {
        color: var(--color-heading);
        font-size: .875rem;
        font-weight: 600
    }

    .form-label span {
        color: var(--color-text-muted);
        font-weight: 400
    }

    .form-input,
    .form-select,
    .form-textarea {
        appearance: none;
        --tw-outline-style: none;
        width: 100%;
        color: var(--color-heading);
        background: var(--color-bg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        transition: box-shadow var(--transition-fast), background var(--transition-fast);
        border: none;
        outline-style: none;
        padding: 11px 14px;
        font-size: 1rem;
        font-weight: 400
    }

    [data-theme=dark] .form-input,
    [data-theme=dark] .form-select,
    [data-theme=dark] .form-textarea {
        background: var(--color-surface);
        color: var(--color-heading)
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        box-shadow: var(--shadow-card), 0 0 0 2px #0064e04d
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
        color: var(--color-text-muted);
        opacity: .5
    }

    .form-input--error {
        box-shadow: var(--shadow-card), 0 0 0 2px #dc26264d
    }

    .form-textarea {
        resize: vertical;
        min-height: 120px;
        line-height: 1.6
    }

    .form-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23898989' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-position: right 14px center;
        background-repeat: no-repeat;
        padding-right: 38px
    }

    .form-error {
        color: #dc2626;
        font-size: .8rem
    }

    .form-hint {
        color: var(--color-text-muted);
        font-size: .8rem
    }

    .form-footer {
        flex-wrap: wrap;
        align-items: center;
        gap: 24px;
        display: flex
    }

    .form-disclaimer {
        font-size: .8rem;
        font-weight: 300
    }

    .form-feedback {
        border-radius: var(--radius-md);
        padding: 16px 20px;
        font-size: .875rem;
        font-weight: 500
    }

    .form-feedback[data-type=success] {
        color: #166534;
        background: #f0fdf4;
        box-shadow: 0 0 0 1px #bbf7d0
    }

    .form-feedback[data-type=error] {
        color: #991b1b;
        background: #fef2f2;
        box-shadow: 0 0 0 1px #fecaca
    }

    .footer {
        background: var(--color-footer-bg);
        color: #ffffffa6;
        transition: background var(--transition-base);
        padding-top: 64px
    }

    .footer__inner {
        border-bottom: 1px solid #ffffff14;
        grid-template-columns: 1fr auto;
        align-items: flex-start;
        gap: 64px;
        padding-bottom: 64px;
        display: grid
    }

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

    .footer__brand img {
        filter: brightness(0)invert();
        opacity: .8
    }

    .footer__tagline {
        color: #fff6;
        font-size: .875rem;
        font-weight: 300
    }

    .footer__nav {
        gap: 64px;
        display: flex
    }

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

    .footer__nav-title {
        text-transform: uppercase;
        color: #ffffff59;
        letter-spacing: .07em;
        margin-bottom: 4px;
        font-size: .8rem;
        font-weight: 600
    }

    .footer__nav-link {
        color: #ffffff8c;
        transition: color var(--transition-fast);
        font-size: .875rem;
        font-weight: 300
    }

    .footer__nav-link:hover {
        color: #fff
    }

    .footer__bottom {
        justify-content: space-between;
        align-items: center;
        padding-block: 20px;
        display: flex
    }

    .footer__copy,
    .footer__location {
        color: #ffffff59;
        font-size: .8rem;
        font-weight: 300
    }

    @media (max-width:1024px) {

        .features-grid,
        .solutions-grid,
        .portfolio__grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media (max-width:900px) {
        .about__inner {
            grid-template-columns: 1fr;
            min-height: auto
        }

        .about__photo {
            height: 420px
        }

        .about__content {
            padding: 64px 32px
        }

        .disclaimer__inner {
            grid-template-columns: 1fr;
            gap: 40px
        }

        .contact__inner {
            grid-template-columns: 1fr;
            gap: 32px
        }
    }

    @media (max-width:768px) {
        :root {
            --space-24: 64px
        }

        .section {
            padding-block: calc(var(--spacing) * 16)
        }

        .hero__inner {
            grid-template-columns: 1fr
        }

        .hero__visual {
            margin-top: 32px
        }

        .hero__float-card--1 {
            top: 4%;
            left: 2%
        }

        .hero__float-card--2 {
            bottom: 4%;
            right: 2%
        }

        .clients-grid {
            grid-template-columns: repeat(3, 1fr)
        }

        .clients-logo--cta {
            grid-column: 2/-1
        }

        .nav__menu,
        .nav__cta,
        .nav__right .nav__cta {
            display: none
        }

        .nav__hamburger,
        .btn--full-mobile {
            display: flex
        }

        .services__grid,
        .benefits-grid,
        .pillars-grid,
        .testimonials-grid {
            grid-template-columns: 1fr
        }

        .features-grid,
        .solutions-grid {
            grid-template-columns: 1fr 1fr
        }

        .portfolio__grid,
        .form-row {
            grid-template-columns: 1fr
        }

        .footer__inner {
            grid-template-columns: 1fr;
            gap: 40px
        }

        .footer__nav {
            gap: 40px
        }

        .footer__bottom {
            text-align: center;
            flex-direction: column;
            gap: 8px
        }

        .about__photo {
            height: 360px
        }
    }

    @media (max-width:480px) {
        .container {
            padding-inline: calc(var(--spacing) * 4)
        }

        .hero {
            padding-top: calc(var(--nav-height) + 32px);
            padding-bottom: 32px
        }

        .hero__actions {
            flex-direction: column;
            width: 100%
        }

        .hero__actions .btn {
            justify-content: center;
            width: 100%
        }

        .features-grid,
        .solutions-grid {
            grid-template-columns: 1fr
        }

        .card {
            padding: 24px
        }

        .form-footer {
            flex-direction: column;
            align-items: stretch
        }

        .form-footer .btn {
            justify-content: center
        }

        .about__photo {
            height: 280px
        }

        .about__content {
            padding: 48px 16px
        }
    }
}

@layer utilities {
    .invisible {
        visibility: hidden
    }

    .visible {
        visibility: visible
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .sticky {
        position: sticky
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .end {
        inset-inline-end: var(--spacing)
    }

    .container {
        width: 100%
    }

    @media (min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media (min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media (min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media (min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media (min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .block {
        display: block
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .table {
        display: table
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .resize {
        resize: both
    }

    .rounded {
        border-radius: .25rem
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .underline {
        text-decoration-line: underline
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-border {
        --tw-shadow-color: #222a3514
    }

    @supports (color:color-mix(in lab, red, red)) {
        .shadow-border {
            --tw-shadow-color: color-mix(in oklab, var(--color-border) var(--tw-shadow-alpha), transparent)
        }
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .grayscale {
        --tw-grayscale: grayscale(100%);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }
}

[data-theme=dark] #cat-lottie svg {
    filter: drop-shadow(1.5px 0 #ffffff8c)drop-shadow(-1.5px 0 #ffffff8c)drop-shadow(0 1.5px #ffffff8c)drop-shadow(0 -1.5px #ffffff8c)
}

.cat-widget {
    z-index: 9998;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    width: 176px;
    position: fixed;
    bottom: 0;
    left: 0
}

.cat-bubble {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: 210px;
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    pointer-events: none;
    opacity: 0;
    transform-origin: 0 100%;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 10px 13px;
    font-size: .8rem;
    line-height: 1.55;
    transition: opacity .18s, transform .18s;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    transform: translateY(6px)scale(.96)
}

.cat-bubble.is-visible {
    opacity: 1;
    transform: translateY(0)scale(1)
}

.cat-bubble:after {
    content: "";
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    width: 11px;
    height: 11px;
    position: absolute;
    bottom: -6px;
    left: 22px;
    transform: rotate(45deg)
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}