* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(25, 82, 170, 0.13),
            transparent 32%
        ),
        #070a0f;

    color: #f2f5fa;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.5;

    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}


/* =====================================================
   HEADER
===================================================== */

.header {
    position: fixed;

    top: 0;
    left: 50%;

    transform:
        translateX(-50%);

    width:
        min(
            1760px,
            calc(100% - 80px)
        );

    height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(7,10,15,.88);

    backdrop-filter:
        blur(18px);

    z-index: 100;

    transition:
        background .25s ease,
        border-color .25s ease;
}

.header.scrolled {
    background:
        rgba(7,10,15,.96);

    border-bottom-color:
        rgba(255,255,255,.11);
}

.logo {
    font-size: 25px;
    font-weight: 800;

    letter-spacing: -1.2px;
}

.logo span,
.footer-logo span {
    color: #3284ff;
}

.navigation {
    display: flex;

    gap: 38px;
}

.navigation a {
    position: relative;

    color: #aab3c2;

    font-size: 14px;
    font-weight: 600;

    transition:
        color .2s ease;
}

.navigation a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -8px;

    height: 1px;

    background: #3284ff;

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform .2s ease;
}

.navigation a:hover {
    color: #ffffff;
}

.navigation a:hover::after {
    transform:
        scaleX(1);
}

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    background:
        transparent;

    flex-direction: column;
    justify-content: center;

    gap: 5px;

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    width: 22px;
    height: 2px;

    background: #ffffff;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


/* =====================================================
   BUTTONS
===================================================== */

.button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding:
        0 25px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.button:hover {
    transform:
        translateY(-2px);
}

.button-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #347ff5,
            #2167d9
        );

    box-shadow:
        0 10px 28px
        rgba(35,105,230,.20);
}

.button-primary:hover {
    box-shadow:
        0 0 20px
        rgba(50,132,255,.30),
        0 14px 35px
        rgba(35,105,230,.30);
}

.button-secondary {
    color: #dce4f0;

    background:
        rgba(255,255,255,.015);

    border:
        1px solid rgba(255,255,255,.12);
}

.button-secondary:hover {
    color: #ffffff;

    border-color:
        rgba(50,132,255,.55);

    box-shadow:
        0 0 18px
        rgba(50,132,255,.15);
}


/* =====================================================
   HERO
===================================================== */

.hero {
    width:
        min(
            1760px,
            calc(100% - 80px)
        );

    min-height:
        100vh;

    margin:
        0 auto;

    padding-top:
        110px;

    padding-bottom:
        70px;

    display: grid;

    grid-template-columns:
        minmax(500px, .78fr)
        minmax(700px, 1.22fr);

    gap:
        55px;

    align-items:
        center;
}

.hero-content {
    padding-top:
        15px;

    min-width: 0;
}

.tag {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom:
        23px;

    color:
        #438cff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;
}

.tag-line {
    width:
        28px;

    height:
        1px;

    background:
        #3284ff;
}

.hero h1 {
    margin:
        0;

    max-width:
        760px;

    font-size:
        clamp(
            52px,
            3.45vw,
            68px
        );

    line-height:
        1.04;

    letter-spacing:
        -2.8px;

    font-weight:
        800;
}

.hero h1 span {
    display:
        block;

    margin-top:
        4px;

    color:
        #9da8ba;
}

.hero-description {
    max-width:
        650px;

    margin:
        32px 0 0;

    color:
        #aeb8c8;

    font-size:
        17px;

    line-height:
        1.7;
}

.hero-description-secondary {
    max-width:
        610px;

    margin:
        15px 0 0;

    color:
        #68758a;

    font-size:
        14px;

    line-height:
        1.8;
}

.hero-actions {
    display:
        flex;

    gap:
        12px;

    margin-top:
        30px;
}

.hero-meta {
    display:
        flex;

    margin-top:
        40px;
}

.hero-meta > div {
    min-width:
        110px;

    padding-left:
        15px;

    border-left:
        1px solid
        rgba(49,133,255,.45);
}

.hero-meta strong {
    display:
        block;

    font-size:
        13px;

    letter-spacing:
        1px;
}

