* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-color: var(--color-primary) var(--color-dark);
    scrollbar-width: thin
}

:root {
    --color-primary: #336574;
    --color-primary-dark: #1c3941;
    --color-primary-light: #52a0b7;
    --color-dark: #0f172a;
    --color-dark-lighter: #1e293b;
    --color-dark-card: #1a1f35;
    --color-text: #f1f5f9;
    --color-text-muted: #cbd5e1;
    --color-accent: #fbbf24;
    --color-accent-pink: #ec4899;
    --gradient-primary: linear-gradient(135deg, #336574, #1c3941);
    --gradient-main: linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(30, 41, 59, .9) 50%, rgba(126, 34, 206, .2));
    --gradient-accent: linear-gradient(135deg, #0f172a, #1e293b 50%, #1a1f35);
    --container-max-width: 1280px;
    --header-height: 70px;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1)
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height)
}

body {
    background: var(--color-dark);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden
}

img {
    display: block;
    height: auto;
    max-width: 100%
}

.fx-sheen {
    --angle: 20deg;
    --width: 72%;
    --time: 900ms;
    --blur: 1.2px;
    border-radius: 12px;
    display: inline-block;
    overflow: hidden;
    position: relative
}

.fx-sheen>img {
    display: block;
    height: auto;
    width: 100%
}

.fx-sheen:after {
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, .35) 50%, hsla(0, 0%, 100%, 0) 70%, hsla(0, 0%, 100%, 0));
    bottom: -25%;
    content: "";
    filter: blur(var(--blur));
    left: -60%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -25%;
    transform: translateX(-150%) rotate(var(--angle));
    width: var(--width);
    will-change: transform, opacity;
    z-index: 1
}

.fx-sheen:hover:after {
    animation: sheen-pass var(--time) cubic-bezier(.17, .67, .22, .97) both
}

@keyframes sheen-pass {
    0% {
        opacity: 0;
        transform: translateX(-150%) rotate(var(--angle))
    }

    15% {
        opacity: 1
    }

    85% {
        opacity: 1;
        transform: translateX(250%) rotate(var(--angle))
    }

    to {
        opacity: 0;
        transform: translateX(250%) rotate(var(--angle))
    }
}

@media (prefers-reduced-motion:reduce) {
    .fx-sheen:after {
        display: none
    }
}

::-webkit-scrollbar {
    width: 12px
}

::-webkit-scrollbar-track {
    background: var(--color-dark);
    border-left: 1px solid var(--color-dark-lighter)
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary) 0, var(--color-primary-dark) 100%);
    border: 2px solid var(--color-dark);
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-primary-light) 0, var(--color-primary) 100%)
}

.border-legal {
    --b-size: 2px;
    --b-radius: 14px;
    --b1: var(--color-primary, #336574);
    --b2: color-mix(in srgb, var(--b1) 35%, #fff);
    border-radius: var(--b-radius);
    isolation: isolate;
    overflow: hidden;
    position: relative
}

.border-legal:before {
    background: conic-gradient(from 220deg, color-mix(in srgb, var(--b1) 15%, #fff) 0deg, var(--b1) 110deg, var(--b2) 180deg, var(--b1) 260deg, color-mix(in srgb, var(--b1) 15%, #fff) 1turn);
    border-radius: inherit;
    content: "";
    inset: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .95;
    padding: var(--b-size);
    pointer-events: none;
    position: absolute;
    transition: filter .35s ease, opacity .35s ease, transform .35s ease
}

.border-legal:hover:before {
    filter: drop-shadow(0 6px 18px rgba(51, 101, 116, .25))
}

.border-legal.border-legal--brackets:before {
    background: linear-gradient(90deg, var(--b1) 0 16px, transparent 16px) 0 0/60px 2px no-repeat, linear-gradient(180deg, var(--b1) 0 16px, transparent 16px) 0 0/2px 60px no-repeat, linear-gradient(90deg, transparent calc(100% - 16px), var(--b1) 0) 100% 100%/60px 2px no-repeat, linear-gradient(180deg, transparent calc(100% - 16px), var(--b1) 0) 100% 100%/2px 60px no-repeat;
    -webkit-mask: none;
    mask: none;
    opacity: .9;
    padding: 0
}

.border-legal.border-legal--brackets:hover:before {
    filter: drop-shadow(0 6px 18px rgba(51, 101, 116, .25))
}

.border-legal.border-legal--dashed:before {
    background: repeating-linear-gradient(0deg, var(--b1) 0 8px, #0000 8px 14px) 0/2px 100% repeat-y, repeating-linear-gradient(90deg, var(--b1) 0 8px, #0000 8px 14px) top/100% 2px repeat-x, repeating-linear-gradient(180deg, var(--b1) 0 8px, #0000 8px 14px) 100%/2px 100% repeat-y, repeating-linear-gradient(270deg, var(--b1) 0 8px, #0000 8px 14px) bottom/100% 2px repeat-x;
    -webkit-mask: none;
    mask: none;
    opacity: .9;
    padding: 0
}

.border-legal.border-legal--dashed:hover:before {
    filter: drop-shadow(0 6px 18px rgba(51, 101, 116, .22))
}

.border-legal>img {
    border-radius: inherit;
    -o-object-fit: cover;
    object-fit: cover
}

.container {
    margin: 0 auto;
    max-width: var(--container-max-width);
    padding: 0 20px
}

.header {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: hsla(0, 0%, 100%, .95);
    border-bottom: 1px solid rgba(51, 101, 116, .1);
    height: var(--header-height);
    left: 0;
    position: relative;
    right: 0;
    top: 0;
    transition: var(--transition-base);
    z-index: 1000
}

.header:before {
    background-attachment: fixed;
    background-image: url(../icons/header-pattern.svg);
    background-position: 50%;
    background-repeat: repeat;
    background-size: 100px 100px;
    content: "";
    height: 100%;
    left: 50%;
    opacity: .035;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: -1
}

.header__block {
    gap: 20px;
    height: var(--header-height);
    justify-content: space-between
}

.header__block,
.logo {
    align-items: center;
    display: flex
}

.logo {
    color: var(--color-text);
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 600;
    gap: 12px;
    text-decoration: none
}

.logo-mobile {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.logo {
    max-width: 236px;
    transition: var(--transition-base)
}

.logo img {
    filter: sepia(.5) hue-rotate(150deg) saturate(1.4) brightness(.6)
}

.logo:hover {
    color: var(--color-primary)
}

.logo:hover .logo__icon {
    transform: rotate(5deg) scale(1.05)
}

.nav {
    align-items: center;
    display: none;
    flex: 1;
    gap: 6%;
    justify-content: center
}

.nav__silka {
    color: var(--color-text-muted);
    color: var(--color-dark);
    font-size: 15px;
    font-weight: 500;
    position: relative;
    text-decoration: none;
    transition: var(--transition-base);
    white-space: nowrap
}

.nav__silka:after {
    background: var(--gradient-primary);
    bottom: -8px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transition: width var(--transition-base);
    width: 0
}

.nav__silka:hover {
    color: var(--color-primary)
}

.nav__silka:hover:after {
    width: 100%
}

.btn {
    align-items: center;
    border: none;
    cursor: pointer;
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    overflow: hidden;
    padding: 12px 24px;
    position: relative;
    text-decoration: none;
    transition: var(--transition-base);
    white-space: nowrap;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 1
}

.btn,
.btn:before {
    background: var(--gradient-primary);
    color: #fff
}

.btn:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
    width: 0;
    z-index: -1
}

.btn:hover:before {
    width: 100%
}

.btn__arrow {
    transition: transform var(--transition-base)
}

.btn:hover .btn__arrow {
    transform: translateX(4px)
}

.btn--header {
    display: none
}

.btn--primary {
    background: var(--gradient-primary);
    box-shadow: 0 4px 15px rgba(51, 101, 116, .3);
    color: #fff
}

.btn--primary:hover {
    box-shadow: 0 8px 30px rgba(51, 101, 116, .5);
    color: #fff;
    transform: translateY(-2px)
}

.btn--mobile {
    background: var(--gradient-primary);
    color: #fff;
    justify-content: center;
    margin-top: 20px;
    width: 100%
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    padding: 8px;
    z-index: 1001
}

.menu-toggle span {
    border-radius: 2px;
    height: 3.1px;
    transition: var(--transition-base);
    width: 25px
}

.menu-toggle span,
.menu-toggle:hover span {
    background: var(--color-primary)
}

.menu-toggle.active span:first-child {
    transform: rotate(45deg) translate(4.5px, 4.5px)
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px)
}

.mobile-nav {
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999
}

.mobile-nav.active {
    pointer-events: auto
}

.mobile-nav__overlay {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .8);
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity var(--transition-slow)
}

.mobile-nav.active .mobile-nav__overlay {
    opacity: 1
}

.mobile-nav__content {
    background: var(--color-dark-card);
    border-left: 1px solid rgba(51, 101, 116, .2);
    bottom: 0;
    max-width: 350px;
    overflow-y: auto;
    padding: 30px 25px;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    width: 85%
}

.mobile-nav.active .mobile-nav__content {
    transform: translateX(0)
}

.mobile-nav__close {
    align-items: center;
    background: rgba(51, 101, 116, .1);
    border: 1px solid rgba(51, 101, 116, .3);
    border-radius: 10px;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 20px;
    transition: var(--transition-base);
    width: 40px
}

.mobile-nav__close:hover {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff
}

.mobile-nav__menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 60px
}

.mobile-nav__silka {
    border-radius: 10px;
    color: var(--color-text-muted);
    font-size: 16px;
    font-weight: 500;
    overflow: hidden;
    padding: 12px 16px;
    position: relative;
    text-decoration: none;
    transition: var(--transition-base)
}

.mobile-nav__silka:before {
    background: var(--gradient-primary);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    transition: width var(--transition-base);
    width: 0
}

.mobile-nav__silka:hover {
    background: rgba(51, 101, 116, .1);
    color: var(--color-text)
}

.mobile-nav__silka:hover:before {
    width: 4px
}

.main {
    align-items: center;
    display: flex;
    min-height: 83.7dvh;
    overflow: hidden;
    position: relative
}

.main__image {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.main__image img {
    animation: mainImageZoom 1.5s ease-out;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.main__overlay {
    animation: mainOverlayFade 1s ease-out;
    background: var(--gradient-main);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.main__content {
    max-width: 800px;
    padding: 60px 0;
    position: relative;
    z-index: 2
}

.badge {
    align-items: center;
    animation: mainFadeInUp .8s ease-out .3s forwards;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-primary-light);
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    opacity: 0;
    padding: 8px 0;
    transform: translateY(-20px)
}

.badge__dot {
    animation: pulse 2s infinite;
    background: var(--color-primary-light);
    border-radius: 50%;
    height: 8px;
    width: 8px
}

@keyframes pulse {

    0%,
    to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .5;
        transform: scale(1.1)
    }
}

.main__title {
    background: linear-gradient(135deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    -webkit-text-fill-color: transparent;
    animation: mainFadeInUp .8s ease-out .5s forwards;
    background-clip: text;
    opacity: 0;
    transform: translateY(-30px)
}

.main__description {
    animation: mainFadeInUp .8s ease-out .7s forwards;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 32px
}

.main .btn,
.main__description {
    opacity: 0;
    transform: translateY(-20px)
}

.main .btn {
    animation: mainFadeInUp .8s ease-out .9s forwards
}

.features {
    animation: mainFadeInUp .8s ease-out 1.1s forwards;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 48px
}

.feature,
.features {
    display: flex;
    opacity: 0
}

.feature {
    align-items: center;
    animation: mainSlideIn .6s ease-out forwards;
    gap: 12px
}

.feature:first-child {
    animation-delay: 1.3s
}

.feature:nth-child(2) {
    animation-delay: 1.5s
}

.feature:nth-child(3) {
    animation-delay: 1.7s
}

.feature__icon {
    background: rgba(51, 101, 116, .1);
    border: 1px solid rgba(51, 101, 116, .3);
    border-radius: 50%;
    flex-shrink: 0;
    height: 53px;
    position: relative;
    width: 53px
}

.feature__icon:before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    filter: brightness(1.9);
    height: 29px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 29px
}

.feature__icon--trust:before {
    background: url(../icons/secrecy.webp) 50%/contain no-repeat;
    height: 33px;
    width: 33px
}

.feature__icon--global:before {
    background: url(../icons/international.webp) 50%/contain no-repeat;
    background-size: contain;
    height: 32px;
    width: 32px
}

.feature__icon--experience:before {
    background: url(../icons/star.webp) 50%/contain no-repeat
}

.feature__text {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600
}

@keyframes mainImageZoom {
    0% {
        opacity: 0;
        transform: scale(1.1)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes mainOverlayFade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes mainFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(-30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes mainSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@media (min-width:768px) {
    :root {
        --header-height: 80px
    }

    .container {
        padding: 0 40px
    }

    .main__content {
        padding-bottom: 160px
    }

    .main__title {
        animation: mainFadeInUp 1s ease-out .5s forwards;
        font-size: 52px
    }

    .main__description {
        font-size: 18px
    }

    .features {
        gap: 32px
    }

    .feature__text {
        font-size: 15px
    }

    .why-choose__image-small img {
        height: 100%;
        width: auto
    }

    @keyframes mainFadeInUp {
        0% {
            opacity: 0;
            transform: translateY(-40px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }
}

@media (min-width:1024px) {
    .main {
        min-height: 82dvh
    }

    .nav {
        display: flex
    }

    .btn--header {
        display: inline-flex
    }

    .menu-toggle {
        display: none
    }

    .main__title {
        font-size: 64px
    }

    .main__description {
        font-size: 19px;
        max-width: 700px
    }

    .logo {
        left: 0;
        position: static;
        transform: translate(0)
    }

    .logo-mobile {
        display: none
    }
}

@media (min-width:1280px) {
    .main__title {
        font-size: 72px
    }
}

.track-section {
    background: var(--color-dark-card);
    border-bottom: 1px solid rgba(51, 101, 116, .2);
    border-top: 1px solid rgba(51, 101, 116, .2)
}

.track,
.track-section {
    overflow: hidden;
    position: relative
}

.track {
    padding: 20px 0;
    width: 100%
}

.track:after,
.track:before {
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 2
}

.track:before {
    background: linear-gradient(90deg, var(--color-dark-card) 0, transparent 100%);
    left: 0
}

.track:after {
    background: linear-gradient(270deg, var(--color-dark-card) 0, transparent 100%);
    right: 0
}

.track__track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: -moz-fit-content;
    width: fit-content
}

.track__track:hover {
    animation-play-state: paused
}

.track__content {
    align-items: center;
    display: flex;
    gap: 48px;
    margin-right: 48px;
    white-space: nowrap
}

.track__item {
    align-items: center;
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    gap: 43px;
    padding: 8px 0;
    position: relative;
    transition: var(--transition-base)
}

.track__item:before {
    animation: sparkle 3s ease-in-out infinite;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23336574' stroke='%2352a0b7' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3Cpath fill='%2352a0b7' d='m12 6 1.5 4.5 4.5.5-3 3 .75 4.5L12 16l-3.75 2.5L9 14l-3-3 4.5-.5z' opacity='.6'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    filter: drop-shadow(0 0 8px rgba(82, 160, 183, .3));
    flex-shrink: 0;
    height: 20px;
    width: 20px
}

.track__item:hover {
    color: var(--color-primary-light);
    transform: scale(1.05)
}

.track__item:hover:before {
    animation: sparkle 1s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(82, 160, 183, .6))
}

@keyframes scroll {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes sparkle {

    0%,
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1)
    }

    25% {
        opacity: .8;
        transform: rotate(-10deg) scale(1.1)
    }

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

    75% {
        opacity: .8;
        transform: rotate(10deg) scale(1.1)
    }
}

@media (min-width:768px) {
    .track {
        padding: 24px 0
    }

    .track__content {
        gap: 64px;
        margin-right: 64px
    }

    .track__item {
        font-size: 17px;
        gap: 57px
    }

    .track__item:before {
        height: 22px;
        width: 22px
    }

    .track:after,
    .track:before {
        width: 150px
    }
}

@media (min-width:1024px) {
    .track {
        padding: 28px 0
    }

    .track__content {
        gap: 80px;
        margin-right: 80px
    }

    .track__item {
        font-size: 18px;
        gap: 73px
    }

    .track__item:before {
        height: 24px;
        width: 24px
    }
}

.about-section {
    background: var(--color-dark);
    overflow: hidden;
    padding: 50px 0;
    position: relative
}

.about-section:before {
    background: radial-gradient(circle, rgba(51, 101, 116, .1) 0, transparent 70%);
    content: "";
    height: 500px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 500px
}

.about {
    align-items: center;
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr
}

.section-badge {
    align-items: center;
    background: linear-gradient(135deg, rgba(51, 101, 116, .1), rgba(28, 57, 65, .15));
    border: 1px solid transparent;
    -o-border-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) 1;
    border-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) 1;
    display: inline-flex;
    gap: 12px;
    margin-bottom: 24px;
    padding: 10px 20px;
    position: relative;
    text-align: center
}

.section-badge,
.section-badge:before {
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)
}

.section-badge:before {
    border: 1px solid var(--color-primary);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0
}

.section-badge__line {
    background: linear-gradient(90deg, transparent 0, var(--color-primary) 50%, var(--color-primary-light) 100%);
    height: 2px;
    width: 20px
}

.section-badge__text {
    color: var(--color-primary-light);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase
}

.about__block {
    position: relative;
    z-index: 1
}

.about__title {
    background: linear-gradient(135deg, var(--color-text) 0, var(--color-text-muted) 100%);
    -webkit-background-clip: text;
    color: var(--color-text);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 24px;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.about__description {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.8
}

.about__stats,
.stat-card {
    position: relative
}

.stat-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: linear-gradient(135deg, rgba(26, 31, 53, .8), rgba(30, 41, 59, .6)), url(../images/about-us-image-2.webp) 100%/cover no-repeat;
    border: 1px solid rgba(51, 101, 116, .3);
    border-radius: 24px;
    overflow: hidden;
    padding: 40px 32px;
    text-shadow: 1px 1px #000
}

.stat-card__number {
    text-shadow: none
}

.stat-card:before {
    background: radial-gradient(circle, rgba(51, 101, 116, .15) 0, transparent 70%);
    content: "";
    height: 200px;
    pointer-events: none;
    position: absolute;
    right: -50%;
    top: -50%;
    width: 200px
}

.stat-card:after {
    background: linear-gradient(90deg, transparent 0, var(--color-primary) 50%, transparent 100%);
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0
}

.star-rating {
    display: flex;
    gap: 6px;
    margin-bottom: 24px
}

.star-icon {
    animation: twinkle 3s ease-in-out infinite;
    color: var(--color-accent);
    filter: drop-shadow(0 2px 8px rgba(251, 191, 36, .3));
    height: 24px;
    width: 24px
}

.star-icon:first-child {
    animation-delay: 0s
}

.star-icon:nth-child(2) {
    animation-delay: .2s
}

.star-icon:nth-child(3) {
    animation-delay: .4s
}

.star-icon:nth-child(4) {
    animation-delay: .6s
}

.star-icon:nth-child(5) {
    animation-delay: .8s
}

@keyframes twinkle {

    0%,
    to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .7;
        transform: scale(.95)
    }
}

.stat-card__number {
    background: linear-gradient(135deg, var(--color-primary-light) 0, var(--color-primary) 100%);
    -webkit-background-clip: text;
    font-size: 56px;
    font-weight: 900;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 8px
}

.stat-card__label {
    color: var(--color-text);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px
}

.stat-card__sublabel {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 32px
}

.client-avatars {
    align-items: center;
    display: flex;
    gap: -12px
}

.client-avatar {
    background: var(--color-dark-lighter);
    border: 3px solid var(--color-dark-card);
    border-radius: 50%;
    height: 52px;
    margin-left: -12px;
    overflow: hidden;
    position: relative;
    transition: var(--transition-base);
    width: 52px
}

.client-avatar:first-child {
    margin-left: 0
}

.client-avatar:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(51, 101, 116, .4);
    transform: translateY(-4px) scale(1.1);
    z-index: 10
}

