/*
AUTHORSHIP NOTE
Purpose: global visual system: typography, layout, content rhythm, header/footer, responsive tokens, and core page structure.
Craft signal: local font metrics, design tokens, safe-area variables, mobile portal measurements, and overlay-safe layout tokens are coordinated to reduce CLS and keep the SPA-like composition stable whether scrolling belongs to the document or to a popup card.
*/

/* AUTHORSHIP: local Poppins files are metric-tuned to minimize layout shift when the webfont swaps in. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../google-fonts/pxiEyp8kv8JHgFVrJJfecg.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    size-adjust: 100%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../google-fonts/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2') format('woff2');
    size-adjust: 100%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../google-fonts/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2') format('woff2');
    size-adjust: 100%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../google-fonts/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2') format('woff2');
    size-adjust: 100%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}

/* AUTHORSHIP: design tokens double as runtime contracts; JS writes selected variables instead of mutating layout styles directly. */
:root {
    --side: clamp(16px, 3rem, 48px);
    --vert: clamp(16px, 3rem, 48px);
    --mainpage-circle: min(33.333vmax, 640px);
    --mainpage-icon: clamp(24px, 5rem, 80px);
    --paragraph: 1.625em;
    --logo: clamp(32px, 5.5rem, 88px);
    --logo-mini: clamp(20px, 2rem, 32px);
    font-size: 0.833333vw;
    --mob-padding-v: 16px;
    --mob-logo-h: 64px;
    --mob-header-gap: 24px;
    --mob-portal-nudge: 12px;
    --mob-margin-h: 32px;
    --cp-mobile-portal-size: min(calc(100vw - var(--mob-margin-h)), 760px);
    --font: Poppins, -apple-system, system-ui, sans-serif;
    --font2: "Noto Sans Thai Looped", Poppins, -apple-system, system-ui, sans-serif;
    --white: #fff;
    --black: #000;
    --blue: #0000ff;
    --violet: #ed00ec;
    --violet2: #6a00ff;
    --grey100: #EDEDF4;
    --grey200: #d5d5e5;
    --grey500: #7a7a9c;
    --grey600: #59597E;
    --grey700: #3f3f73;
    --grey800: #00005A;
    --red: #FF616D;
    --green: #87dd1d;
    --lightblue: #55f0ff;
    --map-x: 50vw;
    --map-y: 42vh;
    --cp-cta-height: 54px;
    --cp-cta-radius: 999px;
    --cp-sidebar-radius: 28px;
    --cp-sidebar-bg: linear-gradient(180deg, rgba(54, 62, 143, 0.82) 0%, rgba(34, 42, 116, 0.84) 58%, rgba(39, 49, 138, 0.88) 100%);
    --cp-sidebar-border: rgba(255, 255, 255, 0.14);
    --cp-sidebar-shadow: 0 28px 64px rgba(13, 18, 58, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@media only screen and (min-width: 1920px) {
    :root {
        --side: calc((100vw - 1824px) / 2);
        font-size: 16px;
    }
}

@media only screen and (max-width: 900px) {
    :root {
        font-size: 16px;
        --side: 16px;
        --vert: 16px;
        --mainpage-circle: min(calc(100vw - 64px), 480px);
        --logo: 64px;
        --mob-padding-v: var(--cp-mobile-safe-top);
        --mob-logo-h: 48px;
        --mob-margin-h: calc(var(--cp-mobile-safe-left) + var(--cp-mobile-safe-right));
        --cp-mobile-safe-top: max(16px, env(safe-area-inset-top));
        --cp-mobile-safe-left: max(16px, env(safe-area-inset-left));
        --cp-mobile-safe-right: max(16px, env(safe-area-inset-right));
        --cp-mobile-content-top: calc(var(--cp-mobile-safe-top) + var(--logo) + 28px);
        --cp-mobile-logo-align-nudge: 0px;
        --cp-mobile-portal-size: min(calc(100vw - var(--mob-margin-h) - 48px), 460px);
        --cp-mobile-portal-top: calc(var(--mob-padding-v) + var(--mob-logo-h) + 96px) !important;
        --cp-mobile-portal-gap: 30px;
        --cp-mobile-portal-after-gap: 14px !important;
        --cp-mobile-portal-space: calc(var(--cp-mobile-portal-size) + var(--cp-mobile-portal-gap) + var(--cp-mobile-portal-after-gap)) !important;
        --cp-mobile-portal-drop-offset: 0px !important;
        --cp-mobile-portal-extra-drop: 0px !important;
        --cp-mobile-card-extra-gap: 0px !important;
        --cp-mobile-bg-extra: 84px;
        --cp-mobile-bg-min-height: calc(var(--cp-mobile-portal-top) + var(--cp-mobile-portal-size) + var(--cp-mobile-bg-extra));
        --cp-mobile-zigzag-right-overlap: 72px;
        --cp-mobile-zigzag-left-below: 20px;
        --cp-touch-min: 44px;
        --cp-touch-pill: 52px;
    }
}

@media only screen and (max-width: 560px) {
    :root {
        --mob-margin-h: 16px;
        --cp-mobile-portal-size: min(calc(100vw - var(--mob-margin-h) - 40px), 640px);
        --cp-mobile-portal-top: calc(var(--mob-padding-v) + var(--mob-logo-h) + 84px) !important;
        --cp-mobile-portal-gap: 28px;
        --cp-mobile-portal-after-gap: 12px !important;
        --cp-mobile-portal-space: calc(var(--cp-mobile-portal-size) + var(--cp-mobile-portal-gap) + var(--cp-mobile-portal-after-gap)) !important;
        --cp-mobile-portal-drop-offset: 0px !important;
        --cp-mobile-portal-extra-drop: 0px !important;
        --cp-mobile-card-extra-gap: 0px !important;
        --cp-mobile-bg-extra: 76px;
        --cp-mobile-bg-min-height: calc(var(--cp-mobile-portal-top) + var(--cp-mobile-portal-size) + var(--cp-mobile-bg-extra));
        --cp-mobile-zigzag-right-overlap: 64px;
        --cp-mobile-zigzag-left-below: 18px;
    }
}

html,
body {
    box-sizing: border-box;
    height: 100%;
    box-sizing: border-box;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--grey100);
    font: normal 16px/1.625 var(--font);
    color: var(--grey800);
    -webkit-text-size-adjust: none;
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    html,
    body {
        overflow-x: hidden !important;
        overflow-x: clip !important;
        overscroll-behavior-x: none !important;
    }
}

*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

form,
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    -webkit-appearance: none;
    text-align: left;
    font: normal clamp(12px, 1rem, 16px) var(--font);
    color: var(--grey800);
    padding: 0 0.75em 0 1.5em;
    height: 3.125em;
    border: 1px solid var(--grey500);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: none;
    outline: none;
    margin: 0;
    width: 100%;
    display: block;
}

@media only screen and (max-width: 900px) {

    input,
    textarea,
    select,
    button {
        font-size: 16px !important;
    }
}

input.invalid,
textarea.invalid,
select.invalid {
    border-color: var(--red) !important;
}

textarea {
    height: 9.375em;
    padding-top: 1em;
    padding-bottom: 1em;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 1;
    color: var(--grey500);
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: var(--grey500);
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    opacity: 1;
    color: var(--grey500);
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    opacity: 0.5;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    opacity: 0.5;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    opacity: 0.5;
}

input::-ms-clear {
    display: none;
}

button::-moz-focus-inner {
    border: 0;
}

textarea {
    resize: none;
}

select {
    padding-right: 2.25em;
    cursor: pointer;
}

.select {
    position: relative;
}

.select:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.75em;
    pointer-events: none;
    width: 1.5em;
    height: 1.5em;
    margin: -0.75em 0;
    background: url("../img/icons/select-arrow.svg") no-repeat 50% 50%/contain;
}

video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    visibility: visible;
    pointer-events: auto;
    will-change: transform, opacity;
}

header,
nav,
section,
article,
aside,
footer,
menu,
time,
figure,
figcaption,
main {
    display: block;
}

img,
svg,
picture {
    border: 0;
    outline: none;
    vertical-align: top;
}

svg {
    fill: currentColor;
}

a {
    color: var(--blue);
    text-decoration: underline;
    outline: none;
    cursor: pointer;
}

@media (pointer:fine) {
    a:hover {
        text-decoration: none;
    }
}

a[href^=tel] {
    color: inherit;
    cursor: inherit;
    text-decoration: none;
}

strong {
    font-weight: bold;
}

