/* Key-Hub home-hero module. Generated from the child-theme stylesheet; keep selector order intact. */

.kh-main-hero-showcase__pulse-labels {
    position: absolute;
    z-index: 25;
    right: 0;
    bottom: 0;
    left: 44%;
    width: 56%;
    height: clamp(48px, 6.9vw, 66px);
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

.kh-main-hero-showcase__pulse-label-group {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, .8vw, 14px);
    padding: 0 4%;
    color: rgba(36, 72, 116, .92);
    font-size: clamp(12px, .9vw, 14.5px);
    font-weight: 660;
    line-height: 1;
    letter-spacing: -.015em;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .84);
    animation: khHeroPulseLabelCycle 54.4s linear infinite;
    animation-delay: calc(var(--kh-pulse-group-index) * 13.6s);
}

.kh-main-hero-showcase__pulse-label-group i {
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(103, 147, 199, .48);
    box-shadow: 0 0 8px rgba(255, 255, 255, .72);
}

.kh-main-hero-showcase__pulse-label-group span {
    flex: 0 0 auto;
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .kh-main-hero-showcase__pulse-labels {
        left: 47%;
        width: 53%;
    }

    .kh-main-hero-showcase__pulse-label-group {
        gap: 10px;
        font-size: 12px;
    }}

@media (min-width: 1024px) and (max-width: 1199px) {
    .kh-main-hero-showcase__pulse-labels {
        left: 38%;
        width: 62%;
    }

    .kh-main-hero-showcase__pulse-label-group {
        gap: 6px;
        font-size: 10px;
    }}

@media (max-width: 1023px) {
    .kh-main-hero-showcase__pulse-labels {
        display: none;
    }}

@media (prefers-reduced-motion: reduce) {
    .kh-main-hero-showcase__pulse-labels {
        display: none;
    }}
.kh-main-hero-showcase__features {
    --kh-feature-glass-accent: #71b9ff;
    isolation: isolate;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .94);
    background:
        radial-gradient(ellipse at 50% -8%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .2) 43%, transparent 68%),
        radial-gradient(ellipse at 50% 112%, color-mix(in srgb, var(--kh-feature-glass-accent) 10%, rgba(214, 231, 255, .3)) 0%, transparent 62%),
        linear-gradient(155deg, rgba(255, 255, 255, .58) 0%, rgba(239, 247, 255, .39) 48%, rgba(220, 236, 255, .47) 100%);
    box-shadow:
        0 6px 13px rgba(47, 79, 139, .05),
        0 0 14px 1px rgba(255, 255, 255, .72),
        0 0 21px color-mix(in srgb, var(--kh-feature-glass-accent) 21%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, .72),
        inset 2px 0 3px rgba(255, 255, 255, .72),
        inset -2px 0 4px rgba(185, 211, 249, .36),
        inset 0 2px 3px rgba(255, 255, 255, .95),
        inset 0 -3px 5px color-mix(in srgb, var(--kh-feature-glass-accent) 15%, rgba(184, 211, 249, .28)),
        inset 11px 0 24px rgba(255, 255, 255, .12),
        inset -11px 0 24px rgba(177, 207, 247, .11);
    -webkit-backdrop-filter: blur(24px) saturate(1.1) brightness(1.06);
    backdrop-filter: blur(24px) saturate(1.1) brightness(1.06);
}

.kh-main-hero-showcase__features::before,
.kh-main-hero-showcase__features::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.kh-main-hero-showcase__features::before {
    z-index: 0;
    inset: 1px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 4% 9%, rgba(255, 255, 255, 1) 0 2px, rgba(255, 255, 255, .5) 3px, transparent 16px),
        radial-gradient(circle at 96% 9%, rgba(255, 255, 255, .96) 0 2px, rgba(255, 255, 255, .4) 3px, transparent 17px),
        linear-gradient(116deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .16) 18%, transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, transparent 7%, transparent 91%, rgba(255, 255, 255, .38) 100%);
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, .58),
        inset -1px 0 0 color-mix(in srgb, var(--kh-feature-glass-accent) 18%, rgba(255, 255, 255, .42)),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 color-mix(in srgb, var(--kh-feature-glass-accent) 22%, rgba(255, 255, 255, .52));
    opacity: .86;
}

.kh-main-hero-showcase__features::after {
    z-index: -1;
    inset: -2px;
    padding: 1.5px;
    border-radius: calc(26px + 2px);
    background: conic-gradient(from 205deg,
        color-mix(in srgb, var(--kh-feature-glass-accent) 76%, white) 0deg,
        rgba(255, 255, 255, 1) 48deg,
        color-mix(in srgb, var(--kh-feature-glass-accent) 50%, white) 112deg,
        rgba(255, 255, 255, 1) 182deg,
        color-mix(in srgb, var(--kh-feature-glass-accent) 70%, white) 255deg,
        rgba(255, 255, 255, .98) 316deg,
        color-mix(in srgb, var(--kh-feature-glass-accent) 76%, white) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .74;
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, .95))
        drop-shadow(0 0 8px color-mix(in srgb, var(--kh-feature-glass-accent) 45%, transparent));
}

.kh-main-hero-showcase__feature {
    position: relative;
    z-index: 1;
    border-right: 0;
}

.kh-main-hero-showcase__feature:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 7px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(118, 151, 207, .3) 18%, rgba(255, 255, 255, .86) 50%, rgba(118, 151, 207, .26) 82%, transparent);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .42);
}

.kh-main-hero-showcase__feature-icon {
    position: relative;
    border-color: color-mix(in srgb, var(--kh-feature-glass-accent) 48%, white);
    background:
        radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 1) 0 1px, transparent 8px),
        linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(220, 235, 255, .58));
    box-shadow:
        0 5px 14px rgba(29, 91, 196, .09),
        0 0 10px rgba(113, 185, 255, .14),
        inset 0 0 0 1px rgba(255, 255, 255, .66),
        inset 1px 1px 2px rgba(255, 255, 255, .95),
        inset -1px -1px 2px rgba(123, 173, 235, .18);
}

@media (min-width: 901px) {
    .kh-main-hero-showcase__features {
        top: 63.2%;
        left: 5.15%;
        width: 42.2%;
        height: 22.2%;
        min-height: 0;
        padding: 13px 10px;
        border-radius: 24px;
    }

    .kh-main-hero-showcase__features::after {
        border-radius: 26px;
    }

    .kh-main-hero-showcase__feature {
        grid-template-columns: 40px minmax(0, 1fr);
        align-content: center;
        column-gap: 11px;
        padding: 0 14px;
    }

    .kh-main-hero-showcase__feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .kh-main-hero-showcase__feature-icon svg {
        width: 25px;
        height: 25px;
    }

    .kh-main-hero-showcase__feature b {
        min-height: 36px;
        font-size: clamp(12px, .75vw, 13px);
        line-height: 1.34;
    }

    .kh-main-hero-showcase__feature small {
        margin-top: 7px;
        font-size: clamp(9px, .61vw, 11px);
        line-height: 1.42;
    }}

@media (max-width: 900px) {
    .kh-main-hero-showcase__features::after {
        border-radius: 22px;
    }

    .kh-main-hero-showcase__feature:not(:last-child)::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(118, 151, 207, .28) 18%, rgba(255, 255, 255, .82) 50%, rgba(118, 151, 207, .24) 82%, transparent);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .38);
    }}

@media (max-width: 900px) {
    .home #kh-main-hero.kh-main-hero-showcase,
    #kh-main-hero.kh-main-hero-showcase {
        margin-right: auto;
        margin-left: auto;
        transform: none;
    }

    .kh-main-hero-showcase__background {
        object-fit: cover;
    }}
.home #kh-main-hero.kh-main-hero-premium,
#kh-main-hero.kh-main-hero-premium {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(1460px, calc(100% - 28px));
    min-height: 340px;
    margin: 18px auto 38px;
    padding: 34px 64px 24px;
    border-radius: 28px;
    background: #f6f9ff;
    box-shadow: 0 28px 80px rgba(37, 75, 145, .12);
    font-family: var(--kh-ui-font);
}

#kh-main-hero.kh-main-hero-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 38%, rgba(255,255,255,.18) 68%, rgba(255,255,255,.04) 100%),
        radial-gradient(circle at 22% 24%, rgba(74, 194, 255, .14), transparent 32%);
}

.kh-main-hero-premium__media {
    position: absolute;
    inset: 0;
    z-index: -3;
    transform: scale(1.015);
    animation: khHeroImageBreathe 9s ease-in-out infinite;
}

.kh-main-hero-premium__media picture,
.kh-main-hero-premium__media img {
    width: 100%;
    height: 100%;
    display: block;
}

.kh-main-hero-premium__media img {
    object-fit: cover;
    object-position: center right;
}

.kh-main-hero-premium__shine,
.kh-main-hero-premium__orb {
    position: absolute;
    pointer-events: none;
}

.kh-main-hero-premium__shine {
    top: -28%;
    bottom: -28%;
    left: 33%;
    z-index: -1;
    width: 28%;
    transform: rotate(12deg) translateX(-120%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
    filter: blur(10px);
    animation: khHeroShine 7.5s ease-in-out infinite;
}

.kh-main-hero-premium__orb {
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(47, 128, 255, .24), transparent 68%);
    filter: blur(8px);
    opacity: .7;
}

.kh-main-hero-premium__orb--one {
    right: 18%;
    top: 12%;
    width: 190px;
    height: 190px;
    animation: khHeroOrbOne 8s ease-in-out infinite;
}

.kh-main-hero-premium__orb--two {
    right: 5%;
    bottom: 5%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(115, 91, 255, .18), transparent 68%);
    animation: khHeroOrbTwo 10s ease-in-out infinite;
}

.kh-main-hero-premium__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(360px, 1fr);
    grid-template-rows: 1fr auto;
    gap: 22px 34px;
    min-height: 282px;
}

.kh-main-hero-premium__content {
    align-self: center;
}

.kh-main-hero-premium__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 16px;
    padding: 0 12px;
    border: 1px solid rgba(47, 128, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #245bb1;
    box-shadow: 0 12px 28px rgba(37, 75, 145, .08);
    font-size: 12px;
    font-weight: 800;
}

#kh-main-hero.kh-main-hero-premium h1 {
    max-width: 520px;
    margin: 0;
    color: #111827;
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: 0;
}

#kh-main-hero.kh-main-hero-premium p {
    max-width: 520px;
    margin: 22px 0 0;
    color: #4d5b73;
    font-size: 17px;
    line-height: 1.65;
}

.kh-main-hero-premium__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.kh-main-hero-premium__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 13px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 800;
    transition: transform .24s ease, box-shadow .24s ease, filter .24s ease, border-color .24s ease, color .24s ease;
}

.kh-main-hero-premium__btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, #6c59ff 0%, #2fbfff 100%);
    box-shadow: 0 18px 42px rgba(47, 128, 255, .28);
}

.kh-main-hero-premium__btn--ghost {
    border: 1px solid rgba(139, 170, 220, .32);
    color: #172033 !important;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 14px 34px rgba(37, 75, 145, .09);
}

.kh-main-hero-premium__btn:hover {
    transform: translateY(-3px);
}

.kh-main-hero-premium__btn--primary:hover {
    filter: brightness(1.04);
    box-shadow: 0 22px 52px rgba(47, 128, 255, .36);
}

.kh-main-hero-premium__btn--ghost:hover {
    border-color: rgba(47, 128, 255, .42);
    color: #245bb1 !important;
    box-shadow: 0 18px 42px rgba(37, 75, 145, .13);
}

.kh-main-hero-premium__benefits {
    grid-column: 1 / 3;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(620px, 100%);
    overflow: hidden;
    border: 1px solid rgba(139, 170, 220, .24);
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 22px 56px rgba(37, 75, 145, .12);
    backdrop-filter: blur(18px);
    animation: khHeroBenefitsIn .8s ease both;
}