.client-avatar img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: var(--transition-base);
    width: 100%
}

.client-avatar:hover img {
    transform: scale(1.1)
}

.client-avatar--more {
    align-items: center;
    background: var(--gradient-primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    justify-content: center
}

.client-avatar--more .counter {
    font-size: 16px
}

@media (min-width:768px) {
    .about-section {
        padding: 100px 0
    }

    .about {
        gap: 64px
    }

    .about__title {
        font-size: 42px
    }

    .about__description {
        font-size: 17px
    }

    .about__stats,
    .stat-card {
        height: 100%
    }

    .stat-card {
        padding: 48px 40px
    }

    .stat-card__number {
        font-size: 64px
    }

    .client-avatar {
        height: 56px;
        width: 56px
    }
}

@media (min-width:1024px) {
    .about {
        gap: 80px;
        grid-template-columns: 1fr 1fr
    }

    .about__title {
        font-size: 48px
    }

    .about__description {
        font-size: 18px
    }

    .stat-card__number {
        font-size: 72px
    }

    .stat-card__label {
        font-size: 26px
    }

    .client-avatar {
        height: 60px;
        width: 60px
    }
}

@media (min-width:1280px) {
    .about__title {
        font-size: 52px
    }
}

.service-section {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    padding: 50px 0;
    position: relative
}

.service-section:before {
    background: linear-gradient(90deg, transparent, rgba(51, 101, 116, .2) 50%, transparent);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.section-badge--light {
    background: #fff;
    border: 1px solid rgba(51, 101, 116, .15);
    box-shadow: 0 4px 15px rgba(51, 101, 116, .08)
}

.section-badge--light .section-badge__dot {
    background: var(--color-primary)
}

.section-badge--light .section-badge__text {
    color: var(--color-dark)
}

.section-badge__dot {
    animation: pulse-light 2s infinite;
    background: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
    height: 8px;
    width: 8px
}

@keyframes pulse-light {

    0%,
    to {
        box-shadow: 0 0 0 0 rgba(51, 101, 116, .4);
        opacity: 1;
        transform: scale(1)
    }

    50% {
        box-shadow: 0 0 0 8px rgba(51, 101, 116, 0);
        opacity: .7;
        transform: scale(1.1)
    }
}

.service-header {
    margin: 0 auto 64px;
    max-width: 900px;
    text-align: center
}

.service-header__block {
    margin-top: 24px
}

.service-title {
    color: var(--color-dark);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 20px
}

.service-description {
    color: #475569;
    font-size: 16px;
    line-height: 1.8
}

.service-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr
}

.service-card {
    background: #fff;
    border: 1px solid rgba(51, 101, 116, .1);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 4px 20px rgba(51, 101, 116, .08);
    overflow: hidden;
    position: relative;
    transition: var(--transition-slow)
}

.service-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(51, 101, 116, .15);
    transform: translateY(-8px)
}

.service-card__image {
    height: 240px;
    overflow: hidden;
    position: relative
}

.service-card__image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    width: 100%
}

.service-card:hover .service-card__image img {
    transform: scale(1.1)
}

.service-card__overlay {
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .7));
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: var(--transition-base)
}

.service-card:hover .service-card__overlay {
    background: linear-gradient(180deg, transparent, rgba(51, 101, 116, .8))
}

.service-card__icon {
    align-items: center;
    background: hsla(0, 0%, 100%, .84);
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
    display: flex;
    height: 46px;
    justify-content: center;
    left: 20px;
    position: absolute;
    top: 20px;
    transition: var(--transition-base);
    width: 46px;
    z-index: 5
}

.service-card:hover .service-card__icon:before {
    transform: rotate(5deg) scale(1.1);
    transition: var(--transition-base)
}

.service-card__icon:before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 28px;
    transition: var(--transition-base);
    width: 28px
}

.service-card__icon--chart:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23336574' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 12 3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")
}

.service-card__icon--crypto:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23336574' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0'/%3E%3C/svg%3E")
}

.service-card__icon--investment:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23336574' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 9V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2m2 4h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2m7-5a2 2 0 1 1-4 0 2 2 0 0 1 4 0'/%3E%3C/svg%3E")
}

.service-card__icon--global:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23336574' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.055 11H5a2 2 0 0 1 2 2v1a2 2 0 0 0 2 2 2 2 0 0 1 2 2v2.945M8 3.935V5.5A2.5 2.5 0 0 0 10.5 8h.5a2 2 0 0 1 2 2 2 2 0 1 0 4 0 2 2 0 0 1 2-2h1.064M15 20.488V18a2 2 0 0 1 2-2h3.064M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0'/%3E%3C/svg%3E")
}

.service-card__content {
    padding: 28px 24px
}

.service-card__title {
    color: var(--color-dark);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
    transition: var(--transition-base)
}

.service-card:hover .service-card__title {
    color: var(--color-primary)
}

.service-card__text {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6
}

@media (min-width:768px) {
    .service-section {
        padding: 100px 0
    }

    .service-header {
        margin-bottom: 80px
    }

    .service-title {
        font-size: 42px
    }

    .service-description {
        font-size: 17px
    }

    .service-grid {
        gap: 28px;
        grid-template-columns: repeat(2, 1fr)
    }

    .service-card__image {
        height: 260px
    }

    .service-card__content {
        padding: 32px 28px
    }

    .service-card__title {
        font-size: 21px
    }

    .service-card__text {
        font-size: 15px
    }
}

@media (min-width:1024px) {
    .service-title {
        font-size: 48px
    }

    .service-description {
        font-size: 18px
    }

    .service-grid {
        gap: 32px;
        grid-template-columns: repeat(4, 1fr)
    }

    .service-card__image {
        height: 280px
    }

    .service-card__icon {
        height: 54px;
        left: 24px;
        top: 24px;
        width: 54px
    }

    .service-card__icon:before {
        height: 32px;
        width: 32px
    }

    .service-card__content {
        padding: 36px 32px
    }

    .service-card__title {
        font-size: 22px
    }
}

@media (min-width:1280px) {
    .service-title {
        font-size: 52px
    }
}

:root {
    --su-size: 48px;
    --su-gap: 16px;
    --su-bg: hsla(0, 0%, 100%, .9);
    --su-fg: var(--color-primary, #336574);
    --su-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    --su-progress: 0
}

@media (prefers-color-scheme:dark) {
    :root {
        --su-bg: rgba(15, 23, 42, .9)
    }
}

.scrollup {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: var(--su-bg);
    border: none;
    border-radius: 50%;
    bottom: var(--su-gap);
    box-shadow: var(--su-shadow);
    color: var(--su-fg);
    cursor: pointer;
    display: grid;
    height: var(--su-size);
    opacity: 0;
    place-items: center;
    pointer-events: none;
    position: fixed;
    right: var(--su-gap);
    transform: translateY(12px) scale(.92);
    transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
    width: var(--su-size);
    z-index: 1000
}

.scrollup--show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1)
}

.scrollup:active {
    transform: translateY(0) scale(.98)
}