.btn {
    -webkit-appearance: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    font-weight: normal;
    font-size: clamp(12px, 1rem, 16px);
    line-height: 1.5;
    height: 2.5em;
    padding: 0 1.875em;
    outline: none;
    text-decoration: none;
    border-radius: 1em;
    text-align: center;
    border-style: solid;
    border-width: 2px;
    flex: 0 0 auto;
    max-width: 100%;
    transition-property: transform, opacity, color, border, background;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.btn-big {
    height: 3.5em;
    padding: 0 3em;
    text-transform: uppercase;
    font-weight: 600;
}

.btn-chat {
    color: var(--white);
    background-color: var(--blue);
    border-color: var(--blue);
    font-weight: 600;
    height: 4.5em;
    padding: 0 2em;
    gap: 1em;
}

.btn-chat:before {
    content: '';
    flex: 0 0 auto;
    width: 1.5em;
    height: 1.5em;
    background: url("../img/icons/chat.svg") no-repeat 50% 50%/contain;
}

.btn-blue {
    color: var(--white);
    background-color: var(--blue);
    border-color: transparent;
}

.btn.disabled,
.btn:disabled {
    cursor: default;
    pointer-events: none;
}

.btn-blue.disabled,
.btn-blue:disabled {
    background-color: var(--grey200);
}

/*Header start*/
.header .logo {
    position: fixed;
    z-index: 2;
    top: var(--vert);
    left: var(--side);
}

.header .logo img {
    height: var(--logo);
    width: auto;
}

.header .link-back {
    cursor: pointer;
    user-select: none;
    position: fixed;
    top: var(--vert);
    right: var(--side);
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
    min-height: 32px;
    min-width: 32px;
    padding: 0 0 0 34px;
    background: url("../img/icons/link-back.svg") no-repeat 0 50%/auto 32px;
    color: var(--black);
    transition: opacity 0.4s ease;
    z-index: 2;
    text-decoration: none;
}

@media (pointer:fine) {
    .header .link-back:hover {
        opacity: 0.5;
    }
}

.header .menu-trigger {
    cursor: pointer;
    user-select: none;
    position: fixed;
    top: var(--vert);
    left: calc(var(--logo) * 2.875 + var(--side) + 100px);
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
    min-height: 32px;
    min-width: 32px;
    padding: 0 0 0 34px;
    background: url("../img/icons/menu-dark.svg") no-repeat 0 50%/auto 32px;
    color: var(--black);
    transition: opacity 0.4s ease;
    z-index: 2;
}

.mainwrap:has(.mainpage) .header .menu-trigger {
    left: calc(25.3125rem + var(--side));
}

@media (pointer:fine) {
    .header .menu-trigger:hover {
        opacity: 0.5;
    }
}

.header .menu-trigger.white {
    color: var(--white);
    background-image: url("../img/icons/menu-light.svg");
}

.header .menu-trigger.black {
    color: var(--black);
    background-image: url("../img/icons/menu-dark.svg");
}

.menu {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 430px;
    max-width: 100%;
    background: rgba(237, 237, 244, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding-top: clamp(24px, 3rem, 48px);
    box-shadow: 370px 0px 149px rgba(0, 0, 90, 0.02), 210px 0px 126px rgba(0, 0, 90, 0.08), 93px 0px 93px rgba(0, 0, 90, 0.13), 23px 0px 51px rgba(0, 0, 90, 0.15);
    transform: translate3d(0, 0, 0);
    transition-property: transform, opacity;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    backface-visibility: hidden;
    padding-top: 48px;
}

html:has(.menu.open) {
    overflow: hidden;
}

.menu:not(.open) {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
}

.menu .close {
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background: url("../img/icons/menu-close.svg") no-repeat 50% 50%/16px auto;
    transition: opacity 0.4s ease;
}

@media (pointer:fine) {
    .menu .close:hover {
        opacity: 0.5;
    }
}

.menu ul,
.menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    border-top: 1px solid var(--grey200);
}

.menu>ul {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.menu .link {
    display: flex;
    align-items: center;
    text-decoration: none;
    user-select: none;
    color: var(--grey800);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.015em;
    padding: 26px 26px 26px 64px;
    transition-property: color, background, opacity, transform;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    transform: translateX(0);
}

.menu li:has(> ul)>.link {
    cursor: pointer;
}

@media (pointer:fine) {

    .menu a.link:hover,
    .menu li:has(> ul)>.link:hover {
        transform: translateX(2px);
    }
}

.menu .link.active {
    background: var(--grey800) url(../img/icons/menu-active.svg) no-repeat 63px 50%/auto 16px;
    color: var(--white);
    padding-left: 88px;
}

.menu .sublink {
    display: flex;
    align-items: center;
    text-decoration: none;
    user-select: none;
    color: var(--grey800);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    height: 63px;
    letter-spacing: -0.015em;
    padding: 0 10px 0 112px;
    transition-property: color, opacity, transform;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    position: relative;
    transform: translateX(0);
}

@media (pointer:fine) {
    .menu a.sublink:hover {
        transform: translateX(2px);
    }
}

.menu .sublink.active {
    color: var(--white) !important;
    background-color: var(--blue);
    background-image: url(../img/icons/mini-star-white.svg)
}

.menu ul .sublink svg {
    position: absolute;
    top: 50%;
    left: 92px;
    width: 9px;
    height: 9px;
    transform: translateY(-50%);
    fill: var(--blue);
}

.menu li>ul>li:nth-child(1) .sublink svg {
    fill: #7B2E27;
}

.menu li>ul>li:nth-child(2) .sublink svg {
    fill: #6D7B49;
}

.menu li>ul>li:nth-child(3) .sublink svg {
    fill: #FF6D81;
}

.menu li>ul>li:nth-child(4) .sublink svg {
    fill: #1E58B8;
}

.menu li>ul>li:nth-child(5) .sublink svg {
    fill: #32A538;
}

.menu li>ul>li:nth-child(6) .sublink svg {
    fill: #E7AC00;
}

.menu .privacy {
    margin-top: auto !important;
    border-top: 0 !important;
}

.menu ul>li.privacy>.link,
.menu ul>li.privacy>a.link {
    font-weight: bold !important;
    font-size: 16px !important;
}

.menu li>ul {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.menu li.open>ul {
    max-height: 600px;
}

@media only screen and (max-width: 900px) {
    .header .logo {
        position: absolute;
    }

    .header .menu-trigger,
    .header .link-back {
        left: auto !important;
        right: var(--side);
        position: absolute;
        min-width: 70px;
    }

    .header .menu-trigger~.link-back {
        margin-top: 40px;
    }

    .header .link-back span {
        display: none;
    }

    .menu {
        padding-bottom: 90px;
    }

    html:has(.menu.open) #cp-lang-switcher {
        left: calc(min(100vw, 430px) / 2) !important;
        bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        z-index: 1350 !important;
    }
}

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

    .header .menu-trigger,
    .menu {
        transition: none !important;
    }
}

/*Header end*/
/*Footer start*/
.site-footer-new {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: clamp(32px, 4rem, 64px);
    padding: 0 var(--side) var(--vert) var(--side);
    color: var(--grey800);
    line-height: 1.5;
    font-weight: 500;
    font-size: clamp(12px, 0.875rem, 14px);
    gap: 32px;
}

.site-footer-new>* {
    max-width: 100%;
}

.site-footer-new p {
    margin: 0;
}

.site-footer-new a {
    margin: 0 !important;
    display: inline !important;
    min-height: 0 !important;
    color: inherit;
    text-decoration: underline;
}

.site-footer-new .small {
    font-weight: 600;
    font-size: clamp(10px, 0.75rem, 12px);
    line-height: 24px;
}

.site-footer-new .since,
.site-footer-new .copy {
    color: var(--grey600);
}

.site-footer-new .since {
    margin-bottom: 8px;
}

.site-footer-new .international {
    line-height: 1.5;
}

.site-footer-new .telegram-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grey700);
    gap: 8px;
}

.site-footer-new .telegram-title,
.site-footer-new .copy {
    margin-bottom: 2px;
}