.kh-main-hero-premium__benefits span {
    min-height: 90px;
    padding: 14px 18px;
    border-right: 1px solid rgba(139, 170, 220, .18);
}

.kh-main-hero-premium__benefits span:last-child {
    border-right: 0;
}

.kh-main-hero-premium__benefits i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(114, 87, 255, .12), rgba(49, 199, 243, .14));
    color: #5a4df0;
    font-style: normal;
    font-size: 0;
    font-weight: 950;
}

.kh-main-hero-premium__benefits i svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kh-main-hero-premium__benefits b {
    display: block;
    margin-top: 9px;
    color: #111827;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}

.kh-main-hero-premium__benefits small {
    display: block;
    margin-top: 6px;
    color: #71809b;
    font-size: 12px;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .kh-main-hero-premium__media,
    .kh-main-hero-premium__shine,
    .kh-main-hero-premium__orb,
    .kh-main-hero-premium__benefits {
        animation: none !important;
    }}

@media (max-width: 991px) {
    .home #kh-main-hero.kh-main-hero-premium,
    #kh-main-hero.kh-main-hero-premium {
        width: calc(100% - 10px);
        min-height: 0;
        margin: 8px auto 22px;
        padding: 10px 10px 14px;
        border-radius: 22px;
    }

    #kh-main-hero.kh-main-hero-premium::before {
        background:
            linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.76) 45%, rgba(255,255,255,.16) 100%),
            radial-gradient(circle at 50% 18%, rgba(74, 194, 255, .16), transparent 36%);
    }

    .kh-main-hero-premium__media {
        position: relative;
        inset: auto;
        z-index: 0;
        height: auto;
        aspect-ratio: 2.16 / 1;
        margin: 0 -4px 0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 14px 34px rgba(37, 75, 145, .10);
        order: 2;
        animation: none;
    }

    .kh-main-hero-premium__media img {
        object-fit: cover;
        object-position: center center;
    }

    .kh-main-hero-premium__inner {
        display: flex;
        flex-direction: column;
        min-height: 0;
        gap: 16px;
    }

    .kh-main-hero-premium__content {
        order: -1;
    }

    .kh-main-hero-premium__eyebrow {
        min-height: 30px;
        margin-bottom: 12px;
        padding: 0 10px;
        font-size: 11px;
    }

    #kh-main-hero.kh-main-hero-premium h1 {
        font-size: 30px;
        line-height: 1.05;
    }

    #kh-main-hero.kh-main-hero-premium p {
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.45;
    }

    .kh-main-hero-premium__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 18px;
    }

    .kh-main-hero-premium__btn {
        min-height: 42px;
        padding: 0 8px;
        border-radius: 10px;
        font-size: 12px;
    }

    .kh-main-hero-premium__benefits {
        grid-template-columns: 1fr;
        width: 100%;
        border-radius: 16px;
        order: 3;
    }

    .kh-main-hero-premium__benefits span {
        min-height: 74px;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 10px;
        align-items: center;
        padding: 12px 14px;
        text-align: left;
        border-right: 0;
        border-bottom: 1px solid rgba(139, 170, 220, .18);
    }

    .kh-main-hero-premium__benefits span:last-child {
        border-bottom: 0;
    }

    .kh-main-hero-premium__benefits i {
        width: 28px;
        height: 28px;
        grid-row: 1 / 3;
        margin: 0;
        border-radius: 10px;
        font-size: 11px;
    }

    .kh-main-hero-premium__benefits b {
        margin-top: 0;
        font-size: 12px;
        line-height: 1.18;
    }

    .kh-main-hero-premium__benefits small {
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.3;
    }}
.home #kh-main-hero.kh-main-hero-showcase,
#kh-main-hero.kh-main-hero-showcase {
    --kh-hero-ink: #071b49;
    --kh-hero-copy: #304c86;
    --kh-hero-blue: #0959f7;
    --kh-hero-blue-bright: #1295ff;
    --kh-hero-line: rgba(112, 151, 221, .22);
    --kh-hero-glass: rgba(255, 255, 255, .7);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(1600px, calc(100% - 20px));
    aspect-ratio: 2.04 / 1;
    min-height: 620px;
    max-height: 784px;
    margin: 14px auto 34px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 0;
    background: #f2f7ff;
    box-shadow: 0 30px 80px rgba(40, 85, 156, .13);
    color: var(--kh-hero-ink);
    font-family: var(--kh-ui-font, "Montserrat", sans-serif);
}

.kh-main-hero-showcase *,
.kh-main-hero-showcase *::before,
.kh-main-hero-showcase *::after {
    box-sizing: border-box;
}

.kh-main-hero-showcase__background {
    position: absolute;
    inset: 0;
    z-index: -3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.kh-main-hero-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .08) 38%, transparent 62%);
}

.kh-main-hero-showcase__copy {
    position: absolute;
    z-index: 10;
    top: 8.4%;
    left: 5.6%;
    width: 43.5%;
}

.kh-main-hero-showcase__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 17px;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    color: var(--kh-hero-blue);
    background: rgba(255, 255, 255, .73);
    box-shadow: 0 12px 30px rgba(46, 93, 170, .09), inset 0 1px 0 #fff;
    backdrop-filter: blur(12px);
    font-size: clamp(12px, .95vw, 16px);
    font-weight: 750;
    line-height: 1;
}

.kh-main-hero-showcase__eyebrow svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#kh-main-hero.kh-main-hero-showcase h1 {
    max-width: 690px;
    margin: 27px 0 0;
    color: var(--kh-hero-ink);
    font-size: clamp(43px, 3.7vw, 66px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -.035em;
}

#kh-main-hero.kh-main-hero-showcase h1 span {
    color: #7567ff;
    background: linear-gradient(135deg, #7567ff 0%, #35c7ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#kh-main-hero.kh-main-hero-showcase p {
    max-width: 650px;
    margin: 23px 0 0;
    color: var(--kh-hero-copy);
    font-size: clamp(14px, 1.15vw, 19px);
    font-weight: 500;
    line-height: 1.55;
}

.kh-main-hero-showcase__actions {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 26px;
}

.kh-main-hero-showcase__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 0 30px;
    gap: 24px;
    border: 1px solid transparent;
    border-radius: 20px;
    text-decoration: none !important;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 750;
    line-height: 1;
    touch-action: manipulation;
}

.kh-main-hero-showcase__button svg {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kh-main-hero-showcase__button--primary {
    min-width: 258px;
    color: #fff !important;
    background: linear-gradient(135deg, #7567ff 0%, #35c7ff 100%);
    box-shadow: 0 12px 26px rgba(70, 118, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.kh-main-hero-showcase__button--secondary {
    min-width: 266px;
    color: #0a1635 !important;
    background: rgba(255, 255, 255, .72);
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 30px rgba(48, 83, 147, .08), inset 0 1px 0 #fff;
    backdrop-filter: blur(12px);
}

.kh-main-hero-showcase__button--secondary svg {
    color: var(--kh-hero-blue);
}

.kh-main-hero-showcase__button:focus-visible,
.kh-main-hero-showcase__product:focus-visible {
    outline: 3px solid rgba(9, 89, 247, .44);
    outline-offset: 4px;
}

.kh-main-hero-showcase__features {
    position: absolute;
    z-index: 10;
    left: 5.4%;
    top: 59.2%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 42.8%;
    min-height: 21.5%;
    padding: 21px 10px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 26px;
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 18px 45px rgba(58, 92, 151, .09), inset 0 1px 0 #fff;
    backdrop-filter: blur(16px);
}

.kh-main-hero-showcase__feature {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-content: start;
    column-gap: 10px;
    min-width: 0;
    padding: 0 12px;
    border-right: 1px solid var(--kh-hero-line);
}

.kh-main-hero-showcase__feature:last-child {
    border-right: 0;
}

.kh-main-hero-showcase__feature-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(104, 153, 241, .42);
    border-radius: 13px;
    color: var(--kh-hero-blue);
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(219, 233, 255, .82));
    box-shadow: 0 7px 18px rgba(29, 91, 196, .13), inset 0 1px 0 #fff;
}

.kh-main-hero-showcase__feature-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kh-main-hero-showcase__feature b,
.kh-main-hero-showcase__feature small {
    display: block;
}

.kh-main-hero-showcase__feature b {
    color: #0b1635;
    font-size: clamp(12px, .88vw, 15px);
    font-weight: 800;
    line-height: 1.42;
    overflow-wrap: normal;
    word-break: normal;
}

.kh-main-hero-showcase__feature small {
    margin-top: 21px;
    color: #526b9e;
    font-size: clamp(10px, .72vw, 12px);
    font-weight: 500;
    line-height: 1.55;
}

.kh-main-hero-showcase__trust {
    position: absolute;
    z-index: 10;
    left: 5.1%;
    bottom: 5.7%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    align-items: start;
    gap: 24px;
    width: 44.5%;
}

.kh-main-hero-showcase__trust > span {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
}

.kh-main-hero-showcase__trust i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--kh-hero-blue);
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 8px 20px rgba(42, 89, 169, .1);
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
}

.kh-main-hero-showcase__trust b,
.kh-main-hero-showcase__trust small {
    display: block;
}

.kh-main-hero-showcase__trust b {
    color: #101a36;
    font-size: clamp(10px, .72vw, 12px);
    font-weight: 800;
    line-height: 1.35;
}

.kh-main-hero-showcase__trust small {
    margin-top: 10px;
    color: #526b9e;
    font-size: clamp(9px, .67vw, 11px);
    font-weight: 500;
    line-height: 1.3;
}

.kh-main-hero-showcase__visual {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.kh-main-hero-showcase__service-icon {
    position: absolute;
    z-index: 4;
    top: 5.2%;
    right: 18.6%;
    display: block;
    width: 15.5%;
    height: auto;
    filter: drop-shadow(0 16px 20px rgba(51, 92, 169, .16));
}

.kh-main-hero-showcase__orbit {
    position: absolute;
    z-index: 2;
    top: 17.3%;
    right: 8.1%;
    width: 38.5%;
    height: 9.5%;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    box-shadow: 0 0 13px rgba(255, 255, 255, .95), inset 0 0 10px rgba(255, 255, 255, .75);
    transform: rotate(-1deg);
}

.kh-main-hero-showcase__orbit::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(255, 255, 255, .95) 9.2% 9.5%, transparent 9.7% 18%);
    filter: blur(1px);
    opacity: .72;
}

.kh-main-hero-showcase__products {
    position: absolute;
    z-index: 5;
    top: 36.1%;
    right: 5.25%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 47.8%;
    height: 32.8%;
    pointer-events: auto;
}

.kh-main-hero-showcase__product {
    --kh-card-accent: #16cbe8;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 13% 8% 10%;
    overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--kh-card-accent) 72%, white);
    border-radius: 27px;
    color: #09209c !important;
    background: linear-gradient(150deg, rgba(255, 255, 255, .84), rgba(245, 248, 255, .66));
    box-shadow: 0 16px 30px rgba(48, 83, 148, .1), 0 0 18px color-mix(in srgb, var(--kh-card-accent) 18%, transparent), inset 0 1px 0 #fff;
    text-align: center;
    text-decoration: none !important;
    backdrop-filter: blur(13px);
}

.kh-main-hero-showcase__product::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(125deg, rgba(255, 255, 255, .8), transparent 34%, transparent 70%, rgba(255, 255, 255, .42));
}

.kh-main-hero-showcase__product--office {
    --kh-card-accent: #f0b82b;
}

.kh-main-hero-showcase__product--adobe {
    --kh-card-accent: #ff70c8;
}

.kh-main-hero-showcase__product--autodesk {
    --kh-card-accent: #59a8ff;
}