.scrollup:before {
    background: conic-gradient(var(--su-fg) calc(var(--su-progress)*1turn), transparent 0);
    border-radius: 50%;
    content: "";
    inset: -2px;
    -webkit-mask: radial-gradient(closest-side, #0000 calc(50% - 2px), #000 calc(50% - 2px));
    mask: radial-gradient(closest-side, #0000 calc(50% - 2px), #000 calc(50% - 2px));
    padding: 2px;
    pointer-events: none;
    position: absolute
}

.scrollup__icon {
    display: block
}

@media (min-width:992px) {
    :root {
        --su-size: 54px
    }
}

@media (prefers-reduced-motion:reduce) {
    .scrollup {
        transition: none
    }
}

.why-choose-section {
    background: #f8f9fa;
    padding: 50px 0
}

.why-choose {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr
}

.why-choose__image-main {
    align-items: flex-end;
    border-radius: 24px;
    display: flex;
    display: none;
    justify-content: center;
    max-height: 450px;
    overflow: hidden
}

.why-choose__image-main img {
    display: block;
    height: auto;
    max-width: none;
    width: 100%
}

.why-choose__content {
    align-items: flex-start;
    display: flex;
    flex-direction: column
}

.why-choose__title {
    color: #2d3748;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin: 20px 0 16px
}

.why-choose__description {
    color: #4a5568;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 32px
}

.why-choose__bottom {
    margin-bottom: 32px
}

.why-choose__bottom,
.why-choose__features {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr
}

.why-feature {
    align-items: flex-start;
    display: flex;
    gap: 16px
}

.why-feature__icon {
    align-items: center;
    background: rgba(51, 101, 116, .1);
    border: 1px solid rgba(51, 101, 116, .3);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 53px;
    justify-content: center;
    position: relative;
    width: 53px
}

.why-feature__icon:before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 24px;
    width: 24px
}

.why-feature__icon--verified:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2352a0b7' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m9 12 2 2 4-4m5.618-4.016A11.96 11.96 0 0 1 12 2.944a11.96 11.96 0 0 1-8.618 3.04A12 12 0 0 0 3 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016'/%3E%3C/svg%3E")
}

.why-feature__icon--personal:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2352a0b7' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M17 20h5v-2a3 3 0 0 0-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 0 1 5.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 0 1 9.288 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0m6 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0M7 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0'/%3E%3C/svg%3E")
}

.why-feature__text h3 {
    color: #2d3748;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px
}

.why-feature__text p {
    color: #718096;
    font-size: 14px;
    line-height: 1.5
}

.why-choose__image-small {
    border-radius: 20px;
    overflow: hidden
}

.why-choose__image-small img {
    max-width: none;
    width: auto
}

@media (min-width:768px) {
    .why-choose-section {
        padding: 80px 0
    }

    .why-choose__image-main {
        display: block
    }

    .why-choose {
        align-items: start;
        grid-template-columns: .6fr 1fr
    }

    .why-choose__title {
        font-size: 30px
    }

    .why-choose__description {
        font-size: 16px
    }

    .why-choose__bottom {
        gap: 32px;
        grid-template-columns: 1fr 1fr
    }

    .why-choose__features {
        gap: 28px;
        grid-template-columns: 1fr
    }

    .why-feature__icon {
        height: 52px;
        width: 52px
    }

    .why-feature__icon:before {
        height: 26px;
        width: 26px
    }

    .why-feature__text h3 {
        font-size: 17px
    }

    .why-feature__text p {
        font-size: 15px
    }
}

@media (min-width:1024px) {
    .why-choose-section {
        padding: 100px 0
    }

    .why-choose {
        gap: 48px
    }

    .why-choose__title {
        font-size: 36px;
        margin: 24px 0 20px
    }

    .why-choose__description {
        font-size: 17px;
        margin-bottom: 40px
    }

    .why-choose__bottom {
        gap: 40px;
        margin-bottom: 40px
    }

    .why-choose__features {
        gap: 32px
    }

    .why-feature__icon {
        height: 56px;
        width: 56px
    }

    .why-feature__icon:before {
        height: 28px;
        width: 28px
    }

    .why-feature__text h3 {
        font-size: 18px
    }
}

@media (min-width:1024px) and (max-width:1280px) {
    .why-choose__image-small {
        height: 202px;
        width: 300px
    }
}

@media (min-width:1280px) {
    .why-choose__title {
        font-size: 40px
    }

    .why-choose__description {
        font-size: 18px
    }

    .why-choose__image-small {
        height: 202px;
        width: 340px
    }
}

.what-we-do-section {
    background: var(--color-dark);
    overflow: hidden;
    padding: 50px 0;
    position: relative
}

.what-we-do-section:before {
    background: radial-gradient(circle, rgba(51, 101, 116, .08) 0, transparent 70%);
    content: "";
    height: 600px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 600px
}

.what-we-do {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr
}

.section-badge--dark {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.what-we-do__content {
    position: relative;
    z-index: 1
}

.what-we-do__title {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin: 24px 0 20px
}

.what-we-do__description {
    color: hsla(0, 0%, 100%, .8);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 32px
}

.btn--light {
    background: hsla(0, 0%, 100%, .95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    color: var(--color-dark)
}

.btn--light:before {
    background: var(--gradient-primary)
}

.btn--light:hover {
    box-shadow: 0 8px 30px rgba(51, 101, 116, .4);
    color: #fff
}

.success-rate {
    align-items: flex-start;
    border-top: 1px solid hsla(0, 0%, 100%, .1);
    display: flex;
    gap: 24px;
    margin-top: 48px;
    padding-top: 32px
}

.success-rate__number {
    color: transparent;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 2px hsla(0, 0%, 100%, .3);
    flex-shrink: 0;
    font-family: Arial, sans-serif
}

.success-rate__label {
    padding-top: 8px
}

.success-rate__title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px
}

.success-rate__text {
    color: hsla(0, 0%, 100%, .7);
    font-size: 14px;
    line-height: 1.6
}

.what-we-do__process {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    position: relative
}

.what-we-do__process:before {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .2) 50%, hsla(0, 0%, 100%, .1));
    bottom: 32px;
    content: "";
    left: 23px;
    position: absolute;
    top: 32px;
    width: 2px
}

.process-item {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    position: relative
}

.process-item:not(:last-child) {
    border-bottom: 1px solid hsla(0, 0%, 100%, .08)
}

.process-item__icon {
    align-items: center;
    background: hsla(0, 0%, 100%, .1);
    border: 2px solid hsla(0, 0%, 100%, .2);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    position: relative;
    transition: var(--transition-base);
    width: 48px;
    z-index: 1
}

.process-item:hover .process-item__icon {
    background: rgba(51, 101, 116, .3);
    border-color: var(--color-primary-light);
    transform: scale(1.1)
}

.process-item__icon:before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    filter: brightness(0) invert(1);
    height: 24px;
    width: 24px
}

.process-item__icon--analysis:before {
    background-image: url(../icons/analysis-icon.svg);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0'/%3E%3C/svg%3E"), url(../icons/analysis-icon.svg)
}

.process-item__icon--legal:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 3 1m0 0-3 9a5 5 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5 5 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3'/%3E%3C/svg%3E"), url(../icons/legal-icon.svg)
}

.process-item__icon--international:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.055 11H5a2 2 0 0 1 2 2v1a2 2 0 0 0 2 2 2 2 0 0 1 2 2v2.945M8 3.935V5.5A2.5 2.5 0 0 0 10.5 8h.5a2 2 0 0 1 2 2 2 2 0 1 0 4 0 2 2 0 0 1 2-2h1.064M15 20.488V18a2 2 0 0 1 2-2h3.064M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0'/%3E%3C/svg%3E"), url(../icons/international-icon.svg)
}

.process-item__icon--support:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 12 2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0'/%3E%3C/svg%3E"), url(../icons/support-icon.svg)
}

.process-item__content {
    flex: 1;
    padding-top: 4px
}

.process-item__title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    transition: var(--transition-base)
}

.process-item:hover .process-item__title {
    color: var(--color-primary-light)
}

.process-item__text {
    color: hsla(0, 0%, 100%, .7);
    font-size: 15px;
    line-height: 1.6
}

@media (min-width:768px) {
    .what-we-do-section {
        padding: 100px 0
    }

    .what-we-do {
        gap: 64px
    }

    .what-we-do__title {
        font-size: 38px
    }

    .what-we-do__description {
        font-size: 17px
    }

    .success-rate {
        margin-top: 56px;
        padding-top: 40px
    }

    .success-rate__number {
        font-size: 84px
    }

    .success-rate__title {
        font-size: 20px
    }

    .success-rate__text {
        font-size: 15px
    }

    .what-we-do__process:before {
        left: 29px
    }

    .process-item {
        gap: 24px;
        padding: 28px 0
    }

    .process-item__icon {
        height: 56px;
        width: 56px
    }

    .process-item__icon:before {
        height: 28px;
        width: 28px
    }

    .process-item__title {
        font-size: 19px
    }

    .process-item__text {
        font-size: 16px
    }
}

@media (min-width:1024px) {
    .what-we-do {
        align-items: start;
        gap: 80px;
        grid-template-columns: 1fr 1fr
    }

    .what-we-do__title {
        font-size: 44px;
        margin-top: 28px
    }

    .what-we-do__description {
        font-size: 18px;
        margin-bottom: 36px
    }

    .success-rate__number {
        font-size: 96px
    }

    .process-item {
        padding: 32px 0
    }

    .process-item__icon {
        height: 60px;
        width: 60px
    }

    .process-item__icon:before {
        height: 30px;
        width: 30px
    }

    .process-item__title {
        font-size: 20px
    }
}

@media (min-width:1280px) {
    .what-we-do__title {
        font-size: 48px
    }
}

.how-work-section {
    background: #f7fafc;
    padding: 50px 0
}

.how-work {
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr
}

.how-work__image,
.how-work__media {
    position: relative
}

.how-work__image {
    background: #000;
    border-radius: 24px;
    height: clamp(340px, 68vw, 480px);
    overflow: hidden
}

.how-work__image img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.satisfy-badge {
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: radial-gradient(120% 120% at 0 100%, rgba(82, 160, 183, .35) 0, rgba(28, 57, 65, .15) 45%, rgba(15, 23, 42, 0) 100%), rgba(15, 23, 42, .75);
    border: 1px solid rgba(51, 101, 116, .35);
    border-radius: 16px;
    bottom: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    color: #fff;
    display: grid;
    gap: 12px;
    grid-template-columns: auto 1fr;
    left: 16px;
    padding: 14px 16px;
    position: absolute
}

.satisfy-badge__avatars {
    align-items: center;
    display: flex
}

.satisfy-badge__avatars .ava {
    background: #1e293b;
    border: 2px solid hsla(0, 0%, 100%, .25);
    border-radius: 50%;
    height: 34px;
    margin-right: -8px;
    overflow: hidden;
    width: 34px
}

.satisfy-badge__avatars .ava img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.satisfy-badge__content h3 {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 4px
}

.satisfy-badge__content p {
    font-size: 12.5px;
    margin: 0;
    opacity: .9
}

.how-work__title {
    color: #1e293b;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    margin: 18px 0 12px
}

.how-work__lead {
    color: #475569;
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 18px
}

.steps {
    display: grid;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0
}

.step {
    align-items: start;
    border-radius: 7px;
    display: flex;
    gap: 12px 14px;
    padding: 16px 14px;
    position: relative
}

.step__chip {
    align-self: start;
    background: linear-gradient(0deg, #fde2e2, #fde2e2)
}

.step__icon {
    background: rgba(51, 101, 116, .1);
    border: 1px solid rgba(51, 101, 116, .3);
    grid-column: 2/3;
    height: 44px;
    width: 44px
}

.step__icon:before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    filter: none;
    height: 24px;
    inset: 0;
    margin: auto;
    width: 24px
}

.step__icon--apply:before {
    background-image: url(../icons/apply.svg)
}

.step__icon--analysis:before {
    background-image: url(../icons/analysis.svg)
}

.step__icon--contract:before {
    background-image: url(../icons/contract.svg)
}

.step__icon--refund:before {
    background-image: url(../icons/refund.svg)
}

.step:hover .step__icon {
    background: rgba(51, 101, 116, .18);
    border-color: var(--color-primary-light)
}

@media (min-width:768px) {
    .how-work {
        grid-template-columns: .9fr 1fr
    }

    .how-work__image {
        height: clamp(420px, 54vw, 560px)
    }

    .how-work__title {
        font-size: 34px
    }

    .how-work__lead {
        font-size: 16px;
        margin-bottom: 22px
    }

    .satisfy-badge {
        bottom: 20px;
        left: 20px;
        padding: 16px 18px
    }

    .satisfy-badge__content h3 {
        font-size: 16px
    }

    .satisfy-badge__content p {
        font-size: 13px
    }

    .step {
        gap: 14px 16px;
        padding: 18px 16px
    }

    .step__icon {
        height: 50px;
        width: 50px
    }

    .step__icon:before {
        height: 26px;
        width: 26px
    }
}

@media (min-width:1024px) {
    .how-work-section {
        padding: 110px 0
    }

    .how-work {
        gap: 56px
    }

    .how-work__title {
        font-size: 44px;
        margin: 22px 0 14px
    }

    .how-work__lead {
        font-size: 17px;
        margin-bottom: 26px
    }

    .satisfy-badge {
        border-radius: 18px;
        bottom: 24px;
        left: 24px
    }

    .steps {
        gap: 22px
    }

    .step {
        padding: 22px 18px
    }

    .step__chip {
        font-size: 12.5px;
        height: 30px
    }

    .step__icon {
        height: 56px;
        width: 56px
    }

    .step__icon:before {
        height: 28px;
        width: 28px
    }

    .step__text h3 {
        font-size: 18px
    }

    .step__text p {
        font-size: 15px
    }

    .how-work__image {
        height: clamp(460px, 44vw, 620px)
    }
}

.step {
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(51, 101, 116, .12);
    box-shadow: 0 6px 18px rgba(51, 101, 116, .08);
    gap: 14px;
    padding: 18px 16px 18px 18px
}

.step:before {
    background: linear-gradient(180deg, rgba(51, 101, 116, .28), rgba(82, 160, 183, .38) 50%, rgba(51, 101, 116, .18));
    border-radius: 3px;
    bottom: 10px;
    content: "";
    filter: blur(.2px);
    left: 10px;
    opacity: .75;
    position: absolute;
    top: 10px;
    width: 4px;
    z-index: -1
}

.step__chip {
    align-items: center;
    background: #fde2e2;
    border: 1px solid rgba(124, 45, 45, .15);
    border-radius: 999px;
    color: #7c2d2d;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    left: 50%;
    letter-spacing: .2px;
    padding: 0 10px;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%)
}

.step__icon {
    background: linear-gradient(135deg, rgba(51, 101, 116, .12), rgba(51, 101, 116, .04));
    border: 1px solid rgba(51, 101, 116, .28);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .45), 0 6px 14px rgba(0, 0, 0, .08);
    flex-shrink: 0;
    height: 48px;
    overflow: hidden;
    position: relative;
    width: 48px
}

