.mk-hero-shell {
        position: relative;
        isolation: isolate;
    }

    .mk-hero-reveal {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
        animation: mkHeroReveal 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: var(--reveal-delay, 0ms);
        will-change: transform, opacity;
    }

    .mk-hero-highlight {
        display: inline-block;
        background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 36%, #6366f1 68%, #4338ca 100%);
        background-size: 220% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: mkHeroGradient 6s linear infinite;
    }

    .mk-hero-dashboard {
        position: relative;
        transform-style: preserve-3d;
        perspective: 1600px;
        animation: mkDashboardFloat 6.4s ease-in-out infinite;
        will-change: transform;
    }

    .mk-hero-card {
        position: relative;
        transform-style: preserve-3d;
        transform:
            perspective(1400px)
            rotateY(calc(-8deg + var(--hero-rotate-y, 0deg)))
            rotateX(calc(4deg + var(--hero-rotate-x, 0deg)))
            translate3d(var(--hero-shift-x, 0px), var(--hero-shift-y, 0px), 0);
        transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
        will-change: transform;
        overflow: hidden;
    }

    .mk-hero-dashboard-layer {
        transform: translate3d(var(--layer-x, 0px), var(--layer-y, 0px), 0);
        transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .mk-hero-dashboard-layer[data-depth="1"] {
        --layer-scale: 1;
    }

    .mk-hero-dashboard-layer[data-depth="2"] {
        --layer-scale: .72;
    }

    .mk-hero-dashboard-layer[data-depth="3"] {
        --layer-scale: .44;
    }

    .mk-mini-stat {
        transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
        will-change: transform;
    }

    .mk-mini-stat:hover {
        transform: translateY(-6px) scale(1.025);
        box-shadow: 0 18px 34px rgba(79, 70, 229, 0.14);
        filter: saturate(1.04);
    }

    .mk-heatmap span {
        transform-origin: center bottom;
        animation: mkHeatPulse calc(2.4s + var(--pulse-duration, 0s)) ease-in-out infinite;
        animation-delay: var(--pulse-delay, 0s);
        will-change: transform, opacity;
    }

    .mk-btn {
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
    }

    .mk-btn:hover {
        transform: translateY(-2px);
        filter: saturate(1.02);
    }

    .mk-btn-dark:hover {
        box-shadow: 0 22px 34px rgba(15, 23, 42, 0.24);
    }

    .mk-btn-outline:hover {
        box-shadow: 0 18px 30px rgba(148, 163, 184, 0.18);
        background: rgba(255, 255, 255, 0.96);
    }

    .mk-btn:active {
        transform: translateY(1px) scale(0.988);
    }

    @keyframes mkHeroReveal {
        from {
            opacity: 0;
            transform: translate3d(0, 20px, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes mkHeroGradient {
        0% { background-position: 0% 50%; }
        100% { background-position: 220% 50%; }
    }

    @keyframes mkDashboardFloat {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0, -10px, 0); }
    }

    @keyframes mkHeatPulse {
        0%, 100% {
            transform: scaleY(1);
            opacity: .9;
        }
        50% {
            transform: scaleY(1.12);
            opacity: 1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .mk-hero-reveal,
        .mk-hero-highlight,
        .mk-hero-card,
        .mk-heatmap span {
            animation: none !important;
            transition: none !important;
        }
    }

    .mk-demo-section {
        padding-top: 18px;
    }

    .mk-demo-wrap {
        max-width: 980px;
        margin: 0 auto;
        text-align: center;
    }

    .mk-demo-stage {
        margin-top: 28px;
        position: relative;
        border-radius: 24px;
        overflow: visible;
        background: linear-gradient(180deg, #dfe3f0 0%, #cfd5e6 100%);
        border: 1px solid rgba(226, 232, 240, .92);
        box-shadow: 0 20px 42px rgba(15, 23, 42, .12);
        aspect-ratio: 16 / 9;
    }

    .mk-demo-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: inherit;
        filter: saturate(.86) brightness(.9);
        transform: scale(1.02);
        transition: filter .35s ease, transform .35s ease;
    }

    .mk-demo-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(15, 23, 42, .08), rgba(15, 23, 42, .34));
        z-index: 1;
        pointer-events: none;
    }

    .mk-demo-stage.is-playing .mk-demo-video {
        filter: none;
        transform: none;
    }

    .mk-demo-stage.is-playing::before {
        opacity: 0;
    }

    .mk-demo-play {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: 2;
        display: grid;
        place-items: center;
        background: transparent;
        border: 0;
        cursor: pointer;
        transition: opacity .22s ease;
    }

    .mk-demo-play:disabled {
        cursor: not-allowed;
    }

    .mk-demo-stage.is-playing .mk-demo-play {
        opacity: 0;
        pointer-events: none;
    }

    .mk-demo-play-btn {
        width: 94px;
        height: 94px;
        border-radius: 999px;
        border: 5px solid rgba(255, 255, 255, .26);
        background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 18px 36px rgba(79, 70, 229, .34);
        font-size: 28px;
        padding-left: 4px;
    }

    .mk-demo-meta {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 18px 22px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(255, 255, 255, .92);
        font-size: .84rem;
    }

    .mk-demo-stage.is-playing .mk-demo-meta {
        opacity: 0;
        pointer-events: none;
    }

    .mk-demo-progress {
        flex: 1;
        height: 4px;
        border-radius: 999px;
        background: rgba(226, 232, 240, .45);
        overflow: hidden;
        position: relative;
    }

    .mk-demo-progress::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 28%;
        height: 100%;
        background: linear-gradient(90deg, #4f46e5, #7c3aed);
    }

    .mk-demo-note {
        margin-top: 52px;
        font-size: .82rem;
        color: #94a3b8;
    }

    .mk-home-faq-card {
        height: auto;
        border-radius: 18px;
        align-self: start;
    }

    .mk-home-faq-grid {
        align-items: start;
    }


    .mk-home-faq-list {
        display: grid;
        gap: 10px;
        margin-top: 16px;
    }

    .mk-home-faq-head {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .mk-home-faq-head .mk-icon-box {
        border: 0;
        background: transparent;
    }

    .mk-home-faq-head .mk-icon-box i {
        font-size: 26px;
        line-height: 1;
    }

    .mk-home-faq-accordion-item {
        border: 0;
        border-radius: 12px;
        background: rgba(255, 255, 255, .9);
        overflow: hidden;
    }

    .mk-home-faq-accordion-item summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 14px;
        font-size: .92rem;
        line-height: 1.45;
        font-weight: 700;
        color: #334155;
    }

    .mk-home-faq-accordion-item summary * {
        font-weight: 700 !important;
    }

    .mk-home-faq-accordion-item summary::-webkit-details-marker {
        display: none;
    }

    .mk-home-faq-accordion-item summary::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: .74rem;
        color: #64748b;
        transition: transform .2s ease;
        margin-top: 4px;
    }

    .mk-home-faq-accordion-item[open] summary::after {
        transform: rotate(180deg);
    }

    .mk-home-faq-answer {
        padding: 0 14px 12px;
        font-size: .86rem;
        line-height: 1.6;
        color: #64748b;
        font-weight: 400;
    }

    .mk-home-faq-answer * {
        font-weight: 400 !important;
    }

    .mk-demo-float-badges {
        position: absolute;
        right: -98px;
        bottom: -16px;
        width: min(338px, calc(100% - 32px));
        height: 94px;
        z-index: 3;
        pointer-events: none;
    }

    @media (max-width: 1320px) {
        .mk-demo-float-badges {
            right: max(-42px, calc(100vw - 100% - 210px));
        }
    }

    @media (max-width: 1040px) {
        .mk-demo-float-badges {
            right: 8px;
            bottom: -12px;
            width: min(320px, calc(100% - 20px));
        }
    }

    .mk-demo-float-badge {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 16px;
        border: 1px solid rgba(226, 232, 240, .9);
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 16px 30px rgba(15, 23, 42, .14);
        opacity: 0;
        transform: translateY(14px);
        animation: mkDemoBadgeCycle 6s ease-in-out infinite;
    }

    .mk-demo-float-badge:nth-child(2) {
        animation-delay: 2s;
    }

    .mk-demo-float-badge:nth-child(3) {
        animation-delay: 4s;
    }

    .mk-demo-float-icon {
        width: 42px;
        height: 42px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .mk-demo-float-title {
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.1;
        letter-spacing: -.02em;
        color: #1e1b4b;
    }

    .mk-demo-float-copy {
        margin: 4px 0 0;
        font-size: .92rem;
        line-height: 1.35;
        color: #64748b;
    }

    .mk-demo-float-badge.is-analytics .mk-demo-float-icon {
        background: #dcfce7;
        color: #16a34a;
    }

    .mk-demo-float-badge.is-privacy .mk-demo-float-icon {
        background: #e0e7ff;
        color: #4f46e5;
    }

    .mk-demo-float-badge.is-action .mk-demo-float-icon {
        background: #fef3c7;
        color: #d97706;
    }

    @keyframes mkDemoBadgeCycle {
        0% {
            opacity: 0;
            transform: translateY(14px);
        }
        8%,
        28% {
            opacity: 1;
            transform: translateY(0);
        }
        34%,
        100% {
            opacity: 0;
            transform: translateY(-8px);
        }
    }

    @media (max-width: 840px) {
        .mk-demo-float-badges {
            position: relative;
            width: min(320px, 92%);
            margin: 12px auto 0;
            height: 0;
            pointer-events: none;
        }

        .mk-demo-float-badge {
            height: fit-content;
            bottom: auto;
        }

        .mk-demo-note {
            margin-top: 14px;
        }
    }