* {
        box-sizing: border-box;
    }

    html {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        margin: 0;
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
        background:
            radial-gradient(circle at top left, rgba(120,119,255,.25), transparent 32%),
            radial-gradient(circle at bottom right, rgba(0,212,255,.18), transparent 34%),
            #f5f5f7;
        color: #1d1d1f;
    }

    .demo-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 34px;
    }

    .demo-wrap {
        width: 100%;
        max-width: 1240px;
    }

    .demo-hero {
        position: relative;
        overflow: hidden;
        margin-bottom: 24px;
        padding: 38px;
        border-radius: 34px;
        border: 1px solid rgba(255,255,255,.9);
        background: rgba(255,255,255,.78);
        box-shadow: 0 28px 80px rgba(0,0,0,.12);
    }

    .kz-hero-brand {
        display: flex;
        align-items: center;
        gap: 18px;
        width: 100%;
        min-width: 0;
        margin-bottom: 18px;
    }

    .kz-hero-logo {
        width: 64px;
        height: 64px;
        flex: 0 0 auto;
        border-radius: 18px;
        object-fit: cover;
        box-shadow: 0 14px 34px rgba(0,0,0,.16);
    }

    .kz-hero-brand h1 {
        margin: 0;
        min-width: 0;
        max-width: 100%;
        font-size: clamp(34px, 5vw, 62px);
        line-height: 1.03;
        letter-spacing: -0.055em;
        overflow-wrap: anywhere;
    }

    .demo-hero p {
        display: block;
        width: 100%;
        max-width: 920px;
        margin: 0;
        color: #52525b;
        line-height: 1.72;
        font-size: 16px;
    }

    .demo-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        width: 100%;
    }

    .demo-card {
        position: relative;
        overflow: hidden;
        min-width: 0;
        min-height: 210px;
        padding: 26px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.32),
            0 22px 60px rgba(0,0,0,.16);
        transition:
            transform .28s cubic-bezier(.2,.8,.2,1),
            box-shadow .28s cubic-bezier(.2,.8,.2,1),
            filter .28s ease;
    }

    .demo-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(circle at 18% 12%, rgba(255,255,255,.38), transparent 28%),
            linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
    }

    .demo-card > * {
        position: relative;
        z-index: 1;
    }

    .demo-card:hover {
        transform: translateY(-7px) scale(1.018);
        filter: saturate(1.08) brightness(1.04);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.42),
            0 34px 80px rgba(0,0,0,.22);
    }

    .demo-card h2 {
        margin: 0 0 12px;
        font-size: 24px;
        line-height: 1.15;
        letter-spacing: -0.035em;
        overflow-wrap: anywhere;
    }

    .demo-card p {
        margin: 0;
        font-size: 14px;
        line-height: 1.55;
        opacity: .94;
        overflow-wrap: anywhere;
    }

    .demo-card span {
        display: block;
        margin-top: 24px;
        font-size: 13px;
        font-weight: 800;
    }

    .card-library {
        background: linear-gradient(135deg, #1e1b4b, #4f46e5, #06b6d4);
    }

    .card-restaurant {
        background: linear-gradient(135deg, #7c2d12, #e35e1a, #facc15);
    }

    .card-hotel {
        background: linear-gradient(135deg, #1e3a8a, #2563eb, #60a5fa);
    }

    .card-ai {
        background: linear-gradient(135deg, #111827, #4f46e5, #06b6d4);
    }

    .card-ref {
        background: linear-gradient(135deg, #111827, #374151, #94a3b8);
    }

    .card-main {
        background: linear-gradient(135deg, #020617, #334155, #a855f7);
    }

    .demo-note {
        margin-top: 18px;
        color: #8a8a8e;
        font-size: 12px;
        text-align: center;
    }

    @media (max-width: 860px) {
        .demo-page {
            align-items: flex-start;
            padding: 18px;
        }

        .demo-hero {
            padding: 28px 24px;
            border-radius: 28px;
        }

        .demo-grid {
            grid-template-columns: 1fr;
        }

        .demo-card {
            min-height: 170px;
            border-radius: 24px;
        }
    }

    @media (max-width: 560px) {
        .demo-page {
            padding: 12px;
        }

        .demo-hero {
            padding: 22px 18px;
            border-radius: 22px;
        }

        .kz-hero-brand {
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
        }

        .kz-hero-logo {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            margin-top: 4px;
        }

        .kz-hero-brand h1 {
            font-size: 30px;
            line-height: 1.08;
            letter-spacing: -0.035em;
        }

        .demo-hero p {
            font-size: 14px;
            line-height: 1.62;
        }

        .demo-card {
            padding: 22px;
        }

        .demo-card h2 {
            font-size: 22px;
        }
    }
.demo-card {
    backdrop-filter: blur(10px);
}
.demo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
    opacity: 0;
    transition: opacity .3s;
}

.demo-card:hover::after {
    opacity: 1;
}
.demo-card.is-live::after {
    content: "";
    position: absolute;
    top: 35px;
    left: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0);
    opacity: .9;
    z-index: 3;
    animation: kzPulse 1.2s infinite;
}

.demo-card.is-live:hover::after {
    animation: kzPulse 1.2s infinite;
    box-shadow: 0 0 0 0 rgba(34,197,94,.65);
}

.demo-card.is-live.has-badge::after {
    top: 32px;
    left: 8px;
}

@keyframes kzPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.65);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(34,197,94,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0);
    }
}
.demo-card.has-badge .demo-badge {
    position: absolute;
    top: -20px;
    right: 14px;
    z-index: 4;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.why-kobizeka {
    margin-top: 24px;
    padding: 26px;
    border-radius: 30px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 22px 60px rgba(0,0,0,.10);
}

.why-kobizeka h2 {
    margin: 0 0 18px;
    font-size: 24px;
    letter-spacing: -0.035em;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.why-item {
    padding: 18px;
    border-radius: 22px;
    background: rgba(245,245,247,.85);
}

.why-item strong {
    display: block;
    margin-bottom: 7px;
    font-size: 15px;
    color: #111827;
}

.why-item span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #52525b;
}

@media (max-width: 860px) {
    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-kobizeka {
        padding: 22px;
        border-radius: 24px;
    }
}
.kz-wordmark {
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #111827;
}

.kz-wordmark span {
    color: #2563eb;
}

.kz-wordmark sup {
    color: #2563eb;
    font-size: .42em;
    margin-left: 2px;
    vertical-align: super;
}