.floating-demo-btn {
    --floating-bg: linear-gradient(150deg, rgba(16, 24, 42, 0.86) 0%, rgba(26, 33, 46, 0.90) 100%);
    --floating-text: var(--colorwhite);
    --floating-border: 1px solid rgba(245, 249, 255, 0.30);
    --floating-shadow: 0 14px 30px rgba(7, 18, 39, 0.32);
    --floating-shadow-hover: 0 18px 36px rgba(7, 18, 39, 0.40);

    position: var(--positionfixed);
    left: max(var(--twentypixels), env(safe-area-inset-left));
    bottom: max(var(--twentypixels), env(safe-area-inset-bottom));
    z-index: 1200;
    display: var(--inlineflex);
    align-items: var(--justifycenter);
    justify-content: var(--justifycenter);
    min-height: 52px;
    padding: 0 var(--twentyfourpixels);
    border: var(--floating-border);
    border-radius: 999px;
    background: var(--floating-bg);
    color: var(--floating-text);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    font-family: var(--fontfamily);
    font-weight: var(--weightsemibold);
    font-size: var(--sixteenpixels);
    letter-spacing: 0px;
    cursor: var(--pointer);
    box-shadow: var(--floating-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.floating-demo-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--floating-shadow-hover);
    filter: brightness(1.06);
}

.floating-demo-btn:focus-visible {
    outline: 3px solid rgba(245, 249, 255, 0.58);
    outline-offset: 2px;
}

.floating-demo-btn:active {
    transform: translateY(0);
}

.floating-demo-modal {
    position: var(--positionfixed);
    inset: var(--zero);
    z-index: 1400;
    display: var(--displaygrid);
    place-items: var(--aligncenter);
    padding: var(--twentypixels);
    background: rgba(8, 14, 24, 0.68);
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    opacity: var(--zero);
    pointer-events: var(--none);
    transition: opacity 0.2s ease;
}

.floating-demo-modal.is-open {
    opacity: var(--one);
    pointer-events: var(--auto);
}

.floating-demo-dialog {
    width: min(1100px, var(--widthfull));
    height: min(84vh, 820px);
    border-radius: 22px;
    border: 1px solid rgba(245, 249, 255, 0.24);
    background: linear-gradient(155deg, rgba(19, 27, 40, 0.94) 0%, rgba(27, 36, 52, 0.92) 100%);
    box-shadow: 0 28px 70px rgba(4, 10, 20, 0.55);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    display: var(--displaygrid);
    grid-template-rows: auto 1fr;
    overflow: var(--hidden);
}

.floating-demo-topbar {
    display: var(--displayflex);
    align-items: var(--aligncenter);
    justify-content: var(--justifybetween);
    gap: var(--twelvepixels);
    padding: 12px var(--sixteenpixels);
    border-bottom: 1px solid rgba(245, 249, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

.floating-demo-title {
    margin: var(--zero);
    font-family: var(--fontfamily);
    font-size: var(--eighteenpixels);
    font-weight: var(--weightsemibold);
    color: var(--colorwhite);
    letter-spacing: 0px;
}

.floating-demo-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(245, 249, 255, 0.26);
    background: rgba(255, 255, 255, 0.08);
    color: var(--colorwhite);
    font-size: 26px;
    line-height: 1;
    cursor: var(--pointer);
    display: var(--inlineflex);
    align-items: var(--justifycenter);
    justify-content: var(--justifycenter);
}

.floating-demo-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.floating-demo-close:focus-visible {
    outline: 2px solid rgba(245, 249, 255, 0.58);
    outline-offset: 2px;
}

.floating-demo-calendly {
    width: var(--widthfull);
    height: var(--widthfull);
    min-height: 540px;
    background: rgba(255, 255, 255, 0.03);
}

.floating-demo-calendly iframe {
    width: var(--widthfull);
    height: var(--widthfull);
    border: 0;
}

@media (max-width: 768px) {
    .floating-demo-btn {
        left: max(var(--sixteenpixels), env(safe-area-inset-left));
        right: max(var(--sixteenpixels), env(safe-area-inset-right));
        bottom: max(var(--sixteenpixels), env(safe-area-inset-bottom));
        width: auto;
    }

    .floating-demo-modal {
        padding: var(--twelvepixels);
    }

    .floating-demo-dialog {
        height: min(88vh, 900px);
        border-radius: 16px;
    }

    .floating-demo-topbar {
        padding: 10px var(--twelvepixels);
    }

    .floating-demo-title {
        font-size: var(--sixteenpixels);
    }

    .floating-demo-calendly {
        min-height: 480px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-demo-btn {
        transition: none;
    }

    .floating-demo-modal {
        transition: none;
    }
}