.kh-main-hero-showcase__product img {
    position: relative;
    z-index: 1;
    display: block;
    width: 48%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.kh-main-hero-showcase__product strong,
.kh-main-hero-showcase__product small,
.kh-main-hero-showcase__product > span {
    position: relative;
    z-index: 1;
    display: block;
}

.kh-main-hero-showcase__product strong {
    width: 100%;
    margin-top: 9%;
    overflow: hidden;
    color: #0a1c9c;
    font-size: clamp(11px, .9vw, 16px);
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kh-main-hero-showcase__product small {
    margin-top: 7%;
    color: #0b3ddb;
    font-size: clamp(9px, .68vw, 12px);
    font-weight: 650;
    line-height: 1.2;
}

.kh-main-hero-showcase__product > span {
    min-width: 62px;
    margin-top: auto;
    padding: 7px 11px;
    border: 1.5px solid var(--kh-card-accent);
    border-radius: 9px;
    color: color-mix(in srgb, var(--kh-card-accent) 88%, #0038c9);
    background: rgba(255, 255, 255, .48);
    font-size: clamp(10px, .75vw, 13px);
    font-weight: 800;
    line-height: 1;
}

.kh-main-hero-showcase__crystal {
    position: absolute;
    z-index: 3;
    display: block;
    width: 3.15%;
    height: auto;
    filter: drop-shadow(0 8px 10px rgba(55, 67, 210, .2));
}

.kh-main-hero-showcase__crystal--1 { top: 27%; right: 48.3%; transform: rotate(-14deg) scale(.83); }
.kh-main-hero-showcase__crystal--2 { top: 28.4%; right: 39.7%; transform: rotate(9deg) scale(.72); }
.kh-main-hero-showcase__crystal--3 { top: 28.7%; right: 12.3%; transform: rotate(17deg) scale(.76); }
.kh-main-hero-showcase__crystal--4 { top: 27.8%; right: 1.8%; transform: rotate(-8deg) scale(.92); }
.kh-main-hero-showcase__crystal--5 { top: 49.2%; right: 52.4%; transform: rotate(18deg) scale(.95); }
.kh-main-hero-showcase__crystal--6 { bottom: 15.1%; right: 1.1%; transform: rotate(11deg) scale(.54); }
.kh-main-hero-showcase__crystal--7 { bottom: 15.3%; right: 50.7%; transform: rotate(-17deg) scale(.52); }

@media (max-width: 1240px) and (min-width: 901px) {
    .home #kh-main-hero.kh-main-hero-showcase,
    #kh-main-hero.kh-main-hero-showcase {
        min-height: 540px;
    }

    .kh-main-hero-showcase__copy {
        top: 7%;
    }

    #kh-main-hero.kh-main-hero-showcase h1 {
        margin-top: 18px;
        font-size: clamp(36px, 4.2vw, 50px);
    }

    #kh-main-hero.kh-main-hero-showcase p {
        margin-top: 14px;
        font-size: 13px;
    }

    .kh-main-hero-showcase__actions {
        gap: 12px;
        margin-top: 18px;
    }

    .kh-main-hero-showcase__button {
        min-width: 0;
        min-height: 50px;
        padding: 0 17px;
        gap: 10px;
        border-radius: 15px;
        font-size: 12px;
    }

    .kh-main-hero-showcase__features {
        padding: 16px 5px;
    }

    .kh-main-hero-showcase__feature {
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 8px;
        padding: 0 9px;
    }

    .kh-main-hero-showcase__feature-icon {
        width: 36px;
        height: 36px;
    }

    .kh-main-hero-showcase__feature-icon svg {
        width: 22px;
        height: 22px;
    }

    .kh-main-hero-showcase__feature small {
        margin-top: 10px;
    }

    .kh-main-hero-showcase__products {
        gap: 9px;
    }

    .kh-main-hero-showcase__product {
        border-radius: 20px;
    }

    .kh-main-hero-showcase__trust {
        gap: 10px;
    }

    .kh-main-hero-showcase__trust > span {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 6px;
    }

    .kh-main-hero-showcase__trust i {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }}

@media (max-width: 900px) {
    .home #kh-main-hero.kh-main-hero-showcase,
    #kh-main-hero.kh-main-hero-showcase {
        display: flex;
        flex-direction: column;
        width: calc(100% - 12px);
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
        margin: 8px auto 24px;
        padding: 24px 16px 18px;
        border-radius: 24px;
    }

    .kh-main-hero-showcase__background {
        object-position: 69% center;
        opacity: .72;
    }

    .kh-main-hero-showcase::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .26));
    }

    .kh-main-hero-showcase__copy,
    .kh-main-hero-showcase__features,
    .kh-main-hero-showcase__trust,
    .kh-main-hero-showcase__visual {
        position: relative;
        inset: auto;
        width: 100%;
    }

    .kh-main-hero-showcase__copy {
        order: 1;
        text-align: center;
    }

    .kh-main-hero-showcase__eyebrow {
        min-height: 40px;
        padding: 0 12px;
        border-radius: 14px;
        font-size: 11px;
    }

    #kh-main-hero.kh-main-hero-showcase h1 {
        margin-top: 18px;
        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.08;
    }

    #kh-main-hero.kh-main-hero-showcase p {
        margin: 15px auto 0;
        font-size: 14px;
        line-height: 1.5;
    }

    #kh-main-hero.kh-main-hero-showcase p br {
        display: none;
    }

    .kh-main-hero-showcase__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 20px;
    }

    .kh-main-hero-showcase__button {
        min-width: 0;
        min-height: 52px;
        padding: 0 12px;
        gap: 9px;
        border-radius: 15px;
        font-size: 12px;
    }

    .kh-main-hero-showcase__button svg {
        width: 18px;
        height: 18px;
    }

    .kh-main-hero-showcase__visual {
        order: 2;
        height: 520px;
        margin-top: 20px;
    }

    .kh-main-hero-showcase__service-icon {
        top: 0;
        right: 50%;
        width: 150px;
        transform: translateX(50%);
    }

    .kh-main-hero-showcase__orbit {
        top: 52px;
        right: 5%;
        width: 90%;
        height: 54px;
    }

    .kh-main-hero-showcase__products {
        top: 172px;
        right: auto;
        left: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        height: 340px;
    }

    .kh-main-hero-showcase__product {
        padding: 12px 10px 10px;
        border-radius: 20px;
    }

    .kh-main-hero-showcase__product img {
        width: 54px;
    }

    .kh-main-hero-showcase__product strong {
        margin-top: 5px;
        font-size: 12px;
    }

    .kh-main-hero-showcase__product small {
        margin-top: 4px;
        font-size: 10px;
    }

    .kh-main-hero-showcase__product > span {
        min-width: 54px;
        padding: 6px 9px;
        font-size: 10px;
    }

    .kh-main-hero-showcase__crystal {
        width: 34px;
    }

    .kh-main-hero-showcase__crystal--1 { top: 76px; right: auto; left: 1%; }
    .kh-main-hero-showcase__crystal--2 { top: 115px; right: 1%; }
    .kh-main-hero-showcase__crystal--3,
    .kh-main-hero-showcase__crystal--4,
    .kh-main-hero-showcase__crystal--5,
    .kh-main-hero-showcase__crystal--6,
    .kh-main-hero-showcase__crystal--7 { display: none; }

    .kh-main-hero-showcase__features {
        order: 3;
        grid-template-columns: 1fr;
        min-height: 0;
        margin-top: 20px;
        padding: 5px 16px;
        border-radius: 20px;
    }

    .kh-main-hero-showcase__feature {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        padding: 14px 0;
        border-right: 0;
        border-bottom: 1px solid var(--kh-hero-line);
    }

    .kh-main-hero-showcase__feature:last-child {
        border-bottom: 0;
    }

    .kh-main-hero-showcase__feature-icon {
        width: 40px;
        height: 40px;
    }

    .kh-main-hero-showcase__feature-icon svg {
        width: 24px;
        height: 24px;
    }

    .kh-main-hero-showcase__feature b {
        font-size: 13px;
        line-height: 1.3;
    }

    .kh-main-hero-showcase__feature b br,
    .kh-main-hero-showcase__feature small br {
        display: none;
    }

    .kh-main-hero-showcase__feature small {
        margin-top: 4px;
        font-size: 11px;
    }

    .kh-main-hero-showcase__trust {
        order: 4;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
    }

    .kh-main-hero-showcase__trust > span {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .kh-main-hero-showcase__trust i {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    .kh-main-hero-showcase__trust b {
        font-size: 12px;
    }

    .kh-main-hero-showcase__trust small {
        margin-top: 2px;
        font-size: 10px;
    }}

@media (max-width: 430px) {
    .home #kh-main-hero.kh-main-hero-showcase,
    #kh-main-hero.kh-main-hero-showcase {
        padding-right: 12px;
        padding-left: 12px;
    }

    #kh-main-hero.kh-main-hero-showcase h1 {
        font-size: 34px;
    }

    .kh-main-hero-showcase__actions {
        grid-template-columns: 1fr;
    }

    .kh-main-hero-showcase__button {
        min-height: 50px;
    }

    .kh-main-hero-showcase__visual {
        height: 530px;
    }

    .kh-main-hero-showcase__products {
        height: 350px;
    }}

@media (prefers-reduced-motion: reduce) {
    .kh-main-hero-showcase *,
    .kh-main-hero-showcase *::before,
    .kh-main-hero-showcase *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }}
@media (min-width: 901px) {
    .home #kh-main-hero.kh-main-hero-showcase,
    #kh-main-hero.kh-main-hero-showcase {
        left: auto;
        width: min(1460px, calc(100% - 50px)) !important;
        min-height: 0;
        max-width: 1460px !important;
        max-height: none;
        aspect-ratio: 2089 / 753;
        margin-right: auto !important;
        margin-left: auto !important;
        transform: none;
    }

    .kh-main-hero-showcase__background {
        object-fit: fill;
        object-position: center;
    }

    .kh-main-hero-showcase__copy {
        top: 7.1%;
        left: 5.25%;
        width: 36.4%;
    }

    .kh-main-hero-showcase__eyebrow {
        min-height: 40px;
        padding: 0 15px;
        gap: 9px;
        border-radius: 16px;
        font-size: clamp(11px, .72vw, 15px);
    }

    .kh-main-hero-showcase__eyebrow svg {
        width: 20px;
        height: 20px;
    }

    #kh-main-hero.kh-main-hero-showcase h1 {
        max-width: 720px;
        margin-top: 18px;
        font-size: clamp(38px, 2.65vw, 60px);
        line-height: 1.08;
    }

    #kh-main-hero.kh-main-hero-showcase p {
        max-width: 660px;
        margin-top: 16px;
        font-size: clamp(12px, .82vw, 17px);
        line-height: 1.5;
    }

    .kh-main-hero-showcase__actions {
        gap: 18px;
        margin-top: 18px;
    }

    .kh-main-hero-showcase__button {
        min-height: 54px;
        padding: 0 24px;
        gap: 17px;
        border-radius: 17px;
        font-size: clamp(12px, .76vw, 16px);
    }

    .kh-main-hero-showcase__button--primary { min-width: 238px; }
    .kh-main-hero-showcase__button--secondary { min-width: 244px; }

    .kh-main-hero-showcase__features {
        top: 55.6%;
        left: 5.2%;
        width: 36.4%;
        min-height: 19.1%;
        padding: 17px 8px;
        border-radius: 23px;
    }

    .kh-main-hero-showcase__feature {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 9px;
        padding: 0 11px;
    }

    .kh-main-hero-showcase__feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .kh-main-hero-showcase__feature-icon svg {
        width: 26px;
        height: 26px;
    }

    .kh-main-hero-showcase__feature b { font-size: clamp(11px, .68vw, 14px); }

    .kh-main-hero-showcase__feature small {
        margin-top: 13px;
        font-size: clamp(9px, .57vw, 12px);
    }

    .kh-main-hero-showcase__trust {
        left: 5.05%;
        bottom: 4.7%;
        width: 37.5%;
        gap: 19px;
    }

    .kh-main-hero-showcase__trust > span {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
    }

    .kh-main-hero-showcase__trust i {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    .kh-main-hero-showcase__trust b { font-size: clamp(9px, .57vw, 12px); }

    .kh-main-hero-showcase__trust small {
        margin-top: 7px;
        font-size: clamp(8px, .52vw, 11px);
    }

    .kh-main-hero-showcase__service-icon {
        top: 4.2%;
        right: 19.4%;
        width: 11.9%;
    }

    .kh-main-hero-showcase__orbit {
        top: 14.9%;
        right: 8.6%;
        width: 35.3%;
        height: 8.1%;
    }

    .kh-main-hero-showcase__products {
        top: 35.2%;
        right: 5.7%;
        width: 40.2%;
        height: 34.7%;
        gap: 14px;
    }

    .kh-main-hero-showcase__product {
        padding: 10% 8% 8%;
        border-radius: 23px;
    }

    .kh-main-hero-showcase__product img { width: 44%; }

    .kh-main-hero-showcase__product strong {
        margin-top: 7%;
        font-size: clamp(11px, .72vw, 15px);
    }

    .kh-main-hero-showcase__product small {
        margin-top: 5%;
        font-size: clamp(9px, .57vw, 12px);
    }

    .kh-main-hero-showcase__product > span {
        min-width: 58px;
        padding: 6px 10px;
        font-size: clamp(9px, .58vw, 12px);
    }

    .kh-main-hero-showcase__crystal { width: 2.45%; }
    .kh-main-hero-showcase__crystal--1 { top: 27%; right: 46.8%; }
    .kh-main-hero-showcase__crystal--2 { top: 28.2%; right: 38.5%; }
    .kh-main-hero-showcase__crystal--3 { top: 28.5%; right: 12.4%; }
    .kh-main-hero-showcase__crystal--4 { top: 27.3%; right: 1.8%; }
    .kh-main-hero-showcase__crystal--5 { top: 48.8%; right: 47.9%; }}