.step__icon:before {
    background: conic-gradient(from 220deg, rgba(82, 160, 183, 0) 0turn, rgba(82, 160, 183, .65) .08turn, rgba(82, 160, 183, 0) .16turn, rgba(82, 160, 183, 0) 1turn);
    filter: blur(1px);
    inset: -3px;
    transform: rotate(0turn);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1)
}

.step__icon:after,
.step__icon:before {
    border-radius: 50%;
    content: "";
    opacity: .9;
    position: absolute
}

.step__icon:after {
    background: radial-gradient(circle at 30% 30%, hsla(0, 0%, 100%, .55) 0, hsla(0, 0%, 100%, 0) 60%);
    inset: 7px;
    mix-blend-mode: screen
}

.step:hover .step__icon:before {
    transform: rotate(1turn)
}

.step:hover {
    border-color: var(--color-primary);
    box-shadow: 0 12px 30px rgba(51, 101, 116, .14)
}

.step__text h3 {
    color: #1f2937;
    font-size: 16px;
    font-weight: 800;
    margin: 2px 0 6px;
    transition: color .25s ease
}

.step__text p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0
}

.step:hover .step__text h3 {
    color: var(--color-primary)
}

.step__icon:after,
.step__icon:before {
    background-size: contain
}

@media (min-width:768px) {
    .step {
        gap: 16px;
        padding: 20px 18px 20px 20px
    }

    .step__icon {
        height: 52px;
        width: 52px
    }
}

@media (min-width:1024px) {
    .steps {
        gap: 22px
    }

    .step {
        padding: 22px 20px 22px 22px
    }

    .step__icon {
        height: 56px;
        width: 56px
    }

    .step__text h3 {
        font-size: 18px
    }

    .step__text p {
        font-size: 15px
    }
}

.team-section {
    background: linear-gradient(180deg, #fff, #f8f9fa);
    padding: 50px 0;
    position: relative
}

.team-header {
    margin: 0 auto 56px;
    max-width: 800px;
    text-align: center
}

.team-title {
    color: var(--color-dark);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 24px
}

.team-slider-wrapper {
    position: relative
}

.team-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 20px;
    margin: 0 -20px;
    padding: 0 20px 20px
}

.team-grid::-webkit-scrollbar {
    display: none
}

.team-card {
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    flex: 0 0 280px;
    overflow: hidden;
    position: relative;
    scroll-snap-align: center;
    transition: var(--transition-slow)
}

.team-card:hover {
    box-shadow: 0 20px 40px rgba(51, 101, 116, .15);
    transform: translateY(-8px)
}

.team-card__image {
    aspect-ratio: 4/5;
    overflow: hidden;
    position: relative
}

.team-card__image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    width: 100%
}

.team-card:hover .team-card__image img {
    transform: scale(1.08)
}

.team-card__overlay {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .3));
    bottom: 0;
    height: 40%;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    transition: var(--transition-base)
}

.team-card:hover .team-card__overlay {
    background: linear-gradient(180deg, transparent, rgba(51, 101, 116, .4))
}

.team-card__content {
    background: #fff;
    padding: 24px 20px;
    position: relative;
    text-align: center
}

.team-card__content:before {
    background: var(--gradient-primary);
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    transition: width var(--transition-base);
    width: 0
}

.team-card:hover .team-card__content:before {
    width: 60px
}

.team-card__name {
    color: var(--color-dark);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    transition: var(--transition-base)
}

.team-card:hover .team-card__name {
    color: var(--color-primary)
}

.team-card__position {
    color: #64748b;
    font-size: 14px;
    font-weight: 500
}

.team-slider-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 24px
}

.team-slider-dot {
    background: #cbd5e1;
    border-radius: 50%;
    cursor: pointer;
    height: 8px;
    transition: var(--transition-base);
    width: 8px
}

.team-slider-dot.active {
    background: var(--color-primary);
    border-radius: 4px;
    width: 24px
}

@media (min-width:640px) {
    .team-card {
        flex: 0 0 320px
    }
}

@media (min-width:768px) {
    .team-section {
        padding: 100px 0
    }

    .team-header {
        margin-bottom: 64px
    }

    .team-title {
        font-size: 38px
    }

    .team-card__content {
        padding: 28px 24px
    }

    .team-card__name {
        font-size: 21px
    }

    .team-card__position {
        font-size: 15px
    }
}

@media (min-width:1024px) {
    .team-header {
        margin-bottom: 72px
    }

    .team-title {
        font-size: 44px
    }

    .team-grid {
        display: grid;
        gap: 32px;
        grid-template-columns: repeat(4, 1fr);
        margin: 0;
        overflow-x: visible;
        padding: 0;
        scroll-snap-type: none
    }

    .team-card {
        flex: initial
    }

    .team-slider-dots {
        display: none
    }

    .team-card__content {
        padding: 32px 24px
    }

    .team-card__name {
        font-size: 22px;
        margin-bottom: 8px
    }
}

@media (min-width:1280px) {
    .team-title {
        font-size: 48px
    }
}

.faq-block {
    background: var(--color-dark);
    overflow: hidden;
    padding: 50px 0;
    position: relative
}

.faq-block:before {
    background: radial-gradient(circle, rgba(51, 101, 116, .06) 0, transparent 70%);
    content: "";
    height: 500px;
    left: -20%;
    pointer-events: none;
    position: absolute;
    top: -50%;
    width: 500px
}

.faq {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr
}

.section-badge--dark {
    background: hsla(0, 0%, 100%, .05);
    border: 1px solid hsla(0, 0%, 100%, .1)
}

.section-badge--dark .section-badge__dot {
    background: hsla(0, 0%, 100%, .8)
}

.section-badge--dark .section-badge__text {
    color: hsla(0, 0%, 100%, .9)
}

.section-badge--dark .section-badge__line {
    background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, .3) 50%, transparent)
}

.faq__content {
    position: relative;
    z-index: 1
}

.faq__title {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin: 24px 0 20px
}

.faq__description {
    color: hsla(0, 0%, 100%, .7);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 32px
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.accordion-item {
    background: hsla(0, 0%, 100%, .03);
    border: 1px solid hsla(0, 0%, 100%, .08);
    overflow: hidden;
    transition: var(--transition-base)
}

.accordion-item:hover {
    background: hsla(0, 0%, 100%, .05);
    border-color: rgba(51, 101, 116, .3)
}

.accordion-item.active {
    background: rgba(51, 101, 116, .1);
    border-color: var(--color-primary)
}

.accordion-header {
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 20px 24px;
    text-align: left;
    transition: var(--transition-base);
    width: 100%
}

.accordion-question {
    color: #fff;
    flex: 1;
    font-size: 16px;
    font-weight: 700
}

.accordion-icon {
    flex-shrink: 0;
    height: 24px;
    transition: transform var(--transition-base);
    width: 24px
}

.accordion-icon svg {
    height: 100%;
    width: 100%
}

.accordion-icon svg path {
    stroke: hsla(0, 0%, 100%, .6);
    transition: var(--transition-base)
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg)
}

.accordion-item.active .accordion-icon svg path {
    stroke: var(--color-primary-light)
}

.accordion-content {
    display: none;
    overflow: hidden
}

.accordion-item.active .accordion-content {
    animation: accordionSlideDown .4s ease-out;
    display: block
}

.accordion-body {
    color: hsla(0, 0%, 100%, .8);
    font-size: 15px;
    line-height: 1.7;
    padding: 0 24px 24px
}

.accordion-body p {
    margin: 0
}

@keyframes accordionSlideDown {
    0% {
        max-height: 0;
        opacity: 0
    }

    to {
        max-height: 500px;
        opacity: 1
    }
}

@media (min-width:768px) {
    .faq-block {
        padding: 100px 0
    }

    .faq {
        gap: 64px
    }

    .faq__title {
        font-size: 38px
    }

    .faq__description {
        font-size: 17px
    }

    .accordion {
        gap: 20px
    }

    .accordion-header {
        padding: 24px 28px
    }

    .accordion-question {
        font-size: 17px
    }

    .accordion-body {
        font-size: 16px;
        padding: 0 28px 28px
    }
}

@media (min-width:1024px) {
    .faq {
        align-items: start;
        gap: 80px;
        grid-template-columns: 1fr 1fr
    }

    .faq__title {
        font-size: 42px
    }

    .faq__description {
        font-size: 18px
    }

    .accordion-header {
        padding: 26px 32px
    }

    .accordion-question {
        font-size: 18px
    }

    .accordion-body {
        padding: 0 32px 32px
    }
}

@media (min-width:1280px) {
    .faq__title {
        font-size: 46px
    }
}

:root {
    --pl-bg: rgba(249, 253, 255, .82);
    --pl-backdrop: blur(6px);
    --pl-fg: #2a6c7c;
    --pl-shadow: 0 10px 30px rgba(42, 108, 124, .18);
    --pl-radius: 14px
}

.preloader {
    backdrop-filter: var(--pl-backdrop);
    background: var(--pl-bg);
    display: grid;
    inset: 0;
    place-items: center;
    position: fixed;
    transition: opacity .35s ease, visibility .35s ease;
    z-index: 9999
}

.preloader[hidden] {
    display: none
}

.preloader__panel {
    background: #fff;
    border: 1px solid rgba(42, 108, 124, .12);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    display: grid;
    gap: 12px;
    min-width: clamp(220px, 30vw, 360px);
    padding: 18px 20px 16px
}

.preloader__logo {
    align-items: center;
    color: var(--pl-fg);
    display: inline-flex;
    gap: 10px
}

.preloader__logo svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(42, 108, 124, .18))
}

.preloader__logo svg path {
    animation: spin .9s linear infinite;
    transform-origin: 20px 20px
}

.preloader__track {
    background: linear-gradient(180deg, #eef6f9, #e8f1f4);
    border: 1px solid rgba(42, 108, 124, .18);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
    position: relative
}

.preloader__bar {
    animation: scan .95s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, rgba(42, 108, 124, .35), transparent);
    border-radius: 999px;
    display: block;
    inset: 0 70% 0 0;
    position: absolute
}

.preloader--hide {
    opacity: 0;
    visibility: hidden
}

@keyframes scan {
    0% {
        left: -40%;
        right: 60%
    }

    50% {
        left: 20%;
        right: 0
    }

    to {
        left: 100%;
        right: -40%
    }
}

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

    .preloader__bar,
    .preloader__logo svg path {
        animation: none
    }
}

@media (prefers-color-scheme:dark) {
    :root {
        --pl-bg: rgba(10, 16, 20, .72)
    }

    .preloader__panel {
        background: #0e161b;
        border-color: rgba(200, 230, 236, .08)
    }

    .preloader__track {
        background: #0b1317;
        border-color: rgba(200, 230, 236, .08)
    }

    .preloader__bar {
        background: linear-gradient(90deg, transparent, rgba(168, 221, 233, .45), transparent)
    }
}

.sr-only {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap
}

.contacts-section {
    background: linear-gradient(180deg, #f7fbfd, #f3f7f9);
    padding: 50px 0
}

.contacts-form-wrapper {
    background: #fff;
    border: 1px solid rgba(51, 101, 116, .1);
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(51, 101, 116, .12);
    margin: 0 auto;
    max-width: 920px;
    padding: 40px 28px
}

.contacts-form-header {
    margin-bottom: 28px;
    text-align: center
}

.contacts-form__title {
    color: #1b2a32;
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 10px
}

.contacts-form__description {
    color: #6b8792;
    margin: 0 auto;
    max-width: 720px
}

.form-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    margin-bottom: 16px
}

.form-group {
    position: relative
}

.form-input {
    background: #fff;
    border: 1.5px solid rgba(51, 101, 116, .18);
    border-radius: 12px;
    color: #1f2d35;
    font-size: 15px;
    outline: 0;
    padding: 14px 16px;
    transition: border-color .2s, box-shadow .2s, background .2s;
    width: 100%
}

.form-input::-moz-placeholder {
    color: #9bb1ba
}

.form-input::placeholder {
    color: #9bb1ba
}

.form-input:focus {
    border-color: var(--color-primary, #336574);
    box-shadow: 0 0 0 4px rgba(51, 101, 116, .1)
}

.form-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .08)
}

.form-input.success {
    border-color: #10b981
}

.form-error:empty {
    display: none;
    margin: 0
}

.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%239bb1ba' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    padding-right: 42px
}

.form-textarea {
    min-height: 120px;
    resize: vertical
}

.form-error {
    color: #ef4444;
    display: block;
    font-size: 13px;
    line-height: 1.2;
    margin-top: 6px;
    min-height: 18px;
    opacity: .95
}

.form-checkbox-group {
    margin: 18px 0
}

.form-checkbox {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: 10px
}

.form-checkbox input {
    opacity: 0;
    position: absolute
}

.checkbox-custom {
    background: #fff;
    border: 1.5px solid rgba(51, 101, 116, .35);
    border-radius: 6px;
    flex-shrink: 0;
    height: 20px;
    margin-top: 2px;
    position: relative;
    width: 20px
}