.hero-meta span {
    display:
        block;

    margin-top:
        3px;

    color:
        #657287;

    font-size:
        11px;
}


/* =====================================================
   VIEWER
===================================================== */

.viewer {
    position:
        relative;

    height:
        min(
            700px,
            75vh
        );

    min-height:
        590px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(48,125,240,.45);

    border-radius:
        22px;

    background:
        #080d15;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.35);

    transition:
        box-shadow .3s ease,
        border-color .3s ease;
}

.viewer:hover {
    border-color:
        rgba(50,132,255,.65);

    box-shadow:
        0 0 28px
        rgba(50,132,255,.12),
        0 25px 70px
        rgba(0,0,0,.35);
}

.viewer-info {
    position:
        relative;

    height:
        130px;

    padding:
        27px 32px 20px;

    z-index:
        5;

    background:
        linear-gradient(
            180deg,
            #080d15,
            #090e16
        );
}

.viewer-project-label {
    margin-bottom:
        7px;

    color:
        #3c8dff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        3px;
}

.viewer-title-row {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        25px;
}

.viewer h2 {
    margin:
        0;

    color:
        #f4f6fa;

    font-size:
        25px;

    line-height:
        1.2;

    letter-spacing:
        -.6px;
}

.viewer p {
    max-width:
        690px;

    margin:
        5px 0 0;

    color:
        #9ca8ba;

    font-size:
        13px;

    line-height:
        1.45;
}

.demo-counter {
    flex:
        0 0 auto;

    padding-top:
        5px;

    color:
        #5c7295;

    font-size:
        11px;

    letter-spacing:
        1px;
}

.viewer-frame {
    position:
        absolute;

    top:
        130px;

    right:
        0;

    bottom:
        0;

    left:
        0;

    background:
        #15191e;
}

.viewer-frame iframe {
    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;
}

.viewer-navigation {
    position:
        absolute;

    left:
        28px;

    right:
        28px;

    bottom:
        77px;

    display:
        flex;

    justify-content:
        space-between;

    z-index:
        10;

    pointer-events:
        none;
}

.demo-navigation {
    max-width:
        330px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 13px;

    border-radius:
        7px;

    color:
        #a9c5ef;

    background:
        rgba(22,28,39,.90);

    border:
        1px solid
        rgba(255,255,255,.08);

    font-size:
        13px;

    line-height:
        1.15;

    cursor:
        pointer;

    pointer-events:
        auto;

    backdrop-filter:
        blur(10px);

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.demo-navigation:hover {
    color:
        #ffffff;

    background:
        rgba(35,44,59,.95);

    border-color:
        rgba(50,132,255,.45);

    box-shadow:
        0 0 18px
        rgba(50,132,255,.15);
}

.navigation-project-name {
    text-align:
        center;
}

.viewer-open {
    position:
        absolute;

    right:
        0;

    bottom:
        0;

    z-index:
        20;

    min-width:
        300px;

    height:
        52px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        22px;

    border-radius:
        10px 0 18px 0;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #347ff5,
            #2167d9
        );

    font-size:
        15px;

    font-weight:
        700;

    box-shadow:
        0 10px 30px
        rgba(25,90,220,.22);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.viewer-open:hover {
    background:
        linear-gradient(
            135deg,
            #408cff,
            #2871e4
        );

    transform:
        translateY(-1px);

    box-shadow:
        0 0 25px
        rgba(50,132,255,.35);
}

.viewer-open > span:last-child {
    font-size:
        17px;
}


/* =====================================================
   SECTIONS
===================================================== */

.section {
    width:
        min(
            1600px,
            calc(100% - 80px)
        );

    margin:
        0 auto;

    padding:
        120px 0;
}

.section-heading {
    max-width:
        850px;

    margin-bottom:
        55px;
}

.section-heading h2 {
    margin:
        0;

    font-size:
        clamp(
            38px,
            3vw,
            50px
        );

    line-height:
        1.05;

    letter-spacing:
        -2px;
}

.section-heading p {
    max-width:
        700px;

    margin-top:
        18px;

    color:
        #7d899d;

    font-size:
        16px;

    line-height:
        1.7;
}


/* =====================================================
   CARDS
===================================================== */

.cards {
    display:
        grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap:
        14px;
}

.card {
    min-width:
        0;

    min-height:
        240px;

    padding:
        27px 23px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.018);

    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.card:hover {
    border-color:
        rgba(54,137,255,.45);

    transform:
        translateY(-5px);

    background:
        rgba(38,90,160,.055);

    box-shadow:
        0 0 25px
        rgba(50,132,255,.12);
}

.card h3 {
    margin:
        0 0 15px;

    font-size:
        19px;

    line-height:
        1.2;
}

.card p {
    margin:
        0;

    color:
        #78869a;

    font-size:
        13px;

    line-height:
        1.65;
}


/* =====================================================
   PROCESS
===================================================== */

.process {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        30px;
}

.process-line {
    position:
        absolute;

    top:
        7px;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:
        rgba(53,132,246,.20);
}

.process-step {
    position:
        relative;

    padding-top:
        35px;
}

.process-step::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        15px;

    height:
        15px;

    border-radius:
        50%;

    background:
        #3284ff;

    box-shadow:
        0 0 20px
        rgba(50,132,255,.4);
}