@media (max-width: 900px) {
    .home #kh-main-hero.kh-main-hero-showcase,
    #kh-main-hero.kh-main-hero-showcase {
        left: auto;
        margin-right: auto !important;
        margin-left: auto !important;
        transform: none;
    }

    .kh-main-hero-showcase__background { object-fit: cover; }}
@media (min-width: 901px) {
    .home #kh-main-hero.kh-main-hero-showcase,
    #kh-main-hero.kh-main-hero-showcase {
        overflow: hidden;
        border-radius: 24px;
        box-shadow: 0 26px 64px rgba(41, 83, 153, .14);
    }

    .kh-main-hero-showcase__background {
        object-fit: cover;
        object-position: center;
    }

    .kh-main-hero-showcase__podium {
        position: absolute;
        right: -.4%;
        bottom: -1%;
        z-index: 1;
        display: block;
        width: 50.5%;
        height: auto;
        pointer-events: none;
        filter: saturate(1.08) contrast(1.04) drop-shadow(0 18px 20px rgba(17, 70, 164, .11));
    }

    .kh-main-hero-showcase::before {
        background:
            radial-gradient(circle at 73% 28%, rgba(255, 255, 255, .22), transparent 24%),
            linear-gradient(90deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 41%, rgba(52, 111, 208, .05) 100%);
    }

    .kh-main-hero-showcase::after {
        content: "";
        position: absolute;
        right: 4%;
        bottom: 4.5%;
        z-index: 3;
        width: 47%;
        height: 22%;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .72) 44%, rgba(175, 221, 255, .28) 51%, transparent 70%);
        filter: blur(6px);
        opacity: 0;
        transform: translateX(-65%) skewX(-13deg);
        animation: khMainHeroPodiumSheen 9s ease-in-out 2.5s infinite;
    }

    .kh-main-hero-showcase__copy {
        top: 6.7%;
        left: 5.35%;
        width: 41.5%;
    }

    .kh-main-hero-showcase__eyebrow {
        min-height: 40px;
        font-size: 12px;
    }

    #kh-main-hero.kh-main-hero-showcase h1 {
        max-width: 590px;
        margin: 14px 0 0 !important;
        font-size: clamp(38px, 3vw, 50px);
        line-height: 1.06;
    }

    #kh-main-hero.kh-main-hero-showcase p {
        max-width: 570px;
        margin-top: 12px;
        font-size: clamp(12px, .86vw, 15px);
        line-height: 1.5;
    }

    .kh-main-hero-showcase__actions {
        gap: 16px;
        margin-top: 14px;
    }

    .kh-main-hero-showcase__button {
        position: relative;
        min-height: 52px;
        overflow: hidden;
        padding: 0 22px;
        border-radius: 17px;
        font-size: 14px;
    }

    .kh-main-hero-showcase__button--primary { min-width: 224px; }
    .kh-main-hero-showcase__button--secondary { min-width: 232px; }

    .kh-main-hero-showcase__button--primary::after {
        content: "";
        position: absolute;
        inset: -35% auto -35% -40%;
        width: 22%;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
        opacity: 0;
        transform: skewX(-18deg);
    }

    .kh-main-hero-showcase__button--primary:is(:hover, :focus-visible)::after {
        animation: khMainHeroButtonSheen .72s ease-out both;
    }

    .kh-main-hero-showcase__features {
        top: 63.5%;
        left: 5.25%;
        width: 41.4%;
        height: 21.5%;
        min-height: 0;
        padding: 12px 8px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .7);
        box-shadow: 0 18px 42px rgba(58, 92, 151, .11), inset 0 1px 0 #fff;
    }

    .kh-main-hero-showcase__feature {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 0 12px;
    }

    .kh-main-hero-showcase__feature b {
        font-size: clamp(11px, .75vw, 13px);
        line-height: 1.36;
    }

    .kh-main-hero-showcase__feature small {
        margin-top: 9px;
        font-size: clamp(9px, .62vw, 11px);
        line-height: 1.45;
    }

    .kh-main-hero-showcase__trust {
        left: 5.1%;
        bottom: 4.7%;
        width: 42%;
        gap: 16px;
    }

    .kh-main-hero-showcase__trust b {
        font-size: clamp(9px, .66vw, 11px);
    }

    .kh-main-hero-showcase__trust small {
        margin-top: 5px;
        color: #435f98;
        font-size: clamp(8px, .57vw, 10px);
    }

    .kh-main-hero-showcase__service-icon {
        top: 3.8%;
        right: 20.2%;
        width: 13%;
        filter:
            drop-shadow(0 16px 22px rgba(35, 79, 168, .22))
            drop-shadow(0 0 12px rgba(255, 255, 255, .9));
    }

    .kh-main-hero-showcase__orbit {
        top: 13.8%;
        right: 7%;
        width: 39%;
        height: 10.5%;
        border-color: rgba(255, 255, 255, .92);
        box-shadow: 0 0 16px rgba(255, 255, 255, 1), inset 0 0 12px rgba(255, 255, 255, .86);
        animation: khMainHeroOrbit 22s linear infinite;
    }

    .kh-main-hero-showcase__products {
        top: 34.5%;
        right: 4.7%;
        width: 45%;
        height: 39%;
        gap: 13px;
    }

    .kh-main-hero-showcase__product {
        padding: 10px 9px 9px;
        border-width: 1.5px;
        border-radius: 22px;
        background:
            radial-gradient(circle at 50% 12%, rgba(255, 255, 255, .98), transparent 38%),
            linear-gradient(150deg, rgba(255, 255, 255, .91), rgba(240, 246, 255, .69));
        box-shadow:
            0 18px 28px rgba(35, 70, 139, .13),
            0 0 20px color-mix(in srgb, var(--kh-card-accent) 24%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -10px 24px rgba(204, 221, 251, .16);
        animation: khMainHeroCardIn 520ms cubic-bezier(.2, .78, .24, 1) backwards;
        transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
        will-change: transform;
    }

    .kh-main-hero-showcase__product:nth-child(1) { animation-delay: 80ms; }
    .kh-main-hero-showcase__product:nth-child(2) { animation-delay: 150ms; }
    .kh-main-hero-showcase__product:nth-child(3) { animation-delay: 220ms; }
    .kh-main-hero-showcase__product:nth-child(4) { animation-delay: 290ms; }

    .kh-main-hero-showcase__product:is(:hover, :focus-visible) {
        transform: translateY(-6px);
        filter: saturate(1.08);
        box-shadow:
            0 24px 36px rgba(35, 70, 139, .17),
            0 0 27px color-mix(in srgb, var(--kh-card-accent) 33%, transparent),
            inset 0 1px 0 #fff;
    }

    .kh-main-hero-showcase__product img {
        width: 43%;
        max-height: 76px;
    }

    .kh-main-hero-showcase__product strong {
        margin-top: 5px;
        font-size: clamp(11px, .8vw, 14px);
    }

    .kh-main-hero-showcase__product small {
        margin-top: 5px;
        font-size: clamp(9px, .62vw, 11px);
    }

    .kh-main-hero-showcase__product > span {
        min-width: 54px;
        padding: 6px 9px;
        font-size: 10px;
    }

    .kh-main-hero-showcase__crystal {
        width: 2.7%;
        animation: khMainHeroCrystalFloat var(--kh-float-duration, 6.5s) ease-in-out var(--kh-float-delay, 0s) infinite alternate;
        transform: var(--kh-crystal-transform, none);
        will-change: transform;
    }

    .kh-main-hero-showcase__crystal--1 { top: 24%; right: 48%; --kh-crystal-transform: rotate(-14deg) scale(.74); --kh-float-duration: 6.2s; }
    .kh-main-hero-showcase__crystal--2 { top: 27%; right: 39%; --kh-crystal-transform: rotate(9deg) scale(.66); --kh-float-duration: 7.4s; --kh-float-delay: -.8s; }
    .kh-main-hero-showcase__crystal--3 { top: 26%; right: 12%; --kh-crystal-transform: rotate(17deg) scale(.68); --kh-float-duration: 5.8s; --kh-float-delay: -1.6s; }
    .kh-main-hero-showcase__crystal--4 { top: 27%; right: 1.2%; --kh-crystal-transform: rotate(-8deg) scale(.82); --kh-float-duration: 7s; --kh-float-delay: -2.1s; }
    .kh-main-hero-showcase__crystal--5 { top: 48%; right: 49%; --kh-crystal-transform: rotate(18deg) scale(.84); --kh-float-duration: 6.7s; --kh-float-delay: -.5s; }
    .kh-main-hero-showcase__crystal--6 { top: 49%; right: .7%; bottom: auto; --kh-crystal-transform: rotate(11deg) scale(.62); --kh-float-duration: 5.6s; --kh-float-delay: -1.2s; }
    .kh-main-hero-showcase__crystal--7 { right: 49.5%; bottom: 9%; --kh-crystal-transform: rotate(-17deg) scale(.52); --kh-float-duration: 7.7s; --kh-float-delay: -2.8s; }
    .kh-main-hero-showcase__crystal--8 { right: 2.5%; bottom: 8%; --kh-crystal-transform: rotate(13deg) scale(.56); --kh-float-duration: 6.9s; --kh-float-delay: -1.9s; }}

@media (max-width: 900px) {
    .kh-main-hero-showcase__podium { display: none; }
    .kh-main-hero-showcase__crystal--8 { display: none; }}