.form-checkbox input:checked+.checkbox-custom {
    background: rgba(51, 101, 116, .1);
    border-color: var(--color-primary, #336574)
}

.checkbox-custom:after {
    background: var(--color-primary, #336574);
    border-radius: 3px;
    content: "";
    height: 10px;
    inset: 0;
    margin: auto;
    position: absolute;
    transform: scale(0);
    transition: .2s;
    width: 10px
}

.form-checkbox input:checked+.checkbox-custom:after {
    transform: scale(1)
}

.checkbox-label {
    color: #344b55
}

.form-link {
    color: var(--color-primary, #336574);
    text-decoration: underline
}

.form-link:hover {
    opacity: .8
}

.btn--submit:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: .6;
    transform: none
}

.btn__loader {
    animation: spin .6s linear infinite;
    border: 2px solid hsla(0, 0%, 100%, .35);
    border-radius: 50%;
    border-top-color: #fff;
    height: 20px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px
}

.btn--submit.loading .btn__text {
    opacity: 0
}

.btn--submit.loading .btn__loader {
    opacity: 1
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

.iti {
    width: 100%
}

.iti__flag-container {
    border-right: 1px solid rgba(51, 101, 116, .12)
}

.iti--allow-dropdown .iti__flag-container {
    padding-left: 8px
}

#phone.form-input {
    padding-left: 80px
}

@media (min-width:768px) {
    .contacts-section {
        padding: 100px 0
    }

    .contacts-form-wrapper {
        padding: 44px 40px
    }

    .form-grid {
        gap: 20px;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1024px) {
    .contacts-form-wrapper {
        padding: 52px 48px
    }

    .contacts-form__title {
        font-size: 42px
    }
}

.form-message {
    align-items: center;
    border-radius: 12px;
    display: none;
    font-size: 15px;
    font-weight: 600;
    gap: 12px;
    gap: 7px;
    margin-top: 16px;
    padding: 14px 16px
}

.form-message.show {
    display: flex
}

.form-message svg {
    color: currentColor;
    opacity: .9
}

.form-message--success {
    background: #e8fbf4;
    border: 1px solid #9fe3c9;
    color: #0f7f65
}

.form-message--error {
    background: #fff1f1;
    border: 1px solid #f3b4b4;
    color: #b61c1c
}

.iti__selected-flag {
    color: #1f2d35
}

.iti--separate-dial-code .iti__flag-container {
    align-items: center;
    border-right: 1px solid rgba(51, 101, 116, .12);
    display: flex;
    height: 100%;
    padding: 0 8px
}

.iti__selected-flag {
    height: 100%
}

.iti__selected-dial-code {
    color: #1f2d35 !important;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px
}

.iti--separate-dial-code input.form-input {
    padding-left: 96px
}

#phone.form-input {
    color: #1f2d35;
    line-height: 1.4;
    padding-block: 13.2px 10.2px
}

#phone.form-input::-moz-placeholder {
    color: #8ba2ac
}

#phone.form-input::placeholder {
    color: #8ba2ac
}

.contacts-form .form-group {
    margin-bottom: 16px
}

.contacts-form .form-group:last-child,
.form-grid .form-group {
    margin-bottom: 0
}

.iti__country-name {
    color: var(--color-dark-lighter)
}

.cases-section {
    background: #f7fafc;
    border-top: 1px solid rgba(51, 101, 116, .12);
    padding: 50px 0
}

.cases-header {
    margin: 0 auto 36px;
    max-width: 980px;
    text-align: left
}

.cases-title {
    color: var(--color-dark);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 18px
}

@media (min-width:768px) {
    .cases-title {
        font-size: 38px
    }

    .cases-section {
        padding: 100px 0
    }
}

@media (min-width:1024px) {
    .cases-title {
        font-size: 44px
    }
}

.cases-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr
}

@media (min-width:768px) {
    .cases-grid {
        gap: 28px;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1024px) {
    .cases-grid {
        gap: 32px;
        grid-template-columns: repeat(3, 1fr)
    }
}

.case-card {
    list-style: none
}

.case-link {
    background: #fff;
    border: 1px solid rgba(51, 101, 116, .12);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(51, 101, 116, .1);
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base)
}

.case-link:hover {
    border-color: rgba(51, 101, 116, .28);
    box-shadow: 0 16px 44px rgba(51, 101, 116, .18);
    transform: translateY(-6px)
}

.case-media {
    aspect-ratio: 16/10;
    background: #000;
    margin: 0
}

.case-media img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.case-body {
    padding: 18px
}

.case-title {
    color: #2a2f33;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 8px
}

.case-cta {
    align-items: center;
    color: #3b4e57;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    opacity: .9
}

.case-cta:after {
    content: "↗";
    font-size: 14px;
    transform: translateY(1px);
    transition: transform .18s ease
}

.case-link:hover .case-cta:after {
    transform: translate(2px, 1px)
}

.footer-site {
    --bg1: color-mix(in srgb, var(--color-primary-dark) 86%, #000);
    --bg2: color-mix(in srgb, var(--color-primary) 30%, #0b1a1f);
    background: linear-gradient(180deg, var(--bg1) 0, var(--bg2) 100%);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid rgba(51, 101, 116, .25);
    color: var(--color-text);
    overflow: hidden;
    padding: 56px 0 28px;
    position: relative
}

.footer-site:before {
    background-image: url(../icons/header-pattern.svg);
    background-repeat: repeat;
    background-size: 100px 100px;
    content: "";
    inset: 0;
    opacity: .04;
    pointer-events: none;
    position: absolute
}

.footer__grid {
    align-items: start;
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr
}

.footer__brand .logo__pic {
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25));
    height: auto;
    transition: transform .25s ease;
    width: 180px
}

.footer__brand .logo__pic:hover {
    transform: translateY(-2px)
}

.footer__lead {
    color: color-mix(in srgb, var(--color-text) 82%, #000);
    margin-top: 16px;
    max-width: 520px
}

.footer__title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: 12px
}

.footer__list {
    display: grid;
    gap: 10px;
    list-style: none
}

.footer__link {
    color: var(--color-text-muted);
    display: inline-block;
    padding: 4px 0;
    position: relative;
    text-decoration: none
}

.footer__link:after {
    background: var(--gradient-primary);
    bottom: -4px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transition: width .25s ease;
    width: 0
}

.footer__link:hover {
    color: #fff
}

.footer__link:hover:after {
    width: 100%
}

.hours {
    margin: 0
}

.hours__row {
    border-bottom: 1px solid hsla(0, 0%, 100%, .06);
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr auto;
    padding: 6px 0
}

.hours__row:last-child {
    border-bottom: none
}

.hours dt {
    color: var(--color-text-muted)
}

.hours dd {
    color: #fff;
    font-weight: 600;
    margin: 0
}

