:root {
    --dks-color-ink-primary: #0F2A44;
    --dks-color-ink-secondary: #38536B;
    --dks-color-text-muted: #6D8294;
    --dks-color-surface-page: #E9EEF2;
    --dks-color-surface-page-glass: rgba(233, 238, 242, 0.96);
    --dks-color-surface-paper: #FFFFFF;
    --dks-color-surface-navy: #123957;
    --dks-color-surface-navy-deep: #0A2740;
    --dks-color-edge-accent: #3886D4;
    --dks-color-edge-soft: rgba(15, 42, 68, 0.16);
    --dks-font-display: "Exo 2", sans-serif;
    --dks-font-body: "Exo", sans-serif;
    --dks-type-subsection: clamp(1.5rem, 2.4vw, 2.75rem);
    --dks-leading-heading: 1.1;
    --dks-size-target-min: 44px;
    --dks-radius-media: 16px;
    --dks-radius-panel: 18px;
    --dks-radius-control: 999px;
    --dks-shadow-media: 0 22px 56px rgba(15, 42, 68, 0.16);
    --dks-space-gutter: clamp(16px, 3vw, 40px);
    --dks-space-section: clamp(56px, 8vw, 112px);
    --dks-space-cluster: clamp(12px, 1.6vw, 24px);
    --dks-content-max: 1280px;
    --dks-layout-base-media-max: 655px;
    --dks-motion-fast: 170ms;
    --dks-motion-medium: 600ms;
    --dks-motion-slow: 740ms;
    --dks-motion-stagger-step: 32ms;
    --dks-motion-scrub-catchup: 270ms;
    --dks-motion-reveal-travel: 24px;
    --dks-motion-hover-scale: 0.975;
    --dks-motion-depth-scale: 1.045;
    --dks-motion-base-iris-start: circle(0% at 50% 50%);
    --dks-motion-base-iris-end: circle(100% at 50% 50%);
    --dks-motion-base-iris-duration-desktop: 780ms;
    --dks-motion-base-iris-duration-mobile: 580ms;
    --dks-motion-base-iris-trigger-desktop: 70%;
    --dks-motion-base-iris-trigger-mobile: 72%;
    --dks-motion-base-iris-edge-width: 2px;
    --dks-motion-base-iris-edge-scale: 1.55;
    --dks-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dks-motion-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--dks-color-edge-accent);
    outline-offset: 4px;
}

.dks-split .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.dks-motion-ready img[loading="lazy"] {
    opacity: 0.01;
    transition: opacity var(--dks-motion-medium) var(--dks-motion-ease-out);
}

.dks-motion-ready img[loading="lazy"].is-loaded {
    opacity: 1;
}

.dks-hero-media {
    overflow: hidden;
}

.dks-hero-media,
.dks-hero-media img,
.dks-hero-media video {
    transform-origin: center center;
}

.dks-hero .big-img::before {
    z-index: 2;
    pointer-events: none;
}

.dks-hero .big-img img,
.dks-hero .big-img video {
    position: relative;
    z-index: 1;
}

.dks-hero .is-absolute {
    z-index: 3;
}

.dks-hero-title-text {
    display: block;
    width: 100%;
}

.dks-hero-media video {
    float: left;
    width: 100%;
    max-height: 700px;
    object-fit: cover;
}

.dks-hero-logo,
.dks-hero .big-title-wrap {
    transform-origin: center center;
}

.dks-proof-section .img-video,
.dks-base-media,
.dks-inquiry-section {
    overflow: hidden;
}

.dks-proof-section .img-video,
.dks-single.dks-media-reveal,
.dks-slider.dks-media-reveal {
    position: relative;
}

.dks-proof-section .img-video img,
.dks-proof-section .blur-part {
    transform-origin: center center;
}

.dks-proof-section .blur-part {
    backdrop-filter: blur(var(--dks-proof-panel-blur, 3px));
    -webkit-backdrop-filter: blur(var(--dks-proof-panel-blur, 3px));
}

