@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-duration: initial;
            --tw-border-style: solid;
            --tw-font-weight: initial;
            --tw-leading: initial;
            --tw-tracking: initial;
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
        }
    }
}
@layer theme {
    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
            "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-gray-300: oklch(87.2% 0.01 258.338);
        --color-black: #000;
        --color-white: #fff;
        --spacing: 0.25rem;
        --container-3xl: 48rem;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-bold: 700;
        --font-weight-black: 900;
        --tracking-tight: -0.025em;
        --leading-tight: 1.25;
        --leading-relaxed: 1.625;
        --default-transition-duration: 0.15s;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
    }
}
@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;
        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: -0.25em;
    }
    sup {
        top: -0.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;
    }
    * {
        margin: calc(var(--spacing) * 0);
        box-sizing: border-box;
        padding: calc(var(--spacing) * 0);
    }
    html,
    body {
        background: #1e1e1e;
        font-family:
            'Cresta-black-italic'
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            sans-serif;
        overflow: hidden auto;
    }
}
@layer components {
    .header {
        top: calc(var(--spacing) * 0);
        right: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        z-index: 100;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        transition-duration: 0.3s;
        position: fixed;
    }
    body.menu-open .header {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    .prihlaseni-btn {
        cursor: pointer;
        border-style: var(--tw-border-style);
        --tw-font-weight: var(--font-weight-black);
        width: 206px;
        height: 38px;
        font-size: 20px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        background-color: #0000;
        border-width: 1.5px;
        border-color: #fafafa;
        border-radius: 100px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
        transition-duration: 0.3s;
    }
    .prihlaseni-btn:hover {
        color: var(--color-black);
        background-color: #fafafa;
    }
    .hamburger-btn {
        z-index: 60;
        height: calc(var(--spacing) * 10);
        width: calc(var(--spacing) * 10);
        cursor: pointer;
        justify-content: center;
        align-items: center;
        gap: calc(var(--spacing) * 1.5);
        --tw-border-style: none;
        padding: calc(var(--spacing) * 0);
        background-color: #0000;
        border-style: none;
        flex-direction: column;
        display: flex;
        position: relative;
    }
    .hamburger-btn span {
        height: calc(var(--spacing) * 0.5);
        width: 30px;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        transform-origin: 50%;
        background-color: #fafafa;
        transition-duration: 0.3s;
    }
    .hamburger-btn:hover span {
        background-color: var(--color-gray-300);
    }
    .hamburger-btn.active span:first-child {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    body.menu-open {
        overflow: hidden;
    }
    .menu-overlay {
        pointer-events: none;
        right: calc(var(--spacing) * 0);
        left: calc(var(--spacing) * 0);
        z-index: 40;
        background-color: var(--color-black);
        opacity: 0;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        padding-inline: 150px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        height: 50vh;
        padding-bottom: 90px;
        transition-duration: 0.3s;
        position: fixed;
        top: 100px;
    }
    .menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    .menu-content {
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        display: flex;
    }
    .menu-left {
        flex: 1;
    }
    .menu-nav {
        gap: calc(var(--spacing) * 6);
        flex-direction: column;
        display: flex;
    }
    .menu-link {
        --tw-font-weight: var(--font-weight-black);
        font-size: 32px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
        line-height: 1.2;
        text-decoration-line: none;
        transition-duration: 0.3s;
    }
    .menu-link:hover {
        color: #0fc26c;
        transform: translate(10px);
    }
    .menu-right {
        gap: calc(var(--spacing) * 20);
        display: flex;
    }
    .menu-qr-section {
        gap: calc(var(--spacing) * 6);
        display: flex;
        transform: translateY(15px);
    }
    .menu-qr-box {
        align-items: center;
        gap: calc(var(--spacing) * 4);
        flex-direction: column;
        display: flex;
    }
    .menu-qr-code {
        width: 140px;
        height: 140px;
    }
    .menu-app-store-badge {
        width: 155px;
        height: 55px;
        margin-top: 14px;
    }
    .menu-google-play-badge {
        width: 190px;
        height: 84px;
    }
    .menu-right-content {
        gap: calc(var(--spacing) * 8);
        flex-direction: column;
        width: 218px;
        display: flex;
    }
    .menu-social {
        justify-content: flex-start;
        gap: calc(var(--spacing) * 6);
        display: flex;
    }
    .menu-social-icon {
        width: 40px;
        height: 40px;
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        transition-duration: 0.3s;
    }
    .menu-social-icon:hover {
        opacity: 0.7;
    }
    .menu-social-icon img {
        width: 100%;
        height: 100%;
    }
    .menu-brands {
        align-items: flex-start;
        gap: calc(var(--spacing) * 5);
        flex-direction: column;
        display: flex;
    }
    .menu-brand-item {
        align-items: flex-start;
        gap: calc(var(--spacing) * 2);
        flex-direction: column;
        display: flex;
    }
    .menu-brand-text {
        text-align: left;
        --tw-font-weight: var(--font-weight-medium);
        font-size: 18px;
        font-weight: var(--font-weight-medium);
        color: #fafafa;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .menu-brand-logo {
        width: auto;
        height: 32px;
    }
    .menu-footer-links {
        gap: 16px;
        display: none;
        flex-direction: column !important;
        justify-content: start !important;
        align-items: flex-start !important;
        margin-top: 10px !important;
    }
    .menu-footer-link {
        --tw-font-weight: var(--font-weight-medium);
        font-size: 14px;
        font-weight: var(--font-weight-medium);
        color: #fafafa;
        text-align: left;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        text-decoration: none;
        justify-content: start !important;
    }
    .hero {
        background-color: var(--color-black);
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        align-items: center;
        height: 1060px;
        padding-inline: 150px;
        display: flex;
        margin-top: 70px !important;
    }
    .floating-badge {
        opacity: 0;
        width: 70px;
        height: 70px;
        animation:
            0.8s ease-out forwards fadeIn,
            3s ease-in-out infinite float;
        position: absolute;
    }
    .floating-badge:first-child {
        animation-delay: 0.3s, 0.3s;
    }
    .floating-badge:nth-child(2) {
        animation-delay: 0.4s, 0.4s;
    }
    .floating-badge:nth-child(3) {
        animation-delay: 0.5s, 0.5s;
    }
    .floating-badge:nth-child(4) {
        animation-delay: 0.6s, 0.6s;
    }
    .floating-badge:nth-child(5) {
        animation-delay: 0.7s, 0.7s;
    }
    .badge-orange {
        z-index: 60;
    }
    .hero-content {
        max-width: var(--container-3xl);
    }
    .hero-title {
        margin-bottom: calc(var(--spacing) * 8);
        --tw-leading: 1.1;
        --tw-font-weight: var(--font-weight-black);
        font-size: 92px;
        line-height: 1.1;
        font-weight: var(--font-weight-black);
        --tw-tracking: var(--tracking-tight);
        letter-spacing: var(--tracking-tight);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
        animation: 0.8s ease-out 0.2s forwards fadeInUp;
    }
    .hero-description {
        margin-bottom: calc(var(--spacing) * 12);
        --tw-leading: 1.1;
        --tw-font-weight: var(--font-weight-normal);
        font-size: 32px;
        line-height: 1.1;
        font-weight: var(--font-weight-normal);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        animation: 0.8s ease-out 0.4s forwards fadeInUp;
    }
    .hero-buttons {
        gap: calc(var(--spacing) * 5);
        display: flex;
    }
    .hero-buttons .btn-download {
        opacity: 0;
        animation: 0.6s ease-out 0.8s forwards fadeIn;
    }
    .hero-buttons .btn-learn-more {
        opacity: 0;
        animation: 0.6s ease-out 1s forwards fadeIn;
    }
    .hero-image {
        width: 1345px;
        height: 970px;
        position: relative;
    }
    .green-badge {
        z-index: 10;
        opacity: 0;
        background-color: #0fc26c;
        border-radius: 3.40282e38px;
        justify-content: center;
        align-items: center;
        width: 190px;
        height: 190px;
        animation: 0.8s ease-out 0.6s forwards scaleIn;
        display: flex;
        position: absolute;
        top: 75px;
        right: 340px;
        transform: rotate(15deg);
    }
    .green-badge span {
        text-align: center;
        --tw-font-weight: var(--font-weight-black);
        font-size: 24px;
        font-weight: var(--font-weight-black);
        color: #fff;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
        line-height: 1.2;
    }
    .hero-image img {
        opacity: 0;
        z-index: 5;
        width: 1345px;
        max-width: none;
        height: 950px;
        animation: 1s ease-out 0.1s forwards fadeInUpHand;
        position: relative;
        transform: translate(-100px, 65px);
    }
    .btn-download {
        cursor: pointer;
        --tw-border-style: none;
        --tw-font-weight: var(--font-weight-black);
        width: 232px;
        height: 50px;
        font-size: 20px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        border-style: none;
        border-radius: 100px;
        font-style: italic;
        transition-duration: 0.3s;
    }
    @media (hover: hover) {
        .btn-download:hover {
            --tw-translate-y: calc(var(--spacing) * -0.5);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .btn-download {
        background: linear-gradient(90deg, #c40127, #ed3c19);
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .btn-download:hover {
        box-shadow: 0 8px 20px #c4012766;
    }
    .btn-learn-more {
        cursor: pointer;
        border-style: var(--tw-border-style);
        --tw-font-weight: var(--font-weight-black);
        width: 232px;
        height: 50px;
        font-size: 20px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        background-color: #0000;
        border-width: 1.5px;
        border-color: #0000;
        border-radius: 100px;
        font-style: italic;
        transition-duration: 0.3s;
    }
    @media (hover: hover) {
        .btn-learn-more:hover {
            --tw-translate-y: calc(var(--spacing) * -0.5);
            translate: var(--tw-translate-x) var(--tw-translate-y);
        }
    }
    .btn-learn-more {
        background-image: linear-gradient(#000, #000), linear-gradient(90deg, #c40127, #ed3c19);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .features {
        padding-inline: 150px;
        padding-block: calc(var(--spacing) * 24);
        background: #1e1e1e;
    }
    .features-content {
        background-color: var(--color-black);
        width: 1200px;
        height: 800px;
        padding-inline: calc(var(--spacing) * 12);
        padding-top: calc(var(--spacing) * 16);
        padding-bottom: calc(var(--spacing) * 0);
        text-align: center;
        border-radius: 30px;
        min-height: 750px;
        margin-inline: auto;
    }
    @media (min-width: 1920px) {
        .features-content {
            width: 1600px;
            padding-inline: calc(var(--spacing) * 16);
            min-height: 750px;
        }
    }
    .features-title {
        margin-bottom: calc(var(--spacing) * 3);
        --tw-leading: var(--leading-tight);
        font-size: 60px;
        line-height: var(--leading-tight);
        --tw-font-weight: var(--font-weight-black);
        font-weight: var(--font-weight-black);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
    }
    .features-title.animated {
        animation: 0.8s ease-out 0.2s forwards fadeInUp;
    }
    .features-subtitle {
        margin-bottom: calc(var(--spacing) * 10);
        --tw-font-weight: var(--font-weight-bold);
        font-size: 32px;
        font-weight: var(--font-weight-bold);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .features-subtitle.animated {
        animation: 0.8s ease-out 0.4s forwards fadeInUp;
    }
    .features-tags {
        margin-bottom: calc(var(--spacing) * 16);
        justify-content: center;
        gap: calc(var(--spacing) * 2);
        flex-wrap: wrap;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
    }
    .feature-tag {
        align-items: center;
        gap: calc(var(--spacing) * 3);
        height: 34px;
        padding-inline: calc(var(--spacing) * 5);
        --tw-font-weight: 600;
        color: #171717;
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        border-radius: 10px;
        font-size: 20px;
        font-weight: 600;
        transition-duration: 0.3s;
        display: flex;
    }
    @media (hover: hover) {
        .feature-tag:hover {
            --tw-scale-x: 105%;
            --tw-scale-y: 105%;
            --tw-scale-z: 105%;
            scale: var(--tw-scale-x) var(--tw-scale-y);
        }
    }
    .feature-tag {
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .feature-tag.animated {
        animation: 0.6s ease-out forwards fadeIn;
    }
    .feature-tag.animated:first-child {
        animation-delay: 0.6s;
    }
    .feature-tag.animated:nth-child(2) {
        animation-delay: 0.7s;
    }
    .feature-tag.animated:nth-child(3) {
        animation-delay: 0.8s;
    }
    .feature-tag.animated:nth-child(4) {
        animation-delay: 0.9s;
    }
    .feature-tag.animated:nth-child(5) {
        animation-delay: 1s;
    }
    .feature-tag.animated:nth-child(6) {
        animation-delay: 1.1s;
    }
    .feature-tag.animated:nth-child(7) {
        animation-delay: 1.2s;
    }
    .feature-tag.animated:nth-child(8) {
        animation-delay: 1.3s;
    }
    .tag-icon {
        width: auto;
        max-width: 20px;
        height: auto;
        max-height: 20px;
        display: block;
    }
    .gradient-orange {
        color: var(--color-black);
        background: linear-gradient(90deg, #ffd19a, #ffb38b);
    }
    .gradient-yellow {
        color: var(--color-black);
        background: linear-gradient(90deg, #ffec9a, #ffd592);
    }
    .gradient-blue {
        color: var(--color-black);
        background: linear-gradient(90deg, #add3ff, #c3c9ff);
    }
    .gradient-teal {
        color: var(--color-black);
        background: linear-gradient(90deg, #9ef2ca, #b1f7ad);
    }
    .gradient-green {
        color: var(--color-black);
        background: linear-gradient(90deg, #c4f29e, #a7f1a0);
    }
    .gradient-red {
        color: var(--color-black);
        background: linear-gradient(90deg, #ffad9f, #ff94a8);
    }
    .gradient-cyan {
        color: var(--color-black);
        background: linear-gradient(90deg, #9ee8f2, #adf7f1);
    }
    .mobile-only {
        display: none;
    }
    .features-phones {
        justify-content: center;
        align-items: flex-end;
        gap: calc(var(--spacing) * 0);
        margin-top: 90px;
        display: flex;
        position: relative;
        transform: translate(20px);
    }
    .phone-img {
        opacity: 0;
        width: 260px;
        height: auto;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
    }
    .phone-img:first-child {
        transform: translate(260px);
    }
    .phone-img:nth-child(3) {
        transform: translate(-260px);
    }
    .phone-center {
        opacity: 1;
        z-index: 10;
        width: 280px;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
        transform: translateY(-30px) scale(1.8);
    }
    .features-phones.animated .phone-center {
        transform: translateY(-30px) scale(1);
    }
    .features-phones.animated .phone-img:first-child {
        opacity: 1;
        transform: translate(-15px);
    }
    .features-phones.animated .phone-img:nth-child(3) {
        opacity: 1;
        transform: translate(15px);
    }
    .download {
        padding-inline: 150px;
        padding-top: calc(var(--spacing) * 72);
        background: #1e1e1e;
    }
    .download-content {
        justify-content: space-between;
        align-items: center;
        display: flex;
    }
    .download-left {
        flex: 1;
    }
    .download-header {
        margin-bottom: calc(var(--spacing) * 12);
        align-items: center;
        gap: calc(var(--spacing) * 6);
        display: flex;
    }
    .app-logo {
        opacity: 0;
        width: 80px;
        height: 80px;
        transform: translateY(-40px);
    }
    .app-logo.animated {
        animation: 0.8s ease-out 0.1s forwards fadeInUp;
    }
    .download-title {
        --tw-leading: var(--leading-tight);
        font-size: 42px;
        line-height: var(--leading-tight);
        --tw-font-weight: var(--font-weight-black);
        font-weight: var(--font-weight-black);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
    }
    .download-title.animated {
        animation: 0.8s ease-out 0.3s forwards fadeInUp;
    }
    .qr-boxes {
        gap: calc(var(--spacing) * 8);
        display: flex;
    }
    .qr-box {
        background-color: var(--color-black);
        padding: calc(var(--spacing) * 5);
        opacity: 0;
        border-radius: 30px;
        flex-direction: column;
        align-items: center;
        width: 280px;
        height: 320px;
        display: flex;
    }
    .qr-box.animated {
        animation: 0.6s ease-out forwards fadeIn;
    }
    .qr-box.animated:first-child {
        animation-delay: 0.5s;
    }
    .qr-box.animated:nth-child(2) {
        animation-delay: 0.7s;
    }
    .qr-code {
        margin-top: calc(var(--spacing) * 2);
        width: 155px;
        height: 155px;
    }
    .store-badge {
        height: auto;
    }
    .app-store-badge {
        margin-top: calc(var(--spacing) * 8);
        width: 175px;
        height: 60px;
    }
    .google-play-badge {
        margin-top: calc(var(--spacing) * 5);
        width: 220px;
        height: 84px;
    }
    .download-right {
        flex-shrink: 0;
    }
    .download-image {
        opacity: 0;
        width: 872px;
        height: 808px;
        transform: translate(40px, -40px);
    }
    .download-image.animated {
        animation: 0.8s ease-out 0.2s forwards fadeInUp;
    }
    .register {
        padding-inline: 150px;
        padding-bottom: calc(var(--spacing) * 24);
        background: #1e1e1e;
    }
    .register-content {
        align-items: center;
        gap: calc(var(--spacing) * 12);
        display: flex;
    }
    .register-left {
        z-index: 10;
        pointer-events: none;
        flex-shrink: 0;
        margin-left: -430px;
        position: relative;
    }
    .imac-image {
        opacity: 0;
        width: 1600px;
        height: 1300px;
        transform: translateY(-50px);
    }
    .imac-image.animated {
        animation: 0.8s ease-out 0.1s forwards fadeInUp;
    }
    .register-right {
        z-index: 5;
        background-color: var(--color-black);
        padding-top: calc(var(--spacing) * 16);
        padding-right: calc(var(--spacing) * 24);
        padding-bottom: calc(var(--spacing) * 24);
        padding-left: calc(var(--spacing) * 48);
        pointer-events: auto;
        border-radius: 30px;
        position: relative;
        overflow: visible;
        transform: translate(-550px, -35px);
    }
    .register-title {
        margin-bottom: calc(var(--spacing) * 2);
        --tw-font-weight: var(--font-weight-black);
        font-size: 42px;
        font-weight: var(--font-weight-black);
        white-space: nowrap;
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
    }
    .register-title.animated {
        animation: 0.8s ease-out 0.2s forwards fadeInUp;
    }
    .register-description {
        margin-bottom: calc(var(--spacing) * 8);
        --tw-font-weight: var(--font-weight-normal);
        font-size: 20px;
        font-weight: var(--font-weight-normal);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .register-description.animated {
        animation: 0.6s ease-out 0.4s forwards fadeIn;
    }
    .register-form {
        opacity: 0;
        flex-direction: column;
        display: flex;
    }
    .register-form.animated {
        animation: 0.6s ease-out 0.5s forwards fadeIn;
    }
    .form-row {
        margin-bottom: calc(var(--spacing) * 5);
        gap: calc(var(--spacing) * 4);
        display: flex;
    }
    .form-row-password {
        margin-top: calc(var(--spacing) * 5);
        margin-bottom: calc(var(--spacing) * 5);
        gap: calc(var(--spacing) * 4);
        display: flex;
    }
    .form-input {
        background-color: var(--color-white);
        padding-inline: calc(var(--spacing) * 4);
        border: none;
        border-radius: 10px;
        width: 340px;
        height: 50px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-size: 17px;
    }
    .form-input::placeholder {
        color: #cacaca;
        font-size: 20px;
    }
    .form-divider {
        margin-block: calc(var(--spacing) * 6);
        background-color: #ddd;
        width: 695px;
        height: 1.5px;
    }
    .form-checkbox {
        margin-top: calc(var(--spacing) * 6);
        margin-bottom: calc(var(--spacing) * 6);
    }
    .checkbox-label {
        cursor: pointer;
        align-items: flex-start;
        gap: calc(var(--spacing) * 6);
        display: flex;
    }
    .checkbox-input {
        margin-top: calc(var(--spacing) * 3);
        appearance: none;
        cursor: pointer;
        background-color: #0000;
        border: 2px solid #fff;
        border-radius: 4px;
        flex-shrink: 0;
        width: 33px;
        height: 33px;
        position: relative;
    }
    .checkbox-input:checked {
        background-color: #fff;
    }
    .checkbox-input:checked:after {
        content: "";
        color: #1c1b1f;
        font-family: "Font Awesome 6 Free";
        font-size: 16px;
        font-weight: 900;
        line-height: 1;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .checkbox-text {
        --tw-leading: var(--leading-relaxed);
        font-size: 15px;
        line-height: var(--leading-relaxed);
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
        color: #f2f2f2;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .register-button {
        cursor: pointer;
        --tw-font-weight: var(--font-weight-black);
        font-size: 18px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        background-color: #0fc26c;
        border-radius: 36px;
        font-style: italic;
        transition-duration: 0.3s;
    }
    @media (hover: hover) {
        .register-button:hover {
            opacity: 0.9;
        }
    }
    .register-button {
        border: none;
        width: 260px;
        height: 48px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        transform: translateY(30px);
    }
    .benefits {
        padding-inline: 150px;
        padding-block: calc(var(--spacing) * 20);
        background: #1e1e1e;
    }
    .benefits-header {
        margin-bottom: calc(var(--spacing) * 16);
        justify-content: space-between;
        align-items: flex-start;
        display: flex;
    }
    .benefits-title-wrapper {
        flex: 1;
    }
    .benefits-title {
        margin-bottom: calc(var(--spacing) * 0);
        --tw-leading: 1;
        --tw-font-weight: var(--font-weight-black);
        font-size: 64px;
        line-height: 1;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
    }
    .benefits-title.animated {
        animation: 0.8s ease-out 0.1s forwards fadeInUp;
    }
    .benefits-subtitle {
        margin-bottom: calc(var(--spacing) * 6);
        --tw-leading: 1;
        --tw-font-weight: var(--font-weight-black);
        font-size: 64px;
        line-height: 1;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
    }
    .benefits-subtitle.animated {
        animation: 0.8s ease-out 0.2s forwards fadeInUp;
    }
    .benefits-description {
        --tw-leading: var(--leading-relaxed);
        font-size: 18px;
        line-height: var(--leading-relaxed);
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
        color: #fafafa;
        opacity: 0;
        width: 500px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .benefits-description.animated {
        animation: 0.6s ease-out 0.3s forwards fadeIn;
    }
    .benefits-promo {
        opacity: 0;
        flex-direction: column;
        align-self: flex-end;
        align-items: center;
        margin-top: 80px;
        padding-top: 20px;
        display: flex;
        transform: translate(-20px);
    }
    .benefits-promo.animated {
        animation: 0.6s ease-out 0.4s forwards fadeIn;
    }
    .promo-icon {
        margin-bottom: calc(var(--spacing) * 4);
        align-items: center;
        gap: calc(var(--spacing) * 3);
        font-size: 48px;
        display: flex;
    }
    .promo-bike {
        filter: grayscale() brightness(0) invert();
    }
    .promo-person,
    .promo-union {
        object-fit: contain;
        width: 48px;
        height: 48px;
    }
    .promo-plus,
    .promo-equals {
        color: #acacac;
        font-size: 44px;
        font-weight: 700;
    }
    .promo-text {
        margin-bottom: calc(var(--spacing) * 6);
        text-align: left;
        --tw-font-weight: var(--font-weight-bold);
        font-size: 20px;
        font-weight: var(--font-weight-bold);
        color: #fafafa;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        line-height: 1.4;
    }
    .promo-button {
        cursor: pointer;
        --tw-font-weight: var(--font-weight-black);
        font-size: 18px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        background-color: #0fc26c;
        border-radius: 36px;
        font-style: italic;
        transition-duration: 0.3s;
    }
    @media (hover: hover) {
        .promo-button:hover {
            opacity: 0.9;
        }
    }
    .promo-button {
        opacity: 0;
        border: none;
        width: 220px;
        height: 45px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        transform: translate(-20px);
    }
    .promo-button.animated {
        animation: 0.6s ease-out 1.2s forwards fadeIn;
    }
    .benefits-grid {
        margin-bottom: calc(var(--spacing) * 8);
        gap: calc(var(--spacing) * 6);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        display: grid;
    }
    .benefits-grid-footer {
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-top: 54px;
        display: flex;
    }
    .benefits-footer {
        opacity: 0;
        flex: auto;
    }
    .benefits-footer.animated {
        animation: 0.6s ease-out 1.1s forwards fadeIn;
    }
    .benefits-footer-text {
        max-width: 900px;
    }
    .benefit-card {
        background-color: var(--color-black);
        padding: calc(var(--spacing) * 8);
        opacity: 0;
        border-radius: 30px;
        flex-direction: column;
        width: 500px;
        height: 480px;
        display: flex;
        position: relative;
        overflow: hidden;
    }
    .benefit-card.animated {
        animation: 0.6s ease-out forwards scaleUp;
    }
    .benefit-card.animated:first-child {
        animation-delay: 0.5s;
    }
    .benefit-card.animated:nth-child(2) {
        animation-delay: 0.6s;
    }
    .benefit-card.animated:nth-child(3) {
        animation-delay: 0.7s;
    }
    .benefit-card.animated:nth-child(4) {
        animation-delay: 0.8s;
    }
    .benefit-card.animated:nth-child(5) {
        animation-delay: 0.9s;
    }
    .benefit-card.animated:nth-child(6) {
        animation-delay: 1s;
    }
    .benefit-card-title {
        margin-bottom: calc(var(--spacing) * 4);
        --tw-font-weight: var(--font-weight-black);
        font-size: 42px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        z-index: 2;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
        line-height: 1.2;
        position: relative;
    }
    .benefit-card-image {
        z-index: 1;
        width: auto;
        height: 200px;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .benefit-card-image.shield {
        width: 190px;
        height: 250px;
        transform: translate(-50%, -50%) rotate(-10deg);
    }
    .benefit-card-image.fuelgun {
        width: 325px;
        height: 270px;
        transform: translate(-50%, -56%) rotate(25deg);
    }
    .benefit-card-image.carhand {
        width: 342px;
        height: 230px;
    }
    .benefit-card-image.wash {
        width: 300px;
        height: 340px;
        transform: translate(-50%, -44%);
    }
    .benefit-card-image.tire {
        width: 170px;
        height: 200px;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .benefit-card-image.water {
        width: 270px;
        height: 270px;
    }
    .benefit-card-button {
        right: calc(var(--spacing) * 6);
        bottom: calc(var(--spacing) * 6);
        cursor: pointer;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        background-color: #2c2c2c;
        border-radius: 3.40282e38px;
        transition-duration: 0.3s;
        position: absolute;
    }
    @media (hover: hover) {
        .benefit-card-button:hover {
            background-color: #3c3c3c;
        }
    }
    .benefit-card-button {
        z-index: 3;
        border: none;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 40px;
        display: flex;
    }
    .benefit-card-button i {
        --tw-font-weight: var(--font-weight-bold);
        font-size: 24px;
        font-weight: var(--font-weight-bold);
        color: #fafafa;
    }
    .benefits-footer {
        text-align: left;
    }
    .benefits-footer-text {
        --tw-font-weight: var(--font-weight-normal);
        font-size: 18px;
        font-weight: var(--font-weight-normal);
        color: #fafafa;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        line-height: 1.2;
    }
    .functions {
        padding-inline: 150px;
        padding-block: calc(var(--spacing) * 24);
        background: #1e1e1e;
    }
    .functions-title {
        margin-bottom: calc(var(--spacing) * 20);
        --tw-leading: 1;
        --tw-font-weight: var(--font-weight-black);
        font-size: 72px;
        line-height: 1;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
    }
    .functions-title.animated {
        animation: 0.8s ease-out 0.1s forwards fadeIn;
    }
    .function-item {
        align-items: center;
        margin-bottom: 120px;
        display: flex;
    }
    .function-item .function-content {
        margin-right: 300px;
    }
    .function-item-reverse {
        flex-direction: row-reverse;
    }
    .function-item-reverse .function-content {
        margin-left: 125px;
        margin-right: 90px;
    }
    .function-1,
    .function-2,
    .function-3,
    .function-4,
    .function-5 {
        width: 1000px;
        height: 750px;
    }
    .function-content {
        opacity: 0;
        flex: none;
        max-width: 450px;
    }
    .function-content.animated {
        animation: 0.8s ease-out 0.1s forwards fadeIn;
    }
    .function-heading {
        white-space: nowrap;
        color: #fafafa;
        margin-bottom: 8px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-size: 48px;
        font-style: italic;
        font-weight: 900;
        line-height: 1.2;
    }
    .function-subheading {
        white-space: nowrap;
        color: #fafafa;
        margin-bottom: 40px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-size: 22px;
        font-weight: 700;
    }
    .function-description {
        color: #fafafa;
        margin-bottom: 32px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-size: 22px;
        font-weight: 700;
    }
    .function-detail {
        color: #fafafa;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.6;
    }
    .advertise {
        padding-inline: 150px;
        padding-block: calc(var(--spacing) * 24);
        background: #1e1e1e;
    }
    .advertise-content {
        background-color: var(--color-black);
        padding-right: calc(var(--spacing) * 16);
        padding-left: calc(var(--spacing) * 16);
        border-radius: 30px;
        justify-content: space-between;
        align-items: center;
        width: 1605px;
        height: 635px;
        margin: 0 auto;
        display: flex;
    }
    .advertise-left {
        flex-direction: column;
        max-width: 700px;
        display: flex;
    }
    .advertise-logo {
        margin-bottom: calc(var(--spacing) * 8);
        opacity: 0;
        width: 350px;
        height: 50px;
    }
    .advertise-logo.animated {
        animation: 0.8s ease-out 0.1s forwards fadeInUp;
    }
    .advertise-title {
        margin-bottom: calc(var(--spacing) * 16);
        --tw-font-weight: var(--font-weight-black);
        font-size: 52px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        text-transform: uppercase;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
        line-height: 1.1;
    }
    .advertise-title.animated {
        animation: 0.8s ease-out 0.2s forwards fadeInUp;
    }
    .advertise-subheading {
        margin-bottom: calc(var(--spacing) * 10);
        --tw-font-weight: var(--font-weight-bold);
        font-size: 32px;
        font-weight: var(--font-weight-bold);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        line-height: 1.3;
    }
    .advertise-subheading.animated {
        animation: 0.7s ease-out 0.35s forwards fadeIn;
    }
    .advertise-badge {
        padding-inline: calc(var(--spacing) * 2);
        padding-block: calc(var(--spacing) * 1);
        background-color: #e2ba04;
        border-radius: 14px;
        font-weight: 900;
        display: inline-block;
    }
    .advertise-description {
        margin-bottom: calc(var(--spacing) * 16);
        --tw-font-weight: var(--font-weight-normal);
        font-size: 18px;
        font-weight: var(--font-weight-normal);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        line-height: 1.5;
    }
    .advertise-description.animated {
        animation: 0.7s ease-out 0.45s forwards fadeIn;
    }
    .advertise-button {
        cursor: pointer;
        --tw-border-style: none;
        --tw-font-weight: var(--font-weight-black);
        font-size: 16px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        border-style: none;
        border-radius: 50px;
        font-style: italic;
        transition-duration: 0.3s;
    }
    @media (hover: hover) {
        .advertise-button:hover {
            opacity: 0.9;
        }
    }
    .advertise-button {
        opacity: 0;
        background: linear-gradient(90deg, #c40127, #ed3c19);
        width: 200px;
        height: 40px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .advertise-button.animated {
        animation: 0.7s ease-out 0.55s forwards fadeIn;
    }
    .advertise-right {
        flex-shrink: 0;
    }
    .advertise-car {
        opacity: 0;
        width: 885px;
        height: 525px;
        transform: translate(-85px, 155px);
    }
    .advertise-car.animated {
        animation: 0.8s ease-out 0.25s forwards fadeInUpAdvertiseCar;
    }
    .questions {
        padding-inline: 150px;
        padding-block: calc(var(--spacing) * 64);
        background: #1e1e1e;
    }
    .questions-title {
        margin-bottom: calc(var(--spacing) * 16);
        --tw-font-weight: var(--font-weight-black);
        font-size: 56px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        text-transform: uppercase;
        text-align: left;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
    }
    .questions-title.animated {
        animation: 0.8s ease-out 0.1s forwards fadeInUp;
    }
    .question-item {
        margin-bottom: calc(var(--spacing) * 4);
        opacity: 0;
        background: #000;
        border-radius: 30px;
        width: 1605px;
        margin: 0 auto 16px;
        transition: all 0.3s;
        overflow: hidden;
    }
    .question-item.animated {
        animation: 0.7s ease-out 0.2s forwards fadeIn;
    }
    .question-button {
        cursor: pointer;
        --tw-border-style: none;
        padding-inline: calc(var(--spacing) * 8);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 0.3s;
        background: 0 0;
        border-style: none;
        flex-shrink: 0;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 55px;
        min-height: 55px;
        max-height: 55px;
        transition-duration: 0.3s;
        display: flex;
    }
    .question-button:hover {
        opacity: 0.9;
    }
    .question-text {
        --tw-font-weight: var(--font-weight-medium);
        font-size: 22px;
        font-weight: var(--font-weight-medium);
        color: #fafafa;
        white-space: nowrap;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .question-icon {
        color: #acacac;
        flex-shrink: 0;
        font-size: 20px;
        transition: transform 0.3s;
    }
    .question-icon.active {
        transform: rotate(180deg);
    }
    .question-answer {
        background: 0 0;
        width: 100%;
        max-height: 0;
        padding: 0 32px;
        transition:
            max-height 0.3s,
            padding 0.3s;
        overflow: hidden;
    }
    .question-answer.active {
        max-height: 500px;
        padding: 0 32px 24px;
    }
    .question-answer-text {
        --tw-font-weight: var(--font-weight-normal);
        font-size: 18px;
        font-weight: var(--font-weight-normal);
        color: #fafafa;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        line-height: 1.6;
    }
    .questions-footer {
        margin-top: calc(var(--spacing) * 12);
        text-align: left;
        --tw-font-weight: var(--font-weight-black);
        font-size: 20px;
        font-weight: var(--font-weight-black);
        color: #fafafa;
        opacity: 0;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        font-style: italic;
    }
    .questions-footer.animated {
        animation: 0.7s ease-out 0.3s forwards fadeIn;
    }
    .footer {
        background-color: var(--color-black);
        padding-inline: 150px;
        padding-block: calc(var(--spacing) * 16);
        opacity: 0;
    }
    .footer.animated {
        animation: 0.8s ease-out 0.1s forwards fadeIn;
    }
    .footer-container {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 80px;
        max-width: 1920px;
        margin: 0 auto;
        display: grid;
    }
    .footer-column {
        flex-direction: column;
        display: flex;
    }
    .footer-logo {
        width: 220px;
        height: auto;
        margin-bottom: 24px;
    }
    .footer-logo-brands-wrapper {
        align-items: flex-start;
        gap: 65px;
        margin-bottom: 24px;
        display: flex;
    }
    .footer-logo-social-column {
        flex-direction: column;
        gap: 16px;
        display: flex;
    }
    .footer-brands-mobile {
        flex-direction: column;
        gap: 20px;
        display: flex;
    }
    .footer-brand-item {
        flex-direction: column;
        gap: 8px;
        display: flex;
    }
    .footer-copyright {
        --tw-font-weight: var(--font-weight-normal);
        font-size: 14px;
        font-weight: var(--font-weight-normal);
        color: #a6a6a6;
        margin-top: 105px;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        line-height: 1.6;
    }
    .footer-links {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .footer-links li {
        margin-bottom: 46px;
    }
    .footer-links a {
        --tw-font-weight: var(--font-weight-medium);
        font-size: 18px;
        font-weight: var(--font-weight-medium);
        color: #fafafa;
        font-family:
            'Cresta-black-italic'
            sans-serif;
        text-decoration: none;
        transition: opacity 0.3s;
    }
    .footer-links a:hover {
        opacity: 0.7;
    }
    .footer-social {
        gap: 16px;
        margin-bottom: 32px;
        display: flex;
    }
    .social-icon {
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        text-decoration: none;
        transition: opacity 0.3s;
        display: flex;
    }
    .social-icon img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
    .social-icon:hover {
        opacity: 0.7;
    }
    .footer-brand-text {
        margin-bottom: calc(var(--spacing) * 3);
        --tw-font-weight: var(--font-weight-medium);
        font-size: 18px;
        font-weight: var(--font-weight-medium);
        color: #fafafa;
        font-family:
            'Cresta-black-italic'
            sans-serif;
    }
    .footer-brand-logo {
        width: 180px;
        height: auto;
        margin-bottom: 24px;
    }
    @media (max-width: 1440px) {
        .menu-overlay {
            height: 545px;
            padding-bottom: 120px;
        }
        .menu-link {
            font-size: 32px;
        }
        .menu-qr-code {
            width: 95px;
            height: 95px;
        }
        .menu-app-store-badge {
            width: 133px;
            height: 45px;
        }
        .menu-google-play-badge {
            width: 170px;
            height: 66px;
        }
        .menu-qr-section {
            transform: translateY(65px);
        }
        .menu-social {
            transform: translateY(-80px);
        }
        .hero {
            height: 900px;
            padding-inline: 100px;
        }
        .hero-content {
            margin-left: calc(var(--spacing) * 8);
        }
        .hero-title {
            margin-bottom: calc(var(--spacing) * 6);
            font-size: 68px;
        }
        .hero-description {
            margin-bottom: calc(var(--spacing) * 10);
            font-size: 24px;
        }
        .btn-download,
        .btn-learn-more {
            width: 190px;
            height: 44px;
            font-size: 17px;
        }
        .hero-image {
            width: 1100px;
            height: 800px;
        }
        .hero-image img {
            width: 1100px;
            height: 785px;
        }
        .floating-badge {
            width: 51px;
            height: 51px;
        }
        .green-badge {
            width: 130px;
            height: 130px;
            top: 60px;
            right: 420px;
        }
        .green-badge span {
            font-size: 17px;
            line-height: 1.1;
        }
        .floating-badge.badge-orange {
            right: 11% !important;
        }
        .hero img[src$="badgeGreen.png"] {
            right: 8% !important;
        }
        .qr-box {
            width: 206px;
            height: 235px;
        }
        .qr-code {
            width: 110px;
            height: 110px;
        }
        .app-store-badge {
            margin-top: calc(var(--spacing) * 5);
            width: 155px;
            height: 50px;
        }
        .google-play-badge {
            margin-top: calc(var(--spacing) * 2);
            width: 197px;
            height: 75px;
        }
        .download-title {
            white-space: nowrap;
            font-size: 32px;
        }
        .app-logo {
            width: 60px;
            height: 60px;
        }
        .download-image {
            width: 671px;
            height: 609px;
        }
        .register-left {
            width: 1200px;
            height: 900px;
            margin-left: 0;
            transform: translate(-375px);
        }
        .imac-image {
            width: 1150px;
            height: 965px;
        }
        .register-right {
            padding-top: calc(var(--spacing) * 16);
            padding-right: calc(var(--spacing) * 24);
            padding-bottom: calc(var(--spacing) * 24);
            padding-left: calc(var(--spacing) * 36);
            width: 850px;
            height: 650px;
            transform: translate(-850px);
        }
        .register-title {
            font-size: 32px;
        }
        .register-description {
            font-size: 15px;
        }
        .form-input {
            width: 275px;
            height: 44px;
            font-size: 17px;
        }
        .form-input::placeholder {
            font-size: 17px;
        }
        .form-divider {
            width: 562px;
        }
        .checkbox-input {
            width: 27px;
            height: 27px;
        }
        .checkbox-text {
            font-size: 12px;
        }
        .form-checkbox {
            margin-bottom: 0;
        }
        .register-button {
            width: 212px;
            height: 36px;
            font-size: 15px;
        }
        .benefits-title,
        .benefits-subtitle {
            font-size: 48px;
        }
        .benefits-description {
            font-size: 15px;
        }
        .promo-text {
            font-size: 17px;
        }
        .promo-person {
            width: 32px;
            height: 38px;
        }
        .promo-plus {
            width: 16px;
            height: 16px;
            font-size: 16px;
        }
        .promo-equals {
            width: 16px;
            height: 11px;
            font-size: 16px;
        }
        .promo-union {
            width: 28px;
            height: 34px;
        }
        .promo-button {
            width: 186px;
            height: 36px;
            font-size: 15px;
        }
        .benefits-header {
            width: 1230px;
            transform: translate(-20px);
        }
        .benefits-grid {
            column-gap: calc(var(--spacing) * 8);
            row-gap: calc(var(--spacing) * 10);
            grid-template-columns: repeat(3, 385px);
            transform: translate(-20px);
        }
        .benefit-card {
            width: 380px;
            height: 370px;
        }
        .benefit-card-title {
            font-size: 32px;
        }
        .benefit-card-button {
            width: 77px;
            height: 36px;
        }
        .benefit-card-button i {
            font-size: 18px;
        }
        .benefits-footer-text {
            font-size: 15px;
        }
        .benefits-footer {
            width: 1230px;
            transform: translate(-20px);
        }
        .benefits-grid-footer {
            width: 1215px;
        }
        .benefit-card-image.shield {
            width: 107px;
            height: 152px;
        }
        .benefit-card-image.fuelgun {
            width: 213px;
            height: 150px;
        }
        .benefit-card-image.carHand {
            width: 342px;
            height: 230px;
        }
        .benefit-card-image.wash {
            width: 196px;
            height: 196px;
        }
        .benefit-card-image.tire {
            width: 142px;
            height: 183px;
        }
        .benefit-card-image.water {
            width: 181px;
            height: 181px;
        }
        .function-1,
        .function-2,
        .function-3,
        .function-4,
        .function-5 {
            width: 615px;
            height: 575px;
        }
        .function-item {
            margin-bottom: 20px;
        }
        .function-item .function-content {
            margin-right: 130px;
        }
        .function-item-reverse .function-content {
            margin-left: 100px;
            margin-right: 0;
        }
        .function-heading {
            font-size: 36px;
        }
        .function-subheading {
            font-size: 20px;
        }
        .function-detail {
            font-size: 18px;
        }
        .advertise-content {
            width: 1200px;
            height: 577px;
        }
        .advertise-logo {
            width: 274px;
            height: 40px;
        }
        .advertise-title {
            white-space: nowrap;
            font-size: 48px;
        }
        .advertise-subheading {
            font-size: 24px;
        }
        .advertise-description {
            font-size: 15px;
        }
        .advertise-button {
            width: 171px;
            height: 36px;
            font-size: 15px;
        }
        .advertise-car {
            width: 700px;
            height: 415px;
            transform: translate(-125px, 165px);
        }
        .questions-title {
            font-size: 48px;
        }
        .question-item {
            width: 1200px;
        }
        .question-button {
            height: 65px;
            min-height: 45px;
            max-height: 65px;
        }
        .question-text {
            font-size: 17px;
        }
        .questions-footer {
            font-size: 15px;
        }
    }
    .desktop-only {
        display: flex;
    }
    .mobile-only-flex {
        display: none;
    }
    .desktop-text {
        display: inline;
    }
    .mobile-text {
        display: none;
    }
    @media (max-width: 480px) {
        .desktop-only {
            display: none !important;
        }
        .mobile-only-flex {
            display: flex !important;
        }
        .header {
            width: 100%;
            height: 60px;
            padding: 0 20px !important;
        }
        .logo img {
            width: 120px;
            height: 24px !important;
        }
        .prihlaseni-btn {
            width: 113px;
            height: 24px;
            font-size: 12px;
        }
        .hamburger-btn {
            width: 27px;
            height: 18px;
        }
        .hamburger-btn span {
            width: 27px;
        }
        .menu-overlay {
            padding-top: calc(var(--spacing) * 4);
            padding-bottom: calc(var(--spacing) * 70);
            width: 100%;
            max-width: 480px;
            height: 678px;
            padding-left: 24px;
            padding-right: 24px;
        }
        .menu-content {
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 40px;
        }
        .menu-nav {
            gap: 12px;
        }
        .menu-right {
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            display: flex;
        }
        .menu-link {
            font-size: 32px;
        }
        .menu-qr-section {
            display: none;
        }
        .menu-brand-logo {
            height: 24px;
        }
        .menu-brand-logo[alt="Brand Cars"] {
            width: 148px;
        }
        .menu-brand-logo[alt="Brand Riders"] {
            width: 169px;
        }
        .menu-social {
            gap: 24px;
            transform: translateY(0);
        }
        .menu-social-icon img[alt="Instagram"] {
            width: 36px;
            height: 36px;
        }
        .menu-social-icon img[alt="Facebook"] {
            width: 36px;
            height: 43px;
        }
        .menu-social-icon img[alt="LinkedIn"] {
            width: 36px;
            height: 36px;
        }
        .menu-footer-links {
            justify-content: flex-start !important;
            align-items: flex-start !important;
            display: flex !important;
        }
        .hero {
            border-radius: 0;
            flex-direction: column;
            width: 100%;
            max-width: 480px;
            height: auto;
            min-height: 812px;
            margin-top: 82px;
            padding: 40px 20px;
        }
        .hero-content {
            margin-left: 0;
        }
        .floating-badge {
            width: 38px;
            height: 38px;
        }
        .hero img[src$="badgeYellow.png"] {
            top: 100% !important;
            right: 75% !important;
        }
        .hero img[src$="badgeOrange.png"] {
            top: 85% !important;
            right: 16% !important;
        }
        .hero img[src$="badgeGreen.png"] {
            top: 70% !important;
            right: 12% !important;
        }
        .hero img[src$="badgeRed.png"] {
            top: 62% !important;
            right: 83% !important;
        }
        .hero img[src$="badgeBlue.png"] {
            top: 57% !important;
            right: 23% !important;
        }
        .hero-title {
            font-size: 40px;
        }
        .green-badge {
            width: 85px;
            height: 85px;
            top: -345px;
            right: 385px;
        }
        .green-badge span {
            font-size: 12px;
        }
        .hero-description {
            font-size: 20px;
        }
        .hero-description br {
            display: none;
        }
        .hero-buttons {
            flex-direction: column;
        }
        .btn-download,
        .btn-learn-more {
            width: 183px;
            height: 30px;
            font-size: 16px;
        }
        .hero-image {
            width: 347px;
            height: 412px;
        }
        .hero-image img {
            width: 600px;
            height: 415px;
            transform: translate(-120px, 22px);
        }
        .features {
            width: 100%;
            max-width: 480px;
            padding: 40px 20px;
        }
        .features-content {
            width: 100%;
            max-width: 440px;
            height: auto;
            min-height: 618px;
            padding: 64px 20px 0;
        }
        .features-title {
            font-size: 32px;
        }
        .features-subtitle {
            font-size: 18px;
        }
        .feature-tag {
            justify-content: center;
            height: 40px;
            font-size: 14px;
        }
        .feature-tag:first-child {
            width: 125px;
        }
        .feature-tag:nth-child(2) {
            width: 132px;
        }
        .feature-tag:nth-child(3) {
            width: 125px;
        }
        .feature-tag:nth-child(4) {
            width: 120px;
        }
        .feature-tag:nth-child(5) {
            width: 115px;
        }
        .feature-tag:nth-child(6) {
            width: 120px;
        }
        .feature-tag:nth-child(7) {
            width: 171px;
        }
        .feature-tag:nth-child(8) {
            width: 110px;
        }
        .mobile-only {
            display: inline;
        }
        .tag-text {
            text-align: center;
            line-height: 1.3;
        }
        .nowrap {
            white-space: nowrap;
        }
        .features-phones {
            transform: translate(0);
        }
        .phone-img {
            width: 164px;
            height: 322px;
        }
        .phone-center {
            width: 182px;
            height: 357px;
            transform: translateY(-30px);
        }
        .download {
            padding: 40px 0;
        }
        .download-content {
            flex-direction: column;
            align-items: center;
        }
        .download-left {
            text-align: center;
            flex-direction: column;
            align-items: center;
            display: flex;
        }
        .download-header {
            flex-direction: column;
            align-items: center;
            gap: 16px;
            margin-bottom: 32px;
        }
        .app-logo {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
            transform: translateY(0);
        }
        .download-title {
            text-align: center;
            font-size: 24px;
        }
        .store-badges,
        .mobile-only-flex {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 28px;
            margin-top: 48px;
            display: flex;
        }
        .app-store-badge {
            width: 133px;
            height: 48px;
        }
        .google-play-badge {
            width: 160px;
            height: 72px;
            margin-top: 20px;
        }
        .download-right {
            margin-top: 32px;
        }
        .download-image {
            width: 90%;
            max-width: 440px;
            height: auto;
            transform: translate(0);
        }
        .register {
            display: none;
        }
        .benefits {
            width: 100%;
            max-width: 480px;
            padding: 40px 20px;
        }
        .benefits-header {
            flex-direction: column;
            width: 100%;
            max-width: 480px;
            margin-bottom: 32px;
            padding: 0 25px;
        }
        .benefits-title,
        .benefits-subtitle {
            font-size: 32px;
        }
        .benefits-description {
            width: 100%;
            font-size: 16px;
        }
        .benefits-promo {
            align-self: flex-start;
            align-items: flex-start;
            margin-top: 32px;
            transform: translate(0);
        }
        .promo-icon {
            gap: 4px;
        }
        .promo-person {
            width: 16px;
            height: 20px;
        }
        .promo-union {
            width: 14px;
            height: 17px;
        }
        .promo-equals,
        .promo-plus {
            margin-bottom: calc(var(--spacing) * 3);
            width: 20px;
            height: 20px;
            font-size: 20px;
        }
        .promo-text {
            font-size: 16px;
        }
        .benefits-grid {
            grid-template-columns: repeat(2, 1fr);
            justify-content: center;
            justify-items: center;
            gap: 16px;
            width: 100%;
            max-width: 440px;
            transform: translate(0);
        }
        .benefit-card {
            width: 160px;
            height: 225px;
            padding: 16px;
        }
        .benefit-card-title {
            font-size: 16px;
        }
        .benefit-card-button {
            width: 70px;
            height: 32px;
            bottom: 12px;
            right: 12px;
        }
        .benefit-card-image.shield {
            width: 60px;
            height: 83px;
        }
        .benefit-card-image.fuelgun {
            width: 110px;
            height: 78px;
        }
        .benefit-card-image.carhand {
            width: 142px;
            height: 116px;
        }
        .benefit-card-image.wash {
            width: 115px;
            height: 115px;
        }
        .benefit-card-image.tire {
            width: 80px;
            height: 100px;
        }
        .benefit-card-image.water {
            width: 88px;
            height: 88px;
        }
        .benefits-footer {
            padding: 0 25px;
        }
        .benefits-footer-text {
            font-size: 16px;
        }
        .benefits-grid-footer {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }
        .benefits-grid-footer-text {
            padding: 0;
        }
        .promo-button {
            width: 185px;
            height: 30px;
            font-size: 16px;
            transform: translate(0);
        }
        .desktop-text {
            display: none;
        }
        .mobile-text {
            display: inline;
        }
        .functions {
            width: 100%;
            max-width: 480px;
            padding: 40px 0;
        }
        .functions-title {
            margin-bottom: 32px;
            padding: 0 20px;
            font-size: 32px;
        }
        .function-item,
        .function-item-reverse {
            flex-direction: column;
            width: 100%;
            max-width: 480px;
            margin-bottom: 40px;
        }
        .function-item .function-content,
        .function-item-reverse .function-content {
            order: 2;
            max-width: 100%;
            margin: 20px 0 0;
            padding: 0 20px;
        }
        .function-1,
        .function-2,
        .function-3,
        .function-4,
        .function-5 {
            order: 1;
            width: 90%;
            max-width: 440px;
            height: auto;
        }
        .function-heading {
            white-space: normal;
            font-size: 24px;
        }
        .function-subheading {
            white-space: normal;
            font-size: 16px;
        }
        .function-description {
            font-size: 18px;
        }
        .function-detail {
            font-size: 16px;
        }
        .advertise {
            padding: 40px 20px;
        }
        .advertise-content {
            flex-direction: column;
            width: 100%;
            max-width: 440px;
            height: auto;
            padding: 20px;
        }
        .advertise-left {
            text-align: center;
            flex-direction: column;
            align-items: center;
            max-width: 100%;
            display: flex;
        }
        .advertise-logo {
            width: 181px;
            height: 25px;
            margin-bottom: 24px;
        }
        .advertise-title {
            margin-bottom: 24px;
            font-size: 32px;
        }
        .advertise-subheading {
            margin-bottom: 16px;
            font-size: 18px;
        }
        .advertise-description {
            text-align: center;
            margin-bottom: 24px;
            font-size: 16px;
        }
        .advertise-button {
            width: 170px;
            height: 30px;
            font-size: 14px;
        }
        .advertise-right {
            margin-top: 32px;
        }
        .advertise-car {
            width: 90%;
            max-width: 420px;
            height: auto;
            transform: translateY(-15px);
        }
        .questions {
            width: 100%;
            max-width: 480px;
            padding: 40px 20px;
        }
        .questions-title {
            margin-bottom: 24px;
            font-size: 32px;
        }
        .question-item {
            width: 100%;
            max-width: 440px;
            border-radius: 14px !important;
        }
        .question-text {
            white-space: normal;
            text-align: left;
            font-size: 18px;
        }
        .question-answer-text {
            text-align: left;
            font-size: 18px;
        }
        .questions-footer {
            font-size: 16px;
        }
        .footer {
            width: 100%;
            max-width: 480px;
            padding: 48px 24px;
        }
        .footer-container {
            grid-template-columns: 1fr;
            gap: 40px;
        }
        .footer-logo {
            width: 150px;
            height: 35px;
            margin-bottom: 20px;
        }
        .footer-logo-brands-wrapper {
            flex-direction: row;
            align-items: flex-start;
            gap: 80px;
            margin-bottom: 32px;
        }
        .footer-logo-social-column {
            flex-direction: column;
            gap: 20px;
            display: flex;
        }
        .footer-brands-mobile {
            flex-direction: column;
            gap: 20px;
        }
        .footer-brand-item {
            gap: 6px;
        }
        .footer-brand-text {
            margin-bottom: 0;
            font-size: 14px;
        }
        .footer-social {
            justify-content: flex-start;
            margin-bottom: 32px;
        }
        .social-icon {
            width: auto;
            height: auto;
        }
        .social-icon:first-child img {
            width: 32px;
            height: 33px;
        }
        .social-icon:nth-child(2) img {
            width: 16px;
            height: 33px;
        }
        .social-icon:nth-child(3) img {
            width: 33px;
            height: 32px;
        }
        .footer-links {
            flex-direction: column;
            display: flex;
        }
        .footer-links li {
            margin-bottom: 20px;
        }
        .footer-links a {
            font-size: 18px;
        }
        .footer-copyright {
            margin-top: 32px;
            font-size: 15px;
        }
        .footer-brand-text {
            font-size: 16px;
        }
        .footer-brand-logo {
            width: 140px;
            margin-bottom: 16px;
        }
    }
}
@layer utilities {
    .mt-8 {
        margin-top: calc(var(--spacing) * 8);
    }
    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8);
    }
    .flex {
        display: flex;
    }
    .h-10 {
        height: calc(var(--spacing) * 10);
    }
    .w-full {
        width: 100%;
    }
    .transform {
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    }
    .items-center {
        align-items: center;
    }
    .justify-between {
        justify-content: space-between;
    }
    .gap-6 {
        gap: calc(var(--spacing) * 6);
    }
    .overflow-visible {
        overflow: visible;
    }
    .bg-black {
        background-color: var(--color-black);
    }
    .pt-10 {
        padding-top: calc(var(--spacing) * 10);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInUpHand {
    0% {
        opacity: 0;
        transform: translate(-100px, 105px);
    }
    to {
        opacity: 1;
        transform: translate(-100px, 65px);
    }
}
@keyframes fadeInUpAdvertiseCar {
    0% {
        opacity: 0;
        transform: translate(-85px, 195px);
    }
    to {
        opacity: 1;
        transform: translate(-85px, 155px);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes float {
    0%,
    to {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(15deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(15deg);
    }
}
@keyframes scaleUp {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@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-duration {
    syntax: "*";
    inherits: false;
}
@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}
@property --tw-font-weight {
    syntax: "*";
    inherits: false;
}
@property --tw-leading {
    syntax: "*";
    inherits: false;
}
@property --tw-tracking {
    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-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}
@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}
@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}