.footer__note {
    align-items: center;
    background: rgba(15, 23, 42, .18);
    border: 1px solid rgba(51, 101, 116, .35);
    border-radius: 12px;
    color: color-mix(in srgb, var(--color-text) 88%, #000);
    display: flex;
    gap: 12px;
    margin-top: 28px;
    padding: 14px 16px
}

.note__icon {
    color: var(--color-primary-light);
    flex-shrink: 0
}

.footer__bottom {
    border-top: 1px solid hsla(0, 0%, 100%, .08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px
}

.footer__legal-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.footer__muted {
    border-bottom: 1px dashed hsla(0, 0%, 100%, .25);
    color: var(--color-text-muted);
    text-decoration: none
}

.footer__muted:hover {
    border-bottom-color: transparent;
    color: #fff
}

.footer__copy {
    color: color-mix(in srgb, var(--color-text) 82%, #000)
}

.footer__bottom .dot {
    opacity: .45
}

@media (min-width:768px) {
    .footer-site {
        padding: 68px 0 32px
    }

    .footer__grid {
        gap: 40px;
        grid-template-columns: 1.2fr .8fr .8fr
    }

    .footer__bottom {
        align-items: center;
        flex-direction: row;
        justify-content: space-between
    }
}

@media (min-width:1024px) {
    .footer-site {
        padding: 80px 0 36px
    }

    .footer__title {
        font-size: 22px
    }

    .footer__brand .logo__pic {
        width: 200px
    }
}

.page-main {
    align-items: center;
    background: var(--color-dark);
    color: #fff;
    display: flex;
    isolation: isolate;
    min-height: clamp(260px, 36vw, 460px);
    overflow: hidden;
    padding: calc(var(--header-height) + 24px) 0 56px;
    position: relative
}

.page-main__bg {
    inset: 0;
    position: absolute;
    z-index: 0
}

.page-main__bg img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    transform: scale(1.02);
    width: 100%
}

.page-main__overlay {
    background: linear-gradient(135deg, rgba(15, 23, 42, .85), rgba(30, 41, 59, .65) 50%, rgba(28, 57, 65, .55));
    box-shadow: inset 0 -120px 160px rgba(28, 57, 65, .45);
    inset: 0;
    position: absolute;
    z-index: 1
}

.page-main__content {
    max-width: 980px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 2
}

.page-main__title {
    background: linear-gradient(135deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.15;
    margin: 10px 0 6px;
    -webkit-text-fill-color: transparent
}

.page-main__subtitle {
    color: rgba(241, 245, 249, .9);
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.7;
    margin-top: 8px
}

.breadcrumb {
    align-items: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    display: inline-flex;
    gap: 7px
}

.breadcrumb a {
    color: var(--color-primary-light);
    font-weight: 600;
    opacity: .9;
    text-decoration: none;
    transition: color var(--transition-base), opacity var(--transition-base)
}

.breadcrumb a:hover {
    opacity: 1
}

.breadcrumb span[aria-current=page] {
    color: #e2e8f0;
    font-weight: 600;
    opacity: .9
}

.breadcrumb__sep {
    color: hsla(0, 0%, 100%, .7)
}

@media (prefers-reduced-motion:no-preference) {
    .page-main__bg img {
        transition: transform .8s ease
    }

    .page-main:hover .page-main__bg img {
        transform: scale(1.06)
    }
}

@media (min-width:768px) {
    .page-main {
        padding-bottom: 72px
    }

    .breadcrumb {
        gap: 12px
    }
}

.page-main--noimage .page-main__overlay {
    background: var(--gradient-primary)
}

.cookie-consent {
    bottom: 0;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    transition: opacity .4s ease, visibility .4s ease;
    visibility: hidden;
    z-index: 9999
}

.cookie-consent.show {
    opacity: 1;
    visibility: visible
}

.cookie-consent.show .cookie-consent__content {
    transform: translateY(0)
}

.cookie-consent__overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, .6);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0
}

.cookie-consent__content {
    background: linear-gradient(135deg, var(--color-dark-card) 0, var(--color-dark-lighter) 100%);
    border: 1px solid rgba(51, 101, 116, .3);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
    margin-inline: auto;
    max-width: 600px;
    padding: 32px 28px;
    position: relative;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    z-index: 10000
}

.cookie-consent__header {
    align-items: center;
    display: flex;
    gap: 16px;
    margin-bottom: 16px
}

.cookie-icon {
    flex-shrink: 0;
    height: 48px;
    position: relative;
    width: 48px
}

.cookie-icon:before {
    animation: cookieBounce 2s ease-in-out infinite;
    background: url(../icons/cookie.svg) 50%/contain no-repeat;
    content: "";
    filter: drop-shadow(0 4px 12px rgba(51, 101, 116, .3));
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@keyframes cookieBounce {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

.cookie-icon--small {
    height: 28px;
    width: 28px
}

.cookie-icon--small:before {
    animation: none
}

.cookie-consent__title {
    color: var(--color-text);
    font-size: 22px;
    font-weight: 800;
    margin: 0
}

.cookie-consent__text {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px
}

.cookie-options {
    background: hsla(0, 0%, 100%, .03);
    border: 1px solid hsla(0, 0%, 100%, .05);
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px
}

.cookie-consent.settings-open .cookie-options {
    animation: slideDown .3s ease-out;
    display: flex
}

@keyframes slideDown {
    0% {
        max-height: 0;
        opacity: 0
    }

    to {
        max-height: 300px;
        opacity: 1
    }
}

.cookie-option {
    position: relative
}

.cookie-checkbox {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: 12px
}

.cookie-checkbox input[type=checkbox] {
    opacity: 0;
    pointer-events: none;
    position: absolute
}

.cookie-checkbox .checkbox-custom {
    background: hsla(0, 0%, 100%, .05);
    border: 2px solid hsla(0, 0%, 100%, .3);
    flex-shrink: 0;
    height: 20px;
    margin-top: 2px;
    position: relative;
    transition: var(--transition-base);
    width: 20px
}

.cookie-checkbox .checkbox-custom:after {
    background: var(--color-primary-light);
    content: "";
    height: 10px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--transition-base);
    width: 10px
}

.cookie-checkbox input[type=checkbox]:checked+.checkbox-custom {
    background: rgba(51, 101, 116, .2);
    border-color: var(--color-primary)
}

.cookie-checkbox input[type=checkbox]:checked+.checkbox-custom:after {
    transform: translate(-50%, -50%) scale(1)
}

.cookie-checkbox input[type=checkbox]:disabled+.checkbox-custom {
    cursor: not-allowed;
    opacity: .6
}

.cookie-option__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px
}

.cookie-option__title {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700
}

.cookie-option__desc {
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.4
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.btn--cookie-settings {
    background: hsla(0, 0%, 100%, .1);
    border: 1px solid hsla(0, 0%, 100%, .2);
    color: var(--color-text);
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    min-width: 120px;
    padding: 12px 20px
}

.btn--cookie-settings:hover {
    background: hsla(0, 0%, 100%, .15);
    border-color: var(--color-primary)
}

.btn--cookie-accept {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    min-width: 140px;
    padding: 12px 20px
}

.btn--cookie-accept:hover {
    background: linear-gradient(135deg, var(--color-primary-light) 0, var(--color-primary) 100%);
    box-shadow: 0 4px 15px rgba(51, 101, 116, .4)
}

.btn--cookie-save {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    display: none;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    width: 100%
}

.cookie-consent.settings-open .btn--cookie-save {
    display: block
}

.cookie-consent.settings-open .btn--cookie-accept {
    display: none
}

.btn--cookie-save:hover {
    background: linear-gradient(135deg, var(--color-primary-light) 0, var(--color-primary) 100%);
    box-shadow: 0 4px 15px rgba(51, 101, 116, .4)
}

.cookie-consent__close {
    align-items: center;
    background: hsla(0, 0%, 100%, .1);
    border: 1px solid hsla(0, 0%, 100%, .1);
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 16px;
    transition: var(--transition-base);
    width: 32px
}

.cookie-consent__close:hover {
    background: hsla(0, 0%, 100%, .15);
    border-color: var(--color-primary);
    color: var(--color-text)
}

.cookie-settings-trigger {
    align-items: center;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    bottom: 16px;
    box-shadow: 0 4px 20px rgba(51, 101, 116, .4);
    cursor: pointer;
    display: none;
    height: 48px;
    justify-content: center;
    left: 16px;
    position: fixed;
    transition: var(--transition-base);
    width: 48px;
    z-index: 9998
}

.cookie-settings-trigger.show {
    animation: fadeInScale .4s ease-out;
    display: flex
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.cookie-settings-trigger:hover {
    box-shadow: 0 6px 25px rgba(51, 101, 116, .5);
    transform: scale(1.1)
}

.btn--cookie-accept,
.btn--cookie-settings {
    justify-content: center
}

@media (min-width:768px) {
    .cookie-consent__content {
        margin: 0 auto 20px;
        padding: 36px 32px
    }

    .cookie-consent__title {
        font-size: 24px
    }

    .cookie-consent__text {
        font-size: 16px
    }

    .cookie-consent__actions {
        gap: 16px
    }

    .btn--cookie-accept,
    .btn--cookie-settings {
        font-size: 15px;
        padding: 14px 24px
    }

    .cookie-option__title {
        font-size: 16px
    }

    .cookie-option__desc {
        font-size: 14px
    }
}

@media (min-width:1024px) {
    .cookie-consent__content {
        margin: 0 auto 30px;
        max-width: 700px
    }

    .cookie-settings-trigger,
    .scrollup {
        bottom: 30px;
        height: 60px;
        left: 30px;
        width: 60px
    }

    .scrollup {
        left: auto;
        right: 30px
    }
}   /* ===== Approach (Nasze Podejście) ===================================== */
        .approach-section {
            padding: 80px 0;
            background: #f6edf0;
            /* delikatne tło jak на скріні; м’якше за бордовий */
        }

        @media (min-width:768px) {
            .approach-section {
                padding: 100px 0;
            }
        }

        /* @media (min-width:1024px) {
            .approach-section {
                padding: 120px 0;
            }
        } */

        .approach {
            display: grid;
            grid-template-columns: 1fr;
            gap: 28px;
            align-items: start;
        }

        @media (min-width:992px) {
            .approach {
                grid-template-columns: 0.95fr 1.05fr;
                gap: 36px;
            }
        }

        /* Media */
        .approach__media {
            overflow: hidden;
            border-radius: 24px;
            background: #000;
            height: clamp(320px, 58vw, 520px);
        }

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

        /* delikatny ukośny highlight (opcjonalnie) */
        .approach__media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent 55%, rgba(255, 255, 255, .06) 56%, transparent 72%);
            pointer-events: none;
        }

        /* Content */
        .approach__content {
            background: #fff;
            border: 1px solid rgba(51, 101, 116, .12);
            border-radius: 24px;
            padding: 28px 22px;
        }

        @media (min-width:768px) {
            .approach__content {
                padding: 36px 30px;
            }
        }

        @media (min-width:1024px) {
            .approach__content {
                padding: 44px 38px;
            }
        }

        .approach__title {
            font-size: 28px;
            line-height: 1.18;
            font-weight: 800;
            color: #4b2525;
            margin: 14px 0 14px;
        }

        @media (min-width:768px) {
            .approach__title {
                font-size: 42px;
            }
        }

        @media (min-width:1200px) {
            .approach__title {
                font-size: 56px;
            }
        }

        .approach__lead {
            color: #1f3a4a;
            opacity: .9;
            font-size: 16px;
            line-height: 1.7;
            margin-bottom: 18px;
        }

        @media (min-width:768px) {
            .approach__lead {
                font-size: 17px;
            }
        }

        .approach__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin: 12px 0 8px;
        }

        @media (min-width:900px) {
            .approach__grid {
                grid-template-columns: 1fr 1fr;
                gap: 26px;
            }
        }

        .approach-feature {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding: 6px 0;
        }

        .approach-feature__text h3 {
            font-size: 18px;
            font-weight: 800;
            color: #2d3748;
            margin: 0 0 6px;
        }

        .approach-feature__text p {
            font-size: 15px;
            color: #39566a;
            line-height: 1.6;
            margin: 0;
        }

        /* Icon bubble (same sizing as site’s pills) */
        .approach-feature__icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(82, 160, 183, .12);
            border: 2px solid rgba(82, 160, 183, .35);
            position: relative;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .approach-feature__icon::before {
            content: "";
            width: 28px;
            height: 28px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: none;
            /* nie zmieniamy barwy */
        }

        /* ---- Pseudo-icon variants (both in #52a0b7) ------------------------- */
        /* Shield / check */
        .approach-feature__icon--shield::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2352a0b7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E");
        }

        /* Legal / gavel (drugi data-URI też w #52a0b7) */
        .approach-feature__icon--legal::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2352a0b7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3'/%3E%3C/svg%3E");
        }

        .approach__cta {
            margin-top: 16px;
        }

        /* Small entrance animation (matches your pattern) */
        .approach__content,
        .approach__media,
        .approach-feature {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .6s ease, transform .6s ease;
        }

        .approach--show .approach__content,
        .approach--show .approach__media,
        .approach--show .approach-feature {
            opacity: 1;
            transform: none;
        }

        /* ===== Core Values (mobile-first) ===== */
        .core-values-section {
            padding: 80px 0;
            background: #faf9fb;
        }

        .core-values {
            display: grid;
            grid-template-columns: 1fr;
            gap: 28px;
            align-items: start;
        }

        /* media (left) */
        .core-values__media {
            position: relative;
        }

        .cv-img {
            overflow: hidden;
            border-radius: 22px;
            background: #000;
        }

        .cv-img--top {
            height: clamp(220px, 58vw, 380px);
        }

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

        .cv-bottom {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 16px;
            align-items: end;
            margin-top: 14px;
        }

        .cv-img--small {
            width: clamp(180px, 49vw, 340px);
            height: clamp(155px, 40vw, 240px);

            /* width: 240px;
                height: 180px; */
            margin-top: -125px;
        }

        /* experience badge */
        .cv-exp {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .9);
            border: 1px solid rgba(51, 101, 116, .2);
            box-shadow: 0 12px 30px rgba(51, 101, 116, .12);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            width: max-content;
        }

        .cv-exp__icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: rgba(82, 160, 183, .12);
            border: 1px solid rgba(82, 160, 183, .35);
            position: relative;
        }

        .cv-exp__icon::before {
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 24px;
            height: 24px;
            background: url("../icons/star.webp") center/contain no-repeat;
            /* <- твоя іконка */
            filter: none;
            /* колір вже в іконці */
        }

        .cv-exp__num {
            font-size: 22px;
            font-weight: 900;
            line-height: 1;
            color: #1e293b;
        }

        .cv-exp__label {
            font-size: 13px;
            color: #475569;
            margin-top: 2px;
        }

        /* content (right) */
        .core-values__content {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .cv-badge {
            align-self: flex-start;
        }

        .cv-title {
            font-weight: 800;
            line-height: 1.2;
            color: #3b1f1f;
            font-size: 28px;
        }

        .cv-lead {
            color: #475569;
            font-size: 15px;
            line-height: 1.75;
        }

        .cv-list {
            list-style: none;
            display: grid;
            gap: 18px;
            margin: 6px 0 8px;
        }

        .cv-item {
            padding-left: 48px;
            position: relative;
        }

        .cv-item h3 {
            font-size: 18px;
            color: #2b2b2b;
            margin: 0 0 6px;
        }

        .cv-item p {
            color: #455468;
            font-size: 15px;
            line-height: 1.6;
        }

        /* bullets via pseudo-elements (oba w #52a0b7) */
        .cv-item::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(82, 160, 183, .14);
            border: 1px solid rgba(82, 160, 183, .35);
            box-shadow: 0 10px 20px rgba(82, 160, 183, .15) inset;
        }

        .cv-item--honesty::after,
        .cv-item--innovation::after {
            content: "";
            position: absolute;
            left: 6px;
            top: 8px;
            width: 22px;
            height: 22px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: none;
        }

        /* check-badge (uczciwość) */
        .cv-item--honesty::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2352a0b7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E");
        }

        /* legal-hammer (innowacje) – уніфікований в #52a0b7 */
        .cv-item--innovation::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2352a0b7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3'/%3E%3C/svg%3E");
        }

        /* tablet */
        @media (min-width:768px) {
            .core-values-section {
                padding: 100px 0;
            }

            .cv-title {
                font-size: 36px;
            }

            .core-values {
                gap: 40px;
            }

            /* .cv-img--top {
                height: clamp(340px, 48vw, 460px);
            } */

            /* .cv-img--small {
                width: 340px;
                height: 250px;
            } */
        }

        /* desktop */
        @media (min-width:1024px) {
            .core-values {
                grid-template-columns: 1fr 1.05fr;
                align-items: center;
                gap: 56px;
            }

            .cv-title {
                font-size: 48px;
            }

            .cv-lead {
                font-size: 17px;
                max-width: 780px;
            }

            .cv-list {
                grid-template-columns: 1fr 1fr;
                gap: 22px 36px;
            }

            .cv-item h3 {
                font-size: 20px;
            }
        }
     
        .block-spacing {
            padding: clamp(32px, 4vw, 56px) 0;
        }

        .container {
            max-width: var(--container-max-width);
            margin: 0 auto;
            padding: 0 20px;
        }

        .contact__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 28px;
        }

        @media (min-width: 980px) {
            .contact__grid {
                grid-template-columns: 1.05fr 1fr;
                gap: 32px;
                align-items: stretch;
            }
        }

        /* ---- card ---- */
        .contact__card {
            background: #fff;
            color: var(--color-dark);
            border-radius: 18px;
            padding: clamp(20px, 3.4vw, 32px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
            border: 1px solid rgba(28, 57, 65, .08);
        }

        .chip {
            display: inline-block;
            font-size: .9rem;
            line-height: 1;
            padding: .55rem .9rem;
            border-radius: 999px;
            background: rgba(28, 57, 65, .06);
            color: var(--color-primary-dark);
            margin-bottom: 14px;
        }

        .contact__title {
            font-size: clamp(28px, 4.4vw, 44px);
            line-height: 1.1;
            letter-spacing: .2px;
            color: var(--color-dark);
            margin: 4px 0 12px;
        }

        .contact__title .accent {
            color: var(--color-primary);
        }

        .contact__lead {
            color: #4b5563;
            margin: 0 0 18px;
            max-width: 46ch;
        }

        /* ---- list ---- */
        .contact__list {
            display: grid;
            gap: 14px;
            margin: 18px 0 0;
            padding: 0;
            list-style: none;
        }

        .contact__item {
            display: grid;
            grid-template-columns: 52px 1fr;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-top: 1px solid rgba(28, 57, 65, .08);
        }

        .contact__item:first-child {
            border-top: none;
        }

        .contact__label {
            display: block;
            font-size: .95rem;
            color: #64748b;
        }

        .contact__value {
            font-weight: 600;
            color: var(--color-primary-dark);
            text-decoration: none;
        }

        .contact__value:hover {
            color: var(--color-primary);
        }

        /* ---- round icon via pseudo ---- */
        .contact__item::before {
            content: "";
            width: 44px;
            height: 44px;
            border-radius: 999px;
            background: rgba(82, 160, 183, .12);
            display: inline-block;
            position: relative;
            box-shadow: inset 0 0 0 1px rgba(82, 160, 183, .22);
        }

        .contact__item::after {
            content: "";
            position: absolute;
            width: 22px;
            height: 22px;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            background: center/contain no-repeat;
            filter: drop-shadow(0 0 0 #52a0b7);
        }

        /* phone */
        .contact__item--phone {
            position: relative;
        }

        .contact__item--phone::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24' stroke='%2352a0b7' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5.5C2 4.12 3.12 3 4.5 3h1.1c.58 0 1.09.36 1.28.89l1.03 2.93a1.4 1.4 0 01-.33 1.44l-1.02 1.02a13.2 13.2 0 006.34 6.34l1.02-1.02c.38-.38.95-.52 1.44-.33l2.93 1.03c.53.19.89.7.89 1.28v1.1A2.5 2.5 0 0118.5 22h-1A15.5 15.5 0 012 6.5v-1z'/%3E%3C/svg%3E");
        }

        /* mail */
        .contact__item--mail {
            position: relative;
        }

        .contact__item--mail::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24' stroke='%2352a0b7' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 7l9 6 9-6M5 5h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2z'/%3E%3C/svg%3E");
        }

        /* map */
        .contact__item--map {
            position: relative;
        }

        .contact__item--map::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24' stroke='%2352a0b7' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 22s7-5.33 7-12a7 7 0 10-14 0c0 6.67 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
        }

        /* ---- media ---- */
        .contact__media {
            position: relative;
            margin: 0;
            border-radius: 18px;
            overflow: hidden;
            background: var(--color-dark-lighter);
            min-height: 420px;
            display: grid;
        }

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

   

       
        /* рядок контакту – простіше та стабільніше, ніж grid */
        .contact__item {
            position: relative;
            display: block;
            padding: 16px 0 16px 68px;
            /* місце під коло-іконку */
            border-top: 1px solid rgba(28, 57, 65, .08);
        }

        .contact__item:first-child {
            border-top: none;
        }

        .contact__label {
            display: block;
            font-size: .95rem;
            color: #64748b;
            margin-bottom: 2px;
        }

        .contact__value {
            display: inline-block;
            font-weight: 600;
            color: var(--color-primary-dark);
            text-decoration: none;
        }

        /* іконка: коло */
        .contact__item::before {
            content: "";
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 999px;
            background: rgba(82, 160, 183, .12);
            box-shadow: inset 0 0 0 1px rgba(82, 160, 183, .22);
        }

        /* іконка: символ усередині */
        .contact__item::after {
            content: "";
            position: absolute;
            left: 23px;
            top: 50%;
            transform: translateY(-50%);
            width: 22px;
            height: 22px;
            background: center/contain no-repeat;
        }

        /* варіанти іконок */
        .contact__item--phone::after {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 24 24' fill='none' aria-hidden='true'><path d='M22 16.92v2a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.92 4.18 2 2 0 0 1 5 2h2a2 2 0 0 1 2 1.72c.13.98.34 1.93.62 2.84a2 2 0 0 1-.45 2.11L8.09 9.09a16 16 0 0 0 6.82 6.82l1.42-1.42a2 2 0 0 1 2.11-.45c.91.28 1.86.49 2.84.62A2 2 0 0 1 22 16.92Z' stroke='%2352a0b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
        }

        .contact__item--mail::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2352a0b7' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 7l9 6 9-6M5 5h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2z'/%3E%3C/svg%3E");
        }

        .contact__item--map::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2352a0b7' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 22s7-5.33 7-12a7 7 0 10-14 0c0 6.67 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
        }

        /* перенос/неперенос */
        .contact__item--phone .contact__value,
        .contact__item--mail .contact__value {
            white-space: nowrap;
        }

        .contact__item--map .contact__value {
            white-space: normal;
        }
 
        :root {
            --color-primary: #336574;
            --color-primary-dark: #1c3941;
            --color-primary-light: #52a0b7;
            --color-dark: #0f172a;
            --color-dark-lighter: #1e293b;
            --color-dark-card: #1a1f35;
            --color-text: #f1f5f9;
            --color-text-muted: #cbd5e1;
            --color-accent: #fbbf24;
        }

        .ty {
            position: relative;
            isolation: isolate;
            padding: clamp(48px, 6vw, 96px) 0;
            color: var(--color-dark);
            background:
                radial-gradient(1200px 600px at 85% -10%, rgba(82, 160, 183, .12), transparent 70%),
                #fff;
        }

        .container {
            /* if not defined globally */
            width: min(1120px, 92%);
            margin-inline: auto;
        }

        .ty__wrap {
            position: relative;
            z-index: 1;
        }

        .ty__status {
            text-align: center;
            margin-bottom: clamp(24px, 4vw, 40px);
        }

        .ty__icon {
            width: 54px;
            height: 54px;
            display: inline-block;
            margin-bottom: 14px;
            border-radius: 999px;
            background:
                radial-gradient(closest-side, #fff 65%, transparent 66%),
                conic-gradient(var(--color-primary-light) 0 100%);
            box-shadow: 0 8px 20px rgba(28, 57, 65, .18);
            position: relative;
        }

        .ty__icon::after {
            /* checkmark */
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 26px;
            height: 26px;
            -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
            background: var(--color-primary-dark);
        }

        .ty__title {
            font-size: clamp(28px, 4.8vw, 40px);
            line-height: 1.15;
            margin: 6px 0 10px;
            color: #2a0f12;
            /* темний заголовок у тон сайту */
        }

        .ty__lead {
            max-width: 780px;
            margin: 0 auto;
            color: #334155;
        }

        .ty__case {
            margin-top: 10px;
            color: var(--color-primary-dark);
        }

        .ty__grid {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: clamp(16px, 3vw, 28px);
        }

        @media (max-width: 900px) {
            .ty__grid {
                grid-template-columns: 1fr;
            }
        }

        .ty-card {
            background: #fff;
            border: 1px solid rgba(28, 57, 65, .12);
            border-radius: 16px;
            padding: clamp(18px, 2.5vw, 28px);
            box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
        }

        .ty-card__title {
            margin: 0 0 12px;
            font-size: clamp(20px, 2.4vw, 22px);
            color: var(--color-primary-dark);
        }

        .ty-steps {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 12px;
        }

        .ty-steps li {
            display: grid;
            grid-template-columns: 20px 1fr;
            align-items: start;
            gap: 10px;
            color: #334155;
        }

        .ty-steps__dot {
            width: 12px;
            height: 12px;
            margin-top: 6px;
            border-radius: 50%;
            background: var(--color-primary-light);
            box-shadow: 0 0 0 4px rgba(82, 160, 183, .18);
        }

        .ty-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 16px;
        }

        .btn {
            --p: var(--color-primary-dark);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 18px;
            border-radius: 12px;
            font-weight: 600;
            text-decoration: none;
            transition: .2s ease;
            border: 1px solid transparent;
        }

        .btn--primary {
            background: var(--p);
            color: #fff;
        }

        .btn--primary:hover {
            filter: brightness(1.05);
            transform: translateY(-1px);
        }

        .btn--ghost {
            color: var(--color-primary-dark);
            background: transparent;
            border-color: rgba(28, 57, 65, .25);
        }

        .btn--ghost:hover {
            background: rgba(28, 57, 65, .06);
        }

        .btn--full {
            width: 100%;
            background: var(--color-primary);
            color: #fff;
        }

        .btn--full:hover {
            filter: brightness(1.06);
        }

        .ty-card--contact {
            display: grid;
            gap: 16px;
        }

        .ty-contact {
            display: grid;
            gap: 12px;
        }

        .ty-contact__row {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .ty-contact__label {
            font-size: 12px;
            color: #64748b;
        }

        .ty-contact__link {
            font-weight: 600;
            color: #0f172a;
            text-decoration: none;
        }

        .ty-contact__link:hover {
            color: var(--color-primary-dark);
        }

        .ty-contact__addr {
            font-style: normal;
            color: #0f172a
        }

        .ty-contact__icon {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            border-radius: 50%;
            background: rgba(82, 160, 183, .15);
            position: relative;
        }

        .ty-contact__icon::after {
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 22px;
            height: 22px;
            background: var(--color-primary-dark);
            mask-size: contain;
            -webkit-mask-size: contain;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-position: center;
        }

        .ty-contact__icon--phone::after {
            -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 16.92v2a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.92 4.18 2 2 0 0 1 5 2h2a2 2 0 0 1 2 1.72c.13.98.34 1.93.62 2.84a2 2 0 0 1-.45 2.11L8.09 9.09a16 16 0 0 0 6.82 6.82l1.42-1.42a2 2 0 0 1 2.11-.45c.91.28 1.86.49 2.84.62A2 2 0 0 1 22 16.92Z' fill='%23000'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 16.92v2a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.92 4.18 2 2 0 0 1 5 2h2a2 2 0 0 1 2 1.72c.13.98.34 1.93.62 2.84a2 2 0 0 1-.45 2.11L8.09 9.09a16 16 0 0 0 6.82 6.82l1.42-1.42a2 2 0 0 1 2.11-.45c.91.28 1.86.49 2.84.62A2 2 0 0 1 22 16.92Z' fill='%23000'/></svg>");
        }

        .ty-contact__icon--mail::after {
            -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2 8 6 8-6' fill='%23000'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2 8 6 8-6' fill='%23000'/></svg>");
        }

        .ty-contact__icon--map::after {
            -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z' fill='%23000'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z' fill='%23000'/></svg>");
        }

        .ty-hours {
            margin-top: 4px;
            border-top: 1px solid rgba(28, 57, 65, .12);
            padding-top: 12px;
        }

        .ty-hours__title {
            margin: 0 0 8px;
            font-size: 14px;
            color: #0f172a;
        }

        .ty-hours__list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 6px;
        }

        .ty-hours__list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            color: #334155;
        }

        .ty-hours__list strong {
            font-weight: 700;
            color: #0f172a
        }

        /* background photo */
        .ty-bg {
            position: absolute;
            inset: auto 0 0 auto;
            right: 2%;
            z-index: 0;
            width: min(560px, 46vw);
            pointer-events: none;
            opacity: .12;
            filter: saturate(.9) contrast(.9);
        }

        .ty-bg img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, .12);
        }

        @media (max-width: 900px) {
            .ty-bg {
                display: none;
            }
        } 
        .faq-full-section {
            padding: 80px 0;
            background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
            position: relative;
        }

        .faq-full {
            display: grid;
            grid-template-columns: 1fr;
            gap: 48px;
        }

        /* FAQ Sidebar */
        .faq-sidebar {
            display: none;
            position: relative;
        }

        .faq-sidebar__inner {
            position: sticky;
            top: 100px;
        }

        .faq-nav {
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: white;
            padding: 24px;
            border: 1px solid rgba(51, 101, 116, 0.15);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        }

        .faq-nav__item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 20px;
            text-decoration: none;
            color: #475569;
            font-size: 15px;
            font-weight: 600;
            transition: var(--transition-base);
            border-left: 3px solid transparent;
            position: relative;
        }

        .faq-nav__item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0;
            background: var(--gradient-primary);
            transition: width var(--transition-base);
        }

        .faq-nav__item:hover {
            color: var(--color-primary);
            background: rgba(51, 101, 116, 0.05);
        }

        .faq-nav__item:hover::before {
            width: 3px;
        }

        .faq-nav__item.active {
            color: var(--color-primary);
            background: rgba(51, 101, 116, 0.1);
            border-left-color: var(--color-primary);
        }

        .faq-nav__item.active::before {
            width: 3px;
        }

        .faq-nav__item svg {
            flex-shrink: 0;
            opacity: 0;
            transform: translateX(-5px);
            transition: var(--transition-base);
        }

        .faq-nav__item:hover svg,
        .faq-nav__item.active svg {
            opacity: 1;
            transform: translateX(0);
        }

        .faq-nav__item svg path {
            stroke: var(--color-primary);
        }

        /* FAQ Content */
        .faq-content {
            position: relative;
        }

        .faq-category {
            margin-bottom: 64px;
            scroll-margin-top: 100px;
        }

        .faq-category:last-child {
            margin-bottom: 0;
        }

        .faq-category__title {
            font-size: 32px;
            font-weight: 800;
            color: var(--color-dark);
            margin-bottom: 32px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--color-primary);
            position: relative;
        }

        .faq-category__title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 80px;
            height: 2px;
            background: var(--color-primary-light);
        }

        /* FAQ Items */
        .faq-category__accordion {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .faq-item {
            background: white;
            border: 1px solid rgba(51, 101, 116, 0.15);
            transition: var(--transition-base);
            overflow: hidden;
        }

        .faq-item:hover {
            border-color: rgba(51, 101, 116, 0.3);
            box-shadow: 0 4px 15px rgba(51, 101, 116, 0.08);
        }

        .faq-item.active {
            border-color: var(--color-primary);
            box-shadow: 0 4px 20px rgba(51, 101, 116, 0.12);
        }

        .faq-item__header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding: 20px 24px;
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            transition: var(--transition-base);
        }

        .faq-item:hover .faq-item__header {
            background: rgba(51, 101, 116, 0.03);
        }

        .faq-item.active .faq-item__header {
            background: rgba(51, 101, 116, 0.05);
        }

        .faq-item__question {
            font-size: 16px;
            font-weight: 700;
            color: #2d3748;
            flex: 1;
            transition: var(--transition-base);
        }

        .faq-item.active .faq-item__question {
            color: var(--color-primary);
        }

        .faq-item__icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            transition: transform var(--transition-base);
        }

        .faq-item__icon svg path {
            stroke: #94a3b8;
            transition: var(--transition-base);
        }

        .faq-item.active .faq-item__icon {
            transform: rotate(180deg);
        }

        .faq-item.active .faq-item__icon svg path {
            stroke: var(--color-primary);
        }

        .faq-item__content {
            display: none;
            overflow: hidden;
        }

        .faq-item.active .faq-item__content {
            display: block;
            animation: faqSlideDown 0.4s ease-out;
        }

        .faq-item__body {
            padding: 0 24px 24px;
            color: #475569;
            font-size: 15px;
            line-height: 1.7;
        }

        .faq-item__body p {
            margin: 0;
        }

        @keyframes faqSlideDown {
            0% {
                opacity: 0;
                max-height: 0;
            }

            100% {
                opacity: 1;
                max-height: 500px;
            }
        }

        /* Mobile Sidebar Toggle */
        .faq-sidebar-toggle {
            display: block;
            width: 100%;
            padding: 16px 20px;
            background: white;
            border: 1px solid rgba(51, 101, 116, 0.2);
            color: var(--color-dark);
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            margin-bottom: 24px;
            transition: var(--transition-base);
            position: relative;
        }

        .faq-sidebar-toggle::after {
            content: '';
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23336574' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            transition: transform var(--transition-base);
        }

        .faq-sidebar-toggle.active::after {
            transform: translateY(-50%) rotate(180deg);
        }

        .faq-sidebar-mobile {
            display: none;
            margin-bottom: 32px;
        }

        .faq-sidebar-mobile.show {
            display: block;
            animation: faqSlideDown 0.3s ease-out;
        }

        /* Tablet Styles */
        @media (min-width: 768px) {
            .faq-full-section {
                padding: 100px 0;
            }

            .faq-category {
                margin-bottom: 80px;
            }

            .faq-category__title {
                font-size: 38px;
                margin-bottom: 36px;
            }

            .faq-category__accordion {
                gap: 20px;
            }

            .faq-item__header {
                padding: 24px 28px;
            }

            .faq-item__question {
                font-size: 17px;
            }

            .faq-item__body {
                padding: 0 28px 28px;
                font-size: 16px;
            }
        }

        /* Desktop Styles */
        @media (min-width: 1024px) {
            /* .faq-full-section {
                padding: 120px 0;
            } */

            .faq-full {
                grid-template-columns: 280px 1fr;
                gap: 64px;
            }

            .faq-sidebar {
                display: block;
            }

            .faq-sidebar-toggle {
                display: none;
            }

            .faq-category__title {
                font-size: 42px;
                margin-bottom: 40px;
            }

            .faq-item__header {
                padding: 26px 32px;
            }

            .faq-item__question {
                font-size: 18px;
            }

            .faq-item__body {
                padding: 0 32px 32px;
            }
        }

        @media (min-width: 1280px) {
            .faq-full {
                grid-template-columns: 320px 1fr;
                gap: 80px;
            }

            .faq-category__title {
                font-size: 44px;
            }
        }

        /* Scroll Behavior */
        html {
            scroll-behavior: smooth;
        }

        /* Active Section Highlight */
        .faq-category.in-view .faq-category__title {
            animation: titleHighlight 0.6s ease-out;
        }

        @keyframes titleHighlight {
            0% {
                transform: translateX(-10px);
                opacity: 0.8;
            }

            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }   
        .legal {
            --lg-gap: clamp(20px, 3vw, 28px);
            --lg-radius: 18px;
            --lg-border: 1px solid rgba(51, 101, 116, 0.18);
            --lg-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
            --lg-muted: #64748b;
            --lg-muted-2: #475569;
        }

        .legal-section {
            padding: clamp(60px, 6vw, 96px) 0;
            background: #fff;
        }

        /* Grid (контент + опційний TOC) */
        .legal-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--lg-gap);
        }

        @media (min-width: 1024px) {
            .legal-grid {
                grid-template-columns: minmax(0, 1fr) 300px;
                align-items: start;
            }
        }

        /* Картка з контентом */
        .legal-card {
            background: #ffffff;
            border: var(--lg-border);
            border-radius: var(--lg-radius);
            box-shadow: var(--lg-shadow);
            padding: clamp(24px, 3.2vw, 40px);
        }

        /* Заголовок сторінки */
        .legal-title {
            font-weight: 800;
            font-size: clamp(28px, 4.2vw, 44px);
            line-height: 1.15;
            color: var(--color-dark);
            margin: 0 0 10px;
        }

        /* Чіп / дата набуття чинності */
        .legal-meta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 12px;
            border-radius: 9px;
            background: rgba(82, 160, 183, 0.1);
            color: var(--color-primary-dark);
            font-weight: 600;
            font-size: 13px;
            margin: 6px 0 22px;
        }

        /* Типографіка всередині */
        .legal-content {
            color: var(--lg-muted-2);
            font-size: clamp(16px, 1.9vw, 17px);
            line-height: 1.75;
        }

        .legal-content p {
            margin: 0 0 1rem;
        }

        .legal-content strong {
            color: var(--color-dark);
        }

        /* Нумерація розділів (h3) */
        .legal-content {
            counter-reset: section;
        }

        .legal-content h2,
        .legal-content h3 {
            color: var(--color-dark);
            margin: 28px 0 10px;
            line-height: 1.25;
        }

        .legal-content h2 {
            font-size: clamp(22px, 3vw, 28px);
            font-weight: 800;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(51, 101, 116, 0.16);
        }

        .legal-content h3 {
            font-size: clamp(18px, 2.6vw, 22px);
            font-weight: 800;
            position: relative;
            padding-left: 46px;
        }

        .legal-content h3::before {
            counter-increment: section;
            content: counter(section) ".";
            position: absolute;
            left: 0;
            top: 0;
            height: 34px;
            width: 34px;
            display: grid;
            place-items: center;
            border-radius: 10px;
            background: var(--gradient-primary);
            color: #fff;
            font-weight: 800;
        }

        /* Списки */
        .legal-content ul,
        .legal-content ol {
            padding-left: 1.2rem;
            margin: 10px 0 18px;
        }

        .legal-content li {
            margin: 6px 0;
        }

        .legal-content ul li {
            list-style: disc;
        }

        .legal-content ol li {
            list-style: decimal;
        }

        /* Виділені блоки / примітки */
        .legal-note {
            margin: 18px 0 22px;
            padding: 16px 18px;
            border-left: 4px solid var(--color-primary);
            background: rgba(51, 101, 116, 0.06);
            border-radius: 12px;
            color: var(--lg-muted-2);
        }

        /* Посилання */
        .legal-content a {
            color: var(--color-primary);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .legal-content a:hover {
            color: var(--color-primary-light);
        }

        /* TOC (опційно, якщо додаси) */
        .legal-toc {
            position: sticky;
            top: 100px;
            display: none;
            padding: 18px;
            border: var(--lg-border);
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
        }

        @media (min-width: 1024px) {
            .legal-toc {
                display: block;
            }
        }

        .legal-toc__title {
            font-weight: 800;
            color: var(--color-dark);
            font-size: 16px;
            margin: 0 0 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid rgba(51, 101, 116, 0.15);
        }

        .legal-toc ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 8px;
        }

        .legal-toc a {
            display: block;
            padding: 10px 12px;
            border-radius: 10px;
            color: var(--lg-muted);
            text-decoration: none;
            border: 1px solid transparent;
            transition: var(--transition-base);
        }

        .legal-toc a:hover {
            color: var(--color-primary-dark);
            border-color: rgba(51, 101, 116, 0.18);
            background: rgba(51, 101, 116, 0.05);
        }

        /* Таблиці всередині (якщо будуть) */
        .legal-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 12px 0 20px;
            border: var(--lg-border);
            border-radius: 12px;
            overflow: hidden;
        }

        .legal-content th,
        .legal-content td {
            padding: 12px 14px;
            border-bottom: 1px solid rgba(51, 101, 116, 0.12);
            text-align: left;
        }

        .legal-content thead th {
            background: rgba(51, 101, 116, 0.07);
            color: var(--color-dark);
            font-weight: 800;
        }

        .legal-content tbody tr:hover td {
            background: rgba(51, 101, 116, 0.04);
        }

        /* Версія для друку */
        @media print {

            .header,
            .footer,
            .legal-toc,
            .menu-toggle,
            .mobile-nav {
                display: none !important;
            }

            .legal-section {
                padding: 0;
            }

            .legal-card {
                border: none;
                box-shadow: none;
                padding: 0;
            }

            .legal-title {
                margin-top: 0;
            }
        }

        /* Невеликі покращення контенту з твого HTML */
        .privacy-content {
            /* якщо не змінюєш класи — теж виглядатиме як legal */
            composes: legal-content;
        } 
       

        .legal {
            --lg-gap: clamp(20px, 3vw, 28px);
            --lg-radius: 18px;
            --lg-border: 1px solid rgba(51, 101, 116, 0.18);
            --lg-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
            --lg-muted: #64748b;
            --lg-muted-2: #475569;
        }

        .legal-section {
            padding: clamp(60px, 6vw, 96px) 0;
            background: #fff;
        }

        /* Grid (контент + опційний TOC) */
        .legal-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--lg-gap);
        }

        @media (min-width: 1024px) {
            .legal-grid {
                grid-template-columns: minmax(0, 1fr) 300px;
                align-items: start;
            }
        }

        /* Картка з контентом */
        .legal-card {
            background: #ffffff;
            border: var(--lg-border);
            border-radius: var(--lg-radius);
            box-shadow: var(--lg-shadow);
            padding: clamp(24px, 3.2vw, 40px);
        }

        /* Заголовок сторінки */
        .legal-title {
            font-weight: 800;
            font-size: clamp(28px, 4.2vw, 44px);
            line-height: 1.15;
            color: var(--color-dark);
            margin: 0 0 10px;
        }

        /* Чіп / дата набуття чинності */
        .legal-meta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 12px;
            border-radius: 9px;
            background: rgba(82, 160, 183, 0.1);
            color: var(--color-primary-dark);
            font-weight: 600;
            font-size: 13px;
            margin: 6px 0 22px;
        }

        /* Типографіка всередині */
        .legal-content {
            color: var(--lg-muted-2);
            font-size: clamp(16px, 1.9vw, 17px);
            line-height: 1.75;
        }

        .legal-content p {
            margin: 0 0 1rem;
        }

        .legal-content strong {
            color: var(--color-dark);
        }

        /* Нумерація розділів (h3) */
        .legal-content {
            counter-reset: section;
        }

        .legal-content h2,
        .legal-content h3 {
            color: var(--color-dark);
            margin: 28px 0 10px;
            line-height: 1.25;
        }

        .legal-content h2 {
            font-size: clamp(22px, 3vw, 28px);
            font-weight: 800;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(51, 101, 116, 0.16);
        }

        .legal-content h3 {
            font-size: clamp(18px, 2.6vw, 22px);
            font-weight: 800;
            position: relative;
            padding-left: 46px;
        }

        .legal-content h3::before {
            counter-increment: section;
            content: counter(section) ".";
            position: absolute;
            left: 0;
            top: 0;
            height: 34px;
            width: 34px;
            display: grid;
            place-items: center;
            border-radius: 10px;
            background: var(--gradient-primary);
            color: #fff;
            font-weight: 800;
        }

        /* Списки */
        .legal-content ul,
        .legal-content ol {
            padding-left: 1.2rem;
            margin: 10px 0 18px;
        }

        .legal-content li {
            margin: 6px 0;
        }

        .legal-content ul li {
            list-style: disc;
        }

        .legal-content ol li {
            list-style: decimal;
        }

        /* Виділені блоки / примітки */
        .legal-note {
            margin: 18px 0 22px;
            padding: 16px 18px;
            border-left: 4px solid var(--color-primary);
            background: rgba(51, 101, 116, 0.06);
            border-radius: 12px;
            color: var(--lg-muted-2);
        }

        /* Посилання */
        .legal-content a {
            color: var(--color-primary);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .legal-content a:hover {
            color: var(--color-primary-light);
        }

        /* TOC (опційно, якщо додаси) */
        .legal-toc {
            position: sticky;
            top: 100px;
            display: none;
            padding: 18px;
            border: var(--lg-border);
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
        }

        @media (min-width: 1024px) {
            .legal-toc {
                display: block;
            }
        }

        .legal-toc__title {
            font-weight: 800;
            color: var(--color-dark);
            font-size: 16px;
            margin: 0 0 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid rgba(51, 101, 116, 0.15);
        }

        .legal-toc ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 8px;
        }

        .legal-toc a {
            display: block;
            padding: 10px 12px;
            border-radius: 10px;
            color: var(--lg-muted);
            text-decoration: none;
            border: 1px solid transparent;
            transition: var(--transition-base);
        }

        .legal-toc a:hover {
            color: var(--color-primary-dark);
            border-color: rgba(51, 101, 116, 0.18);
            background: rgba(51, 101, 116, 0.05);
        }

        /* Таблиці всередині (якщо будуть) */
        .legal-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 12px 0 20px;
            border: var(--lg-border);
            border-radius: 12px;
            overflow: hidden;
        }

        .legal-content th,
        .legal-content td {
            padding: 12px 14px;
            border-bottom: 1px solid rgba(51, 101, 116, 0.12);
            text-align: left;
        }

        .legal-content thead th {
            background: rgba(51, 101, 116, 0.07);
            color: var(--color-dark);
            font-weight: 800;
        }

        .legal-content tbody tr:hover td {
            background: rgba(51, 101, 116, 0.04);
        }

        /* Версія для друку */
        @media print {

            .header,
            .footer,
            .legal-toc,
            .menu-toggle,
            .mobile-nav {
                display: none !important;
            }

            .legal-section {
                padding: 0;
            }

            .legal-card {
                border: none;
                box-shadow: none;
                padding: 0;
            }

            .legal-title {
                margin-top: 0;
            }
        }

        /* Невеликі покращення контенту з твого HTML */
        .privacy-content {
            /* якщо не змінюєш класи — теж виглядатиме як legal */
            composes: legal-content;
        } 
 
        /* ===== Testimonials ===== */
        .testimonials-section {
            padding: 80px 0;
            background: #f7fafc;
        }

        .testimonials-title {
            font-size: 36px;
            font-weight: 800;
            color: var(--color-dark);
            margin: 22px 0 34px;
        }

        .t-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 22px;
        }

        .t-card {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            align-items: stretch;
            background: #fff;
            border: 1px solid rgba(51, 101, 116, .15);
            border-radius: 18px;
            box-shadow: 0 6px 24px rgba(51, 101, 116, .08);
            transition: transform .25s var(--transition-base),
                box-shadow .25s var(--transition-base),
                border-color .25s var(--transition-base);
        }

        .t-card:hover {
            transform: translateY(-4px);
            border-color: var(--color-primary);
            box-shadow: 0 14px 38px rgba(51, 101, 116, .18);
        }

        /* photo */
        .t-card__photo {
            padding: 14px 0 14px 14px;
        }

        .image-anime {

            max-height: 300px;
            object-fit: cover;
            max-width: 350px;
            margin-inline: auto;
        }

        /* photo */
        .image-anime img {
            object-position: top;
        }

        @media (min-width: 576px) {

            .t-card {
                grid-template-columns: 140px 1fr;
            }

            /* photo */
            .image-anime {
                max-height: auto;
            }
        }


        .t-card__photo .image-anime,
        .t-card__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 14px;
            /* усі 4 кути */
            overflow: hidden;
            display: block;
        }

        /* body */
        .t-card__body {
            padding: 18px 18px 16px 6px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* quote text + icon */
        .t-card__quote {
            position: relative;
            color: #334155;
            line-height: 1.7;
            padding-left: 38px;
            min-height: 28px;
        }

        .t-card__quote::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 26px;
            height: 26px;
            background: url("../images/testimonial-quote.svg") center/contain no-repeat;
            filter: drop-shadow(0 2px 6px rgba(51, 101, 116, .25));
        }

        /* divider */
        .t-card__divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(51, 101, 116, .12), rgba(51, 101, 116, .04));
            margin: 14px 0 10px;
        }

        /* meta */
        .t-card__name {
            font-size: 16px;
            font-weight: 800;
            color: #1f2937;
            margin: 0 0 4px;
        }

        .t-card__result {
            font-size: 13.5px;
            color: #64748b;
            margin: 0;
        }

        /* responsive */
        @media (min-width:768px) {
            .t-grid {
                grid-template-columns: 1fr 1fr;
                gap: 24px;
            }

            .t-card {
                grid-template-columns: 180px 1fr;
            }
        }

        @media (min-width:1024px) {
            .testimonials-section {
                padding: 96px 0;
            }

            .testimonials-title {
                font-size: 44px;
            }

            .t-card {
                grid-template-columns: 220px 1fr;
                border-radius: 20px;
            }

            .t-card__photo .image-anime,
            .t-card__photo img {
                border-radius: 16px;
            }
        } .form-group--phone { position: relative; }

.form-group--phone .phone-flag{
  position:absolute;
  left:14px;
  top:1.5px;
  height:calc(14px + 15px * 1.4 + 14px);
  display:flex;
  align-items:center;
  pointer-events:none;
  z-index:2;
}

.form-group--phone .phone-flag img{
  width:28px;
  height:20px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.1);
  display:block;
}

.form-group--phone .phone-prefix{
  position:absolute;
  left:48px;
  top:1.5px;
  height:calc(14px + 15px * 1.4 + 14px);
  display:flex;
  align-items:center;
  font-size:15px;
  font-weight:500;
  color:#1f2d35;
  opacity:.75;
  pointer-events:none;
  z-index:2;
}

.form-group--phone .form-input{
  padding-left:84px;
}

.form-group--phone .form-error{
  display:block;
  color:#e74c3c;
  font-size:12px;
  margin-top:4px;
  min-height:16px;
}