@media (min-width: 901px) {
    .kh-main-hero-showcase__products {
        top: 35.1%;
        right: 4.8%;
        width: 43%;
        height: 37%;
        gap: 12px;
    }

    .kh-main-hero-showcase__product {
        --kh-card-accent: #24cfe8;
        padding: 12px 9px 9px;
        border: 1px solid transparent;
        border-radius: 22px;
        background:
            radial-gradient(ellipse at 50% -8%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .32) 38%, transparent 64%) padding-box,
            linear-gradient(155deg, rgba(255, 255, 255, .68) 0%, rgba(250, 253, 255, .47) 48%, rgba(228, 240, 255, .3) 100%) padding-box,
            linear-gradient(145deg,
                rgba(255, 255, 255, .98) 0%,
                color-mix(in srgb, var(--kh-card-accent) 48%, white) 17%,
                rgba(255, 255, 255, .88) 42%,
                rgba(255, 255, 255, .96) 58%,
                color-mix(in srgb, var(--kh-card-accent) 66%, white) 83%,
                rgba(255, 255, 255, .98) 100%) border-box;
        box-shadow:
            0 14px 28px rgba(44, 77, 142, .11),
            0 0 15px color-mix(in srgb, var(--kh-card-accent) 14%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .98),
            inset 1px 0 0 rgba(255, 255, 255, .55),
            inset -1px 0 0 rgba(255, 255, 255, .34),
            inset 0 -14px 30px color-mix(in srgb, var(--kh-card-accent) 5%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(1.24);
        backdrop-filter: blur(18px) saturate(1.24);
    }

    .kh-main-hero-showcase__product--office { --kh-card-accent: #ffc33d; }
    .kh-main-hero-showcase__product--adobe { --kh-card-accent: #ff75ca; }
    .kh-main-hero-showcase__product--autodesk { --kh-card-accent: #79b7ff; }

    .kh-main-hero-showcase__product::before {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: 0;
        border-radius: 21px;
        pointer-events: none;
        background:
            linear-gradient(118deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .22) 20%, transparent 42%),
            radial-gradient(ellipse at 48% 0%, rgba(255, 255, 255, .78), transparent 50%),
            linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--kh-card-accent) 7%, transparent) 100%);
        opacity: .86;
    }

    .kh-main-hero-showcase__product::after {
        content: "";
        position: absolute;
        right: 13%;
        bottom: 0;
        left: 13%;
        z-index: 0;
        height: 1px;
        pointer-events: none;
        border-radius: 50%;
        background: color-mix(in srgb, var(--kh-card-accent) 72%, white);
        box-shadow: 0 0 10px 2px color-mix(in srgb, var(--kh-card-accent) 30%, transparent);
        opacity: .72;
    }

    .kh-main-hero-showcase__product img {
        width: 46%;
        max-height: 72px;
        filter: drop-shadow(0 6px 8px rgba(34, 65, 126, .11));
    }

    .kh-main-hero-showcase__product strong {
        margin-top: 5px;
        color: #071b96;
        font-size: clamp(11px, .79vw, 14px);
        text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
    }

    .kh-main-hero-showcase__product small {
        margin-top: 5px;
        color: #083dd7;
        font-size: clamp(9px, .61vw, 11px);
    }

    .kh-main-hero-showcase__product > span {
        min-width: 52px;
        padding: 6px 9px;
        border-width: 1px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .34);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    .kh-main-hero-showcase__product:is(:hover, :focus-visible) {
        transform: translateY(-5px);
        box-shadow:
            0 22px 34px rgba(36, 70, 137, .16),
            0 0 21px color-mix(in srgb, var(--kh-card-accent) 25%, transparent),
            inset 0 1px 0 #fff,
            inset 0 -14px 30px color-mix(in srgb, var(--kh-card-accent) 8%, transparent);
    }}
@media (min-width: 901px) {
    .kh-main-hero-showcase__products {
        top: 35.1%;
        right: 5.75%;
        width: 36.8%;
        height: 36.5%;
        gap: 14px;
    }

    .kh-main-hero-showcase__product {
        padding: 12px 7px 9px;
        border: 1px solid color-mix(in srgb, var(--kh-card-accent) 58%, rgba(255, 255, 255, .96));
        border-radius: 21px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .57) 0%, rgba(255, 255, 255, .25) 43%, rgba(247, 251, 255, .34) 100%);
        box-shadow:
            0 10px 22px rgba(42, 72, 132, .09),
            0 0 12px color-mix(in srgb, var(--kh-card-accent) 15%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .96),
            inset 1px 0 0 rgba(255, 255, 255, .46),
            inset -1px 0 0 rgba(255, 255, 255, .34),
            inset 0 -1px 0 color-mix(in srgb, var(--kh-card-accent) 38%, rgba(255, 255, 255, .55));
        -webkit-backdrop-filter: blur(13px) saturate(1.08) brightness(1.04);
        backdrop-filter: blur(13px) saturate(1.08) brightness(1.04);
    }

    .kh-main-hero-showcase__product::before {
        inset: 1px;
        border-radius: 20px;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 18%, transparent 39%),
            linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 25%, transparent 78%, rgba(255, 255, 255, .15));
        opacity: .72;
    }

    .kh-main-hero-showcase__product::after {
        display: none;
    }

    .kh-main-hero-showcase__product img {
        width: 48%;
        max-height: 62px;
        filter: none;
    }

    .kh-main-hero-showcase__product strong {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.15;
        letter-spacing: -.02em;
    }

    .kh-main-hero-showcase__product small {
        margin-top: 6px;
        font-size: 10px;
        line-height: 1.2;
    }

    .kh-main-hero-showcase__product > span {
        min-width: 56px;
        padding: 6px 9px;
        border-width: 1px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
        font-size: 10px;
    }

    .kh-main-hero-showcase__product:is(:hover, :focus-visible) {
        transform: translateY(-5px);
        box-shadow:
            0 18px 30px rgba(36, 68, 132, .13),
            0 0 17px color-mix(in srgb, var(--kh-card-accent) 22%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -1px 0 color-mix(in srgb, var(--kh-card-accent) 45%, white);
    }}
@media (min-width: 901px) {
    .kh-main-hero-showcase__product {
        isolation: isolate;
        padding: 20px 7px 9px;
        border: 1px solid rgba(255, 255, 255, .8);
        background:
            radial-gradient(ellipse at 48% -10%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .32) 46%, transparent 70%),
            linear-gradient(145deg, rgba(255, 255, 255, .76) 0%, rgba(255, 255, 255, .48) 46%, rgba(242, 248, 255, .62) 100%);
        box-shadow:
            0 12px 24px rgba(38, 69, 128, .1),
            0 0 11px color-mix(in srgb, var(--kh-card-accent) 17%, transparent),
            inset 0 0 0 1px rgba(255, 255, 255, .54),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -14px 24px rgba(226, 239, 255, .17);
        -webkit-backdrop-filter: blur(20px) saturate(1.06) brightness(1.09);
        backdrop-filter: blur(20px) saturate(1.06) brightness(1.09);
    }

    .kh-main-hero-showcase__product::before {
        inset: 2px;
        border-radius: 19px;
        background:
            radial-gradient(circle at 13% 5%, rgba(255, 255, 255, .98) 0 2px, transparent 13px),
            radial-gradient(circle at 88% 5%, rgba(255, 255, 255, .9) 0 2px, transparent 15px),
            linear-gradient(119deg, rgba(255, 255, 255, .67) 0%, rgba(255, 255, 255, .15) 19%, transparent 39%),
            linear-gradient(180deg, rgba(255, 255, 255, .36), transparent 27%, transparent 76%, rgba(255, 255, 255, .2));
        opacity: .84;
    }

    .kh-main-hero-showcase__product::after {
        display: block;
        inset: -1px;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: 0;
        width: auto;
        height: auto;
        padding: 1px;
        border-radius: 22px;
        background: linear-gradient(145deg,
            rgba(255, 255, 255, 1) 0%,
            color-mix(in srgb, var(--kh-card-accent) 64%, white) 18%,
            rgba(255, 255, 255, .65) 38%,
            rgba(255, 255, 255, .94) 59%,
            color-mix(in srgb, var(--kh-card-accent) 72%, white) 83%,
            rgba(255, 255, 255, 1) 100%);
        box-shadow: none;
        opacity: .82;
        filter: drop-shadow(0 0 5px color-mix(in srgb, var(--kh-card-accent) 32%, transparent));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .kh-main-hero-showcase__product img {
        width: 53%;
        max-height: 68px;
    }

    .kh-main-hero-showcase__product--adobe img {
        width: 48%;
        max-height: 62px;
    }

    .kh-main-hero-showcase__product strong {
        margin-top: 6px;
        font-size: 13.5px;
        line-height: 1.14;
        letter-spacing: -.03em;
    }

    .kh-main-hero-showcase__product small {
        margin-top: 5px;
        font-size: 10.5px;
        line-height: 1.2;
    }

    .kh-main-hero-showcase__product > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 56px;
        min-height: 27px;
        margin-bottom: 8px;
        padding: 0 9px;
        background: rgba(255, 255, 255, .31);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .88),
            0 0 7px color-mix(in srgb, var(--kh-card-accent) 10%, transparent);
        font-size: 10.5px;
    }

    .kh-main-hero-showcase__product:is(:hover, :focus-visible) {
        box-shadow:
            0 18px 30px rgba(36, 68, 132, .13),
            0 0 18px color-mix(in srgb, var(--kh-card-accent) 25%, transparent),
            inset 0 0 0 1px rgba(255, 255, 255, .62),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -14px 24px rgba(226, 239, 255, .2);
    }}
@media (min-width: 901px) {
    .kh-main-hero-showcase__products {
        width: 35.7%;
    }

    .kh-main-hero-showcase__product {
        padding: 27px 7px 9px;
        overflow: visible;
        border-color: rgba(255, 255, 255, .94);
        border-radius: 20px;
        background:
            radial-gradient(ellipse at 50% -2%, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .2) 40%, transparent 66%),
            radial-gradient(ellipse at 50% 108%, color-mix(in srgb, var(--kh-card-accent) 11%, rgba(214, 231, 255, .3)) 0%, transparent 58%),
            linear-gradient(155deg, rgba(255, 255, 255, .56) 0%, rgba(238, 247, 255, .38) 47%, rgba(220, 236, 255, .46) 100%);
        box-shadow:
            0 5px 11px rgba(47, 79, 139, .045),
            0 0 13px 1px rgba(255, 255, 255, .7),
            0 0 20px color-mix(in srgb, var(--kh-card-accent) 25%, transparent),
            inset 0 0 0 1px rgba(255, 255, 255, .72),
            inset 2px 0 3px rgba(255, 255, 255, .7),
            inset -2px 0 4px rgba(185, 211, 249, .38),
            inset 0 2px 3px rgba(255, 255, 255, .94),
            inset 0 -3px 5px color-mix(in srgb, var(--kh-card-accent) 17%, rgba(184, 211, 249, .3)),
            inset 9px 0 20px rgba(255, 255, 255, .13),
            inset -9px 0 20px rgba(177, 207, 247, .12);
        -webkit-backdrop-filter: blur(24px) saturate(1.12) brightness(1.06);
        backdrop-filter: blur(24px) saturate(1.12) brightness(1.06);
    }

    .kh-main-hero-showcase__product::before {
        inset: 1px;
        border-radius: 19px;
        background:
            radial-gradient(circle at 10% 5%, rgba(255, 255, 255, 1) 0 2px, rgba(255, 255, 255, .52) 3px, transparent 14px),
            radial-gradient(circle at 90% 5%, rgba(255, 255, 255, .96) 0 2px, rgba(255, 255, 255, .42) 3px, transparent 15px),
            linear-gradient(116deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .17) 18%, transparent 38%),
            linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, transparent 5%, transparent 93%, rgba(255, 255, 255, .38) 100%);
        box-shadow:
            inset 1px 0 0 rgba(255, 255, 255, .58),
            inset -1px 0 0 color-mix(in srgb, var(--kh-card-accent) 20%, rgba(255, 255, 255, .42)),
            inset 0 1px 0 rgba(255, 255, 255, .88),
            inset 0 -1px 0 color-mix(in srgb, var(--kh-card-accent) 24%, rgba(255, 255, 255, .5));
        opacity: .86;
    }

    .kh-main-hero-showcase__product::after {
        inset: -2px;
        padding: 1.5px;
        border-radius: 22px;
        background: conic-gradient(from 205deg,
            color-mix(in srgb, var(--kh-card-accent) 82%, white) 0deg,
            rgba(255, 255, 255, 1) 48deg,
            color-mix(in srgb, var(--kh-card-accent) 56%, white) 112deg,
            rgba(255, 255, 255, 1) 182deg,
            color-mix(in srgb, var(--kh-card-accent) 76%, white) 255deg,
            rgba(255, 255, 255, .98) 316deg,
            color-mix(in srgb, var(--kh-card-accent) 82%, white) 360deg);
        opacity: .78;
        filter:
            drop-shadow(0 0 3px rgba(255, 255, 255, .96))
            drop-shadow(0 0 8px color-mix(in srgb, var(--kh-card-accent) 52%, transparent));
    }

    .kh-main-hero-showcase__product img {
        width: 47%;
        max-height: 62px;
    }

    .kh-main-hero-showcase__product--adobe img {
        width: 48%;
        max-height: 62px;
    }

    .kh-main-hero-showcase__product strong {
        margin-top: 14px;
    }

    .kh-main-hero-showcase__product small {
        margin-top: 10px;
    }

    .kh-main-hero-showcase__product > span {
        min-width: 52px;
        min-height: 26px;
    }

    .kh-main-hero-showcase__product:is(:hover, :focus-visible) {
        box-shadow:
            0 8px 16px rgba(36, 68, 132, .07),
            0 0 16px 2px rgba(255, 255, 255, .78),
            0 0 26px color-mix(in srgb, var(--kh-card-accent) 36%, transparent),
            inset 0 0 0 1px rgba(255, 255, 255, .78),
            inset 2px 0 4px rgba(255, 255, 255, .78),
            inset -2px 0 5px rgba(185, 211, 249, .44),
            inset 0 2px 3px rgba(255, 255, 255, 1),
            inset 0 -3px 6px color-mix(in srgb, var(--kh-card-accent) 21%, rgba(184, 211, 249, .34));
    }}
