.hero-main-title {
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.78), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hero-typed-wrap {
    width: 100%;
    height: 4.2rem;
    max-width: min(36rem, calc(100vw - 2rem));
    overflow: hidden;
}

.typed {
    display: inline !important;
    max-width: 100%;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.16;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    color: #1e84fc;
    background: linear-gradient(108deg, #1e84fc 0%, #4ca2ff 40%, #9fd3ff 74%, #eef8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.82)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.95));
}

span.typed-cursor {
    display: inline !important;
    line-height: inherit;
    color: #ffffff80;
    font-weight: 800;
    margin-left: 2px;
    vertical-align: baseline;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

@media (min-width: 640px) {
    .hero-typed-wrap {
        height: 6.2rem;
    }

    .typed {
        font-size: 2rem;
        line-height: 1.14;
    }
}

@media (min-width: 1024px) {
    .hero-typed-wrap {
        height: 7.2rem;
    }

    .typed {
        font-size: 2.75rem;
        line-height: 1.12;
    }
}

@media (min-width: 1280px) {
    .hero-typed-wrap {
        max-width: 850px;
        height: 6.15rem;
    }

    .typed {
        font-size: 2.55rem;
        line-height: 1.15;
    }
}

@media (min-width: 1536px) {
    .hero-typed-wrap {
        height: 6.7rem;
    }

    .typed {
        font-size: 2.85rem;
    }
}

@media (max-width: 767px) {

    .hero-tools-row {
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .hero-tool-copy {
        display: none !important;
    }

    .hero-main-title,
    .hero-typed-wrap {
        margin-left: 0 !important;
        margin-right: auto !important;
        text-align: left !important;
        box-sizing: border-box;
        padding-right: 5.25rem;
        max-width: 100% !important;
    }

    .hero-typed-wrap {
        height: 3.9rem;
    }

    .typed {
        font-size: 1.35rem;
        line-height: 1.14;
    }

    .hero-bg-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 62% top !important;
        transform: scale(1.08);
        transform-origin: top center;
    }
}

@media (max-width: 420px) {
    .hero-main-title,
    .hero-typed-wrap {
        padding-right: 4.5rem;
    }
}

@media (max-width: 375px) {
    .hero-main-title,
    .hero-typed-wrap {
        padding-right: 3.75rem;
    }

    .typed {
        font-size: 1.25rem;
    }
}


@@media (max-width: 767px) {
    .reference-portfolio-wrap {
        margin-top: 3.25rem !important;
    }

    .reference-portfolio-grid {
        padding-top: 2.5rem !important;
        row-gap: 2.75rem !important;
    }

    .reference-bg-vector {
        top: -1.25rem !important;
        left: 50% !important;
        height: 300px !important;
        width: 185% !important;
        opacity: 0.42;
        overflow: hidden;
    }

        .reference-bg-vector img {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
            object-position: top center !important;
        }

    .reference-soft-vector {
        top: -2rem !important;
        height: 360px !important;
        opacity: 0.24;
        overflow: hidden;
    }

        .reference-soft-vector img {
            object-fit: cover !important;
            object-position: top center !important;
        }

    .reference-project-card {
        padding-left: 1rem !important;
    }

    .reference-domain-grid {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 0.375rem !important;
        margin-top: 1rem !important;
    }

        .reference-domain-grid a {
            position: relative;
            height: 1.45rem !important;
            min-height: 1.45rem !important;
            padding: 0 !important;
            overflow: hidden;
            font-size: 0 !important;
            line-height: 1 !important;
            background: rgba(255, 255, 255, 0.025);
            border-color: rgba(255, 255, 255, 0.10) !important;
        }

            .reference-domain-grid a::after {
                content: attr(data-short);
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                font-family: inherit;
                font-size: 10px;
                font-weight: 500;
                line-height: 1;
                color: rgba(255, 255, 255, 0.88);
                letter-spacing: 0.01em;
            }
}

@@media (max-width: 389px) {
    .reference-domain-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}