.site-footer-new .telegram-title img {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.site-footer-new .r {
    text-align: center;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.site-footer-new .r>*:not(.line) {
    flex: 1 1 auto;
}

.site-footer-new .r .line {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    background-color: var(--grey200);
}

.site-footer-new .soc,
.site-footer-new .soc li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer-new .soc li:before {
    display: none;
}

.site-footer-new .soc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.site-footer-new .soc img {
    width: 48px;
    height: 48px;
    display: block;
    transition: opacity 0.4s ease;
}

@media (pointer:fine) {
    .site-footer-new .soc a:hover img {
        opacity: 0.72;
    }
}

@media only screen and (max-width: 900px) {
    .site-footer-new {
        flex-direction: column-reverse;
        text-align: center;
        align-items: stretch;
        margin-top: 48px;
    }

    .site-footer-new>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .site-footer-new .r>*:not(.line) {
        flex: 1;
    }
}

@media only screen and (max-width: 900px) {
    html:has(.site-footer-new) .mainpage {
        padding-bottom: 0 !important;
    }
}

@media only screen and (min-width: 901px) {
    html:has(.mainpage) .site-footer-new {
        flex: 0 0 auto !important;
        width: 100%;
        margin-top: 0 !important;
    }

    html:has(.mainpage) .site-footer-new .l {
        color: var(--white);
        max-width: 45%;
    }

    html:has(.mainpage) .site-footer-new .since {
        color: var(--grey500);
    }
}

/*Footer end*/
/*Mainpage grid start*/
.mainpage,
.mainwrap {
    /*-webkit-transform: translateZ(0);    transform: translateZ(0);*/
}

.mainwrap {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mainpage {
    position: relative;
    padding: var(--vert) var(--side) 0 var(--side);
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr var(--mainpage-circle) 1fr;
}

.mainpage .descr {
    order: 1;
    grid-row: span 2;
}

.mainpage .use-cases {
    order: 2;
    grid-column: 3/4;
    margin-left: auto;
}

.mainpage .featured-cases {
    order: 3;
    grid-column: 3/4;
}

@media only screen and (max-width: 900px) {
    .mainpage {
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding-bottom: clamp(16px, 3rem, 48px);
    }

    .mainpage .descr {
        grid-row: auto;
    }

    .mainpage .use-cases {
        order: 3;
        grid-column: auto;
    }

    .mainpage .featured-cases {
        grid-column: auto;
    }
}

/*Mainpage grid end*/
/*Hero descr start*/
.mainpage .descr {
    width: 100%;
    max-width: 20.416666em;
    margin-right: auto;
    color: var(--white);
    font-weight: 500;
    font-size: clamp(12px, 1.5rem, 24px);
    letter-spacing: -0.015em;
    display: flex;
    flex-direction: column;
}

.mainpage .descr .logo {
    flex: 0 0 auto;
    margin-bottom: clamp(16px, 1.5rem, 24px);
}

.mainpage .descr .logo img {
    height: var(--logo);
    width: auto;
}

.mainpage .descr p {
    margin: 0.5lh 0 0 0;
}

.mainpage .descr p:first-child {
    margin-top: 0;
}

.mainpage .descr .title {
    letter-spacing: normal;
    font-weight: 700;
    font-size: clamp(16px, 1.875rem, 30px);
    margin: 0 0 clamp(16px, 1.5rem, 24px) 0;
}

.mainpage .descr .text {
    position: relative;
}

.mainpage .descr .text:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(-28.75%, -9.94%, 0);
    background: url("../img/text-lines.svg") no-repeat 50% 50%/contain;
    width: 5em;
    height: 11.3125em;
}

.mainpage .descr .text>* {
    position: relative;
}

.mainpage .descr .text>*:first-child {
    margin-top: 0 !important;
}

.mainpage .descr .text>*:last-child {
    margin-bottom: 0 !important;
}

.mainpage .descr:after {
    content: '';
}

.mainpage .descr .title,
.mainpage .descr:after {
    flex: 1;
}

@media only screen and (max-width: 900px) {
    .mainpage .descr {
        max-width: none;
        font-size: clamp(12px, 1rem, 16px);
    }

    .mainpage .descr .logo {
        margin-bottom: var(--vert);
    }

    .mainpage .descr .title {
        font-size: 30px;
        margin-bottom: 0;
        min-height: calc(var(--cp-mobile-portal-size) + 160px);
        flex: 0 0 auto;
    }

    .mainpage .descr .text {
        background: #272767;
        border-radius: 1.5rem;
        overflow: hidden;
        padding: 2rem;
        text-align: center;
    }

    .mainpage .descr .text>* {
        text-align: left;
    }

    .mainpage .descr:after {
        display: none;
    }
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: clamp(24px, 3rem, 48px);
    gap: clamp(12px, 1.5rem, 24px);
}

.hero-cta-row>* {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(12px, 1rem, 16px);
    height: clamp(32px, 3.75rem, 60px);
    padding: 0 clamp(16px, 1.5rem, 24px);
    gap: 1em;
    border-radius: 100px;
    transition-property: color, box-shadow, background;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    backface-visibility: hidden;
}

.hero-cta-row .link-more {
    color: var(--grey800);
    background: var(--white);
    box-shadow: -8.9px -8.9px 30px rgba(255, 255, 255, 0.15), -8.90123px -8.90123px 26.7037px rgba(255, 255, 255, 0.5), 13.3518px 13.3518px 26.7037px rgba(55, 55, 125, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
}

.hero-cta-secondary {
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@media (pointer:fine) {
    .hero-cta-row .link-more:hover {
        color: var(--blue);
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 26.7037px rgba(255, 255, 255, 0.7), 0 0 26.7037px rgba(55, 55, 125, 0.7), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    }

    .hero-cta-secondary:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
}

@keyframes iconSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    12.5% {
        transform: rotate(90deg) scale(1.10);
    }

    25% {
        transform: rotate(90deg) scale(1);
    }

    37.5% {
        transform: rotate(180deg) scale(1.10);
    }

    50% {
        transform: rotate(180deg) scale(1);
    }

    62.5% {
        transform: rotate(270deg) scale(1.10);
    }

    75% {
        transform: rotate(270deg) scale(1);
    }

    87.5% {
        transform: rotate(360deg) scale(1.10);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.hero-cta-row .link-more:before {
    content: '';
    flex: 0 0 auto;
    background: url("../img/icons/color-points.svg") no-repeat 50% 50%/contain;
    width: 1.5em;
    height: 1.5em;
    animation: iconSpin 8s linear infinite;
}

@media only screen and (max-width: 900px) {
    .hero-cta-row {
        width: 100%;
        justify-content: center;
        margin-top: 24px;
    }

    .hero-cta-row .link-more {
        font-size: 14px;
    }
}

@media only screen and (min-width: 901px) {
    .hero-cta-row {
        width: calc((100vw - var(--side)*2)*0.4);
        margin-right: -200px;
    }
}

/*Hero descr end*/
@media only screen and (min-width: 901px) {

    .mainpage .experience-capabilities,
    .mainpage .featured-cases {
        --tech-gap: clamp(10px, 1vw, 16px);
        --tech-col-width: clamp(64px, 6.5rem, 104px);
        --tech-col-gap: 4px;
    }
}

@media only screen and (max-width: 900px) {
    .experience-capabilities {
        display: none;
    }
}

@media only screen and (min-width: 901px) {

    .experience-capabilities .title,
    .experience-capabilities .section-intro {
        display: none;
    }
}

.experience-capabilities ul,
.experience-capabilities li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.experience-capabilities {
    width: fit-content;
    max-width: 100%;
    margin-right: 0;
    --mainpage-icon: clamp(60px, 4.65vw, 84px);
    font-size: clamp(11px, 0.86rem, 14px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.015em;
}

.experience-capabilities>ul {
    display: grid;
    grid-template-columns: repeat(5, var(--tech-col-width));
    justify-content: end;
    column-gap: var(--tech-col-gap);
    row-gap: 16px;
    justify-items: center;
    align-items: start;
}

.experience-capabilities>ul>li {
    grid-column: auto;
    width: var(--tech-col-width);
    max-width: var(--tech-col-width);
    min-width: 0;
    padding: calc(var(--mainpage-icon) + 10px) 0 0;
    text-align: center;
    position: relative;
}

.experience-capabilities li:nth-child(6) {
    grid-column: 2;
}

.experience-capabilities li:nth-child(7) {
    grid-column: 3;
}

.experience-capabilities li:nth-child(8) {
    grid-column: 4;
}

.experience-capabilities li:nth-child(9) {
    grid-column: 5;
}

.experience-capabilities .link {
    display: inline;
    text-decoration: none;
    color: #00005A;
}

.experience-capabilities .link .icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    width: var(--mainpage-icon);
    height: var(--mainpage-icon);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #303475 url("../img/use-cases/tech-orb.svg") no-repeat 50% 50% / cover;
    box-shadow: none;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), filter 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-capabilities .link .icon>* {
    width: 47%;
    height: 47%;
    position: relative;
    filter: none;
    transform-origin: center center;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), filter 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}

.experience-capabilities .link:hover .icon {
    transform: translate3d(-50%, -2px, 0) scale(1.035);
}

.experience-capabilities .link:hover .icon>* {
    transform: translateY(-1px) scale(1.03);
}

.experience-capabilities .link:focus-visible .icon {
    transform: translate3d(-50%, -2px, 0) scale(1.03);
}

.experience-capabilities .link:focus-visible .icon>* {
    transform: translateY(-1px) scale(1.02);
}

.experience-capabilities .link:active .icon {
    transform: translate3d(-50%, 0, 0) scale(0.975);
}

.experience-capabilities .link:active .icon>* {
    transform: scale(0.98);
}

.featured-cases {
    --gap: clamp(16px, 1.875rem, 30px);
    --mainpage-icon1: clamp(60px, 4.65vw, 84px);
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

.featured-cases .head {
    text-align: center;
    margin-bottom: 24px;
}

.featured-cases .title {
    font-weight: 500;
    color: var(--grey800);
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.featured-cases .prev,
.featured-cases .next {
    display: none;
}

.featured-cases * {
    pointer-events: auto;
}

.featured-cases ul,
.featured-cases li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.featured-cases .cases-marquee {
    display: flex;
    flex-direction: column;
}

.featured-cases .cases-list {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.featured-cases .cases-item {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: none !important;
}

.featured-cases .link {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    backface-visibility: hidden;
    overflow: hidden;
}

.featured-cases .link::before,
.featured-cases .link::after,
.featured-cases .link img,
.featured-cases .link span {
    pointer-events: none;
}

.featured-cases .link {
    position: relative;
    height: var(--mainpage-icon);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    backface-visibility: hidden;
    border-radius: 1.5rem;
    padding: 0 var(--mainpage-icon) 0 1.5em;
    color: var(--white);
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: clamp(12px, 1.5rem, 24px);
    line-height: 1;
    letter-spacing: -0.015em;
    transition: opacity 0.4s ease, transform 0.36s cubic-bezier(.22, .61, .36, 1), box-shadow 0.36s cubic-bezier(.22, .61, .36, 1), filter 0.36s ease;
    opacity: 0.88;
    background: var(--black);
    border: 0;
    box-shadow: 0 7px 18px rgba(14, 18, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    will-change: transform, box-shadow, opacity;
    isolation: isolate;
    transform: translateZ(0);
}

.featured-cases .link::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 2;
    background: radial-gradient(120% 120% at 14% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.03) 100%);
    opacity: 0.9;
}

/* Holographic foil layer — ::after sits above the brand photo,   blends with "color-dodge" to let the photo show through while   adding a vivid iridescent colour shift.   "color-dodge" brightens the underlying photo with the gradient,   producing that saturated foil-on-print look. */
.featured-cases .link::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    /* Wide diagonal rainbow — 300% width so the drift animation	   has room to pan without hitting hard edges */
    background: linear-gradient(115deg, #ff000000 0%, #ff6ec7 8%, #ffe066 16%, #6effb4 24%, #66cfff 32%, #b06eff 40%, #ff6e6e 48%, #ffe066 56%, #6effb4 64%, #66cfff 72%, #b06eff 80%, #ff6ec7 88%, #ff000000 100%);
    background-size: 300% 300%;
    /* Blend mode: color-dodge makes dark areas of the photo stay dark	   while midtones and lights pick up the iridescent colour.	   Exactly how holographic foil looks on a magazine page. */
    mix-blend-mode: color-dodge;
    opacity: 0.28;
    animation: satinDrift 8s ease-in-out infinite, satinHue 6s linear infinite;
}

/* ── Per-tile sheen overrides ───────────────────────────────────────   Each tile overrides the base ::after gradient and/or animation to   match its brand palette. Rules for every tile:   - satinHue is disabled whenever the gradient has specific brand     colours — a full 360° hue rotation would cycle back through     unwanted tones (reds on blue tiles, greens on gold tiles, etc.)   - mix-blend-mode is chosen per tile:       color-dodge — punchy on dark/desaturated backgrounds       screen      — gentle; preserves vivid or light backgrounds   - opacity is the primary intensity knob; lower = more subtle──────────────────────────────────────────────────────────────────── */
/* Spin a Ball — dark navy court photo.   Uses the default rainbow gradient; opacity dialled back so the   vivid full-spectrum foil doesn't overpower the other tiles. */
.featured-cases .cases-item:nth-child(1) .link::after {
    animation-delay: 0s, 0s;
    opacity: 0.18;
}

/* Watcher's Eye — deep olive green background with a prominent gold frame.   Custom gradient locked to amber/gold tones only; satinHue disabled   so the drift never pulls the shimmer out of the golden colour range.   color-dodge on a dark olive base produces a warm metallic glint. */
.featured-cases .cases-item:nth-child(2) .link::after {
    background-image: linear-gradient(115deg, transparent 0%, rgba(255, 210, 60, 0.80) 6%, rgba(255, 255, 200, 0.30) 11%, rgba(220, 160, 20, 0.60) 18%, transparent 26%, rgba(255, 230, 80, 0.90) 31%, rgba(255, 255, 220, 0.20) 35%, transparent 44%, rgba(200, 140, 10, 0.70) 49%, rgba(255, 240, 120, 0.35) 53%, transparent 60%, rgba(255, 215, 50, 0.75) 67%, rgba(255, 255, 200, 0.15) 70%, rgba(210, 155, 20, 0.55) 78%, transparent 85%, rgba(255, 225, 70, 0.70) 92%, transparent 100%);
    background-size: 300% 300%;
    mix-blend-mode: color-dodge;
    animation: satinDrift 8s ease-in-out infinite;
    animation-delay: -1.1s;
    opacity: 0.18;
}

/* Virtual Eyelash Illusion — Benefit Cosmetics hot-pink tile.   Coloured gradients fight the brand pink, so this uses a pure   white shimmer instead — irregular stripe widths break the linear   wave pattern and give it the same random feel as the other tiles.   screen blend adds a pearlescent gloss without touching the pink. */
.featured-cases .cases-item:nth-child(3) .link::after {
    background-image: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.70) 6%, rgba(255, 255, 255, 0.10) 11%, rgba(255, 255, 255, 0.45) 18%, transparent 26%, rgba(255, 255, 255, 0.80) 31%, rgba(255, 255, 255, 0.15) 35%, transparent 44%, rgba(255, 255, 255, 0.55) 49%, rgba(255, 255, 255, 0.25) 53%, transparent 60%, rgba(255, 255, 255, 0.65) 67%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0.40) 78%, transparent 85%, rgba(255, 255, 255, 0.60) 92%, transparent 100%);
    background-size: 300% 300%;
    mix-blend-mode: screen;
    animation: satinDrift 8s ease-in-out infinite, satinHue 6s linear infinite;
    animation-delay: -2.2s, -1.6s;
    opacity: 0.28;
}

/* NFL — Scan a Helmet — deep navy with network-line illustration.   Silver/ice-blue gradient stays in the cool range; satinHue disabled   because a full hue rotation would pull the blues through red,   which clashes with the Bills team colours in the tile photo. */
.featured-cases .cases-item:nth-child(4) .link::after {
    background-image: linear-gradient(115deg, transparent 0%, #b8d8f8 10%, #e8f4ff 22%, #90b8e8 34%, #dceeff 46%, #a8ccf0 58%, #f0f8ff 70%, #c0d8f8 82%, transparent 100%);
    background-size: 300% 300%;
    animation: satinDrift 8s ease-in-out infinite;
    animation-delay: -3.3s;
    opacity: 0.28;
}

/* Sour Patch Catch — bright illustrated sky and grass.   Same white-only shimmer as Virtual Eyelash; coloured gradients   muddied the sky and grass tones. Irregular stripe widths prevent   the drift from reading as a plain linear wave.   screen blend keeps the illustration colours fully intact. */
.featured-cases .cases-item:nth-child(5) .link::after {
    background-image: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.70) 6%, rgba(255, 255, 255, 0.10) 11%, rgba(255, 255, 255, 0.45) 18%, transparent 26%, rgba(255, 255, 255, 0.80) 31%, rgba(255, 255, 255, 0.15) 35%, transparent 44%, rgba(255, 255, 255, 0.55) 49%, rgba(255, 255, 255, 0.25) 53%, transparent 60%, rgba(255, 255, 255, 0.65) 67%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0.40) 78%, transparent 85%, rgba(255, 255, 255, 0.60) 92%, transparent 100%);
    background-size: 300% 300%;
    mix-blend-mode: screen;
    animation: satinDrift 8s ease-in-out infinite, satinHue 6s linear infinite;
    animation-delay: -4.4s, -3.2s;
    opacity: 0.28;
}

/* Ride with Blaney — Advance Auto Parts NASCAR livery: black, gold, red.   Gradient combines warm gold, amber and red tones matching the car   livery; no greens or cyans. color-dodge on the dark photo base   produces the hot-metal shimmer of a racing livery under floodlights. */
.featured-cases .cases-item:nth-child(6) .link::after {
    background-image: linear-gradient(115deg, transparent 0%, rgba(255, 220, 80, 0.80) 6%, rgba(255, 60, 40, 0.50) 13%, rgba(255, 255, 255, 0.15) 18%, rgba(255, 180, 40, 0.55) 24%, transparent 30%, rgba(255, 40, 20, 0.60) 36%, rgba(255, 255, 255, 0.60) 42%, rgba(255, 200, 60, 0.20) 48%, transparent 54%, rgba(255, 220, 80, 0.65) 60%, rgba(255, 60, 30, 0.45) 66%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 200, 50, 0.50) 78%, transparent 85%, rgba(255, 50, 30, 0.40) 92%, transparent 100%);
    background-size: 300% 300%;
    mix-blend-mode: color-dodge;
    animation: satinDrift 8s ease-in-out infinite, satinHue 6s linear infinite;
    animation-delay: -5.5s, -4.0s;
    opacity: 0.30;
}