.kh-main-hero-showcase__features {
    isolation: isolate;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .94);
    background:
        radial-gradient(ellipse at 50% -8%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .2) 43%, transparent 68%),
        radial-gradient(ellipse at 50% 112%, color-mix(in srgb, var(--kh-feature-glass-accent) 10%, rgba(214, 231, 255, .3)) 0%, transparent 62%),
        linear-gradient(155deg, rgba(255, 255, 255, .58) 0%, rgba(239, 247, 255, .39) 48%, rgba(220, 236, 255, .47) 100%);
    box-shadow:
        0 6px 13px rgba(47, 79, 139, .05),
        0 0 14px 1px rgba(255, 255, 255, .72),
        0 0 21px color-mix(in srgb, var(--kh-feature-glass-accent) 21%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, .72),
        inset 2px 0 3px rgba(255, 255, 255, .72),
        inset -2px 0 4px rgba(185, 211, 249, .36),
        inset 0 2px 3px rgba(255, 255, 255, .95),
        inset 0 -3px 5px color-mix(in srgb, var(--kh-feature-glass-accent) 15%, rgba(184, 211, 249, .28)),
        inset 11px 0 24px rgba(255, 255, 255, .12),
        inset -11px 0 24px rgba(177, 207, 247, .11);
    -webkit-backdrop-filter: blur(24px) saturate(1.1) brightness(1.06);
    backdrop-filter: blur(24px) saturate(1.1) brightness(1.06);
}

.kh-main-hero-showcase__feature {
    position: relative;
    z-index: 1;
    border-right: 0;
}

.kh-main-hero-showcase__feature-icon {
    position: relative;
    border-color: color-mix(in srgb, var(--kh-feature-glass-accent) 48%, white);
    background:
        radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 1) 0 1px, transparent 8px),
        linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(220, 235, 255, .58));
    box-shadow:
        0 5px 14px rgba(29, 91, 196, .09),
        0 0 10px rgba(113, 185, 255, .14),
        inset 0 0 0 1px rgba(255, 255, 255, .66),
        inset 1px 1px 2px rgba(255, 255, 255, .95),
        inset -1px -1px 2px rgba(123, 173, 235, .18);
}

@media (min-width: 901px) {
    .kh-main-hero-showcase__features {
        top: 63.2%;
        left: 5.15%;
        width: 42.2%;
        height: 22.2%;
        min-height: 0;
        padding: 13px 10px;
        border-radius: 24px;
    }

    .kh-main-hero-showcase__features::after {
        border-radius: 26px;
    }

    .kh-main-hero-showcase__feature {
        grid-template-columns: 40px minmax(0, 1fr);
        align-content: center;
        column-gap: 11px;
        padding: 0 14px;
    }

    .kh-main-hero-showcase__feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .kh-main-hero-showcase__feature-icon svg {
        width: 25px;
        height: 25px;
    }

    .kh-main-hero-showcase__feature b {
        min-height: 36px;
        font-size: clamp(12px, .75vw, 13px);
        line-height: 1.34;
    }

    .kh-main-hero-showcase__feature small {
        margin-top: 7px;
        font-size: clamp(9px, .61vw, 11px);
        line-height: 1.42;
    }}

@media (max-width: 900px) {
    .kh-main-hero-showcase__feature {
        border-bottom: 0;
    }}
@media (min-width: 901px) {
    .kh-main-hero-showcase__features {
        top: 61.5%;
        width: 43%;
        height: 21%;
        padding: 11px 10px;
    }

    .kh-main-hero-showcase__feature {
        grid-template-columns: 38px minmax(0, 1fr);
        column-gap: 10px;
        padding: 0 12px;
    }

    .kh-main-hero-showcase__feature-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .kh-main-hero-showcase__feature-icon svg {
        width: 23px;
        height: 23px;
    }

    .kh-main-hero-showcase__feature b {
        min-height: 34px;
        font-size: clamp(11px, .72vw, 12px);
        line-height: 1.35;
    }

    .kh-main-hero-showcase__feature small {
        margin-top: 5px;
        font-size: clamp(9px, .58vw, 10px);
        line-height: 1.38;
    }

    .kh-main-hero-showcase__trust {
        left: 5.85%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        width: 41.6%;
    }

    .kh-main-hero-showcase__trust > span {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
        padding: 0 12px;
    }}
.kh-main-hero-showcase__features,
.kh-main-hero-showcase__trust {
    --kh-feature-icon-ink: #315463;
}

.kh-main-hero-showcase__feature-icon {
    color: var(--kh-feature-icon-ink);
    border-color: rgba(111, 148, 164, .38);
    background:
        radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 1) 0 1px, transparent 8px),
        linear-gradient(145deg, rgba(255, 255, 255, .91), rgba(222, 238, 242, .62));
    box-shadow:
        0 5px 14px rgba(42, 76, 91, .08),
        0 0 10px rgba(91, 154, 166, .12),
        inset 0 0 0 1px rgba(255, 255, 255, .7),
        inset 1px 1px 2px rgba(255, 255, 255, .96),
        inset -1px -1px 2px rgba(94, 142, 159, .17);
}

.kh-main-hero-showcase__feature-icon svg {
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .72));
}

.kh-main-hero-showcase__trust i {
    border: 1px solid rgba(255, 255, 255, .82);
    color: var(--kh-feature-icon-ink);
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .98), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(220, 237, 241, .68));
    box-shadow:
        0 6px 15px rgba(42, 76, 91, .08),
        0 0 10px rgba(91, 154, 166, .1),
        inset 0 0 0 1px rgba(255, 255, 255, .62),
        inset -1px -1px 2px rgba(94, 142, 159, .14);
}
.kh-main-hero-showcase__eyebrow {
    position: relative;
    isolation: isolate;
    min-height: 34px;
    padding: 0 13px;
    gap: 8px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 14px;
    color: #315463;
    background:
        radial-gradient(ellipse at 50% -18%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .22) 50%, transparent 72%),
        radial-gradient(ellipse at 50% 118%, rgba(104, 173, 184, .09) 0%, transparent 62%),
        linear-gradient(155deg, rgba(255, 255, 255, .62), rgba(230, 241, 246, .42));
    box-shadow:
        0 5px 12px rgba(47, 79, 99, .045),
        0 0 11px rgba(255, 255, 255, .72),
        0 0 15px rgba(91, 154, 166, .1),
        inset 0 0 0 1px rgba(255, 255, 255, .7),
        inset 1px 0 2px rgba(255, 255, 255, .78),
        inset -1px 0 3px rgba(133, 174, 191, .2),
        inset 0 2px 2px rgba(255, 255, 255, .94),
        inset 0 -2px 4px rgba(104, 173, 184, .1);
    -webkit-backdrop-filter: blur(20px) saturate(1.08) brightness(1.05);
    backdrop-filter: blur(20px) saturate(1.08) brightness(1.05);
    font-size: clamp(10px, .68vw, 11px);
    line-height: 1;
}

.kh-main-hero-showcase__eyebrow::before,
.kh-main-hero-showcase__eyebrow::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.kh-main-hero-showcase__eyebrow::before {
    z-index: 0;
    inset: 1px;
    border-radius: 13px;
    background:
        radial-gradient(circle at 7% 13%, rgba(255, 255, 255, 1) 0 1px, transparent 9px),
        radial-gradient(circle at 94% 14%, rgba(255, 255, 255, .94) 0 1px, transparent 10px),
        linear-gradient(116deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .12) 22%, transparent 43%),
        linear-gradient(180deg, rgba(255, 255, 255, .52), transparent 12%, transparent 86%, rgba(255, 255, 255, .3));
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, .52),
        inset -1px 0 0 rgba(111, 159, 177, .14),
        inset 0 1px 0 rgba(255, 255, 255, .84),
        inset 0 -1px 0 rgba(111, 159, 177, .12);
    opacity: .84;
}

.kh-main-hero-showcase__eyebrow::after {
    z-index: 0;
    inset: -2px;
    padding: 1px;
    border-radius: 16px;
    background: conic-gradient(from 205deg,
        rgba(130, 184, 196, .68),
        rgba(255, 255, 255, 1) 56deg,
        rgba(181, 215, 223, .8) 124deg,
        rgba(255, 255, 255, 1) 196deg,
        rgba(121, 178, 192, .58) 272deg,
        rgba(255, 255, 255, .98) 332deg,
        rgba(130, 184, 196, .68));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .66;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)) drop-shadow(0 0 6px rgba(91, 154, 166, .2));
}

.kh-main-hero-showcase__eyebrow-text,
.kh-main-hero-showcase__online-dot {
    position: relative;
    z-index: 1;
}

.kh-main-hero-showcase__online-dot {
    display: block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 50%;
    background: #24c96b;
    box-shadow:
        0 0 0 3px rgba(36, 201, 107, .12),
        0 0 9px rgba(36, 201, 107, .62),
        inset 0 1px 1px rgba(255, 255, 255, .78);
}

.kh-main-hero-showcase__online-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(36, 201, 107, .48);
    border-radius: 50%;
    animation: khMainHeroOnlinePulse 1.8s ease-out infinite;
}

@media (max-width: 900px) {
    .kh-main-hero-showcase__eyebrow {
        min-height: 36px;
        padding: 0 12px;
        gap: 8px;
        border-radius: 14px;
        font-size: 10.5px;
    }}