.process-step h3 {
    margin:
        0 0 12px;

    font-size:
        19px;
}

.process-step p {
    margin:
        0;

    color:
        #748095;

    font-size:
        14px;

    line-height:
        1.7;
}


/* =====================================================
   FAQ
===================================================== */

.faq {
    max-width:
        1050px;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}

.faq-item {
    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}

.faq-question {
    width:
        100%;

    padding:
        25px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    color:
        #eef2f8;

    background:
        transparent;

    text-align:
        left;

    font-size:
        17px;

    cursor:
        pointer;

    transition:
        color .2s ease;
}

.faq-question:hover {
    color:
        #ffffff;
}

.faq-plus {
    color:
        #3b88ff;

    font-size:
        24px;

    transition:
        transform .25s ease,
        text-shadow .25s ease;
}

.faq-question:hover .faq-plus {
    text-shadow:
        0 0 14px
        rgba(50,132,255,.65);
}

.faq-item.open .faq-plus {
    transform:
        rotate(45deg);
}

.faq-answer {
    max-height:
        0;

    overflow:
        hidden;

    transition:
        max-height .35s ease;
}

.faq-answer p {
    max-width:
        800px;

    margin:
        0 0 25px;

    color:
        #778398;

    font-size:
        14px;

    line-height:
        1.7;
}


/* =====================================================
   CONTACT
===================================================== */

.contact {
    width:
        min(
            1600px,
            calc(100% - 80px)
        );

    margin:
        0 auto;

    padding:
        85px 0 110px;
}

.contact-inner {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    padding:
        45px;

    border:
        1px solid
        rgba(54,137,255,.22);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(22,38,65,.32),
            rgba(255,255,255,.015)
        );

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.contact-inner:hover {
    border-color:
        rgba(54,137,255,.38);

    box-shadow:
        0 0 30px
        rgba(50,132,255,.08);
}

.contact-label {
    margin-bottom:
        12px;

    color:
        #3988ff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;
}

.contact-inner h2 {
    margin:
        0;

    font-size:
        40px;

    line-height:
        1.1;

    letter-spacing:
        -1.5px;
}

.contact-inner p {
    max-width:
        620px;

    margin:
        17px 0 0;

    color:
        #78869a;

    font-size:
        15px;
}

.contact-button {
    flex:
        0 0 auto;
}

.contacts-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        25px;

    margin-top:
        45px;
}

.contact-item {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding-left:
        16px;

    border-left:
        1px solid
        rgba(50,132,255,.5);
}

.contact-item-label {
    margin-bottom:
        6px;

    color:
        #65758d;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;
}

.contact-item a {
    color:
        #dce5f3;

    font-size:
        14px;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}

.contact-item a:hover {
    color:
        #3c8cff;

    text-shadow:
        0 0 12px
        rgba(50,132,255,.35);
}


/* =====================================================
   CONTACT MODAL
===================================================== */