/* Interactive Spacecraft Showcase — deep space black/navy.   Same white shimmer as Virtual Eyelash and Sour Patch; a coloured   gradient would compete with the existing deep blue tones in the   photo. screen blend adds a clean starlight gloss over the darkness. */
.featured-cases .cases-item:nth-child(7) .link::after {
    background-image: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.70) 6%, rgba(255, 255, 255, 0.10) 11%, rgba(255, 255, 255, 0.45) 18%, transparent 26%, rgba(255, 255, 255, 0.80) 31%, rgba(255, 255, 255, 0.15) 35%, transparent 44%, rgba(255, 255, 255, 0.55) 49%, rgba(255, 255, 255, 0.25) 53%, transparent 60%, rgba(255, 255, 255, 0.65) 67%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0.40) 78%, transparent 85%, rgba(255, 255, 255, 0.60) 92%, transparent 100%);
    background-size: 300% 300%;
    mix-blend-mode: screen;
    animation: satinDrift 8s ease-in-out infinite, satinHue 6s linear infinite;
    animation-delay: -6.6s, -4.8s;
    opacity: 0.28;
}

.featured-cases .link.black {
    color: var(--black);
}

.featured-cases .link img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 1;
}

.featured-cases .link img:nth-child(1) {
    width: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.22, .61, .36, 1), filter 0.4s ease;
    transform: scale(1.001);
}