.kh-main-hero-showcase__eyebrow {
    min-height: 38px;
    padding: 0 13px;
    gap: 9px;
    border-color: rgba(151, 187, 201, .58);
    border-radius: 12px;
    color: #183746;
    background:
        radial-gradient(ellipse at 48% -18%, rgba(255, 255, 255, .82), rgba(255, 255, 255, .12) 48%, transparent 70%),
        radial-gradient(ellipse at 50% 115%, rgba(91, 168, 180, .13), transparent 60%),
        linear-gradient(150deg, rgba(255, 255, 255, .42), rgba(218, 237, 243, .25));
    box-shadow:
        0 6px 14px rgba(40, 75, 92, .055),
        0 0 10px rgba(255, 255, 255, .48),
        0 0 13px rgba(91, 154, 166, .09),
        inset 0 0 0 1px rgba(255, 255, 255, .48),
        inset 2px 0 3px rgba(255, 255, 255, .54),
        inset -2px 0 3px rgba(104, 159, 178, .18),
        inset 0 2px 2px rgba(255, 255, 255, .72),
        inset 0 -2px 4px rgba(75, 151, 166, .12);
    font-size: clamp(11px, .76vw, 12px);
    font-weight: 720;
    letter-spacing: .005em;
}

.kh-main-hero-showcase__eyebrow::before {
    border-radius: 11px;
    background:
        radial-gradient(circle at 6% 12%, rgba(255, 255, 255, .96) 0 1px, transparent 9px),
        radial-gradient(circle at 95% 13%, rgba(255, 255, 255, .86) 0 1px, transparent 10px),
        linear-gradient(116deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .08) 23%, transparent 43%),
        linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 14%, transparent 84%, rgba(255, 255, 255, .24));
    opacity: .78;
}

.kh-main-hero-showcase__eyebrow::after {
    border-radius: 14px;
    opacity: .42;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .72)) drop-shadow(0 0 4px rgba(91, 154, 166, .13));
}

.kh-main-hero-showcase__online-dot {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    border-color: rgba(255, 255, 255, .86);
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .96), transparent 34%),
        linear-gradient(145deg, rgba(247, 255, 251, .82), rgba(192, 229, 211, .58));
    box-shadow:
        0 2px 6px rgba(31, 117, 72, .08),
        inset 0 0 0 1px rgba(255, 255, 255, .58),
        inset -1px -1px 2px rgba(54, 143, 97, .12);
}

.kh-main-hero-showcase__online-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c96a;
    box-shadow:
        0 0 0 2px rgba(34, 201, 106, .1),
        0 0 7px rgba(34, 201, 106, .58),
        inset 0 1px 1px rgba(255, 255, 255, .72);
}

.kh-main-hero-showcase__online-dot::after {
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    inset: auto;
    border-color: rgba(34, 201, 106, .42);
    animation-name: khMainHeroOnlinePulseCompact;
}

@media (max-width: 900px) {
    .kh-main-hero-showcase__eyebrow {
        min-height: 38px;
        font-size: 11px;
    }}
#kh-main-hero.kh-main-hero-showcase {
    background:
        radial-gradient(ellipse at 78% 46%, rgba(191, 222, 255, .46) 0%, rgba(225, 239, 255, .26) 27%, transparent 58%),
        radial-gradient(ellipse at 19% 4%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .46) 35%, transparent 67%),
        linear-gradient(118deg, #f9fcff 0%, #f4f9ff 43%, #eaf3ff 100%);
}

.kh-main-hero-showcase__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.kh-main-hero-showcase__scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .26) 42%, transparent 67%),
        linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 29%, rgba(122, 181, 244, .07));
}

.kh-main-hero-showcase__scene-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
}

.kh-main-hero-showcase__scene-glow--top {
    top: -24%;
    right: 2%;
    width: 54%;
    height: 58%;
    background: rgba(255, 255, 255, .72);
}

.kh-main-hero-showcase__scene-glow--bottom {
    right: -5%;
    bottom: -32%;
    width: 62%;
    height: 65%;
    background: rgba(101, 175, 255, .16);
}

.kh-main-hero-showcase::before {
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 54%);
}

.kh-main-hero-showcase::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    width: auto;
    height: 24%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(111, 174, 245, .08));
    filter: none;
    opacity: 1;
    transform: none;
    animation: none;
}

.kh-main-hero-showcase__background,
.kh-main-hero-showcase__podium,
.kh-main-hero-showcase__service-icon,
.kh-main-hero-showcase__orbit,
.kh-main-hero-showcase__crystal {
    display: none !important;
}

.kh-main-hero-showcase__geometry {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.kh-main-hero-showcase__geometry-grid {
    position: absolute;
    top: 11%;
    right: 1.5%;
    width: 47%;
    height: 66%;
    opacity: .24;
    background-image:
        linear-gradient(rgba(101, 151, 219, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101, 151, 219, .16) 1px, transparent 1px);
    background-size: 9.4% 13%;
    -webkit-mask-image: radial-gradient(ellipse at 63% 47%, #000 0%, rgba(0, 0, 0, .72) 38%, transparent 75%);
    mask-image: radial-gradient(ellipse at 63% 47%, #000 0%, rgba(0, 0, 0, .72) 38%, transparent 75%);
}

.kh-main-hero-showcase__geometry-ring {
    position: absolute;
    border: 1px solid rgba(155, 194, 237, .48);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(205, 228, 255, .045));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .62),
        0 0 18px rgba(116, 173, 238, .11),
        inset 0 0 18px rgba(255, 255, 255, .48);
}

.kh-main-hero-showcase__geometry-ring::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-top: 1px solid rgba(255, 255, 255, .92);
    border-radius: inherit;
    opacity: .74;
}

.kh-main-hero-showcase__geometry-ring--outer {
    top: 8%;
    right: -4.5%;
    width: 49%;
    height: 68%;
    transform: rotate(-2deg);
}

.kh-main-hero-showcase__geometry-ring--middle {
    top: 13.5%;
    right: 1.3%;
    width: 42.5%;
    height: 58%;
    border-color: rgba(132, 181, 234, .42);
}

.kh-main-hero-showcase__geometry-ring--inner {
    top: 19%;
    right: 6.7%;
    width: 36%;
    height: 48%;
    border-color: rgba(255, 255, 255, .86);
    box-shadow:
        0 0 0 1px rgba(143, 190, 239, .28),
        0 0 24px rgba(255, 255, 255, .55),
        inset 0 0 22px rgba(255, 255, 255, .4);
}

.kh-main-hero-showcase__geometry-base {
    position: absolute;
    top: 73.8%;
    right: 3.8%;
    width: 46.7%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .96) 13%, rgba(91, 167, 247, .58) 50%, rgba(255, 255, 255, .96) 87%, transparent);
    box-shadow:
        0 -1px 7px rgba(255, 255, 255, .9),
        0 4px 18px rgba(72, 155, 245, .27),
        0 13px 32px rgba(72, 155, 245, .12);
}

.kh-main-hero-showcase__geometry-mark {
    position: absolute;
    top: 15.8%;
    right: 20.2%;
    width: 5.2%;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: #5f8fc8;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .38;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .96)) drop-shadow(0 4px 8px rgba(74, 126, 188, .12));
}

@media (max-width: 900px) {
    #kh-main-hero.kh-main-hero-showcase {
        background:
            radial-gradient(ellipse at 70% 72%, rgba(171, 214, 255, .34), transparent 48%),
            linear-gradient(145deg, #fbfdff, #edf6ff);
    }

    .kh-main-hero-showcase__geometry-grid,
    .kh-main-hero-showcase__geometry-ring--outer {
        display: none;
    }

    .kh-main-hero-showcase__geometry-ring--middle {
        top: 49%;
        right: -30%;
        width: 105%;
        height: 43%;
        opacity: .56;
    }

    .kh-main-hero-showcase__geometry-ring--inner {
        top: 54%;
        right: -17%;
        width: 82%;
        height: 33%;
        opacity: .62;
    }

    .kh-main-hero-showcase__geometry-base {
        top: auto;
        right: 8%;
        bottom: 7%;
        width: 84%;
    }

    .kh-main-hero-showcase__geometry-mark {
        top: 49%;
        right: 43%;
        width: 13%;
        opacity: .22;
    }}
@media (min-width: 901px) {
    .home #kh-main-hero.kh-main-hero-showcase,
    #kh-main-hero.kh-main-hero-showcase {
        aspect-ratio: 1710 / 626;
        border: 1px solid rgba(190, 211, 236, .48);
        border-top-color: rgba(225, 235, 247, .22);
        border-radius: 27px;
        background: #f8fbff;
        box-shadow: 0 20px 60px rgba(44, 82, 143, .08);
    }

    .kh-main-hero-showcase__scene,
    .kh-main-hero-showcase::before,
    .kh-main-hero-showcase::after {
        display: none;
    }

    .kh-main-hero-showcase__geometry {
        z-index: 1;
        background-image: url("../assets/home-hero/keyhub-glass-arch-raster-v4.webp");
        background-position: center -1px;
        background-size: 100% calc(100% + 1px);
        background-repeat: no-repeat;
    }

    .kh-main-hero-showcase__geometry-scene {
        display: none;
    }

    .kh-main-hero-showcase__geometry-wall {
        opacity: .042;
    }

    .kh-main-hero-showcase__geometry-floor {
        opacity: .34;
    }

    .kh-main-hero-showcase__geometry-dome,
    .kh-main-hero-showcase__geometry-podium {
        transform-box: fill-box;
        transform-origin: center;
    }

    .kh-main-hero-showcase__geometry-highlight {
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55));
    }

    .kh-main-hero-showcase__geometry-podium {
        transform: none;
    }

    .kh-main-hero-showcase__geometry-mark {
        top: 17%;
        right: 22.305%;
        width: 4.7%;
        height: auto;
        display: block;
        object-fit: contain;
        z-index: 2;
        opacity: .96;
        mix-blend-mode: multiply;
        filter: contrast(1.12) saturate(1.06);
        -webkit-mask-image: radial-gradient(ellipse at 50% 49%, #000 0 56%, rgba(0, 0, 0, .9) 72%, transparent 96%);
        mask-image: radial-gradient(ellipse at 50% 49%, #000 0 56%, rgba(0, 0, 0, .9) 72%, transparent 96%);
    }

    .kh-main-hero-showcase__geometry-mark-tool {
        fill: #5e8fc8;
        stroke: none;
    }

    .kh-main-hero-showcase__copy {
        top: 9.6%;
        left: 5.4%;
    }

    #kh-main-hero.kh-main-hero-showcase h1 {
        margin-top: 22px !important;
    }

    #kh-main-hero.kh-main-hero-showcase p {
        margin-top: 18px;
    }

    .kh-main-hero-showcase__actions {
        margin-top: 18px;
    }

    .kh-main-hero-showcase__features {
        top: 64.2%;
        left: 5.25%;
        width: 42.8%;
        height: 20.8%;
    }

    .kh-main-hero-showcase__products {
        top: 34.5%;
        right: 6.4%;
        width: 35.8%;
        height: 37.2%;
    }}