.dks-media-reveal:not(img) {
    isolation: isolate;
}

.dks-media-reveal:not(img)::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 2px;
    content: "";
    pointer-events: none;
    background: var(--dks-color-edge-accent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
}

.dks-media-reveal.is-dks-revealing:not(img)::after {
    animation: dks-edge-reveal var(--dks-motion-slow) var(--dks-motion-ease-inout) both;
}

.dks-base-media.dks-media-reveal::after {
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    box-sizing: border-box;
    border: var(--dks-motion-base-iris-edge-width) solid var(--dks-color-edge-accent);
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.02);
    transform-origin: center center;
}

.dks-base-media.dks-media-reveal.is-dks-revealing::after {
    animation: dks-base-iris-edge var(--dks-motion-base-iris-duration-desktop) var(--dks-motion-ease-inout) both;
}

@keyframes dks-base-iris-edge {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.02);
    }
    14% {
        opacity: 0.82;
    }
    72% {
        opacity: 0.48;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(var(--dks-motion-base-iris-edge-scale));
    }
}

.dks-base-media,
.dks-base-media img,
.dks-base-media video {
    transform-origin: center center;
}

.dks-base-media {
    display: block;
    width: var(--dks-layout-base-media-max);
    max-width: 100%;
    line-height: 0;
}

.dks-base-media img,
.dks-base-media video {
    display: block;
}

.dks-product-row {
    position: relative;
    isolation: isolate;
    align-items: center;
    overflow: hidden;
}

.dks-product-row::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background: var(--dks-color-ink-primary);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 300ms var(--dks-motion-ease-out);
}

.dks-product-row > .left-products-title,
.dks-product-row > .right-products-btns,
.dks-product-row > .dks-scroll-wrap {
    position: relative;
    z-index: 2;
}

.dks-product-row > .left-products-title {
    box-sizing: border-box;
    flex: 0 0 42%;
    width: auto;
    overflow: hidden;
    padding-left: clamp(14px, 1.5vw, 22px);
    font-size: clamp(18px, 2.4vw, 31px);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 260ms var(--dks-motion-ease-out);
}

.dks-product-row > .right-products-btns,
.dks-product-row > .dks-scroll-wrap {
    flex: 1 1 58%;
    width: auto;
    min-width: 0;
}

.dks-product-row .right-products-btns {
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    overflow: visible;
    padding: 2px 0;
}

.dks-product-row .product-btn {
    flex: 0 0 auto;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    transition: color 260ms var(--dks-motion-ease-out), border-color 260ms var(--dks-motion-ease-out), background-color 260ms var(--dks-motion-ease-out);
}

.dks-product-preview {
    position: absolute;
    top: 50%;
    left: 32%;
    z-index: 1;
    width: 190px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -42%) rotate(-3deg) scale(0.86);
    transition: opacity 220ms var(--dks-motion-ease-out), transform 340ms var(--dks-motion-ease-out);
}

.dks-product-preview::after {
    position: absolute;
    inset: 0;
    content: "";
    background: rgba(15, 42, 68, 0.18);
}

.dks-product-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dks-product-row:focus-within::before {
    transform: scaleY(1);
}

.dks-product-row:focus-within .left-products-title,
.dks-product-row:focus-within .product-btn {
    color: var(--dks-color-surface-paper);
    border-color: rgba(255, 255, 255, 0.55);
}

.dks-product-row:focus-within .dks-product-preview {
    opacity: 0.52;
    transform: translate(-50%, -50%) rotate(-3deg) scale(1);
}

.dks-base-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dks-base-section .right-part a,
.phone a,
.email a,
.dft-contact {
    color: inherit;
    text-decoration: none;
}