@media (pointer:fine) {
    .featured-cases .link:hover {
        opacity: 0.96;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(14, 18, 56, 0.12), 0 0 14px rgba(124, 160, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    /* On hover: foil becomes slightly more vivid */
    .featured-cases .link:hover::after {
        opacity: 0.42;
        animation-duration: 5s, 3.5s;
    }

    .featured-cases .link:hover img:nth-child(1) {
        transform: scale(1.006);
        filter: saturate(1.02) contrast(1.01);
    }

    .featured-cases .link:active {
        transform: translateY(-1px);
    }

    .featured-cases .link:active img:nth-child(1) {
        opacity: 0.52;
        transform: scale(1.01);
    }
}

.featured-cases .link img:nth-child(2) {
    height: 100%;
    width: auto;
    z-index: 2;
    object-fit: contain;
}

/* Text above the foil layer */
.featured-cases .link span {
    position: relative;
    z-index: 4;
    text-shadow: 0 1px 2px rgba(12, 16, 44, 0.18);
}

@media only screen and (max-width: 900px) {
    .mainpage .featured-cases .cases-track {
        overflow: visible !important;
        margin: 0 !important;
        touch-action: pan-y !important;
        height: auto !important;
        scroll-snap-type: none !important;
    }

    .featured-cases .cases-list {
        gap: 32px;
    }

    .featured-cases .cases-list[aria-hidden="true"] {
        display: none !important;
    }

    .featured-cases .link {
        height: 80px;
        padding-left: 24px;
        font-size: 24px;
    }
}

@media only screen and (min-width: 901px) {
    .featured-cases {
        --gap: clamp(16px, 1.875rem, 24px);
        width: calc(var(--tech-col-width) * 4 + var(--tech-col-gap) * 3);
        margin-left: auto;
        padding-left: calc((var(--tech-col-width) - var(--mainpage-icon1)) / 2);
        padding-right: calc((var(--tech-col-width) - var(--mainpage-icon1)) / 2);
    }

    .featured-cases .head {
        text-align: left;
        margin-bottom: 12px;
    }

    .featured-cases .title {
        font-size: clamp(18px, 1.6vw, 24px);
        font-weight: bold;
    }

    .featured-cases .cases-marquee {
        display: flex;
        flex-direction: column;
        will-change: transform;
        transform: translate3d(0, 0, 0);
        position: relative;
        margin: 0;
    }

    .featured-cases .cases-track.is-desktop-marquee {
        overflow: hidden !important;
        scroll-snap-type: none !important;
    }

    .featured-cases .cases-track {
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        height: calc((var(--gap) + var(--mainpage-icon)) * 4);
        margin: calc(var(--gap) / -2) 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
    }

    .featured-cases .cases-track::-webkit-scrollbar {
        display: none;
    }

    .mainpage .featured-cases .cases-track:before,
    .mainpage .featured-cases .cases-track:after {
        display: none;
    }

    .featured-cases .cases-item {
        height: calc(var(--gap) + var(--mainpage-icon));
        padding-top: var(--gap);
    }
}

/*Modal start*/
.modal-wrap {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: none;
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    /* Keep the contact modal above the case overlay without relying on ui-elements overrides. */
    z-index: 10050;
}

.modal-wrap:not(:open) {
    display: none;
}

html:has(.modal-wrap.open) {
    overflow: hidden;
}

.modal-fader {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--grey800);
    transition: opacity 0.4s ease;
    opacity: 0;
}

.modal {
    flex: 0 0 auto;
    width: 100%;
    margin: auto;
    position: relative;
    z-index: 2;
    transition-property: transform, opacity;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    transform: translate3d(0, 10px, 0);
    opacity: 0;
}

.modal-wrap.open .modal-fader {
    opacity: 0.5;
}

.modal-wrap.close .modal-fader {
    opacity: 0;
}

.modal-wrap.open .modal {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.modal-wrap.close .modal {
    transform: translate3d(0, -10px, 0);
    opacity: 0;
}

.modal-close {
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: clamp(12px, 1rem, 16px);
    right: clamp(12px, 1rem, 16px);
    width: 24px;
    height: 24px;
    z-index: 5;
    transition: opacity 0.4s ease;
    appearance: none;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 50%;
    opacity: 0.92;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

@media (pointer:fine) {
    .modal-close:hover {
        transform: scale(1.04);
    }
}

.modal-close::before,
.modal-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.5px;
    border-radius: 999px;
    background: #111827;
}

.modal-close::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.modal-close::after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.modal-close:focus-visible,
.case-overlay__close:focus-visible {
    outline: 2px solid rgba(85, 240, 255, 0.9) !important;
    outline-offset: 2px !important;
}

.modal-terms {
    box-shadow: 0px 373px 149px rgba(0, 0, 90, 0.02), 0px 210px 126px rgba(0, 0, 90, 0.08), 0px 93px 93px rgba(0, 0, 90, 0.13), 0px 23px 51px rgba(0, 0, 90, 0.15);
    border-radius: 1.5rem;
    text-align: left;
    color: var(--grey800);
    font-weight: normal;
    font-size: 14px;
    line-height: 1.625;
    background: var(--white);
    padding: 48px 24px;
    max-width: 35.625em;
}

.modal-terms p {
    margin: 10px 0 0 0;
}

.modal-case-descr {
    box-shadow: 0px 373px 149px rgba(0, 0, 90, 0.02), 0px 210px 126px rgba(0, 0, 90, 0.08), 0px 93px 93px rgba(0, 0, 90, 0.13), 0px 23px 51px rgba(0, 0, 90, 0.15);
    border-radius: 1.5rem;
    text-align: center;
    color: var(--grey800);
    font-weight: normal;
    font-size: clamp(12px, 1rem, 16px);
    line-height: 1.625;
    background: var(--white) url("../img/logo-dark.svg") no-repeat 16px 16px/auto var(--logo-mini);
    padding: 4rem 4rem 3rem 4rem;
    max-width: 35.625em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.modal-case-descr>img {
    display: block;
    width: clamp(24px, 2.5rem, 40px);
    height: clamp(24px, 2.5rem, 40px);
    object-fit: contain;
    object-position: center;
    margin: 0 auto 8px auto;
}

.modal-case-descr .title {
    font-weight: 500;
    font-size: clamp(16px, 1.5rem, 24px);
    letter-spacing: -0.015em;
    margin: 0 0 clamp(24px, 2.5rem, 40px) 0;
    width: 100%;
    max-width: 28rem;
    min-height: 3.1em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    text-wrap: balance;
}

.modal-case-descr p {
    margin: 10px 0 0 0;
}

.modal-case-descr .btn {
    margin-top: clamp(24px, 2.5rem, 40px);
    align-self: center;
}

.modal-case-descr .tech-popup-lead {
    margin: 0 auto;
    width: 100%;
    max-width: 28rem;
    min-height: 5.1em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    text-wrap: balance;
}

.modal-case-descr .tech-popup-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-self: center;
    width: 100%;
    max-width: 28rem;
    min-height: 2.875rem;
    gap: 10px;
    margin: 18px 0 0;
}

.modal-case-descr .tech-popup-chips span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(23, 49, 59, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 247, 251, 0.94) 100%);
    box-shadow: 0 10px 24px rgba(14, 24, 41, 0.08);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.modal-case-descr .tech-popup-card {
    margin: 18px auto 0;
    width: 100%;
    max-width: 24rem;
    min-height: 8.9rem;
    align-self: center;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(23, 49, 59, 0.1);
    background: linear-gradient(180deg, rgba(248, 250, 253, 0.96) 0%, rgba(240, 244, 249, 0.92) 100%);
    box-shadow: 0 18px 36px rgba(14, 24, 41, 0.10);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.modal-case-descr .tech-popup-card h4 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(23, 49, 59, 0.66);
}

.modal-case-descr .tech-popup-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.modal-case-descr .tech-popup-list li {
    position: relative;
    padding-left: 16px;
    margin: 0;
    font-weight: 500;
    line-height: 1.45;
}

.modal-case-descr .tech-popup-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5c79ff 0%, #97a8ff 100%);
}

