:root {
    --mk-text: #202124;
    --mk-blue: #265dff;
    --mk-border: #dedede;
    --mk-input: #f1f1f1;
    --mk-bg: #fbfcff
}

* {
    box-sizing: border-box
}

.mk-page {
    margin: 0;
    color: var(--mk-text);
    background: #fff;
    
    overflow-x: hidden
}

.mk-click-header {
    z-index: 1000
}

.mk-exact-hero {
    position: relative;
    min-height: 760px;
    padding: 118px 0 96px;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #f6f8ff 0%, #fff 68%);
    overflow: hidden
}

.mk-bg-grid {
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image: linear-gradient(rgba(37, 55, 90, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 55, 90, .045) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, black, transparent 75%)
}

.mk-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    opacity: .22
}

.mk-glow-one {
    width: 320px;
    height: 320px;
    background: #9bb7ff;
    left: -100px;
    top: 100px
}

.mk-glow-two {
    width: 280px;
    height: 280px;
    background: #d8a7ff;
    right: -100px;
    bottom: 0
}

.mk-exact-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 78px;
    align-items: center
}

.mk-art-col {
    min-width: 0
}

.mk-art-wrap {
    position: relative;
    width: min(590px, 100%);
    margin: 0 auto;
    perspective: 1400px;
    will-change: transform
}

.mk-art {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 24px rgba(20, 27, 43, .17));
    transform: translateZ(0);
    user-select: none
}

.mk-art-halo {
    position: absolute;
    inset: 18% 13%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(105, 132, 255, .22), transparent 66%);
    filter: blur(25px);
    z-index: 0
}

.mk-art-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2c60ff;
    box-shadow: 0 0 0 7px rgba(44, 96, 255, .1), 0 0 24px rgba(44, 96, 255, .4)
}

.mk-dot-one {
    left: 11%;
    top: 23%
}

.mk-dot-two {
    right: 12%;
    bottom: 22%;
    background: #8b5cf6;
    box-shadow: 0 0 0 7px rgba(139, 92, 246, .1), 0 0 24px rgba(139, 92, 246, .35)
}

.mk-form-col {
    max-width: 640px
}

.mk-copy h1 {
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -2.8px;
    font-weight: 700;
    margin: 0 0 24px
}

.mk-copy p {
    font-size: 18px;
    line-height: 1.6;
    max-width: 610px;
    margin: 0 0 30px;
    color: #16181d
}

.mk-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 12px
}

.mk-field input,
.mk-field select {
    width: 100%;
    height: 52px;
    border: 1px solid #e1e1e1;
    border-radius: 9px;
    background: #f0f0f0;
    padding: 0 14px;
    font: 400 15px Inter, Arial, sans-serif;
    color: #111;
    outline: none;
    transition: border-color .25s, box-shadow .25s, background .25s, transform .25s
}

.mk-field select {
    appearance: auto
}

.mk-field input::placeholder {
    color: #151515;
    opacity: 1
}

.mk-field input:focus,
.mk-field select:focus {
    background: #fff;
    border-color: #a9bfff;
    box-shadow: 0 0 0 4px rgba(38, 93, 255, .09);
    transform: translateY(-1px)
}

.mk-check {
    grid-column: 1/-1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 7px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer
}

.mk-check input {
    width: 15px;
    height: 15px;
    margin: 1px 0 0;
    accent-color: #275eff;
    flex: 0 0 auto
}

.mk-check a {
    color: #235dff;
    text-decoration: none
}

.mk-check a:hover {
    text-decoration: underline
}

.mk-download {
    grid-column: 1/-1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 172px;
    height: 52px;
    padding: 0 27px;
    border: 0;
    border-radius: 28px;
    background: #20252d;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(22, 28, 38, .14);
    transition: transform .25s, box-shadow .25s, background .25s
}

.mk-download i {
    font-size: 15px;
    transition: transform .25s
}

.mk-download:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 32px rgba(22, 28, 38, .2);
    background: #12161c
}

.mk-download:hover i {
    transform: translateX(4px)
}

.mk-status {
    grid-column: 1/-1;
    min-height: 20px;
    margin: 0;
    font-size: 13px;
    color: #596273
}

.mk-status.error {
    color: #c22d2d
}

.mk-status.success {
    color: #18794e
}

@media(max-width:991px) {
    .mk-exact-hero {
        padding: 105px 0 70px
    }

    .mk-exact-grid {
        grid-template-columns: 1fr;
        gap: 42px
    }

    .mk-art-col {
        order: 2
    }

    .mk-form-col {
        order: 1;
        max-width: 760px;
        margin: auto
    }

    .mk-art-wrap {
        max-width: 600px
    }

    .mk-copy h1 {
        font-size: 58px
    }
}

@media(max-width:575px) {
    .mk-exact-hero {
        padding: 95px 0 55px
    }

    .mk-copy h1 {
        font-size: 46px;
        letter-spacing: -2px
    }

    .mk-copy p {
        font-size: 16px
    }

    .mk-form {
        grid-template-columns: 1fr
    }

    .mk-check,
    .mk-download,
    .mk-status {
        grid-column: 1
    }

    .mk-art-wrap {
        width: 108%;
        margin-left: -4%
    }

    .mk-footer-top,
    .mk-footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }

    .mk-footer-bottom div {
        flex-wrap: wrap
    }

    .mk-click-footer {
        padding: 42px 0 25px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        transition: none !important
    }

    .mk-art-wrap {
        transform: none !important
    }

    .mk-bg-grid {
        opacity: .18
    }
}