.dks-base-section .right-part a:hover,
.dks-base-section .right-part a:focus-visible,
.phone a:hover,
.phone a:focus-visible,
.email a:hover,
.email a:focus-visible,
.dft-contact:hover,
.dft-contact:focus-visible {
    color: var(--dks-color-edge-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dks-magnetic-card .project-image img {
    transition: transform var(--dks-motion-medium) var(--dks-motion-ease-out);
}

.dks-magnetic-card .project-image:focus-visible img {
    transform: scale(1.035);
}

.dks-inquiry-section .like-btn {
    transition: color var(--dks-motion-fast) var(--dks-motion-ease-out), background-color var(--dks-motion-fast) var(--dks-motion-ease-out), box-shadow var(--dks-motion-fast) var(--dks-motion-ease-out);
}

.dks-inquiry-section .like-btn:hover,
.dks-inquiry-section .like-btn:focus-visible {
    color: var(--dks-color-ink-primary);
    background: var(--dks-color-surface-paper);
    box-shadow: 0 16px 40px rgba(15, 42, 68, 0.18);
}

.services-box {
    position: relative;
    isolation: isolate;
}

.services-box::before {
    position: absolute;
    top: -15px;
    left: 50%;
    z-index: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: var(--dks-color-surface-paper);
    opacity: 0;
    transform: translateX(-50%) scale(0.72);
    transition: opacity var(--dks-motion-fast) var(--dks-motion-ease-out), transform var(--dks-motion-medium) var(--dks-motion-ease-out);
}

.services-box > * {
    position: relative;
    z-index: 1;
}

.services-box:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.partners-box img {
    transition: opacity var(--dks-motion-fast) var(--dks-motion-ease-out), transform var(--dks-motion-medium) var(--dks-motion-ease-out);
}

.partners-box:focus-visible img {
    opacity: 0.88;
    transform: scale(var(--dks-motion-hover-scale));
}

.follow-btn.dks-magnetic-action {
    z-index: 10;
    opacity: 0;
    transform-origin: center center;
}

.dks-partners .swiper-wrapper {
    transition-timing-function: var(--dks-motion-ease-out) !important;
}

.footer .f-link,
.footer-links .red-f-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size var(--dks-motion-fast) var(--dks-motion-ease-out);
}

.footer .f-link:hover,
.footer .f-link:focus-visible,
.footer-links .red-f-link:hover,
.footer-links .red-f-link:focus-visible {
    background-position: 0 100%;
    background-size: 100% 1px;
}

.top-about-image video {
    float: left;
    display: block;
    width: 100%;
    object-fit: cover;
}

@keyframes dks-edge-reveal {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    22% {
        opacity: 0.9;
    }
    76% {
        opacity: 0.9;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

@media (hover: hover) and (pointer: fine) {
    .dks-product-row:hover::before {
        transform: scaleY(1);
    }

    .dks-product-row:hover .left-products-title,
    .dks-product-row:hover .product-btn {
        color: var(--dks-color-surface-paper);
        border-color: rgba(255, 255, 255, 0.55);
    }

    .dks-product-row:hover .dks-product-preview {
        opacity: 0.52;
        transform: translate(-50%, -50%) rotate(-3deg) scale(1);
    }

    .dks-magnetic-card .project-image:hover img {
        transform: scale(1.035);
    }

    .services-box:hover::before {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    .partners-box:hover img {
        opacity: 0.88;
        transform: scale(var(--dks-motion-hover-scale));
    }
}

@media screen and (max-width: 1023px) {
    .dks-product-preview {
        display: none;
    }
}

@media screen and (max-width: 650px) {
    .dks-product-row > .left-products-title,
    .dks-product-row > .right-products-btns,
    .dks-product-row > .dks-scroll-wrap {
        flex: 0 0 100%;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .dks-hero-media video {
        height: 560px;
        max-height: none;
    }

    .dks-base-media.dks-media-reveal.is-dks-revealing::after {
        animation-duration: var(--dks-motion-base-iris-duration-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .dks-motion-ready [data-dks-reveal],
    .dks-motion-ready .dks-media-reveal,
    .dks-motion-ready img[loading="lazy"] {
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
    }

    .dks-media-reveal::after {
        display: none !important;
    }
}