@media only screen and (max-width: 900px) {
    .modal-case-descr {
        width: 100%;
        max-width: 100%;
        padding: 60px 18px 24px;
        border-radius: 24px;
        box-sizing: border-box;
        overflow-x: hidden;
        padding-left: clamp(16px, 1.5rem, 24px);
        padding-right: clamp(16px, 1.5rem, 24px);
    }

    .modal-case-descr .title,
    .modal-case-descr .tech-popup-lead,
    .modal-case-descr .tech-popup-chips,
    .modal-case-descr .tech-popup-card {
        max-width: 100%;
        min-width: 0;
    }

    .modal-case-descr .title {
        min-height: 0;
        margin-bottom: 18px;
        overflow-wrap: anywhere;
    }

    .modal-case-descr .tech-popup-lead {
        min-height: 0;
    }

    .modal-case-descr .tech-popup-chips {
        gap: 8px;
    }

    .modal-case-descr .tech-popup-chips span {
        white-space: normal;
        text-align: center;
    }
}

/*Modal end*/
/*Contact form start*/
.modal-envelope {
    flex: 0 0 auto;
    width: 100%;
    margin: auto;
    max-width: 65em;
    min-height: min(50.48vw, 32.8125em);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    backface-visibility: hidden;
    transition: opacity 0.4s ease;
    opacity: 0;
    z-index: 2;
    font-size: 16px;
}

@media only screen and (max-width: 1400px) {
    .modal-envelope {
        font-size: 14px;
    }
}

@media only screen and (max-width: 1100px) {
    .modal-envelope {
        font-size: 12px;
    }
}

.modal-envelope .envelope {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    aspect-ratio: 1040/525;
    background: #E8EBEF;
    box-shadow: 0px 458px 183px rgba(0, 0, 0, 0.01), 0px 258px 155px rgba(0, 0, 0, 0.05), 0px 114px 114px rgba(0, 0, 0, 0.09), 0px 29px 63px rgba(0, 0, 0, 0.1);
}

.modal-envelope .envelope .wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    perspective: 2000px;
    transform-style: preserve-3d;
}

.modal-envelope .envelope-forward {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../img/envelope/forward.webp") no-repeat 50% 100%/contain;
    aspect-ratio: 2082/1042;
    z-index: 5;
}

.modal-envelope .envelope-top {
    position: absolute;
    top: 1px;
    left: 0;
    aspect-ratio: 2082/652;
    width: 100%;
    transform-origin: 50% 0%;
    z-index: 3;
    transform: rotateX(180deg);
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}

.modal-envelope .envelope-top:before {
    content: '';
}

.modal-envelope .envelope-top:before,
.modal-envelope .envelope-top .back {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: contain;
    backface-visibility: hidden;
}

.modal-envelope .envelope-top:before {
    width: 100%;
    background-image: url("../img/envelope/top-inside.png");
    aspect-ratio: 2082/652;
    transform: translate3d(-50%, 0, 0) rotateY(-180deg);
}

.modal-envelope .envelope-top .back {
    background-image: url("../img/logo-dark.svg"), url("../img/envelope/top-outside.png");
    aspect-ratio: 2098/668;
    width: 100.768491%;
    background-position: 3% 5%, 50% 0;
    background-size: auto var(--logo-mini), contain;
}

.modal-envelope .envelope-top .modal-close {
    top: 5%;
    right: 2%;
}

.modal-envelope .envelope-top .text {
    text-align: center;
    font-weight: 500;
    font-size: 1.5em;
    color: var(--grey800);
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    padding: 0 10px;
    transform: translate3d(-50%, -50%, 0);
}

.modal-envelope .envelope-top .btn {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
    pointer-events: none;
    font-size: 1em;
}

.modal-envelope .letter {
    flex: 0 0 auto;
    background: var(--white);
    position: relative;
    z-index: 4;
    width: 77.4%;
    margin: 0 auto;
    box-shadow: 0 50px 50px #23334726;
    margin-bottom: 6em;
    height: 0;
    overflow: hidden;
    --height: 0px;
    transition: height 1s ease;
    border-radius: 1.5rem;
}

.modal-envelope .inner {
    padding: 4em 4em 4em 4em;
    background: url("../img/logo-dark.svg") no-repeat 16px 16px/auto 32px;
    position: relative;
}

.modal-envelope .inner:after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 677/351;
}

.modal-wrap.open:not(.close) .modal-envelope {
    opacity: 1;
}

.modal-wrap.open .modal-envelope:not(.sent) .letter {
    height: var(--height);
}

.modal-envelope.sent .letter {
    pointer-events: none;
}

.modal-envelope.closed .envelope-top {
    transform: rotateX(0deg);
}

.modal-envelope.closed .envelope-top .btn {
    opacity: 1;
    transition-delay: 0.4s;
    pointer-events: all;
}

.modal-envelope.closed .envelope .wrap {
    z-index: 6;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(100% - 2.5em) / 2), 1fr));
    gap: 2.5em;
}

.form-el.wid100 {
    grid-column: 1/-1;
}

.form-submit {
    margin: 2.5em 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5em;
}

.form-submit .btn {
    font-size: 1em;
}

.contact-us {
    text-align: center;
    font-weight: 500;
    color: var(--grey800);
}

.contact-us .title {
    font: inherit;
    font-weight: 500;
    font-size: 1.5em;
    margin: 0;
}

.contact-us .form-grid,
.contact-us .form-submit {
    max-width: 32.25em;
    margin-left: auto;
    margin-right: auto;
}

.contact-us .form-grid {
    margin: 2.5em auto;

}

.contact-us .form-grid input,
.contact-us .form-grid textarea {
    font-size: 1em;
}

.contact-us .wrap-sent {
    text-align: center;
    display: none;
}

.contact-us .wrap-sent .text {
    transition: opacity 0.4s ease;
    opacity: 0;
    transition-delay: 0.8s;
    font-size: 1.5em;
}

.modal-envelope.closed .contact-us .wrap-sent .text {
    opacity: 1;
}

.contact-us .wrap-sent .env {
    position: relative;
    margin: 2.5em auto;
    max-width: 15em;
    aspect-ratio: 1040/525;
    background-color: #E8EBEF;
    background-image: url("../img/envelope/forward.webp");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    box-shadow: 0px 458px 183px rgba(0, 0, 0, 0.01), 0px 258px 155px rgba(0, 0, 0, 0.05), 0px 114px 114px rgba(0, 0, 0, 0.09), 0px 29px 63px rgba(0, 0, 0, 0.1);
}

.modal-envelope .env .envelope-top {
    top: 0;
    transition-delay: 0.4s;
    transition-duration: 0.4s;
}

.modal-envelope .env .envelope-top .back {
    background-image: url("../img/icons/arrow-right-violet2.svg"), url("../img/envelope/top-outside.png");
    background-position: 50% 50%, 50% 0;
    background-size: 1.5em, contain;
}

.contact-us .hr {
    height: 1px;
    margin: 2.5em 0;
    background: var(--grey800);
}

.contact-us .direct-contacts,
.contact-us .direct-contacts li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-us .direct-contacts {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em 0;
    font-weight: normal;
    width: 100%;
    position: relative;
    margin-top: 2em;
}

.contact-us .direct-contacts li {
    flex: 1;
    position: relative;
    text-align: center;
    padding-top: 3em;
}