.contact-modal {
    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;

    visibility:
        hidden;

    opacity:
        0;

    z-index:
        1000;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.contact-modal.open {
    visibility:
        visible;

    opacity:
        1;
}

.contact-modal-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(2,5,9,.78);

    backdrop-filter:
        blur(12px);
}

.contact-modal-window {
    position:
        relative;

    width:
        min(
            620px,
            100%
        );

    max-height:
        90vh;

    overflow-y:
        auto;

    padding:
        32px;

    border:
        1px solid
        rgba(62,137,244,.30);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #0b111a,
            #080d14
        );

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.55);

    transform:
        translateY(15px);

    transition:
        transform .25s ease;
}

.contact-modal.open
.contact-modal-window {
    transform:
        translateY(0);
}

.contact-modal-close {
    position:
        absolute;

    top:
        15px;

    right:
        17px;

    width:
        35px;

    height:
        35px;

    color:
        #7f8da2;

    background:
        transparent;

    font-size:
        26px;

    cursor:
        pointer;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}

.contact-modal-close:hover {
    color:
        #ffffff;

    text-shadow:
        0 0 12px
        rgba(50,132,255,.6);
}

.contact-modal-label {
    margin-bottom:
        10px;

    color:
        #3988ff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;
}

.contact-modal-window h2 {
    margin:
        0;

    font-size:
        32px;

    line-height:
        1.1;

    letter-spacing:
        -1px;
}

.contact-modal-description {
    margin:
        12px 0 25px;

    color:
        #758298;

    font-size:
        14px;
}

.contact-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;
}

.form-row {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;
}

.contact-form label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}

.contact-form label > span {
    color:
        #aab5c6;

    font-size:
        11px;

    font-weight:
        600;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width:
        100%;

    padding:
        12px 13px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        7px;

    outline:
        none;

    color:
        #e8edf5;

    background:
        rgba(255,255,255,.025);

    font-size:
        13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color:
        rgba(54,137,255,.65);

    box-shadow:
        0 0 15px
        rgba(50,132,255,.08);
}

.contact-form textarea {
    min-height:
        110px;

    resize:
        vertical;
}

.contact-form select {
    appearance:
        none;
}

.contact-form option {
    background:
        #0b111a;
}

.form-submit {
    width:
        100%;

    justify-content:
        space-between;

    padding:
        0 16px;
}

.contact-direct {
    margin-top:
        23px;

    padding-top:
        18px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    text-align:
        center;
}

.contact-direct > span {
    display:
        block;

    margin-bottom:
        12px;

    color:
        #56657b;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.7px;
}

.contact-direct > div {
    display:
        flex;

    justify-content:
        center;

    gap:
        10px;
}