@media (max-width: 900px) {
    .kh-main-hero-showcase__geometry {
        background-image: none;
    }

    .kh-main-hero-showcase__geometry-mark {
        mix-blend-mode: multiply;
        -webkit-mask-image: radial-gradient(ellipse at 50% 49%, #000 0 56%, rgba(0, 0, 0, .9) 72%, transparent 96%);
        mask-image: radial-gradient(ellipse at 50% 49%, #000 0 56%, rgba(0, 0, 0, .9) 72%, transparent 96%);
    }

    .kh-main-hero-showcase__geometry-scene {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }}
@media (max-width: 900px) {
    .home #kh-main-hero.kh-main-hero-showcase,
    #kh-main-hero.kh-main-hero-showcase {
        box-sizing: border-box;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto 24px !important;
        padding: 22px 16px 18px;
        overflow: hidden;
        border-radius: 24px;
        background: linear-gradient(150deg, #fbfdff 0%, #f4f9ff 54%, #eaf3fd 100%);
    }

    .kh-main-hero-showcase__copy,
    .kh-main-hero-showcase__visual,
    .kh-main-hero-showcase__actions,
    .kh-main-hero-showcase__products,
    .kh-main-hero-showcase__features {
        min-width: 0;
    }

    .kh-main-hero-showcase__copy {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        text-align: center;
    }

    .kh-main-hero-showcase__eyebrow {
        max-width: 100%;
        margin-inline: auto;
    }

    #kh-main-hero.kh-main-hero-showcase h1 {
        margin-top: 24px !important;
        font-size: clamp(30px, 8.2vw, 35px);
        line-height: 1.05;
    }

    #kh-main-hero.kh-main-hero-showcase p {
        width: 100%;
        max-width: 420px;
        margin: 20px auto 0;
        white-space: normal;
        overflow-wrap: normal;
        font-size: 14px;
        line-height: 1.48;
    }

    .kh-main-hero-showcase__actions {
        width: 100%;
        max-width: 432px;
        margin: 20px auto 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .kh-main-hero-showcase__button {
        width: 100%;
        min-width: 0 !important;
        min-height: 52px;
        padding-inline: 10px;
        white-space: nowrap;
    }

    .kh-main-hero-showcase__visual {
        width: calc(100% + 32px);
        max-width: none;
        height: 620px;
        margin: 18px -16px 0;
        overflow: hidden;
    }

    .kh-main-hero-showcase__geometry {
        background-image: url("../assets/home-hero/keyhub-glass-arch-raster-v4.webp");
        background-position: 82% 70px;
        background-size: auto 620px;
        background-repeat: no-repeat;
    }

    .kh-main-hero-showcase__geometry::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        left: 0;
        height: 118px;
        pointer-events: none;
        background: linear-gradient(to bottom,
            #f5f9fe 0,
            #f5f9fe 52px,
            rgba(245, 249, 254, .92) 70px,
            rgba(245, 249, 254, .42) 92px,
            rgba(245, 249, 254, 0) 118px);
    }

    .kh-main-hero-showcase__geometry-scene {
        display: none !important;
    }

    .kh-main-hero-showcase__geometry-mark {
        top: 102px;
        right: auto;
        left: 50%;
        width: 46px;
        height: auto;
        display: block;
        transform: translateX(-50%);
        z-index: 2;
        opacity: .82;
        filter: contrast(1.08) saturate(1.04);
    }

    .kh-main-hero-showcase__products {
        top: 164px;
        right: auto;
        left: 50%;
        width: min(calc(100% - 32px), 400px);
        max-width: 400px;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 180px;
        gap: 14px;
        transform: translateX(-50%);
        z-index: 3;
    }

    .kh-main-hero-showcase__product {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: 180px;
        padding: 14px 8px 11px;
        overflow: hidden;
        border-radius: 20px;
    }

    .kh-main-hero-showcase__product img {
        width: 52px;
        max-width: 38%;
        max-height: 56px;
    }

    .kh-main-hero-showcase__product strong {
        margin-top: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }

    .kh-main-hero-showcase__product small {
        margin-top: 5px;
        font-size: 10.5px;
        line-height: 1.2;
    }

    .kh-main-hero-showcase__product > span {
        min-width: 54px;
        min-height: 26px;
        padding: 5px 9px;
        font-size: 10px;
    }

    .kh-main-hero-showcase__features {
        width: 100%;
        margin-top: 0;
    }

    .kh-main-hero-showcase__feature b br,
    .kh-main-hero-showcase__feature small br {
        display: block;
    }}

@media (max-width: 430px) {
    .kh-main-hero-showcase__actions {
        grid-template-columns: 1fr;
        width: calc(100% - 8px);
        gap: 10px;
    }

    .kh-main-hero-showcase__visual {
        height: 600px;
    }

    .kh-main-hero-showcase__geometry {
        background-position: 82% 72px;
        background-size: auto 600px;
    }

    .kh-main-hero-showcase__geometry-mark {
        top: 104px;
        width: 42px;
    }

    .kh-main-hero-showcase__products {
        top: 160px;
        width: calc(100% - 24px);
        grid-auto-rows: 174px;
        gap: 12px;
    }

    .kh-main-hero-showcase__product {
        height: 174px;
        padding-top: 13px;
    }

    .kh-main-hero-showcase__product img {
        width: 48px;
    }}
@media (max-width: 900px) {
    .kh-main-hero-showcase__visual {
        display: none !important;
    }

    .kh-main-hero-showcase__features {
        margin-top: 22px;
    }}
.kh-main-hero-showcase__marquee {
    position: absolute;
    z-index: 24;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: clamp(48px, 6.9vw, 66px);
    overflow: hidden;
    border-top: 1px solid rgba(137, 166, 202, .16);
    background: linear-gradient(180deg, rgba(246, 250, 255, .04), rgba(239, 246, 253, .38));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.kh-main-hero-showcase__marquee-viewport {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
}

.kh-main-hero-showcase__marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: khHeroMarqueeScroll 38s linear infinite;
}

.kh-main-hero-showcase__marquee-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-right: 26px;
}

.kh-main-hero-showcase__marquee a,
.kh-main-hero-showcase__marquee-group > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-right: clamp(35px, 3.25vw, 58px);
    color: #38567d;
    font-size: clamp(12px, 1.12vw, 17px);
    font-weight: 680;
    line-height: 1;
    letter-spacing: -.018em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .2s ease, text-shadow .2s ease;
}

.kh-main-hero-showcase__marquee a::after,
.kh-main-hero-showcase__marquee-group > span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: clamp(15px, 1.4vw, 25px);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(113, 154, 204, .5);
    box-shadow: 0 0 7px rgba(255, 255, 255, .65);
    transform: translateY(-50%);
}

.kh-main-hero-showcase__marquee a:hover,
.kh-main-hero-showcase__marquee a:focus-visible {
    color: #102e5b;
    text-shadow: 0 0 12px rgba(255, 255, 255, .9);
}

.kh-main-hero-showcase__marquee a:focus-visible {
    outline: 2px solid rgba(55, 101, 161, .42);
    outline-offset: -4px;
    border-radius: 8px;
}

.kh-main-hero-showcase__marquee:hover .kh-main-hero-showcase__marquee-track,
.kh-main-hero-showcase__marquee:focus-within .kh-main-hero-showcase__marquee-track {
    animation-play-state: paused;
}

.kh-main-hero-showcase__marquee-pulse {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 28%;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, .08) 14%,
            rgba(255, 255, 255, .58) 47%,
            rgba(203, 214, 227, .28) 58%,
            transparent 100%);
    box-shadow: 0 8px 22px rgba(178, 194, 214, .12);
    mix-blend-mode: screen;
    transform: translate3d(365%, 0, 0) skewX(-11deg);
    animation: khHeroMarqueePulse 6.8s cubic-bezier(.22, .61, .36, 1) infinite;
}

.kh-main-hero-showcase__floor-pulse {
    position: absolute;
    z-index: 22;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0%,
        transparent 75.5%,
        rgba(0, 0, 0, .08) 78%,
        rgba(0, 0, 0, .4) 81%,
        rgba(0, 0, 0, .82) 84%,
        #000 88%,
        #000 100%);
    mask-image: linear-gradient(180deg,
        transparent 0%,
        transparent 75.5%,
        rgba(0, 0, 0, .08) 78%,
        rgba(0, 0, 0, .4) 81%,
        rgba(0, 0, 0, .82) 84%,
        #000 88%,
        #000 100%);
    pointer-events: none;
}

.kh-main-hero-showcase__floor-pulse::before,
.kh-main-hero-showcase__floor-pulse::after {
    content: "";
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: 0;
}

.kh-main-hero-showcase__floor-pulse::before {
    left: 50%;
    bottom: 13%;
    width: 46%;
    height: 7%;
    border-top: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: radial-gradient(ellipse at 58% 0%,
        rgba(255, 255, 255, .34) 0%,
        rgba(229, 235, 243, .14) 27%,
        transparent 68%);
    box-shadow: 0 -3px 13px rgba(223, 232, 243, .22);
    filter: blur(.35px);
    transform: scaleX(.28);
    transform-origin: 56% 0%;
    animation: khHeroArchPulse 6.8s ease-out infinite;
}

.kh-main-hero-showcase__floor-pulse::after {
    left: 0;
    bottom: -17%;
    width: 100%;
    height: 34%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 75.8% 0%,
        rgba(255, 255, 255, .62) 0%,
        rgba(216, 229, 244, .3) 12%,
        rgba(178, 201, 229, .12) 29%,
        transparent 56%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .72) 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .72) 58%, transparent 100%);
    filter: blur(1.2px);
    mix-blend-mode: screen;
    transform: translate3d(0, -11%, 0) scale(.16, .1);
    transform-origin: 75.8% 0%;
    animation: khHeroFloorSweep 6.8s cubic-bezier(.19, .63, .32, 1) infinite;
}

.kh-main-hero-showcase__floor-pulse-source,
.kh-main-hero-showcase__floor-pulse-wave {
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: 0;
}

.kh-main-hero-showcase__floor-pulse-source {
    left: 75.8%;
    bottom: 15%;
    width: 10%;
    height: 4%;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(255, 255, 255, .88) 0%,
        rgba(226, 234, 243, .42) 24%,
        rgba(191, 207, 226, .13) 51%,
        transparent 74%);
    filter: blur(3px);
    transform: translateX(-50%);
    animation: khHeroPulseSource 6.8s ease-in-out infinite;
}

.kh-main-hero-showcase__floor-pulse-source::after {
    display: none;
}

.kh-main-hero-showcase__floor-pulse-wave {
    left: 0;
    bottom: -18%;
    width: 130%;
    height: 39%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 58.3% 0%,
            transparent 0%,
            transparent 17%,
            rgba(255, 255, 255, .88) 19%,
            rgba(183, 207, 235, .42) 21%,
            transparent 25%,
            transparent 34%,
            rgba(255, 255, 255, .58) 36%,
            rgba(173, 199, 230, .24) 38%,
            transparent 42%,
            transparent 52%,
            rgba(236, 244, 253, .42) 54%,
            transparent 58%),
        repeating-conic-gradient(from 162deg at 58.3% 0%,
            transparent 0deg 8deg,
            rgba(255, 255, 255, .2) 9.5deg 10.5deg,
            rgba(176, 203, 234, .11) 11deg 12deg,
            transparent 13.5deg 20deg);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .96), rgba(0, 0, 0, .68) 64%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .96), rgba(0, 0, 0, .68) 64%, transparent 100%);
    filter: blur(.65px);
    mix-blend-mode: screen;
    transform: translate3d(0, -8%, 0) scale(.12, .08);
    transform-origin: 58.3% 0%;
    animation: khHeroFloorPulse 6.8s cubic-bezier(.18, .62, .3, 1) infinite;
}

.kh-main-hero-showcase__floor-pulse-wave::after {
    display: none;
}

@media (max-width: 1023px) {

    .kh-main-hero-showcase__marquee-track {
        animation-duration: 34s;
    }

    .kh-main-hero-showcase__marquee a,
    .kh-main-hero-showcase__marquee-group > span {
        min-height: 44px;
        padding-right: 38px;
        font-size: 12.5px;
    }

    .kh-main-hero-showcase__marquee a::after,
    .kh-main-hero-showcase__marquee-group > span::after {
        right: 17px;
        width: 3px;
        height: 3px;
    }

    .kh-main-hero-showcase__floor-pulse {
        display: none;
    }

    .kh-main-hero-showcase__marquee-pulse {
        width: 38%;
        animation-duration: 7.6s;
    }}

@media (prefers-reduced-motion: reduce) {
    .kh-main-hero-showcase__marquee-viewport {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .kh-main-hero-showcase__marquee-viewport::-webkit-scrollbar {
        display: none;
    }

    .kh-main-hero-showcase__marquee-track {
        animation: none;
    }

    .kh-main-hero-showcase__marquee-group[aria-hidden="true"],
    .kh-main-hero-showcase__floor-pulse,
    .kh-main-hero-showcase__marquee-pulse {
        display: none;
    }}