.contact-us .direct-contacts img {
    width: 2.5em;
    height: 2.5em;
    object-fit: contain;
    object-position: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (max-width: 1340px) {
    .contact-us .direct-contacts {
        flex-direction: column;
        align-items: flex-start;
        width: 20em;
        margin-left: auto;
        margin-right: auto;
        left: 2.5em;
        gap: 2em;
        padding: 0.5em 0;
        margin-top: 2em;
    }

    .contact-us .direct-contacts li {
        word-break: keep-all;
        white-space: nowrap;
        flex: 0 0 auto;
        padding-top: 0;
        padding-left: 3.5em;
        text-align: left;
    }

    .contact-us .direct-contacts br {
        display: none;
    }

    .contact-us .direct-contacts img {
        position: absolute;
        top: 50%;
        left: 0;
        transform: none;
        margin: -1.25em 0;
    }
}

.contact-us .direct-contacts a {
    text-decoration: none;
    color: inherit;
    text-wrap: inherit;
    transition: color 0.4s ease;
}

@media (pointer:fine) {
    .contact-us .direct-contacts a:hover {
        color: var(--blue);
    }
}

@keyframes Orbita2 {
    from {
        transform: rotate(180deg) translateX(50vmin) rotate(180deg);
    }

    to {
        transform: rotate(540deg) translateX(50vmin) rotate(540deg);
    }
}

@media only screen and (max-width: 900px) {
    .modal-envelope {
        width: 100%;
        height: 100%;
        overflow: hidden;
        max-width: none;
        margin: 0;
        display: block;
        font-size: 16px;
    }

    .modal-envelope .envelope,
    .modal-envelope .envelope-forward {
        display: none;
    }

    .modal-envelope .letter {
        width: 100%;
        height: 100% !important;
        overflow: hidden;
        overflow-y: auto;
        background: var(--grey100) url("../img/noise.png") 50% 50%;
        box-shadow: none;
        margin: 0;
        transition: none;
        border-radius: 0;
    }

    .modal-envelope .inner {
        padding: calc(var(--vert) + var(--logo) + 3rem) var(--side) clamp(16px, 3rem, 48px) var(--side);
        background-position: var(--vert) var(--side);
        background-size: auto var(--logo);
    }

    .modal-envelope .inner:after {
        display: none;
    }

    .modal-envelope.sent .letter {
        pointer-events: auto;
    }

    .modal-envelope.sent .contact-us .wrap-form {
        display: none;
    }

    .modal-envelope.sent .contact-us .wrap-sent {
        display: block;
    }
}

/*Contact form end*/
/*Explore start*/
.explore {
    padding: calc(var(--logo) + clamp(8px, 0.75rem, 12px)) var(--side) clamp(24px, 3rem, 48px) var(--side);
    font-weight: 500;
    font-size: clamp(12px, 1.5rem, 24px);
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: var(--black);
}

.explore p {
    margin: 0 0 1em 0;
}

.explore .hr {
    height: 1px;
    background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, #0000FF 50%, rgba(115, 115, 115, 0) 100%);
    margin-top: 32px;
    margin-bottom: 32px;
}

@media only screen and (max-width: 900px) {
    .explore .hr {
        margin-top: 48px;
        margin-bottom: 48px;
    }
}

.explore .circle-list,
.explore .circle-list>*,
.explore .circle-list dt,
.explore .circle-list dd {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.explore .circle-list {
    padding: 16px 0 16px 40px;
    margin-top: 24px;
    margin-bottom: 24px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.explore .circle-list>* {
    position: relative;
}

.explore .circle-list>*:before {
    display: none;
}

.explore .circle-list>*:after {
    content: '';
    position: absolute;
    top: 50%;
    left: -40px;
    width: 16px;
    height: 16px;
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
    transform: translateY(-50%);
}

.explore .circle-list>*:nth-child(4n-3):after {
    border-color: var(--blue);
}

.explore .circle-list>*:nth-child(4n-2):after {
    border-color: var(--violet);
}

.explore .circle-list>*:nth-child(4n-1):after {
    border-color: var(--violet2);
}

.explore .circle-list>*:nth-child(4n):after {
    border-color: var(--green);
}

.explore .circle-list .small {
    font-weight: normal;
    font-size: clamp(12px, 1rem, 16px);
    letter-spacing: normal;
}

.explore .title {
    text-align: center;
    font-weight: bold;
    font-size: clamp(16px, 2.75rem, 44px);
    margin: 8px 0 32px 0;
    color: var(--grey800);
}

.explore .explore-tagline {
    font-style: italic;
    font-weight: 500;
    color: inherit;
    margin-bottom: 0.5em;
}

.explore .explore-lead {
    margin-top: 1.5em;
}

.explore .explore-proof-3 {
    margin-top: 1.5em;
}

.explore .max {
    margin: 0 auto;
    max-width: 42.666em;
}

.explore .big-icon {
    font-size: clamp(64px, 7.5rem, 120px);
    line-height: 1;
    width: 1em;
    height: 1em;
    position: relative;
    margin: clamp(32px, 3rem, 48px) auto 8px auto;
}

.explore .big-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

.explore .animated-star,
.explore .animated-star>* {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.explore .animated-star>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.explore .animated-star>* {
    animation: animated-star 10s ease infinite;
    animation-delay: 20s;
}

.explore .animated-star>*:nth-child(1) {
    animation-delay: 0s;
}

.explore .animated-star>*:nth-child(2) {
    animation-delay: 5s;
}

.explore .animated-star>*:nth-child(3) {
    animation-delay: 2.5s;
}

.explore .animated-star>*:nth-child(4) {
    animation-delay: 7.5s;
}

.explore .animated-star>*:nth-child(5) {
    animation-delay: 4s;
}

.explore .animated-star>*:nth-child(6) {
    animation-delay: 9s;
}

.explore .animated-star>*:nth-child(7) {
    animation-delay: 6.5s;
}

.explore .animated-star>*:nth-child(8) {
    animation-delay: 1.5s;
}

.explore .animated-star {
    background-image: url("../img/explore/star/1.svg");
}

.explore .animated-star>*:nth-child(-n + 4) {
    background-image: url("../img/explore/star/ray-violet.svg");
}

.explore .animated-star>*:nth-child(n + 5) {
    background-image: url("../img/explore/star/ray-violet2.svg");
}

.explore .animated-star>*:nth-child(4n - 3) {
    transform: rotate(0deg);
}

.explore .animated-star>*:nth-child(4n - 2) {
    transform: rotate(90deg);
}

.explore .animated-star>*:nth-child(4n - 1) {
    transform: rotate(180deg);
}

.explore .animated-star>*:nth-child(4n) {
    transform: rotate(270deg);
}

.explore .animated-circle {
    padding: 0.066666em;
    border-radius: 50%;
    backface-visibility: hidden;
    transform: rotate(-90deg);
    transition: transform 0.4s ease;
}

.explore .animated-circle>* {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    backface-visibility: hidden;
    position: relative;
}

.explore .animated-circle>*>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.explore .animated-circle>*>*:nth-child(1) {
    transform: rotate(0deg);
}

.explore .animated-circle>*>*:nth-child(2) {
    transform: rotate(90deg);
}

.explore .animated-circle>*>*:nth-child(3) {
    transform: rotate(180deg);
}

.explore .animated-circle>*>*:nth-child(4) {
    transform: rotate(270deg);
}

.explore .animated-circle>*>*>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--lightblue);
    border-style: solid;
    border-width: 0 0.02em 0.02em 0;
    margin: calc(-50% + 0.01em);
    border-color: #ECECF5;
    transform-origin: 90% 90%;
    transform: rotate(0deg);
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 0.4s ease;
    background-color: var(--blue);
    animation-delay: -1s;
    animation: animated-circle1 5s ease infinite;
}

.explore .animated-circle>*>*:nth-child(odd)>* {
    background-color: var(--lightblue);
    animation-delay: -2.5s;
}

.explore .animated-circle>*>*>*:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 0.29em;
    width: 150%;
    border-top: 0.02em solid #ECECF5;
    transform-origin: 100% 0;
    transform: rotate(-33.5deg);
    background-color: var(--violet);
    animation: animated-circle2 5s ease infinite;
}

.explore .animated-circle>*>*:nth-child(even)>*:before {
    background-color: var(--lightblue);
    animation-delay: -2.5s;
}

.icons-animated-grid {
    position: absolute;
    inset: 0;
}

.blue svg path {
    fill: #0000FF !important;
}

.icons-animated-grid.expanded-mode .explore-icon:not(.expanded) {
    opacity: 0;
    visibility: hidden;
}

.icons-animated-grid:not(.expanded-mode) .explore-icon {
    visibility: visible;
}

.explore .reasons {
    overflow: hidden;
    height: clamp(32px, 4.125rem, 66px);
    text-align: center;
    line-height: clamp(32px, 4.125rem, 66px);
    color: var(--grey800);
}

.explore .swiper {
    touch-action: auto !important;
}

.explore .reasons ul,
.explore .reasons li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.explore .reasons strong {
    font-weight: bold;
    font-size: clamp(24px, 2.75rem, 44px);
}

.explore .violet {
    color: var(--violet);
}

.explore .violet2 {
    color: var(--violet2);
}

.explore .blue {
    color: var(--blue);
}

.explore .green {
    color: var(--green);
}

.explore .data-sources {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: clamp(16px, 1.5rem, 24px) 0 0 0;
    padding: clamp(16px, 1.5rem, 24px) 0 0 0;
    border-top: 1px solid var(--grey200);
    font-weight: normal;
    font-size: clamp(12px, 1rem, 16px);
    gap: 0.5em;
}

.explore .data-sources .title {
    font: inherit;
    margin: 0;
    font-weight: 600;
    flex: 0 0 auto;
    max-width: 100%;
}

.explore .data-sources ul,
.explore .data-sources li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.explore .data-sources ul {
    flex: 0 0 auto;
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
    gap: 0.5em;
}

.explore .data-sources li {
    flex: 0 0 auto;
    position: relative;
    padding: 0.25em 0 0.25em 2.5em;
}

.explore .data-sources li img {
    width: 2em;
    height: 2em;
    object-fit: contain;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.explore .cover-block {
    position: relative;
    margin: clamp(24px, 2rem, 32px) auto 0 auto;
    max-width: clamp(760px, 80rem, 1280px);
    background: var(--white);
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    transition-property: transform, opacity;
    transition-duration: 0.4s;
    transition-timing-function: ease;
    text-align: center;
    color: var(--grey800);
}

.explore .cover-block .title {
    margin: 0;
    text-align: left;
    font-size: clamp(16px, 1.875rem, 30px);
    padding-right: 2.933333em;
    background: url("../img/icons/arrow-right.svg") no-repeat calc(100% - 1.466666em + 0.4em) 50%/0.8em auto;
    width: 17em;
    flex: 0 0 auto;
}

.explore .cover-block p {
    margin: 0 0 8px 0;
    text-wrap: balance;
}

@media only screen and (min-width: 901px) {
    .explore .cover-block .text {
        text-align: left;
    }
}

@media only screen and (max-width: 900px) {
    .explore {
        padding-top: calc(var(--vert) + var(--logo));
        font-weight: normal;
        font-size: clamp(12px, 1rem, 16px);
    }

    .explore .title {
        font-size: clamp(16px, 1.875rem, 30px);
        margin-bottom: clamp(12px, 1.5rem, 24px);
    }

    .explore .big-icon {
        font-size: clamp(64px, 7.5rem, 120px);
    }

    .explore .circle-list {
        gap: 1.5em;
    }

    .explore .circle-list .small {
        font-weight: 500;
        font-size: 14px;
    }

    .explore .reasons {
        font-weight: 500;
        font-size: 24px;
        line-height: 1.625;
        height: 6.23em;
    }

    .explore .reasons .swiper-slide {
        height: 6.23em;
        position: relative;
    }

    .explore .reasons strong {
        font-size: 44px;
        line-height: 66px;
        display: block;
    }

    .explore .data-sources {
        display: block;
        text-align: center;
    }

    .explore .data-sources .title,
    .explore .data-sources ul {
        display: inline;
    }

    .explore .data-sources .title {
        line-height: 40px;
    }

    .explore .data-sources li {
        display: inline-block;
        padding-top: calc(20px - 0.5lh);
        padding-bottom: calc(20px - 0.5lh);
        padding-left: 48px;
    }

    .explore .data-sources .title,
    .explore .data-sources li {
        margin-left: 3px;
        margin-right: 3px;
        margin-bottom: 8px;
    }

    .explore .data-sources li img {
        width: 40px;
        height: 40px;
    }

    .explore .cover-block {
        position: static;
        bottom: auto;
        margin-top: clamp(24px, 3rem, 48px);
        flex-direction: column;
        text-align: center;
    }

    .explore .cover-block .title {
        text-align: center;
        padding: 0 0 1.866666em 0;
        background: url("../img/icons/arrow-down.svg") no-repeat 50% calc(100% - 0.533333em)/0.8em auto;
        width: auto;
    }

    .explore .cover-block p {
        margin-bottom: 24px;
    }
}

.explore .interactivity-wins {
    max-width: min(100%, 1080px);
    margin: 32px auto 0;
    text-align: center;
}

.explore .interactivity-wins__stage {
    display: grid;
    align-content: center;
    justify-items: center;
    row-gap: clamp(14px, 1.4vw, 18px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    opacity: 1;
    transform: translateY(0);
}

.explore .interactivity-wins__stage.is-changing {
    opacity: 0;
    transform: translateY(8px);
}

.explore .interactivity-wins__stage.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.explore .interactivity-wins__title {
    font-weight: bold;
    font-size: clamp(16px, 2.75rem, 44px);
    margin: 0;
    color: var(--grey800);
}

.explore .interactivity-wins__statline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35em;
    font-size: clamp(16px, 1.5rem, 24px);
    line-height: 1.2;
    color: #131a74;
}

.explore .interactivity-wins__label {
    font-weight: 500;
}

.explore .interactivity-wins__value {
    font-weight: 700;
    font-size: clamp(32px, 2.75rem, 44px);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

.explore .interactivity-wins__value.is-blue {
    color: #1b2bff;
}

.explore .interactivity-wins__value.is-violet2 {
    color: #6c2cff;
}

.explore .interactivity-wins__value.is-pink {
    color: #ff2bd6;
}

.explore .interactivity-wins__value.is-green {
    color: #7bd321;
}

.explore .interactivity-wins__sources {
    margin-top: clamp(14px, 1.4vw, 20px);
    padding-top: clamp(14px, 1.4vw, 20px);
    border-top: 1px solid rgba(143, 151, 197, 0.26);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.explore .interactivity-wins__sources-title {
    color: #151c74;
    font-size: clamp(12px, 0.92vw, 14px);
    font-weight: 600;
}

.explore .interactivity-wins__sources-list,
.explore .interactivity-wins__sources-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.explore .interactivity-wins__sources-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.explore .interactivity-wins__sources-list a {
    min-height: 0 !important;
}

.explore .interactivity-wins__sources-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #222a79;
    font-size: clamp(11px, 0.88vw, 13px);
    white-space: nowrap;
}

.explore .interactivity-wins__sources-list img {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
}

.explore .interactivity-wins__sources-list .year {
    font-weight: 600;
    opacity: 0.88;
}

@media only screen and (max-width: 900px) {
    .explore .interactivity-wins {
        margin-top: 32px;
    }

    .explore .interactivity-wins__stage {
        min-height: 126px;
        row-gap: 10px;
    }

    .explore .interactivity-wins__title {
        font-size: clamp(16px, 1.875rem, 30px);
    }

    .explore .interactivity-wins__statline {
        font-size: clamp(16px, 4.6vw, 22px);
        gap: 0.25em 0.35em;
    }

    .explore .interactivity-wins__value {
        font-size: clamp(30px, 7.2vw, 42px);
        display: block;
    }

    .explore .interactivity-wins__sources {
        gap: 0.4rem 0.7rem;
    }
}

#page-explore .explore .cover-block-place,
.explore-view .explore .cover-block-place,
.explore .cover-block-place {
    display: none;
}

#explore-overlay .explore {
    padding-left: min(var(--side), 48px) !important;
    padding-right: min(var(--side), 48px) !important;
}

.btn-chat-smile:before {
    background-image: url("../img/icons/chat-smile.svg");
    width: 2em;
    height: 2em;
}

@media only screen and (min-width: 901px) {

    .explore .big-text,
    .explore .circle-list dt {
        font-weight: bold;
        font-size: clamp(20px, 1.875rem, 30px);
    }
}

/*Explore end*/
/*Text page start*/
.text-page {
    font-size: 16px;
    line-height: 1.58;
    letter-spacing: -0.012em;
    padding: calc(var(--logo) + clamp(8px, 0.75rem, 12px) + 40px) var(--side) clamp(24px, 3rem, 48px) var(--side);
    font-weight: 500;
    color: var(--black);
}

.text-page .max {
    margin: 0 auto;
    max-width: 33.333em;
}

.text-page h1 {
    font-size: 32px;
    margin: 0 0 32px 0;
    font-weight: bold;
}

.text-page h2 {
    font-weight: bold;
    font-size: 24px;
    margin-top: 32px;
    margin-bottom: 24px;
}

@media only screen and (min-width: 901px) {
    .text-page {
        font-size: clamp(12px, 1.375rem, 22px);
    }

    .text-page h1 {
        font-size: clamp(16px, 2.75rem, 44px);
    }

    .text-page h2 {
        font-size: clamp(16px, 1.875rem, 30px);
    }
}

/*Text page end*/
.skip-link {
    position: absolute;
    left: -100vw;
}