.contact-direct a {
    padding:
        9px 18px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        7px;

    color:
        #b8c6d9;

    font-size:
        12px;

    transition:
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.contact-direct a:hover {
    color:
        #ffffff;

    border-color:
        rgba(54,137,255,.4);

    box-shadow:
        0 0 15px
        rgba(50,132,255,.12);
}


/* =====================================================
   FOOTER
===================================================== */

footer {
    border-top:
        1px solid
        rgba(255,255,255,.07);
}

.footer-inner {
    width:
        min(
            1600px,
            calc(100% - 80px)
        );

    min-height:
        80px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    color:
        #4f5b6d;

    font-size:
        12px;
}

.footer-logo {
    color:
        #dfe6ef;

    font-size:
        18px;

    font-weight:
        800;
}


/* =====================================================
   REVEAL
===================================================== */

.reveal {
    opacity:
        0;

    transform:
        translateY(20px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}

.reveal.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* =====================================================
   DEMO CHANGE
===================================================== */

.demo-changing .viewer-frame {
    animation:
        demoFade .35s ease;
}

@keyframes demoFade {

    0% {
        opacity:
            .25;

        transform:
            scale(.995);
    }

    100% {
        opacity:
            1;

        transform:
            scale(1);
    }

}


/* =====================================================
   CURSOR GLOW
===================================================== */

.cursor-glow {
    position:
        fixed;

    top:
        -160px;

    left:
        -160px;

    width:
        320px;

    height:
        320px;

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        9999;

    background:
        radial-gradient(
            circle,
            rgba(50,132,255,.10) 0%,
            rgba(50,132,255,.045) 28%,
            rgba(50,132,255,.015) 50%,
            transparent 72%
        );

    filter:
        blur(12px);

    will-change:
        transform;
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1500px) {

    .hero {
        grid-template-columns:
            minmax(560px, .78fr)
            minmax(800px, 1.22fr);
    }

    .hero h1 {
        font-size:
            clamp(
                56px,
                3.2vw,
                68px
            );
    }

    .viewer {
        height:
            720px;
    }

}


/* =====================================================
   TABLET / SMALL DESKTOP
===================================================== */

@media (max-width: 1450px) {

    .hero {
        grid-template-columns:
            minmax(440px, .75fr)
            minmax(600px, 1.25fr);

        gap:
            40px;
    }

    .hero h1 {
        font-size:
            clamp(
                48px,
                4vw,
                60px
            );
    }

    .cards {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* =====================================================
   1100 PX
===================================================== */

@media (max-width: 1100px) {

    .hero {
        grid-template-columns:
            1fr;

        padding-top:
            110px;
    }

    .hero h1 {
        max-width:
            850px;

        font-size:
            clamp(
                48px,
                6vw,
                64px
            );
    }

    .viewer {
        height:
            650px;
    }

    .cards {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .process {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap:
            45px;
    }

    .process-line {
        display:
            none;
    }

}


/* =====================================================
   700 PX
===================================================== */

@media (max-width: 700px) {

    .header {
        width:
            calc(100% - 30px);
    }


    .navigation {
        position:
            absolute;

        top:
            72px;

        left:
            0;

        right:
            0;

        display:
            none;

        padding:
            20px;

        flex-direction:
            column;

        gap:
            18px;

        border:
            1px solid
            rgba(255,255,255,.08);

        border-radius:
            0 0 12px 12px;

        background:
            #080d14;
    }

    .navigation.mobile-open {
        display:
            flex;
    }

    .mobile-menu-button {
        display:
            flex;
    }


    .hero,
    .section,
    .contact,
    .footer-inner {
        width:
            calc(100% - 30px);
    }


    .hero {
        padding-top:
            105px;

        gap:
            40px;
    }


    .hero h1 {
        font-size:
            clamp(
                40px,
                11vw,
                52px
            );

        line-height:
            1.05;

        letter-spacing:
            -2.2px;
    }


    .hero-description {
        font-size:
            15px;
    }


    .hero-meta {
        margin-top:
            35px;
    }


    .viewer {
        min-height:
            500px;

        height:
            70vh;

        border-radius:
            15px;
    }


    .viewer-info {
        height:
            125px;

        padding:
            22px 18px 15px;
    }


    .viewer h2 {
        font-size:
            18px;
    }


    .viewer p {
        font-size:
            11px;
    }


    .demo-counter {
        display:
            none;
    }


    .viewer-frame {
        top:
            125px;
    }


    .viewer-navigation {
        left:
            10px;

        right:
            10px;

        bottom:
            62px;
    }


    .demo-navigation {
        max-width:
            45%;

        font-size:
            10px;

        padding:
            7px 9px;
    }


    .viewer-open {
        min-width:
            0;

        width:
            65%;

        height:
            48px;

        padding:
            0 14px;

        font-size:
            13px;

        border-radius:
            8px 0 15px 0;
    }


    .section {
        padding:
            80px 0;
    }


    .section-heading h2 {
        font-size:
            36px;
    }


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


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


    .contact-inner {
        padding:
            30px;

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .contact-inner h2 {
        font-size:
            34px;
    }


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


    .form-row {
        grid-template-columns:
            1fr;
    }


    .contact-modal-window {
        padding:
            25px 20px;
    }


    .contact-modal-window h2 {
        font-size:
            28px;
    }


    .footer-inner {
        min-height:
            100px;

        flex-direction:
            column;

        justify-content:
            center;

        padding:
            20px 0;
    }


    .cursor-glow {
        display:
            none;
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}